Merge pull request #4112 from element-hq/disable-poster

Hide the browser's default placeholder image for videos

src/room/VideoPreview.tsx

@@ -14,6 +14,7 @@ import { useTranslation } from "react-i18next";
 import { TileAvatar } from "../tile/TileAvatar";
 import styles from "./VideoPreview.module.css";
 import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
+import videoPlaceholder from "../graphics/video-placeholder.gif";
 
 export type MatrixInfo = {
   userId: string;
@@ -74,6 +75,9 @@ export const VideoPreview: FC<Props> = ({
         // There's no reason for this to be focusable
         tabIndex={-1}
         disablePictureInPicture
+        // Set the placeholder to a small transparent image. (On Android web
+        // views the default poster image is particularly ugly.)
+        poster={videoPlaceholder}
       />
       {(!videoEnabled || cameraIsStarting) && (
         <>

src/room/__snapshots__/LobbyView.test.tsx.snap

@@ -49,6 +49,7 @@ exports[`LobbyView > renders with AppBar android 1`] = `
         <video
           disablepictureinpicture=""
           playsinline=""
+          poster="/src/graphics/video-placeholder.gif"
           tabindex="-1"
         />
         <div
@@ -280,6 +281,7 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
         <video
           disablepictureinpicture=""
           playsinline=""
+          poster="/src/graphics/video-placeholder.gif"
           tabindex="-1"
         />
         <div
@@ -558,6 +560,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
         <video
           disablepictureinpicture=""
           playsinline=""
+          poster="/src/graphics/video-placeholder.gif"
           tabindex="-1"
         />
         <div

src/tile/MediaView.tsx

@@ -25,6 +25,7 @@ import {
 import { type ReactionOption } from "../reactions";
 import { ReactionIndicator } from "../reactions/ReactionIndicator";
 import { RTCConnectionStats } from "../RTCConnectionStats";
+import videoPlaceholder from "../graphics/video-placeholder.gif";
 
 interface Props extends ComponentProps<typeof animated.div> {
   className?: string;
@@ -154,6 +155,9 @@ export const MediaView: FC<Props> = ({
             tabIndex={-1}
             disablePictureInPicture
             data-testid="video"
+            // Set the placeholder to a small transparent image. (On Android web
+            // views the default poster image is particularly ugly.)
+            poster={videoPlaceholder}
           />
         )}
       </div>