QueueSongs.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <template>
  2. <div class='container'>
  3. <input type='text' class='input' v-model='searchQuery' placeholder='Search for Songs'>
  4. <br /><br />
  5. <table class='table is-striped'>
  6. <thead>
  7. <tr>
  8. <td>Thumbnail</td>
  9. <td>Title</td>
  10. <td>YouTube ID</td>
  11. <td>Artists</td>
  12. <td>Genres</td>
  13. <td>Requested By</td>
  14. <td>Options</td>
  15. </tr>
  16. </thead>
  17. <tbody>
  18. <tr v-for='(index, song) in filteredSongs' track-by='$index'>
  19. <td>
  20. <img class='song-thumbnail' :src='song.thumbnail' onerror="this.src='/assets/notes-transparent.png'">
  21. </td>
  22. <td>
  23. <strong>{{ song.title }}</strong>
  24. </td>
  25. <td>{{ song.songId }}</td>
  26. <td>{{ song.artists.join(', ') }}</td>
  27. <td>{{ song.genres.join(', ') }}</td>
  28. <td>{{ song.requestedBy }}</td>
  29. <td>
  30. <button class='button is-primary' @click='edit(song, index)'>Edit</button>
  31. <button class='button is-success' @click='add(song)'>Add</button>
  32. <button class='button is-danger' @click='remove(song._id, index)'>Remove</button>
  33. </td>
  34. </tr>
  35. </tbody>
  36. </table>
  37. </div>
  38. <nav class="pagination">
  39. <a class="button" href='#' @click='getSet(position - 1)' v-if='position > 1'><i class="material-icons">navigate_before</i></a>
  40. <a class="button" href='#' @click='getSet(position + 1)' v-if='maxPosition > position'><i class="material-icons">navigate_next</i></a>
  41. </nav>
  42. <edit-song v-show='modals.editSong'></edit-song>
  43. </template>
  44. <script>
  45. import { Toast } from 'vue-roaster';
  46. import EditSong from '../Modals/EditSong.vue';
  47. import io from '../../io';
  48. export default {
  49. components: { EditSong },
  50. data() {
  51. return {
  52. position: 1,
  53. maxPosition: 1,
  54. searchQuery: '',
  55. songs: [],
  56. modals: { editSong: false }
  57. }
  58. },
  59. computed: {
  60. filteredSongs: function () {
  61. return this.$eval('songs | filterBy searchQuery');
  62. }
  63. },
  64. watch: {
  65. 'modals.editSong': function (value) {
  66. if (!value) this.$broadcast('stopVideo');
  67. }
  68. },
  69. methods: {
  70. toggleModal: function () {
  71. this.modals.editSong = !this.modals.editSong;
  72. },
  73. getSet: function (position) {
  74. let _this = this;
  75. this.socket.emit('queueSongs.getSet', position, data => {
  76. _this.songs = data;
  77. this.position = position;
  78. });
  79. },
  80. edit: function (song, index) {
  81. this.$broadcast('editSong', song, index, 'queueSongs');
  82. },
  83. add: function (song) {
  84. this.socket.emit('songs.add', song, res => {
  85. if (res.status == 'success') Toast.methods.addToast(res.message, 2000);
  86. else Toast.methods.addToast(res.message, 4000);
  87. });
  88. },
  89. remove: function (id, index) {
  90. console.log("Removing ", id);
  91. this.socket.emit('queueSongs.remove', id, res => {
  92. if (res.status == 'success') Toast.methods.addToast(res.message, 2000);
  93. else Toast.methods.addToast(res.message, 4000);
  94. });
  95. },
  96. init: function() {
  97. let _this = this;
  98. _this.socket.emit('queueSongs.index', data => {
  99. _this.songs = data.songs;
  100. _this.maxPosition = Math.round(data.maxLength / 50);
  101. });
  102. _this.socket.emit('apis.joinAdminRoom', 'queue', data => {});
  103. }
  104. },
  105. ready: function () {
  106. let _this = this;
  107. io.getSocket((socket) => {
  108. _this.socket = socket;
  109. if (_this.socket.connected) {
  110. _this.init();
  111. _this.socket.on('event:admin.queueSong.added', queueSong => {
  112. _this.songs.push(queueSong);
  113. });
  114. _this.socket.on('event:admin.queueSong.removed', songId => {
  115. _this.songs = _this.songs.filter(function(song) {
  116. return song._id !== songId;
  117. });
  118. });
  119. _this.socket.on('event:admin.queueSong.updated', updatedSong => {
  120. for (let i = 0; i < _this.songs.length; i++) {
  121. let song = _this.songs[i];
  122. if (song._id === updatedSong._id) {
  123. _this.songs.$set(i, updatedSong);
  124. }
  125. }
  126. });
  127. }
  128. io.onConnect(() => {
  129. _this.init();
  130. });
  131. });
  132. }
  133. }
  134. </script>
  135. <style lang='scss' scoped>
  136. .song-thumbnail {
  137. display: block;
  138. max-width: 50px;
  139. margin: 0 auto;
  140. }
  141. td { vertical-align: middle; }
  142. .is-primary:focus { background-color: #029ce3 !important; }
  143. </style>