demo now shows as static image when viewed on mobile device.

Signed-off-by: Michael Valdron <[email protected]>

Author: michael-valdron

public/images/demo.png

@@ -1,14 +1,24 @@
 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();
+  let demoFile: string;
+
+  if (width !== undefined && height !== undefined && Math.min(height, width) < minDemoSize) {
+    demoFile = '/images/demo.png';
+  } else {
+    demoFile = '/images/demo.gif';
+  }
 
   return (
     <div className={styles.container}>
@@ -19,7 +29,7 @@ export const WhyDevfiles: React.FC<WhyDevfilesProps> = (props: WhyDevfilesProps)
         <Text className={styles.bodyText}>{whyDevfiles.body}</Text>
       </TextContent>
       <br />
-      <GifPlayer width="1920px" height="1080px" src="/images/demo.gif" />
+      <GifPlayer width="1920px" height="1080px" src={demoFile} />
     </div>
   );
 };