From 12f66d77a49547ee7b15941197935644565d5590 Mon Sep 17 00:00:00 2001
From: Alexander Harding <noreply@harding.dev>
Date: Mon, 2 Dec 2024 23:46:02 -0600
Subject: [PATCH] Moooore progress

---
 src/features/media/InlineMedia.tsx            |  2 +-
 .../media/external/redgifs/redgifsSlice.ts    |  2 +-
 src/features/media/gallery/GalleryMedia.tsx   |  8 +++---
 .../media/gallery/GalleryProvider.tsx         | 19 +++++++++++---
 src/features/media/useMediaLoadObserver.ts    |  6 ++---
 src/features/media/video/Player.module.css    |  2 ++
 src/features/media/video/Player.tsx           | 12 +++++++--
 .../media/video/VideoPortalProvider.tsx       | 25 +++++++++++--------
 .../post/inFeed/large/media/BlurOverlay.tsx   |  2 +-
 src/features/shared/markdown/MarkdownImg.tsx  |  5 ++--
 10 files changed, 54 insertions(+), 29 deletions(-)

diff --git a/src/features/media/InlineMedia.tsx b/src/features/media/InlineMedia.tsx
index c0efe11063..eede53f67f 100644
--- a/src/features/media/InlineMedia.tsx
+++ b/src/features/media/InlineMedia.tsx
@@ -63,7 +63,7 @@ export default function InlineMedia({
         src={src}
         className={cx(mediaPlaceholderStyles.media, mediaClassName)}
         style={buildStyle()}
-        ref={mediaRef}
+        ref={mediaRef as React.Ref<HTMLImageElement>}
         onError={() => {
           if (src) dispatch(imageFailed(src));
         }}
diff --git a/src/features/media/external/redgifs/redgifsSlice.ts b/src/features/media/external/redgifs/redgifsSlice.ts
index 499806325c..ee1de3bd66 100644
--- a/src/features/media/external/redgifs/redgifsSlice.ts
+++ b/src/features/media/external/redgifs/redgifsSlice.ts
@@ -134,7 +134,7 @@ export const getVideoSrc = createAsyncThunk(
 export const initializeIfNeeded = createAsyncThunk(
   "redgifs/initialize",
   async (_, { dispatch }) => {
-    const providerData = await db.getProvider("redgifs");
+    const providerData = (await db.getProvider("redgifs")) as RedgifsProvider;
 
     if (!providerData) return;
 
diff --git a/src/features/media/gallery/GalleryMedia.tsx b/src/features/media/gallery/GalleryMedia.tsx
index bc46611b5d..74780919d0 100644
--- a/src/features/media/gallery/GalleryMedia.tsx
+++ b/src/features/media/gallery/GalleryMedia.tsx
@@ -1,18 +1,17 @@
 import { PostView } from "lemmy-js-client";
 import { PreparedPhotoSwipeOptions } from "photoswipe";
-import { ComponentProps, HTMLProps, MouseEvent, useContext } from "react";
+import { ComponentProps, MouseEvent, useContext } from "react";
 
 import useShouldAutoplay from "#/core/listeners/network/useShouldAutoplay";
 import { useAutohidePostIfNeeded } from "#/features/feed/PageTypeContext";
+import Video, { VideoProps } from "#/features/media/video/Video";
 import { isUrlPotentialAnimatedImage, isUrlVideo } from "#/helpers/url";
 
-import Video from "../video/Video";
 import GalleryGif from "./GalleryGif";
 import GalleryImg from "./GalleryImg";
 import { GalleryContext } from "./GalleryProvider";
 
-export interface GalleryMediaProps
-  extends Omit<HTMLProps<HTMLImageElement>, "ref" | "onClick"> {
+export interface GalleryMediaProps extends Omit<VideoProps, "ref" | "src"> {
   src?: string;
   alt?: string;
   className?: string;
@@ -80,6 +79,7 @@ export default function GalleryMedia({
     return (
       <Video
         {...props}
+        src={props.src!}
         controls={controls}
         shouldPortal={shouldPortal}
         volume={volume}
diff --git a/src/features/media/gallery/GalleryProvider.tsx b/src/features/media/gallery/GalleryProvider.tsx
index 26faddc8c5..27dc896177 100644
--- a/src/features/media/gallery/GalleryProvider.tsx
+++ b/src/features/media/gallery/GalleryProvider.tsx
@@ -16,6 +16,7 @@ import { createPortal } from "react-dom";
 import * as portals from "react-reverse-portal";
 import { useLocation } from "react-router";
 
+import Player from "#/features/media/video/Player";
 import { useVideoPortalNode } from "#/features/media/video/VideoPortalProvider";
 import { findBlurOverlayContainer } from "#/features/post/inFeed/large/media/BlurOverlayMessage";
 import { setPostRead } from "#/features/post/postSlice";
@@ -40,6 +41,7 @@ interface IGalleryContext {
 }
 
 export const GalleryContext = createContext<IGalleryContext>({
+  // eslint-disable-next-line no-empty-function
   open: async () => {},
   close: noop,
 });
@@ -146,7 +148,7 @@ export default function GalleryProvider({ children }: React.PropsWithChildren) {
         showHideAnimationType: animationType ?? "fade",
         zoom: false,
         bgOpacity: 1,
-        preloadFirstSlide: false,
+        showAnimationDuration: thumbEl instanceof HTMLVideoElement ? 0 : 333,
         // Put in ion-app element so share IonActionSheet is on top
         appendToEl: document.querySelector("ion-app")!,
         paddingFn: () => getSafeArea(),
@@ -186,13 +188,17 @@ export default function GalleryProvider({ children }: React.PropsWithChildren) {
           e.preventDefault();
 
           e.content.element = document.createElement("div");
-          e.content.type = "image"; // allow zoom
+          e.content.type = "video"; // allow zoom
 
           e.content.state = "loaded";
           e.content.onLoaded();
         }
       });
 
+      instance.addFilter("isContentZoomable", (isContentZoomable, content) => {
+        return isContentZoomable || content.type === "video";
+      });
+
       instance.addFilter("useContentPlaceholder", (useContentPlaceholder) => {
         if (thumbEl instanceof HTMLVideoElement) return false;
 
@@ -456,7 +462,14 @@ export default function GalleryProvider({ children }: React.PropsWithChildren) {
 
       {videoContainer !== null && portalNode
         ? createPortal(
-            <portals.OutPortal node={portalNode} src={videoSrc} autoPlay />,
+            <portals.OutPortal<typeof Player>
+              node={portalNode}
+              src={videoSrc}
+              pauseWhenNotInView={false}
+              controls={false}
+              progress={false}
+              volume={false}
+            />,
             videoContainer,
           )
         : undefined}
diff --git a/src/features/media/useMediaLoadObserver.ts b/src/features/media/useMediaLoadObserver.ts
index a0c351c566..1b39c3a20a 100644
--- a/src/features/media/useMediaLoadObserver.ts
+++ b/src/features/media/useMediaLoadObserver.ts
@@ -1,15 +1,15 @@
 import { ComponentRef, useEffect, useRef } from "react";
 
 import { imageLoaded } from "#/features/media/imageSlice";
-import type Media from "#/features/media/Media";
 import { useAppDispatch } from "#/store";
 
+import type GalleryMedia from "./gallery/GalleryMedia";
 import useAspectRatio, { isLoadedAspectRatio } from "./useAspectRatio";
 
 export default function useMediaLoadObserver(src: string | undefined) {
   const dispatch = useAppDispatch();
   const aspectRatio = useAspectRatio(src);
-  const mediaRef = useRef<ComponentRef<typeof Media>>(null);
+  const mediaRef = useRef<ComponentRef<typeof GalleryMedia>>(null);
   const resizeObserverRef = useRef<ResizeObserver | undefined>();
 
   useEffect(() => {
@@ -61,7 +61,7 @@ export default function useMediaLoadObserver(src: string | undefined) {
   return [mediaRef, aspectRatio] as const;
 }
 
-export function getTargetDimensions(target: ComponentRef<typeof Media>) {
+export function getTargetDimensions(target: ComponentRef<typeof GalleryMedia>) {
   let width, height;
 
   switch (true) {
diff --git a/src/features/media/video/Player.module.css b/src/features/media/video/Player.module.css
index d0b4e8c594..061fb46dbf 100644
--- a/src/features/media/video/Player.module.css
+++ b/src/features/media/video/Player.module.css
@@ -3,6 +3,8 @@
   overflow: hidden;
 
   display: flex;
+
+  width: 100%; /* needed for iOS zoom in photoswipe */
 }
 
 .progress {
diff --git a/src/features/media/video/Player.tsx b/src/features/media/video/Player.tsx
index 1d3d5f3385..7de7bbe69d 100644
--- a/src/features/media/video/Player.tsx
+++ b/src/features/media/video/Player.tsx
@@ -19,7 +19,7 @@ import { getVideoSrcForUrl } from "#/helpers/url";
 
 import styles from "./Player.module.css";
 
-export interface PlayerProps {
+export interface PlayerProps extends React.HTMLProps<HTMLElement> {
   src: string;
 
   controls?: boolean;
@@ -31,6 +31,8 @@ export interface PlayerProps {
   style?: CSSProperties;
   alt?: string;
 
+  pauseWhenNotInView?: boolean;
+
   ref?: React.RefObject<HTMLVideoElement>;
 }
 
@@ -41,6 +43,7 @@ export default function Player({
   progress: showProgress = !controls,
   volume = true,
   autoPlay: videoAllowedToAutoplay = true,
+  pauseWhenNotInView = true,
   ref,
   ...rest
 }: PlayerProps) {
@@ -102,13 +105,18 @@ export default function Player({
 
   useEffect(() => {
     if (!videoRef.current) return;
+    if (!pauseWhenNotInView) {
+      if (autoPlay) resume();
+
+      return;
+    }
 
     if (inView) {
       resume();
     } else {
       pause();
     }
-  }, [inView, pause, resume]);
+  }, [inView, pause, resume, pauseWhenNotInView, autoPlay]);
 
   return (
     <span className={cx(styles.container, className)}>
diff --git a/src/features/media/video/VideoPortalProvider.tsx b/src/features/media/video/VideoPortalProvider.tsx
index ba542b9b86..9a4fae3e0d 100644
--- a/src/features/media/video/VideoPortalProvider.tsx
+++ b/src/features/media/video/VideoPortalProvider.tsx
@@ -1,5 +1,5 @@
 import { useIonViewWillEnter } from "@ionic/react";
-import { last, noop } from "es-toolkit";
+import { last, noop, without } from "es-toolkit";
 import {
   createContext,
   useContext,
@@ -33,8 +33,9 @@ export default function VideoPortalProvider({
         ...videoRefs,
         [src]: {
           ...potentialExisting,
+          // most recently used (currently playing location) is last
           sourceUids: [
-            ...potentialExisting.sourceUids.filter((id) => id !== sourceUid),
+            ...without(potentialExisting.sourceUids, sourceUid),
             sourceUid,
           ],
         },
@@ -61,15 +62,18 @@ export default function VideoPortalProvider({
   function cleanupPortalNodeForSrcIfNeeded(src: string, sourceUid: string) {
     const videoRefs = videoRefsRef.current;
 
+    const videoRef = videoRefs[src];
+
+    if (!videoRef) return;
+
     // Portal was handed off to another OutPortal.
     // Some other portal outlet is controlling, so not responsible for cleanup
-    if (
-      videoRefs[src]?.sourceUids &&
-      last(videoRefs[src]?.sourceUids) !== sourceUid
-    )
-      return;
+    if (videoRef.sourceUids && last(videoRef.sourceUids) !== sourceUid) return;
 
-    if (videoRefs[src]?.sourceUids.length === 1) {
+    if (
+      videoRef.sourceUids.length === 1 &&
+      videoRef.sourceUids[0] === sourceUid
+    ) {
       setVideoRefs((videoRefs) => {
         const updatedVideoRefs = { ...videoRefs };
         delete updatedVideoRefs[src];
@@ -79,9 +83,8 @@ export default function VideoPortalProvider({
       setVideoRefs((videoRefs) => ({
         ...videoRefs,
         [src]: {
-          ...videoRefs[src],
-          sourceUids:
-            videoRefs[src]?.sourceUids?.filter((id) => id !== sourceUid) ?? [],
+          ...videoRef,
+          sourceUids: without(videoRef.sourceUids, sourceUid),
         },
       }));
     }
diff --git a/src/features/post/inFeed/large/media/BlurOverlay.tsx b/src/features/post/inFeed/large/media/BlurOverlay.tsx
index 4c7ec682ee..73e3b74737 100644
--- a/src/features/post/inFeed/large/media/BlurOverlay.tsx
+++ b/src/features/post/inFeed/large/media/BlurOverlay.tsx
@@ -7,7 +7,7 @@ import BlurOverlayMessage from "./BlurOverlayMessage";
 import styles from "./BlurOverlay.module.css";
 
 interface BlurOverlayProps extends React.PropsWithChildren {
-  src: string;
+  src: string | undefined;
 }
 
 export default function BlurOverlay({ src, children }: BlurOverlayProps) {
diff --git a/src/features/shared/markdown/MarkdownImg.tsx b/src/features/shared/markdown/MarkdownImg.tsx
index 46f5ac1388..1c044269fa 100644
--- a/src/features/shared/markdown/MarkdownImg.tsx
+++ b/src/features/shared/markdown/MarkdownImg.tsx
@@ -1,10 +1,9 @@
-import { GalleryMediaProps } from "#/features/media/gallery/GalleryMedia";
-import InlineMedia from "#/features/media/InlineMedia";
+import InlineMedia, { InlineMediaProps } from "#/features/media/InlineMedia";
 import { cx } from "#/helpers/css";
 
 import styles from "./MarkdownImg.module.css";
 
-interface MarkdownImgProps extends Omit<GalleryMediaProps, "ref"> {
+interface MarkdownImgProps extends Omit<InlineMediaProps, "ref"> {
   /**
    * Restrict height of media within comments (unrestricted in post body)
    */