ComposeModal.vue 33 KB

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