pixelfed/resources/assets/js/components/LoopComponent.vue
2019-07-22 19:58:46 -06:00

130 lines
3.9 KiB
Vue

<template>
<div class="w-100 h-100">
<div v-if="loading" style="min-height: 400px;" class="d-flex justify-content-center align-items-center">
<img src="/img/pixelfed-icon-grey.svg" class="">
</div>
<div v-else>
<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 border border-success">
<div class="embed-responsive embed-responsive-1by1">
<video class="embed-responsive-item" :src="videoSrc(loop)" preload="none" width="100%" height="100%" loop @click="toggleVideo(loop, $event)" :poster="posterSrc(loop)"></video>
</div>
<div class="card-body">
<p class="username font-weight-bolder lead d-flex justify-content-between">
<a :href="loop.account.url" :title="loop.account.acct">{{truncate(loop.account.acct)}}</a>
<a :href="loop.url">{{timestamp(loop)}}</a></p>
<p class="small text-muted text-truncate" v-html="getTitle(loop)"></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>{{loop.reply_count}} Comments</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>
</div>
</template>
<style type="text/css">
.loops-container .card {
box-shadow: none;
}
.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 {
loading: true,
version: 1,
loops: [],
tab: 'new'
}
},
mounted() {
axios.get('/api/v2/loops')
.then(res => {
this.loops = res.data;
this.loading = false;
})
},
methods: {
videoSrc(loop) {
return loop.media_attachments[0].url;
},
posterSrc(loop) {
return loop.media_attachments[0].preview_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();
},
getTitle(loop) {
let content = loop.content ? loop.content : 'Untitled';
return content.trim();
},
truncate(str, len = 15) {
return _.truncate(str, {length: len});
}
}
}
</script>