ScreenAppRecorder.tsx

import { useEffect, useRef, useState } from 'react';

// Extend Window interface to include ScreenApp
declare global {
  interface Window {
    ScreenApp?: new (
      apiKey: string,
      callback: (data: RecordingData) => void,
      options?: ScreenAppOptions
    ) => ScreenAppInstance;
  }
}

interface RecordingData {
  id: string;
  _id: string;
  url: string;
  name?: string;
  title?: string;
  description?: string;
  duration?: number;
  size?: number;
  thumbnailUrl?: string;
  createdAt?: string;
}

interface ScreenAppOptions {
  uiMode?: 'fullscreen' | 'popup';
}

interface ScreenAppInstance {
  mount: (selector: string) => Promise<void>;
  unMount: () => void;
}

interface ScreenAppRecorderProps {
  apiKey: string; // Plugin token
  pluginUrl?: string;
  onRecordingComplete?: (recording: RecordingData) => void;
  uiMode?: 'fullscreen' | 'popup';
  containerClassName?: string;
}

export default function ScreenAppRecorder({
  apiKey,
  pluginUrl = 'https://embed.screenapp.io/app/plugin-latest.bundle.js',
  onRecordingComplete,
  uiMode = 'fullscreen',
  containerClassName = '',
}: ScreenAppRecorderProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const screenAppInstanceRef = useRef<ScreenAppInstance | null>(null);
  const containerIdRef = useRef<string>(`screenapp-container-${Math.random().toString(36).substr(2, 9)}`);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [isPluginLoaded, setIsPluginLoaded] = useState(false);

  // Load the ScreenApp plugin script
  useEffect(() => {
    const scriptId = 'screenapp-plugin-script';

    // Remove existing script if URL changed
    const existingScript = document.getElementById(scriptId);
    if (existingScript && existingScript.getAttribute('src') !== pluginUrl) {
      existingScript.remove();
      setIsPluginLoaded(false);
    }

    // Check if script with correct URL already exists
    if (existingScript && existingScript.getAttribute('src') === pluginUrl) {
      setIsPluginLoaded(true);
      setIsLoading(false);
      return;
    }

    const script = document.createElement('script');
    script.id = scriptId;
    script.charset = 'UTF-8';
    script.type = 'module';
    script.src = pluginUrl;

    script.onload = () => {
      console.log('ScreenApp plugin loaded successfully from:', pluginUrl);
      setIsPluginLoaded(true);
      setIsLoading(false);
    };

    script.onerror = () => {
      console.error('Failed to load ScreenApp plugin from:', pluginUrl);
      setError(`Failed to load plugin from: ${pluginUrl}`);
      setIsLoading(false);
    };

    document.head.appendChild(script);

    return () => {
      // Cleanup: Remove script on unmount
      const scriptToRemove = document.getElementById(scriptId);
      if (scriptToRemove) {
        scriptToRemove.remove();
      }
    };
  }, [pluginUrl]);

  // Initialize and mount ScreenApp when plugin is loaded
  useEffect(() => {
    if (!isPluginLoaded || !window.ScreenApp) {
      return;
    }

    const initializeScreenApp = async () => {
      try {
        setIsLoading(true);
        setError(null);

        // Wait for next tick to ensure DOM is ready
        await new Promise(resolve => setTimeout(resolve, 0));

        // Verify container exists
        if (!containerRef.current) {
          throw new Error('Container element not available');
        }

        const containerId = containerIdRef.current;
        const containerElement = document.getElementById(containerId);

        if (!containerElement) {
          throw new Error(`Container element #${containerId} not found in DOM`);
        }

        // Create callback function
        const handleRecordingComplete = (recording: RecordingData) => {
          console.log('Recording completed:', recording);
          if (onRecordingComplete) {
            onRecordingComplete(recording);
          }
        };

        // Create ScreenApp instance
        const screenApp = new window.ScreenApp!(
          apiKey,
          handleRecordingComplete,
          { uiMode }
        );

        // Mount to container
        await screenApp.mount(`#${containerId}`);

        // Store instance for cleanup
        screenAppInstanceRef.current = screenApp;
        setIsLoading(false);
      } catch (err) {
        console.error('Error initializing ScreenApp:', err);
        setError(
          err instanceof Error
            ? err.message
            : 'Failed to initialize ScreenApp. Please check your plugin token.'
        );
        setIsLoading(false);
      }
    };

    initializeScreenApp();

    // Cleanup on unmount
    return () => {
      if (screenAppInstanceRef.current) {
        screenAppInstanceRef.current.unMount();
        screenAppInstanceRef.current = null;
      }
    };
  }, [isPluginLoaded, apiKey, uiMode, onRecordingComplete]);

  if (error) {
    return (
      <div className="screenapp-error" style={{
        padding: '20px',
        backgroundColor: '#fee',
        border: '1px solid #fcc',
        borderRadius: '8px',
        color: '#c33',
      }}>
        <h3 style={{ margin: '0 0 10px 0' }}>Error</h3>
        <p style={{ margin: 0 }}>{error}</p>
      </div>
    );
  }

  return (
    <div className={`screenapp-recorder-wrapper ${containerClassName}`}>
      {isLoading && (
        <div className="screenapp-loading" style={{
          padding: '40px',
          textAlign: 'center',
          backgroundColor: '#f5f5f5',
          borderRadius: '8px',
        }}>
          <div style={{
            display: 'inline-block',
            width: '40px',
            height: '40px',
            border: '4px solid #ddd',
            borderTopColor: '#4a90e2',
            borderRadius: '50%',
            animation: 'spin 1s linear infinite',
          }} />
          <p style={{ marginTop: '16px', color: '#666' }}>
            Loading ScreenApp Recorder...
          </p>
          <style>{`
            @keyframes spin {
              to { transform: rotate(360deg); }
            }
          `}</style>
        </div>
      )}
      <div
        id={containerIdRef.current}
        ref={containerRef}
        style={{
          minHeight: isLoading ? 0 : '400px',
          display: isLoading ? 'none' : 'block',
        }}
      />
    </div>
  );
}