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",
]