From cadb4141ca6e9da2eb0e0a80ea6c686acd80348c Mon Sep 17 00:00:00 2001
From: Abbey Hart <abbeyhrt@gmail.com>
Date: Mon, 26 Aug 2019 07:26:54 -0500
Subject: [PATCH] refactor: updates button to div, adds event handlers, and
 adds video example to gallery (#365)

* refactor: updates button to div and adds video example to gallery

* chore: prevents default on space bar key down
---
 .../src/pages/components/ImageGallery.mdx     |  7 ++
 .../src/components/Video/Video.js             | 67 +++++++++++++++++--
 .../src/components/Video/Video.module.scss    | 18 +++--
 3 files changed, 77 insertions(+), 15 deletions(-)

diff --git a/packages/example/src/pages/components/ImageGallery.mdx b/packages/example/src/pages/components/ImageGallery.mdx
index 9c5df2a90..6ffc487e2 100644
--- a/packages/example/src/pages/components/ImageGallery.mdx
+++ b/packages/example/src/pages/components/ImageGallery.mdx
@@ -60,6 +60,13 @@ Click on an image to open the gallery.
 ![IBM Cloud Server](/images/IBM_Cloud_Server.png)
 
 </ImageGalleryImage>
+<ImageGalleryImage alt="IBM Cloud Platform Prototype" title="IBM Cloud Platform" col={4}>
+
+<Video src="/videos/hero-video.mp4" poster="/images/poster.png">
+  <track default src="/videos/vtt/hero-video.vtt" srcLang="en" />
+</Video>
+
+</ImageGalleryImage>     
 <ImageGalleryImage alt="IBM Cloud Think" title="IBM Cloud Think" col={4}>
 
 ![IBM Cloud Think](/images/IBM_Cloud_Think_Keynote.jpg)
diff --git a/packages/gatsby-theme-carbon/src/components/Video/Video.js b/packages/gatsby-theme-carbon/src/components/Video/Video.js
index 6ed8be46e..145bbf010 100644
--- a/packages/gatsby-theme-carbon/src/components/Video/Video.js
+++ b/packages/gatsby-theme-carbon/src/components/Video/Video.js
@@ -63,22 +63,53 @@ const Video = ({ vimeoId, title, ...props }) => {
       });
   }
 
+  function onVimeoKeyDown(event) {
+    const player = getVimeoPlayer();
+
+    event.preventDefault();
+
+    if (event.key === 'Enter' || event.key === ' ') {
+      if (isPlaying) {
+        player
+          .pause()
+          .then(() => {
+            setIsPlaying(false);
+          })
+          .catch(error => {
+            console.error(error);
+          });
+        return;
+      }
+      player
+        .play()
+        .then(() => {
+          setIsPlaying(true);
+        })
+        .catch(error => {
+          console.error(error);
+        });
+    }
+  }
+
   if (vimeoId) {
     return (
       <div className={videoContainer}>
-        <button
+        <div
           className={buttonClassName}
-          type="button"
+          role="button"
           onClick={onVimeoClick}
+          onKeyDown={onVimeoKeyDown}
+          tabIndex="0"
         >
           {isPlaying ? <Pause32 /> : <Play32 />}
           <span className="bx--assistive-text">
             {isPlaying ? 'Pause' : 'Play'}
           </span>
-        </button>
+        </div>
         <div className={cx(video, vimeo)}>
           <div className="embedVideo-container">
             <iframe
+              tabIndex="-1"
               allow="autoplay"
               title={title}
               src={`https://player.vimeo.com/video/${vimeoId}`}
@@ -117,14 +148,40 @@ const Video = ({ vimeoId, title, ...props }) => {
     setIsPlaying(false);
   }
 
+  function onKeyDown(event) {
+    event.preventDefault();
+
+    if (event.key === ' ' || event.key === 'Enter') {
+      if (isPlaying) {
+        videoRef.current.pause();
+        setIsPlaying(false);
+        return;
+      }
+      return videoRef.current
+        .play()
+        .then(() => {
+          setIsPlaying(true);
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    }
+  }
+
   return (
     <div className={videoContainer}>
-      <button className={buttonClassName} type="button" onClick={onClick}>
+      <div
+        className={buttonClassName}
+        role="button"
+        onClick={onClick}
+        onKeyDown={onKeyDown}
+        tabIndex="0"
+      >
         {isPlaying ? <Pause32 /> : <Play32 />}
         <span className="bx--assistive-text">
           {isPlaying ? 'Pause' : 'Play'}
         </span>
-      </button>
+      </div>
       {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
       <video
         className={video}
diff --git a/packages/gatsby-theme-carbon/src/components/Video/Video.module.scss b/packages/gatsby-theme-carbon/src/components/Video/Video.module.scss
index ef78d9fe2..4232fcad9 100644
--- a/packages/gatsby-theme-carbon/src/components/Video/Video.module.scss
+++ b/packages/gatsby-theme-carbon/src/components/Video/Video.module.scss
@@ -11,9 +11,7 @@
   width: 100%;
 }
 
-button.video-button {
-  @include button-reset($width: false);
-
+div.video-button {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -31,23 +29,23 @@ button.video-button {
   transition: all $duration--moderate-01 motion(entrance, productive);
 }
 
-button.video-button:focus {
+div.video-button:focus {
   outline: 2px solid $focus;
   outline-offset: -2px;
 }
 
-button.video-button:hover {
+div.video-button:hover {
   background-color: $gray-90;
   opacity: 0.8;
 }
 
-button.video-button > svg {
+div.video-button > svg {
   fill: $white-0;
   margin-left: 4px;
   transition: all $duration--moderate-01 motion(entrance, productive);
 }
 
-button.video--is-playing > svg {
+div.video--is-playing > svg {
   margin-left: 0px;
 }
 
@@ -68,7 +66,7 @@ button.video--is-playing > svg {
   }
 }
 
-.video-container:not(:hover) button.video--is-playing,
-.video-container:not(:hover) button.video--is-playing > svg {
-  visibility: hidden;
+.video-container:not(:hover) div.video--is-playing,
+.video-container:not(:hover) div.video--is-playing > svg {
+  opacity: 0;
 }