Actualizar informacion cancion

La app ya actualiza la cancion sin importar si se está reproduciendo o no, los nombres de las canciones ya se muestran correctamente sin importar caracteres especiales
Caivan · May 29, 2020 · 973e0a0 · 973e0a0
1 parent b8dff2a
commit 973e0a0
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 67 deletions.
diff --git a/Poliradio/src/app/Model/songInfo.ts b/Poliradio/src/app/Model/songInfo.ts
diff --git a/Poliradio/src/app/header/header.component.html b/Poliradio/src/app/header/header.component.html
@@ -7,15 +7,14 @@
 
 
       <div class="audio-wrapper" id="player-container" href="javascript:;">
-        <audio preload="metadata" (loadedmetadata)="control($event)" (timeupdate)="update()" name="media" #audioPlayer
-          (ontimeupdate)="getCurrent()">
+        <audio preload="metadata" (loadedmetadata)="control($event)" (timeupdate)="update()" name="media" #audioPlayer>
           <source [src]="URL" type="audio/mpeg">
         </audio>
       </div>
 
       <div class="player-controls scrubber">
-        <p style="font-weight: 700;">{{songName}}</p>
-        <small>{{artistName}}</small>
+        <p style="font-weight: 700;" [innerHTML]="songName"> </p>
+        <small [innerHTML]="artistName"></small>
       </div>
       <div class="album-image">
         <img *ngIf="this.albumImage" [src]="this.albumImage" alt="">

diff --git a/Poliradio/src/app/header/header.component.scss b/Poliradio/src/app/header/header.component.scss
@@ -4,8 +4,7 @@ ion-content ion-toolbar {
   .audio-player:hover{
     background: light-gray;
     color: #3498DB;
-  }
-
+  }  
   .audio-player {
     background:#1a3882;
    color: whitesmoke;
@@ -36,10 +35,12 @@ ion-content ion-toolbar {
       }
     }
 
-    .player-controls {
+    .player-controls {      
       align-items: center;
       justify-content: center;
       color: #fff;
+      margin-left: 2rem;
+      margin-right: auto;
       //margin-top: 2.5rem;
       flex: 3;
   /*    progress {
@@ -73,7 +74,7 @@ ion-content ion-toolbar {
       background-size: cover;
       width: 50px;
       height: 50px;
-      margin: 1.5rem 0 2rem 2rem;
+      margin: 1.5rem 0 3rem 0.5rem;
       &.pause {
         background-image: url('http://www.lukeduncan.me/images/pause-button.png');
       }

diff --git a/Poliradio/src/app/header/header.component.ts b/Poliradio/src/app/header/header.component.ts
@@ -1,82 +1,99 @@
 import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
 import { Router, NavigationStart } from '@angular/router';
-import {SonginfoService} from "../services/songinfo.service";
+import { SonginfoService } from "../services/songinfo.service";
+import { Observable } from 'rxjs';
 import { stringify } from 'querystring';
 import { format } from 'url';
 import { formatNumber, formatDate } from '@angular/common';
 import { environment } from 'src/environments/environment';
+import { songInfo } from '../Model/songInfo';
 
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss'],
 })
-export class HeaderComponent{
-
-  @ViewChild('audioPlayer',{static: true})audioPlayer: HTMLMediaElement;
+export class HeaderComponent {
 
-  public URL= environment.ACCESS_POINT_STREAMING;
+  @ViewChild('audioPlayer', { static: true }) audioPlayer: HTMLMediaElement;
+
+  public URL = environment.ACCESS_POINT_STREAMING;
+  song$: Observable<songInfo>;
   loaded = false;
   isPlaying = false;
   progress;
   duration;
   songName;
   songCurrentName;
-  artistName:String;
-  albumImage;  
-  info;  
+  artistName: String;
+  albumImage;
+  info:songInfo;
   startSongHour;
   actualHour;
   position;
-  durationValues:string[];  
+  durationValues: string[];
 
-  constructor(private router:Router, private songinfoService:SonginfoService){
-      router.events.forEach((event) => {
-        if(event instanceof NavigationStart) {
-           this.audioPlayer.pause()           
-           this.isPlaying = false;
-        }         
-      });
-
-  }
-  ngOnInit() : void{
+  constructor(private router: Router, private songinfoService: SonginfoService) {
+    router.events.forEach((event) => {
+      if (event instanceof NavigationStart) {
+        this.audioPlayer.pause()
+        this.isPlaying = false;
+      }
+    });
     this.getCurrent();
-    this.songCurrentName= this.songName;
+    this.songCurrentName = this.songName;
+  }
+  ngOnInit(): void {    
+    this.song$ = this.songinfoService.getInfo();
+    this.song$.subscribe(resp => {
+      setInterval(() => {          
+        this.songinfoService.getInfo().subscribe(updt =>{
+          resp=updt;
+        })                 
+        this.songName = resp.current.metadata.track_title;              
+        this.artistName = resp.current.metadata.artist_name;
+        this.albumImage = resp.current.album_artwork_image;
+        this.durationValues = resp.current.metadata.length.split(":");
+        this.startSongHour = resp.current.starts.split(" ")[1].split(":") ;
+      },
+        1000);
+      //inicia la cancion                    
+    });
   }
 
   ngOnDestroy(): void {
     this.audioPlayer.pause();
   }
 
-  control(event:any){
-      this.loaded = true;
-      this.audioPlayer = event.srcElement;      
+  control(event: any) {
+    this.loaded = true;
+    this.audioPlayer = event.srcElement;
   }
 
-  play(){
-    if(this.loaded){
-      if(!this.isPlaying){
+  play() {
+    if (this.loaded) {
+      if (!this.isPlaying) {
         this.audioPlayer.play();
         this.isPlaying = true;
       }
     }
   }
-  update(){
-    if(this.loaded){
-      if(this.isPlaying){
-        this.progress=this.position;
-        this.getCurrent();
-        if(this.songName!=this.songCurrentName){
-          this.progress=0;
-          this.audioPlayer.currentTime=0;          
-          this.songCurrentName=this.songName;
+  update() {
+    if (this.loaded) {
+      if (this.isPlaying) {
+        this.progress = this.position;
+        this.getProgress();
+        if (this.songName != this.songCurrentName) {
+          this.progress = 0;
+          this.audioPlayer.currentTime = 0;
+          this.songCurrentName = this.songName;
         }
       }
     }
   }
 
-  stop(){
-    if(this.isPlaying){
+  stop() {
+    if (this.isPlaying) {
       this.audioPlayer.pause();
       this.isPlaying = false;
       this.progress = 0;
@@ -85,26 +102,15 @@ export class HeaderComponent{
   /**
    * GET THE INFO OF THE CURRENT SONG
    */
-  getCurrent(){
-    this.songinfoService.getSonginfo().subscribe(resp =>{
-      //console.log(resp);
-      const keys = resp.headers.keys();
-      let headers = keys.map(key =>
-      `${key}: ${resp.headers.get(key)}`);
-      this.info=resp.body;
-      this.songName=String(this.info.current.metadata.track_title);
-
-      this.artistName=decodeURIComponent(this.info.current.metadata.artist_name); 
-      this.albumImage=this.info.current.album_artwork_image;  
-      this.durationValues= this.info.current.metadata.length.split(":");     
-      this.startSongHour=this.info.current.starts.split(" ")[1].split(":") //inicia la cancion      
-      let actualHour= new Date();           
-      actualHour.setHours(actualHour.getHours()+5); 
-      let x=Number(actualHour.getHours())*3600+Number(actualHour.getMinutes())*60+Number(actualHour.getSeconds()); //hora actual en segundos 
-      let y=Number((this.startSongHour[0])*3600)+Number(this.startSongHour[1])*60+Number(this.startSongHour[2]); //hora inicio cancion en segundos      
-      this.duration=Number(this.durationValues[0])*3600+Number(this.durationValues[1])*60+Number(this.durationValues[2]);      
-      this.position=(x-y)/this.duration; //posicion inicial barra de progreso            
-    });    
+  getCurrent() {
+    //ssss  
+  }
+  getProgress() {
+    let actualHour = new Date();
+    actualHour.setHours(actualHour.getHours() + 5);
+    let x = Number(actualHour.getHours()) * 3600 + Number(actualHour.getMinutes()) * 60 + Number(actualHour.getSeconds()); //hora actual en segundos 
+    let y = Number((this.startSongHour[0]) * 3600) + Number(this.startSongHour[1]) * 60 + Number(this.startSongHour[2]); //hora inicio cancion en segundos      
+    this.duration = Number(this.durationValues[0]) * 3600 + Number(this.durationValues[1]) * 60 + Number(this.durationValues[2]);
+    this.position = (x - y) / this.duration; //posicion inicial barra de progreso   
   }
-
 }
diff --git a/Poliradio/src/app/services/songinfo.service.ts b/Poliradio/src/app/services/songinfo.service.ts
@@ -1,5 +1,7 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Observable, observable } from 'rxjs';
+import { shareReplay } from 'rxjs/operators';
+import {songInfo} from '../Model/songInfo';
 import { HttpClient, HttpHeaders,HttpResponse } from "@angular/common/http";
 import { environment } from 'src/environments/environment';
 
@@ -22,4 +24,9 @@ export class SonginfoService {
       observe:'response'
     });
   }
+  public getInfo():Observable<songInfo>{
+    return this.http.get<songInfo>(environment.ACCESS_POINT_STREAMING_INFO).pipe(
+      shareReplay()
+    );
+  }
 }