material-ui-audio-player
Version:
Audio player for material ui design
294 lines • 16.7 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TimePosition = exports.TimeOption = exports.AudioPlayerVariation = exports.getColors = exports.AudioPlayerComponentsOrder = exports.useComponentStyles = void 0;
var Slider_1 = __importDefault(require("@material-ui/core/Slider"));
var Paper_1 = __importDefault(require("@material-ui/core/Paper"));
var useMediaQuery_1 = __importDefault(require("@material-ui/core/useMediaQuery"));
var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
var useTheme_1 = __importDefault(require("@material-ui/core/styles/useTheme"));
var makeStyles_1 = __importDefault(require("@material-ui/core/styles/makeStyles"));
var Grid_1 = __importDefault(require("@material-ui/core/Grid"));
var Repeat_1 = __importDefault(require("@material-ui/icons/Repeat"));
var classnames_1 = __importDefault(require("classnames"));
var React = __importStar(require("react"));
var AudioDownloadsControl_1 = __importDefault(require("./AudioDownloadsControl"));
var AudioPlayControl_1 = __importDefault(require("./AudioPlayControl"));
var AudioVolumeControl_1 = __importDefault(require("./AudioVolumeControl"));
var AudioPlayerCloseButton_1 = __importDefault(require("./AudioPlayerCloseButton"));
var actions_1 = require("./state/actions");
var helpers_1 = require("./state/helpers");
var player_1 = __importDefault(require("./state/player"));
var reducer_1 = __importDefault(require("./state/reducer"));
var isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);
var inititalState = {
player: {
status: player_1.default.STATUS.PAUSE,
volume: {
status: player_1.default.VOLUME.STATUS.UNMUTE,
value: player_1.default.VOLUME.DEFAULT_VALUE,
},
duration: 0,
remaning: 0,
progress: 0,
current: 0,
loop: false,
autoplay: false,
},
};
exports.useComponentStyles = makeStyles_1.default(function (theme) {
var elevations = {};
theme.shadows.forEach(function (shadow, index) {
elevations["elevation" + index] = {
boxShadow: shadow,
};
});
return __assign({ root: function (props) { return ({
position: 'relative',
backgroundColor: theme.palette.background.paper,
color: theme.palette.text.primary,
width: props.width,
height: props.height,
transition: theme.transitions.create('box-shadow'),
}); }, sliderContainerWrapper: function (props) { return ({
width: 'auto',
flex: '1 1 auto',
display: 'flex',
boxSizing: 'border-box',
order: props.componentsOrder,
}); }, sliderContainer: {
flex: '1 1 auto',
}, slider: function (props) { return ({
color: props.playerColors.active,
}); }, commonContainer: {
flex: '0 0 auto',
'&:hover': {
cursor: 'pointer',
},
}, iconSelected: function (props) { return ({
color: props.playerColors.selected,
}); }, icon: function (props) { return ({
color: props.playerColors.active,
'&:hover': {
color: props.playerColors.hover,
},
}); }, rounded: {
borderRadius: theme.shape.borderRadius,
} }, elevations);
});
var AudioPlayerComponentsOrder;
(function (AudioPlayerComponentsOrder) {
AudioPlayerComponentsOrder["standart"] = "standart";
AudioPlayerComponentsOrder["reverse"] = "reverse";
})(AudioPlayerComponentsOrder = exports.AudioPlayerComponentsOrder || (exports.AudioPlayerComponentsOrder = {}));
var getColors = function (theme, variation) {
if (variation === AudioPlayerVariation.default) {
return {
active: theme.palette.action.active,
selected: theme.palette.action.selected,
disabled: theme.palette.action.disabled,
hover: theme.palette.action.hover,
};
}
else {
return {
active: theme.palette[variation].main,
selected: theme.palette[variation].dark,
disabled: theme.palette[variation].light,
hover: theme.palette[variation].light,
};
}
};
exports.getColors = getColors;
var AudioPlayerVariation;
(function (AudioPlayerVariation) {
AudioPlayerVariation["primary"] = "primary";
AudioPlayerVariation["secondary"] = "secondary";
AudioPlayerVariation["default"] = "default";
})(AudioPlayerVariation = exports.AudioPlayerVariation || (exports.AudioPlayerVariation = {}));
var AudioPlayerPreload;
(function (AudioPlayerPreload) {
AudioPlayerPreload["auto"] = "auto";
AudioPlayerPreload["metadata"] = "metadata";
AudioPlayerPreload["none"] = "none";
})(AudioPlayerPreload || (AudioPlayerPreload = {}));
var TimeOption;
(function (TimeOption) {
TimeOption["single"] = "single";
TimeOption["double"] = "double";
})(TimeOption = exports.TimeOption || (exports.TimeOption = {}));
var TimePosition;
(function (TimePosition) {
TimePosition["start"] = "start";
TimePosition["end"] = "end";
})(TimePosition = exports.TimePosition || (exports.TimePosition = {}));
var AudioPlayer = function (_a) {
var _b, _c;
var src = _a.src, _d = _a.rounded, rounded = _d === void 0 ? true : _d, _e = _a.elevation, elevation = _e === void 0 ? 1 : _e, _f = _a.useStyles, useStyles = _f === void 0 ? function () { return ({}); } : _f, _g = _a.width, width = _g === void 0 ? '100%' : _g, _h = _a.height, height = _h === void 0 ? 'auto' : _h, _j = _a.variation, variation = _j === void 0 ? AudioPlayerVariation.default : _j, _k = _a.preload, preload = _k === void 0 ? AudioPlayerPreload.auto : _k, _l = _a.volume, volume = _l === void 0 ? true : _l, _m = _a.muted, muted = _m === void 0 ? null : _m, _o = _a.download, download = _o === void 0 ? false : _o, _p = _a.autoplay, autoplay = _p === void 0 ? false : _p, _q = _a.order, order = _q === void 0 ? AudioPlayerComponentsOrder.standart : _q, _r = _a.loop, loop = _r === void 0 ? false : _r, _s = _a.debug, debug = _s === void 0 ? false : _s, _t = _a.spacing, spacing = _t === void 0 ? undefined : _t, _u = _a.time, time = _u === void 0 ? 'double' : _u, _v = _a.timePosition, timePosition = _v === void 0 ? 'start' : _v, _w = _a.displaySlider, displaySlider = _w === void 0 ? true : _w, _x = _a.displayCloseButton, displayCloseButton = _x === void 0 ? false : _x, icons = _a.icons, _y = _a.onPlayed, onPlayed = _y === void 0 ? function (event) { } : _y, _z = _a.onPaused, onPaused = _z === void 0 ? function (event) { } : _z, _0 = _a.onFinished, onFinished = _0 === void 0 ? function (event) { } : _0, _1 = _a.getPlayer, getPlayer = _1 === void 0 ? function (player, dispatch) { } : _1, _2 = _a.onClose, onClose = _2 === void 0 ? function () { } : _2;
var player = React.useRef(null);
var _3 = React.useState(true), visible = _3[0], setVisibility = _3[1];
var handleClose = React.useCallback(function () {
setVisibility(false);
onClose();
}, []);
var theme = useTheme_1.default();
var playerColors = exports.getColors(theme, variation);
var componentsOrder = order === AudioPlayerComponentsOrder.standart ? 'unset' : '-1';
var componentStyles = { width: width, height: height, playerColors: playerColors, componentsOrder: componentsOrder };
var classes = exports.useComponentStyles(componentStyles);
var classNames = useStyles(componentStyles);
var isMobile = useMediaQuery_1.default(theme.breakpoints.down('sm'));
var isSingleTime = React.useMemo(function () { return time === TimeOption.single; }, [time]);
var isTimePositionStart = React.useMemo(function () { return timePosition === TimePosition.start; }, [timePosition]);
var _4 = React.useState(true), showCurrentTime = _4[0], toggleTime = _4[1];
var toggleCurrentTime = React.useCallback(function () { return toggleTime(function (val) { return !val; }); }, [
toggleTime,
]);
var _5 = React.useReducer(reducer_1.default, inititalState), state = _5[0], dispatch = _5[1];
var _6 = React.useMemo(function () {
return helpers_1.populateDispatch.apply(void 0, __spreadArrays([dispatch, player], actions_1.actionCreators));
}, [dispatch, player, actions_1.actionCreators]), _playAudio = _6[0], _pauseAudio = _6[1], _muteAudio = _6[2], _unmuteAudio = _6[3], _changeAudioVolume = _6[4], _setPlayerDuration = _6[5], _setPlayerTime = _6[6], _audioEnded = _6[7], _replayAudio = _6[8], _changePlayerSlider = _6[9], _setPlayerAutoplay = _6[10], _loopAudio = _6[11];
var handleAudioSliderChange = function (event, progress) {
_changePlayerSlider(progress);
};
var handlePlayerTimeUpdate = function () {
_setPlayerTime();
};
var handleAudioEnd = function (event) {
_audioEnded();
onFinished(event);
};
var onLoad = function () {
var _a, _b, _c, _d;
if (((_a = player === null || player === void 0 ? void 0 : player.current) === null || _a === void 0 ? void 0 : _a.duration) === Infinity) {
player.current.currentTime = 24 * 60 * 60;
player.current.currentTime = 0;
}
_setPlayerDuration();
getPlayer(player.current, dispatch);
if (((_b = player === null || player === void 0 ? void 0 : player.current) === null || _b === void 0 ? void 0 : _b.currentTime) === 0) {
if (((_c = player === null || player === void 0 ? void 0 : player.current) === null || _c === void 0 ? void 0 : _c.autoplay) || ((_d = player === null || player === void 0 ? void 0 : player.current) === null || _d === void 0 ? void 0 : _d.loop)) {
}
else {
_pauseAudio();
}
}
};
React.useEffect(function () {
if (player && player.current) {
if (player.current.readyState > 3) {
onLoad();
}
if (!player.current.autoplay && autoplay) {
_setPlayerAutoplay();
}
if (isSafari) {
player.current.load();
}
player.current.addEventListener('canplay', onLoad);
player.current.addEventListener('timeupdate', handlePlayerTimeUpdate);
player.current.addEventListener('ended', handleAudioEnd);
player.current.addEventListener('pause', onPaused);
player.current.addEventListener('play', onPlayed);
}
return function () {
if (player && player.current) {
player.current.removeEventListener('canplay', onLoad);
player.current.removeEventListener('timeupdate', handlePlayerTimeUpdate);
player.current.removeEventListener('ended', handleAudioEnd);
player.current.removeEventListener('pause', onPaused);
player.current.removeEventListener('play', onPlayed);
}
};
}, [player, src]);
React.useEffect(function () {
if ((player === null || player === void 0 ? void 0 : player.current) && typeof muted === 'boolean') {
if (muted) {
_muteAudio();
}
else {
_unmuteAudio();
}
}
}, [muted]);
if (debug) {
console.log('state', state);
console.log('player', player);
}
var handleLoop = function () {
_loopAudio(!state.player.loop);
};
var mainContainerSpacing = spacing
? spacing
: isMobile
? 2
: 3;
var audioKey = Array.isArray(src) ? src[0] : src;
var currentTimeComp = (React.createElement(Grid_1.default, { item: true, className: classnames_1.default(classes.commonContainer) },
React.createElement(Typography_1.default, { className: classNames.progressTime, onClick: toggleCurrentTime }, showCurrentTime
? helpers_1.getFormattedTime(state.player.current)
: helpers_1.getFormattedTime(state.player.remaning, true))));
return visible ? (React.createElement(Grid_1.default, { container: true, spacing: mainContainerSpacing, component: Paper_1.default, alignItems: "center", className: classnames_1.default(classes.root, classes["elevation" + elevation], (_b = {},
_b[classes.rounded] = !rounded,
_b), classNames.root) },
React.createElement("audio", { ref: player, hidden: true, preload: preload, key: audioKey }, Array.isArray(src) ? (src.map(function (srcLink, index) { return React.createElement("source", { key: index, src: srcLink }); })) : (React.createElement("source", { src: src }))),
loop && (React.createElement(Grid_1.default, { item: true, className: classes.commonContainer },
React.createElement(Repeat_1.default, { fontSize: "large", onClick: handleLoop, className: classnames_1.default((_c = {},
_c[classes.iconSelected] = state.player.loop,
_c.selected = state.player.loop,
_c[classes.icon] = !state.player.loop,
_c), classNames.loopIcon) }))),
React.createElement(Grid_1.default, { item: true, className: classes.commonContainer },
React.createElement(AudioPlayControl_1.default, { classNames: classNames, icons: icons, playerStatus: state.player.status, playerColors: playerColors, replayAudio: _replayAudio, pauseAudio: _pauseAudio, playAudio: _playAudio })),
download && (React.createElement(AudioDownloadsControl_1.default, { src: src, playerColors: playerColors })),
volume && (React.createElement(AudioVolumeControl_1.default, { muted: muted, muteAudio: _muteAudio, unmuteAudio: _unmuteAudio, classNames: classNames, changeAudioVolume: _changeAudioVolume, volume: state.player.volume, playerColors: playerColors, icons: icons })),
displaySlider && (React.createElement(Grid_1.default, { item: true, container: true, spacing: 2, className: classnames_1.default(classes.sliderContainerWrapper) },
(!isSingleTime || isTimePositionStart) && currentTimeComp,
React.createElement(Grid_1.default, { item: true, className: classes.sliderContainer },
React.createElement(Slider_1.default, { className: classnames_1.default(classes.slider, classNames.mainSlider), onChange: handleAudioSliderChange, value: state.player.progress })),
!isSingleTime && (React.createElement(Grid_1.default, { item: true, className: classes.commonContainer },
React.createElement(Typography_1.default, { className: classNames.progressTime }, helpers_1.getFormattedTime(state.player.duration)))),
isSingleTime && !isTimePositionStart && currentTimeComp)),
displayCloseButton && (React.createElement(AudioPlayerCloseButton_1.default, { onClose: handleClose, classNames: classNames, playerColors: playerColors, icons: icons })))) : null;
};
exports.default = AudioPlayer;
//# sourceMappingURL=AudioPlayer.js.map