Added case to enable videos in articles (#208)

Author: BrysonXiao

package.json

@@ -78,6 +78,7 @@
     "react-dom": "16.8.6",
     "react-emotion": "^9.2.12",
     "react-helmet": "^5.2.0",
+    "react-player": "2.14.1",
     "react-plyr": "^2.1.1",
     "react-string-replace": "0.4.4",
     "slugify": "^1.3.3",

src/components/Article/index.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react'
 import { css } from 'react-emotion'
 import Image, { ImageProps } from '../Image'
+import Video, { VideoProps } from '../Video'
 
 enum ContentType {
   Text = 'text',
   Image = 'image',
+  Video = 'video',
   Line = 'line',
 }
 
@@ -52,6 +54,9 @@ export default class Article extends React.Component<ArticleProps> {
           case ContentType.Image:
             const image = JSON.parse(content.value) as ImageProps
             return <Image key={i} {...image} />
+          case ContentType.Video:
+            const video = JSON.parse(content.value) as VideoProps
+            return <Video key={i} {...video} />
           case ContentType.Line:
             return <hr />
           default:

src/components/Video/index.tsx

@@ -2,15 +2,42 @@
 /// <reference path="index.d.ts"/>
 
 import * as React from 'react'
-import Plyr from 'react-plyr'
-// tslint:disable-next-line
-import 'plyr/dist/plyr.css'
+import { css } from 'react-emotion'
+import ReactPlayer from 'react-player'
 
 export interface VideoProps {
   /** The id of the YouTube video. */
-  videoId: string
+  url: string
+  caption: string
+  credit: string
+  alt: string
+  /** Custom css for the image component */
+  style?: string
 }
 
 export default function Video(props: VideoProps) {
-  return <Plyr type="youtube" {...props} />
+  return (
+    <figure className={props.style}>
+      <div
+        className={css`
+          position: relative;
+          padding-top: 56.25%; /* Player ratio: 100 / (1280 / 720) */
+        `}
+      >
+        <ReactPlayer
+          className={css`
+            position: absolute;
+            top: 0;
+            left: 0;
+          `}
+          url={props.url}
+          width="100%"
+          height="100%"
+        />
+      </div>
+      <figcaption>
+        {props.caption} ({props.credit})
+      </figcaption>
+    </figure>
+  )
 }

yarn.lock

@@ -5502,6 +5502,11 @@ deepmerge@^2.1.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
 
+deepmerge@^4.0.0:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
+  integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
+
 default-compare@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/default-compare/-/default-compare-1.0.0.tgz#cb61131844ad84d84788fb68fd01681ca7781a2f"
@@ -10477,6 +10482,11 @@ load-json-file@^4.0.0:
     pify "^3.0.0"
     strip-bom "^3.0.0"
 
+load-script@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+  integrity sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==
+
 loader-fs-cache@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/loader-fs-cache/-/loader-fs-cache-1.0.2.tgz#54cedf6b727e1779fd8f01205f05f6e88706f086"
@@ -10997,6 +11007,11 @@ memoize-one@^5.0.0:
   version "5.0.4"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.0.4.tgz#005928aced5c43d890a4dfab18ca908b0ec92cbc"
 
+memoize-one@^5.1.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
 memory-fs@^0.4.0, memory-fs@^0.4.1, memory-fs@~0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -13483,6 +13498,11 @@ react-fast-compare@^2.0.2:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
 
+react-fast-compare@^3.0.1:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
+  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
+
 react-feather@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/react-feather/-/react-feather-1.1.6.tgz#2a547e3d5cd5e383d3da0128d593cbdb3c1b32f7"
@@ -13560,6 +13580,17 @@ react-perfect-scrollbar@^1.5.0:
     perfect-scrollbar "^1.4.0"
     prop-types "^15.6.1"
 
+react-player@2.14.1:
+  version "2.14.1"
+  resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.14.1.tgz#fc434c0e1e6161e76f5d5970721596c4acec52b1"
+  integrity sha512-jILj7F9o+6NHzrJ1GqZIxfJgskvGmKeJ05FNhPvgiCpvMZFmFneKEkukywHcULDO2lqITm+zcEkLSq42mX0FbA==
+  dependencies:
+    deepmerge "^4.0.0"
+    load-script "^1.0.0"
+    memoize-one "^5.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.0.1"
+
 react-plyr@^2.1.1:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/react-plyr/-/react-plyr-2.2.0.tgz#94b0b2f815411d1af65de9694059eaab8a726c75"