Merge branch 'develop'

6 files changed, 80 insertions, 54 deletions

diff --git a/src/client/components/emoji-picker-dialog.vue b/src/client/components/emoji-picker-dialog.vue
index affc1ccf39..4b165d9f91 100644
--- a/src/client/components/emoji-picker-dialog.vue
+++ b/src/client/components/emoji-picker-dialog.vue
@@ -1,6 +1,6 @@
 <template>
-<MkModal ref="modal" :manual-showing="manualShowing" :src="src" @click="$refs.modal.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')" v-slot="{ showing }">
-	<MkEmojiPicker v-show="showing !== false" :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen" ref="picker"/>
+<MkModal ref="modal" :manual-showing="manualShowing" :src="src" @click="$refs.modal.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')">
+	<MkEmojiPicker :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen" ref="picker"/>
 </MkModal>
 </template>
 
diff --git a/src/client/components/emoji-picker.vue b/src/client/components/emoji-picker.vue
index f7eaeb2bfe..99d6c8a330 100644
--- a/src/client/components/emoji-picker.vue
+++ b/src/client/components/emoji-picker.vue
@@ -279,6 +279,7 @@ export default defineComponent({
 
 		reset() {
 			this.$refs.emojis.scrollTop = 0;
+			this.q = '';
 		},
 
 		getKey(emoji: any) {
diff --git a/src/client/components/media-video.vue b/src/client/components/media-video.vue
index 3788947206..bdd3983e1e 100644
--- a/src/client/components/media-video.vue
+++ b/src/client/components/media-video.vue
@@ -6,22 +6,24 @@
 	</div>
 </div>
 <div class="kkjnbbplepmiyuadieoenjgutgcmtsvu" v-else>
-	<i><Fa :icon="faEyeSlash" @click="hide = true"/></i>
-	<a
-		:href="video.url"
-		rel="nofollow noopener"
-		target="_blank"
-		:style="imageStyle"
+	<video
+		:poster="video.thumbnailUrl"
 		:title="video.name"
+		crossorigin="anonymous"
+		preload="none"
+		controls
 	>
-		<Fa :icon="faPlayCircle"/>
-	</a>
+		<source 
+			:src="video.url" 
+			:type="video.type"
+		>
+	</video>
+	<i><Fa :icon="faEyeSlash" @click="hide = true"/></i>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faPlayCircle } from '@fortawesome/free-regular-svg-icons';
 import { faExclamationTriangle, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@/os';
 
@@ -35,18 +37,10 @@ export default defineComponent({
 	data() {
 		return {
 			hide: true,
-			faPlayCircle,
 			faExclamationTriangle,
 			faEyeSlash
 		};
 	},
-	computed: {
-		imageStyle(): any {
-			return {
-				'background-image': `url(${this.video.thumbnailUrl})`
-			};
-		}
-	},
 	created() {
 		this.hide = (this.$store.state.nsfw === 'force') ? true : this.video.isSensitive && (this.$store.state.nsfw !== 'ignore');
 	},
@@ -72,7 +66,7 @@ export default defineComponent({
 		right: 12px;
 	}
 
-	> a {
+	> video {
 		display: flex;
 		justify-content: center;
 		align-items: center;
diff --git a/src/client/components/note-detailed.vue b/src/client/components/note-detailed.vue
index b5bc054e5e..1ef3f43389 100644
--- a/src/client/components/note-detailed.vue
+++ b/src/client/components/note-detailed.vue
@@ -140,6 +140,7 @@ import { checkWordMute } from '@/scripts/check-word-mute';
 import { userPage } from '@/filters/user';
 import * as os from '@/os';
 import { noteActions, noteViewInterruptors } from '@/store';
+import { reactionPicker } from '@/scripts/reaction-picker';
 
 function markRawAll(...xs) {
 	for (const x of xs) {
@@ -523,7 +524,7 @@ export default defineComponent({
 		react(viaKeyboard = false) {
 			pleaseLogin();
 			this.blur();
-			os.pickReaction(this.$refs.reactButton, reaction => {
+			reactionPicker.show(this.$refs.reactButton, reaction => {
 				os.api('notes/reactions/create', {
 					noteId: this.appearNote.id,
 					reaction: reaction
diff --git a/src/client/components/note.vue b/src/client/components/note.vue
index bc2f87fe85..65e09b7802 100644
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -122,6 +122,7 @@ import { checkWordMute } from '@/scripts/check-word-mute';
 import { userPage } from '@/filters/user';
 import * as os from '@/os';
 import { noteActions, noteViewInterruptors } from '@/store';
+import { reactionPicker } from '@/scripts/reaction-picker';
 
 function markRawAll(...xs) {
 	for (const x of xs) {
@@ -498,7 +499,7 @@ export default defineComponent({
 		react(viaKeyboard = false) {
 			pleaseLogin();
 			this.blur();
-			os.pickReaction(this.$refs.reactButton, reaction => {
+			reactionPicker.show(this.$refs.reactButton, reaction => {
 				os.api('notes/reactions/create', {
 					noteId: this.appearNote.id,
 					reaction: reaction
diff --git a/src/client/components/ui/modal.vue b/src/client/components/ui/modal.vue
index 23c153e5f7..ff5b98d39f 100644
--- a/src/client/components/ui/modal.vue
+++ b/src/client/components/ui/modal.vue
@@ -1,14 +1,12 @@
 <template>
-<div class="mk-modal" v-hotkey.global="keymap" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
-	<transition :name="$store.state.animation ? 'modal-bg' : ''" appear>
-		<div class="bg _modalBg" v-if="manualShowing != null ? manualShowing : showing" @click="onBgClick"></div>
-	</transition>
-	<div class="content" :class="{ popup, fixed, top: position === 'top' }" @click.self="onBgClick" ref="content">
-		<transition :name="$store.state.animation ? popup ? 'modal-popup-content' : 'modal-content' : ''" appear @after-leave="$emit('closed')" @enter="$emit('opening')" @after-enter="childRendered">
-			<slot v-if="manualShowing != null ? true : showing" v-bind:showing="manualShowing"></slot>
-		</transition>
+<transition :name="$store.state.animation ? popup ? 'modal-popup' : 'modal' : ''" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered">
+	<div v-show="manualShowing != null ? manualShowing : showing" class="mk-modal" v-hotkey.global="keymap" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
+		<div class="bg _modalBg" @click="onBgClick"></div>
+		<div class="content" :class="{ popup, fixed, top: position === 'top' }" @click.self="onBgClick" ref="content">
+			<slot></slot>
+		</div>
 	</div>
-</div>
+</transition>
 </template>
 
 <script lang="ts">
@@ -85,6 +83,8 @@ export default defineComponent({
 
 			const popover = this.$refs.content as any;
 
+			if (popover == null) return;
+
 			const rect = this.src.getBoundingClientRect();
 			
 			const width = popover.offsetWidth;
@@ -163,42 +163,71 @@ export default defineComponent({
 		onBgClick() {
 			if (this.contentClicking) return;
 			this.$emit('click');
+		},
+
+		onClosed() {
+			this.$emit('closed');
 		}
 	}
 });
 </script>
 
-<style>
-.modal-popup-content-enter-active, .modal-popup-content-leave-active,
-.modal-content-enter-from, .modal-content-leave-to {
-  transform-origin: var(--transformOrigin);
+<style lang="scss">
+.modal-popup-enter-active, .modal-popup-leave-active,
+.modal-enter-from, .modal-leave-to {
+	> .content {
+		transform-origin: var(--transformOrigin);
+	}
 }
 </style>
 
 <style lang="scss" scoped>
-.modal-bg-enter-active, .modal-bg-leave-active {
-	transition: opacity 0.3s !important;
-}
-.modal-bg-enter-from, .modal-bg-leave-to {
-	opacity: 0;
-}
-
-.modal-content-enter-active, .modal-content-leave-active {
+.modal-enter-active, .modal-leave-active {
+	// CSS的には無意味だけどこれが無いとVueが認識しない
 	transition: opacity 0.3s, transform 0.3s !important;
+
+	> .bg {
+		transition: opacity 0.3s !important;
+	}
+
+	> .content {
+		transition: opacity 0.3s, transform 0.3s !important;
+	}
 }
-.modal-content-enter-from, .modal-content-leave-to {
-	pointer-events: none;
-	opacity: 0;
-	transform: scale(0.9);
+.modal-enter-from, .modal-leave-to {
+	> .bg {
+		opacity: 0;
+	}
+
+	> .content {
+		pointer-events: none;
+		opacity: 0;
+		transform: scale(0.9);
+	}
 }
 
-.modal-popup-content-enter-active, .modal-popup-content-leave-active {
+.modal-popup-enter-active, .modal-popup-leave-active {
+	// CSS的には無意味だけどこれが無いとVueが認識しない
 	transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
+
+	> .bg {
+		transition: opacity 0.3s !important;
+	}
+
+	> .content {
+		transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
+	}
 }
-.modal-popup-content-enter-from, .modal-popup-content-leave-to {
-	pointer-events: none;
-	opacity: 0;
-	transform: scale(0.9);
+.modal-popup-enter-from, .modal-popup-leave-to {
+	> .bg {
+		opacity: 0;
+	}
+
+	> .content {
+		pointer-events: none;
+		opacity: 0;
+		transform: scale(0.9);
+	}
 }
 
 .mk-modal {
@@ -227,12 +256,12 @@ export default defineComponent({
 			mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,0) 100%);
 		}
 
-		> * {
+		> ::v-deep(*) {
 			margin: auto;
 		}
 
 		&.top {
-			> * {
+			> ::v-deep(*) {
 				margin-top: 0;
 			}
 		}