StationHeader.vue 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504
  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_white}`"
  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="!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="
  175. toggleSidebar({
  176. sector: 'station',
  177. sidebar: 'songslist'
  178. })
  179. "
  180. >
  181. <span class="icon">
  182. <i class="material-icons">queue_music</i>
  183. </span>
  184. <span class="icon-purpose">Show the station queue</span>
  185. </a>
  186. <a
  187. class="sidebar-item"
  188. href="#"
  189. @click="
  190. toggleSidebar({ sector: 'station', sidebar: 'users' })
  191. "
  192. >
  193. <span class="icon">
  194. <i class="material-icons">people</i>
  195. </span>
  196. <span class="icon-purpose"
  197. >Display users in the station</span
  198. >
  199. </a>
  200. <a
  201. v-if="loggedIn && station.type === 'community'"
  202. class="sidebar-item"
  203. href="#"
  204. @click="
  205. toggleSidebar({
  206. sector: 'station',
  207. sidebar: 'playlist'
  208. })
  209. "
  210. >
  211. <span class="icon">
  212. <i class="material-icons">library_music</i>
  213. </span>
  214. <span class="icon-purpose">Show your playlists</span>
  215. </a>
  216. </div>
  217. </div>
  218. </div>
  219. </template>
  220. <script>
  221. import { mapState, mapActions } from "vuex";
  222. export default {
  223. data() {
  224. return {
  225. title: this.$route.params.id,
  226. isMobile: false,
  227. controlBar: false,
  228. frontendDomain: "",
  229. siteSettings: {
  230. logo: "",
  231. siteName: ""
  232. }
  233. };
  234. },
  235. computed: mapState({
  236. loggedIn: state => state.user.auth.loggedIn,
  237. userId: state => state.user.auth.userId,
  238. username: state => state.user.auth.username,
  239. role: state => state.user.auth.role,
  240. station: state => state.station.station,
  241. paused: state => state.station.paused,
  242. noSong: state => state.station.noSong,
  243. currentSong: state => state.station.currentSong
  244. }),
  245. mounted() {
  246. lofig.get("frontendDomain").then(frontendDomain => {
  247. this.frontendDomain = frontendDomain;
  248. });
  249. lofig.get("siteSettings").then(siteSettings => {
  250. this.siteSettings = siteSettings;
  251. });
  252. },
  253. methods: {
  254. isOwner() {
  255. return (
  256. this.loggedIn &&
  257. (this.role === "admin" || this.userId === this.station.owner)
  258. );
  259. },
  260. settings() {
  261. this.editStation({
  262. _id: this.station._id,
  263. name: this.station.name,
  264. type: this.station.type,
  265. partyMode: this.station.partyMode,
  266. description: this.station.description,
  267. privacy: this.station.privacy,
  268. displayName: this.station.displayName,
  269. locked: this.station.locked
  270. });
  271. this.openModal({
  272. sector: "station",
  273. modal: "editStation"
  274. });
  275. },
  276. ...mapActions("modals", ["openModal"]),
  277. ...mapActions("sidebars", ["toggleSidebar"]),
  278. ...mapActions("station", ["editStation"]),
  279. ...mapActions("user/auth", ["logout"])
  280. }
  281. };
  282. </script>
  283. <style lang="scss" scoped>
  284. @import "styles/global.scss";
  285. .nav {
  286. background-color: $primary-color;
  287. line-height: 64px;
  288. border-radius: 0% 0% 33% 33% / 0% 0% 7% 7%;
  289. .is-brand {
  290. font-size: 2.1rem !important;
  291. line-height: 38px !important;
  292. padding: 0 20px;
  293. font-family: Pacifico, cursive;
  294. img {
  295. max-height: 38px;
  296. color: $musareBlue;
  297. }
  298. }
  299. }
  300. a.nav-item {
  301. color: $white;
  302. font-size: 17px;
  303. &:hover {
  304. color: $white;
  305. }
  306. padding: 0 12px;
  307. .icon {
  308. height: 64px;
  309. i {
  310. font-size: 2rem;
  311. line-height: 64px;
  312. height: 64px;
  313. width: 34px;
  314. }
  315. }
  316. }
  317. a.nav-item.is-tab:hover {
  318. border-bottom: none;
  319. border-top: solid 1px $white;
  320. }
  321. .admin strong {
  322. color: $purple;
  323. }
  324. .grouped {
  325. margin: 0;
  326. display: flex;
  327. text-decoration: none;
  328. }
  329. .skip-votes {
  330. position: relative;
  331. left: 11px;
  332. }
  333. .nav-toggle {
  334. height: 64px;
  335. }
  336. @media screen and (max-width: 998px) {
  337. .nav-menu {
  338. background-color: $white;
  339. box-shadow: 0 4px 7px rgba(10, 10, 10, 0.1);
  340. left: 0;
  341. display: none;
  342. right: 0;
  343. top: 100%;
  344. position: absolute;
  345. }
  346. .nav-toggle {
  347. display: block;
  348. }
  349. }
  350. .logo {
  351. font-size: 2.1rem;
  352. line-height: 64px;
  353. padding-left: 20px !important;
  354. padding-right: 20px !important;
  355. }
  356. .nav-center {
  357. display: flex;
  358. align-items: center;
  359. color: $primary-color;
  360. font-size: 22px;
  361. position: absolute;
  362. margin: auto;
  363. top: 50%;
  364. left: 50%;
  365. transform: translate(-50%, -50%);
  366. }
  367. .nav-right.is-active .nav-item {
  368. background: $primary-color;
  369. border: 0;
  370. }
  371. .hidden {
  372. display: none;
  373. }
  374. .control-sidebar {
  375. position: fixed;
  376. z-index: 1;
  377. top: 0;
  378. left: 0;
  379. width: 64px;
  380. height: 100vh;
  381. background-color: $primary-color;
  382. box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
  383. 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  384. @media (max-width: 998px) {
  385. display: none;
  386. }
  387. .inner-wrapper {
  388. @media (min-width: 999px) {
  389. .mobile-only {
  390. display: none;
  391. }
  392. .desktop-only {
  393. display: flex;
  394. }
  395. }
  396. @media (max-width: 998px) {
  397. .mobile-only {
  398. display: flex;
  399. }
  400. .desktop-only {
  401. display: none;
  402. visibility: hidden;
  403. }
  404. }
  405. }
  406. }
  407. .show-controlBar {
  408. display: block;
  409. }
  410. .inner-wrapper {
  411. top: 64px;
  412. position: relative;
  413. }
  414. .control-sidebar .material-icons {
  415. width: 100%;
  416. font-size: 2rem;
  417. }
  418. .control-sidebar .sidebar-item {
  419. font-size: 2rem;
  420. height: 50px;
  421. color: $white;
  422. -webkit-box-align: center;
  423. -ms-flex-align: center;
  424. align-items: center;
  425. display: -webkit-box;
  426. display: -ms-flexbox;
  427. display: flex;
  428. -webkit-box-flex: 0;
  429. -ms-flex-positive: 0;
  430. flex-grow: 0;
  431. -ms-flex-negative: 0;
  432. flex-shrink: 0;
  433. -webkit-box-pack: center;
  434. -ms-flex-pack: center;
  435. justify-content: center;
  436. width: 100%;
  437. position: relative;
  438. }
  439. .control-sidebar .sidebar-top-hr {
  440. margin: 0 0 20px 0;
  441. }
  442. .sidebar-item .icon-purpose {
  443. visibility: hidden;
  444. width: 160px;
  445. font-size: 12px;
  446. background-color: rgba(3, 169, 244, 0.8);
  447. color: $white;
  448. text-align: center;
  449. border-radius: 6px;
  450. padding: 5px;
  451. position: absolute;
  452. z-index: 1;
  453. left: 115%;
  454. opacity: 0;
  455. transition: opacity 0.5s;
  456. display: none;
  457. }
  458. .sidebar-item .icon-purpose::after {
  459. content: "";
  460. position: absolute;
  461. top: 50%;
  462. right: 100%;
  463. margin-top: -5px;
  464. border-width: 5px;
  465. border-style: solid;
  466. border-color: transparent rgba(3, 169, 244, 0.8) transparent transparent;
  467. }
  468. .sidebar-item:hover .icon-purpose {
  469. visibility: visible;
  470. opacity: 1;
  471. display: block;
  472. }
  473. </style>