Search.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. <template>
  2. <div class="search">
  3. <div class="musare-search">
  4. <label class="label"> Search for a song on Musare </label>
  5. <div class="control is-grouped input-with-button">
  6. <p class="control is-expanded">
  7. <input
  8. class="input"
  9. type="text"
  10. placeholder="Enter your song query here..."
  11. v-model="musareSongsQuery"
  12. @keyup.enter="searchForMusareSongs()"
  13. />
  14. </p>
  15. <p class="control">
  16. <a class="button is-info" href="#"
  17. ><i class="material-icons icon-with-button">search</i
  18. >Search</a
  19. >
  20. </p>
  21. </div>
  22. </div>
  23. <div class="youtube-search">
  24. <label class="label"> Search for a song on YouTube </label>
  25. <div class="control is-grouped input-with-button">
  26. <p class="control is-expanded">
  27. <input
  28. class="input"
  29. type="text"
  30. placeholder="Enter your YouTube query here..."
  31. v-model="search.songs.query"
  32. autofocus
  33. @keyup.enter="searchForSongs()"
  34. />
  35. </p>
  36. <p class="control">
  37. <a
  38. class="button is-info"
  39. @click.prevent="searchForSongs()"
  40. href="#"
  41. ><i class="material-icons icon-with-button">search</i
  42. >Search</a
  43. >
  44. </p>
  45. </div>
  46. <div v-if="search.songs.results.length > 0" id="song-query-results">
  47. <search-query-item
  48. v-for="(result, index) in search.songs.results"
  49. :key="index"
  50. :result="result"
  51. >
  52. <div slot="actions">
  53. <transition name="search-query-actions" mode="out-in">
  54. <a
  55. class="button is-success"
  56. v-if="result.isAddedToQueue"
  57. href="#"
  58. key="added-to-queue"
  59. >
  60. <i class="material-icons icon-with-button"
  61. >done</i
  62. >
  63. Added to queue
  64. </a>
  65. <a
  66. class="button is-dark"
  67. v-else
  68. @click.prevent="
  69. addSongToQueue(result.id, index)
  70. "
  71. href="#"
  72. key="add-to-queue"
  73. >
  74. <i class="material-icons icon-with-button"
  75. >add</i
  76. >
  77. Add to queue
  78. </a>
  79. </transition>
  80. </div>
  81. </search-query-item>
  82. <a
  83. class="button is-default load-more-button"
  84. @click.prevent="loadMoreSongs()"
  85. href="#"
  86. >
  87. Load more...
  88. </a>
  89. </div>
  90. </div>
  91. </div>
  92. </template>
  93. <script>
  94. import { mapState, mapGetters } from "vuex";
  95. import Toast from "toasters";
  96. import SearchYoutube from "@/mixins/SearchYoutube.vue";
  97. import SearchQueryItem from "../../../SearchQueryItem.vue";
  98. export default {
  99. components: {
  100. SearchQueryItem
  101. },
  102. mixins: [SearchYoutube],
  103. data() {
  104. return {
  105. musareSongsQuery: ""
  106. };
  107. },
  108. computed: {
  109. ...mapState("modals/manageStation", {
  110. station: state => state.station,
  111. originalStation: state => state.originalStation
  112. }),
  113. ...mapGetters({
  114. socket: "websockets/getSocket"
  115. })
  116. },
  117. methods: {
  118. addSongToQueue(youtubeId, index) {
  119. if (this.station.type === "community") {
  120. this.socket.dispatch(
  121. "stations.addToQueue",
  122. this.station._id,
  123. youtubeId,
  124. res => {
  125. if (res.status !== "success")
  126. new Toast(`Error: ${res.message}`);
  127. else {
  128. this.search.songs.results[
  129. index
  130. ].isAddedToQueue = true;
  131. new Toast(res.message);
  132. }
  133. }
  134. );
  135. } else {
  136. this.socket.dispatch("songs.request", youtubeId, res => {
  137. if (res.status !== "success")
  138. new Toast(`Error: ${res.message}`);
  139. else {
  140. this.search.songs.results[index].isAddedToQueue = true;
  141. new Toast(res.message);
  142. }
  143. });
  144. }
  145. },
  146. searchForMusareSongs() {
  147. const query = this.musareSongsQuery;
  148. this.socket.dispatch("songs.searchOfficial", query, res => {
  149. console.log(111, res);
  150. if (res.status === "success") {
  151. // this.search.results = res.data.playlists;
  152. } else if (res.status === "error") {
  153. // this.search.results = [];
  154. new Toast(res.message);
  155. }
  156. });
  157. }
  158. }
  159. };
  160. </script>