parent
2fc7a34018
commit
74c71f5ce5
1 changed files with 1 additions and 34 deletions
|
@ -3,9 +3,6 @@
|
||||||
<button class="disablePlayer" :title="i18n.ts.disablePlayer" @click="playerEnabled = false"><i class="fas fa-times"></i></button>
|
<button class="disablePlayer" :title="i18n.ts.disablePlayer" @click="playerEnabled = false"><i class="fas fa-times"></i></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/>
|
<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>
|
||||||
<div v-else-if="tweetId && tweetExpanded" ref="twitter" class="twitter">
|
|
||||||
<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 v-size="{ max: [400, 350] }" class="mk-url-preview">
|
<div v-else v-size="{ max: [400, 350] }" class="mk-url-preview">
|
||||||
<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
|
<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
|
||||||
<component :is="self ? 'MkA' : 'a'" v-if="!fetching" :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="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
|
||||||
|
@ -24,16 +21,10 @@
|
||||||
</article>
|
</article>
|
||||||
</component>
|
</component>
|
||||||
</transition>
|
</transition>
|
||||||
<div v-if="tweetId" class="expandTweet">
|
|
||||||
<a @click="tweetExpanded = true">
|
|
||||||
<i class="fab fa-twitter"></i> {{ i18n.ts.expandTweet }}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { 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';
|
||||||
|
|
||||||
|
@ -61,23 +52,14 @@ let player = $ref({
|
||||||
height: null,
|
height: null,
|
||||||
});
|
});
|
||||||
let playerEnabled = $ref(false);
|
let playerEnabled = $ref(false);
|
||||||
let tweetId = $ref<string | null>(null);
|
|
||||||
let tweetExpanded = $ref(props.detail);
|
|
||||||
const embedId = `embed${Math.random().toString().replace(/\D/,'')}`;
|
|
||||||
let tweetHeight = $ref(150);
|
|
||||||
|
|
||||||
const requestUrl = new URL(props.url);
|
const requestUrl = new URL(props.url);
|
||||||
|
|
||||||
if (requestUrl.hostname === 'twitter.com') {
|
|
||||||
const m = requestUrl.pathname.match(/^\/.+\/status(?:es)?\/(\d+)/);
|
|
||||||
if (m) tweetId = m[1];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (requestUrl.hostname === 'music.youtube.com' && requestUrl.pathname.match('^/(?:watch|channel)')) {
|
if (requestUrl.hostname === 'music.youtube.com' && requestUrl.pathname.match('^/(?:watch|channel)')) {
|
||||||
requestUrl.hostname = 'www.youtube.com';
|
requestUrl.hostname = 'www.youtube.com';
|
||||||
}
|
}
|
||||||
|
|
||||||
const requestLang = (lang || 'ja-JP').replace('ja-KS', 'ja-JP');
|
const requestLang = lang || 'en-US';
|
||||||
|
|
||||||
requestUrl.hash = '';
|
requestUrl.hash = '';
|
||||||
|
|
||||||
|
@ -93,21 +75,6 @@ fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`).the
|
||||||
player = info.player;
|
player = info.player;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
function adjustTweetHeight(message: any) {
|
|
||||||
if (message.origin !== 'https://platform.twitter.com') return;
|
|
||||||
const embed = message.data?.['twttr.embed'];
|
|
||||||
if (embed?.method !== 'twttr.private.resize') return;
|
|
||||||
if (embed?.id !== embedId) return;
|
|
||||||
const height = embed?.params[0]?.height;
|
|
||||||
if (height) tweetHeight = height;
|
|
||||||
}
|
|
||||||
|
|
||||||
(window as any).addEventListener('message', adjustTweetHeight);
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
(window as any).removeEventListener('message', adjustTweetHeight);
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
Loading…
Reference in a new issue