react-jw-player-ts
Version:
A fork of react-jw-player rewritten in typescript
132 lines (131 loc) • 4.9 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const react_fast_compare_1 = __importDefault(require("react-fast-compare"));
const get_player_opts_1 = __importDefault(require("./helpers/get-player-opts"));
const initialize_1 = __importDefault(require("./helpers/initialize"));
const install_player_script_1 = __importDefault(require("./helpers/install-player-script"));
const remove_jw_player_instance_1 = __importDefault(require("./helpers/remove-jw-player-instance"));
const UNIQUE_SCRIPT_ID = 'jw-player-script';
const DISPLAY_NAME = 'ReactJWPlayer';
const noOp = () => {
// do nothing.
};
const DEFAULT_PROPS = {
aspectRatio: 'inherit',
file: '',
isAutoPlay: undefined,
isMuted: undefined,
playlist: '',
customProps: {},
onAdPlay: noOp,
onAdSkipped: noOp,
onAdComplete: noOp,
onMute: noOp,
onPlay: noOp,
onReady: noOp,
onError: noOp,
onAdPause: noOp,
onPause: noOp,
onTime: noOp,
onBuffer: noOp,
onBufferChange: noOp,
onAdClick: noOp,
onAdCompanions: noOp,
onAdError: noOp,
onAdImpression: noOp,
onAdRequest: noOp,
onAdStarted: noOp,
onAdTime: noOp,
onFirstFrame: noOp,
onFullscreen: noOp,
onIdle: noOp,
onSeek: noOp,
onSetupError: noOp,
onVolume: noOp
};
class ReactJWPlayer extends react_1.default.Component {
constructor(props) {
super(props);
this._setVideoRef = (element) => {
this.videoRef = element;
};
this.uniqueScriptId = UNIQUE_SCRIPT_ID;
this.videoRef = null;
this._initialize = this._initialize.bind(this);
this._setVideoRef = this._setVideoRef.bind(this);
}
componentDidMount() {
const isJWPlayerScriptLoaded = Boolean(window.jwplayer);
const existingScript = document.getElementById(this.uniqueScriptId);
if (isJWPlayerScriptLoaded || existingScript) {
this._initialize();
return;
}
if (!existingScript) {
(0, install_player_script_1.default)({
context: document,
onLoadCallback: this._initialize,
scriptSrc: this.props.playerScript,
uniqueScriptId: this.uniqueScriptId
});
}
}
shouldComponentUpdate(nextProps) {
const hasFileChanged = this.props.file !== nextProps.file;
const hasPlaylistChanged = !(0, react_fast_compare_1.default)(this.props.playlist, nextProps.playlist);
const hasIsMutedChanged = this.props.isMuted !== nextProps.isMuted;
return hasFileChanged || hasPlaylistChanged || hasIsMutedChanged;
}
componentDidUpdate() {
if (typeof window !== 'undefined') {
const extendedWindow = window;
if (!extendedWindow.jwplayer) {
// TODO: provide better error handling
// console.error('JWPlayer script not initialized');
return;
}
if (!this.videoRef) {
console.error(`JWPlayer instance (${this.props.playerId}) not initialized`);
return;
}
const player = extendedWindow.jwplayer(this.videoRef);
//TODO: update other props
if (player) {
player.setMute(this.props.isMuted);
}
}
}
componentWillUnmount() {
const existingScript = document.getElementById(this.uniqueScriptId);
existingScript === null || existingScript === void 0 ? void 0 : existingScript.removeEventListener('onload', this._initialize);
if (this.videoRef) {
(0, remove_jw_player_instance_1.default)({ playerRef: this.videoRef, context: window });
}
}
_initialize() {
// eslint-disable-next-line @typescript-eslint/no-this-alias
const component = this;
let player;
if (typeof window !== 'undefined' && this.videoRef !== null) {
const extendedWindow = window;
player = extendedWindow.jwplayer && extendedWindow.jwplayer(this.videoRef);
}
if (!player) {
// this player ref may have been destroyed already
return;
}
const playerOpts = (0, get_player_opts_1.default)(this.props);
(0, initialize_1.default)({ component, player, playerOpts });
}
render() {
return (react_1.default.createElement("div", { className: this.props.className },
react_1.default.createElement("div", { id: this.props.playerId, ref: this._setVideoRef })));
}
}
ReactJWPlayer.displayName = DISPLAY_NAME;
ReactJWPlayer.defaultProps = DEFAULT_PROPS;
exports.default = ReactJWPlayer;