Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

video

Browse source
This commit is contained in:
kakkokari-gtyih 2024-01-06 17:32:45 +09:00
parent f159fc80c6
commit fa9353350e
2 changed files with 400 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

142
packages/frontend/src/components/MkMediaRange.vue Normal file
View file

@ -0,0 +1,142 @@
<!--
SPDX-FileCopyrightText: syuilo and other misskey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
<!-- Media系専用のinput range -->
<template>
<div :class="$style.controlsSeekbar">
<progress v-if="buffer !== undefined" :class="$style.buffer" :value="isNaN(buffer) ? 0 : buffer" min="0" max="1">% buffered</progress>
<input v-model="model" :class="$style.seek" :style="`--value: ${modelValue * 100}%;`" type="range" min="0" max="1" step="any"/>
</div>
</template>
<script setup lang="ts">
import { computed, ModelRef } from 'vue';
defineProps<{
buffer?: number;
}>();
// eslint-disable-next-line no-undef
const model = defineModel({ required: true }) as ModelRef<string | number>;
const modelValue = computed({
get: () => typeof model.value === 'number' ? model.value : parseFloat(model.value),
set: v => { model.value = v; },
});
</script>
<style lang="scss" module>
.controlsSeekbar {
position: relative;
> .seek {
position: relative;
-webkit-appearance: none;
appearance: none;
background: transparent;
border: 0;
border-radius: 26px;
color: var(--accent);
display: block;
height: 19px;
margin: 0;
min-width: 0;
padding: 0;
transition: box-shadow .3s ease;
width: 100%;
&::-webkit-slider-runnable-track {
background-color: rgba(255, 255, 255, .25);
background-image: linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0));
border: 0;
border-radius: 99rem;
height: 5px;
transition: box-shadow .3s ease;
user-select: none;
}
&::-moz-range-track {
background: transparent;
border: 0;
border-radius: 99rem;
height: 5px;
transition: box-shadow .3s ease;
user-select: none;
background-color: rgba(255, 255, 255, .25);
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
background: #fff;
border: 0;
border-radius: 100%;
box-shadow: 0 1px 1px rgba(35, 40, 47, .15),0 0 0 1px rgba(35, 40, 47, .2);
height: 13px;
margin-top: -4px;
position: relative;
transition: all .2s ease;
width: 13px;
&:active {
box-shadow: 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .15), 0 0 0 3px rgba(255, 255, 255, .5);
}
}
&::-moz-range-thumb {
background: #fff;
border: 0;
border-radius: 100%;
box-shadow: 0 1px 1px rgba(35, 40, 47, .15),0 0 0 1px rgba(35, 40, 47, .2);
height: 13px;
position: relative;
transition: all .2s ease;
width: 13px;
&:active {
box-shadow: 0 1px 1px rgba(35, 40, 47, .15), 0 0 0 1px rgba(35, 40, 47, .15), 0 0 0 3px rgba(255, 255, 255, .5);
}
}
&::-moz-range-progress {
background: currentColor;
border-radius: 99rem;
height: 5px;
}
}
> .buffer {
appearance: none;
background: transparent;
color: rgba(255, 255, 255, .25);
border: 0;
border-radius: 99rem;
height: 5px;
left: 0;
margin-top: -2.5px;
padding: 0;
position: absolute;
top: 50%;
width: 100%;
&::-webkit-progress-bar {
background: transparent;
}
&::-webkit-progress-value {
background: currentColor;
border-radius: 100px;
min-width: 5px;
transition: width .2s ease;
}
&::-moz-progress-bar {
background: currentColor;
border-radius: 100px;
min-width: 5px;
transition: width .2s ease;
}
}
}
</style>

267
packages/frontend/src/components/MkMediaVideo.vue
View file

@ -4,15 +4,25 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div :class="[$style.videoContainer, controlsShowing && $style.active]" @mouseover="onMouseOver" @mouseleave="onMouseLeave" @contextmenu.stop ref="playerEl"> <div
<button v-if="hide" :class="$style.hide" @click="hide = false"> ref="playerEl"
<div :class="$style.hideContent"> :class="[
$style.videoContainer,
controlsShowing && $style.active,
(video.isSensitive && defaultStore.state.highlightSensitiveMedia) && $style.sensitive,
]"
@mouseover="onMouseOver"
@mouseleave="onMouseLeave"
@contextmenu.stop
>
<button v-if="hide" :class="$style.hidden" @click="hide = false">
<div :class="$style.hiddenTextWrapper">
<b v-if="video.isSensitive" style="display: block;"><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}{{ defaultStore.state.dataSaver.media ? ` (${i18n.ts.video}${video.size ? ' ' + bytes(video.size) : ''})` : '' }}</b> <b v-if="video.isSensitive" style="display: block;"><i class="ti ti-eye-exclamation"></i> {{ i18n.ts.sensitive }}{{ defaultStore.state.dataSaver.media ? ` (${i18n.ts.video}${video.size ? ' ' + bytes(video.size) : ''})` : '' }}</b>
<b v-else style="display: block;"><i class="ti ti-photo"></i> {{ defaultStore.state.dataSaver.media && video.size ? bytes(video.size) : i18n.ts.video }}</b> <b v-else style="display: block;"><i class="ti ti-photo"></i> {{ defaultStore.state.dataSaver.media && video.size ? bytes(video.size) : i18n.ts.video }}</b>
<span style="display: block;">{{ i18n.ts.clickToShow }}</span> <span style="display: block;">{{ i18n.ts.clickToShow }}</span>
</div> </div>
</button> </button>
<div v-else :class="$style.videoRoot" @click.self="onClick"> <div v-else :class="$style.videoRoot" @click.self="togglePlayPause">
<video <video
ref="videoEl" ref="videoEl"
:class="$style.video" :class="$style.video"
@ -26,19 +36,24 @@ SPDX-License-Identifier: AGPL-3.0-only
:src="video.url" :src="video.url"
> >
</video> </video>
<button v-if="isReady && !isPlaying" class="_button" :class="$style.videoOverlayPlayButton" @click="onClick"><i class="ti ti-player-play-filled"></i></button> <button v-if="isReady && !isPlaying" class="_button" :class="$style.videoOverlayPlayButton" @click="togglePlayPause"><i class="ti ti-player-play-filled"></i></button>
<div v-else-if="!isActuallyPlaying" :class="$style.videoLoading"> <div v-else-if="!isActuallyPlaying" :class="$style.videoLoading">
<MkLoading/> <MkLoading/>
</div> </div>
<div :class="$style.videoControls"> <i class="ti ti-eye-off" :class="$style.hide" @click="hide = true"></i>
<div :class="$style.indicators">
<div v-if="video.comment" :class="$style.indicator">ALT</div>
<div v-if="video.isSensitive" :class="$style.indicator" style="color: var(--warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
</div>
<div :class="$style.videoControls" @click.self="togglePlayPause">
<div :class="[$style.controlsChild, $style.controlsLeft]"> <div :class="[$style.controlsChild, $style.controlsLeft]">
<button class="_button" :class="$style.controlButton" @click="onClick"> <button class="_button" :class="$style.controlButton" @click="togglePlayPause">
<i v-if="isPlaying" class="ti ti-player-pause-filled"></i> <i v-if="isPlaying" class="ti ti-player-pause-filled"></i>
<i v-else class="ti ti-player-play-filled"></i> <i v-else class="ti ti-player-play-filled"></i>
</button> </button>
</div> </div>
<div :class="[$style.controlsChild, $style.controlsRight]"> <div :class="[$style.controlsChild, $style.controlsRight]">
<button class="_button" :class="$style.controlButton"> <button class="_button" :class="$style.controlButton" @click="showMenu">
<i class="ti ti-settings"></i> <i class="ti ti-settings"></i>
</button> </button>
<button class="_button" :class="$style.controlButton" @click="toggleFullscreen"> <button class="_button" :class="$style.controlButton" @click="toggleFullscreen">
@ -52,31 +67,87 @@ SPDX-License-Identifier: AGPL-3.0-only
<i v-if="volume === 0" class="ti ti-volume-3"></i> <i v-if="volume === 0" class="ti ti-volume-3"></i>
<i v-else class="ti ti-volume"></i> <i v-else class="ti ti-volume"></i>
</button> </button>
<MkMediaRange
v-model="volume"
:class="$style.volumeSeekbar"
/>
</div> </div>
<div :class="[$style.controlsChild, $style.controlsSeekbar]"></div> <MkMediaRange
v-model="rangePercent"
:class="$style.seekbarRoot"
:buffer="bufferedDataRatio"
/>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, shallowRef, computed, watch } from 'vue'; import { ref, shallowRef, computed, watch, onDeactivated, onActivated, onMounted } from 'vue';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import type { MenuItem } from '@/types/menu.js';
import bytes from '@/filters/bytes.js'; import bytes from '@/filters/bytes.js';
import hms from '@/filters/hms.js'; import hms from '@/filters/hms.js';
import { defaultStore } from '@/store.js'; import { defaultStore } from '@/store.js';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import * as os from '@/os.js';
import { isFullscreenNotSupported } from '@/scripts/device-kind.js'; import { isFullscreenNotSupported } from '@/scripts/device-kind.js';
import hasAudio from '@/scripts/media-has-audio.js'; import hasAudio from '@/scripts/media-has-audio.js';
import MkMediaRange from '@/components/MkMediaRange.vue';
import { iAmModerator } from '@/account.js';
const props = defineProps<{ const props = defineProps<{
video: Misskey.entities.DriveFile; video: Misskey.entities.DriveFile;
}>(); }>();
// eslint-disable-next-line vue/no-setup-props-destructure
const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.video.isSensitive && defaultStore.state.nsfw !== 'ignore')); const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.video.isSensitive && defaultStore.state.nsfw !== 'ignore'));
// MediaControl State // Menu
const menuShowing = ref(false);
function showMenu(ev: MouseEvent) {
let menu: MenuItem[] = [];
menu = [
// TODO: 再生キューに追加
{
text: i18n.ts.hide,
icon: 'ti ti-eye-off',
action: () => {
hide.value = true;
},
},
];
if (iAmModerator) {
menu.push({
type: 'divider',
}, {
text: props.video.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
icon: props.video.isSensitive ? 'ti ti-eye' : 'ti ti-eye-exclamation',
danger: true,
action: () => toggleSensitive(props.video),
});
}
menuShowing.value = true;
os.popupMenu(menu, ev.currentTarget ?? ev.target, {
align: 'right',
onClosing: () => {
menuShowing.value = false;
},
});
}
function toggleSensitive(file: Misskey.entities.DriveFile) {
os.apiWithDialog('drive/files/update', {
fileId: file.id,
isSensitive: !file.isSensitive,
});
}
// MediaControl: Video State
const videoEl = shallowRef<HTMLVideoElement>(); const videoEl = shallowRef<HTMLVideoElement>();
const playerEl = shallowRef<HTMLDivElement>(); const playerEl = shallowRef<HTMLDivElement>();
const isHoverring = ref(false); const isHoverring = ref(false);
@ -84,37 +155,49 @@ const oncePlayed = ref(false);
const controlsShowing = computed(() => { const controlsShowing = computed(() => {
if (!oncePlayed.value) return true; if (!oncePlayed.value) return true;
if (isHoverring.value) return true; if (isHoverring.value) return true;
if (menuShowing.value) return true;
return false; return false;
}); });
const isFullscreen = ref(false); const isFullscreen = ref(false);
// MediaControl: Common State
const isReady = ref(false); const isReady = ref(false);
const isPlaying = ref(false); const isPlaying = ref(false);
const isActuallyPlaying = ref(false); const isActuallyPlaying = ref(false);
const elapsedTimeMs = ref(0); const elapsedTimeMs = ref(0);
const durationMs = ref(0);
const rangePercent = computed({
get: () => {
return (elapsedTimeMs.value / durationMs.value) || 0;
},
set: (to) => {
if (!videoEl.value) return;
videoEl.value.currentTime = to * durationMs.value / 1000;
},
});
const volume = ref(.3); const volume = ref(.3);
const bufferedEnd = ref(0); const bufferedEnd = ref(0);
const bufferedDataRatio = computed(() => { const bufferedDataRatio = computed(() => {
if (!videoEl.value) return 0; if (!videoEl.value) return 0;
return bufferedEnd.value / videoEl.value.duration; return bufferedEnd.value / videoEl.value.duration;
}); });
let controlStateTimer; let controlStateTimer: string | number;
// MediaControl Events // MediaControl Events
function onMouseOver(ev: MouseEvent) { function onMouseOver() {
if (controlStateTimer) { if (controlStateTimer) {
clearTimeout(controlStateTimer); clearTimeout(controlStateTimer);
} }
isHoverring.value = true; isHoverring.value = true;
} }
function onMouseLeave(ev: MouseEvent) { function onMouseLeave() {
controlStateTimer = setTimeout(() => { controlStateTimer = window.setTimeout(() => {
isHoverring.value = false; isHoverring.value = false;
}, 100); }, 100);
} }
function onClick(ev: MouseEvent) { function togglePlayPause() {
if (!isReady.value || !videoEl.value) return; if (!isReady.value || !videoEl.value) return;
if (isPlaying.value) { if (isPlaying.value) {
@ -130,10 +213,12 @@ function onClick(ev: MouseEvent) {
function toggleFullscreen() { function toggleFullscreen() {
if (isFullscreenNotSupported && videoEl.value) { if (isFullscreenNotSupported && videoEl.value) {
if (isFullscreen.value) { if (isFullscreen.value) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore //@ts-ignore
videoEl.value.webkitExitFullscreen(); videoEl.value.webkitExitFullscreen();
isFullscreen.value = false; isFullscreen.value = false;
} else { } else {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore //@ts-ignore
videoEl.value.webkitEnterFullscreen(); videoEl.value.webkitEnterFullscreen();
isFullscreen.value = true; isFullscreen.value = true;
@ -157,36 +242,50 @@ function toggleMute() {
} }
} }
const videoElWatcherStop = watch(videoEl, () => { let onceInit = false;
if (videoEl.value) { let stopVideoElWatch: () => void;
videoElWatcherStop();
function init() {
if (onceInit) return;
onceInit = true;
stopVideoElWatch = watch(videoEl, () => {
if (videoEl.value) {
isReady.value = true; isReady.value = true;
function updateBufferedEnd() { function updateMediaTick() {
if (videoEl.value) { if (videoEl.value) {
try { try {
bufferedEnd.value = videoEl.value.buffered.end(0); bufferedEnd.value = videoEl.value.buffered.end(0);
} catch (err) { } catch (err) {
// do nothing bufferedEnd.value = 0;
} }
elapsedTimeMs.value = videoEl.value.currentTime * 1000;
} }
window.requestAnimationFrame(updateBufferedEnd); window.requestAnimationFrame(updateMediaTick);
} }
updateBufferedEnd();
updateMediaTick();
videoEl.value.addEventListener('play', () => { videoEl.value.addEventListener('play', () => {
isActuallyPlaying.value = true; isActuallyPlaying.value = true;
isReady.value = true;
}); });
videoEl.value.addEventListener('pause', () => { videoEl.value.addEventListener('pause', () => {
isActuallyPlaying.value = false; isActuallyPlaying.value = false;
isPlaying.value = false;
}); });
videoEl.value.addEventListener('timeupdate', () => { videoEl.value.addEventListener('ended', () => {
oncePlayed.value = false;
isActuallyPlaying.value = false;
isPlaying.value = false;
});
videoEl.value.addEventListener('durationchange', () => {
if (videoEl.value) { if (videoEl.value) {
elapsedTimeMs.value = videoEl.value.currentTime * 1000; durationMs.value = videoEl.value.duration * 1000;
} }
}); });
@ -198,11 +297,41 @@ const videoElWatcherStop = watch(videoEl, () => {
} }
}); });
} }
}, {
immediate: true,
}); });
}
watch(volume, (to) => { watch(volume, (to) => {
if (videoEl.value) videoEl.value.volume = to; if (videoEl.value) videoEl.value.volume = to;
}); });
watch(hide, (to) => {
if (to && isFullscreen.value) {
document.exitFullscreen();
isFullscreen.value = false;
}
});
onMounted(() => {
init();
});
onActivated(() => {
init();
});
onDeactivated(() => {
isReady.value = false;
isPlaying.value = false;
isActuallyPlaying.value = false;
elapsedTimeMs.value = 0;
durationMs.value = 0;
bufferedEnd.value = 0;
hide.value = (defaultStore.state.nsfw === 'force' || defaultStore.state.dataSaver.media) ? true : (props.video.isSensitive && defaultStore.state.nsfw !== 'ignore');
stopVideoElWatch();
onceInit = false;
});
</script> </script>
<style lang="scss" module> <style lang="scss" module>
@ -211,7 +340,59 @@ watch(volume, (to) => {
position: relative; 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);
}
}
.indicators {
display: inline-flex;
position: absolute;
top: 10px;
left: 10px;
pointer-events: none;
opacity: .5;
gap: 6px;
}
.indicator {
/* Hardcode to black because either --bg or --fg makes it hard to read in dark/light mode */
background-color: black;
border-radius: 6px;
color: var(--accentLighten);
display: inline-block;
font-weight: bold;
font-size: 0.8em;
padding: 2px 5px;
}
.hide { .hide {
display: block;
position: absolute;
border-radius: 6px;
background-color: var(--fg);
color: var(--accentLighten);
font-size: 12px;
opacity: .5;
padding: 5px 8px;
text-align: center;
cursor: pointer;
top: 12px;
right: 12px;
}
.hidden {
width: 100%; width: 100%;
background: none; background: none;
border: none; border: none;
@ -226,7 +407,7 @@ watch(volume, (to) => {
background: #000; background: #000;
} }
.hideContent { .hiddenTextWrapper {
text-align: center; text-align: center;
font-size: 0.8em; font-size: 0.8em;
color: #fff; color: #fff;
@ -283,6 +464,7 @@ watch(volume, (to) => {
grid-template-columns: auto auto 1fr auto auto; grid-template-columns: auto auto 1fr auto auto;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
pointer-events: none;
padding: 35px 10px 10px 10px; padding: 35px 10px 10px 10px;
background: linear-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, .75)); background: linear-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, .75));
@ -310,15 +492,9 @@ watch(volume, (to) => {
} }
} }
@container (min-width: 500px) {
.videoControls {
grid-template-areas: "left seekbar time volume right";
grid-template-columns: auto 4fr auto 1fr auto;
}
}
.controlsChild { .controlsChild {
display: flex; display: flex;
align-items: center;
gap: 4px; gap: 4px;
color: #fff; color: #fff;
@ -344,14 +520,33 @@ watch(volume, (to) => {
.controlsTime { .controlsTime {
grid-area: time; grid-area: time;
font-size: .9rem;
} }
.controlsVolume { .controlsVolume {
grid-area: volume; grid-area: volume;
.volumeSeekbar {
display: none;
}
} }
.controlsSeekbar { .seekbarRoot {
grid-area: seekbar; grid-area: seekbar;
} }
@container (min-width: 500px) {
.videoControls {
grid-template-areas: "left seekbar time volume right";
grid-template-columns: auto 1fr auto auto auto;
}
.controlsVolume {
.volumeSeekbar {
max-width: 90px;
display: block;
flex-grow: 1;
}
}
}
</style> </style>