Merge pull request #72 from oslabs-beta/austin-vimeo

feat: embedded Vimeo players in the DemoCard.tsx component of splash site

Author: yiqunzheng

mlflow-site/package.json

@@ -9,18 +9,18 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.2.15",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.15"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.15",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.15"
+    "typescript": "^5"
   }
 }

mlflow-site/src/app/components/Demo.tsx

@@ -12,12 +12,17 @@ const Demo = () => {
     'Description for what\'s happening in Demo 2.  This block of text will contain all the info needed to understand the demo.',
     'Description for what\'s happening in Demo 3.  This block of text will contain all the info needed to understand the demo.'
   ];
+  const demoCardVideos = [
+    "https://player.vimeo.com/video/1022732764",
+    "https://player.vimeo.com/video/1022732772",
+  ];
   for (let i = 0; i < 3; i++) {
     demos.push(
       <DemoCard
         key={`demoCard${i}`}
         header={demoCardHeaders[i]}
         blurb={demoCardBlurbs[i]}
+        video={demoCardVideos[i]}
       />
     );
   }

mlflow-site/src/app/components/DemoCard.tsx

@@ -1,29 +1,33 @@
-import Image from 'next/image';
-
 const DemoCard = ({
   header,
   blurb,
+  video
 }: {
   key: string;
   blurb: string;
   header: string;
+  video: string;
 }) => {
   return (
-    <div className='demoCard'>
-      <Image
-        src='https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExaW9tcWttZ3R0YTVpNWxwcGJ4M2YyZ2ExcmxlazN5N3JyenF0ajl4dCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/FqdGGgugkC4Xm/giphy.gif'
-        alt=''
-        width={700}
-        height={475}
-        sizes='100vw'
-        style={{
-          width: '100%',
-          height: 'auto',
-        }}
-      />
-      <div className='demoCardText'>
-        <div className='demoCardHeader'>{header}</div>
-        <div className='demoCardInfo'>{blurb}</div>
+    <div className="demoCard">
+      <div style={{ padding: '56.25% 0 0 0', position: 'relative' }}>
+        <iframe
+          src={video}
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+          }}
+          allow="autoplay; fullscreen; picture-in-picture"
+          allowFullScreen
+          title="Vimeo Video Player"
+        />
+      </div>
+      <div className="demoCardText">
+        <div className="demoCardHeader">{header}</div>
+        <div className="demoCardInfo">{blurb}</div>
       </div>
     </div>
   );