Fix certain post videos displaying as images (#1538)

Resolves #1537

src/features/media/gallery/Media.tsx

@@ -1,6 +1,6 @@
 import { PostView } from "lemmy-js-client";
 import { findLoneImage } from "../../../helpers/markdown";
-import { isUrlMedia, isUrlVideo } from "../../../helpers/url";
+import { findUrlMediaType, isUrlVideo } from "../../../helpers/url";
 import { PlayerProps } from "../video/Player";
 import { ComponentProps, ComponentRef, forwardRef, memo, useMemo } from "react";
 import GalleryMedia, { GalleryMediaProps } from "./GalleryMedia";
@@ -41,8 +41,17 @@ export default memo(Media);
 export function getPostMedia(
   post: PostView,
 ): [string] | [string, string] | undefined {
-  if (post.post.url && isUrlMedia(post.post.url)) {
+  const urlType = post.post.url && findUrlMediaType(post.post.url);
+
+  if (post.post.url && urlType) {
+    const thumbnailType =
+      post.post.thumbnail_url && findUrlMediaType(post.post.thumbnail_url);
+
     if (post.post.thumbnail_url) {
+      // Sometimes Lemmy will cache the video, sometimes the thumbnail will be a still frame of the video
+      if (urlType === "video" && thumbnailType === "image")
+        return [post.post.url];
+
       return [post.post.thumbnail_url, post.post.url];
     }
 

src/features/post/useIsPostUrlMedia.ts

@@ -2,7 +2,7 @@ import { useCallback } from "react";
 import { useAppSelector } from "../../store";
 import { PostView } from "lemmy-js-client";
 import { isRedgif } from "../media/external/redgifs/helpers";
-import { isUrlMedia } from "../../helpers/url";
+import { findUrlMediaType } from "../../helpers/url";
 
 export default function useIsPostUrlMedia() {
   const embedExternalMedia = useAppSelector(
@@ -19,7 +19,7 @@ export default function useIsPostUrlMedia() {
         if (isRedgif(url)) return true;
       }
 
-      return isUrlMedia(url);
+      return !!findUrlMediaType(url);
     },
     [embedExternalMedia],
   );

src/helpers/url.ts

@@ -26,10 +26,35 @@ export function getPathname(url: string): string | undefined {
   }
 }
 
+export function parseUrl(url: string): URL | undefined {
+  try {
+    return new URL(url);
+  } catch {
+    return;
+  }
+}
+
+export function getPotentialImageProxyPathname(
+  url: string,
+): string | undefined {
+  const parsedURL = parseUrl(url);
+
+  if (!parsedURL) return;
+
+  if (parsedURL.pathname === "/api/v3/image_proxy") {
+    const actualImageURL = parsedURL.searchParams.get("url");
+
+    if (!actualImageURL) return;
+    return getPathname(actualImageURL);
+  }
+
+  return parsedURL.pathname;
+}
+
 const imageExtensions = ["jpeg", "png", "gif", "jpg", "webp", "jxl"];
 
 export function isUrlImage(url: string): boolean {
-  const pathname = getPathname(url);
+  const pathname = getPotentialImageProxyPathname(url);
 
   if (!pathname) return false;
 
@@ -41,7 +66,7 @@ export function isUrlImage(url: string): boolean {
 const animatedImageExtensions = ["gif", "webp", "jxl"];
 
 export function isUrlPotentialAnimatedImage(url: string): boolean {
-  const pathname = getPathname(url);
+  const pathname = getPotentialImageProxyPathname(url);
 
   if (!pathname) return false;
 
@@ -53,16 +78,18 @@ export function isUrlPotentialAnimatedImage(url: string): boolean {
 const videoExtensions = ["mp4", "webm", "gifv"];
 
 export function isUrlVideo(url: string): boolean {
-  const pathname = getPathname(url);
+  const pathname = getPotentialImageProxyPathname(url);
   if (!pathname) return false;
 
   return videoExtensions.some((extension) =>
     pathname.endsWith(`.${extension}`),
   );
 }
 
-export function isUrlMedia(url: string): boolean {
-  return isUrlImage(url) || isUrlVideo(url);
+export function findUrlMediaType(url: string): "video" | "image" | undefined {
+  if (isUrlImage(url)) return "image";
+
+  if (isUrlVideo(url)) return "video";
 }
 
 // https://github.com/miguelmota/is-valid-hostname