diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 598b888c3634474fc60cd9f5fbbdd1e708f34ad1..2764a85abb8a4d915ce96b94617c59a3227b43ce 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -915,6 +915,7 @@ windowRestore: "å…ƒã«æˆ»ã™" caption: "ã‚ャプション" loggedInAsBot: "Botアカウントã§ãƒã‚°ã‚¤ãƒ³ä¸" tools: "ツール" +cannotLoad: "èªã¿è¾¼ã‚ã¾ã›ã‚“" _sensitiveMediaDetection: description: "機械å¦ç¿’を使ã£ã¦è‡ªå‹•ã§ã‚»ãƒ³ã‚·ãƒ†ã‚£ãƒ–ãªãƒ¡ãƒ‡ã‚£ã‚¢ã‚’検出ã—ã€ãƒ¢ãƒ‡ãƒ¬ãƒ¼ã‚·ãƒ§ãƒ³ã«å½¹ç«‹ã¦ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚サーãƒãƒ¼ã®è² è·ãŒå°‘ã—増ãˆã¾ã™ã€‚" diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue index 8ebfbe58e86d80081e07626297185ebc90f0a103..f8484e38a530db8d0b70d57c2048ddafda931ca7 100644 --- a/packages/frontend/src/components/MkUrlPreview.vue +++ b/packages/frontend/src/components/MkUrlPreview.vue @@ -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> </div> <div v-else class="mk-url-preview"> - <Transition :name="$store.state.animation ? '_transition_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}')`"> - </div> - <article> - <header> - <h1 :title="title">{{ 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">{{ sitename }}</p> - </footer> - </article> - </component> - </Transition> + <component :is="self ? 'MkA' : 'a'" 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> + <article> + <header> + <h1 v-if="unknownUrl">{{ url }}</h1> + <h1 v-else-if="fetching"><MkEllipsis/></h1> + <h1 v-else :title="title">{{ title }}</h1> + </header> + <p v-if="unknownUrl">{{ i18n.ts.cannotLoad }}</p> + <p v-else-if="fetching"><MkEllipsis/></p> + <p v-else-if="description" :title="description">{{ description.length > 85 ? description.slice(0, 85) + '…' : description }}</p> + <footer> + <img v-if="icon" class="icon" :src="icon"/> + <p v-if="unknownUrl">?</p> + <p v-else-if="fetching"><MkEllipsis/></p> + <p v-else :title="sitename">{{ sitename }}</p> + </footer> + </article> + </component> <div v-if="tweetId" class="action"> <MkButton :small="true" inline @click="tweetExpanded = true"> <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); const embedId = `embed${Math.random().toString().replace(/\D/, '')}`; let tweetHeight = $ref(150); +let unknownUrl = $ref(false); const requestUrl = new URL(props.url); @@ -96,7 +101,10 @@ requestUrl.hash = ''; window.fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`).then(res => { res.json().then(info => { - if (info.url == null) return; + if (info.url == null) { + unknownUrl = true; + return; + } title = info.title; description = info.description; thumbnail = info.thumbnail;