@fraku/video 0.0.1

package/README.md

@@ -0,0 +1,2 @@
+# fraku-video
+Module of fraku, for integrate Video in Voting and Admin 

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@fraku/video",
+  "private": false,
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./dist/index.css": "./dist/index.css",
+    "./src": "./src/index.ts"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "build:css": "tailwindcss -c ./tailwind.config.js -i ./src/index.css -o ./dist/index.css --minify",
+    "watch:css": "tailwindcss -c ./tailwind.config.js -i ./src/index.css -o ./dist/index.css --watch",
+    "lint": "tsc --noEmit && eslint . --ext ts,tsx --report-unused-disable-directives",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build",
+    "storybook": "storybook dev -p 6006 --no-open",
+    "test": "react-app-rewired test"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "@zoom/videosdk": "^2.2.12",
+    "classnames": "^2.5.1",
+    "primeicons": "^7.0.0",
+    "primereact": "^10.9.6",
+    "react-use": "^17.6.0"
+  },
+  "devDependencies": {
+    "@storybook/react-vite": "^9.1.13",
+    "@types/node": "^24.8.1",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "eslint-plugin-storybook": "^9.1.13",
+    "postcss": "^8.5.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^9.1.13",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8",
+    "vite-plugin-dts": "^3.6.4"
+  },
+  "keywords": [
+    "react",
+    "typescript",
+    "component",
+    "library"
+  ],
+  "author": "",
+  "license": "MIT",
+  "description": "A React TypeScript component library"
+}

package/src/App.tsx

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

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

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

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