v1.0.3

core/client.js

@@ -3,6 +3,7 @@ const buttonContainer = document.getElementById('button-container')
 const buttonCronoContainer = document.getElementById('button-container-crono')
 const buttonCdownContainer = document.getElementById('button-container-cdown')
 const buttonCdowntimeContainer = document.getElementById('button-container-cdowntime')
+const buttonExtensibleContainer = document.getElementById('button-container-extensible')
 const buttonTimeContainer = document.getElementById('button-container-time')
 const buttonClose = document.getElementById('stop-code')
 const buttonWiki = document.getElementById('button-wiki')
@@ -11,7 +12,7 @@ const switchTheme = document.getElementById('switch-theme')
 const titleCrono = document.getElementById('crono-title')
 const titleCdown = document.getElementById('cdown-title')
 const titleCdowntime = document.getElementById('cdowntime-title')
-const titleTwitchExt = document.getElementById('twitchext-title')
+const titleExtensible = document.getElementById('extensible-title')
 const titleTime = document.getElementById('time-title')
 // const test = document.getElementById('test')
 const socket = new WebSocket('ws://localhost:3000')
@@ -63,7 +64,7 @@ socket.addEventListener('message', (event) => {
     titleCrono.textContent = translateElements.home.cronoTitle
     titleCdown.textContent = translateElements.home.cdownTitle
     titleCdowntime.textContent = translateElements.home.cdowntimeTitle
-    titleTwitchExt.textContent = translateElements.home.twitchextTitle
+    titleExtensible.textContent = translateElements.home.extensibleTitle
     titleTime.textContent = translateElements.home.timeTitle
 
     if (elementVariables && typeof elementVariables === 'object') {
@@ -120,6 +121,10 @@ buttonContainer.addEventListener('click', (event) => {
       window.open(`/${data[0]}/view`, '_blank', 'width=800,height=600')
     } else if (data[1] === 'controlButton') {
       window.open(`/${data[0]}/control`, '_blank', 'width=800,height=600')
+    } else if (data[1] === 'viewButtonCrono') {
+      window.open(`/${data[0]}/viewCrono`, '_blank', 'width=800,height=600')
+    } else if (data[1] === 'viewButtonCdown') {
+      window.open(`/${data[0]}/viewCdown`, '_blank', 'width=800,height=600')
     } else if (data[1] === 'copyButton') {
       // Get the text to copy from the "data-copy-text" attribute
       const copyText = `http://localhost:3000/${data[0]}/view`
@@ -128,7 +133,27 @@ buttonContainer.addEventListener('click', (event) => {
         copyTextToClipboard(copyText)
 
         // Display a notification message
-        showNotification(translateElements.home.notycopycrono, button)
+        showNotification(translateElements.home.notycopy, button)
+      }
+    } else if (data[1] === 'copyButtonCrono') {
+      // Get the text to copy from the "data-copy-text" attribute
+      const copyText = `http://localhost:3000/${data[0]}/viewCrono`
+
+      if (copyText) {
+        copyTextToClipboard(copyText)
+
+        // Display a notification message
+        showNotification(translateElements.home.notycopy, button)
+      }
+    } else if (data[1] === 'copyButtonCdown') {
+      // Get the text to copy from the "data-copy-text" attribute
+      const copyText = `http://localhost:3000/${data[0]}/viewCdown`
+
+      if (copyText) {
+        copyTextToClipboard(copyText)
+
+        // Display a notification message
+        showNotification(translateElements.home.notycopy, button)
       }
     } else if (data[1] === 'removeButton') {
       socket.send(JSON.stringify({ action: 'removeData', remove: data[0] }))
@@ -178,6 +203,46 @@ function loadButtons (list) {
       copyButton.id = element + '-copyButton'
       blockSpan.appendChild(copyButton)
 
+      const controlButton = createIconButton('fas fa-gear')
+      controlButton.id = element + '-controlButton'
+      blockSpan.appendChild(controlButton)
+    } else if (element.startsWith('extensible')) {
+      const iconCrono = document.createElement('i')
+      iconCrono.className = 'fas fa-clock'
+      iconCrono.style.marginRight = '10px'
+      iconCrono.style.color = '#494949'
+      iconCrono.style.fontSize = '20px'
+      blockSpan.appendChild(iconCrono)
+
+      const viewButtonCrono = createIconButton('fas fa-eye')
+      viewButtonCrono.id = element + '-viewButtonCrono'
+      blockSpan.appendChild(viewButtonCrono)
+
+      const copyButtonCrono = createIconButton('fas fa-copy', 'OBS')
+      copyButtonCrono.className = 'button-copy'
+      copyButtonCrono.id = element + '-copyButtonCrono'
+      blockSpan.appendChild(copyButtonCrono)
+
+      blockSpan.appendChild(document.createElement('br'))
+
+      const iconCdown = document.createElement('i')
+      iconCdown.className = 'fas fa-stopwatch'
+      iconCdown.style.marginRight = '10px'
+      iconCdown.style.color = '#494949'
+      iconCdown.style.fontSize = '20px'
+      blockSpan.appendChild(iconCdown)
+
+      const viewButtonCdown = createIconButton('fas fa-eye')
+      viewButtonCdown.id = element + '-viewButtonCdown'
+      blockSpan.appendChild(viewButtonCdown)
+
+      const copyButtonCdown = createIconButton('fas fa-copy', 'OBS')
+      copyButtonCdown.className = 'button-copy'
+      copyButtonCdown.id = element + '-copyButtonCdown'
+      blockSpan.appendChild(copyButtonCdown)
+
+      blockSpan.appendChild(document.createElement('br'))
+
       const controlButton = createIconButton('fas fa-gear')
       controlButton.id = element + '-controlButton'
       blockSpan.appendChild(controlButton)
@@ -194,6 +259,8 @@ function loadButtons (list) {
       buttonCdowntimeContainer.insertBefore(blockSpan, buttonCdowntimeContainer.firstChild)
     } else if (element.startsWith('cdown')) {
       buttonCdownContainer.insertBefore(blockSpan, buttonCdownContainer.firstChild)
+    } else if (element.startsWith('extensible')) {
+      buttonExtensibleContainer.insertBefore(blockSpan, buttonExtensibleContainer.firstChild)
     } else if (element.startsWith('time')) {
       buttonTimeContainer.insertBefore(blockSpan, buttonTimeContainer.firstChild)
     }

core/formats.yaml

@@ -34,6 +34,17 @@ cdowntime:
   - 'MM:ss'
   - 'SS.000'
   - 'SS'
+extensible:
+  - 'HH:mm:ss.000'
+  - 'HH:mm:ss'
+  - '(HH:)(mm:)ss.000'
+  - '(HH:)(mm:)ss'
+  - '(HH:)mm:ss.000'
+  - '(HH:)mm:ss'
+  - 'MM:ss.000'
+  - 'MM:ss'
+  - 'SS.000'
+  - 'SS'
 time:
   - 'DD/MM/YYYY hh:mm:ss'
   - 'DD/MM/YYYY hh:mm'

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>
@@ -79,9 +81,11 @@ <h1 class="title" id="cdowntime-title"></h1>
         </div>
       </div>
       <div class="column">
-        <h1 class="title" id="twitchext-title"></h1>
-        <div class="button-container" id="button-container-twitchext">
-          <span class="add-button">COMING SOON...</span>
+        <h1 class="title" id="extensible-title"></h1>
+        <div class="button-container" id="button-container-extensible">
+          <button class="add-button" id="add-extensible">
+            <i class="fas fa-plus"></i>
+          </button>
         </div>
         <h1 class="title" id="time-title"></h1>
         <div class="button-container" id="button-container-time">

core/template/cdown/control/control.js

@@ -86,7 +86,7 @@ socket.addEventListener('message', (event) => {
       resetButton.textContent = translateElements.timer.buttons.reset
 
       if (elementVariables && typeof elementVariables === 'object') {
-        checkTextTime = MsToText(elementVariables.textmilliseconds)
+        checkTextTime = MsToText(elementVariables.textMilliseconds)
         checkHexColor = elementVariables.colorText
 
         // Format selector options
@@ -101,10 +101,10 @@ 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)
+        timeText.value = MsToText(elementVariables.textMilliseconds)
         formatSelector.value = elementVariables.formatTime
         fontSelect.value = elementVariables.font
         fontSize.value = elementVariables.size
@@ -122,10 +122,10 @@ 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)
+        timeText.value = MsToText(message[classElement].textMilliseconds)
         formatSelector.value = message[classElement].formatTime
         fontSelect.value = message[classElement].font
         fontSize.value = message[classElement].size
@@ -172,7 +172,7 @@ timeText.addEventListener('change', () => {
   const textTime = timeText.value.trim()
 
   // Regular expression to check the correct time format
-  const timeRegex = /^([0-9]+):([0-5]?[0-9]):([0-5]?[0-9])$/
+  const timeRegex = /^(\d+):([0-5]?\d):([0-5]?\d)$/
 
   if (timeRegex.test(textTime)) {
     checkTextTime = textTime
@@ -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,17 +227,17 @@ 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' }
 })
 
 formatSelector.addEventListener('change', () => {
-  socket.send(JSON.stringify({ action: 'changeFormatCdown', format: formatSelector.value, classElement }))
+  socket.send(JSON.stringify({ action: 'changeFormat', format: formatSelector.value, classElement }))
 })
 
 fontSelect.addEventListener('change', () => {
-  socket.send(JSON.stringify({ action: 'changeFontCdown', font: fontSelect.value, classElement }))
+  socket.send(JSON.stringify({ action: 'changeFont', font: fontSelect.value, classElement }))
 })
 
 fontSize.addEventListener('change', () => {
@@ -255,37 +255,37 @@ fontSize.addEventListener('change', () => {
   }
 
   // Send the new size to the server
-  socket.send(JSON.stringify({ action: 'changeSizeCdown', size: newSize, classElement }))
+  socket.send(JSON.stringify({ action: 'changeSize', size: newSize, classElement }))
 })
 
 boldButton.addEventListener('click', () => {
-  socket.send(JSON.stringify({ action: 'textFormatCdown', format: 'bold', classElement }))
+  socket.send(JSON.stringify({ action: 'textFormat', format: 'bold', classElement }))
 })
 
 italicButton.addEventListener('click', () => {
-  socket.send(JSON.stringify({ action: 'textFormatCdown', format: 'italic', classElement }))
+  socket.send(JSON.stringify({ action: 'textFormat', format: 'italic', classElement }))
 })
 
 underlineButton.addEventListener('click', () => {
-  socket.send(JSON.stringify({ action: 'textFormatCdown', format: 'underline', classElement }))
+  socket.send(JSON.stringify({ action: 'textFormat', format: 'underline', classElement }))
 })
 
 alignLeftButton.addEventListener('click', () => {
-  socket.send(JSON.stringify({ action: 'alignCdown', align: 'left', classElement }))
+  socket.send(JSON.stringify({ action: 'align', align: 'left', classElement }))
 })
 
 alignCenterButton.addEventListener('click', () => {
-  socket.send(JSON.stringify({ action: 'alignCdown', align: 'center', classElement }))
+  socket.send(JSON.stringify({ action: 'align', align: 'center', classElement }))
 })
 
 alignRightButton.addEventListener('click', () => {
-  socket.send(JSON.stringify({ action: 'alignCdown', align: 'right', classElement }))
+  socket.send(JSON.stringify({ action: 'align', align: 'right', classElement }))
 })
 
 colorPicker.addEventListener('change', () => {
   checkHexColor = colorPicker.value.toUpperCase()
   // If the hexadecimal code is valid, send the color to the server
-  socket.send(JSON.stringify({ action: 'changeColorCdown', color: colorPicker.value.toUpperCase(), classElement }))
+  socket.send(JSON.stringify({ action: 'changeColor', color: colorPicker.value.toUpperCase(), classElement }))
   colorHex.value = checkHexColor
 })
 
@@ -298,7 +298,7 @@ colorHex.addEventListener('change', () => {
   if (hexRegex.test(hexColor)) {
     checkHexColor = hexColor.toUpperCase()
     // If the hexadecimal code is valid, send the color to the server
-    socket.send(JSON.stringify({ action: 'changeColorCdown', color: checkHexColor, classElement }))
+    socket.send(JSON.stringify({ action: 'changeColor', color: checkHexColor, classElement }))
     colorPicker.value = checkHexColor
     colorHex.value = checkHexColor
   } else {

core/template/cdown/view/client.js

@@ -39,7 +39,7 @@ socket.addEventListener('message', (event) => {
     }
 
     formatTimeVar = message[classElement].formatTime
-    if (message[classElement].status === 'stopped') {
+    if (message[classElement].status === 'ended') {
       if (message[classElement].milliseconds !== 0) {
         updateTimeDisplay(formatTimeVar, message[classElement].milliseconds)
       } else if (message[classElement].msgEnd !== '') {