fix(player): fix player menu not working in dedicated window

PKM-er · Feb 14, 2024 · f3c7454 · f3c7454
1 parent 085c0ca
commit f3c7454
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 57 deletions.
diff --git a/apps/app/src/components/player/menus.tsx b/apps/app/src/components/player/menus.tsx
@@ -5,7 +5,9 @@ import {
   useMediaPlayer,
   useMediaState,
 } from "@vidstack/react";
+import { around } from "monkey-around";
 import { Menu } from "obsidian";
+import { useRef } from "react";
 import { MoreIcon, SubtitlesIcon } from "@/components/icon";
 import { showAtButton } from "@/lib/menu";
 import {
@@ -17,32 +19,51 @@ import {
 } from "../context";
 import { dataLpPassthrough } from "./buttons";
 
+function useMenu(onMenu: (menu: Menu) => boolean) {
+  const menuRef = useRef<Menu | null>(null);
+  return (evt: React.MouseEvent) => {
+    menuRef.current?.close();
+    menuRef.current = null;
+    const menu = new Menu();
+    if (onMenu(menu)) {
+      showAtButton(evt.nativeEvent, menu);
+      evt.nativeEvent.stopImmediatePropagation();
+      around(menu, {
+        close: (next) =>
+          function (this: Menu, ...args) {
+            if (menuRef.current === this) menuRef.current = null;
+            return next.call(this, ...args);
+          },
+      });
+      menuRef.current = menu;
+    } else {
+      menu.close();
+    }
+  };
+}
+
 export function Captions() {
   const options = useCaptionOptions();
   const tracks = useMediaState("textTracks");
+  const onClick = useMenu((menu) => {
+    options.forEach(({ label, select, selected }, idx, options) => {
+      menu.addItem((item) => {
+        if (options.length === 2 && label === "Unknown") {
+          label = "On";
+        }
+        item.setTitle(label).setChecked(selected).onClick(select);
+      });
+    });
+    return true;
+  });
 
   if (tracks.length === 0) return null;
 
   return (
     <button
       className="group ring-mod-border-focus relative inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-md outline-none ring-inset hover:bg-white/20 focus-visible:ring-2 aria-disabled:hidden"
       {...{ [dataLpPassthrough]: true }}
-      onClick={(evt) => {
-        const menu = new Menu();
-        // menu.addItem((item) =>
-        //   item.setIsLabel(true).setTitle("Caption " + hint),
-        // );
-        options.forEach(({ label, select, selected }, idx, options) => {
-          menu.addItem((item) => {
-            if (options.length === 2 && label === "Unknown") {
-              label = "On";
-            }
-            item.setTitle(label).setChecked(selected).onClick(select);
-          });
-        });
-        showAtButton(evt.nativeEvent, menu);
-        evt.nativeEvent.stopImmediatePropagation();
-      }}
+      onClick={onClick}
       aria-label="Select Caption"
     >
       <SubtitlesIcon className="w-7 h-7" />
@@ -57,42 +78,42 @@ export function MoreOptions() {
   const isEmbed = useIsEmbed();
   const source = useMediaViewStore((state) => state.source?.url);
   const store = useMediaViewStoreInst();
+  const onClick = useMenu((menu) => {
+    if (!player || !source) return false;
+    const {
+      toggleControls,
+      controls,
+      setTransform,
+      transform,
+      disableWebFullscreen,
+      toggleWebFullscreen,
+    } = store.getState();
+    workspace.trigger(
+      "mx-media-menu",
+      menu,
+      {
+        player,
+        source,
+        toggleControls,
+        controls,
+        setTransform,
+        transform,
+        plugin,
+        disableWebFullscreen,
+        toggleWebFullscreen,
+      },
+      isEmbed ? "player-menu-embed" : "player-menu-view",
+    );
+    return true;
+  });
 
   if (!player || !source) return null;
 
   return (
     <button
       className="group ring-mod-border-focus relative inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-md outline-none ring-inset hover:bg-white/20 focus-visible:ring-2 aria-disabled:hidden"
       {...{ [dataLpPassthrough]: true }}
-      onClick={(evt) => {
-        const menu = new Menu();
-        const {
-          toggleControls,
-          controls,
-          setTransform,
-          transform,
-          disableWebFullscreen,
-          toggleWebFullscreen,
-        } = store.getState();
-        workspace.trigger(
-          "mx-media-menu",
-          menu,
-          {
-            player,
-            source,
-            toggleControls,
-            controls,
-            setTransform,
-            transform,
-            plugin,
-            disableWebFullscreen,
-            toggleWebFullscreen,
-          },
-          isEmbed ? "player-menu-embed" : "player-menu-view",
-        );
-        showAtButton(evt.nativeEvent, menu);
-        evt.nativeEvent.stopImmediatePropagation();
-      }}
+      onClick={onClick}
       aria-label="More options"
     >
       <MoreIcon className="w-7 h-7" />

diff --git a/apps/app/src/lib/menu.ts b/apps/app/src/lib/menu.ts
@@ -11,14 +11,17 @@ declare module "obsidian" {
 }
 
 export function showAtButton(evt: Event | HTMLElement, menu: Menu) {
-  const target = evt instanceof HTMLElement ? evt : evt.target;
-  if (!(target instanceof HTMLElement)) return;
+  const target = ("target" in evt ? evt.target : evt) as HTMLElement;
+  if (!target.instanceOf?.(HTMLElement)) return;
   const rect = target.getBoundingClientRect();
-  return menu.setParentElement(target).showAtPosition({
-    x: rect.x,
-    y: rect.bottom,
-    width: rect.width,
-    overlap: true,
-    left: true,
-  });
+  return menu.setParentElement(target).showAtPosition(
+    {
+      x: rect.x,
+      y: rect.bottom,
+      width: rect.width,
+      overlap: true,
+      left: true,
+    },
+    target.doc,
+  );
 }
diff --git a/apps/app/src/patch/link.inline-field.ts b/apps/app/src/patch/link.inline-field.ts
@@ -4,9 +4,10 @@ import type MxPlugin from "@/mx-main";
 
 export default function patchInlineUrl(this: MxPlugin) {
   const clickHandler = (e: MouseEvent) => {
-    if (!(e.target instanceof HTMLDivElement)) return;
-    if (!e.target.matches(".metadata-link-inner.external-link")) return;
-    const urlInfo = this.resolveUrl(e.target.textContent);
+    const target = e.target as HTMLElement;
+    if (!target.instanceOf(HTMLElement)) return;
+    if (!target.matches(".metadata-link-inner.external-link")) return;
+    const urlInfo = this.resolveUrl(target.textContent);
     if (!urlInfo) return;
     e.stopImmediatePropagation();
     const newLeaf = Keymap.isModEvent(e);