|
|
@@ -5,11 +5,12 @@
|
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
|
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
|
|
|
<meta name="theme-color" content="#4b75ff">
|
|
|
- <link rel="stylesheet" href="../script/tocas/tocas.css">
|
|
|
+ <link rel="stylesheet" href="../script/semantic/semantic.min.css">
|
|
|
<link rel="stylesheet" href="./main.css">
|
|
|
- <script src="../script/tocas/tocas.js"></script>
|
|
|
<script src="../script/jquery.min.js"></script>
|
|
|
<script src="../script/ao_module.js"></script>
|
|
|
+ <script src="../script/semantic/semantic.min.js"></script>
|
|
|
+
|
|
|
<!-- Handle native playback on Chrome Andoird-->
|
|
|
<script src="native.js"></script>
|
|
|
|
|
|
@@ -17,24 +18,24 @@
|
|
|
<title>AirMusic</title>
|
|
|
</head>
|
|
|
<body>
|
|
|
-<div id="mainMenu" class="ts basic fluid AMmenu menu bottomBlue" style="z-index:80;position:fixed;position:top:0px;left:0px;width:100%;">
|
|
|
- <button class="ts item icon noBorder AMmenu button" onClick="toggleLeftMenu();"><i class="content icon"></i></button>
|
|
|
+<div id="mainMenu" class="ui basic fluid AMmenu menu bottomBlue" style="z-index:80;position:fixed;position:top:0px;left:0px;width:100%;">
|
|
|
+ <button class="ui item icon noBorder AMmenu button" onClick="toggleLeftMenu();"><i class="content icon"></i></button>
|
|
|
<div class="item noBorder AMmenu" style="padding-right:0px;padding-top:12px;"><i id="AMmenuIcon" class="music icon large whiteFont"></i></div>
|
|
|
<div class="item noBorder AMmenu" style="padding-left:3px;padding-top:3px;padding-bottom:5px;min-width:50%;">
|
|
|
- <div class="ts header whiteFont">
|
|
|
- <div id="interfaceTitle" style="display:inline;">Music</div>
|
|
|
- <div id="interfaceDetails" class="sub header" style="font-size:80%;line-height:1em;">[0 songs]</div>
|
|
|
+ <div class="ui header whiteFont">
|
|
|
+ <div id="interfaceTitle" style="display:inline; font-weight: lighter;">Music</div>
|
|
|
+ <div id="interfaceDetails" class="sub header" style="font-size:80%; line-height:1em; color: white;">[0 songs]</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <button class="ts right item icon AMmenu noBorder button" onClick="enterSearchMode();"><i class="search icon"></i></button>
|
|
|
- <!-- <button class="ts right item icon AMmenu noBorder button"><i class="ellipsis vertical icon"></i></button> -->
|
|
|
+ <button class="ui right item icon AMmenu noBorder button" onClick="enterSearchMode();"><i class="search icon"></i></button>
|
|
|
+ <!-- <button class="ui right item icon AMmenu noBorder button"><i class="ellipsis vertical icon"></i></button> -->
|
|
|
</div>
|
|
|
-<div id="searchModeMenu" class="ts basic fluid AMmenu menu bottomBlue" style="z-index:85;position:fixed;top:0px;left:0px;width:100%;height:51px;display:none;">
|
|
|
- <button class="ts item icon noBorder AMmenu button" onClick="exitSearchMode();"><i class="arrow left icon"></i></button>
|
|
|
- <div class="ts fluid input" >
|
|
|
+<div id="searchModeMenu" class="ui basic fluid AMmenu menu bottomBlue" style="z-index:85;position:fixed;top:0px;left:0px;width:100%;height:51px;display:none;">
|
|
|
+ <button class="ui item icon noBorder AMmenu button" onClick="exitSearchMode();"><i class="arrow left icon"></i></button>
|
|
|
+ <div class="ui fluid input" >
|
|
|
<input id="searchInputBar" onkeypress="//handleSearchInputEnter(event);" 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">
|
|
|
</div>
|
|
|
- <button class="ts right item icon AMmenu noBorder button" onClick="searchSong();"><i class="search icon"></i></button>
|
|
|
+ <button class="ui right item icon AMmenu noBorder button" onClick="searchSong();"><i class="search icon"></i></button>
|
|
|
</div>
|
|
|
<!-- The main list that display the current information-->
|
|
|
<div id="mainList">
|
|
|
@@ -44,7 +45,7 @@
|
|
|
<!-- Advance functions config menu-->
|
|
|
<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>
|
|
|
<div id="showMoreUI" class="showMoreMenus" style="display:none;">
|
|
|
- <div class="ts large header whiteFont songTitle">N/A</div>
|
|
|
+ <div class="ui large header whiteFont songTitle">N/A</div>
|
|
|
<div class="showMoreMenuItem" onClick="playFromShowMoreMenu();">Play</div>
|
|
|
<div class="showMoreMenuItem" onclick='addToPlaylistFromMoreMenu();'>Add to Playlist</div>
|
|
|
<div class="showMoreMenuItem playlistonly" onclick="removeFromPlylistFromMoreMenu();">Remove from current Playlist</div>
|
|
|
@@ -57,11 +58,11 @@
|
|
|
<div class="topRightCorner songID" align="center" style="margin-top:10px !important;padding-top:3px !important;">-1</div>
|
|
|
</div>
|
|
|
<div id="showFileInfo" class="showMoreMenus" style="display:none;">
|
|
|
- <div class="ts large header">
|
|
|
+ <div class="ui large header">
|
|
|
<span class="filename whiteFont">Title</span>
|
|
|
<div class="sub header rawname whiteFont" style="word-break: break-all !important; font-size:80%;">Storage Name</div>
|
|
|
</div>
|
|
|
- <div class="ts list whiteFont">
|
|
|
+ <div class="ui list whiteFont">
|
|
|
<div class="item whiteFont">Storage Location: <span class="filepath" style="word-break:break-all;">N/A</span></div>
|
|
|
<div class="item whiteFont">File Size: <span class="filesize">N/A</span></div>
|
|
|
<div class="item whiteFont">Last Modification Date: <span class="filedate">N/A</span></div>
|
|
|
@@ -72,10 +73,10 @@
|
|
|
<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>
|
|
|
<div id="leftSideBar" class="leftsb" style="max-width:60%;height:100%;z-index:90;display:none;">
|
|
|
<div class="leftsbObject sidebarBanner">
|
|
|
- <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>
|
|
|
+ <img class="ui tiny middle aligned image" src="img/main_icon.png" style="max-width: 50px;"><h5 class="whiteFont" style="display:inline;padding-left:8px;">AirMusic</h5>
|
|
|
</div>
|
|
|
<div class="leftsbObject sbSelectable sbPaddingIn" style="font-size:80%;" onClick="loadSongList();setStorage('viewingTab','music');">
|
|
|
- <div class="ts header">
|
|
|
+ <div class="ui header">
|
|
|
<i class="music tiny icon whiteFont"></i>
|
|
|
<div class="content whiteFont">
|
|
|
Music
|
|
|
@@ -83,7 +84,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="leftsbObject sbSelectable sbPaddingIn" style="font-size:80%;" onClick="loadFolderView();setStorage('viewingTab','folder');">
|
|
|
- <div class="ts header">
|
|
|
+ <div class="ui header">
|
|
|
<i class="folder tiny icon whiteFont"></i>
|
|
|
<div class="content whiteFont">
|
|
|
Folder
|
|
|
@@ -91,7 +92,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="leftsbObject sbSelectable sbPaddingIn" style="font-size:80%;" onClick="loadPlaylistView(); setStorage('viewingTab','playlist');">
|
|
|
- <div class="ts header">
|
|
|
+ <div class="ui header">
|
|
|
<i class="align justify tiny icon whiteFont"></i>
|
|
|
<div class="content whiteFont">
|
|
|
Playlists
|
|
|
@@ -99,7 +100,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="leftsbObject sbSelectable sbPaddingIn" style="font-size:80%;" onClick="loadNetworkView(); setStorage('viewingTab','network');">
|
|
|
- <div class="ts header">
|
|
|
+ <div class="ui header">
|
|
|
<i class="world tiny icon whiteFont"></i>
|
|
|
<div class="content whiteFont">
|
|
|
Network
|
|
|
@@ -108,7 +109,7 @@
|
|
|
</div>
|
|
|
<!--
|
|
|
<div class="leftsbObject sbSelectable sbPaddingIn" style="font-size:80%;" onClick="">
|
|
|
- <div class="ts header">
|
|
|
+ <div class="ui header">
|
|
|
<i class="upload icon whiteFont"></i>
|
|
|
<div class="content whiteFont">
|
|
|
Upload
|
|
|
@@ -117,7 +118,7 @@
|
|
|
</div>
|
|
|
-->
|
|
|
<div class="leftsbObject sbSelectable sbPaddingIn" style="font-size:80%;border-top: 2px solid #4a4a4a;">
|
|
|
- <div class="ts header">
|
|
|
+ <div class="ui header">
|
|
|
<i class="setting tiny icon whiteFont"></i>
|
|
|
<div class="content whiteFont">
|
|
|
Settings
|
|
|
@@ -129,8 +130,8 @@
|
|
|
<!-- Mini player controller put on the bottom side of the list interface-->
|
|
|
<div id="miniPlayer" class="hidden">
|
|
|
<div style="padding-left:20px;padding-top:5px;" >
|
|
|
- <div class="ts header selectable" style="margin:0px !important;width:300px;cursor:pointer;" onClick="showMainPlayerInterface();">
|
|
|
- <i class="music icon whiteFont" style="overflow:hidden;"></i>
|
|
|
+ <div class="ui header selectable" style="margin:0px !important;width:300px;cursor:pointer;" onClick="showMainPlayerInterface();">
|
|
|
+ <img id="smallPlayerThumb" class="ui small image" src="img/eq.svg" style="margin-right: 0.2em;"></img>
|
|
|
<div class="content whiteFont" style="padding-top:5px;line-height:1em;">
|
|
|
<div id="miniPlayerDisplayName" style="text-overflow: ellipsis;overflow: hidden;max-width:200px; white-space: nowrap;">N/A</div>
|
|
|
<div id="miniPlayerInformation" class="sub header" style="color: #c7c7c7;size:95%;">No information</div>
|
|
|
@@ -141,9 +142,9 @@
|
|
|
0/0
|
|
|
</div>
|
|
|
<div class="miniPlayerControls">
|
|
|
- <button class="miniPlayer selectable" style="font-size:90%;" onClick="previousSong();"><i class="step backward icon whiteFont"></i></button>
|
|
|
- <button class="miniPlayer selectable" style="font-size:120%;" onClick="togglePlayMode();"><i class="play icon whiteFont PlayButton"></i></button>
|
|
|
- <button class="miniPlayer selectable" style="font-size:90%;" onClick="nextSong();"><i class="step forward icon whiteFont "></i></button>
|
|
|
+ <button class="miniPlayer selectable" style="font-size:90%; font-weight: lighter;" onClick="previousSong();"><i class="step backward icon whiteFont"></i></button>
|
|
|
+ <button class="miniPlayer selectable" style="font-size:120%; font-weight: lighter;" onClick="togglePlayMode();"><i class="play icon whiteFont PlayButton"></i></button>
|
|
|
+ <button class="miniPlayer selectable" style="font-size:90%; font-weight: lighter;" onClick="nextSong();"><i class="step forward icon whiteFont "></i></button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- Main interface for player and audio controller-->
|
|
|
@@ -162,29 +163,29 @@
|
|
|
<i class="large content icon"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div style="padding-left:20px; padding-right:20px;padding-bottom:5px;" align="center">
|
|
|
+ <div style="padding-left:20px; padding-right:20px;padding-bottom:5px; position: relative;" align="center">
|
|
|
<!-- Function Menu Bar-->
|
|
|
- <div class="ts grid">
|
|
|
- <div class="two wide column"><button style="cursor: pointer;" onclick="showPlaylistInterface();"><i class="large plus icon whiteFont"></i></button></div>
|
|
|
- <div class="two wide column"><button id="downloadBtn" style="cursor: pointer;" onClick="downloadPlayingSong();"><i class="large download icon whiteFont"></i></button></div>
|
|
|
- <div class="two wide column"><button style="cursor: pointer;" onClick="openInFileExplorer();"><i class="large folder open icon whiteFont"></i></button></div>
|
|
|
- <div class="two wide column desktopOnly"><button style="cursor: pointer;" onClick="mute();" ><i class="large volume off icon whiteFont"></i></button></div>
|
|
|
- <div class="two wide column desktopOnly"><button style="cursor: pointer;" onClick="addAudioVolume(-0.05);"><i class="large volume down icon whiteFont"></i></button></div>
|
|
|
- <div class="two wide column desktopOnly"><button style="cursor: pointer;" onClick="addAudioVolume(0.05);"><i class="large volume up icon whiteFont"></i></button></div>
|
|
|
- <div class="two wide column"><button style="cursor: pointer;" onClick="showTimerInterface();"><i class="large clock icon whiteFont"></i></button></div>
|
|
|
- <div class="two wide column"><button style="cursor: pointer;" onClick="showSettingInterface();"><i class="large setting icon whiteFont"></i></button></div>
|
|
|
+ <div class="ui grid">
|
|
|
+ <div class="two wide column"><button class="topPanelButtons" style="cursor: pointer;" onclick="showPlaylistInterface();"><i class="large plus icon whiteFont"></i></button></div>
|
|
|
+ <div class="two wide column"><button class="topPanelButtons" id="downloadBtn" style="cursor: pointer;" onClick="downloadPlayingSong();"><i class="large download icon whiteFont"></i></button></div>
|
|
|
+ <div class="two wide column"><button class="topPanelButtons" style="cursor: pointer;" onClick="openInFileExplorer();"><i class="large folder open icon whiteFont"></i></button></div>
|
|
|
+ <div class="two wide column desktopOnly" style="margin-top: -4px;"><button class="topPanelButtons" style="cursor: pointer; opacity: 0.6;" onClick="mute(this);" ><i class="icons"><i class="big red dont icon"></i><i style="margin-left: -3px;" class="large volume off icon whiteFont"></i></i></button></div>
|
|
|
+ <div class="two wide column desktopOnly"><button class="topPanelButtons" id="voldownBtn" style="cursor: pointer;" onClick="addAudioVolume(-0.05);"><i class="large volume down icon whiteFont"></i></button></div>
|
|
|
+ <div class="two wide column desktopOnly"><button class="topPanelButtons" id="volupBtn" style="cursor: pointer;" onClick="addAudioVolume(0.05);"><i class="large volume up icon whiteFont"></i></button></div>
|
|
|
+ <div class="two wide column"><button class="topPanelButtons" style="cursor: pointer;" onClick="showTimerInterface();"><i class="large clock icon whiteFont"></i></button></div>
|
|
|
+ <div class="two wide column"><button class="topPanelButtons" style="cursor: pointer;" onClick="showSettingInterface();"><i class="large setting icon whiteFont"></i></button></div>
|
|
|
</div>
|
|
|
- <div id="volumeGUI">
|
|
|
- <i class="volume off large icon whiteFont" style="position:absolute;left:12%;top:10px;"></i>
|
|
|
- <div class="ts tiny progress">
|
|
|
- <div id="volBar" class="bar" style="width: 40%"></div>
|
|
|
+ <div id="volumeGUI" align="center">
|
|
|
+ <i class="volume off large icon whiteFont" style="position:absolute;left:2em;top:1em;"></i>
|
|
|
+ <div class="ui tiny progress" style=" margin-top: calc(2em - 5px); margin-bottom: 0; background-color: rgba(255,255,255,0.2);" align="left">
|
|
|
+ <div id="volBar" class="bar" style="min-width: 0px; width: 40%; height: 10px; background-color: #4b75ff;"></div>
|
|
|
</div>
|
|
|
- <i class="volume up large icon whiteFont" style="position:absolute;right:12%;top:10px;"></i>
|
|
|
+ <i class="volume up large icon whiteFont" style="position:absolute;right:2em;top:1em;"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- Download progress bar-->
|
|
|
- <div id="downloadProgressBar" class="ts attached fluid tiny progress" style="background-color:rgba(20, 20, 20, 0.9);display:none;">
|
|
|
- <div class="bar" style="width: 0%;background-color:rgb(75, 117, 255) !important;"></div>
|
|
|
+ <div id="downloadProgressBar" class="ui attached fluid tiny progress" style="background-color:rgba(20, 20, 20, 0.9);display:none;">
|
|
|
+ <div class="bar" style="min-width: 0px; width: 0%;background-color:rgb(75, 117, 255) !important;"></div>
|
|
|
</div>
|
|
|
|
|
|
<div id="albumnArt" align="center">
|
|
|
@@ -206,14 +207,14 @@
|
|
|
|
|
|
<div style="position:absolute;width:100%;left:0px;bottom:0px;">
|
|
|
<div style="padding-left:10px;padding-right:10px;">
|
|
|
- <div class="ts small primary progress">
|
|
|
- <div id="audioProgressBar" class="bar" style="width: 100%; background: #4b75ff;"></div>
|
|
|
+ <div class="ui small primary progress" style="background-color: rgba(255,255,255,0.4);">
|
|
|
+ <div id="audioProgressBar" class="bar" style="min-width: 0px; width: 100%; background: #4b75ff;"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mainControlButtons">
|
|
|
- <button style="font-size:90%;padding:15px;" onClick="previousSong();"><i class="step backward icon whiteFont"></i></button>
|
|
|
- <button style="font-size:130%;" onClick="togglePlayMode();"><i class="play icon whiteFont PlayButton"></i></button>
|
|
|
- <button style="font-size:90%;padding:15px;" onClick="nextSong();"><i class="step forward icon whiteFont "></i></button>
|
|
|
+ <button class="panelButtons" style="font-size:90%;padding:15px;" onClick="previousSong();"><i class="step backward icon whiteFont"></i></button>
|
|
|
+ <button class="panelButtons" style="font-size:130%;" onClick="togglePlayMode();"><i class="play icon whiteFont PlayButton"></i></button>
|
|
|
+ <button class="panelButtons" style="font-size:90%;padding:15px;" onClick="nextSong();"><i class="step forward icon whiteFont "></i></button>
|
|
|
</div>
|
|
|
<div id="randomModeButton" style="position: absolute; left:30px;bottom:20px;" onClick="toggleRandomMode(this);">
|
|
|
<i class="large random icon disabled"></i>
|
|
|
@@ -253,63 +254,63 @@
|
|
|
<br>
|
|
|
<div id="timerSettingInterface" style="width:100%;" align="center">
|
|
|
<div>
|
|
|
- <div class="ts statistic">
|
|
|
+ <div class="ui statistic">
|
|
|
<div class="label whiteFont">hours</div>
|
|
|
<div id="timerHour" class="value whiteFont">0</div>
|
|
|
</div>
|
|
|
- <div class="ts statistic">
|
|
|
+ <div class="ui statistic">
|
|
|
<div class="label whiteFont">minutes</div>
|
|
|
<div id="timerMinute" class="value whiteFont">0</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <div class="ts icon mini buttons">
|
|
|
- <button class="ts inverted button" onClick="addTimer('h',1);"><i class="add icon"></i></button>
|
|
|
- <button class="ts inverted button" onClick="addTimer('h','r');"><i class="refresh icon"></i></button>
|
|
|
- <button class="ts inverted button" onClick="addTimer('h',-1);"><i class="minus icon"></i></button>
|
|
|
+ <div class="ui icon mini buttons">
|
|
|
+ <button class="ui secondary button" onClick="addTimer('h',1);"><i class="add icon"></i></button>
|
|
|
+ <button class="ui secondary button" onClick="addTimer('h','r');"><i class="refresh icon"></i></button>
|
|
|
+ <button class="ui secondary button" onClick="addTimer('h',-1);"><i class="minus icon"></i></button>
|
|
|
</div>
|
|
|
- <div class="ts icon mini buttons">
|
|
|
- <button class="ts inverted button" onClick="addTimer('m',10);"><i class="add icon"></i></button>
|
|
|
- <button class="ts inverted button" onClick="addTimer('m','r');"><i class="refresh icon"></i></button>
|
|
|
- <button class="ts inverted button" onClick="addTimer('m',-1);"><i class="minus icon"></i></button>
|
|
|
+ <div class="ui icon mini buttons">
|
|
|
+ <button class="ui secondary button" onClick="addTimer('m',10);"><i class="add icon"></i></button>
|
|
|
+ <button class="ui secondary button" onClick="addTimer('m','r');"><i class="refresh icon"></i></button>
|
|
|
+ <button class="ui secondary button" onClick="addTimer('m',-1);"><i class="minus icon"></i></button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div id="timerCountingInterface" style="width:100%; display:none;" align="center">
|
|
|
- <div class="ts statistic">
|
|
|
+ <div class="ui statistic">
|
|
|
<div id="remainingUI" class="value whiteFont">0:00:00</div>
|
|
|
<div class="label whiteFont">Remaining</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="ts divider"></div>
|
|
|
+ <div class="ui divider"></div>
|
|
|
<div>
|
|
|
- <div class="ts grid">
|
|
|
+ <div class="ui grid">
|
|
|
<div class="eight wide column">
|
|
|
Times up action
|
|
|
</div>
|
|
|
<div class="eight wide column">
|
|
|
- <select id="stopMode" class="ts basic inverted mini dropdown">
|
|
|
+ <select id="stopMode" class="ui selection mini fluid dropdown">
|
|
|
<option>Fade Out & Stop</option>
|
|
|
<option>Stop Playing</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div style="width:100%;position:absolute;left:0px;bottom:0px; margin-bottom: 10px;;" align="center">
|
|
|
- <div class="ts grid" >
|
|
|
- <div class="eight wide column" style="padding-right: 0px;" align="center"><button class="greenBtn" onClick='hideAllquickMenu();'>Close</button></div>
|
|
|
- <div class="eight wide column" style="padding-left: 0px;" align="center"><button class="greenBtn" onClick="toggleCountDown(this);">Start</button></div>
|
|
|
+ <div style="width:100%;position:absolute;left:0px;bottom:20px;" align="right">
|
|
|
+ <div class="ui grid" >
|
|
|
+ <div class="eight wide column" style="padding-right: 0px;" align="center"><button class="greenBtn fluid" onClick='hideAllquickMenu();'>Close</button></div>
|
|
|
+ <div class="eight wide column" style="padding-left: 0px;" align="center"><button class="greenBtn fluid" onClick="toggleCountDown(this);">Start</button></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- File properties interface-->
|
|
|
<div id="filepropInterface" class="quickMenu">
|
|
|
- <div class="ts header">
|
|
|
+ <div class="ui header">
|
|
|
<span class="filename whiteFont">Title</span>
|
|
|
<div class="sub header rawname whiteFont" style="word-break:break-all;">Storage Name</div>
|
|
|
</div>
|
|
|
- <div class="ts list whiteFont">
|
|
|
+ <div class="ui list whiteFont">
|
|
|
<div class="item whiteFont">Storage Location: <span class="filepath" style="word-break:break-all;">N/A</span></div>
|
|
|
<div class="item whiteFont">File Size: <span class="filesize">N/A</span></div>
|
|
|
<div class="item whiteFont">Last Modification Date: <span class="filedate">N/A</span></div>
|
|
|
@@ -318,13 +319,13 @@
|
|
|
<!-- Setting interface-->
|
|
|
<div id="settingInterface" class="quickMenu">
|
|
|
<div style="">
|
|
|
- <div class="ts relaxed list" style="padding:0px !important;">
|
|
|
+ <div class="ui relaxed list" style="padding:0px !important;">
|
|
|
<div id="settingMenuTitle" class="item whiteFont" style="">N/A</div>
|
|
|
<div class="item selectable whiteFont" onclick="showPlaylistInterface(); $('#settingInterface').fadeOut('fast');"><i class="add icon" style="margin-right:5px;"></i> Add to playlist</div>
|
|
|
<div class="item selectable whiteFont" onClick="openInFileExplorer(); hideAllquickMenu();"><i class="folder open icon" style="margin-right:5px;"></i> Open in File Explorer</div>
|
|
|
<div class="item selectable whiteFont" onClick="searchOnYoutube(); hideAllquickMenu();"><i class="youtube play icon" style="margin-right:5px;"></i>Search on Youtube</div>
|
|
|
<div class="item selectable whiteFont" onClick="showFileInformation();"><i class="file icon" style="margin-right:5px;"></i> File Information</div>
|
|
|
- <div class="ts divider"></div>
|
|
|
+ <div class="ui divider"></div>
|
|
|
<div id="closeWebAppButton" class="item selectable whiteFont" onClick="ao_module_close();"><i class="remove icon" style="margin-right:5px;"></i> Exit Application</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -333,7 +334,7 @@
|
|
|
|
|
|
<!-- Playlist interface-->
|
|
|
<div id="playlistInterface" class="quickMenu">
|
|
|
- <div class="ts header">
|
|
|
+ <div class="ui header">
|
|
|
<span class="whiteFont">Add to Playlist</span>
|
|
|
</div>
|
|
|
<div class="playlist item selectable whiteFont" onclick="addToNewPlaylist();">
|
|
|
@@ -346,10 +347,10 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<br>
|
|
|
- <div style="width:100%;position:absolute;left:0px;bottom:0px; margin-bottom: 10px;;" align="center">
|
|
|
+ <div style="width:100%;position:absolute;left:0px;bottom:0px; margin-bottom: 10px;" align="center">
|
|
|
<button class="greenBtn" onClick='hideAllquickMenu();'>Close</button>
|
|
|
</div>
|
|
|
- <div class="ts snackbar" id="succSnackBar">
|
|
|
+ <div class="ui snackbar" id="succSnackBar">
|
|
|
<div class="content">
|
|
|
Action Completed
|
|
|
</div>
|
|
|
@@ -593,7 +594,7 @@
|
|
|
}
|
|
|
//Clear the mainList, replace with a dummy loading screen
|
|
|
$("#mainList").html('<div class="mainList item whiteFont">\
|
|
|
- <div class="ts header" style="margin:0px !important;padding-bottom:15px;padding-top:5px;">\
|
|
|
+ <div class="ui header" style="margin:0px !important;padding-bottom:15px;padding-top:5px;">\
|
|
|
<i class="loading spinner icon whiteFont" style="overflow:hidden;margin-top:5px;"></i>\
|
|
|
<div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">\
|
|
|
Searching...\
|
|
|
@@ -609,8 +610,8 @@
|
|
|
}, function(data){
|
|
|
currentPath = "";
|
|
|
var template = '<div class="mainList item" filepath={filepath} id={id} rawname={rawname}>\
|
|
|
- <div class="ts header selectable" style="margin:0px !important;" onClick="playSong(this);">\
|
|
|
- <i class="music icon whiteFont" style="overflow:hidden;"></i>\
|
|
|
+ <div class="ui header selectable" style="margin:0px !important;" onClick="playSong(this);">\
|
|
|
+ <img class="ui small image" src="img/eq.svg" style="margin-right: 0.2em;"></img>\
|
|
|
<div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">\
|
|
|
{songtitle}\
|
|
|
<div class="sub header fileinfo" style="color: #c7c7c7;">{ext} / {size}</div>\
|
|
|
@@ -634,7 +635,7 @@
|
|
|
//No search results.
|
|
|
$("#mainList").html("");
|
|
|
$("#mainList").append('<div class="mainList item whiteFont">\
|
|
|
- <div class="ts header" style="margin:0px !important;padding-bottom:15px;padding-top:5px;">\
|
|
|
+ <div class="ui header" style="margin:0px !important;padding-bottom:15px;padding-top:5px;">\
|
|
|
<i class="remove icon whiteFont" style="overflow:hidden;margin-top:5px;"></i>\
|
|
|
<div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">\
|
|
|
No result for keyword: ' + keyword + '.\
|
|
|
@@ -779,7 +780,13 @@
|
|
|
timerMode = true;
|
|
|
$(button).text("Stop");
|
|
|
timerRemaining = ((parseInt($("#timerHour").text()) * 60) + parseInt($("#timerMinute").text())) * 60; //in seconds
|
|
|
- //Update the value on the remaining counter
|
|
|
+ if (timerRemaining <= 0){
|
|
|
+ //Start with 0
|
|
|
+ timerMode = false;
|
|
|
+ $(button).text("Start");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ //Update the value on the remaining counter
|
|
|
$("#remainingUI").text(parseTimer(timerRemaining));
|
|
|
$("#timerSettingInterface").slideUp('fast');
|
|
|
$("#timerCountingInterface").slideDown('fast');
|
|
|
@@ -954,14 +961,20 @@
|
|
|
|
|
|
//Volume control related features
|
|
|
var previousAudioVolume = 0;
|
|
|
- function mute(){
|
|
|
+ function mute(button){
|
|
|
if (audioElement[0].volume != 0){
|
|
|
//Set to mute
|
|
|
previousAudioVolume = audioElement[0].volume;
|
|
|
audioElement[0].volume = 0;
|
|
|
+ $(button).css("opacity", "1");
|
|
|
+ $("#voldownBtn").addClass("disabled");
|
|
|
+ $("#volupBtn").addClass("disabled");
|
|
|
}else{
|
|
|
//Restore from mute
|
|
|
audioElement[0].volume = previousAudioVolume;
|
|
|
+ $(button).css("opacity", "0.6");
|
|
|
+ $("#voldownBtn").removeClass("disabled");
|
|
|
+ $("#volupBtn").removeClass("disabled");
|
|
|
}
|
|
|
$("#volBar").css("width",audioElement[0].volume * 100 + "%");
|
|
|
}
|
|
|
@@ -1163,8 +1176,8 @@
|
|
|
highLightPlayingMusic();
|
|
|
}
|
|
|
|
|
|
- function loadThumbnailToMusicList(){
|
|
|
- $(".mainList.file.item").each(function(){
|
|
|
+ function loadThumbnailToMusicList(selector = ".mainList.file.item"){
|
|
|
+ $(selector).each(function(){
|
|
|
let filepath = JSON.parse(decodeURIComponent($(this).attr("filepath")));
|
|
|
let thisFileItemID = $(this).attr("id");
|
|
|
let rawname = JSON.parse(decodeURIComponent($(this).attr("rawname")));
|
|
|
@@ -1173,7 +1186,7 @@
|
|
|
let realVpath = filepath.split("=");
|
|
|
realVpath.shift();
|
|
|
realVpath = realVpath.join("=");
|
|
|
- console.log(thisFileItemID, realVpath, rawname);
|
|
|
+ //console.log(thisFileItemID, realVpath, rawname);
|
|
|
//Load the thumbnail for this item in list
|
|
|
ao_module_agirun("Music/functions/getThumbnail.js", {
|
|
|
file: realVpath,
|
|
|
@@ -1198,6 +1211,7 @@
|
|
|
if (data.error !== undefined){
|
|
|
console.log(data.error)
|
|
|
$("#albumnArtImage").attr("src","img/default.png");
|
|
|
+ $("#smallPlayerThumb").attr("src","img/default.png");
|
|
|
if (navigator.mediaSession.metadata){
|
|
|
navigator.mediaSession.metadata.artwork = [
|
|
|
{ src: "img/default.png", sizes: '512x512', type: 'image/png' }
|
|
|
@@ -1205,6 +1219,7 @@
|
|
|
}
|
|
|
}else{
|
|
|
$("#albumnArtImage").attr("src","data:image/jpg;base64," + data);
|
|
|
+ $("#smallPlayerThumb").attr("src","data:image/jpg;base64," + data);
|
|
|
if (isAndroid && navigator.mediaSession.metadata){
|
|
|
//Android
|
|
|
navigator.mediaSession.metadata.artwork = [
|
|
|
@@ -1443,7 +1458,7 @@
|
|
|
currentPath = listname;
|
|
|
//Add the back btn for back to playlist view
|
|
|
$("#mainList").append(`<div class="mainList item extrapadding" onClick="loadPlaylistView();">
|
|
|
- <div class="ts header selectable" style="margin:0px !important;">
|
|
|
+ <div class="ui header selectable" style="margin:0px !important;">
|
|
|
<i class="angle left icon whiteFont" style="overflow:hidden;"></i>
|
|
|
<div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">
|
|
|
../
|
|
|
@@ -1456,10 +1471,10 @@
|
|
|
for (var i = 0; i < data.length; i++){
|
|
|
var songInfo = data[i];
|
|
|
|
|
|
- $("#mainList").append(`<div class="mainList item" filepath=${ao_module_utils.objectToAttr(songInfo[0])} id=${i+1} rawname=${ao_module_utils.objectToAttr(songInfo[1])}>
|
|
|
- <div class="ts header selectable" style="margin:0px !important;" onClick="playSong(this);">
|
|
|
- <i class="music icon whiteFont" style="overflow:hidden;"></i>
|
|
|
- <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">
|
|
|
+ $("#mainList").append(`<div class="mainList file item" filepath=${ao_module_utils.objectToAttr(songInfo[0])} id=${i+1} rawname=${ao_module_utils.objectToAttr(songInfo[1])}>
|
|
|
+ <div class="ui header selectable" style="margin:0px !important;" onClick="playSong(this);">
|
|
|
+ <img class="ui small image" src="img/eq.svg" style="margin-right: 0.2em;"></img>
|
|
|
+ <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%; font-weight: lighter;">
|
|
|
${songInfo[1]}
|
|
|
<div class="sub header fileinfo" style="color: #c7c7c7;">${songInfo[2]} / ${songInfo[3]}</div>
|
|
|
</div>
|
|
|
@@ -1475,6 +1490,9 @@
|
|
|
//Update the interface Detail
|
|
|
$("#interfaceDetails").text("[" + data.length + " files]");
|
|
|
};
|
|
|
+
|
|
|
+
|
|
|
+ loadThumbnailToMusicList();
|
|
|
//Fix some legacy css isseus
|
|
|
$("#mainList").append("<br><br><br><br><br><br><br>");
|
|
|
}
|
|
|
@@ -1572,8 +1590,8 @@
|
|
|
//Render the elements
|
|
|
data.forEach(playlist => {
|
|
|
$("#mainList").append(`<div class="mainList item" listname="${playlist.name}" tag="playlist" onClick="openPlaylist(this);">
|
|
|
- <div class="ts header selectable" style="margin:0px !important;" >
|
|
|
- <i class="folder open icon whiteFont" style="overflow:hidden;"></i>
|
|
|
+ <div class="ui header selectable" style="margin:0px !important;" >
|
|
|
+ <img class="ui small image" src="img/list.svg" style="margin-right: 0.2em;"></img>
|
|
|
<div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">
|
|
|
${playlist.name}
|
|
|
<div class="sub header fileinfo" style="color: #c7c7c7;">[${playlist.count} files]</div>
|
|
|
@@ -1598,9 +1616,9 @@
|
|
|
currentMode = "folder";
|
|
|
currentPath = "";
|
|
|
var tempalte = '<div class="mainList item" filepath={filepath} id={id} tag="folder" onClick="openFolder(this);">\
|
|
|
- <div class="ts header selectable" style="margin:0px !important;" >\
|
|
|
- <i class="folder open icon whiteFont" style="overflow:hidden;"></i>\
|
|
|
- <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">\
|
|
|
+ <div class="ui header selectable" style="margin:0px !important;" >\
|
|
|
+ <img class="ui small image" src="img/fo.svg" style="margin-right: 0.2em;"></img>\
|
|
|
+ <div class="content whiteFont" style="padding-top: 2px; line-height:1em;width : 80%; font-weight: lighter;">\
|
|
|
{foldername}\
|
|
|
<div class="sub header fileinfo" style="color: #c7c7c7;">{fileinfo}</div>\
|
|
|
</div>\
|
|
|
@@ -1696,18 +1714,18 @@
|
|
|
startPaused = playParameters.startPaused;
|
|
|
}
|
|
|
var backbtnTemplate = '<div class="mainList item extrapadding" filepath={filepath} id={id} onClick="openFolder(this);">\
|
|
|
- <div class="ts header selectable" style="margin:0px !important;">\
|
|
|
+ <div class="ui header selectable" style="margin:0px !important;">\
|
|
|
<i class="angle left icon whiteFont" style="overflow:hidden;"></i>\
|
|
|
- <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">\
|
|
|
+ <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%; font-weight: lighter;">\
|
|
|
../\
|
|
|
</div>\
|
|
|
</div>\
|
|
|
</div>';
|
|
|
|
|
|
var folderTemplate = '<div class="mainList item" filepath={filepath} tag="folder" id={id} onClick="openFolder(this);">\
|
|
|
- <div class="ts header selectable" style="margin:0px !important;">\
|
|
|
- <i class="folder open icon whiteFont" style="overflow:hidden;"></i>\
|
|
|
- <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">\
|
|
|
+ <div class="ui header selectable" style="margin:0px !important;">\
|
|
|
+ <img class="ui small image" src="img/fo.svg" style="margin-right: 0.2em;"></img>\
|
|
|
+ <div class="content whiteFont" style="padding-top:2px;line-height:1em; width:80%; font-weight: lighter;">\
|
|
|
{foldername}\
|
|
|
<div class="sub header fileinfo" style="color: #c7c7c7;">{fileinfo}</div>\
|
|
|
</div>\
|
|
|
@@ -1717,10 +1735,10 @@
|
|
|
</div>\
|
|
|
</div>';
|
|
|
var fileTemplate = `<div class="mainList file item" filepath={filepath} id={id} rawname={rawname}>\
|
|
|
- <div class="ts header selectable" style="margin:0px !important;" onClick="playSong(this);">\
|
|
|
+ <div class="ui header selectable" style="margin:0px !important;" onClick="playSong(this);">\
|
|
|
<img class="ui small image" src="img/eq.svg" style="margin-right: 0.2em;"></img>
|
|
|
<!-- <i class="music icon whiteFont" style="overflow:hidden;"></i> -->\
|
|
|
- <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">\
|
|
|
+ <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%; font-weight: lighter;">\
|
|
|
{songtitle}\
|
|
|
<div class="sub header fileinfo" style="color: #c7c7c7;">{ext} / {size}</div>\
|
|
|
</div>\
|
|
|
@@ -2024,30 +2042,11 @@
|
|
|
|
|
|
//Move the playing song list into the dropdown song list. This list might not be the same as the one in the main list.
|
|
|
function parsePlayingSongList(){
|
|
|
- var template = '<div class="dropdownList item" filepath={filepath} listid={id} rawname={rawname}>\
|
|
|
- <div class="ts header selectable" style="margin:0px !important;" onClick="playSongFromDropdownList(this);">\
|
|
|
- <i class="music icon whiteFont" style="overflow:hidden;"></i>\
|
|
|
- <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">\
|
|
|
- {songtitle}\
|
|
|
- <div class="sub header fileinfo" style="color: #c7c7c7;">{ext} / {size}</div>\
|
|
|
- </div>\
|
|
|
- </div>\
|
|
|
- <div class="topRightCorner" align="center">\
|
|
|
- {id}\
|
|
|
- </div>\
|
|
|
- </div>';
|
|
|
$("#currentPlayingMainList").html("");
|
|
|
var counter = playingList.length;
|
|
|
var totalSize = 0.0;
|
|
|
for (var i = 0; i < playingList.length; i++){
|
|
|
var displayname = ao_module_codec.decodeUmFilename(playingList[i][1]);
|
|
|
- var box = template;
|
|
|
- box = replaceAll("{filepath}",ao_module_utils.objectToAttr(playingList[i][0]),box);
|
|
|
- box = replaceAll("{id}",i + 1,box); //User count from 1
|
|
|
- box = replaceAll("{rawname}",ao_module_utils.objectToAttr(playingList[i][1]),box);
|
|
|
- box = replaceAll("{songtitle}",displayname,box);
|
|
|
- box = replaceAll("{ext}",playingList[i][2],box);
|
|
|
- box = replaceAll("{size}",playingList[i][3],box);
|
|
|
if (playingList[i][3].includes("MB")){
|
|
|
totalSize += parseFloat(playingList[i][3].split(" ")[0]);
|
|
|
}else if (playingList[i][3].includes("KB")){
|
|
|
@@ -2055,7 +2054,22 @@
|
|
|
}else if (playingList[i][3].includes("GB")){
|
|
|
totalSize += parseFloat(playingList[i][3].split(" ")[0]) * 1000;
|
|
|
}
|
|
|
- $("#currentPlayingMainList").append(box);
|
|
|
+
|
|
|
+ //Get thumbnail from the current list to prevent re-loading form remote
|
|
|
+ let targetThumbnail = $("#" + (i + 1)).find("img").attr("src");
|
|
|
+
|
|
|
+ $("#currentPlayingMainList").append(`<div class="dropdownList file item" filepath="${ao_module_utils.objectToAttr(playingList[i][0])}" listid="${i + 1}" rawname="${ao_module_utils.objectToAttr(playingList[i][1])}">
|
|
|
+ <div class="ui header selectable" style="margin:0px !important;" onClick="playSongFromDropdownList(this);">
|
|
|
+ <img class="ui small image" src="${targetThumbnail}" style="margin-right: 0.2em;"></img>
|
|
|
+ <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">
|
|
|
+ <span style="font-weight: lighter;">${displayname}</span>
|
|
|
+ <div class="sub header fileinfo" style="color: #c7c7c7;">${playingList[i][2]} / ${playingList[i][3]}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="topRightCorner" align="center">
|
|
|
+ ${i + 1}
|
|
|
+ </div>
|
|
|
+ </div>`);
|
|
|
$("#dropdownListSongCount").text(counter);
|
|
|
$("#dropdownListIDCount").text(parseInt(totalSize) + "");
|
|
|
}
|
|
|
@@ -2070,21 +2084,6 @@
|
|
|
function loadSongList(type = "all"){
|
|
|
currentPath = "";
|
|
|
currentMode = "music";
|
|
|
- var template = '<div class="mainList item" filepath={filepath} id={id} rawname={rawname}>\
|
|
|
- <div class="ts header selectable" style="margin:0px !important;" onClick="playSong(this);">\
|
|
|
- <i class="music icon whiteFont" style="overflow:hidden;"></i>\
|
|
|
- <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%;">\
|
|
|
- {songtitle}\
|
|
|
- <div class="sub header fileinfo" style="color: #c7c7c7;">{ext} / {size}</div>\
|
|
|
- </div>\
|
|
|
- </div>\
|
|
|
- <div class="topRightCorner" align="center">\
|
|
|
- {id}\
|
|
|
- </div>\
|
|
|
- <div class="mainList rightFunctionBar" align="center" onClick="showMore(this);">\
|
|
|
- <i class="ellipsis vertical icon" style="top:30%;"></i>\
|
|
|
- </div>\
|
|
|
- </div>';
|
|
|
|
|
|
$("#interfaceTitle").text("Music");
|
|
|
$("#AMmenuIcon").attr("class","music icon large whiteFont")
|
|
|
@@ -2117,19 +2116,30 @@
|
|
|
var displayname = ao_module_codec.decodeUmFilename(songInfo[1]);
|
|
|
var ext = songInfo[2];
|
|
|
var size = songInfo[3];
|
|
|
- var box = template;
|
|
|
- box = replaceAll("{filepath}",ao_module_utils.objectToAttr(path),box);
|
|
|
- box = replaceAll("{id}",i + 1,box); //User count from 1
|
|
|
- box = replaceAll("{rawname}",ao_module_utils.objectToAttr(songInfo[1]),box);
|
|
|
- box = replaceAll("{songtitle}",displayname,box);
|
|
|
- box = replaceAll("{ext}",ext,box);
|
|
|
- box = replaceAll("{size}",size,box);
|
|
|
- $("#mainList").append(box);
|
|
|
+ $("#mainList").append(`<div class="mainList file item" filepath="${ao_module_utils.objectToAttr(path)}" id="${i + 1}" rawname="${ao_module_utils.objectToAttr(songInfo[1])}">
|
|
|
+ <div class="ui header selectable" style="margin:0px !important;" onClick="playSong(this);">
|
|
|
+ <img class="ui small image" src="img/eq.svg" style="margin-right: 0.2em;"></img>
|
|
|
+ <div class="content whiteFont" style="padding-top:5px;line-height:1em;width : 80%; font-weight: lighter;">
|
|
|
+ ${displayname}
|
|
|
+ <div class="sub header fileinfo" style="color: #c7c7c7;">${ext} / ${size}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="topRightCorner" align="center">
|
|
|
+ ${i + 1}
|
|
|
+ </div>
|
|
|
+ <div class="mainList rightFunctionBar" align="center" onClick="showMore(this);">
|
|
|
+ <i class="ellipsis vertical icon" style="top:30%;"></i>\
|
|
|
+ </div>
|
|
|
+ </div>`);
|
|
|
}
|
|
|
totalMusicCount = displayList.length;
|
|
|
$("#mainList").append("<br><br><br><br><br><br><br>");
|
|
|
$("#interfaceDetails").text("[" + i + " songs]");
|
|
|
highLightPlayingMusic();
|
|
|
+
|
|
|
+ //Load thumbnail for song in list
|
|
|
+ loadThumbnailToMusicList();
|
|
|
+
|
|
|
}, function(){
|
|
|
alert("Failed to access listSong API with type: " + type)
|
|
|
});
|
Toby Chui
