From 0fc55d15fa4185678daeaedd11854a68b6dd812e Mon Sep 17 00:00:00 2001
From: feederbox826 <me@feederbox.cc>
Date: Tue, 11 Nov 2025 22:09:14 -0500
Subject: [PATCH] [ui] add playsInline to every image/video elem (#6259)

(cherry picked from commit 5e34df7b7bba5d96802344986935c2dadc111560)
---
 ui/v2.5/src/components/Images/ImageCard.tsx            | 1 +
 ui/v2.5/src/components/Images/ImageDetails/Image.tsx   | 1 +
 ui/v2.5/src/components/Images/ImageWallItem.tsx        | 1 +
 ui/v2.5/src/components/Scenes/SceneMarkerWallPanel.tsx | 1 +
 ui/v2.5/src/components/Scenes/SceneWallPanel.tsx       | 1 +
 ui/v2.5/src/hooks/Lightbox/Lightbox.tsx                | 1 +
 6 files changed, 6 insertions(+)

diff --git a/ui/v2.5/src/components/Images/ImageCard.tsx b/ui/v2.5/src/components/Images/ImageCard.tsx
index d530b253e..9a8c86a10 100644
--- a/ui/v2.5/src/components/Images/ImageCard.tsx
+++ b/ui/v2.5/src/components/Images/ImageCard.tsx
@@ -169,6 +169,7 @@ export const ImageCard: React.FC<IImageCardProps> = (
             <ImagePreview
               loop={video}
               autoPlay={video}
+              playsInline={video}
               className="image-card-preview-image"
               alt={props.image.title ?? ""}
               src={source}
diff --git a/ui/v2.5/src/components/Images/ImageDetails/Image.tsx b/ui/v2.5/src/components/Images/ImageDetails/Image.tsx
index b19366032..3b77d2eef 100644
--- a/ui/v2.5/src/components/Images/ImageDetails/Image.tsx
+++ b/ui/v2.5/src/components/Images/ImageDetails/Image.tsx
@@ -370,6 +370,7 @@ const ImagePage: React.FC<IProps> = ({ image }) => {
           <ImageView
             loop={image.visual_files[0].__typename == "VideoFile"}
             autoPlay={image.visual_files[0].__typename == "VideoFile"}
+            playsInline={image.visual_files[0].__typename == "VideoFile"}
             controls={image.visual_files[0].__typename == "VideoFile"}
             className="m-sm-auto no-gutter image-image"
             style={
diff --git a/ui/v2.5/src/components/Images/ImageWallItem.tsx b/ui/v2.5/src/components/Images/ImageWallItem.tsx
index c4833f917..901295192 100644
--- a/ui/v2.5/src/components/Images/ImageWallItem.tsx
+++ b/ui/v2.5/src/components/Images/ImageWallItem.tsx
@@ -39,6 +39,7 @@ export const ImageWallItem: React.FC<RenderImageProps & IExtraProps> = (
     <ImagePreview
       loop={video}
       muted={video}
+      playsInline={video}
       autoPlay={video}
       key={props.photo.key}
       style={imgStyle}
diff --git a/ui/v2.5/src/components/Scenes/SceneMarkerWallPanel.tsx b/ui/v2.5/src/components/Scenes/SceneMarkerWallPanel.tsx
index a1879a027..9c507730b 100644
--- a/ui/v2.5/src/components/Scenes/SceneMarkerWallPanel.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneMarkerWallPanel.tsx
@@ -96,6 +96,7 @@ export const MarkerWallItem: React.FC<
         loop={video}
         muted={!video || !playSound || !active}
         autoPlay={video}
+        playsInline={video}
         key={props.photo.key}
         src={props.photo.src}
         width={width}
diff --git a/ui/v2.5/src/components/Scenes/SceneWallPanel.tsx b/ui/v2.5/src/components/Scenes/SceneWallPanel.tsx
index fb99e2af4..6f98cdaab 100644
--- a/ui/v2.5/src/components/Scenes/SceneWallPanel.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneWallPanel.tsx
@@ -89,6 +89,7 @@ export const SceneWallItem: React.FC<
         loop={video}
         muted={!video || !playSound || !active}
         autoPlay={video}
+        playsInline={video}
         key={props.photo.key}
         src={props.photo.src}
         width={width}
diff --git a/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx b/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx
index 6e4eb856a..5619275ff 100644
--- a/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx
+++ b/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx
@@ -455,6 +455,7 @@ export const LightboxComponent: React.FC<IProps> = ({
     React.createElement(image.paths.preview != "" ? "video" : "img", {
       loop: image.paths.preview != "",
       autoPlay: image.paths.preview != "",
+      playsInline: image.paths.preview != "",
       src:
         image.paths.preview != ""
           ? image.paths.preview ?? ""