QueueSongs.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. <template>
  2. <div class='columns is-mobile'>
  3. <div class='column is-8-desktop is-offset-2-desktop is-12-mobile'>
  4. <table class='table is-striped'>
  5. <thead>
  6. <tr>
  7. <td>Thumbnail</td>
  8. <td>Title</td>
  9. <td>YouTube ID</td>
  10. <td>Artists</td>
  11. <td>Genres</td>
  12. <td>Requested By</td>
  13. <td>Options</td>
  14. </tr>
  15. </thead>
  16. <tbody>
  17. <tr v-for='(index, song) in songs' track-by='$index'>
  18. <td>
  19. <img class='song-thumbnail' :src='song.thumbnail' onerror="this.src='/assets/notes-transparent.png'">
  20. </td>
  21. <td>
  22. <strong>{{ song.title }}</strong>
  23. </td>
  24. <td>{{ song._id }}</td>
  25. <td>{{ song.artists.join(', ') }}</td>
  26. <td>{{ song.genres.join(', ') }}</td>
  27. <td>{{ song.requestedBy }}</td>
  28. <td>
  29. <a class='button is-primary' href='#' @click='edit(song, index)'>Edit</a>
  30. <a class='button is-success' href='#' @click='add(song)'>Add</a>
  31. <a class='button is-danger' href='#' @click='remove(song._id, index)'>Remove</a>
  32. </td>
  33. </tr>
  34. </tbody>
  35. </table>
  36. </div>
  37. </div>
  38. <edit-song v-show='isEditActive'></edit-song>
  39. </template>
  40. <script>
  41. import { Toast } from 'vue-roaster';
  42. import EditSong from '../Modals/EditSong.vue';
  43. import io from '../../io';
  44. export default {
  45. components: { EditSong },
  46. data() {
  47. return {
  48. songs: [],
  49. isEditActive: false,
  50. editing: {
  51. index: 0,
  52. song: {}
  53. },
  54. video: {
  55. player: null,
  56. paused: false,
  57. settings: function (type) {
  58. switch(type) {
  59. case 'stop':
  60. this.player.stopVideo();
  61. this.paused = true;
  62. break;
  63. case 'pause':
  64. this.player.pauseVideo();
  65. this.paused = true;
  66. break;
  67. case 'play':
  68. this.player.playVideo();
  69. this.paused = false;
  70. break;
  71. case 'skipToLast10Secs':
  72. this.player.seekTo(this.player.getDuration() - 10);
  73. break;
  74. }
  75. }
  76. }
  77. }
  78. },
  79. methods: {
  80. changeVolume: function() {
  81. let local = this;
  82. let volume = $("#volumeSlider").val();
  83. localStorage.setItem("volume", volume);
  84. local.video.player.setVolume(volume);
  85. if (volume > 0) local.video.player.unMute();
  86. },
  87. toggleModal: function () {
  88. this.isEditActive = !this.isEditActive;
  89. this.video.settings('stop');
  90. },
  91. addTag: function (type) {
  92. if (type == 'genres') {
  93. let genre = $('#new-genre').val().toLowerCase().trim();
  94. if (this.editing.song.genres.indexOf(genre) !== -1) return Toast.methods.addToast('Genre already exists', 3000);
  95. if (genre) {
  96. this.editing.song.genres.push(genre);
  97. $('#new-genre').val('');
  98. } else Toast.methods.addToast('Genre cannot be empty', 3000);
  99. } else if (type == 'artists') {
  100. let artist = $('#new-artist').val();
  101. if (this.editing.song.artists.indexOf(artist) !== -1) return Toast.methods.addToast('Artist already exists', 3000);
  102. if ($('#new-artist').val() !== '') {
  103. this.editing.song.artists.push(artist);
  104. $('#new-artist').val('');
  105. } else Toast.methods.addToast('Artist cannot be empty', 3000);
  106. }
  107. },
  108. removeTag: function (type, index) {
  109. if (type == 'genres') this.editing.song.genres.splice(index, 1);
  110. else if (type == 'artists') this.editing.song.artists.splice(index, 1);
  111. },
  112. edit: function (song, index) {
  113. this.editing = { index, song };
  114. this.video.player.loadVideoById(song._id);
  115. this.isEditActive = true;
  116. },
  117. save: function (song) {
  118. let _this = this;
  119. this.socket.emit('queueSongs.update', song._id, song, function (res) {
  120. if (res.status == 'success' || res.status == 'error') Toast.methods.addToast(res.message, 2000);
  121. _this.toggleModal();
  122. });
  123. },
  124. add: function (song) {
  125. this.socket.emit('songs.add', song, res => {
  126. if (res.status == 'success') Toast.methods.addToast(res.message, 2000);
  127. });
  128. },
  129. remove: function (id, index) {
  130. this.socket.emit('queueSongs.remove', id, res => {
  131. if (res.status == 'success') Toast.methods.addToast(res.message, 2000);
  132. });
  133. },
  134. init: function() {
  135. let _this = this;
  136. _this.socket.emit('queueSongs.index', data => {
  137. _this.songs = data;
  138. });
  139. _this.socket.emit('apis.joinAdminRoom', 'queue', data => {});
  140. }
  141. },
  142. ready: function () {
  143. let _this = this;
  144. io.getSocket((socket) => {
  145. _this.socket = socket;
  146. if (_this.socket.connected) {
  147. _this.init();
  148. _this.socket.on('event:admin.queueSong.added', queueSong => {
  149. _this.songs.push(queueSong);
  150. });
  151. _this.socket.on('event:admin.queueSong.removed', songId => {
  152. _this.songs = _this.songs.filter(function(song) {
  153. return song._id !== songId;
  154. });
  155. });
  156. }
  157. io.onConnect(() => {
  158. _this.init();
  159. });
  160. });
  161. this.video.player = new YT.Player('player', {
  162. height: 315,
  163. width: 560,
  164. videoId: this.editing.song._id,
  165. playerVars: { controls: 0, iv_load_policy: 3, rel: 0, showinfo: 0 },
  166. events: {
  167. 'onReady': () => {
  168. let volume = parseInt(localStorage.getItem("volume"));
  169. volume = (typeof volume === "number") ? volume : 20;
  170. _this.video.player.setVolume(volume);
  171. if (volume > 0) _this.video.player.unMute();
  172. },
  173. 'onStateChange': event => {
  174. if (event.data == 1) {
  175. let youtubeDuration = _this.video.player.getDuration();
  176. youtubeDuration -= _this.editing.song.skipDuration;
  177. if (_this.editing.song.duration > youtubeDuration) this.stopVideo();
  178. }
  179. }
  180. }
  181. });
  182. let volume = parseInt(localStorage.getItem("volume"));
  183. volume = (typeof volume === "number") ? volume : 20;
  184. $("#volumeSlider").val(volume);
  185. }
  186. }
  187. </script>
  188. <style lang='scss' scoped>
  189. .song-thumbnail {
  190. display: block;
  191. max-width: 50px;
  192. margin: 0 auto;
  193. }
  194. td { vertical-align: middle; }
  195. .is-primary:focus { background-color: #029ce3 !important; }
  196. </style>