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 external players

Browse source
This commit is contained in:
Luke Pulverenti 2016-02-27 00:43:12 -05:00
parent 22bf2c2268
commit c87e18bb93
2 changed files with 65 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

142
dashboard-ui/scripts/externalplayer.js
View file

@ -1,4 +1,4 @@
(function (window) { define(['paper-slider', 'paper-button'], function () {
function getDeviceProfile(serverAddress, deviceId, item, startPositionTicks, maxBitrate, mediaSourceId, audioStreamIndex, subtitleStreamIndex) { function getDeviceProfile(serverAddress, deviceId, item, startPositionTicks, maxBitrate, mediaSourceId, audioStreamIndex, subtitleStreamIndex) {
@ -104,20 +104,19 @@
function getVideoStreamInfo(item) { function getVideoStreamInfo(item) {
var deferred = $.Deferred();
var deviceProfile = getDeviceProfile(); var deviceProfile = getDeviceProfile();
var startPosition = 0; var startPosition = 0;
MediaPlayer.tryStartPlayback(deviceProfile, item, startPosition, function (mediaSource) { return new Promise(function (resolve, reject) {
playInternalPostMediaSourceSelection(item, mediaSource, startPosition, deferred); MediaPlayer.tryStartPlayback(deviceProfile, item, startPosition, function (mediaSource) {
playInternalPostMediaSourceSelection(item, mediaSource, startPosition).then(resolve);
});
}); });
return deferred.promise();
} }
function playInternalPostMediaSourceSelection(item, mediaSource, startPosition, deferred) { function playInternalPostMediaSourceSelection(item, mediaSource, startPosition) {
Dashboard.hideLoadingMsg(); Dashboard.hideLoadingMsg();
@ -130,7 +129,7 @@
} }
}; };
MediaPlayer.createStreamInfo('Video', item, mediaSource, startPosition).then(function (streamInfo) { return MediaPlayer.createStreamInfo('Video', item, mediaSource, startPosition).then(function (streamInfo) {
var currentSrc = streamInfo.url; var currentSrc = streamInfo.url;
@ -152,7 +151,7 @@
basePlayerState.PlayState.CanSeek = false; basePlayerState.PlayState.CanSeek = false;
basePlayerState.NowPlayingItem = MediaPlayer.getNowPlayingItemForReporting(item, mediaSource); basePlayerState.NowPlayingItem = MediaPlayer.getNowPlayingItemForReporting(item, mediaSource);
deferred.resolveWith(null, [streamInfo]); return streamInfo;
}); });
} }
@ -160,15 +159,13 @@
var state = basePlayerState; var state = basePlayerState;
state.PlayState.PositionTicks = positionTicks; state.PlayState.PositionTicks = Math.round(positionTicks);
return state; return state;
} }
function onPlaybackStart() { function onPlaybackStart() {
closePlayMenu();
var state = getPlayerState(); var state = getPlayerState();
var info = { var info = {
@ -186,12 +183,7 @@
}, 10000); }, 10000);
// Need a timeout because we can't show a popup at the same time as the previous one is closing showPostPlayMenu(currentItem);
// Bumping it up to 1000 because the post play menu is hiding for some reason on android
setTimeout(function () {
showPostPlayMenu(currentItem);
}, 1000);
} }
function onPlaybackProgress(positionTicks) { function onPlaybackProgress(positionTicks) {
@ -213,9 +205,9 @@
var state = getPlayerState(positionTicks); var state = getPlayerState(positionTicks);
var stopInfo = { var stopInfo = {
itemId: state.NowPlayingItem.Id, ItemId: state.NowPlayingItem.Id,
mediaSourceId: state.PlayState.MediaSourceId, MediaSourceId: state.PlayState.MediaSourceId,
positionTicks: state.PlayState.PositionTicks PositionTicks: state.PlayState.PositionTicks
}; };
if (state.PlayState.LiveStreamId) { if (state.PlayState.LiveStreamId) {
@ -226,12 +218,15 @@
stopInfo.PlaySessionId = state.PlayState.PlaySessionId; stopInfo.PlaySessionId = state.PlayState.PlaySessionId;
} }
ApiClient.reportPlaybackStopped(stopInfo);
if (progressInterval) { if (progressInterval) {
clearInterval(progressInterval); clearInterval(progressInterval);
progressInterval = null; progressInterval = null;
} }
// Make sure this is after progress reports have stopped
setTimeout(function () {
ApiClient.reportPlaybackStopped(stopInfo);
}, 1000);
} }
function showPostPlayMenu(item) { function showPostPlayMenu(item) {
@ -245,7 +240,7 @@
html += '<li data-role="list-divider" style="padding: 1em;text-align:center;">' + Globalize.translate('HeaderExternalPlayerPlayback') + '</li>'; html += '<li data-role="list-divider" style="padding: 1em;text-align:center;">' + Globalize.translate('HeaderExternalPlayerPlayback') + '</li>';
html += '</ul>'; html += '</ul>';
html += '<div style="padding:1em;">'; html += '<div style="padding:1.5em;">';
var autoMarkWatched = item.RunTimeTicks; var autoMarkWatched = item.RunTimeTicks;
@ -253,29 +248,26 @@
autoMarkWatched = false; autoMarkWatched = false;
html += '<fieldset data-role="controlgroup">'; html += '<label for="selectMarkAs" class="selectLabel">' + Globalize.translate('LabelMarkAs') + '</label>';
html += '<legend>' + Globalize.translate('LabelMarkAs') + '</legend>'; html += '<select id="selectMarkAs">';
html += '<label for="radioMarkUnwatched">' + Globalize.translate('OptionUnwatched') + '</label>'; html += '<option value="0">' + Globalize.translate('OptionWatched') + '</option>';
html += '<input type="radio" id="radioMarkUnwatched" name="radioGroupMarkPlaystate" class="radioPlaystate" />'; html += '<option value="1">' + Globalize.translate('OptionUnwatched') + '</option>';
html += '<label for="radioMarkWatched">' + Globalize.translate('OptionWatched') + '</label>'; html += '<option value="2">' + Globalize.translate('OptionInProgress') + '</option>';
html += '<input type="radio" id="radioMarkWatched" checked="checked" name="radioGroupMarkPlaystate" class="radioPlaystate" />'; html += '</select>';
html += '<label for="radioMarkInProgress">' + Globalize.translate('OptionInProgress') + '</label>';
html += '<input type="radio" id="radioMarkInProgress" name="radioGroupMarkPlaystate" class="radioPlaystate" />';
html += '</fieldset>';
html += '<br/>'; html += '<br/>';
html += '<div class="fldResumePoint hide">';
html += '<p style="margin-top: 0;">' + Globalize.translate('LabelResumePoint') + '</p>'; html += '<p style="margin-top: 0;">' + Globalize.translate('LabelResumePoint') + '</p>';
html += '<div class="sliderContainer" style="display:block;margin-top:4px;">'; html += '<paper-slider pin step=".001" min="0" max="100" value="0" class="playstateSlider" style="display:block;margin-left:-12px;width:98%;"></paper-slider>';
html += '<input class="playstateSlider" type="range" step=".001" min="0" max="100" value="0" style="display:none;" data-theme="a" data-highlight="true" />';
html += '</div>';
html += '<div class="sliderValue" style="text-align:center;margin:2px 0 4px;">0:00:00</div>'; html += '<div class="sliderValue" style="text-align:center;margin:2px 0 4px;">0:00:00</div>';
html += '</div>';
html += '<br/>'; html += '<br/>';
} }
html += '<button type="button" class="btnDone" data-theme="b" data-icon="check">' + Globalize.translate('ButtonImDone') + '</button>'; html += '<paper-button class="block submit btnDone" raised>' + Globalize.translate('ButtonImDone') + '</paper-button>';
html += '</div>'; html += '</div>';
@ -287,42 +279,41 @@
$(this).off("popupafterclose").remove(); $(this).off("popupafterclose").remove();
}); })[0];
$('.radioPlaystate', elem).on('change', function () { $('#selectMarkAs', elem).on('change', function () {
if ($('#radioMarkInProgress', elem).checked()) { if (this.value == '2') {
$('.playstateSlider', elem).slider('enable'); elem.querySelector('.fldResumePoint').classList.remove('hide');
} else { } else {
$('.playstateSlider', elem).slider('disable'); elem.querySelector('.fldResumePoint').classList.add('hide');
} }
}).trigger('change'); }).trigger('change');
$('.btnDone', elem).on('click', function () { $('.btnDone', elem).on('click', function () {
$('.externalPlayerPostPlayFlyout').popup("close").remove();
var position = 0; var position = 0;
var playstateOption = $('#selectMarkAs', elem).val();
if ($('#radioMarkInProgress', elem).checked()) { if (playstateOption == '2') {
var pct = $(".playstateSlider", elem).val(); var pct = $(".playstateSlider", elem).val();
var ticks = item.RunTimeTicks * (Number(pct) * .01); var ticks = item.RunTimeTicks * (Number(pct) * .01);
position = ticks; position = ticks;
} }
else if (autoMarkWatched || $('#radioMarkWatched', elem).checked()) { else if (autoMarkWatched || playstateOption == '0') {
position = currentMediaSource.RunTimeTicks; position = currentMediaSource.RunTimeTicks;
} }
else if ($('#radioMarkUnwatched', elem).checked()) { else if (playstateOption == '1') {
position = 0; position = 0;
} }
onPlaybackStopped(position); onPlaybackStopped(position);
$('.externalPlayerPostPlayFlyout').popup("close").remove();
}); });
$(".playstateSlider", elem).on("change", function (e) { $(".playstateSlider", elem).on("change", function (e) {
@ -341,44 +332,22 @@
}); });
} }
function closePlayMenu() {
$('.externalPlayerFlyout').popup("close").remove();
}
function showMenuForItem(item, players) { function showMenuForItem(item, players) {
require(['jqmpopup', 'jqmlistview'], function () { require(['actionsheet'], function (actionsheet) {
closePlayMenu();
var html = '<div data-role="popup" class="externalPlayerFlyout" data-theme="a" data-dismissible="false">'; actionsheet.show({
items: players,
callback: function (id) {
var player = players.filter(function (p) {
return p.id == id;
})[0];
html += '<ul data-role="listview" style="min-width: 200px;">'; if (player) {
html += '<li data-role="list-divider" style="padding: 1em;text-align:center;">' + Globalize.translate('HeaderSelectExternalPlayer') + '</li>'; window.open(player.url, '_blank');
html += '</ul>'; onPlaybackStart();
}
html += '<div style="padding:1em;">'; }
html += players.map(function (p) {
return '<a href="' + p.url + '" data-role="button" data-icon="play" class="btnExternalPlayer" data-theme="b" data-mini="true">' + p.name + '</a>';
}).join('');
html += '</div>';
html += '</div>';
$(document.body).append(html);
var elem = $('.externalPlayerFlyout').popup({}).trigger('create').popup("open").on("popupafterclose", function () {
$(this).off("popupafterclose").remove();
});
$('.btnExternalPlayer', elem).on('click', function () {
ExternalPlayer.onPlaybackStart();
}); });
}); });
} }
@ -401,7 +370,10 @@
function getExternalPlayers(url, mimeType) { function getExternalPlayers(url, mimeType) {
var players = [ var players = [
{ name: 'Vlc', url: 'vlc://' + url, id: 'vlc' } {
name: 'Vlc', url: 'vlc://' + url, id: 'vlc',
ironIcon: 'airplay'
}
]; ];
return Promise.resolve(players); return Promise.resolve(players);
@ -422,4 +394,4 @@
showPlayerSelectionMenu: showPlayerSelectionMenu showPlayerSelectionMenu: showPlayerSelectionMenu
}; };
})(window); });

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

@ -33,9 +33,7 @@
html += '<paper-button class="headerButton headerButtonRight btnNotifications subdued" type="button" title="Notifications"><div class="btnNotificationsInner">0</div></paper-button>'; html += '<paper-button class="headerButton headerButtonRight btnNotifications subdued" type="button" title="Notifications"><div class="btnNotificationsInner">0</div></paper-button>';
if (!showUserAtTop()) { html += '<paper-icon-button icon="person" class="headerButton headerButtonRight headerUserButton" onclick="return Dashboard.showUserFlyout(this);"></paper-icon-button>';
html += '<paper-icon-button icon="person" class="headerButton headerButtonRight headerUserButton" onclick="return Dashboard.showUserFlyout(this);"></paper-icon-button>';
}
if (!browserInfo.mobile && !Dashboard.isConnectMode()) { if (!browserInfo.mobile && !Dashboard.isConnectMode()) {
html += '<paper-icon-button icon="settings" class="headerButton headerButtonRight dashboardEntryHeaderButton" onclick="return LibraryMenu.onSettingsClicked(event);"></paper-icon-button>'; html += '<paper-icon-button icon="settings" class="headerButton headerButtonRight dashboardEntryHeaderButton" onclick="return LibraryMenu.onSettingsClicked(event);"></paper-icon-button>';
@ -288,44 +286,14 @@
var html = ''; var html = '';
var userAtTop = showUserAtTop();
var homeHref = window.ApiClient ? 'index.html' : 'selectserver.html?showuser=1'; var homeHref = window.ApiClient ? 'index.html' : 'selectserver.html?showuser=1';
var hasUserImage = user.imageUrl; html += '<div style="margin-top:5px;"></div>';
if (userAtTop) { html += '<a class="lnkMediaFolder sidebarLink" href="' + homeHref + '" onclick="return LibraryMenu.onLinkClicked(event, this);">';
html += '<div style="background-image:url(\'css/images/mblogoicon.png\');width:' + 28 + 'px;height:' + 28 + 'px;background-size:contain;background-repeat:no-repeat;background-position:center center;border-radius:1000px;vertical-align:middle;margin:0 1.6em 0 1.5em;display:inline-block;"></div>';
html += '<div class="drawerUserPanel">'; html += Globalize.translate('ButtonHome');
html += '</a>';
var imgWidth = 40;
if (hasUserImage) {
var url = user.imageUrl;
if (user.supportsImageParams) {
url += "&width=" + (imgWidth * Math.max(devicePixelRatio || 1, 2));
html += '<div class="lazy drawerUserPanelUserImage" data-src="' + url + '" style="width:' + imgWidth + 'px;height:' + imgWidth + 'px;"></div>';
}
} else {
html += '<div class="drawerUserPanelUserImage"><iron-icon icon="person" style="width:' + imgWidth + 'px;height:' + imgWidth + 'px;"></iron-icon></div>';
}
html += '<div class="drawerUserPanelUserName">';
html += user.name;
html += '</div>';
html += '</div>';
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="remote" href="index.html" onclick="return LibraryMenu.onLinkClicked(event, this);"><iron-icon icon="home" class="sidebarLinkIcon" style="color:#2196F3;"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonHome') + '</span></a>';
} else {
html += '<div style="margin-top:5px;"></div>';
html += '<a class="lnkMediaFolder sidebarLink" href="' + homeHref + '" onclick="return LibraryMenu.onLinkClicked(event, this);">';
html += '<div style="background-image:url(\'css/images/mblogoicon.png\');width:' + 28 + 'px;height:' + 28 + 'px;background-size:contain;background-repeat:no-repeat;background-position:center center;border-radius:1000px;vertical-align:middle;margin:0 1.6em 0 1.5em;display:inline-block;"></div>';
html += Globalize.translate('ButtonHome');
html += '</a>';
}
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="remote" href="nowplaying.html" onclick="return LibraryMenu.onLinkClicked(event, this);"><iron-icon icon="tablet-android" class="sidebarLinkIcon" style="color:#673AB7;"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonRemote') + '</span></a>'; html += '<a class="sidebarLink lnkMediaFolder" data-itemid="remote" href="nowplaying.html" onclick="return LibraryMenu.onLinkClicked(event, this);"><iron-icon icon="tablet-android" class="sidebarLinkIcon" style="color:#673AB7;"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonRemote') + '</span></a>';
@ -386,7 +354,7 @@
html += '<div class="sidebarDivider"></div>'; html += '<div class="sidebarDivider"></div>';
if (user.localUser && showUserAtTop()) { if (user.localUser && (AppInfo.isNativeApp && browserInfo.android)) {
html += '<a class="sidebarLink lnkMediaFolder lnkMySettings" onclick="return LibraryMenu.onLinkClicked(event, this);" href="mypreferencesmenu.html?userId=' + user.localUser.Id + '"><iron-icon icon="settings" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonSettings') + '</span></a>'; html += '<a class="sidebarLink lnkMediaFolder lnkMySettings" onclick="return LibraryMenu.onLinkClicked(event, this);" href="mypreferencesmenu.html?userId=' + user.localUser.Id + '"><iron-icon icon="settings" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonSettings') + '</span></a>';
} }
@ -396,7 +364,7 @@
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="selectserver" onclick="return LibraryMenu.onLinkClicked(event, this);" href="selectserver.html?showuser=1"><iron-icon icon="wifi" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonSelectServer') + '</span></a>'; html += '<a class="sidebarLink lnkMediaFolder" data-itemid="selectserver" onclick="return LibraryMenu.onLinkClicked(event, this);" href="selectserver.html?showuser=1"><iron-icon icon="wifi" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonSelectServer') + '</span></a>';
} }
if (showUserAtTop()) { if (user.localUser) {
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="logout" onclick="return LibraryMenu.onLogoutClicked(this);" href="#"><iron-icon icon="lock" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonSignOut') + '</span></a>'; html += '<a class="sidebarLink lnkMediaFolder" data-itemid="logout" onclick="return LibraryMenu.onLogoutClicked(this);" href="#"><iron-icon icon="lock" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonSignOut') + '</span></a>';
} }
@ -556,10 +524,6 @@
} }
} }
function showUserAtTop() {
return false;
}
var requiresLibraryMenuRefresh = false; var requiresLibraryMenuRefresh = false;
function onManageServerClicked() { function onManageServerClicked() {