refactor: combine MediaVideo & MediaImage components

This commit is contained in:
freeplay 2023-07-02 23:41:38 -04:00
parent 6783b19f50
commit 27625b67da
3 changed files with 85 additions and 206 deletions

View File

@ -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>

View File

@ -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";

View File

@ -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>