fix(video): stop playing video when modal closed (#640)

fixes #622

routes/_components/dialog/components/ModalDialog.html

@@ -131,8 +131,9 @@
       let dialogElement = this.refs.node.parentElement
       this._a11yDialog = new A11yDialog(dialogElement)
       this._a11yDialog.on('hide', () => {
-        this._a11yDialog.destroy()
         let { id } = this.get()
+        this.fire('close')
+        this._a11yDialog.destroy()
         emit('destroyDialog', id)
         requestAnimationFrame(() => document.body.removeChild(dialogElement))
       })

routes/_components/dialog/components/VideoDialog.html

@@ -4,6 +4,7 @@
   background="var(--muted-modal-bg)"
   muted="true"
   className="video-modal-dialog"
+  on:close="onClose()"
 >
   <video {poster}
          {src}
@@ -11,6 +12,7 @@
          {height}
          aria-label="Video: {description || ''}"
          controls
+         ref:video
   />
 </ModalDialog>
 <style>
@@ -32,7 +34,12 @@
       ModalDialog
     },
     methods: {
-      show
+      show,
+      onClose () {
+        if (this.refs.video && !this.refs.video.paused) {
+          this.refs.video.pause()
+        }
+      }
     }
   }
 </script>