cineclub-site/front/components/movieCard/full.vue

<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 class="tags has-addons">
                <span v-if="tag.label" class="tag">{{ tag.label }}</span>
                <span class="tag is-primary">{{ tag.value }}</span>
              </div>
            </div>
          </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">
        <div
          class="poster-container"
          :style="{ '--poster-url': `url(${film.posterLink})` }"
        >
          <figure class="image my-auto">
            <img :src="film.posterLink" alt="Affiche du film" />
          </figure>
        </div>
        <div class="card-content">
          <div class="content">
            <p class="block">
              <span class="has-text-weight-bold">Acteurs :</span>
              {{ film.actors.join(", ") }}
            </p>
            <p class="block">
              <span class="has-text-weight-bold">Synopsis :</span>
              {{ film.synopsis }}
            </p>
            <!-- TODO additional info about partnership etc -->
          </div>
        </div>
      </div>
      <footer class="card-content is-flex">
        <div class="buttons">
          <template v-if="isPast">
            <ButtonIcon
              label="Lire notre analyse"
              icon="ri-double-quotes-l"
              class="is-outlined is-primary"
            />
          </template>
          <template v-else>
            <ButtonIcon
              label="Événement Facebook"
              icon="ri-facebook-box-fill"
              class="is-outlined is-primary"
            />
            <ButtonIcon
              label="Ajouter au calendrier"
              icon="ri-calendar-event-fill"
              class="is-outlined is-primary"
            />
          </template>
        </div>
        <div class="ml-auto title is-4">
          {{ film.projectionDate }}
        </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">
import { Film } from "~/composables/types"
import { PropType } from "@vue/runtime-core"

const props = defineProps({
  film: { type: Object as PropType<Film>, required: true },
})
const isPast = ref<boolean>(false)

const headerTags = ref<{ label?: string; value: string }[]>([
  {
    value: film.value.isInColor ? "Couleur" : "Noir et blanc",
  },
  { label: "Langue", value: film.value.languageSubtitles },
  {
    label: "Durée",
    value: film.value.duration,
  },
  { label: "Sortie", value: film.value.releaseYear.toString() },
  { label: "Pays", value: film.value.originCountry },
])
</script>

<style scoped lang="sass">
header
  border-bottom: $grey-lightest 1px solid
footer
  border-top: $grey-lightest 1px solid
  .buttons
    margin-bottom: 0
    .button
      margin-bottom: 0

.poster-container
  display: flex
  flex-shrink: 0
  position: relative
  width: 200px
  overflow: hidden
  &::before
    content: ''
    position: absolute
    top: 0
    right: 0
    bottom: 0
    left: 0
    filter: blur(15px)
    background-image: var(--poster-url)
    background-size: cover
    background-position: center
    margin: -10px
  .image img
    object-fit: contain
</style>