Fetch on refresh for play page

src/app/containers/movie/content.jsx

@@ -1,12 +1,10 @@
 import Link from "next/link";
-import { useVideoContext } from "../play/context";
 import { Crew } from "./crew";
 import { Genres } from "./genres";
 
 export const Content = ({data}) => {
-    const { title, description, genres, cast, video_source: videoSource } = data;
-    const { setVideoUrl } = useVideoContext();
-
+    const { id, title, description, genres, cast} = data;
+
     return <div>
         <h2>{title}</h2>
         <div>{description}</div>
@@ -15,6 +13,6 @@ export const Content = ({data}) => {
             <div>Role: {castMember.role}</div>
             <Crew crew={castMember.crew} />
         </div>)}
-        <Link href={"/play"} onClick={() => setVideoUrl(videoSource)}>Watch Movie</Link>
+        <Link href={`/play/${id}`}>Watch Movie</Link>
     </div>
 }

src/app/containers/play/index.jsx

@@ -1,15 +1,25 @@
 'use client'
 
-import { useVideoContext } from "./context"
+import { useMovie } from "../movie/hooks/useMovie";
+import { useParams } from 'next/navigation';
+
 
 export const Video = () => {
-    const { videoUrl } = useVideoContext()
-    console.log(videoUrl)
-
-    return <div className="flex justify-center items-center h-full">
-    <video className="w-[600px] h-[400px]" controls>
-        <source src={videoUrl} type="video/mp4"></source>
-        Your browser does not support the video tag.
-    </video>
+    const params = useParams();
+    const { id } = params
+    const { data, error, isError, isLoading, isSuccess } = useMovie(id)
+
+    const videoUrl = data?.video_source;
+
+    if(isLoading) return <div>Loading...</div>
+
+    if(isError) return <div>{error.message}</div>
+
+    if(isSuccess && videoUrl)
+        return <div className="flex justify-center items-center h-full">
+        <video className="w-[600px] h-[400px]" controls>
+            <source src={videoUrl} type="video/mp4"></source>
+            Your browser does not support the video tag.
+        </video>
     </div>
 }

src/app/play/[id]/page.jsx

@@ -0,0 +1,5 @@
+import { Video } from "../../containers/play";
+
+const PlayPage = () => <Video/>
+
+export default PlayPage;

src/app/providers/index.jsx

@@ -1,16 +1,12 @@
 'use client'
 
-import { useValues, VideoContext } from "../containers/play/context";
 import { ReactQueryProvider } from "./reactQueryProvider";
 
 export const Providers = ({ children }) => {
-  const videoValues = useValues()
 
   return (
     <ReactQueryProvider>
-      <VideoContext.Provider value={videoValues}>
         {children}
-      </VideoContext.Provider>
     </ReactQueryProvider>
   );
 };