From a268197dddd623fb199808e6627207f4cc23479b Mon Sep 17 00:00:00 2001
From: Florian Sylvain <f.salututo@gmail.com>
Date: Thu, 28 Mar 2024 10:38:56 +0100
Subject: [PATCH] feat: audio guide style

---
 src/components/AudioGuide.vue | 77 +++++++++++++++++++++++++++++++++++
 src/views/RoomsPage.vue       | 10 +++--
 2 files changed, 83 insertions(+), 4 deletions(-)
 create mode 100644 src/components/AudioGuide.vue

diff --git a/src/components/AudioGuide.vue b/src/components/AudioGuide.vue
new file mode 100644
index 0000000..1ca3c83
--- /dev/null
+++ b/src/components/AudioGuide.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { IonIcon } from "@ionic/vue";
+import {
+  playCircle as playIcon,
+  pauseCircle as pauseIcon,
+} from "ionicons/icons";
+
+const props = defineProps<{
+  src: string;
+}>();
+
+const audioRef = ref<HTMLAudioElement | null>(null);
+const isPlaying = ref(false);
+
+const toggleAudio = () => {
+  if (audioRef.value?.paused) {
+    audioRef.value?.play();
+  } else {
+    audioRef.value?.pause();
+  }
+  isPlaying.value = !audioRef.value?.paused;
+};
+</script>
+
+<template>
+  <audio preload="auto" ref="audioRef" :src="props.src"></audio>
+  <article class="audio-guide">
+    <button type="button" @click="toggleAudio">
+      <ion-icon :icon="isPlaying ? pauseIcon : playIcon"></ion-icon>
+    </button>
+    <aside>
+      <h5>AUDIO GUIDE</h5>
+      <p>uwu uwu uwu uwu uwu uwu uwu uwu uwu</p>
+    </aside>
+  </article>
+</template>
+
+<style scoped>
+.audio-guide {
+  display: flex;
+  gap: 8px;
+
+  padding: 8px;
+
+  color: var(--ion-color-light-tint);
+  background-color: var(--ion-color-dark);
+
+  border-radius: 8px;
+}
+
+.audio-guide button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background: none;
+  border: none;
+  outline: none;
+}
+
+.audio-guide ion-icon {
+  width: 43px;
+  height: 43px;
+  fill: var(--ion-color-light-tint);
+}
+
+.audio-guide p {
+  margin: 0;
+}
+
+h5 {
+  font-size: 16px;
+  font-weight: bold;
+  margin: 0;
+}
+</style>
diff --git a/src/views/RoomsPage.vue b/src/views/RoomsPage.vue
index 73f4cbe..8057a1d 100644
--- a/src/views/RoomsPage.vue
+++ b/src/views/RoomsPage.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { IonPage } from "@ionic/vue";
-import PagesHeader from "@/components/PagesHeader.vue";
 import { onMounted, ref } from "vue";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import { Pagination } from "swiper/modules";
 import { CapacitorHttp } from "@capacitor/core";
 
+import PagesHeader from "@/components/PagesHeader.vue";
+import AudioGuide from "@/components/AudioGuide.vue";
+
 import "swiper/css";
 import "swiper/css/pagination";
 
@@ -51,7 +53,7 @@ onMounted(async () => {
           <section>
             <h4>{{ element.fields.titre }}</h4>
             <img :src="element.fields.image[0].url" alt="hallan" />
-            <audio controls :src="element.fields.audio[0].url"></audio>
+            <AudioGuide :src="element.fields.audio[0].url" />
           </section>
         </swiper-slide>
       </swiper>
@@ -71,7 +73,7 @@ onMounted(async () => {
 section {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 16px;
 
   height: 100%;
   min-height: 0;
@@ -124,7 +126,7 @@ audio {
   display: flex;
   justify-content: center;
   gap: 8px;
-  margin-top: 16px;
+  margin-top: 32px;
 }
 
 .mySwiper {