comp.ts

import { Component, Input, OnChanges, SimpleChange, OnInit, Inject } from '@angular/core';
import { Headers, Http, RequestOptions } from '@angular/http';
import { DomSanitizer, SafeHtml, SafeUrl, SafeStyle } from '@angular/platform-browser';
import { Observable } from 'rxjs/Observable';
import { radio } from '../classes/radio';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { DialogComponent } from './dialogWeather.components';
//declare var Vibrant: any;
//import Vibrant = require('node-vibrant/src/vibrant');
//import Vibrant from 'node-vibrant/src/vibrant' ;
//import * as Vibrant from 'node-vibrant/src';
//import Vibrant = require('node-vibrant/src/index')
declare var Vibrant: any;
declare var Howl: any;
@Component({
  selector: 'player',
  templateUrl: 'src/app/components/player.components.tmpl.html',
  styleUrls: ['src/app/components/player.components.css']
})
export class PlayerComponent implements OnInit {
  @Input() toPlayRadio: radio;
  @Input() weather: any;
  radioBackground;
  weatherBackground;
  sound;
  vibrantInst: any;
  statPlayer: string;
  showVolume: boolean;
  player_config: playerConfig;
  // playerStat:stat;
  constructor(private _http: Http, private sanitization: DomSanitizer, public dialog: MatDialog) {
    // this.playerStat.loading = false;
    // this.playerStat.playing = false;
    // this.playerStat.puased = true;
    console.log("loading the player done");
    this.statPlayer = "unloaded";
    this.showVolume = false;
    this.player_config =
      {
        showVolume: false,
        volume: 0.5
      }
  }
  ngOnInit() {
    this.radioBackground =
      {
        'background': 'linear-gradient(to right, #C6426E, #642B73);' /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      }
    // this belong to the old version of node vibrant
    // this.vibrantInst = new Vibrant(this.toPlayRadio.pic)
    // this.vibrantInst.getPalette((err, palette) => {
    //   var rgb = palette.Vibrant.getRgb()
    //   this.radioBackground =
    //     {
    //       'background': 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ');'
    //     }
    // });
    // this belong to the new version but we still have integration problem with it so keep it commented until we fixed soon
    //   Vibrant.from('this.toPlayRadio.pic').getPalette(function(err, palette) {
    //   console.log(err);
    //   console.log(palette);
    // });
  }
  ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
    console.log(changes);
    // when weather change
    if (changes.weather) {
      // weather changed
      this.setUpweather(this.weather.stat);
    }
    // all the next work only when there is radio changes
    if (changes.toPlayRadio) {
      if (this.sound != undefined) {
        this.sound.pause();
        this.statPlayer = 'paused';
        this.sound.unload();
      }
      // Vibrant.from(changes.toPlayRadio.currentValue.pic).getPalette((err, palette) =>{
      //   var rgb = palette.Vibrant.getRgb()
      //   this.radioBackground =
      //     {
      //       'background': 'rgba(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ',.70);'
      //     }
      // })
      // this.vibrantInst = new Vibrant(changes.toPlayRadio.currentValue.pic)
      // this.vibrantInst.getPalette((err, palette) => {
      //   var rgb = palette.Vibrant.getRgb()
      //   this.radioBackground =
      //     {
      //       'background': 'rgba(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ',.70);'
      //     }
      //   // adding optimisation for node-viber issues declared on git https://github.com/jariz/vibrant.js/issues/45
      //   // remove all canvas in the document
      // });
    }
  }
  play() {
    if (this.sound != undefined) {
      this.sound.unload();
    }
    this.statPlayer = "loading";
    console.log("start playing");
    this.sound = new Howl({
      src: [this.toPlayRadio.streamUrl],
      html5: true,
      //autoplay : true, //fix 0.2
      //loop :true, // firefox fix 0.1 (didnt work)
      format: ['mp3'], // firefox fix 0.2
      volume: this.player_config.volume,
      onload: function() {
        console.log('loading stream');
        this.statPlayer = "loaded";
      },
      onloaderror: function(id, msg) {
        console.log("cant load the stream => " + msg);
      },
      onplay: function() {
        console.log('playing...')
        this.statPlayer = "playing";
      },
      onpause: function() {
        console.log('paused...')
        this.statPlayer = "paused";
        console.log(this.statPlayer);
      },
      onend: function() {
        console.log('Finished!');
      }
    });
    // console.log(this.sound);
    this.sound.play();
  }
  pause() {
    console.log("stop playing");
    this.sound.pause();
    this.statPlayer = "paused";
  }
  playingButtonAction() {
    console.log("player => " + this.statPlayer);
    if (this.sound != undefined) {
      if (this.sound.playing()) {
        this.pause();
      } else {
        this.play();
      }
    }
    else {
      this.play();
    }
  }
  volumeshow(action) {
    if (action == "hide") {
      console.log("hide volume")
      this.player_config.showVolume = false;
    }
    else {
      console.log("show volume")
      this.player_config.showVolume = true;
    }
    // console.log('show the volume');
  }
  volumeManger(vol) {
    console.log("volume chnage");
  }
  // background getter function since we have to check if the result
  background(items: any, http: Http, resultitem?: number): Observable<any> {
    let url: string;
    let perurl: string;
    if (resultitem) {
      // fetch the correct item from google return result
      perurl = items[resultitem];
    }
    else {
      // fetch the first one as default item is 0
      perurl = items[0].link;
    }
    // // test if we can show it
    var observable = Observable.create(function(observer) {
    http.get(perurl)
      .subscribe(
      // Successful responses call the first callback.
      data => {
      console.log("first pic taken ");
        url = perurl;
        observer.next(url);
      },
      // Errors will call this callback instead:
      err => {
        console.log(err);
        console.log('Something went wrong! pic we cant get it recall for the next result link --');
        // if it's first call
        if (!resultitem)
          return this.background(items,http,1);
        else
          return this.background(items,http,resultitem++);
      }
      );
      //observer.complete();
    });
    return observable;
  }
  setUpweather(stat: Boolean) {
    // NOTE: work on image load to set as bg .
    if (stat == true) {
      let weather_text = this.weather.data.weather[0].description;
      let key_go = "AIzaSyA8MtLzV7Q7S85CwkvlA8D8ntt3SVi2M3Y";
      let url = "https://www.googleapis.com/customsearch/v1?q="+weather_text+" wallpaper&cx=005992228955823952017%3Azm9k0hvaggi&imgSize=xlarge&imgType=photo&num=10&safe=medium&searchType=image&key="+key_go;
      // set up the look for weather option
      // 1- find background
      this._http.get(url)
        .subscribe(result => {
          console.log(result.json());
          let image_url = result.json().items[0].link;
          // work on this after 2 weeks start from 28/12/2017
          // this.background(result.json().items,this._http).subscribe(data => {
          //   console.log(data)
          // });
          // send the pic to style
          this.weatherBackground = this.sanitization.bypassSecurityTrustStyle(`url('${image_url}')`);
          console.log(this.weatherBackground);
        });
    }
    else {
      // disable look
    }
  }
  // weather more info
  openDialog(): void {
    let dialogRef = this.dialog.open(DialogComponent, {
      data: { weather: this.weather.data },
      width: '40vw',
    });
  }
}

interface playerConfig {
  volume: number
  showVolume: boolean
}