mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update external players
This commit is contained in:
Luke Pulverenti
parent
22bf2c2268
commit
c87e18bb93
2 changed files with 65 additions and 129 deletions
|
|
@ -1,4 +1,4 @@
|
|||
(function (window) {
|
||||
define(['paper-slider', 'paper-button'], function () {
|
||||
|
||||
function getDeviceProfile(serverAddress, deviceId, item, startPositionTicks, maxBitrate, mediaSourceId, audioStreamIndex, subtitleStreamIndex) {
|
||||
|
||||
|
|
@ -104,20 +104,19 @@
|
|||
|
||||
function getVideoStreamInfo(item) {
|
||||
|
||||
var deferred = $.Deferred();
|
||||
|
||||
var deviceProfile = getDeviceProfile();
|
||||
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();
|
||||
|
||||
|
|
@ -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;
|
||||
|
||||
|
|
@ -152,7 +151,7 @@
|
|||
basePlayerState.PlayState.CanSeek = false;
|
||||
basePlayerState.NowPlayingItem = MediaPlayer.getNowPlayingItemForReporting(item, mediaSource);
|
||||
|
||||
deferred.resolveWith(null, [streamInfo]);
|
||||
return streamInfo;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -160,15 +159,13 @@
|
|||
|
||||
var state = basePlayerState;
|
||||
|
||||
state.PlayState.PositionTicks = positionTicks;
|
||||
state.PlayState.PositionTicks = Math.round(positionTicks);
|
||||
|
||||
return state;
|
||||
}
|
||||
|
||||
function onPlaybackStart() {
|
||||
|
||||
closePlayMenu();
|
||||
|
||||
var state = getPlayerState();
|
||||
|
||||
var info = {
|
||||
|
|
@ -186,12 +183,7 @@
|
|||
|
||||
}, 10000);
|
||||
|
||||
// Need a timeout because we can't show a popup at the same time as the previous one is closing
|
||||
// Bumping it up to 1000 because the post play menu is hiding for some reason on android
|
||||
setTimeout(function () {
|
||||
|
||||
showPostPlayMenu(currentItem);
|
||||
}, 1000);
|
||||
showPostPlayMenu(currentItem);
|
||||
}
|
||||
|
||||
function onPlaybackProgress(positionTicks) {
|
||||
|
|
@ -213,9 +205,9 @@
|
|||
var state = getPlayerState(positionTicks);
|
||||
|
||||
var stopInfo = {
|
||||
itemId: state.NowPlayingItem.Id,
|
||||
mediaSourceId: state.PlayState.MediaSourceId,
|
||||
positionTicks: state.PlayState.PositionTicks
|
||||
ItemId: state.NowPlayingItem.Id,
|
||||
MediaSourceId: state.PlayState.MediaSourceId,
|
||||
PositionTicks: state.PlayState.PositionTicks
|
||||
};
|
||||
|
||||
if (state.PlayState.LiveStreamId) {
|
||||
|
|
@ -226,12 +218,15 @@
|
|||
stopInfo.PlaySessionId = state.PlayState.PlaySessionId;
|
||||
}
|
||||
|
||||
ApiClient.reportPlaybackStopped(stopInfo);
|
||||
|
||||
if (progressInterval) {
|
||||
clearInterval(progressInterval);
|
||||
progressInterval = null;
|
||||
}
|
||||
|
||||
// Make sure this is after progress reports have stopped
|
||||
setTimeout(function () {
|
||||
ApiClient.reportPlaybackStopped(stopInfo);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function showPostPlayMenu(item) {
|
||||
|
|
@ -245,7 +240,7 @@
|
|||
html += '<li data-role="list-divider" style="padding: 1em;text-align:center;">' + Globalize.translate('HeaderExternalPlayerPlayback') + '</li>';
|
||||
html += '</ul>';
|
||||
|
||||
html += '<div style="padding:1em;">';
|
||||
html += '<div style="padding:1.5em;">';
|
||||
|
||||
var autoMarkWatched = item.RunTimeTicks;
|
||||
|
||||
|
|
@ -253,29 +248,26 @@
|
|||
|
||||
autoMarkWatched = false;
|
||||
|
||||
html += '<fieldset data-role="controlgroup">';
|
||||
html += '<legend>' + Globalize.translate('LabelMarkAs') + '</legend>';
|
||||
html += '<label for="radioMarkUnwatched">' + Globalize.translate('OptionUnwatched') + '</label>';
|
||||
html += '<input type="radio" id="radioMarkUnwatched" name="radioGroupMarkPlaystate" class="radioPlaystate" />';
|
||||
html += '<label for="radioMarkWatched">' + Globalize.translate('OptionWatched') + '</label>';
|
||||
html += '<input type="radio" id="radioMarkWatched" checked="checked" name="radioGroupMarkPlaystate" class="radioPlaystate" />';
|
||||
html += '<label for="radioMarkInProgress">' + Globalize.translate('OptionInProgress') + '</label>';
|
||||
html += '<input type="radio" id="radioMarkInProgress" name="radioGroupMarkPlaystate" class="radioPlaystate" />';
|
||||
html += '</fieldset>';
|
||||
html += '<label for="selectMarkAs" class="selectLabel">' + Globalize.translate('LabelMarkAs') + '</label>';
|
||||
html += '<select id="selectMarkAs">';
|
||||
html += '<option value="0">' + Globalize.translate('OptionWatched') + '</option>';
|
||||
html += '<option value="1">' + Globalize.translate('OptionUnwatched') + '</option>';
|
||||
html += '<option value="2">' + Globalize.translate('OptionInProgress') + '</option>';
|
||||
html += '</select>';
|
||||
|
||||
html += '<br/>';
|
||||
|
||||
html += '<div class="fldResumePoint hide">';
|
||||
html += '<p style="margin-top: 0;">' + Globalize.translate('LabelResumePoint') + '</p>';
|
||||
|
||||
html += '<div class="sliderContainer" style="display:block;margin-top:4px;">';
|
||||
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 += '<paper-slider pin step=".001" min="0" max="100" value="0" class="playstateSlider" style="display:block;margin-left:-12px;width:98%;"></paper-slider>';
|
||||
html += '<div class="sliderValue" style="text-align:center;margin:2px 0 4px;">0:00:00</div>';
|
||||
html += '</div>';
|
||||
|
||||
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>';
|
||||
|
||||
|
|
@ -287,42 +279,41 @@
|
|||
|
||||
$(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 {
|
||||
$('.playstateSlider', elem).slider('disable');
|
||||
elem.querySelector('.fldResumePoint').classList.add('hide');
|
||||
}
|
||||
|
||||
}).trigger('change');
|
||||
|
||||
$('.btnDone', elem).on('click', function () {
|
||||
|
||||
$('.externalPlayerPostPlayFlyout').popup("close").remove();
|
||||
|
||||
var position = 0;
|
||||
|
||||
if ($('#radioMarkInProgress', elem).checked()) {
|
||||
var playstateOption = $('#selectMarkAs', elem).val();
|
||||
if (playstateOption == '2') {
|
||||
|
||||
var pct = $(".playstateSlider", elem).val();
|
||||
var ticks = item.RunTimeTicks * (Number(pct) * .01);
|
||||
|
||||
position = ticks;
|
||||
}
|
||||
else if (autoMarkWatched || $('#radioMarkWatched', elem).checked()) {
|
||||
else if (autoMarkWatched || playstateOption == '0') {
|
||||
|
||||
position = currentMediaSource.RunTimeTicks;
|
||||
}
|
||||
else if ($('#radioMarkUnwatched', elem).checked()) {
|
||||
else if (playstateOption == '1') {
|
||||
|
||||
position = 0;
|
||||
}
|
||||
onPlaybackStopped(position);
|
||||
$('.externalPlayerPostPlayFlyout').popup("close").remove();
|
||||
});
|
||||
|
||||
$(".playstateSlider", elem).on("change", function (e) {
|
||||
|
|
@ -341,44 +332,22 @@
|
|||
});
|
||||
}
|
||||
|
||||
function closePlayMenu() {
|
||||
$('.externalPlayerFlyout').popup("close").remove();
|
||||
}
|
||||
|
||||
function showMenuForItem(item, players) {
|
||||
|
||||
require(['jqmpopup', 'jqmlistview'], function () {
|
||||
closePlayMenu();
|
||||
require(['actionsheet'], function (actionsheet) {
|
||||
|
||||
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;">';
|
||||
html += '<li data-role="list-divider" style="padding: 1em;text-align:center;">' + Globalize.translate('HeaderSelectExternalPlayer') + '</li>';
|
||||
html += '</ul>';
|
||||
|
||||
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();
|
||||
if (player) {
|
||||
window.open(player.url, '_blank');
|
||||
onPlaybackStart();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -401,7 +370,10 @@
|
|||
function getExternalPlayers(url, mimeType) {
|
||||
|
||||
var players = [
|
||||
{ name: 'Vlc', url: 'vlc://' + url, id: 'vlc' }
|
||||
{
|
||||
name: 'Vlc', url: 'vlc://' + url, id: 'vlc',
|
||||
ironIcon: 'airplay'
|
||||
}
|
||||
];
|
||||
|
||||
return Promise.resolve(players);
|
||||
|
|
@ -422,4 +394,4 @@
|
|||
showPlayerSelectionMenu: showPlayerSelectionMenu
|
||||
};
|
||||
|
||||
})(window);
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue