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

added timeline view

Browse source
This commit is contained in:
Luke Pulverenti 2013-05-15 08:05:07 -04:00
parent 3637ebf93a
commit 064af8cfee
10 changed files with 156 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

8
dashboard-ui/css/librarybrowser.css
View file

@ -575,6 +575,10 @@ a.itemTag:hover {
text-align: center; text-align: center;
} }
.timelineItemsContainer {
text-align: left;
}
@media all and (min-width: 1200px) { @media all and (min-width: 1200px) {
.scenePosterViewItem img { .scenePosterViewItem img {
@ -670,3 +674,7 @@ a.itemTag:hover {
.tileItem .itemProgressText { .tileItem .itemProgressText {
display: none; display: none;
} }
.timelineHeader {
margin-bottom: .25em;
}

1
dashboard-ui/games.html
View file

@ -19,6 +19,7 @@
<select data-mini="true" data-inline="true" id="selectView" name="selectView"> <select data-mini="true" data-inline="true" id="selectView" name="selectView">
<option value="Backdrop">Backdrop</option> <option value="Backdrop">Backdrop</option>
<option value="Poster">Poster</option> <option value="Poster">Poster</option>
<option value="Timeline">Timeline</option>
</select> </select>
</div> </div>
<button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button> <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>

1
dashboard-ui/movies.html
View file

@ -23,6 +23,7 @@
<select data-mini="true" data-inline="true" id="selectView" name="selectView"> <select data-mini="true" data-inline="true" id="selectView" name="selectView">
<option value="Backdrop">Backdrop</option> <option value="Backdrop">Backdrop</option>
<option value="Poster">Poster</option> <option value="Poster">Poster</option>
<option value="Timeline">Timeline</option>
</select> </select>
</div> </div>
<button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button> <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>

16
dashboard-ui/musicalbums.html
View file

@ -15,6 +15,12 @@
<div data-role="content"> <div data-role="content">
<div class="viewSettings"> <div class="viewSettings">
<div class="viewControls"> <div class="viewControls">
<div style="display: inline-block;">
<select data-mini="true" data-inline="true" id="selectView" name="selectView">
<option value="Poster">Poster</option>
<option value="Timeline">Timeline</option>
</select>
</div>
<button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button> <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
<button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button> <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
</div> </div>
@ -33,6 +39,16 @@
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioSortName" value="on" checked="checked" data-sortby="SortName" data-mini="true"> <input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioSortName" value="on" checked="checked" data-sortby="SortName" data-mini="true">
<label for="radioSortName">Name</label> <label for="radioSortName">Name</label>
<input class="radioSortBy" type="radio" name="radioSortBy" data-theme="c" id="radioCommunityRating" value="off" data-sortby="CommunityRating" data-mini="true">
<label for="radioCommunityRating">Community Rating</label>
<input class="radioSortBy" type="radio" name="radioSortBy" data-theme="c" id="radioDateCreated" value="off" data-sortby="DateCreated" data-mini="true">
<label for="radioDateCreated">Date Added</label>
<input class="radioSortBy" type="radio" name="radioSortBy" data-theme="c" id="radioPremiereDate" value="off" data-sortby="ProductionYear,PremiereDate" data-mini="true">
<label for="radioPremiereDate">Date Released</label>
</fieldset> </fieldset>
<fieldset data-role="controlgroup"> <fieldset data-role="controlgroup">

21
dashboard-ui/scripts/gamespage.js
View file

@ -32,6 +32,7 @@
context: "games", context: "games",
shape: "backdrop" shape: "backdrop"
}); });
$('.itemsContainer', page).removeClass('timelineItemsContainer');
} }
else if (view == "Poster") { else if (view == "Poster") {
html += LibraryBrowser.getPosterDetailViewHtml({ html += LibraryBrowser.getPosterDetailViewHtml({
@ -39,6 +40,16 @@
context: "games", context: "games",
shape: "poster" shape: "poster"
}); });
$('.itemsContainer', page).removeClass('timelineItemsContainer');
}
else if (view == "Timeline") {
html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items,
context: "games",
shape: "poster",
timeline: true
});
$('.itemsContainer', page).addClass('timelineItemsContainer');
} }
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount); html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
@ -107,7 +118,15 @@
view = this.value; view = this.value;
reloadItems(page); if (view == "Timeline") {
query.SortBy = "PremiereDate";
query.StartIndex = 0;
$('#radioPremiereDate', page)[0].click();
} else {
reloadItems(page);
}
}); });
$('#chkTrailer', this).on('change', function () { $('#chkTrailer', this).on('change', function () {

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

@ -15,6 +15,7 @@
getPosterDetailViewHtml: function (options) { getPosterDetailViewHtml: function (options) {
var items = options.items; var items = options.items;
var currentYear;
if (!options.shape) { if (!options.shape) {
options.shape = options.preferBackdrop ? "backdrop" : "poster"; options.shape = options.preferBackdrop ? "backdrop" : "poster";
@ -28,6 +29,16 @@
var item = items[i]; var item = items[i];
if (options.timeline) {
var year = item.ProductionYear || "Unknown Year";
if (year != currentYear) {
html += '<h2 class="timelineHeader">' + year + '</h2>';
currentYear = year;
}
}
var imgUrl; var imgUrl;
var isDefault = false; var isDefault = false;
@ -685,7 +696,6 @@
} }
else if (item.AlbumArtist && item.Type == "MusicAlbum") { else if (item.AlbumArtist && item.Type == "MusicAlbum") {
html.push('<a class="detailPageParentLink" href="itembynamedetails.html?context=music&artist=' + ApiClient.encodeName(item.AlbumArtist) + '">' + item.AlbumArtist + '</a>');
} }
else if (item.Album) { else if (item.Album) {
@ -1107,28 +1117,28 @@
if (item.Type == "Person") { if (item.Type == "Person") {
url = ApiClient.getPersonImageUrl(item.Name, { url = ApiClient.getPersonImageUrl(item.Name, {
maxheight: 400, maxheight: 480,
tag: imageTags.Primary, tag: imageTags.Primary,
type: "Primary" type: "Primary"
}); });
} }
else if (item.Type == "Genre") { else if (item.Type == "Genre") {
url = ApiClient.getGenreImageUrl(item.Name, { url = ApiClient.getGenreImageUrl(item.Name, {
maxheight: 400, maxheight: 480,
tag: imageTags.Primary, tag: imageTags.Primary,
type: "Primary" type: "Primary"
}); });
} }
else if (item.Type == "Studio") { else if (item.Type == "Studio") {
url = ApiClient.getStudioImageUrl(item.Name, { url = ApiClient.getStudioImageUrl(item.Name, {
maxheight: 400, maxheight: 480,
tag: imageTags.Primary, tag: imageTags.Primary,
type: "Primary" type: "Primary"
}); });
} }
else if (item.Type == "Artist") { else if (item.Type == "Artist") {
url = ApiClient.getArtistImageUrl(item.Name, { url = ApiClient.getArtistImageUrl(item.Name, {
maxheight: 400, maxheight: 480,
tag: imageTags.Primary, tag: imageTags.Primary,
type: "Primary" type: "Primary"
}); });
@ -1136,7 +1146,7 @@
else { else {
url = ApiClient.getImageUrl(item.Id, { url = ApiClient.getImageUrl(item.Id, {
type: "Primary", type: "Primary",
maxheight: 400, maxheight: 480,
tag: item.ImageTags.Primary tag: item.ImageTags.Primary
}); });
} }
@ -1145,28 +1155,28 @@
if (item.Type == "Person") { if (item.Type == "Person") {
url = ApiClient.getPersonImageUrl(item.Name, { url = ApiClient.getPersonImageUrl(item.Name, {
maxheight: 400, maxheight: 480,
tag: item.BackdropImageTags[0], tag: item.BackdropImageTags[0],
type: "Backdrop" type: "Backdrop"
}); });
} }
else if (item.Type == "Genre") { else if (item.Type == "Genre") {
url = ApiClient.getGenreImageUrl(item.Name, { url = ApiClient.getGenreImageUrl(item.Name, {
maxheight: 400, maxheight: 480,
tag: item.BackdropImageTags[0], tag: item.BackdropImageTags[0],
type: "Backdrop" type: "Backdrop"
}); });
} }
else if (item.Type == "Studio") { else if (item.Type == "Studio") {
url = ApiClient.getStudioImageUrl(item.Name, { url = ApiClient.getStudioImageUrl(item.Name, {
maxheight: 400, maxheight: 480,
tag: item.BackdropImageTags[0], tag: item.BackdropImageTags[0],
type: "Backdrop" type: "Backdrop"
}); });
} }
else if (item.Type == "Artist") { else if (item.Type == "Artist") {
url = ApiClient.getArtistImageUrl(item.Name, { url = ApiClient.getArtistImageUrl(item.Name, {
maxheight: 400, maxheight: 480,
tag: item.BackdropImageTags[0], tag: item.BackdropImageTags[0],
type: "Backdrop" type: "Backdrop"
}); });
@ -1174,7 +1184,7 @@
else { else {
url = ApiClient.getImageUrl(item.Id, { url = ApiClient.getImageUrl(item.Id, {
type: "Backdrop", type: "Backdrop",
maxheight: 400, maxheight: 480,
tag: item.BackdropImageTags[0] tag: item.BackdropImageTags[0]
}); });
} }
@ -1183,28 +1193,28 @@
if (item.Type == "Person") { if (item.Type == "Person") {
url = ApiClient.getPersonImageUrl(item.Name, { url = ApiClient.getPersonImageUrl(item.Name, {
maxheight: 400, maxheight: 480,
tag: imageTags.Thumb, tag: imageTags.Thumb,
type: "Thumb" type: "Thumb"
}); });
} }
else if (item.Type == "Genre") { else if (item.Type == "Genre") {
url = ApiClient.getGenreImageUrl(item.Name, { url = ApiClient.getGenreImageUrl(item.Name, {
maxheight: 400, maxheight: 480,
tag: imageTags.Thumb, tag: imageTags.Thumb,
type: "Thumb" type: "Thumb"
}); });
} }
else if (item.Type == "Studio") { else if (item.Type == "Studio") {
url = ApiClient.getStudioImageUrl(item.Name, { url = ApiClient.getStudioImageUrl(item.Name, {
maxheight: 400, maxheight: 480,
tag: imageTags.Thumb, tag: imageTags.Thumb,
type: "Thumb" type: "Thumb"
}); });
} }
else if (item.Type == "Artist") { else if (item.Type == "Artist") {
url = ApiClient.getArtistImageUrl(item.Name, { url = ApiClient.getArtistImageUrl(item.Name, {
maxheight: 400, maxheight: 480,
tag: imageTags.Thumb, tag: imageTags.Thumb,
type: "Thumb" type: "Thumb"
}); });
@ -1212,7 +1222,7 @@
else { else {
url = ApiClient.getImageUrl(item.Id, { url = ApiClient.getImageUrl(item.Id, {
type: "Thumb", type: "Thumb",
maxheight: 400, maxheight: 480,
tag: item.ImageTags.Thumb tag: item.ImageTags.Thumb
}); });
} }
@ -1221,7 +1231,7 @@
url = ApiClient.getImageUrl(item.Id, { url = ApiClient.getImageUrl(item.Id, {
type: "Disc", type: "Disc",
maxheight: 400, maxheight: 480,
tag: item.ImageTags.Disc tag: item.ImageTags.Disc
}); });
} }

34
dashboard-ui/scripts/movies.js
View file

@ -31,6 +31,7 @@
context: "movies", context: "movies",
shape: "backdrop" shape: "backdrop"
}); });
$('.itemsContainer', page).removeClass('timelineItemsContainer');
} }
else if (view == "Poster") { else if (view == "Poster") {
html += LibraryBrowser.getPosterDetailViewHtml({ html += LibraryBrowser.getPosterDetailViewHtml({
@ -38,6 +39,16 @@
context: "movies", context: "movies",
shape: "poster" shape: "poster"
}); });
$('.itemsContainer', page).removeClass('timelineItemsContainer');
}
else if (view == "Timeline") {
html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items,
context: "movies",
shape: "poster",
timeline: true
});
$('.itemsContainer', page).addClass('timelineItemsContainer');
} }
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount); html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
@ -48,7 +59,7 @@
query.StartIndex = (parseInt(this.value) - 1) * query.Limit; query.StartIndex = (parseInt(this.value) - 1) * query.Limit;
reloadItems(page); reloadItems(page);
}); });
$('.btnNextPage', page).on('click', function () { $('.btnNextPage', page).on('click', function () {
query.StartIndex += query.Limit; query.StartIndex += query.Limit;
reloadItems(page); reloadItems(page);
@ -124,7 +135,16 @@
view = this.value; view = this.value;
reloadItems(page); if (view == "Timeline") {
query.SortBy = "PremiereDate";
query.StartIndex = 0;
$('#radioPremiereDate', page)[0].click();
} else {
reloadItems(page);
}
}); });
$('#chk3D', this).on('change', function () { $('#chk3D', this).on('change', function () {
@ -134,7 +154,7 @@
reloadItems(page); reloadItems(page);
}); });
$('#chkSubtitle', this).on('change', function () { $('#chkSubtitle', this).on('change', function () {
query.StartIndex = 0; query.StartIndex = 0;
@ -142,7 +162,7 @@
reloadItems(page); reloadItems(page);
}); });
$('#chkTrailer', this).on('change', function () { $('#chkTrailer', this).on('change', function () {
query.StartIndex = 0; query.StartIndex = 0;
@ -150,7 +170,7 @@
reloadItems(page); reloadItems(page);
}); });
$('#chkSpecialFeature', this).on('change', function () { $('#chkSpecialFeature', this).on('change', function () {
query.StartIndex = 0; query.StartIndex = 0;
@ -158,7 +178,7 @@
reloadItems(page); reloadItems(page);
}); });
$('#chkThemeSong', this).on('change', function () { $('#chkThemeSong', this).on('change', function () {
query.StartIndex = 0; query.StartIndex = 0;
@ -166,7 +186,7 @@
reloadItems(page); reloadItems(page);
}); });
$('#chkThemeVideo', this).on('change', function () { $('#chkThemeVideo', this).on('change', function () {
query.StartIndex = 0; query.StartIndex = 0;

41
dashboard-ui/scripts/musicalbums.js
View file

@ -1,5 +1,7 @@
(function ($, document) { (function ($, document) {
var view = "Poster";
// The base query options // The base query options
var query = { var query = {
@ -22,11 +24,23 @@
$('.listTopPaging', page).html(LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, true)).trigger('create'); $('.listTopPaging', page).html(LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, true)).trigger('create');
html += LibraryBrowser.getPosterDetailViewHtml({ if (view == "Poster") {
items: result.Items, html += LibraryBrowser.getPosterDetailViewHtml({
context: "music", items: result.Items,
shape: "square" context: "music",
}); shape: "square"
});
$('.itemsContainer', page).removeClass('timelineItemsContainer');
}
else if (view == "Timeline") {
html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items,
context: "music",
shape: "square",
timeline: true
});
$('.itemsContainer', page).addClass('timelineItemsContainer');
}
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount); html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
@ -90,12 +104,29 @@
reloadItems(page); reloadItems(page);
}); });
$('#selectView', this).on('change', function () {
view = this.value;
if (view == "Timeline") {
query.SortBy = "PremiereDate";
query.StartIndex = 0;
$('#radioPremiereDate', page)[0].click();
} else {
reloadItems(page);
}
});
}).on('pagebeforeshow', "#musicAlbumsPage", function () { }).on('pagebeforeshow', "#musicAlbumsPage", function () {
reloadItems(this); reloadItems(this);
}).on('pageshow', "#musicAlbumsPage", function () { }).on('pageshow', "#musicAlbumsPage", function () {
$('#selectView', this).val(view).selectmenu('refresh');
// Reset form values using the last used query // Reset form values using the last used query
$('.radioSortBy', this).each(function () { $('.radioSortBy', this).each(function () {

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

@ -30,12 +30,22 @@
preferBackdrop: true, preferBackdrop: true,
context: "tv" context: "tv"
}); });
$('.itemsContainer', page).removeClass('timelineItemsContainer');
} }
else if (view == "Poster") { else if (view == "Poster") {
html += LibraryBrowser.getPosterDetailViewHtml({ html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items, items: result.Items,
context: "tv" context: "tv"
}); });
$('.itemsContainer', page).removeClass('timelineItemsContainer');
}
else if (view == "Timeline") {
html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items,
context: "tv",
timeline: true
});
$('.itemsContainer', page).addClass('timelineItemsContainer');
} }
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount); html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
@ -135,7 +145,15 @@
view = this.value; view = this.value;
reloadItems(page); if (view == "Timeline") {
query.SortBy = "PremiereDate";
query.StartIndex = 0;
$('#radioPremiereDate', page)[0].click();
} else {
reloadItems(page);
}
}); });
$('#chkTrailer', this).on('change', function () { $('#chkTrailer', this).on('change', function () {

1
dashboard-ui/tvshows.html
View file

@ -20,6 +20,7 @@
<select data-mini="true" data-inline="true" id="selectView" name="selectView"> <select data-mini="true" data-inline="true" id="selectView" name="selectView">
<option value="Backdrop">Backdrop</option> <option value="Backdrop">Backdrop</option>
<option value="Poster">Poster</option> <option value="Poster">Poster</option>
<option value="Timeline">Timeline</option>
</select> </select>
</div> </div>
<button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button> <button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>