Testing audios

inc/src/app/app.component.html

@@ -6,7 +6,7 @@
     <!-- <div class="col left"></div> -->
     <div class="col center priority">
       <div class="button title">
-        <h1>El agua no tiene nombre</h1>
+        <h1>{{audio_title}}</h1>
       </div>
     </div>
     <!-- <div class="col right"></div> -->
@@ -34,15 +34,16 @@
 </section> -->
 <!-- end space -->
 
-<section id="podcasts" class="container middle" *ngFor="let n of news; let index;">
+<section id="podcasts" class="container middle podcasts" *ngFor="let n of podcasts; let index;">
   <div class="content columns">
     <div class="col center">
-      <div class="button big" [ngStyle]="{transform:'translateX('+n.random+'vw)'}">
+      <div class="button big" [id]="n.name" (click)="play(n)" [ngStyle]="{transform:'translateX('+n.random+'vw)'}">
-        <h1>Podcast {{n.title}}</h1>
+        <h1>{{n.title}}</h1>
       </div>
     </div>
   </div>
 </section>
+
 <!-- space -->
 <!-- <section class="container big">
   <div class="content columns">

inc/src/app/app.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, Inject } from '@angular/core';
 import { PlayerService } from './player.service';
 import { DOCUMENT, Location } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
 
 @Component({
   selector: 'app-root',
@@ -13,11 +14,15 @@ export class AppComponent implements OnInit {
   title = 'cear-rio';
   start:boolean = false;
   randomPos:number = 0;
-  news:any[] = [{title:'1',random:0},{title:'1',random:0},{title:'1',random:0},{title:'1',random:0},{title:'1',random:0}]
+  // news:any[] = [{title:'1',random:0},{title:'1',random:0},{title:'1',random:0},{title:'1',random:0},{title:'1',random:0}]
+  url:string ="/assets/json/podcasts.json";
+  podcasts:any = [];
+  audio_title:string = "El agua no tiene nombre";
 
   constructor(
     public playerService:PlayerService,
-    @Inject(DOCUMENT) private document: Document
+    @Inject(DOCUMENT) private document: Document,
+    private http: HttpClient
   ) {
 
     playerService.init_app$
@@ -26,12 +31,27 @@ export class AppComponent implements OnInit {
           this.start = res;
       }
     )
+
+    /* subscribe to metada info */
+    playerService.icy_metadata$
+    .subscribe(
+      (res:any) => { 
+       this.audio_title=res;
+     }
+    )
+
   }
 
   ngOnInit(): void {
-    this.news.map( (n) => {
+    
+
+    this.http.get(this.url).subscribe(res => {
+      this.podcasts = res;
+      // console.log(this.podcasts)
+      this.podcasts.map( (n:any) => {
         n.random = this.randomPos=this.randomPosition();
       })
+    });
     
   }
 
@@ -47,4 +67,11 @@ export class AppComponent implements OnInit {
     element.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
 
   }
+
+  play(p:any) {
+    // console.log('play! '+p.audio);
+    this.audio_title="Cargando";
+    this.playerService.play(p.audio);
+    this.playerService.setMetadata(p.title);
+  }
 }

inc/src/app/header/header.component.html

@@ -14,10 +14,10 @@
       <!-- <span *ngIf="!icy_metadata && !duration">El agua no tiene nombre</span> -->
       <span *ngIf="icy_metadata" class="player">
           <ng-container *ngIf="duration=='00:00'"></ng-container> 
-          <!-- <ng-container>{{icy_metadata}}</ng-container> -->
+          <ng-container>{{icy_metadata}}</ng-container>
       </span>
       <span *ngIf="duration!='00:00' && currentTime"><a (click)="stop()" [ngClass]="{'play':isStop}">stop</a></span>
       <span *ngIf="currentTime && duration!='00:00'">{{currentTime}}<ng-container *ngIf="duration!='00:00'">/{{duration}}</ng-container></span>
-      <span>Soinumapa.net</span>
+      <!-- <span>Soinumapa.net</span> -->
   </div>
   </section>

inc/src/app/header/header.component.ts

@@ -36,7 +36,6 @@ export class HeaderComponent implements OnInit {
      .subscribe(
        (res:any) => { 
         this.icy_metadata=res;
-        console.log('asdf')
       }
      )
      

inc/src/app/player.service.ts

@@ -99,6 +99,8 @@ export class PlayerService implements OnInit {
     this.audio.onended = () => { this.play(environment.urlStream) };
     this.audio.onprogress = () => { this.onProgress() };
     
+    this._icy_metadata.next("El agua no tiene nombre");
+
     this.audio.oncanplay = () => {
       // init player
       this._init_app.next(true);
@@ -124,6 +126,7 @@ export class PlayerService implements OnInit {
   }
 
   public getStreamMetadata() {
+
     this.http.get<any[]>(environment.urlStreamMetadata)
     .subscribe( (res:any) => {
       let index
@@ -133,12 +136,18 @@ export class PlayerService implements OnInit {
       if (res['icestats']['source'][index]) {
         //console.log(res.icestats.source[index].title)
         this.audio_icy = res.icestats.source[index].title;
-        this._icy_metadata.next(res.icestats.source[index].title);
+
+        //this._icy_metadata.next(res.icestats.source[index].title);
+        this._icy_metadata.next("El agua no tiene nombre");
+        
         this.last_icy_metadata=res.icestats.source[index].title;
       }
     })
   }
 
+  public setMetadata(title:string) {
+    this._icy_metadata.next(title);
+  }
 
   public podcast(p:any) {
     //console.log(p)
@@ -338,7 +347,7 @@ export class PlayerService implements OnInit {
   }
 
   restart() {
-    this._icy_metadata.next(true)
+    this._icy_metadata.next('Cargando')
     this.play(environment.urlStream);
 
   }

inc/src/assets/json/podcasts.json

@@ -0,0 +1,26 @@
+[
+    {
+        "name": "podcast1",
+        "title": "Podcast 1",
+        "audio": "https://d3uq9vzdmwnq5u.cloudfront.net/v1/variant/8e7eb371-ddd5-51b1-8879-7c99fa0874d5.mp3?session_id=5a59c020-a475-5cef-98c5-e0f05b3cacfe&ct=DOWNLOAD&episode_id=116862422&show_id=2284011&user_id=33206696&organization_id=ivoox&tenant=IVOOX&timestamp=1698802776&media_type=dynamic&fallback_url=https%3A%2F%2Fd3uq9vzdmwnq5u.cloudfront.net%2Fpoximamenteescucharefugio-canalescucharefugio-ivoox116862422.mp3%3Fct%3DDOWNLOAD%26episode_id%3D116862422%26show_id%3D2284011%26user_id%3D33206696%26organization_id%3Divoox%26tenant%3DIVOOX%26timestamp%3D1698802776%26media_type%3Dstatic%26Expires%3D1698975576%26Key-Pair-Id%3DK1J2BR3INU6RYD%26Signature%3Dkc74xwxozH7Wo5rQzRwB1J2TmQ3V~tlWW8sl~mTPQnFfeQkpQoCVqbGsS4sjQM598MDoeMFCqMqNGqx4UTqwZdF7Eq397ir2JnZJb4--Qm1zIPUModg5u5jZItNHd5k-EzbptqQjxqg-3x7BbdBPwwuM5nbHhLLgYfLoSoiC6cpJaqR-6Bovm5EnB3A1iQiV4iTyW1nljvAIP~kyURhAEbLUy95qWhnCqWeZoiohP3YM8qMBXauMAMNFQAYuIogjQ4ObzNazbrjkNEik5Dq8chB2WgxxkEA4JE6qBWV6kS9LpY-QfCyrV7c4U0kNNPmTpeCED9YOC8jrHLibECf8Hw__&Expires=1698975577&Key-Pair-Id=K1J2BR3INU6RYD&Signature=IkNUujU-zkM2cqFgnrJPlxIscHvf-rHq1vz~Jyu6ypGg3h0C02mimVMRZzllV-SZ~fuwjk-p6JpK2lhLvLswMczuvFjTSgEYea71EXpJ1W9Q-gOgpjMp84SZLaMa69IqzxPLNZFA6o1kGd5F12DV8myyosCxcFy~ZDIZsJss98IN7ebusGP5aZFVaXUSC3WBbkuMow1WQeERim7iK2RSXFzYNkiV1zjV6ZLGg8mZj2Gn-RoFB4DRS1vtkVl1~MTD9XmOItmmoThsqu~sMgnrKewEyQDwms~Y3aV4ClEsWxhAZMT9g4s5jQeRwRNjhriU5fY3GBkTWmBhekHA3ERK8Q__",
+        "random": 0
+    },
+    {
+        "name": "podcast2",
+        "title": "Podcast 2",
+        "audio": "https://d3uq9vzdmwnq5u.cloudfront.net/v1/variant/8e7eb371-ddd5-51b1-8879-7c99fa0874d5.mp3?session_id=5a59c020-a475-5cef-98c5-e0f05b3cacfe&ct=DOWNLOAD&episode_id=116862422&show_id=2284011&user_id=33206696&organization_id=ivoox&tenant=IVOOX&timestamp=1698802776&media_type=dynamic&fallback_url=https%3A%2F%2Fd3uq9vzdmwnq5u.cloudfront.net%2Fpoximamenteescucharefugio-canalescucharefugio-ivoox116862422.mp3%3Fct%3DDOWNLOAD%26episode_id%3D116862422%26show_id%3D2284011%26user_id%3D33206696%26organization_id%3Divoox%26tenant%3DIVOOX%26timestamp%3D1698802776%26media_type%3Dstatic%26Expires%3D1698975576%26Key-Pair-Id%3DK1J2BR3INU6RYD%26Signature%3Dkc74xwxozH7Wo5rQzRwB1J2TmQ3V~tlWW8sl~mTPQnFfeQkpQoCVqbGsS4sjQM598MDoeMFCqMqNGqx4UTqwZdF7Eq397ir2JnZJb4--Qm1zIPUModg5u5jZItNHd5k-EzbptqQjxqg-3x7BbdBPwwuM5nbHhLLgYfLoSoiC6cpJaqR-6Bovm5EnB3A1iQiV4iTyW1nljvAIP~kyURhAEbLUy95qWhnCqWeZoiohP3YM8qMBXauMAMNFQAYuIogjQ4ObzNazbrjkNEik5Dq8chB2WgxxkEA4JE6qBWV6kS9LpY-QfCyrV7c4U0kNNPmTpeCED9YOC8jrHLibECf8Hw__&Expires=1698975577&Key-Pair-Id=K1J2BR3INU6RYD&Signature=IkNUujU-zkM2cqFgnrJPlxIscHvf-rHq1vz~Jyu6ypGg3h0C02mimVMRZzllV-SZ~fuwjk-p6JpK2lhLvLswMczuvFjTSgEYea71EXpJ1W9Q-gOgpjMp84SZLaMa69IqzxPLNZFA6o1kGd5F12DV8myyosCxcFy~ZDIZsJss98IN7ebusGP5aZFVaXUSC3WBbkuMow1WQeERim7iK2RSXFzYNkiV1zjV6ZLGg8mZj2Gn-RoFB4DRS1vtkVl1~MTD9XmOItmmoThsqu~sMgnrKewEyQDwms~Y3aV4ClEsWxhAZMT9g4s5jQeRwRNjhriU5fY3GBkTWmBhekHA3ERK8Q__",
+        "random": 0
+    },
+    {
+        "name": "podcast3",
+        "title": "Podcast 3",
+        "audio": "https://d3uq9vzdmwnq5u.cloudfront.net/v1/variant/8e7eb371-ddd5-51b1-8879-7c99fa0874d5.mp3?session_id=5a59c020-a475-5cef-98c5-e0f05b3cacfe&ct=DOWNLOAD&episode_id=116862422&show_id=2284011&user_id=33206696&organization_id=ivoox&tenant=IVOOX&timestamp=1698802776&media_type=dynamic&fallback_url=https%3A%2F%2Fd3uq9vzdmwnq5u.cloudfront.net%2Fpoximamenteescucharefugio-canalescucharefugio-ivoox116862422.mp3%3Fct%3DDOWNLOAD%26episode_id%3D116862422%26show_id%3D2284011%26user_id%3D33206696%26organization_id%3Divoox%26tenant%3DIVOOX%26timestamp%3D1698802776%26media_type%3Dstatic%26Expires%3D1698975576%26Key-Pair-Id%3DK1J2BR3INU6RYD%26Signature%3Dkc74xwxozH7Wo5rQzRwB1J2TmQ3V~tlWW8sl~mTPQnFfeQkpQoCVqbGsS4sjQM598MDoeMFCqMqNGqx4UTqwZdF7Eq397ir2JnZJb4--Qm1zIPUModg5u5jZItNHd5k-EzbptqQjxqg-3x7BbdBPwwuM5nbHhLLgYfLoSoiC6cpJaqR-6Bovm5EnB3A1iQiV4iTyW1nljvAIP~kyURhAEbLUy95qWhnCqWeZoiohP3YM8qMBXauMAMNFQAYuIogjQ4ObzNazbrjkNEik5Dq8chB2WgxxkEA4JE6qBWV6kS9LpY-QfCyrV7c4U0kNNPmTpeCED9YOC8jrHLibECf8Hw__&Expires=1698975577&Key-Pair-Id=K1J2BR3INU6RYD&Signature=IkNUujU-zkM2cqFgnrJPlxIscHvf-rHq1vz~Jyu6ypGg3h0C02mimVMRZzllV-SZ~fuwjk-p6JpK2lhLvLswMczuvFjTSgEYea71EXpJ1W9Q-gOgpjMp84SZLaMa69IqzxPLNZFA6o1kGd5F12DV8myyosCxcFy~ZDIZsJss98IN7ebusGP5aZFVaXUSC3WBbkuMow1WQeERim7iK2RSXFzYNkiV1zjV6ZLGg8mZj2Gn-RoFB4DRS1vtkVl1~MTD9XmOItmmoThsqu~sMgnrKewEyQDwms~Y3aV4ClEsWxhAZMT9g4s5jQeRwRNjhriU5fY3GBkTWmBhekHA3ERK8Q__",
+        "random": 0
+    },
+    {
+        "name": "podcast4",
+        "title": "Podcast 4",
+        "audio": "https://d3uq9vzdmwnq5u.cloudfront.net/v1/variant/8e7eb371-ddd5-51b1-8879-7c99fa0874d5.mp3?session_id=5a59c020-a475-5cef-98c5-e0f05b3cacfe&ct=DOWNLOAD&episode_id=116862422&show_id=2284011&user_id=33206696&organization_id=ivoox&tenant=IVOOX&timestamp=1698802776&media_type=dynamic&fallback_url=https%3A%2F%2Fd3uq9vzdmwnq5u.cloudfront.net%2Fpoximamenteescucharefugio-canalescucharefugio-ivoox116862422.mp3%3Fct%3DDOWNLOAD%26episode_id%3D116862422%26show_id%3D2284011%26user_id%3D33206696%26organization_id%3Divoox%26tenant%3DIVOOX%26timestamp%3D1698802776%26media_type%3Dstatic%26Expires%3D1698975576%26Key-Pair-Id%3DK1J2BR3INU6RYD%26Signature%3Dkc74xwxozH7Wo5rQzRwB1J2TmQ3V~tlWW8sl~mTPQnFfeQkpQoCVqbGsS4sjQM598MDoeMFCqMqNGqx4UTqwZdF7Eq397ir2JnZJb4--Qm1zIPUModg5u5jZItNHd5k-EzbptqQjxqg-3x7BbdBPwwuM5nbHhLLgYfLoSoiC6cpJaqR-6Bovm5EnB3A1iQiV4iTyW1nljvAIP~kyURhAEbLUy95qWhnCqWeZoiohP3YM8qMBXauMAMNFQAYuIogjQ4ObzNazbrjkNEik5Dq8chB2WgxxkEA4JE6qBWV6kS9LpY-QfCyrV7c4U0kNNPmTpeCED9YOC8jrHLibECf8Hw__&Expires=1698975577&Key-Pair-Id=K1J2BR3INU6RYD&Signature=IkNUujU-zkM2cqFgnrJPlxIscHvf-rHq1vz~Jyu6ypGg3h0C02mimVMRZzllV-SZ~fuwjk-p6JpK2lhLvLswMczuvFjTSgEYea71EXpJ1W9Q-gOgpjMp84SZLaMa69IqzxPLNZFA6o1kGd5F12DV8myyosCxcFy~ZDIZsJss98IN7ebusGP5aZFVaXUSC3WBbkuMow1WQeERim7iK2RSXFzYNkiV1zjV6ZLGg8mZj2Gn-RoFB4DRS1vtkVl1~MTD9XmOItmmoThsqu~sMgnrKewEyQDwms~Y3aV4ClEsWxhAZMT9g4s5jQeRwRNjhriU5fY3GBkTWmBhekHA3ERK8Q__",
+        "random": 0
+    }
+]

inc/src/styles.scss

@@ -18,14 +18,15 @@ section.container {
         width:32px;
         height:32px;
         position:absolute;
-        bottom:16px;
+        bottom:48px;
         left:calc( 50vw - 16px );
         transform:rotate(45deg);
-        border: 5px solid #000;
+        border: 5px solid #29296d;
         border-left:0;
         border-top:0;
         cursor:pointer;
     }
+    &.podcasts { overflow-x:hidden; }
     &.big { min-height:100vh;}
     &.middle { min-height: 50vh;}
     &.fixed {