pixelfed/resources/assets/js/components/LoopComponent.vue

<template>
	<div>
		<div class="mb-4">
			<p class="text-center">
				<a :class="[tab == 'popular'? 'btn font-weight-bold py-0 btn-success' : 'btn font-weight-bold py-0 btn-outline-success']" href="#" @click.prevent="setTab('popular')">Popular</a>
				<a :class="[tab == 'new'? 'btn font-weight-bold py-0 btn-success' : 'btn font-weight-bold py-0 btn-outline-success']" href="#" @click.prevent="setTab('new')">New</a>
				<a :class="[tab == 'random'? 'btn font-weight-bold py-0 btn-success' : 'btn font-weight-bold py-0 btn-outline-success']" href="#" @click.prevent="setTab('random')">Random</a>
				<a :class="[tab == 'about'? 'btn font-weight-bold py-0 btn-success' : 'btn font-weight-bold py-0 btn-outline-success']" href="#" @click.prevent="setTab('about')">About</a>
			</p>
		</div>
		<div v-if="tab != 'about'" class="row loops-container">
			<div class="col-12 col-md-4 mb-3" v-for="(loop, index) in loops">
				<div class="card">
					<div class="embed-responsive embed-responsive-1by1">
						<video class="embed-responsive-item" :src="videoSrc(loop)" preload="auto" loop @click="toggleVideo(loop, $event)"></video>
					</div>
					<div class="card-body">
						<p class="username font-weight-bolder"><a :href="loop.account.url">{{loop.account.acct}}</a> , <a :href="loop.url">{{timestamp(loop)}}</a></p>
						<p class="small text-muted" v-html="loop.content"></p>
						<div class="small text-muted d-flex justify-content-between mb-0">
							<span>{{loop.favourites_count}} Likes</span>
							<span>{{loop.reblogs_count}} Shares</span>
							<span>0 Loops</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-else class="col-12">
			<div class="card">
				<div class="card-body">
					<p class="lead text-center mb-0">Loops are an exciting new way to explore short videos on Pixelfed.</p>
				</div>
			</div>
		</div>
	</div>
</template>

<style type="text/css">
	.loops-container .card {
		box-shadow: none;
		border-radius: 0;
	}
	.loops-container .card .card-img-top{
		border-radius: 0;
	}
	.loops-container a {
		color: #343a40;
	}
	a.hashtag,
	.loops-container .card-body a:hover {
		color: #28a745 !important;
	}
</style>

<script type="text/javascript">
Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
    get: function(){
        return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
    }
})
export default {
	data() {
		return {
			'version': 1,
			'loops': [],
			'tab': 'popular'
		}
	},

	mounted() {
		axios.get('/api/v2/loops')
			.then(res => {
				this.loops = res.data;
			})
	}, 

	methods: {
		videoSrc(loop) {
			return loop.media_attachments[0].url;
		},
		setTab(tab) {
			this.tab = tab;
		},
		toggleVideo(loop, $event) {
			let el = $event.target;
			$('video').each(function() {
				if(el.src != $(this)[0].src) {
					$(this)[0].pause();
				}
			});
			if(!el.playing) {
				el.play();
				this.incrementLoop(loop);
			} else {
				el.pause();
			}
		},
		incrementLoop(loop) {
			axios.post('/api/v2/loops/watch', {
				id: loop.id
			}).then(res => {
				console.log(res.data);
			});
		},
		timestamp(loop) {
			let ts = new Date(loop.created_at);
			return ts.toLocaleDateString();
		}
	}
}
</script>