From 5a764473f2d39eb004eb04c032741cd70b25e602 Mon Sep 17 00:00:00 2001
From: Daniel Supernault <danielsupernault@gmail.com>
Date: Fri, 10 Jan 2020 13:00:42 -0700
Subject: [PATCH] add StoryTimelineComponent.vue

---
 .../js/components/StoryTimelineComponent.vue  | 94 +++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 resources/assets/js/components/StoryTimelineComponent.vue

diff --git a/resources/assets/js/components/StoryTimelineComponent.vue b/resources/assets/js/components/StoryTimelineComponent.vue
new file mode 100644
index 000000000..bba284f04
--- /dev/null
+++ b/resources/assets/js/components/StoryTimelineComponent.vue
@@ -0,0 +1,94 @@
+<template>
+	<div>
+		<div v-if="stories.length != 0">
+			<div id="storyContainer" class="m-3"></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 {
+		data() {
+			return {
+				stories: {},
+			}
+		},
+
+		mounted() {
+			this.fetchStories();
+		},
+
+		methods: {
+			fetchStories() {
+				axios.get('/api/stories/v1/recent')
+				.then(res => {
+					let data = res.data;
+					let stories = new Zuck('storyContainer', {
+						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/v1/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);
+							});
+						});
+					});
+				});
+			}
+		}
+	}
+</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>