@fraku/video 0.0.1 → 0.0.2

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

@@ -1,97 +0,0 @@
-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

@@ -1,154 +0,0 @@
-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

@@ -1,15 +0,0 @@
-// 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

@@ -1,23 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

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

package/src/index.ts

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

package/src/main.tsx

@@ -1,10 +0,0 @@
-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

@@ -1,12 +0,0 @@
-/// <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
-}