session page plumbing and some video player work

jack-laverty · Jul 26, 2024 · 8127e44 · 8127e44
1 parent 0913a3e
commit 8127e44
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 32 deletions.
diff --git a/app/session/[sessionId]/components/SessionHeader.tsx b/app/session/[sessionId]/components/SessionHeader.tsx
@@ -16,9 +16,9 @@ const SessionHeader: React.FC<{ session: Session }> = ({ session }) => {
         </div>
         <div className="md:grid md:grid-cols-2 md:grid-rows-2">
           <div className="flex text-xs md:text-sm font-bold items-center">Session Info</div>
-          <div className="flex text-xs md:text-sm justify-start items-center">Advanced Turns, Left</div>
+          <div className="flex text-xs md:text-sm justify-start items-center">{session.wave}</div>
           <div className="flex text-xs md:text-sm font-bold items-center">Location</div>
-          <div className="flex text-xs md:text-sm justify-start items-center">URBNSURF Sydney</div>
+          <div className="flex text-xs md:text-sm justify-start items-center">{session.location}</div>
         </div>
       </div>
 
@@ -28,15 +28,15 @@ const SessionHeader: React.FC<{ session: Session }> = ({ session }) => {
           <div className="flex font-bold justify-end items-center">
               <img src="/clock.svg" alt="clock" className="w-6 h-6"/>
           </div>
-          <div className="flex justify-start items-center">3:27 total</div>
+          <div className="flex justify-start items-center">{session.time} total</div>
           <div className="flex font-bold justify-end items-center">
               <img src="/wave.svg" alt="wave" className="w-6 h-6"/>
           </div>
-          <div className="flex justify-start items-center">14 waves</div>
+          <div className="flex justify-start items-center">{session.wave_count} waves</div>
           <div className="flex font-bold justify-end items-center">
               <img src="/surfboard.svg" alt="surfboard" className="w-6 h-6"/>
           </div>
-          <div className="flex justify-start items-center">Lost Puddlefish</div>
+          <div className="flex justify-start items-center">{session.board}</div>
         </div>
       </div>
 
@@ -47,16 +47,16 @@ const SessionHeader: React.FC<{ session: Session }> = ({ session }) => {
 
       <div className="hidden md:flex justify-end space-x-8 pr-4">
         <button className="flex flex-col items-center justify-center">
-        <img src="/locked.svg" alt="Unlocked" className="w-8 h-8" />
-        <span className="text-sm">public</span>
+          <img src="/locked.svg" alt="Unlocked" className="w-8 h-8" />
+          <span className="text-sm">public</span>
         </button>
         <button className="flex flex-col items-center justify-center">
-        <img src="/download.svg" alt="Download Icon" className="w-8 h-8" />
-        <span className="text-sm">download</span>
+          <img src="/download.svg" alt="Download Icon" className="w-8 h-8" />
+          <span className="text-sm">download</span>
         </button>
         <button className="flex flex-col items-center justify-center">
-        <img src="/share.svg" alt="Unlocked" className="w-8 h-8" />
-        <span className="text-sm">share</span>
+          <img src="/share.svg" alt="Unlocked" className="w-8 h-8" />
+          <span className="text-sm">share</span>
         </button>
       </div>
     </div>

diff --git a/app/session/[sessionId]/components/VideoHeader.tsx b/app/session/[sessionId]/components/VideoHeader.tsx
@@ -1,16 +1,24 @@
 import React from 'react';
+import {Video, Session} from '../types';
+
+interface VideoHeaderProps {
+  session: Session;
+  video: Video;
+}
+
+const VideoHeader: React.FC<VideoHeaderProps> = ({ session, video }) => {
 
-const VideoHeader: React.FC = () => {
-
   return (
     <div className="video-header flex items-center p-4 bg-slate-900 text-white rounded-t-xl">
       <img src="/chickenjoe.jpg" alt="Profile Image" className="w-14 h-14 rounded-full border-4 border-white" />
       <div className="flex flex-col pl-5 space-y-1">
         <div className="flex space-x-2">
-          <div className="font-bold text-base">Chicken Joe</div>
+          <div className="font-bold text-base">{session.surfer}</div>
+          {/* <div className="text-base">{session.surfer_social}</div> */}
           <div className="text-base">@chickenjoe</div>
         </div>
-        <div className="text-sm">11 July 2024 - 7:42am</div>
+        {/* <time className="text-sm">{session.date} - {video.time}</time> */}
+        <time className="text-sm">{session.date} - {session.time}</time>
       </div>
     </div>
   );

diff --git a/app/session/[sessionId]/components/VideoPlayer.tsx b/app/session/[sessionId]/components/VideoPlayer.tsx
@@ -1,15 +1,17 @@
 import React from 'react';
 import VideoHeader from './VideoHeader';
 import VideoPlayerControls from './VideoPlayerControls';
+import { Video, Session} from '../types';
 
-const VideoPlayer: React.FC = () => {
-
+interface VideoPlayerProps {
+  session: Session;
+  video: Video;
+}
+
+const VideoPlayer: React.FC<VideoPlayerProps> = ({ session, video }) => {
   return (
     <div className="flex flex-col">
-      <VideoHeader />
-      {/* <video id="video" className="w-full">
-        <source src="surfing.mp4" type="video/mp4"></source>
-      </video> */}
+      <VideoHeader session={session} video={video} />
       <img src="/test-screen.svg" alt="Test Screen" />
       <VideoPlayerControls />
     </div>

diff --git a/app/session/[sessionId]/components/VideoPlayerControls.tsx b/app/session/[sessionId]/components/VideoPlayerControls.tsx
@@ -10,7 +10,7 @@ const VidePlayerControls: React.FC = () => {
         <button><img src="/play-button.svg" alt="play" className="w-8 h-8 svg-filter" /></button>
         <button><img src="/pause-button.svg" alt="play" className="w-8 h-8 svg-filter" /></button>
         <div className="w-full bg-gray-700 rounded-full h-4">
-          <div id="progress-bar" className="bg-blue-500 h-4 rounded-full"></div>
+          <div id="progress-bar" className="bg-white h-4 rounded-full"></div>
         </div>
         <div className="text-sm text-white">0:26</div>
       </div>
@@ -22,7 +22,7 @@ const VidePlayerControls: React.FC = () => {
         <button><img src="/pencil.svg" alt="whiteboard" className="w-8 h-8 svg-filter" /></button>
         <button><img src="/bookmark.svg" alt="whiteboard" className="w-8 h-8 svg-filter" /></button>
 
-        <div className="flex space-x-2">
+        <div className="flex space-x-2 ">
           <input
           type="range"
           id="playbackRate"

diff --git a/app/session/[sessionId]/page.tsx b/app/session/[sessionId]/page.tsx
@@ -60,31 +60,36 @@ async function getSession(id: string)
   return session;
 }
 
-async function getVideos()
+async function getVideos(sessionVideosPrefix: string | undefined)
 {
-  // just connect to the server and get the bucket for now
-  if (!minioClient) {
+  if (!minioClient || !sessionVideosPrefix) {
     return null;
   }
-  const buckets = await minioClient.listBuckets();
-  console.log(buckets);
+
+  const stream = minioClient.listObjectsV2('chum-bucket', sessionVideosPrefix, true, '')
+  stream.on('data', function (obj) {
+    console.log(obj)
+  })
+  stream.on('error', function (err) {
+    console.log(err)
+  })
 }
 
 export default async function SessionPage({ params }: { params: { sessionId: string } }) {
 
-  console.log(params.sessionId);
   const session = await getSession(params.sessionId);
-  getVideos();
-
   if (!session)
     return <div>No session data available</div>;
+
+  getVideos(session?.videos);
 
   return (
     <div className='session-page'>
       <SessionHeader session={session}/>
       <div className="flex flex-col justify-between py-4 bg-gray-100">
         <div className="md:mx-auto bg-white md:p-6 rounded-xl">
-          <VideoPlayer />
+          {/* TODO: get this from selected video */}
+          <VideoPlayer session={session} video={videos[0]}/> 
           <VideoList videos={videos}/>
         </div>
       </div>