add calls page

packages/app/app/studio/[organization]/calls/[streamId]/components/HuddlePlayer.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { HuddleIframe } from '@huddle01/iframe';
+
+const HuddlePlayer = ({
+  roomUrl,
+  projectId,
+}: {
+  roomUrl: string;
+  projectId: string;
+}) => {
+  return (
+    <HuddleIframe
+      roomUrl={`https://iframe.huddle01.com/${roomUrl}/lobby`}
+      className="w-full aspect-video"
+      projectId={projectId}
+    />
+  );
+};
+
+export default HuddlePlayer;

packages/app/app/studio/[organization]/calls/[streamId]/page.tsx

@@ -0,0 +1,99 @@
+'use server';
+
+import React from 'react';
+import LivestreamEmbedCode from '../../livestreams/[streamId]/components/LivestreamEmbedCode';
+import { fetchStage } from '@/lib/services/stageService';
+import { LivestreamPageParams } from '@/lib/types';
+import StreamHeader from '../../livestreams/[streamId]/components/StreamHeader';
+import NotFound from '@/app/not-found';
+import Destinations from '../../livestreams/[streamId]/components/Destinations';
+import StreamHealth from '../../livestreams/[streamId]/components/StreamHealth';
+import { Button } from '@/components/ui/button';
+import { ArrowRight } from 'lucide-react';
+import Link from 'next/link';
+import ShareLivestream from '../../livestreams/components/ShareLivestream';
+import { fetchOrganization } from '@/lib/services/organizationService';
+import { createHuddleRoom } from '@/lib/services/huddleService';
+import HuddlePlayer from './components/HuddlePlayer';
+
+const Livestream = async ({ params }: LivestreamPageParams) => {
+  if (!params.streamId) return null;
+  const stream = await fetchStage({ stage: params.streamId });
+  const organization = await fetchOrganization({
+    organizationId: params.organization,
+  });
+
+  if (!stream || !organization) {
+    return NotFound();
+  }
+
+  const room = await createHuddleRoom({
+    title: stream.name,
+    hostWallets: ['0x1234567890'],
+  });
+
+  const huddleProjectId = process.env.NEXT_HUDDLE_PROJECT_ID;
+
+  if (!room || !huddleProjectId) {
+    return NotFound();
+  }
+
+  return (
+    <div className="max-w-screen-3xl flex h-full max-h-[1000px] w-full flex-col p-4">
+      <StreamHeader
+        organizationSlug={params.organization}
+        stream={stream}
+        isLiveStreamPage
+      />
+      <div className="flex w-full flex-grow flex-row space-x-4">
+        <div className="flex w-2/3 flex-col">
+          <HuddlePlayer
+            roomUrl={room.data.roomId}
+            projectId={huddleProjectId}
+          />
+          <div className="flex w-full flex-col items-center space-x-2 space-y-2 py-2 md:flex-row lg:flex-row">
+            <div className="flex flex-grow items-center justify-start space-x-2">
+              <span className="line-clamp-2 text-xl font-bold lg:max-w-[550px]">
+                {stream.name}
+              </span>
+              <StreamHealth
+                stream={stream}
+                streamId={stream?.streamSettings?.streamId || ''}
+                organization={params.organization}
+                isLive={stream.streamSettings?.isActive}
+              />
+            </div>
+
+            <LivestreamEmbedCode
+              streamId={stream._id}
+              playerName={stream?.name}
+            />
+            <ShareLivestream
+              variant={'outline'}
+              organization={params.organization}
+            />
+
+            <Link
+              href={`/${params.organization}/livestream?stage=${stream._id}`}
+              target="_blank"
+            >
+              <Button variant="outline">
+                View Livestream
+                <div>
+                  <ArrowRight className="h-4 w-4 pl-1" />
+                </div>
+              </Button>
+            </Link>
+          </div>
+        </div>
+        <Destinations
+          stream={stream}
+          organizationSlug={params.organization}
+          organization={organization}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Livestream;

packages/app/components/misc/ConnectWalletButton.tsx

@@ -16,7 +16,7 @@ export const ConnectWalletButton = ({
         return (
           <Button variant={'primary'} onClick={show} className={className}>
             <span className="px-2 md:px-0">
-              {isConnected ? (ensName ?? truncatedAddress) : btnText}
+              {isConnected ? ensName ?? truncatedAddress : btnText}
             </span>
           </Button>
         );

packages/app/lib/services/huddleService.tsx

@@ -0,0 +1,48 @@
+import { RoomInfo } from '@huddle01/web-core/types';
+
+type IRoomResponseData = {
+  roomId: string;
+  meetingLink: string;
+};
+
+type IRoomResponse = {
+  message: string;
+  data: IRoomResponseData;
+};
+
+export async function createHuddleRoom({
+  title,
+  hostWallets,
+}: {
+  title: string;
+  hostWallets: string[];
+}): Promise<IRoomResponse> {
+  const authToken = process.env.HUDDLE_API_KEY;
+
+  if (!authToken) {
+    throw 'No auth token';
+  }
+
+  try {
+    const response = await fetch(
+      'https://api.huddle01.com/api/v1/create-room',
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'x-api-key': authToken,
+        },
+        body: JSON.stringify({ title, hostWallets }),
+      }
+    );
+
+    if (response.ok) {
+      return await response.json();
+    } else {
+      throw await response.json();
+    }
+  } catch (e) {
+    console.error('Unexpected error:', e);
+    throw e;
+  }
+}

packages/app/package.json

@@ -14,6 +14,8 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.509.0",
     "@hookform/resolvers": "^3.3.4",
+    "@huddle01/iframe": "^0.0.15",
+    "@huddle01/react": "^2.1.4",
     "@livekit/components-react": "^1.5.3",
     "@livekit/components-styles": "^1.0.9",
     "@livepeer/react": "^4.1.8",