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: string = "";
|
|
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.(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);
|
|
});
|
|
*/
|
|
}
|
|
}
|