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;
}
.timelineItemsContainer {
text-align: left;
}
@media all and (min-width: 1200px) {
.scenePosterViewItem img {
@ -670,3 +674,7 @@ a.itemTag:hover {
.tileItem .itemProgressText {
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">
<option value="Backdrop">Backdrop</option>
<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>

1
dashboard-ui/movies.html
View file

@ -23,6 +23,7 @@
<select data-mini="true" data-inline="true" id="selectView" name="selectView">
<option value="Backdrop">Backdrop</option>
<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>

16
dashboard-ui/musicalbums.html
View file

@ -15,6 +15,12 @@
<div data-role="content">
<div class="viewSettings">
<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="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
</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">
<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 data-role="controlgroup">

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

@ -32,6 +32,7 @@
context: "games",
shape: "backdrop"
});
$('.itemsContainer', page).removeClass('timelineItemsContainer');
}
else if (view == "Poster") {
html += LibraryBrowser.getPosterDetailViewHtml({
@ -39,6 +40,16 @@
context: "games",
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);
@ -107,7 +118,15 @@
view = this.value;
if (view == "Timeline") {
query.SortBy = "PremiereDate";
query.StartIndex = 0;
$('#radioPremiereDate', page)[0].click();
} else {
reloadItems(page);
}
});
$('#chkTrailer', this).on('change', function () {

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

@ -15,6 +15,7 @@
getPosterDetailViewHtml: function (options) {
var items = options.items;
var currentYear;
if (!options.shape) {
options.shape = options.preferBackdrop ? "backdrop" : "poster";
@ -28,6 +29,16 @@
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 isDefault = false;
@ -685,7 +696,6 @@
}
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) {
@ -1107,28 +1117,28 @@
if (item.Type == "Person") {
url = ApiClient.getPersonImageUrl(item.Name, {
maxheight: 400,
maxheight: 480,
tag: imageTags.Primary,
type: "Primary"
});
}
else if (item.Type == "Genre") {
url = ApiClient.getGenreImageUrl(item.Name, {
maxheight: 400,
maxheight: 480,
tag: imageTags.Primary,
type: "Primary"
});
}
else if (item.Type == "Studio") {
url = ApiClient.getStudioImageUrl(item.Name, {
maxheight: 400,
maxheight: 480,
tag: imageTags.Primary,
type: "Primary"
});
}
else if (item.Type == "Artist") {
url = ApiClient.getArtistImageUrl(item.Name, {
maxheight: 400,
maxheight: 480,
tag: imageTags.Primary,
type: "Primary"
});
@ -1136,7 +1146,7 @@
else {
url = ApiClient.getImageUrl(item.Id, {
type: "Primary",
maxheight: 400,
maxheight: 480,
tag: item.ImageTags.Primary
});
}
@ -1145,28 +1155,28 @@
if (item.Type == "Person") {
url = ApiClient.getPersonImageUrl(item.Name, {
maxheight: 400,
maxheight: 480,
tag: item.BackdropImageTags[0],
type: "Backdrop"
});
}
else if (item.Type == "Genre") {
url = ApiClient.getGenreImageUrl(item.Name, {
maxheight: 400,
maxheight: 480,
tag: item.BackdropImageTags[0],
type: "Backdrop"
});
}
else if (item.Type == "Studio") {
url = ApiClient.getStudioImageUrl(item.Name, {
maxheight: 400,
maxheight: 480,
tag: item.BackdropImageTags[0],
type: "Backdrop"
});
}
else if (item.Type == "Artist") {
url = ApiClient.getArtistImageUrl(item.Name, {
maxheight: 400,
maxheight: 480,
tag: item.BackdropImageTags[0],
type: "Backdrop"
});
@ -1174,7 +1184,7 @@
else {
url = ApiClient.getImageUrl(item.Id, {
type: "Backdrop",
maxheight: 400,
maxheight: 480,
tag: item.BackdropImageTags[0]
});
}
@ -1183,28 +1193,28 @@
if (item.Type == "Person") {
url = ApiClient.getPersonImageUrl(item.Name, {
maxheight: 400,
maxheight: 480,
tag: imageTags.Thumb,
type: "Thumb"
});
}
else if (item.Type == "Genre") {
url = ApiClient.getGenreImageUrl(item.Name, {
maxheight: 400,
maxheight: 480,
tag: imageTags.Thumb,
type: "Thumb"
});
}
else if (item.Type == "Studio") {
url = ApiClient.getStudioImageUrl(item.Name, {
maxheight: 400,
maxheight: 480,
tag: imageTags.Thumb,
type: "Thumb"
});
}
else if (item.Type == "Artist") {
url = ApiClient.getArtistImageUrl(item.Name, {
maxheight: 400,
maxheight: 480,
tag: imageTags.Thumb,
type: "Thumb"
});
@ -1212,7 +1222,7 @@
else {
url = ApiClient.getImageUrl(item.Id, {
type: "Thumb",
maxheight: 400,
maxheight: 480,
tag: item.ImageTags.Thumb
});
}
@ -1221,7 +1231,7 @@
url = ApiClient.getImageUrl(item.Id, {
type: "Disc",
maxheight: 400,
maxheight: 480,
tag: item.ImageTags.Disc
});
}

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

@ -31,6 +31,7 @@
context: "movies",
shape: "backdrop"
});
$('.itemsContainer', page).removeClass('timelineItemsContainer');
}
else if (view == "Poster") {
html += LibraryBrowser.getPosterDetailViewHtml({
@ -38,6 +39,16 @@
context: "movies",
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);
@ -124,7 +135,16 @@
view = this.value;
if (view == "Timeline") {
query.SortBy = "PremiereDate";
query.StartIndex = 0;
$('#radioPremiereDate', page)[0].click();
} else {
reloadItems(page);
}
});
$('#chk3D', this).on('change', function () {

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

@ -1,5 +1,7 @@
(function ($, document) {
var view = "Poster";
// The base query options
var query = {
@ -22,11 +24,23 @@
$('.listTopPaging', page).html(LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, true)).trigger('create');
if (view == "Poster") {
html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items,
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);
@ -90,12 +104,29 @@
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 () {
reloadItems(this);
}).on('pageshow', "#musicAlbumsPage", function () {
$('#selectView', this).val(view).selectmenu('refresh');
// Reset form values using the last used query
$('.radioSortBy', this).each(function () {

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

@ -30,12 +30,22 @@
preferBackdrop: true,
context: "tv"
});
$('.itemsContainer', page).removeClass('timelineItemsContainer');
}
else if (view == "Poster") {
html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items,
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);
@ -135,7 +145,15 @@
view = this.value;
if (view == "Timeline") {
query.SortBy = "PremiereDate";
query.StartIndex = 0;
$('#radioPremiereDate', page)[0].click();
} else {
reloadItems(page);
}
});
$('#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">
<option value="Backdrop">Backdrop</option>
<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>