@fraku/video 0.0.1 → 0.0.2

package/src/components/ZoomVideoPlugin/components/SettingsOverlay/Tabs/VideoSettings.tsx

@@ -1,30 +0,0 @@
-import { Dropdown } from 'primereact/dropdown'
-import { useZoomVideoContext } from '../../../context'
-import DropdownValueTemplate from './DropdownValueTemplate'
-import DropdownItemTemplate from './DropdownItemTemplate'
-
-const VideoSettings = () => {
-  const { activeCamera, cameraList, setActiveCamera } = useZoomVideoContext()
-
-  const cameraOptions = cameraList.map((camera) => ({
-    label: camera.label || `Cámara ${camera.deviceId}`,
-    value: camera.deviceId
-  }))
-
-  return (
-    <div className="flex flex-col">
-      <p className="text-s font-bold mb-8">Cámara</p>
-      <Dropdown
-        itemTemplate={(option) => <DropdownItemTemplate option={option} isActive={option.value === activeCamera} />}
-        className="mb-16"
-        onChange={(e) => setActiveCamera(e.value)}
-        options={cameraOptions}
-        placeholder="Selecciona una cámara"
-        value={activeCamera ?? ''}
-        valueTemplate={(option) => <DropdownValueTemplate option={option} icon="fa-regular fa-video" />}
-      />
-    </div>
-  )
-}
-
-export default VideoSettings

package/src/components/ZoomVideoPlugin/components/SettingsOverlay/context.ts

@@ -1,20 +0,0 @@
-import { useContext, createContext } from 'react'
-import { ReactSetter } from '../../types'
-
-export enum SettingsTab {
-  Audio = 'Audio',
-  Video = 'Video',
-  Background = 'Background'
-}
-
-export type SettingsOverlayContextProps = {
-  selectedSettingsTab: SettingsTab
-  setSelectedSettingsTab: ReactSetter<SettingsTab>
-}
-
-export const settingsOverlayContext = createContext<SettingsOverlayContextProps>({
-  selectedSettingsTab: SettingsTab.Audio,
-  setSelectedSettingsTab: () => {}
-})
-
-export const useSettingsOverlayContext = () => useContext(settingsOverlayContext)

package/src/components/ZoomVideoPlugin/components/SettingsOverlay/index.ts

@@ -1 +0,0 @@
-export { default } from './SettingsOverlay'

package/src/components/ZoomVideoPlugin/components/Video.tsx

@@ -1,35 +0,0 @@
-import styled from 'styled-components'
-
-type VideoProps = {
-  fullRef: React.RefObject<HTMLVideoElement> | null
-}
-const Video = ({ fullRef }: VideoProps) => {
-  return (
-    <StyledVideoContainer>
-      <video-player-container className="video-player-container">
-        <video-player ref={fullRef} className="video-player" />
-      </video-player-container>
-    </StyledVideoContainer>
-  )
-}
-
-const StyledVideoContainer = styled.div`
-  width: 100%;
-  height: auto;
-  aspect-ratio: 16/9;
-
-  & video-player-container {
-    margin-left: auto;
-    margin-right: auto;
-    width: 100%;
-    height: auto;
-
-    video-player {
-      width: 100%;
-      height: auto;
-      aspect-ratio: 16/9;
-    }
-  }
-`
-
-export default Video

package/src/components/ZoomVideoPlugin/constants.ts

@@ -1,4 +0,0 @@
-export const VIDEO_PLACEHOLDER =
-  '<div class="video-placeholder flex items-center justify-center bg-neutral-20 w-full h-full aspect-video text-white"><i class="fa-regular fa-video-slash fa-lg"/></div>'
-
-export const SETTINGS_OVERLAY_WIDTH = 680

package/src/components/ZoomVideoPlugin/context.ts

@@ -1,86 +0,0 @@
-import { createContext, useContext } from 'react'
-import ZoomVideo, {
-  ActiveSpeaker,
-  ConnectionState,
-  LocalAudioTrack,
-  LocalVideoTrack,
-  MediaDevice,
-  Participant,
-  Stream,
-  VideoClient
-} from '@zoom/videosdk'
-import { Breakpoint } from './hooks/useDeviceSize'
-
-export const zmClient = ZoomVideo.createClient()
-
-export type ZoomVideoContextType = {
-  activeAudioOutput: string | undefined
-  activeCamera: string | undefined
-  activeMicrophone: string | undefined
-  activeSpeakers: ActiveSpeaker[]
-  activeVideoId: number | null
-  audioOutputList: MediaDevice[]
-  breakpoint: Breakpoint
-  cameraList: MediaDevice[]
-  closeParentContainer: () => void
-  connectionState: ConnectionState | null
-  isBlurred: boolean
-  isCamOn: boolean
-  isMicOn: boolean
-  localAudio: LocalAudioTrack | undefined
-  localVideo: LocalVideoTrack | undefined
-  mediaStream: typeof Stream | null
-  micList: MediaDevice[]
-  participants: Participant[]
-  setActiveCamera: ReactSetter<string | undefined>
-  setIsBlurred: ReactSetter<boolean>
-  setIsCamOn: ReactSetter<boolean>
-  setIsMicOn: ReactSetter<boolean>
-  setLocalAudio: ReactSetter<LocalAudioTrack>
-  setLocalVideo: ReactSetter<LocalVideoTrack>
-  setMediaStream: ReactSetter<typeof Stream | null>
-  setParticipants: ReactSetter<Participant[]>
-  stopSession: () => Promise<void>
-  switchActiveAudioOutput: (deviceId: string) => Promise<void>
-  switchActiveMicrophone: (deviceId: string) => Promise<void>
-  zmClient: typeof VideoClient
-}
-
-export const ZoomVideoContext = createContext<ZoomVideoContextType>({
-  activeAudioOutput: undefined,
-  activeCamera: undefined,
-  activeMicrophone: undefined,
-  activeSpeakers: [],
-  activeVideoId: null,
-  audioOutputList: [],
-  breakpoint: Breakpoint.Mobile,
-  cameraList: [],
-  closeParentContainer: () => {},
-  connectionState: null,
-  isBlurred: false,
-  isCamOn: false,
-  isMicOn: false,
-  localAudio: undefined,
-  localVideo: undefined,
-  mediaStream: null,
-  micList: [],
-  participants: [],
-  setActiveCamera: () => {},
-  setIsBlurred: () => {},
-  setIsCamOn: () => {},
-  setIsMicOn: () => {},
-  setLocalAudio: () => {},
-  setLocalVideo: () => {},
-  setMediaStream: () => {},
-  setParticipants: () => {},
-  stopSession: async () => {},
-  switchActiveAudioOutput: () => Promise.resolve(),
-  switchActiveMicrophone: () => Promise.resolve(),
-  zmClient
-})
-
-export const useZoomVideoContext = () => {
-  const ctx = useContext(ZoomVideoContext)
-  if (!ctx) throw new Error('useZoomVideo must be used within ZoomVideoProvider')
-  return ctx
-}

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

@@ -1,142 +0,0 @@
-import { useEffect } from 'react'
-import {
-  type ActiveSpeaker,
-  CommandChannelMsg,
-  ConnectionChangePayload,
-  ConnectionState,
-  MediaDevice,
-  type Participant,
-  type Stream,
-  VideoActiveState,
-  type VideoClient
-} from '@zoom/videosdk'
-import { isAndroidOrIOSBrowser } from '../lib/platforms'
-
-type Props = {
-  zmClient: typeof VideoClient | null
-  mediaStream: typeof Stream | null
-  setActiveMicrophone: ReactSetter<string | undefined>
-  setActiveAudioOutput: ReactSetter<string | undefined>
-  setActiveCamera: ReactSetter<string | undefined>
-  setMicList: ReactSetter<MediaDevice[]>
-  setAudioOutputList: ReactSetter<MediaDevice[]>
-  setCameraList: ReactSetter<MediaDevice[]>
-  setConnectionState: ReactSetter<ConnectionState | null>
-  setIsCamOn: ReactSetter<boolean>
-  setIsMicOn: ReactSetter<boolean>
-  setActiveSpeakers: ReactSetter<ActiveSpeaker[]>
-  setParticipants: ReactSetter<Participant[]>
-  setActiveVideoId: ReactSetter<number | null>
-  setHandRaises: ReactSetter<Record<string, boolean>>
-}
-
-export const useClientMessages = ({
-  zmClient,
-  mediaStream,
-  setActiveMicrophone,
-  setActiveAudioOutput,
-  setActiveCamera,
-  setMicList,
-  setAudioOutputList,
-  setCameraList,
-  setConnectionState,
-  setIsCamOn,
-  setIsMicOn,
-  setActiveSpeakers,
-  setActiveVideoId,
-  setParticipants,
-  setHandRaises
-}: Props) => {
-  useEffect(() => {
-    if (!mediaStream || !zmClient) return
-
-    setActiveVideoId(mediaStream?.getActiveVideoId() ?? null)
-
-    const onCommandChannelMessage = (payload: CommandChannelMsg) => {
-      console.log('onCommandChannelMessage payload: ', payload)
-      try {
-        const data = JSON.parse(payload?.text)
-        if (data.type === 'RAISE_HAND') {
-          setHandRaises((prev) => ({ ...prev, [data.userId]: true }))
-        } else if (data.type === 'LOWER_HAND') {
-          setHandRaises((prev) => ({ ...prev, [data.userId]: false }))
-        }
-      } catch (e) {
-        console.warn('Invalid command message', e)
-      }
-    }
-
-    const onConnectionChange = (payload: ConnectionChangePayload) => {
-      setConnectionState(payload.state)
-      console.log(`Connection state changed to ${payload.state}, reason: ${payload.reason}`)
-    }
-
-    const onParticipantChange = () => {
-      const allUsers = zmClient.getAllUser()
-      setParticipants(allUsers)
-    }
-
-    const onActiveVideoChange = (payload: { state: VideoActiveState; userId: number }) => {
-      const { state, userId } = payload
-      if (state === 'Active') {
-        setActiveVideoId(userId)
-        console.log(`User ${userId} video is active`)
-      }
-    }
-
-    const onActiveSpeakerChange = (payload: ActiveSpeaker[]) => {
-      if (Array.isArray(payload)) {
-        setActiveSpeakers(payload)
-      }
-    }
-
-    const onDeviceChange = () => {
-      if (mediaStream) {
-        console.log('onDeviceChange: update device list')
-        setMicList(mediaStream.getMicList())
-        setAudioOutputList(mediaStream.getSpeakerList())
-        if (!isAndroidOrIOSBrowser()) setCameraList(mediaStream.getCameraList())
-        setActiveMicrophone(mediaStream.getActiveMicrophone())
-        setActiveAudioOutput(mediaStream.getActiveSpeaker())
-        setActiveCamera(mediaStream.getActiveCamera())
-      }
-    }
-
-    /* https://marketplacefront.zoom.us/sdk/custom/web/modules/ZoomVideo.VideoClient.html#on */
-    zmClient.on('active-speaker', onActiveSpeakerChange)
-    zmClient.on('command-channel-message', onCommandChannelMessage)
-    zmClient.on('connection-change', onConnectionChange)
-    zmClient.on('device-change', onDeviceChange)
-    zmClient.on('user-added', onParticipantChange)
-    zmClient.on('user-removed', onParticipantChange)
-    zmClient.on('user-updated', onParticipantChange)
-    zmClient.on('video-active-change', onActiveVideoChange) // It fires when the active speaker is talking for more than one second, allowing for a smoother user experience than the Audio active-speaker event. Event fires for active speakers who have their video on or off
-
-    return () => {
-      zmClient.off('active-speaker', onActiveSpeakerChange)
-      zmClient.off('command-channel-message', onCommandChannelMessage)
-      zmClient.off('connection-change', onConnectionChange)
-      zmClient.off('device-change', onDeviceChange)
-      zmClient.off('user-added', onParticipantChange)
-      zmClient.off('user-removed', onParticipantChange)
-      zmClient.off('user-updated', onParticipantChange)
-      zmClient.off('video-active-change', onActiveVideoChange)
-    }
-  }, [
-    mediaStream,
-    setActiveCamera,
-    setActiveMicrophone,
-    setActiveAudioOutput,
-    setActiveSpeakers,
-    setActiveVideoId,
-    setCameraList,
-    setConnectionState,
-    setHandRaises,
-    setIsCamOn,
-    setIsMicOn,
-    setMicList,
-    setParticipants,
-    zmClient,
-    setAudioOutputList
-  ])
-}

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

@@ -1,24 +0,0 @@
-import { useMemo } from 'react'
-import { useMeasure } from 'react-use'
-
-export enum Breakpoint {
-  Mobile,
-  Tablet,
-  Desktop
-}
-
-// TODO: Use tailwind screens when created a new project with zoom video
-const MOBILE_MAX = 768
-const TABLET_MAX = 1024
-
-export const useContainerSize = () => {
-  const [ref, { width }] = useMeasure<HTMLDivElement>()
-
-  const breakpoint = useMemo(() => {
-    if (width < MOBILE_MAX) return Breakpoint.Mobile
-    if (width < TABLET_MAX) return Breakpoint.Tablet
-    return Breakpoint.Desktop
-  }, [width])
-
-  return { ref, width, breakpoint }
-}

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

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

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

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

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

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

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

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