canape/frontend/js/components/buttons/download.js

import React, { useState } from "react"
import PropTypes from "prop-types"
import { List } from "immutable"

import { Button, Dropdown, MenuItem, Modal } from "react-bootstrap"

const DownloadButton = (props) => {
  if (props.url === "") { return null; }

  const [showModal, setShowModal] = useState(false);

  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-globe"></i> Stream in browser
          </span>
        </MenuItem>
      </Dropdown.Menu>

      <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;

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,
};