Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-02 14:16:39 +01:00
Code Issues Projects Releases Packages Wiki Activity

Fix weird bug when closing media modal + status page

Browse source 
Somehow useMatch re-renders the media modal and mess up some event handlers on it
Possibly due to react-router-match vs preact issues.

So, remove it totally, replace with CSS :has() solution
This commit is contained in:
Lim Chee Aun 2023-02-18 17:38:42 +08:00
parent 161aff64ac
commit 3f73f7d174
2 changed files with 17 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/app.css
View file

@ -881,6 +881,9 @@ button.carousel-dot:is(.active, [disabled].active) {
.media-post-link .button-label {
display: none;
}
body:has(.status-deck) .media-post-link {
display: none;
}
@media (min-width: calc(40em + 350px)) {
.media-post-link .button-label {

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

@ -1,7 +1,6 @@
import { getBlurHashAverageColor } from 'fast-blurhash';
import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
import { useHotkeys } from 'react-hotkeys-hook';
import { useMatch } from 'react-router-dom';
import Icon from './icon';
import Link from './link';
@ -16,10 +15,6 @@ function MediaModal({
onClose = () => {},
}) {
const carouselRef = useRef(null);
// NOTE: Optional path segment doesn't work yet
// https://github.com/remix-run/react-router/issues/10039
// const isStatusLocation = useMatch('/:instance?/s/:id');
const isStatusLocation = useMatch('/:instance/s/:id') || useMatch('/s/:id');
const [currentIndex, setCurrentIndex] = useState(index);
const carouselFocusItem = useRef(null);
@ -169,22 +164,20 @@ function MediaModal({
<span />
)}
<span>
{!isStatusLocation && (
<Link
to={instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`}
class="button carousel-button media-post-link plain3"
onClick={() => {
// if small screen (not media query min-width 40em + 350px), run onClose
if (
!window.matchMedia('(min-width: calc(40em + 350px))').matches
) {
onClose();
}
}}
>
<span class="button-label">See post </span>&raquo;
</Link>
)}{' '}
<Link
to={instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`}
class="button carousel-button media-post-link plain3"
onClick={() => {
// if small screen (not media query min-width 40em + 350px), run onClose
if (
!window.matchMedia('(min-width: calc(40em + 350px))').matches
) {
onClose();
}
}}
>
<span class="button-label">See post </span>&raquo;
</Link>{' '}
<a
href={
mediaAttachments[currentIndex]?.remoteUrl ||