Playlist.vue 4.3 KB

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