mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-26 11:15:43 +03:00
Code Issues Projects Releases Packages Wiki Activity

Special fallback handling when media object doesn't have enough info

Browse source
This commit is contained in:
Lim Chee Aun 2024-04-11 17:15:16 +08:00
parent 5083463942
commit 60920966d6
1 changed files with 32 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/components/media.jsx
View file

@ -99,7 +99,12 @@ function Media({
const remoteMediaURL = showOriginal
? remoteUrl
: previewRemoteUrl || remoteUrl;
const orientation = width >= height ? 'landscape' : 'portrait';
const hasDimensions = width && height;
const orientation = hasDimensions
? width > height
? 'landscape'
: 'portrait'
: null;
const rgbAverageColor = blurhash ? getBlurHashAverageColor(blurhash) : null;
@ -333,6 +338,18 @@ function Media({
onLoad={(e) => {
// e.target.closest('.media-image').style.backgroundImage = '';
e.target.dataset.loaded = true;
if (!hasDimensions) {
const $media = e.target.closest('.media');
if ($media) {
$media.dataset.orientation =
e.target.naturalWidth > e.target.naturalHeight
? 'landscape'
: 'portrait';
$media.style['--width'] = `${e.target.naturalWidth}px`;
$media.style['--height'] = `${e.target.naturalHeight}px`;
$media.style.aspectRatio = `${e.target.naturalWidth}/${e.target.naturalHeight}`;
}
}
}}
onError={(e) => {
const { src } = e.target;
@ -350,6 +367,7 @@ function Media({
</Figure>
);
} else if (type === 'gifv' || type === 'video' || isVideoMaybe) {
const hasDuration = original.duration > 0;
const shortDuration = original.duration < 31;
const isGIF = type === 'gifv' && shortDuration;
// If GIF is too long, treat it as a video
@ -503,6 +521,19 @@ function Media({
preload="metadata"
muted
disablePictureInPicture
onLoadedMetadata={(e) => {
if (!hasDuration) {
const { duration } = e.target;
if (duration) {
const formattedDuration = formatDuration(duration);
const container = e.target.closest('.media-video');
if (container) {
container.dataset.formattedDuration =
formattedDuration;
}
}
}
}}
/>
)}
<div class="media-play">