@popmenu/audio-player 0.59.0 → 0.60.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/build/index.es.js +31 -12
  2. package/build/index.es.js.map +1 -1
  3. package/build/index.js +31 -12
  4. package/build/index.js.map +1 -1
  5. package/package.json +2 -2
package/build/index.js CHANGED
@@ -1055,7 +1055,7 @@ var getPlayback = function (_a) {
1055
1055
  return playback;
1056
1056
  };
1057
1057
  var audioPlayerReducer = function (state, event) {
1058
- var _a, _b;
1058
+ var _a, _b, _c;
1059
1059
  var audioRef = state.context.audioRef;
1060
1060
  var nextState = __assign$1({}, state);
1061
1061
  switch (state.playback) {
@@ -1064,10 +1064,14 @@ var audioPlayerReducer = function (state, event) {
1064
1064
  nextState.playback = getPlayback(audioRef);
1065
1065
  return nextState;
1066
1066
  }
1067
+ // Required for iOS users. iOS prevents media from being loaded before user interaction.
1068
+ if (event.type === AUDIO_PLAYER_EVENT_TYPES.TOGGLE_PLAYBACK) {
1069
+ (_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.play();
1070
+ }
1067
1071
  break;
1068
1072
  case PLAYBACK_STATES.PAUSED:
1069
1073
  if (event.type === AUDIO_PLAYER_EVENT_TYPES.TOGGLE_PLAYBACK) {
1070
- (_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.play();
1074
+ (_b = audioRef.current) === null || _b === void 0 ? void 0 : _b.play();
1071
1075
  nextState.playback = getPlayback(audioRef);
1072
1076
  nextState.context.playbackButtonLabel = CONTROL_LABELS.PAUSE;
1073
1077
  return nextState;
@@ -1075,7 +1079,7 @@ var audioPlayerReducer = function (state, event) {
1075
1079
  break;
1076
1080
  case PLAYBACK_STATES.PLAYING:
1077
1081
  if (event.type === AUDIO_PLAYER_EVENT_TYPES.TOGGLE_PLAYBACK) {
1078
- (_b = audioRef.current) === null || _b === void 0 ? void 0 : _b.pause();
1082
+ (_c = audioRef.current) === null || _c === void 0 ? void 0 : _c.pause();
1079
1083
  nextState.playback = getPlayback(audioRef);
1080
1084
  nextState.context.playbackButtonLabel = CONTROL_LABELS.PLAY;
1081
1085
  return nextState;
@@ -1192,16 +1196,31 @@ var setupAudioRef = function (config) { return function () {
1192
1196
  };
1193
1197
  }; };
1194
1198
 
1199
+ var getPlaybackIcon = function (status) {
1200
+ var icon;
1201
+ switch (status) {
1202
+ case PLAYBACK_STATES.PAUSED:
1203
+ icon = SvgPlay;
1204
+ break;
1205
+ case PLAYBACK_STATES.PLAYING:
1206
+ icon = SvgPause;
1207
+ break;
1208
+ case PLAYBACK_STATES.NONE:
1209
+ icon = SvgPlay;
1210
+ break;
1211
+ }
1212
+ return icon;
1213
+ };
1195
1214
  var AudioPlayer = function (props) {
1196
- var _a, _b, _c, _d, _f;
1197
- var src = props.src, _g = props.classes, classes = _g === void 0 ? {} : _g;
1215
+ var _a, _b, _c, _d, _f, _g;
1216
+ var src = props.src, _h = props.classes, classes = _h === void 0 ? {} : _h;
1198
1217
  var volumeRef = React.useRef(null);
1199
1218
  var audioRef = React.useRef(null);
1200
1219
  var spacing = core.useTheme().spacing;
1201
- var _h = React.useState(false), disableRipple = _h[0], setDisableRipple = _h[1];
1202
- var _j = React.useReducer(audioPlayerReducer, __assign$1(__assign$1({}, initialAudioPlayerState), { context: __assign$1(__assign$1({}, initialAudioPlayerState.context), { audioRef: audioRef }) })), state = _j[0], send = _j[1];
1220
+ var _j = React.useState(false), disableRipple = _j[0], setDisableRipple = _j[1];
1221
+ var _k = React.useReducer(audioPlayerReducer, __assign$1(__assign$1({}, initialAudioPlayerState), { context: __assign$1(__assign$1({}, initialAudioPlayerState.context), { audioRef: audioRef }) })), state = _k[0], send = _k[1];
1203
1222
  React.useEffect(setupAudioRef({ audioRef: audioRef, send: send }), [audioRef]);
1204
- var PlaybackIcon = state.playback !== PLAYBACK_STATES.PAUSED ? SvgPause : SvgPlay;
1223
+ var PlaybackIcon = getPlaybackIcon(state.playback);
1205
1224
  var VolumeIcon = React.useMemo(function () { return useVolumeIcon(state); }, [state.context.volume, (_a = state.context.audioRef.current) === null || _a === void 0 ? void 0 : _a.muted]);
1206
1225
  var togglePlayback = function () { return send({ type: AUDIO_PLAYER_EVENT_TYPES.TOGGLE_PLAYBACK }); };
1207
1226
  var toggleVolumeControl = function () { return send({ type: AUDIO_PLAYER_EVENT_TYPES.TOGGLE_VOLUME_CONTROL }); };
@@ -1211,7 +1230,7 @@ var AudioPlayer = function (props) {
1211
1230
  return (React__default['default'].createElement(core.Box, { display: "flex", alignItems: "center", gridGap: spacing(1), className: classNames$1([classes.root]) },
1212
1231
  React__default['default'].createElement("audio", { ref: audioRef, src: src }),
1213
1232
  React__default['default'].createElement(core.Box, null,
1214
- React__default['default'].createElement(IconButton, __assign$1({}, (classes.playbackToggle && { classes: { root: classes.playbackToggle } }), { "aria-label": state.context.playbackButtonLabel, disabled: state.playback === PLAYBACK_STATES.NONE, onClick: togglePlayback }),
1233
+ React__default['default'].createElement(IconButton, __assign$1({}, (classes.playbackToggle && { classes: { root: classes.playbackToggle } }), { "aria-label": state.context.playbackButtonLabel, disabled: ((_b = audioRef.current) === null || _b === void 0 ? void 0 : _b.networkState) === 2, onClick: togglePlayback }),
1215
1234
  React__default['default'].createElement(Icon, { icon: PlaybackIcon })),
1216
1235
  React__default['default'].createElement(IconButton, __assign$1({}, (classes.volumeToggle && { classes: { root: classes.volumeToggle } }), { "aria-label": state.context.volumeButtonLabel, ref: volumeRef, onClick: toggleMute, onMouseEnter: toggleVolumeControl, onMouseLeave: toggleVolumeControl, disableRipple: disableRipple }),
1217
1236
  React__default['default'].createElement(Icon, { icon: VolumeIcon }),
@@ -1224,10 +1243,10 @@ var AudioPlayer = function (props) {
1224
1243
  }))),
1225
1244
  React__default['default'].createElement(core.Box, { display: "flex", flexGrow: 1, alignItems: "center", gridGap: spacing(1) },
1226
1245
  React__default['default'].createElement(core.Box, { flexBasis: 60, flexShrink: 0 },
1227
- React__default['default'].createElement(Typography, __assign$1({}, (classes.playbackText && { classes: { root: classes.playbackText } })), formatTime(((_b = state.context.audioRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0))),
1228
- React__default['default'].createElement(core.Slider, __assign$1({}, (classes.playbackSlider && { classes: { root: classes.playbackSlider } }), { color: "secondary", value: ((_c = state.context.audioRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) || 0, max: ((_d = state.context.audioRef.current) === null || _d === void 0 ? void 0 : _d.duration) || 1, onChange: setTime, disabled: state.playback === PLAYBACK_STATES.NONE })),
1246
+ React__default['default'].createElement(Typography, __assign$1({}, (classes.playbackText && { classes: { root: classes.playbackText } })), formatTime(((_c = state.context.audioRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) || 0))),
1247
+ React__default['default'].createElement(core.Slider, __assign$1({}, (classes.playbackSlider && { classes: { root: classes.playbackSlider } }), { color: "secondary", value: ((_d = state.context.audioRef.current) === null || _d === void 0 ? void 0 : _d.currentTime) || 0, max: ((_f = state.context.audioRef.current) === null || _f === void 0 ? void 0 : _f.duration) || 1, onChange: setTime, disabled: state.playback === PLAYBACK_STATES.NONE })),
1229
1248
  React__default['default'].createElement(core.Box, { flexBasis: 60, flexShrink: 0, textAlign: "end" },
1230
- React__default['default'].createElement(Typography, __assign$1({}, (classes.lengthText && { classes: { root: classes.lengthText } })), formatTime(((_f = state.context.audioRef.current) === null || _f === void 0 ? void 0 : _f.duration) || 0))))));
1249
+ React__default['default'].createElement(Typography, __assign$1({}, (classes.lengthText && { classes: { root: classes.lengthText } })), formatTime(((_g = state.context.audioRef.current) === null || _g === void 0 ? void 0 : _g.duration) || 0))))));
1231
1250
  };
1232
1251
 
1233
1252
  exports.AudioPlayer = AudioPlayer;