Refactor letterboxing code

media-gallery
Alex Gleason 2023-01-31 16:25:38 -06:00
rodzic 4e74ca3c55
commit 07323c19b0
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
3 zmienionych plików z 9 dodań i 14 usunięć

Wyświetl plik

@ -1,4 +1,4 @@
import { isNonConformingRatio, isPanoramic, isPortrait, maximumAspectRatio, minimumAspectRatio } from 'soapbox/utils/media-aspect-ratio';
import { containAspectRatio, isNonConformingRatio, isPanoramic, isPortrait, maximumAspectRatio, minimumAspectRatio } from 'soapbox/utils/media-aspect-ratio';
import type { Dimensions, SizeData } from './types';
import type { List as ImmutableList } from 'immutable';
@ -18,9 +18,7 @@ const useMediaSizeData = ({ width, height, defaultWidth, media }: UseMediaSizeDa
const getHeight = () => {
if (!aspectRatio) return w * 9 / 16;
if (isPanoramic(aspectRatio)) return Math.floor(w / maximumAspectRatio);
if (isPortrait(aspectRatio)) return Math.floor(w / minimumAspectRatio);
return Math.floor(w / aspectRatio);
return Math.floor(w / containAspectRatio(aspectRatio));
};
return {

Wyświetl plik

@ -6,7 +6,7 @@ import { defineMessages, useIntl } from 'react-intl';
import Blurhash from 'soapbox/components/blurhash';
import Icon from 'soapbox/components/icon';
import { isPanoramic, isPortrait, letterboxMaxRatio, letterboxMinRatio } from 'soapbox/utils/media-aspect-ratio';
import { containAspectRatio } from 'soapbox/utils/media-aspect-ratio';
import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
@ -424,15 +424,7 @@ const Video: React.FC<IVideo> = ({
if (inline && containerWidth) {
width = containerWidth;
const minSize = containerWidth / (16 / 9);
if (isPanoramic(aspectRatio)) {
height = Math.max(Math.floor(containerWidth / letterboxMaxRatio), minSize);
} else if (isPortrait(aspectRatio)) {
height = Math.max(Math.floor(containerWidth / letterboxMinRatio), minSize);
} else {
height = Math.floor(containerWidth / aspectRatio);
}
height = Math.floor(containerWidth / containAspectRatio(aspectRatio));
playerStyle.height = height || DEFAULT_HEIGHT;
}

Wyświetl plik

@ -30,4 +30,9 @@ export const shouldLetterbox = (aspectRatio?: number): boolean => {
if (!aspectRatio) return true;
const withinLimits = aspectRatio >= letterboxMinRatio && aspectRatio <= letterboxMaxRatio;
return !withinLimits;
};
/** Force aspect ratio into letterbox limits. */
export const containAspectRatio = (aspectRatio: number): number => {
return Math.max(Math.min(aspectRatio, letterboxMaxRatio), letterboxMinRatio);
};