fixing some jank

HolodexNet · Jul 7, 2024 · 361deaf · 361deaf
1 parent 87dece3
commit 361deaf
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/packages/react/src/components/tldex/new-editor/components/WaveformEditor.tsx b/packages/react/src/components/tldex/new-editor/components/WaveformEditor.tsx
@@ -61,10 +61,13 @@ export const WaveformEditor = ({ videoId }: { videoId: string }) => {
           }}
         />
       </div>
-      <div className="relative shrink grow" ref={containerRef}>
+      <div
+        className="relative max-w-full shrink grow overflow-hidden"
+        ref={containerRef}
+      >
         {currentSubs.map((subtitle, index) => (
           <Rnd
-            key={subtitle.key}
+            key={subtitle.id}
             position={{
               x: timeToPosition(subtitle.video_offset),
               y: 15,

diff --git a/packages/react/src/components/tldex/new-editor/hooks/timeline.ts b/packages/react/src/components/tldex/new-editor/hooks/timeline.ts
@@ -37,7 +37,7 @@ export const useTimelineRendererBase = (
     if (node !== null) {
       const t = new Timeline(node, {
         // Timeline configuration...\
-        fps: 120,
+        fps: 60,
         maxZoom: 8,
         minZoom: 1,
         fill: true,
@@ -73,7 +73,9 @@ export const useTimelineRendererBase = (
       const x = timelineRef.current.draw({
         currentTime: videoStatus
           ? videoStatus.progress +
-            (Date.now() - videoStatus.progressRecordedAt) / 1000
+            (videoStatus?.status == "playing"
+              ? (Date.now() - videoStatus.progressRecordedAt) / 1000
+              : 0)
           : 0,
         waveform,
       });
@@ -86,8 +88,8 @@ export const useTimelineRendererBase = (
       ? videoStatus?.status == "playing"
         ? 15
         : videoStatus?.status == "paused" || videoStatus?.status == "stopped"
-          ? null
-          : 100
+          ? 400
+          : 400
       : null,
   );