chore: VideoViewer preview optimization
This commit is contained in:
parent
423ec7b03a
commit
e9f30c3904
1 changed files with 7 additions and 0 deletions
|
@ -51,11 +51,15 @@
|
||||||
<div class="player" style="--icon-size: {detail ? 100 : 32}px">
|
<div class="player" style="--icon-size: {detail ? 100 : 32}px">
|
||||||
{#if state === State.LOADING}
|
{#if state === State.LOADING}
|
||||||
<Spinner />
|
<Spinner />
|
||||||
|
{/if}
|
||||||
|
{#if state === State.LOADING || (!detail && state === State.PREVIEW)}
|
||||||
|
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||||
<img
|
<img
|
||||||
class="thumb"
|
class="thumb"
|
||||||
src="api/thumb/{address}?mime=video"
|
src="api/thumb/{address}?mime=video"
|
||||||
alt="Preview for {address}"
|
alt="Preview for {address}"
|
||||||
on:load={() => (state = State.PREVIEW)}
|
on:load={() => (state = State.PREVIEW)}
|
||||||
|
on:mouseover={() => (state = State.PREVIEWING)}
|
||||||
on:error={() => (state = State.ERRORED)}
|
on:error={() => (state = State.ERRORED)}
|
||||||
/>
|
/>
|
||||||
{:else}
|
{:else}
|
||||||
|
@ -92,6 +96,7 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
img,
|
||||||
video {
|
video {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
|
@ -134,7 +139,9 @@
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.standby,
|
||||||
&.preview {
|
&.preview {
|
||||||
|
img,
|
||||||
video {
|
video {
|
||||||
filter: brightness(0.75);
|
filter: brightness(0.75);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue