fix: consistent font sizing of timecode
This commit is contained in:
parent
5f9eb24c76
commit
da5d3ad0c2
1 changed files with 5 additions and 3 deletions
|
@ -21,6 +21,7 @@
|
||||||
|
|
||||||
let timeCodeWidth: number;
|
let timeCodeWidth: number;
|
||||||
let timeCodeLeft: string;
|
let timeCodeLeft: string;
|
||||||
|
let timeCodeSize: string;
|
||||||
|
|
||||||
const seek = throttle((progress: number) => {
|
const seek = throttle((progress: number) => {
|
||||||
if (state === State.PREVIEWING && videoEl.duration) {
|
if (state === State.PREVIEWING && videoEl.duration) {
|
||||||
|
@ -32,6 +33,7 @@
|
||||||
videoEl.clientWidth - timeCodeWidth / 2
|
videoEl.clientWidth - timeCodeWidth / 2
|
||||||
);
|
);
|
||||||
timeCodeLeft = `${timeCodeLeftPx}px`;
|
timeCodeLeft = `${timeCodeLeftPx}px`;
|
||||||
|
timeCodeSize = `${videoEl.clientHeight / 9}px`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, 100);
|
}, 100);
|
||||||
|
@ -97,7 +99,8 @@
|
||||||
<div
|
<div
|
||||||
class="timecode"
|
class="timecode"
|
||||||
bind:clientWidth={timeCodeWidth}
|
bind:clientWidth={timeCodeWidth}
|
||||||
style="--left: {timeCodeLeft}"
|
style:left={timeCodeLeft}
|
||||||
|
style:font-size={timeCodeSize}
|
||||||
>
|
>
|
||||||
{#if videoEl?.duration && currentTime}
|
{#if videoEl?.duration && currentTime}
|
||||||
{#if videoEl.duration > 3600}{String(
|
{#if videoEl.duration > 3600}{String(
|
||||||
|
@ -181,9 +184,8 @@
|
||||||
|
|
||||||
font-feature-settings: "tnum";
|
font-feature-settings: "tnum";
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 24px;
|
|
||||||
color: white;
|
color: white;
|
||||||
opacity: 0.85;
|
opacity: 0.66;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.loading {
|
&.loading {
|
||||||
|
|
Loading…
Reference in a new issue