feat: new VideoPlayer component

fix: util function naming

dist/assets/index-M_zpHYxC.js

@@ -45694,7 +45694,7 @@ const Jr = ({
                   !r &&
                     x.jsx("div", {
                       className:
-                        "h-full my-auto w-[1px] bg-gradient-to-t from-transparent via-white/10 to-transparent mr-2",
+                        "h-full my-auto w-px bg-gradient-to-t from-transparent via-white/10 to-transparent mr-2",
                     }),
                   x.jsx(
                     $e.div,

package.json

@@ -13,6 +13,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@floating-ui/react-dom": "^2.1.1",
     "@headlessui/react": "^2.0.4",
     "@heroicons/react": "^2.1.3",
     "@million/lint": "1.0.0-rc.26",
@@ -24,6 +25,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^15.0.0",
+    "react-player": "^2.16.0",
     "react-router-dom": "^6.23.1",
     "styled-components": "^6.1.11",
     "swiper": "^11.1.4",

src/App.tsx

@@ -16,6 +16,7 @@ import "./index.css";
 import SettingsPage from "./lib/pages/SettingsPage";
 import axios from "axios";
 import { APP_API_PATHS } from "./config/config";
+import VideoPlayerPage from "./lib/pages/VideoPlayerPage";
 
 const App = () => {
   const router = createBrowserRouter([
@@ -44,6 +45,10 @@ const App = () => {
           path: "library",
           element: <LibraryPage />,
         },
+        {
+          path: "video",
+          element: <VideoPlayerPage />,
+        },
         {
           path: "movie/:id",
           element: <MovieInfoPage />,

src/index.css

@@ -18,6 +18,13 @@
   float: left;
 }
 
+input[type="range"]::-webkit-slider-thumb {
+  appearance: none;
+  width: 1px;
+  height: 1px;
+  background-color: black;
+}
+
 @layer base {
   body {
     @apply bg-neutral-950 text-white overflow-hidden cursor-default;

src/lib/components/actions/IconButton.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import HeroIcon from "../ui/HeroIcon";
 import { IconName } from "../../types";
+import { forwardRef } from "react";
 
 const iconButton = cva(
   [
@@ -31,15 +32,29 @@ const iconButton = cva(
         ],
       },
       size: {
-        small: ["text-sm", "h-8", "!w-8", "stroke-[1.5px]"],
+        small: ["text-sm", "h-8", "!w-8", "stroke-[0.2px]"],
         large: ["text-lg", "h-12", "!w-12", "stroke-[1px]"],
         extraLarge: ["text-xl", "h-16", "!w-16", "stroke-[1px]"],
       },
       rounded: {
-        true: ["rounded-full"],
-        false: ["rounded-xl"],
+        true: "rounded-full",
+      },
+      active: {
+        true: "text-emerald-400",
       },
     },
+    compoundVariants: [
+      {
+        size: "large",
+        rounded: false,
+        className: "rounded-xl",
+      },
+      {
+        size: "small",
+        rounded: false,
+        className: "rounded-lg",
+      },
+    ],
     defaultVariants: {
       variant: "primary",
       size: "small",
@@ -53,35 +68,45 @@ export interface IconButtonProps
   icon?: IconName;
   iconType?: "solid" | "outline";
   rounded?: boolean;
+  active?: boolean;
 }
 
-const IconButton: React.FC<IconButtonProps> = ({
-  className,
-  variant,
-  title,
-  size = "small",
-  icon,
-  iconType = "outline",
-  rounded = false,
-  ...props
-}) => (
-  <button
-    title={title}
-    className={iconButton({ variant, size, rounded, className })}
-    {...props}
-  >
-    {icon ? (
-      <div
-        className={`flex justify-center items-center aspect-square overflow-hidden p-1 ${
-          size === "small" ? "w-6 h-6" : "w-8 h-8"
-        }`}
-      >
-        <HeroIcon iconName={icon} type={iconType} />
-      </div>
-    ) : (
-      ""
-    )}
-  </button>
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  (
+    {
+      className,
+      variant,
+      title,
+      size = "small",
+      icon,
+      iconType = "outline",
+      rounded = false,
+      disabled = false,
+      active = false,
+      ...props
+    },
+    ref
+  ) => (
+    <button
+      title={title}
+      className={iconButton({ variant, size, rounded, active, className })}
+      disabled={disabled}
+      ref={ref}
+      {...props}
+    >
+      {icon ? (
+        <div
+          className={`flex justify-center items-center aspect-square overflow-hidden p-1 ${
+            size === "small" ? "w-6 h-6" : "w-8 h-8"
+          }`}
+        >
+          <HeroIcon iconName={icon} type={iconType} />
+        </div>
+      ) : (
+        ""
+      )}
+    </button>
+  )
 );
 
 export default IconButton;

src/lib/components/actions/MenuItemButton.tsx

@@ -0,0 +1,13 @@
+
+const MenuItemButton = ({ children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
+  return (
+    <button
+      className="group flex w-full items-center gap-2 hover:bg-white/10 rounded-xl px-3 py-1.5"
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default MenuItemButton;