Do not hide media from your own user by default (#29797)

* Always show media from your own user

* Update usages of useMediaVisible

* lint

* Add a test for HideActionButton

* Improve docs

* Document the event

* fixup test

* Allow users to hide their own media if they wish.

* Update tests

* remove a check\

* tweak

* tweak

src/components/views/messages/EventContentBody.tsx

@@ -151,7 +151,7 @@ interface Props extends ReplacerOptions {
 const EventContentBody = memo(
     ({ as, mxEvent, stripReply, content, linkify, highlights, includeDir = true, ref, ...options }: Props) => {
         const enableBigEmoji = useSettingValue("TextualBody.enableBigEmoji");
-        const [mediaIsVisible] = useMediaVisible(mxEvent?.getId(), mxEvent?.getRoomId());
+        const [mediaIsVisible] = useMediaVisible(mxEvent);
 
         const replacer = useReplacer(content, mxEvent, options);
         const linkifyOptions = useMemo(

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

src/components/views/messages/MImageBody.tsx

@@ -686,7 +686,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(), props.mxEvent.getRoomId());
+    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent);
     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(), props.mxEvent.getRoomId());
+    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent);
     return <MImageReplyBodyInner mediaVisible={mediaVisible} setMediaVisible={setVisible} {...props} />;
 };
 

src/components/views/messages/MStickerBody.tsx

@@ -20,7 +20,7 @@ class MStickerBodyInner extends MImageBodyInner {
     protected onClick = (ev: React.MouseEvent): void => {
         ev.preventDefault();
         if (!this.props.mediaVisible) {
-            this.props.setMediaVisible?.(true);
+            this.props.setMediaVisible(true);
         }
     };
 
@@ -79,7 +79,7 @@ class MStickerBodyInner extends MImageBodyInner {
 }
 
 const MStickerBody: React.FC<IBodyProps> = (props) => {
-    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent.getId(), props.mxEvent.getRoomId());
+    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent);
     return <MStickerBodyInner mediaVisible={mediaVisible} setMediaVisible={setVisible} {...props} />;
 };
 

src/components/views/messages/MVideoBody.tsx

@@ -342,7 +342,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(), props.mxEvent.getRoomId());
+    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent);
     return <MVideoBodyInner mediaVisible={mediaVisible} setMediaVisible={setVisible} {...props} />;
 };
 

src/components/views/rooms/LinkPreviewGroup.tsx

@@ -30,7 +30,7 @@ interface IProps {
 const LinkPreviewGroup: React.FC<IProps> = ({ links, mxEvent, onCancelClick }) => {
     const cli = useContext(MatrixClientContext);
     const [expanded, toggleExpanded] = useStateToggle();
-    const [mediaVisible] = useMediaVisible(mxEvent.getId(), mxEvent.getRoomId());
+    const [mediaVisible] = useMediaVisible(mxEvent);
 
     const ts = mxEvent.getTs();
     const previews = useAsyncMemo<[string, IPreviewUrlResponse][]>(