@theoplayer/react-native-ui/lib/commonjs/ui/components/menu/LanguageMenuButton.js

A React Native UI for @theoplayer/react-native

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.LanguageMenuView = exports.LanguageMenuButton = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNativeTheoplayer = require("react-native-theoplayer");
var _PlayerContext = require("../util/PlayerContext");
var _LanguageSvg = require("../button/svg/LanguageSvg");
var _ScrollableMenu = require("./common/ScrollableMenu");
var _MenuRadioButton = require("./common/MenuRadioButton");
var _MenuButton = require("./common/MenuButton");
var _TrackUtils = require("../util/TrackUtils");
var _MenuView = require("./common/MenuView");
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 button component that opens a language selection menu (audio/text) for the `react-native-theoplayer` UI.
 */
class LanguageMenuButton extends _react.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      audioTracks: [],
      textTracks: []
    };
  }
  componentDidMount() {
    const player = this.context.player;
    player.addEventListener(_reactNativeTheoplayer.PlayerEventType.MEDIA_TRACK_LIST, this._updateTrackLists);
    player.addEventListener(_reactNativeTheoplayer.PlayerEventType.TEXT_TRACK_LIST, this._updateTrackLists);
    this._updateTrackLists();
  }
  componentWillUnmount() {
    const player = this.context.player;
    player.removeEventListener(_reactNativeTheoplayer.PlayerEventType.MEDIA_TRACK_LIST, this._updateTrackLists);
    player.removeEventListener(_reactNativeTheoplayer.PlayerEventType.TEXT_TRACK_LIST, this._updateTrackLists);
  }
  _updateTrackLists = () => {
    const player = this.context.player;
    this.setState({
      audioTracks: player.audioTracks,
      textTracks: player.textTracks
    });
  };
  render() {
    const {
      audioTracks,
      textTracks
    } = this.state;
    const {
      menuStyle,
      icon
    } = this.props;
    const selectableTextTracks = (0, _TrackUtils.filterRenderableTracks)(textTracks);
    if (audioTracks.length < 2 && selectableTextTracks.length === 0) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
    }
    const createMenu = () => {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(LanguageMenuView, {
        style: menuStyle
      });
    };
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuButton.MenuButton, {
      svg: icon ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_LanguageSvg.LanguageSvg, {}),
      menuConstructor: createMenu
    });
  }
}
exports.LanguageMenuButton = LanguageMenuButton;
class LanguageMenuView extends _react.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      audioTracks: [],
      textTracks: [],
      selectedAudioTrack: undefined,
      selectedTextTrack: undefined
    };
  }
  _updateTrackLists = () => {
    const player = this.context.player;
    this.setState({
      audioTracks: player.audioTracks,
      textTracks: player.textTracks,
      selectedAudioTrack: player.selectedAudioTrack,
      selectedTextTrack: player.selectedTextTrack
    });
  };
  componentDidMount() {
    const player = this.context.player;
    // The track lists might change while the menu is open, so we need to monitor them.
    player.addEventListener(_reactNativeTheoplayer.PlayerEventType.MEDIA_TRACK_LIST, this._updateTrackLists);
    player.addEventListener(_reactNativeTheoplayer.PlayerEventType.TEXT_TRACK_LIST, this._updateTrackLists);
    this._updateTrackLists();
  }
  componentWillUnmount() {
    const player = this.context.player;
    player.removeEventListener(_reactNativeTheoplayer.PlayerEventType.MEDIA_TRACK_LIST, this._updateTrackLists);
    player.removeEventListener(_reactNativeTheoplayer.PlayerEventType.TEXT_TRACK_LIST, this._updateTrackLists);
  }
  onSelectTextTrack = uid => {
    const {
      textTracks
    } = this.state;
    const textTrack = textTracks.find(track => track.uid === uid);
    const context = this.context;
    context.player.selectedTextTrack = textTrack?.uid;
    this.setState({
      selectedTextTrack: textTrack?.uid
    });
  };
  selectAudioTrack = uid => {
    const {
      audioTracks
    } = this.state;
    const audioTrack = audioTracks.find(track => track.uid === uid);
    if (audioTrack) {
      const context = this.context;
      context.player.selectedAudioTrack = audioTrack.uid;
      this.setState({
        selectedAudioTrack: audioTrack.uid
      });
    }
  };
  render() {
    const {
      style
    } = this.props;
    const {
      audioTracks,
      textTracks,
      selectedAudioTrack,
      selectedTextTrack
    } = this.state;
    // The sort is needed because tracks are returned in different order on the native SDKs.
    const selectableTextTracks = (0, _TrackUtils.filterRenderableTracks)(textTracks).sort((first, second) => first.uid - second.uid);
    const selectableAudioTracks = audioTracks.sort((first, second) => first.uid - second.uid);
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PlayerContext.PlayerContext.Consumer, {
      children: context => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuView.MenuView, {
        style: style,
        menu: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
          children: [selectableAudioTracks.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollableMenu.ScrollableMenu, {
            title: context.locale.audioTitle,
            items: selectableAudioTracks.map((track, id) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuRadioButton.MenuRadioButton, {
              label: (0, _TrackUtils.getTrackLabel)(track),
              uid: track.uid,
              onSelect: this.selectAudioTrack,
              selected: track.uid === selectedAudioTrack
            }, id))
          }), selectableTextTracks.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollableMenu.ScrollableMenu, {
            title: context.locale.subtitleTitle,
            items: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuRadioButton.MenuRadioButton, {
                label: 'off',
                uid: undefined,
                onSelect: this.onSelectTextTrack,
                selected: selectedTextTrack === undefined
              }, 0), selectableTextTracks.map((track, id) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuRadioButton.MenuRadioButton, {
                label: (0, _TrackUtils.getTrackLabel)(track),
                uid: track.uid,
                onSelect: this.onSelectTextTrack,
                selected: track.uid === selectedTextTrack
              }, id + 1))]
            })
          })]
        })
      })
    });
  }
}
exports.LanguageMenuView = LanguageMenuView;
LanguageMenuButton.contextType = _PlayerContext.PlayerContext;
LanguageMenuView.contextType = _PlayerContext.PlayerContext;
//# sourceMappingURL=LanguageMenuButton.js.map