2022-04-09 02:59:50 +05:30
|
|
|
<template>
|
2023-08-13 23:01:57 +05:30
|
|
|
<div ref="scrollable" class="h-screen-sm overflow-x-scroll">
|
2022-04-09 02:59:50 +05:30
|
|
|
<VideoItem
|
|
|
|
v-for="(related, index) in playlist.relatedStreams"
|
|
|
|
:key="related.url"
|
2022-11-01 17:42:54 +05:30
|
|
|
:item="related"
|
2022-04-09 02:59:50 +05:30
|
|
|
:index="index"
|
|
|
|
:playlist-id="playlistId"
|
|
|
|
height="94"
|
|
|
|
width="168"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { nextTick } from "vue";
|
|
|
|
import VideoItem from "./VideoItem.vue";
|
|
|
|
export default {
|
|
|
|
components: { VideoItem },
|
|
|
|
props: {
|
|
|
|
playlist: {
|
|
|
|
type: Object,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
playlistId: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
selectedIndex: {
|
|
|
|
type: Number,
|
2023-07-27 17:16:05 +05:30
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
playlist: {
|
|
|
|
handler() {
|
|
|
|
if (this.selectedIndex - 1 < this.playlist.relatedStreams.length)
|
|
|
|
nextTick(() => {
|
|
|
|
this.updateScroll();
|
|
|
|
});
|
|
|
|
},
|
|
|
|
deep: true,
|
2022-04-09 02:59:50 +05:30
|
|
|
},
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.updateScroll();
|
2023-02-19 19:11:13 +05:30
|
|
|
this.updateWatched(this.playlist.relatedStreams);
|
2022-04-09 02:59:50 +05:30
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
updateScroll() {
|
|
|
|
const elems = Array.from(this.$refs.scrollable.children).filter(elm => elm.matches("div"));
|
|
|
|
const index = this.selectedIndex - 1;
|
|
|
|
if (index < elems.length)
|
|
|
|
this.$refs.scrollable.scrollTop =
|
|
|
|
elems[this.selectedIndex - 1].offsetTop - this.$refs.scrollable.offsetTop;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|