feat(video): add video play/pause handling

gerdesque · Jun 17, 2020 · e1276b0 · e1276b0
1 parent 68592fe
commit e1276b0
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 32 deletions.
diff --git a/libs/ui/src/lib/text/text.tsx b/libs/ui/src/lib/text/text.tsx
@@ -10,7 +10,7 @@ export interface TextProps {
 export const Text = (props: TextProps) => {
   return (
     <div className='box'>
-      <Fade bottom>
+      <Fade bottom duration={5000}>
         <p>{props.value}</p>
       </Fade>
     </div>

diff --git a/libs/ui/src/lib/video/video.scss b/libs/ui/src/lib/video/video.scss
@@ -13,26 +13,8 @@ video {
   padding: 5px;
 }
 
-.play {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  border: 0;
-  background: transparent;
-  width: 0;
-  height: 74px;
-  border-color: transparent transparent transparent #202020;
-  cursor: pointer;
-  border-style: solid;
-  border-width: 37px 0 37px 60px;
-  transform: translate(-50%, -50%);
-  z-index: 10;
-}
-
-.play:hover {
-  border-color: transparent transparent transparent #404040;
-}
-
-.play.hide {
-  display: none;
-}
+.theater {
+  flex: 1 auto;
+  margin: 0 17%;
+  order: 99;
+}
diff --git a/libs/ui/src/lib/video/video.tsx b/libs/ui/src/lib/video/video.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import { VIDEO_SUFFIX } from '@gerdesque/data';
 
 import './video.scss';
@@ -11,19 +11,20 @@ export interface VideoProps {
 }
 
 export const Video = (props: VideoProps) => {
-  // const playVideo = () => {
-  //   this.setState({ hasVideoStarted: true });
-  //   this.refs.video.play();
-  // };
+
+  const [isPlaying, setPlaying] = useState(false);
+
+  const playVideo = (playing) => {
+    setPlaying(playing);
+  };
 
   return (
-    <div className={`chapter_video ${props.width}`}>
+    <div className={`chapter_video ${props.width} ${isPlaying ? 'theater' : ''}` }>
       <p>{props.title}</p>
-      <video>
+      <video controls onPlaying={() => playVideo(true)} onPause={() => playVideo(false)}>
         <source type='video/mp4' src={"./assets/movies/"+props.value+VIDEO_SUFFIX}></source>
         Your browser does not support the video tag.
       </video>
-      {/* <button className={`play ${this.state.hasVideoStarted && 'hide'}`} onClick={this.playVideo} /> */}
     </div>);
 };