fix: remove theme controls from vimeo videos (#418)

* fix: remove theme controls from vimeo videos * fix: allow tabbing through player controls * fix: use public Vimeo video * fix: update example * fix: use video with controls for demo
carbon-design-system · Sep 12, 2019 · 15e1395 · 15e1395 · vercel · Sep 12, 2019
1 parent 687c1f9
commit 15e1395
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 93 deletions.
diff --git a/packages/example/src/pages/components/Video.mdx b/packages/example/src/pages/components/Video.mdx
@@ -13,7 +13,7 @@ The `<Video>` component can render a Vimeo player or a html video player.
 
 #### Vimeo
 
-<Video title="Eyes" vimeoId="310583077" />
+<Video title="Carbon homepage video" vimeoId="359578263" />
 
 #### Video
 
@@ -26,7 +26,7 @@ The `<Video>` component can render a Vimeo player or a html video player.
 #### Vimeo
 
 ```jsx path=components/Video/Video.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/Video
-<Video title="Eyes" vimeoId="310583077" />
+<Video title="Carbon homepage video" vimeoId="322021187" />
 ```
 
 #### Video

diff --git a/packages/gatsby-theme-carbon/src/components/Video/Video.js b/packages/gatsby-theme-carbon/src/components/Video/Video.js
@@ -1,8 +1,7 @@
 import { Play32, Pause32 } from '@carbon/icons-react';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import Player from '@vimeo/player';
 import { withPrefix } from 'gatsby';
 import {
   video,
@@ -16,101 +15,16 @@ const Video = ({ vimeoId, title, src, poster, ...props }) => {
   const [isPlaying, setIsPlaying] = useState(false);
   const videoRef = useRef(null);
   const iframeRef = useRef(null);
-  const playerRef = useRef(null);
   const buttonClassName = cx(videoButton, {
     [videoIsPlaying]: isPlaying,
   });
 
-  useEffect(() => {
-    if (vimeoId) {
-      return;
-    }
-
-    if (videoRef.current) {
-      videoRef.current.controls = false;
-    }
-  }, [vimeoId]);
-
-  function getVimeoPlayer() {
-    if (playerRef.current) {
-      return playerRef.current;
-    }
-    // eslint-disable-next-line no-return-assign
-    return (playerRef.current = new Player(iframeRef.current));
-  }
-
-  function onVimeoClick() {
-    const player = getVimeoPlayer();
-
-    if (isPlaying) {
-      player
-        .pause()
-        .then(() => {
-          setIsPlaying(false);
-        })
-        .catch(error => {
-          console.error(error);
-        });
-      return;
-    }
-
-    player
-      .play()
-      .then(() => {
-        setIsPlaying(true);
-      })
-      .catch(error => {
-        console.error(error);
-      });
-  }
-
-  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}>
-        <div
-          className={buttonClassName}
-          role="button"
-          onClick={onVimeoClick}
-          onKeyDown={onVimeoKeyDown}
-          tabIndex="0"
-        >
-          {isPlaying ? <Pause32 /> : <Play32 />}
-          <span className="bx--assistive-text">
-            {isPlaying ? 'Pause' : 'Play'}
-          </span>
-        </div>
         <div className={cx(video, vimeo)}>
           <div className="embedVideo-container">
             <iframe
-              tabIndex="-1"
               allow="autoplay"
               title={title}
               src={`https://player.vimeo.com/video/${vimeoId}`}
@@ -150,9 +64,8 @@ const Video = ({ vimeoId, title, src, poster, ...props }) => {
   }
 
   function onKeyDown(event) {
-    event.preventDefault();
-
     if (event.key === ' ' || event.key === 'Enter') {
+      event.preventDefault();
       if (isPlaying) {
         videoRef.current.pause();
         setIsPlaying(false);
@@ -188,7 +101,6 @@ const Video = ({ vimeoId, title, src, poster, ...props }) => {
         className={video}
         type="video/mp4"
         ref={videoRef}
-        controls
         onEnded={onEnded}
         src={withPrefix(src)}
         poster={withPrefix(poster)}

diff --git a/packages/gatsby-theme-carbon/src/components/Video/Video.module.scss b/packages/gatsby-theme-carbon/src/components/Video/Video.module.scss
@@ -51,7 +51,6 @@ div.video--is-playing > svg {
 
 // iframe
 .vimeo {
-  pointer-events: none;
   position: relative;
   height: 0px;
   overflow: hidden;