From ca9b7a1a93ece72d4fdb80da42cb1c58b13c5eb9 Mon Sep 17 00:00:00 2001
From: Carlos Feliciano-Barba <carlos@felicianobarba.com>
Date: Tue, 1 Aug 2023 14:56:23 -0400
Subject: [PATCH 01/16] Load video with the embed_video_url if it exists

This fixes issues with embed links that could've been rendered using the
Video component
---
 src/features/post/detail/PostDetail.tsx      | 16 +++++---
 src/features/post/inFeed/large/LargePost.tsx | 41 +++++++++++---------
 2 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/src/features/post/detail/PostDetail.tsx b/src/features/post/detail/PostDetail.tsx
index 56c4f9d01c..e2c08c1374 100644
--- a/src/features/post/detail/PostDetail.tsx
+++ b/src/features/post/detail/PostDetail.tsx
@@ -173,11 +173,13 @@ export default function PostDetail({
   function renderImage() {
     if (!post) return;
 
-    if (post.post.url) {
-      if (isUrlImage(post.post.url)) return <LightboxImg post={post} />;
+    if (post.post.url && isUrlImage(post.post.url)) {
+      return <LightboxImg post={post} />;
+    }
 
-      if (isUrlVideo(post.post.url))
-        return <Video src={post.post.url} css={lightboxCss} controls />;
+    const videoUrl = post.post.embed_video_url || post.post.url;
+    if (videoUrl && isUrlVideo(videoUrl)) {
+      return <Video src={videoUrl} css={lightboxCss} controls />;
     }
 
     if (markdownLoneImage) return <LightboxImg post={post} />;
@@ -191,7 +193,9 @@ export default function PostDetail({
         <>
           {post.post.url &&
             !isUrlImage(post.post.url) &&
-            !isUrlVideo(post.post.url) && <Embed post={post} />}
+            !isUrlVideo(post.post.embed_video_url || post.post.url) && (
+              <Embed post={post} />
+            )}
           <StyledMarkdown>{post.post.body}</StyledMarkdown>
         </>
       );
@@ -200,7 +204,7 @@ export default function PostDetail({
     if (
       post.post.url &&
       !isUrlImage(post.post.url) &&
-      !isUrlVideo(post.post.url)
+      !isUrlVideo(post.post.embed_video_url || post.post.url)
     ) {
       return <StyledEmbed post={post} />;
     }
diff --git a/src/features/post/inFeed/large/LargePost.tsx b/src/features/post/inFeed/large/LargePost.tsx
index 4f66b7d108..a4877e4969 100644
--- a/src/features/post/inFeed/large/LargePost.tsx
+++ b/src/features/post/inFeed/large/LargePost.tsx
@@ -116,25 +116,28 @@ export default function LargePost({ post, communityMode }: PostProps) {
   );
 
   function renderPostBody() {
-    if (post.post.url) {
-      if (isUrlImage(post.post.url)) {
-        return (
-          <ImageContainer>
-            <Image
-              blur={isNsfwBlurred(post, blurNsfw)}
-              post={post}
-              animationType="zoom"
-            />
-          </ImageContainer>
-        );
-      }
-      if (isUrlVideo(post.post.url)) {
-        return (
-          <ImageContainer>
-            <Video src={post.post.url} blur={isNsfwBlurred(post, blurNsfw)} />
-          </ImageContainer>
-        );
-      }
+    if (post.post.url && isUrlImage(post.post.url)) {
+      return (
+        <ImageContainer>
+          <Image
+            blur={isNsfwBlurred(post, blurNsfw)}
+            post={post}
+            animationType="zoom"
+          />
+        </ImageContainer>
+      );
+    }
+
+    /**
+     * The lemmy api returns an embed_video_url for some urls, try loading those here
+     */
+    const videoUrl = post.post.embed_video_url || post.post.url;
+    if (videoUrl && isUrlVideo(videoUrl)) {
+      return (
+        <ImageContainer>
+          <Video src={videoUrl} blur={isNsfwBlurred(post, blurNsfw)} />
+        </ImageContainer>
+      );
     }
 
     if (markdownLoneImage)

From 859679b1047e5825a7f2b4cd185dfc80bc8755a0 Mon Sep 17 00:00:00 2001
From: Carlos Feliciano-Barba <carlos@felicianobarba.com>
Date: Fri, 6 Oct 2023 22:27:58 -0400
Subject: [PATCH 02/16] Add ability to handle onError for Video component

---
 src/features/shared/Video.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/features/shared/Video.tsx b/src/features/shared/Video.tsx
index af4a42bf4c..2c70a25be0 100644
--- a/src/features/shared/Video.tsx
+++ b/src/features/shared/Video.tsx
@@ -1,7 +1,14 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Dictionary } from "@reduxjs/toolkit";
-import { ChangeEvent, useCallback, useEffect, useRef, useState } from "react";
+import {
+  ChangeEvent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  ReactEventHandler,
+} from "react";
 import { useInView } from "react-intersection-observer";
 import { isAppleDeviceInstallable } from "../../helpers/device";
 
@@ -73,11 +80,18 @@ interface VideoProps {
   blur?: boolean;
 
   className?: string;
+  onError?: ReactEventHandler<HTMLVideoElement> | undefined;
 }
 
 const videoPlaybackPlace: Dictionary<number> = {};
 
-export default function Video({ src, controls, blur, className }: VideoProps) {
+export default function Video({
+  src,
+  controls,
+  blur,
+  className,
+  onError,
+}: VideoProps) {
   const [inViewRef, inView] = useInView({
     threshold: 0.5,
   });
@@ -134,6 +148,7 @@ export default function Video({ src, controls, blur, className }: VideoProps) {
         playsInline
         autoPlay={false}
         controls={controls}
+        onError={onError}
         onTimeUpdate={(e: ChangeEvent<HTMLVideoElement>) => {
           setProgress(e.target.currentTime / e.target.duration);
         }}

From 926c733fe341aca0d3ea4825862f4f148903b293 Mon Sep 17 00:00:00 2001
From: Carlos Feliciano-Barba <carlos@felicianobarba.com>
Date: Fri, 6 Oct 2023 22:38:04 -0400
Subject: [PATCH 03/16] Place url helpers in url file and add isUrlMedia
 function

---
 src/features/comment/links/LinkPreview.tsx    |  2 +-
 src/features/gallery/PostGalleryImg.tsx       |  2 +-
 src/features/post/detail/PostDetail.tsx       |  8 +-
 .../post/inFeed/compact/Thumbnail.tsx         |  2 +-
 src/features/post/inFeed/large/LargePost.tsx  |  2 +-
 src/features/post/new/PostEditorRoot.tsx      |  4 +-
 src/helpers/lemmy.ts                          | 32 -------
 src/helpers/url.ts                            | 88 +++++++++++++++++++
 8 files changed, 97 insertions(+), 43 deletions(-)

diff --git a/src/features/comment/links/LinkPreview.tsx b/src/features/comment/links/LinkPreview.tsx
index f2f70359b0..c046918340 100644
--- a/src/features/comment/links/LinkPreview.tsx
+++ b/src/features/comment/links/LinkPreview.tsx
@@ -11,8 +11,8 @@ import {
 import { css } from "@emotion/react";
 import { getImageSrc } from "../../../services/lemmy";
 import { ReactNode, useMemo } from "react";
-import { isUrlImage } from "../../../helpers/lemmy";
 import useLemmyUrlHandler from "../../shared/useLemmyUrlHandler";
+import { isUrlImage } from "../../../helpers/url";
 
 const shared = css`
   width: 30px;
diff --git a/src/features/gallery/PostGalleryImg.tsx b/src/features/gallery/PostGalleryImg.tsx
index 3895d33fd4..c196e4635d 100644
--- a/src/features/gallery/PostGalleryImg.tsx
+++ b/src/features/gallery/PostGalleryImg.tsx
@@ -1,7 +1,7 @@
 import { PostView } from "lemmy-js-client";
-import { isUrlImage } from "../../helpers/lemmy";
 import { findLoneImage } from "../../helpers/markdown";
 import { GalleryImg, GalleryImgProps } from "./GalleryImg";
+import { isUrlImage } from "../../helpers/url";
 
 export interface PostGalleryImgProps extends Omit<GalleryImgProps, "src"> {
   post: PostView;
diff --git a/src/features/post/detail/PostDetail.tsx b/src/features/post/detail/PostDetail.tsx
index e2c08c1374..5a34c3fa0b 100644
--- a/src/features/post/detail/PostDetail.tsx
+++ b/src/features/post/detail/PostDetail.tsx
@@ -16,7 +16,6 @@ import {
 } from "react";
 import { findLoneImage } from "../../../helpers/markdown";
 import { setPostRead } from "../postSlice";
-import { isUrlImage, isUrlVideo } from "../../../helpers/lemmy";
 import { maxWidthCss } from "../../shared/AppContent";
 import PersonLink from "../../labels/links/PersonLink";
 import { CommentSortType, PostView } from "lemmy-js-client";
@@ -35,6 +34,7 @@ import { OTapToCollapseType } from "../../../services/db";
 import Locked from "./Locked";
 import useAppToast from "../../../helpers/useAppToast";
 import { postLocked } from "../../../helpers/toastMessages";
+import { isUrlMedia } from "../../../helpers/url";
 
 const BorderlessIonItem = styled(IonItem)`
   --padding-start: 0;
@@ -192,8 +192,7 @@ export default function PostDetail({
       return (
         <>
           {post.post.url &&
-            !isUrlImage(post.post.url) &&
-            !isUrlVideo(post.post.embed_video_url || post.post.url) && (
+            !isUrlMedia(post.post.embed_video_url || post.post.url) && (
               <Embed post={post} />
             )}
           <StyledMarkdown>{post.post.body}</StyledMarkdown>
@@ -203,8 +202,7 @@ export default function PostDetail({
 
     if (
       post.post.url &&
-      !isUrlImage(post.post.url) &&
-      !isUrlVideo(post.post.embed_video_url || post.post.url)
+      !isUrlMedia(post.post.embed_video_url || post.post.url)
     ) {
       return <StyledEmbed post={post} />;
     }
diff --git a/src/features/post/inFeed/compact/Thumbnail.tsx b/src/features/post/inFeed/compact/Thumbnail.tsx
index 0154421a0e..417e994c71 100644
--- a/src/features/post/inFeed/compact/Thumbnail.tsx
+++ b/src/features/post/inFeed/compact/Thumbnail.tsx
@@ -4,7 +4,6 @@ import { IonIcon } from "@ionic/react";
 import { link, linkOutline } from "ionicons/icons";
 import { PostView } from "lemmy-js-client";
 import { MouseEvent, useCallback, useMemo } from "react";
-import { isUrlImage } from "../../../../helpers/lemmy";
 import { findLoneImage } from "../../../../helpers/markdown";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import PostGalleryImg from "../../../gallery/PostGalleryImg";
@@ -17,6 +16,7 @@ import {
   OCompactThumbnailSizeType,
 } from "../../../../services/db";
 import { setPostRead } from "../../postSlice";
+import { isUrlImage } from "../../../../helpers/url";
 
 function getWidthForSize(size: CompactThumbnailSizeType): number {
   switch (size) {
diff --git a/src/features/post/inFeed/large/LargePost.tsx b/src/features/post/inFeed/large/LargePost.tsx
index a4877e4969..7f71dc3b71 100644
--- a/src/features/post/inFeed/large/LargePost.tsx
+++ b/src/features/post/inFeed/large/LargePost.tsx
@@ -5,7 +5,6 @@ import PreviewStats from "../PreviewStats";
 import Embed from "../../shared/Embed";
 import { useMemo } from "react";
 import { findLoneImage } from "../../../../helpers/markdown";
-import { isUrlImage, isUrlVideo } from "../../../../helpers/lemmy";
 import { maxWidthCss } from "../../../shared/AppContent";
 import Nsfw, { isNsfw, isNsfwBlurred } from "../../../labels/Nsfw";
 import { VoteButton } from "../../shared/VoteButton";
@@ -19,6 +18,7 @@ import { PostProps } from "../Post";
 import Save from "../../../labels/Save";
 import { Image } from "./Image";
 import { useAppSelector } from "../../../../store";
+import { isUrlVideo, isUrlImage } from "../../../../helpers/url";
 
 const Container = styled.div`
   display: flex;
diff --git a/src/features/post/new/PostEditorRoot.tsx b/src/features/post/new/PostEditorRoot.tsx
index 7c44af4edd..f535c9b9a4 100644
--- a/src/features/post/new/PostEditorRoot.tsx
+++ b/src/features/post/new/PostEditorRoot.tsx
@@ -25,7 +25,7 @@ import { Centered, Spinner } from "../../auth/Login";
 import { jwtSelector, urlSelector } from "../../auth/authSlice";
 import { startCase } from "lodash";
 import { css } from "@emotion/react";
-import { getHandle, getRemoteHandle, isUrlImage } from "../../../helpers/lemmy";
+import { getHandle, getRemoteHandle } from "../../../helpers/lemmy";
 import { cameraOutline } from "ionicons/icons";
 import { PostEditorProps } from "./PostEditor";
 import NewPostText from "./NewPostText";
@@ -34,7 +34,7 @@ import PhotoPreview from "./PhotoPreview";
 import { uploadImage } from "../../../services/lemmy";
 import { receivedPosts } from "../postSlice";
 import useAppToast from "../../../helpers/useAppToast";
-import { isValidUrl } from "../../../helpers/url";
+import { isValidUrl, isUrlImage } from "../../../helpers/url";
 import { problemFetchingTitle } from "../../../helpers/toastMessages";
 
 const Container = styled.div`
diff --git a/src/helpers/lemmy.ts b/src/helpers/lemmy.ts
index 826aa8dbc8..7ba4c4591c 100644
--- a/src/helpers/lemmy.ts
+++ b/src/helpers/lemmy.ts
@@ -230,38 +230,6 @@ export function getFlattenedChildren(comment: CommentNodeI): CommentView[] {
   return flattenedChildren;
 }
 
-export function isUrlImage(url: string): boolean {
-  let parsedUrl;
-
-  try {
-    parsedUrl = new URL(url);
-  } catch (error) {
-    console.error(error);
-    return false;
-  }
-
-  return (
-    parsedUrl.pathname.endsWith(".jpeg") ||
-    parsedUrl.pathname.endsWith(".png") ||
-    parsedUrl.pathname.endsWith(".gif") ||
-    parsedUrl.pathname.endsWith(".jpg") ||
-    parsedUrl.pathname.endsWith(".webp")
-  );
-}
-
-export function isUrlVideo(url: string): boolean {
-  let parsedUrl;
-
-  try {
-    parsedUrl = new URL(url);
-  } catch (error) {
-    console.error(error);
-    return false;
-  }
-
-  return parsedUrl.pathname.endsWith(".mp4");
-}
-
 export function share(item: Post | Comment) {
   return Share.share({ url: item.ap_id });
 }
diff --git a/src/helpers/url.ts b/src/helpers/url.ts
index 2410350330..5c44fceffe 100644
--- a/src/helpers/url.ts
+++ b/src/helpers/url.ts
@@ -17,3 +17,91 @@ export function isValidUrl(
 
   return url.protocol === "http:" || url.protocol === "https:";
 }
+
+// Define a mapping of websites and their regex patterns for URL transformation
+const urlTransformations: { [website: string]: RegExp } = {
+  "streamable.com": /(https:\/\/streamable.com\/)([a-zA-Z0-9]+)/,
+  "piped.video": /(https:\/\/piped\.video\/watch\?v=)([a-zA-Z0-9_-]+)/,
+  "youtube.com": /(https:\/\/www.youtube.com\/watch\?v=)([a-zA-Z0-9_-]+)/,
+  // Add more websites and patterns as needed
+};
+
+// Transform known video platform urls into their embed counterparts
+export const transformUrl = (inputUrl: string): string => {
+  for (const website in urlTransformations) {
+    if (inputUrl.match(urlTransformations[website])) {
+      return inputUrl.replace(urlTransformations[website], (match, p1, p2) => {
+        if (website === "streamable.com") {
+          return `${p1}e/${p2}?quality=highest`;
+        } else if (website === "piped.video") {
+          return `${p1}${p2}`;
+        } else if (website === "youtube.com") {
+          return `https://www.youtube.com/embed/${p2}/`;
+        }
+      });
+    }
+  }
+  return inputUrl; // Return the input URL if no matching pattern is found
+};
+
+const parseUrl = (url: string): URL | null => {
+  try {
+    return new URL(url);
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+};
+
+export function isUrlImage(url: string): boolean {
+  const parsedUrl = parseUrl(url);
+
+  if (!parsedUrl) {
+    return false;
+  }
+
+  return (
+    parsedUrl.pathname.endsWith(".jpeg") ||
+    parsedUrl.pathname.endsWith(".png") ||
+    parsedUrl.pathname.endsWith(".gif") ||
+    parsedUrl.pathname.endsWith(".jpg") ||
+    parsedUrl.pathname.endsWith(".webp")
+  );
+}
+
+export const isUrlVideo = (url: string): boolean => {
+  const parsedUrl = parseUrl(url);
+
+  if (parsedUrl) {
+    // Check if the URL contains ".mp4" in its pathname
+    return parsedUrl.pathname.toLowerCase().includes(".mp4");
+  }
+
+  return false;
+};
+
+export const isUrlVideoEmbed = (url: string): boolean => {
+  const parsedUrl = parseUrl(url);
+
+  if (parsedUrl) {
+    // List of known video platform hostnames
+    const videoPlatforms = Object.keys(urlTransformations);
+
+    // Check if the URL pathname contains "/embed/" or "/e/"
+    const pathname = parsedUrl.pathname;
+    if (pathname.includes("/embed/") || pathname.includes("/e/")) {
+      return true;
+    }
+
+    // Check if the URL's hostname is in the list of video platforms
+    return videoPlatforms.some((platform) =>
+      parsedUrl.hostname.includes(platform),
+    );
+  }
+
+  return false;
+};
+
+export const isUrlMedia = (url: string): boolean => {
+  return isUrlImage(url) || isUrlVideo(url) || isUrlVideoEmbed(url);
+};

From 24f7b2dd6c2a16d83f6b32d80bd3f1be22061142 Mon Sep 17 00:00:00 2001
From: Carlos Feliciano-Barba <carlos@felicianobarba.com>
Date: Sun, 15 Oct 2023 20:12:18 -0400
Subject: [PATCH 04/16] Fix testing extend-expect import for vitest

---
 src/setupTests.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/setupTests.ts b/src/setupTests.ts
index f3adbf2a1b..a3ac68b887 100644
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@@ -2,7 +2,7 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import "@testing-library/jest-dom";
+import "@testing-library/jest-dom/vitest";
 
 // Mock matchmedia
 window.matchMedia =

From 08d3ab27d4491927ad318adc208a1c0d6d4243fa Mon Sep 17 00:00:00 2001
From: Carlos Feliciano-Barba <carlos@felicianobarba.com>
Date: Sun, 15 Oct 2023 20:14:55 -0400
Subject: [PATCH 05/16] Return true when checking .mov video urls

---
 src/helpers/url.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/helpers/url.ts b/src/helpers/url.ts
index 5c44fceffe..61d2ac93bd 100644
--- a/src/helpers/url.ts
+++ b/src/helpers/url.ts
@@ -74,7 +74,8 @@ export const isUrlVideo = (url: string): boolean => {
 
   if (parsedUrl) {
     // Check if the URL contains ".mp4" in its pathname
-    return parsedUrl.pathname.toLowerCase().includes(".mp4");
+    url = parsedUrl.pathname.toLowerCase();
+    return url.includes(".mp4") || url.includes(".mov");
   }
 
   return false;

From df4e84c390b7005434a1d6081628dd08f18dc67b Mon Sep 17 00:00:00 2001
From: Carlos Feliciano-Barba <carlos@felicianobarba.com>
Date: Sun, 15 Oct 2023 20:18:24 -0400
Subject: [PATCH 06/16] Add support for other youtube url patterns and simplify
 transformUrl

---
 src/helpers/url.ts | 40 ++++++++++++++++++++++++++--------------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/helpers/url.ts b/src/helpers/url.ts
index 61d2ac93bd..0e742d7637 100644
--- a/src/helpers/url.ts
+++ b/src/helpers/url.ts
@@ -22,26 +22,38 @@ export function isValidUrl(
 const urlTransformations: { [website: string]: RegExp } = {
   "streamable.com": /(https:\/\/streamable.com\/)([a-zA-Z0-9]+)/,
   "piped.video": /(https:\/\/piped\.video\/watch\?v=)([a-zA-Z0-9_-]+)/,
-  "youtube.com": /(https:\/\/www.youtube.com\/watch\?v=)([a-zA-Z0-9_-]+)/,
+  "youtube.com":
+    /(https:\/\/(?:www|m)\.youtube\.com\/watch\?v=)([a-zA-Z0-9_-]+).*$/,
+  "youtu.be": /(https:\/\/youtu\.be\/)([a-zA-Z0-9_-]+)/,
   // Add more websites and patterns as needed
 };
 
 // Transform known video platform urls into their embed counterparts
 export const transformUrl = (inputUrl: string): string => {
-  for (const website in urlTransformations) {
-    if (inputUrl.match(urlTransformations[website])) {
-      return inputUrl.replace(urlTransformations[website], (match, p1, p2) => {
-        if (website === "streamable.com") {
-          return `${p1}e/${p2}?quality=highest`;
-        } else if (website === "piped.video") {
-          return `${p1}${p2}`;
-        } else if (website === "youtube.com") {
-          return `https://www.youtube.com/embed/${p2}/`;
-        }
-      });
-    }
+  const matchedWebsite = Object.keys(urlTransformations).find((website) =>
+    inputUrl.match(urlTransformations[website]),
+  );
+
+  if (!matchedWebsite) {
+    return inputUrl; // No matching pattern found, return input URL
   }
-  return inputUrl; // Return the input URL if no matching pattern is found
+
+  return inputUrl.replace(
+    urlTransformations[matchedWebsite],
+    (_match, p1, p2) => {
+      if (matchedWebsite === "streamable.com") {
+        return `${p1}e/${p2}?quality=highest`;
+      }
+      if (matchedWebsite === "piped.video") {
+        return `${p1}${p2}`;
+      }
+      if (matchedWebsite === "youtube.com" || matchedWebsite === "youtu.be") {
+        return `https://www.youtube.com/embed/${p2}/`;
+      }
+
+      return inputUrl; // Fallback to the input URL
+    },
+  );
 };
 
 const parseUrl = (url: string): URL | null => {

From 1db077e1ab7cbb7dec4be89a9721e794fa8deea7 Mon Sep 17 00:00:00 2001
From: Carlos Feliciano-Barba <carlos@felicianobarba.com>
Date: Sun, 15 Oct 2023 20:21:05 -0400
Subject: [PATCH 07/16] Replace .gifv with .mp4 to be able to autoplay the
 video

---
 src/helpers/url.ts | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/helpers/url.ts b/src/helpers/url.ts
index 0e742d7637..b058ef3d6e 100644
--- a/src/helpers/url.ts
+++ b/src/helpers/url.ts
@@ -30,30 +30,30 @@ const urlTransformations: { [website: string]: RegExp } = {
 
 // Transform known video platform urls into their embed counterparts
 export const transformUrl = (inputUrl: string): string => {
+  // If the URL contains gifv replace it with mp4 in order for the video to play inline
+  const url = inputUrl.replace(/\.gifv/g, ".mp4");
+
   const matchedWebsite = Object.keys(urlTransformations).find((website) =>
-    inputUrl.match(urlTransformations[website]),
+    url.match(urlTransformations[website]),
   );
 
   if (!matchedWebsite) {
-    return inputUrl; // No matching pattern found, return input URL
+    return url; // No matching pattern found, return input URL
   }
 
-  return inputUrl.replace(
-    urlTransformations[matchedWebsite],
-    (_match, p1, p2) => {
-      if (matchedWebsite === "streamable.com") {
-        return `${p1}e/${p2}?quality=highest`;
-      }
-      if (matchedWebsite === "piped.video") {
-        return `${p1}${p2}`;
-      }
-      if (matchedWebsite === "youtube.com" || matchedWebsite === "youtu.be") {
-        return `https://www.youtube.com/embed/${p2}/`;
-      }
-
-      return inputUrl; // Fallback to the input URL
-    },
-  );
+  return url.replace(urlTransformations[matchedWebsite], (_match, p1, p2) => {
+    if (matchedWebsite === "streamable.com") {
+      return `${p1}e/${p2}?quality=highest`;
+    }
+    if (matchedWebsite === "piped.video") {
+      return `${p1}${p2}`;
+    }
+    if (matchedWebsite === "youtube.com" || matchedWebsite === "youtu.be") {
+      return `https://www.youtube.com/embed/${p2}/`;
+    }
+
+    return url; // Fallback to the input URL
+  });
 };
 
 const parseUrl = (url: string): URL | null => {

From cdf712748d50c2575dbe37e421c3ea1d4657dc17 Mon Sep 17 00:00:00 2001
From: Carlos Feliciano-Barba <carlos@felicianobarba.com>
Date: Sun, 15 Oct 2023 23:02:03 -0400
Subject: [PATCH 08/16] Add thumbnail prop to render the thumbnail or the main
 image

This fixes an issue on the LargePost where image would try to render
broken thumbnails instead of the working image url.
---
 src/features/gallery/PostGalleryImg.tsx        | 12 +++++++++---
 src/features/post/inFeed/compact/Thumbnail.tsx |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/features/gallery/PostGalleryImg.tsx b/src/features/gallery/PostGalleryImg.tsx
index c196e4635d..9c3fcaec00 100644
--- a/src/features/gallery/PostGalleryImg.tsx
+++ b/src/features/gallery/PostGalleryImg.tsx
@@ -5,17 +5,23 @@ import { isUrlImage } from "../../helpers/url";
 
 export interface PostGalleryImgProps extends Omit<GalleryImgProps, "src"> {
   post: PostView;
+  thumbnail?: boolean;
 }
 
 export default function PostGalleryImg({
   post,
+  thumbnail = false,
   ...props
 }: PostGalleryImgProps) {
-  return <GalleryImg {...props} src={getPostImage(post)} post={post} />;
+  return (
+    <GalleryImg {...props} src={getPostImage(post, thumbnail)} post={post} />
+  );
 }
 
-function getPostImage(post: PostView): string | undefined {
-  if (post.post.thumbnail_url) return post.post.thumbnail_url;
+function getPostImage(post: PostView, thumbnail: boolean): string | undefined {
+  if (thumbnail && post.post.thumbnail_url) {
+    return post.post.thumbnail_url;
+  }
 
   if (post.post.url && isUrlImage(post.post.url)) return post.post.url;
 
diff --git a/src/features/post/inFeed/compact/Thumbnail.tsx b/src/features/post/inFeed/compact/Thumbnail.tsx
index 417e994c71..01aab484df 100644
--- a/src/features/post/inFeed/compact/Thumbnail.tsx
+++ b/src/features/post/inFeed/compact/Thumbnail.tsx
@@ -162,7 +162,7 @@ export default function Thumbnail({ post }: ImgProps) {
     }
 
     if (postImageSrc) {
-      return <StyledPostGallery post={post} blur={nsfw} />;
+      return <StyledPostGallery post={post} blur={nsfw} thumbnail />;
     }
 
     return <SelfSvg />;

From 12d1e447267809cf08a6e245178161a37bb3353d Mon Sep 17 00:00:00 2001
From: Carlos Feliciano-Barba <carlos@felicianobarba.com>
Date: Sun, 15 Oct 2023 23:08:06 -0400
Subject: [PATCH 09/16] Add tests for the url helpers and test various url
 transformations

---
 src/helpers/url.test.ts | 111 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 111 insertions(+)
 create mode 100644 src/helpers/url.test.ts

diff --git a/src/helpers/url.test.ts b/src/helpers/url.test.ts
new file mode 100644
index 0000000000..6a249ceba4
--- /dev/null
+++ b/src/helpers/url.test.ts
@@ -0,0 +1,111 @@
+import {
+  isValidUrl,
+  transformUrl,
+  isUrlImage,
+  isUrlVideo,
+  isUrlVideoEmbed,
+  isUrlMedia,
+} from "./url";
+
+describe("URL Utility Functions", () => {
+  describe("isValidUrl", () => {
+    it("returns true for a valid URL", () => {
+      expect(isValidUrl("https://www.example.com")).toBe(true);
+    });
+
+    it("returns false for an invalid URL", () => {
+      expect(isValidUrl("not-a-url")).toBe(false);
+    });
+  });
+
+  describe("transformUrl", () => {
+    it("transform gifv to mp4", () => {
+      const inputUrl = "https://example.com/video.gifv";
+      const transformedUrl = transformUrl(inputUrl);
+      expect(transformedUrl).toBe("https://example.com/video.mp4");
+    });
+
+    it("handle unknown URLs", () => {
+      const inputUrl = "https://example.com/unknown-url";
+      const transformedUrl = transformUrl(inputUrl);
+      expect(transformedUrl).toBe(inputUrl);
+    });
+
+    it("transform streamable.com URLs", () => {
+      const inputUrl = "https://streamable.com/sld50w";
+      const transformedUrl = transformUrl(inputUrl);
+      expect(transformedUrl).toBe(
+        "https://streamable.com/e/sld50w?quality=highest",
+      );
+    });
+
+    it("transform youtube.com/watch URLs", () => {
+      const inputUrl =
+        "https://www.youtube.com/watch?v=QuRgYoxEHRE&t=19s&pp=ygUObmhsIHByaWRlIHRhcGU=";
+      const transformedUrl = transformUrl(inputUrl);
+      expect(transformedUrl).toBe("https://www.youtube.com/embed/QuRgYoxEHRE/");
+    });
+
+    it("transform m.youtube.com/watch URLs", () => {
+      const inputUrl =
+        "https://m.youtube.com/watch?v=QuRgYoxEHRE&t=19s&pp=ygUObmhsIHByaWRlIHRhcGU=";
+      const transformedUrl = transformUrl(inputUrl);
+      expect(transformedUrl).toBe("https://www.youtube.com/embed/QuRgYoxEHRE/");
+    });
+
+    it("transform youtu.be URLs", () => {
+      const inputUrl = "https://youtu.be/bOuy9-sV8UQ";
+      const transformedUrl = transformUrl(inputUrl);
+      expect(transformedUrl).toBe("https://www.youtube.com/embed/bOuy9-sV8UQ/");
+    });
+  });
+
+  describe("isUrlImage", () => {
+    it("returns true for image URLs", () => {
+      expect(isUrlImage("https://example.com/image.jpg")).toBe(true);
+    });
+
+    it("returns false for non-image URLs", () => {
+      expect(isUrlImage("https://example.com/video.mp4")).toBe(false);
+    });
+  });
+
+  describe("isUrlVideo", () => {
+    it("returns true for mp4", () => {
+      expect(isUrlVideo("https://example.com/video.mp4")).toBe(true);
+    });
+
+    it("returns true for mov", () => {
+      expect(isUrlVideo("https://example.com/video.mov")).toBe(true);
+    });
+
+    it("returns false for non-video URLs", () => {
+      expect(isUrlVideo("https://example.com/image.jpg")).toBe(false);
+    });
+  });
+
+  describe("isUrlVideoEmbed", () => {
+    it("returns true for video embed URLs", () => {
+      expect(isUrlVideoEmbed("https://example.com/embed/aoeu2134aeu")).toBe(
+        true,
+      );
+    });
+
+    it("returns false for non-video embed URLs", () => {
+      expect(isUrlVideoEmbed("https://example.com/aoeu2134aeu")).toBe(false);
+    });
+  });
+
+  describe("isUrlMedia", () => {
+    it("returns true for media URLs", () => {
+      expect(isUrlMedia("https://example.com/image.jpg")).toBe(true);
+      expect(isUrlMedia("https://example.com/video.mp4")).toBe(true);
+      expect(isUrlMedia("https://example.com/embed/aostm89aueu")).toBe(true);
+    });
+
+    it("returns false for non-media URLs", () => {
+      expect(isUrlMedia("https://example.com/document.pdf")).toBe(false);
+      expect(isUrlMedia("https://example.com/not-media")).toBe(false);
+    });
+  });
+});

From e34d30453d3536483516e5cba1a5bc84d0afd31d Mon Sep 17 00:00:00 2001
From: Carlos Feliciano-Barba <carlos@felicianobarba.com>
Date: Sun, 15 Oct 2023 23:25:56 -0400
Subject: [PATCH 10/16] Handle empty url strings when checking media

---
 src/helpers/url.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/helpers/url.ts b/src/helpers/url.ts
index b058ef3d6e..b336714f0a 100644
--- a/src/helpers/url.ts
+++ b/src/helpers/url.ts
@@ -116,5 +116,9 @@ export const isUrlVideoEmbed = (url: string): boolean => {
 };
 
 export const isUrlMedia = (url: string): boolean => {
+  if (!url || url === "") {
+    return false;
+  }
+
   return isUrlImage(url) || isUrlVideo(url) || isUrlVideoEmbed(url);
 };

From b17fb66af803b7853590aa9c34f880b6fd8d540b Mon Sep 17 00:00:00 2001
From: Carlos Feliciano-Barba <carlos@felicianobarba.com>
Date: Sun, 15 Oct 2023 23:43:33 -0400
Subject: [PATCH 11/16] Transform urls before checking media

- This fixes an issue where .gifv would not be considered a video
---
 src/helpers/url.test.ts | 6 +++---
 src/helpers/url.ts      | 7 ++++++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/helpers/url.test.ts b/src/helpers/url.test.ts
index 6a249ceba4..6b06133def 100644
--- a/src/helpers/url.test.ts
+++ b/src/helpers/url.test.ts
@@ -100,12 +100,12 @@ describe("URL Utility Functions", () => {
     it("returns true for media URLs", () => {
       expect(isUrlMedia("https://example.com/image.jpg")).toBe(true);
       expect(isUrlMedia("https://example.com/video.mp4")).toBe(true);
+      expect(isUrlMedia("https://example.com/video.gifv")).toBe(true);
       expect(isUrlMedia("https://example.com/embed/aostm89aueu")).toBe(true);
     });
 
-    it("returns false for non-media URLs", () => {
-      expect(isUrlMedia("https://example.com/document.pdf")).toBe(false);
-      expect(isUrlMedia("https://example.com/not-media")).toBe(false);
+    it("returns false for non-video embed URLs", () => {
+      expect(isUrlVideoEmbed("https://example.com/aoeu2134aeu")).toBe(false);
     });
   });
 });
diff --git a/src/helpers/url.ts b/src/helpers/url.ts
index b336714f0a..5852beb12a 100644
--- a/src/helpers/url.ts
+++ b/src/helpers/url.ts
@@ -120,5 +120,10 @@ export const isUrlMedia = (url: string): boolean => {
     return false;
   }
 
-  return isUrlImage(url) || isUrlVideo(url) || isUrlVideoEmbed(url);
+  const transformedUrl = transformUrl(url);
+  return (
+    isUrlImage(transformedUrl) ||
+    isUrlVideo(transformedUrl) ||
+    isUrlVideoEmbed(transformedUrl)
+  );
 };

From 6190cc2adf0bd4be449281b14d0821c71c334166 Mon Sep 17 00:00:00 2001
From: Carlos Feliciano-Barba <carlos@felicianobarba.com>
Date: Mon, 16 Oct 2023 00:19:37 -0400
Subject: [PATCH 12/16] Add Media component to handle rendering of media and
 embeds

This checks and renders media types and in the case of videos will try
the embed url as well as the normal url if one fails to play.

Videos and images render with the gallery created for the LargePost component

Embeds are sized in a 16/9 ratio since we can't fetch their size with
this implementation.

Communicates errors to parent component via callback to hide media if it
fails to play.
---
 src/features/shared/Media.tsx | 95 +++++++++++++++++++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100644 src/features/shared/Media.tsx

diff --git a/src/features/shared/Media.tsx b/src/features/shared/Media.tsx
new file mode 100644
index 0000000000..6d3cfdfb81
--- /dev/null
+++ b/src/features/shared/Media.tsx
@@ -0,0 +1,95 @@
+import styled from "@emotion/styled";
+import Video from "./Video";
+import { useMemo, useRef, useState } from "react";
+import { findLoneImage } from "../../helpers/markdown";
+import { PostView } from "lemmy-js-client";
+import {
+  isUrlImage,
+  isUrlVideo,
+  isUrlVideoEmbed,
+  transformUrl,
+} from "../../helpers/url";
+import { Image } from "../post/inFeed/large/Image";
+
+// Render video embeds with a 16/9 aspect ratio
+const VideoEmbed = styled.div`
+  width: 100%;
+  height: 0px;
+  position: relative;
+  padding-bottom: 56.818%;
+  max-height: 50vh;
+
+  iframe {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
+`;
+
+interface MediaProps {
+  post: PostView;
+  onError: () => void;
+  detail?: boolean;
+  blur?: boolean;
+}
+
+const Media = ({ post, detail = false, blur = true, onError }: MediaProps) => {
+  const postUrl = transformUrl(post.post.url || "");
+  const embedVideoUrl = transformUrl(post.post.embed_video_url || "");
+  const [url, setUrl] = useState(embedVideoUrl || postUrl);
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const isVideo = isUrlVideo(url as string);
+  const isVideoEmbed = isUrlVideoEmbed(url as string);
+
+  const markdownLoneImage = useMemo(
+    () => (post?.post.body ? findLoneImage(post.post.body) : undefined),
+    [post],
+  );
+
+  const handleMediaError = () => {
+    // Cycle the video url before throwing an error
+    if (isVideo && url === embedVideoUrl) {
+      return setUrl(postUrl);
+    }
+    onError();
+  };
+
+  if (!url) {
+    return;
+  }
+
+  if (postUrl && isUrlImage(postUrl)) {
+    return <Image blur={blur} post={post} animationType="zoom" />;
+  }
+
+  if (isVideo) {
+    return (
+      <Video
+        src={url}
+        blur={blur}
+        controls={detail}
+        onError={handleMediaError}
+      />
+    );
+  }
+
+  if (isVideoEmbed) {
+    return (
+      <VideoEmbed>
+        <iframe
+          ref={iframeRef}
+          src={url}
+          frameBorder="0"
+          width="100%"
+          height="100%"
+          allowFullScreen
+        />
+      </VideoEmbed>
+    );
+  }
+
+  if (markdownLoneImage)
+    return <Image blur={blur} post={post} animationType="zoom" />;
+};
+
+export default Media;

From 5eaf8b167573a0ef1c91c6a3703fc2a710a4502b Mon Sep 17 00:00:00 2001
From: Carlos Feliciano-Barba <carlos@felicianobarba.com>
Date: Mon, 16 Oct 2023 00:24:59 -0400
Subject: [PATCH 13/16] Consolidate LargePost and PostDetail using the Media
 component

---
 src/features/post/detail/PostDetail.tsx      | 44 ++++--------
 src/features/post/inFeed/large/LargePost.tsx | 71 ++++----------------
 2 files changed, 26 insertions(+), 89 deletions(-)

diff --git a/src/features/post/detail/PostDetail.tsx b/src/features/post/detail/PostDetail.tsx
index 5a34c3fa0b..4501aea808 100644
--- a/src/features/post/detail/PostDetail.tsx
+++ b/src/features/post/detail/PostDetail.tsx
@@ -23,17 +23,15 @@ import ViewAllComments from "./ViewAllComments";
 import InlineMarkdown from "../../shared/InlineMarkdown";
 import { megaphone } from "ionicons/icons";
 import CommunityLink from "../../labels/links/CommunityLink";
-import Video from "../../shared/Video";
-import { css } from "@emotion/react";
 import Nsfw, { isNsfw } from "../../labels/Nsfw";
 import { PageContext } from "../../auth/PageContext";
-import PostGalleryImg from "../../gallery/PostGalleryImg";
 import { scrollIntoView } from "../../../helpers/dom";
 import JumpFab from "../../comment/JumpFab";
 import { OTapToCollapseType } from "../../../services/db";
 import Locked from "./Locked";
 import useAppToast from "../../../helpers/useAppToast";
 import { postLocked } from "../../../helpers/toastMessages";
+import Media from "../../shared/Media";
 import { isUrlMedia } from "../../../helpers/url";
 
 const BorderlessIonItem = styled(IonItem)`
@@ -57,19 +55,6 @@ const Container = styled.div`
   width: 100%;
 `;
 
-const lightboxCss = css`
-  width: 100%;
-  max-height: 50vh;
-  object-fit: contain;
-  background: var(--lightroom-bg);
-`;
-
-const LightboxImg = styled(PostGalleryImg)`
-  -webkit-touch-callout: default;
-
-  ${lightboxCss}
-`;
-
 const StyledMarkdown = styled(Markdown)`
   margin: 16px 0;
 
@@ -127,6 +112,7 @@ export default function PostDetail({
   sort,
 }: PostDetailProps) {
   const [collapsed, setCollapsed] = useState(false);
+  const [hasMediaError, setHasMediaError] = useState(false);
   const dispatch = useAppDispatch();
   const markdownLoneImage = useMemo(
     () => (post?.post.body ? findLoneImage(post.post.body) : undefined),
@@ -170,21 +156,6 @@ export default function PostDetail({
     [],
   );
 
-  function renderImage() {
-    if (!post) return;
-
-    if (post.post.url && isUrlImage(post.post.url)) {
-      return <LightboxImg post={post} />;
-    }
-
-    const videoUrl = post.post.embed_video_url || post.post.url;
-    if (videoUrl && isUrlVideo(videoUrl)) {
-      return <Video src={videoUrl} css={lightboxCss} controls />;
-    }
-
-    if (markdownLoneImage) return <LightboxImg post={post} />;
-  }
-
   function renderText() {
     if (!post) return;
 
@@ -226,7 +197,16 @@ export default function PostDetail({
           }}
         >
           <Container>
-            <div onClick={(e) => e.stopPropagation()}>{renderImage()}</div>
+            {!hasMediaError && (
+              <div onClick={(e) => e.stopPropagation()}>
+                <Media
+                  post={post}
+                  detail={true}
+                  blur={false}
+                  onError={() => setHasMediaError(true)}
+                />
+              </div>
+            )}
             <PostDeets>
               <Title ref={titleRef}>
                 <InlineMarkdown>{post.post.name}</InlineMarkdown>{" "}
diff --git a/src/features/post/inFeed/large/LargePost.tsx b/src/features/post/inFeed/large/LargePost.tsx
index 7f71dc3b71..28dea094a7 100644
--- a/src/features/post/inFeed/large/LargePost.tsx
+++ b/src/features/post/inFeed/large/LargePost.tsx
@@ -1,10 +1,9 @@
+import { useState } from "react";
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import { megaphone } from "ionicons/icons";
 import PreviewStats from "../PreviewStats";
 import Embed from "../../shared/Embed";
-import { useMemo } from "react";
-import { findLoneImage } from "../../../../helpers/markdown";
 import { maxWidthCss } from "../../../shared/AppContent";
 import Nsfw, { isNsfw, isNsfwBlurred } from "../../../labels/Nsfw";
 import { VoteButton } from "../../shared/VoteButton";
@@ -13,12 +12,11 @@ import PersonLink from "../../../labels/links/PersonLink";
 import InlineMarkdown from "../../../shared/InlineMarkdown";
 import { AnnouncementIcon } from "../../../../pages/posts/PostPage";
 import CommunityLink from "../../../labels/links/CommunityLink";
-import Video from "../../../shared/Video";
 import { PostProps } from "../Post";
 import Save from "../../../labels/Save";
-import { Image } from "./Image";
 import { useAppSelector } from "../../../../store";
-import { isUrlVideo, isUrlImage } from "../../../../helpers/url";
+import Media from "../../../shared/Media";
+import { isUrlMedia } from "../../../../helpers/url";
 
 const Container = styled.div`
   display: flex;
@@ -98,66 +96,16 @@ const PostBody = styled.div<{ isRead: boolean }>`
   overflow: hidden;
 `;
 
-const ImageContainer = styled.div`
-  overflow: hidden;
-  margin: 0 -0.75rem;
-`;
-
 export default function LargePost({ post, communityMode }: PostProps) {
   const hasBeenRead: boolean =
     useAppSelector((state) => state.post.postReadById[post.post.id]) ||
     post.read;
-  const markdownLoneImage = useMemo(
-    () => (post.post.body ? findLoneImage(post.post.body) : undefined),
-    [post],
-  );
   const blurNsfw = useAppSelector(
     (state) => state.settings.appearance.posts.blurNsfw,
   );
+  const [hasMediaError, setHasMediaError] = useState(false);
 
   function renderPostBody() {
-    if (post.post.url && isUrlImage(post.post.url)) {
-      return (
-        <ImageContainer>
-          <Image
-            blur={isNsfwBlurred(post, blurNsfw)}
-            post={post}
-            animationType="zoom"
-          />
-        </ImageContainer>
-      );
-    }
-
-    /**
-     * The lemmy api returns an embed_video_url for some urls, try loading those here
-     */
-    const videoUrl = post.post.embed_video_url || post.post.url;
-    if (videoUrl && isUrlVideo(videoUrl)) {
-      return (
-        <ImageContainer>
-          <Video src={videoUrl} blur={isNsfwBlurred(post, blurNsfw)} />
-        </ImageContainer>
-      );
-    }
-
-    if (markdownLoneImage)
-      return (
-        <ImageContainer>
-          <Image
-            blur={isNsfwBlurred(post, blurNsfw)}
-            post={post}
-            animationType="zoom"
-          />
-        </ImageContainer>
-      );
-
-    /**
-     * Embedded video, image with a thumbanil
-     */
-    if (post.post.thumbnail_url && post.post.url) {
-      return <Embed post={post} />;
-    }
-
     /**
      * text image with captions
      */
@@ -185,7 +133,16 @@ export default function LargePost({ post, communityMode }: PostProps) {
         {isNsfw(post) && <Nsfw />}
       </Title>
 
-      {renderPostBody()}
+      {!hasMediaError &&
+      isUrlMedia(post.post.embed_video_url || post.post.url || "") ? (
+        <Media
+          post={post}
+          blur={isNsfwBlurred(post, blurNsfw)}
+          onError={() => setHasMediaError(true)}
+        />
+      ) : (
+        renderPostBody()
+      )}
 
       <Details>
         <LeftDetails isRead={hasBeenRead}>

From 52f619c749b2f930f3c62f074ecf8d991da8e960 Mon Sep 17 00:00:00 2001
From: Carlos Feliciano-Barba <carlos@felicianobarba.com>
Date: Mon, 16 Oct 2023 20:48:59 -0400
Subject: [PATCH 14/16] Fallback to thumbnails if the base image fails to load

---
 src/features/shared/Media.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/features/shared/Media.tsx b/src/features/shared/Media.tsx
index 6d3cfdfb81..001c6f78f1 100644
--- a/src/features/shared/Media.tsx
+++ b/src/features/shared/Media.tsx
@@ -36,8 +36,10 @@ interface MediaProps {
 const Media = ({ post, detail = false, blur = true, onError }: MediaProps) => {
   const postUrl = transformUrl(post.post.url || "");
   const embedVideoUrl = transformUrl(post.post.embed_video_url || "");
+  const thumbnailUrl = transformUrl(post.post.thumbnail_url || "");
   const [url, setUrl] = useState(embedVideoUrl || postUrl);
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const isImage = isUrlImage(url as string);
   const isVideo = isUrlVideo(url as string);
   const isVideoEmbed = isUrlVideoEmbed(url as string);
 
@@ -51,6 +53,12 @@ const Media = ({ post, detail = false, blur = true, onError }: MediaProps) => {
     if (isVideo && url === embedVideoUrl) {
       return setUrl(postUrl);
     }
+
+    // Cycle the image url before throwing an error
+    if (isImage && url === postUrl) {
+      return setUrl(thumbnailUrl);
+    }
+
     onError();
   };
 
@@ -58,8 +66,11 @@ const Media = ({ post, detail = false, blur = true, onError }: MediaProps) => {
     return;
   }
 
+  // Change the url as we need
+  const postWithUrl = { ...post, post: { ...post.post, url: url } };
+
   if (postUrl && isUrlImage(postUrl)) {
-    return <Image blur={blur} post={post} animationType="zoom" />;
+    return <Image blur={blur} post={postWithUrl} animationType="zoom" />;
   }
 
   if (isVideo) {
@@ -89,7 +100,7 @@ const Media = ({ post, detail = false, blur = true, onError }: MediaProps) => {
   }
 
   if (markdownLoneImage)
-    return <Image blur={blur} post={post} animationType="zoom" />;
+    return <Image blur={blur} post={postWithUrl} animationType="zoom" />;
 };
 
 export default Media;

From 63be3458b4f0b978b385ade38fe4a6662fa21a3a Mon Sep 17 00:00:00 2001
From: Carlos Feliciano-Barba <carlos@felicianobarba.com>
Date: Mon, 16 Oct 2023 20:51:55 -0400
Subject: [PATCH 15/16] Add error handling to GalleryImg and Media images

---
 src/features/gallery/GalleryImg.tsx | 11 ++++++++++-
 src/features/shared/Media.tsx       | 18 ++++++++++++++++--
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/features/gallery/GalleryImg.tsx b/src/features/gallery/GalleryImg.tsx
index 96148da8f6..7764a6890a 100644
--- a/src/features/gallery/GalleryImg.tsx
+++ b/src/features/gallery/GalleryImg.tsx
@@ -1,4 +1,10 @@
-import React, { FocusEvent, KeyboardEvent, useContext, useRef } from "react";
+import React, {
+  FocusEvent,
+  KeyboardEvent,
+  ReactEventHandler,
+  useContext,
+  useRef,
+} from "react";
 import "photoswipe/dist/photoswipe.css";
 import { PostView } from "lemmy-js-client";
 import { GalleryContext } from "./GalleryProvider";
@@ -10,6 +16,7 @@ export interface GalleryImgProps {
   className?: string;
   post?: PostView;
   animationType?: PreparedPhotoSwipeOptions["showHideAnimationType"];
+  onError?: ReactEventHandler<HTMLImageElement> | undefined;
 }
 
 /**
@@ -28,6 +35,7 @@ export function GalleryImg({
   className,
   post,
   animationType,
+  onError,
 }: GalleryImgProps) {
   const loaded = useRef(false);
   const imgRef = useRef<HTMLImageElement>(null);
@@ -53,6 +61,7 @@ export function GalleryImg({
 
         loaded.current = true;
       }}
+      onError={onError}
     />
   );
 }
diff --git a/src/features/shared/Media.tsx b/src/features/shared/Media.tsx
index 001c6f78f1..6d403d04c9 100644
--- a/src/features/shared/Media.tsx
+++ b/src/features/shared/Media.tsx
@@ -70,7 +70,14 @@ const Media = ({ post, detail = false, blur = true, onError }: MediaProps) => {
   const postWithUrl = { ...post, post: { ...post.post, url: url } };
 
   if (postUrl && isUrlImage(postUrl)) {
-    return <Image blur={blur} post={postWithUrl} animationType="zoom" />;
+    return (
+      <Image
+        blur={blur}
+        post={postWithUrl}
+        animationType="zoom"
+        onError={handleMediaError}
+      />
+    );
   }
 
   if (isVideo) {
@@ -100,7 +107,14 @@ const Media = ({ post, detail = false, blur = true, onError }: MediaProps) => {
   }
 
   if (markdownLoneImage)
-    return <Image blur={blur} post={postWithUrl} animationType="zoom" />;
+    return (
+      <Image
+        blur={blur}
+        post={postWithUrl}
+        animationType="zoom"
+        onError={handleMediaError}
+      />
+    );
 };
 
 export default Media;

From 87c3acd1b3d0c3044c9f6f7eb4c948645ef74b8a Mon Sep 17 00:00:00 2001
From: Carlos Feliciano-Barba <carlos@felicianobarba.com>
Date: Thu, 26 Oct 2023 22:58:02 -0400
Subject: [PATCH 16/16] Remove iframe embed functionality from the Media
 component

- Remove embed url helpers
- Improve error handling on PostDetail
---
 src/features/post/detail/PostDetail.tsx |  7 ++-
 src/features/shared/Media.tsx           | 41 +++--------------
 src/helpers/url.test.ts                 | 50 ---------------------
 src/helpers/url.ts                      | 60 +------------------------
 4 files changed, 10 insertions(+), 148 deletions(-)

diff --git a/src/features/post/detail/PostDetail.tsx b/src/features/post/detail/PostDetail.tsx
index 4501aea808..8019ae43f4 100644
--- a/src/features/post/detail/PostDetail.tsx
+++ b/src/features/post/detail/PostDetail.tsx
@@ -163,9 +163,8 @@ export default function PostDetail({
       return (
         <>
           {post.post.url &&
-            !isUrlMedia(post.post.embed_video_url || post.post.url) && (
-              <Embed post={post} />
-            )}
+            (!isUrlMedia(post.post.embed_video_url || post.post.url) ||
+              hasMediaError) && <Embed post={post} />}
           <StyledMarkdown>{post.post.body}</StyledMarkdown>
         </>
       );
@@ -173,7 +172,7 @@ export default function PostDetail({
 
     if (
       post.post.url &&
-      !isUrlMedia(post.post.embed_video_url || post.post.url)
+      (!isUrlMedia(post.post.embed_video_url || post.post.url) || hasMediaError)
     ) {
       return <StyledEmbed post={post} />;
     }
diff --git a/src/features/shared/Media.tsx b/src/features/shared/Media.tsx
index 6d403d04c9..40449f5f03 100644
--- a/src/features/shared/Media.tsx
+++ b/src/features/shared/Media.tsx
@@ -1,31 +1,15 @@
-import styled from "@emotion/styled";
 import Video from "./Video";
-import { useMemo, useRef, useState } from "react";
+import { useMemo, useState } from "react";
 import { findLoneImage } from "../../helpers/markdown";
 import { PostView } from "lemmy-js-client";
 import {
   isUrlImage,
+  isUrlMedia,
   isUrlVideo,
-  isUrlVideoEmbed,
   transformUrl,
 } from "../../helpers/url";
 import { Image } from "../post/inFeed/large/Image";
 
-// Render video embeds with a 16/9 aspect ratio
-const VideoEmbed = styled.div`
-  width: 100%;
-  height: 0px;
-  position: relative;
-  padding-bottom: 56.818%;
-  max-height: 50vh;
-
-  iframe {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-  }
-`;
-
 interface MediaProps {
   post: PostView;
   onError: () => void;
@@ -38,10 +22,8 @@ const Media = ({ post, detail = false, blur = true, onError }: MediaProps) => {
   const embedVideoUrl = transformUrl(post.post.embed_video_url || "");
   const thumbnailUrl = transformUrl(post.post.thumbnail_url || "");
   const [url, setUrl] = useState(embedVideoUrl || postUrl);
-  const iframeRef = useRef<HTMLIFrameElement | null>(null);
   const isImage = isUrlImage(url as string);
   const isVideo = isUrlVideo(url as string);
-  const isVideoEmbed = isUrlVideoEmbed(url as string);
 
   const markdownLoneImage = useMemo(
     () => (post?.post.body ? findLoneImage(post.post.body) : undefined),
@@ -51,7 +33,9 @@ const Media = ({ post, detail = false, blur = true, onError }: MediaProps) => {
   const handleMediaError = () => {
     // Cycle the video url before throwing an error
     if (isVideo && url === embedVideoUrl) {
-      return setUrl(postUrl);
+      if (isUrlMedia(postUrl)) {
+        return setUrl(postUrl);
+      }
     }
 
     // Cycle the image url before throwing an error
@@ -91,21 +75,6 @@ const Media = ({ post, detail = false, blur = true, onError }: MediaProps) => {
     );
   }
 
-  if (isVideoEmbed) {
-    return (
-      <VideoEmbed>
-        <iframe
-          ref={iframeRef}
-          src={url}
-          frameBorder="0"
-          width="100%"
-          height="100%"
-          allowFullScreen
-        />
-      </VideoEmbed>
-    );
-  }
-
   if (markdownLoneImage)
     return (
       <Image
diff --git a/src/helpers/url.test.ts b/src/helpers/url.test.ts
index 6b06133def..ac05286879 100644
--- a/src/helpers/url.test.ts
+++ b/src/helpers/url.test.ts
@@ -3,7 +3,6 @@ import {
   transformUrl,
   isUrlImage,
   isUrlVideo,
-  isUrlVideoEmbed,
   isUrlMedia,
 } from "./url";
 
@@ -12,10 +11,6 @@ describe("URL Utility Functions", () => {
     it("returns true for a valid URL", () => {
       expect(isValidUrl("https://www.example.com")).toBe(true);
     });
-
-    it("returns false for an invalid URL", () => {
-      expect(isValidUrl("not-a-url")).toBe(false);
-    });
   });
 
   describe("transformUrl", () => {
@@ -30,34 +25,6 @@ describe("URL Utility Functions", () => {
       const transformedUrl = transformUrl(inputUrl);
       expect(transformedUrl).toBe(inputUrl);
     });
-
-    it("transform streamable.com URLs", () => {
-      const inputUrl = "https://streamable.com/sld50w";
-      const transformedUrl = transformUrl(inputUrl);
-      expect(transformedUrl).toBe(
-        "https://streamable.com/e/sld50w?quality=highest",
-      );
-    });
-
-    it("transform youtube.com/watch URLs", () => {
-      const inputUrl =
-        "https://www.youtube.com/watch?v=QuRgYoxEHRE&t=19s&pp=ygUObmhsIHByaWRlIHRhcGU=";
-      const transformedUrl = transformUrl(inputUrl);
-      expect(transformedUrl).toBe("https://www.youtube.com/embed/QuRgYoxEHRE/");
-    });
-
-    it("transform m.youtube.com/watch URLs", () => {
-      const inputUrl =
-        "https://m.youtube.com/watch?v=QuRgYoxEHRE&t=19s&pp=ygUObmhsIHByaWRlIHRhcGU=";
-      const transformedUrl = transformUrl(inputUrl);
-      expect(transformedUrl).toBe("https://www.youtube.com/embed/QuRgYoxEHRE/");
-    });
-
-    it("transform youtu.be URLs", () => {
-      const inputUrl = "https://youtu.be/bOuy9-sV8UQ";
-      const transformedUrl = transformUrl(inputUrl);
-      expect(transformedUrl).toBe("https://www.youtube.com/embed/bOuy9-sV8UQ/");
-    });
   });
 
   describe("isUrlImage", () => {
@@ -84,28 +51,11 @@ describe("URL Utility Functions", () => {
     });
   });
 
-  describe("isUrlVideoEmbed", () => {
-    it("returns true for video embed URLs", () => {
-      expect(isUrlVideoEmbed("https://example.com/embed/aoeu2134aeu")).toBe(
-        true,
-      );
-    });
-
-    it("returns false for non-video embed URLs", () => {
-      expect(isUrlVideoEmbed("https://example.com/aoeu2134aeu")).toBe(false);
-    });
-  });
-
   describe("isUrlMedia", () => {
     it("returns true for media URLs", () => {
       expect(isUrlMedia("https://example.com/image.jpg")).toBe(true);
       expect(isUrlMedia("https://example.com/video.mp4")).toBe(true);
       expect(isUrlMedia("https://example.com/video.gifv")).toBe(true);
-      expect(isUrlMedia("https://example.com/embed/aostm89aueu")).toBe(true);
-    });
-
-    it("returns false for non-video embed URLs", () => {
-      expect(isUrlVideoEmbed("https://example.com/aoeu2134aeu")).toBe(false);
     });
   });
 });
diff --git a/src/helpers/url.ts b/src/helpers/url.ts
index 5852beb12a..cbe8525f27 100644
--- a/src/helpers/url.ts
+++ b/src/helpers/url.ts
@@ -18,42 +18,12 @@ export function isValidUrl(
   return url.protocol === "http:" || url.protocol === "https:";
 }
 
-// Define a mapping of websites and their regex patterns for URL transformation
-const urlTransformations: { [website: string]: RegExp } = {
-  "streamable.com": /(https:\/\/streamable.com\/)([a-zA-Z0-9]+)/,
-  "piped.video": /(https:\/\/piped\.video\/watch\?v=)([a-zA-Z0-9_-]+)/,
-  "youtube.com":
-    /(https:\/\/(?:www|m)\.youtube\.com\/watch\?v=)([a-zA-Z0-9_-]+).*$/,
-  "youtu.be": /(https:\/\/youtu\.be\/)([a-zA-Z0-9_-]+)/,
-  // Add more websites and patterns as needed
-};
-
 // Transform known video platform urls into their embed counterparts
 export const transformUrl = (inputUrl: string): string => {
   // If the URL contains gifv replace it with mp4 in order for the video to play inline
   const url = inputUrl.replace(/\.gifv/g, ".mp4");
 
-  const matchedWebsite = Object.keys(urlTransformations).find((website) =>
-    url.match(urlTransformations[website]),
-  );
-
-  if (!matchedWebsite) {
-    return url; // No matching pattern found, return input URL
-  }
-
-  return url.replace(urlTransformations[matchedWebsite], (_match, p1, p2) => {
-    if (matchedWebsite === "streamable.com") {
-      return `${p1}e/${p2}?quality=highest`;
-    }
-    if (matchedWebsite === "piped.video") {
-      return `${p1}${p2}`;
-    }
-    if (matchedWebsite === "youtube.com" || matchedWebsite === "youtu.be") {
-      return `https://www.youtube.com/embed/${p2}/`;
-    }
-
-    return url; // Fallback to the input URL
-  });
+  return url;
 };
 
 const parseUrl = (url: string): URL | null => {
@@ -93,37 +63,11 @@ export const isUrlVideo = (url: string): boolean => {
   return false;
 };
 
-export const isUrlVideoEmbed = (url: string): boolean => {
-  const parsedUrl = parseUrl(url);
-
-  if (parsedUrl) {
-    // List of known video platform hostnames
-    const videoPlatforms = Object.keys(urlTransformations);
-
-    // Check if the URL pathname contains "/embed/" or "/e/"
-    const pathname = parsedUrl.pathname;
-    if (pathname.includes("/embed/") || pathname.includes("/e/")) {
-      return true;
-    }
-
-    // Check if the URL's hostname is in the list of video platforms
-    return videoPlatforms.some((platform) =>
-      parsedUrl.hostname.includes(platform),
-    );
-  }
-
-  return false;
-};
-
 export const isUrlMedia = (url: string): boolean => {
   if (!url || url === "") {
     return false;
   }
 
   const transformedUrl = transformUrl(url);
-  return (
-    isUrlImage(transformedUrl) ||
-    isUrlVideo(transformedUrl) ||
-    isUrlVideoEmbed(transformedUrl)
-  );
+  return isUrlImage(transformedUrl) || isUrlVideo(transformedUrl);
 };