feat(multistream): UI improvements and better time synchronization

src/components/Video/MultistreamTimeline.module.css

@@ -0,0 +1,71 @@
+.timelineGrid {
+  position: relative;
+  min-height: 5rem;
+  max-height: 5rem;
+  flex-shrink: 0;
+  overflow: auto;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: 0.25rem;
+  margin: 0 1rem 1rem 1rem;
+}
+
+.timelineStreamerColumn {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.timelineBar {
+  position: relative;
+  height: 0.75rem;
+  border-radius: 0.25rem;
+  overflow: hidden;
+}
+
+.timelineBar:before {
+  content: "";
+  background: var(--mantine-color-violet-9);
+  opacity: 0.25;
+  position: absolute;
+  inset: 0;
+}
+
+.timelineBarActive {
+  pointer-events: none;
+  background-color: var(--mantine-color-violet-9);
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: var(--bar-start);
+  width: var(--bar-length);
+}
+
+.offsetInput {
+  width: 4.5rem;
+}
+
+.playheadContainer {
+  position: absolute;
+  grid-column: 2 / 3;
+  grid-row: 1;
+  width: 100%;
+  height: 100%;
+}
+
+.playhead {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: var(--playhead-position);
+  transform: translateX(-50%);
+  width: 0.125rem;
+  background-color: var(--mantine-color-grape-5);
+  opacity: 0.75;
+  pointer-events: none;
+}
+
+.playheadPreview {
+  background-color: var(--mantine-color-pink-5);
+  opacity: 0.75;
+}

src/components/Video/MultistreamTimeline.tsx

@@ -0,0 +1,191 @@
+import { ActionIcon, Center, Group, NumberInput, Stack, Tooltip } from "@mantine/core";
+import classes from "./MultistreamTimeline.module.css"
+import { IconEye, IconEyeOff, IconPlayerPauseFilled, IconPlayerPlayFilled, IconRewindBackward5, IconRewindBackward60, IconRewindForward5, IconRewindForward60 } from "@tabler/icons-react";
+import React, { Fragment, useState } from "react";
+import dayjs from "dayjs";
+
+export type MultistreamTimelineProps = {
+  seek: (time: number) => void;
+  pause: () => void;
+  play: () => void;
+  vodPlaybackOffsets: Record<string, number>;
+  globalTime: number;
+  startDateMs: number | null;
+  endDateMs: number | null;
+  playStartAtDate: number;
+  playing: boolean;
+  setVodOffset: (vodId: string, offset: number) => void;
+  playingVodForStreamer: Record<string, Vod | null>;
+  streamers: Record<string, {
+    name: string
+    vods: Vod[]
+  }>;
+  streamerViewState: Record<string, boolean>;
+  toggleView: (streamerId: string) => void;
+}
+
+type Vod = {
+  id: string
+  duration: number
+  streamed_at: string
+}
+
+export const MultistreamTimeline = ({ vodPlaybackOffsets, globalTime, startDateMs, endDateMs, playStartAtDate, seek, pause, play, playing, playingVodForStreamer, streamerViewState, toggleView, streamers, setVodOffset }: MultistreamTimelineProps) => {
+  const [timelineTooltipText, setTimelineTooltipText] = useState<string>("");
+  const [hoverPlayheadDate, setHoverPlayheadDate] = useState<number | null>(null);
+  const timeAtMousePosition = (timelineBar: HTMLDivElement | null, event: React.MouseEvent) => {
+    if (!timelineBar) return null;
+    const rect = timelineBar.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const percentage = x / rect.width;
+    const globalTime = startDateMs! + percentage * timelineDurationMs;
+    return globalTime;
+  }
+
+  const onTimelineClick = (timelineBar: HTMLDivElement | null, event: React.MouseEvent) => {
+    const newGlobalTime = timeAtMousePosition(timelineBar, event);
+    if (newGlobalTime == null) {
+      return;
+    }
+    seek(newGlobalTime);
+  }
+
+  const hideHoverPlayhead = () => {
+    setHoverPlayheadDate(null);
+  }
+  const updateHoverPlayhead = (timelineBar: HTMLDivElement | null, event: React.PointerEvent) => {
+    setHoverPlayheadDate(timeAtMousePosition(timelineBar, event));
+  }
+  const timelineDurationMs: number = startDateMs != null && endDateMs != null ? endDateMs - startDateMs : 0;
+
+  const getCurrentTime = () => {
+    return (playing ? (Date.now() - playStartAtDate) : 0) + globalTime
+  }
+
+  const updateTimelineTooltip = (timelineBar: HTMLDivElement | null, event: React.PointerEvent) => {
+    const timeUnderPointer = timeAtMousePosition(timelineBar, event);
+    setTimelineTooltipText(timeUnderPointer != null ? dayjs(timeUnderPointer).format("YYYY/MM/DD HH:mm:ss") : "");
+  }
+
+  const timelineEnd = dayjs(endDateMs).format("YYYY/MM/DD HH:mm:ss")
+
+  return <Stack gap="sm">
+    <Group justify="center" gap="xs">
+      <Tooltip label="Seek back 60 seconds" position="top">
+        <ActionIcon
+          size="sm"
+          variant="subtle"
+          color="violet"
+          aria-label="Seek back 60 seconds"
+          onClick={() => seek(getCurrentTime() - 60000)}
+        ><IconRewindBackward60 /></ActionIcon>
+      </Tooltip>
+
+      <Tooltip label="Seek back 5 seconds" position="top">
+        <ActionIcon
+          size="sm"
+          variant="subtle"
+          color="violet"
+          aria-label="Seek back 5 seconds"
+          onClick={() => seek(getCurrentTime() - 5000)}
+        ><IconRewindBackward5 /></ActionIcon>
+      </Tooltip>
+
+      <Tooltip label={playing ? "Pause" : "Play"} position="top">
+        <ActionIcon
+          onClick={() => { playing ? pause() : play() }}
+          size="md"
+          variant="subtle"
+          color="violet"
+          aria-label={playing ? "Pause" : "Play"}
+        >
+          {playing ? <IconPlayerPauseFilled /> : <IconPlayerPlayFilled />}
+        </ActionIcon>
+      </Tooltip>
+
+      <Tooltip label="Seek forward 5 seconds" position="top">
+        <ActionIcon
+          size="sm"
+          variant="subtle"
+          color="violet"
+          aria-label="Seek forward 5 seconds"
+          onClick={() => seek(getCurrentTime() + 5000)}
+        ><IconRewindForward5 /></ActionIcon>
+      </Tooltip>
+
+      <Tooltip label="Seek forward 60 seconds" position="top">
+        <ActionIcon
+          size="sm"
+          variant="subtle"
+          color="violet"
+          aria-label="Seek forward 60 seconds"
+          onClick={() => seek(getCurrentTime() + 60000)}
+        ><IconRewindForward60 /></ActionIcon>
+      </Tooltip>
+    </Group>
+
+    <Center>
+      <div>
+        {dayjs(getCurrentTime()).format("YYYY/MM/DD HH:mm:ss")} / {timelineEnd}
+      </div>
+    </Center>
+
+    {
+      startDateMs != null && endDateMs != null && <div className={classes.timelineGrid}>
+        {Object.keys(streamers).map((streamerId) => {
+          const streamer = streamers[streamerId]
+
+          const timelineBar = <div className={classes.timelineBar}>
+            {streamer.vods.map(vod => <div key={vod.id + "-vod-timeline-online"} className={classes.timelineBarActive} style={{
+              '--bar-start': `${100 * (+new Date(vod.streamed_at) - startDateMs!) / timelineDurationMs}%`,
+              '--bar-length': `${100 * 1000 * vod.duration / timelineDurationMs}%`,
+            } as React.CSSProperties}></div>)}
+          </div>
+
+          const playingVod = playingVodForStreamer[streamerId];
+
+          return (
+            <Fragment key={streamer.name + "-timeline-row"}>
+              <div className={classes.timelineStreamerColumn}>
+                {streamer.name}
+                <Tooltip label={streamerViewState[streamerId] ? "Hide streamer" : "Show streamer"}>
+                  <ActionIcon variant="subtle" color="violet" onClick={() => toggleView(streamerId)} aria-label={streamerViewState[streamerId] ? "Hide streamer" : "Show streamer"}>
+                    {streamerViewState[streamerId] ? <IconEye size="1.125rem" aria-label="Currently displayed" /> : <IconEyeOff size="1.125rem" aria-label="Currently hidden" />}
+                  </ActionIcon>
+                </Tooltip>
+                <NumberInput
+                  className={classes.offsetInput}
+                  size="xs"
+                  step={0.1}
+                  value={playingVod && vodPlaybackOffsets[playingVod.id] != null ? (vodPlaybackOffsets[playingVod.id] || 0) / 1000 : ''}
+                  placeholder="Offset"
+                  disabled={!playingVod}
+                  onChange={(value) => {
+                    if (!playingVod) return;
+                    const valAsNumber = Math.trunc(+value * 1000);
+                    if (isNaN(valAsNumber)) return;
+                    setVodOffset(playingVod.id, valAsNumber);
+                  }}
+                />
+              </div>
+              <div>{timelineBar}</div>
+            </Fragment>
+          )
+        })}
+
+        {
+          (() => {
+            let timelineBarRef: HTMLDivElement | null = null;
+
+            return <Tooltip.Floating label={timelineTooltipText}>
+              <div className={classes.playheadContainer} ref={el => timelineBarRef = el} onClick={(event) => onTimelineClick(timelineBarRef, event)} onPointerMove={(event) => { updateTimelineTooltip(timelineBarRef, event); updateHoverPlayhead(timelineBarRef, event) }} onPointerLeave={hideHoverPlayhead}>
+                <div className={classes.playhead} style={{ '--playhead-position': `${((getCurrentTime() - startDateMs) / timelineDurationMs) * 100}%` } as React.CSSProperties}></div>
+                {hoverPlayheadDate != null && <div className={`${classes.playhead} ${classes.playheadPreview}`} style={{ '--playhead-position': `${((hoverPlayheadDate - startDateMs) / timelineDurationMs) * 100}%` } as React.CSSProperties}></div>}
+              </div>
+            </Tooltip.Floating>
+          })()
+        }
+      </div>
+    }
+  </Stack>
+}

src/components/Video/SyncedVideoPlayer.module.css

@@ -1,7 +1,11 @@
 .mediaPlayer {
-    height: 100%;
+  height: 100%;
 
   video {
     height: 100%;
   }
+}
+
+.ganymedePoster {
+  object-fit: contain;
 }