mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
cleanup helper functions
This commit is contained in:
Luke Pulverenti
parent
356217a9b6
commit
4cdfe410b2
9 changed files with 56 additions and 1034 deletions
|
|
@ -595,7 +595,7 @@
|
|||
html += '<div class="posterItemText">' + chapterName + '</div>';
|
||||
html += '<div class="posterItemText">';
|
||||
|
||||
html += ticks_to_human(chapter.StartPositionTicks);
|
||||
html += Dashboard.getDisplayTime(chapter.StartPositionTicks);
|
||||
|
||||
html += '</div>';
|
||||
|
||||
|
|
@ -737,7 +737,7 @@
|
|||
html += '<div class="posterItemText">';
|
||||
|
||||
if (item.RunTimeTicks != "") {
|
||||
html += ticks_to_human(item.RunTimeTicks);
|
||||
html += Dashboard.getDisplayTime(item.RunTimeTicks);
|
||||
}
|
||||
else {
|
||||
html += " ";
|
||||
|
|
|
|||
|
|
@ -206,9 +206,9 @@
|
|||
html += "<div>";
|
||||
|
||||
if (item.RunTimeTicks) {
|
||||
html += DashboardPage.getDisplayText(connection.NowPlayingPositionTicks || 0) + " / ";
|
||||
html += Dashboard.getDisplayTime(connection.NowPlayingPositionTicks || 0) + " / ";
|
||||
|
||||
html += DashboardPage.getDisplayText(item.RunTimeTicks);
|
||||
html += Dashboard.getDisplayTime(item.RunTimeTicks);
|
||||
}
|
||||
|
||||
html += "</div>";
|
||||
|
|
@ -217,46 +217,6 @@
|
|||
return html;
|
||||
},
|
||||
|
||||
getDisplayText: function (ticks) {
|
||||
|
||||
var ticksPerHour = 36000000000;
|
||||
|
||||
var parts = [];
|
||||
|
||||
var hours = ticks / ticksPerHour;
|
||||
hours = parseInt(hours);
|
||||
|
||||
if (hours) {
|
||||
parts.push(hours);
|
||||
}
|
||||
|
||||
ticks -= (hours * ticksPerHour);
|
||||
|
||||
var ticksPerMinute = 600000000;
|
||||
|
||||
var minutes = ticks / ticksPerMinute;
|
||||
minutes = parseInt(minutes);
|
||||
|
||||
ticks -= (minutes * ticksPerMinute);
|
||||
|
||||
if (minutes < 10 && hours) {
|
||||
minutes = '0' + minutes;
|
||||
}
|
||||
parts.push(minutes);
|
||||
|
||||
var ticksPerSecond = 10000000;
|
||||
|
||||
var seconds = ticks / ticksPerSecond;
|
||||
seconds = parseInt(seconds);
|
||||
|
||||
if (seconds < 10) {
|
||||
seconds = '0' + seconds;
|
||||
}
|
||||
parts.push(seconds);
|
||||
|
||||
return parts.join(':');
|
||||
},
|
||||
|
||||
renderRunningTasks: function (dashboardInfo) {
|
||||
|
||||
var page = $.mobile.activePage;
|
||||
|
|
|
|||
|
|
@ -278,7 +278,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
var time = DashboardPage.getDisplayText(item.RunTimeTicks || 0);
|
||||
var time = Dashboard.getDisplayTime(item.RunTimeTicks || 0);
|
||||
|
||||
html += '<td class="tabletColumn">' + time + '</td>';
|
||||
|
||||
|
|
@ -911,7 +911,7 @@
|
|||
}
|
||||
else if (item.UserData && item.UserData.PlaybackPositionTicks && item.RunTimeTicks) {
|
||||
|
||||
tooltip = DashboardPage.getDisplayText(item.UserData.PlaybackPositionTicks) + " / " + DashboardPage.getDisplayText(item.RunTimeTicks);
|
||||
tooltip = Dashboard.getDisplayTime(item.UserData.PlaybackPositionTicks) + " / " + Dashboard.getDisplayTime(item.RunTimeTicks);
|
||||
|
||||
pct = (item.UserData.PlaybackPositionTicks / item.RunTimeTicks) * 100;
|
||||
}
|
||||
|
|
@ -1365,7 +1365,7 @@
|
|||
|
||||
if (item.Type == "Audio") {
|
||||
|
||||
miscInfo.push(DashboardPage.getDisplayText(item.RunTimeTicks));
|
||||
miscInfo.push(Dashboard.getDisplayTime(item.RunTimeTicks));
|
||||
} else {
|
||||
var minutes = item.RunTimeTicks / 600000000;
|
||||
|
||||
|
|
|
|||
|
|
@ -295,11 +295,11 @@
|
|||
// Convert to ticks
|
||||
ticks = Math.floor(ticks);
|
||||
|
||||
var timeText = DashboardPage.getDisplayText(ticks);
|
||||
var timeText = Dashboard.getDisplayTime(ticks);
|
||||
|
||||
if (curentDurationTicks) {
|
||||
|
||||
timeText += " / " + DashboardPage.getDisplayText(curentDurationTicks);
|
||||
timeText += " / " + Dashboard.getDisplayTime(curentDurationTicks);
|
||||
|
||||
if (updateSlider) {
|
||||
var percent = ticks / curentDurationTicks;
|
||||
|
|
@ -1116,7 +1116,7 @@
|
|||
var name = chapter.Name || "Chapter " + (i + 1);
|
||||
|
||||
html += '<div class="mediaFlyoutOptionName">' + name + '</div>';
|
||||
html += '<div class="mediaFlyoutOptionSecondaryText">' + DashboardPage.getDisplayText(chapter.StartPositionTicks) + '</div>';
|
||||
html += '<div class="mediaFlyoutOptionSecondaryText">' + Dashboard.getDisplayTime(chapter.StartPositionTicks) + '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
html += '<td><a href="#" data-index="' + i + '" class="lnkPlay"><img src="css/images/media/playcircle.png" style="height: 20px;" /></a></td>';
|
||||
html += '<td>' + name + '</td>';
|
||||
html += '<td>' + parentName + '</td>';
|
||||
html += '<td>' + ticks_to_human(item.RunTimeTicks) + '</td>';
|
||||
html += '<td>' + Dashboard.getDisplayTime(item.RunTimeTicks) + '</td>';
|
||||
html += '<td>' + LibraryBrowser.getUserDataIconsHtml(item) + '</td>';
|
||||
html += '<td><a href="#" data-index="' + i + '" class="lnkRemove"><img src="css/images/media/remove.png" style="height: 20px;" /></a></td>';
|
||||
html += '</tr>';
|
||||
|
|
|
|||
|
|
@ -375,7 +375,7 @@
|
|||
|
||||
html += '</td>';
|
||||
|
||||
html += '<td>' + name + '<br/>' + DashboardPage.getDisplayText(chapter.StartPositionTicks) + '</td>';
|
||||
html += '<td>' + name + '<br/>' + Dashboard.getDisplayTime(chapter.StartPositionTicks) + '</td>';
|
||||
|
||||
html += '</tr>';
|
||||
}
|
||||
|
|
@ -524,12 +524,12 @@
|
|||
|
||||
if (session.NowPlayingItem) {
|
||||
|
||||
html += DashboardPage.getDisplayText(session.NowPlayingPositionTicks || 0);
|
||||
html += Dashboard.getDisplayTime(session.NowPlayingPositionTicks || 0);
|
||||
|
||||
if (session.NowPlayingItem.RunTimeTicks) {
|
||||
|
||||
html += " / ";
|
||||
html += DashboardPage.getDisplayText(session.NowPlayingItem.RunTimeTicks);
|
||||
html += Dashboard.getDisplayTime(session.NowPlayingItem.RunTimeTicks);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -592,7 +592,7 @@
|
|||
html += '<td>' + video.Name;
|
||||
|
||||
if (video.RunTimeTicks) {
|
||||
html += '<br/>' + DashboardPage.getDisplayText(video.RunTimeTicks);
|
||||
html += '<br/>' + Dashboard.getDisplayTime(video.RunTimeTicks);
|
||||
}
|
||||
|
||||
html += '</td>';
|
||||
|
|
|
|||
|
|
@ -197,7 +197,7 @@
|
|||
}
|
||||
|
||||
else if (hint.RunTimeTicks) {
|
||||
html += '<div class="searchHintSecondaryText">' + DashboardPage.getDisplayText(hint.RunTimeTicks) + '</div>';
|
||||
html += '<div class="searchHintSecondaryText">' + Dashboard.getDisplayTime(hint.RunTimeTicks) + '</div>';
|
||||
}
|
||||
|
||||
html += '</div></div>';
|
||||
|
|
|
|||
|
|
@ -1100,6 +1100,46 @@ var Dashboard = {
|
|||
if (title) {
|
||||
document.title = title;
|
||||
}
|
||||
},
|
||||
|
||||
getDisplayTime: function (ticks) {
|
||||
|
||||
var ticksPerHour = 36000000000;
|
||||
|
||||
var parts = [];
|
||||
|
||||
var hours = ticks / ticksPerHour;
|
||||
hours = parseInt(hours);
|
||||
|
||||
if (hours) {
|
||||
parts.push(hours);
|
||||
}
|
||||
|
||||
ticks -= (hours * ticksPerHour);
|
||||
|
||||
var ticksPerMinute = 600000000;
|
||||
|
||||
var minutes = ticks / ticksPerMinute;
|
||||
minutes = parseInt(minutes);
|
||||
|
||||
ticks -= (minutes * ticksPerMinute);
|
||||
|
||||
if (minutes < 10 && hours) {
|
||||
minutes = '0' + minutes;
|
||||
}
|
||||
parts.push(minutes);
|
||||
|
||||
var ticksPerSecond = 10000000;
|
||||
|
||||
var seconds = ticks / ticksPerSecond;
|
||||
seconds = parseInt(seconds);
|
||||
|
||||
if (seconds < 10) {
|
||||
seconds = '0' + seconds;
|
||||
}
|
||||
parts.push(seconds);
|
||||
|
||||
return parts.join(':');
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,978 +0,0 @@
|
|||
//parse video player src URL
|
||||
function parse_src_url(url) {
|
||||
var src = url.replace("\?", "\&");
|
||||
var parts = src.split("/");
|
||||
var len = parts.length - 1;
|
||||
var query = parts[len].split("&");
|
||||
var array = new Array();
|
||||
|
||||
array['Type'] = parts[len - 2];
|
||||
array['item_id'] = parts[len - 1];
|
||||
|
||||
for (var i = 0; i < query.length; i++) {
|
||||
var pairs;
|
||||
if (i == 0) {
|
||||
pairs = query[i].split(".");
|
||||
} else {
|
||||
pairs = query[i].split("=");
|
||||
}
|
||||
|
||||
array[pairs[0]] = pairs[1];
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
var videoJSextension = {
|
||||
|
||||
/*
|
||||
Add our video quality selector button to the videojs controls. This takes
|
||||
a mandatory jQuery object of the <video> element we are setting up the
|
||||
videojs video for.
|
||||
*/
|
||||
setup_video: function ($video, item, defaults) {
|
||||
|
||||
// Add the stop button.
|
||||
_V_.merge(_V_.ControlBar.prototype.options.components, { StopButton: {} });
|
||||
|
||||
var vid_id = $video.attr('id'),
|
||||
available_res = ['ultra', 'high', 'medium', 'low'],
|
||||
default_res,
|
||||
vjs_sources = [], // This will be an array of arrays of objects, see the video.js api documentation for myPlayer.src()
|
||||
vjs_source = {},
|
||||
vjs_chapters = [], // This will be an array of arrays of objects, see the video.js api documentation for myPlayer.src()
|
||||
vjs_chapter = {},
|
||||
vjs_languages = [], // This will be an array of arrays of objects, see the video.js api documentation for myPlayer.src()
|
||||
vjs_language = {},
|
||||
vjs_subtitles = [], // This will be an array of arrays of objects, see the video.js api documentation for myPlayer.src()
|
||||
vjs_subtitle = {};
|
||||
|
||||
// Determine this video's default res (it might not have the globally determined default available)
|
||||
default_res = available_res[1];
|
||||
|
||||
// Put together the videojs source arrays for each available resolution
|
||||
$.each(available_res, function (i, res) {
|
||||
|
||||
vjs_sources[i] = [];
|
||||
|
||||
vjs_source = {};
|
||||
vjs_source.res = res;
|
||||
|
||||
vjs_sources[i].push(vjs_source);
|
||||
|
||||
});
|
||||
|
||||
_V_.ResolutionSelectorButton = _V_.ResolutionSelector.extend({
|
||||
buttonText: default_res,
|
||||
availableRes: vjs_sources
|
||||
});
|
||||
|
||||
// Add the resolution selector button.
|
||||
_V_.merge(_V_.ControlBar.prototype.options.components, { ResolutionSelectorButton: {} });
|
||||
|
||||
//chceck if chapters exist and add chapter selector
|
||||
if (item.Chapters && item.Chapters.length) {
|
||||
// Put together the videojs source arrays for each available chapter
|
||||
$.each(item.Chapters, function (i, chapter) {
|
||||
|
||||
vjs_chapters[i] = [];
|
||||
|
||||
vjs_chapter = {};
|
||||
vjs_chapter.Name = chapter.Name + " (" + ticks_to_human(chapter.StartPositionTicks) + ")";
|
||||
vjs_chapter.StartPositionTicks = chapter.StartPositionTicks;
|
||||
|
||||
vjs_chapters[i].push(vjs_chapter);
|
||||
|
||||
});
|
||||
|
||||
_V_.ChapterSelectorButton = _V_.ChapterSelector.extend({
|
||||
buttonText: '',
|
||||
Chapters: vjs_chapters
|
||||
});
|
||||
|
||||
// Add the chapter selector button.
|
||||
_V_.merge(_V_.ControlBar.prototype.options.components, { ChapterSelectorButton: {} });
|
||||
}
|
||||
|
||||
|
||||
//chceck if langauges exist and add language selector also subtitles
|
||||
if (item.MediaStreams && item.MediaStreams.length) {
|
||||
var subCount = 1;
|
||||
var langCount = 1;
|
||||
var defaultLanguageIndex = defaults.languageIndex || null;
|
||||
var defaultSubtitleIndex = defaults.subtitleIndex || 0;
|
||||
|
||||
// Put together the videojs source arrays for each available language and subtitle
|
||||
$.each(item.MediaStreams, function (i, stream) {
|
||||
var language = stream.Language || '';
|
||||
|
||||
if (stream.Type == "Audio") {
|
||||
vjs_languages[i] = [];
|
||||
vjs_language = {};
|
||||
|
||||
vjs_language.Name = langCount + ": " + language + " " + stream.Codec + " " + stream.Channels + "ch";
|
||||
vjs_language.index = i;
|
||||
|
||||
vjs_languages[i].push(vjs_language);
|
||||
|
||||
if (!defaultLanguageIndex) defaultLanguageIndex = stream.Index;
|
||||
|
||||
langCount++;
|
||||
}else if (stream.Type == "Subtitle") {
|
||||
vjs_subtitles[i] = [];
|
||||
vjs_subtitle = {};
|
||||
|
||||
vjs_subtitle.Name = subCount + ": " + language;
|
||||
vjs_subtitle.index = i;
|
||||
|
||||
vjs_subtitles[i].push(vjs_subtitle);
|
||||
|
||||
subCount++;
|
||||
}
|
||||
});
|
||||
|
||||
if (vjs_languages.length) {
|
||||
|
||||
_V_.LanguageSelectorButton = _V_.LanguageSelector.extend({
|
||||
buttonText: vjs_languages[defaultLanguageIndex][0].Name,
|
||||
Languages: vjs_languages
|
||||
});
|
||||
|
||||
// Add the language selector button.
|
||||
_V_.merge(_V_.ControlBar.prototype.options.components, { LanguageSelectorButton: {} });
|
||||
}
|
||||
|
||||
if (vjs_subtitles.length) {
|
||||
vjs_subtitles[0] = [];
|
||||
vjs_subtitles[0].push({Name: "Off", index: ''});
|
||||
_V_.SubtitleSelectorButton = _V_.SubtitleSelector.extend({
|
||||
buttonText: vjs_subtitles[defaultSubtitleIndex][0].Name,
|
||||
Subtitles: vjs_subtitles
|
||||
});
|
||||
|
||||
// Add the subtitle selector button.
|
||||
_V_.merge(_V_.ControlBar.prototype.options.components, { SubtitleSelectorButton: {} });
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
JS for the quality selector in video.js player
|
||||
*/
|
||||
|
||||
/*
|
||||
Define the base class for the quality selector button.
|
||||
Most of this code is copied from the _V_.TextTrackButton
|
||||
class.
|
||||
|
||||
https://github.com/zencoder/video-js/blob/master/src/tracks.js#L560)
|
||||
*/
|
||||
_V_.ResolutionSelector = _V_.Button.extend({
|
||||
|
||||
kind: "quality",
|
||||
className: "vjs-quality-button",
|
||||
|
||||
init: function (player, options) {
|
||||
|
||||
this._super(player, options);
|
||||
|
||||
// Save the starting resolution as a property of the player object
|
||||
player.options.currentResolution = this.buttonText;
|
||||
|
||||
this.menu = this.createMenu();
|
||||
|
||||
if (this.items.length === 0) {
|
||||
this.hide();
|
||||
}
|
||||
},
|
||||
|
||||
createMenu: function () {
|
||||
|
||||
var menu = new _V_.Menu(this.player);
|
||||
|
||||
// Add a title list item to the top
|
||||
menu.el.appendChild(_V_.createElement("li", {
|
||||
className: "vjs-menu-title",
|
||||
innerHTML: _V_.uc(this.kind)
|
||||
}));
|
||||
|
||||
this.items = this.createItems();
|
||||
|
||||
// Add menu items to the menu
|
||||
this.each(this.items, function (item) {
|
||||
menu.addItem(item);
|
||||
});
|
||||
|
||||
// Add list to element
|
||||
this.addComponent(menu);
|
||||
|
||||
return menu;
|
||||
},
|
||||
|
||||
// Override the default _V_.Button createElement so the button text isn't hidden
|
||||
createElement: function (type, attrs) {
|
||||
|
||||
// Add standard Aria and Tabindex info
|
||||
attrs = _V_.merge({
|
||||
className: this.buildCSSClass(),
|
||||
//innerHTML: '<div><span class="vjs-quality-text">' + this.buttonText + '</span></div>',
|
||||
role: "button",
|
||||
tabIndex: 0
|
||||
}, attrs);
|
||||
|
||||
return this._super(type, attrs);
|
||||
},
|
||||
|
||||
// Create a menu item for each text track
|
||||
createItems: function () {
|
||||
|
||||
var items = [];
|
||||
|
||||
this.each(this.availableRes, function (res) {
|
||||
|
||||
items.push(new _V_.ResolutionMenuItem(this.player, {
|
||||
|
||||
label: res[0].res,
|
||||
src: res
|
||||
}));
|
||||
});
|
||||
|
||||
return items;
|
||||
},
|
||||
|
||||
buildCSSClass: function () {
|
||||
|
||||
return this.className + " vjs-menu-button " + this._super();
|
||||
},
|
||||
|
||||
// Focus - Add keyboard functionality to element
|
||||
onFocus: function () {
|
||||
|
||||
// Show the menu, and keep showing when the menu items are in focus
|
||||
this.menu.lockShowing();
|
||||
this.menu.el.style.display = "block";
|
||||
|
||||
// When tabbing through, the menu should hide when focus goes from the last menu item to the next tabbed element.
|
||||
_V_.one(this.menu.el.childNodes[this.menu.el.childNodes.length - 1], "blur", this.proxy(function () {
|
||||
|
||||
this.menu.unlockShowing();
|
||||
}));
|
||||
},
|
||||
|
||||
// Can't turn off list display that we turned on with focus, because list would go away.
|
||||
onBlur: function () { },
|
||||
|
||||
onClick: function () {
|
||||
|
||||
/*
|
||||
When you click the button it adds focus, which will show the menu indefinitely.
|
||||
So we'll remove focus when the mouse leaves the button.
|
||||
Focus is needed for tab navigation.
|
||||
*/
|
||||
this.one('mouseout', this.proxy(function () {
|
||||
|
||||
this.menu.unlockShowing();
|
||||
this.el.blur();
|
||||
}));
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
Define the base class for the quality menu items
|
||||
*/
|
||||
_V_.ResolutionMenuItem = _V_.MenuItem.extend({
|
||||
|
||||
init: function (player, options) {
|
||||
|
||||
// Modify options for parent MenuItem class's init.
|
||||
options.selected = (options.label === player.options.currentResolution);
|
||||
this._super(player, options);
|
||||
|
||||
this.player.addEvent('changeRes', _V_.proxy(this, this.update));
|
||||
},
|
||||
|
||||
onClick: function () {
|
||||
|
||||
// Check that we are changing to a new quality (not the one we are already on)
|
||||
if (this.options.label === this.player.options.currentResolution)
|
||||
return;
|
||||
|
||||
var resolutions = new Array();
|
||||
resolutions['ultra'] = new Array('webm','mp4','ts','m3u8','ogv');
|
||||
resolutions['high'] = new Array('webm','mp4','ts','m3u8','ogv');
|
||||
resolutions['medium'] = new Array('webm','mp4','ts','m3u8','ogv');
|
||||
resolutions['low'] = new Array('webm','mp4','ts','m3u8','ogv');
|
||||
|
||||
resolutions['ultra']['webm'] = new Array(4000000, 128000, 1920, 1080);
|
||||
resolutions['ultra']['mp4'] = new Array(4000000, 128000, 1920, 1080);
|
||||
resolutions['ultra']['ts'] = new Array(4000000, 128000, 1920, 1080);
|
||||
resolutions['ultra']['m3u8'] = new Array(2500000, 128000, 1920, 1080);
|
||||
resolutions['ultra']['ogv'] = new Array(2500000, 128000, 1920, 1080);
|
||||
|
||||
resolutions['high']['webm'] = new Array(2500000, 128000, 1920, 1080);
|
||||
resolutions['high']['mp4'] = new Array(2500000, 128000, 1920, 1080);
|
||||
resolutions['high']['ts'] = new Array(2500000, 128000, 1920, 1080);
|
||||
resolutions['high']['m3u8'] = new Array(1500000, 128000, 1920, 1080);
|
||||
resolutions['high']['ogv'] = new Array(1500000, 128000, 1920, 1080);
|
||||
|
||||
resolutions['medium']['webm'] = new Array(1000000, 128000, 1280, 720);
|
||||
resolutions['medium']['mp4'] = new Array(1000000, 128000, 1280, 720);
|
||||
resolutions['medium']['ts'] = new Array(1000000, 128000, 1280, 720);
|
||||
resolutions['medium']['m3u8'] = new Array(750000, 128000, 1280, 720);
|
||||
resolutions['medium']['ogv'] = new Array(750000, 128000, 1280, 720);
|
||||
|
||||
resolutions['low']['webm'] = new Array(400000, 128000, 720, 480);
|
||||
resolutions['low']['mp4'] = new Array(400000, 128000, 720, 480);
|
||||
resolutions['low']['ts'] = new Array(400000, 128000, 720, 480);
|
||||
resolutions['low']['m3u8'] = new Array(200000, 128000, 720, 480);
|
||||
resolutions['low']['ogv'] = new Array(200000, 128000, 720, 480);
|
||||
|
||||
var currentTime = this.player.currentTime();
|
||||
|
||||
// Set the button text to the newly chosen quality
|
||||
jQuery(this.player.controlBar.el).find('.vjs-quality-text').html(this.options.label);
|
||||
|
||||
// Change the source and make sure we don't start the video over
|
||||
var currentSrc = this.player.tag.src;
|
||||
var src = parse_src_url(currentSrc);
|
||||
var newSrc = "/mediabrowser/" + src.Type + "/" + src.item_id + "/stream." + src.stream + "?audioChannels=" + src.audioChannels + "&audioBitrate=" + resolutions[this.options.src[0].res][src.stream][1] +
|
||||
"&videoBitrate=" + resolutions[this.options.src[0].res][src.stream][0] + "&maxWidth=" + resolutions[this.options.src[0].res][src.stream][2] + "&maxHeight=" + resolutions[this.options.src[0].res][src.stream][3] +
|
||||
"&videoCodec=" + src.videoCodec + "&audioCodec=" + src.audioCodec;
|
||||
|
||||
if (this.player.duration() == "Infinity") {
|
||||
if (currentSrc.indexOf("StartTimeTicks") >= 0) {
|
||||
var startTimeTicks = currentSrc.match(new RegExp("StartTimeTicks=[0-9]+", "g"));
|
||||
var startTime = startTimeTicks[0].replace("StartTimeTicks=", "");
|
||||
|
||||
newSrc += "&StartTimeTicks=" + Math.floor(parseInt(startTime) + (10000000 * currentTime));
|
||||
} else {
|
||||
newSrc += "&StartTimeTicks=" + Math.floor(10000000 * currentTime);
|
||||
}
|
||||
|
||||
this.player.src(newSrc).one('loadedmetadata', function () {
|
||||
this.play();
|
||||
});
|
||||
} else {
|
||||
newSrc += "&StartTimeTicks=0";
|
||||
this.player.src(newSrc).one('loadedmetadata', function () {
|
||||
this.currentTime(currentTime);
|
||||
this.play();
|
||||
});
|
||||
}
|
||||
|
||||
// Save the newly selected resolution in our player options property
|
||||
this.player.options.currentResolution = this.options.label;
|
||||
|
||||
// Update the classes to reflect the currently selected resolution
|
||||
this.player.triggerEvent('changeRes');
|
||||
},
|
||||
|
||||
update: function () {
|
||||
|
||||
if (this.options.label === this.player.options.currentResolution) {
|
||||
this.selected(true);
|
||||
} else {
|
||||
this.selected(false);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
JS for the chapter selector in video.js player
|
||||
*/
|
||||
|
||||
/*
|
||||
Define the base class for the chapter selector button.
|
||||
*/
|
||||
_V_.ChapterSelector = _V_.Button.extend({
|
||||
|
||||
kind: "chapter",
|
||||
className: "vjs-chapter-button",
|
||||
|
||||
init: function (player, options) {
|
||||
|
||||
this._super(player, options);
|
||||
|
||||
this.menu = this.createMenu();
|
||||
|
||||
if (this.items.length === 0) {
|
||||
this.hide();
|
||||
}
|
||||
},
|
||||
|
||||
createMenu: function () {
|
||||
|
||||
var menu = new _V_.Menu(this.player);
|
||||
|
||||
// Add a title list item to the top
|
||||
menu.el.appendChild(_V_.createElement("li", {
|
||||
className: "vjs-menu-title",
|
||||
innerHTML: _V_.uc(this.kind)
|
||||
}));
|
||||
|
||||
this.items = this.createItems();
|
||||
|
||||
// Add menu items to the menu
|
||||
this.each(this.items, function (item) {
|
||||
menu.addItem(item);
|
||||
});
|
||||
|
||||
// Add list to element
|
||||
this.addComponent(menu);
|
||||
|
||||
return menu;
|
||||
},
|
||||
|
||||
// Override the default _V_.Button createElement so the button text isn't hidden
|
||||
createElement: function (type, attrs) {
|
||||
|
||||
// Add standard Aria and Tabindex info
|
||||
attrs = _V_.merge({
|
||||
className: this.buildCSSClass(),
|
||||
//innerHTML: '<div><span class="vjs-chapter-text">' + this.buttonText + '</span></div>',
|
||||
innerHTML: '<div onmouseover="$(\'.vjs-chapter-button\').focus();$(\'.vjs-chapter-button\').click();"></div>',
|
||||
role: "button",
|
||||
tabIndex: 0
|
||||
}, attrs);
|
||||
|
||||
return this._super(type, attrs);
|
||||
},
|
||||
|
||||
// Create a menu item for each chapter
|
||||
createItems: function () {
|
||||
|
||||
var items = [];
|
||||
|
||||
this.each(this.Chapters, function (chapter) {
|
||||
|
||||
items.push(new _V_.ChapterMenuItem(this.player, {
|
||||
label: chapter[0].Name,
|
||||
src: chapter
|
||||
}));
|
||||
});
|
||||
|
||||
return items;
|
||||
},
|
||||
|
||||
buildCSSClass: function () {
|
||||
|
||||
return this.className + " vjs-menu-button " + this._super();
|
||||
},
|
||||
|
||||
// Focus - Add keyboard functionality to element
|
||||
onFocus: function () {
|
||||
|
||||
//find the current chapter and mark it active in the list
|
||||
//need to determine current position plus the start point of the file to know where we are.
|
||||
var currentTime = this.player.currentTime();
|
||||
var startTimeTicks = this.player.tag.src.match(new RegExp("StartTimeTicks=[0-9]+", "g"));
|
||||
var nowTicks = Math.floor(parseInt(startTimeTicks[0].replace("StartTimeTicks=","")) + (10000000 * currentTime));
|
||||
|
||||
var activeChapter;
|
||||
this.each(this.Chapters, function (chapter) {
|
||||
if (nowTicks > chapter[0].StartPositionTicks) {
|
||||
activeChapter = chapter[0];
|
||||
}
|
||||
});
|
||||
// Save the newly selected chapter in our player options property
|
||||
this.player.options.currentChapter = activeChapter.Name;
|
||||
|
||||
jQuery( this.player.controlBar.el ).find( '.vjs-chapter-button .vjs-menu .vjs-menu-item').removeClass('vjs-selected').each(function(){
|
||||
if ($(this).html() == activeChapter.Name) $(this).addClass('vjs-selected');
|
||||
});
|
||||
|
||||
// Show the menu, and keep showing when the menu items are in focus
|
||||
this.menu.lockShowing();
|
||||
this.menu.el.style.display = "block";
|
||||
|
||||
// When tabbing through, the menu should hide when focus goes from the last menu item to the next tabbed element.
|
||||
_V_.one(this.menu.el.childNodes[this.menu.el.childNodes.length - 1], "blur", this.proxy(function () {
|
||||
|
||||
this.menu.unlockShowing();
|
||||
}));
|
||||
},
|
||||
|
||||
|
||||
// Can't turn off list display that we turned on with focus, because list would go away.
|
||||
onBlur: function () { },
|
||||
|
||||
onClick: function () {
|
||||
|
||||
/*
|
||||
When you click the button it adds focus, which will show the menu indefinitely.
|
||||
So we'll remove focus when the mouse leaves the button.
|
||||
Focus is needed for tab navigation.
|
||||
*/
|
||||
this.one('mouseout', this.proxy(function () {
|
||||
|
||||
this.menu.unlockShowing();
|
||||
this.el.blur();
|
||||
}));
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
Define the base class for the chapter menu items
|
||||
*/
|
||||
_V_.ChapterMenuItem = _V_.MenuItem.extend({
|
||||
|
||||
init: function (player, options) {
|
||||
|
||||
// Modify options for parent MenuItem class's init.
|
||||
//options.selected = ( options.label === player.options.currentResolution );
|
||||
this._super(player, options);
|
||||
|
||||
this.player.addEvent('changeChapter', _V_.proxy(this, this.update));
|
||||
},
|
||||
|
||||
onClick: function () {
|
||||
|
||||
// Set the button text to the newly chosen chapter
|
||||
//jQuery( this.player.controlBar.el ).find( '.vjs-chapter-text' ).html( this.options.label );
|
||||
|
||||
if (this.player.duration() == "Infinity") {
|
||||
|
||||
var currentSrc = this.player.tag.src;
|
||||
|
||||
var newSrc;
|
||||
|
||||
if (currentSrc.indexOf("StartTimeTicks") >= 0) {
|
||||
newSrc = currentSrc.replace(new RegExp("StartTimeTicks=[0-9]+", "g"), "StartTimeTicks=" + this.options.src[0].StartPositionTicks);
|
||||
} else {
|
||||
newSrc = currentSrc + "&StartTimeTicks=" + this.options.src[0].StartPositionTicks;
|
||||
}
|
||||
|
||||
this.player.src(newSrc).one('loadedmetadata', function () {
|
||||
this.play();
|
||||
});
|
||||
} else {
|
||||
//figure out the time from ticks
|
||||
var currentTime = parseFloat(this.options.src[0].StartPositionTicks) / 10000000;
|
||||
|
||||
this.player.currentTime(currentTime);
|
||||
}
|
||||
|
||||
// Save the newly selected chapter in our player options property
|
||||
this.player.options.currentChapter = this.options.label;
|
||||
|
||||
// Update the classes to reflect the currently selected chapter
|
||||
this.player.triggerEvent('changeChapter');
|
||||
},
|
||||
|
||||
update: function () {
|
||||
if (this.options.label === this.player.options.currentChapter) {
|
||||
this.selected(true);
|
||||
} else {
|
||||
this.selected(false);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
JS for the stop button in video.js player
|
||||
*/
|
||||
|
||||
/*
|
||||
Define the base class for the stop button.
|
||||
*/
|
||||
|
||||
_V_.StopButton = _V_.Button.extend({
|
||||
|
||||
kind: "stop",
|
||||
className: "vjs-stop-button",
|
||||
|
||||
init: function (player, options) {
|
||||
|
||||
this._super(player, options);
|
||||
|
||||
},
|
||||
|
||||
buildCSSClass: function () {
|
||||
|
||||
return this.className + " vjs-menu-button " + this._super();
|
||||
},
|
||||
|
||||
onClick: function () {
|
||||
MediaPlayer.stop();
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
JS for the subtitle selector in video.js player
|
||||
*/
|
||||
|
||||
/*
|
||||
Define the base class for the subtitle selector button.
|
||||
*/
|
||||
_V_.SubtitleSelector = _V_.Button.extend({
|
||||
|
||||
kind: "subtitle",
|
||||
className: "vjs-subtitle-button",
|
||||
|
||||
init: function (player, options) {
|
||||
|
||||
this._super(player, options);
|
||||
|
||||
// Save the starting subtitle track as a property of the player object
|
||||
player.options.currentSubtitle = this.buttonText;
|
||||
|
||||
this.menu = this.createMenu();
|
||||
|
||||
if (this.items.length === 0) {
|
||||
this.hide();
|
||||
}
|
||||
},
|
||||
|
||||
createMenu: function () {
|
||||
|
||||
var menu = new _V_.Menu(this.player);
|
||||
|
||||
// Add a title list item to the top
|
||||
menu.el.appendChild(_V_.createElement("li", {
|
||||
className: "vjs-menu-title",
|
||||
innerHTML: _V_.uc(this.kind)
|
||||
}));
|
||||
|
||||
this.items = this.createItems();
|
||||
|
||||
// Add menu items to the menu
|
||||
this.each(this.items, function (item) {
|
||||
menu.addItem(item);
|
||||
});
|
||||
|
||||
// Add list to element
|
||||
this.addComponent(menu);
|
||||
|
||||
return menu;
|
||||
},
|
||||
|
||||
// Override the default _V_.Button createElement so the button text isn't hidden
|
||||
createElement: function (type, attrs) {
|
||||
|
||||
// Add standard Aria and Tabindex info
|
||||
attrs = _V_.merge({
|
||||
className: this.buildCSSClass(),
|
||||
//innerHTML: '<div><span class="vjs-chapter-text">' + this.buttonText + '</span></div>',
|
||||
role: "button",
|
||||
tabIndex: 0
|
||||
}, attrs);
|
||||
|
||||
return this._super(type, attrs);
|
||||
},
|
||||
|
||||
// Create a menu item for each subtitle
|
||||
createItems: function () {
|
||||
|
||||
var items = [];
|
||||
|
||||
this.each(this.Subtitles, function (subtitle) {
|
||||
if (subtitle && subtitle.length) {
|
||||
items.push(new _V_.SubtitleMenuItem(this.player, {
|
||||
label: subtitle[0].Name,
|
||||
src: subtitle
|
||||
}));
|
||||
}
|
||||
});
|
||||
|
||||
return items;
|
||||
},
|
||||
|
||||
buildCSSClass: function () {
|
||||
|
||||
return this.className + " vjs-menu-button " + this._super();
|
||||
},
|
||||
|
||||
// Focus - Add keyboard functionality to element
|
||||
onFocus: function () {
|
||||
|
||||
// Show the menu, and keep showing when the menu items are in focus
|
||||
this.menu.lockShowing();
|
||||
this.menu.el.style.display = "block";
|
||||
|
||||
// When tabbing through, the menu should hide when focus goes from the last menu item to the next tabbed element.
|
||||
_V_.one(this.menu.el.childNodes[this.menu.el.childNodes.length - 1], "blur", this.proxy(function () {
|
||||
|
||||
this.menu.unlockShowing();
|
||||
}));
|
||||
},
|
||||
|
||||
|
||||
// Can't turn off list display that we turned on with focus, because list would go away.
|
||||
onBlur: function () { },
|
||||
|
||||
onClick: function () {
|
||||
|
||||
/*
|
||||
When you click the button it adds focus, which will show the menu indefinitely.
|
||||
So we'll remove focus when the mouse leaves the button.
|
||||
Focus is needed for tab navigation.
|
||||
*/
|
||||
this.one('mouseout', this.proxy(function () {
|
||||
|
||||
this.menu.unlockShowing();
|
||||
this.el.blur();
|
||||
}));
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
Define the base class for the subtitle menu items
|
||||
*/
|
||||
_V_.SubtitleMenuItem = _V_.MenuItem.extend({
|
||||
|
||||
init: function (player, options) {
|
||||
|
||||
// Modify options for parent MenuItem class's init.
|
||||
options.selected = ( options.label === player.options.currentSubtitle );
|
||||
this._super(player, options);
|
||||
|
||||
this.player.addEvent('changeSubtitle', _V_.proxy(this, this.update));
|
||||
},
|
||||
|
||||
onClick: function () {
|
||||
|
||||
// Check that we are changing to a new subtitle (not the one we are already on)
|
||||
if (this.options.label === this.player.options.currentSubtitle)
|
||||
return;
|
||||
|
||||
var currentTime = this.player.currentTime();
|
||||
|
||||
// Set the button text to the newly chosen subtitle
|
||||
jQuery(this.player.controlBar.el).find('.vjs-quality-text').html(this.options.label);
|
||||
|
||||
// Change the source and make sure we don't start the video over
|
||||
var currentSrc = this.player.tag.src;
|
||||
var src = parse_src_url(currentSrc);
|
||||
|
||||
var newSrc = "/mediabrowser/" + src.Type + "/" + src.item_id + "/stream." + src.stream + "?audioChannels=" + src.audioChannels + "&audioBitrate=" + src.audioBitrate +
|
||||
"&videoBitrate=" + src.videoBitrate + "&maxWidth=" + src.maxWidth + "&maxHeight=" + src.maxHeight +
|
||||
"&videoCodec=" + src.videoCodec + "&audioCodec=" + src.audioCodec +
|
||||
"&AudioStreamIndex=" + src.AudioStreamIndex + "&SubtitleStreamIndex=" + this.options.src[0].index;
|
||||
|
||||
if (this.player.duration() == "Infinity") {
|
||||
if (currentSrc.indexOf("StartTimeTicks") >= 0) {
|
||||
var startTimeTicks = currentSrc.match(new RegExp("StartTimeTicks=[0-9]+", "g"));
|
||||
var startTime = startTimeTicks[0].replace("StartTimeTicks=", "");
|
||||
|
||||
newSrc += "&StartTimeTicks=" + Math.floor(parseInt(startTime) + (10000000 * currentTime));
|
||||
} else {
|
||||
newSrc += "&StartTimeTicks=" + Math.floor(10000000 * currentTime);
|
||||
}
|
||||
|
||||
this.player.src(newSrc).one('loadedmetadata', function () {
|
||||
this.play();
|
||||
});
|
||||
} else {
|
||||
newSrc += "&StartTimeTicks=0";
|
||||
this.player.src(newSrc).one('loadedmetadata', function () {
|
||||
this.currentTime(currentTime);
|
||||
this.play();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Save the newly selected subtitle in our player options property
|
||||
this.player.options.currentSubtitle = this.options.label;
|
||||
|
||||
// Update the classes to reflect the currently selected subtitle
|
||||
this.player.triggerEvent('changeSubtitle');
|
||||
},
|
||||
|
||||
update: function () {
|
||||
if (this.options.label === this.player.options.currentSubtitle) {
|
||||
this.selected(true);
|
||||
} else {
|
||||
this.selected(false);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
JS for the language selector in video.js player
|
||||
*/
|
||||
|
||||
/*
|
||||
Define the base class for the language selector button.
|
||||
*/
|
||||
_V_.LanguageSelector = _V_.Button.extend({
|
||||
|
||||
kind: "Audio",
|
||||
className: "vjs-language-button",
|
||||
|
||||
init: function (player, options) {
|
||||
|
||||
this._super(player, options);
|
||||
|
||||
// Save the starting language as a property of the player object
|
||||
player.options.currentLanguage = this.buttonText;
|
||||
|
||||
this.menu = this.createMenu();
|
||||
|
||||
if (this.items.length === 0) {
|
||||
this.hide();
|
||||
}
|
||||
},
|
||||
|
||||
createMenu: function () {
|
||||
|
||||
var menu = new _V_.Menu(this.player);
|
||||
|
||||
// Add a title list item to the top
|
||||
menu.el.appendChild(_V_.createElement("li", {
|
||||
className: "vjs-menu-title",
|
||||
innerHTML: _V_.uc(this.kind)
|
||||
}));
|
||||
|
||||
this.items = this.createItems();
|
||||
|
||||
// Add menu items to the menu
|
||||
this.each(this.items, function (item) {
|
||||
menu.addItem(item);
|
||||
});
|
||||
|
||||
// Add list to element
|
||||
this.addComponent(menu);
|
||||
|
||||
return menu;
|
||||
},
|
||||
|
||||
// Override the default _V_.Button createElement so the button text isn't hidden
|
||||
createElement: function (type, attrs) {
|
||||
|
||||
// Add standard Aria and Tabindex info
|
||||
attrs = _V_.merge({
|
||||
className: this.buildCSSClass(),
|
||||
//innerHTML: '<div><span class="vjs-chapter-text">' + this.buttonText + '</span></div>',
|
||||
role: "button",
|
||||
tabIndex: 0
|
||||
}, attrs);
|
||||
|
||||
return this._super(type, attrs);
|
||||
},
|
||||
|
||||
// Create a menu item for each subtitle
|
||||
createItems: function () {
|
||||
|
||||
var items = [];
|
||||
|
||||
this.each(this.Languages, function (language) {
|
||||
if (language && language.length) {
|
||||
items.push(new _V_.LanguageMenuItem(this.player, {
|
||||
label: language[0].Name,
|
||||
src: language
|
||||
}));
|
||||
}
|
||||
});
|
||||
|
||||
return items;
|
||||
},
|
||||
|
||||
buildCSSClass: function () {
|
||||
|
||||
return this.className + " vjs-menu-button " + this._super();
|
||||
},
|
||||
|
||||
// Focus - Add keyboard functionality to element
|
||||
onFocus: function () {
|
||||
|
||||
// Show the menu, and keep showing when the menu items are in focus
|
||||
this.menu.lockShowing();
|
||||
this.menu.el.style.display = "block";
|
||||
|
||||
// When tabbing through, the menu should hide when focus goes from the last menu item to the next tabbed element.
|
||||
_V_.one(this.menu.el.childNodes[this.menu.el.childNodes.length - 1], "blur", this.proxy(function () {
|
||||
|
||||
this.menu.unlockShowing();
|
||||
}));
|
||||
},
|
||||
|
||||
|
||||
// Can't turn off list display that we turned on with focus, because list would go away.
|
||||
onBlur: function () { },
|
||||
|
||||
onClick: function () {
|
||||
|
||||
/*
|
||||
When you click the button it adds focus, which will show the menu indefinitely.
|
||||
So we'll remove focus when the mouse leaves the button.
|
||||
Focus is needed for tab navigation.
|
||||
*/
|
||||
this.one('mouseout', this.proxy(function () {
|
||||
|
||||
this.menu.unlockShowing();
|
||||
this.el.blur();
|
||||
}));
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
Define the base class for the language menu items
|
||||
*/
|
||||
_V_.LanguageMenuItem = _V_.MenuItem.extend({
|
||||
|
||||
init: function (player, options) {
|
||||
|
||||
// Modify options for parent MenuItem class's init.
|
||||
options.selected = ( options.label === player.options.currentLanguage );
|
||||
this._super(player, options);
|
||||
|
||||
this.player.addEvent('changeLanguage', _V_.proxy(this, this.update));
|
||||
},
|
||||
|
||||
onClick: function () {
|
||||
|
||||
// Check that we are changing to a new language (not the one we are already on)
|
||||
if (this.options.label === this.player.options.currentLanguage)
|
||||
return;
|
||||
|
||||
// Change the source and make sure we don't start the video over
|
||||
var currentTime = this.player.currentTime();
|
||||
var currentSrc = this.player.tag.src;
|
||||
var src = parse_src_url(currentSrc);
|
||||
|
||||
var newSrc = "/mediabrowser/" + src.Type + "/" + src.item_id + "/stream." + src.stream + "?audioChannels=" + src.audioChannels + "&audioBitrate=" + src.audioBitrate +
|
||||
"&videoBitrate=" + src.videoBitrate + "&maxWidth=" + src.maxWidth + "&maxHeight=" + src.maxHeight +
|
||||
"&videoCodec=" + src.videoCodec + "&audioCodec=" + src.audioCodec +
|
||||
"&AudioStreamIndex=" + this.options.src[0].index + "&SubtitleStreamIndex=" + src.SubtitleStreamIndex;
|
||||
|
||||
if (this.player.duration() == "Infinity") {
|
||||
if (currentSrc.indexOf("StartTimeTicks") >= 0) {
|
||||
var startTimeTicks = currentSrc.match(new RegExp("StartTimeTicks=[0-9]+", "g"));
|
||||
var startTime = startTimeTicks[0].replace("StartTimeTicks=", "");
|
||||
|
||||
newSrc += "&StartTimeTicks=" + Math.floor(parseInt(startTime) + (10000000 * currentTime));
|
||||
} else {
|
||||
newSrc += "&StartTimeTicks=" + Math.floor(10000000 * currentTime);
|
||||
}
|
||||
|
||||
this.player.src(newSrc).one('loadedmetadata', function () {
|
||||
this.play();
|
||||
});
|
||||
} else {
|
||||
newSrc += "&StartTimeTicks=0";
|
||||
this.player.src(newSrc).one('loadedmetadata', function () {
|
||||
this.currentTime(currentTime);
|
||||
this.play();
|
||||
});
|
||||
}
|
||||
|
||||
// Save the newly selected language in our player options property
|
||||
this.player.options.currentLanguage = this.options.label;
|
||||
|
||||
// Update the classes to reflect the currently selected language
|
||||
this.player.triggerEvent('changeLanguage');
|
||||
},
|
||||
|
||||
update: function () {
|
||||
if (this.options.label === this.player.options.currentLanguage) {
|
||||
this.selected(true);
|
||||
} else {
|
||||
this.selected(false);
|
||||
}
|
||||
}
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue