Merge branch 'main' of github.com:cheeaun/phanpy
This commit is contained in:
commit
e21cf30f39
|
@ -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();
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|
|
@ -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' : ''}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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}
|
||||||
|
|
Loading…
Reference in a new issue