react-base-guide
Version:
react ui components
118 lines • 6.18 kB
JavaScript
;
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styled_components_1 = __importDefault(require("styled-components"));
const icon_button_1 = __importDefault(require("../icon-button"));
const range_1 = __importDefault(require("../range"));
const label_1 = __importDefault(require("../label"));
const add_custom_style_1 = __importDefault(require("../../utils/add-custom-style"));
const play_1 = __importDefault(require("./icons/play"));
const pause_1 = __importDefault(require("./icons/pause"));
const Wrapper = styled_components_1.default.div `
justify-content: space-between;
flex-wrap: nowrap;
box-sizing: border-box;
align-items: center;
${p => (0, add_custom_style_1.default)(p.styled, "flex")}
`;
const convertSecToMin = (sec) => {
if (!sec) {
return "00:00";
}
if (sec === Infinity) {
return "Infinity";
}
let minutes = Math.trunc(sec / 60);
let remainSec = Math.round(sec - (minutes * 60));
let stringMinutes = minutes < 10 ? "0" + minutes : minutes.toString();
let stringSec = remainSec < 10 ? "0" + remainSec : remainSec.toString();
return stringMinutes + ":" + stringSec;
};
const Audio = (props) => {
const { src, autoPlay, onEnded, disabled } = props;
const audioRef = (0, react_1.useRef)(null);
const [duration, setDuration] = (0, react_1.useState)(0);
const [currentTime, setCurrentTime] = (0, react_1.useState)(0);
const [playing, setPlaying] = (0, react_1.useState)(false);
const [ready, setReady] = (0, react_1.useState)(false);
(0, react_1.useEffect)(() => {
if (!ready) {
audioRef.current.onloadedmetadata = () => __awaiter(void 0, void 0, void 0, function* () {
if (audioRef.current) {
while (audioRef.current && (audioRef.current.duration === Infinity)) {
yield new Promise(r => setTimeout(r, 1000));
if (audioRef.current) {
audioRef.current.currentTime = 10000000 * Math.random();
}
}
setDuration(audioRef.current.duration);
audioRef.current.currentTime = 0;
setReady(true);
}
if (!playing && autoPlay) {
audioRef.current && audioRef.current.play();
setPlaying(true);
}
});
}
audioRef.current.ontimeupdate = () => {
if (audioRef.current) {
setCurrentTime(audioRef.current.currentTime);
}
};
audioRef.current.onended = (e) => {
if (audioRef.current) {
audioRef.current.currentTime = 0;
setPlaying(false);
}
onEnded && onEnded(e);
};
audioRef.current.onerror = (err) => {
console.log("Error loading audio", err);
};
audioRef.current.ondurationchange = () => {
if (audioRef.current) {
const duration = audioRef.current.duration;
if (duration !== Infinity) {
setDuration(duration);
}
}
};
playing ? audioRef.current.play() : audioRef.current.pause();
return () => {
if (audioRef.current) {
audioRef.current.oncanplay = null;
audioRef.current.ontimeupdate = null;
audioRef.current.onended = null;
}
};
}, [playing]);
return ((0, jsx_runtime_1.jsxs)(Wrapper, Object.assign({ id: props.id, className: props.className, tabIndex: props.tabIndex, styled: props.styled }, { children: [(0, jsx_runtime_1.jsx)("audio", { ref: audioRef, src: src, autoPlay: autoPlay, muted: false }), playing ?
(0, jsx_runtime_1.jsx)(icon_button_1.default, Object.assign({ secondary: true, onTouchStart: (e) => {
e.preventDefault();
audioRef.current.pause();
setPlaying(false);
}, onMouseUp: () => setPlaying(false), onTouchEnd: e => e.preventDefault(), disabled: disabled }, { children: (0, jsx_runtime_1.jsx)(pause_1.default, {}) })) :
(0, jsx_runtime_1.jsx)(icon_button_1.default, Object.assign({ secondary: true, onTouchStart: (e) => {
e.preventDefault();
audioRef.current.play();
setPlaying(true);
}, onMouseUp: () => setPlaying(true), onTouchEnd: e => e.preventDefault(), disabled: disabled }, { children: (0, jsx_runtime_1.jsx)(play_1.default, {}) })), (0, jsx_runtime_1.jsx)(range_1.default, { onChange: e => {
audioRef.current.currentTime = e.target.value;
}, value: currentTime, max: duration, min: 0, styled: { marginLeft: "12px", marginRight: "12px" } }), (0, jsx_runtime_1.jsx)(label_1.default, { variant: "standard", label: convertSecToMin(currentTime) + "/" + convertSecToMin(duration) })] })));
};
exports.default = Audio;
//# sourceMappingURL=index.js.map