🍏 (music) remove music for iOS

src/components/ChilledMusic.vue

@@ -23,8 +23,6 @@ import {
   onUnmounted
 } from '@vue/composition-api'
 
-const iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
-
 export default defineComponent({
   name: 'ChilledMusic',
   props: {
@@ -34,9 +32,6 @@ export default defineComponent({
     }
   },
   setup(props, { emit }) {
-    if (iOS) {
-      return
-    }
     const chilledcow = reactive<{ video: Plyr | null }>({
       video: null
     })

src/components/ZoneMusic.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="zone-music plume">
+  <div class="zone-music plume" v-if="isMusicAvailable">
     <div class="pm-field">
       <label for="use-music" data-pm-holder>
         <span :class="{ selected: !withMusic, disabled: withMusic }"
@@ -38,7 +38,7 @@ export default defineComponent({
     }
   },
   setup(_, { emit }) {
-    const { withMusic, setWithMusic } = useMusic()
+    const { isMusicAvailable, withMusic, setWithMusic } = useMusic()
 
     const play = () => {
       emit('play')
@@ -48,7 +48,7 @@ export default defineComponent({
       emit('pause')
     }
 
-    return { withMusic, setWithMusic, play, pause }
+    return { isMusicAvailable, withMusic, setWithMusic, play, pause }
   }
 })
 </script>

src/hooks/useMusic.ts

@@ -3,10 +3,13 @@ import { GetterTree } from 'vuex'
 import { State, RootActions } from '@/store'
 
 export const useMusic = () => {
+  const isIOS =
+    navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
   const { withMusic } = useGetters<GetterTree<State, State>>(['withMusic'])
   const { setWithMusic } = useActions<RootActions>(['setWithMusic'])
 
   return {
+    isMusicAvailable: !isIOS,
     withMusic,
     setWithMusic
   }