From ec6aacbec4ec39984cd88d17946f8d7dccc2f98d Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 1 Jun 2023 13:57:17 +0100 Subject: [PATCH 1/4] Inhibit interactions on forward dialog message previews and improve inhibiting of video message body --- src/components/views/dialogs/ForwardDialog.tsx | 8 +++++++- src/components/views/messages/IBodyProps.ts | 3 +++ src/components/views/messages/MVideoBody.tsx | 4 ++-- src/components/views/messages/MessageEvent.tsx | 1 + src/events/EventTileFactory.tsx | 4 ++++ 5 files changed, 17 insertions(+), 3 deletions(-) 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..f5d0b7714c6 100644 --- a/src/components/views/messages/IBodyProps.ts +++ b/src/components/views/messages/IBodyProps.ts @@ -55,4 +55,7 @@ export interface IBodyProps { getRelationsForEvent?: GetRelationsForEvent; ref?: React.RefObject | LegacyRef; + + // Used by EventTilePreview to disable interactions and tab indexes + 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..685124679c3 100644 --- a/src/events/EventTileFactory.tsx +++ b/src/events/EventTileFactory.tsx @@ -74,6 +74,7 @@ export interface EventTileTypeProps { maxImageHeight?: number; // pixels overrideBodyTypes?: Record; overrideEventTypes?: Record; + inhibitInteraction?: boolean; } type FactoryProps = Omit; @@ -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, }); } } From 88cf6e1d4310a71f9d16b09cee07d9cea08ff9c3 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 5 Jun 2023 15:31:57 +0100 Subject: [PATCH 2/4] Consolidate prop types --- src/events/EventTileFactory.tsx | 35 +++++++++++++++++---------------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/src/events/EventTileFactory.tsx b/src/events/EventTileFactory.tsx index 685124679c3..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,25 +54,28 @@ 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; overrideEventTypes?: Record; - inhibitInteraction?: boolean; } type FactoryProps = Omit; From 4293e4049eb9f6219f11da9ed89f5e22ee90b19f Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 5 Jun 2023 15:32:47 +0100 Subject: [PATCH 3/4] Iterate --- src/components/views/messages/IBodyProps.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/views/messages/IBodyProps.ts b/src/components/views/messages/IBodyProps.ts index f5d0b7714c6..bfdb4bc4202 100644 --- a/src/components/views/messages/IBodyProps.ts +++ b/src/components/views/messages/IBodyProps.ts @@ -56,6 +56,7 @@ export interface IBodyProps { ref?: React.RefObject | LegacyRef; - // Used by EventTilePreview to disable interactions and tab indexes + // Set to `true` to disable interactions (e.g. video controls) and tab indexes. + // This may be useful when displaying a preview of the event. inhibitInteraction?: boolean; } From a6c1008391ae847230421c2d7a21f646032bb294 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 6 Jun 2023 08:54:59 +0100 Subject: [PATCH 4/4] Update src/components/views/messages/IBodyProps.ts Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> --- src/components/views/messages/IBodyProps.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/messages/IBodyProps.ts b/src/components/views/messages/IBodyProps.ts index bfdb4bc4202..17981be54c6 100644 --- a/src/components/views/messages/IBodyProps.ts +++ b/src/components/views/messages/IBodyProps.ts @@ -56,7 +56,7 @@ export interface IBodyProps { ref?: React.RefObject | LegacyRef; - // Set to `true` to disable interactions (e.g. video controls) and tab indexes. + // 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; }