355 lines
11 KiB
JavaScript
355 lines
11 KiB
JavaScript
|
|
console.clear() ; // start from scratch
|
|
|
|
var pluginRootFolder = '/plugins/spxImagelist/'
|
|
var extensionConfig
|
|
var pluginModule
|
|
var messageSliderOutTimer // a global var for message slider timeout
|
|
|
|
function addAll() {
|
|
// move all from inbox to the end of outbox
|
|
let items = e('inbox').querySelectorAll('SOCIAL-ITEM')
|
|
let outbox = e('outbox')
|
|
items.forEach((item,index) => {
|
|
if (outbox.lastChild) {
|
|
outbox.lastChild.after(item);
|
|
} else {
|
|
outbox.insertBefore(item, outbox.firstChild);
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
function addAsFirst() {
|
|
var sourceBox = getFocusedElement().parentNode.id;
|
|
var next = getFocusedElement().nextSibling;
|
|
var temp = document.createDocumentFragment();
|
|
temp.appendChild(getFocusedElement());
|
|
let outbox = e('outbox')
|
|
outbox.insertBefore(temp, outbox.firstChild);
|
|
if (sourceBox === 'inbox') {
|
|
focusItem(next);
|
|
}
|
|
}
|
|
|
|
function addAsLast() {
|
|
var sourceBox = getFocusedElement().parentNode.id;
|
|
var next = getFocusedElement().nextSibling;
|
|
var temp = document.createDocumentFragment();
|
|
temp.appendChild(getFocusedElement());
|
|
e('outbox').appendChild(temp);
|
|
if (sourceBox === 'inbox') {
|
|
focusItem(next);
|
|
}
|
|
}
|
|
|
|
function ajaxpost(urlPath, data, prepopulated='false'){
|
|
if (prepopulated=='true'){
|
|
data.prepopulated="true"
|
|
}else{
|
|
data.prepopulated="false"
|
|
};
|
|
|
|
axios.post(urlPath, data)
|
|
.then(function (response) {
|
|
if (response.data) { console.log('Post response', response.data) };
|
|
})
|
|
.catch(function (error) {
|
|
if (error.response) {
|
|
console.log(error.response.data);
|
|
console.log(error.response.status);
|
|
console.log(error.response.headers);
|
|
} else if (error.request) {
|
|
console.log(error.request);
|
|
} else {
|
|
console.log('Error', error.message);
|
|
}
|
|
console.log(error.config);
|
|
});
|
|
}
|
|
|
|
function checkKey(ev) {
|
|
// Keyboard shortcut functions can be changed here.
|
|
// require ..... keyboard event
|
|
// returns ..... executes keyboard shortcuts
|
|
// keybord shortcuts (see https://keycode.info/)
|
|
ev = ev || window.event;
|
|
switch (ev.keyCode)
|
|
{
|
|
case 46: // del
|
|
case 73: // i
|
|
deleteItem()
|
|
break;
|
|
|
|
case 40: // down
|
|
focusNext();
|
|
break;
|
|
|
|
case 38: // down
|
|
focusPrev();
|
|
break;
|
|
|
|
case 70: // f
|
|
addAsFirst();
|
|
break;
|
|
|
|
case 76: // l
|
|
addAsLast();
|
|
break;
|
|
|
|
case 32: // space
|
|
playFocusItem();
|
|
ev.preventDefault();
|
|
break;
|
|
|
|
case 9: // tab
|
|
togglePanelFocus();
|
|
ev.preventDefault();
|
|
break;
|
|
|
|
case 27: // esc
|
|
stopItem();
|
|
ev.preventDefault();
|
|
break;
|
|
}
|
|
|
|
return;
|
|
} //checkKey
|
|
|
|
function e(id) {
|
|
return document.getElementById(id);
|
|
} // e
|
|
|
|
function encodeStr(rawStr, thisIsBodyText=false) {
|
|
let temp
|
|
if (!rawStr) return '';
|
|
temp = rawStr
|
|
if (thisIsBodyText && document.getElementById('ignoreReturns').checked===false) {
|
|
// add newlines to playout string if checkbox is off
|
|
temp = temp.replace(/\n/g, "<BR>");
|
|
} else {
|
|
temp = temp.replace(/\n/g, " "); // replace \n with space
|
|
}
|
|
temp = _.escape(temp); // lodash escapes all < > ; "... -characters
|
|
return temp
|
|
} // endodeStr
|
|
|
|
function focusItem(el) {
|
|
document.querySelectorAll('image-item').forEach(function (item, i) {
|
|
if (item.classList.contains("selectedImage")) {
|
|
item.classList.remove('selectedImage');
|
|
}
|
|
})
|
|
|
|
if (el && el.nodeName == "IMAGE-ITEM") {
|
|
el.classList.add('selectedImage');
|
|
}
|
|
|
|
e('playButton').classList.remove('disable')
|
|
} // focusItem
|
|
|
|
async function loadProjectData(path='') {
|
|
let projModu, pluginModule, APIurl, url
|
|
APIurl = extensionConfig.general.imageJsonApiUrl || '';
|
|
pluginModule = await import("/js/spx_fileBrowserModule.js");
|
|
if (!path) {path = '/'};
|
|
e('navipath').innerText = path;
|
|
e('playButton').classList.add('disable')
|
|
url = '/api/v1/feedproxy?url=http://localhost:5656/api/v1/feedproxy?url=' + APIurl + path;
|
|
pluginModule.fetchData(url)
|
|
} // loadProjectData
|
|
|
|
|
|
function navigateTo(subFolder) {
|
|
console.log('Going to ' + subFolder);
|
|
loadProjectData(subFolder);
|
|
}
|
|
|
|
function goHome() {
|
|
loadProjectData('/');
|
|
}
|
|
|
|
function goUp() {
|
|
let pathArray = e('navipath').innerText.split('/');
|
|
pathArray.pop();
|
|
let parentFolder = pathArray.join('/');
|
|
loadProjectData(parentFolder);
|
|
}
|
|
|
|
function showMessageSlider(msg, type='info', persist=false) {
|
|
// show a sliding message at the top of the page
|
|
let txt = msg;
|
|
let typ = type; // happy, info, warn, error (classes happyMsg, infoMsg, warnMsg, errorMsg...)
|
|
document.getElementById('messageSlider').style.opacity = 0;
|
|
document.getElementById('messageSlider').innerHTML = txt;
|
|
document.getElementById('messageSlider').classList = typ + 'Msg';
|
|
document.getElementById('messageSlider').style.transform = 'translateX(-50%)'; // init X pos
|
|
anime({
|
|
targets: '#messageSlider',
|
|
opacity: [0,1],
|
|
translateY: [-200,0],
|
|
translateX: '-50%',
|
|
delay: 0,
|
|
duration: 100,
|
|
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);
|
|
|
|
}
|
|
|
|
function hideMessageSlider() {
|
|
if (!document.getElementById('messageSlider')) { return }
|
|
anime({
|
|
targets: '#messageSlider',
|
|
opacity: 0,
|
|
translateY: -200,
|
|
translateX: '-50%',
|
|
duration: 300,
|
|
delay: 200,
|
|
easing: 'easeInCubic'
|
|
});
|
|
}
|
|
|
|
|
|
// function playItem(article, spxData) {
|
|
function playItem() {
|
|
|
|
let imageUrl
|
|
document.querySelectorAll('image-item').forEach((item) => {
|
|
if (item.classList.contains("selectedImage")) {
|
|
let el = item.querySelector('.fileitem');
|
|
console.log('el',el);
|
|
imageUrl = el.style.backgroundImage.slice(4, -1).replace(/"/g, "");
|
|
}
|
|
})
|
|
|
|
let InAnimation = extensionConfig.template.imageLayerAnimationStyle.inAnimation || 'fade'; // or other value supported by the template
|
|
let AnimaEasing = extensionConfig.template.imageLayerAnimationStyle.easing || 'linear'; // or other value supported by the template
|
|
|
|
// let jsonData = JSON.parse(sourceItem.querySelector('#articleData').value); // disabled 25.10.2021
|
|
try {
|
|
let fFields = [
|
|
{ 'field': 'f0', 'value': '' },
|
|
{ 'field': 'f1', 'value': imageUrl },
|
|
{ 'field': 'f2', 'value': InAnimation },
|
|
{ 'field': 'f3', 'value': AnimaEasing },
|
|
]
|
|
|
|
// Playout with spx (for CasparCG and webplayout)
|
|
let spxPlayoutData = {};
|
|
spxPlayoutData.relpath = extensionConfig.template.file || 'unknownTemplatePathFromItemList';
|
|
spxPlayoutData.dataformat = extensionConfig.template.dataformat || 'json';
|
|
spxPlayoutData.playserver = extensionConfig.template.playserver || 'OVERLAY';
|
|
spxPlayoutData.playchannel = extensionConfig.template.playchannel || '1';
|
|
spxPlayoutData.playlayer = extensionConfig.template.playlayer || '10';
|
|
spxPlayoutData.webplayout = extensionConfig.template.webplayout || '10';
|
|
spxPlayoutData.relpathCCG = spxPlayoutData.relpath.split('.htm')[0];
|
|
spxPlayoutData.fields = fFields
|
|
spxPlayoutData.command = 'play';
|
|
|
|
if (Array.isArray(spxPlayoutData.playserver)) {
|
|
// several servers
|
|
spxPlayoutData.playserver.forEach((server,index) => {
|
|
setTimeout(function () {
|
|
spxPlayoutData.playserver = server;
|
|
// console.log('Playout on multiple CCG servers: ', spxPlayoutData);
|
|
ajaxpost('/gc/playout', spxPlayoutData, 'true');
|
|
}, 10);
|
|
|
|
});
|
|
|
|
} else {
|
|
// console.log('Playout on CCG server ' + spxPlayoutData.playserver);
|
|
ajaxpost('/gc/playout', spxPlayoutData, 'true');
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to play item!', error)
|
|
}
|
|
|
|
}
|
|
|
|
function stopItem() {
|
|
let spxPlayoutData = {};
|
|
spxPlayoutData.relpath = extensionConfig.template.file || 'unknownTemplatePathFromItemList';
|
|
spxPlayoutData.dataformat = extensionConfig.template.dataformat || 'json';
|
|
spxPlayoutData.playserver = extensionConfig.template.playserver || 'OVERLAY';
|
|
spxPlayoutData.playchannel = extensionConfig.template.playchannel || '1';
|
|
spxPlayoutData.playlayer = extensionConfig.template.playlayer || '10';
|
|
spxPlayoutData.webplayout = extensionConfig.template.webplayout || '10';
|
|
spxPlayoutData.relpathCCG = spxPlayoutData.relpath.split('.htm')[0];
|
|
spxPlayoutData.command = 'stop';
|
|
if (Array.isArray(spxPlayoutData.playserver)) {
|
|
// several servers
|
|
spxPlayoutData.playserver.forEach((server,index) => {
|
|
setTimeout(function () {
|
|
spxPlayoutData.playserver = server;
|
|
console.log('Playout on multiple CCG servers: ', spxPlayoutData);
|
|
ajaxpost('/gc/playout', spxPlayoutData, 'true');
|
|
}, 10);
|
|
|
|
});
|
|
|
|
} else {
|
|
console.log('Playout on CCG server ' + spxPlayoutData.playserver);
|
|
ajaxpost('/gc/playout', spxPlayoutData, 'true');
|
|
}
|
|
} // stopItem ended
|
|
|
|
|
|
// Event listeners ----------------------------------------------------------------------------
|
|
|
|
window.addEventListener('load', async () => {
|
|
try {
|
|
// console.log('Window loaded.');
|
|
extensionConfig = {
|
|
"general" : {
|
|
"title": "File Browser",
|
|
"width": 500,
|
|
"height" : 1000,
|
|
"left": 50,
|
|
"top": 50,
|
|
"imageJsonApiUrl": ""
|
|
},
|
|
"template": {
|
|
"file" : "smartpx/imagelayer/SPX_Image_Layer2.html",
|
|
"playserver": "OVERLAY",
|
|
"dataformat": "json",
|
|
"playchannel": '1',
|
|
"playlayer": '2',
|
|
"webplayout": '2',
|
|
"imageLayerAnimationStyle": {
|
|
"inAnimation": "fade",
|
|
"easing": "linear"
|
|
}
|
|
}
|
|
}
|
|
|
|
window.moveTo(extensionConfig.general.left,extensionConfig.general.top);
|
|
window.resizeTo(extensionConfig.general.width,extensionConfig.general.height);
|
|
document.title = "SPX imagelist | " + extensionConfig.general.title;
|
|
|
|
// Load selected content at init (and whenever needed)
|
|
loadProjectData()
|
|
|
|
} catch (error) {
|
|
console.error('Error! ', error);
|
|
}
|
|
});
|
|
|