feat: integrate custom ReplayPlayerControls for enhanced playback functionality, including play/pause, seek, speed adjustment, and fullscreen support

app/sites/[id]/replays/[replayId]/page.tsx

@@ -7,6 +7,7 @@ import { getReplay, getReplayData, deleteReplay, formatDuration, type SessionRep
 import { toast } from 'sonner'
 import { LockClosedIcon } from '@radix-ui/react-icons'
 import LoadingOverlay from '@/components/LoadingOverlay'
+import ReplayPlayerControls from '@/components/ReplayPlayerControls'
 import type { eventWithTime } from '@rrweb/types'
 import 'rrweb-player/dist/style.css'
 
@@ -48,7 +49,13 @@ export default function ReplayViewerPage() {
   const [loadingData, setLoadingData] = useState(false)
   const [playerReady, setPlayerReady] = useState(false)
   const [showDeleteModal, setShowDeleteModal] = useState(false)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [skipInactive, setSkipInactive] = useState(true)
+  const [speed, setSpeed] = useState(1)
+  const [currentTimeMs, setCurrentTimeMs] = useState(0)
+  const [totalTimeMs, setTotalTimeMs] = useState(0)
 
+  const playerWrapperRef = useRef<HTMLDivElement>(null)
   const playerContainerRef = useRef<HTMLDivElement>(null)
   const playerRef = useRef<unknown>(null)
 
@@ -88,29 +95,29 @@ export default function ReplayViewerPage() {
     loadData()
   }, [replay, siteId, replayId])
 
-  // Initialize rrweb player when data is ready
+  // Initialize rrweb player when data is ready (no built-in controller; we use ReplayPlayerControls)
   useEffect(() => {
     if (!replayData || !playerContainerRef.current || replayData.length === 0) return
 
-    // Dynamically import rrweb-player
+    setPlayerReady(false)
+    setCurrentTimeMs(0)
+    setIsPlaying(false)
+
     const initPlayer = async () => {
       try {
         const rrwebPlayer = await import('rrweb-player')
 
-        // Clear previous player
+        if (!playerContainerRef.current) return
-        if (playerContainerRef.current) {
         playerContainerRef.current.innerHTML = ''
-        }
 
-        // Create player with fixed dimensions
         const player = new rrwebPlayer.default({
-          target: playerContainerRef.current!,
+          target: playerContainerRef.current,
           props: {
             events: replayData,
             width: PLAYER_WIDTH,
             height: PLAYER_HEIGHT,
             autoPlay: false,
-            showController: true,
+            showController: false,
             skipInactive: true,
             showWarning: false,
             showDebug: false,
@@ -118,6 +125,12 @@ export default function ReplayViewerPage() {
         })
 
         playerRef.current = player
+        try {
+          const meta = (player as { getMetaData?: () => { totalTime: number } }).getMetaData?.()
+          if (meta && typeof meta.totalTime === 'number') setTotalTimeMs(meta.totalTime)
+        } catch {
+          // ignore
+        }
         setPlayerReady(true)
       } catch (error) {
         console.error('Failed to initialize player:', error)
@@ -128,12 +141,44 @@ export default function ReplayViewerPage() {
     initPlayer()
 
     return () => {
-      if (playerRef.current) {
       playerRef.current = null
     }
-    }
   }, [replayData])
 
+  // Poll current time and detect end of replay
+  useEffect(() => {
+    if (!playerReady) return
+    const interval = setInterval(() => {
+      const p = playerRef.current as
+        | { getReplayer?: () => { getCurrentTime?: () => number }; getMetaData?: () => { totalTime: number }; pause?: () => void }
+        | null
+      if (!p?.getReplayer) return
+      try {
+        const t = p.getReplayer?.()?.getCurrentTime?.()
+        if (typeof t === 'number') setCurrentTimeMs(t)
+        const meta = p.getMetaData?.()
+        if (meta && typeof meta.totalTime === 'number' && typeof t === 'number' && t >= meta.totalTime) {
+          p.pause?.()
+          setIsPlaying(false)
+        }
+      } catch {
+        // ignore
+      }
+    }, 200)
+    return () => clearInterval(interval)
+  }, [playerReady])
+
+  // Trigger rrweb replayer resize when entering fullscreen so it can scale
+  useEffect(() => {
+    const onFullscreenChange = () => {
+      if (document.fullscreenElement === playerWrapperRef.current) {
+        setTimeout(() => (playerRef.current as { triggerResize?: () => void })?.triggerResize?.(), 50)
+      }
+    }
+    document.addEventListener('fullscreenchange', onFullscreenChange)
+    return () => document.removeEventListener('fullscreenchange', onFullscreenChange)
+  }, [])
+
   const handleDelete = async () => {
     try {
       await deleteReplay(siteId, replayId)
@@ -177,8 +222,9 @@ export default function ReplayViewerPage() {
       <div className="flex gap-6">
         {/* Player */}
         <div className="flex-1 min-w-0">
-          <div className="border border-neutral-200 dark:border-neutral-800 rounded-xl overflow-hidden bg-white dark:bg-neutral-900">
+          <div className="border border-neutral-200 dark:border-neutral-800 rounded-xl overflow-hidden bg-white dark:bg-neutral-900 shadow-sm">
-            {/* Player Container - Fixed size */}
+            <div ref={playerWrapperRef}>
+              {/* Player container (rrweb-player mounts here when replayData is ready) */}
               <div
                 ref={playerContainerRef}
                 className="bg-neutral-900 flex items-center justify-center"
@@ -186,7 +232,7 @@ export default function ReplayViewerPage() {
               >
                 {loadingData ? (
                   <div className="flex flex-col items-center gap-3">
-                  <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-white"></div>
+                    <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-brand-orange" />
                     <span className="text-sm text-neutral-400">Loading replay data...</span>
                   </div>
                 ) : !replayData || replayData.length === 0 ? (
@@ -198,6 +244,40 @@ export default function ReplayViewerPage() {
                 ) : null}
               </div>
 
+              {/* Custom controls (Ciphera‑branded) */}
+              {playerReady && (
+                <ReplayPlayerControls
+                  isPlaying={isPlaying}
+                  onPlayPause={() => {
+                    ;(playerRef.current as { toggle?: () => void })?.toggle?.()
+                    setIsPlaying((p) => !p)
+                  }}
+                  currentTimeMs={currentTimeMs}
+                  totalTimeMs={totalTimeMs}
+                  onSeek={(f) => {
+                    ;(playerRef.current as { goto?: (ms: number, play?: boolean) => void })?.goto?.(f * totalTimeMs, isPlaying)
+                  }}
+                  speed={speed}
+                  onSpeedChange={(s) => {
+                    ;(playerRef.current as { setSpeed?: (n: number) => void })?.setSpeed?.(s)
+                    setSpeed(s)
+                  }}
+                  skipInactive={skipInactive}
+                  onSkipInactiveChange={() => {
+                    ;(playerRef.current as { toggleSkipInactive?: () => void })?.toggleSkipInactive?.()
+                    setSkipInactive((p) => !p)
+                  }}
+                  onFullscreenRequest={() => {
+                    if (document.fullscreenElement) {
+                      document.exitFullscreen()
+                    } else {
+                      playerWrapperRef.current?.requestFullscreen?.()
+                    }
+                  }}
+                />
+              )}
+            </div>
+
             {/* Session info bar */}
             {playerReady && (
               <div className="p-3 border-t border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/50 flex items-center justify-between text-sm">
@@ -330,155 +410,28 @@ export default function ReplayViewerPage() {
         </div>
       )}
 
-      {/* Custom styles for rrweb player - Brand compliant */}
+      {/* * rrweb player frame and cursor – Ciphera branding (controller is custom, not rrweb) */}
       <style jsx global>{`
-        /* Player container */
         .rr-player {
           margin: 0 auto !important;
           background: #171717 !important;
           border-radius: 0 !important;
+          box-shadow: none !important;
         }
         .rr-player__frame {
           background: #171717 !important;
+          overflow: hidden !important;
         }
         .replayer-wrapper {
           margin: 0 auto !important;
           background: #0a0a0a !important;
         }
-
+        /* * Replay cursor – brand orange (#FD5E0F) */
-        /* Controller bar */
+        .replayer-mouse:after {
-        .rr-controller {
-          background: #1a1a1a !important;
-          border-top: 1px solid #333 !important;
-          padding: 12px 16px !important;
-        }
-
-        /* Timeline / Progress bar */
-        .rr-timeline {
-          width: 100% !important;
-          padding: 0 16px !important;
-        }
-        .rr-progress {
-          background: #404040 !important;
-          height: 6px !important;
-          border-radius: 3px !important;
-        }
-        .rr-progress__step {
-          background: #FD5E0F !important;
-          height: 6px !important;
-          border-radius: 3px !important;
-        }
-        .rr-progress__handler {
-          background: #FD5E0F !important;
-          border: 2px solid #fff !important;
-          width: 14px !important;
-          height: 14px !important;
-          border-radius: 50% !important;
-          top: -4px !important;
-          box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
-        }
-
-        /* Time display */
-        .rr-timeline__time {
-          color: #a3a3a3 !important;
-          font-size: 12px !important;
-          font-family: ui-monospace, monospace !important;
-        }
-
-        /* Control buttons container */
-        .rr-controller__btns {
-          display: flex !important;
-          align-items: center !important;
-          gap: 8px !important;
-          margin-top: 12px !important;
-        }
-
-        /* Play button */
-        .rr-controller__btns button[class*="play"],
-        .rr-controller__btns button:first-child {
-          background: #FD5E0F !important;
-          color: #fff !important;
-          border: none !important;
-          border-radius: 6px !important;
-          padding: 6px 12px !important;
-          font-size: 13px !important;
-          cursor: pointer !important;
-          transition: background 0.2s !important;
-        }
-        .rr-controller__btns button[class*="play"]:hover,
-        .rr-controller__btns button:first-child:hover {
-          background: #E54E00 !important;
-        }
-
-        /* Speed buttons */
-        .rr-controller__btns button {
-          background: #333 !important;
-          color: #e5e5e5 !important;
-          border: none !important;
-          border-radius: 6px !important;
-          padding: 6px 10px !important;
-          font-size: 13px !important;
-          cursor: pointer !important;
-          transition: all 0.2s !important;
-        }
-        .rr-controller__btns button:hover {
-          background: #444 !important;
-          color: #fff !important;
-        }
-        .rr-controller__btns button.active,
-        .rr-controller__btns button[class*="active"] {
-          background: #FD5E0F !important;
-          color: #fff !important;
-        }
-
-        /* Skip inactive toggle */
-        .switch {
-          display: flex !important;
-          align-items: center !important;
-          gap: 6px !important;
-        }
-        .switch label {
-          background: #404040 !important;
-          border-radius: 12px !important;
-          width: 36px !important;
-          height: 20px !important;
-          position: relative !important;
-          cursor: pointer !important;
-          transition: background 0.2s !important;
-        }
-        .switch label::after {
-          content: '' !important;
-          position: absolute !important;
-          width: 16px !important;
-          height: 16px !important;
-          border-radius: 50% !important;
-          background: #fff !important;
-          top: 2px !important;
-          left: 2px !important;
-          transition: transform 0.2s !important;
-        }
-        .switch input:checked + label {
           background: #FD5E0F !important;
         }
-        .switch input:checked + label::after {
+        .replayer-mouse.touch-device.touch-active {
-          transform: translateX(16px) !important;
+          border-color: #FD5E0F !important;
-        }
-        .switch span {
-          color: #a3a3a3 !important;
-          font-size: 12px !important;
-        }
-
-        /* Fullscreen button */
-        .rr-controller__btns button[class*="full"],
-        .rr-controller__btns button:last-child {
-          background: transparent !important;
-          color: #a3a3a3 !important;
-          padding: 6px !important;
-        }
-        .rr-controller__btns button[class*="full"]:hover,
-        .rr-controller__btns button:last-child:hover {
-          color: #fff !important;
-          background: transparent !important;
         }
       `}</style>
     </div>

components/ReplayPlayerControls.tsx

@@ -0,0 +1,192 @@
+'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>
+  )
+}