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

<template>
  <div v-if="film">
    <div class="card movie-card">
      <header class="card-content is-hidden-tablet">
        <h3 class="title is-4 mr-4">{{ film.title }}</h3>
        <div class="subtitle is-5">{{ film.director }}</div>
      </header>
      <header class="is-flex">
        <div
          class="poster-container is-hidden-tablet"
          :style="{ '--poster-url': `url(${film.posterLink})` }"
        >
          <figure class="image m-auto">
            <img :src="film.posterLink" alt="Affiche du film" />
          </figure>
        </div>
        <div class="card-content">
          <div class="is-flex is-flex-direction-column">
            <ButtonIcon
              v-if="film.trailerLink"
              label="Bande-annonce"
              icon="ri-play-circle-fill"
              class="is-primary is-outlined mb-4 ml-auto is-hidden-tablet"
              @click="showTrailerModal = true"
            />
            <div
              class="is-hidden-mobile mb-5 is-flex is-justify-content-space-between is-align-items-center"
            >
              <div>
                <h3 class="title is-4 is-inline mr-4 mb-0">{{ film.title }}</h3>
                <div class="subtitle is-5 is-inline mb-0">
                  {{ film.director }}
                </div>
              </div>
              <ButtonIcon
                v-if="film.trailerLink"
                label="Bande-annonce"
                icon="ri-play-circle-fill"
                class="is-primary is-outlined"
                @click="showTrailerModal = true"
              />
            </div>
            <div class="field is-grouped is-grouped-multiline">
              <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>
        </div>
      </header>
      <div class="is-flex">
        <div
          class="poster-container is-hidden-mobile"
          :style="{ '--poster-url': `url(${film.posterLink})` }"
        >
          <figure class="image m-auto">
            <img :src="film.posterLink" alt="Affiche du film" />
          </figure>
        </div>
        <div class="card-content">
          <div class="content movie-content">
            <p
              v-if="film.projectionComment"
              class="block has-text-centered has-text-weight-bold is-italic"
            >
              {{ film.projectionComment }}
            </p>
            <p v-if="film.actors && film.actors.length" class="block">
              <span class="has-text-weight-bold">Acteurs :</span>
              {{ film.actors.join(", ") }}
            </p>
            <p v-if="film.synopsis" class="block">
              <span class="has-text-weight-bold">Synopsis :</span>
              {{ film.synopsis }}
            </p>
          </div>
        </div>
      </div>
      <footer class="card-content is-flex">
        <time
          class="title is-4 mb-4 is-hidden-tablet"
          :datetime="film.projectionDate"
        >
          {{ prettyDate.short(film.projectionDate) }}
        </time>
        <time
          class="title is-4 mb-0 is-hidden-mobile"
          :datetime="film.projectionDate"
        >
          {{ prettyDate.full(film.projectionDate) }}
        </time>
        <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>
            <a
              v-if="film.facebookEventLink"
              :href="film.facebookEventLink"
              rel="noopener noreferrer"
              target="_blank"
              tabindex="-1"
            >
              <ButtonIcon
                label="Événement Facebook"
                icon="ri-facebook-box-fill"
                class="is-outlined is-primary"
              />
            </a>
            <!--  TODO          
            <ButtonIcon
                v-if="film.icsDownload"
                label="Ajouter au calendrier"
                icon="ri-calendar-event-fill"
                class="is-outlined is-primary"
              />
              -->
          </template>
        </div>
      </footer>
    </div>
    <MovieCardTrailerModal
      v-if="showTrailerModal"
      :url="film.trailerLink"
      :iframe-id="`film-card-${film.id}`"
      @close="showTrailerModal = false"
    />
    <!-- TODO responsive modal video cf MSF -->
  </div>
</template>

<script setup lang="ts">
import { Film } from "~/composables/types"
import { PropType } from "@vue/runtime-core"
import { prettyDate } from "~/composables/strUtils"

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

function generateTags(film: Film) {
  const res = []
  if ("isInColor" in film && film.isInColor != null)
    res.push({
      value: film.isInColor ? "Couleur" : "Noir et blanc",
    })
  if (film?.languageSubtitles)
    res.push({ label: "Langue", value: film.languageSubtitles })
  if (film?.duration)
    res.push({
      label: "Durée",
      value: film.duration,
    })
  if (film?.releaseYear)
    res.push({ label: "Sortie", value: film.releaseYear.toString() })
  if (film?.originCountry)
    res.push({ label: "Pays", value: film.originCountry })
  return res
}

const headerTags = computed<{ label?: string; value: string }[]>(() =>
  generateTags(props.film)
)
</script>

<style scoped lang="sass">
.movie-card .poster-container
  max-width: 50%
  width: 25%
  // ?
  // TODO fit poster size
  @include tablet()
    width: 200px

.card .card-content .content.movie-content
  height: 100%
  display: flex
  flex-direction: column
  white-space: pre-wrap

.card-content
  @include mobile()
    padding: 1rem

footer.card-content
  flex-direction: column
  text-align: center
  justify-items: center
  @include tablet()
    flex-direction: row-reverse
    justify-content: space-between
    justify-items: auto
</style>