Youtube.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  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. <a
  17. class="button is-info"
  18. @click.prevent="searchForSongs()"
  19. href="#"
  20. ><i class="material-icons icon-with-button">search</i
  21. >Search</a
  22. >
  23. </p>
  24. </div>
  25. <div
  26. v-if="youtubeSearch.songs.results.length > 0"
  27. id="song-query-results"
  28. >
  29. <search-query-item
  30. v-for="result in youtubeSearch.songs.results"
  31. :key="result.id"
  32. :result="result"
  33. >
  34. <template #actions>
  35. <i
  36. class="material-icons icon-selected"
  37. v-if="result.id === song.youtubeId"
  38. key="selected"
  39. >radio_button_checked
  40. </i>
  41. <i
  42. class="material-icons icon-not-selected"
  43. v-else
  44. @click.prevent="updateYoutubeId(result.id)"
  45. key="not-selected"
  46. >radio_button_unchecked
  47. </i>
  48. </template>
  49. </search-query-item>
  50. <a
  51. class="button is-primary load-more-button"
  52. @click.prevent="loadMoreSongs()"
  53. href="#"
  54. >
  55. Load more...
  56. </a>
  57. </div>
  58. </div>
  59. </template>
  60. <script>
  61. import { mapGetters, mapState, mapActions } from "vuex";
  62. import SearchYoutube from "@/mixins/SearchYoutube.vue";
  63. import SearchQueryItem from "../../../SearchQueryItem.vue";
  64. export default {
  65. components: { SearchQueryItem },
  66. mixins: [SearchYoutube],
  67. data() {
  68. return {};
  69. },
  70. computed: {
  71. ...mapState("modals/editSong", {
  72. song: state => state.song
  73. }),
  74. ...mapGetters({
  75. socket: "websockets/getSocket"
  76. })
  77. },
  78. methods: {
  79. ...mapActions("modals/editSong", ["updateYoutubeId"])
  80. }
  81. };
  82. </script>
  83. <style lang="scss" scoped>
  84. .youtube-tab {
  85. height: calc(100% - 32px);
  86. #song-query-results {
  87. height: calc(100% - 74px);
  88. overflow: auto;
  89. .search-query-item {
  90. .icon-selected {
  91. color: var(--green) !important;
  92. }
  93. .icon-not-selected {
  94. color: var(--grey) !important;
  95. }
  96. }
  97. .search-query-item:not(:last-of-type) {
  98. margin-bottom: 10px;
  99. }
  100. .load-more-button {
  101. width: 100%;
  102. margin-top: 10px;
  103. }
  104. }
  105. }
  106. </style>