From bf186de56c6324c57a045523572604486959e9e5 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 5 Jul 2022 23:13:28 +0900
Subject: [PATCH] chore(client): rendering performance tweak a bit

---
 packages/client/src/components/remote-caution.vue |  4 ++--
 packages/client/src/components/url-preview.vue    | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/components/remote-caution.vue b/packages/client/src/components/remote-caution.vue
index aa623f0fb..130a0249b 100644
--- a/packages/client/src/components/remote-caution.vue
+++ b/packages/client/src/components/remote-caution.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="jmgmzlwq _block"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i>{{ $ts.remoteUserCaution }}<a :href="href" rel="nofollow noopener" target="_blank">{{ $ts.showOnRemote }}</a></div>
+<div class="jmgmzlwq _block"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i>{{ $ts.remoteUserCaution }}<a class="link" :href="href" rel="nofollow noopener" target="_blank">{{ $ts.showOnRemote }}</a></div>
 </template>
 
 <script lang="ts" setup>
@@ -15,7 +15,7 @@ defineProps<{
 	background: var(--infoWarnBg);
 	color: var(--infoWarnFg);
 
-	> a {
+	> .link {
 		margin-left: 4px;
 		color: var(--accent);
 	}
diff --git a/packages/client/src/components/url-preview.vue b/packages/client/src/components/url-preview.vue
index 6c593c7b4..e15d28a38 100644
--- a/packages/client/src/components/url-preview.vue
+++ b/packages/client/src/components/url-preview.vue
@@ -1,14 +1,14 @@
 <template>
 <div v-if="playerEnabled" class="player" :style="`padding: ${(player.height || 0) / (player.width || 1) * 100}% 0 0`">
 	<button class="disablePlayer" :title="$ts.disablePlayer" @click="playerEnabled = false"><i class="fas fa-times"></i></button>
-	<iframe :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" :width="player.width || '100%'" :heigth="player.height || 250" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen />
+	<iframe :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" :width="player.width || '100%'" :heigth="player.height || 250" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/>
 </div>
 <div v-else-if="tweetId && tweetExpanded" ref="twitter" class="twitter">
 	<iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', width: '100%', height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${$store.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"></iframe>
 </div>
 <div v-else v-size="{ max: [400, 350] }" class="mk-url-preview">
 	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
-		<component :is="self ? 'MkA' : 'a'" v-if="!fetching" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
+		<component :is="self ? 'MkA' : 'a'" v-if="!fetching" class="link" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
 			<div v-if="thumbnail" class="thumbnail" :style="`background-image: url('${thumbnail}')`">
 				<button v-if="!playerEnabled && player.url" class="_button" :title="$ts.enablePlayer" @click.prevent="playerEnabled = true"><i class="fas fa-play-circle"></i></button>
 			</div>
@@ -57,7 +57,7 @@ let sitename = $ref<string | null>(null);
 let player = $ref({
 	url: null,
 	width: null,
-	height: null
+	height: null,
 });
 let playerEnabled = $ref(false);
 let tweetId = $ref<string | null>(null);
@@ -143,7 +143,7 @@ onUnmounted(() => {
 
 .mk-url-preview {
 	&.max-width_400px {
-		> a {
+		> .link {
 			font-size: 12px;
 
 			> .thumbnail {
@@ -157,7 +157,7 @@ onUnmounted(() => {
 	}
 
 	&.max-width_350px {
-		> a {
+		> .link {
 			font-size: 10px;
 
 			> .thumbnail {
@@ -205,7 +205,7 @@ onUnmounted(() => {
 		}
 	}
 
-	> a {
+	> .link {
 		position: relative;
 		display: block;
 		font-size: 14px;