Station.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661
  1. <template>
  2. <station-header></station-header>
  3. <playlist-sidebar v-if='sidebars.playlist'></playlist-sidebar>
  4. <div class="station">
  5. <div class="columns is-mobile">
  6. <div class="column is-8-desktop is-offset-2-desktop is-12-mobile">
  7. <div class="video-container">
  8. <div id="player"></div>
  9. <div class="seeker-bar-container white" id="preview-progress">
  10. <div class="seeker-bar light-blue" style="width: 60.9869%;"></div>
  11. </div>
  12. </div>
  13. </div>
  14. </div>
  15. <div class="columns is-mobile">
  16. <div class="column is-8-desktop is-offset-2-desktop is-12-mobile">
  17. <!--<button v-if="paused" @click="unpauseStation()">Unpause</button>-->
  18. <!--<button v-if="!paused" @click="pauseStation()">Pause</button>-->
  19. <div class="columns is-mobile">
  20. <div class="column is-8-desktop is-12-mobile">
  21. <h4 id="time-display">{{timeElapsed}} / {{formatTime(currentSong.duration)}}</h4>
  22. <h3>{{currentSong.title}}</h3>
  23. <h4 class="thin" style="margin-left: 0">{{currentSong.artists}}</h4>
  24. <div class="columns is-mobile">
  25. <form style="margin-top: 12px; margin-bottom: 0;" action="#" class="column is-7-desktop is-4-mobile">
  26. <p style="margin-top: 0; position: relative;">
  27. <input type="range" id="volumeSlider" min="0" max="100" class="active" v-on:change="changeVolume()" v-on:input="changeVolume()">
  28. </p>
  29. </form>
  30. <div class="column is-8-mobile is-5-desktop" style="float: right;">
  31. <ul id="ratings" v-if="currentSong.likes !== -1 && currentSong.dislikes !== -1">
  32. <li id="like" class="right" @click="toggleLike()">
  33. <span class="flow-text">{{currentSong.likes}} </span>
  34. <i id="thumbs_up" class="material-icons grey-text" v-bind:class="{liked: liked}">thumb_up</i>
  35. </li>
  36. <li style="margin-right: 10px;" id="dislike" class="right" @click="toggleDislike()">
  37. <span class="flow-text">{{currentSong.dislikes}} </span>
  38. <i id="thumbs_down" class="material-icons grey-text" v-bind:class="{disliked: disliked}">thumb_down</i>
  39. </li>
  40. </ul>
  41. </div>
  42. </div>
  43. </div>
  44. <div class="column is-4-desktop is-12-mobile">
  45. <img class="image" id="song-thumbnail" style="margin-top: 10px !important" :src="currentSong.thumbnail" alt="Song Thumbnail" />
  46. </div>
  47. </div>
  48. </div>
  49. </div>
  50. </div>
  51. <div class="modal" :class="{ 'is-active': isActive }">
  52. <div class="modal-background"></div>
  53. <div class="modal-card">
  54. <header class="modal-card-head">
  55. <p class="modal-card-title">Add Songs to Station</p>
  56. <button class="delete" @click="toggleModal()" ></button>
  57. </header>
  58. <section class="modal-card-body">
  59. <div class="control is-grouped">
  60. <p class="control is-expanded">
  61. <input class="input" type="text" placeholder="YouTube Query" v-model="querySearch">
  62. </p>
  63. <p class="control">
  64. <a class="button is-info" @click="submitQuery()">
  65. Search
  66. </a>
  67. </p>
  68. </div>
  69. <table class="table">
  70. <tbody>
  71. <tr v-for="result in queryResults">
  72. <td>
  73. <img :src="result.thumbnail" />
  74. </td>
  75. <td>{{ result.title }}</td>
  76. <td>
  77. <a class="button is-success" @click="addSongToQueue(result.id)">
  78. Add
  79. </a>
  80. </td>
  81. </tr>
  82. </tbody>
  83. </table>
  84. </section>
  85. </div>
  86. </div>
  87. </template>
  88. <script>
  89. import { Toast } from 'vue-roaster';
  90. import PlaylistSidebar from '../Sidebars/Playlist.vue';
  91. import StationHeader from './StationHeader.vue';
  92. export default {
  93. data() {
  94. return {
  95. isActive: false,
  96. playerReady: false,
  97. currentSong: {},
  98. player: undefined,
  99. timePaused: 0,
  100. paused: false,
  101. timeElapsed: "0:00",
  102. interval: 0,
  103. querySearch: "",
  104. queryResults: [],
  105. queue: [],
  106. liked: false,
  107. disliked: false,
  108. sidebars: {
  109. playlist: true
  110. }
  111. }
  112. },
  113. methods: {
  114. toggleModal: function() {
  115. this.isActive = !this.isActive;
  116. },
  117. youtubeReady: function() {
  118. let local = this;
  119. local.player = new YT.Player("player", {
  120. height: 270,
  121. width: 480,
  122. videoId: local.currentSong._id,
  123. playerVars: { controls: 0, iv_load_policy: 3, rel: 0, showinfo: 0 },
  124. events: {
  125. 'onReady': function(event) {
  126. local.playerReady = true;
  127. let volume = parseInt(localStorage.getItem("volume"));
  128. volume = (typeof volume === "number") ? volume : 20;
  129. local.player.setVolume(volume);
  130. if (volume > 0) local.player.unMute();
  131. local.playVideo();
  132. },
  133. 'onStateChange': function(event) {
  134. if (event.data === 1 && local.videoLoading === true) {
  135. local.videoLoading = false;
  136. local.player.seekTo(local.getTimeElapsed() / 1000, true);
  137. if (local.paused) local.player.pauseVideo();
  138. }
  139. }
  140. }
  141. });
  142. },
  143. getTimeElapsed: function() {
  144. let local = this;
  145. if (local.currentSong) {
  146. return Date.now() - local.startedAt - local.timePaused;
  147. } else {
  148. return 0;
  149. }
  150. },
  151. playVideo: function() {
  152. let local = this;
  153. if (local.playerReady) {
  154. local.videoLoading = true;
  155. local.player.loadVideoById(local.currentSong._id);
  156. if (local.currentSong.artists) local.currentSong.artists = local.currentSong.artists.join(", ");
  157. if (local.interval !== 0) clearInterval(local.interval);
  158. local.interval = setInterval(function () {
  159. local.resizeSeekerbar();
  160. local.calculateTimeElapsed();
  161. }, 250);
  162. }
  163. },
  164. resizeSeekerbar: function() {
  165. let local = this;
  166. if (!local.paused) {
  167. $(".seeker-bar").width(parseInt(((local.getTimeElapsed() / 1000) / local.currentSong.duration * 100)) + "%");
  168. }
  169. },
  170. formatTime: function(duration) {
  171. let d = moment.duration(duration, 'seconds');
  172. return ((d.hours() > 0) ? (d.hours() < 10 ? ("0" + d.hours() + ":") : (d.hours() + ":")) : "") + (d.minutes() + ":") + (d.seconds() < 10 ? ("0" + d.seconds()) : d.seconds());
  173. },
  174. calculateTimeElapsed: function() {
  175. let local = this;
  176. let currentTime = Date.now();
  177. if (local.currentTime !== undefined && local.paused) {
  178. local.timePaused += (Date.now() - local.currentTime);
  179. local.currentTime = undefined;
  180. }
  181. let duration = (Date.now() - local.startedAt - local.timePaused) / 1000;
  182. let songDuration = local.currentSong.duration;
  183. if (songDuration <= duration) local.player.pauseVideo();
  184. if ((!local.paused) && duration <= songDuration) local.timeElapsed = local.formatTime(duration);
  185. },
  186. changeVolume: function() {
  187. let local = this;
  188. let volume = $("#volumeSlider").val();
  189. localStorage.setItem("volume", volume);
  190. if (local.playerReady) {
  191. local.player.setVolume(volume);
  192. if (volume > 0) local.player.unMute();
  193. }
  194. },
  195. resumeLocalStation: function() {
  196. this.paused = false;
  197. if (this.playerReady) {
  198. this.player.seekTo(this.getTimeElapsed() / 1000);
  199. this.player.playVideo();
  200. }
  201. },
  202. pauseLocalStation: function() {
  203. this.paused = true;
  204. if (this.playerReady) this.player.pauseVideo();
  205. },
  206. skipStation: function () {
  207. let _this = this;
  208. _this.socket.emit('stations.forceSkip', _this.stationId, data => {
  209. if (data.status !== 'success') {
  210. Toast.methods.addToast(`Error: ${data.message}`, 8000);
  211. } else {
  212. Toast.methods.addToast('Successfully skipped the station\'s current song.', 4000);
  213. }
  214. });
  215. },
  216. resumeStation: function () {
  217. let _this = this;
  218. _this.socket.emit('stations.resume', _this.stationId, data => {
  219. if (data.status !== 'success') {
  220. Toast.methods.addToast(`Error: ${data.message}`, 8000);
  221. } else {
  222. Toast.methods.addToast('Successfully resumed the station.', 4000);
  223. }
  224. });
  225. },
  226. pauseStation: function () {
  227. let _this = this;
  228. _this.socket.emit('stations.pause', _this.stationId, data => {
  229. if (data.status !== 'success') {
  230. Toast.methods.addToast(`Error: ${data.message}`, 8000);
  231. } else {
  232. Toast.methods.addToast('Successfully paused the station.', 4000);
  233. }
  234. });
  235. },
  236. addSongToQueue: function(songId) {
  237. let local = this;
  238. local.socket.emit('queueSongs.add', songId, data => {
  239. if (data.status !== 'success') {
  240. Toast.methods.addToast(`Error: ${data.message}`, 8000);
  241. } else {
  242. Toast.methods.addToast(`${data.message}`, 4000);
  243. }
  244. });
  245. },
  246. submitQuery: function() {
  247. let local = this;
  248. local.socket.emit('apis.searchYoutube', local.querySearch, results => {
  249. results = results.data;
  250. local.queryResults = [];
  251. for (let i = 0; i < results.items.length; i++) {
  252. local.queryResults.push({
  253. id: results.items[i].id.videoId,
  254. url: `https://www.youtube.com/watch?v=${this.id}`,
  255. title: results.items[i].snippet.title,
  256. thumbnail: results.items[i].snippet.thumbnails.default.url
  257. });
  258. }
  259. });
  260. },
  261. toggleLike: function() {
  262. let _this = this;
  263. if (_this.liked) _this.socket.emit('songs.unlike', _this.currentSong._id, data => {
  264. if (data.status !== 'success') {
  265. Toast.methods.addToast(`Error: ${data.message}`, 8000);
  266. }
  267. }); else _this.socket.emit('songs.like', _this.currentSong._id, data => {
  268. if (data.status !== 'success') {
  269. Toast.methods.addToast(`Error: ${data.message}`, 8000);
  270. }
  271. });
  272. },
  273. toggleDislike: function() {
  274. let _this = this;
  275. if (_this.disliked) return _this.socket.emit('songs.undislike', _this.currentSong._id, data => {
  276. if (data.status !== 'success') {
  277. Toast.methods.addToast(`Error: ${data.message}`, 8000);
  278. }
  279. });
  280. _this.socket.emit('songs.dislike', _this.currentSong._id, data => {
  281. if (data.status !== 'success') {
  282. Toast.methods.addToast(`Error: ${data.message}`, 8000);
  283. }
  284. });
  285. }
  286. },
  287. ready: function() {
  288. let _this = this;
  289. _this.stationId = _this.$route.params.id;
  290. _this.interval = 0;
  291. _this.socket = _this.$parent.socket;
  292. _this.socket.emit('stations.join', _this.stationId, data => {
  293. if (data.status === "success") {
  294. _this.currentSong = data.currentSong;
  295. _this.startedAt = data.startedAt;
  296. _this.paused = data.paused;
  297. _this.timePaused = data.timePaused;
  298. _this.youtubeReady();
  299. _this.playVideo();
  300. _this.socket.emit('songs.getOwnSongRatings', data.currentSong._id, data => {
  301. if (_this.currentSong._id === data.songId) {
  302. _this.liked = data.liked;
  303. _this.disliked = data.disliked;
  304. }
  305. });
  306. } else {
  307. //TODO Handle error
  308. }
  309. });
  310. _this.socket.on('event:songs.next', data => {
  311. _this.currentSong = data.currentSong;
  312. _this.startedAt = data.startedAt;
  313. _this.paused = data.paused;
  314. _this.timePaused = data.timePaused;
  315. _this.playVideo();
  316. _this.socket.emit('songs.getOwnSongRatings', data.currentSong._id, (data) => {
  317. if (_this.currentSong._id === data.songId) {
  318. _this.liked = data.liked;
  319. _this.disliked = data.disliked;
  320. }
  321. });
  322. });
  323. _this.socket.on('event:stations.pause', data => {
  324. _this.pauseLocalStation();
  325. });
  326. _this.socket.on('event:stations.resume', data => {
  327. _this.timePaused = data.timePaused;
  328. _this.resumeLocalStation();
  329. });
  330. _this.socket.on('event:song.like', data => {
  331. if (data.songId === _this.currentSong._id) {
  332. _this.currentSong.likes++;
  333. if (data.undisliked) _this.currentSong.dislikes--;
  334. }
  335. });
  336. _this.socket.on('event:song.dislike', data => {
  337. if (data.songId === _this.currentSong._id) {
  338. _this.currentSong.dislikes++;
  339. if (data.unliked) _this.currentSong.likes--;
  340. }
  341. });
  342. _this.socket.on('event:song.unlike', data => {
  343. if (data.songId === _this.currentSong._id) _this.currentSong.likes--;
  344. });
  345. _this.socket.on('event:song.undislike', data => {
  346. if (data.songId === _this.currentSong._id) _this.currentSong.dislikes--;
  347. });
  348. _this.socket.on('event:song.newRatings', data => {
  349. console.log(data, 1234);
  350. if (data.songId === _this.currentSong._id) {
  351. _this.liked = data.liked;
  352. _this.disliked = data.disliked;
  353. }
  354. });
  355. let volume = parseInt(localStorage.getItem("volume"));
  356. volume = (typeof volume === "number") ? volume : 20;
  357. $("#volumeSlider").val(volume);
  358. },
  359. components: { StationHeader, PlaylistSidebar }
  360. }
  361. </script>
  362. <style lang="scss">
  363. .slideout {
  364. top: 50px;
  365. height: 100%;
  366. position: fixed;
  367. right: 0;
  368. width: 350px;
  369. background-color: white;
  370. box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  371. .slideout-header {
  372. text-align: center;
  373. background-color: rgb(3, 169, 244) !important;
  374. margin: 0;
  375. padding-top: 5px;
  376. padding-bottom: 7px;
  377. color: white;
  378. }
  379. .slideout-content {
  380. height: 100%;
  381. }
  382. }
  383. .modal-large {
  384. width: 75%;
  385. }
  386. .station {
  387. flex: 1 0 auto;
  388. padding-top: 0.5vw;
  389. transition: all 0.1s;
  390. margin: 0 auto;
  391. max-width: 1280px;
  392. width: 90%;
  393. @media only screen and (min-width: 993px) {
  394. width: 70%;
  395. }
  396. @media only screen and (min-width: 601px) {
  397. width: 85%;
  398. }
  399. input[type=range] {
  400. -webkit-appearance: none;
  401. width: 100%;
  402. margin: 7.3px 0;
  403. }
  404. input[type=range]:focus {
  405. outline: none;
  406. }
  407. input[type=range]::-webkit-slider-runnable-track {
  408. width: 100%;
  409. height: 5.2px;
  410. cursor: pointer;
  411. box-shadow: 0;
  412. background: #c2c0c2;
  413. border-radius: 0;
  414. border: 0;
  415. }
  416. input[type=range]::-webkit-slider-thumb {
  417. box-shadow: 0;
  418. border: 0;
  419. height: 19px;
  420. width: 19px;
  421. border-radius: 15px;
  422. background: #03a9f4;
  423. cursor: pointer;
  424. -webkit-appearance: none;
  425. margin-top: -6.5px;
  426. }
  427. input[type=range]::-moz-range-track {
  428. width: 100%;
  429. height: 5.2px;
  430. cursor: pointer;
  431. box-shadow: 0;
  432. background: #c2c0c2;
  433. border-radius: 0;
  434. border: 0;
  435. }
  436. input[type=range]::-moz-range-thumb {
  437. box-shadow: 0;
  438. border: 0;
  439. height: 19px;
  440. width: 19px;
  441. border-radius: 15px;
  442. background: #03a9f4;
  443. cursor: pointer;
  444. -webkit-appearance: none;
  445. margin-top: -6.5px;
  446. }
  447. input[type=range]::-ms-track {
  448. width: 100%;
  449. height: 5.2px;
  450. cursor: pointer;
  451. box-shadow: 0;
  452. background: #c2c0c2;
  453. border-radius: 1.3px;
  454. }
  455. input[type=range]::-ms-fill-lower {
  456. background: #c2c0c2;
  457. border: 0;
  458. border-radius: 0;
  459. box-shadow: 0;
  460. }
  461. input[type=range]::-ms-fill-upper {
  462. background: #c2c0c2;
  463. border: 0;
  464. border-radius: 0;
  465. box-shadow: 0;
  466. }
  467. input[type=range]::-ms-thumb {
  468. box-shadow: 0;
  469. border: 0;
  470. height: 15px;
  471. width: 15px;
  472. border-radius: 15px;
  473. background: #03a9f4;
  474. cursor: pointer;
  475. -webkit-appearance: none;
  476. margin-top: 1.5px;
  477. }
  478. .video-container {
  479. position: relative;
  480. padding-bottom: 56.25%;
  481. height: 0;
  482. overflow: hidden;
  483. iframe {
  484. position: absolute;
  485. top: 0;
  486. left: 0;
  487. width: 100%;
  488. height: 100%;
  489. pointer-events: none;
  490. }
  491. }
  492. .video-col {
  493. padding-right: 0.75rem;
  494. padding-left: 0.75rem;
  495. }
  496. }
  497. .room-title {
  498. left: 50%;
  499. -webkit-transform: translateX(-50%);
  500. transform: translateX(-50%);
  501. font-size: 2.1em;
  502. }
  503. #ratings {
  504. span {
  505. font-size: 1.68rem;
  506. }
  507. i {
  508. color: #9e9e9e !important;
  509. cursor: pointer;
  510. transition: 0.1s color;
  511. }
  512. }
  513. #time-display {
  514. margin-top: 30px;
  515. float: right;
  516. }
  517. #thumbs_up:hover, #thumbs_up.liked {
  518. color: #87D37C !important;
  519. }
  520. #thumbs_down:hover, #thumbs_down.disliked {
  521. color: #EC644B !important;
  522. }
  523. #song-thumbnail {
  524. max-width: 100%;
  525. width: 85%;
  526. }
  527. .seeker-bar-container {
  528. position: relative;
  529. height: 5px;
  530. display: block;
  531. width: 100%;
  532. overflow: hidden;
  533. }
  534. .seeker-bar {
  535. top: 0;
  536. left: 0;
  537. bottom: 0;
  538. position: absolute;
  539. }
  540. ul {
  541. list-style: none;
  542. margin: 0;
  543. display: block;
  544. }
  545. h1, h2, h3, h4, h5, h6 {
  546. font-weight: 400;
  547. line-height: 1.1;
  548. }
  549. h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  550. font-weight: inherit;
  551. }
  552. h1 {
  553. font-size: 4.2rem;
  554. line-height: 110%;
  555. margin: 2.1rem 0 1.68rem 0;
  556. }
  557. h2 {
  558. font-size: 3.56rem;
  559. line-height: 110%;
  560. margin: 1.78rem 0 1.424rem 0;
  561. }
  562. h3 {
  563. font-size: 2.92rem;
  564. line-height: 110%;
  565. margin: 1.46rem 0 1.168rem 0;
  566. }
  567. h4 {
  568. font-size: 2.28rem;
  569. line-height: 110%;
  570. margin: 1.14rem 0 0.912rem 0;
  571. }
  572. h5 {
  573. font-size: 1.64rem;
  574. line-height: 110%;
  575. margin: 0.82rem 0 0.656rem 0;
  576. }
  577. h6 {
  578. font-size: 1rem;
  579. line-height: 110%;
  580. margin: 0.5rem 0 0.4rem 0;
  581. }
  582. .thin {
  583. font-weight: 200;
  584. }
  585. .left {
  586. float: left !important;
  587. }
  588. .right {
  589. float: right !important;
  590. }
  591. .light-blue {
  592. background-color: #03a9f4 !important;
  593. }
  594. .white {
  595. background-color: #FFFFFF !important;
  596. }
  597. .btn-search {
  598. font-size: 14px;
  599. }
  600. </style>