Inhibit interactions on forward dialog message previews

src/components/views/dialogs/ForwardDialog.tsx

@@ -284,7 +284,13 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
                     mx_IRCLayout: previewLayout == Layout.IRC,
                 })}
             >
-                <EventTile mxEvent={mockEvent} layout={previewLayout} permalinkCreator={permalinkCreator} as="div" />
+                <EventTile
+                    mxEvent={mockEvent}
+                    layout={previewLayout}
+                    permalinkCreator={permalinkCreator}
+                    as="div"
+                    inhibitInteraction
+                />
             </div>
             <hr />
             <div className="mx_ForwardList" id="mx_ForwardList">

src/components/views/messages/IBodyProps.ts

@@ -55,4 +55,7 @@ export interface IBodyProps {
     getRelationsForEvent?: GetRelationsForEvent;
 
     ref?: React.RefObject<any> | LegacyRef<any>;
+
+    // Used by EventTilePreview to disable interactions and tab indexes
+    inhibitInteraction?: boolean;
 }

src/components/views/messages/MVideoBody.tsx

@@ -234,7 +234,7 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
 
     public render(): React.ReactNode {
         const content = this.props.mxEvent.getContent();
-        const autoplay = SettingsStore.getValue("autoplayVideo");
+        const autoplay = !this.props.inhibitInteraction && SettingsStore.getValue("autoplayVideo");
 
         let aspectRatio;
         if (content.info?.w && content.info?.h) {
@@ -287,7 +287,7 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
                         ref={this.videoRef}
                         src={contentUrl}
                         title={content.body}
-                        controls
+                        controls={!this.props.inhibitInteraction}
                         // Disable downloading as it doesn't work with e2ee video,
                         // users should use the dedicated Download button in the Message Action Bar
                         controlsList="nodownload"

src/components/views/messages/MessageEvent.tsx

@@ -213,6 +213,7 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
                 mediaEventHelper={this.mediaHelper}
                 getRelationsForEvent={this.props.getRelationsForEvent}
                 isSeeingThroughMessageHiddenForModeration={this.props.isSeeingThroughMessageHiddenForModeration}
+                inhibitInteraction={this.props.inhibitInteraction}
             />
         ) : null;
     }

src/events/EventTileFactory.tsx

@@ -74,6 +74,7 @@ export interface EventTileTypeProps {
     maxImageHeight?: number; // pixels
     overrideBodyTypes?: Record<string, typeof React.Component>;
     overrideEventTypes?: Record<string, typeof React.Component>;
+    inhibitInteraction?: boolean;
 }
 
 type FactoryProps = Omit<EventTileTypeProps, "ref">;
@@ -322,6 +323,7 @@ export function renderTile(
         getRelationsForEvent,
         isSeeingThroughMessageHiddenForModeration,
         timestamp,
+        inhibitInteraction,
     } = props;
 
     switch (renderType) {
@@ -340,6 +342,7 @@ export function renderTile(
                 getRelationsForEvent,
                 isSeeingThroughMessageHiddenForModeration,
                 permalinkCreator,
+                inhibitInteraction,
             });
         default:
             // NEARLY ALL THE OPTIONS!
@@ -357,6 +360,7 @@ export function renderTile(
                 getRelationsForEvent,
                 isSeeingThroughMessageHiddenForModeration,
                 timestamp,
+                inhibitInteraction,
             });
     }
 }