Home.vue 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
  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: '/' + station.name }" @click="this.$dispatch('joinStation', station._id)">
  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 }} - {{station.userCount}}</h5>
  16. </div>
  17. <div class="media-right">
  18. <div v-if="station.privacy !== 'public'" title="This station is not visible to other users." class="station-status">
  19. <i class='material-icons'>lock</i>
  20. </div>
  21. </div>
  22. </div>
  23. <div class="content">
  24. {{ station.description }}
  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)">
  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 }} - {{station.userCount}}</h5>
  46. </div>
  47. <div class="media-right">
  48. <div v-if="station.privacy !== 'public'" title="This station is not visible to other users." class="station-status">
  49. <i class='material-icons'>lock</i>
  50. </div>
  51. <div v-if="isOwner(station)" title="This is your station." class="station-status">
  52. <i class='material-icons'>home</i>
  53. </div>
  54. </div>
  55. </div>
  56. <div class="content">
  57. {{ station.description }}
  58. </div>
  59. </div>
  60. <a @click="this.$dispatch('joinStation', station._id)" href='#' class='absolute-a' v-link="{ path: '/community/' + station.name }"></a>
  61. </div>
  62. </div>
  63. <main-footer></main-footer>
  64. </div>
  65. <create-community-station v-if='modals.createCommunityStation'></create-community-station>
  66. </template>
  67. <script>
  68. import MainHeader from '../MainHeader.vue';
  69. import MainFooter from '../MainFooter.vue';
  70. import CreateCommunityStation from '../Modals/CreateCommunityStation.vue';
  71. import auth from '../../auth';
  72. import io from '../../io';
  73. export default {
  74. data() {
  75. return {
  76. recaptcha: {
  77. key: ''
  78. },
  79. stations: {
  80. official: [],
  81. community: []
  82. },
  83. modals: {
  84. createCommunityStation: false
  85. }
  86. }
  87. },
  88. ready() {
  89. let _this = this;
  90. auth.getStatus((authenticated, role, username, userId) => {
  91. io.getSocket((socket) => {
  92. _this.socket = socket;
  93. if (_this.socket.connected) _this.init();
  94. io.onConnect(() => {
  95. _this.init();
  96. });
  97. _this.socket.on('event:stations.created', station => {
  98. if (!station.currentSong) station.currentSong = { thumbnail: '/assets/notes-transparent.png' };
  99. if (station.currentSong && !station.currentSong.thumbnail) station.currentSong.thumbnail = "/assets/notes-transparent.png";
  100. _this.stations[station.type].push(station);
  101. });
  102. _this.socket.on('event:userCount.updated', (stationId, userCount) => {
  103. _this.stations.official.forEach((station) => {
  104. if (station._id === stationId) {
  105. station.userCount = userCount;
  106. }
  107. });
  108. _this.stations.community.forEach((station) => {
  109. if (station._id === stationId) {
  110. station.userCount = userCount;
  111. }
  112. });
  113. });
  114. _this.socket.on('event:station.nextSong', (stationId, newSong) => {
  115. _this.stations.official.forEach((station) => {
  116. if (station._id === stationId) {
  117. if (!newSong) newSong = { thumbnail: '/assets/notes-transparent.png' };
  118. if (newSong && !newSong.thumbnail) newSong.thumbnail = "/assets/notes-transparent.png";
  119. station.currentSong = newSong;
  120. }
  121. });
  122. _this.stations.community.forEach((station) => {
  123. if (station._id === stationId) {
  124. if (!newSong) newSong = { thumbnail: '/assets/notes-transparent.png' };
  125. if (newSong && !newSong.thumbnail) newSong.thumbnail = "/assets/notes-transparent.png";
  126. station.currentSong = newSong;
  127. }
  128. });
  129. });
  130. });
  131. });
  132. },
  133. methods: {
  134. toggleModal: function (type) {
  135. this.$dispatch('toggleModal', type);
  136. },
  137. init: function() {
  138. let _this = this;
  139. auth.getStatus((authenticated, role, username, userId) => {
  140. _this.socket.emit('stations.index', data => {
  141. _this.stations.community = [];
  142. _this.stations.official = [];
  143. if (data.status === "success") data.stations.forEach(station => {
  144. if (!station.currentSong) station.currentSong = { thumbnail: '/assets/notes-transparent.png' };
  145. if (station.currentSong && !station.currentSong.thumbnail) station.currentSong.thumbnail = "/assets/notes-transparent.png";
  146. if (station.privacy !== 'public') station.class = { 'station-red': true }
  147. else if (station.type === 'community' && station.owner === userId) station.class = { 'station-blue': true }
  148. if (station.type == 'official') _this.stations.official.push(station);
  149. else _this.stations.community.push(station);
  150. });
  151. });
  152. _this.socket.emit("apis.joinRoom", 'home', () => {
  153. });
  154. });
  155. },
  156. isOwner: function(station) {
  157. let _this = this;
  158. return station.owner === _this.$parent.userId && station.privacy === 'public';
  159. }
  160. },
  161. components: { MainHeader, MainFooter, CreateCommunityStation }
  162. }
  163. </script>
  164. <style lang='scss'>
  165. @import 'theme.scss';
  166. * { box-sizing: border-box; }
  167. html {
  168. width: 100%;
  169. height: 100%;
  170. color: rgba(0, 0, 0, 0.87);
  171. body {
  172. width: 100%;
  173. height: 100%;
  174. margin: 0;
  175. padding: 0;
  176. }
  177. }
  178. @media only screen and (min-width: 1200px) {
  179. html { font-size: 15px; }
  180. }
  181. @media only screen and (min-width: 992px) {
  182. html { font-size: 14.5px; }
  183. }
  184. @media only screen and (min-width: 0) {
  185. html { font-size: 14px; }
  186. }
  187. .group { min-height: 64px; }
  188. .station-card {
  189. margin: 10px;
  190. cursor: pointer;
  191. .card-content {
  192. max-height: 159px;
  193. }
  194. }
  195. .community-button {
  196. cursor: pointer;
  197. transition: .25s ease color;
  198. font-size: 30px;
  199. color: black;
  200. }
  201. .community-button:hover { color: #03a9f4; }
  202. .station-privacy { text-transform: capitalize; }
  203. .label { display: flex; }
  204. .g-recaptcha {
  205. display: flex;
  206. justify-content: center;
  207. margin-top: 20px;
  208. }
  209. .group {
  210. text-align: center;
  211. width: 100%;
  212. margin: 64px 0 0 0;
  213. .group-title {
  214. float: left;
  215. clear: none;
  216. width: 100%;
  217. height: 64px;
  218. line-height: 48px;
  219. text-align: center;
  220. font-size: 48px;
  221. margin-bottom: 25px;
  222. }
  223. }
  224. .group .card {
  225. display: inline-flex;
  226. flex-direction: column;
  227. overflow: hidden;
  228. .content {
  229. text-align: left;
  230. word-wrap: break-word;
  231. }
  232. .media {
  233. display: flex;
  234. align-items: center;
  235. .station-status { line-height: 13px; }
  236. h5 { margin: 0; }
  237. }
  238. }
  239. .displayName {
  240. word-wrap: break-word;
  241. width: 80%;
  242. }
  243. </style>