63 lines
1.9 KiB
Vue
63 lines
1.9 KiB
Vue
<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>
|