v1.0.3

- Added extensible browser fonts - Bugfixes
BrowserSourcesForOBS · Oct 11, 2023 · a85a763 · a85a763
1 parent 695157b
commit a85a763
Show file tree

Hide file tree

Showing 13 changed files with 163 additions and 49 deletions.
diff --git a/core/index.html b/core/index.html
@@ -22,22 +22,24 @@
         <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>
-        <button class="link-button" id="button-wiki">
-          <a
-            href="https://github.com/BrowserSourcesForOBS/obs-timer-controller/wiki"
-            target="_blank"
-            id="wiki-button"
-            ><i class="fas fa-book-open"></i
-          ></a>
-        </button>
+        <a
+          href="https://github.com/BrowserSourcesForOBS/obs-timer-controller"
+          target="_blank"
+          id="github-button"
+        >
+          <button class="link-button" title="GitHub">
+            <i class="fa-brands fa-github"></i>
+          </button>
+        </a>
+        <a
+          href="https://github.com/BrowserSourcesForOBS/obs-timer-controller/wiki"
+          target="_blank"
+          id="wiki-button"
+        >
+          <button class="link-button" id="button-wiki">
+            <i class="fas fa-book-open"></i>
+          </button>
+        </a>
       </span>
       <span class="language-span"
         ><i class="fas fa-language"></i>

diff --git a/core/template/cdown/control/control.js b/core/template/cdown/control/control.js
@@ -101,7 +101,7 @@ socket.addEventListener('message', (event) => {
         // Perform necessary actions with the variables here
         textMsg.textContent = elementVariables.msgEnd
         if (elementVariables.msgEnd === '') {
-          textMsg.textContent = translateElements.timer.ph_msgend
+          textMsg.textContent = translateElements.timer.phMsgEnd
           textMsg.style.color = '#555'
         } else { textMsg.style.color = '#000' }
         timeText.value = MsToText(elementVariables.textMilliseconds)
@@ -122,7 +122,7 @@ socket.addEventListener('message', (event) => {
       if (message[classElement].status !== 'started') {
         textMsg.textContent = message[classElement].msgEnd
         if (message[classElement].msgEnd === '') {
-          textMsg.textContent = translateElements.timer.ph_msgend
+          textMsg.textContent = translateElements.timer.phMsgEnd
           textMsg.style.color = '#555'
         } else { textMsg.style.color = '#000' }
         timeText.value = MsToText(message[classElement].textMilliseconds)
@@ -218,7 +218,7 @@ subContainer.addEventListener('click', (event) => {
 })
 
 textMsg.addEventListener('focus', () => {
-  if (textMsg.textContent === translateElements.timer.ph_msgend) {
+  if (textMsg.textContent === translateElements.timer.phMsgEnd) {
     textMsg.textContent = ''
     textMsg.style.color = '#000'
   }
@@ -227,7 +227,7 @@ textMsg.addEventListener('focus', () => {
 textMsg.addEventListener('blur', () => {
   socket.send(JSON.stringify({ action: 'editMsgCdown', msg: textMsg.textContent, classElement }))
   if (textMsg.textContent === '') {
-    textMsg.textContent = translateElements.timer.ph_msgend
+    textMsg.textContent = translateElements.timer.phMsgEnd
     textMsg.style.color = '#555'
   } else { textMsg.style.color = '#000' }
 })

diff --git a/core/template/cdowntime/control/control.js b/core/template/cdowntime/control/control.js
@@ -107,7 +107,7 @@ socket.addEventListener('message', (event) => {
         // Perform necessary actions with the variables here
         textMsg.textContent = elementVariables.msgEnd
         if (elementVariables.msgEnd === '') {
-          textMsg.textContent = translateElements.timer.ph_msgend
+          textMsg.textContent = translateElements.timer.phMsgEnd
           textMsg.style.color = '#555'
         } else { textMsg.style.color = '#000' }
         timeData.value = new Date(elementVariables.endDatetime).toLocaleString('en-CA', { timeZone: elementVariables.timezone, hour12: false }).replace(/,\s/, 'T')
@@ -189,7 +189,7 @@ subContainer.addEventListener('click', (event) => {
 })
 
 textMsg.addEventListener('focus', () => {
-  if (textMsg.textContent === translateElements.timer.ph_msgend) {
+  if (textMsg.textContent === translateElements.timer.phMsgEnd) {
     textMsg.textContent = ''
     textMsg.style.color = '#000'
   }
@@ -198,7 +198,7 @@ textMsg.addEventListener('focus', () => {
 textMsg.addEventListener('blur', () => {
   socket.send(JSON.stringify({ action: 'editMsgCdownTime', msg: textMsg.textContent, classElement }))
   if (textMsg.textContent === '') {
-    textMsg.textContent = translateElements.timer.ph_msgend
+    textMsg.textContent = translateElements.timer.phMsgEnd
     textMsg.style.color = '#555'
   } else { textMsg.style.color = '#000' }
 })

diff --git a/core/template/extensible/control/control.js b/core/template/extensible/control/control.js
@@ -3,8 +3,13 @@ const resetButton = document.getElementById('resetButton')
 const timeText = document.getElementById('timeText')
 const addContainer = document.getElementById('buttonsaddtime')
 const subContainer = document.getElementById('buttonssubtime')
+const checkboxStopAdd = document.getElementById('checkboxStopAdd')
+const checkboxLabelStopAdd = document.getElementById('checkboxLabelStopAdd')
+const checkboxPauseAdd = document.getElementById('checkboxPauseAdd')
+const checkboxLabelPauseAdd = document.getElementById('checkboxLabelPauseAdd')
 const textMsg = document.getElementById('text-endmsg')
-const formatSelector = document.getElementById('formatSelector')
+const formatSelectorCrono = document.getElementById('formatSelectorCrono')
+const formatSelectorCdown = document.getElementById('formatSelectorCdown')
 const fontSelect = document.getElementById('fontSelect') // Font selector
 const fontSize = document.getElementById('fontSize')
 const boldButton = document.getElementById('boldButton')
@@ -84,28 +89,41 @@ socket.addEventListener('message', (event) => {
 
       controlButton.textContent = translateElements.timer.buttons.start
       resetButton.textContent = translateElements.timer.buttons.reset
+      checkboxLabelStopAdd.textContent = translateElements.timer.enableStopAdd
+      checkboxLabelPauseAdd.textContent = translateElements.timer.enablePauseAdd
 
       if (elementVariables && typeof elementVariables === 'object') {
         checkTextTime = MsToText(elementVariables.textMilliseconds)
         checkHexColor = elementVariables.colorText
 
         // Format selector options
-        formatSelector.innerHTML = ''
+        formatSelectorCrono.innerHTML = ''
         message.formats[classElement.replace(/\d/g, '')].forEach((format) => {
           const option = document.createElement('option')
           option.value = format
           option.textContent = format
-          formatSelector.appendChild(option)
+          formatSelectorCrono.appendChild(option)
+        })
+
+        formatSelectorCdown.innerHTML = ''
+        message.formats[classElement.replace(/\d/g, '')].forEach((format) => {
+          const option = document.createElement('option')
+          option.value = format
+          option.textContent = format
+          formatSelectorCdown.appendChild(option)
         })
 
         // Perform necessary actions with the variables here
         textMsg.textContent = elementVariables.msgEnd
         if (elementVariables.msgEnd === '') {
-          textMsg.textContent = translateElements.timer.ph_msgend
+          textMsg.textContent = translateElements.timer.phMsgEnd
           textMsg.style.color = '#555'
         } else { textMsg.style.color = '#000' }
         timeText.value = MsToText(elementVariables.textMilliseconds)
-        formatSelector.value = elementVariables.formatTime
+        // checkboxStopAdd.checked = elementVariables.enableStopAdd
+        // checkboxPauseAdd.checked = elementVariables.enablePauseAdd
+        formatSelectorCrono.value = elementVariables.formatTimeCrono
+        formatSelectorCdown.value = elementVariables.formatTimeCdown
         fontSelect.value = elementVariables.font
         fontSize.value = elementVariables.size
         textFormat(elementVariables)
@@ -122,11 +140,14 @@ socket.addEventListener('message', (event) => {
       if (message[classElement].status !== 'started') {
         textMsg.textContent = message[classElement].msgEnd
         if (message[classElement].msgEnd === '') {
-          textMsg.textContent = translateElements.timer.ph_msgend
+          textMsg.textContent = translateElements.timer.phMsgEnd
           textMsg.style.color = '#555'
         } else { textMsg.style.color = '#000' }
         timeText.value = MsToText(message[classElement].textMilliseconds)
-        formatSelector.value = message[classElement].formatTime
+        checkboxStopAdd.checked = message[classElement].enableStopAdd
+        checkboxPauseAdd.checked = message[classElement].enablePauseAdd
+        formatSelectorCrono.value = message[classElement].formatTimeCrono
+        formatSelectorCdown.value = message[classElement].formatTimeCdown
         fontSelect.value = message[classElement].font
         fontSize.value = message[classElement].size
         colorPicker.value = message[classElement].colorText
@@ -136,7 +157,8 @@ socket.addEventListener('message', (event) => {
       textFormat(message[classElement])
       // Update the control button and other elements based on the received message
       updateControlButton(message[classElement].status)
-      formatSelector.value = message[classElement].formatTime
+      formatSelectorCrono.value = message[classElement].formatTimeCrono
+      formatSelectorCdown.value = message[classElement].formatTimeCdown
     }
   } else {
     window.location.reload()
@@ -217,8 +239,16 @@ subContainer.addEventListener('click', (event) => {
   }
 })
 
+checkboxStopAdd.addEventListener('change', () => {
+  socket.send(JSON.stringify({ action: 'checkboxStopAdd', value: checkboxStopAdd.checked, classElement }))
+})
+
+checkboxPauseAdd.addEventListener('change', () => {
+  socket.send(JSON.stringify({ action: 'checkboxPauseAdd', value: checkboxPauseAdd.checked, classElement }))
+})
+
 textMsg.addEventListener('focus', () => {
-  if (textMsg.textContent === translateElements.timer.ph_msgend) {
+  if (textMsg.textContent === translateElements.timer.phMsgEnd) {
     textMsg.textContent = ''
     textMsg.style.color = '#000'
   }
@@ -227,13 +257,17 @@ textMsg.addEventListener('focus', () => {
 textMsg.addEventListener('blur', () => {
   socket.send(JSON.stringify({ action: 'editMsgExtensible', msg: textMsg.textContent, classElement }))
   if (textMsg.textContent === '') {
-    textMsg.textContent = translateElements.timer.ph_msgend
+    textMsg.textContent = translateElements.timer.phMsgEnd
     textMsg.style.color = '#555'
   } else { textMsg.style.color = '#000' }
 })
 
-formatSelector.addEventListener('change', () => {
-  socket.send(JSON.stringify({ action: 'changeFormat', format: formatSelector.value, classElement }))
+formatSelectorCrono.addEventListener('change', () => {
+  socket.send(JSON.stringify({ action: 'changeFormatExtCrono', format: formatSelectorCrono.value, classElement }))
+})
+
+formatSelectorCdown.addEventListener('change', () => {
+  socket.send(JSON.stringify({ action: 'changeFormatExtCdown', format: formatSelectorCdown.value, classElement }))
 })
 
 fontSelect.addEventListener('change', () => {

diff --git a/core/template/extensible/control/index.html b/core/template/extensible/control/index.html
@@ -61,13 +61,34 @@
         <button id="subtime-5s" class="subtime-button">-5s</button>
         <button id="subtime-1s" class="subtime-button">-1s</button>
       </div>
+      <div class="space-between">
+        <input type="checkbox" id="checkboxStopAdd" class="checkboxBox" />
+        <label
+          for="checkboxStopAdd"
+          id="checkboxLabelStopAdd"
+          class="checkboxText"
+        ></label>
+      </div>
+      <div class="space-between">
+        <input type="checkbox" id="checkboxPauseAdd" class="checkboxBox" />
+        <label
+          for="checkboxPauseAdd"
+          id="checkboxLabelPauseAdd"
+          class="checkboxText"
+        ></label>
+      </div>
       <br />
       <div class="text-input-container">
         <div id="text-endmsg" class="paragraph" contenteditable="true"></div>
       </div>
       <br />
-      <div>
-        <select id="formatSelector"></select>
+      <div class="space-between">
+        <i id="icon-fa-clock" class="fas fa-clock"></i>
+        <select id="formatSelectorCrono"></select>
+      </div>
+      <div class="space-between">
+        <i id="icon-fa-stopwatch" class="fas fa-stopwatch"></i>
+        <select id="formatSelectorCdown"></select>
       </div>
       <br />
       <div>

diff --git a/core/template/extensible/control/styles.css b/core/template/extensible/control/styles.css
@@ -17,6 +17,13 @@ body {
   background-color: #555;
 }
 
+#icon-fa-clock,
+#icon-fa-stopwatch {
+  margin-right: 10px;
+  color: #000;
+  font-size: 30px;
+}
+
 .container {
   text-align: center;
   margin-top: 50px;
@@ -106,6 +113,19 @@ body {
   border: 2px solid #d9362eaa;
 }
 
+.checkboxBox {
+  background-color: #cccccc88;
+  border: 2px solid #cccccc88; /* Borde */
+  border-radius: 5px; /* Borde redondeado */
+  cursor: pointer;
+  width: 18px; /* Ancho personalizado */
+  height: 18px; /* Alto personalizado */
+}
+
+.checkboxText {
+  font-size: 18px; /* Tamaño de fuente */
+}
+
 .text-input-container {
   display: flex;
   justify-content: center; /* Centra horizontalmente */
@@ -126,7 +146,8 @@ body {
 }
 
 /* Estilos para el selector */
-#formatSelector,
+#formatSelectorCrono,
+#formatSelectorCdown,
 #fontSelect {
   background-color: #cccccc88;
   font-size: 24px; /* Tamaño de fuente */

diff --git a/core/template/extensible/viewCdown/client.js b/core/template/extensible/viewCdown/client.js
@@ -33,12 +33,12 @@ socket.addEventListener('message', (event) => {
   }
 
   if (message[classElement].milliseconds !== undefined) {
-    if (formatTimeVar !== message[classElement].formatTime && intervalId) {
+    if (formatTimeVar !== message[classElement].formatTimeCdown && intervalId) {
       clearInterval(intervalId)
       intervalId = null
     }
 
-    formatTimeVar = message[classElement].formatTime
+    formatTimeVar = message[classElement].formatTimeCdown
     if (message[classElement].status === 'ended') {
       if (message[classElement].milliseconds !== 0) {
         updateTimeDisplay(formatTimeVar, message[classElement].milliseconds)

diff --git a/core/template/extensible/viewCrono/client.js b/core/template/extensible/viewCrono/client.js
@@ -31,12 +31,12 @@ socket.addEventListener('message', (event) => {
   }
 
   if (message[classElement].millisecondsTotal !== undefined) {
-    if (formatTimeVar !== message[classElement].formatTime && intervalId) {
+    if (formatTimeVar !== message[classElement].formatTimeCrono && intervalId) {
       clearInterval(intervalId)
       intervalId = null
     }
 
-    formatTimeVar = message[classElement].formatTime
+    formatTimeVar = message[classElement].formatTimeCrono
     updateTimeDisplay(formatTimeVar, message[classElement].millisecondsTotal)
 
     // Update the timer based on the received message

diff --git a/core/topbar.css b/core/topbar.css
@@ -37,6 +37,8 @@
   margin-top: 3.5px;
   cursor: pointer;
   flex-grow: 1;
+  margin-right: 2.5px;
+  margin-left: 2.5px;
 }
 
 .link-button:hover {

diff --git a/core/translates/en.yaml b/core/translates/en.yaml
@@ -1,8 +1,8 @@
 home:
   close: Close the window and stop the code
   wiki: Documentation
-  cronoTitle: CLOCKS
-  cdownTitle: TIMERS
+  cronoTitle: CHRONOMETERS
+  cdownTitle: COUNTDOWNS
   cdowntimeTitle: TIME UNTIL...
   extensibleTitle: STREAM EXTENSIBLE
   timeTitle: CURRENT TIME
@@ -12,4 +12,6 @@ timer:
     start: Start
     pause: Pause
     reset: Reset
-  ph_msgend: Message to display when time expires
+  phMsgEnd: Message to display when time expires
+  enablePauseAdd: Enabled permission to add time when time is paused
+  enableStopAdd: Enabled permission to add time when time has not yet started
diff --git a/core/translates/es.yaml b/core/translates/es.yaml
@@ -12,4 +12,6 @@ timer:
     start: Iniciar
     pause: Pausar
     reset: Reiniciar
-  ph_msgend: Mensaje a mostrar cuando finalice el tiempo
+  phMsgEnd: Mensaje a mostrar cuando finalice el tiempo
+  enablePauseAdd: Habilitado el permiso para añadir tiempo cuando el tiempo está pausado
+  enableStopAdd: Habilitado el permiso para añadir tiempo cuando el tiempo aún no se ha iniciado
diff --git a/functions.js b/functions.js
@@ -251,7 +251,8 @@ exports.createDataYAML = (GlobalVariables, classType) => {
     GlobalVariables[newKey].millisecondsTotal = 0
     GlobalVariables[newKey].milliseconds = 60000
     GlobalVariables[newKey].textMilliseconds = 60000
-    GlobalVariables[newKey].formatTime = 'MM:ss'
+    GlobalVariables[newKey].formatTimeCrono = 'HH:mm:ss'
+    GlobalVariables[newKey].formatTimeCdown = 'HH:mm:ss'
     GlobalVariables[newKey].font = 'Arial'
     GlobalVariables[newKey].size = 50
     GlobalVariables[newKey].bold = false