From ec20c017d1ff680b5bd5c780494cb4e36d3c912e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 25 Jul 2023 16:57:43 +0200 Subject: [PATCH 1/2] Update livekit-client MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- package.json | 6 +++--- yarn.lock | 25 +++++++++++++++++++------ 2 files changed, 22 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 5934f89f..74f15cd8 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,7 @@ "i18next": "^21.10.0", "i18next-browser-languagedetector": "^6.1.8", "i18next-http-backend": "^1.4.4", - "livekit-client": "1.12.0", + "livekit-client": "1.12.1", "lodash": "^4.17.21", "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#b698217445318f453e0b1086364a33113eaa85d9", "matrix-widget-api": "^1.3.1", @@ -83,12 +83,12 @@ "@storybook/react": "^6.5.0-alpha.5", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", - "@types/node": "^18.13.0", - "@types/request": "^2.48.8", "@types/content-type": "^1.1.5", "@types/dom-screen-wake-lock": "^1.0.1", "@types/grecaptcha": "^3.0.4", + "@types/node": "^18.13.0", "@types/react-router-dom": "^5.3.3", + "@types/request": "^2.48.8", "@types/sdp-transform": "^2.4.5", "@types/uuid": "9", "@typescript-eslint/eslint-plugin": "^6.1.0", diff --git a/yarn.lock b/yarn.lock index 5941702c..68fa7316 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2217,7 +2217,7 @@ "@react-hook/latest" "^1.0.3" clsx "^1.2.1" -"@matrix-org/matrix-sdk-crypto-js@^0.1.0": +"@matrix-org/matrix-sdk-crypto-js@^0.1.1": version "0.1.4" resolved "https://registry.yarnpkg.com/@matrix-org/matrix-sdk-crypto-js/-/matrix-sdk-crypto-js-0.1.4.tgz#c13c7c8c3a1d8da08e6ad195d25e5e61cc402df7" integrity sha512-OxG84iSeR89zYLFeb+DCaFtZT+DDiIu+kTkqY8OYfhE5vpGLFX2sDVBRrAdos1IUqEoboDloDBR9+yU7hNRyog== @@ -6450,6 +6450,11 @@ crypto-browserify@^3.11.0: randombytes "^2.0.0" randomfill "^1.0.3" +crypto-js@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.1.1.tgz#9e485bcf03521041bd85844786b83fb7619736cf" + integrity sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw== + css-blank-pseudo@^3.0.3: version "3.0.3" resolved "https://registry.yarnpkg.com/css-blank-pseudo/-/css-blank-pseudo-3.0.3.tgz#36523b01c12a25d812df343a32c322d2a2324561" @@ -10751,10 +10756,10 @@ lines-and-columns@^1.1.6: resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632" integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg== -livekit-client@1.12.0: - version "1.12.0" - resolved "https://registry.yarnpkg.com/livekit-client/-/livekit-client-1.12.0.tgz#4b4f18087331d4893adaccb148e33fe870eb9a2e" - integrity sha512-G1KHNMSaEMXtPIKxTQt+WH/uRvhkQ0tQaZ5Kkem2CvB/5I4KPrV4DSmhBKP1P+8reHcaBBiye8V9bfpD69aHyQ== +livekit-client@1.12.1: + version "1.12.1" + resolved "https://registry.yarnpkg.com/livekit-client/-/livekit-client-1.12.1.tgz#b927b4fb07d2d64543d25a99db36ffbb7caa23e6" + integrity sha512-/mob04a/Mb0D+4sIzB7/pqakpJMCORSK+Qu5oTIcuSpgL+eBYGzHPE2sutGCGoe3Ns9sITAqUTyiui5+GN3i2w== dependencies: eventemitter3 "^5.0.1" loglevel "^1.8.0" @@ -11005,7 +11010,7 @@ matrix-events-sdk@0.0.1: resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/b698217445318f453e0b1086364a33113eaa85d9" dependencies: "@babel/runtime" "^7.12.5" - "@matrix-org/matrix-sdk-crypto-js" "^0.1.0" + "@matrix-org/matrix-sdk-crypto-js" "^0.1.1" another-json "^0.2.0" bs58 "^5.0.0" content-type "^1.0.4" @@ -11700,6 +11705,14 @@ objectorarray@^1.0.5: resolved "https://registry.yarnpkg.com/objectorarray/-/objectorarray-1.0.5.tgz#2c05248bbefabd8f43ad13b41085951aac5e68a5" integrity sha512-eJJDYkhJFFbBBAxeh8xW+weHlkI28n2ZdQV/J/DNfWfSKlGEf2xcfAbZTv3riEXHAhL9SVOTs2pRmXiSTf78xg== +oidc-client-ts@^2.2.4: + version "2.2.4" + resolved "https://registry.yarnpkg.com/oidc-client-ts/-/oidc-client-ts-2.2.4.tgz#7d86b5efe2248f3637a6f3a0ee1af86764aea125" + integrity sha512-nOZwIomju+AmXObl5Oq5PjrES/qTt8bLsENJCIydVgi9TEWk7SCkOU6X3RNkY7yfySRM1OJJvDKdREZdmnDT2g== + dependencies: + crypto-js "^4.1.1" + jwt-decode "^3.1.2" + on-finished@2.4.1: version "2.4.1" resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f" From 7c558b16ca89593dd9d0214b504262c1878693e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 25 Jul 2023 17:17:49 +0200 Subject: [PATCH 2/2] Add screen-sharing volume control MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/video-grid/VideoTile.tsx | 19 +++++++++---------- src/video-grid/VideoTileSettingsModal.tsx | 20 +++++++++++++++----- 2 files changed, 24 insertions(+), 15 deletions(-) diff --git a/src/video-grid/VideoTile.tsx b/src/video-grid/VideoTile.tsx index 63ceddf2..f15052e0 100644 --- a/src/video-grid/VideoTile.tsx +++ b/src/video-grid/VideoTile.tsx @@ -121,6 +121,15 @@ export const VideoTile = forwardRef( const toolbarButtons: JSX.Element[] = []; if (!sfuParticipant.isLocal) { + toolbarButtons.push( + + ); + if (content === TileContent.ScreenShare) { toolbarButtons.push( ( onPress={onFullscreen} /> ); - } else { - // Due to the LK SDK this sadly only works for user-media atm - toolbarButtons.push( - - ); } } diff --git a/src/video-grid/VideoTileSettingsModal.tsx b/src/video-grid/VideoTileSettingsModal.tsx index 00d41c50..0c77075a 100644 --- a/src/video-grid/VideoTileSettingsModal.tsx +++ b/src/video-grid/VideoTileSettingsModal.tsx @@ -16,29 +16,36 @@ limitations under the License. import React, { ChangeEvent, useState } from "react"; import { useTranslation } from "react-i18next"; -import { RemoteParticipant } from "livekit-client"; +import { RemoteParticipant, Track } from "livekit-client"; 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 { ItemData, TileContent } from "./VideoTile"; interface LocalVolumeProps { participant: RemoteParticipant; + content: TileContent; } const LocalVolume: React.FC = ({ participant, + content, }: LocalVolumeProps) => { + const source = + content === TileContent.UserMedia + ? Track.Source.Microphone + : Track.Source.ScreenShareAudio; + const [localVolume, setLocalVolume] = useState( - participant.getVolume() ?? 0 + participant.getVolume(source) ?? 0 ); const onLocalVolumeChanged = (event: ChangeEvent) => { const value: number = +event.target.value; setLocalVolume(value); - participant.setVolume(value); + participant.setVolume(value, source); }; return ( @@ -78,7 +85,10 @@ export const VideoTileSettingsModal = ({ data, onClose, ...rest }: Props) => { {...rest} >
- +
);