Update chat when time range changes

Since autoscroll doesn't rely on emotes rendering at their correct height from the start anymore (this only worked nebulously anyway), this commit gets rid of the forced sizing entirely.

thrimbletrimmer/src/common/chat.module.scss

@@ -35,12 +35,6 @@
 	}
 }
 
-.chatReplayMessageEmote {
-	// The sizes here are based on Twitch's 1.0 emote size.
-	width: 28px;
-	height: 28px;
-}
-
 .chatReplayMessageCleared {
 	opacity: 0.5;
 

thrimbletrimmer/src/common/chat.tsx

@@ -180,20 +180,20 @@ export const ChatDisplay: Component<ChatDisplayProps> = (props) => {
 
 	return (
 		<Suspense>
-			<Index each={chatLog().messages}>
+			<For each={chatLog().messages}>
-				{(item: Accessor<ChatMessageData>, index: number) => {
+				{(item: ChatMessageData, index: Accessor<number>) => {
-					const chatCommand = item().message.command;
+					const chatCommand = item.message.command;
 					if (chatCommand === "PRIVMSG") {
 						return (
-							<ChatMessage chatMessage={item()} chatLog={chatLog()} videoTime={props.videoTime} />
+							<ChatMessage chatMessage={item} chatLog={chatLog()} videoTime={props.videoTime} />
 						);
 					} else if (chatCommand === "USERNOTICE") {
-						return <SystemMessage chatMessage={item()} videoTime={props.videoTime} />;
+						return <SystemMessage chatMessage={item} videoTime={props.videoTime} />;
 					} else {
 						return <></>;
 					}
 				}}
-			</Index>
+			</For>
 		</Suspense>
 	);
 };
@@ -378,14 +378,13 @@ const MessageText: Component<MessageTextProps> = (props) => {
 				emoteData.start - messageTextStart,
 				emoteData.end + 1 - messageTextStart,
 			);
-			chatMessageText = chatMessageText.substring(emoteData.end + 1);
+			chatMessageText = chatMessageText.substring(emoteData.end + 1 - messageTextStart);
 			messageTextStart = emoteData.end + 1;
 			messageParts.push(
 				<img
 					src={emoteImageURL}
 					alt={emoteText}
 					title={emoteText}
-					class={styles.chatReplayMessageEmote}
 				/>,
 			);
 		}

thrimbletrimmer/src/common/video.tsx

@@ -259,6 +259,7 @@ export const VideoPlayer: Component<VideoPlayerProps> = (props) => {
 							<media-play-button class="vds-button">
 								<media-icon type="play" class="vds-play-icon" />
 								<media-icon type="pause" class="vds-pause-icon" />
+								<media-icon type="replay" class="vds-replay-icon" />
 							</media-play-button>
 						</media-tooltip-trigger>
 						<media-tooltip-content class="vds-tooltip-content" placement="top">

thrimbletrimmer/src/restreamer/Restreamer.tsx

@@ -146,7 +146,7 @@ const RestreamerWithDefaults: Component<RestreamerDefaultProps> = (props) => {
 	const downloadVideoURL = () => {
 		const streamInfo = streamVideoInfo();
 		const startTime = wubloaderTimeFromDateTime(streamInfo.streamStartTime);
-		const params = new URLSearchParams({ type: "smart", start: encodeURIComponent(startTime) });
+		const params = new URLSearchParams({ type: "smart", start: startTime });
 		if (streamInfo.streamEndTime) {
 			const endTime = wubloaderTimeFromDateTime(streamInfo.streamEndTime);
 			params.append("end", endTime);