From f82d77e04db51dcfa6b76c71fffcd20ad39b8e04 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 28 Jan 2026 11:28:05 +0100
Subject: [PATCH] refactor: remove ReplayPlayerControls component

---
 components/ReplayPlayerControls.tsx | 192 ----------------------------
 1 file changed, 192 deletions(-)
 delete mode 100644 components/ReplayPlayerControls.tsx

diff --git a/components/ReplayPlayerControls.tsx b/components/ReplayPlayerControls.tsx
deleted file mode 100644
index a110f35..0000000
--- a/components/ReplayPlayerControls.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import {
-  PlayIcon,
-  PauseIcon,
-  EnterFullScreenIcon,
-  ExitFullScreenIcon,
-} from '@radix-ui/react-icons'
-
-/** Formats milliseconds as mm:ss. */
-function formatTime(ms: number): string {
-  if (!Number.isFinite(ms) || ms < 0) return '0:00'
-  const s = Math.floor(ms / 1000)
-  const m = Math.floor(s / 60)
-  return `${m}:${String(s % 60).padStart(2, '0')}`
-}
-
-const SPEED_OPTIONS = [1, 2, 4, 8] as const
-
-export type ReplayPlayerControlsProps = {
-  isPlaying: boolean
-  onPlayPause: () => void
-  currentTimeMs: number
-  totalTimeMs: number
-  onSeek: (fraction: number) => void
-  speed: number
-  onSpeedChange: (speed: number) => void
-  skipInactive: boolean
-  onSkipInactiveChange: () => void
-  onFullscreenRequest: () => void
-}
-
-/**
- * Custom session replay player controls with Ciphera branding.
- * Matches design: brand orange #FD5E0F, Plus Jakarta Sans, rounded-xl, neutral greys.
- */
-export default function ReplayPlayerControls({
-  isPlaying,
-  onPlayPause,
-  currentTimeMs,
-  totalTimeMs,
-  onSeek,
-  speed,
-  onSpeedChange,
-  skipInactive,
-  onSkipInactiveChange,
-  onFullscreenRequest,
-}: ReplayPlayerControlsProps) {
-  const [isFullscreen, setIsFullscreen] = useState(false)
-  const [isSeeking, setIsSeeking] = useState(false)
-  const [seekValue, setSeekValue] = useState(0)
-
-  const totalSec = totalTimeMs / 1000
-  const currentSec = currentTimeMs / 1000
-  const fraction = totalSec > 0 ? Math.min(1, Math.max(0, currentSec / totalSec)) : 0
-  const displayFraction = isSeeking ? seekValue : fraction
-
-  useEffect(() => {
-    const onFullscreenChange = () => {
-      setIsFullscreen(!!document.fullscreenElement)
-    }
-    document.addEventListener('fullscreenchange', onFullscreenChange)
-    return () => document.removeEventListener('fullscreenchange', onFullscreenChange)
-  }, [])
-
-  const handleSeekChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const v = parseFloat(e.target.value)
-    const p = Number.isFinite(v) ? Math.max(0, Math.min(1, v)) : 0
-    setSeekValue(p)
-    onSeek(p)
-  }
-  const handleSeekPointerDown = () => {
-    setSeekValue(fraction)
-    setIsSeeking(true)
-  }
-  const handleSeekPointerUp = () => setIsSeeking(false)
-
-  return (
-    <div
-      className="flex flex-col gap-3 px-4 py-3 bg-neutral-800/95 border-t border-neutral-700/80"
-      style={{ fontFamily: 'var(--font-plus-jakarta-sans), system-ui, sans-serif' }}
-    >
-      {/* * Progress bar / timeline */}
-      <div className="flex items-center gap-3">
-        <span className="text-neutral-400 text-xs tabular-nums w-10 text-right shrink-0">
-          {formatTime(currentTimeMs)}
-        </span>
-        <div className="flex-1 relative h-2 bg-neutral-600/80 rounded-full overflow-hidden group">
-          <div
-            className="absolute left-0 top-0 bottom-0 rounded-full bg-brand-orange transition-all duration-150 flex items-center justify-end"
-            style={{ width: `${displayFraction * 100}%` }}
-          >
-            {displayFraction > 0 && displayFraction < 1 && (
-              <div className="w-3 h-3 rounded-full bg-white shadow-md border border-neutral-800 -mr-1.5 flex-shrink-0" />
-            )}
-          </div>
-          <input
-            type="range"
-            min={0}
-            max={1}
-            step={0.001}
-            value={isSeeking ? seekValue : fraction}
-            onChange={handleSeekChange}
-            onMouseDown={handleSeekPointerDown}
-            onMouseUp={handleSeekPointerUp}
-            onTouchStart={handleSeekPointerDown}
-            onTouchEnd={handleSeekPointerUp}
-            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
-            aria-label="Seek"
-          />
-        </div>
-        <span className="text-neutral-400 text-xs tabular-nums w-10 shrink-0">
-          {formatTime(totalTimeMs)}
-        </span>
-      </div>
-
-      {/* * Buttons row */}
-      <div className="flex items-center justify-between gap-4">
-        <div className="flex items-center gap-1">
-          {/* * Play / Pause */}
-          <button
-            type="button"
-            onClick={onPlayPause}
-            className="w-9 h-9 rounded-lg bg-brand-orange text-white flex items-center justify-center hover:bg-brand-orange/90 active:scale-95 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 focus:ring-offset-neutral-800"
-            aria-label={isPlaying ? 'Pause' : 'Play'}
-          >
-            {isPlaying ? (
-              <PauseIcon className="w-4 h-4" />
-            ) : (
-              <PlayIcon className="w-4 h-4 ml-0.5" />
-            )}
-          </button>
-
-          {/* * Speed pills */}
-          <div className="flex items-center rounded-lg overflow-hidden border border-neutral-600/80">
-            {SPEED_OPTIONS.map((s) => (
-              <button
-                key={s}
-                type="button"
-                onClick={() => onSpeedChange(s)}
-                className={`px-2.5 py-1.5 text-xs font-medium transition-colors duration-200 focus:outline-none focus:ring-1 focus:ring-brand-orange focus:ring-inset ${
-                  speed === s
-                    ? 'bg-brand-orange text-white'
-                    : 'text-neutral-400 hover:text-neutral-200 hover:bg-neutral-600/60'
-                }`}
-              >
-                {s}x
-              </button>
-            ))}
-          </div>
-
-          {/* * Skip inactive toggle */}
-          <button
-            type="button"
-            role="switch"
-            aria-checked={skipInactive}
-            onClick={onSkipInactiveChange}
-            className="flex items-center gap-2 ml-2 bg-transparent border-0 cursor-pointer select-none p-0 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 focus:ring-offset-neutral-800 rounded"
-          >
-            <span className="text-neutral-400 text-xs">Skip inactive</span>
-            <span
-              className={`relative inline-block w-9 h-5 rounded-full transition-colors duration-200 ${
-                skipInactive ? 'bg-brand-orange' : 'bg-neutral-600'
-              }`}
-            >
-              <span
-                className={`absolute top-1 w-3 h-3 rounded-full bg-white shadow transition-all duration-200 ${
-                  skipInactive ? 'left-5' : 'left-1'
-                }`}
-              />
-            </span>
-          </button>
-        </div>
-
-        {/* * Fullscreen */}
-        <button
-          type="button"
-          onClick={onFullscreenRequest}
-          className="w-9 h-9 rounded-lg text-neutral-400 hover:text-white hover:bg-neutral-600/60 flex items-center justify-center transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 focus:ring-offset-neutral-800"
-          aria-label={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
-        >
-          {isFullscreen ? (
-            <ExitFullScreenIcon className="w-4 h-4" />
-          ) : (
-            <EnterFullScreenIcon className="w-4 h-4" />
-          )}
-        </button>
-      </div>
-    </div>
-  )
-}