diff --git a/packages/app/app/(vod)/components/ArchiveVideos.tsx b/packages/app/app/(vod)/components/ArchiveVideos.tsx index 8304993ef..6bdf9dcef 100644 --- a/packages/app/app/(vod)/components/ArchiveVideos.tsx +++ b/packages/app/app/(vod)/components/ArchiveVideos.tsx @@ -17,7 +17,7 @@ const ArchiveVideos = async ({ searchParams }: SearchPageProps) => { return (
- Results + Results
diff --git a/packages/app/app/(vod)/components/pagination.tsx b/packages/app/app/(vod)/components/pagination.tsx index 2a384251c..ad1ff896d 100644 --- a/packages/app/app/(vod)/components/pagination.tsx +++ b/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) => {
-
+
{currentPage} of {props.totalPages}
diff --git a/packages/app/app/(vod)/layout.tsx b/packages/app/app/(vod)/layout.tsx index 3c9f8a9c3..50a41f166 100644 --- a/packages/app/app/(vod)/layout.tsx +++ b/packages/app/app/(vod)/layout.tsx @@ -33,7 +33,7 @@ const Layout = async ({ return (
-
+
{children}
diff --git a/packages/app/app/(vod)/watch/components/RelatedVideos.tsx b/packages/app/app/(vod)/watch/components/RelatedVideos.tsx index 481211bb8..c605979e1 100644 --- a/packages/app/app/(vod)/watch/components/RelatedVideos.tsx +++ b/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, }) diff --git a/packages/app/app/(vod)/watch/components/VideoDownload.tsx b/packages/app/app/(vod)/watch/components/VideoDownload.tsx index a0515ea03..1d2e3057b 100644 --- a/packages/app/app/(vod)/watch/components/VideoDownload.tsx +++ b/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"> - + Download diff --git a/packages/app/app/(vod)/watch/page.tsx b/packages/app/app/(vod)/watch/page.tsx index e76ca31ac..eae24e148 100644 --- a/packages/app/app/(vod)/watch/page.tsx +++ b/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: , + content: , }) return ( -
-
- - -
- - + Loading...
}> +
+
+ + +
+ + + {tabs.map((tab) => ( + + {tab.value} + + ))} + {tabs.map((tab) => ( - - {tab.value} - + + {tab.content} + ))} - - {tabs.map((tab) => ( - - {tab.content} - - ))} - -
+ +
+ ) } diff --git a/packages/app/app/[organization]/[event]/components/EventHomeComponent.tsx b/packages/app/app/[organization]/[event]/components/EventHomeComponent.tsx index d516ee807..397c402c8 100644 --- 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 ( -
+
- + Event Cover -
{event.name} - + {event.dataImporter?.[0].config?.sheetId && ( + + )}

diff --git a/packages/app/app/[organization]/[event]/schedule/components/ScheduleCardModal.tsx b/packages/app/app/[organization]/[event]/schedule/components/ScheduleCardModal.tsx index f2955b7e5..8d8617dd8 100644 --- a/packages/app/app/[organization]/[event]/schedule/components/ScheduleCardModal.tsx +++ b/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') diff --git a/packages/app/app/[organization]/[event]/stage/components/StagePreview.tsx b/packages/app/app/[organization]/[event]/stage/components/StagePreview.tsx index aeeb9469a..7967caa57 100644 --- 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({ - +

diff --git a/packages/app/app/studio/(home)/page.tsx b/packages/app/app/studio/(home)/page.tsx index db6e78cb1..fe30c62d9 100644 --- a/packages/app/app/studio/(home)/page.tsx +++ b/packages/app/app/studio/(home)/page.tsx @@ -28,7 +28,7 @@ const Studio = async () => {

-
+
{userData?.organizations?.map((organization) => ( { 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 index 93a1f982d..962bd4ff9 100644 --- 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 (
@@ -37,9 +33,7 @@ export default async function EventPage({ /> {settings !== 'stage' && ( -
+
- + ) diff --git a/packages/app/app/studio/[organization]/layout.tsx b/packages/app/app/studio/[organization]/layout.tsx index ee0018c22..dd899d333 100644 --- a/packages/app/app/studio/[organization]/layout.tsx +++ b/packages/app/app/studio/[organization]/layout.tsx @@ -54,31 +54,32 @@ const Layout = async ({ return (
- -
-
-
- {!hasOrganization( - userData?.organizations, - params.organization - ) ? ( -
- You do not belong to this organization, switch - organization or create a new one -
- - - - -
-
- ) : ( - <>{children} - )} + +
+ {!hasOrganization( + userData?.organizations, + params.organization + ) ? ( +
+ You do not belong to this organization, switch + organization or create a new one +
+ + + + +
-
+ ) : ( +
{children}
+ )}
) diff --git a/packages/app/app/studio/[organization]/library/page.tsx b/packages/app/app/studio/[organization]/library/page.tsx index 111886c30..d1db81e42 100644 --- 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 ( -
-

Library

-
- {sessions.map((session, index) => ( - - {session.name} - - ))} +
+
+ Library + +
+
+ {sessions?.map((session, index) => { + return ( + + + + + + + + {session.name} + + + {session.assetId ? 'Has video' : 'No video'} + + + + + ) + })} + {sessions.length === 0 && ( +
+

No sessions yet

+
+ )}
) diff --git a/packages/app/app/studio/[organization]/page.tsx b/packages/app/app/studio/[organization]/page.tsx index de2a587fd..bc670ec90 100644 --- 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 ( -
-
+
+
Your events
-
+
{events?.map((event, index) => { return ( { className="" alt="logo" src={event.eventCover ?? ''} - width={250} + width={280} height={50} /> diff --git a/packages/app/components/Layout/HomePageNavbar.tsx b/packages/app/components/Layout/HomePageNavbar.tsx index 708abeb5a..d19051bbe 100644 --- a/packages/app/components/Layout/HomePageNavbar.tsx +++ b/packages/app/components/Layout/HomePageNavbar.tsx @@ -4,14 +4,15 @@ import Image from 'next/image' import SearchBar from '@/components/misc/SearchBar' import Link from 'next/link' import { NavigationMenu } from '@/components/ui/navigation-menu' -import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline' +import { Menu, X } from 'lucide-react' import Navbar from './Navbar' import { ConnectWalletButton } from '../misc/ConnectWalletButton' 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 ( - + ) } @@ -69,24 +79,24 @@ const MobileNavBar = ({ }, [menuVisible, searchVisible]) return ( - + {(searchVisible || menuVisible) && ( -
+
)} {searchVisible && showSearchBar && ( -
+
)} -
+
Logo @@ -99,9 +109,17 @@ const MobileNavBar = ({ {pages.length > 0 && ( )} @@ -124,14 +142,18 @@ const MobileNavBar = ({ const PCNavBar = ({ pages, showSearchBar, + organizations, + currentOrganization, }: { pages: Page[] showSearchBar: boolean + organizations?: IExtendedOrganization[] + currentOrganization?: string }) => { const { isSignedIn } = useSIWE() const { userData } = useUserData() return ( - + -
+
{showSearchBar && }
+ + {organizations && ( +
+ +
+ )} ) diff --git a/packages/app/components/Layout/NavbarTop.tsx b/packages/app/components/Layout/NavbarTop.tsx index 5440b67bf..c4a50c7e6 100644 --- a/packages/app/components/Layout/NavbarTop.tsx +++ b/packages/app/components/Layout/NavbarTop.tsx @@ -2,7 +2,7 @@ import Link from 'next/link' import Image from 'next/image' import { useEffect, useState } from 'react' -import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline' +import { Menu, X } from 'lucide-react' import Navbar from './Navbar' import { useMediaQuery } from '@/lib/hooks/useMediaQuery' @@ -19,11 +19,19 @@ const NavBarButton = ({ }) => ( ) @@ -45,8 +53,8 @@ export default function NavbarTop({ return null } return ( - -
+ +
Logo @@ -59,7 +67,7 @@ export default function NavbarTop({ />
-
+
{menuVisible && ( Embed video - + Easily embed this stream into your website by adding the iframe code below @@ -73,7 +72,7 @@ const ModalContent: React.FC<{ - + Embed diff --git a/packages/app/components/misc/ShareButton.tsx b/packages/app/components/misc/ShareButton.tsx index 6c71b7803..e9c012f30 100644 --- a/packages/app/components/misc/ShareButton.tsx +++ b/packages/app/components/misc/ShareButton.tsx @@ -7,7 +7,7 @@ import { TwitterShareButton, WhatsappShareButton, } from 'react-share' -import { ShareIcon } from '@heroicons/react/24/outline' +import { Share2 } from 'lucide-react' import { FacebookIcon, RedditIcon, @@ -49,7 +49,7 @@ const ShareModalContent = () => { -
+
@@ -79,7 +79,7 @@ const ShareButton = () => { - + Share diff --git a/packages/app/components/misc/form/datePicker.tsx b/packages/app/components/misc/form/datePicker.tsx index 43f160d4f..8667f1057 100644 --- a/packages/app/components/misc/form/datePicker.tsx +++ b/packages/app/components/misc/form/datePicker.tsx @@ -1,4 +1,4 @@ -import { CalendarIcon } from '@heroicons/react/24/outline' +import { CalendarSearch } from 'lucide-react' import { Calendar } from '@/components/ui/calendar' import { Popover, @@ -26,10 +26,10 @@ export default function DatePicker({ !value && 'text-muted-foreground' )}> {value ? format(value, 'PPP') : Pick a date} - + - + ) { @@ -71,9 +70,10 @@ export default function ImageUpload({ {isUploading ? (
Uploading image...
) : preview ? ( -
- + { onChange(null) setPreview('') diff --git a/packages/app/components/sessions/InfoBoxDescription.tsx b/packages/app/components/sessions/InfoBoxDescription.tsx index 7a49ecb72..8fa78084f 100644 --- a/packages/app/components/sessions/InfoBoxDescription.tsx +++ b/packages/app/components/sessions/InfoBoxDescription.tsx @@ -1,12 +1,6 @@ 'use client' import { useState, useEffect, useRef } from 'react' -import { - Card, - CardDescription, - CardTitle, - CardContent, - CardHeader, -} from '@/components/ui/card' +import { CardContent } from '@/components/ui/card' import { ArrowDownWideNarrow, ArrowUpWideNarrow } from 'lucide-react' import { ISpeaker } from 'streameth-new-server/src/interfaces/speaker.interface' import SpeakerIcon from '../speakers/speakerIcon' @@ -19,7 +13,7 @@ const InfoBoxDescription = ({ description?: string }) => { const [isOpened, setIsOpened] = useState(false) - const [isExpandable, setIsExpandable] = useState(false) + const [isExpandable, setIsExpandable] = useState(true) const descriptionRef = useRef(null) useEffect(() => { @@ -27,7 +21,7 @@ const InfoBoxDescription = ({ if (descriptionRef.current) { const isMobile = window.innerWidth <= 768 // Adjust mobile breakpoint as needed const descriptionHeight = description?.length || 0 - setIsExpandable(isMobile && descriptionHeight < 100) + setIsExpandable(isMobile && descriptionHeight > 100) } } diff --git a/packages/app/lib/services/eventService.tsx b/packages/app/lib/services/eventService.tsx index 989bc0652..eb5db13bf 100644 --- 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 => { 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, diff --git a/packages/app/package.json b/packages/app/package.json index 50af99338..eef000a87 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -14,7 +14,6 @@ }, "dependencies": { "@aws-sdk/client-s3": "^3.509.0", - "@heroicons/react": "^2.0.18", "@hookform/resolvers": "^3.3.4", "@livekit/components-react": "^1.5.3", "@livekit/components-styles": "^1.0.9",