From 43f69601f29008340f45cd334a267102c637ab07 Mon Sep 17 00:00:00 2001
From: harshithpabbati <pabbatiharshith@gmail.com>
Date: Fri, 8 Apr 2022 13:15:25 +0530
Subject: [PATCH] address suggestions

---
 custom/basic-call/components/App/App.js       |  2 +-
 .../basic-call/components/Call/VideoGrid.js   |  2 +-
 custom/fitness-demo/components/App/App.js     |  2 +-
 custom/live-streaming/README.md               |  8 +++++++-
 .../components/LiveStreamingModal.js          | 19 +++++++++++++++----
 .../shared/components/HairCheck/HairCheck.js  |  2 +-
 .../shared/contexts/LiveStreamingProvider.js  |  2 ++
 7 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/custom/basic-call/components/App/App.js b/custom/basic-call/components/App/App.js
index 81b43d9..f648f33 100644
--- a/custom/basic-call/components/App/App.js
+++ b/custom/basic-call/components/App/App.js
@@ -17,7 +17,7 @@ export const App = ({ customComponentForState }) => {
     ...customComponentForState,
   });
 
-  // Memoize children to avoid unnecassary renders from HOC
+  // Memoize children to avoid unnecessary renders from HOC
   return useMemo(
     () => (
       <>
diff --git a/custom/basic-call/components/Call/VideoGrid.js b/custom/basic-call/components/Call/VideoGrid.js
index e71ff6d..a8ba799 100644
--- a/custom/basic-call/components/Call/VideoGrid.js
+++ b/custom/basic-call/components/Call/VideoGrid.js
@@ -89,7 +89,7 @@ export const VideoGrid = React.memo(
       return bestLayout;
     }, [dimensions, participants]);
 
-    // Memoize our tile list to avoid unnecassary re-renders
+    // Memoize our tile list to avoid unnecessary re-renders
     const tiles = useDeepCompareMemo(
       () =>
         participants.map((p) => (
diff --git a/custom/fitness-demo/components/App/App.js b/custom/fitness-demo/components/App/App.js
index 8bf5709..4f978b9 100644
--- a/custom/fitness-demo/components/App/App.js
+++ b/custom/fitness-demo/components/App/App.js
@@ -21,7 +21,7 @@ export const App = ({ customComponentForState }) => {
     ...customComponentForState,
   });
 
-  // Memoize children to avoid unnecassary renders from HOC
+  // Memoize children to avoid unnecessary renders from HOC
   return useMemo(
     () => (
       <>
diff --git a/custom/live-streaming/README.md b/custom/live-streaming/README.md
index e8da111..86031e7 100644
--- a/custom/live-streaming/README.md
+++ b/custom/live-streaming/README.md
@@ -18,7 +18,13 @@
 
 Please note: this demo is not currently mobile optimised
 
-### Getting started
+## Pre-requisites
+
+To use this demo, you will need to create a [Daily account](https://dashboard.daily.co/signup) and a [Daily room](https://dashboard.daily.co/rooms/create).
+
+You will also need to enter an RTMP URL in the demo UI to start a live stream. To learn more about where to find this value, please read Daily's [live streaming guide](https://docs.daily.co/guides/paid-features/live-streaming-with-daily). You may also find the [live streaming with AWS's IVS tutorial](https://www.daily.co/blog/live-stream-daily-calls-with-only-3-second-latency/) helpful.
+
+## Getting started
 
 ```
 # set both DAILY_API_KEY and DAILY_DOMAIN
diff --git a/custom/live-streaming/components/LiveStreamingModal.js b/custom/live-streaming/components/LiveStreamingModal.js
index f4cdee1..4047f0a 100644
--- a/custom/live-streaming/components/LiveStreamingModal.js
+++ b/custom/live-streaming/components/LiveStreamingModal.js
@@ -57,6 +57,11 @@ export const LiveStreamingModal = () => {
     stopLiveStreaming();
   }
 
+  const handleRMTPURLChange = (e) => setRtmpUrl(e.target.value);
+  const handleSelectLayoutInputChange = (e) => setLayoutType(e.target.value);
+  const handleSelectParticipantInputChange = (e) => setParticipantId(e.target.value);
+  const handleSelectMaxCamsInputChange = (e) => setMaxCams(e.target.valueAsNumber);
+
   return (
     <Modal
       title="Live stream"
@@ -93,7 +98,7 @@ export const LiveStreamingModal = () => {
       <CardBody>
         <Field label="Layout">
           <SelectInput
-            onChange={(e) => setLayoutType(e.target.value)}
+            onChange={handleSelectLayoutInputChange}
             value={layoutType}
           >
             {LAYOUTS.map((l) => (
@@ -107,7 +112,7 @@ export const LiveStreamingModal = () => {
         {layoutType === 'default' && (
           <Field label="Additional cameras">
             <SelectInput
-              onChange={(e) => setMaxCams(Number(e.target.value))}
+              onChange={handleSelectMaxCamsInputChange}
               value={maxCams}
             >
               <option value={9}>9 cameras</option>
@@ -126,7 +131,7 @@ export const LiveStreamingModal = () => {
         {layoutType === 'single-participant' && (
           <Field label="Select participant">
             <SelectInput
-              onChange={(e) => setParticipantId(e.target.value)}
+              onChange={handleSelectParticipantInputChange}
               value={participantId}
             >
               <option value={0} disabled>
@@ -146,8 +151,14 @@ export const LiveStreamingModal = () => {
             type="text"
             placeholder="RTMP URL"
             required
-            onChange={(e) => setRtmpUrl(e.target.value)}
+            onChange={handleRMTPURLChange}
           />
+          <a
+            className="learn-more"
+            href="https://docs.daily.co/guides/paid-features/live-streaming-with-daily"
+          >
+            Want to learn more about RTMP url?
+          </a>
         </Field>
       </CardBody>
     </Modal>
diff --git a/custom/shared/components/HairCheck/HairCheck.js b/custom/shared/components/HairCheck/HairCheck.js
index 4cf0659..8899c34 100644
--- a/custom/shared/components/HairCheck/HairCheck.js
+++ b/custom/shared/components/HairCheck/HairCheck.js
@@ -87,7 +87,7 @@ export const HairCheck = () => {
     }
   };
 
-  // Memoize the to prevent unnecassary re-renders
+  // Memoize the to prevent unnecessary re-renders
   const tileMemo = useDeepCompareMemo(
     () => (
       <Tile
diff --git a/custom/shared/contexts/LiveStreamingProvider.js b/custom/shared/contexts/LiveStreamingProvider.js
index 8e877a9..b5aba2a 100644
--- a/custom/shared/contexts/LiveStreamingProvider.js
+++ b/custom/shared/contexts/LiveStreamingProvider.js
@@ -10,6 +10,8 @@ import { useUIState } from './UIStateProvider';
 export const LiveStreamingContext = createContext();
 
 export const LiveStreamingProvider = ({ children }) => {
+  // setCustomCapsule allows us to set the recording capsule on the header
+  // to indicate that the recording is going on.
   const { setCustomCapsule } = useUIState();
 
   const handleStreamStarted = useCallback(() => {