mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
better mediaplayer refactor
This commit is contained in:
Luke Pulverenti
parent
6d7d473fcf
commit
243f949ad6
1 changed files with 319 additions and 321 deletions
|
|
@ -1,132 +1,11 @@
|
|||
var MediaPlayer = (function (document) {
|
||||
var MediaPlayer = (function (document, clearTimeout, screen, localStorage, _V_, $) {
|
||||
|
||||
var testableAudioElement = document.createElement('audio');
|
||||
var testableVideoElement = document.createElement('video');
|
||||
var currentMediaElement;
|
||||
var currentProgressInterval;
|
||||
|
||||
return {
|
||||
|
||||
canPlay: function (item) {
|
||||
|
||||
if (item.MediaType === "Video") {
|
||||
|
||||
var media = testableVideoElement;
|
||||
|
||||
if (media.canPlayType) {
|
||||
|
||||
return media.canPlayType('video/mp4').replace(/no/, '') || media.canPlayType('video/mp2t').replace(/no/, '') || media.canPlayType('video/webm').replace(/no/, '') || media.canPlayType('application/x-mpegURL').replace(/no/, '') || media.canPlayType('video/ogv').replace(/no/, '');
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
if (item.MediaType === "Audio") {
|
||||
|
||||
var media = testableAudioElement;
|
||||
|
||||
if (media.canPlayType) {
|
||||
|
||||
return media.canPlayType('audio/mpeg').replace(/no/, '') || media.canPlayType('audio/webm').replace(/no/, '') || media.canPlayType('audio/aac').replace(/no/, '') || media.canPlayType('audio/ogg').replace(/no/, '');
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
play: function (items, startPosition) {
|
||||
|
||||
if (MediaPlayer.isPlaying()) {
|
||||
MediaPlayer.stop();
|
||||
}
|
||||
|
||||
var item = items[0];
|
||||
|
||||
var mediaElement;
|
||||
|
||||
if (item.MediaType === "Video") {
|
||||
|
||||
mediaElement = MediaPlayer.playVideo(items, startPosition);
|
||||
}
|
||||
|
||||
else if (item.MediaType === "Audio") {
|
||||
|
||||
mediaElement = MediaPlayer.playAudio(items);
|
||||
}
|
||||
|
||||
if (!mediaElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
currentMediaElement = mediaElement;
|
||||
|
||||
var nowPlayingBar = $('#nowPlayingBar').show();
|
||||
|
||||
if (items.length > 1) {
|
||||
$('#previousTrackButton', nowPlayingBar)[0].disabled = false;
|
||||
$('#nextTrackButton', nowPlayingBar)[0].disabled = false;
|
||||
} else {
|
||||
$('#previousTrackButton', nowPlayingBar)[0].disabled = true;
|
||||
$('#nextTrackButton', nowPlayingBar)[0].disabled = true;
|
||||
}
|
||||
|
||||
//display image and title
|
||||
var imageTags = item.ImageTags || {};
|
||||
var html = '';
|
||||
|
||||
var url = "";
|
||||
|
||||
if (item.BackdropImageTags && item.BackdropImageTags.length) {
|
||||
|
||||
url = ApiClient.getImageUrl(item.Id, {
|
||||
type: "Backdrop",
|
||||
height: 36,
|
||||
tag: item.BackdropImageTags[0]
|
||||
});
|
||||
}
|
||||
else if (imageTags.Thumb) {
|
||||
|
||||
url = ApiClient.getImageUrl(item.Id, {
|
||||
type: "Thumb",
|
||||
height: 36,
|
||||
tag: item.ImageTags.Thumb
|
||||
});
|
||||
}
|
||||
else if (imageTags.Primary) {
|
||||
|
||||
url = ApiClient.getImageUrl(item.Id, {
|
||||
type: "Primary",
|
||||
height: 36,
|
||||
tag: item.ImageTags.Primary
|
||||
});
|
||||
} else {
|
||||
url = "css/images/items/detail/video.png";
|
||||
}
|
||||
|
||||
var name = item.Name;
|
||||
var series_name = '';
|
||||
|
||||
if (item.IndexNumber != null) {
|
||||
name = item.IndexNumber + " - " + name;
|
||||
}
|
||||
if (item.ParentIndexNumber != null) {
|
||||
name = item.ParentIndexNumber + "." + name;
|
||||
}
|
||||
if (item.SeriesName || item.Album || item.ProductionYear) {
|
||||
series_name = item.SeriesName || item.Album || item.ProductionYear;
|
||||
}
|
||||
|
||||
html += "<div><img class='nowPlayingBarImage ' alt='' title='' src='" + url + "' style='height:36px;display:inline-block;' /></div>";
|
||||
if (item.Type == "Movie")
|
||||
html += '<div>' + name + '<br/>' + series_name + '</div>';
|
||||
else
|
||||
html += '<div>' + series_name + '<br/>' + name + '</div>';
|
||||
|
||||
$('#mediaInfo', nowPlayingBar).html(html);
|
||||
},
|
||||
|
||||
playAudio: function (items, params) {
|
||||
function playAudio(items, params) {
|
||||
var item = items[0];
|
||||
|
||||
var baseParams = {
|
||||
|
|
@ -169,11 +48,11 @@
|
|||
$('#mediaElement', nowPlayingBar).html(html);
|
||||
|
||||
return $('audio', nowPlayingBar)[0];
|
||||
},
|
||||
}
|
||||
|
||||
playVideo: function (items, startPosition) {
|
||||
function playVideo(items, startPosition) {
|
||||
//stop/kill videoJS
|
||||
if (currentMediaElement) MediaPlayer.stop();
|
||||
if (currentMediaElement) self.stop();
|
||||
|
||||
var item = items[0];
|
||||
|
||||
|
|
@ -185,28 +64,28 @@
|
|||
var user = Dashboard.getCurrentUser();
|
||||
var defaults = { languageIndex: null, subtitleIndex: null };
|
||||
|
||||
var user_config = user.Configuration || {};
|
||||
var userConfig = user.Configuration || {};
|
||||
if (item.MediaStreams && item.MediaStreams.length) {
|
||||
$.each(item.MediaStreams, function (i, stream) {
|
||||
//get default subtitle stream
|
||||
if (stream.Type == "Subtitle") {
|
||||
if (user_config.UseForcedSubtitlesOnly == true && user_config.SubtitleLanguagePreference && !defaults.subtitleIndex) {
|
||||
if (stream.Language == user_config.SubtitleLanguagePreference && stream.IsForced == true) {
|
||||
if (userConfig.UseForcedSubtitlesOnly == true && userConfig.SubtitleLanguagePreference && !defaults.subtitleIndex) {
|
||||
if (stream.Language == userConfig.SubtitleLanguagePreference && stream.IsForced == true) {
|
||||
defaults.subtitleIndex = i;
|
||||
}
|
||||
} else if (user_config.SubtitleLanguagePreference && !defaults.subtitleIndex) {
|
||||
if (stream.Language == user_config.SubtitleLanguagePreference) {
|
||||
} else if (userConfig.SubtitleLanguagePreference && !defaults.subtitleIndex) {
|
||||
if (stream.Language == userConfig.SubtitleLanguagePreference) {
|
||||
defaults.subtitleIndex = i;
|
||||
}
|
||||
} else if (user_config.UseForcedSubtitlesOnly == true && !defaults.subtitleIndex) {
|
||||
} else if (userConfig.UseForcedSubtitlesOnly == true && !defaults.subtitleIndex) {
|
||||
if (stream.IsForced == true) {
|
||||
defaults.subtitleIndex = i;
|
||||
}
|
||||
}
|
||||
} else if (stream.Type == "Audio") {
|
||||
//get default language stream
|
||||
if (user_config.AudioLanguagePreference && !defaults.languageIndex) {
|
||||
if (stream.Language == user_config.AudioLanguagePreference) {
|
||||
if (userConfig.AudioLanguagePreference && !defaults.languageIndex) {
|
||||
if (stream.Language == userConfig.AudioLanguagePreference) {
|
||||
defaults.languageIndex = i;
|
||||
}
|
||||
}
|
||||
|
|
@ -287,15 +166,147 @@
|
|||
localStorage.setItem("volume", (this).volume());
|
||||
});
|
||||
|
||||
(this).addEvent("play", MediaPlayer.updateProgress);
|
||||
(this).addEvent("play", updateProgress);
|
||||
|
||||
ApiClient.reportPlaybackStart(Dashboard.getCurrentUserId(), item.Id);
|
||||
});
|
||||
|
||||
return $('video', nowPlayingBar)[0];
|
||||
},
|
||||
}
|
||||
|
||||
stop: function () {
|
||||
function updateProgress() {
|
||||
currentProgressInterval = setInterval(function () {
|
||||
var player = _V_("videoWindow");
|
||||
|
||||
var startTimeTicks = player.tag.src.match(new RegExp("StartTimeTicks=[0-9]+", "g"));
|
||||
var startTime = startTimeTicks[0].replace("StartTimeTicks=", "");
|
||||
|
||||
var itemString = player.tag.src.match(new RegExp("Videos/[0-9a-z\-]+", "g"));
|
||||
var itemId = itemString[0].replace("Videos/", "");
|
||||
|
||||
var positionTicks = parseInt(startTime) + Math.floor(10000000 * player.currentTime());
|
||||
|
||||
ApiClient.reportPlaybackProgress(Dashboard.getCurrentUserId(), itemId, positionTicks);
|
||||
}, 30000);
|
||||
}
|
||||
|
||||
self.canPlay = function (item) {
|
||||
|
||||
if (item.MediaType === "Video") {
|
||||
|
||||
var media = testableVideoElement;
|
||||
|
||||
if (media.canPlayType) {
|
||||
|
||||
return media.canPlayType('video/mp4').replace(/no/, '') || media.canPlayType('video/mp2t').replace(/no/, '') || media.canPlayType('video/webm').replace(/no/, '') || media.canPlayType('application/x-mpegURL').replace(/no/, '') || media.canPlayType('video/ogv').replace(/no/, '');
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
if (item.MediaType === "Audio") {
|
||||
|
||||
var media = testableAudioElement;
|
||||
|
||||
if (media.canPlayType) {
|
||||
|
||||
return media.canPlayType('audio/mpeg').replace(/no/, '') || media.canPlayType('audio/webm').replace(/no/, '') || media.canPlayType('audio/aac').replace(/no/, '') || media.canPlayType('audio/ogg').replace(/no/, '');
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
self.play = function (items, startPosition) {
|
||||
|
||||
if (self.isPlaying()) {
|
||||
self.stop();
|
||||
}
|
||||
|
||||
var item = items[0];
|
||||
|
||||
var mediaElement;
|
||||
|
||||
if (item.MediaType === "Video") {
|
||||
|
||||
mediaElement = playVideo(items, startPosition);
|
||||
} else if (item.MediaType === "Audio") {
|
||||
|
||||
mediaElement = playAudio(items);
|
||||
}
|
||||
|
||||
if (!mediaElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
currentMediaElement = mediaElement;
|
||||
|
||||
var nowPlayingBar = $('#nowPlayingBar').show();
|
||||
|
||||
if (items.length > 1) {
|
||||
$('#previousTrackButton', nowPlayingBar)[0].disabled = false;
|
||||
$('#nextTrackButton', nowPlayingBar)[0].disabled = false;
|
||||
} else {
|
||||
$('#previousTrackButton', nowPlayingBar)[0].disabled = true;
|
||||
$('#nextTrackButton', nowPlayingBar)[0].disabled = true;
|
||||
}
|
||||
|
||||
//display image and title
|
||||
var imageTags = item.ImageTags || {};
|
||||
var html = '';
|
||||
|
||||
var url = "";
|
||||
|
||||
if (item.BackdropImageTags && item.BackdropImageTags.length) {
|
||||
|
||||
url = ApiClient.getImageUrl(item.Id, {
|
||||
type: "Backdrop",
|
||||
height: 36,
|
||||
tag: item.BackdropImageTags[0]
|
||||
});
|
||||
} else if (imageTags.Thumb) {
|
||||
|
||||
url = ApiClient.getImageUrl(item.Id, {
|
||||
type: "Thumb",
|
||||
height: 36,
|
||||
tag: item.ImageTags.Thumb
|
||||
});
|
||||
} else if (imageTags.Primary) {
|
||||
|
||||
url = ApiClient.getImageUrl(item.Id, {
|
||||
type: "Primary",
|
||||
height: 36,
|
||||
tag: item.ImageTags.Primary
|
||||
});
|
||||
} else {
|
||||
url = "css/images/items/detail/video.png";
|
||||
}
|
||||
|
||||
var name = item.Name;
|
||||
var seriesName = '';
|
||||
|
||||
if (item.IndexNumber != null) {
|
||||
name = item.IndexNumber + " - " + name;
|
||||
}
|
||||
if (item.ParentIndexNumber != null) {
|
||||
name = item.ParentIndexNumber + "." + name;
|
||||
}
|
||||
if (item.SeriesName || item.Album || item.ProductionYear) {
|
||||
seriesName = item.SeriesName || item.Album || item.ProductionYear;
|
||||
}
|
||||
|
||||
html += "<div><img class='nowPlayingBarImage ' alt='' title='' src='" + url + "' style='height:36px;display:inline-block;' /></div>";
|
||||
if (item.Type == "Movie")
|
||||
html += '<div>' + name + '<br/>' + seriesName + '</div>';
|
||||
else
|
||||
html += '<div>' + seriesName + '<br/>' + name + '</div>';
|
||||
|
||||
$('#mediaInfo', nowPlayingBar).html(html);
|
||||
};
|
||||
|
||||
self.stop = function () {
|
||||
|
||||
var elem = currentMediaElement;
|
||||
|
||||
|
|
@ -304,16 +315,18 @@
|
|||
var player = _V_("videoWindow");
|
||||
|
||||
var startTimeTicks = player.tag.src.match(new RegExp("StartTimeTicks=[0-9]+", "g"));
|
||||
var start_time = startTimeTicks[0].replace("StartTimeTicks=", "");
|
||||
var startTime = startTimeTicks[0].replace("StartTimeTicks=", "");
|
||||
|
||||
var item_string = player.tag.src.match(new RegExp("Videos/[0-9a-z\-]+", "g"));
|
||||
var item_id = item_string[0].replace("Videos/", "");
|
||||
var itemString = player.tag.src.match(new RegExp("Videos/[0-9a-z\-]+", "g"));
|
||||
var itemId = itemString[0].replace("Videos/", "");
|
||||
|
||||
var positionTicks = parseInt(start_time) + Math.floor(10000000 * player.currentTime());
|
||||
var positionTicks = parseInt(startTime) + Math.floor(10000000 * player.currentTime());
|
||||
|
||||
ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), item_id, positionTicks);
|
||||
ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), itemId, positionTicks);
|
||||
|
||||
clearTimeout(MediaPlayer.progressInterval);
|
||||
if (currentProgressInterval) {
|
||||
clearTimeout(currentProgressInterval);
|
||||
}
|
||||
|
||||
if (player.techName == "html5") {
|
||||
player.tag.src = "";
|
||||
|
|
@ -339,27 +352,12 @@
|
|||
$('#nowPlayingBar').hide();
|
||||
|
||||
currentMediaElement = null;
|
||||
},
|
||||
|
||||
isPlaying: function () {
|
||||
return currentMediaElement;
|
||||
},
|
||||
|
||||
updateProgress: function () {
|
||||
MediaPlayer.progressInterval = setInterval(function () {
|
||||
var player = _V_("videoWindow");
|
||||
|
||||
var startTimeTicks = player.tag.src.match(new RegExp("StartTimeTicks=[0-9]+", "g"));
|
||||
var start_time = startTimeTicks[0].replace("StartTimeTicks=", "");
|
||||
|
||||
var item_string = player.tag.src.match(new RegExp("Videos/[0-9a-z\-]+", "g"));
|
||||
var item_id = item_string[0].replace("Videos/", "");
|
||||
|
||||
var positionTicks = parseInt(start_time) + Math.floor(10000000 * player.currentTime());
|
||||
|
||||
ApiClient.reportPlaybackProgress(Dashboard.getCurrentUserId(), item_id, positionTicks);
|
||||
}, 30000);
|
||||
}
|
||||
};
|
||||
|
||||
})(document);
|
||||
self.isPlaying = function () {
|
||||
return currentMediaElement;
|
||||
};
|
||||
|
||||
return self;
|
||||
|
||||
})(document, clearTimeout, screen, localStorage, _V_, $);
|
||||
Loading…
Add table
Add a link
Reference in a new issue