@fraku/video 0.0.1

package/src/components/ZoomVideoPlugin/hooks/useStartVideoOptions.ts

@@ -0,0 +1,14 @@
+import { Stream } from '@zoom/videosdk'
+import { useMemo } from 'react'
+
+export const useStartVideoOptions = ({ mediaStream }: { mediaStream: typeof Stream | null }) => {
+  return useMemo(
+    () => ({
+      hd: true,
+      fullHd: true,
+      ptz: mediaStream?.isBrowserSupportPTZ(),
+      originalRatio: true
+    }),
+    [mediaStream]
+  )
+}

package/src/components/ZoomVideoPlugin/hooks/useZoomVideoPlayer.tsx

@@ -0,0 +1,142 @@
+import { useEffect, type RefObject } from 'react'
+import { useEffectOnce } from 'react-use'
+import { type VideoClient, type Participant, VideoQuality, VideoPlayer, ConnectionState } from '@zoom/videosdk'
+import { VIDEO_PLACEHOLDER } from './../constants'
+import { useZoomVideoContext } from '../context'
+import { useStartVideoOptions } from './useStartVideoOptions'
+
+type UseZoomVideoPlayerProps = {
+  fullRef: RefObject<HTMLVideoElement | null>
+}
+
+/* Create a name tag for the video */
+const createNameTag = ({ name, isMicOff }: { name: string; isMicOff: boolean }): HTMLDivElement => {
+  const container = document.createElement('div')
+  container.className = 'absolute top-[2px] px-4 py-4 opacity-[0.6] w-full h-fit flex items-center justify-between'
+  const nameTag = document.createElement('div')
+  container.appendChild(nameTag)
+  nameTag.textContent = name
+  nameTag.className = 'bg-neutral-40 text-s font-bold text-white px-4 py-4 rounded-m max-w-[60%] truncate'
+
+  const micOffSpan = document.createElement('i')
+  micOffSpan.className = 'fa-regular fa-microphone-slash w-24 h-24 !text-white'
+  isMicOff ? micOffSpan.classList.remove('hidden') : micOffSpan.classList.add('hidden')
+  container.appendChild(micOffSpan)
+
+  return container
+}
+
+/* Determine which user video to show */
+const getRenderTargetUserId = (
+  zmClient: typeof VideoClient,
+  participants: Participant[],
+  activeVideoId: number | null
+): number | null => {
+  if (!participants?.length) return null
+  const selfId = zmClient?.getCurrentUserInfo()?.userId ?? null
+  if (participants.length === 1) return selfId
+  if (participants.length === 2) {
+    return participants.find((p) => p.userId !== selfId)?.userId ?? selfId
+  }
+  return activeVideoId ?? selfId
+}
+
+export const useZoomVideoPlayer = ({ fullRef }: UseZoomVideoPlayerProps) => {
+  const {
+    activeAudioOutput,
+    activeMicrophone,
+    activeVideoId,
+    connectionState,
+    isCamOn,
+    isMicOn,
+    mediaStream,
+    participants,
+    zmClient
+  } = useZoomVideoContext()
+
+  useEffect(() => {
+    const containerEl = fullRef.current
+    if (!mediaStream || !containerEl || !zmClient || connectionState === ConnectionState.Closed) return
+
+    const userId = getRenderTargetUserId(zmClient, participants, activeVideoId)
+    if (!userId) return
+
+    let videoElement: VideoPlayer | null = null
+    let wrapperEl: HTMLDivElement | null = null
+
+    const attach = async () => {
+      const participant = participants.find((p) => p.userId === userId)
+      const displayName = participant?.displayName ?? ''
+      const nameTag = createNameTag({ name: displayName, isMicOff: participant?.muted || !participant?.audio })
+
+      // Clear previous content
+      containerEl.innerHTML = ''
+
+      // Create wrapper for video and name tag
+      wrapperEl = document.createElement('div')
+      wrapperEl.className = 'relative w-full h-full'
+
+      try {
+        // Create or reuse the video-player element
+        const element = await mediaStream.attachVideo(userId, VideoQuality.Video_720P)
+        videoElement = element as VideoPlayer
+        if (!videoElement) throw new Error('No video element')
+
+        // Add video
+        wrapperEl.appendChild(videoElement)
+        // Add name tag
+        wrapperEl.appendChild(nameTag)
+        // Append to container
+        containerEl.appendChild(wrapperEl)
+      } catch (err) {
+        console.warn('Failed to attach video, using placeholder:', err)
+        containerEl.innerHTML = VIDEO_PLACEHOLDER
+        containerEl.appendChild(nameTag)
+      }
+    }
+
+    attach()
+
+    return () => {
+      if (videoElement && userId) {
+        try {
+          mediaStream.detachVideo(userId)
+          videoElement.remove()
+        } catch (err) {
+          console.warn('Failed to detach video:', err)
+        }
+      }
+      if (wrapperEl) wrapperEl.remove()
+    }
+  }, [activeVideoId, connectionState, fullRef, mediaStream, participants, zmClient])
+
+  // Manage local camera
+  const startVideoOptions = useStartVideoOptions({ mediaStream })
+  useEffect(() => {
+    if (!mediaStream || connectionState === ConnectionState.Closed) return
+
+    const toggleCam = async () => {
+      try {
+        const isCapturing = mediaStream.isCapturingVideo()
+
+        if (isCamOn && !isCapturing) {
+          await mediaStream.startVideo(startVideoOptions)
+        } else if (!isCamOn && isCapturing) {
+          await mediaStream.stopVideo()
+        }
+      } catch (err: any) {
+        console.warn('Video toggle failed:', err)
+      }
+    }
+
+    toggleCam()
+  }, [mediaStream, isCamOn, startVideoOptions, connectionState])
+
+  // Initialize microphone on join if mic is on
+  useEffectOnce(() => {
+    if (!mediaStream || !isMicOn) {
+      return
+    }
+    mediaStream.startAudio({ microphoneId: activeMicrophone, speakerId: activeAudioOutput }).catch(console.warn)
+  })
+}

package/src/components/ZoomVideoPlugin/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ZoomVideoPlugin'
+export type { ZoomVideoPluginProps } from './types'

package/src/components/ZoomVideoPlugin/lib/platforms.ts

@@ -0,0 +1,17 @@
+export const isIPad = (): boolean => {
+  const { userAgent, maxTouchPoints } = navigator
+  const isiPadClassic = /iPad/i.test(userAgent)
+  const isiPadOS = /Macintosh/i.test(userAgent) && maxTouchPoints > 1
+  return isiPadClassic || isiPadOS
+}
+
+export const isIOSMobile = (): boolean => {
+  const { userAgent } = navigator
+  return /iPhone|iPad|iPod/i.test(userAgent) || isIPad()
+}
+
+export const isAndroidBrowser = (): boolean => /Android/i.test(navigator.userAgent)
+
+export const isAndroidOrIOSBrowser = (): boolean => {
+  return isAndroidBrowser() || isIOSMobile()
+}

package/src/components/ZoomVideoPlugin/pages/AfterSession.tsx

@@ -0,0 +1,14 @@
+import { Button } from 'primereact/button'
+
+const AfterSession = ({ restartSession }: { restartSession: () => void }) => {
+  return (
+    <div className="flex flex-col gap-24 py-16 justify-center items-center w-full">
+      <h2>After Session</h2>
+      <Button className="w-fit" onClick={restartSession}>
+        Restart Session
+      </Button>
+    </div>
+  )
+}
+
+export default AfterSession

package/src/components/ZoomVideoPlugin/pages/MainSession.tsx

@@ -0,0 +1,53 @@
+import { useRef } from 'react'
+import { useUnmount } from 'react-use'
+import Video from '../components/Video'
+import { Button } from 'primereact/button'
+import { useZoomVideoContext } from '../context'
+import { useZoomVideoPlayer } from '../hooks/useZoomVideoPlayer'
+import ParticipantsList from '../components/ParticipantsList'
+
+const MainSession = () => {
+  const { activeVideoId, zmClient, mediaStream, stopSession, setIsCamOn, setIsMicOn, participants } =
+    useZoomVideoContext()
+
+  const fullRef = useRef<HTMLVideoElement>(null)
+
+  useZoomVideoPlayer({ fullRef })
+
+  useUnmount(() => {
+    if (zmClient?.getSessionInfo().isInMeeting) {
+      if (zmClient?.getCurrentUserInfo().audio) {
+        mediaStream?.stopAudio().catch(console.warn)
+      }
+      if (zmClient?.getCurrentUserInfo()?.bVideoOn) {
+        mediaStream?.stopVideo().catch(console.warn)
+      }
+
+      mediaStream?.stopShareScreen().catch(console.warn)
+    }
+  })
+
+  return (
+    <div className="flex flex-col gap-24 py-16 justify-start w-full">
+      <div className="flex flex-col gap-16 items-center justify-center w-full">
+        <div className="flex flex-col gap-16 items-center justify-center w-full @sm:w-[640px] @md:w-[680px] mx-auto">
+          <Video fullRef={fullRef} />
+
+          <p>Active video id: {activeVideoId}</p>
+          <ParticipantsList
+            zmClient={zmClient}
+            setIsCamOn={setIsCamOn}
+            setIsMicOn={setIsMicOn}
+            participants={participants}
+          />
+
+          <Button className="w-fit" onClick={stopSession}>
+            Stop Session
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default MainSession

package/src/components/ZoomVideoPlugin/pages/PanelistsSession.tsx

@@ -0,0 +1,97 @@
+import { useCallback, useRef } from 'react'
+import { Button } from 'primereact/button'
+import { useUnmount } from 'react-use'
+import Video from '../components/Video'
+import { useZoomVideoContext } from '../context'
+import { useZoomVideoPlayer } from '../hooks/useZoomVideoPlayer'
+import ParticipantsList from '../components/ParticipantsList'
+import ButtonsDock from '../components/ButtonsDock'
+import { SessionStep } from '../types'
+
+const PanelistsSession = ({ initMainSession }: { initMainSession: () => void }) => {
+  const {
+    activeMicrophone,
+    activeAudioOutput,
+    activeVideoId,
+    mediaStream,
+    stopSession,
+    setIsCamOn,
+    setIsMicOn,
+    participants,
+    switchActiveMicrophone,
+    setActiveCamera,
+    switchActiveAudioOutput,
+    zmClient
+  } = useZoomVideoContext()
+
+  const fullRef = useRef<HTMLVideoElement>(null)
+
+  useZoomVideoPlayer({ fullRef })
+
+  const switchActiveCamera = useCallback(
+    (deviceId: string) => {
+      setActiveCamera(deviceId)
+      mediaStream?.switchCamera(deviceId)
+    },
+    [mediaStream, setActiveCamera]
+  )
+
+  const toggleMicrophone = useCallback(async () => {
+    if (!mediaStream || !zmClient) return
+    if (zmClient.getCurrentUserInfo().audio) {
+      await mediaStream.stopAudio().catch(console.warn)
+      setIsMicOn(false)
+    } else {
+      await mediaStream.startAudio({ microphoneId: activeMicrophone, speakerId: activeAudioOutput }).catch(console.warn)
+      setIsMicOn(true)
+    }
+  }, [activeMicrophone, activeAudioOutput, mediaStream, setIsMicOn, zmClient])
+
+  useUnmount(() => {
+    if (zmClient?.getSessionInfo().isInMeeting) {
+      if (zmClient?.getCurrentUserInfo().audio) {
+        mediaStream?.stopAudio().catch(console.warn)
+      }
+      if (zmClient?.getCurrentUserInfo()?.bVideoOn) {
+        mediaStream?.stopVideo().catch(console.warn)
+      }
+
+      mediaStream?.stopShareScreen().catch(console.warn)
+    }
+  })
+
+  return (
+    <div className="flex flex-col gap-24 py-16 justify-start w-full">
+      <div className="flex flex-col @sm:flex-row gap-8 p-16 items-center justify-between bg-warning-90 w-full">
+        <p>Estás en una conferencia de prueba, abre sesión para invitar a todos el listado de asistentes.</p>
+        <Button onClick={initMainSession} className="whitespace-pre-line">
+          Abrir videoconferencia
+        </Button>
+      </div>
+
+      <div className="flex flex-col gap-16 items-center justify-center w-full @sm:w-[640px] @md:w-[680px] mx-auto">
+        <Video fullRef={fullRef} />
+
+        <ButtonsDock
+          exit={stopSession}
+          sessionStep={SessionStep.OnlyPanelistsSession}
+          setIsCamOn={() => setIsCamOn((prev) => !prev)}
+          setIsMicOn={toggleMicrophone}
+          setActiveMicrophone={switchActiveMicrophone}
+          setActiveCamera={switchActiveCamera}
+          setActiveAudioOutput={switchActiveAudioOutput}
+        />
+
+        <p>Active video id: {activeVideoId}</p>
+        <ParticipantsList
+          zmClient={zmClient}
+          setIsCamOn={setIsCamOn}
+          setIsMicOn={setIsMicOn}
+          participants={participants}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default PanelistsSession

package/src/components/ZoomVideoPlugin/pages/PreSessionConfiguration.tsx

@@ -0,0 +1,154 @@
+import { useRef, useState, useCallback } from 'react'
+import ZoomVideo from '@zoom/videosdk'
+import { Button } from 'primereact/button'
+import { useEffectOnce, useUnmount } from 'react-use'
+import { useZoomVideoContext } from '../context'
+import Video from '../components/Video'
+import ButtonsDock from '../components/ButtonsDock'
+import { VIDEO_PLACEHOLDER } from '../constants'
+import { SessionStep } from '../types'
+
+const PreSessionConfiguration = ({ joinSession }: { joinSession: () => Promise<void> }) => {
+  const {
+    closeParentContainer,
+    localAudio,
+    localVideo,
+    setIsCamOn,
+    setIsMicOn,
+    setActiveCamera,
+    switchActiveAudioOutput,
+    switchActiveMicrophone,
+    setLocalVideo
+  } = useZoomVideoContext()
+  const [isVideoStarted, setIsVideoStarted] = useState(false)
+  const [isAudioStarted, setIsAudioStarted] = useState(false)
+  const videoRef = useRef<HTMLVideoElement | null>(null)
+
+  const stopLocalVideo = useCallback(async () => {
+    const containerEl = videoRef.current
+    if (!containerEl || !localVideo) return
+    try {
+      await localVideo.stop()
+      setIsVideoStarted(false)
+      containerEl.innerHTML = VIDEO_PLACEHOLDER
+      setIsCamOn(false)
+    } catch (error) {
+      console.error('Error stopping local video:', error)
+      await localVideo.start(containerEl)
+      setIsVideoStarted(true)
+    }
+  }, [localVideo, setIsCamOn])
+
+  const stopLocalAudio = useCallback(async () => {
+    if (!localAudio) return
+    try {
+      await localAudio.stop()
+      setIsAudioStarted(false)
+      setIsMicOn(false)
+    } catch (error) {
+      console.error('Error stopping local audio:', error)
+      await localAudio.start()
+    }
+  }, [localAudio, setIsMicOn])
+
+  const toggleLocalVideo = useCallback(async () => {
+    if (!localVideo) return
+    if (isVideoStarted) {
+      await stopLocalVideo()
+    } else if (videoRef.current) {
+      try {
+        await localVideo.start(videoRef.current)
+        setIsVideoStarted(true)
+        setIsCamOn(true)
+      } catch (error) {
+        console.error('Error starting local video:', error)
+      }
+    }
+  }, [localVideo, isVideoStarted, stopLocalVideo, setIsCamOn])
+
+  const toggleAudioMuteStatus = useCallback(async () => {
+    if (!localAudio) return
+    if (isAudioStarted) {
+      await stopLocalAudio()
+    } else {
+      try {
+        await localAudio.start()
+        setIsAudioStarted(true)
+        setIsMicOn(true)
+      } catch (error) {
+        console.error('Error starting local audio:', error)
+      }
+    }
+  }, [isAudioStarted, localAudio, stopLocalAudio, setIsMicOn])
+
+  const switchActiveCamera = async (deviceId: string) => {
+    if (!localVideo) return
+    setActiveCamera(deviceId)
+    if (!isVideoStarted) return
+    await localVideo.stop()
+    setLocalVideo(ZoomVideo.createLocalVideoTrack(deviceId))
+    if (!videoRef.current) return
+    await localVideo.start(videoRef.current)
+  }
+
+  const exit = useCallback(async () => {
+    if (isVideoStarted) await stopLocalVideo()
+    if (isAudioStarted) await stopLocalAudio()
+    closeParentContainer()
+  }, [isVideoStarted, isAudioStarted, stopLocalVideo, stopLocalAudio, closeParentContainer])
+
+  useEffectOnce(() => {
+    const startLocalMedia = async () => {
+      if (!videoRef.current || !localVideo || !localAudio) return
+      try {
+        await localVideo.start(videoRef.current).catch(console.error)
+        await localAudio.start().catch(console.error)
+        setIsVideoStarted(true)
+        setIsAudioStarted(true)
+        setIsCamOn(true)
+        setIsMicOn(true)
+      } catch (error) {
+        console.error('Error starting local media:', error)
+      }
+    }
+
+    startLocalMedia()
+  })
+
+  useUnmount(async () => {
+    if (isAudioStarted) {
+      await stopLocalAudio().catch(console.error)
+    }
+    if (isVideoStarted) {
+      await stopLocalVideo().catch(console.error)
+    }
+  })
+
+  return (
+    <div className="flex flex-col gap-24 py-16 items-center justify-between w-full">
+      <section className="flex flex-col gap-8 py-16 items-center text-center">
+        <h3>Acceso a la videoconferencia</h3>
+        <p>Comprueba que todo funciona correctamente para una mejor experiencia en la videollamada.</p>
+      </section>
+
+      <div className="flex flex-col gap-16 items-center justify-center w-full sm:w-[640px] md:w-[680px] mx-auto">
+        <Video fullRef={videoRef} />
+        <ButtonsDock
+          exit={exit}
+          sessionStep={SessionStep.LocalSettingsConfiguration}
+          setIsCamOn={toggleLocalVideo}
+          setIsMicOn={toggleAudioMuteStatus}
+          setActiveMicrophone={switchActiveMicrophone}
+          setActiveCamera={switchActiveCamera}
+          setActiveAudioOutput={switchActiveAudioOutput}
+        />
+      </div>
+
+      <section className="flex flex-col gap-8">
+        <Button onClick={joinSession} label="Acceder a la videoconferencia" />
+      </section>
+    </div>
+  )
+}
+
+export default PreSessionConfiguration

package/src/components/ZoomVideoPlugin/types.global.d.ts

@@ -0,0 +1,15 @@
+// Global type declarations for Zoom Video SDK custom elements
+declare global {
+  interface Window {
+    webEndpoint?: string
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'video-player-container': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
+      'video-player': React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>
+    }
+  }
+}
+
+export {}

package/src/components/ZoomVideoPlugin/types.ts

@@ -0,0 +1,23 @@
+import React from 'react'
+
+export enum SessionStep {
+  LocalSettingsConfiguration,
+  OnlyPanelistsSession,
+  MainSession,
+  AfterSession
+}
+
+export type Credentials = {
+  sessionName: string
+  signature: string
+  userName: string
+  sessionPasscode: string
+}
+
+export type ReactSetter<T> = React.Dispatch<React.SetStateAction<T>>
+
+export type ZoomVideoPluginProps = {
+  credentials: Credentials | null
+  closeParentContainer: () => void
+  setIsCloseButtonVisible: ReactSetter<boolean>
+}

package/src/global.d.ts

@@ -0,0 +1,46 @@
+type PromiseType<T extends (..._: any) => any> = Awaited<ReturnType<T>>
+
+type DeepPartial<T> = {
+  [P in keyof T]?: DeepPartial<T[P]>
+}
+
+type ReactSetter<T> = React.Dispatch<React.SetStateAction<T>>
+
+interface AwsWafCaptcha {
+  renderCaptcha: (
+    container: HTMLElement,
+    options: {
+      apiKey: string
+      onSuccess: (wafToken: string) => void
+      onLoad?: () => void
+      onError?: () => void
+      onPuzzleTimeout?: () => void
+      onPuzzleIncorrect?: () => void
+      onPuzzleCorrect?: () => void
+      defaultLocale?: string
+      disableLanguageSelector?: boolean
+      dynamicWidth?: boolean
+      skipTitle?: boolean
+    }
+  ) => void
+}
+
+interface AwsWafIntegration {
+  getToken: () => Promise<string>
+  hasToken: () => boolean
+  forceRefreshToken: () => Promise<void>
+}
+
+interface Window {
+  dataLayer: Record<string, unknown>[]
+  AwsWafCaptcha: AwsWafCaptcha
+  AwsWafIntegration: AwsWafIntegration
+  awsWafCookieDomainList: string[]
+
+  documentPictureInPicture: {
+    requestWindow: (options: { width: number; height: number }) => Promise<Window>
+    addEventListener: (type: 'enter' | 'leave', listener: (event: any) => void) => void
+    window: Window | null
+  }
+  webEndpoint: string | undefined
+}

package/src/index.css

@@ -0,0 +1,4 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+

package/src/index.ts

@@ -0,0 +1,4 @@
+import './index.css'
+
+export { default as ZoomVideoPlugin } from './components/ZoomVideoPlugin'
+export type { ZoomVideoPluginProps } from './components/ZoomVideoPlugin'

package/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)

package/src/vite-env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_ZOOM_SESSION_NAME?: string
+  readonly VITE_ZOOM_SIGNATURE?: string
+  readonly VITE_ZOOM_USER_NAME?: string
+  readonly VITE_ZOOM_SESSION_PASSCODE?: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}