feat: link previews redesign
This commit is contained in:
freeplay
parent
1863d2318c
commit
326679784a
1 changed files with 170 additions and 271 deletions
|
|
@ -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}&hideCard=false&hideThread=false&lang=en&theme=${
|
|
||||||
defaultStore.state.darkMode ? 'dark' : 'light'
|
|
||||||
}&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}&hideCard=false&hideThread=false&lang=en&theme=${
|
||||||
|
defaultStore.state.darkMode ? 'dark' : 'light'
|
||||||
|
}&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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue