Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat: Settings Component Integration (#2828)
* feat: add settings in meet livekit * fix: remove this method settingsCloseButton in file css --------- Co-authored-by: Ruslan Konviser <[email protected]>
- Loading branch information
1 parent
56cafad
commit e79eb6d
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,172 @@ | ||
| 'use client'; | ||
| import * as React from 'react'; | ||
| import { LocalAudioTrack, Track } from 'livekit-client'; | ||
| import { | ||
| useMaybeLayoutContext, | ||
| useLocalParticipant, | ||
| MediaDeviceMenu, | ||
| TrackToggle, | ||
|
|
||
| } from '@livekit/components-react'; | ||
| import { Button } from '@components/ui/button'; | ||
| import { GoCopy } from "react-icons/go"; | ||
| import styles from '../../../../styles/settings.module.css' | ||
| import { shortenLink } from 'lib/utils'; | ||
| import { BiLoaderCircle } from "react-icons/bi"; | ||
|
|
||
|
|
||
|
|
||
| export interface SettingsMenuProps extends React.HTMLAttributes<HTMLDivElement> { } | ||
|
|
||
| export function SettingsMenu(props: SettingsMenuProps) { | ||
| const layoutContext = useMaybeLayoutContext(); | ||
| const [copied, setCopied] = React.useState<boolean>(false); | ||
|
|
||
| const getTeamLink = React.useCallback(() => { | ||
| if (typeof window !== 'undefined') { | ||
| return `${window.location.origin}/meet/livekit?roomName=${window.localStorage.getItem('current-room-live-kit')}`; | ||
| } | ||
| return ''; | ||
| }, []); | ||
|
|
||
| const settings = React.useMemo(() => { | ||
| return { | ||
| media: { camera: true, microphone: true, label: 'Media Devices', speaker: true }, | ||
| effects: { label: 'Effects' }, | ||
| }; | ||
| }, []); | ||
|
|
||
| const tabs = React.useMemo( | ||
| () => Object.keys(settings) as Array<keyof typeof settings>, | ||
| [settings], | ||
| ); | ||
| const { microphoneTrack } = useLocalParticipant(); | ||
| const [activeTab, setActiveTab] = React.useState(tabs[0]); | ||
| const [isNoiseFilterEnabled, setIsNoiseFilterEnabled] = React.useState(true); | ||
| React.useEffect(() => { | ||
| const micPublication = microphoneTrack; | ||
| if (micPublication && micPublication.track instanceof LocalAudioTrack) { | ||
| const currentProcessor = micPublication.track.getProcessor(); | ||
| if (currentProcessor && !isNoiseFilterEnabled) { | ||
| micPublication.track.stopProcessor(); | ||
| } else if (!currentProcessor && isNoiseFilterEnabled) { | ||
| import('@livekit/krisp-noise-filter') | ||
| .then(({ KrispNoiseFilter, isKrispNoiseFilterSupported }) => { | ||
|
Check warning on line 54 in apps/web/lib/features/integrations/livekit/settings-livekit.tsx
|
||
| if (!isKrispNoiseFilterSupported()) { | ||
| console.error('Enhanced noise filter is not supported for this browser'); | ||
| setIsNoiseFilterEnabled(false); | ||
| return; | ||
| } | ||
| micPublication?.track | ||
| // @ts-ignore | ||
| ?.setProcessor(KrispNoiseFilter()) | ||
| .then(() => console.log('successfully set noise filter')); | ||
| }) | ||
| .catch((e) => console.error('Failed to load noise filter', e)); | ||
| } | ||
| } | ||
| }, [isNoiseFilterEnabled, microphoneTrack]); | ||
|
|
||
| return ( | ||
| <div className="bg-light--theme-light dark:bg-dark--theme-light indent-0 inset-0 items-center justify-cent fixed" style={{ width: '100%', height: '100%' }} {...props}> | ||
| <div className={`${styles.tabs} p-5`}> | ||
| {tabs.map( | ||
| (tab) => | ||
| settings[tab] && ( | ||
| <button | ||
| className={`${styles.tab} lk-button`} | ||
| key={tab} | ||
| onClick={() => setActiveTab(tab)} | ||
| aria-pressed={tab === activeTab}> | ||
| { | ||
| // @ts-ignore | ||
| settings[tab].label | ||
| } | ||
| </button> | ||
| ), | ||
| )} | ||
| </div> | ||
| <div className="tab-content p-5"> | ||
| {activeTab === 'media' && ( | ||
| <> | ||
| {settings.media && settings.media.camera && ( | ||
| <> | ||
| <h3>Camera</h3> | ||
| <section className="lk-button-group"> | ||
| <TrackToggle source={Track.Source.Camera}>Camera</TrackToggle> | ||
| <div className="lk-button-group-menu"> | ||
| <MediaDeviceMenu kind="videoinput" /> | ||
| </div> | ||
| </section> | ||
| </> | ||
| )} | ||
| {settings.media && settings.media.microphone && ( | ||
| <> | ||
| <h3>Microphone</h3> | ||
| <section className="lk-button-group"> | ||
| <TrackToggle source={Track.Source.Microphone}>Microphone</TrackToggle> | ||
| <div className="lk-button-group-menu"> | ||
| <MediaDeviceMenu kind="audioinput" /> | ||
| </div> | ||
| </section> | ||
| </> | ||
| )} | ||
| {settings.media && settings.media.speaker && ( | ||
| <> | ||
| <h3>Speaker & Headphones</h3> | ||
| <section className="lk-button-group"> | ||
| <span className="lk-button">Audio Output</span> | ||
| <div className="lk-button-group-menu"> | ||
| <MediaDeviceMenu kind="audiooutput"></MediaDeviceMenu> | ||
| </div> | ||
| </section> | ||
| </> | ||
| )} | ||
| </> | ||
| )} | ||
| {activeTab === 'effects' && ( | ||
| <> | ||
| <h3>Audio</h3> | ||
| <section> | ||
| <label htmlFor="noise-filter"> Enhanced Noise Cancellation</label> | ||
| <input | ||
| type="checkbox" | ||
| id="noise-filter" | ||
| onChange={(ev) => setIsNoiseFilterEnabled(ev.target.checked)} | ||
| checked={isNoiseFilterEnabled} | ||
| ></input> | ||
| </section> | ||
| </> | ||
| )} | ||
| </div> | ||
| <div style={{ | ||
| position: 'absolute', | ||
| right: 'var(--lk-grid-gap)', | ||
| bottom: 'var(--lk-grid-gap)' | ||
| }} className={`flex items-center w-full justify-between`}> | ||
| <div className='flex items-start flex-col'> | ||
| <span className='px-7 text-gray-600 dark:text-gray-400'>You can invite your colleagues to join the meeting by sharing this link.</span> | ||
| <button | ||
| className='px-7 text-primary-light flex items-center' | ||
| onClick={() => { | ||
| navigator.clipboard.writeText(getTeamLink()); | ||
| setCopied(true); | ||
| setTimeout(() => { | ||
| setCopied(false); | ||
| }, 1000 * 10 /** 10 Seconds */); | ||
| }} > | ||
| {copied ? < BiLoaderCircle className='animate-spine' /> : <GoCopy />} | ||
| {shortenLink(getTeamLink())} | ||
| </button> | ||
| </div> | ||
|
|
||
| <Button | ||
| className={`lk-button !bg-primary`} | ||
| onClick={() => layoutContext?.widget.dispatch?.({ msg: 'toggle_settings' })} | ||
| > | ||
| Close | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| .tabs { | ||
| position: relative; | ||
| display: flex; | ||
| align-content: space-between; | ||
| } | ||
|
|
||
| .tabs>.tab { | ||
| padding: 0.5rem; | ||
| border-radius: 0; | ||
| padding-bottom: 0.5rem; | ||
| border-bottom: 3px solid; | ||
| border-color: var(--bg5); | ||
| } | ||
|
|
||
| .tabs>.tab[aria-pressed='true'] { | ||
| border-color: #3826a6; | ||
| } |
Oops, something went wrong.