feat: integrate custom ReplayPlayerControls for enhanced playback functionality, including play/pause, seek, speed adjustment, and fullscreen support
This commit is contained in:
Usman Baig
@@ -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) {
|
||||
playerContainerRef.current.innerHTML = ''
|
||||
}
|
||||
if (!playerContainerRef.current) return
|
||||
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
|
||||
}
|
||||
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,25 +222,60 @@ 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">
|
||||
{/* Player Container - Fixed size */}
|
||||
<div
|
||||
ref={playerContainerRef}
|
||||
className="bg-neutral-900 flex items-center justify-center"
|
||||
style={{ width: '100%', minHeight: PLAYER_HEIGHT + 80 }}
|
||||
>
|
||||
{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>
|
||||
<span className="text-sm text-neutral-400">Loading replay data...</span>
|
||||
</div>
|
||||
) : !replayData || replayData.length === 0 ? (
|
||||
<div className="text-center text-neutral-400 p-8">
|
||||
<div className="text-4xl mb-4">🎬</div>
|
||||
<p className="text-lg font-medium mb-2">No replay data available</p>
|
||||
<p className="text-sm">This session may not have recorded any events.</p>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="border border-neutral-200 dark:border-neutral-800 rounded-xl overflow-hidden bg-white dark:bg-neutral-900 shadow-sm">
|
||||
<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"
|
||||
style={{ width: '100%', minHeight: PLAYER_HEIGHT + 80 }}
|
||||
>
|
||||
{loadingData ? (
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<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 ? (
|
||||
<div className="text-center text-neutral-400 p-8">
|
||||
<div className="text-4xl mb-4">🎬</div>
|
||||
<p className="text-lg font-medium mb-2">No replay data available</p>
|
||||
<p className="text-sm">This session may not have recorded any events.</p>
|
||||
</div>
|
||||
) : 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 */}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
/* Controller bar */
|
||||
.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 {
|
||||
/* * Replay cursor – brand orange (#FD5E0F) */
|
||||
.replayer-mouse:after {
|
||||
background: #FD5E0F !important;
|
||||
}
|
||||
.switch input:checked + label::after {
|
||||
transform: translateX(16px) !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;
|
||||
.replayer-mouse.touch-device.touch-active {
|
||||
border-color: #FD5E0F !important;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
|
||||
192
components/ReplayPlayerControls.tsx
Normal file
192
components/ReplayPlayerControls.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user