implent yt-livestream action on fe

streamethorg · Jul 31, 2024 · 0c37ef6 · 0c37ef6
1 parent ba10840
commit 0c37ef6
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 27 deletions.
diff --git a/packages/app/app/studio/[organization]/livestreams/[streamId]/components/Destinations.tsx b/packages/app/app/studio/[organization]/livestreams/[streamId]/components/Destinations.tsx
@@ -15,7 +15,7 @@ const Destinations = ({
   organizationSlug: string;
   stream: IExtendedStage;
 }) => {
-  if (!stream.streamSettings?.streamId) {
+  if (!stream.streamSettings?.streamId || !stream._id) {
     return NotFound();
   }
 
@@ -27,6 +27,7 @@ const Destinations = ({
           organizationId={stream.organizationId as string}
           streamId={stream?.streamSettings?.streamId}
           organization={organization}
+          stageId={stream._id}
         />
         <EditLivestream
           stage={stream}

diff --git a/...ganization]/livestreams/[streamId]/components/StreamPlatforms/CreateMultistreamTarget.tsx b/...ganization]/livestreams/[streamId]/components/StreamPlatforms/CreateMultistreamTarget.tsx
@@ -18,11 +18,13 @@ export const CreateMultistreamTarget = ({
   organizationId,
   btnName = 'Add',
   organization,
+  stageId,
 }: {
   organization: IExtendedOrganization;
   streamId: string;
   organizationId: string;
   btnName?: string;
+  stageId: string;
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -45,6 +47,7 @@ export const CreateMultistreamTarget = ({
           organizationId={organizationId}
           setIsOpen={setIsOpen}
           organization={organization}
+          stageId={stageId}
         />
       </DialogContent>
     </Dialog>

diff --git a/.../[organization]/livestreams/[streamId]/components/StreamPlatforms/CreateYoutubeStream.tsx b/.../[organization]/livestreams/[streamId]/components/StreamPlatforms/CreateYoutubeStream.tsx
@@ -1,15 +1,50 @@
 'use client';
 import { Button } from '@/components/ui/button';
+import { createSocialLivestreamStageAction } from '@/lib/actions/stages';
 import { IExtendedOrganization } from '@/lib/types';
 import React, { useState } from 'react';
 import { CiCirclePlus } from 'react-icons/ci';
+import { toast } from 'sonner';
 
 const CreateYoutubeStream = ({
   organization,
+  stageId,
+  setIsOpen,
 }: {
   organization: IExtendedOrganization;
+  stageId: string;
+  setIsOpen: (open: boolean) => void;
 }) => {
   const [socialId, setSocialId] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleCreateYoutubeStream = async () => {
+    setIsLoading(true);
+    await createSocialLivestreamStageAction({
+      stageId: stageId,
+      socialId,
+      socialType: 'youtube',
+      organizationId: organization._id,
+    })
+      .then((response) => {
+        if (!response.error) {
+          toast.success('Youtube stream created');
+          setIsOpen(false);
+        } else {
+          toast.error(
+            'Error creating Youtube stream: ' + response.error.details
+          );
+        }
+      })
+      .catch((error) => {
+        setIsLoading(false);
+        toast.error('Error creating Youtube stream' + error.details);
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  };
+
   return (
     <div>
       <div>
@@ -42,7 +77,12 @@ const CreateYoutubeStream = ({
         </div>
 
         <div className="text-right">
-          <Button disabled={!socialId} variant={'primary'}>
+          <Button
+            loading={isLoading}
+            onClick={handleCreateYoutubeStream}
+            disabled={!socialId}
+            variant={'primary'}
+          >
             Create
           </Button>
         </div>

diff --git a/...udio/[organization]/livestreams/[streamId]/components/StreamPlatforms/StreamPlatforms.tsx b/...udio/[organization]/livestreams/[streamId]/components/StreamPlatforms/StreamPlatforms.tsx
@@ -37,11 +37,13 @@ const StreamPlatformGrid = ({
   organizationId,
   setIsOpen,
   organization,
+  stageId,
 }: {
   streamId?: string;
   organizationId?: string;
   setIsOpen: (open: boolean) => void;
   organization: IExtendedOrganization;
+  stageId: string;
 }) => {
   const [SelectedComponent, setSelectedComponent] =
     useState<JSX.Element | null>(null);
@@ -58,7 +60,13 @@ const StreamPlatformGrid = ({
     {
       title: 'YouTube (WIP)',
       icon: <SiYoutube size={45} color="#ff0000" />,
-      onClick: () => <CreateYoutubeStream organization={organization} />,
+      onClick: () => (
+        <CreateYoutubeStream
+          stageId={stageId}
+          organization={organization}
+          setIsOpen={setIsOpen}
+        />
+      ),
     },
     {
       title: 'Custom RTMP',

diff --git a/packages/app/lib/actions/stages.ts b/packages/app/lib/actions/stages.ts
@@ -155,18 +155,22 @@ export const createSocialLivestreamStageAction = async ({
   if (!authToken) {
     throw new Error('No user session found');
   }
+  try {
+    const response = await createSocialLivestreamStage({
+      stageId: stageId,
+      socialId: socialId,
+      socialType: socialType,
+      organizationId: organizationId,
+      authToken,
+    });
 
-  const response = await createSocialLivestreamStage({
-    stageId: stageId,
-    socialId: socialId,
-    socialType: socialType,
-    organizationId: organizationId,
-    authToken,
-  });
-
-  if (!response) {
-    throw new Error('Error creating stage livestream social');
+    if (!response) {
+      throw new Error('Error creating stage livestream social');
+    }
+    revalidatePath('/studio');
+    return response;
+  } catch (error) {
+    console.log('action error: ' + error, { error });
+    return { message: 'creating stage livestream social ', error };
   }
-  revalidatePath('/studio');
-  return response;
 };
diff --git a/packages/app/lib/services/stageService.tsx b/packages/app/lib/services/stageService.tsx
@@ -261,18 +261,36 @@ export async function createSocialLivestreamStage({
   socialType: string;
   organizationId: string;
   authToken: string;
-}): Promise<IStage> {
-  const response = await fetch(`${apiUrl()}/stages/livestream`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${authToken}`,
-    },
-    body: JSON.stringify({ stageId, socialId, socialType, organizationId }),
-  });
+}): Promise<{
+  error: { details: string };
+  data: {
+    ingestUrl: 'string';
+    streamKey: 'string';
+  };
+}> {
+  try {
+    const response = await fetch(`${apiUrl()}/stages/livestream`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${authToken}`,
+      },
+      body: JSON.stringify({ stageId, socialId, socialType, organizationId }),
+    });
 
-  if (!response.ok) {
-    throw 'Error creating stage livestream social';
+    if (!response.ok) {
+      const error = await response.json();
+      // Create a detailed error message
+      const errorMessage = `Error ${response.status}: ${error.message || 'Unknown error occurred'}`;
+      throw new Error(errorMessage);
+    }
+    return (await response.json()).data;
+  } catch (error) {
+    const errorObject = {
+      message: 'Failed to create social livestream stage',
+      details: error instanceof Error ? error.message : 'Unknown error',
+    };
+
+    throw errorObject;
   }
-  return (await response.json()).data;
 }