AddSongToQueue.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <template>
  2. <modal title='Add Song To Queue'>
  3. <div slot='body'>
  4. <aside class='menu' v-if='$parent.$parent.loggedIn && $parent.type === "community"'>
  5. <ul class='menu-list'>
  6. <li v-for='playlist in playlists' track-by='$index'>
  7. <a href='#' target='_blank' @click='$parent.editPlaylist(playlist._id)'>{{ playlist.displayName }}</a>
  8. <div class='controls'>
  9. <a href='#' @click='selectPlaylist(playlist._id)' v-if="!isPlaylistSelected(playlist._id)"><i class='material-icons'>panorama_fish_eye</i></a>
  10. <a href='#' @click='unSelectPlaylist()' v-if="isPlaylistSelected(playlist._id)"><i class='material-icons'>lens</i></a>
  11. </div>
  12. </li>
  13. </ul>
  14. <br />
  15. </aside>
  16. <div class="control is-grouped">
  17. <p class="control is-expanded">
  18. <input class="input" type="text" placeholder="YouTube Query" v-model='querySearch' autofocus @keyup.enter='submitQuery()'>
  19. </p>
  20. <p class="control">
  21. <a class="button is-info" @click="submitQuery()" href='#'>
  22. Search
  23. </a>
  24. </p>
  25. </div>
  26. <table class="table">
  27. <tbody>
  28. <tr v-for="result in queryResults">
  29. <td>
  30. <img :src="result.thumbnail" />
  31. </td>
  32. <td>{{ result.title }}</td>
  33. <td>
  34. <a class="button is-success" @click="addSongToQueue(result.id)" href='#'>
  35. Add
  36. </a>
  37. </td>
  38. </tr>
  39. </tbody>
  40. </table>
  41. </div>
  42. </modal>
  43. </template>
  44. <script>
  45. import { Toast } from 'vue-roaster';
  46. import Modal from './Modal.vue';
  47. import io from '../../io';
  48. import auth from '../../auth';
  49. export default {
  50. data() {
  51. return {
  52. querySearch: '',
  53. queryResults: [],
  54. playlists: [],
  55. privatePlaylistQueueSelected: null
  56. }
  57. },
  58. methods: {
  59. isPlaylistSelected: function(playlistId) {
  60. return this.privatePlaylistQueueSelected === playlistId;
  61. },
  62. selectPlaylist: function (playlistId) {
  63. let _this = this;
  64. if (_this.$parent.type === 'community') {
  65. _this.privatePlaylistQueueSelected = playlistId;
  66. _this.$parent.privatePlaylistQueueSelected = playlistId;
  67. _this.$parent.addFirstPrivatePlaylistSongToQueue();
  68. }
  69. },
  70. unSelectPlaylist: function () {
  71. let _this = this;
  72. if (_this.$parent.type === 'community') {
  73. _this.privatePlaylistQueueSelected = null;
  74. _this.$parent.privatePlaylistQueueSelected = null;
  75. }
  76. },
  77. addSongToQueue: function (songId) {
  78. let _this = this;
  79. if (_this.$parent.type === 'community') {
  80. _this.socket.emit('stations.addToQueue', _this.$parent.station._id, songId, data => {
  81. if (data.status !== 'success') Toast.methods.addToast(`Error: ${data.message}`, 8000);
  82. else Toast.methods.addToast(`${data.message}`, 4000);
  83. });
  84. } else {
  85. _this.socket.emit('queueSongs.add', songId, data => {
  86. if (data.status !== 'success') Toast.methods.addToast(`Error: ${data.message}`, 8000);
  87. else Toast.methods.addToast(`${data.message}`, 4000);
  88. });
  89. }
  90. },
  91. submitQuery: function () {
  92. let _this = this;
  93. let query = _this.querySearch;
  94. if (query.indexOf('&index=') !== -1) {
  95. query = query.split('&index=');
  96. query.pop();
  97. query = query.join('');
  98. }
  99. if (query.indexOf('&list=') !== -1) {
  100. query = query.split('&list=');
  101. query.pop();
  102. query = query.join('');
  103. }
  104. _this.socket.emit('apis.searchYoutube', query, results => {
  105. results = results.data;
  106. _this.queryResults = [];
  107. for (let i = 0; i < results.items.length; i++) {
  108. _this.queryResults.push({
  109. id: results.items[i].id.videoId,
  110. url: `https://www.youtube.com/watch?v=${this.id}`,
  111. title: results.items[i].snippet.title,
  112. thumbnail: results.items[i].snippet.thumbnails.default.url
  113. });
  114. }
  115. });
  116. }
  117. },
  118. ready: function () {
  119. let _this = this;
  120. io.getSocket((socket) => {
  121. _this.socket = socket;
  122. _this.socket.emit('playlists.indexForUser', res => {
  123. if (res.status === 'success') _this.playlists = res.data;
  124. });
  125. _this.privatePlaylistQueueSelected = _this.$parent.privatePlaylistQueueSelected;
  126. });
  127. },
  128. events: {
  129. closeModal: function () {
  130. this.$parent.modals.addSongToQueue = !this.$parent.modals.addSongToQueue;
  131. }
  132. },
  133. components: { Modal }
  134. }
  135. </script>
  136. <style type='scss' scoped>
  137. tr td {
  138. vertical-align: middle;
  139. img { width: 55px; }
  140. }
  141. </style>