💄 Various fixes

streamethorg · Jan 29, 2025 · 26dcd95 · 26dcd95
2 parents eb99958 + be84b14
commit 26dcd95
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 40 deletions.
diff --git a/...es/app/app/studio/[organization]/(no-side-bar)/clips/[stageId]/Timeline/TrimmControls.tsx b/...es/app/app/studio/[organization]/(no-side-bar)/clips/[stageId]/Timeline/TrimmControls.tsx
@@ -12,7 +12,7 @@ const TrimmControls = ({
   blocked: boolean;
 }) => {
   const { startTime, endTime, handleMouseDown } = useTrimmControlsContext();
-  const { videoDuration, timelineWidth, pixelsPerSecond } =
+  const { videoDuration, timelineWidth, pixelsPerSecond, isPreviewMode } =
     useTimelineContext();
   const { calculatePositionOnTimeline } = useTimeline();
 
@@ -39,7 +39,7 @@ const TrimmControls = ({
               : 'rounded-l-xl'
           } `}
           style={{
-            background: 'rgba(200, 75, 80, 1)',
+            background: isPreviewMode ? 'rgba(255, 191, 0, 1)' : 'rgba(200, 75, 80, 1)',
           }}
         />
       </div>
@@ -49,7 +49,7 @@ const TrimmControls = ({
 
 export const TrimmOverlay = () => {
   const { startTime, endTime } = useTrimmControlsContext();
-  const { videoDuration, timelineWidth } = useTimelineContext();
+  const { videoDuration, timelineWidth, isPreviewMode } = useTimelineContext();
   const { calculatePositionOnTimeline } = useTimeline();
 
   const startPosition = calculatePositionOnTimeline(
@@ -67,7 +67,7 @@ export const TrimmOverlay = () => {
     <div
       className="absolute flex rounded-xl h-[calc(100%-20px)] top-6"
       style={{
-        background: 'rgba(200, 75, 80, 0.4)',
+        background: isPreviewMode ? 'rgba(255, 191, 0, 0.35)' : 'rgba(200, 75, 80, 0.4)',
         left: `${startPosition}px`,
         width: `${endPosition - startPosition}px`,
       }}

diff --git a/.../app/app/studio/[organization]/(no-side-bar)/clips/[stageId]/sidebar/Transcipts/index.tsx b/.../app/app/studio/[organization]/(no-side-bar)/clips/[stageId]/sidebar/Transcipts/index.tsx
@@ -17,7 +17,7 @@ const Transcripts = ({
   console.log('transcribe', transcribe, transcribeStatus);
   if (transcribe?.length === 0) {
     return (
-      <div className="flex flex-col h-full overflow-y-scroll">
+      <div className="flex flex-col h-full">
         <div className="flex flex-col space-y-4 text-center items-center justify-center h-full">
           <p className="text-lg font-semibold">No transcript available</p>
           <p className="text-md text-muted-foreground">
@@ -40,7 +40,7 @@ const Transcripts = ({
   }
 
   return (
-    <div className="flex flex-col h-full overflow-y-scroll">
+    <div className="flex flex-col h-full">
       <TranscriptText transcribe={transcribe} />
     </div>
   );

diff --git a/packages/app/app/studio/[organization]/(no-side-bar)/clips/[stageId]/sidebar/index.tsx b/packages/app/app/studio/[organization]/(no-side-bar)/clips/[stageId]/sidebar/index.tsx
@@ -77,7 +77,7 @@ export default function Sidebar({
         </TabsContent>
         <TabsContent
           value="transcribe"
-          className="flex-grow overflow-hidden h-full p-4"
+          className="flex-grow overflow-y-auto h-full p-4"
         >
           <Transcripts
             transcribe={transcribe}

diff --git a/packages/app/app/studio/[organization]/(root)/team/page.tsx b/packages/app/app/studio/[organization]/(root)/team/page.tsx
@@ -43,7 +43,7 @@ const Settings = async ({
 
   return (
     <div className="p-4 flex h-full w-full max-w-4xl">
-      <Card className="w-full h-full rounded-r-xl border bg-white shadow-none md:p-0">
+      <Card className="w-full h-full rounded-r-xl border bg-white shadow-none md:p-0 flex flex-col">
         <CardHeader className="flex flex-row justify-between">
           <div className="flex flex-col gap-2">
             <CardTitle>Team members</CardTitle>
@@ -55,31 +55,33 @@ const Settings = async ({
             <AddTeamMembers organizationId={organization._id} />
           </div>
         </CardHeader>
-        <CardContent className="p-0 md:p-0 lg:p-0">
-          <Table className="w-full">
-            <TableHeader className="sticky top-0 z-10 border-separate bg-gray-100">
-              <TableRow className="hover:bg-whiterounded-t-xl border-b">
-                <TableHead>Email</TableHead>
-                <TableHead>Role</TableHead>
-                <TableHead>Actions</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {members?.map(({ _id, email, role }) => (
-                <TableRow key={_id}>
-                  <TableCell>{email}</TableCell>
-                  <TableCell>{role}</TableCell>
-
-                  <TableCell>
-                    <DeleteTeamMember
-                      memberEmail={email as string}
-                      organizationId={organization._id}
-                    />
-                  </TableCell>
+        <CardContent className="p-0 md:p-0 lg:p-0 flex-1 overflow-auto">
+          <div className="h-full overflow-auto">
+            <Table className="w-full">
+              <TableHeader className="sticky top-0 z-10 border-separate bg-gray-100">
+                <TableRow className="hover:bg-whiterounded-t-xl border-b">
+                  <TableHead>Email</TableHead>
+                  <TableHead>Role</TableHead>
+                  <TableHead>Actions</TableHead>
                 </TableRow>
-              ))}
-            </TableBody>
-          </Table>
+              </TableHeader>
+              <TableBody>
+                {members?.map(({ _id, email, role }) => (
+                  <TableRow key={_id}>
+                    <TableCell>{email}</TableCell>
+                    <TableCell>{role}</TableCell>
+
+                    <TableCell>
+                      <DeleteTeamMember
+                        memberEmail={email as string}
+                        organizationId={organization._id}
+                      />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
         </CardContent>
       </Card>
     </div>

diff --git a/packages/server/src/controllers/index.controller.ts b/packages/server/src/controllers/index.controller.ts
@@ -182,11 +182,21 @@ export class IndexController extends Controller {
           break;
 
         case LivepeerEvent.streamStarted:
+          console.log('🎥 Stream started event received:', {
+            streamId: payload.stream?.id,
+            status: payload.stream?.status,
+            isActive: payload.stream?.isActive,
+            isHealthy: payload.stream?.isHealthy
+          });
+          await this.stageService.findStreamAndUpdate(payload.stream.id);
+          break;
+
         case LivepeerEvent.streamIdle:
-          console.log('🎥 Stream event received:', {
-            event: payload.event,
+          console.log('🎥 Stream idle event received:', {
             streamId: payload.stream?.id,
             status: payload.stream?.status,
+            isActive: payload.stream?.isActive,
+            isHealthy: payload.stream?.isHealthy,
           });
           await this.stageService.findStreamAndUpdate(payload.stream.id);
           break;

diff --git a/packages/server/src/services/stage.service.ts b/packages/server/src/services/stage.service.ts
@@ -140,14 +140,17 @@ export default class StageService {
     const stream = await getStreamInfo(id);
     let stage = await Stage.findOne({ 'streamSettings.streamId': id });
     if (!stage) throw new HttpException(400, 'stage not found');
-    // send message to redis
-    const queue = await stageTranscriptionsQueue();
-    await queue.add({
-      stageId: stage._id,
-    });
+
+    if (!stream.isActive) {
+      const queue = await stageTranscriptionsQueue();
+      await queue.add({
+        stageId: stage._id,
+      });
+    }
+
     await stage.updateOne(
       {
-        'stageSettings.transcripts.status': 'in-queue',
+        'stageSettings.transcripts.status': !stream.isActive ? 'in-queue' : undefined,
         'streamSettings.isActive': stream.isActive,
         'streamSettings.isHealthy': stream.isHealthy ?? false,
       },