@fraku/video 0.0.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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