Browse Source

Update Timeline.vue component

Daniel Supernault 6 years ago
parent
commit
c11a12edfa
1 changed files with 55 additions and 2 deletions
  1. 55 2
      resources/assets/js/components/Timeline.vue

+ 55 - 2
resources/assets/js/components/Timeline.vue

@@ -39,6 +39,33 @@
 							</div>
 						</div>
 					</div>
+
+					<div v-if="index == 4 && showHashtagPosts && hashtagPosts.length" class="card mb-sm-4 status-card card-md-rounded-0">
+						<div class="card-header d-flex align-items-center justify-content-between bg-white border-0 pb-0">
+							<span></span>
+							<h6 class="text-muted font-weight-bold mb-0"><a :href="'/discover/tags/'+hashtagPostsName+'?src=tr'">#{{hashtagPostsName}}</a></h6>
+							<span class="cursor-pointer text-muted" v-on:click="showHashtagPosts = false"><i class="fas fa-times"></i></span>
+						</div>
+						<div class="card-body row mx-0">
+							<div v-for="(tag, index) in hashtagPosts" class="col-4 p-0 p-sm-2 p-md-3 hashtag-post-square">
+								<a class="card info-overlay card-md-border-0" :href="tag.status.url">
+									<div :class="[tag.status.filter ? 'square ' + tag.status.filter : 'square']">
+										<div class="square-content" :style="'background-image: url('+tag.status.thumb+')'"></div>
+										<div class="info-overlay-text">
+											<h5 class="text-white m-auto font-weight-bold">
+												<span class="pr-4">
+													<span class="far fa-heart fa-lg pr-1"></span> {{tag.status.like_count}}
+												</span>
+												<span>
+													<span class="fas fa-retweet fa-lg pr-1"></span> {{tag.status.share_count}}
+												</span>
+											</h5>
+										</div>
+									</div>
+								</a>
+							</div>
+						</div>
+					</div>
 					<div class="card mb-sm-4 status-card card-md-rounded-0">
 						<div v-if="!modes.distractionFree" class="card-header d-inline-flex align-items-center bg-white">
 							<img v-bind:src="status.account.avatar" width="32px" height="32px" style="border-radius: 32px;">
@@ -440,8 +467,9 @@
 				replyStatus: {},
 				replyText: '',
 				emoji: ['๐Ÿ˜€','๐Ÿคฃ','๐Ÿ˜ƒ','๐Ÿ˜„','๐Ÿ˜†','๐Ÿ˜‰','๐Ÿ˜Š','๐Ÿ˜‹','๐Ÿ˜˜','๐Ÿ˜—','๐Ÿ˜™','๐Ÿ˜š','๐Ÿค—','๐Ÿคฉ','๐Ÿค”','๐Ÿคจ','๐Ÿ˜','๐Ÿ˜‘','๐Ÿ˜ถ','๐Ÿ™„','๐Ÿ˜','๐Ÿ˜ฃ','๐Ÿ˜ฅ','๐Ÿ˜ฎ','๐Ÿค','๐Ÿ˜ช','๐Ÿ˜ซ','๐Ÿ˜ด','๐Ÿ˜Œ','๐Ÿ˜›','๐Ÿ˜œ','๐Ÿ˜','๐Ÿคค','๐Ÿ˜’','๐Ÿ˜“','๐Ÿ˜”','๐Ÿ˜•','๐Ÿ™ƒ','๐Ÿค‘','๐Ÿ˜ฒ','๐Ÿ™','๐Ÿ˜–','๐Ÿ˜ž','๐Ÿ˜Ÿ','๐Ÿ˜ค','๐Ÿ˜ญ','๐Ÿ˜ฆ','๐Ÿ˜ง','๐Ÿ˜จ','๐Ÿ˜ฉ','๐Ÿคฏ','๐Ÿ˜ฌ','๐Ÿ˜ฐ','๐Ÿ˜ฑ','๐Ÿ˜ณ','๐Ÿคช','๐Ÿ˜ต','๐Ÿ˜ก','๐Ÿ˜ ','๐Ÿคฌ','๐Ÿ˜ท','๐Ÿค’','๐Ÿค•','๐Ÿคข','๐Ÿคฎ','๐Ÿคง','๐Ÿ˜‡','๐Ÿค ','๐Ÿคก','๐Ÿคฅ','๐Ÿคซ','๐Ÿคญ','๐Ÿง','๐Ÿค“','๐Ÿ˜ˆ','๐Ÿ‘ฟ','๐Ÿ‘น','๐Ÿ‘บ','๐Ÿ’€','๐Ÿ‘ป','๐Ÿ‘ฝ','๐Ÿค–','๐Ÿ’ฉ','๐Ÿ˜บ','๐Ÿ˜ธ','๐Ÿ˜น','๐Ÿ˜ป','๐Ÿ˜ผ','๐Ÿ˜ฝ','๐Ÿ™€','๐Ÿ˜ฟ','๐Ÿ˜พ','๐Ÿคฒ','๐Ÿ‘','๐Ÿค','๐Ÿ‘','๐Ÿ‘Ž','๐Ÿ‘Š','โœŠ','๐Ÿค›','๐Ÿคœ','๐Ÿคž','โœŒ๏ธ','๐ŸคŸ','๐Ÿค˜','๐Ÿ‘ˆ','๐Ÿ‘‰','๐Ÿ‘†','๐Ÿ‘‡','โ˜๏ธ','โœ‹','๐Ÿคš','๐Ÿ–','๐Ÿ––','๐Ÿ‘‹','๐Ÿค™','๐Ÿ’ช','๐Ÿ–•','โœ๏ธ','๐Ÿ™','๐Ÿ’','๐Ÿ’„','๐Ÿ’‹','๐Ÿ‘„','๐Ÿ‘…','๐Ÿ‘‚','๐Ÿ‘ƒ','๐Ÿ‘ฃ','๐Ÿ‘','๐Ÿ‘€','๐Ÿง ','๐Ÿ—ฃ','๐Ÿ‘ค','๐Ÿ‘ฅ'],
-				showHashtagPosts: true,
-				hashtagPosts: []
+				showHashtagPosts: false,
+				hashtagPosts: [],
+				hashtagPostsName: '',
 			}
 		},
 
@@ -544,6 +572,7 @@
 					this.max_id = Math.min(...ids);
 					$('.timeline .pagination').removeClass('d-none');
 					this.loading = false;
+					this.fetchHashtagPosts();
 				}).catch(err => {
 				});
 			},
@@ -1106,6 +1135,30 @@
 						}
 					}, 10000);
 				});
+			},
+
+			fetchHashtagPosts() {
+
+				axios.get('/api/local/discover/tag/list')
+				.then(res => {
+					let tags = res.data;
+					if(tags.length == 0) {
+						return;
+					}
+					let hashtag = tags[0];
+					this.hashtagPostsName = hashtag;
+					axios.get('/api/v2/discover/tag', {
+						params: {
+							hashtag: hashtag
+						}
+					}).then(res => {
+						if(res.data.tags.length) {
+							this.showHashtagPosts = true;
+							this.hashtagPosts = res.data.tags.splice(0,3);
+						}
+					})
+				})
+
 			}
 		}
 	}