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