279 lines
8.9 KiB
TypeScript
279 lines
8.9 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState, useRef, useCallback } from 'react'
|
|
import { useParams, useRouter } from 'next/navigation'
|
|
import { Button } from '@/components/ui/button'
|
|
import {
|
|
Maximize2,
|
|
Minimize2,
|
|
Monitor,
|
|
Loader2,
|
|
AlertCircle,
|
|
} from 'lucide-react'
|
|
import { ViewerToolbar } from '@/components/viewer/toolbar'
|
|
import { ConnectionStatus } from '@/components/viewer/connection-status'
|
|
|
|
interface Session {
|
|
id: string
|
|
machineId: string | null
|
|
machineName: string | null
|
|
startedAt: string
|
|
endedAt: string | null
|
|
connectionType: string | null
|
|
}
|
|
|
|
type ConnectionState = 'connecting' | 'connected' | 'disconnected' | 'error'
|
|
|
|
export default function ViewerPage() {
|
|
const params = useParams()
|
|
const router = useRouter()
|
|
const sessionId = params.sessionId as string
|
|
|
|
const [session, setSession] = useState<Session | null>(null)
|
|
const [connectionState, setConnectionState] = useState<ConnectionState>('connecting')
|
|
const [isFullscreen, setIsFullscreen] = useState(false)
|
|
const [showToolbar, setShowToolbar] = useState(true)
|
|
const [quality, setQuality] = useState<'high' | 'medium' | 'low'>('high')
|
|
const [isMuted, setIsMuted] = useState(true)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const containerRef = useRef<HTMLDivElement>(null)
|
|
const canvasRef = useRef<HTMLCanvasElement>(null)
|
|
|
|
useEffect(() => {
|
|
fetch(`/api/sessions/${sessionId}`)
|
|
.then((r) => r.json())
|
|
.then((data) => {
|
|
if (!data.session) {
|
|
setError('Session not found')
|
|
setConnectionState('error')
|
|
return
|
|
}
|
|
if (data.session.endedAt) {
|
|
setError('This session has ended')
|
|
setConnectionState('disconnected')
|
|
return
|
|
}
|
|
setSession(data.session)
|
|
simulateConnection()
|
|
})
|
|
.catch(() => {
|
|
setError('Failed to load session')
|
|
setConnectionState('error')
|
|
})
|
|
}, [sessionId])
|
|
|
|
const simulateConnection = () => {
|
|
setConnectionState('connecting')
|
|
setTimeout(() => {
|
|
setConnectionState('connected')
|
|
startDemoScreen()
|
|
}, 2000)
|
|
}
|
|
|
|
const startDemoScreen = () => {
|
|
const canvas = canvasRef.current
|
|
if (!canvas) return
|
|
const ctx = canvas.getContext('2d')
|
|
if (!ctx) return
|
|
|
|
canvas.width = 1920
|
|
canvas.height = 1080
|
|
|
|
const draw = () => {
|
|
ctx.fillStyle = '#1e1e2e'
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height)
|
|
|
|
const icons = [
|
|
{ x: 50, y: 50, label: 'Documents' },
|
|
{ x: 50, y: 150, label: 'Pictures' },
|
|
{ x: 50, y: 250, label: 'Downloads' },
|
|
]
|
|
ctx.font = '14px system-ui'
|
|
ctx.textAlign = 'center'
|
|
icons.forEach((icon) => {
|
|
ctx.fillStyle = '#313244'
|
|
ctx.fillRect(icon.x, icon.y, 60, 60)
|
|
ctx.fillStyle = '#cdd6f4'
|
|
ctx.fillText(icon.label, icon.x + 30, icon.y + 80)
|
|
})
|
|
|
|
ctx.fillStyle = '#181825'
|
|
ctx.fillRect(0, canvas.height - 48, canvas.width, 48)
|
|
ctx.fillStyle = '#89b4fa'
|
|
ctx.fillRect(10, canvas.height - 40, 40, 32)
|
|
|
|
const time = new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })
|
|
ctx.fillStyle = '#cdd6f4'
|
|
ctx.font = '14px system-ui'
|
|
ctx.textAlign = 'right'
|
|
ctx.fillText(time, canvas.width - 20, canvas.height - 18)
|
|
|
|
ctx.fillStyle = '#1e1e2e'
|
|
ctx.fillRect(300, 100, 800, 500)
|
|
ctx.strokeStyle = '#313244'
|
|
ctx.lineWidth = 1
|
|
ctx.strokeRect(300, 100, 800, 500)
|
|
ctx.fillStyle = '#181825'
|
|
ctx.fillRect(300, 100, 800, 32)
|
|
ctx.fillStyle = '#cdd6f4'
|
|
ctx.font = '13px system-ui'
|
|
ctx.textAlign = 'left'
|
|
ctx.fillText('RemoteLink Agent - Connected', 312, 121)
|
|
ctx.fillStyle = '#a6adc8'
|
|
ctx.font = '16px system-ui'
|
|
ctx.fillText('Remote session active', 320, 180)
|
|
ctx.fillText('Connection: Secure (WebRTC)', 320, 210)
|
|
ctx.fillText('Latency: ~45ms', 320, 240)
|
|
ctx.fillStyle = '#a6e3a1'
|
|
ctx.beginPath()
|
|
ctx.arc(320, 280, 6, 0, Math.PI * 2)
|
|
ctx.fill()
|
|
ctx.fillStyle = '#cdd6f4'
|
|
ctx.fillText('Connected to viewer', 335, 285)
|
|
}
|
|
|
|
draw()
|
|
const interval = setInterval(draw, 1000)
|
|
return () => clearInterval(interval)
|
|
}
|
|
|
|
const handleKeyDown = useCallback(
|
|
(e: KeyboardEvent) => {
|
|
if (connectionState !== 'connected') return
|
|
console.log('[Viewer] Key pressed:', e.key)
|
|
},
|
|
[connectionState]
|
|
)
|
|
|
|
const handleMouseMove = useCallback(
|
|
(e: React.MouseEvent<HTMLCanvasElement>) => {
|
|
if (connectionState !== 'connected') return
|
|
const canvas = canvasRef.current
|
|
if (!canvas) return
|
|
const rect = canvas.getBoundingClientRect()
|
|
const _x = ((e.clientX - rect.left) * canvas.width) / rect.width
|
|
const _y = ((e.clientY - rect.top) * canvas.height) / rect.height
|
|
},
|
|
[connectionState]
|
|
)
|
|
|
|
const handleMouseClick = useCallback(
|
|
(e: React.MouseEvent<HTMLCanvasElement>) => {
|
|
if (connectionState !== 'connected') return
|
|
console.log('[Viewer] Mouse clicked:', e.button)
|
|
},
|
|
[connectionState]
|
|
)
|
|
|
|
const toggleFullscreen = async () => {
|
|
if (!containerRef.current) return
|
|
if (!document.fullscreenElement) {
|
|
await containerRef.current.requestFullscreen()
|
|
setIsFullscreen(true)
|
|
} else {
|
|
await document.exitFullscreen()
|
|
setIsFullscreen(false)
|
|
}
|
|
}
|
|
|
|
const endSession = async () => {
|
|
if (session) {
|
|
const duration = Math.floor((Date.now() - new Date(session.startedAt).getTime()) / 1000)
|
|
await fetch(`/api/sessions/${session.id}`, {
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ endedAt: new Date().toISOString(), durationSeconds: duration }),
|
|
})
|
|
}
|
|
setConnectionState('disconnected')
|
|
router.push('/dashboard/sessions')
|
|
}
|
|
|
|
useEffect(() => {
|
|
document.addEventListener('keydown', handleKeyDown)
|
|
return () => document.removeEventListener('keydown', handleKeyDown)
|
|
}, [handleKeyDown])
|
|
|
|
useEffect(() => {
|
|
if (isFullscreen && connectionState === 'connected') {
|
|
const timer = setTimeout(() => setShowToolbar(false), 3000)
|
|
return () => clearTimeout(timer)
|
|
}
|
|
}, [isFullscreen, connectionState, showToolbar])
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="min-h-svh bg-background flex items-center justify-center">
|
|
<div className="text-center space-y-4">
|
|
<AlertCircle className="h-12 w-12 text-destructive mx-auto" />
|
|
<h1 className="text-xl font-semibold">{error}</h1>
|
|
<Button onClick={() => router.push('/dashboard')}>Return to Dashboard</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div
|
|
ref={containerRef}
|
|
className="min-h-svh bg-black flex flex-col"
|
|
onMouseMove={() => isFullscreen && setShowToolbar(true)}
|
|
>
|
|
<div className={`transition-opacity duration-300 ${showToolbar ? 'opacity-100' : 'opacity-0'}`}>
|
|
<ViewerToolbar
|
|
session={session}
|
|
connectionState={connectionState}
|
|
isFullscreen={isFullscreen}
|
|
quality={quality}
|
|
isMuted={isMuted}
|
|
onToggleFullscreen={toggleFullscreen}
|
|
onQualityChange={setQuality}
|
|
onToggleMute={() => setIsMuted(!isMuted)}
|
|
onDisconnect={endSession}
|
|
onReconnect={simulateConnection}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex-1 flex items-center justify-center relative">
|
|
{connectionState === 'connecting' && (
|
|
<div className="absolute inset-0 flex items-center justify-center bg-background/80 z-10">
|
|
<div className="text-center space-y-4">
|
|
<Loader2 className="h-12 w-12 animate-spin text-primary mx-auto" />
|
|
<div>
|
|
<p className="font-semibold">Connecting to remote machine...</p>
|
|
<p className="text-sm text-muted-foreground">{session?.machineName || 'Establishing connection'}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<canvas
|
|
ref={canvasRef}
|
|
className="max-w-full max-h-full object-contain cursor-default"
|
|
style={{
|
|
display: connectionState === 'connected' ? 'block' : 'none',
|
|
imageRendering: quality === 'low' ? 'pixelated' : 'auto',
|
|
}}
|
|
onMouseMove={handleMouseMove}
|
|
onClick={handleMouseClick}
|
|
onContextMenu={(e) => { e.preventDefault(); handleMouseClick(e) }}
|
|
/>
|
|
|
|
{connectionState === 'disconnected' && (
|
|
<div className="text-center space-y-4">
|
|
<Monitor className="h-16 w-16 text-muted-foreground mx-auto" />
|
|
<div>
|
|
<p className="font-semibold">Session Ended</p>
|
|
<p className="text-sm text-muted-foreground">The remote connection has been closed</p>
|
|
</div>
|
|
<Button onClick={() => router.push('/dashboard')}>Return to Dashboard</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{connectionState === 'connected' && <ConnectionStatus quality={quality} />}
|
|
</div>
|
|
)
|
|
}
|