1
0

StoryCompose.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293
  1. <template>
  2. <div class="container mt-2 mt-md-5">
  3. <input type="file" id="pf-dz" name="media" class="d-none file-input" v-bind:accept="config.mimes">
  4. <div v-if="loaded" class="row">
  5. <div class="col-12 col-md-6 offset-md-3">
  6. <!-- LANDING -->
  7. <div v-if="page == 'landing'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center" style="height: 90vh;">
  8. <div class="text-center flex-fill mt-5 pt-5">
  9. <img src="/img/pixelfed-icon-grey.svg" width="60px" height="60px">
  10. <p class="font-weight-bold lead text-lighter mt-1">Stories</p>
  11. <!-- <p v-if="loaded" class="font-weight-bold small text-uppercase text-muted">
  12. <span>{{stories.length}} Active</span>
  13. <span class="px-2">|</span>
  14. <span>30K Views</span>
  15. </p> -->
  16. </div>
  17. <div class="flex-fill py-4">
  18. <div class="card w-100 shadow-none">
  19. <div class="list-group">
  20. <!-- <a class="list-group-item text-center lead text-decoration-none text-dark" href="#">Camera</a> -->
  21. <a class="list-group-item text-center lead text-decoration-none text-dark" href="#" @click.prevent="upload()">Add Photo</a>
  22. <a v-if="stories.length" class="list-group-item text-center lead text-decoration-none text-dark" href="#" @click.prevent="edit()">Edit</a>
  23. <!-- <a class="list-group-item text-center lead text-decoration-none text-dark" href="#">Options</a> -->
  24. </div>
  25. </div>
  26. </div>
  27. <div class="text-center flex-fill">
  28. <p class="text-lighter small text-uppercase">
  29. <a href="/" class="text-muted font-weight-bold">Home</a>
  30. <span class="px-2 text-lighter">|</span>
  31. <a href="/i/my/story" class="text-muted font-weight-bold">View My Story</a>
  32. <span class="px-2 text-lighter">|</span>
  33. <a href="/site/help" class="text-muted font-weight-bold">Help</a>
  34. </p>
  35. </div>
  36. </div>
  37. <!-- CROP -->
  38. <div v-if="page == 'crop'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center" style="height: 95vh;">
  39. <div class="text-center pt-5 mb-3 d-flex justify-content-between align-items-center">
  40. <div>
  41. <button class="btn btn-outline-lighter btn-sm py-0 px-md-3"><i class="pr-2 fas fa-chevron-left fa-sm"></i> Delete</button>
  42. </div>
  43. <div class="d-flex align-items-center">
  44. <img class="d-inline-block mr-2" src="/img/pixelfed-icon-grey.svg" width="30px" height="30px">
  45. <span class="font-weight-bold lead text-lighter">Stories</span>
  46. </div>
  47. <div>
  48. <button class="btn btn-outline-success btn-sm py-0 px-md-3">Crop <i class="pl-2 fas fa-chevron-right fa-sm"></i></button>
  49. </div>
  50. </div>
  51. <div class="flex-fill">
  52. <div class="card w-100 mt-3">
  53. <div class="card-body p-0">
  54. <vue-cropper
  55. ref="cropper"
  56. :relativeZoom="cropper.zoom"
  57. :aspectRatio="cropper.aspectRatio"
  58. :viewMode="cropper.viewMode"
  59. :zoomable="cropper.zoomable"
  60. :rotatable="true"
  61. :src="mediaUrl"
  62. >
  63. </vue-cropper>
  64. </div>
  65. </div>
  66. </div>
  67. <div class="text-center flex-fill">
  68. <p class="text-lighter small text-uppercase pt-2">
  69. <!-- <a href="#" class="text-muted font-weight-bold">Home</a>
  70. <span class="px-2 text-lighter">|</span>
  71. <a href="#" class="text-muted font-weight-bold">View My Story</a>
  72. <span class="px-2 text-lighter">|</span> -->
  73. <a href="/site/help" class="text-muted font-weight-bold mb-0">Help</a>
  74. </p>
  75. </div>
  76. </div>
  77. <!-- ERROR -->
  78. <div v-if="page == 'error'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center align-items-center" style="height: 90vh;">
  79. <p class="h3 mb-0">Oops!</p>
  80. <p class="text-muted lead">An error occurred, please try again later.</p>
  81. <p class="text-muted mb-0">
  82. <a class="btn btn-outline-secondary py-0 px-5 font-weight-bold" href="/">Go back</a>
  83. </p>
  84. </div>
  85. <!-- UPLOADING -->
  86. <div v-if="page == 'uploading'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center align-items-center" style="height: 90vh;">
  87. <p v-if="uploadProgress != 100" class="display-4 mb-0">Uploading {{uploadProgress}}%</p>
  88. <p v-else class="display-4 mb-0">Publishing Story</p>
  89. </div>
  90. <div v-if="page == 'edit'" class="card card-body bg-transparent border-0 shadow-none d-flex justify-content-center" style="height: 90vh;">
  91. <div class="text-center flex-fill mt-5 pt-5">
  92. <img src="/img/pixelfed-icon-grey.svg" width="60px" height="60px">
  93. <p class="font-weight-bold lead text-lighter mt-1">Stories</p>
  94. </div>
  95. <div class="flex-fill py-5">
  96. <div class="card w-100 shadow-none" style="max-height: 500px; overflow-y: auto">
  97. <div class="list-group">
  98. <div v-for="(story, index) in stories" class="list-group-item text-center text-dark" href="#">
  99. <div class="media align-items-center">
  100. <div class="mr-3 cursor-pointer" @click="showLightbox(story)">
  101. <img :src="story.src" class="img-fluid" width="70px" height="70px">
  102. <p class="small text-muted text-center mb-0">(expand)</p>
  103. </div>
  104. <div class="media-body">
  105. <p class="mb-0">Expires</p>
  106. <p class="mb-0 text-muted small"><span>{{expiresTimestamp(story.expires_at)}}</span></p>
  107. </div>
  108. <div class="float-right">
  109. <button @click="deleteStory(story, index)" class="btn btn-danger btn-sm font-weight-bold text-uppercase">Delete</button>
  110. </div>
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115. </div>
  116. <div class="flex-fill text-center">
  117. <a class="btn btn-outline-secondary py-0 px-5 font-weight-bold" href="/i/stories/new">Go back</a>
  118. </div>
  119. </div>
  120. </div>
  121. </div>
  122. <b-modal
  123. id="lightbox"
  124. ref="lightboxModal"
  125. hide-header
  126. hide-footer
  127. centered
  128. size="lg"
  129. body-class="p-0"
  130. >
  131. <div v-if="lightboxMedia" class="w-100 h-100">
  132. <img :src="lightboxMedia.url" style="max-height: 100%; max-width: 100%">
  133. </div>
  134. </b-modal>
  135. </div>
  136. </template>
  137. <style type="text/css" scoped>
  138. </style>
  139. <script type="text/javascript">
  140. import VueTimeago from 'vue-timeago';
  141. import VueCropper from 'vue-cropperjs';
  142. import 'cropperjs/dist/cropper.css';
  143. export default {
  144. components: {
  145. VueCropper,
  146. VueTimeago
  147. },
  148. props: ['profile-id'],
  149. data() {
  150. return {
  151. loaded: false,
  152. config: window.App.config,
  153. mimes: [
  154. 'image/jpeg',
  155. 'image/png',
  156. // 'video/mp4'
  157. ],
  158. page: 'landing',
  159. pages: [
  160. 'landing',
  161. 'crop',
  162. 'edit',
  163. 'confirm',
  164. 'error',
  165. 'uploading'
  166. ],
  167. uploading: false,
  168. uploadProgress: 0,
  169. cropper: {
  170. aspectRatio: 9/16,
  171. viewMode: 1,
  172. zoomable: true,
  173. zoom: null
  174. },
  175. mediaUrl: null,
  176. stories: [],
  177. lightboxMedia: false,
  178. };
  179. },
  180. mounted() {
  181. this.mediaWatcher();
  182. axios.get('/api/stories/v0/fetch/' + this.profileId)
  183. .then(res => {
  184. this.stories = res.data;
  185. this.loaded = true;
  186. });
  187. },
  188. methods: {
  189. upload() {
  190. let fi = $('.file-input[name="media"]');
  191. fi.trigger('click');
  192. },
  193. mediaWatcher() {
  194. let self = this;
  195. $(document).on('change', '#pf-dz', function(e) {
  196. self.triggerUpload();
  197. });
  198. },
  199. triggerUpload() {
  200. let self = this;
  201. self.uploading = true;
  202. let io = document.querySelector('#pf-dz');
  203. self.page = 'uploading';
  204. Array.prototype.forEach.call(io.files, function(io, i) {
  205. if(self.media && self.media.length + i >= self.config.uploader.album_limit) {
  206. swal('Error', 'You can only upload ' + self.config.uploader.album_limit + ' photos per album', 'error');
  207. self.uploading = false;
  208. self.page = 2;
  209. return;
  210. }
  211. let type = io.type;
  212. let validated = $.inArray(type, self.mimes);
  213. if(validated == -1) {
  214. swal('Invalid File Type', 'The file you are trying to add is not a valid mime type. Please upload a '+self.mimes+' only.', 'error');
  215. self.uploading = false;
  216. self.page = 'error';
  217. return;
  218. }
  219. let form = new FormData();
  220. form.append('file', io);
  221. let xhrConfig = {
  222. onUploadProgress: function(e) {
  223. let progress = Math.floor( (e.loaded * 100) / e.total );
  224. self.uploadProgress = progress;
  225. }
  226. };
  227. axios.post('/api/stories/v0/add', form, xhrConfig)
  228. .then(function(e) {
  229. self.uploadProgress = 100;
  230. self.uploading = false;
  231. window.location.href = '/i/my/story';
  232. self.mediaUrl = e.data.media_url;
  233. }).catch(function(e) {
  234. self.uploading = false;
  235. io.value = null;
  236. let msg = e.response.data.message ? e.response.data.message : 'Something went wrong.'
  237. swal('Oops!', msg, 'warning');
  238. });
  239. io.value = null;
  240. self.uploadProgress = 0;
  241. });
  242. },
  243. expiresTimestamp(ts) {
  244. ts = new Date(ts * 1000);
  245. return ts.toDateString() + ' ' + ts.toLocaleTimeString();
  246. },
  247. edit() {
  248. this.page = 'edit';
  249. },
  250. showLightbox(story) {
  251. this.lightboxMedia = {
  252. url: story.src
  253. }
  254. this.$refs.lightboxModal.show();
  255. },
  256. deleteStory(story, index) {
  257. if(window.confirm('Are you sure you want to delete this Story?') != true) {
  258. return;
  259. }
  260. axios.delete('/api/stories/v0/delete/' + story.id)
  261. .then(res => {
  262. this.stories.splice(index, 1);
  263. if(this.stories.length == 0) {
  264. window.location.href = '/i/stories/new';
  265. }
  266. });
  267. }
  268. }
  269. }
  270. </script>