diff --git a/CHANGELOG.md b/CHANGELOG.md index a509f43987d0dcbd8a7412b97599b2f84b7b2832..780d867bd7549b0d9bc5866d19a6786bed2ba90d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ - Fix: モãƒã‚¤ãƒ«è¡¨ç¤ºã®ã¨ãページ下部ãŒãƒŠãƒ“ゲーションãƒãƒ¼ã«éš れるå•é¡Œã‚’ä¿®æ£ - Fix: 一部モーダルダイアãƒã‚°ã§ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã§ããªã„å•é¡Œã‚’ä¿®æ£ - Fix: Selecting all emojis in Custom emoji is impossible +- Fix: PhotoSwipeã«ã‚ˆã‚‹ãƒ¡ãƒ¢ãƒªãƒªãƒ¼ã‚¯ã®ä¿®æ£ ### Server - Fix: APIã®ã‚ªãƒ•ã‚»ãƒƒãƒˆãŒå£Šã‚Œã¦ã„ãŸã›ã„ã§ã€Œã‚‚ã£ã¨è¦‹ã‚‹ã€ã§ã‚‚ã£ã¨è¦‹ã‚Œãªã„å•é¡Œã‚’ä¿®æ£ diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue index 661c0a98776f71f0db20e5c7e4e848bb8a65b185..0cdccfb1697fd6b4382a8dd34721fe8ff531374b 100644 --- a/packages/frontend/src/components/MkMediaList.vue +++ b/packages/frontend/src/components/MkMediaList.vue @@ -58,7 +58,7 @@ async function getClientWidthWithCache(targetEl: HTMLElement, containerEl: HTMLE </script> <script lang="ts" setup> -import { onMounted, shallowRef } from 'vue'; +import { onMounted, onUnmounted, shallowRef } from 'vue'; import * as misskey from 'misskey-js'; import PhotoSwipeLightbox from 'photoswipe/lightbox'; import PhotoSwipe from 'photoswipe'; @@ -82,12 +82,19 @@ const gallery = shallowRef<HTMLDivElement>(); const pswpZIndex = os.claimZIndex('middle'); document.documentElement.style.setProperty('--mk-pswp-root-z-index', pswpZIndex.toString()); const count = $computed(() => props.mediaList.filter(media => previewable(media)).length); +let lightbox: PhotoSwipeLightbox | null; + +const popstateHandler = (): void => { + if (lightbox.pswp && lightbox.pswp.isOpen === true) { + lightbox.pswp.close(); + } +}; /** * アスペクト比をmediaListWithOneImageAppearanceã«åŸºã¥ã„ã¦ã„ã„æ„Ÿã˜ã«èª¿æ•´ã™ã‚‹ * aspect-ratioã§ã¯ãªãheightを使ㆠ*/ - async function calcAspectRatio() { +async function calcAspectRatio() { if (!gallery.value || !root.value) return; let img = props.mediaList[0]; @@ -137,7 +144,7 @@ const count = $computed(() => props.mediaList.filter(media => previewable(media) onMounted(() => { calcAspectRatio(); - const lightbox = new PhotoSwipeLightbox({ + lightbox = new PhotoSwipeLightbox({ dataSource: props.mediaList .filter(media => { if (media.type === 'image/svg+xml') return true; // svgã®webpublicã¯pngãªã®ã§true @@ -221,12 +228,7 @@ onMounted(() => { lightbox.init(); - window.addEventListener('popstate', () => { - if (lightbox.pswp && lightbox.pswp.isOpen === true) { - lightbox.pswp.close(); - return; - } - }); + window.addEventListener('popstate', popstateHandler); lightbox.on('beforeOpen', () => { history.pushState(null, '', '#pswp'); @@ -239,6 +241,12 @@ onMounted(() => { }); }); +onUnmounted(() => { + window.removeEventListener('popstate', popstateHandler); + lightbox?.destroy(); + lightbox = null; +}); + const previewable = (file: misskey.entities.DriveFile): boolean => { if (file.type === 'image/svg+xml') return true; // svgã®webpublic/thumbnailã¯pngãªã®ã§true // FILE_TYPE_BROWSERSAFEã«é©åˆã—ãªã„ã‚‚ã®ã¯ãƒ–ラウザã§è¡¨ç¤ºã™ã‚‹ã®ã«ä¸é©åˆ‡