Youtube.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <template>
  2. <div class="youtube-tab">
  3. <label class="label"> Search for a song from YouTube </label>
  4. <div class="control is-grouped input-with-button">
  5. <p class="control is-expanded">
  6. <input
  7. class="input"
  8. type="text"
  9. placeholder="Enter your YouTube query here..."
  10. v-model="youtubeSearch.songs.query"
  11. autofocus
  12. @keyup.enter="searchForSongs()"
  13. />
  14. </p>
  15. <p class="control">
  16. <button
  17. class="button is-info"
  18. @click.prevent="searchForSongs()"
  19. >
  20. <i class="material-icons icon-with-button">search</i>Search
  21. </button>
  22. </p>
  23. </div>
  24. <div
  25. v-if="youtubeSearch.songs.results.length > 0"
  26. id="song-query-results"
  27. >
  28. <search-query-item
  29. v-for="result in youtubeSearch.songs.results"
  30. :key="result.id"
  31. :result="result"
  32. >
  33. <template #actions>
  34. <i
  35. class="material-icons icon-selected"
  36. v-if="result.id === song.youtubeId"
  37. key="selected"
  38. >radio_button_checked
  39. </i>
  40. <i
  41. class="material-icons icon-not-selected"
  42. v-else
  43. @click.prevent="selectSong(result)"
  44. key="not-selected"
  45. >radio_button_unchecked
  46. </i>
  47. </template>
  48. </search-query-item>
  49. <button
  50. class="button is-primary load-more-button"
  51. @click.prevent="loadMoreSongs()"
  52. >
  53. Load more...
  54. </button>
  55. </div>
  56. </div>
  57. </template>
  58. <script>
  59. import { mapGetters, mapState, mapActions } from "vuex";
  60. import SearchYoutube from "@/mixins/SearchYoutube.vue";
  61. import SearchQueryItem from "../../../SearchQueryItem.vue";
  62. export default {
  63. components: { SearchQueryItem },
  64. mixins: [SearchYoutube],
  65. data() {
  66. return {};
  67. },
  68. computed: {
  69. ...mapState("modals/editSong", {
  70. song: state => state.song,
  71. newSong: state => state.newSong
  72. }),
  73. ...mapGetters({
  74. socket: "websockets/getSocket"
  75. })
  76. },
  77. methods: {
  78. selectSong(result) {
  79. this.updateYoutubeId(result.id);
  80. if (this.newSong) {
  81. this.updateTitle(result.title);
  82. this.updateThumbnail(result.thumbnail);
  83. }
  84. },
  85. ...mapActions("modals/editSong", [
  86. "updateYoutubeId",
  87. "updateTitle",
  88. "updateThumbnail"
  89. ])
  90. }
  91. };
  92. </script>
  93. <style lang="less" scoped>
  94. .youtube-tab #song-query-results {
  95. height: calc(100% - 74px);
  96. overflow: auto;
  97. .search-query-item {
  98. .icon-selected {
  99. color: var(--green) !important;
  100. }
  101. .icon-not-selected {
  102. color: var(--grey) !important;
  103. }
  104. }
  105. .search-query-item:not(:last-of-type) {
  106. margin-bottom: 10px;
  107. }
  108. .load-more-button {
  109. width: 100%;
  110. margin-top: 10px;
  111. }
  112. }
  113. </style>