Playlist.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. <template>
  2. <div class='sidebar' transition='slide' v-if='$parent.sidebars.playlist'>
  3. <div class='inner-wrapper'>
  4. <div class='title'>Playlists</div>
  5. <aside class='menu' v-if='playlists.length > 0'>
  6. <ul class='menu-list'>
  7. <li v-for='playlist in playlists'>
  8. <span>{{ playlist.displayName }}</span>
  9. <!--Will play playlist in community station Kris-->
  10. <div class='icons-group'>
  11. <a href='#' @click='selectPlaylist(playlist._id)' v-if="isNotSelected(playlist._id) && !this.$parent.$parent.station.partyMode">
  12. <i class='material-icons'>play_arrow</i>
  13. </a>
  14. <a href='#' @click='editPlaylist(playlist._id)'>
  15. <i class='material-icons'>edit</i>
  16. </a>
  17. </div>
  18. </li>
  19. </ul>
  20. </aside>
  21. <div class='none-found' v-else>No Playlists found</div>
  22. <a class='button create-playlist' href='#' @click='$parent.modals.createPlaylist = !$parent.modals.createPlaylist'>Create Playlist</a>
  23. </div>
  24. </div>
  25. </template>
  26. <script>
  27. import { Toast } from 'vue-roaster';
  28. import { Edit } from '../Modals/Playlists/Edit.vue';
  29. import io from '../../io';
  30. export default {
  31. data() {
  32. return {
  33. playlists: []
  34. }
  35. },
  36. methods: {
  37. editPlaylist: function(id) {
  38. this.$parent.editPlaylist(id);
  39. },
  40. selectPlaylist: function(id) {
  41. this.socket.emit('stations.selectPrivatePlaylist', this.$parent.station._id, id, (res) => {
  42. if (res.status === 'failure') return Toast.methods.addToast(res.message, 8000);
  43. Toast.methods.addToast(res.message, 4000);
  44. });
  45. },
  46. isNotSelected: function(id) {
  47. let _this = this;
  48. //TODO Also change this once it changes for a station
  49. if (_this.$parent.station && _this.$parent.station.privatePlaylist === id) return false;
  50. return true;
  51. }
  52. },
  53. ready: function () {
  54. // TODO: Update when playlist is removed/created
  55. let _this = this;
  56. io.getSocket((socket) => {
  57. _this.socket = socket;
  58. _this.socket.emit('playlists.indexForUser', res => {
  59. if (res.status == 'success') _this.playlists = res.data;
  60. });
  61. _this.socket.on('event:playlist.create', (playlist) => {
  62. _this.playlists.push(playlist);
  63. });
  64. _this.socket.on('event:playlist.delete', (playlistId) => {
  65. _this.playlists.forEach((playlist, index) => {
  66. if (playlist._id === playlistId) {
  67. _this.playlists.splice(index, 1);
  68. }
  69. });
  70. });
  71. _this.socket.on('event:playlist.addSong', (data) => {
  72. _this.playlists.forEach((playlist, index) => {
  73. if (playlist._id === data.playlistId) {
  74. _this.playlists[index].songs.push(data.song);
  75. }
  76. });
  77. });
  78. _this.socket.on('event:playlist.removeSong', (data) => {
  79. _this.playlists.forEach((playlist, index) => {
  80. if (playlist._id === data.playlistId) {
  81. _this.playlists[index].songs.forEach((song, index2) => {
  82. if (song._id === data.songId) {
  83. _this.playlists[index].songs.splice(index2, 1);
  84. }
  85. });
  86. }
  87. });
  88. });
  89. _this.socket.on('event:playlist.updateDisplayName', (data) => {
  90. _this.playlists.forEach((playlist, index) => {
  91. if (playlist._id === data.playlistId) {
  92. _this.playlists[index].displayName = data.displayName;
  93. }
  94. });
  95. });
  96. });
  97. }
  98. }
  99. </script>
  100. <style type='scss' scoped>
  101. .sidebar {
  102. position: fixed;
  103. z-index: 1;
  104. top: 0;
  105. right: 0;
  106. width: 300px;
  107. height: 100vh;
  108. background-color: #fff;
  109. box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  110. }
  111. .icons-group a {
  112. display: flex;
  113. align-items: center;
  114. }
  115. .menu-list li { align-items: center; }
  116. .inner-wrapper {
  117. top: 64px;
  118. position: relative;
  119. }
  120. .slide-transition {
  121. transition: transform 0.6s ease-in-out;
  122. transform: translateX(0);
  123. }
  124. .slide-enter, .slide-leave { transform: translateX(100%); }
  125. .title {
  126. background-color: rgb(3, 169, 244);
  127. text-align: center;
  128. padding: 10px;
  129. color: white;
  130. font-weight: 600;
  131. }
  132. .create-playlist {
  133. width: 100%;
  134. margin-top: 20px;
  135. height: 40px;
  136. border-radius: 0;
  137. background: rgba(3, 169, 244, 1);
  138. color: #fff !important;
  139. border: 0;
  140. &:active, &:focus { border: 0; }
  141. }
  142. .create-playlist:focus { background: #029ce3; }
  143. .none-found { text-align: center; }
  144. </style>