BrowserSourcesForOBS · XtoManuel · Oct 8, 2023 · Oct 8, 2023 · Oct 8, 2023 · Oct 8, 2023
diff --git a/README.md b/README.md
@@ -1 +1,42 @@
-# obs-timer-controller
+# obs-timer-controller
+
+<h2 align="center">This repository is used for creating dynamic browser sources related to timers, ideal for use in OBS (Open Broadcaster Software).</h2>
+
+<div align="center">
+<img alt="GitHub package.json version" src="https://img.shields.io/github/package-json/v/BrowserSourcesForOBS/obs-timer-controller?style=for-the-badge&link=https%3A%2F%2Fgithub.com%2FBrowserSourcesForOBS%2Fobs-timer-controller">
+<img alt="GitHub last commit (by committer)" src="https://img.shields.io/github/last-commit/BrowserSourcesForOBS/obs-timer-controller?style=for-the-badge&link=https%3A%2F%2Fgithub.com%2FBrowserSourcesForOBS%2Fobs-timer-controller">
+<img alt="GitHub release (latest by SemVer including pre-releases)" src="https://img.shields.io/github/downloads-pre/BrowserSourcesForOBS/obs-timer-controller/latest/total?style=for-the-badge&link=https%3A%2F%2Fgithub.com%2FBrowserSourcesForOBS%2Fobs-timer-controller%2freleases%2Flatest">
+<img alt="GitHub watchers" src="https://img.shields.io/github/watchers/BrowserSourcesForOBS/obs-timer-controller?style=for-the-badge&link=https%3A%2F%2Fgithub.com%2FBrowserSourcesForOBS%2Fobs-timer-controller">
+<img alt="GitHub forks" src="https://img.shields.io/github/forks/BrowserSourcesForOBS/obs-timer-controller?style=for-the-badge&link=https%3A%2F%2Fgithub.com%2FBrowserSourcesForOBS%2Fobs-timer-controller">
+<img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/BrowserSourcesForOBS/obs-timer-controller?style=for-the-badge&link=https%3A%2F%2Fgithub.com%2FBrowserSourcesForOBS%2Fobs-timer-controller">
+<br>
+<img alt="Made with NodeJS" src="https://img.shields.io/badge/MADE%20WITH-NodeJS-yellow?style=for-the-badge&logo=javascript&link=https%3A%2F%2Fnodejs.org">
+<img alt="Made with HTML" src="https://img.shields.io/badge/MADE%20WITH-HTML-orange?style=for-the-badge&logo=html5">
+<img alt="Made with CSS" src="https://img.shields.io/badge/MADE%20WITH-CSS-blue?style=for-the-badge&logo=css3">
+<br>
+<img alt="NodeJS version" src="https://img.shields.io/badge/VERSION-18.18.0%20LTS-yellow?style=for-the-badge&logo=javascript&link=https%3A%2F%2Fnodejs.org%2Fes%2Fdownload">
+<img alt="npm version" src="https://img.shields.io/badge/VERSION-10.2.0-red?style=for-the-badge&logo=npm&link=https%3A%2F%2Fwww.npmjs.com">
+</div>
+
+## Collaborators
+
+<div align="center"><h3><a href="https://github.com/XtoMHA96"><img src="https://github.com/XtoMHA96.png?size=50" alt="" style="vertical-align:middle; border-radius:50%" height="50"></a><span style="display:inline-block; width: 10px;"></span> <a href="https://github.com/XtoMHA96"><b>XtoManuel</b></a></h3></div>
+<!--&nbsp;&nbsp;&nbsp;&nbsp;-->
+
+___
+
+### 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)
diff --git 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
@@ -10,13 +10,26 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
     />
     <title>Inicio</title>
+    <link
+      rel="icon"
+      href="https://cdn1.iconfinder.com/data/icons/user-interface-flat-5/32/Home_ui_user_interface_app_button_web-512.png"
+      type="image/png"
+    />
   </head>
   <body>
     <div class="top-bar">
       <span class="left-button">
         <button class="close-button" id="stop-code">
           <i class="fas fa-x"></i>
         </button>
+        <button class="link-button" title="GitHub">
+          <a
+            href="https://github.com/BrowserSourcesForOBS/obs-timer-controller"
+            target="_blank"
+            id="github-button"
+            ><i class="fa-brands fa-github"></i
+          ></a>
+        </button>
       </span>
       <span class="language-span"
         ><i class="fas fa-language"></i>

diff --git a/core/template/cdown/control/blank.html b/core/template/cdown/control/blank.html
@@ -4,6 +4,11 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>URL Action</title>
+    <link
+      rel="icon"
+      href="https://cdn4.iconfinder.com/data/icons/internet-security-flat-2/32/Internet_Security_hyper_link_web_chain_connect-512.png"
+      type="image/png"
+    />
   </head>
   <body>
     <!-- Esta es una página en blanco -->

diff --git 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
@@ -14,6 +14,11 @@
       crossorigin="anonymous"
     ></script>
     <title id="titlePage"></title>
+    <link
+      rel="icon"
+      href="https://cdn4.iconfinder.com/data/icons/internet-security-flat-2/32/Internet_Security_Gear_setting_option_web_engine-512.png"
+      type="image/png"
+    />
   </head>
   <body>
     <div class="top-bar">

diff --git 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
@@ -9,6 +9,11 @@
       crossorigin="anonymous"
     ></script>
     <title id="titlePage"></title>
+    <link
+      rel="icon"
+      href="https://cdn4.iconfinder.com/data/icons/internet-security-flat-2/32/Internet_Security_business_focus_eye_view_vision-512.png"
+      type="image/png"
+    />
   </head>
   <body>
     <span id="test"></span>

diff --git a/core/template/cdowntime/control/blank.html b/core/template/cdowntime/control/blank.html
@@ -4,6 +4,11 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>URL Action</title>
+    <link
+      rel="icon"
+      href="https://cdn4.iconfinder.com/data/icons/internet-security-flat-2/32/Internet_Security_hyper_link_web_chain_connect-512.png"
+      type="image/png"
+    />
   </head>
   <body>
     <!-- Esta es una página en blanco -->

diff --git 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
@@ -14,6 +14,11 @@
       crossorigin="anonymous"
     ></script>
     <title id="titlePage"></title>
+    <link
+      rel="icon"
+      href="https://cdn4.iconfinder.com/data/icons/internet-security-flat-2/32/Internet_Security_Gear_setting_option_web_engine-512.png"
+      type="image/png"
+    />
   </head>
   <body>
     <div class="top-bar">

diff --git 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
@@ -9,6 +9,11 @@
       crossorigin="anonymous"
     ></script>
     <title id="titlePage"></title>
+    <link
+      rel="icon"
+      href="https://cdn4.iconfinder.com/data/icons/internet-security-flat-2/32/Internet_Security_business_focus_eye_view_vision-512.png"
+      type="image/png"
+    />
   </head>
   <body>
     <span id="test"></span>

diff --git a/core/template/crono/control/blank.html b/core/template/crono/control/blank.html
@@ -4,6 +4,11 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>URL Action</title>
+    <link
+      rel="icon"
+      href="https://cdn4.iconfinder.com/data/icons/internet-security-flat-2/32/Internet_Security_hyper_link_web_chain_connect-512.png"
+      type="image/png"
+    />
   </head>
   <body>
     <!-- Esta es una página en blanco -->

diff --git 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
@@ -10,6 +10,11 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
     />
     <title id="titlePage"></title>
+    <link
+      rel="icon"
+      href="https://cdn4.iconfinder.com/data/icons/internet-security-flat-2/32/Internet_Security_Gear_setting_option_web_engine-512.png"
+      type="image/png"
+    />
   </head>
   <body>
     <div class="top-bar">

diff --git 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
@@ -6,6 +6,11 @@
     <link rel="stylesheet" href="styles.css" />
     <script crossorigin="anonymous"></script>
     <title id="titlePage"></title>
+    <link
+      rel="icon"
+      href="https://cdn4.iconfinder.com/data/icons/internet-security-flat-2/32/Internet_Security_business_focus_eye_view_vision-512.png"
+      type="image/png"
+    />
   </head>
   <body>
     <span id="test"></span>

diff --git a/core/template/time/control/blank.html b/core/template/time/control/blank.html
@@ -4,6 +4,11 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>URL Action</title>
+    <link
+      rel="icon"
+      href="https://cdn4.iconfinder.com/data/icons/internet-security-flat-2/32/Internet_Security_hyper_link_web_chain_connect-512.png"
+      type="image/png"
+    />
   </head>
   <body>
     <!-- Esta es una página en blanco -->

diff --git 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
@@ -14,6 +14,11 @@
       crossorigin="anonymous"
     ></script>
     <title id="titlePage"></title>
+    <link
+      rel="icon"
+      href="https://cdn4.iconfinder.com/data/icons/internet-security-flat-2/32/Internet_Security_Gear_setting_option_web_engine-512.png"
+      type="image/png"
+    />
   </head>
   <body>
     <div class="top-bar">

diff --git 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
@@ -9,6 +9,11 @@
       crossorigin="anonymous"
     ></script>
     <title id="titlePage"></title>
+    <link
+      rel="icon"
+      href="https://cdn4.iconfinder.com/data/icons/internet-security-flat-2/32/Internet_Security_business_focus_eye_view_vision-512.png"
+      type="image/png"
+    />
   </head>
   <body>
     <span id="test"></span>

diff --git 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;