1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

fix media player flyouts

This commit is contained in:
Luke Pulverenti 2015-05-22 16:15:29 -04:00
parent 8443751aec
commit 272d9c42a9
3 changed files with 88 additions and 123 deletions

View file

@ -14,6 +14,14 @@
return deferred.promise(); return deferred.promise();
} }
function enableScrollX() {
return AppInfo.isTouchPreferred;
}
function getThumbShape() {
return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
}
function getLibraryButtonsHtml(items) { function getLibraryButtonsHtml(items) {
var html = ""; var html = "";
@ -150,7 +158,9 @@
} }
html += '</div>'; html += '</div>';
html += '<div class="itemsContainer">'; html += '<div class="itemsContainer">';
html += LibraryBrowser.getPosterViewHtml({ html += LibraryBrowser.getPosterViewHtml({
items: items, items: items,
preferThumb: true, preferThumb: true,
@ -286,11 +296,15 @@
if (result.Items.length) { if (result.Items.length) {
html += '<h1 class="listHeader">' + Globalize.translate('HeaderResume') + '</h1>'; html += '<h1 class="listHeader">' + Globalize.translate('HeaderResume') + '</h1>';
html += '<div>'; if (enableScrollX()) {
html += '<div class="hiddenScrollX itemsContainer">';
} else {
html += '<div class="itemsContainer">';
}
html += LibraryBrowser.getPosterViewHtml({ html += LibraryBrowser.getPosterViewHtml({
items: result.Items, items: result.Items,
preferThumb: true, preferThumb: true,
shape: 'backdrop', shape: getThumbShape(),
overlayText: screenWidth >= 800 && !cardLayout, overlayText: screenWidth >= 800 && !cardLayout,
showTitle: true, showTitle: true,
showParentTitle: true, showParentTitle: true,

View file

@ -89,11 +89,6 @@
var html = getSubtitleTracksHtml(); var html = getSubtitleTracksHtml();
if (!supportsContentOverVideoPlayer()) {
showPopupUsingSelect(html, 'subtitles');
return;
}
var elem = $('.videoSubtitlePopup').html(html) var elem = $('.videoSubtitlePopup').html(html)
.trigger('create') .trigger('create')
.popup("option", "positionTo", $('.videoSubtitleButton')) .popup("option", "positionTo", $('.videoSubtitleButton'))
@ -107,11 +102,6 @@
var html = getQualityFlyoutHtml(); var html = getQualityFlyoutHtml();
if (!supportsContentOverVideoPlayer()) {
showPopupUsingSelect(html, 'quality');
return;
}
var elem = $('.videoQualityPopup').html(html) var elem = $('.videoQualityPopup').html(html)
.trigger('create') .trigger('create')
.popup("option", "positionTo", $('.videoQualityButton')) .popup("option", "positionTo", $('.videoQualityButton'))
@ -125,11 +115,6 @@
var html = getAudioTracksHtml(); var html = getAudioTracksHtml();
if (!supportsContentOverVideoPlayer()) {
showPopupUsingSelect(html, 'audio');
return;
}
var elem = $('.videoAudioPopup').html(html) var elem = $('.videoAudioPopup').html(html)
.trigger('create') .trigger('create')
.popup("option", "positionTo", $('.videoAudioButton')) .popup("option", "positionTo", $('.videoAudioButton'))
@ -139,55 +124,6 @@
onPopupOpen(elem); onPopupOpen(elem);
}; };
function openSelect(selector) {
var element = $(selector)[0], worked = false;
if (document.createEvent) { // all browsers
var e = document.createEvent("MouseEvents");
e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
worked = element.dispatchEvent(e);
} else if (element.fireEvent) { // ie
worked = element.fireEvent("onmousedown");
}
if (!worked) { // unknown browser / error
}
}
function showPopupUsingSelect(html, type) {
var re = new RegExp('<br/>', 'g');
html = html.replace(re, '&nbsp;&#149;&nbsp;');
var options = $('.mediaPopupOption', $(html)).get().map(function (e) {
var selected = $(e).hasClass('selectedMediaPopupOption') ? ' selected="selected"' : '';
return '<option' + selected + ' value="' + e.getAttribute('data-value') + '">' + $(e).text() + '</option>';
});
html = '<select style="position:absolute;z-index:9999999;top:10px;right:5px;">' + options.join('') + '</select>';
var select = $(html).appendTo(document.body).on('change', function () {
var value = this.value;
$(this).remove();
if (type == 'audio') {
onAudioOptionSelected(value);
}
else if (type == 'subtitles') {
onSubtitleOptionSelected(value);
}
else if (type == 'quality') {
onQualityOptionSelected(value);
}
}).on('blur', function () {
$(this).remove();
});
openSelect(select);
}
self.setAudioStreamIndex = function (index) { self.setAudioStreamIndex = function (index) {
self.changeStream(self.getCurrentTicks(), { AudioStreamIndex: index }); self.changeStream(self.getCurrentTicks(), { AudioStreamIndex: index });
}; };
@ -571,29 +507,53 @@
self.changeStream(Math.floor(newPositionTicks)); self.changeStream(Math.floor(newPositionTicks));
} }
function onAudioOptionSelected(value) { self.onChapterOptionSelected = function (elem) {
var index = parseInt(value);
if (!$(elem).hasClass('selectedMediaPopupOption')) {
var ticks = parseInt(elem.getAttribute('data-value') || '0');
self.changeStream(ticks);
}
$('.videoChaptersPopup').popup('close');
};
self.onAudioOptionSelected = function (elem) {
if (!$(elem).hasClass('selectedMediaPopupOption')) {
var index = parseInt(elem.getAttribute('data-value'));
self.setAudioStreamIndex(index); self.setAudioStreamIndex(index);
} }
$('.videoAudioPopup').popup('close');
};
function onSubtitleOptionSelected(value) { self.onSubtitleOptionSelected = function (elem) {
var index = parseInt(value);
if (!$(elem).hasClass('selectedMediaPopupOption')) {
var index = parseInt(elem.getAttribute('data-value'));
self.setSubtitleStreamIndex(index); self.setSubtitleStreamIndex(index);
} }
$('.videoSubtitlePopup').popup('close');
};
function onQualityOptionSelected(value) { self.onQualityOptionSelected = function (elem) {
var bitrate = parseInt(value);
if (!$(elem).hasClass('selectedMediaPopupOption')) {
var bitrate = parseInt(elem.getAttribute('data-value'));
AppSettings.maxStreamingBitrate(bitrate); AppSettings.maxStreamingBitrate(bitrate);
self.changeStream(self.getCurrentTicks(), { $('.videoQualityPopup').popup('close');
self.changeStream(self.getCurrentTicks(), {
Bitrate: bitrate Bitrate: bitrate
}); });
} }
$('.videoSubtitlePopup').popup('close');
};
$(function () { $(function () {
var parent = $("#mediaPlayer"); var parent = $("#mediaPlayer");
@ -615,44 +575,6 @@
self.setVolume(vol * 100); self.setVolume(vol * 100);
}); });
$('.videoChaptersPopup').on('click', '.mediaPopupOption', function () {
var ticks = parseInt(this.getAttribute('data-positionticks') || '0');
self.changeStream(ticks);
$('.videoChaptersPopup').popup('close');
});
$('.videoAudioPopup').on('click', '.mediaPopupOption', function () {
if (!$(this).hasClass('selectedMediaPopupOption')) {
onAudioOptionSelected(this.getAttribute('data-value'));
}
$('.videoAudioPopup').popup('close');
});
$('.videoSubtitlePopup').on('click', '.mediaPopupOption', function () {
$('.videoSubtitlePopup').popup('close');
if (!$(this).hasClass('selectedMediaPopupOption')) {
onSubtitleOptionSelected(this.getAttribute('data-value'));
}
});
$('.videoQualityPopup').on('click', '.mediaPopupOption', function () {
if (!$(this).hasClass('selectedMediaPopupOption')) {
onQualityOptionSelected(this.getAttribute('data-value'));
}
$('.videoQualityPopup').popup('close');
});
var trackChange = false; var trackChange = false;
var tooltip = $('<div id="slider-tooltip"></div>'); var tooltip = $('<div id="slider-tooltip"></div>');
@ -762,13 +684,19 @@
var cssClass = "mediaPopupOption"; var cssClass = "mediaPopupOption";
var selected = false; var selected = false;
// Need to embed onclick handler due to delegation not working in iOS cordova
var onclick = '';
if (currentTicks >= chapter.StartPositionTicks) { if (currentTicks >= chapter.StartPositionTicks) {
var nextChapter = chapters[index + 1]; var nextChapter = chapters[index + 1];
selected = !nextChapter || currentTicks < nextChapter.StartPositionTicks; selected = !nextChapter || currentTicks < nextChapter.StartPositionTicks;
} }
var optionHtml = '<li><a data-positionticks="' + chapter.StartPositionTicks + '" class="' + cssClass + '" href="#" style="padding-top:0;padding-bottom:0;">'; if (!selected) {
onclick = ' onclick="MediaPlayer.onChapterOptionSelected(this);"';
}
var optionHtml = '<li><a' + onclick + ' data-value="' + chapter.StartPositionTicks + '" class="' + cssClass + '" href="#" style="padding-top:0;padding-bottom:0;">';
var imgUrl = "css/images/media/chapterflyout.png"; var imgUrl = "css/images/media/chapterflyout.png";
@ -837,11 +765,16 @@
var selected = stream.Index == currentIndex; var selected = stream.Index == currentIndex;
// Need to embed onclick handler due to delegation not working in iOS cordova
var onclick = '';
if (selected) { if (selected) {
cssClass += ' selectedMediaPopupOption'; cssClass += ' selectedMediaPopupOption';
} else {
onclick = ' onclick="MediaPlayer.onAudioOptionSelected(this);"';
} }
var optionHtml = '<li><a data-value="' + stream.Index + '" class="' + cssClass + '" href="#">'; var optionHtml = '<li><a' + onclick + ' data-value="' + stream.Index + '" class="' + cssClass + '" href="#">';
optionHtml += '<p style="margin:0;">'; optionHtml += '<p style="margin:0;">';
@ -922,11 +855,16 @@
var selected = stream.Index == currentIndex; var selected = stream.Index == currentIndex;
// Need to embed onclick handler due to delegation not working in iOS cordova
var onclick = '';
if (selected) { if (selected) {
cssClass += ' selectedMediaPopupOption'; cssClass += ' selectedMediaPopupOption';
} else {
onclick = ' onclick="MediaPlayer.onSubtitleOptionSelected(this);"';
} }
var optionHtml = '<li><a data-value="' + stream.Index + '" class="' + cssClass + '" href="#">'; var optionHtml = '<li><a' + onclick + ' data-value="' + stream.Index + '" class="' + cssClass + '" href="#">';
optionHtml += '<p style="margin:0;">'; optionHtml += '<p style="margin:0;">';
@ -1003,12 +941,16 @@
html += options.map(function (option) { html += options.map(function (option) {
var cssClass = "mediaPopupOption"; var cssClass = "mediaPopupOption";
// Need to embed onclick handler due to delegation not working in iOS cordova
var onclick = '';
if (option.selected) { if (option.selected) {
cssClass += ' selectedMediaPopupOption'; cssClass += ' selectedMediaPopupOption';
} else {
onclick = ' onclick="MediaPlayer.onQualityOptionSelected(this);"';
} }
var optionHtml = '<li><a data-valued="' + option.bitrate + '" class="' + cssClass + '" href="#">'; var optionHtml = '<li><a' + onclick + ' data-value="' + option.bitrate + '" class="' + cssClass + '" href="#">';
optionHtml += '<p style="margin:0;">'; optionHtml += '<p style="margin:0;">';

View file

@ -4,6 +4,7 @@
var platform = (device.platform || '').toLowerCase(); var platform = (device.platform || '').toLowerCase();
// Don't require validation on android
if (platform.indexOf('android') != -1) { if (platform.indexOf('android') != -1) {
deferred.resolve(); deferred.resolve();
return; return;
@ -14,6 +15,14 @@
function validateLiveTV(deferred) { function validateLiveTV(deferred) {
var platform = (device.platform || '').toLowerCase();
// Don't require validation if not android
if (platform.indexOf('android') == -1) {
deferred.resolve();
return;
}
deferred.resolve(); deferred.resolve();
} }