mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-03-14 12:18:30 +03:00
Code Issues Projects Releases Packages Wiki Activity

Special styling for portrait media

Browse source
This commit is contained in:
Lim Chee Aun 2023-04-14 21:14:08 +08:00
parent 5598059715
commit adfe660cc8
2 changed files with 12 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/media.jsx
View file

@ -24,6 +24,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
const width = showOriginal ? original?.width : small?.width;
const height = showOriginal ? original?.height : small?.height;
const mediaURL = showOriginal ? url : previewUrl;
const orientation = width >= height ? 'landscape' : 'portrait';
const rgbAverageColor = blurhash ? getBlurHashAverageColor(blurhash) : null;
@ -97,6 +98,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
alt={description}
width={width}
height={height}
data-orientation={orientation}
loading="eager"
decoding="async"
onLoad={(e) => {
@ -112,6 +114,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
alt={description}
width={width}
height={height}
data-orientation={orientation}
loading="lazy"
style={{
backgroundColor:
@ -140,6 +143,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
poster="${previewUrl}"
width="${width}"
height="${height}"
data-orientation="${orientation}"
preload="auto"
autoplay
muted="${isGIF}"
@ -209,6 +213,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
poster={previewUrl}
width={width}
height={height}
data-orientation={orientation}
preload="auto"
// controls
playsinline
@ -222,6 +227,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
alt={description}
width={width}
height={height}
data-orientation={orientation}
loading="lazy"
/>
<div class="media-play">
@ -247,6 +253,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
alt={description}
width={width}
height={height}
data-orientation={orientation}
loading="lazy"
/>
) : null}

5
src/components/status.css
View file

@ -477,6 +477,11 @@
height: auto;
max-height: 160px;
}
.status .media-container.media-eq1:has([data-orientation='portrait']) {
width: 85%;
min-width: 160px;
max-height: 200px;
}
.status .media-container.media-gt2 {
height: 200px;
}