Playlist.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  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. !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 { mapState, mapActions } from "vuex";
  46. import Toast from "toasters";
  47. import io from "../../io";
  48. export default {
  49. data() {
  50. return {
  51. playlists: []
  52. };
  53. },
  54. computed: {
  55. ...mapState("modals", {
  56. modals: state => state.modals.station
  57. }),
  58. ...mapState({
  59. station: state => state.station.station
  60. })
  61. },
  62. methods: {
  63. edit(id) {
  64. this.editPlaylist(id);
  65. this.openModal({ sector: "station", modal: "editPlaylist" });
  66. },
  67. selectPlaylist(id) {
  68. this.socket.emit(
  69. "stations.selectPrivatePlaylist",
  70. this.station._id,
  71. id,
  72. res => {
  73. if (res.status === "failure")
  74. return new Toast({
  75. content: res.message,
  76. timeout: 8000
  77. });
  78. return new Toast({ content: res.message, timeout: 4000 });
  79. }
  80. );
  81. },
  82. isNotSelected(id) {
  83. // TODO Also change this once it changes for a station
  84. if (this.station && this.station.privatePlaylist === id)
  85. return false;
  86. return true;
  87. },
  88. ...mapActions("modals", ["openModal"]),
  89. ...mapActions("user/playlists", ["editPlaylist"])
  90. },
  91. mounted() {
  92. // TODO: Update when playlist is removed/created
  93. io.getSocket(socket => {
  94. this.socket = socket;
  95. this.socket.emit("playlists.indexForUser", res => {
  96. if (res.status === "success") this.playlists = res.data;
  97. });
  98. this.socket.on("event:playlist.create", playlist => {
  99. this.playlists.push(playlist);
  100. });
  101. this.socket.on("event:playlist.delete", playlistId => {
  102. this.playlists.forEach((playlist, index) => {
  103. if (playlist._id === playlistId) {
  104. this.playlists.splice(index, 1);
  105. }
  106. });
  107. });
  108. this.socket.on("event:playlist.addSong", data => {
  109. this.playlists.forEach((playlist, index) => {
  110. if (playlist._id === data.playlistId) {
  111. this.playlists[index].songs.push(data.song);
  112. }
  113. });
  114. });
  115. this.socket.on("event:playlist.removeSong", data => {
  116. this.playlists.forEach((playlist, index) => {
  117. if (playlist._id === data.playlistId) {
  118. this.playlists[index].songs.forEach((song, index2) => {
  119. if (song._id === data.songId) {
  120. this.playlists[index].songs.splice(index2, 1);
  121. }
  122. });
  123. }
  124. });
  125. });
  126. this.socket.on("event:playlist.updateDisplayName", data => {
  127. this.playlists.forEach((playlist, index) => {
  128. if (playlist._id === data.playlistId) {
  129. this.playlists[index].displayName = data.displayName;
  130. }
  131. });
  132. });
  133. });
  134. }
  135. };
  136. </script>
  137. <style lang="scss" scoped>
  138. @import "styles/global.scss";
  139. .night-mode {
  140. .sidebar {
  141. background-color: $night-mode-secondary;
  142. .title {
  143. color: #fff;
  144. }
  145. * {
  146. color: #ddd;
  147. }
  148. }
  149. }
  150. .sidebar {
  151. position: fixed;
  152. z-index: 1;
  153. top: 0;
  154. right: 0;
  155. width: 300px;
  156. height: 100vh;
  157. background-color: $white;
  158. box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
  159. 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  160. }
  161. .icons-group a {
  162. display: flex;
  163. align-items: center;
  164. }
  165. .menu-list li {
  166. align-items: center;
  167. }
  168. .inner-wrapper {
  169. top: 60px;
  170. position: relative;
  171. }
  172. .slide-transition {
  173. transition: transform 0.6s ease-in-out;
  174. transform: translateX(0);
  175. }
  176. .slide-enter,
  177. .slide-leave {
  178. transform: translateX(100%);
  179. }
  180. .title {
  181. background-color: rgb(3, 169, 244);
  182. text-align: center;
  183. padding: 10px;
  184. color: $white;
  185. font-weight: 600;
  186. }
  187. .create-playlist {
  188. width: 100%;
  189. margin-top: 20px;
  190. height: 40px;
  191. border-radius: 0;
  192. background: rgba(3, 169, 244, 1);
  193. color: $white !important;
  194. border: 0;
  195. &:active,
  196. &:focus {
  197. border: 0;
  198. }
  199. }
  200. .create-playlist:focus {
  201. background: $primary-color;
  202. }
  203. .none-found {
  204. text-align: center;
  205. }
  206. </style>