pixelfed/resources/assets/js/components/StoryViewer.vue

<template>
<div
	class="story-viewer-component container mt-0 mt-md-5 bg-black">
	<button type="button" class="d-none d-md-block btn btn-link fixed-top" style="left: auto;right:0;" @click="backToFeed">
		<i class="fal fa-times-circle fa-2x text-lighter"></i>
	</button>

	<div v-if="!viewWarning" class="row d-flex justify-content-center align-items-center">
		<div class="d-none d-md-block col-md-1 cursor-pointer text-center" @click="prev">
			<div v-if="storyIndex > 0">
				<i class="fas fa-chevron-circle-left text-muted fa-2x"></i>
			</div>
		</div>
		<div v-if="!loading" class="col-12 col-md-6 rounded-lg">

			<div v-if="activeReactionEmoji" style="position: absolute;z-index: 999;" class="w-100 h-100 d-flex justify-content-center align-items-center">
				<div class="d-flex justify-content-center align-items-center rounded-pill shadow-lg" style="width: 120px;height: 30px;font-size:13px;background-color: rgba(0, 0, 0, 0.6);">
					<span class="text-lighter">{{  $t("story.reactionSent") }}</span>
				</div>
			</div>

			<div v-if="activeReply" style="position: absolute;z-index: 999;" class="w-100 h-100 d-flex justify-content-center align-items-center">
				<div class="d-flex justify-content-center align-items-center rounded-pill shadow-lg" style="width: 120px;height: 30px;font-size:13px;background-color: rgba(0, 0, 0, 0.6);">
					<span class="text-lighter">{{ $t("story.replySent")  }}</span>
				</div>
			</div>

			<transition name="fade">
			<div v-if="stories[storyIndex].type == 'photo'" class="media-slot rounded-lg" :key="'msl:'+storyIndex" :style="{ background: 'url(' + stories[storyIndex].url + ')' }"></div>

			<div v-else-if="stories[storyIndex].type == 'poll'" class="media-slot rounded-lg" :key="'msl:'+storyIndex" :style="{ background: 'linear-gradient(to right, #F27121, #E94057, #8A2387)' }"></div>

			<video
				v-else-if="stories[storyIndex].type == 'video'"
				:key="'plyr'+stories[storyIndex].id"
				id="playr"
				class="media-slot rounded-lg"
				style="object-fit: contain;"
				:muted="muted"
				loop
				autoplay
				no-controls>
				<source :src="stories[storyIndex].url" type="video/mp4">
			</video>
			</transition>

			<div class="story-viewer-component-card card bg-transparent border-0 shadow-none d-flex justify-content-center">
				<div class="card-body">
					<div class="px-0 top-overlay">
						<div class="pt-4 pt-md-3 px-4 d-flex">
							<div style="width: 100%;height:5px;" class="d-none bg-muted"></div>
							<div
								v-for="(story, index) in stories"
								:key="'sp:s'+index"
								v-on:click="gotoSlide(index)"
								class="w-100 cursor-pointer"
								:class="{ 'mr-2': index != stories.length - 1 }">
								<div
									class="progress w-100"
									style="z-index:3;height: 4px;"
									:style="{opacity: story.progress == 0 ? 0.7 : 0.8}">
									<div
										:key="'sp:si'+index"
										class="progress-bar bg-light"
										role="progressbar"
										:aria-valuenow="story.progress"
										aria-valuemin="0"
										aria-valuemax="100"
										:style="{
											width: story.progress +'%',
											transition: 'none !important'
										}">
									</div>
								</div>
							</div>
						</div>
						<div class="pt-4 px-4 media align-items-center">
							<img :src="avatar" width="32" height="32" class="rounded-circle mr-2" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'">
							<div class="media-body d-flex justify-content-between align-items-center">
								<div class="user-select-none d-flex align-items-center">
									<span v-if="account.local" class="text-white font-weight-bold mr-2">
										{{username}}
									</span>
									<span v-else class="text-white font-weight-bold mr-3 text-truncate" style="max-width:200px;">
										<span class="d-block mb-n2">{{account.username}}</span>
										<span class="small">{{account.domain}}</span>
									</span>
									<span class="text-white font-weight-light" style="font-size: 14px;">{{timeago(stories[storyIndex].created_at)}}</span>
									<span v-if="stories[storyIndex].type == 'poll'">
										<span class="btn btn-outline-light font-weight-light btn-sm px-1 rounded py-0 ml-2">POLL</span>
									</span>
								</div>
								<div>
									<button class="btn btn-link btn-sm text-white mr-0 px-1" @click.prevent="pause">
										<i :class="[ paused ? 'fa-play' : 'fa-pause' ]" class="fas fa-lg"></i>
									</button>

									<button v-if="stories[storyIndex].type == 'video'" class="btn btn-link text-white px-2" @click="toggleMute">
										<i :class="[ muted ? 'fa-volume-mute' : 'fa-volume-up' ]" class="fas fa-lg"></i>
									</button>

									<button @click="showMenu" class="btn btn-link text-white px-1">
										<i class="fas fa-ellipsis-h fa-lg"></i>
									</button>

									<button class="d-inline-block d-md-none btn btn-link text-white pl-1 pr-0" @click="backToFeed">
										<i class="far fa-times-circle fa-lg"></i>
									</button>
								</div>
							</div>
						</div>
					</div>
					<div @click="pause" style="height: 70vh;">
						<div v-if="stories[storyIndex].type == 'poll'" class="w-100 h-100 d-flex justify-content-center align-items-center">
							<div>
								<p
									class="text-white pb-5 text-break font-weight-lighter"
									:class="[stories[storyIndex].question.length < 60 ? 'h1' : 'h3']">
									{{stories[storyIndex].question}}
								</p>
								<div class="text-center mt-3">
									<div v-for="(option, index) in stories[storyIndex].options" class="mb-3">
										<button
											class="btn border px-4 py-3 text-uppercase btn-block"
											:class="[
												option.length < 14 ? 'btn-lg': '',
												index == stories[storyIndex].voted_index ? 'btn-light' : 'btn-outline-light'
											]"
											style="min-width: 300px;"
											:disabled="stories[storyIndex].voted || owner"
											@click="selectPollOption(index)">
											<span
												class="text-break"
												:class="[
													index == stories[storyIndex].voted_index ? 'option-red' : ''
												]">
												{{ option }}
											</span>
										</button>
										<p
											v-if="owner && pollResults.length"
											class="small text-left mt-1 text-light">
												{{ pollPercent(index) }}% - {{ pollResults[index] }} {{ pollResults[index] == 1 ? 'vote' : 'votes' }}
										</p>
									</div>
								</div>
								<div v-if="owner && !showingPollResults && pollResults.length == 0" class="mt-3 text-center">
									<button class="btn btn-light font-weight-bold" @click="showPollResults" :disabled="loadingPollResults">
										{{ loadingPollResults ? 'Loading...' : 'View Results' }}
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div v-if="!owner && stories[storyIndex] && stories[storyIndex].can_reply" class="card-footer bg-transparent border-0">
					<div class="px-0 bottom-overlay">
						<div class="px-3 form-group d-flex">
							<input class="form-control bg-transparent border border-white rounded-pill text-white" :placeholder="'Reply to ' + username + '...'" v-model="composeText">
							<button class="btn btn-outline-light rounded-pill ml-2" @click="comment">
								SEND
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="d-none d-md-block col-md-1 cursor-pointer text-center">
			<div v-if="(storyIndex + 1) < stories.length" @click="next">
				<i class="fas fa-chevron-circle-right text-muted fa-2x"></i>
			</div>
			<div v-if="(storyIndex + 1) == stories.length && owner" @click="addToStory">
				<i class="fal fa-plus-circle text-muted fa-2x"></i>
			</div>
		</div>
		<div v-if="loading" class="col-12 col-md-6 rounded-lg">
			<div class="card border-0 shadow-none d-flex justify-content-center" style="background: #000;height: 90vh;">
				<div class="card-body d-flex justify-content-center align-items-center">
					<div class="spinner-border text-lighter" role="status">
						<span class="sr-only">Loading...</span>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div v-else class="row d-flex justify-content-center align-items-center">
		<div v-if="!loading" class="col-12 col-md-6 rounded-lg p-0">
			<div v-if="stories[storyIndex].type == 'photo'" class="media-slot rounded-lg" :key="'msl:'+storyIndex" :style="{ backgroundImage: 'url(' + stories[storyIndex].url + ')' }"></div>
			<div class="story-viewer-component-card card bg-transparent border-0 shadow-none d-flex justify-content-center" style="backdrop-filter: blur(40px) brightness(0.3); -webkit-backdrop-filter: blur(10px);">
				<div class="card-body">
					<div class="w-100 h-100 d-flex justify-content-center align-items-center">
						<div class="text-center">
							<img :src="profile.avatar" width="120" height="120" class="rounded-circle border mb-3 shadow">
							<p class="lead text-lighter mb-1">View as <span class="text-white">{{profile.username}}</span></p>
							<p class="text-lighter font-weight-lighter px-md-5 py-3">
								<span class="text-white font-weight-bold">{{account.acct}}</span> will be able to see that you viewed their story.
							</p>
							<button class="btn btn-outline-lighter rounded-pill py-1 font-weight-bold" @click="confirmViewStory">View Story</button>
							<button class="btn btn-outline-lighter rounded-pill py-1 font-weight-bold" @click="cancelViewStory">Cancel</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="modal-stack">
		<b-modal ref="ctxMenu"
			id="ctx-modal"
			hide-header
			hide-footer
			centered
			rounded
			size="sm"
			body-class="list-group-flush p-0 rounded">
			<div class="list-group text-center">
				<div v-if="owner" class="list-group-item rounded py-3">
					<div class="d-flex justify-content-between align-items-center font-weight-light">
						<span>{{ $t("story.expiresIn")}} {{timeahead(stories[storyIndex].expires_at)}}</span>
						<span>
							<span class="btn btn-light btn-sm font-weight-bold">
								<i class="fas fa-eye"></i>
								{{ stories[storyIndex].view_count }}
							</span>
						</span>
					</div>
				</div>
				<div v-if="!owner && stories[storyIndex] && stories[storyIndex].can_react" class="list-group-item rounded d-flex justify-content-between">
					<button
						v-for="e in reactionEmoji"
						class="btn btn-light rounded-pill py-1 px-2"
						style="font-size: 20px;"
						@click="react(e)">
						{{ e }}
					</button>
				</div>
				<div v-if="owner" class="list-group-item rounded cursor-pointer" @click="fetchViewers">{{ $t("story.viewers")}}</div>
				<div v-if="!owner" class="list-group-item rounded cursor-pointer" @click="ctxMenuReport">{{ $t("story.report")}}</div>
				<div v-if="owner" class="list-group-item rounded cursor-pointer" @click="deleteStory">{{ $t("story.delete")}}</div>
				<div class="list-group-item rounded cursor-pointer text-muted" @click="closeCtxMenu">{{ $t("story.close")}}</div>
			</div>
		</b-modal>

		<b-modal ref="viewersModal"
			id="viewers"
			title="Viewers"
			header-class="border-0"
			hide-footer
			centered
			rounded
			scrollable
			lazy
			size="sm"
			body-class="list-group-flush p-0 rounded">
			<div class="list-group" style="max-height: 40vh;">
				<div v-for="(profile, index) in viewers" class="list-group-item">
					<div class="media align-items-center">
						<img :src="profile.avatar" width="32" height="32" class="rounded-circle border mr-2">
						<div v-if="profile.local" class="media-body user-select-none">
							<p class="font-weight-bold mb-0">{{profile.username}}</p>
						</div>
						<div v-else class="media-body user-select-none">
							<p class="font-weight-bold mb-0">{{profile.username}}</p>
							<p class="mb-0 small mt-n1 text-muted">{{profile.acct.split('@')[1]}}</p>
						</div>
					</div>
				</div>
				<div v-if="viewers.length == 0" class="list-group-item text-center text-dark font-weight-light py-5">
					No viewers yet
				</div>
				<div v-if="viewersHasMore" class="list-group-item text-center border-bottom-0">
					<button class="btn btn-light font-weight-bold border rounded-pill" @click="viewersLoadMore">Load More</button>
				</div>
				<div class="list-group-item text-center rounded cursor-pointer text-muted" @click="closeViewersModal">{{ $t("story.close")}}</div>
			</div>
		</b-modal>

		<b-modal ref="ctxReport"
			id="ctx-report"
			hide-header
			hide-footer
			centered
			rounded
			size="sm"
			body-class="list-group-flush p-0 rounded">
			<p class="py-2 px-3 mb-0">
				<div class="text-center font-weight-bold text-danger">Report</div>
				<div class="small text-center text-muted">Select one of the following options</div>
			</p>
			<div class="list-group text-center">
				<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('spam')">Spam</div>
				<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('sensitive')">Sensitive Content</div>
				<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('abusive')">Abusive or Harmful</div>
				<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="openCtxReportOtherMenu()">Other</div>
				<!-- <div class="list-group-item rounded cursor-pointer" @click="ctxReportMenuGoBack()">Go Back</div> -->
				<div class="list-group-item rounded cursor-pointer text-lighter" @click="ctxReportMenuGoBack()">Cancel</div>
			</div>
		</b-modal>

		<b-modal ref="ctxReportOther"
			id="ctx-report-other"
			hide-header
			hide-footer
			centered
			rounded
			size="sm"
			body-class="list-group-flush p-0 rounded">
			<p class="py-2 px-3 mb-0">
				<div class="text-center font-weight-bold text-danger">Report</div>
				<div class="small text-center text-muted">Select one of the following options</div>
			</p>
			<div class="list-group text-center">
				<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('underage')">Underage Account</div>
				<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('copyright')">Copyright Infringement</div>
				<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('impersonation')">Impersonation</div>
				<div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('scam')">Scam or Fraud</div>
				<!-- <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('terrorism')">Terrorism Related</div> -->
				<!-- <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('other')">Other or Not listed</div> -->
				<!-- <div class="list-group-item rounded cursor-pointer" @click="ctxReportOtherMenuGoBack()">Go Back</div> -->
				<div class="list-group-item rounded cursor-pointer text-lighter" @click="ctxReportOtherMenuGoBack()">Cancel</div>
			</div>
		</b-modal>
	</div>
</div>
</template>

<script type="text/javascript">
	export default {
		props: {
			pid: {
				type: String
			},

			selfProfile: {
				type: Object
			},

			redirectUrl: {
				type: String,
				default: '/'
			}
		},

		data() {
			return {
				loading: true,
				profile: null,
				account: {
					local: false
				},
				owner: false,
				stories: [],
			    username: 'loading...',
			    avatar: '/storage/avatars/default.jpg',
				storyIndex: 0,
				progress: 0,
				constInterval: 383,
				progressInterval: undefined,
				composeText: null,
				paused: false,
				muted: true,
				reactionEmoji: [ "❤️", "🔥", "💯", "😂", "😎", "👀" ],
				activeReactionEmoji: false,
				activeReply: false,
				showProgress: false,
				redirectOnEnd: '/',
				viewerSid: false,
				viewerPage: 1,
				loadingViewers: false,
				viewersHasMore: true,
				viewers: [],
				viewWarning: false,
				showingPollResults: false,
				loadingPollResults: false,
				pollResults: [],
				pollTotalVotes: 0
			}
		},

		watch: {
			composeText: function(val) {
				if(val.length == 0) {
					if(this.paused) {
						this.pause();
					}
				} else {
					if(!this.paused) {
						this.pause();
					}
				}
				event.currentTarget.focus();
			}
		},

		beforeMount() {
			this.redirectOnEnd = this.redirectUrl;
		},

		mounted() {
			let u = new URLSearchParams(window.location.search);
			if(u.has('t')) {
				switch(u.get('t')) {
					case '1':
						this.redirectOnEnd = '/';
					break;

					case '2':
						this.redirectOnEnd = '/timeline/public';
					break;

					case '3':
						this.redirectOnEnd = '/timeline/network';
					break;

					case '4':
						this.redirectOnEnd = '/' + window.location.pathname.split('/').slice(-1).pop();
					break;
				}
			} else {
				this.viewWarning = true;
			}

			if(!this.selfProfile || !this.selfProfile.hasOwnProperty('avatar')) {
				axios.get('/api/pixelfed/v1/accounts/verify_credentials')
				.then(res => {
					this.profile = res.data;
					this.fetchStories();
				});
			} else {
				this.profile = this.selfProfile;
			}
			let el = document.querySelector('body');
			el.style.width = '100%';
			el.style.height = '100vh !important';
			el.style.overflow = 'hidden';
			el.style.backgroundColor = '#262626';
		},

		methods: {
			init() {
				clearInterval(this.progressInterval);
				this.loading = false;
				this.constInterval = Math.ceil(this.stories[this.storyIndex].duration * 38.3);
				this.progressInterval = setInterval(() => {
					this.do();
				}, this.constInterval);
			},

			do() {
				this.loading = false;
				if(this.stories[this.storyIndex].progress != 100) {
					this.stories[this.storyIndex].progress = this.stories[this.storyIndex].progress + 4;
				} else {
					clearInterval(this.progressInterval);
					this.next();
				}
			},

			prev() {
				if(this.storyIndex == 0) {
					return;
				}
				this.pollResults = [];
				this.progress = 0;
				this.gotoSlide(this.storyIndex - 1);
			},

			next() {
				axios.post('/api/web/stories/v1/viewed', {
					id: this.stories[this.storyIndex].id
				});
				this.stories[this.storyIndex].progress = 100;
				if(this.storyIndex == this.stories.length - 1) {
					if(this.composeText && this.composeText.length) {
						return;
					}
					window.location.href = this.redirectOnEnd;
					return;
				}
				this.pollResults = [];
				this.progress = 0;
				this.muted = true;
				this.storyIndex = this.storyIndex + 1;
				this.init();
			},

			pause() {
				if(event) {
					event.currentTarget.blur();
				}

				if(this.paused) {
					this.paused = false;
					if(this.stories[this.storyIndex].type == 'video') {
						let el = document.getElementById('playr');
						el.play();
					}
					this.init();
				} else {
					clearInterval(this.progressInterval);
					if(this.stories[this.storyIndex].type == 'video') {
						let el = document.getElementById('playr');
						el.pause();
					}
					this.paused = true;
				}
			},

			toggleMute() {
				if(event) {
					event.currentTarget.blur();
				}
				if(this.stories[this.storyIndex].type == 'video') {
					this.muted = !this.muted;
					let el = document.getElementById('playr');
					el.muted = this.muted;
				}
			},

			gotoSlide(index) {
				this.paused = false;
				clearInterval(this.progressInterval);
				this.progressInterval = null;
				this.stories = this.stories.map(function(s,k) {
					if(k < index) {
						s.progress = 100;
					} else {
						s.progress = 0;
					}
					return s;
				});
				this.storyIndex = index;
				this.stories[index].progress = 0;
				this.init();
			},

			showMenu() {
				if(!this.paused) {
					this.pause();
				}
				event.currentTarget.blur();
				this.$refs.ctxMenu.show();
			},

			react(emoji) {
				this.$refs.ctxMenu.hide();
				this.activeReactionEmoji = true;

				axios.post('/api/web/stories/v1/react', {
					sid: this.stories[this.storyIndex].id,
					reaction: emoji
				})
				.then(res => {
					setTimeout(() => {
						this.activeReactionEmoji = false;
						this.pause();
					}, 2000);
				}).catch(err => {
					this.activeReactionEmoji = false;
					swal('Error', 'An error occured when attempting to react to this story. Please try again later.', 'error');
				});
			},

			comment() {
				if(this.composeText.length < 2) {
					return;
				}
				if(!this.paused) {
					this.pause();
				}
				this.activeReply = true;
				axios.post('/api/web/stories/v1/comment', {
					sid: this.stories[this.storyIndex].id,
					caption: this.composeText
				})
				.then(res => {
					this.composeText = null;
					setTimeout(() => {
						this.activeReply = false;
						this.pause();
					}, 2000);
				}).catch(err => {
					this.activeReply = false;
					swal('Error', 'An error occured when attempting to reply to this story. Please try again later.', 'error');
				});
			},

			closeCtxMenu() {
				this.$refs.ctxMenu.hide();
			},

			backToFeed() {
				if(this.composeText) {
					swal('Are you sure you want to leave without sending this reply?')
					.then(confirm => {
						if(confirm) {
							window.location.href = this.redirectOnEnd;
						}
					})
					return;
				} else {
					window.location.href = this.redirectOnEnd;
				}
			},

			timeago(ts) {
				return App.util.format.timeAgo(ts);
			},

			timeahead(ts) {
				let d = new Date(ts);
				return App.util.format.timeAhead(d.toUTCString());
			},

			fetchStories() {
				let self = this;
				axios.get('/api/web/stories/v1/profile/' + this.pid)
				.then(res => {
					if(res.data.length == 0) {
						window.location.href = this.redirectOnEnd;
					}
					self.account = res.data[0].account;
					if(self.account.local == false) {
						self.account.domain = self.account.acct.split('@')[1]
					}
					self.stories = res.data[0].nodes.map(function(i, k) {
						let r = {
							id: i.id,
							created_at: i.created_at,
							expires_at: i.expires_at,
							progress: i.progress == 100 && k == res.data[0].nodes.length - 1 ? 0 : i.progress,
							view_count: i.view_count,
							url: i.src,
							type: i.type,
							duration: i.duration,
							can_reply: i.can_reply,
							can_react: i.can_react,
						}

						if(r.type == 'poll') {
							r.question = i.question;
							r.options = i.options;
							r.voted = i.voted;
							r.voted_index = i.voted_index;
						}

						return r;
					});
					self.username = res.data[0].account.username;
					self.avatar = res.data[0].account.avatar;
					if(self.profile.id == res.data[0].account.id) {
						this.viewWarning = false;
					}
					if(this.viewWarning) {
						this.loading = false;
						return;
					}
					let seen = res.data[0].nodes.filter(function(i, k) {
						return i.seen == true;
					}).map(function(i, k) {
						return k;
					});
					if(seen.length && this.pid != this.profile.id) {
						let n = (seen[seen.length - 1] + 1) == self.stories.length ? seen[seen.length - 1] : (seen[seen.length - 1] + 1);
						self.gotoSlide(n);
					}
					if(this.pid == this.profile.id) {
						self.gotoSlide(self.stories.length - 1);
					}
					self.showProgress = true;
					if(self.profile.id == self.account.id) {
						self.owner = true;
					}
					if(res.data.length == 0) {
						window.location.href = this.redirectOnEnd;
						return;
					}
					this.init();
				})
				.catch(err => {
					return;
				});
			},

			fetchViewers() {
				this.closeCtxMenu();
				this.$refs.viewersModal.show();

				if(this.stories[this.storyIndex].id == this.viewerSid) {
					return;
				}

				this.loadingViewers = true;

				axios.get('/api/web/stories/v1/viewers', {
					params: {
						sid: this.stories[this.storyIndex].id
					}
				}).then(res => {
					this.viewerSid = this.stories[this.storyIndex].id;
					this.viewers = res.data;
					this.loadingViewers = false;
					this.viewerPage = 2;
					if(this.viewers.length == 10) {
						this.viewersHasMore = true;
					} else {
						this.viewersHasMore = false;
					}
				}).catch(err => {
					swal('Cannot load viewers', 'Cannot load viewers of this story, please try again later.', 'error');
				})
			},

			viewersLoadMore() {
				axios.get('/api/web/stories/v1/viewers', {
					params: {
						sid: this.stories[this.storyIndex].id,
						page: this.viewerPage
					}
				}).then(res => {
					if(!res.data || res.data.length == 0) {
						this.viewersHasMore = false;
						return;
					}
					if(res.data.length != 10) {
						this.viewersHasMore = false;
					}
					this.viewers.push(...res.data);
					this.viewerPage++;
				}).catch(err => {
					swal('Cannot load viewers', 'Cannot load viewers of this story, please try again later.', 'error');
				});
			},

			closeViewersModal() {
				this.$refs.viewersModal.hide();
			},

			deleteStory() {
				this.closeCtxMenu();
				if(!window.confirm('Are you sure you want to delete this story?')) {
					this.pause();
					return;
				}
				axios.delete('/api/web/stories/v1/delete/' + this.stories[this.storyIndex].id)
				.then(res => {
					let i = this.storyIndex;
					let c = this.stories.length;

					if(c == 1) {
						window.location.href = '/';
						return;
					}
					window.location.reload();
				});
			},

			selectPollOption(index) {
				if(!this.paused) {
					this.pause();
				}
				axios.post('/i/stories/viewed', {
					id: this.stories[this.storyIndex].id
				});
				axios.post('/api/web/stories/v1/poll/vote', {
					sid: this.stories[this.storyIndex].id,
					ci: index
				}).then(res => {
					this.stories[this.storyIndex].voted = true;
					this.stories[this.storyIndex].voted_index = index;
					this.next();
				})
			},

			ctxMenuReport() {
				this.$refs.ctxMenu.hide();
				this.$refs.ctxReport.show();
			},

			openCtxReportOtherMenu() {
				this.closeCtxMenu();
				this.$refs.ctxReport.hide();
				this.$refs.ctxReportOther.show();
			},

			ctxReportMenuGoBack() {
				this.closeMenus();
			},

			ctxReportOtherMenuGoBack() {
				this.closeMenus();
			},

			closeMenus() {
				this.$refs.ctxReportOther.hide();
				this.$refs.ctxReport.hide();
				this.$refs.ctxMenu.hide();
			},

			sendReport(type) {
				let id = this.stories[this.storyIndex].id;

				swal({
					'title': 'Confirm Report',
					'text': 'Are you sure you want to report this post?',
					'icon': 'warning',
					'buttons': true,
					'dangerMode': true
				}).then((res) => {
					if(res) {
						axios.post('/api/web/stories/v1/report', {
							'type': type,
							'id': id,
						}).then(res => {
							this.closeMenus();
							swal('Report Sent!', 'We have successfully received your report', 'success');
						}).catch(err => {
							if(err.response.status === 409) {
								swal('Already reported', 'You have already reported this story', 'info');
							} else {
								swal('Oops!', 'There was an issue reporting this story', 'error');
							}
						})
					} else {
						this.closeMenus();
					}
				});
			},

			cancelViewStory() {
				event.currentTarget.blur();
				location.href = '/i/web';
			},

			confirmViewStory() {
				let self = this;
				let seen = this.stories.filter(function(i, k) {
					return i.seen == true;
				}).map(function(i, k) {
					return k;
				});
				if(seen.length && this.pid != this.profile.id) {
					let n = (seen[seen.length - 1] + 1) == self.stories.length ? seen[seen.length - 1] : (seen[seen.length - 1] + 1);
					self.gotoSlide(n);
				}
				if(this.pid == this.profile.id) {
					self.gotoSlide(self.stories.length - 1);
				}
				self.showProgress = true;
				if(self.profile.username == self.username) {
					self.owner = true;
				}
				this.viewWarning = false;
				this.init();
			},

			showPollResults() {
				this.loadingPollResults = true;
				if(!this.paused) {
					this.pause();
				}

				axios.get('/api/web/stories/v1/poll/results', {
					params: {
						sid: this.stories[this.storyIndex].id
					}
				}).then(res => {
					this.loadingPollResults = false;
					this.pollResults = res.data;
					const sum = (a, b) => a + b;
					this.pollTotalVotes = this.pollResults.reduce(sum);
				});
			},

			addToStory() {
				window.location.href = '/i/stories/new';
			},

			pollPercent(index) {
				return this.pollTotalVotes == 0 ? 0 : Math.round((this.pollResults[index] / this.pollTotalVotes) * 100)
			}
		}
	}
</script>

<style lang="scss" scoped>
	#content {
		width: 100%;
		height: 100vh !important;
		overflow: hidden;
		background-color: #262626;
	}

	.story-viewer-component {

		&-card {
			height: 100vh;

			@media (min-width: 768px) {
				height: 90vh;
			}
		}

		&.bg-black {
			background-color: #262626;
		}

		.option-green {
			font-size: 20px;
			font-weight: 600;
			background: #11998e;  /* fallback for old browsers */
			background: -webkit-linear-gradient(180deg, #38ef7d, #11998e);
			background: linear-gradient(180deg, #38ef7d, #11998e);
			-webkit-background-clip: text;
  			-webkit-text-fill-color: transparent;
		}

		.option-red {
			font-weight: 600;
			background: linear-gradient(to right, #F27121, #E94057, #8A2387);
			-webkit-background-clip: text;
  			-webkit-text-fill-color: transparent;
		}

		.bg-black {
			background-color: #262626;
		}

		.fade-enter-active, .fade-leave-active {
			transition: opacity .5s;
		}

		.fade-enter, .fade-leave-to {
			opacity: 0;
		}

		.progress {
			background-color: #979a9a;
		}

		.media-slot {
			border-radius: 0;
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			background: #000;
			background-size: cover !important;
			z-index: 0;
		}

		.card-body {
			.top-overlay {
				height:100px;
				margin-left: -35px;
				margin-right: -35px;
				margin-top: -20px;
				padding-bottom: 20px;
				border-radius: 5px;
				background: linear-gradient(180deg, rgba(38,38,38, 0.8) 0%, rgba(38,38,38,0) 100%);
			}
		}

		.card-footer {
			::placeholder {
				color: #fff;
				opacity: 1;
			}

			.bottom-overlay {
				margin-left: -35px;
				margin-right: -35px;
				margin-bottom: -20px;
				border-radius: 5px;
				background: linear-gradient(0deg, rgba(38,38,38, 0.8) 0%, rgba(38,38,38,0) 100%);

				.form-group {
					padding-top: 40px;
					padding-bottom: 20px;
					margin-bottom: 0;
				}
			}
		}
	}
</style>