Improve tweet embed

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

@@ -2,9 +2,11 @@
 <iframe v-if="youtubeId" type="text/html" height="250"
 	:src="`https://www.youtube.com/embed/${youtubeId}?origin=${misskeyUrl}`"
 	frameborder="0"/>
-<blockquote v-else-if="tweetUrl" class="twitter-tweet" ref="tweet">
-	<a :href="url"></a>
-</blockquote>
+<div v-else-if="tweetUrl && detail" class="twitter">
+	<blockquote ref="tweet" class="twitter-tweet" :data-theme="$store.state.device.darkmode ? 'dark' : null">
+		<a :href="url"></a>
+	</blockquote>
+</div>
 <div v-else class="mk-url-preview">
 	<a :href="url" target="_blank" :title="url" v-if="!fetching">
 		<div class="thumbnail" v-if="thumbnail" :style="`background-image: url(${thumbnail})`"></div>
@@ -27,7 +29,17 @@ import Vue from 'vue';
 import { url as misskeyUrl } from '../../../config';
 
 export default Vue.extend({
-	props: ['url'],
+	props: {
+		url: {
+			type: String,
+			require: true
+		},
+		detail: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
 	data() {
 		return {
 			fetching: true,
@@ -48,7 +60,7 @@ export default Vue.extend({
 			this.youtubeId = url.searchParams.get('v');
 		} else if (url.hostname == 'youtu.be') {
 			this.youtubeId = url.pathname;
-		} else if (url.hostname == 'twitter.com' && /^\/.+\/status(es)?\/\d+/.test(url.pathname)) {
+		} else if (this.detail && url.hostname == 'twitter.com' && /^\/.+\/status(es)?\/\d+/.test(url.pathname)) {
 			this.tweetUrl = url;
 			const twttr = (window as any).twttr || {};
 			const loadTweet = () => twttr.widgets.load(this.$refs.tweet);

src/client/app/desktop/views/components/note-detail.vue

@@ -46,7 +46,7 @@
 				<mk-media-list :media-list="p.media" :raw="true"/>
 			</div>
 			<mk-poll v-if="p.poll" :note="p"/>
-			<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
+			<mk-url-preview v-for="url in urls" :url="url" :key="url" :detail="true"/>
 			<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% %i18n:@location%</a>
 			<div class="map" v-if="p.geo" ref="map"></div>
 			<div class="renote" v-if="p.renote">

src/client/app/mobile/views/components/note-detail.vue

@@ -44,7 +44,7 @@
 				<mk-media-list :media-list="p.media" :raw="true"/>
 			</div>
 			<mk-poll v-if="p.poll" :note="p"/>
-			<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
+			<mk-url-preview v-for="url in urls" :url="url" :key="url" :detail="true"/>
 			<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% %i18n:@location%</a>
 			<div class="map" v-if="p.geo" ref="map"></div>
 			<div class="renote" v-if="p.renote">