AddSongToQueue.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <template>
  2. <div class="modal is-active">
  3. <div class="modal-background"></div>
  4. <div class="modal-card">
  5. <header class="modal-card-head">
  6. <p class="modal-card-title">Add Songs to Station</p>
  7. <button class="delete" @click="$parent.toggleModal('addSongToQueue')" ></button>
  8. </header>
  9. <section class="modal-card-body">
  10. <div class="control is-grouped">
  11. <p class="control is-expanded">
  12. <input class="input" type="text" placeholder="YouTube Query" v-model="querySearch">
  13. </p>
  14. <p class="control">
  15. <a class="button is-info" @click="submitQuery()">
  16. Search
  17. </a>
  18. </p>
  19. </div>
  20. <table class="table">
  21. <tbody>
  22. <tr v-for="result in queryResults">
  23. <td>
  24. <img :src="result.thumbnail" />
  25. </td>
  26. <td>{{ result.title }}</td>
  27. <td>
  28. <a class="button is-success" @click="addSongToQueue(result.id)">
  29. Add
  30. </a>
  31. </td>
  32. </tr>
  33. </tbody>
  34. </table>
  35. </section>
  36. </div>
  37. </div>
  38. </template>
  39. <script>
  40. import { Toast } from 'vue-roaster';
  41. export default {
  42. data() {
  43. return {
  44. querySearch: '',
  45. queryResults: []
  46. }
  47. },
  48. methods: {
  49. addSongToQueue: function (songId) {
  50. let _this = this;
  51. if (_this.$parent.type === 'community') {
  52. _this.socket.emit('stations.addToQueue', _this.$parent.stationId, songId, data => {
  53. if (data.status !== 'success') {
  54. Toast.methods.addToast(`Error: ${data.message}`, 8000);
  55. } else {
  56. Toast.methods.addToast(`${data.message}`, 4000);
  57. }
  58. });
  59. } else {
  60. _this.socket.emit('queueSongs.add', songId, data => {
  61. if (data.status !== 'success') {
  62. Toast.methods.addToast(`Error: ${data.message}`, 8000);
  63. } else {
  64. Toast.methods.addToast(`${data.message}`, 4000);
  65. }
  66. });
  67. }
  68. },
  69. submitQuery: function () {
  70. let _this = this;
  71. _this.socket.emit('apis.searchYoutube', _this.querySearch, results => {
  72. results = results.data;
  73. _this.queryResults = [];
  74. for (let i = 0; i < results.items.length; i++) {
  75. _this.queryResults.push({
  76. id: results.items[i].id.videoId,
  77. url: `https://www.youtube.com/watch?v=${this.id}`,
  78. title: results.items[i].snippet.title,
  79. thumbnail: results.items[i].snippet.thumbnails.default.url
  80. });
  81. }
  82. });
  83. }
  84. },
  85. ready: function () {
  86. let _this = this;
  87. let socketInterval = setInterval(() => {
  88. if (!!_this.$parent.$parent.socket) {
  89. _this.socket = _this.$parent.$parent.socket;
  90. clearInterval(socketInterval);
  91. }
  92. }, 100);
  93. },
  94. events: {
  95. closeModal: function() {
  96. this.$parent.toggleModal('addSongToQueue')
  97. }
  98. }
  99. }
  100. </script>