PostContent.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. <template>
  2. <div class="timeline-status-component-content">
  3. <div v-if="status.pf_type === 'poll'" class="postPresenterContainer" style="background: #000;">
  4. </div>
  5. <div v-else-if="!fixedHeight" class="postPresenterContainer" style="background: #000;">
  6. <div v-if="status.pf_type === 'photo'" class="w-100">
  7. <photo-presenter
  8. :status="status"
  9. v-on:lightbox="toggleLightbox"
  10. v-on:togglecw="status.sensitive = false"/>
  11. </div>
  12. <div v-else-if="status.pf_type === 'video'" class="w-100">
  13. <video-presenter :status="status" v-on:togglecw="status.sensitive = false"></video-presenter>
  14. </div>
  15. <div v-else-if="status.pf_type === 'photo:album'" class="w-100">
  16. <photo-album-presenter :status="status" v-on:lightbox="toggleLightbox" v-on:togglecw="status.sensitive = false"></photo-album-presenter>
  17. </div>
  18. <div v-else-if="status.pf_type === 'video:album'" class="w-100">
  19. <video-album-presenter :status="status" v-on:togglecw="status.sensitive = false"></video-album-presenter>
  20. </div>
  21. <div v-else-if="status.pf_type === 'photo:video:album'" class="w-100">
  22. <mixed-album-presenter :status="status" v-on:lightbox="toggleLightbox" v-on:togglecw="status.sensitive = false"></mixed-album-presenter>
  23. </div>
  24. </div>
  25. <div v-else class="card-body p-0">
  26. <div v-if="status.pf_type === 'photo'" :class="{ fixedHeight: fixedHeight }">
  27. <div v-if="status.sensitive == true" class="content-label-wrapper">
  28. <div class="text-light content-label">
  29. <p class="text-center">
  30. <i class="far fa-eye-slash fa-2x"></i>
  31. </p>
  32. <p class="h4 font-weight-bold text-center">
  33. {{ $t('common.sensitiveContent') }}
  34. </p>
  35. <p class="text-center py-2 content-label-text">
  36. {{ status.spoiler_text ? status.spoiler_text : $t('common.sensitiveContentWarning') }}
  37. </p>
  38. <p class="mb-0">
  39. <button class="btn btn-outline-light btn-block btn-sm font-weight-bold" @click="toggleContentWarning()">See Post</button>
  40. </p>
  41. </div>
  42. <blur-hash-image
  43. width="32"
  44. height="32"
  45. :punch="1"
  46. class="blurhash-wrapper"
  47. :hash="status.media_attachments[0].blurhash"
  48. />
  49. </div>
  50. <div
  51. v-else
  52. @click.prevent="toggleLightbox"
  53. class="content-label-wrapper"
  54. style="position: relative;width:100%;height: 400px;overflow: hidden;z-index:1"
  55. >
  56. <img
  57. :src="status.media_attachments[0].url"
  58. style="position: absolute;width: 105%;height: 410px;object-fit: cover;z-index: 1;top:0;left:0;filter: brightness(0.35) blur(6px);margin:-5px;">
  59. <!-- <blur-hash-canvas
  60. v-if="status.media_attachments[0].blurhash && status.media_attachments[0].blurhash != 'U4Rfzst8?bt7ogayj[j[~pfQ9Goe%Mj[WBay'"
  61. :key="key"
  62. width="32"
  63. height="32"
  64. :punch="1"
  65. :hash="status.media_attachments[0].blurhash"
  66. style="position: absolute;width: 105%;height: 410px;object-fit: cover;z-index: 1;top:0;left:0;filter: brightness(0.35);"
  67. /> -->
  68. <blur-hash-image
  69. :key="key"
  70. width="32"
  71. height="32"
  72. :punch="1"
  73. :hash="status.media_attachments[0].blurhash"
  74. :src="status.media_attachments[0].url"
  75. class="blurhash-wrapper"
  76. :alt="status.media_attachments[0].description"
  77. :title="status.media_attachments[0].description"
  78. style="width: 100%;position: absolute;z-index:9;top:0:left:0"
  79. />
  80. <p v-if="!status.sensitive && sensitive"
  81. @click="status.sensitive = true"
  82. style="
  83. margin-top: 0;
  84. padding: 10px;
  85. color: #000;
  86. font-size: 10px;
  87. text-align: right;
  88. position: absolute;
  89. top: 0;
  90. right: 0;
  91. border-radius: 11px;
  92. cursor: pointer;
  93. background: rgba(255, 255, 255,.5);
  94. ">
  95. <i class="fas fa-eye-slash fa-lg"></i>
  96. </p>
  97. </div>
  98. </div>
  99. <template v-else-if="status.pf_type === 'video'">
  100. <div v-if="status.sensitive == true" class="content-label-wrapper">
  101. <div class="text-light content-label">
  102. <p class="text-center">
  103. <i class="far fa-eye-slash fa-2x"></i>
  104. </p>
  105. <p class="h4 font-weight-bold text-center">
  106. Sensitive Content
  107. </p>
  108. <p class="text-center py-2 content-label-text">
  109. {{ status.spoiler_text ? status.spoiler_text : 'This post may contain sensitive content.'}}
  110. </p>
  111. <p class="mb-0">
  112. <button @click="status.sensitive = false" class="btn btn-outline-light btn-block btn-sm font-weight-bold">See Post</button>
  113. </p>
  114. </div>
  115. </div>
  116. <video v-else class="card-img-top shadow" :class="{ fixedHeight: fixedHeight }" style="border-radius:15px;object-fit: contain;background-color: #000;" controls :poster="getPoster(status)">
  117. <source :src="status.media_attachments[0].url" :type="status.media_attachments[0].mime">
  118. </video>
  119. </template>
  120. <div v-else-if="status.pf_type === 'photo:album'" class="card-img-top shadow" style="border-radius: 15px;">
  121. <photo-album-presenter :status="status" v-on:lightbox="toggleLightbox" v-on:togglecw="toggleContentWarning()" style="border-radius:15px !important;object-fit: contain;background-color: #000;overflow: hidden;" :class="{ fixedHeight: fixedHeight }"/>
  122. </div>
  123. <div v-else-if="status.pf_type === 'photo:video:album'" class="card-img-top shadow" style="border-radius: 15px;">
  124. <mixed-album-presenter :status="status" v-on:lightbox="toggleLightbox" v-on:togglecw="status.sensitive = false" style="border-radius:15px !important;object-fit: contain;background-color: #000;overflow: hidden;align-items:center" :class="{ fixedHeight: fixedHeight }"></mixed-album-presenter>
  125. </div>
  126. <div v-else-if="status.pf_type === 'text'">
  127. <div v-if="status.sensitive" class="border m-3 p-5 rounded-lg">
  128. <p class="text-center">
  129. <i class="far fa-eye-slash fa-2x"></i>
  130. </p>
  131. <p class="text-center lead font-weight-bold mb-0">Sensitive Content</p>
  132. <p class="text-center">{{ status.spoiler_text && status.spoiler_text.length ? status.spoiler_text : 'This post may contain sensitive content' }}</p>
  133. <p class="text-center mb-0">
  134. <button class="btn btn-primary btn-sm font-weight-bold" @click="status.sensitive = false">See post</button>
  135. </p>
  136. </div>
  137. </div>
  138. <div v-else class="bg-light rounded-lg d-flex align-items-center justify-content-center" style="height: 400px;">
  139. <div>
  140. <p class="text-center">
  141. <i class="fas fa-exclamation-triangle fa-4x"></i>
  142. </p>
  143. <p class="lead text-center mb-0">
  144. Cannot display post
  145. </p>
  146. <p class="small text-center mb-0">
  147. <!-- <a class="font-weight-bold primary" href="#">Report issue</a> -->
  148. {{status.pf_type}}:{{status.id}}
  149. </p>
  150. </div>
  151. </div>
  152. </div>
  153. <div
  154. v-if="status.content && !status.sensitive"
  155. class="card-body status-text"
  156. :class="[ status.pf_type === 'text' ? 'py-0' : 'pb-0']">
  157. <p>
  158. <read-more :status="status" :cursor-limit="300"/>
  159. </p>
  160. <!-- <p v-html="status.content_text || status.content">
  161. </p> -->
  162. </div>
  163. </div>
  164. </template>
  165. <script type="text/javascript">
  166. import BigPicture from 'bigpicture';
  167. import ReadMore from './ReadMore.vue';
  168. export default {
  169. props: ['status'],
  170. components: {
  171. "read-more": ReadMore,
  172. },
  173. data() {
  174. return {
  175. key: 1,
  176. sensitive: false,
  177. };
  178. },
  179. computed: {
  180. fixedHeight: {
  181. get() {
  182. return this.$store.state.fixedHeight == true;
  183. }
  184. }
  185. },
  186. methods: {
  187. toggleLightbox(e) {
  188. BigPicture({
  189. el: e.target
  190. })
  191. },
  192. toggleContentWarning() {
  193. this.key++;
  194. this.sensitive = true;
  195. this.status.sensitive = !this.status.sensitive;
  196. },
  197. getPoster(status) {
  198. let url = status.media_attachments[0].preview_url;
  199. if(url.endsWith('no-preview.jpg') || url.endsWith('no-preview.png')) {
  200. return;
  201. }
  202. return url;
  203. }
  204. }
  205. }
  206. </script>