Home.vue 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391
  1. <template>
  2. <div class="app" :class="{'nightMode': nightMode}">
  3. <main-header></main-header>
  4. <div class="group">
  5. <div class="group-title">Official Stations</div>
  6. <div class="card station-card" v-for="station in stations.official" v-link="{ path: '/' + station.name }" @click="this.$dispatch('joinStation', station._id)" :class="{'isPrivate': station.privacy === 'private'}">
  7. <div class="card-image">
  8. <figure class="image is-square">
  9. <img :src="station.currentSong.thumbnail" onerror="this.src='/assets/notes-transparent.png'" />
  10. </figure>
  11. </div>
  12. <div class="card-content">
  13. <div class="media">
  14. <div class="media-left displayName">
  15. <h5>{{ station.displayName }}</h5>
  16. </div>
  17. </div>
  18. <div class="content">
  19. {{ station.description }}
  20. </div>
  21. <div class="under-content">
  22. <i class='material-icons' title="How many users there are in the station.">people</i>
  23. <span class="users-count" title="How many users there are in the station.">&nbsp;{{station.userCount}}</span>
  24. <i class="material-icons right-icon" v-if="station.privacy !== 'public'" title="This station is not visible to other users.">lock</i>
  25. </div>
  26. </div>
  27. <a @click="this.$dispatch('joinStation', station._id)" href='#' class='absolute-a' v-link="{ path: '/' + station.name }"></a>
  28. </div>
  29. </div>
  30. <div class="group">
  31. <div class="group-title">
  32. Community Stations&nbsp;
  33. <a @click='modals.createCommunityStation = !modals.createCommunityStation' v-if="$parent.loggedIn" href='#'>
  34. <i class="material-icons community-button">add_circle_outline</i></a>
  35. </div>
  36. <div class="card station-card" v-for="station in stations.community" v-link="{ path: '/community/' + station.name }" @click="this.$dispatch('joinStation', station._id)" :class="{'isPrivate': station.privacy === 'private','isMine': isOwner(station)}">
  37. <div class="card-image">
  38. <figure class="image is-square">
  39. <img :src="station.currentSong.thumbnail" onerror="this.src='/assets/notes-transparent.png'" />
  40. </figure>
  41. </div>
  42. <div class="card-content">
  43. <div class="media">
  44. <div class="media-left displayName">
  45. <h5>{{ station.displayName }}</h5>
  46. </div>
  47. </div>
  48. <div class="content">
  49. {{ station.description }}
  50. </div>
  51. <div class="under-content">
  52. <i class='material-icons' title="How many users there are in the station.">people</i>
  53. <span class="users-count" title="How many users there are in the station.">&nbsp;{{station.userCount}}</span>
  54. <i class="material-icons right-icon" v-if="station.privacy !== 'public'" title="This station is not visible to other users.">lock</i>
  55. <i class="material-icons right-icon" v-if="isOwner(station)" title="This is your station.">home</i>
  56. </div>
  57. </div>
  58. <a @click="this.$dispatch('joinStation', station._id)" href='#' class='absolute-a' v-link="{ path: '/community/' + station.name }"></a>
  59. </div>
  60. </div>
  61. <main-footer></main-footer>
  62. </div>
  63. <create-community-station v-if='modals.createCommunityStation'></create-community-station>
  64. </template>
  65. <script>
  66. import MainHeader from '../MainHeader.vue';
  67. import MainFooter from '../MainFooter.vue';
  68. import CreateCommunityStation from '../Modals/CreateCommunityStation.vue';
  69. import auth from '../../auth';
  70. import io from '../../io';
  71. export default {
  72. data() {
  73. return {
  74. recaptcha: {
  75. key: ''
  76. },
  77. stations: {
  78. official: [],
  79. community: []
  80. },
  81. modals: {
  82. createCommunityStation: false
  83. },
  84. nightMode: false
  85. }
  86. },
  87. ready() {
  88. let _this = this;
  89. auth.getStatus((authenticated, role, username, userId) => {
  90. io.getSocket((socket) => {
  91. _this.socket = socket;
  92. if (_this.socket.connected) _this.init();
  93. io.onConnect(() => {
  94. _this.init();
  95. });
  96. _this.socket.on('event:stations.created', station => {
  97. if (!station.currentSong) station.currentSong = { thumbnail: '/assets/notes-transparent.png' };
  98. if (station.currentSong && !station.currentSong.thumbnail) station.currentSong.thumbnail = "/assets/notes-transparent.png";
  99. _this.stations[station.type].push(station);
  100. });
  101. _this.socket.on('event:userCount.updated', (stationId, userCount) => {
  102. _this.stations.official.forEach((station) => {
  103. if (station._id === stationId) {
  104. station.userCount = userCount;
  105. }
  106. });
  107. _this.stations.community.forEach((station) => {
  108. if (station._id === stationId) {
  109. station.userCount = userCount;
  110. }
  111. });
  112. });
  113. _this.socket.on('event:station.nextSong', (stationId, newSong) => {
  114. _this.stations.official.forEach((station) => {
  115. if (station._id === stationId) {
  116. if (!newSong) newSong = { thumbnail: '/assets/notes-transparent.png' };
  117. if (newSong && !newSong.thumbnail) newSong.thumbnail = "/assets/notes-transparent.png";
  118. station.currentSong = newSong;
  119. }
  120. });
  121. _this.stations.community.forEach((station) => {
  122. if (station._id === stationId) {
  123. if (!newSong) newSong = { thumbnail: '/assets/notes-transparent.png' };
  124. if (newSong && !newSong.thumbnail) newSong.thumbnail = "/assets/notes-transparent.png";
  125. station.currentSong = newSong;
  126. }
  127. });
  128. });
  129. });
  130. });
  131. },
  132. methods: {
  133. toggleModal: function (type) {
  134. this.$dispatch('toggleModal', type);
  135. },
  136. init: function() {
  137. let _this = this;
  138. auth.getStatus((authenticated, role, username, userId) => {
  139. _this.socket.emit('stations.index', data => {
  140. _this.stations.community = [];
  141. _this.stations.official = [];
  142. if (data.status === "success") data.stations.forEach(station => {
  143. if (!station.currentSong) station.currentSong = { thumbnail: '/assets/notes-transparent.png' };
  144. if (station.currentSong && !station.currentSong.thumbnail) station.currentSong.thumbnail = "/assets/notes-transparent.png";
  145. if (station.privacy !== 'public') station.class = { 'station-red': true }
  146. else if (station.type === 'community' && station.owner === userId) station.class = { 'station-blue': true }
  147. if (station.type == 'official') _this.stations.official.push(station);
  148. else _this.stations.community.push(station);
  149. });
  150. });
  151. _this.socket.emit("apis.joinRoom", 'home', () => {
  152. });
  153. });
  154. },
  155. isOwner: function(station) {
  156. let _this = this;
  157. return station.owner === _this.$parent.userId && station.privacy === 'public';
  158. }
  159. },
  160. components: { MainHeader, MainFooter, CreateCommunityStation }
  161. }
  162. </script>
  163. <style lang='scss'>
  164. * { box-sizing: border-box; }
  165. html {
  166. width: 100%;
  167. height: 100%;
  168. color: rgba(0, 0, 0, 0.87);
  169. body {
  170. width: 100%;
  171. height: 100%;
  172. margin: 0;
  173. padding: 0;
  174. }
  175. }
  176. @media only screen and (min-width: 1200px) {
  177. html { font-size: 15px; }
  178. }
  179. @media only screen and (min-width: 992px) {
  180. html { font-size: 14.5px; }
  181. }
  182. @media only screen and (min-width: 0) {
  183. html { font-size: 14px; }
  184. }
  185. .under-content {
  186. width: calc(100% - 40px);
  187. left: 20px;
  188. right: 20px;
  189. bottom: 10px;
  190. text-align: left;
  191. height: 25px;
  192. position: absolute;
  193. margin-bottom: 10px;
  194. line-height: 1;
  195. font-size: 24px;
  196. vertical-align: middle;
  197. * {
  198. z-index: 10;
  199. position: relative;
  200. }
  201. .right-icon {
  202. float: right;
  203. }
  204. }
  205. .users-count {
  206. font-size: 20px;
  207. position: relative;
  208. top: -4px;
  209. }
  210. .right {
  211. float: right;
  212. }
  213. .group { min-height: 64px; }
  214. .station-card {
  215. margin: 10px;
  216. cursor: pointer;
  217. height: 475px;
  218. transition: all ease-in-out 0.2s;
  219. .card-content {
  220. max-height: 159px;
  221. .content {
  222. word-wrap: break-word;
  223. overflow: hidden;
  224. text-overflow: ellipsis;
  225. display: -webkit-box;
  226. -webkit-box-orient: vertical;
  227. -webkit-line-clamp: 3;
  228. line-height: 20px;
  229. max-height: 60px;
  230. }
  231. }
  232. }
  233. .station-card:hover {
  234. box-shadow: 0 2px 3px rgba(10, 10, 10, 0.3), 0 0 10px rgba(10, 10, 10, 0.3);
  235. transition: all ease-in-out 0.2s;
  236. }
  237. /*.isPrivate {
  238. background-color: #F8BBD0;
  239. }
  240. .isMine {
  241. background-color: #29B6F6;
  242. }*/
  243. .community-button {
  244. cursor: pointer;
  245. transition: .25s ease color;
  246. font-size: 30px;
  247. color: #4a4a4a;
  248. }
  249. .community-button:hover { color: #03a9f4; }
  250. .station-privacy { text-transform: capitalize; }
  251. .label { display: flex; }
  252. .g-recaptcha {
  253. display: flex;
  254. justify-content: center;
  255. margin-top: 20px;
  256. }
  257. .group {
  258. text-align: center;
  259. width: 100%;
  260. margin: 64px 0 0 0;
  261. .group-title {
  262. float: left;
  263. clear: none;
  264. width: 100%;
  265. height: 64px;
  266. line-height: 48px;
  267. text-align: center;
  268. font-size: 48px;
  269. margin-bottom: 25px;
  270. }
  271. }
  272. .group .card {
  273. display: inline-flex;
  274. flex-direction: column;
  275. overflow: hidden;
  276. .content {
  277. text-align: left;
  278. word-wrap: break-word;
  279. }
  280. .media {
  281. display: flex;
  282. align-items: center;
  283. .station-status { line-height: 13px; }
  284. h5 { margin: 0; }
  285. }
  286. }
  287. .displayName {
  288. word-wrap: break-word;
  289. width: 80%;
  290. word-wrap: break-word;
  291. overflow: hidden;
  292. text-overflow: ellipsis;
  293. display: -webkit-box;
  294. -webkit-box-orient: vertical;
  295. -webkit-line-clamp: 1;
  296. line-height: 30px;
  297. max-height: 30px;
  298. }
  299. .nightMode {
  300. background-color: rgb(51, 51, 51);
  301. color: #e6e6e6;
  302. .community-button {
  303. cursor: pointer;
  304. transition: .25s ease color;
  305. font-size: 30px;
  306. color: #e6e6e6;
  307. }
  308. .community-button:hover { color: #03a9f4; }
  309. .station-card {
  310. margin: 10px;
  311. cursor: pointer;
  312. height: 475px;
  313. background-color: rgb(51, 51, 51);
  314. color: #e6e6e6;
  315. .card-content {
  316. max-height: 159px;
  317. color: #e6e6e6;
  318. .content {
  319. word-wrap: break-word;
  320. overflow: hidden;
  321. text-overflow: ellipsis;
  322. display: -webkit-box;
  323. -webkit-box-orient: vertical;
  324. -webkit-line-clamp: 3;
  325. line-height: 20px;
  326. max-height: 60px;
  327. color: #e6e6e6;
  328. }
  329. }
  330. }
  331. .station-card:hover {
  332. box-shadow: 0 2px 3px rgba(10, 10, 10, 0.3), 0 0 10px rgba(10, 10, 10, 0.3);
  333. }
  334. .isPrivate {
  335. background-color: #d01657;
  336. }
  337. .isMine {
  338. background-color: #0777ab;
  339. }
  340. }
  341. </style>