diff --git a/frontend/src/components/MediaPreview.vue b/frontend/src/components/MediaPreview.vue index 3bb884c..11a08ad 100644 --- a/frontend/src/components/MediaPreview.vue +++ b/frontend/src/components/MediaPreview.vue @@ -2,11 +2,12 @@
- + -
- +
+ +
@@ -24,11 +25,11 @@ import { Play as PlayIcon, Spinner as SpinnerIcon } from '@/assets/svg' const aud = ref(null) const vid = ref(null) const media = computed(() => aud.value || vid.value) -const poster = computed(() => `${props.doc.previewurl}?${props.quality}&t=${props.doc.mtime}`) const props = defineProps<{ doc: Doc quality: string }>() +const previewSrc = computed(() => props.doc.previewurl ? `${props.doc.previewurl}?${props.quality}&t=${props.doc.mtime}` : '') const onplay = () => { if (!media.value) return @@ -40,6 +41,13 @@ const onpaused = () => { media.value.controls = false media.value.removeAttribute('data-playing') } +const applyPoster = (el: HTMLVideoElement) => { + if (props.doc.complete) { + el.poster = previewSrc.value + } else { + el.removeAttribute('poster') + } +} let fscurrent: HTMLVideoElement | null = null const next = () => { if (!media.value) return @@ -73,7 +81,7 @@ const next = () => { if (!elem.paused) fscurrent.play() fscurrent = null elem.src = props.doc.url - elem.poster = poster.value + applyPoster(elem) onpaused() }, {once: true}) } @@ -107,7 +115,7 @@ defineExpose({ const video = () => ['mkv', 'mp4', 'webm', 'mov', 'avi'].includes(props.doc.ext) const audio = () => ['mp3', 'flac', 'ogg', 'aac'].includes(props.doc.ext) const archive = () => ['zip', 'tar', 'gz', 'bz2', 'xz', '7z', 'rar'].includes(props.doc.ext) -const showProgress = () => !props.doc.complete && (preview() || props.doc.img || video() || audio()) +const showProgress = () => !props.doc.complete && (preview() || props.doc.img) const preview = () => ( ['bmp', 'ico', 'tif', 'tiff', 'heic', 'heif', 'pdf', 'epub', 'mobi'].includes(props.doc.ext) || props.doc.size > 500000 && @@ -202,9 +210,14 @@ img::before { align-items: center; justify-content: center; min-width: 50%; + min-height: 6em; + aspect-ratio: 16 / 9; max-width: 100%; max-height: 100%; } +.video-container.pending { + background: color-mix(in srgb, var(--header-bg) 55%, transparent); +} .video-container video { width: 100%; height: 100%; diff --git a/frontend/src/repositories/Document.ts b/frontend/src/repositories/Document.ts index 860451f..930e51f 100644 --- a/frontend/src/repositories/Document.ts +++ b/frontend/src/repositories/Document.ts @@ -70,6 +70,7 @@ export class Doc { return ['mp4', 'mkv', 'webm', 'ogg', 'mp3', 'flac', 'aac', 'pdf'].includes(this.ext) } get previewurl(): string { + if (!this.complete || this.dir) return '' return this.url.replace(/^\/files/, '/preview') } get ext(): string { diff --git a/pyproject.toml b/pyproject.toml index 101c2dd..482f756 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -46,6 +46,7 @@ dependencies = [ "setproctitle>=1.3.6", "stream-zip>=0.0.83", "tomli_w>=1.2.0", + "tracerite>=2.3.1", "zstandard>=0.24.0", ]