functionally complete

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

@@ -23,10 +23,12 @@ export const Intro = ({
   onJoin,
   title,
   fetching = false,
+  forceFetchToken = false,
+  forceOwner = false,
 }) => {
   const [roomName, setRoomName] = useState();
-  const [owner, setOwner] = useState(false);
-  const [fetchToken, setFetchToken] = useState(false);
+  const [fetchToken, setFetchToken] = useState(forceFetchToken);
+  const [owner, setOwner] = useState(forceOwner);
 
   useEffect(() => {
     setRoomName(room);
@@ -51,10 +53,12 @@ export const Intro = ({
             required
           />
         </Field>
-        <Field label="Fetch meeting token">
-          <BooleanInput onChange={(e) => setFetchToken(e.target.checked)} />
-        </Field>
-        {fetchToken && (
+        {!forceFetchToken && (
+          <Field label="Fetch meeting token">
+            <BooleanInput onChange={(e) => setFetchToken(e.target.checked)} />
+          </Field>
+        )}
+        {fetchToken && !forceOwner && (
           <Field label="Join as owner">
             <BooleanInput onChange={(e) => setOwner(e.target.checked)} />
           </Field>
@@ -79,6 +83,8 @@ Intro.propTypes = {
   domain: PropTypes.string.isRequired,
   onJoin: PropTypes.func.isRequired,
   fetching: PropTypes.bool,
+  forceFetchToken: PropTypes.bool,
+  forceOwner: PropTypes.bool,
 };
 
 export default Intro;

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

@@ -1,8 +1,10 @@
 import React, { useMemo } from 'react';
 import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider';
+import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
 
 export const Header = () => {
   const { participantCount } = useParticipants();
+  const { customCapsule } = useUIState();
 
   return useMemo(
     () => (
@@ -14,6 +16,12 @@ export const Header = () => {
             participantCount > 1 ? 'participants' : 'participant'
           }`}
         </div>
+        {customCapsule && (
+          <div className={`capsule ${customCapsule.variant}`}>
+            {customCapsule.variant === 'recording' && <span />}
+            {customCapsule.label}
+          </div>
+        )}
 
         <style jsx>{`
           .room-header {
@@ -31,6 +39,9 @@ export const Header = () => {
           }
 
           .capsule {
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-xxxs);
             background-color: var(--blue-dark);
             border-radius: var(--radius-sm);
             padding: var(--spacing-xxs) var(--spacing-xs);
@@ -39,10 +50,35 @@ export const Header = () => {
             font-weight: var(--weight-medium);
             user-select: none;
           }
+
+          .capsule.recording {
+            background: var(--secondary-default);
+          }
+
+          .capsule.recording span {
+            display: block;
+            width: 12px;
+            height: 12px;
+            background: white;
+            border-radius: 12px;
+            animation: capsulePulse 2s infinite linear;
+          }
+
+          @keyframes capsulePulse {
+            0% {
+              opacity: 1;
+            }
+            50% {
+              opacity: 0.25;
+            }
+            100% {
+              opacity: 1;
+            }
+          }
         `}</style>
       </header>
     ),
-    [participantCount]
+    [participantCount, customCapsule]
   );
 };
 

dailyjs/basic-call/pages/index.js

@@ -21,6 +21,8 @@ export default function Index({
   domain,
   isConfigured = false,
   predefinedRoom = false,
+  forceFetchToken = false,
+  forceOwner = false,
   asides,
   modals,
   customTrayComponent,
@@ -74,6 +76,8 @@ export default function Index({
           <NotConfigured />
         ) : (
           <Intro
+            forceFetchToken
+            forceOwner
             title={process.env.PROJECT_TITLE}
             room={roomName}
             error={tokenError}
@@ -128,6 +132,8 @@ Index.propTypes = {
   modals: PropTypes.arrayOf(PropTypes.func),
   customTrayComponent: PropTypes.node,
   customAppComponent: PropTypes.node,
+  forceFetchToken: PropTypes.bool,
+  forceOwner: PropTypes.bool,
 };
 
 export async function getStaticProps() {

dailyjs/live-streaming/components/App/App.js

@@ -1,13 +1,13 @@
 import React from 'react';
 
 import App from '@dailyjs/basic-call/components/App';
-import { ChatProvider } from '../../contexts/ChatProvider';
+import { LiveStreamingProvider } from '../../contexts/LiveStreamingProvider';
 
-// Extend our basic call app component with the chat context
-export const AppWithChat = () => (
-  <ChatProvider>
+// Extend our basic call app component with the live streaming context
+export const AppWithLiveStreaming = () => (
+  <LiveStreamingProvider>
     <App />
-  </ChatProvider>
+  </LiveStreamingProvider>
 );
 
-export default AppWithChat;
+export default AppWithLiveStreaming;

dailyjs/live-streaming/components/App/index.js

@@ -1 +1 @@
-export { AppWithChat as default } from './App';
+export { AppWithLiveStreaming as default } from './App';

dailyjs/live-streaming/components/LiveStreamingModal/LiveStreamingModal.js

@@ -1,25 +1,49 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Button } from '@dailyjs/shared/components/Button';
 import Field from '@dailyjs/shared/components/Field';
 import { TextInput } from '@dailyjs/shared/components/Input';
 import Modal from '@dailyjs/shared/components/Modal';
+import { Well } from '@dailyjs/shared/components/Well';
 import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
 import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
+import { useLiveStreaming } from '../../contexts/LiveStreamingProvider';
 
 export const LIVE_STREAMING_MODAL = 'live-streaming';
 
 export const LiveStreamingModal = () => {
   const { callObject } = useCallState();
   const { currentModals, closeModal } = useUIState();
+  const { isStreaming, streamError } = useLiveStreaming();
+  const [pending, setPending] = useState(false);
   const [rtmpUrl, setRtmpUrl] = useState('');
 
+  useEffect(() => {
+    // Reset pending state whenever stream state changes
+    setPending(false);
+  }, [isStreaming]);
+
+  function startLiveStream() {
+    setPending(true);
+    callObject.startLiveStreaming({ rtmpUrl });
+  }
+
+  function stopLiveStreaming() {
+    setPending(true);
+    callObject.stopLiveStreaming();
+  }
+
   return (
     <Modal
       title="Live stream"
       isOpen={currentModals[LIVE_STREAMING_MODAL]}
       onClose={() => closeModal(LIVE_STREAMING_MODAL)}
     >
-      <Field label="Enter room to join">
+      {streamError && (
+        <Well variant="error">
+          Unable to start stream. Error message: {streamError}
+        </Well>
+      )}
+      <Field label="Enter RTMP endpoint">
         <TextInput
           type="text"
           placeholder="RTMP URL"
@@ -27,15 +51,18 @@ export const LiveStreamingModal = () => {
           onChange={(e) => setRtmpUrl(e.target.value)}
         />
       </Field>
-      <Button
-        disabled={!rtmpUrl}
-        onClick={() => callObject.startLiveStreaming({ rtmpUrl })}
-      >
-        Start live streaming
-      </Button>
-      <Button onClick={() => callObject.stopLiveStreaming()}>
-        Stop live streaming
-      </Button>
+      {!isStreaming ? (
+        <Button
+          disabled={!rtmpUrl || pending}
+          onClick={() => startLiveStream()}
+        >
+          {pending ? 'Starting stream...' : 'Start live streaming'}
+        </Button>
+      ) : (
+        <Button variant="warning" onClick={() => stopLiveStreaming()}>
+          Stop live streaming
+        </Button>
+      )}
     </Modal>
   );
 };

dailyjs/live-streaming/components/Tray/Tray.js

@@ -4,15 +4,18 @@ import { TrayButton } from '@dailyjs/shared/components/Tray';
 import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
 import { ReactComponent as IconStream } from '@dailyjs/shared/icons/streaming-md.svg';
 
+import { useLiveStreaming } from '../../contexts/LiveStreamingProvider';
 import { LIVE_STREAMING_MODAL } from '../LiveStreamingModal';
 
 export const Tray = () => {
   const { openModal } = useUIState();
+  const { isStreaming } = useLiveStreaming();
 
   return (
     <>
       <TrayButton
-        label="Stream"
+        label={isStreaming ? 'Live' : 'Stream'}
+        orange={isStreaming}
         onClick={() => openModal(LIVE_STREAMING_MODAL)}
       >
         <IconStream />

dailyjs/live-streaming/contexts/ChatProvider.js

@@ -1,90 +0,0 @@
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from 'react';
-import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
-import { nanoid } from 'nanoid';
-import PropTypes from 'prop-types';
-
-export const ChatContext = createContext();
-
-export const ChatProvider = ({ children }) => {
-  const { callObject } = useCallState();
-  const [chatHistory, setChatHistory] = useState([]);
-  const [hasNewMessages, setHasNewMessages] = useState(false);
-
-  const handleNewMessage = useCallback(
-    (e) => {
-      const participants = callObject.participants();
-      const sender = participants[e.fromId].user_name
-        ? participants[e.fromId].user_name
-        : 'Guest';
-
-      setChatHistory((oldState) => [
-        ...oldState,
-        { sender, message: e.data.message, id: nanoid() },
-      ]);
-
-      setHasNewMessages(true);
-    },
-    [callObject]
-  );
-
-  const sendMessage = useCallback(
-    (message) => {
-      if (!callObject) {
-        return false;
-      }
-
-      console.log('💬 Sending app message');
-
-      callObject.sendAppMessage({ message }, '*');
-
-      // Get the sender (local participant) name
-      const sender = callObject.participants().local.user_name
-        ? callObject.participants().local.user_name
-        : 'Guest';
-
-      // Update local chat history
-      return setChatHistory((oldState) => [
-        ...oldState,
-        { sender, message, id: nanoid(), isLocal: true },
-      ]);
-    },
-    [callObject]
-  );
-
-  useEffect(() => {
-    if (!callObject) {
-      return false;
-    }
-
-    console.log(`💬 Chat provider listening for app messages`);
-
-    callObject.on('app-message', handleNewMessage);
-
-    return () => callObject.off('app-message', handleNewMessage);
-  }, [callObject, handleNewMessage]);
-
-  return (
-    <ChatContext.Provider
-      value={{
-        sendMessage,
-        chatHistory,
-        hasNewMessages,
-        setHasNewMessages,
-      }}
-    >
-      {children}
-    </ChatContext.Provider>
-  );
-};
-
-ChatProvider.propTypes = {
-  children: PropTypes.node,
-};
-
-export const useChat = () => useContext(ChatContext);

dailyjs/live-streaming/contexts/LiveStreamingProvider.js

@@ -0,0 +1,70 @@
+import React, {
+  useState,
+  createContext,
+  useContext,
+  useEffect,
+  useCallback,
+} from 'react';
+import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
+import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
+import PropTypes from 'prop-types';
+
+export const LiveStreamingContext = createContext();
+
+export const LiveStreamingProvider = ({ children }) => {
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [streamError, setStreamError] = useState();
+  const { setCustomCapsule } = useUIState();
+  const { callObject } = useCallState();
+
+  const handleStreamStarted = useCallback(() => {
+    console.log('📺 Live stream started');
+    setIsStreaming(true);
+    setCustomCapsule({ variant: 'recording', label: 'Live streaming' });
+  }, [setCustomCapsule]);
+
+  const handleStreamStopped = useCallback(() => {
+    console.log('📺 Live stream stopped');
+    setIsStreaming(false);
+    setCustomCapsule(null);
+  }, [setCustomCapsule]);
+
+  const handleStreamError = useCallback(
+    (e) => {
+      setIsStreaming(false);
+      setCustomCapsule(null);
+      setStreamError(e.errorMsg);
+    },
+    [setCustomCapsule]
+  );
+
+  useEffect(() => {
+    if (!callObject) {
+      return false;
+    }
+
+    console.log('📺 Live streaming provider listening for stream events');
+
+    callObject.on('live-streaming-started', handleStreamStarted);
+    callObject.on('live-streaming-stopped', handleStreamStopped);
+    callObject.on('live-streaming-error', handleStreamError);
+
+    return () => {
+      callObject.off('live-streaming-started', handleStreamStarted);
+      callObject.off('live-streaming-stopped', handleStreamStopped);
+      callObject.on('live-streaming-error', handleStreamError);
+    };
+  }, [callObject, handleStreamStarted, handleStreamStopped, handleStreamError]);
+
+  return (
+    <LiveStreamingContext.Provider value={{ isStreaming, streamError }}>
+      {children}
+    </LiveStreamingContext.Provider>
+  );
+};
+
+LiveStreamingProvider.propTypes = {
+  children: PropTypes.node,
+};
+
+export const useLiveStreaming = () => useContext(LiveStreamingContext);

dailyjs/live-streaming/hooks/useMessageSound.js

@@ -1,19 +0,0 @@
-import { useEffect, useMemo } from 'react';
-
-import { useSound } from '@dailyjs/shared/hooks/useSound';
-import { debounce } from 'debounce';
-
-/**
- * Convenience hook to play `join.mp3` when participants join the call
- */
-export const useMessageSound = () => {
-  const { load, play } = useSound('message.mp3');
-
-  useEffect(() => {
-    load();
-  }, [load]);
-
-  return useMemo(() => debounce(() => play(), 5000, true), [play]);
-};
-
-export default useMessageSound;

dailyjs/live-streaming/pages/_app.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import App from '@dailyjs/basic-call/pages/_app';
-import AppWithChat from '../components/App';
+import AppWithLiveStreaming from '../components/App';
 
 import { LiveStreamingModal } from '../components/LiveStreamingModal';
 import Tray from '../components/Tray';
 
 App.modals = [LiveStreamingModal];
-App.customAppComponent = <AppWithChat />;
+App.customAppComponent = <AppWithLiveStreaming />;
 App.customTrayComponent = <Tray />;
 
 export default App;

dailyjs/live-streaming/pages/index.js

@@ -10,6 +10,8 @@ export async function getStaticProps() {
     props: {
       domain: process.env.DAILY_DOMAIN || null,
       isConfigured,
+      forceFetchToken: true,
+      forceOwner: true,
     },
   };
 }

dailyjs/shared/components/GlobalStyle/GlobalStyle.js

@@ -12,6 +12,7 @@ export const GlobalStyle = () => (
       --primary-dark: ${theme.primary.dark};
       --secondary-default: ${theme.secondary.default};
       --secondary-dark: ${theme.secondary.dark};
+      --secondary-light: ${theme.secondary.light};
       --blue-light: ${theme.blue.light};
       --blue-default: ${theme.blue.default};
       --blue-dark: ${theme.blue.dark};

dailyjs/shared/contexts/UIStateProvider.js

@@ -12,6 +12,7 @@ export const UIStateProvider = ({
 }) => {
   const [showAside, setShowAside] = useState();
   const [activeModals, setActiveModals] = useState({});
+  const [customCapsule, setCustomCapsule] = useState();
 
   const openModal = useCallback((modalName) => {
     setActiveModals((prevState) => ({
@@ -45,6 +46,8 @@ export const UIStateProvider = ({
         toggleAside,
         showAside,
         setShowAside,
+        customCapsule,
+        setCustomCapsule,
       }}
     >
       {children}

dailyjs/shared/styles/defaultTheme.js

@@ -10,6 +10,7 @@ export const defaultTheme = {
   secondary: {
     default: '#FF9254',
     dark: '#FB651E',
+    light: '#FF9254',
   },
 
   blue: {