pinafore/routes/_components/status/ImageDialog.html
Nolan Lawson 2fdd10c1fe fixup
2018-02-05 08:44:46 -08:00

44 lines
870 B
HTML

<ModalDialog :label :shown background="var(--main-bg)">
{{#if type === 'gifv'}}
<video
aria-label="Animated GIF: {{description || ''}}"
poster="{{poster}}"
src="{{src}}"
width="{{width}}"
height="{{height}}"
autoplay
muted
loop
playsinline
/>
{{else}}
<img
src="{{src}}"
width="{{width}}"
height="{{height}}"
alt="{{description || ''}}"
/>
{{/if}}
</ModalDialog>
<style>
:global(#modal-dialog img, #modal-dialog video) {
object-fit: contain;
overflow: hidden;
max-width: calc(100vw - 20px);
max-height: calc(100vh - 100px);
}
</style>
<script>
import ModalDialog from '../ModalDialog.html'
export default {
components: {
ModalDialog
},
methods: {
async show() {
this.set({shown: true})
}
}
}
</script>