diff --git a/routes/_components/Media.html b/routes/_components/Media.html index 725f598..07b7d02 100644 --- a/routes/_components/Media.html +++ b/routes/_components/Media.html @@ -98,7 +98,7 @@ const DEFAULT_MEDIA_WIDTH = 300 const DEFAULT_MEDIA_HEIGHT = 200 - import VideoDialog from './VideoDialog.html' + import { showVideoDialog } from '../_utils/showVideoDialog' export default { helpers: { @@ -111,20 +111,7 @@ }, methods: { async onClickPlayVideoButton(media, width, height) { - let dialog = document.createElement('dialog') - dialog.classList.add('video-dialog') - document.body.appendChild(dialog) - let videoDialog = new VideoDialog({ - target: dialog, - data: { - poster: media.preview_url, - src: media.url, - dialog: dialog, - width: width, - height: height - } - }) - videoDialog.showModal() + showVideoDialog(media.preview_url, media.url, width, height) } } } diff --git a/routes/_components/VideoDialog.html b/routes/_components/VideoDialog.html index b6cca43..a202122 100644 --- a/routes/_components/VideoDialog.html +++ b/routes/_components/VideoDialog.html @@ -1,6 +1,6 @@
-
@@ -18,6 +18,7 @@ transform: translate(0, -50%); background: #000; padding: 0; + border: 3px solid var(--main-border); } :global(.video-dialog-wrapper) { display: flex; diff --git a/routes/_utils/showVideoDialog.js b/routes/_utils/showVideoDialog.js new file mode 100644 index 0000000..93623ea --- /dev/null +++ b/routes/_utils/showVideoDialog.js @@ -0,0 +1,19 @@ +import VideoDialog from '../_components/VideoDialog.html' + +export function showVideoDialog(poster, src, width, height) { + let dialog = document.createElement('dialog') + dialog.classList.add('video-dialog') + dialog.setAttribute('aria-label', 'Video dialog') + document.body.appendChild(dialog) + let videoDialog = new VideoDialog({ + target: dialog, + data: { + poster: poster, + src: src, + dialog: dialog, + width: width, + height: height + } + }) + videoDialog.showModal() +} \ No newline at end of file