removed track resume from videogrid

dailyjs/basic-call/components/VideoGrid/VideoGrid.js

@@ -2,14 +2,13 @@ import React, { useState, useMemo, useEffect, useRef } from 'react';
 import Tile from '@dailyjs/shared/components/Tile';
 import { DEFAULT_ASPECT_RATIO } from '@dailyjs/shared/constants';
 import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider';
-import { useTracks } from '@dailyjs/shared/contexts/TracksProvider';
+import usePreferredLayer from '@dailyjs/shared/hooks/usePreferredLayer';
 import { useDeepCompareMemo } from 'use-deep-compare';
 
 export const VideoGrid = React.memo(
   () => {
     const containerRef = useRef();
     const { allParticipants } = useParticipants();
-    const { resumeVideoTrack } = useTracks();
     const [dimensions, setDimensions] = useState({
       width: 1,
       height: 1,
@@ -91,40 +90,7 @@ export const VideoGrid = React.memo(
       [layout, allParticipants]
     );
 
-    /**
-     * Set bandwidth layer based on amount of visible participants
-     */
-    useEffect(() => {
-      if (
-        typeof rtcpeers === 'undefined' ||
-        // eslint-disable-next-line no-undef
-        rtcpeers?.getCurrentType() !== 'sfu'
-      )
-        return;
-
-      // eslint-disable-next-line no-undef
-      const sfu = rtcpeers.soup;
-      const count = allParticipants.length;
-
-      allParticipants.forEach(({ id }) => {
-        if (count < 5) {
-          // High quality video for calls with < 5 people per page
-          sfu.setPreferredLayerForTrack(id, 'cam-video', 2);
-        } else if (count < 10) {
-          // Medium quality video for calls with < 10 people per page
-          sfu.setPreferredLayerForTrack(id, 'cam-video', 1);
-        } else {
-          // Low quality video for calls with 10 or more people per page
-          sfu.setPreferredLayerForTrack(id, 'cam-video', 0);
-        }
-      });
-    }, [allParticipants]);
-
-    useEffect(() => {
-      allParticipants.forEach(
-        (p) => p.id !== 'local' && resumeVideoTrack(p.id)
-      );
-    }, [allParticipants, resumeVideoTrack]);
+    usePreferredLayer();
 
     if (!allParticipants.length) {
       return null;

dailyjs/basic-call/pages/index.js

@@ -25,6 +25,7 @@ export default function Index({
   predefinedRoom = '',
   forceFetchToken = false,
   forceOwner = false,
+  subscribeToTracksAutomatically = true,
   asides,
   modals,
   customTrayComponent,
@@ -111,7 +112,12 @@ export default function Index({
       modals={modals}
       customTrayComponent={customTrayComponent}
     >
-      <CallProvider domain={domain} room={roomName} token={token}>
+      <CallProvider
+        domain={domain}
+        room={roomName}
+        token={token}
+        subscribeToTracksAutomatically={subscribeToTracksAutomatically}
+      >
         <ParticipantsProvider>
           <TracksProvider>
             <MediaDeviceProvider>
@@ -136,11 +142,11 @@ Index.propTypes = {
   customAppComponent: PropTypes.node,
   forceFetchToken: PropTypes.bool,
   forceOwner: PropTypes.bool,
+  subscribeToTracksAutomatically: PropTypes.bool,
 };
 
 export async function getStaticProps() {
   const defaultProps = getDemoProps();
-
   return {
     props: defaultProps,
   };

dailyjs/shared/components/HairCheck/HairCheck.js

@@ -30,7 +30,7 @@ import { useDeepCompareMemo } from 'use-deep-compare';
  * - Set user name and join call / request access
  */
 export const HairCheck = () => {
-  const { callObject } = useCallState();
+  const { callObject, join } = useCallState();
   const { localParticipant } = useParticipants();
   const { deviceState, camError, micError, isCamMuted, isMicMuted } =
     useMediaDevices();

dailyjs/shared/contexts/CallProvider.js

@@ -27,7 +27,7 @@ export const CallProvider = ({
   domain,
   room,
   token = '',
-  subscribeToTracksAutomatically = false,
+  subscribeToTracksAutomatically = true,
 }) => {
   const [videoQuality, setVideoQuality] = useState(VIDEO_QUALITY_AUTO);
   const [preJoinNonAuthorized, setPreJoinNonAuthorized] = useState(false);

dailyjs/shared/hooks/usePreferredLayer.js

@@ -0,0 +1,46 @@
+/* global rtcpeers */
+
+import { useEffect } from 'react';
+import { useParticipants } from '../contexts/ParticipantsProvider';
+
+/**
+ * This hook will switch between one of the 3 simulcast layers
+ * depending on the number of participants present on the call
+ * to optimise bandwidth / cpu usage
+ *
+ * Note: the API for this feature is currently work in progress
+ * and not documented. Momentarily we are using an internal
+ * method `setPreferredLayerForTrack` found on the global
+ * `rtcpeers` object.
+ *
+ * Note: this will have no effect when not in SFU mode
+ */
+export const usePreferredLayer = () => {
+  const { allParticipants } = useParticipants();
+
+  /**
+   * Set bandwidth layer based on amount of visible participants
+   */
+  useEffect(() => {
+    if (typeof rtcpeers === 'undefined' || rtcpeers?.getCurrentType() !== 'sfu')
+      return;
+
+    const sfu = rtcpeers.soup;
+    const count = allParticipants.length;
+
+    allParticipants.forEach(({ id }) => {
+      if (count < 5) {
+        // High quality video for calls with < 5 people per page
+        sfu.setPreferredLayerForTrack(id, 'cam-video', 2);
+      } else if (count < 10) {
+        // Medium quality video for calls with < 10 people per page
+        sfu.setPreferredLayerForTrack(id, 'cam-video', 1);
+      } else {
+        // Low quality video for calls with 10 or more people per page
+        sfu.setPreferredLayerForTrack(id, 'cam-video', 0);
+      }
+    });
+  }, [allParticipants]);
+};
+
+export default usePreferredLayer;

dailyjs/shared/lib/demoProps.js

@@ -5,5 +5,7 @@ export default function getDemoProps() {
     isConfigured: !!process.env.DAILY_DOMAIN && !!process.env.DAILY_API_KEY,
     // Have we predefined a room to use?
     predefinedRoom: process.env.DAILY_ROOM || '',
+    // Manual or automatic track subscriptions
+    subscribeToTracksAutomatically: !process.env.MANUAL_TRACK_SUBS,
   };
 }