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

136 lines
4.2 KiB
Vue

<template>
<div v-if="film">
<div class="card movie-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 m-auto">
<img :src="film.posterLink" alt="Affiche du film" />
</figure>
</div>
<div class="card-content">
<div class="content">
<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>
<!-- 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>
<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>
<ButtonIcon
v-if="film.icsDownload"
label="Ajouter au calendrier"
icon="ri-calendar-event-fill"
class="is-outlined is-primary"
/>
</template>
</div>
<time class="ml-auto title is-4" :datetime="film.projectionDate">
{{ prettyDate.full(film.projectionDate) }}
</time>
</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"
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
width: 200px
</style>