External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-10-31 12:55:38 +01:00
parent c6e301af0f
commit ba54d70421
4 changed files with 41 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/comment-media/comment-media.module.css
+11
View File
@@ -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
+6 -2
View File
@@ -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 (