feat(interface settings): add 'Fit expanded images to screen' setting

src/components/comment-media/comment-media.module.css

@@ -149,4 +149,15 @@
   .content {
     line-height: 0; /* Ensure no extra space due to line-height */
   }
+}
+
+.fitToScreen {
+  max-width: 100vw;
+  max-height: 100vh;
+}
+
+.fitToScreen img,
+.fitToScreen video {
+  max-width: 100%;
+  max-height: 100vh;
 }

src/components/comment-media/comment-media.tsx

@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Comment } from '@plebbit/plebbit-react-hooks';
-import styles from './comment-media.module.css';
 import { CommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail, getMediaDimensions } from '../../lib/utils/media-utils';
 import { getHostname } from '../../lib/utils/url-utils';
+import useExpandedMediaStore from '../../stores/use-expanded-media-store';
 import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
 import useIsMobile from '../../hooks/use-is-mobile';
+import styles from './comment-media.module.css';
 import Embed, { canEmbed } from '../embed';
 
 interface MediaProps {
@@ -108,7 +109,10 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
   const { t } = useTranslation();
   const { thumbnail, type, url } = commentMediaInfo || {};
   const isMobile = useIsMobile();
-  const mediaClass = isMobile ? styles.mediaMobile : isReply ? styles.mediaDesktopReply : styles.mediaDesktopOp;
+  const { fitExpandedImagesToScreen } = useExpandedMediaStore();
+  const mediaClass = `${isMobile ? styles.mediaMobile : isReply ? styles.mediaDesktopReply : styles.mediaDesktopOp} ${
+    fitExpandedImagesToScreen ? styles.fitToScreen : ''
+  }`;
   const mediaDimensions = getMediaDimensions(commentMediaInfo);
 
   return (

src/components/settings-modal/interface-settings/interface-settings.tsx

@@ -7,6 +7,7 @@ import styles from './interface-settings.module.css';
 import _ from 'lodash';
 import useInterfaceSettingsStore from '../../../stores/use-interface-settings-store';
 import useCatalogFiltersStore from '../../../stores/use-catalog-filters-store';
+import useExpandedMediaStore from '../../../stores/use-expanded-media-store';
 
 const commitRef = process.env.REACT_APP_COMMIT_REF;
 const isElectron = window.isElectron === true;
@@ -114,6 +115,7 @@ const InterfaceSettings = () => {
   const { hideAvatars, setHideAvatars } = useAvatarVisibilityStore();
   const { hideGoreBoards, setHideGoreBoards, hideAdultBoards, setHideAdultBoards, hideThreadsWithoutImages, setHideThreadsWithoutImages } = useInterfaceSettingsStore();
   const { setShowTextOnlyThreads } = useCatalogFiltersStore();
+  const { fitExpandedImagesToScreen, setFitExpandedImagesToScreen } = useExpandedMediaStore();
 
   const handleHideAvatarsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setHideAvatars(e.target.checked);
@@ -169,10 +171,7 @@ const InterfaceSettings = () => {
       </div>
       <div className={styles.setting}>
         <label>
-          <input
-            type='checkbox'
-            // checked={fitExpandedImagesToScreen} onChange={(e) => setFitExpandedImagesToScreen(e.target.checked)}
-          />
+          <input type='checkbox' checked={fitExpandedImagesToScreen} onChange={(e) => setFitExpandedImagesToScreen(e.target.checked)} />
           {_.capitalize(t('fit_expanded_images_to_screen'))}
         </label>
         <div className={styles.settingTip}>{_.capitalize(t('fit_expanded_images_to_screen_tip'))}</div>

src/stores/use-expanded-media-store.ts

@@ -0,0 +1,21 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+interface ExpandedMediaState {
+  fitExpandedImagesToScreen: boolean;
+  setFitExpandedImagesToScreen: (fit: boolean) => void;
+}
+
+const useExpandedMediaStore = create<ExpandedMediaState>()(
+  persist(
+    (set) => ({
+      fitExpandedImagesToScreen: false,
+      setFitExpandedImagesToScreen: (fit) => set({ fitExpandedImagesToScreen: fit }),
+    }),
+    {
+      name: 'expanded-media-store',
+    },
+  ),
+);
+
+export default useExpandedMediaStore;