@popmenu/audio-player 0.59.0 → 0.60.0

package/build/index.es.js

@@ -1016,7 +1016,7 @@ var getPlayback = function (_a) {
     return playback;
 };
 var audioPlayerReducer = function (state, event) {
-    var _a, _b;
+    var _a, _b, _c;
     var audioRef = state.context.audioRef;
     var nextState = __assign$1({}, state);
     switch (state.playback) {
@@ -1025,10 +1025,14 @@ var audioPlayerReducer = function (state, event) {
                 nextState.playback = getPlayback(audioRef);
                 return nextState;
             }
+            // Required for iOS users. iOS prevents media from being loaded before user interaction.
+            if (event.type === AUDIO_PLAYER_EVENT_TYPES.TOGGLE_PLAYBACK) {
+                (_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.play();
+            }
             break;
         case PLAYBACK_STATES.PAUSED:
             if (event.type === AUDIO_PLAYER_EVENT_TYPES.TOGGLE_PLAYBACK) {
-                (_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.play();
+                (_b = audioRef.current) === null || _b === void 0 ? void 0 : _b.play();
                 nextState.playback = getPlayback(audioRef);
                 nextState.context.playbackButtonLabel = CONTROL_LABELS.PAUSE;
                 return nextState;
@@ -1036,7 +1040,7 @@ var audioPlayerReducer = function (state, event) {
             break;
         case PLAYBACK_STATES.PLAYING:
             if (event.type === AUDIO_PLAYER_EVENT_TYPES.TOGGLE_PLAYBACK) {
-                (_b = audioRef.current) === null || _b === void 0 ? void 0 : _b.pause();
+                (_c = audioRef.current) === null || _c === void 0 ? void 0 : _c.pause();
                 nextState.playback = getPlayback(audioRef);
                 nextState.context.playbackButtonLabel = CONTROL_LABELS.PLAY;
                 return nextState;
@@ -1153,16 +1157,31 @@ var setupAudioRef = function (config) { return function () {
     };
 }; };
 
+var getPlaybackIcon = function (status) {
+    var icon;
+    switch (status) {
+        case PLAYBACK_STATES.PAUSED:
+            icon = SvgPlay;
+            break;
+        case PLAYBACK_STATES.PLAYING:
+            icon = SvgPause;
+            break;
+        case PLAYBACK_STATES.NONE:
+            icon = SvgPlay;
+            break;
+    }
+    return icon;
+};
 var AudioPlayer = function (props) {
-    var _a, _b, _c, _d, _f;
-    var src = props.src, _g = props.classes, classes = _g === void 0 ? {} : _g;
+    var _a, _b, _c, _d, _f, _g;
+    var src = props.src, _h = props.classes, classes = _h === void 0 ? {} : _h;
     var volumeRef = useRef(null);
     var audioRef = useRef(null);
     var spacing = useTheme$1().spacing;
-    var _h = useState(false), disableRipple = _h[0], setDisableRipple = _h[1];
-    var _j = useReducer(audioPlayerReducer, __assign$1(__assign$1({}, initialAudioPlayerState), { context: __assign$1(__assign$1({}, initialAudioPlayerState.context), { audioRef: audioRef }) })), state = _j[0], send = _j[1];
+    var _j = useState(false), disableRipple = _j[0], setDisableRipple = _j[1];
+    var _k = useReducer(audioPlayerReducer, __assign$1(__assign$1({}, initialAudioPlayerState), { context: __assign$1(__assign$1({}, initialAudioPlayerState.context), { audioRef: audioRef }) })), state = _k[0], send = _k[1];
     useEffect(setupAudioRef({ audioRef: audioRef, send: send }), [audioRef]);
-    var PlaybackIcon = state.playback !== PLAYBACK_STATES.PAUSED ? SvgPause : SvgPlay;
+    var PlaybackIcon = getPlaybackIcon(state.playback);
     var VolumeIcon = useMemo(function () { return useVolumeIcon(state); }, [state.context.volume, (_a = state.context.audioRef.current) === null || _a === void 0 ? void 0 : _a.muted]);
     var togglePlayback = function () { return send({ type: AUDIO_PLAYER_EVENT_TYPES.TOGGLE_PLAYBACK }); };
     var toggleVolumeControl = function () { return send({ type: AUDIO_PLAYER_EVENT_TYPES.TOGGLE_VOLUME_CONTROL }); };
@@ -1172,7 +1191,7 @@ var AudioPlayer = function (props) {
     return (React__default.createElement(Box, { display: "flex", alignItems: "center", gridGap: spacing(1), className: classNames$1([classes.root]) },
         React__default.createElement("audio", { ref: audioRef, src: src }),
         React__default.createElement(Box, null,
-            React__default.createElement(IconButton, __assign$1({}, (classes.playbackToggle && { classes: { root: classes.playbackToggle } }), { "aria-label": state.context.playbackButtonLabel, disabled: state.playback === PLAYBACK_STATES.NONE, onClick: togglePlayback }),
+            React__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 }),
                 React__default.createElement(Icon, { icon: PlaybackIcon })),
             React__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 }),
                 React__default.createElement(Icon, { icon: VolumeIcon }),
@@ -1185,10 +1204,10 @@ var AudioPlayer = function (props) {
                 }))),
         React__default.createElement(Box, { display: "flex", flexGrow: 1, alignItems: "center", gridGap: spacing(1) },
             React__default.createElement(Box, { flexBasis: 60, flexShrink: 0 },
-                React__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))),
-            React__default.createElement(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 })),
+                React__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))),
+            React__default.createElement(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 })),
             React__default.createElement(Box, { flexBasis: 60, flexShrink: 0, textAlign: "end" },
-                React__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))))));
+                React__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))))));
 };
 
 export { AudioPlayer };