Refactor and Clean Up Code: Remove console logs, unused imports, and improve component structure across various files. Update session handling in Clips components and enhance video source fetching logic. Adjust button styles for consistency and improve loading states in the UI.

Author: pblvrt

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

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

packages/app/app/api/google/callback/route.ts

@@ -31,7 +31,6 @@ export async function GET(request: NextRequest) {
 
     const streamEnabled = await isStreamingEnabled(tokenDetails.access_token);
     if (redirectUrl.includes('speaker/') && tokenDetails.channelId) {
-      console.log('tokenDetails', tokenDetails);
       // store data to local storage
       cookies().set(
         'youtube_publish',

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

@@ -1,6 +1,6 @@
 import { fetchOrganization } from '@/lib/services/organizationService';
 import { fetchSession } from '@/lib/services/sessionService';
-import { fetchStage } from '@/lib/services/stageService';
+import { fetchStage, fetchStageRecordings } from '@/lib/services/stageService';
 import { ClipsPageParams } from '@/lib/types';
 import { notFound } from 'next/navigation';
 import React, { Suspense } from 'react';
@@ -13,6 +13,7 @@ import TopBar from './topBar';
 import { getVideoUrlAction } from '@/lib/actions/livepeer';
 import { MarkersProvider } from './sidebar/markers/markersContext';
 import { ClipsSidebarProvider } from './sidebar/clips/ClipsContext';
+import { getLiveStageSrcValue } from '@/lib/utils/utils';
 const fetchVideoDetails = async (
   videoType: string,
   stageId: string,
@@ -23,9 +24,14 @@ const fetchVideoDetails = async (
       const liveStage = await fetchStage({ stage: stageId });
       const streamId = liveStage?.streamSettings?.streamId;
       if (!streamId) return null;
-
+      const allRecordings = await fetchStageRecordings({ streamId });
+      if (!allRecordings) return null;
+      const latestRecording = allRecordings[0];
       return {
-        videoSrc: `https://livepeercdn.studio/hls/${liveStage.streamSettings?.playbackId}/index.m3u8`,
+        videoSrc: getLiveStageSrcValue({
+          playbackId: latestRecording.playbackId,
+          recordingId: latestRecording.id,
+        }),
         type: 'livepeer',
         name: liveStage.name,
         transcribe: liveStage.transcripts?.chunks,
@@ -98,7 +104,7 @@ const ClipsConfig = async ({ params, searchParams }: ClipsPageParams) => {
                 <TopBar
                   stageId={stageId}
                   organization={organization}
-                  currentSessionId={sessionId}
+                  sessionId={sessionId}
                 />
               </Suspense>
               <ReactHlsPlayer

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

@@ -34,11 +34,6 @@ export default function Clip({ session }: { session: IExtendedSession }) {
         getAsset();
       }, 10000);
       return () => clearInterval(interval);
-    } else if (session.processingStatus === ProcessingStatus.pending) {
-      const interval = setInterval(() => {
-        router.refresh();
-      }, 10000);
-      return () => clearInterval(interval);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [asset?.status?.phase]);

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

@@ -58,18 +58,11 @@ export function ClipsSidebarProvider({
       type: SessionType.clip,
     });
     setSessions(sessions.sessions);
-    console.log('sessions', sessions.sessions);
     setIsLoading(false);
   };
 
   useEffect(() => {
-    const timeout = setTimeout(() => {
-      fetchSessions();
-    }, 5000);
-
-    return () => {
-      clearTimeout(timeout);
-    };
+    fetchSessions();
   }, [stageId]);
 
   useEffect(() => {

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

@@ -16,9 +16,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 
 const SessionSidebar = () => {
   const {
-    sessions,
     filteredSessions,
-    searchTerm,
     setSearchTerm,
     selectedDate,
     setSelectedDate,

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

@@ -69,7 +69,6 @@ const Markers = ({ sessionId }: { sessionId: string }) => {
       prompt: prompt,
     })
       .then((res) => {
-        console.log(res);
         fetchAndSetMarkers();
         setIsExtracting(false);
       })

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

@@ -4,45 +4,56 @@ import Link from 'next/link';
 import { ArrowLeft } from 'lucide-react';
 import Combobox from '@/components/ui/combo-box';
 import { useRouter } from 'next/navigation';
-import { IExtendedSession } from '@/lib/types';
+
+interface Recording {
+  label: string;
+  value: string;
+  url: string;
+}
+
+interface SessionSelectorProps {
+  recordings: Recording[];
+  currentSession: Recording;
+  stageName: string;
+  organization: string;
+}
 
 const SessionSelector = ({
   recordings,
-  currentSessionId,
+  currentSession,
   stageName,
   organization,
-}: {
-  recordings: IExtendedSession[];
-  currentSessionId: string;
-  stageName: string;
-  organization: string;
-}) => {
+}: SessionSelectorProps) => {
   const router = useRouter();
-  const currentSession = recordings.find(
-    (recording) => recording._id === currentSessionId
-  );
-  if (!currentSession) return null;
+
+  if (!currentSession || !recordings.length) {
+    return null;
+  }
+
   return (
     <div className="p-2 flex w-full bg-white flex-row justify-between items-center">
       <div className="flex flex-row items-center w-full">
-        <p className="text-md uppercase font-light mr-4">Editing {stageName}</p>
+        <p className="text-md uppercase font-light mr-4" aria-label={`Editing stage: ${stageName}`}>
+          Editing: {stageName}
+        </p>
         <Combobox
-          items={recordings.map((recording, index) => ({
-            label: `Recording ${index + 1}`,
-            value: recording._id,
-          }))}
+          items={recordings}
           variant="outline"
-          value={currentSession._id}
+          value={currentSession.value}
           setValue={(value) => {
-            if (value) {
-              router.push(
-                `/studio/${organization}/clips/${currentSession.stageId}?sessionId=${value}&videoType=recording`
-              );
+            if (!value) return;
+            const selectedRecording = recordings.find(rec => rec.value === value);
+            if (selectedRecording) {
+              router.push(selectedRecording.url);
             }
           }}
+          aria-label="Select recording session"
         />
       </div>
-      <Link href={`/studio/${organization}/library?clipable=true`}>
+      <Link 
+        href={`/studio/${organization}/library?clipable=true`}
+        aria-label="Exit to library"
+      >
         <Button variant="secondary" className="mb-2 px-2">
           <ArrowLeft className="mr-2 h-4 w-4" />
           Exit

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

@@ -1,28 +1,67 @@
 import { fetchAllSessions } from '@/lib/services/sessionService';
-import { fetchStage } from '@/lib/services/stageService';
+import { fetchStage, fetchStageRecordings } from '@/lib/services/stageService';
 import { SessionType } from 'streameth-new-server/src/interfaces/session.interface';
 import SessionSelector from './SessionSelector';
+import { RecordingStatus } from 'livepeer/models/components';
+
+interface SessionOption {
+  label: string;
+  value: string;
+  url: string;
+}
+
 const TopBar = async ({
   stageId,
   organization,
-  currentSessionId,
+  sessionId,
 }: {
   stageId: string;
   organization: string;
-  currentSessionId: string;
+  sessionId?: string;
 }) => {
-  const stage = await fetchStage({ stage: stageId });
-  if (!stage) return null;
-  const allRecordings = await fetchAllSessions({
-    stageId,
-    type: SessionType.livestream,
+  const [allSessions, stage] = await Promise.all([
+    fetchAllSessions({
+      stageId,
+      type: SessionType.livestream,
+    }),
+    fetchStage({ stage: stageId }),
+  ]);
+
+  const stageRecordings = await fetchStageRecordings({
+    streamId: stage?.streamSettings?.streamId || '',
   });
-  const recordings = allRecordings.sessions;
+
+  const hasActiveLivestream = stageRecordings?.some(
+    (recording) => recording.recordingStatus === RecordingStatus.Waiting
+  );
+  const sessionOptions: SessionOption[] = allSessions.sessions.map(
+    (session) => ({
+      label: session.name,
+      value: session._id,
+      url: `/studio/${organization}/clips/${stageId}?sessionId=${session._id}&videoType=recording`,
+    })
+  );
+
+  let currentSession: SessionOption;
+  currentSession =
+    sessionOptions.find((session) => session.value === sessionId) ||
+    sessionOptions[0];
+
+  if (!sessionId || hasActiveLivestream) {
+    // Add live option when sessionId is provided
+    const liveOption: SessionOption = {
+      label: 'Live',
+      value: stageId,
+      url: `/studio/${organization}/clips/${stageId}?videoType=livestream`,
+    };
+    sessionOptions.push(liveOption);
+    !sessionId && (currentSession = liveOption);
+  }
   return (
     <SessionSelector
-      recordings={recordings}
-      currentSessionId={currentSessionId}
-      stageName={stage?.name}
+      recordings={sessionOptions}
+      currentSession={currentSession}
+      stageName={stage?.name || ''}
       organization={organization}
     />
   );

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

@@ -29,7 +29,6 @@ const SessionTranscriptions = ({
       sessionId,
     })
       .then((response) => {
-        console.log('response', response);
         if (response) {
           toast.success('Transcription request sent successfully');
         } else {

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

@@ -37,7 +37,7 @@ const EditSession = async ({ params, searchParams }: studioPageParams) => {
         <h1 className="text-lg font-bold mb-4">Video Details</h1>
         <div className="mb-4">
           <Link href={`/studio/${params.organization}/library`}>
-            <Button variant="ghost" className="mb-2 px-2">
+            <Button variant="secondary" className="mb-2 px-2">
               <ArrowLeft className="mr-2 h-4 w-4" />
               Back to homepage
             </Button>

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

@@ -2,7 +2,7 @@
 
 import { IExtendedSession } from '@/lib/types';
 import { updateSessionAction } from '@/lib/actions/sessions';
-import { Globe, Lock, Loader2, Binoculars, EyeClosed } from 'lucide-react';
+import { Globe, Lock, Loader2, Binoculars, ScanEye } from 'lucide-react';
 import { useState } from 'react';
 import {
   DropdownMenuPortal,
@@ -87,7 +87,7 @@ const VisibilityButton = ({ session }: { session: IExtendedSession }) => {
               className="flex items-center space-x-2 cursor-pointer"
               value={eVisibilty.unlisted}
             >
-              <EyeClosed className="w-4 h-4" />
+              <ScanEye className="w-4 h-4" />
               <span>Unlisted</span>
             </DropdownMenuRadioItem>
             <DropdownMenuRadioItem

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

@@ -7,7 +7,6 @@ import {
 } from '@/lib/types';
 import Destinations from './Destinations';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import ClipsList from './ClipsList';
 import { Card } from '@/components/ui/card';
 
 const Sidebar = ({
@@ -22,18 +21,20 @@ const Sidebar = ({
   return (
     <Card className="md:shadow-none w-full flex flex-col h-[calc(100vh-12rem)] mb-4 overflow-hidden">
       <Tabs defaultValue="destinations" className="flex flex-col h-full">
-        <TabsList className="grid grid-cols-2 w-full">
-          <TabsTrigger value="destinations">Destinations</TabsTrigger>
-          <TabsTrigger value="clips">Clips</TabsTrigger>
+        <TabsList className=" w-full">
+          <TabsTrigger value="destinations" className="w-full">
+            Destinations
+          </TabsTrigger>
+          {/* <TabsTrigger value="clips">Clips</TabsTrigger> */}
         </TabsList>
-        <TabsContent className="flex-grow overflow-hidden" value="clips">
+        {/* <TabsContent className="flex-grow overflow-hidden" value="clips">
           <div className="h-full overflow-y-auto">
             <ClipsList
               organizationSlug={organization.slug!}
               sessions={sessions}
             />
           </div>
-        </TabsContent>
+        </TabsContent> */}
         <TabsContent className="flex-grow overflow-hidden" value="destinations">
           <div className="h-full overflow-y-auto">
             <Destinations stream={stage} organization={organization} />