Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-09 01:26:24 +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 { .media-post-link .button-label {
display: none; display: none;
} }
body:has(.status-deck) .media-post-link {
display: none;
}
@media (min-width: calc(40em + 350px)) { @media (min-width: calc(40em + 350px)) {
.media-post-link .button-label { .media-post-link .button-label {

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

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