feat: link previews redesign

This commit is contained in:
freeplay 2023-06-30 03:52:22 -04:00
parent 1863d2318c
commit 326679784a

View File

@ -1,125 +1,111 @@
<template>
<div
v-if="playerEnabled"
class="player"
:style="`padding: ${
((player.height || 0) / (player.width || 1)) * 100
}% 0 0`"
@click.stop
<transition
:name="defaultStore.state.animation ? 'zoom' : ''"
mode="out-in"
>
<button
class="disablePlayer"
:title="i18n.ts.disablePlayer"
@click="playerEnabled = false"
>
<i class="ph-x ph-bold ph-lg"></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
/>
</div>
<div
v-else-if="tweetId && tweetExpanded"
ref="twitter"
class="twitter"
@click.stop
>
<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=${
defaultStore.state.darkMode ? 'dark' : 'light'
}&amp;id=${tweetId}`"
></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"
<!-- v-if="!fetching" for now, I think there's something
weird w/ some links stuck loading (?) -->
<article
v-if="!fetching"
class="url-preview"
@click.stop
>
<component
:is="self ? 'MkA' : 'a'"
v-if="!fetching"
class="link"
:class="{ compact }"
:[attr]="self ? url.substr(local.length) : url"
:[attr]="self ? url.substring(local.length) : url"
rel="nofollow noopener"
:target="target"
:title="url"
:class="{
hasButton: tweetId || player.url
}"
>
<div
v-if="thumbnail"
class="thumbnail"
:style="`background-image: url('${thumbnail}')`"
>
<img :src="thumbnail" loading="lazy"/>
<button
v-if="!playerEnabled && player.url"
v-if="tweetId"
class="_button"
:title="i18n.ts.enablePlayer"
@click.prevent="playerEnabled = true"
v-tooltip="tweetExpanded ? i18n.ts.close : i18n.ts.expandTweet"
@click.stop.prevent="tweetExpanded = !tweetExpanded"
>
<i class="ph-play-circle ph-bold ph-lg"></i>
<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>
<article>
<header>
<h1 :title="title || undefined">{{ title }}</h1>
</header>
<p v-if="description" :title="description">
{{
description.length > 85
? description.slice(0, 85) + "…"
: description
}}
<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>
<footer>
<img v-if="icon" class="icon" :src="icon" />
<p :title="sitename || undefined">{{ sitename }}</p>
</footer>
</article>
</div>
</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>
<iframe
v-if="playerEnabled"
:src="
player.url +
(player.url.match(/\?/)
? '&autoplay=1&auto_play=1'
: '?autoplay=1&auto_play=1')
"
:style="`aspect-ratio: ${((player.width || 1) / (player.height || 1))}`"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen
@click.stop
/>
<iframe
v-else-if="tweetId && tweetExpanded"
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=${
defaultStore.state.darkMode ? 'dark' : 'light'
}&amp;id=${tweetId}`"
@click.stop
></iframe>
</article>
</transition>
</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 {
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;
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;
.url-preview {
border: 1px solid var(--divider);
border-radius: var(--radius);
overflow: hidden;
> a {
display: flex;
transition: background .2s;
> div:first-child:not(:last-child) {
position: relative;
width: 90px;
overflow: hidden;
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 {
font-size: 3.5em;
opacity: 0.7;
&:hover {
font-size: 4em;
opacity: 0.9;
background: var(--bg);
padding: 14px;
border-radius: var(--radius);
transform: scale(.95);
opacity: 0;
transition: transform .2s, opacity .2s, background .2s;
}
}
& + article {
left: 100px;
width: calc(100% - 100px);
}
}
> article {
position: relative;
box-sizing: border-box;
padding: 16px;
> header {
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;
&:hover, &:focus {
i {
background: var(--panelHighlight) !important;
transform: scale(1.1) !important;
}
}
}
}
&.compact {
> article {
> header h1,
p,
footer {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
> div:last-child {
padding: 14px 16px;
width: 0;
flex-grow: 1;
}
h1, p {
display: block;
margin: 0;
overflow: hidden;
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>