From 996c40ed10d0caf5444f3e42527f35e97895e076 Mon Sep 17 00:00:00 2001 From: James Hush Date: Thu, 21 Sep 2023 14:09:41 +0800 Subject: [PATCH 1/4] Track demo --- src/App.tsx | 45 ++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 42 insertions(+), 3 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index d640e99..6407c86 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -18,6 +18,7 @@ import { DailyAudio, useInputSettings, useNetwork, + useParticipantProperty, } from "@daily-co/daily-react"; import "./styles.css"; @@ -169,9 +170,9 @@ export default function App() { if (!callObject) return; console.log("Participant joined meeting: ", evt); - callObject.updateParticipant(evt.participant.session_id, { - setSubscribedTracks: { audio: true, video: true, screenVideo: false }, - }); + // callObject.updateParticipant(evt.participant.session_id, { + // setSubscribedTracks: { audio: true, video: true, screenVideo: false }, + // }); }; const updateParticipant = (evt: DailyEventObjectParticipant) => { @@ -376,6 +377,44 @@ export default function App() {

+
+

Participants

+ +
{participantIds.map((id) => ( ))} From 63a453b6d850149f5156b028d0bff3e4bdf821b3 Mon Sep 17 00:00:00 2001 From: James Hush Date: Thu, 21 Sep 2023 14:35:02 +0800 Subject: [PATCH 2/4] fixes --- src/App.tsx | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/src/App.tsx b/src/App.tsx index 6407c86..06381c1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -380,6 +380,36 @@ export default function App() {

Participants

    +
  • + invalid-participant-id{" "} + + + +
    • {participantIds.map((id) => ( /* Add buttons to subscribe and unsubscribe from each participant */
  • From 9eed4cb14cd7d867f32c349a7fe1fd89fe35546c Mon Sep 17 00:00:00 2001 From: James Hush Date: Fri, 22 Sep 2023 14:22:52 +0800 Subject: [PATCH 3/4] Update --- package-lock.json | 16 ++++++++-------- package.json | 4 ++-- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 24340a4..2699143 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,8 +8,8 @@ "name": "cra-virtual-background", "version": "0.1.0", "dependencies": { - "@daily-co/daily-js": "0.49.1", - "@daily-co/daily-react": "0.11.5", + "@daily-co/daily-js": "0.51.1", + "@daily-co/daily-react": "0.12.0", "@types/node": "^18.11.18", "@types/react": "^18.0.26", "@types/react-dom": "^18.0.10", @@ -451,9 +451,9 @@ } }, "node_modules/@daily-co/daily-js": { - "version": "0.49.1", - "resolved": "https://registry.npmjs.org/@daily-co/daily-js/-/daily-js-0.49.1.tgz", - "integrity": "sha512-Nm2KdNt75v/TDVuV4ddExWaX7YuVxBa3taHcomjn4dbSypCWO/xLsW+8ykOtV2puKmEe5qKZk3BSPTw/C8wbLA==", + "version": "0.51.1", + "resolved": "https://registry.npmjs.org/@daily-co/daily-js/-/daily-js-0.51.1.tgz", + "integrity": "sha512-90FbOlQhOgZQ903gji6WcKIZbnxTSBubQxp99ZJcmQXhbfRubn9b3Rp9kpen9CMVjw0XazTTATs2zI3xiP2OYw==", "dependencies": { "@babel/runtime": "^7.12.5", "bowser": "^2.8.1", @@ -467,9 +467,9 @@ } }, "node_modules/@daily-co/daily-react": { - "version": "0.11.5", - "resolved": "https://registry.npmjs.org/@daily-co/daily-react/-/daily-react-0.11.5.tgz", - "integrity": "sha512-0OZ3Bi8KPDXCajFGI89OzWajrG4VfGX/NfzEgAKHbB9B6RrO/sTqwZD6lnfCG6W1KEkfH7kuZHBZJFY0aHSOUw==", + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/@daily-co/daily-react/-/daily-react-0.12.0.tgz", + "integrity": "sha512-PUH1hm8WkEmzqfEKegLePL+gPS7A8pY4rmoTNq0SwsmPWtpNwdZNRjNa0BaU5RpEjyZeROle929K4sxWz/nwoA==", "dependencies": { "fast-deep-equal": "^3.1.3", "lodash.throttle": "^4.1.1" diff --git a/package.json b/package.json index 238ee68..9c361f4 100644 --- a/package.json +++ b/package.json @@ -7,8 +7,8 @@ "npm": ">=8.0.0" }, "dependencies": { - "@daily-co/daily-js": "0.49.1", - "@daily-co/daily-react": "0.11.5", + "@daily-co/daily-js": "0.51.1", + "@daily-co/daily-react": "0.12.0", "@types/node": "^18.11.18", "@types/react": "^18.0.26", "@types/react-dom": "^18.0.10", From 030497cb3f5450ee482ef9f848df712757d01aa4 Mon Sep 17 00:00:00 2001 From: James Hush Date: Fri, 22 Sep 2023 14:43:01 +0800 Subject: [PATCH 4/4] Add participant info component --- src/App.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/App.tsx b/src/App.tsx index 06381c1..dc0961d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -19,6 +19,7 @@ import { useInputSettings, useNetwork, useParticipantProperty, + useParticipant, } from "@daily-co/daily-react"; import "./styles.css"; @@ -27,6 +28,20 @@ console.info("Daily version: %s", Daily.version()); console.info("Daily supported Browser:"); console.dir(Daily.supportedBrowser()); +function ParticipantInfo({ participantId }: { participantId: string }) { + const participant = useParticipant(participantId); + + if (!participant) return null; + + return ( +
    +
    Participant: {participantId}
    +
    Audio: {participant.tracks.audio.subscribed ? "true" : "false"}
    +
    Video: {participant.tracks.video.subscribed ? "true" : "false"}
    +
    + ); +} + export default function App() { const callObject = useDaily(); // @ts-expect-error add callObject to window for debugging @@ -441,6 +456,7 @@ export default function App() { > Stage +
    • ))}