Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Improve tweet embed

Browse source
This commit is contained in:
syuilo 2018-07-26 04:55:39 +09:00
parent 91b89b79d2
commit ce4fb49d4c
3 changed files with 19 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/client/app/common/views/components/url-preview.vue
View file

@ -2,9 +2,11 @@
<iframe v-if="youtubeId" type="text/html" height="250" <iframe v-if="youtubeId" type="text/html" height="250"
:src="`https://www.youtube.com/embed/${youtubeId}?origin=${misskeyUrl}`" :src="`https://www.youtube.com/embed/${youtubeId}?origin=${misskeyUrl}`"
frameborder="0"/> frameborder="0"/>
<blockquote v-else-if="tweetUrl" class="twitter-tweet" ref="tweet"> <div v-else-if="tweetUrl && detail" class="twitter">
<blockquote ref="tweet" class="twitter-tweet" :data-theme="$store.state.device.darkmode ? 'dark' : null">
<a :href="url"></a> <a :href="url"></a>
</blockquote> </blockquote>
</div>
<div v-else class="mk-url-preview"> <div v-else class="mk-url-preview">
<a :href="url" target="_blank" :title="url" v-if="!fetching"> <a :href="url" target="_blank" :title="url" v-if="!fetching">
<div class="thumbnail" v-if="thumbnail" :style="`background-image: url(${thumbnail})`"></div> <div class="thumbnail" v-if="thumbnail" :style="`background-image: url(${thumbnail})`"></div>
@ -27,7 +29,17 @@ import Vue from 'vue';
import { url as misskeyUrl } from '../../../config'; import { url as misskeyUrl } from '../../../config';
export default Vue.extend({ export default Vue.extend({
props: ['url'], props: {
url: {
type: String,
require: true
},
detail: {
type: Boolean,
required: false,
default: false
}
},
data() { data() {
return { return {
fetching: true, fetching: true,
@ -48,7 +60,7 @@ export default Vue.extend({
this.youtubeId = url.searchParams.get('v'); this.youtubeId = url.searchParams.get('v');
} else if (url.hostname == 'youtu.be') { } else if (url.hostname == 'youtu.be') {
this.youtubeId = url.pathname; this.youtubeId = url.pathname;
} else if (url.hostname == 'twitter.com' && /^\/.+\/status(es)?\/\d+/.test(url.pathname)) { } else if (this.detail && url.hostname == 'twitter.com' && /^\/.+\/status(es)?\/\d+/.test(url.pathname)) {
this.tweetUrl = url; this.tweetUrl = url;
const twttr = (window as any).twttr || {}; const twttr = (window as any).twttr || {};
const loadTweet = () => twttr.widgets.load(this.$refs.tweet); const loadTweet = () => twttr.widgets.load(this.$refs.tweet);

2
src/client/app/desktop/views/components/note-detail.vue
View file

@ -46,7 +46,7 @@
<mk-media-list :media-list="p.media" :raw="true"/> <mk-media-list :media-list="p.media" :raw="true"/>
</div> </div>
<mk-poll v-if="p.poll" :note="p"/> <mk-poll v-if="p.poll" :note="p"/>
<mk-url-preview v-for="url in urls" :url="url" :key="url"/> <mk-url-preview v-for="url in urls" :url="url" :key="url" :detail="true"/>
<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% %i18n:@location%</a> <a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% %i18n:@location%</a>
<div class="map" v-if="p.geo" ref="map"></div> <div class="map" v-if="p.geo" ref="map"></div>
<div class="renote" v-if="p.renote"> <div class="renote" v-if="p.renote">

2
src/client/app/mobile/views/components/note-detail.vue
View file

@ -44,7 +44,7 @@
<mk-media-list :media-list="p.media" :raw="true"/> <mk-media-list :media-list="p.media" :raw="true"/>
</div> </div>
<mk-poll v-if="p.poll" :note="p"/> <mk-poll v-if="p.poll" :note="p"/>
<mk-url-preview v-for="url in urls" :url="url" :key="url"/> <mk-url-preview v-for="url in urls" :url="url" :key="url" :detail="true"/>
<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% %i18n:@location%</a> <a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% %i18n:@location%</a>
<div class="map" v-if="p.geo" ref="map"></div> <div class="map" v-if="p.geo" ref="map"></div>
<div class="renote" v-if="p.renote"> <div class="renote" v-if="p.renote">