jellyfin-web/dashboard-ui/scripts/mediaplayer.js

1298 lines
39 KiB
JavaScript
Raw Normal View History

(function (document, setTimeout, clearTimeout, screen, localStorage, $, setInterval, window) {
2013-02-20 18:33:05 -07:00
2013-04-10 14:03:28 -07:00
function mediaPlayer() {
2013-05-23 18:47:07 -07:00
2013-04-10 14:03:28 -07:00
var self = this;
2013-04-08 21:26:02 -07:00
2013-04-10 14:03:28 -07:00
var testableVideoElement = document.createElement('video');
var currentMediaElement;
var currentProgressInterval;
2013-05-23 13:09:01 -07:00
var currentItem;
2014-03-22 09:16:43 -07:00
var currentMediaSource;
2014-01-10 06:52:01 -07:00
var canClientSeek;
var currentPlaylistIndex = 0;
2013-05-23 13:09:01 -07:00
2014-03-31 14:43:49 -07:00
self.currentDurationTicks = null;
2014-03-29 08:40:32 -07:00
self.startTimeTicksOffset = null;
2013-06-07 09:06:32 -07:00
self.playlist = [];
2014-03-29 08:40:32 -07:00
self.isLocalPlayer = true;
2014-04-06 10:53:23 -07:00
self.isDefaultPlayer = true;
2014-03-29 09:58:49 -07:00
self.name = 'Html5 Player';
self.getTargets = function () {
var targets = [{
name: 'My Browser',
2014-03-29 11:20:42 -07:00
id: ApiClient.deviceId(),
playerName: self.name,
playableMediaTypes: ['Audio', 'Video'],
2014-04-13 10:27:13 -07:00
isLocalPlayer: true,
supportedCommands: Dashboard.getSupportedRemoteCommands()
2014-03-29 09:58:49 -07:00
}];
return targets;
};
2014-03-29 08:40:32 -07:00
self.updateCanClientSeek = function (elem) {
2014-01-10 06:52:01 -07:00
var duration = elem.duration;
canClientSeek = duration && !isNaN(duration) && duration != Number.POSITIVE_INFINITY && duration != Number.NEGATIVE_INFINITY;
};
2013-05-23 13:09:01 -07:00
self.getCurrentTicks = function (mediaElement) {
return Math.floor(10000000 * (mediaElement || currentMediaElement).currentTime) + self.startTimeTicksOffset;
};
2013-05-25 21:52:14 -07:00
self.clearPauseStop = function () {
if (self.pauseStop) {
console.log('clearing pause stop timer');
window.clearTimeout(self.pauseStop);
self.pauseStop = null;
}
};
self.playNextAfterEnded = function () {
2013-06-07 10:23:23 -07:00
$(this).off('ended.playnext');
2013-05-23 13:09:01 -07:00
self.nextTrack();
};
2013-05-23 13:09:01 -07:00
2014-05-07 11:38:50 -07:00
self.startProgressInterval = function () {
2013-05-23 13:09:01 -07:00
clearProgressInterval();
2014-01-04 08:41:35 -07:00
var intervalTime = ApiClient.isWebSocketOpen() ? 2000 : 20000;
2013-05-23 13:09:01 -07:00
currentProgressInterval = setInterval(function () {
2013-05-23 15:39:51 -07:00
if (currentMediaElement) {
2014-05-07 11:38:50 -07:00
sendProgressUpdate();
2013-05-23 15:39:51 -07:00
}
2013-04-08 21:26:02 -07:00
2013-05-23 13:09:01 -07:00
}, intervalTime);
};
2014-01-10 06:52:01 -07:00
self.getTranscodingExtension = function () {
2014-01-08 21:45:09 -07:00
var media = testableVideoElement;
2014-01-10 06:52:01 -07:00
2014-01-08 21:45:09 -07:00
// safari
2014-01-10 06:52:01 -07:00
if (media.canPlayType('application/x-mpegURL').replace(/no/, '') ||
media.canPlayType('application/vnd.apple.mpegURL').replace(/no/, '')) {
2014-01-08 21:45:09 -07:00
return '.m3u8';
}
// Chrome or IE with plugin installed
2014-04-06 10:53:23 -07:00
if (canPlayWebm()) {
2014-01-08 21:45:09 -07:00
return '.webm';
}
2014-01-10 06:52:01 -07:00
2014-01-08 21:45:09 -07:00
return '.mp4';
};
2013-05-23 13:09:01 -07:00
self.changeStream = function (ticks, params) {
2013-05-23 18:47:07 -07:00
var element = currentMediaElement;
2014-01-10 06:52:01 -07:00
if (canClientSeek && params == null) {
2013-05-23 18:47:07 -07:00
2013-05-25 18:53:34 -07:00
element.currentTime = ticks / (1000 * 10000);
2013-05-23 18:47:07 -07:00
} else {
2013-05-25 21:52:14 -07:00
params = params || {};
2013-05-23 18:47:07 -07:00
2013-05-25 21:52:14 -07:00
var currentSrc = element.currentSrc;
2014-01-29 14:54:40 -07:00
2014-04-30 08:07:02 -07:00
var transcodingExtension = self.getTranscodingExtension();
var isStatic;
2014-04-11 20:48:57 -07:00
if (currentItem.MediaType == "Video") {
2014-04-30 08:07:02 -07:00
2014-04-11 20:48:57 -07:00
if (params.AudioStreamIndex != null) {
currentSrc = replaceQueryString(currentSrc, 'AudioStreamIndex', params.AudioStreamIndex);
}
if (params.SubtitleStreamIndex != null) {
currentSrc = replaceQueryString(currentSrc, 'SubtitleStreamIndex', (params.SubtitleStreamIndex == -1 ? '' : params.SubtitleStreamIndex));
}
2014-01-08 21:45:09 -07:00
2014-04-30 08:07:02 -07:00
var maxWidth = params.MaxWidth || getParameterByName('MaxWidth', currentSrc);
var audioStreamIndex = params.AudioStreamIndex == null ? getParameterByName('AudioStreamIndex', currentSrc) : params.AudioStreamIndex;
var subtitleStreamIndex = params.SubtitleStreamIndex == null ? getParameterByName('SubtitleStreamIndex', currentSrc) : params.SubtitleStreamIndex;
var videoBitrate = parseInt(getParameterByName('VideoBitrate', currentSrc) || '0');
var audioBitrate = parseInt(getParameterByName('AudioBitrate', currentSrc) || '0');
var bitrate = params.Bitrate || (videoBitrate + audioBitrate);
2014-04-11 20:48:57 -07:00
var finalParams = self.getFinalVideoParams(currentMediaSource, maxWidth, bitrate, audioStreamIndex, subtitleStreamIndex, transcodingExtension);
2014-03-27 12:30:21 -07:00
2014-04-11 20:48:57 -07:00
currentSrc = replaceQueryString(currentSrc, 'MaxWidth', finalParams.maxWidth);
currentSrc = replaceQueryString(currentSrc, 'VideoBitrate', finalParams.videoBitrate);
2014-03-27 12:30:21 -07:00
2014-04-11 20:48:57 -07:00
currentSrc = replaceQueryString(currentSrc, 'VideoCodec', finalParams.videoCodec);
currentSrc = replaceQueryString(currentSrc, 'profile', finalParams.profile || '');
currentSrc = replaceQueryString(currentSrc, 'level', finalParams.level || '');
if (finalParams.isStatic) {
currentSrc = currentSrc.replace('.webm', '.mp4').replace('.m3u8', '.mp4');
} else {
currentSrc = currentSrc.replace('.mp4', transcodingExtension).replace('.m4v', transcodingExtension);
}
currentSrc = replaceQueryString(currentSrc, 'AudioBitrate', finalParams.audioBitrate);
currentSrc = replaceQueryString(currentSrc, 'Static', finalParams.isStatic);
currentSrc = replaceQueryString(currentSrc, 'AudioCodec', finalParams.audioCodec);
isStatic = finalParams.isStatic;
2014-04-02 14:55:19 -07:00
}
2014-04-11 20:48:57 -07:00
if (isStatic || !ticks) {
2014-04-02 14:55:19 -07:00
currentSrc = replaceQueryString(currentSrc, 'starttimeticks', '');
} else {
2014-03-27 12:30:21 -07:00
currentSrc = replaceQueryString(currentSrc, 'starttimeticks', ticks);
2014-01-08 21:45:09 -07:00
}
2013-05-23 18:47:07 -07:00
clearProgressInterval();
2014-04-11 20:48:57 -07:00
$(element).off('ended.playbackstopped').off('ended.playnext').one("play", function () {
2013-05-23 18:47:07 -07:00
self.updateCanClientSeek(this);
2014-01-10 06:52:01 -07:00
2014-04-11 20:48:57 -07:00
$(this).on('ended.playbackstopped', self.onPlaybackStopped).on('ended.playnext', self.playNextAfterEnded);
2014-05-07 11:38:50 -07:00
self.startProgressInterval();
sendProgressUpdate();
2013-05-23 18:47:07 -07:00
});
2014-04-11 20:48:57 -07:00
if (currentItem.MediaType == "Video") {
ApiClient.stopActiveEncodings().done(function () {
2014-04-11 20:48:57 -07:00
self.startTimeTicksOffset = ticks;
element.src = currentSrc;
});
} else {
self.startTimeTicksOffset = ticks;
element.src = currentSrc;
2014-04-11 20:48:57 -07:00
element.play();
}
2013-05-23 18:47:07 -07:00
}
};
2013-04-30 12:13:06 -07:00
self.setCurrentTime = function (ticks, positionSlider, currentTimeElement) {
2013-05-23 13:09:01 -07:00
// Convert to ticks
ticks = Math.floor(ticks);
2013-06-07 10:29:33 -07:00
var timeText = Dashboard.getDisplayTime(ticks);
2013-05-23 13:09:01 -07:00
2014-03-31 14:43:49 -07:00
if (self.currentDurationTicks) {
2013-05-23 13:09:01 -07:00
2014-03-31 14:43:49 -07:00
timeText += " / " + Dashboard.getDisplayTime(self.currentDurationTicks);
2013-05-23 13:09:01 -07:00
if (positionSlider) {
2014-03-31 14:43:49 -07:00
var percent = ticks / self.currentDurationTicks;
2013-05-23 13:09:01 -07:00
percent *= 100;
positionSlider.val(percent).slider('enable').slider('refresh');
2013-04-30 12:13:06 -07:00
}
2013-05-24 07:35:15 -07:00
} else {
if (positionSlider) {
positionSlider.slider('disable').slider('refresh');
}
}
if (currentTimeElement) {
currentTimeElement.html(timeText);
2013-05-24 07:35:15 -07:00
}
2013-05-23 13:09:01 -07:00
var state = self.getPlayerStateInternal(currentMediaElement, currentItem, currentMediaSource);
$(self).trigger('positionchange', [state]);
};
2013-04-30 10:21:21 -07:00
2014-03-22 09:16:43 -07:00
self.canPlayVideoDirect = function (mediaSource, videoStream, audioStream, subtitleStream, maxWidth, bitrate) {
2014-01-08 13:29:09 -07:00
2014-04-02 14:55:19 -07:00
if (!mediaSource) {
throw new Error('Null mediaSource');
}
if (!videoStream) {
2014-04-03 15:50:04 -07:00
return false;
2014-04-02 14:55:19 -07:00
}
2014-04-06 10:53:23 -07:00
if (mediaSource.VideoType != "VideoFile") {
console.log('Transcoding because the content is not a video file');
2014-01-08 13:29:09 -07:00
return false;
}
2014-01-29 14:54:40 -07:00
2014-01-08 13:29:09 -07:00
if ((videoStream.Codec || '').toLowerCase().indexOf('h264') == -1) {
console.log('Transcoding because the content is not h264');
2014-01-08 13:29:09 -07:00
return false;
}
if (audioStream && !canPlayAudioStreamDirect(audioStream)) {
console.log('Transcoding because the audio cannot be played directly.');
return false;
}
2014-01-08 13:29:09 -07:00
if (subtitleStream) {
console.log('Transcoding because subtitles are required');
return false;
}
2014-01-29 14:54:40 -07:00
if (!videoStream.Width || videoStream.Width > maxWidth) {
console.log('Transcoding because resolution is too high');
return false;
}
2014-01-29 14:54:40 -07:00
2014-04-06 10:53:23 -07:00
if (!mediaSource.Bitrate || mediaSource.Bitrate > bitrate) {
console.log('Transcoding because bitrate is too high');
2014-01-08 13:29:09 -07:00
return false;
}
2014-04-02 14:55:19 -07:00
var extension = (mediaSource.Container || '').toLowerCase();
2014-01-10 06:52:01 -07:00
if (extension == 'm4v') {
return $.browser.chrome;
}
2014-01-08 13:29:09 -07:00
2014-04-02 14:55:19 -07:00
return extension == 'mp4';
};
2014-01-08 21:45:09 -07:00
2014-03-22 09:16:43 -07:00
self.getFinalVideoParams = function (mediaSource, maxWidth, bitrate, audioStreamIndex, subtitleStreamIndex, transcodingExtension) {
2014-01-08 21:45:09 -07:00
2014-03-22 09:16:43 -07:00
var mediaStreams = mediaSource.MediaStreams;
2014-03-20 20:31:40 -07:00
var videoStream = mediaStreams.filter(function (stream) {
return stream.Type === "Video";
})[0];
2014-03-20 20:31:40 -07:00
var audioStream = mediaStreams.filter(function (stream) {
return stream.Index === audioStreamIndex;
})[0];
2014-03-20 20:31:40 -07:00
var subtitleStream = mediaStreams.filter(function (stream) {
return stream.Index === subtitleStreamIndex;
})[0];
2014-01-29 14:54:40 -07:00
2014-03-22 09:16:43 -07:00
var canPlayDirect = self.canPlayVideoDirect(mediaSource, videoStream, audioStream, subtitleStream, maxWidth, bitrate);
2014-01-08 13:29:09 -07:00
var audioBitrate = bitrate >= 700000 ? 128000 : 64000;
2014-01-08 13:29:09 -07:00
var videoBitrate = bitrate - audioBitrate;
2014-01-10 06:52:01 -07:00
2014-03-27 12:30:21 -07:00
var params = {
isStatic: canPlayDirect,
maxWidth: maxWidth,
audioCodec: transcodingExtension == '.webm' ? 'vorbis' : 'aac',
videoCodec: transcodingExtension == '.webm' ? 'vpx' : 'h264',
audioBitrate: audioBitrate,
videoBitrate: videoBitrate
};
2014-03-29 08:40:32 -07:00
2014-03-27 12:30:21 -07:00
if (params.videoCodec == 'h264') {
params.profile = 'baseline';
params.level = '3';
}
return params;
2014-03-20 20:31:40 -07:00
};
2014-01-08 13:29:09 -07:00
2014-03-29 08:40:32 -07:00
self.canQueueMediaType = function (mediaType) {
2013-04-08 21:16:32 -07:00
2014-03-29 08:40:32 -07:00
return currentItem && currentItem.MediaType == mediaType;
};
2013-05-24 19:45:12 -07:00
2014-03-29 12:02:43 -07:00
function translateItemsForPlayback(items) {
var deferred = $.Deferred();
var firstItem = items[0];
var promise;
if (firstItem.IsFolder) {
promise = self.getItemsForPlayback({
ParentId: firstItem.Id,
Filters: "IsNotFolder",
Recursive: true,
SortBy: "SortName",
MediaTypes: "Audio,Video"
});
}
else if (firstItem.Type == "MusicArtist") {
2014-04-02 14:55:19 -07:00
2014-03-29 12:02:43 -07:00
promise = self.getItemsForPlayback({
Artists: firstItem.Name,
Filters: "IsNotFolder",
Recursive: true,
SortBy: "SortName",
MediaTypes: "Audio"
});
}
else if (firstItem.Type == "MusicGenre") {
2014-04-02 14:55:19 -07:00
2014-03-29 12:02:43 -07:00
promise = self.getItemsForPlayback({
Genres: firstItem.Name,
Filters: "IsNotFolder",
Recursive: true,
SortBy: "SortName",
MediaTypes: "Audio"
});
}
if (promise) {
promise.done(function (result) {
deferred.resolveWith(null, [result.Items]);
});
} else {
deferred.resolveWith(null, [items]);
}
return deferred.promise();
}
2014-03-29 08:40:32 -07:00
self.play = function (options) {
2013-05-24 19:45:12 -07:00
2014-03-29 08:40:32 -07:00
Dashboard.getCurrentUser().done(function (user) {
2014-03-29 08:40:32 -07:00
if (options.items) {
2014-03-29 12:02:43 -07:00
translateItemsForPlayback(options.items).done(function (items) {
2014-03-29 12:02:43 -07:00
self.playInternal(items[0], options.startPositionTicks, user);
self.playlist = items;
currentPlaylistIndex = 0;
});
2013-06-07 09:06:32 -07:00
2014-03-29 08:40:32 -07:00
} else {
2013-06-07 09:06:32 -07:00
2014-03-29 08:40:32 -07:00
self.getItemsForPlayback({
2013-06-07 09:06:32 -07:00
2014-03-29 08:40:32 -07:00
Ids: options.ids.join(',')
2014-03-29 08:40:32 -07:00
}).done(function (result) {
2013-05-24 19:45:12 -07:00
2014-03-29 12:02:43 -07:00
translateItemsForPlayback(result.Items).done(function (items) {
2014-03-29 12:02:43 -07:00
self.playInternal(items[0], options.startPositionTicks, user);
2013-06-07 09:06:32 -07:00
2014-03-29 12:02:43 -07:00
self.playlist = items;
currentPlaylistIndex = 0;
});
2013-06-07 09:06:32 -07:00
2014-03-29 08:40:32 -07:00
});
}
});
};
2014-03-29 08:40:32 -07:00
self.getBitrateSetting = function () {
2014-03-20 21:52:46 -07:00
return parseInt(localStorage.getItem('preferredVideoBitrate') || '') || 1500000;
};
2014-03-22 09:16:43 -07:00
function getOptimalMediaSource(mediaType, versions) {
2014-03-20 21:52:46 -07:00
var optimalVersion;
if (mediaType == 'Video') {
var bitrateSetting = self.getBitrateSetting();
var maxAllowedWidth = Math.max(screen.height, screen.width);
optimalVersion = versions.filter(function (v) {
var videoStream = v.MediaStreams.filter(function (s) {
return s.Type == 'Video';
})[0];
var audioStream = v.MediaStreams.filter(function (s) {
return s.Type == 'Audio';
})[0];
return self.canPlayVideoDirect(v, videoStream, audioStream, null, maxAllowedWidth, bitrateSetting);
})[0];
}
2014-03-20 20:31:40 -07:00
2014-03-20 21:52:46 -07:00
return optimalVersion || versions[0];
2014-03-20 20:31:40 -07:00
}
2013-06-07 09:06:32 -07:00
self.playInternal = function (item, startPosition, user) {
2013-07-11 13:25:12 -07:00
if (item == null) {
throw new Error("item cannot be null");
}
2013-06-07 10:23:23 -07:00
if (self.isPlaying()) {
2013-04-10 14:03:28 -07:00
self.stop();
}
2013-04-08 21:16:32 -07:00
2013-04-10 14:03:28 -07:00
var mediaElement;
2013-04-08 21:16:32 -07:00
2013-04-10 14:03:28 -07:00
if (item.MediaType === "Video") {
2013-04-08 21:16:32 -07:00
currentItem = item;
2014-03-22 09:16:43 -07:00
currentMediaSource = getOptimalMediaSource(item.MediaType, item.MediaSources);
2014-03-20 20:31:40 -07:00
2014-03-22 09:16:43 -07:00
videoPlayer(self, item, currentMediaSource, startPosition, user);
2014-03-20 20:31:40 -07:00
mediaElement = self.initVideoPlayer();
2014-03-31 14:43:49 -07:00
self.currentDurationTicks = currentMediaSource.RunTimeTicks;
2014-03-20 20:31:40 -07:00
2013-04-10 14:03:28 -07:00
} else if (item.MediaType === "Audio") {
2013-04-08 21:16:32 -07:00
2014-03-20 20:31:40 -07:00
currentItem = item;
2014-03-22 09:16:43 -07:00
currentMediaSource = getOptimalMediaSource(item.MediaType, item.MediaSources);
2014-03-20 20:31:40 -07:00
2014-03-22 09:16:43 -07:00
mediaElement = playAudio(item, currentMediaSource, startPosition);
2014-03-31 14:43:49 -07:00
self.currentDurationTicks = currentMediaSource.RunTimeTicks;
2014-03-20 20:31:40 -07:00
2013-06-07 09:06:32 -07:00
} else {
throw new Error("Unrecognized media type");
2013-04-10 14:03:28 -07:00
}
2013-04-08 21:16:32 -07:00
2013-04-10 14:03:28 -07:00
currentMediaElement = mediaElement;
2013-04-08 21:16:32 -07:00
if (item.MediaType === "Video") {
self.updateNowPlayingInfo(item);
}
};
self.updateNowPlayingInfo = function (item) {
if (!item) {
throw new Error('item cannot be null');
}
2014-04-11 20:48:57 -07:00
var mediaControls = $("#videoControls");
var state = self.getPlayerStateInternal(currentMediaElement, item, currentMediaSource);
2013-04-10 14:03:28 -07:00
var url = "";
if (state.primaryImageTag) {
2013-05-25 18:53:34 -07:00
url = ApiClient.getImageUrl(state.primaryImageItemId, {
2013-05-25 18:53:34 -07:00
type: "Primary",
height: 80,
tag: state.primaryImageTag
2013-05-25 18:53:34 -07:00
});
}
else if (state.backdropImageTag) {
2013-04-10 14:03:28 -07:00
url = ApiClient.getImageUrl(state.backdropItemId, {
2013-04-10 14:03:28 -07:00
type: "Backdrop",
2013-05-25 18:53:34 -07:00
height: 80,
tag: state.backdropImageTag,
index: 0
2013-04-10 14:03:28 -07:00
});
} else if (state.thumbImageTag) {
url = ApiClient.getImageUrl(state.thumbImageItemId, {
2013-04-10 14:03:28 -07:00
type: "Thumb",
2013-05-25 18:53:34 -07:00
height: 80,
tag: state.thumbImageTag
2013-04-10 14:03:28 -07:00
});
2014-01-02 21:58:22 -07:00
}
2014-03-17 18:45:28 -07:00
else if (item.Type == "TvChannel" || item.Type == "Recording") {
2014-01-02 21:58:22 -07:00
url = "css/images/items/detail/tv.png";
}
else if (item.MediaType == "Audio") {
url = "css/images/items/detail/audio.png";
}
else {
2013-04-10 14:03:28 -07:00
url = "css/images/items/detail/video.png";
}
2013-04-08 21:16:32 -07:00
var nowPlayingTextElement = $('.nowPlayingText', mediaControls);
2014-04-13 10:27:13 -07:00
var nameHtml = self.getNowPlayingNameHtml(state);
2013-04-08 21:16:32 -07:00
2014-04-13 10:27:13 -07:00
if (nameHtml.indexOf('<br/>') != -1) {
nowPlayingTextElement.addClass('nowPlayingDoubleText');
} else {
nowPlayingTextElement.removeClass('nowPlayingDoubleText');
}
$('.nowPlayingImage', mediaControls).html('<img src="' + url + '" />');
2014-04-13 10:27:13 -07:00
nowPlayingTextElement.html(nameHtml);
};
self.getNowPlayingNameHtml = function (playerState) {
2014-04-22 10:25:54 -07:00
var nowPlayingItem = playerState.NowPlayingItem;
var topText = nowPlayingItem.Name;
2014-04-13 10:27:13 -07:00
2014-04-22 10:25:54 -07:00
if (nowPlayingItem.MediaType == 'Video') {
if (nowPlayingItem.IndexNumber != null) {
topText = nowPlayingItem.IndexNumber + " - " + topText;
2014-04-13 10:27:13 -07:00
}
2014-04-22 10:25:54 -07:00
if (nowPlayingItem.ParentIndexNumber != null) {
topText = nowPlayingItem.ParentIndexNumber + "." + topText;
2014-04-13 10:27:13 -07:00
}
}
var bottomText = '';
2014-04-22 10:25:54 -07:00
if (nowPlayingItem.Artists && nowPlayingItem.Artists.length) {
2014-04-13 10:27:13 -07:00
bottomText = topText;
2014-04-22 10:25:54 -07:00
topText = nowPlayingItem.Artists[0];
2014-04-13 10:27:13 -07:00
}
2014-04-22 10:25:54 -07:00
else if (nowPlayingItem.SeriesName || nowPlayingItem.Album) {
2014-04-13 10:27:13 -07:00
bottomText = topText;
2014-04-22 10:25:54 -07:00
topText = nowPlayingItem.SeriesName || nowPlayingItem.Album;
2014-04-13 10:27:13 -07:00
}
2014-04-22 10:25:54 -07:00
else if (nowPlayingItem.ProductionYear) {
bottomText = nowPlayingItem.ProductionYear;
2014-04-13 10:27:13 -07:00
}
return bottomText ? topText + '<br/>' + bottomText : topText;
};
self.displayContent = function (options) {
2014-04-14 20:54:52 -07:00
2014-04-13 10:27:13 -07:00
// Handle it the same as a remote control command
Dashboard.onBrowseCommand({
ItemName: options.itemName,
ItemType: options.itemType,
ItemId: options.itemId,
Context: options.context
});
2013-04-10 14:03:28 -07:00
};
2013-06-07 09:06:32 -07:00
self.getItemsForPlayback = function (query) {
var userId = Dashboard.getCurrentUserId();
query.Limit = query.Limit || 100;
2013-08-09 08:55:22 -07:00
query.Fields = getItemFields;
2014-03-29 08:40:32 -07:00
query.ExcludeLocationTypes = "Virtual";
2013-06-07 09:06:32 -07:00
return ApiClient.getItems(userId, query);
};
self.removeFromPlaylist = function (index) {
2013-06-07 10:23:23 -07:00
2013-06-07 09:06:32 -07:00
self.playlist.remove(index);
2013-06-07 10:23:23 -07:00
2013-05-23 13:09:01 -07:00
};
2013-06-07 09:06:32 -07:00
// Gets or sets the current playlist index
2013-06-07 10:23:23 -07:00
self.currentPlaylistIndex = function (i) {
2013-06-07 09:06:32 -07:00
if (i == null) {
return currentPlaylistIndex;
}
2013-05-23 13:09:01 -07:00
2013-06-07 09:06:32 -07:00
var newItem = self.playlist[i];
2013-05-23 13:09:01 -07:00
2013-06-07 09:06:32 -07:00
Dashboard.getCurrentUser().done(function (user) {
2013-05-23 13:09:01 -07:00
2013-06-07 09:06:32 -07:00
self.playInternal(newItem, 0, user);
2013-06-07 10:23:23 -07:00
currentPlaylistIndex = i;
2013-06-07 09:06:32 -07:00
});
2013-04-30 10:21:21 -07:00
};
self.nextTrack = function () {
2013-05-23 13:09:01 -07:00
2013-06-07 09:06:32 -07:00
var newIndex = currentPlaylistIndex + 1;
var newItem = self.playlist[newIndex];
2013-05-23 13:09:01 -07:00
if (newItem) {
Dashboard.getCurrentUser().done(function (user) {
2013-06-07 09:06:32 -07:00
self.playInternal(newItem, 0, user);
currentPlaylistIndex = newIndex;
});
}
2013-05-23 13:09:01 -07:00
};
2013-08-09 08:55:22 -07:00
self.previousTrack = function () {
var newIndex = currentPlaylistIndex - 1;
if (newIndex >= 0) {
var newItem = self.playlist[newIndex];
if (newItem) {
Dashboard.getCurrentUser().done(function (user) {
self.playInternal(newItem, 0, user);
currentPlaylistIndex = newIndex;
});
}
}
};
2013-11-30 11:32:39 -07:00
self.queueItemsNext = function (items) {
var insertIndex = 1;
for (var i = 0, length = items.length; i < length; i++) {
self.playlist.splice(insertIndex, 0, items[i]);
insertIndex++;
}
};
2013-11-29 23:07:45 -07:00
self.queueItems = function (items) {
2013-06-07 09:06:32 -07:00
2013-11-29 23:07:45 -07:00
for (var i = 0, length = items.length; i < length; i++) {
2013-06-07 09:06:32 -07:00
2013-11-29 23:07:45 -07:00
self.playlist.push(items[i]);
}
2013-04-30 10:21:21 -07:00
};
2014-03-29 08:40:32 -07:00
self.queue = function (options) {
2013-06-07 09:06:32 -07:00
2014-01-18 10:58:05 -07:00
if (!currentMediaElement) {
2014-03-29 08:40:32 -07:00
self.play(options);
2014-01-18 10:58:05 -07:00
return;
}
2014-01-29 14:54:40 -07:00
2014-03-29 08:40:32 -07:00
Dashboard.getCurrentUser().done(function (user) {
2013-06-07 09:06:32 -07:00
2014-03-29 08:40:32 -07:00
if (options.items) {
2014-03-29 12:02:43 -07:00
translateItemsForPlayback(options.items).done(function (items) {
self.queueItems(items);
});
2014-03-29 08:40:32 -07:00
} else {
2013-06-07 09:06:32 -07:00
self.getItemsForPlayback({
2014-03-29 08:40:32 -07:00
Ids: options.ids.join(',')
2013-06-07 09:06:32 -07:00
}).done(function (result) {
2014-03-29 12:02:43 -07:00
translateItemsForPlayback(result.Items).done(function (items) {
2013-06-07 09:06:32 -07:00
2014-03-29 12:02:43 -07:00
self.queueItems(items);
});
2013-06-07 09:06:32 -07:00
2014-03-29 08:40:32 -07:00
});
2013-06-07 09:06:32 -07:00
}
2013-05-23 13:09:01 -07:00
});
};
2014-03-29 08:40:32 -07:00
self.queueNext = function (options) {
2013-08-08 07:53:25 -07:00
2014-03-29 08:40:32 -07:00
if (!currentMediaElement) {
self.play(options);
return;
}
2013-08-08 07:53:25 -07:00
2014-03-29 08:40:32 -07:00
Dashboard.getCurrentUser().done(function (user) {
2013-08-08 07:53:25 -07:00
2014-03-29 08:40:32 -07:00
if (options.items) {
2013-08-08 07:53:25 -07:00
2014-03-29 08:40:32 -07:00
self.queueItemsNext(options.items);
2013-08-08 07:53:25 -07:00
2014-03-29 08:40:32 -07:00
} else {
self.getItemsForPlayback({
2013-08-08 07:53:25 -07:00
2014-03-29 08:40:32 -07:00
Ids: options.ids.join(',')
}).done(function (result) {
options.items = result.Items;
self.queueItemsNext(options.items);
});
}
});
2013-08-08 07:53:25 -07:00
};
2013-05-23 13:09:01 -07:00
self.pause = function () {
2014-04-13 11:25:22 -07:00
2013-05-23 13:09:01 -07:00
currentMediaElement.pause();
};
self.unpause = function () {
currentMediaElement.play();
};
self.seek = function (position) {
2013-07-25 12:43:40 -07:00
self.changeStream(position);
};
2013-08-09 08:55:22 -07:00
2013-05-23 13:09:01 -07:00
self.mute = function () {
self.setVolume(0);
2013-05-23 13:09:01 -07:00
};
self.unMute = function () {
self.setVolume(self.getSavedVolume() * 100);
};
self.toggleMute = function () {
if (currentMediaElement) {
2014-04-30 20:24:55 -07:00
console.log('MediaPlayer toggling mute');
if (currentMediaElement.volume) {
self.mute();
} else {
self.unMute();
}
}
};
2013-08-27 22:44:43 -07:00
self.volumeDown = function () {
if (currentMediaElement) {
self.setVolume(Math.max(currentMediaElement.volume - .02, 0) * 100);
}
};
2013-08-27 22:44:43 -07:00
self.volumeUp = function () {
if (currentMediaElement) {
self.setVolume(Math.min(currentMediaElement.volume + .02, 1) * 100);
}
};
// Sets volume using a 0-100 scale
self.setVolume = function (val) {
if (currentMediaElement) {
2014-04-30 20:24:55 -07:00
console.log('MediaPlayer setting volume to ' + val);
currentMediaElement.volume = val / 100;
self.onVolumeChanged(currentMediaElement);
self.saveVolume();
}
2013-04-30 10:21:21 -07:00
};
self.saveVolume = function (val) {
if (val) {
localStorage.setItem("volume", val);
}
};
self.getSavedVolume = function () {
return localStorage.getItem("volume") || 0.5;
};
2014-03-29 08:40:32 -07:00
self.shuffle = function (id) {
var userId = Dashboard.getCurrentUserId();
ApiClient.getItem(userId, id).done(function (item) {
var query = {
UserId: userId,
Fields: getItemFields,
Limit: 50,
Filters: "IsNotFolder",
Recursive: true,
SortBy: "Random"
};
if (item.IsFolder) {
query.ParentId = id;
}
else if (item.Type == "MusicArtist") {
query.MediaTypes = "Audio";
query.Artists = item.Name;
}
else if (item.Type == "MusicGenre") {
query.MediaTypes = "Audio";
query.Genres = item.Name;
} else {
return;
}
self.getItemsForPlayback(query).done(function (result) {
self.play({ items: result.Items });
});
});
};
self.instantMix = function (id) {
var userId = Dashboard.getCurrentUserId();
ApiClient.getItem(userId, id).done(function (item) {
var promise;
if (item.Type == "MusicArtist") {
promise = ApiClient.getInstantMixFromArtist(name, {
UserId: Dashboard.getCurrentUserId(),
Fields: getItemFields,
Limit: 50
});
}
else if (item.Type == "MusicGenre") {
promise = ApiClient.getInstantMixFromMusicGenre(name, {
UserId: Dashboard.getCurrentUserId(),
Fields: getItemFields,
Limit: 50
});
}
else if (item.Type == "MusicAlbum") {
promise = ApiClient.getInstantMixFromAlbum(id, {
UserId: Dashboard.getCurrentUserId(),
Fields: getItemFields,
Limit: 50
});
}
else if (item.Type == "Audio") {
promise = ApiClient.getInstantMixFromSong(id, {
UserId: Dashboard.getCurrentUserId(),
Fields: getItemFields,
Limit: 50
});
}
else {
return;
}
promise.done(function (result) {
self.play({ items: result.Items });
});
});
};
2013-04-10 14:03:28 -07:00
self.stop = function () {
2013-03-31 18:52:07 -07:00
2013-04-10 14:03:28 -07:00
var elem = currentMediaElement;
2013-03-31 18:52:07 -07:00
elem.pause();
2013-02-20 18:33:05 -07:00
var isVideo = currentItem.MediaType == "Video";
$(elem).off("ended.playnext").on("ended", function () {
2013-06-07 10:23:23 -07:00
$(this).off();
if (this.tagName.toLowerCase() != 'audio') {
$(this).remove();
}
2013-06-07 10:23:23 -07:00
elem.src = "";
currentMediaElement = null;
currentItem = null;
currentMediaSource = null;
2013-03-26 14:32:01 -07:00
}).trigger("ended");
2013-02-27 10:53:42 -07:00
if (isVideo) {
if (self.isFullScreen()) {
self.exitFullScreen();
}
self.resetEnhancements();
2013-12-29 19:41:22 -07:00
}
2013-04-10 14:03:28 -07:00
};
2013-03-26 14:32:01 -07:00
2013-04-10 14:03:28 -07:00
self.isPlaying = function () {
2014-04-14 20:54:52 -07:00
return currentMediaElement != null;
2013-04-10 14:03:28 -07:00
};
2013-05-25 17:53:51 -07:00
2014-04-13 10:27:13 -07:00
self.getPlayerState = function () {
var deferred = $.Deferred();
var result = self.getPlayerStateInternal(currentMediaElement, currentItem, currentMediaSource);
deferred.resolveWith(null, [result]);
return deferred.promise();
};
self.getPlayerStateInternal = function (playerElement, item, mediaSource) {
2014-04-22 10:25:54 -07:00
var state = {
PlayState: {}
};
if (playerElement) {
2014-04-22 10:25:54 -07:00
state.PlayState.VolumeLevel = playerElement.volume * 100;
state.PlayState.IsMuted = playerElement.volume == 0;
state.PlayState.IsPaused = playerElement.paused;
state.PlayState.PositionTicks = self.getCurrentTicks(playerElement);
var currentSrc = playerElement.currentSrc;
if (currentSrc) {
var audioStreamIndex = getParameterByName('AudioStreamIndex', currentSrc);
if (audioStreamIndex) {
state.PlayState.AudioStreamIndex = parseInt(audioStreamIndex);
}
var subtitleStreamIndex = getParameterByName('SubtitleStreamIndex', currentSrc);
if (subtitleStreamIndex) {
state.PlayState.SubtitleStreamIndex = parseInt(subtitleStreamIndex);
}
state.PlayState.PlayMethod = getParameterByName('static', currentSrc) == 'true' ?
'DirectStream' :
'Transcode';
}
}
if (mediaSource) {
2014-04-22 10:25:54 -07:00
state.PlayState.MediaSourceId = mediaSource.Id;
state.NowPlayingItem = {
RunTimeTicks: mediaSource.RunTimeTicks
};
2014-04-22 10:25:54 -07:00
state.PlayState.CanSeek = mediaSource.RunTimeTicks && mediaSource.RunTimeTicks > 0;
}
if (item) {
2014-04-22 10:25:54 -07:00
state.NowPlayingItem = state.NowPlayingItem || {};
var nowPlayingItem = state.NowPlayingItem;
2014-04-27 18:57:29 -07:00
2014-04-22 10:25:54 -07:00
nowPlayingItem.Id = item.Id;
nowPlayingItem.MediaType = item.MediaType;
nowPlayingItem.Type = item.Type;
nowPlayingItem.Name = item.Name;
nowPlayingItem.IndexNumber = item.IndexNumber;
nowPlayingItem.IndexNumberEnd = item.IndexNumberEnd;
nowPlayingItem.ParentIndexNumber = item.ParentIndexNumber;
nowPlayingItem.ProductionYear = item.ProductionYear;
nowPlayingItem.PremiereDate = item.PremiereDate;
nowPlayingItem.SeriesName = item.SeriesName;
nowPlayingItem.Album = item.Album;
nowPlayingItem.Artists = item.Artists;
var imageTags = item.ImageTags || {};
if (imageTags.Primary) {
2014-04-22 10:25:54 -07:00
nowPlayingItem.PrimaryImageItemId = item.Id;
nowPlayingItem.PrimaryImageTag = imageTags.Primary;
}
2014-04-13 10:27:13 -07:00
else if (item.AlbumPrimaryImageTag) {
2014-04-22 10:25:54 -07:00
nowPlayingItem.PrimaryImageItemId = item.AlbumId;
nowPlayingItem.PrimaryImageTag = item.AlbumPrimaryImageTag;
2014-04-13 10:27:13 -07:00
}
else if (item.SeriesPrimaryImageTag) {
2014-04-22 10:25:54 -07:00
nowPlayingItem.PrimaryImageItemId = item.SeriesId;
nowPlayingItem.PrimaryImageTag = item.SeriesPrimaryImageTag;
2014-04-13 10:27:13 -07:00
}
if (item.BackdropImageTags && item.BackdropImageTags.length) {
2014-04-22 10:25:54 -07:00
nowPlayingItem.BackdropItemId = item.Id;
nowPlayingItem.BackdropImageTag = item.BackdropImageTags[0];
}
if (imageTags.Thumb) {
2014-04-22 10:25:54 -07:00
nowPlayingItem.ThumbItemId = item.Id;
nowPlayingItem.ThumbImageTag = imageTags.Thumb;
}
}
return state;
};
self.beginPlayerUpdates = function () {
// Nothing to setup here
};
self.endPlayerUpdates = function () {
// Nothing to setup here
};
self.onPlaybackStart = function (playerElement, item, mediaSource) {
self.updateCanClientSeek(playerElement);
var state = self.getPlayerStateInternal(playerElement, item, mediaSource);
$(self).trigger('playbackstart', [state]);
2014-05-07 11:38:50 -07:00
self.startProgressInterval();
};
self.onVolumeChanged = function (playerElement) {
self.saveVolume(playerElement.volume);
var state = self.getPlayerStateInternal(playerElement, currentItem, currentMediaSource);
$(self).trigger('volumechange', [state]);
};
self.onPlaybackStopped = function () {
self.clearPauseStop();
var playerElement = this;
$(playerElement).off('ended.playbackstopped');
clearProgressInterval();
var item = currentItem;
var mediaSource = currentMediaSource;
if (item.MediaType == "Video") {
ApiClient.stopActiveEncodings();
if (self.isFullScreen()) {
self.exitFullScreen();
}
self.resetEnhancements();
}
var state = self.getPlayerStateInternal(playerElement, item, mediaSource);
$(self).trigger('playbackstop', [state]);
};
self.onPlaystateChange = function (playerElement) {
var state = self.getPlayerStateInternal(playerElement, currentItem, currentMediaSource);
$(self).trigger('playstatechange', [state]);
};
$(window).on("beforeunload popstate", function () {
// Try to report playback stopped before the browser closes
if (currentItem && currentMediaElement && currentProgressInterval) {
self.onPlaybackStopped.call(currentMediaElement);
}
});
2014-05-07 11:38:50 -07:00
function sendProgressUpdate() {
2014-05-07 11:38:50 -07:00
var state = self.getPlayerStateInternal(currentMediaElement, currentItem, currentMediaSource);
var info = {
QueueableMediaTypes: state.NowPlayingItem.MediaType,
ItemId: state.NowPlayingItem.Id,
NowPlayingItem: state.NowPlayingItem
};
2014-04-30 08:07:02 -07:00
2014-05-07 11:38:50 -07:00
info = $.extend(info, state.PlayState);
ApiClient.reportPlaybackProgress(info);
2014-04-02 14:55:19 -07:00
}
function clearProgressInterval() {
if (currentProgressInterval) {
clearTimeout(currentProgressInterval);
currentProgressInterval = null;
}
2014-04-30 08:07:02 -07:00
}
function canPlayWebm() {
return testableVideoElement.canPlayType('video/webm').replace(/no/, '');
2014-04-02 14:55:19 -07:00
}
2014-04-14 20:54:52 -07:00
self.canAutoPlayAudio = function () {
if ($.browser.android || ($.browser.webkit && !$.browser.chrome)) {
return false;
}
return true;
};
function getAudioElement() {
var elem = $('.mediaPlayerAudio');
if (elem.length) {
return elem;
}
var html = '';
2014-04-14 20:54:52 -07:00
var requiresControls = !self.canAutoPlayAudio();
if (requiresControls) {
html += '<div class="mediaPlayerAudioContainer"><div class="mediaPlayerAudioContainerInner">';;
} else {
html += '<div class="mediaPlayerAudioContainer" style="display:none;"><div class="mediaPlayerAudioContainerInner">';;
}
2014-04-13 11:25:22 -07:00
html += '<audio class="mediaPlayerAudio" controls>';
html += '</audio></div></div>';
$(document.body).append(html);
return $('.mediaPlayerAudio');
2014-04-02 14:55:19 -07:00
}
2014-04-13 10:27:13 -07:00
var supportsAac = document.createElement('audio').canPlayType('audio/aac').replace(/no/, '');
2014-03-22 09:16:43 -07:00
function playAudio(item, mediaSource, startPositionTicks) {
startPositionTicks = startPositionTicks || 0;
var baseParams = {
audioChannels: 2,
audioBitrate: 128000,
StartTimeTicks: startPositionTicks,
2014-03-22 09:16:43 -07:00
mediaSourceId: mediaSource.Id
};
2014-04-13 10:27:13 -07:00
var sourceContainer = (mediaSource.Container || '').toLowerCase();
var isStatic = false;
2014-04-13 10:27:13 -07:00
if (sourceContainer == 'mp3' ||
(sourceContainer == 'aac' && supportsAac)) {
2014-04-13 10:27:13 -07:00
for (var i = 0, length = mediaSource.MediaStreams.length; i < length; i++) {
2014-04-13 10:27:13 -07:00
var stream = mediaSource.MediaStreams[i];
2014-04-13 10:27:13 -07:00
if (stream.Type == "Audio") {
// Stream statically when possible
2014-04-17 22:03:01 -07:00
if (stream.BitRate <= 320000) {
2014-04-13 10:27:13 -07:00
isStatic = true;
}
break;
}
}
}
2014-04-13 10:27:13 -07:00
var outputContainer = isStatic ? sourceContainer : 'mp3';
var audioUrl = ApiClient.getUrl('Audio/' + item.Id + '/stream.' + outputContainer, $.extend({}, baseParams, {
audioCodec: outputContainer
}));
if (isStatic) {
var seekParam = startPositionTicks ? '#t=' + (startPositionTicks / 10000000) : '';
audioUrl += "&static=true" + seekParam;
}
self.startTimeTicksOffset = isStatic ? 0 : startPositionTicks;
var initialVolume = self.getSavedVolume();
return getAudioElement().each(function () {
2014-04-13 10:27:13 -07:00
this.src = audioUrl;
this.volume = initialVolume;
this.play();
}).on("volumechange", function () {
self.onVolumeChanged(this);
2014-04-11 20:48:57 -07:00
}).one("playing", function () {
$('.mediaPlayerAudioContainer').hide();
self.onPlaybackStart(this, item, mediaSource);
}).on("pause", function () {
self.onPlaystateChange(this);
}).on("playing", function () {
self.onPlaystateChange(this);
}).on("timeupdate", function () {
self.setCurrentTime(self.getCurrentTicks(this));
}).on("ended.playbackstopped", self.onPlaybackStopped).on('ended.playnext', self.playNextAfterEnded)[0];
};
function canPlayAudioStreamDirect(audioStream) {
var audioCodec = (audioStream.Codec || '').toLowerCase().replace('-', '');
if (audioCodec.indexOf('aac') == -1 &&
audioCodec.indexOf('mp3') == -1 &&
audioCodec.indexOf('mpeg') == -1) {
return false;
}
if (audioStream.Channels == null) {
return false;
}
// IE won't play at all if more than two channels
if (audioStream.Channels > 2 && $.browser.msie) {
return false;
}
return true;
}
2014-03-22 09:16:43 -07:00
var getItemFields = "MediaSources,Chapters";
self.getCurrentTargetInfo = function () {
return self.getTargets()[0];
};
2013-04-10 14:03:28 -07:00
}
2013-03-26 14:32:01 -07:00
2013-04-10 14:03:28 -07:00
window.MediaPlayer = new mediaPlayer();
2013-04-08 21:26:02 -07:00
2014-03-29 08:40:32 -07:00
window.MediaController.registerPlayer(window.MediaPlayer);
window.MediaController.setActivePlayer(window.MediaPlayer);
2014-03-29 08:40:32 -07:00
})(document, setTimeout, clearTimeout, screen, localStorage, $, setInterval, window);