pixelfed/resources/assets/components/Discover.vue

<template>
	<div class="web-wrapper">
		<div v-if="isLoaded" class="container-fluid mt-3">
			<div class="row">
				<div class="col-md-4 col-lg-3">
					<sidebar :user="profile" />
				</div>

				<div v-if="tab == 'index'" class="col-md-8 col-lg-9 mt-n4">
					<div v-if="profile.is_admin" class="d-md-flex my-md-3">
						<grid-card
							:dark="true"
							:title="'Hello ' + profile.username"
							subtitle="Welcome to the new Discover experience! Only admins can see this"
							button-text="Manage Discover Settings"
							button-link="/i/web/discover/settings"
							icon-class="fal fa-cog"
							:small="true" />
					</div>
					<!-- <section class="mb-1 mb-md-3 mb-lg-4">
						<news-slider />
					</section> -->

					<!-- <discover-spotlight /> -->

					<!-- <div class="d-md-flex my-md-3">
						<grid-card
							:dark="true"
							title="The Not So Trending"
							subtitle="Explore the posts that deserve more attention"
							button-text="Explore posts"
							icon-class="fal fa-analytics"
							button-link="/i/web/discover/future-trending"
							:button-event="true"
							v-on:btn-click="toggleTab('trending')"
							:small="true" />

						<grid-card
							title="Behind The Posts"
							subtitle="Discover the people"
							button-text="Discover People"
							button-link="/i/web/discover/people"
							icon-class="fal fa-user-friends"
							:small="true" />
					</div> -->

					<daily-trending v-on:btn-click="toggleTab('trending')"/>

					<!-- <div class="d-md-flex my-md-3">
						<grid-card
							title="Explore Loops"
							subtitle="Loops are short, looping videos"
							button-text="Explore Loops"
							icon-class="fal fa-camcorder"
							button-link="/i/web/discover/loops"
							:small="false" />

						<grid-card
							:dark="true"
							title="Popular Places"
							subtitle="Explore posts by popular locations"
							button-text="Explore Popular Places"
							icon-class="fal fa-map"
							:button-event="true"
							v-on:btn-click="toggleTab('popular-places')"
							button-link="/i/web/discover/popular-places"
							:small="false" />
					</div> -->

					<div class="d-md-flex my-md-3">
						<grid-card
							v-if="config.hashtags.enabled"
							:dark="true"
							title="My Hashtags"
							subtitle="Explore posts tagged with hashtags you follow"
							button-text="Explore Posts"
							button-link="/i/web/discover/my-hashtags"
							icon-class="fal fa-hashtag"
							:small="false" />

						<grid-card
							v-if="config.memories.enabled"
							title="My Memories"
							subtitle="A distant look back"
							button-text="View Memories"
							button-link="/i/web/discover/my-memories"
							icon-class="fal fa-history"
							:small="false" />
					</div>

					<div class="d-md-flex my-md-3">
						<grid-card
							v-if="config.insights.enabled"
							title="Account Insights"
							subtitle="Get a rich overview of your account activity and interactions"
							button-text="View Account Insights"
							icon-class="fal fa-user-circle"
							button-link="/i/web/discover/account-insights"
							:small="false" />

						<grid-card
							v-if="config.friends.enabled"
							:dark="true"
							title="Find Friends"
							subtitle="Find accounts to follow based on common interests"
							button-text="Find Friends & Followers"
							button-link="/i/web/discover/find-friends"
							icon-class="fal fa-user-plus"
							:small="false" />
					</div>

					<div class="d-md-flex my-md-3">
						<grid-card
							v-if="config.server.enabled && config.server.domains && config.server.domains.length"
							:dark="true"
							title="Server Timelines"
							subtitle="Browse timelines of a specific remote instance"
							button-text="Browse Server Feeds"
							icon-class="fal fa-list"
							button-link="/i/web/discover/server-timelines"
							:small="false" />

						<!-- <grid-card
							title="Curate the Spotlight"
							subtitle="Apply to curate the spotlight for one week"
							button-text="Apply to Curate Spotlight"
							button-link="/i/web/discover/spotlight/curate/apply"
							icon-class="fal fa-thumbs-up"
							:small="false" /> -->
					</div>
				</div>

				<div v-else-if="tab == 'trending'" class="col-md-8 col-lg-9 mt-n4">
					<discover :profile="profile" />
				</div>

				<div v-else-if="tab == 'popular-places'" class="col-md-8 col-lg-9 mt-n4">
					<section class="mt-3 mb-5 section-explore">
						<div class="profile-timeline">
							<div class="row p-0 mt-5">
								<div class="col-12 mb-4 d-flex justify-content-between align-items-center">
									<p class="d-block d-md-none h1 font-weight-bold mb-0 font-default">Popular Places</p>
									<p class="d-none d-md-block display-4 font-weight-bold mb-0 font-default">Popular Places</p>
								</div>
							</div>
						</div>

						<div class="row mt-5">
							<div class="col-12 col-md-12 mb-3">
								<div class="card-img big">
									<img src="/img/places/nyc.jpg">
									<div class="title font-default">New York City</div>
								</div>
							</div>

							<div class="col-12 col-md-6 mb-3">
								<div class="card-img">
									<img src="/img/places/edmonton.jpg">
									<div class="title font-default">Edmonton</div>
								</div>
							</div>

							<div class="col-12 col-md-6 mb-3">
								<div class="card-img">
									<img src="/img/places/paris.jpg">
									<div class="title font-default">Paris</div>
								</div>
							</div>

							<div class="col-12 col-md-4 mb-3">
								<div class="card-img">
									<img src="/img/places/london.jpg">
									<div class="title font-default">London</div>
								</div>
							</div>

							<div class="col-12 col-md-4 mb-3">
								<div class="card-img">
									<img src="/img/places/vancouver.jpg">
									<div class="title font-default">Vancouver</div>
								</div>
							</div>

							<div class="col-12 col-md-4 mb-3">
								<div class="card-img">
									<img src="/img/places/toronto.jpg">
									<div class="title font-default">Toronto</div>
								</div>
							</div>
						</div>
					</section>
				</div>

			</div>

			<drawer />
		</div>
	</div>
</template>

<script type="text/javascript">
	import Drawer from './partials/drawer.vue';
	import Sidebar from './partials/sidebar.vue';
	import Rightbar from './partials/rightbar.vue';
	import Discover from './sections/DiscoverFeed.vue';
	import DiscoverNewsSlider from './partials/discover/news-slider.vue';
	import DiscoverSpotlight from './partials/discover/discover-spotlight.vue';
	import DailyTrending from './partials/discover/daily-trending.vue';
	import DiscoverGridCard from './partials/discover/grid-card.vue';

	export default {
		 components: {
		 	"drawer": Drawer,
            "sidebar": Sidebar,
            "rightbar": Rightbar,
            "discover": Discover,
            "news-slider": DiscoverNewsSlider,
            "discover-spotlight": DiscoverSpotlight,
            "daily-trending": DailyTrending,
            "grid-card": DiscoverGridCard
        },

        data() {
        	return {
        		isLoaded: false,
        		profile: undefined,
        		config: {},
        		tab: 'index',
        		popularAccounts: [],
        		followingIndex: undefined
        	}
        },

        updated() {
			// let u = new URLSearchParams(window.location.search);
			// if(u.has('ft') && u.get('ft') == '1') {
			// 	this.tab = 'index';
			// }
        },

        mounted() {
			this.profile = window._sharedData.user;
			this.fetchConfig();
        },

        methods: {
			fetchConfig() {
				axios.get('/api/pixelfed/v2/discover/meta')
				.then(res => {
					this.config = res.data;
					this.isLoaded = true;
					window._sharedData.discoverMeta = res.data;
					// this.fetchPopularAccounts();
				})
			},

        	fetchPopularAccounts() {
        		// axios.get('/api/pixelfed/discover/accounts/popular')
        		// .then(res => {
        		// 	this.popularAccounts = res.data;
        		// })
        	},

        	followProfile(index) {
        		event.currentTarget.blur();
        		this.followingIndex = index;
        		let id = this.popularAccounts[index].id;

        		axios.post('/api/v1/accounts/' + id + '/follow')
				.then(res => {
        			this.followingIndex = undefined;
        			this.popularAccounts.splice(index, 1);
				}).catch(err => {
        			this.followingIndex = undefined;
					swal('Oops!', 'An error occured when attempting to follow this account.', 'error');
				});
        	},

        	goToProfile(account) {
				this.$router.push({
					path: `/i/web/profile/${account.id}`,
					params: {
						id: account.id,
						cachedProfile: account,
						cachedUser: this.profile
					}
				})
			},

			toggleTab(index) {
				this.tab = index;
				setTimeout(() => {
					window.scrollTo({top: 0, behavior: 'smooth'});
				}, 300);
			},

			openManageModal() {
				event.currentTarget.blur();
				swal('Settings', 'Discover settings here', 'info');
			}
        }
	}
</script>

<style lang="scss" scoped>
	.card-img {
		position: relative;

		img {
			object-fit: cover;
			width: 100%;
			height: 200px;
			border-radius: 10px;

		}

		&:before,
		&:after {
			content: "";
			background: rgba(0,0,0,0.2);
			z-index: 2;
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			border-radius: 10px;
		}

		.title {
			position: absolute;
			bottom: 5px;
			left: 10px;
			font-size: 40px;
			color: #fff;
			z-index: 3;
			font-weight: 700;
		}

		&.big {
			img {
				height: 300px;
			}
		}
	}
	.font-default {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
		letter-spacing: -0.7px;
	}

	.bg-stellar {
		background: #7474BF;
		background: -webkit-linear-gradient(to right, #348AC7, #7474BF);
		background: linear-gradient(to right, #348AC7, #7474BF);
	}

	.bg-berry {
		background: #5433FF;
		background: -webkit-linear-gradient(to right, #acb6e5, #86fde8);
		background: linear-gradient(to right, #acb6e5, #86fde8);
	}

	.bg-midnight {
		background: #232526;
		background: -webkit-linear-gradient(to right, #414345, #232526);
		background: linear-gradient(to right, #414345, #232526);
	}

	.media-body {
		margin-right: 0.5rem;
	}

	.avatar {
		border-radius: 15px;
	}

	.username {
		font-size: 14px;
		line-height: 14px;
		margin-bottom: 2px;
		word-break: break-word !important;
		word-wrap: break-word !important;
	}

	.display-name {
		margin-bottom: 0;
		font-size: 12px;
		word-break: break-word !important;
		word-wrap: break-word !important;
	}

	.follower-count {
		margin-bottom: 0;
		font-size: 10px;
		word-break: break-word !important;
		word-wrap: break-word !important;
	}

	.follow {
		background-color: var(--primary);
		border-radius: 18px;
		font-weight: 600;
		padding: 5px 15px;
	}
</style>