From a59fc73bb989522266ecf704fd7fed616d760cc3 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Thu, 20 Jul 2023 15:21:05 +0200
Subject: [PATCH 01/26] feat(client): keep track of audio output level in call
 state and for each participant

---
 packages/client/src/Call.ts               | 28 ++++++++++++++++++++
 packages/client/src/events/participant.ts | 11 +++++++-
 packages/client/src/store/CallState.ts    | 31 ++++++++++++++++++++++-
 packages/client/src/types.ts              |  8 +++++-
 4 files changed, 75 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/Call.ts b/packages/client/src/Call.ts
index 9e9f8cd2e8..fbbf74a60e 100644
--- a/packages/client/src/Call.ts
+++ b/packages/client/src/Call.ts
@@ -1165,6 +1165,34 @@ export class Call {
     });
   };
 
+  /**
+   * Updates the audio output level for a given participant or for all the participants and the default call audio output level.
+   * @param level
+   * @param participant
+   */
+  setAudioOutputLevel(level: number, participant?: StreamVideoParticipant) {
+    if (participant) {
+      this.state.updateParticipant(participant.sessionId, {
+        audioOutputLevel: level,
+      });
+    } else if (this.sfuClient?.sessionId) {
+      this.state.updateParticipants(
+        this.state.participants.reduce<StreamVideoParticipantPatches>(
+          (acc, p) => {
+            acc[p.sessionId] = {
+              audioOutputLevel: level,
+            };
+            return acc;
+          },
+          {},
+        ),
+      );
+    }
+    if (!participant) {
+      this.state.setDefaultAudioOutputLevel(level);
+    }
+  }
+
   /**
    * Sets the `audioDeviceId` property of the [`localParticipant$`](./StreamVideoClient.md/#readonlystatestore)).
    *
diff --git a/packages/client/src/events/participant.ts b/packages/client/src/events/participant.ts
index f65a4e6aba..d1f3964401 100644
--- a/packages/client/src/events/participant.ts
+++ b/packages/client/src/events/participant.ts
@@ -23,6 +23,7 @@ export const watchParticipantJoined = (state: CallState) => {
       Object.assign<StreamVideoParticipant, Partial<StreamVideoParticipant>>(
         participant,
         {
+          audioOutputLevel: state.defaultAudioOutputLevel,
           viewportVisibilityState: VisibilityState.UNKNOWN,
         },
       ),
@@ -61,7 +62,15 @@ export const watchTrackPublished = (state: CallState) => {
     // events, and instead, it would only provide the participant's information
     // once they start publishing a track.
     if (participant) {
-      state.updateOrAddParticipant(sessionId, participant);
+      state.updateOrAddParticipant(
+        sessionId,
+        Object.assign<StreamVideoParticipant, Partial<StreamVideoParticipant>>(
+          participant,
+          {
+            audioOutputLevel: state.defaultAudioOutputLevel,
+          },
+        ),
+      );
     } else {
       state.updateParticipant(sessionId, (p) => ({
         publishedTracks: [...p.publishedTracks, type].filter(unique),
diff --git a/packages/client/src/store/CallState.ts b/packages/client/src/store/CallState.ts
index 2eef0974c7..8c7b29434b 100644
--- a/packages/client/src/store/CallState.ts
+++ b/packages/client/src/store/CallState.ts
@@ -82,6 +82,10 @@ export enum CallingState {
  * @react You don't have to use this class directly, as we are exposing the state through Hooks.
  */
 export class CallState {
+  /**
+   * The speaker volume level that is set, if `StreamVideoParticipant.defaultAudioOutputLevelSubject` is undefined.
+   */
+  private defaultAudioOutputLevelSubject = new BehaviorSubject<number>(1);
   /**
    * The raw call metadata object, as defined on the backend.
    *
@@ -165,8 +169,13 @@ export class CallState {
    */
   private callRecordingListSubject = new BehaviorSubject<CallRecording[]>([]);
 
-  // Derived state
+  /**
+   * Emits the default audio output level value in form of decimal number in range of 0-1.
+   * The default value is assigned to each newly joined StreamVideoParticipant's audioOutputLevel property.
+   */
+  defaultAudioOutputLevel$: Observable<number>;
 
+  // Derived state
   /**
    * The time the call session actually started.
    * Useful for displaying the call duration.
@@ -303,6 +312,8 @@ export class CallState {
       distinctUntilChanged(),
     );
 
+    this.defaultAudioOutputLevel$ =
+      this.defaultAudioOutputLevelSubject.asObservable();
     this.startedAt$ = this.startedAtSubject.asObservable();
     this.participantCount$ = this.participantCountSubject.asObservable();
     this.anonymousParticipantCount$ =
@@ -473,6 +484,24 @@ export class CallState {
     return this.setCurrentValue(this.callingStateSubject, state);
   };
 
+  /**
+   * Retrieves the current value of the default audio output level.
+   *
+   * @internal
+   */
+  get defaultAudioOutputLevel() {
+    return this.getCurrentValue(this.defaultAudioOutputLevel$);
+  }
+
+  /**
+   * Sets the current value of the default audio output level.
+   *
+   * @internal
+   */
+  setDefaultAudioOutputLevel = (level: number) => {
+    return this.setCurrentValue(this.defaultAudioOutputLevelSubject, level);
+  };
+
   /**
    * The list of call recordings.
    */
diff --git a/packages/client/src/types.ts b/packages/client/src/types.ts
index 73c8454ca1..d3d9dbbfd0 100644
--- a/packages/client/src/types.ts
+++ b/packages/client/src/types.ts
@@ -34,7 +34,13 @@ export enum DebounceType {
 
 export interface StreamVideoParticipant extends Participant {
   /**
-   * The participant's audio stream, if they are publishing audio and
+   * The speaker volume in range 0 - 1 set by the participant.
+   * If not set, then CallState.defaultAudioOutputLevel should be reflected.
+   */
+  audioOutputLevel?: number;
+
+  /**
+   * The participant's audio stream, if they are publishing audio, and
    * we have subscribed to it.
    */
   audioStream?: MediaStream;

From 6735037af62627c0607918c12c82819383e0fb35 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Thu, 20 Jul 2023 15:23:30 +0200
Subject: [PATCH 02/26] feat(react-bindings): add useDefaultAudioOutputLevel
 hook

---
 packages/react-bindings/src/hooks/call.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/react-bindings/src/hooks/call.ts b/packages/react-bindings/src/hooks/call.ts
index 9d07a4ea60..9d7fa6f705 100644
--- a/packages/react-bindings/src/hooks/call.ts
+++ b/packages/react-bindings/src/hooks/call.ts
@@ -131,3 +131,14 @@ export const useCallStartedAt = () => {
   const { startedAt$ } = useCallState();
   return useObservableValue(startedAt$);
 };
+
+/**
+ * Utility hook providing the default audio output level in a given call
+ * Should be used to determine audio output level if the call is not joined yet.
+ *
+ * @category Call State
+ */
+export const useDefaultAudioOutputLevel = () => {
+  const { defaultAudioOutputLevel$ } = useCallState();
+  return useObservableValue(defaultAudioOutputLevel$);
+};

From 748ae42a36d255f985200b24d87012c00baba0d8 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Thu, 20 Jul 2023 15:27:56 +0200
Subject: [PATCH 03/26] feat(react-sdk): enable setting audio output volume to
 Audio component

---
 .../react-sdk/src/core/components/Audio/Audio.tsx    | 12 +++++++++++-
 .../components/CallLayout/PaginatedGridLayout.tsx    |  1 +
 .../components/ParticipantView/ParticipantView.tsx   |  1 +
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/react-sdk/src/core/components/Audio/Audio.tsx b/packages/react-sdk/src/core/components/Audio/Audio.tsx
index 996469206b..6c31706cd6 100644
--- a/packages/react-sdk/src/core/components/Audio/Audio.tsx
+++ b/packages/react-sdk/src/core/components/Audio/Audio.tsx
@@ -12,10 +12,14 @@ export type AudioProps = DetailedHTMLProps<
 > &
   Pick<StreamVideoParticipant, 'audioStream'> & {
     sinkId?: string;
+    /**
+     * Value applied to underlying audio element to control the audio output level.
+     */
+    volume?: number;
   };
 
 // TODO: rename to BaseAudio
-export const Audio = ({ audioStream, sinkId, ...rest }: AudioProps) => {
+export const Audio = ({ audioStream, sinkId, volume, ...rest }: AudioProps) => {
   const audioRef = useRef<HTMLAudioElement>(null);
   useEffect(() => {
     const $el = audioRef.current;
@@ -31,10 +35,16 @@ export const Audio = ({ audioStream, sinkId, ...rest }: AudioProps) => {
     const $el = audioRef.current;
     if (!$el || !sinkId) return;
 
+    // HTMLMediaElement neither HTMLAudioElement in Typescript have prop setSinkId
     if (($el as any).setSinkId) {
       ($el as any).setSinkId(sinkId);
     }
   }, [sinkId]);
 
+  useEffect(() => {
+    if (typeof volume !== 'number' || !audioRef.current) return;
+    audioRef.current.volume = volume;
+  }, [audioRef, volume]);
+
   return <audio autoPlay ref={audioRef} {...rest} />;
 };
diff --git a/packages/react-sdk/src/core/components/CallLayout/PaginatedGridLayout.tsx b/packages/react-sdk/src/core/components/CallLayout/PaginatedGridLayout.tsx
index 5b69a68acf..b60f8b2d78 100644
--- a/packages/react-sdk/src/core/components/CallLayout/PaginatedGridLayout.tsx
+++ b/packages/react-sdk/src/core/components/CallLayout/PaginatedGridLayout.tsx
@@ -118,6 +118,7 @@ export const PaginatedGridLayout = ({
           muted={false}
           key={participant.sessionId}
           audioStream={participant.audioStream}
+          volume={participant?.audioOutputLevel}
         />
       ))}
       <div className="str-video__paginated-grid-layout__wrapper">
diff --git a/packages/react-sdk/src/core/components/ParticipantView/ParticipantView.tsx b/packages/react-sdk/src/core/components/ParticipantView/ParticipantView.tsx
index dcaa9cacaa..563bb2a325 100644
--- a/packages/react-sdk/src/core/components/ParticipantView/ParticipantView.tsx
+++ b/packages/react-sdk/src/core/components/ParticipantView/ParticipantView.tsx
@@ -165,6 +165,7 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
             muted={isLocalParticipant || muteAudio}
             sinkId={localParticipant?.audioOutputDeviceId}
             audioStream={audioStream}
+            volume={participant?.audioOutputLevel}
           />
           <Video
             VideoPlaceholder={VideoPlaceholder}

From 4b0db505ed8f5b0f508bd1a51d239cca3984e9b4 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Thu, 20 Jul 2023 15:40:05 +0200
Subject: [PATCH 04/26] feat(react-sdk): enable toggling master audio output
 add AudioOutputSlider

---
 .../CallControls/AudioOutputLevelSlider.tsx   | 48 +++++++++++++++++++
 .../CallControls/ToggleAudioOutputButton.tsx  | 19 ++++++--
 .../src/components/CallControls/index.ts      |  1 +
 3 files changed, 65 insertions(+), 3 deletions(-)
 create mode 100644 packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx

diff --git a/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx b/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx
new file mode 100644
index 0000000000..cac1f818e9
--- /dev/null
+++ b/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx
@@ -0,0 +1,48 @@
+import clsx from 'clsx';
+import {
+  useCall,
+  useDefaultAudioOutputLevel,
+} from '@stream-io/video-react-bindings';
+import { MouseEventHandler } from 'react';
+import { Icon } from '../Icon';
+import { StreamVideoParticipant } from '@stream-io/video-client';
+
+export type AudioLevelControlProps = {
+  participant?: StreamVideoParticipant;
+};
+
+export const AudioOutputLevelSlider = ({
+  participant,
+}: AudioLevelControlProps) => {
+  const call = useCall();
+  const defaultAudioOutputLevel = useDefaultAudioOutputLevel();
+
+  const audioLevel = participant?.audioOutputLevel ?? defaultAudioOutputLevel;
+
+  const handleClick: MouseEventHandler = (event) => {
+    const { width, x } = event.currentTarget.getBoundingClientRect();
+
+    const volume = +((event.clientX - x) / width).toFixed(2);
+
+    call?.setAudioOutputLevel(volume > 0 ? volume : 0);
+  };
+
+  return (
+    <div
+      className={clsx('str-video__audio-level-slider', {
+        'str-video__audio-level-slider--mute': !audioLevel,
+      })}
+    >
+      <Icon icon={audioLevel ? 'speaker' : 'speaker-off'} />
+      <div
+        className="str-video__audio-level-slider__track"
+        onClick={handleClick}
+      >
+        <div
+          className="str-video__audio-level-slider__level"
+          style={{ transform: `scaleX(${audioLevel})` }}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/packages/react-sdk/src/components/CallControls/ToggleAudioOutputButton.tsx b/packages/react-sdk/src/components/CallControls/ToggleAudioOutputButton.tsx
index 302869b3a2..37d5e20d1f 100644
--- a/packages/react-sdk/src/components/CallControls/ToggleAudioOutputButton.tsx
+++ b/packages/react-sdk/src/components/CallControls/ToggleAudioOutputButton.tsx
@@ -1,6 +1,11 @@
 import { CompositeButton, IconButton } from '../Button';
 import { DeviceSelectorAudioOutput } from '../DeviceSettings';
-import { useI18n } from '@stream-io/video-react-bindings';
+import {
+  useCall,
+  useDefaultAudioOutputLevel,
+  useI18n,
+  useLocalParticipant,
+} from '@stream-io/video-react-bindings';
 import { ComponentType } from 'react';
 
 export type ToggleAudioOutputButtonProps = {
@@ -11,12 +16,20 @@ export type ToggleAudioOutputButtonProps = {
 export const ToggleAudioOutputButton = (
   props: ToggleAudioOutputButtonProps,
 ) => {
+  const call = useCall();
+  const defaultAudioOutputLevel = useDefaultAudioOutputLevel();
+  const localParticipant = useLocalParticipant();
   const { t } = useI18n();
   const { caption = t('Speakers'), Menu = DeviceSelectorAudioOutput } = props;
+  const enabled =
+    (localParticipant?.audioOutputLevel ?? defaultAudioOutputLevel) > 0;
 
   return (
-    <CompositeButton Menu={Menu} active caption={caption}>
-      <IconButton icon="speaker" />
+    <CompositeButton Menu={Menu} active={!enabled} caption={caption}>
+      <IconButton
+        icon={enabled ? 'speaker' : 'speaker-off'}
+        onClick={() => call?.setAudioOutputLevel(enabled ? 0 : 1)}
+      />
     </CompositeButton>
   );
 };
diff --git a/packages/react-sdk/src/components/CallControls/index.ts b/packages/react-sdk/src/components/CallControls/index.ts
index 4758f8d958..d1b989c578 100644
--- a/packages/react-sdk/src/components/CallControls/index.ts
+++ b/packages/react-sdk/src/components/CallControls/index.ts
@@ -1,3 +1,4 @@
+export * from './AudioOutputLevelSlider';
 export * from './AcceptCallButton';
 export * from './CallControls';
 export * from './CallStatsButton';

From f96524042c330cf9c55beb7ae1351f6440c41061 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Thu, 20 Jul 2023 15:41:40 +0200
Subject: [PATCH 05/26] feat(react-sdk): add AudioOutputLevelSlider to
 ParticipantActionsContextMenu

---
 .../CallParticipantListingItem.tsx                 | 10 ++++++++--
 .../react-sdk/src/components/Menu/GenericMenu.tsx  | 14 ++++++++++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/react-sdk/src/components/CallParticipantsList/CallParticipantListingItem.tsx b/packages/react-sdk/src/components/CallParticipantsList/CallParticipantListingItem.tsx
index ced86c2411..f0596238ed 100644
--- a/packages/react-sdk/src/components/CallParticipantsList/CallParticipantListingItem.tsx
+++ b/packages/react-sdk/src/components/CallParticipantsList/CallParticipantListingItem.tsx
@@ -16,6 +16,7 @@ import {
   SfuModels,
   StreamVideoParticipant,
 } from '@stream-io/video-client';
+import { AudioOutputLevelSlider } from '../CallControls';
 import { IconButton } from '../Button';
 import {
   GenericMenu,
@@ -25,6 +26,7 @@ import {
 } from '../Menu';
 import { WithTooltip } from '../Tooltip';
 import { Icon } from '../Icon';
+import { useMediaDevices } from '../../core';
 
 type CallParticipantListingItemProps = {
   /** Participant object be rendered */
@@ -139,6 +141,7 @@ export const ParticipantActionsContextMenu = ({
     document.pictureInPictureElement,
   );
   const activeCall = useCall();
+  const { isAudioOutputChangeSupported } = useMediaDevices();
 
   const blockUser = () => {
     activeCall?.blockUser(participant.userId);
@@ -235,7 +238,7 @@ export const ParticipantActionsContextMenu = ({
   };
 
   return (
-    <GenericMenu>
+    <GenericMenu className="str-video__participant-actions-context-menu">
       <GenericMenuButtonItem onClick={toggleParticipantPinnedAt}>
         <Icon icon="pin" />
         {participant.pinnedAt ? 'Unpin' : 'Pin'}
@@ -276,7 +279,7 @@ export const ParticipantActionsContextMenu = ({
           }
           onClick={muteAudio}
         >
-          <Icon icon="no-audio" />
+          <Icon icon="mic-off" />
           Mute audio
         </GenericMenuButtonItem>
       </Restricted>
@@ -324,6 +327,9 @@ export const ParticipantActionsContextMenu = ({
           Disable screen sharing
         </GenericMenuButtonItem>
       </Restricted>
+      {isAudioOutputChangeSupported && (
+        <AudioOutputLevelSlider participant={participant} />
+      )}
     </GenericMenu>
   );
 };
diff --git a/packages/react-sdk/src/components/Menu/GenericMenu.tsx b/packages/react-sdk/src/components/Menu/GenericMenu.tsx
index 1cd4afcc8f..8827524a97 100644
--- a/packages/react-sdk/src/components/Menu/GenericMenu.tsx
+++ b/packages/react-sdk/src/components/Menu/GenericMenu.tsx
@@ -1,7 +1,17 @@
 import { ComponentProps, PropsWithChildren } from 'react';
+import clsx from 'clsx';
 
-export const GenericMenu = ({ children }: PropsWithChildren) => {
-  return <ul className="str-video__generic-menu">{children}</ul>;
+export type GenericMenuProps = {
+  className?: string;
+};
+
+export const GenericMenu = ({
+  className,
+  children,
+}: PropsWithChildren<GenericMenuProps>) => {
+  return (
+    <ul className={clsx('str-video__generic-menu', className)}>{children}</ul>
+  );
 };
 
 export const GenericMenuButtonItem = ({

From db315cdaad417c8abf287cca06d19017d80fdf32 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Thu, 20 Jul 2023 15:42:21 +0200
Subject: [PATCH 06/26] feat(styling): add speaker-off icon

---
 packages/styling/src/Icon/Icon-theme.scss         | 5 +++++
 packages/styling/src/_global-theme-variables.scss | 1 +
 2 files changed, 6 insertions(+)

diff --git a/packages/styling/src/Icon/Icon-theme.scss b/packages/styling/src/Icon/Icon-theme.scss
index f30682e570..ed58da779c 100644
--- a/packages/styling/src/Icon/Icon-theme.scss
+++ b/packages/styling/src/Icon/Icon-theme.scss
@@ -125,6 +125,11 @@
     -webkit-mask-image: var(--str-video__icon--speaker);
   }
 
+  &--speaker-off {
+    mask-image: var(--str-video__icon--speaker-off);
+    -webkit-mask-image: var(--str-video__icon--speaker-off);
+  }
+
   &--ellipsis {
     mask-image: var(--str-video__icon--ellipsis);
     -webkit-mask-image: var(--str-video__icon--ellipsis);
diff --git a/packages/styling/src/_global-theme-variables.scss b/packages/styling/src/_global-theme-variables.scss
index 99ed932a98..55ee22a3ee 100644
--- a/packages/styling/src/_global-theme-variables.scss
+++ b/packages/styling/src/_global-theme-variables.scss
@@ -70,6 +70,7 @@
   --str-video__icon--screen-share-on: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAzMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1IDE3Ljc5NjlDMjYuMzc1IDE3Ljc5NjkgMjcuNDg3NSAxNi43MDcgMjcuNDg3NSAxNS4zNzVMMjcuNSAzLjI2NTYyQzI3LjUgMS45MjE0OCAyNi4zNzUgMC44NDM3NSAyNSAwLjg0Mzc1SDVDMy42MTI1IDAuODQzNzUgMi41IDEuOTIxNDggMi41IDMuMjY1NjJWMTUuMzc1QzIuNSAxNi43MDcgMy42MTI1IDE3Ljc5NjkgNSAxNy43OTY5SDBWMjAuMjE4OEgzMFYxNy43OTY5SDI1Wk01IDE1LjM3NVYzLjI2NTYySDI1VjE1LjM4NzFMNSAxNS4zNzVaTTE2LjI1IDcuMDU1ODZDMTEuMzg3NSA3LjcwOTc3IDkuNDUgMTAuOTMwOSA4Ljc1IDE0LjE2NDFDMTAuNDg3NSAxMS44OTk2IDEyLjc3NSAxMC44NzAzIDE2LjI1IDEwLjg3MDNWMTMuNTIyM0wyMS4yNSA4Ljk5MzM2TDE2LjI1IDQuNDc2NTZWNy4wNTU4NloiIGZpbGw9IiMwMDVGRkYiLz4KPC9zdmc+Cg==');
   --str-video__icon--settings: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNOS4xMTAzNSAxOS4xOTA0SDEwLjg4NTdDMTEuNjE1MiAxOS4xOTA0IDEyLjE4NjUgMTguNzQyMiAxMi4zNTM1IDE4LjA0NzlMMTIuNzEzOSAxNi40OTIyTDEyLjk0MjQgMTYuNDA0M0wxNC4yOTU5IDE3LjIzOTNDMTQuOTExMSAxNy42MjYgMTUuNjMxOCAxNy41MjkzIDE2LjE0MTYgMTcuMDEwN0wxNy4zNzIxIDE1Ljc4MDNDMTcuODk5NCAxNS4yNjE3IDE3Ljk4NzMgMTQuNTQxIDE3LjYwMDYgMTMuOTM0NkwxNi43NjU2IDEyLjU4OThMMTYuODQ0NyAxMi4zNzAxTDE4LjQwMDQgMTIuMDA5OEMxOS4wODU5IDExLjgzNCAxOS41NDMgMTEuMjYyNyAxOS41NDMgMTAuNTQyVjguODEwNTVDMTkuNTQzIDguMDg5ODQgMTkuMDk0NyA3LjUxODU1IDE4LjQwMDQgNy4zNDI3N0wxNi44NjIzIDYuOTczNjNMMTYuNzc0NCA2Ljc0NTEyTDE3LjYwOTQgNS40MDAzOUMxNy45OTYxIDQuNzkzOTUgMTcuODk5NCA0LjA4MjAzIDE3LjM4MDkgMy41NDU5TDE2LjE1MDQgMi4zMTU0M0MxNS42NDA2IDEuODA1NjYgMTQuOTE5OSAxLjcwODk4IDE0LjMxMzUgMi4wODY5MUwxMi45NiAyLjkxMzA5TDEyLjcxMzkgMi44MTY0MUwxMi4zNTM1IDEuMjYwNzRDMTIuMTg2NSAwLjU2NjQwNiAxMS42MTUyIDAuMTE4MTY0IDEwLjg4NTcgMC4xMTgxNjRIOS4xMTAzNUM4LjM3MjA3IDAuMTE4MTY0IDcuODA5NTcgMC41NjY0MDYgNy42NDI1OCAxLjI2MDc0TDcuMjgyMjMgMi44MTY0MUw3LjAzNjEzIDIuOTEzMDlMNS42ODI2MiAyLjA4NjkxQzUuMDY3MzggMS43MDg5OCA0LjM0NjY4IDEuODA1NjYgMy44MzY5MSAyLjMxNTQzTDIuNjA2NDUgMy41NDU5QzIuMDg3ODkgNC4wODIwMyAxLjk5MTIxIDQuNzkzOTUgMi4zNzc5MyA1LjQwMDM5TDMuMjIxNjggNi43NDUxMkwzLjEyNSA2Ljk3MzYzTDEuNTk1NyA3LjM0Mjc3QzAuODkyNTc4IDcuNTE4NTUgMC40NTMxMjUgOC4wODk4NCAwLjQ1MzEyNSA4LjgxMDU1VjEwLjU0MkMwLjQ1MzEyNSAxMS4yNjI3IDAuOTAxMzY3IDExLjgzNCAxLjU5NTcgMTIuMDA5OEwzLjE0MjU4IDEyLjM3MDFMMy4yMzA0NyAxMi41ODk4TDIuMzg2NzIgMTMuOTM0NkMyIDE0LjU0MSAyLjA5NjY4IDE1LjI2MTcgMi42MTUyMyAxNS43ODAzTDMuODQ1NyAxNy4wMTA3QzQuMzY0MjYgMTcuNTI5MyA1LjA4NDk2IDE3LjYyNiA1LjY5MTQxIDE3LjIzOTNMNy4wNDQ5MiAxNi40MDQzTDcuMjgyMjMgMTYuNDkyMkw3LjY0MjU4IDE4LjA0NzlDNy44MDk1NyAxOC43NDIyIDguMzcyMDcgMTkuMTkwNCA5LjExMDM1IDE5LjE5MDRaTTkuMzIxMjkgMTcuNTk5NkM5LjE3MTg4IDE3LjU5OTYgOS4xMDE1NiAxNy41MjkzIDkuMDc1MiAxNy4zOTc1TDguNTU2NjQgMTUuMjM1NEM3Ljk5NDE0IDE1LjEwMzUgNy40NjY4IDE0Ljg4MzggNy4wMzYxMyAxNC42MTEzTDUuMTM3NyAxNS43ODAzQzUuMDMyMjMgMTUuODUwNiA0LjkyNjc2IDE1Ljg0MTggNC44MTI1IDE1LjczNjNMMy44ODA4NiAxNC44MDQ3QzMuNzg0MTggMTQuNzA4IDMuNzc1MzkgMTQuNjAyNSAzLjg1NDQ5IDE0LjQ4ODNMNS4wMjM0NCAxMi41ODk4QzQuNzc3MzQgMTIuMTc2OCA0LjU0MDA0IDExLjY0OTQgNC40MDgyIDExLjA5NTdMMi4yMzczIDEwLjU3NzFDMi4xMDU0NyAxMC41NTA4IDIuMDQzOTUgMTAuNDgwNSAyLjA0Mzk1IDEwLjMzMTFWOS4wMTI3QzIuMDQzOTUgOC44NTQ0OSAyLjEwNTQ3IDguNzkyOTcgMi4yMzczIDguNzU3ODFMNC40MDgyIDguMjQ4MDVDNC41NDAwNCA3LjY1OTE4IDQuNzk0OTIgNy4xMTQyNiA1LjAwNTg2IDYuNzM2MzNMMy44NDU3IDQuODQ2NjhDMy43NjY2IDQuNzIzNjMgMy43NjY2IDQuNjE4MTYgMy44NzIwNyA0LjUxMjdMNC44MDM3MSAzLjU4OTg0QzQuOTE3OTcgMy40OTMxNiA1LjAwNTg2IDMuNDc1NTkgNS4xMzc3IDMuNTQ1OUw3LjAyNzM0IDQuNjk3MjdDNy40MjI4NSA0LjQ1OTk2IDguMDAyOTMgNC4yMTM4NyA4LjU1NjY0IDQuMDczMjRMOS4wNzUyIDEuOTExMTNDOS4xMDE1NiAxLjc3OTMgOS4xNzE4OCAxLjcwODk4IDkuMzIxMjkgMS43MDg5OEgxMC42NzQ4QzEwLjgyNDIgMS43MDg5OCAxMC44OTQ1IDEuNzcwNTEgMTAuOTEyMSAxLjkxMTEzTDExLjQzOTUgNC4wOTA4MkMxMi4wMTA3IDQuMjIyNjYgMTIuNTI5MyA0LjQ1OTk2IDEyLjk2IDQuNzA2MDVMMTQuODQ5NiAzLjU1NDY5QzE0Ljk4MTQgMy40ODQzOCAxNS4wNjkzIDMuNDkzMTYgMTUuMTc0OCAzLjU5ODYzTDE2LjExNTIgNC41MjE0OEMxNi4yMjA3IDQuNjE4MTYgMTYuMjIwNyA0LjcyMzYzIDE2LjE0MTYgNC44NDY2OEwxNC45ODE0IDYuNzM2MzNDMTUuMTkyNCA3LjExNDI2IDE1LjQ1NjEgNy42NTkxOCAxNS41ODc5IDguMjQ4MDVMMTcuNzUgOC43NTc4MUMxNy44OTA2IDguNzkyOTcgMTcuOTUyMSA4Ljg1NDQ5IDE3Ljk1MjEgOS4wMTI3VjEwLjMzMTFDMTcuOTUyMSAxMC40ODA1IDE3Ljg4MTggMTAuNTUwOCAxNy43NSAxMC41NzcxTDE1LjU3OTEgMTEuMDk1N0MxNS40NDczIDExLjY0OTQgMTUuMjEgMTIuMTc2OCAxNC45NzI3IDEyLjU4OThMMTYuMTMyOCAxNC40ODgzQzE2LjIwMzEgMTQuNjAyNSAxNi4yMDMxIDE0LjcwOCAxNi4xMDY0IDE0Ljc5NTlMMTUuMTc0OCAxNS43MzYzQzE1LjA2MDUgMTUuODQxOCAxNC45NTUxIDE1Ljg1MDYgMTQuODQ5NiAxNS43ODAzTDEyLjk1MTIgMTQuNjExM0MxMi41MjA1IDE0Ljg4MzggMTIuMDE5NSAxNS4xMDM1IDExLjQzOTUgMTUuMjM1NEwxMC45MTIxIDE3LjM5NzVDMTAuODk0NSAxNy41MzgxIDEwLjgyNDIgMTcuNTk5NiAxMC42NzQ4IDE3LjU5OTZIOS4zMjEyOVpNOS45OTgwNSAxMi45OTQxQzExLjgyNjIgMTIuOTk0MSAxMy4zMjkxIDExLjQ5MTIgMTMuMzI5MSA5LjY1NDNDMTMuMzI5MSA3LjgzNDk2IDExLjgyNjIgNi4zMzIwMyA5Ljk5ODA1IDYuMzMyMDNDOC4xNjk5MiA2LjMzMjAzIDYuNjU4MiA3LjgzNDk2IDYuNjU4MiA5LjY1NDNDNi42NTgyIDExLjQ5MTIgOC4xNjExMyAxMi45OTQxIDkuOTk4MDUgMTIuOTk0MVpNOS45OTgwNSAxMS40OTEyQzguOTk2MDkgMTEuNDkxMiA4LjE2OTkyIDEwLjY2NSA4LjE2OTkyIDkuNjU0M0M4LjE2OTkyIDguNjYxMTMgOC45OTYwOSA3Ljg0Mzc1IDkuOTk4MDUgNy44NDM3NUMxMC45ODI0IDcuODQzNzUgMTEuNzk5OCA4LjY2MTEzIDExLjc5OTggOS42NTQzQzExLjc5OTggMTAuNjU2MiAxMC45ODI0IDExLjQ5MTIgOS45OTgwNSAxMS40OTEyWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==');
   --str-video__icon--speaker: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAyMyAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuMjUgNy44OTg0OVYxNS4xNjQxSDUuMjVMMTEuNSAyMS4yMTg4VjEuODQzOEw1LjI1IDcuODk4NDlIMC4yNVpNMTcuMTI1IDExLjUzMTNDMTcuMTI1IDkuMzg3OTQgMTUuODUgNy41NDczMSAxNCA2LjY1MTIyVjE2LjM5OTNDMTUuODUgMTUuNTE1MyAxNy4xMjUgMTMuNjc0NyAxNy4xMjUgMTEuNTMxM1pNMTQgMC45MTEzNzdWMy40MDU5MUMxNy42MTI1IDQuNDQ3MzEgMjAuMjUgNy42OTI2MyAyMC4yNSAxMS41MzEzQzIwLjI1IDE1LjM3IDE3LjYxMjUgMTguNjE1MyAxNCAxOS42NTY3VjIyLjE1MTJDMTkuMDEyNSAyMS4wNDkzIDIyLjc1IDE2LjcxNDEgMjIuNzUgMTEuNTMxM0MyMi43NSA2LjM0ODQ5IDE5LjAxMjUgMi4wMTMzMyAxNCAwLjkxMTM3N1oiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');
+  --str-video__icon--speaker-off: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyMyAyMiIgZmlsbD0iY3VycmVudENvbG9yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0iTTEuMDM3NSAwLjkwMTA3NEMwLjU1IDEuMzczMzQgMC41NSAyLjEzNjIzIDEuMDM3NSAyLjYwODVMNS42MTI1IDcuMDQwNTNMNS4yNSA3LjQwMzgxSDEuNUMwLjgxMjUgNy40MDM4MSAwLjI1IDcuOTQ4NzMgMC4yNSA4LjYxNDc1VjEzLjQ1ODVDMC4yNSAxNC4xMjQ1IDAuODEyNSAxNC42Njk0IDEuNSAxNC42Njk0SDUuMjVMOS4zNjI1IDE4LjY1MzRDMTAuMTUgMTkuNDE2MyAxMS41IDE4Ljg3MTQgMTEuNSAxNy43OTM3VjEyLjc0NEwxNi43MjUgMTcuODA1OEMxNi4xMTI1IDE4LjI1MzggMTUuNDUgMTguNjI5MiAxNC43MjUgMTguOTA3N0MxNC4yNzUgMTkuMDg5NCAxNCAxOS41NDk1IDE0IDIwLjAyMThDMTQgMjAuODkzNyAxNC45MTI1IDIxLjQ1MDcgMTUuNzM3NSAyMS4xMjM3QzE2LjczNzUgMjAuNzI0MSAxNy42NzUgMjAuMTkxMyAxOC41MTI1IDE5LjUzNzRMMjAuMTg3NSAyMS4xNjAxQzIwLjY3NSAyMS42MzIzIDIxLjQ2MjUgMjEuNjMyMyAyMS45NSAyMS4xNjAxQzIyLjQzNzUgMjAuNjg3OCAyMi40Mzc1IDE5LjkyNDkgMjEuOTUgMTkuNDUyNkwyLjgxMjUgMC45MDEwNzRDMi4zMjUgMC40Mjg4MDkgMS41Mzc1IDAuNDI4ODA5IDEuMDM3NSAwLjkwMTA3NFpNMjAuMjUgMTEuMDM2NkMyMC4yNSAxMi4wMjk2IDIwLjA2MjUgMTIuOTg2MiAxOS43Mzc1IDEzLjg3MDJMMjEuNjUgMTUuNzIyOUMyMi4zNSAxNC4zMDYyIDIyLjc1IDEyLjcxOTggMjIuNzUgMTEuMDM2NkMyMi43NSA2LjM5ODczIDE5Ljc1IDIuNDI2ODYgMTUuNTI1IDAuODY0NzQ2QzE0Ljc4NzUgMC41ODYyMyAxNCAxLjE0MzI2IDE0IDEuOTA2MTVWMi4xMzYyM0MxNCAyLjU5NjM5IDE0LjMxMjUgMi45OTYgMTQuNzYyNSAzLjE2NTUzQzE3Ljk3NSA0LjQyNDkgMjAuMjUgNy40NzY0NiAyMC4yNSAxMS4wMzY2Wk05LjM2MjUgMy40MTk4Mkw5LjE1IDMuNjI1NjhMMTEuNSA1LjkwMjI1VjQuMjY3NDhDMTEuNSAzLjE4OTc1IDEwLjE1IDIuNjU2OTMgOS4zNjI1IDMuNDE5ODJaTTE3LjEyNSAxMS4wMzY2QzE3LjEyNSA4Ljg5MzI2IDE1Ljg1IDcuMDUyNjQgMTQgNi4xNTY1NFY4LjMyNDEyTDE3LjEgMTEuMzI3MkMxNy4xMTI1IDExLjIzMDQgMTcuMTI1IDExLjEzMzUgMTcuMTI1IDExLjAzNjZaIi8+Cjwvc3ZnPgo=');
   --str-video__icon--stats: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNSAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIxLjA3NDIgNi4yMDgyOEwxMi4wNzQyIDEyLjczODNMNy42OTQyMiA4LjM1ODI4TDMuMDc0MjIgMTEuNzM4M1Y5LjI1ODI4TDcuOTA0MjIgNS43MzgyOEwxMi4yODQyIDEwLjExODNMMjEuMDc0MiAzLjczODI4VjYuMjA4MjhaTTIxLjA3NDIgMTUuNzM4M0gxNi4zNzQyTDEyLjIwNDIgMTkuMDc4M0w2LjA3NDIyIDEzLjE0ODNMMy4wNzQyMiAxNS4yNzgzVjE3LjczODNMNS44NzQyMiAxNS43MzgzTDEyLjA3NDIgMjEuNzM4M0wxNy4wNzQyIDE3LjczODNIMjEuMDc0MlYxNS43MzgzWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==');
   --str-video__icon--user-plus: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxNSAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xMi40OTkgMy42MjQwMlYxLjc0OTAySDExLjI0OVYzLjYyNDAySDkuMzc0MDJWNC44NzQwMkgxMS4yNDlWNi43NDkwMkgxMi40OTlWNC44NzQwMkgxNC4zNzRWMy42MjQwMkgxMi40OTlaTTUuNjI0MDIgNS40OTkwMkM3LjAwNTI3IDUuNDk5MDIgOC4xMjQwMiA0LjM4MDI3IDguMTI0MDIgMi45OTkwMkM4LjEyNDAyIDEuNjE3NzcgNy4wMDUyNyAwLjQ5OTAyMyA1LjYyNDAyIDAuNDk5MDIzQzQuMjQyNzcgMC40OTkwMjMgMy4xMjQwMiAxLjYxNzc3IDMuMTI0MDIgMi45OTkwMkMzLjEyNDAyIDQuMzgwMjcgNC4yNDI3NyA1LjQ5OTAyIDUuNjI0MDIgNS40OTkwMlpNNS42MjQwMiAxLjc0OTAyQzYuMzExNTIgMS43NDkwMiA2Ljg3NDAyIDIuMzExNTIgNi44NzQwMiAyLjk5OTAyQzYuODc0MDIgMy42ODY1MiA2LjMxMTUyIDQuMjQ5MDIgNS42MjQwMiA0LjI0OTAyQzQuOTM2NTIgNC4yNDkwMiA0LjM3NDAyIDMuNjg2NTIgNC4zNzQwMiAyLjk5OTAyQzQuMzc0MDIgMi4zMTE1MiA0LjkzNjUyIDEuNzQ5MDIgNS42MjQwMiAxLjc0OTAyWk05LjYxNzc3IDcuMDk5MDJDOC41Njc3NyA2LjU2MTUyIDcuMjA1MjcgNi4xMjQwMiA1LjYyNDAyIDYuMTI0MDJDNC4wNDI3NyA2LjEyNDAyIDIuNjgwMjcgNi41NjE1MiAxLjYzMDI3IDcuMDk5MDJDMS4wMDUyNyA3LjQxNzc3IDAuNjI0MDIzIDguMDYxNTIgMC42MjQwMjMgOC43NjE1MlYxMC40OTlIMTAuNjI0VjguNzYxNTJDMTAuNjI0IDguMDYxNTIgMTAuMjQyOCA3LjQxNzc3IDkuNjE3NzcgNy4wOTkwMlpNOS4zNzQwMiA5LjI0OTAySDEuODc0MDJWOC43NjE1MkMxLjg3NDAyIDguNTI0MDIgMS45OTkwMiA4LjMxMTUyIDIuMTk5MDIgOC4yMTE1MkMyLjk0Mjc3IDcuODMwMjcgNC4xNDI3NyA3LjM3NDAyIDUuNjI0MDIgNy4zNzQwMkM3LjEwNTI3IDcuMzc0MDIgOC4zMDUyNyA3LjgzMDI3IDkuMDQ5MDIgOC4yMTE1MkM5LjI0OTAyIDguMzExNTIgOS4zNzQwMiA4LjUyNDAyIDkuMzc0MDIgOC43NjE1MlY5LjI0OTAyWiIgZmlsbD0iI0Y3RjdGOCIvPgo8L3N2Zz4K');
   --str-video__icon--pin: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxMyAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguMDY4MTkgMi40NTIyMlY2LjQ2MzYzQzguMDY4MTkgNy4zNjIxOCA4LjM2NTA0IDguMTk2NTYgOC44NzA0NyA4Ljg3MDQ3SDQuMDU2NzhDNC41NzgyNyA4LjE4MDUxIDQuODU5MDYgNy4zNDYxNCA0Ljg1OTA2IDYuNDYzNjNWMi40NTIyMkg4LjA2ODE5Wk0xMC40NzUgMC44NDc2NTZIMi40NTIyMkMyLjAxMDk2IDAuODQ3NjU2IDEuNjQ5OTQgMS4yMDg2OCAxLjY0OTk0IDEuNjQ5OTRDMS42NDk5NCAyLjA5MTE5IDIuMDEwOTYgMi40NTIyMiAyLjQ1MjIyIDIuNDUyMjJIMy4yNTQ1VjYuNDYzNjNDMy4yNTQ1IDcuNzk1NDEgMi4xNzk0NCA4Ljg3MDQ3IDAuODQ3NjU2IDguODcwNDdWMTAuNDc1SDUuNjM3MjhWMTYuMDkxTDYuNDM5NTYgMTYuODkzM0w3LjI0MTg0IDE2LjA5MVYxMC40NzVIMTIuMDc5NlY4Ljg3MDQ3QzEwLjc0NzggOC44NzA0NyA5LjY3Mjc1IDcuNzk1NDEgOS42NzI3NSA2LjQ2MzYzVjIuNDUyMjJIMTAuNDc1QzEwLjkxNjMgMi40NTIyMiAxMS4yNzczIDIuMDkxMTkgMTEuMjc3MyAxLjY0OTk0QzExLjI3NzMgMS4yMDg2OCAxMC45MTYzIDAuODQ3NjU2IDEwLjQ3NSAwLjg0NzY1NloiIGZpbGw9IiM3Mjc2N0UiLz4KPC9zdmc+Cg==');

From 36636a8810d5b16bd6ff0c291815ed9d19225c0b Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Thu, 20 Jul 2023 15:42:34 +0200
Subject: [PATCH 07/26] feat(styling): add AudioLevelSlider styles

---
 packages/styling/index.scss                   |  1 +
 .../AudioLevelSlider-layout.scss              | 35 +++++++++++++++++++
 .../AudioLevelSlider-theme.scss               | 19 ++++++++++
 .../styling/src/AudioLevelSlider/index.scss   |  2 ++
 4 files changed, 57 insertions(+)
 create mode 100644 packages/styling/src/AudioLevelSlider/AudioLevelSlider-layout.scss
 create mode 100644 packages/styling/src/AudioLevelSlider/AudioLevelSlider-theme.scss
 create mode 100644 packages/styling/src/AudioLevelSlider/index.scss

diff --git a/packages/styling/index.scss b/packages/styling/index.scss
index ff5ed1533d..e6f911a7c4 100644
--- a/packages/styling/index.scss
+++ b/packages/styling/index.scss
@@ -4,6 +4,7 @@
 @use 'src/global-theme-variables';
 @use 'src/utils';
 
+@import 'src/AudioLevelSlider';
 @import 'src/Avatar';
 @import 'src/Button';
 @import 'src/CallControls';
diff --git a/packages/styling/src/AudioLevelSlider/AudioLevelSlider-layout.scss b/packages/styling/src/AudioLevelSlider/AudioLevelSlider-layout.scss
new file mode 100644
index 0000000000..0e5b8f7fb5
--- /dev/null
+++ b/packages/styling/src/AudioLevelSlider/AudioLevelSlider-layout.scss
@@ -0,0 +1,35 @@
+.str-video__audio-level-slider {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 1.5rem 1rem;
+
+  .str-video__audio-level-slider__track {
+    flex: 1;
+    height: 8px;
+    overflow: hidden;
+
+    .str-video__audio-level-slider__level {
+      transform-origin: left center;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.str-video__participant-actions-context-menu {
+  .str-video__audio-level-slider {
+    padding: 0.625rem 0.75rem;
+    min-width: 200px;
+
+    .str-video__audio-level-slider__track {
+      height: 5px;
+    }
+
+    .str-video__icon {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+}
diff --git a/packages/styling/src/AudioLevelSlider/AudioLevelSlider-theme.scss b/packages/styling/src/AudioLevelSlider/AudioLevelSlider-theme.scss
new file mode 100644
index 0000000000..497cbc2e86
--- /dev/null
+++ b/packages/styling/src/AudioLevelSlider/AudioLevelSlider-theme.scss
@@ -0,0 +1,19 @@
+.str-video__audio-level-slider {
+  cursor: pointer;
+
+  &.str-video__audio-level-slider--mute {
+    .str-video__audio-level-slider__track,
+    .str-video__icon  {
+      background-color: var(--str-video__background-color7);
+    }
+  }
+
+  .str-video__audio-level-slider__track {
+    background: var(--str-video__text-color1);
+    border-radius: 4px;
+
+    .str-video__audio-level-slider__level {
+      background: var(--str-video__primary-color);
+    }
+  }
+}
diff --git a/packages/styling/src/AudioLevelSlider/index.scss b/packages/styling/src/AudioLevelSlider/index.scss
new file mode 100644
index 0000000000..d10a414703
--- /dev/null
+++ b/packages/styling/src/AudioLevelSlider/index.scss
@@ -0,0 +1,2 @@
+@import "AudioLevelSlider-layout";
+@import "AudioLevelSlider-theme";

From e0fc04a9628e3c2bc302014af728e0fe447f980e Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Thu, 20 Jul 2023 15:44:32 +0200
Subject: [PATCH 08/26] feat(react-dogfood): keep showing indicator for local
 audio input even if audio is disabled

---
 .../react/react-dogfood/components/AudioVolumeIndicator.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/sample-apps/react/react-dogfood/components/AudioVolumeIndicator.tsx b/sample-apps/react/react-dogfood/components/AudioVolumeIndicator.tsx
index 6f09e551a4..9ec3910620 100644
--- a/sample-apps/react/react-dogfood/components/AudioVolumeIndicator.tsx
+++ b/sample-apps/react/react-dogfood/components/AudioVolumeIndicator.tsx
@@ -37,8 +37,6 @@ export const AudioVolumeIndicator = () => {
     };
   }, [initialAudioEnabled, getAudioStream, selectedAudioInputDeviceId]);
 
-  if (!initialAudioEnabled) return null;
-
   return (
     <div
       style={{
@@ -49,11 +47,11 @@ export const AudioVolumeIndicator = () => {
         padding: '0 1.25rem 1rem',
       }}
     >
-      <Icon icon="mic" />
+      <Icon icon={initialAudioEnabled ? 'mic' : 'mic-off'} />
       <div
         style={{
           flex: '1',
-          background: '#fff',
+          background: initialAudioEnabled ? '#fff' : '#777',
           height: '5px',
           borderRadius: '4px',
         }}

From 8b0d0e6d2ea6894c65dc180906480300305578de Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Thu, 20 Jul 2023 15:45:36 +0200
Subject: [PATCH 09/26] feat(react-dogfood): add AudioOutputMenu with
 AudioLevelSlider to ToggleAudioOutputButton in Lobby

---
 .../react-dogfood/components/AudioOutputMenu.tsx    | 11 +++++++++++
 .../react/react-dogfood/components/Lobby.tsx        | 13 +++++++------
 2 files changed, 18 insertions(+), 6 deletions(-)
 create mode 100644 sample-apps/react/react-dogfood/components/AudioOutputMenu.tsx

diff --git a/sample-apps/react/react-dogfood/components/AudioOutputMenu.tsx b/sample-apps/react/react-dogfood/components/AudioOutputMenu.tsx
new file mode 100644
index 0000000000..f9b222649f
--- /dev/null
+++ b/sample-apps/react/react-dogfood/components/AudioOutputMenu.tsx
@@ -0,0 +1,11 @@
+import {
+  AudioOutputLevelSlider,
+  DeviceSelectorAudioOutput,
+} from '@stream-io/video-react-sdk';
+
+export const AudioOutputMenu = () => (
+  <>
+    <DeviceSelectorAudioOutput />
+    <AudioOutputLevelSlider />
+  </>
+);
diff --git a/sample-apps/react/react-dogfood/components/Lobby.tsx b/sample-apps/react/react-dogfood/components/Lobby.tsx
index b1a705f84e..aaa258df4e 100644
--- a/sample-apps/react/react-dogfood/components/Lobby.tsx
+++ b/sample-apps/react/react-dogfood/components/Lobby.tsx
@@ -1,21 +1,22 @@
 import { Box, Button, Stack, Typography } from '@mui/material';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo } from 'react';
 import { signIn, useSession } from 'next-auth/react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import {
-  checkIfAudioOutputChangeSupported,
   DeviceSelectorAudioInput,
   ToggleAudioOutputButton,
   ToggleAudioPreviewButton,
   ToggleVideoPreviewButton,
   useI18n,
+  useMediaDevices,
   VideoPreview,
 } from '@stream-io/video-react-sdk';
 import { AudioVolumeIndicator } from './AudioVolumeIndicator';
 import { DisabledVideoPreview } from './DisabledVideoPreview';
 import { LobbyHeader } from './LobbyHeader';
 import { ParticipantsPreview } from './ParticipantsPreview';
+import { AudioOutputMenu } from './AudioOutputMenu';
 
 const subtitles = [
   'Because we love seeing each other.',
@@ -33,9 +34,7 @@ type LobbyProps = {
 };
 export const Lobby = ({ onJoin, callId, enablePreview = true }: LobbyProps) => {
   const { data: session, status } = useSession();
-  const [isAudioOutputChangeSupported] = useState(() =>
-    checkIfAudioOutputChangeSupported(),
-  );
+  const { isAudioOutputChangeSupported } = useMediaDevices();
   const { t } = useI18n();
 
   const router = useRouter();
@@ -100,7 +99,9 @@ export const Lobby = ({ onJoin, callId, enablePreview = true }: LobbyProps) => {
               >
                 <ToggleAudioPreviewButton Menu={LobbyToggleAudioMenu} />
                 <ToggleVideoPreviewButton />
-                {isAudioOutputChangeSupported && <ToggleAudioOutputButton />}
+                {isAudioOutputChangeSupported && (
+                  <ToggleAudioOutputButton Menu={AudioOutputMenu} />
+                )}
               </div>
             )}
           </Box>

From bb4113597837a78166ed082b5a262dc65a6dfd8d Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Thu, 20 Jul 2023 15:46:12 +0200
Subject: [PATCH 10/26] feat(react-dogfood): add AudioOutputMenu with
 AudioLevelSlider to ToggleAudioOutputButton in MeetingUI

---
 sample-apps/react/react-dogfood/components/MeetingUI.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/sample-apps/react/react-dogfood/components/MeetingUI.tsx b/sample-apps/react/react-dogfood/components/MeetingUI.tsx
index 25bb4d1363..bb6a82cc0a 100644
--- a/sample-apps/react/react-dogfood/components/MeetingUI.tsx
+++ b/sample-apps/react/react-dogfood/components/MeetingUI.tsx
@@ -16,10 +16,12 @@ import {
   RecordCallButton,
   ScreenShareButton,
   SpeakingWhileMutedNotification,
+  ToggleAudioOutputButton,
   ToggleAudioPublishingButton,
   ToggleVideoPublishingButton,
   useCall,
   useCallCallingState,
+  useMediaDevices,
 } from '@stream-io/video-react-sdk';
 
 import { Lobby } from './Lobby';
@@ -37,6 +39,7 @@ import { useKeyboardShortcuts, useWatchChannel } from '../hooks';
 import { DEFAULT_LAYOUT, getLayoutSettings, LayoutMap } from './LayoutSelector';
 import { Stage } from './Stage';
 import { ToggleParticipantListButton } from './ToggleParticipantListButton';
+import { AudioOutputMenu } from './AudioOutputMenu';
 
 const contents = {
   'error-join': {
@@ -58,6 +61,7 @@ export const MeetingUI = ({ chatClient, enablePreview }: MeetingUIProps) => {
   const router = useRouter();
   const activeCall = useCall();
   const callState = useCallCallingState();
+  const { isAudioOutputChangeSupported } = useMediaDevices();
   const [showParticipants, setShowParticipants] = useState(false);
   const [showChat, setShowChat] = useState(false);
   const [layout, setLayout] = useState<keyof typeof LayoutMap>(() => {
@@ -192,6 +196,9 @@ export const MeetingUI = ({ chatClient, enablePreview }: MeetingUIProps) => {
                 <ToggleAudioPublishingButton />
               </SpeakingWhileMutedNotification>
               <ToggleVideoPublishingButton />
+              {isAudioOutputChangeSupported && (
+                <ToggleAudioOutputButton Menu={AudioOutputMenu} />
+              )}
               <CancelCallButton onLeave={onLeave} />
             </div>
             <div className="str-video__call-controls--group">

From c21b9a560938ea5379d3cc640b9d921a6f699985 Mon Sep 17 00:00:00 2001
From: MartinCupela <32706194+MartinCupela@users.noreply.github.com>
Date: Fri, 21 Jul 2023 10:20:42 +0200
Subject: [PATCH 11/26] fix(client): validate the default audio output level
 value before it is set

Co-authored-by: Oliver Lazoroski <oliver.lazoroski@gmail.com>
---
 packages/client/src/store/CallState.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/client/src/store/CallState.ts b/packages/client/src/store/CallState.ts
index 8c7b29434b..dc55a445f2 100644
--- a/packages/client/src/store/CallState.ts
+++ b/packages/client/src/store/CallState.ts
@@ -499,6 +499,9 @@ export class CallState {
    * @internal
    */
   setDefaultAudioOutputLevel = (level: number) => {
+    if (level < 0 || level > 1) {
+      throw new Error(`Audio output level must be in the [0-1] range`);
+    }
     return this.setCurrentValue(this.defaultAudioOutputLevelSubject, level);
   };
 

From 71288982c7a928321a2dfa3949e8aa60a0d12687 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Fri, 21 Jul 2023 13:02:31 +0200
Subject: [PATCH 12/26] refactor(client): pass optionally sessionId to
 setAudioOutputLevel instead of participant

---
 packages/client/src/Call.ts                     | 16 ++++++++++------
 .../CallControls/AudioOutputLevelSlider.tsx     | 17 ++++++++++-------
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/packages/client/src/Call.ts b/packages/client/src/Call.ts
index fbbf74a60e..e7472db397 100644
--- a/packages/client/src/Call.ts
+++ b/packages/client/src/Call.ts
@@ -1166,13 +1166,17 @@ export class Call {
   };
 
   /**
-   * Updates the audio output level for a given participant or for all the participants and the default call audio output level.
+   * Updates the audio output level for a given sessionId (participant session) or for all the participants and the default call audio output level.
    * @param level
-   * @param participant
+   * @param sessionId
    */
-  setAudioOutputLevel(level: number, participant?: StreamVideoParticipant) {
-    if (participant) {
-      this.state.updateParticipant(participant.sessionId, {
+  setAudioOutputLevel(level: number, sessionId?: string) {
+    if (level < 0 || level > 1) {
+      throw new Error(`Audio output level must be in the [0-1] range`);
+    }
+
+    if (sessionId) {
+      this.state.updateParticipant(sessionId, {
         audioOutputLevel: level,
       });
     } else if (this.sfuClient?.sessionId) {
@@ -1188,7 +1192,7 @@ export class Call {
         ),
       );
     }
-    if (!participant) {
+    if (!sessionId) {
       this.state.setDefaultAudioOutputLevel(level);
     }
   }
diff --git a/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx b/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx
index cac1f818e9..01e8183d10 100644
--- a/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx
+++ b/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx
@@ -3,7 +3,7 @@ import {
   useCall,
   useDefaultAudioOutputLevel,
 } from '@stream-io/video-react-bindings';
-import { MouseEventHandler } from 'react';
+import { MouseEventHandler, useCallback } from 'react';
 import { Icon } from '../Icon';
 import { StreamVideoParticipant } from '@stream-io/video-client';
 
@@ -19,13 +19,16 @@ export const AudioOutputLevelSlider = ({
 
   const audioLevel = participant?.audioOutputLevel ?? defaultAudioOutputLevel;
 
-  const handleClick: MouseEventHandler = (event) => {
-    const { width, x } = event.currentTarget.getBoundingClientRect();
+  const handleClick: MouseEventHandler = useCallback(
+    (event) => {
+      const { width, x } = event.currentTarget.getBoundingClientRect();
 
-    const volume = +((event.clientX - x) / width).toFixed(2);
-
-    call?.setAudioOutputLevel(volume > 0 ? volume : 0);
-  };
+      const volume = +((event.clientX - x) / width).toFixed(2);
+      const validatedVolume = volume < 0 ? 0 : volume > 1 ? 1 : volume;
+      call?.setAudioOutputLevel(validatedVolume, participant?.sessionId);
+    },
+    [call, participant],
+  );
 
   return (
     <div

From a555204d52fdd03d6386889365bca15923eba34b Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Fri, 21 Jul 2023 13:56:40 +0200
Subject: [PATCH 13/26] refactor(client): do not update default audio output
 level once in active call

---
 packages/client/src/Call.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/Call.ts b/packages/client/src/Call.ts
index e7472db397..68de3a64b3 100644
--- a/packages/client/src/Call.ts
+++ b/packages/client/src/Call.ts
@@ -1166,7 +1166,9 @@ export class Call {
   };
 
   /**
-   * Updates the audio output level for a given sessionId (participant session) or for all the participants and the default call audio output level.
+   * Updates the audio output level for a given sessionId (participant session)
+   * or for all the participants in an active call
+   * of the default call audio output level outside the active call scenarion (e.g. lobby).
    * @param level
    * @param sessionId
    */
@@ -1191,8 +1193,7 @@ export class Call {
           {},
         ),
       );
-    }
-    if (!sessionId) {
+    } else {
       this.state.setDefaultAudioOutputLevel(level);
     }
   }

From 4b581c8dc655ef97c4046546fe9eaf9cf4db89e4 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Fri, 21 Jul 2023 13:56:59 +0200
Subject: [PATCH 14/26] refactor(react-sdk): use local participants audio
 output level as a master level in active call

---
 .../components/CallControls/AudioOutputLevelSlider.tsx    | 7 ++++++-
 .../core/components/CallLayout/PaginatedGridLayout.tsx    | 4 +++-
 .../core/components/ParticipantView/ParticipantView.tsx   | 8 ++++++--
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx b/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx
index 01e8183d10..9cd92c2741 100644
--- a/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx
+++ b/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx
@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import {
   useCall,
   useDefaultAudioOutputLevel,
+  useLocalParticipant,
 } from '@stream-io/video-react-bindings';
 import { MouseEventHandler, useCallback } from 'react';
 import { Icon } from '../Icon';
@@ -16,8 +17,12 @@ export const AudioOutputLevelSlider = ({
 }: AudioLevelControlProps) => {
   const call = useCall();
   const defaultAudioOutputLevel = useDefaultAudioOutputLevel();
+  const localParticipant = useLocalParticipant();
 
-  const audioLevel = participant?.audioOutputLevel ?? defaultAudioOutputLevel;
+  const audioLevel =
+    participant?.audioOutputLevel ??
+    localParticipant?.audioOutputLevel ??
+    defaultAudioOutputLevel;
 
   const handleClick: MouseEventHandler = useCallback(
     (event) => {
diff --git a/packages/react-sdk/src/core/components/CallLayout/PaginatedGridLayout.tsx b/packages/react-sdk/src/core/components/CallLayout/PaginatedGridLayout.tsx
index b60f8b2d78..2cd129ed29 100644
--- a/packages/react-sdk/src/core/components/CallLayout/PaginatedGridLayout.tsx
+++ b/packages/react-sdk/src/core/components/CallLayout/PaginatedGridLayout.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import {
   useCall,
+  useDefaultAudioOutputLevel,
   useParticipants,
   useRemoteParticipants,
 } from '@stream-io/video-react-bindings';
@@ -87,6 +88,7 @@ export const PaginatedGridLayout = ({
   const participants = useParticipants();
   // used to render audio elements
   const remoteParticipants = useRemoteParticipants();
+  const defaultAudioOutputLevel = useDefaultAudioOutputLevel();
 
   // only used to render video elements
   const participantGroups = useMemo(
@@ -118,7 +120,7 @@ export const PaginatedGridLayout = ({
           muted={false}
           key={participant.sessionId}
           audioStream={participant.audioStream}
-          volume={participant?.audioOutputLevel}
+          volume={participant?.audioOutputLevel ?? defaultAudioOutputLevel}
         />
       ))}
       <div className="str-video__paginated-grid-layout__wrapper">
diff --git a/packages/react-sdk/src/core/components/ParticipantView/ParticipantView.tsx b/packages/react-sdk/src/core/components/ParticipantView/ParticipantView.tsx
index 563bb2a325..9866972a98 100644
--- a/packages/react-sdk/src/core/components/ParticipantView/ParticipantView.tsx
+++ b/packages/react-sdk/src/core/components/ParticipantView/ParticipantView.tsx
@@ -13,13 +13,16 @@ import {
   StreamVideoLocalParticipant,
   StreamVideoParticipant,
 } from '@stream-io/video-client';
+import {
+  useDefaultAudioOutputLevel,
+  useLocalParticipant,
+} from '@stream-io/video-react-bindings';
 
 import { Audio } from '../Audio';
 import { Video, VideoProps } from '../Video';
 import { useTrackElementVisibility } from '../../hooks';
 import { DefaultParticipantViewUI } from './DefaultParticipantViewUI';
 import { applyElementToRef, isComponentType } from '../../../utilities';
-import { useLocalParticipant } from '@stream-io/video-react-bindings';
 
 export type ParticipantViewContextValue = Required<
   Pick<ParticipantViewProps, 'participant' | 'videoMode'>
@@ -94,6 +97,7 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
       sessionId,
     } = participant;
     const localParticipant = useLocalParticipant();
+    const defaultAudioOutputLevel = useDefaultAudioOutputLevel();
 
     const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
     const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
@@ -165,7 +169,7 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
             muted={isLocalParticipant || muteAudio}
             sinkId={localParticipant?.audioOutputDeviceId}
             audioStream={audioStream}
-            volume={participant?.audioOutputLevel}
+            volume={participant?.audioOutputLevel ?? defaultAudioOutputLevel}
           />
           <Video
             VideoPlaceholder={VideoPlaceholder}

From e78b263fed3755c36e8c73bffd236b77732a9d8c Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Fri, 21 Jul 2023 15:23:29 +0200
Subject: [PATCH 15/26] refactor(client): do not update all participants audio
 output level in active call

---
 packages/client/src/Call.ts               | 12 ------------
 packages/client/src/events/participant.ts | 11 +----------
 2 files changed, 1 insertion(+), 22 deletions(-)

diff --git a/packages/client/src/Call.ts b/packages/client/src/Call.ts
index ea4ca962cc..bef44312d5 100644
--- a/packages/client/src/Call.ts
+++ b/packages/client/src/Call.ts
@@ -1183,18 +1183,6 @@ export class Call {
       this.state.updateParticipant(sessionId, {
         audioOutputLevel: level,
       });
-    } else if (this.sfuClient?.sessionId) {
-      this.state.updateParticipants(
-        this.state.participants.reduce<StreamVideoParticipantPatches>(
-          (acc, p) => {
-            acc[p.sessionId] = {
-              audioOutputLevel: level,
-            };
-            return acc;
-          },
-          {},
-        ),
-      );
     } else {
       this.state.setDefaultAudioOutputLevel(level);
     }
diff --git a/packages/client/src/events/participant.ts b/packages/client/src/events/participant.ts
index d1f3964401..f65a4e6aba 100644
--- a/packages/client/src/events/participant.ts
+++ b/packages/client/src/events/participant.ts
@@ -23,7 +23,6 @@ export const watchParticipantJoined = (state: CallState) => {
       Object.assign<StreamVideoParticipant, Partial<StreamVideoParticipant>>(
         participant,
         {
-          audioOutputLevel: state.defaultAudioOutputLevel,
           viewportVisibilityState: VisibilityState.UNKNOWN,
         },
       ),
@@ -62,15 +61,7 @@ export const watchTrackPublished = (state: CallState) => {
     // events, and instead, it would only provide the participant's information
     // once they start publishing a track.
     if (participant) {
-      state.updateOrAddParticipant(
-        sessionId,
-        Object.assign<StreamVideoParticipant, Partial<StreamVideoParticipant>>(
-          participant,
-          {
-            audioOutputLevel: state.defaultAudioOutputLevel,
-          },
-        ),
-      );
+      state.updateOrAddParticipant(sessionId, participant);
     } else {
       state.updateParticipant(sessionId, (p) => ({
         publishedTracks: [...p.publishedTracks, type].filter(unique),

From 875608dfde700b318bdd5cf968f4f2357091d115 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Fri, 21 Jul 2023 15:24:05 +0200
Subject: [PATCH 16/26] refactor(react-sdk): do not use local participant's
 audio output level as master

---
 .../src/components/CallControls/AudioOutputLevelSlider.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx b/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx
index 9cd92c2741..01e8183d10 100644
--- a/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx
+++ b/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx
@@ -2,7 +2,6 @@ import clsx from 'clsx';
 import {
   useCall,
   useDefaultAudioOutputLevel,
-  useLocalParticipant,
 } from '@stream-io/video-react-bindings';
 import { MouseEventHandler, useCallback } from 'react';
 import { Icon } from '../Icon';
@@ -17,12 +16,8 @@ export const AudioOutputLevelSlider = ({
 }: AudioLevelControlProps) => {
   const call = useCall();
   const defaultAudioOutputLevel = useDefaultAudioOutputLevel();
-  const localParticipant = useLocalParticipant();
 
-  const audioLevel =
-    participant?.audioOutputLevel ??
-    localParticipant?.audioOutputLevel ??
-    defaultAudioOutputLevel;
+  const audioLevel = participant?.audioOutputLevel ?? defaultAudioOutputLevel;
 
   const handleClick: MouseEventHandler = useCallback(
     (event) => {

From b904fec5a3482a9bdc2b09dd805416df14c183f6 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Fri, 21 Jul 2023 15:41:07 +0200
Subject: [PATCH 17/26] refactor: rename default audio output level to master
 audio output level

---
 packages/client/src/Call.ts                    |  2 +-
 packages/client/src/store/CallState.ts         | 18 +++++++++---------
 packages/client/src/types.ts                   |  2 +-
 packages/react-bindings/src/hooks/call.ts      |  6 +++---
 .../CallControls/AudioOutputLevelSlider.tsx    |  6 +++---
 .../CallControls/ToggleAudioOutputButton.tsx   |  6 +++---
 .../CallLayout/PaginatedGridLayout.tsx         |  6 +++---
 .../ParticipantView/ParticipantView.tsx        |  6 +++---
 8 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/packages/client/src/Call.ts b/packages/client/src/Call.ts
index bef44312d5..ec2963cfe1 100644
--- a/packages/client/src/Call.ts
+++ b/packages/client/src/Call.ts
@@ -1184,7 +1184,7 @@ export class Call {
         audioOutputLevel: level,
       });
     } else {
-      this.state.setDefaultAudioOutputLevel(level);
+      this.state.setMasterAudioOutputLevel(level);
     }
   }
 
diff --git a/packages/client/src/store/CallState.ts b/packages/client/src/store/CallState.ts
index dc55a445f2..c661ed9583 100644
--- a/packages/client/src/store/CallState.ts
+++ b/packages/client/src/store/CallState.ts
@@ -83,9 +83,9 @@ export enum CallingState {
  */
 export class CallState {
   /**
-   * The speaker volume level that is set, if `StreamVideoParticipant.defaultAudioOutputLevelSubject` is undefined.
+   * The speaker volume level that is set, if `StreamVideoParticipant.audioOutputLevel` is undefined.
    */
-  private defaultAudioOutputLevelSubject = new BehaviorSubject<number>(1);
+  private masterAudioOutputLevelSubject = new BehaviorSubject<number>(1);
   /**
    * The raw call metadata object, as defined on the backend.
    *
@@ -173,7 +173,7 @@ export class CallState {
    * Emits the default audio output level value in form of decimal number in range of 0-1.
    * The default value is assigned to each newly joined StreamVideoParticipant's audioOutputLevel property.
    */
-  defaultAudioOutputLevel$: Observable<number>;
+  masterAudioOutputLevel$: Observable<number>;
 
   // Derived state
   /**
@@ -312,8 +312,8 @@ export class CallState {
       distinctUntilChanged(),
     );
 
-    this.defaultAudioOutputLevel$ =
-      this.defaultAudioOutputLevelSubject.asObservable();
+    this.masterAudioOutputLevel$ =
+      this.masterAudioOutputLevelSubject.asObservable();
     this.startedAt$ = this.startedAtSubject.asObservable();
     this.participantCount$ = this.participantCountSubject.asObservable();
     this.anonymousParticipantCount$ =
@@ -489,8 +489,8 @@ export class CallState {
    *
    * @internal
    */
-  get defaultAudioOutputLevel() {
-    return this.getCurrentValue(this.defaultAudioOutputLevel$);
+  get masterAudioOutputLevel() {
+    return this.getCurrentValue(this.masterAudioOutputLevel$);
   }
 
   /**
@@ -498,11 +498,11 @@ export class CallState {
    *
    * @internal
    */
-  setDefaultAudioOutputLevel = (level: number) => {
+  setMasterAudioOutputLevel = (level: number) => {
     if (level < 0 || level > 1) {
       throw new Error(`Audio output level must be in the [0-1] range`);
     }
-    return this.setCurrentValue(this.defaultAudioOutputLevelSubject, level);
+    return this.setCurrentValue(this.masterAudioOutputLevelSubject, level);
   };
 
   /**
diff --git a/packages/client/src/types.ts b/packages/client/src/types.ts
index d3d9dbbfd0..8d55cdb7d0 100644
--- a/packages/client/src/types.ts
+++ b/packages/client/src/types.ts
@@ -35,7 +35,7 @@ export enum DebounceType {
 export interface StreamVideoParticipant extends Participant {
   /**
    * The speaker volume in range 0 - 1 set by the participant.
-   * If not set, then CallState.defaultAudioOutputLevel should be reflected.
+   * If not set, then CallState.masterAudioOutputLevel should be reflected.
    */
   audioOutputLevel?: number;
 
diff --git a/packages/react-bindings/src/hooks/call.ts b/packages/react-bindings/src/hooks/call.ts
index 9d7fa6f705..c4a7bf92e1 100644
--- a/packages/react-bindings/src/hooks/call.ts
+++ b/packages/react-bindings/src/hooks/call.ts
@@ -138,7 +138,7 @@ export const useCallStartedAt = () => {
  *
  * @category Call State
  */
-export const useDefaultAudioOutputLevel = () => {
-  const { defaultAudioOutputLevel$ } = useCallState();
-  return useObservableValue(defaultAudioOutputLevel$);
+export const useMasterAudioOutputLevel = () => {
+  const { masterAudioOutputLevel$ } = useCallState();
+  return useObservableValue(masterAudioOutputLevel$);
 };
diff --git a/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx b/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx
index 01e8183d10..261d002aef 100644
--- a/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx
+++ b/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import {
   useCall,
-  useDefaultAudioOutputLevel,
+  useMasterAudioOutputLevel,
 } from '@stream-io/video-react-bindings';
 import { MouseEventHandler, useCallback } from 'react';
 import { Icon } from '../Icon';
@@ -15,9 +15,9 @@ export const AudioOutputLevelSlider = ({
   participant,
 }: AudioLevelControlProps) => {
   const call = useCall();
-  const defaultAudioOutputLevel = useDefaultAudioOutputLevel();
+  const masterAudioOutputLevel = useMasterAudioOutputLevel();
 
-  const audioLevel = participant?.audioOutputLevel ?? defaultAudioOutputLevel;
+  const audioLevel = participant?.audioOutputLevel ?? masterAudioOutputLevel;
 
   const handleClick: MouseEventHandler = useCallback(
     (event) => {
diff --git a/packages/react-sdk/src/components/CallControls/ToggleAudioOutputButton.tsx b/packages/react-sdk/src/components/CallControls/ToggleAudioOutputButton.tsx
index 37d5e20d1f..8b5548cab8 100644
--- a/packages/react-sdk/src/components/CallControls/ToggleAudioOutputButton.tsx
+++ b/packages/react-sdk/src/components/CallControls/ToggleAudioOutputButton.tsx
@@ -2,7 +2,7 @@ import { CompositeButton, IconButton } from '../Button';
 import { DeviceSelectorAudioOutput } from '../DeviceSettings';
 import {
   useCall,
-  useDefaultAudioOutputLevel,
+  useMasterAudioOutputLevel,
   useI18n,
   useLocalParticipant,
 } from '@stream-io/video-react-bindings';
@@ -17,12 +17,12 @@ export const ToggleAudioOutputButton = (
   props: ToggleAudioOutputButtonProps,
 ) => {
   const call = useCall();
-  const defaultAudioOutputLevel = useDefaultAudioOutputLevel();
+  const masterAudioOutputLevel = useMasterAudioOutputLevel();
   const localParticipant = useLocalParticipant();
   const { t } = useI18n();
   const { caption = t('Speakers'), Menu = DeviceSelectorAudioOutput } = props;
   const enabled =
-    (localParticipant?.audioOutputLevel ?? defaultAudioOutputLevel) > 0;
+    (localParticipant?.audioOutputLevel ?? masterAudioOutputLevel) > 0;
 
   return (
     <CompositeButton Menu={Menu} active={!enabled} caption={caption}>
diff --git a/packages/react-sdk/src/core/components/CallLayout/PaginatedGridLayout.tsx b/packages/react-sdk/src/core/components/CallLayout/PaginatedGridLayout.tsx
index 1d20c68ef8..45012f0dbc 100644
--- a/packages/react-sdk/src/core/components/CallLayout/PaginatedGridLayout.tsx
+++ b/packages/react-sdk/src/core/components/CallLayout/PaginatedGridLayout.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import {
   useCall,
-  useDefaultAudioOutputLevel,
+  useMasterAudioOutputLevel,
   useLocalParticipant,
   useParticipants,
   useRemoteParticipants,
@@ -90,7 +90,7 @@ export const PaginatedGridLayout = ({
   // used to render audio elements
   const remoteParticipants = useRemoteParticipants();
   const localParticipant = useLocalParticipant();
-  const defaultAudioOutputLevel = useDefaultAudioOutputLevel();
+  const masterAudioOutputLevel = useMasterAudioOutputLevel();
 
   // only used to render video elements
   const participantGroups = useMemo(
@@ -123,7 +123,7 @@ export const PaginatedGridLayout = ({
           sinkId={localParticipant?.audioOutputDeviceId}
           key={participant.sessionId}
           audioStream={participant.audioStream}
-          volume={participant?.audioOutputLevel ?? defaultAudioOutputLevel}
+          volume={participant?.audioOutputLevel ?? masterAudioOutputLevel}
         />
       ))}
       <div className="str-video__paginated-grid-layout__wrapper">
diff --git a/packages/react-sdk/src/core/components/ParticipantView/ParticipantView.tsx b/packages/react-sdk/src/core/components/ParticipantView/ParticipantView.tsx
index 9866972a98..7a8c7d4c2b 100644
--- a/packages/react-sdk/src/core/components/ParticipantView/ParticipantView.tsx
+++ b/packages/react-sdk/src/core/components/ParticipantView/ParticipantView.tsx
@@ -14,7 +14,7 @@ import {
   StreamVideoParticipant,
 } from '@stream-io/video-client';
 import {
-  useDefaultAudioOutputLevel,
+  useMasterAudioOutputLevel,
   useLocalParticipant,
 } from '@stream-io/video-react-bindings';
 
@@ -97,7 +97,7 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
       sessionId,
     } = participant;
     const localParticipant = useLocalParticipant();
-    const defaultAudioOutputLevel = useDefaultAudioOutputLevel();
+    const masterAudioOutputLevel = useMasterAudioOutputLevel();
 
     const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
     const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
@@ -169,7 +169,7 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
             muted={isLocalParticipant || muteAudio}
             sinkId={localParticipant?.audioOutputDeviceId}
             audioStream={audioStream}
-            volume={participant?.audioOutputLevel ?? defaultAudioOutputLevel}
+            volume={participant?.audioOutputLevel ?? masterAudioOutputLevel}
           />
           <Video
             VideoPlaceholder={VideoPlaceholder}

From 49cc7d3c185b31fa1cabd6ce676d4d609a63b84e Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Fri, 21 Jul 2023 15:48:02 +0200
Subject: [PATCH 18/26] feat(react-sdk): add toggle functionality to
 AudioOutputLevelSlider

---
 .../CallControls/AudioOutputLevelSlider.tsx           | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx b/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx
index 261d002aef..f3cbb7186c 100644
--- a/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx
+++ b/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx
@@ -36,7 +36,16 @@ export const AudioOutputLevelSlider = ({
         'str-video__audio-level-slider--mute': !audioLevel,
       })}
     >
-      <Icon icon={audioLevel ? 'speaker' : 'speaker-off'} />
+      <span
+        onClick={() =>
+          call?.setAudioOutputLevel(
+            !audioLevel ? masterAudioOutputLevel : 0,
+            participant?.sessionId,
+          )
+        }
+      >
+        <Icon icon={audioLevel ? 'speaker' : 'speaker-off'} />
+      </span>
       <div
         className="str-video__audio-level-slider__track"
         onClick={handleClick}

From 2fdb4bb8d0c2b0dd46b5958a8107385d68f0cb65 Mon Sep 17 00:00:00 2001
From: MartinCupela <32706194+MartinCupela@users.noreply.github.com>
Date: Fri, 21 Jul 2023 17:29:37 +0200
Subject: [PATCH 19/26] docs: apply suggestions to code documentation

Co-authored-by: Oliver Lazoroski <oliver.lazoroski@gmail.com>
---
 packages/client/src/Call.ts               | 12 ++++++------
 packages/client/src/store/CallState.ts    |  1 -
 packages/react-bindings/src/hooks/call.ts |  3 +--
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/client/src/Call.ts b/packages/client/src/Call.ts
index ec2963cfe1..748c43b3d2 100644
--- a/packages/client/src/Call.ts
+++ b/packages/client/src/Call.ts
@@ -1168,13 +1168,13 @@ export class Call {
   };
 
   /**
-   * Updates the audio output level for a given sessionId (participant session)
-   * or for all the participants in an active call
-   * of the default call audio output level outside the active call scenarion (e.g. lobby).
-   * @param level
-   * @param sessionId
+   * Updates the audio output level for a given sessionId (participant session) or,
+   * the master volume if `sessionId` is omitted.
+   *
+   * @param level the audio level [0 - 1].
+   * @param sessionId an optional session id.
    */
-  setAudioOutputLevel(level: number, sessionId?: string) {
+  setAudioOutputLevel = (level: number, sessionId?: string) => {
     if (level < 0 || level > 1) {
       throw new Error(`Audio output level must be in the [0-1] range`);
     }
diff --git a/packages/client/src/store/CallState.ts b/packages/client/src/store/CallState.ts
index c661ed9583..9617826c15 100644
--- a/packages/client/src/store/CallState.ts
+++ b/packages/client/src/store/CallState.ts
@@ -171,7 +171,6 @@ export class CallState {
 
   /**
    * Emits the default audio output level value in form of decimal number in range of 0-1.
-   * The default value is assigned to each newly joined StreamVideoParticipant's audioOutputLevel property.
    */
   masterAudioOutputLevel$: Observable<number>;
 
diff --git a/packages/react-bindings/src/hooks/call.ts b/packages/react-bindings/src/hooks/call.ts
index c4a7bf92e1..467b705bd5 100644
--- a/packages/react-bindings/src/hooks/call.ts
+++ b/packages/react-bindings/src/hooks/call.ts
@@ -133,8 +133,7 @@ export const useCallStartedAt = () => {
 };
 
 /**
- * Utility hook providing the default audio output level in a given call
- * Should be used to determine audio output level if the call is not joined yet.
+ * Utility hook providing the default audio output level in a given call.
  *
  * @category Call State
  */

From e1fa9043b86e0450f7d0a4dd8bbaab6f688a91bf Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Fri, 21 Jul 2023 17:31:33 +0200
Subject: [PATCH 20/26] fix(react-sdk): adjust only master audio output with
 ToggleAudioOutputButton

---
 .../src/components/CallControls/ToggleAudioOutputButton.tsx  | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/react-sdk/src/components/CallControls/ToggleAudioOutputButton.tsx b/packages/react-sdk/src/components/CallControls/ToggleAudioOutputButton.tsx
index 8b5548cab8..99c966036e 100644
--- a/packages/react-sdk/src/components/CallControls/ToggleAudioOutputButton.tsx
+++ b/packages/react-sdk/src/components/CallControls/ToggleAudioOutputButton.tsx
@@ -4,7 +4,6 @@ import {
   useCall,
   useMasterAudioOutputLevel,
   useI18n,
-  useLocalParticipant,
 } from '@stream-io/video-react-bindings';
 import { ComponentType } from 'react';
 
@@ -18,11 +17,9 @@ export const ToggleAudioOutputButton = (
 ) => {
   const call = useCall();
   const masterAudioOutputLevel = useMasterAudioOutputLevel();
-  const localParticipant = useLocalParticipant();
   const { t } = useI18n();
   const { caption = t('Speakers'), Menu = DeviceSelectorAudioOutput } = props;
-  const enabled =
-    (localParticipant?.audioOutputLevel ?? masterAudioOutputLevel) > 0;
+  const enabled = masterAudioOutputLevel > 0;
 
   return (
     <CompositeButton Menu={Menu} active={!enabled} caption={caption}>

From 02ef9e87aba7946fa33a3f4fd3f776870e7d6d38 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Fri, 21 Jul 2023 17:34:03 +0200
Subject: [PATCH 21/26] docs(react-sdk): document the control of audio output
 level

---
 .../03-call-and-participant-state.mdx         | 97 +++++++++++--------
 .../02-guides/04-camera-and-microphone.mdx    | 30 ++++++
 .../03-ui-components/call/call-controls.mdx   | 30 +++++-
 .../CallControls/AudioOutputLevelSlider.tsx   |  3 +
 .../CallControls/ToggleAudioButton.tsx        | 12 +++
 .../CallControls/ToggleAudioOutputButton.tsx  |  6 ++
 .../CallControls/ToggleVideoButton.tsx        | 12 +++
 7 files changed, 143 insertions(+), 47 deletions(-)

diff --git a/packages/react-sdk/docusaurus/docs/React/02-guides/03-call-and-participant-state.mdx b/packages/react-sdk/docusaurus/docs/React/02-guides/03-call-and-participant-state.mdx
index 63af38f2f8..da6089ff8e 100644
--- a/packages/react-sdk/docusaurus/docs/React/02-guides/03-call-and-participant-state.mdx
+++ b/packages/react-sdk/docusaurus/docs/React/02-guides/03-call-and-participant-state.mdx
@@ -42,48 +42,52 @@ The `StreamCall` component uses the `StreamCallProvider` under the hood.
 Here are all the call-related state hooks:
 
 | Name                              | Description                                                                                                   |
-| --------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+|-----------------------------------|---------------------------------------------------------------------------------------------------------------|
 | `useCall`                         | The `Call` instance that is registered with `StreamCall`. You need the `Call` instance to initiate API calls. |
-| `useIsCallRecordingInProgress`    | It's' `true` if the call is being recorded.                                                                   |
-| `useIsCallBroadcastingInProgress` | It's `true` if the call is being broadcasted.                                                                 |
-| `useIsCallLive`                   | It's `true` if the call is currently live.                                                                    |
-| `useCallMembers`                  | The list of call members                                                                                      |
 | `useCallCallingState`             | Provides information about the call state. For example, `RINGING`, `JOINED` or `RECONNECTING`.                |
-| `useCallStartedAt`                | The actual start time of the current call session.                                                            |
-| `useCallStatsReport`              | When stats gathering is enabled, this observable will emit a new value at a regular (configurable) interval.  |
+| `useCallMembers`                  | The list of call members                                                                                      |
 | `useCallMetadata`                 | The `CallResponse`, see below for more information.                                                           |
 | `useCallRecordings`               | The latest list of recordings performed during the call.                                                      |
-| `useHasOngoingScreenShare`        | It will return `true` if at least one participant is sharing their screen.                                    |
+| `useCallStartedAt`                | The actual start time of the current call session.                                                            |
+| `useCallStatsReport`              | When stats gathering is enabled, this observable will emit a new value at a regular (configurable) interval.  |
 | `useDominantSpeaker`              | The participant that is the current dominant speaker of the call.                                             |
-| `useOwnCapabilities`              | The capabilities of the local participant.                                                                    |
+| `useHasOngoingScreenShare`        | It will return `true` if at least one participant is sharing their screen.                                    |
 | `useHasPermissions`               | Returns `true` if the local participant has all the given permissions.                                        |
+| `useIsCallRecordingInProgress`    | It's' `true` if the call is being recorded.                                                                   |
+| `useIsCallBroadcastingInProgress` | It's `true` if the call is being broadcasted.                                                                 |
+| `useIsCallLive`                   | It's `true` if the call is currently live.                                                                    |
+| `useMasterAudioOutputLevel`       | The default audio output level applied to all participants (decimal number in the range of 0 - 1).            |
+| `useOwnCapabilities`              | The capabilities of the local participant.                                                                    |
 
 The `CallResponse` object contains the following information:
 
-| Name               | Description                                             |
-| ------------------ | ------------------------------------------------------- |
-| `backstage`        | It's `true` if the call is in backstage mode.           |
-| `blocked_user_ids` | The users who are blocked from this call.               |
-| `created_at`       | The time the call was created.                          |
-| `created_by`       | The creator of the call.                                |
-| `custom`           | Custom data attached to the call.                       |
-| `egress`           | Broadcasting related information.                       |
-| `ended_at`         | When the call was ended.                                |
-| `ingress`          | RTMP publishing related information.                    |
-| `recording`        | It's `true` if the call is being recorded.              |
-| `session`          | Information related to the current session of the call. |
-| `settings`         | The settings for this call.                             |
-| `starts_at`        | The scheduled start time of the call.                   |
-| `team`             | Team that the call is restricted to.                    |
-| `type`             | The type of the call.                                   |
-| `updated_at`       | When the call was updated.                              |
+| Name                 | Description                                             |
+|----------------------|---------------------------------------------------------|
+| `backstage`          | It's `true` if the call is in backstage mode.           |
+| `blocked_user_ids`   | The users who are blocked from this call.               |
+| `cid`                | The unique identifier for a call (`<type>:<id>`).       |
+| `created_at`         | The time the call was created.                          |
+| `created_by`         | The creator of the call.                                |
+| `current_session_id` | The unique identifier of the current call session.      |
+| `custom`             | Custom data attached to the call.                       |
+| `egress`             | Broadcasting related information.                       |
+| `ended_at`           | When the call was ended.                                |
+| `id`                 | The unique call identifier within the given call type.  |
+| `ingress`            | RTMP publishing related information.                    |
+| `recording`          | It's `true` if the call is being recorded.              |
+| `session`            | Information related to the current session of the call. |
+| `settings`           | The settings for this call.                             |
+| `starts_at`          | The scheduled start time of the call.                   |
+| `team`               | Team that the call is restricted to.                    |
+| `type`               | The type of the call.                                   |
+| `updated_at`         | When the call was updated.                              |
 
 ## Participant state
 
 If you want to display information about the joined participants of the call you can use these hooks:
 
 | Name                           | Description                                                                                                                                                            |
-| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|--------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `useLocalParticipant`          | The local participant is the logged-in user.                                                                                                                           |
 | `useRemoteParticipants`        | All participants except the local participant.                                                                                                                         |
 | `useParticipants`              | All participants, including local and remote participants.                                                                                                             |
@@ -116,21 +120,29 @@ const CallUI = () => {
 
 The `StreamVideoParticipant` object contains the following information:
 
-| Name                 | Description                                                                 |
-| -------------------- | --------------------------------------------------------------------------- |
-| `user`               | The user object for this participant.                                       |
-| `publishedTracks`    | The track types the participant is currently publishing                     |
-| `joinedAt`           | The time the participant joined the call.                                   |
-| `connectionQuality`  | The participant's connection quality.                                       |
-| `isSpeaking`         | It's `true` if the participant is currently speaking.                       |
-| `isDominantSpeaker`  | It's `true` if the participant is the current dominant speaker in the call. |
-| `audioLevel`         | The audio level of the participant.                                         |
-| `audioStream`        | The published audio `MediaStream`.                                          |
-| `videoStream`        | The published video `MediaStream`.                                          |
-| `screenShareStream`  | The published screen share `MediaStream`.                                   |
-| `isLocalParticipant` | It's `true` if the participant is the local participant.                    |
-| `pinnedAt`           | The time the participant was pinned.                                        |
-| `reaction`           | The last reaction this user has sent to this call.                          |
+| Name                      | Description                                                                                 |
+|---------------------------|---------------------------------------------------------------------------------------------|
+| `audioLevel`              | The audio level of the participant.                                                         |
+| `audioOutputLevel`        | The user object for this participant.                                                       |
+| `audioStream`             | The published audio `MediaStream`.                                                          |
+| `connectionQuality`       | The participant's connection quality.                                                       |
+| `image`                   | It's `true` if the participant is the current dominant speaker in the call.                 |
+| `isDominantSpeaker`       | It's `true` if the participant is the current dominant speaker in the call.                 |
+| `isLocalParticipant`      | It's `true` if the participant is the local participant.                                    |
+| `isSpeaking`              | It's `true` if the participant is currently speaking.                                       |
+| `joinedAt`                | The time the participant joined the call.                                                   |
+| `name`                    | The participant name.                                                                       |
+| `pinnedAt`                | The time the participant was pinned.                                                        |
+| `publishedTracks`         | The track types the participant is currently publishing                                     |
+| `reaction`                | The last reaction this user has sent to this call.                                          |
+| `roles`                   | The array of role names assigned to the participant in the active call.                     |
+| `screenShareStream`       | The published screen share `MediaStream`.                                                   |
+| `screenShareDimension`    | The preferred screen share dimensions for this participant.                                 |
+| `sessionId`               | Participant's session ID.                                                                   |
+| `userId`                  | Participant's user ID.                                                                      |
+| `videoStream`             | The published video `MediaStream`.                                                          |
+| `videoDimension`          | The preferred video dimensions for this participant.                                        |
+| `viewportVisibilityState` | The visibility state of the participant's video element within the pre-configured viewport. |
 
 The `StreamVideoLocalParticipant` has these additional properties:
 
@@ -182,7 +194,6 @@ The `UserResponse` contains the following properties:
 | `created_at` | The time the user was created.                        |
 | `custom`     | Custom user data.                                     |
 | `deleted_at` | The time the user was deleted.                        |
-| `devices`    | The registered push notification devices of the user. |
 | `id`         | The id of the user.                                   |
 | `image`      | The profile image of the user.                        |
 | `name`       | The name of the user.                                 |
diff --git a/packages/react-sdk/docusaurus/docs/React/02-guides/04-camera-and-microphone.mdx b/packages/react-sdk/docusaurus/docs/React/02-guides/04-camera-and-microphone.mdx
index e2a1e09e4c..d59b979d0b 100644
--- a/packages/react-sdk/docusaurus/docs/React/02-guides/04-camera-and-microphone.mdx
+++ b/packages/react-sdk/docusaurus/docs/React/02-guides/04-camera-and-microphone.mdx
@@ -181,6 +181,36 @@ console.log('Audio output devices: ', audioOutputDevices);
 switchDevice('audiooutput', '<device id>');
 ```
 
+### Speaker device volume
+
+The speaker device volume can be set on the master level for all the participants as well as for a selected participant. The master audio output level is stored in `Call` state and can be retrieved using the `useMasterAudioOutputLevel` hook. The level for a specific participant should be retrieved per `StreamVideoParticipant.audioOutputLevel`.
+
+The volume can then be set to SDK's `Audio` component:
+
+```tsx
+const CustomComponent = ({participant}: {participant: StreamVideoParticipant}) => {
+  const masterAudioOutputLevel = useMasterAudioOutputLevel();
+  const localParticipant = useLocalParticipant();
+
+  return (
+    <Audio
+          muted={participant.isLocalParticipant}
+          sinkId={localParticipant?.audioOutputDeviceId}
+          key={participant.sessionId}
+          audioStream={participant.audioStream}
+          volume={participant?.audioOutputLevel ?? masterAudioOutputLevel}
+        />
+    );
+}
+```
+
+There are two components bundled with the SDK, that allow us to control the audio output level:
+
+1. [`ToggleAudioOutputButton`](../../ui-components/call/call-controls#toggleaudiooutputbutton) - toggles the value between 0 and 1
+2. [`AudioOutputLevelSlider`](../../ui-components/call/call-controls#audiooutputlevelslider) - sets the decimal value in range 0 - 1
+
+
+
 ### Client-side settings
 
 It's possible to preselect the speaker device. A potential use-case would be to apply the user's previous choices loaded from `localStorage`.
diff --git a/packages/react-sdk/docusaurus/docs/React/03-ui-components/call/call-controls.mdx b/packages/react-sdk/docusaurus/docs/React/03-ui-components/call/call-controls.mdx
index 065f3e0639..9f4ab12736 100644
--- a/packages/react-sdk/docusaurus/docs/React/03-ui-components/call/call-controls.mdx
+++ b/packages/react-sdk/docusaurus/docs/React/03-ui-components/call/call-controls.mdx
@@ -59,6 +59,20 @@ This component is used in the [ringing call component](../ringing-call) to accep
 | `onClick`  | Event handler to override the default click behavior   | `MouseEventHandler<HTMLButtonElement>` \| `undefined` |
 | `onAccept` | Custom event handler to call after the call was joined | `() => void` \| `undefined`                           |
 
+### AudioOutputLevelSlider
+
+The component allows to set the audio output level. This can be
+
+- the master level applied to control the sound volume for all audio streams arriving from remote participants (if no `participant` is specified in props)
+- the audio level for a specific participant (to lower the volume of a participant that speaks too loud or increase for those inaudible)
+
+#### Props
+
+
+| Name       | Description                                          | Type                                                  |
+| ---------- | ---------------------------------------------------- | ----------------------------------------------------- |
+| `participant` | Participant whose sound volume is to be adjusted.                     | `StreamVideoParticipant` \| `undefined`                              |
+
 ### `CancelCallButton`
 
 This component can be used to leave a call or to reject an incoming/outgoing call.
@@ -114,6 +128,7 @@ This component can be used to toggle the [initial audio state](../../../guides/c
 | Name      | Description                                             | Type                    |
 | --------- | ------------------------------------------------------- | ----------------------- |
 | `caption` | The explanatory text displayed under the control button | `string` \| `undefined` |
+| `Menu`    | A custom component to render the list of available audio input devices. | `ComponentType` \| `undefined` |
 
 ### `ToggleAudioPublishingButton`
 
@@ -127,16 +142,21 @@ This component can be used to
 | Name      | Description                                             | Type                    |
 | --------- | ------------------------------------------------------- | ----------------------- |
 | `caption` | The explanatory text displayed under the control button | `string` \| `undefined` |
+| `Menu`    | A custom component to render the list of available audio input devices. | `ComponentType` \| `undefined` |
 
 ### `ToggleAudioOutputButton`
 
-This component can be used to select the audio output device (if the currently used browser [supports audio output selection](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/sinkId)).
+The component should be rendered only if the currently used browser [supports audio output selection](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/sinkId). It can be used to:
+
+- toggle the master audio output level on / off
+- invoke a menu to select the audio output device.
 
 #### Props
 
-| Name      | Description                                             | Type                    |
-| --------- | ------------------------------------------------------- | ----------------------- |
-| `caption` | The explanatory text displayed under the control button | `string` \| `undefined` |
+| Name      | Description                                                   | Type              |
+|-----------|---------------------------------------------------------------|-------------------|
+| `caption` | The explanatory text displayed under the control button.       | `string` \| `undefined` |
+| `Menu`    | A custom component to render the list of available audio output devices. | `ComponentType` \| `undefined` |
 
 ### `ToggleVideoPreviewButton`
 
@@ -147,6 +167,7 @@ This component can be used to toggle the [initial video state](../../../guides/c
 | Name      | Description                                             | Type                    |
 | --------- | ------------------------------------------------------- | ----------------------- |
 | `caption` | The explanatory text displayed under the control button | `string` \| `undefined` |
+| `Menu`    | A custom component to render the list of available video input (camera) devices. | `ComponentType` \| `undefined` |
 
 ### `ToggleVideoPublishingButton`
 
@@ -160,6 +181,7 @@ This component can be used to
 | Name      | Description                                             | Type                    |
 | --------- | ------------------------------------------------------- | ----------------------- |
 | `caption` | The explanatory text displayed under the control button | `string` \| `undefined` |
+| `Menu`    | A custom component to render the list of available video input (camera) devices. | `ComponentType` \| `undefined` |
 
 ### `CallStatsButton`
 
diff --git a/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx b/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx
index f3cbb7186c..cfb30a81b3 100644
--- a/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx
+++ b/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx
@@ -8,6 +8,9 @@ import { Icon } from '../Icon';
 import { StreamVideoParticipant } from '@stream-io/video-client';
 
 export type AudioLevelControlProps = {
+  /**
+   * Participant whose sound volume is to be adjusted.
+   */
   participant?: StreamVideoParticipant;
 };
 
diff --git a/packages/react-sdk/src/components/CallControls/ToggleAudioButton.tsx b/packages/react-sdk/src/components/CallControls/ToggleAudioButton.tsx
index c820d70a71..df9f834916 100644
--- a/packages/react-sdk/src/components/CallControls/ToggleAudioButton.tsx
+++ b/packages/react-sdk/src/components/CallControls/ToggleAudioButton.tsx
@@ -13,7 +13,13 @@ import { PermissionNotification } from '../Notification';
 import { useToggleAudioMuteState } from '../../hooks';
 
 export type ToggleAudioPreviewButtonProps = {
+  /**
+   * The explanatory text displayed under the control button.
+   */
   caption?: string;
+  /**
+   * A custom component to render the list of available audio input devices.
+   */
   Menu?: ComponentType;
 };
 
@@ -40,7 +46,13 @@ export const ToggleAudioPreviewButton = (
 };
 
 export type ToggleAudioPublishingButtonProps = {
+  /**
+   * The explanatory text displayed under the control button.
+   */
   caption?: string;
+  /**
+   * A custom component to render the list of available audio input devices.
+   */
   Menu?: ComponentType;
 };
 
diff --git a/packages/react-sdk/src/components/CallControls/ToggleAudioOutputButton.tsx b/packages/react-sdk/src/components/CallControls/ToggleAudioOutputButton.tsx
index 99c966036e..16f95c4c63 100644
--- a/packages/react-sdk/src/components/CallControls/ToggleAudioOutputButton.tsx
+++ b/packages/react-sdk/src/components/CallControls/ToggleAudioOutputButton.tsx
@@ -8,7 +8,13 @@ import {
 import { ComponentType } from 'react';
 
 export type ToggleAudioOutputButtonProps = {
+  /**
+   * The explanatory text displayed under the control button.
+   */
   caption?: string;
+  /**
+   * A custom component to render the list of available audio output devices.
+   */
   Menu?: ComponentType;
 };
 
diff --git a/packages/react-sdk/src/components/CallControls/ToggleVideoButton.tsx b/packages/react-sdk/src/components/CallControls/ToggleVideoButton.tsx
index 3fccb551ff..07dbe1409a 100644
--- a/packages/react-sdk/src/components/CallControls/ToggleVideoButton.tsx
+++ b/packages/react-sdk/src/components/CallControls/ToggleVideoButton.tsx
@@ -13,7 +13,13 @@ import { PermissionNotification } from '../Notification';
 import { useToggleVideoMuteState } from '../../hooks';
 
 export type ToggleVideoPreviewButtonProps = {
+  /**
+   * The explanatory text displayed under the control button.
+   */
   caption?: string;
+  /**
+   * A custom component to render the list of available video input (camera) devices.
+   */
   Menu?: ComponentType;
 };
 
@@ -39,7 +45,13 @@ export const ToggleVideoPreviewButton = (
 };
 
 type ToggleVideoPublishingButtonProps = {
+  /**
+   * The explanatory text displayed under the control button.
+   */
   caption?: string;
+  /**
+   * A custom component to render the list of video input (camera) devices.
+   */
   Menu?: ComponentType;
 };
 

From 4840f2105efb82ae6cb9b21ece2fc723a5b85386 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Fri, 21 Jul 2023 17:34:27 +0200
Subject: [PATCH 22/26] docs(react-native): document the control of audio
 output level

---
 .../03-core/03-call-and-participant-state.mdx | 110 ++++++++++--------
 1 file changed, 60 insertions(+), 50 deletions(-)

diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/03-call-and-participant-state.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/03-call-and-participant-state.mdx
index 3796c53d96..254fe70956 100644
--- a/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/03-call-and-participant-state.mdx
+++ b/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/03-call-and-participant-state.mdx
@@ -44,43 +44,46 @@ The `StreamCall` component uses the `StreamCallProvider` under the hood.
 
 Here are all the call-related state hooks:
 
-| Name                              | Description                                                                                                   |
-| --------------------------------- | ------------------------------------------------------------------------------------------------------------- |
-| `useCall`                         | The `Call` instance that is registered with `StreamCall`. You need the `Call` instance to initiate API calls. |
-| `useIsCallRecordingInProgress`    | It's' `true` if the call is being recorded.                                                                   |
-| `useIsCallBroadcastingInProgress` | It's `true` if the call is being broadcasted.                                                                 |
-| `useIsCallLive`                   | It's `true` if the call is currently live.                                                                    |
-| `useCallMembers`                  | The list of call members                                                                                      |
-| `useCallCallingState`             | Provides information about the call state. For example, `RINGING`, `JOINED` or `RECONNECTING`.                |
-| `useCallStartedAt`                | The actual start time of the current call session.                                                            |
-| `useCallStatsReport`              | When stats gathering is enabled, this observable will emit a new value at a regular (configurable) interval.  |
-| `useCallMetadata`                 | The `CallResponse`, see below for more information.                                                           |
-| `useCallRecordings`               | The latest list of recordings performed during the call.                                                      |
-| `useHasOngoingScreenShare`        | It will return `true` if at least one participant is sharing their screen.                                    |
-| `useDominantSpeaker`              | The participant that is the current dominant speaker of the call.                                             |
-| `useOwnCapabilities`              | The capabilities of the local participant.                                                                    |
-| `useHasPermissions`               | Returns `true` if the local participant has all the given permissions.                                        |
-| `useCallPermissionRequest`        | The latest call permission request.                                                                           |
+| Name                              | Description                                                                                                                                                                             |
+|-----------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `useCall`                         | The `Call` instance that is registered with `StreamCall`. You need the `Call` instance to initiate API calls.                                                                           |
+| `useCallCallingState`             | Provides information about the call state. For example, `RINGING`, `JOINED` or `RECONNECTING`.                                                                                          |
+| `useCallMembers`                  | The list of call members                                                                                                                                                                |
+| `useCallMetadata`                 | The `CallResponse`, see below for more information.                                                                                                                                     |
+| `useCallRecordings`               | The latest list of recordings performed during the call.                                                                                                                                |
+| `useCallStartedAt`                | The actual start time of the current call session.                                                                                                                                      |
+| `useCallStatsReport`              | When stats gathering is enabled, this observable will emit a new value at a regular (configurable) interval.                                                                            |
+| `useDominantSpeaker`              | The participant that is the current dominant speaker of the call.                                                                                                                       |
+| `useHasOngoingScreenShare`        | It will return `true` if at least one participant is sharing their screen.                                                                                                              |
+| `useHasPermissions`               | Returns `true` if the local participant has all the given permissions.                                                                                                                  |
+| `useIsCallRecordingInProgress`    | It's' `true` if the call is being recorded.                                                                                                                                             |
+| `useIsCallBroadcastingInProgress` | It's `true` if the call is being broadcasted.                                                                                                                                           |
+| `useIsCallLive`                   | It's `true` if the call is currently live.                                                                                                                                              |
+| `useMasterAudioOutputLevel`       | The audio output level applied to all participants if `StreamVideoParticipant.audioOutputLevel` is not explicitly set. Stored as decimal number in the range of 0 - 1. Managed locally. |
+| `useOwnCapabilities`              | The capabilities of the local participant.                                                                                                                                              |
 
 The `CallResponse` object contains the following information:
 
-| Name               | Description                                             |
-| ------------------ | ------------------------------------------------------- |
-| `backstage`        | It's `true` if the call is in backstage mode.           |
-| `blocked_user_ids` | The users who are blocked from this call.               |
-| `created_at`       | The time the call was created.                          |
-| `created_by`       | The creator of the call.                                |
-| `custom`           | Custom data attached to the call.                       |
-| `egress`           | Broadcasting related information.                       |
-| `ended_at`         | When the call was ended.                                |
-| `ingress`          | RTMP publishing related information.                    |
-| `recording`        | It's `true` if the call is being recorded.              |
-| `session`          | Information related to the current session of the call. |
-| `settings`         | The settings for this call.                             |
-| `starts_at`        | The scheduled start time of the call.                   |
-| `team`             | Team that the call is restricted to.                    |
-| `type`             | The type of the call.                                   |
-| `updated_at`       | When the call was updated.                              |
+| Name                 | Description                                             |
+|----------------------|---------------------------------------------------------|
+| `backstage`          | It's `true` if the call is in backstage mode.           |
+| `blocked_user_ids`   | The users who are blocked from this call.               |
+| `cid`                | The unique identifier for a call (`<type>:<id>`).       |
+| `created_at`         | The time the call was created.                          |
+| `created_by`         | The creator of the call.                                |
+| `current_session_id` | The unique identifier of the current call session.      |
+| `custom`             | Custom data attached to the call.                       |
+| `egress`             | Broadcasting related information.                       |
+| `ended_at`           | When the call was ended.                                |
+| `id`                 | The unique call identifier within the given call type.  |
+| `ingress`            | RTMP publishing related information.                    |
+| `recording`          | It's `true` if the call is being recorded.              |
+| `session`            | Information related to the current session of the call. |
+| `settings`           | The settings for this call.                             |
+| `starts_at`          | The scheduled start time of the call.                   |
+| `team`               | Team that the call is restricted to.                    |
+| `type`               | The type of the call.                                   |
+| `updated_at`         | When the call was updated.                              |
 
 ## Participant state
 
@@ -123,21 +126,29 @@ const CallUI = () => {
 
 The `StreamVideoParticipant` object contains the following information:
 
-| Name                 | Description                                                                 |
-| -------------------- | --------------------------------------------------------------------------- |
-| `user`               | The user object for this participant.                                       |
-| `publishedTracks`    | The track types the participant is currently publishing                     |
-| `joinedAt`           | The time the participant joined the call.                                   |
-| `connectionQuality`  | The participant's connection quality.                                       |
-| `isSpeaking`         | It's `true` if the participant is currently speaking.                       |
-| `isDominantSpeaker`  | It's `true` if the participant is the current dominant speaker in the call. |
-| `audioLevel`         | The audio level of the participant.                                         |
-| `audioStream`        | The published audio `MediaStream`.                                          |
-| `videoStream`        | The published video `MediaStream`.                                          |
-| `screenShareStream`  | The published screen share `MediaStream`.                                   |
-| `isLocalParticipant` | It's `true` if the participant is the local participant.                    |
-| `pinnedAt`           | The time the participant was pinned.                                        |
-| `reaction`           | The last reaction this user has sent to this call.                          |
+| Name                      | Description                                                                                 |
+|---------------------------|---------------------------------------------------------------------------------------------|
+| `audioLevel`              | The audio level of the participant.                                                         |
+| `audioOutputLevel`        | The user object for this participant.                                                       |
+| `audioStream`             | The published audio `MediaStream`.                                                          |
+| `connectionQuality`       | The participant's connection quality.                                                       |
+| `image`                   | It's `true` if the participant is the current dominant speaker in the call.                 |
+| `isDominantSpeaker`       | It's `true` if the participant is the current dominant speaker in the call.                 |
+| `isLocalParticipant`      | It's `true` if the participant is the local participant.                                    |
+| `isSpeaking`              | It's `true` if the participant is currently speaking.                                       |
+| `joinedAt`                | The time the participant joined the call.                                                   |
+| `name`                    | The participant name.                                                                       |
+| `pinnedAt`                | The time the participant was pinned.                                                        |
+| `publishedTracks`         | The track types the participant is currently publishing                                     |
+| `reaction`                | The last reaction this user has sent to this call.                                          |
+| `roles`                   | The array of role names assigned to the participant in the active call.                     |
+| `screenShareStream`       | The published screen share `MediaStream`.                                                   |
+| `screenShareDimension`    | The preferred screen share dimensions for this participant.                                 |
+| `sessionId`               | Participant's session ID.                                                                   |
+| `userId`                  | Participant's user ID.                                                                      |
+| `videoStream`             | The published video `MediaStream`.                                                          |
+| `videoDimension`          | The preferred video dimensions for this participant.                                        |
+| `viewportVisibilityState` | The visibility state of the participant's video element within the pre-configured viewport. |
 
 The `StreamVideoLocalParticipant` has these additional properties:
 
@@ -199,7 +210,6 @@ The `UserResponse` contains the following properties:
 | `created_at` | The time the user was created.                        |
 | `custom`     | Custom user data.                                     |
 | `deleted_at` | The time the user was deleted.                        |
-| `devices`    | The registered push notification devices of the user. |
 | `id`         | The id of the user.                                   |
 | `image`      | The profile image of the user.                        |
 | `name`       | The name of the user.                                 |

From 0b676f164a87581651706a98dad333b52c9827d2 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Fri, 21 Jul 2023 17:42:18 +0200
Subject: [PATCH 23/26] style: fix lint issue

---
 packages/client/src/Call.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/Call.ts b/packages/client/src/Call.ts
index 748c43b3d2..761c73f925 100644
--- a/packages/client/src/Call.ts
+++ b/packages/client/src/Call.ts
@@ -1186,7 +1186,7 @@ export class Call {
     } else {
       this.state.setMasterAudioOutputLevel(level);
     }
-  }
+  };
 
   /**
    * Sets the `audioDeviceId` property of the [`localParticipant$`](./StreamVideoClient.md/#readonlystatestore)).

From 11ecff2c2caf4a2a99ec5a02a5dd753f4715cec8 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Mon, 24 Jul 2023 14:35:13 +0200
Subject: [PATCH 24/26] docs: incorrect property definitions

---
 .../reactnative/03-core/03-call-and-participant-state.mdx     | 4 ++--
 .../docs/React/02-guides/03-call-and-participant-state.mdx    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/03-call-and-participant-state.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/03-call-and-participant-state.mdx
index 254fe70956..18c8a794df 100644
--- a/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/03-call-and-participant-state.mdx
+++ b/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/03-call-and-participant-state.mdx
@@ -129,10 +129,10 @@ The `StreamVideoParticipant` object contains the following information:
 | Name                      | Description                                                                                 |
 |---------------------------|---------------------------------------------------------------------------------------------|
 | `audioLevel`              | The audio level of the participant.                                                         |
-| `audioOutputLevel`        | The user object for this participant.                                                       |
+| `audioOutputLevel`        | The speaker volume in range 0 - 1 set by the participant.                                   |
 | `audioStream`             | The published audio `MediaStream`.                                                          |
 | `connectionQuality`       | The participant's connection quality.                                                       |
-| `image`                   | It's `true` if the participant is the current dominant speaker in the call.                 |
+| `image`                   | The profile image of the user.                                                              |
 | `isDominantSpeaker`       | It's `true` if the participant is the current dominant speaker in the call.                 |
 | `isLocalParticipant`      | It's `true` if the participant is the local participant.                                    |
 | `isSpeaking`              | It's `true` if the participant is currently speaking.                                       |
diff --git a/packages/react-sdk/docusaurus/docs/React/02-guides/03-call-and-participant-state.mdx b/packages/react-sdk/docusaurus/docs/React/02-guides/03-call-and-participant-state.mdx
index da6089ff8e..07ec42c77a 100644
--- a/packages/react-sdk/docusaurus/docs/React/02-guides/03-call-and-participant-state.mdx
+++ b/packages/react-sdk/docusaurus/docs/React/02-guides/03-call-and-participant-state.mdx
@@ -123,10 +123,10 @@ The `StreamVideoParticipant` object contains the following information:
 | Name                      | Description                                                                                 |
 |---------------------------|---------------------------------------------------------------------------------------------|
 | `audioLevel`              | The audio level of the participant.                                                         |
-| `audioOutputLevel`        | The user object for this participant.                                                       |
+| `audioOutputLevel`        | The speaker volume in range 0 - 1 set by the participant.                                   |
 | `audioStream`             | The published audio `MediaStream`.                                                          |
 | `connectionQuality`       | The participant's connection quality.                                                       |
-| `image`                   | It's `true` if the participant is the current dominant speaker in the call.                 |
+| `image`                   | The profile image of the user.                                                              |
 | `isDominantSpeaker`       | It's `true` if the participant is the current dominant speaker in the call.                 |
 | `isLocalParticipant`      | It's `true` if the participant is the local participant.                                    |
 | `isSpeaking`              | It's `true` if the participant is currently speaking.                                       |

From 44ca9401b767e85fa5b9020a34d397b72e142d99 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Fri, 28 Jul 2023 17:30:40 +0200
Subject: [PATCH 25/26] feat(react-sdk): add dragging functionality to
 AudioOutputLevelSlider

---
 .../CallControls/AudioOutputLevelSlider.tsx   |  44 ++++--
 packages/react-sdk/src/hooks/useDraggable.ts  | 147 ++++++++++++++++++
 .../AudioLevelSlider-layout.scss              |   9 +-
 .../AudioLevelSlider-theme.scss               |   6 +
 4 files changed, 194 insertions(+), 12 deletions(-)
 create mode 100644 packages/react-sdk/src/hooks/useDraggable.ts

diff --git a/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx b/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx
index cfb30a81b3..23cf4c7a2c 100644
--- a/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx
+++ b/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx
@@ -3,9 +3,10 @@ import {
   useCall,
   useMasterAudioOutputLevel,
 } from '@stream-io/video-react-bindings';
-import { MouseEventHandler, useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Icon } from '../Icon';
 import { StreamVideoParticipant } from '@stream-io/video-client';
+import { useDraggable } from '../../hooks/useDraggable';
 
 export type AudioLevelControlProps = {
   /**
@@ -19,20 +20,39 @@ export const AudioOutputLevelSlider = ({
 }: AudioLevelControlProps) => {
   const call = useCall();
   const masterAudioOutputLevel = useMasterAudioOutputLevel();
+  const [thumb, setThumb] = useState<HTMLDivElement | null>(null);
+  const [track, setTrack] = useState<HTMLDivElement | null>(null);
 
   const audioLevel = participant?.audioOutputLevel ?? masterAudioOutputLevel;
 
-  const handleClick: MouseEventHandler = useCallback(
-    (event) => {
-      const { width, x } = event.currentTarget.getBoundingClientRect();
-
-      const volume = +((event.clientX - x) / width).toFixed(2);
+  const handleSetAudioOutput = useCallback(
+    (event: MouseEvent) => {
+      if (!track) return;
+      const { left: trackLeft, width } = track.getBoundingClientRect();
+      const volume = +((event.clientX - trackLeft) / width).toFixed(2);
       const validatedVolume = volume < 0 ? 0 : volume > 1 ? 1 : volume;
       call?.setAudioOutputLevel(validatedVolume, participant?.sessionId);
     },
-    [call, participant],
+    [call, participant, track],
   );
 
+  useEffect(() => {
+    if (!track) return;
+
+    track.addEventListener('click', handleSetAudioOutput);
+
+    return () => {
+      track?.removeEventListener('click', handleSetAudioOutput);
+    };
+  }, [handleSetAudioOutput, track]);
+
+  useDraggable({
+    axis: 'x',
+    containerElement: track,
+    element: thumb,
+    onMouseMove: handleSetAudioOutput,
+  });
+
   return (
     <div
       className={clsx('str-video__audio-level-slider', {
@@ -49,14 +69,16 @@ export const AudioOutputLevelSlider = ({
       >
         <Icon icon={audioLevel ? 'speaker' : 'speaker-off'} />
       </span>
-      <div
-        className="str-video__audio-level-slider__track"
-        onClick={handleClick}
-      >
+      <div className="str-video__audio-level-slider__track" ref={setTrack}>
         <div
           className="str-video__audio-level-slider__level"
           style={{ transform: `scaleX(${audioLevel})` }}
         />
+        <div
+          className="str-video_audio-level-slider__thumb"
+          ref={setThumb}
+          style={{ left: `${audioLevel * 100}%` }}
+        />
       </div>
     </div>
   );
diff --git a/packages/react-sdk/src/hooks/useDraggable.ts b/packages/react-sdk/src/hooks/useDraggable.ts
new file mode 100644
index 0000000000..8634b4d40f
--- /dev/null
+++ b/packages/react-sdk/src/hooks/useDraggable.ts
@@ -0,0 +1,147 @@
+import { useEffect, useRef } from 'react';
+
+const throttle = <T>(fn: (arg: T) => void, delay: number) => {
+  let time = Date.now();
+
+  return (arg: T) => {
+    if (time + delay - Date.now() <= 0) {
+      fn(arg);
+      time = Date.now();
+    }
+  };
+};
+
+interface UseDraggableParams {
+  /**
+   * Element to be dragged
+   */
+  element: HTMLElement | null;
+  /**
+   * Nearest parent with position: relative, relative to which the element will be positioned
+   */
+  containerElement?: HTMLElement | null;
+  /**
+   * Optional callback executed on mousedown
+   */
+  onMouseDown?: (event: MouseEvent) => void;
+  /**
+   * Optional callback executed on mousemove
+   */
+  onMouseMove?: (event: MouseEvent) => void;
+  /**
+   * Optional callback executed on mouseup
+   */
+  onMouseUp?: (event: MouseEvent) => void;
+  /**
+   * Restricts the dragging in either x or y axis
+   */
+  axis?: 'x' | 'y';
+  /**
+   * Interval in which the element position is adjusted
+   */
+  throttleInterval?: number;
+}
+
+export const useDraggable = ({
+  containerElement,
+  element,
+  onMouseDown,
+  onMouseMove,
+  onMouseUp,
+  axis,
+  throttleInterval = 0,
+}: UseDraggableParams) => {
+  const dragStart = useRef<{
+    left: number;
+    top: number;
+    clientX: number;
+    clientY: number;
+  } | null>(null);
+
+  useEffect(() => {
+    if (!element) return;
+
+    const handleDrag = (event: MouseEvent) => {
+      if (!(dragStart.current && element)) return;
+      const deltaX = event.clientX - dragStart.current.clientX;
+      const deltaY = event.clientY - dragStart.current.clientY;
+
+      let newLeft = dragStart.current.left + deltaX;
+      let newTop = dragStart.current.top + deltaY;
+
+      if (containerElement) {
+        const {
+          left: containerLeft,
+          top: containerTop,
+          height: containerHeight,
+          width: containerWidth,
+        } = containerElement.getBoundingClientRect();
+
+        const leftRelativeToContainer = event.clientX - containerLeft;
+        newLeft =
+          leftRelativeToContainer < 0
+            ? 0
+            : leftRelativeToContainer > containerWidth
+            ? containerWidth
+            : newLeft - containerLeft;
+        const topRelativeToContainer = event.clientY - containerTop;
+
+        newTop =
+          topRelativeToContainer < 0
+            ? 0
+            : topRelativeToContainer > containerHeight
+            ? containerHeight
+            : newTop - containerTop;
+      }
+      if (!axis || axis === 'x') {
+        element.style.left = newLeft + 'px';
+      }
+      if (!axis || axis === 'y') {
+        element.style.top = newTop + 'px';
+      }
+      onMouseMove?.(event);
+    };
+
+    const handleDragStop = (event: MouseEvent) => {
+      if (!dragStart.current) return;
+      document.removeEventListener('mousemove', handleDrag);
+      document.removeEventListener('mousemove', handleDrag);
+      dragStart.current = null;
+      onMouseUp?.(event);
+    };
+
+    const handleMouseDown = (event: MouseEvent) => {
+      if (!(event.button === 0 && event.buttons === 1 && element)) return;
+      event.stopPropagation();
+      const { left, top } = element.getBoundingClientRect();
+      dragStart.current = {
+        left,
+        top,
+        clientX: event.clientX,
+        clientY: event.clientY,
+      };
+      document.addEventListener(
+        'mousemove',
+        throttle(handleDrag, throttleInterval),
+      );
+      document.addEventListener('mouseup', handleDragStop);
+      onMouseDown?.(event);
+    };
+
+    element.addEventListener('mousedown', handleMouseDown);
+
+    return () => {
+      element.removeEventListener('mousedown', handleMouseDown);
+      document.removeEventListener('mousemove', handleDrag);
+      document.removeEventListener('mouseup', handleDragStop);
+    };
+  }, [
+    axis,
+    containerElement,
+    element,
+    onMouseDown,
+    onMouseMove,
+    onMouseUp,
+    throttleInterval,
+  ]);
+};
diff --git a/packages/styling/src/AudioLevelSlider/AudioLevelSlider-layout.scss b/packages/styling/src/AudioLevelSlider/AudioLevelSlider-layout.scss
index 0e5b8f7fb5..651e65291a 100644
--- a/packages/styling/src/AudioLevelSlider/AudioLevelSlider-layout.scss
+++ b/packages/styling/src/AudioLevelSlider/AudioLevelSlider-layout.scss
@@ -8,13 +8,20 @@
   .str-video__audio-level-slider__track {
     flex: 1;
     height: 8px;
-    overflow: hidden;
+    position: relative;
 
     .str-video__audio-level-slider__level {
       transform-origin: left center;
       width: 100%;
       height: 100%;
     }
+
+    .str-video_audio-level-slider__thumb {
+      position: absolute;
+      top: -4px;
+      width: 1rem;
+      height: 1rem;
+    }
   }
 }
 
diff --git a/packages/styling/src/AudioLevelSlider/AudioLevelSlider-theme.scss b/packages/styling/src/AudioLevelSlider/AudioLevelSlider-theme.scss
index 497cbc2e86..a1bff7d38e 100644
--- a/packages/styling/src/AudioLevelSlider/AudioLevelSlider-theme.scss
+++ b/packages/styling/src/AudioLevelSlider/AudioLevelSlider-theme.scss
@@ -15,5 +15,11 @@
     .str-video__audio-level-slider__level {
       background: var(--str-video__primary-color);
     }
+
+    .str-video_audio-level-slider__thumb {
+      border-radius: var(--str-video__border-radius-circle);
+      background-color: inherit;
+      box-shadow: 0 0 20px var(--str-video__background-color2);
+    }
   }
 }

From 5381953f49fc5cac6a2431f0cf7f0fc6f9cea7f9 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Fri, 4 Aug 2023 09:45:00 +0200
Subject: [PATCH 26/26] fix(react-sdk): prevent removal of event listeners when
 dragging participant audio slider, allow thumb overflow on track sides

---
 .../CallControls/AudioOutputLevelSlider.tsx   |  71 ++++++++----
 packages/react-sdk/src/hooks/useDraggable.ts  | 108 ++++++++++++++----
 .../AudioLevelSlider-layout.scss              |   6 +-
 .../AudioLevelSlider-theme.scss               |   2 +
 4 files changed, 141 insertions(+), 46 deletions(-)

diff --git a/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx b/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx
index 23cf4c7a2c..94c618a40e 100644
--- a/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx
+++ b/packages/react-sdk/src/components/CallControls/AudioOutputLevelSlider.tsx
@@ -3,7 +3,7 @@ import {
   useCall,
   useMasterAudioOutputLevel,
 } from '@stream-io/video-react-bindings';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { Icon } from '../Icon';
 import { StreamVideoParticipant } from '@stream-io/video-client';
 import { useDraggable } from '../../hooks/useDraggable';
@@ -13,44 +13,73 @@ export type AudioLevelControlProps = {
    * Participant whose sound volume is to be adjusted.
    */
   participant?: StreamVideoParticipant;
+  /**
+   * Interval in which the slider thumb position is adjusted.
+   */
+  sliderDragThrottleInterval?: number;
 };
 
 export const AudioOutputLevelSlider = ({
   participant,
+  sliderDragThrottleInterval = 0,
 }: AudioLevelControlProps) => {
   const call = useCall();
   const masterAudioOutputLevel = useMasterAudioOutputLevel();
-  const [thumb, setThumb] = useState<HTMLDivElement | null>(null);
-  const [track, setTrack] = useState<HTMLDivElement | null>(null);
+  const thumbRef = useRef<HTMLDivElement | null>(null);
+  const trackRef = useRef<HTMLDivElement | null>(null);
 
   const audioLevel = participant?.audioOutputLevel ?? masterAudioOutputLevel;
 
-  const handleSetAudioOutput = useCallback(
+  const calculateVolumeFromTargetPosition = useCallback((event: MouseEvent) => {
+    if (!trackRef.current) return;
+
+    const { left: trackLeft, width } = trackRef.current.getBoundingClientRect();
+    const volume = +((event.clientX - trackLeft) / width).toFixed(2);
+    return volume < 0 ? 0 : volume > 1 ? 1 : volume;
+  }, []);
+
+  const handleSetAudioOutputOnDrag = useCallback(
     (event: MouseEvent) => {
-      if (!track) return;
-      const { left: trackLeft, width } = track.getBoundingClientRect();
-      const volume = +((event.clientX - trackLeft) / width).toFixed(2);
-      const validatedVolume = volume < 0 ? 0 : volume > 1 ? 1 : volume;
+      const validatedVolume = calculateVolumeFromTargetPosition(event);
+      if (typeof validatedVolume === 'undefined') return;
       call?.setAudioOutputLevel(validatedVolume, participant?.sessionId);
     },
-    [call, participant, track],
+    [calculateVolumeFromTargetPosition, call, participant?.sessionId],
   );
 
-  useEffect(() => {
-    if (!track) return;
+  const handleSetAudioOutputOnClick = useCallback(
+    (event: MouseEvent) => {
+      const validatedVolume = calculateVolumeFromTargetPosition(event);
+      if (typeof validatedVolume === 'undefined') return;
+      call?.setAudioOutputLevel(validatedVolume, participant?.sessionId);
 
-    track.addEventListener('click', handleSetAudioOutput);
+      if (thumbRef.current && trackRef.current) {
+        const { width: trackWidth } = trackRef.current.getBoundingClientRect();
+        const { width: thumbWidth } = thumbRef.current.getBoundingClientRect();
+        thumbRef.current.style.left =
+          trackWidth * validatedVolume - thumbWidth / 2 + 'px';
+      }
+    },
+    [calculateVolumeFromTargetPosition, call, participant?.sessionId],
+  );
+
+  useEffect(() => {
+    if (!trackRef.current) return;
+    const track = trackRef.current;
+    track.addEventListener('click', handleSetAudioOutputOnClick);
 
     return () => {
-      track?.removeEventListener('click', handleSetAudioOutput);
+      track?.removeEventListener('click', handleSetAudioOutputOnClick);
     };
-  }, [handleSetAudioOutput, track]);
+  }, [handleSetAudioOutputOnClick]);
 
   useDraggable({
     axis: 'x',
-    containerElement: track,
-    element: thumb,
-    onMouseMove: handleSetAudioOutput,
+    containerElementRef: trackRef,
+    dragElementRef: thumbRef,
+    onMouseMove: handleSetAudioOutputOnDrag,
+    startPosition: { left: { amount: audioLevel * 100, unit: '%' } },
+    throttleInterval: sliderDragThrottleInterval,
   });
 
   return (
@@ -69,16 +98,12 @@ export const AudioOutputLevelSlider = ({
       >
         <Icon icon={audioLevel ? 'speaker' : 'speaker-off'} />
       </span>
-      <div className="str-video__audio-level-slider__track" ref={setTrack}>
+      <div className="str-video__audio-level-slider__track" ref={trackRef}>
         <div
           className="str-video__audio-level-slider__level"
           style={{ transform: `scaleX(${audioLevel})` }}
         />
-        <div
-          className="str-video_audio-level-slider__thumb"
-          ref={setThumb}
-          style={{ left: `${audioLevel * 100}%` }}
-        />
+        <div className="str-video_audio-level-slider__thumb" ref={thumbRef} />
       </div>
     </div>
   );
diff --git a/packages/react-sdk/src/hooks/useDraggable.ts b/packages/react-sdk/src/hooks/useDraggable.ts
index 8634b4d40f..cc01fb5b73 100644
--- a/packages/react-sdk/src/hooks/useDraggable.ts
+++ b/packages/react-sdk/src/hooks/useDraggable.ts
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { RefObject, useEffect, useRef } from 'react';
 
 const throttle = <T>(fn: (arg: T) => void, delay: number) => {
   let time = Date.now();
@@ -11,15 +11,49 @@ const throttle = <T>(fn: (arg: T) => void, delay: number) => {
   };
 };
 
+export type OffsetOnAxisDef = {
+  amount: number;
+  /**
+   * Can be any CSS compatible unit applied to CSS property `left` resp. `top`.
+   */
+  unit: string;
+};
+
+export type Position = {
+  /**
+   * Offset definition from the left side of the container.
+   */
+  left?: OffsetOnAxisDef;
+  /**
+   * Offset definition from the left side of the container
+   */
+  top?: OffsetOnAxisDef;
+};
+
+export type OnDragHandler = (
+  /**
+   * The mousemove event instance used to calculate the next position of the dragged element.
+   */
+  event: MouseEvent,
+  /**
+   * Next position applied to the dragged element.
+   */
+  nextPosition: Position,
+) => void;
+
 interface UseDraggableParams {
   /**
    * Element to be dragged
    */
-  element: HTMLElement | null;
+  dragElementRef: RefObject<HTMLElement | null>;
+  /**
+   * Restricts the dragging in either x or y axis
+   */
+  axis?: 'x' | 'y';
   /**
    * Nearest parent with position: relative, relative to which the element will be positioned
    */
-  containerElement?: HTMLElement | null;
+  containerElementRef?: RefObject<HTMLElement | null>;
   /**
    * Optional callback executed on mousedown
    */
@@ -27,28 +61,29 @@ interface UseDraggableParams {
   /**
    * Optional callback executed on mousemove
    */
-  onMouseMove?: (event: MouseEvent) => void;
+  onMouseMove?: OnDragHandler;
   /**
    * Optional callback executed on mouseup
    */
   onMouseUp?: (event: MouseEvent) => void;
   /**
-   * Restricts the dragging in either x or y axis
+   * Starting element position. Can be any CSS valid value assignable to left and top position.
    */
-  axis?: 'x' | 'y';
+  startPosition?: Position;
   /**
-   * Interval in which the element position is adjusted
+   * Interval in which the element position is adjusted.
    */
   throttleInterval?: number;
 }
 
 export const useDraggable = ({
-  containerElement,
-  element,
+  axis,
+  containerElementRef,
+  dragElementRef,
   onMouseDown,
   onMouseMove,
   onMouseUp,
-  axis,
+  startPosition,
   throttleInterval = 0,
 }: UseDraggableParams) => {
   const dragStart = useRef<{
@@ -57,14 +92,40 @@ export const useDraggable = ({
     clientX: number;
     clientY: number;
   } | null>(null);
+  const positionInitiated = useRef(false);
+
+  useEffect(() => {
+    const element = dragElementRef.current;
+    if (!element || positionInitiated.current) return;
+
+    const leftCSS = startPosition?.left
+      ? startPosition.left.amount + startPosition.left.unit
+      : undefined;
+    const topCSS = startPosition?.top
+      ? startPosition.top.amount + startPosition.top.unit
+      : undefined;
+
+    if (typeof leftCSS !== 'undefined' && leftCSS !== element.style.left) {
+      element.style.left = leftCSS;
+      positionInitiated.current = true;
+    }
+    if (typeof topCSS !== 'undefined' && topCSS !== element.style.top) {
+      element.style.top = topCSS;
+      positionInitiated.current = true;
+    }
+  }, [dragElementRef, startPosition]);
 
   useEffect(() => {
+    const element = dragElementRef.current;
+    const containerElement = containerElementRef?.current;
     if (!element) return;
 
     const handleDrag = (event: MouseEvent) => {
       if (!(dragStart.current && element)) return;
       const deltaX = event.clientX - dragStart.current.clientX;
       const deltaY = event.clientY - dragStart.current.clientY;
+      const { width: elementWidth, height: elementHeight } =
+        element.getBoundingClientRect();
 
       let newLeft = dragStart.current.left + deltaX;
       let newTop = dragStart.current.top + deltaY;
@@ -79,18 +140,18 @@ export const useDraggable = ({
 
         const leftRelativeToContainer = event.clientX - containerLeft;
         newLeft =
-          leftRelativeToContainer < 0
-            ? 0
-            : leftRelativeToContainer > containerWidth
-            ? containerWidth
+          leftRelativeToContainer <= 0
+            ? -(elementWidth / 2)
+            : leftRelativeToContainer >= containerWidth
+            ? containerWidth - elementWidth / 2
             : newLeft - containerLeft;
-        const topRelativeToContainer = event.clientY - containerTop;
 
+        const topRelativeToContainer = event.clientY - containerTop;
         newTop =
           topRelativeToContainer < 0
-            ? 0
-            : topRelativeToContainer > containerHeight
-            ? containerHeight
+            ? -(elementHeight / 2)
+            : topRelativeToContainer >= containerHeight
+            ? containerHeight - elementHeight / 2
             : newTop - containerTop;
       }
       if (!axis || axis === 'x') {
@@ -99,13 +160,16 @@ export const useDraggable = ({
       if (!axis || axis === 'y') {
         element.style.top = newTop + 'px';
       }
-      onMouseMove?.(event);
+      onMouseMove?.(event, {
+        left: { amount: newLeft, unit: 'px' },
+        top: { amount: newTop, unit: 'px' },
+      });
     };
 
     const handleDragStop = (event: MouseEvent) => {
       if (!dragStart.current) return;
       document.removeEventListener('mousemove', handleDrag);
-      document.removeEventListener('mousemove', handleDrag);
+      document.removeEventListener('mouseup', handleDragStop);
       dragStart.current = null;
       onMouseUp?.(event);
     };
@@ -137,8 +201,8 @@ export const useDraggable = ({
     };
   }, [
     axis,
-    containerElement,
-    element,
+    containerElementRef,
+    dragElementRef,
     onMouseDown,
     onMouseMove,
     onMouseUp,
diff --git a/packages/styling/src/AudioLevelSlider/AudioLevelSlider-layout.scss b/packages/styling/src/AudioLevelSlider/AudioLevelSlider-layout.scss
index 651e65291a..5cd03c3abc 100644
--- a/packages/styling/src/AudioLevelSlider/AudioLevelSlider-layout.scss
+++ b/packages/styling/src/AudioLevelSlider/AudioLevelSlider-layout.scss
@@ -31,12 +31,16 @@
     min-width: 200px;
 
     .str-video__audio-level-slider__track {
-      height: 5px;
+      height: 6px;
     }
 
     .str-video__icon {
       width: 1rem;
       height: 1rem;
     }
+
+    .str-video_audio-level-slider__thumb {
+      top: -5px;
+    }
   }
 }
diff --git a/packages/styling/src/AudioLevelSlider/AudioLevelSlider-theme.scss b/packages/styling/src/AudioLevelSlider/AudioLevelSlider-theme.scss
index a1bff7d38e..b244c112cb 100644
--- a/packages/styling/src/AudioLevelSlider/AudioLevelSlider-theme.scss
+++ b/packages/styling/src/AudioLevelSlider/AudioLevelSlider-theme.scss
@@ -14,6 +14,8 @@
 
     .str-video__audio-level-slider__level {
       background: var(--str-video__primary-color);
+      border-top-left-radius: inherit;
+      border-bottom-left-radius: inherit;
     }
 
     .str-video_audio-level-slider__thumb {