Bug fixes

.gitignore

@@ -48,3 +48,7 @@ google_sa_secret.json
 
 # Sentry Config File
 .sentryclirc
+
+.yarn/*
+.yarn
+.yarn/

packages/app/app/(home)/components/OrganizationStrip.tsx

@@ -30,7 +30,6 @@ export default async function OrganizationStrip({
           height={34}
           width={34}
         />
-
         <Link href={archivePath({ organization: organization.slug })}>
           <CardTitle className=" text-2xl ml-2 mr-auto hover:underline">
             {organization.name} {' >'}

packages/app/app/(home)/components/UpcomingEvents.tsx

@@ -9,23 +9,23 @@ import {
 import Image from 'next/image'
 import Link from 'next/link'
 import React from 'react'
-
-import { IOrganizationModel } from 'streameth-new-server/src/interfaces/organization.interface'
-
 import { fetchEvents } from '@/lib/services/eventService'
 import { archivePath } from '@/lib/utils/utils'
 import { Button } from '@/components/ui/button'
 import Thumbnail from '@/components/misc/VideoCard/thumbnail'
 import { getDateAsString } from '@/lib/utils/time'
+import { IExtendedOrganization } from '@/lib/types'
 
 const UpcomingEvents = async ({
+  organizations,
   date,
   organization,
   archive,
 }: {
   date?: Date
-  organization?: IOrganizationModel['_id']
   archive?: boolean
+  organizations?: IExtendedOrganization[]
+  organization?: IExtendedOrganization['_id']
 }) => {
   const events = (
     await fetchEvents({
@@ -38,6 +38,13 @@ const UpcomingEvents = async ({
     return true
   })
 
+  const organizationSlug = (organizationId: string) => {
+    const orgSlug = organizations?.find(
+      (org) => org._id === organizationId
+    )?.slug
+    return orgSlug ? orgSlug : organization
+  }
+
   if (events.length === 0) return null
 
   return (
@@ -48,7 +55,7 @@ const UpcomingEvents = async ({
           Explore current and past events
         </CardDescription>
       </CardHeader>
-      <CardContent className="px-0 lg:px-0 flex flex-row overflow-auto space-x-4 ">
+      <CardContent className="w-full px-0 lg:px-0 flex flex-row overflow-auto space-x-4 ">
         {events.map(
           (
             {
@@ -61,12 +68,17 @@ const UpcomingEvents = async ({
             },
             index
           ) => (
-            <Link key={index} href={`/${organizationId}/${slug}`}>
-              <Card
-                className="p-2 w-[350px] h-full border-none text-foreground"
-                style={{
-                  backgroundColor: accentColor,
-                }}>
+            <Card
+              key={index}
+              className="p-2 w-full lg:w-[350px] h-full border-none text-foreground"
+              style={{
+                backgroundColor: accentColor,
+              }}>
+              <Link
+                href={`/${organizationSlug(
+                  organizationId as string
+                )}/${slug}`}
+                className="w-full h-full">
                 <div className=" min-h-full rounded-xl  uppercase">
                   <div className=" relative">
                     <Thumbnail imageUrl={eventCover} />
@@ -83,8 +95,8 @@ const UpcomingEvents = async ({
                     </CardDescription>
                   </CardHeader>
                 </div>
-              </Card>
-            </Link>
+              </Link>
+            </Card>
           )
         )}
       </CardContent>

packages/app/app/(home)/page.tsx

@@ -21,7 +21,10 @@ export default async function Home() {
     <>
       <HeroHeader />
       <Suspense fallback={<UpcomingLoader />}>
-        <UpcomingEvents date={new Date()} />
+        <UpcomingEvents
+          organizations={organizations}
+          date={new Date()}
+        />
       </Suspense>
       <div className="">
         <CardHeader className="px-0 lg:px-0">

packages/app/app/(vod)/components/pagination.tsx

@@ -7,9 +7,7 @@ import {
 } from '@heroicons/react/24/outline'
 
 const Pagination = (props: IPagination) => {
-  const { handleTermChange, searchParams } = useSearchParams({
-    key: 'page',
-  })
+  const { handleTermChange, searchParams } = useSearchParams()
   const currentPage = Number(searchParams.get('page')) || 1
 
   return (
@@ -19,7 +17,12 @@ const Pagination = (props: IPagination) => {
           className="p-2 rounded-full  hover:bg-gray-100"
           onClick={() => {
             if (currentPage > 1) {
-              handleTermChange((currentPage - 1).toString())
+              handleTermChange([
+                {
+                  key: 'page',
+                  value: (currentPage - 1).toString(),
+                },
+              ])
             }
           }}>
           <ArrowLeftIcon className="h-6 w-6" />
@@ -31,7 +34,9 @@ const Pagination = (props: IPagination) => {
           className="p-2 rounded-full  hover:bg-gray-100"
           onClick={() => {
             if (currentPage < props.totalPages) {
-              handleTermChange((currentPage + 1).toString())
+              handleTermChange([
+                { key: 'page', value: (currentPage + 1).toString() },
+              ])
             }
           }}>
           <ArrowRightIcon className="h-6 w-6" />

packages/app/app/(vod)/watch/components/VideoDownload.tsx

@@ -1,14 +1,15 @@
-'use client'
-import React, { useState } from 'react'
-import { useAsset } from '@livepeer/react'
+import { Livepeer } from 'livepeer'
 import { Badge } from '@/components/ui/badge'
 
 import { ArrowDownIcon } from '@heroicons/react/24/outline'
-const VideoDownload = ({ assetId }: { assetId: string }) => {
-  const { data: asset, isLoading } = useAsset({ assetId })
+const VideoDownload = async ({ assetId }: { assetId: string }) => {
+  const livepeer = new Livepeer({
+    apiKey: process.env.LIVEPEER_API_KEY,
+  })
 
-  if (isLoading) return null
-  if (!asset?.downloadUrl) return null
+  const asset = (await livepeer.asset.get(assetId)).asset
+
+  if (!asset) return null
 
   return (
     <a

packages/app/app/(vod)/watch/components/ViewCounts.tsx

@@ -1,13 +1,12 @@
-'use client'
-import { useAssetMetrics } from '@livepeer/react'
+import { getSessionMetrics } from '@/lib/actions/sessions'
 
-const ViewCounts = ({ assetId }: { assetId: string }) => {
-  const { data, isLoading } = useAssetMetrics({ assetId })
-  if (isLoading) return null
-  const viewMetrics = data?.metrics[0].startViews
+const ViewCounts = async ({ playbackId }: { playbackId: string }) => {
+  const data = await getSessionMetrics({ playbackId })
 
   return (
-    <p className="text-sm text-secodary py-2">{viewMetrics} views</p>
+    <p className="text-sm text-secodary py-2">
+      {data.viewCount} views
+    </p>
   )
 }
 

packages/app/app/(vod)/watch/page.tsx

@@ -1,4 +1,4 @@
-import Player from '@/components/ui/Player'
+import { PlayerWithControls } from '@/components/ui/Player'
 import SessionInfoBox from '@/components/sessions/SessionInfoBox'
 import { WatchPageProps } from '@/lib/types'
 import {
@@ -12,7 +12,7 @@ import { Metadata } from 'next'
 import { apiUrl } from '@/lib/utils/utils'
 import { notFound } from 'next/navigation'
 import { generalMetadata, watchMetadata } from '@/lib/utils/metadata'
-import { fetchSession } from '@/lib/data'
+import { fetchSession } from '@/lib/services/sessionService'
 
 export default async function Watch({
   searchParams,
@@ -21,7 +21,7 @@ export default async function Watch({
   const video = await fetchSession({
     session: searchParams.session,
   })
-  if (!video) return notFound()
+  if (!video || !video.videoUrl) return notFound()
 
   const tabs = []
   tabs.push({
@@ -31,11 +31,17 @@ export default async function Watch({
 
   return (
     <div className="h-full flex flex-col w-full gap-4 lg:flex-row relative">
-      <div className="flex flex-col w-full h-full z-40 lg:w-[75%] sticky lg:relative lg:top-0 gap-2 ">
-        <Player
-          assetId={video.assetId}
-          playbackId={video.playbackId}
-          playerName={video.name}
+      <div className="flex flex-col w-full h-full lg:w-[75%] gap-2 ">
+        <PlayerWithControls
+          src={[
+            {
+              src: video.videoUrl as `${string}m3u8`,
+              width: 1920,
+              height: 1080,
+              mime: 'application/vnd.apple.mpegurl',
+              type: 'hls',
+            },
+          ]}
         />
         <SessionInfoBox
           title={video.name}
@@ -44,6 +50,7 @@ export default async function Watch({
           playbackId={video.playbackId}
           speakers={video.speakers}
           assetId={video.assetId}
+          vod={true}
           viewCount
         />
       </div>

packages/app/app/[organization]/[event]/components/EventHomeComponent.tsx

@@ -48,7 +48,7 @@ export default function EventHomeComponent({
   const bannerImg = event.banner !== '' ? event.banner : banner
   return (
     <div className="flex flex-col w-full h-full bg-event px-2">
-      <div className=" relative space-y-4 lg:my-4 max-w-full lg:max-w-4xl mx-auto z-50">
+      <div className="w-full relative space-y-4 lg:my-4 max-w-full lg:max-w-4xl mx-auto z-50">
         <Card className="text-white bg-opacity-[0.04] bg-white border-white border-opacity-[0.04] lg:rounded-xl shadow">
           <AspectRatio ratio={3 / 1} className="overflow-clip">
             <Image

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

@@ -10,14 +10,19 @@ import {
 import useSearchParams from '@/lib/hooks/useSearchParams'
 
 const DateSelect = ({ dates }: { dates: number[] }) => {
-  const { searchParams, handleTermChange } = useSearchParams({
-    key: 'date',
-  })
+  const { searchParams, handleTermChange } = useSearchParams()
 
   return (
     <Select
       defaultValue={searchParams.get('date') || dates[0].toString()}
-      onValueChange={(value) => handleTermChange(value)}>
+      onValueChange={(value) =>
+        handleTermChange([
+          {
+            key: 'date',
+            value,
+          },
+        ])
+      }>
       <SelectTrigger className="bg-white bg-opacity-10 rounded-lg border-white border-opacity-10">
         <SelectValue placeholder="Date select" />
       </SelectTrigger>

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

@@ -55,7 +55,7 @@ const ScheduleCard = ({
             {speakers && (
               <div className="flex py-1 items-center flex-row space-x-2 overflow-auto mt-auto">
                 {session.speakers.map((speaker) => (
-                  <SpeakerIcon key={speaker._id} speaker={speaker} />
+                  <SpeakerIcon key={speaker?._id} speaker={speaker} />
                 ))}
               </div>
             )}

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

@@ -33,7 +33,7 @@ const ScheduleCardModal = ({
   }, [])
 
   const handleGoToStage = () => {
-    const stageUrl = `/${paramsOrgId}/${session.eventId}/stage/${session.stageId}`
+    const stageUrl = `/${paramsOrgId}/${event.slug}/stage/${session.stageId}`
     !pathname.includes('schedule')
       ? router.push(stageUrl)
       : window.open(stageUrl, '_blank', 'noreferrer')
@@ -59,7 +59,7 @@ const ScheduleCardModal = ({
         {session.description && <p>{session.description}</p>}
         <p className="flex flex-row flex-wrap mt-3">
           {session.speakers.map((speaker) => (
-            <SpeakerIcon key={speaker._id} speaker={speaker} />
+            <SpeakerIcon key={speaker?._id} speaker={speaker} />
           ))}
         </p>
       </CredenzaBody>

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

@@ -13,14 +13,19 @@ import {
 } from '@/components/ui/select'
 
 const StageSelect = ({ stages }: { stages: IStageModel[] }) => {
-  const { searchParams, handleTermChange } = useSearchParams({
-    key: 'stage',
-  })
+  const { searchParams, handleTermChange } = useSearchParams()
 
   return (
     <Select
       defaultValue={searchParams.get('stage') || stages[0]?._id}
-      onValueChange={(value: string) => handleTermChange(value)}>
+      onValueChange={(value: string) =>
+        handleTermChange([
+          {
+            key: 'stage',
+            value,
+          },
+        ])
+      }>
       <SelectTrigger className="bg-white bg-opacity-10 rounded-lg border-white border-opacity-10">
         <SelectValue placeholder="Stage select" />
       </SelectTrigger>

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

@@ -24,7 +24,7 @@ const SpeakerCard = ({
 }) => {
   const speakerSessions = sessions?.filter((session) =>
     session.speakers.some(
-      (sessionSpeaker) => sessionSpeaker._id === speaker._id
+      (sessionSpeaker) => sessionSpeaker?._id === speaker?._id
     )
   )
 
@@ -41,11 +41,7 @@ const SpeakerCard = ({
           </CardDescription>
         </Card>
       </CredenzaTrigger>
-      <SpeakerModal
-        event={event}
-        speaker={speaker}
-        sessions={speakerSessions}
-      />
+      <SpeakerModal speaker={speaker} sessions={speakerSessions} />
     </Credenza>
   )
 }

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

@@ -1,7 +1,4 @@
-import ScheduleCard from '@/app/[organization]/[event]/schedule/components/ScheduleCard'
-
-import { ISessionModel } from 'streameth-new-server/src/interfaces/session.interface'
-import { ISpeakerModel } from 'streameth-new-server/src/interfaces/speaker.interface'
+import { ISpeaker } from 'streameth-new-server/src/interfaces/speaker.interface'
 
 import {
   CredenzaContent,
@@ -15,25 +12,26 @@ import Link from 'next/link'
 import { IExtendedEvent, IExtendedSession } from '@/lib/types'
 
 interface Params {
-  event: IExtendedEvent
-  speaker: ISpeakerModel
+  speaker: ISpeaker
   sessions?: IExtendedSession[]
 }
 
 const SpeakerModal = ({ speaker }: Params) => {
   return (
     <CredenzaContent>
       <CredenzaHeader>
-        <CredenzaTitle>{speaker.name}</CredenzaTitle>
+        <CredenzaTitle>{speaker?.name}</CredenzaTitle>
         <CredenzaDescription>
-          {speaker.twitter && (
-            <Link href={`https://x.com/${speaker.twitter}`}>
+          {speaker?.twitter && (
+            <Link
+              target="_blank"
+              href={`https://x.com/${speaker?.twitter}`}>
               Follow on X
             </Link>
           )}
         </CredenzaDescription>
       </CredenzaHeader>
-      <CredenzaBody className="p-4">{speaker.bio}</CredenzaBody>
+      <CredenzaBody className="p-4">{speaker?.bio}</CredenzaBody>
     </CredenzaContent>
   )
 }