renderer.js

const { ipcRenderer, shell, remote } = require('electron');
const path = require('path');

async function initOBS() {
  const result = await ipcRenderer.invoke('recording-init');
  console.debug("initOBS result:", result);
  if (result) {
    ipcRenderer.on("performanceStatistics", (_event, data) => onPerformanceStatistics(data));
  }
}

async function startRecording() {
  const result = await ipcRenderer.invoke('recording-start');
  console.debug("startRecording result:", result);
  return result;
}

async function stopRecording() {
  const result = await ipcRenderer.invoke('recording-stop');
  console.debug("stopRecording result:", result);
  return result;
}

let recording = false;
let recordingStartedAt = null;
let timer = null;

async function switchRecording() {
  if (recording) {
    recording = (await stopRecording()).recording;
  } else {
    recording = (await startRecording()).recording;
  }
  updateUI();
}

function updateUI() {
  const button = document.getElementById('rec-button');
  button.disabled = false;
  if (recording) {
    button.innerText = '⏹️ Stop recording'
    startTimer();
  } else {
    button.innerText = '⏺️ Start recording'
    stopTimer();
  }
}

function startTimer() {
  recordingStartedAt = Date.now();
  timer = setInterval(updateTimer, 100);
}

function stopTimer() {
  clearInterval(timer);
}

function updateTimer() {
  const diff = Date.now() - recordingStartedAt;
  const timerElem = document.getElementById('rec-timer');
  const decimals = `${Math.floor(diff % 1000 / 100)}`;
  const seconds  = `${Math.floor(diff % 60000 / 1000)}`.padStart(2, '0');
  const minutes  = `${Math.floor(diff % 3600000 / 60000)}`.padStart(2, '0');
  const hours    = `${Math.floor(diff / 3600000)}`.padStart(2, '0');
  timerElem.innerText = `${hours}:${minutes}:${seconds}.${decimals}`;
}

function openFolder() {
  shell.openPath(remote.app.getPath("videos"));
}

function onPerformanceStatistics(data) {
  document.querySelector(".performanceStatistics #cpu").innerText = `${data.CPU} %`;
  document.querySelector(".performanceStatistics #cpuMeter").value = data.CPU;
  document.querySelector(".performanceStatistics #numberDroppedFrames").innerText = data.numberDroppedFrames;
  document.querySelector(".performanceStatistics #percentageDroppedFrames").innerText = `${data.percentageDroppedFrames} %`;
  document.querySelector(".performanceStatistics #bandwidth").innerText = data.bandwidth;
  document.querySelector(".performanceStatistics #frameRate").innerText = `${Math.round(data.frameRate)} fps`;
}

const previewContainer = document.getElementById('preview');

async function setupPreview() {
  const { width, height, x, y } = previewContainer.getBoundingClientRect();
  const result = await ipcRenderer.invoke('preview-init', { width, height, x, y });
  previewContainer.style = `height: ${result.height}px`;
}

async function resizePreview() {
  const { width, height, x, y } = previewContainer.getBoundingClientRect();
  const result = await ipcRenderer.invoke('preview-bounds', { width, height, x, y });
  previewContainer.style = `height: ${result.height}px`;
}

const currentWindow = remote.getCurrentWindow();
currentWindow.on('resize', resizePreview);
document.addEventListener("scroll",  resizePreview);
var ro = new ResizeObserver(resizePreview);
ro.observe(document.querySelector("#preview"));

try {
  initOBS();
  setupPreview();
  updateUI();
} catch (err) {
  console.log(err)
}