shinsh/WebCG
1
0
Fork 0
Code Actions Packages Releases Activity
Files
main
WebCG/static/js/spx_gc.js
T
shinsh 5c01660f97 Init WebCG
2026-08-12 14:21:28 +09:00

2832 lines
107 KiB
JavaScript
Raw Permalink Blame History

// ***************************************
// Client javascript for SPX
// ***************************************
// (c) 2020-2024 SPX Graphics
// ***************************************
var socket = io();
// Global App State
let APPSTATE = "INIT"; // see AppState()
let sortable = ""; // a global sortable object so can be disabled at will, see spxinit()
let messageSliderOutTimer // a global var for message slider timeout
document.onkeydown = checkKey;
socket.on('connect', function () {
// Added in 1.1.0:
if (document.getElementById('logo') && document.getElementById('logo_off')) {
document.getElementById('logo').src=document.getElementById('logo_on').src;
document.body.style="pointer-events: auto;" // restore clickability
hideMessageSlider();
}
}); // end connect
socket.on('SPXMessage2Extension', function (data) {
// Handles messages coming from server to an extension.
// All SPX extensions must have 3 tags in their HTML:
//
// <script src="/js/socket.io.js"></script>
// <script>var socket = io();</script>
// <script src="/js/spx_gc.js"></script>
//
// Also if the extension JS code is a module the
// functions will need to be exposed to the window scope.
// This is done by adding the following line to the end
// of the module:
//
// window.functionName = functionName;
//
if (typeof window[data.function] === "function") {
// console.log('API invokeExtensionFunction called --> ' + data.function + '(' + data.params + ')');
window[data.function](data.params);
} else {
console.error('Function not found in extension [' + data.function + ']. Is it exposed?');
}
}); // end SPXMessage2Extension
socket.on('SPXMessage2Client', function (data) {
// Handles messages coming from server to this client.
// All comms using 'SPXMessage2Client' as a conduit with data object and
// data.spxcmd as function identifier. Additional object values are payload.
// console.log('SPXMessage2Client received', data)
switch (data.spxcmd) {
case 'notifyMultipleControllers':
let notification = document.getElementById('severalDetected');
if (notification) { // controller view
if (data.count && data.count>1) {
console.log(data.count + ' SPX Controllers detected by the server. Displaying notification.');
notification.style.display = 'flex';
} else {
notification.style.display = 'none';
}
}
break;
case 'updateServerIndicator':
e = document.getElementById(data.indicator);
if (e) {e.style.color = data.color;}
break;
case 'updateStatusText':
if (document.getElementById('statusbar')) {
document.getElementById('statusbar').innerText = data.status;
clearTimeout(localStorage.getItem('SPX_CT_StatusTimer'));
statusTimer = setTimeout(function () { document.getElementById('statusbar').innerText = ''; }, 3000);
localStorage.setItem('SPX_CT_StatusTimer', statusTimer);
} else {
console.log('statusbar (element) not found');
}
break;
case 'showMessageSlider':
// Shows a message in the message slider, an extension may initiate this.
showMessageSlider(data.msg, data.type, data.persist);
// clearTimeout(localStorage.getItem('SPX_CT_StatusTimer'));
// statusTimer = setTimeout(function () { document.getElementById('statusbar').innerText = ''; }, 3000);
// localStorage.setItem('SPX_CT_StatusTimer', statusTimer);
break;
case 'clientLostNotification':
switch (data.clientName) {
case 'SPX_PROGRAM':
if (document.getElementById('toggleRendererWindowProgram')) {
console.log('SPX_PROGRAM client lost, toggling off');
document.getElementById('toggleRendererWindowProgram').checked = false;
} else {
console.log('SPX_PROGRAM client lost, no toggle found');
}
toggleNormalRenderer('normal');
break;
case 'SPX_PREVIEW':
if ( document.getElementById('toggleRendererWindowPreview') ) {
console.log('SPX_PREVIEW client lost, toggling off');
document.getElementById('toggleRendererWindowPreview').checked = false;
} else {
console.log('SPX_PREVIEW client lost, no toggle found');
}
break;
default:
break;
}
break;
case 'updateRundownItem':
// This is a message to update a single item in the rundown.
// Used by API to update the UI after a playback command.
let item = getElementByEpoch(data.itemID);
if (item) {
let itemTemplate = item.querySelector('[name="RundownItem[relpath]"]').value;
if (data.relpath == itemTemplate) {
// console.log('Setting UI state of "' + data.itemID + '" forcefully to "' + data.command + '".');
playItem(item, data.command, true) // true = prevent playout, because API did it already
} else {
console.warn('Item template mismatch, not updating any indicators in the UI. Request', data);
}
} else {
console.warn('Requested item ' + data.itemID + ' not found. Not updating any indicators in the UI.');
}
break;
default:
// console.log('Unknown SPXMessage2Client command: ' + data.command);
}
}); // end SPXMessage2Client
socket.on('SPXMessage2Controller', function (data) {
// Handles (API) messages coming from server to the SPX-GC Controller.
// All comms using 'SPXMessage2Controller' as a conduit with data object and
// data.APIcmd as function identifier. Additional object values are payload.
// Feature added in v.1.0.8.
let el = null;
let DomItemID;
switch (data.APIcmd) {
// Rundown commands below
case 'RundownLoad':
window.location.href = '/gc/' + data.file
break;
case 'RundownFocusFirst':
focusRow(0)
break;
case 'RundownFocusNext':
moveFocus(1)
break;
case 'RundownFocusPrevious':
moveFocus(-1)
break;
case 'RundownFocusLast':
let lastIndex = document.querySelectorAll('.itemrow').length-1;
focusRow(lastIndex)
break;
case 'RundownFocusByID':
focusRow(getElementByEpoch(data.itemID))
break;
case 'RundownStopAll':
stopAll()
break;
case 'RundownAllStatesToStopped':
// console.log('Turn lights off and set DOM variables. Storage handled separately.')
let items = document.querySelectorAll('.itemrow');
items.forEach((item,index) => {
item.setAttribute('data-spx-onair', 'false');
item.querySelector('[data-spx-name="icon"]').classList.remove('playTrue');
item.querySelector('[data-spx-name="icon"]').classList.remove('playAuto');
item.querySelector('[data-spx-name="icon"]').classList.add('playFalse');
});
break;
// Item commands below
case 'ItemPlay':
playItem(getFocusedRow(),'play')
break;
case 'ItemPlayID':
el = getElementByEpoch(data.itemID);
if (el) {
// console.log('ItemPlayID: Element found', data.itemID, el);
playItem(el,'play')
} else {
console.warn('ItemPlayID: Element not found', data.itemID);
}
break;
case 'ItemContinue':
nextItem(getFocusedRow())
break;
case 'ItemContinueID':
el = getElementByEpoch(data.itemID);
if (el) {
nextItem(el)
} else {
console.warn('ItemContinueID: Element not found', data.itemID);
}
break;
case 'ItemStop':
playItem(getFocusedRow(),'stop')
break;
case 'ItemStopID':
el = getElementByEpoch(data.itemID);
if (el) {
playItem(el,'stop')
} else {
console.warn('ItemStopID: Element not found', data.itemID);
}
break;
// Utils
case 'showMessageSlider':
showMessageSlider(data.msg, data.type, data.persist)
break;
default:
console.log('Unknown SPXMessage2Controller command: ' + data.APIcmd, data);
}
}); // end SPXMessage2Controller
socket.on('disconnect', function () {
// Added in 1.1.0
if (document.getElementById('logo') && document.getElementById('logo_off')) {
document.getElementById('logo').src=document.getElementById('logo_off').src;
showMessageSlider('Disconnected from SPX server', type='error', true)
document.body.style="pointer-events: none;" // disable clickability
}
}); // end disconnect
// see also spxInit()
// ##########################################################################################################
function rundownPopup(mode) {
// get current url
let url = window.location.href;
url = url + '/light'
window.open(url);
}
function addSelectedTemplate(idx) {
// alert('Selected index ' + idx);
data={};
data.command = "addItemToRundown";
data.foldername = document.getElementById('foldername').value;
data.listname = document.getElementById('filebasename').value;
data.datafile = document.getElementById('datafile').value;
data.templateindex = idx;
post('', data, 'post');
} // addSelectedTemplate
function addAllTemplatesToRundown() {
// Added in 1.2.0
data={};
data.command = "addAllItemsToRundown";
data.foldername = document.getElementById('foldername').value;
data.listname = document.getElementById('filebasename').value;
data.datafile = document.getElementById('datafile').value;
post('', data, 'post');
} // addAllTemplatesToRundown
function ajaxpost(urlPath, data, prepopulated='false'){
// This is a utility function using Axios to POST
// stuff to server. Here we handle response and
// status bar etc...
//
// Prepopulated -flag prevents reading content
// from json files and submits values as-is;
// this is used by show- and global extras.
if (prepopulated=='true'){
// console.log('Prepop YES');
data.prepopulated="true"
}else{
// console.log('Prepop NO');
data.prepopulated="false"
};
axios.post(urlPath, data)
.then(function (response) {
statusbar(response.data);
working('');
})
.catch(function (error) {
working('');
if (error.response) {
// statusbar('SPX server returned error, see console and logs','error')
statusbar(error.response.data,'error')
showMessageSlider(error.response.data, 'error')
// msg, type='info', persist=false
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
statusbar('SPX server connection error','error')
console.log(error.request);
} else {
// Something happened in setting up the request that triggered an Error
statusbar('SPX request error, see console','warn')
console.log('Error', error.message);
}
console.log(error.config);
});
} // ajaxpost ended
function ajaxpostform(urlPath, FormNro){
} // ajaxpostform ended
function aFunctionTest() {
// execute a test function on the server
// this gets triggered by menu > ping
console.log('Sending testfunction request to server. See server console / log with PING -identifier...')
AJAXGET('/CCG/testfunction/');
} //aFunctionTest
// Filename validation for project/ruindown prompts
// Added in 1.3.0
var isValid=(function(){
var rg1=/^[^\\/:\*\?"<>\|]+$/; // forbidden characters \ / : * ? " < > |
var rg2=/^\./; // cannot start with dot (.)
var rg3=/^\_/; // cannot start with underscore (_)
var rg4=/^(nul|prn|con|lpt[0-9]|com[0-9])(\.|$)/i; // forbidden file names
return function isValid(str){
return rg1.test(str)&&!rg2.test(str)&&!rg3.test(str)&&!rg3.test(str);
}
})();
function add(ModalID) {
// require ..... nothing
// returns ..... posts a name of a file to server which redirects
// Improved in 1.3.0 with validation
ModalOn(ModalID)
document.getElementById('rundownName').focus();
document.getElementById('rundownForm').addEventListener('submit', function(e) {
e.preventDefault();
const rundownName = document.getElementById('rundownName').value.trim();
if (!isValid(rundownName)) {
alert("Please enter a valid rundown name, no special characters.");
return;
}
if (rundownName != null && rundownName != "") {
post('', { filebasename: rundownName }, 'post');
}
});
document.getElementById('cancelForm').addEventListener('click', function() {
ModalOff(ModalID);
})
} //add
function addshow(ModalID) {
// require ..... nothing
// returns ..... posts a name of a folder to server which redirects
// Improved in 1.3.0 with validation
ModalOn(ModalID);
document.getElementById('projectName').focus();
document.getElementById('projectForm').addEventListener('submit', function(e) {
e.preventDefault();
const projectName = document.getElementById('projectName').value.trim();
const projectFormat = document.querySelector('input[name="projectFormat"]:checked').value;
// const projectFormat = document.getElementById('projectFormat').value; IF YOU WANT TO USE DROPDOWN INSTEAD OF RADIO BUTTONS
if (!isValid(projectName)) {
alert("Please enter a valid folder name, no special characters.");
return;
}
if (projectName != null && projectName != "") {
post('', { foldername: projectName, format: projectFormat }, 'post');
}
});
document.getElementById('cancelForm').addEventListener('click', function() {
ModalOff(ModalID);
});
} // addshow
async function AJAXGET(URL) {
// Sends a GET request to server.
// Async keyword added in 1.0.15.
// require ..... URL (such as '/CCG/testfunction/' )
// returns ..... true/false based on HTTP status codes, such as
// 200 OK
// 409 Conflict
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
if (this.responseText) {
// console.log('AJAX completed succesfully: ' + this.responseText)
return true
}
}
if (this.readyState == 4 && this.status != 200) {
console.log('Ajax error, status: ' + this.status + ', state: ' + this.readyState);
return false
}
};
xmlhttp.open("GET", URL);
xmlhttp.send();
} // AJAXGET ended
function applyTextEditChanges(event, e) {
// end editing a TG field
setMasterButtonStates(e.closest('.itemrow'));
if (APPSTATE != "EDITING") {
return;
}
if (event.keyCode == 13 || event.which == 13) { // 13 = enter key
ToggleExpand();
}
} // applyTextEditChanges
function AppState(NewState) {
// **********************************************************************
//
// Options for global application state. This can be utilized
// by several function around the application. You can use APPSTATE
// statement in devtools to see the currently active state...
//
// Usage: AppState('DEFAULT');
//
// AppState('DEFAULT'); // ......... nothing special
// AppState('INIT'); // ......... initialization of the page
// AppState('EDITING'); // ......... editing a text field (allow spaces)
//
// console.log('Old state: ' + APPSTATE, 'New state: ' + NewState);
// disable sorting while editing:
if (NewState == 'EDITING') {
if ( ife('identifier').value=="controller" ) {
sortable.option("disabled", true);
}
} else {
if ( ife('identifier').value=="controller" ) {
sortable.option("disabled", false);
}
}
APPSTATE = NewState;
//
// **********************************************************************
} // AppState
function CancelOutTimerIfRunning(CURITEM){
// if item has a running timeout attribute, then stop and clear it
let TimerID = CURITEM.getAttribute('data-spx-timerid') || '';
if (TimerID){
CURITEM.setAttribute('data-spx-timerid','');
clearTimeout(TimerID);
CURITEM.querySelector('[data-spx-name="icon"]').classList.remove('playAuto');
// Improved in v1.3.1
let smallIcon = document.getElementById('deleteSmall' + CURITEM.getAttribute('data-spx-index'));
let largeIcon = document.getElementById('deleteLarge' + CURITEM.getAttribute('data-spx-index'));
if (smallIcon) { smallIcon.style.display="inline-block" }
if (largeIcon) { largeIcon.style.display="block" }
}
} // CancelOutTimerIfRunning
function cas() {
// Opens the selected (or current) file in controller.
// Function works both in Edit and Lists -views.
// require ..... nothing
// returns ..... reloads the browser to another URL
let filename = "";
let element = "";
let folder = document.getElementById("hidden_folder").value;
element = document.getElementById("lists");
if (typeof (element) != 'undefined' && element != null) {
filename = element.value;
}
element = document.getElementById("filebasename");
if (typeof (element) != 'undefined' && element != null) {
filename = element.value;
}
if (!filename) {return}
document.location = '/gc/' + folder + "/" + filename;
} // cas ended
function cfg() {
// Show settings
// Called from Settings button in episodes page.
let foldname = document.getElementById("hidden_folder").value;
document.location = '/show/' + foldname + "/config";
} // del ended
function checkAllConnections() {
// require ..... nothing
// returns ..... forces server to check for CCG connections and pushes updates to indicators via socket.io
function aFunctionTest() {
// execute a test function on the server
AJAXGET('/CCG/testfunction/');
}
} //checkAllConnections
function checkKey(e) {
// require ..... keyboard event
// returns ..... executes keyboard shortcuts, such as applies "Return" to a text field while editing.
// keybord shortcuts (see https://keycode.info/)
// TODO: Add your desired keyboard shortcut functions here.
e = e || window.event;
// console.log('--- ' + e.keyCode + ' --- ' + APPSTATE);
// FIRST GENERIC keycodes for all situations
switch (e.keyCode) {
case 116: // F5
updateItem();
e.preventDefault(); // do not refresh browser
return;
break;
case 112: // F1
if (document.getElementById('overlayHelp')){
ModalOn('overlayHelp'); // only valid in Controller view.
e.preventDefault(); // do not open built-in help
}
return;
break;
case 27: // esc
if (document.getElementById('filebasename')) {
// we are in controller
stopAll(); // STOP all layers used by current rundown
}
case 68: // d and D
if (e.ctrlKey && document.getElementById('filebasename')) {
// Ctrl+D and we are in controller
duplicateRundownItem();
e.preventDefault(); // do use add to bookmarks
}
return;
break;
}
// THEN APPSTATE dependent keycodes
switch (APPSTATE) {
// EDITING (while editor open)
case "EDITING":
// console.log('Captured keypress while editing');
switch (e.keyCode) {
case 13: // enter
if ( document.activeElement.nodeName === "TEXTAREA" && document.hasFocus()) {
// console.log('Come on, we are multilining here');
return;
}
saveTemplateItemChangesByElement(getFocusedRow());
e.preventDefault();
break;
default: // any other key
if (document.querySelector('.inFocus')) {
document.querySelector('.inFocus').setAttribute("data-spx-changed","true");
}
break;
}
return;
break;
case "INIT":
return;
break;
// OTHER MODES, (while editor closed)
default:
// console.log('Captured keypress while NOT editing');
switch (e.keyCode) {
case 13: // enter
ToggleExpand()
e.preventDefault();
break;
case 32: // space
if (e.shiftKey) {
// Shift + Space = PLAY/STOP
playItem();
} else {
let item = getFocusedRow();
// Space = PLAY/CONTINUE/STOP
// Bug fix added in 1.1.1. Dblcheck if we are opened...
if (
item.querySelector('#Expanded')?.style
.display != 'none'
) {
return;
}
// Added in v1.4.0 space works as PLAY/CONTINUE/STOP.
var stepsleft = parseInt(item?.getAttribute('data-spx-stepsleft'));
// Check if stepsleft isNan (not defined in templateDefinition) = PLAY/STOP, if == 1 (last step) = PLAY/STOP, if > 1 and not playing = PLAY
if
(isNaN(stepsleft)
|| stepsleft == 1
|| (stepsleft > 1 && item.getAttribute('data-spx-onair') != 'true')
|| (stepsleft == -1 && item.getAttribute('data-spx-onair') != 'true')
) {
playItem();
}
// Check if the item has steps, if so, continue to next step
else if (stepsleft > 1 || stepsleft == -1) {
nextItem();
}
}
e.preventDefault();
break;
case 38: // up
moveFocus(-1);
break;
case 40: // down
moveFocus(1);
break;
case 116: // F5
updateItem();
e.preventDefault(); // do not refresh browser
break;
case 20: // CapsLock
if (e.getModifierState("CapsLock")) {
showItemIDs(true);
} else {
showItemIDs(false);
}
break;
}
break;
}
// setTimeout(function(){
// setMasterButtonStates(document.querySelector('.inFocus').getAttribute('data-spx-index'),'from checkKey');
// }, 20);
return;
} //checkKey
function clearAttributes(attName, attValue) {
// This is called from TGbuttonAction when TG Play button is
// pressed. This clears all found attName/attValues which
// forces the play/stop panel to show up upon focus.
// require ..... attribute name ("data-name") and value ("jack") to search for clearing
// returns ..... removes green arrow from TG list DOM
let TGrows = document.querySelectorAll('.itemrow');
TGrows.forEach(function (item) {
if (item.getAttribute(attName) == attValue) {
item.setAttribute(attName, '');
item.querySelector("#dragIcon").innerHTML = "&#9776"; // drag icon
item.querySelector("#dragIcon").classList.remove("green");
}
})
} // clearAttributes ended
function copyItemID(itemID, api='') {
let currentHost = location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '');
let str = itemID;
let inf = 'itemID';
switch (api.toUpperCase()) {
case 'PLAY':
str = currentHost + '/api/v1/item/play/' + itemID;
inf = 'API play command'
break;
case 'STOP':
str = currentHost + '/api/v1/item/stop/' + itemID;
inf = 'API stop command'
break;
case 'CONTINUE':
str = currentHost + '/api/v1/item/continue/' + itemID;
inf = 'API continue command'
break;
default:
break;
}
copyText(str);
showMessageSlider('Copied ' + inf + ' to clipboard', 'happy');
showItemIDs(false)
} // copyItemID
// function toggleLRendererHandler(slider, targ) {
// let Cfgdata = {};
// Cfgdata.key = 'disableLocalRenderer'
// if (slider.checked) {
// document.getElementById(targ).innerText = 'YES';
// document.getElementById('previewIF').src = '/templates/empty.html';
// document.getElementById('LocalRendererDisabledNotification').style.opacity = 1;
// Cfgdata.val = true;
// } else {
// document.getElementById('previewIF').src = '/renderer';
// document.getElementById(targ).innerText = 'NO';
// document.getElementById('LocalRendererDisabledNotification').style.opacity = 0;
// Cfgdata.val = false;
// }
// ajaxpost('/gc/saveConfigChanges',Cfgdata);
// }
function toggleSwitchHandler(slider, targ, type) {
// When program/preview toggle buttons are clicked.
// console.log('toggleSwitchHandler', slider, targ);
let data = {}
data.type = type;
let handle = slider.querySelector('.vc-handle');
if (slider.checked) {
data.command = 'open';
document.getElementById(targ).innerText = 'ON';
} else {
data.command = 'close';
document.getElementById(targ).innerText = 'OFF';
}
handleRendererPopups(data)
} // toggleSwitchHandler
function toggleRundownSettings() {
// Toggle the rundown settings panel
let optionsZone = document.getElementById('rdOptionsCollapsible');
if (optionsZone.style.maxHeight){
optionsZone.style.maxHeight = null;
setTimeout(function(){optionsZone.style.display = 'none';}, 300);
} else {
optionsZone.style.display = 'block';
optionsZone.style.maxHeight = optionsZone.scrollHeight + "px";
}
} // toggleRundownSettings
function toggleTip(targetField, source, attr) {
document.getElementById(targetField).innerText = source.getAttribute(attr);
} // toggleTip
function toggleActive(ServerName='') {
// Will enable / disable commands to the server
// CCG/disable {server:'OVERLAY, disable:false}
let e = document.getElementById('server'+ ServerName);
let targetState = false;
if (e && e.classList.contains('disabledServer')) {
// Enable
e.classList.remove('disabledServer')
targetState = false
} else {
// Disable
e.classList.add('disabledServer')
targetState = true
}
let data = {};
data.server = ServerName;
data.disabled = targetState;
working('Changing server connection state to [' + targetState + ']...');
ajaxpost('/CCG/disable',data);
}
function clearUsedChannels(ServerName='') {
// Will call a command over API which will clear passed
// server or all by default.
let data = {};
data.server = ServerName;
data.foldername = document.getElementById('foldername').value;
data.datafile = document.getElementById('datafile').value;
working('Clearing ALL graphic channels used by program [' + data.foldername + ']...');
ajaxpost('/gc/clearPlayouts',data);
} //clearUsedChannels
function closePromo() {
// does just that and stores info to the localStorage so
// the same promo will not be show...
let e = document.getElementById('promo');
localStorage.setItem('SPX_ClosedPromo', e.getAttribute('data-promo-name'));
e.style.display = 'none';
}
function CollectJSONFromDOM() {
// iterate DOM and collect data to an array of objects
// This is called by SaveNewSortOrder().
// console.log('Collecting JSON');
let JSONdata = [];
let Items = document.querySelectorAll('.itemrow');
Items.forEach(function (item) {
var dataname = item.getElementsByTagName("input")[0].value;
var datatitl = item.getElementsByTagName("input")[1].value;
var Item = {};
Item.f0 = dataname;
Item.f1 = datatitl;
JSONdata.push(Item)
})
// console.log(JSONdata);
return JSONdata;
} // CollectJSONFromDOM ended
function continueUpdateStop(command, itemrow='') {
// request ..... command, itemrow (optional)
// returns ..... ajax response
// This is being called (at least) from custom-functions...
if (!itemrow) { itemrow = getFocusedRow(); }
switch (command) {
case 'stop':
// console.log('Stopping item', itemrow);
playItem(itemrow, 'stop');
break;
case 'continue':
console.log('------continue not implemented-----');
break;
case 'update':
console.log('------update not implemented-----');
break;
default:
console.log('Unknown command ['+ command +']');
break;
}
} // ContinueUpdateStop() ended
async function revealItemID(button) {
let item = button.closest('.itemrow')
let ID = item.getAttribute('data-spx-epoch');
copyText(ID)
// alert("Item ID " + ID + " was copied to clipboard.");
var newID = prompt("Item ID " + ID + " was copied to clipboard.\nYou can change the ID here:", ID);
if (newID != null && newID != ID) {
// alert("New ID " + newID)
let file = document.getElementById('datafile').value;
let URL = `/api/v1/changeItemID?rundownfile=${file}&ID=${ID}&newID=${newID}`
let IDchanged
axios.get(URL)
.then(function (response) {
showMessageSlider('Item renamed to ' + newID + '. Reload recommended.')
item.setAttribute('data-spx-epoch', newID);
item.querySelector('.copyid').setAttribute('onmouseover', `tip('Copy ID ${newID}')`);
})
.catch(function (error) {
showMessageSlider('Unable to rename. Use unique ID and try again.', 'error')
});
// if (IDchanged) {
// // success
// item.setAttribute('data-spx-epoch', newID);
// } else {
// alert("Unable to change ID to " + newID + " (" + IDchanged + ").\nMake sure the ID is unique and try again.");
// }
} else {
// alert("Same ID " + newID)
}
} // revealItemID
async function revealItemTiming(button) {
let curValue = button.textContent;
let ID = button.closest('.itemrow').getAttribute('data-spx-epoch');
var newValue = prompt("You can change timing here. Use 'manual', 'none' or millisecond values (1000=1s):", curValue);
if (newValue != null && newValue != curValue) {
let file = document.getElementById('datafile').value;
let URL = `/api/v1/changeItemData?rundownfile=${file}&ID=${ID}&key=out&newValue=${newValue}`
axios.get(URL)
.then(function (response) {
showMessageSlider('Item out mode changed to ' + newValue)
button.textContent = newValue;
button.closest('.itemrow').querySelectorAll('input[id^=out]')[0].value = newValue;
})
.catch(function (error) {
showMessageSlider('Unable to change value, please try again.', 'error')
});
}
} // revealItemTiming
async function revealItemLayer(button) {
let curValue = button.textContent;
let ID = button.closest('.itemrow').getAttribute('data-spx-epoch');
var newValue = prompt("You can change web playout layer here. Use any value between 1 and 5:", curValue);
if (newValue != null && newValue != curValue && !isNaN(newValue)) {
let wasOverLimit = newValue > 5;
newValue = Math.min(newValue, 5); // enforce max limit of 5
let file = document.getElementById('datafile').value;
let URL = `/api/v1/changeItemData?rundownfile=${file}&ID=${ID}&key=webplayout&newValue=${newValue}`
axios.get(URL)
.then(function (response) {
if (wasOverLimit) {
showMessageSlider('Item webplay layer must be 5 or less, changed to 5 ', "warn")
} else {
showMessageSlider('Item webplay layer changed to ' + newValue)
}
button.textContent = newValue;
button.closest('.itemrow').querySelectorAll('input[id^=webplayout]')[0].value = newValue;
// document.querySelectorAll('.itemrow')[0].querySelectorAll('input[id^=out]')[0];
})
.catch(function (error) {
showMessageSlider('Unable to change value, please try again.', 'error')
});
} else {
showMessageSlider('Unable to change value, please try again.', 'error')
}
} // revealItemLayer
function copyRendererUrl(preview=false) {
let page = '/renderer/';
if (preview) {
page = '/renderer?preview=true';
}
var RendererUrl = location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '') + page;
copyText(RendererUrl);
showMessageSlider('Copied URL to clipboard', 'happy');
} // copyRendererUrl ended
function copyText(txt) {
const temp = document.createElement('input');
document.body.appendChild(temp);
temp.value = txt;
temp.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
// console.log('Copy command was ' + msg);
} catch (err) {
// console.log('Oops, unable to copy');
}
temp.parentNode.removeChild(temp);
} // copyText ended
function heartbeat(dd, getOnly = false) { // 36 24 36 hey
// see notes TDT=00d86114 (/..es2/heartbeat)
let nw, st, key, val, dif;
let fD = '|';
let vD = ':';
let eK = 'TS'
let ls = 'SPXGC_UI_stats';
let or = localStorage.getItem(ls) || eK + vD + "0" + fD + dd + vD + "0";
if (getOnly) { return or; }
let ar = or.split(fD);
let ok = false;
let rp = false;
ar.every(function(f,idx) {
key = f.split(vD)[0]; val = f.split(vD)[1];
if (key==eK) {
dif = Math.round((Date.now()-val)/(1000*60*60*24));
if (Math.round((Date.now()-val)/(1000*60*60*24))>0) { rp = true; };
// ###################
// rp = true; // debug
// ###################
ar[idx]=eK + vD + Date.now();
}
if (key==dd) {
nw = parseInt(val)+1;
ar[idx]=key + vD + nw;
ok = true; return false
} else {
ok = false; return true
}
});
if ( !ok ) { ar.push(dd + vD + '1'); }
st = ar.join(fD);
if (rp) {
// FIXME:
// console.log('Submit ' + or)
getMessages2(or)
st = eK + vD + Date.now() + fD + dd + vD + 1;
} else {
// FIXME:
// console.log('Resume ' + st)
}
localStorage.setItem(ls, st)
} // dirty deeds done.
function del() {
// Episodes -view
// Delete a datafile from disk.
// Called from delete button in lists page.
var filename = document.getElementById('lists').value;
if (!filename) {return}
let foldname = document.getElementById("hidden_folder").value;
if (confirm('SURE?! Delete "' + filename + '" and all it\'s data?')) {
fetch('/show/' + foldname + "/" + filename, { method: 'DELETE' });
setTimeout(function(){ document.location = '/show/' + foldname; }, 500);
}
} // del ended
function delshow() {
// Shows -view
// Delete a folder from disk.
// Called from delete button in shows page.
// setTimeot - since we do it the AJAX style.
var foldername = document.getElementById('lists').value;
if (foldername==""){return};
if (confirm('SURE?! Delete "' + foldername + '" and all it\'s data?')) {
fetch('/shows/' + foldername, { method: 'DELETE' });
setTimeout(function(){ document.location = '/shows'; }, 500);
}
} // delshow ended
function delRow(e) {
// console.log('Would delete', e);
if (!e){return};
document.getElementById('itemList').removeChild(e);
// save data
SaveNewSortOrder();
} // delRow ended
function duplicateRundown() {
// Duplicate a rundown
data={};
let itemName = document.getElementById('lists').value;
if (!itemName) {return}
data.filename=itemName + '.json';
data.foldname=document.getElementById("hidden_folder").value;
ajaxpost('/gc/duplicateRundown',data);
setTimeout(function(){ document.location = '/show/' + data.foldname; }, 500);
} // duplicateRundown ended
function duplicateRundownItem(rowitem) {
if (!rowitem){
rowitem = getFocusedRow();
}
// Collect data for the server to duplicating the item
data={};
data.command = "duplicateRundownItem";
data.sourceEpoch = rowitem.getAttribute('data-spx-epoch');
data.cloneEpoch = String(Date.now()); // create epoch and give this to server also
data.foldername = document.getElementById('foldername').value;
data.listname = document.getElementById('filebasename').value;
data.datafile = document.getElementById('datafile').value;
var newItem = rowitem.cloneNode(true);
newItem.style.opacity=0;
// update table id's for sorting to keep up. A bug found right after 1.0.12 was released.
updateFormIndexes()
rowitem.after(newItem);
let list = [
newItem.setAttribute('data-spx-epoch', data.cloneEpoch),
newItem.setAttribute('data-spx-onair', "false"),
newItem.querySelector('.copyid').setAttribute('onmouseover', 'tip("Duplicated item ' + data.cloneEpoch + '")'),
newItem.querySelector('.utilityOverlay').innerHTML="Reload page to update this duplicated item.",
newItem.querySelector('[data-spx-name="icon"]').classList.add('playFalse'),
newItem.querySelector('[data-spx-name="playbutton"]').classList.add('bg_green'),
newItem.querySelector('[data-spx-name="icon"]').classList.remove('playTrue'),
newItem.querySelector('[data-spx-name="playbutton"]').classList.remove('bg_red'),
newItem.querySelector('[data-spx-name="playbutton"]').textContent = newItem.querySelector('[data-spx-name="playbutton"]').getAttribute('data-spx-playtext'),
rowitem.classList.remove('inFocus'),
newItem.classList.add('inFocus'),
newItem.style.opacity=1
]
applyCommands(list);
working('Sending ' + data.command + ' request.');
ajaxpost('',data);
function applyCommands(list) {
// delay commands utility
let totalDelay = 0;
let stepDelay = 10;
list.forEach((item,index) => {
totalDelay += stepDelay;
setTimeout(function () { (item) }, totalDelay);
});
}
} // duplicateRundownItem ended
function edi() {
// Edit a datafile on disk.
// Called from edit button in lists page.
var filename = document.getElementById('lists').value;
document.location = '/shows/' + filename;
} // edi ended
function openRelpathFolder(itemrow) {
// added in 1.1.1 - Open a file for editing.
let fileRef = itemrow.querySelector("[id^='relpath']").value;
AJAXGET('/api/openFileFolder?file=' + fileRef);
} // openRelpathFolder ended
function openLightModePanel() {
// Open a light mode panel (in Controller only)
let newUrl = window.location.href + '/light';
window.open(newUrl, 'SPX-LITE', '_blank, width=680, height=850, scrollbars=yes, location=yes,status=yes');
}
function eps() {
// Opens the selected (or current) file in controller.
// Function works both in Edit and Lists -views.
// require ..... nothing
// returns ..... reloads the browser to another URL
let foldername = "";
let element = "";
element = document.getElementById("lists");
if (typeof (element) != 'undefined' && element != null) {
foldername = element.value;
}
element = document.getElementById("filebasename");
if (typeof (element) != 'undefined' && element != null) {
foldername = element.value;
}
if (foldername==""){return};
document.location = '/show/' + foldername;
} // cas ended
function exportItemAsCSV(rowItem) {
// export an item as a CSV file, which then can be
// filled in and imported back, so it will auto-generate
// a bunch of graphics.
// Added in 1.0.15
let data = {};
data.foldername = document.getElementById('foldername').value;
data.datafile = document.getElementById('filebasename').value;
data.itemID = rowItem.getAttribute('data-spx-epoch');
working('Generating CSV file to ASSETS/csv -folder.');
ajaxpost('/api/exportCSVfile',data);
showMessageSlider('CSV file generated to ASSETS/csv -folder.')
AJAXGET('/api/openFileFolder?openFolderOnly=csv');
} // exportItemAsCSV ended
function ModalOn(modalID) {
// Added in 1.1.4 - reset selections
var allItems = document.getElementsByClassName("filebrowser_file") || [];
Array.prototype.forEach.call(allItems, function(el) {
el.classList.remove('selectedFile')
});
if (document.getElementById('allToggle')) {
document.getElementById('allToggle').innerText=document.getElementById('allToggle').getAttribute('data-all-label');
}
document.getElementById(modalID).style.display = "block";
} //FileBrowserOn
function ModalOff(modalID) {
document.getElementById(modalID).style.display = "none";
} //FileBrowserOff
function openImportDialog() {
ModalOff('overlayTemplatePicker')
ModalOn('filebrowserModal')
// console.log('Opening File browser dialog');
} // openImportDialog
function filterProjects() {
// Added in 1.1.0 - will hide/show items in the allProjects list
var input, filterPhrase, projList, li, itemValue, i, txtValue;
input = document.getElementById('projectFilter');
filterPhrase = input.value.toUpperCase();
projList = document.getElementById("allProjects");
optionItems = projList.getElementsByTagName('option');
lists.innerHTML=''; // clear
for (i = 0; i < optionItems.length; i++) {
txtValue = optionItems[i].innerText;
let filters = filterPhrase.split(" ")
filters = filters.filter(f => f.length)
let shouldDisplay = true
filters.forEach(filterItem => {
shouldDisplay = shouldDisplay && txtValue.toUpperCase().includes(filterItem)
})
if (shouldDisplay || filters.length === 0) {
var opt = document.createElement('option');
opt.innerHTML = txtValue;
lists.appendChild(opt);
}
}
} // filterProjects ended
function focusRow(rowitemOrIndex) {
// will make TG item focused and will set masterbutton states.
// console.log('Focusing', typeof rowitemOrIndex, rowitemOrIndex);
// clear focus from all rows first
document.querySelectorAll('.itemrow').forEach(function (item, i) {
if (item.classList.contains("inFocus")) {
item.classList.remove('inFocus');
} else {
item.setAttribute('data-spx-previewing', 'false'); // added in 1.1.1
}
})
var index = 0; // for master buttons
let TargetElement = '';
if (typeof rowitemOrIndex == "number") {
// console.log('rowitemOrIndex was a number');
TargetElement = document.querySelectorAll('.itemrow')[rowitemOrIndex];
index = rowitemOrIndex;
}
if (typeof rowitemOrIndex == "object") {
TargetElement = rowitemOrIndex;
index = getIndexOfRowItem(rowitemOrIndex);
}
if (TargetElement){
TargetElement.classList.add('inFocus');
TargetElement.scrollIntoView({
behavior: "auto",
block: "nearest",
});
// Added in 1.1.0:
if (document.getElementById('previewMode').value==='selected') {
if (TargetElement.getAttribute('data-spx-previewing')!='true') {
TargetElement.setAttribute('data-spx-previewing', 'true'); // added in 1.1.1 to avoid double previewing
previewItem(); // preview selected item
}
}
}
setMasterButtonStates(TargetElement, 'from focusRow');
} // focusRow ended
function getFocusedRow() {
// a utility to iterate DOM rows, returns focused element reference
return document.querySelectorAll('.inFocus')[0];
} // getFocusedRow ended
function getElementByEpoch(itemID) {
// get element by epoch id (added in 1.0.8)
let DomItemID;
for (let index = 0; index < document.querySelectorAll('.itemrow').length; index++) {
DomItemID = document.querySelectorAll('.itemrow')[index].getAttribute('data-spx-epoch');
if (DomItemID==itemID) {
return document.querySelectorAll('.itemrow')[index]
};
}
return false; // added in 1.2.0
} // getElementByEpoch ended
function getIndexOfRowItem(rowitem) {
// Utility, gets a row element and returns it's index
document.querySelectorAll('.itemrow').forEach(function (item, i) {
if (rowitem = item) {
return i;
}
})
} // getIndexOfRowItem ended
async function appendSpxApiKey (data) {
// Added in v1.3.2
// Adds API key to data object or a URL
// from localstorage or a URL parameter
// Get apikey from URL
queryString = window.location.search;
urlParams = new URLSearchParams(queryString);
addressKey = urlParams.get('apikey') || null;
// Get apikey from local storage
let storageKey = localStorage.getItem('spxApiKey') || null;
if (!addressKey && !storageKey) {
// No API key found, return original data
return data;
}
let apikey = storageKey; // default to storage key
if (addressKey) {
apikey = addressKey; // use address key if present
}
if (typeof data === 'object') {
// POST - so add API key to data
data.apikey = apikey;
return data; // return object with API key
} else {
// GET - so add API key to URL
let char = data.includes('?') ? '&' : '?';
data += char + 'apikey=' + apikey;
return data; // return URL with API key
}
} // appendSpxApiKey
function getDomIndexByElementId(ElementId) {
// A utility to iterate all DOM items and return dom index of given ElementId
// request = ElementID
// returns = dom index of the given ElementID
for (let DomNro = 0; DomNro < document.querySelectorAll('.itemrow').length; DomNro++) {
if (document.querySelectorAll('.itemrow')[DomNro].id=='playlistitem' + String(ElementId))
{
// console.log('Found DomIndex ' + DomNro + ' for ElementID ' + String(ElementId) + '.');
return DomNro
};
}
} // getDomIndexByElementId ended
function getLayerFromProfile(buttonName) {
// Make JSON from profiledata string from a hidden field and search it...
// console.log('Searching layer for ' + buttonName);
// This is a utility which is called bu Vue when checking button states.
let profiledata = JSON.parse(document.getElementById('profiledata').value);
let prfName = document.getElementById('profname').innerText.toUpperCase();
for (var i = 0; i < profiledata.profiles.length; i++) {
let curName = profiledata.profiles[i].name.toUpperCase();
if (curName == prfName) {
let SRV = profiledata.profiles[i].templates[buttonName].server;
let CHA = profiledata.profiles[i].templates[buttonName].channel;
let LAY = profiledata.profiles[i].templates[buttonName].layer;
let CCG = SRV + " " + CHA + " " + LAY;
// console.log("Render layer of [" + buttonName + "] in profile [" + prfName + "] is [" + CCG + "].");
return CCG;
}
}
} // getLayerFromProfile ended
function getMessages(curVerInfo) {
// Poll server for upgrade info. ------------------------------
// Requires CORS in the route.
// Moved from view-home.
//
// PLEASE NOTE: This will be replaced with improved mechanism
// which will report usage stats also and will
// notify user with a small icon to reveal the
// promo within controller UI.
// This will happen in 1.1.x.
//
// All passed data is anonymous and non-identifiable
// -------------------------------------------------------------
let versionStr = curVerInfo.split('v=')[1].split('&')[0].trim();
// console.log('---------- getMessages [' + versionStr + ']', curVerInfo);
localStorage.removeItem('SPX-GC-NewVersion');
document.getElementById('upgradeinfo').style.display="none";
document.getElementById('messageinfo').style.display="none";
var url = (`https://www.smartpx.fi/gc/messageservice/?` + curVerInfo );
fetch(url)
.then((res) => res.json())
.then((messages) => {
let currntVer = document.getElementById('footerVerDisplay').innerText;
let latestVer = messages.latest.vers;
let dbggreet = messages.dbggreet || "";
// this has been broken until 1.0.11
let debugNotifications = false;
if ( document.getElementById('greeting') && document.getElementById('greeting').innerText!='' ) {
if ( dbggreet == document.getElementById('greeting').innerText ) {
// if config.greeting == message.greeting then debug it!
debugNotifications = true;
}
}
if (messages.latest.vers && versInt(latestVer) > versInt(currntVer) || debugNotifications ) {
// Yes, there is new version available
localStorage.setItem('SPX-GC-NewVersion',latestVer);
document.getElementById('upgradeinfo').style.display="block";
document.getElementById('upgrade_date').innerText=messages.latest.date;
document.getElementById('upgrade_head').innerText=messages.latest.head;
document.getElementById('upgrade_body').innerText=messages.latest.body;
document.getElementById('upgrade_call').innerText=messages.latest.call;
document.getElementById('upgrade_link').href=messages.latest.href;
document.getElementById('upgrade_link').innerText=messages.latest.link;
}
if (messages.notification.type && messages.notification.type!="none" || debugNotifications ){
// Yes, there is something else to announce
document.getElementById('messageinfo').style.display="block";
document.getElementById('messageinfo').classList="message-" + messages.notification.type;
document.getElementById('messagelink').classList="message-" + messages.notification.type;
document.getElementById('message_date').innerText=messages.notification.date;
document.getElementById('message_head').innerText=messages.notification.head;
document.getElementById('message_body').innerText=messages.notification.body;
document.getElementById('message_call').innerText=messages.notification.call;
document.getElementById('message_link').href=messages.notification.href;
document.getElementById('message_link').innerText=messages.notification.link;
}
return // Check if there is a promo for this version
// Added in 1.1.2
// versionStr = "1.0.0"; // DEBUG## with specific version number
if (messages.homepagepromo[versionStr] ) {
// console.log('Promo available for v.' + versionStr, messages.homepagepromo[versionStr]);
document.getElementById('homepagepromolink').href=messages.homepagepromo[versionStr].link;
document.getElementById('homepagepromopict').src=messages.homepagepromo[versionStr].pict;
document.getElementById('homepagepromopict').title=messages.homepagepromo[versionStr].titl;
} else {
// Check if there is a default promo
if (messages.homepagepromo && messages.homepagepromo.default && messages.homepagepromo.default.active ){
// console.log('Using active default promo.', messages.homepagepromo.default);
document.getElementById('homepagepromolink').href=messages.homepagepromo.default.link;
document.getElementById('homepagepromopict').src=messages.homepagepromo.default.pict;
document.getElementById('homepagepromopict').title=messages.homepagepromo.default.titl;
}
}
})
.catch((error) => {
console.error('SPX error in getMessages().',error)
});
} // getMessages ended
function getMessages2(or) {
// This is called from heartbeat after a day change and will
// post anonymous usage data and may get potential notification
// data back to be displayed in the SPX user interface.
// This function is in early stage in v 1.1.0 and will be
// fully implemented in future versions.
ajaxpost('/api/heartbeat', {data:or});
} // getMessages2 ended
function handleRendererPopups(data) {
// open / close renderer popups
// data: {type:preview}
// Save to config.json general.renderer as "normal" (embedded inline renderer) or "popup" (floating window)
let URL;
let socketData = {};
var w = 1280;
var h = 720;
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var OPT = '_blank,toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left;
if (data.type==='preview') { URL = '/renderwindow/preview'; winRef = 'SPXpreviewWindow'}
if (data.type==='program') { URL = '/renderwindow/program'; winRef = 'SPXprogramWindow'}
if (data.command == 'open') {
// open the popup
window.open(URL, winRef, OPT);
}
if (data.command == 'close') {
// send message request to close the popup
// send message to close the window without prompts (closeprogram closepreview)
socketData.spxcmd = 'close' + data.type;
socket.emit('SPXWebRendererMessage', socketData);
}
if (data.type == 'program') {
toggleNormalRenderer(data.command)
}
} // handleRendererPopups ended
function help(section) {
// Help is massively a WORK-IN-PROGRESS thing!
// Wanna help? Let us know.
//
// Open help feature. This is a central location to
// handle help links. The 'section' argument is optional
// and can redirect to desired pages/bookmarks...
//
// request ..... section or <empty>
// returns ..... opens a tab with help content
let HELP_ROOT = "https://docs.spxgraphics.com/"
let HELP_PAGE = ""
section = section.toUpperCase()
switch (section) {
case 'INTRO':
HELP_PAGE = 'Welcome+to+SPX+Docs';
break;
case 'PROJECTS':
HELP_PAGE = 'Documentation/Server/Content+Management#Projects';
break;
case 'PLAYLISTS':
HELP_PAGE = 'Documentation/Server/Content+Management#Rundowns';
break;
case 'CONFIG':
HELP_PAGE = 'Documentation/Graphics+Controller/Application+Configuration';
break;
case 'WEBPLAYOUT':
HELP_PAGE = 'Documentation/Renderer/Overview';
break;
case 'CASPARCG':
HELP_PAGE = 'Documentation/Renderer/Workflows/CasparCG+-+AMCP';
break;
case 'GLOBALEXTRAS':
HELP_PAGE = 'Documentation/Graphics+Controller/Plugins+%26+Extensions#Global+Extras+vs+Plugins';
break;
case 'PROJECTGENERAL':
HELP_PAGE = 'Documentation/Graphics+Controller/Project+Settings#Template+Configuration';
break;
case 'PROJECTTEMPLATES':
HELP_PAGE = 'Documentation/Graphics+Controller/Project+Settings';
break;
case 'PROJECTVARIABLES':
HELP_PAGE = 'article/help-project-variables';
break;
case 'PROJECTEXTRAS':
HELP_PAGE = 'Documentation/Graphics+Controller/Project+Settings#Project+Extras+(showExtras)';
break;
case 'CONTROLLER':
HELP_PAGE = 'Documentation/Control+Interfaces/External+Control';
break;
case 'CSV':
HELP_PAGE = 'Guides/Tutorials/how+to+use+csv+files';
break;
case 'API':
HELP_PAGE = 'Documentation/Control+Interfaces/REST/Overview+of+SPX+API';
break;
case 'ITEM-DETAILS':
HELP_PAGE = 'Documentation/Graphics+Controller/Overview#Playout+details';
break;
case 'SEVERAL':
HELP_PAGE = 'Documentation/Graphics+Controller/Overview#Several+SPX+controllers';
break;
case 'LIGHTMODE':
HELP_PAGE = 'article/light-mode';
break;
case 'MOS':
HELP_PAGE = 'Documentation/Server/Integration/MOS';
break;
case 'OLDBROWSERDETECTED':
HELP_PAGE = 'article/old-browser-detected';
break;
case 'LICENSING':
HELP_PAGE = 'Documentation/Server/License';
break;
case 'CALLUPID':
HELP_PAGE = 'article/callupid';
break;
case 'THUMBNAILGENERATION':
HELP_PAGE = 'article/thumbnail-generation';
break;
case 'OGRAF':
HELP_PAGE = 'Documentation/Graphic+Templates/Formats/OGraf';
break;
default:
HELP_PAGE = 'Welcome+to+SPX+Docs/';
break;
}
let FULL_URL = HELP_ROOT + HELP_PAGE;
window.open(FULL_URL, 'GCHELP', '_blank,width=980,height=800,scrollbars=yes,location=yes,status=yes');
} // help ended
function moveFocus(nro) {
// Move highlighted row up/down with keyboard commands
// Request .... nro = negative (-1) or positive (1)
// Returns .... nothing, just set focus
let itemCount = document.querySelectorAll('.itemrow').length;
let curIndex=0;
for (let item = 0; item < itemCount; item++) {
if (document.querySelectorAll('.itemrow')[item].classList.contains('inFocus')) {
curIndex=item; }
}
if (nro > 0 ){
// positive, move downwards
newIndex=curIndex+1;
//if (newIndex>itemCount-1){newIndex=0}; // go back to top
if (newIndex>itemCount-1){newIndex=itemCount-1}; // stay at the bottom
focusRow(newIndex);
}
if (nro < 0 ){
// negative, move upwards
newIndex=curIndex-1;
//if (newIndex<0){newIndex=itemCount-1}; // go to end of list
if (newIndex<0){newIndex=0}; // stay at the top
focusRow(newIndex);
}
} // moveFocus ended
function nextItem(itemrow='') {
// Next / continue command.
if (!itemrow) {
// itemrow not given, get focused row
itemrow = getFocusedRow();
}
data = {};
data.datafile = document.getElementById('datafile').value;
data.epoch = itemrow.getAttribute('data-spx-epoch');
// decrease steps left
var stepsleft= parseInt(itemrow.getAttribute('data-spx-stepsleft'))-1;
itemrow.setAttribute('data-spx-stepsleft',stepsleft);
if (stepsleft < 1) {
// console.log('No more steps (' + stepsleft + ') left, stopping item.');
// This should go somewhere else - because of DRY.
// This duplicates some code from playItem
itemrow.setAttribute('data-spx-onair', false);
itemrow.setAttribute('data-spx-stepsleft',itemrow.querySelector('input[name="RundownItem[steps]"]').value); // reset counter
let uselessReturnValue = setItemButtonStates(itemrow, forcedCommand='stop');
document.getElementById('MasterCONTINUE').classList.add('disabled');
data.command = 'stop';
setMasterButtonStates(itemrow);
} else {
// console.log('Steps left: ' + stepsleft + ', continuing item...');
data.command = 'next';
}
working('Sending ' + data.command + ' request.');
ajaxpost('/gc/playout',data);
//### DEBUG
return;
// Check for function_onNext event (added in 1.1.4):
let onNextField = itemrow.querySelector('[name="RundownItem[function_onNext]"]');
// console.log('onNextField: ', data.command, onNextField);
if (onNextField && onNextField.value!="") {
// console.log('onNextField: ' + onNextField.value);
let onNextCommand = onNextField.value.split('|') || [];
// console.log('[' + String(new Date().toLocaleTimeString()) + '] ' + 'NEXT event: ' + onNextCommand);
let FunctionName = String(onNextCommand[0] || 'noFunctionName').trim();
let FunctionArgs = String(onNextCommand[1] || 'NoArgs').trim();
let ExecuteDelay = String(onNextCommand[2] || '100').trim();
let ConditFField = String(onNextCommand[3] || 'XXX').trim();
let conditionVal = null;
let eventCondtFF = itemrow.querySelector('[data-update=' + ConditFField + ']');
if (eventCondtFF) { conditionVal = eventCondtFF.value; }
setTimeout(function () {
// console.log('FunctionName:' + FunctionName);
window[FunctionName]([FunctionArgs, conditionVal, data.epoch]);
}, parseInt(ExecuteDelay));
heartbeat(314); // identifier
}
} // nextItem
function previewItem(itemrow='') {
// Added in 1.1.0
// console.log('Itemrow: ', itemrow);
if (!itemrow) { itemrow = getFocusedRow(); }
if (!itemrow) { /* console.log('No active rows, skip command.');*/ return;}
itemrow.setAttribute('data-spx-previewing', 'true'); // added in 1.1.1 to avoid double previewing. See also focusRow()
data = {};
data.datafile = document.getElementById('datafile').value;
data.epoch = itemrow.getAttribute('data-spx-epoch') || 0;
data.command = 'preview'; // added in 1.1.0
working('Sending ' + data.command + ' request.');
ajaxpost('/gc/playout',data);
heartbeat(308); // identifier
} // previewItem
function projectSettings() {
// Open project settings page from rundown list page
document.location.href += '/config' ;
} // projectSettings
function playItem(itemrow='', forcedCommand='', preventPlayout=false) {
// Play item toggle.
//
// request ..... itemrow
// forcedCommand is (for example) to stop item when continue steps are done
// returns ..... ajax response message to GUI
//
// Will send data object with an index and playlist filename
// and playout handler will parse required data and so on.
//
// FIXME: Bug found 2023-11-07 Step counter in DOM needs to be reset on Play
//
// v1.3.2 - added "preventPlayout" flag. This is used in the new "updateRundownItem" feature
// in directplayout API endpoint is present.
if (!itemrow) { itemrow = getFocusedRow(); }
if (!itemrow) { return; }
data = {};
data.datafile = document.getElementById('datafile').value;
data.epoch = itemrow.getAttribute('data-spx-epoch') || 0;
data.command = setItemButtonStates(itemrow, forcedCommand); // update buttons and return command (play/stop/playonce). ForcedCommand (stop) overrides.
setMasterButtonStates(itemrow, 'from playItem'); // update master button UI
if (preventPlayout) {
console.log('Prevent playout flag is set, skipping playout.');
} else {
working('Sending ' + data.command + ' request.');
ajaxpost('/gc/playout',data);
}
// Stats
if (data.command == 'play' || data.command=="playonce") { heartbeat(302) }
if (data.command == 'continue' ) { heartbeat(304) }
if (data.command == 'stop' ) { heartbeat(306) }
// playonce (for out type=none) command acts on the server, but the state will not be saved to JSON
let isPlay = false;
if (data.command=="play" || data.command=="playonce") {
isPlay = true;
// Added in 1.1.0 FIXME: This has some issues, previewing wrong items etc...
if (document.getElementById('previewMode').value==='next') {
console.log('Preview-next-on-play IS WIP and IS CURRENTY DISABLED');
// TODO: Enable this:
// let nextRundownItem = getFocusedRow().nextElementSibling;
// console.log('Next elementID ' + nextRundownItem.id, nextRundownItem);
// previewItem(nextRundownItem);
}
}
// Check for function_onPlay event (improved in 1.1.4):
let onPlayField = itemrow.querySelector('[name="RundownItem[function_onPlay]"]');
if (isPlay && onPlayField && onPlayField.value!="") {
// TODO: This needs more work! =============================
// Now this expects an array of 4 values, but function calls
// can have 0 or several arguments...
// ========================================================
// Changed in v1.1.4 (no other server changes, just "spx_gc.js")
// Examples of valid "function_onPlay/nStop" values:
//
// myCustomMethod | {'foo': 'bar'} | 500 | f1
// myCustomMethod | 'foo' | 500 | f1
//
// 1st: Function name (no parenthesis),
// 2nd: an optional JSON object or a string argument,
// 3rd: execution delay in ms.
// 4th: one of the f-fields (value can be used as a condition in the function)
let onPlayCommand = onPlayField.value.split('|') || [];
let FunctionName = String(onPlayCommand[0] || 'noFunctionName').trim();
let FunctionArgs = String(onPlayCommand[1] || 'NoArgs').trim();
let ExecuteDelay = String(onPlayCommand[2] || '100').trim();
let ConditFField = String(onPlayCommand[3] || 'XXX').trim();
let conditionVal = null;
let eventCondtFF = itemrow.querySelector('[data-update=' + ConditFField + ']');
// Improved in 1.3.0 - now supports also SELECT and CHECKBOX fields
if (eventCondtFF) {
switch (eventCondtFF.tagName) {
case 'SELECT':
conditionVal = eventCondtFF.options[eventCondtFF.selectedIndex].value;
break;
case 'INPUT':
if (eventCondtFF.type == 'checkbox') {
conditionVal = eventCondtFF.checked;
} else {
conditionVal = eventCondtFF.value;
}
break;
default:
conditionVal = eventCondtFF.value;
}
}
setTimeout(function () {
if (window[FunctionName]) {
window[FunctionName]([FunctionArgs, conditionVal, data.epoch]); // Added data.epoch in 1.1.4
} else {
showMessageSlider('Function "' + FunctionName + '" not found in current custom functions library file.', 'warn');
}
}, parseInt(ExecuteDelay));
heartbeat(310); // identifier
}
// Check for function_onStop event (improved in 1.1.4):
let onStopField = itemrow.querySelector('[name="RundownItem[function_onStop]"]');
if (data.command=="stop" && onStopField && onStopField.value!="") {
// Changed in v1.1.4 (no other server changes, just "spx_gc.js")
let onStopCommand = onStopField.value.split('|') || [];
// console.log('[' + String(new Date().toLocaleTimeString()) + '] ' + 'STOP event: ' + onStopCommand);
let FunctionName = String(onStopCommand[0] || 'noFunctionName').trim();
let FunctionArgs = String(onStopCommand[1] || 'NoArgs').trim();
let ExecuteDelay = String(onStopCommand[2] || '100').trim();
let ConditFField = String(onStopCommand[3] || 'XXX').trim();
let conditionVal = null;
let eventCondtFF = itemrow.querySelector('[data-update=' + ConditFField + ']');
if (eventCondtFF) { conditionVal = eventCondtFF.value; }
setTimeout(function () {
// console.log('FunctionName:' + FunctionName);
window[FunctionName]([FunctionArgs, conditionVal, data.epoch]);
}, parseInt(ExecuteDelay));
heartbeat(312); // identifier
}
// Remember, onNext is handled in nextItem();
// auto-out trigger UI update (FIXME: verify auto-out works over direct API commands?!)
let TimeoutAsString = itemrow.querySelector('[name="RundownItem[out]"]').value;
// console.log('TimeoutAsString: ', TimeoutAsString);
if (!isNaN(TimeoutAsString)) {
// value is numerical, so
// console.log('TimeoutAsString is a number, so it is a timeout value.');
if (data.command=="play" ) {
// Changed in 1.0.9, failed in 1.0.8.
// 1.0.12: Fixed looping issue found by Koen.
let TimeoutAsInt = parseInt(TimeoutAsString);
// console.log('Will stop playlistitem ' + itemrow.getAttribute('data-spx-epoch') + ' in ' + TimeoutAsInt + 'ms...');
var AutoOutTimerID = setTimeout(function () {
if (itemrow.getAttribute('data-spx-onair')==='true'){
playItem(itemrow, 'stop');
}
itemrow.querySelector('[data-spx-name="icon"]').classList.remove('playAuto');
}, TimeoutAsInt);
itemrow.setAttribute('data-spx-timerid', AutoOutTimerID);
itemrow.querySelector('[data-spx-name="icon"]').classList.add('playAuto');
} else {
CancelOutTimerIfRunning(itemrow);
}
}
} // playItem
function playItemLocal(itemID) {
// Just play an item to the local Controller preview
// console.log('Sending playItemLocal request (spx-gc) ' + itemID + ' in 5 secs...');
data = {};
data.datafile = document.getElementById('datafile').value;
data.epoch = itemID || 0;
data.command = 'autoPlayLocal';
ajaxpost('/gc/playout',data);
heartbeat(308)
} // playItemLocal
function renameRundown() {
// Rename an existing rundown
// Improved in 1.3.0 with validation
var filename = document.getElementById('lists').value;
if (!filename) {return}
var foldname = document.getElementById("hidden_folder").value;
while(true){
newname = prompt("Rename rundown to?", filename).trim();
if ( isValid(newname) ) {
break;
} else {
alert("Please enter a valid file name, no special characters.");
}
}
if (newname != null && newname != "") {
data={};
data.orgname = filename + '.json';
data.newname = newname;
data.foldnam = foldname;
ajaxpost('/gc/renameRundown',data);
setTimeout(function(){ document.location = '/show/' + foldname; }, 300);
}
} // renameRundown ended
function versInt(semver){
// Returns a numeric value representing "1.0.0" formatted semantic version string.
// This works as long as max value of each field is 99!
// Moved from view-home in 1.1.0
let parts = semver.split(".");
let MajorInt = parseInt(parts[0].trim())*100000
let MinorInt = parseInt(parts[1].trim())*1000
let PatchInt = parseInt(parts[2].trim())
let versInt = (MajorInt + MinorInt + PatchInt);
// console.log('Semver ' + semver + ' = versInt ' + versInt);
return versInt
}
function setItemButtonStates(itemrow, forcedCommand=''){
// Utility function which will toggle play indicators in
// collapsed AND expanded views based on calling element's
// current state.
// forcedCommand is used to forcefully stop an item, which steps has run
// out after continue is done...
// v.1.0.8 also forced 'play' is being used by API v1 to force
// play only, not just toggle..
//
// Requests ..... playlistitem's eleIndex nro
// Response ..... 'play' or 'stop' state after toggle
//
if ( itemrow.querySelector('[name="RundownItem[out]"]').value=="none" ) {
// console.log('NONE out type in this graphic. Do not set the buttons in any way and return with playonce.');
if (forcedCommand=='stop') {
return 'stop'; // Added in v 1.1.2 to prevent playing bumper at "Stop All"
}
return 'playonce';
}
let CommandToExecute = 'play' // default action
let EXPANDEDPLAY = itemrow.querySelector('[data-spx-name="playbutton"]');
let rows = document.querySelectorAll('.itemrow');
if (itemrow.getAttribute('data-spx-onair')=="true" || forcedCommand=='stop') {
// so, we are playing and needs to stop
CommandToExecute = 'stop';
// Reset current step counter. Added in 1.3.3
itemrow.setAttribute('data-spx-stepsleft',itemrow.querySelector('input[name="RundownItem[steps]"]').value);
}
if (itemrow.getAttribute('data-spx-onair')=="true" && forcedCommand=='play') {
// so, we are playing and needs to play (API buttons for example)
CommandToExecute = 'play';
}
if ( CommandToExecute == 'stop' ) {
// Convert button to PLAY button and execute stop command
// console.log('was playing. so send STOP and make button PLAY');
itemrow.setAttribute('data-spx-onair','false');
itemrow.querySelector('[name="RundownItem[onair]"]').value='false';
itemrow.querySelector('[data-spx-name="icon"]').classList.remove('playTrue');
itemrow.querySelector('[data-spx-name="icon"]').classList.remove('playAuto');
itemrow.querySelector('[data-spx-name="icon"]').classList.add('playFalse');
EXPANDEDPLAY.innerText = EXPANDEDPLAY.getAttribute('data-spx-playtext');
EXPANDEDPLAY.classList.remove('bg_red');
EXPANDEDPLAY.classList.add('bg_green');
}
if ( CommandToExecute == 'play' ) {
// Convert button to STOP button and execute play command
// first we need to dim all other elements which are playing on same output channel / layer
// console.log('was stopped. so send PLAY and make button STOP');
let PlayoutConfig = itemrow.querySelector('[name="RundownItem[webplayout]"').value;
rows.forEach(function (item, index) {
let CurrentConfig = item.querySelector('[name="RundownItem[webplayout]"')?.value||0;
if (item.getAttribute('data-spx-onair')=="true" && CurrentConfig==PlayoutConfig ) {
console.log('Dom item ' + index + ' is the same, so dim it');
item.setAttribute('data-spx-onair','false');
item.querySelector('[name="RundownItem[onair]"]').value='false';
item.querySelector('[data-spx-name="icon"]').classList.remove('playTrue');
item.querySelector('[data-spx-name="icon"]').classList.add('playFalse');
CancelOutTimerIfRunning(itemrow);
curExpandedPlay = item.querySelector('[data-spx-name="playbutton"]')
curExpandedPlay.innerText = curExpandedPlay.getAttribute('data-spx-playtext');
curExpandedPlay.classList.remove('bg_red');
curExpandedPlay.classList.add('bg_green');
}
})
EXPANDEDPLAY.innerText = EXPANDEDPLAY.getAttribute('data-spx-stoptext');
EXPANDEDPLAY.classList.remove('bg_green');
EXPANDEDPLAY.classList.add('bg_red');
itemrow.setAttribute('data-spx-onair','true');
itemrow.querySelector('[name="RundownItem[onair]"]').value='true';
itemrow.querySelector('[data-spx-name="icon"]').classList.remove('playFalse');
itemrow.querySelector('[data-spx-name="icon"]').classList.add('playTrue');
// // reset update buttons
// itemrow.setAttribute('data-spx-changed','false');
// itemrow.querySelector('[data-spx-name="updatebutton"]').classList.add('disabled');
}
if ( ife('identifier').value=="controller" ) {
// finally show or hide delete buttons on all items
rows.forEach(function (item, index) {
if (item.getAttribute('data-spx-onair')=="true" ) {
// console.log('Hide delete buttons of ' + item.id);
item.querySelector('[data-spx-name="deletesmall"]').style.visibility="hidden" || (console.log('a'));
item.querySelector('[data-spx-name="deletelarge"]').style.visibility="hidden" || (console.log('b'));
} else {
// console.log('Show delete buttons of ' + item.id);
item.querySelector('[data-spx-name="deletesmall"]').style.visibility="visible" || (console.log('c'));
item.querySelector('[data-spx-name="deletelarge"]').style.visibility="visible" || (console.log('d'));
}
})
}
return CommandToExecute
} // setItemButtonStates ended
function post(path, params, method) {
// Creates a hidden form in DOM, populates it and posts it to server.
// Feels dumb, but works, so what the heck.
// This is ONLY used when the POST command can yield a new page,
// for in-page AJAX calls ajaxpost() should be used.
const form = document.createElement('form');
form.method = method;
form.action = path;
for (const key in params) {
if (params.hasOwnProperty(key)) {
const hiddenField = document.createElement('input');
hiddenField.type = 'hidden';
hiddenField.name = key;
hiddenField.value = params[key];
form.appendChild(hiddenField);
}
}
document.body.appendChild(form);
form.submit();
} // post ended
function resizeInput() {
// changes headline1 width
this.style.width = (this.value.length + 1.2) + "ch";
} // resizeInput ended
async function revealItemID(button) {
let item = button.closest('.itemrow')
let ID = item.getAttribute('data-spx-epoch');
copyText(ID)
// alert("Item ID " + ID + " was copied to clipboard.");
var newID = prompt("Item ID " + ID + " was copied to clipboard.\nYou can change the ID here:", ID);
if (newID != null && newID != ID) {
// alert("New ID " + newID)
let file = document.getElementById('datafile').value;
let URL = `/api/v1/changeItemID?rundownfile=${file}&ID=${ID}&newID=${newID}`
let IDchanged
axios.get(URL)
.then(function (response) {
showMessageSlider('Item renamed to ' + newID + '. Reload recommended.')
item.setAttribute('data-spx-epoch', newID);
item.querySelector('.copyid').setAttribute('onmouseover', `tip('Copy ID ${newID}')`);
})
.catch(function (error) {
showMessageSlider('Unable to rename. Use unique ID and try again.', 'error')
});
// if (IDchanged) {
// // success
// item.setAttribute('data-spx-epoch', newID);
// } else {
// alert("Unable to change ID to " + newID + " (" + IDchanged + ").\nMake sure the ID is unique and try again.");
// }
} else {
// alert("Same ID " + newID)
}
} // revealItemID
async function revealItemTiming(button) {
let curValue = button.textContent;
let ID = button.closest('.itemrow').getAttribute('data-spx-epoch');
var newValue = prompt("You can change timing here. Use 'manual', 'none' or millisecond values (1000=1s):", curValue);
if (newValue != null && newValue != curValue) {
let file = document.getElementById('datafile').value;
let URL = `/api/v1/changeItemData?rundownfile=${file}&ID=${ID}&key=out&newValue=${newValue}`
axios.get(URL)
.then(function (response) {
showMessageSlider('Item out mode changed to ' + newValue)
button.textContent = newValue;
button.closest('.itemrow').querySelectorAll('input[id^=out]')[0].value = newValue;
})
.catch(function (error) {
showMessageSlider('Unable to change value, please try again.', 'error')
});
}
} // revealItemTiming
function removeItemFromRundown(itemrow)
{
// Collect data for server processing
data={};
data.command = "removeItemFromRundown";
data.foldername = document.getElementById('foldername').value;
data.listname = document.getElementById('filebasename').value;
data.datafile = document.getElementById('datafile').value;
data.epoch = itemrow.getAttribute('data-spx-epoch'); // an ARRAY INDEX, not itemId!
// Remove from DOM
itemrow.remove();
event.stopPropagation(); // prevent trying to set focus to a deleted item
// Update names for potential save at next sort
updateFormIndexes()
// send server command
working('Sending ' + data.command + ' request.');
ajaxpost('',data);
} // removeItemFromRundown ended
function updateFormIndexes() {
// This needs to run whenever items are sorted or removed.
// Sorting routine needs the IndexList for saving sorting to a file.
// When deleting, this is needed to re-assing form names.
// 1.0.13 refactored to use epochs and not item indexes.
// var forms = document.forms;
let IndexList = []
let items = document.querySelectorAll('.itemrow');
items.forEach((item,index) => {
IndexList.push(item.getAttribute('data-spx-epoch'));
item.querySelector('form').name = "templates[" + index + "]";
});
// console.log('New form list sort order before saving to file', IndexList);
return IndexList
} // updateFormIndexes ended
function rundownPopup(mode) {
// get current url
let url = window.location.href;
url = url + '/light'
window.open(url);
} // rundownPopup ended
function SaveNewSortOrder() {
// This will save the rundown opened in SPX, for instance when
// items dragged to new sorting order. Maybe other events also?
working('saving');
let data={};
data.newTemplateOrderArr = updateFormIndexes(); // refactored to fix delete + sort bug.
data.rundownfile = document.getElementById('datafile').value;
// console.log('SaveNewSortOrder', data);
ajaxpost('/gc/sortTemplates',data);
} // SaveNewSortOrder ended
function saveTemplateItemChanges(elementID) {
// This is a utility function using Axios to POST
// A FORM to server and we need to update GUI / DOM
// accordingly.
// Note: items might be sorted, so must check actual index
// of called button.
let FormNro = getDomIndexByElementId(elementID)
working('Saving data from ElementID [' + elementID + '] = domIndex [' + FormNro + '] to server...');
// console.log('%c Saving data from ElementID [' + elementID + '] = domIndex [' + FormNro + '] to server...', 'background: #F0F; color: #000');
let urlPath='/gc/saveItemChanges';
data={};
data.DataFields=[];
const form = document.getElementById('form' + elementID);
iterator = -1;
[...form.elements].forEach((input,index) => {
if (input.getAttribute('data-role')=="userEditable")
{
let updatedObj = {}
updatedObj.field = input.getAttribute('data-update');
updatedObj.value = input.value;
data.DataFields.push(updatedObj)
iterator += 1;
// console.log('Looking for ' + 'datapreview_' + FormNro + '_' + iterator);
if (document.getElementById('datapreview_' + elementID + '_' + iterator))
{
let temp1 = input.value.replace(/\n/g, ' '); // remove \n globally to support text areas
let temp2 = temp1.replace(/\r/g, ''); // remove \r globally to support text areas
document.getElementById('datapreview_' + elementID + '_' + iterator).innerText=temp2;
}
}
});
data.rundownfile = document.getElementById('datafile').value;
data.TemplateIdx = FormNro; // sort order on file and in dom should correspond directly
axios.post(urlPath,data,
{
// headers: { 'Content-Type': 'multipart/form-data' }
})
.then(function (response) {
statusbar(response.data);
working('');
ToggleExpand(elementID); // changed from domIndex to ElementID
})
.catch(function (error) {
working('');
if (error.response) {
statusbar(error.response.data,'error')
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
statusbar('SPX server connection error','error')
console.log(error.request);
} else {
statusbar('SPX request error, see console','warn')
console.log('Error', error.message);
}
console.log(error.config);
});
} // saveTemplateItemChanges
function saveTemplateItemChangesByElement(itemrow) {
working('Saving changed data to server...');
data={};
data.DataFields=[];
const form = itemrow.querySelectorAll('form')[0];
[...form.elements].forEach((input,index) => {
if (input.getAttribute('data-role')=="userEditable")
{
let updatedObj = {}
updatedObj.field = input.getAttribute('data-update');
updatedObj.value = input.value;
if (input.type === 'checkbox') {
if (input.checked) {
updatedObj.value = '1';
} else {
updatedObj.value = '0';
}
}
data.DataFields.push(updatedObj)
}
});
data.rundownfile = document.getElementById('datafile').value;
data.epoch = itemrow.getAttribute("data-spx-epoch");
axios.post('/gc/saveItemChanges',data, {})
.then(function (response) {
statusbar(response.data[0]);
// the 2nd item from response is the html snippet for the GUI (improved in 1.0.7)
itemrow.querySelector('.truncate').innerHTML = response.data[1];
working('');
ToggleExpand(itemrow);
})
.catch(function (error) {
working('');
if (error.response) {
statusbar(error.response.data,'error')
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
statusbar('SPX server connection error','error')
console.log(error.request);
} else {
statusbar('SPX request error, see console','warn')
console.log('Error', error.message);
}
console.log(error.config);
});
} // saveTemplateItemChanges
function showItemIDs(show=true) {
// Show item ID's in GUI
let rows = document.querySelectorAll('.itemrow');
rows.forEach((item,index) => {
if (show==true) {
item.querySelector('.utilityOverlay').classList.remove('hidden');
// document.getElementById('rundownInfoMessage').style='display:flex;';
} else if (show==false) {
item.querySelector('.utilityOverlay').classList.add('hidden');
// document.getElementById('rundownInfoMessage').style='display:none;';
} else {
item.querySelector('.utilityOverlay').classList.toggle('hidden');
}
});
} // showItemIDs ended
function setMasterButtonStates(itemrow, debugMessage='') {
// this triggers when row focuses or when Play or Stop pressed or item changed.
if (!document.getElementById('MasterTOGGLE')) return; // this page does not have buttons...
let TOGGLEBUTTON = document.getElementById('MasterTOGGLE');
let UPDATEBUTTON = document.getElementById('MasterUPDATE');
let CONTINBUTTON = document.getElementById('MasterCONTINUE');
if (document.querySelectorAll('.itemrow').length<1){
// no items on page, so disable buttons and bale out
if (TOGGLEBUTTON) {TOGGLEBUTTON.classList.add('disabled')};
if (UPDATEBUTTON) {UPDATEBUTTON.classList.add('disabled')};
if (CONTINBUTTON) {CONTINBUTTON.classList.add('disabled')};
return
}
// console.clear();
// console.log('States check: "' + typeof itemrow + '"', itemrow);
// console.log('CHECKING: setMasterButtonStates of item ' + itemrow.getAttribute('data-spx-epoch') + ' (' + debugMessage + ')');
// this gfx only has in-animation
if ( itemrow.querySelector('input[name="RundownItem[out]"]') && itemrow.querySelector('input[name="RundownItem[steps]"]').value=="none" ) {
// console.log('This items outmode = none, so not changing button states');
// maybe add a play and setTimeout to reset quickly...
return;
}
var stepsVal = itemrow.querySelector('input[name="RundownItem[steps]"]').value || 0;
var stepsleft= itemrow.getAttribute('data-spx-stepsleft');
var steps = parseInt(stepsVal);
var onAirState = String(itemrow.getAttribute('data-spx-onair') || false)
var changState = String(itemrow.getAttribute('data-spx-changed') || false)
onAirState = onAirState.toLowerCase();
changState = changState.toLowerCase();
var onair = (onAirState == 'true'); // make bool
var chngd = (changState == 'true'); // make bool
// console.log('Onair', onair, 'Changed', chngd, 'Steps', steps );
// CONTINUE
CONTINBUTTON.classList.add('disabled');
if (stepsleft > 1 && onair ) {
setTimeout(function () { CONTINBUTTON.classList.remove('disabled'); }, 3);
}
// PLAY - STOP TOGGLE
if (onair) {
// console.log('Focused item IS playing (so change it to STOP)');
TOGGLEBUTTON.classList.remove('disabled')
TOGGLEBUTTON.innerText = TOGGLEBUTTON.getAttribute('data-spx-stoptext');
TOGGLEBUTTON.classList.remove('bg_green');
TOGGLEBUTTON.classList.add('bg_red');
} else {
// console.log('Focused item NOT playing (so change it to PLAY)');
TOGGLEBUTTON.classList.remove('disabled')
TOGGLEBUTTON.innerText = TOGGLEBUTTON.getAttribute('data-spx-playtext');
TOGGLEBUTTON.classList.remove('bg_red');
TOGGLEBUTTON.classList.add('bg_green');
}
} // setTGButtonStates ended
function hideMessageSlider() {
if (!document.getElementById('messageSlider')) { return }
anime({
targets: '#messageSlider',
opacity: 0,
translateY: [0,-200],
translateX: '-50%',
duration: 300,
easing: 'easeInCubic'
});
} // hideMessageSlider
function showMessageSlider(msg, type='info', persist=false) {
// show a sliding message at the top of the page
// type: happy, info, warn, error
// persist: if true, do not auto-hide
// Example usage in templates (or extensions, remember to
// add dom element:)
/*
<div id="messageSlider" style="opacity:0;"></div>
*/
/*
top?.showMessageSlider?.('Hello graphics operator!', 'happy');
*/
let txt = msg;
let typ = type; // happy, info, warn, error (classes happyMsg, infoMsg, warnMsg, errorMsg...)
let domElement
if (document.getElementById('messageSlider')) {
domElement = document.getElementById('messageSlider');
} else {
console.warn('SPX message: ' + msg);
return;
}
switch (msg) {
case 'invalidCSV':
txt = 'Invalid CSV. See help: import and export'
typ = 'error'
}
domElement.innerHTML = txt;
domElement.classList = typ + 'Msg';
domElement.style.transform = 'translateX(-50%)'; // init pos
domElement.style.opacity = 0;
anime({
targets: '#messageSlider',
opacity: [0,1],
translateY: [-200,0],
translateX: '-50%',
delay: 100,
duration: 200,
easing: 'easeOutCubic'
});
if (persist) {return}; // do not animate out
if (messageSliderOutTimer) {
clearTimeout(messageSliderOutTimer)
}
messageSliderOutTimer = setTimeout(() => {
anime({
targets: '#messageSlider',
opacity: [1,0],
translateY: [0,-200],
translateX: '-50%',
duration: 300,
easing: 'easeInCubic'
});
}, 2000);
} // showMessageSlider
function spx_system(cmd,servername='') {
// system command handler
let sysCmd = cmd.toUpperCase()
let data = {};
switch (sysCmd) {
case 'OPENWEBRENDERER':
window.open("/renderer", 'gcwebrender', 'width=1920,height=1080,scrollbars=yes,location=yes,status=yes');
break;
case 'OPENWEBRENDERER_SCALABLE':
var w = 1280;
var h = 720;
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var OPT = '_blank,toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left;
window.open('/renderer/scalable', 'gcwebrender2', OPT);
break;
case 'OPENDATAFOLDER':
data.command = 'DATAFOLDER';
break;
case 'OPENTEMPLATEFOLDER':
data.command = 'TEMPLATEFOLDER';
break;
case 'CHECKCONNECTIONS':
// console.log('Checking connections to servers...', servername);
data.command = 'CHECKCONNECTIONS';
data.server = servername;
break;
case 'RESTARTSERVER':
// this will kill 'nodejs' -server and 'forever' utility will restart it again and again...
data.command = 'RESTARTSERVER';
data.reloadPage = true;
break;
default:
console.log('Unknown spx_system identifer: ' + cmd);
break;
}
AJAXGET('/CCG/system/' + JSON.stringify(data));
if (data.reloadPage) {
document.getElementById('SmartPX_App').style.opacity = '0.4';
setTimeout('location.reload()', 1000);
}
} // end spx_system
function tip(msg) {
// request .....
// returns .....
// Describe the function here
e = document.getElementById('statusbar') || null;
if (e) {
document.getElementById('statusbar').innerText=msg;
event.stopPropagation();
// playServerAudio('beep', 'We are in TIP function');
}
} // tip mgsed
function e(ID) {
return document.getElementById(ID);
} // e
function ife(ID) {
if (document.getElementById(ID)) {
// console.log('IFE Element found: ' + ID);
return document.getElementById(ID);
} else {
// console.log('IFE Element NOT found: ' + ID);
return false;
}
} // ife
function spxInit() {
// executes on page load:
// - load values from localStorage
// - init Sortable
// Init sortable and saveData onEnd
if ( ife('identifier').value=="controller" ) {
sortable = Sortable.create(itemList, {
handle: '.handle',
animation: 150,
disabled: false,
// sortable.option("disabled", true); // TAI false
onEnd: function (evt) {
SaveNewSortOrder();
},
});
}
focusRow(0);
AppState("DEFAULT");
spx_system('CHECKCONNECTIONS');
document.getElementById('itemList').style.opacity=1;
} // end spxInit
function setProfile(profileName) {
// FIXME: remove?
// change profile to profileName and save to localStorage
if (profileName == '') {
// retrieve from localStorage
profileName = localStorage.SPX_CT_ProfileName || '...';
}
document.getElementById('profname').innerText = profileName;
localStorage.SPX_CT_ProfileName = profileName;
} // setProfile ended
function statusbar(sMsg, sLevel="x") {
/* Usage
- statusbar('This is a normal message')
- statusbar('Hot warning', "warn")
- statusbar('Red alert', "error")
*/
if (!document.getElementById('statusbar')) { return } // not in controller
let msglevel = sLevel.toUpperCase();
// console.log('statusbar level: [' + msglevel +'], msg: [' + sMsg + '].');
document.getElementById('statusbar').classList="statusbar";
switch (msglevel){
case "ERROR":
document.getElementById('statusbar').classList.add("statusBarError");
break;
case "WARN":
document.getElementById('statusbar').classList.add("statusBarWarn");
break;
}
document.getElementById('statusbar').innerText=sMsg;
} // statusbar
function stopAll() {
// Will send STOP commands to all layers used by current rundown.
// Timeout here allows some time for server to handle the incoming commands.
// TODO: Far from elegant but kind of works. A better approach would be to
// develop a server-side function for this.
// Function implemented in v1.0.8 from ExtraFunctions -library
let ITEMS = document.querySelectorAll('.itemrow');
ITEMS.forEach(function (templateItem, itemNro) {
setTimeout(function(){
// continueUpdateStop('stop', templateItem); // slower
playItem(templateItem, 'stop');
// setItemButtonStates(templateItem, 'stop') // just the UI
}, (itemNro * 40)); // 20, 40, 60, 80ms etc...
});
} // stopAll
function swap2HTMLntities(str){
// This fixes issue #5 re special characters
str = str.replace(/\\/g, "&#92;") // html entity for backslash
str = str.replace(/"/g, "&#34;") // html entity for dblquote
str = encodeURIComponent(str); // handle the rest
return str;
} // end swap2HTMLntities
function tip(msg) {
// request .....
// returns .....
// Describe the function here
e = document.getElementById('statusbar') || null;
if (e) {
document.getElementById('statusbar').innerText=msg;
event.stopPropagation();
// playServerAudio('beep', 'We are in TIP function');
}
} // tip mgsed
function toggleAutoplay(slider, targ) {
let Cfgdata = {};
Cfgdata.key = 'autoplayLocalRenderer'
if (slider.checked) {
document.getElementById(targ).innerText = 'YES';
Cfgdata.val = true;
} else {
document.getElementById(targ).innerText = 'NO';
Cfgdata.val = false;
}
// console.log('Sending config change to server', Cfgdata);
ajaxpost('/gc/saveConfigChanges',Cfgdata);
} // toggleAutoplay
function toggleLRendererHandler(slider, targ) {
let Cfgdata = {};
Cfgdata.key = 'disableLocalRenderer'
if (slider.checked) {
document.getElementById(targ).innerText = 'YES';
document.getElementById('previewIF').src = '/templates/empty.html';
document.getElementById('LocalRendererDisabledNotification').style.opacity = 1;
Cfgdata.val = true;
} else {
document.getElementById('previewIF').src = '/renderer';
document.getElementById(targ).innerText = 'NO';
document.getElementById('LocalRendererDisabledNotification').style.opacity = 0;
Cfgdata.val = false;
}
// console.log('Sending config change to server', Cfgdata);
ajaxpost('/gc/saveConfigChanges',Cfgdata);
} // toggleLRendererHandler
function toggleSwitchHandler(slider, targ, type) {
// When program/preview toggle buttons are clicked.
// console.log('toggleSwitchHandler', slider, targ);
let data = {}
data.type = type;
let handle = slider.querySelector('.vc-handle');
if (slider.checked) {
data.command = 'open';
document.getElementById(targ).innerText = 'ON';
} else {
data.command = 'close';
document.getElementById(targ).innerText = 'OFF';
}
handleRendererPopups(data)
} // toggleSwitchHandler
function toggleRundownSettings() {
// Toggle the rundown settings panel
let optionsZone = document.getElementById('rdOptionsCollapsible');
if (optionsZone.style.maxHeight){
optionsZone.style.maxHeight = null;
setTimeout(function(){optionsZone.style.display = 'none';}, 300);
} else {
optionsZone.style.display = 'block';
optionsZone.style.maxHeight = optionsZone.scrollHeight + "px";
}
} // toggleRundownSettings
function toggleTip(targetField, source, attr) {
document.getElementById(targetField).innerText = source.getAttribute(attr);
} // toggleTip
function toggleActive(ServerName='') {
// Will enable / disable commands to the server
// CCG/disable {server:'OVERLAY, disable:false}
let e = document.getElementById('server'+ ServerName);
let targetState = false;
if (e && e.classList.contains('disabledServer')) {
// Enable
e.classList.remove('disabledServer')
targetState = false
} else {
// Disable
e.classList.add('disabledServer')
targetState = true
}
let data = {};
data.server = ServerName;
data.disabled = targetState;
working('Changing server connection state to [' + targetState + ']...');
ajaxpost('/CCG/disable',data);
} // toggleActive
function ToggleExpand(rowelement='') {
if (!rowelement){
// rowelement not given, get focused line
rowelement=getFocusedRow();
}
// console.log('Toggle row id ' + rowelement.id);
let Expanded = rowelement.querySelector('#Expanded')
let Collapsed = rowelement.querySelector('#Collapsed')
if (Collapsed.style.display=="none") {
// We were open, so lets COLLAPSE
Collapsed.style.display="block";
Expanded.style.display="none";
AppState('DEFAULT');
} else {
// We were closed, so lets EXPAND and set focus to first text field
Collapsed.style.display="none";
Expanded.style.display="block";
if (Expanded.querySelectorAll('.gcinput').length>0) {
// if there are input fields, go to editor mode (and disable dragsort)
let firstFormElement = Expanded.querySelectorAll('.gcinput')[0];
if (firstFormElement.type=="text") {
firstFormElement.focus();
firstFormElement.select();
}
AppState('EDITING');
}
}
} // ToggleExpand
function updateItem(itemrow) {
// request ..... rundown template index
// returns ..... ajax response message to GUI
// Will send data object with an index and playlist filename
// and playout handler will parse required data and so on.
if (!itemrow) {itemrow = getFocusedRow() }
working('Sending update request.');
data = {};
data.command = 'update';
data.datafile = document.getElementById('datafile').value;
data.relpath = itemrow.querySelector('[name="RundownItem[relpath]"]').value;
data.playserver = itemrow.querySelector('[name="RundownItem[playserver]"]').value;
data.playchannel = itemrow.querySelector('[name="RundownItem[playchannel]"]').value;
data.playlayer = itemrow.querySelector('[name="RundownItem[playlayer]"]').value;
data.webplayout = itemrow.querySelector('[name="RundownItem[webplayout]"]').value;
data.epoch = itemrow.getAttribute('data-spx-epoch');
data.fields = [];
let CurrentDomFields = itemrow.querySelectorAll("[data-update]");
CurrentDomFields.forEach((item,index) => {
let formField={};
formField.field = item.getAttribute('data-update');
formField.value = item.value;
if (item.type === 'checkbox') {
if (item.checked) {
formField.value = '1'
} else {
formField.value = '0'
}
}
data.fields.push(formField);
});
// Note, data here IS in internal array format [{"field":"f1", "value":"Hello"},{"field":"f2", "value":"World"},]
// and MUST NOT change. Format it downstream for different renderers.
ajaxpost('/gc/playout',data, 'true');
} // updateItem
function playServerAudio(sfx,message=''){
console.log('%cPlaying sound (' + sfx + ') on server. Log: ' + message + '.', 'background: #622; color: #fff');
data = {};
data.sound = sfx;
data.info = message;
ajaxpost('/gc/playaudio/', data)
} // playServerAudio
function working(StatusMsg){
if ( !document.getElementById('working') ) return ; // not in controller
if (StatusMsg==""){
document.getElementById('working').innerText="";
document.getElementById('working').style.display="none";
} else {
document.getElementById('working').innerText=StatusMsg;
document.getElementById('working').style.display="inline-block";
}
} //working
function toggleNormalRenderer(cmd) {
// Added in 1.1.0
// This [closing of popup] can happen in any SPX view,
// not necessarily in the controller view...
let Cfgdata = {};
Cfgdata.key = 'renderer'
if (cmd == 'open') {
Cfgdata.val = 'popup';
} else {
Cfgdata.val = 'normal';
}
ajaxpost('/gc/saveConfigChanges',Cfgdata);
showMessageSlider('Renderer changed to ' + Cfgdata.val + '.')
if ( !document.getElementById('previewIF') ) return ; // not in controller
if (cmd == 'open') {
// Hide inline renderer, use popup
document.getElementById('previewBG').style.display='none';
document.getElementById('previewIF').src='/templates/empty.html';
} else {
// Use normal renderer
document.getElementById('previewBG').style.display='block';
document.getElementById('previewIF').src='/renderer';
}
} // toggleNormalRenderer
// This script is gotten straight from https://www.w3schools.com/howto/howto_js_draggable.asp
function dragElement(elmnt) {
if (!elmnt) { return } // element not found, bail out
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "HeaderBar")) {
// if present, the header is where you move the DIV from:
document.getElementById(elmnt.id + "HeaderBar").onmousedown = dragMouseDown;
} else {
// otherwise, move the DIV from anywhere inside the DIV:
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
}
View Git Blame Copy Permalink