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

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> <title>Emby</title>
</head> </head>
<body> <body>
<div id="channelItemsPage" data-role="page" class="page libraryPage channelsPage" data-contextname="${HeaderChannels}" data-require="scripts/channelitems"> <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 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 data-role="content"> <div data-role="content">
<div class="viewSettings"> <div class="viewSettings">
<h1 class="categoryTitle" style="margin: 0 1em 0 0; display: inline-block; vertical-align: middle;"></h1>
<div class="listTopPaging"> <div class="listTopPaging">
</div> </div>
</div> </div>

View file

@ -4,17 +4,36 @@
<title>Emby</title> <title>Emby</title>
</head> </head>
<body> <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"> <div class="libraryViewNav scopedLibraryViewNav libraryViewNavWithMinHeight">
<a href="channelslatest.html" class="latestChannelItemsTab"><iron-icon icon="new-releases"></iron-icon>${TabLatest}</a> <paper-tabs style="display:none;">
<a href="#" class="ui-btn-active"><iron-icon icon="live-tv"></iron-icon>${TabChannels}</a> <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>
<div data-role="content"> <div data-role="content">
<div class="viewSettings">
</div>
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
</div> </div>
</div> </div>
</body> </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 { .overflowBackdropCard {
width: 70%; width: 80%;
} }
.cardProgress { .cardProgress {
@ -358,7 +358,7 @@
width: 42%; width: 42%;
} }
@media all and (max-width: 500px) { @media all and (max-width: 480px) {
.backdropCard.fullWidthCardOnMobile { .backdropCard.fullWidthCardOnMobile {
width: 100% !important; width: 100% !important;
@ -566,13 +566,20 @@
width: 50%; width: 50%;
} }
@media all and (min-width: 540px) { @media all and (min-width: 700px) {
.detailPage169Card { .detailPage169Card {
width: 33.3%; width: 33.3%;
} }
} }
@media all and (max-width: 480px) {
.detailPage169Card.fullWidthCardOnMobile {
width: 100% !important;
}
}
/** detailPagePortrait */ /** detailPagePortrait */
.detailPagePortraitCard .cardPadder { .detailPagePortraitCard .cardPadder {

View file

@ -15,13 +15,6 @@
</div> </div>
</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 id="boxsetTabs" class="itemTabs" style="display: none;">
<div class="libraryViewNav scopedLibraryViewNav"> <div class="libraryViewNav scopedLibraryViewNav">
<a href="collections.html" class="ui-btn-active">${TabCollections}</a> <a href="collections.html" class="ui-btn-active">${TabCollections}</a>
@ -109,14 +102,6 @@
<a href="gamestudios.html">${TabStudios}</a> <a href="gamestudios.html">${TabStudios}</a>
</div> </div>
</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 id="itemBackdrop" class="itemBackdrop noBackdrop">
<div class="itemBackdropContent"> <div class="itemBackdropContent">

View file

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

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); })(jQuery, document);

View file

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

View file

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

View file

@ -548,6 +548,32 @@
setTitle: function (title) { setTitle: function (title) {
document.querySelector('.libraryMenuButtonText').innerHTML = 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 (self.supportsTextTracks()) {
if (isVlc) { if (isVlc) {
profile.SubtitleProfiles.push({ //profile.SubtitleProfiles.push({
Format: 'srt', // Format: 'srt',
Method: 'External' // Method: 'External'
}); //});
profile.SubtitleProfiles.push({ profile.SubtitleProfiles.push({
Format: 'srt', Format: 'srt',
Method: 'Embed' Method: 'Embed'
@ -427,6 +427,10 @@
Format: 'pgs', Format: 'pgs',
Method: 'Embed' Method: 'Embed'
}); });
profile.SubtitleProfiles.push({
Format: 'vtt',
Method: 'Embed'
});
} else { } else {
profile.SubtitleProfiles.push({ profile.SubtitleProfiles.push({
Format: 'vtt', Format: 'vtt',