diff --git a/frontend/js/components/buttons/download.js b/frontend/js/components/buttons/download.js
index 295278d..bf1581f 100644
--- a/frontend/js/components/buttons/download.js
+++ b/frontend/js/components/buttons/download.js
@@ -1,95 +1,81 @@
-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 {
-  constructor(props) {
-    super(props);
-    this.showModal = this.showModal.bind(this);
-    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;
-    }
+const DownloadButton = (props) => {
+  if (props.url === "") { return null; }
 
-    let btnSize = "btn-sm";
-    if (this.props.xs) {
-      btnSize = "btn-xs";
-    }
+  const [showModal, setShowModal] = useState(false);
 
-    const infuse = `infuse://x-callback-url/play?url=${this.props.url}`;
-    return (
-      <Dropdown id="streaming-buttons" className={this.props.customClassName} dropup>
-        <Button bsStyle="danger" className={btnSize} href={this.props.url}>
+  let btnSize = "btn-sm";
+  if (props.xs) {
+    btnSize = "btn-xs";
+  }
+
+  return (
+    <Dropdown id="streaming-buttons" className={props.customClassName} dropup>
+      <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="2" onClick={() => setShowModal(true)}>
           <span>
-            <i className="fa fa-download" aria-hidden="true"></i> Download
+            <i className="fa fa-globe"></i> Stream in browser
           </span>
-        </Button>
-        <Dropdown.Toggle bsStyle="danger" className={btnSize}/>
-        <Dropdown.Menu>
-          <MenuItem eventKey="1" href={infuse}>
-            <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>
+        </MenuItem>
+      </Dropdown.Menu>
 
-        <Modal show={this.state.showModal} onHide={this.hideModal} dialogClassName="player-modal">
-          <Modal.Header closeButton>
-            <Modal.Title>
-              <i className="fa fa-globe"></i>
-              &nbsp;Browser streaming
-            </Modal.Title>
-          </Modal.Header>
-          <Modal.Body>
-            <Player
-              url={this.props.url}
-              subtitles={this.props.subtitles}
-            />
-          </Modal.Body>
-        </Modal>
-      </Dropdown>
-    );
-  }
+      <Modal show={showModal} onHide={() => setShowModal(false)} dialogClassName="player-modal">
+        <Modal.Header closeButton>
+          <Modal.Title>
+            <i className="fa fa-globe"></i>
+            &nbsp;Browser streaming
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Player
+            url={props.url}
+            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 {
-  constructor(props) {
-    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"/>
-          {hasSubtitles && subtitles.toIndexedSeq().map(function(el, index) {
-            return (
-              <track
-                key={index}
-                kind="subtitles"
-                label={el.get("language")}
-                src={el.get("vvt_file")}
-                srcLang={el.get("language")}
-              />
-            );
-          })}
-        </video>
-      </div>
-    );
-  }
+const Player = (props) => {
+  const subtitles = props.subtitles;
+  const hasSubtitles = !(subtitles === undefined || subtitles === null || subtitles.size === 0);
+  return (
+    <div className="embed-responsive embed-responsive-16by9">
+      <video controls>
+        <source src={props.url} type="video/mp4"/>
+        {hasSubtitles && subtitles.toIndexedSeq().map((el, index) => (
+          <track
+            key={index}
+            kind="subtitles"
+            label={el.get("language")}
+            src={el.get("vvt_file")}
+            srcLang={el.get("language")}
+          />
+        ))}
+      </video>
+    </div>
+  );
 }
+Player.propTypes = {
+  subtitles: PropTypes.instanceOf(List),
+  url: PropTypes.string.isRequired,
+};