✨ (persistance) persist user choices

Lazy load youtube video

src/components/ZoneMusic.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="zone-music">
+    <div class="pretty p-switch p-fill">
+      <input
+        type="checkbox"
+        name="use-music"
+        id="use-music"
+        :checked="withMusic"
+        @change="setWithMusic(!withMusic)"
+      />
+      <div class="state p-success">
+        <label for="use-music">son</label>
+      </div>
+    </div>
+    <ChilledMusic v-if="withMusic" :play="play" @play="play" @pause="pause" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api'
+import { useMusic } from '@/hooks/useMusic'
+
+export default defineComponent({
+  name: 'ZoneMusic',
+  components: {
+    ChilledMusic: () => import('@/components/ChilledMusic.vue')
+  },
+  props: {
+    play: {
+      type: Boolean,
+      required: true
+    }
+  },
+  setup(_, { emit }) {
+    const { withMusic, setWithMusic } = useMusic()
+
+    const play = () => {
+      emit('play')
+    }
+
+    const pause = () => {
+      emit('pause')
+    }
+
+    return { withMusic, setWithMusic, play, pause }
+  }
+})
+</script>