@popmenu/common-ui 0.19.0 → 0.19.4

package/build/components/AudioPlayer/AudioPlayerProps.d.ts

@@ -1,4 +1,10 @@
+declare type AudioPlayerClasses = 'root' | 'playbackToggle' | 'volumeToggle' | 'volumeSlider' | 'playbackSlider' | 'playbackText' | 'lengthText';
 export interface AudioPlayerProps {
     /** The URL of the audio to embed. */
     src?: string;
+    /** style classes */
+    classes?: {
+        [Key in AudioPlayerClasses]?: string;
+    };
 }
+export {};

package/build/index.es.js

@@ -199,42 +199,6 @@ function SvgVolumeUp(props) {
   })));
 }
 
-var useIconStyles = makeStyles(function (_a) {
-    var spacing = _a.spacing, palette = _a.palette;
-    var getFontSize = function (_a) {
-        var size = _a.size;
-        var sizes = {
-            inherit: 'inherit',
-            small: spacing(1.5),
-            medium: spacing(2),
-            large: spacing(2.5),
-            'extra-large': spacing(3),
-        };
-        return size ? sizes[size] : 'inherit';
-    };
-    var getColor = function (props) {
-        var semanticColors = ['primary', 'secondary', 'info', 'success', 'warning', 'error'];
-        var value = 'inherit';
-        if (props.color) {
-            if (semanticColors.includes(props.color.split('.')[0])) {
-                var _a = props.color.split('.'), color = _a[0], _b = _a[1], variant = _b === void 0 ? 'main' : _b;
-                value = palette[color][variant];
-            }
-            else if (props.color.search(/^(rgb|hsla|#)/) !== -1) {
-                value = props.color;
-            }
-        }
-        return value;
-    };
-    return {
-        root: {
-            color: getColor,
-            fontSize: getFontSize,
-            strokeWidth: '1.3px',
-        },
-    };
-});
-
 var classnames = {exports: {}};
 
 /*!
@@ -295,6 +259,42 @@ var classnames = {exports: {}};
 
 var classNames = classnames.exports;
 
+var useIconStyles = makeStyles(function (_a) {
+    var spacing = _a.spacing, palette = _a.palette;
+    var getFontSize = function (_a) {
+        var size = _a.size;
+        var sizes = {
+            inherit: 'inherit',
+            small: spacing(1.5),
+            medium: spacing(2),
+            large: spacing(2.5),
+            'extra-large': spacing(3),
+        };
+        return size ? sizes[size] : 'inherit';
+    };
+    var getColor = function (props) {
+        var semanticColors = ['primary', 'secondary', 'info', 'success', 'warning', 'error'];
+        var value = 'inherit';
+        if (props.color) {
+            if (semanticColors.includes(props.color.split('.')[0])) {
+                var _a = props.color.split('.'), color = _a[0], _b = _a[1], variant = _b === void 0 ? 'main' : _b;
+                value = palette[color][variant];
+            }
+            else if (props.color.search(/^(rgb|hsla|#)/) !== -1) {
+                value = props.color;
+            }
+        }
+        return value;
+    };
+    return {
+        root: {
+            color: getColor,
+            fontSize: getFontSize,
+            strokeWidth: '1.3px',
+        },
+    };
+});
+
 var iconStaticClassName = 'pop-icon';
 var Icon = function (props) {
     var icon = props.icon, className = props.className, restProps = __rest(props, ["icon", "className"]);
@@ -566,12 +566,12 @@ var setupAudioRef = function (config) { return function () {
 
 var AudioPlayer = function (props) {
     var _a, _b, _c, _d, _f;
-    var src = props.src;
+    var src = props.src, _g = props.classes, classes = _g === void 0 ? {} : _g;
     var volumeRef = useRef(null);
     var audioRef = useRef(null);
     var spacing = useTheme().spacing;
-    var _g = useState(false), disableRipple = _g[0], setDisableRipple = _g[1];
-    var _h = useReducer(audioPlayerReducer, __assign(__assign({}, initialAudioPlayerState), { context: __assign(__assign({}, initialAudioPlayerState.context), { audioRef: audioRef }) })), state = _h[0], send = _h[1];
+    var _h = useState(false), disableRipple = _h[0], setDisableRipple = _h[1];
+    var _j = useReducer(audioPlayerReducer, __assign(__assign({}, initialAudioPlayerState), { context: __assign(__assign({}, initialAudioPlayerState.context), { audioRef: audioRef }) })), state = _j[0], send = _j[1];
     useEffect(setupAudioRef({ audioRef: audioRef, send: send }), [audioRef]);
     var PlaybackIcon = state.playback !== PLAYBACK_STATES.PAUSED ? SvgPause : SvgPlay;
     var VolumeIcon = useMemo(function () { return useVolumeIcon(state); }, [state.context.volume, (_a = state.context.audioRef.current) === null || _a === void 0 ? void 0 : _a.muted]);
@@ -580,14 +580,14 @@ var AudioPlayer = function (props) {
     var toggleMute = function () { return send({ type: AUDIO_PLAYER_EVENT_TYPES.TOGGLE_MUTE }); };
     var setTime = function (_e, time) { return send({ type: AUDIO_PLAYER_EVENT_TYPES.SET_TIME, context: { time: time } }); };
     var setVolume = function (_e, volume) { return send({ type: AUDIO_PLAYER_EVENT_TYPES.VOLUME_CHANGE, context: { volume: volume } }); };
-    return (React__default.createElement(Box, { display: "flex", alignItems: "center", gridGap: spacing(1) },
+    return (React__default.createElement(Box, { display: "flex", alignItems: "center", gridGap: spacing(1), className: classNames([classes.root]) },
         React__default.createElement("audio", { ref: audioRef, src: src }),
         React__default.createElement(Box, null,
-            React__default.createElement(IconButton, { "aria-label": state.context.playbackButtonLabel, disabled: state.playback === PLAYBACK_STATES.NONE, onClick: togglePlayback },
+            React__default.createElement(IconButton, { classes: { root: classes.playbackToggle }, "aria-label": state.context.playbackButtonLabel, disabled: state.playback === PLAYBACK_STATES.NONE, onClick: togglePlayback },
                 React__default.createElement(Icon, { icon: PlaybackIcon })),
-            React__default.createElement(IconButton, { "aria-label": state.context.volumeButtonLabel, ref: volumeRef, onClick: toggleMute, onMouseEnter: toggleVolumeControl, onMouseLeave: toggleVolumeControl, disableRipple: disableRipple },
+            React__default.createElement(IconButton, { 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 }),
-                React__default.createElement(Popper, { onClick: function (e) { return e.stopPropagation(); }, onMouseEnter: function () { return setDisableRipple(true); }, onMouseLeave: function () { return setDisableRipple(false); }, open: state.volumeControls === VOLUME_CONTROL_STATES.SHOW, anchorEl: function () { return volumeRef.current; }, transition: true, placement: "top" }, function (_a) {
+                React__default.createElement(Popper, { onClick: function (e) { return e.stopPropagation(); }, onMouseEnter: function () { return setDisableRipple(true); }, onMouseLeave: function () { return setDisableRipple(false); }, open: state.volumeControls === VOLUME_CONTROL_STATES.SHOW, anchorEl: function () { return volumeRef.current; }, transition: true, placement: "top", className: classNames([classes.volumeSlider]) }, function (_a) {
                     var TransitionProps = _a.TransitionProps;
                     return (React__default.createElement(Grow, __assign({}, TransitionProps),
                         React__default.createElement(Paper, { elevation: 1 },
@@ -596,10 +596,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, null, formatTime(((_b = state.context.audioRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0))),
-            React__default.createElement(Slider, { 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, { classes: { root: classes.playbackText } }, formatTime(((_b = state.context.audioRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0))),
+            React__default.createElement(Slider, { 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(Box, { flexBasis: 60, flexShrink: 0, textAlign: "end" },
-                React__default.createElement(Typography, null, formatTime(((_f = state.context.audioRef.current) === null || _f === void 0 ? void 0 : _f.duration) || 0))))));
+                React__default.createElement(Typography, { classes: { root: classes.lengthText } }, formatTime(((_f = state.context.audioRef.current) === null || _f === void 0 ? void 0 : _f.duration) || 0))))));
 };
 
 var LoadingStatus;