diff options
| author | Aya Morisawa <AyaMorisawa4869@gmail.com> | 2019-10-29 09:51:19 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2019-10-29 09:51:19 +0900 |
| commit | bf654c6f42179612c19d70bf1970f930efc25d54 (patch) | |
| tree | 309a51f55d04b3dc39ef304952e72a9a4828977a /src/client/app/desktop/views/components | |
| parent | Make issue process of registration tickets better (#5545) (diff) | |
| download | sharkey-bf654c6f42179612c19d70bf1970f930efc25d54.tar.gz sharkey-bf654c6f42179612c19d70bf1970f930efc25d54.tar.bz2 sharkey-bf654c6f42179612c19d70bf1970f930efc25d54.zip | |
Componentize modal (#5386)
Diffstat (limited to 'src/client/app/desktop/views/components')
| -rw-r--r-- | src/client/app/desktop/views/components/media-video-dialog.vue | 55 |
1 files changed, 10 insertions, 45 deletions
diff --git a/src/client/app/desktop/views/components/media-video-dialog.vue b/src/client/app/desktop/views/components/media-video-dialog.vue index 803350506a..9d2d0527ef 100644 --- a/src/client/app/desktop/views/components/media-video-dialog.vue +++ b/src/client/app/desktop/views/components/media-video-dialog.vue @@ -1,23 +1,15 @@ <template> -<div class="mk-media-video-dialog" v-hotkey.global="keymap"> - <div class="bg" @click="close"></div> - <video :src="video.url" :title="video.name" controls autoplay ref="video" @volumechange="volumechange"/> -</div> +<ui-modal v-hotkey.global="keymap"> + <video :src="video.url" :title="video.name" controls autoplay ref="video" @volumechange="volumechange" /> +</ui-modal> </template> <script lang="ts"> import Vue from 'vue'; -import anime from 'animejs'; export default Vue.extend({ props: ['video', 'start'], mounted() { - anime({ - targets: this.$el, - opacity: 1, - duration: 100, - easing: 'linear' - }); const videoTag = this.$refs.video as HTMLVideoElement; if (this.start) videoTag.currentTime = this.start videoTag.volume = this.$store.state.device.mediaVolume; @@ -31,13 +23,6 @@ export default Vue.extend({ }, methods: { close() { - anime({ - targets: this.$el, - opacity: 0, - duration: 100, - easing: 'linear', - complete: () => this.destroyDom() - }); }, volumechange() { const videoTag = this.$refs.video as HTMLVideoElement; @@ -48,35 +33,15 @@ export default Vue.extend({ </script> <style lang="stylus" scoped> -.mk-media-video-dialog - display block +video position fixed - z-index 2048 + z-index 2 top 0 + right 0 + bottom 0 left 0 - width 100% - height 100% - opacity 0 - - > .bg - display block - position fixed - z-index 1 - top 0 - left 0 - width 100% - height 100% - background rgba(#000, 0.7) - - > video - position fixed - z-index 2 - top 0 - right 0 - bottom 0 - left 0 - max-width 80vw - max-height 80vh - margin auto + max-width 80vw + max-height 80vh + margin auto </style> |