wip

src/web/app/common/views/components/url-preview.vue

@@ -1,5 +1,5 @@
 <template>
-	<a :href="url" target="_blank" :title="url" v-if="!fetching">
+<a class="mk-url-preview" :href="url" target="_blank" :title="url" v-if="!fetching">
 	<div class="thumbnail" v-if="thumbnail" :style="`background-image: url(${thumbnail})`"></div>
 	<article>
 		<header>
@@ -14,8 +14,10 @@
 </a>
 </template>
 
-<script lang="typescript">
-	export default {
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
 	props: ['url'],
 	data() {
 		return {
@@ -40,16 +42,13 @@
 			});
 		});
 	}
-	};
+});
 </script>
 
 <style lang="stylus" scoped>
-	:scope
+.mk-url-preview
 	display block
 	font-size 16px
-
-		> a
-			display block
 	border solid 1px #eee
 	border-radius 4px
 	overflow hidden
@@ -109,8 +108,6 @@
 
 	@media (max-width 500px)
 		font-size 8px
-
-			> a
 		border none
 
 		> .thumbnail

src/web/app/desktop/views/components/timeline-post.vue

@@ -34,6 +34,7 @@
 					<a class="reply" v-if="p.reply">%fa:reply%</a>
 					<mk-post-html :ast="p.ast" :i="$root.$data.os.i"/>
 					<a class="quote" v-if="p.repost">RP:</a>
+					<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
 				</div>
 				<div class="media" v-if="p.media">
 					<mk-images :images="p.media"/>
@@ -101,6 +102,15 @@ export default Vue.extend({
 		},
 		url(): string {
 			return `/${this.p.user.username}/${this.p.id}`;
+		},
+		urls(): string[] {
+			if (this.p.ast) {
+				return this.p.ast
+					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
+					.map(t => t.url);
+			} else {
+				return null;
+			}
 		}
 	},
 	created() {
@@ -113,19 +123,6 @@ export default Vue.extend({
 		if (this.$root.$data.os.isSignedIn) {
 			this.connection.on('_connected_', this.onStreamConnected);
 		}
-
-		if (this.p.text) {
-			const tokens = this.p.ast;
-
-			// URLをプレビュー
-			tokens
-			.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
-			.map(t => {
-				riot.mount(this.$refs.text.appendChild(document.createElement('mk-url-preview')), {
-					url: t.url
-				});
-			});
-		}
 	},
 	beforeDestroy() {
 		this.decapture(true);