Adding Devfile Demo Video

.eslintrc.json

@@ -82,7 +82,9 @@
     // It's not accurate in the monorepo style
     "import/no-extraneous-dependencies": "off",
     // Import for import of components
-    "import/no-cycle": "off"
+    "import/no-cycle": "off",
+    // Disables the no img tag rule
+    "@next/next/no-img-element": "off"
   },
   "overrides": [
     {

src/components/GifPlayer/GifPlayer.module.css

@@ -0,0 +1,21 @@
+.container {
+  display: block;
+  margin-right: auto;
+  margin-left: auto;
+  width: 50%;
+  height: 50%;
+}
+
+@media only screen and (max-width: 1080px) {
+  .container {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@media only screen and (max-width: 1280px) {
+  .container {
+    width: 75%;
+    height: 75%;
+  }
+}

src/components/GifPlayer/GifPlayer.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Card } from '@patternfly/react-core';
+import styles from './GifPlayer.module.css';
+
+export interface GifPlayerProps
+  extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
+  src: string;
+
+  className?: string;
+
+  alt?: string;
+}
+
+export const GifPlayer: React.FC<GifPlayerProps> = ({
+  src,
+  className = '',
+  alt = 'loading...',
+  ...props
+}: GifPlayerProps) => (
+  <Card className={styles.container}>
+    <img {...props} className={className} src={src} alt={alt} />
+  </Card>
+);

src/components/GifPlayer/index.ts

@@ -0,0 +1 @@
+export * from './GifPlayer';

src/components/WhyDevfiles/WhyDevfiles.tsx

@@ -1,13 +1,21 @@
 import { TextContainer } from 'custom-types';
 import { Text, TextContent, TextVariants } from '@patternfly/react-core';
+import { GifPlayer } from '@src/components';
+import { useWindowDimensions } from '@src/util/client';
 import styles from './WhyDevfiles.module.css';
 
 export interface WhyDevfilesProps {
   whyDevfiles: TextContainer;
 }
 
 export const WhyDevfiles: React.FC<WhyDevfilesProps> = (props: WhyDevfilesProps) => {
+  const minDemoSize = 480;
   const { whyDevfiles } = props;
+  const { height, width } = useWindowDimensions();
+  const demoFile =
+    width !== undefined && height !== undefined && Math.min(height, width) < minDemoSize
+      ? '/images/devfileDemo.png'
+      : '/images/devfileDemo.gif';
 
   return (
     <div className={styles.container}>
@@ -18,6 +26,7 @@ export const WhyDevfiles: React.FC<WhyDevfilesProps> = (props: WhyDevfilesProps)
         <Text className={styles.bodyText}>{whyDevfiles.body}</Text>
       </TextContent>
       <br />
+      <GifPlayer width="1920px" height="1080px" src={demoFile} />
     </div>
   );
 };

src/components/index.ts

@@ -10,3 +10,4 @@ export * from './NavBar';
 export * from './Transitions';
 export * from './ValueProposition';
 export * from './WhyDevfiles';
+export * from './GifPlayer';