gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-03-22 00:03:41 +01:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

feat(video_player): add elapsed/remaining time

Browse Source
This commit is contained in:
Elian Doran 2026-03-10 19:05:59 +02:00
parent 8b0a45e4fd
commit 08a0326cb0
No known key found for this signature in database
2 changed files with 33 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
apps/client/src/widgets/type_widgets/file/Video.css
View File

@ -20,8 +20,21 @@
gap: 0.5em;
}
.video-seekbar-row {
display: flex;
align-items: center;
gap: 0.5em;
}
.video-trackbar {
width: 100%;
flex: 1;
cursor: pointer;
}
.video-time {
font-size: 0.85em;
font-variant-numeric: tabular-nums;
color: white;
white-space: nowrap;
}
}

28
apps/client/src/widgets/type_widgets/file/Video.tsx
View File

@ -6,6 +6,12 @@ import FNote from "../../../entities/fnote";
import { getUrlForDownload } from "../../../services/open";
import ActionButton from "../../react/ActionButton";
function formatTime(seconds: number): string {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs.toString().padStart(2, "0")}`;
}
export default function VideoPreview({ note }: { note: FNote }) {
const videoRef = useRef<HTMLVideoElement>(null);
const [playing, setPlaying] = useState(false);
@ -56,15 +62,19 @@ export default function VideoPreview({ note }: { note: FNote }) {
/>
<div className="video-preview-controls">
<input
type="range"
class="video-trackbar"
min={0}
max={duration || 0}
step={0.1}
value={currentTime}
onInput={onSeek}
/>
<div class="video-seekbar-row">
<span class="video-time">{formatTime(currentTime)}</span>
<input
type="range"
class="video-trackbar"
min={0}
max={duration || 0}
step={0.1}
value={currentTime}
onInput={onSeek}
/>
<span class="video-time">-{formatTime(Math.max(0, duration - currentTime))}</span>
</div>
<ActionButton
icon={playing ? "bx bx-pause" : "bx bx-play"}
text={playing ? "Pause" : "Play"}