613 lines
21 KiB
JavaScript
613 lines
21 KiB
JavaScript
/* -----------------------------------------------------------------------------
|
|
global functions
|
|
------------------------------------------------------------------------------*/
|
|
|
|
// modal function:
|
|
// display an overlay window for warings, clip previews, etc.
|
|
function modal(btOK, btCan, video, title, content, x, y) {
|
|
if (video) {
|
|
text = '<video id="preview_player" class="video-js" controls preload="auto" autoplay="true" data-setup={}> <source src="' + content + '" type="video/mp4" /> </video>';
|
|
} else {
|
|
text = content;
|
|
}
|
|
|
|
var modalStr = '<p>' + text + '</p>';
|
|
|
|
$('#dialog-confirm').html(modalStr);
|
|
|
|
$("#dialog-confirm").dialog({
|
|
title: title,
|
|
resizable: false,
|
|
height: y,
|
|
width: x,
|
|
modal: true,
|
|
buttons: [{
|
|
id: "button-ok",
|
|
text: "Ok",
|
|
|
|
click: function() {
|
|
$('#preview_player').remove()
|
|
$(this).dialog("close");
|
|
}
|
|
},
|
|
{
|
|
id: "button-cancel",
|
|
text: "Cancel",
|
|
|
|
click: function() {
|
|
$(this).dialog("close");
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
if (!btOK) {
|
|
$("#button-ok").remove();
|
|
}
|
|
if (!btCan) {
|
|
$("#button-cancel").remove();
|
|
}
|
|
}
|
|
|
|
//get date
|
|
function get_date(hour, seek_day) {
|
|
var raw_date = moment();
|
|
if (raw_date.format("H") < parseInt(hour) && seek_day) {
|
|
return raw_date.add(-1, 'days');
|
|
} else {
|
|
return raw_date;
|
|
}
|
|
}
|
|
|
|
// calendar settings
|
|
$('.calender').pignoseCalendar({
|
|
lang: 'de',
|
|
theme: 'dark',
|
|
date: moment(),
|
|
format: 'YYYY-MM-DD',
|
|
week: 0,
|
|
init: function() {
|
|
$(this).find('.pignose-calendar-unit-active').children().addClass('calender-bold');
|
|
},
|
|
select: function(date) {
|
|
$.get("resources/list_op.php?list_start=get", function(result) {
|
|
var list_date = get_date(result, true);
|
|
|
|
if (date[0].format('YYYY-MM-DD') === list_date.format('YYYY-MM-DD')) {
|
|
$('#playlistBody').attr('listday', list_date.format('YYYY-MM-DD'));
|
|
get_xml(list_date.format('YYYY-MM-DD'), true);
|
|
} else {
|
|
$('#playlistBody').attr('listday', date[0].format('YYYY-MM-DD'));
|
|
get_xml(date[0].format('YYYY-MM-DD'), true);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// make directory listen resizeble
|
|
$('#mainNav').resizable({
|
|
handles: 'e, w'
|
|
});
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
directory listen functions
|
|
------------------------------------------------------------------------------*/
|
|
|
|
// initalize file browser click functions
|
|
// this is nessesary because the folder list gets generated from php
|
|
// and javascript don't know them before the init time
|
|
function init_browse_click() {
|
|
// folder navigation
|
|
// all clickable links (folders and files) has the clearfix class
|
|
$('.clearfix').click(function(e) {
|
|
var current_data = $(this).attr("href");
|
|
browse(current_data);
|
|
|
|
// level_up navigate to the parent directory
|
|
if ($(this).find("i").hasClass('fa-level-up')) {
|
|
var level_up = current_data.split("?").pop();
|
|
if (!level_up.match("http")) {
|
|
browse('?' + level_up);
|
|
}
|
|
}
|
|
e.preventDefault();
|
|
});
|
|
|
|
// header navigation
|
|
$('.breadcumb').click(function(e) {
|
|
var current_data = $(this).attr("href");
|
|
var change_level = current_data.split("?").pop();
|
|
|
|
browse('?' + change_level);
|
|
e.preventDefault();
|
|
});
|
|
|
|
// video preview
|
|
// when click on file link, open the modal windows and preview the clip
|
|
$('.file-info-button').click(function(e) {
|
|
var current_element = $(this);
|
|
var rawpath = current_element.closest('li').attr('data-href').replace(/^\?dir=/g, current_element);
|
|
|
|
modal(true, null, true, decodeURIComponent(rawpath.split("/").pop()), rawpath, 1039, 716);
|
|
|
|
e.preventDefault();
|
|
});
|
|
}
|
|
|
|
// call php script to navigatge to the selected folder on the server
|
|
function browse(current_data) {
|
|
$.get("functions.php" + current_data + "&head=get", function(data) {
|
|
$('#browserHead').html(data);
|
|
});
|
|
|
|
$.get("functions.php" + current_data + "&ul=get", function(data) {
|
|
$('#rootDirectory').html(data);
|
|
init_browse_click();
|
|
});
|
|
}
|
|
|
|
// first page load will open the media directory
|
|
window.onload = function() {
|
|
$.get("resources/list_op.php?clips_root=get", function(result) {
|
|
browse("?dir=" + result);
|
|
});
|
|
|
|
$.get("resources/list_op.php?list_start=get", function(result) {
|
|
var list_date = get_date(result, true);
|
|
// write playlist date to list attribute, for later use
|
|
$('#playlistBody').attr('listday', list_date.format("YYYY-MM-DD"));
|
|
// read playlist from current day
|
|
get_xml(list_date.format("YYYY-MM-DD"), true);
|
|
});
|
|
}
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
playlist functions
|
|
------------------------------------------------------------------------------*/
|
|
|
|
// initalize buttons and input dialogs,
|
|
// after the playlist has loaded
|
|
function init_list_op() {
|
|
// video preview
|
|
$('.file-play').click(function(e) {
|
|
var file_path = $(this).attr('data-href');
|
|
var play_URL = encodeURIComponent(file_path);
|
|
|
|
modal(true, null, true, decodeURIComponent(file_path.split("/").pop()), play_URL, 1039, 716);
|
|
|
|
e.preventDefault();
|
|
});
|
|
|
|
var enableButton = function(){
|
|
$('.row-del').removeClass('disabled');
|
|
}
|
|
|
|
// delete clip from playlist
|
|
$('.row-del').click(function() {
|
|
if (!$(this).hasClass('disabled')) {
|
|
$(this).parent().parent().remove();
|
|
reorder_playlist();
|
|
$('.row-del').addClass('disabled');
|
|
// limit click rate
|
|
setTimeout(enableButton, 1000);
|
|
return true;
|
|
} else {
|
|
modal(true, null, null, "Delete Item", "Removing items is limited to every second.", 'auto', 'auto');
|
|
}
|
|
});
|
|
|
|
// input field for seek in clip
|
|
$('.input-in').change(function(){
|
|
var in_seconds = moment.duration($(this).val()).asSeconds();
|
|
var in_duration = $(this).closest('ul').parent().attr('dur');
|
|
if (in_seconds > in_duration) {
|
|
modal(true, null, null, "Seek in Video", "Seek Value is bigger then Duration!<br/>Please fix that...", 'auto', 'auto');
|
|
$(this).val("00:00:00");
|
|
} else {
|
|
$(this).closest('ul').parent().attr('in', in_seconds);
|
|
reorder_playlist();
|
|
}
|
|
});
|
|
|
|
// input field for cut out clip at specific time
|
|
$('.input-out').change(function(){
|
|
var cur_val = $(this).val();
|
|
var out_seconds = moment.duration($(this).val()).asSeconds();
|
|
var out_dur = $(this).closest('ul').parent().attr('dur');
|
|
if (out_seconds > out_dur) {
|
|
modal(true, null, null, "Cut Video", "Cut Value is bigger then Duration!<br/>Please fix that...", 'auto', 'auto');
|
|
$(this).val(cur_val);
|
|
} else {
|
|
$(this).closest('ul').parent().attr('out', out_seconds);
|
|
reorder_playlist();
|
|
}
|
|
});
|
|
|
|
// reset button
|
|
$('#bt_reset').click(function() {
|
|
// scroll to playlist top
|
|
get_xml($('#playlistBody').attr('listday'), false);
|
|
});
|
|
}
|
|
|
|
// read formated playlist from php function
|
|
function get_xml(date, jump) {
|
|
$.get("resources/list_op.php?xml_path=" + date, function(result) {
|
|
$('#playlistBody').html(result);
|
|
init_list_op();
|
|
if (jump) {
|
|
jump_and_colorize_title(true);
|
|
} else {
|
|
jump_and_colorize_title(false);
|
|
}
|
|
});
|
|
}
|
|
|
|
// when new clips are dragged,
|
|
// or clips are moved, or deleted, calculate the starting time new
|
|
// it also take care of the in and out time
|
|
function reorder_playlist() {
|
|
// get start time from: /etc/ffplayout/ffplayout.conf
|
|
$.get("resources/list_op.php?list_start=get", function(result) {
|
|
var reorder = document.getElementById("playlistBody").getElementsByClassName("list-item");
|
|
var start_time = parseFloat(result * 3600);
|
|
var time_format, cur_in, cur_out;
|
|
|
|
for (var i = 0; i < reorder.length; i++) {
|
|
time_format = moment.utc(start_time * 1000).format('HH:mm:ss');
|
|
cur_in = parseFloat($(reorder[i]).attr('in'));
|
|
cur_out = parseFloat($(reorder[i]).attr('out'));
|
|
$(reorder[i]).attr('begin', start_time);
|
|
$(reorder[i]).removeClass('current_item next_item last_items');
|
|
$(reorder[i]).find('.row-start').html(time_format);
|
|
start_time += cur_out - cur_in;
|
|
}
|
|
|
|
init_list_op();
|
|
jump_and_colorize_title(false);
|
|
});
|
|
}
|
|
|
|
|
|
// jump to right time in playlist
|
|
// and colorize the list
|
|
function jump_and_colorize_title(jump) {
|
|
var moment_time = moment().format('HH:mm:ss');
|
|
var time_in_seconds = parseFloat(moment.duration(moment_time).asSeconds());
|
|
|
|
var play_items = document.getElementById("playlistBody").getElementsByClassName("list-item");
|
|
var play_begin, play_dur;
|
|
|
|
$.get("resources/list_op.php?list_start=get", function(result) {
|
|
list_date = get_date(result, true);
|
|
|
|
if (list_date.format("H") < parseInt(result)) {
|
|
time_in_seconds += 86400
|
|
}
|
|
|
|
if ($('#playlistBody').attr('listday') === list_date.format("YYYY-MM-DD")) {
|
|
for (var i = 0; i < play_items.length; i++) {
|
|
play_begin = parseFloat($(play_items[i]).attr('begin'));
|
|
play_dur = parseFloat($(play_items[i]).attr('dur'));
|
|
if (play_begin + play_dur >= time_in_seconds) {
|
|
// jump to position only after page load
|
|
if (jump) {
|
|
$('#list-container').animate({
|
|
scrollTop: $('#playlistBody li:nth-child(' + (i-1) + ')').position().top
|
|
}, 500, "easeOutQuint");
|
|
}
|
|
|
|
// colorize items
|
|
$(play_items[i]).addClass('current_item');
|
|
$(play_items[i+1]).addClass('next_item');
|
|
$('.list-item:gt('+(i+1)+')').addClass('last_items');
|
|
break;
|
|
}
|
|
}
|
|
} else {
|
|
// scroll to playlist top
|
|
if (jump) {
|
|
$('#list-container').animate({scrollTop: 0}, 500, "easeOutQuint");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
footer functions
|
|
------------------------------------------------------------------------------*/
|
|
|
|
function get_log(logtype) {
|
|
$.get("resources/logging.php?log_from=" + logtype, function(result) {
|
|
$('#output').html(result);
|
|
scroll_div = $('.log-content div');
|
|
|
|
scroll_div.animate({
|
|
scrollTop: scroll_div[0].scrollHeight - scroll_div[0].clientHeight
|
|
}, 500, "easeOutQuint");
|
|
});
|
|
}
|
|
|
|
// logging tabs
|
|
$('#bt_play').click(function() {
|
|
$(this).addClass("active");
|
|
$('#bt_sys').removeClass("active");
|
|
|
|
get_log("playing");
|
|
});
|
|
|
|
$('#bt_sys').click(function() {
|
|
$(this).addClass("active");
|
|
$('#bt_play').removeClass("active");
|
|
|
|
get_log("system");
|
|
});
|
|
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
header functions
|
|
------------------------------------------------------------------------------*/
|
|
var intervalId = null;
|
|
|
|
function get_track_list(interval) {
|
|
var begin, src, dur, seek, out, time_left;
|
|
|
|
$.get("resources/player.php?track=get", function(result) {
|
|
function get_track() {
|
|
var moment_time = moment().format('HH:mm:ss');
|
|
var time_in_seconds = parseFloat(moment.duration(moment_time).asSeconds());
|
|
var json = $.parseJSON(result);
|
|
var playlist_start = parseFloat(json[0]['start'][0]);
|
|
|
|
if (0.0 <= time_in_seconds && time_in_seconds < playlist_start * 3600.0) {
|
|
time_in_seconds += 86400.0;
|
|
}
|
|
|
|
$.each(json, function (index, value) {
|
|
begin = parseFloat(value['begin'][0]);
|
|
dur = parseFloat(value['dur'][0]);
|
|
seek = parseFloat(value['in'][0]);
|
|
out = parseFloat(value['out'][0]);
|
|
|
|
if (time_in_seconds < begin + out - seek ) {
|
|
time_left = begin + out - seek - time_in_seconds;
|
|
$('#countdown').html(moment.utc(time_left * 1000).format('HH:mm:ss'));
|
|
$('#title').html((value['src']));
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
if (interval) {
|
|
refreshIntervalId = setInterval(get_track, 1000);
|
|
} else {
|
|
clearInterval(refreshIntervalId);
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
function set_time() {
|
|
$('#clock').html(moment().format('H:mm:ss'));
|
|
}
|
|
|
|
// start stream
|
|
$('#bt_start').click(function() {
|
|
$.ajax({
|
|
url: "resources/player.php",
|
|
type: "POST",
|
|
data: "playout=start",
|
|
beforeSend: function() {
|
|
modal(false, null, null, "Start Playout", '<div style="text-align:center; min-width: 120px"><img src="resources/img/35.png" height="46" width="46"></div>', 'auto', 'auto');
|
|
},
|
|
success: function(result) {
|
|
modal(true, null, null, "Start Playout", '<div style="text-align:center;min-width: 120px">' + result + '</div>', 'auto', 'auto');
|
|
|
|
videojs('myStream').play();
|
|
get_track_list(true);
|
|
get_log("playing");
|
|
},
|
|
});
|
|
});
|
|
|
|
// stop stream
|
|
$('#bt_stop').click(function() {
|
|
$('#dialog-confirm').html("Are you really sure, you want to do this?");
|
|
$("#dialog-confirm").dialog({
|
|
title: "Stop Playout",
|
|
resizable: false,
|
|
height: 'auto',
|
|
width: 'auto',
|
|
modal: true,
|
|
buttons: [{
|
|
id: "button-ok",
|
|
text: "Ok",
|
|
|
|
click: function() {
|
|
$.ajax({
|
|
url: "resources/player.php",
|
|
type: "POST",
|
|
data: "playout=stop",
|
|
beforeSend: function() {
|
|
modal(false, null, null, "Stop Playout", '<div style="text-align:center; min-width: 120px"><img src="resources/img/35.png" height="46" width="46"></div>', 'auto', 'auto');
|
|
},
|
|
success: function(result) {
|
|
modal(true, null, null, "Stop Playout", '<div style="text-align:center;min-width: 120px">' + result + '</div>', 'auto', 'auto');
|
|
|
|
videojs('myStream').pause();
|
|
get_track_list(false);
|
|
},
|
|
});
|
|
}
|
|
},
|
|
{
|
|
id: "button-cancel",
|
|
text: "Cancel",
|
|
|
|
click: function() {
|
|
$(this).dialog("close");
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
/* -----------------------------------------------------------------------------
|
|
ready state
|
|
------------------------------------------------------------------------------*/
|
|
|
|
// when page is loaded, do something with the staff
|
|
$(document).ready(function() {
|
|
// init browser and playlist controlls
|
|
init_browse_click();
|
|
init_list_op();
|
|
get_log("playing");
|
|
|
|
// set player standards
|
|
videojs('myStream', {techOrder: ['flash', 'html5']});
|
|
videojs('myStream').volume(0.2);
|
|
|
|
setInterval(set_time, 1000);
|
|
get_track_list(true);
|
|
/*-------------------------------------------
|
|
sorting
|
|
--------------------------------------------*/
|
|
|
|
// sort: drag and drop function from directory listen to playlist
|
|
var el = document.getElementById('rootDirectory');
|
|
Sortable.create(el, {
|
|
animation: 200,
|
|
filter: ".folder",
|
|
group: {
|
|
name: "shared",
|
|
pull: "clone",
|
|
revertClone: true,
|
|
},
|
|
sort: false,
|
|
onStart: function(evt) {
|
|
$(evt.item).addClass('list-item').removeClass('file');
|
|
},
|
|
onEnd: function(evt) {
|
|
var itemEl = evt.item;
|
|
if ($(itemEl).parent().attr('class') === "list-group") {
|
|
var url = $(itemEl).find("a").attr("href");
|
|
var lis = document.getElementById("playlistBody").getElementsByClassName("list-item");
|
|
|
|
for (li of lis) {
|
|
if ($(li).attr('src') === "None") {
|
|
$(li).remove();
|
|
}
|
|
}
|
|
|
|
$.get("resources/list_op.php?li_path=" + "/" + url, function(result) {
|
|
$(itemEl).replaceWith(result);
|
|
reorder_playlist();
|
|
init_list_op();
|
|
});
|
|
} else {
|
|
$(evt.item).addClass('file').removeClass('list-item');
|
|
}
|
|
},
|
|
});
|
|
|
|
// drag and drop within the playlist
|
|
Sortable.create(playlistBody, {
|
|
group: "shared",
|
|
handle: ".handle",
|
|
ghostClass: 'ghost',
|
|
sort: true,
|
|
onEnd: function(evt) {
|
|
reorder_playlist();
|
|
}
|
|
});
|
|
|
|
// save button
|
|
$('#bt_save').click(function() {
|
|
var start_time = parseFloat($('.list-item').first().attr('begin'));
|
|
var last_start = parseFloat($('.list-item').last().attr('begin'));
|
|
var last_in = parseFloat($('.list-item').last().attr('in'));
|
|
var last_out = parseFloat($('.list-item').last().attr('out'));
|
|
var over_length = last_start - start_time + last_out - last_in - 86400;
|
|
|
|
if (over_length > 0) {
|
|
modal(true, null, null, "Save Playlist", "Playtime from Playlist is to long!<br/><b>Difference:</b> " + over_length, 'auto', 'auto');
|
|
} else if (over_length < -6) {
|
|
modal(true, null, null, "Save Playlist", "Playtime from Playlist is to short!<br/><b>Difference:</b> " + over_length, 'auto', 'auto');
|
|
} else {
|
|
var save_list = [];
|
|
$('#playlistBody li.list-item').each(function(){
|
|
save_list.push({
|
|
begin:$(this).attr('begin'),
|
|
src:$(this).attr('src'),
|
|
dur:$(this).attr('dur'),
|
|
in:$(this).attr('in'),
|
|
out:$(this).attr('out')
|
|
});
|
|
});
|
|
|
|
var json = encodeURIComponent(JSON.stringify(save_list));
|
|
var date = $('#playlistBody').attr('listday');
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "resources/list_op.php",
|
|
data: "date=" + date + "&save=" + json,
|
|
success: function(result) {
|
|
modal(true, null, null, "Save Playlist", result, 'auto', 'auto');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// fill end of playlist to get full 24 hours
|
|
$('#bt_filler').click(function() {
|
|
var start_time = parseFloat($('.list-item').first().attr('begin'));
|
|
var last_start = parseFloat($('.list-item').last().attr('begin'));
|
|
var last_in = parseFloat($('.list-item').last().attr('in'));
|
|
var last_out = parseFloat($('.list-item').last().attr('out'));
|
|
var missed_length = last_start - start_time + last_out - last_in - 86400;
|
|
|
|
if (missed_length > 0) {
|
|
modal(true, null, null, "Fill Playlist", "Playtime from Playlist is to long!<br/><b>Difference:</b> " + missed_length, 'auto', 'auto');
|
|
} else if (missed_length > -6) {
|
|
modal(true, null, null, "Fill Playlist", "Playtime from Playlist is in range!<br/><b>No change will made...</b>", 'auto', 'auto');
|
|
} else if (missed_length < -2700) {
|
|
modal(true, null, null, "Fill Playlist", "Missed length to fill is bigger then 45 minutes!<br/><b>Please add more clips...</b>", 'auto', 'auto');
|
|
} else {
|
|
date = $('#playlistBody').attr('listday');
|
|
var save_list = [];
|
|
$('#playlistBody li.list-item').each(function(){
|
|
save_list.push({
|
|
begin:$(this).attr('begin'),
|
|
src:$(this).attr('src'),
|
|
dur:$(this).attr('dur'),
|
|
in:$(this).attr('in'),
|
|
out:$(this).attr('out')
|
|
});
|
|
});
|
|
|
|
var json = encodeURIComponent(JSON.stringify(save_list));
|
|
var date = $('#playlistBody').attr('listday');
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "resources/list_op.php",
|
|
data: "fill_playlist=" + date + "&diff_len=" + Math.abs(missed_length) + "&start_time=" + (last_start + last_out - last_in ) + "&old_list=" + json,
|
|
beforeSend: function() {
|
|
modal(null, null, null, "Fill Playlist", "Filling Playlist in progress...", 'auto', 'auto');
|
|
},
|
|
success: function(result) {
|
|
// console.log(result);
|
|
$('#dialog-confirm').dialog("close");
|
|
modal(true, null, null, "Fill Playlist", result + "<br/><b>Filled Time:</b> " + moment.utc(Math.abs(missed_length) * 1000).format('HH:mm:ss'), 'auto', 'auto');
|
|
get_xml(date, false);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
});
|