Add LoopComponent

resources/assets/js/components/LoopComponent.vue

@@ -0,0 +1,112 @@
+<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>