Edit.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  1. <template>
  2. <modal title='Edit Playlist'>
  3. <div slot='body'>
  4. <nav class="level">
  5. <div class="level-item has-text-centered">
  6. <div>
  7. <p class="heading">Total Length</p>
  8. <p class="title">{{ totalLength() }}</p>
  9. </div>
  10. </div>
  11. </nav>
  12. <hr />
  13. <aside class='menu' v-if='playlist.songs && playlist.songs.length > 0'>
  14. <ul class='menu-list'>
  15. <li v-for='song in playlist.songs' track-by='$index'>
  16. <a :href='' target='_blank'>{{ song.title }}</a>
  17. <div class='controls'>
  18. <a href='#' @click='promoteSong(song.songId)'>
  19. <i class='material-icons' v-if='$index > 0'>keyboard_arrow_up</i>
  20. <i class='material-icons' style='opacity: 0' v-else>error</i>
  21. </a>
  22. <a href='#' @click='demoteSong(song.songId)'>
  23. <i class='material-icons' v-if='playlist.songs.length - 1 !== $index'>keyboard_arrow_down</i>
  24. <i class='material-icons' style='opacity: 0' v-else>error</i>
  25. </a>
  26. <a href='#' @click='removeSongFromPlaylist(song.songId)'><i class='material-icons'>delete</i></a>
  27. </div>
  28. </li>
  29. </ul>
  30. <br />
  31. </aside>
  32. <div class='control is-grouped'>
  33. <p class='control is-expanded'>
  34. <input class='input' type='text' placeholder='Search for Song to add' v-model='songQuery' autofocus @keyup.enter='searchForSongs()'>
  35. </p>
  36. <p class='control'>
  37. <a class='button is-info' @click='searchForSongs()' href="#">Search</a>
  38. </p>
  39. </div>
  40. <table class='table' v-if='songQueryResults.length > 0'>
  41. <tbody>
  42. <tr v-for='result in songQueryResults'>
  43. <td>
  44. <img :src='result.thumbnail' />
  45. </td>
  46. <td>{{ result.title }}</td>
  47. <td>
  48. <a class='button is-success' @click='addSongToPlaylist(result.id)' href='#'>
  49. Add
  50. </a>
  51. </td>
  52. </tr>
  53. </tbody>
  54. </table>
  55. <div class='control is-grouped'>
  56. <p class='control is-expanded'>
  57. <input class='input' type='text' placeholder='YouTube Playlist URL' v-model='importQuery' @keyup.enter="importPlaylist()">
  58. </p>
  59. <p class='control'>
  60. <a class='button is-info' @click='importPlaylist()' href="#">Import</a>
  61. </p>
  62. </div>
  63. <h5>Edit playlist details:</h5>
  64. <div class='control is-grouped'>
  65. <p class='control is-expanded'>
  66. <input class='input' type='text' placeholder='Playlist Display Name' v-model='playlist.displayName' @keyup.enter="renamePlaylist()">
  67. </p>
  68. <p class='control'>
  69. <a class='button is-info' @click='renamePlaylist()' href="#">Rename</a>
  70. </p>
  71. </div>
  72. </div>
  73. <div slot='footer'>
  74. <a class='button is-danger' @click='removePlaylist()' href="#">Remove Playlist</a>
  75. </div>
  76. </modal>
  77. </template>
  78. <script>
  79. import { Toast } from 'vue-roaster';
  80. import Modal from '../Modal.vue';
  81. import io from '../../../io';
  82. import validation from '../../../validation';
  83. export default {
  84. components: { Modal },
  85. data() {
  86. return {
  87. playlist: {songs: []},
  88. songQueryResults: [],
  89. songQuery: '',
  90. importQuery: ''
  91. }
  92. },
  93. methods: {
  94. formatTime: function (length) {
  95. length = 1000000;
  96. let duration = moment.duration(length, 'seconds');
  97. function getHours() {return Math.floor(duration.asHours());}
  98. if (length <= 0) return '0 seconds';
  99. else return ((getHours() > 0 ? (getHours() > 1 ? (getHours() < 10 ? ('0' + getHours() + ' hours ') : (getHours() + ' hours ')) : ('0' + getHours() + ' hour ')) : '') + (duration.minutes() > 0 ? (duration.minutes() > 1 ? (duration.minutes() < 10 ? ('0' + duration.minutes() + ' minutes ') : (duration.minutes() + ' minutes ')) : ('0' + duration.minutes() + ' minute ')) : '') + (duration.seconds() > 0 ? (duration.seconds() > 1 ? (duration.seconds() < 10 ? ('0' + duration.seconds() + ' seconds ') : (duration.seconds() + ' seconds ')) : ('0' + duration.seconds() + ' second ')) : ''));
  100. },
  101. totalLength: function() {
  102. let length = 0;
  103. this.playlist.songs.forEach((song) => {
  104. length += song.duration;
  105. });
  106. return this.formatTime(length);
  107. },
  108. searchForSongs: function () {
  109. let _this = this;
  110. let query = _this.songQuery;
  111. if (query.indexOf('&index=') !== -1) {
  112. query = query.split('&index=');
  113. query.pop();
  114. query = query.join('');
  115. }
  116. if (query.indexOf('&list=') !== -1) {
  117. query = query.split('&list=');
  118. query.pop();
  119. query = query.join('');
  120. }
  121. _this.socket.emit('apis.searchYoutube', query, res => {
  122. if (res.status == 'success') {
  123. _this.songQueryResults = [];
  124. for (let i = 0; i < res.data.items.length; i++) {
  125. _this.songQueryResults.push({
  126. id: res.data.items[i].id.videoId,
  127. url: `https://www.youtube.com/watch?v=${this.id}`,
  128. title: res.data.items[i].snippet.title,
  129. thumbnail: res.data.items[i].snippet.thumbnails.default.url
  130. });
  131. }
  132. } else if (res.status === 'error') Toast.methods.addToast(res.message, 3000);
  133. });
  134. },
  135. addSongToPlaylist: function (id) {
  136. let _this = this;
  137. _this.socket.emit('playlists.addSongToPlaylist', id, _this.playlist._id, res => {
  138. Toast.methods.addToast(res.message, 4000);
  139. });
  140. },
  141. importPlaylist: function () {
  142. let _this = this;
  143. Toast.methods.addToast('Starting to import your playlist. This can take some time to do.', 4000);
  144. this.socket.emit('playlists.addSetToPlaylist', _this.importQuery, _this.playlist._id, res => {
  145. if (res.status === 'success') _this.playlist.songs = res.data;
  146. Toast.methods.addToast(res.message, 4000);
  147. });
  148. },
  149. removeSongFromPlaylist: function (id) {
  150. let _this = this;
  151. this.socket.emit('playlists.removeSongFromPlaylist', id, _this.playlist._id, res => {
  152. Toast.methods.addToast(res.message, 4000);
  153. });
  154. },
  155. renamePlaylist: function () {
  156. const displayName = this.playlist.displayName;
  157. if (!validation.isLength(displayName, 2, 32)) return Toast.methods.addToast('Display name must have between 2 and 32 characters.', 8000);
  158. if (!validation.regex.azAZ09_.test(displayName)) return Toast.methods.addToast('Invalid display name format. Allowed characters: a-z, A-Z, 0-9 and _.', 8000);
  159. this.socket.emit('playlists.updateDisplayName', this.playlist._id, this.playlist.displayName, res => {
  160. Toast.methods.addToast(res.message, 4000);
  161. });
  162. },
  163. removePlaylist: function () {
  164. let _this = this;
  165. _this.socket.emit('playlists.remove', _this.playlist._id, res => {
  166. Toast.methods.addToast(res.message, 3000);
  167. if (res.status === 'success') {
  168. _this.$parent.modals.editPlaylist = !_this.$parent.modals.editPlaylist;
  169. }
  170. });
  171. },
  172. promoteSong: function (songId) {
  173. let _this = this;
  174. _this.socket.emit('playlists.moveSongToTop', _this.playlist._id, songId, res => {
  175. Toast.methods.addToast(res.message, 4000);
  176. });
  177. },
  178. demoteSong: function (songId) {
  179. let _this = this;
  180. _this.socket.emit('playlists.moveSongToBottom', _this.playlist._id, songId, res => {
  181. Toast.methods.addToast(res.message, 4000);
  182. });
  183. }
  184. },
  185. ready: function () {
  186. let _this = this;
  187. io.getSocket((socket) => {
  188. _this.socket = socket;
  189. _this.socket.emit('playlists.getPlaylist', _this.$parent.playlistBeingEdited, res => {
  190. if (res.status === 'success') _this.playlist = res.data; _this.playlist.oldId = res.data._id;
  191. });
  192. _this.socket.on('event:playlist.addSong', data => {
  193. if (_this.playlist._id === data.playlistId) _this.playlist.songs.push(data.song);
  194. });
  195. _this.socket.on('event:playlist.removeSong', data => {
  196. if (_this.playlist._id === data.playlistId) {
  197. _this.playlist.songs.forEach((song, index) => {
  198. if (song.songId === data.songId) _this.playlist.songs.splice(index, 1);
  199. });
  200. }
  201. });
  202. _this.socket.on('event:playlist.updateDisplayName', data => {
  203. if (_this.playlist._id === data.playlistId) _this.playlist.displayName = data.displayName;
  204. });
  205. _this.socket.on('event:playlist.moveSongToBottom', data => {
  206. if (_this.playlist._id === data.playlistId) {
  207. let songIndex;
  208. _this.playlist.songs.forEach((song, index) => {
  209. if (song.songId === data.songId) songIndex = index;
  210. });
  211. let song = _this.playlist.songs.splice(songIndex, 1)[0];
  212. _this.playlist.songs.push(song);
  213. }
  214. });
  215. _this.socket.on('event:playlist.moveSongToTop', (data) => {
  216. if (_this.playlist._id === data.playlistId) {
  217. let songIndex;
  218. _this.playlist.songs.forEach((song, index) => {
  219. if (song.songId === data.songId) songIndex = index;
  220. });
  221. let song = _this.playlist.songs.splice(songIndex, 1)[0];
  222. _this.playlist.songs.unshift(song);
  223. }
  224. });
  225. });
  226. },
  227. events: {
  228. closeModal: function() {
  229. this.$parent.modals.editPlaylist = !this.$parent.modals.editPlaylist;
  230. }
  231. }
  232. }
  233. </script>
  234. <style type='scss' scoped>
  235. .menu { padding: 0 20px; }
  236. .menu-list li {
  237. display: flex;
  238. justify-content: space-between;
  239. }
  240. .menu-list a:hover { color: #000 !important; }
  241. li a {
  242. display: flex;
  243. align-items: center;
  244. }
  245. .controls {
  246. display: flex;
  247. a {
  248. display: flex;
  249. align-items: center;
  250. }
  251. }
  252. .table {
  253. margin-bottom: 0;
  254. }
  255. h5 { padding: 20px 0; }
  256. </style>