From bf654c6f42179612c19d70bf1970f930efc25d54 Mon Sep 17 00:00:00 2001
From: Aya Morisawa <AyaMorisawa4869@gmail.com>
Date: Tue, 29 Oct 2019 09:51:19 +0900
Subject: Componentize modal (#5386)

---
 .../views/components/media-video-dialog.vue        | 55 ++++------------------
 1 file changed, 10 insertions(+), 45 deletions(-)

(limited to 'src/client/app/desktop')

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>
-- 
cgit v1.2.3-freya