refactor: enhance MovieTrailer component by adding useAutoplay hook for video playback control

Author: kentcdodds

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

@@ -1,8 +1,9 @@
-import { Activity, useState } from 'react'
+import { Activity, useEffect, useState } from 'react'
 import { type Movie } from '#app/movies-data.ts'
 
 export function MovieTrailer({ movie }: { movie: Movie }) {
 	const [showTrailer, setShowTrailer] = useState(false)
+	useAutoplay(showTrailer)
 
 	return (
 		<div className="mb-6">
@@ -18,7 +19,6 @@ export function MovieTrailer({ movie }: { movie: Movie }) {
 						src={movie.videoUrl}
 						title={movie.title}
 						autoPlay
-						muted
 						loop
 						controls
 					/>
@@ -27,3 +27,20 @@ export function MovieTrailer({ movie }: { movie: Movie }) {
 		</div>
 	)
 }
+
+function useAutoplay(showTrailer: boolean) {
+	useEffect(() => {
+		const video = document.querySelector('video')
+		if (!(video instanceof HTMLVideoElement)) return
+		if (!showTrailer) {
+			void video.pause()
+			return
+		}
+
+		video.volume = 1
+		void video.play()
+		return () => {
+			void video.pause()
+		}
+	}, [showTrailer])
+}

exercises/01.start/01.problem.vite-plugin/vite.config.ts

@@ -1,5 +1,7 @@
-// import { unstable_reactRouterRSC as reactRouterRSC } from '@react-router/dev/vite'
-import { reactRouter } from '@react-router/dev/vite'
+import {
+	reactRouter,
+	// unstable_reactRouterRSC as reactRouterRSC,
+} from '@react-router/dev/vite'
 import tailwindcss from '@tailwindcss/vite'
 // import rsc from '@vitejs/plugin-rsc'
 import { defineConfig } from 'vite'

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

@@ -1,8 +1,9 @@
-import { Activity, useState } from 'react'
+import { Activity, useEffect, useState } from 'react'
 import { type Movie } from '#app/movies-data.ts'
 
 export function MovieTrailer({ movie }: { movie: Movie }) {
 	const [showTrailer, setShowTrailer] = useState(false)
+	useAutoplay(showTrailer)
 
 	return (
 		<div className="mb-6">
@@ -18,7 +19,6 @@ export function MovieTrailer({ movie }: { movie: Movie }) {
 						src={movie.videoUrl}
 						title={movie.title}
 						autoPlay
-						muted
 						loop
 						controls
 					/>
@@ -27,3 +27,20 @@ export function MovieTrailer({ movie }: { movie: Movie }) {
 		</div>
 	)
 }
+
+function useAutoplay(showTrailer: boolean) {
+	useEffect(() => {
+		const video = document.querySelector('video')
+		if (!(video instanceof HTMLVideoElement)) return
+		if (!showTrailer) {
+			void video.pause()
+			return
+		}
+
+		video.volume = 1
+		void video.play()
+		return () => {
+			void video.pause()
+		}
+	}, [showTrailer])
+}

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

@@ -1,8 +1,9 @@
-import { Activity, useState } from 'react'
+import { Activity, useEffect, useState } from 'react'
 import { type Movie } from '#app/movies-data.ts'
 
 export function MovieTrailer({ movie }: { movie: Movie }) {
 	const [showTrailer, setShowTrailer] = useState(false)
+	useAutoplay(showTrailer)
 
 	return (
 		<div className="mb-6">
@@ -18,7 +19,6 @@ export function MovieTrailer({ movie }: { movie: Movie }) {
 						src={movie.videoUrl}
 						title={movie.title}
 						autoPlay
-						muted
 						loop
 						controls
 					/>
@@ -27,3 +27,20 @@ export function MovieTrailer({ movie }: { movie: Movie }) {
 		</div>
 	)
 }
+
+function useAutoplay(showTrailer: boolean) {
+	useEffect(() => {
+		const video = document.querySelector('video')
+		if (!(video instanceof HTMLVideoElement)) return
+		if (!showTrailer) {
+			void video.pause()
+			return
+		}
+
+		video.volume = 1
+		void video.play()
+		return () => {
+			void video.pause()
+		}
+	}, [showTrailer])
+}

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

@@ -1,8 +1,9 @@
-import { Activity, useState } from 'react'
+import { Activity, useEffect, useState } from 'react'
 import { type Movie } from '#app/movies-data.ts'
 
 export function MovieTrailer({ movie }: { movie: Movie }) {
 	const [showTrailer, setShowTrailer] = useState(false)
+	useAutoplay(showTrailer)
 
 	return (
 		<div className="mb-6">
@@ -18,7 +19,6 @@ export function MovieTrailer({ movie }: { movie: Movie }) {
 						src={movie.videoUrl}
 						title={movie.title}
 						autoPlay
-						muted
 						loop
 						controls
 					/>
@@ -27,3 +27,20 @@ export function MovieTrailer({ movie }: { movie: Movie }) {
 		</div>
 	)
 }
+
+function useAutoplay(showTrailer: boolean) {
+	useEffect(() => {
+		const video = document.querySelector('video')
+		if (!(video instanceof HTMLVideoElement)) return
+		if (!showTrailer) {
+			void video.pause()
+			return
+		}
+
+		video.volume = 1
+		void video.play()
+		return () => {
+			void video.pause()
+		}
+	}, [showTrailer])
+}

exercises/01.start/04.solution.server-fns/app/movie-trailer.tsx

@@ -1,8 +1,9 @@
-import { Activity, useState } from 'react'
+import { Activity, useEffect, useState } from 'react'
 import { type Movie } from '#app/movies-data.ts'
 
 export function MovieTrailer({ movie }: { movie: Movie }) {
 	const [showTrailer, setShowTrailer] = useState(false)
+	useAutoplay(showTrailer)
 
 	return (
 		<div className="mb-6">
@@ -18,7 +19,6 @@ export function MovieTrailer({ movie }: { movie: Movie }) {
 						src={movie.videoUrl}
 						title={movie.title}
 						autoPlay
-						muted
 						loop
 						controls
 					/>
@@ -27,3 +27,20 @@ export function MovieTrailer({ movie }: { movie: Movie }) {
 		</div>
 	)
 }
+
+function useAutoplay(showTrailer: boolean) {
+	useEffect(() => {
+		const video = document.querySelector('video')
+		if (!(video instanceof HTMLVideoElement)) return
+		if (!showTrailer) {
+			void video.pause()
+			return
+		}
+
+		video.volume = 1
+		void video.play()
+		return () => {
+			void video.pause()
+		}
+	}, [showTrailer])
+}

exercises/01.start/05.solution.use-client/app/movie-trailer.tsx

@@ -1,10 +1,11 @@
 'use client'
 
-import { Activity, useState } from 'react'
+import { Activity, useEffect, useState } from 'react'
 import { type Movie } from '#app/movies-data.ts'
 
 export function MovieTrailer({ movie }: { movie: Movie }) {
 	const [showTrailer, setShowTrailer] = useState(false)
+	useAutoplay(showTrailer)
 
 	return (
 		<div className="mb-6">
@@ -20,7 +21,6 @@ export function MovieTrailer({ movie }: { movie: Movie }) {
 						src={movie.videoUrl}
 						title={movie.title}
 						autoPlay
-						muted
 						loop
 						controls
 					/>
@@ -29,3 +29,20 @@ export function MovieTrailer({ movie }: { movie: Movie }) {
 		</div>
 	)
 }
+
+function useAutoplay(showTrailer: boolean) {
+	useEffect(() => {
+		const video = document.querySelector('video')
+		if (!(video instanceof HTMLVideoElement)) return
+		if (!showTrailer) {
+			void video.pause()
+			return
+		}
+
+		video.volume = 1
+		void video.play()
+		return () => {
+			void video.pause()
+		}
+	}, [showTrailer])
+}