mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update now playing page
This commit is contained in:
Luke Pulverenti
parent
878eac1535
commit
19f8c11c38
100 changed files with 45182 additions and 417 deletions
|
|
@ -548,7 +548,7 @@
|
|||
$('.btnCast').removeClass('btnActiveCast').each(function () {
|
||||
this.icon = 'cast';
|
||||
});
|
||||
$('.headerSelectedPlayer').html('');
|
||||
$('.nowPlayingSelectedPlayer').html('');
|
||||
|
||||
} else {
|
||||
|
||||
|
|
@ -556,7 +556,7 @@
|
|||
this.icon = 'cast-connected';
|
||||
});
|
||||
|
||||
$('.headerSelectedPlayer').html((info.deviceName || info.name));
|
||||
$('.nowPlayingSelectedPlayer').html((info.deviceName || info.name));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -72,6 +72,186 @@
|
|||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
function getTargetsHtml(targets) {
|
||||
|
||||
var playerInfo = MediaController.getPlayerInfo();
|
||||
|
||||
var html = '';
|
||||
html += '<form>';
|
||||
|
||||
html += '<h3>' + Globalize.translate('HeaderSelectPlayer') + '</h3>';
|
||||
html += '<fieldset data-role="controlgroup" data-mini="true">';
|
||||
|
||||
var checkedHtml;
|
||||
|
||||
for (var i = 0, length = targets.length; i < length; i++) {
|
||||
|
||||
var target = targets[i];
|
||||
|
||||
var id = 'radioPlayerTarget' + i;
|
||||
|
||||
var isChecked = target.id == playerInfo.id;
|
||||
checkedHtml = isChecked ? ' checked="checked"' : '';
|
||||
|
||||
var mirror = (!target.isLocalPlayer && target.supportedCommands.indexOf('DisplayContent') != -1) ? 'true' : 'false';
|
||||
|
||||
html += '<input type="radio" class="radioSelectPlayerTarget" name="radioSelectPlayerTarget" data-mirror="' + mirror + '" data-commands="' + target.supportedCommands.join(',') + '" data-mediatypes="' + target.playableMediaTypes.join(',') + '" data-playername="' + target.playerName + '" data-targetid="' + target.id + '" data-targetname="' + target.name + '" data-devicename="' + (target.deviceName || '') + '" id="' + id + '" value="' + target.id + '"' + checkedHtml + '>';
|
||||
html += '<label for="' + id + '" style="font-weight:normal;">' + target.name;
|
||||
|
||||
if (target.appName && target.appName != target.name) {
|
||||
html += '<br/><span>' + target.appName + '</span>';
|
||||
}
|
||||
|
||||
html += '</label>';
|
||||
}
|
||||
|
||||
html += '</fieldset>';
|
||||
|
||||
html += '<p class="fieldDescription">' + Globalize.translate('LabelAllPlaysSentToPlayer') + '</p>';
|
||||
|
||||
checkedHtml = isMirrorModeEnabled() ? ' checked="checked"' : '';
|
||||
|
||||
html += '<div style="margin-top:1.5em;" class="fldMirrorMode"><label for="chkEnableMirrorMode">Enable display mirroring</label><input type="checkbox" class="chkEnableMirrorMode" id="chkEnableMirrorMode" data-mini="true"' + checkedHtml + ' /></div>';
|
||||
|
||||
html += '</form>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function showPlayerSelection() {
|
||||
|
||||
var promise = MediaController.getTargets();
|
||||
|
||||
var html = '<div data-role="panel" data-position="right" data-display="overlay" data-position-fixed="true" id="playerSelectionPanel" data-theme="a">';
|
||||
|
||||
html += '<div class="players"></div>';
|
||||
|
||||
html += '<br/>';
|
||||
html += '<p><a href="nowplaying.html" class="clearLink"><paper-button raised class="block"><iron-icon icon="tablet-android"></iron-icon><span>' + Globalize.translate('ButtonRemoteControl') + '</span></paper-button></a></p>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
$(document.body).append(html);
|
||||
|
||||
require(['jqmicons']);
|
||||
|
||||
var elem = $('#playerSelectionPanel').panel({}).trigger('create').panel("open").on("panelclose", function () {
|
||||
|
||||
$(this).off("panelclose").remove();
|
||||
});
|
||||
|
||||
promise.done(function (targets) {
|
||||
|
||||
$('.players', elem).html(getTargetsHtml(targets)).trigger('create');
|
||||
|
||||
$('.chkEnableMirrorMode', elem).on('change', function () {
|
||||
setMirrorModeEnabled(this.checked);
|
||||
|
||||
if (this.checked && currentDisplayInfo) {
|
||||
|
||||
mirrorItem(currentDisplayInfo);
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
$('.radioSelectPlayerTarget', elem).off('change').on('change', function () {
|
||||
|
||||
var supportsMirror = this.getAttribute('data-mirror') == 'true';
|
||||
|
||||
if (supportsMirror) {
|
||||
$('.fldMirrorMode', elem).show();
|
||||
} else {
|
||||
$('.fldMirrorMode', elem).hide();
|
||||
}
|
||||
|
||||
var playerName = this.getAttribute('data-playername');
|
||||
var targetId = this.getAttribute('data-targetid');
|
||||
var targetName = this.getAttribute('data-targetname');
|
||||
var deviceName = this.getAttribute('data-deviceName');
|
||||
var playableMediaTypes = this.getAttribute('data-mediatypes').split(',');
|
||||
var supportedCommands = this.getAttribute('data-commands').split(',');
|
||||
|
||||
MediaController.trySetActivePlayer(playerName, {
|
||||
id: targetId,
|
||||
name: targetName,
|
||||
playableMediaTypes: playableMediaTypes,
|
||||
supportedCommands: supportedCommands,
|
||||
deviceName: deviceName
|
||||
|
||||
});
|
||||
|
||||
if (currentDisplayInfo) {
|
||||
|
||||
mirrorIfEnabled(currentDisplayInfo);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
if ($('.radioSelectPlayerTarget:checked', elem).attr('data-mirror') == 'true') {
|
||||
$('.fldMirrorMode', elem).show();
|
||||
} else {
|
||||
$('.fldMirrorMode', elem).hide();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function bindKeys(controller) {
|
||||
|
||||
var self = this;
|
||||
var keyResult = {};
|
||||
|
||||
self.keyBinding = function (e) {
|
||||
|
||||
if (bypass()) return;
|
||||
|
||||
console.log("keyCode", e.keyCode);
|
||||
|
||||
if (keyResult[e.keyCode]) {
|
||||
e.preventDefault();
|
||||
keyResult[e.keyCode](e);
|
||||
}
|
||||
};
|
||||
|
||||
self.keyPrevent = function (e) {
|
||||
|
||||
if (bypass()) return;
|
||||
|
||||
var codes = [32, 38, 40, 37, 39, 81, 77, 65, 84, 83, 70];
|
||||
|
||||
if (codes.indexOf(e.keyCode) != -1) {
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
keyResult[32] = function () { // spacebar
|
||||
|
||||
var player = controller.getCurrentPlayer();
|
||||
|
||||
player.getPlayerState().done(function (result) {
|
||||
|
||||
var state = result;
|
||||
|
||||
if (state.NowPlayingItem && state.PlayState) {
|
||||
if (state.PlayState.IsPaused) {
|
||||
player.unpause();
|
||||
} else {
|
||||
player.pause();
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var bypass = function () {
|
||||
// Get active elem to see what type it is
|
||||
var active = document.activeElement;
|
||||
var type = active.type || active.tagName.toLowerCase();
|
||||
return (type === "text" || type === "select" || type === "textarea" || type == "password");
|
||||
};
|
||||
}
|
||||
|
||||
function mediaController() {
|
||||
|
||||
var self = this;
|
||||
|
|
@ -614,6 +794,8 @@
|
|||
|
||||
return false;
|
||||
};
|
||||
|
||||
self.showPlayerSelection = showPlayerSelection;
|
||||
}
|
||||
|
||||
window.MediaController = new mediaController();
|
||||
|
|
@ -691,189 +873,11 @@
|
|||
});
|
||||
});
|
||||
|
||||
function getTargetsHtml(targets) {
|
||||
|
||||
var playerInfo = MediaController.getPlayerInfo();
|
||||
|
||||
var html = '';
|
||||
html += '<form>';
|
||||
|
||||
html += '<h3>' + Globalize.translate('HeaderSelectPlayer') + '</h3>';
|
||||
html += '<fieldset data-role="controlgroup" data-mini="true">';
|
||||
|
||||
var checkedHtml;
|
||||
|
||||
for (var i = 0, length = targets.length; i < length; i++) {
|
||||
|
||||
var target = targets[i];
|
||||
|
||||
var id = 'radioPlayerTarget' + i;
|
||||
|
||||
var isChecked = target.id == playerInfo.id;
|
||||
checkedHtml = isChecked ? ' checked="checked"' : '';
|
||||
|
||||
var mirror = (!target.isLocalPlayer && target.supportedCommands.indexOf('DisplayContent') != -1) ? 'true' : 'false';
|
||||
|
||||
html += '<input type="radio" class="radioSelectPlayerTarget" name="radioSelectPlayerTarget" data-mirror="' + mirror + '" data-commands="' + target.supportedCommands.join(',') + '" data-mediatypes="' + target.playableMediaTypes.join(',') + '" data-playername="' + target.playerName + '" data-targetid="' + target.id + '" data-targetname="' + target.name + '" data-devicename="' + (target.deviceName || '') + '" id="' + id + '" value="' + target.id + '"' + checkedHtml + '>';
|
||||
html += '<label for="' + id + '" style="font-weight:normal;">' + target.name;
|
||||
|
||||
if (target.appName && target.appName != target.name) {
|
||||
html += '<br/><span>' + target.appName + '</span>';
|
||||
}
|
||||
|
||||
html += '</label>';
|
||||
}
|
||||
|
||||
html += '</fieldset>';
|
||||
|
||||
html += '<p class="fieldDescription">' + Globalize.translate('LabelAllPlaysSentToPlayer') + '</p>';
|
||||
|
||||
checkedHtml = isMirrorModeEnabled() ? ' checked="checked"' : '';
|
||||
|
||||
html += '<div style="margin-top:1.5em;" class="fldMirrorMode"><label for="chkEnableMirrorMode">Enable display mirroring</label><input type="checkbox" class="chkEnableMirrorMode" id="chkEnableMirrorMode" data-mini="true"' + checkedHtml + ' /></div>';
|
||||
|
||||
html += '</form>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function showPlayerSelection(page) {
|
||||
|
||||
var promise = MediaController.getTargets();
|
||||
|
||||
var html = '<div data-role="panel" data-position="right" data-display="overlay" data-position-fixed="true" id="playerSelectionPanel" data-theme="a">';
|
||||
|
||||
html += '<div class="players"></div>';
|
||||
|
||||
html += '<br/>';
|
||||
html += '<p><a href="nowplaying.html" class="clearLink"><paper-button raised class="block"><iron-icon icon="tablet-android"></iron-icon><span>' + Globalize.translate('ButtonRemoteControl') + '</span></paper-button></a></p>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
$(document.body).append(html);
|
||||
|
||||
require(['jqmicons']);
|
||||
|
||||
var elem = $('#playerSelectionPanel').panel({}).trigger('create').panel("open").on("panelclose", function () {
|
||||
|
||||
$(this).off("panelclose").remove();
|
||||
});
|
||||
|
||||
promise.done(function (targets) {
|
||||
|
||||
$('.players', elem).html(getTargetsHtml(targets)).trigger('create');
|
||||
|
||||
$('.chkEnableMirrorMode', elem).on('change', function () {
|
||||
setMirrorModeEnabled(this.checked);
|
||||
|
||||
if (this.checked && currentDisplayInfo) {
|
||||
|
||||
mirrorItem(currentDisplayInfo);
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
$('.radioSelectPlayerTarget', elem).off('change').on('change', function () {
|
||||
|
||||
var supportsMirror = this.getAttribute('data-mirror') == 'true';
|
||||
|
||||
if (supportsMirror) {
|
||||
$('.fldMirrorMode', elem).show();
|
||||
} else {
|
||||
$('.fldMirrorMode', elem).hide();
|
||||
}
|
||||
|
||||
var playerName = this.getAttribute('data-playername');
|
||||
var targetId = this.getAttribute('data-targetid');
|
||||
var targetName = this.getAttribute('data-targetname');
|
||||
var deviceName = this.getAttribute('data-deviceName');
|
||||
var playableMediaTypes = this.getAttribute('data-mediatypes').split(',');
|
||||
var supportedCommands = this.getAttribute('data-commands').split(',');
|
||||
|
||||
MediaController.trySetActivePlayer(playerName, {
|
||||
id: targetId,
|
||||
name: targetName,
|
||||
playableMediaTypes: playableMediaTypes,
|
||||
supportedCommands: supportedCommands,
|
||||
deviceName: deviceName
|
||||
|
||||
});
|
||||
|
||||
if (currentDisplayInfo) {
|
||||
|
||||
mirrorIfEnabled(currentDisplayInfo);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
if ($('.radioSelectPlayerTarget:checked', elem).attr('data-mirror') == 'true') {
|
||||
$('.fldMirrorMode', elem).show();
|
||||
} else {
|
||||
$('.fldMirrorMode', elem).hide();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function bindKeys(controller) {
|
||||
|
||||
var self = this;
|
||||
var keyResult = {};
|
||||
|
||||
self.keyBinding = function (e) {
|
||||
|
||||
if (bypass()) return;
|
||||
|
||||
console.log("keyCode", e.keyCode);
|
||||
|
||||
if (keyResult[e.keyCode]) {
|
||||
e.preventDefault();
|
||||
keyResult[e.keyCode](e);
|
||||
}
|
||||
};
|
||||
|
||||
self.keyPrevent = function (e) {
|
||||
|
||||
if (bypass()) return;
|
||||
|
||||
var codes = [32, 38, 40, 37, 39, 81, 77, 65, 84, 83, 70];
|
||||
|
||||
if (codes.indexOf(e.keyCode) != -1) {
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
keyResult[32] = function () { // spacebar
|
||||
|
||||
var player = controller.getCurrentPlayer();
|
||||
|
||||
player.getPlayerState().done(function (result) {
|
||||
|
||||
var state = result;
|
||||
|
||||
if (state.NowPlayingItem && state.PlayState) {
|
||||
if (state.PlayState.IsPaused) {
|
||||
player.unpause();
|
||||
} else {
|
||||
player.pause();
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var bypass = function () {
|
||||
// Get active elem to see what type it is
|
||||
var active = document.activeElement;
|
||||
var type = active.type || active.tagName.toLowerCase();
|
||||
return (type === "text" || type === "select" || type === "textarea" || type == "password");
|
||||
};
|
||||
}
|
||||
|
||||
$(document).on('headercreated', function () {
|
||||
|
||||
$('.btnCast').off('.mediacontroller').on('click.mediacontroller', function () {
|
||||
|
||||
showPlayerSelection($.mobile.activePage);
|
||||
showPlayerSelection();
|
||||
});
|
||||
|
||||
}).on('pagebeforeshow', ".page", function () {
|
||||
|
|
@ -884,8 +888,6 @@
|
|||
|
||||
}).on('displayingitem', ".libraryPage", function (e, info) {
|
||||
|
||||
var page = this;
|
||||
|
||||
currentDisplayInfo = info;
|
||||
|
||||
mirrorIfEnabled(info);
|
||||
|
|
|
|||
|
|
@ -563,7 +563,7 @@
|
|||
idleState = true;
|
||||
$('.hiddenOnIdle').addClass("inactive");
|
||||
$('#videoPlayer').addClass('idlePlayer');
|
||||
}, 4000);
|
||||
}, 3500);
|
||||
}
|
||||
|
||||
function updateVolumeButtons(vol) {
|
||||
|
|
|
|||
|
|
@ -715,6 +715,27 @@
|
|||
return null;
|
||||
};
|
||||
|
||||
function updateCastIcon() {
|
||||
|
||||
var info = MediaController.getPlayerInfo();
|
||||
|
||||
if (info.isLocalPlayer) {
|
||||
|
||||
$('.nowPlayingCastIcon').each(function () {
|
||||
this.icon = 'cast';
|
||||
});
|
||||
$('.headerSelectedPlayer').html('');
|
||||
|
||||
} else {
|
||||
|
||||
$('.nowPlayingCastIcon').each(function () {
|
||||
this.icon = 'cast-connected';
|
||||
});
|
||||
|
||||
$('.headerSelectedPlayer').html((info.deviceName || info.name));
|
||||
}
|
||||
}
|
||||
|
||||
$(document).on('pageinitdepends', "#nowPlayingPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
|
@ -724,20 +745,44 @@
|
|||
$('.sendMessageForm').off('submit', NowPlayingPage.onMessageSubmit).on('submit', NowPlayingPage.onMessageSubmit);
|
||||
$('.typeTextForm').off('submit', NowPlayingPage.onSendStringSubmit).on('submit', NowPlayingPage.onSendStringSubmit);
|
||||
|
||||
$('iron-pages,neon-animatable', this).trigger('create');
|
||||
|
||||
$(page).on('swipeleft', function () {
|
||||
|
||||
var pages = this.querySelectorAll('neon-animated-pages')[0];
|
||||
|
||||
var selected = parseInt(pages.selected || '0');
|
||||
if (selected < 2) {
|
||||
pages.entryAnimation = 'slide-from-right-animation';
|
||||
pages.exitAnimation = 'slide-left-animation';
|
||||
pages.selectNext();
|
||||
}
|
||||
});
|
||||
|
||||
$(page).on('swiperight', function () {
|
||||
|
||||
var pages = this.querySelectorAll('neon-animated-pages')[0];
|
||||
|
||||
var selected = parseInt(pages.selected || '0');
|
||||
if (selected > 0) {
|
||||
pages.entryAnimation = 'slide-from-left-animation';
|
||||
pages.exitAnimation = 'slide-right-animation';
|
||||
pages.selectPrevious();
|
||||
}
|
||||
});
|
||||
|
||||
$(MediaController).on('playerchange', function () {
|
||||
updateCastIcon(page);
|
||||
});
|
||||
|
||||
}).on('pagebeforeshowready', "#nowPlayingPage", function () {
|
||||
|
||||
$(document.body).addClass('hiddenViewMenuBar');
|
||||
var page = this;
|
||||
|
||||
currentImgUrl = null;
|
||||
|
||||
var tab = getParameterByName('tab');
|
||||
if (tab) {
|
||||
$('.tabButton' + tab, page).trigger('click');
|
||||
} else {
|
||||
$('.tabButton:first', page).trigger('click');
|
||||
}
|
||||
|
||||
$(function () {
|
||||
Dashboard.ready(function () {
|
||||
|
||||
$(MediaController).on('playerchange.nowplayingpage', function () {
|
||||
|
||||
|
|
@ -751,6 +796,11 @@
|
|||
showIntro();
|
||||
loadPlaylist(page);
|
||||
|
||||
var tab = getParameterByName('tab');
|
||||
this.querySelectorAll('#scope')[0].selected = tab == 'Playlist' ? 2 : 0;
|
||||
|
||||
updateCastIcon(page);
|
||||
|
||||
}).on('pagebeforehide', "#nowPlayingPage", function () {
|
||||
|
||||
releaseCurrentPlayer();
|
||||
|
|
@ -758,6 +808,7 @@
|
|||
$(MediaController).off('playerchange.nowplayingpage');
|
||||
|
||||
lastPlayerState = null;
|
||||
$(document.body).removeClass('hiddenViewMenuBar');
|
||||
});
|
||||
|
||||
window.NowPlayingPage = {
|
||||
|
|
|
|||
|
|
@ -602,7 +602,7 @@ var Dashboard = {
|
|||
html += '<paper-button dialog-dismiss>' + Globalize.translate('ButtonCancel') + '</paper-button>';
|
||||
}
|
||||
|
||||
html += '<paper-button dialog-confirm autofocus>' + Globalize.translate('ButtonOk') + '</paper-button>';
|
||||
html += '<paper-button class="btnConfirm" dialog-confirm autofocus>' + Globalize.translate('ButtonOk') + '</paper-button>';
|
||||
|
||||
html += '</div>';
|
||||
html += '</paper-dialog>';
|
||||
|
|
@ -615,12 +615,15 @@ var Dashboard = {
|
|||
|
||||
var dlg = document.getElementById(id);
|
||||
|
||||
dlg.open();
|
||||
|
||||
// Has to be assigned a z-index after the call to .open()
|
||||
$(dlg).on('iron-overlay-closed', function (e) {
|
||||
var confirmed = this.closingReason.confirmed;
|
||||
$(this).remove();
|
||||
callback(confirmed);
|
||||
});
|
||||
|
||||
dlg.open();
|
||||
|
||||
}, 300);
|
||||
});
|
||||
},
|
||||
|
|
@ -1483,7 +1486,7 @@ var Dashboard = {
|
|||
|
||||
if (AppInfo.forcedImageFormat && options.type != 'Logo') {
|
||||
options.format = AppInfo.forcedImageFormat;
|
||||
options.backgroundColor = '#1f1f1f';
|
||||
options.backgroundColor = '#1c1c1c';
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -1975,7 +1978,7 @@ var AppInfo = {};
|
|||
urlArgs: "v=" + window.dashboardVersion,
|
||||
|
||||
paths: {
|
||||
"velocity": "thirdparty/velocity.min"
|
||||
"velocity": "bower_components/velocity/velocity.min"
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -2088,10 +2091,10 @@ var AppInfo = {};
|
|||
} else {
|
||||
createConnectionManager(capabilities);
|
||||
|
||||
Dashboard.initPromiseDone = true;
|
||||
deferred.resolve();
|
||||
$(function () {
|
||||
onDocumentReady();
|
||||
Dashboard.initPromiseDone = true;
|
||||
deferred.resolve();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -129,7 +129,7 @@
|
|||
html += '<div class="' + imageClass + '" style="background-image:url(\'' + imgUrl + '\');">';
|
||||
|
||||
if (user.ConnectUserId && addConnectIndicator) {
|
||||
html += '<div class="playedIndicator" title="' + Globalize.translate('TooltipLinkedToEmbyConnect') + '"><i class="fa fa-cloud"></i></div>';
|
||||
html += '<div class="playedIndicator" title="' + Globalize.translate('TooltipLinkedToEmbyConnect') + '"><i class="material-icons">cloud</i></div>';
|
||||
}
|
||||
|
||||
html += "</div>";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue