diff --git a/src/components/views/messages/HideActionButton.tsx b/src/components/views/messages/HideActionButton.tsx index 8d2baf0220..1558031c16 100644 --- a/src/components/views/messages/HideActionButton.tsx +++ b/src/components/views/messages/HideActionButton.tsx @@ -25,7 +25,7 @@ interface IProps { * Quick action button for marking a media event as hidden. */ export const HideActionButton: React.FC = ({ mxEvent }) => { - const [mediaIsVisible, setVisible] = useMediaVisible(mxEvent.getId()!); + const [mediaIsVisible, setVisible] = useMediaVisible(mxEvent.getId()!, mxEvent.getRoomId()!); if (!mediaIsVisible) { return; diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index 15adb01dfc..3bb1475523 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -687,7 +687,7 @@ export class MImageBodyInner extends React.Component { // Wrap MImageBody component so we can use a hook here. const MImageBody: React.FC = (props) => { - const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId()!); + const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId()!, props.mxEvent.getRoomId()!); return ; }; diff --git a/src/components/views/messages/MImageReplyBody.tsx b/src/components/views/messages/MImageReplyBody.tsx index 5bbb00ef44..92a652cb4e 100644 --- a/src/components/views/messages/MImageReplyBody.tsx +++ b/src/components/views/messages/MImageReplyBody.tsx @@ -38,7 +38,7 @@ class MImageReplyBodyInner extends MImageBodyInner { } } const MImageReplyBody: React.FC = (props) => { - const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId()!); + const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId()!, props.mxEvent.getRoomId()!); return ; }; diff --git a/src/components/views/messages/MStickerBody.tsx b/src/components/views/messages/MStickerBody.tsx index 29082512d0..0c191e2d98 100644 --- a/src/components/views/messages/MStickerBody.tsx +++ b/src/components/views/messages/MStickerBody.tsx @@ -79,7 +79,7 @@ class MStickerBodyInner extends MImageBodyInner { } const MStickerBody: React.FC = (props) => { - const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId()!); + const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId()!, props.mxEvent.getRoomId()!); return ; }; diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx index be0f692fe8..3282901c12 100644 --- a/src/components/views/messages/MVideoBody.tsx +++ b/src/components/views/messages/MVideoBody.tsx @@ -344,7 +344,7 @@ class MVideoBodyInner extends React.PureComponent { // Wrap MVideoBody component so we can use a hook here. const MVideoBody: React.FC = (props) => { - const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId()!); + const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId()!, props.mxEvent.getRoomId()!); return ; }; diff --git a/src/hooks/useMediaVisible.ts b/src/hooks/useMediaVisible.ts index e244d500cf..221b1faee4 100644 --- a/src/hooks/useMediaVisible.ts +++ b/src/hooks/useMediaVisible.ts @@ -10,15 +10,21 @@ import { useCallback } from "react"; import { SettingLevel } from "../settings/SettingLevel"; import { useSettingValue } from "./useSettings"; import SettingsStore from "../settings/SettingsStore"; +import { useMatrixClientContext } from "../contexts/MatrixClientContext"; +import { JoinRule, MediaPreviewConfig } from "matrix-js-sdk/src/matrix"; + +const PRIVATE_JOIN_RULES: JoinRule[] = [JoinRule.Invite, JoinRule.Knock, JoinRule.Restricted]; /** * Should the media event be visible in the client, or hidden. * @param eventId The eventId of the media event. * @returns A boolean describing the hidden status, and a function to set the visiblity. */ -export function useMediaVisible(eventId: string): [boolean, (visible: boolean) => void] { - const defaultShowImages = useSettingValue("showImages", SettingLevel.DEVICE); - const eventVisibility = useSettingValue("showMediaEventIds", SettingLevel.DEVICE); +export function useMediaVisible(eventId: string, roomId: string): [boolean, (visible: boolean) => void] { + const mediaPreviewSetting = useSettingValue("mediaPreviewConfig", roomId); + // const defaultShowImages = useSettingValue("showImages"); + const client = useMatrixClientContext(); + const eventVisibility = useSettingValue("showMediaEventIds"); const setMediaVisible = useCallback( (visible: boolean) => { SettingsStore.setValue("showMediaEventIds", null, SettingLevel.DEVICE, { @@ -30,6 +36,20 @@ export function useMediaVisible(eventId: string): [boolean, (visible: boolean) = ); // Always prefer the explicit per-event user preference here. - const imgIsVisible = eventVisibility[eventId] ?? defaultShowImages; - return [imgIsVisible, setMediaVisible]; + if (eventVisibility[eventId]) { + return [true, setMediaVisible]; + } else if (mediaPreviewSetting === MediaPreviewConfig.Off) { + return [false, setMediaVisible]; + } else if (mediaPreviewSetting === MediaPreviewConfig.On) { + return [false, setMediaVisible]; + } + const joinRule = client.getRoom(roomId)?.getJoinRule(); + if (PRIVATE_JOIN_RULES.includes(joinRule as JoinRule)) { + console.log("Room is private"); + return [true, setMediaVisible]; + } else { // All other join rules, and unknown will default to hiding. + console.log("Room is probably public"); + return [false, setMediaVisible]; + } + }