index.html 84 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="apple-mobile-web-app-capable" content="yes" />
  6. <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
  7. <meta name="theme-color" content="#4b75ff">
  8. <link rel="stylesheet" href="../script/tocas/tocas.css">
  9. <link rel="stylesheet" href="./main.css">
  10. <script src="../script/tocas/tocas.js"></script>
  11. <script src="../script/jquery.min.js"></script>
  12. <script src="../script/ao_module.js"></script>
  13. <!-- Handle native playback on Chrome Andoird-->
  14. <script src="native.js"></script>
  15. <link rel="manifest" crossorigin="use-credentials" href="manifest.json">
  16. <title>AirMusic</title>
  17. </head>
  18. <body>
  19. <div id="mainMenu" class="ts basic fluid AMmenu menu bottomBlue" style="z-index:80;position:fixed;position:top:0px;left:0px;width:100%;">
  20. <button class="ts item icon noBorder AMmenu button" onClick="toggleLeftMenu();"><i class="content icon"></i></button>
  21. <div class="item noBorder AMmenu" style="padding-right:0px;padding-top:12px;"><i id="AMmenuIcon" class="music icon large whiteFont"></i></div>
  22. <div class="item noBorder AMmenu" style="padding-left:3px;padding-top:3px;padding-bottom:5px;min-width:50%;">
  23. <div class="ts header whiteFont">
  24. <div id="interfaceTitle" style="display:inline;">Music</div>
  25. <div id="interfaceDetails" class="sub header" style="font-size:80%;line-height:1em;">[0 songs]</div>
  26. </div>
  27. </div>
  28. <button class="ts right item icon AMmenu noBorder button" onClick="enterSearchMode();"><i class="search icon"></i></button>
  29. <!-- <button class="ts right item icon AMmenu noBorder button"><i class="ellipsis vertical icon"></i></button> -->
  30. </div>
  31. <div id="searchModeMenu" class="ts basic fluid AMmenu menu bottomBlue" style="z-index:85;position:fixed;position:top:0px;left:0px;width:100%;height:51px;display:none;">
  32. <button class="ts item icon noBorder AMmenu button" onClick="exitSearchMode();"><i class="arrow left icon"></i></button>
  33. <div class="ts fluid input" >
  34. <input id="searchInputBar" type="text" style="background-color:rgb(48, 48, 48);border:0px !important;border-bottom:2px solid rgb(60, 60, 60) !important;margin-bottom:3px;color:white;" placeholder="Search Music">
  35. </div>
  36. <button class="ts right item icon AMmenu noBorder button" onClick="searchSong();"><i class="search icon"></i></button>
  37. </div>
  38. <!-- The main list that display the current information-->
  39. <div id="mainList">
  40. </div>
  41. <!-- Advance functions config menu-->
  42. <div id="showmoreUIcover" style="position:fixed;left:0px;top:0px;width:100%;height:100%;background:rgba(30,30,30,0.7);z-index:95;display:none;" onClick="hideShowMoreMenu();"></div>
  43. <div id="showMoreUI" class="showMoreMenus" style="display:none;">
  44. <div class="ts large header whiteFont songTitle">N/A</div>
  45. <div class="showMoreMenuItem" onClick="playFromShowMoreMenu();">Play</div>
  46. <div class="showMoreMenuItem" onclick='addToPlaylistFromMoreMenu();'>Add to Playlist</div>
  47. <div class="showMoreMenuItem playlistonly" onclick="removeFromPlylistFromMoreMenu();">Remove from current Playlist</div>
  48. <div class="showMoreMenuItem" onClick="searchYoutubeViaShowMore();">Search on Youtube</div>
  49. <div class="showMoreMenuItem">Edit Tag</div>
  50. <div class="showMoreMenuItem">Share</div>
  51. <div class="showMoreMenuItem" onClick="startRelatedSearch();">Related Search</div>
  52. <div class="showMoreMenuItem" onClick="showFileInfo();">File Information</div>
  53. <div class="topRightCorner songID" align="center" style="margin-top:10px !important;padding-top:3px !important;">-1</div>
  54. </div>
  55. <div id="showFileInfo" class="showMoreMenus" style="display:none;">
  56. <div class="ts large header">
  57. <span class="filename whiteFont">Title</span>
  58. <div class="sub header rawname whiteFont" style="word-break: break-all !important; font-size:80%;">Storage Name</div>
  59. </div>
  60. <div class="ts list whiteFont">
  61. <div class="item whiteFont">Storage Location:   <span class="filepath" style="word-break:break-all;">N/A</span></div>
  62. <div class="item whiteFont">File Size:   <span class="filesize">N/A</span></div>
  63. <div class="item whiteFont">Last Modification Date:   <span class="filedate">N/A</span></div>
  64. </div>
  65. </div>
  66. <!-- Side bar -->
  67. <div id="sideBarCover" style="position:fixed;left:0px;top:0px;width:100%;height:100%;background:rgba(30,30,30,0.7);z-index:50;display:none;" onClick="toggleLeftMenu();"></div>
  68. <div id="leftSideBar" class="leftsb" style="max-width:60%;height:100%;z-index:90;display:none;">
  69. <div class="leftsbObject sidebarBanner">
  70. <img class="ts tiny middle aligned image" src="img/main_icon.png" style="max-width: 50px;"><h5 class="whiteFont" style="display:inline;padding-left:8px;">AirMusic</h5>
  71. </div>
  72. <div class="leftsbObject sbSelectable sbPaddingIn" style="font-size:80%;" onClick="loadSongList();setStorage('viewingTab','music');">
  73. <div class="ts header">
  74. <i class="music tiny icon whiteFont"></i>
  75. <div class="content whiteFont">
  76. Music
  77. </div>
  78. </div>
  79. </div>
  80. <div class="leftsbObject sbSelectable sbPaddingIn" style="font-size:80%;" onClick="loadFolderView();setStorage('viewingTab','folder');">
  81. <div class="ts header">
  82. <i class="folder tiny icon whiteFont"></i>
  83. <div class="content whiteFont">
  84. Folder
  85. </div>
  86. </div>
  87. </div>
  88. <div class="leftsbObject sbSelectable sbPaddingIn" style="font-size:80%;" onClick="loadPlaylistView(); setStorage('viewingTab','playlist');">
  89. <div class="ts header">
  90. <i class="align justify tiny icon whiteFont"></i>
  91. <div class="content whiteFont">
  92. Playlists
  93. </div>
  94. </div>
  95. </div>
  96. <div class="leftsbObject sbSelectable sbPaddingIn" style="font-size:80%;" onClick="loadNetworkView(); setStorage('viewingTab','network');">
  97. <div class="ts header">
  98. <i class="world tiny icon whiteFont"></i>
  99. <div class="content whiteFont">
  100. Network
  101. </div>
  102. </div>
  103. </div>
  104. <!--
  105. <div class="leftsbObject sbSelectable sbPaddingIn" style="font-size:80%;" onClick="">
  106. <div class="ts header">
  107. <i class="upload icon whiteFont"></i>
  108. <div class="content whiteFont">
  109. Upload
  110. </div>
  111. </div>
  112. </div>
  113. -->
  114. <div class="leftsbObject sbSelectable sbPaddingIn" style="font-size:80%;border-top: 2px solid #4a4a4a;">
  115. <div class="ts header">
  116. <i class="setting tiny icon whiteFont"></i>
  117. <div class="content whiteFont">
  118. Settings
  119. </div>
  120. </div>
  121. </div>
  122. </div>
  123. <!-- Mini player controller put on the bottom side of the list interface-->
  124. <div id="miniPlayer" class="hidden">
  125. <div style="padding-left:20px;padding-top:5px;" >
  126. <div class="ts header selectable" style="margin:0px !important;width:300px;cursor:pointer;" onClick="showMainPlayerInterface();">
  127. <i class="music icon whiteFont" style="overflow:hidden;"></i>
  128. <div class="content whiteFont" style="padding-top:5px;line-height:1em;">
  129. <div id="miniPlayerDisplayName" style="text-overflow: ellipsis;overflow: hidden;max-width:200px; white-space: nowrap;">N/A</div>
  130. <div id="miniPlayerInformation" class="sub header" style="color: #c7c7c7;size:95%;">No information</div>
  131. </div>
  132. </div>
  133. </div>
  134. <div id="miniPlayerIDtab" class="miniPlayer minitab">
  135. 0/0
  136. </div>
  137. <div class="miniPlayerControls">
  138. <button class="miniPlayer selectable" style="font-size:90%;" onClick="previousSong();"><i class="step backward icon whiteFont"></i></button>
  139. <button class="miniPlayer selectable" style="font-size:120%;" onClick="togglePlayMode();"><i class="play icon whiteFont PlayButton"></i></button>
  140. <button class="miniPlayer selectable" style="font-size:90%;" onClick="nextSong();"><i class="step forward icon whiteFont "></i></button>
  141. </div>
  142. </div>
  143. <!-- Main interface for player and audio controller-->
  144. <div id="playerInterface" style="display:none;">
  145. <div id="infoBar" class="whiteFont" style="padding:20px;" align="center">
  146. <!-- Top Information Bar-->
  147. <div class="whiteFont songTitleWrapper" style="margin:0px;display:inline-block;">
  148. <div id="mainPlayerSongTitle" class="whiteFont" style="font-weight: bold;font-size:120%;">Song Title</div>
  149. <small id="mainPlayerSongDesc">This is some small text for display</small>
  150. </div>
  151. <div style="position:absolute;left:20px;top:30px;cursor:pointer;" onClick="hideMainPlayerInterface();">
  152. <i class="large chevron left icon"></i>
  153. </div>
  154. <div style="position:absolute;right:20px;top:30px;cursor:pointer;" onClick='$("#dropdownSonglist").slideDown();'>
  155. <i class="large content icon"></i>
  156. </div>
  157. </div>
  158. <div style="padding-left:20px; padding-right:20px;padding-bottom:5px;" align="center">
  159. <!-- Function Menu Bar-->
  160. <div class="ts grid">
  161. <div class="two wide column"><button style="cursor: pointer;" onclick="showPlaylistInterface();"><i class="large plus icon whiteFont"></i></button></div>
  162. <div class="two wide column"><button id="downloadBtn" style="cursor: pointer;" onClick="downloadPlayingSong();"><i class="large download icon whiteFont"></i></button></div>
  163. <div class="two wide column"><button style="cursor: pointer;" onClick="openInFileExplorer();"><i class="large folder open icon whiteFont"></i></button></div>
  164. <div class="two wide column desktopOnly"><button style="cursor: pointer;" onClick="mute();" ><i class="large volume off icon whiteFont"></i></button></div>
  165. <div class="two wide column desktopOnly"><button style="cursor: pointer;" onClick="addAudioVolume(-0.05);"><i class="large volume down icon whiteFont"></i></button></div>
  166. <div class="two wide column desktopOnly"><button style="cursor: pointer;" onClick="addAudioVolume(0.05);"><i class="large volume up icon whiteFont"></i></button></div>
  167. <div class="two wide column"><button style="cursor: pointer;" onClick="showTimerInterface();"><i class="large clock icon whiteFont"></i></button></div>
  168. <div class="two wide column"><button style="cursor: pointer;" onClick="showSettingInterface();"><i class="large setting icon whiteFont"></i></button></div>
  169. </div>
  170. <div id="volumeGUI">
  171. <i class="volume off large icon whiteFont" style="position:absolute;left:12%;top:10px;"></i>
  172. <div class="ts tiny progress">
  173. <div id="volBar" class="bar" style="width: 40%"></div>
  174. </div>
  175. <i class="volume up large icon whiteFont" style="position:absolute;right:12%;top:10px;"></i>
  176. </div>
  177. </div>
  178. <!-- Download progress bar-->
  179. <div id="downloadProgressBar" class="ts attached fluid tiny progress" style="background-color:rgba(20, 20, 20, 0.9);display:none;">
  180. <div class="bar" style="width: 0%;background-color:rgb(75, 117, 255) !important;"></div>
  181. </div>
  182. <div id="albumnArt" align="center">
  183. <img id="albumnArtImage" style="max-width: 80%;" src="img/default.png">
  184. </div>
  185. <div id="mainPlayerControlInterface">
  186. <!-- main control interface-->
  187. <div style="width:100%;" align="center">
  188. <div id="progressTime">
  189. 0:00
  190. </div>
  191. <div id="mainPlayerMiniTab" class="mainPlayer minitab">
  192. 0/0
  193. </div>
  194. <div id="remainTime">
  195. -0:00
  196. </div>
  197. </div>
  198. <div style="position:absolute;width:100%;left:0px;bottom:0px;">
  199. <div style="padding-left:10px;padding-right:10px;">
  200. <div class="ts small primary progress">
  201. <div id="audioProgressBar" class="bar" style="width: 100%; background: #4b75ff;"></div>
  202. </div>
  203. </div>
  204. <div class="mainControlButtons">
  205. <button style="font-size:90%;padding:15px;" onClick="previousSong();"><i class="step backward icon whiteFont"></i></button>
  206. <button style="font-size:130%;" onClick="togglePlayMode();"><i class="play icon whiteFont PlayButton"></i></button>
  207. <button style="font-size:90%;padding:15px;" onClick="nextSong();"><i class="step forward icon whiteFont "></i></button>
  208. </div>
  209. <div id="randomModeButton" style="position: absolute; left:30px;bottom:20px;" onClick="toggleRandomMode(this);">
  210. <i class="large random icon disabled"></i>
  211. </div>
  212. <div id="repeatModeButton" style="position: absolute; right:30px;bottom:20px;" onClick="toggleRepeatMode(this);">
  213. <i class="large retweet icon disabled"></i>
  214. <p class="whiteFont singleLoop" style="position:absolute;right:0px;bottom:0px;margin-bottom:-13px;margin-right:-2px;display:none;">1</p>
  215. </div>
  216. </div>
  217. </div>
  218. <audio id="mainAudioPlayer" style="display:none;" src=""></audio>
  219. <div id="dropdownSonglist" class="dropdownMusicList" style="display:none;">
  220. <div class="dropdownMusicListMiniMenu">
  221. <i class="icons" style="margin-right:8px;">
  222. <i class="content icon"></i>
  223. <i class="corner music icon" style='color:#333333'></i>
  224. </i>
  225. Now Playing
  226. <div style="position:absolute;top:3px;right:5px;">
  227. [ <span id="dropdownListSongCount">N/A</span> songs / <span id="dropdownListIDCount">N/A</span> MB ] <button onClick='$("#dropdownSonglist").slideUp();' style="cursor:pointer;"><i class="caret up icon whiteFont"></i></button>
  228. </div>
  229. </div>
  230. <div id="currentPlayingMainList" style="overflow-x:hidden;">
  231. </div>
  232. <div class="dropdownMusicListBottom" align="center" onClick='$("#dropdownSonglist").slideUp();'><i class="caret up icon"></i></div>
  233. </div>
  234. </div>
  235. <!-- Quick Menus and other tool windows-->
  236. <!-- Timer control interface-->
  237. <div id="timerInterface" class="quickMenu">
  238. <h4 class="whiteFont">Countdown Timer</h4>
  239. <br>
  240. <div id="timerSettingInterface" style="width:100%;" align="center">
  241. <div>
  242. <div class="ts statistic">
  243. <div class="label whiteFont">hours</div>
  244. <div id="timerHour" class="value whiteFont">0</div>
  245. </div>
  246. <div class="ts statistic">
  247. <div class="label whiteFont">minutes</div>
  248. <div id="timerMinute" class="value whiteFont">0</div>
  249. </div>
  250. </div>
  251. <div>
  252. <div class="ts icon mini buttons">
  253. <button class="ts inverted button" onClick="addTimer('h',1);"><i class="add icon"></i></button>
  254. <button class="ts inverted button" onClick="addTimer('h','r');"><i class="refresh icon"></i></button>
  255. <button class="ts inverted button" onClick="addTimer('h',-1);"><i class="minus icon"></i></button>
  256. </div>
  257. <div class="ts icon mini buttons">
  258. <button class="ts inverted button" onClick="addTimer('m',10);"><i class="add icon"></i></button>
  259. <button class="ts inverted button" onClick="addTimer('m','r');"><i class="refresh icon"></i></button>
  260. <button class="ts inverted button" onClick="addTimer('m',-1);"><i class="minus icon"></i></button>
  261. </div>
  262. </div>
  263. </div>
  264. <div id="timerCountingInterface" style="width:100%; display:none;" align="center">
  265. <div class="ts statistic">
  266. <div id="remainingUI" class="value whiteFont">0:00:00</div>
  267. <div class="label whiteFont">Remaining</div>
  268. </div>
  269. </div>
  270. <div class="ts divider"></div>
  271. <div>
  272. <div class="ts grid">
  273. <div class="eight wide column">
  274. Times up action
  275. </div>
  276. <div class="eight wide column">
  277. <select id="stopMode" class="ts basic inverted mini dropdown">
  278. <option>Fade Out & Stop</option>
  279. <option>Stop Playing</option>
  280. </select>
  281. </div>
  282. </div>
  283. </div>
  284. <div style="width:100%;position:absolute;left:0px;bottom:0px; margin-bottom: 10px;;" align="center">
  285. <div class="ts grid" >
  286. <div class="eight wide column" style="padding-right: 0px;" align="center"><button class="greenBtn" onClick='hideAllquickMenu();'>Close</button></div>
  287. <div class="eight wide column" style="padding-left: 0px;" align="center"><button class="greenBtn" onClick="toggleCountDown(this);">Start</button></div>
  288. </div>
  289. </div>
  290. </div>
  291. <!-- File properties interface-->
  292. <div id="filepropInterface" class="quickMenu">
  293. <div class="ts header">
  294. <span class="filename whiteFont">Title</span>
  295. <div class="sub header rawname whiteFont" style="word-break:break-all;">Storage Name</div>
  296. </div>
  297. <div class="ts list whiteFont">
  298. <div class="item whiteFont">Storage Location:   <span class="filepath" style="word-break:break-all;">N/A</span></div>
  299. <div class="item whiteFont">File Size:   <span class="filesize">N/A</span></div>
  300. <div class="item whiteFont">Last Modification Date:   <span class="filedate">N/A</span></div>
  301. </div>
  302. </div>
  303. <!-- Setting interface-->
  304. <div id="settingInterface" class="quickMenu">
  305. <div style="">
  306. <div class="ts relaxed list" style="padding:0px !important;">
  307. <div id="settingMenuTitle" class="item whiteFont" style="">N/A</div>
  308. <div class="item selectable whiteFont" onclick="showPlaylistInterface(); $('#settingInterface').fadeOut('fast');"><i class="add icon" style="margin-right:5px;"></i> Add to playlist</div>
  309. <div class="item selectable whiteFont" onClick="openInFileExplorer(); hideAllquickMenu();"><i class="folder open icon" style="margin-right:5px;"></i> Open in File Explorer</div>
  310. <div class="item selectable whiteFont" onClick="searchOnYoutube(); hideAllquickMenu();"><i class="youtube play icon" style="margin-right:5px;"></i>Search on Youtube</div>
  311. <div class="item selectable whiteFont" onClick="showFileInformation();"><i class="file icon" style="margin-right:5px;"></i> File Information</div>
  312. <div class="ts divider"></div>
  313. <div id="closeWebAppButton" class="item selectable whiteFont" onClick="ao_module_close();"><i class="remove icon" style="margin-right:5px;"></i> Exit Application</div>
  314. </div>
  315. </div>
  316. </div>
  317. <!-- Playlist interface-->
  318. <div id="playlistInterface" class="quickMenu">
  319. <div class="ts header">
  320. <span class="whiteFont">Add to Playlist</span>
  321. </div>
  322. <div class="playlist item selectable whiteFont" onclick="addToNewPlaylist();">
  323. <i class="add icon whiteFont"></i> New Playlist
  324. </div>
  325. <!-- playlist list-->
  326. <div id="existsingPlaylist" style="overflow-y: scroll; height: 50%; border: 1px solid white;">
  327. <div class="playlist item selectable whiteFont">
  328. <i class="list icon whiteFont"></i> Test Playlist
  329. </div>
  330. </div>
  331. <br>
  332. <div style="width:100%;position:absolute;left:0px;bottom:0px; margin-bottom: 10px;;" align="center">
  333. <button class="greenBtn" onClick='hideAllquickMenu();'>Close</button>
  334. </div>
  335. <div class="ts snackbar" id="succSnackBar">
  336. <div class="content">
  337. Action Completed
  338. </div>
  339. </div>
  340. </div>
  341. <!-- Utils Interfaces, usually hidden-->
  342. <div id="fadeReturnScreen" class="fadeScreen whiteFont" onClick="hideAllquickMenu();"></div>
  343. <script>
  344. var leftMenuShown = false;
  345. var currentPath = "";
  346. var currentMode = "music";
  347. var rootPaths = [];
  348. var totalMusicCount = 0;
  349. var currentPlaying = false;
  350. var audioElement = $("#mainAudioPlayer");
  351. var audioElementObject = document.getElementById("mainAudioPlayer"); //Directly expose the audio object
  352. var playingFileDetail = []; //[id, filepath]
  353. var displayList = []; //This is the list where the current UI is displaying.
  354. var playingList = []; //This is the list where the player last clicked on an item to play
  355. var randomMode = false;
  356. var repeatMode = 0; //Repeat mode 0 -> No repeat, 1 -> Repeat all 2 -> Repeat one
  357. var updateSystemVolume = true;
  358. var timerMode = false;
  359. var timerRemaining = 0;
  360. var playlistAddPendingFile = ""; //The filepath of the file that is pending to be added to playlist
  361. var timerEndMode = "fade"; //Fade or End, Provide volume fadeout or end immediately while times up
  362. var ua = navigator.userAgent.toLowerCase();
  363. var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
  364. var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
  365. //Embed native mediaSession for Android
  366. if (isChrome){
  367. initNativeMediaPlayer();
  368. }
  369. //Update implementatio nof user agent detection
  370. if (typeof InstallTrigger !== 'undefined'){
  371. ua = "firefox";
  372. }
  373. if (!!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime)){
  374. ua = "chrome";
  375. }
  376. var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
  377. if (isSafari == true){
  378. ua = "safari";
  379. }
  380. $(document).ready(function(){
  381. $("#leftSideBar").animate({left: $("#leftSideBar").width() * -1}, 300);
  382. //Update 7-8-2019, default loading tab is handled over to the returnToPreviousState() function.
  383. //loadSongList();
  384. //Initiate the module's volume to the system's
  385. syncSystemVol();
  386. initAudioListeners();
  387. resizeQuickAdjust(); //Adjust all the DOM items position according to window size
  388. restoreAllSettings(); //Restore all user prefered settings from storage
  389. hideMainPlayerInterface();//Hide the main interface
  390. setTimeout(function(){
  391. $("#playerInterface").show(); //Only show this interface after it has been out of the working area.
  392. },500);
  393. //Hide the exit application button if it is not in Virtual Desktop Mode
  394. if (!ao_module_virtualDesktop){
  395. $("#closeWebAppButton").hide();
  396. }
  397. returnToPreviousState(); //Try to return to previous state using the window hash value
  398. });
  399. function returnToPreviousState(){
  400. var hash = window.location.hash;
  401. if (hash != ""){
  402. //There are state to restore. Restore using the given hash value
  403. hash = decodeURIComponent(hash.substring(1));
  404. var previousState = JSON.parse(hash);
  405. console.log(previousState);
  406. var currentPath = previousState.path;
  407. var playingFileDetail = previousState.pfp;
  408. var initPauseState = previousState.pause;
  409. if (currentPath != ""){
  410. //Create a dummy folder and trick the system to load to the previous states
  411. var a = '<div></div>';
  412. a = $(a).attr("filepath",currentPath);
  413. openFolder(a[0],{playIDAfterOpen: playingFileDetail[0],startPaused: initPauseState});
  414. }else{
  415. //currentpath is empty, aka Music Mode
  416. loadSongList();
  417. }
  418. }else{
  419. //No state to restore. Restore Viewing Tab instead.
  420. var vt = loadStorage("viewingTab");
  421. if (vt != ""){
  422. if (vt == "music"){
  423. loadSongList();
  424. }else if(vt == "folder"){
  425. loadFolderView();
  426. }else if(vt == "playlist"){
  427. loadPlaylistView();
  428. }else if(vt == "network"){
  429. loadNetworkView();
  430. }
  431. }else{
  432. //Default action
  433. loadSongList();
  434. }
  435. }
  436. }
  437. function loadNetworkView(){
  438. currentMode = "network";
  439. }
  440. function initAudioListeners(){
  441. //Initiate audio progress bar and link it to the progress bar on the main player interface
  442. audioElement[0].addEventListener("timeupdate", function() {
  443. var currentTime = audioElement[0].currentTime;
  444. var duration = audioElement[0].duration;
  445. $('#audioProgressBar').css('width',((currentTime +.25)/duration)*100 + '%');
  446. updatePlaybackDisplayTime(currentTime,duration);
  447. });
  448. audioElement[0].onended = function() {
  449. nextSongHandler();
  450. };
  451. //Handle clicks on progress bar to skip through the playback
  452. $("#audioProgressBar").parent().on("click",function(e){
  453. var duration = audioElement[0].duration;
  454. var jumpTo = (e.offsetX / $(this).width()) * duration;
  455. if (!audioElement[0].paused){
  456. audioElement[0].pause();
  457. audioElement[0].currentTime = jumpTo;
  458. audioElement[0].play();
  459. }else{
  460. audioElement[0].currentTime = jumpTo;
  461. }
  462. });
  463. }
  464. function restoreAllSettings(){
  465. //Repeat mode setting
  466. var strRmode = loadStorage("repeatMode");
  467. if (strRmode != ""){
  468. repeatMode = parseInt(strRmode);
  469. setRepeatMode(repeatMode,$("#repeatModeButton")[0]);
  470. }
  471. //Random Mode setting
  472. var random = loadStorage("randomMode");
  473. if (random != ""){
  474. if (random == "true"){
  475. //random Mode is true when loaded from configuration. Toggle once to match the setting
  476. toggleRandomMode($("#randomModeButton")[0]);
  477. }
  478. }
  479. //Timer mode setting
  480. var TEM = loadStorage("timerEndMode");
  481. if (TEM != ""){
  482. if (TEM == "fade"){
  483. $("#stopMode").val("Fade Out & Stop");
  484. }else{
  485. $("#stopMode").val("Stop Playing");
  486. }
  487. }
  488. }
  489. //Setting menu function
  490. function searchOnYoutube(filename = ""){
  491. if (filename == ""){
  492. var filename = $("#mainPlayerSongTitle").text().trim();
  493. }
  494. var url = "https://www.youtube.com/results?search_query=" + filename ;
  495. window.open(url);
  496. }
  497. //Searching related functions
  498. var preSearchItemBuffer = "";
  499. var searchModeEnabled = false;
  500. function enterSearchMode(){
  501. if (searchModeEnabled){
  502. //Search mode already enabled
  503. return;
  504. }
  505. $("#searchModeMenu").show();
  506. $("#mainMenu").hide();
  507. preSearchItemBuffer = [$("#mainList").html(),$("#interfaceTitle").text(),$("#AMmenuIcon").attr("class")];
  508. searchModeEnabled = true;
  509. }
  510. function exitSearchMode(){
  511. $("#searchModeMenu").hide();
  512. $("#mainMenu").show();
  513. $("#searchInputBar").val("");
  514. if (preSearchItemBuffer != ""){
  515. //If previous record exists, recover the previous view from storage
  516. $("#mainList").html(preSearchItemBuffer[0]);
  517. $("#interfaceTitle").text(preSearchItemBuffer[1]);
  518. $("#AMmenuIcon").attr("class",preSearchItemBuffer[2])
  519. preSearchItemBuffer = "";
  520. }
  521. searchModeEnabled = false;
  522. }
  523. $("#searchInputBar").on("keyup",function(e){
  524. if(e.keyCode == 13){
  525. //Enter pressed. start searching
  526. searchSong();
  527. }
  528. });
  529. function searchSong(){
  530. var keyword = $("#searchInputBar").val();
  531. if (keyword.includes("?") || keyword.includes("&")){
  532. alert("Search keyword cannot contains & or ? symbol.");
  533. return;
  534. }
  535. //Clear the mainList, replace with a dummy loading screen
  536. $("#mainList").html('<div class="mainList item whiteFont">\
  537. <div class="ts header" style="margin:0px !important;padding-bottom:15px;padding-top:5px;">\
  538. <i class="loading spinner icon whiteFont" style="overflow:hidden;margin-top:5px;"></i>\
  539. <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">\
  540. Searching...\
  541. </div>\
  542. </div>\
  543. <div class="topRightCorner" align="center">\
  544. -1\
  545. </div>\
  546. </div>');
  547. ao_module_agirun("Music/functions/listSong.js", {
  548. listSong: "search:" + keyword
  549. }, function(data){
  550. currentPath = "";
  551. var template = '<div class="mainList item" filepath={filepath} id={id} rawname={rawname}>\
  552. <div class="ts header selectable" style="margin:0px !important;" onClick="playSong(this);">\
  553. <i class="music icon whiteFont" style="overflow:hidden;"></i>\
  554. <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">\
  555. {songtitle}\
  556. <div class="sub header fileinfo" style="color: #c7c7c7;">{ext} / {size}</div>\
  557. </div>\
  558. </div>\
  559. <div class="topRightCorner" align="center">\
  560. {id}\
  561. </div>\
  562. <div class="mainList rightFunctionBar" align="center" onClick="showMore(this);">\
  563. <i class="ellipsis vertical icon" style="top:30%;"></i>\
  564. </div>\
  565. </div>';
  566. if ($("#searchModeMenu").is(":hidden")){
  567. //The user exited search mode before the search results come back
  568. //Dispose the search result
  569. return;
  570. }
  571. if (data.length == 0){
  572. //No search results.
  573. $("#mainList").html("");
  574. $("#mainList").append('<div class="mainList item whiteFont">\
  575. <div class="ts header" style="margin:0px !important;padding-bottom:15px;padding-top:5px;">\
  576. <i class="remove icon whiteFont" style="overflow:hidden;margin-top:5px;"></i>\
  577. <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">\
  578. No result for keyword: ' + keyword + '.\
  579. </div>\
  580. </div>\
  581. <div class="topRightCorner" align="center">\
  582. -1\
  583. </div>\
  584. </div>');
  585. return;
  586. }
  587. $("#interfaceTitle").text("Search");
  588. $("#AMmenuIcon").attr("class","search icon large whiteFont")
  589. //Initialize the song list
  590. displayList = data;
  591. if (playingList == []){
  592. playingList = Array.from(displayList);
  593. }
  594. $("#mainList").html("");
  595. for ( var i =0; i < data.length; i++){
  596. var songInfo = data[i];
  597. var path = songInfo[0];
  598. var displayname = ao_module_codec.decodeUmFilename(songInfo[1]);
  599. var ext = songInfo[2];
  600. var size = songInfo[3];
  601. var box = template;
  602. box = replaceAll("{filepath}",ao_module_utils.objectToAttr(path),box);
  603. box = replaceAll("{id}",i + 1,box); //User count from 1
  604. box = replaceAll("{rawname}",ao_module_utils.objectToAttr(songInfo[1]),box);
  605. box = replaceAll("{songtitle}",displayname,box);
  606. box = replaceAll("{ext}",ext,box);
  607. box = replaceAll("{size}",size,box);
  608. $("#mainList").append(box);
  609. }
  610. totalMusicCount = data.length;
  611. $("#mainList").append("<br><br><br><br><br><br><br>");
  612. $("#interfaceDetails").text("[" + i + " songs]");
  613. highLightPlayingMusic();
  614. });
  615. }
  616. function enterRemotePlayID(object){
  617. var id = $(object).text().trim();
  618. $("#remotePlayID").val($("#remotePlayID").val() + id);
  619. }
  620. function ridOpr(opr){
  621. if (opr == 'backspace'){
  622. var currentText = $("#remotePlayID").val();
  623. var newText = currentText.substring(0,currentText.length - 1);
  624. $("#remotePlayID").val(newText);
  625. }else if (opr == 'reset'){
  626. $("#remotePlayID").val("");
  627. }
  628. }
  629. function openInFileExplorer(){
  630. var dirname = playingFileDetail[1].split("/");
  631. var fname = dirname.pop(); //Pop away the filename
  632. dirname = dirname.join("/") + "/";
  633. var path = dirname;
  634. if (dirname.substring(0,1) != "/"){
  635. //This is not absolute path. Start the path from airMusic
  636. path = "AirMusic/" + dirname;
  637. }
  638. path = path.replace("media?file=","");
  639. if (path.substring(0,1) == "/"){
  640. path = path.substring(1)
  641. }
  642. ao_module_openPath(path, fname);
  643. }
  644. //quickmenu Functions
  645. function hideAllquickMenu(){
  646. $(".quickMenu").fadeOut('fast');
  647. $("#fadeReturnScreen").fadeOut('fast');
  648. }
  649. //Setting related function
  650. function showSettingInterface(){
  651. $("#settingInterface").fadeIn('fast');
  652. $("#fadeReturnScreen").fadeIn('fast');
  653. //Update contents in the setting menu
  654. $("#settingMenuTitle").text($("#mainPlayerSongTitle").text());
  655. }
  656. //Timer related functions
  657. function showTimerInterface(){
  658. $("#timerInterface").fadeIn('fast');
  659. $("#fadeReturnScreen").fadeIn('fast');
  660. }
  661. function initPlaylistInterfaceList(){
  662. $("#existsingPlaylist").html("");
  663. //Get the playlist list from server side
  664. ao_module_agirun("Music/functions/playlist.js", {
  665. opr: "root"
  666. }, function(data){
  667. data.forEach(playlist => {
  668. $("#existsingPlaylist").append(`<div class="playlist item selectable whiteFont" name="${playlist.name}" onclick="addSongToSelectedPlaylist(this);">
  669. <i class="list icon whiteFont"></i> ${playlist.name} [${playlist.count} files]
  670. </div>`);
  671. })
  672. });
  673. }
  674. function showPlaylistInterface(){
  675. initPlaylistInterfaceList();
  676. $("#playlistInterface").fadeIn('fast');
  677. $("#fadeReturnScreen").fadeIn('fast');
  678. }
  679. function addToThisPlaylist(){
  680. }
  681. $("#stopMode").change(function () {
  682. var end = this.value;
  683. if (end.includes("Fade Out & Stop")){
  684. //Start fading out the volume
  685. timerEndMode = "fade";
  686. setStorage("timerEndMode","fade");
  687. }else{
  688. //End immediately
  689. timerEndMode = "end";
  690. setStorage("timerEndMode","end");
  691. }
  692. });
  693. var fadeOutStepping = 0.1; //The steps size for fading out during timer countdown
  694. var defaultVolumeBeforeFadeout = 0;
  695. function toggleCountDown(button){
  696. if (!timerMode){
  697. //Start count down
  698. timerMode = true;
  699. $(button).text("Stop");
  700. timerRemaining = ((parseInt($("#timerHour").text()) * 60) + parseInt($("#timerMinute").text())) * 60; //in seconds
  701. //Update the value on the remaining counter
  702. $("#remainingUI").text(parseTimer(timerRemaining));
  703. $("#timerSettingInterface").slideUp('fast');
  704. $("#timerCountingInterface").slideDown('fast');
  705. $("#stopMode").attr("disabled","");
  706. defaultVolumeBeforeFadeout = audioElement[0].volume;
  707. fadeOutStepping = (audioElement[0].volume) / timerRemaining;
  708. progressCounter();
  709. }else{
  710. //Stop count down
  711. timerMode = false;
  712. $(button).text("Start");
  713. timerRemaining = 0;
  714. $("#timerSettingInterface").slideDown('fast');
  715. $("#timerCountingInterface").slideUp('fast');
  716. $("#stopMode").removeAttr("disabled");
  717. }
  718. }
  719. function progressCounter(){
  720. //Update the timer
  721. timerRemaining = timerRemaining - 1;
  722. $("#remainingUI").text(parseTimer(timerRemaining));
  723. if (timerRemaining > 0){
  724. //Continues
  725. if (timerEndMode == "fade"){
  726. var newvol = audioElement[0].volume - fadeOutStepping;
  727. audioElement[0].volume = Math.max(0,newvol);
  728. }
  729. setTimeout(progressCounter,1000);
  730. }else{
  731. //Times up
  732. handleTimerEnd();
  733. }
  734. }
  735. function handleTimerEnd(){
  736. //Stop the playback
  737. originalVol = audioElement[0].volume;
  738. fadeAudio();
  739. setPlaying(false);
  740. audioElement[0].pause();
  741. setTimeout(function(){
  742. audioElement[0].volume = defaultVolumeBeforeFadeout;
  743. },500);
  744. }
  745. function parseTimer(remainingTime){
  746. //remainingTime in seconds, prase to HH:mm:ss
  747. var hours = Math.floor(remainingTime / 3600);
  748. var remainingTime = remainingTime % 3600;
  749. var minutes = Math.floor(remainingTime / 60);
  750. var seconds = remainingTime % 60;
  751. if (minutes < 10){
  752. minutes = "0" + minutes;
  753. }
  754. if (seconds < 10){
  755. seconds = "0" + seconds;
  756. }
  757. var formatted = hours + ":" + minutes + ":" + seconds;
  758. return formatted;
  759. }
  760. function addTimer(unit,value){
  761. if (unit == "h"){
  762. if (value == "r"){
  763. $("#timerHour").text("0");
  764. }else{
  765. $("#timerHour").text($("#timerHour").text() - -1 * value);
  766. }
  767. }else if (unit == "m"){
  768. if (value == "r"){
  769. $("#timerMinute").text("0");
  770. }else{
  771. $("#timerMinute").text($("#timerMinute").text() - -1 * value);
  772. }
  773. }
  774. if (parseInt($("#timerHour").text()) < 0){
  775. $("#timerHour").text("0");
  776. }
  777. if (parseInt($("#timerMinute").text()) < 0){
  778. if (parseInt($("#timerHour").text()) > 0){
  779. //subtract 1 from the hour
  780. $("#timerHour").text($("#timerHour").text() - 1);
  781. $("#timerMinute").text(parseInt($("#timerMinute").text()) + 60);
  782. }else{
  783. //There is no hours to subtract
  784. $("#timerMinute").text("0");
  785. }
  786. }
  787. if (parseInt($("#timerMinute").text()) > 59){
  788. $("#timerMinute").text(parseInt($("#timerMinute").text()) - 60);
  789. $("#timerHour").text($("#timerHour").text() - -1);
  790. }
  791. }
  792. //Download function
  793. function downloadPlayingSong(){
  794. var url = audioElement.attr("src");
  795. var ext = url.split(".").pop();
  796. var filename = $("#mainPlayerSongTitle").text().trim();
  797. generateDownloadElement(url,filename);
  798. /*
  799. if (url.includes("/media")){
  800. blobDownloadElement(url,filename);
  801. }else{
  802. generateDownloadElement(url,filename);
  803. }
  804. */
  805. }
  806. var downloadInProgress = false;
  807. function blobDownloadElement(filepath,filename){
  808. if (downloadInProgress){
  809. alert("Please wait until another download finished.");
  810. return;
  811. }
  812. downloadInProgress = true;
  813. $("#downloadBtn").find("i").addClass("disabled");
  814. $("#downloadProgressBar").find(".bar").css("width","0%");
  815. $("#downloadProgressBar").show();
  816. var xhr = new XMLHttpRequest();
  817. xhr.onreadystatechange = function(){
  818. if (this.readyState == 4 && this.status == 200){
  819. //handler(this.response);
  820. //console.log(this.response, typeof this.response);
  821. var url = window.URL || window.webkitURL;
  822. //Open the downloaded data in new window for testing
  823. //window.open(url.createObjectURL(this.response));
  824. generateDownloadElement(url.createObjectURL(this.response),filename);
  825. $("#downloadBtn").find("i").removeClass("disabled");
  826. $("#downloadProgressBar").hide();
  827. downloadInProgress = false;
  828. }
  829. }
  830. xhr.onprogress = function (event) {
  831. console.log("[AirMusic] Download Progress: " + event.loaded + " / " + event.total + "Bytes");
  832. $("#downloadProgressBar").find(".bar").css("width",(event.loaded / event.total) * 100 + "%");
  833. };
  834. xhr.open('GET', filepath);
  835. xhr.responseType = 'blob';
  836. xhr.send();
  837. }
  838. function generateDownloadElement(filepath, filename){
  839. var link = document.createElement('a');
  840. link.href = filepath + "&download=true";
  841. link.setAttribute('download', filename);
  842. document.getElementsByTagName("body")[0].appendChild(link);
  843. // Firefox
  844. if (document.createEvent) {
  845. var event = document.createEvent("MouseEvents");
  846. event.initEvent("click", true, true);
  847. link.dispatchEvent(event);
  848. }
  849. // IE
  850. else if (link.click) {
  851. link.click();
  852. }
  853. link.parentNode.removeChild(link);
  854. }
  855. //Volume control related features
  856. var previousAudioVolume = 0;
  857. function mute(){
  858. if (audioElement[0].volume != 0){
  859. //Set to mute
  860. previousAudioVolume = audioElement[0].volume;
  861. audioElement[0].volume = 0;
  862. }else{
  863. //Restore from mute
  864. audioElement[0].volume = previousAudioVolume;
  865. }
  866. $("#volBar").css("width",audioElement[0].volume * 100 + "%");
  867. }
  868. var volbarTimeoutEvt;
  869. function addAudioVolume(value){
  870. $("#volumeGUI").slideDown('fast');
  871. if (volbarTimeoutEvt !== undefined){
  872. clearTimeout(volbarTimeoutEvt);
  873. }
  874. volbarTimeoutEvt = setTimeout(function(){
  875. $("#volumeGUI").slideUp('fast');
  876. },3000);
  877. $("#volumeGUI")
  878. if (audioElement[0].volume + value >= 1){
  879. audioElement[0].volume = 1;
  880. }else if (audioElement[0].volume + value <= 0){
  881. audioElement[0].volume = 0;
  882. }else{
  883. audioElement[0].volume += value;
  884. }
  885. $("#volBar").css("width",Math.min(100,audioElement[0].volume * 100) + "%");
  886. }
  887. function updatePlaybackDisplayTime(currentTime,duration){
  888. let progress = Math.round(currentTime);
  889. let remainTime = Math.round(duration - currentTime);
  890. $("#progressTime").text(secondsToHms(progress));
  891. if (!isNaN(remainTime)){
  892. $("#remainTime").text("-" + secondsToHms(remainTime));
  893. }
  894. }
  895. function nextSongHandler(){
  896. console.log("Next song");
  897. if (repeatMode == 1){
  898. //Next song in the playlist
  899. if (randomMode){
  900. var randomTrackID = Math.floor(Math.random() * (playingList.length - 1));
  901. //console.log(randomTrackID, playingList[randomTrackID]);
  902. nextSong(randomTrackID,true);
  903. }else{
  904. var playingSongIndex = playingFileDetail[0];
  905. var nextSongIndex = playingSongIndex;
  906. if (nextSongIndex >= playingList.length){
  907. nextSongIndex = 0;
  908. }
  909. //console.log(playingSongIndex, nextSongIndex);
  910. nextSong(nextSongIndex,true);
  911. }
  912. }else if (repeatMode == 2){
  913. //Loop this song only
  914. audioElement[0].pause();
  915. audioElement[0].currentTime = 0;
  916. audioElement[0].play();
  917. }else if (repeatMode == 0){
  918. //Pause after finish this song
  919. setPlaying(false);
  920. audioElement[0].pause();
  921. audioElement[0].currentTime = 0;
  922. }
  923. }
  924. function mainPlayerShown(){
  925. if ($("#playerInterface").offset().left == 0){
  926. return true;
  927. }
  928. return false;
  929. }
  930. function toggleRandomMode(button){
  931. var btn = $(button).find("i");
  932. if (randomMode){
  933. //Set the random mode to false
  934. btn.removeClass("enabled").addClass("disabled");
  935. randomMode = false;
  936. }else{
  937. btn.removeClass("disabled").addClass("enabled");
  938. randomMode = true;
  939. }
  940. setStorage("randomMode",randomMode);
  941. }
  942. function toggleRepeatMode(button){
  943. if (repeatMode == 0){
  944. setRepeatMode(1,button);
  945. setStorage("repeatMode",1);
  946. }else if (repeatMode == 1){
  947. setRepeatMode(2,button);
  948. setStorage("repeatMode",2);
  949. }else if (repeatMode == 2){
  950. setRepeatMode(0,button);
  951. setStorage("repeatMode",0);
  952. }
  953. }
  954. function setRepeatMode(modeCode,button){
  955. if (modeCode == 1){
  956. //Set repeat mode to "Repeat all"
  957. $(button).find(".singleLoop").hide();
  958. $(button).find("i").removeClass("disabled").addClass("enabled");
  959. repeatMode = 1;
  960. }else if (modeCode == 2){
  961. //Set repeat mode to "Repeat one"
  962. $(button).find(".singleLoop").show();
  963. $(button).find("i").removeClass("disabled").addClass("enabled");
  964. repeatMode = 2;
  965. }else if (modeCode == 0){
  966. //Set repeat mode to "None"
  967. $(button).find(".singleLoop").hide();
  968. $(button).find("i").removeClass("enabled").addClass("disabled");
  969. repeatMode = 0;
  970. }
  971. }
  972. function hideMainPlayerInterface(){
  973. $("#playerInterface").animate({left: window.innerWidth},300);
  974. $("body").css("overflow-y","auto");
  975. }
  976. function showMainPlayerInterface(){
  977. $("#playerInterface").animate({left:0},300);
  978. $("body").css("overflow-y","hidden");
  979. }
  980. function syncSystemVol(){
  981. //Initiate the module's volume to the system's
  982. var globalvol = localStorage.getItem("global_volume");
  983. //console.log("Global Volume" + globalvol.toString());
  984. if (!globalvol){
  985. globalvol = 0.1;
  986. }
  987. //Check if it is mobile. If yes, always 100% and leave volume to system
  988. if (isMobile()){
  989. globalvol = 1;
  990. $(".desktopOnly").addClass("disabled");
  991. }
  992. audioElement[0].volume = parseFloat(globalvol);
  993. $("#volBar").css("width",audioElement[0].volume * 100 + "%");
  994. }
  995. function replaceAll(target, replace, original){
  996. return original.split(target).join(replace);
  997. };
  998. function playSong(object, startPaused = false){
  999. if ($(object).parent().hasClass("playingTrack")){
  1000. //This is already the song that is currently playing. Show the main player interface instead.
  1001. showMainPlayerInterface();
  1002. resizeQuickAdjust();
  1003. return;
  1004. }
  1005. //$(".playingTrack").removeClass("playingTrack");
  1006. //$(object).parent().addClass("playingTrack");
  1007. var filepath = ao_module_utils.attrToObject($(object).parent().attr('filepath'));
  1008. var rawname = ao_module_utils.attrToObject($(object).parent().attr('rawname'));
  1009. var displayName = ao_module_codec.decodeUmFilename(rawname);
  1010. var info = $(object).parent().find(".fileinfo").text();
  1011. var id = $(object).parent().attr('id');
  1012. if (id === undefined){
  1013. //This might be a file from dropdown list. use listid instead
  1014. id = $(object).parent().attr('listid');
  1015. }
  1016. updateMiniPlayerUI(displayName,info,id);
  1017. updateMainPlayerUI(displayName,info,id);
  1018. loadAndPlayAudioFile(filepath, !startPaused);
  1019. if (!currentPlaying && !startPaused){
  1020. setPlaying(true);
  1021. }
  1022. playingFileDetail = [parseInt(id),filepath];
  1023. //If the user play this file, assume the next file to be added to playlist is this file
  1024. playlistAddPendingFile = filepath;
  1025. //Have a backup of the current list just incase the user open another directory while a list is playing
  1026. //Only backup when it is not call from dropdown list
  1027. if (!$(object).parent().hasClass("dropdownList")){
  1028. playingList = Array.from(displayList);
  1029. }
  1030. parsePlayingSongList();
  1031. if ($("#miniPlayer").hasClass("hidden")){
  1032. //This is the first song that has played after the UI init
  1033. $("#miniPlayer").css("display","none").removeClass("hidden").slideDown();
  1034. }
  1035. showMainPlayerInterface();
  1036. //Just in case the albumn image changed, albumn art css is also updated.
  1037. resizeQuickAdjust();
  1038. updateStateReferingURL();
  1039. highLightPlayingMusic();
  1040. }
  1041. function loadThumbnail(filepath){
  1042. //Load the thumbnail
  1043. var realVpath = filepath.split("=");
  1044. realVpath.shift();
  1045. realVpath = realVpath.join("=");
  1046. ao_module_agirun("Music/functions/getThumbnail.js", {
  1047. file: realVpath,
  1048. }, function(data){
  1049. if (data.error !== undefined){
  1050. console.log(data.error)
  1051. $("#albumnArtImage").attr("src","img/default.png");
  1052. if (isAndroid && navigator.mediaSession.metadata){
  1053. navigator.mediaSession.metadata.artwork = [
  1054. { src: "img/default.png", sizes: '512x512', type: 'image/png' }
  1055. ]
  1056. }
  1057. }else{
  1058. $("#albumnArtImage").attr("src","data:image/jpg;base64," + data);
  1059. if (isAndroid && navigator.mediaSession.metadata){
  1060. navigator.mediaSession.metadata.artwork = [
  1061. { src: "data:image/jpg;base64," + data, sizes: '480x480', type: 'image/jpg' }
  1062. ]
  1063. }
  1064. }
  1065. resizeQuickAdjust();
  1066. });
  1067. }
  1068. function nextSong(id = false,forcePlayEvenStopped = false){
  1069. //Check if the current playlist has more than one songs.
  1070. var currentPaused = audioElement[0].paused;
  1071. if (playingList.length > 1){
  1072. var nextSongIndex = playingFileDetail[0];
  1073. if (id != false){
  1074. //Allow manual overwrite for this function
  1075. nextSongIndex = id;
  1076. var nextSong = playingList[nextSongIndex];
  1077. }else{
  1078. if (playingFileDetail[0] >= playingList.length){
  1079. var nextSong = playingList[0]; //Back to the first song in list
  1080. nextSongIndex = 0;
  1081. }else{
  1082. var nextSong = playingList[nextSongIndex]; //Index of the playList + 1 as the index for the files is alrady i+1. (User count from one)
  1083. }
  1084. }
  1085. //The songs has to be play via background services instead of relying on DOM
  1086. var filepath = nextSong[0];
  1087. var rawname = nextSong[1];
  1088. var displayName = ao_module_codec.decodeUmFilename(rawname);
  1089. var info = nextSong[2] + " / " + nextSong[3];
  1090. var id = nextSongIndex + 1;
  1091. updateMiniPlayerUI(displayName,info,id);
  1092. updateMainPlayerUI(displayName,info,id);
  1093. if (forcePlayEvenStopped){
  1094. loadAndPlayAudioFile(filepath,true);
  1095. }else{
  1096. loadAndPlayAudioFile(filepath,!currentPaused);
  1097. }
  1098. if (currentPlaying){
  1099. setPlaying(true);
  1100. }
  1101. playingFileDetail = [id,filepath];
  1102. //Need not to update the playlist because it is the same
  1103. highLightPlayingMusic();
  1104. }else{
  1105. //This is the only song in playlist. Play again from start
  1106. audioElement[0].pause();
  1107. audioElement[0].currentTime = 0;
  1108. if (!currentPaused){
  1109. audioElement[0].play();
  1110. }
  1111. }
  1112. updateStateReferingURL();
  1113. }
  1114. function previousSong(){
  1115. var currentPaused = audioElement[0].paused;
  1116. if (playingList.length > 1){
  1117. var nextSongIndex = playingFileDetail[0] - 1;
  1118. if (nextSongIndex == 0){
  1119. nextSongIndex = playingList.length;
  1120. var nextSong = playingList[nextSongIndex - 1]; //Back to the last song in list
  1121. }else{
  1122. var nextSong = playingList[playingFileDetail[0] - 2]; //Index of the playList - 1 as the index for the files is alrady i+1. (User count from one)
  1123. }
  1124. //The songs has to be play via background services instead of relying on DOM
  1125. var filepath = nextSong[0];
  1126. var rawname = nextSong[1];
  1127. var displayName = ao_module_codec.decodeUmFilename(rawname);
  1128. var info = nextSong[2] + " / " + nextSong[3];
  1129. var id = nextSongIndex;
  1130. updateMiniPlayerUI(displayName,info,id);
  1131. updateMainPlayerUI(displayName,info,id);
  1132. loadAndPlayAudioFile(filepath,!currentPaused);
  1133. if (currentPlaying){
  1134. setPlaying(true);
  1135. }
  1136. playingFileDetail = [id,filepath];
  1137. //Need not to update the playlist because it is the same
  1138. highLightPlayingMusic();
  1139. }else{
  1140. //This is the only song in playlist. Play again from start
  1141. audioElement[0].pause();
  1142. audioElement[0].currentTime = 0;
  1143. audioElement[0].play();
  1144. }
  1145. updateStateReferingURL();
  1146. }
  1147. var originalVol = 0;
  1148. function togglePlayMode(){
  1149. if (currentPlaying){
  1150. originalVol = audioElement[0].volume;
  1151. fadeAudio();
  1152. setPlaying(false);
  1153. }else{
  1154. gainAudio();
  1155. setPlaying(true);
  1156. }
  1157. }
  1158. let audioTransitioning = false;
  1159. function fadeAudio(){
  1160. audioTransitioning = true;
  1161. if(audioElement[0].volume > 0){
  1162. var testval = audioElement[0].volume - 0.1;
  1163. audioElement[0].volume = Math.max(0,testval);
  1164. setTimeout(fadeAudio, 50);
  1165. }else{
  1166. audioElement[0].pause();
  1167. setTimeout(function(){
  1168. audioElement[0].volume = originalVol;
  1169. updateStateReferingURL();
  1170. audioTransitioning = false;
  1171. }, 100);
  1172. }
  1173. }
  1174. var targetVol = 0;
  1175. function gainAudio(){
  1176. targetVol = audioElement[0].volume;
  1177. audioElement[0].volume = 0;
  1178. setTimeout(function(){
  1179. audioElement[0].play();
  1180. recursiveGainAudio();
  1181. }, 100);
  1182. }
  1183. function recursiveGainAudio(){
  1184. audioTransitioning = true;
  1185. if(audioElement[0].volume < targetVol){
  1186. if (audioElement[0].volume + 0.1 < 1){
  1187. audioElement[0].volume += 0.1
  1188. }else{
  1189. //Audio volume larger than 1, make it 1
  1190. audioElement[0].volume = 1
  1191. }
  1192. setTimeout(recursiveGainAudio, 50);
  1193. }else{
  1194. setTimeout(function(){
  1195. audioElement[0].volume = targetVol;
  1196. updateStateReferingURL();
  1197. audioTransitioning = false;
  1198. }, 100);
  1199. }
  1200. }
  1201. //Update all icons on play and pause buttons
  1202. function setPlaying(playing){
  1203. if (playing == true){
  1204. $(".PlayButton").attr("class","pause icon whiteFont PlayButton");
  1205. currentPlaying = true;
  1206. }else{
  1207. $(".PlayButton").attr("class","play icon whiteFont PlayButton");
  1208. currentPlaying = false;
  1209. }
  1210. }
  1211. function loadAndPlayAudioFile(sourceURL,playAfterLoad = true){
  1212. var audio = audioElement;
  1213. sourceURL = "../" + sourceURL; //Convert absolute dir to relative
  1214. $("#mainAudioPlayer").attr("src", sourceURL);
  1215. //console.log(encodeURIComponent(sourceURL));
  1216. audio[0].pause();
  1217. audio[0].load();
  1218. if(playAfterLoad){
  1219. audio[0].oncanplaythrough = audio[0].play();
  1220. }else{
  1221. var currentTime = audioElement[0].currentTime;
  1222. var duration = audioElement[0].duration;
  1223. $('#audioProgressBar').css('width','0%');
  1224. updatePlaybackDisplayTime(currentTime,duration);
  1225. }
  1226. loadThumbnail(sourceURL);
  1227. }
  1228. function updateMiniPlayerUI(displayName, fileinfo,id){
  1229. $("#miniPlayerDisplayName").text(displayName);
  1230. $("#miniPlayerInformation").text(fileinfo);
  1231. $("#miniPlayerIDtab").text(id + "/" + totalMusicCount);
  1232. }
  1233. function updateMainPlayerUI(songname, fileinfo, id){
  1234. $("#mainPlayerSongTitle").text(songname);
  1235. $("#mainPlayerSongDesc").text(fileinfo);
  1236. $("#mainPlayerMiniTab").text(id + "/" + totalMusicCount);
  1237. if (isAndroid && 'mediaSession' in navigator){
  1238. var infoRewrite = fileinfo.split(" / ")
  1239. updateTitle(songname, infoRewrite[1] + " (" + infoRewrite[0] + ")", id + "/" + totalMusicCount);
  1240. }
  1241. }
  1242. /*
  1243. Playlist related functions
  1244. */
  1245. function renderPlaylistByName(listname){
  1246. $("#interfaceTitle").text(listname);
  1247. ao_module_agirun("Music/functions/playlist.js", {
  1248. opr: "list",
  1249. playlistname: listname
  1250. }, function(data){
  1251. $("#mainList").html("");
  1252. if (data.error !== undefined){
  1253. //This playlist no longer exists. Back to main
  1254. loadPlaylistView();
  1255. }else{
  1256. //Updat ethe global values
  1257. displayList = data;
  1258. totalMusicCount = data.length;
  1259. currentPath = listname;
  1260. //Add the back btn for back to playlist view
  1261. $("#mainList").append(`<div class="mainList item extrapadding" onClick="loadPlaylistView();">
  1262. <div class="ts header selectable" style="margin:0px !important;">
  1263. <i class="angle left icon whiteFont" style="overflow:hidden;"></i>
  1264. <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">
  1265. ../
  1266. </div>
  1267. </div>
  1268. </div>`);
  1269. //List the resulting song list
  1270. for (var i = 0; i < data.length; i++){
  1271. var songInfo = data[i];
  1272. $("#mainList").append(`<div class="mainList item" filepath=${ao_module_utils.objectToAttr(songInfo[0])} id=${i+1} rawname=${ao_module_utils.objectToAttr(songInfo[1])}>
  1273. <div class="ts header selectable" style="margin:0px !important;" onClick="playSong(this);">
  1274. <i class="music icon whiteFont" style="overflow:hidden;"></i>
  1275. <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">
  1276. ${songInfo[1]}
  1277. <div class="sub header fileinfo" style="color: #c7c7c7;">${songInfo[2]} / ${songInfo[3]}</div>
  1278. </div>
  1279. </div>\
  1280. <div class="topRightCorner" align="center">
  1281. ${i + 1}
  1282. </div>
  1283. <div class="mainList rightFunctionBar" type="file" align="center" onclick="showMore(this);">
  1284. <i class="ellipsis vertical icon" style="top:30%;"></i>
  1285. </div>
  1286. </div>`);
  1287. //Update the interface Detail
  1288. $("#interfaceDetails").text("[" + data.length + " files]");
  1289. };
  1290. //Fix some legacy css isseus
  1291. $("#mainList").append("<br><br><br><br><br><br><br>");
  1292. }
  1293. });
  1294. }
  1295. //Open a given playlist
  1296. function openPlaylist(object){
  1297. var listname = $(object).attr("listname");
  1298. renderPlaylistByName(listname);
  1299. }
  1300. function addToNewPlaylist(){
  1301. var playlistname = prompt("Enter new playlist name");
  1302. if (playlistname != null && playlistname != ""){
  1303. //Add to playlist
  1304. addSongToPlayList(playlistname);
  1305. }else{
  1306. $("#succSnackBar").find(".content").html(`<i class="remove icon"></i> Invalid playlist name`);
  1307. $("#succSnackBar").slideDown("fast").delay(3000).slideUp("fast");
  1308. }
  1309. }
  1310. function addToPlaylistFromMoreMenu(){
  1311. $(".showMoreMenus").fadeOut('fast');
  1312. $("#showmoreUIcover").fadeOut('fast');
  1313. showPlaylistInterface();
  1314. }
  1315. //Remove the curernt file from the current playlist
  1316. function removeFromPlylistFromMoreMenu(){
  1317. if (currentMode == "playlist"){
  1318. //Remvoe the playlistAddPendingFile
  1319. //In playlist mode, the currentPath is used to store the plylist name
  1320. ao_module_agirun("Music/functions/playlist.js", {
  1321. opr: "remove",
  1322. playlistname: currentPath,
  1323. musicpath: playlistAddPendingFile.replace("/media?file=","")
  1324. }, function(data){
  1325. if (data.error !== undefined){
  1326. alert(data.error);
  1327. }else{
  1328. //Removed. Reload playlist
  1329. renderPlaylistByName(currentPath);
  1330. //Hide the MoreMenu
  1331. hideShowMoreMenu();
  1332. }
  1333. });
  1334. }
  1335. }
  1336. function addSongToSelectedPlaylist(object){
  1337. var playlistName = $(object).attr("name").trim();
  1338. addSongToPlayList(playlistName);
  1339. }
  1340. function addSongToPlayList(listname){
  1341. //Get current music file name
  1342. var currentSongPath = "";
  1343. if (playlistAddPendingFile !== ""){
  1344. currentSongPath = playlistAddPendingFile.replace("/media?file=","");
  1345. }else{
  1346. $("#succSnackBar").find(".content").html(`<i class="remove icon"></i> No song selected`);
  1347. $("#succSnackBar").slideDown("fast").delay(3000).slideUp("fast");
  1348. return;
  1349. }
  1350. //Add to playlist
  1351. ao_module_agirun("Music/functions/playlist.js", {
  1352. opr: "add",
  1353. playlistname: listname,
  1354. musicpath: currentSongPath
  1355. },function(data){
  1356. //Show success
  1357. $("#succSnackBar").find(".content").html(`<i class="checkmark icon"></i> Added to playlist ${listname}`);
  1358. $("#succSnackBar").slideDown("fast").delay(3000).slideUp("fast");
  1359. //Reload the playlist
  1360. initPlaylistInterfaceList();
  1361. });
  1362. }
  1363. //List the number of playlist stored in this database
  1364. function loadPlaylistView(){
  1365. currentMode = "playlist";
  1366. //Clear the main list
  1367. $("#mainList").html("");
  1368. ao_module_agirun("Music/functions/playlist.js", {
  1369. opr: "root",
  1370. },function(data){
  1371. //Get the list of playlist
  1372. console.log(data);
  1373. //Render the elements
  1374. data.forEach(playlist => {
  1375. $("#mainList").append(`<div class="mainList item" listname="${playlist.name}" tag="playlist" onClick="openPlaylist(this);">
  1376. <div class="ts header selectable" style="margin:0px !important;" >
  1377. <i class="folder open icon whiteFont" style="overflow:hidden;"></i>
  1378. <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">
  1379. ${playlist.name}
  1380. <div class="sub header fileinfo" style="color: #c7c7c7;">[${playlist.count} files]</div>
  1381. </div>
  1382. </div>
  1383. <div class="mainList rightFunctionBar" tag="moreInfo" align="center" onClick="openPlaylist(this);">
  1384. <i class="chevron right icon" style="top:30%;"></i>
  1385. </div>
  1386. </div>`);
  1387. });
  1388. hideLeftMenu();
  1389. //Update the headers
  1390. $("#interfaceTitle").text("Playlist");
  1391. $("#AMmenuIcon").attr("class","list icon large whiteFont");
  1392. $("#interfaceDetails").text("[" + data.length + " playlist]");
  1393. });
  1394. }
  1395. function loadFolderView(){
  1396. currentMode = "folder";
  1397. currentPath = "";
  1398. var tempalte = '<div class="mainList item" filepath={filepath} id={id} tag="folder" onClick="openFolder(this);">\
  1399. <div class="ts header selectable" style="margin:0px !important;" >\
  1400. <i class="folder open icon whiteFont" style="overflow:hidden;"></i>\
  1401. <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">\
  1402. {foldername}\
  1403. <div class="sub header fileinfo" style="color: #c7c7c7;">{fileinfo}</div>\
  1404. </div>\
  1405. </div>\
  1406. <div class="mainList rightFunctionBar" tag="moreInfo" align="center" onClick="moreFolder(this);">\
  1407. <i class="chevron right icon" style="top:30%;"></i>\
  1408. </div>\
  1409. </div>';
  1410. $("#interfaceTitle").text("Storage");
  1411. $("#AMmenuIcon").attr("class","folder open icon large whiteFont");
  1412. ao_module_agirun("Music/functions/listSong.js", {
  1413. listdir: "root",
  1414. },function(data){
  1415. $("#mainList").html("");
  1416. for (var i =0; i < data.length; i++){
  1417. var folderName = data[i][0];
  1418. var folderPath = data[i][1];
  1419. var fileCount = data[i][2];
  1420. var folderCount = data[i][3];
  1421. var box = tempalte;
  1422. box = replaceAll("{filepath}",folderPath,box);
  1423. box = replaceAll("{id}",i + 1,box);
  1424. if (folderName == ".cache" || folderName == ".trash"){
  1425. //Hidden folders
  1426. continue;
  1427. }
  1428. if (folderPath.includes("/media")){
  1429. //This is from external storage devices. List its number as well.
  1430. var tmp = folderPath.split("/");
  1431. var extStoragePath = "/" + tmp[1] + "/" + tmp[2];
  1432. box = replaceAll("{foldername}",folderName + " ( " + extStoragePath + " )",box);
  1433. }else{
  1434. //This is directory inside normal folders.
  1435. box = replaceAll("{foldername}",folderName,box);
  1436. }
  1437. var fileinfo = "[" + fileCount + " files]"
  1438. if (folderCount > 0){
  1439. fileinfo = "[" + fileCount + " files, " + folderCount +" folders]"
  1440. }
  1441. box = replaceAll("{fileinfo}",fileinfo,box);
  1442. rootPaths.push(folderPath);
  1443. $("#mainList").append(box);
  1444. }
  1445. $("#interfaceDetails").text("[" + data.length + " folders]");
  1446. });
  1447. hideLeftMenu();
  1448. }
  1449. function isMobile(){
  1450. if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  1451. return true
  1452. }
  1453. return false
  1454. }
  1455. function setWindowHash(hashValue){
  1456. hashValue = JSON.stringify(hashValue);
  1457. if (!isAndroid){
  1458. return;
  1459. }
  1460. if(history.pushState) {
  1461. window.history.pushState(null, null, '#' + hashValue);
  1462. }else {
  1463. location.hash = '#' + hashValue;
  1464. }
  1465. if(ao_module_virtualDesktop && !isMobile()){
  1466. //Update the iframe src as well
  1467. var newsrc = window.frameElement.getAttribute("src");
  1468. if (newsrc.includes("#")){
  1469. newsrc = newsrc.split("#")
  1470. newsrc.pop();
  1471. newsrc = newsrc.join("#");
  1472. }
  1473. newsrc = newsrc + "#" + hashValue;
  1474. $(window.frameElement).attr("src",newsrc);
  1475. //console.log(window.frameElement.getAttribute("src"));
  1476. }
  1477. }
  1478. function updateStateReferingURL(){
  1479. var paused = audioElement[0].paused; //Check the current playing state of the player
  1480. setWindowHash({path: currentPath, pfp:playingFileDetail,pause:paused});
  1481. }
  1482. function openFolder(object, playParameters=null){
  1483. var playIDAfterOpen = -1;
  1484. var startPaused = false;
  1485. if (playParameters !== null){
  1486. playIDAfterOpen = playParameters.playIDAfterOpen;
  1487. startPaused = playParameters.startPaused;
  1488. }
  1489. var backbtnTemplate = '<div class="mainList item extrapadding" filepath={filepath} id={id} onClick="openFolder(this);">\
  1490. <div class="ts header selectable" style="margin:0px !important;">\
  1491. <i class="angle left icon whiteFont" style="overflow:hidden;"></i>\
  1492. <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">\
  1493. ../\
  1494. </div>\
  1495. </div>\
  1496. </div>';
  1497. var folderTemplate = '<div class="mainList item" filepath={filepath} tag="folder" id={id} onClick="openFolder(this);">\
  1498. <div class="ts header selectable" style="margin:0px !important;">\
  1499. <i class="folder open icon whiteFont" style="overflow:hidden;"></i>\
  1500. <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">\
  1501. {foldername}\
  1502. <div class="sub header fileinfo" style="color: #c7c7c7;">{fileinfo}</div>\
  1503. </div>\
  1504. </div>\
  1505. <div class="mainList rightFunctionBar" type="folder" align="center">\
  1506. <i class="chevron right icon" style="top:30%;"></i>\
  1507. </div>\
  1508. </div>';
  1509. var fileTemplate = '<div class="mainList item" filepath={filepath} id={id} rawname={rawname}>\
  1510. <div class="ts header selectable" style="margin:0px !important;" onClick="playSong(this);">\
  1511. <i class="music icon whiteFont" style="overflow:hidden;"></i>\
  1512. <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">\
  1513. {songtitle}\
  1514. <div class="sub header fileinfo" style="color: #c7c7c7;">{ext} / {size}</div>\
  1515. </div>\
  1516. </div>\
  1517. <div class="topRightCorner" align="center">\
  1518. {id}\
  1519. </div>\
  1520. <div class="mainList rightFunctionBar" type="file" align="center">\
  1521. <i class="ellipsis vertical icon" style="top:30%;"></i>\
  1522. </div>\
  1523. </div>';
  1524. var targetPath = decodeURIComponent($(object).attr("filepath"));
  1525. if (targetPath == "root" || targetPath == "/"){
  1526. //User request to go back to storage root
  1527. loadFolderView();
  1528. return;
  1529. }
  1530. currentPath = targetPath.split("/./").join("/");
  1531. currentPath = currentPath.split("//").join("/");
  1532. $("#interfaceTitle").text(ao_module_codec.decodeHexFoldername(targetPath.substring(0,targetPath.length -1).split("/").pop()));
  1533. var parentDir = currentPath.split("/");
  1534. parentDir.pop();parentDir.pop();
  1535. parentDir = (parentDir.join("/") + "/");
  1536. //console.log(currentPath);
  1537. var backbtn;
  1538. if (rootPaths.includes(currentPath) == false){
  1539. //We are currently not at root
  1540. backbtn = backbtnTemplate;
  1541. backbtn = replaceAll("{filepath}",encodeURIComponent(parentDir),backbtn);
  1542. backbtn = replaceAll("{id}",0,backbtn);
  1543. }else{
  1544. //Create a back button to go back to root of storage
  1545. backbtn = backbtnTemplate;
  1546. backbtn = replaceAll("{filepath}","root",backbtn);
  1547. backbtn = replaceAll("{id}",0,backbtn);
  1548. }
  1549. //Request the server for a list of folders and file in this directory
  1550. ao_module_agirun("Music/functions/listSong.js", {
  1551. listdir: targetPath.split("//").join("/"),
  1552. },function(data){
  1553. $("#mainList").html("");
  1554. $("#mainList").append(backbtn);
  1555. if (Array.isArray(data)){
  1556. var folders = data[0];
  1557. var files = data[1];
  1558. //List all folders
  1559. for (var i =0; i < folders.length; i++){
  1560. var folderName = folders[i][0];
  1561. var folderPath = folders[i][1];
  1562. var fileCount = folders[i][2];
  1563. var folderCount = folders[i][3];
  1564. var box = folderTemplate;
  1565. if (folderName == ".cache" || folderName == ".trash"){
  1566. //Hidden folders
  1567. continue;
  1568. }
  1569. box = replaceAll("{filepath}",encodeURIComponent(folderPath),box);
  1570. box = replaceAll("{id}",i + 1,box);
  1571. box = replaceAll("{foldername}",ao_module_codec.decodeHexFoldername(folderName),box);
  1572. var fileinfo = "[" + fileCount + " files]"
  1573. if (folderCount > 0){
  1574. fileinfo = "[" + fileCount + " files, " + folderCount +" folders]"
  1575. }
  1576. box = replaceAll("{fileinfo}",fileinfo,box);
  1577. $("#mainList").append(box);
  1578. }
  1579. //List all files
  1580. for ( var i =0; i < files.length; i++){
  1581. var songInfo = files[i];
  1582. var path = songInfo[0];
  1583. var displayname = ao_module_codec.decodeUmFilename(songInfo[1]);
  1584. var ext = songInfo[2];
  1585. var size = songInfo[3];
  1586. var box = fileTemplate;
  1587. box = replaceAll("{filepath}",ao_module_utils.objectToAttr(path),box);
  1588. box = replaceAll("{id}",i + 1,box); //User count from 1
  1589. box = replaceAll("{rawname}",ao_module_utils.objectToAttr(songInfo[1]),box);
  1590. box = replaceAll("{songtitle}",displayname,box);
  1591. box = replaceAll("{ext}",ext,box);
  1592. box = replaceAll("{size}",size,box);
  1593. $("#mainList").append(box);
  1594. }
  1595. displayList = files;
  1596. totalMusicCount = files.length;
  1597. $("#mainList").append("<br><br><br><br><br><br><br>");
  1598. }else{
  1599. //Something went wrong
  1600. //console.log('[AirMusic] Something went wrong: ' + data);
  1601. loadFolderView();
  1602. return;
  1603. }
  1604. if (folders.length > 0 && files.length > 0){
  1605. $("#interfaceDetails").text("[" + files.length + " files, " + folders.length+ " folders]");
  1606. }else if (folders.length > 0){
  1607. $("#interfaceDetails").text("[" + folders.length + " folders]");
  1608. }else if (files.length > 0){
  1609. $("#interfaceDetails").text("[" + files.length + " files]");
  1610. }else{
  1611. $("#interfaceDetails").text("[0 files or folders]");
  1612. }
  1613. //Hook all the events for the moreinfo on folders
  1614. hookMoreFolderInfoClickEvent();
  1615. //Check if the current playing file is located inside this list.
  1616. highLightPlayingMusic();
  1617. //Check if auto playback is required. If yes, play it with the given filepath.
  1618. if (playIDAfterOpen != -1){
  1619. $(".mainList.item").each(function(){
  1620. if ($(this).attr("id") == playIDAfterOpen){
  1621. //This is the file that require to playback after the folder loaded
  1622. playSong($(this).find(".ts.header.selectable"),startPaused);
  1623. setTimeout(resizeQuickAdjust,500);
  1624. }
  1625. });
  1626. }
  1627. });
  1628. }
  1629. function moreInfo(object){
  1630. if ($(object).parent().attr('tag') == "folder"){
  1631. //This is a folder. Ask if play as playlist
  1632. alert("Folder playback work in progress");
  1633. }else{
  1634. showMore(object);
  1635. }
  1636. }
  1637. function hookMoreFolderInfoClickEvent(){
  1638. $(".mainList.rightFunctionBar").on("click", function(e){
  1639. e.stopPropagation();
  1640. moreInfo(this);
  1641. });
  1642. }
  1643. function highLightPlayingMusic(){
  1644. //This function is used for highlighting the current playing music if the music piece is found inside the current list
  1645. $(".mainList.item").removeClass("playingTrack");
  1646. $(".mainList.item").each(function(){
  1647. var id = parseInt($(this).attr("id"));
  1648. try{
  1649. var filepath = ao_module_utils.attrToObject($(this).attr("filepath"));
  1650. }catch{
  1651. //Use back the previous method of filepath storage for compatibility
  1652. var filepath = $(this).attr("filepath");
  1653. }
  1654. /*
  1655. if (id == playingFileDetail[0] && filepath == playingFileDetail[1]){
  1656. //This piece of music is playing in the current list
  1657. $(this).addClass("playingTrack");
  1658. }else if (playingFileDetail[0] == -1 && filepath == playingFileDetail[1]){
  1659. //This is for external accessed music playback. Music file might or might not exists in the current playlist. Try to highlight anyway
  1660. $(this).addClass("playingTrack");
  1661. }*/
  1662. //Id is ignored in the 9/9/2019 updates and only check if the path matches.
  1663. if (filepath == playingFileDetail[1]){
  1664. $(this).addClass("playingTrack");
  1665. }
  1666. //console.log([id,filepath], playingFileDetail);
  1667. });
  1668. //Update dropdownList as well if exists
  1669. $(".dropdownList.item").removeClass("playingTrack");
  1670. $(".dropdownList.item").each(function(){
  1671. try{
  1672. var filepath = ao_module_utils.attrToObject($(this).attr("filepath"));
  1673. }catch{
  1674. //Use back the previous method of filepath storage for compatibility
  1675. var filepath = $(this).attr("filepath");
  1676. }
  1677. //var filepath = $(this).attr("filepath");
  1678. if (filepath == playingFileDetail[1]){
  1679. $(this).addClass("playingTrack");
  1680. }
  1681. });
  1682. }
  1683. function monitorFileChangeForUpload(){
  1684. if ($("#interfaceTitle").text() == "Upload"){
  1685. //It is still in upload Mode. Continue monitor file change and move them if needed
  1686. $.post("listenUploadChange.php",{fileList: JSON.stringify(currentUploadTargetFileList),directory: currentUploadTargetFilepath}).done(function(data){
  1687. if (data.includes("ERROR")){
  1688. console.log(data);
  1689. }
  1690. });
  1691. setTimeout(monitorFileChangeForUpload,1000);
  1692. }
  1693. }
  1694. function hideShowMoreMenu(){
  1695. $(".showMoreMenus").fadeOut('fast');
  1696. $("#showmoreUIcover").fadeOut('fast');
  1697. //Return the playlistAddPendingFile object back to the playing one
  1698. if (playingFileDetail !== undefined){
  1699. playlistAddPendingFile = playingFileDetail[1];
  1700. }else{
  1701. //No song is being play back
  1702. playlistAddPendingFile = "";
  1703. }
  1704. }
  1705. function playFromShowMoreMenu(){
  1706. nextSong(showMoreOprPlayID - 1);
  1707. $(".showMoreMenus").fadeOut('fast');
  1708. }
  1709. function showFileInfo(){
  1710. $("#showFileInfo").show();
  1711. $("#showMoreUI").hide();
  1712. }
  1713. function startRelatedSearch(){
  1714. enterSearchMode();
  1715. $("#searchInputBar").val(showMoreoprDisplayName);
  1716. $("#searchInputBar").focus();
  1717. hideShowMoreMenu();
  1718. }
  1719. function searchYoutubeViaShowMore(){
  1720. if (showMoreoprDisplayName != "" || showMoreoprDisplayName != undefined){
  1721. var filename = showMoreoprDisplayName;
  1722. searchOnYoutube(filename);
  1723. }
  1724. }
  1725. var showMoreOprPlayID,showMoreOprFilepath, showMoreoprDisplayName;
  1726. function showMore(object){
  1727. var filepath = $(object).parent().attr("filepath");
  1728. filepath = JSON.parse(decodeURIComponent(filepath));
  1729. //User want more action on this file. assume this is the file to add
  1730. playlistAddPendingFile = filepath;
  1731. var id = $(object).parent().attr('id');
  1732. var rawname = $(object).parent().attr("rawname");
  1733. var displayName = JSON.parse(decodeURIComponent(ao_module_codec.decodeUmFilename(rawname)));
  1734. //Update global variable for quick operations
  1735. showMoreOprPlayID = id;
  1736. showMoreOprFilepath = filepath;
  1737. showMoreoprDisplayName = displayName;
  1738. $("#showMoreUI").find(".songTitle").text(displayName);
  1739. $("#showMoreUI").find(".songID").text(id);
  1740. $("#showFileInfo").find(".songTitle").text(displayName);
  1741. $("#showMoreUI").fadeIn('fast');
  1742. $("#showmoreUIcover").fadeIn('fast');
  1743. //Update fileinformation as well
  1744. if (filepath.substring(0, 12) == "/media?file="){
  1745. filepath = filepath.substring(12);
  1746. }
  1747. //Pre-render the file info
  1748. ao_module_agirun("Music/functions/getFileInfo.js", {
  1749. filepath: filepath,
  1750. }, function(data){
  1751. $("#showFileInfo").find(".filename").text(ao_module_codec.decodeUmFilename(data[0]));
  1752. $("#showFileInfo").find(".rawname").text(data[0]);
  1753. $("#showFileInfo").find(".filepath").text(data[1]);
  1754. $("#showFileInfo").find(".filesize").text(data[2] + " (" + data[3] + " Bytes)");
  1755. $("#showFileInfo").find(".filedate").text(data[4]);
  1756. });
  1757. if (currentMode != "playlist"){
  1758. $(".playlistonly").hide();
  1759. }else{
  1760. $(".playlistonly").show();
  1761. }
  1762. }
  1763. function playSongFromDropdownList(object){
  1764. //Play song from dropdown list. Hence, no need to update dropdownList
  1765. if ($(object).parent().hasClass("playingTrack")){
  1766. //This song already playing. Ignore play request.
  1767. return;
  1768. }
  1769. playSong(object);
  1770. //Check if the song is also in main list. If yes, highlight it as well
  1771. /*
  1772. $(".mainList.item").each(function(){
  1773. if ($(this).attr("filepath") == $(object).parent().attr("filepath")){
  1774. $(".mainList.item.playingTrack").removeClass("playingTrack");
  1775. $(this).addClass("playingTrack");
  1776. }
  1777. });
  1778. */
  1779. $("#dropdownSonglist").delay(500).slideUp();
  1780. highLightPlayingMusic();
  1781. }
  1782. //Move the playing song list into the dropdown song list. This list might not be the same as the one in the main list.
  1783. function parsePlayingSongList(){
  1784. var template = '<div class="dropdownList item" filepath={filepath} listid={id} rawname={rawname}>\
  1785. <div class="ts header selectable" style="margin:0px !important;" onClick="playSongFromDropdownList(this);">\
  1786. <i class="music icon whiteFont" style="overflow:hidden;"></i>\
  1787. <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">\
  1788. {songtitle}\
  1789. <div class="sub header fileinfo" style="color: #c7c7c7;">{ext} / {size}</div>\
  1790. </div>\
  1791. </div>\
  1792. <div class="topRightCorner" align="center">\
  1793. {id}\
  1794. </div>\
  1795. </div>';
  1796. $("#currentPlayingMainList").html("");
  1797. var counter = playingList.length;
  1798. var totalSize = 0.0;
  1799. for (var i = 0; i < playingList.length; i++){
  1800. var displayname = ao_module_codec.decodeUmFilename(playingList[i][1]);
  1801. var box = template;
  1802. box = replaceAll("{filepath}",ao_module_utils.objectToAttr(playingList[i][0]),box);
  1803. box = replaceAll("{id}",i + 1,box); //User count from 1
  1804. box = replaceAll("{rawname}",ao_module_utils.objectToAttr(playingList[i][1]),box);
  1805. box = replaceAll("{songtitle}",displayname,box);
  1806. box = replaceAll("{ext}",playingList[i][2],box);
  1807. box = replaceAll("{size}",playingList[i][3],box);
  1808. if (playingList[i][3].includes("MB")){
  1809. totalSize += parseFloat(playingList[i][3].split(" ")[0]);
  1810. }else if (playingList[i][3].includes("KB")){
  1811. totalSize += parseFloat(playingList[i][3].split(" ")[0]) / 1000;
  1812. }else if (playingList[i][3].includes("GB")){
  1813. totalSize += parseFloat(playingList[i][3].split(" ")[0]) * 1000;
  1814. }
  1815. $("#currentPlayingMainList").append(box);
  1816. $("#dropdownListSongCount").text(counter);
  1817. $("#dropdownListIDCount").text(parseInt(totalSize) + "");
  1818. }
  1819. $(".dropdownList.item").each(function(){
  1820. if ($(this).attr('filepath') == playingFileDetail[1]){
  1821. $(this).addClass("playingTrack");
  1822. }
  1823. });
  1824. }
  1825. function loadSongList(type = "all"){
  1826. currentPath = "";
  1827. currentMode = "music";
  1828. var template = '<div class="mainList item" filepath={filepath} id={id} rawname={rawname}>\
  1829. <div class="ts header selectable" style="margin:0px !important;" onClick="playSong(this);">\
  1830. <i class="music icon whiteFont" style="overflow:hidden;"></i>\
  1831. <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">\
  1832. {songtitle}\
  1833. <div class="sub header fileinfo" style="color: #c7c7c7;">{ext} / {size}</div>\
  1834. </div>\
  1835. </div>\
  1836. <div class="topRightCorner" align="center">\
  1837. {id}\
  1838. </div>\
  1839. <div class="mainList rightFunctionBar" align="center" onClick="showMore(this);">\
  1840. <i class="ellipsis vertical icon" style="top:30%;"></i>\
  1841. </div>\
  1842. </div>';
  1843. $("#interfaceTitle").text("Music");
  1844. $("#AMmenuIcon").attr("class","music icon large whiteFont")
  1845. ao_module_agirun("Music/functions/listSong.js", {
  1846. listSong: type,
  1847. },function(data){
  1848. //Initialize the song list
  1849. displayList = data;
  1850. if (type == "all"){
  1851. //Caching is used in here
  1852. displayList = data.list;
  1853. if (data.cached == true){
  1854. //This is a cached version of the music list.
  1855. console.log("Updating cached song list");
  1856. ao_module_agirun("Music/functions/buildCache.js", {}, function(data){
  1857. console.log("Cache updated: ", data);
  1858. });
  1859. }
  1860. }
  1861. console.log(displayList);
  1862. if (playingList == []){
  1863. playingList = Array.from(displayList);
  1864. }
  1865. $("#mainList").html("");
  1866. for ( var i =0; i < displayList.length; i++){
  1867. var songInfo = displayList[i];
  1868. var path = songInfo[0];
  1869. var displayname = ao_module_codec.decodeUmFilename(songInfo[1]);
  1870. var ext = songInfo[2];
  1871. var size = songInfo[3];
  1872. var box = template;
  1873. box = replaceAll("{filepath}",ao_module_utils.objectToAttr(path),box);
  1874. box = replaceAll("{id}",i + 1,box); //User count from 1
  1875. box = replaceAll("{rawname}",ao_module_utils.objectToAttr(songInfo[1]),box);
  1876. box = replaceAll("{songtitle}",displayname,box);
  1877. box = replaceAll("{ext}",ext,box);
  1878. box = replaceAll("{size}",size,box);
  1879. $("#mainList").append(box);
  1880. }
  1881. totalMusicCount = displayList.length;
  1882. $("#mainList").append("<br><br><br><br><br><br><br>");
  1883. $("#interfaceDetails").text("[" + i + " songs]");
  1884. highLightPlayingMusic();
  1885. }, function(){
  1886. alert("Failed to access listSong API with type: " + type)
  1887. });
  1888. hideLeftMenu();
  1889. }
  1890. function toggleLeftMenu(){
  1891. if (leftMenuShown){
  1892. $("#leftSideBar").animate({left: $("#leftSideBar").width() * -1}, 300,function(){
  1893. $("#leftSideBar").hide();
  1894. });
  1895. $("#sideBarCover").fadeOut();
  1896. leftMenuShown = false;
  1897. }else{
  1898. $("#leftSideBar").show();
  1899. $("#leftSideBar").animate({left:0}, 300);
  1900. $("#sideBarCover").fadeIn();
  1901. leftMenuShown = true;
  1902. }
  1903. }
  1904. function hideLeftMenu(){
  1905. if (leftMenuShown){
  1906. $("#leftSideBar").animate({left: $("#leftSideBar").width() * -1}, 300,function(){
  1907. $("#leftSideBar").hide();
  1908. });
  1909. $("#sideBarCover").fadeOut();
  1910. leftMenuShown = false;
  1911. }
  1912. }
  1913. function showFileInformation(){
  1914. ao_module_agirun("Music/functions/getFileInfo.js", {
  1915. filepath: playingFileDetail[1],
  1916. },function(data){
  1917. //console.log(data);
  1918. $("#settingInterface").hide();
  1919. $("#filepropInterface").show();
  1920. $("#filepropInterface").find(".filename").text(ao_module_codec.decodeUmFilename(data[0]));
  1921. $("#filepropInterface").find(".rawname").text(data[0]);
  1922. $("#filepropInterface").find(".filepath").text(data[1]);
  1923. $("#filepropInterface").find(".filesize").text(data[2] + " (" + data[3] + " Bytes)");
  1924. $("#filepropInterface").find(".filedate").text(data[4]);
  1925. });
  1926. }
  1927. function resizeQuickAdjust(){
  1928. //Resize the position of the leftMenu
  1929. if (!leftMenuShown){
  1930. $("#leftSideBar").css("left", $("#leftSideBar").width() * -1);
  1931. }
  1932. if ($("#playerInterface").offset().left != 0){
  1933. $("#playerInterface").css("left",window.innerWidth);
  1934. }
  1935. $("#albumnArtImage").css("max-height",window.innerHeight - 255);
  1936. setTimeout(function(){
  1937. $("#albumnArt").css({
  1938. "height": window.innerHeight - 255,
  1939. "top": (window.innerHeight / 2 - $("#albumnArtImage").height()/2)
  1940. });
  1941. },50);
  1942. //var imageTop = (window.innerHeight - 255 - $("#albumnArtImage").height()) / 2;
  1943. //$("#albumnArtImage").css("top",imageTop + "px");
  1944. console.log(window.innerHeight);
  1945. }
  1946. function setStorage(configName,configValue){
  1947. ao_module_storage.setStorage("AirMusic",configName,configValue);
  1948. /*
  1949. $.ajax({
  1950. type: 'GET',
  1951. url: "../system/file_system/preference",
  1952. data: {key: "AirMusic/" + configName,value:configValue},
  1953. success: function(data){},
  1954. async:true
  1955. });
  1956. */
  1957. return true;
  1958. }
  1959. function loadStorage(configName){
  1960. /*
  1961. var result = "";
  1962. $.ajax({
  1963. type: 'GET',
  1964. url: "../system/file_system/preference",
  1965. data: {key: "AirMusic/" + configName},
  1966. success: function(data){
  1967. if (data.error !== undefined){
  1968. result = "";
  1969. }else{
  1970. result = data;
  1971. }
  1972. },
  1973. error: function(data){result = "";},
  1974. async:false,
  1975. timeout: 3000
  1976. });
  1977. return result;
  1978. */
  1979. return ao_module_storage.loadStorage("AirMusic",configName);
  1980. }
  1981. //Wipe controller for mobile users
  1982. $("#albumnArt")[0].addEventListener('touchstart', handleTouchStart, false);
  1983. $("#albumnArt")[0].addEventListener('touchmove', handleTouchMove, false);
  1984. var xDown = null;
  1985. var yDown = null;
  1986. function getTouches(evt) {
  1987. return evt.touches || // browser API
  1988. evt.originalEvent.touches; // jQuery
  1989. }
  1990. function handleTouchStart(evt) {
  1991. const firstTouch = getTouches(evt)[0];
  1992. xDown = firstTouch.clientX;
  1993. yDown = firstTouch.clientY;
  1994. };
  1995. function handleTouchMove(evt) {
  1996. if ( ! xDown || ! yDown ) {
  1997. return;
  1998. }
  1999. var xUp = evt.touches[0].clientX;
  2000. var yUp = evt.touches[0].clientY;
  2001. var xDiff = xDown - xUp;
  2002. var yDiff = yDown - yUp;
  2003. if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
  2004. if ( xDiff > 0 ) {
  2005. /* left swipe */
  2006. //Going to the next song
  2007. nextSong();
  2008. } else {
  2009. /* right swipe */
  2010. //Going back one song
  2011. previousSong();
  2012. }
  2013. } else {
  2014. if ( yDiff > 0 ) {
  2015. /* up swipe */
  2016. } else {
  2017. /* down swipe */
  2018. }
  2019. }
  2020. /* reset values */
  2021. xDown = null;
  2022. yDown = null;
  2023. };
  2024. //Handle audio progress to time conversion
  2025. function secondsToHms(d) {
  2026. d = Number(d);
  2027. var h = Math.floor(d / 3600);
  2028. var m = Math.floor(d % 3600 / 60);
  2029. var s = Math.floor(d % 3600 % 60);
  2030. if (h > 0 && h < 10){
  2031. dh = "0" + h + ":";
  2032. }else if (h == 0){
  2033. dh = "";
  2034. }else{
  2035. dh = h + ":";
  2036. }
  2037. if (m > 0 && m < 10){
  2038. dm = "0" + m + ":";
  2039. }else if (m == 0){
  2040. if (h > 0){
  2041. dm = "00:";
  2042. }else{
  2043. dm = "0:";
  2044. }
  2045. }else{
  2046. dm = m + ":";
  2047. }
  2048. if (s > 0 && s < 10){
  2049. ds = "0" + s;
  2050. }else if (s == 0){
  2051. if (m > 0 || h > 0){
  2052. ds = "00";
  2053. }else{
  2054. ds = "00";
  2055. }
  2056. }else{
  2057. ds = s;
  2058. }
  2059. return dh + dm + ds;
  2060. }
  2061. //Handle window resize events
  2062. $(window).on("resize", function(){
  2063. resizeQuickAdjust();
  2064. });
  2065. function AllQuickMenuHidden(){
  2066. var result = true;
  2067. $(".quickMenu").each(function(){
  2068. if ( $(this).is(':visible') ){
  2069. result = false;
  2070. }
  2071. });
  2072. return result;
  2073. }
  2074. function AllSubMenuHidden(){
  2075. var result = true;
  2076. $(".showMoreMenus").each(function(){
  2077. if ( $(this).is(':visible') ){
  2078. result = false;
  2079. }
  2080. });
  2081. return result;
  2082. }
  2083. //Handle back button press on mobile devices
  2084. function handleBackButton() {
  2085. if (!AllQuickMenuHidden()){
  2086. hideAllquickMenu();
  2087. window.history.pushState({}, '');
  2088. }else if (mainPlayerShown()){
  2089. //Close the main Menu
  2090. hideMainPlayerInterface();
  2091. window.history.pushState({}, '');
  2092. }else if (!AllSubMenuHidden()){
  2093. $(".showMoreMenus").fadeOut('fast');
  2094. $("#showmoreUIcover").fadeOut('fast');
  2095. window.history.pushState({}, '');
  2096. }else{
  2097. window.history.back();
  2098. }
  2099. }
  2100. window.addEventListener('popstate', handleBackButton);
  2101. window.history.pushState({}, '');
  2102. </script>
  2103. </body>
  2104. </html>