|
@@ -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>
|