YunoHost-Apps/pixelfed_ynh
1
0
Fork 0
mirror of https://github.com/YunoHost-Apps/pixelfed_ynh.git synced 2024-09-03 20:06:04 +02:00
Code Issues Activity Actions

Merge pull request #1546 from pixelfed/frontend-ui-refactor

Browse source 
Update LoopComponent
This commit is contained in:
daniel 2019-07-22 20:01:23 -06:00 • committed by GitHub
commit dec17bf4af
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 43 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/js/loops.js vendored
View file

File diff suppressed because one or more lines are too long

2
public/mix-manifest.json
View file

@ -15,7 +15,7 @@
"/js/developers.js": "/js/developers.js?id=a395f12c52bb0eada6ab", "/js/developers.js": "/js/developers.js?id=a395f12c52bb0eada6ab",
"/js/discover.js": "/js/discover.js?id=f8da29f2b16ae5be93fd", "/js/discover.js": "/js/discover.js?id=f8da29f2b16ae5be93fd",
"/js/hashtag.js": "/js/hashtag.js?id=b4ffe6499880acf0591c", "/js/hashtag.js": "/js/hashtag.js?id=b4ffe6499880acf0591c",
"/js/loops.js": "/js/loops.js?id=214f31fc6c2d990487d8", "/js/loops.js": "/js/loops.js?id=017e807837b173d82724",
"/js/mode-dot.js": "/js/mode-dot.js?id=8224e306cf53e3336620", "/js/mode-dot.js": "/js/mode-dot.js?id=8224e306cf53e3336620",
"/js/profile.js": "/js/profile.js?id=ea657aeb8d50b124f7e5", "/js/profile.js": "/js/profile.js?id=ea657aeb8d50b124f7e5",
"/js/quill.js": "/js/quill.js?id=9edfe94c043a1bc68860", "/js/quill.js": "/js/quill.js?id=9edfe94c043a1bc68860",

70
resources/assets/js/components/LoopComponent.vue
View file

@ -1,35 +1,42 @@
<template> <template>
<div> <div class="w-100 h-100">
<div class="mb-4"> <div v-if="loading" style="min-height: 400px;" class="d-flex justify-content-center align-items-center">
<p class="text-center"> <img src="/img/pixelfed-icon-grey.svg" class="">
<!-- <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>
<div v-if="tab != 'about'" class="row loops-container"> <div v-else>
<div class="col-12 col-md-4 mb-3" v-for="(loop, index) in loops"> <div class="mb-4">
<div class="card border border-success"> <p class="text-center">
<div class="embed-responsive embed-responsive-1by1"> <!-- <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> -->
<video class="embed-responsive-item" :src="videoSrc(loop)" preload="none" width="100%" height="100%" loop @click="toggleVideo(loop, $event)" :poster="posterSrc(loop)"></video> <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>
</div> <!-- <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> -->
<div class="card-body"> <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 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>
<p class="small text-muted text-truncate" v-html="getTitle(loop)"></p> </div>
<div class="small text-muted d-flex justify-content-between mb-0"> <div v-if="tab != 'about'" class="row loops-container">
<span>{{loop.favourites_count}} Likes</span> <div class="col-12 col-md-4 mb-3" v-for="(loop, index) in loops">
<span>{{loop.reblogs_count}} Shares</span> <div class="card border border-success">
<span>{{loop.reply_count}} Comments</span> <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>
</div> </div>
</div> <div v-else class="col-12">
<div v-else class="col-12"> <div class="card">
<div class="card"> <div class="card-body">
<div class="card-body"> <p class="lead text-center mb-0">Loops are an exciting new way to explore short videos on Pixelfed.</p>
<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>
</div> </div>
@ -61,9 +68,10 @@ Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
export default { export default {
data() { data() {
return { return {
'version': 1, loading: true,
'loops': [], version: 1,
'tab': 'new' loops: [],
tab: 'new'
} }
}, },
@ -71,6 +79,7 @@ export default {
axios.get('/api/v2/loops') axios.get('/api/v2/loops')
.then(res => { .then(res => {
this.loops = res.data; this.loops = res.data;
this.loading = false;
}) })
}, },
@ -112,6 +121,9 @@ export default {
getTitle(loop) { getTitle(loop) {
let content = loop.content ? loop.content : 'Untitled'; let content = loop.content ? loop.content : 'Untitled';
return content.trim(); return content.trim();
},
truncate(str, len = 15) {
return _.truncate(str, {length: len});
} }
} }
} }