|
|
@@ -5,9 +5,9 @@
|
|
|
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="theme-color" content="#4b75ff">
|
|
|
- <link rel="stylesheet" href="script/semantic/semantic.min.css">
|
|
|
+ <link rel="stylesheet" href="../script/semantic/semantic.min.css">
|
|
|
<script src="../script/jquery.min.js"></script>
|
|
|
- <script src="script/semantic/semantic.min.js"></script>
|
|
|
+ <script src="../script/semantic/semantic.min.js"></script>
|
|
|
<script src="../script/ao_module.js"></script>
|
|
|
<script src="script/DPlayer.min.js"></script>
|
|
|
|
|
|
@@ -66,6 +66,18 @@
|
|
|
background-color: #ffdd91;
|
|
|
}
|
|
|
|
|
|
+ .playlistObject{
|
|
|
+ padding: 0.8em !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .playlistObject:hover{
|
|
|
+ background-color: #ffdd91;
|
|
|
+ }
|
|
|
+
|
|
|
+ .playlistObject.active{
|
|
|
+ background-color:#ededed;
|
|
|
+ }
|
|
|
+
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
@@ -98,15 +110,28 @@
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
- <div id="playList" class="ui fluid segment">
|
|
|
- <p><i class="list icon"></i> PlayLists</p>
|
|
|
- <select id="playListSelector" class="ui search fluid dropdown">
|
|
|
- <option value="">Select Playlist</option>
|
|
|
- </select>
|
|
|
- <br>
|
|
|
- <p><i class="file icon"></i>PlayList Videos</p>
|
|
|
- <div id="videolist" class="ui relaxed divided list">
|
|
|
+
|
|
|
+ <div class="ui fluid segment">
|
|
|
+ <div id="playList" class="ui accordion">
|
|
|
+ <div class="title">
|
|
|
+ <i class="dropdown icon"></i>
|
|
|
+ <i class="list icon"></i> PlayLists
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div id="playListSelector" class="ui relaxed divided list">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="title">
|
|
|
+ <i class="dropdown icon"></i>
|
|
|
+ <i class="file icon"></i>PlayList Videos
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div id="videolist" class="ui relaxed divided list">
|
|
|
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<br><br><br>
|
|
|
@@ -121,6 +146,7 @@
|
|
|
var autoPlay = false;
|
|
|
var previousScreenSize = "70%";
|
|
|
$('.ui.dropdown').dropdown();
|
|
|
+
|
|
|
init();
|
|
|
initPlaylist();
|
|
|
|
|
|
@@ -215,6 +241,7 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ /*
|
|
|
$("#playListSelector").on("change",function(){
|
|
|
var selectedPlaylistName = $(this).val();
|
|
|
var thisPlaylistDevice = "";
|
|
|
@@ -233,6 +260,15 @@
|
|
|
}
|
|
|
//console.log(thisPlaylistDevice);
|
|
|
});
|
|
|
+ */
|
|
|
+
|
|
|
+ function selectedPlaylist(object, selectedPlaylistName){
|
|
|
+ //Hightlight this playlist object
|
|
|
+ $(".playlistObject.active").removeClass('active');
|
|
|
+ $(object).addClass("active");
|
|
|
+ listPlayList(selectedPlaylistName);
|
|
|
+ $('#playList').accordion('open',1);
|
|
|
+ }
|
|
|
|
|
|
function setScreenSize(size){
|
|
|
$("#dplayer").css("width",size);
|
|
|
@@ -245,17 +281,37 @@
|
|
|
console.log(data);
|
|
|
//Initial playlist dropdown
|
|
|
$("#playListSelector").html("");
|
|
|
- $("#playListSelector").append(`<option class="" value="">Select Playlist</option>`);
|
|
|
+ //$("#playListSelector").append(`<option class="" value="">Select Playlist</option>`);
|
|
|
for (var i = 0; i < data.length; i++){
|
|
|
var thisDevice = data[i];
|
|
|
var thisDeviceName = thisDevice.StorageName;
|
|
|
var playlistInThisDevice = thisDevice.PlayLists;
|
|
|
+
|
|
|
//var unsortedVideoInThisDevice = thisDevice.UnsortedVideos;
|
|
|
//Append playlist
|
|
|
for (var j = 0; j < playlistInThisDevice.length; j++){
|
|
|
- var thisPlaylistName = playlistInThisDevice[j].Name;
|
|
|
- AllPlaylist.push(JSON.parse(JSON.stringify(playlistInThisDevice[j])));
|
|
|
- $("#playListSelector").append(`<option class="playlistObject" value="${thisPlaylistName}" device="${thisDeviceName}">${thisPlaylistName}</option>`);
|
|
|
+ var thisPlaylistName = playlistInThisDevice[j].Name;
|
|
|
+ var thisPlaylistThumbnail = playlistInThisDevice[j].Thumbnail;
|
|
|
+ if (thisPlaylistThumbnail == false){
|
|
|
+ thisPlaylistThumbnail = "img/desktop_icon.png";
|
|
|
+ }else{
|
|
|
+ thisPlaylistThumbnail = "data:image/jpg;base64," + thisPlaylistThumbnail;
|
|
|
+ }
|
|
|
+ AllPlaylist.push(JSON.parse(JSON.stringify(playlistInThisDevice[j])));
|
|
|
+ //$("#playListSelector").append(`<option class="playlistObject" value="${thisPlaylistName}" device="${thisDeviceName}">${thisPlaylistName}</option>`);
|
|
|
+ $("#playListSelector").append(`
|
|
|
+ <div class="playlistObject item">
|
|
|
+ <div class="right floated content">
|
|
|
+ <div onclick="selectedPlaylist(this.parentElement.parentElement,'${thisPlaylistName}');" class="ui yellow icon button"><i class="play icon"></i></div>
|
|
|
+ <div onclick="ao_module_openPath('${playlistInThisDevice[j].Folderpath}');" class="ui icon button"><i class="folder open icon"></i></div>
|
|
|
+ </div>
|
|
|
+ <img class="ui tiny image " src="${thisPlaylistThumbnail}">
|
|
|
+ <div class="content" style="margin-top: 1em;">
|
|
|
+ <div class="header">${thisPlaylistName}</div>
|
|
|
+ <div class="description" style="margin-top: 0.4em;" ><span style="margin-left: 0em;"><i class="file outline icon"></i> x ${playlistInThisDevice[j].Files.length}</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `);
|
|
|
}
|
|
|
/*
|
|
|
for (var k = 0; k < unsortedVideoInThisDevice.length; k++){
|
|
|
@@ -267,6 +323,8 @@
|
|
|
//Append unsorted into playlist
|
|
|
//$("#playListSelector").append(`<option class="playlistObject" value="unsorted" device="">Unsorted Playlist</option>`);
|
|
|
updateWindowEvents();
|
|
|
+ $("#playList").accordion();
|
|
|
+ $('#playList').accordion('open',0);
|
|
|
}
|
|
|
});
|
|
|
}
|
Toby Chui