feat [front]: trailer modal component

front/components/movieCard/full.vue

@@ -1,11 +1,16 @@
 <template>
+  <div v-if="film">
     <div class="card">
       <header class="card-content is-flex">
         <div>
           <h3 class="title is-4 is-inline mr-4">{{ film.title }}</h3>
           <div class="subtitle is-5 is-inline">{{ film.director }}</div>
           <div class="field is-grouped is-grouped-multiline mt-4">
-          <div v-for="(tag, index) of headerTags" :key="index" class="control">
+            <div
+              v-for="(tag, index) of headerTags"
+              :key="index"
+              class="control"
+            >
               <div class="tags has-addons">
                 <span v-if="tag.label" class="tag">{{ tag.label }}</span>
                 <span class="tag is-primary">{{ tag.value }}</span>
@@ -14,9 +19,11 @@
           </div>
         </div>
         <ButtonIcon
+          v-if="film.trailerLink"
           label="Bande-annonce"
           icon="ri-play-circle-fill"
           class="is-primary is-outlined ml-auto"
+          @click="showTrailerModal = true"
         />
       </header>
       <div class="is-flex">
@@ -69,6 +76,13 @@
         </div>
       </footer>
     </div>
+    <MovieCardTrailerModal
+      v-if="showTrailerModal"
+      :url="film.trailerLink"
+      :iframe-id="`film-card-${film.id}`"
+      @close="showTrailerModal = false"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">

front/components/movieCard/trailerModal.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="modal is-active">
+    <div class="modal-background" @click="$emit('close')" />
+    <div class="modal-card">
+      <section class="modal-card-body">
+        <iframe
+          v-if="url"
+          :id="`ytplayer-${iframeId}`"
+          type="text/html"
+          width="640"
+          height="360"
+          :src="url"
+          frameborder="0"
+        />
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  iframeId: {
+    type: String,
+    default: () => (Math.random() + 1).toString(36).substring(7),
+  },
+  url: { type: String, default: "" },
+})
+defineEmits(["close"])
+</script>
+
+<style scoped lang="sass">
+.modal-card
+  width: fit-content
+</style>

front/css/app.sass

@@ -6,6 +6,7 @@
 @import "bulma-list/sass/bulma-list"
 @import "bulma/sass/base/_all"
 @import "bulma/sass/components/card"
+@import "bulma/sass/components/modal"
 @import "bulma/sass/components/navbar"
 @import "bulma/sass/elements/button"
 @import "bulma/sass/elements/container"