Merge pull request #48 from augustinbegue/layout-edition

Layout edition & performance improvements
augustinbegue · Dec 24, 2021 · a403a00 · a403a00
2 parents dc01f61 + 54b7352
commit a403a00
Show file tree

Hide file tree

Showing 7 changed files with 229 additions and 182 deletions.
diff --git a/renderer.js b/renderer.js
@@ -9,7 +9,7 @@ const { initLayout } = require("./src/cue/layout");
 
 const win = remote.getCurrentWindow(); /* Note this is different to the html global `window` variable */
 
-let config = localStorage.getItem('config')
+let config = localStorage.getItem('config');
 
 if (!config || !config.disabledColor || !config.refreshrate) {
   localStorage.setItem('config', `${JSON.stringify({
@@ -19,7 +19,7 @@ if (!config || !config.disabledColor || !config.refreshrate) {
       g: 0,
       b: 0
     }
-  })}`)
+  })}`);
 }
 
 /**
@@ -30,12 +30,12 @@ function displayError(message) {
   const errorContainer = document.getElementById("error-container");
   const errorField = document.getElementById("error-field");
 
-  errorContainer.style.display = 'flex'
-  errorField.innerHTML = message
+  errorContainer.style.display = 'flex';
+  errorField.innerHTML = message;
 
   document.getElementById("error-close").addEventListener("click", _event => {
     const errorContainer = document.getElementById("error-container");
-    errorContainer.style.display = 'none'
+    errorContainer.style.display = 'none';
   });
 }
 
@@ -85,14 +85,16 @@ window.onbeforeunload = (_event) => {
   (DOM element listeners get auto garbage collected but not
   Electron win listeners as the win is not dereferenced unless closed) */
   win.removeAllListeners();
-}
+};
 
+new Panels();
 cue.init();
 refreshSources();
 refreshDeviceInfo();
-initLayout();
-processor.doLoad();
-new Panels();
+processor.doLoad().then(() => {
+  initLayout();
+});
+
 
 
 
diff --git a/src/capture/index.js b/src/capture/index.js
@@ -1,28 +1,24 @@
 const { desktopCapturer } = require('electron');
-const { cue } = require('../cue/cue')
+const { cue } = require('../cue/cue');
 
 function getSources() {
   return new Promise((resolve, reject) => {
     desktopCapturer.getSources({ types: ['screen'] })
-    .then(async (sources) => {
-      resolve(sources)
-    })
-    .catch(e => reject(e))
-  })
+      .then(async (sources) => {
+        resolve(sources);
+      })
+      .catch(e => reject(e));
+  });
 }
 
 async function startCapture(source) {
-  const maxDef = cue.getMaxDefinition()
-
   try {
     const stream = await navigator.mediaDevices.getUserMedia({
       audio: false,
       video: {
         mandatory: {
           chromeMediaSource: 'desktop',
           chromeMediaSourceId: source.id,
-          minWidth: maxDef.maxX,
-          maxWidth: maxDef.maxX
         }
       }
     });
@@ -38,6 +34,7 @@ function handleStream(stream) {
   video.srcObject = stream;
   video.onloadedmetadata = (e) => video.play();
 }
+
 function handleError(e) {
   console.error(e);
 }

diff --git a/src/capture/processor.js b/src/capture/processor.js
@@ -14,33 +14,39 @@ const processor = {
   },
 
   doLoad: function () {
-    const maxDef = cue.getMaxDefinition();
-
-    this.video = document.getElementById("video");
-    this.c1 = document.getElementById("c1");
-    this.c1.width = maxDef.maxX;
-    this.c1.height = maxDef.maxY;
-    this.ctx1 = this.c1.getContext("2d");
-
-    this.configureBlur(this);
-
-    /*this.c2 = document.getElementById("c2");
-    this.c2.width = maxDef.maxX
-    this.c2.height = maxDef.maxY
-    this.ctx2 = this.c2.getContext("2d");*/
+    return new Promise((resolve, reject) => {
+      this.video = document.getElementById("video");
+      this.c1 = document.getElementById("c1");
+      this.ctx1 = this.c1.getContext("2d");
+      let self = this;
+
+      this.video.addEventListener("play", function (e) {
+        const captureWidth = e.target.videoWidth;
+        const captureHeight = e.target.videoHeight;
+
+        const deviceMaxDef = cue.getMaxDefinition();
+        const deviceMaxWidth = deviceMaxDef.maxX;
+        const deviceMaxHeight = deviceMaxDef.maxY;
+
+        const captureRatio = captureWidth / captureHeight;
+
+        if (deviceMaxWidth > deviceMaxHeight) {
+          self.width = deviceMaxWidth;
+          self.height = deviceMaxWidth / captureRatio;
+        } else {
+          self.width = deviceMaxHeight * captureRatio;
+          self.height = deviceMaxHeight;
+        }
 
-    let self = this;
+        self.c1.width = self.width;
+        self.c1.height = self.height;
 
-    this.video.addEventListener("play", function () {
-      self.width = maxDef.maxX;
-      self.height = maxDef.maxY;
-      self.timerCallback();
-    }, false);
+        self.configureBlur(self);
+        self.timerCallback();
 
-    /*this.blackBars = [0, 0]
-    setInterval(() => {
-      this.checkForBlackBars()
-    }, 1000)*/
+        resolve();
+      }, false);
+    });
   },
 
   configureBlur: function (self) {
@@ -58,7 +64,6 @@ const processor = {
       if (self.blur.value < 0)
         self.blur.value = 0;
 
-      // console.log("blur changed " + self.blur.value)
       self.ctx1.filter = 'blur(' + self.blur.value + 'px)';
       config.blur = self.blur.value;
 
@@ -67,68 +72,7 @@ const processor = {
   },
 
   computeFrame: function () {
-    // this.ctx2.drawImage(this.video, 0, 0, this.width, this.height)
     this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
-    /*sx = 0;
-    sy = ((this.width * (9 / 16))/this.height) * this.blackBars[0]; // (Original Height / Canvas height) * blackbars height -> adapt mesured height to video capture real height
-    sLargeur = this.width;
-    sHauteur = this.width*(9 / 16) - ((this.width*(9 / 16)) / this.height) * (this.blackBars[0] + this.blackBars[1]);
-    dx = 0;
-    dy = 0;
-    dLargeur = this.width;
-    dHauteur = this.height;
-    this.ctx1.drawImage(this.video, sx, sy, sLargeur, sHauteur, dx, dy, dLargeur, dHauteur)
-    return;*/
-  },
-
-  checkForBlackBars: function () { // Check for how many pixels deep the image is black -> black bar height
-    let topBarHeight = 0;
-    let bottomBarHeight = 0;
-
-    for (let t = 0; t < this.height; t++) { // From top to bottom
-      // Check color on 3 points for better accuracy
-      const leftData = this.ctx2.getImageData(0, t, 1, 1).data;
-      const middleData = this.ctx2.getImageData(this.width / 2, t, 1, 1).data;
-      const rightData = this.ctx2.getImageData(this.width - 1, t, 1, 1).data;
-
-      if (leftData[0] === leftData[1] && leftData[1] === leftData[2] && leftData[2] === 0) {
-        if (rightData[0] === rightData[1] && rightData[1] === rightData[2] && rightData[2] === 0) {
-          if (middleData[0] === middleData[1] && middleData[1] === middleData[2] && middleData[2] === 0) {
-            topBarHeight++;
-          }
-        }
-      } else {
-        break;
-      }
-    }
-
-    for (let b = this.height; b > 0; b--) { // From bottom to top
-      const leftData = this.ctx2.getImageData(0, b, 1, 1).data;
-      const middleData = this.ctx2.getImageData(this.height / 2, b, 1, 1).data;
-      const rightData = this.ctx2.getImageData(this.height - 1, b, 1, 1).data;
-
-      if (leftData[0] === leftData[1] && leftData[1] === leftData[2] && leftData[2] === 0) {
-        if (rightData[0] === rightData[1] && rightData[1] === rightData[2] && rightData[2] === 0) {
-          if (middleData[0] === middleData[1] && middleData[1] === middleData[2] && middleData[2] === 0) {
-            bottomBarHeight++;
-          }
-        }
-      } else {
-        break;
-      }
-    }
-
-    // TODO : left and right detection (minor)
-
-    if (topBarHeight === 152) {
-      topBarHeight = 0;
-    }
-
-    if (bottomBarHeight === 152) {
-      bottomBarHeight = 0;
-    }
-
-    this.blackBars = [topBarHeight, bottomBarHeight];
   },
 };
 

diff --git a/src/capture/sources.js b/src/capture/sources.js
@@ -6,6 +6,10 @@ function refreshSources() {
   const sourcesEl = document.getElementById('sources');
 
   getSources().then((sources) => {
+    let selectedSource = parseInt(localStorage.getItem('selectedSource')) || 0;
+
+    console.log(selectedSource);
+
     sourcesEl.innerHTML = '';
     for (const i in sources) {
       sources[i].thumbnail = sources[i].thumbnail.toDataURL();
@@ -20,33 +24,42 @@ function refreshSources() {
       </div>`;
     }
 
-    startCapture(sources[0]);
+    startCapture(sources[selectedSource]);
 
     const sourcesButtons = document.getElementById('sources').childNodes;
+    updateSelectedSource(sourcesButtons, selectedSource);
 
     for (const button of sourcesButtons) {
-      button.addEventListener('click', (event) => {
+      button.addEventListener('click', async (event) => {
         event.stopPropagation();
-        startCapture(sources[button.id]);
-        processor.doLoad();
+        await startCapture(sources[button.id]);
 
-        sourcesButtons.forEach((_el, i) => {
-          let but = document.getElementById(i);
+        selectedSource = parseInt(button.id);
+        updateSelectedSource(sourcesButtons, selectedSource);
 
-          if (but) {
-            if (i == button.id) {
-              but.classList.add('selected');
-            } else {
-              but.classList.remove('selected');
-            }
-          }
-        });
+        processor.doLoad();
       });
     }
   });
 }
 exports.refreshSources = refreshSources;
 
+function updateSelectedSource(sourcesButtons, selectedSource) {
+  localStorage.setItem('selectedSource', selectedSource);
+
+  sourcesButtons.forEach((_el, i) => {
+    let butt = document.getElementById(i);
+
+    if (butt) {
+      if (i == selectedSource) {
+        butt.classList.add('selected');
+      } else {
+        butt.classList.remove('selected');
+      }
+    }
+  });
+}
+
 function refreshDeviceInfo() {
   const info = cue.devices;