Refactoring

src/components/HLSPlayer.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react"
 import Hls from "hls.js"
 import { css } from "@emotion/react"
+import { theme } from "utils/theme"
 
 export function HLSPlayer(props: { source: string }) {
   const ref = useRef<HTMLVideoElement | null>(null)
@@ -89,11 +90,11 @@ export function HLSPlayer(props: { source: string }) {
           <button
             type="button"
             css={css`
-              background: #434c5e;
+              background: ${theme.colors.blue500};
               width: 100px;
               height: 100px;
               pointer-events: all;
-              color: #fff;
+              color: ${theme.colors.white};
               border-radius: 100%;
               border: none;
             `}

src/components/Scrobber/ScrobberTimelineDatePicker.styled.ts → src/components/PillInput/PillInput.styled.ts

@@ -1,17 +1,19 @@
 import styled from "@emotion/styled"
+import { theme } from "utils/theme"
 
 export const SPill = styled.div`
+  all: unset;
+  cursor: pointer;
+
   position: relative;
-  background: #545f75;
+  background: ${theme.colors.blue600};
   height: 2.5em;
   padding: 0rem 3em;
   display: flex;
   align-items: center;
   justify-content: center;
 
-  box-shadow: 0 3.4px 2.7px rgba(0, 0, 0, 0.019),
-    0 8.7px 6.9px rgba(0, 0, 0, 0.027), 0 17.7px 14.2px rgba(0, 0, 0, 0.033),
-    0 36.5px 29.2px rgba(0, 0, 0, 0.041), 0 100px 80px rgba(0, 0, 0, 0.06);
+  box-shadow: ${theme.shadows.md};
 
   border-radius: 1.25em;
   text-align: center;
@@ -23,8 +25,9 @@ export const SPill = styled.div`
     padding: 0 1em;
   }
 
-  &:focus-within {
-    background: #687590;
+  div&:focus-within,
+  button&:hover {
+    background: ${theme.colors.blue700};
   }
 `
 

src/components/PillInput/PillInput.tsx

@@ -0,0 +1 @@
+export { SPillInput as PillInput, SPill as Pill } from "./PillInput.styled"

src/components/Scrobber/Scrobber.styled.ts

@@ -1,4 +1,5 @@
 import styled from "@emotion/styled"
+import { theme } from "utils/theme"
 
 export const SMain = styled.div`
   user-select: none;
@@ -25,19 +26,19 @@ export const STop = styled.div`
   display: flex;
   align-items: center;
   padding: 2em;
-  background: linear-gradient(rgba(10, 10, 10, 1), rgba(10, 10, 10, 0));
+  background: ${theme.gradients.top};
 `
 
 export const SBack = styled.a`
-  color: #d8dee9;
-  background: #434c5e;
+  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: 0px 4px 10px rgba(0, 0, 0, 0.3);
+  box-shadow: ${theme.shadows.sm};
 
   & svg {
     width: 2em;
@@ -47,22 +48,22 @@ export const SBack = styled.a`
 
 export const SInfo = styled.div`
   display: flex;
-  background: #434c5e;
+  background: ${theme.colors.blue500};
   border-radius: 1em;
   padding: 0.75em;
   padding-right: 1em;
   align-items: center;
 
   margin-left: 1.5em;
-  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
+  box-shadow: ${theme.shadows.sm};
 `
 
 export const SName = styled.span`
   flex-grow: 1;
   display: flex;
   align-items: center;
   margin: 0;
-  color: #d8dee9;
+  color: ${theme.colors.lightBlue900};
   text-decoration: none;
   font-size: 1em;
 `
@@ -72,11 +73,11 @@ export const SColor = styled.span`
   height: 1.5em;
   border-radius: 8px;
   margin-right: 0.75em;
-  background: #eb5757;
+  background: ${theme.colors.red500};
 `
 
 export const STimeOffset = styled.div`
-  background: #3b4252;
+  background: ${theme.colors.blue400};
   height: 2.5em;
   border-radius: 1.25em 0 0 1.25em;
   display: flex;
@@ -102,7 +103,7 @@ export const SLive = styled.span`
     height: 8px;
     margin-top: 1px;
 
-    background: #eb5757;
+    background: ${theme.colors.red500};
     border-radius: 100%;
   }
 `
@@ -117,18 +118,16 @@ export const STimeline = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(rgba(10, 10, 10, 0), rgba(10, 10, 10, 1));
+  background: ${theme.gradients.bottom};
 `
 
 export const SCenter = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #d8dee9;
-  background: #434c5e;
-  box-shadow: 0 3.4px 2.7px rgba(0, 0, 0, 0.019),
-    0 8.7px 6.9px rgba(0, 0, 0, 0.027), 0 17.7px 14.2px rgba(0, 0, 0, 0.033),
-    0 36.5px 29.2px rgba(0, 0, 0, 0.041), 0 100px 80px rgba(0, 0, 0, 0.06);
+  color: ${theme.colors.lightBlue900};
+  background: ${theme.colors.blue500};
+  box-shadow: ${theme.shadows.md};
 
   padding: 0.8em;
   border-radius: 2.25em;
@@ -141,7 +140,7 @@ export const SCenter = styled.div`
     border: 1.25em solid transparent;
     border-left-width: 0.8em;
     border-right-width: 0.8em;
-    border-top-color: #434c5e;
+    border-top-color: ${theme.colors.blue500};
     border-bottom-width: 0;
     position: absolute;
     top: 100%;

src/components/Scrobber/ScrobberSlider.utils.ts

@@ -1,5 +1,5 @@
 import moment from "moment"
-import { MutableRefObject, useCallback, useEffect, useRef } from "react"
+import { useCallback, useEffect, useRef } from "react"
 
 const SECONDS_PER_DAY = 24 * 60 * 60
 const LINE_HEIGHT = 10
@@ -41,7 +41,7 @@ export function drawCanvas(
     ctx.stroke()
   }
 
-  // hide progress bar when necessary [-inf, 0]
+  // hide progress bar when necessary [-inf, 0] in seconds
   const drawDayBoundedLine = (shift: number) => {
     const { width, height } = canvas.getBoundingClientRect()
     const viewOffset = width / 2
@@ -52,7 +52,10 @@ export function drawCanvas(
     const startOfDay = shiftedNow.clone().startOf("day")
     const endOfDay = shiftedNow.clone().endOf("day")
 
+    // (now - startOfDay) in seconds
     const startDayX = Math.min(options.maxAge, now.diff(startOfDay, "second"))
+
+    // (now - endOfDay) in seconds
     const endDayX = Math.max(0, now.diff(endOfDay, "second"))
 
     // invert direction, as we want to line to act as a timeline

src/components/Scrobber/ScrobberTimeline.styled.ts

@@ -1,36 +1,5 @@
 import styled from "@emotion/styled"
-
-export const STimeOffset = styled.div`
-  background: #3b4252;
-  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: #eb5757;
-    border-radius: 100%;
-  }
-`
+import { theme } from "utils/theme"
 
 export const STimeline = styled.div`
   position: absolute;
@@ -42,18 +11,16 @@ export const STimeline = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(rgba(10, 10, 10, 0), rgba(10, 10, 10, 1));
+  background: ${theme.gradients.bottom};
 `
 
 export const SCenter = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #d8dee9;
-  background: #434c5e;
-  box-shadow: 0 3.4px 2.7px rgba(0, 0, 0, 0.019),
-    0 8.7px 6.9px rgba(0, 0, 0, 0.027), 0 17.7px 14.2px rgba(0, 0, 0, 0.033),
-    0 36.5px 29.2px rgba(0, 0, 0, 0.041), 0 100px 80px rgba(0, 0, 0, 0.06);
+  color: ${theme.colors.lightBlue900};
+  background: ${theme.colors.blue500};
+  box-shadow: ${theme.shadows.md};
 
   padding: 0.8em;
   border-radius: 2.25em;
@@ -66,7 +33,7 @@ export const SCenter = styled.div`
     border: 1.25em solid transparent;
     border-left-width: 0.8em;
     border-right-width: 0.8em;
-    border-top-color: #434c5e;
+    border-top-color: ${theme.colors.blue500};
     border-bottom-width: 0;
     position: absolute;
     top: 100%;

src/components/Scrobber/ScrobberTimeline.tsx

@@ -1,15 +1,10 @@
 import { useContext, useState } from "react"
 import { ScrobberSlider } from "components/Scrobber/ScrobberSlider"
-import { formatTime, vibrateDecorator } from "./Scrobber.utils"
+import { vibrateDecorator } from "./Scrobber.utils"
 import { ConfigContext } from "shared/config"
-import { ScrobberTimelineTimePicker } from "components/Scrobber/ScrobberTimelineTimePicker"
-import { ScrobberTimelineDatePicker } from "components/Scrobber/ScrobberTimelineDatePicker"
-import {
-  SCenter,
-  SLive,
-  STimeline,
-  STimeOffset,
-} from "./ScrobberTimeline.styled"
+import { ScrobberTimelineShift } from "components/Scrobber/ScrobberTimelineShift"
+import { SCenter, STimeline } from "./ScrobberTimeline.styled"
+import { ScrobberTimelineRange } from "./ScrobberTimelineRange"
 
 export function ScrobberTimeline(props: {
   color: string
@@ -18,41 +13,32 @@ export function ScrobberTimeline(props: {
   onMove: () => void
 }) {
   const config = useContext(ConfigContext)
+
   const [scrollShift, setScrollShift] = useState<number | null>(null)
-  const onShiftCommit = vibrateDecorator((shift: number) => {
+  const onShiftChange = vibrateDecorator((shift: number) => {
     setScrollShift(null)
     props.onChange(Math.max(0, Math.min(config.maxAge * 1000, shift)))
   })
 
-  const contentShift = scrollShift != null ? scrollShift : props.value
-
   return (
     <>
       <STimeline>
         <SCenter>
-          <div css={{ display: "flex" }}>
-            <STimeOffset onClick={() => onShiftCommit(0)}>
-              {!contentShift ? <SLive>Živě</SLive> : formatTime(-contentShift)}
-            </STimeOffset>
-
-            <ScrobberTimelineTimePicker
-              value={contentShift}
-              onChange={onShiftCommit}
-              css={{ marginLeft: "-1.25em", padding: "0rem 3em" }}
-            />
-          </div>
-          <ScrobberTimelineDatePicker
-            value={contentShift}
-            onChange={onShiftCommit}
+          <ScrobberTimelineShift
+            value={props.value}
+            intentValue={scrollShift}
+            onChange={onShiftChange}
           />
+
+          <ScrobberTimelineRange />
         </SCenter>
       </STimeline>
       <ScrobberSlider
         onScroll={(value) => {
           setScrollShift(value)
           props.onMove()
         }}
-        onScrollEnd={onShiftCommit}
+        onScrollEnd={onShiftChange}
         value={props.value}
         color={props.color}
       />