@bycrux/editor 1.2.2 → 1.4.0

package/src/video/timeline/TrackSettingsPopover.tsx

@@ -174,7 +174,7 @@ export default function TrackSettingsPopover({
       ref={popoverRef}
       role="dialog"
       aria-label={title}
-      className="fixed z-[100] w-64 rounded-lg border border-[var(--editor-border)] bg-[var(--editor-surface)] shadow-2xl p-3 flex flex-col gap-3"
+      className="fixed z-[100] w-64 rounded-lg border border-[var(--editor-border)] bg-[var(--editor-surface)] shadow-2xl p-3 flex flex-col gap-3 text-[var(--editor-text)]"
       style={{
         left: position?.left ?? -9999,
         top: position?.top ?? -9999,
@@ -186,7 +186,7 @@ export default function TrackSettingsPopover({
         transform: position?.flipped ? 'translateY(-100%)' : undefined,
       }}
     >
-      <p className="text-xs font-semibold text-[var(--editor-text)]/90">{title}</p>
+      <p className="text-xs font-semibold text-[color-mix(in_srgb,var(--editor-text)_90%,transparent)]">{title}</p>
 
       {showVolume && (
         <VolumeControl
@@ -211,14 +211,14 @@ export default function TrackSettingsPopover({
 
       {showMute && (
         <div className="flex items-center justify-between">
-          <span className="text-[11px] text-[var(--editor-text)]/70">Mute</span>
+          <span className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)]">Mute</span>
           <Switch checked={!!muted} onCheckedChange={onMutedChange!} aria-label={muteAriaLabel} mode={mode} />
         </div>
       )}
 
       {skip && (
         <div className="flex items-center justify-between">
-          <span className="text-[11px] text-[var(--editor-text)]/70">Skip</span>
+          <span className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)]">Skip</span>
           <Switch checked={skip.skipped} onCheckedChange={() => skip.onToggle()} aria-label={skip.ariaLabel} mode={mode} />
         </div>
       )}

package/src/video/timeline/VolumeControl.tsx

@@ -69,9 +69,9 @@ export default function VolumeControl({
 
   return (
     <div className="flex flex-col gap-2">
-      <div className={`flex items-center text-[11px] text-[var(--editor-text)]/70 ${label ? 'justify-between' : 'justify-end'}`}>
+      <div className={`flex items-center text-[11px] text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)] ${label ? 'justify-between' : 'justify-end'}`}>
         {label && <span>{label}</span>}
-        <span className="font-mono text-[10px] text-[var(--editor-text)]/50">
+        <span className="font-mono text-[10px] text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">
           {value.toFixed(2)} ({volumeToDb(value)})
         </span>
       </div>
@@ -100,7 +100,7 @@ export default function VolumeControl({
               className={`rounded-md border px-2 py-0.5 text-[11px] font-mono transition-colors focus:outline-none focus:ring-1 focus:ring-[var(--editor-accent)] ${
                 active
                   ? 'border-[var(--editor-accent)] bg-[var(--editor-accent)] text-[var(--editor-accent-foreground)]'
-                  : 'border-[var(--editor-border)] bg-[var(--editor-surface)] text-[var(--editor-text)]/70 hover:text-[var(--editor-text)] hover:border-[var(--editor-accent)]'
+                  : 'border-[var(--editor-border)] bg-[var(--editor-surface)] text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)] hover:text-[var(--editor-text)] hover:border-[var(--editor-accent)]'
               }`}
             >
               {Math.round(p * 100)}%

package/src/video/use-report-context.ts

@@ -23,6 +23,8 @@ interface Options {
   clock: PlaybackClock
   selectedIds: string[]
   selectedCaptionId: string | null
+  /** Transport state. Reported like selection: at once, on change. */
+  playing?: boolean
 }
 
 /**
@@ -36,12 +38,12 @@ interface Options {
  * selection.
  */
 export function useReportContext({
-  adapter, projectId, clock, selectedIds, selectedCaptionId,
+  adapter, projectId, clock, selectedIds, selectedCaptionId, playing = false,
 }: Options): void {
   // Kept in a ref so the interval effect never re-subscribes on a selection
   // change — it always reads the latest values without depending on them.
-  const latest = useRef({ selectedIds, selectedCaptionId })
-  latest.current = { selectedIds, selectedCaptionId }
+  const latest = useRef({ selectedIds, selectedCaptionId, playing })
+  latest.current = { selectedIds, selectedCaptionId, playing }
 
   const send = useRef<(ctx: EditorContext) => void>(() => {})
   send.current = (ctx: EditorContext) => {
@@ -58,18 +60,19 @@ export function useReportContext({
       playheadSec:       clock.get(),
       selectedIds:       latest.current.selectedIds,
       selectedCaptionId: latest.current.selectedCaptionId,
+      playing:           latest.current.playing,
     })
     emit()
     const id = setInterval(emit, REPORT_INTERVAL_MS)
     return () => clearInterval(id)
   }, [adapter, projectId, clock])
 
-  // Selection, immediately on change. Skips the mount emit above by comparing
-  // against what the interval effect already sent.
+  // Selection and play/pause, immediately on change. Skips the mount emit
+  // above by comparing against what the interval effect already sent.
   const mounted = useRef(false)
   useEffect(() => {
     if (!adapter.reportContext) return
     if (!mounted.current) { mounted.current = true; return }
-    send.current({ playheadSec: clock.get(), selectedIds, selectedCaptionId })
-  }, [adapter, clock, selectedIds, selectedCaptionId])
+    send.current({ playheadSec: clock.get(), selectedIds, selectedCaptionId, playing })
+  }, [adapter, clock, selectedIds, selectedCaptionId, playing])
 }