@ayseaistudio/ui-components 3.5.3 → 3.5.5
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.
- package/dist/Player/Player.d.ts +3 -1
- package/dist/Player/Player.js +4 -4
- package/package.json +1 -1
package/dist/Player/Player.d.ts
CHANGED
|
@@ -6,18 +6,20 @@ interface Props {
|
|
|
6
6
|
status: "play" | "pause";
|
|
7
7
|
direction: "horizontal";
|
|
8
8
|
isPlaying?: boolean;
|
|
9
|
+
isLoading?: boolean;
|
|
9
10
|
togglePlayPause?: () => void;
|
|
10
11
|
className: any;
|
|
11
12
|
audioUrl?: string;
|
|
12
13
|
audioReference: React.Ref<HTMLAudioElement | null>;
|
|
13
14
|
}
|
|
14
15
|
export declare const Player: {
|
|
15
|
-
({ withButton, size, status, direction, className, isPlaying, togglePlayPause, audioUrl, audioReference }: Props): React.JSX.Element;
|
|
16
|
+
({ withButton, size, status, direction, className, isPlaying, isLoading, togglePlayPause, audioUrl, audioReference }: Props): React.JSX.Element;
|
|
16
17
|
propTypes: {
|
|
17
18
|
withButton: PropTypes.Requireable<boolean>;
|
|
18
19
|
size: PropTypes.Requireable<string>;
|
|
19
20
|
status: PropTypes.Requireable<string>;
|
|
20
21
|
direction: PropTypes.Requireable<string>;
|
|
22
|
+
isLoading: PropTypes.Requireable<boolean>;
|
|
21
23
|
audioUrl: PropTypes.Requireable<string>;
|
|
22
24
|
};
|
|
23
25
|
};
|
package/dist/Player/Player.js
CHANGED
|
@@ -4,8 +4,9 @@ import { SingleSlider } from "../SingleSlider";
|
|
|
4
4
|
import "./style.css";
|
|
5
5
|
import { IconPlayerPlayFilled, IconPlayerPauseFilled } from "@tabler/icons-react";
|
|
6
6
|
import { PrimaryButton } from "../PrimaryButton/PrimaryButton";
|
|
7
|
+
import { Loader } from "../Loader/Loader";
|
|
7
8
|
import { useState, useEffect, useRef } from "react";
|
|
8
|
-
export const Player = ({ withButton = true, size, status, direction, className, isPlaying, togglePlayPause, audioUrl, audioReference }) => {
|
|
9
|
+
export const Player = ({ withButton = true, size, status, direction, className, isPlaying, isLoading = false, togglePlayPause, audioUrl, audioReference }) => {
|
|
9
10
|
const [volume, setVolume] = useState(100);
|
|
10
11
|
const [currentTime, setCurrentTime] = useState(0);
|
|
11
12
|
const [duration, setDuration] = useState(0);
|
|
@@ -59,14 +60,13 @@ export const Player = ({ withButton = true, size, status, direction, className,
|
|
|
59
60
|
setAudioInstance(null);
|
|
60
61
|
};
|
|
61
62
|
}, [audioUrl]);
|
|
62
|
-
return (_jsxs("div", { className: `player ${className}`, children: [withButton && (_jsx(PrimaryButton, { className: "primary-button", leftIcon: isPlaying ?
|
|
63
|
-
_jsx(IconPlayerPauseFilled, { size: 20, color: "#F1F1F1" }) :
|
|
64
|
-
_jsx(IconPlayerPlayFilled, { size: 20, color: "#F1F1F1" }), color: "black", onClick: togglePlayPause })), _jsx("div", { className: "player-controls", children: _jsx(SingleSlider, { className: "seek-slider", size: "large", status: "zero", value: currentTime, min: 0, max: duration, onChange: handleSeekChange, rightLabel: _jsxs("span", { className: "slider-time", children: [_jsx("span", { className: "current-time", children: formatTime(currentTime) }), _jsx("span", { children: " / " }), _jsx("span", { className: "total-time", children: formatTime(duration || 0) })] }) }) })] }));
|
|
63
|
+
return (_jsxs("div", { className: `player ${className}`, children: [withButton && (_jsx(PrimaryButton, { className: "primary-button", leftIcon: isLoading ? (_jsx(Loader, { size: 20 })) : isPlaying ? (_jsx(IconPlayerPauseFilled, { size: 20, color: "#F1F1F1" })) : (_jsx(IconPlayerPlayFilled, { size: 20, color: "#F1F1F1" })), color: "black", onClick: togglePlayPause })), _jsx("div", { className: "player-controls", children: _jsx(SingleSlider, { className: "seek-slider", size: "large", status: "zero", value: currentTime, min: 0, max: duration, onChange: handleSeekChange, rightLabel: _jsxs("span", { className: "slider-time", children: [_jsx("span", { className: "current-time", children: formatTime(currentTime) }), _jsx("span", { children: " / " }), _jsx("span", { className: "total-time", children: formatTime(duration || 0) })] }) }) })] }));
|
|
65
64
|
};
|
|
66
65
|
Player.propTypes = {
|
|
67
66
|
withButton: PropTypes.bool,
|
|
68
67
|
size: PropTypes.oneOf(["large"]),
|
|
69
68
|
status: PropTypes.oneOf(["play"]),
|
|
70
69
|
direction: PropTypes.oneOf(["horizontal"]),
|
|
70
|
+
isLoading: PropTypes.bool,
|
|
71
71
|
audioUrl: PropTypes.string,
|
|
72
72
|
};
|