<template> <div> <img :src="url" /> <div class="timestamp is-size-7 has-text-weight-bold has-text-white is-family-monospace"> {{ timeCode }} </div> <span class="icon is-small"> <i :class=" 'mdi mdi-24px ' + [ issueDetected ? 'mdi-alert has-text-danger' : 'mdi-checkbox-marked-circle has-text-success' ] " ></i> </span> </div> </template> <script> import { Storage } from 'aws-amplify' export default { name: 'DetailFrameThumbnail', props: { thumbnailS3Key: { type: String, default: '' }, issueDetected: { type: Boolean, default: false }, timeCode: { type: String, default: '00:00:00:00' } }, data: function() { return { url: null } }, mounted() { Storage.get(this.thumbnailS3Key) .then(url => { this.url = url }) .catch(e => { console.log(e) //eslint-disable-line }) }, watch: { thumbnailS3Key: function(newS3Key) { Storage.get(newS3Key) .then(url => { this.url = url }) .catch(e => { console.log(e) //eslint-disable-line }) } } } </script> <style scoped> .timestamp { display: block; position: absolute; background-color: #000; border-radius: 2px; padding: 0.25rem 0.5rem 0.5rem; z-index: 1; top: -2rem; left: 0; height: 2rem; visibility: hidden; border: 1px solid black; } ul li.active .timestamp { visibility: visible; top: initial; bottom: -1.5rem; } ul li:hover .timestamp { visibility: visible; background-color: #fff; color: #000 !important; } .icon { position: absolute; width: 24px; height: 24px; bottom: 15%; left: 5%; text-shadow: 0 0 4px rgba(0, 0, 0, 0.8); } img { max-width: 100%; max-height: 80px; transition: margin-top 0.2s ease-in-out; } ul li.active div img { box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.3); margin-top: -5%; } </style>