long transcribes supported

packages/app/app/[organization]/layout.tsx

@@ -33,6 +33,7 @@ const Layout = async ({
 
   const userData = await fetchUserAction();
 
+  console.log(organization);
   if (!organization) {
     return NotFound();
   }

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

@@ -103,10 +103,8 @@ export const ClipProvider = ({
   organizationId: string;
   clipUrl: string;
 }) => {
-  const { handleTermChange, searchParams } = useSearchParams();
+  const { searchParams } = useSearchParams();
 
-  const start = searchParams?.get('start');
-  const end = searchParams?.get('end');
   const [playbackStatus, setPlaybackStatus] = useState<PlaybackStatus | null>(
     null
   );

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

@@ -1,9 +1,7 @@
 import { fetchOrganization } from '@/lib/services/organizationService';
 import {
   fetchAllSessions,
-  fetchAsset,
-  fetchSession,
-  sessionImport,
+  fetchSession
 } from '@/lib/services/sessionService';
 import { fetchStage, fetchStageRecordings } from '@/lib/services/stageService';
 import { ClipsPageParams } from '@/lib/types';
@@ -31,12 +29,11 @@ const fetchVideoDetails = async (
 
       const stageRecordings = await fetchStageRecordings({ streamId });
       if (!stageRecordings?.recordings[0]) return null;
-
       return {
-        videoSrc: stageRecordings.recordings[0].recordingUrl,
+        videoSrc: `https://livepeercdn.studio/hls/${liveStage.streamSettings?.playbackId}/index.m3u8`,
         type: 'livepeer',
         name: liveStage.name,
-        words: liveStage.transcripts?.text,
+        words: liveStage.transcripts?.chunks,
         liveRecording: stageRecordings.recordings[0],
       };
     }
@@ -47,13 +44,13 @@ const fetchVideoDetails = async (
 
       const stage = await fetchStage({ stage: session.stageId as string });
       if (!stage?.streamSettings?.playbackId) return null;
-
+      console.log('session', session.transcripts?.chunks);
       const videoSrc = await getVideoUrlAction(session);
       return {
         videoSrc,
         type: 'livepeer',
         name: session.name,
-        words: session.transcripts?.subtitleUrl,
+        words: session.transcripts?.chunks,
       };
     }
 
@@ -65,6 +62,7 @@ const fetchVideoDetails = async (
         videoSrc: stage.source.m3u8Url,
         type: stage.source.type,
         name: stage.name,
+        words: stage.transcripts?.chunks,
       };
     }
 
@@ -106,13 +104,6 @@ const ClipsConfig = async ({ params, searchParams }: ClipsPageParams) => {
       clipUrl={videoDetails.videoSrc}
     >
       <div className="flex flex-row w-full h-full border-t border-gray-200">
-        {/* <div className="flex flex-col w-[400px] h-full overflow-y-auto">
-          {words?.split('\n').map((word) => (
-            <div className="flex flex-col text-sm text-gray-500" key={word}>
-              {word}
-            </div>
-          ))}
-        </div> */}
         <div className="flex h-full w-[calc(100%-400px)] flex-col">
           <TopBar title={videoDetails.name} organization={organization} />
           <ReactHlsPlayer
@@ -130,6 +121,7 @@ const ClipsConfig = async ({ params, searchParams }: ClipsPageParams) => {
             stageSessions={stageSessions.sessions}
             organizationId={organizationId}
             animations={animations.sessions}
+            words={videoDetails.words}
           />
         </div>
       </div>

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

@@ -0,0 +1,41 @@
+"use client"
+import { useClipContext } from '../../ClipContext';
+
+const Transcripts = ({
+  words,
+}: {
+  words: { word: string; start: number }[];
+}) => {
+  const { currentTime, videoRef } = useClipContext();
+
+  // Helper function to determine if a word should be highlighted
+  const isWordActive = (
+    word: { word: string; start: number },
+    currentTime: number
+  ) => {
+    // You might want to adjust this logic based on your requirements
+    return word.start <= currentTime && word.start + 1 > currentTime;
+  };
+
+  return (
+    <div className="whitespace-pre-wrap">
+      {words?.map((word, index) => (
+        <span
+          key={`${word.word}-${index}`}
+          className={`${
+            isWordActive(word, currentTime) ? 'bg-yellow-200' : ''
+          } inline-block mr-1 cursor-pointer hover:bg-gray-100`}
+          onClick={() => {
+            if (videoRef.current) {
+              videoRef.current.currentTime = word.start;
+            }
+          }}
+        >
+          {word.word}
+        </span>
+      ))}
+    </div>
+  );
+};
+
+export default Transcripts;

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

@@ -7,17 +7,24 @@ import CreateClipButton from '../topBar/CreateClipButton';
 import AddOrEditMarkerForm from './markers/AddOrEditMarkerForm';
 import { IExtendedSession } from '@/lib/types';
 import ImportMarkersForm from './markers/ImportMarkersForm';
+import Transcripts from './Transcipts';
 
 export default function Sidebar({
   organizationId,
   stageSessions,
   liveRecordingId,
   animations,
+  words,
 }: {
   organizationId: string;
   stageSessions: IExtendedSession[];
   liveRecordingId?: string;
   animations: IExtendedSession[];
+  words?: {
+    word: string;
+    start: number;
+    end: number;
+  }[];
 }) {
   const { isCreatingClip, isAddingOrEditingMarker, isImportingMarkers } =
     useClipContext();
@@ -57,16 +64,22 @@ export default function Sidebar({
           )
       )}
       <Tabs defaultValue="clips" className="flex flex-col h-full">
-        <TabsList className="grid w-full grid-cols-2 flex-shrink-0">
+        <TabsList className="grid w-full grid-cols-3 flex-shrink-0">
           <TabsTrigger value="markers">Markers</TabsTrigger>
           <TabsTrigger value="clips">Clips</TabsTrigger>
+          {words && <TabsTrigger value="words">Words</TabsTrigger>}
         </TabsList>
         <TabsContent value="markers" className="flex-grow overflow-hidden">
           {<Markers organizationId={organizationId} />}
         </TabsContent>
         <TabsContent value="clips" className="flex-grow overflow-hidden">
           <SessionSidebar sessions={stageSessions} />
         </TabsContent>
+        {words && (
+          <TabsContent value="words" className="flex-grow overflow-auto p-4">
+            <Transcripts words={words} />
+          </TabsContent>
+        )}
       </Tabs>
     </div>
   );

packages/app/app/studio/[organization]/(root)/library/[session]/components/SessionTranscriptions.tsx

@@ -44,27 +44,41 @@ const SessionTranscriptions = ({
       });
   };
 
-  if (transcriptionState === TranscriptionStatus.processing) {
-    return (
-      <div className="flex items-center">
-        <LuLoader2 className="mr-2 w-4 h-4 animate-spin" /> Processing
-        transcription...{' '}
-        <p
-          className="pl-2 cursor-pointer"
-          title="refresh"
-          onClick={() => router.refresh()}
-        >
-          <LuRefreshCcw />
-        </p>
-      </div>
-    );
-  }
+  // if (transcriptionState === TranscriptionStatus.processing) {
+  //   return (
+  //     <div className="flex items-center">
+  //       <LuLoader2 className="mr-2 w-4 h-4 animate-spin" /> Processing
+  //       transcription...{' '}
+  //       <p
+  //         className="pl-2 cursor-pointer"
+  //         title="refresh"
+  //         onClick={() => router.refresh()}
+  //       >
+  //         <LuRefreshCcw />
+  //       </p>
+  //     </div>
+  //   );
+  // }
 
   if (
     transcriptionState === TranscriptionStatus.completed &&
     videoTranscription
   ) {
-    return <TextPlaceholder text={videoTranscription} />;
+    return (
+      <div className="space-y-4">
+        <TextPlaceholder text={videoTranscription} />
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleGenerateTranscription}
+          loading={isGeneratingTranscript}
+          className="flex items-center gap-2"
+        >
+          <LuRefreshCcw className="w-4 h-4" />
+          Regenerate Transcription
+        </Button>
+      </div>
+    );
   }
 
   if (transcriptionState === TranscriptionStatus.failed) {

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

@@ -29,7 +29,6 @@ const EditSession = async ({ params, searchParams }: studioPageParams) => {
     session: params.session,
   });
 
-  console.log(session?.transcripts?.chunks[0]);
   if (!session?.playbackId || !organization) return notFound();
 
   return (

packages/app/lib/actions/livepeer.ts

@@ -22,6 +22,9 @@ export const getVideoUrlAction = async (
   session: IExtendedSession
 ): Promise<string | null> => {
   try {
+    if (session.playback?.videoUrl) {
+      return session.playback.videoUrl;
+    }
     if (session.assetId) {
       const asset = await fetchAsset({ assetId: session.assetId });
       if (asset?.playbackUrl) {

packages/server/src/databases/index.ts

@@ -8,9 +8,9 @@ console.log('Database:', name);
 console.log('Password length:', password?.length);
 
 export const dbConnection = {
-  url: `mongodb://${user}:${password}@${host}/${name}?authSource=admin&retryWrites=true&w=majority`,
+  //rl: `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/workers/clips/index.ts

@@ -50,21 +50,31 @@ const processClip = async (data: IClip) => {
       );
     }
     const masterContent = await masterResponse.text();
-
+    console.log('masterContent', masterContent);
     // 2. Find the 1080p variant
     const linesMaster = masterContent.split('\n');
     let variantUrl = '';
+    let maxBandwidth = -1;
 
     for (let i = 0; i < linesMaster.length; i++) {
-      if (linesMaster[i].includes('1080p0')) {
-        variantUrl = linesMaster[i + 1].trim();
-        break;
+      if (linesMaster[i].startsWith('#EXT-X-STREAM-INF')) {
+        // Parse bandwidth from the stream info
+        const bandwidthMatch = linesMaster[i].match(/BANDWIDTH=(\d+)/);
+        if (bandwidthMatch) {
+          const bandwidth = parseInt(bandwidthMatch[1]);
+          if (bandwidth > maxBandwidth) {
+            maxBandwidth = bandwidth;
+            variantUrl = linesMaster[i + 1].trim();
+          }
+        }
       }
     }
-    variantUrl = clipUrl.replace('index.m3u8', variantUrl);
 
+    console.log('Selected variant URL:', variantUrl);
+    variantUrl = clipUrl.replace('index.m3u8', variantUrl);
+    console.log('Full variant URL:', variantUrl);
     if (!variantUrl) {
-      throw new Error('1080p variant not found in master playlist');
+      throw new Error('No valid variant found in master playlist');
     }
 
     const duration = end - start;
@@ -77,7 +87,7 @@ const processClip = async (data: IClip) => {
     const manifestResponse = await fetch(variantUrl);
     if (!manifestResponse.ok) {
       throw new Error(
-        `Failed to fetch manifest: ${manifestResponse.statusText}`,
+        `Failed to fetch manifest ${variantUrl}: ${manifestResponse.statusText}`,
       );
     }
     const manifestContent = await manifestResponse.text();