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

<template>
<div class="container">
	<div v-if="loading" class="row">
		<div class="col-12 mt-5 pt-5">
			<div class="text-center">
				<div class="spinner-border" role="status">
					<span class="sr-only">Loading...</span>
				</div>
			</div>
		</div>
	</div>
	<div v-if="stories.length != 0">
		<div id="storyContainer" class="d-none m-3"></div>
	</div>
</div>
</template>

<script type="text/javascript">
	import 'zuck.js/dist/zuck.css';
	import 'zuck.js/dist/skins/snapgram.css';
	window.Zuck = require('zuck.js');

	export default {
		props: ['pid'],

		data() {
			return {
				loading: true,
				stories: {},
				preloadIndex: null
			}
		},

		beforeMount() {
			this.fetchStories();
		},

		methods: {
			fetchStories() {
				let self = this;
				axios.get('/api/stories/v0/profile/' + this.pid)
				.then(res => {
					self.stories = res.data;
					if(res.data.length == 0) {
						window.location.href = '/';
						return;
					}
					self.preloadImages();
				})
				.catch(err => {
					console.log(err);
					// window.location.href = '/';
					return;
				});
			},

			preloadImages() {
				let self = this;
				for (var i = 0; i < this.stories[0].items.length; i++) {
					var preload = new Image();
					$(preload).on('load', function() {

						self.preloadIndex = i;
						if(i == self.stories[0].items.length) {
							self.loadViewer();
							return;
						}
					});
					preload.src = self.stories[0].items[i].src;
				}
			},

			loadViewer() {
				let data = this.stories;

				if(!window.stories) {
					window.stories = new Zuck('storyContainer', {
						stories: data,
						localStorage: false,
						callbacks:  {
							onOpen (storyId, callback) {
								document.body.style.overflow = "hidden";
								callback()
							},

							onEnd (storyId, callback) {
								axios.post('/i/stories/viewed', {
									id: storyId
								});
								callback();
							},

							onClose (storyId, callback) {
								document.body.style.overflow = "auto";
								callback();
								window.location.href = '/';
							},
						}
					});

					this.loading = false;
					// todo: refactor this mess
					document.querySelectorAll('#storyContainer .story')[0].click();
				}
				return;
			}
		}
	}
</script>

<style type="text/css">
	#storyContainer .story {
		margin-right: 2rem;
		width: 100%;
		max-width: 64px;
	}
	.stories.carousel .story > .item-link > .item-preview {
		height: 64px;
	}
	#zuck-modal.with-effects {
		width: 100%;
	}
	.stories.carousel .story > .item-link > .info .name {
		font-weight: 600;
		font-size: 12px;
	}
	.stories.carousel .story > .item-link > .info {
	}
</style>