ImportPlaylists.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <template>
  2. <div class="youtube-tab section">
  3. <label class="label"> Search for a playlist 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 YouTube Playlist URL here..."
  10. v-model="youtubeSearch.playlist.query"
  11. @keyup.enter="importPlaylist()"
  12. />
  13. </p>
  14. <p class="control has-addons">
  15. <span class="select" id="playlist-import-type">
  16. <select
  17. v-model="youtubeSearch.playlist.isImportingOnlyMusic"
  18. >
  19. <option :value="false">Import all</option>
  20. <option :value="true">Import only music</option>
  21. </select>
  22. </span>
  23. <button
  24. class="button is-info"
  25. @click.prevent="importPlaylist()"
  26. >
  27. <i class="material-icons icon-with-button">publish</i>Import
  28. </button>
  29. </p>
  30. </div>
  31. </div>
  32. </template>
  33. <script>
  34. import { mapGetters } from "vuex";
  35. import Toast from "toasters";
  36. import { mapModalState } from "@/vuex_helpers";
  37. import SearchYoutube from "@/mixins/SearchYoutube.vue";
  38. export default {
  39. mixins: [SearchYoutube],
  40. props: {
  41. modalUuid: { type: String, default: "" }
  42. },
  43. data() {
  44. return {};
  45. },
  46. computed: {
  47. ...mapModalState("modals/editPlaylist/MODAL_UUID", {
  48. playlist: state => state.playlist
  49. }),
  50. ...mapGetters({
  51. socket: "websockets/getSocket"
  52. })
  53. },
  54. methods: {
  55. importPlaylist() {
  56. let id;
  57. let title;
  58. // import query is blank
  59. if (!this.youtubeSearch.playlist.query)
  60. return new Toast("Please enter a YouTube playlist URL.");
  61. const regex = /[\\?&]list=([^&#]*)/;
  62. const splitQuery = regex.exec(this.youtubeSearch.playlist.query);
  63. if (!splitQuery) {
  64. return new Toast({
  65. content: "Please enter a valid YouTube playlist URL.",
  66. timeout: 4000
  67. });
  68. }
  69. return this.socket.dispatch(
  70. "playlists.addSetToPlaylist",
  71. this.youtubeSearch.playlist.query,
  72. this.playlist._id,
  73. this.youtubeSearch.playlist.isImportingOnlyMusic,
  74. {
  75. cb: () => {},
  76. onProgress: res => {
  77. if (res.status === "started") {
  78. id = res.id;
  79. title = res.title;
  80. }
  81. if (id)
  82. this.setJob({
  83. id,
  84. name: title,
  85. ...res
  86. });
  87. }
  88. }
  89. );
  90. }
  91. }
  92. };
  93. </script>
  94. <style lang="less" scoped>
  95. #playlist-import-type select {
  96. border-radius: 0;
  97. }
  98. @media screen and (max-width: 1300px) {
  99. .youtube-tab #song-query-results,
  100. .section {
  101. max-width: 100% !important;
  102. }
  103. }
  104. </style>