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

116 lines (115 loc) 3.65 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, randomString } from "../utils.js"; import { canPlay } from "../patterns.js"; const SDK_URL = "https://connect.facebook.net/en_US/sdk.js"; const SDK_GLOBAL = "FB"; const SDK_GLOBAL_READY = "fbAsyncInit"; const PLAYER_ID_PREFIX = "facebook-player-"; class Facebook 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("mute"); }); __publicField(this, "unmute", () => { this.callPlayer("unmute"); }); } componentDidMount() { this.props.onMount && this.props.onMount(this); } load(url, isReady) { if (isReady) { getSDK(SDK_URL, SDK_GLOBAL, SDK_GLOBAL_READY).then((FB) => FB.XFBML.parse()); return; } getSDK(SDK_URL, SDK_GLOBAL, SDK_GLOBAL_READY).then((FB) => { FB.init({ appId: this.props.config.appId, xfbml: true, version: this.props.config.version }); FB.Event.subscribe("xfbml.render", (msg) => { this.props.onLoaded(); }); FB.Event.subscribe("xfbml.ready", (msg) => { if (msg.type === "video" && msg.id === this.playerID) { this.player = msg.instance; this.player.subscribe("startedPlaying", this.props.onPlay); this.player.subscribe("paused", this.props.onPause); this.player.subscribe("finishedPlaying", this.props.onEnded); this.player.subscribe("startedBuffering", this.props.onBuffer); this.player.subscribe("finishedBuffering", this.props.onBufferEnd); this.player.subscribe("error", this.props.onError); if (this.props.muted) { this.callPlayer("mute"); } else { this.callPlayer("unmute"); } this.props.onReady(); document.getElementById(this.playerID).querySelector("iframe").style.visibility = "visible"; } }); }); } play() { this.callPlayer("play"); } pause() { this.callPlayer("pause"); } stop() { } 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("getCurrentPosition"); } getSecondsLoaded() { return null; } render() { const { attributes } = this.props.config; const style = { width: "100%", height: "100%" }; return /* @__PURE__ */ React.createElement( "div", { style, id: this.playerID, className: "fb-video", "data-href": this.props.url, "data-autoplay": this.props.playing ? "true" : "false", "data-allowfullscreen": "true", "data-controls": this.props.controls ? "true" : "false", ...attributes } ); } } __publicField(Facebook, "displayName", "Facebook"); __publicField(Facebook, "canPlay", canPlay.facebook); __publicField(Facebook, "loopOnEnded", true); export { Facebook as default };