Merge pull request #4 from andrewbrey/feature/settings

main/background.ts

@@ -1,10 +1,10 @@
+import fetch from "cross-fetch";
 import { app, BrowserWindow, globalShortcut, webFrameMain } from "electron";
 import { ipcMain as ipc } from "electron-better-ipc";
 import serve from "electron-serve";
 import { readFile } from "fs/promises";
-import fetch from "cross-fetch";
 import { join } from "path";
-import { createWindow } from "./helpers";
+import { createWindow, getUserSettings } from "./helpers";
 import { omitSecurityHeadersAndBlockAds } from "./helpers/web-requests";
 
 const isProd: boolean = process.env.NODE_ENV === "production";
@@ -14,7 +14,8 @@ const port = process.argv[2];
 const devURL = `http://localhost:${port}`;
 
 let mainWindow: BrowserWindow | undefined;
-let experimentalVideoCSS = false;
+let userSettings = getUserSettings();
+let experimentalVideoCSS = userSettings.get("focusVideo", false);
 let forceDetachKeybindActive = false;
 const videoCSSOnScript =
  'document.documentElement.classList.add("flot-video");';
@@ -172,12 +173,15 @@ if (isProd) {
  }
 })();
 
+ipc.answerRenderer("ask-video-css-enabled", () => experimentalVideoCSS);
 ipc.answerRenderer("please-enable-video-css", () => {
  getFlotEmbed()?.executeJavaScript(videoCSSOnScript);
+ userSettings.set("focusVideo", true);
  experimentalVideoCSS = true;
 });
 ipc.answerRenderer("please-disable-video-css", () => {
  getFlotEmbed()?.executeJavaScript(videoCSSOffScript);
+ userSettings.set("focusVideo", false);
  experimentalVideoCSS = false;
 });
 ipc.answerRenderer("please-detach", () =>

main/helpers/index.ts

@@ -1,3 +1,4 @@
-import createWindow from './create-window';
+import createWindow from "./create-window";
+import getUserSettings from "./user-settings";
 
-export { createWindow };
+export { createWindow, getUserSettings };

main/helpers/user-settings.ts

@@ -0,0 +1,18 @@
+import Store from "electron-store";
+
+interface UserSettings {
+ focusVideo: boolean;
+}
+
+export default () => {
+ const name = `user-settings`;
+ const defaultState: UserSettings = {
+ focusVideo: false,
+ };
+ const store = new Store<UserSettings>({
+ name,
+ defaults: { ...defaultState },
+ });
+
+ return store;
+};

renderer/components/FlotControls.tsx

@@ -28,6 +28,12 @@ function FlotControls() {
  const [detach, setDetach] = React.useState(false);
  const [opacity, setOpacity] = React.useState(1);
 
+ React.useEffect(() => {
+ ipc
+ .callMain<string, boolean>("ask-video-css-enabled")
+ .then((videoHasFocus) => setFocusVideo(videoHasFocus));
+ }, []);
+
  React.useEffect(() => setOpacity(storeOpacity), [storeOpacity]);
 
  React.useEffect(() => {
@@ -260,7 +266,10 @@ function FlotControls() {
  htmlFor="detach-mode-option"
  className="ml-2 font-medium text-sm text-teal-300 select-none"
  >
- Ignore clicks
+ Ignore clicks{" "}
+ <code className="tracking-tighter bg-teal-800 px-0.5 rounded italic">
+ (ctrl+alt+i)
+ </code>
  </label>
  </div>
  <div className="text-sm">