45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
|
import React from "react";
|
||
|
import classNames from "classnames";
|
||
|
|
||
|
import { useAppSelector, useAppDispatch } from "../../hooks";
|
||
|
import { togglePlay, PlayState } from "../musicplayer/musicPlayerSlice";
|
||
|
|
||
|
function Indicator() {
|
||
|
const playing = useAppSelector((state) => state.musicPlayer.playing);
|
||
|
const muted = useAppSelector((state) => state.musicPlayer.muted);
|
||
|
const dispatch = useAppDispatch();
|
||
|
|
||
|
const buttonClass = classNames({
|
||
|
button: true,
|
||
|
"is-primary": true,
|
||
|
"level-item": true,
|
||
|
"is-loading": playing === PlayState.Loading,
|
||
|
});
|
||
|
|
||
|
const iconClass = classNames({
|
||
|
fas: true,
|
||
|
"fa-2x": true,
|
||
|
"fa-muted": muted,
|
||
|
"fa-play": playing === PlayState.Paused,
|
||
|
"fa-pause": playing === PlayState.Playing,
|
||
|
});
|
||
|
|
||
|
return (
|
||
|
<button
|
||
|
type="button"
|
||
|
onClick={() => {
|
||
|
dispatch(togglePlay(null)).catch((e) => {
|
||
|
console.error(e);
|
||
|
});
|
||
|
}}
|
||
|
className={buttonClass}
|
||
|
>
|
||
|
<span className="icon is-medium">
|
||
|
<i className={iconClass}></i>
|
||
|
</span>
|
||
|
</button>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
export default Indicator;
|