Moooore progress

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));
         }}

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;
 

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}

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}

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) {

src/features/media/video/Player.module.css

@@ -3,6 +3,8 @@
   overflow: hidden;
 
   display: flex;
+
+  width: 100%; /* needed for iOS zoom in photoswipe */
 }
 
 .progress {

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)}>

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),
         },
       }));
     }

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) {

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)
    */