ComposeModal.vue 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915
  1. <template>
  2. <div>
  3. <input type="file" id="pf-dz" name="media" class="w-100 h-100 d-none file-input" draggable="true" v-bind:accept="config.uploader.media_types" multiple="">
  4. <div class="timeline">
  5. <div v-if="uploading">
  6. <div class="card status-card card-md-rounded-0 w-100 h-100 bg-light py-3" style="border-bottom: 1px solid #f1f1f1">
  7. <div class="p-5 mt-2">
  8. <b-progress :value="uploadProgress" :max="100" striped :animated="true"></b-progress>
  9. <p class="text-center mb-0 font-weight-bold">Uploading ... ({{uploadProgress}}%)</p>
  10. </div>
  11. </div>
  12. </div>
  13. <div v-else-if="page == 'cameraRoll'">
  14. <div class="card status-card card-md-rounded-0" style="display:flex;">
  15. <div class="card-header d-inline-flex align-items-center justify-content-between bg-white">
  16. <span class="pr-3">
  17. <i class="fas fa-cog fa-lg text-muted"></i>
  18. </span>
  19. <span class="font-weight-bold">
  20. Camera Roll
  21. </span>
  22. <span class="text-primary font-weight-bold">Upload</span>
  23. </div>
  24. <div class="h-100 card-body p-0 border-top" style="width:100%; min-height: 400px;">
  25. <div v-if="cameraRollMedia.length > 0" class="row p-0 m-0">
  26. <div v-for="(m, index) in cameraRollMedia" :class="[index == 0 ? 'col-12 p-0' : 'col-3 p-0']">
  27. <div class="card info-overlay p-0 rounded-0 shadow-none border">
  28. <div class="square">
  29. <img class="square-content" :src="m.preview_url"></img>
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. <div v-else class="w-100 h-100 d-flex justify-content-center align-items-center">
  35. <span class="w-100 h-100">
  36. <button type="button" class="btn btn-primary">Upload</button>
  37. <button type="button" class="btn btn-primary" @click="fetchCameraRollDrafts()">Load Camera Roll</button>
  38. </span>
  39. </div>
  40. </div>
  41. </div>
  42. </div>
  43. <div v-else>
  44. <div class="card status-card card-md-rounded-0 w-100 h-100" style="display:flex;">
  45. <div class="card-header d-inline-flex align-items-center justify-content-between bg-white">
  46. <div>
  47. <a v-if="page == 1" href="#" @click.prevent="closeModal()" class="font-weight-bold text-decoration-none text-muted">
  48. <i class="fas fa-times fa-lg"></i>
  49. <span class="font-weight-bold mb-0">{{pageTitle}}</span>
  50. </a>
  51. <span v-else-if="page == 2">
  52. <button v-if="config.uploader.album_limit > media.length" class="btn btn-outline-primary btn-sm font-weight-bold" @click.prevent="addMedia" data-toggle="tooltip" data-placement="bottom" title="Upload another photo or video" ><i class="fas fa-plus"></i></button>
  53. <!-- <button v-if="config.uploader.album_limit > media.length" class="btn btn-outline-primary btn-sm font-weight-bold" @click.prevent="page = 'cameraRoll'" data-toggle="tooltip" data-placement="bottom" title="Upload another photo or video" ><i class="fas fa-chevron-left"></i> Camera Roll</button> -->
  54. <button v-else class="btn btn-outline-secondary btn-sm font-weight-bold" disabled><i class="fas fa-plus"></i></button>
  55. </span>
  56. <span v-else-if="page == 3">
  57. <a class="text-lighter text-decoration-none mr-3 d-flex align-items-center" href="#" @click.prevent="goBack()">
  58. <i class="fas fa-long-arrow-alt-left fa-lg mr-2"></i>
  59. <span class="btn btn-outline-secondary btn-sm px-2 py-0 disabled" disabled="">{{media.length}}</span>
  60. </a>
  61. <span class="font-weight-bold mb-0">{{pageTitle}}</span>
  62. </span>
  63. <span v-else>
  64. <a class="text-lighter text-decoration-none mr-3" href="#" @click.prevent="goBack()"><i class="fas fa-long-arrow-alt-left fa-lg"></i></a>
  65. </span>
  66. <span class="font-weight-bold mb-0">{{pageTitle}}</span>
  67. </div>
  68. <div v-if="page == 2">
  69. <a v-if="media.length == 1" href="#" class="text-center text-dark" @click.prevent="showCropPhotoCard"><i class="fas fa-magic fa-lg"></i></a>
  70. </div>
  71. <div>
  72. <!-- <a v-if="page > 1" class="font-weight-bold text-decoration-none" href="#" @click.prevent="page--">Back</a> -->
  73. <span v-if="pageLoading">
  74. <div class="spinner-border spinner-border-sm" role="status">
  75. <span class="sr-only">Loading...</span>
  76. </div>
  77. </span>
  78. <span v-else>
  79. <a v-if="!pageLoading && (page > 1 && page <= 2) || (page == 1 && ids.length != 0) || page == 'cropPhoto'" class="font-weight-bold text-decoration-none" href="#" @click.prevent="nextPage">Next</a>
  80. <a v-if="!pageLoading && page == 3" class="font-weight-bold text-decoration-none" href="#" @click.prevent="compose()">Post</a>
  81. </span>
  82. </div>
  83. </div>
  84. <div class="card-body p-0 border-top">
  85. <div v-if="page == 1" class="w-100 h-100 d-flex justify-content-center align-items-center" style="min-height: 400px;">
  86. <div class="text-center">
  87. <div v-if="media.length == 0" class="card mx-md-5 my-md-3 shadow-none border compose-action text-decoration-none text-dark">
  88. <div @click.prevent="addMedia" class="card-body">
  89. <div class="media">
  90. <div class="mr-3 align-items-center justify-content-center" style="display:inline-flex;width:40px;height:40px;border-radius: 100%;background-color: #008DF5">
  91. <i class="fas fa-bolt text-white fa-lg"></i>
  92. </div>
  93. <div class="media-body text-left">
  94. <p class="mb-0">
  95. <span class="h5 mt-0 font-weight-bold text-primary">New Post</span>
  96. </p>
  97. <p class="mb-0 text-muted">Share up to {{config.uploader.album_limit}} photos or videos</p>
  98. </div>
  99. </div>
  100. </div>
  101. </div>
  102. <a v-if="config.features.stories == true" class="card mx-md-5 my-md-3 shadow-none border compose-action text-decoration-none text-dark" href="/i/stories/new">
  103. <div class="card-body">
  104. <div class="media">
  105. <div class="mr-3 align-items-center justify-content-center" style="display:inline-flex;width:40px;height:40px;border-radius: 100%;border: 2px solid #008DF5">
  106. <i class="fas fa-history text-primary fa-lg"></i>
  107. </div>
  108. <div class="media-body text-left">
  109. <p class="mb-0">
  110. <span class="h5 mt-0 font-weight-bold text-primary">New Story</span>
  111. <sup class="float-right mt-2">
  112. <span class="btn btn-outline-lighter p-1 btn-sm font-weight-bold py-0" style="font-size:10px;line-height: 0.6">BETA</span>
  113. </sup>
  114. </p>
  115. <p class="mb-0 text-muted">Add Photo to Story</p>
  116. </div>
  117. </div>
  118. </div>
  119. </a>
  120. <a class="card mx-md-5 my-md-3 shadow-none border compose-action text-decoration-none text-dark" href="/i/collections/create">
  121. <div class="card-body">
  122. <div class="media">
  123. <div class="mr-3 align-items-center justify-content-center" style="display:inline-flex;width:40px;height:40px;border-radius: 100%;border: 2px solid #008DF5">
  124. <i class="fas fa-images text-primary fa-lg"></i>
  125. </div>
  126. <div class="media-body text-left">
  127. <p class="mb-0">
  128. <span class="h5 mt-0 font-weight-bold text-primary">New Collection</span>
  129. <sup class="float-right mt-2">
  130. <span class="btn btn-outline-lighter p-1 btn-sm font-weight-bold py-0" style="font-size:10px;line-height: 0.6">BETA</span>
  131. </sup>
  132. </p>
  133. <p class="mb-0 text-muted">New collection of posts</p>
  134. </div>
  135. </div>
  136. </div>
  137. </a>
  138. <p class="py-3">
  139. <a class="font-weight-bold" href="/site/help">Help</a>
  140. </p>
  141. </div>
  142. </div>
  143. <div v-if="page == 'cropPhoto'" class="w-100 h-100">
  144. <div v-if="ids.length > 0">
  145. <vue-cropper
  146. ref="cropper"
  147. :relativeZoom="cropper.zoom"
  148. :aspectRatio="cropper.aspectRatio"
  149. :viewMode="cropper.viewMode"
  150. :zoomable="cropper.zoomable"
  151. :rotatable="true"
  152. :src="media[carouselCursor].url"
  153. >
  154. </vue-cropper>
  155. </div>
  156. </div>
  157. <div v-if="page == 2" class="w-100 h-100">
  158. <div v-if="media.length == 1">
  159. <div slot="img" style="display:flex;min-height: 420px;align-items: center;">
  160. <img :class="'d-block img-fluid w-100 ' + [media[carouselCursor].filter_class?media[carouselCursor].filter_class:'']" :src="media[carouselCursor].url" :alt="media[carouselCursor].description" :title="media[carouselCursor].description">
  161. </div>
  162. <hr>
  163. <div v-if="ids.length > 0 && media[carouselCursor].type == 'Image'" class="align-items-center px-2 pt-2">
  164. <ul class="nav media-drawer-filters text-center">
  165. <li class="nav-item">
  166. <div class="p-1 pt-3">
  167. <img :src="media[carouselCursor].url" width="100px" height="60px" v-on:click.prevent="toggleFilter($event, null)" class="cursor-pointer">
  168. </div>
  169. <a :class="[media[carouselCursor].filter_class == null ? 'nav-link text-primary active' : 'nav-link text-muted']" href="#" v-on:click.prevent="toggleFilter($event, null)">No Filter</a>
  170. </li>
  171. <li class="nav-item" v-for="(filter, index) in filters">
  172. <div class="p-1 pt-3">
  173. <img :src="media[carouselCursor].url" width="100px" height="60px" :class="filter[1]" v-on:click.prevent="toggleFilter($event, filter[1])">
  174. </div>
  175. <a :class="[media[carouselCursor].filter_class == filter[1] ? 'nav-link text-primary active' : 'nav-link text-muted']" href="#" v-on:click.prevent="toggleFilter($event, filter[1])">{{filter[0]}}</a>
  176. </li>
  177. </ul>
  178. </div>
  179. </div>
  180. <div v-else-if="media.length > 1" class="d-flex-inline px-2 pt-2">
  181. <ul class="nav media-drawer-filters text-center">
  182. <li class="nav-item mx-md-4">&nbsp;</li>
  183. <li v-for="(m, i) in media" class="nav-item mx-md-4">
  184. <div class="nav-link" style="display:block;width:300px;height:300px;" @click="carouselCursor = i">
  185. <!-- <img :class="'d-block img-fluid w-100 ' + [m.filter_class?m.filter_class:'']" :src="m.url" :alt="m.description" :title="m.description"> -->
  186. <span :class="[m.filter_class?m.filter_class:'']">
  187. <span :class="'rounded border ' + [i == carouselCursor ? ' border-primary shadow':'']" :style="'display:block;padding:5px;width:100%;height:100%;background-image: url(' + m.url + ');background-size:cover;border-width:3px !important;'"></span>
  188. </span>
  189. </div>
  190. <div v-if="i == carouselCursor" class="text-center mb-0 small text-lighter font-weight-bold pt-2">
  191. <span class="cursor-pointer" @click.prevent="showCropPhotoCard">Crop</span>
  192. <span class="cursor-pointer px-3" @click.prevent="showEditMediaCard()">Edit</span>
  193. <span class="cursor-pointer" @click="deleteMedia()">Delete</span>
  194. </div>
  195. </li>
  196. <li class="nav-item mx-md-4">&nbsp;</li>
  197. </ul>
  198. <hr>
  199. <div v-if="ids.length > 0 && media[carouselCursor].type == 'Image'" class="align-items-center px-2 pt-2">
  200. <ul class="nav media-drawer-filters text-center">
  201. <li class="nav-item">
  202. <div class="p-1 pt-3">
  203. <img :src="media[carouselCursor].url" width="100px" height="60px" v-on:click.prevent="toggleFilter($event, null)" class="cursor-pointer">
  204. </div>
  205. <a :class="[media[carouselCursor].filter_class == null ? 'nav-link text-primary active' : 'nav-link text-muted']" href="#" v-on:click.prevent="toggleFilter($event, null)">No Filter</a>
  206. </li>
  207. <li class="nav-item" v-for="(filter, index) in filters">
  208. <div class="p-1 pt-3">
  209. <img :src="media[carouselCursor].url" width="100px" height="60px" :class="filter[1]" v-on:click.prevent="toggleFilter($event, filter[1])">
  210. </div>
  211. <a :class="[media[carouselCursor].filter_class == filter[1] ? 'nav-link text-primary active' : 'nav-link text-muted']" href="#" v-on:click.prevent="toggleFilter($event, filter[1])">{{filter[0]}}</a>
  212. </li>
  213. </ul>
  214. </div>
  215. </div>
  216. <div v-else>
  217. <p class="mb-0 p-5 text-center font-weight-bold">An error occured, please refresh the page.</p>
  218. </div>
  219. </div>
  220. <div v-if="page == 3" class="w-100 h-100">
  221. <div class="border-bottom mt-2">
  222. <div class="media px-3">
  223. <img :src="media[0].url" width="42px" height="42px" :class="[media[0].filter_class?'mr-2 ' + media[0].filter_class:'mr-2']">
  224. <div class="media-body">
  225. <div class="form-group">
  226. <label class="font-weight-bold text-muted small d-none">Caption</label>
  227. <textarea class="form-control border-0 rounded-0 no-focus" rows="2" placeholder="Write a caption..." style="resize:none" v-model="composeText" v-on:keyup="composeTextLength = composeText.length"></textarea>
  228. <p class="help-text small text-right text-muted mb-0">{{composeTextLength}}/{{config.uploader.max_caption_length}}</p>
  229. </div>
  230. </div>
  231. </div>
  232. </div>
  233. <div class="border-bottom d-flex justify-content-between px-4 mb-0 py-2 ">
  234. <div>
  235. <div class="text-dark ">Contains NSFW Media</div>
  236. </div>
  237. <div>
  238. <div class="custom-control custom-switch" style="z-index: 9999;">
  239. <input type="checkbox" class="custom-control-input" id="asnsfw" v-model="nsfw">
  240. <label class="custom-control-label" for="asnsfw"></label>
  241. </div>
  242. </div>
  243. </div>
  244. <!-- <div class="border-bottom">
  245. <p class="px-4 mb-0 py-2 cursor-pointer" @click="showTagCard()">Tag people</p>
  246. </div> -->
  247. <div class="border-bottom">
  248. <p class="px-4 mb-0 py-2 cursor-pointer" @click="showLocationCard()" v-if="!place">Add location</p>
  249. <p v-else class="px-4 mb-0 py-2">
  250. <span class="text-lighter">Location:</span> {{place.name}}, {{place.country}}
  251. <span class="float-right">
  252. <a href="#" @click.prevent="showLocationCard()" class="btn btn-outline-secondary btn-sm small mr-2" style="font-size:10px;padding:3px;text-transform: uppercase">Edit</a>
  253. <a href="#" @click.prevent="place = false" class="btn btn-outline-secondary btn-sm small" style="font-size:10px;padding:3px;text-transform: uppercase">Remove</a>
  254. </span>
  255. </p>
  256. </div>
  257. <div class="border-bottom">
  258. <p class="px-4 mb-0 py-2">
  259. <span class="text-lighter">Visibility:</span> {{visibilityTag}}
  260. <span class="float-right">
  261. <a v-if="profile.locked == false" href="#" @click.prevent="showVisibilityCard()" class="btn btn-outline-secondary btn-sm small mr-2" style="font-size:10px;padding:3px;text-transform: uppercase">Edit</a>
  262. </span>
  263. </p>
  264. </div>
  265. <!-- <div class="cursor-pointer border-bottom px-4 mb-0 py-2" @click.prevent="showMediaDescriptionsCard()">
  266. <div class="d-flex justify-content-between align-items-center">
  267. <div>
  268. <div class="text-dark">Media Descriptions</div>
  269. <p class="text-muted small mb-0">Describe your photos for people with visual impairments.</p>
  270. </div>
  271. <div>
  272. <i class="fas fa-chevron-right fa-lg text-lighter"></i>
  273. </div>
  274. </div>
  275. </div> -->
  276. <div style="min-height: 200px;">
  277. <p class="px-4 mb-0 py-2 small font-weight-bold text-muted cursor-pointer" @click="showAdvancedSettingsCard()">Advanced settings</p>
  278. </div>
  279. </div>
  280. <div v-if="page == 'tagPeople'" class="w-100 h-100 p-3">
  281. <p class="text-center lead text-muted mb-0 py-5">This feature is not available yet.</p>
  282. </div>
  283. <div v-if="page == 'addLocation'" class="w-100 h-100 p-3">
  284. <p class="mb-0">Add Location</p>
  285. <autocomplete
  286. :search="locationSearch"
  287. placeholder="Search locations ..."
  288. aria-label="Search locations ..."
  289. :get-result-value="getResultValue"
  290. @submit="onSubmitLocation"
  291. >
  292. </autocomplete>
  293. </div>
  294. <div v-if="page == 'advancedSettings'" class="w-100 h-100">
  295. <div class="list-group list-group-flush">
  296. <div class="list-group-item d-flex justify-content-between">
  297. <div>
  298. <div class="text-dark ">Turn off commenting</div>
  299. <p class="text-muted small mb-0">Disables comments for this post, you can change this later.</p>
  300. </div>
  301. <div>
  302. <div class="custom-control custom-switch" style="z-index: 9999;">
  303. <input type="checkbox" class="custom-control-input" id="asdisablecomments" v-model="commentsDisabled">
  304. <label class="custom-control-label" for="asdisablecomments"></label>
  305. </div>
  306. </div>
  307. </div>
  308. <a href="#" class="list-group-item" @click.prevent="showMediaDescriptionsCard()">
  309. <div class="d-flex justify-content-between align-items-center">
  310. <div>
  311. <div class="text-dark">Media Descriptions</div>
  312. <p class="text-muted small mb-0">Describe your photos for people with visual impairments.</p>
  313. </div>
  314. <div>
  315. <i class="fas fa-chevron-right fa-lg text-lighter"></i>
  316. </div>
  317. </div>
  318. </a>
  319. <!-- <a href="#" class="list-group-item" @click.prevent="showAddToCollectionsCard()">
  320. <div class="d-flex justify-content-between align-items-center">
  321. <div>
  322. <div class="text-dark">Add to Collection</div>
  323. <p class="text-muted small mb-0">Add this post to a collection.</p>
  324. </div>
  325. <div>
  326. <i class="fas fa-chevron-right fa-lg text-lighter"></i>
  327. </div>
  328. </div>
  329. </a>
  330. <a href="#" class="list-group-item" @click.prevent="page = 'schedulePost'">
  331. <div class="d-flex justify-content-between align-items-center">
  332. <div>
  333. <div class="text-dark">Schedule</div>
  334. <p class="text-muted small mb-0">Schedule post for a future date.</p>
  335. </div>
  336. <div>
  337. <i class="fas fa-chevron-right fa-lg text-lighter"></i>
  338. </div>
  339. </div>
  340. </a>
  341. <a href="#" class="list-group-item" @click.prevent="page = 'mediaMetadata'">
  342. <div class="d-flex justify-content-between align-items-center">
  343. <div>
  344. <div class="text-dark">Metadata</div>
  345. <p class="text-muted small mb-0">Manage media exif and metadata.</p>
  346. </div>
  347. <div>
  348. <i class="fas fa-chevron-right fa-lg text-lighter"></i>
  349. </div>
  350. </div>
  351. </a> -->
  352. </div>
  353. </div>
  354. <div v-if="page == 'visibility'" class="w-100 h-100">
  355. <div class="list-group list-group-flush">
  356. <div :class="'list-group-item lead cursor-pointer ' + [visibility == 'public'?'text-primary':'']" @click="toggleVisibility('public')">Public</div>
  357. <div :class="'list-group-item lead cursor-pointer ' + [visibility == 'unlisted'?'text-primary':'']" @click="toggleVisibility('unlisted')">Unlisted</div>
  358. <div :class="'list-group-item lead cursor-pointer ' + [visibility == 'private'?'text-primary':'']" @click="toggleVisibility('private')">Followers Only</div>
  359. </div>
  360. </div>
  361. <div v-if="page == 'altText'" class="w-100 h-100 p-3">
  362. <div v-for="(m, index) in media">
  363. <div class="media">
  364. <img :src="m.preview_url" class="mr-3" width="50px" height="50px">
  365. <div class="media-body">
  366. <textarea class="form-control" v-model="m.alt" placeholder="Add a media description here..."></textarea>
  367. <p class="help-text small text-right text-muted mb-0">{{m.alt ? m.alt.length : 0}}/140</p>
  368. </div>
  369. </div>
  370. <hr>
  371. </div>
  372. <p class="d-flex justify-content-between mb-0">
  373. <button type="button" @click="goBack()" class="btn btn-link text-muted font-weight-bold text-decoration-none">Cancel</button>
  374. <button type="button" @click="goBack()" class="btn btn-primary font-weight-bold">Save</button>
  375. </p>
  376. </div>
  377. <div v-if="page == 'addToCollection'" class="w-100 h-100 p-3">
  378. <div class="list-group mb-3">
  379. <div class="list-group-item cursor-pointer compose-action border" @click="goBack()">
  380. <div class="media">
  381. <img src="" class="mr-3" alt="" width="50px" height="50px">
  382. <div class="media-body">
  383. <h5 class="mt-0">collection title</h5>
  384. <p class="mb-0 text-muted small">3 Photos - Created 2h ago</p>
  385. </div>
  386. </div>
  387. </div>
  388. </div>
  389. <p class="d-flex justify-content-between mb-0">
  390. <button type="button" @click="goBack()" class="btn btn-link text-muted font-weight-bold text-decoration-none">Cancel</button>
  391. <button type="button" @click="goBack()" class="btn btn-primary font-weight-bold">Save</button>
  392. </p>
  393. </div>
  394. <div v-if="page == 'schedulePost'" class="w-100 h-100 p-3">
  395. <p class="text-center lead text-muted mb-0 py-5">This feature is not available yet.</p>
  396. </div>
  397. <div v-if="page == 'mediaMetadata'" class="w-100 h-100 p-3">
  398. <p class="text-center lead text-muted mb-0 py-5">This feature is not available yet.</p>
  399. </div>
  400. <div v-if="page == 'addToStory'" class="w-100 h-100 p-3">
  401. <p class="text-center lead text-muted mb-0 py-5">This feature is not available yet.</p>
  402. </div>
  403. <div v-if="page == 'editMedia'" class="w-100 h-100 p-3">
  404. <div class="media">
  405. <img :src="media[carouselCursor].preview_url" class="mr-3" width="50px" height="50px">
  406. <div class="media-body">
  407. <div class="form-group">
  408. <label class="font-weight-bold text-muted small">Media Description</label>
  409. <textarea class="form-control" v-model="media[carouselCursor].alt" placeholder="Add a media description here..."></textarea>
  410. <p class="help-text small text-muted mb-0 d-flex justify-content-between">
  411. <span>Describe your photo for people with visual impairments.</span>
  412. <span>{{media[carouselCursor].alt ? media[carouselCursor].alt.length : 0}}/140</span>
  413. </p>
  414. </div>
  415. <div class="form-group">
  416. <label class="font-weight-bold text-muted small">License</label>
  417. <input type="text" class="form-control" v-model="media[carouselCursor].license" placeholder="All Rights Reserved (Default license)">
  418. <p class="help-text small text-muted mb-0 d-flex justify-content-between">
  419. <span></span>
  420. <span>{{media[carouselCursor].license ? media[carouselCursor].license.length : 0}}/140</span>
  421. </p>
  422. </div>
  423. </div>
  424. </div>
  425. <hr>
  426. <p class="d-flex justify-content-between mb-0">
  427. <button type="button" @click="goBack()" class="btn btn-link text-muted font-weight-bold text-decoration-none">Cancel</button>
  428. <button type="button" @click="goBack()" class="btn btn-primary font-weight-bold">Save</button>
  429. </p>
  430. </div>
  431. </div>
  432. <!-- card-footers -->
  433. <div v-if="page == 'cropPhoto'" class="card-footer bg-white d-flex justify-content-between">
  434. <div>
  435. <button type="button" class="btn btn-outline-secondary" @click="rotate"><i class="fas fa-undo"></i></button>
  436. </div>
  437. <div>
  438. <div class="d-inline-block button-group">
  439. <button :class="'btn font-weight-bold ' + [cropper.aspectRatio == 16/9 ? 'btn-primary':'btn-light']" @click.prevent="changeAspect(16/9)">16:9</button>
  440. <button :class="'btn font-weight-bold ' + [cropper.aspectRatio == 4/3 ? 'btn-primary':'btn-light']" @click.prevent="changeAspect(4/3)">4:3</button>
  441. <button :class="'btn font-weight-bold ' + [cropper.aspectRatio == 3/2 ? 'btn-primary':'btn-light']" @click.prevent="changeAspect(3/2)">3:2</button>
  442. <button :class="'btn font-weight-bold ' + [cropper.aspectRatio == 1 ? 'btn-primary':'btn-light']" @click.prevent="changeAspect(1)">1:1</button>
  443. <button :class="'btn font-weight-bold ' + [cropper.aspectRatio == 2/3 ? 'btn-primary':'btn-light']" @click.prevent="changeAspect(2/3)">2:3</button>
  444. </div>
  445. </div>
  446. </div>
  447. </div>
  448. </div>
  449. </div>
  450. </div>
  451. </template>
  452. <style type="text/css" scoped>
  453. .media-drawer-filters {
  454. overflow-x: scroll;
  455. flex-wrap:unset;
  456. }
  457. .media-drawer-filters::-webkit-scrollbar {
  458. width: 0px;
  459. background: transparent;
  460. }
  461. .media-drawer-filters .nav-link {
  462. min-width:100px;
  463. padding-top: 1rem;
  464. padding-bottom: 1rem;
  465. }
  466. .media-drawer-filters .active {
  467. color: #fff;
  468. font-weight: bold;
  469. }
  470. @media (hover: none) and (pointer: coarse) {
  471. .media-drawer-filters::-webkit-scrollbar {
  472. display: none;
  473. }
  474. }
  475. .no-focus {
  476. border-color: none;
  477. outline: 0;
  478. box-shadow: none;
  479. }
  480. a.list-group-item {
  481. text-decoration: none;
  482. }
  483. a.list-group-item:hover {
  484. text-decoration: none;
  485. background-color: #f8f9fa !important;
  486. }
  487. .compose-action:hover {
  488. cursor: pointer;
  489. background-color: #f8f9fa !important;
  490. }
  491. </style>
  492. <script type="text/javascript">
  493. import VueCropper from 'vue-cropperjs';
  494. import 'cropperjs/dist/cropper.css';
  495. import Autocomplete from '@trevoreyre/autocomplete-vue'
  496. import '@trevoreyre/autocomplete-vue/dist/style.css'
  497. export default {
  498. components: {
  499. VueCropper,
  500. Autocomplete
  501. },
  502. data() {
  503. return {
  504. config: window.App.config,
  505. pageLoading: false,
  506. profile: {},
  507. composeText: '',
  508. composeTextLength: 0,
  509. nsfw: false,
  510. filters: [],
  511. ids: [],
  512. media: [],
  513. carouselCursor: 0,
  514. uploading: false,
  515. uploadProgress: 100,
  516. composeType: false,
  517. page: 1,
  518. composeState: 'publish',
  519. visibility: 'public',
  520. visibilityTag: 'Public',
  521. nsfw: false,
  522. place: false,
  523. commentsDisabled: false,
  524. pageTitle: '',
  525. cropper: {
  526. aspectRatio: 1,
  527. viewMode: 1,
  528. zoomable: true,
  529. zoom: 0
  530. },
  531. taggedUsernames: false,
  532. namedPages: [
  533. 'cropPhoto',
  534. 'tagPeople',
  535. 'addLocation',
  536. 'advancedSettings',
  537. 'visibility',
  538. 'altText',
  539. 'addToCollection',
  540. 'schedulePost',
  541. 'mediaMetadata',
  542. 'addToStory',
  543. 'editMedia',
  544. 'cameraRoll'
  545. ],
  546. cameraRollMedia: []
  547. }
  548. },
  549. beforeMount() {
  550. this.fetchProfile();
  551. if(this.config.uploader.media_types.includes('video/mp4') == false) {
  552. this.composeType = 'post'
  553. }
  554. this.filters = window.App.util.filters;
  555. },
  556. mounted() {
  557. this.mediaWatcher();
  558. },
  559. updated() {
  560. if(this.page == 2) {
  561. $('[data-toggle="tooltip"]').tooltip();
  562. }
  563. },
  564. methods: {
  565. fetchProfile() {
  566. axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
  567. this.profile = res.data;
  568. window.pixelfed.currentUser = res.data;
  569. if(res.data.locked == true) {
  570. this.visibility = 'private';
  571. this.visibilityTag = 'Followers Only';
  572. }
  573. }).catch(err => {
  574. });
  575. },
  576. addMedia(event) {
  577. let el = $(event.target);
  578. el.attr('disabled', '');
  579. let fi = $('.file-input[name="media"]');
  580. fi.trigger('click');
  581. el.blur();
  582. el.removeAttr('disabled');
  583. },
  584. mediaWatcher() {
  585. let self = this;
  586. $(document).on('change', '#pf-dz', function(e) {
  587. self.mediaUpload();
  588. });
  589. },
  590. mediaUpload() {
  591. let self = this;
  592. self.uploading = true;
  593. let io = document.querySelector('#pf-dz');
  594. Array.prototype.forEach.call(io.files, function(io, i) {
  595. if(self.media && self.media.length + i >= self.config.uploader.album_limit) {
  596. swal('Error', 'You can only upload ' + self.config.uploader.album_limit + ' photos per album', 'error');
  597. self.uploading = false;
  598. self.page = 2;
  599. return;
  600. }
  601. let type = io.type;
  602. let acceptedMimes = self.config.uploader.media_types.split(',');
  603. let validated = $.inArray(type, acceptedMimes);
  604. if(validated == -1) {
  605. swal('Invalid File Type', 'The file you are trying to add is not a valid mime type. Please upload a '+self.config.uploader.media_types+' only.', 'error');
  606. self.uploading = false;
  607. self.page = 2;
  608. return;
  609. }
  610. let form = new FormData();
  611. form.append('file', io);
  612. let xhrConfig = {
  613. onUploadProgress: function(e) {
  614. let progress = Math.round( (e.loaded * 100) / e.total );
  615. self.uploadProgress = progress;
  616. }
  617. };
  618. axios.post('/api/pixelfed/v1/media', form, xhrConfig)
  619. .then(function(e) {
  620. self.uploadProgress = 100;
  621. self.ids.push(e.data.id);
  622. self.media.push(e.data);
  623. self.uploading = false;
  624. setTimeout(function() {
  625. self.page = 2;
  626. }, 300);
  627. }).catch(function(e) {
  628. self.uploading = false;
  629. io.value = null;
  630. swal('Oops, something went wrong!', 'An unexpected error occurred.', 'error');
  631. self.page = 2;
  632. });
  633. io.value = null;
  634. self.uploadProgress = 0;
  635. });
  636. },
  637. toggleFilter(e, filter) {
  638. this.media[this.carouselCursor].filter_class = filter;
  639. },
  640. deleteMedia() {
  641. if(window.confirm('Are you sure you want to delete this media?') == false) {
  642. return;
  643. }
  644. let id = this.media[this.carouselCursor].id;
  645. axios.delete('/api/pixelfed/v1/media', {
  646. params: {
  647. id: id
  648. }
  649. }).then(res => {
  650. this.ids.splice(this.carouselCursor, 1);
  651. this.media.splice(this.carouselCursor, 1);
  652. if(this.media.length == 0) {
  653. this.ids = [];
  654. this.media = [];
  655. this.carouselCursor = 0;
  656. } else {
  657. this.carouselCursor = 0;
  658. }
  659. }).catch(err => {
  660. swal('Whoops!', 'An error occured when attempting to delete this, please try again', 'error');
  661. });
  662. },
  663. compose() {
  664. let state = this.composeState;
  665. if(this.uploadProgress != 100 || this.ids.length == 0) {
  666. return;
  667. }
  668. if(this.composeText.length > this.config.uploader.max_caption_length) {
  669. swal('Error', 'Caption is too long', 'error');
  670. return;
  671. }
  672. switch(state) {
  673. case 'publish' :
  674. if(this.media.length == 0) {
  675. swal('Whoops!', 'You need to add media before you can save this!', 'warning');
  676. return;
  677. }
  678. if(this.composeText == 'Add optional caption...') {
  679. this.composeText = '';
  680. }
  681. let data = {
  682. media: this.media,
  683. caption: this.composeText,
  684. visibility: this.visibility,
  685. cw: this.nsfw,
  686. comments_disabled: this.commentsDisabled,
  687. place: this.place
  688. };
  689. axios.post('/api/local/status/compose', data)
  690. .then(res => {
  691. let data = res.data;
  692. window.location.href = data;
  693. }).catch(err => {
  694. let msg = err.response.data.message ? err.response.data.message : 'An unexpected error occured.'
  695. swal('Oops, something went wrong!', msg, 'error');
  696. });
  697. return;
  698. break;
  699. case 'delete' :
  700. this.ids = [];
  701. this.media = [];
  702. this.carouselCursor = 0;
  703. this.composeText = '';
  704. this.composeTextLength = 0;
  705. $('#composeModal').modal('hide');
  706. return;
  707. break;
  708. }
  709. },
  710. closeModal() {
  711. this.composeType = '';
  712. $('#composeModal').modal('hide');
  713. },
  714. goBack() {
  715. this.pageTitle = '';
  716. switch(this.page) {
  717. case 'cropPhoto':
  718. case 'editMedia':
  719. this.page = 2;
  720. break;
  721. default:
  722. this.namedPages.indexOf(this.page) != -1 ? this.page = 3 : this.page--;
  723. break;
  724. }
  725. },
  726. nextPage() {
  727. this.pageTitle = '';
  728. switch(this.page) {
  729. case 1:
  730. this.page = 2;
  731. break;
  732. case 'cropPhoto':
  733. this.pageLoading = true;
  734. let self = this;
  735. this.$refs.cropper.getCroppedCanvas({
  736. maxWidth: 4096,
  737. maxHeight: 4096,
  738. fillColor: '#fff',
  739. imageSmoothingEnabled: false,
  740. imageSmoothingQuality: 'high',
  741. }).toBlob(function(blob) {
  742. let data = new FormData();
  743. data.append('file', blob);
  744. let url = '/api/local/compose/media/update/' + self.ids[self.carouselCursor];
  745. axios.post(url, data).then(res => {
  746. self.media[self.carouselCursor].url = res.data.url;
  747. self.pageLoading = false;
  748. self.page = 2;
  749. }).catch(err => {
  750. });
  751. });
  752. break;
  753. case 2:
  754. case 3:
  755. this.page++;
  756. break;
  757. }
  758. },
  759. rotate() {
  760. this.$refs.cropper.rotate(90);
  761. },
  762. changeAspect(ratio) {
  763. this.cropper.aspectRatio = ratio;
  764. this.$refs.cropper.setAspectRatio(ratio);
  765. },
  766. showTagCard() {
  767. this.pageTitle = 'Tag People';
  768. this.page = 'tagPeople';
  769. },
  770. showLocationCard() {
  771. this.pageTitle = 'Add Location';
  772. this.page = 'addLocation';
  773. },
  774. showAdvancedSettingsCard() {
  775. this.pageTitle = 'Advanced Settings';
  776. this.page = 'advancedSettings';
  777. },
  778. locationSearch(input) {
  779. if (input.length < 1) { return []; };
  780. let results = [];
  781. return axios.get('/api/local/compose/location/search', {
  782. params: {
  783. q: input
  784. }
  785. }).then(res => {
  786. return res.data;
  787. });
  788. },
  789. getResultValue(result) {
  790. return result.name + ', ' + result.country
  791. },
  792. onSubmitLocation(result) {
  793. this.place = result;
  794. this.pageTitle = '';
  795. this.page = 3;
  796. return;
  797. },
  798. showVisibilityCard() {
  799. this.pageTitle = 'Post Visibility';
  800. this.page = 'visibility';
  801. },
  802. showAddToStoryCard() {
  803. this.pageTitle = 'Add to Story';
  804. this.page = 'addToStory';
  805. },
  806. showCropPhotoCard() {
  807. this.pageTitle = 'Edit Photo';
  808. this.page = 'cropPhoto';
  809. },
  810. toggleVisibility(state) {
  811. let tags = {
  812. public: 'Public',
  813. private: 'Followers Only',
  814. unlisted: 'Unlisted'
  815. }
  816. this.visibility = state;
  817. this.visibilityTag = tags[state];
  818. this.pageTitle = '';
  819. this.page = 3;
  820. },
  821. showMediaDescriptionsCard() {
  822. this.pageTitle = 'Media Descriptions';
  823. this.page = 'altText';
  824. },
  825. showAddToCollectionsCard() {
  826. this.pageTitle = 'Add to Collection';
  827. this.page = 'addToCollection';
  828. },
  829. showSchedulePostCard() {
  830. this.pageTitle = 'Schedule Post';
  831. this.page = 'schedulePost';
  832. },
  833. showEditMediaCard() {
  834. this.pageTitle = 'Edit Media';
  835. this.page = 'editMedia';
  836. },
  837. fetchCameraRollDrafts() {
  838. axios.get('/api/pixelfed/local/drafts')
  839. .then(res => {
  840. this.cameraRollMedia = res.data;
  841. });
  842. },
  843. }
  844. }
  845. </script>