@fraku/video 0.0.1 → 0.0.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fraku/video",
   "private": false,
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -16,8 +16,7 @@
     "./src": "./src/index.ts"
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "scripts": {
     "dev": "vite",

package/src/App.tsx

@@ -1,7 +0,0 @@
-import './index.css'
-
-function App() {
-  return <h2>Zoom Video Plugin</h2>
-}
-
-export default App

package/src/components/ZoomVideoPlugin/ZoomVideoPlugin.stories.tsx

@@ -1,50 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import ZoomVideoPlugin from './ZoomVideoPlugin'
-import type { Credentials } from './types'
-
-// Load credentials from environment variables
-const credentials: Credentials = {
-  sessionName: import.meta.env.VITE_ZOOM_SESSION_NAME || '',
-  signature: import.meta.env.VITE_ZOOM_SIGNATURE || '',
-  userName: import.meta.env.VITE_ZOOM_USER_NAME || 'Storybook User',
-  sessionPasscode: import.meta.env.VITE_ZOOM_SESSION_PASSCODE || ''
-}
-
-const meta = {
-  title: 'Components/ZoomVideoPlugin',
-  component: ZoomVideoPlugin,
-  parameters: {
-    layout: 'fullscreen'
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    credentials: {
-      description: 'Zoom Video SDK credentials for the session',
-      control: 'object'
-    },
-    closeParentContainer: {
-      description: 'Callback function to close the parent container',
-      action: 'closeParentContainer'
-    },
-    setIsCloseButtonVisible: {
-      description: 'Setter for close button visibility',
-      action: 'setIsCloseButtonVisible'
-    }
-  }
-} satisfies Meta<typeof ZoomVideoPlugin>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    credentials,
-    closeParentContainer: () => {
-      console.log('Close parent container called')
-    },
-    setIsCloseButtonVisible: (value: boolean | ((prev: boolean) => boolean)) => {
-      console.log('Set close button visible:', value)
-    }
-  }
-}
-Default.storyName = 'ZoomVideoPlugin'

package/src/components/ZoomVideoPlugin/ZoomVideoPlugin.tsx

@@ -1,253 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import ZoomVideo, { ActiveSpeaker, ConnectionState, MediaDevice, type Participant, type Stream } from '@zoom/videosdk'
-import { useEffectOnce } from 'react-use'
-import PreSessionConfiguration from './pages/PreSessionConfiguration'
-import PanelistsSession from './pages/PanelistsSession'
-import MainSession from './pages/MainSession'
-import AfterSession from './pages/AfterSession'
-import { useClientMessages } from './hooks/useClientMessages'
-import { zmClient, ZoomVideoContext, ZoomVideoContextType } from './context'
-import { SessionStep, type ZoomVideoPluginProps } from './types'
-import { useContainerSize } from './hooks/useDeviceSize'
-
-const fetchDevices = async () => {
-  try {
-    const devices: MediaDeviceInfo[] = await ZoomVideo.getDevices()
-
-    const micList = devices.filter((d) => d.kind === 'audioinput')
-    const speakerList = devices.filter((d) => d.kind === 'audiooutput')
-    const cameraList = devices.filter((d) => d.kind === 'videoinput')
-
-    return { micList, speakerList, cameraList }
-  } catch (e) {
-    return { micList: [], speakerList: [], cameraList: [] }
-  }
-}
-
-const ZoomVideoPlugin = ({ credentials, closeParentContainer, setIsCloseButtonVisible }: ZoomVideoPluginProps) => {
-  const { ref, breakpoint } = useContainerSize()
-  const [isBlurred, setIsBlurred] = useState(false)
-  const [mediaStream, setMediaStream] = useState<typeof Stream | null>(null)
-  const [sessionStep, setSessionStep] = useState<SessionStep | null>(null)
-  const [participants, setParticipants] = useState<Participant[]>([])
-  const [activeVideoId, setActiveVideoId] = useState<number | null>(null)
-  const [activeSpeakers, setActiveSpeakers] = useState<ActiveSpeaker[]>([])
-  const [connectionState, setConnectionState] = useState<ConnectionState | null>(null)
-
-  const [localAudio, setLocalAudio] = useState(() => ZoomVideo.createLocalAudioTrack())
-  const [localVideo, setLocalVideo] = useState(() => ZoomVideo.createLocalVideoTrack())
-  const [activeMicrophone, setActiveMicrophone] = useState<string | undefined>()
-  const [activeAudioOutput, setActiveAudioOutput] = useState<string | undefined>()
-  const [activeCamera, setActiveCamera] = useState<string | undefined>()
-  const [micList, setMicList] = useState<MediaDevice[]>([])
-  const [audioOutputList, setAudioOutputList] = useState<MediaDevice[]>([])
-  const [cameraList, setCameraList] = useState<MediaDevice[]>([])
-  const [isCamOn, setIsCamOn] = useState(true)
-  const [isMicOn, setIsMicOn] = useState(true)
-
-  const initSession = useCallback(async () => {
-    if (connectionState === ConnectionState.Closed) return
-    try {
-      await zmClient.init('en-US', 'Global', {
-        webEndpoint: window?.webEndpoint ?? 'zoom.us',
-        stayAwake: true,
-        patchJsMedia: true,
-        leaveOnPageUnload: false,
-        enforceMultipleVideos: true // Enforces multiple videos if true (up to 3 videos of others and 1 video of self) on platform without SharedArrayBuffer.
-      })
-
-      if (zmClient.getSessionInfo()) {
-        setSessionStep(SessionStep.LocalSettingsConfiguration)
-        setIsCloseButtonVisible(true)
-      }
-    } catch (e) {
-      console.log('error init: ', e)
-    }
-  }, [connectionState, setIsCloseButtonVisible])
-
-  const joinSession = useCallback(async () => {
-    if (connectionState === ConnectionState.Closed) return
-    try {
-      const { sessionName, signature, userName, sessionPasscode } = credentials ?? {}
-      if (!sessionName || !signature || !userName || !sessionPasscode) {
-        return
-      }
-
-      await zmClient.join(sessionName, signature, userName, sessionPasscode)
-      const stream = zmClient.getMediaStream()
-      setMediaStream(stream)
-      setSessionStep(SessionStep.OnlyPanelistsSession)
-      setIsCloseButtonVisible(false)
-    } catch (e: any) {
-      console.log('error join: ', e)
-    }
-  }, [connectionState, credentials, setIsCloseButtonVisible])
-
-  const startMainSession = useCallback(() => {
-    setSessionStep(SessionStep.MainSession)
-    setIsCloseButtonVisible(false)
-  }, [setIsCloseButtonVisible])
-
-  const stopSession = useCallback(async () => {
-    console.log('Stopping session...')
-
-    if (zmClient.getSessionInfo()?.isInMeeting) {
-      try {
-        await zmClient?.leave()
-        ZoomVideo.destroyClient()
-      } catch (e) {
-        console.warn('Leave session failed', e)
-      }
-    }
-    await localAudio?.stop().catch(console.warn)
-    await localVideo?.stop().catch(console.warn)
-
-    setMediaStream(null)
-
-    setSessionStep(SessionStep.AfterSession)
-    setIsCloseButtonVisible(true)
-  }, [localAudio, localVideo, setIsCloseButtonVisible])
-
-  const switchActiveMicrophone = useCallback(
-    async (deviceId: string) => {
-      if (sessionStep === SessionStep.LocalSettingsConfiguration) {
-        if (!localAudio) return
-        if (!isMicOn) return
-        await localAudio.stop().catch(console.warn)
-        setLocalAudio(ZoomVideo.createLocalAudioTrack(deviceId))
-        await localAudio.start().catch(console.warn)
-        setActiveMicrophone(deviceId)
-      } else {
-        if (!mediaStream) return
-        await mediaStream.switchMicrophone(deviceId)
-        setActiveMicrophone(deviceId)
-      }
-    },
-    [isMicOn, localAudio, mediaStream, sessionStep]
-  )
-
-  const switchActiveAudioOutput = useCallback(
-    async (deviceId: string) => {
-      setActiveAudioOutput(deviceId)
-      if (!mediaStream) return
-      await mediaStream.switchSpeaker(deviceId).catch(console.warn)
-    },
-    [mediaStream]
-  )
-
-  const doRestart = useCallback(async () => {
-    setConnectionState(null)
-    setMediaStream(null)
-    setParticipants([])
-    setActiveVideoId(null)
-    await initSession()
-  }, [initSession])
-
-  useClientMessages({
-    zmClient,
-    mediaStream,
-    setActiveMicrophone,
-    setActiveAudioOutput,
-    setActiveCamera,
-    setMicList,
-    setAudioOutputList,
-    setCameraList,
-    setConnectionState,
-    setIsCamOn,
-    setIsMicOn,
-    setParticipants,
-    setActiveVideoId,
-    setActiveSpeakers,
-    setHandRaises: () => {}
-  })
-
-  useEffect(() => {
-    if (!credentials?.signature) return
-    initSession()
-  }, [initSession, credentials?.signature])
-
-  useEffectOnce(() => {
-    fetchDevices().then(({ micList, speakerList, cameraList }) => {
-      setMicList(micList)
-      setAudioOutputList(speakerList)
-      setCameraList(cameraList)
-      setActiveMicrophone(micList[0]?.deviceId)
-      setActiveAudioOutput(speakerList[0]?.deviceId)
-      setActiveCamera(cameraList[0]?.deviceId)
-    })
-  })
-
-  const ctxValue = useMemo<ZoomVideoContextType>(() => {
-    return {
-      activeCamera,
-      activeMicrophone,
-      activeAudioOutput,
-      activeSpeakers,
-      activeVideoId,
-      audioOutputList,
-      breakpoint,
-      cameraList,
-      closeParentContainer,
-      connectionState,
-      isBlurred,
-      isCamOn,
-      isMicOn,
-      localAudio,
-      localVideo,
-      mediaStream,
-      micList,
-      participants,
-      setActiveCamera,
-      setCameraList,
-      setIsBlurred,
-      setIsCamOn,
-      setIsMicOn,
-      setLocalAudio,
-      setLocalVideo,
-      setMediaStream,
-      setMicList,
-      setParticipants,
-      switchActiveAudioOutput,
-      switchActiveMicrophone,
-      stopSession,
-      zmClient
-    }
-  }, [
-    activeCamera,
-    activeMicrophone,
-    activeAudioOutput,
-    activeSpeakers,
-    activeVideoId,
-    audioOutputList,
-    breakpoint,
-    cameraList,
-    closeParentContainer,
-    connectionState,
-    isBlurred,
-    isCamOn,
-    isMicOn,
-    localAudio,
-    localVideo,
-    mediaStream,
-    micList,
-    participants,
-    stopSession,
-    switchActiveAudioOutput,
-    switchActiveMicrophone
-  ])
-
-  return (
-    <ZoomVideoContext.Provider value={ctxValue}>
-      <div ref={ref} className="w-full h-full @container">
-        {sessionStep === SessionStep.LocalSettingsConfiguration && (
-          <PreSessionConfiguration joinSession={joinSession} />
-        )}
-        {sessionStep === SessionStep.OnlyPanelistsSession && <PanelistsSession initMainSession={startMainSession} />}
-        {sessionStep === SessionStep.MainSession && <MainSession />}
-        {sessionStep === SessionStep.AfterSession && <AfterSession restartSession={doRestart} />}
-      </div>
-    </ZoomVideoContext.Provider>
-  )
-}
-
-export default ZoomVideoPlugin

package/src/components/ZoomVideoPlugin/components/ButtonsDock/ButtonsDock.tsx

@@ -1,353 +0,0 @@
-import { useRef, useState } from 'react'
-import { MenuItem, MenuItemOptions } from 'primereact/menuitem'
-import cn from 'classnames'
-import { Menu } from 'primereact/menu'
-import { Breakpoint } from './../../hooks/useDeviceSize'
-import Overlay from '../Overlay'
-import { SessionStep } from '../../types'
-import DockButton from './DockButton'
-import MenuItemTemplate from './MenuItemTemplate'
-import MobileIconButton from '../MobileIconButton'
-import SettingsOverlay from '../SettingsOverlay'
-import { SettingsTab } from '../SettingsOverlay/context'
-import { useZoomVideoContext } from '../../context'
-
-type DockItem = {
-  component: JSX.Element
-  mobileComponent?: JSX.Element
-  group: number
-  key: string
-  show?: boolean
-}
-
-type ButtonsDockProps = {
-  exit: () => void
-  setIsCamOn: () => void
-  setIsMicOn: () => void
-  sessionStep: SessionStep
-  setActiveMicrophone: (deviceId: string) => void
-  setActiveCamera: (deviceId: string) => void
-  setActiveAudioOutput: (deviceId: string) => void
-}
-
-const ButtonsDock = ({
-  sessionStep,
-  exit,
-  setIsMicOn,
-  setIsCamOn,
-  setActiveMicrophone,
-  setActiveCamera,
-  setActiveAudioOutput
-}: ButtonsDockProps) => {
-  const {
-    audioOutputList,
-    breakpoint,
-    cameraList,
-    isCamOn,
-    isMicOn,
-    micList,
-    activeAudioOutput,
-    activeMicrophone,
-    activeCamera
-  } = useZoomVideoContext()
-
-  const isTabletOrDesktop = breakpoint >= Breakpoint.Tablet
-  const [isSettingsOverlayVisible, setIsSettingsOverlayVisible] = useState({ visible: false, tab: SettingsTab.Audio })
-  const [isMobileActionsOverlayVisible, setIsMobileActionsOverlayVisible] = useState(false)
-  const isLocalSettingConfiguration = sessionStep === SessionStep.LocalSettingsConfiguration
-  const audioMenuOptionsRef = useRef<Menu>(null)
-  const videoMenuOptionsRef = useRef<Menu>(null)
-  const micMenuOptionsRef = useRef<Menu>(null)
-
-  const items: DockItem[] = [
-    // Microphone Button
-    {
-      component: (
-        <DockButton
-          mainIcon={`fa-regular ${isMicOn ? 'fa-microphone' : 'fa-microphone-slash'}`}
-          mainLabel={isLocalSettingConfiguration && isTabletOrDesktop ? 'Microphone' : undefined}
-          mainTitle={isMicOn ? 'Mute' : 'Unmute'}
-          onMainClick={setIsMicOn}
-          showSecondary={isTabletOrDesktop}
-          secondaryIcon="fa-regular fa-chevron-up"
-          secondaryTitle="Microphone Settings"
-          onSecondaryClick={(e) => micMenuOptionsRef.current?.toggle(e)}
-        />
-      ),
-      group: 1,
-      key: 'microphone',
-      show: true
-    },
-    // Camera Button
-    {
-      component: (
-        <DockButton
-          mainIcon={`fa-regular ${isCamOn ? 'fa-video' : 'fa-video-slash'}`}
-          mainLabel={isLocalSettingConfiguration && isTabletOrDesktop ? 'Camera' : undefined}
-          mainTitle={isCamOn ? 'Turn off Camera' : 'Turn on Camera'}
-          onMainClick={setIsCamOn}
-          showSecondary={isTabletOrDesktop}
-          secondaryIcon="fa-regular fa-chevron-up"
-          secondaryTitle="Camera Settings"
-          onSecondaryClick={(e) => videoMenuOptionsRef.current?.toggle(e)}
-        />
-      ),
-      group: 1,
-      key: 'camera',
-      show: true
-    },
-    // Speakers Button
-    {
-      component: (
-        <DockButton
-          mainIcon="fa-regular fa-volume"
-          mainLabel={isLocalSettingConfiguration && isTabletOrDesktop ? 'Speakers' : undefined}
-          mainTitle="Speakers"
-          onMainClick={(e) => audioMenuOptionsRef.current?.toggle(e)}
-          showSecondary={isTabletOrDesktop}
-          secondaryIcon="fa-regular fa-chevron-up"
-          secondaryTitle="Speaker Settings"
-          onSecondaryClick={(e) => audioMenuOptionsRef.current?.toggle(e)}
-        />
-      ),
-      group: 1,
-      key: 'speakers',
-      show: isTabletOrDesktop
-    },
-    // Share Screen Button
-    {
-      component: <DockButton mainIcon="fa-regular fa-screencast" mainTitle="Share Screen" onMainClick={() => {}} />,
-      mobileComponent: (
-        <MobileIconButton
-          icon="fa-regular fa-screencast"
-          title="Share Screen"
-          onClick={() => {
-            setIsMobileActionsOverlayVisible(false)
-          }}
-        />
-      ),
-      group: 2,
-      key: 'share-screen',
-      show: !isLocalSettingConfiguration
-    },
-    // Raise Hand Button
-    {
-      component: <DockButton mainIcon="fa-regular fa-hand" mainTitle="Raise/Lower Hand" onMainClick={() => {}} />,
-      mobileComponent: (
-        <MobileIconButton
-          icon="fa-regular fa-hand"
-          title="Raise/Lower Hand"
-          onClick={() => {
-            setIsMobileActionsOverlayVisible(false)
-          }}
-        />
-      ),
-      group: 2,
-      key: 'hand-raise',
-      show: !isLocalSettingConfiguration
-    },
-    // Participants List Button
-    {
-      key: 'participants-list',
-      component: <DockButton mainIcon="fa-regular fa-user-group" mainTitle="Participants" onMainClick={() => {}} />,
-      mobileComponent: (
-        <MobileIconButton
-          icon="fa-regular fa-user-group"
-          title="Participants"
-          onClick={() => {
-            setIsMobileActionsOverlayVisible(false)
-          }}
-        />
-      ),
-      group: 2,
-      show: !isLocalSettingConfiguration
-    },
-    // Chat Button
-    {
-      component: <DockButton mainIcon="fa-regular fa-comment-lines" mainTitle="Chat" onMainClick={() => {}} />,
-      mobileComponent: (
-        <MobileIconButton
-          icon="fa-regular fa-comment-lines"
-          title="Chat"
-          onClick={() => {
-            setIsMobileActionsOverlayVisible(false)
-          }}
-        />
-      ),
-      group: 2,
-      key: 'chat',
-      show: !isLocalSettingConfiguration
-    },
-    // Settings Button
-    {
-      component: (
-        <DockButton
-          mainIcon="fa-regular fa-gear"
-          mainLabel={isLocalSettingConfiguration && isTabletOrDesktop ? 'Settings' : undefined}
-          mainTitle="Settings"
-          onMainClick={() => setIsSettingsOverlayVisible({ visible: true, tab: SettingsTab.Audio })}
-        />
-      ),
-      mobileComponent: (
-        <MobileIconButton
-          icon="fa-regular fa-gear"
-          title="Settings"
-          onClick={() => {
-            setIsMobileActionsOverlayVisible(false)
-            setIsSettingsOverlayVisible({ visible: true, tab: SettingsTab.Audio })
-          }}
-        />
-      ),
-      group: 2,
-      key: 'settings',
-      show: true
-    },
-    {
-      component: (
-        <DockButton
-          mainIcon="fa-regular fa-phone-hangup !text-white"
-          mainTitle="Leave Meeting"
-          onMainClick={exit}
-          className="!bg-danger-50"
-        />
-      ),
-      group: 3,
-      key: 'leave',
-      show: !isLocalSettingConfiguration
-    }
-  ]
-
-  const renderGroup = (group: number, justify: 'start' | 'center' | 'end') => {
-    const filteredItems = items.filter((item) => item.group === group && item.show)
-    if (filteredItems.length === 0) return null
-
-    return (
-      <div className={cn('flex items-center gap-16', `justify-${justify}`)}>
-        {filteredItems.map((item) => (
-          <span key={item.key}>{item.component}</span>
-        ))}
-      </div>
-    )
-  }
-
-  const renderElipsisButton = () => {
-    return (
-      <div className="relative">
-        <DockButton
-          mainIcon="fa-regular fa-ellipsis-v"
-          mainTitle="More Actions"
-          onMainClick={() => setIsMobileActionsOverlayVisible(true)}
-        />
-      </div>
-    )
-  }
-
-  const audioMenuItems: MenuItem[] = audioOutputList
-    .map((device) => ({
-      id: device.deviceId,
-      label: device.label,
-      command: () => setActiveAudioOutput(device.deviceId),
-      template: (item: MenuItem, options: MenuItemOptions) => (
-        <MenuItemTemplate item={item} options={options} activeItem={activeAudioOutput} />
-      )
-    }))
-    .concat([
-      {
-        label: 'Audio Settings',
-        id: 'audio-settings',
-        command: () => {
-          setIsSettingsOverlayVisible({ visible: true, tab: SettingsTab.Audio })
-        },
-        template: (item: MenuItem, options: MenuItemOptions) => (
-          <MenuItemTemplate item={item} options={options} activeItem={activeAudioOutput} />
-        )
-      }
-    ])
-
-  const videoMenuItems: MenuItem[] = cameraList
-    .map((device) => ({
-      label: device.label,
-      id: device.deviceId,
-      template: (item: MenuItem, options: MenuItemOptions) => (
-        <MenuItemTemplate item={item} options={options} activeItem={activeCamera} />
-      ),
-      command: () => setActiveCamera(device.deviceId)
-    }))
-    .concat([
-      {
-        label: 'Camera Settings',
-        id: 'camera-settings',
-        command: () => {
-          setIsSettingsOverlayVisible({ visible: true, tab: SettingsTab.Video })
-        },
-        template: (item: MenuItem, options: MenuItemOptions) => (
-          <MenuItemTemplate item={item} options={options} activeItem={activeCamera} />
-        )
-      }
-    ])
-
-  const micMenuItems: MenuItem[] = micList
-    .map((device) => ({
-      id: device.deviceId,
-      label: device.label,
-      command: () => setActiveMicrophone(device.deviceId),
-      template: (item: MenuItem, options: MenuItemOptions) => (
-        <MenuItemTemplate item={item} options={options} activeItem={activeMicrophone} />
-      )
-    }))
-    .concat([
-      {
-        id: 'microphone-settings',
-        label: 'Microphone Settings',
-        command: () => {
-          setIsSettingsOverlayVisible({ visible: true, tab: SettingsTab.Audio })
-        },
-        template: (item: MenuItem, options: MenuItemOptions) => (
-          <MenuItemTemplate item={item} options={options} activeItem={activeMicrophone} />
-        )
-      }
-    ])
-
-  return (
-    <>
-      <div
-        className={cn(
-          'flex items-center justify-between rounded-full px-16 py-12 w-full shadow-medium overflow-hidden',
-          { 'gap-16 !w-fit': isLocalSettingConfiguration }
-        )}
-      >
-        {renderGroup(1, 'start')}
-        {isTabletOrDesktop ? renderGroup(2, 'center') : renderElipsisButton()}
-        {renderGroup(3, 'end')}
-      </div>
-
-      <SettingsOverlay
-        breakpoint={breakpoint}
-        onHide={() => setIsSettingsOverlayVisible({ ...isSettingsOverlayVisible, visible: false })}
-        visible={isSettingsOverlayVisible.visible}
-        defaultTab={isSettingsOverlayVisible.tab}
-      />
-
-      {/* Mobile Actions Overlay */}
-      <Overlay
-        visible={isMobileActionsOverlayVisible}
-        onHide={() => setIsMobileActionsOverlayVisible(false)}
-        header="Options"
-        breakpoint={breakpoint}
-      >
-        <div className="flex flex-col gap-16 px-16 py-8 font-bold">
-          {items
-            .filter((item) => item.key !== 'more-actions' && item.group === 2)
-            .map((item) => (
-              <span key={item.key}>{item.mobileComponent ?? item.component}</span>
-            ))}
-        </div>
-      </Overlay>
-      <Menu model={audioMenuItems} popup ref={audioMenuOptionsRef} id="popup_menu" popupAlignment="left" />
-      <Menu model={videoMenuItems} popup ref={videoMenuOptionsRef} id="popup_menu" popupAlignment="left" />
-      <Menu model={micMenuItems} popup ref={micMenuOptionsRef} id="popup_menu" popupAlignment="left" />
-    </>
-  )
-}
-
-export default ButtonsDock