shinsh/WebCG
1
0
Fork 0
Code Actions Packages Releases Activity

Init WebCG

Browse Source
This commit is contained in:
shinsh
2026-08-12 14:21:28 +09:00
commit 5c01660f97
170 changed files with 46248 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/partials/copyright.handlebars
+15
View File
@@ -0,0 +1,15 @@
<!--
╔═══════════════════════════════════════════════════════════╗
║ SPX GRAPHICS CONTROLLER ║
╟───────────────────────────────────────────────────────────╢
║ (c) 2020- SPX Graphics ║
║ https://spxgraphics.com ║
║ ║
╚═══════════════════════════════════════════════════════════╝
╭───────────────────────────────────────────────────────────╮
│ Painstakingly hand coded, no frameworks. │
│ "Some extract of vanilla, enough to feed Godzilla." │
╰───────────────────────────────────────────────────────────╯
Made in 🇫🇮
-->
views/partials/footer.handlebars
+80
View File
@@ -0,0 +1,80 @@
<!-- footer start -->
<div class="footerTable footer" style="background-color: rgba(0,0,0,0.2); padding:0 10 0 10px;">
<table class="wide footerTable" style="border: 0px solid green;" cellpadding=0 cellspacing=0>
<tr class="footerTable">
<td class="footerTable">
<span id="statusbar" class="footerTable statusbar"></span> <span id="working" class="working" style="display:none;"></span>
</td>
<td class="footerTable aright">
<!--
style="padding: 2px 10px;
background-color: rgb(39, 95, 58);
border-radius: 4px;
margin-right: 10px;
font-size: 90%;
cursor: pointer;
display: inline;
"
-->
<a id="upgradeBubble"
href="https://spxgc.tawk.help/article/latest-changes"
class="newVersionBubble"
title="{{lang 'hover.newversavailable'}}"
onmouseover="hvr('{{lang 'hover.newversavailable'}}')";
onmouseout="hvr('')";
>
<i class="fas fa-bullhorn"></i>&nbsp;<span id="upgradeVersion">v.X.X.X</span>&nbsp;<span id="upg"></span></a></span>
{{!-- </span> --}}
<span class="footerTable statusbar" style="opacity:0.53;">
SPX Solo v.<span id="footerVerDisplay">
<span ondblclick="forceWM()" title="Click click!">{{{ShowVersion}}}</span>
{{#ifValue width '3840px'}}
&nbsp;<span style="color: #f80;"><B> 4K </B></span>&nbsp;
{{/ifValue}}
{{#ifValue width '100vw'}}
&nbsp;<span style="color: #f80;"><B> AUTO </B></span>&nbsp;
{{/ifValue}}
<!-- add a link to register -->
{{#if config.registration.updated }}
<!-- Reg ok -->
{{else}}
<A class="footerRegister" HREF="/register"><i class="fas fa-crown"></i>&nbsp; Register</A>
{{/if}}
</span>
&nbsp;
{{#if easteregg}}
{{{easterText}}}
{{else}}
<A href="http://spxgraphics.com" target="_spxgccom">spxgraphics.com</A></span>
<span class="footerTable statusbar" style="opacity:0.33;"> | 💡 <A href="https://spxgraphics.com/contact" target="_feedback">Contact us</A></span>
{{/if}}
<!-- <span class="beta">beta</span> -->
</td>
</tr>
</table>
</div><!-- footer end -->
<script>
// show upgrade bubble if stored
if (localStorage.getItem('SPX-GC-NewVersion')){
document.getElementById('upgradeBubble').style.display="inline";
document.getElementById('upgradeVersion').innerText=localStorage.getItem('SPX-GC-NewVersion');
document.getElementById('newVersionMenuItem').style.display="block"; // Added in 1.1.0
} else {
document.getElementById('upgradeBubble').style.display="none"; // none
document.getElementById('newVersionMenuItem').style.display="none"; // none
}
function hvr(msg){
document.getElementById('upg').innerText=msg;
}
</script>
views/partials/header.handlebars
+153
View File
@@ -0,0 +1,153 @@
<div id="messageSlider" style="opacity:0;"></div>
<div class="headerRow">
<div id="logoZone" class="dropdown">
<img src="/img/spx_offline.png" style="position: absolute; display:none;" id="logo_off">
<img src="/img/spx_online.png" style="position: absolute; display:none;" id="logo_on">
<img src="/img/spx_online.png" id="logo" style="cursor: pointer;">
<div class="scrollingMenuArea scroller">
<div class="dropdown-content">
<A HREF="/"><i class="fas fa-home"></i>&nbsp; {{lang 'pagetitle.home'}}</A><br>
<A HREF="/shows/"><i class="fas fa-folder"></i>&nbsp; {{lang 'pagetitle.shows'}}...</A><BR>
<div style="font-size: 0.8em; padding-left: 1.0em; border-left: 10px solid rgba(0, 0, 0, 0.205);">
{{#each recents}}
<div id="recent{{@index}}"><i class="fas fa-file-alt"></i><A id="recent{{@index}}link" HREF="/gc/{{this}}">&nbsp; {{this}}</A></div>
{{/each}}
</div>
{{#ifValue disableConfigUI true}}
<!-- disableConfigUI:true -->
{{else}}
<HR class="menuDivider">
<A HREF="/config"><i class="fas fa-wrench"></i>&nbsp; {{lang 'pagetitle.configapp'}}...</A><BR>
<A HREF="/api/v1" target="apiWin"><i class="fas fa-file-code"></i>&nbsp; API {{lang 'button.docs'}}...</A><BR>
{{/ifValue}}
{{#ifValue page "controller"}}
<A HREF="" onClick="ModalOn('overlayHelp');return false;"><i class="far fa-keyboard"></i>&nbsp; {{lang 'button.shortcuts'}}...</A>
{{/ifValue}}
<HR class="menuDivider">
<A HREF="" onClick="spx_system('openWebRenderer');return false;"><i class="far fa-window-maximize"></i>&nbsp; {{lang 'button.showwebrenderer'}}</A><BR>
<A HREF="" onClick="spx_system('OPENWEBRENDERER_SCALABLE');return false;"><i class="far fa-window-maximize"></i>&nbsp; {{lang 'button.showwebrenderer'}} (scalable)</A>
{{{GenerateOpenFolderCommands}}}
{{#ifValue user "default"}}
<!--default user -->
{{else}}
<HR class="menuDivider">
<A HREF="/logout">Logout {{{user}}}...</A>
{{/ifValue}}
<HR class="menuDivider">
<A HREF="" onClick="spx_system('restartServer');return false;"><i class="fas fa-power-off"></i>&nbsp; Kill (restart SPX-server)</A>
<HR class="menuDivider">
<A HREF="https://html.graphics" target="_new"><i class="fas fa-shopping-cart"></i>&nbsp; html.graphics/store</A><BR>
<A HREF="https://bit.ly/joinspx" target="_new"><i class="fab fa-discord"></i>&nbsp; Join SPX Discord</A><br>
<A HREF="https://spxcloud.app" target="_new"><i class="fas fa-cloud"></i>&nbsp; Run SPX in the Cloud</A><br>
<A id="newVersionMenuItem" class="newVersionBubble" HREF="https://spxgc.tawk.help/article/latest-changes" target="_new"><i class="fas fa-bullhorn"></i>&nbsp; New version available!</A>
<!-- add a link to register -->
{{#if config.registration.updated }}
<!-- Reg ok -->
{{else}}
<A style="display: block;" class="newVersionBubble" HREF="/register"><i class="fas fa-crown"></i>&nbsp; Register for free...</A>
{{!-- <div class="registrationDiv">
<A HREF="/register/"><i class="fas fa-crown"></i>&nbsp; Register for free...</A><BR>
</div> --}}
{{/if}}
</div>
</div>
</div>
<div id="breadCrumsZone">
{{#ifValue page "appconfig"}}
<span class="caret-icon">&#9654;</span>
<span class="breadcrumbs">SPX Solo - {{lang 'pagetitle.configapp'}}</span>
{{/ifValue}}
{{#ifValue page "shows"}}
<span class="caret-icon">&#9654;</span>
<span class="breadcrumbs">{{lang 'pagetitle.shows'}}</span>
{{/ifValue}}
{{#ifValue page "showconfig"}}
<span class="caret-icon">&#9654;</span>
<span class="breadcrumbs"><A HREF="/shows" onmouseover="tip('{{lang 'hover.navishows'}}');">{{lang 'pagetitle.shows'}}</A></span>
<span class="caret-icon">&#9654;</span>
<span class="breadcrumbs"><a href="/show/{{folder}}" onmouseover="tip('{{lang 'hover.navishow'}}');">{{prettyfyBreadcrumb folder}}</a></span>
<span class="caret-icon">&#9654;</span>
<span class="breadcrumbs">{{lang 'pagetitle.configshow'}}</span>
{{/ifValue}}
{{#ifValue page "episodes"}}
<span class="caret-icon">&#9654;</span>
<span class="breadcrumbs"><A HREF="/shows" onmouseover="tip('{{lang 'hover.navishows'}}');">{{lang 'pagetitle.shows'}}</A></span>
<span class="caret-icon">&#9654;</span>
<span class="breadcrumbs">{{prettyfyBreadcrumb folder}}</span>
<div class="breadIcon">
<span onClick="projectSettings();" class="breadcrumbGear" title="Project settings"><i class="fas fa-cog"></i></span>
</div>
{{/ifValue}}
{{#ifValue page "controller"}}
<span class="caret-icon">&#9654;</span>
<span class="breadcrumbs"><A HREF="/shows" onmouseover="tip('{{lang 'hover.navishows'}}');">{{lang 'pagetitle.shows'}}</A></span>
<span class="caret-icon">&#9654;</span>
<span class="breadcrumbs"><a href="/show/{{folder}}" onmouseover="tip('{{lang 'hover.navishow'}}');">{{prettyfyBreadcrumb folder}}</a></span>
<div class="breadIcon">
<a class="breadcrumbGear"
href="/show/{{folder}}/config"
onmouseover="tip('{{lang 'button.settings'}}');"
title="{{lang 'button.settings'}}"><i class="fa fa-cog"></i></a>
</div>
<span class="caret-icon">&#9654;</span>
<span class="breadcrumbs">{{prettyfyBreadcrumb filebasename}}</span>
<div class="breadIcon">
<a class="breadcrumbGear" href="#" onClick="toggleRundownSettings(); return false;" title="Rundown options"><i class="fa fa-bars"></i></a>
</div>
{{/ifValue}}
{{{DetectCustomContentPackages}}}
<!-- What is DetectCustomContentPackages?
You probably don't need to worry about this, but:
For development purposes we can have custom "content repositories"
that are not part of the standard SPX installation. These repositories
consists of complete ASSETS and DATAROOT subfolders and both of them
will need to have a file "spx-content-repo.txt" in the root of the
folders. This file will contain the name of the repository.
The spx-content-repo.txt textfile in the "normal" content repository
should contain "CONTENT_FULL". This is used to distinguish the standard
SPX content repository from custom ones.
There is a utility batch file "SWITCH_CONTENT.BAT" that can be used
to switch between the standard SPX content repository and a custom one
while developing. When using this utility the custom content repositories
are kept in a folder called "CONTENT_REPOSITORIES" in the root of SPX
installation. Each custom repository is kept in a subfolder of this
folder and the name of the subfolder is the name of the repository and
it should also be the content of the spx-content-repo.txt text files.
When a custom content repository is detected the name of the repository
is shown in the header of the SPX UI.
Fun eh?
-->
</div>
<div id="CasparZone" class="serverButtons">
{{#ifValue page "controller"}}
{{{ServerStatus}}}
{{/ifValue}}
</div>
</div>
views/partials/partial-genericfilebrowsermodal.handlebars
+49
View File
@@ -0,0 +1,49 @@
<!-- This is the file browser modal overlay (used by view-showconfig) -->
<div class="overlay" id="filebrowserModal">
<div class="modal wrapper">
<div class="modal_top height4">
<table class="wide" style="height:50%; border: 0px solid white; border-spacing: 0px;">
<tr style="background-color: rgba(255,255,255,0.2);">
<td valign="middle" style="font-size: 0.8em;">
&nbsp;{{lang 'pagetitle.selectfile'}}
</td>
<td valign="middle" class="aright">
<i style="font-size: 1.5em; cursor: pointer;" class="fas fa-window-close" onClick="ModalOff('filebrowserModal')"></i>&nbsp;
</td>
</tr>
</table>
<div class="curfolder" id="curfolder"></div>
</div>
<div class="modal_content content scroller">
<div id="treeview" class="filebrowser">
<UL>
<LI style="user-select: none;" id="homefolder" class="filebrowser_up" onDblClick="goHome();"><SPAN class="icon home"></i>{{lang 'general.home'}}</SPAN></LI>
<LI style="user-select: none;" id="prefolder" class="filebrowser_up" onDblClick="goUp();"><SPAN class="icon back">{{lang 'general.up'}}</SPAN></LI>
</UL>
<UL id="folderList">
</UL>
<UL id="fileList">
</UL>
</div>
</div>
<div class="modal_bottom">
<table class="wide">
<tr>
<td width="10%">
<a href="https://spxgraphics.com/store" target="_blank"><img border="0" alt="Template Store" title="SPX Store" src="/img/storeicon.png"></a></span>
</td>
<td width="60%" valign="middle">
<span id="browserMessage" class="browserMessage"></span>
</td>
<td class="spxFlexContainer aright" >
<button style="width:25%;" class="spxformtext btn spxFlexItem bg_grey15 ripple" onClick="ModalOff('filebrowserModal')">{{lang 'button.cancel'}}</button>
<button style="width:25%; opacity:0.2;" id="btnChooseTemplate" class="spxformtext btn spxFlexItem bg_blue ripple" onClick="openSelectedCSVFile();">{{lang 'button.selectemplate'}}</button>
</td>
</tr>
</table>
</div>
</div>
</div><!-- overlay ended-->
views/partials/partial-showextrabrowsermodal.handlebars
+53
View File
@@ -0,0 +1,53 @@
<style>
#extrabrowserHeaderBar {
cursor: move;
}
</style>
<script>
// Make the DIV element draggable:
document.addEventListener("DOMContentLoaded", function() {
dragElement(document.getElementById("extrabrowser"));
});
</script>
<!-- This is the file browser modal overlay (used by view-showconfig) -->
<div class="overlay" id="extraoverlay" id="extrabrowserModal">
<div class="modal wrapper" id="extrabrowser">
<div class="modal_top height4" id="extrabrowserHeaderBar">
<table class="wide" style="height:50%; border: 0px solid white; border-spacing: 0px;">
<tr style="background-color: rgba(255,255,255,0.2);">
<td valign="middle" style="font-size: 0.8em;">
&nbsp;{{lang 'pagetitle.selectshowextra'}}
</td>
<td valign="middle" class="aright">
<i style="font-size: 1.5em; cursor: pointer;" class="fas fa-window-close" onClick="ModalOff('extraoverlay');"></i>&nbsp;
</td>
</tr>
</table>
</div>
<div class="modal_content content scroller">
<div class="addTemplateItem row_accentExtras">
<button type="button" class="addbtn bg_blue ripple" onClick="addExtra('button');" style="float:right;">+</button>
<span class="templateName">{{lang 'config.extrabutton'}}</span><BR>
<span class="templateDesc">{{lang 'config.extrabuttondescription'}}</span>
</div>
<div class="addTemplateItem row_accentExtras">
<button type="button" class="addbtn bg_blue ripple" onClick="addExtra('togglebutton');" style="float:right;">+</button>
<span class="templateName">{{lang 'config.extratoggle'}}</span><BR>
<span class="templateDesc">{{lang 'config.extratoggledescription'}}</span>
</div>
<div class="addTemplateItem row_accentExtras">
<button type="button" class="addbtn bg_blue ripple" onClick="addExtra('selectbutton');" style="float:right;">+</button>
<span class="templateName">{{lang 'config.extraselectbutton'}}</span><BR>
<span class="templateDesc">{{lang 'config.extraselectdescription'}}</span>
</div>
</div>
</div>
</div><!-- overlay ended-->
views/partials/partial-templatebrowsermodal.handlebars
+201
View File
@@ -0,0 +1,201 @@
<style>
.modal{
left: 55%;
}
.dialogHeaderBar {
cursor: move;
}
</style>
<script>
// Make the DIV element draggable:
document.addEventListener("DOMContentLoaded", function() {
dragElement(document.getElementById("dialog"));
});
</script>
<!-- This is the file browser modal overlay (used by view-showconfig) -->
<div class="overlay" id="fileoverlay" idzzz="filebrowserModal">
<div class="modal wrapper">
<div class="dialogHeaderBar" >
<div>{{lang 'pagetitle.selectemplate'}} ({{showconfig.projectFormat}})</div>
<div class="dialogHeaderBarClose">
<i class="fas fa-window-close dialogCloseButton" onClick="ModalOff('fileoverlay')"></i>
</div>
</div>
<div class="tabButtonRow" id="AddTemplatesTabBar">
<button onclick="AddTemplatesTab(1)" id="tabBtn1" class="tablinks tabSelected" >Installed templates</button>
<button id="formatSPX" class="tablinks {{#ifValue showconfig.projectFormat "SPX"}}tabSelected{{/ifValue}}">SPX</button>
<button id="formatOGRAF" class="tablinks {{#ifValue showconfig.projectFormat "OGRAF"}}tabSelected{{/ifValue}}">OGRAF</button>
<div>
<button onclick="AddTemplatesTab(2)" id="tabBtn2" class="tablinks">SPX Store</button>
<button onclick="AddTemplatesTab(3)" id="tabBtn3" class="tablinks">Loopic</button>
<button onclick="AddTemplatesTab(4)" id="tabBtn4" class="tablinks">Ferryman</button>
</div>
</div>
<div id="tab1">
<div class="modal_top">
<div class="curfolder" id="curfolder"></div>
</div>
<div class="scroller filebrowser">
<UL>
<LI style="user-select: none;" id="homefolder" class="filebrowser_up" onDblClick="goHome();"><SPAN class="icon home"></i>{{lang 'general.home'}}</SPAN></LI>
<LI style="user-select: none;" id="prefolder" class="filebrowser_up" onDblClick="goUp();"><SPAN class="icon back">{{lang 'general.up'}}</SPAN></LI>
</UL>
<UL id="folderList">
</UL>
<UL id="fileList">
</UL>
</div>
<div class="modal_bottom">
<div class="storeIcon"
onmouseover="showMessage('Visit SPX Store for more templates')"
onclick="window.open('https://spxgraphics.com/store', '_blank');"
></div>
<div style="flex-grow: 1;" >
<span id="browserMessage" class="browserMessage"></span>
</div>
<div>
<button class="btn bg_grey15 ripple" onClick="ModalOff('fileoverlay')">{{lang 'button.cancel'}}</button>
<button style="opacity:0.2;" id="btnChooseTemplate" class="btn bg_blue ripple" onClick="openSelectedFiles();">{{lang 'button.selectemplate'}}</button>
<button class="spxformtext btn bg_blue ripple"
onClick="toggleAll();"
id="allToggle"
data-all-label={{lang 'general.all'}}
data-none-label={{lang 'general.none'}}
>{{lang 'general.all'}}</button>
</div>
</div>
</div>
<div style="display: none;" id="tab2">
<div class="promoBox">
<div class="promoBoxCols">
<div class="promoLeft">
<div class="promoBoxHead">More graphics and plugins</div>
<p>
SPX Store is SPX Graphics' official Store for free and premium SPX
templates and application extensions.</p>
<br>
▶ <a href="https://spxgraphics.com/store" target="store">spxgraphics.com/store</a>
<br>
<h2>Creative Services</h2>
<p>
SPX Graphics offers creative services for businesses.
Our team of designers and developers
can help you with your next project.
</p>
<br>
<ul>
<li>Custom templates and Extensions</li>
<li>Workflow development</li>
<li>System integrations</li>
<li>SLA and Support</li>
</ul>
<br>
▶ <a href="https://spxgraphics.com/contact" target="_blank">Get in touch</a>
</div>
<div class="promoRight">
<img src="/img/SPXstore600_2023_240px.png" alt="SPX Store" title="SPX Store">
<a href="/img/promo-store.png" target="_blank">
<img src="/img/promo-store.png"
alt="SPX Store screenshot"
border=0>
</a>
</div>
</div>
</div>
</div>
<div style="display: none;" id="tab3">
<div class="promoBox">
<div class="promoBoxCols">
<div class="promoLeft">
<div class="promoBoxHead">HTML animation tool</div>
<p>
Create SPX templates with a browser based animation tool.
</p>
<p>
Loopic supports SPX template definition and generated templates
are stored straight into SPX template folder, so you can go
on-air instantly.
</p>
<br>
▶ <a href="https://app.loopic.io" target="loopic">Start Loopic</a>
<br>
<br>
<p>
Resources:<br>
▶ <a href="https://docs.loopic.io/user-guide" target="ldocs">User Guide</a><br>
▶ <a href="https://docs.spxgraphics.com/Guides/Tutorials/How+to+create+HTML+graphics+using+Loopic" target="ldocs">SPX templates using Loopic</a>
</p>
</div>
<div class="promoRight">
<img src="/img/LoopicLogov2White.svg" alt="Loopic logo">
<br><br>
<a href="/img/LoopicSPXScreenshot.png" target="_blank">
<img src="/img/LoopicSPXScreenshot.png"
alt="Loopic screenshot"
border=0>
</a>
</div>
</div>
</div>
</div>
<div style="display: none;" id="tab4">
<div class="promoBox">
<div class="promoBoxCols">
<div class="promoLeft">
<div class="promoBoxHead">SPX templates from After Effects</div>
<p>
StreamShapers' Ferryman enables graphic designers to transform their creative
ideas from animated Lottie files from Adobe After Effects into dynamic HTML templates
without any need for HTML, CSS, or JavaScript development.
</p>
<p>
Ferryman supports SPX template definition, allowing the generated templates to be
seamlessly integrated into SPX for instant playback!</p>
<br>
▶ <a href="https://www.ferryman.streamshapers.com/" target="ferryman">ferryman.streamshapers.com</a>
<br>
<br>
<p>
Resources<br>
▶ <a href="https://www.streamshapers.com/docs/streamshapers-converter/tutorial" target="fdocs">Ferryman tutorial</a><br>
▶ <a href="https://docs.spxgraphics.com/Guides/Tutorials/How+to+create+HTML+graphics+in+After+Effects" target="fdocs">SPX templates using Ferryman</a>
</p>
<br>
</div>
<div class="promoRight">
<img src="/img/promo-converter-logo.png" alt="StreamShapers logo">
<br><br>
<a href="/img/snap-ferryman.png" target="_blank">
<img src="/img/snap-ferryman.png"
alt="Ferryman screenshot"
border=0
>
</a>
</div>
</div>
</div>
</div>
</div>
</div><!-- overlay ended-->
views/partials/projectForm.handlebars
+145
View File
@@ -0,0 +1,145 @@
<!-- This is the file browser modal overlay (used by view-showconfig) -->
<style>
#projectWrapper {
padding: 0;
font-size: 1em;
border-radius: 0.4em;
border: 0px solid #ccc;
width: clamp(300px, 50vw, 800px);
height: clamp(250px, 25vh, 500px);
height: fit-content;
box-sizing: border-box;
}
#projectWrapperHeaderBar {
width: 100%;
cursor: move;
color: white;
padding: 0.8em;
font-size: 0.8em;
background-color: rgba(0, 0, 0, 0.5);
position: relative;
}
.formTable {
width: 100%;
border-collapse: collapse;
padding: 0.5em;
border: 0px solid #ccc;
box-sizing: border-box;
}
.formTable tr td {
padding: 0.75em;
vertical-align: top;
border: 0px solid #ccc;
}
.infoTD {
width: 10%;
text-align: left;
padding: 1.5em 1.5em;
font-size: 0.8em;
white-space: nowrap;
}
#projectName{
width: 100%;
padding: 0.2em 0.5em;
font-family: 'UI-Regular';
font-size: 1.0em;
border-radius: 0.2em;
}
input[type="radio"] {
accent-color: #43c748; /* Change the color of the radio button */
height: 1.2em;
width: 1.5em;
cursor: pointer;
}
#radios {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 0.4em;
}
.thisBtns {
margin: 0.5em;
padding: 0.5em 1em;
border-radius: 0.1em;
cursor: pointer;
}
#helpBtn {
right: 0.5em;
border: none;
color: white;
cursor: pointer;
font-size: 1.2em;
position: absolute;
background-color: transparent;
}
#helpBtn:hover {
color: #43c748;
}
label{
cursor: pointer;
}
.vcenter {
vertical-align: middle !important;
}
</style>
<script>
// Make the DIV element draggable:
document.addEventListener("DOMContentLoaded", function() {
dragElement(document.getElementById("projectWrapper"));
});
</script>
<div class="overlay" id="projectFormOverlay">
<div class="modal wrapper" id="projectWrapper">
<div id="projectWrapperHeaderBar">
<span>{{lang 'hover.addshow'}}</span>
<button id="helpBtn" title="{{lang 'general.help'}}" onClick="help('projects');"><i class="far fa-question-circle"></i>&nbsp;</button>
</div>
<form id="projectForm">
<table class="formTable" >
<tr>
<td class="infoTD vcenter">Project name</td>
<td>
<input type="text" class="gcinput" id="projectName" name="projectName" required placeholder="Name of the project"/>
</td>
</tr>
<tr>
<td class="infoTD">Format</td>
<td>
<div id="radios">
<div>
<input type="radio" id="formatSPX" name="projectFormat" value="SPX" checked>
<label for="formatSPX">SPX Template</label>
</div>
<div>
<input type="radio" id="formatOGRAF" name="projectFormat" value="OGRAF">
<label for="formatOGRAF">OGraf</label>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: right;">
<button type="button" class="thisBtns btn ripple bg_grey" id="cancelForm">{{lang 'button.cancel'}}</button>
<button type="submit" class="thisBtns btn ripple bg_green">Create</button>
</td>
</tr>
</table>
</form>
</div>
</div><!-- overlay ended-->
views/partials/rundownComment copy.handlebars
+70
View File
@@ -0,0 +1,70 @@
<div id="commentRow"
class = "commentrow row_accent0"
ondblclick = "ToggleExpand(this);"
onmouseover = "tip('{{lang 'hover.item'}}');">
<form name="comment" id="comment" method="post" action="/gc/saveItemChanges">
<div class="handle wide" id="commentItem" style="padding: 6px; padding-left:12px;">
<!-- COLLAPSED to small line-->
<div id="Collapsed" style="position:relative;">
<div class="vmid spxTableHeadsmall" style="text-transform:uppercase;">Rundown comment</div>
</div>
<!-- EXPANDED to an editor -->
<div id="Expanded" style="display: none;">
<table class="wide" style="border-spacing: 2px; margin-top:2px;">
<TR>
<TD colspan="3" class="vmid spxTableHeadsmall" style="height: 1.6em; text-transform:uppercase;">
<span>Opened comment</span>&nbsp;&nbsp;
</TD>
</TR>
<TR>
<TD width="65%" class="vtop">
<div class="wide HIDE">
<table class="wide spxTableHeadsmall">
<tr>
<td class="aright">ftype</td>
<td>
<input type="text" class="wide" name="RundownItem[DataFields][{{@index}}][ftype]" value="textarea"></td></tr>
</table>
</div>
<textarea rows="8"
name="commentContent"
ondblclick="event.stopPropagation();"
class="gcinput"> {{content}}</textarea><BR>
</TD>
<TD class="vtop">
<table class="wide" style="border-spacing: 5px; margin-top:0px;">
<tr>
<td colspan="2" class="vtop">
<button type="button"
onClick="saveTemplateItemChangesByElement(this.closest('.itemrow'));"
class="wide spxFlexItem btnsmall bg_grey15 ripple"
onmouseover="tip('{{lang 'hover.submitthis'}}');"
>{{lang 'button.save'}} </button>
</td>
</tr>
<tr>
<td>
Foo
</td>
<td>
Bar
</td>
</tr>
</table>
</TD>
<TD class="vtop center">
<i id="deleteLarge{{@index}}" class="l-icon far fa-trash-alt" data-spx-name="deletelarge" onClick="removeItemFromRundown(this.closest('.itemrow'));" onmouseover="tip('{{lang 'hover.deletethis'}}');"></i><BR>
</TD>
</TR>
</table>
</div>
</div>
</form>
</div>
views/partials/rundownForm.handlebars
+130
View File
@@ -0,0 +1,130 @@
<!-- This is the file browser modal overlay (used by view-showconfig) -->
<style>
#rundownWrapper {
padding: 0;
font-size: 1em;
border-radius: 0.4em;
border: 0px solid #ccc;
width: clamp(300px, 50vw, 800px);
height: clamp(250px, 25vh, 500px);
height: fit-content;
box-sizing: border-box;
}
#rundownWrapperHeaderBar {
width: 100%;
cursor: move;
color: white;
padding: 0.8em;
font-size: 0.8em;
background-color: rgba(0, 0, 0, 0.5);
position: relative;
}
.formTable {
width: 100%;
border-collapse: collapse;
padding: 0.5em;
border: 0px solid #ccc;
box-sizing: border-box;
}
.formTable tr td {
padding: 0.75em;
vertical-align: top;
border: 0px solid #ccc;
}
.infoTD {
width: 10%;
text-align: left;
padding: 1.5em 1.5em;
font-size: 0.8em;
white-space: nowrap;
}
#rundownName{
width: 100%;
padding: 0.2em 0.5em;
font-family: 'UI-Regular';
font-size: 1.0em;
border-radius: 0.2em;
}
input[type="radio"] {
accent-color: #43c748; /* Change the color of the radio button */
height: 1.2em;
width: 1.5em;
cursor: pointer;
}
#radios {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 0.4em;
}
.thisBtns {
margin: 0.5em;
padding: 0.5em 1em;
border-radius: 0.1em;
cursor: pointer;
}
#helpBtn {
right: 0.5em;
border: none;
color: white;
cursor: pointer;
font-size: 1.2em;
position: absolute;
background-color: transparent;
}
#helpBtn:hover {
color: #43c748;
}
label{
cursor: pointer;
}
.vcenter {
vertical-align: middle !important;
}
</style>
<script>
// Make the DIV element draggable:
document.addEventListener("DOMContentLoaded", function() {
dragElement(document.getElementById("rundownWrapper"));
});
</script>
<div class="overlay" id="rundownFormOverlay">
<div class="modal wrapper" id="rundownWrapper">
<div id="rundownWrapperHeaderBar">
<span>{{lang 'hover.addrundown'}}</span>
<button id="helpBtn" title="{{lang 'general.help'}}" onClick="help('projects');"><i class="far fa-question-circle"></i>&nbsp;</button>
</div>
<form id="rundownForm">
<table class="formTable" >
<tr>
<td class="infoTD vcenter">Rundown name</td>
<td>
<input type="text" class="gcinput" id="rundownName" name="rundownName" required placeholder="Name of the rundown"/>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: right;">
<button type="button" class="thisBtns btn ripple bg_grey" id="cancelForm">{{lang 'button.cancel'}}</button>
<button type="submit" class="thisBtns btn ripple bg_green">{{lang 'button.addplaylist'}}</button>
</td>
</tr>
</table>
</form>
</div>
</div><!-- overlay ended-->
views/partials/rundownOptions.handlebars
+50
View File
@@ -0,0 +1,50 @@
<div id="rdOptionsCollapsible">
<div style="padding: 1.0rem; font-size: 0.9rem;">
<table style="width: 100%;" cellspacing="12" border="0">
<tr>
<td width="20%" style="vertical-align: top;">
<span class="spxConfigHead">Comment</span>
</td>
<td>
<input type="text" class="wide bg_grey15 RDoptionsText" value="{{comment}}" placeholder="Experimental feature" />
</td>
</tr>
<tr>
<td width="20%" style="vertical-align: top;">
<span class="spxConfigHead inlineHelp"
onClick="help('lightmode');"
onmouseover="tip('{{lang 'hover.help'}}');"
>Light mode <i class="far fa-question-circle"></i></span>
</td>
<td class="spxConfigBody">
Light mode is an experimental, simplified version of the rundown, with less features
and it can be used for example on mobile devices or as a custom dock in OBS.<br>
<button class="btn ripple bg_blue"
style="margin-top: 0.5em; padding: 0.2em 1em;"
onClick="openLightModePanel();"
>Open panel</button>
</td>
</tr>
<!--
<tr>
<td width="30%">
<span class="spxConfigHead">Lock rundown from</span>
</td>
<td class="spxConfigHead">
[X] Content editing [X] Sorting [X] Adding and removing
</td>
</tr>
<tr>
<td width="30%">
<span class="spxConfigHead">Static background</span>
</td>
<td class="spxConfigHead">
Dropdown [V]
</td>
</tr>
-->
</table>
</div>
</div>
views/partials/socketserver.handlebars
+5
View File
@@ -0,0 +1,5 @@
<script src="/js/socket.io.js"></script>
<script>
var serverAddress = 'ws://{{ getServerAddress }}';
var socket = io(serverAddress);
</script>