Added object dump

superstreamerapp · Dec 10, 2024 · a0f4ae7 · a0f4ae7
1 parent 03ab89c
commit a0f4ae7
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 71 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/packages/app/src/components/DataDump2.tsx → packages/app/src/components/ObjectDump.tsx b/packages/app/src/components/DataDump2.tsx → packages/app/src/components/ObjectDump.tsx
@@ -2,22 +2,14 @@ import type { ReactNode } from "react";
 
 type Data = string | number | object | null | undefined;
 
-interface DataDump2Props {
-  data: object;
-  parent?: string;
-}
-
-export function DataDump2({
-  name,
-  data,
-  parent,
-  redacted,
-}: {
+interface ObjectDumpProps {
   name?: string | number;
   data: Data | Data[];
   parent?: string;
   redacted?: string[];
-}) {
+}
+
+export function ObjectDump({ name, data, parent, redacted }: ObjectDumpProps) {
   const id = `${parent}.${name}`;
 
   for (const check of redacted ?? []) {
@@ -32,7 +24,7 @@ export function DataDump2({
         <Label name={name} />
         {"["}
         {data.map((child, index) => (
-          <DataDump2
+          <ObjectDump
             key={`${id}.${index}`}
             parent={`${id}.${index}`}
             name={index}
@@ -51,7 +43,7 @@ export function DataDump2({
         {"{"}
         {Object.entries(data).map(([name, value]) => {
           return (
-            <DataDump2
+            <ObjectDump
               key={`${id}.${name}`}
               parent={`${id}.${name}`}
               name={name}
@@ -70,54 +62,6 @@ export function DataDump2({
   return null;
 }
 
-export function DataDump2_({ data }: DataDump2Props) {
-  return (
-    <div className="text-sm">
-      <Tree data={data} />
-    </div>
-  );
-}
-
-function Tree({ data, parent = "" }: { data: object; parent?: string }) {
-  return Object.entries(data).map(([name, value]) => {
-    const id = `${parent}.${name}`;
-
-    if (id.includes("levels") || id.includes(".track")) {
-      return null;
-    }
-
-    if (value !== Object(value)) {
-      return <Primitive key={id} name={name} value={value} />;
-    }
-
-    if (Array.isArray(value)) {
-      return (
-        <div key={id} className="ml-2">
-          <Label name={name} />
-          {"["}
-          {value.map((child, index) => (
-            <Tree key={`${id}.${index}`} parent={id} data={child} />
-          ))}
-          {"]"}
-        </div>
-      );
-    }
-
-    if (typeof value === "object") {
-      return (
-        <div key={id} className="ml-2">
-          <Label name={name} />
-          {"{"}
-          <Tree parent={id} data={value} />
-          {"}"}
-        </div>
-      );
-    }
-
-    return null;
-  });
-}
-
 function Primitive({ name, value }: { name: string | number; value: Data }) {
   let className = "";
   let child: ReactNode = String(value);

diff --git a/packages/app/src/components/Player.tsx b/packages/app/src/components/Player.tsx
@@ -1,7 +1,7 @@
 import { Card } from "@nextui-org/react";
 import { HlsPlayer } from "@superstreamer/player";
 import { useEffect, useRef, useState } from "react";
-import { DataDump2 } from "./DataDump2";
+import { ObjectDump } from "./ObjectDump";
 
 interface PlayerProps {
   url?: string | null;
@@ -47,12 +47,18 @@ export function Player({ url }: PlayerProps) {
   }, [player, url]);
 
   return (
-    <div className="flex h-full gap-4">
-      <div className="grow">
-        <div className="relative aspect-video bg-black" ref={ref} />
+    <div className="flex flex-col grow gap-4 h-full">
+      <div className="flex items-center">
+        <div
+          className="relative aspect-video bg-black max-h-[300px] grow"
+          ref={ref}
+        />
       </div>
-      <Card className="w-full h-full max-w-[360px] p-4 text-sm overflow-y-auto">
-        <DataDump2 data={state} redacted={["levels", ".track"]} />
+      <Card className="grow w-full h-full p-4 text-sm overflow-y-auto">
+        <ObjectDump
+          data={state}
+          redacted={["levels", ".track", "asset.player"]}
+        />
       </Card>
     </div>
   );

diff --git a/packages/app/src/components/Uniqolor.tsx b/packages/app/src/components/Uniqolor.tsx
@@ -24,11 +24,11 @@ export function Uniqolor({ value }: UniqolorProps) {
 function hexToRGB(hex: string, alpha: number) {
   return (
     "rgba(" +
-    parseInt(hex.slice(1, 3), 16) +
+    Number.parseInt(hex.slice(1, 3), 16) +
     ", " +
-    parseInt(hex.slice(3, 5), 16) +
+    Number.parseInt(hex.slice(3, 5), 16) +
     ", " +
-    parseInt(hex.slice(5, 7), 16) +
+    Number.parseInt(hex.slice(5, 7), 16) +
     ", " +
     alpha +
     ")"

diff --git a/packages/player/src/state.ts b/packages/player/src/state.ts
@@ -193,6 +193,10 @@ export class State implements StateProperties {
     const oldDuration = target.duration;
     target.duration = preciseFloat(timing.duration);
 
+    if (target.time > target.duration) {
+      target.time = target.duration;
+    }
+
     return oldTime !== target.time || oldDuration !== target.duration;
   }