ansxor.ca
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Constraint video max height to 14/9 (#8611)
* constraint video max height to 14/9
* Apply new default to web video embed too
* Retain web handling
* Rename prop for clarity
* Align no-crop handling on native/web
* make it always constrained
---------
Co-authored-by: Eric Bailey <git@esb.lol>
authored by
Eric Bailey
and committed by
GitHub
6d85fe05
be324432
+4
-1
src/components/Post/Embed/VideoEmbed/index.tsx
+4
-1
src/components/Post/Embed/VideoEmbed/index.tsx
···
71
71
) : (
72
72
<ConstrainedImage
73
73
fullBleed={crop === 'square'}
74
-
aspectRatio={constrained || 1}>
74
+
aspectRatio={constrained || 1}
75
+
// slightly smaller max height than images
76
+
// images use 16 / 9, for reference
77
+
minMobileAspectRatio={14 / 9}>
75
78
{contents}
76
79
</ConstrainedImage>
77
80
)}
+15
-3
src/components/Post/Embed/VideoEmbed/index.web.tsx
+15
-3
src/components/Post/Embed/VideoEmbed/index.web.tsx
···
14
14
import {isFirefox} from '#/lib/browser'
15
15
import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
16
16
import {ConstrainedImage} from '#/view/com/util/images/AutoSizedImage'
17
-
import {atoms as a} from '#/alf'
17
+
import {atoms as a, useTheme} from '#/alf'
18
18
import {useIsWithinMessage} from '#/components/dms/MessageContext'
19
19
import {useFullscreen} from '#/components/hooks/useFullscreen'
20
20
import {
···
32
32
embed: AppBskyEmbedVideo.View
33
33
crop?: 'none' | 'square' | 'constrained'
34
34
}) {
35
+
const t = useTheme()
35
36
const ref = useRef<HTMLDivElement>(null)
36
37
const {active, setActive, sendPosition, currentActiveView} =
37
38
useActiveVideoWeb()
···
114
115
sendPosition={sendPosition}
115
116
isAnyViewActive={currentActiveView !== null}>
116
117
{cropDisabled ? (
117
-
<View style={[a.w_full, a.overflow_hidden, {aspectRatio: max ?? 1}]}>
118
+
<View
119
+
style={[
120
+
a.w_full,
121
+
a.overflow_hidden,
122
+
{aspectRatio: max ?? 1},
123
+
a.rounded_md,
124
+
a.overflow_hidden,
125
+
t.atoms.bg_contrast_25,
126
+
]}>
118
127
{contents}
119
128
</View>
120
129
) : (
121
130
<ConstrainedImage
122
131
fullBleed={crop === 'square'}
123
-
aspectRatio={constrained || 1}>
132
+
aspectRatio={constrained || 1}
133
+
// slightly smaller max height than images
134
+
// images use 16 / 9, for reference
135
+
minMobileAspectRatio={14 / 9}>
124
136
{contents}
125
137
</ConstrainedImage>
126
138
)}
+1
-1
src/components/Post/Embed/index.tsx
+1
-1
src/components/Post/Embed/index.tsx
+4
-2
src/view/com/util/images/AutoSizedImage.tsx
+4
-2
src/view/com/util/images/AutoSizedImage.tsx
···
21
21
aspectRatio,
22
22
fullBleed,
23
23
children,
24
+
minMobileAspectRatio,
24
25
}: {
25
26
aspectRatio: number
26
27
fullBleed?: boolean
28
+
minMobileAspectRatio?: number
27
29
children: React.ReactNode
28
30
}) {
29
31
const t = useTheme()
···
35
37
const outerAspectRatio = React.useMemo<DimensionValue>(() => {
36
38
const ratio =
37
39
isNative || !gtMobile
38
-
? Math.min(1 / aspectRatio, 16 / 9) // 9:16 bounding box
40
+
? Math.min(1 / aspectRatio, minMobileAspectRatio ?? 16 / 9) // 9:16 bounding box
39
41
: Math.min(1 / aspectRatio, 1) // 1:1 bounding box
40
42
return `${ratio * 100}%`
41
-
}, [aspectRatio, gtMobile])
43
+
}, [aspectRatio, gtMobile, minMobileAspectRatio])
42
44
43
45
return (
44
46
<View style={[a.w_full]}>