@theoplayer/react-native-ui/lib/module/ui/components/message/CastMessage.js

A React Native UI for @theoplayer/react-native

import React, { PureComponent } from 'react';
import { CastEventType, CastState, PlayerEventType } from 'react-native-theoplayer';
import { Text } from 'react-native';
import { PlayerContext } from '../util/PlayerContext';
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
/**
 * A simple cast message showing the current state of casting for the `react-native-theoplayer` UI.
 */
export class CastMessage extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      message: undefined
    };
  }
  componentDidMount() {
    const player = this.context.player;
    player.addEventListener(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(PlayerEventType.CAST_EVENT, this.onCastEvent);
  }
  _processCastState = (state, target) => {
    let message;
    const {
      locale
    } = this.context;
    switch (state) {
      case CastState.connecting:
        message = locale.castConnecting({
          target
        });
        break;
      case CastState.connected:
        message = locale.castConnected({
          target
        });
        break;
    }
    this.setState({
      message
    });
  };
  onCastEvent = event => {
    if (event.subType !== CastEventType.CHROMECAST_STATE_CHANGE && event.subType !== CastEventType.AIRPLAY_STATE_CHANGE) {
      return;
    }
    const castTarget = event.subType === CastEventType.CHROMECAST_STATE_CHANGE ? 'Chromecast' : 'Airplay';
    this._processCastState(event.state, castTarget);
  };
  render() {
    const {
      message
    } = this.state;
    if (!message) {
      return /*#__PURE__*/_jsx(_Fragment, {});
    }
    return /*#__PURE__*/_jsx(PlayerContext.Consumer, {
      children: context => /*#__PURE__*/_jsx(Text, {
        style: [context.style.text, {
          color: context.style.colors.text
        }],
        children: message
      })
    });
  }
}
CastMessage.contextType = PlayerContext;
//# sourceMappingURL=CastMessage.js.map