feat: add new youtube component (#121)

Author: hugomrdias

package.json

@@ -28,7 +28,6 @@
     "react-markdown": "3.3.4",
     "react-live": "^1.11.0",
     "react-onclickoutside": "^6.7.1",
-    "react-player": "^1.6.4",
     "react-scroll-to-component": "^1.0.2",
     "react-slick": "~0.23.1",
     "react-toastify": "^4.1.0",

src/shared/components/carousel/carousel-videos-item/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
-import ReactPlayer from 'react-player'
 import PropTypes from 'prop-types'
+import Youtube from 'shared/components/youtube'
 
 import styles from './index.module.css'
 
@@ -10,21 +10,14 @@ class CarouselVideosItem extends Component {
 
     return (
       <div className={ styles.videoItemContainer } onClick={ this.handleRemainingVideoClick }>
-        <div className={ styles.videoPlaceholder }>
-          <ReactPlayer
-            className={ styles.reactPlayer }
-            url={ link }
-            width="100%"
-            height="100%" />
-        </div>
+        <Youtube link={ link } blockPlay/>
         <p className={ styles.videoTitle }>{ title }</p>
       </div>
     )
   }
 
   handleRemainingVideoClick = () => {
     const { index, onClick } = this.props
-
     return onClick(index)
   }
 }

src/shared/components/publications-and-talks-section/videos-list/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
-import ReactPlayer from 'react-player'
 import PropTypes from 'prop-types'
 import Carousel from 'shared/components/carousel'
+import Youtube from 'shared/components/youtube'
 
 import styles from './index.module.css'
 
@@ -33,15 +33,9 @@ class VideosList extends Component {
       const { activeIndex } = this.state
       const { list } = this.props
       const activeVideo = list[activeIndex]
-
       return (
         <div className={ styles.selectedVideo } ref={ this.handleAtiveVideoRef }>
-          <ReactPlayer
-            className={ styles.reactPlayer }
-            url={ activeVideo.link }
-            width="100%"
-            height="100%"
-            controls />
+          <Youtube link={ activeVideo.link }/>
         </div>
       )
     }

src/shared/components/publications-and-talks-section/videos-list/index.module.css

@@ -14,14 +14,7 @@
   & .selectedVideo {
     position: relative;
     overflow: hidden;
-    padding-top: var(--video-ratio);
     border-radius: var(--player-border-radius);
-
-    & .reactPlayer {
-      position: absolute;
-      top: 0;
-      left: 0;
-    }
   }
 
   & .remainingVideosContainer {

src/shared/components/youtube/index.js

@@ -0,0 +1,31 @@
+import React, { Component } from 'react'
+import styles from './index.module.css'
+
+class YoutubeEmbed extends Component {
+  state = { clicked: false }
+  render () {
+    const id = this.props.link.split('v=')[1]
+    return (
+      <div onClick={ this.handleClick } className={ styles.youtubeEmbed } >
+        { !this.state.clicked && <div>
+          <img src={ `https://i.ytimg.com/vi/${id}/hqdefault.jpg` }/>
+          <div className={ styles.play }></div>
+        </div> }
+        { this.state.clicked && <iframe
+          src={ `https://www.youtube-nocookie.com/embed/${id}?autoplay=1` }
+          frameBorder="0"
+          allowFullScreen="1">
+        </iframe> }
+      </div>
+    )
+  }
+
+  handleClick = () => {
+    if (this.props.blockPlay) {
+      return
+    }
+    this.setState({ clicked: true })
+  }
+}
+
+export default YoutubeEmbed

src/shared/components/youtube/index.module.css

@@ -0,0 +1,52 @@
+.youtubeEmbed {
+  position: relative;
+  width: 100%;
+
+  /* Use 75% for 4:3 videos */
+  height: 0;
+  overflow: hidden;
+  padding-bottom: 56.23%;
+  background: #000;
+}
+
+.youtubeEmbed iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  background: transparent;
+}
+
+.youtubeEmbed img {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  margin: auto;
+  display: block;
+  border: none;
+  cursor: pointer;
+  transition: 0.4s all;
+}
+
+.youtubeEmbed img:hover {
+  filter: brightness(75%);
+}
+
+.youtubeEmbed .play {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 72px;
+  height: 72px;
+  margin-top: -36px;
+  margin-left: -36px;
+  background: url("//i.imgur.com/TxzC70f.png") no-repeat;
+  cursor: pointer;
+}

src/shared/data/publications-and-talks/index.js

@@ -1,27 +1,27 @@
 const publicationsAndTalks = [
   {
-    link: 'https://www.youtube-nocookie.com/watch?v=WK4PIGr3RB8',
+    link: 'https://www.youtube.com/watch?v=WK4PIGr3RB8',
     active: true,
     title: 'Progress Report on the Decentralized Web, David Dias'
   },
   {
-    link: 'https://www.youtube-nocookie.com/watch?v=2cmbm6iABsI',
+    link: 'https://www.youtube.com/watch?v=2cmbm6iABsI',
     title: 'IPFS on the Brave Browser, Alan Shaw'
   },
   {
-    link: 'https://www.youtube-nocookie.com/watch?v=4VB66hJSvqM',
+    link: 'https://www.youtube.com/watch?v=4VB66hJSvqM',
     title: 'CRDTs as the foundation for Distributed Web Apps, Pedro Teixeira'
   },
   {
-    link: 'https://www.youtube-nocookie.com/watch?v=ZnfqbIVoq-s',
+    link: 'https://www.youtube.com/watch?v=ZnfqbIVoq-s',
     title: 'A Regular JS Core Dev Call, join us!'
   },
   {
-    link: 'https://www.youtube-nocookie.com/watch?v=-kdx8rJd8rQ',
+    link: 'https://www.youtube.com/watch?v=-kdx8rJd8rQ',
     title: 'Tutorial: How to build an Collaborative Editing Application with IPFS using CRDT'
   },
   {
-    link: 'https://www.youtube-nocookie.com/watch?v=Nv_Teb--1zg',
+    link: 'https://www.youtube.com/watch?v=Nv_Teb--1zg',
     title: 'Tutorial: How to build an application with IPFS PubSub Room'
   }
 ]