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

rework notifications flyout

Browse source
This commit is contained in:
Luke Pulverenti 2015-05-31 17:07:44 -04:00
parent 9b6cd65b9d
commit 8e0dc6d8e4
11 changed files with 115 additions and 189 deletions
Download patch file Download diff file Expand all files Collapse all files

6
dashboard-ui/css/librarymenu.css
View file

@ -6,12 +6,16 @@
padding-top: 98px !important; padding-top: 98px !important;
} }
.libraryMenuDivider { .sidebarDivider {
height: 1px; height: 1px;
background: #333; background: #333;
margin: .5em 0; margin: .5em 0;
} }
.ui-page-theme-a .sidebarDivider {
background: #ddd !important;
}
.headerBackButton { .headerBackButton {
padding-right: 5px !important; padding-right: 5px !important;
} }

64
dashboard-ui/css/notifications.css
View file

@ -1,61 +1,35 @@
.btnNotifications { .btnNotifications {
text-decoration: none !important; text-decoration: none !important;
position: absolute;
top: 25px !important;
right: 10px !important;
padding: 0 !important; padding: 0 !important;
outline: 0 !important; outline: 0 !important;
margin: 0 !important;
float: right;
vertical-align: middle;
} }
.btnNotifications:hover {
background: none !important;
}
.btnNotificationsInner { .btnNotificationsInner {
vertical-align: middle; color: #aaa;
border-radius: 1000px; font-weight: 500;
padding: 6px 10px 5px; display: none;
text-align: center;
text-decoration: none !important;
-moz-user-select: none;
-webkit-user-select: none;
background-color: #444;
color: #fff;
font-size: 13px;
font-weight: normal;
display: inline;
} }
.levelNormal { .levelNormal {
background-color: #4d90fe; color: #4d90fe;
background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed)); display: block;
background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
background-image: linear-gradient(top,#4d90fe,#4787ed);
color: #fff !important;
} }
.levelWarning { .levelWarning {
background-color: #FF7537; color: #FF7537;
background-image: none; display: block;
color: #fff !important;
} }
.levelError { .levelError {
background-color: #d14836; color: #d14836;
background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39),to(#d14836)); display: block;
background-image: -webkit-linear-gradient(top,#dd4b39,#d14836);
background-image: -moz-linear-gradient(top,#dd4b39,#d14836);
background-image: -ms-linear-gradient(top,#dd4b39,#d14836);
background-image: -o-linear-gradient(top,#dd4b39,#d14836);
background-image: linear-gradient(top,#dd4b39,#d14836);
color: #fff !important;
} }
.flyoutNotification { .flyoutNotification {
border-top: 1px solid #eee; border-top: 1px solid #444;
padding: 0 0 .5em; padding: 0 0 .5em;
} }
@ -66,11 +40,15 @@
} }
.flyoutNotification:last-child { .flyoutNotification:last-child {
border-bottom: 1px solid #eee; border-bottom: 1px solid #444;
}
.flyoutNotification a {
font-weight: 500 !important;
} }
.notificationTime { .notificationTime {
color: green; color: #52B54B;
} }
.notificationImage { .notificationImage {
@ -91,10 +69,6 @@
color: blue; color: blue;
} }
.notificationsList {
border-bottom: 1px solid #ddd;
}
.imgNotification, .imgNotificationInner { .imgNotification, .imgNotificationInner {
width: 40px; width: 40px;
height: 40px; height: 40px;

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

@ -484,14 +484,6 @@ h1 .imageLink {
color: #666; color: #666;
} }
.sidebarDivider {
height: 0;
border-width: 1px 0 0;
border-style: solid;
margin: .7em 0;
border-radius: 0;
}
.sidebarHeader { .sidebarHeader {
padding-left: 20px; padding-left: 20px;
margin: 15px 0 10px; margin: 15px 0 10px;

13
dashboard-ui/notificationlist.html
View file

@ -4,19 +4,16 @@
<title>${TitleNotifications}</title> <title>${TitleNotifications}</title>
</head> </head>
<body> <body>
<div id="notificationsPage" data-role="page" class="page type-interior notificationConfigurationPage"> <div id="notificationsPage" data-role="page" class="page libraryPage noSecondaryNavPage" data-require="scripts/notificationlist">
<div data-role="content"> <div data-role="content">
<div class="content-primary">
<div class="readOnlyContent"> <div class="readOnlyContent" style="margin: auto;max-width:900px;">
<div class="notificationsList" style="margin-top: 1em;">
</div>
<p style="display:none;" class="btnMarkReadContainer"><button class="btnMarkRead" type="button" data-icon="check">${ButtonMarkRead}</button></p>
<h1>${TitleNotifications}</h1>
<div class="notificationsList" style="margin-top: 1em;">
</div> </div>
</div> </div>
</div> </div>
</div> </div>

17
dashboard-ui/scripts/librarymenu.js
View file

@ -108,7 +108,7 @@
html += '<div class="libraryMenuOptions">'; html += '<div class="libraryMenuOptions">';
html += '</div>'; html += '</div>';
html += '<div class="libraryMenuDivider"></div>'; html += '<div class="sidebarDivider"></div>';
html += '<div class="adminMenuOptions">'; html += '<div class="adminMenuOptions">';
html += '<div class="sidebarHeader">'; html += '<div class="sidebarHeader">';
@ -120,7 +120,7 @@
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="dashboard" href="dashboard.html"><span class="fa fa-server sidebarLinkIcon"></span>' + Globalize.translate('ButtonServer') + '</a>'; html += '<a class="sidebarLink lnkMediaFolder" data-itemid="dashboard" href="dashboard.html"><span class="fa fa-server sidebarLinkIcon"></span>' + Globalize.translate('ButtonServer') + '</a>';
html += '</div>'; html += '</div>';
html += '<div class="libraryMenuDivider"></div>'; html += '<div class="sidebarDivider"></div>';
html += '<div class="userMenuOptions">'; html += '<div class="userMenuOptions">';
if (Dashboard.isConnectMode()) { if (Dashboard.isConnectMode()) {
@ -311,26 +311,29 @@
html += user.name; html += user.name;
html += '</a>'; html += '</a>';
//html += '<a href="#" class="btnNotifications"><div class="btnNotificationsInner">0</div></a>'; html += '<div class="sidebarDivider" style="margin-top:0;"></div>';
html += '<div class="libraryMenuDivider" style="margin-top:0;"></div>';
var homeHref = window.ApiClient ? 'index.html' : 'selectserver.html'; var homeHref = window.ApiClient ? 'index.html' : 'selectserver.html';
html += '<a class="lnkMediaFolder sidebarLink" href="' + homeHref + '"><span class="fa fa-home sidebarLinkIcon"></span><span>' + Globalize.translate('ButtonHome') + '</span></a>'; html += '<a class="lnkMediaFolder sidebarLink" href="' + homeHref + '"><span class="fa fa-home sidebarLinkIcon"></span><span>' + Globalize.translate('ButtonHome') + '</span></a>';
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="inbox" href="notificationlist.html"><span class="fa fa-inbox sidebarLinkIcon"></span>';
html += Globalize.translate('ButtonInbox');
html += '<div class="btnNotifications"><div class="btnNotificationsInner">0</div></div>';
html += '</a>';
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="remote" href="nowplaying.html"><span class="fa fa-tablet sidebarLinkIcon"></span>' + Globalize.translate('ButtonRemote') + '</a>'; html += '<a class="sidebarLink lnkMediaFolder" data-itemid="remote" href="nowplaying.html"><span class="fa fa-tablet sidebarLinkIcon"></span>' + Globalize.translate('ButtonRemote') + '</a>';
html += '<a class="sidebarLink lnkMediaFolder syncViewMenu" data-itemid="mysync" href="mysync.html"><span class="fa fa-cloud sidebarLinkIcon"></span>' + Globalize.translate('ButtonSync') + '</a>'; html += '<a class="sidebarLink lnkMediaFolder syncViewMenu" data-itemid="mysync" href="mysync.html"><span class="fa fa-cloud sidebarLinkIcon"></span>' + Globalize.translate('ButtonSync') + '</a>';
html += '<div class="libraryMenuDivider"></div>'; html += '<div class="sidebarDivider"></div>';
html += getViewsHtml(); html += getViewsHtml();
html += '</div>'; html += '</div>';
html += '</div>'; html += '</div>';
$(document.body).append(html); $(document.body).append(html).trigger('libraryMenuCreated');
panel = $('#libraryPanel').panel({}).lazyChildren().trigger('create'); panel = $('#libraryPanel').panel({}).lazyChildren().trigger('create');

23
dashboard-ui/scripts/mediaplayer.js
View file

@ -217,6 +217,15 @@
Protocol: 'http' Protocol: 'http'
}); });
profile.TranscodingProfiles.push({
Container: 'mp4',
Type: 'Video',
AudioCodec: 'aac',
VideoCodec: 'h264',
Context: 'Static',
Protocol: 'http'
});
if (canPlayAac && $.browser.safari) { if (canPlayAac && $.browser.safari) {
profile.TranscodingProfiles.push({ profile.TranscodingProfiles.push({
Container: 'aac', Container: 'aac',
@ -225,6 +234,13 @@
Context: 'Streaming', Context: 'Streaming',
Protocol: 'http' Protocol: 'http'
}); });
profile.TranscodingProfiles.push({
Container: 'aac',
Type: 'Audio',
AudioCodec: 'aac',
Context: 'Static',
Protocol: 'http'
});
} else { } else {
profile.TranscodingProfiles.push({ profile.TranscodingProfiles.push({
Container: 'mp3', Container: 'mp3',
@ -233,6 +249,13 @@
Context: 'Streaming', Context: 'Streaming',
Protocol: 'http' Protocol: 'http'
}); });
profile.TranscodingProfiles.push({
Container: 'mp3',
Type: 'Audio',
AudioCodec: 'mp3',
Context: 'Static',
Protocol: 'http'
});
} }
profile.ContainerProfiles = []; profile.ContainerProfiles = [];

27
dashboard-ui/scripts/notificationlist.js
View file

@ -1,16 +1,15 @@
(function ($, document, Notifications) { (function ($, document, Notifications) {
$(document).on("pageinit", "#notificationsPage", function () { $(document).on("pageshowready", "#notificationsPage", function () {
// If there is no user logged in there can be no notifications // If there is no user logged in there can be no notifications
if (!Dashboard.getCurrentUserId()) return; if (!Dashboard.getCurrentUserId()) return;
var elem = $(".notificationsList"); var elem = $(".notificationsList");
var btn = $(".btnMarkReadContainer");
var startIndex = 0; var startIndex = 0;
var limit = 10; var limit = 10;
Notifications.showNotificationsList(startIndex, limit, elem, btn); Notifications.showNotificationsList(startIndex, limit, elem);
elem.on("click", ".btnPreviousPage", function (e) { elem.on("click", ".btnPreviousPage", function (e) {
@ -20,7 +19,7 @@
if (startIndex < 0) startIndex = 0; if (startIndex < 0) startIndex = 0;
Notifications.showNotificationsList(startIndex, limit, elem, btn); Notifications.showNotificationsList(startIndex, limit, elem);
}) })
.on("click", ".btnNextPage", function (e) { .on("click", ".btnNextPage", function (e) {
@ -29,25 +28,11 @@
startIndex = startIndex + limit; startIndex = startIndex + limit;
Notifications.showNotificationsList(startIndex, limit, elem, btn); Notifications.showNotificationsList(startIndex, limit, elem);
}); });
$(".readOnlyContent").on("click", ".btnMarkRead", function () { Notifications.markNotificationsRead([]);
var ids = $(".notificationsList div").map(function () {
return this.getAttribute('data-notificationid');
}).get();
Notifications.markNotificationsRead(ids, function () {
Notifications.showNotificationsList(startIndex, limit, elem, btn);
});
});
}); });

78
dashboard-ui/scripts/notifications.js
View file

@ -43,51 +43,6 @@
}); });
}; };
self.showNotificationsFlyout = function () {
Dashboard.getCurrentUser().done(function (user) {
var html = '<div data-role="panel" data-position="right" data-display="overlay" class="notificationsFlyout" data-position-fixed="true" data-theme="a">';
html += '<h1 style="margin: .25em 0;">';
html += '<span style="vertical-align:middle;">' + Globalize.translate('HeaderNotifications') + '</span>';
if (user.Policy.IsAdministrator) {
html += '<a data-role="button" data-inline="true" data-icon="arrow-r" href="notificationlist.html" data-iconpos="notext" style="vertical-align:middle;margin-left:.5em;">' + Globalize.translate('ButtonViewNotifications') + '</a>';
}
html += '</h1>';
html += '<div>';
html += '<div class="notificationsFlyoutlist">Loading...';
html += '</div>';
html += '</div>';
html += '</div>';
$(document.body).append(html);
$('.notificationsFlyout').panel({}).trigger('create').panel("open").on("panelclose", function () {
$(this).off("panelclose").remove();
});
self.isFlyout = true;
var startIndex = 0;
var limit = 5;
var elem = $('.notificationsFlyoutlist');
refreshNotifications(startIndex, limit, elem, null, false).done(function () {
self.markNotificationsRead([]);
});
});
};
self.markNotificationsRead = function (ids, callback) { self.markNotificationsRead = function (ids, callback) {
ApiClient.markNotificationsRead(Dashboard.getCurrentUserId(), ids, true).done(function () { ApiClient.markNotificationsRead(Dashboard.getCurrentUserId(), ids, true).done(function () {
@ -104,51 +59,36 @@
}; };
self.showNotificationsList = function (startIndex, limit, elem, btn) { self.showNotificationsList = function (startIndex, limit, elem) {
refreshNotifications(startIndex, limit, elem, btn, true); refreshNotifications(startIndex, limit, elem, true);
}; };
} }
function refreshNotifications(startIndex, limit, elem, btn, showPaging) { function refreshNotifications(startIndex, limit, elem, showPaging) {
var apiClient = window.ApiClient; var apiClient = window.ApiClient;
if (apiClient) { if (apiClient) {
return apiClient.getNotifications(Dashboard.getCurrentUserId(), { StartIndex: startIndex, Limit: limit }).done(function (result) { return apiClient.getNotifications(Dashboard.getCurrentUserId(), { StartIndex: startIndex, Limit: limit }).done(function (result) {
listUnreadNotifications(result.Notifications, result.TotalRecordCount, startIndex, limit, elem, btn, showPaging); listUnreadNotifications(result.Notifications, result.TotalRecordCount, startIndex, limit, elem, showPaging);
}); });
} }
} }
function listUnreadNotifications(list, totalRecordCount, startIndex, limit, elem, btn, showPaging) { function listUnreadNotifications(list, totalRecordCount, startIndex, limit, elem, showPaging) {
if (!totalRecordCount) { if (!totalRecordCount) {
elem.html('<p style="padding:.5em 1em;">' + Globalize.translate('LabelNoUnreadNotifications') + '</p>'); elem.html('<p style="padding:.5em 1em;">' + Globalize.translate('LabelNoUnreadNotifications') + '</p>');
if (btn) {
btn.hide();
}
return; return;
} }
Notifications.total = totalRecordCount; Notifications.total = totalRecordCount;
if (btn) {
if (list.filter(function (n) {
return !n.IsRead;
}).length) {
btn.show();
} else {
btn.hide();
}
}
var html = ''; var html = '';
if (totalRecordCount > limit && showPaging === true) { if (totalRecordCount > limit && showPaging === true) {
@ -194,7 +134,7 @@
html += '<p class="notificationTime" style="margin: .5em 0;">' + humane_date(notification.Date) + '</p>'; html += '<p class="notificationTime" style="margin: .5em 0;">' + humane_date(notification.Date) + '</p>';
if (notification.Description) { if (notification.Description) {
html += '<p style="margin: .5em 0;max-height:100px;overflow:hidden;text-overflow:ellipsis;">' + notification.Description + '</p>'; html += '<p style="margin: .5em 0;max-height:150px;overflow:hidden;text-overflow:ellipsis;">' + notification.Description + '</p>';
} }
html += '</div>'; html += '</div>';
@ -223,12 +163,10 @@
window.Notifications = new notifications(); window.Notifications = new notifications();
$(document).on('headercreated', function (e) { $(document).on('libraryMenuCreated', function (e) {
if (window.ApiClient) { if (window.ApiClient) {
//$('<button class="headerButton headerButtonRight btnNotifications" data-role="none" type="button" title="Notifications"><div class="btnNotificationsInner">0</div></button>').insertAfter($('.headerSearchButton')).on('click', Notifications.showNotificationsFlyout); Notifications.updateNotificationCount();
//Notifications.updateNotificationCount();
} }
}); });

24
dashboard-ui/scripts/site.js
View file

@ -721,7 +721,7 @@ var Dashboard = {
item = items[i]; item = items[i];
if (item.divider) { if (item.divider) {
menuHtml += "<div class='sidebarDivider ui-bar-inherit'></div>"; menuHtml += "<div class='sidebarDivider'></div>";
} }
if (item.href) { if (item.href) {
@ -765,11 +765,31 @@ var Dashboard = {
html += '<div data-role="panel" id="dashboardPanel" class="dashboardPanel" data-position="left" data-display="overlay" data-position-fixed="true" data-theme="a">'; html += '<div data-role="panel" id="dashboardPanel" class="dashboardPanel" data-position="left" data-display="overlay" data-position-fixed="true" data-theme="a">';
html += '<p class="libraryPanelHeader" style="margin: 15px 0 15px 15px;"><a href="index.html" data-transition="none" class="imageLink"><img src="css/images/mblogoicon.png" /><span style="color:#333;">EMBY</span></a></p>'; html += '<p class="libraryPanelHeader" style="margin: 15px 0 15px 20px;"><a href="index.html" data-transition="none" class="imageLink"><img src="css/images/mblogoicon.png" /><span style="color:#333;">EMBY</span></a></p>';
html += '<div class="sidebarLinks">'; html += '<div class="sidebarLinks">';
html += menuHtml; html += menuHtml;
// sidebarLinks // sidebarLinks
html += '<div class="sidebarDivider"></div>';
html += '<div class="userMenuOptions">';
if (Dashboard.isConnectMode()) {
html += '<a class="sidebarLink" data-itemid="selectserver" href="selectserver.html"><span class="fa fa-globe sidebarLinkIcon"></span>';
html += '<span class="sidebarLinkText">';
html += Globalize.translate('ButtonSelectServer');
html += '</span>';
html += '</a>';
}
html += '<a class="sidebarLink" data-itemid="logout" href="#" onclick="Dashboard.logout();"><span class="fa fa-sign-out sidebarLinkIcon"></span>';
html += '<span class="sidebarLinkText">';
html += Globalize.translate('ButtonSignOut');
html += '</span>';
html += '</a>';
html += '</div>';
html += '</div>'; html += '</div>';
html += '</div>'; html += '</div>';

2
dashboard-ui/thirdparty/cordova/android/iap.js vendored
View file

@ -1,6 +1,6 @@
(function () { (function () {
var unlockId = "premiumunlock"; var unlockId = "com.mb.android.unlock";
var updatedProducts = []; var updatedProducts = [];
function updateProductInfo(id, owned) { function updateProductInfo(id, owned) {

42
dashboard-ui/thirdparty/cordova/registrationservices.js vendored
View file

@ -7,6 +7,15 @@
return platform.indexOf('android') != -1; return platform.indexOf('android') != -1;
} }
function getPremiumUnlockFeatureId() {
if (isAndroid()) {
return "com.mb.android.unlock";
}
return 'premiumunlock';
}
function validatePlayback(deferred) { function validatePlayback(deferred) {
// Don't require validation on android // Don't require validation on android
@ -17,37 +26,16 @@
validateFeature({ validateFeature({
id: 'premiumunlock' id: getPremiumUnlockFeatureId()
}, deferred); }, deferred);
} }
function validateLiveTV(deferred) { function validateLiveTV(deferred) {
// Don't require validation if not android
if (!isAndroid()) {
deferred.resolve();
return;
}
validateFeature({ validateFeature({
id: 'premiumunlock' id: getPremiumUnlockFeatureId()
}, deferred);
}
function validateSmb(deferred) {
// Don't require validation if not android
if (!isAndroid()) {
deferred.resolve();
return;
}
validateFeature({
id: 'premiumunlock'
}, deferred); }, deferred);
} }
@ -215,8 +203,10 @@
} }
}; };
var depends = isAndroid() ? 'thirdparty/cordova/android/iap' : 'thirdparty/cordova/iap'; if (isAndroid()) {
requirejs(['thirdparty/cordova/android/iap']);
requirejs([depends]); } else {
requirejs(['thirdparty/cordova/iap']);
}
})(); })();