@fraku/video 0.0.1 → 0.0.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,52 +0,0 @@
-import { useEffect, useMemo, useState } from 'react'
-import { Breakpoint } from '../../hooks/useDeviceSize'
-import Overlay from '../Overlay'
-import { SETTINGS_OVERLAY_WIDTH } from '../../constants'
-import SettingsMenu from './SettingsMenu'
-import SettingsContent from './SettingsContent'
-import { settingsOverlayContext, SettingsOverlayContextProps, SettingsTab } from './context'
-
-type Props = {
-  breakpoint: Breakpoint
-  visible: boolean
-  onHide: () => void
-  defaultTab?: SettingsTab
-}
-
-const SettingsOverlay = ({ visible, onHide, breakpoint, defaultTab = SettingsTab.Audio }: Props) => {
-  const [selectedSettingsTab, setSelectedSettingsTab] = useState<SettingsTab>(defaultTab)
-
-  useEffect(() => {
-    if (visible) setSelectedSettingsTab(defaultTab)
-  }, [defaultTab, visible])
-
-  const contextVal = useMemo<SettingsOverlayContextProps>(
-    () => ({
-      selectedSettingsTab,
-      setSelectedSettingsTab
-    }),
-    [selectedSettingsTab]
-  )
-
-  return (
-    <Overlay
-      visible={visible}
-      onHide={onHide}
-      header="Settings"
-      breakpoint={breakpoint}
-      width={SETTINGS_OVERLAY_WIDTH}
-      className="min-w-[30vw] min-h-[30vh] max-h-[60vh] h-full [&_.p-dialog-content]:overflow-hidden"
-    >
-      <settingsOverlayContext.Provider value={contextVal}>
-        <div className="flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x divide-neutral-80 h-full">
-          <SettingsMenu />
-          <div className="flex-1 overflow-y-auto p-12">
-            <SettingsContent />
-          </div>
-        </div>
-      </settingsOverlayContext.Provider>
-    </Overlay>
-  )
-}
-
-export default SettingsOverlay

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

@@ -1,191 +0,0 @@
-import { useState, useCallback, useRef, useEffect } from 'react'
-import { ProgressBar } from 'primereact/progressbar'
-import cn from 'classnames'
-import { Dropdown } from 'primereact/dropdown'
-import { useZoomVideoContext } from '../../../context'
-import DropdownValueTemplate from './DropdownValueTemplate'
-import DropdownItemTemplate from './DropdownItemTemplate'
-
-const UPDATE_INTERVAL_MS = 300
-
-const AudioSettings = () => {
-  const {
-    activeAudioOutput,
-    activeMicrophone,
-    audioOutputList,
-    localAudio,
-    micList,
-    switchActiveAudioOutput,
-    switchActiveMicrophone
-  } = useZoomVideoContext()
-
-  const [micLevel, setMicLevel] = useState<number>(0)
-  const [speakerLevel, setSpeakerLevel] = useState<number>(0)
-  const [micState, setMicState] = useState<'idle' | 'recording' | 'playing'>('idle')
-
-  const micListOptions = micList.map((mic) => ({
-    label: mic.label || `Micrófono ${mic.deviceId}`,
-    value: mic.deviceId
-  }))
-
-  const speakerOptions = audioOutputList.map((spk) => ({
-    label: spk.label || `Altavoz ${spk.deviceId}`,
-    value: spk.deviceId
-  }))
-
-  const micTesterRef = useRef<any>(null)
-  const lastUpdateMicRef = useRef<number>(0)
-  const handleMicTest = useCallback(async () => {
-    if (!localAudio) return
-
-    if (micTesterRef.current) {
-      micTesterRef.current.stop?.()
-      micTesterRef.current = null
-      setMicState('idle')
-      setMicLevel(0)
-      return
-    }
-
-    const tester = localAudio.testMicrophone({
-      microphoneId: activeMicrophone,
-      speakerId: activeAudioOutput,
-      recordAndPlay: true,
-      onAnalyseFrequency: (v: number) => {
-        const now = Date.now()
-        // only update every UPDATE_INTERVAL_MS ms
-        if (now - lastUpdateMicRef.current > UPDATE_INTERVAL_MS) {
-          lastUpdateMicRef.current = now
-          setMicLevel(v)
-        }
-      },
-      onStartRecording: () => setMicState('recording'),
-      onStartPlayRecording: () => setMicState('playing'),
-      onStopPlayRecording: () => {
-        setMicState('idle')
-        micTesterRef.current = null
-        setMicLevel(0)
-      }
-    })
-
-    micTesterRef.current = tester
-    setMicState('recording')
-  }, [localAudio, activeMicrophone, activeAudioOutput])
-
-  const speakerTesterRef = useRef<any>(null)
-  const lastUpdateSpeakerRef = useRef<number>(0)
-  const handleSpeakerTest = useCallback(async () => {
-    if (!localAudio) return
-    if (speakerTesterRef.current) {
-      speakerTesterRef.current.destroy?.()
-      speakerTesterRef.current = null
-      setSpeakerLevel(0)
-      return
-    }
-    const tester = localAudio.testSpeaker({
-      speakerId: activeAudioOutput,
-      onAnalyseFrequency: (v: number) => {
-        const now = Date.now()
-        // only update every UPDATE_INTERVAL_MS ms
-        if (now - lastUpdateSpeakerRef.current > UPDATE_INTERVAL_MS) {
-          lastUpdateSpeakerRef.current = now
-          setSpeakerLevel(v)
-        }
-      }
-    })
-    speakerTesterRef.current = tester
-  }, [localAudio, activeAudioOutput])
-
-  useEffect(() => {
-    return () => {
-      micTesterRef.current?.stop?.()
-      speakerTesterRef.current?.destroy?.()
-    }
-  }, [])
-
-  return (
-    <div className="flex flex-col">
-      {/* Microphone Section */}
-      <p className="text-s font-bold">Micrófono</p>
-      <p className="text-s mb-8 text-neutral-40">Selecciona un método de entrada de audio</p>
-      <Dropdown
-        className="mb-16 w-full"
-        itemTemplate={(option) => <DropdownItemTemplate option={option} isActive={option.value === activeMicrophone} />}
-        placeholder="Selecciona un micrófono"
-        options={micListOptions}
-        onChange={async (e) => await switchActiveMicrophone(e.value)}
-        value={activeMicrophone}
-        valueTemplate={(option) => <DropdownValueTemplate option={option} icon="fa-regular fa-microphone" />}
-      />
-
-      {/* Microphone Test Header */}
-      <div className="mt-4 mb-8">
-        <p className="text-s font-bold">Prueba de micrófono</p>
-        <div className="mt-4 self-start">
-          <p className="text-s text-neutral-40 text-start">
-            {micState === 'idle' && 'Graba una muestra de tu voz y escúchela para verificar el funcionamiento.'}
-            {micState === 'recording' && 'Grabando la voz... espera unos segundos.'}
-            {micState === 'playing' && 'Reproduciendo grabación...'}
-          </p>
-        </div>
-      </div>
-
-      <button
-        type="button"
-        onClick={handleMicTest}
-        className={cn(
-          'w-fit rounded-l p-8 font-semibold transition-all duration-200 border hover:border-neutral-70 text-white',
-          {
-            'bg-neutral-60': micState === 'recording' || micState === 'playing',
-            'bg-neutral-50': micState === 'idle'
-          }
-        )}
-      >
-        {micState === 'recording' && 'Detener grabación'}
-        {micState === 'playing' && 'Detener reproducción'}
-        {micState === 'idle' && 'Probar micrófono'}
-      </button>
-
-      {/* Status message */}
-      <ProgressBar
-        value={micState === 'idle' ? 0 : micLevel}
-        showValue={false}
-        className="w-full mt-4 h-8 rounded-m border border-neutral-80"
-      />
-
-      {/* Speaker Section */}
-      <div className="mt-32">
-        <p className="text-s font-bold">Altavoz</p>
-        <p className="text-s mb-8 text-neutral-40">Selecciona un método de salida de audio</p>
-        <Dropdown
-          className="mb-16 w-full"
-          itemTemplate={(option) => (
-            <DropdownItemTemplate option={option} isActive={option.value === activeAudioOutput} />
-          )}
-          options={speakerOptions}
-          placeholder="Selecciona un altavoz"
-          onChange={async (e) => await switchActiveAudioOutput(e.value)}
-          value={activeAudioOutput}
-          valueTemplate={(option) => <DropdownValueTemplate option={option} icon="fa-regular fa-volume" />}
-        />
-
-        <button
-          type="button"
-          onClick={handleSpeakerTest}
-          className={cn(
-            'w-fit rounded-l p-8 font-semibold transition-all duration-200 border hover:border-neutral-70 text-white',
-            speakerTesterRef.current ? 'bg-neutral-60' : 'bg-neutral-50'
-          )}
-        >
-          {speakerTesterRef.current ? 'Detener prueba de altavoz' : 'Probar altavoz'}
-        </button>
-        <ProgressBar
-          value={speakerLevel}
-          showValue={false}
-          className="w-full mt-8 h-8 rounded-m border border-neutral-80"
-        />
-      </div>
-    </div>
-  )
-}
-
-export default AudioSettings

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

@@ -1,47 +0,0 @@
-import cn from 'classnames'
-import { useZoomVideoContext } from '../../../context'
-
-const BackgroundSettings = () => {
-  const { isBlurred, setIsBlurred } = useZoomVideoContext()
-
-  const options = [
-    {
-      label: 'Ninguno',
-      icon: 'fa-ban',
-      isActive: !isBlurred
-    },
-    {
-      label: 'Desenfocar',
-      icon: 'fa-droplet',
-      isActive: isBlurred
-    }
-  ]
-
-  return (
-    <div className="flex flex-col">
-      <p className="text-s font-bold mb-8">Fondo</p>
-      <div className="flex gap-12">
-        {options.map(({ label, icon, isActive }) => {
-          return (
-            <button
-              key={label}
-              type="button"
-              onClick={() => setIsBlurred((prev: boolean) => (isActive ? prev : !prev))}
-              className={cn(
-                'w-full h-80 flex flex-col items-center justify-center gap-8 border rounded-l bg-white font-bold transition-colors ease-in-out',
-                isActive ? '!border-neutral-60 border-2' : 'border-neutral-80 hover:border-neutral-70'
-              )}
-            >
-              <span className="flex items-center justify-center w-24 h-24">
-                <i className={cn('fa-regular fa-xl', icon)} aria-hidden="true" />
-              </span>
-              <span>{label}</span>
-            </button>
-          )
-        })}
-      </div>
-    </div>
-  )
-}
-
-export default BackgroundSettings

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

@@ -1,20 +0,0 @@
-const DropdownItemTemplate = ({
-  option,
-  isActive
-}: {
-  option: { label: string; value: string }
-  isActive: boolean
-}) => {
-  return (
-    <div className="flex items-center gap-4">
-      {isActive && (
-        <span className="flex items-center justify-center w-24 h-24">
-          <i className="fa-regular fa-check" aria-hidden="true" />
-        </span>
-      )}
-      <span className="mr-2">{option.label}</span>
-    </div>
-  )
-}
-
-export default DropdownItemTemplate

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

@@ -1,12 +0,0 @@
-const DropdownValueTemplate = ({ option, icon }: { option: { label: string; value: string }; icon: string }) => {
-  return (
-    <div className="flex items-center gap-4 font-semibold text-neutral-50">
-      <span className="flex items-center justify-center w-24 h-24">
-        <i className={icon} aria-hidden="true" />
-      </span>
-      <span className="truncate">{option.label}</span>
-    </div>
-  )
-}
-
-export default DropdownValueTemplate