LoopComponent.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <template>
  2. <div class="w-100 h-100">
  3. <div v-if="loading" style="min-height: 400px;" class="d-flex justify-content-center align-items-center">
  4. <img src="/img/pixelfed-icon-grey.svg" class="">
  5. </div>
  6. <div v-else>
  7. <div class="mb-4">
  8. <p class="text-center">
  9. <!-- <a :class="[tab == 'popular'? 'btn font-weight-bold py-0 btn-success' : 'btn font-weight-bold py-0 btn-outline-success']" href="#" @click.prevent="setTab('popular')">Popular</a> -->
  10. <a :class="[tab == 'new'? 'btn font-weight-bold py-0 btn-success' : 'btn font-weight-bold py-0 btn-outline-success']" href="#" @click.prevent="setTab('new')">New</a>
  11. <!-- <a :class="[tab == 'random'? 'btn font-weight-bold py-0 btn-success' : 'btn font-weight-bold py-0 btn-outline-success']" href="#" @click.prevent="setTab('random')">Random</a> -->
  12. <a :class="[tab == 'about'? 'btn font-weight-bold py-0 btn-success' : 'btn font-weight-bold py-0 btn-outline-success']" href="#" @click.prevent="setTab('about')">About</a>
  13. </p>
  14. </div>
  15. <div v-if="tab != 'about'" class="row loops-container">
  16. <div class="col-12 col-md-4 mb-3" v-for="(loop, index) in loops">
  17. <div class="card border border-success">
  18. <div class="embed-responsive embed-responsive-1by1">
  19. <video class="embed-responsive-item" :src="videoSrc(loop)" preload="none" width="100%" height="100%" loop @click="toggleVideo(loop, $event)" :poster="posterSrc(loop)"></video>
  20. </div>
  21. <div class="card-body">
  22. <p class="username font-weight-bolder lead d-flex justify-content-between">
  23. <a :href="loop.account.url" :title="loop.account.acct">{{truncate(loop.account.acct)}}</a>
  24. <a :href="loop.url">{{timestamp(loop)}}</a></p>
  25. <p class="small text-muted text-truncate" v-html="getTitle(loop)"></p>
  26. <div class="small text-muted d-flex justify-content-between mb-0">
  27. <span>{{loop.favourites_count}} Likes</span>
  28. <span>{{loop.reblogs_count}} Shares</span>
  29. <span>{{loop.reply_count}} Comments</span>
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. </div>
  35. <div v-else class="col-12">
  36. <div class="card">
  37. <div class="card-body">
  38. <p class="lead text-center mb-0">Loops are an exciting new way to explore short videos on Pixelfed.</p>
  39. </div>
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44. </template>
  45. <style type="text/css">
  46. .loops-container .card {
  47. box-shadow: none;
  48. }
  49. .loops-container .card .card-img-top{
  50. border-radius: 0;
  51. }
  52. .loops-container a {
  53. color: #343a40;
  54. }
  55. a.hashtag,
  56. .loops-container .card-body a:hover {
  57. color: #28a745 !important;
  58. }
  59. </style>
  60. <script type="text/javascript">
  61. Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
  62. get: function(){
  63. return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
  64. }
  65. })
  66. export default {
  67. data() {
  68. return {
  69. loading: true,
  70. version: 1,
  71. loops: [],
  72. tab: 'new'
  73. }
  74. },
  75. mounted() {
  76. axios.get('/api/v2/loops')
  77. .then(res => {
  78. this.loops = res.data;
  79. this.loading = false;
  80. })
  81. },
  82. methods: {
  83. videoSrc(loop) {
  84. return loop.media_attachments[0].url;
  85. },
  86. posterSrc(loop) {
  87. return loop.media_attachments[0].preview_url;
  88. },
  89. setTab(tab) {
  90. this.tab = tab;
  91. },
  92. toggleVideo(loop, $event) {
  93. let el = $event.target;
  94. $('video').each(function() {
  95. if(el.src != $(this)[0].src) {
  96. $(this)[0].pause();
  97. }
  98. });
  99. if(!el.playing) {
  100. el.play();
  101. //this.incrementLoop(loop);
  102. } else {
  103. el.pause();
  104. }
  105. },
  106. incrementLoop(loop) {
  107. // axios.post('/api/v2/loops/watch', {
  108. // id: loop.id
  109. // }).then(res => {
  110. // console.log(res.data);
  111. // });
  112. },
  113. timestamp(loop) {
  114. let ts = new Date(loop.created_at);
  115. return ts.toLocaleDateString();
  116. },
  117. getTitle(loop) {
  118. let content = loop.content ? loop.content : 'Untitled';
  119. return content.trim();
  120. },
  121. truncate(str, len = 15) {
  122. return _.truncate(str, {length: len});
  123. }
  124. }
  125. }
  126. </script>