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

animate now playing bar

Browse source
This commit is contained in:
Luke Pulverenti 2015-11-30 00:33:29 -05:00
parent 4a80f8d99b
commit 7dd1eedf26
21 changed files with 3722 additions and 6204 deletions
Download patch file Download diff file Expand all files Collapse all files

93
dashboard-ui/scripts/actionsheet.js
View file

@ -6,18 +6,16 @@
// positionTo
// showCancel
// title
var id = 'dlg' + new Date().getTime();
var html = '';
var style = "";
var windowHeight = $(window).height();
var pos;
// If the window height is under a certain amount, don't bother trying to position
// based on an element.
if (options.positionTo && windowHeight >= 540) {
var pos = $(options.positionTo).offset();
pos = $(options.positionTo).offset();
pos.top += $(options.positionTo).innerHeight() / 2;
pos.left += $(options.positionTo).innerWidth() / 2;
@ -41,12 +39,8 @@
// Do some boundary checking
pos.top = Math.max(pos.top, 0);
pos.left = Math.max(pos.left, 0);
style += 'position:fixed;top:' + pos.top + 'px;left:' + pos.left + 'px';
}
html += '<paper-dialog id="' + id + '" with-backdrop style="' + style + '">';
if (options.title) {
html += '<h2>';
html += options.title;
@ -93,57 +87,62 @@
html += '</div>';
}
html += '</paper-dialog>';
var dlg = document.createElement('paper-dialog');
dlg.setAttribute('with-backdrop', 'with-backdrop');
dlg.innerHTML = html;
$(document.body).append(html);
if (pos) {
dlg.style.position = 'fixed';
dlg.style.left = pos.left + 'px';
dlg.style.top = pos.top + 'px';
}
document.body.appendChild(dlg);
// The animations flicker in IE and Firefox (probably wherever the polyfill is used)
if (browserInfo.chrome) {
dlg.animationConfig = {
// scale up
'entry': {
name: 'scale-up-animation',
node: dlg,
timing: { duration: 160, easing: 'ease-out' }
},
// fade out
'exit': {
name: 'fade-out-animation',
node: dlg,
timing: { duration: 200, easing: 'ease-in' }
}
};
}
setTimeout(function () {
var dlg = document.getElementById(id);
// The animations flicker in IE and Firefox (probably wherever the polyfill is used)
if (browserInfo.chrome) {
dlg.animationConfig = {
// scale up
'entry': {
name: 'scale-up-animation',
node: dlg,
timing: { duration: 160, easing: 'ease-out' }
},
// fade out
'exit': {
name: 'fade-out-animation',
node: dlg,
timing: { duration: 200, easing: 'ease-in' }
}
};
}
dlg.open();
}, 10);
// Has to be assigned a z-index after the call to .open()
$(dlg).on('iron-overlay-closed', function () {
$(this).remove();
});
// Has to be assigned a z-index after the call to .open()
dlg.addEventListener('iron-overlay-closed', function () {
dlg.parentNode.removeChild(dlg);
});
// Seeing an issue in some non-chrome browsers where this is requiring a double click
var eventName = browserInfo.chrome || browserInfo.safari ? 'click' : 'mousedown';
// Seeing an issue in some non-chrome browsers where this is requiring a double click
var eventName = browserInfo.chrome || browserInfo.safari ? 'click' : 'mousedown';
$('.actionSheetMenuItem', dlg).on(eventName, function () {
$('.actionSheetMenuItem', dlg).on(eventName, function () {
var selectedId = this.getAttribute('data-id');
var selectedId = this.getAttribute('data-id');
// Add a delay here to allow the click animation to finish, for nice effect
setTimeout(function () {
// Add a delay here to allow the click animation to finish, for nice effect
setTimeout(function () {
dlg.close();
dlg.close();
if (options.callback) {
options.callback(selectedId);
}
if (options.callback) {
options.callback(selectedId);
}
}, 100);
});
}, 100);
}, 100);
});
}
window.ActionSheetElement = {

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

@ -849,9 +849,6 @@
});
}
requirejs(["thirdparty/cast_sender"], function () {
initializeChromecast();
});
requirejs(["https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"], initializeChromecast);
})(window, window.chrome, console);

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

@ -2793,6 +2793,24 @@
dlg.entryAnimation = 'fade-in-animation';
dlg.exitAnimation = 'fade-out-animation';
// The animations flicker in IE and Firefox (probably wherever the polyfill is used)
if (browserInfo.chrome) {
dlg.animationConfig = {
// scale up
'entry': {
name: 'scale-up-animation',
node: dlg,
timing: { duration: 160, easing: 'ease-out' }
},
// fade out
'exit': {
name: 'fade-out-animation',
node: dlg,
timing: { duration: 200, easing: 'ease-in' }
}
};
}
var html = '';
// There seems to be a bug with this in safari causing it to immediately roll up to 0 height

30
dashboard-ui/scripts/librarylist.js
View file

@ -24,24 +24,28 @@
function slideDown(elem, iterations) {
var keyframes = [
{ height: '100%', offset: 0 },
{ height: '0', display: 'none', offset: 1 }];
var timing = { duration: 300, iterations: iterations, fill: 'forwards', easing: 'ease-out' };
elem.animate(keyframes, timing).onfinish = function() {
elem.style.display = 'none';
};
requestAnimationFrame(function () {
var keyframes = [
{ height: '100%', offset: 0 },
{ height: '0', display: 'none', offset: 1 }];
var timing = { duration: 300, iterations: iterations, fill: 'forwards', easing: 'ease-out' };
elem.animate(keyframes, timing).onfinish = function () {
elem.style.display = 'none';
};
});
}
function slideUp(elem, iterations) {
elem.style.display = 'block';
requestAnimationFrame(function () {
elem.style.display = 'block';
var keyframes = [
{ height: '0', offset: 0 },
{ height: '100%', offset: 1 }];
var timing = { duration: 300, iterations: iterations, fill: 'forwards', easing: 'ease-out' };
return elem.animate(keyframes, timing);
var keyframes = [
{ height: '0', offset: 0 },
{ height: '100%', offset: 1 }];
var timing = { duration: 300, iterations: iterations, fill: 'forwards', easing: 'ease-out' };
elem.animate(keyframes, timing);
});
}
function getOverlayHtml(item, currentUser, card, commands) {

6
dashboard-ui/scripts/mediaplayer-video.js
View file

@ -690,10 +690,8 @@
function ensureVideoPlayerElements() {
Dashboard.importCss('css/mediaplayer-video.css');
// TODO: remove dependency on this file
Dashboard.importCss('css/nowplayingbar.css');
// TODO: remove dependency on nowplayingbar
require(['css!/css/nowplayingbar.css', 'css!/css/mediaplayer-video.css']);
var html = '<div id="mediaPlayer" style="display: none;">';

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

@ -20,8 +20,7 @@
var html = '';
// add return false because on iOS clicking the bar often ends up clicking the content underneath.
html += '<div class="nowPlayingBar" style="display:none;">';
html += '<div class="nowPlayingBar hide">';
html += '<div class="nowPlayingBarPositionContainer">';
html += '<paper-slider pin step=".1" min="0" max="100" value="0" class="nowPlayingBarPositionSlider"></paper-slider>';
@ -71,6 +70,58 @@
return html;
}
var isSlidUp;
var height;
function getHeight(elem) {
if (!height) {
height = elem.offsetHeight;
}
return height + 'px';
return '80px';
}
function slideDown(elem) {
if (!isSlidUp) {
return;
}
isSlidUp = false;
requestAnimationFrame(function () {
var keyframes = [
{ height: getHeight(elem), offset: 0 },
{ height: '0', display: 'none', offset: 1 }];
var timing = { duration: 200, iterations: 1, fill: 'both', easing: 'ease-out' };
elem.animate(keyframes, timing).onfinish = function () {
elem.classList.add('hide');
};
});
}
function slideUp(elem) {
if (isSlidUp) {
return;
}
isSlidUp = true;
requestAnimationFrame(function () {
elem.classList.remove('hide');
var keyframes = [
{ height: '0', offset: 0 },
{ height: getHeight(elem), offset: 1 }];
var timing = { duration: 200, iterations: 1, fill: 'both', easing: 'ease-out' };
elem.animate(keyframes, timing);
});
}
function bindEvents(elem) {
currentTimeElement = $('.nowPlayingBarCurrentTime', elem);
@ -193,26 +244,36 @@
}, 300);
}
var nowPlayingBarElement;
function getNowPlayingBar() {
var elem = document.querySelector('.nowPlayingBar');
return new Promise(function (resolve, reject) {
if (elem) {
return elem;
}
if (nowPlayingBarElement) {
resolve(nowPlayingBarElement);
return;
}
Dashboard.importCss('css/nowplayingbar.css');
require(['css!/css/nowplayingbar.css'], function () {
elem = $(getNowPlayingBarHtml()).appendTo(document.body)[0];
nowPlayingBarElement = document.querySelector('.nowPlayingBar');
if ((browserInfo.safari || !AppInfo.isNativeApp) && browserInfo.mobile) {
// Not handled well here. The wrong elements receive events, bar doesn't update quickly enough, etc.
elem.classList.add('noMediaProgress');
}
if (nowPlayingBarElement) {
resolve(nowPlayingBarElement);
return;
}
bindEvents(elem);
nowPlayingBarElement = $(getNowPlayingBarHtml()).appendTo(document.body)[0];
return elem;
if ((browserInfo.safari || !AppInfo.isNativeApp) && browserInfo.mobile) {
// Not handled well here. The wrong elements receive events, bar doesn't update quickly enough, etc.
nowPlayingBarElement.classList.add('noMediaProgress');
}
bindEvents(nowPlayingBarElement);
resolve(nowPlayingBarElement);
});
});
}
function showButton(button) {
@ -227,13 +288,25 @@
function updatePlayerState(event, state) {
if (state.NowPlayingItem) {
showNowPlayingBar();
} else {
if (!state.NowPlayingItem) {
hideNowPlayingBar();
return;
}
if (nowPlayingBarElement) {
updatePlayerStateInternal(event, state);
return;
}
getNowPlayingBar().then(function () {
updatePlayerStateInternal(event, state);
});
}
function updatePlayerStateInternal(event, state) {
showNowPlayingBar();
if (event.type == 'positionchange') {
// Try to avoid hammering the document with changes
var now = new Date().getTime();
@ -246,10 +319,6 @@
lastPlayerState = state;
if (!muteButton) {
getNowPlayingBar();
}
var playerInfo = MediaController.getPlayerInfo();
var playState = state.PlayState || {};
@ -306,10 +375,6 @@
playerInfo = playerInfo || MediaController.getPlayerInfo();
if (!muteButton) {
getNowPlayingBar();
}
var playState = state.PlayState || {};
var supportedCommands = playerInfo.supportedCommands;
@ -478,9 +543,7 @@
function showNowPlayingBar() {
var nowPlayingBar = getNowPlayingBar();
$(nowPlayingBar).show();
getNowPlayingBar().then(slideUp);
}
function hideNowPlayingBar() {
@ -491,7 +554,7 @@
// Don't call getNowPlayingBar here because we don't want to end up creating it just to hide it
var elem = document.getElementsByClassName('nowPlayingBar')[0];
if (elem) {
elem.style.display = 'none';
slideDown(elem);
}
}
@ -538,7 +601,9 @@
var player = this;
player.getPlayerState().then(function (state) {
Promise.all([player.getPlayerState(), getNowPlayingBar()]).then(function (responses) {
var state = responses[0];
if (player.isDefaultPlayer && state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') {
return;

8
dashboard-ui/scripts/registrationservices.js
View file

@ -132,7 +132,7 @@
document.body.appendChild(dlg);
// Has to be assigned a z-index after the call to .open()
dlg.addEventListener('iron-overlay-closed', function(e) {
dlg.addEventListener('iron-overlay-closed', function (e) {
appStorage.setItem(supporterPlaybackKey, new Date().getTime());
dlg.parentNode.removeChild(dlg);
deferred.resolve();
@ -168,11 +168,15 @@
Dashboard.alert({
message: Globalize.translate('HeaderSyncRequiresSupporterMembership') + '<br/><p><a href="http://emby.media/premiere" target="_blank">' + Globalize.translate('ButtonLearnMore') + '</a></p>',
title: Globalize.translate('HeaderSync')
title: Globalize.translate('HeaderSync'),
callback: function () {
deferred.reject();
}
});
}, function () {
deferred.reject();
Dashboard.hideLoadingMsg();
Dashboard.alert({

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

@ -1906,6 +1906,11 @@ var AppInfo = {};
}
requirejs.config({
map: {
'*': {
'css': 'components/requirecss'
}
},
urlArgs: urlArgs,
paths: paths
@ -2004,6 +2009,10 @@ var AppInfo = {};
return {};
});
define("jqmwidget", ["thirdparty/jquerymobile-1.4.5/jqm.widget"], function () {
return {};
});
define("jqmslider", ["thirdparty/jquerymobile-1.4.5/jqm.slider"], function () {
Dashboard.importCss('thirdparty/jquerymobile-1.4.5/jqm.slider.css');
return {};
@ -2029,16 +2038,9 @@ var AppInfo = {};
return {};
});
define("jqmcheckbox", ["jqmicons", "thirdparty/jquerymobile-1.4.5/jqm.checkbox"], function () {
Dashboard.importCss('thirdparty/jquerymobile-1.4.5/jqm.checkbox.css');
return {};
});
define("jqmcheckbox", ["jqmicons", "thirdparty/jquerymobile-1.4.5/jqm.checkbox", 'css!thirdparty/jquerymobile-1.4.5/jqm.checkbox.css']);
define("jqmpanel", ["thirdparty/jquerymobile-1.4.5/jqm.panel"], function () {
Dashboard.importCss('thirdparty/jquerymobile-1.4.5/jqm.panel.css');
return {};
});
define("jqmpanel", ["thirdparty/jquerymobile-1.4.5/jqm.panel", 'css!thirdparty/jquerymobile-1.4.5/jqm.panel.css']);
define("hammer", ["bower_components/hammerjs/hammer.min"], function (Hammer) {
return Hammer;

105
dashboard-ui/scripts/sync.js
View file

@ -2,7 +2,7 @@
var currentDialogOptions;
function submitJob(panel, userId, syncOptions, form) {
function submitJob(dlg, userId, syncOptions, form) {
if (!userId) {
throw new Error('userId cannot be null');
@ -51,7 +51,7 @@
}).then(function () {
panel.panel('close');
PaperDialogHelper.close(dlg);
$(window.SyncManager).trigger('jobsubmit');
Dashboard.alert(Globalize.translate('MessageSyncJobCreated'));
});
@ -196,7 +196,7 @@
function showSyncMenu(options) {
requirejs(["scripts/registrationservices", "jqmcollapsible", "jqmpanel"], function () {
requirejs(["scripts/registrationservices"], function () {
RegistrationServices.validateFeature('sync').then(function () {
showSyncMenuInternal(options);
});
@ -205,64 +205,81 @@
function showSyncMenuInternal(options) {
var userId = Dashboard.getCurrentUserId();
require(['components/paperdialoghelper'], function () {
var dialogOptionsQuery = {
UserId: userId,
ItemIds: (options.items || []).map(function (i) {
return i.Id || i;
}).join(','),
var userId = Dashboard.getCurrentUserId();
ParentId: options.ParentId,
Category: options.Category
};
var dialogOptionsQuery = {
UserId: userId,
ItemIds: (options.items || []).map(function (i) {
return i.Id || i;
}).join(','),
ApiClient.getJSON(ApiClient.getUrl('Sync/Options', dialogOptionsQuery)).then(function (dialogOptions) {
ParentId: options.ParentId,
Category: options.Category
};
currentDialogOptions = dialogOptions;
ApiClient.getJSON(ApiClient.getUrl('Sync/Options', dialogOptionsQuery)).then(function (dialogOptions) {
var html = '<div data-role="panel" data-position="right" data-display="overlay" class="syncPanel" data-position-fixed="true" data-theme="a">';
currentDialogOptions = dialogOptions;
html += '<div>';
var dlg = PaperDialogHelper.createDialog({
size: 'small',
theme: 'a'
});
html += '<form class="formSubmitSyncRequest">';
var html = '';
html += '<h2 class="dialogHeader">';
html += '<paper-fab icon="arrow-back" mini class="btnCancel"></paper-fab>';
html += '</h2>';
html += '<div style="margin:1em 0 1.5em;">';
html += '<h1 style="margin: 0;display:inline-block;vertical-align:middle;">' + Globalize.translate('SyncMedia') + '</h1>';
html += '<div>';
html += '<a href="https://github.com/MediaBrowser/Wiki/wiki/Sync" target="_blank" class="clearLink" style="margin-top:0;display:inline-block;vertical-align:middle;margin-left:1em;"><paper-button raised class="secondary mini"><iron-icon icon="info"></iron-icon><span>' + Globalize.translate('ButtonHelp') + '</span></paper-button></a>';
html += '</div>';
html += '<form class="formSubmitSyncRequest" style="margin: auto;">';
html += '<div class="formFields"></div>';
html += '<div style="margin:1em 0 1.5em;">';
html += '<h1 style="margin: 0;display:inline-block;vertical-align:middle;">' + Globalize.translate('SyncMedia') + '</h1>';
html += '<p>';
html += '<button type="submit" data-role="none" class="clearButton"><paper-button raised class="submit block"><iron-icon icon="sync"></iron-icon><span>' + Globalize.translate('ButtonSync') + '</span></paper-button></button>';
html += '</p>';
html += '<a href="https://github.com/MediaBrowser/Wiki/wiki/Sync" target="_blank" class="clearLink" style="margin-top:0;display:inline-block;vertical-align:middle;margin-left:1em;"><paper-button raised class="secondary mini"><iron-icon icon="info"></iron-icon><span>' + Globalize.translate('ButtonHelp') + '</span></paper-button></a>';
html += '</div>';
html += '</form>';
html += '</div>';
html += '</div>';
html += '<div class="formFields"></div>';
$(document.body).append(html);
html += '<p>';
html += '<button type="submit" data-role="none" class="clearButton"><paper-button raised class="submit block"><iron-icon icon="sync"></iron-icon><span>' + Globalize.translate('ButtonSync') + '</span></paper-button></button>';
html += '</p>';
var elem = $('.syncPanel').panel({}).trigger('create').panel("open").on("panelclose", function () {
$(this).off("panelclose").remove();
html += '</form>';
html += '</div>';
dlg.innerHTML = html;
document.body.appendChild(dlg);
// Has to be assigned a z-index after the call to .open()
dlg.addEventListener('iron-overlay-closed', function (e) {
dlg.parentNode.removeChild(dlg);
});
PaperDialogHelper.openWithHash(dlg, 'syncjob');
$('form', dlg).on('submit', function () {
submitJob(dlg, userId, options, this);
return false;
});
$('.btnCancel').on('click', function () {
PaperDialogHelper.close(dlg);
});
renderForm({
elem: $('.formFields', dlg),
dialogOptions: dialogOptions,
dialogOptionsFn: getTargetDialogOptionsFn(dialogOptionsQuery)
});
});
$('form', elem).on('submit', function () {
submitJob(elem, userId, options, this);
return false;
});
renderForm({
elem: $('.formFields', elem),
dialogOptions: dialogOptions,
dialogOptionsFn: getTargetDialogOptionsFn(dialogOptionsQuery)
});
});
require(['jqmicons']);
}
function getTargetDialogOptionsFn(query) {