extern/fediwall
1
0
Fork 1
mirror of https://github.com/defnull/fediwall.git synced 2024-11-21 23:23:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

Track card visibility not only when embedding videos

Browse Source
This commit is contained in:
Marcel Hellkamp 2023-08-16 12:33:44 +02:00
parent 5fc85fbd63
commit d9bcf5833a
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Card.vue
View File

@ -19,10 +19,10 @@ const media = computed(() => {
return props.post.media[0]
})
const videoElement = ref(null)
const videoIsVisible = useElementVisibility(videoElement)
const mediaElement = ref(null)
const mediaIsVisible = useElementVisibility(mediaElement)
const playVideo = computed(() => {
return media.value?.type === "video" && props.config.playVideos && videoIsVisible.value
return media.value?.type === "video" && props.config.playVideos && mediaIsVisible.value
})
const onMediaLoad = inject('fixLayout', () => undefined)
@ -43,9 +43,9 @@ const onMediaLoad = inject('fixLayout', () => undefined)
<slot name="topleft"></slot>
</div>
<div class="card-body">
<div v-if="config.showMedia" class="wall-media mb-3">
<div v-if="config.showMedia" class="wall-media mb-3" ref="mediaElement">
<img v-if="media?.type === 'image'" :src="media.url" :alt="media.alt" :title="media.alt" @load="onMediaLoad">
<video v-else-if="media?.type === 'video'" ref="videoElement" muted loop :autoplay="playVideo"
<video v-else-if="media?.type === 'video'" muted loop :autoplay="playVideo"
:poster="media.preview" :alt="media.alt" :title="media.alt" @loadedmetadata="onMediaLoad">
<source v-if="playVideo" :src="media.url">
</video>