Hide video controls if player too small

This commit is contained in:
Freeplay 2023-05-28 13:57:25 -04:00
parent d8810600bf
commit cb164d0f0a
2 changed files with 48 additions and 17 deletions

View File

@ -6,13 +6,9 @@
:media="media"
/>
<div
v-if="mediaList.filter((media) => previewable(media)).length > 0"
v-if="previewableCount > 0"
class="grid-container"
:data-count="
mediaList.filter((media) => previewable(media)).length < 5
? mediaList.filter((media) => previewable(media)).length
: null
"
:data-count="previewableCount < 5 ? previewableCount : null"
:class="{ dmWidth: inDm }"
>
<div
@ -193,6 +189,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
FILE_TYPE_BROWSERSAFE.includes(file.type)
);
};
const previewableCount = props.mediaList.filter((media) => previewable(media)).length;
</script>
<style lang="scss" scoped>

View File

@ -12,8 +12,9 @@
<span>{{ i18n.ts.clickToShow }}</span>
</div>
</div>
<div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
<div v-else class="video" :class="{ mini }">
<VuePlyr
ref="plyr"
:options="{
controls: [
'play-large',
@ -40,12 +41,18 @@
<source :src="video.url" :type="video.type" />
</video>
</VuePlyr>
<i class="ph-eye-slash ph-bold ph-lg" @click="hide = true"></i>
<button
v-tooltip="i18n.ts.hide"
class="_button hide"
@click="hide = true"
>
<i class="ph-eye-slash ph-bold ph-lg"></i>
</button>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { onMounted, ref } from "vue";
import VuePlyr from "vue-plyr";
import type * as misskey from "calckey-js";
import { defaultStore } from "@/store";
@ -56,31 +63,47 @@ 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"
);
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>
.kkjnbbplepmiyuadieoenjgutgcmtsvu {
.video {
position: relative;
--plyr-color-main: var(--accent);
> i {
> .hide {
display: block;
position: absolute;
border-radius: 6px;
background-color: var(--fg);
color: var(--accentLighten);
font-size: 14px;
opacity: 0.5;
padding: 3px 6px;
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;
cursor: pointer;
top: 12px;
right: 12px;
> i {
display: block;
}
}
> video {
@ -95,6 +118,17 @@ const hide = ref(
width: 100%;
height: 100%;
}
&.mini {
:deep(.plyr:not(:fullscreen)) {
min-width: unset !important;
.plyr__progress__container,
.plyr__volume,
[data-plyr="fullscreen"] {
display: none;
}
}
}
}
.icozogqfvdetwohsdglrbswgrejoxbdj {