Cleanup, rename hiearchy

package.json

@@ -26,7 +26,7 @@
     "@emotion/styled": "^11.1.5",
     "@material-ui/core": "^5.0.0-alpha.21",
     "@material-ui/lab": "^5.0.0-alpha.21",
-    "@use-gesture/react": "^10.2.4",
+    "@use-gesture/react": "^10.2.23",
     "chokidar": "^3.5.1",
     "date-fns": "^2.27.0",
     "fluent-ffmpeg": "^2.1.2",

src/components/Controls/Controls.styled.ts

@@ -0,0 +1,152 @@
+import styled from "@emotion/styled"
+import { theme } from "utils/theme"
+
+export const SMain = styled.div`
+  user-select: none;
+  transition: opacity 0.3s;
+
+  position: absolute;
+  top: 0;
+  top: env(safe-area-inset-top);
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  @media (max-width: 768px) {
+    font-size: 12px;
+  }
+`
+
+export const STop = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+
+  display: flex;
+  align-items: center;
+  padding: 2em;
+  background: ${theme.gradients.top};
+`
+
+export const SBack = styled.a`
+  color: ${theme.colors.lightBlue900};
+  background: ${theme.colors.blue500};
+  width: 4em;
+  height: 4em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  box-shadow: ${theme.shadows.sm};
+
+  & svg {
+    width: 2em;
+    height: 2em;
+  }
+`
+
+export const SInfo = styled.div`
+  display: flex;
+  background: ${theme.colors.blue500};
+  border-radius: 1em;
+  padding: 0.75em;
+  padding-right: 1em;
+  align-items: center;
+
+  margin-left: 1.5em;
+  box-shadow: ${theme.shadows.sm};
+`
+
+export const SName = styled.span`
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  margin: 0;
+  color: ${theme.colors.lightBlue900};
+  text-decoration: none;
+  font-size: 1em;
+`
+
+export const SColor = styled.span`
+  width: 1.5em;
+  height: 1.5em;
+  border-radius: 8px;
+  margin-right: 0.75em;
+  background: ${theme.colors.red500};
+`
+
+export const STimeOffset = styled.div`
+  background: ${theme.colors.blue400};
+  height: 2.5em;
+  border-radius: 1.25em 0 0 1.25em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 calc(1em + 1.25em) 0 1em;
+  text-align: center;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+`
+
+export const SLive = styled.span`
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:before {
+    content: "";
+    display: block;
+    margin-right: 0.75em;
+    width: 8px;
+    height: 8px;
+    margin-top: 1px;
+
+    background: ${theme.colors.red500};
+    border-radius: 100%;
+  }
+`
+
+export const STimeline = styled.div`
+  position: absolute;
+  padding-bottom: calc(5em / 2 + 5px);
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: ${theme.gradients.bottom};
+`
+
+export const SCenter = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${theme.colors.lightBlue900};
+  background: ${theme.colors.blue500};
+  box-shadow: ${theme.shadows.md};
+
+  padding: 0.8em;
+  border-radius: 2.25em;
+  margin-bottom: 1.25em;
+
+  position: relative;
+
+  &::after {
+    content: "";
+    border: 1.25em solid transparent;
+    border-left-width: 0.8em;
+    border-right-width: 0.8em;
+    border-top-color: ${theme.colors.blue500};
+    border-bottom-width: 0;
+    position: absolute;
+    top: 100%;
+  }
+
+  & > *:not(:last-child) {
+    margin-right: 1em;
+  }
+`

src/components/Controls/Controls.tsx

@@ -0,0 +1,66 @@
+import Link from "next/link"
+import { SBack, SColor, SInfo, SMain, SName, STop } from "./Controls.styled"
+import { useVisibleTimer } from "./Controls.utils"
+import { Scrobber } from "../Scrobber/Scrobber"
+
+function ControlsHeader(props: {
+  stream: {
+    key: string
+    name: string
+    color: string
+  }
+}) {
+  return (
+    <STop>
+      <Link href="/">
+        <SBack>
+          <svg
+            viewBox="0 0 29 21"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M25 9.17424V11.8258H9.09091L16.3826 19.1174L14.5 21L4 10.5L14.5 0L16.3826 1.88258L9.09091 9.17424H25Z"
+              fill="currentColor"
+            />
+          </svg>
+        </SBack>
+      </Link>
+      <SInfo>
+        <SColor css={{ backgroundColor: props.stream?.color }} />
+        <SName>{props.stream?.name}</SName>
+      </SInfo>
+    </STop>
+  )
+}
+
+export function Controls(props: {
+  onChange: (shift: number) => void
+  value: number
+  stream: {
+    key: string
+    name: string
+    color: string
+  }
+}) {
+  const { visible, show } = useVisibleTimer(5 * 99999 * 1000)
+
+  return (
+    <SMain
+      css={{ opacity: visible ? 1 : 0 }}
+      onTouchStart={() => show.current()}
+      onMouseMove={() => show.current()}
+    >
+      <ControlsHeader stream={props.stream} />
+      <Scrobber
+        value={props.value}
+        onChange={(shift) => {
+          props.onChange(shift)
+          show.current()
+        }}
+        onMove={() => show.current()}
+        color={props.stream.color}
+      />
+    </SMain>
+  )
+}

src/components/Controls/Controls.utils.ts

@@ -0,0 +1,49 @@
+import { useRef, useState, useEffect } from "react"
+
+const events = [
+  "mousemove",
+  "mousedown",
+  "resize",
+  "keydown",
+  "touchstart",
+  "wheel",
+]
+
+export const useVisibleTimer = (delay = 1000) => {
+  const [visible, setVisible] = useState(true)
+  const show = useRef<() => void>(() => setVisible(true))
+  const hide = useRef<() => void>(() => setVisible(false))
+
+  useEffect(() => {
+    let timer: number
+
+    hide.current = () => {
+      window.clearTimeout(timer)
+      setVisible(false)
+    }
+
+    show.current = () => {
+      window.clearTimeout(timer)
+      setVisible(true)
+      timer = window.setTimeout(hide.current, delay)
+    }
+
+    document.addEventListener("visibilitychange", show.current)
+    for (const eventName of events) {
+      window.addEventListener(eventName, show.current)
+    }
+
+    show.current()
+
+    return () => {
+      document.removeEventListener("visibilitychange", show.current)
+      for (const eventName of events) {
+        window.removeEventListener(eventName, show.current)
+      }
+
+      window.clearTimeout(timer)
+    }
+  }, [delay])
+
+  return { visible, show, hide }
+}