index.vue 74 KB

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