wip

src/client/components/note.vue

@@ -40,7 +40,7 @@
 			<x-note-header class="header" :note="appearNote" :mini="true"/>
 			<div class="body" ref="noteBody">
 				<p v-if="appearNote.cw != null" class="cw">
-				<mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis"/>
+					<mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis"/>
 					<x-cw-button v-model:value="showContent" :note="appearNote"/>
 				</p>
 				<div class="content" v-show="appearNote.cw == null || showContent">

src/client/components/post-form.vue

@@ -379,7 +379,7 @@ export default defineComponent({
 		},
 
 		chooseFileFromDrive() {
-			selectDriveFile(this.$root, true).then(files => {
+			selectDriveFile(true).then(files => {
 				for (const file of files) {
 					this.attachMedia(file);
 				}

src/client/components/timeline.vue

@@ -63,7 +63,7 @@ export default defineComponent({
 			this.$emit('note');
 
 			if (this.sound) {
-				this.$root.sound(note.userId === this.$store.state.i.id ? 'noteMy' : 'note');
+				os.sound(note.userId === this.$store.state.i.id ? 'noteMy' : 'note');
 			}
 		};
 

src/client/components/ui/radio.vue

@@ -17,7 +17,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';import * as os from '@/os';
+import { defineComponent } from 'vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	model: {

src/client/components/url-preview-popup.vue

@@ -1,6 +1,8 @@
 <template>
 <div class="fgmtyycl _panel _shadow" :style="{ top: top + 'px', left: left + 'px' }">
-	<mk-url-preview :url="url"/>
+	<transition name="zoom" @after-leave="$emit('closed')">
+		<mk-url-preview :url="url" v-if="showing"/>
+	</transition>
 </div>
 </template>
 
@@ -21,7 +23,11 @@ export default defineComponent({
 		},
 		source: {
 			required: true
-		}
+		},
+		showing: {
+			type: Boolean,
+			required: true
+		},
 	},
 
 	data() {

src/client/components/url.vue

@@ -23,7 +23,6 @@ import { defineComponent } from 'vue';
 import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
 import { toUnicode as decodePunycode } from 'punycode';
 import { url as local } from '@/config';
-import MkUrlPreview from './url-preview-popup.vue';
 import { isDeviceTouch } from '@/scripts/is-device-touch';
 import * as os from '@/os';
 
@@ -54,7 +53,7 @@ export default defineComponent({
 			showTimer: null,
 			hideTimer: null,
 			checkTimer: null,
-			preview: null,
+			close: null,
 			faExternalLinkSquareAlt
 		};
 	},
@@ -68,29 +67,26 @@ export default defineComponent({
 		this.hash = decodeURIComponent(url.hash);
 	},
 	methods: {
-		showPreview() {
+		async showPreview() {
 			if (!document.body.contains(this.$el)) return;
-			if (this.preview) return;
+			if (this.close) return;
 
-			this.preview = new MkUrlPreview({
-				parent: this,
-				propsData: {
-					url: this.url,
-					source: this.$el
-				}
-			}).$mount();
+			const promise = os.popup(await import('@/components/url-preview-popup.vue'), {
+				url: this.url,
+				source: this.$el
+			});
 
-			document.body.appendChild(this.preview.$el);
+			this.close = promise.cancel;
 
 			this.checkTimer = setInterval(() => {
 				if (!document.body.contains(this.$el)) this.closePreview();
 			}, 1000);
 		},
 		closePreview() {
-			if (this.preview) {
+			if (this.close) {
 				clearInterval(this.checkTimer);
-				this.preview.destroyDom();
-				this.preview = null;
+				this.close();
+				this.close = null;
 			}
 		},
 		onMouseover() {