From 3c3dcf84ce1e0d1fc15931c02f53d079d9f76381 Mon Sep 17 00:00:00 2001
From: Daniel Supernault <danielsupernault@gmail.com>
Date: Mon, 22 Jul 2019 19:58:46 -0600
Subject: [PATCH 1/2] Update LoopComponent

---
 .../assets/js/components/LoopComponent.vue    | 70 +++++++++++--------
 1 file changed, 41 insertions(+), 29 deletions(-)

diff --git a/resources/assets/js/components/LoopComponent.vue b/resources/assets/js/components/LoopComponent.vue
index 1498184b4..23a1c29ff 100644
--- a/resources/assets/js/components/LoopComponent.vue
+++ b/resources/assets/js/components/LoopComponent.vue
@@ -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});
 		}
 	}
 }

From 6fce4e2286b31743334cdfa7c149c5ea3411afc7 Mon Sep 17 00:00:00 2001
From: Daniel Supernault <danielsupernault@gmail.com>
Date: Mon, 22 Jul 2019 20:01:00 -0600
Subject: [PATCH 2/2] Update compiled assets

---
 public/js/loops.js       | Bin 10159 -> 10547 bytes
 public/mix-manifest.json | Bin 1575 -> 1575 bytes
 2 files changed, 0 insertions(+), 0 deletions(-)

diff --git a/public/js/loops.js b/public/js/loops.js
index ef9a57149c4a57c1983ad665b3e3dbccc2eb9a63..c6292ebb835dcb3a19057d627bdae66770b23c96 100644
GIT binary patch
delta 1234
zcmZ8f&u<$=6xOD8f>IKsmZVKEuDw-PyLh}=w^WMO3`Rvz2}FxZB_x(ryIGIzht{*!
zzH#E<T7feXAO?Cvf&=1$2+|(70M~E?32{Q=KPWeD2%h7}K=<(W%{TAYeD6EFncw>6
zJHr6|z47@rI4$MdDfc+%;DT(6(anx+Zf%)P3;c&s0%Z;StOoi01;Z#J&zPz2uGRF>
zsq3rg&{s1nPf;=hT`IgmP4)^;8mK=h9G(WQdVoP12A=+~`1qn_*;xP@isp;R72!=&
z4*NSIGdWlL1Ce$r7<i#&Wx@0x-n(Z@%c^2<Ic!Z0mp+~CW7o9J8tR{mCF=E{c<mH0
z)K?Zq)c>o+^967i=07ej83yJ*EgdZ^0v}HZ`gD0?fkM80w0s@8*TiR1cMxR?-9*T)
z>NT-eb55WDLpz(@lIt`(X=YQx2{cd8rIpQ>F=WDVCL%#G-i@+K#DnlSVb<i~9BLA|
zgCX|p{r|L>mS}>0cje7ji8x}1As6mWgrWt+Ms4Q%Q=dhA93zt72w7jWAtLuOC8WbF
z7OzADI$jAUP2w?Zk<s<ljYlx#V`%%B-&pMyE<h7Hws2JzNu;OsElasn(isz6wL$-K
z2F}6cI0iv>6QNS+96t{A?XwrpA*(hVmhwG!hcsl%VUjRO48MPNJXPBAT8r#UYwyu|
zeqDQ^fDViF-SzeS>iW?FVSk;!zk*y&HDE^^XvEJpKA;S5^J}udZ<Zobh#U7HY2QfO
z0-G2J5{7a!(NA~9^V16wf(U8RC%b4VQZtH7T@&;mVUr@J_r7wY!9d9NEC-y)WWr$k
zcBG$MF6+0S_~CStMs0ecU-g*YF72%_<(@#i+Q<(}zZnNiWkVT9O86c6D@diSW^4!^
zW!+(4$hnA~ZCKWB3hjzl<^NvNrdsnzI{1yN%}l6aCM$Pn3$yCBV&j<-eK9#6H08Fm
zP5p8C4AJss`E|W?VRd7#-tfFiZ)(j63+Cgt^xx(6gLb`>h*9OOAu8zX*W*+wnywy`
z5hTq7y0Q*R^zj5T8LCJ@{F>TNgg-X>AnQE=-JUXi^J&i;j7(xIpfRA|HQ6{)Dnoya
zS?rrz1Z@pqB$AG3*MWM~AM0jf-^JZ7WjRED{%84}0%r;oRTpj)$LUbgPU2Wi%PRNI
eu1yBX%xU<4n3I2W@ed<ExO9n>m49I^8~*^w7ov^;

delta 875
zcmZ8fL2DC16lT*Tm1ujgP1>}vO}BKNb=Pg$QYeW-q(uvgtw=#|UF<ZOGy}<Q*qNlQ
zX%3zR6$X0~^e$G|gBSH0j~2v};6Kn`Aow;ZBHhE=H{ZN(zIkuH;NJ1(`;Usk<tOFM
z3fGGwk35{i7;}rcWxBsvLF)Xxsuy|wEDE4&@VsyE;3%RfF@}9pmD@=}b_dpnnGT<!
zX0HI*<T4X|03v(QOA3=OqsQkt7FEV=&#`mzMQk*#X~?&^WHI$7!vgSv>Ne{;)K@VU
z2My{~vdqpon&#W#-#I))uBOc}d(kO|0lRrvqh6{a)nM`@mI19_vDE=?GPxAr2mQD4
z@hI0#7JP{hDhdm}4t67Pj@uo8UM12IDEV+<YMtR+fnD>g2Jr>AYSi5o)dDjN{S>m9
zgZ%z3q<W#^`3MN7&_9CA3{Bi-j!AXBLu;J2Tg1;2Y&$(dU*s$YM2OXB@+vy`Pa-^`
zz~z&nhj(FcFddU&YV8nCiyWq5^z(d}n*_H@oI}3gm~~oa1ky#v<X+P+(L1C8%O$5%
zfH^uv2=eN1`W$m`o0an{*cjf8PV)k*AZiJpxExxmYnrg&NWBg44C3<JMK;Dey&BHk
z-5M31tM{5?a%*IEjF~eFy6NFPYX>}p+-9w2x-j8qBkj;>iDVJtt>ja9p6|&UQKp+j
zZl_Yga;h5v?9ceo5W{Zh0Yor|E51%Y2S#q<9mJm#83GQmN>x@XZ+K-2x3wu4Ls&ko
zdo8*aZh#S}0}p-r7DWMW=F}If6dIxk91-s4g+&?->X!Q)u6H`%gq1BKuP3JD<H^r*
zEwdMNGd~oWo}L8p<>~v1El=iBK`Tq58K|~}^{9m)aF`e=mAs}4hn7kr7@hmA1hLDr
K&~l)ogz^^?t|1iw

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 14b5e53396db9d9bf4a1409d34ef5ba83cf0b3f2..b56897802148db39a50f3f7f79deed765fd2d326 100644
GIT binary patch
delta 33
ocmZ3^vz%vxJBx^cp?Ru>fw_gTd6J>Iaf*eJxsl1{XqGdK0GYoC`v3p{

delta 33
ocmZ3^vz%vxJBx^sp-GytVOp|TvQdhqrGbfsd5Xp6XqGdK0HTKpj{pDw