nki/phanpy
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge branch 'main' of github.com:cheeaun/phanpy

Browse source
This commit is contained in:
Natsu Kagami 2023-08-06 13:33:40 +07:00
parent 9cef29012e c13e148b36
commit e21cf30f39
Signed by: nki
GPG key ID: 55A032EB38B49ADB
5 changed files with 89 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/media-modal.jsx
View file

@ -176,6 +176,7 @@ function MediaModal({
left: carouselRef.current.clientWidth * i, left: carouselRef.current.clientWidth * i,
behavior: 'smooth', behavior: 'smooth',
}); });
carouselRef.current.focus();
}} }}
> >
• •
@ -245,6 +246,7 @@ function MediaModal({
left: carouselRef.current.clientWidth * (currentIndex - 1), left: carouselRef.current.clientWidth * (currentIndex - 1),
behavior: 'smooth', behavior: 'smooth',
}); });
carouselRef.current.focus();
}} }}
> >
<Icon icon="arrow-left" /> <Icon icon="arrow-left" />
@ -260,6 +262,7 @@ function MediaModal({
left: carouselRef.current.clientWidth * (currentIndex + 1), left: carouselRef.current.clientWidth * (currentIndex + 1),
behavior: 'smooth', behavior: 'smooth',
}); });
carouselRef.current.focus();
}} }}
> >
<Icon icon="arrow-right" /> <Icon icon="arrow-right" />
@ -272,6 +275,7 @@ function MediaModal({
onClick={(e) => { onClick={(e) => {
if (e.target === e.currentTarget) { if (e.target === e.currentTarget) {
setShowMediaAlt(false); setShowMediaAlt(false);
carouselRef.current.focus();
} }
}} }}
> >

12
src/components/media.jsx
View file

@ -116,12 +116,18 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
if (smaller) setImageSmallerThanParent(smaller); if (smaller) setImageSmallerThanParent(smaller);
}, [width, height]); }, [width, height]);
const maxAspectHeight =
window.innerHeight * (orientation === 'portrait' ? 0.45 : 0.33);
const maxHeight = orientation === 'portrait' ? 0 : 160;
const mediaStyles = { const mediaStyles = {
'--width': `${width}px`, '--width': `${width}px`,
'--height': `${height}px`, '--height': `${height}px`,
// Calculate '--aspectWidth' based on aspect ratio calculated from '--width' and '--height', max height has to be 160px
'--aspectWidth': `${
(width / height) * Math.max(maxHeight, maxAspectHeight)
}px`,
aspectRatio: `${width} / ${height}`, aspectRatio: `${width} / ${height}`,
}; };
const fixedWidth = width > height * 2;
if (isImage) { if (isImage) {
// Note: type: unknown might not have width/height // Note: type: unknown might not have width/height
@ -143,7 +149,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
return ( return (
<Parent <Parent
ref={parentRef} ref={parentRef}
class={`media media-image ${fixedWidth ? 'media-fixed-width' : ''}`} class={`media media-image`}
onClick={onClick} onClick={onClick}
data-orientation={orientation} data-orientation={orientation}
style={ style={
@ -245,7 +251,7 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
<Parent <Parent
class={`media media-${isGIF ? 'gif' : 'video'} ${ class={`media media-${isGIF ? 'gif' : 'video'} ${
autoGIFAnimate ? 'media-contain' : '' autoGIFAnimate ? 'media-contain' : ''
} ${fixedWidth ? 'media-fixed-width' : ''}`} }`}
data-orientation={orientation} data-orientation={orientation}
data-formatted-duration={formattedDuration} data-formatted-duration={formattedDuration}
data-label={isGIF && !showOriginal && !autoGIFAnimate ? 'GIF' : ''} data-label={isGIF && !showOriginal && !autoGIFAnimate ? 'GIF' : ''}

55
src/components/status.css
View file

@ -395,10 +395,14 @@
align-items: center; align-items: center;
} }
.status .status
.content-container.has-spoiler .content-container.has-spoiler:not(.show-spoiler)
.spoiler .spoiler
~ *:not(.media-container, .card), ~ *:not(.media-container, .card),
.status .content-container.has-spoiler .spoiler ~ .card .meta-container { .status
.content-container.has-spoiler:not(.show-spoiler)
.spoiler
~ .card
.meta-container {
filter: blur(5px) invert(0.5); filter: blur(5px) invert(0.5);
image-rendering: crisp-edges; image-rendering: crisp-edges;
image-rendering: pixelated; image-rendering: pixelated;
@ -408,8 +412,17 @@
transform: scale(0.97); transform: scale(0.97);
transition: transform 0.1s ease-in-out; transition: transform 0.1s ease-in-out;
} }
.status .content-container.has-spoiler .spoiler ~ .media-container .media > *, .status
.status .content-container.has-spoiler .spoiler ~ .card > img { .content-container.has-spoiler:not(.show-spoiler)
.spoiler
~ .media-container
.media
> *,
.status
.content-container.has-spoiler:not(.show-spoiler)
.spoiler
~ .card
> img {
filter: blur(32px); filter: blur(32px);
image-rendering: crisp-edges; image-rendering: crisp-edges;
image-rendering: pixelated; image-rendering: pixelated;
@ -418,7 +431,7 @@
.status .content-container.show-spoiler .spoiler { .status .content-container.show-spoiler .spoiler {
border-style: dotted; border-style: dotted;
} }
.status /* .status
.content-container.show-spoiler .content-container.show-spoiler
.spoiler .spoiler
~ *:not(.media-container, .card), ~ *:not(.media-container, .card),
@ -434,7 +447,7 @@
.status .content-container.show-spoiler .spoiler ~ .card > img { .status .content-container.show-spoiler .spoiler ~ .card > img {
filter: none; filter: none;
image-rendering: auto; image-rendering: auto;
} } */
/* .status .content a:not(.mention):not(:has(span)) { /* .status .content a:not(.mention):not(:has(span)) {
color: inherit; color: inherit;
} */ } */
@ -597,28 +610,31 @@
display: inline-block; display: inline-block;
max-width: 100% !important; max-width: 100% !important;
min-width: 44px; min-width: 44px;
width: auto; /* width: auto; */
min-height: 44px; min-height: 44px;
/* width: min(var(--width), 100%); */ /* --maxAspectHeight: max(160px, 33vh);
/* max-height: min(var(--height), 33vh); */ --aspectWidth: calc(--width / --height * var(--maxAspectHeight)); */
height: min(160px, var(--height), 33vh); width: min(var(--aspectWidth), var(--width), 100%);
}
.status .media-container.media-eq1 .media.media-fixed-width {
width: min(var(--width), 100%);
height: auto;
max-height: min(var(--height), 33vh); max-height: min(var(--height), 33vh);
} }
.status .media-container.media-eq1 .media[data-orientation='portrait'] { .status .media-container.media-eq1 .media[data-orientation='portrait'] {
width: auto; /* width: auto;
height: min(var(--height), 45vh); height: min(var(--height), 45vh);
max-height: none; max-height: none; */
max-height: min(var(--height), 45vh);
} }
.status.large .media-container.media-eq1 { .status.large .media-container.media-eq1 {
max-height: min(var(--height), 60vh); max-height: min(var(--height), 60vh);
} }
.status.large .media-container.media-eq1 .media[data-orientation='portrait'] { .status.large
height: min(var(--height), 60vh); .media-container:not(.status-card .media-container).media-eq1
.media {
width: min(var(--width), 100%);
max-height: min(var(--height), 80vh);
} }
/* .status.large .media-container.media-eq1 .media[data-orientation='portrait'] {
height: min(var(--height), 60vh);
} */
.status-carousel .status .media-container.media-eq1 .media { .status-carousel .status .media-container.media-eq1 .media {
width: min(var(--width), 100%); width: min(var(--width), 100%);
height: auto; height: auto;
@ -999,6 +1015,9 @@ a:focus-visible .card img {
overflow: hidden; overflow: hidden;
display: block; display: block;
} }
.card .meta.domain * {
vertical-align: middle;
}
a.card { a.card {
text-decoration: none; text-decoration: none;
transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;

6
src/components/status.jsx
View file

@ -1449,7 +1449,7 @@ function Card({ card, instance }) {
if (snapStates.unfurledLinks[url]) return null; if (snapStates.unfurledLinks[url]) return null;
if (hasText && (image || (!type !== 'photo' && blurhash))) { if (hasText && (image || (type === 'photo' && blurhash))) {
const domain = new URL(url).hostname.replace(/^www\./, ''); const domain = new URL(url).hostname.replace(/^www\./, '');
let blurhashImage; let blurhashImage;
if (!image) { if (!image) {
@ -1541,7 +1541,9 @@ function Card({ card, instance }) {
class={`card link no-image`} class={`card link no-image`}
> >
<div class="meta-container"> <div class="meta-container">
<p class="meta domain">{domain}</p> <p class="meta domain">
<Icon icon="link" size="s" /> <span>{domain}</span>
</p>
<p class="title">{title}</p> <p class="title">{title}</p>
<p class="meta">{description || providerName || authorName}</p> <p class="meta">{description || providerName || authorName}</p>
</div> </div>

60
src/pages/status.jsx
View file

@ -843,24 +843,24 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
weight, weight,
} = status; } = status;
const isHero = statusID === id; const isHero = statusID === id;
const StatusParent = useCallback( // const StatusParent = useCallback(
(props) => // (props) =>
isThread || thread ? ( // isThread || thread || ancestor ? (
<Link // <Link
class="status-link" // class="status-link"
to={ // to={
instance ? `/${instance}/s/${statusID}` : `/s/${statusID}` // instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`
} // }
onClick={() => { // onClick={() => {
resetScrollPosition(statusID); // resetScrollPosition(statusID);
}} // }}
{...props} // {...props}
/> // />
) : ( // ) : (
<div class="status-focus" tabIndex={0} {...props} /> // <div class="status-focus" tabIndex={0} {...props} />
), // ),
[isThread, thread], // [isThread, thread],
); // );
return ( return (
<li <li
key={statusID} key={statusID}
@ -941,7 +941,16 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
)} )}
</> </>
) : ( ) : (
<StatusParent> // <StatusParent>
<Link
class="status-link"
to={
instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`
}
onClick={() => {
resetScrollPosition(statusID);
}}
>
<Status <Status
statusID={statusID} statusID={statusID}
instance={instance} instance={instance}
@ -969,7 +978,8 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
</span> </span>
</div> </div>
)} */} )} */}
</StatusParent> {/* </StatusParent> */}
</Link>
)} )}
{descendant && replies?.length > 0 && ( {descendant && replies?.length > 0 && (
<SubComments <SubComments
@ -1184,14 +1194,14 @@ function SubComments({
<ul> <ul>
{replies.map((r) => ( {replies.map((r) => (
<li key={r.id}> <li key={r.id}>
{/* <Link <Link
class="status-link" class="status-link"
to={instance ? `/${instance}/s/${r.id}` : `/s/${r.id}`} to={instance ? `/${instance}/s/${r.id}` : `/s/${r.id}`}
onClick={() => { onClick={() => {
resetScrollPosition(r.id); resetScrollPosition(r.id);
}} }}
> */} >
<div class="status-focus" tabIndex={0}> {/* <div class="status-focus" tabIndex={0}> */}
<Status <Status
statusID={r.id} statusID={r.id}
instance={instance} instance={instance}
@ -1208,8 +1218,8 @@ function SubComments({
</span> </span>
</div> </div>
)} )}
</div> {/* </div> */}
{/* </Link> */} </Link>
{r.replies?.length && ( {r.replies?.length && (
<SubComments <SubComments
instance={instance} instance={instance}