Init WebCG
This commit is contained in:
@@ -0,0 +1,354 @@
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user