Respect the URL parameters when loading the restreamer

thrimbletrimmer/src/common/streamInfo.tsx

@@ -4,4 +4,34 @@ export class StreamVideoInfo {
 	streamName: string;
 	streamStartTime: DateTime;
 	streamEndTime: DateTime | null;
+
+	public static defaultFromURL(): StreamVideoInfo | null {
+		const url = new URL(window.location.href);
+		const urlParams = url.searchParams;
+		const stream = urlParams.get("stream");
+		const start = urlParams.get("start");
+		const end = urlParams.get("end");
+		if (stream === null) {
+			return null;
+		}
+		if (start === null) {
+			return null;
+		}
+		const startTime = DateTime.fromISO(start, { zone: "utc" });
+		if (!startTime.isValid) {
+			return null;
+		}
+		let endTime: DateTime | null = null;
+		if (end !== null) {
+			endTime = DateTime.fromISO(end, { zone: "utc" });
+			if (!endTime.isValid) {
+				return null;
+			}
+		}
+		return {
+			streamName: stream,
+			streamStartTime: startTime,
+			streamEndTime: endTime,
+		};
+	}
 }

thrimbletrimmer/src/common/video.tsx

@@ -1,12 +1,4 @@
-import {
-	Accessor,
-	Component,
-	createEffect,
-	createSignal,
-	onMount,
-	Setter,
-	Show,
-} from "solid-js";
+import { Accessor, Component, createEffect, createSignal, onMount, Setter, Show } from "solid-js";
 import { DateTime } from "luxon";
 import {
 	TimeType,
@@ -35,11 +27,20 @@ export const VIDEO_FRAMES_PER_SECOND = 30;
 export const PLAYBACK_RATES = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 4, 8];
 
 export interface StreamTimeSettingsProps {
+	/** Getter for the signal to get the time when the run starts. */
 	busStartTime: Accessor<DateTime>;
+	/** Getter for the StreamVideoInfo signal. Used to set field values and, if applicable, apply defaults. */
 	streamVideoInfo: Accessor<StreamVideoInfo>;
+	/** Setter for the StreamVideoInfo signal. */
 	setStreamVideoInfo: Setter<StreamVideoInfo>;
+	/**
+	 * If true, shows a link to the same page with the specified stream and time range. For the link to work, the host
+	 * page must support defaulting the link data into the StreamVideoInfo.
+	 */
 	showTimeRangeLink: boolean;
+	/** Getter for the signal containing the list of errors to display. */
 	errorList: Accessor<string[]>;
+	/** Setter for the signal containing the list of errors to display. */
 	setErrorList: Setter<string[]>;
 }
 
@@ -301,7 +302,10 @@ export const VideoPlayer: Component<VideoPlayerProps> = (props) => {
 						<media-tooltip class="vds-tooltip">
 							<media-tooltip-trigger>
 								<media-menu-button class="vds-button vds-menu-button">
-									<media-icon class="vds-icon vds-menu-settings-icon vds-rotate-icon" type="settings" />
+									<media-icon
+										class="vds-icon vds-menu-settings-icon vds-rotate-icon"
+										type="settings"
+									/>
 								</media-menu-button>
 							</media-tooltip-trigger>
 							<media-tooltip-content class="vds-tooltip-content" placement="top">

thrimbletrimmer/src/restreamer/Restreamer.tsx

@@ -91,11 +91,15 @@ const RestreamerWithDefaults: Component<RestreamerDefaultProps> = (props) => {
 		return <></>;
 	}
 	const [busStartTime, setBusStartTime] = createSignal<DateTime>(busStartTimeDefault);
-	const [streamVideoInfo, setStreamVideoInfo] = createSignal<StreamVideoInfo>({
+	let defaultStreamInfo = StreamVideoInfo.defaultFromURL();
+	if (defaultStreamInfo === null) {
+		defaultStreamInfo = {
 			streamName: props.defaults.video_channel,
 			streamStartTime: DateTime.utc().minus({ minutes: 10 }),
 			streamEndTime: null,
-	});
+		};
+	}
+	const [streamVideoInfo, setStreamVideoInfo] = createSignal<StreamVideoInfo>(defaultStreamInfo);
 	const [playerTime, setPlayerTime] = createSignal<number>(0);
 	const [mediaPlayer, setMediaPlayer] = createSignal<MediaPlayerElement>();
 	const [videoFragments, setVideoFragments] = createSignal<Fragment[]>([]);
@@ -171,7 +175,7 @@ const RestreamerWithDefaults: Component<RestreamerDefaultProps> = (props) => {
 				busStartTime={busStartTime}
 				streamVideoInfo={streamVideoInfo}
 				setStreamVideoInfo={setStreamVideoInfo}
-				showTimeRangeLink={false}
+				showTimeRangeLink={true}
 				errorList={props.errorList}
 				setErrorList={props.setErrorList}
 			/>