UNPKG

react-player

Version:

A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion

111 lines (110 loc) 3.21 kB
var __defProp = Object.defineProperty; var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; var __publicField = (obj, key, value) => { __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value); return value; }; import React, { Component } from "react"; import { callPlayer, getSDK } from "../utils.js"; import { canPlay, MATCH_URL_STREAMABLE } from "../patterns.js"; const SDK_URL = "https://cdn.embed.ly/player-0.1.0.min.js"; const SDK_GLOBAL = "playerjs"; class Streamable extends Component { constructor() { super(...arguments); __publicField(this, "callPlayer", callPlayer); __publicField(this, "duration", null); __publicField(this, "currentTime", null); __publicField(this, "secondsLoaded", null); __publicField(this, "mute", () => { this.callPlayer("mute"); }); __publicField(this, "unmute", () => { this.callPlayer("unmute"); }); __publicField(this, "ref", (iframe) => { this.iframe = iframe; }); } componentDidMount() { this.props.onMount && this.props.onMount(this); } load(url) { getSDK(SDK_URL, SDK_GLOBAL).then((playerjs) => { if (!this.iframe) return; this.player = new playerjs.Player(this.iframe); this.player.setLoop(this.props.loop); this.player.on("ready", this.props.onReady); this.player.on("play", this.props.onPlay); this.player.on("pause", this.props.onPause); this.player.on("seeked", this.props.onSeek); this.player.on("ended", this.props.onEnded); this.player.on("error", this.props.onError); this.player.on("timeupdate", ({ duration, seconds }) => { this.duration = duration; this.currentTime = seconds; }); this.player.on("buffered", ({ percent }) => { if (this.duration) { this.secondsLoaded = this.duration * percent; } }); if (this.props.muted) { this.player.mute(); } }, this.props.onError); } play() { this.callPlayer("play"); } pause() { this.callPlayer("pause"); } stop() { } seekTo(seconds, keepPlaying = true) { this.callPlayer("setCurrentTime", seconds); if (!keepPlaying) { this.pause(); } } setVolume(fraction) { this.callPlayer("setVolume", fraction * 100); } setLoop(loop) { this.callPlayer("setLoop", loop); } getDuration() { return this.duration; } getCurrentTime() { return this.currentTime; } getSecondsLoaded() { return this.secondsLoaded; } render() { const id = this.props.url.match(MATCH_URL_STREAMABLE)[1]; const style = { width: "100%", height: "100%" }; return /* @__PURE__ */ React.createElement( "iframe", { ref: this.ref, src: `https://streamable.com/o/${id}`, frameBorder: "0", scrolling: "no", style, allow: "encrypted-media; autoplay; fullscreen;" } ); } } __publicField(Streamable, "displayName", "Streamable"); __publicField(Streamable, "canPlay", canPlay.streamable); export { Streamable as default };