refactor send settings & receive settings

Author: harshithpabbati

components/Listeners/ReceiveSettings/CPULoadListener.tsx

@@ -0,0 +1,51 @@
+import { useCallback } from 'react';
+import { useVideoLayer } from '@/states/videoLayerState';
+import { DailyEventObject } from '@daily-co/daily-js';
+import { useThrottledDailyEvent } from '@daily-co/daily-react';
+
+import { VIDEO_QUALITY_LAYERS } from '@/types/videoQualityLayers';
+
+export function CPULoadListener() {
+  const [, setVideoLayer] = useVideoLayer();
+
+  useThrottledDailyEvent(
+    'cpu-load-change',
+    useCallback(
+      (events: DailyEventObject<'cpu-load-change'>[]) => {
+        events.forEach((ev) => {
+          const { cpuLoadState, cpuLoadStateReason } = ev;
+          switch (cpuLoadState) {
+            case 'high':
+              setVideoLayer((prev) => {
+                return {
+                  ...prev,
+                  receive: {
+                    ...prev.receive,
+                    layerBasedOnCPU:
+                      cpuLoadStateReason === 'decode'
+                        ? VIDEO_QUALITY_LAYERS.LOW
+                        : VIDEO_QUALITY_LAYERS.MEDIUM,
+                  },
+                };
+              });
+              break;
+            case 'low':
+              setVideoLayer((prev) => {
+                return {
+                  ...prev,
+                  receive: {
+                    ...prev.receive,
+                    layerBasedOnCPU: VIDEO_QUALITY_LAYERS.HIGH,
+                  },
+                };
+              });
+              break;
+          }
+        });
+      },
+      [setVideoLayer],
+    ),
+  );
+
+  return null;
+}

components/Listeners/ReceiveSettings/NetworkThresholdListener.tsx

@@ -0,0 +1,59 @@
+import { useCallback } from 'react';
+import { useVideoLayer } from '@/states/videoLayerState';
+import { DailyEventObject } from '@daily-co/daily-js';
+import { useThrottledDailyEvent } from '@daily-co/daily-react';
+
+import { VIDEO_QUALITY_LAYERS } from '@/types/videoQualityLayers';
+
+export function NetworkThresholdListener() {
+  const [, setVideoLayer] = useVideoLayer();
+
+  useThrottledDailyEvent(
+    'network-quality-change',
+    useCallback(
+      (events: DailyEventObject<'network-quality-change'>[]) => {
+        events.forEach((ev) => {
+          const { threshold } = ev;
+          switch (threshold) {
+            case 'good':
+              setVideoLayer((prev) => {
+                return {
+                  ...prev,
+                  receive: {
+                    ...prev.receive,
+                    layerBasedOnNetwork: VIDEO_QUALITY_LAYERS.HIGH,
+                  },
+                };
+              });
+              break;
+            case 'low':
+              setVideoLayer((prev) => {
+                return {
+                  ...prev,
+                  receive: {
+                    ...prev.receive,
+                    layerBasedOnNetwork: VIDEO_QUALITY_LAYERS.MEDIUM,
+                  },
+                };
+              });
+              break;
+            case 'very-low':
+              setVideoLayer((prev) => {
+                return {
+                  ...prev,
+                  receive: {
+                    ...prev.receive,
+                    layerBasedOnNetwork: VIDEO_QUALITY_LAYERS.LOW,
+                  },
+                };
+              });
+              break;
+          }
+        });
+      },
+      [setVideoLayer],
+    ),
+  );
+
+  return null;
+}

components/Listeners/ReceiveSettings/ParticipantsListener.tsx

@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+import { useVideoLayer } from '@/states/videoLayerState';
+
+import { VIDEO_QUALITY_LAYERS } from '@/types/videoQualityLayers';
+import { useStage } from '@/hooks/useStage';
+
+export function ParticipantsListener() {
+  const { participantIds } = useStage();
+  const [, setVideoLayer] = useVideoLayer();
+
+  useEffect(() => {
+    const participantCount = participantIds.length;
+    const participantCountLayer =
+      participantCount < 5
+        ? VIDEO_QUALITY_LAYERS.HIGH
+        : participantCount < 10
+        ? VIDEO_QUALITY_LAYERS.MEDIUM
+        : VIDEO_QUALITY_LAYERS.LOW;
+
+    setVideoLayer((prev) => {
+      return {
+        ...prev,
+        receive: {
+          ...prev.receive,
+          layerBasedOnParticipantCount: participantCountLayer,
+        },
+      };
+    });
+  }, [participantIds, setVideoLayer]);
+
+  return null;
+}

components/Listeners/ReceiveSettings/index.tsx

@@ -0,0 +1,76 @@
+import { useCallback, useEffect } from 'react';
+import { useVideoLayer } from '@/states/videoLayerState';
+import { DailyReceiveSettings } from '@daily-co/daily-js';
+import { useDaily, useLocalSessionId } from '@daily-co/daily-react';
+import { dequal } from 'dequal';
+
+import { useStage } from '@/hooks/useStage';
+import { CPULoadListener } from '@/components/Listeners/ReceiveSettings/CPULoadListener';
+import { NetworkThresholdListener } from '@/components/Listeners/ReceiveSettings/NetworkThresholdListener';
+import { ParticipantsListener } from '@/components/Listeners/ReceiveSettings/ParticipantsListener';
+
+export function ReceiveSettingsListener() {
+  const daily = useDaily();
+  const localSessionId = useLocalSessionId();
+  const { participantIds, waitingParticipantIds } = useStage();
+
+  const [{ receive }] = useVideoLayer();
+
+  const updateReceiveSettings = useCallback(async () => {
+    if (!daily || daily.meetingState() !== 'joined-meeting') return;
+
+    const updatedReceiveSettings: DailyReceiveSettings = {};
+    const receiveSettings = await daily.getReceiveSettings();
+
+    const layer = Math.min(
+      receive.layerBasedOnCPU,
+      receive.layerBasedOnNetwork,
+      receive.layerBasedOnParticipantCount,
+    );
+
+    const updateSettingsForParticipant = (
+      participantId: string,
+      layer: number,
+    ) => {
+      if (participantId === localSessionId) return;
+      updatedReceiveSettings[participantId] = { video: { layer } };
+    };
+
+    participantIds.forEach((participantId) =>
+      updateSettingsForParticipant(participantId, layer),
+    );
+
+    waitingParticipantIds.forEach((participantId) =>
+      updateSettingsForParticipant(participantId, 0),
+    );
+
+    if (
+      Object.keys(updatedReceiveSettings).length === 0 ||
+      dequal(receiveSettings, updatedReceiveSettings)
+    ) {
+      return;
+    }
+
+    await daily.updateReceiveSettings(updatedReceiveSettings);
+  }, [
+    daily,
+    localSessionId,
+    participantIds,
+    receive.layerBasedOnCPU,
+    receive.layerBasedOnNetwork,
+    receive.layerBasedOnParticipantCount,
+    waitingParticipantIds,
+  ]);
+
+  useEffect(() => {
+    updateReceiveSettings();
+  }, [updateReceiveSettings]);
+
+  return (
+    <>
+      <CPULoadListener />
+      <NetworkThresholdListener />
+      <ParticipantsListener />
+    </>
+  );
+}