StoryViewer.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <template>
  2. <div class="container">
  3. <div v-if="loading" class="row">
  4. <div class="col-12 mt-5 pt-5">
  5. <div class="text-center">
  6. <div class="spinner-border" role="status">
  7. <span class="sr-only">Loading...</span>
  8. </div>
  9. </div>
  10. </div>
  11. </div>
  12. <div v-if="stories.length != 0">
  13. <div id="storyContainer" class="d-none m-3"></div>
  14. </div>
  15. </div>
  16. </template>
  17. <script type="text/javascript">
  18. import 'zuck.js/dist/zuck.css';
  19. import 'zuck.js/dist/skins/snapgram.css';
  20. window.Zuck = require('zuck.js');
  21. export default {
  22. props: ['pid'],
  23. data() {
  24. return {
  25. loading: true,
  26. stories: {},
  27. preloadIndex: null
  28. }
  29. },
  30. beforeMount() {
  31. this.fetchStories();
  32. },
  33. methods: {
  34. fetchStories() {
  35. let self = this;
  36. axios.get('/api/stories/v0/profile/' + this.pid)
  37. .then(res => {
  38. self.stories = res.data;
  39. if(res.data.length == 0) {
  40. window.location.href = '/';
  41. return;
  42. }
  43. self.preloadImages();
  44. })
  45. .catch(err => {
  46. console.log(err);
  47. // window.location.href = '/';
  48. return;
  49. });
  50. },
  51. preloadImages() {
  52. let self = this;
  53. for (var i = 0; i < this.stories[0].items.length; i++) {
  54. var preload = new Image();
  55. $(preload).on('load', function() {
  56. self.preloadIndex = i;
  57. if(i == self.stories[0].items.length) {
  58. self.loadViewer();
  59. return;
  60. }
  61. });
  62. preload.src = self.stories[0].items[i].src;
  63. }
  64. },
  65. loadViewer() {
  66. let data = this.stories;
  67. if(!window.stories) {
  68. window.stories = new Zuck('storyContainer', {
  69. stories: data,
  70. localStorage: false,
  71. callbacks: {
  72. onOpen (storyId, callback) {
  73. document.body.style.overflow = "hidden";
  74. callback()
  75. },
  76. onEnd (storyId, callback) {
  77. axios.post('/i/stories/viewed', {
  78. id: storyId
  79. });
  80. callback();
  81. },
  82. onClose (storyId, callback) {
  83. document.body.style.overflow = "auto";
  84. callback();
  85. window.location.href = '/';
  86. },
  87. }
  88. });
  89. this.loading = false;
  90. // todo: refactor this mess
  91. document.querySelectorAll('#storyContainer .story')[0].click();
  92. }
  93. return;
  94. }
  95. }
  96. }
  97. </script>
  98. <style type="text/css">
  99. #storyContainer .story {
  100. margin-right: 2rem;
  101. width: 100%;
  102. max-width: 64px;
  103. }
  104. .stories.carousel .story > .item-link > .item-preview {
  105. height: 64px;
  106. }
  107. #zuck-modal.with-effects {
  108. width: 100%;
  109. }
  110. .stories.carousel .story > .item-link > .info .name {
  111. font-weight: 600;
  112. font-size: 12px;
  113. }
  114. .stories.carousel .story > .item-link > .info {
  115. }
  116. </style>