diff --git a/packages/frontend/src/embed/components/EmMediaImage.vue b/packages/frontend/src/embed/components/EmMediaImage.vue
index a990207d2c..9e88513998 100644
--- a/packages/frontend/src/embed/components/EmMediaImage.vue
+++ b/packages/frontend/src/embed/components/EmMediaImage.vue
@@ -4,20 +4,14 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
-<div :class="[hide ? $style.hidden : $style.visible, (image.isSensitive && defaultStore.state.highlightSensitiveMedia) && $style.sensitive]" :style="darkMode ? '--c: rgb(255 255 255 / 2%);' : '--c: rgb(0 0 0 / 2%);'" @click="onclick">
- <component
- :is="disableImageLink ? 'div' : 'a'"
- v-bind="disableImageLink ? {
- title: image.name,
- class: $style.imageContainer,
- } : {
- title: image.name,
- class: $style.imageContainer,
- href: image.url,
- target: '_blank',
- rel: 'noopener',
- style: 'cursor: zoom-in;'
- }"
+<div :class="[hide ? $style.hidden : $style.visible]" :style="darkMode ? '--c: rgb(255 255 255 / 2%);' : '--c: rgb(0 0 0 / 2%);'" @click="onclick">
+ <a
+ :title="image.name"
+ :class="$style.imageContainer"
+ :href="image.url"
+ target="_blank"
+ rel="noopener"
+ style="cursor: zoom-in;"
>
<ImgWithBlurhash
:hash="image.blurhash"
@@ -30,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:height="image.properties.height"
:style="hide ? 'filter: brightness(0.7);' : null"
/>
- </component>
+ </a>
<template v-if="hide">
<div :class="$style.hiddenText">
<div :class="$style.hiddenTextWrapper">
@@ -40,49 +34,36 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
</template>
- <template v-else-if="controls">
- <div :class="$style.indicators">
- <div v-if="['image/gif', 'image/apng'].includes(image.type)" :class="$style.indicator">GIF</div>
- <div v-if="image.comment" :class="$style.indicator">ALT</div>
- <div v-if="image.isSensitive" :class="$style.indicator" style="color: var(--warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
- </div>
- <button :class="$style.menu" class="_button" @click.stop="showMenu"><i class="ti ti-dots" style="vertical-align: middle;"></i></button>
- <i class="ti ti-eye-off" :class="$style.hide" @click.stop="hide = true"></i>
- </template>
+ <div :class="$style.indicators">
+ <div v-if="['image/gif', 'image/apng'].includes(image.type)" :class="$style.indicator">GIF</div>
+ <div v-if="image.comment" :class="$style.indicator">ALT</div>
+ <div v-if="image.isSensitive" :class="$style.indicator" style="color: var(--warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
+ </div>
+ <i class="ti ti-eye-off" :class="$style.hide" @click.stop="hide = true"></i>
</div>
</template>
<script lang="ts" setup>
import { watch, ref, computed } from 'vue';
import * as Misskey from 'misskey-js';
-import { getStaticImageUrl } from '@/scripts/media-proxy.js';
import bytes from '@/filters/bytes.js';
import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
-import { defaultStore } from '@/store.js';
import { i18n } from '@/i18n.js';
-import * as os from '@/os.js';
-import { $i, iAmModerator } from '@/account.js';
const props = withDefaults(defineProps<{
image: Misskey.entities.DriveFile;
raw?: boolean;
cover?: boolean;
- disableImageLink?: boolean;
- controls?: boolean;
}>(), {
cover: false,
- disableImageLink: false,
- controls: true,
});
-const hide = ref(true);
-const darkMode = ref<boolean>(defaultStore.state.darkMode);
+const hide = ref(props.image.isSensitive);
+const darkMode = ref<boolean>(false); // TODO
-const url = computed(() => (props.raw || defaultStore.state.loadRawImages)
+const url = computed(() => (props.raw)
? props.image.url
- : defaultStore.state.disableShowingAnimatedImages
- ? getStaticImageUrl(props.image.url)
- : props.image.thumbnailUrl,
+ : props.image.thumbnailUrl,
);
async function onclick(ev: MouseEvent) {
@@ -92,50 +73,9 @@ async function onclick(ev: MouseEvent) {
if (hide.value) {
ev.stopPropagation();
- if (props.image.isSensitive && defaultStore.state.confirmWhenRevealingSensitiveMedia) {
- const { canceled } = await os.confirm({
- type: 'question',
- text: i18n.ts.sensitiveMediaRevealConfirm,
- });
- if (canceled) return;
- }
-
hide.value = false;
}
}
-
-// Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
-watch(() => props.image, () => {
- hide.value = (defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.image.isSensitive && defaultStore.state.nsfw !== 'ignore');
-}, {
- deep: true,
- immediate: true,
-});
-
-function showMenu(ev: MouseEvent) {
- os.popupMenu([{
- text: i18n.ts.hide,
- icon: 'ti ti-eye-off',
- action: () => {
- hide.value = true;
- },
- }, ...(iAmModerator ? [{
- text: i18n.ts.markAsSensitive,
- icon: 'ti ti-eye-exclamation',
- danger: true,
- action: () => {
- os.apiWithDialog('drive/files/update', { fileId: props.image.id, isSensitive: true });
- },
- }] : []), ...($i?.id === props.image.userId ? [{
- type: 'divider' as const,
- }, {
- type: 'link' as const,
- text: i18n.ts._fileViewer.title,
- icon: 'ti ti-info-circle',
- to: `/my/drive/file/${props.image.id}`,
- }] : [])], ev.currentTarget ?? ev.target);
-}
-
</script>
<style lang="scss" module>
@@ -143,22 +83,6 @@ function showMenu(ev: MouseEvent) {
position: relative;
}
-.sensitive {
- position: relative;
-
- &::after {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- pointer-events: none;
- border-radius: inherit;
- box-shadow: inset 0 0 0 4px var(--warn);
- }
-}
-
.hiddenText {
position: absolute;
left: 0;
@@ -202,22 +126,6 @@ function showMenu(ev: MouseEvent) {
background-size: 16px 16px;
}
-.menu {
- display: block;
- position: absolute;
- border-radius: 999px;
- background-color: rgba(0, 0, 0, 0.3);
- -webkit-backdrop-filter: var(--blur, blur(15px));
- backdrop-filter: var(--blur, blur(15px));
- color: #fff;
- font-size: 0.8em;
- width: 28px;
- height: 28px;
- text-align: center;
- bottom: 10px;
- right: 10px;
-}
-
.imageContainer {
display: block;
overflow: hidden;
diff --git a/packages/frontend/src/embed/components/EmMediaList.vue b/packages/frontend/src/embed/components/EmMediaList.vue
index 087171855e..27ed3ca089 100644
--- a/packages/frontend/src/embed/components/EmMediaList.vue
+++ b/packages/frontend/src/embed/components/EmMediaList.vue
@@ -11,14 +11,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<div v-if="mediaList.filter(media => previewable(media)).length > 0" :class="$style.container">
<div
- ref="gallery"
:class="[
$style.medias,
- count === 1 ? [$style.n1, {
- [$style.n116_9]: defaultStore.reactiveState.mediaListWithOneImageAppearance.value === '16_9',
- [$style.n11_1]: defaultStore.reactiveState.mediaListWithOneImageAppearance.value === '1_1',
- [$style.n12_3]: defaultStore.reactiveState.mediaListWithOneImageAppearance.value === '2_3',
- }] : count === 2 ? $style.n2 : count === 3 ? $style.n3 : count === 4 ? $style.n4 : $style.nMany,
+ count === 1 ? [$style.n1] : count === 2 ? $style.n2 : count === 3 ? $style.n3 : count === 4 ? $style.n4 : $style.nMany,
]"
>
<div v-for="media in mediaList.filter(media => previewable(media))" :class="$style.media">
@@ -32,16 +27,13 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
-import { computed, onMounted, onUnmounted, shallowRef, inject } from 'vue';
+import { computed, inject } from 'vue';
import * as Misskey from 'misskey-js';
-import 'photoswipe/style.css';
import XBanner from './EmMediaBanner.vue';
import XImage from './EmMediaImage.vue';
import XVideo from './EmMediaVideo.vue';
import * as os from '@/os.js';
import { FILE_TYPE_BROWSERSAFE } from '@/const.js';
-import { defaultStore } from '@/store.js';
-import { focusParent } from '@/scripts/focus.js';
const props = defineProps<{
mediaList: Misskey.entities.DriveFile[];
@@ -53,182 +45,17 @@ const props = defineProps<{
const inEmbedPage = inject<boolean>('EMBED_PAGE', false);
-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 = null;
let activeEl: HTMLElement | null = null;
-const popstateHandler = (): void => {
- if (lightbox?.pswp && lightbox.pswp.isOpen === true) {
- lightbox.pswp.close();
- }
-};
-
-async function calcAspectRatio() {
- if (!gallery.value) return;
-
- const img = props.mediaList[0];
-
- if (props.mediaList.length !== 1 || !(img.properties.width && img.properties.height)) {
- gallery.value.style.aspectRatio = '';
- return;
- }
-
- const ratioMax = (ratio: number) => {
- if (img.properties.width == null || img.properties.height == null) return '';
- return `${Math.max(ratio, img.properties.width / img.properties.height).toString()} / 1`;
- };
-
- switch (defaultStore.state.mediaListWithOneImageAppearance) {
- case '16_9':
- gallery.value.style.aspectRatio = ratioMax(16 / 9);
- break;
- case '1_1':
- gallery.value.style.aspectRatio = ratioMax(1 / 1);
- break;
- case '2_3':
- gallery.value.style.aspectRatio = ratioMax(2 / 3);
- break;
- default:
- gallery.value.style.aspectRatio = '';
- break;
- }
-}
-
-onMounted(() => {
- calcAspectRatio();
- if (defaultStore.state.imageNewTab || inEmbedPage) return;
-
- lightbox = new PhotoSwipeLightbox({
- dataSource: props.mediaList
- .filter(media => {
- if (media.type === 'image/svg+xml') return true; // svgのwebpublicはpngなのでtrue
- return media.type.startsWith('image') && FILE_TYPE_BROWSERSAFE.includes(media.type);
- })
- .map(media => {
- const item = {
- src: media.url,
- w: media.properties.width,
- h: media.properties.height,
- alt: media.comment ?? media.name,
- comment: media.comment ?? media.name,
- };
- if (media.properties.orientation != null && media.properties.orientation >= 5) {
- [item.w, item.h] = [item.h, item.w];
- }
- return item;
- }),
- gallery: gallery.value,
- mainClass: 'pswp',
- children: '.image',
- thumbSelector: '.image',
- loop: false,
- padding: window.innerWidth > 500 ? {
- top: 32,
- bottom: 90,
- left: 32,
- right: 32,
- } : {
- top: 0,
- bottom: 78,
- left: 0,
- right: 0,
- },
- imageClickAction: 'close',
- tapAction: 'close',
- bgOpacity: 1,
- showAnimationDuration: 100,
- hideAnimationDuration: 100,
- returnFocus: false,
- pswpModule: PhotoSwipe,
- });
-
- lightbox.addFilter('itemData', (itemData) => {
- // element is children
- const { element } = itemData;
-
- const id = element?.dataset.id;
- const file = props.mediaList.find(media => media.id === id);
- if (!file) return itemData;
-
- itemData.src = file.url;
- itemData.w = Number(file.properties.width);
- itemData.h = Number(file.properties.height);
- if (file.properties.orientation != null && file.properties.orientation >= 5) {
- [itemData.w, itemData.h] = [itemData.h, itemData.w];
- }
- itemData.msrc = file.thumbnailUrl ?? undefined;
- itemData.alt = file.comment ?? file.name;
- itemData.comment = file.comment ?? file.name;
- itemData.thumbCropped = true;
-
- return itemData;
- });
-
- lightbox.on('uiRegister', () => {
- lightbox?.pswp?.ui?.registerElement({
- name: 'altText',
- className: 'pswp__alt-text-container',
- appendTo: 'wrapper',
- onInit: (el, pswp) => {
- const textBox = document.createElement('p');
- textBox.className = 'pswp__alt-text _acrylic';
- el.appendChild(textBox);
-
- pswp.on('change', () => {
- textBox.textContent = pswp.currSlide?.data.comment;
- });
- },
- });
- });
-
- lightbox.on('afterInit', () => {
- activeEl = document.activeElement instanceof HTMLElement ? document.activeElement : null;
- focusParent(activeEl, true, true);
- lightbox?.pswp?.element?.focus({
- preventScroll: true,
- });
- history.pushState(null, '', '#pswp');
- });
-
- lightbox.on('destroy', () => {
- focusParent(activeEl, true, false);
- activeEl = null;
- if (window.location.hash === '#pswp') {
- history.back();
- }
- });
-
- window.addEventListener('popstate', popstateHandler);
-
- lightbox.init();
-});
-
-onUnmounted(() => {
- window.removeEventListener('popstate', popstateHandler);
- lightbox?.destroy();
- lightbox = null;
- activeEl = null;
-});
-
const previewable = (file: Misskey.entities.DriveFile): boolean => {
if (file.type === 'image/svg+xml') return true; // svgのwebpublic/thumbnailはpngなのでtrue
// FILE_TYPE_BROWSERSAFEに適合しないものはブラウザで表示するのに不適切
return (file.type.startsWith('video') || file.type.startsWith('image')) && FILE_TYPE_BROWSERSAFE.includes(file.type);
};
-
-const openGallery = () => {
- if (props.mediaList.filter(media => previewable(media)).length > 0) {
- lightbox?.loadAndOpen(0);
- }
-};
-
-defineExpose({
- openGallery,
-});
</script>
<style lang="scss" module>
@@ -335,42 +162,4 @@ defineExpose({
z-index: 1;
content: '';
}
-
-:global(.pswp) {
- --pswp-root-z-index: var(--mk-pswp-root-z-index, 2000700) !important;
- --pswp-bg: var(--modalBg) !important;
-}
-</style>
-
-<style lang="scss">
-.pswp__bg {
- background: var(--modalBg);
- backdrop-filter: var(--modalBgFilter);
-}
-
-.pswp__alt-text-container {
- display: flex;
- flex-direction: row;
- align-items: center;
-
- position: absolute;
- bottom: 20px;
- left: 50%;
- transform: translateX(-50%);
-
- width: 75%;
- max-width: 800px;
-}
-
-.pswp__alt-text {
- color: var(--fg);
- margin: 0 auto;
- text-align: center;
- padding: var(--margin);
- border-radius: var(--radius);
- max-height: 8em;
- overflow-y: auto;
- text-shadow: var(--bg) 0 0 10px, var(--bg) 0 0 3px, var(--bg) 0 0 3px;
- white-space: pre-line;
-}
</style>
diff --git a/packages/frontend/src/embed/components/EmNote.vue b/packages/frontend/src/embed/components/EmNote.vue
index 78d6be6f61..9f431fa0de 100644
--- a/packages/frontend/src/embed/components/EmNote.vue
+++ b/packages/frontend/src/embed/components/EmNote.vue
@@ -75,7 +75,7 @@ SPDX-License-Identifier: AGPL-3.0-only
/>
<a v-if="appearNote.renote != null" :class="$style.rn">RN:</a>
<div v-if="appearNote.files && appearNote.files.length > 0">
- <MkMediaList :mediaList="appearNote.files" :originalEntityUrl="`${url}/notes/${appearNote.id}`"/>
+ <EmMediaList :mediaList="appearNote.files" :originalEntityUrl="`${url}/notes/${appearNote.id}`"/>
</div>
<MkPoll v-if="appearNote.poll" ref="pollViewer" :noteId="appearNote.id" :poll="appearNote.poll" :readOnly="true" :class="$style.poll"/>
<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div>