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:
parent
bfb177618f
commit
a5579327cc
12 changed files with 146 additions and 81 deletions
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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>');
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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);
|
|
@ -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));
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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") {
|
||||||
|
|
|
@ -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') {
|
||||||
|
|
|
@ -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');
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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',
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue