thrimbletrimmer/src/common/chat.module.scss

@@ -35,6 +35,12 @@
 	}
 }
 
+.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>
-			<For each={chatLog().messages}>
-				{(item: ChatMessageData, index: Accessor<number>) => {
-					const chatCommand = item.message.command;
+			<Index each={chatLog().messages}>
+				{(item: Accessor<ChatMessageData>, index: number) => {
+					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 <></>;
 					}
 				}}
-			</For>
+			</Index>
 		</Suspense>
 	);
 };
@@ -378,13 +378,14 @@ const MessageText: Component<MessageTextProps> = (props) => {
 				emoteData.start - messageTextStart,
 				emoteData.end + 1 - messageTextStart,
 			);
-			chatMessageText = chatMessageText.substring(emoteData.end + 1 - messageTextStart);
+			chatMessageText = chatMessageText.substring(emoteData.end + 1);
 			messageTextStart = emoteData.end + 1;
 			messageParts.push(
 				<img
 					src={emoteImageURL}
 					alt={emoteText}
 					title={emoteText}
+					class={styles.chatReplayMessageEmote}
 				/>,
 			);
 		}

thrimbletrimmer/src/common/video.tsx

@@ -259,7 +259,6 @@ 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: startTime });
+		const params = new URLSearchParams({ type: "smart", start: encodeURIComponent(startTime) });
 		if (streamInfo.streamEndTime) {
 			const endTime = wubloaderTimeFromDateTime(streamInfo.streamEndTime);
 			params.append("end", endTime);