mediaTweaks: add enlarge button to embed videos

Cynosphere · Oct 15, 2024 · 1c96b60 · 1c96b60
1 parent a6ec275
commit 1c96b60
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 23 deletions.
diff --git a/src/mediaTweaks/index.ts b/src/mediaTweaks/index.ts
@@ -59,6 +59,14 @@ export const patches: Patch[] = [
       }
     ]
   },
+  {
+    find: ".VIDEO_EMBED_PLAYBACK_STARTED,",
+    replace: {
+      match: ".proxyURL,placeholder:",
+      replacement:
+        '.proxyURL,renderAdjacentContent:require("mediaTweaks_enlargeVideoButton").createButtonGroup(arguments[0]),placeholder:'
+    }
+  },
 
   // No WebP and No Thumbnail Size
   {
@@ -93,5 +101,9 @@ export const styles = [
   background: linear-gradient(to bottom, hsl(var(--black-500-hsl)/.6), transparent);
   width: 100%;
   pointer-events: none;
+}
+
+[class^="inlineMediaEmbed_"] {
+  max-width: max-content !important;
 }`
 ];
diff --git a/src/mediaTweaks/manifest.json b/src/mediaTweaks/manifest.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://moonlight-mod.github.io/manifest.schema.json",
   "id": "mediaTweaks",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "meta": {
     "name": "Media Tweaks",
     "tagline": "Various tweaks to images and videos. Every feature togglable.",

diff --git a/src/mediaTweaks/webpackModules/enlargeVideoButton.tsx b/src/mediaTweaks/webpackModules/enlargeVideoButton.tsx
@@ -11,6 +11,21 @@ type HoverButtonsProps = {
   item: Record<string, any>;
 };
 
+type VideoProps = {
+  video: {
+    width: number;
+    height: number;
+    proxyURL: string;
+    url: string;
+  };
+};
+
+type MimeType = {
+  source: string;
+  extensions?: string[];
+  compressible?: boolean;
+};
+
 const createMediaModal = spacepack.findFunctionByStrings(
   spacepack.findByCode(".zoomedCarouselModalRoot,items:")[0].exports,
   '.searchParams.append("format","webp")'
@@ -20,6 +35,10 @@ const MediaModalClasses = spacepack.findByExports("modal", "image")[0].exports;
 
 const noop = () => null;
 
+const MimeTypes = Object.entries(
+  spacepack.findByCode(`JSON.parse('{"application/1d-interleaved-parityfec":`)[0].exports
+);
+
 export default function EnlargeVideoButton({ mimeType, item }: HoverButtonsProps) {
   return mimeType?.[0] !== "video" ? null : (
     <Tooltip text="Enlarge Video">
@@ -30,27 +49,29 @@ export default function EnlargeVideoButton({ mimeType, item }: HoverButtonsProps
           focusProps={{ offset: 2 }}
           aria-label="Enlarge Video"
           onClick={() => {
-            if (createMediaModal != null)
-              openModal((modalProps: any) => {
-                const { component: MediaModal } = createMediaModal(
-                  {
-                    contentType: item.contentType,
-                    proxyUrl: item.originalItem.proxy_url,
-                    url: item.originalItem.proxy_url,
-                    width: item.originalItem.width,
-                    height: item.originalItem.height
-                  },
-                  noop,
-                  true,
-                  false
-                );
-
-                return (
-                  <ModalRoot {...modalProps} className={MediaModalClasses.modal} size={ModalSize.DYNAMIC}>
-                    {MediaModal}
-                  </ModalRoot>
-                );
-              });
+            if (createMediaModal != null) {
+              console.log(mimeType, item);
+              const modal = createMediaModal(
+                {
+                  contentType: item.contentType,
+                  proxyUrl: item.originalItem.proxy_url,
+                  url: item.originalItem.proxy_url,
+                  width: item.originalItem.width,
+                  height: item.originalItem.height
+                },
+                noop,
+                true,
+                false
+              );
+              if (modal != null)
+                openModal((modalProps: any) => {
+                  return (
+                    <ModalRoot {...modalProps} className={MediaModalClasses.modal} size={ModalSize.DYNAMIC}>
+                      {modal.component}
+                    </ModalRoot>
+                  );
+                });
+            }
           }}
         >
           <MaximizeIcon size="custom" color="currentColor" width={20} height={20} />
@@ -59,3 +80,31 @@ export default function EnlargeVideoButton({ mimeType, item }: HoverButtonsProps
     </Tooltip>
   );
 }
+
+export function createButtonGroup({ video }: VideoProps) {
+  const urlObj = new URL(video.proxyURL);
+  const filename = urlObj.pathname.substring(urlObj.pathname.lastIndexOf("/") + 1);
+  const extension = filename.substring(filename.lastIndexOf(".") + 1);
+  const contentType =
+    MimeTypes.find(([mime, data]) => (data as MimeType).extensions?.includes(extension))?.[0] ?? "unknown/unknown";
+  const mimeType = contentType.split("/");
+
+  return function MediaTweaksHoverButtons() {
+    return (
+      <div className={HoverButtonClasses.hoverButtonGroup}>
+        <EnlargeVideoButton
+          mimeType={mimeType}
+          item={{
+            contentType,
+            originalItem: {
+              proxy_url: video.proxyURL,
+              url: video.proxyURL,
+              width: video.width,
+              height: video.height
+            }
+          }}
+        />
+      </div>
+    );
+  };
+}
diff --git a/src/mediaTweaks/webpackModules/imagePropsProcessor.ts b/src/mediaTweaks/webpackModules/imagePropsProcessor.ts
@@ -7,7 +7,7 @@ type ImageProps = {
   targetWidth: number;
   targetHeight: number;
   format?: string;
-  quality?: number;
+  quality?: string;
   animated?: boolean;
   srcIsAnimated?: boolean;
 };