dev to prod

packages/app/app/[organization]/[event]/schedule/components/ScheduleComponent.tsx

@@ -1,7 +1,7 @@
 import StageSelect from './StageSelect';
 import DateSelect from './DateSelect';
 import SessionList from '@/components/sessions/SessionList';
-import { fetchAllSessions } from '@/lib/data';
+import { fetchAllSessions } from '@/lib/services/sessionService';
 import { getEventDays, getSessionDays } from '@/lib/utils/time';
 import { isSameDay } from '@/lib/utils/time';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

packages/app/app/[organization]/[event]/speakers/components/SpeakerComponent.tsx

@@ -1,6 +1,7 @@
 import SpeakerCard from './SpeakerCard';
 
-import { fetchEventSpeakers, fetchAllSessions } from '@/lib/data';
+import { fetchEventSpeakers } from '@/lib/data';
+import { fetchAllSessions } from '@/lib/services/sessionService';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { IExtendedEvent } from '@/lib/types';
 

packages/app/app/[organization]/[event]/stage/[stage]/page.tsx

@@ -1,7 +1,7 @@
 import Player from '@/components/ui/Player';
 import SessionInfoBox from '@/components/sessions/SessionInfoBox';
 import { EventPageProps } from '@/lib/types';
-import { fetchAllSessions } from '@/lib/data';
+import { fetchAllSessions } from '@/lib/services/sessionService';
 import { fetchEvent } from '@/lib/services/eventService';
 import { fetchStage } from '@/lib/services/stageService';
 import UpcomingSession from '../components/UpcomingSession';

packages/app/app/[organization]/[event]/stage/components/StageComponent.tsx

@@ -1,6 +1,6 @@
 import Player from '@/components/ui/Player';
 import SessionInfoBox from '@/components/sessions/SessionInfoBox';
-import { fetchAllSessions } from '@/lib/data';
+import { fetchAllSessions } from '@/lib/services/sessionService';
 import { fetchStage } from '@/lib/services/stageService';
 import { fetchChat } from '@/lib/services/chatService';
 import { Livepeer } from 'livepeer';

packages/app/app/[organization]/components/WatchGrid.tsx

@@ -1,4 +1,4 @@
-import { fetchAllSessions } from '@/lib/data';
+import { fetchAllSessions } from '@/lib/services/sessionService';
 import Link from 'next/link';
 import VideoCardSkeleton from '@/components/misc/VideoCard/VideoCardSkeleton';
 import Videos from '@/components/misc/Videos';
@@ -23,11 +23,7 @@ const WatchGrid = async ({
 
   return (
     <div className="w-full">
-      <Videos
-        videos={videos}
-        OrganizationSlug={organizationSlug}
-        maxVideos={gridLength}
-      />
+      <Videos videos={videos} maxVideos={gridLength} />
       {videos.length === 0 && (
         <div className="flex flex-row items-center justify-center space-x-4 rounded-xl bg-secondary p-4">
           <Video size={20} />

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

@@ -6,6 +6,8 @@ import { fetchOrganization } from '@/lib/services/organizationService';
 import NotFound from '@/not-found';
 import Support from '@/components/misc/Support';
 import { fetchUserAction } from '@/lib/actions/users';
+import React from 'react';
+
 const Layout = async ({
   params,
   children,
@@ -41,7 +43,7 @@ const Layout = async ({
     <div className="mx-auto flex min-h-[100vh] w-full flex-col bg-white">
       <HomePageNavbar
         logo={organization?.logo}
-        currentOrganization={params.organization}
+        currentOrganization={organization._id}
         pages={pages}
         showSearchBar
         showLogo={true}

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

@@ -2,14 +2,11 @@ import NotFound from '@/not-found';
 import { Metadata, ResolvingMetadata } from 'next';
 import {
   fetchOrganization,
-  fetchOrganizations,
 } from '@/lib/services/organizationService';
 import { ChannelPageParams } from '@/lib/types';
 import ChannelShareIcons from './components/ChannelShareIcons';
 import Image from 'next/image';
-import { AspectRatio } from '@/components/ui/aspect-ratio';
 import { Suspense } from 'react';
-import { Card } from '@/components/ui/card';
 import StreamethLogoWhite from '@/lib/svg/StreamethLogoWhite';
 import UpcomingStreams, {
   UpcomingStreamsLoading,
@@ -19,14 +16,12 @@ import ChannelDescription from './components/ChannelDescription';
 import { livestreamMetadata, generalMetadata } from '@/lib/utils/metadata';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 import ArchiveVideos from './videos/components/ArchiveVideos';
+import ArchiveVideoSkeleton from './livestream/components/ArchiveVideosSkeleton';
 
 const OrganizationHome = async ({
   params,
   searchParams,
 }: ChannelPageParams) => {
-  if (!params.organization) {
-    return NotFound();
-  }
 
   const organization = await fetchOrganization({
     organizationSlug: params.organization,
@@ -36,24 +31,7 @@ const OrganizationHome = async ({
     return NotFound();
   }
 
-  const allStreams = (
-    await fetchOrganizationStages({
-      organizationId: organization._id,
-    })
-  ).filter(
-    (stream) =>
-      stream.published &&
-      (stream.streamSettings?.isActive ||
-        new Date(stream?.streamDate as string) > new Date())
-  );
 
-  const sortedStreams = allStreams.sort(
-    (a, b) =>
-      new Date(a.streamDate as string).getTime() -
-      new Date(b.streamDate as string).getTime()
-  );
-
-  const stage = sortedStreams.length > 0 ? sortedStreams[0] : null;
 
   return (
     <div className="mx-auto w-full max-w-7xl space-y-4 md:p-4">
@@ -95,7 +73,7 @@ const OrganizationHome = async ({
             <h1 className="text-xl font-bold">Videos</h1>
           </TabsTrigger>
         </TabsList>
-        <TabsContent value="livestreams">
+        <TabsContent value="livestreams" className="px-4 md:px-0">
           <Suspense fallback={<UpcomingStreamsLoading />}>
             <UpcomingStreams
               organizationId={organization._id}
@@ -104,11 +82,16 @@ const OrganizationHome = async ({
             />
           </Suspense>
         </TabsContent>
-        <TabsContent value="videos">
+        <TabsContent value="videos" className="px-4 md:px-0">
+        <Suspense fallback={<ArchiveVideoSkeleton />}>
           <ArchiveVideos
-            organizationSlug={params.organization}
-            searchQuery={searchParams.search}
-          />
+              organizationId={organization._id}
+              organizationSlug={params.organization}
+              searchQuery={searchParams.search}
+              gridLength={12}
+              page={Number(searchParams.page) || 1}
+            />
+          </Suspense>
         </TabsContent>
       </Tabs>
     </div>

packages/app/app/[organization]/videos/components/ArchiveVideos.tsx

@@ -1,101 +1,33 @@
-'use client';
-import { IExtendedSession, IPagination } from '@/lib/types';
 import { fetchAllSessions } from '@/lib/services/sessionService';
 import VideoGrid from '@/components/misc/Videos';
-import { useEffect, useState } from 'react';
-import { FileQuestion, VideoOff } from 'lucide-react';
-import Pagination from './pagination';
-import { fetchOrganization } from '@/lib/services/organizationService';
-import { ProcessingStatus } from 'streameth-new-server/src/interfaces/session.interface';
+import { FileQuestion } from 'lucide-react';
+import Pagination from '@/app/studio/[organization]/(root)/library/components/Pagination';
 
 interface ArchiveVideosProps {
+  organizationId?: string;
   organizationSlug?: string;
-  event?: string;
   searchQuery?: string;
+  page?: number;
+  gridLength: number;
 }
 
-const ArchiveVideos = ({
+const ArchiveVideos = async ({
+  organizationId,
   organizationSlug,
-  event,
   searchQuery,
+  page,
+  gridLength = 10,
 }: ArchiveVideosProps) => {
-  const [isLoading, setIsLoading] = useState(false);
-  const [videos, setVideos] = useState<IExtendedSession[]>([]);
-  const [pagination, setPagination] = useState<IPagination | null>(null);
-  const [currentSearchQuery, setCurrentSearchQuery] = useState('');
-  const [currentEvent, setCurrentEvent] = useState('');
 
-  const fetchSessions = async ({
-    page = 1,
-    reset,
-  }: {
-    page?: number;
-    reset?: boolean;
-  }) => {
-    setIsLoading(true);
-    try {
-      let params: Parameters<typeof fetchAllSessions>[0] = {
-        event,
-        limit: 12,
-        onlyVideos: true,
-        published: 'public',
-        searchQuery,
-        page,
-        itemStatus: ProcessingStatus.completed,
-      };
+  const { sessions: videos, pagination } = await fetchAllSessions({
+    organizationId,
+    limit: gridLength,
+    onlyVideos: true,
+    published: 'public',
+    searchQuery,
+    page,
+    });
 
-      if (organizationSlug) {
-        console.log('🎯 Fetching organization:', organizationSlug);
-        const organization = await fetchOrganization({ organizationSlug });
-        if (!organization) {
-          console.error('❌ Organization not found');
-          setIsLoading(false);
-          return;
-        }
-        console.log('✅ Found organization:', organization._id);
-        params = {
-          ...params,
-          organizationId: organization._id,
-          organizationSlug,
-        };
-      }
-
-      console.log('🎯 Fetching sessions with params:', params);
-
-      const { sessions, pagination: newPagination } = await fetchAllSessions(params);
-
-      console.log('✅ Fetched sessions:', {
-        sessionsCount: sessions.length,
-        pagination: newPagination,
-      });
-
-      if (reset) {
-        setVideos(sessions);
-      } else {
-        setVideos([...videos, ...sessions]);
-      }
-      setPagination(newPagination);
-    } catch (error) {
-      console.error('❌ Failed to fetch sessions:', error);
-      if (error instanceof Error) {
-        console.error('Error details:', error.message);
-      }
-      if (error instanceof Response) {
-        const text = await error.text();
-        console.error('Response error:', text);
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    if (searchQuery !== currentSearchQuery || event !== currentEvent) {
-      setCurrentSearchQuery(searchQuery || '');
-      setCurrentEvent(event || '');
-      fetchSessions({ reset: true });
-    }
-  }, [searchQuery, event]);
 
   if (videos.length === 0) {
     return (
@@ -110,15 +42,8 @@ const ArchiveVideos = ({
 
   return (
     <>
-      <VideoGrid
-        OrganizationSlug={organizationSlug}
-        videos={videos}
-      />
-      <Pagination
-        pagination={pagination}
-        fetch={fetchSessions}
-        isLoading={isLoading}
-      />
+      <VideoGrid videos={videos} />
+      {page && pagination.totalPages > 1 && <Pagination {...pagination} />}
     </>
   );
 };

packages/app/app/[organization]/videos/page.tsx

@@ -12,10 +12,9 @@ import Image from 'next/image';
 import { fetchOrganization } from '@/lib/services/organizationService';
 import { notFound } from 'next/navigation';
 import EventSelect from './components/eventSelect';
-import { fetchAllSessions } from '@/lib/data';
+import { fetchAllSessions } from '@/lib/services/sessionService';
 import {
   generalMetadata,
-  livestreamMetadata,
   organizationMetadata,
 } from '@/lib/utils/metadata';
 
@@ -80,9 +79,11 @@ export default async function ArchivePage({
         </div>
         <Suspense fallback={<ArchiveVideoSkeleton />}>
           <ArchiveVideos
+            organizationId={organization._id}
             organizationSlug={params.organization}
-            searchQuery={searchParams.searchQuery || ''}
-            event={searchParams.event}
+            searchQuery={searchParams.searchQuery}
+            page={Number(searchParams.page) || 1}
+            gridLength={12}
           />
         </Suspense>
       </div>