BrowserSourcesForOBS · XtoManuel · Oct 12, 2023 · Oct 11, 2023 · Oct 12, 2023
diff --git a/core/client.js b/core/client.js
@@ -7,6 +7,8 @@ const buttonExtensibleContainer = document.getElementById('button-container-exte
 const buttonTimeContainer = document.getElementById('button-container-time')
 const buttonClose = document.getElementById('stop-code')
 const buttonWiki = document.getElementById('button-wiki')
+const leftButtons = document.getElementById('left-button')
+const textVersion = document.getElementById('span-version')
 const languageSelector = document.getElementById('language-selector')
 const switchTheme = document.getElementById('switch-theme')
 const titleCrono = document.getElementById('crono-title')
@@ -36,10 +38,23 @@ socket.addEventListener('message', (event) => {
     translateElements = message.translateElements
 
     // Configuration and translation
-    switchTheme.checked = message.config.themedark
+    switchTheme.checked = message.config.themeDark
     buttonClose.title = translateElements.home.close
+    textVersion.textContent = message.config.version
+    if (message.config.version !== 'Error' && message.config.versionRelease !== 'Error' && compareVersions(message.config.version, message.config.versionRelease) === 1) {
+      const link = document.createElement('a')
+      link.href = 'https://github.com/BrowserSourcesForOBS/obs-timer-controller/releases/latest'
+      link.target = '_blank'
+      link.id = 'link-newVersion'
+      const button = document.createElement('button')
+      button.className = 'button-versionRelease'
+      button.title = translateElements.home.newVersionTitle
+      button.textContent = translateElements.home.newVersion + message.config.versionRelease
+      link.appendChild(button)
+      leftButtons.appendChild(link)
+    }
     buttonWiki.title = translateElements.home.wiki
-    if (message.config.themedark) {
+    if (message.config.themeDark) {
       document.body.classList.remove('light-theme')
       document.body.classList.add('dark-theme')
     } else {
@@ -96,7 +111,7 @@ buttonClose.addEventListener('click', () => {
 })
 
 switchTheme.addEventListener('change', () => {
-  socket.send(JSON.stringify({ action: 'themeChange', themedark: switchTheme.checked }))
+  socket.send(JSON.stringify({ action: 'themeChange', themeDark: switchTheme.checked }))
 })
 
 languageSelector.addEventListener('change', () => {
@@ -291,3 +306,15 @@ function showNotification (message, button) {
     notification.remove()
   }, 2000)
 }
+
+function compareVersions (versionA, versionB) {
+  const a = versionA.split('v')[1].split('.').map(Number)
+  const b = versionB.split('v')[1].split('.').map(Number)
+
+  for (let i = 0; i < 3; i++) {
+    if (a[i] < b[i]) return 1 // B es más moderna que A
+    if (a[i] > b[i]) return -1 // B es más antigua que A
+  }
+
+  return 0 // Son la misma versión
+}
diff --git a/core/index.html b/core/index.html
@@ -18,7 +18,7 @@
   </head>
   <body>
     <div class="top-bar">
-      <span class="left-button">
+      <span class="left-button" id="left-button">
         <button class="close-button" id="stop-code">
           <i class="fas fa-x"></i>
         </button>
@@ -40,6 +40,7 @@
             <i class="fas fa-book-open"></i>
           </button>
         </a>
+        <span class="span-version" id="span-version"> </span>
       </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
@@ -59,8 +59,8 @@ socket.addEventListener('message', (event) => {
       translateElements = message.translateElements
 
       // Config and translates
-      switchTheme.checked = message.config.themedark
-      if (message.config.themedark) {
+      switchTheme.checked = message.config.themeDark
+      if (message.config.themeDark) {
         document.body.classList.remove('light-theme')
         document.body.classList.add('dark-theme')
       } else {
@@ -149,7 +149,7 @@ socket.addEventListener('close', (event) => {
 })
 
 switchTheme.addEventListener('change', () => {
-  socket.send(JSON.stringify({ action: 'themeChange', themedark: switchTheme.checked }))
+  socket.send(JSON.stringify({ action: 'themeChange', themeDark: switchTheme.checked }))
 })
 
 selectorLang.addEventListener('change', () => {

diff --git a/core/template/cdowntime/control/control.js b/core/template/cdowntime/control/control.js
@@ -58,8 +58,8 @@ socket.addEventListener('message', (event) => {
       translateElements = message.translateElements
 
       // Config and translates
-      switchTheme.checked = message.config.themedark
-      if (message.config.themedark) {
+      switchTheme.checked = message.config.themeDark
+      if (message.config.themeDark) {
         document.body.classList.remove('light-theme')
         document.body.classList.add('dark-theme')
       } else {
@@ -139,7 +139,7 @@ socket.addEventListener('close', (event) => {
 })
 
 switchTheme.addEventListener('change', () => {
-  socket.send(JSON.stringify({ action: 'themeChange', themedark: switchTheme.checked }))
+  socket.send(JSON.stringify({ action: 'themeChange', themeDark: switchTheme.checked }))
 })
 
 selectorLang.addEventListener('change', () => {

diff --git a/core/template/crono/control/control.js b/core/template/crono/control/control.js
@@ -57,8 +57,8 @@ socket.addEventListener('message', (event) => {
       translateElements = message.translateElements
 
       // Configuration and translates
-      switchTheme.checked = message.config.themedark
-      if (message.config.themedark) {
+      switchTheme.checked = message.config.themeDark
+      if (message.config.themeDark) {
         document.body.classList.remove('light-theme')
         document.body.classList.add('dark-theme')
       } else {
@@ -131,7 +131,7 @@ socket.addEventListener('close', (event) => {
 })
 
 switchTheme.addEventListener('change', () => {
-  socket.send(JSON.stringify({ action: 'themeChange', themedark: switchTheme.checked }))
+  socket.send(JSON.stringify({ action: 'themeChange', themeDark: switchTheme.checked }))
 })
 
 languageSelector.addEventListener('change', () => {

diff --git a/core/template/extensible/control/control.js b/core/template/extensible/control/control.js
@@ -64,8 +64,8 @@ socket.addEventListener('message', (event) => {
       translateElements = message.translateElements
 
       // Config and translates
-      switchTheme.checked = message.config.themedark
-      if (message.config.themedark) {
+      switchTheme.checked = message.config.themeDark
+      if (message.config.themeDark) {
         document.body.classList.remove('light-theme')
         document.body.classList.add('dark-theme')
       } else {
@@ -171,7 +171,7 @@ socket.addEventListener('close', (event) => {
 })
 
 switchTheme.addEventListener('change', () => {
-  socket.send(JSON.stringify({ action: 'themeChange', themedark: switchTheme.checked }))
+  socket.send(JSON.stringify({ action: 'themeChange', themeDark: switchTheme.checked }))
 })
 
 selectorLang.addEventListener('change', () => {

diff --git a/core/template/time/control/control.js b/core/template/time/control/control.js
@@ -55,8 +55,8 @@ socket.addEventListener('message', (event) => {
       // translateElements = message.translateElements;
 
       // Configuration and translations
-      switchTheme.checked = message.config.themedark
-      if (message.config.themedark) {
+      switchTheme.checked = message.config.themeDark
+      if (message.config.themeDark) {
         document.body.classList.remove('light-theme')
         document.body.classList.add('dark-theme')
       } else {
@@ -128,7 +128,7 @@ socket.addEventListener('close', (event) => {
 })
 
 switchTheme.addEventListener('change', () => {
-  socket.send(JSON.stringify({ action: 'themeChange', themedark: switchTheme.checked }))
+  socket.send(JSON.stringify({ action: 'themeChange', themeDark: switchTheme.checked }))
 })
 
 langSelector.addEventListener('change', () => {

diff --git a/core/topbar.css b/core/topbar.css
@@ -17,7 +17,7 @@
   border-radius: 5px;
   color: white;
   vertical-align: bottom;
-  margin-top: 3.5px;
+  margin-top: 4.5px;
   cursor: pointer;
   flex-grow: 1;
 }
@@ -34,13 +34,47 @@
   border-radius: 5px;
   color: white;
   vertical-align: bottom;
-  margin-top: 3.5px;
+  margin-top: 4.5px;
   cursor: pointer;
   flex-grow: 1;
   margin-right: 2.5px;
   margin-left: 2.5px;
 }
 
+.span-version {
+  font-size: 18px;
+  background-color: #007bff;
+  border: 2px solid #007bff;
+  border-radius: 5px;
+  color: white;
+  position: relative;
+  top: -1.5px;
+  flex-grow: 1;
+  margin-right: 2.5px;
+  margin-left: 2.5px;
+  padding: 0px 10px;
+}
+
+.button-versionRelease {
+  font-size: 16.5px;
+  background-color: #4caf50;
+  border: 2px solid #4caf50;
+  border-radius: 5px;
+  color: white;
+  vertical-align: bottom;
+  margin-top: 4.5px;
+  cursor: pointer;
+  flex-grow: 1;
+  margin-right: 2.5px;
+  margin-left: 2.5px;
+  padding: 0px 10px;
+}
+
+.button-versionRelease:hover {
+  background-color: #388e3c; /* Fondo gris más oscuro al pasar el ratón */
+  border: 2px solid #388e3c;
+}
+
 .link-button:hover {
   background-color: #444; /* Fondo gris más oscuro al pasar el ratón */
   border: 2px solid #444;

diff --git a/core/translates/en.yaml b/core/translates/en.yaml
@@ -1,6 +1,8 @@
 home:
   close: Close the window and stop the code
   wiki: Documentation
+  newVersionTitle: Download the new update
+  newVersion: "New update available: "
   cronoTitle: CHRONOMETERS
   cdownTitle: COUNTDOWNS
   cdowntimeTitle: TIME UNTIL...

diff --git a/core/translates/es.yaml b/core/translates/es.yaml
@@ -1,6 +1,8 @@
 home:
   close: Cierra la ventana y detiene el código
   wiki: Documentación
+  newVersionTitle: Descarga la nueva actualización
+  newVersion: "Nueva actualización disponible: "
   cronoTitle: CRONÓMETROS
   cdownTitle: TEMPORIZADORES
   cdowntimeTitle: TIEMPO HASTA...

diff --git a/functions.js b/functions.js
@@ -5,6 +5,7 @@ const exec = util.promisify(require('child_process').exec)
 const WebSocket = require('ws')
 const { getMs } = require('util-tiempo')
 const fontkit = require('fontkit')
+const axios = require('axios')
 
 const argsv = process.argv.slice(2)
 
@@ -53,6 +54,41 @@ async function darkThemeCheck () {
   }
 }
 
+// Read the package.json file
+async function getVersion () {
+  try {
+    const data = await fs.promises.readFile((argsv[0] === 'test') ? './package.json' : './resources/app/package.json', 'utf8')
+
+    // Parse the content of the JSON file
+    const packageJson = await JSON.parse(data)
+    const packageVersion = `v${packageJson.version}`
+
+    // Extract the project version
+    console.log(`Project version: ${packageVersion}`)
+    return packageVersion
+  } catch (jsonError) {
+    console.error('Error parsing package.json:', jsonError)
+    return 'Error'
+  }
+}
+
+async function getVersionRelease () {
+  // Set the GitHub repository URL (make sure to replace 'owner' and 'repo' with your information)
+  const repoOwner = 'BrowserSourcesForOBS' // Replace 'owner' with the name of the repository owner
+  const repoName = 'obs-timer-controller' // Replace 'repo' with the name of the repository
+
+  // Make a request to the public releases page
+  try {
+    const response = await axios.get(`https://api.github.com/repos/${repoOwner}/${repoName}/releases/latest`)
+    const latestTag = response.data.tag_name
+    console.log(`Latest release tag on GitHub: ${latestTag}`)
+    return latestTag
+  } catch (error) {
+    console.error('Error getting latest release tag:', error)
+    return 'Error'
+  }
+}
+
 // Get a list of installed fonts
 exports.getFonts = () => {
   const fontDirectories = [
@@ -93,7 +129,9 @@ exports.getFonts = () => {
 exports.initConfig = async () => {
   const Config = {
     lang: await getLanguage(),
-    themedark: await darkThemeCheck()
+    themeDark: await darkThemeCheck(),
+    version: await getVersion(),
+    versionRelease: await getVersionRelease()
   }
 
   this.saveConfig(Config)