Add more options, update detection, and move to tray icon.

Author: hperrin

README.md

@@ -16,13 +16,28 @@ Duplicate `config.template.json` in the `resources/app` folder to `config.json`,
 
 You can also use this app from the command line, by providing the URL as the argument. Use `stream-overlay --help` to see all the available options.
 
+## Interaction
+
+You can see a list of your windows from the "Sylphweed's Stream Overlay" tray icon. Right click the icon to show the menu. You can also exit the app from here.
+
+When a window is focused (by clicking it from the tray icon menu) it will have an opaque background, and a handle to drag it around. Once it loses focus, it will go back to transparent, and will ignore all mouse events. It will be click-through, so you can click the apps behind it.
+
 ## Fullscreen Apps
 
-Stream Overlay doesn't work over fullscreen apps, so your app needs to be in "borderless window" or "borderless fullscreen" to allow Stream Overlay on top of it. If it's still not appearing on top, try setting it to windowed mode then back to borderless.
+Stream Overlay doesn't work over fullscreen apps, so your app needs to be in "borderless" or "borderless fullscreen" to allow Stream Overlay on top of it. If it's still not appearing on top, try setting it to windowed mode then back to borderless.
 
-## Interaction
+## Config Options
+
+These are the available options for each config entry (window):
 
-When a window is focused (by clicking it on the taskbar/dock) it will have an opaque background, and a handle to drag it around. Once it loses focus, it will go back to transparent, and will ignore all mouse events. It will be click-through, so you can click the apps behind it.
+- `title`: The window title.
+- `url`: The URL of the page to show in the window.
+- `width`: The width, in pixels, of the window, if it's not full screen.
+- `height`: The height, in pixels, of the window, if it's not full screen.
+- `x`: The X coordinate, in pixels, of the window, if it's not full screen.
+- `y`: The Y coordinate, in pixels, of the window, if it's not full screen.
+- `opacity`: The opacity of the window as a number between 0 and 1, inclusive. This is not implemented in Linux.
+- `fullscreen`: Whether the window should be positioned full screen. (true/false) Be careful with this, as opaque windows can obscure your screen.
 
 ## Support Me
 

assets/help.html

@@ -45,24 +45,64 @@ <h2>Usage</h2>
       available options.
     </p>
 
-    <h2>Fullscreen Apps</h2>
+    <h2>Interaction</h2>
 
     <p>
-      Stream Overlay doesn't work over fullscreen apps, so your app needs to be
-      in "borderless window" or "borderless fullscreen" to allow Stream Overlay
-      on top of it. If it's still not appearing on top, try setting it to
-      windowed mode then back to borderless.
+      You can see a list of your windows from the "Sylphweed's Stream Overlay"
+      tray icon. Right click the icon to show the menu. You can also exit the
+      app from here.
     </p>
 
-    <h2>Interaction</h2>
+    <p>
+      When a window is focused (by clicking it from the tray icon menu) it will
+      have an opaque background, and a handle to drag it around. Once it loses
+      focus, it will go back to transparent, and will ignore all mouse events.
+      It will be click-through, so you can click the apps behind it.
+    </p>
+
+    <h2>Fullscreen Apps</h2>
 
     <p>
-      When a window is focused (by clicking it on the taskbar/dock) it will have
-      an opaque background, and a handle to drag it around. Once it loses focus,
-      it will go back to transparent, and will ignore all mouse events. It will
-      be click-through, so you can click the apps behind it.
+      Stream Overlay doesn't work over fullscreen apps, so your app needs to be
+      in "borderless" or "borderless fullscreen" to allow Stream Overlay on top
+      of it. If it's still not appearing on top, try setting it to windowed mode
+      then back to borderless.
     </p>
 
+    <h2>Config Options</h2>
+
+    <p>These are the available options for each config entry (window):</p>
+
+    <ul>
+      <li><code>title</code>: The window title.</li>
+      <li><code>url</code>: The URL of the page to show in the window.</li>
+      <li>
+        <code>width</code>: The width, in pixels, of the window, if it's not
+        full screen.
+      </li>
+      <li>
+        <code>height</code>: The height, in pixels, of the window, if it's not
+        full screen.
+      </li>
+      <li>
+        <code>x</code>: The X coordinate, in pixels, of the window, if it's not
+        full screen.
+      </li>
+      <li>
+        <code>y</code>: The Y coordinate, in pixels, of the window, if it's not
+        full screen.
+      </li>
+      <li>
+        <code>opacity</code>: The opacity of the window as a number between 0
+        and 1, inclusive. This is not implemented in Linux.
+      </li>
+      <li>
+        <code>fullscreen</code>: Whether the window should be positioned full
+        screen. (true/false) Be careful with this, as opaque windows can obscure
+        your screen.
+      </li>
+    </ul>
+
     <h2>Support Me</h2>
 
     <p>

assets/page.html

@@ -11,16 +11,23 @@
       http-equiv="X-Content-Security-Policy"
       content="default-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'; child-src 'self' *"
     />
-    <title>SylphWeed's Stream Overlay</title>
+    <title>Stream Overlay</title>
 
     <link rel="stylesheet" href="./page.css" />
   </head>
   <body>
     <div class="drag-handle">
       <div class="bar">
-        <span>SylphWeed's Stream Overlay</span>
+        <span id="title">Stream Overlay</span>
+      </div>
+      <div id="close">
+        <svg style="width: 16px; height: 16px" viewBox="0 0 24 24">
+          <path
+            fill="currentColor"
+            d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+          />
+        </svg>
       </div>
-      <div id="close">&times;</div>
     </div>
     <iframe
       src="about:blank"

assets/preload.js

@@ -3,7 +3,7 @@ const { contextBridge, ipcRenderer } = require('electron');
 contextBridge.exposeInMainWorld('electronAPI', {
   onFocus: (callback) => ipcRenderer.on('focus', callback),
   onBlur: (callback) => ipcRenderer.on('blur', callback),
-  url: (callback) => ipcRenderer.on('url', callback),
-  requestUrl: () => ipcRenderer.invoke('requestUrl'),
+  config: (callback) => ipcRenderer.on('config', callback),
+  requestConfig: () => ipcRenderer.invoke('requestConfig'),
   requestClose: () => ipcRenderer.invoke('requestClose'),
 });

assets/renderer.js

@@ -2,8 +2,16 @@ window.electronAPI.onFocus(() => document.body.classList.add('focused'));
 window.electronAPI.onBlur(() => document.body.classList.remove('focused'));
 
 const frame = document.getElementById('frame');
-window.electronAPI.url((_event, url) => (frame.src = url));
-window.electronAPI.requestUrl();
+window.electronAPI.config((_event, config) => {
+  // Page title.
+  document.getElementsByTagName('title')[0].innerText =
+    config.title || 'Stream Overlay';
+  // Title bar.
+  document.getElementById('title').innerText = config.title || 'Stream Overlay';
+  // Frame URL.
+  frame.src = config.url;
+});
+window.electronAPI.requestConfig();
 
 document
   .getElementById('close')

config.template.json

@@ -1,12 +1,14 @@
 [
   {
+    "title": "Chat",
     "url": "https://streamlabs.com/widgets/chat-box/v1/YOURSECRETCODE",
     "width": 450,
     "height": 650,
     "x": 50,
     "y": -1
   },
   {
+    "title": "Alerts",
     "url": "https://streamlabs.com/alert-box/v3/YOURSECRETCODE",
     "width": 600,
     "height": 600,