Modify useMediaVisible to take a room.

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<IProps> = ({ mxEvent }) => {
-    const [mediaIsVisible, setVisible] = useMediaVisible(mxEvent.getId()!);
+    const [mediaIsVisible, setVisible] = useMediaVisible(mxEvent.getId()!, mxEvent.getRoomId()!);
 
     if (!mediaIsVisible) {
         return;

src/components/views/messages/MImageBody.tsx

@@ -687,7 +687,7 @@ export class MImageBodyInner extends React.Component<IProps, IState> {
 
 // Wrap MImageBody component so we can use a hook here.
 const MImageBody: React.FC<IBodyProps> = (props) => {
-    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId()!);
+    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId()!, props.mxEvent.getRoomId()!);
     return <MImageBodyInner mediaVisible={mediaVisible} setMediaVisible={setVisible} {...props} />;
 };
 

src/components/views/messages/MImageReplyBody.tsx

@@ -38,7 +38,7 @@ class MImageReplyBodyInner extends MImageBodyInner {
     }
 }
 const MImageReplyBody: React.FC<IBodyProps> = (props) => {
-    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId()!);
+    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId()!, props.mxEvent.getRoomId()!);
     return <MImageReplyBodyInner mediaVisible={mediaVisible} setMediaVisible={setVisible} {...props} />;
 };
 

src/components/views/messages/MStickerBody.tsx

@@ -79,7 +79,7 @@ class MStickerBodyInner extends MImageBodyInner {
 }
 
 const MStickerBody: React.FC<IBodyProps> = (props) => {
-    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId()!);
+    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId()!, props.mxEvent.getRoomId()!);
     return <MStickerBodyInner mediaVisible={mediaVisible} setMediaVisible={setVisible} {...props} />;
 };
 

src/components/views/messages/MVideoBody.tsx

@@ -344,7 +344,7 @@ class MVideoBodyInner extends React.PureComponent<IProps, IState> {
 
 // Wrap MVideoBody component so we can use a hook here.
 const MVideoBody: React.FC<IBodyProps> = (props) => {
-    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId()!);
+    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId()!, props.mxEvent.getRoomId()!);
     return <MVideoBodyInner mediaVisible={mediaVisible} setMediaVisible={setVisible} {...props} />;
 };
 

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];
+    }
+
 }