Mobile padding and cache bug

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

@@ -17,7 +17,7 @@ const ArchiveVideos = async ({ searchParams }: SearchPageProps) => {
   return (
     <div>
       <div className="flex flex-row items-center justify-between mb-4">
-        <CardTitle className="">Results</CardTitle>
+        <CardTitle className="px-2 lg:p-0">Results</CardTitle>
         <Pagination {...videos.pagination} />
       </div>
       <Videos videos={videos.sessions} />

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

@@ -1,10 +1,7 @@
 'use client'
 import { IPagination } from '@/lib/types'
 import useSearchParams from '@/lib/hooks/useSearchParams'
-import {
-  ArrowLeftIcon,
-  ArrowRightIcon,
-} from '@heroicons/react/24/outline'
+import { ArrowLeft, ArrowRight } from 'lucide-react'
 
 const Pagination = (props: IPagination) => {
   const { handleTermChange, searchParams } = useSearchParams()
@@ -14,7 +11,7 @@ const Pagination = (props: IPagination) => {
     <div className="flex flex-row justify-center items-center">
       <div className="flex flex-row justify-center items-center">
         <button
-          className="p-2 rounded-full  hover:bg-gray-100"
+          className="p-2 rounded-full hover:bg-gray-100"
           onClick={() => {
             if (currentPage > 1) {
               handleTermChange([
@@ -25,21 +22,21 @@ const Pagination = (props: IPagination) => {
               ])
             }
           }}>
-          <ArrowLeftIcon className="h-6 w-6" />
+          <ArrowLeft size={24} />
         </button>
-        <div className="mx-2 ">
+        <div className="mx-2">
           {currentPage} of {props.totalPages}
         </div>
         <button
-          className="p-2 rounded-full  hover:bg-gray-100"
+          className="p-2 rounded-full hover:bg-gray-100"
           onClick={() => {
             if (currentPage < props.totalPages) {
               handleTermChange([
                 { key: 'page', value: (currentPage + 1).toString() },
               ])
             }
           }}>
-          <ArrowRightIcon className="h-6 w-6" />
+          <ArrowRight size={24} />
         </button>
       </div>
     </div>

packages/app/app/(vod)/layout.tsx

@@ -33,7 +33,7 @@ const Layout = async ({
   return (
     <div className="mx-auto w-full max-w-screen-2xl h-screen">
       <HomePageNavbar pages={pages} />
-      <div className=" flex flex-col overflow-auto p-2 lg:p-4">
+      <div className=" flex flex-col overflow-auto p-0 lg:p-4">
         {children}
       </div>
       <div className="sticky mb-5 top-[100vh]">

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

@@ -1,13 +1,13 @@
 import { fetchAllSessions } from '@/lib/data'
 import VideoCard from '@/components/misc/VideoCard'
 export default async function RelatedVideos({
-  event,
+  searchQuery,
 }: {
-  event: string
+  searchQuery: string
 }) {
   const videos = (
     await fetchAllSessions({
-      event: event,
+      searchQuery: searchQuery.slice(0, 4),
       onlyVideos: true,
       limit: 5,
     })

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

@@ -1,7 +1,8 @@
 import { Livepeer } from 'livepeer'
 import { Badge } from '@/components/ui/badge'
 
-import { ArrowDownIcon } from '@heroicons/react/24/outline'
+import { ArrowDownToLine } from 'lucide-react'
+
 const VideoDownload = async ({ assetId }: { assetId: string }) => {
   const livepeer = new Livepeer({
     apiKey: process.env.LIVEPEER_API_KEY,
@@ -18,7 +19,7 @@ const VideoDownload = async ({ assetId }: { assetId: string }) => {
       target="_blank"
       className="flex justify-center items-center">
       <Badge className="bg-secondary text-secondary-foreground">
-        <ArrowDownIcon className="p-1 h-6 w-6 lg:h-8 lg:w-8 cursor-pointer " />
+        <ArrowDownToLine size={24} className="p-1 cursor-pointer" />
         Download
       </Badge>
     </a>

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

@@ -13,6 +13,7 @@ import { apiUrl } from '@/lib/utils/utils'
 import { notFound } from 'next/navigation'
 import { generalMetadata, watchMetadata } from '@/lib/utils/metadata'
 import { fetchSession } from '@/lib/services/sessionService'
+import { Suspense } from 'react'
 
 export default async function Watch({
   searchParams,
@@ -26,54 +27,56 @@ export default async function Watch({
   const tabs = []
   tabs.push({
     value: 'Related videos',
-    content: <RelatedVideos event={searchParams.event} />,
+    content: <RelatedVideos searchQuery={video.name} />,
   })
 
   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 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}
-          description={video.description}
-          playerName={video.name}
-          playbackId={video.playbackId}
-          speakers={video.speakers}
-          assetId={video.assetId}
-          vod={true}
-          viewCount
-        />
-      </div>
-      <Tabs
-        defaultValue={tabs[0]?.value ?? ''}
-        className="lg:w-[25%] w-full max-h-[100%] ">
-        <TabsList className="w-full bg-secondary">
+    <Suspense key={video._id} fallback={<div>Loading...</div>}>
+      <div className="h-full flex flex-col w-full gap-4 lg:flex-row relative">
+        <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}
+            description={video.description}
+            playerName={video.name}
+            playbackId={video.playbackId}
+            speakers={video.speakers}
+            assetId={video.assetId}
+            vod={true}
+            viewCount
+          />
+        </div>
+        <Tabs
+          defaultValue={tabs[0]?.value ?? ''}
+          className="lg:w-[25%] w-full max-h-[100%] ">
+          <TabsList className="w-full bg-secondary">
+            {tabs.map((tab) => (
+              <TabsTrigger key={tab.value} value={tab.value}>
+                {tab.value}
+              </TabsTrigger>
+            ))}
+          </TabsList>
           {tabs.map((tab) => (
-            <TabsTrigger key={tab.value} value={tab.value}>
-              {tab.value}
-            </TabsTrigger>
+            <TabsContent
+              className="h-[calc(100%-50px)] w-full"
+              key={tab.value}
+              value={tab.value}>
+              {tab.content}
+            </TabsContent>
           ))}
-        </TabsList>
-        {tabs.map((tab) => (
-          <TabsContent
-            className="h-[calc(100%-50px)] w-full"
-            key={tab.value}
-            value={tab.value}>
-            {tab.content}
-          </TabsContent>
-        ))}
-      </Tabs>
-    </div>
+        </Tabs>
+      </div>
+    </Suspense>
   )
 }
 

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

@@ -45,14 +45,21 @@ export default function EventHomeComponent({
     date?: string
   }
 }) {
+  const style = {
+    '--colors-accent': event.accentColor,
+  } as React.CSSProperties
   const bannerImg = event.banner !== '' ? event.banner : banner
   return (
-    <div className="flex flex-col w-full h-full bg-event px-2">
+    <div
+      className="flex flex-col w-full bg-event px-2"
+      style={{ ...style }}>
       <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">
+          <AspectRatio
+            ratio={3 / 1}
+            className="overflow-clip rounded-xl p-2">
             <Image
-              className="rounded-lg object-contain h-full p-2"
+              className="rounded-lg object-contain h-full"
               src={bannerImg!}
               alt="Event Cover"
               width={1500}
@@ -62,13 +69,14 @@ export default function EventHomeComponent({
               }}
             />
           </AspectRatio>
-
           <CardHeader>
             <div className="flex flex-col md:flex-row w-full my-2 gap-2">
               <CardTitle className="py-2 text-4xl uppercase text-white">
                 {event.name}
               </CardTitle>
-              <SignUp event={event} />
+              {event.dataImporter?.[0].config?.sheetId && (
+                <SignUp event={event} />
+              )}
             </div>
             <div className="text-sm text-white">
               <p>

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

@@ -36,7 +36,7 @@ const ScheduleCardModal = ({
     const watchUrl = `/watch?event=${event.slug}&session=${session._id}`
     const stageUrl = session.assetId
       ? watchUrl
-      : `/${paramsOrgId}/${session.eventSlug}/stage/${session.stageId}`
+      : `/${paramsOrgId}/${event.slug}/stage/${session.stageId}`
     !pathname.includes('schedule')
       ? router.push(stageUrl)
       : window.open(stageUrl, '_blank', 'noreferrer')

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

@@ -21,7 +21,7 @@ export default function StagePreview({
     <Link
       key={stage._id}
       href={`/${organization}/${event}/stage/${stage._id}`}>
-      <Card className="w-full max-w-[350px]">
+      <Card className="w-full max-w-[350px] rounded-xl">
         <Thumbnail imageUrl={eventCover} />
         <CardHeader className="bg-transparent">
           <p className="lowercase text-lg text-white font-normal">

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

@@ -28,7 +28,7 @@ const Studio = async () => {
                 </Button>
               </Link>
             </div>
-            <div className="flex flex-col space-y-2">
+            <div className="flex flex-col space-y-2 h-full overflow-auto">
               {userData?.organizations?.map((organization) => (
                 <Link
                   key={organization._id}

packages/app/app/studio/[organization]/components/SwitchOrganization.tsx

@@ -4,8 +4,10 @@ import React from 'react'
 import { useRouter } from 'next/navigation'
 import { IExtendedOrganization } from '@/lib/types'
 const SwitchOrganization = ({
+  organization,
   organizations = [],
 }: {
+  organization?: string
   organizations?: IExtendedOrganization[]
 }) => {
   const router = useRouter()
@@ -15,7 +17,7 @@ const SwitchOrganization = ({
         items={organizations as any[]}
         valueKey="slug"
         labelKey="name"
-        value="Switch Organization"
+        value={organization || ''}
         setValue={(org) => {
           router.push(`/studio/${org}`)
         }}

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

@@ -23,10 +23,6 @@ export default async function EventPage({
     eventId: event.slug,
   })
 
-  const style = {
-    '--colors-accent': event.accentColor,
-  } as React.CSSProperties
-
   return (
     <div className="flex flex-row h-full overflow-hidden w-full">
       <TooltipProvider>
@@ -37,9 +33,7 @@ export default async function EventPage({
         />
       </TooltipProvider>
       {settings !== 'stage' && (
-        <div
-          className="w-full h-full overflow-auto"
-          style={{ ...style }}>
+        <div className="w-full h-full overflow-auto">
           <EventHomeComponent
             event={event}
             stages={stages}

packages/app/app/studio/[organization]/event/clips/components/NoSession.tsx

@@ -20,7 +20,7 @@ const NoSession = async ({
             No sessions yet
           </div>
           <div className="flex flex-row space-x-2">
-            <Link href={`studio/${organization}?eventId=${eventId}`}>
+            <Link href={`/studio/${organization}?eventId=${eventId}`}>
               <Button>Cancel</Button>
             </Link>
             <CreateSession

packages/app/app/studio/[organization]/event/clips/components/Preview.tsx

@@ -1,6 +1,5 @@
 'use client'
 import useSearchParams from '@/lib/hooks/useSearchParams'
-import { Asset } from 'livepeer/dist/models/components'
 import PlayerWithControls from '@/components/ui/Player'
 import { Button } from '@/components/ui/button'
 

packages/app/app/studio/[organization]/event/clips/page.tsx

@@ -51,7 +51,7 @@ const EventClips = async ({
       return (
         <NoSession
           stageId={stage}
-          organization={event.organizationId as string}
+          organization={params.organization}
           eventId={eventId}
         />
       )