[UI classic] Media clear menu on rightclick

web/src/frontend/classic/components/Media.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { run } from 'svelte/legacy';
+
     import { fade } from 'svelte/transition';
     import {
         Button,
@@ -21,30 +23,36 @@
         MediaChild,
     } from '../../../engine/providers/MediaPlugin';
     import { Bookmark } from '../../../engine/providers/Bookmark';
-    import { onDestroy, onMount } from 'svelte';
+    import { mount, onDestroy, onMount } from 'svelte';
     import type { MediaContainer2 } from '../Types';
 
-    export let style = '';
 
-    export let media: MediaContainer2;
-    let selected: boolean = false;
-    $: selected = $selectedMedia?.IsSameAs(media);
+    interface Props {
+        style?: string;
+        media: MediaContainer2;
+    }
+
+    let { style = '', media }: Props = $props();
+    let selected: boolean = $derived($selectedMedia?.IsSameAs(media));
 
     //Bookmarks
-    $: isBookmarked = media
-        ? HakuNeko.BookmarkPlugin.IsBookmarked(media)
-        : false;
+    let isBookmarked=$state(false);
+    $effect(() => {
+        isBookmarked = media
+            ? HakuNeko.BookmarkPlugin.IsBookmarked(media)
+            : false;
+    });
     async function toggleBookmark() {
         isBookmarked = await window.HakuNeko.BookmarkPlugin.Toggle(media);
     }
-    $: isOrphaned =
-        isBookmarked && (media as Bookmark).IsOrphaned ? true : false;
+    let isOrphaned =
+        $derived(isBookmarked && (media as Bookmark).IsOrphaned ? true : false);
 
     //Context menu
-    let mediadiv: HTMLElement;
+    let mediadiv: HTMLElement = $state();
 
     //Unviewed content
-    let unFlaggedItems: MediaContainer<MediaChild>[] = [];
+    let unFlaggedItems: MediaContainer<MediaChild>[] = $state([]);
     let delayedContentCheck;
 
 
@@ -58,38 +66,59 @@
             )) as MediaContainer<MediaChild>[];
         },delay);
     }
-    $:findMediaUnFlaggedContent(media);
+    findMediaUnFlaggedContent(media);
+
     onMount(() => {
         HakuNeko.ItemflagManager.ContainerFlagsEventChannel.Subscribe(
             async(updatedmedia:MediaContainer<MediaChild>) => {
                 if (updatedmedia.IsSameAs(media)) findMediaUnFlaggedContent(media);
             }
         );
+       
     });
 
     onDestroy(() => {
         clearTimeout(delayedContentCheck);
         HakuNeko.ItemflagManager.ContainerFlagsEventChannel.Unsubscribe(findMediaUnFlaggedContent);
+        document.removeEventListener('contextmenu', outsideClickListener);
     });
+
+    // clear menu when right click outside
+    let menuOpen = $state(false);
+
+    function outsideClickListener(event) {
+        if (open && !mediadiv.contains(event.target)) {
+            menuOpen=false;
+            document.removeEventListener('contextmenu', outsideClickListener);
+        }
+    }
+    function menuOpens() {
+        document.addEventListener('contextmenu', outsideClickListener);
+    }
     
+
 </script>
 
-<ContextMenu target={[mediadiv]}>
-    <ContextMenuOption indented labelText="Browse Chapters" shortcutText="⌘B" />
+<ContextMenu target={[mediadiv]} bind:open={menuOpen} on:open={menuOpens}>
+    <ContextMenuOption indented labelText="Browse Chapters" shortcutText="⌘B" 
+        onclick={() => {$selectedMedia = media;}}
+    />
     <ContextMenuOption
         indented
         labelText={isBookmarked ? 'Remove from Bookmarks' : 'Add to Bookmarks'}
         shortcutText="⌘F"
         onclick={toggleBookmark}
     />
+    <!--
     <ContextMenuDivider />
     <ContextMenuOption indented labelText="Trackers">
-        <!--{#each window.HakuNeko.PluginController.InfoTrackers as tracker}
-            <ContextMenuOption labelText="{tracker.Title}" onclick={() => {selectedTracker=tracker; isTrackerModalOpen=true;}} />
-        {/each}
-            -->
+    {#each window.HakuNeko.PluginController.InfoTrackers as tracker}
+    <ContextMenuOption labelText="{tracker.Title}" onclick={() => {selectedTracker=tracker; isTrackerModalOpen=true;}} />
+    {/each}
     </ContextMenuOption>
     <ContextMenuDivider />
+            -->
+
 </ContextMenu>
 
 <div bind:this={mediadiv} class="media" {style} in:fade class:selected>