feat: Added regions for break replacement (#159)

* Replace with interstitials

* Removed interstitial logic in player

* Migrated to hero ui

* fix: Lint error

* Linting error

Author: matvp91

bun.lockb

@@ -22,8 +22,8 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^4.6.0",
-    "@nextui-org/react": "^2.4.8",
-    "@nextui-org/use-infinite-scroll": "^2.1.5",
+    "@heroui/react": "2.6.14",
+    "@heroui/use-infinite-scroll": "2.2.3",
     "@superstreamer/api": "workspace:*",
     "@superstreamer/player": "workspace:*",
     "@tanstack/react-router": "^1.78.3",

packages/app/package.json

@@ -1,4 +1,4 @@
-import { Switch } from "@nextui-org/react";
+import { Switch } from "@heroui/react";
 import { useRouter } from "@tanstack/react-router";
 import { useEffect, useState } from "react";
 
@@ -34,7 +34,7 @@ export function AutoRefresh({
   }, [enabled, interval, time]);
 
   return (
-    <div className="flex items-center">
+    <div className="flex items-center gap-2">
       <Switch
         size="sm"
         isSelected={enabled}

packages/app/src/components/AutoRefresh.tsx

@@ -1,4 +1,4 @@
-import { Modal, ModalBody, ModalContent } from "@nextui-org/react";
+import { Modal, ModalBody, ModalContent } from "@heroui/react";
 import useSWR from "swr";
 import { DataView } from "./DataView";
 import { useAuth } from "../auth";

packages/app/src/components/FilePreview.tsx

@@ -1,9 +1,9 @@
-import { Button, Input } from "@nextui-org/react";
+import { Button, Input } from "@heroui/react";
 import cn from "clsx";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { Controller } from "react-hook-form";
-import type { InputProps } from "@nextui-org/input";
+import type { InputProps } from "@heroui/input";
 import type { Control } from "react-hook-form";
 
 interface FormProps<T extends FieldRecord> {

packages/app/src/components/Form.tsx

@@ -1,16 +1,16 @@
-import { Pagination, Spinner } from "@nextui-org/react";
-import { Select, SelectItem } from "@nextui-org/select";
+import { Pagination, Spinner } from "@heroui/react";
+import { Select, SelectItem } from "@heroui/select";
 import {
   Table,
   TableBody,
   TableCell,
   TableColumn,
   TableHeader,
   TableRow,
-} from "@nextui-org/table";
-import { useInfiniteScroll } from "@nextui-org/use-infinite-scroll";
+} from "@heroui/table";
+import { useInfiniteScroll } from "@heroui/use-infinite-scroll";
 import { useState } from "react";
-import type { SortDescriptor, TableProps } from "@nextui-org/table";
+import type { SortDescriptor, TableProps } from "@heroui/table";
 import type { ReactNode } from "@tanstack/react-router";
 
 export interface Column {
@@ -51,7 +51,7 @@ export function FullTable<T, F extends Filter>({
   totalPages,
 }: FullTableProps<T, F>) {
   const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
-    column: filter?.sortKey,
+    column: filter?.sortKey ?? "",
     direction: filter?.sortDir === "asc" ? "ascending" : "descending",
   });
 

packages/app/src/components/FullTable.tsx

@@ -1,4 +1,4 @@
-import { Card, CardBody, CardHeader } from "@nextui-org/react";
+import { Card, CardBody, CardHeader } from "@heroui/react";
 import { DataView } from "./DataView";
 import { Format } from "./Format";
 import { Logs } from "./Logs";

packages/app/src/components/JobPage.tsx

@@ -6,6 +6,9 @@ interface LogsProps {
 }
 
 export function Logs({ lines }: LogsProps) {
+  if (!lines.length) {
+    return <div className="text-xs">No logs available</div>;
+  }
   return (
     <ul className="flex flex-col gap-2">
       {lines.map((line, index) => (

packages/app/src/components/Logs.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@nextui-org/react";
+import { Button } from "@heroui/react";
 import { Events } from "@superstreamer/player";
 import cn from "clsx";
 import { useEffect, useRef, useState } from "react";
@@ -41,7 +41,7 @@ function PlayButton() {
 function Seekbar() {
   const { player } = usePlayer();
   const seekableStart = usePlayerSelector((player) => player.seekableStart);
-  const time = usePlayerSelector((player) => player.time);
+  const currentTime = usePlayerSelector((player) => player.currentTime);
   const duration = usePlayerSelector((player) => player.duration);
   const seekTo = usePlayerSelector((player) => player.seekTo);
 
@@ -51,9 +51,8 @@ function Seekbar() {
     min: seekableStart,
     max: duration,
     onSeeked: (time) => {
-      if (seekTo(time)) {
-        setLastSeekTime(time);
-      }
+      seekTo(time);
+      setLastSeekTime(time);
     },
   });
 
@@ -62,19 +61,22 @@ function Seekbar() {
       return;
     }
 
-    const onSeekingChange = () => {
-      if (!player.seeking) {
+    const onTimeChange = () => {
+      if (player.seeking || lastSeekTime == null) {
+        return;
+      }
+      if (player.currentTime > lastSeekTime) {
         setLastSeekTime(null);
       }
     };
 
-    player.on(Events.SEEKING_CHANGE, onSeekingChange);
+    player.on(Events.TIME_CHANGE, onTimeChange);
     return () => {
-      player.off(Events.SEEKING_CHANGE, onSeekingChange);
+      player.off(Events.TIME_CHANGE, onTimeChange);
     };
-  }, [player]);
+  }, [player, lastSeekTime]);
 
-  const fakeTime = lastSeekTime ?? time;
+  const fakeTime = lastSeekTime ?? currentTime;
   let percentage = getPercentage(fakeTime, duration, seekableStart);
   if (seekbar.seeking) {
     percentage = seekbar.x;
@@ -166,16 +168,31 @@ function CuePoints() {
   return (
     <div className="relative h-4">
       {cuePoints.map((cuePoint) => {
+        const left =
+          (cuePoint.time - seekableStart) / (duration - seekableStart);
+
+        let width = 0;
+        if (cuePoint.duration) {
+          const right =
+            (cuePoint.time + cuePoint.duration - seekableStart) /
+            (duration - seekableStart);
+          width = right - left;
+        }
+
         return (
           <div
-            key={cuePoint}
+            key={cuePoint.time}
             style={{
-              left: `${((cuePoint - seekableStart) / (duration - seekableStart)) * 100}%`,
+              left: `${((cuePoint.time - seekableStart) / (duration - seekableStart)) * 100}%`,
+              width: width ? `${width * 100}%` : undefined,
             }}
-            className="absolute -translate-x-1/2 flex items-center flex-col"
+            className="absolute"
           >
-            <div className="w-[2px] h-2 bg-yellow-500" />
-            <div className="w-2 h-2 rounded-full bg-yellow-500" />
+            <div className="absolute left-0 -translate-x-1/2 flex items-center flex-col">
+              <div className="w-[2px] h-2 bg-yellow-500" />
+              <div className="w-2 h-2 rounded-full bg-yellow-500" />
+            </div>
+            <div className="absolute w-full h-[2px] top-3 bg-yellow-500" />
           </div>
         );
       })}
@@ -184,14 +201,14 @@ function CuePoints() {
 }
 
 function Time() {
-  const time = usePlayerSelector((player) => player.time);
+  const currentTime = usePlayerSelector((player) => player.currentTime);
   const seekableStart = usePlayerSelector((player) => player.seekableStart);
   const duration = usePlayerSelector((player) => player.duration);
   const live = usePlayerSelector((player) => player.live);
 
   return (
     <div className="flex text-sm mb-2">
-      {hms(time)}
+      {hms(currentTime)}
       <div className="grow" />
       {live ? `${hms(seekableStart)} - ${hms(duration)}` : `${hms(duration)}`}
     </div>
@@ -260,10 +277,7 @@ function Qualities() {
 }
 
 function hms(seconds: number) {
-  return (
-    new Date(seconds * 1000).toUTCString().match(/(\d\d:\d\d:\d\d)/)?.[0] ??
-    "00:00:00"
-  );
+  return (new Date(seconds * 1000).toUTCString().match(/(\d\d:\d\d:\d\d)/)?.[0] ?? "00:00:00");
 }
 
 function getPercentage(time: number, duration: number, seekableStart: number) {

packages/app/src/components/PlayerControls.tsx

@@ -1,4 +1,4 @@
-import { Card } from "@nextui-org/react";
+import { Card } from "@heroui/react";
 import type { ReactNode } from "react";
 
 interface ScrollCardProps {