diff --git a/README.md b/README.md index b595649..f2e989e 100644 --- a/README.md +++ b/README.md @@ -1 +1,42 @@ -# obs-timer-controller \ No newline at end of file +# obs-timer-controller + +

This repository is used for creating dynamic browser sources related to timers, ideal for use in OBS (Open Broadcaster Software).

+ +
+GitHub package.json version +GitHub last commit (by committer) +GitHub release (latest by SemVer including pre-releases) +GitHub watchers +GitHub forks +GitHub Repo stars +
+Made with NodeJS +Made with HTML +Made with CSS +
+NodeJS version +npm version +
+ +## Collaborators + +

XtoManuel

+ + +___ + +### Description + +This code allows you to create timers, countdowns, countdowns to a specific time, and display the current time. Each of these features comes with a browser source for OBS, which you can preview in your browser and configure to your needs. + +One of the additional functions of this repository is the ability to modify the timers through events sent from a StreamDeck or a similar tool using websockets. + +### About the Code + +I have chosen to publish this code to make it accessible for free, openly, and as open-source. These codes I have developed have helped me continue learning, and since it doesn't entail any financial cost for me, there will also be no paid features created. It will be open to anyone who wants to use it and collaborate in improving the code. + +The codes have been created with my current knowledge and may contain errors or areas that need improvement. I have worked on this code in my free time. + +### Documentation + +~~WIKI~~ (In construction) \ No newline at end of file diff --git a/core/client.js b/core/client.js index a6baf07..4d3b258 100644 --- a/core/client.js +++ b/core/client.js @@ -35,6 +35,7 @@ socket.addEventListener('message', (event) => { // Configuration and translation switchTheme.checked = message.config.themedark + buttonClose.title = translateElements.home.close if (message.config.themedark) { document.body.classList.remove('light-theme') document.body.classList.add('dark-theme') @@ -50,8 +51,12 @@ socket.addEventListener('message', (event) => { option.textContent = message.formats.langs[format] languageSelector.appendChild(option) }) - languageSelector.value = message.config.lang - document.documentElement.lang = message.config.lang + languageSelector.value = Object.keys(message.formats.langs).includes(message.config.lang) + ? message.config.lang + : 'en' + document.documentElement.lang = Object.keys(message.formats.langs).includes(message.config.lang) + ? message.config.lang + : 'en' titleCrono.textContent = translateElements.home.cronoTitle titleCdown.textContent = translateElements.home.cdownTitle diff --git a/core/index.html b/core/index.html index 5f4f5da..73cd91b 100644 --- a/core/index.html +++ b/core/index.html @@ -10,6 +10,11 @@ href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" /> Inicio +
@@ -17,6 +22,14 @@ + diff --git a/core/template/cdown/control/blank.html b/core/template/cdown/control/blank.html index b0c1366..1e32f96 100644 --- a/core/template/cdown/control/blank.html +++ b/core/template/cdown/control/blank.html @@ -4,6 +4,11 @@ URL Action + diff --git a/core/template/cdown/control/control.js b/core/template/cdown/control/control.js index af96642..3af8b38 100644 --- a/core/template/cdown/control/control.js +++ b/core/template/cdown/control/control.js @@ -75,8 +75,12 @@ socket.addEventListener('message', (event) => { option.textContent = message.formats.langs[format] selectorLang.appendChild(option) }) - selectorLang.value = message.config.lang - document.documentElement.lang = message.config.lang + selectorLang.value = Object.keys(message.formats.langs).includes(message.config.lang) + ? message.config.lang + : 'en' + document.documentElement.lang = Object.keys(message.formats.langs).includes(message.config.lang) + ? message.config.lang + : 'en' controlButton.textContent = translateElements.crono.buttons.start resetButton.textContent = translateElements.crono.buttons.reset diff --git a/core/template/cdown/control/index.html b/core/template/cdown/control/index.html index c3a5b2d..60cda1c 100644 --- a/core/template/cdown/control/index.html +++ b/core/template/cdown/control/index.html @@ -14,6 +14,11 @@ crossorigin="anonymous" > +
diff --git a/core/template/cdown/view/client.js b/core/template/cdown/view/client.js index df4c040..492550e 100644 --- a/core/template/cdown/view/client.js +++ b/core/template/cdown/view/client.js @@ -27,7 +27,9 @@ socket.addEventListener('message', (event) => { } if (message.action === 'sendVariables' && message.classElement === classElement && message.config) { - document.documentElement.lang = message.config.lang + document.documentElement.lang = Object.keys(message.formats.langs).includes(message.config.lang) + ? message.config.lang + : 'en' } if (message[classElement].milliseconds !== undefined) { diff --git a/core/template/cdown/view/index.html b/core/template/cdown/view/index.html index e18f7dd..240ceab 100644 --- a/core/template/cdown/view/index.html +++ b/core/template/cdown/view/index.html @@ -9,6 +9,11 @@ crossorigin="anonymous" > + diff --git a/core/template/cdowntime/control/blank.html b/core/template/cdowntime/control/blank.html index b0c1366..1e32f96 100644 --- a/core/template/cdowntime/control/blank.html +++ b/core/template/cdowntime/control/blank.html @@ -4,6 +4,11 @@ URL Action + diff --git a/core/template/cdowntime/control/control.js b/core/template/cdowntime/control/control.js index 37df142..5e9506d 100644 --- a/core/template/cdowntime/control/control.js +++ b/core/template/cdowntime/control/control.js @@ -74,8 +74,12 @@ socket.addEventListener('message', (event) => { option.textContent = message.formats.langs[format] selectorLang.appendChild(option) }) - selectorLang.value = message.config.lang - document.documentElement.lang = message.config.lang + selectorLang.value = Object.keys(message.formats.langs).includes(message.config.lang) + ? message.config.lang + : 'en' + document.documentElement.lang = Object.keys(message.formats.langs).includes(message.config.lang) + ? message.config.lang + : 'en' if (elementVariables && typeof elementVariables === 'object') { checkHexColor = elementVariables.colorText diff --git a/core/template/cdowntime/control/index.html b/core/template/cdowntime/control/index.html index 9f78624..57f46a6 100644 --- a/core/template/cdowntime/control/index.html +++ b/core/template/cdowntime/control/index.html @@ -14,6 +14,11 @@ crossorigin="anonymous" > +
diff --git a/core/template/cdowntime/view/client.js b/core/template/cdowntime/view/client.js index 8a92051..df5c846 100644 --- a/core/template/cdowntime/view/client.js +++ b/core/template/cdowntime/view/client.js @@ -26,7 +26,9 @@ socket.addEventListener('message', (event) => { } if (message.action === 'sendVariables' && message.classElement === classElement && message.config) { - document.documentElement.lang = message.config.lang + document.documentElement.lang = Object.keys(message.formats.langs).includes(message.config.lang) + ? message.config.lang + : 'en' } if (message[classElement].endDatetime !== undefined) { diff --git a/core/template/cdowntime/view/index.html b/core/template/cdowntime/view/index.html index e18f7dd..240ceab 100644 --- a/core/template/cdowntime/view/index.html +++ b/core/template/cdowntime/view/index.html @@ -9,6 +9,11 @@ crossorigin="anonymous" > + diff --git a/core/template/crono/control/blank.html b/core/template/crono/control/blank.html index b0c1366..1e32f96 100644 --- a/core/template/crono/control/blank.html +++ b/core/template/crono/control/blank.html @@ -4,6 +4,11 @@ URL Action + diff --git a/core/template/crono/control/control.js b/core/template/crono/control/control.js index 7875383..689bdf2 100644 --- a/core/template/crono/control/control.js +++ b/core/template/crono/control/control.js @@ -73,8 +73,12 @@ socket.addEventListener('message', (event) => { option.textContent = message.formats.langs[format] languageSelector.appendChild(option) }) - languageSelector.value = message.config.lang - document.documentElement.lang = message.config.lang + languageSelector.value = Object.keys(message.formats.langs).includes(message.config.lang) + ? message.config.lang + : 'en' + document.documentElement.lang = Object.keys(message.formats.langs).includes(message.config.lang) + ? message.config.lang + : 'en' controlButton.textContent = translateElements.crono.buttons.start resetButton.textContent = translateElements.crono.buttons.reset diff --git a/core/template/crono/control/index.html b/core/template/crono/control/index.html index c72a80b..542db62 100644 --- a/core/template/crono/control/index.html +++ b/core/template/crono/control/index.html @@ -10,6 +10,11 @@ href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" /> +
diff --git a/core/template/crono/view/client.js b/core/template/crono/view/client.js index f935f08..d070a88 100644 --- a/core/template/crono/view/client.js +++ b/core/template/crono/view/client.js @@ -25,7 +25,9 @@ socket.addEventListener('message', (event) => { } if (message.action === 'sendVariables' && message.classElement === classElement && message.config) { - document.documentElement.lang = message.config.lang + document.documentElement.lang = Object.keys(message.formats.langs).includes(message.config.lang) + ? message.config.lang + : 'en' } if (message[classElement].milliseconds !== undefined) { diff --git a/core/template/crono/view/index.html b/core/template/crono/view/index.html index 43079ed..6009ce0 100644 --- a/core/template/crono/view/index.html +++ b/core/template/crono/view/index.html @@ -6,6 +6,11 @@ + diff --git a/core/template/time/control/blank.html b/core/template/time/control/blank.html index b0c1366..1e32f96 100644 --- a/core/template/time/control/blank.html +++ b/core/template/time/control/blank.html @@ -4,6 +4,11 @@ URL Action + diff --git a/core/template/time/control/control.js b/core/template/time/control/control.js index 90a591a..4c8f059 100644 --- a/core/template/time/control/control.js +++ b/core/template/time/control/control.js @@ -71,8 +71,12 @@ socket.addEventListener('message', (event) => { option.textContent = message.formats.langs[format] langSelector.appendChild(option) }) - langSelector.value = message.config.lang - document.documentElement.lang = message.config.lang + langSelector.value = Object.keys(message.formats.langs).includes(message.config.lang) + ? message.config.lang + : 'en' + document.documentElement.lang = Object.keys(message.formats.langs).includes(message.config.lang) + ? message.config.lang + : 'en' if (elementVariables && typeof elementVariables === 'object') { checkHexColor = elementVariables.colorText diff --git a/core/template/time/control/index.html b/core/template/time/control/index.html index 9209539..ace01e9 100644 --- a/core/template/time/control/index.html +++ b/core/template/time/control/index.html @@ -14,6 +14,11 @@ crossorigin="anonymous" > +
diff --git a/core/template/time/view/client.js b/core/template/time/view/client.js index de9872c..011990f 100644 --- a/core/template/time/view/client.js +++ b/core/template/time/view/client.js @@ -26,7 +26,9 @@ socket.addEventListener('message', (event) => { } if (message.action === 'sendVariables' && message.classElement === classElement && message.config) { - document.documentElement.lang = message.config.lang + document.documentElement.lang = Object.keys(message.formats.langs).includes(message.config.lang) + ? message.config.lang + : 'en' } if (message[classElement].timezone !== undefined) { diff --git a/core/template/time/view/index.html b/core/template/time/view/index.html index e18f7dd..240ceab 100644 --- a/core/template/time/view/index.html +++ b/core/template/time/view/index.html @@ -9,6 +9,11 @@ crossorigin="anonymous" > + diff --git a/core/topbar.css b/core/topbar.css index af5283a..cd88969 100644 --- a/core/topbar.css +++ b/core/topbar.css @@ -16,7 +16,7 @@ border: 2px solid #f44336; border-radius: 5px; color: white; - vertical-align: top; + vertical-align: bottom; margin-top: 3.5px; cursor: pointer; flex-grow: 1; @@ -27,6 +27,28 @@ border: 2px solid #d9362e; } +.link-button { + font-size: 15px; + background-color: #000; + border: 2px solid #000; + border-radius: 5px; + color: white; + vertical-align: bottom; + margin-top: 3.5px; + cursor: pointer; + flex-grow: 1; +} + +.link-button:hover { + background-color: #444; /* Fondo gris más oscuro al pasar el ratón */ + border: 2px solid #444; +} + +#github-button { + font-size: 15px; + color: white; +} + .language-span { font-size: 30px; /* Tamaño de fuente */ margin-right: 10px; diff --git a/core/translates/en.yaml b/core/translates/en.yaml index 1d4250d..0c31e22 100644 --- a/core/translates/en.yaml +++ b/core/translates/en.yaml @@ -1,12 +1,13 @@ home: - cronoTitle: TIMERS - cdownTitle: COUNTDOWNS + close: Close the window and stop the code + cronoTitle: CLOCKS + cdownTitle: TIMERS cdowntimeTitle: TIME UNTIL... - twitchextTitle: TWITCH EXTENSIBLE + twitchextTitle: EXTENSIBLE TWITCH timeTitle: CURRENT TIME notycopycrono: URL copied to clipboard crono: buttons: start: Start pause: Pause - reset: Reset \ No newline at end of file + reset: Reset diff --git a/core/translates/es.yaml b/core/translates/es.yaml index 29ad6d2..0b88dce 100644 --- a/core/translates/es.yaml +++ b/core/translates/es.yaml @@ -1,4 +1,5 @@ home: + close: Cierra la ventana y detiene el código cronoTitle: CRONÓMETROS cdownTitle: TEMPORIZADORES cdowntimeTitle: TIEMPO HASTA... diff --git a/package.json b/package.json index 9e10c11..5d8215a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "obs-timer-controller", - "version": "1.0.0", + "version": "1.0.1", "description": "Handling browser fonts for OBS related to timers and countdowns.", "main": "server.js", "repository": { @@ -22,7 +22,7 @@ "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "node": "node . test", - "pkg": "electron-packager . OBS-Timer-Controller --platform=win32 --arch=x64 --out=dist --overwrite --icon=icon.ico --app-version=1.0.0 --author=\"XtoManuel\" --description=\"Handling browser fonts for OBS related to timers and countdowns.\"" + "pkg": "electron-packager . OBS-Timer-Controller --platform=win32 --arch=x64 --out=dist --overwrite --icon=icon.ico --app-version=1.0.1 --author=\"XtoManuel\" --description=\"Handling browser fonts for OBS related to timers and countdowns.\"" }, "author": "XtoManuel", "license": "ISC", diff --git a/server.js b/server.js index 01529e4..9e92bde 100644 --- a/server.js +++ b/server.js @@ -15,6 +15,9 @@ if (argsv[0] !== 'test') { process.chdir(executablePath) } +// The icons for the web page titles are obtained from: +// https://www.iconfinder.com/search?q=&designer=kmgdesignid&price=free + const { loadDataFromYAML, saveVariablesToYAML, @@ -68,6 +71,8 @@ wss.on('connection', (ws) => { ws.on('message', (message) => { const data = JSON.parse(message) + GlobalVariables = loadDataFromYAML((argsv[0] === 'test') ? './core/db.yaml' : './resources/app/core/db.yaml') + if (data.action === 'reloadPage') { wss.clients.forEach((client) => { if (client.readyState === WebSocket.OPEN) { @@ -317,6 +322,7 @@ app.get('/:classElement/control', (req, res) => { app.get('/:classElement/control&:request', (req, res) => { const classElement = req.params.classElement const request = req.params.request + GlobalVariables = loadDataFromYAML((argsv[0] === 'test') ? './core/db.yaml' : './resources/app/core/db.yaml') // Here you can check the value of 'request' and perform the corresponding action if (request === 'start' && !classElement.startsWith('cdowntime') && !classElement.startsWith('time')) {