142 lines
4.4 KiB
Vue
142 lines
4.4 KiB
Vue
<template>
|
|
<div v-if="film">
|
|
<div class="card movie-card">
|
|
<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="is-flex is-flex-direction-column">
|
|
<div class="card-content is-flex-grow-1">
|
|
<div>
|
|
<div class="is-flex movie-card-header">
|
|
<div>
|
|
<h3 class="title is-5 mr-4">{{ film.title }}</h3>
|
|
<div class="subtitle is-6">{{ film.director }}</div>
|
|
</div>
|
|
<ButtonIcon
|
|
v-if="film.trailerLink"
|
|
label="Bande-annonce"
|
|
icon="ri-play-circle-fill"
|
|
class="is-primary is-inverted is-small ml-auto"
|
|
short
|
|
@click="showTrailerModal = true"
|
|
/>
|
|
</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>
|
|
</div>
|
|
<footer class="card-content is-flex is-flex-grow-0">
|
|
<div class="buttons">
|
|
<template v-if="isPast">
|
|
<ButtonIcon
|
|
label="Lire notre analyse"
|
|
icon="ri-double-quotes-l"
|
|
class="is-inverted is-small is-primary"
|
|
short
|
|
/>
|
|
</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-inverted is-small is-primary"
|
|
short
|
|
/>
|
|
</a>
|
|
<ButtonIcon
|
|
v-if="film.icsDownload"
|
|
label="Ajouter au calendrier"
|
|
icon="ri-calendar-event-fill"
|
|
class="is-inverted is-small is-primary"
|
|
short
|
|
/>
|
|
</template>
|
|
</div>
|
|
<time class="ml-auto title is-5" :datetime="film.projectionDate">
|
|
{{ prettyDate.short(film.projectionDate) }}
|
|
</time>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</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
|
|
height: 100%
|
|
> *
|
|
height: 100%
|
|
.movie-card-header.button
|
|
height: fit-content
|
|
.poster-container
|
|
width: 152px
|
|
footer.card-content
|
|
padding: 0.5rem 1.5rem
|
|
</style>
|