diff options
Diffstat (limited to 'packages/client/src/components/MkUrlPreview.vue')
| -rw-r--r-- | packages/client/src/components/MkUrlPreview.vue | 15 |
1 files changed, 13 insertions, 2 deletions
diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue index 9b2a785351..af27f644ed 100644 --- a/packages/client/src/components/MkUrlPreview.vue +++ b/packages/client/src/components/MkUrlPreview.vue @@ -10,7 +10,7 @@ <transition :name="$store.state.animation ? '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}')`"> - <button v-if="!playerEnabled && player.url" class="_button" :title="i18n.ts.enablePlayer" @click.prevent="playerEnabled = true"><i class="fas fa-play-circle"></i></button> + <button v-if="!playerEnabled && player.url" class="_button" :title="i18n.ts.enablePlayer" @click.prevent="isMobile? playerEnabled = true : openPlayer()"><i class="fas fa-play-circle"></i></button> </div> <article> <header> @@ -33,9 +33,11 @@ </template> <script lang="ts" setup> -import { onMounted, onUnmounted } from 'vue'; +import { defineAsyncComponent, onMounted, onUnmounted } from 'vue'; import { url as local, lang } from '@/config'; import { i18n } from '@/i18n'; +import * as os from '@/os'; +import { deviceKind } from '@/scripts/device-kind'; const props = withDefaults(defineProps<{ url: string; @@ -46,6 +48,9 @@ const props = withDefaults(defineProps<{ compact: false, }); +const MOBILE_THRESHOLD = 500; +const isMobile = $ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD); + const self = props.url.startsWith(local); const attr = self ? 'to' : 'href'; const target = self ? null : '_blank'; @@ -103,6 +108,12 @@ function adjustTweetHeight(message: any) { if (height) tweetHeight = height; } +const openPlayer = (): void => { + os.popup(defineAsyncComponent(() => import('@/components/MkYoutubePlayer.vue')), { + url: requestUrl.href, + }); +}; + (window as any).addEventListener('message', adjustTweetHeight); onUnmounted(() => { |