CanvasDesktopViewer.jsx

Go to the documentation of this file.

/**
 * Canvas Desktop Viewer - Direct MeshCentral integration
 * This component replaces the old RDS viewer with a cleaner MeshCentral connection
 * Can be used standalone (with URL params) or embedded (with props)
 */
 
import React from 'react';
import { useParams } from 'react-router-dom';
import MainLayout from '../components/Layout/MainLayout';
import { useCanvasDesktop } from '../hooks/useCanvasDesktop';
 
export default function CanvasDesktopViewer({ nodeId: propNodeId, embedded = false }) {
  const { nodeId: urlNodeId } = useParams();
  const nodeId = propNodeId || urlNodeId; // Use prop if provided, otherwise use URL param
  const {
    status,
    error,
    capabilities,
    phase,
    canvasRef,
    sendPing,
    sendMouseEvent,
    sendKeyEvent,
    disconnect
  } = useCanvasDesktop(nodeId);
 
  const getStatusColor = () => {
    switch (status) {
      case 'connected': return 'text-green-600';
      case 'connecting': return 'text-yellow-600';
      case 'error': return 'text-red-600';
      default: return 'text-gray-600';
    }
  };
 
  const getStatusIcon = () => {
    switch (status) {
      case 'connected': return '✅';
      case 'connecting': return '🔄';
      case 'error': return '❌';
      default: return '⚪';
    }
  };
 
  const content = (
    <div className={embedded ? "h-full" : "p-6"}>
      <div className="bg-white rounded-lg shadow-lg h-full flex flex-col">
        {/* Header */}
        <div className="border-b border-gray-200 px-6 py-4">
          <div className="flex items-center justify-between">
            <div>
              <h1 className={embedded ? "text-xl font-bold text-gray-900" : "text-2xl font-bold text-gray-900"}>
                Remote Desktop - Canvas View
              </h1>
              <p className="text-sm text-gray-500 mt-1">
                Node ID: {nodeId || 'Unknown'}
              </p>
            </div>
            <div className="flex items-center gap-4">
              {/* Status indicator */}
              <div className="flex items-center gap-2">
                <span className="text-2xl">{getStatusIcon()}</span>
                <span className={`font-semibold ${getStatusColor()}`}>
                  {status.charAt(0).toUpperCase() + status.slice(1)}
                </span>
              </div>
              
              {/* Actions */}
              <button
                onClick={sendPing}
                disabled={status !== 'connected'}
                className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                🏓 Ping
              </button>
              
              <button
                onClick={disconnect}
                className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
              >
                Disconnect
              </button>
            </div>
          </div>
        </div>
 
        {/* Error alert */}
        {error && (
          <div className="mx-6 mt-4 p-4 bg-red-50 border border-red-200 rounded-lg">
            <div className="flex items-start">
              <span className="text-red-600 text-xl mr-3">⚠️</span>
              <div>
                <h3 className="text-red-800 font-semibold">Connection Error</h3>
                <p className="text-red-700 text-sm mt-1">{error}</p>
              </div>
            </div>
          </div>
        )}
 
        {/* Info panel */}
        <div className="mx-6 mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
          <div className="grid grid-cols-3 gap-4 text-sm">
            <div>
              <span className="font-semibold">Phase:</span>
              <span className="ml-2">{phase || 1}</span>
            </div>
            <div>
              <span className="font-semibold">Capabilities:</span>
              <span className="ml-2">
                {capabilities.length > 0 ? capabilities.join(', ') : 'None'}
              </span>
            </div>
            <div>
              <span className="font-semibold">Protocol:</span>
              <span className="ml-2">MeshCentral WebSocket</span>
            </div>
          </div>
        </div>
 
        {/* Canvas container */}
        <div className="p-6 flex-1">
          <div className="bg-gray-900 rounded-lg overflow-hidden h-full" style={{ minHeight: '600px' }}>
            {status === 'connected' ? (
              <canvas
                ref={canvasRef}
                width={1920}
                height={1080}
                className="w-full h-auto cursor-pointer"
                onMouseDown={sendMouseEvent}
                onMouseUp={sendMouseEvent}
                onMouseMove={sendMouseEvent}
                onKeyDown={sendKeyEvent}
                onKeyUp={sendKeyEvent}
                tabIndex={0}
                style={{ imageRendering: 'auto' }}
              />
            ) : (
              <div className="flex items-center justify-center h-full min-h-[600px]">
                <div className="text-center">
                  {status === 'connecting' && (
                    <>
                      <div className="animate-spin text-6xl mb-4">🔄</div>
                      <p className="text-white text-lg">Connecting to remote desktop...</p>
                    </>
                  )}
                  {status === 'disconnected' && (
                    <>
                      <div className="text-6xl mb-4">⚪</div>
                      <p className="text-white text-lg">Not connected</p>
                    </>
                  )}
                  {status === 'error' && (
                    <>
                      <div className="text-6xl mb-4">❌</div>
                      <p className="text-white text-lg">Connection failed</p>
                      <p className="text-gray-400 text-sm mt-2">{error}</p>
                    </>
                  )}
                </div>
              </div>
            )}
          </div>
        </div>
 
        {/* Phase info */}
        <div className="border-t border-gray-200 px-6 py-4 bg-gray-50">
          <div className="text-sm text-gray-600">
            {phase === 1 && (
              <p>
                <strong>Phase 1:</strong> Authentication and ping/pong testing. 
                Screen streaming coming in Phase 2.
              </p>
            )}
            {phase === 2 && (
              <p>
                <strong>Phase 2:</strong> Screen streaming active. 
                Mouse and keyboard input functional.
              </p>
            )}
            {phase === 3 && (
              <p>
                <strong>Phase 3:</strong> Quality controls, compression, clipboard sync, and file transfer.
              </p>
            )}
            {phase === 4 && (
              <p>
                <strong>Phase 4:</strong> Production-ready with full optimization and polish.
              </p>
            )}
          </div>
        </div>
      </div>
    </div>
  );
 
  return embedded ? content : <MainLayout>{content}</MainLayout>;
}