123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129 |
- <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>
|