Merge pull request #37 from daily-demos/custom/september-updates

Fixed bug in pagination demo where tracks were not subscribing

custom/basic-call/components/Call/Room.js

@@ -5,13 +5,11 @@ import { Container } from './Container';
 import { Header } from './Header';
 import { VideoGrid } from './VideoGrid';
 
-export function Room() {
+export function Room({ children }) {
   return (
     <Container>
       <Header />
-      <VideoContainer>
-        <VideoGrid />
-      </VideoContainer>
+      <VideoContainer>{children ? children : <VideoGrid />}</VideoContainer>
     </Container>
   );
 }

custom/pagination/components/App.js

@@ -7,7 +7,11 @@ import PaginatedVideoGrid from './PaginatedVideoGrid';
 export const AppWithPagination = () => (
   <App
     customComponentForState={{
-      room: <Room MainComponent={PaginatedVideoGrid} />,
+      room: (
+        <Room>
+          <PaginatedVideoGrid />
+        </Room>
+      ),
     }}
   />
 );

custom/pagination/components/PaginatedVideoGrid.js

@@ -5,7 +5,7 @@ import React, {
   useEffect,
   useState,
 } from 'react';
-import { Button } from '@custom/shared/components/Button';
+import Button from '@custom/shared/components/Button';
 import Tile from '@custom/shared/components/Tile';
 import {
   DEFAULT_ASPECT_RATIO,

custom/pagination/env.example

@@ -7,6 +7,5 @@ DAILY_API_KEY=
 # Daily REST API endpoint
 DAILY_REST_DOMAIN=https://api.daily.co/v1
 
-
 # Enable manual track subscriptions
 MANUAL_TRACK_SUBS=1

custom/shared/contexts/TracksProvider.js

@@ -9,8 +9,8 @@ import React, {
   useReducer,
 } from 'react';
 
+import deepEqual from 'fast-deep-equal';
 import PropTypes from 'prop-types';
-
 import { useDeepCompareEffect } from 'use-deep-compare';
 import { sortByKey } from '../lib/sortByKey';
 import { useCallState } from './CallProvider';
@@ -228,7 +228,7 @@ export const TracksProvider = ({ children }) => {
     const handleParticipantUpdated = ({ participant }) => {
       const hasAudioChanged =
         // State changed
-        participant.tracks.audio.state !==
+        participant.tracks.audio?.state !==
           state.audioTracks?.[participant.user_id]?.state ||
         // Off/blocked reason changed
         !deepEqual(
@@ -237,13 +237,13 @@ export const TracksProvider = ({ children }) => {
             ...(participant.tracks.audio?.off ?? {}),
           },
           {
-            ...(state.audioTracks?.[participant.user_id].blocked ?? {}),
-            ...(state.audioTracks?.[participant.user_id].off ?? {}),
+            ...(state.audioTracks?.[participant.user_id]?.blocked ?? {}),
+            ...(state.audioTracks?.[participant.user_id]?.off ?? {}),
           }
         );
       const hasVideoChanged =
         // State changed
-        participant.tracks.video.state !==
+        participant.tracks.video?.state !==
           state.videoTracks?.[participant.user_id]?.state ||
         // Off/blocked reason changed
         !deepEqual(
@@ -252,10 +252,11 @@ export const TracksProvider = ({ children }) => {
             ...(participant.tracks.video?.off ?? {}),
           },
           {
-            ...(state.videoTracks?.[participant.user_id].blocked ?? {}),
-            ...(state.videoTracks?.[participant.user_id].off ?? {}),
+            ...(state.videoTracks?.[participant.user_id]?.blocked ?? {}),
+            ...(state.videoTracks?.[participant.user_id]?.off ?? {}),
           }
         );
+
       if (hasAudioChanged) {
         // Update audio track state
         dispatch({
@@ -263,6 +264,7 @@ export const TracksProvider = ({ children }) => {
           participant,
         });
       }
+
       if (hasVideoChanged) {
         // Update video track state
         dispatch({

custom/shared/contexts/tracksState.js

@@ -96,7 +96,7 @@ export function tracksReducer(prevState, action) {
       };
     }
 
-    case TRACK_VIDEO_UPDATED: {
+    case TRACK_AUDIO_UPDATED: {
       const id = getId(action.participant);
       if (action.participant?.local) {
         // Ignore local audio from mic and screen share
@@ -112,7 +112,7 @@ export function tracksReducer(prevState, action) {
       };
     }
 
-    case TRACK_AUDIO_UPDATED: {
+    case TRACK_VIDEO_UPDATED: {
       const id = getId(action.participant);
       const newVideoTracks = {
         ...prevState.videoTracks,

custom/shared/contexts/useDevices.js

@@ -173,7 +173,6 @@ export const useDevices = (callObject) => {
     callObject.on('joined-meeting', handleJoinedMeeting);
     callObject.on('participant-updated', handleParticipantUpdated);
     return () => {
-      console.log('UNMOUNT');
       clearTimeout(pendingAccessTimeout);
       callObject.off('joining-meeting', handleJoiningMeeting);
       callObject.off('joined-meeting', handleJoinedMeeting);

custom/shared/hooks/useCamSubscriptions.js

@@ -9,7 +9,7 @@ import { useTracks } from '../contexts/TracksProvider';
  */
 export const useCamSubscriptions = (
   subscribedIds,
-  stagedIds,
+  stagedIds = [],
   throttle = 50
 ) => {
   const { updateCamSubscriptions } = useTracks();

custom/shared/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "main": "index.js",
   "dependencies": {
-    "@daily-co/daily-js": "^0.19.0",
+    "@daily-co/daily-js": "0.19.0",
     "bowser": "^2.11.0",
     "classnames": "^2.3.1",
     "debounce": "^1.2.1",

package.json

@@ -15,9 +15,9 @@
     "babel-eslint": "^10.1.0",
     "babel-plugin-inline-react-svg": "^2.0.1",
     "eslint": "^7.25.0",
+    "eslint-config-next": "^11.0.1",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-config-next": "^11.0.1"
+    "eslint-plugin-prettier": "^3.4.0"
   }
 }

yarn.lock

@@ -176,10 +176,8 @@
     "@babel/helper-validator-identifier" "^7.12.11"
     to-fast-properties "^2.0.0"
 
-"@daily-co/daily-js@^0.19.0":
-  version "0.19.0"
-  resolved "https://registry.yarnpkg.com/@daily-co/daily-js/-/daily-js-0.19.0.tgz#86ff62156c7ec25a1c49df5ca8edb3b7c078fb45"
-  integrity sha512-0Ixg80NUeHQX6Z044ZhKIYd0ppo5kK8SmEWbrmsjWAB01zaYQTshA+dY4HgkJfc6pG59LzZ8maziwpNEPLyliA==
+"@daily-co/daily-js@file:../daily-js":
+  version "0.20.0"
   dependencies:
     "@babel/runtime" "^7.12.5"
     bowser "^2.8.1"