✨ (persistance) persist user choices

Lazy load youtube video

src/components/IntervalInput.vue

@@ -8,30 +8,33 @@
 
 <script lang="ts">
 import { defineComponent, computed } from '@vue/composition-api'
+import { useInterval } from '../hooks/useInterval'
 
 const MIN_INTERVAL = 1
 
 export default defineComponent({
   name: 'IntervalInput',
   props: {
-    editable: { type: Boolean, required: true },
-    interval: { type: Number, required: true }
+    editable: { type: Boolean, required: true }
   },
-  setup(props, { emit }) {
+  setup() {
+    const { interval, setInterval } = useInterval()
+
     const minus = () => {
-      if (props.interval > MIN_INTERVAL) {
-        emit('update', props.interval - 1)
+      if (interval.value > MIN_INTERVAL) {
+        setInterval(interval.value - 1)
       }
     }
     const plus = () => {
-      emit('update', props.interval + 1)
+      setInterval(interval.value + 1)
     }
 
     const label = computed(() =>
-      props.interval > MIN_INTERVAL ? 'minutes' : 'minute'
+      interval.value > MIN_INTERVAL ? 'minutes' : 'minute'
     )
 
     return {
+      interval,
       minus,
       plus,
       label

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>