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