Refactor the player and remove infuse

frontend/js/components/buttons/download.js

@@ -1,53 +1,36 @@
-import React from "react"
+import React, { useState } from "react"
+import PropTypes from "prop-types"
+import { List } from "immutable"
 
 import { Button, Dropdown, MenuItem, Modal } from "react-bootstrap"
 
-export default class DownloadButton extends React.PureComponent {
+const DownloadButton = (props) => {
-  constructor(props) {
+  if (props.url === "") { return null; }
-    super(props);
+
-    this.showModal = this.showModal.bind(this);
+  const [showModal, setShowModal] = useState(false);
-    this.hideModal = this.hideModal.bind(this);
-    this.state = { showModal: false };
-  }
-  showModal() {
-    this.setState({ showModal: true });
-  }
-  hideModal() {
-    this.setState({ showModal: false });
-  }
-  render() {
-    if (this.props.url === "") {
-      return null;
-    }
 
   let btnSize = "btn-sm";
-    if (this.props.xs) {
+  if (props.xs) {
     btnSize = "btn-xs";
   }
 
-    const infuse = `infuse://x-callback-url/play?url=${this.props.url}`;
   return (
-      <Dropdown id="streaming-buttons" className={this.props.customClassName} dropup>
+    <Dropdown id="streaming-buttons" className={props.customClassName} dropup>
-        <Button bsStyle="danger" className={btnSize} href={this.props.url}>
+      <Button bsStyle="danger" className={btnSize} href={props.url}>
         <span>
           <i className="fa fa-download" aria-hidden="true"></i> Download
         </span>
       </Button>
       <Dropdown.Toggle bsStyle="danger" className={btnSize}/>
       <Dropdown.Menu>
-          <MenuItem eventKey="1" href={infuse}>
+        <MenuItem eventKey="2" onClick={() => setShowModal(true)}>
-            <span>
-              <i className="fa fa-play"></i> Stream with infuse
-            </span>
-          </MenuItem>
-          <MenuItem eventKey="2" onClick={this.showModal}>
           <span>
             <i className="fa fa-globe"></i> Stream in browser
           </span>
         </MenuItem>
       </Dropdown.Menu>
 
-        <Modal show={this.state.showModal} onHide={this.hideModal} dialogClassName="player-modal">
+      <Modal show={showModal} onHide={() => setShowModal(false)} dialogClassName="player-modal">
         <Modal.Header closeButton>
           <Modal.Title>
             <i className="fa fa-globe"></i>
@@ -56,29 +39,30 @@ export default class DownloadButton extends React.PureComponent {
         </Modal.Header>
         <Modal.Body>
           <Player
-              url={this.props.url}
+            url={props.url}
-              subtitles={this.props.subtitles}
+            subtitles={props.subtitles}
           />
         </Modal.Body>
       </Modal>
     </Dropdown>
   );
 }
-}
+DownloadButton.propTypes = {
+  customClassName: PropTypes.string,
+  xs: PropTypes.bool,
+  url: PropTypes.string.isRequired,
+  subtitles: PropTypes.instanceOf(List),
+};
+export default DownloadButton;
 
-class Player extends React.PureComponent {
+const Player = (props) => {
-  constructor(props) {
+  const subtitles = props.subtitles;
-    super(props);
-  }
-  render() {
-    const subtitles = this.props.subtitles;
   const hasSubtitles = !(subtitles === undefined || subtitles === null || subtitles.size === 0);
   return (
     <div className="embed-responsive embed-responsive-16by9">
       <video controls>
-          <source src={this.props.url} type="video/mp4"/>
+        <source src={props.url} type="video/mp4"/>
-          {hasSubtitles && subtitles.toIndexedSeq().map(function(el, index) {
+        {hasSubtitles && subtitles.toIndexedSeq().map((el, index) => (
-            return (
           <track
             key={index}
             kind="subtitles"
@@ -86,10 +70,12 @@ class Player extends React.PureComponent {
             src={el.get("vvt_file")}
             srcLang={el.get("language")}
           />
-            );
+        ))}
-          })}
       </video>
     </div>
   );
 }
-}
+Player.propTypes = {
+  subtitles: PropTypes.instanceOf(List),
+  url: PropTypes.string.isRequired,
+};