Home.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. <template>
  2. <div class="app">
  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: '/official/' + station._id }" @click="this.$dispatch('joinStation', station._id)" :class="station.class">
  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 class="media-content"></div>
  18. <div class="media-right">
  19. <div>{{ station.userCount }}&nbsp;&nbsp;<i class="material-icons">perm_identity</i></div>
  20. </div>
  21. </div>
  22. <div class="content">
  23. {{ station.description }}
  24. </div>
  25. </div>
  26. <a @click="this.$dispatch('joinStation', station._id)" href='#' class='absolute-a'></a>
  27. </div>
  28. </div>
  29. <div class="group">
  30. <div class="group-title">Community Stations <a @click="toggleModal('createCommunityStation')" v-if="$parent.loggedIn" href='#'><i class="material-icons ccs-button">add_circle_outline</i></a></div>
  31. <div class="card station-card" v-for="station in stations.community" v-link="{ path: '/community/' + station._id }" @click="this.$dispatch('joinStation', station._id)" :class="station.class">
  32. <div class="card-image">
  33. <figure class="image is-square">
  34. <img :src="station.currentSong.thumbnail" onerror="this.src='/assets/notes-transparent.png'" />
  35. </figure>
  36. </div>
  37. <div class="card-content">
  38. <div class="media">
  39. <div class="media-left displayName">
  40. <h5>{{ station.displayName }}</h5>
  41. </div>
  42. <div class="media-content"></div>
  43. <div class="media-right">
  44. <div>{{ station.userCount }}&nbsp;&nbsp;<i class="material-icons">perm_identity</i></div>
  45. </div>
  46. </div>
  47. <div class="content">
  48. {{ station.description }}
  49. </div>
  50. </div>
  51. <a @click="this.$dispatch('joinStation', station._id)" href='#' class='absolute-a'></a>
  52. </div>
  53. </div>
  54. <main-footer></main-footer>
  55. </div>
  56. </template>
  57. <script>
  58. import MainHeader from '../MainHeader.vue';
  59. import MainFooter from '../MainFooter.vue';
  60. import auth from '../../auth';
  61. import io from '../../io';
  62. export default {
  63. data() {
  64. return {
  65. isRegisterActive: false,
  66. isLoginActive: false,
  67. recaptcha: {
  68. key: ''
  69. },
  70. stations: {
  71. official: [],
  72. community: []
  73. }
  74. }
  75. },
  76. ready() {
  77. let _this = this;
  78. auth.getStatus((authenticated, role, username, userId) => {
  79. io.getSocket((socket) => {
  80. _this.socket = socket;
  81. if (_this.socket.connected) _this.init();
  82. io.onConnect(() => {
  83. _this.init();
  84. });
  85. _this.socket.on('event:stations.created', station => {
  86. if (!station.currentSong) station.currentSong = { thumbnail: '/assets/notes-transparent.png' };
  87. if (station.privacy !== 'public') {
  88. station.class = {'station-red': true}
  89. } else if (station.type === 'community') {
  90. if (station.owner === userId) {
  91. station.class = {'station-blue': true}
  92. }
  93. }
  94. _this.stations[station.type].push(station);
  95. });
  96. });
  97. });
  98. },
  99. methods: {
  100. toggleModal: function (type) {
  101. this.$dispatch('toggleModal', type);
  102. },
  103. init: function() {
  104. let _this = this;
  105. auth.getStatus((authenticated, role, username, userId) => {
  106. _this.socket.emit('stations.index', data => {
  107. _this.stations.community = [];
  108. _this.stations.official = [];
  109. if (data.status === "success") data.stations.forEach(station => {
  110. if (!station.currentSong) station.currentSong = { thumbnail: '/assets/notes-transparent.png' };
  111. if (station.privacy !== 'public') {
  112. station.class = { 'station-red': true }
  113. } else if (station.type === 'community') {
  114. if (station.owner === userId) {
  115. station.class = { 'station-blue': true }
  116. }
  117. }
  118. if (station.type == 'official') _this.stations.official.push(station);
  119. else _this.stations.community.push(station);
  120. });
  121. });
  122. _this.socket.emit("apis.joinRoom", 'home', () => {
  123. });
  124. });
  125. }
  126. },
  127. components: { MainHeader, MainFooter }
  128. }
  129. </script>
  130. <style lang='scss'>
  131. @import 'theme.scss';
  132. * { box-sizing: border-box; }
  133. html {
  134. width: 100%;
  135. height: 100%;
  136. color: rgba(0, 0, 0, 0.87);
  137. body {
  138. width: 100%;
  139. height: 100%;
  140. margin: 0;
  141. padding: 0;
  142. }
  143. }
  144. @media only screen and (min-width: 1200px) {
  145. html {
  146. font-size: 15px;
  147. }
  148. }
  149. @media only screen and (min-width: 992px) {
  150. html {
  151. font-size: 14.5px;
  152. }
  153. }
  154. @media only screen and (min-width: 0) {
  155. html {
  156. font-size: 14px;
  157. }
  158. }
  159. .group {
  160. min-height: 64px;
  161. }
  162. .station-card {
  163. margin: 10px;
  164. cursor: pointer;
  165. }
  166. .ccs-button {
  167. cursor: pointer;
  168. transition: .25s ease color;
  169. font-size: 30px;
  170. color: black;
  171. }
  172. .ccs-button:hover {
  173. color: #03a9f4;
  174. }
  175. .station-blue {
  176. outline: 5px solid #03a9f4;
  177. }
  178. .station-red {
  179. outline: 5px solid #f45703;
  180. }
  181. .label {
  182. display: flex;
  183. }
  184. .g-recaptcha {
  185. display: flex;
  186. justify-content: center;
  187. margin-top: 20px;
  188. }
  189. .group {
  190. text-align: center;
  191. width: 100%;
  192. margin: 64px 0 0 0;
  193. .group-title {
  194. float: left;
  195. clear: none;
  196. width: 100%;
  197. height: 64px;
  198. line-height: 48px;
  199. text-align: center;
  200. font-size: 48px;
  201. margin-bottom: 25px;
  202. }
  203. }
  204. .group .card {
  205. display: inline-block;
  206. height: 415px;
  207. overflow: hidden;
  208. }
  209. .displayName {
  210. word-wrap: break-word;
  211. width: 80%;
  212. }
  213. .content {
  214. word-wrap: break-word;
  215. }
  216. </style>