StationHeader.vue 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492
  1. <template>
  2. <div>
  3. <nav class="nav">
  4. <div class="nav-left">
  5. <router-link class="nav-item is-brand" :to="{ path: '/' }">
  6. <img
  7. :src="`${this.siteSettings.logo}`"
  8. :alt="`${this.siteSettings.siteName}` || `Musare`"
  9. />
  10. </router-link>
  11. </div>
  12. <div class="nav-center stationDisplayName">
  13. {{ station.displayName }}
  14. </div>
  15. <span class="nav-toggle" v-on:click="controlBar = !controlBar">
  16. <span />
  17. <span />
  18. <span />
  19. </span>
  20. <div class="nav-right nav-menu" :class="{ 'is-active': isMobile }">
  21. <router-link
  22. v-if="role === 'admin'"
  23. class="nav-item is-tab admin"
  24. :to="{ path: '/admin' }"
  25. >
  26. <strong>Admin</strong>
  27. </router-link>
  28. <span v-if="loggedIn" class="grouped">
  29. <router-link
  30. class="nav-item is-tab"
  31. :to="{ path: '/u/' + username }"
  32. >Profile</router-link
  33. >
  34. <router-link class="nav-item is-tab" to="/settings"
  35. >Settings</router-link
  36. >
  37. <a class="nav-item is-tab" @click="logout()">Logout</a>
  38. </span>
  39. <span v-else class="grouped">
  40. <a
  41. class="nav-item"
  42. href="#"
  43. @click="openModal({ sector: 'header', modal: 'login' })"
  44. >Login</a
  45. >
  46. <a
  47. class="nav-item"
  48. href="#"
  49. @click="
  50. openModal({ sector: 'header', modal: 'register' })
  51. "
  52. >Register</a
  53. >
  54. </span>
  55. </div>
  56. </nav>
  57. <div class="control-sidebar" :class="{ 'show-controlBar': controlBar }">
  58. <div class="inner-wrapper">
  59. <div v-if="isOwner()">
  60. <a class="sidebar-item" href="#" @click="settings()">
  61. <span class="icon">
  62. <i class="material-icons">settings</i>
  63. </span>
  64. <span class="icon-purpose">Station settings</span>
  65. </a>
  66. <a
  67. class="sidebar-item"
  68. href="#"
  69. @click="$parent.skipStation()"
  70. >
  71. <span class="icon">
  72. <i class="material-icons">skip_next</i>
  73. </span>
  74. <span class="icon-purpose">Skip current song</span>
  75. </a>
  76. <a
  77. v-if="paused"
  78. class="sidebar-item"
  79. href="#"
  80. @click="$parent.resumeStation()"
  81. >
  82. <span class="icon">
  83. <i class="material-icons">play_arrow</i>
  84. </span>
  85. <span class="icon-purpose">Resume station</span>
  86. </a>
  87. <a
  88. v-if="!paused"
  89. class="sidebar-item"
  90. href="#"
  91. @click="$parent.pauseStation()"
  92. >
  93. <span class="icon">
  94. <i class="material-icons">pause</i>
  95. </span>
  96. <span class="icon-purpose">Pause station</span>
  97. </a>
  98. <hr />
  99. </div>
  100. <div v-if="loggedIn">
  101. <a
  102. v-if="station.type === 'official'"
  103. class="sidebar-item"
  104. href="#"
  105. @click="
  106. openModal({
  107. sector: 'station',
  108. modal: 'addSongToQueue'
  109. })
  110. "
  111. >
  112. <span class="icon">
  113. <i class="material-icons">queue</i>
  114. </span>
  115. <span class="icon-purpose">Add song to queue</span>
  116. </a>
  117. <a
  118. v-if="!isOwner() && !noSong"
  119. class="sidebar-item"
  120. href="#"
  121. @click="$parent.voteSkipStation()"
  122. >
  123. <span class="icon">
  124. <i class="material-icons">skip_next</i>
  125. </span>
  126. <span class="skip-votes">{{
  127. currentSong.skipVotes
  128. }}</span>
  129. <span class="icon-purpose">Skip current song</span>
  130. </a>
  131. <a
  132. v-if="!noSong && !currentSong.simpleSong"
  133. class="sidebar-item"
  134. href="#"
  135. @click="
  136. openModal({
  137. sector: 'station',
  138. modal: 'report'
  139. })
  140. "
  141. >
  142. <span class="icon">
  143. <i class="material-icons">report</i>
  144. </span>
  145. <span class="icon-purpose">Report a song</span>
  146. </a>
  147. <a
  148. v-if="!noSong"
  149. class="sidebar-item"
  150. href="#"
  151. @click="
  152. openModal({
  153. sector: 'station',
  154. modal: 'addSongToPlaylist'
  155. })
  156. "
  157. >
  158. <span class="icon">
  159. <i class="material-icons">playlist_add</i>
  160. </span>
  161. <span class="icon-purpose"
  162. >Add current song to playlist</span
  163. >
  164. </a>
  165. <hr v-if="!noSong" />
  166. </div>
  167. <a
  168. v-if="
  169. station.partyMode === true ||
  170. station.type === 'official'
  171. "
  172. class="sidebar-item"
  173. href="#"
  174. @click="$parent.toggleSidebar('songslist')"
  175. >
  176. <span class="icon">
  177. <i class="material-icons">queue_music</i>
  178. </span>
  179. <span class="icon-purpose">Show the station queue</span>
  180. </a>
  181. <a
  182. class="sidebar-item"
  183. href="#"
  184. @click="$parent.toggleSidebar('users')"
  185. >
  186. <span class="icon">
  187. <i class="material-icons">people</i>
  188. </span>
  189. <span class="icon-purpose"
  190. >Display users in the station</span
  191. >
  192. </a>
  193. <a
  194. v-if="loggedIn && station.type === 'community'"
  195. class="sidebar-item"
  196. href="#"
  197. @click="$parent.toggleSidebar('playlist')"
  198. >
  199. <span class="icon">
  200. <i class="material-icons">library_music</i>
  201. </span>
  202. <span class="icon-purpose">Show your playlists</span>
  203. </a>
  204. </div>
  205. </div>
  206. </div>
  207. </template>
  208. <script>
  209. import { mapState, mapActions } from "vuex";
  210. export default {
  211. data() {
  212. return {
  213. title: this.$route.params.id,
  214. isMobile: false,
  215. controlBar: false,
  216. frontendDomain: "",
  217. siteSettings: {
  218. logo: "",
  219. siteName: ""
  220. }
  221. };
  222. },
  223. computed: mapState({
  224. loggedIn: state => state.user.auth.loggedIn,
  225. userId: state => state.user.auth.userId,
  226. username: state => state.user.auth.username,
  227. role: state => state.user.auth.role,
  228. station: state => state.station.station,
  229. paused: state => state.station.paused,
  230. noSong: state => state.station.noSong,
  231. currentSong: state => state.station.currentSong
  232. }),
  233. mounted() {
  234. lofig.get("frontendDomain", res => {
  235. this.frontendDomain = res;
  236. return res;
  237. });
  238. lofig.get("siteSettings", res => {
  239. this.siteSettings = res;
  240. return res;
  241. });
  242. },
  243. methods: {
  244. isOwner() {
  245. return (
  246. this.loggedIn &&
  247. (this.role === "admin" || this.userId === this.station.owner)
  248. );
  249. },
  250. settings() {
  251. this.editStation({
  252. _id: this.station._id,
  253. name: this.station.name,
  254. type: this.station.type,
  255. partyMode: this.station.partyMode,
  256. description: this.station.description,
  257. privacy: this.station.privacy,
  258. displayName: this.station.displayName
  259. });
  260. this.openModal({
  261. sector: "station",
  262. modal: "editStation"
  263. });
  264. },
  265. ...mapActions("modals", ["openModal"]),
  266. ...mapActions("station", ["editStation"]),
  267. ...mapActions("user/auth", ["logout"])
  268. }
  269. };
  270. </script>
  271. <style lang="scss" scoped>
  272. @import "styles/global.scss";
  273. .nav {
  274. background-color: $primary-color;
  275. line-height: 64px;
  276. border-radius: 0% 0% 33% 33% / 0% 0% 7% 7%;
  277. .is-brand {
  278. font-size: 2.1rem !important;
  279. line-height: 38px !important;
  280. padding: 0 20px;
  281. color: $white;
  282. font-family: Pacifico, cursive;
  283. filter: brightness(0) invert(1);
  284. img {
  285. max-height: 38px;
  286. }
  287. }
  288. }
  289. a.nav-item {
  290. color: $white;
  291. font-size: 17px;
  292. &:hover {
  293. color: $white;
  294. }
  295. padding: 0 12px;
  296. .icon {
  297. height: 64px;
  298. i {
  299. font-size: 2rem;
  300. line-height: 64px;
  301. height: 64px;
  302. width: 34px;
  303. }
  304. }
  305. }
  306. a.nav-item.is-tab:hover {
  307. border-bottom: none;
  308. border-top: solid 1px $white;
  309. }
  310. .admin strong {
  311. color: $purple;
  312. }
  313. .grouped {
  314. margin: 0;
  315. display: flex;
  316. text-decoration: none;
  317. }
  318. .skip-votes {
  319. position: relative;
  320. left: 11px;
  321. }
  322. .nav-toggle {
  323. height: 64px;
  324. }
  325. @media screen and (max-width: 998px) {
  326. .nav-menu {
  327. background-color: $white;
  328. box-shadow: 0 4px 7px rgba(10, 10, 10, 0.1);
  329. left: 0;
  330. display: none;
  331. right: 0;
  332. top: 100%;
  333. position: absolute;
  334. }
  335. .nav-toggle {
  336. display: block;
  337. }
  338. }
  339. .logo {
  340. font-size: 2.1rem;
  341. line-height: 64px;
  342. padding-left: 20px !important;
  343. padding-right: 20px !important;
  344. }
  345. .nav-center {
  346. display: flex;
  347. align-items: center;
  348. color: $primary-color;
  349. font-size: 22px;
  350. position: absolute;
  351. margin: auto;
  352. top: 50%;
  353. left: 50%;
  354. transform: translate(-50%, -50%);
  355. }
  356. .nav-right.is-active .nav-item {
  357. background: $primary-color;
  358. border: 0;
  359. }
  360. .hidden {
  361. display: none;
  362. }
  363. .control-sidebar {
  364. position: fixed;
  365. z-index: 1;
  366. top: 0;
  367. left: 0;
  368. width: 64px;
  369. height: 100vh;
  370. background-color: $primary-color;
  371. box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
  372. 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  373. @media (max-width: 998px) {
  374. display: none;
  375. }
  376. .inner-wrapper {
  377. @media (min-width: 999px) {
  378. .mobile-only {
  379. display: none;
  380. }
  381. .desktop-only {
  382. display: flex;
  383. }
  384. }
  385. @media (max-width: 998px) {
  386. .mobile-only {
  387. display: flex;
  388. }
  389. .desktop-only {
  390. display: none;
  391. visibility: hidden;
  392. }
  393. }
  394. }
  395. }
  396. .show-controlBar {
  397. display: block;
  398. }
  399. .inner-wrapper {
  400. top: 64px;
  401. position: relative;
  402. }
  403. .control-sidebar .material-icons {
  404. width: 100%;
  405. font-size: 2rem;
  406. }
  407. .control-sidebar .sidebar-item {
  408. font-size: 2rem;
  409. height: 50px;
  410. color: $white;
  411. -webkit-box-align: center;
  412. -ms-flex-align: center;
  413. align-items: center;
  414. display: -webkit-box;
  415. display: -ms-flexbox;
  416. display: flex;
  417. -webkit-box-flex: 0;
  418. -ms-flex-positive: 0;
  419. flex-grow: 0;
  420. -ms-flex-negative: 0;
  421. flex-shrink: 0;
  422. -webkit-box-pack: center;
  423. -ms-flex-pack: center;
  424. justify-content: center;
  425. width: 100%;
  426. position: relative;
  427. }
  428. .control-sidebar .sidebar-top-hr {
  429. margin: 0 0 20px 0;
  430. }
  431. .sidebar-item .icon-purpose {
  432. visibility: hidden;
  433. width: 160px;
  434. font-size: 12px;
  435. background-color: rgba(3, 169, 244, 0.8);
  436. color: $white;
  437. text-align: center;
  438. border-radius: 6px;
  439. padding: 5px;
  440. position: absolute;
  441. z-index: 1;
  442. left: 115%;
  443. opacity: 0;
  444. transition: opacity 0.5s;
  445. display: none;
  446. }
  447. .sidebar-item .icon-purpose::after {
  448. content: "";
  449. position: absolute;
  450. top: 50%;
  451. right: 100%;
  452. margin-top: -5px;
  453. border-width: 5px;
  454. border-style: solid;
  455. border-color: transparent rgba(3, 169, 244, 0.8) transparent transparent;
  456. }
  457. .sidebar-item:hover .icon-purpose {
  458. visibility: visible;
  459. opacity: 1;
  460. display: block;
  461. }
  462. </style>