pinafore/routes/_components/dialog/components/VideoDialog.html

45 lines
901 B
HTML
Raw Normal View History

2018-04-05 03:33:17 +00:00
<ModalDialog
{id}
{label}
2018-04-05 03:33:17 +00:00
background="var(--muted-modal-bg)"
muted="true"
className="video-modal-dialog"
on:close="onClose()"
2018-04-01 01:46:44 +00:00
>
<video {poster}
{src}
{width}
{height}
aria-label="Video: {description || ''}"
controls
ref:video
/>
</ModalDialog>
<style>
2018-04-01 01:46:44 +00:00
:global(.video-modal-dialog video) {
object-fit: contain;
max-width: calc(100vw - 20px);
2018-02-23 04:04:19 +00:00
max-height: calc(100% - 20px);
overflow: hidden;
}
</style>
<script>
2018-02-05 17:43:45 +00:00
import ModalDialog from './ModalDialog.html'
import { show } from '../helpers/showDialog'
import { oncreate } from '../helpers/onCreateDialog'
export default {
oncreate,
components: {
ModalDialog
},
methods: {
show,
onClose () {
if (this.refs.video && !this.refs.video.paused) {
this.refs.video.pause()
}
}
}
}
</script>