Inhibit interactions on forward dialog message previews (#11025)

* Inhibit interactions on forward dialog message previews

and improve inhibiting of video message body

* Consolidate prop types

* Iterate

* Update src/components/views/messages/IBodyProps.ts

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

---------

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

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,8 @@ export interface IBodyProps {
     getRelationsForEvent?: GetRelationsForEvent;
 
     ref?: React.RefObject<any> | LegacyRef<any>;
+
+    // Set to `true` to disable interactions (e.g. video controls) and to remove controls from the tab order.
+    // This may be useful when displaying a preview of the event.
+    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

@@ -23,10 +23,8 @@ import { MatrixClient } from "matrix-js-sdk/src/client";
 import { GroupCallIntent } from "matrix-js-sdk/src/webrtc/groupCall";
 
 import SettingsStore from "../settings/SettingsStore";
-import EditorStateTransfer from "../utils/EditorStateTransfer";
-import { RoomPermalinkCreator } from "../utils/permalinks/Permalinks";
 import LegacyCallEventGrouper from "../components/structures/LegacyCallEventGrouper";
-import { GetRelationsForEvent } from "../components/views/rooms/EventTile";
+import { EventTileProps } from "../components/views/rooms/EventTile";
 import { TimelineRenderingType } from "../contexts/RoomContext";
 import MessageEvent from "../components/views/messages/MessageEvent";
 import MKeyVerificationConclusion from "../components/views/messages/MKeyVerificationConclusion";
@@ -56,20 +54,24 @@ import {
 } from "../voice-broadcast";
 
 // Subset of EventTile's IProps plus some mixins
-export interface EventTileTypeProps {
+export interface EventTileTypeProps
+    extends Pick<
+        EventTileProps,
+        | "mxEvent"
+        | "highlights"
+        | "highlightLink"
+        | "showUrlPreview"
+        | "onHeightChanged"
+        | "forExport"
+        | "getRelationsForEvent"
+        | "editState"
+        | "replacingEventId"
+        | "permalinkCreator"
+        | "callEventGrouper"
+        | "isSeeingThroughMessageHiddenForModeration"
+        | "inhibitInteraction"
+    > {
     ref?: React.RefObject<any>; // `any` because it's effectively impossible to convince TS of a reasonable type
-    mxEvent: MatrixEvent;
-    highlights?: string[];
-    highlightLink?: string;
-    showUrlPreview?: boolean;
-    onHeightChanged?: () => void;
-    forExport?: boolean;
-    getRelationsForEvent?: GetRelationsForEvent;
-    editState?: EditorStateTransfer;
-    replacingEventId?: string;
-    permalinkCreator?: RoomPermalinkCreator;
-    callEventGrouper?: LegacyCallEventGrouper;
-    isSeeingThroughMessageHiddenForModeration?: boolean;
     timestamp?: JSX.Element;
     maxImageHeight?: number; // pixels
     overrideBodyTypes?: Record<string, typeof React.Component>;
@@ -322,6 +324,7 @@ export function renderTile(
         getRelationsForEvent,
         isSeeingThroughMessageHiddenForModeration,
         timestamp,
+        inhibitInteraction,
     } = props;
 
     switch (renderType) {
@@ -340,6 +343,7 @@ export function renderTile(
                 getRelationsForEvent,
                 isSeeingThroughMessageHiddenForModeration,
                 permalinkCreator,
+                inhibitInteraction,
             });
         default:
             // NEARLY ALL THE OPTIONS!
@@ -357,6 +361,7 @@ export function renderTile(
                 getRelationsForEvent,
                 isSeeingThroughMessageHiddenForModeration,
                 timestamp,
+                inhibitInteraction,
             });
     }
 }