index.vue 76 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243
  1. <script setup lang="ts">
  2. import {
  3. defineAsyncComponent,
  4. ref,
  5. computed,
  6. watch,
  7. onMounted,
  8. onBeforeUnmount
  9. } from "vue";
  10. import { useRoute, useRouter } from "vue-router";
  11. import Toast from "toasters";
  12. import { storeToRefs } from "pinia";
  13. import { ContentLoader } from "vue-content-loader";
  14. import canAutoPlay from "can-autoplay";
  15. import { useWebsocketsStore } from "@/stores/websockets";
  16. import { useStationStore } from "@/stores/station";
  17. import { useUserAuthStore } from "@/stores/userAuth";
  18. import { useUserPreferencesStore } from "@/stores/userPreferences";
  19. import { useModalsStore } from "@/stores/modals";
  20. import aw from "@/aw";
  21. import ms from "@/ms";
  22. import keyboardShortcuts from "@/keyboardShortcuts";
  23. import utils from "@/utils";
  24. const MainHeader = defineAsyncComponent(
  25. () => import("@/components/MainHeader.vue")
  26. );
  27. const MainFooter = defineAsyncComponent(
  28. () => import("@/components/MainFooter.vue")
  29. );
  30. const FloatingBox = defineAsyncComponent(
  31. () => import("@/components/FloatingBox.vue")
  32. );
  33. const StationInfoBox = defineAsyncComponent(
  34. () => import("@/components/StationInfoBox.vue")
  35. );
  36. const AddToPlaylistDropdown = defineAsyncComponent(
  37. () => import("@/components/AddToPlaylistDropdown.vue")
  38. );
  39. const SongItem = defineAsyncComponent(
  40. () => import("@/components/SongItem.vue")
  41. );
  42. const Z404 = defineAsyncComponent(() => import("@/pages/404.vue"));
  43. const StationSidebar = defineAsyncComponent(
  44. () => import("./Sidebar/index.vue")
  45. );
  46. const route = useRoute();
  47. const router = useRouter();
  48. const { socket } = useWebsocketsStore();
  49. const stationStore = useStationStore();
  50. const userAuthStore = useUserAuthStore();
  51. const userPreferencesStore = useUserPreferencesStore();
  52. // TODO this might need a different place, like onMounted
  53. const isApple = ref(
  54. navigator.platform.match(/iPhone|iPod|iPad/) ||
  55. navigator.vendor === "Apple Computer, Inc."
  56. );
  57. const loading = ref(true);
  58. const exists = ref(true);
  59. const playerReady = ref(false);
  60. const player = ref(undefined);
  61. const timePaused = ref(0);
  62. const muted = ref(false);
  63. const timeElapsed = ref("0:00");
  64. const timeBeforePause = ref(0);
  65. const systemDifference = ref(0);
  66. const attemptsToPlayVideo = ref(0);
  67. const canAutoplay = ref(true);
  68. const lastTimeRequestedIfCanAutoplay = ref(0);
  69. const seeking = ref(false);
  70. const playbackRate = ref(1);
  71. const volumeSliderValue = ref(0);
  72. const showPlaylistDropdown = ref(false);
  73. const seekerbarPercentage = ref(0);
  74. const frontendDevMode = ref("production");
  75. const activityWatchVideoDataInterval = ref(null);
  76. const activityWatchVideoLastStatus = ref("");
  77. const activityWatchVideoLastYouTubeId = ref("");
  78. const activityWatchVideoLastStartDuration = ref(0);
  79. const nextCurrentSong = ref(null);
  80. const mediaModalWatcher = ref(null);
  81. const beforeMediaModalLocalPausedLock = ref(false);
  82. const beforeMediaModalLocalPaused = ref(null);
  83. const persistentToastCheckerInterval = ref(null);
  84. const persistentToasts = ref([]);
  85. const mediasession = ref(false);
  86. const christmas = ref(false);
  87. const sitename = ref("Musare");
  88. // Experimental options
  89. const experimentalChangableListenModeEnabled = ref(false);
  90. const experimentalChangableListenMode = ref("listen_and_participate"); // Can be either listen_and_participate or participate
  91. // End experimental options
  92. // NEW
  93. const videoLoading = ref();
  94. const startedAt = ref();
  95. const pausedAt = ref();
  96. const stationIdentifier = ref();
  97. // ENDNEW
  98. const playerDebugBox = ref();
  99. const keyboardShortcutsHelper = ref();
  100. const modalsStore = useModalsStore();
  101. const { activeModals } = storeToRefs(modalsStore);
  102. // TODO fix this if it still has some use, as this is no longer accurate
  103. // const video = computed(() => store.state.modals.editSong);
  104. const { loggedIn, userId } = storeToRefs(userAuthStore);
  105. const { nightmode, autoSkipDisliked } = storeToRefs(userPreferencesStore);
  106. const {
  107. station,
  108. currentSong,
  109. nextSong,
  110. songsList,
  111. stationPaused,
  112. localPaused,
  113. noSong,
  114. autoRequest,
  115. autoRequestLock
  116. } = storeToRefs(stationStore);
  117. const skipVotesLoaded = computed(
  118. () =>
  119. !noSong.value &&
  120. Number.isInteger(currentSong.value.skipVotes) &&
  121. currentSong.value.skipVotes >= 0
  122. );
  123. const ratingsLoaded = computed(
  124. () =>
  125. !noSong.value &&
  126. Number.isInteger(currentSong.value.likes) &&
  127. Number.isInteger(currentSong.value.dislikes) &&
  128. currentSong.value.likes >= 0 &&
  129. currentSong.value.dislikes >= 0
  130. );
  131. const ownRatingsLoaded = computed(
  132. () =>
  133. !noSong.value &&
  134. typeof currentSong.value.liked === "boolean" &&
  135. typeof currentSong.value.disliked === "boolean"
  136. );
  137. const aModalIsOpen = computed(() => Object.keys(activeModals.value).length > 0);
  138. const currentUserQueueSongs = computed(
  139. () =>
  140. songsList.value.filter(
  141. queueSong => queueSong.requestedBy === userId.value
  142. ).length
  143. );
  144. const {
  145. joinStation,
  146. leaveStation,
  147. updateStation,
  148. updateUserCount,
  149. updateUsers,
  150. updateCurrentSong,
  151. updateNextSong,
  152. updateSongsList,
  153. repositionSongInList,
  154. updateStationPaused,
  155. updateLocalPaused,
  156. updateNoSong,
  157. updateIfStationIsFavorited,
  158. setAutofillPlaylists,
  159. setBlacklist,
  160. updateCurrentSongRatings,
  161. updateOwnCurrentSongRatings,
  162. updateCurrentSongSkipVotes,
  163. updateAutoRequestLock,
  164. hasPermission,
  165. addDj,
  166. removeDj,
  167. updatePermissions
  168. } = stationStore;
  169. // TODO fix this if it still has some use
  170. // const stopVideo = payload =>
  171. // store.dispatch("modals/editSong/stopVideo", payload);
  172. const updateMediaSessionData = song => {
  173. if (song) {
  174. ms.setMediaSessionData(
  175. 0,
  176. !localPaused.value && !stationPaused.value, // This should be improved later
  177. song.title,
  178. song.artists ? song.artists.join(", ") : null,
  179. null,
  180. song.thumbnail ||
  181. `https://img.youtube.com/vi/${song.youtubeId}/mqdefault.jpg`
  182. );
  183. } else ms.removeMediaSessionData(0);
  184. };
  185. const autoRequestSong = () => {
  186. if (
  187. !autoRequestLock.value &&
  188. songsList.value.length < 50 &&
  189. currentUserQueueSongs.value < station.value.requests.limit * 0.5 &&
  190. autoRequest.value.length > 0
  191. ) {
  192. const selectedPlaylist =
  193. autoRequest.value[
  194. Math.floor(Math.random() * autoRequest.value.length)
  195. ];
  196. if (selectedPlaylist._id && selectedPlaylist.songs.length > 0) {
  197. const selectedSong =
  198. selectedPlaylist.songs[
  199. Math.floor(Math.random() * selectedPlaylist.songs.length)
  200. ];
  201. if (selectedSong.youtubeId) {
  202. updateAutoRequestLock(true);
  203. socket.dispatch(
  204. "stations.addToQueue",
  205. station.value._id,
  206. selectedSong.youtubeId,
  207. data => {
  208. updateAutoRequestLock(false);
  209. if (data.status !== "success") {
  210. setTimeout(
  211. () => {
  212. autoRequestSong();
  213. },
  214. data.message ===
  215. "That song is already in the queue."
  216. ? 5000
  217. : 1000
  218. );
  219. }
  220. }
  221. );
  222. }
  223. }
  224. }
  225. };
  226. const dateCurrently = () => new Date().getTime() + systemDifference.value;
  227. const getTimeElapsed = () => {
  228. if (currentSong.value) {
  229. let localTimePaused = timePaused.value;
  230. if (stationPaused.value)
  231. localTimePaused += dateCurrently() - pausedAt.value;
  232. return dateCurrently() - startedAt.value - localTimePaused;
  233. }
  234. return 0;
  235. };
  236. const getTimeRemaining = () => {
  237. if (currentSong.value) {
  238. return currentSong.value.duration * 1000 - getTimeElapsed();
  239. }
  240. return 0;
  241. };
  242. const skipSong = () => {
  243. if (nextCurrentSong.value && nextCurrentSong.value.currentSong) {
  244. const _songsList = songsList.value.concat([]);
  245. if (
  246. _songsList.length > 0 &&
  247. _songsList[0].youtubeId ===
  248. nextCurrentSong.value.currentSong.youtubeId
  249. ) {
  250. _songsList.splice(0, 1);
  251. updateSongsList(_songsList);
  252. }
  253. // TODO fix
  254. // eslint-disable-next-line
  255. setCurrentSong(nextCurrentSong.value);
  256. } else {
  257. // TODO fix
  258. // eslint-disable-next-line
  259. setCurrentSong({
  260. currentSong: null,
  261. startedAt: 0,
  262. paused: stationPaused.value,
  263. timePaused: 0,
  264. pausedAt: 0
  265. });
  266. }
  267. };
  268. const setNextCurrentSong = (_nextCurrentSong, skipSkipCheck = false) => {
  269. nextCurrentSong.value = _nextCurrentSong;
  270. // If skipSkipCheck is true, it won't try to skip the song
  271. if (getTimeRemaining() <= 0 && !skipSkipCheck) {
  272. skipSong();
  273. }
  274. };
  275. const resizeSeekerbar = () => {
  276. seekerbarPercentage.value =
  277. (getTimeElapsed() / 1000 / currentSong.value.duration) * 100;
  278. };
  279. const calculateTimeElapsed = () => {
  280. if (experimentalChangableListenMode.value === "participate") return;
  281. if (
  282. playerReady.value &&
  283. !noSong.value &&
  284. currentSong.value &&
  285. player.value.getPlayerState() === -1
  286. ) {
  287. if (!canAutoplay.value) {
  288. if (Date.now() - lastTimeRequestedIfCanAutoplay.value > 2000) {
  289. lastTimeRequestedIfCanAutoplay.value = Date.now();
  290. canAutoPlay.video().then(({ result }) => {
  291. if (result) {
  292. attemptsToPlayVideo.value = 0;
  293. canAutoplay.value = true;
  294. } else {
  295. canAutoplay.value = false;
  296. }
  297. });
  298. }
  299. } else {
  300. player.value.playVideo();
  301. attemptsToPlayVideo.value += 1;
  302. }
  303. }
  304. if (
  305. !stationPaused.value &&
  306. !localPaused.value &&
  307. playerReady.value &&
  308. !isApple.value
  309. ) {
  310. const timeElapsed = getTimeElapsed();
  311. const currentPlayerTime =
  312. Math.max(
  313. player.value.getCurrentTime() - currentSong.value.skipDuration,
  314. 0
  315. ) * 1000;
  316. const difference = timeElapsed - currentPlayerTime;
  317. let _playbackRate = 1;
  318. if (difference < -2000) {
  319. if (!seeking.value) {
  320. seeking.value = true;
  321. player.value.seekTo(
  322. getTimeElapsed() / 1000 + currentSong.value.skipDuration
  323. );
  324. }
  325. } else if (difference < -200) {
  326. _playbackRate = 0.8;
  327. } else if (difference < -50) {
  328. _playbackRate = 0.9;
  329. } else if (difference < -25) {
  330. _playbackRate = 0.95;
  331. } else if (difference > 2000) {
  332. if (!seeking.value) {
  333. seeking.value = true;
  334. player.value.seekTo(
  335. getTimeElapsed() / 1000 + currentSong.value.skipDuration
  336. );
  337. }
  338. } else if (difference > 200) {
  339. _playbackRate = 1.2;
  340. } else if (difference > 50) {
  341. _playbackRate = 1.1;
  342. } else if (difference > 25) {
  343. _playbackRate = 1.05;
  344. } else if (player.value.getPlaybackRate !== 1.0) {
  345. player.value.setPlaybackRate(1.0);
  346. }
  347. if (playbackRate.value !== _playbackRate) {
  348. player.value.setPlaybackRate(_playbackRate);
  349. playbackRate.value = _playbackRate;
  350. }
  351. }
  352. let localTimePaused = timePaused.value;
  353. if (stationPaused.value)
  354. localTimePaused += dateCurrently() - pausedAt.value;
  355. const duration =
  356. (dateCurrently() - startedAt.value - localTimePaused) / 1000;
  357. const songDuration = currentSong.value.duration;
  358. if (playerReady.value && songDuration <= duration)
  359. player.value.pauseVideo();
  360. if (duration <= songDuration)
  361. timeElapsed.value =
  362. typeof duration === "number" ? utils.formatTime(duration) : "0";
  363. };
  364. const playVideo = () => {
  365. if (playerReady.value) {
  366. videoLoading.value = true;
  367. player.value.loadVideoById(
  368. currentSong.value.youtubeId,
  369. getTimeElapsed() / 1000 + currentSong.value.skipDuration
  370. );
  371. if (window.stationInterval !== 0) clearInterval(window.stationInterval);
  372. window.stationInterval = window.setInterval(() => {
  373. if (!stationPaused.value) {
  374. resizeSeekerbar();
  375. calculateTimeElapsed();
  376. }
  377. }, 150);
  378. }
  379. };
  380. const toggleSkipVote = (message?) => {
  381. socket.dispatch("stations.toggleSkipVote", station.value._id, data => {
  382. if (data.status !== "success") new Toast(`Error: ${data.message}`);
  383. else
  384. new Toast(
  385. message || "Successfully toggled vote to skip the current song."
  386. );
  387. });
  388. };
  389. const youtubeReady = () => {
  390. if (experimentalChangableListenMode.value === "participate") return;
  391. if (!player.value) {
  392. ms.setYTReady(false);
  393. player.value = new window.YT.Player("stationPlayer", {
  394. height: 270,
  395. width: 480,
  396. videoId: currentSong.value.youtubeId,
  397. host: "https://www.youtube-nocookie.com",
  398. startSeconds:
  399. getTimeElapsed() / 1000 + currentSong.value.skipDuration,
  400. playerVars: {
  401. controls: 0,
  402. iv_load_policy: 3,
  403. rel: 0,
  404. showinfo: 0,
  405. disablekb: 1,
  406. playsinline: 1
  407. },
  408. events: {
  409. onReady: () => {
  410. playerReady.value = true;
  411. ms.setYTReady(true);
  412. let volume = parseFloat(localStorage.getItem("volume"));
  413. volume = typeof volume === "number" ? volume : 20;
  414. player.value.setVolume(volume);
  415. if (volume > 0) player.value.unMute();
  416. if (muted.value) player.value.mute();
  417. playVideo();
  418. const duration =
  419. (dateCurrently() - startedAt.value - timePaused.value) /
  420. 1000;
  421. const songDuration = currentSong.value.duration;
  422. if (songDuration <= duration) player.value.pauseVideo();
  423. // on ios, playback will be forcibly paused locally
  424. if (isApple.value) {
  425. updateLocalPaused(true);
  426. new Toast(
  427. `Please click play manually to use ${sitename.value} on iOS.`
  428. );
  429. }
  430. },
  431. onError: err => {
  432. console.log("error with youtube video", err);
  433. if (err.data === 150 && loggedIn.value) {
  434. if (
  435. !(localPaused.value || stationPaused.value) &&
  436. !currentSong.value.voted
  437. ) {
  438. // automatically vote to skip
  439. toggleSkipVote(
  440. "Automatically voted to skip as this song isn't available for you."
  441. );
  442. }
  443. // persistent message while song is playing
  444. const persistentToast = new Toast({
  445. content:
  446. "This song is unavailable for you, but is playing for everyone else.",
  447. persistent: true
  448. });
  449. // save current song id
  450. const erroredYoutubeId = currentSong.value.youtubeId;
  451. persistentToasts.value.push({
  452. toast: persistentToast,
  453. checkIfCanRemove: () => {
  454. if (
  455. currentSong.value.youtubeId !==
  456. erroredYoutubeId
  457. ) {
  458. persistentToast.destroy();
  459. return true;
  460. }
  461. return false;
  462. }
  463. });
  464. } else {
  465. new Toast(
  466. "There has been an error with the YouTube Embed"
  467. );
  468. }
  469. },
  470. onStateChange: event => {
  471. if (
  472. event.data === window.YT.PlayerState.PLAYING &&
  473. videoLoading.value === true
  474. ) {
  475. videoLoading.value = false;
  476. player.value.seekTo(
  477. getTimeElapsed() / 1000 +
  478. currentSong.value.skipDuration,
  479. true
  480. );
  481. canAutoplay.value = true;
  482. if (localPaused.value || stationPaused.value)
  483. player.value.pauseVideo();
  484. } else if (
  485. event.data === window.YT.PlayerState.PLAYING &&
  486. (localPaused.value || stationPaused.value)
  487. ) {
  488. player.value.seekTo(timeBeforePause.value / 1000, true);
  489. player.value.pauseVideo();
  490. } else if (
  491. event.data === window.YT.PlayerState.PLAYING &&
  492. seeking.value === true
  493. )
  494. seeking.value = false;
  495. if (
  496. event.data === window.YT.PlayerState.PAUSED &&
  497. !localPaused.value &&
  498. !stationPaused.value &&
  499. !noSong.value &&
  500. player.value.getDuration() / 1000 <
  501. currentSong.value.duration
  502. ) {
  503. player.value.seekTo(
  504. getTimeElapsed() / 1000 +
  505. currentSong.value.skipDuration,
  506. true
  507. );
  508. player.value.playVideo();
  509. }
  510. }
  511. }
  512. });
  513. }
  514. };
  515. const setCurrentSong = data => {
  516. const {
  517. currentSong: _currentSong,
  518. startedAt: _startedAt,
  519. paused: _paused,
  520. timePaused: _timePaused,
  521. pausedAt: _pausedAt
  522. } = data;
  523. if (_currentSong) {
  524. if (!_currentSong.skipDuration || _currentSong.skipDuration < 0)
  525. _currentSong.skipDuration = 0;
  526. if (!_currentSong.duration || _currentSong.duration < 0)
  527. _currentSong.duration = 0;
  528. }
  529. updateCurrentSong(_currentSong || {});
  530. let nextSong = null;
  531. if (songsList.value[0])
  532. nextSong = songsList.value[0].youtubeId ? songsList.value[0] : null;
  533. updateNextSong(nextSong);
  534. setNextCurrentSong(
  535. {
  536. currentSong: null,
  537. startedAt: 0,
  538. _paused,
  539. timePaused: 0,
  540. pausedAt: 0
  541. },
  542. true
  543. );
  544. clearTimeout(window.stationNextSongTimeout);
  545. if (mediasession.value) updateMediaSessionData(_currentSong);
  546. startedAt.value = _startedAt;
  547. updateStationPaused(_paused);
  548. timePaused.value = _timePaused;
  549. pausedAt.value = _pausedAt;
  550. if (_currentSong) {
  551. updateNoSong(false);
  552. if (!playerReady.value) youtubeReady();
  553. else playVideo();
  554. // If the station is playing and the backend is not connected, set the next song to skip to after this song and set a timer to skip
  555. if (!stationPaused.value && !socket.ready) {
  556. if (nextSong)
  557. setNextCurrentSong(
  558. {
  559. currentSong: nextSong,
  560. startedAt: Date.now() + getTimeRemaining(),
  561. paused: false,
  562. timePaused: 0
  563. },
  564. true
  565. );
  566. else
  567. setNextCurrentSong(
  568. {
  569. currentSong: null,
  570. startedAt: 0,
  571. paused: false,
  572. timePaused: 0,
  573. pausedAt: 0
  574. },
  575. true
  576. );
  577. window.stationNextSongTimeout = setTimeout(() => {
  578. if (
  579. !noSong.value &&
  580. _currentSong.value._id === _currentSong._id
  581. )
  582. skipSong();
  583. }, getTimeRemaining());
  584. }
  585. const currentSongId = currentSong.value._id;
  586. socket.dispatch(
  587. "stations.getSkipVotes",
  588. station.value._id,
  589. currentSongId,
  590. res => {
  591. if (res.status === "success") {
  592. const { skipVotes, skipVotesCurrent, voted } = res.data;
  593. if (
  594. !noSong.value &&
  595. currentSong.value._id === currentSongId
  596. ) {
  597. updateCurrentSongSkipVotes({
  598. skipVotes,
  599. skipVotesCurrent,
  600. voted
  601. });
  602. }
  603. }
  604. }
  605. );
  606. socket.dispatch("media.getRatings", _currentSong.youtubeId, res => {
  607. if (_currentSong.youtubeId === currentSong.value.youtubeId) {
  608. const { likes, dislikes } = res.data;
  609. updateCurrentSongRatings({ likes, dislikes });
  610. }
  611. });
  612. if (loggedIn.value) {
  613. socket.dispatch(
  614. "media.getOwnRatings",
  615. _currentSong.youtubeId,
  616. res => {
  617. console.log("getOwnSongRatings", res);
  618. if (
  619. res.status === "success" &&
  620. currentSong.value.youtubeId === res.data.youtubeId
  621. ) {
  622. updateOwnCurrentSongRatings(res.data);
  623. if (
  624. autoSkipDisliked.value &&
  625. res.data.disliked === true &&
  626. !(localPaused.value || stationPaused.value) &&
  627. !currentSong.value.voted
  628. ) {
  629. toggleSkipVote(
  630. "Automatically voted to skip disliked song."
  631. );
  632. }
  633. }
  634. }
  635. );
  636. }
  637. } else {
  638. if (playerReady.value) player.value.stopVideo();
  639. updateNoSong(true);
  640. }
  641. calculateTimeElapsed();
  642. resizeSeekerbar();
  643. };
  644. const changeVolume = () => {
  645. const volume = volumeSliderValue.value;
  646. localStorage.setItem("volume", `${volume}`);
  647. if (playerReady.value) {
  648. player.value.setVolume(volume);
  649. if (volume > 0) {
  650. player.value.unMute();
  651. localStorage.setItem("muted", "false");
  652. muted.value = false;
  653. }
  654. }
  655. };
  656. const resumeLocalPlayer = () => {
  657. if (mediasession.value) updateMediaSessionData(currentSong.value);
  658. if (!noSong.value) {
  659. if (playerReady.value) {
  660. player.value.seekTo(
  661. getTimeElapsed() / 1000 + currentSong.value.skipDuration
  662. );
  663. player.value.playVideo();
  664. }
  665. }
  666. };
  667. const pauseLocalPlayer = () => {
  668. if (mediasession.value) updateMediaSessionData(currentSong.value);
  669. if (!noSong.value) {
  670. timeBeforePause.value = getTimeElapsed();
  671. if (playerReady.value) player.value.pauseVideo();
  672. }
  673. };
  674. const resumeLocalStation = () => {
  675. updateLocalPaused(false);
  676. if (!stationPaused.value) resumeLocalPlayer();
  677. };
  678. const pauseLocalStation = () => {
  679. updateLocalPaused(true);
  680. pauseLocalPlayer();
  681. };
  682. const skipStation = () => {
  683. socket.dispatch("stations.forceSkip", station.value._id, data => {
  684. if (data.status !== "success") new Toast(`Error: ${data.message}`);
  685. else new Toast("Successfully skipped the station's current song.");
  686. });
  687. };
  688. const resumeStation = () => {
  689. socket.dispatch("stations.resume", station.value._id, data => {
  690. if (data.status !== "success") new Toast(`Error: ${data.message}`);
  691. else new Toast("Successfully resumed the station.");
  692. });
  693. };
  694. const pauseStation = () => {
  695. socket.dispatch("stations.pause", station.value._id, data => {
  696. if (data.status !== "success") new Toast(`Error: ${data.message}`);
  697. else new Toast("Successfully paused the station.");
  698. });
  699. };
  700. const toggleMute = () => {
  701. if (playerReady.value) {
  702. const previousVolume = parseFloat(localStorage.getItem("volume"));
  703. const volume = player.value.getVolume() <= 0 ? previousVolume : 0;
  704. muted.value = !muted.value;
  705. localStorage.setItem("muted", `${muted.value}`);
  706. volumeSliderValue.value = volume;
  707. player.value.setVolume(volume);
  708. if (!muted.value) localStorage.setItem("volume", `${volume}`);
  709. }
  710. };
  711. const increaseVolume = () => {
  712. if (playerReady.value) {
  713. const previousVolume = parseFloat(localStorage.getItem("volume"));
  714. let volume = previousVolume + 5;
  715. if (previousVolume === 0) {
  716. muted.value = false;
  717. localStorage.setItem("muted", "false");
  718. }
  719. if (volume > 100) volume = 100;
  720. volumeSliderValue.value = volume;
  721. player.value.setVolume(volume);
  722. localStorage.setItem("volume", `${volume}`);
  723. }
  724. };
  725. const toggleLike = () => {
  726. if (currentSong.value.liked)
  727. socket.dispatch("media.unlike", currentSong.value.youtubeId, res => {
  728. if (res.status !== "success") new Toast(`Error: ${res.message}`);
  729. });
  730. else
  731. socket.dispatch("media.like", currentSong.value.youtubeId, res => {
  732. if (res.status !== "success") new Toast(`Error: ${res.message}`);
  733. });
  734. };
  735. const toggleDislike = () => {
  736. if (currentSong.value.disliked)
  737. return socket.dispatch(
  738. "media.undislike",
  739. currentSong.value.youtubeId,
  740. res => {
  741. if (res.status !== "success")
  742. new Toast(`Error: ${res.message}`);
  743. }
  744. );
  745. return socket.dispatch(
  746. "media.dislike",
  747. currentSong.value.youtubeId,
  748. res => {
  749. if (res.status !== "success") new Toast(`Error: ${res.message}`);
  750. }
  751. );
  752. };
  753. const togglePlayerDebugBox = () => {
  754. playerDebugBox.value.toggleBox();
  755. };
  756. const resetPlayerDebugBox = () => {
  757. playerDebugBox.value.resetBox();
  758. };
  759. const toggleKeyboardShortcutsHelper = () => {
  760. keyboardShortcutsHelper.value.toggleBox();
  761. };
  762. const resetKeyboardShortcutsHelper = () => {
  763. keyboardShortcutsHelper.value.resetBox();
  764. };
  765. const sendActivityWatchVideoData = () => {
  766. if (
  767. !stationPaused.value &&
  768. (!localPaused.value ||
  769. experimentalChangableListenMode.value === "participate") &&
  770. !noSong.value &&
  771. (experimentalChangableListenMode.value === "participate" ||
  772. player.value.getPlayerState() === window.YT.PlayerState.PLAYING)
  773. ) {
  774. if (activityWatchVideoLastStatus.value !== "playing") {
  775. activityWatchVideoLastStatus.value = "playing";
  776. activityWatchVideoLastStartDuration.value =
  777. currentSong.value.skipDuration + getTimeElapsed();
  778. }
  779. if (
  780. activityWatchVideoLastYouTubeId.value !==
  781. currentSong.value.youtubeId
  782. ) {
  783. activityWatchVideoLastYouTubeId.value = currentSong.value.youtubeId;
  784. activityWatchVideoLastStartDuration.value =
  785. currentSong.value.skipDuration + getTimeElapsed();
  786. }
  787. const videoData = {
  788. title: currentSong.value ? currentSong.value.title : null,
  789. artists:
  790. currentSong.value && currentSong.value.artists
  791. ? currentSong.value.artists.join(", ")
  792. : null,
  793. youtubeId: currentSong.value.youtubeId,
  794. muted: muted.value,
  795. volume: volumeSliderValue.value,
  796. startedDuration:
  797. activityWatchVideoLastStartDuration.value <= 0
  798. ? 0
  799. : Math.floor(
  800. activityWatchVideoLastStartDuration.value / 1000
  801. ),
  802. source: `station#${station.value.name}`,
  803. hostname: window.location.hostname,
  804. playerState:
  805. experimentalChangableListenMode.value === "participate"
  806. ? "none"
  807. : Object.keys(window.YT.PlayerState).find(
  808. key =>
  809. window.YT.PlayerState[key] ===
  810. player.value.getPlayerState()
  811. ),
  812. playbackRate: playbackRate.value,
  813. experimentalChangableListenMode:
  814. experimentalChangableListenMode.value
  815. };
  816. aw.sendVideoData(videoData);
  817. } else {
  818. activityWatchVideoLastStatus.value = "not_playing";
  819. }
  820. };
  821. const experimentalChangableListenModeChange = newMode => {
  822. experimentalChangableListenMode.value = newMode;
  823. localStorage.setItem(
  824. `experimental_changeable_listen_mode_${station.value._id}`,
  825. newMode
  826. );
  827. if (newMode === "participate") {
  828. // Destroy the YouTube player
  829. if (player.value) {
  830. player.value.destroy();
  831. player.value = null;
  832. }
  833. } else {
  834. // Recreate the YouTube player
  835. youtubeReady();
  836. }
  837. };
  838. watch(
  839. () => autoRequest.value.length,
  840. () => {
  841. autoRequestSong();
  842. }
  843. );
  844. onMounted(async () => {
  845. mediaModalWatcher.value = stationStore.$onAction(({ name, args }) => {
  846. if (name === "updateMediaModalPlayingAudio") {
  847. const [mediaModalPlayingAudio] = args;
  848. if (mediaModalPlayingAudio) {
  849. if (!beforeMediaModalLocalPausedLock.value) {
  850. beforeMediaModalLocalPausedLock.value = true;
  851. beforeMediaModalLocalPaused.value = localPaused.value;
  852. pauseLocalStation();
  853. }
  854. } else {
  855. beforeMediaModalLocalPausedLock.value = false;
  856. if (!beforeMediaModalLocalPaused.value) resumeLocalStation();
  857. }
  858. }
  859. });
  860. document.body.scrollTo(0, 0);
  861. stationIdentifier.value = route.params.id;
  862. window.stationInterval = 0;
  863. activityWatchVideoDataInterval.value = setInterval(() => {
  864. sendActivityWatchVideoData();
  865. }, 1000);
  866. persistentToastCheckerInterval.value = setInterval(() => {
  867. persistentToasts.value.filter(
  868. persistentToast => !persistentToast.checkIfCanRemove()
  869. );
  870. }, 1000);
  871. const experimental = await lofig.get("experimental");
  872. socket.onConnect(() => {
  873. clearTimeout(window.stationNextSongTimeout);
  874. socket.dispatch("stations.join", stationIdentifier.value, async res => {
  875. if (res.status === "success") {
  876. setTimeout(() => {
  877. loading.value = false;
  878. }, 1000); // prevents popping in of youtube embed etc.
  879. const {
  880. _id,
  881. displayName,
  882. name,
  883. description,
  884. privacy,
  885. owner,
  886. autofill,
  887. blacklist,
  888. type,
  889. isFavorited,
  890. theme,
  891. requests,
  892. djs
  893. } = res.data;
  894. if (experimental && experimental.changable_listen_mode) {
  895. if (experimental.changable_listen_mode === true)
  896. experimentalChangableListenModeEnabled.value = true;
  897. else if (
  898. Array.isArray(experimental.changable_listen_mode) &&
  899. experimental.changable_listen_mode.indexOf(_id) !== -1
  900. )
  901. experimentalChangableListenModeEnabled.value = true;
  902. }
  903. if (experimentalChangableListenModeEnabled.value) {
  904. console.log(
  905. `Experimental changeable listen mode is enabled`
  906. );
  907. const experimentalChangeableListenModeLS =
  908. localStorage.getItem(
  909. `experimental_changeable_listen_mode_${_id}`
  910. );
  911. if (experimentalChangeableListenModeLS)
  912. experimentalChangableListenMode.value =
  913. experimentalChangeableListenModeLS;
  914. }
  915. // change url to use station name instead of station id
  916. if (name !== stationIdentifier.value) {
  917. // eslint-disable-next-line no-restricted-globals
  918. router.replace(name);
  919. }
  920. joinStation({
  921. _id,
  922. name,
  923. displayName,
  924. description,
  925. privacy,
  926. owner,
  927. autofill,
  928. blacklist,
  929. type,
  930. isFavorited,
  931. theme,
  932. requests,
  933. djs
  934. });
  935. document.getElementsByTagName(
  936. "html"
  937. )[0].style.cssText = `--primary-color: var(--${res.data.theme})`;
  938. setCurrentSong({
  939. currentSong: res.data.currentSong,
  940. startedAt: res.data.startedAt,
  941. paused: res.data.paused,
  942. timePaused: res.data.timePaused,
  943. pausedAt: res.data.pausedAt
  944. });
  945. updateUserCount(res.data.userCount);
  946. updateUsers(res.data.users);
  947. await updatePermissions();
  948. socket.dispatch(
  949. "stations.getStationAutofillPlaylistsById",
  950. station.value._id,
  951. res => {
  952. if (res.status === "success") {
  953. setAutofillPlaylists(res.data.playlists);
  954. }
  955. }
  956. );
  957. socket.dispatch(
  958. "stations.getStationBlacklistById",
  959. station.value._id,
  960. res => {
  961. if (res.status === "success") {
  962. setBlacklist(res.data.playlists);
  963. }
  964. }
  965. );
  966. socket.dispatch("stations.getQueue", _id, res => {
  967. if (res.status === "success") {
  968. const { queue } = res.data;
  969. updateSongsList(queue);
  970. const [nextSong] = queue;
  971. updateNextSong(nextSong);
  972. }
  973. });
  974. if (hasPermission("stations.playback.toggle"))
  975. keyboardShortcuts.registerShortcut("station.pauseResume", {
  976. keyCode: 32, // Spacebar
  977. shift: false,
  978. ctrl: true,
  979. preventDefault: true,
  980. handler: () => {
  981. if (aModalIsOpen.value) return;
  982. if (stationPaused.value) resumeStation();
  983. else pauseStation();
  984. }
  985. });
  986. if (hasPermission("stations.skip"))
  987. keyboardShortcuts.registerShortcut("station.skipStation", {
  988. keyCode: 39, // Right arrow key
  989. shift: false,
  990. ctrl: true,
  991. preventDefault: true,
  992. handler: () => {
  993. if (aModalIsOpen.value) return;
  994. skipStation();
  995. }
  996. });
  997. keyboardShortcuts.registerShortcut("station.lowerVolumeLarge", {
  998. keyCode: 40, // Down arrow key
  999. shift: false,
  1000. ctrl: true,
  1001. preventDefault: true,
  1002. handler: () => {
  1003. if (aModalIsOpen.value) return;
  1004. volumeSliderValue.value -= 10;
  1005. changeVolume();
  1006. }
  1007. });
  1008. keyboardShortcuts.registerShortcut("station.lowerVolumeSmall", {
  1009. keyCode: 40, // Down arrow key
  1010. shift: true,
  1011. ctrl: true,
  1012. preventDefault: true,
  1013. handler: () => {
  1014. if (aModalIsOpen.value) return;
  1015. volumeSliderValue.value -= 1;
  1016. changeVolume();
  1017. }
  1018. });
  1019. keyboardShortcuts.registerShortcut(
  1020. "station.increaseVolumeLarge",
  1021. {
  1022. keyCode: 38, // Up arrow key
  1023. shift: false,
  1024. ctrl: true,
  1025. preventDefault: true,
  1026. handler: () => {
  1027. if (aModalIsOpen.value) return;
  1028. volumeSliderValue.value += 10;
  1029. changeVolume();
  1030. }
  1031. }
  1032. );
  1033. keyboardShortcuts.registerShortcut(
  1034. "station.increaseVolumeSmall",
  1035. {
  1036. keyCode: 38, // Up arrow key
  1037. shift: true,
  1038. ctrl: true,
  1039. preventDefault: true,
  1040. handler: () => {
  1041. if (aModalIsOpen.value) return;
  1042. volumeSliderValue.value += 1;
  1043. changeVolume();
  1044. }
  1045. }
  1046. );
  1047. keyboardShortcuts.registerShortcut("station.toggleDebug", {
  1048. keyCode: 68, // D key
  1049. shift: false,
  1050. ctrl: true,
  1051. preventDefault: true,
  1052. handler: () => {
  1053. if (aModalIsOpen.value) return;
  1054. togglePlayerDebugBox();
  1055. }
  1056. });
  1057. keyboardShortcuts.registerShortcut(
  1058. "station.toggleKeyboardShortcutsHelper",
  1059. {
  1060. keyCode: 191, // '/' key
  1061. ctrl: true,
  1062. preventDefault: true,
  1063. handler: () => {
  1064. if (aModalIsOpen.value) return;
  1065. toggleKeyboardShortcutsHelper();
  1066. }
  1067. }
  1068. );
  1069. keyboardShortcuts.registerShortcut(
  1070. "station.resetKeyboardShortcutsHelper",
  1071. {
  1072. keyCode: 191, // '/' key
  1073. ctrl: true,
  1074. shift: true,
  1075. preventDefault: true,
  1076. handler: () => {
  1077. if (aModalIsOpen.value) return;
  1078. resetKeyboardShortcutsHelper();
  1079. }
  1080. }
  1081. );
  1082. // UNIX client time before ping
  1083. const beforePing = Date.now();
  1084. socket.dispatch("apis.ping", res => {
  1085. if (res.status === "success") {
  1086. // UNIX client time after ping
  1087. const afterPing = Date.now();
  1088. // Average time in MS it took between the server responding and the client receiving
  1089. const connectionLatency = (afterPing - beforePing) / 2;
  1090. console.log(connectionLatency, beforePing - afterPing);
  1091. // UNIX server time
  1092. const serverDate = res.data.date;
  1093. // Difference between the server UNIX time and the client UNIX time after ping, with the connectionLatency added to the server UNIX time
  1094. const difference =
  1095. serverDate + connectionLatency - afterPing;
  1096. console.log("Difference: ", difference);
  1097. if (difference > 3000 || difference < -3000) {
  1098. console.log(
  1099. "System time difference is bigger than 3 seconds."
  1100. );
  1101. }
  1102. systemDifference.value = difference;
  1103. }
  1104. });
  1105. } else {
  1106. loading.value = false;
  1107. exists.value = false;
  1108. }
  1109. });
  1110. socket.dispatch(
  1111. "stations.existsByName",
  1112. stationIdentifier.value,
  1113. res => {
  1114. if (res.status === "error" || !res.data.exists) {
  1115. // station identifier may be using stationid instead
  1116. socket.dispatch(
  1117. "stations.existsById",
  1118. stationIdentifier.value,
  1119. res => {
  1120. if (res.status === "error" || !res.data.exists) {
  1121. loading.value = false;
  1122. exists.value = false;
  1123. }
  1124. }
  1125. );
  1126. }
  1127. }
  1128. );
  1129. });
  1130. socket.onDisconnect(() => {
  1131. const _currentSong = currentSong.value;
  1132. if (nextSong.value)
  1133. setNextCurrentSong(
  1134. {
  1135. currentSong: nextSong.value,
  1136. startedAt: Date.now() + getTimeRemaining(),
  1137. paused: false,
  1138. timePaused: 0
  1139. },
  1140. true
  1141. );
  1142. else
  1143. setNextCurrentSong(
  1144. {
  1145. currentSong: null,
  1146. startedAt: 0,
  1147. paused: false,
  1148. timePaused: 0,
  1149. pausedAt: 0
  1150. },
  1151. true
  1152. );
  1153. window.stationNextSongTimeout = setTimeout(() => {
  1154. if (!noSong.value && currentSong.value._id === _currentSong._id)
  1155. skipSong();
  1156. }, getTimeRemaining());
  1157. }, true);
  1158. socket.on("event:station.nextSong", res => {
  1159. const { currentSong, startedAt, paused, timePaused } = res.data;
  1160. setCurrentSong({
  1161. currentSong,
  1162. startedAt,
  1163. paused,
  1164. timePaused,
  1165. pausedAt: 0
  1166. });
  1167. });
  1168. socket.on("event:station.pause", res => {
  1169. pausedAt.value = res.data.pausedAt;
  1170. updateStationPaused(true);
  1171. pauseLocalPlayer();
  1172. clearTimeout(window.stationNextSongTimeout);
  1173. });
  1174. socket.on("event:station.resume", res => {
  1175. timePaused.value = res.data.timePaused;
  1176. updateStationPaused(false);
  1177. if (!localPaused.value) resumeLocalPlayer();
  1178. autoRequestSong();
  1179. });
  1180. socket.on("event:station.deleted", () => {
  1181. router.push({
  1182. path: "/",
  1183. query: {
  1184. toast: "The station you were in was deleted."
  1185. }
  1186. });
  1187. });
  1188. socket.on("event:ratings.liked", res => {
  1189. if (!noSong.value) {
  1190. if (res.data.youtubeId === currentSong.value.youtubeId) {
  1191. updateCurrentSongRatings(res.data);
  1192. }
  1193. }
  1194. });
  1195. socket.on("event:ratings.disliked", res => {
  1196. if (!noSong.value) {
  1197. if (res.data.youtubeId === currentSong.value.youtubeId) {
  1198. updateCurrentSongRatings(res.data);
  1199. }
  1200. }
  1201. });
  1202. socket.on("event:ratings.unliked", res => {
  1203. if (!noSong.value) {
  1204. if (res.data.youtubeId === currentSong.value.youtubeId) {
  1205. updateCurrentSongRatings(res.data);
  1206. }
  1207. }
  1208. });
  1209. socket.on("event:ratings.undisliked", res => {
  1210. if (!noSong.value) {
  1211. if (res.data.youtubeId === currentSong.value.youtubeId) {
  1212. updateCurrentSongRatings(res.data);
  1213. }
  1214. }
  1215. });
  1216. socket.on("event:ratings.updated", res => {
  1217. if (!noSong.value) {
  1218. if (res.data.youtubeId === currentSong.value.youtubeId) {
  1219. updateOwnCurrentSongRatings(res.data);
  1220. }
  1221. }
  1222. });
  1223. socket.on("event:station.queue.updated", res => {
  1224. updateSongsList(res.data.queue);
  1225. let nextSong = null;
  1226. if (songsList.value[0])
  1227. nextSong = songsList.value[0].youtubeId ? songsList.value[0] : null;
  1228. updateNextSong(nextSong);
  1229. autoRequestSong();
  1230. });
  1231. socket.on("event:station.queue.song.repositioned", res => {
  1232. repositionSongInList(res.data.song);
  1233. let nextSong = null;
  1234. if (songsList.value[0])
  1235. nextSong = songsList.value[0].youtubeId ? songsList.value[0] : null;
  1236. updateNextSong(nextSong);
  1237. });
  1238. socket.on("event:station.toggleSkipVote", res => {
  1239. if (currentSong.value)
  1240. updateCurrentSongSkipVotes({
  1241. skipVotes: res.data.voted
  1242. ? currentSong.value.skipVotes + 1
  1243. : currentSong.value.skipVotes - 1,
  1244. skipVotesCurrent: null,
  1245. voted:
  1246. res.data.userId === userId.value
  1247. ? res.data.voted
  1248. : currentSong.value.voted
  1249. });
  1250. });
  1251. socket.on("event:station.updated", async res => {
  1252. const { name, theme, privacy } = res.data.station;
  1253. if (!hasPermission("stations.view") && privacy === "private") {
  1254. router.push({
  1255. path: "/",
  1256. query: {
  1257. toast: "The station you were in was made private."
  1258. }
  1259. });
  1260. } else {
  1261. if (station.value.name !== name) {
  1262. await router.push(
  1263. `${name}?${Object.keys(route.query)
  1264. .map(
  1265. key =>
  1266. `${encodeURIComponent(
  1267. key
  1268. )}=${encodeURIComponent(
  1269. JSON.stringify(route.query[key])
  1270. )}`
  1271. )
  1272. .join("&")}`
  1273. );
  1274. // eslint-disable-next-line no-restricted-globals
  1275. history.replaceState({ ...history.state, ...{} }, null);
  1276. }
  1277. if (station.value.theme !== theme)
  1278. document.getElementsByTagName(
  1279. "html"
  1280. )[0].style.cssText = `--primary-color: var(--${theme})`;
  1281. updateStation(res.data.station);
  1282. }
  1283. });
  1284. socket.on("event:station.users.updated", res =>
  1285. updateUsers(res.data.users)
  1286. );
  1287. socket.on("event:station.userCount.updated", res =>
  1288. updateUserCount(res.data.userCount)
  1289. );
  1290. socket.on("event:user.station.favorited", res => {
  1291. if (res.data.stationId === station.value._id)
  1292. updateIfStationIsFavorited({ isFavorited: true });
  1293. });
  1294. socket.on("event:user.station.unfavorited", res => {
  1295. if (res.data.stationId === station.value._id)
  1296. updateIfStationIsFavorited({ isFavorited: false });
  1297. });
  1298. socket.on("event:station.djs.added", res => {
  1299. if (res.data.user._id === userId.value)
  1300. updatePermissions().then(() => {
  1301. if (
  1302. !hasPermission("stations.view") &&
  1303. station.value.privacy === "private"
  1304. )
  1305. router.push({
  1306. path: "/",
  1307. query: {
  1308. toast: "You no longer have access to the station you were in."
  1309. }
  1310. });
  1311. });
  1312. addDj(res.data.user);
  1313. });
  1314. socket.on("event:station.djs.removed", res => {
  1315. if (res.data.user._id === userId.value)
  1316. updatePermissions().then(() => {
  1317. if (
  1318. !hasPermission("stations.view") &&
  1319. station.value.privacy === "private"
  1320. )
  1321. router.push({
  1322. path: "/",
  1323. query: {
  1324. toast: "You no longer have access to the station you were in."
  1325. }
  1326. });
  1327. });
  1328. removeDj(res.data.user);
  1329. });
  1330. socket.on("keep.event:user.role.updated", () => {
  1331. updatePermissions().then(() => {
  1332. if (
  1333. !hasPermission("stations.view") &&
  1334. station.value.privacy === "private"
  1335. )
  1336. router.push({
  1337. path: "/",
  1338. query: {
  1339. toast: "You no longer have access to the station you were in."
  1340. }
  1341. });
  1342. });
  1343. });
  1344. frontendDevMode.value = await lofig.get("mode");
  1345. mediasession.value = await lofig.get("siteSettings.mediasession");
  1346. christmas.value = await lofig.get("siteSettings.christmas");
  1347. sitename.value = await lofig.get("siteSettings.sitename");
  1348. ms.setListeners(0, {
  1349. play: () => {
  1350. if (hasPermission("stations.playback.toggle")) resumeStation();
  1351. else resumeLocalStation();
  1352. },
  1353. pause: () => {
  1354. if (hasPermission("stations.playback.toggle")) pauseStation();
  1355. else pauseLocalStation();
  1356. },
  1357. nexttrack: () => {
  1358. if (hasPermission("stations.skip")) skipStation();
  1359. else if (!currentSong.value.voted) toggleSkipVote();
  1360. }
  1361. });
  1362. if (JSON.parse(localStorage.getItem("muted"))) {
  1363. muted.value = true;
  1364. player.value.setVolume(0);
  1365. volumeSliderValue.value = 0;
  1366. } else {
  1367. let volume = parseFloat(localStorage.getItem("volume"));
  1368. volume =
  1369. typeof volume === "number" && !Number.isNaN(volume) ? volume : 20;
  1370. localStorage.setItem("volume", `${volume}`);
  1371. volumeSliderValue.value = volume;
  1372. }
  1373. });
  1374. onBeforeUnmount(() => {
  1375. document.getElementsByTagName("html")[0].style.cssText = "";
  1376. if (mediasession.value) {
  1377. ms.removeListeners(0);
  1378. ms.removeMediaSessionData(0);
  1379. }
  1380. /** Reset Songslist */
  1381. updateSongsList([]);
  1382. const shortcutNames = [
  1383. "station.pauseResume",
  1384. "station.skipStation",
  1385. "station.lowerVolumeLarge",
  1386. "station.lowerVolumeSmall",
  1387. "station.increaseVolumeLarge",
  1388. "station.increaseVolumeSmall",
  1389. "station.toggleDebug"
  1390. ];
  1391. shortcutNames.forEach(shortcutName => {
  1392. keyboardShortcuts.unregisterShortcut(shortcutName);
  1393. });
  1394. mediaModalWatcher.value(); // removes the watcher
  1395. clearInterval(activityWatchVideoDataInterval.value);
  1396. clearTimeout(window.stationNextSongTimeout);
  1397. clearTimeout(persistentToastCheckerInterval.value);
  1398. persistentToasts.value.forEach(persistentToast => {
  1399. persistentToast.toast.destroy();
  1400. });
  1401. socket.dispatch("stations.leave", station.value._id, () => {});
  1402. leaveStation();
  1403. // Delete the Pinia store that was created for this station, after all other cleanup tasks are performed
  1404. stationStore.$dispose();
  1405. });
  1406. </script>
  1407. <template>
  1408. <div>
  1409. <page-metadata
  1410. v-if="exists && !loading"
  1411. :title="`${station.displayName}`"
  1412. />
  1413. <page-metadata v-else-if="!exists && !loading" :title="`Not found`" />
  1414. <div id="page-loader-container" v-if="loading">
  1415. <content-loader
  1416. width="1920"
  1417. height="1080"
  1418. :primary-color="nightmode ? '#222' : '#fff'"
  1419. :secondary-color="nightmode ? '#444' : '#ddd'"
  1420. preserve-aspect-ratio="none"
  1421. id="page-loader-content"
  1422. >
  1423. <rect x="55" y="105" rx="5" ry="5" width="670" height="149" />
  1424. <rect x="55" y="283" rx="5" ry="5" width="670" height="640" />
  1425. <rect x="745" y="108" rx="5" ry="5" width="1120" height="672" />
  1426. <rect x="745" y="810" rx="5" ry="5" width="1120" height="110" />
  1427. </content-loader>
  1428. <content-loader
  1429. width="1920"
  1430. height="1080"
  1431. :primary-color="nightmode ? '#222' : '#fff'"
  1432. :secondary-color="nightmode ? '#444' : '#ddd'"
  1433. preserve-aspect-ratio="none"
  1434. id="page-loader-layout"
  1435. >
  1436. <rect x="0" y="0" rx="0" ry="0" width="1920" height="64" />
  1437. <rect x="0" y="980" rx="0" ry="0" width="1920" height="100" />
  1438. </content-loader>
  1439. </div>
  1440. <!-- More simplistic loading animation for mobile users -->
  1441. <div v-show="loading" id="mobile-progress-animation" />
  1442. <ul
  1443. v-if="
  1444. currentSong &&
  1445. (currentSong.youtubeId === 'l9PxOanFjxQ' ||
  1446. currentSong.youtubeId === 'xKVcVSYmesU' ||
  1447. currentSong.youtubeId === '60ItHLz5WEA' ||
  1448. currentSong.youtubeId === 'e6vkFbtSGm0')
  1449. "
  1450. class="bg-bubbles"
  1451. >
  1452. <li></li>
  1453. <li></li>
  1454. <li></li>
  1455. <li></li>
  1456. <li></li>
  1457. <li></li>
  1458. <li></li>
  1459. <li></li>
  1460. <li></li>
  1461. <li></li>
  1462. </ul>
  1463. <div v-show="!loading && exists">
  1464. <main-header />
  1465. <div id="station-outer-container">
  1466. <div
  1467. id="station-inner-container"
  1468. :class="{ 'nothing-here': noSong }"
  1469. >
  1470. <div id="station-left-column" class="column">
  1471. <!-- div with quadrant class -->
  1472. <div class="quadrant">
  1473. <station-info-box
  1474. :station="station"
  1475. :station-paused="stationPaused"
  1476. :show-manage-station="true"
  1477. />
  1478. </div>
  1479. <div id="sidebar-container" class="quadrant">
  1480. <station-sidebar />
  1481. </div>
  1482. </div>
  1483. <div id="station-right-column" class="column">
  1484. <div
  1485. class="experimental-listen-mode-container quadrant"
  1486. v-if="
  1487. experimentalChangableListenModeEnabled &&
  1488. !noSong
  1489. "
  1490. v-show="
  1491. experimentalChangableListenMode ===
  1492. 'participate'
  1493. "
  1494. >
  1495. <button
  1496. class="button is-primary"
  1497. @click="
  1498. experimentalChangableListenModeChange(
  1499. 'listen_and_participate'
  1500. )
  1501. "
  1502. >
  1503. <i class="material-icons icon-with-button"
  1504. >music_note</i
  1505. >
  1506. <span>Listen to music</span>
  1507. </button>
  1508. <button
  1509. v-if="!skipVotesLoaded"
  1510. class="button is-primary disabled"
  1511. content="Skip votes have not been loaded yet"
  1512. v-tippy
  1513. >
  1514. <i class="material-icons icon-with-button"
  1515. >skip_next</i
  1516. >
  1517. Vote to skip the current song
  1518. </button>
  1519. <button
  1520. v-else-if="loggedIn"
  1521. :class="[
  1522. 'button',
  1523. 'is-primary',
  1524. { voted: currentSong.voted }
  1525. ]"
  1526. @click="toggleSkipVote()"
  1527. :content="`${
  1528. currentSong.voted ? 'Remove vote' : 'Vote'
  1529. } to Skip Song`"
  1530. v-tippy
  1531. >
  1532. <i class="material-icons icon-with-button"
  1533. >skip_next</i
  1534. >
  1535. Vote to skip the current song -
  1536. {{ currentSong.skipVotes }} votes
  1537. </button>
  1538. <button
  1539. v-else
  1540. class="button is-primary disabled"
  1541. content="Log in to vote to skip songs"
  1542. v-tippy="{ theme: 'info' }"
  1543. >
  1544. <i class="material-icons icon-with-button"
  1545. >skip_next</i
  1546. >
  1547. Vote to skip the current song -
  1548. {{ currentSong.skipVotes }} votes
  1549. </button>
  1550. <div class="row">
  1551. <!-- Ratings -->
  1552. <div
  1553. class="ratings"
  1554. v-if="ratingsLoaded && ownRatingsLoaded"
  1555. :class="{
  1556. liked: currentSong.liked,
  1557. disliked: currentSong.disliked
  1558. }"
  1559. >
  1560. <!-- Like Song Button -->
  1561. <button
  1562. class="button is-success like-song"
  1563. @click="toggleLike()"
  1564. content="Like Song"
  1565. v-tippy
  1566. >
  1567. <i
  1568. class="material-icons icon-with-button"
  1569. :class="{
  1570. liked: currentSong.liked
  1571. }"
  1572. >thumb_up_alt</i
  1573. >{{ currentSong.likes }}
  1574. </button>
  1575. <!-- Dislike Song Button -->
  1576. <button
  1577. class="button is-danger dislike-song"
  1578. @click="toggleDislike()"
  1579. content="Dislike Song"
  1580. v-tippy
  1581. >
  1582. <i
  1583. class="material-icons icon-with-button"
  1584. :class="{
  1585. disliked: currentSong.disliked
  1586. }"
  1587. >thumb_down_alt</i
  1588. >{{ currentSong.dislikes }}
  1589. </button>
  1590. </div>
  1591. <div id="ratings" class="disabled" v-else>
  1592. <!-- Like Song Button -->
  1593. <button
  1594. class="button is-success like-song disabled"
  1595. content="Ratings have not been loaded yet"
  1596. v-tippy
  1597. >
  1598. <i
  1599. class="material-icons icon-with-button"
  1600. >thumb_up_alt</i
  1601. >
  1602. </button>
  1603. <!-- Dislike Song Button -->
  1604. <button
  1605. class="button is-danger dislike-song disabled"
  1606. content="Ratings have not been loaded yet"
  1607. v-tippy
  1608. >
  1609. <i
  1610. class="material-icons icon-with-button"
  1611. >thumb_down_alt</i
  1612. >
  1613. </button>
  1614. </div>
  1615. <add-to-playlist-dropdown
  1616. :song="currentSong"
  1617. placement="top-end"
  1618. >
  1619. <template #button>
  1620. <div
  1621. id="add-song-to-playlist"
  1622. content="Add Song to Playlist"
  1623. v-tippy
  1624. >
  1625. <div class="control has-addons">
  1626. <button
  1627. class="button is-primary"
  1628. >
  1629. <i class="material-icons">
  1630. playlist_add
  1631. </i>
  1632. </button>
  1633. <button
  1634. class="button"
  1635. id="dropdown-toggle"
  1636. >
  1637. <i class="material-icons">
  1638. {{
  1639. showPlaylistDropdown
  1640. ? "expand_more"
  1641. : "expand_less"
  1642. }}
  1643. </i>
  1644. </button>
  1645. </div>
  1646. </div>
  1647. </template>
  1648. </add-to-playlist-dropdown>
  1649. </div>
  1650. </div>
  1651. <div
  1652. class="player-container quadrant"
  1653. v-show="
  1654. !noSong &&
  1655. (!experimentalChangableListenModeEnabled ||
  1656. experimentalChangableListenMode ===
  1657. 'listen_and_participate')
  1658. "
  1659. >
  1660. <div id="video-container">
  1661. <div
  1662. id="stationPlayer"
  1663. style="
  1664. width: 100%;
  1665. height: 100%;
  1666. min-height: 200px;
  1667. "
  1668. />
  1669. <div
  1670. class="player-cannot-autoplay"
  1671. v-if="!canAutoplay"
  1672. @click="increaseVolume()"
  1673. >
  1674. <p>
  1675. Please click anywhere on the screen for
  1676. the video to start
  1677. </p>
  1678. </div>
  1679. </div>
  1680. <div id="seeker-bar-container">
  1681. <div
  1682. id="seeker-bar"
  1683. :class="{
  1684. 'christmas-seeker': christmas,
  1685. nyan:
  1686. currentSong &&
  1687. currentSong.youtubeId ===
  1688. 'QH2-TGUlwu4'
  1689. }"
  1690. />
  1691. <div
  1692. class="seeker-bar-cover"
  1693. :style="{
  1694. width: `calc(100% - ${seekerbarPercentage}%)`
  1695. }"
  1696. ></div>
  1697. <img
  1698. v-if="
  1699. currentSong &&
  1700. currentSong.youtubeId === 'QH2-TGUlwu4'
  1701. "
  1702. src="https://freepngimg.com/thumb/nyan_cat/1-2-nyan-cat-free-download-png.png"
  1703. :style="{
  1704. position: 'absolute',
  1705. top: `-10px`,
  1706. left: `${seekerbarPercentage}%`,
  1707. width: '50px'
  1708. }"
  1709. />
  1710. <img
  1711. v-if="
  1712. currentSong &&
  1713. (currentSong.youtubeId ===
  1714. 'DtVBCG6ThDk' ||
  1715. currentSong.youtubeId ===
  1716. 'sI66hcu9fIs' ||
  1717. currentSong.youtubeId ===
  1718. 'iYYRH4apXDo' ||
  1719. currentSong.youtubeId ===
  1720. 'tRcPA7Fzebw')
  1721. "
  1722. src="/assets/rocket.svg"
  1723. :style="{
  1724. position: 'absolute',
  1725. top: `-21px`,
  1726. left: `calc(${seekerbarPercentage}% - 35px)`,
  1727. width: '50px',
  1728. transform: 'rotate(45deg)'
  1729. }"
  1730. />
  1731. <img
  1732. v-if="
  1733. currentSong &&
  1734. currentSong.youtubeId === 'jofNR_WkoCE'
  1735. "
  1736. src="/assets/fox.svg"
  1737. :style="{
  1738. position: 'absolute',
  1739. top: `-21px`,
  1740. left: `calc(${seekerbarPercentage}% - 35px)`,
  1741. width: '50px',
  1742. transform: 'scaleX(-1)',
  1743. opacity: 1
  1744. }"
  1745. />
  1746. <img
  1747. v-if="
  1748. currentSong &&
  1749. (currentSong.youtubeId ===
  1750. 'l9PxOanFjxQ' ||
  1751. currentSong.youtubeId ===
  1752. 'xKVcVSYmesU' ||
  1753. currentSong.youtubeId ===
  1754. '60ItHLz5WEA' ||
  1755. currentSong.youtubeId ===
  1756. 'e6vkFbtSGm0')
  1757. "
  1758. src="/assets/old_logo.png"
  1759. :style="{
  1760. position: 'absolute',
  1761. top: `-9px`,
  1762. left: `calc(${seekerbarPercentage}% - 22px)`,
  1763. 'background-color': 'rgb(96, 199, 169)',
  1764. width: '25px',
  1765. height: '25px',
  1766. 'border-radius': '25px'
  1767. }"
  1768. />
  1769. <img
  1770. v-if="
  1771. christmas &&
  1772. currentSong &&
  1773. ![
  1774. 'QH2-TGUlwu4',
  1775. 'DtVBCG6ThDk',
  1776. 'sI66hcu9fIs',
  1777. 'iYYRH4apXDo',
  1778. 'tRcPA7Fzebw',
  1779. 'jofNR_WkoCE',
  1780. 'l9PxOanFjxQ',
  1781. 'xKVcVSYmesU',
  1782. '60ItHLz5WEA',
  1783. 'e6vkFbtSGm0'
  1784. ].includes(currentSong.youtubeId)
  1785. "
  1786. src="/assets/santa.png"
  1787. :style="{
  1788. position: 'absolute',
  1789. top: `-30px`,
  1790. left: `calc(${seekerbarPercentage}% - 25px)`,
  1791. height: '50px',
  1792. transform: 'scaleX(-1)'
  1793. }"
  1794. />
  1795. </div>
  1796. <div id="control-bar-container">
  1797. <div id="left-buttons">
  1798. <!-- Debug Box -->
  1799. <button
  1800. v-if="frontendDevMode === 'development'"
  1801. class="button is-primary"
  1802. @click="togglePlayerDebugBox()"
  1803. @dblclick="resetPlayerDebugBox()"
  1804. content="Debug"
  1805. v-tippy
  1806. >
  1807. <i
  1808. class="material-icons icon-with-button"
  1809. >
  1810. bug_report
  1811. </i>
  1812. </button>
  1813. <!-- Local Pause/Resume Button -->
  1814. <button
  1815. class="button is-primary"
  1816. @click="resumeLocalStation()"
  1817. id="local-resume"
  1818. v-if="localPaused"
  1819. content="Unpause Playback"
  1820. v-tippy
  1821. >
  1822. <i class="material-icons">play_arrow</i>
  1823. </button>
  1824. <button
  1825. class="button is-primary"
  1826. @click="pauseLocalStation()"
  1827. id="local-pause"
  1828. v-else
  1829. content="Pause Playback"
  1830. v-tippy
  1831. >
  1832. <i class="material-icons">pause</i>
  1833. </button>
  1834. <!-- Vote to Skip Button -->
  1835. <button
  1836. v-if="!skipVotesLoaded"
  1837. class="button is-primary disabled"
  1838. content="Skip votes have not been loaded yet"
  1839. v-tippy
  1840. >
  1841. <i
  1842. class="material-icons icon-with-button"
  1843. >skip_next</i
  1844. >
  1845. </button>
  1846. <button
  1847. v-else-if="loggedIn"
  1848. :class="[
  1849. 'button',
  1850. 'is-primary',
  1851. { voted: currentSong.voted }
  1852. ]"
  1853. @click="toggleSkipVote()"
  1854. :content="`${
  1855. currentSong.voted
  1856. ? 'Remove vote'
  1857. : 'Vote'
  1858. } to Skip Song`"
  1859. v-tippy
  1860. >
  1861. <i
  1862. class="material-icons icon-with-button"
  1863. >skip_next</i
  1864. >
  1865. {{ currentSong.skipVotes }}
  1866. </button>
  1867. <button
  1868. v-else
  1869. class="button is-primary disabled"
  1870. content="Log in to vote to skip songs"
  1871. v-tippy="{ theme: 'info' }"
  1872. >
  1873. <i
  1874. class="material-icons icon-with-button"
  1875. >skip_next</i
  1876. >
  1877. {{ currentSong.skipVotes }}
  1878. </button>
  1879. <!-- Close player window -->
  1880. <button
  1881. v-if="
  1882. experimentalChangableListenModeEnabled
  1883. "
  1884. class="button is-primary"
  1885. content="Close this player window"
  1886. @click="
  1887. experimentalChangableListenModeChange(
  1888. 'participate'
  1889. )
  1890. "
  1891. v-tippy
  1892. >
  1893. <i
  1894. class="material-icons icon-with-button"
  1895. >cancel_presentation</i
  1896. >
  1897. </button>
  1898. </div>
  1899. <div id="duration">
  1900. <p>
  1901. {{ timeElapsed }} /
  1902. {{
  1903. utils.formatTime(
  1904. currentSong.duration
  1905. )
  1906. }}
  1907. </p>
  1908. </div>
  1909. <p id="volume-control" v-if="!isApple">
  1910. <i
  1911. class="material-icons"
  1912. @click="toggleMute()"
  1913. :content="`${
  1914. muted ? 'Unmute' : 'Mute'
  1915. }`"
  1916. v-tippy
  1917. >{{
  1918. muted
  1919. ? "volume_mute"
  1920. : volumeSliderValue >= 50
  1921. ? "volume_up"
  1922. : "volume_down"
  1923. }}</i
  1924. >
  1925. <input
  1926. v-model="volumeSliderValue"
  1927. type="range"
  1928. min="0"
  1929. max="100"
  1930. class="volume-slider active"
  1931. @change="changeVolume()"
  1932. @input="changeVolume()"
  1933. />
  1934. </p>
  1935. <div id="right-buttons" v-if="loggedIn">
  1936. <!-- Ratings (Like/Dislike) Buttons -->
  1937. <div
  1938. id="ratings"
  1939. v-if="ratingsLoaded && ownRatingsLoaded"
  1940. :class="{
  1941. liked: currentSong.liked,
  1942. disliked: currentSong.disliked
  1943. }"
  1944. >
  1945. <!-- Like Song Button -->
  1946. <button
  1947. class="button is-success like-song"
  1948. id="like-song"
  1949. @click="toggleLike()"
  1950. content="Like Song"
  1951. v-tippy
  1952. >
  1953. <i
  1954. class="material-icons icon-with-button"
  1955. :class="{
  1956. liked: currentSong.liked
  1957. }"
  1958. >thumb_up_alt</i
  1959. >{{ currentSong.likes }}
  1960. </button>
  1961. <!-- Dislike Song Button -->
  1962. <button
  1963. class="button is-danger dislike-song"
  1964. id="dislike-song"
  1965. @click="toggleDislike()"
  1966. content="Dislike Song"
  1967. v-tippy
  1968. >
  1969. <i
  1970. class="material-icons icon-with-button"
  1971. :class="{
  1972. disliked:
  1973. currentSong.disliked
  1974. }"
  1975. >thumb_down_alt</i
  1976. >{{ currentSong.dislikes }}
  1977. </button>
  1978. </div>
  1979. <div id="ratings" class="disabled" v-else>
  1980. <!-- Like Song Button -->
  1981. <button
  1982. class="button is-success like-song disabled"
  1983. id="like-song"
  1984. content="Ratings have not been loaded yet"
  1985. v-tippy
  1986. >
  1987. <i
  1988. class="material-icons icon-with-button"
  1989. >thumb_up_alt</i
  1990. >
  1991. </button>
  1992. <!-- Dislike Song Button -->
  1993. <button
  1994. class="button is-danger dislike-song disabled"
  1995. id="dislike-song"
  1996. content="Ratings have not been loaded yet"
  1997. v-tippy
  1998. >
  1999. <i
  2000. class="material-icons icon-with-button"
  2001. >thumb_down_alt</i
  2002. >
  2003. </button>
  2004. </div>
  2005. <!-- Add Song To Playlist Button & Dropdown -->
  2006. <add-to-playlist-dropdown
  2007. :song="currentSong"
  2008. placement="top-end"
  2009. >
  2010. <template #button>
  2011. <div
  2012. id="add-song-to-playlist"
  2013. content="Add Song to Playlist"
  2014. v-tippy
  2015. >
  2016. <div class="control has-addons">
  2017. <button
  2018. class="button is-primary"
  2019. >
  2020. <i
  2021. class="material-icons"
  2022. >
  2023. playlist_add
  2024. </i>
  2025. </button>
  2026. <button
  2027. class="button"
  2028. id="dropdown-toggle"
  2029. >
  2030. <i
  2031. class="material-icons"
  2032. >
  2033. {{
  2034. showPlaylistDropdown
  2035. ? "expand_more"
  2036. : "expand_less"
  2037. }}
  2038. </i>
  2039. </button>
  2040. </div>
  2041. </div>
  2042. </template>
  2043. </add-to-playlist-dropdown>
  2044. </div>
  2045. <div id="right-buttons" v-else>
  2046. <!-- Disabled Ratings (Like/Dislike) Buttons -->
  2047. <div id="ratings" v-if="ratingsLoaded">
  2048. <!-- Disabled Like Song Button -->
  2049. <button
  2050. class="button is-success disabled"
  2051. id="like-song"
  2052. content="Log in to like songs"
  2053. v-tippy="{ theme: 'info' }"
  2054. >
  2055. <i
  2056. class="material-icons icon-with-button"
  2057. >thumb_up_alt</i
  2058. >{{ currentSong.likes }}
  2059. </button>
  2060. <!-- Disabled Dislike Song Button -->
  2061. <button
  2062. class="button is-danger disabled"
  2063. id="dislike-song"
  2064. content="Log in to dislike songs"
  2065. v-tippy="{ theme: 'info' }"
  2066. >
  2067. <i
  2068. class="material-icons icon-with-button"
  2069. >thumb_down_alt</i
  2070. >{{ currentSong.dislikes }}
  2071. </button>
  2072. </div>
  2073. <div id="ratings" v-else>
  2074. <!-- Disabled Like Song Button -->
  2075. <button
  2076. class="button is-success disabled"
  2077. id="like-song"
  2078. content="Ratings have not been loaded yet"
  2079. v-tippy="{ theme: 'info' }"
  2080. >
  2081. <i
  2082. class="material-icons icon-with-button"
  2083. >thumb_up_alt</i
  2084. >
  2085. </button>
  2086. <!-- Disabled Dislike Song Button -->
  2087. <button
  2088. class="button is-danger disabled"
  2089. id="dislike-song"
  2090. content="Ratings have not been loaded yet"
  2091. v-tippy="{ theme: 'info' }"
  2092. >
  2093. <i
  2094. class="material-icons icon-with-button"
  2095. >thumb_down_alt</i
  2096. >
  2097. </button>
  2098. </div>
  2099. <!-- Disabled Add Song To Playlist Button & Dropdown -->
  2100. <div id="add-song-to-playlist">
  2101. <div class="control has-addons">
  2102. <button
  2103. class="button is-primary disabled"
  2104. content="Log in to add songs to playlist"
  2105. v-tippy="{ theme: 'info' }"
  2106. >
  2107. <i class="material-icons"
  2108. >queue</i
  2109. >
  2110. </button>
  2111. </div>
  2112. </div>
  2113. </div>
  2114. </div>
  2115. </div>
  2116. <p
  2117. class="player-container nothing-here-text"
  2118. v-if="noSong"
  2119. >
  2120. No song is currently playing
  2121. </p>
  2122. <div v-if="!noSong" id="current-next-row">
  2123. <div
  2124. id="currently-playing-container"
  2125. class="quadrant"
  2126. :class="{ 'no-currently-playing': noSong }"
  2127. >
  2128. <song-item
  2129. :key="`songItem-currentSong-${currentSong._id}`"
  2130. :song="currentSong"
  2131. :duration="false"
  2132. :requested-by="true"
  2133. header="Currently Playing.."
  2134. />
  2135. </div>
  2136. <div
  2137. v-if="nextSong"
  2138. id="next-up-container"
  2139. class="quadrant"
  2140. >
  2141. <song-item
  2142. :key="`songItem-nextSong-${nextSong._id}`"
  2143. :song="nextSong"
  2144. :duration="false"
  2145. :requested-by="true"
  2146. header="Next Up.."
  2147. />
  2148. </div>
  2149. </div>
  2150. </div>
  2151. </div>
  2152. </div>
  2153. <main-footer />
  2154. </div>
  2155. <floating-box
  2156. id="player-debug-box"
  2157. ref="playerDebugBox"
  2158. title="Station Debug"
  2159. >
  2160. <template #body>
  2161. <span><b>No song</b>: {{ noSong }}</span>
  2162. <span><b>Song id</b>: {{ currentSong._id }}</span>
  2163. <span><b>YouTube id</b>: {{ currentSong.youtubeId }}</span>
  2164. <span><b>Duration</b>: {{ currentSong.duration }}</span>
  2165. <span
  2166. ><b>Skip duration</b>: {{ currentSong.skipDuration }}</span
  2167. >
  2168. <span><b>Loading</b>: {{ loading }}</span>
  2169. <span><b>Can autoplay</b>: {{ canAutoplay }}</span>
  2170. <span><b>Player ready</b>: {{ playerReady }}</span>
  2171. <span
  2172. ><b>Attempts to play video</b>:
  2173. {{ attemptsToPlayVideo }}</span
  2174. >
  2175. <span
  2176. ><b>Last time requested if can autoplay</b>:
  2177. {{ lastTimeRequestedIfCanAutoplay }}</span
  2178. >
  2179. <span><b>Seeking</b>: {{ seeking }}</span>
  2180. <span><b>Playback rate</b>: {{ playbackRate }}</span>
  2181. <span><b>System difference</b>: {{ systemDifference }}</span>
  2182. <span><b>Time before paused</b>: {{ timeBeforePause }}</span>
  2183. <span><b>Time paused</b>: {{ timePaused }}</span>
  2184. <span><b>Time elapsed</b>: {{ timeElapsed }}</span>
  2185. <span><b>Volume slider value</b>: {{ volumeSliderValue }}</span>
  2186. <span><b>Local paused</b>: {{ localPaused }}</span>
  2187. <span><b>Station paused</b>: {{ stationPaused }}</span>
  2188. <span :title="new Date(pausedAt).toString()"
  2189. ><b>Paused at</b>: {{ pausedAt }}</span
  2190. >
  2191. <span :title="new Date(startedAt).toString()"
  2192. ><b>Started at</b>: {{ startedAt }}</span
  2193. >
  2194. <span
  2195. ><b>Requests enabled</b>:
  2196. {{ station.requests.enabled }}</span
  2197. >
  2198. <span
  2199. ><b>Requests access</b>: {{ station.requests.access }}</span
  2200. >
  2201. <span><b>Requests limit</b>: {{ station.requests.limit }}</span>
  2202. <span
  2203. ><b>Auto requesting playlists</b>:
  2204. {{
  2205. autoRequest.map(playlist => playlist._id).join(", ")
  2206. }}</span
  2207. >
  2208. <span
  2209. ><b>Autofill enabled</b>:
  2210. {{ station.autofill.enabled }}</span
  2211. >
  2212. <span><b>Autofill limit</b>: {{ station.autofill.limit }}</span>
  2213. <span><b>Autofill mode</b>: {{ station.autofill.mode }}</span>
  2214. <span><b>Skip votes loaded</b>: {{ skipVotesLoaded }}</span>
  2215. <span
  2216. ><b>Skip votes current</b>:
  2217. {{
  2218. currentSong.skipVotesCurrent
  2219. ? currentSong.skipVotesCurrent
  2220. : "N/A"
  2221. }}</span
  2222. >
  2223. <span
  2224. ><b>Skip votes</b>:
  2225. {{ skipVotesLoaded ? currentSong.skipVotes : "N/A" }}</span
  2226. >
  2227. <span><b>Ratings loaded</b>: {{ ratingsLoaded }}</span>
  2228. <span
  2229. ><b>Ratings</b>:
  2230. {{
  2231. ratingsLoaded
  2232. ? `${currentSong.likes} / ${currentSong.dislikes}`
  2233. : "N/A"
  2234. }}</span
  2235. >
  2236. <span><b>Own ratings loaded</b>: {{ ownRatingsLoaded }}</span>
  2237. <span
  2238. ><b>Own ratings</b>:
  2239. {{
  2240. ownRatingsLoaded
  2241. ? `${currentSong.liked} / ${currentSong.disliked}`
  2242. : "N/A"
  2243. }}</span
  2244. >
  2245. </template>
  2246. </floating-box>
  2247. <floating-box
  2248. id="keyboardShortcutsHelper"
  2249. ref="keyboardShortcutsHelper"
  2250. title="Station Keyboard Shortcuts"
  2251. >
  2252. <template #body>
  2253. <div>
  2254. <div
  2255. v-if="
  2256. hasPermission('stations.playback.toggle') ||
  2257. hasPermission('stations.skip')
  2258. "
  2259. >
  2260. <span class="biggest"><b>Admin/owner</b></span>
  2261. <span><b>Ctrl + Space</b> - Pause/resume station</span>
  2262. <span><b>Ctrl + Numpad right</b> - Skip station</span>
  2263. </div>
  2264. <hr
  2265. v-if="
  2266. hasPermission('stations.playback.toggle') ||
  2267. hasPermission('stations.skip')
  2268. "
  2269. />
  2270. <div>
  2271. <span class="biggest"><b>Volume</b></span>
  2272. <span
  2273. ><b>Ctrl + Numpad up/down</b> - Volume up/down
  2274. 10%</span
  2275. >
  2276. <span
  2277. ><b>Ctrl + Shift + Numpad up/down</b> - Volume
  2278. up/down 10%</span
  2279. >
  2280. </div>
  2281. <hr />
  2282. <div>
  2283. <span class="biggest"><b>Misc</b></span>
  2284. <span><b>Ctrl + D</b> - Toggles debug box</span>
  2285. <span><b>Ctrl + Shift + D</b> - Resets debug box</span>
  2286. <span
  2287. ><b>Ctrl + /</b> - Toggles keyboard shortcuts
  2288. box</span
  2289. >
  2290. <span
  2291. ><b>Ctrl + Shift + /</b> - Resets keyboard shortcuts
  2292. box</span
  2293. >
  2294. </div>
  2295. </div>
  2296. </template>
  2297. </floating-box>
  2298. <Z404 v-if="!exists"></Z404>
  2299. </div>
  2300. </template>
  2301. <style lang="less">
  2302. #stationPlayer {
  2303. position: absolute;
  2304. top: 0;
  2305. left: 0;
  2306. width: 100%;
  2307. height: 100%;
  2308. }
  2309. #currently-playing-container,
  2310. #next-up-container {
  2311. .song-item {
  2312. .thumbnail {
  2313. min-width: 130px;
  2314. width: 130px;
  2315. height: 130px;
  2316. }
  2317. }
  2318. }
  2319. #control-bar-container
  2320. #right-buttons
  2321. .tippy-box[data-theme~="dropdown"]
  2322. .nav-dropdown-items {
  2323. padding-bottom: 0 !important;
  2324. }
  2325. </style>
  2326. <style lang="less" scoped>
  2327. #page-loader-container {
  2328. height: inherit;
  2329. #page-loader-content {
  2330. height: inherit;
  2331. position: absolute;
  2332. max-width: 100%;
  2333. width: 1800px;
  2334. transform: translateX(-50%);
  2335. left: 50%;
  2336. }
  2337. #page-loader-layout {
  2338. height: inherit;
  2339. width: 100%;
  2340. }
  2341. }
  2342. #mobile-progress-animation {
  2343. width: 50px;
  2344. animation: rotate 0.8s infinite linear;
  2345. border: 8px solid var(--primary-color);
  2346. border-right-color: transparent;
  2347. border-radius: 50%;
  2348. height: 50px;
  2349. position: absolute;
  2350. top: 50%;
  2351. left: 50%;
  2352. display: none;
  2353. }
  2354. @keyframes rotate {
  2355. 0% {
  2356. transform: rotate(0deg);
  2357. }
  2358. 100% {
  2359. transform: rotate(360deg);
  2360. }
  2361. }
  2362. .nav,
  2363. .button.is-primary {
  2364. background-color: var(--primary-color) !important;
  2365. }
  2366. .button.is-primary:hover,
  2367. .button.is-primary:focus {
  2368. filter: brightness(90%);
  2369. }
  2370. .night-mode {
  2371. #currently-playing-container,
  2372. #next-up-container,
  2373. #control-bar-container,
  2374. .quadrant:not(#sidebar-container),
  2375. .player-container {
  2376. background-color: var(--dark-grey-3) !important;
  2377. }
  2378. #video-container,
  2379. #control-bar-container,
  2380. .quadrant:not(#sidebar-container),
  2381. .player-container {
  2382. border: 0 !important;
  2383. }
  2384. #seeker-bar-container {
  2385. background-color: var(--dark-grey-3) !important;
  2386. }
  2387. #dropdown-toggle {
  2388. background-color: var(--dark-grey-2) !important;
  2389. border: 0;
  2390. i {
  2391. color: var(--white);
  2392. }
  2393. }
  2394. }
  2395. #station-outer-container {
  2396. margin: 0 auto;
  2397. padding: 20px 40px;
  2398. min-height: calc(100vh - 64px);
  2399. width: 100%;
  2400. max-width: 1800px;
  2401. display: flex;
  2402. #station-inner-container {
  2403. width: 100%;
  2404. min-height: calc(100vh - 428px);
  2405. display: flex;
  2406. flex-direction: row;
  2407. flex-wrap: wrap;
  2408. .row {
  2409. display: flex;
  2410. flex-direction: row;
  2411. max-width: 100%;
  2412. }
  2413. .column {
  2414. display: flex;
  2415. flex-direction: column;
  2416. }
  2417. .quadrant {
  2418. border-radius: @border-radius;
  2419. margin: 10px;
  2420. overflow: hidden;
  2421. }
  2422. .quadrant:not(#sidebar-container) {
  2423. background-color: var(--white);
  2424. border: 1px solid var(--light-grey-3);
  2425. }
  2426. #station-left-column,
  2427. #station-right-column {
  2428. padding: 0;
  2429. }
  2430. #current-next-row {
  2431. display: flex;
  2432. flex-direction: row;
  2433. #currently-playing-container,
  2434. #next-up-container {
  2435. overflow: hidden;
  2436. flex-basis: 50%;
  2437. .song-item {
  2438. border: unset;
  2439. }
  2440. .nothing-here-text {
  2441. height: 100%;
  2442. }
  2443. }
  2444. > div:only-child {
  2445. flex: 1 !important;
  2446. flex-basis: 100% !important;
  2447. }
  2448. }
  2449. .player-container {
  2450. height: inherit;
  2451. background-color: var(--white);
  2452. display: flex;
  2453. flex-direction: column;
  2454. border: 1px solid var(--light-grey-3);
  2455. border-radius: @border-radius;
  2456. overflow: hidden;
  2457. &.nothing-here-text {
  2458. margin: 10px;
  2459. flex: 1;
  2460. min-height: 487px;
  2461. }
  2462. #video-container {
  2463. position: relative;
  2464. padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
  2465. height: 0;
  2466. overflow: hidden;
  2467. .player-cannot-autoplay {
  2468. position: relative;
  2469. width: 100%;
  2470. height: 100%;
  2471. bottom: calc(100% + 5px);
  2472. background: var(--primary-color);
  2473. display: flex;
  2474. align-items: center;
  2475. justify-content: center;
  2476. p {
  2477. color: var(--white);
  2478. font-size: 26px;
  2479. text-align: center;
  2480. }
  2481. }
  2482. }
  2483. #seeker-bar-container {
  2484. background-color: var(--white);
  2485. position: relative;
  2486. height: 7px;
  2487. display: block;
  2488. width: 100%;
  2489. #seeker-bar {
  2490. background-color: var(--primary-color);
  2491. top: 0;
  2492. left: 0;
  2493. bottom: 0;
  2494. position: absolute;
  2495. width: 100%;
  2496. }
  2497. .seeker-bar-cover {
  2498. position: absolute;
  2499. top: 0;
  2500. right: 0;
  2501. bottom: 0;
  2502. background-color: inherit;
  2503. }
  2504. }
  2505. #control-bar-container {
  2506. display: flex;
  2507. justify-content: space-around;
  2508. padding: 10px 0;
  2509. width: 100%;
  2510. background: var(--white);
  2511. flex-direction: column;
  2512. flex-flow: wrap;
  2513. .button:not(#dropdown-toggle) {
  2514. width: 75px;
  2515. }
  2516. #left-buttons,
  2517. #right-buttons {
  2518. margin: 3px;
  2519. }
  2520. #left-buttons {
  2521. display: flex;
  2522. .button:not(:first-of-type) {
  2523. margin-left: 5px;
  2524. }
  2525. .disabled {
  2526. filter: grayscale(0.4);
  2527. }
  2528. }
  2529. #duration {
  2530. margin: 3px;
  2531. display: flex;
  2532. align-items: center;
  2533. p {
  2534. font-size: 22px;
  2535. /** prevents duration width slightly varying and shifting other controls slightly */
  2536. width: 150px;
  2537. text-align: center;
  2538. }
  2539. }
  2540. #volume-control {
  2541. margin: 3px;
  2542. margin-top: 0;
  2543. display: flex;
  2544. align-items: center;
  2545. cursor: pointer;
  2546. .volume-slider {
  2547. width: 100%;
  2548. padding: 0 15px;
  2549. background: transparent;
  2550. min-width: 100px;
  2551. }
  2552. input[type="range"] {
  2553. -webkit-appearance: none;
  2554. margin: 7.3px 0;
  2555. }
  2556. input[type="range"]:focus {
  2557. outline: none;
  2558. }
  2559. input[type="range"]::-webkit-slider-runnable-track {
  2560. width: 100%;
  2561. height: 5.2px;
  2562. cursor: pointer;
  2563. box-shadow: 0;
  2564. background: var(--light-grey-3);
  2565. border-radius: @border-radius;
  2566. border: 0;
  2567. }
  2568. input[type="range"]::-webkit-slider-thumb {
  2569. box-shadow: 0;
  2570. border: 0;
  2571. height: 19px;
  2572. width: 19px;
  2573. border-radius: 100%;
  2574. background: var(--primary-color);
  2575. cursor: pointer;
  2576. -webkit-appearance: none;
  2577. margin-top: -6.5px;
  2578. }
  2579. input[type="range"]::-moz-range-track {
  2580. width: 100%;
  2581. height: 5.2px;
  2582. cursor: pointer;
  2583. box-shadow: 0;
  2584. background: var(--light-grey-3);
  2585. border-radius: @border-radius;
  2586. border: 0;
  2587. }
  2588. input[type="range"]::-moz-range-thumb {
  2589. box-shadow: 0;
  2590. border: 0;
  2591. height: 19px;
  2592. width: 19px;
  2593. border-radius: 100%;
  2594. background: var(--primary-color);
  2595. cursor: pointer;
  2596. -webkit-appearance: none;
  2597. margin-top: -6.5px;
  2598. }
  2599. input[type="range"]::-ms-track {
  2600. width: 100%;
  2601. height: 5.2px;
  2602. cursor: pointer;
  2603. box-shadow: 0;
  2604. background: var(--light-grey-3);
  2605. border-radius: @border-radius;
  2606. }
  2607. input[type="range"]::-ms-fill-lower {
  2608. background: var(--light-grey-3);
  2609. border: 0;
  2610. border-radius: 0;
  2611. box-shadow: 0;
  2612. }
  2613. input[type="range"]::-ms-fill-upper {
  2614. background: var(--light-grey-3);
  2615. border: 0;
  2616. border-radius: 0;
  2617. box-shadow: 0;
  2618. }
  2619. input[type="range"]::-ms-thumb {
  2620. box-shadow: 0;
  2621. border: 0;
  2622. height: 15px;
  2623. width: 15px;
  2624. border-radius: 100%;
  2625. background: var(--primary-color);
  2626. cursor: pointer;
  2627. -webkit-appearance: none;
  2628. margin-top: 1.5px;
  2629. }
  2630. }
  2631. #right-buttons {
  2632. display: flex;
  2633. #dropdown-toggle {
  2634. width: 35px;
  2635. }
  2636. #dislike-song,
  2637. #add-song-to-playlist .button:not(#dropdown-toggle) {
  2638. margin-left: 5px;
  2639. }
  2640. #ratings {
  2641. display: flex;
  2642. &.liked #dislike-song,
  2643. &.disliked #like-song {
  2644. background-color: var(--grey) !important;
  2645. }
  2646. #like-song.disabled,
  2647. #dislike-song.disabled {
  2648. filter: grayscale(0.4);
  2649. }
  2650. }
  2651. #add-song-to-playlist {
  2652. display: flex;
  2653. flex-direction: column-reverse;
  2654. #nav-dropdown {
  2655. position: absolute;
  2656. margin-left: 4px;
  2657. margin-bottom: 36px;
  2658. .nav-dropdown-items {
  2659. position: relative;
  2660. right: calc(100% - 110px);
  2661. }
  2662. }
  2663. .control {
  2664. width: fit-content;
  2665. margin-bottom: 0 !important;
  2666. button.disabled {
  2667. filter: grayscale(0.4);
  2668. border-radius: @border-radius;
  2669. &::after {
  2670. margin-right: 100%;
  2671. }
  2672. }
  2673. }
  2674. }
  2675. }
  2676. }
  2677. }
  2678. #sidebar-container {
  2679. border-top: 0;
  2680. position: relative;
  2681. height: inherit;
  2682. flex-grow: 1;
  2683. min-height: 350px;
  2684. }
  2685. }
  2686. }
  2687. .footer {
  2688. margin-top: 30px;
  2689. }
  2690. .nyan {
  2691. background: linear-gradient(
  2692. 90deg,
  2693. magenta 0%,
  2694. red 15%,
  2695. orange 30%,
  2696. yellow 45%,
  2697. lime 60%,
  2698. cyan 75%,
  2699. blue 90%,
  2700. magenta 100%
  2701. );
  2702. background-size: 200%;
  2703. animation: nyanMoving 4s linear infinite;
  2704. }
  2705. @keyframes nyanMoving {
  2706. 0% {
  2707. background-position: 0% 0%;
  2708. }
  2709. 100% {
  2710. background-position: -200% 0%;
  2711. }
  2712. }
  2713. .christmas-seeker {
  2714. background: repeating-linear-gradient(
  2715. -45deg,
  2716. var(--white) 0 1rem,
  2717. var(--dark-red) 1rem 2rem
  2718. );
  2719. background-size: 200% 200%;
  2720. animation: christmas 20s linear infinite;
  2721. }
  2722. @keyframes christmas {
  2723. 100% {
  2724. background-position: 80% 100%;
  2725. }
  2726. }
  2727. .bg-bubbles {
  2728. top: 0;
  2729. left: 0;
  2730. width: 100%;
  2731. height: 100%;
  2732. position: absolute;
  2733. z-index: -1;
  2734. margin: 0px;
  2735. pointer-events: none;
  2736. }
  2737. .bg-bubbles li {
  2738. position: absolute;
  2739. list-style: none;
  2740. display: block;
  2741. width: 40px;
  2742. height: 40px;
  2743. border-radius: 100px;
  2744. background-color: var(--primary-color);
  2745. opacity: 0.15;
  2746. bottom: 0px;
  2747. -webkit-animation: square 25s infinite;
  2748. animation: square 25s infinite;
  2749. -webkit-transition-timing-function: linear;
  2750. transition-timing-function: linear;
  2751. }
  2752. .bg-bubbles li:nth-child(1) {
  2753. left: 10%;
  2754. }
  2755. .bg-bubbles li:nth-child(2) {
  2756. left: 20%;
  2757. width: 80px;
  2758. height: 80px;
  2759. -webkit-animation-delay: 2s;
  2760. animation-delay: 2s;
  2761. -webkit-animation-duration: 17s;
  2762. animation-duration: 17s;
  2763. }
  2764. .bg-bubbles li:nth-child(3) {
  2765. left: 25%;
  2766. -webkit-animation-delay: 4s;
  2767. animation-delay: 4s;
  2768. }
  2769. .bg-bubbles li:nth-child(4) {
  2770. left: 40%;
  2771. width: 60px;
  2772. height: 60px;
  2773. -webkit-animation-duration: 22s;
  2774. animation-duration: 22s;
  2775. background-color: var(--primary-color);
  2776. opacity: 0.25;
  2777. }
  2778. .bg-bubbles li:nth-child(5) {
  2779. left: 70%;
  2780. }
  2781. .bg-bubbles li:nth-child(6) {
  2782. left: 80%;
  2783. width: 120px;
  2784. height: 120px;
  2785. -webkit-animation-delay: 3s;
  2786. animation-delay: 3s;
  2787. background-color: var(--primary-color);
  2788. opacity: 0.2;
  2789. }
  2790. .bg-bubbles li:nth-child(7) {
  2791. left: 32%;
  2792. width: 160px;
  2793. height: 160px;
  2794. -webkit-animation-delay: 7s;
  2795. animation-delay: 7s;
  2796. }
  2797. .bg-bubbles li:nth-child(8) {
  2798. left: 55%;
  2799. width: 20px;
  2800. height: 20px;
  2801. -webkit-animation-delay: 15s;
  2802. animation-delay: 15s;
  2803. -webkit-animation-duration: 40s;
  2804. animation-duration: 40s;
  2805. }
  2806. .bg-bubbles li:nth-child(9) {
  2807. left: 25%;
  2808. width: 10px;
  2809. height: 10px;
  2810. -webkit-animation-delay: 2s;
  2811. animation-delay: 2s;
  2812. -webkit-animation-duration: 40s;
  2813. animation-duration: 40s;
  2814. background-color: var(--primary-color);
  2815. opacity: 0.3;
  2816. }
  2817. .bg-bubbles li:nth-child(10) {
  2818. left: 80%;
  2819. width: 160px;
  2820. height: 160px;
  2821. -webkit-animation-delay: 11s;
  2822. animation-delay: 11s;
  2823. }
  2824. .experimental-listen-mode-container {
  2825. display: flex;
  2826. flex-direction: column;
  2827. justify-content: center;
  2828. row-gap: 16px;
  2829. padding: 16px 16px;
  2830. .row {
  2831. display: flex;
  2832. flex-direction: row;
  2833. column-gap: 16px;
  2834. .ratings {
  2835. flex: 2;
  2836. display: flex;
  2837. flex-direction: row;
  2838. column-gap: 16px;
  2839. button {
  2840. flex: 1;
  2841. }
  2842. }
  2843. .addToPlaylistDropdown {
  2844. flex: 1;
  2845. .button.is-primary {
  2846. flex: 1;
  2847. }
  2848. }
  2849. }
  2850. }
  2851. /* Tablet view fix */
  2852. @media (max-width: 768px) {
  2853. .bg-bubbles li:nth-child(10) {
  2854. display: none;
  2855. }
  2856. .experimental-listen-mode-container {
  2857. row-gap: 8px;
  2858. .row {
  2859. column-gap: 8px;
  2860. .ratings {
  2861. column-gap: 8px;
  2862. }
  2863. }
  2864. }
  2865. }
  2866. @-webkit-keyframes square {
  2867. 0% {
  2868. -webkit-transform: translateY(0);
  2869. transform: translateY(0);
  2870. }
  2871. 100% {
  2872. -webkit-transform: translateY(-700px) rotate(600deg);
  2873. transform: translateY(-700px) rotate(600deg);
  2874. }
  2875. }
  2876. @keyframes square {
  2877. 0% {
  2878. -webkit-transform: translateY(0);
  2879. transform: translateY(0);
  2880. }
  2881. 100% {
  2882. -webkit-transform: translateY(-700px) rotate(600deg);
  2883. transform: translateY(-700px) rotate(600deg);
  2884. }
  2885. }
  2886. :deep(.nothing-here-text) {
  2887. display: flex;
  2888. align-items: center;
  2889. justify-content: center;
  2890. }
  2891. @media (min-width: 1500px) {
  2892. #station-left-column {
  2893. max-width: 650px;
  2894. }
  2895. #station-right-column {
  2896. max-width: calc(100% - 650px);
  2897. }
  2898. }
  2899. @media (max-width: 1700px) {
  2900. #current-next-row {
  2901. flex-direction: column !important;
  2902. > div {
  2903. flex: 1 !important;
  2904. }
  2905. }
  2906. }
  2907. @media (max-width: 1500px) {
  2908. #mobile-progress-animation {
  2909. display: block;
  2910. }
  2911. #page-loader-container {
  2912. display: none;
  2913. }
  2914. #station-outer-container {
  2915. max-width: 1500px;
  2916. #station-inner-container {
  2917. flex-direction: row;
  2918. #station-left-column {
  2919. #about-station-container #admin-buttons {
  2920. flex-wrap: wrap;
  2921. }
  2922. #sidebar-container {
  2923. min-height: 350px;
  2924. }
  2925. }
  2926. #station-right-column {
  2927. #current-next-row {
  2928. flex-direction: column;
  2929. }
  2930. #control-bar-container {
  2931. #duration,
  2932. #volume-control,
  2933. #right-buttons,
  2934. #left-buttons {
  2935. margin-bottom: 5px;
  2936. justify-content: center;
  2937. }
  2938. #duration {
  2939. order: 1;
  2940. }
  2941. #volume-control {
  2942. order: 2;
  2943. max-width: 400px;
  2944. }
  2945. #right-buttons {
  2946. order: 3;
  2947. flex-wrap: wrap;
  2948. #ratings {
  2949. flex-wrap: wrap;
  2950. }
  2951. }
  2952. #left-buttons {
  2953. order: 4;
  2954. flex-wrap: wrap;
  2955. }
  2956. }
  2957. }
  2958. }
  2959. }
  2960. }
  2961. @media (max-width: 1200px) {
  2962. #station-outer-container {
  2963. max-width: 900px;
  2964. padding: 0;
  2965. #station-inner-container {
  2966. flex-direction: column-reverse;
  2967. flex-wrap: nowrap;
  2968. }
  2969. }
  2970. }
  2971. @media (max-width: 990px) {
  2972. #station-outer-container {
  2973. min-height: calc(
  2974. 100vh - 256px
  2975. ); // Height of nav (64px) + height of footer (190px)
  2976. }
  2977. }
  2978. </style>