fix webcomponent name

Author: jdreetz

js/hang-demo/src/index.html

@@ -27,11 +27,11 @@
 		TODO: There's a bug with Big Buck Bunny causing audio to stutter, so we need to increase the latency to 100ms.
 
 	-->
-	<hang-publish-ui>
-		<hang-watch url="%VITE_RELAY_URL%" path="bbb" muted controls>
+	<hang-watch-ui>
+		<hang-watch url="%VITE_RELAY_URL%" path="bbb" muted>
 			<canvas style="width: 100%; height: auto; border-radius: 4px; margin: 0 auto;"></canvas>
 		</hang-watch>
-	</hang-publish-ui>
+	</hang-watch-ui>
 
 	<h3>Other demos:</h3>
 	<ul>

js/hang-ui/src/Components/watch/element.tsx

@@ -1,34 +1,30 @@
-import type HangWatch from '@kixelated/hang/watch/element';
-import { customElement } from 'solid-element';
-import { createSignal, onMount } from 'solid-js';
-import BufferingIndicator from './BufferingIndicator';
-import styles from './styles.css';
-import WatchControls from './WatchControls';
-import WatchControlsContextProvider from './WatchControlsContextProvider';
+import type HangWatch from "@kixelated/hang/watch/element";
+import { customElement } from "solid-element";
+import { createSignal, onMount } from "solid-js";
+import BufferingIndicator from "./BufferingIndicator";
+import styles from "./styles.css";
+import WatchControls from "./WatchControls";
+import WatchControlsContextProvider from "./WatchControlsContextProvider";
 
-customElement(
-    'hang-publish-ui',
-    {},
-    function PublishControlsWebComponent(_, { element }) {
-        const [hangWatchhEl, setHangWatchEl] = createSignal<HangWatch>();
+customElement("hang-watch-ui", {}, function PublishControlsWebComponent(_, { element }) {
+	const [hangWatchhEl, setHangWatchEl] = createSignal<HangWatch>();
 
-        onMount(() => {
-            const watchEl = element.querySelector('hang-watch');
+	onMount(() => {
+		const watchEl = element.querySelector("hang-watch");
 
-            if (watchEl) {
-                setHangWatchEl(watchEl);
-            }
-        });
+		if (watchEl) {
+			setHangWatchEl(watchEl);
+		}
+	});
 
-        return (
-            <WatchControlsContextProvider hangWatch={hangWatchhEl}>
-                <style>{styles}</style>
-                <div class="watchVideoContainer">
-                    <slot />
-                    <BufferingIndicator />
-                </div>
-                <WatchControls />
-            </WatchControlsContextProvider>
-        );
-    }
-);
+	return (
+		<WatchControlsContextProvider hangWatch={hangWatchhEl}>
+			<style>{styles}</style>
+			<div class="watchVideoContainer">
+				<slot />
+				<BufferingIndicator />
+			</div>
+			<WatchControls />
+		</WatchControlsContextProvider>
+	);
+});