Revert "Added case to enable videos in articles (#208)"

This reverts commit aac0a6f.
dailybruin · Mar 7, 2024 · d50b00e · d50b00e
1 parent 1e159d8
commit d50b00e
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 69 deletions.
diff --git a/package.json b/package.json
@@ -78,7 +78,6 @@
     "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",

diff --git a/src/components/Article/index.tsx b/src/components/Article/index.tsx
@@ -1,12 +1,10 @@
 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',
 }
 
@@ -54,9 +52,6 @@ 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:

diff --git a/src/components/Video/index.tsx b/src/components/Video/index.tsx
@@ -2,42 +2,15 @@
 /// <reference path="index.d.ts"/>
 
 import * as React from 'react'
-import { css } from 'react-emotion'
-import ReactPlayer from 'react-player'
+import Plyr from 'react-plyr'
+// tslint:disable-next-line
+import 'plyr/dist/plyr.css'
 
 export interface VideoProps {
   /** The id of the YouTube video. */
-  url: string
-  caption: string
-  credit: string
-  alt: string
-  /** Custom css for the image component */
-  style?: string
+  videoId: string
 }
 
 export default function Video(props: VideoProps) {
-  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>
-  )
+  return <Plyr type="youtube" {...props} />
 }
diff --git a/yarn.lock b/yarn.lock
@@ -5502,11 +5502,6 @@ 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"
@@ -10482,11 +10477,6 @@ 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"
@@ -11007,11 +10997,6 @@ 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"
@@ -13498,11 +13483,6 @@ 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"
@@ -13580,17 +13560,6 @@ 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"