feat: 停止ボタンを連続再生中と通常再生中で共用にする

src/components/AudioDetail.vue

@@ -22,25 +22,23 @@
           </q-tabs>
         </div>
         <div class="play-button-wrapper">
-          <template v-if="!nowPlayingContinuously">
-            <q-btn
-              v-if="!nowPlaying && !nowGenerating"
-              fab
-              color="primary"
-              text-color="display-on-primary"
-              icon="play_arrow"
-              @click="play"
-            ></q-btn>
-            <q-btn
-              v-else
-              fab
-              color="primary"
-              text-color="display-on-primary"
-              icon="stop"
-              :disable="nowGenerating"
-              @click="stop"
-            ></q-btn>
-          </template>
+          <q-btn
+            v-if="!nowPlaying && !nowGenerating"
+            fab
+            color="primary"
+            text-color="display-on-primary"
+            icon="play_arrow"
+            @click="play"
+          ></q-btn>
+          <q-btn
+            v-else
+            fab
+            color="primary"
+            text-color="display-on-primary"
+            icon="stop"
+            :disable="nowGenerating"
+            @click="stop"
+          ></q-btn>
         </div>
       </div>
 
@@ -513,18 +511,11 @@ const stop = () => {
   store.dispatch("STOP_AUDIO");
 };
 
-const nowPlaying = computed(
-  () => props.activeAudioKey === store.state.nowPlayingAudioKey
-);
+const nowPlaying = computed(() => store.getters.NOW_PLAYING);
 const nowGenerating = computed(
   () => store.state.audioStates[props.activeAudioKey]?.nowGenerating
 );
 
-// continuously play
-const nowPlayingContinuously = computed(
-  () => store.state.nowPlayingContinuously
-);
-
 const audioDetail = ref<HTMLElement>();
 let accentPhraseElems: HTMLElement[] = [];
 const addAccentPhraseElem: VNodeRef = (elem) => {

src/components/HeaderBar.vue

@@ -85,7 +85,7 @@ const hotkeyMap = new Map<HotkeyAction, () => HotkeyReturnType>([
     () => {
       if (!uiLocked.value) {
         if (nowPlayingContinuously.value) {
-          stopContinuously();
+          stop();
         } else {
           playContinuously();
         }
@@ -119,7 +119,7 @@ const playContinuously = async () => {
     });
   }
 };
-const stopContinuously = () => {
+const stop = () => {
   store.dispatch("STOP_AUDIO");
 };
 const generateAndSaveOneAudio = async () => {
@@ -159,8 +159,8 @@ const usableButtons: Record<
     disable: uiLocked,
   },
   STOP: {
-    click: stopContinuously,
-    disable: computed(() => !nowPlayingContinuously.value),
+    click: stop,
+    disable: computed(() => !store.getters.NOW_PLAYING),
   },
   EXPORT_AUDIO_ONE: {
     click: generateAndSaveOneAudio,

src/store/audio.ts

@@ -298,6 +298,16 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
     },
   },
 
+  NOW_PLAYING: {
+    getter(state, getters) {
+      const activeAudioKey = getters.ACTIVE_AUDIO_KEY;
+      return (
+        activeAudioKey != undefined &&
+        activeAudioKey === state.nowPlayingAudioKey
+      );
+    },
+  },
+
   ACTIVE_AUDIO_ELEM_CURRENT_TIME: {
     getter: (state) => {
       return state._activeAudioKey !== undefined

src/store/type.ts

@@ -152,6 +152,10 @@ export type AudioStoreTypes = {
     getter(audioKey: AudioKey): boolean;
   };
 
+  NOW_PLAYING: {
+    getter: boolean;
+  };
+
   ACTIVE_AUDIO_ELEM_CURRENT_TIME: {
     getter: number | undefined;
   };