Add result upload

.gitignore

@@ -4,11 +4,14 @@ dist
 .env
 @@export_177ba1326b.zip
 # Ignore the output video from Git but not videos you import into src/.
-out
+out/**
+out/
 ffmpeg/
 public/
 **.zip
 yarn.lock
 package-lock.json
 functions/*.log
-**.log
+**.log
+uploads/
+uploads/**

app.js

@@ -3,7 +3,7 @@ const stream = require('stream');
 const bodyParser = require('body-parser');
 const fs = require('fs');
 const path = require('path');
-const { Utils } = require('common-utils');
+const { Utils, FileUploader } = require('common-utils');
 const { ZipFiles, UnzipFiles } = require('common-utils');
 const OracleStorage = require('./common-creds/oracle/storage.json');
 const axios = require('axios');
@@ -146,14 +146,36 @@ app.all('/render', async (req, res) => {
     }
     let manuObj = JSON.parse(fs.readFileSync(manuFile).toString())
     modifyFiles(manuObj)
+    const uploader = new FileUploader('oracle', OracleStorage.semibit_media)
 
     if (!skipRender) {
-      doRender((result) => {
-        res.send({
+      res.writeHead(200, manuObj.id, {
+        'job_id': manuObj.id,
+        'content-type': 'application/json'
+      })
+      res.write(JSON.stringify({
+        status: 2,
+        job_id: manuObj.id
+      }))
+      let cb = async (result) => {
+        res.write(JSON.stringify({
           status: result,
           job_id: manuObj.id
-        })
-      })
+        }))
+        fs.renameSync('out/video.mp4', `out/${manuObj.id}.mp4`)
+        let uploadResult = await uploader.upload(`out/${manuObj.id}.mp4`)
+        sendToObserver(manuObj.id, uploadResult.url)
+        res.end()
+      }
+      if (req.query.async) {
+        cb = async () => {
+          fs.renameSync('out/video.mp4', `out/${manuObj.id}.mp4`)
+          let uploadResult = await uploader.upload(`out/${manuObj.id}.mp4`)
+          sendToObserver(manuObj.id, uploadResult.url)
+          //todo > publish webhook
+        }
+      }
+      doRender(manuObj.id, cb)
     }
     else {
       console.log('Skipping render')
@@ -183,9 +205,11 @@ const oracleAPI = OracleStorage.semibit_media.url
 if (!fs.existsSync(uploadDir)) {
   fs.mkdirSync(uploadDir);
 }
+
 app.post('/upload', async (req, res) => {
   try {
     const file = req.files.file;
+    const uploadUrl = oracleAPI + encodeURIComponent(file.name);
 
     const readStream = fs.createReadStream(file.path);
     const writeStream = fs.createWriteStream(path.join(uploadDir, file.name));
@@ -195,7 +219,6 @@ app.post('/upload', async (req, res) => {
       writeStream.on('finish', resolve);
     });
 
-    const uploadUrl = oracleAPI + encodeURIComponent(file.name);
     const fileData = fs.readFileSync(path.join(uploadDir, file.name));
 
     await axios.put(uploadUrl, fileData);
@@ -213,25 +236,37 @@ app.post('/upload', async (req, res) => {
 });
 
 
-function doRender(status) {
+function sendToObserver(jobId, data) {
+  if (app.observer) {
+    app.observer(jobId, {
+      jod_id: jobId,
+      message_type: 'info',
+      message: data
+    })
+  }
+}
+function doRender(jobId, status) {
   const npmScript = 'render-build';
   const childProcess = exec(`npm run ${npmScript}`);
 
   console.log('Starting render')
   childProcess.stdout.on('data', (data) => {
+    sendToObserver(jobId, data)
     console.log(data.toString());
   });
 
   childProcess.stderr.on('data', (data) => {
+    sendToObserver(jobId, data)
     console.error(data.toString());
   });
 
   // Listen for the completion of the child process
   childProcess.on('close', (code) => {
     console.log('Render finished')
-
-    if (status)
+    sendToObserver(jobId, code === 0 ? 'completed' : 'failed')
+    if (status) {
       status(code)
+    }
     if (code === 0) {
       console.log(`'${npmScript}' completed successfully.`);
     } else {

common-utils

@@ -1 +1 @@
-Subproject commit e1bd46fb06769f2a9f887e396a176a54a293e309
+Subproject commit 4a3802a43509d4e7314a27af9217864fca35c687

ffmpeg-fix.js

@@ -39,7 +39,7 @@ async function findAndCreateSymlink(targetExecutable, ffmpegPath) {
         const symlinkPath = path.join(filePath, 'ffmpeg', 'remotion', 'bin', targetExecutable);
         // await createSymlink(ffmpegPath, symlinkPath);
         fs.copyFileSync(ffmpegPath, symlinkPath)
-        console.log('Coped to', symlinkPath)
+        console.log('Copied to', symlinkPath)
       }
     });
   } catch (error) {

index.html

@@ -5,13 +5,14 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Semibit Media Render Farm</title>
+  <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
   <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
 </head>
 
 <body>
   <div class="mdl-layout mdl-js-layout mdl-color--grey-100">
     <main style="margin-top:100px" class="mdl-layout__content">
-      <div class="mdl-card mdl-shadow--6dp" style="max-width: 400px; margin: 0 auto; padding: 16px;">
+      <div class="mdl-card mdl-shadow--6dp" style="max-width:80%; margin: 0 auto; padding: 16px;">
         <h3 style="text-align: center;">Render Asset
           Bundle</h3>
         <div class="mdl-textfield mdl-js-textfield">
@@ -21,7 +22,16 @@
           Upload
         </button>
         <p id="statusMessage" style="margin-top: 16px;"></p>
+
+
+        <h4>Job Status Subscription</h4>
+        <label for="jobId">Enter Job ID:</label>
+        <input type="text" id="jobId" name="jobId" required>
+        <button id="subscribeJob" type="button">Subscribe</button>
+        <h4>Job Status Updates</h4>
+        <p id="statusUpdates"></p>
       </div>
+
     </main>
   </div>
 
@@ -53,12 +63,18 @@
 
         if (response.ok) {
           statusMessage.textContent = 'File uploaded successfully! Triggering Render';
-          let renderUrl = window.location.href + '/render?fileUrl=' + encodeURIComponent(uploadUrl)
+          let renderUrl = window.location.origin + '/render?fileUrl=' + encodeURIComponent(uploadUrl)
           response = await fetch(renderUrl);
-          if (response.ok)
+          if (response.ok) {
+            let jobId = response.statusText
+            document.getElementById('jobId').value = jobId
+            const subscriptionForm = document.getElementById('subscribeJob');
+            subscriptionForm.click()
             response.text().then(t => {
-              statusMessage.innerHTML = 'Render triggered succesfully.<br>' + t;
+              let rep = JSON.parse(t)
+              statusMessage.innerHTML = 'Render completed succesfully.<br>' + t;
             })
+          }
           else
             statusMessage.textContent = 'Render Failed ' + response.statusText;
 
@@ -71,6 +87,30 @@
       }
     }
   </script>
+
+
+
+
+  <script>
+    const socket = io();
+    const subscriptionForm = document.getElementById('subscribeJob');
+    subscriptionForm.addEventListener('click', (event) => {
+      event.preventDefault();
+      const jobId = document.getElementById('jobId').value;
+      socket.emit('subscribe_job', jobId);
+    });
+
+    const listItem = document.createElement('span');
+    listItem.textContent = `Connected`;
+    statusUpdates.appendChild(listItem);
+    socket.on('job_status', (data) => {
+      const statusUpdates = document.getElementById('statusUpdates');
+      let str = data.msg?.message
+      if (typeof str == "object")
+        str = JSON.stringify(str)
+      listItem.textContent = `${str}`;
+    });
+  </script>
 </body>
 
 </html>

index.js

@@ -8,7 +8,8 @@ setGlobalOptions({
   region: "us-central1",
   memory: "4GiB",
   maxInstances: 1,
-  minInstances: 0
+  minInstances: 0,
+  timeoutSeconds: 3500
 });
 
 initializeApp();

package-lock.json

@@ -37,13 +37,14 @@
         "remotion": "4.0.19",
         "remotion-animated": "^2.0.0",
         "remotion-transition-series": "^0.0.10",
+        "socket.io": "^4.7.2",
         "styled-components": "^6.0.5",
         "ts-node-dev": "^2.0.0",
         "typescript": "^4.9.4",
         "which": "^3.0.1",
+        "ws": "^8.13.0",
         "zod": "^3.21.4"
       },
-      "devDependencies": {},
       "engines": {
         "node": "16"
       }
@@ -3989,6 +3990,26 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@remotion/renderer/node_modules/ws": {
+      "version": "8.7.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.7.0.tgz",
+      "integrity": "sha512-c2gsP0PRwcLFzUiA8Mkr37/MI7ilIlHQxaEAtd0uNMbVMoy8puJyafRlm0bV9MbGSabUPeLrRRaqIBcFcA2Pqg==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@remotion/tailwind": {
       "version": "4.0.19",
       "resolved": "https://registry.npmjs.org/@remotion/tailwind/-/tailwind-4.0.19.tgz",
@@ -4017,6 +4038,11 @@
         "zod": "^3.0.0"
       }
     },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
+      "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -4063,6 +4089,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
+      "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q=="
+    },
     "node_modules/@types/cors": {
       "version": "2.8.13",
       "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.13.tgz",
@@ -5192,6 +5223,14 @@
         }
       ]
     },
+    "node_modules/base64id": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
+      "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==",
+      "engines": {
+        "node": "^4.5.0 || >= 5.9"
+      }
+    },
     "node_modules/bcrypt-pbkdf": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
@@ -6192,6 +6231,62 @@
         "once": "^1.4.0"
       }
     },
+    "node_modules/engine.io": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.5.2.tgz",
+      "integrity": "sha512-IXsMcGpw/xRfjra46sVZVHiSWo/nJ/3g1337q9KNXtS6YRzbW5yIzTCb9DjhrBe7r3GZQR0I4+nq+4ODk5g/cA==",
+      "dependencies": {
+        "@types/cookie": "^0.4.1",
+        "@types/cors": "^2.8.12",
+        "@types/node": ">=10.0.0",
+        "accepts": "~1.3.4",
+        "base64id": "2.0.0",
+        "cookie": "~0.4.1",
+        "cors": "~2.8.5",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.11.0"
+      },
+      "engines": {
+        "node": ">=10.2.0"
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.1.tgz",
+      "integrity": "sha512-9JktcM3u18nU9N2Lz3bWeBgxVgOKpw7yhRaoxQA3FUDZzzw+9WlA6p4G4u0RixNkg14fH7EfEc/RhpurtiROTQ==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/engine.io/node_modules/cookie": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
+      "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/engine.io/node_modules/ws": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
+      "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.15.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz",
@@ -14193,6 +14288,63 @@
         "node": ">=8"
       }
     },
+    "node_modules/socket.io": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.7.2.tgz",
+      "integrity": "sha512-bvKVS29/I5fl2FGLNHuXlQaUH/BlzX1IN6S+NKLNZpBsPZIDH+90eQmCs2Railn4YUiww4SzUedJ6+uzwFnKLw==",
+      "dependencies": {
+        "accepts": "~1.3.4",
+        "base64id": "~2.0.0",
+        "cors": "~2.8.5",
+        "debug": "~4.3.2",
+        "engine.io": "~6.5.2",
+        "socket.io-adapter": "~2.5.2",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.2.0"
+      }
+    },
+    "node_modules/socket.io-adapter": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.2.tgz",
+      "integrity": "sha512-87C3LO/NOMc+eMcpcxUBebGjkpMDkNBS9tf7KJqcDsmL936EChtVva71Dw2q4tQcuVC+hAUy4an2NO/sYXmwRA==",
+      "dependencies": {
+        "ws": "~8.11.0"
+      }
+    },
+    "node_modules/socket.io-adapter/node_modules/ws": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
+      "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+      "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -15504,15 +15656,15 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
     "node_modules/ws": {
-      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.7.0.tgz",
-      "integrity": "sha512-c2gsP0PRwcLFzUiA8Mkr37/MI7ilIlHQxaEAtd0uNMbVMoy8puJyafRlm0bV9MbGSabUPeLrRRaqIBcFcA2Pqg==",
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
+      "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
       "engines": {
         "node": ">=10.0.0"
       },
       "peerDependencies": {
         "bufferutil": "^4.0.1",
-        "utf-8-validate": "^5.0.2"
+        "utf-8-validate": ">=5.0.2"
       },
       "peerDependenciesMeta": {
         "bufferutil": {
@@ -18094,6 +18246,12 @@
           "requires": {
             "whatwg-url": "^7.0.0"
           }
+        },
+        "ws": {
+          "version": "8.7.0",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-8.7.0.tgz",
+          "integrity": "sha512-c2gsP0PRwcLFzUiA8Mkr37/MI7ilIlHQxaEAtd0uNMbVMoy8puJyafRlm0bV9MbGSabUPeLrRRaqIBcFcA2Pqg==",
+          "requires": {}
         }
       }
     },
@@ -18119,6 +18277,11 @@
         "remotion": "4.0.19"
       }
     },
+    "@socket.io/component-emitter": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
+      "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
+    },
     "@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -18162,6 +18325,11 @@
         "@types/node": "*"
       }
     },
+    "@types/cookie": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
+      "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q=="
+    },
     "@types/cors": {
       "version": "2.8.13",
       "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.13.tgz",
@@ -19025,6 +19193,11 @@
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
       "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
     },
+    "base64id": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
+      "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog=="
+    },
     "bcrypt-pbkdf": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
@@ -19755,6 +19928,41 @@
         "once": "^1.4.0"
       }
     },
+    "engine.io": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.5.2.tgz",
+      "integrity": "sha512-IXsMcGpw/xRfjra46sVZVHiSWo/nJ/3g1337q9KNXtS6YRzbW5yIzTCb9DjhrBe7r3GZQR0I4+nq+4ODk5g/cA==",
+      "requires": {
+        "@types/cookie": "^0.4.1",
+        "@types/cors": "^2.8.12",
+        "@types/node": ">=10.0.0",
+        "accepts": "~1.3.4",
+        "base64id": "2.0.0",
+        "cookie": "~0.4.1",
+        "cors": "~2.8.5",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.11.0"
+      },
+      "dependencies": {
+        "cookie": {
+          "version": "0.4.2",
+          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
+          "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA=="
+        },
+        "ws": {
+          "version": "8.11.0",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
+          "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
+          "requires": {}
+        }
+      }
+    },
+    "engine.io-parser": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.1.tgz",
+      "integrity": "sha512-9JktcM3u18nU9N2Lz3bWeBgxVgOKpw7yhRaoxQA3FUDZzzw+9WlA6p4G4u0RixNkg14fH7EfEc/RhpurtiROTQ=="
+    },
     "enhanced-resolve": {
       "version": "5.15.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz",
@@ -25223,6 +25431,45 @@
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
       "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="
     },
+    "socket.io": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.7.2.tgz",
+      "integrity": "sha512-bvKVS29/I5fl2FGLNHuXlQaUH/BlzX1IN6S+NKLNZpBsPZIDH+90eQmCs2Railn4YUiww4SzUedJ6+uzwFnKLw==",
+      "requires": {
+        "accepts": "~1.3.4",
+        "base64id": "~2.0.0",
+        "cors": "~2.8.5",
+        "debug": "~4.3.2",
+        "engine.io": "~6.5.2",
+        "socket.io-adapter": "~2.5.2",
+        "socket.io-parser": "~4.2.4"
+      }
+    },
+    "socket.io-adapter": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.2.tgz",
+      "integrity": "sha512-87C3LO/NOMc+eMcpcxUBebGjkpMDkNBS9tf7KJqcDsmL936EChtVva71Dw2q4tQcuVC+hAUy4an2NO/sYXmwRA==",
+      "requires": {
+        "ws": "~8.11.0"
+      },
+      "dependencies": {
+        "ws": {
+          "version": "8.11.0",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
+          "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
+          "requires": {}
+        }
+      }
+    },
+    "socket.io-parser": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+      "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+      "requires": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      }
+    },
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -26165,9 +26412,9 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
     "ws": {
-      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.7.0.tgz",
-      "integrity": "sha512-c2gsP0PRwcLFzUiA8Mkr37/MI7ilIlHQxaEAtd0uNMbVMoy8puJyafRlm0bV9MbGSabUPeLrRRaqIBcFcA2Pqg==",
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
+      "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
       "requires": {}
     },
     "xmlcreate": {

package.json

@@ -8,7 +8,7 @@
   "scripts": {
     "start": "node server.js",
     "preview": "remotion studio",
-    "render-build": "remotion render --image-format=jpeg --quality=70 --gl=angle SemibitComposition  ",
+    "render-build": "remotion render --image-format=jpeg --quality=70 --gl=angle SemibitComposition out/video.mp4",
     "render-still": "remotion still --image-format=jpeg SemibitCompositionPoster  ",
     "upgrade": "remotion upgrade",
     "postinstall": "cd node_modules/common-utils && npm run build && cd ../../ && node ffmpeg-fix.js",
@@ -31,39 +31,40 @@
     }
   },
   "dependencies": {
-    "@remotion/cli": "4.0.19",
-    "@remotion/eslint-config": "4.0.19",
-    "@remotion/tailwind": "4.0.19",
-    "@types/react": "^18.0.26",
-    "@types/web": "^0.0.86",
-    "remotion": "4.0.19",
-    "typescript": "^4.9.4",
-    "firebase-admin": "^11.9.0",
-    "firebase-functions": "^4.4.1",
     "@ffmpeg-installer/ffmpeg": "^1.1.0",
     "@remotion/bundler": "4.0.19",
+    "@remotion/cli": "4.0.19",
+    "@remotion/eslint-config": "4.0.19",
     "@remotion/google-fonts": "4.0.19",
     "@remotion/noise": "4.0.19",
     "@remotion/preload": "4.0.19",
+    "@remotion/tailwind": "4.0.19",
     "@remotion/zod-types": "4.0.19",
+    "@types/react": "^18.0.26",
+    "@types/web": "^0.0.86",
     "axios": "^1.4.0",
     "body-parser": "^1.20.2",
     "common-utils": "file:common-utils",
     "express": "^4.18.2",
     "ffbinaries": "^1.1.5",
+    "firebase-admin": "^11.9.0",
+    "firebase-functions": "^4.4.1",
     "fs-extra": "^11.1.1",
     "i": "^0.3.7",
     "npm": "^9.8.1",
     "path": "^0.12.7",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "remotion": "4.0.19",
     "remotion-animated": "^2.0.0",
     "remotion-transition-series": "^0.0.10",
+    "socket.io": "^4.7.2",
     "styled-components": "^6.0.5",
     "ts-node-dev": "^2.0.0",
+    "typescript": "^4.9.4",
     "which": "^3.0.1",
+    "ws": "^8.13.0",
     "zod": "^3.21.4"
   },
-  "devDependencies": {},
   "packageManager": "npm@8.19.4"
 }

server.js

@@ -1,5 +1,49 @@
 const app = require('./app')
 let port = process.env.PORT || 8083
-app.listen(port, () => {
-  console.log("Remote renderer listenting at port", port)
-})
+
+const express = require('express');
+const http = require('http');
+const socketIO = require('socket.io');
+
+const server = http.createServer(app);
+const io = socketIO(server);
+
+const usersSubscribedToJobs = new Map();
+
+app.observer = (job_id, msg) => {
+  const subscribers = usersSubscribedToJobs.get(job_id);
+  if (subscribers) {
+    subscribers.forEach((socket) => {
+      socket.emit('job_status', { job_id, msg });
+    });
+  }
+};
+
+io.on('connection', (socket) => {
+  console.log('A user connected');
+  socket.on('subscribe_job', (job_id) => {
+    if (!usersSubscribedToJobs.has(job_id)) {
+      usersSubscribedToJobs.set(job_id, new Set());
+    }
+    usersSubscribedToJobs.get(job_id).add(socket);
+    console.log(`User subscribed to job: ${job_id}`);
+  });
+
+  socket.on('unsubscribe_job', (job_id) => {
+    if (usersSubscribedToJobs.has(job_id)) {
+      usersSubscribedToJobs.get(job_id).delete(socket);
+      console.log(`User unsubscribed from job: ${job_id}`);
+    }
+  });
+
+  socket.on('disconnect', () => {
+    console.log('User disconnected');
+    usersSubscribedToJobs.forEach((subscribers, job_id) => {
+      subscribers.delete(socket);
+    });
+  });
+});
+
+server.listen(port, () => {
+  console.log(`Server listening on port ${port}`);
+});