Songs.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  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.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' @click='edit(song, index)'>Edit</a>
  30. <a class='button is-danger' @click='remove(song._id, index)'>Remove</a>
  31. </td>
  32. </tr>
  33. </tbody>
  34. </table>
  35. </div>
  36. </div>
  37. <edit-song v-show='isEditActive'></edit-song>
  38. </template>
  39. <script>
  40. import { Toast } from 'vue-roaster';
  41. import EditSong from '../Modals/EditSong.vue';
  42. export default {
  43. components: { EditSong },
  44. data() {
  45. return {
  46. songs: [],
  47. isEditActive: false,
  48. editing: {
  49. index: 0,
  50. song: {}
  51. },
  52. video: {
  53. player: null,
  54. paused: false,
  55. settings: function (type) {
  56. switch(type) {
  57. case 'stop':
  58. this.player.stopVideo();
  59. this.paused = true;
  60. break;
  61. case 'pause':
  62. this.player.pauseVideo();
  63. this.paused = true;
  64. break;
  65. case 'play':
  66. this.player.playVideo();
  67. this.paused = false;
  68. break;
  69. case 'skipToLast10Secs':
  70. this.player.seekTo(this.player.getDuration() - 10);
  71. break;
  72. }
  73. }
  74. }
  75. }
  76. },
  77. methods: {
  78. changeVolume: function() {
  79. let local = this;
  80. let volume = $("#volumeSlider").val();
  81. localStorage.setItem("volume", volume);
  82. local.video.player.setVolume(volume);
  83. if (volume > 0) local.video.player.unMute();
  84. },
  85. toggleModal: function () {
  86. this.isEditActive = !this.isEditActive;
  87. this.video.settings('stop');
  88. },
  89. addTag: function (type) {
  90. if (type == 'genres') {
  91. let genre = $('#new-genre').val().toLowerCase().trim();
  92. if (this.editing.song.genres.indexOf(genre) !== -1) return Toast.methods.addToast('Genre already exists', 3000);
  93. if (genre) {
  94. this.editing.song.genres.push(genre);
  95. $('#new-genre').val('');
  96. } else Toast.methods.addToast('Genre cannot be empty', 3000);
  97. } else if (type == 'artists') {
  98. let artist = $('#new-artist').val();
  99. if (this.editing.song.artists.indexOf(artist) !== -1) return Toast.methods.addToast('Artist already exists', 3000);
  100. if ($('#new-artist').val() !== '') {
  101. this.editing.song.artists.push(artist);
  102. $('#new-artist').val('');
  103. } else Toast.methods.addToast('Artist cannot be empty', 3000);
  104. }
  105. },
  106. removeTag: function (type, index) {
  107. if (type == 'genres') this.editing.song.genres.splice(index, 1);
  108. else if (type == 'artists') this.editing.song.artists.splice(index, 1);
  109. },
  110. edit: function (song, index) {
  111. this.editing = { index, song };
  112. this.video.player.loadVideoById(song._id);
  113. this.isEditActive = true;
  114. },
  115. save: function (song) {
  116. let _this = this;
  117. this.socket.emit('songs.update', song._id, song, function (res) {
  118. if (res.status == 'success' || res.status == 'error') Toast.methods.addToast(res.message, 2000);
  119. _this.toggleModal();
  120. });
  121. },
  122. remove: function (id, index) {
  123. this.songs.splice(index, 1);
  124. this.socket.emit('songs.remove', id, res => {
  125. if (res.status == 'success') Toast.methods.addToast(res.message, 2000);
  126. });
  127. }
  128. },
  129. ready: function () {
  130. let _this = this;
  131. io.getSocket((socket) => {
  132. _this.socket = socket;
  133. _this.socket.emit('songs.index', data => {
  134. _this.songs = data;
  135. });
  136. });
  137. this.video.player = new YT.Player('player', {
  138. height: 315,
  139. width: 560,
  140. videoId: this.editing.song._id,
  141. playerVars: { controls: 0, iv_load_policy: 3, rel: 0, showinfo: 0 },
  142. events: {
  143. 'onReady': () => {
  144. let volume = parseInt(localStorage.getItem("volume"));
  145. volume = (typeof volume === "number") ? volume : 20;
  146. _this.video.player.setVolume(volume);
  147. if (volume > 0) _this.video.player.unMute();
  148. },
  149. 'onStateChange': event => {
  150. if (event.data == 1) {
  151. let youtubeDuration = _this.video.player.getDuration();
  152. youtubeDuration -= _this.editing.song.skipDuration;
  153. if (_this.editing.song.duration > youtubeDuration) this.stopVideo();
  154. }
  155. }
  156. }
  157. });
  158. let volume = parseInt(localStorage.getItem("volume"));
  159. volume = (typeof volume === "number") ? volume : 20;
  160. $("#volumeSlider").val(volume);
  161. }
  162. }
  163. </script>
  164. <style lang='scss' scoped>
  165. body { font-family: 'Roboto', sans-serif; }
  166. .song-thumbnail {
  167. display: block;
  168. max-width: 50px;
  169. margin: 0 auto;
  170. }
  171. td { vertical-align: middle; }
  172. </style>