360 lines
9.6 KiB
TypeScript
360 lines
9.6 KiB
TypeScript
/** @file
|
|
* @author Edouard DUPIN
|
|
* @copyright 2018, Edouard DUPIN, all right reserved
|
|
* @license PROPRIETARY (see license file)
|
|
*/
|
|
import { Component, OnInit, ViewChild, ElementRef, Inject } from '@angular/core';
|
|
|
|
import { DataService, PlayerService, TrackService, AlbumService, ArtistService } from 'app/service';
|
|
import { PlaylistCurrent } from 'app/service/player';
|
|
import { Title } from '@angular/platform-browser';
|
|
import { Album, Artist, Track } from 'app/back-api';
|
|
import { isArray, isNullOrUndefined, Environment } from '@kangaroo-and-rabbit/kar-cw';
|
|
|
|
|
|
export enum PlayMode {
|
|
PLAY_ONE = "check",
|
|
PLAY_ALL = "trending_flat",
|
|
PLAY_ONE_LOOP = "repeat_one",
|
|
PLAY_ALL_LOOP = "repeat",
|
|
};
|
|
|
|
// note: all the input is managed with the player service ...
|
|
@Component({
|
|
selector: 'AppPlayerAudio',
|
|
templateUrl: './AppPlayerAudio.html',
|
|
styleUrls: ['./AppPlayerAudio.less']
|
|
})
|
|
export class ElementPlayerAudioComponent implements OnInit {
|
|
mediaPlayer: HTMLAudioElement;
|
|
duration: number;
|
|
durationDisplay: string;
|
|
@ViewChild('mediaPlayer')
|
|
set mainVideoEl(el: ElementRef) {
|
|
if (el !== null && el !== undefined) {
|
|
this.mediaPlayer = el.nativeElement;
|
|
}
|
|
}
|
|
public mediaSource: string = undefined;
|
|
|
|
public name: string = 'rr';
|
|
public description: string;
|
|
|
|
public countTrack: number;
|
|
|
|
public covers: string[];
|
|
|
|
public volume_value: number = 100;
|
|
public volume_displayMenu: boolean = false;
|
|
|
|
dataTitle: string;
|
|
dataAlbum: string;
|
|
dataAuthor: string;
|
|
playStream: boolean;
|
|
isPlaying: boolean;
|
|
currentTime: any;
|
|
currentTimeDisplay: string;
|
|
havePrevious: boolean = false;
|
|
haveNext: boolean = false;
|
|
playMode: PlayMode = PlayMode.PLAY_ALL;
|
|
onPlayMode() {
|
|
if (this.playMode === PlayMode.PLAY_ONE) {
|
|
this.playMode = PlayMode.PLAY_ALL;
|
|
} else if (this.playMode === PlayMode.PLAY_ALL) {
|
|
this.playMode = PlayMode.PLAY_ONE_LOOP;
|
|
} else if (this.playMode === PlayMode.PLAY_ONE_LOOP) {
|
|
this.playMode = PlayMode.PLAY_ALL_LOOP;
|
|
} else {
|
|
this.playMode = PlayMode.PLAY_ONE;
|
|
}
|
|
}
|
|
constructor(
|
|
@Inject('ENVIRONMENT') private environment: Environment,
|
|
private playerService: PlayerService,
|
|
private trackService: TrackService,
|
|
private dataService: DataService,
|
|
private albumService: AlbumService,
|
|
private artistService: ArtistService,
|
|
private titleService: Title) {
|
|
// nothing to do...
|
|
}
|
|
private currentLMedia: Track;
|
|
private localIdStreaming: number;
|
|
private localListStreaming: number[] = [];
|
|
ngOnInit() {
|
|
/*
|
|
export interface PlaylistCurrent {
|
|
playTrackList: number[];
|
|
trackLocalId?: number;
|
|
}
|
|
*/
|
|
let self = this;
|
|
this.playerService.playChange.subscribe((newProperty: PlaylistCurrent) => {
|
|
self.localIdStreaming = newProperty.trackLocalId;
|
|
self.localListStreaming = newProperty.playTrackList;
|
|
self.updateMediaStreamed();
|
|
});
|
|
}
|
|
updateMediaStreamed() {
|
|
if (isNullOrUndefined(this.localIdStreaming)) {
|
|
this.mediaSource = undefined;
|
|
return;
|
|
}
|
|
let self = this;
|
|
this.havePrevious = this.localIdStreaming <= 0;
|
|
this.haveNext = this.localIdStreaming >= this.localListStreaming.length - 1;
|
|
this.trackService.get(this.localListStreaming[this.localIdStreaming])
|
|
.then((response: Track) => {
|
|
console.log(`get response of video : ${JSON.stringify(response, null, 2)}`);
|
|
self.currentLMedia = response;
|
|
self.dataTitle = response.name;
|
|
if (!isNullOrUndefined(response.albumId)) {
|
|
this.albumService.get(response.albumId)
|
|
.then((response2: Album) => {
|
|
self.dataAlbum = response2.name;
|
|
self.updateTitle();
|
|
})
|
|
.catch(() => { });
|
|
}
|
|
if (!isNullOrUndefined(response.artists) && isArray(response.artists) && response.artists.length > 0) {
|
|
this.artistService.get(response.artists[0])
|
|
.then((response2: Artist) => {
|
|
self.dataAuthor = response2.name;
|
|
})
|
|
.catch(() => { });
|
|
}
|
|
if (isNullOrUndefined(self.currentLMedia)) {
|
|
console.log("Can not retrieve the media ...")
|
|
return;
|
|
}
|
|
if (isNullOrUndefined(self.currentLMedia.dataId)) {
|
|
console.log("Can not retrieve the media ... null or undefined data ID")
|
|
return;
|
|
}
|
|
self.mediaSource = self.dataService.getUrl(self.currentLMedia.dataId, "unknownMediaName.webm");
|
|
}).catch((error) => {
|
|
console.error(`error not unmanaged in audio player ... 111 ${error}`);
|
|
})
|
|
}
|
|
updateTitle() {
|
|
let title = this.dataTitle;
|
|
if (!isNullOrUndefined(this.dataAlbum)) {
|
|
title = `${this.dataAlbum} - ${title}`;
|
|
}
|
|
if (!isNullOrUndefined(this.dataAuthor)) {
|
|
title = `${title} (${this.dataAuthor})`;
|
|
}
|
|
|
|
this.titleService.setTitle(`${this.environment.applName} > ${title}`)
|
|
}
|
|
changeMetadata() {
|
|
console.log('list of the stream:');
|
|
}
|
|
myPeriodicCheckFunction() {
|
|
console.log('check ... ');
|
|
}
|
|
onRequirePlay() {
|
|
this.playStream = true;
|
|
}
|
|
onRequireStop() {
|
|
|
|
this.playStream = false;
|
|
}
|
|
onAudioEnded() {
|
|
if (this.playMode === PlayMode.PLAY_ONE) {
|
|
this.playStream = false;
|
|
} else if (this.playMode === PlayMode.PLAY_ALL) {
|
|
this.onNext();
|
|
} else if (this.playMode === PlayMode.PLAY_ONE_LOOP) {
|
|
this.mediaPlayer.currentTime = 0;
|
|
this.onPlay();
|
|
} else {
|
|
if (this.localIdStreaming == this.localListStreaming.length - 1) {
|
|
this.localIdStreaming = 0;
|
|
this.updateMediaStreamed();
|
|
if (this.localListStreaming.length == 1) {
|
|
this.mediaPlayer.currentTime = 0;
|
|
this.onPlay();
|
|
}
|
|
} else {
|
|
this.onNext();
|
|
}
|
|
}
|
|
}
|
|
|
|
changeStateToPlay() {
|
|
this.isPlaying = true;
|
|
}
|
|
changeStateToPause() {
|
|
this.isPlaying = false;
|
|
}
|
|
|
|
convertInDisplayTime(time: number): string {
|
|
let temporaryValue = parseInt(`${time}`, 10);
|
|
let hours = parseInt(`${temporaryValue / 3600}`, 10);
|
|
temporaryValue = temporaryValue - hours * 3600;
|
|
let minutes = parseInt(`${temporaryValue / 60}`, 10);
|
|
let seconds = temporaryValue - minutes * 60;
|
|
let out = '';
|
|
if (hours !== 0) {
|
|
out = `${out}${hours}:`;
|
|
}
|
|
if (minutes >= 10) {
|
|
out = `${out}${minutes}:`;
|
|
} else {
|
|
out = `${out}0${minutes}:`;
|
|
}
|
|
if (seconds >= 10) {
|
|
out = out + seconds;
|
|
} else {
|
|
out = `${out}0${seconds}`;
|
|
}
|
|
return out;
|
|
}
|
|
|
|
changeTimeupdate(currentTime: any) {
|
|
// console.log("time change ");
|
|
// console.log(" ==> " + this.audioPlayer.currentTime);
|
|
this.currentTime = this.mediaPlayer.currentTime;
|
|
this.currentTimeDisplay = this.convertInDisplayTime(this.currentTime);
|
|
// console.log(" ==> " + this.currentTimeDisplay);
|
|
}
|
|
changeDurationchange(duration: any) {
|
|
console.log('duration change ');
|
|
console.log(` ==> ${this.mediaPlayer.duration}`);
|
|
this.duration = this.mediaPlayer.duration;
|
|
this.durationDisplay = this.convertInDisplayTime(this.duration);
|
|
}
|
|
|
|
onPlay() {
|
|
console.log('play');
|
|
if (isNullOrUndefined(this.mediaPlayer)) {
|
|
console.log(`error element: ${this.mediaPlayer}`);
|
|
return;
|
|
}
|
|
this.lockPlayerEnable();
|
|
this.mediaPlayer.play();
|
|
}
|
|
|
|
onPause() {
|
|
console.log('pause');
|
|
if (isNullOrUndefined(this.mediaPlayer)) {
|
|
console.log(`error element: ${this.mediaPlayer}`);
|
|
return;
|
|
}
|
|
this.unlockPlayerEnable();
|
|
this.mediaPlayer.pause();
|
|
}
|
|
|
|
onPauseToggle() {
|
|
console.log('pause toggle ...');
|
|
if (this.isPlaying === true) {
|
|
this.onPause();
|
|
} else {
|
|
this.onPlay();
|
|
}
|
|
}
|
|
|
|
onStop() {
|
|
console.log('stop');
|
|
if (this.mediaPlayer.paused && this.mediaPlayer.currentTime == 0) {
|
|
this.mediaSource = null;
|
|
return;
|
|
}
|
|
if (isNullOrUndefined(this.mediaPlayer)) {
|
|
console.log(`error element: ${this.mediaPlayer}`);
|
|
return;
|
|
}
|
|
this.unlockPlayerEnable();
|
|
this.mediaPlayer.pause();
|
|
this.mediaPlayer.currentTime = 0;
|
|
}
|
|
|
|
onBefore() {
|
|
console.log('before');
|
|
if (this.localIdStreaming <= 0) {
|
|
console.error("have no previous !!!");
|
|
return;
|
|
}
|
|
this.localIdStreaming--;
|
|
this.updateMediaStreamed();
|
|
this.playerService.previous();
|
|
}
|
|
|
|
onNext() {
|
|
console.log('next');
|
|
if (this.localIdStreaming >= this.localListStreaming.length - 1) {
|
|
console.error("have no next !!!");
|
|
return;
|
|
}
|
|
this.localIdStreaming++;
|
|
this.updateMediaStreamed();
|
|
this.playerService.next();
|
|
}
|
|
|
|
seek(newValue: any) {
|
|
console.log(`seek ${newValue.value}`);
|
|
if (isNullOrUndefined(this.mediaPlayer)) {
|
|
console.log(`error element: ${this.mediaPlayer}`);
|
|
return;
|
|
}
|
|
this.mediaPlayer.currentTime = newValue.value;
|
|
}
|
|
|
|
onRewind() {
|
|
console.log('rewind');
|
|
if (isNullOrUndefined(this.mediaPlayer)) {
|
|
console.log(`error element: ${this.mediaPlayer}`);
|
|
return;
|
|
}
|
|
this.mediaPlayer.currentTime = this.currentTime - 10;
|
|
}
|
|
|
|
onForward() {
|
|
console.log('forward');
|
|
if (isNullOrUndefined(this.mediaPlayer)) {
|
|
console.log(`error element: ${this.mediaPlayer}`);
|
|
return;
|
|
}
|
|
this.mediaPlayer.currentTime = this.currentTime + 10;
|
|
}
|
|
|
|
onMore() {
|
|
console.log('more');
|
|
if (isNullOrUndefined(this.mediaPlayer)) {
|
|
console.log(`error element: ${this.mediaPlayer}`);
|
|
return;
|
|
}
|
|
}
|
|
|
|
|
|
// these element is to permit to not stop music when screen is off !!
|
|
wakeLock = null;
|
|
unlockPlayerEnable() {
|
|
const temporaryValue = this.wakeLock;
|
|
this.wakeLock = null;
|
|
if (!isNullOrUndefined(temporaryValue)) {
|
|
console.log(`plopppp ${temporaryValue}`);
|
|
temporaryValue.release();
|
|
}
|
|
try {
|
|
const tmp = navigator as any;
|
|
this.wakeLock = tmp.wakeLock.request('screen');
|
|
} catch (err) {
|
|
// The Wake Lock request has failed - usually system related, such as battery.
|
|
console.log(`Can not lock screen element: ${err.name}, ${err.message}`);
|
|
}
|
|
}
|
|
async lockPlayerEnable() {
|
|
if ('wakeLock' in navigator) {
|
|
try {
|
|
let tmp = navigator as any;
|
|
this.wakeLock = await tmp.wakeLock.request('screen');
|
|
} catch (err) {
|
|
// The Wake Lock request has failed - usually system related, such as battery.
|
|
console.log(`Can not lock screen element: ${err.name}, ${err.message}`);
|
|
}
|
|
}
|
|
}
|
|
}
|