feat [front]: trailer modal component
This commit is contained in:
parent
2068695dc9
commit
7e495ea7cb
|
@ -1,73 +1,87 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div v-if="film">
|
||||||
<header class="card-content is-flex">
|
<div class="card">
|
||||||
<div>
|
<header class="card-content is-flex">
|
||||||
<h3 class="title is-4 is-inline mr-4">{{ film.title }}</h3>
|
<div>
|
||||||
<div class="subtitle is-5 is-inline">{{ film.director }}</div>
|
<h3 class="title is-4 is-inline mr-4">{{ film.title }}</h3>
|
||||||
<div class="field is-grouped is-grouped-multiline mt-4">
|
<div class="subtitle is-5 is-inline">{{ film.director }}</div>
|
||||||
<div v-for="(tag, index) of headerTags" :key="index" class="control">
|
<div class="field is-grouped is-grouped-multiline mt-4">
|
||||||
<div class="tags has-addons">
|
<div
|
||||||
<span v-if="tag.label" class="tag">{{ tag.label }}</span>
|
v-for="(tag, index) of headerTags"
|
||||||
<span class="tag is-primary">{{ tag.value }}</span>
|
: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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<ButtonIcon
|
||||||
<ButtonIcon
|
v-if="film.trailerLink"
|
||||||
label="Bande-annonce"
|
label="Bande-annonce"
|
||||||
icon="ri-play-circle-fill"
|
icon="ri-play-circle-fill"
|
||||||
class="is-primary is-outlined ml-auto"
|
class="is-primary is-outlined ml-auto"
|
||||||
/>
|
@click="showTrailerModal = true"
|
||||||
</header>
|
/>
|
||||||
<div class="is-flex">
|
</header>
|
||||||
<div
|
<div class="is-flex">
|
||||||
class="poster-container"
|
<div
|
||||||
:style="{ '--poster-url': `url(${film.posterLink})` }"
|
class="poster-container"
|
||||||
>
|
:style="{ '--poster-url': `url(${film.posterLink})` }"
|
||||||
<figure class="image my-auto">
|
>
|
||||||
<img :src="film.posterLink" alt="Affiche du film" />
|
<figure class="image my-auto">
|
||||||
</figure>
|
<img :src="film.posterLink" alt="Affiche du film" />
|
||||||
</div>
|
</figure>
|
||||||
<div class="card-content">
|
</div>
|
||||||
<div class="content">
|
<div class="card-content">
|
||||||
<p class="block">
|
<div class="content">
|
||||||
<span class="has-text-weight-bold">Acteurs :</span>
|
<p class="block">
|
||||||
{{ film.actors.join(", ") }}
|
<span class="has-text-weight-bold">Acteurs :</span>
|
||||||
</p>
|
{{ film.actors.join(", ") }}
|
||||||
<p class="block">
|
</p>
|
||||||
<span class="has-text-weight-bold">Synopsis :</span>
|
<p class="block">
|
||||||
{{ film.synopsis }}
|
<span class="has-text-weight-bold">Synopsis :</span>
|
||||||
</p>
|
{{ film.synopsis }}
|
||||||
<!-- TODO additional info about partnership etc -->
|
</p>
|
||||||
|
<!-- TODO additional info about partnership etc -->
|
||||||
|
</div>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
<footer class="card-content is-flex">
|
<MovieCardTrailerModal
|
||||||
<div class="buttons">
|
v-if="showTrailerModal"
|
||||||
<template v-if="isPast">
|
:url="film.trailerLink"
|
||||||
<ButtonIcon
|
:iframe-id="`film-card-${film.id}`"
|
||||||
label="Lire notre analyse"
|
@close="showTrailerModal = false"
|
||||||
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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
34
front/components/movieCard/trailerModal.vue
Normal file
34
front/components/movieCard/trailerModal.vue
Normal file
|
@ -0,0 +1,34 @@
|
||||||
|
<template>
|
||||||
|
<div class="modal is-active">
|
||||||
|
<div class="modal-background" @click="$emit('close')" />
|
||||||
|
<div class="modal-card">
|
||||||
|
<section class="modal-card-body">
|
||||||
|
<iframe
|
||||||
|
v-if="url"
|
||||||
|
:id="`ytplayer-${iframeId}`"
|
||||||
|
type="text/html"
|
||||||
|
width="640"
|
||||||
|
height="360"
|
||||||
|
:src="url"
|
||||||
|
frameborder="0"
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
defineProps({
|
||||||
|
iframeId: {
|
||||||
|
type: String,
|
||||||
|
default: () => (Math.random() + 1).toString(36).substring(7),
|
||||||
|
},
|
||||||
|
url: { type: String, default: "" },
|
||||||
|
})
|
||||||
|
defineEmits(["close"])
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="sass">
|
||||||
|
.modal-card
|
||||||
|
width: fit-content
|
||||||
|
</style>
|
|
@ -6,6 +6,7 @@
|
||||||
@import "bulma-list/sass/bulma-list"
|
@import "bulma-list/sass/bulma-list"
|
||||||
@import "bulma/sass/base/_all"
|
@import "bulma/sass/base/_all"
|
||||||
@import "bulma/sass/components/card"
|
@import "bulma/sass/components/card"
|
||||||
|
@import "bulma/sass/components/modal"
|
||||||
@import "bulma/sass/components/navbar"
|
@import "bulma/sass/components/navbar"
|
||||||
@import "bulma/sass/elements/button"
|
@import "bulma/sass/elements/button"
|
||||||
@import "bulma/sass/elements/container"
|
@import "bulma/sass/elements/container"
|
||||||
|
|
Loading…
Reference in a new issue