CommunityHeader.vue 8.9 KB

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