index.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. <template>
  2. <div id="queue">
  3. <div id="queue-items">
  4. <queue-item
  5. v-for="song in songsList"
  6. :key="song.songId"
  7. :song="song"
  8. :station="{ type: station.type, partyMode: station.partyMode }"
  9. />
  10. <p class="nothing-here" v-if="songsList.length < 1">
  11. There are no songs currently queued
  12. </p>
  13. <button
  14. id="add-song-to-queue"
  15. class="button is-primary"
  16. v-if="
  17. loggedIn &&
  18. ((station.type === 'community' &&
  19. station.partyMode &&
  20. ((station.locked && isOwnerOnly()) ||
  21. !station.locked ||
  22. (station.locked &&
  23. isAdminOnly() &&
  24. dismissedWarning))) ||
  25. station.type === 'official')
  26. "
  27. @click="
  28. openModal({
  29. sector: 'station',
  30. modal: 'addSongToQueue'
  31. })
  32. "
  33. >
  34. <i class="material-icons icon-with-button">queue</i>
  35. <span class="optional-desktop-only-text">
  36. Add Song To Queue
  37. </span>
  38. </button>
  39. <div
  40. id="queue-locked"
  41. v-if="station.type === 'community' && station.locked"
  42. >
  43. <button
  44. v-if="isAdminOnly() && !isOwnerOnly() && !dismissedWarning"
  45. class="button"
  46. @click="dismissedWarning = true"
  47. >
  48. THIS STATION'S QUEUE IS LOCKED.
  49. </button>
  50. <button v-if="!isAdminOnly() && !isOwnerOnly()" class="button">
  51. THIS STATION'S QUEUE IS LOCKED.
  52. </button>
  53. </div>
  54. </div>
  55. </div>
  56. </template>
  57. <script>
  58. import { mapActions, mapState } from "vuex";
  59. import Toast from "toasters";
  60. import QueueItem from "./QueueItem.vue";
  61. export default {
  62. components: { QueueItem },
  63. data() {
  64. return {
  65. dismissedWarning: false
  66. };
  67. },
  68. computed: mapState({
  69. loggedIn: state => state.user.auth.loggedIn,
  70. userId: state => state.user.auth.userId,
  71. userRole: state => state.user.auth.role,
  72. station: state => state.station.station,
  73. songsList: state => state.station.songsList,
  74. noSong: state => state.station.noSong
  75. }),
  76. methods: {
  77. isOwnerOnly() {
  78. return this.loggedIn && this.userId === this.station.owner;
  79. },
  80. isAdminOnly() {
  81. return this.loggedIn && this.userRole === "admin";
  82. },
  83. removeFromQueue(songId) {
  84. window.socket.emit(
  85. "stations.removeFromQueue",
  86. this.station._id,
  87. songId,
  88. res => {
  89. if (res.status === "success") {
  90. new Toast({
  91. content:
  92. "Successfully removed song from the queue.",
  93. timeout: 4000
  94. });
  95. } else new Toast({ content: res.message, timeout: 8000 });
  96. }
  97. );
  98. },
  99. ...mapActions("modals", ["openModal"])
  100. }
  101. };
  102. </script>
  103. <style lang="scss" scoped>
  104. @import "../../../../../styles/global.scss";
  105. .night-mode {
  106. #queue-items {
  107. background-color: $night-mode-bg-secondary !important;
  108. border: 0 !important;
  109. }
  110. }
  111. #queue {
  112. ::-webkit-scrollbar {
  113. width: 10px;
  114. }
  115. ::-webkit-scrollbar-track {
  116. background-color: #fff;
  117. border: 1px solid $light-grey-2;
  118. }
  119. ::-webkit-scrollbar-thumb {
  120. background-color: $dark-grey;
  121. &:hover {
  122. background-color: darken($dark-grey, 10%);
  123. }
  124. }
  125. #queue-items {
  126. background-color: #fff;
  127. border: 1px solid $light-grey-2;
  128. border-radius: 0 0 5px 5px;
  129. width: 100%;
  130. overflow: auto;
  131. height: inherit;
  132. padding: 10px;
  133. .nothing-here {
  134. margin-bottom: 10px;
  135. }
  136. @media (min-width: 1040px) {
  137. margin-bottom: 20px;
  138. }
  139. .queue-item:not(:last-of-type) {
  140. margin-bottom: 10px;
  141. }
  142. }
  143. button {
  144. width: 100%;
  145. height: 40px;
  146. border-radius: 5px;
  147. }
  148. #queue-locked {
  149. display: flex;
  150. justify-content: center;
  151. }
  152. #add-song-to-queue {
  153. background-color: rgba(3, 169, 244, 1);
  154. color: $white !important;
  155. border: 0;
  156. &:active,
  157. &:focus {
  158. border: 0;
  159. }
  160. &:focus {
  161. background-color: $primary-color;
  162. }
  163. }
  164. }
  165. </style>