diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx index 75af82d86a0..d1be0219883 100644 --- a/src/components/views/dialogs/ForwardDialog.tsx +++ b/src/components/views/dialogs/ForwardDialog.tsx @@ -284,7 +284,13 @@ const ForwardDialog: React.FC = ({ matrixClient: cli, event, permalinkCr mx_IRCLayout: previewLayout == Layout.IRC, })} > - +
diff --git a/src/components/views/messages/IBodyProps.ts b/src/components/views/messages/IBodyProps.ts index e9b853621a8..17981be54c6 100644 --- a/src/components/views/messages/IBodyProps.ts +++ b/src/components/views/messages/IBodyProps.ts @@ -55,4 +55,8 @@ export interface IBodyProps { getRelationsForEvent?: GetRelationsForEvent; ref?: React.RefObject | LegacyRef; + + // 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; } diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx index 5ecf74a8b64..5fdbc42d36a 100644 --- a/src/components/views/messages/MVideoBody.tsx +++ b/src/components/views/messages/MVideoBody.tsx @@ -234,7 +234,7 @@ export default class MVideoBody extends React.PureComponent 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 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" diff --git a/src/components/views/messages/MessageEvent.tsx b/src/components/views/messages/MessageEvent.tsx index 4fd84e31f1d..3eb1cfbb602 100644 --- a/src/components/views/messages/MessageEvent.tsx +++ b/src/components/views/messages/MessageEvent.tsx @@ -213,6 +213,7 @@ export default class MessageEvent extends React.Component implements IMe mediaEventHelper={this.mediaHelper} getRelationsForEvent={this.props.getRelationsForEvent} isSeeingThroughMessageHiddenForModeration={this.props.isSeeingThroughMessageHiddenForModeration} + inhibitInteraction={this.props.inhibitInteraction} /> ) : null; } diff --git a/src/events/EventTileFactory.tsx b/src/events/EventTileFactory.tsx index 1e87810d448..ce4993a7fc4 100644 --- a/src/events/EventTileFactory.tsx +++ b/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` 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; @@ -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, }); } }