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

<template>
	<div>
		<div v-if="show" class="card card-body p-0 border mt-md-4 mb-md-3 shadow-none">
			<div id="storyContainer" :class="[list == true ? 'mt-1 mr-3 mb-0 ml-1':'mx-3 mt-3 mb-0 pb-0']"></div>
		</div>
	</div>
</template>

<style type="text/css" scoped>
	#storyContainer > .story {
		margin-right: 3rem;
	}
</style>

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

	export default {
		props: ['list'],
		data() {
			return {
				show: false,
				stories: {},
			}
		},

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

		methods: {
			fetchStories() {
				axios.get('/api/stories/v0/recent')
				.then(res => {
					let data = res.data;
					if(!res.data.length) {
						this.show = false;
						return;
					}
					let stories = new Zuck('storyContainer', {
						list: this.list == true ? true : false,
						stories: data,
						localStorage: true,
						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();
							},
						}
					});

					data.forEach(d => {
						let url = '/api/stories/v0/fetch/' + d.pid;
						axios.get(url)
						.then(res => {
							res.data.forEach(item => {
								let img = new Image();
								img.src = item.src;
								stories.addItem(d.id, item);
							});
						});
					});
				});
				this.show = true;
			}
		}
	}
</script>

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