Integrate templates project

templates/src/music/features/indicator/Indicator.tsx

@@ -0,0 +1,44 @@
+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;