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

update now playing bar

This commit is contained in:
Luke Pulverenti 2016-08-22 16:47:16 -04:00
parent 7dbc6ede62
commit 8ba393c549
13 changed files with 101 additions and 123 deletions

View file

@ -7,9 +7,9 @@
${HeaderCameraUpload}
</h1>
<br />
<p>${SelectCameraUploadServers}</p>
<br />
<div class="checkboxList uploadServerList">
</div>

View file

@ -20,7 +20,7 @@
});
}
function dockedTabs(options) {
function appFooter(options) {
var self = this;
@ -41,7 +41,7 @@
initHeadRoom(self, self.element);
}
dockedTabs.prototype.destroy = function () {
appFooter.prototype.destroy = function () {
var self = this;
if (self.headroom) {
@ -52,5 +52,5 @@
self.element = null;
};
return dockedTabs;
return appFooter;
});

View file

@ -56,7 +56,6 @@
bottom: 0;
left: 0;
right: 0;
top : 100%;
/* Above everything, except for the video player and popup overlays */
z-index: 1097;
color: #fff;
@ -65,8 +64,6 @@
/*box-shadow: 0 -2px 2px 0 rgba(0,0,0,.14),-1px 5px 1px rgba(0,0,0,.12);*/
will-change: transform;
contain: layout style;
height: 100%;
transform: translateY(-64px);
}
.hiddenNowPlayingBar .nowPlayingBar {

View file

@ -1,5 +1,7 @@
// TODO: This needs to be deprecated, but it's used heavily by plugins
$.fn.selectmenu = function () {
// No-op. This implementation only exists to prevent script errors
return this;
};
define(['jQuery'], function ($) {
// TODO: This needs to be deprecated, but it's used heavily by plugins
$.fn.selectmenu = function () {
// No-op. This implementation only exists to prevent script errors
return this;
};
});

View file

@ -1,4 +1,4 @@
<div id="myPreferencesMenuPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-contextname="${HeaderSettings}" data-require="scripts/mypreferencescommon,listViewStyle">
<div id="myPreferencesMenuPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-contextname="${HeaderSettings}">
<div data-role="content">
<div class="readOnlyContent" style="margin: 0 auto;">
@ -6,7 +6,7 @@
<div>
<a href="#" class="clearLink lnkDisplayPreferences">
<div class="listItem">
<button type="button" is="emby-button" class="fab mini autoSize blue listItemButton" item-icon><i class="md-icon">tv</i></button>
<i class="md-icon listItemIcon" style="background-color: #03a9f4;">tv</i>
<div class="listItemBody two-line">
<div>${ButtonDisplaySettings}</div>
<div class="secondary">${ButtonDisplaySettingsHelp}</div>
@ -16,7 +16,7 @@
<a href="#" class="clearLink lnkHomeScreenPreferences">
<div class="listItem">
<button type="button" is="emby-button" class="fab mini autoSize red listItemButton" item-icon><i class="md-icon">home</i></button>
<i class="md-icon listItemIcon" style="background-color: #e57373;">home</i>
<div class="listItemBody two-line">
<div>${ButtonHomeScreenSettings}</div>
<div class="secondary">${ButtonHomeScreenSettingsHelp}</div>
@ -26,7 +26,7 @@
<a href="#" class="clearLink lnkLanguagePreferences">
<div class="listItem">
<button type="button" is="emby-button" class="fab mini autoSize green listItemButton" item-icon><i class="md-icon">play_circle_filled</i></button>
<i class="md-icon listItemIcon" style="background-color: #81c784;">play_circle_filled</i>
<div class="listItemBody two-line">
<div>${ButtonPlaybackSettings}</div>
<div class="secondary">${ButtonPlaybackSettingsHelp}</div>
@ -36,7 +36,7 @@
<a href="#" class="clearLink lnkMyProfile">
<div class="listItem">
<button type="button" is="emby-button" class="fab mini autoSize orange listItemButton" item-icon><i class="md-icon">person</i></button>
<i class="md-icon listItemIcon" style="background-color: #ffd54f;">person</i>
<div class="listItemBody two-line">
<div>${ButtonProfile}</div>
<div class="secondary">${ButtonProfileHelp}</div>
@ -44,12 +44,20 @@
</div>
</a>
<a href="#" class="clearLink lnkCameraUpload hide">
<div class="listItem">
<i class="md-icon listItemIcon" style="background-color: #673AB7;">photo</i>
<div class="listItemBody">
<div>${TabCameraUpload}</div>
</div>
</div>
</a>
<a href="#" class="clearLink lnkSync hide">
<div class="listItem">
<button type="button" is="emby-button" class="fab mini autoSize listItemButton" style="background-color: #673AB7;" item-icon><i class="md-icon">sync</i></button>
<div class="listItemBody two-line">
<div>${ButtonSyncSettings}</div>
<div class="secondary">${ButtonSyncSettingsHelp}</div>
<i class="md-icon listItemIcon">file_download</i>
<div class="listItemBody">
<div>${HeaderOfflineSync}</div>
</div>
</div>
</a>
@ -60,15 +68,15 @@
<div>
<a href="selectserver.html" class="clearLink selectServer hide">
<div class="listItem">
<button type="button" is="emby-button" class="fab mini autoSize"><i class="md-icon">wifi</i></button>
<div class="listItemBody two-line">
<i class="md-icon listItemIcon">wifi</i>
<div class="listItemBody">
<div>${HeaderSelectServer}</div>
</div>
</div>
</a>
<div class="listItem btnLogout">
<button type="button" is="emby-button" class="fab mini autoSize"><i class="md-icon">lock</i></button>
<div class="listItemBody two-line">
<i class="md-icon listItemIcon" style="background-color:#444;">lock</i>
<div class="listItemBody">
<div>${ButtonSignOut}</div>
</div>
</div>
@ -81,8 +89,8 @@
<div>
<a href="dashboard.html" class="clearLink">
<div class="listItem">
<button type="button" is="emby-button" class="fab mini autoSize"><i class="md-icon">settings</i></button>
<div class="listItemBody two-line">
<i class="md-icon listItemIcon">settings</i>
<div class="listItemBody">
<div>${ButtonServerDashboard}</div>
</div>
</div>

View file

@ -4,7 +4,7 @@
<form class="userProfileSettingsForm" style="margin: 0 auto;">
<h1>
${HeaderSync}
${HeaderOfflineSync}
</h1>
<br />

View file

@ -1,4 +1,4 @@
define(['appSettings'], function (appSettings) {
define(['appSettings', 'emby-checkbox'], function (appSettings) {
function loadForm(page, user) {
@ -34,7 +34,7 @@
toast(Globalize.translate('SettingsSaved'));
});
if (cameraUploadServers.length || syncPath) {
if (cameraUploadServers.length) {
if (window.MainActivity) {
MainActivity.authorizeStorage();
}
@ -60,18 +60,6 @@
return false;
});
view.querySelector('#btnSelectSyncPath').addEventListener('click', function () {
require(['nativedirectorychooser'], function () {
NativeDirectoryChooser.chooseDirectory().then(function (path) {
if (path) {
view.querySelector('#txtSyncPath').value = path;
}
});
});
});
view.addEventListener('viewshow', function () {
var page = this;
@ -83,12 +71,6 @@
loadForm(page, user);
});
if (AppInfo.supportsSyncPathSetting) {
page.querySelector('.fldSyncPath').classList.remove('hide');
} else {
page.querySelector('.fldSyncPath').classList.add('hide');
}
});
};

View file

@ -1046,12 +1046,9 @@
setDrawerClass();
//require(['appfooter'], function (appfooter) {
// var footer = new appfooter({});
// require(['dockedtabs'], function (dockedtabs) {
// new dockedtabs({
// appFooter: footer
// });
//require(['appfooter-shared', 'dockedtabs'], function (footer, dockedtabs) {
// new dockedtabs({
// appFooter: footer
// });
//});
});

View file

@ -1,47 +1,53 @@
pageIdOn('pageinit', 'myPreferencesMenuPage', function () {
define(['apphost', 'listViewStyle'], function (appHost) {
var page = this;
return function (view, params) {
page.querySelector('.btnLogout').addEventListener('click', function () {
view.querySelector('.btnLogout').addEventListener('click', function () {
Dashboard.logout();
});
});
pageIdOn('pageshow', 'myPreferencesMenuPage', function () {
var page = this;
var userId = getParameterByName('userId') || Dashboard.getCurrentUserId();
page.querySelector('.lnkDisplayPreferences').setAttribute('href', 'mypreferencesdisplay.html?userId=' + userId);
page.querySelector('.lnkLanguagePreferences').setAttribute('href', 'mypreferenceslanguages.html?userId=' + userId);
page.querySelector('.lnkHomeScreenPreferences').setAttribute('href', 'mypreferenceshome.html?userId=' + userId);
page.querySelector('.lnkMyProfile').setAttribute('href', 'myprofile.html?userId=' + userId);
page.querySelector('.lnkSync').setAttribute('href', 'mysyncsettings.html?userId=' + userId);
if (Dashboard.capabilities().SupportsSync) {
page.querySelector('.lnkSync').classList.remove('hide');
} else {
page.querySelector('.lnkSync').classList.add('hide');
}
Dashboard.getCurrentUser().then(function (user) {
page.querySelector('.headerUser').innerHTML = user.Name;
if (user.Policy.IsAdministrator) {
page.querySelector('.adminSection').classList.remove('hide');
} else {
page.querySelector('.adminSection').classList.add('hide');
}
});
if (Dashboard.isConnectMode()) {
page.querySelector('.selectServer').classList.remove('hide');
} else {
page.querySelector('.selectServer').classList.add('hide');
}
Dashboard.logout();
});
view.addEventListener('viewshow', function () {
var page = this;
var userId = params.userId || Dashboard.getCurrentUserId();
page.querySelector('.lnkDisplayPreferences').setAttribute('href', 'mypreferencesdisplay.html?userId=' + userId);
page.querySelector('.lnkLanguagePreferences').setAttribute('href', 'mypreferenceslanguages.html?userId=' + userId);
page.querySelector('.lnkHomeScreenPreferences').setAttribute('href', 'mypreferenceshome.html?userId=' + userId);
page.querySelector('.lnkMyProfile').setAttribute('href', 'myprofile.html?userId=' + userId);
page.querySelector('.lnkSync').setAttribute('href', 'mysyncsettings.html?userId=' + userId);
page.querySelector('.lnkCameraUpload').setAttribute('href', 'camerauploadsettings.html?userId=' + userId);
if (appHost.supports('cameraupload')) {
page.querySelector('.lnkCameraUpload').classList.remove('hide');
} else {
page.querySelector('.lnkCameraUpload').classList.add('hide');
}
if (appHost.supports('sync')) {
page.querySelector('.lnkSync').classList.remove('hide');
} else {
page.querySelector('.lnkSync').classList.add('hide');
}
Dashboard.getCurrentUser().then(function (user) {
page.querySelector('.headerUser').innerHTML = user.Name;
if (user.Policy.IsAdministrator) {
page.querySelector('.adminSection').classList.remove('hide');
} else {
page.querySelector('.adminSection').classList.add('hide');
}
});
if (Dashboard.isConnectMode()) {
page.querySelector('.selectServer').classList.remove('hide');
} else {
page.querySelector('.selectServer').classList.add('hide');
}
});
};
});

View file

@ -1,4 +1,4 @@
define(['appSettings'], function (appSettings) {
define(['appSettings', 'apphost'], function (appSettings, appHost) {
function loadForm(page, user) {
@ -20,7 +20,7 @@
toast(Globalize.translate('SettingsSaved'));
});
if (cameraUploadServers.length || syncPath) {
if (syncPath) {
if (window.MainActivity) {
MainActivity.authorizeStorage();
}
@ -70,7 +70,7 @@
loadForm(page, user);
});
if (AppInfo.supportsSyncPathSetting) {
if (appHost.supports('customsyncpath')) {
page.querySelector('.fldSyncPath').classList.remove('hide');
} else {
page.querySelector('.fldSyncPath').classList.add('hide');

View file

@ -75,7 +75,6 @@
return html;
}
var translateY = '-64px';
function slideDown(elem) {
if (elem.classList.contains('hide')) {
@ -93,8 +92,8 @@
requestAnimationFrame(function () {
var keyframes = [
{ transform: 'translateY(' + translateY + ')', offset: 0 },
{ transform: 'none', offset: 1 }];
{ transform: 'none', offset: 0 },
{ transform: 'translateY(100%)', offset: 1 }];
var timing = { duration: 200, iterations: 1, fill: 'both', easing: 'ease-out' };
elem.animate(keyframes, timing).onfinish = onfinish;
});
@ -115,8 +114,8 @@
requestAnimationFrame(function () {
var keyframes = [
{ transform: 'none', offset: 0 },
{ transform: 'translateY(' + translateY + ')', offset: 1 }];
{ transform: 'translateY(100%)', offset: 0 },
{ transform: 'none', offset: 1 }];
var timing = { duration: 200, iterations: 1, fill: 'both', easing: 'ease-out' };
elem.animate(keyframes, timing);
});
@ -308,17 +307,18 @@
return new Promise(function (resolve, reject) {
require(['itemShortcuts', 'css!css/nowplayingbar.css', 'emby-slider'], function (itemShortcuts) {
require(['appfooter-shared', 'itemShortcuts', 'css!css/nowplayingbar.css', 'emby-slider'], function (appfooter, itemShortcuts) {
nowPlayingBarElement = document.querySelector('.nowPlayingBar');
var parentContainer = appfooter.element;
nowPlayingBarElement = parentContainer.querySelector('.nowPlayingBar');
if (nowPlayingBarElement) {
resolve(nowPlayingBarElement);
return;
}
document.body.insertAdjacentHTML('beforeend', getNowPlayingBarHtml());
nowPlayingBarElement = document.querySelector('.nowPlayingBar');
parentContainer.insertAdjacentHTML('beforeend', getNowPlayingBarHtml());
nowPlayingBarElement = parentContainer.querySelector('.nowPlayingBar');
if (browser.safari && browser.slow) {
// Not handled well here. The wrong elements receive events, bar doesn't update quickly enough, etc.

View file

@ -861,7 +861,7 @@ var Dashboard = {
if (enableVlcAudio) {
profile.DirectPlayProfiles.push({
Container: "aac,mp3,mpa,wav,wma,mp2,ogg,oga,webma,ape,opus",
Container: "aac,mp3,mpa,wav,wma,mp2,ogg,oga,webma,ape,m4a,opus,flac",
Type: 'Audio'
});
@ -987,8 +987,6 @@ var AppInfo = {};
AppInfo.enableBackButton = isIOS && (window.navigator.standalone || AppInfo.isNativeApp);
AppInfo.supportsSyncPathSetting = isCordova && isAndroid;
if (isCordova && isIOS) {
AppInfo.moreIcon = 'more-horiz';
} else {
@ -1206,6 +1204,11 @@ var AppInfo = {};
return hammer;
}
function createSharedAppFooter(appFooter) {
var footer = new appFooter({});
return footer;
}
function initRequire() {
var urlArgs = "v=" + (window.dashboardVersion || new Date().getDate());
@ -1503,6 +1506,7 @@ var AppInfo = {};
define("headroom-window", ['headroom'], createWindowHeadroom);
define("hammer-main", ['hammer'], createMainContentHammer);
define("appfooter-shared", ['appfooter'], createSharedAppFooter);
// mock this for now. not used in this app
define("playbackManager", [], function () {
@ -2330,7 +2334,8 @@ var AppInfo = {};
path: '/mypreferencesmenu.html',
dependencies: ['emby-button'],
autoFocus: false,
transition: 'fade'
transition: 'fade',
controller: 'scripts/mypreferencescommon'
});
defineRoute({
@ -2753,10 +2758,7 @@ var AppInfo = {};
postInitDependencies.push('cordova/ios/orientation');
postInitDependencies.push('cordova/ios/remotecontrols');
if (Dashboard.capabilities().SupportsSync) {
postInitDependencies.push('cordova/ios/backgroundfetch');
}
//postInitDependencies.push('cordova/ios/backgroundfetch');
}
} else if (browserInfo.chrome) {

View file

@ -6,10 +6,6 @@
background: #e1f5f3;
}
button.emby-button.fab.blue {
background: #03a9f4;
}
button.emby-button.menuButton {
color: #212121;
text-align: left;
@ -126,18 +122,6 @@ button.emby-button.notext {
padding-right: .25em !important;
}
.fab.green {
background-color: #81c784 !important;
}
.fab.orange {
background-color: #ffd54f !important;
}
.fab.red {
background-color: #e57373 !important;
}
.ui-body-b .paperListLabel, .ui-body-b .fieldDescription, .ui-body-b .selectLabelUnfocused, .ui-body-b .inputLabelUnfocused, .ui-body-b .textareaLabelUnfocused {
color: #ccc;
}