address suggestions

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(
     () => (
       <>

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) => (

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(
     () => (
       <>

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

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>

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

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(() => {