import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import { AppImgResponsive } from '../../../img/responsive/responsive';
import AppMediaItemBackdrop from '../../../media-item/backdrop/backdrop.vue';

export const MediaBarItemMaxHeight = 150;

@Component({
	components: {
		AppImgResponsive,
		AppMediaItemBackdrop,
	},
})
export default class AppGameMediaBarItem extends Vue {
	@Prop(Object) item!: any;

	width = 'auto';
	height = 'auto';

	created() {
		// We set the dimensions on the thumbnails manually.
		// This way we can size it correct before it loads.
		if (this.item.media_type === 'image') {
			const dimensions = this.item.media_item.getDimensions(400, MediaBarItemMaxHeight);
			this.width = dimensions.width + 'px';
			this.height = dimensions.height + 'px';
		} else {
			// Video thumbnails are hardcoded to this width.
			this.width = '200px';
		}
	}
}
