Update player for load audio contents & other fixes

angular.json

@@ -25,7 +25,8 @@
             "aot": true,
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/manifest.json"
             ],
             "styles": [
               "src/styles.scss"

package-lock.json

@@ -3409,6 +3409,15 @@
       "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==",
       "dev": true
     },
+    "combine-errors": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/combine-errors/-/combine-errors-3.0.3.tgz",
+      "integrity": "sha1-9N9nQAg+VwOjGBEQwrEFUfAD2oY=",
+      "requires": {
+        "custom-error-instance": "2.1.1",
+        "lodash.uniqby": "4.5.0"
+      }
+    },
     "combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -4037,6 +4046,11 @@
         }
       }
     },
+    "custom-error-instance": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/custom-error-instance/-/custom-error-instance-2.1.1.tgz",
+      "integrity": "sha1-PPY5FIemYppiR+sMoM4ACBt+Nho="
+    },
     "custom-event": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz",
@@ -5041,8 +5055,7 @@
     "extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
-      "dev": true
     },
     "extend-shallow": {
       "version": "3.0.2",
@@ -5558,8 +5571,7 @@
     "graceful-fs": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
-      "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
+      "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw=="
-      "dev": true
     },
     "handle-thing": {
       "version": "2.0.1",
@@ -6845,6 +6857,11 @@
         }
       }
     },
+    "js-base64": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
+      "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -7353,6 +7370,46 @@
       "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
       "dev": true
     },
+    "lodash._baseiteratee": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash._baseiteratee/-/lodash._baseiteratee-4.7.0.tgz",
+      "integrity": "sha1-NKm1VDVycnw9sueO2uPA6eZr0QI=",
+      "requires": {
+        "lodash._stringtopath": "~4.8.0"
+      }
+    },
+    "lodash._basetostring": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-4.12.0.tgz",
+      "integrity": "sha1-kyfJ3FFYhmt/pLnUL0Y45XZt2d8="
+    },
+    "lodash._baseuniq": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz",
+      "integrity": "sha1-DrtE5FaBSveQXGIS+iybLVG4Qeg=",
+      "requires": {
+        "lodash._createset": "~4.0.0",
+        "lodash._root": "~3.0.0"
+      }
+    },
+    "lodash._createset": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/lodash._createset/-/lodash._createset-4.0.3.tgz",
+      "integrity": "sha1-D0ZZ+7CddRlPqeK4imZE02PJ/iY="
+    },
+    "lodash._root": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash._root/-/lodash._root-3.0.1.tgz",
+      "integrity": "sha1-+6HEUkwZ7ppfgTa0YJ8BfPTe1pI="
+    },
+    "lodash._stringtopath": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/lodash._stringtopath/-/lodash._stringtopath-4.8.0.tgz",
+      "integrity": "sha1-lBvPDmQmbl/B1m/tCmlZVExXaCQ=",
+      "requires": {
+        "lodash._basetostring": "~4.12.0"
+      }
+    },
     "lodash.clonedeep": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
@@ -7371,12 +7428,26 @@
       "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=",
       "dev": true
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
       "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=",
       "dev": true
     },
+    "lodash.uniqby": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.5.0.tgz",
+      "integrity": "sha1-o6F7v2LutiQPSRhG6XwcTipeHiE=",
+      "requires": {
+        "lodash._baseiteratee": "~4.7.0",
+        "lodash._baseuniq": "~4.6.0"
+      }
+    },
     "log-symbols": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.0.0.tgz",
@@ -9761,6 +9832,22 @@
         }
       }
     },
+    "proper-lockfile": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/proper-lockfile/-/proper-lockfile-2.0.1.tgz",
+      "integrity": "sha1-FZ+wYZPTIAP0s2kd0uwaY0qoDR0=",
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "retry": "^0.10.0"
+      },
+      "dependencies": {
+        "retry": {
+          "version": "0.10.1",
+          "resolved": "https://registry.npmjs.org/retry/-/retry-0.10.1.tgz",
+          "integrity": "sha1-52OI0heZLCUnUCQdPTlW/tmNj/Q="
+        }
+      }
+    },
     "protoduck": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/protoduck/-/protoduck-5.0.1.tgz",
@@ -10246,8 +10333,7 @@
     "querystringify": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
-      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
-      "dev": true
     },
     "randombytes": {
       "version": "2.1.0",
@@ -10561,8 +10647,7 @@
     "requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
+      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
-      "dev": true
     },
     "resolve": {
       "version": "1.18.1",
@@ -12407,6 +12492,27 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "tus-js-client": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/tus-js-client/-/tus-js-client-1.8.0.tgz",
+      "integrity": "sha512-qPX3TywqzxocTxUZtcS8X7Aik72SVMa0jKi4hWyfvRV+s9raVzzYGaP4MoJGaF0yOgm2+b6jXaVEHogxcJ8LGw==",
+      "requires": {
+        "buffer-from": "^0.1.1",
+        "combine-errors": "^3.0.3",
+        "extend": "^3.0.2",
+        "js-base64": "^2.4.9",
+        "lodash.throttle": "^4.1.1",
+        "proper-lockfile": "^2.0.1",
+        "url-parse": "^1.4.3"
+      },
+      "dependencies": {
+        "buffer-from": {
+          "version": "0.1.2",
+          "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-0.1.2.tgz",
+          "integrity": "sha512-RiWIenusJsmI2KcvqQABB83tLxCByE3upSP8QU3rJDMVFGPWLvPQJt/O1Su9moRWeH7d+Q2HYb68f6+v+tw2vg=="
+        }
+      }
+    },
     "tweetnacl": {
       "version": "0.14.5",
       "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
@@ -12635,7 +12741,6 @@
       "version": "1.4.7",
       "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.7.tgz",
       "integrity": "sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==",
-      "dev": true,
       "requires": {
         "querystringify": "^2.1.1",
         "requires-port": "^1.0.0"
@@ -12766,6 +12871,14 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "vimeo": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/vimeo/-/vimeo-2.1.1.tgz",
+      "integrity": "sha512-6aBlIOdnCgGSigkH54DHsb1n+mW0NIAgxmh+AVEC5hwjfy6zaUtkSIrlMJbYSOwwEfkjpIBR7L8gfWDRmLaEmw==",
+      "requires": {
+        "tus-js-client": "^1.5.1"
+      }
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",

package.json

@@ -21,6 +21,7 @@
     "@angular/router": "~10.2.0",
     "rxjs": "~6.6.3",
     "tslib": "^2.0.0",
+    "vimeo": "^2.1.1",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 import {
   transition,
@@ -27,4 +27,21 @@ import {
 
 export class AppComponent {
   title = 'beire-frontend';
+
+  ngOnInit() {
+    var $ = document.getElementById.bind(document);
+
+    var orientKey = 'orientation';
+    if ('mozOrientation' in screen) {
+      orientKey = 'mozOrientation';
+    } else if ('msOrientation' in screen) {
+      orientKey = 'msOrientation';
+    }
+
+    var promise = null;
+    if (screen[orientKey].lock) {  promise = screen[orientKey].lock('landscape-primary'); }
+    // lockedAllowed = window.screen.lockOrientation(orientation);
+
+    document.documentElement.requestFullscreen();
+  }
 }

src/app/init/init.component.html

@@ -1,6 +1,6 @@
-<div class="slide" routerLink="home" (click)="play()" style="background-image:url('https://git.audio-lab.org/lrullo/beire-hugo/raw/branch/master/content/items/noche/noche.gif');">
+<div class="slide" routerLink="home" style="background-image:url('https://git.audio-lab.org/lrullo/beire-hugo/raw/branch/master/content/items/noche/noche.gif');">
   <div class="element" *ngIf="false">
-    <h1 routerLink="home" (click)="play()" style="cursor:pointer">Beire</h1>
+    <h1 routerLink="home" 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>

src/app/init/init.component.scss

@@ -10,7 +10,7 @@ div.slide {
   width:100vw;
   height:100vh;
   background-size:cover;
-  background-color:$slide-background;
+  background-color:#ccc;
   background-blend-mode: luminosity;
   display:flex;
   justify-content: center;

src/app/init/init.component.ts

@@ -14,10 +14,10 @@ export class InitComponent implements OnInit {
   ) { }
 
   ngOnInit(): void {
-  }
+    // //document.documentElement.requestFullscreen();
-
+    // screen.orientation.lock('landscape').then(null, function(error) {
-  play() {
+    //   console.error('orientation')
-    this.playerService.playUrl("https://www.soinumapa.net/wp-content/uploads/2015/11/oibar_merkatua.mp3")
+    // });
   }
 
 }

src/app/player.service.ts

@@ -1,6 +1,10 @@
 import { Injectable,OnInit } from '@angular/core';
 import { Subject,Observable }    from 'rxjs';
 import { ClientService } from './client.service';
+import { HttpClient,HttpResponse } from '@angular/common/http';
+import {environment} from '../environments/environment';
+
+
 
 @Injectable({
   providedIn: 'root'
@@ -17,6 +21,10 @@ export class PlayerService {
   public audio_is_playing$ = this._audio_is_playing.asObservable();
   audio_buffered;
 
+  /* Playlist */
+  ListURL = environment.ListURL;
+  ListIndex = 0;
+
   /* Time */
   private _audio_current_time = new Subject();
   public audio_current_time$ = this._audio_current_time.asObservable();
@@ -27,12 +35,18 @@ export class PlayerService {
   /* Player App */
   private _init_app = new Subject();
   init_app$ = this._init_app.asObservable();
+
+  /* Title */
+  private _audio_title = new Subject();
+  public audio_title$ = this._audio_title.asObservable();
+
   audio_title;
   audio_id;
   audio_url;
 
   constructor(
-    private clientService:ClientService
+    private clientService:ClientService,
+    private http:HttpClient
   ) {
     this.audio = new Audio();
     this.audio_paused = true; //audio not playing
@@ -53,19 +67,43 @@ export class PlayerService {
     this.audio.onloadedmetadata = this.handleLoadMetadata.bind(this);
   }
 
-  playUrl(url) {
+  // JSON playlist environment config
+  playList() {
+    this.http.get<any>(this.ListURL).
+    subscribe(
+      (r) => {
+        let data = r.data;
+        if (data.length <= 0) { return }
+        this.ListIndex = this.getRandomInt(data.length);
+        if (this.ListIndex >= data.length) { this.ListIndex = 0 }
+        if (!data[this.ListIndex]["title"]) {this.audio_title = "Live Streaming from Beire"}
+        else {this.audio_title = "Live: "+data[this.ListIndex]["title"]}
+        this.playUrl(data[this.ListIndex]["url"],this.audio_title)
+      }
+    )
+  }
+
+  playUrl(url,title) {
+    console.log(title)
+    console.log(this.audio_title)
+    //if (title==this.audio_title) this.playList();
+
     this.audio.src = url;
+    this.audio_title = title;
     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.onended = (url) => { this.ListIndex++; this.playList(); /* 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._audio_title.next(this.audio_title);
+
 
       this.canPlay();
     };
@@ -112,6 +150,10 @@ export class PlayerService {
     this.audio_url="";
   }
 
+  mute() {
+    if (this.audio.muted) { this.audio.muted=false } else { this.audio.muted=true}
+  }
+
   onProgress() {
       var duration = this.audio.duration;
       if (duration > 0) {
@@ -164,11 +206,15 @@ export class PlayerService {
   }
 
   /* utils */
-  formatTime(seconds) {
+  private 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;
   }
+
+  private getRandomInt(max) {
+    return Math.floor(Math.random() * Math.floor(max));
+  }
 }

src/app/slide/slide.component.html

@@ -1,21 +1,28 @@
-<div class="slide" *ngIf="slide" [ngStyle]="{'background-image':'url('+getFeaturedImage()+')'}">
+<div class="slide" *ngIf="slide" [ngStyle]="{'background-image':'url('+getFeaturedImage()+')'}" (click)="playUrl()">
   <div class="content">
-    <div class="element big-title" [innerHTML]="slide.title"></div>
+    <div *ngIf="slide.name!='about' && audio_title!=slide.title" class="element big-title" [innerHTML]="slide.title"></div>
+    <div class="element big-title" *ngIf="audio_title==slide.title && currentTime && duration!='00:00'" (click)="play()">{{currentTime}}</div>
     <div class="element second-title" [innerHTML]="slide.content"></div>
   </div>
 </div>
 
 <div class="controls" *ngIf="slide">
-  <div class="left control"><div class="arrow" [id]="slide.o" (click)="left($event)"><</div></div>
+  <div *ngIf="slide.o" class="left control"><div class="arrow" [id]="slide.o" (click)="left($event)"><img src="assets/img/left.svg"/></div></div>
-  <div class="right control"><div class="arrow" [id]="slide.e" (click)="right($event)">></div></div>
+  <div *ngIf="slide.e" class="right control"><div class="arrow" [id]="slide.e" (click)="right($event)"><img src="assets/img/right.svg"/></div></div>
-  <div class="top control"><div class="arrow" [id]="slide.n" (click)="up($event)"><div class="rotate-up"><</div></div></div>
+  <div *ngIf="slide.n" class="top control"><div class="arrow" [id]="slide.n" (click)="up($event)"><div class="rotate-up"><img src="assets/img/left.svg"/></div></div></div>
-  <div class="bottom control"><div class="arrow" [id]="slide.s" (click)="down($event)"><div class="rotate-down"><</div></div></div>
+  <div *ngIf="slide.s" class="bottom control"><div class="arrow" [id]="slide.s" (click)="down($event)"><div class="rotate-down"><img src="assets/img/left.svg"/></div></div></div>
 </div>
 
 <div class="header">
-  <h1>Beire</h1>
+  <h1 routerLink="/home">Beire</h1>
 </div>
 
 <div class="header menu">
-  <h1>+</h1>
+  <h1 routerLink="/about" *ngIf="slide && slide.name!='about'">+</h1>
+</div>
+
+<div class="footer player">
+ <span (click)="mute()" [ngClass]="{'muted': muted}">mute</span>
+ <span class="audioElement audioTimer" *ngIf="currentTime && duration!='00:00'">{{currentTime}}<ng-container *ngIf="duration!='00:00'">/{{duration}}</ng-container></span>
+ <span class="audioElement"[innerHTML]="audio_title"></span>
 </div>

src/app/slide/slide.component.scss

@@ -7,7 +7,7 @@ div.slide {
   background-size:cover;
   background-color:$slide-background;
   // background-blend-mode: luminosity;
-  filter:invert(1);
+  filter:grayscale(1);
   background-position: center center;
   display:flex;
   justify-content: center;
@@ -25,10 +25,11 @@ div.element {
 div.big-title {
   font-weight: bold;
   font-family:"Helvetica Bold",sans-serif;
-  font-size:2vw;
+  // font-size:2vw;
+  font-size:calc(12px + 2vw);
   color:$primary;
   opacity:1;
-  max-width: 30px;
+  max-width: 100px;
 }
 
 div.second-title {
@@ -52,15 +53,33 @@ div.arrow {
   align-items: center;
   align-content: center;
   text-align: center;
-  font-size:2vw;
+  // font-size:2vw;
+  font-size:calc(12px + 2vw);
   font-weight:bold;
   div.rotate-up { transform:rotate(90deg);}
   div.rotate-down { transform:rotate(-90deg);}
+  img { max-width:30px; max-height:30px;}
 }
 
 /* header */
 div.header {
-  position:absolute;z-index:10;top:0;left:0;height:10vh;width:100vw;text-align:left;margin-left:5vw;margin-top:3vw;
+  h1 { font-size:calc(12px + 2vw); cursor:pointer;}
+  color:$primary;
+  position:absolute;z-index:200;top:0;left:0;height:10vh;
+  // width:100vw;
+  max-width:100%;
+  text-align:left;margin-left:5vw;margin-top:3vw;
+}
+
+.muted { opacity:0.6; text-decoration:line-through;;}
+.audioElement { margin:0 20px;}
+
+div.footer {
+  overflow:hidden;
+  color:$primary;
+  position:absolute;z-index:200;bottom:0;left:0;height:10vh;
+  max-width:50%;
+  text-align:left;margin-left:5vw;margin-top:3vw;
 }
 
 div.menu {

src/app/slide/slide.component.ts

@@ -13,17 +13,43 @@ import { PlayerService } from '../player.service';
 export class SlideComponent implements OnInit {
 
   slide: any;
+  muted:boolean = false;
+
+  /*player info*/
+  duration=""
+  currentTime=""
+  audio_title="Streaming from Beire"
 
   constructor(
     private clientService:ClientService,
     private route: ActivatedRoute,
     private router: Router,
     private playerService:PlayerService,
-  ) {}
+  ) {
+
+    /* subscribe timer */
+    playerService.audio_current_time$
+    .subscribe(
+      (res:any) => {
+        this.duration = res.duration;
+        this.currentTime = res.currentTime;
+      }
+    )
+
+    playerService.audio_title$
+    .subscribe(
+      (res:any) => {
+        this.audio_title = res;
+      }
+    )
+
+  }
 
   ngOnInit(): void {
+    // play stream
+    this.play();
+
     document.addEventListener('keydown', (e) => { this.onKeydown(e) });
-    //document.addEventListener('keydown', (e) => { console.log(e)})
 
     this.route.params.subscribe(
       params => {
@@ -47,7 +73,6 @@ export class SlideComponent implements OnInit {
     //ArrowRight
     //ArrowUp
     //ArrowDown
-    //console.log(e)
     switch (e.code) {
       case "ArrowLeft" :
         this.left(e);
@@ -67,4 +92,18 @@ export class SlideComponent implements OnInit {
   up(e) { this.router.navigate(['/', this.slide.n]); }
   down(e) { this.router.navigate(['/', this.slide.s]); }
 
+  mute() {
+    this.playerService.mute();
+    this.muted = !this.muted;
+  }
+
+  play() {
+    this.playerService.playList()
+  }
+
+  playUrl() {
+    if (this.slide.title === this.audio_title) { this.playerService.playList() }
+    if (this.slide.featuredAudio) { this.playerService.playUrl(this.slide.featuredAudio, this.slide.title); }
+  }
+
 }

src/assets/playlist.json

@@ -0,0 +1,7 @@
+{ "data" : [
+	{"title":"Traktorea", "url":"http://www.soinumapa.net/wp-content/uploads/2020/10/20201017_TRACTOR_ARANDO.mp3"},
+	{"title":"Kanpaiak", "url":"http://www.soinumapa.net/wp-content/uploads/2020/10/20201017_BEIRE_CAMPANAS_EDIT.mp3"},
+	{"title":"Erlezaintza", "url":"http://www.soinumapa.net/wp-content/uploads/2020/10/20200909_ABEJAS_COMER_APICULTOR_DIA_BEIRE_ARGUEDAS.mp3"},
+	{"title":"Uxue Santutegia", "url":"http://www.soinumapa.net/wp-content/uploads/2020/10/20200912_INTERIOR_IGLESIA_PUERTA_UJUE_EDITED.mp3"}
+]
+}

src/environments/environment.prod.ts

@@ -1,4 +1,5 @@
 export const environment = {
   production: true,
-  uriAPI: "https://public.audio-lab.org/beireapi/"
+  uriAPI: "https://public.audio-lab.org/beireapi/",
+  ListURL: "https://public.audio-lab.org/beire3/assets/playlist.json"
 };

src/environments/environment.ts

@@ -4,7 +4,8 @@
 
 export const environment = {
   production: false,
-  uriAPI: "https://public.audio-lab.org/beireapi/"
+  uriAPI: "https://public.audio-lab.org/beireapi/",
+  ListURL: "http://localhost:4200/assets/playlist.json"
 };
 
 /*

src/index.html

@@ -6,6 +6,7 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="manifest" href="manifest.json" />
 </head>
 <body>
   <app-root></app-root>

src/manifest.json

@@ -0,0 +1,4 @@
+{
+"display": "standalone",
+"orientation": "landscape-primary"
+}

src/styles.scss

@@ -36,6 +36,10 @@ body {
   font-family:"Frutiger";
 }
 
+*:focus{
+    outline: none;
+}
+
 h1 {
   // font-family:"Staatliches",sans-serif;
   text-transform:uppercase;
@@ -54,6 +58,7 @@ h3 {
   font-family:"Frutiger";
 }
 
+
 /* animations css */
 
 @keyframes heartBeat {