video
This commit is contained in:
kakkokari-gtyih
parent
f159fc80c6
commit
fa9353350e
142
packages/frontend/src/components/MkMediaRange.vue
Normal file
142
packages/frontend/src/components/MkMediaRange.vue
Normal 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>
|
||||
|
|
@ -4,15 +4,25 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<div :class="[$style.videoContainer, controlsShowing && $style.active]" @mouseover="onMouseOver" @mouseleave="onMouseLeave" @contextmenu.stop ref="playerEl">
|
||||
<button v-if="hide" :class="$style.hide" @click="hide = false">
|
||||
<div :class="$style.hideContent">
|
||||
<div
|
||||
ref="playerEl"
|
||||
: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-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>
|
||||
</div>
|
||||
</button>
|
||||
<div v-else :class="$style.videoRoot" @click.self="onClick">
|
||||
<div v-else :class="$style.videoRoot" @click.self="togglePlayPause">
|
||||
<video
|
||||
ref="videoEl"
|
||||
:class="$style.video"
|
||||
|
|
@ -26,19 +36,24 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
:src="video.url"
|
||||
>
|
||||
</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">
|
||||
<MkLoading/>
|
||||
</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]">
|
||||
<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-else class="ti ti-player-play-filled"></i>
|
||||
</button>
|
||||
</div>
|
||||
<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>
|
||||
</button>
|
||||
<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-else class="ti ti-volume"></i>
|
||||
</button>
|
||||
|
||||
<MkMediaRange
|
||||
v-model="volume"
|
||||
:class="$style.volumeSeekbar"
|
||||
/>
|
||||
</div>
|
||||
<div :class="[$style.controlsChild, $style.controlsSeekbar]"></div>
|
||||
<MkMediaRange
|
||||
v-model="rangePercent"
|
||||
:class="$style.seekbarRoot"
|
||||
:buffer="bufferedDataRatio"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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 type { MenuItem } from '@/types/menu.js';
|
||||
import bytes from '@/filters/bytes.js';
|
||||
import hms from '@/filters/hms.js';
|
||||
import { defaultStore } from '@/store.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import * as os from '@/os.js';
|
||||
import { isFullscreenNotSupported } from '@/scripts/device-kind.js';
|
||||
import hasAudio from '@/scripts/media-has-audio.js';
|
||||
import MkMediaRange from '@/components/MkMediaRange.vue';
|
||||
import { iAmModerator } from '@/account.js';
|
||||
|
||||
const props = defineProps<{
|
||||
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'));
|
||||
|
||||
// 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 playerEl = shallowRef<HTMLDivElement>();
|
||||
const isHoverring = ref(false);
|
||||
|
|
@ -84,37 +155,49 @@ const oncePlayed = ref(false);
|
|||
const controlsShowing = computed(() => {
|
||||
if (!oncePlayed.value) return true;
|
||||
if (isHoverring.value) return true;
|
||||
if (menuShowing.value) return true;
|
||||
return false;
|
||||
});
|
||||
const isFullscreen = ref(false);
|
||||
|
||||
// MediaControl: Common State
|
||||
const isReady = ref(false);
|
||||
const isPlaying = ref(false);
|
||||
const isActuallyPlaying = ref(false);
|
||||
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 bufferedEnd = ref(0);
|
||||
const bufferedDataRatio = computed(() => {
|
||||
if (!videoEl.value) return 0;
|
||||
return bufferedEnd.value / videoEl.value.duration;
|
||||
});
|
||||
let controlStateTimer;
|
||||
let controlStateTimer: string | number;
|
||||
|
||||
// MediaControl Events
|
||||
function onMouseOver(ev: MouseEvent) {
|
||||
function onMouseOver() {
|
||||
if (controlStateTimer) {
|
||||
clearTimeout(controlStateTimer);
|
||||
}
|
||||
isHoverring.value = true;
|
||||
}
|
||||
|
||||
function onMouseLeave(ev: MouseEvent) {
|
||||
controlStateTimer = setTimeout(() => {
|
||||
function onMouseLeave() {
|
||||
controlStateTimer = window.setTimeout(() => {
|
||||
isHoverring.value = false;
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function onClick(ev: MouseEvent) {
|
||||
function togglePlayPause() {
|
||||
if (!isReady.value || !videoEl.value) return;
|
||||
|
||||
if (isPlaying.value) {
|
||||
|
|
@ -130,10 +213,12 @@ function onClick(ev: MouseEvent) {
|
|||
function toggleFullscreen() {
|
||||
if (isFullscreenNotSupported && videoEl.value) {
|
||||
if (isFullscreen.value) {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
//@ts-ignore
|
||||
videoEl.value.webkitExitFullscreen();
|
||||
isFullscreen.value = false;
|
||||
} else {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
//@ts-ignore
|
||||
videoEl.value.webkitEnterFullscreen();
|
||||
isFullscreen.value = true;
|
||||
|
|
@ -157,52 +242,96 @@ function toggleMute() {
|
|||
}
|
||||
}
|
||||
|
||||
const videoElWatcherStop = watch(videoEl, () => {
|
||||
if (videoEl.value) {
|
||||
videoElWatcherStop();
|
||||
let onceInit = false;
|
||||
let stopVideoElWatch: () => void;
|
||||
|
||||
isReady.value = true;
|
||||
function init() {
|
||||
if (onceInit) return;
|
||||
onceInit = true;
|
||||
|
||||
function updateBufferedEnd() {
|
||||
if (videoEl.value) {
|
||||
try {
|
||||
bufferedEnd.value = videoEl.value.buffered.end(0);
|
||||
} catch(err) {
|
||||
// do nothing
|
||||
}
|
||||
}
|
||||
window.requestAnimationFrame(updateBufferedEnd);
|
||||
}
|
||||
updateBufferedEnd();
|
||||
|
||||
videoEl.value.addEventListener('play', () => {
|
||||
isActuallyPlaying.value = true;
|
||||
stopVideoElWatch = watch(videoEl, () => {
|
||||
if (videoEl.value) {
|
||||
isReady.value = true;
|
||||
});
|
||||
|
||||
videoEl.value.addEventListener('pause', () => {
|
||||
isActuallyPlaying.value = false;
|
||||
});
|
||||
function updateMediaTick() {
|
||||
if (videoEl.value) {
|
||||
try {
|
||||
bufferedEnd.value = videoEl.value.buffered.end(0);
|
||||
} catch (err) {
|
||||
bufferedEnd.value = 0;
|
||||
}
|
||||
|
||||
videoEl.value.addEventListener('timeupdate', () => {
|
||||
if (videoEl.value) {
|
||||
elapsedTimeMs.value = videoEl.value.currentTime * 1000;
|
||||
elapsedTimeMs.value = videoEl.value.currentTime * 1000;
|
||||
}
|
||||
window.requestAnimationFrame(updateMediaTick);
|
||||
}
|
||||
});
|
||||
|
||||
videoEl.value.volume = volume.value;
|
||||
hasAudio(videoEl.value).then(had => {
|
||||
if (!had && videoEl.value) {
|
||||
videoEl.value.loop = videoEl.value.muted = true;
|
||||
videoEl.value.play();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
updateMediaTick();
|
||||
|
||||
videoEl.value.addEventListener('play', () => {
|
||||
isActuallyPlaying.value = true;
|
||||
});
|
||||
|
||||
videoEl.value.addEventListener('pause', () => {
|
||||
isActuallyPlaying.value = false;
|
||||
isPlaying.value = false;
|
||||
});
|
||||
|
||||
videoEl.value.addEventListener('ended', () => {
|
||||
oncePlayed.value = false;
|
||||
isActuallyPlaying.value = false;
|
||||
isPlaying.value = false;
|
||||
});
|
||||
|
||||
videoEl.value.addEventListener('durationchange', () => {
|
||||
if (videoEl.value) {
|
||||
durationMs.value = videoEl.value.duration * 1000;
|
||||
}
|
||||
});
|
||||
|
||||
videoEl.value.volume = volume.value;
|
||||
hasAudio(videoEl.value).then(had => {
|
||||
if (!had && videoEl.value) {
|
||||
videoEl.value.loop = videoEl.value.muted = true;
|
||||
videoEl.value.play();
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
immediate: true,
|
||||
});
|
||||
}
|
||||
|
||||
watch(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>
|
||||
|
||||
<style lang="scss" module>
|
||||
|
|
@ -211,13 +340,65 @@ watch(volume, (to) => {
|
|||
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 {
|
||||
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%;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
padding: 120px 0;
|
||||
display: flex;
|
||||
|
|
@ -226,7 +407,7 @@ watch(volume, (to) => {
|
|||
background: #000;
|
||||
}
|
||||
|
||||
.hideContent {
|
||||
.hiddenTextWrapper {
|
||||
text-align: center;
|
||||
font-size: 0.8em;
|
||||
color: #fff;
|
||||
|
|
@ -283,6 +464,7 @@ watch(volume, (to) => {
|
|||
grid-template-columns: auto auto 1fr auto auto;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
pointer-events: none;
|
||||
|
||||
padding: 35px 10px 10px 10px;
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #fff;
|
||||
|
||||
|
|
@ -344,14 +520,33 @@ watch(volume, (to) => {
|
|||
|
||||
.controlsTime {
|
||||
grid-area: time;
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
.controlsVolume {
|
||||
grid-area: volume;
|
||||
|
||||
.volumeSeekbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.controlsSeekbar {
|
||||
.seekbarRoot {
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue