From 8d2400db86fcac5899051c54e69d0968bd34bc89 Mon Sep 17 00:00:00 2001
From: Matthias Van Parijs <matvp91@gmail.com>
Date: Fri, 6 Sep 2024 09:50:22 +0200
Subject: [PATCH] chore: Renamed to ui

---
 packages/hlsjs/index.html                     |  2 +-
 .../hlsjs/lib/Controls/hooks/useSettings.ts   | 13 -----
 packages/hlsjs/lib/Controls/index.tsx         |  1 -
 packages/hlsjs/lib/main.ts                    |  2 +-
 .../components/CheckList.scss                 |  0
 .../{Controls => ui}/components/CheckList.tsx |  0
 .../{Controls => ui}/components/Controls.scss |  6 +-
 .../{Controls => ui}/components/Controls.tsx  | 58 ++++++++++++-------
 .../lib/{Controls => ui}/components/Pane.scss |  0
 .../lib/{Controls => ui}/components/Pane.tsx  |  0
 .../{Controls => ui}/components/Progress.scss |  1 +
 .../{Controls => ui}/components/Progress.tsx  |  0
 .../components/QualitiesPane.tsx              |  0
 packages/hlsjs/lib/ui/components/Root.tsx     | 13 +++++
 .../{Controls => ui}/components/Settings.scss |  0
 .../{Controls => ui}/components/Settings.tsx  | 35 ++++++++++-
 .../components/SettingsPane.scss              |  0
 .../components/SettingsPane.tsx               |  0
 .../{Controls => ui}/components/SqButton.scss |  0
 .../{Controls => ui}/components/SqButton.tsx  |  8 ++-
 .../components/TextAudioPane.scss             |  0
 .../components/TextAudioPane.tsx              |  0
 .../hlsjs/lib/ui/components/TimeStat.scss     |  7 +++
 packages/hlsjs/lib/ui/components/TimeStat.tsx | 45 ++++++++++++++
 .../lib/{Controls => ui}/hooks/useDelta.ts    |  0
 packages/hlsjs/lib/ui/hooks/useHlsState.ts    | 16 +++++
 .../lib/{Controls => ui}/hooks/usePrevious.ts |  0
 packages/hlsjs/lib/ui/hooks/useSettings.ts    | 25 ++++++++
 .../lib/{Controls => ui}/hooks/useVisible.ts  | 25 ++++----
 .../lib/{Controls => ui}/icons/pause.svg      |  0
 .../hlsjs/lib/{Controls => ui}/icons/play.svg |  0
 .../lib/{Controls => ui}/icons/settings.svg   |  0
 .../lib/{Controls => ui}/icons/subtitles.svg  |  0
 .../hlsjs/lib/{Controls => ui}/index.scss     |  1 +
 packages/hlsjs/lib/ui/index.tsx               |  1 +
 packages/hlsjs/src/main.tsx                   |  6 +-
 36 files changed, 211 insertions(+), 54 deletions(-)
 delete mode 100644 packages/hlsjs/lib/Controls/hooks/useSettings.ts
 delete mode 100644 packages/hlsjs/lib/Controls/index.tsx
 rename packages/hlsjs/lib/{Controls => ui}/components/CheckList.scss (100%)
 rename packages/hlsjs/lib/{Controls => ui}/components/CheckList.tsx (100%)
 rename packages/hlsjs/lib/{Controls => ui}/components/Controls.scss (88%)
 rename packages/hlsjs/lib/{Controls => ui}/components/Controls.tsx (59%)
 rename packages/hlsjs/lib/{Controls => ui}/components/Pane.scss (100%)
 rename packages/hlsjs/lib/{Controls => ui}/components/Pane.tsx (100%)
 rename packages/hlsjs/lib/{Controls => ui}/components/Progress.scss (98%)
 rename packages/hlsjs/lib/{Controls => ui}/components/Progress.tsx (100%)
 rename packages/hlsjs/lib/{Controls => ui}/components/QualitiesPane.tsx (100%)
 create mode 100644 packages/hlsjs/lib/ui/components/Root.tsx
 rename packages/hlsjs/lib/{Controls => ui}/components/Settings.scss (100%)
 rename packages/hlsjs/lib/{Controls => ui}/components/Settings.tsx (71%)
 rename packages/hlsjs/lib/{Controls => ui}/components/SettingsPane.scss (100%)
 rename packages/hlsjs/lib/{Controls => ui}/components/SettingsPane.tsx (100%)
 rename packages/hlsjs/lib/{Controls => ui}/components/SqButton.scss (100%)
 rename packages/hlsjs/lib/{Controls => ui}/components/SqButton.tsx (72%)
 rename packages/hlsjs/lib/{Controls => ui}/components/TextAudioPane.scss (100%)
 rename packages/hlsjs/lib/{Controls => ui}/components/TextAudioPane.tsx (100%)
 create mode 100644 packages/hlsjs/lib/ui/components/TimeStat.scss
 create mode 100644 packages/hlsjs/lib/ui/components/TimeStat.tsx
 rename packages/hlsjs/lib/{Controls => ui}/hooks/useDelta.ts (100%)
 create mode 100644 packages/hlsjs/lib/ui/hooks/useHlsState.ts
 rename packages/hlsjs/lib/{Controls => ui}/hooks/usePrevious.ts (100%)
 create mode 100644 packages/hlsjs/lib/ui/hooks/useSettings.ts
 rename packages/hlsjs/lib/{Controls => ui}/hooks/useVisible.ts (78%)
 rename packages/hlsjs/lib/{Controls => ui}/icons/pause.svg (100%)
 rename packages/hlsjs/lib/{Controls => ui}/icons/play.svg (100%)
 rename packages/hlsjs/lib/{Controls => ui}/icons/settings.svg (100%)
 rename packages/hlsjs/lib/{Controls => ui}/icons/subtitles.svg (100%)
 rename packages/hlsjs/lib/{Controls => ui}/index.scss (93%)
 create mode 100644 packages/hlsjs/lib/ui/index.tsx

diff --git a/packages/hlsjs/index.html b/packages/hlsjs/index.html
index 0bc1e4dc..6848fbee 100644
--- a/packages/hlsjs/index.html
+++ b/packages/hlsjs/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>HLSjs wrapper</title>
-    <link rel="stylesheet" href="/lib/Controls/index.scss" />
+    <link rel="stylesheet" href="/lib/ui/index.scss" />
     <link
       href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
       rel="stylesheet"
diff --git a/packages/hlsjs/lib/Controls/hooks/useSettings.ts b/packages/hlsjs/lib/Controls/hooks/useSettings.ts
deleted file mode 100644
index 11a2e285..00000000
--- a/packages/hlsjs/lib/Controls/hooks/useSettings.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { useState } from "react";
-
-export type SettingsMode = "text-audio" | "quality";
-
-export function useSettings() {
-  const [settings, setSettings_] = useState<SettingsMode | null>(null);
-
-  const setSettings = (value: SettingsMode) => {
-    setSettings_((v) => (v !== value ? value : null));
-  };
-
-  return [settings, setSettings] as const;
-}
diff --git a/packages/hlsjs/lib/Controls/index.tsx b/packages/hlsjs/lib/Controls/index.tsx
deleted file mode 100644
index 7e6eec34..00000000
--- a/packages/hlsjs/lib/Controls/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { Controls } from "./components/Controls";
diff --git a/packages/hlsjs/lib/main.ts b/packages/hlsjs/lib/main.ts
index 01349541..a9a29e88 100644
--- a/packages/hlsjs/lib/main.ts
+++ b/packages/hlsjs/lib/main.ts
@@ -4,7 +4,7 @@ import EventEmitter from "eventemitter3";
 import type { Spec } from "immutability-helper";
 import type { Level, MediaPlaylist } from "hls.js";
 
-export { Controls as HlsControls } from "./Controls";
+export { Root as HlsUi } from "./ui";
 
 export type HlsInterstitial = {
   seekAllowed: boolean;
diff --git a/packages/hlsjs/lib/Controls/components/CheckList.scss b/packages/hlsjs/lib/ui/components/CheckList.scss
similarity index 100%
rename from packages/hlsjs/lib/Controls/components/CheckList.scss
rename to packages/hlsjs/lib/ui/components/CheckList.scss
diff --git a/packages/hlsjs/lib/Controls/components/CheckList.tsx b/packages/hlsjs/lib/ui/components/CheckList.tsx
similarity index 100%
rename from packages/hlsjs/lib/Controls/components/CheckList.tsx
rename to packages/hlsjs/lib/ui/components/CheckList.tsx
diff --git a/packages/hlsjs/lib/Controls/components/Controls.scss b/packages/hlsjs/lib/ui/components/Controls.scss
similarity index 88%
rename from packages/hlsjs/lib/Controls/components/Controls.scss
rename to packages/hlsjs/lib/ui/components/Controls.scss
index 8bcfcb33..539a33bf 100644
--- a/packages/hlsjs/lib/Controls/components/Controls.scss
+++ b/packages/hlsjs/lib/ui/components/Controls.scss
@@ -24,7 +24,7 @@
   }
 }
 
-.mix-controls-buttons {
+.mix-controls-bottom {
   display: flex;
   column-gap: 1em;
   height: 4em;
@@ -34,3 +34,7 @@
 .mix-controls-gutter {
   flex-grow: 1;
 }
+
+.mix-controls-progress {
+  display: flex;
+}
diff --git a/packages/hlsjs/lib/Controls/components/Controls.tsx b/packages/hlsjs/lib/ui/components/Controls.tsx
similarity index 59%
rename from packages/hlsjs/lib/Controls/components/Controls.tsx
rename to packages/hlsjs/lib/ui/components/Controls.tsx
index a6baf9be..f27b9f82 100644
--- a/packages/hlsjs/lib/Controls/components/Controls.tsx
+++ b/packages/hlsjs/lib/ui/components/Controls.tsx
@@ -1,4 +1,3 @@
-import { useEffect, useState } from "react";
 import cn from "clsx";
 import { Progress } from "./Progress";
 import PlayIcon from "../icons/play.svg?react";
@@ -7,42 +6,50 @@ import SettingsIcon from "../icons/settings.svg?react";
 import SubtitlesIcon from "../icons/subtitles.svg?react";
 import { useVisible } from "../hooks/useVisible";
 import { Settings } from "./Settings";
-import { useSettings } from "../hooks/useSettings";
 import { SqButton } from "./SqButton";
+import { useSettings } from "../hooks/useSettings";
+import { TimeStat } from "./TimeStat";
 import type { HlsState, HlsFacade } from "../../main";
 
 type ControlsProps = {
   facade: HlsFacade;
+  state: HlsState;
 };
 
-export function Controls({ facade }: ControlsProps) {
-  const [state, setState] = useState<HlsState>(facade.state);
-  const { visible, elementRef } = useVisible();
-  const [settingsMode, setSettingsMode] = useSettings();
+export function Controls({ facade, state }: ControlsProps) {
+  const { visible, elementRef, nudge } = useVisible();
+  const [settingsMode, setSettingsMode] = useSettings({
+    onChange: () => {
+      nudge();
+    },
+  });
 
-  useEffect(() => {
-    const update = () => setState(facade.state);
-    facade.on("*", update);
-    return () => {
-      facade.off("*", update);
-    };
-  }, [facade]);
+  let controlsVisible = visible;
+  if (settingsMode) {
+    controlsVisible = true;
+  }
 
   return (
     <>
       <div
         ref={elementRef}
-        className={cn("mix-controls", visible && "mix-controls--visible")}
+        className={cn(
+          "mix-controls",
+          controlsVisible && "mix-controls--visible",
+        )}
       >
         {showSeekbar(state) ? (
-          <Progress
-            state={state}
-            onSeeked={(time) => {
-              facade.seekTo(time);
-            }}
-          />
+          <div className="mix-controls-progress">
+            <Progress
+              state={state}
+              onSeeked={(time) => {
+                facade.seekTo(time);
+              }}
+            />
+            <TimeStat state={state} />
+          </div>
         ) : null}
-        <div className="mix-controls-buttons">
+        <div className="mix-controls-bottom">
           <SqButton onClick={() => facade.playOrPause()}>
             {state.playheadState === "play" ? <PauseIcon /> : <PlayIcon />}
           </SqButton>
@@ -50,18 +57,25 @@ export function Controls({ facade }: ControlsProps) {
           <SqButton
             onClick={() => setSettingsMode("text-audio")}
             selected={settingsMode === "text-audio"}
+            data-settings-action
           >
             <SubtitlesIcon />
           </SqButton>
           <SqButton
             onClick={() => setSettingsMode("quality")}
             selected={settingsMode === "quality"}
+            data-settings-action
           >
             <SettingsIcon />
           </SqButton>
         </div>
       </div>
-      <Settings facade={facade} state={state} mode={settingsMode} />
+      <Settings
+        facade={facade}
+        state={state}
+        mode={settingsMode}
+        onClose={() => setSettingsMode(null)}
+      />
     </>
   );
 }
diff --git a/packages/hlsjs/lib/Controls/components/Pane.scss b/packages/hlsjs/lib/ui/components/Pane.scss
similarity index 100%
rename from packages/hlsjs/lib/Controls/components/Pane.scss
rename to packages/hlsjs/lib/ui/components/Pane.scss
diff --git a/packages/hlsjs/lib/Controls/components/Pane.tsx b/packages/hlsjs/lib/ui/components/Pane.tsx
similarity index 100%
rename from packages/hlsjs/lib/Controls/components/Pane.tsx
rename to packages/hlsjs/lib/ui/components/Pane.tsx
diff --git a/packages/hlsjs/lib/Controls/components/Progress.scss b/packages/hlsjs/lib/ui/components/Progress.scss
similarity index 98%
rename from packages/hlsjs/lib/Controls/components/Progress.scss
rename to packages/hlsjs/lib/ui/components/Progress.scss
index 5ac67d5d..f6cab7fb 100644
--- a/packages/hlsjs/lib/Controls/components/Progress.scss
+++ b/packages/hlsjs/lib/ui/components/Progress.scss
@@ -2,6 +2,7 @@
   position: relative;
   height: 3em;
   margin: 0 1.5em;
+  width: 100%;
 }
 
 .mix-progress-range {
diff --git a/packages/hlsjs/lib/Controls/components/Progress.tsx b/packages/hlsjs/lib/ui/components/Progress.tsx
similarity index 100%
rename from packages/hlsjs/lib/Controls/components/Progress.tsx
rename to packages/hlsjs/lib/ui/components/Progress.tsx
diff --git a/packages/hlsjs/lib/Controls/components/QualitiesPane.tsx b/packages/hlsjs/lib/ui/components/QualitiesPane.tsx
similarity index 100%
rename from packages/hlsjs/lib/Controls/components/QualitiesPane.tsx
rename to packages/hlsjs/lib/ui/components/QualitiesPane.tsx
diff --git a/packages/hlsjs/lib/ui/components/Root.tsx b/packages/hlsjs/lib/ui/components/Root.tsx
new file mode 100644
index 00000000..663d8a3d
--- /dev/null
+++ b/packages/hlsjs/lib/ui/components/Root.tsx
@@ -0,0 +1,13 @@
+import { Controls } from "./Controls";
+import { useHlsState } from "../hooks/useHlsState";
+import type { HlsFacade } from "../../main";
+
+type RootProps = {
+  facade: HlsFacade;
+};
+
+export function Root({ facade }: RootProps) {
+  const state = useHlsState(facade);
+
+  return <Controls facade={facade} state={state} />;
+}
diff --git a/packages/hlsjs/lib/Controls/components/Settings.scss b/packages/hlsjs/lib/ui/components/Settings.scss
similarity index 100%
rename from packages/hlsjs/lib/Controls/components/Settings.scss
rename to packages/hlsjs/lib/ui/components/Settings.scss
diff --git a/packages/hlsjs/lib/Controls/components/Settings.tsx b/packages/hlsjs/lib/ui/components/Settings.tsx
similarity index 71%
rename from packages/hlsjs/lib/Controls/components/Settings.tsx
rename to packages/hlsjs/lib/ui/components/Settings.tsx
index 1f415509..accc7d87 100644
--- a/packages/hlsjs/lib/Controls/components/Settings.tsx
+++ b/packages/hlsjs/lib/ui/components/Settings.tsx
@@ -11,9 +11,10 @@ type SettingsProps = {
   facade: HlsFacade;
   state: HlsState;
   mode: SettingsMode | null;
+  onClose(): void;
 };
 
-export function Settings({ facade, state, mode }: SettingsProps) {
+export function Settings({ facade, state, mode, onClose }: SettingsProps) {
   const ref = useRef<HTMLDivElement>(null);
   const lastModeRef = useRef<SettingsMode>();
   const modePrev = usePrevious(mode);
@@ -33,6 +34,38 @@ export function Settings({ facade, state, mode }: SettingsProps) {
     }
   }, [modePrev, mode]);
 
+  useEffect(() => {
+    if (mode === null) {
+      return;
+    }
+
+    const onPointerDown = (event: MouseEvent) => {
+      const element = event.target as HTMLElement;
+
+      const SETTINGS_ACTION_ATTR = "data-settings-action";
+      if (
+        element.hasAttribute(SETTINGS_ACTION_ATTR) ||
+        element.closest("button")?.hasAttribute(SETTINGS_ACTION_ATTR)
+      ) {
+        return;
+      }
+
+      const isOver = element
+        .closest(".mix-container")
+        ?.querySelector(".mix-settings")
+        ?.contains(element);
+
+      if (!isOver) {
+        onClose();
+      }
+    };
+
+    window.addEventListener("pointerdown", onPointerDown);
+    return () => {
+      window.removeEventListener("pointerdown", onPointerDown);
+    };
+  }, [mode, onClose]);
+
   useLayoutEffect(() => {
     const element = ref.current;
     if (!element) {
diff --git a/packages/hlsjs/lib/Controls/components/SettingsPane.scss b/packages/hlsjs/lib/ui/components/SettingsPane.scss
similarity index 100%
rename from packages/hlsjs/lib/Controls/components/SettingsPane.scss
rename to packages/hlsjs/lib/ui/components/SettingsPane.scss
diff --git a/packages/hlsjs/lib/Controls/components/SettingsPane.tsx b/packages/hlsjs/lib/ui/components/SettingsPane.tsx
similarity index 100%
rename from packages/hlsjs/lib/Controls/components/SettingsPane.tsx
rename to packages/hlsjs/lib/ui/components/SettingsPane.tsx
diff --git a/packages/hlsjs/lib/Controls/components/SqButton.scss b/packages/hlsjs/lib/ui/components/SqButton.scss
similarity index 100%
rename from packages/hlsjs/lib/Controls/components/SqButton.scss
rename to packages/hlsjs/lib/ui/components/SqButton.scss
diff --git a/packages/hlsjs/lib/Controls/components/SqButton.tsx b/packages/hlsjs/lib/ui/components/SqButton.tsx
similarity index 72%
rename from packages/hlsjs/lib/Controls/components/SqButton.tsx
rename to packages/hlsjs/lib/ui/components/SqButton.tsx
index 59d55ee2..6c773d27 100644
--- a/packages/hlsjs/lib/Controls/components/SqButton.tsx
+++ b/packages/hlsjs/lib/ui/components/SqButton.tsx
@@ -6,11 +6,17 @@ type SqButtonProps = {
   selected?: boolean;
 };
 
-export function SqButton({ children, onClick, selected }: SqButtonProps) {
+export function SqButton({
+  children,
+  onClick,
+  selected,
+  ...rest
+}: SqButtonProps) {
   return (
     <button
       className={cn("mix-sqbutton", selected && "mix-sqbutton--selected")}
       onClick={onClick}
+      {...rest}
     >
       {children}
     </button>
diff --git a/packages/hlsjs/lib/Controls/components/TextAudioPane.scss b/packages/hlsjs/lib/ui/components/TextAudioPane.scss
similarity index 100%
rename from packages/hlsjs/lib/Controls/components/TextAudioPane.scss
rename to packages/hlsjs/lib/ui/components/TextAudioPane.scss
diff --git a/packages/hlsjs/lib/Controls/components/TextAudioPane.tsx b/packages/hlsjs/lib/ui/components/TextAudioPane.tsx
similarity index 100%
rename from packages/hlsjs/lib/Controls/components/TextAudioPane.tsx
rename to packages/hlsjs/lib/ui/components/TextAudioPane.tsx
diff --git a/packages/hlsjs/lib/ui/components/TimeStat.scss b/packages/hlsjs/lib/ui/components/TimeStat.scss
new file mode 100644
index 00000000..0bb29a07
--- /dev/null
+++ b/packages/hlsjs/lib/ui/components/TimeStat.scss
@@ -0,0 +1,7 @@
+.mix-timestat {
+  color: #ffffff;
+  white-space: nowrap;
+  margin-right: 1.5em;
+  display: flex;
+  align-items: center;
+}
diff --git a/packages/hlsjs/lib/ui/components/TimeStat.tsx b/packages/hlsjs/lib/ui/components/TimeStat.tsx
new file mode 100644
index 00000000..71811bf2
--- /dev/null
+++ b/packages/hlsjs/lib/ui/components/TimeStat.tsx
@@ -0,0 +1,45 @@
+import type { HlsState } from "../../main";
+
+type TimeStatProps = {
+  state: HlsState;
+};
+
+export function TimeStat({ state }: TimeStatProps) {
+  const remainingTime =
+    state.seekRange.end - state.time - state.seekRange.start;
+
+  const value = toHMS(remainingTime);
+
+  return value !== null ? (
+    <div className="mix-timestat">{toHMS(remainingTime)}</div>
+  ) : null;
+}
+
+export function toHMS(seconds: number) {
+  if (!Number.isFinite(seconds)) {
+    return null;
+  }
+
+  const pad = (value: number) =>
+    (10 ** 2 + Math.floor(value)).toString().substring(1);
+
+  seconds = Math.floor(seconds);
+  if (seconds < 0) {
+    seconds = 0;
+  }
+
+  let result = "";
+
+  const h = Math.trunc(seconds / 3600) % 24;
+  if (h) {
+    result += `${pad(h)}:`;
+  }
+
+  const m = Math.trunc(seconds / 60) % 60;
+  result += `${pad(m)}:`;
+
+  const s = Math.trunc(seconds % 60);
+  result += `${pad(s)}`;
+
+  return result;
+}
diff --git a/packages/hlsjs/lib/Controls/hooks/useDelta.ts b/packages/hlsjs/lib/ui/hooks/useDelta.ts
similarity index 100%
rename from packages/hlsjs/lib/Controls/hooks/useDelta.ts
rename to packages/hlsjs/lib/ui/hooks/useDelta.ts
diff --git a/packages/hlsjs/lib/ui/hooks/useHlsState.ts b/packages/hlsjs/lib/ui/hooks/useHlsState.ts
new file mode 100644
index 00000000..111d677b
--- /dev/null
+++ b/packages/hlsjs/lib/ui/hooks/useHlsState.ts
@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+import { HlsFacade, HlsState } from "../../main";
+
+export function useHlsState(facade: HlsFacade) {
+  const [state, setState] = useState<HlsState>(facade.state);
+
+  useEffect(() => {
+    const update = () => setState(facade.state);
+    facade.on("*", update);
+    return () => {
+      facade.off("*", update);
+    };
+  }, [facade]);
+
+  return state;
+}
diff --git a/packages/hlsjs/lib/Controls/hooks/usePrevious.ts b/packages/hlsjs/lib/ui/hooks/usePrevious.ts
similarity index 100%
rename from packages/hlsjs/lib/Controls/hooks/usePrevious.ts
rename to packages/hlsjs/lib/ui/hooks/usePrevious.ts
diff --git a/packages/hlsjs/lib/ui/hooks/useSettings.ts b/packages/hlsjs/lib/ui/hooks/useSettings.ts
new file mode 100644
index 00000000..d89d0d3d
--- /dev/null
+++ b/packages/hlsjs/lib/ui/hooks/useSettings.ts
@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+
+export type SettingsMode = "text-audio" | "quality";
+
+type UseSettingsParams = {
+  onChange(): void;
+};
+
+export function useSettings({ onChange }: UseSettingsParams) {
+  const [settings, setSettings_] = useState<SettingsMode | null>(null);
+
+  const setSettings = (value: SettingsMode | null) => {
+    if (value === null) {
+      setSettings_(null);
+    } else {
+      setSettings_((v) => (v !== value ? value : null));
+    }
+  };
+
+  useEffect(() => {
+    onChange();
+  }, [settings]);
+
+  return [settings, setSettings] as const;
+}
diff --git a/packages/hlsjs/lib/Controls/hooks/useVisible.ts b/packages/hlsjs/lib/ui/hooks/useVisible.ts
similarity index 78%
rename from packages/hlsjs/lib/Controls/hooks/useVisible.ts
rename to packages/hlsjs/lib/ui/hooks/useVisible.ts
index f219ce15..5c6f01b1 100644
--- a/packages/hlsjs/lib/Controls/hooks/useVisible.ts
+++ b/packages/hlsjs/lib/ui/hooks/useVisible.ts
@@ -6,6 +6,16 @@ export function useVisible() {
 
   const [visible, setVisible] = useState(false);
 
+  const onPointerMove = () => {
+    clearTimeout(ref.current);
+
+    setVisible(true);
+
+    ref.current = setTimeout(() => {
+      setVisible(false);
+    }, 3000);
+  };
+
   useEffect(() => {
     const container = elementRef.current?.closest(".mix-container") as
       | HTMLDivElement
@@ -15,16 +25,6 @@ export function useVisible() {
       return;
     }
 
-    const onPointerMove = () => {
-      clearTimeout(ref.current);
-
-      setVisible(true);
-
-      ref.current = setTimeout(() => {
-        setVisible(false);
-      }, 3000);
-    };
-
     const onPointerLeave = () => {
       clearTimeout(ref.current);
       setVisible(false);
@@ -39,8 +39,13 @@ export function useVisible() {
     };
   }, []);
 
+  const nudge = () => {
+    onPointerMove();
+  };
+
   return {
     visible,
     elementRef,
+    nudge,
   };
 }
diff --git a/packages/hlsjs/lib/Controls/icons/pause.svg b/packages/hlsjs/lib/ui/icons/pause.svg
similarity index 100%
rename from packages/hlsjs/lib/Controls/icons/pause.svg
rename to packages/hlsjs/lib/ui/icons/pause.svg
diff --git a/packages/hlsjs/lib/Controls/icons/play.svg b/packages/hlsjs/lib/ui/icons/play.svg
similarity index 100%
rename from packages/hlsjs/lib/Controls/icons/play.svg
rename to packages/hlsjs/lib/ui/icons/play.svg
diff --git a/packages/hlsjs/lib/Controls/icons/settings.svg b/packages/hlsjs/lib/ui/icons/settings.svg
similarity index 100%
rename from packages/hlsjs/lib/Controls/icons/settings.svg
rename to packages/hlsjs/lib/ui/icons/settings.svg
diff --git a/packages/hlsjs/lib/Controls/icons/subtitles.svg b/packages/hlsjs/lib/ui/icons/subtitles.svg
similarity index 100%
rename from packages/hlsjs/lib/Controls/icons/subtitles.svg
rename to packages/hlsjs/lib/ui/icons/subtitles.svg
diff --git a/packages/hlsjs/lib/Controls/index.scss b/packages/hlsjs/lib/ui/index.scss
similarity index 93%
rename from packages/hlsjs/lib/Controls/index.scss
rename to packages/hlsjs/lib/ui/index.scss
index 055c97ec..d2583d74 100644
--- a/packages/hlsjs/lib/Controls/index.scss
+++ b/packages/hlsjs/lib/ui/index.scss
@@ -9,6 +9,7 @@ $size-sm: 0.85em;
 @import "./components/Pane.scss";
 @import "./components/TextAudioPane.scss";
 @import "./components/SqButton.scss";
+@import "./components/TimeStat.scss";
 
 .mix-container {
   aspect-ratio: 16 / 9;
diff --git a/packages/hlsjs/lib/ui/index.tsx b/packages/hlsjs/lib/ui/index.tsx
new file mode 100644
index 00000000..1cb06f58
--- /dev/null
+++ b/packages/hlsjs/lib/ui/index.tsx
@@ -0,0 +1 @@
+export { Root } from "./components/Root";
diff --git a/packages/hlsjs/src/main.tsx b/packages/hlsjs/src/main.tsx
index ec4fc131..784dcdd8 100644
--- a/packages/hlsjs/src/main.tsx
+++ b/packages/hlsjs/src/main.tsx
@@ -1,4 +1,4 @@
-import { HlsFacade, HlsControls } from "../lib/main";
+import { HlsFacade, HlsUi } from "../lib/main";
 import Hls from "hls.js";
 import ReactDOM from "react-dom/client";
 
@@ -14,9 +14,9 @@ Object.assign(window, { facade });
 // hls.config.startPosition = 10;
 
 hls.loadSource(
-  "https://streamer.ams3.cdn.digitaloceanspaces.com/package/293e9584-f5b0-4d43-a365-ac1c5e232af8/hls/master.m3u8",
+  "https://streamer.ams3.cdn.digitaloceanspaces.com/package/846ed9ef-b11f-43a4-9d31-0cecc1b7468c/hls/master.m3u8",
 );
 
 const root = ReactDOM.createRoot(document.getElementById("root")!);
 
-root.render(<HlsControls facade={facade} />);
+root.render(<HlsUi facade={facade} />);