pixelfed/resources/assets/js/components/StoryViewer.vue
2020-03-14 13:12:54 -06:00

129 lines
2.6 KiB
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>