79 lines
1.4 KiB
Vue
79 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<div class="video-scroll">
|
||
|
|
<img v-for="(file, idx) in definition.files"
|
||
|
|
:src="file"
|
||
|
|
:style="{
|
||
|
|
top: `${Math.round(definition.top)}px`,
|
||
|
|
left: `${Math.round(definition.left) + width * idx}px`,
|
||
|
|
...definition.style
|
||
|
|
}"
|
||
|
|
/>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import {defineComponent, ref} from "vue";
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: "VideoScroll",
|
||
|
|
props: {
|
||
|
|
definition: {
|
||
|
|
type: Object,
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setup(props) {
|
||
|
|
console.debug(props.definition);
|
||
|
|
const width = ref(0);
|
||
|
|
const height = ref(0);
|
||
|
|
|
||
|
|
const definition = props.definition as VideoScrollDef;
|
||
|
|
getMeta(definition.files[0]).then((img) => {
|
||
|
|
width.value = img.width;
|
||
|
|
height.value = img.height;
|
||
|
|
});
|
||
|
|
|
||
|
|
return {
|
||
|
|
width,
|
||
|
|
height
|
||
|
|
};
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
export enum VideoScrollDirection {
|
||
|
|
RIGHT
|
||
|
|
}
|
||
|
|
|
||
|
|
export interface VideoScrollDef {
|
||
|
|
top: number,
|
||
|
|
left: number,
|
||
|
|
direction: VideoScrollDirection,
|
||
|
|
files: string[],
|
||
|
|
style?: { [key: string]: string }
|
||
|
|
}
|
||
|
|
|
||
|
|
function getMeta(url: string): Promise<HTMLImageElement> {
|
||
|
|
return new Promise((resolve, reject) => {
|
||
|
|
let img = new Image();
|
||
|
|
img.onload = () => resolve(img);
|
||
|
|
img.onerror = () => reject();
|
||
|
|
img.src = url;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||
|
|
<style scoped>
|
||
|
|
.video-scroll img {
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
|
||
|
|
.initial {
|
||
|
|
background: red;
|
||
|
|
}
|
||
|
|
</style>
|