From c54bd3c63f502be3211feddfadbc735836f25a95 Mon Sep 17 00:00:00 2001
From: ElementalAlchemist <ElementAlchemist7@gmail.com>
Date: Sun, 10 Nov 2024 00:19:59 -0600
Subject: [PATCH] Add errors and keyboard shortcuts to restreamer

---
 .../src/restreamer/Restreamer.module.scss     | 21 ++++++++++++++++
 thrimbletrimmer/src/restreamer/Restreamer.tsx | 24 +++++++++++++++++--
 2 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 thrimbletrimmer/src/restreamer/Restreamer.module.scss

diff --git a/thrimbletrimmer/src/restreamer/Restreamer.module.scss b/thrimbletrimmer/src/restreamer/Restreamer.module.scss
new file mode 100644
index 0000000..469d082
--- /dev/null
+++ b/thrimbletrimmer/src/restreamer/Restreamer.module.scss
@@ -0,0 +1,21 @@
+.errorList {
+	color: #f33;
+	display: flex;
+	flex-direction: column;
+}
+
+.errorList > div {
+	border-bottom: 1px solid #f33;
+	background: #300;
+	padding: 4px;
+}
+
+.errorRemoveLink {
+	float: right;
+}
+
+.keyboardShortcutHelp {
+	position: absolute;
+	top: 0;
+	right: 0;
+}
\ No newline at end of file
diff --git a/thrimbletrimmer/src/restreamer/Restreamer.tsx b/thrimbletrimmer/src/restreamer/Restreamer.tsx
index fadc911..954ffc2 100644
--- a/thrimbletrimmer/src/restreamer/Restreamer.tsx
+++ b/thrimbletrimmer/src/restreamer/Restreamer.tsx
@@ -1,7 +1,27 @@
-import { Component } from "solid-js";
+import { Accessor, Component, createSignal, For } from "solid-js";
+import styles from "./Restreamer.module.scss";
+import { KeyboardShortcuts } from "../common/videoKeyboardShortcuts";
 
 const Restreamer: Component = () => {
-	return <></>;
+	const [pageErrors, setPageErrors] = createSignal<string[]>([]);
+
+	return (
+		<>
+			<ul class={styles.errorList}>
+				<For each={pageErrors()}>
+					{(error: string, index: Accessor<number>) => (
+						<li>
+							{error}
+							<a class={styles.errorRemoveLink}>[X]</a>
+						</li>
+					)}
+				</For>
+			</ul>
+			<div class={styles.keyboardShortcutHelp}>
+				<KeyboardShortcuts includeEditorShortcuts={false} />
+			</div>
+		</>
+	);
 };
 
 export default Restreamer;