mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-21 14:59:39 +00:00
02c20786b8
## Summary It's rare that someone has enabled autoplay -- but when they have, scrolling through a large grid of videos and trying to play them all onload can cause extreme lag. We don't need the asset cards to be autoplaying, so the fix here is fine for perf and UX. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8325-perf-remove-autoplay-from-assets-cards-2f56d73d3650814e8103f01b1f21b2e2) by [Unito](https://www.unito.io)
68 lines
1.6 KiB
Vue
68 lines
1.6 KiB
Vue
<template>
|
|
<div
|
|
class="relative size-full overflow-hidden rounded bg-black"
|
|
@mouseenter="isHovered = true"
|
|
@mouseleave="isHovered = false"
|
|
>
|
|
<video
|
|
:controls="shouldShowControls"
|
|
preload="metadata"
|
|
muted
|
|
loop
|
|
playsinline
|
|
:poster="asset.preview_url"
|
|
class="relative size-full object-contain transition-transform duration-300 group-hover:scale-105 group-data-[selected=true]:scale-105"
|
|
@click.stop
|
|
@play="onVideoPlay"
|
|
@pause="onVideoPause"
|
|
@ended="onVideoEnded"
|
|
>
|
|
<source :src="asset.src || ''" />
|
|
</video>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onMounted, ref, watch } from 'vue'
|
|
|
|
import type { AssetMeta } from '../schemas/mediaAssetSchema'
|
|
|
|
const { asset } = defineProps<{
|
|
asset: AssetMeta
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
videoPlayingStateChanged: [isPlaying: boolean]
|
|
videoControlsChanged: [showControls: boolean]
|
|
}>()
|
|
|
|
const isHovered = ref(false)
|
|
const isPlaying = ref(false)
|
|
|
|
// Always show controls when not playing, hide/show based on hover when playing
|
|
const shouldShowControls = computed(() => !isPlaying.value || isHovered.value)
|
|
|
|
watch(shouldShowControls, (controlsVisible) => {
|
|
emit('videoControlsChanged', controlsVisible)
|
|
})
|
|
|
|
onMounted(() => {
|
|
emit('videoControlsChanged', shouldShowControls.value)
|
|
})
|
|
|
|
const onVideoPlay = () => {
|
|
isPlaying.value = true
|
|
emit('videoPlayingStateChanged', true)
|
|
}
|
|
|
|
const onVideoPause = () => {
|
|
isPlaying.value = false
|
|
emit('videoPlayingStateChanged', false)
|
|
}
|
|
|
|
const onVideoEnded = () => {
|
|
isPlaying.value = false
|
|
emit('videoPlayingStateChanged', false)
|
|
}
|
|
</script>
|