feat: add timecode display to VideoViewer during previewing
This commit is contained in:
parent
e0a9ee1c96
commit
8566bb70d0
1 changed files with 61 additions and 3 deletions
|
@ -16,10 +16,22 @@
|
||||||
let state = State.LOADING;
|
let state = State.LOADING;
|
||||||
|
|
||||||
let videoEl: HTMLVideoElement;
|
let videoEl: HTMLVideoElement;
|
||||||
|
let currentTime: number;
|
||||||
|
|
||||||
|
let timeCodeWidth: number;
|
||||||
|
let timeCodeLeft: string;
|
||||||
|
|
||||||
const seek = throttle((progress: number) => {
|
const seek = throttle((progress: number) => {
|
||||||
if (state === State.PREVIEWING && videoEl.duration) {
|
if (state === State.PREVIEWING && videoEl.duration) {
|
||||||
videoEl.currentTime = videoEl.duration * progress;
|
currentTime = videoEl.duration * progress;
|
||||||
|
|
||||||
|
if (timeCodeWidth) {
|
||||||
|
let timeCodeLeftPx = Math.min(
|
||||||
|
Math.max(videoEl.clientWidth * progress, timeCodeWidth / 2),
|
||||||
|
videoEl.clientWidth - timeCodeWidth / 2
|
||||||
|
);
|
||||||
|
timeCodeLeft = `${timeCodeLeftPx}px`;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}, 100);
|
}, 100);
|
||||||
|
|
||||||
|
@ -73,6 +85,7 @@
|
||||||
on:click|preventDefault={startPlaying}
|
on:click|preventDefault={startPlaying}
|
||||||
controls={state === State.PLAYING}
|
controls={state === State.PLAYING}
|
||||||
bind:this={videoEl}
|
bind:this={videoEl}
|
||||||
|
bind:currentTime
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
<div class="play-icon">
|
<div class="play-icon">
|
||||||
|
@ -80,6 +93,21 @@
|
||||||
<Icon plain name="play" />
|
<Icon plain name="play" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
class="timecode"
|
||||||
|
bind:clientWidth={timeCodeWidth}
|
||||||
|
style="--left: {timeCodeLeft}"
|
||||||
|
>
|
||||||
|
{#if videoEl?.duration && currentTime}
|
||||||
|
{#if videoEl.duration > 3600}{String(
|
||||||
|
Math.floor(currentTime / 3600)
|
||||||
|
).padStart(2, "0")}:{/if}{String(
|
||||||
|
Math.floor((currentTime % 3600) / 60)
|
||||||
|
).padStart(2, "0")}:{String(
|
||||||
|
Math.floor((currentTime % 3600) % 60)
|
||||||
|
).padStart(2, "0")}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -141,6 +169,31 @@
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.timecode {
|
||||||
|
display: none;
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: var(--left);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
|
||||||
|
font-feature-settings: "tnum";
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 24px;
|
||||||
|
color: white;
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.loading {
|
||||||
|
.player > * {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&.standby,
|
&.standby,
|
||||||
&.preview {
|
&.preview {
|
||||||
img,
|
img,
|
||||||
|
@ -152,8 +205,13 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.previewing video {
|
&.previewing {
|
||||||
|
.timecode {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
video {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue