From 0e960d0ba60f77730244362f397fa404b0f5bb13 Mon Sep 17 00:00:00 2001
From: Julien Calixte <juliencalixte@gmail.com>
Date: Sat, 4 Jul 2020 15:03:06 +0200
Subject: [PATCH] :green_apple: (chilled cow) remove music on ios

---
 src/components/ChilledMusic.vue | 10 +++++++++-
 src/views/Home.vue              |  4 ++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/ChilledMusic.vue b/src/components/ChilledMusic.vue
index 5183cf7..f4cf83a 100644
--- a/src/components/ChilledMusic.vue
+++ b/src/components/ChilledMusic.vue
@@ -11,6 +11,8 @@
 import 'youtube-video-js'
 import { defineComponent, onMounted, watchEffect } from '@vue/composition-api'
 
+const iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
+
 export default defineComponent({
   name: 'ChilledMusic',
   props: {
@@ -19,11 +21,17 @@ export default defineComponent({
       required: true
     }
   },
-  setup(props) {
+  setup(props, { emit }) {
+    if (iOS) {
+      return
+    }
     let chilledcow: HTMLVideoElement | null = null
 
     onMounted(() => {
       chilledcow = document.querySelector('youtube-video')
+      chilledcow?.addEventListener('pause', () => {
+        emit('pause')
+      })
     })
 
     watchEffect(() => {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index efc7aa6..33666fd 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -7,10 +7,10 @@
         :session="session"
       />
       <div v-if="timeState === 'stopped'">
-        <label for="interval">intervale : </label>
         <input
           id="interval"
           name="interval"
+          placeholder="intervale"
           v-model.number="interval"
           type="number"
           step="1"
@@ -30,7 +30,7 @@
       <button v-show="timeState === 'stopped'" @click="start">commencer</button>
       <button v-show="timeState === 'started'" @click="clear">arrêter</button>
     </div>
-    <ChilledMusic :play="timeState === 'started'" />
+    <ChilledMusic :play="timeState === 'started'" @pause="clear" />
   </div>
 </template>