refactor: combine MediaVideo & MediaImage components
This commit is contained in:
freeplay
parent
37f08826d1
commit
ac51ce0051
3 changed files with 85 additions and 206 deletions
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<button v-if="hide" class="qjewsnkg" @click="hide = false">
|
||||
<ImgWithBlurhash
|
||||
:hash="image.blurhash"
|
||||
:title="image.comment"
|
||||
:alt="image.comment"
|
||||
:hash="media.blurhash"
|
||||
:title="media.comment"
|
||||
:alt="media.comment"
|
||||
/>
|
||||
<div class="text">
|
||||
<div class="wrapper">
|
||||
|
|
@ -15,20 +15,51 @@
|
|||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<div v-else class="gqnyydlz">
|
||||
<a :href="image.url">
|
||||
<div v-else class="gqnyydlz media" :class="{ mini: plyrMini }">
|
||||
<a
|
||||
v-if="media.type.startsWith('image')"
|
||||
:href="media.url"
|
||||
>
|
||||
<ImgWithBlurhash
|
||||
:hash="image.blurhash"
|
||||
:hash="media.blurhash"
|
||||
:src="url"
|
||||
:alt="image.comment"
|
||||
:type="image.type"
|
||||
:alt="media.comment"
|
||||
:type="media.type"
|
||||
: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>
|
||||
<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">
|
||||
<button
|
||||
v-if="image.comment"
|
||||
v-if="media.comment"
|
||||
v-tooltip="i18n.ts.alt"
|
||||
class="_button"
|
||||
@click.stop="captionPopup"
|
||||
|
|
@ -47,7 +78,9 @@
|
|||
</template>
|
||||
|
||||
<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 { getStaticImageUrl } from "@/scripts/get-static-image-url";
|
||||
import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
|
||||
|
|
@ -56,34 +89,37 @@ import { i18n } from "@/i18n";
|
|||
import * as os from "@/os";
|
||||
|
||||
const props = defineProps<{
|
||||
image: misskey.entities.DriveFile;
|
||||
media: misskey.entities.DriveFile;
|
||||
raw?: boolean;
|
||||
}>();
|
||||
|
||||
let hide = $ref(true);
|
||||
|
||||
const plyr = ref();
|
||||
const plyrMini = ref(false);
|
||||
|
||||
const url =
|
||||
props.raw || defaultStore.state.loadRawImages
|
||||
? props.image.url
|
||||
? props.media.url
|
||||
: defaultStore.state.disableShowingAnimatedImages
|
||||
? getStaticImageUrl(props.image.thumbnailUrl)
|
||||
: props.image.thumbnailUrl;
|
||||
? getStaticImageUrl(props.media.thumbnailUrl)
|
||||
: props.media.thumbnailUrl;
|
||||
|
||||
function captionPopup() {
|
||||
os.alert({
|
||||
type: "info",
|
||||
text: props.image.comment,
|
||||
text: props.media.comment,
|
||||
});
|
||||
}
|
||||
|
||||
// Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
|
||||
watch(
|
||||
() => props.image,
|
||||
() => props.media,
|
||||
() => {
|
||||
hide =
|
||||
defaultStore.state.nsfw === "force"
|
||||
? true
|
||||
: props.image.isSensitive &&
|
||||
: props.media.isSensitive &&
|
||||
defaultStore.state.nsfw !== "ignore";
|
||||
},
|
||||
{
|
||||
|
|
@ -91,6 +127,17 @@ watch(
|
|||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -123,7 +170,7 @@ watch(
|
|||
}
|
||||
}
|
||||
|
||||
.gqnyydlz {
|
||||
.media {
|
||||
position: relative;
|
||||
background: var(--bg);
|
||||
|
||||
|
|
@ -175,5 +222,16 @@ watch(
|
|||
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>
|
||||
|
|
@ -12,25 +12,16 @@
|
|||
:class="{ dmWidth: inDm }"
|
||||
>
|
||||
<div ref="gallery" @click.stop>
|
||||
<template
|
||||
<XMedia
|
||||
v-for="media in mediaList.filter((media) =>
|
||||
previewable(media)
|
||||
)"
|
||||
>
|
||||
<XVideo
|
||||
v-if="media.type.startsWith('video')"
|
||||
:key="media.id"
|
||||
:video="media"
|
||||
/>
|
||||
<XImage
|
||||
v-else-if="media.type.startsWith('image')"
|
||||
:key="media.id"
|
||||
class="image"
|
||||
:class="{ image: media.type.startsWith('image') }"
|
||||
:data-id="media.id"
|
||||
:image="media"
|
||||
:media="media"
|
||||
:raw="raw"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -43,8 +34,7 @@ import PhotoSwipeLightbox from "photoswipe/lightbox";
|
|||
import PhotoSwipe from "photoswipe";
|
||||
import "photoswipe/style.css";
|
||||
import XBanner from "@/components/MkMediaBanner.vue";
|
||||
import XImage from "@/components/MkMediaImage.vue";
|
||||
import XVideo from "@/components/MkMediaVideo.vue";
|
||||
import XMedia from "@/components/MkMedia.vue";
|
||||
import * as os from "@/os";
|
||||
import { FILE_TYPE_BROWSERSAFE } from "@/const";
|
||||
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 a new issue