refactor: combine MediaVideo & MediaImage components
This commit is contained in:
parent
37f08826d1
commit
ac51ce0051
@ -1,9 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<button v-if="hide" class="qjewsnkg" @click="hide = false">
|
<button v-if="hide" class="qjewsnkg" @click="hide = false">
|
||||||
<ImgWithBlurhash
|
<ImgWithBlurhash
|
||||||
:hash="image.blurhash"
|
:hash="media.blurhash"
|
||||||
:title="image.comment"
|
:title="media.comment"
|
||||||
:alt="image.comment"
|
:alt="media.comment"
|
||||||
/>
|
/>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
@ -15,20 +15,51 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
<div v-else class="gqnyydlz">
|
<div v-else class="gqnyydlz media" :class="{ mini: plyrMini }">
|
||||||
<a :href="image.url">
|
<a
|
||||||
|
v-if="media.type.startsWith('image')"
|
||||||
|
:href="media.url"
|
||||||
|
>
|
||||||
<ImgWithBlurhash
|
<ImgWithBlurhash
|
||||||
:hash="image.blurhash"
|
:hash="media.blurhash"
|
||||||
:src="url"
|
:src="url"
|
||||||
:alt="image.comment"
|
:alt="media.comment"
|
||||||
:type="image.type"
|
:type="media.type"
|
||||||
:cover="false"
|
:cover="false"
|
||||||
/>
|
/>
|
||||||
<div v-if="image.type === 'image/gif'" class="gif">GIF</div>
|
<div v-if="media.type === 'image/gif'" class="gif">GIF</div>
|
||||||
</a>
|
</a>
|
||||||
|
<VuePlyr
|
||||||
|
v-if="media.type.startsWith('video')"
|
||||||
|
ref="plyr"
|
||||||
|
:options="{
|
||||||
|
controls: [
|
||||||
|
'play-large',
|
||||||
|
'play',
|
||||||
|
'progress',
|
||||||
|
'current-time',
|
||||||
|
'mute',
|
||||||
|
'volume',
|
||||||
|
'pip',
|
||||||
|
'download',
|
||||||
|
'fullscreen',
|
||||||
|
],
|
||||||
|
disableContextMenu: false,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<video
|
||||||
|
:poster="media.thumbnailUrl"
|
||||||
|
:aria-label="media.comment"
|
||||||
|
preload="none"
|
||||||
|
controls
|
||||||
|
@contextmenu.stop
|
||||||
|
>
|
||||||
|
<source :src="media.url" :type="media.type" />
|
||||||
|
</video>
|
||||||
|
</VuePlyr>
|
||||||
<div class="buttons">
|
<div class="buttons">
|
||||||
<button
|
<button
|
||||||
v-if="image.comment"
|
v-if="media.comment"
|
||||||
v-tooltip="i18n.ts.alt"
|
v-tooltip="i18n.ts.alt"
|
||||||
class="_button"
|
class="_button"
|
||||||
@click.stop="captionPopup"
|
@click.stop="captionPopup"
|
||||||
@ -47,7 +78,9 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { watch } from "vue";
|
import { watch, ref, onMounted } from "vue";
|
||||||
|
import VuePlyr from "vue-plyr";
|
||||||
|
import "vue-plyr/dist/vue-plyr.css";
|
||||||
import type * as misskey from "calckey-js";
|
import type * as misskey from "calckey-js";
|
||||||
import { getStaticImageUrl } from "@/scripts/get-static-image-url";
|
import { getStaticImageUrl } from "@/scripts/get-static-image-url";
|
||||||
import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
|
import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
|
||||||
@ -56,34 +89,37 @@ import { i18n } from "@/i18n";
|
|||||||
import * as os from "@/os";
|
import * as os from "@/os";
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
image: misskey.entities.DriveFile;
|
media: misskey.entities.DriveFile;
|
||||||
raw?: boolean;
|
raw?: boolean;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
let hide = $ref(true);
|
let hide = $ref(true);
|
||||||
|
|
||||||
|
const plyr = ref();
|
||||||
|
const plyrMini = ref(false);
|
||||||
|
|
||||||
const url =
|
const url =
|
||||||
props.raw || defaultStore.state.loadRawImages
|
props.raw || defaultStore.state.loadRawImages
|
||||||
? props.image.url
|
? props.media.url
|
||||||
: defaultStore.state.disableShowingAnimatedImages
|
: defaultStore.state.disableShowingAnimatedImages
|
||||||
? getStaticImageUrl(props.image.thumbnailUrl)
|
? getStaticImageUrl(props.media.thumbnailUrl)
|
||||||
: props.image.thumbnailUrl;
|
: props.media.thumbnailUrl;
|
||||||
|
|
||||||
function captionPopup() {
|
function captionPopup() {
|
||||||
os.alert({
|
os.alert({
|
||||||
type: "info",
|
type: "info",
|
||||||
text: props.image.comment,
|
text: props.media.comment,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
|
// Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
|
||||||
watch(
|
watch(
|
||||||
() => props.image,
|
() => props.media,
|
||||||
() => {
|
() => {
|
||||||
hide =
|
hide =
|
||||||
defaultStore.state.nsfw === "force"
|
defaultStore.state.nsfw === "force"
|
||||||
? true
|
? true
|
||||||
: props.image.isSensitive &&
|
: props.media.isSensitive &&
|
||||||
defaultStore.state.nsfw !== "ignore";
|
defaultStore.state.nsfw !== "ignore";
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -91,6 +127,17 @@ watch(
|
|||||||
immediate: true,
|
immediate: true,
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (props.media.type.startsWith('video')) {
|
||||||
|
plyrMini.value = plyr.value.player.media.scrollWidth < 300;
|
||||||
|
if (plyrMini.value) {
|
||||||
|
plyr.value.player.on("play", () => {
|
||||||
|
plyr.value.player.fullscreen.enter();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@ -123,7 +170,7 @@ watch(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.gqnyydlz {
|
.media {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
|
|
||||||
@ -175,5 +222,16 @@ watch(
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&.mini {
|
||||||
|
:deep(.plyr:not(:fullscreen)) {
|
||||||
|
min-width: unset !important;
|
||||||
|
.plyr__control--overlaid,
|
||||||
|
.plyr__progress__container,
|
||||||
|
.plyr__volume,
|
||||||
|
[data-plyr="fullscreen"] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
@ -12,25 +12,16 @@
|
|||||||
:class="{ dmWidth: inDm }"
|
:class="{ dmWidth: inDm }"
|
||||||
>
|
>
|
||||||
<div ref="gallery" @click.stop>
|
<div ref="gallery" @click.stop>
|
||||||
<template
|
<XMedia
|
||||||
v-for="media in mediaList.filter((media) =>
|
v-for="media in mediaList.filter((media) =>
|
||||||
previewable(media)
|
previewable(media)
|
||||||
)"
|
)"
|
||||||
>
|
|
||||||
<XVideo
|
|
||||||
v-if="media.type.startsWith('video')"
|
|
||||||
:key="media.id"
|
:key="media.id"
|
||||||
:video="media"
|
:class="{ image: media.type.startsWith('image') }"
|
||||||
/>
|
|
||||||
<XImage
|
|
||||||
v-else-if="media.type.startsWith('image')"
|
|
||||||
:key="media.id"
|
|
||||||
class="image"
|
|
||||||
:data-id="media.id"
|
:data-id="media.id"
|
||||||
:image="media"
|
:media="media"
|
||||||
:raw="raw"
|
:raw="raw"
|
||||||
/>
|
/>
|
||||||
</template>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -43,8 +34,7 @@ import PhotoSwipeLightbox from "photoswipe/lightbox";
|
|||||||
import PhotoSwipe from "photoswipe";
|
import PhotoSwipe from "photoswipe";
|
||||||
import "photoswipe/style.css";
|
import "photoswipe/style.css";
|
||||||
import XBanner from "@/components/MkMediaBanner.vue";
|
import XBanner from "@/components/MkMediaBanner.vue";
|
||||||
import XImage from "@/components/MkMediaImage.vue";
|
import XMedia from "@/components/MkMedia.vue";
|
||||||
import XVideo from "@/components/MkMediaVideo.vue";
|
|
||||||
import * as os from "@/os";
|
import * as os from "@/os";
|
||||||
import { FILE_TYPE_BROWSERSAFE } from "@/const";
|
import { FILE_TYPE_BROWSERSAFE } from "@/const";
|
||||||
import { defaultStore } from "@/store";
|
import { defaultStore } from "@/store";
|
||||||
|
@ -1,169 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
v-if="hide"
|
|
||||||
class="icozogqfvdetwohsdglrbswgrejoxbdj"
|
|
||||||
@click="hide = false"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<b
|
|
||||||
><i class="ph-warning ph-bold ph-lg"></i>
|
|
||||||
{{ i18n.ts.sensitive }}</b
|
|
||||||
>
|
|
||||||
<span>{{ i18n.ts.clickToShow }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-else class="video" :class="{ mini }">
|
|
||||||
<VuePlyr
|
|
||||||
ref="plyr"
|
|
||||||
:options="{
|
|
||||||
controls: [
|
|
||||||
'play-large',
|
|
||||||
'play',
|
|
||||||
'progress',
|
|
||||||
'current-time',
|
|
||||||
'mute',
|
|
||||||
'volume',
|
|
||||||
'pip',
|
|
||||||
'download',
|
|
||||||
'fullscreen',
|
|
||||||
],
|
|
||||||
disableContextMenu: false,
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<video
|
|
||||||
:poster="video.thumbnailUrl"
|
|
||||||
:aria-label="video.comment"
|
|
||||||
preload="none"
|
|
||||||
controls
|
|
||||||
@contextmenu.stop
|
|
||||||
>
|
|
||||||
<source :src="video.url" :type="video.type" />
|
|
||||||
</video>
|
|
||||||
</VuePlyr>
|
|
||||||
<div class="buttons">
|
|
||||||
<button
|
|
||||||
v-if="video.comment"
|
|
||||||
v-tooltip="i18n.ts.alt"
|
|
||||||
class="_button"
|
|
||||||
@click.stop="captionPopup"
|
|
||||||
>
|
|
||||||
<i class="ph-subtitles ph-bold ph-lg"></i>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
v-tooltip="i18n.ts.hide"
|
|
||||||
class="_button"
|
|
||||||
@click="hide = true"
|
|
||||||
>
|
|
||||||
<i class="ph-eye-slash ph-bold ph-lg"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { onMounted, ref } from "vue";
|
|
||||||
import VuePlyr from "vue-plyr";
|
|
||||||
import type * as misskey from "calckey-js";
|
|
||||||
import { defaultStore } from "@/store";
|
|
||||||
import "vue-plyr/dist/vue-plyr.css";
|
|
||||||
import { i18n } from "@/i18n";
|
|
||||||
import * as os from "@/os";
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
video: misskey.entities.DriveFile;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const plyr = ref();
|
|
||||||
const mini = ref(false);
|
|
||||||
|
|
||||||
const hide = ref(
|
|
||||||
defaultStore.state.nsfw === "force"
|
|
||||||
? true
|
|
||||||
: props.video.isSensitive && defaultStore.state.nsfw !== "ignore"
|
|
||||||
);
|
|
||||||
|
|
||||||
function captionPopup() {
|
|
||||||
os.alert({
|
|
||||||
type: "info",
|
|
||||||
text: props.video.comment,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
mini.value = plyr.value.player.media.scrollWidth < 300;
|
|
||||||
if (mini.value) {
|
|
||||||
plyr.value.player.on("play", () => {
|
|
||||||
plyr.value.player.fullscreen.enter();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.video {
|
|
||||||
position: relative;
|
|
||||||
--plyr-color-main: var(--accent);
|
|
||||||
|
|
||||||
> .buttons {
|
|
||||||
display: flex;
|
|
||||||
gap: 4px;
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 6px;
|
|
||||||
overflow: hidden;
|
|
||||||
top: 12px;
|
|
||||||
right: 12px;
|
|
||||||
> * {
|
|
||||||
background-color: var(--accentedBg);
|
|
||||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
|
||||||
backdrop-filter: var(--blur, blur(15px));
|
|
||||||
color: var(--accent);
|
|
||||||
font-size: 0.8em;
|
|
||||||
padding: 6px 8px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> video {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
font-size: 3.5em;
|
|
||||||
overflow: hidden;
|
|
||||||
background-position: center;
|
|
||||||
background-size: cover;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.mini {
|
|
||||||
:deep(.plyr:not(:fullscreen)) {
|
|
||||||
min-width: unset !important;
|
|
||||||
.plyr__control--overlaid,
|
|
||||||
.plyr__progress__container,
|
|
||||||
.plyr__volume,
|
|
||||||
[data-plyr="fullscreen"] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icozogqfvdetwohsdglrbswgrejoxbdj {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background: #111;
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
display: table-cell;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 12px;
|
|
||||||
|
|
||||||
> b {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
Loading…
Reference in New Issue
Block a user