cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 19:08:18 -07:00
Code Issues Packages Projects Releases Wiki Activity

support grouping behind boxsets

Browse Source
This commit is contained in:
Luke Pulverenti 2014-03-15 00:14:07 -04:00
parent 941824a5fb
commit a5f1fa7681
9 changed files with 121 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
dashboard-ui/css/site.css
View File

@ -658,7 +658,7 @@ h1 .imageLink {
/* Dashboard home */
.tblConnections td {
padding: 1em 0 1em 1.25em;
padding: 1em 0 1em .75em;
vertical-align: top;
}
@ -666,12 +666,8 @@ h1 .imageLink {
padding-left: 0;
}
.tblConnections img {
height: 48px;
}
.nowPlayingText {
padding-left: .5em!important;
.tblConnections img:not(.clientNowPlayingImage) {
height: 28px;
}
.clientNowPlayingImage {

10
dashboard-ui/dashboard.html
View File

@ -60,9 +60,11 @@
</div>
</div>
<div class="activeDevicesCollapsible" data-role="collapsible" data-collapsed="false" style="margin-top: 2em;">
<h3>Active Devices</h3>
<div class="connections">
<div data-role="collapsible" data-collapsed="false" style="margin-top: 2em;">
<h3>Active Connections</h3>
<div>
<table class="tblConnections" style="border-collapse: collapse;">
</table>
</div>
</div>
@ -120,4 +122,4 @@
</div>
</div>
</body>
</html>
</html>

2
dashboard-ui/livetvrecording.html
View File

@ -57,7 +57,7 @@
</div>
<div class="detailSectionContent" style="padding: 0 1em;">
<p class="status"></p>
<p class="recordingStatus"></p>
<p class="airDate"></p>
</div>
</div>

2
dashboard-ui/livetvtimer.html
View File

@ -32,7 +32,7 @@
<p class="itemOverview"></p>
<p style="margin-top: 2em;">
<span class="status"></span>
<span class="timerStatus"></span>
</p>
</div>

262
dashboard-ui/scripts/dashboardpage.js
View File

@ -135,9 +135,9 @@
var html = '';
var container = $('.connections', page);
var table = $('.tblConnections', page);
$('.sessionPosterItem', container).addClass('deadSession');
$('.trSession', table).addClass('deadSession');
var deviceId = ApiClient.deviceId();
@ -145,181 +145,103 @@
var connection = dashboardInfo.ActiveConnections[i];
var itemId = 'session' + connection.Id;
var rowId = 'trSession' + connection.Id;
var elem = $('#' + itemId, page);
var elem = $('#' + rowId, page);
if (elem.length) {
DashboardPage.updateSession(elem, connection);
continue;
}
html += '<div class="sessionPosterItem posterItem squarePosterItem" id="' + itemId + '" style="vertical-align:top;margin-bottom:2em;">';
html += '<tr class="trSession" id="' + rowId + '">';
html += '<td class="clientType" style="text-align:center;">';
html += DashboardPage.getClientType(connection);
html += '</td>';
html += '<td>';
html += '<div>';
if (deviceId == connection.DeviceId) {
html += connection.Client;
} else {
html += '<a href="#" onclick="RemoteControl.showMenu({sessionId:\'' + connection.Id + '\'});">' + connection.Client + '</a>';
}
html += '</div>';
html += '<div>' + connection.ApplicationVersion + '</div>';
html += '<div>' + connection.DeviceName + '</div>';
html += '<div class="username">';
html += DashboardPage.getUsersHtml(connection);
html += '</div>';
html += '</td>';
var nowPlayingItem = connection.NowPlayingItem;
var imageUrl = DashboardPage.getNowPlayingImage(nowPlayingItem);
var style = "";
if (imageUrl) {
style += 'background-image:url(\'' + imageUrl + '\');';
}
var onclick = connection.DeviceId == deviceId ? '' : ' onclick="RemoteControl.showMenu({sessionId:\'' + connection.Id + '\'});"';
html += '<a' + onclick + ' data-imageurl="' + imageUrl + '" href="#" class="posterItemImage coveredPosterItemImage" style="' + style + 'background-color:#f2f2f2;display:block;">';
var defaultTextStyle = '';
if (nowPlayingItem) {
defaultTextStyle = "display:none;";
}
html += '<div class="posterItemDefaultText" style="' + defaultTextStyle + '">Nothing currently playing</div>';
html += '<div class="posterItemTextOverlay">';
var itemNameStyle='';
if (!nowPlayingItem) {
itemNameStyle = "display:none;";
}
html += '<div class="posterItemText posterItemName" style="' + itemNameStyle + '">' + (nowPlayingItem ? nowPlayingItem.Name : '') + '</div>';
var progressStyle='';
if (!nowPlayingItem) {
progressStyle = "display:none;";
}
html += "<div class='posterItemText posterItemProgress' style='" + progressStyle + "'>";
html += '<progress class="itemProgressBar" min="0" max="100" value="' + DashboardPage.getPlaybackProgress(connection) + '" style="opacity:.9;"></progress>';
html += "</div>";
html += "</div>";
html += '<img src="' + DashboardPage.getClientImage(connection) + '" style="top:10px;left:10px;height:24px;position:absolute;opacity: .95;" />';
html += '</a>';
html += '<div class="sessionItemText">' + DashboardPage.getSessionItemText(connection) + '</div>';
//html += '<td class="clientType" style="text-align:center;">';
//html += DashboardPage.getClientType(connection);
//html += '</td>';
//html += '<td>';
//html += '<div>';
//if (deviceId == connection.DeviceId) {
// html += connection.Client;
//} else {
// html += '<a href="#" onclick="RemoteControl.showMenu({sessionId:\'' + connection.Id + '\'});">' + connection.Client + '</a>';
//}
//html += '</div>';
//html += '</td>';
//html += '<td class="nowPlayingImage">';
//html += DashboardPage.getNowPlayingImage(nowPlayingItem);
//html += '</td>';
//html += '<td class="nowPlayingText">';
//html += DashboardPage.getNowPlayingText(connection, nowPlayingItem);
//html += '</td>';
html += '<td>';
html += '<div class="nowPlayingImage">';
html += DashboardPage.getNowPlayingImage(nowPlayingItem);
html += '</div>';
html += '<div class="clientNowPlayingText">';
html += DashboardPage.getNowPlayingText(connection, nowPlayingItem);
html += '</div>';
html += '</td>';
html += '</tr>';
}
container.append(html).trigger('create');
table.append(html).trigger('create');
$('.deadSession', container).remove();
},
getPlaybackProgress: function (session) {
if (session.NowPlayingItem) {
if (session.NowPlayingItem.RunTimeTicks) {
var pct = (session.NowPlayingPositionTicks || 0) / session.NowPlayingItem.RunTimeTicks;
return pct * 100;
}
}
return 0;
$('.deadSession', table).remove();
},
getUsersHtml: function (session) {
var html = '<div>';
var html = '';
if (session.UserId) {
html += session.UserName;
html += '<div>' + session.UserName + '</div>';
}
html += session.AdditionalUsers.map(function (currentSession) {
return ', ' + currentSession.UserName;
return '<div>' + currentSession.UserName + '</div>';
});
html += '</div>';
return html;
},
updateSession: function (elem, session) {
updateSession: function (row, session) {
elem.removeClass('deadSession');
row.removeClass('deadSession');
$('.sessionItemText', elem).html(DashboardPage.getSessionItemText(session));
$('.username', row).html(DashboardPage.getUsersHtml(session));
var nowPlayingItem = session.NowPlayingItem;
if (nowPlayingItem) {
$('.posterItemDefaultText', elem).hide();
$('.posterItemProgress', elem).show();
$('.posterItemName', elem).show().html(nowPlayingItem.Name);
$('.clientNowPlayingText', row).html(DashboardPage.getNowPlayingText(session, nowPlayingItem)).trigger('create');
$('progress', elem).val(DashboardPage.getPlaybackProgress(session));
} else {
$('.posterItemDefaultText', elem).show();
$('.posterItemProgress', elem).hide();
$('.posterItemName', elem).hide().html('');
}
var imageRow = $('.nowPlayingImage', row);
var imageUrl = DashboardPage.getNowPlayingImage(nowPlayingItem);
var image = $('img', imageRow)[0];
var image = $('.posterItemImage', elem)[0];
var nowPlayingItemId = nowPlayingItem ? nowPlayingItem.Id : null;
var nowPlayingItemImageTag = nowPlayingItem ? nowPlayingItem.PrimaryImageTag : null;
if (imageUrl && imageUrl != image.getAttribute('data-imageurl')) {
image.style.backgroundImage = 'url(\'' + imageUrl + '\')';
image.setAttribute('data-imageurl', imageUrl);
} else if (!imageUrl && image.getAttribute('data-imageurl')) {
image.style.backgroundImage = null;
image.setAttribute('data-imageurl', '');
if (!image || image.getAttribute('data-itemid') != nowPlayingItemId || image.getAttribute('data-tag') != nowPlayingItemImageTag) {
imageRow.html(DashboardPage.getNowPlayingImage(nowPlayingItem));
}
},
getSessionItemText: function (connection) {
var html = '';
html += '<div class="posterItemText">';
html += DashboardPage.getUsersHtml(connection);
html += '</div>';
//html += '<div class="posterItemText">' + connection.Client + '</div>';
//html += '<div class="posterItemText">' + connection.ApplicationVersion + '</div>';
html += '<div class="posterItemText">' + connection.DeviceName + '</div>';
return html;
},
getClientImage: function (connection) {
getClientType: function (connection) {
var clientLowered = connection.Client.toLowerCase();
@ -345,81 +267,91 @@
imgUrl = 'css/images/clients/html5.png';
}
return imgUrl;
return "<img src='" + imgUrl + "' alt='Dashboard' />";
}
if (clientLowered == "mb-classic") {
return "css/images/clients/mbc.png";
return "<img src='css/images/clients/mbc.png' alt='Media Browser Classic' />";
}
if (clientLowered == "media browser theater") {
return "css/images/clients/mb.png";
return "<img src='css/images/clients/mb.png' alt='Media Browser Theater' />";
}
if (clientLowered == "android") {
return "css/images/clients/android.png";
return "<img src='css/images/clients/android.png' alt='Android' />";
}
if (clientLowered == "roku") {
return "css/images/clients/roku.jpg";
return "<img src='css/images/clients/roku.jpg' alt='Roku' />";
}
if (clientLowered == "ios") {
return "css/images/clients/ios.png";
return "<img src='css/images/clients/ios.png' alt='iOS' />";
}
if (clientLowered == "windows rt") {
return "css/images/clients/windowsrt.png";
return "<img src='css/images/clients/windowsrt.png' alt='Windows RT' />";
}
if (clientLowered == "windows phone") {
return "css/images/clients/windowsphone.png";
return "<img src='css/images/clients/windowsphone.png' alt='Windows Phone' />";
}
if (clientLowered == "dlna") {
return "css/images/clients/dlna.png";
return "<img src='css/images/clients/dlna.png' alt='Dlna' />";
}
if (clientLowered == "mbkinect") {
return "css/images/clients/mbkinect.png";
return "<img src='css/images/clients/mbkinect.png' alt='MB Kinect' />";
}
if (clientLowered == "xbmc") {
return "css/images/clients/xbmc.png";
return "<img src='css/images/clients/xbmc.png' alt='Xbmc' />";
}
return "css/images/clients/mb.png";
return connection.Client;
},
getNowPlayingImage: function (item) {
if (item && item.ThumbItemId) {
return ApiClient.getImageUrl(item.ThumbItemId, {
type: "Thumb",
height: 300,
tag: item.ThumbImageTag
});
}
if (item && item.BackdropItemId) {
return ApiClient.getImageUrl(item.BackdropItemId, {
type: "Backdrop",
height: 300,
tag: item.BackdropImageTag
});
}
if (item && item.PrimaryImageTag) {
return ApiClient.getImageUrl(item.Id, {
var url = ApiClient.getImageUrl(item.Id, {
type: "Primary",
height: 300,
height: 100,
tag: item.PrimaryImageTag
});
url += "&xxx=" + new Date().getTime();
return "<img data-itemid='" + item.Id + "' data-tag='" + item.PrimaryImageTag + "' class='clientNowPlayingImage' src='" + url + "' alt='" + item.Name + "' title='" + item.Name + "' />";
}
return "";
},
getNowPlayingText: function (connection, item) {
var html = "";
if (item) {
html += "<div><a href='itemdetails.html?id=" + item.Id + "'>" + item.Name + "</a></div>";
html += "<div>";
if (item.RunTimeTicks) {
html += Dashboard.getDisplayTime(connection.NowPlayingPositionTicks || 0) + " / ";
html += Dashboard.getDisplayTime(item.RunTimeTicks);
}
html += "</div>";
}
return html;
},
renderRunningTasks: function (dashboardInfo) {
var page = $.mobile.activePage;

9
dashboard-ui/scripts/librarymenu.js
View File

@ -202,6 +202,15 @@
});
});
}
}).on('pageshow', ".libraryPage", function () {
var page = this;
var elem = $('.libraryViewNavInner .ui-btn-active:visible', page);
if (elem.length) {
elem[0].scrollIntoView();
}
});
})(window, document, jQuery);

2
dashboard-ui/scripts/livetvrecording.js
View File

@ -64,7 +64,7 @@
ApiClient.sendWebSocketMessage("Context", vals.join('|'));
}
$('.status', page).html('Status:&nbsp;&nbsp;&nbsp;' + item.Status);
$('.recordingStatus', page).html('Status:&nbsp;&nbsp;&nbsp;' + item.Status);
Dashboard.getCurrentUser().done(function (user) {

2
dashboard-ui/scripts/livetvtimer.js
View File

@ -62,7 +62,7 @@
$('#chkPrePaddingRequired', page).checked(item.IsPrePaddingRequired).checkboxradio('refresh');
$('#chkPostPaddingRequired', page).checked(item.IsPostPaddingRequired).checkboxradio('refresh');
$('.status', page).html('Status:&nbsp;&nbsp;&nbsp;' + item.Status);
$('.timerStatus', page).html('Status:&nbsp;&nbsp;&nbsp;' + item.Status);
Dashboard.hideLoadingMsg();
}

3
dashboard-ui/scripts/movies.js
View File

@ -10,7 +10,8 @@
IncludeItemTypes: "Movie",
Recursive: true,
Fields: "PrimaryImageAspectRatio",
StartIndex: 0
StartIndex: 0,
CollapseBoxSetItems: true
};
function reloadItems(page) {