You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
1.8 KiB
64 lines
1.8 KiB
<template>
|
|
<div class="poster">
|
|
<div class="poster-padding"></div>
|
|
<img v-if="src" class="poster-content w-full h-full object-cover" loading="lazy" ref="poster"
|
|
:src="`/api/tmdb/image/${size}${src}`" @load="onPosterLoad">
|
|
<div v-else class="poster-content bg-gray-300 text-gray-500">
|
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="image" class="svg-inline--fa fa-image fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z"></path></svg>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
import ProgressRing from './ProgressRing.vue'
|
|
import { defineComponent } from "vue";
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
ProgressRing,
|
|
},
|
|
data() {
|
|
return {
|
|
isLoaded: false
|
|
}
|
|
},
|
|
methods: {
|
|
onPosterLoad() {
|
|
this.isLoaded = true;
|
|
this.$emit("onLoad", this.$refs["poster"]);
|
|
}
|
|
},
|
|
props: {
|
|
size: {
|
|
type: String,
|
|
default: "w342"
|
|
},
|
|
src: String
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="css">
|
|
.poster {
|
|
@apply relative overflow-hidden;
|
|
}
|
|
.poster > .poster-padding {
|
|
padding-top: 143.885%;
|
|
}
|
|
.poster > .poster-decal {
|
|
@apply absolute z-10 top-0 w-full shadow-sm;
|
|
padding: 4%;
|
|
background: rgb(31, 35, 38);
|
|
transform: rotate(-45deg) translateX(-28%) translateY(-100%);
|
|
}
|
|
.poster > .poster-decal > img {
|
|
@apply w-1/3 mx-auto;
|
|
}
|
|
.poster > .poster-content {
|
|
@apply absolute inset-0 flex justify-center items-center z-0 shadow-sm;
|
|
}
|
|
.poster > .poster-content > svg {
|
|
width: 35%;
|
|
}
|
|
</style>
|