Merge branch 'feature/WD-1079' of https://github.com/GetStream/stream…

…-video-js into feature/WD-1079
GetStream · Dec 11, 2023 · 8627ca0 · 8627ca0
2 parents c01c65b + 02f0098
commit 8627ca0
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 65 deletions.
diff --git a/packages/client/src/__tests__/server-side/call.test.ts b/packages/client/src/__tests__/server-side/call.test.ts
@@ -58,7 +58,11 @@ describe('call API', () => {
   });
 
   it('RTMP address', async () => {
-    const resp = await call.getOrCreate();
+    const resp = await call.getOrCreate({
+      data: {
+        created_by_id: 'john',
+      },
+    });
     const address = resp.call.ingress.rtmp.address;
 
     expect(address).toBeDefined();

diff --git a/sample-apps/react/react-dogfood/components/ActiveCall.tsx b/sample-apps/react/react-dogfood/components/ActiveCall.tsx
@@ -32,7 +32,7 @@ import { NewMessageNotification } from './NewMessageNotification';
 import { UnreadCountBadge } from './UnreadCountBadge';
 import { DEFAULT_LAYOUT, getLayoutSettings, LayoutMap } from './LayoutSelector';
 
-import { useWatchChannel, useBreakpoint } from '../hooks';
+import { useBreakpoint, useWatchChannel } from '../hooks';
 
 export type ActiveCallProps = {
   chatClient?: StreamChat | null;
@@ -113,7 +113,7 @@ export const ActiveCall = (props: ActiveCallProps) => {
                   <CallParticipantsList
                     onClose={() => setShowParticipants(false)}
                   />
-                  <InvitePanel callId={activeCall.id} />
+                  <InvitePanel />
                 </div>
               )}
 

diff --git a/sample-apps/react/react-dogfood/components/InvitePanel/InvitePanel.tsx b/sample-apps/react/react-dogfood/components/InvitePanel/InvitePanel.tsx
@@ -2,45 +2,15 @@ import { useCallback, useEffect, useState } from 'react';
 import { QRCodeSVG } from 'qrcode.react';
 import { Icon, IconButton, useI18n } from '@stream-io/video-react-sdk';
 
-export type InvitePanelProps = {
-  className?: string;
-  callId: string;
-  isFocused?: boolean;
-};
-
 export const InvitePopup = ({
   callId,
   close,
 }: {
   callId: string;
   close: () => void;
 }) => {
-  const URLtoCopy = window.location.href;
-  const [isCopied, setIsCopied] = useState(false);
   const { t } = useI18n();
-
-  const copyUrl = useCallback(() => {
-    setIsCopied(false);
-    try {
-      navigator.clipboard
-        .writeText(URLtoCopy)
-        .then(function (err) {
-          console.error('Async: Could not copy text: ', err);
-        })
-        .finally(() => {
-          setIsCopied(true);
-        });
-    } catch (error) {}
-  }, [URLtoCopy]);
-
-  useEffect(() => {
-    if (isCopied) {
-      setTimeout(() => {
-        setIsCopied(false);
-      }, 3000);
-    }
-  }, [isCopied]);
-
+  const { isCopied, copyInviteLink } = useCopyInviteLink();
   return (
     <div className="rd__invite-popup">
       <div className="rd__invite-popup__header">
@@ -56,7 +26,7 @@ export const InvitePopup = ({
 
       <button
         className="rd__button rd__button--primary rd__invite-popup__button"
-        onClick={copyUrl}
+        onClick={copyInviteLink}
       >
         <Icon className="rd__button__icon" icon="person-add" />
         {isCopied ? 'Copied invite link' : 'Add others'}
@@ -65,7 +35,7 @@ export const InvitePopup = ({
       <p className="rd__invite-popup__description">
         {t('Or share this call ID with the others you want in the meeting:')}
       </p>
-      <div className="rd__invite-popup__id" onClick={copyUrl}>
+      <div className="rd__invite-popup__id" onClick={copyInviteLink}>
         <div>
           {t('Call ID:')}
           <span className="rd__invite-popup__id-text">{callId}</span>
@@ -76,32 +46,8 @@ export const InvitePopup = ({
   );
 };
 
-export const Invite = ({ callId }: { callId: string }) => {
-  const URLtoCopy = window.location.href;
-  const [isCopied, setIsCopied] = useState(false);
-
-  const copyUrl = useCallback(() => {
-    setIsCopied(false);
-    try {
-      navigator.clipboard
-        .writeText(URLtoCopy)
-        .then(function (err) {
-          console.error('Async: Could not copy text: ', err);
-        })
-        .finally(() => {
-          setIsCopied(true);
-        });
-    } catch (error) {}
-  }, [URLtoCopy]);
-
-  useEffect(() => {
-    if (isCopied) {
-      setTimeout(() => {
-        setIsCopied(false);
-      }, 3000);
-    }
-  }, [isCopied]);
-
+export const Invite = () => {
+  const { isCopied, copyInviteLink } = useCopyInviteLink();
   return (
     <div className="rd__invite__copy">
       <h2 className="rd__invite__copy-header">Share the link</h2>
@@ -110,7 +56,7 @@ export const Invite = ({ callId }: { callId: string }) => {
       </p>
       <button
         className="rd__button rd__button--primary rd__invite__copy-button"
-        onClick={copyUrl}
+        onClick={copyInviteLink}
       >
         <Icon className="rd__button__icon" icon="person-add" />
         {isCopied ? 'Copied invite link' : 'Add more people'}
@@ -119,11 +65,11 @@ export const Invite = ({ callId }: { callId: string }) => {
   );
 };
 
-export const InvitePanel = ({ callId }: InvitePanelProps) => {
+export const InvitePanel = () => {
   const qrCodeContent = new URL(window.location.toString());
   return (
     <div className="rd__invite">
-      <Invite callId={callId} />
+      <Invite />
       <div className="rd__invite__qr">
         <h2 className="rd__invite__qr-header">Test on mobile</h2>
         <p className="rd__invite__qr-description">
@@ -139,3 +85,25 @@ export const InvitePanel = ({ callId }: InvitePanelProps) => {
     </div>
   );
 };
+
+const useCopyInviteLink = () => {
+  const [isCopied, setIsCopied] = useState(false);
+  const copyInviteLink = useCallback(() => {
+    setIsCopied(false);
+    const url = window.location.href;
+    navigator.clipboard
+      .writeText(url)
+      .catch((err) => console.error('could not copy invite link', err))
+      .finally(() => setIsCopied(true));
+  }, []);
+
+  useEffect(() => {
+    if (!isCopied) return;
+    const id = setTimeout(() => {
+      setIsCopied(false);
+    }, 3000);
+    return () => clearTimeout(id);
+  }, [isCopied]);
+
+  return { isCopied, copyInviteLink };
+};