253 lines
12 KiB
JavaScript
253 lines
12 KiB
JavaScript
$('body').hide();
|
|
|
|
var CurrentMusicPlayerName = null
|
|
let VideoIndexInMusicPlayer = 0;
|
|
let CurrentVideoIndexInMusicPlayer = 0;
|
|
|
|
|
|
function GetElementByClassName(className) {
|
|
return $('.' + className)
|
|
}
|
|
|
|
function GetElementByIdentifier(identifier) {
|
|
return $('#' + identifier)
|
|
}
|
|
|
|
function GetElementByTagName(tagName) {
|
|
return $(tagName)
|
|
}
|
|
|
|
function SendClientEvent(action, data) {
|
|
$.post('https://ngd-dj/'+action, JSON.stringify(data));
|
|
}
|
|
|
|
// User Interraction
|
|
|
|
$('#AddYoutubeVideo').click(function () {
|
|
GetElementByClassName('YoutubeVideoAdder').css('display','flex');
|
|
})
|
|
|
|
$('#CancelYoutubeVideo').click(function () {
|
|
GetElementByClassName('YoutubeVideoAdder').css('display','none');
|
|
})
|
|
|
|
$('#SubmitYoutubeVideo').click(function () {
|
|
var url = $('.YoutubeVideo').val();
|
|
GetElementByClassName('YoutubeVideo').val('');
|
|
GetElementByClassName('YoutubeVideoAdder').css('display','none');
|
|
if (IsValidYouTubeUrl(url)) {
|
|
var video_id = GetYoutubeVideoId(url);
|
|
SendClientEvent('NewVideo', { name : CurrentMusicPlayerName, video_id : video_id})
|
|
UpdatePlayList({id : video_id, playing : false});
|
|
}
|
|
})
|
|
|
|
$('input[type=range]').on('input', function () {
|
|
SendClientEvent('ChangeVolume', { name : CurrentMusicPlayerName, volume : $(this).val() / 100})
|
|
});
|
|
|
|
$('#close').click(function () {
|
|
Close();
|
|
})
|
|
|
|
// Events
|
|
|
|
window.addEventListener('message', function (event) {
|
|
let e = event.data;
|
|
switch (e.action) {
|
|
case "ShowMusicPlayer":
|
|
ShowMusicPlayer(e.data);
|
|
break;
|
|
default: break;
|
|
}
|
|
});
|
|
|
|
$(function () {
|
|
$(document).keyup(function (e) {
|
|
let keyCode = e.keyCode || e.which;
|
|
if (keyCode == 27) {
|
|
Close();
|
|
}
|
|
});
|
|
});
|
|
|
|
function Close() {
|
|
SendClientEvent('close', {})
|
|
GetElementByClassName('video_boxes').html('');
|
|
GetElementByClassName('Title').html('');
|
|
VideoIndexInMusicPlayer = 0;
|
|
CurrentVideoIndexInMusicPlayer = 0;
|
|
ResetAllStyles();
|
|
GetElementByTagName('body').hide();
|
|
}
|
|
|
|
// Functions
|
|
|
|
function ShowMusicPlayer(data) {
|
|
CurrentMusicPlayerName = data.name;
|
|
GetElementByClassName('Title').html(data.musicPlayerData.title);
|
|
CreatePlaylist(data);
|
|
GetElementByTagName('body').show();
|
|
}
|
|
|
|
function CreatePlaylist(data) {
|
|
for (const video of data.musicPlayerData.playlist) {
|
|
UpdatePlayList(video);
|
|
}
|
|
}
|
|
|
|
function PlayYoutubeVideo(video_id, video_index) {
|
|
SendClientEvent('PlayVideo', {name : CurrentMusicPlayerName, video_id : video_id, previous_video_index : parseInt(CurrentVideoIndexInMusicPlayer), current_video_index : parseInt(video_index)})
|
|
UpdateCover(video_id);
|
|
UpdatePlayListActions(video_index);
|
|
}
|
|
|
|
function ReplayYoutubeVideo(video_id, video_index) {
|
|
SendClientEvent('ReplayVideo', {name : CurrentMusicPlayerName, video_id : video_id, current_video_index : parseInt(video_index)})
|
|
GetElementByIdentifier('video_'+video_index+' .play').css('display','none');
|
|
GetElementByIdentifier('video_'+video_index+' .pause').css('display','block');
|
|
GetElementByIdentifier('video_'+video_index+' .replay').css('display','block');
|
|
GetElementByIdentifier('video_'+video_index+' .equalizer').css('display','block');
|
|
}
|
|
|
|
function PauseYoutubeVideo(video_index) {
|
|
GetElementByIdentifier('video_'+video_index+' .play').css('display','block');
|
|
GetElementByIdentifier('video_'+video_index+' .pause').css('display','none');
|
|
SendClientEvent('PauseVideo', {name : CurrentMusicPlayerName, current_video_index : parseInt(video_index)})
|
|
}
|
|
|
|
function UpdateCover(video_id) {
|
|
GetElementByClassName('current').css('background',`url('https://img.youtube.com//vi/${video_id}/0.jpg') center center`);
|
|
GetElementByClassName('current').css('background-size',`contain`);
|
|
GetElementByClassName('current').css('background-repeat',`no-repeat`);
|
|
}
|
|
|
|
function RemoveYoutubeVideo(video_id, video_index) {
|
|
GetElementByIdentifier('video_'+video_index).css('display','none');
|
|
SendClientEvent('RemoveVideo', {name : CurrentMusicPlayerName, video_index : parseInt(video_index)})
|
|
if(video_index == CurrentVideoIndexInMusicPlayer) {
|
|
ResetCover()
|
|
}
|
|
}
|
|
|
|
function UpdatePlayListActions(video_index) {
|
|
if (CurrentVideoIndexInMusicPlayer == 0 ) {
|
|
CurrentVideoIndexInMusicPlayer = video_index;
|
|
GetElementByIdentifier('video_'+video_index+' .play').css('display','none');
|
|
GetElementByIdentifier('video_'+video_index+' .pause').css('display','block');
|
|
GetElementByIdentifier('video_'+video_index+' .replay').css('display','block');
|
|
GetElementByIdentifier('video_'+video_index+' .equalizer').css('display','block');
|
|
}
|
|
else if (CurrentVideoIndexInMusicPlayer != video_index) {
|
|
GetElementByIdentifier('video_'+CurrentVideoIndexInMusicPlayer+' .play').css('display','block');
|
|
GetElementByIdentifier('video_'+CurrentVideoIndexInMusicPlayer+' .pause').css('display','none');
|
|
GetElementByIdentifier('video_'+CurrentVideoIndexInMusicPlayer+' .replay').css('display','none');
|
|
GetElementByIdentifier('video_'+CurrentVideoIndexInMusicPlayer+' .equalizer').css('display','none');
|
|
GetElementByIdentifier('video_'+video_index+' .play').css('display','none');
|
|
GetElementByIdentifier('video_'+video_index+' .pause').css('display','block');
|
|
GetElementByIdentifier('video_'+video_index+' .replay').css('display','block');
|
|
GetElementByIdentifier('video_'+video_index+' .equalizer').css('display','block');
|
|
CurrentVideoIndexInMusicPlayer = video_index;
|
|
}
|
|
else{
|
|
GetElementByIdentifier('video_'+video_index+' .play').css('display','none');
|
|
GetElementByIdentifier('video_'+video_index+' .pause').css('display','block');
|
|
GetElementByIdentifier('video_'+video_index+' .replay').css('display','block');
|
|
GetElementByIdentifier('video_'+video_index+' .equalizer').css('display','block');
|
|
}
|
|
}
|
|
|
|
function ResetAllStyles() {
|
|
GetElementByClassName('current').removeAttr('style');
|
|
GetElementByClassName('play').removeAttr('style');
|
|
GetElementByClassName('pause').removeAttr('style');
|
|
GetElementByClassName('replay').removeAttr('style');
|
|
GetElementByClassName('equalizer').removeAttr('style');
|
|
}
|
|
|
|
function ResetCover() {
|
|
GetElementByClassName('current').removeAttr('style');
|
|
}
|
|
|
|
|
|
//██╗ ██╗████████╗███╗ ███╗██╗ ██████╗ ██╗ ██╗██╗██╗ ██████╗ ███████╗██████╗
|
|
//██║ ██║╚══██╔══╝████╗ ████║██║ ██╔══██╗██║ ██║██║██║ ██╔══██╗██╔════╝██╔══██╗
|
|
//███████║ ██║ ██╔████╔██║██║ ██████╔╝██║ ██║██║██║ ██║ ██║█████╗ ██████╔╝
|
|
//██╔══██║ ██║ ██║╚██╔╝██║██║ ██╔══██╗██║ ██║██║██║ ██║ ██║██╔══╝ ██╔══██╗
|
|
//██║ ██║ ██║ ██║ ╚═╝ ██║███████╗ ██████╔╝╚██████╔╝██║███████╗██████╔╝███████╗██║ ██║
|
|
//╚═╝ ╚═╝ ╚═╝ ╚═╝ ╚═╝╚══════╝ ╚═════╝ ╚═════╝ ╚═╝╚══════╝╚═════╝ ╚══════╝╚═╝ ╚═╝
|
|
|
|
|
|
function UpdatePlayList(video) {
|
|
VideoIndexInMusicPlayer = VideoIndexInMusicPlayer + 1;
|
|
var infos = GetVideoTitle(video.id);
|
|
$(".video_boxes").append(`<div class="video_box" id="video_${VideoIndexInMusicPlayer}">
|
|
<div class="video_info">
|
|
<div class="delete"><i class="material-icons" onClick="RemoveYoutubeVideo('${video.id}','${VideoIndexInMusicPlayer}')">playlist_remove</i></div>
|
|
<div class="img" style ="background: url(https://img.youtube.com//vi/${video.id}/0.jpg) center center;background-size: cover;"></div>
|
|
<div class="titles">
|
|
<h5>${infos[0].substring(0, 25)}</h5>
|
|
<p>${infos[1].substring(0, 25)}</p>
|
|
</div>
|
|
</div>
|
|
<div class="actions">
|
|
<div class="equalizer"><i class="material-icons" style ="color: #F44336;">equalizer</i></div>
|
|
<div class="play"><i class="material-icons" onClick="PlayYoutubeVideo('${video.id}','${VideoIndexInMusicPlayer}')">play_arrow</i></div>
|
|
<div class="pause"><i class="material-icons" onClick="PauseYoutubeVideo('${VideoIndexInMusicPlayer}')">pause</i></div>
|
|
<div class="replay"><i class="material-icons" onClick="ReplayYoutubeVideo('${video.id}','${VideoIndexInMusicPlayer}')">replay</i></div>
|
|
</div>
|
|
</div>`);
|
|
if (video.playing == true) {
|
|
CurrentVideoIndexInMusicPlayer = VideoIndexInMusicPlayer;
|
|
GetElementByIdentifier('video_'+VideoIndexInMusicPlayer+' .play').css('display', video.paused ? 'block' : 'none');
|
|
GetElementByIdentifier('video_'+VideoIndexInMusicPlayer+' .pause').css('display', video.paused ? 'none' : 'block');
|
|
GetElementByIdentifier('video_'+VideoIndexInMusicPlayer+' .replay').css('display','block');
|
|
GetElementByIdentifier('video_'+VideoIndexInMusicPlayer+' .equalizer').css('display','block');
|
|
UpdateCover(video.id);
|
|
}
|
|
if(video.removed == true) {
|
|
GetElementByIdentifier('video_'+VideoIndexInMusicPlayer).css('display','none');
|
|
}
|
|
}
|
|
|
|
|
|
//██╗ ██╗ ██████╗ ██╗ ██╗████████╗██╗ ██╗██████╗ ███████╗ ██╗ ██╗████████╗██╗██╗ ███████╗
|
|
//╚██╗ ██╔╝██╔═══██╗██║ ██║╚══██╔══╝██║ ██║██╔══██╗██╔════╝ ██║ ██║╚══██╔══╝██║██║ ██╔════╝
|
|
// ╚████╔╝ ██║ ██║██║ ██║ ██║ ██║ ██║██████╔╝█████╗ ██║ ██║ ██║ ██║██║ ███████╗
|
|
// ╚██╔╝ ██║ ██║██║ ██║ ██║ ██║ ██║██╔══██╗██╔══╝ ██║ ██║ ██║ ██║██║ ╚════██║
|
|
// ██║ ╚██████╔╝╚██████╔╝ ██║ ╚██████╔╝██████╔╝███████╗ ╚██████╔╝ ██║ ██║███████╗███████║
|
|
// ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═════╝ ╚═════╝ ╚══════╝ ╚═════╝ ╚═╝ ╚═╝╚══════╝╚══════╝
|
|
|
|
|
|
function IsValidYouTubeUrl(url) {
|
|
if (url != undefined || url != '') {
|
|
var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|\?v=)([^#\&\?]*).*/;
|
|
var match = url.match(regExp);
|
|
if (match && match[2].length == 11) {
|
|
return true
|
|
}
|
|
return false
|
|
}
|
|
}
|
|
|
|
function GetYoutubeVideoId(url) {
|
|
var video_id = url.split('v=')[1];
|
|
var ampersandPosition = video_id.indexOf('&');
|
|
if(ampersandPosition != -1) {
|
|
video_id = video_id.substring(0, ampersandPosition);
|
|
}
|
|
return video_id
|
|
}
|
|
|
|
function GetVideoTitle(video_id) {
|
|
const apiUrl = `https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${video_id}&format=json`;
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open('GET', apiUrl, false);
|
|
xhr.send();
|
|
if (xhr.status === 200) {
|
|
const data = JSON.parse(xhr.responseText);
|
|
return [data.title, data.author_name];
|
|
} else {
|
|
return "Unknown";
|
|
}
|
|
}
|