feat: add initial code to communicate with plugins

Author: notwindstone

src/App.svelte

@@ -6,6 +6,7 @@
   import Layout from "@/Layout.svelte";
   import { getCurrentSettingsState } from "@/states/settings/settings.svelte";
   import { initializeExtensions } from "@/lib/extensions/initialize-extensions";
+  import { initializeWindow } from "@/lib/helpers/initialize-window";
 
   initializeConfig();
   initializeExtensions();
@@ -14,6 +15,12 @@
     getCurrentSettingsState().current.transitions,
   );
 
+  // to communicate with extensions
+  initializeWindow({
+    // we don't care about reactivity
+    "toEnableTransitions": getCurrentSettingsState().current.transitions,
+  });
+
   $effect(() => {
     if (toEnableTransitions) {
       document.body.removeAttribute("data-transitions-disabled");

src/components/base/Player.svelte

@@ -1,3 +1,24 @@
+<script lang="ts">
+  import { ApplicationNamespace } from "@/constants/app";
+
+  let {
+    title,
+    episode,
+  }: {
+    "title"  : string;
+    "episode": number;
+  } = $props();
+
+  $effect(() => {
+    window[ApplicationNamespace].dynamic = {
+      ...window[ApplicationNamespace].dynamic,
+      "episode": episode,
+      "title"  : title,
+    };
+    window.postMessage("tsuki_updated_window", "*");
+  });
+</script>
+
 <div
   id="extensions-player-id"
   class="aspect-media relative col-span-1 rounded-md bg-neutral-100 lg:col-span-2 dark:bg-neutral-900"

src/declarations.ts

@@ -3,17 +3,23 @@ declare global {
   interface Window {
     "__TSUKI__": {
       // won't change
-      "static": {
+      "fixed": {
         "appName"  : string;
         "appRootId": string;
         "baseUrl"  : string;
       };
       // window message event will be fired on change
       "dynamic": {
+        // have user enabled smooth transitions or no
+        "smooth" : boolean;
         // user color scheme
-        "theme" : "light" | "dark";
-        // user's search (needed for those plugins that can't use MAL ID)
-        "search": string;
+        "theme"  : "light" | "dark";
+        // anime title (needed for those plugins that can't use MAL ID)
+        "title"  : string;
+        // anime MAL ID
+        "idMal"  : number;
+        // current anime episode
+        "episode": number;
       };
     };
   }

src/lib/extensions/toggle-extension.ts

@@ -19,11 +19,11 @@ export function toggleExtension(key: string) {
 
   if (toDisable) {
     // notify the extension that it was disabled
-    window.postMessage(`tsuki_disable_${key}`);
+    window.postMessage(`tsuki_disable_${key}`, "*");
 
     return;
   }
 
   // notify the extension that it was enabled
-  window.postMessage(`tsuki_enable_${key}`);
+  window.postMessage(`tsuki_enable_${key}`, "*");
 }

src/lib/helpers/initialize-window.ts

@@ -0,0 +1,22 @@
+import { ApplicationName, ApplicationNamespace, ApplicationRootID, BaseURL } from "@/constants/app";
+
+export function initializeWindow({
+  toEnableTransitions,
+}: {
+  "toEnableTransitions": boolean;
+}) {
+  window[ApplicationNamespace] = {
+    "fixed": {
+      "appName"  : ApplicationName,
+      "appRootId": ApplicationRootID,
+      "baseUrl"  : BaseURL,
+    },
+    "dynamic": {
+      "smooth" : toEnableTransitions,
+      "theme"  : "dark",
+      "title"  : "",
+      "idMal"  : 0,
+      "episode": 1,
+    },
+  };
+}

src/pages/Anime.svelte

@@ -144,7 +144,10 @@
     <!-- and will be on the two different rows on smaller screens -->
     <div class="grid cols-1 rows-3 h-full w-full gap-4 lg:cols-3 lg:rows-1 sm:rows-2">
       <!-- all player extensions will mount on this element -->
-      <Player />
+      <Player
+        title={title.toLowerCase()}
+        episode={selectedEpisode}
+      />
       <!-- min-h-48 here to fix some issues with old browsers -->
       <div class="relative col-span-1 row-span-2 min-h-48 sm:row-span-1">
         <!-- the only way to ensure that episode selector will not exceed player's height -->