Add user-media volume control

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

src/video-grid/VideoTile.tsx

@@ -34,7 +34,9 @@ import styles from "./VideoTile.module.css";
 import { ReactComponent as MicIcon } from "../icons/Mic.svg";
 import { ReactComponent as MicMutedIcon } from "../icons/MicMuted.svg";
 import { useReactiveState } from "../useReactiveState";
-import { FullscreenButton } from "../button/Button";
+import { AudioButton, FullscreenButton } from "../button/Button";
+import { useModalTriggerState } from "../Modal";
+import { VideoTileSettingsModal } from "./VideoTileSettingsModal";
 
 export interface ItemData {
   id: string;
@@ -111,10 +113,14 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
       onToggleFullscreen(data.id);
     }, [data, onToggleFullscreen]);
 
+    const {
+      modalState: videoTileSettingsModalState,
+      modalProps: videoTileSettingsModalProps,
+    } = useModalTriggerState();
+    const onOptionsPress = videoTileSettingsModalState.open;
+
     const toolbarButtons: JSX.Element[] = [];
     if (!sfuParticipant.isLocal) {
-      // TODO local volume option, which would also go here
-
       if (content === TileContent.ScreenShare) {
         toolbarButtons.push(
           <FullscreenButton
@@ -124,6 +130,16 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
             onPress={onFullscreen}
           />
         );
+      } else {
+        // Due to the LK SDK this sadly only works for user-media atm
+        toolbarButtons.push(
+          <AudioButton
+            key="localVolume"
+            className={styles.button}
+            volume={(sfuParticipant as RemoteParticipant).getVolume()}
+            onPress={onOptionsPress}
+          />
+        );
       }
     }
 
@@ -182,6 +198,12 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
               : Track.Source.ScreenShare
           }
         />
+        {videoTileSettingsModalState.isOpen && !maximised && (
+          <VideoTileSettingsModal
+            {...videoTileSettingsModalProps}
+            data={data}
+          />
+        )}
       </animated.div>
     );
   }

src/video-grid/VideoTileSettingsModal.module.css

@@ -0,0 +1,120 @@
+/*
+Copyright 2022 - 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.videoTileSettingsModal {
+  width: 700px;
+  height: 316px;
+  display: flex;
+}
+
+.content {
+  position: relative;
+  margin: 27px 34px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.localVolumePercentage {
+  width: 3ch;
+}
+
+.localVolumeSlider[type="range"] {
+  -ms-appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+
+  background-color: transparent;
+  --slider-color: var(--quinary-content);
+  --slider-height: 4px;
+  --thumb-color: var(--accent);
+  --thumb-radius: 100%;
+  --thumb-size: 16px;
+  --thumb-margin-top: -6px;
+
+  cursor: pointer;
+  width: 100%;
+}
+
+.localVolumeSlider[type="range"]::-moz-range-track {
+  -moz-appearance: none;
+  appearance: none;
+
+  background-color: var(--slider-color);
+  height: var(--slider-height);
+}
+.localVolumeSlider[type="range"]::-ms-track {
+  -ms-appearance: none;
+  appearance: none;
+
+  background-color: var(--slider-color);
+  height: var(--slider-height);
+}
+.localVolumeSlider[type="range"]::-webkit-slider-runnable-track {
+  -webkit-appearance: none;
+  appearance: none;
+
+  background-color: var(--slider-color);
+  height: var(--slider-height);
+}
+
+.localVolumeSlider[type="range"]::-moz-range-thumb {
+  -moz-appearance: none;
+  appearance: none;
+
+  height: var(--thumb-size);
+  width: var(--thumb-size);
+  margin-top: var(--thumb-margin-top);
+  border-radius: var(--thumb-radius);
+  background: var(--thumb-color);
+}
+.localVolumeSlider[type="range"]::-ms-thumb {
+  -ms-appearance: none;
+  appearance: none;
+
+  height: var(--thumb-size);
+  width: var(--thumb-size);
+  margin-top: var(--thumb-margin-top);
+  border-radius: var(--thumb-radius);
+  background: var(--thumb-color);
+}
+.localVolumeSlider[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+
+  height: var(--thumb-size);
+  width: var(--thumb-size);
+  margin-top: var(--thumb-margin-top);
+  border-radius: var(--thumb-radius);
+  background: var(--thumb-color);
+}
+
+.localVolumeSlider[type="range"]::-moz-range-progress {
+  -moz-appearance: none;
+  appearance: none;
+
+  height: var(--slider-height);
+  background: var(--thumb-color);
+}
+.localVolumeSlider[type="range"]::-ms-fill-lower {
+  -moz-appearance: none;
+  appearance: none;
+
+  height: var(--slider-height);
+  background: var(--thumb-color);
+}

src/video-grid/VideoTileSettingsModal.tsx

@@ -0,0 +1,85 @@
+/*
+Copyright 2022 - 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { ChangeEvent, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { FieldRow } from "../input/Input";
+import { Modal } from "../Modal";
+import styles from "./VideoTileSettingsModal.module.css";
+import { VolumeIcon } from "../button/VolumeIcon";
+import { ItemData } from "./VideoTile";
+import { RemoteParticipant } from "livekit-client";
+
+interface LocalVolumeProps {
+  participant: RemoteParticipant;
+}
+
+const LocalVolume: React.FC<LocalVolumeProps> = ({
+  participant,
+}: LocalVolumeProps) => {
+  const [localVolume, setLocalVolume] = useState<number>(
+    participant.getVolume()
+  );
+
+  const onLocalVolumeChanged = (event: ChangeEvent<HTMLInputElement>) => {
+    const value: number = +event.target.value;
+    setLocalVolume(value);
+    participant.setVolume(value);
+  };
+
+  return (
+    <>
+      <FieldRow>
+        <VolumeIcon volume={localVolume} />
+        <input
+          className={styles.localVolumeSlider}
+          type="range"
+          min="0"
+          max="1"
+          step="0.01"
+          value={localVolume}
+          onChange={onLocalVolumeChanged}
+        />
+      </FieldRow>
+    </>
+  );
+};
+
+// TODO: Extend ModalProps
+interface Props {
+  data: ItemData;
+  onClose: () => void;
+}
+
+export const VideoTileSettingsModal = ({ data, onClose, ...rest }: Props) => {
+  const { t } = useTranslation();
+
+  return (
+    <Modal
+      className={styles.videoTileSettingsModal}
+      title={t("Local volume")}
+      isDismissable
+      mobileFullScreen
+      onClose={onClose}
+      {...rest}
+    >
+      <div className={styles.content}>
+        {<LocalVolume participant={data.sfuParticipant as RemoteParticipant} />}
+      </div>
+    </Modal>
+  );
+};