-
Notifications
You must be signed in to change notification settings - Fork 28
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: move audio level out of prebuilt
- Loading branch information
1 parent
875b7ba
commit c69b87f
Showing
7 changed files
with
114 additions
and
116 deletions.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,34 +1,74 @@ | ||
| import { useCallback, useRef } from 'react'; | ||
| import { HMSTrackID } from '@100mslive/hms-video-store'; | ||
| import { useAudioLevelStyles } from '@100mslive/react-sdk'; | ||
| import { useTheme } from '../Theme'; | ||
| import React, { useEffect, useRef } from 'react'; | ||
| import { selectTrackAudioByID, useHMSVanillaStore } from '@100mslive/react-sdk'; | ||
| import { Box, Flex } from '../Layout'; | ||
| import { keyframes } from '../Theme'; | ||
| //@ts-ignore | ||
| import bg from './audio-level.png'; | ||
|
|
||
| /** | ||
| * pass in a track id and get a ref. That ref can be attached to an element which will have border | ||
| * as per audio level post that. | ||
| */ | ||
| export function useBorderAudioLevel(audioTrackId?: HMSTrackID) { | ||
| const { theme } = useTheme(); | ||
| const color = theme.colors.primary_default.value; | ||
| const getStyle = useCallback( | ||
| (level: number) => { | ||
| const style: Record<string, string> = { | ||
| transition: 'outline 0.4s ease-in-out', | ||
| }; | ||
| style['outline'] = level ? `${sigmoid(level) * 4}px solid ${color}` : '0px solid transparent'; | ||
| return style; | ||
| }, | ||
| [color], | ||
| // keep the calculated values before hand to avoid recalcuation everytime | ||
| const positionValues = new Array(101).fill(0).reduce((acc, _, index) => { | ||
| acc[index] = Math.round((index / 100) * 4) / 4; // convert to 0.25 multiples | ||
| return acc; | ||
| }, {}); | ||
|
|
||
| const barAnimation = keyframes({ | ||
| from: { | ||
| maskSize: '4em .8em', | ||
| '-webkit-mask-position-y': '.1em', | ||
| }, | ||
|
|
||
| '50%': { | ||
| maskSize: '4em 1em', | ||
| '-webkit-mask-position-y': 0, | ||
| }, | ||
|
|
||
| to: { | ||
| maskSize: '4em .8em', | ||
| '-webkit-mask-position-y': '.1em', | ||
| }, | ||
| }); | ||
|
|
||
| const AudioBar = () => { | ||
| return ( | ||
| <Box | ||
| css={{ | ||
| width: '.25em', | ||
| height: '1em', | ||
| maskImage: `url(${bg})`, | ||
| '-webkit-mask-repeat': 'no-repeat', | ||
| backgroundColor: '$on_primary_high', | ||
| maskSize: '4em 1em', | ||
| maskPosition: '0 0.1em', | ||
| }} | ||
| /> | ||
| ); | ||
| const ref = useRef(null); | ||
| useAudioLevelStyles({ | ||
| trackId: audioTrackId, | ||
| getStyle, | ||
| ref, | ||
| }); | ||
| return ref; | ||
| } | ||
| }; | ||
|
|
||
| export const AudioLevel = ({ trackId }: { trackId?: string }) => { | ||
| const ref = useRef<HTMLDivElement | null>(null); | ||
| const vanillaStore = useHMSVanillaStore(); | ||
|
|
||
| export const sigmoid = (z: number) => { | ||
| return 1 / (1 + Math.exp(-z)); | ||
| useEffect(() => { | ||
| const unsubscribe = vanillaStore.subscribe(audioLevel => { | ||
| if (ref.current) { | ||
| let index = 0; | ||
| //@ts-ignore | ||
| for (const child of ref.current.children) { | ||
| const positionX = `-${positionValues[audioLevel] * (index === 1 ? 2.5 : 1.25)}em`; | ||
| child.style['-webkit-mask-position-x'] = positionX; | ||
| child.style['animation'] = | ||
| positionValues[audioLevel] > 0 ? `${barAnimation} 0.6s steps(3,jump-none) 0s infinite` : 'none'; | ||
| index++; | ||
| } | ||
| } | ||
| }, selectTrackAudioByID(trackId)); | ||
| return unsubscribe; | ||
| }, [vanillaStore, trackId]); | ||
| return ( | ||
| <Flex ref={ref} css={{ fontSize: '1rem', gap: '$2' }}> | ||
| <AudioBar /> | ||
| <AudioBar /> | ||
| <AudioBar /> | ||
| </Flex> | ||
| ); | ||
| }; |
File renamed without changes
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 |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| export { useBorderAudioLevel } from './AudioLevel'; | ||
| export { useBorderAudioLevel } from './useBorderAudioLevel'; | ||
| export { AudioLevel } from './AudioLevel'; |
34 changes: 34 additions & 0 deletions
34
packages/roomkit-react/src/AudioLevel/useBorderAudioLevel.tsx
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,34 @@ | ||
| import { useCallback, useRef } from 'react'; | ||
| import { HMSTrackID } from '@100mslive/hms-video-store'; | ||
| import { useAudioLevelStyles } from '@100mslive/react-sdk'; | ||
| import { useTheme } from '../Theme'; | ||
|
|
||
| /** | ||
| * pass in a track id and get a ref. That ref can be attached to an element which will have border | ||
| * as per audio level post that. | ||
| */ | ||
| export function useBorderAudioLevel(audioTrackId?: HMSTrackID) { | ||
| const { theme } = useTheme(); | ||
| const color = theme.colors.primary_default.value; | ||
| const getStyle = useCallback( | ||
| (level: number) => { | ||
| const style: Record<string, string> = { | ||
| transition: 'outline 0.4s ease-in-out', | ||
| }; | ||
| style['outline'] = level ? `${sigmoid(level) * 4}px solid ${color}` : '0px solid transparent'; | ||
| return style; | ||
| }, | ||
| [color], | ||
| ); | ||
| const ref = useRef(null); | ||
| useAudioLevelStyles({ | ||
| trackId: audioTrackId, | ||
| getStyle, | ||
| ref, | ||
| }); | ||
| return ref; | ||
| } | ||
|
|
||
| export const sigmoid = (z: number) => { | ||
| return 1 / (1 + Math.exp(-z)); | ||
| }; |
72 changes: 0 additions & 72 deletions
72
packages/roomkit-react/src/Prebuilt/components/AudioLevelAnimation.tsx
This file was deleted.
Oops, something went wrong.
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