Merge pull request #4 from isaxk/dev

Custom css theming support and force cinema mode

src/main/index.ts

@@ -11,7 +11,6 @@ import { discordClient } from "./intergrations/discord";
 import { initPlayerEvents } from "./player";
 import { createTabManager } from "./tabs";
 import { createMainWindowManager, MainWindowManager } from "./windows";
-import { downloadCss, loadCss } from "./utils/customcss";
 
 const store = factory();
 

src/main/player/index.ts

@@ -28,6 +28,8 @@ export function initPlayerEvents(mainWindowManager: MainWindowManager) {
     }
   });
 
+  mainWindowManager.window.webContents.send("video-data-changed", null);
+
   ipcMain.on("ytmView:storeStateChanged", (_, _queue, _like, v) => {
     volume = v;
     mainWindowManager.window.webContents.send("volume-changed", v);

src/main/tabs/index.ts

@@ -18,14 +18,10 @@ function windowOpenHandler(details): WindowOpenHandlerResponse {
   };
 }
 
-async function updateCustomCss(
-  key: string,
-  oldCssKey: string | null,
-  view: WebContentsView,
-) {
+async function updateCustomCss(key: string, view: WebContentsView) {
   let ytCss = JSON.parse(store.get(key, "")!);
   return new Promise<string | null>(async (resolve) => {
-    if (ytCss.enabled===true) {
+    if (ytCss.enabled === true) {
       if (ytCss.type === "url") {
         await loadCss(ytCss.url).then(async (css) => {
           resolve(await view.webContents.insertCSS(css));
@@ -92,7 +88,7 @@ export async function createTabManager(mainWindow: BrowserWindow) {
     });
 
     view.webContents.on("dom-ready", async () => {
-      await updateCustomCss("music-css", oldCssKey, view).then((key) => {
+      await updateCustomCss("music-css", view).then((key) => {
         oldCssKey = key;
       });
     });
@@ -141,11 +137,12 @@ export async function createTabManager(mainWindow: BrowserWindow) {
       },
       updateCss: async () => {
         if (oldCssKey !== null) {
-          await view.webContents.removeInsertedCSS(oldCssKey).then(()=>console.log("remove"));
+          await view.webContents
+            .removeInsertedCSS(oldCssKey)
+            .then(() => console.log("remove"));
         }
-        await updateCustomCss("music-css", oldCssKey, view).then((key) => {
+        await updateCustomCss("music-css", view).then((key) => {
           oldCssKey = key;
-
         });
       },
     };
@@ -261,9 +258,10 @@ export async function createTabManager(mainWindow: BrowserWindow) {
     let oldCssKey: string | null = null;
 
     view.webContents.on("dom-ready", async () => {
-      await updateCustomCss("yt-css", oldCssKey, view).then((key) => {
+      await updateCustomCss("yt-css", view).then((key) => {
         oldCssKey = key;
       });
+      view.webContents.send("force-cinema", store.get("force-cinema", false));
     });
 
     return {
@@ -286,7 +284,7 @@ export async function createTabManager(mainWindow: BrowserWindow) {
         if (oldCssKey !== null) {
           await view.webContents.removeInsertedCSS(oldCssKey);
         }
-        await updateCustomCss("yt-css", oldCssKey, view).then((key) => {
+        await updateCustomCss("yt-css", view).then((key) => {
           oldCssKey = key;
         });
       },
@@ -399,6 +397,15 @@ export async function createTabManager(mainWindow: BrowserWindow) {
     }
   });
 
+  ipcMain.on("set-config", (_, e) => {
+    if (e.key === "force-cinema") {
+      tabs.forEach((tab) => {
+        tab.data().type === "yt" ??
+          tab.view.webContents.send("force-cinema", e.value);
+      });
+    }
+  });
+
   return {
     getTabs: () => {
       return tabs;

src/main/utils/customcss.ts

@@ -45,28 +45,27 @@ export function downloadCss(url: string) {
 //   );
 // });
 
-export function loadCss(url:string) {
+export function loadCss(url: string) {
   return new Promise<string>((resolve) => {
-    if(url==="") {
+    if (url === "") {
       resolve("");
       return;
     }
-    https.get(url, res => {
-      let data = ''
-      const headerDate = res.headers && res.headers.date ? res.headers.date : 'no response date';
-
-      // @ts-ignore
-      res.on('data', (chunk:any) => {
-        data += chunk;
-      });
-
-      res.on('end', () => {
-        resolve(data)
+    https
+      .get(url, (res) => {
+        let data = "";
+
+        // @ts-ignore
+        res.on("data", (chunk: any) => {
+          data += chunk;
+        });
+
+        res.on("end", () => {
+          resolve(data);
+        });
+      })
+      .on("error", (err) => {
+        console.log("Error: ", err.message);
       });
-    }).on('error', err => {
-      console.log('Error: ', err.message);
-    });
-  }
-)
-
+  });
 }

src/main/windows/index.ts

@@ -33,15 +33,15 @@ function updateTheme(mainWindow: BrowserWindow) {
 }
 
 switch (store.get("theme")) {
-  case "system":
-    bgColor = nativeTheme.shouldUseDarkColors ? darkBg : lightBg;
-    break;
   case "light":
     bgColor = lightBg;
     break;
   case "dark":
     bgColor = darkBg;
     break;
+  default:
+    bgColor = nativeTheme.shouldUseDarkColors ? darkBg : lightBg;
+    break;
 }
 
 export type MainWindowManager = {
@@ -57,7 +57,7 @@ app.on("before-quit", () => {
 export function createMainWindowManager() {
   const mainWindow = new BrowserWindow({
     minWidth: 800,
-    minHeight: 450,
+    minHeight: 670,
     width: 1200,
     height: 700,
     titleBarStyle: "hiddenInset",
@@ -114,7 +114,7 @@ export function createMainWindowManager() {
     mainWindow.setMaximizable(true);
     mainWindow.setFullScreenable(true);
     mainWindow.setAlwaysOnTop(false);
-    mainWindow.setMinimumSize(800, 450);
+    mainWindow.setMinimumSize(800, 670);
   });
 
   mainWindow.on("close", (e) => {

src/preload/index.ts

@@ -50,7 +50,7 @@ export const api = {
     ipcRenderer.send("close-miniplayer");
   },
   onVideoDataChange: (listener: Function) => {
-    ipcRenderer.on("video-data-changed", (_, data) => {
+    ipcRenderer.on("video-data-changed", (_, data: musicData) => {
       listener(data);
     });
   },

src/preload/music.ts

@@ -800,12 +800,12 @@ async function hookPlayerApiEvents() {
   (await webFrame.executeJavaScript(hookPlayerApiEventsScript))();
 }
 
-function overrideHistoryButtonDisplay() {
-  // @ts-expect-error Style is reported as readonly but this still works
-  document.querySelector<HTMLElement>(
-    "#history-link tp-yt-paper-icon-button",
-  ).style = "display: inline-block !important;";
-}
+// function overrideHistoryButtonDisplay() {
+//   // @ts-expect-error Style is reported as readonly but this still works
+//   document.querySelector<HTMLElement>(
+//     "#history-link tp-yt-paper-icon-button",
+//   ).style = "display: inline-block !important;";
+// }
 
 function getYTMTextRun(runs: { text: string }[]) {
   let final = "";
@@ -932,7 +932,6 @@ window.addEventListener("load", async () => {
   await createAdditionalPlayerBarControls();
   await hideChromecastButton();
   await hookPlayerApiEvents();
-  overrideHistoryButtonDisplay();
 
   // const integrationScripts: { [integrationName: string]: { [scriptName: string]: string } } = await ipcRenderer.invoke("ytmView:getIntegrationScripts");
 

src/preload/yt.ts

@@ -71,3 +71,19 @@ ipcRenderer.on("picture-in-picture", async () => {
     `)
   )();
 });
+
+ipcRenderer.on("force-cinema", async (_, is: boolean) => {
+  if (is) {
+    (
+      await webFrame.executeJavaScript(`
+      document.cookie = 'wide=1; expires='+new Date('3099').toUTCString()+'; path=/';
+    `)
+    )();
+  } else {
+    (
+      await webFrame.executeJavaScript(`
+      document.cookie = 'wide=0; expires='+new Date('3099').toUTCString()+'; path=/';
+    `)
+    )();
+  }
+});

src/renderer/src/components/settings/SettingItem.svelte

@@ -75,7 +75,7 @@
             key,
             JSON.stringify({
               ...value,
-              enabled: e
+              enabled: e,
             }),
           );
         }}
@@ -105,19 +105,19 @@
           }, 400);
         }}
       >
-        <div class="mb-4 rounded-md border dark:border-neutral-600">
+        <div class="pb-4 rounded-md border dark:border-neutral-600">
           <Tabs.List
-            class="flex w-full justify-stretch rounded bg-neutral-800 p-1 text-center"
+            class="flex w-full justify-stretch rounded bg-zinc-200 p-1 text-center dark:bg-neutral-800"
           >
             <Tabs.Trigger
               value="url"
-              class="w-full rounded p-1 data-[state=active]:bg-neutral-700"
+              class="w-full rounded p-1 data-[state=active]:bg-white data-[state=active]:font-medium data-[state=active]:dark:bg-neutral-700"
               >URL</Tabs.Trigger
             >
             <Tabs.Trigger
               value="editor"
-              class="w-full rounded p-1 data-[state=active]:bg-neutral-700"
-              >Editor</Tabs.Trigger
+              class="w-full rounded p-1 data-[state=active]:bg-white data-[state=active]:font-medium data-[state=active]:dark:bg-neutral-700"
+              >Editor <span class="text-xs font-light">(advanced)</span></Tabs.Trigger
             >
           </Tabs.List>
           <div
@@ -152,7 +152,7 @@
                     }),
                   );
                 }}
-                class="h-full w-full bg-transparent p-2 font-mono outline-none text-sm"
+                class="h-full w-full bg-transparent p-2 font-mono text-sm outline-none"
                 placeholder="Paste or type css code here..."
               ></textarea>
             </Tabs.Content>

src/renderer/src/components/settings/SidebarTab.svelte

@@ -8,7 +8,8 @@
 
 <Tabs.Trigger
   {value}
-  class="text-left p-4 transition-[background-color] flex rounded items-center text-neutral-600 dark:text-zinc-300 gap-2 w-full hover:text-current data-[state=active]:bg-zinc-200 data-[state=active]:dark:bg-neutral-700 data-[state=active]:text-current"
+  class="flex w-full items-center gap-2 rounded p-4 text-left text-neutral-600 transition-[background-color] hover:text-current data-[state=active]:bg-zinc-200 data-[state=active]:text-current dark:text-zinc-300 data-[state=active]:dark:bg-neutral-700 {value ===
+    'about' ?? 'self-end mt-auto'}"
 >
   <div class="">
     <svelte:component this={icon} size={18} />