replace channel tabs

This commit is contained in:
Luke Pulverenti 2015-07-18 14:07:03 -04:00
parent bfb177618f
commit a5579327cc
12 changed files with 146 additions and 81 deletions

View File

@ -4,20 +4,11 @@
<title>Emby</title>
</head>
<body>
<div id="channelItemsPage" data-role="page" class="page libraryPage channelsPage" data-contextname="${HeaderChannels}" data-require="scripts/channelitems">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="channelslatest.html" class="latestChannelItemsTab"><iron-icon icon="new-releases"></iron-icon>${TabLatest}</a>
<a href="channels.html" class="ui-btn-active"><iron-icon icon="live-tv"></iron-icon>${TabChannels}</a>
</div>
<div class="channelHeader"></div>
<div id="channelItemsPage" data-role="page" class="page libraryPage channelsPage noSecondaryNavPage" data-contextname="${HeaderChannels}" data-require="scripts/channelitems" data-backbutton="true" data-menubutton="false">
<div data-role="content">
<div class="viewSettings">
<h1 class="categoryTitle" style="margin: 0 1em 0 0; display: inline-block; vertical-align: middle;"></h1>
<div class="listTopPaging">
</div>
</div>

View File

@ -4,17 +4,36 @@
<title>Emby</title>
</head>
<body>
<div id="channelsPage" data-role="page" class="page libraryPage channelsPage" data-contextname="${HeaderChannels}" data-require="scripts/channels">
<div id="channelsPage" data-role="page" class="page libraryPage channelsPage pageWithAbsoluteTabs" data-contextname="${HeaderChannels}" data-require="scripts/channels,scripts/channelslatest,scripts/sections">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="channelslatest.html" class="latestChannelItemsTab"><iron-icon icon="new-releases"></iron-icon>${TabLatest}</a>
<a href="#" class="ui-btn-active"><iron-icon icon="live-tv"></iron-icon>${TabChannels}</a>
<div class="libraryViewNav scopedLibraryViewNav libraryViewNavWithMinHeight">
<paper-tabs style="display:none;">
<paper-tab><iron-icon icon="new-releases"></iron-icon>${TabLatest}</paper-tab>
<paper-tab><iron-icon icon="live-tv"></iron-icon>${TabChannels}</paper-tab>
</paper-tabs>
<div class="legacyTabs" style="display:none;">
<a href="channels.html"><iron-icon icon="new-releases"></iron-icon>${TabLatest}</a>
<a href="channels.html?tab=1" class="ui-btn-active"><iron-icon icon="live-tv"></iron-icon>${TabChannels}</a>
</div>
</div>
<div class="ehsContent">
<neon-animated-pages>
<neon-animatable>
<div class="pageTabContent latestContent">
<div class="latestItems items"></div>
</div>
</neon-animatable>
<neon-animatable>
<div class="pageTabContent channelsContent">
<div class="viewSettings">
</div>
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
</div>
</neon-animatable>
</neon-animated-pages>
</div>
<div data-role="content">
<div class="viewSettings">
</div>
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
</div>
</div>
</body>

View File

@ -1,21 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Emby</title>
</head>
<body>
<div id="channelsLatestPage" data-role="page" class="page libraryPage channelsPage" data-contextname="${HeaderChannels}" data-require="scripts/sections,scripts/channelslatest,paperbuttonstyle">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="#" class="ui-btn-active latestChannelItemsTab"><iron-icon icon="new-releases"></iron-icon>${TabLatest}</a>
<a href="channels.html"><iron-icon icon="live-tv"></iron-icon>${TabChannels}</a>
</div>
<div data-role="content">
<div class="ehsContent">
<div class="items"></div>
</div>
</div>
</div>
</body>
</html>

View File

@ -341,7 +341,7 @@
}
.overflowBackdropCard {
width: 70%;
width: 80%;
}
.cardProgress {
@ -358,7 +358,7 @@
width: 42%;
}
@media all and (max-width: 500px) {
@media all and (max-width: 480px) {
.backdropCard.fullWidthCardOnMobile {
width: 100% !important;
@ -566,13 +566,20 @@
width: 50%;
}
@media all and (min-width: 540px) {
@media all and (min-width: 700px) {
.detailPage169Card {
width: 33.3%;
}
}
@media all and (max-width: 480px) {
.detailPage169Card.fullWidthCardOnMobile {
width: 100% !important;
}
}
/** detailPagePortrait */
.detailPagePortraitCard .cardPadder {

View File

@ -15,13 +15,6 @@
</div>
</div>
<div id="channelTabs" class="itemTabs" style="display: none;">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="channelslatest.html" class="latestChannelItemsTab">${TabLatest}</a>
<a href="channels.html" class="ui-btn-active">${TabChannels}</a>
</div>
</div>
<div id="boxsetTabs" class="itemTabs" style="display: none;">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="collections.html" class="ui-btn-active">${TabCollections}</a>
@ -109,14 +102,6 @@
<a href="gamestudios.html">${TabStudios}</a>
</div>
</div>
<div class="itemTabs channelTabs" style="display: none;">
<div class="libraryViewNav scopedLibraryViewNav">
<a href="channelslatest.html" class="latestChannelItemsTab"><iron-icon icon="new-releases"></iron-icon>${TabLatest}</a>
<a href="channels.html" class="ui-btn-active"><iron-icon icon="live-tv"></iron-icon>${TabChannels}</a>
</div>
</div>
<div class="channelHeader" style="display: none;"></div>
<div id="itemBackdrop" class="itemBackdrop noBackdrop">
<div class="itemBackdropContent">

View File

@ -106,16 +106,14 @@
ApiClient.getItem(query.UserId, folderId).done(function (item) {
$('.categoryTitle', page).show().html(item.Name);
$('.channelHeader', page).show().html('<a href="channelitems.html?id=' + item.ChannelId + '">' + item.ChannelName + '</a>').trigger('create');
LibraryMenu.setTitle(item.Name);
});
} else {
ApiClient.getItem(query.UserId, channelId).done(function (item) {
$('.categoryTitle', page).hide().html(item.Name);
$('.channelHeader', page).show().html('<a href="channelitems.html?id=' + item.Id + '">' + item.Name + '</a>');
LibraryMenu.setTitle(item.Name);
});
}

View File

@ -63,13 +63,49 @@
}
$(document).on('pagebeforeshowready', "#channelsPage", function () {
function loadTab(page, index) {
LibraryBrowser.loadSavedQueryValues('channels', query);
switch (index) {
reloadItems(this);
case 1:
LibraryBrowser.loadSavedQueryValues('channels', query);
reloadItems(page);
updateFilterControls(page);
break;
default:
break;
}
}
$(document).on('pageinitdepends', "#channelsPage", function () {
var page = this;
var tabs = page.querySelector('paper-tabs');
var pages = page.querySelector('neon-animated-pages');
LibraryBrowser.configurePaperLibraryTabs(page, tabs, pages);
$(tabs).on('iron-select', function () {
var selected = this.selected;
if (LibraryBrowser.navigateOnLibraryTabSelect()) {
if (selected) {
Dashboard.navigate('channels.html?tab=' + selected);
} else {
Dashboard.navigate('channels.html');
}
} else {
page.querySelector('neon-animated-pages').selected = selected;
}
});
$(pages).on('tabchange', function () {
loadTab(page, parseInt(this.selected));
});
updateFilterControls(this);
});
})(jQuery, document);

View File

@ -2,12 +2,29 @@
function reloadItems(page) {
Sections.loadLatestChannelItems(page.querySelector('.items'), Dashboard.getCurrentUserId());
Sections.loadLatestChannelItems(page.querySelector('.latestItems'), Dashboard.getCurrentUserId());
}
$(document).on('pagebeforeshowready', "#channelsLatestPage", function () {
function loadTab(page, index) {
reloadItems(this);
switch (index) {
case 0:
reloadItems(page);
break;
default:
break;
}
}
$(document).on('pageinitdepends', "#channelsPage", function () {
var page = this;
var pages = page.querySelector('neon-animated-pages');
$(pages).on('tabchange', function () {
loadTab(page, parseInt(this.selected));
});
});

View File

@ -209,7 +209,9 @@
function renderHeader(page, item, context) {
$('.itemTabs', page).hide();
$('.channelHeader', page).hide();
$(page).removeClass('noSecondaryNavPage');
var elem;
if (context == 'home') {
@ -264,7 +266,9 @@
}
}
else if (context == 'channels') {
elem = $('.channelTabs', page).show();
$(page).addClass('noSecondaryNavPage');
LibraryMenu.setBackButtonVisible(true);
LibraryMenu.setMenuButtonVisible(false);
}
else if (item.Type == "MusicAlbum") {
$('#albumTabs', page).show();
@ -279,8 +283,9 @@
}
else if (item.Type == "ChannelVideoItem" || item.Type == "ChannelAudioItem" || item.Type == "ChannelFolderItem") {
$('#channelTabs', page).show();
$('.channelHeader', page).show().html('<a href="channelitems.html?id=' + item.ChannelId + '">' + item.ChannelName + '</a>').trigger('create');
$(page).addClass('noSecondaryNavPage');
LibraryMenu.setBackButtonVisible(true);
LibraryMenu.setMenuButtonVisible(false);
}
else if (item.Type == "BoxSet") {
@ -849,7 +854,9 @@
playFromHere: true,
overlayText: true,
lazy: true,
showDetailsMenu: true
showDetailsMenu: true,
overlayPlayButton: AppInfo.enableAppLayouts,
fullWidthOnMobile: AppInfo.enableAppLayouts
});
}
else if (item.Type == "GameSystem") {

View File

@ -751,11 +751,7 @@
if (item.CollectionType == 'channels') {
if (AppInfo.enableLatestChannelItems) {
return 'channelslatest.html';
} else {
return 'channels.html';
}
return 'channels.html';
}
if (context != 'folders') {

View File

@ -548,6 +548,32 @@
setTitle: function (title) {
document.querySelector('.libraryMenuButtonText').innerHTML = title;
},
setBackButtonVisible: function (visible) {
var backButton = document.querySelector('.headerBackButton');
if (backButton) {
if (visible) {
backButton.classList.remove('hide');
} else {
backButton.classList.add('hide');
}
}
},
setMenuButtonVisible: function (visible) {
var mainDrawerButton = document.querySelector('.mainDrawerButton');
if (mainDrawerButton) {
if (!visible && $.browser.mobile) {
mainDrawerButton.classList.add('hide');
} else {
mainDrawerButton.classList.remove('hide');
}
}
}
};

View File

@ -407,10 +407,10 @@
if (self.supportsTextTracks()) {
if (isVlc) {
profile.SubtitleProfiles.push({
Format: 'srt',
Method: 'External'
});
//profile.SubtitleProfiles.push({
// Format: 'srt',
// Method: 'External'
//});
profile.SubtitleProfiles.push({
Format: 'srt',
Method: 'Embed'
@ -427,6 +427,10 @@
Format: 'pgs',
Method: 'Embed'
});
profile.SubtitleProfiles.push({
Format: 'vtt',
Method: 'Embed'
});
} else {
profile.SubtitleProfiles.push({
Format: 'vtt',