[client] Remove url card animation

packages/client/src/components/MkUrlPreview.vue

@@ -1,101 +1,96 @@
 <template>
-	<transition
+	<!-- v-if="!fetching" for now, I think there's something
-		:name="defaultStore.state.animation ? 'zoom' : ''"
+		 weird w/ some links stuck loading (?) -->
-		mode="out-in"
+	<article v-if="!fetching" class="url-preview" @click.stop>
-	>
+		<component
-		<!-- v-if="!fetching" for now, I think there's something
+			:is="self ? 'MkA' : 'a'"
-			 weird w/ some links stuck loading (?) -->
+			:[attr]="self ? url.substring(local.length) : url"
-		<article v-if="!fetching" class="url-preview" @click.stop>
+			rel="nofollow noopener"
-			<component
+			:target="target"
-				:is="self ? 'MkA' : 'a'"
+			:title="url"
-				:[attr]="self ? url.substring(local.length) : url"
+			:class="{
-				rel="nofollow noopener"
+				hasButton: tweetId || player.url,
-				:target="target"
+			}"
-				:title="url"
+		>
-				:class="{
+			<div v-if="thumbnail" class="thumbnail">
-					hasButton: tweetId || player.url,
+				<img :src="thumbnail" loading="lazy" decoding="async" />
-				}"
+				<button
-			>
+					v-if="tweetId"
-				<div v-if="thumbnail" class="thumbnail">
+					class="_button"
-					<img :src="thumbnail" loading="lazy" />
+					v-tooltip="
-					<button
+						tweetExpanded ? i18n.ts.close : i18n.ts.expandTweet
-						v-if="tweetId"
+					"
-						class="_button"
+					@click.stop.prevent="tweetExpanded = !tweetExpanded"
-						v-tooltip="
+				>
-							tweetExpanded ? i18n.ts.close : i18n.ts.expandTweet
+					<i
-						"
+						v-if="!tweetExpanded"
-						@click.stop.prevent="tweetExpanded = !tweetExpanded"
+						class="ph-twitter-logo ph-bold ph-lg"
-					>
+					></i>
-						<i
+					<i v-else class="ph-x ph-bold ph-lg"></i>
-							v-if="!tweetExpanded"
+				</button>
-							class="ph-twitter-logo ph-bold ph-lg"
+				<button
-						></i>
+					v-else-if="player.url"
-						<i v-else class="ph-x ph-bold ph-lg"></i>
+					class="_button"
-					</button>
+					v-tooltip="
-					<button
+						playerEnabled ? i18n.ts.close : i18n.ts.enablePlayer
-						v-else-if="player.url"
+					"
-						class="_button"
+					@click.stop.prevent="playerEnabled = !playerEnabled"
-						v-tooltip="
+				>
-							playerEnabled ? i18n.ts.close : i18n.ts.enablePlayer
+					<i
-						"
+						v-if="!playerEnabled"
-						@click.stop.prevent="playerEnabled = !playerEnabled"
+						class="ph-play ph-bold ph-lg"
-					>
+					></i>
-						<i
+					<i v-else class="ph-x ph-bold ph-lg"></i>
-							v-if="!playerEnabled"
+				</button>
-							class="ph-play ph-bold ph-lg"
+			</div>
-						></i>
+			<div v-if="fetching">
-						<i v-else class="ph-x ph-bold ph-lg"></i>
+				<MkLoading mini />
-					</button>
+			</div>
-				</div>
+			<div v-else>
-				<div v-if="fetching">
+				<h3 :title="title || undefined">{{ title || url }}</h3>
-					<MkLoading mini />
+				<p :title="description">
-				</div>
+					<span>
-				<div v-else>
+						<span :title="sitename || undefined">
-					<h3 :title="title || undefined">{{ title || url }}</h3>
+							<img v-if="icon" class="icon" :src="icon" />
-					<p :title="description">
+							{{ sitename }}
-						<span>
-							<span :title="sitename || undefined">
-								<img v-if="icon" class="icon" :src="icon" />
-								{{ sitename }}
-							</span>
-							{{ description }}
 						</span>
-					</p>
+						{{ description }}
-				</div>
+					</span>
-			</component>
+				</p>
-			<iframe
+			</div>
-				v-if="playerEnabled"
+		</component>
-				:src="
+		<iframe
-					player.url +
+			v-if="playerEnabled"
-					(player.url.match(/\?/)
+			:src="
-						? '&autoplay=1&auto_play=1'
+				player.url +
-						: '?autoplay=1&auto_play=1')
+				(player.url.match(/\?/)
-				"
+					? '&autoplay=1&auto_play=1'
-				:style="`aspect-ratio: ${
+					: '?autoplay=1&auto_play=1')
-					(player.width || 1) / (player.height || 1)
+			"
-				}`"
+			:style="`aspect-ratio: ${
-				frameborder="0"
+				(player.width || 1) / (player.height || 1)
-				allow="autoplay; encrypted-media"
+			}`"
-				allowfullscreen
+			frameborder="0"
-				@click.stop
+			allow="autoplay; encrypted-media"
-			/>
+			allowfullscreen
-			<iframe
+			@click.stop
-				v-else-if="tweetId && tweetExpanded"
+		/>
-				ref="tweet"
+		<iframe
-				scrolling="no"
+			v-else-if="tweetId && tweetExpanded"
-				frameborder="no"
+			ref="tweet"
-				:style="{
+			scrolling="no"
-					position: 'relative',
+			frameborder="no"
-					width: '100%',
+			:style="{
-					height: `${tweetHeight}px`,
+				position: 'relative',
-				}"
+				width: '100%',
-				:src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${
+				height: `${tweetHeight}px`,
-					defaultStore.state.darkMode ? 'dark' : 'light'
+			}"
-				}&amp;id=${tweetId}`"
+			:src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${
-				@click.stop
+				defaultStore.state.darkMode ? 'dark' : 'light'
-			></iframe>
+			}&amp;id=${tweetId}`"
-		</article>
+			@click.stop
-	</transition>
+		></iframe>
+	</article>
 </template>
 
 <script lang="ts" setup>