@theoplayer/react-native-ui
Version:
A React Native UI for @theoplayer/react-native
147 lines (146 loc) • 6.28 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.QualitySubMenu = exports.QualitySelectionView = void 0;
var _reactNativeTheoplayer = require("react-native-theoplayer");
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _PlayerContext = require("../util/PlayerContext");
var _MenuView = require("./common/MenuView");
var _ScrollableMenu = require("./common/ScrollableMenu");
var _MenuRadioButton = require("./common/MenuRadioButton");
var _SubMenuWithButton = require("./common/SubMenuWithButton");
var _TrackUtils = require("../util/TrackUtils");
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 playbackRate selection menu for the `react-native-theoplayer` UI.
*/
const QualitySubMenu = props => {
const {
menuStyle
} = props;
const {
player,
locale
} = (0, _react.useContext)(_PlayerContext.PlayerContext);
if (_reactNative.Platform.OS === 'ios') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
}
const createMenu = () => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(QualitySelectionView, {
style: menuStyle
});
};
let selectedQualityLabel = locale.automaticQualitySelectionLabel;
if (player.targetVideoQuality !== undefined) {
let id;
if (typeof player.targetVideoQuality === 'number') {
id = player.targetVideoQuality;
} else {
id = player.targetVideoQuality.length > 0 ? player.targetVideoQuality[0] : undefined;
}
const selectedTrack = player.videoTracks.find(track => track.uid === player.selectedVideoTrack);
const selectedQuality = selectedTrack !== undefined ? selectedTrack.qualities.find(quality => quality.uid === id) : undefined;
if (selectedQuality !== undefined) {
selectedQualityLabel = locale.qualityLabel((0, _TrackUtils.calculateQualityLabelParams)(selectedQuality));
}
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SubMenuWithButton.SubMenuWithButton, {
menuConstructor: createMenu,
label: locale.qualityTitle,
preview: selectedQualityLabel
});
};
exports.QualitySubMenu = QualitySubMenu;
class QualitySelectionView extends _react.PureComponent {
constructor(props) {
super(props);
this.state = {
videoTracks: [],
selectedVideoTrack: undefined,
targetVideoTrackQuality: undefined
};
}
componentDidMount() {
const player = this.context.player;
player.addEventListener(_reactNativeTheoplayer.PlayerEventType.MEDIA_TRACK_LIST, this.onTrackListChanged);
this.setState({
videoTracks: player.videoTracks,
selectedVideoTrack: player.selectedVideoTrack,
targetVideoTrackQuality: player.targetVideoQuality
});
}
componentWillUnmount() {
const player = this.context.player;
player.removeEventListener(_reactNativeTheoplayer.PlayerEventType.MEDIA_TRACK_LIST, this.onTrackListChanged);
}
onTrackListChanged = () => {
const player = this.context.player;
this.setState({
videoTracks: player.videoTracks,
selectedVideoTrack: player.selectedVideoTrack,
targetVideoTrackQuality: player.targetVideoQuality
});
};
selectTargetVideoQuality = qualityIndex => {
const {
videoTracks,
selectedVideoTrack
} = this.state;
if (!videoTracks || !selectedVideoTrack) {
return;
}
const videoTrack = videoTracks.find(track => track.uid === selectedVideoTrack);
const qualities = videoTrack?.qualities;
if (!qualities) {
return;
}
let uid = undefined;
if (qualityIndex !== undefined && qualityIndex > 0) {
// The first quality in the list is "auto". The rest are selectable qualities.
uid = qualities[qualityIndex - 1].uid;
}
const player = this.context.player;
player.targetVideoQuality = uid;
this.setState({
targetVideoTrackQuality: uid
});
};
render() {
const {
style
} = this.props;
const {
videoTracks,
selectedVideoTrack,
targetVideoTrackQuality
} = this.state;
const availableVideoQualities = (0, _reactNativeTheoplayer.findMediaTrackByUid)(videoTracks, selectedVideoTrack)?.qualities || [];
availableVideoQualities.sort((q1, q2) => q2.bandwidth - q1.bandwidth);
let selectedTarget;
if (targetVideoTrackQuality === undefined || typeof targetVideoTrackQuality === 'number') {
selectedTarget = targetVideoTrackQuality;
} else {
selectedTarget = targetVideoTrackQuality.length > 0 ? targetVideoTrackQuality[0] : undefined;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PlayerContext.PlayerContext.Consumer, {
children: context => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuView.MenuView, {
style: style,
menu: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollableMenu.ScrollableMenu, {
title: context.locale.qualityTitle,
items: [undefined, ...availableVideoQualities].map((quality, id) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuRadioButton.MenuRadioButton, {
label: quality === undefined ? context.locale.automaticQualitySelectionLabel : context.locale.qualityLabelExtended((0, _TrackUtils.calculateQualityLabelParams)(quality)),
uid: id,
onSelect: this.selectTargetVideoQuality,
selected: quality === undefined && selectedTarget === undefined || quality !== undefined && quality.uid === selectedTarget
}, id))
})
})
});
}
}
exports.QualitySelectionView = QualitySelectionView;
QualitySelectionView.contextType = _PlayerContext.PlayerContext;
//# sourceMappingURL=QualitySubMenu.js.map