Initial commit

components/experiments/statemanagement/PlayButton.vue

@@ -0,0 +1,62 @@
+<template>
+  <li class="nav__item">
+    <a
+      id="focused-icon"
+      class="nav__item-link"
+      href="#"
+      @click.prevent="togglePlaying"
+      @touchstart.prevent="togglePlaying"
+    >
+      <svg v-if="!playing" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <!-- ▶️ PLAY ICON -->
+        <path
+          d="m6.192 3.67 13.568 7.633a.8.8 0 0 1 0 1.394L6.192 20.33A.8.8 0 0 1 5 19.632V4.368a.8.8 0 0 1 1.192-.698Z"
+          fill="currentColor"
+        />
+      </svg>
+
+      <svg v-else width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <!-- ⏸️ PAUSE ICON -->
+        <g clip-path="url(#a)">
+          <path
+            d="M17.083 19.917a2.326 2.326 0 0 1-1.706-.71 2.332 2.332 0 0 1-.71-1.707V5.417c0-.665.236-1.234.71-1.706A2.333 2.333 0 0 1 17.083 3c.664 0 1.233.236 1.708.71.474.475.71 1.044.709 1.707V17.5a2.33 2.33 0 0 1-.71 1.707 2.322 2.322 0 0 1-1.707.71Zm-9.666 0a2.326 2.326 0 0 1-1.707-.71A2.332 2.332 0 0 1 5 17.5V5.417c0-.665.237-1.234.71-1.706A2.333 2.333 0 0 1 7.417 3c.663 0 1.233.236 1.707.71.475.475.71 1.044.71 1.707V17.5a2.33 2.33 0 0 1-.71 1.707 2.322 2.322 0 0 1-1.707.71Z"
+            fill="#e9c046"
+          />
+        </g>
+        <defs>
+          <clipPath id="a">
+            <path fill="#e9c046" d="M0 0h24v24H0z" />
+          </clipPath>
+        </defs>
+      </svg>
+    </a>
+  </li>
+</template>
+<script>
+import { mapState, mapActions } from 'pinia'
+import { useAudioStore } from '~/stores/audio'
+
+export default defineNuxtComponent({
+  name: 'PlayButton',
+
+  created () {
+    this.audioStore = useAudioStore()
+  },
+
+  computed: {
+    ...mapState(useAudioStore, ['playing'])
+  },
+
+  watch: {
+    playing (newValue) {
+      this.$logger.log('Global playing state changed', newValue)
+    }
+  },
+
+  methods: {
+    togglePlaying () {
+      this.audioStore.setPlaying(!this.audioStore.playing)
+    }
+  }
+})
+</script>