@theoplayer/react-native-ui
Version:
A React Native UI for @theoplayer/react-native
85 lines (84 loc) • 3.44 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CastMessage = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNativeTheoplayer = require("react-native-theoplayer");
var _reactNative = require("react-native");
var _PlayerContext = require("../util/PlayerContext");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
/**
* A simple cast message showing the current state of casting for the `react-native-theoplayer` UI.
*/
class CastMessage extends _react.PureComponent {
constructor(props) {
super(props);
this.state = {
message: undefined
};
}
componentDidMount() {
const player = this.context.player;
player.addEventListener(_reactNativeTheoplayer.PlayerEventType.CAST_EVENT, this.onCastEvent);
const chromecastState = player.cast.chromecast?.state;
const airplayState = player.cast.airplay?.state;
if (chromecastState === 'connecting' || chromecastState === 'connected') {
this._processCastState(chromecastState, 'Chromecast');
} else if (airplayState === 'connecting' || airplayState === 'connected') {
this._processCastState(airplayState, 'Airplay');
}
}
componentWillUnmount() {
const context = this.context;
context.player.removeEventListener(_reactNativeTheoplayer.PlayerEventType.CAST_EVENT, this.onCastEvent);
}
_processCastState = (state, target) => {
let message;
const {
locale
} = this.context;
switch (state) {
case _reactNativeTheoplayer.CastState.connecting:
message = locale.castConnecting({
target
});
break;
case _reactNativeTheoplayer.CastState.connected:
message = locale.castConnected({
target
});
break;
}
this.setState({
message
});
};
onCastEvent = event => {
if (event.subType !== _reactNativeTheoplayer.CastEventType.CHROMECAST_STATE_CHANGE && event.subType !== _reactNativeTheoplayer.CastEventType.AIRPLAY_STATE_CHANGE) {
return;
}
const castTarget = event.subType === _reactNativeTheoplayer.CastEventType.CHROMECAST_STATE_CHANGE ? 'Chromecast' : 'Airplay';
this._processCastState(event.state, castTarget);
};
render() {
const {
message
} = this.state;
if (!message) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PlayerContext.PlayerContext.Consumer, {
children: context => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [context.style.text, {
color: context.style.colors.text
}],
children: message
})
});
}
}
exports.CastMessage = CastMessage;
CastMessage.contextType = _PlayerContext.PlayerContext;
//# sourceMappingURL=CastMessage.js.map