feat: link previews redesign

packages/client/src/components/MkUrlPreview.vue

@@ -1,40 +1,81 @@
 <template>
-	<div
+	<transition
-		v-if="playerEnabled"
+		:name="defaultStore.state.animation ? 'zoom' : ''"
-		class="player"
+		mode="out-in"
-		:style="`padding: ${
+	>
-			((player.height || 0) / (player.width || 1)) * 100
+		<!-- v-if="!fetching" for now, I think there's something
-		}% 0 0`"
+			 weird w/ some links stuck loading (?) -->
+		<article
+			v-if="!fetching"
+			class="url-preview"
 			@click.stop
 		>
-		<button
+			<component
-			class="disablePlayer"
+				:is="self ? 'MkA' : 'a'"
-			:title="i18n.ts.disablePlayer"
+				:[attr]="self ? url.substring(local.length) : url"
-			@click="playerEnabled = false"
+				rel="nofollow noopener"
+				:target="target"
+				:title="url"
+				:class="{
+					hasButton: tweetId || player.url
+				}"
 			>
-			<i class="ph-x ph-bold ph-lg"></i>
+				<div
+					v-if="thumbnail"
+					class="thumbnail"
+				>
+					<img :src="thumbnail" loading="lazy"/>
+					<button
+						v-if="tweetId"
+						class="_button"
+						v-tooltip="tweetExpanded ? i18n.ts.close : i18n.ts.expandTweet"
+						@click.stop.prevent="tweetExpanded = !tweetExpanded"
+					>
+						<i v-if="!tweetExpanded" class="ph-twitter-logo ph-bold ph-lg"></i>
+						<i v-else class="ph-x ph-bold ph-lg"></i>
 					</button>
+					<button
+						v-else-if="player.url"
+						class="_button"
+						v-tooltip="playerEnabled ? i18n.ts.close : i18n.ts.enablePlayer"
+						@click.stop.prevent="playerEnabled = !playerEnabled"
+					>
+						<i v-if="!playerEnabled" class="ph-play ph-bold ph-lg"></i>
+						<i v-else class="ph-x ph-bold ph-lg"></i>
+					</button>
+				</div>
+				<div v-if="fetching">
+					<MkLoading mini />
+				</div>
+				<div v-else>
+					<h1 :title="title || undefined">{{ title || url }}</h1>
+					<p :title="description">
+						<span>
+							<span :title="sitename || undefined">
+								<img v-if="icon" class="icon" :src="icon" />
+								{{ sitename }}: 
+							</span>
+							{{ description }}
+						</span>
+					</p>
+				</div>
+			</component>
 			<iframe
+				v-if="playerEnabled"
 				:src="
 					player.url +
 					(player.url.match(/\?/)
 						? '&autoplay=1&auto_play=1'
 						: '?autoplay=1&auto_play=1')
 				"
-			:width="player.width || '100%'"
+				:style="`aspect-ratio: ${((player.width || 1) / (player.height || 1))}`"
-			:heigth="player.height || 250"
 				frameborder="0"
 				allow="autoplay; encrypted-media"
 				allowfullscreen
-		/>
-	</div>
-	<div
-		v-else-if="tweetId && tweetExpanded"
-		ref="twitter"
-		class="twitter"
 				@click.stop
-	>
+			/>
 			<iframe
+				v-else-if="tweetId && tweetExpanded"
 				ref="tweet"
 				scrolling="no"
 				frameborder="no"
@@ -46,80 +87,25 @@
 				:src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${
 					defaultStore.state.darkMode ? 'dark' : 'light'
 				}&amp;id=${tweetId}`"
+				@click.stop
 			></iframe>
-	</div>
-	<div v-else v-size="{ max: [400, 350] }" class="mk-url-preview" @click.stop>
-		<transition
-			:name="defaultStore.state.animation ? 'zoom' : ''"
-			mode="out-in"
-		>
-			<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="i18n.ts.enablePlayer"
-						@click.prevent="playerEnabled = true"
-					>
-						<i class="ph-play-circle ph-bold ph-lg"></i>
-					</button>
-				</div>
-				<article>
-					<header>
-						<h1 :title="title || undefined">{{ title }}</h1>
-					</header>
-					<p v-if="description" :title="description">
-						{{
-							description.length > 85
-								? description.slice(0, 85) + "…"
-								: description
-						}}
-					</p>
-					<footer>
-						<img v-if="icon" class="icon" :src="icon" />
-						<p :title="sitename || undefined">{{ sitename }}</p>
-					</footer>
 		</article>
-			</component>
 	</transition>
-		<div v-if="tweetId" class="expand-tweet">
-			<MkButton mini rounded @click="tweetExpanded = true">
-				<i class="ph-twitter-logo ph-bold ph-lg"></i>
-				{{ i18n.ts.expandTweet }}
-			</MkButton>
-		</div>
-	</div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted } from "vue";
 import { url as local, lang } from "@/config";
 import { i18n } from "@/i18n";
-import MkButton from "@/components/MkButton.vue";
 import { defaultStore } from "@/store";
 
 const props = withDefaults(
 	defineProps<{
 		url: string;
 		detail?: boolean;
-		compact?: boolean;
 	}>(),
 	{
 		detail: false,
-		compact: false,
 	}
 );
 
@@ -198,201 +184,114 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.player {
+.url-preview {
-	position: relative;
-	width: 100%;
-
-	> button {
-		position: absolute;
-		top: -1.5em;
-		right: 0;
-		font-size: 1em;
-		width: 1.5em;
-		height: 1.5em;
-		padding: 0;
-		margin: 0;
-		color: var(--fg);
-		background: rgba(128, 128, 128, 0.2);
-		opacity: 0.7;
-
-		&:hover {
-			opacity: 0.9;
-		}
-	}
-
-	> iframe {
-		height: 100%;
-		left: 0;
-		position: absolute;
-		top: 0;
-		width: 100%;
-	}
-}
-
-.mk-url-preview {
-	> .expand-tweet {
-		margin-top: 0.5rem;
-	}
-
-	&.max-width_400px {
-		> .link {
-			font-size: 12px;
-
-			> .thumbnail {
-				height: 80px;
-			}
-
-			> article {
-				padding: 12px;
-			}
-		}
-	}
-
-	&.max-width_350px {
-		> .link {
-			font-size: 10px;
-
-			> .thumbnail {
-				height: 70px;
-			}
-
-			> article {
-				padding: 8px;
-
-				> header {
-					margin-bottom: 4px;
-				}
-
-				> footer {
-					margin-top: 4px;
-
-					> img {
-						width: 12px;
-						height: 12px;
-					}
-				}
-			}
-
-			&.compact {
-				> .thumbnail {
-					position: absolute;
-					width: 56px;
-					height: 100%;
-				}
-
-				> article {
-					left: 56px;
-					width: calc(100% - 56px);
-					padding: 4px;
-
-					> header {
-						margin-bottom: 2px;
-					}
-
-					> footer {
-						margin-top: 2px;
-					}
-				}
-			}
-		}
-	}
-
-	> .link {
-		position: relative;
-		display: block;
-		font-size: 14px;
 	border: 1px solid var(--divider);
-		border-radius: 8px;
+	border-radius: var(--radius);
+	overflow: hidden;
+	> a {
+		display: flex;
+		transition: background .2s;
+		> div:first-child:not(:last-child) {
+			position: relative;
+			width: 90px;
 			overflow: hidden;
-		transition: background 0.2s;
-		&:hover,
-		&:focus-within {
-			text-decoration: none;
-			background-color: var(--panelHighlight);
-			> article > header > h1 {
-				text-decoration: underline;
-			}
-		}
-
-		> .thumbnail {
-			position: absolute;
-			width: 100px;
-			height: 100%;
-			background-position: center;
-			background-size: cover;
 			display: flex;
 			justify-content: center;
 			align-items: center;
+			img {
+				position: absolute;
+				inset: 0;
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+				transition: opacity .2s;
+			}
+			button {
+				display: flex;
+				width: 100%;
+				height: 100%;
+				i {
 
-			> button {
+					background: var(--bg);
-				font-size: 3.5em;
+					padding: 14px;
-				opacity: 0.7;
+					border-radius: var(--radius);
-
+					transform: scale(.95);
-				&:hover {
+					opacity: 0;
-					font-size: 4em;
+					transition: transform .2s, opacity .2s, background .2s;
-					opacity: 0.9;
+				}
+				&:hover, &:focus {
+					i {
+						background: var(--panelHighlight) !important;
+						transform: scale(1.1) !important;
 					}
 				}
-
-			& + article {
-				left: 100px;
-				width: calc(100% - 100px);
 			}
 		}
-
+		> div:last-child {
-		> article {
+			padding: 14px 16px;
-			position: relative;
+			width: 0;
-			box-sizing: border-box;
+			flex-grow: 1;
-			padding: 16px;
+		}
-
+		h1, p {
-			> header {
+			display: block;
-				margin-bottom: 8px;
-
-				> h1 {
 			margin: 0;
-					font-size: 1em;
-				}
-			}
-
-			> p {
-				margin: 0;
-				font-size: 0.8em;
-			}
-
-			> footer {
-				margin-top: 8px;
-				height: 16px;
-
-				> img {
-					display: inline-block;
-					width: 16px;
-					height: 16px;
-					margin-right: 4px;
-					vertical-align: top;
-				}
-
-				> p {
-					display: inline-block;
-					margin: 0;
-					color: var(--urlPreviewInfo);
-					font-size: 0.8em;
-					line-height: 16px;
-					vertical-align: top;
-				}
-			}
-		}
-
-		&.compact {
-			> article {
-				> header h1,
-				p,
-				footer {
 			overflow: hidden;
-					white-space: nowrap;
 			text-overflow: ellipsis;
+			max-width: 100%;
+		}
+		h1 {
+			font-size: 1em;
+			white-space: nowrap;
+			margin-bottom: .2em;
+		}
+		p {
+			margin-bottom: -.5em;
+			> span {
+				display: -webkit-inline-box;
+				font-size: .8em;
+				-webkit-line-clamp: 2;
+				-webkit-box-orient: vertical;
+				overflow: hidden;
+				> span {
+					font-weight: 600;
+					margin-right: .4em;
 				}
 			}
 		}
+		.icon {
+			width: 1.2em;
+			height: 1.2em;
+			vertical-align: middle;
+			border-radius: 4px;
+		}
+		&:hover, &:focus, &:focus-within {
+			background: var(--panelHighlight);
+			h1 {
+				text-decoration: underline;
+			}
+		}
+	}
+	&:hover, &:focus-within {
+		> .hasButton {
+			> div:first-child {
+				img {
+					opacity: .2;
+				}
+				button i {
+					transform: none;
+					opacity: 1;
+				}
+			}
+		}
+	}
+	iframe {
+		border-top: 1px solid var(--divider);
+		display: block;
+		width: 100%;
+		overflow-y: auto;
+		&:not([src^="https://platform.twitter"]) {
+			max-height: 70vh;
+		}
 	}
 }
 </style>