StoryViewer.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  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. }
  28. },
  29. beforeMount() {
  30. this.fetchStories();
  31. },
  32. methods: {
  33. fetchStories() {
  34. axios.get('/api/stories/v1/profile/' + this.pid)
  35. .then(res => {
  36. let data = res.data;
  37. if(data.length == 0) {
  38. window.location.href = '/';
  39. return;
  40. }
  41. window._storyData = data;
  42. window.stories = new Zuck('storyContainer', {
  43. stories: data,
  44. localStorage: false,
  45. callbacks: {
  46. onOpen (storyId, callback) {
  47. document.body.style.overflow = "hidden";
  48. callback()
  49. },
  50. onEnd (storyId, callback) {
  51. axios.post('/i/stories/viewed', {
  52. id: storyId
  53. });
  54. callback();
  55. },
  56. onClose (storyId, callback) {
  57. document.body.style.overflow = "auto";
  58. callback();
  59. window.location.href = '/';
  60. },
  61. }
  62. });
  63. this.loading = false;
  64. // todo: refactor this mess
  65. document.querySelectorAll('#storyContainer .story')[0].click()
  66. })
  67. .catch(err => {
  68. window.location.href = '/';
  69. return;
  70. });
  71. }
  72. }
  73. }
  74. </script>
  75. <style type="text/css">
  76. #storyContainer .story {
  77. margin-right: 2rem;
  78. width: 100%;
  79. max-width: 64px;
  80. }
  81. .stories.carousel .story > .item-link > .item-preview {
  82. height: 64px;
  83. }
  84. #zuck-modal.with-effects {
  85. width: 100%;
  86. }
  87. .stories.carousel .story > .item-link > .info .name {
  88. font-weight: 600;
  89. font-size: 12px;
  90. }
  91. .stories.carousel .story > .item-link > .info {
  92. }
  93. </style>