From 1579f79334926113d4ae6bd3f91daa1bdbeec2b0 Mon Sep 17 00:00:00 2001 From: Xannyx <56308735+xannyxs@users.noreply.github.com> Date: Wed, 21 Feb 2024 17:36:24 +0100 Subject: [PATCH 1/5] Minor fix: Made icons more consistent by making it all `lucide` (#424) * Reconfigured the icons to be lucide only * Minor error * Minor clearup --- .../app/app/(vod)/components/pagination.tsx | 15 ++++------ .../(vod)/watch/components/VideoDownload.tsx | 5 ++-- .../app/components/Layout/HomePageNavbar.tsx | 28 ++++++++++++------- packages/app/components/Layout/NavbarTop.tsx | 22 ++++++++++----- packages/app/components/misc/EmbedButton.tsx | 9 +++--- packages/app/components/misc/ShareButton.tsx | 6 ++-- .../app/components/misc/form/datePicker.tsx | 6 ++-- .../app/components/misc/form/imageUpload.tsx | 12 ++++---- packages/app/package.json | 1 - 9 files changed, 58 insertions(+), 46 deletions(-) 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)/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/components/Layout/HomePageNavbar.tsx b/packages/app/components/Layout/HomePageNavbar.tsx index 708abeb5a..03126c989 100644 --- a/packages/app/components/Layout/HomePageNavbar.tsx +++ b/packages/app/components/Layout/HomePageNavbar.tsx @@ -4,7 +4,7 @@ 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' @@ -69,24 +69,24 @@ const MobileNavBar = ({ }, [menuVisible, searchVisible]) return ( - + {(searchVisible || menuVisible) && ( -
+
)} {searchVisible && showSearchBar && ( -
+
)} -
+
Logo @@ -99,9 +99,17 @@ const MobileNavBar = ({ {pages.length > 0 && ( )} @@ -131,7 +139,7 @@ const PCNavBar = ({ const { isSignedIn } = useSIWE() const { userData } = useUserData() return ( - + -
+
{showSearchBar && }
( ) @@ -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/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", From a1038c6b98d5e2203fac98f61c86d813e3bbc7d8 Mon Sep 17 00:00:00 2001 From: Samuel Ojo <88172184+greatsamist@users.noreply.github.com> Date: Wed, 21 Feb 2024 20:07:00 +0100 Subject: [PATCH 2/5] fix: missing eventSlug on stage (#435) --- .../[event]/schedule/components/ScheduleCardModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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') From a510ada9b27b9a2d710be9147491025b4bff8b6c Mon Sep 17 00:00:00 2001 From: pabloVoorvaart Date: Wed, 21 Feb 2024 16:16:48 -0300 Subject: [PATCH 3/5] related videos fix --- packages/app/app/(vod)/watch/components/RelatedVideos.tsx | 6 +++--- packages/app/app/(vod)/watch/page.tsx | 2 +- .../[organization]/event/clips/components/Preview.tsx | 1 - 3 files changed, 4 insertions(+), 5 deletions(-) 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/page.tsx b/packages/app/app/(vod)/watch/page.tsx index e76ca31ac..7f5063f3d 100644 --- a/packages/app/app/(vod)/watch/page.tsx +++ b/packages/app/app/(vod)/watch/page.tsx @@ -26,7 +26,7 @@ export default async function Watch({ const tabs = [] tabs.push({ value: 'Related videos', - content: , + content: , }) return ( diff --git a/packages/app/app/studio/[organization]/event/clips/components/Preview.tsx b/packages/app/app/studio/[organization]/event/clips/components/Preview.tsx index 94c23f02b..c98e312e4 100644 --- a/packages/app/app/studio/[organization]/event/clips/components/Preview.tsx +++ b/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' From 86ed545b0c3827cee69acfb1f015c54f62d3ca3e Mon Sep 17 00:00:00 2001 From: pabloVoorvaart Date: Wed, 21 Feb 2024 17:55:04 -0300 Subject: [PATCH 4/5] studio ui changes --- .../[event]/components/EventHomeComponent.tsx | 18 +++++-- .../[event]/stage/components/StagePreview.tsx | 2 +- packages/app/app/studio/(home)/page.tsx | 2 +- .../components/SwitchOrganization.tsx | 4 +- .../[organization]/event/(editor)/page.tsx | 8 +-- .../event/clips/components/NoSession.tsx | 2 +- .../[organization]/event/clips/page.tsx | 2 +- .../app/app/studio/[organization]/layout.tsx | 49 ++++++++--------- .../studio/[organization]/library/page.tsx | 54 ++++++++++++++----- .../app/app/studio/[organization]/page.tsx | 8 +-- .../app/components/Layout/HomePageNavbar.tsx | 27 +++++++++- packages/app/lib/services/eventService.tsx | 25 +++++---- 12 files changed, 129 insertions(+), 72 deletions(-) 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]/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 03126c989..d19051bbe 100644 --- 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 ( - + ) } @@ -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,6 +166,7 @@ const PCNavBar = ({
{showSearchBar && }
+ + {organizations && ( +
+ +
+ )} ) 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, From 71ef0442be3eb3e7bdc02c40b2191e137a4a9e05 Mon Sep 17 00:00:00 2001 From: pabloVoorvaart Date: Wed, 21 Feb 2024 18:14:36 -0300 Subject: [PATCH 5/5] mobile padding and cache bug --- .../app/(vod)/components/ArchiveVideos.tsx | 2 +- packages/app/app/(vod)/layout.tsx | 2 +- packages/app/app/(vod)/watch/page.tsx | 87 ++++++++++--------- .../sessions/InfoBoxDescription.tsx | 12 +-- 4 files changed, 50 insertions(+), 53 deletions(-) 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)/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/page.tsx b/packages/app/app/(vod)/watch/page.tsx index 7f5063f3d..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, @@ -30,50 +31,52 @@ export default async function Watch({ }) return ( -
-
- - -
- - + Loading...
}> +
+
+ + +
+ + + {tabs.map((tab) => ( + + {tab.value} + + ))} + {tabs.map((tab) => ( - - {tab.value} - + + {tab.content} + ))} - - {tabs.map((tab) => ( - - {tab.content} - - ))} - -
+ +
+ ) } 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) } }