page button styles

dailyjs/basic-call/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+.next
+out
+
+# production
+build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

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

@@ -54,7 +54,6 @@ export const Room = ({ MainComponent = VideoGrid }) => {
           overflow: hidden;
           min-height: 0px;
           height: 100%;
-          padding: var(--spacing-xxxs);
           box-sizing: border-box;
         }
       `}</style>

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

@@ -19,7 +19,7 @@ import { useDeepCompareMemo } from 'use-deep-compare';
 export const VideoGrid = React.memo(
   () => {
     const containerRef = useRef();
-    const { participants } = useParticipants();
+    const { participants, allParticipants } = useParticipants();
     const [dimensions, setDimensions] = useState({
       width: 1,
       height: 1,
@@ -106,7 +106,7 @@ export const VideoGrid = React.memo(
 
     // Optimise performance by reducing video quality
     // when more participants join (if in SFU mode)
-    usePreferredLayer();
+    usePreferredLayer(allParticipants);
 
     if (!participants.length) {
       return null;

dailyjs/pagination/README.md

@@ -25,7 +25,7 @@ yarn
 yarn workspace @dailyjs/live-streaming dev
 ```
 
-Note that this example uses a env `MANUAL_TRACK_SUBS=1` which will disable [automatic track management](https://docs.daily.co/reference#%EF%B8%8F-setsubscribetotracksautomatically).
+Note: this example uses an additional env `MANUAL_TRACK_SUBS=1` that will disable [automatic track management](https://docs.daily.co/reference#%EF%B8%8F-setsubscribetotracksautomatically).
 
 ## How does this example work?
 

dailyjs/pagination/components/PaginatedVideoGrid/PaginatedVideoGrid.js

@@ -1,5 +1,3 @@
-/* global rtcpeers */
-
 import React, {
   useCallback,
   useMemo,
@@ -7,16 +5,19 @@ import React, {
   useRef,
   useState,
 } from 'react';
-
+import { Button } from '@dailyjs/shared/components/Button';
 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 { useActiveSpeaker } from '@dailyjs/shared/hooks/useActiveSpeaker';
+import usePreferredLayer from '@dailyjs/shared/hooks/usePreferredLayer';
+import { ReactComponent as IconArrow } from '@dailyjs/shared/icons/raquo-md.svg';
 import sortByKey from '@dailyjs/shared/lib/sortByKey';
-
+import { debounce } from 'debounce';
 import { useDeepCompareMemo } from 'use-deep-compare';
 
+// --- Constants
 const MIN_TILE_WIDTH = 280;
 const MAX_TILES_PER_PAGE = 12;
 
@@ -31,11 +32,13 @@ export const PaginatedVideoGrid = () => {
 
   const { updateCamSubscriptions } = useTracks();
 
+  // Memoized participant count (does not include screen shares)
   const displayableParticipantCount = useMemo(
     () => participantCount,
     [participantCount]
   );
 
+  // Grid size (dictated by screen size)
   const [dimensions, setDimensions] = useState({
     width: 1,
     height: 1,
@@ -69,30 +72,33 @@ export const PaginatedVideoGrid = () => {
     };
   }, []);
 
+  // Memoized reference to the max columns and rows possible given screen size
   const [maxColumns, maxRows] = useMemo(() => {
     const { width, height } = dimensions;
-
     const columns = Math.max(1, Math.floor(width / MIN_TILE_WIDTH));
     const widthPerTile = width / columns;
     const rows = Math.max(1, Math.floor(height / (widthPerTile * (9 / 16))));
-
     return [columns, rows];
   }, [dimensions]);
 
+  // Memoized count of how many tiles can we show per page
   const pageSize = useMemo(
     () => Math.min(maxColumns * maxRows, maxTilesPerPage),
     [maxColumns, maxRows, maxTilesPerPage]
   );
 
+  // Calc and set the total number of pages as participant count mutates
   useEffect(() => {
     setPages(Math.ceil(displayableParticipantCount / pageSize));
   }, [pageSize, displayableParticipantCount]);
 
+  // Make sure we never see a blank page (if we're on the last page and people leave)
   useEffect(() => {
     if (page <= pages) return;
     setPage(pages);
   }, [page, pages]);
 
+  // Brutishly calculate the dimensions of each tile given the size of the grid
   const [tileWidth, tileHeight] = useMemo(() => {
     const { width, height } = dimensions;
     const n = Math.min(pageSize, displayableParticipantCount);
@@ -119,6 +125,7 @@ export const PaginatedVideoGrid = () => {
     );
   }, [dimensions, pageSize, displayableParticipantCount]);
 
+  // Memoized array of participants on the current page (those we can see)
   const visibleParticipants = useMemo(
     () =>
       participants.length - page * pageSize > 0
@@ -129,6 +136,8 @@ export const PaginatedVideoGrid = () => {
 
   /**
    * Play / pause tracks based on pagination
+   * Note: we pause adjacent page tracks and unsubscribe from everything else
+   * Please refer to project README for more information
    */
   const camSubscriptions = useMemo(() => {
     const maxSubs = 3 * pageSize;
@@ -169,40 +178,26 @@ export const PaginatedVideoGrid = () => {
     };
   }, [page, pageSize, participants, visibleParticipants]);
 
+  // Update subscriptions when array of subscribed or paused participants mutates
+  const debouncedUpdate = useCallback(
+    (subIds, pausedIds) =>
+      debounce(() => updateCamSubscriptions(subIds, pausedIds), 90),
+    [updateCamSubscriptions]
+  );
+
   useEffect(() => {
-    updateCamSubscriptions(
+    debouncedUpdate(
       camSubscriptions?.subscribedIds,
       camSubscriptions?.pausedIds
     );
   }, [
     camSubscriptions?.subscribedIds,
     camSubscriptions?.pausedIds,
-    updateCamSubscriptions,
+    debouncedUpdate,
   ]);
 
-  /**
+  // Set bandwidth layer based on amount of visible participants
-   * Set bandwidth layer based on amount of visible participants
+  usePreferredLayer(visibleParticipants);
-   */
-  useEffect(() => {
-    if (typeof rtcpeers === 'undefined' || rtcpeers?.getCurrentType() !== 'sfu')
-      return;
-
-    const sfu = rtcpeers.soup;
-    const count = visibleParticipants.length;
-
-    visibleParticipants.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);
-      }
-    });
-  }, [visibleParticipants]);
 
   /**
    * Handle position updates based on active speaker events
@@ -268,17 +263,23 @@ export const PaginatedVideoGrid = () => {
 
   return (
     <div ref={gridRef} className="grid">
-      {pages > 1 && page > 1 && (
+      <Button
-        <button type="button" onClick={handlePrevClick}>
+        className="page-button prev"
-          &laquo;
+        disabled={!(pages > 1 && page > 1)}
-        </button>
+        type="button"
-      )}
+        onClick={handlePrevClick}
+      >
+        <IconArrow />
+      </Button>
       <div className="tiles">{tiles}</div>
-      {pages > 1 && page < pages && (
+      <Button
-        <button type="button" onClick={handleNextClick}>
+        className="page-button next"
-          &raquo;
+        disabled={!(pages > 1 && page < pages)}
-        </button>
+        type="button"
-      )}
+        onClick={handleNextClick}
+      >
+        <IconArrow />
+      </Button>
       <style jsx>{`
         .grid {
           align-items: center;
@@ -292,12 +293,32 @@ export const PaginatedVideoGrid = () => {
           align-items: center;
           display: flex;
           flex-flow: row wrap;
+          gap: 1px;
           max-height: 100%;
           justify-content: center;
           margin: auto;
           overflow: hidden;
           width: 100%;
         }
+
+        .grid :global(.page-button) {
+          border-radius: var(--radius-sm) 0 0 var(--radius-sm);
+          height: 84px;
+          padding: 0px var(--spacing-xxxs) 0px var(--spacing-xxs);
+          background-color: var(--blue-default);
+          color: white;
+          border-right: 0px;
+        }
+
+        .grid :global(.page-button):disabled {
+          color: var(--blue-dark);
+          background-color: var(--blue-light);
+          border-color: var(--blue-light);
+        }
+
+        .grid :global(.page-button.prev) {
+          transform: scaleX(-1);
+        }
       `}</style>
     </div>
   );

dailyjs/pagination/components/Tray/Tray.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { TrayButton } from '@dailyjs/shared/components/Tray';
+import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
+import { ReactComponent as IconAdd } from '@dailyjs/shared/icons/add-md.svg';
+
+export const Tray = () => {
+  const { callObject } = useCallState();
+
+  return (
+    <>
+      <TrayButton
+        label="Add Fake"
+        onClick={() => {
+          callObject.addFakeParticipant();
+        }}
+      >
+        <IconAdd />
+      </TrayButton>
+    </>
+  );
+};
+
+export default Tray;

dailyjs/pagination/components/Tray/index.js

@@ -0,0 +1 @@
+export { Tray as default } from './Tray';

dailyjs/pagination/pages/_app.js

@@ -3,6 +3,9 @@ import React from 'react';
 import App from '@dailyjs/basic-call/pages/_app';
 import AppWithPagination from '../components/App';
 
+import Tray from '../components/Tray';
+
+App.customTrayComponent = <Tray />;
 App.customAppComponent = <AppWithPagination />;
 
 export default App;

dailyjs/shared/hooks/usePreferredLayer.js

@@ -1,7 +1,6 @@
 /* global rtcpeers */
 
 import { useEffect } from 'react';
-import { useParticipants } from '../contexts/ParticipantsProvider';
 
 /**
  * This hook will switch between one of the 3 simulcast layers
@@ -15,9 +14,7 @@ import { useParticipants } from '../contexts/ParticipantsProvider';
  *
  * Note: this will have no effect when not in SFU mode
  */
-export const usePreferredLayer = () => {
+export const usePreferredLayer = (participants) => {
-  const { allParticipants } = useParticipants();
-
   /**
    * Set bandwidth layer based on amount of visible participants
    */
@@ -26,9 +23,9 @@ export const usePreferredLayer = () => {
       return;
 
     const sfu = rtcpeers.soup;
-    const count = allParticipants.length;
+    const count = participants.length;
 
-    allParticipants.forEach(({ id }) => {
+    participants.forEach(({ id }) => {
       if (count < 5) {
         // High quality video for calls with < 5 people per page
         sfu.setPreferredLayerForTrack(id, 'cam-video', 2);
@@ -40,7 +37,7 @@ export const usePreferredLayer = () => {
         sfu.setPreferredLayerForTrack(id, 'cam-video', 0);
       }
     });
-  }, [allParticipants]);
+  }, [participants]);
 };
 
 export default usePreferredLayer;

dailyjs/shared/icons/raquo-md.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.00024 23.414L17.7072 12.707C18.0982 12.316 18.0982 11.684 17.7072 11.293L7.00024 0.586L5.58624 2L15.5862 12L5.58624 22L7.00024 23.414Z" fill="currentColor"/>
+</svg>