feat: Quality picker in player page

Author: matvp91

packages/app/src/components/PlayerControls.tsx

@@ -10,12 +10,15 @@ import type { ReactNode, RefObject } from "react";
 export function PlayerControls() {
   return (
     <div className="flex flex-col gap-4 overflow-hidden">
-      <div className="flex justify-center">
+      <div className="flex justify-center items-center">
         <PlayButton />
+        <div className="ml-auto max-w-64 w-full">
+          <Qualities />
+        </div>
       </div>
       <div className="p-3 rounded-md bg-default-100">
-        <Time />
         <Seekbar />
+        <Time />
       </div>
       <Tracks />
     </div>
@@ -78,31 +81,37 @@ function Seekbar() {
   }
 
   return (
-    <div {...seekbar.rootProps} className="w-full relative cursor-pointer">
+    <div {...seekbar.rootProps} className="w-full relative cursor-pointer py-2">
       <Tooltip
         x={seekbar.x}
         seekbarRef={seekbar.rootProps.ref}
         visible={seekbar.active}
       >
         {hms(seekbar.value)}
       </Tooltip>
-      <div className="relative flex items-center">
-        <div className="h-2 bg-default-200 w-full" />
+      <div className="relative flex items-center h-1">
+        <div className="h-1 bg-default-200 w-full" />
         <div
           className={cn(
-            "h-2 absolute left-0 right-0 bg-default-300 origin-left opacity-0 transition-opacity",
+            "h-1 absolute left-0 right-0 bg-default-300 origin-left opacity-0 transition-opacity",
             seekbar.hover && "opacity-100",
           )}
           style={{
             transform: `scaleX(${seekbar.x})`,
           }}
         />
         <div
-          className={cn("h-2 absolute left-0 right-0 bg-black origin-left")}
+          className={cn("h-1 absolute left-0 right-0 bg-black origin-left")}
           style={{
             transform: `scaleX(${percentage})`,
           }}
         />
+        <div
+          className="h-4 absolute w-[3px] bg-black rounded-full -translate-x-1/2 outline-default-100 outline outline-2 z-10"
+          style={{
+            left: `${percentage * 100}%`,
+          }}
+        />
       </div>
       <CuePoints />
     </div>
@@ -137,7 +146,7 @@ function Tooltip({
     <div
       ref={ref}
       className={cn(
-        "pointer-events-none absolute h-6 -top-8 -translate-x-1/2 opacity-0 transition-opacity text-xs text-white bg-black px-1 flex items-center rounded-md",
+        "pointer-events-none absolute h-6 -top-6 -translate-x-1/2 opacity-0 transition-opacity text-xs text-white bg-black px-1 flex items-center rounded-md",
         visible && "opacity-100",
       )}
       style={{
@@ -155,7 +164,7 @@ function CuePoints() {
   const seekableStart = usePlayerSelector((player) => player.seekableStart);
 
   return (
-    <div className="relative h-4 bg-gray-100 rounded-lg">
+    <div className="relative h-4">
       {cuePoints.map((cuePoint) => {
         return (
           <div
@@ -227,6 +236,29 @@ function Tracks() {
   );
 }
 
+function Qualities() {
+  const qualities = usePlayerSelector((player) => player.qualities);
+  const autoQuality = usePlayerSelector((player) => player.autoQuality);
+  const setQuality = usePlayerSelector((player) => player.setQuality);
+
+  return (
+    <Selection
+      items={[
+        ...qualities,
+        {
+          height: null,
+          active: autoQuality,
+        },
+      ]}
+      label="Quality"
+      getActive={(item) => item.active}
+      getKey={(item) => item.height}
+      getLabel={(item) => item.height?.toString() ?? "Auto"}
+      onChange={(item) => setQuality(item.height)}
+    />
+  );
+}
+
 function hms(seconds: number) {
   return (
     new Date(seconds * 1000).toUTCString().match(/(\d\d:\d\d:\d\d)/)?.[0] ??