UI Bugs for event page (#399)

* ui fixes * navbar and other * loading skeletons archive, schedule * stage ui * metadata fix * event metadata * fix build
streamethorg · Feb 13, 2024 · 350984f · 350984f
1 parent 9f6e5c9
commit 350984f
Show file tree

Hide file tree

Showing 37 changed files with 22,826 additions and 16,501 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/packages/app/app/(home)/components/UpcomingEvents.tsx b/packages/app/app/(home)/components/UpcomingEvents.tsx
@@ -39,7 +39,7 @@ const UpcomingEvents = async ({
           Explore current and past events
         </CardDescription>
       </CardHeader>
-      <CardContent className="px-0 lg:px-0 flex flex-row overflow-x-scroll space-x-4 ">
+      <CardContent className="px-0 lg:px-0 flex flex-row overflow-auto space-x-4 ">
         {events.map(
           ({ name, eventCover, accentColor, slug }, index) => (
             <div key={index}>

diff --git a/packages/app/app/(home)/components/UpcomingLoader.tsx b/packages/app/app/(home)/components/UpcomingLoader.tsx
@@ -0,0 +1,40 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+
+const UpcomingLoader = () => (
+  <div className="max-w-screen border-none">
+    <CardHeader className="px-0 lg:px-0">
+      <CardTitle className=" ">Events</CardTitle>
+      <CardDescription>
+        Explore current and past events
+      </CardDescription>
+    </CardHeader>
+    <CardContent className="px-0 lg:px-0 flex flex-row overflow-auto space-x-4 ">
+      {[...Array(3)].map((_, index) => (
+        <div key={index}>
+          <Card className="p-2 w-[350px]  border-none text-foreground">
+            <div className=" min-h-full rounded-xl  uppercase">
+              <div className="w-full animate-pulse bg-secondary aspect-video"></div>
+              <CardHeader className=" px-2 lg:px-2 lg:py-2  rounded mt-1 bg-white bg-opacity-10 space-y-4">
+                <CardTitle className="truncate text-body text-white text-xl bg-secondary"></CardTitle>
+                <CardDescription className="text-white flex flex-row space-x-2 ">
+                  <div className="w-full animate-pulse bg-secondary"></div>
+                  <div className="w-full animate-pulse bg-secondary">
+                    Archive
+                  </div>
+                </CardDescription>
+              </CardHeader>
+            </div>
+          </Card>
+        </div>
+      ))}
+    </CardContent>
+  </div>
+)
+
+export default UpcomingLoader
diff --git a/packages/app/app/(home)/layout.tsx b/packages/app/app/(home)/layout.tsx
@@ -2,15 +2,38 @@ import Image from 'next/image'
 import HomePageNavbar from '@/components/Layout/HomePageNavbar'
 import Footer from '@/components/Layout/Footer'
 
+const pages = [
+  {
+    name: 'Videography',
+    href: 'https://info.streameth.org/stream-eth-studio',
+    bgColor: 'bg-muted ',
+  },
+  {
+    name: 'Product',
+    href: 'https://info.streameth.org/services',
+    bgColor: 'bg-muted ',
+  },
+  {
+    name: 'Host your event',
+    href: 'https://info.streameth.org/contact-us',
+    bgColor: 'bg-primary text-primary-foreground',
+  },
+  // {
+  //   name: 'studio',
+  //   href: '/studio/base',
+  //   bgColor: 'bg-primary text-primary-foreground',
+  // },
+]
+
 const Layout = async ({
   children,
 }: {
   children: React.ReactNode
 }) => {
   return (
     <div className="w-full">
-      <HomePageNavbar />
-      <div className="top-[74px] flex flex-col overflow-auto p-4 text-foreground">
+      <HomePageNavbar pages={pages} showSearchBar={true} />
+      <div className="top-[74px] flex flex-col p-4 overflow-auto text-foreground">
         {children}
       </div>
       <Footer />

diff --git a/packages/app/app/(vod)/archive/page.tsx b/packages/app/app/(vod)/archive/page.tsx
@@ -1,37 +1,21 @@
-import Videos from '@/components/misc/Videos'
 import { SearchPageProps } from '@/lib/types'
 import UpcomingEvents from '@/app/(home)/components/UpcomingEvents'
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
-import Pagination from '../components/pagination'
+import UpcomingLoader from '@/app/(home)/components/UpcomingLoader'
 import {
   generalMetadata,
   archiveMetadata,
 } from '@/lib/utils/metadata'
 import { Metadata } from 'next'
-import { fetchAllSessions } from '@/lib/data'
 import { fetchEvent } from '@/lib/services/eventService'
 import { Suspense } from 'react'
-
+import ArchiveVideos from '@/app/(vod)/components/ArchiveVideos'
+import ArchiveVideoSkeleton from '../components/ArchiveVideosSkeleton'
 export default async function ArchivePage({
   searchParams,
 }: SearchPageProps) {
-  const videos = await fetchAllSessions({
-    organizationSlug: searchParams.organization,
-    event: searchParams.event,
-    limit: 12,
-    onlyVideos: true,
-    searchQuery: searchParams.searchQuery,
-    page: Number(searchParams.page || 1),
-  })
-
   return (
-    <Suspense>
-      <div className="">
+    <div className="w-full">
+      <Suspense fallback={<UpcomingLoader />}>
         <UpcomingEvents
           archive={false}
           organization={
@@ -40,15 +24,11 @@ export default async function ArchivePage({
               : 'invalid'
           }
         />
-        <div>
-          <div className="flex flex-row items-center justify-between mb-4">
-            <CardTitle className="">Results</CardTitle>
-            <Pagination {...videos.pagination} />
-          </div>
-          <Videos videos={videos.sessions} />
-        </div>
-      </div>
-    </Suspense>
+      </Suspense>
+      <Suspense fallback={<ArchiveVideoSkeleton />}>
+        <ArchiveVideos searchParams={searchParams} />
+      </Suspense>
+    </div>
   )
 }
 

diff --git a/packages/app/app/(vod)/components/ArchiveVideos.tsx b/packages/app/app/(vod)/components/ArchiveVideos.tsx
@@ -0,0 +1,28 @@
+import { CardTitle } from '@/components/ui/card'
+import Pagination from './pagination'
+import { fetchAllSessions } from '@/lib/data'
+import Videos from '@/components/misc/Videos'
+import { SearchPageProps } from '@/lib/types'
+
+const ArchiveVideos = async ({ searchParams }: SearchPageProps) => {
+  const videos = await fetchAllSessions({
+    organizationSlug: searchParams.organization,
+    event: searchParams.event,
+    limit: 12,
+    onlyVideos: true,
+    searchQuery: searchParams.searchQuery,
+    page: Number(searchParams.page || 1),
+  })
+
+  return (
+    <div>
+      <div className="flex flex-row items-center justify-between mb-4">
+        <CardTitle className="">Results</CardTitle>
+        <Pagination {...videos.pagination} />
+      </div>
+      <Videos videos={videos.sessions} />
+    </div>
+  )
+}
+
+export default ArchiveVideos
diff --git a/packages/app/app/(vod)/components/ArchiveVideosSkeleton.tsx b/packages/app/app/(vod)/components/ArchiveVideosSkeleton.tsx
@@ -0,0 +1,41 @@
+import PaginationSkeleton from './PaginationSkeleteon'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+
+const ArchiveVideoSkeleton = () => {
+  return (
+    <div>
+      <div className="flex flex-row items-center justify-between mb-4">
+        <CardTitle className="">Results</CardTitle>
+        <PaginationSkeleton />
+      </div>
+      <div className="flex flex-row overflow-auto space-x-4 ">
+        {[...Array(8)].map((_, index) => (
+          <div key={index}>
+            <Card className="p-2 w-[350px]  border-none text-foreground">
+              <div className=" min-h-full rounded-xl  uppercase">
+                <div className="w-full animate-pulse bg-secondary aspect-video"></div>
+                <CardHeader className=" px-2 lg:px-2 lg:py-2  rounded mt-1 bg-white bg-opacity-10 space-y-4">
+                  <CardTitle className="truncate text-body text-white text-xl bg-secondary"></CardTitle>
+                  <CardDescription className="text-white flex flex-row space-x-2 ">
+                    <div className="w-full animate-pulse bg-secondary"></div>
+                    <div className="w-full animate-pulse bg-secondary">
+                      Archive
+                    </div>
+                  </CardDescription>
+                </CardHeader>
+              </div>
+            </Card>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default ArchiveVideoSkeleton
diff --git a/packages/app/app/(vod)/components/PaginationSkeleteon.tsx b/packages/app/app/(vod)/components/PaginationSkeleteon.tsx
@@ -0,0 +1,24 @@
+const PaginationSkeleton = () => {
+  return (
+    <div className="flex flex-row justify-center items-center">
+      <div className="flex flex-row justify-center items-center">
+        {/* Left Arrow Skeleton */}
+        <div className="p-2 rounded-full hover:bg-gray-100 animate-pulse">
+          <div className="h-6 w-6 bg-gray-300 rounded-full"></div>
+        </div>
+
+        {/* Page Number Skeleton */}
+        <div className="mx-2 animate-pulse">
+          <div className="h-6 w-24 bg-gray-300 rounded"></div>
+        </div>
+
+        {/* Right Arrow Skeleton */}
+        <div className="p-2 rounded-full hover:bg-gray-100 animate-pulse">
+          <div className="h-6 w-6 bg-gray-300 rounded-full"></div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PaginationSkeleton
diff --git a/packages/app/app/(vod)/layout.tsx b/packages/app/app/(vod)/layout.tsx
@@ -7,11 +7,34 @@ const Layout = async ({
 }: {
   children: React.ReactNode
 }) => {
+  const pages = [
+    {
+      name: 'Videography',
+      href: 'https://info.streameth.org/stream-eth-studio',
+      bgColor: 'bg-muted ',
+    },
+    {
+      name: 'Product',
+      href: 'https://info.streameth.org/services',
+      bgColor: 'bg-muted ',
+    },
+    {
+      name: 'Host your event',
+      href: 'https://info.streameth.org/contact-us',
+      bgColor: 'bg-primary text-primary-foreground',
+    },
+    // {
+    //   name: 'studio',
+    //   href: '/studio/base',
+    //   bgColor: 'bg-primary text-primary-foreground',
+    // },
+  ]
+
   return (
-    <div className="mx-auto w-screen max-w-screen-2xl h-screen">
-      <HomePageNavbar />
+    <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">
-        <Suspense>{children}</Suspense>
+        {children}
       </div>
       <div className="sticky mb-5 top-[100vh]">
         <Footer />

diff --git a/packages/app/app/(vod)/watch/page.tsx b/packages/app/app/(vod)/watch/page.tsx
@@ -59,7 +59,7 @@ export default async function Watch({
         </TabsList>
         {tabs.map((tab) => (
           <TabsContent
-            className="h-[calc(100%-50px)] overflow-y-scroll"
+            className="h-[calc(100%-50px)] w-full"
             key={tab.value}
             value={tab.value}>
             {tab.content}

diff --git a/packages/app/app/[organization]/[event]/components/EventHomeComponent.tsx b/packages/app/app/[organization]/[event]/components/EventHomeComponent.tsx
@@ -10,8 +10,12 @@ import StagePreview from '../stage/components/StagePreview'
 import { AspectRatio } from '@/components/ui/aspect-ratio'
 import { IStageModel } from 'streameth-new-server/src/interfaces/stage.interface'
 
-import SpeakerComponent from '../speakers/components/SpeakerComponent'
-import ScheduleComponent from '../schedule/components/ScheduleComponent'
+import SpeakerComponent, {
+  SpeakerComponentSkeleton,
+} from '../speakers/components/SpeakerComponent'
+import ScheduleComponent, {
+  ScheduleSkeleton,
+} from '../schedule/components/ScheduleComponent'
 import Image from 'next/image'
 import {
   getEventPeriod,
@@ -110,15 +114,15 @@ export default function EventHomeComponent({
             </div>
           </CardFooter>
         </Card>
-        <Suspense>
+        <Suspense fallback={<ScheduleSkeleton />}>
           <ScheduleComponent
             stages={stages}
             event={event}
             stage={searchParams.stage}
             date={searchParams.date}
           />
         </Suspense>
-        <Suspense>
+        <Suspense fallback={<SpeakerComponentSkeleton />}>
           <SpeakerComponent event={event} />
         </Suspense>
       </div>

diff --git a/packages/app/app/[organization]/[event]/layout.tsx b/packages/app/app/[organization]/[event]/layout.tsx
@@ -2,7 +2,7 @@ import { notFound } from 'next/navigation'
 import Navbar from '@/components/Layout/NavbarTop'
 import { fetchNavBarRoutes } from '@/lib/data'
 import { fetchEvent } from '@/lib/services/eventService'
-
+import HomePageNavbar from '@/components/Layout/HomePageNavbar'
 const Layout = async ({
   children,
   params,
@@ -26,14 +26,19 @@ const Layout = async ({
   }
   const style = {
     '--colors-accent': event.accentColor,
+    backgroundColor: event.accentColor,
   } as React.CSSProperties
 
   return (
     <div
-      className="h-full flex flex-col  z-1 min-h-screen "
+      className="w-full h-full flex flex-col  z-1 min-h-screen"
       style={style}>
-      <Navbar {...navbarRoutes} />
-      <main className={` flex w-full ml-auto lg:h-full flex-grow`}>
+      <HomePageNavbar
+        pages={navbarRoutes.pages}
+        showSearchBar={false}
+      />
+      <main
+        className={` top-[74px] flex w-full ml-auto lg:h-full flex-grow`}>
         {children}
       </main>
     </div>

diff --git a/packages/app/app/[organization]/[event]/schedule/components/DateSelect.tsx b/packages/app/app/[organization]/[event]/schedule/components/DateSelect.tsx
@@ -21,7 +21,7 @@ const DateSelect = ({ dates }: { dates: number[] }) => {
       <SelectTrigger className="bg-white bg-opacity-10 rounded-lg border-white border-opacity-10">
         <SelectValue placeholder="Date select" />
       </SelectTrigger>
-      <SelectContent className="bg-white bg-opacity-10 rounded-lg border-white border-opacity-10">
+      <SelectContent className="bg-white rounded-lg border-white border-opacity-10">
         {dates.map((dateNum) => (
           <SelectItem key={dateNum} value={dateNum.toString()}>
             {new Date(dateNum).toDateString()}

diff --git a/packages/app/app/[organization]/[event]/schedule/components/ScheduleCard.tsx b/packages/app/app/[organization]/[event]/schedule/components/ScheduleCard.tsx
@@ -2,7 +2,7 @@
 import ScheduleCardModal from './ScheduleCardModal'
 import moment from 'moment-timezone'
 import { getEventTimezoneText } from '@/lib/utils/time'
-
+import SpeakerIcon from '@/components/speakers/speakerIcon'
 import {
   Card,
   CardContent,
@@ -53,14 +53,9 @@ const ScheduleCard = ({
           </CardHeader>
           <CardContent className="p-2 lg:p-2">
             {speakers && (
-              <div className="flex py-1 items-center flex-row space-x-2 overflow-x-scroll mt-auto">
+              <div className="flex py-1 items-center flex-row space-x-2 overflow-auto mt-auto">
                 {session.speakers.map((speaker) => (
-                  <Badge
-                    key={speaker.name}
-                    variant={'outline'}
-                    className="text-white">
-                    {speaker.name}
-                  </Badge>
+                  <SpeakerIcon key={speaker._id} speaker={speaker} />
                 ))}
               </div>
             )}