feat: add functionality to copy movie assets during setup and update movie data structure to use local paths for posters and videos

Author: kentcdodds

.gitignore

@@ -10,6 +10,10 @@ data.db
 **/tsconfig.tsbuildinfo
 **/dist
 
+# Movie assets copied during setup
+exercises/**/public/posters/
+exercises/**/public/videos/
+
 # in a real app you'd want to not commit the .env
 # file as well, but since this is for a workshop
 # we're going to keep them around.

epicshop/setup-custom.js

@@ -12,6 +12,25 @@ await warm()
 const allApps = await getApps()
 const problemApps = allApps.filter(isProblemApp)
 
+// Copy posters and videos to each app's public directory
+console.log('🎬 Copying posters and videos to all apps...')
+const rootPublicPath = path.join(process.cwd(), 'public')
+const postersSource = path.join(rootPublicPath, 'posters')
+const videosSource = path.join(rootPublicPath, 'videos')
+
+for (const app of allApps) {
+	const appPublicPath = path.join(app.fullPath, 'public')
+	if (await fsExtra.exists(appPublicPath)) {
+		const postersTarget = path.join(appPublicPath, 'posters')
+		const videosTarget = path.join(appPublicPath, 'videos')
+
+		await fsExtra.copy(postersSource, postersTarget, { overwrite: true })
+		await fsExtra.copy(videosSource, videosTarget, { overwrite: true })
+	}
+}
+
+console.log('✅ Posters and videos copied to all apps')
+
 if (!process.env.SKIP_PLAYGROUND) {
 	const firstProblemApp = problemApps[0]
 	if (firstProblemApp) {

exercises/01.start/01.problem.vite-plugin/app/movie-trailer.tsx

@@ -1,6 +1,4 @@
-import { useState } from 'react'
-import LiteYouTubeEmbed from 'react-lite-youtube-embed'
-import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'
+import { Activity, useState } from 'react'
 import { type Movie } from '#app/movies-data.ts'
 
 export function MovieTrailer({ movie }: { movie: Movie }) {
@@ -14,16 +12,18 @@ export function MovieTrailer({ movie }: { movie: Movie }) {
 			>
 				{showTrailer ? 'Hide Trailer' : 'Watch Trailer'}
 			</button>
-			{showTrailer && (
+			<Activity mode={showTrailer ? 'visible' : 'hidden'}>
 				<div className="overflow-hidden rounded-lg">
-					<LiteYouTubeEmbed
-						id={movie.youtubeId}
+					<video
+						src={movie.videoUrl}
 						title={movie.title}
-						params="autoplay=1&mute=0&rel=0&modestbranding=1"
-						alwaysLoadIframe={true}
+						autoPlay
+						muted
+						loop
+						controls
 					/>
 				</div>
-			)}
+			</Activity>
 		</div>
 	)
 }

exercises/01.start/01.problem.vite-plugin/app/movies-data.ts

@@ -18,8 +18,8 @@ let movies = [
 		title: 'The Lord of the Rings: The Fellowship of the Ring',
 		year: 2001,
 		isFavorite: false,
-		poster: 'https://image.tmdb.org/t/p/w500/6oom5QYQ2yQTMJIbnvbkBL9cHo6.jpg',
-		youtubeId: 'V75dMMIW2B4',
+		poster: '/posters/lotr-fellowship-poster.jpg',
+		videoUrl: '/videos/lotr-fellowship-trailer.mp4',
 		description:
 			'A meek Hobbit from the Shire and eight companions set out on a journey to destroy the powerful One Ring and save Middle-earth from the Dark Lord Sauron.',
 		rating: 8.8,
@@ -29,8 +29,8 @@ let movies = [
 		title: 'The Lord of the Rings: The Two Towers',
 		year: 2002,
 		isFavorite: true,
-		poster: 'https://image.tmdb.org/t/p/w500/5VTN0pR8gcqV3EPUHHfMGnJYN9L.jpg',
-		youtubeId: 'LbfMDwc4azU',
+		poster: '/posters/lotr-two-towers-poster.jpg',
+		videoUrl: '/videos/lotr-two-towers-trailer.mp4',
 		description:
 			"While Frodo and Sam edge closer to Mordor with the help of the shifty Gollum, the divided fellowship makes a stand against Sauron's new ally, Saruman, and his hordes of Isengard.",
 		rating: 8.7,
@@ -40,8 +40,8 @@ let movies = [
 		title: 'The Lord of the Rings: The Return of the King',
 		year: 2003,
 		isFavorite: false,
-		poster: 'https://image.tmdb.org/t/p/w500/rCzpDGLbOoPwLjy3OAm5NUPOTrC.jpg',
-		youtubeId: 'r5X-hFf6Bwo',
+		poster: '/posters/lotr-return-king-poster.jpg',
+		videoUrl: '/videos/lotr-return-king-trailer.mp4',
 		description:
 			"Gandalf and Aragorn lead the World of Men against Sauron's army to draw his gaze from Frodo and Sam as they approach Mount Doom on their quest to destroy the One Ring.",
 		rating: 8.9,
@@ -51,8 +51,8 @@ let movies = [
 		title: 'K-Pop Demon Hunters',
 		year: 2025,
 		isFavorite: true,
-		poster: 'https://image.tmdb.org/t/p/w500/22AouvwlhlXbe3nrFcjzL24bvWH.jpg',
-		youtubeId: 'dQw4w9WgXcQ',
+		poster: '/posters/kpop-demon-hunters-poster.jpg',
+		videoUrl: '/videos/kpop-demon-hunters-trailer.mp4',
 		description:
 			'An animated musical comedy about a group of K-pop idols who moonlight as demon hunters, saving the world one catchy song at a time.',
 		rating: 9.2,
@@ -62,8 +62,8 @@ let movies = [
 		title: 'Spider-Man: Into the Spider-Verse',
 		year: 2018,
 		isFavorite: false,
-		poster: 'https://image.tmdb.org/t/p/w500/iiZZdoQBEYBv6id8su7ImL0oCbD.jpg',
-		youtubeId: 'g4Hbz2jLxvQ',
+		poster: '/posters/spiderverse-into-poster.jpg',
+		videoUrl: '/videos/spiderverse-into-trailer.mp4',
 		description:
 			'Teen Miles Morales becomes Spider-Man of his reality, crossing his path with five counterparts from other dimensions to stop a threat for all realities.',
 		rating: 8.4,
@@ -73,8 +73,8 @@ let movies = [
 		title: 'Spider-Man: Across the Spider-Verse',
 		year: 2023,
 		isFavorite: true,
-		poster: 'https://image.tmdb.org/t/p/w500/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg',
-		youtubeId: 'cqGjhVJWtEg',
+		poster: '/posters/spiderverse-across-poster.jpg',
+		videoUrl: '/videos/spiderverse-across-trailer.mp4',
 		description:
 			"After reuniting with Gwen Stacy, Brooklyn's full-time, friendly neighborhood Spider-Man is catapulted across the Multiverse, where he encounters a team of Spider-People charged with protecting its very existence.",
 		rating: 8.6,

exercises/01.start/01.solution.vite-plugin/app/movie-trailer.tsx

@@ -1,6 +1,4 @@
-import { useState } from 'react'
-import LiteYouTubeEmbed from 'react-lite-youtube-embed'
-import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'
+import { Activity, useState } from 'react'
 import { type Movie } from '#app/movies-data.ts'
 
 export function MovieTrailer({ movie }: { movie: Movie }) {
@@ -14,16 +12,18 @@ export function MovieTrailer({ movie }: { movie: Movie }) {
 			>
 				{showTrailer ? 'Hide Trailer' : 'Watch Trailer'}
 			</button>
-			{showTrailer && (
+			<Activity mode={showTrailer ? 'visible' : 'hidden'}>
 				<div className="overflow-hidden rounded-lg">
-					<LiteYouTubeEmbed
-						id={movie.youtubeId}
+					<video
+						src={movie.videoUrl}
 						title={movie.title}
-						params="autoplay=1&mute=0&rel=0&modestbranding=1"
-						alwaysLoadIframe={true}
+						autoPlay
+						muted
+						loop
+						controls
 					/>
 				</div>
-			)}
+			</Activity>
 		</div>
 	)
 }

exercises/01.start/01.solution.vite-plugin/app/movies-data.ts

@@ -18,8 +18,8 @@ let movies = [
 		title: 'The Lord of the Rings: The Fellowship of the Ring',
 		year: 2001,
 		isFavorite: false,
-		poster: 'https://image.tmdb.org/t/p/w500/6oom5QYQ2yQTMJIbnvbkBL9cHo6.jpg',
-		youtubeId: 'V75dMMIW2B4',
+		poster: '/posters/lotr-fellowship-poster.jpg',
+		videoUrl: '/videos/lotr-fellowship-trailer.mp4',
 		description:
 			'A meek Hobbit from the Shire and eight companions set out on a journey to destroy the powerful One Ring and save Middle-earth from the Dark Lord Sauron.',
 		rating: 8.8,
@@ -29,8 +29,8 @@ let movies = [
 		title: 'The Lord of the Rings: The Two Towers',
 		year: 2002,
 		isFavorite: true,
-		poster: 'https://image.tmdb.org/t/p/w500/5VTN0pR8gcqV3EPUHHfMGnJYN9L.jpg',
-		youtubeId: 'LbfMDwc4azU',
+		poster: '/posters/lotr-two-towers-poster.jpg',
+		videoUrl: '/videos/lotr-two-towers-trailer.mp4',
 		description:
 			"While Frodo and Sam edge closer to Mordor with the help of the shifty Gollum, the divided fellowship makes a stand against Sauron's new ally, Saruman, and his hordes of Isengard.",
 		rating: 8.7,
@@ -40,8 +40,8 @@ let movies = [
 		title: 'The Lord of the Rings: The Return of the King',
 		year: 2003,
 		isFavorite: false,
-		poster: 'https://image.tmdb.org/t/p/w500/rCzpDGLbOoPwLjy3OAm5NUPOTrC.jpg',
-		youtubeId: 'r5X-hFf6Bwo',
+		poster: '/posters/lotr-return-king-poster.jpg',
+		videoUrl: '/videos/lotr-return-king-trailer.mp4',
 		description:
 			"Gandalf and Aragorn lead the World of Men against Sauron's army to draw his gaze from Frodo and Sam as they approach Mount Doom on their quest to destroy the One Ring.",
 		rating: 8.9,
@@ -51,8 +51,8 @@ let movies = [
 		title: 'K-Pop Demon Hunters',
 		year: 2025,
 		isFavorite: true,
-		poster: 'https://image.tmdb.org/t/p/w500/22AouvwlhlXbe3nrFcjzL24bvWH.jpg',
-		youtubeId: 'dQw4w9WgXcQ',
+		poster: '/posters/kpop-demon-hunters-poster.jpg',
+		videoUrl: '/videos/kpop-demon-hunters-trailer.mp4',
 		description:
 			'An animated musical comedy about a group of K-pop idols who moonlight as demon hunters, saving the world one catchy song at a time.',
 		rating: 9.2,
@@ -62,8 +62,8 @@ let movies = [
 		title: 'Spider-Man: Into the Spider-Verse',
 		year: 2018,
 		isFavorite: false,
-		poster: 'https://image.tmdb.org/t/p/w500/iiZZdoQBEYBv6id8su7ImL0oCbD.jpg',
-		youtubeId: 'g4Hbz2jLxvQ',
+		poster: '/posters/spiderverse-into-poster.jpg',
+		videoUrl: '/videos/spiderverse-into-trailer.mp4',
 		description:
 			'Teen Miles Morales becomes Spider-Man of his reality, crossing his path with five counterparts from other dimensions to stop a threat for all realities.',
 		rating: 8.4,
@@ -73,8 +73,8 @@ let movies = [
 		title: 'Spider-Man: Across the Spider-Verse',
 		year: 2023,
 		isFavorite: true,
-		poster: 'https://image.tmdb.org/t/p/w500/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg',
-		youtubeId: 'cqGjhVJWtEg',
+		poster: '/posters/spiderverse-across-poster.jpg',
+		videoUrl: '/videos/spiderverse-across-trailer.mp4',
 		description:
 			"After reuniting with Gwen Stacy, Brooklyn's full-time, friendly neighborhood Spider-Man is catapulted across the Multiverse, where he encounters a team of Spider-People charged with protecting its very existence.",
 		rating: 8.6,

exercises/01.start/02.solution.loader-rsc/app/movie-trailer.tsx

@@ -1,6 +1,4 @@
-import { useState } from 'react'
-import LiteYouTubeEmbed from 'react-lite-youtube-embed'
-import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'
+import { Activity, useState } from 'react'
 import { type Movie } from '#app/movies-data.ts'
 
 export function MovieTrailer({ movie }: { movie: Movie }) {
@@ -14,16 +12,18 @@ export function MovieTrailer({ movie }: { movie: Movie }) {
 			>
 				{showTrailer ? 'Hide Trailer' : 'Watch Trailer'}
 			</button>
-			{showTrailer && (
+			<Activity mode={showTrailer ? 'visible' : 'hidden'}>
 				<div className="overflow-hidden rounded-lg">
-					<LiteYouTubeEmbed
-						id={movie.youtubeId}
+					<video
+						src={movie.videoUrl}
 						title={movie.title}
-						params="autoplay=1&mute=0&rel=0&modestbranding=1"
-						alwaysLoadIframe={true}
+						autoPlay
+						muted
+						loop
+						controls
 					/>
 				</div>
-			)}
+			</Activity>
 		</div>
 	)
 }

exercises/01.start/02.solution.loader-rsc/app/movies-data.ts

@@ -18,8 +18,8 @@ let movies = [
 		title: 'The Lord of the Rings: The Fellowship of the Ring',
 		year: 2001,
 		isFavorite: false,
-		poster: 'https://image.tmdb.org/t/p/w500/6oom5QYQ2yQTMJIbnvbkBL9cHo6.jpg',
-		youtubeId: 'V75dMMIW2B4',
+		poster: '/posters/lotr-fellowship-poster.jpg',
+		videoUrl: '/videos/lotr-fellowship-trailer.mp4',
 		description:
 			'A meek Hobbit from the Shire and eight companions set out on a journey to destroy the powerful One Ring and save Middle-earth from the Dark Lord Sauron.',
 		rating: 8.8,
@@ -29,8 +29,8 @@ let movies = [
 		title: 'The Lord of the Rings: The Two Towers',
 		year: 2002,
 		isFavorite: true,
-		poster: 'https://image.tmdb.org/t/p/w500/5VTN0pR8gcqV3EPUHHfMGnJYN9L.jpg',
-		youtubeId: 'LbfMDwc4azU',
+		poster: '/posters/lotr-two-towers-poster.jpg',
+		videoUrl: '/videos/lotr-two-towers-trailer.mp4',
 		description:
 			"While Frodo and Sam edge closer to Mordor with the help of the shifty Gollum, the divided fellowship makes a stand against Sauron's new ally, Saruman, and his hordes of Isengard.",
 		rating: 8.7,
@@ -40,8 +40,8 @@ let movies = [
 		title: 'The Lord of the Rings: The Return of the King',
 		year: 2003,
 		isFavorite: false,
-		poster: 'https://image.tmdb.org/t/p/w500/rCzpDGLbOoPwLjy3OAm5NUPOTrC.jpg',
-		youtubeId: 'r5X-hFf6Bwo',
+		poster: '/posters/lotr-return-king-poster.jpg',
+		videoUrl: '/videos/lotr-return-king-trailer.mp4',
 		description:
 			"Gandalf and Aragorn lead the World of Men against Sauron's army to draw his gaze from Frodo and Sam as they approach Mount Doom on their quest to destroy the One Ring.",
 		rating: 8.9,
@@ -51,8 +51,8 @@ let movies = [
 		title: 'K-Pop Demon Hunters',
 		year: 2025,
 		isFavorite: true,
-		poster: 'https://image.tmdb.org/t/p/w500/22AouvwlhlXbe3nrFcjzL24bvWH.jpg',
-		youtubeId: 'dQw4w9WgXcQ',
+		poster: '/posters/kpop-demon-hunters-poster.jpg',
+		videoUrl: '/videos/kpop-demon-hunters-trailer.mp4',
 		description:
 			'An animated musical comedy about a group of K-pop idols who moonlight as demon hunters, saving the world one catchy song at a time.',
 		rating: 9.2,
@@ -62,8 +62,8 @@ let movies = [
 		title: 'Spider-Man: Into the Spider-Verse',
 		year: 2018,
 		isFavorite: false,
-		poster: 'https://image.tmdb.org/t/p/w500/iiZZdoQBEYBv6id8su7ImL0oCbD.jpg',
-		youtubeId: 'g4Hbz2jLxvQ',
+		poster: '/posters/spiderverse-into-poster.jpg',
+		videoUrl: '/videos/spiderverse-into-trailer.mp4',
 		description:
 			'Teen Miles Morales becomes Spider-Man of his reality, crossing his path with five counterparts from other dimensions to stop a threat for all realities.',
 		rating: 8.4,
@@ -73,8 +73,8 @@ let movies = [
 		title: 'Spider-Man: Across the Spider-Verse',
 		year: 2023,
 		isFavorite: true,
-		poster: 'https://image.tmdb.org/t/p/w500/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg',
-		youtubeId: 'cqGjhVJWtEg',
+		poster: '/posters/spiderverse-across-poster.jpg',
+		videoUrl: '/videos/spiderverse-across-trailer.mp4',
 		description:
 			"After reuniting with Gwen Stacy, Brooklyn's full-time, friendly neighborhood Spider-Man is catapulted across the Multiverse, where he encounters a team of Spider-People charged with protecting its very existence.",
 		rating: 8.6,

exercises/01.start/03.solution.rsc-route/app/movie-trailer.tsx

@@ -1,6 +1,4 @@
-import { useState } from 'react'
-import LiteYouTubeEmbed from 'react-lite-youtube-embed'
-import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'
+import { Activity, useState } from 'react'
 import { type Movie } from '#app/movies-data.ts'
 
 export function MovieTrailer({ movie }: { movie: Movie }) {
@@ -14,16 +12,18 @@ export function MovieTrailer({ movie }: { movie: Movie }) {
 			>
 				{showTrailer ? 'Hide Trailer' : 'Watch Trailer'}
 			</button>
-			{showTrailer && (
+			<Activity mode={showTrailer ? 'visible' : 'hidden'}>
 				<div className="overflow-hidden rounded-lg">
-					<LiteYouTubeEmbed
-						id={movie.youtubeId}
+					<video
+						src={movie.videoUrl}
 						title={movie.title}
-						params="autoplay=1&mute=0&rel=0&modestbranding=1"
-						alwaysLoadIframe={true}
+						autoPlay
+						muted
+						loop
+						controls
 					/>
 				</div>
-			)}
+			</Activity>
 		</div>
 	)
 }