SongsList.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. <template>
  2. <div class='sidebar' transition='slide' v-if='$parent.sidebars.songslist'>
  3. <div class='inner-wrapper'>
  4. <div class='title' v-if='$parent.type === "community"'>Queue</div>
  5. <div class='title' v-else>Playlist</div>
  6. <article class="media" v-if="!$parent.noSong">
  7. <figure class="media-left" v-if="$parent.currentSong.thumbnail">
  8. <p class="image is-64x64">
  9. <img :src="$parent.currentSong.thumbnail" onerror="this.src='/assets/notes-transparent.png'">
  10. </p>
  11. </figure>
  12. <div class="media-content">
  13. <div class="content">
  14. <p>
  15. Current Song: <strong>{{ $parent.currentSong.title }}</strong>
  16. <br>
  17. <small>{{ $parent.currentSong.artists }}</small>
  18. </p>
  19. </div>
  20. </div>
  21. <div class="media-right">
  22. {{ $parent.formatTime($parent.currentSong.duration) }}
  23. </div>
  24. </article>
  25. <p v-if="$parent.noSong" class="center">There is currently no song playing.</p>
  26. <article class="media" v-for='song in $parent.songsList'>
  27. <div class="media-content">
  28. <div class="content" style="display: block;padding-top: 10px;">
  29. <strong class="songTitle">{{ song.title }}</strong>
  30. <small>{{ song.artists.join(', ') }}</small>
  31. <div v-if="this.$parent.$parent.type === 'community' && this.$parent.$parent.station.partyMode === true">
  32. <small>Requested by <b>{{this.$parent.$parent.$parent.getUsernameFromId(song.requestedBy)}} {{this.userIdMap['Z' + song.requestedBy]}}</b></small>
  33. <i class="material-icons" style="vertical-align: middle;" @click="removeFromQueue(song.songId)" v-if="isOwnerOnly() || isAdminOnly()">delete_forever</i>
  34. </div>
  35. </div>
  36. </div>
  37. <div class="media-right">
  38. {{ $parent.$parent.formatTime(song.duration) }}
  39. </div>
  40. </article>
  41. <div v-if="$parent.type === 'community' && $parent.$parent.loggedIn && $parent.station.partyMode === true">
  42. <button class='button add-to-queue' @click='$parent.modals.addSongToQueue = !$parent.modals.addSongToQueue' v-if="($parent.station.locked && isOwnerOnly()) || !$parent.station.locked || ($parent.station.locked && isAdminOnly() && dismissedWarning)">Add Song to Queue</button>
  43. <button class='button add-to-queue add-to-queue-warning' @click='dismissedWarning = true' v-if="$parent.station.locked && isAdminOnly() && !isOwnerOnly() && !dismissedWarning">THIS STATION'S QUEUE IS LOCKED.</button>
  44. <button class='button add-to-queue add-to-queue-disabled' v-if="$parent.station.locked && !isAdminOnly() && !isOwnerOnly()">THIS STATION'S QUEUE IS LOCKED.</button>
  45. </div>
  46. </div>
  47. </div>
  48. </template>
  49. <script>
  50. import io from '../../io';
  51. import { Toast } from 'vue-roaster';
  52. export default {
  53. data: function () {
  54. return {
  55. dismissedWarning: false,
  56. userIdMap: this.$parent.$parent.userIdMap
  57. }
  58. },
  59. methods: {
  60. isOwnerOnly: function () {
  61. return this.$parent.$parent.loggedIn && this.$parent.$parent.userId === this.$parent.station.owner;
  62. },
  63. isAdminOnly: function() {
  64. return this.$parent.$parent.loggedIn && this.$parent.$parent.role === 'admin';
  65. },
  66. removeFromQueue: function(songId) {
  67. socket.emit('stations.removeFromQueue', this.$parent.station._id, songId, res => {
  68. if (res.status === 'success') {
  69. Toast.methods.addToast('Successfully removed song from the queue.', 4000);
  70. } else Toast.methods.addToast(res.message, 8000);
  71. });
  72. }
  73. },
  74. ready: function () {
  75. /*let _this = this;
  76. io.getSocket((socket) => {
  77. _this.socket = socket;
  78. });*/
  79. }
  80. }
  81. </script>
  82. <style type='scss' scoped>
  83. .sidebar {
  84. position: fixed;
  85. z-index: 1;
  86. top: 0;
  87. right: 0;
  88. width: 300px;
  89. height: 100vh;
  90. background-color: #fff;
  91. box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  92. }
  93. .inner-wrapper {
  94. top: 64px;
  95. position: relative;
  96. overflow: auto;
  97. height: 100%;
  98. }
  99. .slide-transition {
  100. transition: transform 0.6s ease-in-out;
  101. transform: translateX(0);
  102. }
  103. .slide-enter, .slide-leave { transform: translateX(100%); }
  104. .title {
  105. background-color: rgb(3, 169, 244);
  106. text-align: center;
  107. padding: 10px;
  108. color: white;
  109. font-weight: 600;
  110. }
  111. .media { padding: 0 25px; }
  112. .media-content .content {
  113. min-height: 64px;
  114. display: flex;
  115. align-items: center;
  116. }
  117. .content p strong { word-break: break-word; }
  118. .content p small { word-break: break-word; }
  119. .add-to-queue {
  120. width: 100%;
  121. margin-top: 25px;
  122. height: 40px;
  123. border-radius: 0;
  124. background: rgb(3, 169, 244);
  125. color: #fff !important;
  126. border: 0;
  127. &:active, &:focus { border: 0; }
  128. }
  129. .add-to-queue.add-to-queue-warning {
  130. background-color: red;
  131. }
  132. .add-to-queue.add-to-queue-disabled {
  133. background-color: gray;
  134. }
  135. .add-to-queue.add-to-queue-disabled:focus {
  136. background-color: gray;
  137. }
  138. .add-to-queue:focus { background: #029ce3; }
  139. .media-right { line-height: 64px; }
  140. .songTitle {
  141. word-wrap: break-word;
  142. overflow: hidden;
  143. text-overflow: ellipsis;
  144. display: -webkit-box;
  145. -webkit-box-orient: vertical;
  146. -webkit-line-clamp: 2;
  147. line-height: 20px;
  148. max-height: 40px;
  149. }
  150. </style>