lbry-desktop/ui/js/component/video/view.jsx

import React from "react";
import FilePrice from "component/filePrice";
import Link from "component/link";
import Modal from "component/modal";
import lbry from "lbry";
import { Thumbnail } from "component/common";

class VideoPlayButton extends React.Component {
  onPurchaseConfirmed() {
    this.props.closeModal();
    this.props.startPlaying();
    this.props.loadVideo(this.props.uri);
  }

  onWatchClick() {
    this.props.purchaseUri(this.props.uri).then(() => {
      if (!this.props.modal) {
        this.props.startPlaying();
      }
    });
  }

  render() {
    const {
      button,
      label,
      className,
      metadata,
      metadata: { title },
      uri,
      modal,
      closeModal,
      isLoading,
      costInfo,
      fileInfo,
      mediaType,
    } = this.props;

    /*
     title={
     isLoading ? "Video is Loading" :
     !costInfo ? "Waiting on cost info..." :
     fileInfo === undefined ? "Waiting on file info..." : ""
     }
     */

    const disabled =
      isLoading ||
      fileInfo === undefined ||
      (fileInfo === null && (!costInfo || costInfo.cost === undefined));
    const icon = ["audio", "video"].indexOf(mediaType) !== -1
      ? "icon-play"
      : "icon-folder-o";

    return (
      <div>
        <Link
          button={button ? button : null}
          disabled={disabled}
          label={label ? label : ""}
          className="video__play-button"
          icon={icon}
          onClick={this.onWatchClick.bind(this)}
        />
        <Modal
          contentLabel={__("Not enough credits")}
          isOpen={modal == "notEnoughCredits"}
          onConfirmed={closeModal}
        >
          {__("You don't have enough LBRY credits to pay for this stream.")}
        </Modal>
        <Modal
          type="confirm"
          isOpen={modal == "affirmPurchaseAndPlay"}
          contentLabel={__("Confirm Purchase")}
          onConfirmed={this.onPurchaseConfirmed.bind(this)}
          onAborted={closeModal}
        >
          {__("This will purchase")} <strong>{title}</strong> {__("for")}
          {" "}<strong><FilePrice uri={uri} look="plain" /></strong>
          {" "}{__("credits")}.
        </Modal>
        <Modal
          isOpen={modal == "timedOut"}
          onConfirmed={closeModal}
          contentLabel={__("Timed Out")}
        >
          {__("Sorry, your download timed out :(")}
        </Modal>
      </div>
    );
  }
}

class Video extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isPlaying: false };
  }

  startPlaying() {
    this.setState({
      isPlaying: true,
    });
  }

  render() {
    const {
      metadata,
      isLoading,
      isDownloading,
      fileInfo,
      contentType,
    } = this.props;
    const { isPlaying = false } = this.state;

    const isReadyToPlay = fileInfo && fileInfo.written_bytes > 0;
    const mediaType = lbry.getMediaType(
      contentType,
      fileInfo && fileInfo.file_name
    );

    let loadStatusMessage = "";

    if (fileInfo && fileInfo.completed && !fileInfo.written_bytes) {
      loadStatusMessage = __(
        "It looks like you deleted or moved this file. We're rebuilding it now. It will only take a few seconds."
      );
    } else if (isLoading) {
      loadStatusMessage = __(
        "Requesting stream... it may sit here for like 15-20 seconds in a really awkward way... we're working on it"
      );
    } else if (isDownloading) {
      loadStatusMessage = __("Downloading stream... not long left now!");
    }

    let klassName = "";
    if (isLoading || isDownloading) klassName += "video-embedded video";
    if (mediaType === "video") {
      klassName += "video-embedded video";
      klassName += isPlaying ? " video--active" : " video--hidden";
    } else if (mediaType === "application") {
      klassName += "video-embedded";
    } else {
      if (!isPlaying) klassName += "video-embedded";
    }
    const poster = metadata.thumbnail;

    return (
      <div className={klassName}>
        {isPlaying
          ? !isReadyToPlay
            ? <span>
                {__(
                  "this is the world's worst loading screen and we shipped our software with it anyway..."
                )}
                {" "}<br /><br />{loadStatusMessage}
              </span>
            : <VideoPlayer
                filename={fileInfo.file_name}
                poster={poster}
                downloadPath={fileInfo.download_path}
                mediaType={mediaType}
                poster={poster}
              />
          : <div
              className="video__cover"
              style={{ backgroundImage: 'url("' + metadata.thumbnail + '")' }}
            >
              <VideoPlayButton
                startPlaying={this.startPlaying.bind(this)}
                {...this.props}
                mediaType={mediaType}
              />
            </div>}
      </div>
    );
  }
}

const from = require("from2");
const player = require("render-media");
const fs = require("fs");

class VideoPlayer extends React.Component {
  componentDidMount() {
    const elem = this.refs.media;
    const { downloadPath, filename } = this.props;
    const file = {
      name: filename,
      createReadStream: opts => {
        return fs.createReadStream(downloadPath, opts);
      },
    };
    player.append(file, elem, {
      autoplay: true,
      controls: true,
    });
  }

  render() {
    const { downloadPath, mediaType, poster } = this.props;

    return (
      <div>
        {["audio", "application"].indexOf(mediaType) !== -1 &&
          <Thumbnail src={poster} className="video-embedded" />}
        <div ref="media" />
      </div>
    );
  }
}

export default Video;