CurrentlyPlaying.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. <template>
  2. <div id="currently-playing">
  3. <figure class="thumbnail">
  4. <div
  5. v-if="currentSong.ytThumbnail"
  6. id="yt-thumbnail-bg"
  7. :style="{
  8. 'background-image': 'url(' + currentSong.ytThumbnail + ')'
  9. }"
  10. ></div>
  11. <img
  12. v-if="currentSong.ytThumbnail"
  13. :src="currentSong.ytThumbnail"
  14. onerror="this.src='/assets/notes-transparent.png'"
  15. />
  16. <img
  17. v-else
  18. :src="currentSong.thumbnail"
  19. onerror="this.src='/assets/notes-transparent.png'"
  20. />
  21. </figure>
  22. <div id="song-info">
  23. <h6>Currently playing...</h6>
  24. <h4
  25. id="song-title"
  26. :style="!currentSong.artists ? { fontSize: '17px' } : null"
  27. >
  28. {{ currentSong.title }}
  29. </h4>
  30. <h5 id="song-artists" v-if="currentSong.artists">
  31. {{ currentSong.artists }}
  32. </h5>
  33. <p id="song-request-time">
  34. Requested
  35. <strong>{{
  36. formatDistance(currentSong.requestedAt, Date.now(), {
  37. addSuffix: true
  38. })
  39. }}</strong>
  40. </p>
  41. <div id="song-actions">
  42. <button
  43. class="button"
  44. id="report-icon"
  45. v-if="loggedIn && !currentSong.simpleSong"
  46. @click="
  47. openModal({
  48. sector: 'station',
  49. modal: 'report'
  50. })
  51. "
  52. >
  53. <i class="material-icons icon-with-button">flag</i>Report
  54. </button>
  55. <a
  56. class="button"
  57. id="youtube-icon"
  58. target="_blank"
  59. :href="
  60. `https://www.youtube.com/watch?v=${currentSong.songId}`
  61. "
  62. >
  63. <div class="icon"></div>
  64. </a>
  65. </div>
  66. </div>
  67. </div>
  68. </template>
  69. <script>
  70. import { mapState, mapActions } from "vuex";
  71. import { formatDistance } from "date-fns";
  72. export default {
  73. computed: {
  74. ...mapState("station", {
  75. currentSong: state => state.currentSong
  76. }),
  77. ...mapState({
  78. loggedIn: state => state.user.auth.loggedIn
  79. })
  80. },
  81. methods: {
  82. ...mapActions("modals", ["openModal"]),
  83. formatDistance
  84. }
  85. };
  86. </script>
  87. <style lang="scss" scoped>
  88. @import "../../../styles/global.scss";
  89. #currently-playing {
  90. display: flex;
  91. flex-direction: row;
  92. align-items: center;
  93. width: 100%;
  94. height: 100%;
  95. padding: 10px;
  96. .thumbnail {
  97. min-width: 140px;
  98. max-height: 140px;
  99. height: 100%;
  100. position: relative;
  101. #yt-thumbnail-bg {
  102. height: 100%;
  103. width: 100%;
  104. position: absolute;
  105. top: 0;
  106. filter: blur(1px);
  107. background: url("/assets/notes-transparent.png") no-repeat center
  108. center;
  109. }
  110. img {
  111. height: auto;
  112. width: 100%;
  113. margin-top: auto;
  114. margin-bottom: auto;
  115. z-index: 1;
  116. position: absolute;
  117. top: 0;
  118. bottom: 0;
  119. left: 0;
  120. right: 0;
  121. }
  122. }
  123. @media (max-width: 1500px) {
  124. #song-actions {
  125. .button {
  126. padding: 0 10px !important;
  127. }
  128. }
  129. #song-info {
  130. margin-left: 0 !important;
  131. }
  132. .thumbnail {
  133. display: none;
  134. }
  135. }
  136. #song-info {
  137. display: flex;
  138. flex-direction: column;
  139. justify-content: center;
  140. margin-left: 20px;
  141. width: 100%;
  142. height: 100%;
  143. *:not(i) {
  144. margin: 0;
  145. font-family: Karla, Arial, sans-serif;
  146. }
  147. h6 {
  148. color: $musare-blue !important;
  149. font-weight: bold;
  150. font-size: 17px;
  151. }
  152. #song-title {
  153. margin-top: 7px;
  154. font-size: 22px;
  155. }
  156. #song-artists {
  157. font-size: 16px;
  158. }
  159. #song-request-time {
  160. font-size: 12px;
  161. margin-top: 7px;
  162. color: $dark-grey;
  163. }
  164. #song-actions {
  165. margin-top: 10px;
  166. .button {
  167. color: #fff;
  168. padding: 0 15px;
  169. border: 0;
  170. }
  171. #report-icon {
  172. background-color: $grey;
  173. }
  174. #youtube-icon {
  175. background-color: #bd2e2e;
  176. &:after {
  177. content: "View on YouTube";
  178. @media (max-width: 1800px) {
  179. content: "Open";
  180. }
  181. }
  182. .icon {
  183. margin-right: 3px;
  184. height: 20px;
  185. width: 20px;
  186. -webkit-mask: url("/assets/social/youtube.svg") no-repeat
  187. center;
  188. mask: url("/assets/social/youtube.svg") no-repeat center;
  189. background-color: #fff;
  190. }
  191. }
  192. }
  193. }
  194. }
  195. </style>