SongsList.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
  1. <template>
  2. <div class="sidebar" transition="slide">
  3. <div class="inner-wrapper">
  4. <div v-if="$parent.type === 'community'" class="title">
  5. Queue
  6. </div>
  7. <div v-else class="title">
  8. Playlist
  9. </div>
  10. <article v-if="!$parent.noSong" class="media">
  11. <figure v-if="$parent.currentSong.thumbnail" class="media-left">
  12. <p class="image is-64x64">
  13. <img
  14. :src="$parent.currentSong.thumbnail"
  15. onerror="this.src='/assets/notes-transparent.png'"
  16. />
  17. </p>
  18. </figure>
  19. <div class="media-content">
  20. <div class="content">
  21. <p>
  22. Current Song:
  23. <strong>{{ $parent.currentSong.title }}</strong>
  24. <br />
  25. <small>{{ $parent.currentSong.artists }}</small>
  26. </p>
  27. </div>
  28. </div>
  29. <div class="media-right">
  30. {{ $parent.formatTime($parent.currentSong.duration) }}
  31. </div>
  32. </article>
  33. <p v-if="$parent.noSong" class="center">
  34. There is currently no song playing.
  35. </p>
  36. <article
  37. v-for="(song, index) in $parent.songsList"
  38. :key="index"
  39. class="media"
  40. >
  41. <div class="media-content">
  42. <div
  43. class="content"
  44. style="display: block;padding-top: 10px;"
  45. >
  46. <strong class="songTitle">{{ song.title }}</strong>
  47. <small>{{ song.artists.join(", ") }}</small>
  48. <div
  49. v-if="
  50. $parent.type === 'community' &&
  51. $parent.station.partyMode === true
  52. "
  53. >
  54. <small>
  55. Requested by
  56. <b>
  57. <user-id-to-username
  58. :userId="song.requestedBy"
  59. :link="true"
  60. />
  61. </b>
  62. </small>
  63. <i
  64. v-if="isOwnerOnly() || isAdminOnly()"
  65. class="material-icons"
  66. style="vertical-align: middle;"
  67. @click="removeFromQueue(song.songId)"
  68. >delete_forever</i
  69. >
  70. </div>
  71. </div>
  72. </div>
  73. <div class="media-right">
  74. {{ $parent.formatTime(song.duration) }}
  75. </div>
  76. </article>
  77. <div
  78. v-if="
  79. $parent.type === 'community' &&
  80. $parent.$parent.loggedIn &&
  81. $parent.station.partyMode === true
  82. "
  83. >
  84. <button
  85. v-if="
  86. ($parent.station.locked && isOwnerOnly()) ||
  87. !$parent.station.locked ||
  88. ($parent.station.locked &&
  89. isAdminOnly() &&
  90. dismissedWarning)
  91. "
  92. class="button add-to-queue"
  93. @click="
  94. openModal({
  95. sector: 'station',
  96. modal: 'addSongToQueue'
  97. })
  98. "
  99. >
  100. Add Song to Queue
  101. </button>
  102. <button
  103. v-if="
  104. $parent.station.locked &&
  105. isAdminOnly() &&
  106. !isOwnerOnly() &&
  107. !dismissedWarning
  108. "
  109. class="button add-to-queue add-to-queue-warning"
  110. @click="dismissedWarning = true"
  111. >
  112. THIS STATION'S QUEUE IS LOCKED.
  113. </button>
  114. <button
  115. v-if="
  116. $parent.station.locked &&
  117. !isAdminOnly() &&
  118. !isOwnerOnly()
  119. "
  120. class="button add-to-queue add-to-queue-disabled"
  121. >
  122. THIS STATION'S QUEUE IS LOCKED.
  123. </button>
  124. </div>
  125. </div>
  126. </div>
  127. </template>
  128. <script>
  129. import { mapActions } from "vuex";
  130. import { Toast } from "vue-roaster";
  131. import UserIdToUsername from "../UserIdToUsername.vue";
  132. export default {
  133. data() {
  134. return {
  135. dismissedWarning: false
  136. };
  137. },
  138. methods: {
  139. isOwnerOnly() {
  140. return (
  141. this.$parent.$parent.loggedIn &&
  142. this.$parent.$parent.userId === this.$parent.station.owner
  143. );
  144. },
  145. isAdminOnly() {
  146. return (
  147. this.$parent.$parent.loggedIn &&
  148. this.$parent.$parent.role === "admin"
  149. );
  150. },
  151. removeFromQueue(songId) {
  152. window.socket.emit(
  153. "stations.removeFromQueue",
  154. this.$parent.station._id,
  155. songId,
  156. res => {
  157. if (res.status === "success") {
  158. Toast.methods.addToast(
  159. "Successfully removed song from the queue.",
  160. 4000
  161. );
  162. } else Toast.methods.addToast(res.message, 8000);
  163. }
  164. );
  165. },
  166. ...mapActions("modals", ["openModal"])
  167. },
  168. mounted() {
  169. /* let _this = this;
  170. io.getSocket((socket) => {
  171. _this.socket = socket;
  172. }); */
  173. },
  174. components: { UserIdToUsername }
  175. };
  176. </script>
  177. <style lang="scss" scoped>
  178. .sidebar {
  179. position: fixed;
  180. z-index: 1;
  181. top: 0;
  182. right: 0;
  183. width: 300px;
  184. height: 100vh;
  185. background-color: #fff;
  186. box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
  187. 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  188. }
  189. .inner-wrapper {
  190. top: 64px;
  191. position: relative;
  192. overflow: auto;
  193. height: 100%;
  194. }
  195. .slide-transition {
  196. transition: transform 0.6s ease-in-out;
  197. transform: translateX(0);
  198. }
  199. .slide-enter,
  200. .slide-leave {
  201. transform: translateX(100%);
  202. }
  203. .title {
  204. background-color: rgb(3, 169, 244);
  205. text-align: center;
  206. padding: 10px;
  207. color: white;
  208. font-weight: 600;
  209. }
  210. .media {
  211. padding: 0 25px;
  212. }
  213. .media-content .content {
  214. min-height: 64px;
  215. display: flex;
  216. align-items: center;
  217. }
  218. .content p strong {
  219. word-break: break-word;
  220. }
  221. .content p small {
  222. word-break: break-word;
  223. }
  224. .add-to-queue {
  225. width: 100%;
  226. margin-top: 25px;
  227. height: 40px;
  228. border-radius: 0;
  229. background: rgb(3, 169, 244);
  230. color: #fff !important;
  231. border: 0;
  232. &:active,
  233. &:focus {
  234. border: 0;
  235. }
  236. }
  237. .add-to-queue.add-to-queue-warning {
  238. background-color: red;
  239. }
  240. .add-to-queue.add-to-queue-disabled {
  241. background-color: gray;
  242. }
  243. .add-to-queue.add-to-queue-disabled:focus {
  244. background-color: gray;
  245. }
  246. .add-to-queue:focus {
  247. background: #029ce3;
  248. }
  249. .media-right {
  250. line-height: 64px;
  251. }
  252. .songTitle {
  253. word-wrap: break-word;
  254. overflow: hidden;
  255. text-overflow: ellipsis;
  256. display: -webkit-box;
  257. -webkit-box-orient: vertical;
  258. -webkit-line-clamp: 2;
  259. line-height: 20px;
  260. max-height: 40px;
  261. }
  262. </style>