@fraku/video 0.0.1

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

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

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

@@ -0,0 +1,90 @@
+import React from 'react'
+import cn from 'classnames'
+
+type DockButtonProps = {
+  className?: string
+  // Main action (always required)
+  mainIcon: string
+  mainLabel?: string
+  mainTitle?: string
+  onMainClick: (e: React.MouseEvent<HTMLButtonElement>) => void
+  // Optional secondary action
+  showSecondary?: boolean
+  secondaryIcon?: string
+  secondaryTitle?: string
+  onSecondaryClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
+}
+
+/**
+ * Renders a customizable dock button component with optional main and secondary actions.
+ *
+ * @param className - Additional CSS class names to apply to the container.
+ * @param mainIcon - The CSS class for the main icon to display.
+ * @param mainLabel - Optional label text for the main button.
+ * @param mainTitle - The title attribute for the main button (for accessibility/tooltips).
+ * @param onMainClick - Click handler for the main button action.
+ * @param showSecondary - Flag to indicate if the secondary button should be displayed.
+ * @param secondaryIcon - Optional CSS class for the secondary icon to display.
+ * @param secondaryTitle - The title attribute for the secondary button (for accessibility/tooltips).
+ * @param onSecondaryClick - Optional click handler for the secondary button action.
+ *
+ * @returns A dock button component with main and optional secondary actions.
+ */
+const DockButton = ({
+  className,
+  mainIcon,
+  mainLabel,
+  mainTitle,
+  onMainClick,
+  secondaryIcon,
+  secondaryTitle,
+  onSecondaryClick,
+  showSecondary = false
+}: DockButtonProps) => {
+  const hasLabel = Boolean(mainLabel)
+  const hasSecondary = showSecondary && secondaryIcon && onSecondaryClick
+
+  return (
+    <div
+      className={cn(
+        'flex items-center bg-neutral-85 h-40 rounded-full',
+        {
+          'justify-center min-w-40': !hasLabel && !hasSecondary,
+          'justify-between gap-12 px-4': hasSecondary,
+          'px-12': hasLabel && !hasSecondary
+        },
+        className
+      )}
+    >
+      {/* Main action */}
+      <button
+        className={cn('dock-button-main flex items-center justify-center', {
+          'p-8 h-full': hasSecondary,
+          'w-full h-40': !hasSecondary
+        })}
+        onClick={onMainClick}
+        title={mainTitle}
+        type="button"
+      >
+        <span className="flex items-center justify-center w-24 h-24">
+          <i className={mainIcon} aria-hidden="true" />
+        </span>
+        {hasLabel && <span className="ml-4">{mainLabel}</span>}
+      </button>
+
+      {/* Secondary action (optional) */}
+      {hasSecondary && (
+        <button
+          className="dock-button-secondary flex items-center justify-center w-32 h-full hover:bg-neutral-95 rounded-full"
+          onClick={onSecondaryClick}
+          title={secondaryTitle}
+          type="button"
+        >
+          <i className={secondaryIcon} aria-hidden="true" />
+        </button>
+      )}
+    </div>
+  )
+}
+
+export default DockButton

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

@@ -0,0 +1,35 @@
+import { MenuItem, MenuItemOptions } from 'primereact/menuitem'
+
+type Props = {
+  item: MenuItem
+  options: MenuItemOptions
+  activeItem: string | undefined
+}
+
+const MenuItemTemplate = ({ item, options, activeItem }: Props) => {
+  const isActive = item.id === activeItem
+
+  return (
+    <div className="p-menuitem-content" data-pc-section="content">
+      <a
+        aria-label={item.label}
+        className={options.className}
+        data-test={item?.data?.dataTestId}
+        data-pc-section="action"
+        href="#"
+        onClick={options.onClick}
+      >
+        {isActive && (
+          <span className={options.iconClassName} data-pc-section="icon">
+            <i className="fa-regular fa-check" aria-hidden="true" />
+          </span>
+        )}
+        <span className={options.labelClassName} data-pc-section="label">
+          {item.label}
+        </span>
+      </a>
+    </div>
+  )
+}
+
+export default MenuItemTemplate

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

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

package/src/components/ZoomVideoPlugin/components/MobileIconButton/MobileIconButton.tsx

@@ -0,0 +1,30 @@
+import cn from 'classnames'
+
+type MobileIconButtonProps = {
+  className?: string
+  icon: string
+  onClick: () => void
+  title?: string
+  id?: string
+}
+
+const MobileIconButton = ({ className, icon, onClick, title, id }: MobileIconButtonProps) => {
+  return (
+    <button
+      aria-label={title}
+      className={cn(
+        'flex items-center justify-start gap-4 w-full h-40 px-8 rounded-l border border-neutral-80 hover:bg-neutral-85',
+        className
+      )}
+      id={id}
+      onClick={onClick}
+    >
+      <span className="flex items-center justify-center w-24 h-24">
+        <i className={icon} aria-hidden="true" />
+      </span>
+      <span className="flex-1 text-left">{title}</span>
+    </button>
+  )
+}
+
+export default MobileIconButton

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

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

package/src/components/ZoomVideoPlugin/components/Overlay/Overlay.tsx

@@ -0,0 +1,74 @@
+import { Dialog } from 'primereact/dialog'
+import { Sidebar } from 'primereact/sidebar'
+import { Breakpoint } from '../../hooks/useDeviceSize'
+
+type OverlayProps = {
+  breakpoint: Breakpoint
+  children: React.ReactNode
+  className?: string
+  header?: string | React.ReactNode
+  onHide: () => void
+  width?: string | number
+  visible: boolean
+}
+
+const Overlay = ({
+  breakpoint,
+  children,
+  onHide,
+  className,
+  visible = false,
+  width = '50vw',
+  header = ''
+}: OverlayProps) => {
+  const isTablet = breakpoint < Breakpoint.Desktop
+
+  if (isTablet) {
+    return (
+      <Sidebar
+        blockScroll
+        className={className}
+        closeIcon={<i className="fa-regular fa-xmark fa-lg" aria-hidden="true" />}
+        header={header}
+        onHide={onHide}
+        position="bottom"
+        pt={{
+          header: { className: 'border-b border-neutral-80 font-bold text-l' },
+          root: { className: '[&_.p-sidebar-content]:px-0 h-fit' },
+          content: { className: 'p-0' }
+        }}
+        visible={visible}
+      >
+        {children}
+      </Sidebar>
+    )
+  }
+
+  return (
+    <Dialog
+      blockScroll
+      className={className}
+      closable
+      closeIcon={<i className="fa-regular fa-xmark fa-lg" aria-hidden="true" />}
+      contentStyle={{ padding: '0' }}
+      dismissableMask
+      draggable
+      focusOnShow={false}
+      header={header}
+      headerStyle={{
+        borderBottom: '1px solid var(--neutral-80)',
+        padding: '16px'
+      }}
+      onHide={onHide}
+      pt={{
+        headerTitle: { className: '!font-bold !text-l' }
+      }}
+      style={{ width }}
+      visible={visible}
+    >
+      {children}
+    </Dialog>
+  )
+}
+
+export default Overlay

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

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

package/src/components/ZoomVideoPlugin/components/ParticipantsList.tsx

@@ -0,0 +1,52 @@
+import type { Participant, VideoClient } from '@zoom/videosdk'
+import cn from 'classnames'
+import { ReactSetter } from '../types'
+
+type Props = {
+  participants: Participant[]
+  setIsCamOn: ReactSetter<boolean>
+  setIsMicOn: ReactSetter<boolean>
+  zmClient: typeof VideoClient
+}
+
+const ParticipantsList = ({ zmClient, setIsCamOn, setIsMicOn, participants }: Props) => {
+  return (
+    <ul className="flex flex-col gap-8 w-full self-start">
+      {participants.map((user) => {
+        const isCurrentUser = user.userId === zmClient?.getCurrentUserInfo()?.userId
+        return (
+          <li key={user.userId} className="flex items-center justify-between gap-16 p-4 rounded shadow-medium w-full">
+            <span className="truncate flex gap-4">
+              <span className="truncate">{user.displayName}</span>
+              <span className="truncate">id: {user.userId}</span>
+              <span className="text-sm">{isCurrentUser ? '(You)' : ''}</span>
+            </span>
+            <div className="flex items-center gap-8">
+              <button
+                onClick={() => setIsCamOn((prev) => !prev)}
+                title={user.bVideoOn ? 'Stop Video' : 'Start Video'}
+                disabled={!isCurrentUser}
+                className={cn('w-24', { 'opacity-32 cursor-not-allowed': !isCurrentUser })}
+              >
+                <i className={`fa-regular ${user.bVideoOn ? 'fa-video' : 'fa-video-slash'}`} aria-hidden="true" />
+              </button>
+              <button
+                onClick={() => setIsMicOn((prev) => !prev)}
+                title={user.muted || !user.audio ? 'Unmute' : 'Mute'}
+                disabled={!isCurrentUser}
+                className={cn('w-24', { 'opacity-32 cursor-not-allowed': !isCurrentUser })}
+              >
+                <i
+                  className={`fa-regular ${user.muted || !user.audio ? 'fa-microphone-slash' : 'fa-microphone'}`}
+                  aria-hidden="true"
+                />
+              </button>
+            </div>
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+
+export default ParticipantsList

package/src/components/ZoomVideoPlugin/components/SettingsOverlay/SettingsContent.tsx

@@ -0,0 +1,19 @@
+import { useSettingsOverlayContext } from './context'
+import AudioSettings from './Tabs/AudioSettings'
+import BackgroundSettings from './Tabs/BackgroundSettings'
+import VideoSettings from './Tabs/VideoSettings'
+
+const settingsRegistry = {
+  Audio: AudioSettings,
+  Video: VideoSettings,
+  Background: BackgroundSettings
+}
+
+const SettingsContent = () => {
+  const { selectedSettingsTab } = useSettingsOverlayContext()
+
+  const ActiveComponent = settingsRegistry[selectedSettingsTab]
+  return ActiveComponent ? <ActiveComponent /> : null
+}
+
+export default SettingsContent

package/src/components/ZoomVideoPlugin/components/SettingsOverlay/SettingsMenu.tsx

@@ -0,0 +1,30 @@
+import cn from 'classnames'
+import MobileIconButton from '../MobileIconButton'
+import { SettingsTab, useSettingsOverlayContext } from './context'
+
+const tabs: { id: SettingsTab; icon: string; title: string }[] = [
+  { id: SettingsTab.Audio, icon: 'fa-regular fa-microphone', title: 'Audio' },
+  { id: SettingsTab.Video, icon: 'fa-regular fa-video', title: 'Video' },
+  { id: SettingsTab.Background, icon: 'fa-regular fa-image', title: 'Fondos' }
+]
+
+const SettingsMenu = () => {
+  const { selectedSettingsTab, setSelectedSettingsTab } = useSettingsOverlayContext()
+
+  return (
+    <div className="flex flex-col sm:flex-row md:flex-col w-full p-16 md:p-0 gap-16 md:gap-0 md:w-fit md:min-w-[200px] md:flex-shrink-0 overflow-visible">
+      {tabs.map(({ id, icon, title }) => (
+        <MobileIconButton
+          key={id}
+          className={cn('font-bold md:rounded-none md:border-0', { 'bg-neutral-95': selectedSettingsTab === id })}
+          icon={icon}
+          id={id}
+          onClick={() => setSelectedSettingsTab(id)}
+          title={title}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default SettingsMenu