enhanced player

leandrocampero · Feb 1, 2024 · 102a5f8 · 102a5f8
1 parent 3b97d3b
commit 102a5f8
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 12 deletions.
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -31,15 +31,52 @@
     <main class="tw-min-h-dvh tw-pt-16">
       <slot />
     </main>
+
+    <v-dialog v-model="dialog" width="500">
+      <template #default="{ isActive }">
+        <v-card>
+          <v-card-text class="tw-text-center">
+            Esta invitación la hicimos con mucho cariño y viene con una sorpresa
+            musical. Dale play para escucharla mientras estes aquí.
+          </v-card-text>
+
+          <v-card-text class="tw-flex tw-justify-center">
+            <v-btn
+              icon="mdi-play"
+              variant="flat"
+              color="red-lighten-4"
+              @click="
+                () => {
+                  isActive.value = false
+                  handleAudio()
+                }
+              "
+            />
+          </v-card-text>
+        </v-card>
+      </template>
+    </v-dialog>
+
+    <div v-if="!dialog" class="tw-fixed tw-bottom-1 tw-right-2">
+      <v-btn
+        :icon="isPlaying ? 'mdi-pause' : 'mdi-play'"
+        variant="flat"
+        color="red-lighten-4"
+        @click="handleAudio"
+      />
+    </div>
   </v-app>
 </template>
 
 <script setup lang="ts">
 import { useDisplay } from 'vuetify'
+import { useSoundPlayer } from '~/composables/useSoundPlayer'
 
 const { mobile } = useDisplay()
+const { handleAudio, isPlaying } = useSoundPlayer()
 
 const drawer = ref(false)
+const dialog = ref(true)
 
 const links = ref([
   { to: '/', name: 'Inicio' },

diff --git a/pages/index.vue b/pages/index.vue
@@ -327,15 +327,6 @@
     >
       Lour y Lean
     </div>
-
-    <div class="tw-fixed tw-bottom-1 tw-right-2">
-      <v-btn
-        :icon="isPlaying ? 'mdi-pause' : 'mdi-play'"
-        variant="flat"
-        color="red-lighten-4"
-        @click="handleAudio"
-      />
-    </div>
   </div>
 </template>
 
@@ -346,7 +337,6 @@ import srcImgCena from '~/assets/images/cena-egresados.jpg'
 import srcImgJardinJapones3 from '~/assets/images/jardin-japones-3.jpg'
 import srcImgRings from '~/assets/images/rings-desktop.webp'
 import PartyIcon from '~/components/icons/PartyIcon.vue'
-import { useSoundPlayer } from '~/composables/useSoundPlayer'
 import { useTimeDifference } from '~/composables/useTimeDifference'
 import { EVENT_TIMESTAMP } from '~/constants'
 
@@ -364,7 +354,5 @@ const { remainingTime, eventDate } = useTimeDifference(
   new Date(EVENT_TIMESTAMP)
 )
 
-const { handleAudio, isPlaying } = useSoundPlayer()
-
 const eventURL = `https://calendar.google.com/calendar/render?action=TEMPLATE&text=Boda%20Lourdes%20y%20Leandro&dates=20240908T123000Z%2F20240908T210000`
 </script>