574 lines
16 KiB
TypeScript
574 lines
16 KiB
TypeScript
/** @file
|
|
* @author Edouard DUPIN
|
|
* @copyright 2018, Edouard DUPIN, all right reserved
|
|
* @license PROPRIETARY (see license file)
|
|
*/
|
|
|
|
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
|
|
import { DataService, TrackService, ArtistService, AlbumService, ArianeService } from 'app/service';
|
|
import { HttpWrapperService } from 'common/service';
|
|
import { isNullOrUndefined } from 'common/utils';
|
|
|
|
@Component({
|
|
selector: 'app-track',
|
|
templateUrl: './track.html',
|
|
styleUrls: [ './track.less' ]
|
|
})
|
|
|
|
export class TrackScene implements OnInit {
|
|
trackGlobal:any;
|
|
@ViewChild('globalTrackElement')
|
|
set mainDivEl(el: ElementRef) {
|
|
if(el !== null && el !== undefined) {
|
|
this.trackGlobal = el.nativeElement;
|
|
}
|
|
}
|
|
trackPlayer: HTMLVideoElement;
|
|
@ViewChild('videoPlayer')
|
|
set mainTrackEl(el: ElementRef) {
|
|
if(el !== null && el !== undefined) {
|
|
this.trackPlayer = el.nativeElement;
|
|
}
|
|
}
|
|
videoCanva: any;
|
|
@ViewChild('canvascreenshoot')
|
|
set mainCanvaEl(el: ElementRef) {
|
|
if(el !== null && el !== undefined) {
|
|
this.videoCanva = el.nativeElement;
|
|
}
|
|
}
|
|
haveNext = null;
|
|
havePrevious = null;
|
|
idTrack:number = -1;
|
|
|
|
mediaIsNotFound:boolean = false;
|
|
mediaIsLoading:boolean = true;
|
|
error:string = '';
|
|
|
|
name:string = '';
|
|
description:string = '';
|
|
episode:number = undefined;
|
|
artists:number[] = undefined;
|
|
artistName:string = undefined;
|
|
albumId:number = undefined;
|
|
albumName:string = undefined;
|
|
dataId:number = -1;
|
|
time:number = undefined;
|
|
typeId:number = undefined;
|
|
generatedName:string = '';
|
|
trackSource:string = '';
|
|
covers: string[];
|
|
|
|
playTrack:boolean = false;
|
|
displayVolumeMenu:boolean = false;
|
|
isPlaying:boolean = false;
|
|
isFullScreen:boolean = false;
|
|
currentTime:number = 0;
|
|
currentTimeDisplay:string = '00';
|
|
duration:number = 0;
|
|
durationDisplay:string = '00';
|
|
volumeValue:number = 100;
|
|
|
|
displayNeedHide:boolean = false;
|
|
timeLeft: number = 10;
|
|
interval = null;
|
|
constructor(private trackService: TrackService,
|
|
private artistService: ArtistService,
|
|
private albumService: AlbumService,
|
|
private httpService: HttpWrapperService,
|
|
private arianeService: ArianeService,
|
|
private dataService: DataService) {
|
|
|
|
}
|
|
|
|
startHideTimer() {
|
|
this.displayNeedHide = false;
|
|
this.timeLeft = 5;
|
|
if(this.interval !== null) {
|
|
return;
|
|
}
|
|
let self = this;
|
|
this.interval = setInterval(() => {
|
|
console.log(`periodic event: ${ self.timeLeft}`);
|
|
if(self.timeLeft > 0) {
|
|
self.timeLeft--;
|
|
} else {
|
|
clearInterval(self.interval);
|
|
self.timeOutDetected();
|
|
}
|
|
}, 1000);
|
|
}
|
|
timeOutDetected() {
|
|
console.log(' ==> stop timer');
|
|
this.displayNeedHide = true;
|
|
clearInterval(this.interval);
|
|
this.interval = null;
|
|
}
|
|
onRequireNext(event: any) {
|
|
console.log(`generate next : ${ this.haveNext.id}`);
|
|
if (event.ctrlKey === false) {
|
|
this.arianeService.navigateTrack({ trackId: this.haveNext.id, newWindows:event.which === 2} );
|
|
} else {
|
|
this.arianeService.navigateTrackEdit({ id: this.haveNext.id, newWindows:event.which === 2} );
|
|
}
|
|
this.arianeService.setTrack(this.haveNext.id);
|
|
}
|
|
onRequirePrevious(event: any) {
|
|
console.log(`generate previous : ${ this.havePrevious.id}`);
|
|
if (event.ctrlKey === false) {
|
|
this.arianeService.navigateTrack({ trackId: this.haveNext.id, newWindows:event.which === 2} );
|
|
} else {
|
|
this.arianeService.navigateTrackEdit({ id: this.haveNext.id, newWindows:event.which === 2} );
|
|
}
|
|
this.arianeService.setTrack(this.havePrevious.id);
|
|
}
|
|
generateName() {
|
|
this.generatedName = '';
|
|
if(this.artistName !== undefined) {
|
|
this.generatedName = `${this.generatedName }${this.artistName }-`;
|
|
}
|
|
if(this.albumName !== undefined) {
|
|
if(this.albumName.length < 2) {
|
|
this.generatedName = `${this.generatedName }s0${ this.albumName }-`;
|
|
} else {
|
|
this.generatedName = `${this.generatedName }s${ this.albumName }-`;
|
|
}
|
|
}
|
|
if(this.episode !== undefined) {
|
|
if(this.episode < 10) {
|
|
this.generatedName = `${this.generatedName }e0${ this.episode }-`;
|
|
} else {
|
|
this.generatedName = `${this.generatedName }e${ this.episode }-`;
|
|
}
|
|
}
|
|
this.generatedName = this.generatedName + this.name;
|
|
this.generatedName = this.generatedName.replace(new RegExp('&', 'g'), '_');
|
|
this.generatedName = this.generatedName.replace(new RegExp('/', 'g'), '_');
|
|
// update the path of the uri request
|
|
this.trackSource = this.httpService.createRESTCall2({
|
|
api: `data/${ this.dataId}/${this.generatedName}`,
|
|
addURLToken: true,
|
|
});
|
|
}
|
|
|
|
myPeriodicCheckFunction() {
|
|
console.log('check ... ');
|
|
}
|
|
changeMetadata() {
|
|
console.log('list of the stream:');
|
|
|
|
/*
|
|
let captureStream = this.trackPlayer.audioTracks;
|
|
for (let iii=0; iii < captureStream.length; iii++) {
|
|
console.log(" - " + captureStream[iii].language);
|
|
if (captureStream[iii].language.substring(0,2) === "fr") {
|
|
captureStream[iii].enabled = true;
|
|
} else {
|
|
captureStream[iii].enabled = false;
|
|
}
|
|
}
|
|
*/
|
|
}
|
|
audioTracks(event) {
|
|
console.log(`list of the stream:${ event}`);
|
|
|
|
/*
|
|
let captureStream = this.trackPlayer.audioTracks;
|
|
for (let iii=0; iii < captureStream.length; iii++) {
|
|
console.log(" - " + captureStream[iii].language);
|
|
if (captureStream[iii].language.substring(0,2) === "fr") {
|
|
captureStream[iii].enabled = true;
|
|
} else {
|
|
captureStream[iii].enabled = false;
|
|
}
|
|
}
|
|
*/
|
|
}
|
|
|
|
ngOnInit() {
|
|
let self = this;
|
|
this.startHideTimer();
|
|
this.idTrack = this.arianeService.getTrackId();
|
|
this.arianeService.trackChange.subscribe((trackId) => {
|
|
console.log(`Detect trackId change...${ trackId}`);
|
|
self.idTrack = trackId;
|
|
self.updateDisplay();
|
|
});
|
|
self.updateDisplay();
|
|
}
|
|
updateDisplay():void {
|
|
let self = this;
|
|
self.haveNext = null;
|
|
self.havePrevious = null;
|
|
this.trackService.get(this.idTrack)
|
|
.then((response) => {
|
|
console.log(`get response of track : ${ JSON.stringify(response, null, 2)}`);
|
|
self.error = '';
|
|
self.name = response.name;
|
|
self.description = response.description;
|
|
self.episode = response.episode;
|
|
self.artists = response.artists;
|
|
self.albumId = response.albumId;
|
|
self.dataId = response.dataId;
|
|
self.time = response.time;
|
|
self.generatedName = "????????? TODO: ???????" //response.generatedName;
|
|
if(self.dataId !== -1) {
|
|
self.trackSource = self.httpService.createRESTCall2({
|
|
api: `data/${ self.dataId}/${self.generatedName}`,
|
|
addURLToken: true,
|
|
});
|
|
} else {
|
|
self.trackSource = '';
|
|
}
|
|
self.covers = self.dataService.getCoverListUrl(response.covers);
|
|
|
|
self.generateName();
|
|
if(!isNullOrUndefined(self.artists) && self.artists.length !== 0) {
|
|
self.artistService.get(self.artists[0])
|
|
.then((response2) => {
|
|
self.artistName = response2.name;
|
|
self.generateName();
|
|
}).catch((response3) => {
|
|
// nothing to do ...
|
|
});
|
|
}
|
|
if(!isNullOrUndefined(self.albumId)) {
|
|
self.albumService.get(self.albumId)
|
|
.then((response4) => {
|
|
self.albumName = response4.name;
|
|
self.generateName();
|
|
}).catch((response5) => {
|
|
// nothing to do ...
|
|
});
|
|
self.albumService.getTrack(self.albumId)
|
|
.then((response6:any) => {
|
|
// console.log("saison property: " + JSON.stringify(response, null, 2));
|
|
self.haveNext = null;
|
|
self.havePrevious = null;
|
|
for(let iii = 0; iii < response6.length; iii++) {
|
|
if(isNullOrUndefined(response6[iii].episode)) {
|
|
continue;
|
|
}
|
|
if(response6[iii].episode < self.episode) {
|
|
if(self.havePrevious === null) {
|
|
self.havePrevious = response6[iii];
|
|
} else if(self.havePrevious.episode < response6[iii].episode) {
|
|
self.havePrevious = response6[iii];
|
|
}
|
|
} else if(response6[iii].episode > self.episode) {
|
|
if(self.haveNext === null) {
|
|
self.haveNext = response6[iii];
|
|
} else if(self.haveNext.episode > response6[iii].episode) {
|
|
self.haveNext = response6[iii];
|
|
}
|
|
}
|
|
self.covers.push(self.dataService.getCoverUrl(response6[iii]));
|
|
}
|
|
}).catch((response7:any) => {
|
|
|
|
});
|
|
}
|
|
self.mediaIsLoading = false;
|
|
// console.log("display source " + self.trackSource);
|
|
// console.log("set transformed : " + JSON.stringify(self, null, 2));
|
|
}).catch((response8) => {
|
|
self.error = 'Can not get the data';
|
|
self.name = '';
|
|
self.description = '';
|
|
self.episode = undefined;
|
|
self.artists = undefined;
|
|
self.albumId = undefined;
|
|
self.dataId = -1;
|
|
self.time = undefined;
|
|
self.generatedName = '';
|
|
self.trackSource = '';
|
|
self.covers = undefined;
|
|
self.artistName = undefined;
|
|
self.albumName = undefined;
|
|
self.mediaIsNotFound = true;
|
|
self.mediaIsLoading = false;
|
|
});
|
|
}
|
|
onRequirePlay() {
|
|
this.startHideTimer();
|
|
this.playTrack = true;
|
|
this.displayVolumeMenu = false;
|
|
}
|
|
onRequireStop() {
|
|
this.startHideTimer();
|
|
this.playTrack = false;
|
|
this.displayVolumeMenu = false;
|
|
}
|
|
onTrackEnded() {
|
|
this.startHideTimer();
|
|
this.playTrack = false;
|
|
this.displayVolumeMenu = false;
|
|
|
|
/*
|
|
if(this.isFullScreen === true) {
|
|
this.isFullScreen = false;
|
|
}
|
|
*/
|
|
}
|
|
|
|
changeStateToPlay() {
|
|
this.isPlaying = true;
|
|
if(this.isFullScreen === true) {
|
|
this.onFullscreen();
|
|
}
|
|
}
|
|
changeStateToPause() {
|
|
this.isPlaying = false;
|
|
}
|
|
|
|
convertIndisplayTime(time:number) : string {
|
|
let tmpp = parseInt(`${ time}`, 10);
|
|
let heures = parseInt(`${ tmpp / 3600}`, 10);
|
|
tmpp = tmpp - heures * 3600;
|
|
let minutes = parseInt(`${ tmpp / 60}`, 10);
|
|
let seconds = tmpp - minutes * 60;
|
|
let out = '';
|
|
if(heures !== 0) {
|
|
out = `${out }${heures }:`;
|
|
}
|
|
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.trackPlayer.currentTime);
|
|
this.currentTime = this.trackPlayer.currentTime;
|
|
this.currentTimeDisplay = this.convertIndisplayTime(this.currentTime);
|
|
// console.log(" ==> " + this.currentTimeDisplay);
|
|
}
|
|
changeDurationchange(duration: any) {
|
|
console.log('duration change ');
|
|
console.log(` ==> ${ this.trackPlayer.duration}`);
|
|
this.duration = this.trackPlayer.duration;
|
|
this.durationDisplay = this.convertIndisplayTime(this.duration);
|
|
}
|
|
|
|
onPlay() {
|
|
console.log('play');
|
|
this.startHideTimer();
|
|
if(this.trackPlayer === null ||
|
|
this.trackPlayer === undefined) {
|
|
console.log(`error element: ${ this.trackPlayer}`);
|
|
return;
|
|
}
|
|
this.trackPlayer.volume = this.volumeValue / 100;
|
|
this.trackPlayer.play();
|
|
}
|
|
|
|
onPause() {
|
|
console.log('pause');
|
|
this.startHideTimer();
|
|
if(this.trackPlayer === null ||
|
|
this.trackPlayer === undefined) {
|
|
console.log(`error element: ${ this.trackPlayer}`);
|
|
return;
|
|
}
|
|
this.trackPlayer.pause();
|
|
}
|
|
|
|
onPauseToggle() {
|
|
console.log('pause toggle ...');
|
|
if(this.isPlaying === true) {
|
|
this.onPause();
|
|
} else {
|
|
this.onPlay();
|
|
}
|
|
}
|
|
|
|
onStop() {
|
|
console.log('stop');
|
|
this.startHideTimer();
|
|
if(this.trackPlayer === null ||
|
|
this.trackPlayer === undefined) {
|
|
console.log(`error element: ${ this.trackPlayer}`);
|
|
return;
|
|
}
|
|
this.trackPlayer.pause();
|
|
this.trackPlayer.currentTime = 0;
|
|
}
|
|
|
|
onBefore() {
|
|
console.log('before');
|
|
this.startHideTimer();
|
|
}
|
|
|
|
onNext() {
|
|
console.log('next');
|
|
this.startHideTimer();
|
|
}
|
|
|
|
seek(newValue:any) {
|
|
console.log(`seek ${ newValue.value}`);
|
|
this.startHideTimer();
|
|
if(this.trackPlayer === null ||
|
|
this.trackPlayer === undefined) {
|
|
console.log(`error element: ${ this.trackPlayer}`);
|
|
return;
|
|
}
|
|
this.trackPlayer.currentTime = newValue.value;
|
|
}
|
|
|
|
onRewind() {
|
|
console.log('rewind');
|
|
this.startHideTimer();
|
|
if(this.trackPlayer === null ||
|
|
this.trackPlayer === undefined) {
|
|
console.log(`error element: ${ this.trackPlayer}`);
|
|
return;
|
|
}
|
|
this.trackPlayer.currentTime = this.currentTime - 10;
|
|
}
|
|
|
|
onForward() {
|
|
console.log('forward');
|
|
this.startHideTimer();
|
|
if(this.trackPlayer === null ||
|
|
this.trackPlayer === undefined) {
|
|
console.log(`error element: ${ this.trackPlayer}`);
|
|
return;
|
|
}
|
|
this.trackPlayer.currentTime = this.currentTime + 10;
|
|
}
|
|
|
|
onMore() {
|
|
console.log('more');
|
|
this.startHideTimer();
|
|
if(this.trackPlayer === null ||
|
|
this.trackPlayer === undefined) {
|
|
console.log(`error element: ${ this.trackPlayer}`);
|
|
return;
|
|
}
|
|
}
|
|
onFullscreen() {
|
|
console.log('fullscreen');
|
|
this.startHideTimer();
|
|
if(this.trackGlobal === null ||
|
|
this.trackGlobal === undefined) {
|
|
console.log(`error element: ${ this.trackGlobal}`);
|
|
return;
|
|
}
|
|
if(this.trackGlobal.requestFullscreen) {
|
|
this.trackGlobal.requestFullscreen();
|
|
} else if(this.trackGlobal.mozRequestFullScreen) {
|
|
this.trackGlobal.mozRequestFullScreen();
|
|
} else if(this.trackGlobal.webkitRequestFullscreen) {
|
|
this.trackGlobal.webkitRequestFullscreen();
|
|
} else if(this.trackGlobal.msRequestFullscreen) {
|
|
this.trackGlobal.msRequestFullscreen();
|
|
}
|
|
}
|
|
|
|
onFullscreenExit() {
|
|
this.onFullscreenExit22(document);
|
|
}
|
|
onFullscreenExit22(docc:any) {
|
|
console.log('fullscreen EXIT');
|
|
this.startHideTimer();
|
|
if(this.trackGlobal === null ||
|
|
this.trackGlobal === undefined) {
|
|
console.log(`error element: ${ this.trackGlobal}`);
|
|
return;
|
|
}
|
|
if(docc.exitFullscreen) {
|
|
docc.exitFullscreen();
|
|
} else if(docc.mozCancelFullScreen) {
|
|
docc.mozCancelFullScreen();
|
|
} else if(docc.webkitExitFullscreen) {
|
|
docc.webkitExitFullscreen();
|
|
} else if(docc.msExitFullscreen) {
|
|
docc.msExitFullscreen();
|
|
}
|
|
}
|
|
|
|
onFullscreenChange() {
|
|
this.onFullscreenChange22(document);
|
|
}
|
|
onFullscreenChange22(element:any) {
|
|
let isInFullScreen = element.fullscreenElement && element.fullscreenElement !== null ||
|
|
element.webkitFullscreenElement && element.webkitFullscreenElement !== null ||
|
|
element.mozFullScreenElement && element.mozFullScreenElement !== null ||
|
|
element.msFullscreenElement && element.msFullscreenElement !== null;
|
|
console.log(`onFullscreenChange(${ isInFullScreen })`);
|
|
this.isFullScreen = isInFullScreen;
|
|
}
|
|
|
|
onVolumeMenu() {
|
|
this.displayVolumeMenu = !this.displayVolumeMenu;
|
|
this.startHideTimer();
|
|
}
|
|
|
|
onVolume(newValue:any) {
|
|
console.log(`onVolume ${ newValue.value}`);
|
|
this.startHideTimer();
|
|
if(this.trackPlayer === null ||
|
|
this.trackPlayer === undefined) {
|
|
console.log(`error element: ${ this.trackPlayer}`);
|
|
return;
|
|
}
|
|
this.volumeValue = newValue.value;
|
|
this.trackPlayer.volume = this.volumeValue / 100;
|
|
this.trackPlayer.muted = false;
|
|
}
|
|
|
|
onVolumeMute() {
|
|
this.startHideTimer();
|
|
if(this.trackPlayer === null ||
|
|
this.trackPlayer === undefined) {
|
|
console.log(`error element: ${ this.trackPlayer}`);
|
|
return;
|
|
}
|
|
this.trackPlayer.muted = true;
|
|
}
|
|
|
|
onVolumeUnMute() {
|
|
this.startHideTimer();
|
|
if(this.trackPlayer === null ||
|
|
this.trackPlayer === undefined) {
|
|
console.log(`error element: ${ this.trackPlayer}`);
|
|
return;
|
|
}
|
|
this.trackPlayer.muted = false;
|
|
}
|
|
|
|
onTakeScreenShoot() {
|
|
this.startHideTimer();
|
|
// const canvas = document.createElement("canvas");
|
|
// scale the canvas accordingly
|
|
this.videoCanva.width = this.trackPlayer.videoWidth;
|
|
this.videoCanva.height = this.trackPlayer.videoHeight;
|
|
// draw the track at that frame
|
|
this.videoCanva.getContext('2d').drawImage(this.trackPlayer, 0, 0, this.videoCanva.width, this.videoCanva.height);
|
|
// canvas.crossorigin="anonymous"
|
|
// convert it and send it to the server
|
|
let self = this;
|
|
|
|
this.videoCanva.toBlob((blob) => {
|
|
self.trackService.uploadCoverBlob(blob, this.idTrack);
|
|
}, 'image/jpeg', 0.95);
|
|
|
|
/*
|
|
let tmpUrl = this.videoCanva.toDataURL('image/jpeg', 0.95);
|
|
fetch(tmpUrl)
|
|
.then(res => res.blob()) // Gets the response and returns it as a blob
|
|
.then(blob => {
|
|
self.trackService.uploadCoverBlob(blob, this.idTrack);
|
|
});
|
|
*/
|
|
}
|
|
}
|