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> <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
}% 0 0`"
@click.stop
> >
<button <!-- v-if="!fetching" for now, I think there's something
class="disablePlayer" weird w/ some links stuck loading (?) -->
:title="i18n.ts.disablePlayer" <article
@click="playerEnabled = false" v-if="!fetching"
> class="url-preview"
<i class="ph-x ph-bold ph-lg"></i> @click.stop
</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"
> >
<component <component
:is="self ? 'MkA' : 'a'" :is="self ? 'MkA' : 'a'"
v-if="!fetching" :[attr]="self ? url.substring(local.length) : url"
class="link"
:class="{ compact }"
:[attr]="self ? url.substr(local.length) : url"
rel="nofollow noopener" rel="nofollow noopener"
:target="target" :target="target"
:title="url" :title="url"
:class="{
hasButton: tweetId || player.url
}"
> >
<div <div
v-if="thumbnail" v-if="thumbnail"
class="thumbnail" class="thumbnail"
:style="`background-image: url('${thumbnail}')`"
> >
<img :src="thumbnail" loading="lazy"/>
<button <button
v-if="!playerEnabled && player.url" v-if="tweetId"
class="_button" class="_button"
:title="i18n.ts.enablePlayer" v-tooltip="tweetExpanded ? i18n.ts.close : i18n.ts.expandTweet"
@click.prevent="playerEnabled = true" @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> </button>
</div> </div>
<article> <div v-if="fetching">
<header> <MkLoading mini />
<h1 :title="title || undefined">{{ title }}</h1> </div>
</header> <div v-else>
<p v-if="description" :title="description"> <h1 :title="title || undefined">{{ title || url }}</h1>
{{ <p :title="description">
description.length > 85 <span>
? description.slice(0, 85) + "…" <span :title="sitename || undefined">
: description <img v-if="icon" class="icon" :src="icon" />
}} {{ sitename }}:
</span>
{{ description }}
</span>
</p> </p>
<footer> </div>
<img v-if="icon" class="icon" :src="icon" />
<p :title="sitename || undefined">{{ sitename }}</p>
</footer>
</article>
</component> </component>
</transition> <iframe
<div v-if="tweetId" class="expand-tweet"> v-if="playerEnabled"
<MkButton mini rounded @click="tweetExpanded = true"> :src="
<i class="ph-twitter-logo ph-bold ph-lg"></i> player.url +
{{ i18n.ts.expandTweet }} (player.url.match(/\?/)
</MkButton> ? '&autoplay=1&auto_play=1'
</div> : '?autoplay=1&auto_play=1')
</div> "
: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> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, onUnmounted } from "vue"; import { onMounted, onUnmounted } from "vue";
import { url as local, lang } from "@/config"; import { url as local, lang } from "@/config";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import MkButton from "@/components/MkButton.vue";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
url: string; url: string;
detail?: boolean; detail?: boolean;
compact?: boolean;
}>(), }>(),
{ {
detail: false, detail: false,
compact: false,
} }
); );
@ -198,201 +184,114 @@ onUnmounted(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.player { .url-preview {
position: relative; border: 1px solid var(--divider);
width: 100%; border-radius: var(--radius);
overflow: hidden;
> button { > a {
position: absolute; display: flex;
top: -1.5em; transition: background .2s;
right: 0; > div:first-child:not(:last-child) {
font-size: 1em; position: relative;
width: 1.5em; width: 90px;
height: 1.5em; overflow: hidden;
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;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: 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 {
& + article { background: var(--panelHighlight) !important;
left: 100px; transform: scale(1.1) !important;
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;
} }
} }
} }
> div:last-child {
&.compact { padding: 14px 16px;
> article { width: 0;
> header h1, flex-grow: 1;
p, }
footer { h1, p {
overflow: hidden; display: block;
white-space: nowrap; margin: 0;
text-overflow: ellipsis; 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> </style>