Vue Youtube teaser playing in the thumnail to the right - vue.js

Question

I am having a video site. Where users can upload YouTube videos. The teasers of the videos should be playing on top of the same thumbnail. However they are playing on the thumbnail to the right behind the next thumbnail. and the last one is playing outside the container. Below is my code
kYoutube.vue
<script>
const getLogger = require('webpack-log');
const log = getLogger({ name: 'vue-khal' });
import VueYoutube from 'vue-youtube';
export default {
extends: VueYoutube,
methods : {
playerStateChange(e) {
log.info ("PSC on " + e.data);
if (e.data !== null && e.data !== -1) {
this.$emit(this.events[e.data], e.target)
}
}
}
}
</script>
PreVideo.vue
<template>
<div class="vid-cont">
<div class="thumb-place">
<PreImage :post="post" :sizes="sizes" #loaded="handleLoad"></PreImage>
</div>
<label v-if="post.proof_img == null">
<div #mouseover="startVideo" #click="emitClick" v-bind:class="thumbZ">
<img ref="pimage" :src="post.post_image.image"
:srcset="post.post_image.thumbs"
:sizes="sizes" style="object-fit: cover;"/>
<img v-if="playImg" class="pre-play-button" :src="playImg" :key="playImg"/>
</div>
<div v-if="iReady" class="player-cont" :key="iReady">
<youtube :video-id="videoId" ref="youtube"
#playing="playing" #ended="ended" #cued="ended" #paused="paused"
:width="width" :height="height"
:player-vars="playerVars" :fitParent="true"></youtube>
</div>
<div class="player-cont player-trans" #mouseout="pausePreview" #click="emitClick">
</div>
</label>
</div>
</template>
<script>
import PreImage from './PreImage';
const getLogger = require('webpack-log');
const log = getLogger({ name: 'vue-khal' });
export default {
name: 'Video',
props: [
'post',
'sizes',
],
components: {
PreImage
//VueYoutube
},
data() {
return {
'first': this.post.post_image,
'videoId': this.post.video_id,
'width': 0,
'height': 0,
'iReady': false,
'playerVars': {
'autoplay': 0,
'rel': 0,
'enablejsapi': 1,
'controls': 0,
'disablekb': 1,
'fs': 0,
'modestbranding': 1,
'cc_load_policy': 0,
'origin': document.location.origin
},
'playImg': null,
'pReload': false,
'rates': [],
'preview': false,
'duration': 0,
'count': 1,
'userState': -1,
'numSkips': 3,
};
},
computed: {
thumbZ: function() {
return {
'thumb-cont': true,
'thumb-top': (this.userState < 3)
};
},
},
mounted() {
var that = this;
this.api.map_prom.then(() => {
that.playImg = that.api.mkstatic("youtube_red.png");
that.pReload = !that.pReload;
});
},
updated() {
var that = this;
this.$nextTick(function() {
if (that.iReady && that.userState < 0) {
that.$refs.youtube.player.mute().then(() => {
that.toState(0);
that.$refs.youtube.player.playVideo().then(() => {
});
});
}
});
},
methods: {
emitClick() {
this.$emit("clicked");
},
pausePreview() {
this.toState(1);
this.$refs.youtube.player.stopVideo();
},
delayedPause() {
var that = this;
this.toState(2);
that.$refs.youtube.player.pauseVideo().then(function(){
//log.info ("Paused ?? ");
that.$refs.youtube.player.getPlayerState();/*.then(data => {
//log.info ("STATE is " + data);
});*/
});
},
jump() {
if (this.userState <= 2)
return;
var that = this;
var ct = parseInt(this.duration * this.count / this.numSkips);
//log.info ("Jump call " + that.count);
if (this.count <= this.numSkips) {
this.$refs.youtube.player.seekTo(ct, true).then(function(){
//that.$refs.youtube.player.getPlayerState().then(data => {
//log.info ("STATE " + data + " Jumped to " + ct + " at " + (new Date()).getTime());
that.count++;
that.$refs.youtube.player.pauseVideo().then(function(){
/*that.$refs.youtube.player.playVideo().then(function(){
//setTimeout(that.jump.bind(that), 10000);
});*/
});
//});
});
}
else {
this.$refs.youtube.player.stopVideo();
}
},
toState(state) {
//log.info ("From " + this.userState + " to " + state);
this.userState = state;
},
/* If you are paused, play */
paused() {
switch (this.userState) {
case 2:
//log.info ("Paused, playback " + this.count);
if (this.count <= this.numSkips) {
this.toState(3);
this.$refs.youtube.player.playVideo();
}
else {
this.$refs.youtube.player.stopVideo();
}
break;
case 3:
case 4:
var that = this;
that.$refs.youtube.player.playVideo().then(function(){
setTimeout(that.jump.bind(that), 2000);
});
break;
}
},
/* If you're playing, pause in a sec */
playing() {
//log.info ("Playing called " + this.userState);
switch (this.userState) {
case 0:
var that = this;
that.$refs.youtube.player.pauseVideo().then(() => {
if (!that.duration) {
that.$refs.youtube.player.mute().then(() => {
that.$refs.youtube.player.getDuration().then(data => {
that.duration = data;
//log.info ("Duration " + that.duration);
that.$refs.youtube.player.getAvailablePlaybackRates().then (data => {
//log.info ("Data is " + data);
that.rates = data;
let rate = Math.max.apply(null, that.rates);
that.$refs.youtube.player.setPlaybackRate(rate).then(() => {
//log.info ("Suggested is " + rate);
this.toState(1);
});
});
});
});
}
else {
this.toState(1);
}
})
break;
case 3:
this.toState(4);
setTimeout(this.jump.bind(that), 2000);
}
},
startVideo() {
if (this.userState == 1) {
this.toState(2);
this.paused();
}
},
handleLoad(ev, post) {
this.post = post;
if (!this.$parent.modalOpen) {
//this.post.post_image = post_image;
this.height = ev.target.clientHeight;
this.width = ev.target.clientWidth;
log.info ("PREvid handle load** " + this.width);
this.iReady = true;
}
},
ended() {
//log.info ("ENDED indeed");
this.count = 1;
this.toState(0);
this.$refs.youtube.player.playVideo();
},
}
}
</script>
<style>
</style>
PostList.vue
<template>
<div>
<div ref="me" :class="postListClass" :style="`top: -${scrollOff}px`">
<Loading :loading="loading == 'L'" :loaderror="loading =='E'"></Loading>
<table class="table">
<tbody>
<tr v-for="row in posts" :key="row">
<td v-for="post in row" :key="post">
<div class="post-grid" v-if="post.post_image != null" ref="postgrid" :key="post">
<PreVideo v-if="post.video_id" :post="post" :sizes="sizes" #clicked="selectPost(post.pk)">
</PreVideo>
<PreVideoFile v-else-if="post.video_file" :post="post" :sizes="sizes" #clicked="selectPost(post.pk)">
</PreVideoFile>
<PreImage v-else :post="post" :sizes="sizes" #clicked="selectPost(post.pk)">
</PreImage>
<div class="post-title" #click="selectPost(post.pk)">
<KTruncate :inhtml="post.title" :stripped="post.title" :nomore="true" length="30"></KTruncate>
</div>
<div class="post-user">
by <a :href="post.user.profile.url">{{post.user.full_name}}</a>
</div>
<div class="post-synopsis">
<KTruncate :inhtml="post.message" :stripped="post.stripped" :nomore="true" length="60">
</KTruncate>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="way-container" v-if="nextPageURL !== '' || loading == 'E'">
<Loading :loading="'L'" :key="loading" :loaderror="loading == 'E'" class="way-div" v-waypoint="{ active: true, callback: onWaypoint, options: intersectionOptions }" id="More">
</Loading>
</div>
</div>
<PostModal v-if="selectedPost > 0" ref="modal" :pk="selectedPost"
#closed="onHideDetail" #modalOut="onModalOut" :key="selectedPost"></PostModal>
</div>
</template>
<script>
/* eslint-disable no-console */
import Loading from './Loading';
import PostModal from './PostModal';
import KTruncate from './KTruncate';
import PreVideo from './PreVideo';
import PreVideoFile from './PreVideoFile';
import PreImage from './PreImage';
const getLogger = require('webpack-log');
const log = getLogger({ name: 'vue-khal' });
const getOffsetTop = element => {
let offsetTop = 0;
while(element) {
offsetTop += element.offsetTop;
element = element.offsetParent;
}
return offsetTop;
}
export default {
name: 'PostList',
components: {
Loading,
PostModal,
KTruncate,
PreVideo,
PreVideoFile,
PreImage
},
data() {
return {
scrollOff: 0,
origTop: null,
postListClass: "post-scroll",
selectedPost:0,
posts: [],
numberOfPages:0,
pages : [],
numberOfPosts:0,
loading: null, //false,
nextPageURL:'',
previousPageURL:'',
size:'',
winWidth: window.innerWidth,
intersectionOptions: {
root: null,
//rootMargin: '0px 0px 0px 0px',
threshold: [0.25, 0.75] // [0.25, 0.75] if you want a 25% offset!
},
divisor: 4,
modalOpen: false,
};
},
watch: {
pk: function (newpk, oldpk) {
log.info ("Change from " + oldpk + " to " + newpk);
}
},
methods: {
onWaypoint ({ going, direction }) {
if (!this.loading) {
// going: in, out
// direction: top, right, bottom, left
if (going === this.$waypointMap.GOING_IN &&
direction === this.$waypointMap.DIRECTION_TOP &&
this.nextPageURL != '') {
log.info ("Waypoint " + this.nextPageURL + " ??");
this.loading = 'L'; //true;
this.api.getItemsByURL(this.nextPageURL).then((page) => {
this.posts = this.posts.concat(this.breakupPosts(page.data));// this.posts = page.data;
this.nextPageURL = page.nextlink;
this.previousPageURL = page.prevlink;
this.loading = null; //false;
}).catch (err => {
log.info ("Waypoint err " + err.code + " " + err.message);
this.loading = 'E';
});
}
}
},
breakupPosts(data) {
let posts = [];
for (let i = 0; i < data.length; i++) {
let row = parseInt(i / this.divisor);
if (row >= posts.length)
posts.push([]);
posts[parseInt(i / this.divisor)].push(data[i]);
}
return posts;
/*this.posts = page.data.reduce((acc, k) => {
acc[parseInt(k/3)].push(page.data[k])
return acc;
}, {});*/
},
getPosts(){
if (this.origTop == null) {
this.origTop = getOffsetTop(this.$refs.me);
}
this.loading = 'L'; //true;
this.api.getFeedPosts().then((page) => {
this.setPage(page);
this.numberOfPosts = page.count;
this.numberOfPages = page.numpages;
if(this.numberOfPages) {
for(var i = 1 ; i <= this.numberOfPages ; i++) {
const link = `/api/posts/?page=${i}`;
this.pages.push({pageNumber: i , link: link})
}
}
}).catch (err => {
log.info ("Final status* " + err.code + " " + err.message);
this.loading = 'E';
});
},
getPage(link){
this.loading = 'L'; //true;
this.api.getItemsByURL(link).then((page) => {
this.setPage(page);
}).catch (err => {
log.info ("GetPage err " + err.code + " " + err.message);
this.loading = 'E';
});
},
getNextPage(){
this.loading = 'L'; // true;
this.api.getItemsByURL(this.nextPageURL).then((page) => {
this.setPage(page);
}).catch (err => {
log.info ("GetNextPage err " + err.code + " " + err.message);
this.loading = 'E';
});
},
setPage(page) {
this.posts = this.breakupPosts(page.data);//this.posts = page.data;
this.nextPageURL = page.nextlink;
this.previousPageURL = page.prevlink;
this.sizes = page.sizes;
this.loading = null; //false;
},
getPreviousPage(){
this.loading = 'L'; // true;
this.api.getItemsByURL(this.previousPageURL).then((page) => {
this.setPage(page);
}).catch (err => {
log.info ("Get Prev err " + err.code + " " + err.message);
this.loading = 'E';
});
},
onHideDetail() {
this.postListClass = "post-scroll";
let sides = document.getElementsByClassName ("tofix");
for (let i = 0; i < sides.length; i++) {
sides[i].classList.remove ("postbg-fixed");
}
log.info ("On hide detail " + this.selectedPost);
this.selectedPost = 0;
},
onModalOut() {
setTimeout(this.scroller.bind(this), 100);
},
scroller() {
document.documentElement.scrollTop = document.body.scrollTop = this.scrollOff + this.origTop; //document.body.scrollTop = this.scrollOff;
this.scrollOff = 0;
},
selectPost(post) {
log.info ("Select post called " + post );
this.selectedPost = post;
this.modalOpen = true;
this.scrollOff = (window.pageYOffset || document.documentElement.scrollTop) - this.origTop;
this.postListClass = "post-fixed";
let sides = document.querySelectorAll ("tofix");
for (let i = 0; i < sides.length; i++) {
sides[i].classList.add ("postbg-fixed");
}
log.info ("Select post done " + this.selectedPost);
},
getDivisor() {
let u600 = window.matchMedia('(min-width: 600px)');
let u900 = window.matchMedia('(min-width: 900px)');
this.divisor = u600.matches ? (u900.matches ? 4 : 3) : 2;
},
handleResize() {
if (window.innerWidth != this.winWidth) {
this.winWidth = window.innerWidth;
this.getDivisor();
this.posts = this.breakupPosts(this.posts.flat());
}
},
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize);
},
updated() {
},
mounted() {
this.getPosts();
this.getDivisor();
window.addEventListener('resize', this.handleResize);
},
}
</script>
<style scoped>
.table>tbody>tr>td {
border-top: transparent;
}
.post-fixed {
position: fixed;
z-index: -1;
opacity: 0;
}
#More {
-height: 100px;
}
</style>