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

update now playing bar

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

2
dashboard-ui/camerauploadsettings.html
View file

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

6
dashboard-ui/components/appfooter/appfooter.js
View file

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

3
dashboard-ui/css/nowplayingbar.css
View file

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

8
dashboard-ui/legacy/selectmenu.js
View file

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

38
dashboard-ui/mypreferencesmenu.html
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 data-role="content">
<div class="readOnlyContent" style="margin: 0 auto;"> <div class="readOnlyContent" style="margin: 0 auto;">
@ -6,7 +6,7 @@
<div> <div>
<a href="#" class="clearLink lnkDisplayPreferences"> <a href="#" class="clearLink lnkDisplayPreferences">
<div class="listItem"> <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 class="listItemBody two-line">
<div>${ButtonDisplaySettings}</div> <div>${ButtonDisplaySettings}</div>
<div class="secondary">${ButtonDisplaySettingsHelp}</div> <div class="secondary">${ButtonDisplaySettingsHelp}</div>
@ -16,7 +16,7 @@
<a href="#" class="clearLink lnkHomeScreenPreferences"> <a href="#" class="clearLink lnkHomeScreenPreferences">
<div class="listItem"> <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 class="listItemBody two-line">
<div>${ButtonHomeScreenSettings}</div> <div>${ButtonHomeScreenSettings}</div>
<div class="secondary">${ButtonHomeScreenSettingsHelp}</div> <div class="secondary">${ButtonHomeScreenSettingsHelp}</div>
@ -26,7 +26,7 @@
<a href="#" class="clearLink lnkLanguagePreferences"> <a href="#" class="clearLink lnkLanguagePreferences">
<div class="listItem"> <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 class="listItemBody two-line">
<div>${ButtonPlaybackSettings}</div> <div>${ButtonPlaybackSettings}</div>
<div class="secondary">${ButtonPlaybackSettingsHelp}</div> <div class="secondary">${ButtonPlaybackSettingsHelp}</div>
@ -36,7 +36,7 @@
<a href="#" class="clearLink lnkMyProfile"> <a href="#" class="clearLink lnkMyProfile">
<div class="listItem"> <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 class="listItemBody two-line">
<div>${ButtonProfile}</div> <div>${ButtonProfile}</div>
<div class="secondary">${ButtonProfileHelp}</div> <div class="secondary">${ButtonProfileHelp}</div>
@ -44,12 +44,20 @@
</div> </div>
</a> </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"> <a href="#" class="clearLink lnkSync hide">
<div class="listItem"> <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> <i class="md-icon listItemIcon">file_download</i>
<div class="listItemBody two-line"> <div class="listItemBody">
<div>${ButtonSyncSettings}</div> <div>${HeaderOfflineSync}</div>
<div class="secondary">${ButtonSyncSettingsHelp}</div>
</div> </div>
</div> </div>
</a> </a>
@ -60,15 +68,15 @@
<div> <div>
<a href="selectserver.html" class="clearLink selectServer hide"> <a href="selectserver.html" class="clearLink selectServer hide">
<div class="listItem"> <div class="listItem">
<button type="button" is="emby-button" class="fab mini autoSize"><i class="md-icon">wifi</i></button> <i class="md-icon listItemIcon">wifi</i>
<div class="listItemBody two-line"> <div class="listItemBody">
<div>${HeaderSelectServer}</div> <div>${HeaderSelectServer}</div>
</div> </div>
</div> </div>
</a> </a>
<div class="listItem btnLogout"> <div class="listItem btnLogout">
<button type="button" is="emby-button" class="fab mini autoSize"><i class="md-icon">lock</i></button> <i class="md-icon listItemIcon" style="background-color:#444;">lock</i>
<div class="listItemBody two-line"> <div class="listItemBody">
<div>${ButtonSignOut}</div> <div>${ButtonSignOut}</div>
</div> </div>
</div> </div>
@ -81,8 +89,8 @@
<div> <div>
<a href="dashboard.html" class="clearLink"> <a href="dashboard.html" class="clearLink">
<div class="listItem"> <div class="listItem">
<button type="button" is="emby-button" class="fab mini autoSize"><i class="md-icon">settings</i></button> <i class="md-icon listItemIcon">settings</i>
<div class="listItemBody two-line"> <div class="listItemBody">
<div>${ButtonServerDashboard}</div> <div>${ButtonServerDashboard}</div>
</div> </div>
</div> </div>

2
dashboard-ui/mysyncsettings.html
View file

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

22
dashboard-ui/scripts/camerauploadsettings.js
View file

@ -1,4 +1,4 @@
define(['appSettings'], function (appSettings) { define(['appSettings', 'emby-checkbox'], function (appSettings) {
function loadForm(page, user) { function loadForm(page, user) {
@ -34,7 +34,7 @@
toast(Globalize.translate('SettingsSaved')); toast(Globalize.translate('SettingsSaved'));
}); });
if (cameraUploadServers.length || syncPath) { if (cameraUploadServers.length) {
if (window.MainActivity) { if (window.MainActivity) {
MainActivity.authorizeStorage(); MainActivity.authorizeStorage();
} }
@ -60,18 +60,6 @@
return false; 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 () { view.addEventListener('viewshow', function () {
var page = this; var page = this;
@ -83,12 +71,6 @@
loadForm(page, user); loadForm(page, user);
}); });
if (AppInfo.supportsSyncPathSetting) {
page.querySelector('.fldSyncPath').classList.remove('hide');
} else {
page.querySelector('.fldSyncPath').classList.add('hide');
}
}); });
}; };

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

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

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

@ -1,27 +1,32 @@
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(); Dashboard.logout();
}); });
}); view.addEventListener('viewshow', function () {
pageIdOn('pageshow', 'myPreferencesMenuPage', function () {
var page = this; var page = this;
var userId = getParameterByName('userId') || Dashboard.getCurrentUserId(); var userId = params.userId || Dashboard.getCurrentUserId();
page.querySelector('.lnkDisplayPreferences').setAttribute('href', 'mypreferencesdisplay.html?userId=' + userId); page.querySelector('.lnkDisplayPreferences').setAttribute('href', 'mypreferencesdisplay.html?userId=' + userId);
page.querySelector('.lnkLanguagePreferences').setAttribute('href', 'mypreferenceslanguages.html?userId=' + userId); page.querySelector('.lnkLanguagePreferences').setAttribute('href', 'mypreferenceslanguages.html?userId=' + userId);
page.querySelector('.lnkHomeScreenPreferences').setAttribute('href', 'mypreferenceshome.html?userId=' + userId); page.querySelector('.lnkHomeScreenPreferences').setAttribute('href', 'mypreferenceshome.html?userId=' + userId);
page.querySelector('.lnkMyProfile').setAttribute('href', 'myprofile.html?userId=' + userId); page.querySelector('.lnkMyProfile').setAttribute('href', 'myprofile.html?userId=' + userId);
page.querySelector('.lnkSync').setAttribute('href', 'mysyncsettings.html?userId=' + userId); page.querySelector('.lnkSync').setAttribute('href', 'mysyncsettings.html?userId=' + userId);
page.querySelector('.lnkCameraUpload').setAttribute('href', 'camerauploadsettings.html?userId=' + userId);
if (Dashboard.capabilities().SupportsSync) { 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'); page.querySelector('.lnkSync').classList.remove('hide');
} else { } else {
page.querySelector('.lnkSync').classList.add('hide'); page.querySelector('.lnkSync').classList.add('hide');
@ -43,5 +48,6 @@ pageIdOn('pageshow', 'myPreferencesMenuPage', function () {
} else { } else {
page.querySelector('.selectServer').classList.add('hide'); page.querySelector('.selectServer').classList.add('hide');
} }
});
};
}); });

6
dashboard-ui/scripts/mysyncsettings.js
View file

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

18
dashboard-ui/scripts/nowplayingbar.js
View file

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

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

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

16
dashboard-ui/thirdparty/paper-button-style.css vendored
View file

@ -6,10 +6,6 @@
background: #e1f5f3; background: #e1f5f3;
} }
button.emby-button.fab.blue {
background: #03a9f4;
}
button.emby-button.menuButton { button.emby-button.menuButton {
color: #212121; color: #212121;
text-align: left; text-align: left;
@ -126,18 +122,6 @@ button.emby-button.notext {
padding-right: .25em !important; 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 { .ui-body-b .paperListLabel, .ui-body-b .fieldDescription, .ui-body-b .selectLabelUnfocused, .ui-body-b .inputLabelUnfocused, .ui-body-b .textareaLabelUnfocused {
color: #ccc; color: #ccc;
} }