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

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

import Modal from "react-bootstrap/Modal";

export const DownloadAndStream = ({ url, name, subtitles }) => {
  if (!url || url === "") {
    return null;
  }

  return (
    <span>
      <DownloadButton url={url} />
      <StreamButton url={url} name={name} subtitles={subtitles} />
    </span>
  );
};
DownloadAndStream.propTypes = {
  url: PropTypes.string,
  name: PropTypes.string,
  subtitles: PropTypes.instanceOf(List),
};

const DownloadButton = ({ url }) => (
  <h5 className="d-inline">
    <a href={url} className="btn btn-sm btn-primary m-1">
      <i className="fa fa-download mr-1" />
      Download
    </a>
  </h5>
);
DownloadButton.propTypes = { url: PropTypes.string.isRequired };

const StreamButton = ({ name, url, subtitles }) => {
  const [showModal, setShowModal] = useState(false);

  return (
    <React.Fragment>
      <h5 className="d-inline">
        <a
          href="#"
          className="btn btn-sm btn-primary m-1 clickable"
          onClick={(e) => {
            e.preventDefault();
            setShowModal(true);
          }}
        >
          <i className="fa fa-play-circle mr-1" />
          Play
        </a>
      </h5>

      <Modal
        show={showModal}
        onHide={() => setShowModal(false)}
        size="lg"
        centered
      >
        <Modal.Header closeButton>{name}</Modal.Header>
        <Modal.Body>
          <Player url={url} subtitles={subtitles} />
        </Modal.Body>
      </Modal>
    </React.Fragment>
  );
};
StreamButton.propTypes = {
  name: PropTypes.string.isRequired,
  url: PropTypes.string.isRequired,
  subtitles: PropTypes.instanceOf(List),
};

const Player = ({ url, subtitles }) => {
  const hasSubtitles = !(subtitles === null || subtitles.size === 0);
  return (
    <div className="embed-responsive embed-responsive-16by9">
      <video className="embed-responsive-item" controls>
        <source src={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,
};
Player.defaultProps = {
  subtitles: List(),
};