line-and-surface/app/src/components/VideoScrollImage.vue

73 lines
1.6 KiB
Vue
Raw Normal View History

<template>
<img ref="img" :src="currentSrc" class="video-scroll-image"/>
</template>
<script lang="ts">
import {defineComponent, PropType, ref, Ref} from "vue";
export default defineComponent({
name: "VideoScrollImage",
props: {
definition: {
type: Object as PropType<VideoScrollImageDef>,
required: true
},
visible: {
type: Boolean,
required: true
}
},
watch: {
visible() {
if (!this.img || !this.visible) {
return;
}
console.debug(`[VIDEOSCROLLIMAGE] Intersected, loading ${this.definition.fullres}`);
this.currentSrc = this.definition.fullres;
const grayTimeout = setTimeout(() => {
this.img!.classList.add("visible");
this.img!.style.background = "grey";
}, 3000);
this.img.onload = () => {
clearTimeout(grayTimeout);
this.img!.classList.add("visible");
this.img!.style.background = "none";
// if (this.isHorizontal) {
// this.img!.style.height = "auto";
// } else {
// this.img!.style.width = "auto";
// }
};
}
},
setup(props) {
const img = ref<HTMLImageElement | null>(null);
const currentSrc: Ref<string | undefined> = ref(undefined);
return {
img,
currentSrc
};
}
});
export interface VideoScrollImageDef {
fullres: string
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.video-scroll-image {
position: absolute;
image-rendering: optimizeSpeed;
opacity: 0;
transition: opacity .5s;
}
.video-scroll-image.visible {
opacity: 1 !important;
}
</style>