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

141 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>