From b1c65e80712ccace812c450271f7d050335fb6d4 Mon Sep 17 00:00:00 2001 From: Jon Date: Tue, 12 Oct 2021 16:52:16 +0100 Subject: [PATCH] fixed pagination demo --- custom/basic-call/components/Call/Room.js | 6 ++---- custom/pagination/components/App.js | 6 +++++- .../pagination/components/PaginatedVideoGrid.js | 2 +- custom/pagination/env.example | 1 - custom/shared/contexts/TracksProvider.js | 16 +++++++++------- custom/shared/contexts/tracksState.js | 4 ++-- custom/shared/contexts/useDevices.js | 1 - custom/shared/hooks/useCamSubscriptions.js | 2 +- custom/shared/package.json | 2 +- package.json | 4 ++-- yarn.lock | 6 ++---- 11 files changed, 25 insertions(+), 25 deletions(-) diff --git a/custom/basic-call/components/Call/Room.js b/custom/basic-call/components/Call/Room.js index aa4cfe6..0f5f023 100644 --- a/custom/basic-call/components/Call/Room.js +++ b/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 (
- - - + {children ? children : } ); } diff --git a/custom/pagination/components/App.js b/custom/pagination/components/App.js index 5c68179..99b7783 100644 --- a/custom/pagination/components/App.js +++ b/custom/pagination/components/App.js @@ -7,7 +7,11 @@ import PaginatedVideoGrid from './PaginatedVideoGrid'; export const AppWithPagination = () => ( , + room: ( + + + + ), }} /> ); diff --git a/custom/pagination/components/PaginatedVideoGrid.js b/custom/pagination/components/PaginatedVideoGrid.js index 20b5cbe..62bb11a 100644 --- a/custom/pagination/components/PaginatedVideoGrid.js +++ b/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, diff --git a/custom/pagination/env.example b/custom/pagination/env.example index 62eaf89..697604a 100644 --- a/custom/pagination/env.example +++ b/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 \ No newline at end of file diff --git a/custom/shared/contexts/TracksProvider.js b/custom/shared/contexts/TracksProvider.js index c92067c..f61ffea 100644 --- a/custom/shared/contexts/TracksProvider.js +++ b/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({ diff --git a/custom/shared/contexts/tracksState.js b/custom/shared/contexts/tracksState.js index e6bdfc2..60b4383 100644 --- a/custom/shared/contexts/tracksState.js +++ b/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, diff --git a/custom/shared/contexts/useDevices.js b/custom/shared/contexts/useDevices.js index fb4ec20..b2e677e 100644 --- a/custom/shared/contexts/useDevices.js +++ b/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); diff --git a/custom/shared/hooks/useCamSubscriptions.js b/custom/shared/hooks/useCamSubscriptions.js index 51bfd61..0cee45a 100644 --- a/custom/shared/hooks/useCamSubscriptions.js +++ b/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(); diff --git a/custom/shared/package.json b/custom/shared/package.json index d4d542b..b0acf8a 100644 --- a/custom/shared/package.json +++ b/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", diff --git a/package.json b/package.json index 820025e..4fe15d0 100644 --- a/package.json +++ b/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" } } diff --git a/yarn.lock b/yarn.lock index 084aa3f..eefbaab 100644 --- a/yarn.lock +++ b/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"