studio ui changes

streamethorg · Feb 21, 2024 · 86ed545 · 86ed545
1 parent a510ada
commit 86ed545
Show file tree

Hide file tree

Showing 12 changed files with 129 additions and 72 deletions.
diff --git a/packages/app/app/[organization]/[event]/components/EventHomeComponent.tsx b/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>

diff --git a/packages/app/app/[organization]/[event]/stage/components/StagePreview.tsx b/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">

diff --git a/packages/app/app/studio/(home)/page.tsx b/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}

diff --git a/packages/app/app/studio/[organization]/components/SwitchOrganization.tsx b/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}`)
         }}

diff --git a/packages/app/app/studio/[organization]/event/(editor)/page.tsx b/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}

diff --git a/packages/app/app/studio/[organization]/event/clips/components/NoSession.tsx b/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

diff --git a/packages/app/app/studio/[organization]/event/clips/page.tsx b/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}
         />
       )

diff --git a/packages/app/app/studio/[organization]/layout.tsx b/packages/app/app/studio/[organization]/layout.tsx
@@ -54,31 +54,32 @@ const Layout = async ({
 
   return (
     <div className="w-screen h-screen ">
-      <HomePageNavbar pages={pages} showSearchBar={false} />
-      <div className="top-[56px] flex flex-col h-[calc(100vh-56px)] border-t border-secondary">
-        <div className="flex h-full flex-row">
-          <div className="flex flex-col flex-grow h-full overflow-hidden">
-            {!hasOrganization(
-              userData?.organizations,
-              params.organization
-            ) ? (
-              <div className="flex flex-col items-center h-screen justify-center">
-                You do not belong to this organization, switch
-                organization or create a new one
-                <div className="flex gap-5 mt-5">
-                  <SwitchOrganization
-                    organizations={userData?.organizations}
-                  />
-                  <Link href="/studio/create">
-                    <Button>Create Organization</Button>
-                  </Link>
-                </div>
-              </div>
-            ) : (
-              <>{children}</>
-            )}
+      <HomePageNavbar
+        pages={pages}
+        showSearchBar={false}
+        currentOrganization={params.organization}
+        organizations={userData?.organizations}
+      />
+      <div className="top-[64px] overflow-hidden flex flex-col h-[calc(100vh-64px)] border-t border-secondary">
+        {!hasOrganization(
+          userData?.organizations,
+          params.organization
+        ) ? (
+          <div className="flex flex-col items-center h-screen justify-center">
+            You do not belong to this organization, switch
+            organization or create a new one
+            <div className="flex gap-5 mt-5">
+              <SwitchOrganization
+                organizations={userData?.organizations}
+              />
+              <Link href="/studio/create">
+                <Button>Create Organization</Button>
+              </Link>
+            </div>
           </div>
-        </div>
+        ) : (
+          <div className="h-full w-full">{children}</div>
+        )}
       </div>
     </div>
   )

diff --git a/packages/app/app/studio/[organization]/library/page.tsx b/packages/app/app/studio/[organization]/library/page.tsx
@@ -1,7 +1,16 @@
 import { fetchAllSessions } from '@/lib/data'
+import {
+  CardHeader,
+  CardTitle,
+  Card,
+  CardContent,
+  CardFooter,
+  CardDescription,
+} from '@/components/ui/card'
 import { studioPageParams } from '@/lib/types'
 import Link from 'next/link'
-
+import { Button } from '@/components/ui/button'
+import Thumbnail from '@/components/misc/VideoCard/thumbnail'
 const Library = async ({
   params,
   searchParams,
@@ -20,17 +29,38 @@ const Library = async ({
     )
 
   return (
-    <div className="p-4 h-full">
-      <h1>Library</h1>
-      <div className="grid grid-cols-4 gap-4">
-        {sessions.map((session, index) => (
-          <Link
-            key={index}
-            href={`library/${session._id}/edit`}
-            className="border ">
-            {session.name}
-          </Link>
-        ))}
+    <div className="max-w-full h-full w-full mx-auto  p-4">
+      <div className="w-full flex flex-row justify-between items-center pb-2">
+        <CardTitle>Library</CardTitle>
+        <Button disabled>Upload video</Button>
+      </div>
+      <div className="grid grid-cols-4 gap-4 h-[calc(100%-60px)] overflow-auto">
+        {sessions?.map((session, index) => {
+          return (
+            <Link
+              key={index}
+              href={`/studio/${params.organization}/library/${session._id}/edit`}>
+              <Card className="flex overflow-hidden flex-col border border-secondary h-full">
+                <CardHeader className=" relative p-0 lg:p-0 h-full">
+                  <Thumbnail imageUrl={session.coverImage} />
+                </CardHeader>
+                <CardContent className="w-full flex flex-col justify-center p-2 lg:p-3">
+                  <CardTitle className={`text-sm truncate`}>
+                    {session.name}
+                  </CardTitle>
+                  <CardDescription>
+                    {session.assetId ? 'Has video' : 'No video'}
+                  </CardDescription>
+                </CardContent>
+              </Card>
+            </Link>
+          )
+        })}
+        {sessions.length === 0 && (
+          <div className="flex flex-row justify-center items-center w-full h-full">
+            <p>No sessions yet</p>
+          </div>
+        )}
       </div>
     </div>
   )

diff --git a/packages/app/app/studio/[organization]/page.tsx b/packages/app/app/studio/[organization]/page.tsx
@@ -17,14 +17,14 @@ const OrganizationPage = async ({ params }: studioPageParams) => {
   })
 
   return (
-    <div className="max-w-4xl w-full mx-auto py-2">
-      <div className="w-full flex flex-row justify-between items-center py-2">
+    <div className="max-w-4xl h-full w-full mx-auto p-4">
+      <div className="w-full flex flex-row justify-between items-center pb-2">
         <CardTitle> Your events</CardTitle>
         <Link href={`/studio/${params.organization}/event/create`}>
           <Button className="w-full">Create Event</Button>
         </Link>
       </div>
-      <div>
+      <div className="flex flex-col space-y-2 h-[calc(100%-60px)] overflow-auto">
         {events?.map((event, index) => {
           return (
             <Link
@@ -36,7 +36,7 @@ const OrganizationPage = async ({ params }: studioPageParams) => {
                     className=""
                     alt="logo"
                     src={event.eventCover ?? ''}
-                    width={250}
+                    width={280}
                     height={50}
                   />
                 </CardHeader>

diff --git a/packages/app/components/Layout/HomePageNavbar.tsx b/packages/app/components/Layout/HomePageNavbar.tsx
@@ -11,7 +11,8 @@ import { Search } from 'lucide-react'
 import { Page } from '@/lib/types'
 import { useSIWE } from 'connectkit'
 import useUserData from '@/lib/hooks/useUserData'
-
+import SwitchOrganization from '@/app/studio/[organization]/components/SwitchOrganization'
+import { IExtendedOrganization } from '@/lib/types'
 const getPages = (
   pages: Page[],
   isSignedIn: boolean,
@@ -33,15 +34,24 @@ const HomePageNavbar = ({
   logo,
   pages,
   showSearchBar = true,
+  organizations,
+  currentOrganization,
 }: {
   logo?: string
   pages: Page[]
   showSearchBar?: boolean
+  organizations?: IExtendedOrganization[]
+  currentOrganization?: string
 }) => {
   return (
     <Suspense fallback={null}>
       <MobileNavBar pages={pages} showSearchBar={showSearchBar} />
-      <PCNavBar pages={pages} showSearchBar={showSearchBar} />
+      <PCNavBar
+        pages={pages}
+        showSearchBar={showSearchBar}
+        organizations={organizations}
+        currentOrganization={currentOrganization}
+      />
     </Suspense>
   )
 }
@@ -132,9 +142,13 @@ const MobileNavBar = ({
 const PCNavBar = ({
   pages,
   showSearchBar,
+  organizations,
+  currentOrganization,
 }: {
   pages: Page[]
   showSearchBar: boolean
+  organizations?: IExtendedOrganization[]
+  currentOrganization?: string
 }) => {
   const { isSignedIn } = useSIWE()
   const { userData } = useUserData()
@@ -152,13 +166,22 @@ const PCNavBar = ({
       <div className="flex flex-grow justify-center items-center">
         {showSearchBar && <SearchBar />}
       </div>
+
       <Navbar
         pages={getPages(
           pages,
           isSignedIn,
           userData?.organizations?.[0]?.slug
         )}
       />
+      {organizations && (
+        <div className="m-1 mr-2">
+          <SwitchOrganization
+            organization={currentOrganization}
+            organizations={organizations}
+          />
+        </div>
+      )}
       <ConnectWalletButton />
     </NavigationMenu>
   )

diff --git a/packages/app/lib/services/eventService.tsx b/packages/app/lib/services/eventService.tsx
@@ -118,20 +118,19 @@ export const updateEvent = async ({
   authToken: string
 }): Promise<IEventModel> => {
   const modifiedObject = (({ _id, ...rest }) => rest)(event)
-  try {
-    const response = await fetch(`${apiUrl()}/events/${event._id}`, {
-      method: 'PUT',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: `Bearer ${authToken}`,
-      },
-      body: JSON.stringify(modifiedObject),
-    })
-    return (await response.json()).data
-  } catch (e) {
-    console.log('error in updateEvent', e)
-    throw e
+  const response = await fetch(`${apiUrl()}/events/${event._id}`, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${authToken}`,
+    },
+    body: JSON.stringify(modifiedObject),
+  })
+  if (!response.ok) {
+    console.log('error in updateEvent', (await response.json()))
+    throw 'Error updating event'
   }
+  return (await response.json()).data
 }
 export const deleteEvent = async ({
   eventId,