feat: gallery modal supports videos

android/capacitor.settings.gradle

@@ -51,7 +51,7 @@ include ':capacitor-reader'
 project(':capacitor-reader').projectDir = new File('../node_modules/.pnpm/[email protected]_@[email protected]/node_modules/capacitor-reader/android')
 
 include ':capacitor-stash-media'
-project(':capacitor-stash-media').projectDir = new File('../node_modules/.pnpm/capacitor-stash-media@2.1.1_@[email protected]/node_modules/capacitor-stash-media/android')
+project(':capacitor-stash-media').projectDir = new File('../node_modules/.pnpm/capacitor-stash-media@2.2.0_@[email protected]/node_modules/capacitor-stash-media/android')
 
 include ':capacitor-tips'
 project(':capacitor-tips').projectDir = new File('../node_modules/.pnpm/[email protected]_@[email protected]/node_modules/capacitor-tips/android')

ios/App/Podfile

@@ -27,7 +27,7 @@ def capacitor_pods
   pod 'CapacitorLaunchNative', :path => '../../node_modules/.pnpm/[email protected]_@[email protected]/node_modules/capacitor-launch-native'
   pod 'CapacitorPluginSafeArea', :path => '../../node_modules/.pnpm/[email protected]_@[email protected]/node_modules/capacitor-plugin-safe-area'
   pod 'CapacitorReader', :path => '../../node_modules/.pnpm/[email protected]_@[email protected]/node_modules/capacitor-reader'
-  pod 'CapacitorStashMedia', :path => '../../node_modules/.pnpm/capacitor-stash-media@2.1.1_@[email protected]/node_modules/capacitor-stash-media'
+  pod 'CapacitorStashMedia', :path => '../../node_modules/.pnpm/capacitor-stash-media@2.2.0_@[email protected]/node_modules/capacitor-stash-media'
   pod 'CapacitorTips', :path => '../../node_modules/.pnpm/[email protected]_@[email protected]/node_modules/capacitor-tips'
 end
 

ios/App/Podfile.lock

@@ -32,7 +32,7 @@ PODS:
     - Capacitor
   - CapacitorSplashScreen (6.0.3):
     - Capacitor
-  - CapacitorStashMedia (2.1.1):
+  - CapacitorStashMedia (2.2.0):
     - Capacitor
     - SDWebImage
   - CapacitorStatusBar (6.0.2):
@@ -61,7 +61,7 @@ DEPENDENCIES:
   - "CapacitorReader (from `../../node_modules/.pnpm/[email protected]_@[email protected]/node_modules/capacitor-reader`)"
   - "CapacitorShare (from `../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@capacitor/share`)"
   - "CapacitorSplashScreen (from `../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@capacitor/splash-screen`)"
-  - "CapacitorStashMedia (from `../../node_modules/.pnpm/capacitor-stash-media@2.1.1_@[email protected]/node_modules/capacitor-stash-media`)"
+  - "CapacitorStashMedia (from `../../node_modules/.pnpm/capacitor-stash-media@2.2.0_@[email protected]/node_modules/capacitor-stash-media`)"
   - "CapacitorStatusBar (from `../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@capacitor/status-bar`)"
   - "CapacitorTips (from `../../node_modules/.pnpm/[email protected]_@[email protected]/node_modules/capacitor-tips`)"
 
@@ -105,7 +105,7 @@ EXTERNAL SOURCES:
   CapacitorSplashScreen:
     :path: "../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@capacitor/splash-screen"
   CapacitorStashMedia:
-    :path: "../../node_modules/.pnpm/capacitor-stash-media@2.1.1_@[email protected]/node_modules/capacitor-stash-media"
+    :path: "../../node_modules/.pnpm/capacitor-stash-media@2.2.0_@[email protected]/node_modules/capacitor-stash-media"
   CapacitorStatusBar:
     :path: "../../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@capacitor/status-bar"
   CapacitorTips:
@@ -129,11 +129,11 @@ SPEC CHECKSUMS:
   CapacitorReader: a40128af9e1db017df748ab1c186870aee0bd5bf
   CapacitorShare: 7af6ca761ce62030e8e9fbd2eb82416f5ceced38
   CapacitorSplashScreen: 68893659d77b5f82d753b3a70475082845e3039c
-  CapacitorStashMedia: dc7a9876e725540001f5239cc36c15ee6cb9e061
+  CapacitorStashMedia: 2ed9a543c8a0471b42067a97d9e62cd90d1a99f7
   CapacitorStatusBar: 3b9ac7d0684770522c532d1158a1434512ab1477
   CapacitorTips: 606fd67dfdbc7d74a3568da580b3ad019fd4501b
   SDWebImage: 73c6079366fea25fa4bb9640d5fb58f0893facd8
 
-PODFILE CHECKSUM: 058d6f9b1cb40aa045ace40485f53af22aff164a
+PODFILE CHECKSUM: 68200e74145345ce78359b45d8b32a893ec856d6
 
 COCOAPODS: 1.16.2

package.json

@@ -75,7 +75,7 @@
     "capacitor-launch-native": "^1.1.1",
     "capacitor-plugin-safe-area": "^3.0.4",
     "capacitor-reader": "^0.3.1",
-    "capacitor-stash-media": "^2.1.1",
+    "capacitor-stash-media": "^2.2.0",
     "capacitor-tips": "^1.1.1",
     "colorjs.io": "^0.5.2",
     "compare-versions": "^6.1.1",

src/features/icons/index.ts

@@ -18,3 +18,6 @@ export { default as superscript } from "./svg/superscript.svg";
 export { default as subscript } from "./svg/subscript.svg";
 export { default as strikethrough } from "./svg/strikethrough.svg";
 export { default as trashEllipse } from "./svg/trashEllipse.svg";
+export { default as pip } from "./svg/pip.svg";
+export { default as forward } from "./svg/forward.svg";
+export { default as back } from "./svg/back.svg";

src/features/media/InlineMedia.tsx

@@ -1,9 +1,9 @@
 import { CSSProperties } from "react";
 
-import Media, { MediaProps } from "#/features/media/Media";
 import { cx } from "#/helpers/css";
 import { useAppDispatch } from "#/store";
 
+import GalleryMedia, { GalleryMediaProps } from "./gallery/GalleryMedia";
 import { IMAGE_FAILED, imageFailed, imageLoaded } from "./imageSlice";
 import MediaPlaceholder from "./MediaPlaceholder";
 import { isLoadedAspectRatio } from "./useAspectRatio";
@@ -13,7 +13,7 @@ import useMediaLoadObserver, {
 
 import mediaPlaceholderStyles from "./MediaPlaceholder.module.css";
 
-export type InlineMediaProps = Omit<MediaProps, "ref"> & {
+export type InlineMediaProps = Omit<GalleryMediaProps, "ref"> & {
   defaultAspectRatio?: number;
   mediaClassName?: string;
 };
@@ -49,12 +49,12 @@ export default function InlineMedia({
       state={buildPlaceholderState()}
       defaultAspectRatio={defaultAspectRatio}
     >
-      <Media
+      <GalleryMedia
         {...props}
         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/helpers.ts

@@ -1,18 +1,10 @@
-import { isNative } from "#/helpers/device";
+import { canBypassCors } from "#/helpers/device";
 
 export const redgifUrlRegex =
   /^https?:\/\/(?:www\.|v3\.)?redgifs.com\/watch\/([a-z]+)/;
 
-/**
- * Uncomment `return true` in dev to test with following command to disable CORS for testing
- *
- * ```
- * /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-site-isolation-trials --disable-web-security --user-data-dir="~/tmp"
- * ```
- */
 export function platformSupportsRedgif() {
-  // return true;
-  return isNative();
+  return canBypassCors();
 }
 
 export function isRedgif(url: string): boolean {

src/features/media/gallery/GalleryMedia.tsx

@@ -1,33 +1,43 @@
 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 { isUrlPotentialAnimatedImage } from "#/helpers/url";
+import Video, { VideoProps } from "#/features/media/video/Video";
+import { isUrlPotentialAnimatedImage, isUrlVideo } from "#/helpers/url";
 
 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;
   post?: PostView;
   animationType?: PreparedPhotoSwipeOptions["showHideAnimationType"];
   onClick?: (e: MouseEvent) => boolean | void;
 
-  ref?: React.Ref<HTMLImageElement> | React.Ref<HTMLCanvasElement>;
+  ref?:
+    | React.Ref<HTMLImageElement>
+    | React.Ref<HTMLCanvasElement>
+    | React.Ref<HTMLVideoElement>;
 }
 
 export default function GalleryMedia({
   post,
   animationType,
   onClick: _onClick,
+  controls,
+  shouldPortal,
+  volume,
+  progress,
   ...props
 }: GalleryMediaProps) {
+  const isVideo =
+    props.src && isUrlVideo(props.src, post?.post.url_content_type);
+
   const isGif =
     props.src &&
     isUrlPotentialAnimatedImage(props.src, post?.post.url_content_type);
@@ -43,13 +53,16 @@ export default function GalleryMedia({
     if (
       !(
         e.currentTarget instanceof HTMLImageElement ||
-        e.currentTarget instanceof HTMLCanvasElement
+        e.currentTarget instanceof HTMLCanvasElement ||
+        e.currentTarget instanceof HTMLVideoElement
       )
     )
       return;
 
     if (e.target instanceof HTMLElement && e.target.closest("a")) return;
 
+    e.preventDefault();
+
     open(e.currentTarget, props.src, post, animationType);
 
     // marking read happens after the gallery has finished animating
@@ -62,6 +75,20 @@ export default function GalleryMedia({
     _onClick?.(e);
   }
 
+  if (isVideo)
+    return (
+      <Video
+        {...props}
+        src={props.src!}
+        controls={controls}
+        shouldPortal={shouldPortal}
+        volume={volume}
+        progress={progress}
+        ref={props.ref as ComponentProps<typeof Video>["ref"]}
+        onClick={onClick}
+      />
+    );
+
   if (isGif && !shouldAutoplay) {
     return (
       <GalleryGif