mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

rework detail page a little

Browse source
This commit is contained in:
Luke Pulverenti 2015-02-02 23:54:52 -05:00
parent 0eb55addaa
commit 911880340e
28 changed files with 464 additions and 179 deletions
Download patch file Download diff file Expand all files Collapse all files

29
dashboard-ui/scripts/indexpage.js
View file

@ -25,42 +25,42 @@
var item = items[i];
var imgUrl;
var icon;
switch (item.CollectionType) {
case "movies":
imgUrl = "css/images/items/folders/movies.png";
icon = "fa-film";
break;
case "music":
imgUrl = "css/images/items/folders/music.png";
icon = "fa-music";
break;
case "photos":
imgUrl = "css/images/items/folders/photos.png";
icon = "fa-photo";
break;
case "livetv":
case "tvshows":
imgUrl = "css/images/items/folders/tv.png";
icon = "fa-video-camera";
break;
case "games":
imgUrl = "css/images/items/folders/games.png";
icon = "fa-gamepad";
break;
case "trailers":
imgUrl = "css/images/items/folders/movies.png";
icon = "fa-film";
break;
case "homevideos":
imgUrl = "css/images/items/folders/homevideos.png";
icon = "fa-video-camera";
break;
case "musicvideos":
imgUrl = "css/images/items/folders/musicvideos.png";
icon = "fa-video-camera";
break;
case "books":
imgUrl = "css/images/items/folders/books.png";
icon = "fa-book";
break;
case "channels":
imgUrl = "css/images/items/folders/channels.png";
icon = "fa-video-camera";
break;
default:
imgUrl = "css/images/items/folders/folder.png";
icon = "fa-folder-o";
break;
}
@ -75,14 +75,13 @@
html += '<a data-itemid="' + item.Id + '" class="' + cssClass + '" href="' + href + '">';
var style = 'background-image:url(\'' + imgUrl + '\');';
var imageCssClass = '';
html += '<div class="posterItemImage ' + imageCssClass + '" style="' + style + '">';
html += '<div class="posterItemImage ' + imageCssClass + '">';
html += '</div>';
html += "<div class='posterItemDefaultText posterItemText'>";
html += '<i class="fa ' + icon + '"></i>';
html += item.Name;
html += "</div>";

2
dashboard-ui/scripts/itemdetailpage.js
View file

@ -146,7 +146,7 @@
var imageHref = user.Policy.IsAdministrator && item.MediaType != 'Photo' ? "edititemimages.html?id=" + item.Id : "";
$('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item, imageHref));
LibraryBrowser.renderDetailImage($('.detailImageContainer', page), item, imageHref);
}
function onWebSocketMessage(e, data) {

191
dashboard-ui/scripts/librarybrowser.js
View file

@ -299,6 +299,10 @@
var commands = [];
if (BoxSetEditor.supportsAddingToCollection(item)) {
commands.push('addtocollection');
}
if (PlaylistManager.supportsPlaylists(item)) {
commands.push('playlist');
}
@ -377,6 +381,10 @@
html += '<ul data-role="listview" style="min-width: 180px;">';
html += '<li data-role="list-divider">' + Globalize.translate('HeaderMenu') + '</li>';
if (commands.indexOf('addtocollection') != -1) {
html += '<li><a href="#" onclick="$(\'.playFlyout\').popup(\'close\');BoxSetEditor.showPanel([\'' + itemId + '\']);">' + Globalize.translate('ButtonAddToCollection') + '</a></li>';
}
if (commands.indexOf('playlist') != -1) {
html += '<li><a href="#" onclick="$(\'.playFlyout\').popup(\'close\');PlaylistManager.showPanel([\'' + itemId + '\']);">' + Globalize.translate('ButtonAddToPlaylist') + '</a></li>';
}
@ -2118,13 +2126,13 @@
var url;
var imageHeight = 280;
var imageHeight = 360;
if (preferThumb && imageTags.Thumb) {
url = ApiClient.getScaledImageUrl(item.Id, {
type: "Thumb",
maxHeight: imageHeight,
height: imageHeight,
tag: item.ImageTags.Thumb
});
}
@ -2132,7 +2140,7 @@
url = ApiClient.getScaledImageUrl(item.Id, {
type: "Primary",
maxHeight: imageHeight,
height: imageHeight,
tag: item.ImageTags.Primary
});
}
@ -2140,7 +2148,7 @@
url = ApiClient.getScaledImageUrl(item.Id, {
type: "Backdrop",
maxHeight: imageHeight,
height: imageHeight,
tag: item.BackdropImageTags[0]
});
}
@ -2148,7 +2156,7 @@
url = ApiClient.getScaledImageUrl(item.Id, {
type: "Thumb",
maxHeight: imageHeight,
height: imageHeight,
tag: item.ImageTags.Thumb
});
}
@ -2156,7 +2164,7 @@
url = ApiClient.getScaledImageUrl(item.Id, {
type: "Disc",
maxHeight: imageHeight,
height: imageHeight,
tag: item.ImageTags.Disc
});
}
@ -2164,7 +2172,7 @@
url = ApiClient.getScaledImageUrl(item.AlbumId, {
type: "Primary",
maxHeight: imageHeight,
height: imageHeight,
tag: item.AlbumPrimaryImageTag
});
@ -2218,6 +2226,175 @@
return html;
},
renderDetailImage: function (elem, item, href, preferThumb) {
var imageTags = item.ImageTags || {};
if (item.PrimaryImageTag) {
imageTags.Primary = item.PrimaryImageTag;
}
var html = '';
var url;
var shape = 'portrait';
var imageHeight = 360;
var detectRatio = false;
if (preferThumb && imageTags.Thumb) {
url = ApiClient.getScaledImageUrl(item.Id, {
type: "Thumb",
height: imageHeight,
tag: item.ImageTags.Thumb
});
shape = 'thumb';
}
else if (imageTags.Primary) {
url = ApiClient.getScaledImageUrl(item.Id, {
type: "Primary",
height: imageHeight,
tag: item.ImageTags.Primary
});
detectRatio = true;
}
else if (item.BackdropImageTags && item.BackdropImageTags.length) {
url = ApiClient.getScaledImageUrl(item.Id, {
type: "Backdrop",
height: imageHeight,
tag: item.BackdropImageTags[0]
});
shape = 'thumb';
}
else if (imageTags.Thumb) {
url = ApiClient.getScaledImageUrl(item.Id, {
type: "Thumb",
height: imageHeight,
tag: item.ImageTags.Thumb
});
shape = 'thumb';
}
else if (imageTags.Disc) {
url = ApiClient.getScaledImageUrl(item.Id, {
type: "Disc",
height: imageHeight,
tag: item.ImageTags.Disc
});
shape = 'square';
}
else if (item.AlbumId && item.AlbumPrimaryImageTag) {
url = ApiClient.getScaledImageUrl(item.AlbumId, {
type: "Primary",
height: imageHeight,
tag: item.AlbumPrimaryImageTag
});
shape = 'square';
}
else if (item.MediaType == "Audio" || item.Type == "MusicAlbum" || item.Type == "MusicGenre") {
url = "css/images/items/detail/audio.png";
shape = 'square';
}
else if (item.MediaType == "Game" || item.Type == "GameGenre") {
url = "css/images/items/detail/game.png";
shape = 'square';
}
else if (item.Type == "Person") {
url = "css/images/items/detail/person.png";
shape = 'square';
}
else if (item.Type == "Genre" || item.Type == "Studio") {
url = "css/images/items/detail/video.png";
shape = 'square';
}
else if (item.Type == "TvChannel") {
url = "css/images/items/detail/tv.png";
shape = 'square';
}
else {
url = "css/images/items/detail/video.png";
shape = 'square';
}
if (!href) {
href = "itemgallery.html?id=" + item.Id;
}
var linkToGallery = LibraryBrowser.shouldDisplayGallery(item);
html += '<div style="position:relative;">';
if (linkToGallery) {
html += "<a class='itemDetailGalleryLink' href='" + href + "'>";
}
if (detectRatio && item.PrimaryImageAspectRatio) {
if (Math.abs(item.PrimaryImageAspectRatio - 1.777777778) < .3) {
shape = 'thumb';
} else if (Math.abs(item.PrimaryImageAspectRatio - 1) < .2) {
shape = 'square';
}
}
var imgCssClass = 'itemDetailImage';
if (shape == 'thumb') {
imgCssClass += ' thumbDetailImage';
}
else if (shape == 'square') {
imgCssClass += ' squareDetailImage';
} else {
imgCssClass += ' portraitDetailImage';
}
html += "<img class='" + imgCssClass + "' src='" + url + "' />";
if (linkToGallery) {
html += "</a>";
}
var progressHtml = item.IsFolder ? '' : LibraryBrowser.getItemProgressBarHtml((item.Type == 'Recording' ? item : item.UserData));
if (progressHtml) {
html += '<div class="detailImageProgressContainer">';
html += progressHtml;
html += "</div>";
}
html += "</div>";
elem.html(html);
var page = $(elem).parents('.page');
var detailContentEffectedByImage = $('.detailContentEffectedByImage', page);
if (shape == 'thumb') {
detailContentEffectedByImage.addClass('detailContentEffectedByThumbImage');
detailContentEffectedByImage.removeClass('detailContentEffectedBySquareImage');
detailContentEffectedByImage.removeClass('detailContentEffectedByPortraitImage');
detailContentEffectedByImage.addClass('detailContentEffectedByThumbImage');
detailContentEffectedByImage.removeClass('detailContentEffectedBySquareImage');
detailContentEffectedByImage.removeClass('detailContentEffectedByPortraitImage');
}
else if (shape == 'square') {
detailContentEffectedByImage.removeClass('detailContentEffectedByThumbImage');
detailContentEffectedByImage.addClass('detailContentEffectedBySquareImage');
detailContentEffectedByImage.removeClass('detailContentEffectedByPortraitImage');
} else {
detailContentEffectedByImage.removeClass('detailContentEffectedByThumbImage');
detailContentEffectedByImage.removeClass('detailContentEffectedBySquareImage');
detailContentEffectedByImage.addClass('detailContentEffectedByPortraitImage');
}
},
getMiscInfoHtml: function (item) {
var miscInfo = [];

20
dashboard-ui/scripts/sync.js
View file

@ -27,7 +27,7 @@
userId: userId,
TargetId: target,
Quality: $('#selectQuality', form).val(),
Quality: $('#selectQuality', form).val() || null,
Name: $('#txtSyncJobName', form).val(),
@ -108,14 +108,16 @@
html += '<br/>';
html += '<div>';
html += '<label for="selectQuality">' + Globalize.translate('LabelQuality') + '</label>';
html += '<select id="selectQuality" data-mini="true">';
html += '<option value="High">' + Globalize.translate('OptionHigh') + '</option>';
html += '<option value="Medium">' + Globalize.translate('OptionMedium') + '</option>';
html += '<option value="Low">' + Globalize.translate('OptionLow') + '</option>';
html += '</select>';
html += '</div>';
if (result.Options.indexOf('Quality') != -1) {
html += '<div>';
html += '<label for="selectQuality">' + Globalize.translate('LabelQuality') + '</label>';
html += '<select id="selectQuality" data-mini="true">';
html += '<option value="High">' + Globalize.translate('OptionHigh') + '</option>';
html += '<option value="Medium">' + Globalize.translate('OptionMedium') + '</option>';
html += '<option value="Low">' + Globalize.translate('OptionLow') + '</option>';
html += '</select>';
html += '</div>';
}
//html += '<div data-role="collapsible" style="margin:1.5em 0">';
//html += '<h2>' + Globalize.translate('HeaderSettings') + '</h2>';