Skip to content

Commit 2a9e931

Browse files
pblvrtpblvrt
committed
feat: Update layout components and add dynamic export for improved performance
- Refactored layout components in app, including RootLayout, StudioLayout, and organization-specific layouts for better readability and consistency. - Added dynamic export to multiple pages to enhance server-side rendering capabilities. - Updated blog post metadata for improved clarity and structure. - Ensured consistent formatting across various components for better maintainability.
1 parent 1a2d8d8 commit 2a9e931

File tree

7 files changed

+318
-302
lines changed

7 files changed

+318
-302
lines changed

‎packages/app/app/(legal)/privacy/page.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,3 +41,4 @@ const Privacy = async () => {
4141
};
4242

4343
export default Privacy;
44+
export const dynamic = 'force-dynamic';

‎packages/app/app/auth/magic-link/page.tsx‎

Lines changed: 60 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,83 @@
1-
"use client";
1+
'use client';
22

3-
import { Suspense, useEffect, useState } from "react";
4-
import { useRouter, useSearchParams } from "next/navigation";
5-
import { signIn } from "next-auth/react";
3+
import { Suspense, useEffect, useState } from 'react';
4+
import { useRouter, useSearchParams } from 'next/navigation';
5+
import { signIn } from 'next-auth/react';
66

77
const Loading = () => (
8-
<div className="flex flex-col justify-center items-center h-screen">
9-
<h2 className="text-2xl font-bold text-gray-600">Verifying...</h2>
10-
</div>
8+
<div className="flex flex-col justify-center items-center h-screen">
9+
<h2 className="text-2xl font-bold text-gray-600">Verifying...</h2>
10+
</div>
1111
);
1212

1313
const InitialParamsLoading = () => (
14-
<div className="flex flex-col justify-center items-center h-screen">
15-
<h2 className="text-2xl font-bold text-gray-600">Loading...</h2>
16-
</div>
14+
<div className="flex flex-col justify-center items-center h-screen">
15+
<h2 className="text-2xl font-bold text-gray-600">Loading...</h2>
16+
</div>
1717
);
1818

1919
const MagicLinkHandler = () => {
20-
const searchParams = useSearchParams();
21-
const token = searchParams.get("token");
22-
const email = searchParams.get("email");
23-
const redirect = searchParams.get("redirect");
20+
const searchParams = useSearchParams();
21+
const token = searchParams.get('token');
22+
const email = searchParams.get('email');
23+
const redirect = searchParams.get('redirect');
2424

25-
const router = useRouter();
26-
const [error, setError] = useState<string | null>(null);
27-
const [loading, setLoading] = useState(true);
25+
const router = useRouter();
26+
const [error, setError] = useState<string | null>(null);
27+
const [loading, setLoading] = useState(true);
2828

29-
useEffect(() => {
30-
const authenticate = async () => {
31-
if (!token || !email) {
32-
router.push(
33-
"/auth/login?error=Error: check your email for the correct magic link or try again",
34-
);
35-
setLoading(false);
36-
return;
37-
}
29+
useEffect(() => {
30+
const authenticate = async () => {
31+
if (!token || !email) {
32+
router.push(
33+
'/auth/login?error=Error: check your email for the correct magic link or try again'
34+
);
35+
setLoading(false);
36+
return;
37+
}
3838

39-
const result = await signIn("credentials", {
40-
token: token,
41-
email: email,
42-
type: "email",
43-
redirect: false,
44-
});
39+
const result = await signIn('credentials', {
40+
token: token,
41+
email: email,
42+
type: 'email',
43+
redirect: false,
44+
});
4545

46-
if (result?.error) {
47-
setError("Error: Failed to sign in.");
48-
router.push("/auth/login?error=Login failed or token expired");
49-
} else {
50-
router.push(redirect || "/studio");
51-
}
52-
setLoading(false);
53-
};
46+
if (result?.error) {
47+
setError('Error: Failed to sign in.');
48+
router.push('/auth/login?error=Login failed or token expired');
49+
} else {
50+
router.push(redirect || '/studio');
51+
}
52+
setLoading(false);
53+
};
5454

55-
authenticate();
56-
}, [token, router]);
55+
authenticate();
56+
}, [token, router]);
5757

58-
if (loading) {
59-
return <Loading />;
60-
}
58+
if (loading) {
59+
return <Loading />;
60+
}
6161

62-
if (error) {
63-
return (
64-
<div className="flex flex-col justify-center items-center h-screen">
65-
<h2 className="text-2xl font-bold text-red-600">{error}</h2>
66-
<p className="mt-2 text-gray-600">Please try again later.</p>
67-
</div>
68-
);
69-
}
62+
if (error) {
63+
return (
64+
<div className="flex flex-col justify-center items-center h-screen">
65+
<h2 className="text-2xl font-bold text-red-600">{error}</h2>
66+
<p className="mt-2 text-gray-600">Please try again later.</p>
67+
</div>
68+
);
69+
}
7070

71-
return null;
71+
return null;
7272
};
7373

7474
const MagicLinkPage = () => {
75-
return (
76-
<Suspense fallback={<InitialParamsLoading />}>
77-
<MagicLinkHandler />
78-
</Suspense>
79-
);
75+
return (
76+
<Suspense fallback={<InitialParamsLoading />}>
77+
<MagicLinkHandler />
78+
</Suspense>
79+
);
8080
};
8181

8282
export default MagicLinkPage;
83+
export const dynamic = 'force-dynamic';

‎packages/app/app/blog/posts/run-of-show-essential-guide-for-successful-events.md‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: 'Run of Show: Essential Guide for Successful Events'
3-
excerpt: 'Learn what a run of show is and why it\'s crucial for organizing successful events, from corporate meetings to music festivals and television broadcasts.'
3+
excerpt: 'Learn what a run of show is and why it is crucial for organizing successful events, from corporate meetings to music festivals and television broadcasts.'
44
author: 'StreamEth Team'
55
authorAvatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face'
66
authorBio: 'The StreamEth team is dedicated to helping event organizers create memorable live streaming experiences. Follow us for the latest insights on event production and live streaming technology.'
@@ -10,7 +10,14 @@ category: 'Event Planning'
1010
image: 'https://images.unsplash.com/photo-1559223607-b4d0555ae227?w=1200&h=600&fit=crop'
1111
featured: false
1212
views: 0
13-
tags: ['Event Planning', 'Production', 'Organization', 'Broadcasting', 'Live Events']
13+
tags:
14+
[
15+
'Event Planning',
16+
'Production',
17+
'Organization',
18+
'Broadcasting',
19+
'Live Events',
20+
]
1421
---
1522

1623
Whether you're planning a corporate event, a music festival, or a television broadcast, one essential tool you'll need is a run of show. But what exactly is a run of show and why do you need one?

‎packages/app/app/embed/page.tsx‎

Lines changed: 90 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,112 @@
1-
import Player from "@/components/ui/Player";
2-
import { notFound } from "next/navigation";
3-
import { Suspense } from "react";
4-
import { EmbedPageParams } from "@/lib/types";
5-
import { fetchStage } from "@/lib/services/stageService";
6-
import { buildPlaybackUrl } from "@/lib/utils/utils";
7-
import { fetchSession } from "@/lib/services/sessionService";
8-
import { getVideoUrlAction } from "@/lib/actions/livepeer";
1+
import Player from '@/components/ui/Player';
2+
import { notFound } from 'next/navigation';
3+
import { Suspense } from 'react';
4+
import { EmbedPageParams } from '@/lib/types';
5+
import { fetchStage } from '@/lib/services/stageService';
6+
import { buildPlaybackUrl } from '@/lib/utils/utils';
7+
import { fetchSession } from '@/lib/services/sessionService';
8+
import { getVideoUrlAction } from '@/lib/actions/livepeer';
99

1010
const Embed = ({
11-
src,
12-
thumbnail,
13-
name,
11+
src,
12+
thumbnail,
13+
name,
1414
}: {
15-
src: string;
16-
thumbnail?: string;
17-
name?: string;
15+
src: string;
16+
thumbnail?: string;
17+
name?: string;
1818
}) => {
19-
return (
20-
<div className="flex absolute top-0 left-0 justify-center items-center w-screen h-screen bg-black">
21-
<Player
22-
thumbnail={thumbnail}
23-
name={name}
24-
src={[
25-
{
26-
src: src as `${string}m3u8`,
27-
width: 1920,
28-
height: 1080,
29-
mime: "application/vnd.apple.mpegurl",
30-
type: "hls",
31-
},
32-
]}
33-
/>
34-
</div>
35-
);
19+
return (
20+
<div className="flex absolute top-0 left-0 justify-center items-center w-screen h-screen bg-black">
21+
<Player
22+
thumbnail={thumbnail}
23+
name={name}
24+
src={[
25+
{
26+
src: src as `${string}m3u8`,
27+
width: 1920,
28+
height: 1080,
29+
mime: 'application/vnd.apple.mpegurl',
30+
type: 'hls',
31+
},
32+
]}
33+
/>
34+
</div>
35+
);
3636
};
3737

3838
const EmbedPage = async ({
39-
searchParams: searchParamsPromise,
39+
searchParams: searchParamsPromise,
4040
}: EmbedPageParams) => {
41-
const searchParams = await searchParamsPromise;
41+
const searchParams = await searchParamsPromise;
4242

43-
if (
44-
!searchParams.playbackId &&
45-
!searchParams.stage &&
46-
!searchParams.session
47-
) {
48-
return notFound();
49-
}
43+
if (
44+
!searchParams.playbackId &&
45+
!searchParams.stage &&
46+
!searchParams.session
47+
) {
48+
return notFound();
49+
}
5050

51-
if (searchParams.playbackId) {
52-
const src = buildPlaybackUrl(
53-
searchParams.playbackId,
54-
Boolean(searchParams?.vod),
55-
);
51+
if (searchParams.playbackId) {
52+
const src = buildPlaybackUrl(
53+
searchParams.playbackId,
54+
Boolean(searchParams?.vod)
55+
);
5656

57-
return (
58-
<Suspense fallback={<div>Loading...</div>}>
59-
<Embed src={src} />
60-
</Suspense>
61-
);
62-
}
57+
return (
58+
<Suspense fallback={<div>Loading...</div>}>
59+
<Embed src={src} />
60+
</Suspense>
61+
);
62+
}
6363

64-
if (searchParams.stage) {
65-
const stage = await fetchStage({
66-
stage: searchParams.stage,
67-
});
64+
if (searchParams.stage) {
65+
const stage = await fetchStage({
66+
stage: searchParams.stage,
67+
});
6868

69-
if (!stage || !stage.streamSettings?.playbackId) {
70-
return notFound();
71-
}
69+
if (!stage || !stage.streamSettings?.playbackId) {
70+
return notFound();
71+
}
7272

73-
return (
74-
<Suspense fallback={<div>Loading...</div>}>
75-
<Embed
76-
src={buildPlaybackUrl(stage.streamSettings.playbackId)}
77-
thumbnail={stage.thumbnail}
78-
name={stage.name}
79-
/>
80-
</Suspense>
81-
);
82-
}
73+
return (
74+
<Suspense fallback={<div>Loading...</div>}>
75+
<Embed
76+
src={buildPlaybackUrl(stage.streamSettings.playbackId)}
77+
thumbnail={stage.thumbnail}
78+
name={stage.name}
79+
/>
80+
</Suspense>
81+
);
82+
}
8383

84-
if (searchParams.session) {
85-
const session = await fetchSession({
86-
session: searchParams.session,
87-
});
84+
if (searchParams.session) {
85+
const session = await fetchSession({
86+
session: searchParams.session,
87+
});
8888

89-
if (!session || !session.playbackId) {
90-
return notFound();
91-
}
89+
if (!session || !session.playbackId) {
90+
return notFound();
91+
}
9292

93-
const videoUrl = await getVideoUrlAction(session);
93+
const videoUrl = await getVideoUrlAction(session);
9494

95-
if (!videoUrl) {
96-
return notFound();
97-
}
95+
if (!videoUrl) {
96+
return notFound();
97+
}
9898

99-
return (
100-
<Suspense fallback={<div>Loading...</div>}>
101-
<Embed
102-
src={videoUrl}
103-
thumbnail={session.coverImage}
104-
name={session.name}
105-
/>
106-
</Suspense>
107-
);
108-
}
99+
return (
100+
<Suspense fallback={<div>Loading...</div>}>
101+
<Embed
102+
src={videoUrl}
103+
thumbnail={session.coverImage}
104+
name={session.name}
105+
/>
106+
</Suspense>
107+
);
108+
}
109109
};
110110

111111
export default EmbedPage;
112+
export const dynamic = 'force-dynamic';

0 commit comments

Comments
 (0)