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

105 lines (104 loc) 3.54 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, parseStartTime, randomString } from "../utils.js"; import { canPlay, MATCH_URL_TWITCH_CHANNEL, MATCH_URL_TWITCH_VIDEO } from "../patterns.js"; const SDK_URL = "https://player.twitch.tv/js/embed/v1.js"; const SDK_GLOBAL = "Twitch"; const PLAYER_ID_PREFIX = "twitch-player-"; class Twitch extends Component { constructor() { super(...arguments); __publicField(this, "callPlayer", callPlayer); __publicField(this, "playerID", this.props.config.playerId || `${PLAYER_ID_PREFIX}${randomString()}`); __publicField(this, "mute", () => { this.callPlayer("setMuted", true); }); __publicField(this, "unmute", () => { this.callPlayer("setMuted", false); }); } componentDidMount() { this.props.onMount && this.props.onMount(this); } load(url, isReady) { const { playsinline, onError, config, controls } = this.props; const isChannel = MATCH_URL_TWITCH_CHANNEL.test(url); const id = isChannel ? url.match(MATCH_URL_TWITCH_CHANNEL)[1] : url.match(MATCH_URL_TWITCH_VIDEO)[1]; if (isReady) { if (isChannel) { this.player.setChannel(id); } else { this.player.setVideo("v" + id); } return; } getSDK(SDK_URL, SDK_GLOBAL).then((Twitch2) => { this.player = new Twitch2.Player(this.playerID, { video: isChannel ? "" : id, channel: isChannel ? id : "", height: "100%", width: "100%", playsinline, autoplay: this.props.playing, muted: this.props.muted, // https://github.com/CookPete/react-player/issues/733#issuecomment-549085859 controls: isChannel ? true : controls, time: parseStartTime(url), ...config.options }); const { READY, PLAYING, PAUSE, ENDED, ONLINE, OFFLINE, SEEK } = Twitch2.Player; this.player.addEventListener(READY, this.props.onReady); this.player.addEventListener(PLAYING, this.props.onPlay); this.player.addEventListener(PAUSE, this.props.onPause); this.player.addEventListener(ENDED, this.props.onEnded); this.player.addEventListener(SEEK, this.props.onSeek); this.player.addEventListener(ONLINE, this.props.onLoaded); this.player.addEventListener(OFFLINE, this.props.onLoaded); }, onError); } play() { this.callPlayer("play"); } pause() { this.callPlayer("pause"); } stop() { this.callPlayer("pause"); } seekTo(seconds, keepPlaying = true) { this.callPlayer("seek", seconds); if (!keepPlaying) { this.pause(); } } setVolume(fraction) { this.callPlayer("setVolume", fraction); } getDuration() { return this.callPlayer("getDuration"); } getCurrentTime() { return this.callPlayer("getCurrentTime"); } getSecondsLoaded() { return null; } render() { const style = { width: "100%", height: "100%" }; return /* @__PURE__ */ React.createElement("div", { style, id: this.playerID }); } } __publicField(Twitch, "displayName", "Twitch"); __publicField(Twitch, "canPlay", canPlay.twitch); __publicField(Twitch, "loopOnEnded", true); export { Twitch as default };