|
@@ -1,35 +1,42 @@
|
|
|
<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 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-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">{{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 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>
|
|
|
- <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 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>
|
|
@@ -61,9 +68,10 @@ Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- 'version': 1,
|
|
|
- 'loops': [],
|
|
|
- 'tab': 'new'
|
|
|
+ loading: true,
|
|
|
+ version: 1,
|
|
|
+ loops: [],
|
|
|
+ tab: 'new'
|
|
|
}
|
|
|
},
|
|
|
|
|
@@ -71,6 +79,7 @@ export default {
|
|
|
axios.get('/api/v2/loops')
|
|
|
.then(res => {
|
|
|
this.loops = res.data;
|
|
|
+ this.loading = false;
|
|
|
})
|
|
|
},
|
|
|
|
|
@@ -112,6 +121,9 @@ export default {
|
|
|
getTitle(loop) {
|
|
|
let content = loop.content ? loop.content : 'Untitled';
|
|
|
return content.trim();
|
|
|
+ },
|
|
|
+ truncate(str, len = 15) {
|
|
|
+ return _.truncate(str, {length: len});
|
|
|
}
|
|
|
}
|
|
|
}
|