mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update video player layout
This commit is contained in:
Luke Pulverenti
parent
ae50805ba4
commit
eab5e1812e
20 changed files with 593 additions and 772 deletions
|
|
@ -29,14 +29,12 @@
|
|||
|
||||
self.remoteFullscreen = function () {
|
||||
|
||||
var videoControls = $("#videoControls");
|
||||
|
||||
if (remoteFullscreen) {
|
||||
exitFullScreenToWindow();
|
||||
videoControls.removeClass("inactive");
|
||||
$('.hiddenOnIdle').removeClass("inactive");
|
||||
} else {
|
||||
enterFullScreen();
|
||||
videoControls.addClass("inactive");
|
||||
$('.hiddenOnIdle').addClass("inactive");
|
||||
}
|
||||
|
||||
remoteFullscreen = !remoteFullscreen;
|
||||
|
|
@ -65,9 +63,8 @@
|
|||
self.resetEnhancements = function () {
|
||||
$("#mediaPlayer").hide();
|
||||
$('#videoPlayer').removeClass('fullscreenVideo');
|
||||
$("#videoControls").removeClass("inactive");
|
||||
$('.hiddenOnIdle').removeClass("inactive");
|
||||
$("video").remove();
|
||||
$("html").css("cursor", "default");
|
||||
};
|
||||
|
||||
self.exitFullScreen = function () {
|
||||
|
|
@ -90,53 +87,38 @@
|
|||
|
||||
self.showSubtitleMenu = function () {
|
||||
|
||||
var flyout = $('#video-subtitleFlyout');
|
||||
var elem = $('.videoSubtitlePopup').html(getSubtitleTracksHtml())
|
||||
.trigger('create')
|
||||
.popup("option", "positionTo", $('.videoSubtitleButton'));
|
||||
|
||||
if (!flyout.is(':visible')) {
|
||||
|
||||
flyout.html(getSubtitleTracksHtml()).trigger('create').scrollTop(0);
|
||||
toggleFlyout(flyout, '#video-subtitleButton');
|
||||
|
||||
} else {
|
||||
toggleFlyout(flyout, '#video-subtitleButton');
|
||||
}
|
||||
elem.popup("open").parents(".ui-popup-container").css("margin-top", 30);
|
||||
};
|
||||
|
||||
self.showQualityFlyout = function () {
|
||||
|
||||
var flyout = $('.video-qualityFlyout');
|
||||
var elem = $('.videoQualityPopup').html(getQualityFlyoutHtml())
|
||||
.trigger('create')
|
||||
.popup("option", "positionTo", $('.videoQualityButton'));
|
||||
|
||||
if (!flyout.is(':visible')) {
|
||||
flyout.html(getQualityFlyoutHtml()).scrollTop(0);
|
||||
}
|
||||
|
||||
toggleFlyout(flyout, '.video-qualityButton');
|
||||
|
||||
//$('.videoQualityPopup').html(getQualityFlyoutHtml()).trigger('create').popup('open');
|
||||
elem.popup("open").parents(".ui-popup-container").css("margin-top", 30);
|
||||
};
|
||||
|
||||
self.showChaptersFlyout = function () {
|
||||
|
||||
var flyout = $('#video-chaptersFlyout');
|
||||
var elem = $('.videoChaptersPopup').html(getChaptersFlyoutHtml())
|
||||
.trigger('create')
|
||||
.popup("option", "positionTo", $('.videoChaptersButton'));
|
||||
|
||||
if (!flyout.is(':visible')) {
|
||||
flyout.html(getChaptersFlyoutHtml()).scrollTop(0);
|
||||
}
|
||||
|
||||
toggleFlyout(flyout, '#video-chaptersButton');
|
||||
elem.popup("open").parents(".ui-popup-container").css("margin-top", 30);
|
||||
};
|
||||
|
||||
self.showAudioTracksFlyout = function () {
|
||||
|
||||
var flyout = $('#video-audioTracksFlyout');
|
||||
var elem = $('.videoAudioPopup').html(getAudioTracksHtml())
|
||||
.trigger('create')
|
||||
.popup("option", "positionTo", $('.videoAudioButton'));
|
||||
|
||||
if (!flyout.is(':visible')) {
|
||||
|
||||
flyout.html(getAudioTracksHtml()).trigger('create').scrollTop(0);
|
||||
toggleFlyout(flyout, '#video-audioTracksButton');
|
||||
} else {
|
||||
toggleFlyout(flyout, '#video-audioTracksButton');
|
||||
}
|
||||
elem.popup("open").parents(".ui-popup-container").css("margin-top", 30);
|
||||
};
|
||||
|
||||
self.setAudioStreamIndex = function (index) {
|
||||
|
|
@ -250,6 +232,84 @@
|
|||
});
|
||||
};
|
||||
|
||||
self.updateNowPlayingInfo = function (item) {
|
||||
|
||||
if (!item) {
|
||||
throw new Error('item cannot be null');
|
||||
}
|
||||
|
||||
var mediaControls = $("#videoPlayer");
|
||||
|
||||
var state = self.getPlayerStateInternal(self.currentMediaElement, item, self.currentMediaSource);
|
||||
|
||||
var url = "";
|
||||
|
||||
if (state.NowPlayingItem.PrimaryImageTag) {
|
||||
|
||||
url = ApiClient.getScaledImageUrl(state.NowPlayingItem.PrimaryImageItemId, {
|
||||
type: "Primary",
|
||||
width: 150,
|
||||
tag: state.NowPlayingItem.PrimaryImageTag
|
||||
});
|
||||
}
|
||||
else if (state.NowPlayingItem.PrimaryImageTag) {
|
||||
|
||||
url = ApiClient.getScaledImageUrl(state.NowPlayingItem.PrimaryImageItemId, {
|
||||
type: "Primary",
|
||||
width: 150,
|
||||
tag: state.NowPlayingItem.PrimaryImageTag
|
||||
});
|
||||
}
|
||||
else if (state.NowPlayingItem.BackdropImageTag) {
|
||||
|
||||
url = ApiClient.getScaledImageUrl(state.NowPlayingItem.BackdropItemId, {
|
||||
type: "Backdrop",
|
||||
height: 300,
|
||||
tag: state.NowPlayingItem.BackdropImageTag,
|
||||
index: 0
|
||||
});
|
||||
|
||||
}
|
||||
else if (state.NowPlayingItem.ThumbImageTag) {
|
||||
|
||||
url = ApiClient.getScaledImageUrl(state.NowPlayingItem.ThumbImageItemId, {
|
||||
type: "Thumb",
|
||||
height: 300,
|
||||
tag: state.NowPlayingItem.ThumbImageTag
|
||||
});
|
||||
}
|
||||
|
||||
var nowPlayingTextElement = $('.nowPlayingText', mediaControls);
|
||||
var nameHtml = self.getNowPlayingNameHtml(state);
|
||||
|
||||
if (nameHtml.indexOf('<br/>') != -1) {
|
||||
nowPlayingTextElement.addClass('nowPlayingDoubleText');
|
||||
} else {
|
||||
nowPlayingTextElement.removeClass('nowPlayingDoubleText');
|
||||
}
|
||||
|
||||
if (url) {
|
||||
$('.nowPlayingImage', mediaControls).html('<img src="' + url + '" />');
|
||||
} else {
|
||||
$('.nowPlayingImage', mediaControls).html('');
|
||||
}
|
||||
|
||||
if (state.NowPlayingItem.LogoItemId) {
|
||||
|
||||
url = ApiClient.getScaledImageUrl(state.NowPlayingItem.LogoItemId, {
|
||||
type: "Logo",
|
||||
height: 40,
|
||||
tag: state.NowPlayingItem.LogoImageTag
|
||||
});
|
||||
|
||||
$('.videoTopControlsLogo', mediaControls).html('<img src="' + url + '" />');
|
||||
} else {
|
||||
$('.videoTopControlsLogo', mediaControls).html('');
|
||||
}
|
||||
|
||||
nowPlayingTextElement.html(nameHtml);
|
||||
};
|
||||
|
||||
function onPositionSliderChange() {
|
||||
|
||||
isPositionSliderActive = false;
|
||||
|
|
@ -282,40 +342,40 @@
|
|||
self.setVolume(vol * 100);
|
||||
});
|
||||
|
||||
$('#video-chaptersFlyout').on('click', '.mediaFlyoutOption', function () {
|
||||
$('.videoChaptersPopup').on('click', '.mediaPopupOption', function () {
|
||||
|
||||
var ticks = parseInt(this.getAttribute('data-positionticks'));
|
||||
|
||||
self.changeStream(ticks);
|
||||
|
||||
hideFlyout($('#video-chaptersFlyout'));
|
||||
$('.videoChaptersPopup').popup('close');
|
||||
});
|
||||
|
||||
$('#video-audioTracksFlyout').on('click', '.mediaFlyoutOption', function () {
|
||||
$('.videoAudioPopup').on('click', '.mediaPopupOption', function () {
|
||||
|
||||
if (!$(this).hasClass('selectedMediaFlyoutOption')) {
|
||||
if (!$(this).hasClass('selectedMediaPopupOption')) {
|
||||
var index = parseInt(this.getAttribute('data-index'));
|
||||
|
||||
self.setAudioStreamIndex(index);
|
||||
}
|
||||
|
||||
hideFlyout($('#video-audioTracksFlyout'));
|
||||
$('.videoAudioPopup').popup('close');
|
||||
});
|
||||
|
||||
$('#video-subtitleFlyout').on('click', '.mediaFlyoutOption', function () {
|
||||
$('.videoSubtitlePopup').on('click', '.mediaPopupOption', function () {
|
||||
|
||||
if (!$(this).hasClass('selectedMediaFlyoutOption')) {
|
||||
if (!$(this).hasClass('selectedMediaPopupOption')) {
|
||||
var index = parseInt(this.getAttribute('data-index'));
|
||||
|
||||
self.setSubtitleStreamIndex(index);
|
||||
}
|
||||
|
||||
hideFlyout($('#video-subtitleFlyout'));
|
||||
$('.videoSubtitlePopup').popup('close');
|
||||
});
|
||||
|
||||
$('.video-qualityFlyout').on('click', '.mediaFlyoutOption', function () {
|
||||
$('.videoQualityPopup').on('click', '.mediaPopupOption', function () {
|
||||
|
||||
if (!$(this).hasClass('selectedMediaFlyoutOption')) {
|
||||
if (!$(this).hasClass('selectedMediaPopupOption')) {
|
||||
|
||||
var maxWidth = parseInt(this.getAttribute('data-maxwidth'));
|
||||
var bitrate = parseInt(this.getAttribute('data-bitrate'));
|
||||
|
|
@ -329,14 +389,14 @@
|
|||
});
|
||||
}
|
||||
|
||||
hideFlyout($('.video-qualityFlyout'));
|
||||
$('.videoQualityPopup').popup('close');
|
||||
});
|
||||
|
||||
var trackChange = false;
|
||||
|
||||
var tooltip = $('<div id="slider-tooltip"></div>');
|
||||
|
||||
$("#videoControls .positionSliderContainer .slider").on("change", function (e) {
|
||||
$(".videoControls .positionSliderContainer .slider").on("change", function (e) {
|
||||
if (!trackChange) return;
|
||||
|
||||
var pct = $(this).val();
|
||||
|
|
@ -352,7 +412,7 @@
|
|||
}).on("slidestart", function (e) {
|
||||
trackChange = true;
|
||||
|
||||
var handle = $("#videoControls .positionSliderContainer .ui-slider-handle");
|
||||
var handle = $(".videoControls .positionSliderContainer .ui-slider-handle");
|
||||
|
||||
handle.after(tooltip);
|
||||
}).on("slidestop", function (e) {
|
||||
|
|
@ -361,32 +421,42 @@
|
|||
tooltip.remove();
|
||||
});
|
||||
|
||||
$('.video-qualityButton').on('click', function () {
|
||||
$('.videoSubtitleButton').on('click', function () {
|
||||
|
||||
self.showSubtitleMenu();
|
||||
});
|
||||
|
||||
$('.videoQualityButton').on('click', function () {
|
||||
|
||||
self.showQualityFlyout();
|
||||
});
|
||||
|
||||
$('.videoAudioButton').on('click', function () {
|
||||
|
||||
self.showAudioTracksFlyout();
|
||||
});
|
||||
|
||||
$('.videoChaptersButton').on('click', function () {
|
||||
|
||||
self.showChaptersFlyout();
|
||||
});
|
||||
});
|
||||
|
||||
function idleHandler() {
|
||||
|
||||
var video = $(".itemVideo");
|
||||
var videoControls = $("#videoControls");
|
||||
|
||||
if (timeout) {
|
||||
window.clearTimeout(timeout);
|
||||
}
|
||||
|
||||
if (idleState == true) {
|
||||
video.removeClass("cursor-inactive");
|
||||
videoControls.removeClass("inactive").addClass("active");
|
||||
$('.hiddenOnIdle').removeClass("inactive");
|
||||
}
|
||||
|
||||
idleState = false;
|
||||
|
||||
timeout = window.setTimeout(function () {
|
||||
idleState = true;
|
||||
video.addClass("cursor-inactive");
|
||||
videoControls.removeClass("active").addClass("inactive");
|
||||
$('.hiddenOnIdle').addClass("inactive");
|
||||
}, 4000);
|
||||
}
|
||||
|
||||
|
|
@ -434,99 +504,76 @@
|
|||
|
||||
}
|
||||
|
||||
function toggleFlyout(flyout, button) {
|
||||
|
||||
$(document.body).off("mousedown.mediaflyout").on("mousedown.mediaflyout", function (e) {
|
||||
|
||||
var elem = $(e.target);
|
||||
|
||||
var flyoutId = flyout[0].id;
|
||||
var safeItems = button + ',#' + flyoutId;
|
||||
|
||||
if (!elem.is(safeItems) && !elem.parents(safeItems).length) {
|
||||
|
||||
hideFlyout(flyout);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
var visible = $(flyout).is(":visible");
|
||||
|
||||
if (!visible) {
|
||||
|
||||
flyout.slideDown();
|
||||
|
||||
} else {
|
||||
|
||||
$(button).blur();
|
||||
|
||||
hideFlyout(flyout);
|
||||
}
|
||||
}
|
||||
|
||||
function hideFlyout(flyout) {
|
||||
|
||||
flyout.slideUp().empty();
|
||||
|
||||
$(document.body).off("mousedown.hidesearchhints");
|
||||
}
|
||||
|
||||
|
||||
function getChaptersFlyoutHtml() {
|
||||
|
||||
var html = '';
|
||||
|
||||
var item = self.currentItem;
|
||||
var currentTicks = self.getCurrentTicks();
|
||||
var chapters = item.Chapters || [];
|
||||
|
||||
var chapters = self.currentItem.Chapters || [];
|
||||
var html = '';
|
||||
html += '<div class="videoPlayerPopupContent">';
|
||||
html += '<ul data-role="listview" data-inset="true"><li data-role="list-divider">Scenes</li>';
|
||||
html += '</ul>';
|
||||
|
||||
for (var i = 0, length = chapters.length; i < length; i++) {
|
||||
html += '<div class="videoPlayerPopupScroller">';
|
||||
html += '<ul data-role="listview" data-inset="true">';
|
||||
|
||||
var chapter = chapters[i];
|
||||
var index = 0;
|
||||
|
||||
var isSelected = false;
|
||||
html += chapters.map(function (chapter) {
|
||||
|
||||
var cssClass = "mediaPopupOption";
|
||||
|
||||
var selected = false;
|
||||
|
||||
if (currentTicks >= chapter.StartPositionTicks) {
|
||||
|
||||
var nextChapter = chapters[i + 1];
|
||||
|
||||
isSelected = !nextChapter || currentTicks < nextChapter.StartPositionTicks;
|
||||
var nextChapter = chapters[index + 1];
|
||||
selected = !nextChapter || currentTicks < nextChapter.StartPositionTicks;
|
||||
}
|
||||
|
||||
if (isSelected) {
|
||||
html += '<div data-positionticks="' + chapter.StartPositionTicks + '" class="mediaFlyoutOption selectedMediaFlyoutOption">';
|
||||
} else {
|
||||
html += '<div data-positionticks="' + chapter.StartPositionTicks + '" class="mediaFlyoutOption">';
|
||||
}
|
||||
var optionHtml = '<li><a data-positionticks="' + chapter.StartPositionTicks + '" class="' + cssClass + '" href="#" style="padding-top:0;padding-bottom:0;">';
|
||||
|
||||
var imgUrl;
|
||||
var imgUrl = "css/images/media/chapterflyout.png";
|
||||
|
||||
if (chapter.ImageTag) {
|
||||
|
||||
imgUrl = ApiClient.getScaledImageUrl(self.currentItem.Id, {
|
||||
maxWidth: 100,
|
||||
optionHtml += '<img src="' + imgUrl + '" style="visibility:hidden;" />';
|
||||
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
|
||||
width: 160,
|
||||
tag: chapter.ImageTag,
|
||||
type: "Chapter",
|
||||
index: i
|
||||
index: index
|
||||
});
|
||||
optionHtml += '<div class="videoChapterPopupImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
|
||||
|
||||
} else {
|
||||
imgUrl = "css/images/media/chapterflyout.png";
|
||||
optionHtml += '<img src="' + imgUrl + '" />';
|
||||
}
|
||||
|
||||
html += '<img class="mediaFlyoutOptionImage" src="' + imgUrl + '" />';
|
||||
// TODO: Add some indicator if selected = true
|
||||
|
||||
html += '<div class="mediaFlyoutOptionContent">';
|
||||
optionHtml += '<p style="margin:12px 0 0;">';
|
||||
|
||||
var name = chapter.Name || "Chapter " + (i + 1);
|
||||
var textLines = [];
|
||||
textLines.push(chapter.Name);
|
||||
textLines.push(Dashboard.getDisplayTime(chapter.StartPositionTicks));
|
||||
|
||||
html += '<div class="mediaFlyoutOptionName">' + name + '</div>';
|
||||
html += '<div class="mediaFlyoutOptionSecondaryText">' + Dashboard.getDisplayTime(chapter.StartPositionTicks) + '</div>';
|
||||
optionHtml += textLines.join('<br/>');
|
||||
|
||||
html += '</div>';
|
||||
optionHtml += '</p>';
|
||||
|
||||
html += "</div>";
|
||||
}
|
||||
optionHtml += '</a></li>';
|
||||
|
||||
index++;
|
||||
|
||||
return optionHtml;
|
||||
|
||||
}).join('');
|
||||
|
||||
html += '</ul>';
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
|
@ -540,61 +587,73 @@
|
|||
var currentIndex = getParameterByName('AudioStreamIndex', self.currentMediaElement.currentSrc);
|
||||
|
||||
var html = '';
|
||||
html += '<div class="videoPlayerPopupContent">';
|
||||
html += '<ul data-role="listview" data-inset="true"><li data-role="list-divider">Audio Tracks</li>';
|
||||
html += '</ul>';
|
||||
|
||||
for (var i = 0, length = streams.length; i < length; i++) {
|
||||
html += '<div class="videoPlayerPopupScroller">';
|
||||
html += '<ul data-role="listview" data-inset="true">';
|
||||
|
||||
var stream = streams[i];
|
||||
html += streams.map(function (stream) {
|
||||
|
||||
if (stream.Index == currentIndex) {
|
||||
html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption selectedMediaFlyoutOption">';
|
||||
} else {
|
||||
html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption">';
|
||||
var cssClass = "mediaPopupOption";
|
||||
|
||||
var selected = stream.Index == currentIndex;
|
||||
|
||||
if (selected) {
|
||||
cssClass += ' selectedMediaPopupOption';
|
||||
}
|
||||
|
||||
html += '<img class="mediaFlyoutOptionImage" src="css/images/media/audioflyout.png" />';
|
||||
var optionHtml = '<li><a data-index="' + stream.Index + '" class="' + cssClass + '" href="#">';
|
||||
|
||||
html += '<div class="mediaFlyoutOptionContent">';
|
||||
optionHtml += '<p style="margin:0;">';
|
||||
|
||||
html += '<div class="mediaFlyoutOptionName">' + (stream.Language || 'Unknown language') + '</div>';
|
||||
if (selected) {
|
||||
optionHtml += '<img src="css/images/checkmarkgreen.png" style="width:18px;border-radius:3px;margin-right:.5em;vertical-align:middle;" />';
|
||||
}
|
||||
|
||||
var options = [];
|
||||
var textLines = [];
|
||||
textLines.push(stream.Language || 'Unknown language');
|
||||
|
||||
var attributes = [];
|
||||
|
||||
if (stream.Codec) {
|
||||
options.push(stream.Codec);
|
||||
attributes.push(stream.Codec);
|
||||
}
|
||||
if (stream.Profile) {
|
||||
options.push(stream.Profile);
|
||||
attributes.push(stream.Profile);
|
||||
}
|
||||
|
||||
if (stream.BitRate) {
|
||||
options.push((Math.floor(stream.BitRate / 1000)) + ' kbps');
|
||||
attributes.push((Math.floor(stream.BitRate / 1000)) + ' kbps');
|
||||
}
|
||||
|
||||
if (stream.Channels) {
|
||||
options.push(stream.Channels + ' ch');
|
||||
attributes.push(stream.Channels + ' ch');
|
||||
}
|
||||
|
||||
if (options.length) {
|
||||
html += '<div class="mediaFlyoutOptionSecondaryText">' + options.join(' • ') + '</div>';
|
||||
}
|
||||
|
||||
options = [];
|
||||
|
||||
if (stream.IsDefault) {
|
||||
options.push('Default');
|
||||
}
|
||||
if (stream.IsForced) {
|
||||
options.push('Forced');
|
||||
attributes.push('(D)');
|
||||
}
|
||||
|
||||
if (options.length) {
|
||||
html += '<div class="mediaFlyoutOptionSecondaryText">' + options.join(' • ') + '</div>';
|
||||
if (attributes.length) {
|
||||
textLines.push(attributes.join(' • '));
|
||||
}
|
||||
|
||||
html += "</div>";
|
||||
optionHtml += textLines.join('<br/>');
|
||||
|
||||
html += "</div>";
|
||||
}
|
||||
optionHtml += '</p>';
|
||||
|
||||
optionHtml += '</a></li>';
|
||||
|
||||
return optionHtml;
|
||||
|
||||
}).join('');
|
||||
|
||||
html += '</ul>';
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
|
@ -607,75 +666,80 @@
|
|||
|
||||
var currentIndex = self.currentSubtitleStreamIndex || -1;
|
||||
|
||||
var html = '';
|
||||
|
||||
streams.unshift({
|
||||
Index: -1,
|
||||
Language: "Off"
|
||||
});
|
||||
|
||||
for (var i = 0, length = streams.length; i < length; i++) {
|
||||
var html = '';
|
||||
html += '<div class="videoPlayerPopupContent">';
|
||||
html += '<ul data-role="listview" data-inset="true"><li data-role="list-divider">Subtitles</li>';
|
||||
html += '</ul>';
|
||||
|
||||
var stream = streams[i];
|
||||
html += '<div class="videoPlayerPopupScroller">';
|
||||
html += '<ul data-role="listview" data-inset="true">';
|
||||
|
||||
if (stream.Index == currentIndex) {
|
||||
html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption selectedMediaFlyoutOption">';
|
||||
} else {
|
||||
html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption">';
|
||||
html += streams.map(function (stream) {
|
||||
|
||||
var cssClass = "mediaPopupOption";
|
||||
|
||||
var selected = stream.Index == currentIndex;
|
||||
|
||||
if (selected) {
|
||||
cssClass += ' selectedMediaPopupOption';
|
||||
}
|
||||
|
||||
if (stream.Index != -1) {
|
||||
html += '<img class="mediaFlyoutOptionImage" src="css/images/media/subtitleflyout.png" />';
|
||||
} else {
|
||||
html += '<div class="mediaFlyoutOptionImage"></div>';
|
||||
var optionHtml = '<li><a data-index="' + stream.Index + '" class="' + cssClass + '" href="#">';
|
||||
|
||||
optionHtml += '<p style="margin:0;">';
|
||||
|
||||
if (selected) {
|
||||
optionHtml += '<img src="css/images/checkmarkgreen.png" style="width:18px;border-radius:3px;margin-right:.5em;vertical-align:middle;" />';
|
||||
}
|
||||
|
||||
html += '<div class="mediaFlyoutOptionContent">';
|
||||
|
||||
var options = [];
|
||||
|
||||
if (stream.Language == "Off") {
|
||||
options.push(' ');
|
||||
}
|
||||
|
||||
html += '<div class="mediaFlyoutOptionName">' + (stream.Language || 'Unknown language') + '</div>';
|
||||
var textLines = [];
|
||||
textLines.push(stream.Language || 'Unknown language');
|
||||
|
||||
if (stream.Codec) {
|
||||
options.push(stream.Codec);
|
||||
textLines.push(stream.Codec);
|
||||
}
|
||||
|
||||
if (options.length) {
|
||||
html += '<div class="mediaFlyoutOptionSecondaryText">' + options.join(' • ') + '</div>';
|
||||
}
|
||||
|
||||
options = [];
|
||||
var attributes = [];
|
||||
|
||||
if (stream.IsDefault) {
|
||||
options.push('Default');
|
||||
attributes.push('Default');
|
||||
}
|
||||
if (stream.IsForced) {
|
||||
options.push('Forced');
|
||||
attributes.push('Forced');
|
||||
}
|
||||
if (stream.IsExternal) {
|
||||
options.push('External');
|
||||
attributes.push('External');
|
||||
}
|
||||
|
||||
if (options.length) {
|
||||
html += '<div class="mediaFlyoutOptionSecondaryText">' + options.join(' • ') + '</div>';
|
||||
if (attributes.length) {
|
||||
textLines.push(attributes.join(' • '));
|
||||
}
|
||||
|
||||
html += "</div>";
|
||||
optionHtml += textLines.join('<br/>');
|
||||
|
||||
html += "</div>";
|
||||
}
|
||||
optionHtml += '</p>';
|
||||
|
||||
optionHtml += '</a></li>';
|
||||
|
||||
return optionHtml;
|
||||
|
||||
}).join('');
|
||||
|
||||
html += '</ul>';
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function getQualityFlyoutHtml() {
|
||||
|
||||
var html = '';
|
||||
|
||||
var currentSrc = self.currentMediaElement.currentSrc.toLowerCase();
|
||||
var isStatic = currentSrc.indexOf('static=true') != -1;
|
||||
|
||||
|
|
@ -689,26 +753,44 @@
|
|||
options[0].name = "Direct";
|
||||
}
|
||||
|
||||
for (var i = 0, length = options.length; i < length; i++) {
|
||||
var html = '';
|
||||
html += '<div class="videoPlayerPopupContent">';
|
||||
html += '<ul data-role="listview" data-inset="true"><li data-role="list-divider">Video Quality</li>';
|
||||
html += '</ul>';
|
||||
|
||||
var option = options[i];
|
||||
html += '<div class="videoPlayerPopupScroller">';
|
||||
html += '<ul data-role="listview" data-inset="true">';
|
||||
|
||||
var cssClass = "mediaFlyoutOption";
|
||||
html += options.map(function (option) {
|
||||
|
||||
var cssClass = "mediaPopupOption";
|
||||
|
||||
if (option.selected) {
|
||||
cssClass += " selectedMediaFlyoutOption";
|
||||
cssClass += ' selectedMediaPopupOption';
|
||||
}
|
||||
|
||||
html += '<div data-maxwidth="' + option.maxWidth + '" data-bitrate="' + option.bitrate + '" class="' + cssClass + '">';
|
||||
var optionHtml = '<li><a data-maxwidth="' + option.maxWidth + '" data-bitrate="' + option.bitrate + '" class="' + cssClass + '" href="#">';
|
||||
|
||||
html += '<div class="mediaFlyoutOptionContent">';
|
||||
optionHtml += '<p style="margin:0;">';
|
||||
|
||||
html += '<div class="mediaFlyoutOptionName" style="padding:.5em;">' + option.name + '</div>';
|
||||
if (option.selected) {
|
||||
optionHtml += '<img src="css/images/checkmarkgreen.png" style="width:18px;border-radius:3px;margin-right:.5em;vertical-align:middle;" />';
|
||||
}
|
||||
|
||||
html += "</div>";
|
||||
optionHtml += option.name;
|
||||
|
||||
html += "</div>";
|
||||
}
|
||||
optionHtml += '</p>';
|
||||
|
||||
optionHtml += '</a></li>';
|
||||
|
||||
return optionHtml;
|
||||
|
||||
}).join('');
|
||||
|
||||
html += '</ul>';
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
|
@ -805,7 +887,8 @@
|
|||
$('.itemVideo').on('mousemove.videoplayer keydown.videoplayer scroll.videoplayer', idleHandler).trigger('mousemove');
|
||||
|
||||
} else {
|
||||
$('#videoControls').removeClass("active inactive");
|
||||
$('.hiddenOnIdle').removeClass("inactive");
|
||||
|
||||
exitFullScreenToWindow();
|
||||
}
|
||||
|
||||
|
|
@ -897,7 +980,7 @@
|
|||
|
||||
self.startTimeTicksOffset = isStatic ? 0 : startPosition || 0;
|
||||
|
||||
var seekParam = isStatic && startPosition ? '#t=' + (startPosition / 10000000) : '';
|
||||
var seekParam = startPosition ? '#t=' + (startPosition / 10000000) : '';
|
||||
|
||||
var mp4VideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.mp4', $.extend({}, baseParams, {
|
||||
Static: isStatic,
|
||||
|
|
@ -911,7 +994,9 @@
|
|||
|
||||
// None of the browsers seem to like this
|
||||
EnableAutoStreamCopy: false
|
||||
})) + seekParam;
|
||||
}));
|
||||
|
||||
if (isStatic) mp4VideoUrl += seekParam;
|
||||
|
||||
var webmVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.webm', $.extend({}, baseParams, {
|
||||
VideoCodec: 'vpx',
|
||||
|
|
@ -920,36 +1005,49 @@
|
|||
videoBitrate: webmQuality.videoBitrate,
|
||||
audioBitrate: webmQuality.audioBitrate,
|
||||
EnableAutoStreamCopy: false
|
||||
})) + seekParam;
|
||||
}));
|
||||
|
||||
var hlsVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.m3u8', $.extend({}, baseParams, {
|
||||
timeStampOffsetMs: 0,
|
||||
maxWidth: m3U8Quality.maxWidth,
|
||||
videoBitrate: m3U8Quality.videoBitrate,
|
||||
audioBitrate: m3U8Quality.audioBitrate,
|
||||
VideoCodec: m3U8Quality.videoCodec,
|
||||
AudioCodec: m3U8Quality.audioCodec,
|
||||
profile: 'baseline',
|
||||
level: '3'
|
||||
})) + seekParam;
|
||||
if (isStatic) webmVideoUrl += seekParam;
|
||||
|
||||
var hlsVideoUrl;
|
||||
|
||||
if (item.RunTimeTicks) {
|
||||
hlsVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/master.m3u8', $.extend({}, baseParams, {
|
||||
timeStampOffsetMs: 0,
|
||||
maxWidth: m3U8Quality.maxWidth,
|
||||
videoBitrate: m3U8Quality.videoBitrate,
|
||||
audioBitrate: m3U8Quality.audioBitrate,
|
||||
VideoCodec: m3U8Quality.videoCodec,
|
||||
AudioCodec: m3U8Quality.audioCodec,
|
||||
profile: 'baseline',
|
||||
level: '3',
|
||||
StartTimeTicks: 0
|
||||
|
||||
})) + seekParam;
|
||||
|
||||
} else {
|
||||
hlsVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.m3u8', $.extend({}, baseParams, {
|
||||
timeStampOffsetMs: 0,
|
||||
maxWidth: m3U8Quality.maxWidth,
|
||||
videoBitrate: m3U8Quality.videoBitrate,
|
||||
audioBitrate: m3U8Quality.audioBitrate,
|
||||
VideoCodec: m3U8Quality.videoCodec,
|
||||
AudioCodec: m3U8Quality.audioCodec,
|
||||
profile: 'baseline',
|
||||
level: '3'
|
||||
})) + seekParam;
|
||||
}
|
||||
|
||||
//======================================================================================>
|
||||
|
||||
// Show loading animation
|
||||
$("html").css("cursor", "wait");
|
||||
|
||||
// Create video player
|
||||
var html = '';
|
||||
|
||||
var requiresControls = $.browser.msie || $.browser.android || ($.browser.webkit && !$.browser.chrome);
|
||||
var requiresNativeControls = $.browser.msie || $.browser.mobile;
|
||||
|
||||
// Can't autoplay in these browsers so we need to use the full controls
|
||||
if (requiresControls) {
|
||||
if ($.browser.msie) {
|
||||
html += '<video class="itemVideo" id="itemVideo" preload="none" autoplay="autoplay" controls="controls">';
|
||||
} else {
|
||||
html += '<video class="itemVideo" id="itemVideo" preload="none" autoplay controls>';
|
||||
}
|
||||
if (requiresNativeControls) {
|
||||
html += '<video class="itemVideo" id="itemVideo" preload="none" autoplay="autoplay" controls="controls">';
|
||||
} else {
|
||||
|
||||
// Chrome 35 won't play with preload none
|
||||
|
|
@ -991,10 +1089,9 @@
|
|||
html += '</video>';
|
||||
|
||||
var mediaPlayerContainer = $("#mediaPlayer").show();
|
||||
var videoControls = $('#videoControls', mediaPlayerContainer);
|
||||
var videoControls = $('.videoControls', mediaPlayerContainer);
|
||||
|
||||
//show stop button
|
||||
$('#video-stopButton', videoControls).show();
|
||||
$('#video-playButton', videoControls).hide();
|
||||
$('#video-pauseButton', videoControls).show();
|
||||
$('#video-previousTrackButton', videoControls).hide();
|
||||
|
|
@ -1002,35 +1099,50 @@
|
|||
|
||||
var videoElement = $('#videoElement', mediaPlayerContainer).prepend(html);
|
||||
|
||||
$('.video-qualityButton', videoControls).show();
|
||||
$('.videoQualityButton', videoControls).show();
|
||||
|
||||
if (mediaStreams.filter(function (s) {
|
||||
return s.Type == "Audio";
|
||||
}).length) {
|
||||
$('#video-audioTracksButton', videoControls).show();
|
||||
$('.videoAudioButton').show();
|
||||
} else {
|
||||
$('#video-audioTracksButton', videoControls).hide();
|
||||
$('.videoAudioButton').hide();
|
||||
}
|
||||
|
||||
if (subtitleStreams.length) {
|
||||
$('#video-subtitleButton', videoControls).show().prop("disabled", false);
|
||||
$('.videoSubtitleButton').show();
|
||||
} else {
|
||||
$('#video-subtitleButton', videoControls).hide().prop("disabled", true);
|
||||
;
|
||||
$('.videoSubtitleButton').hide();
|
||||
}
|
||||
|
||||
if (item.Chapters && item.Chapters.length) {
|
||||
$('#video-chaptersButton', videoControls).show();
|
||||
$('.videoChaptersButton').show();
|
||||
} else {
|
||||
$('#video-chaptersButton', videoControls).hide();
|
||||
$('.videoChaptersButton').hide();
|
||||
}
|
||||
|
||||
if (requiresControls) {
|
||||
if (requiresNativeControls) {
|
||||
$('#video-fullscreenButton', videoControls).hide();
|
||||
} else {
|
||||
$('#video-fullscreenButton', videoControls).show();
|
||||
}
|
||||
|
||||
if ($.browser.mobile) {
|
||||
$('.volumeSliderContainer', videoControls).addClass('hide');
|
||||
$('.muteButton', videoControls).addClass('hide');
|
||||
$('.unmuteButton', videoControls).addClass('hide');
|
||||
} else {
|
||||
$('.volumeSliderContainer', videoControls).removeClass('hide');
|
||||
$('.muteButton', videoControls).removeClass('hide');
|
||||
$('.unmuteButton', videoControls).removeClass('hide');
|
||||
}
|
||||
|
||||
if (requiresNativeControls) {
|
||||
videoControls.addClass('hide');
|
||||
} else {
|
||||
videoControls.removeClass('hide');
|
||||
}
|
||||
|
||||
var video = $("video", videoElement);
|
||||
|
||||
initialVolume = self.getSavedVolume();
|
||||
|
|
@ -1089,7 +1201,6 @@
|
|||
|
||||
self.clearPauseStop();
|
||||
|
||||
$("html").css("cursor", "default");
|
||||
self.resetEnhancements();
|
||||
|
||||
var errorCode = this.error ? this.error.code : '';
|
||||
|
|
@ -1118,22 +1229,6 @@
|
|||
|
||||
self.toggleFullscreen();
|
||||
|
||||
}).on("seeking.mediaplayerevent", function (e) {
|
||||
|
||||
$("html").css("cursor", "wait");
|
||||
|
||||
}).on("seeked.mediaplayerevent", function (e) {
|
||||
|
||||
$("html").css("cursor", "default");
|
||||
|
||||
}).on("loadstart.mediaplayerevent", function () {
|
||||
|
||||
$("html").css("cursor", "progress");
|
||||
|
||||
}).on("canplay.mediaplayerevent", function () {
|
||||
|
||||
$("html").css("cursor", "default");
|
||||
|
||||
}).on("ended.playbackstopped", function () {
|
||||
|
||||
currentTimeElement.empty();
|
||||
|
|
@ -1152,6 +1247,8 @@
|
|||
|
||||
self.currentSubtitleStreamIndex = mediaSource.DefaultSubtitleStreamIndex;
|
||||
|
||||
$('body').addClass('bodyWithPopupOpen');
|
||||
|
||||
return video[0];
|
||||
};
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue