enhance(client): tweak url preview
This commit is contained in:
parent
4767804bcc
commit
43fafc8d57
|
@ -915,6 +915,7 @@ windowRestore: "元に戻す"
|
||||||
caption: "キャプション"
|
caption: "キャプション"
|
||||||
loggedInAsBot: "Botアカウントでログイン中"
|
loggedInAsBot: "Botアカウントでログイン中"
|
||||||
tools: "ツール"
|
tools: "ツール"
|
||||||
|
cannotLoad: "読み込めません"
|
||||||
|
|
||||||
_sensitiveMediaDetection:
|
_sensitiveMediaDetection:
|
||||||
description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てることができます。サーバーの負荷が少し増えます。"
|
description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てることができます。サーバーの負荷が少し増えます。"
|
||||||
|
|
|
@ -7,22 +7,26 @@
|
||||||
<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=${$store.state.darkMode ? 'dark' : 'light'}&id=${tweetId}`"></iframe>
|
<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=${$store.state.darkMode ? 'dark' : 'light'}&id=${tweetId}`"></iframe>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="mk-url-preview">
|
<div v-else class="mk-url-preview">
|
||||||
<Transition :name="$store.state.animation ? '_transition_zoom' : ''" mode="out-in">
|
<component :is="self ? 'MkA' : 'a'" class="link" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
|
||||||
<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}')`">
|
||||||
<div v-if="thumbnail" class="thumbnail" :style="`background-image: url('${thumbnail}')`">
|
</div>
|
||||||
</div>
|
<article>
|
||||||
<article>
|
<header>
|
||||||
<header>
|
<h1 v-if="unknownUrl">{{ url }}</h1>
|
||||||
<h1 :title="title">{{ title }}</h1>
|
<h1 v-else-if="fetching"><MkEllipsis/></h1>
|
||||||
</header>
|
<h1 v-else :title="title">{{ title }}</h1>
|
||||||
<p v-if="description" :title="description">{{ description.length > 85 ? description.slice(0, 85) + '…' : description }}</p>
|
</header>
|
||||||
<footer>
|
<p v-if="unknownUrl">{{ i18n.ts.cannotLoad }}</p>
|
||||||
<img v-if="icon" class="icon" :src="icon"/>
|
<p v-else-if="fetching"><MkEllipsis/></p>
|
||||||
<p :title="sitename">{{ sitename }}</p>
|
<p v-else-if="description" :title="description">{{ description.length > 85 ? description.slice(0, 85) + '…' : description }}</p>
|
||||||
</footer>
|
<footer>
|
||||||
</article>
|
<img v-if="icon" class="icon" :src="icon"/>
|
||||||
</component>
|
<p v-if="unknownUrl">?</p>
|
||||||
</Transition>
|
<p v-else-if="fetching"><MkEllipsis/></p>
|
||||||
|
<p v-else :title="sitename">{{ sitename }}</p>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
</component>
|
||||||
<div v-if="tweetId" class="action">
|
<div v-if="tweetId" class="action">
|
||||||
<MkButton :small="true" inline @click="tweetExpanded = true">
|
<MkButton :small="true" inline @click="tweetExpanded = true">
|
||||||
<i class="ti ti-brand-twitter"></i> {{ i18n.ts.expandTweet }}
|
<i class="ti ti-brand-twitter"></i> {{ i18n.ts.expandTweet }}
|
||||||
|
@ -78,6 +82,7 @@ let tweetId = $ref<string | null>(null);
|
||||||
let tweetExpanded = $ref(props.detail);
|
let tweetExpanded = $ref(props.detail);
|
||||||
const embedId = `embed${Math.random().toString().replace(/\D/, '')}`;
|
const embedId = `embed${Math.random().toString().replace(/\D/, '')}`;
|
||||||
let tweetHeight = $ref(150);
|
let tweetHeight = $ref(150);
|
||||||
|
let unknownUrl = $ref(false);
|
||||||
|
|
||||||
const requestUrl = new URL(props.url);
|
const requestUrl = new URL(props.url);
|
||||||
|
|
||||||
|
@ -96,7 +101,10 @@ requestUrl.hash = '';
|
||||||
|
|
||||||
window.fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`).then(res => {
|
window.fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`).then(res => {
|
||||||
res.json().then(info => {
|
res.json().then(info => {
|
||||||
if (info.url == null) return;
|
if (info.url == null) {
|
||||||
|
unknownUrl = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
title = info.title;
|
title = info.title;
|
||||||
description = info.description;
|
description = info.description;
|
||||||
thumbnail = info.thumbnail;
|
thumbnail = info.thumbnail;
|
||||||
|
|
Loading…
Reference in New Issue