Version Ocre, texto grande, flechas largas

This commit is contained in:
Siroco 2020-10-26 10:29:22 +01:00
parent 695751627a
commit 9682f646cb
17 changed files with 375 additions and 26 deletions

16
src/_variables.scss Normal file
View File

@ -0,0 +1,16 @@
// Create your Sass color vars (will be available in all the project)
$primary: #ffffff;
$accent: #d33131;
$reverse: #000000;
$green: #4caf50;
$yellow: #ffeb3b;
$warn: yellow;
//media query
$breakpoint-tablet: 768px;
$breakpoint-phone: 500px;
$background-color: #1c1c1c;
// $slide-background: #f90;
$slide-background: #cc7722;
$backgroundhover: #ff0038b5;

View File

@ -6,9 +6,10 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module'; import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { SlideComponent } from './slide/slide.component'; import { SlideComponent } from './slide/slide.component';
import { InitComponent } from './init/init.component';
import { ClientService } from './client.service'; import { ClientService } from './client.service';
import { InitComponent } from './init/init.component'; import { PlayerService } from './player.service';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -23,7 +24,8 @@ import { InitComponent } from './init/init.component';
HttpClientModule HttpClientModule
], ],
providers: [ providers: [
ClientService ClientService,
PlayerService,
], ],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })

View File

@ -1,5 +1,14 @@
<div class="slide"> <div class="slide">
<div class="element"> <div class="element">
<div class="round-button" title="Pulsa para iniciar" routerLink="home"></div> <h1 routerLink="home" (click)="play()" style="cursor:pointer">Beire</h1>
<h2>Un propuesta de Maite Redondo y Luca Rullo</h2>
<!-- <div class="round-button" title="Pulsa para iniciar" routerLink="home" (click)="play()"></div> -->
<h3>Con la ayuda de Pedro, María, Luis, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre,Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre </h3>
<div class="element logo">
<img src="assets/img/landarte_logo.png"/>
<img src="assets/img/logoBeire.png"/>
<img src="assets/img/logoEscuelaMusicaOlite.jpg"/>
<img src="assets/img/logoSoinumapa.png"/>
</div>
</div> </div>
</div> </div>

View File

@ -1,9 +1,16 @@
@import "../../_variables.scss";
h1 {
margin-top:0;
margin-bottom:0;
}
div.slide { div.slide {
color:#fff; color:$primary;
width:100vw; width:100vw;
height:100vh; height:100vh;
background-size:cover; background-size:cover;
background-color:#f90; background-color:$slide-background;
background-blend-mode: luminosity; background-blend-mode: luminosity;
display:flex; display:flex;
justify-content: center; justify-content: center;
@ -19,18 +26,40 @@ div.element {
text-align:center; text-align:center;
} }
div.logo img {
padding:10px;
max-height:40px;
max-width:100px;
}
div.round-button { div.round-button {
opacity:0.6;
cursor:pointer; cursor:pointer;
margin:auto; margin:auto;
font-size:2em; font-size:2em;
border:5px solid #fff; /*border:5px solid #fff;*/
color:#fff; color:#fff;
border-radius:100%; border-radius:100%;
width:10vw; width:5vw;
height:10vw; height:5vw;
background:$primary;
transition:1s; transition:1s;
display:flex;
align-items:center;
text-align: center;
animation-name: heartBeat;
-webkit-animation-name: heartBeat;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-delay: 3;
-webkit-animation-delay: 3;
} }
div.round-button:hover { div.round-button:hover {
background:#fff; background-color:$backgroundhover;
opacity:0.3;
//transform:rotate(-90deg);
} }

View File

@ -1,4 +1,6 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { PlayerService } from '../player.service';
import { Observable } from 'rxjs';
@Component({ @Component({
selector: 'app-init', selector: 'app-init',
@ -7,9 +9,15 @@ import { Component, OnInit } from '@angular/core';
}) })
export class InitComponent implements OnInit { export class InitComponent implements OnInit {
constructor() { } constructor(
private playerService:PlayerService
) { }
ngOnInit(): void { ngOnInit(): void {
} }
play() {
this.playerService.playUrl("https://www.soinumapa.net/wp-content/uploads/2015/11/oibar_merkatua.mp3")
}
} }

View File

@ -0,0 +1,16 @@
import { TestBed } from '@angular/core/testing';
import { PlayerService } from './player.service';
describe('PlayerService', () => {
let service: PlayerService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(PlayerService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});

174
src/app/player.service.ts Normal file
View File

@ -0,0 +1,174 @@
import { Injectable,OnInit } from '@angular/core';
import { Subject,Observable } from 'rxjs';
import { ClientService } from './client.service';
@Injectable({
providedIn: 'root'
})
export class PlayerService {
audio:any;
audio_paused:boolean = true;
audio_stopped = true;
audio_status = "init";
/* Playing */
private _audio_is_playing = new Subject();
public audio_is_playing$ = this._audio_is_playing.asObservable();
audio_buffered;
/* Time */
private _audio_current_time = new Subject();
public audio_current_time$ = this._audio_current_time.asObservable();
audio_duration;
audio_elapsed;
audio_position;
/* Player App */
private _init_app = new Subject();
init_app$ = this._init_app.asObservable();
audio_title;
audio_id;
audio_url;
constructor(
private clientService:ClientService
) {
this.audio = new Audio();
this.audio_paused = true; //audio not playing
this._audio_is_playing.next(this.audio_paused);
this.audio_stopped = true;
}
ngOnInit() {
// https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
//end audio play
this.audio_status = "init"
this.audio.onended = this.handleEnded.bind(this);
this.audio.oncanplay= this.handledCanPlay.bind(this);
//play updates
this.audio.ontimeupdate = this.handleTimeUpdate.bind(this);
this.audio.onwaiting = this.handleWaiting.bind(this);
this.audio.onloadedmetadata = this.handleLoadMetadata.bind(this);
}
playUrl(url) {
this.audio.src = url;
this.audio.load();
this.audio.ontimeupdate = this.handleTimeUpdate.bind(this);
this.audio.onloadstart = () => {this.audio_buffered = 0;}
this.audio.onended = (url) => { this.audio.playUrl(url); /* loop player */ };
this.audio.onprogress = this.onProgress()
this.audio.oncanplay = () => {
this._init_app.next(true);
this.audio_paused=false;
this._audio_is_playing.next(this.audio_paused);
this.canPlay();
};
}
canPlay() {
this.audio_status = "canplay";
var a = this.audio.play();
try {
if (a!==undefined) {
a.then(_ => {
this.initPlayer(this.audio_title,this.audio_id);
}).catch(error=>{
console.log(error)
console.log("not possible to play")
// show play button!!!
});
}
} catch (e) {
/* firefox & old browsers not use Observale*/
this.initPlayer(this.audio_title,this.audio_id);
}
}
initPlayer(title,id) {
this.audio_title=title;
this.audio_stopped = false;
this.audio_paused = false;
this.audio_id = id;
}
stop() {
this.audio.onloadstart = null;
this.audio.oncanplay = null
this.audio.onprogress = null;
this.audio.pause();
this.audio_buffered=-1
this.audio.currentTime = 0;
this.audio.removeAttribute('src');
this.audio.load();
this.audio_paused = true;
this.audio_stopped = true;
this.audio_id = 0;
this.audio_url="";
}
onProgress() {
var duration = this.audio.duration;
if (duration > 0) {
for (var i=0; i<this.audio.buffered.length; i++) {
if (this.audio.buffered.start(this.audio.buffered.length - 1 - i) < this.audio.currentTime) {
this.audio_buffered = this.audio.buffered.end(this.audio.buffered.length-1);
}
}
}
}
//handleEvents
handleStop() {
this.stop();
}
handleEnded(e) {
this.stop();
this.audio_status = "finish";
}
handleTimeUpdate(e) {
this.audio_status = "playing";
let elapsed = this.audio.currentTime;
let duration = this.audio.duration;
/* para pinchar un streaming */
//if (duration == NaN || duration == Infinity || this.audio.src === environment.urlStream) duration=0;
if (elapsed) {
this.audio_position = elapsed / duration;
this.audio_elapsed = this.formatTime(elapsed);
this.audio_duration = this.formatTime(duration);
this._audio_current_time.next({currentTime: this.formatTime(elapsed), duration: this.formatTime(duration)});
}
}
handledCanPlay(e) {
console.log(e)
//play
}
handleWaiting() {
this.audio_status = "waiting";
}
handleLoadMetadata(e) {
console.log(e)
}
/* utils */
formatTime(seconds) {
let minutes:any = Math.floor(seconds / 60);
minutes = (minutes >= 10) ? minutes : "0" + minutes;
seconds = Math.floor(seconds % 60);
seconds = (seconds >= 10) ? seconds : "0" + seconds;
return minutes + ":" + seconds;
}
}

View File

@ -2,7 +2,6 @@
<div class="content"> <div class="content">
<div class="element big-title" [innerHTML]="slide.title"></div> <div class="element big-title" [innerHTML]="slide.title"></div>
<div class="element second-title" [innerHTML]="slide.content"></div> <div class="element second-title" [innerHTML]="slide.content"></div>
<div class="element logo" *ngIf="slide.name=='home'"><img style="padding-top:30px;max-width:100px;" src="assets/img/landarte_logo.png"/></div>
</div> </div>
</div> </div>

View File

@ -1,15 +1,18 @@
@import "../../_variables.scss";
div.slide { div.slide {
color:#fff; color:$primary;
width:100vw; width:100vw;
height:100vh; height:100vh;
background-size:cover; background-size:cover;
background-color:#f90; background-color:$slide-background;
background-blend-mode: luminosity; background-blend-mode: luminosity;
background-position: center center;
display:flex; display:flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
text-align: center; text-align: center;
overflow:crosshair; overflow:hidden;
} }
div.element { div.element {
@ -19,14 +22,16 @@ div.element {
} }
div.big-title { div.big-title {
font-family:"Staatliches",sans-serif; text-transform:uppercase;
font-size:10rem; font-weight: bold;
font-family:"Swiss Bold",sans-serif;
font-size:10vw;
opacity:0.6; opacity:0.6;
} }
div.second-title { div.second-title {
font-size:3rem; font-size:3vw;
font-family:"Reenie Beanie",serif; font-family:"Swiss Light",serif;
} }
/* controls */ /* controls */

View File

@ -3,9 +3,7 @@ import { ClientService } from '../client.service';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import {environment} from '../../environments/environment'; import {environment} from '../../environments/environment';
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import { PlayerService } from '../player.service';
@Component({ @Component({
selector: 'app-slide', selector: 'app-slide',
@ -20,6 +18,7 @@ export class SlideComponent implements OnInit {
private clientService:ClientService, private clientService:ClientService,
private route: ActivatedRoute, private route: ActivatedRoute,
private router: Router, private router: Router,
private playerService:PlayerService,
) {} ) {}
ngOnInit(): void { ngOnInit(): void {
@ -48,7 +47,7 @@ export class SlideComponent implements OnInit {
//ArrowRight //ArrowRight
//ArrowUp //ArrowUp
//ArrowDown //ArrowDown
console.log(e) //console.log(e)
switch (e.code) { switch (e.code) {
case "ArrowLeft" : case "ArrowLeft" :
this.left(e); this.left(e);

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 KiB

View File

@ -1,3 +1,4 @@
export const environment = { export const environment = {
production: true production: true,
uriAPI: "https://public.audio-lab.org/beireapi/"
}; };

View File

@ -1,10 +1,101 @@
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
@import url('https://fonts.googleapis.com/css2?family=Raleway&family=Reenie+Beanie&family=Staatliches&display=swap'); //@import url('https://fonts.googleapis.com/css2?family=Raleway&family=Reenie+Beanie&family=Staatliches&display=swap');
@import './_variables.scss';
@font-face{
font-family:"Swiss Bold";
src:url('assets/font/swissboldcondensed.woff2');
}
@font-face{
font-family:"Swiss Light";
src:url('assets/font/swisslight.woff2');
}
body { body {
margin:0; margin:0;
padding:0; padding:0;
background-color:#1c1c1c; background-color:$background-color;
cursor:none; cursor:crosshair;
font-family:"Swiss Light";
}
h1 {
// font-family:"Staatliches",sans-serif;
text-transform:uppercase;
font-family:"Swiss Bold";
font-size:10vw;
opacity:0.6;
}
h2 {
font-size:3vw;
font-family:"Swiss Light",serif;
}
/* animations css */
@keyframes heartBeat {
0% {
transform: scale(none);
-webkit-transform: scale(none);
}
20% {
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
30% {
transform: scale(1.05);
-webkit-transform: scale(1.05);
}
45% {
transform: scale(1.25);
-webkit-transform: scale(1.25);
}
50% {
transform: scale(none);
-webkit-transform: scale(none);
}
100% {
transform: scale(none);
-webkit-transform: scale(none);
}
}
@-webkit-keyframes heartBeat {
0% {
transform: scale(none);
-webkit-transform: scale(none);
}
20% {
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
30% {
transform: scale(1.05);
-webkit-transform: scale(1.05);
}
45% {
transform: scale(1.25);
-webkit-transform: scale(1.25);
}
50% {
transform: scale(none);
-webkit-transform: scale(none);
}
100% {
transform: scale(none);
-webkit-transform: scale(none);
}
} }