rewrote inner & shared 'video file view' with react (#3017)

* rewrote inner & shared 'video file view' with react

* modification

frontend/src/components/video-player.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import videojs from 'video.js';
+import 'video.js/dist/video-js.css';
+
+class VideoPlayer extends React.Component {
+  componentDidMount() {
+    // instantiate Video.js
+    this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
+    });
+  }
+
+  // destroy player on unmount
+  componentWillUnmount() {
+    if (this.player) {
+      this.player.dispose();
+    }
+  }
+
+  // wrap the player in a div with a `data-vjs-player` attribute
+  // so videojs won't create additional wrapper in the DOM
+  // see https://github.com/videojs/video.js/pull/3856
+  render() {
+    return (
+      <div data-vjs-player>
+        <video ref={ node => this.videoNode = node } className="video-js"></video>
+      </div>
+    );
+  }
+}
+
+export default VideoPlayer;