Refactor and clean up components: Remove unused imports, enhance styling for buttons and livestream elements, and improve layout in the StreamHeader and StageControls components. Update database connection URL for local development and refine session service documentation for clarity.

Author: pblvrt

packages/app/app/studio/[organization]/(no-side-bar)/clips/[stageId]/sidebar/clips/Clip.tsx

@@ -4,7 +4,6 @@ import { Card, CardContent } from '@/components/ui/card';
 import { fetchSessionRenderingProgress } from '@/lib/services/sessionService';
 import { IExtendedSession } from '@/lib/types';
 import { formatDate } from '@/lib/utils/time';
-import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { ProcessingStatus } from 'streameth-new-server/src/interfaces/session.interface';
 import Preview from './Preview';

packages/app/app/studio/[organization]/(root)/livestreams/[streamId]/components/StageControls.tsx

@@ -56,7 +56,6 @@ const StageControls = ({
     <div>
       <StreamConfigWithPlayer stream={stream} isLive={isLive} />
       <div className="flex flex-col md:justify-between gap-2 items-center py-2 w-full md:flex-row md:flex-wrap">
-        <span className="pr-4 text-xl font-bold text-left">{stream.name}</span>
         <div className="flex flex-row w-full">
           <div className="justify-self-start flex items-center">
             <StreamHealth isLive={isLive} stream={stream} />

packages/app/app/studio/[organization]/(root)/livestreams/[streamId]/components/StreamHeader.tsx

@@ -14,7 +14,9 @@ const StreamHeader = ({
   isLiveStreamPage?: boolean;
 }) => {
   return (
-    <div>
+    <div className="flex flex-row justify-between items-center">
+      <span className="pr-4 text-2xl font-bold">{stream.name}</span>
+
       {isLiveStreamPage && (
         <Link href={`/studio/${organizationSlug}`}>
           <Button variant="secondary" className="mb-2 px-2">

packages/app/app/studio/[organization]/(root)/livestreams/[streamId]/page.tsx

@@ -31,16 +31,15 @@ const Livestream = async ({ params }: LivestreamPageParams) => {
     })
   ).sessions;
 
-
   return (
     <div className="flex flex-col p-4 w-full h-full max-h-screen max-w-screen-3xl">
-      <StreamHeader
-        organizationSlug={params.organization}
-        stream={stream}
-        isLiveStreamPage
-      />
       <div className="flex flex-row flex-grow space-x-4 w-full">
         <div className="flex flex-col w-2/3">
+          <StreamHeader
+            organizationSlug={params.organization}
+            stream={stream}
+            isLiveStreamPage
+          />
           <StageControls
             organization={organization}
             stream={stream}

packages/app/app/studio/[organization]/(root)/livestreams/components/LivestreamTable.tsx

@@ -107,7 +107,7 @@ const LivestreamTable = async ({
                 ) : (
                   <Link
                     href={`/studio/${organizationSlug}/livestreams/${stream._id}`}
-                    className="w-full max-h-6"
+                    className="w-full max-h-12 overflow-clip "
                   >
                     <p className="line-clamp-3 font-medium text-lg text-ellipsis">
                       {stream?.name}

packages/app/app/studio/[organization]/(root)/page.tsx

@@ -15,7 +15,7 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 import FeatureButton from '@/components/ui/feature-button';
 import { Radio } from 'lucide-react';
 import { isFeatureAvailable } from '@/lib/utils/utils';
-
+import { useSubscription } from '@/lib/hooks/useSubscription';
 const OrganizationPage = async ({
   params,
   searchParams,
@@ -57,7 +57,7 @@ const OrganizationPage = async ({
           ) : (
             <FeatureButton
               organizationId={organization._id.toString()}
-              variant="ghost"
+              variant="outline"
               className="flex items-center gap-2"
             >
               <FileUp className="w-5 h-5" />

packages/server/src/databases/index.ts

@@ -2,9 +2,9 @@ import { config } from '@config';
 const { host, user, name, password } = config.db;
 
 export const dbConnection = {
-  url: `mongodb://${user}:${password}@${host}/${name}?authSource=admin&retryWrites=true&w=majority`,
+  //url: `mongodb://${user}:${password}@${host}/${name}?authSource=admin&retryWrites=true&w=majority`,
   // For local development use this url
-  // url: `mongodb+srv://${user}:${password}@${host}/${name}?authSource=admin`,
+  url: `mongodb+srv://${user}:${password}@${host}/${name}?authSource=admin`,
   options: {
     useNewUrlParser: true,
     useUnifiedTopology: true,

packages/server/src/services/session.service.ts

@@ -442,9 +442,9 @@ export default class SessionService {
             - You are an expert video editor specializing in extracting and structuring full speaker presentations and panels from livestreams. 
             - Your task is to precisely indentify the start and end points of speaker presentations and panels from start to end, include the full speaker presentation or panel.
             - Usually speaker presentation and pannel are between 10 to 30 minutes long, dont extract 1 minute segemnts or similar, look for full speaker presentations and panels.
-             - Identify segments using markers such as:
-              - Introductions: e.g.,\"Thank you so much ....\", \"Welcome to...\", \"Next up, we have...\", \"Please give it up for...\", \"Let's get started with...\", \"We're excited to welcome...\", \"We're honored to present...\"
-              - Transitions or cues indicating the start or end of a keynote/panel: e.g., \"discussion on...\", \"presentation about...\", \"closing remarks on...\"
+            - Identify segments using markers such as:
+            - Introductions: e.g.,\"Thank you so much ....\", \"Welcome to...\", \"Next up, we have...\", \"Please give it up for...\", \"Let's get started with...\", \"We're excited to welcome...\", \"We're honored to present...\"
+            - Transitions or cues indicating the start or end of a keynote/panel: e.g., \"discussion on...\", \"presentation about...\", \"closing remarks on...\"
         
             Input: 
             - You will be given a vtt transcript of the livestream.
@@ -462,7 +462,6 @@ export default class SessionService {
           - Follow the output format exactly, just return an array of objects.
           - NEVER RETURN ANYTHING OTHER THAN AN ARRAY OF OBJECTS, ITS FORBIDDEN TO RETURN ANYTHING ELSE.
           - NEVER RETURN ANTYHNING WITH A TITLE THAT IS ALREADY PRESENTED AS A MARKER.
-          - RETURNED CLIPS SHOULD NOT OVERLAP WITH EACH OTHER.
           - RETURNED CLIPS SHOULD NOT BE SHORTER THAN 10 MINUTES.
           - DONT CLIPS THAT ARE ALREADY PRESENTED AS A MARKER.
         `,