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;
|