Merge pull request #6 from isaxk/dev

HOT FIX: Remove toggle dev tools

src/main/tabs/index.ts

@@ -73,7 +73,6 @@ export async function createTabManager(mainWindow: BrowserWindow) {
       view.webContents.send("remoteControl:execute", command, value);
     });
 
-    view.webContents.toggleDevTools();
 
     let loaded = false;
     let oldCssKey: string | null = null;
@@ -93,7 +92,6 @@ export async function createTabManager(mainWindow: BrowserWindow) {
       });
     });
 
-    view.webContents.toggleDevTools();
 
     // async function updateCustomCss() {
     //   let ytCss = JSON.parse(store.get("music-css", "")!);

src/renderer/src/components/ui/IconButton.svelte

@@ -15,7 +15,7 @@
 <button
   on:click={handleClick}
   class="no-drag rounded p-2 transition-colors duration-200 {disabled
-    ? 'text-zinc-500 dark:text-zinc-500 cursor-not-allowed'
+    ? 'text-zinc-400 dark:text-zinc-500 cursor-not-allowed'
     : 'text-zinc-700 hover:bg-zinc-200 dark:text-zinc-300 hover:dark:bg-neutral-700'}"
 >
   <svelte:component this={icon} size={16} />

src/renderer/src/lib/stores.ts

@@ -2,5 +2,7 @@ import { writable } from "svelte/store";
 import type { musicStore } from "./types";
 
 export const activeView = writable("topbar");
-export const musicDataStore = writable<musicStore | null>(null);
+export const musicDataStore = writable<musicStore | { data: null }>({
+  data: null,
+});
 export const theme = writable<"light" | "dark" | null>(null);

src/renderer/src/views/MenuBar.svelte

@@ -11,7 +11,7 @@
   export let active;
   export let tabs;
 
-  $: miniplayerEnabled = $musicDataStore !== null;
+  $: miniplayerEnabled = $musicDataStore.data !== null;
 
   musicDataStore.subscribe((e) => {
     console.log("musicDataStore", e);

website/package.json

@@ -23,6 +23,7 @@
   },
   "type": "module",
   "dependencies": {
+    "@arisbh/marqueeck": "^0.5.0",
     "svelte-inview": "^4.0.2"
   }
 }

website/src/lib/ThemeMarquee.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import Marqueeck from "@arisbh/marqueeck";
+  import { fade, fly } from "svelte/transition";
+
+  let images = ["theme1.png", "theme2.png", "theme3.png"];
+</script>
+
+<section
+  class="relative m-auto flex h-96 max-w-screen-lg items-center"
+  in:fade={{ duration: 200, delay: 0 }}
+>
+  <Marqueeck>
+    {#each images as image}
+      <img src={image} alt="Theme" class="w-96" />
+    {/each}
+  </Marqueeck>
+  <div class="absolute inset-0 flex items-center justify-center">
+    <div class="">
+      <div class="flex w-80 flex-col text-6xl font-bold text-white">
+        <div class="shadow-black [text-shadow:_2px_2px_10px_rgb(0_0_0_/_80%)]" in:fly={{duration: 400, x: 50, delay: 200}}>
+          Custom
+        </div>
+        <div
+        in:fly={{duration: 400, x: -50, delay: 300}}
+          class="w-full text-right shadow-black [text-shadow:_2px_2px_10px_rgb(0_0_0_/_80%)]"
+        >
+          Theming
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="absolute -left-6 bottom-0 top-0 w-24 bg-gradient-to-l from-transparent via-20% via-transparent to-neutral-900"
+  ></div>
+  <div
+    class="absolute -right-6 bottom-0 top-0 w-24 bg-gradient-to-r from-transparent via-20% via-transparent to-neutral-900"
+  ></div>
+</section>