Version Ocre, texto grande, flechas largas

src/_variables.scss

@@ -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;

src/app/app.module.ts

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

src/app/init/init.component.html

@@ -1,5 +1,14 @@
 <div class="slide">
   <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>

src/app/init/init.component.scss

@@ -1,9 +1,16 @@
+@import "../../_variables.scss";
+
+h1 {
+  margin-top:0;
+  margin-bottom:0;
+}
+
 div.slide {
-  color:#fff;
+  color:$primary;
   width:100vw;
   height:100vh;
   background-size:cover;
-  background-color:#f90;
+  background-color:$slide-background;
   background-blend-mode: luminosity;
   display:flex;
   justify-content: center;
@@ -19,18 +26,40 @@ div.element {
   text-align:center;
 }
 
+div.logo img {
+  padding:10px;
+  max-height:40px;
+  max-width:100px;
+}
+
 div.round-button {
+  opacity:0.6;
   cursor:pointer;
   margin:auto;
   font-size:2em;
-  border:5px solid #fff;
+  /*border:5px solid #fff;*/
   color:#fff;
   border-radius:100%;
-  width:10vw;
+  width:5vw;
-  height:10vw;
+  height:5vw;
+  background:$primary;
   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 {
-  background:#fff;
+  background-color:$backgroundhover;
+  opacity:0.3;
+  //transform:rotate(-90deg);
 }

src/app/init/init.component.ts

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

src/app/player.service.spec.ts

@@ -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();
+  });
+});

src/app/player.service.ts

@@ -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;
+  }
+}

src/app/slide/slide.component.html

@@ -2,7 +2,6 @@
   <div class="content">
     <div class="element big-title" [innerHTML]="slide.title"></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>
 

src/app/slide/slide.component.scss

@@ -1,15 +1,18 @@
+@import "../../_variables.scss";
+
 div.slide {
-  color:#fff;
+  color:$primary;
   width:100vw;
   height:100vh;
   background-size:cover;
-  background-color:#f90;
+  background-color:$slide-background;
   background-blend-mode: luminosity;
+  background-position: center center;
   display:flex;
   justify-content: center;
   align-items: center;
   text-align: center;
-  overflow:crosshair;
+  overflow:hidden;
 }
 
 div.element {
@@ -19,14 +22,16 @@ div.element {
 }
 
 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;
 }
 
 div.second-title {
-  font-size:3rem;
+  font-size:3vw;
-  font-family:"Reenie Beanie",serif;
+  font-family:"Swiss Light",serif;
 }
 
 /* controls */

src/app/slide/slide.component.ts

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

src/environments/environment.prod.ts

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

src/styles.scss

@@ -1,10 +1,101 @@
 /* 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 {
   margin: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);
+  }
 }