mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
first pass at custom audio player
This commit is contained in:
Luke Pulverenti
parent
c83efd85a9
commit
05a4cb13a3
3 changed files with 363 additions and 122 deletions
|
|
@ -697,10 +697,15 @@ progress {
|
|||
|
||||
/* Now playing bar */
|
||||
#nowPlayingBar {
|
||||
padding: 8px 20px;
|
||||
padding: 6px .5em;
|
||||
border-top: 2px solid #D7742B;
|
||||
}
|
||||
|
||||
|
||||
#nowPlayingBar > *:not(#mediaElement) {
|
||||
margin: 0 1em;
|
||||
}
|
||||
|
||||
.nowPlayingBarImage {
|
||||
border: 1px solid #a7a7a7;
|
||||
padding: 1px;
|
||||
|
|
@ -708,12 +713,12 @@ progress {
|
|||
}
|
||||
|
||||
.mediaButton {
|
||||
margin: 0 20px 0 0;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
#mediaElement {
|
||||
margin-right: 20px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -722,23 +727,27 @@ progress {
|
|||
width: 270px;
|
||||
}
|
||||
|
||||
#nowPlayingBar #mediaInfo, #nowPlayingBar #mediaInfo div {
|
||||
margin-left: 10px;
|
||||
.nowPlayingMediaInfo div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#nowPlayingBar #mediaInfo {
|
||||
.nowPlayingMediaInfo a {
|
||||
margin-right: .25em;
|
||||
}
|
||||
|
||||
|
||||
.nowPlayingMediaInfo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media all and (min-width: 650px) {
|
||||
#nowPlayingBar #mediaInfo {
|
||||
.nowPlayingMediaInfo {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.mediaButton img {
|
||||
height: 28px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.itemVideo, .itemVideo.video-js {
|
||||
|
|
@ -749,6 +758,45 @@ progress {
|
|||
bottom: -5px;
|
||||
}
|
||||
|
||||
.currentTime {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
.mediaSlider {
|
||||
-webkit-appearance: none;
|
||||
-moz-apperance: none;
|
||||
background: #777;
|
||||
border-radius: 5px;
|
||||
vertical-align: bottom;
|
||||
position: relative;
|
||||
top: -17px;
|
||||
height: 3px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.mediaSlider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
-moz-apperance: none;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
-ms-border-radius: 10px;
|
||||
-o-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fefefe), color-stop(0.49, #dddddd), color-stop(0.51, #d1d1d1), color-stop(1, #a1a1a1) );
|
||||
}
|
||||
|
||||
.positionSlider {
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.volumeButton {
|
||||
margin-right: .5em!important;
|
||||
}
|
||||
|
||||
@media all and (min-width: 650px) {
|
||||
|
||||
.itemVideo {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
(function (document, clearTimeout, screen, localStorage, _V_, $, setInterval, window) {
|
||||
(function (document, setTimeout, clearTimeout, screen, localStorage, _V_, $, setInterval, window) {
|
||||
|
||||
function mediaPlayer() {
|
||||
var self = this;
|
||||
|
|
@ -7,14 +7,149 @@
|
|||
var testableVideoElement = document.createElement('video');
|
||||
var currentMediaElement;
|
||||
var currentProgressInterval;
|
||||
var positionSlider;
|
||||
var isPositionSliderActive;
|
||||
var currentTimeElement;
|
||||
var currentItem;
|
||||
var volumeSlider;
|
||||
var muteButton;
|
||||
var unmuteButton;
|
||||
var startTimeTicksOffset;
|
||||
var curentDurationTicks;
|
||||
var isStaticStream;
|
||||
|
||||
if (typeof(self.playing) == 'undefined') {
|
||||
self.playing = '';
|
||||
self.queue = [];
|
||||
|
||||
function replaceQueryString(url, param, value) {
|
||||
var re = new RegExp("([?|&])" + param + "=.*?(&|$)", "i");
|
||||
if (url.match(re))
|
||||
return url.replace(re, '$1' + param + "=" + value + '$2');
|
||||
else
|
||||
return url + '&' + param + "=" + value;
|
||||
}
|
||||
|
||||
if (typeof(self.queue) == 'undefined') {
|
||||
self.queue = [];
|
||||
function updateVolumeButtons(vol) {
|
||||
|
||||
if (vol) {
|
||||
muteButton.show();
|
||||
unmuteButton.hide();
|
||||
} else {
|
||||
muteButton.hide();
|
||||
unmuteButton.show();
|
||||
}
|
||||
}
|
||||
|
||||
function onPlaybackStopped() {
|
||||
|
||||
currentTimeElement.hide();
|
||||
|
||||
var endTime = this.currentTime;
|
||||
|
||||
this.currentTime = 0;
|
||||
|
||||
clearProgressInterval();
|
||||
|
||||
var position = Math.floor(10000000 * endTime) + startTimeTicksOffset;
|
||||
|
||||
ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), currentItem.Id, position);
|
||||
|
||||
MediaPlayer.queuePlayNext();
|
||||
}
|
||||
|
||||
function startProgressInterval(itemId) {
|
||||
|
||||
clearProgressInterval();
|
||||
|
||||
var intervalTime = ApiClient.isWebSocketOpen() ? 10000 : 30000;
|
||||
|
||||
currentProgressInterval = setInterval(function () {
|
||||
|
||||
var position = Math.floor(10000000 * currentMediaElement.currentTime) + startTimeTicksOffset;
|
||||
|
||||
ApiClient.reportPlaybackProgress(Dashboard.getCurrentUserId(), itemId, position);
|
||||
|
||||
}, intervalTime);
|
||||
}
|
||||
|
||||
function clearProgressInterval() {
|
||||
|
||||
if (currentProgressInterval) {
|
||||
clearTimeout(currentProgressInterval);
|
||||
currentProgressInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
$(function () {
|
||||
|
||||
muteButton = $('#muteButton');
|
||||
unmuteButton = $('#unmuteButton');
|
||||
|
||||
currentTimeElement = $('.currentTime');
|
||||
|
||||
volumeSlider = $('.volumeSlider').on('change', function () {
|
||||
|
||||
var vol = this.value;
|
||||
updateVolumeButtons(vol);
|
||||
currentMediaElement.volume = vol;
|
||||
});
|
||||
|
||||
positionSlider = $(".positionSlider").on('change', function () {
|
||||
|
||||
isPositionSliderActive = true;
|
||||
|
||||
setCurrentTimePercent(parseInt(this.value), currentItem);
|
||||
|
||||
}).on('changed', function () {
|
||||
|
||||
isPositionSliderActive = false;
|
||||
|
||||
var element = currentMediaElement;
|
||||
|
||||
var newPercent = parseInt(this.value);
|
||||
|
||||
var newPositionTicks = (newPercent / 100) * currentItem.RunTimeTicks;
|
||||
|
||||
if (isStaticStream) {
|
||||
|
||||
element.currentTime = newPositionTicks / (1000 * 10000);
|
||||
|
||||
} else {
|
||||
|
||||
var currentSrc = element.currentSrc;
|
||||
|
||||
if (currentSrc.toLowerCase().indexOf('starttimeticks') == -1) {
|
||||
|
||||
currentSrc += "&starttimeticks=" + newPositionTicks;
|
||||
|
||||
} else {
|
||||
currentSrc = replaceQueryString(currentSrc, 'starttimeticks', newPositionTicks);
|
||||
}
|
||||
|
||||
clearProgressInterval();
|
||||
|
||||
$(element).off('ended.playbackstopped').on("play.onceafterseek", function () {
|
||||
|
||||
$(this).off('play.onceafterseek').on('ended.playbackstopped', onPlaybackStopped);
|
||||
startProgressInterval(currentItem.Id);
|
||||
|
||||
});
|
||||
startTimeTicksOffset = newPositionTicks;
|
||||
|
||||
element.src = currentSrc;
|
||||
}
|
||||
});
|
||||
|
||||
(function (el, timeout) {
|
||||
var timer, trig = function () { el.trigger("changed"); };
|
||||
el.bind("change", function () {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
timer = setTimeout(trig, timeout);
|
||||
});
|
||||
})(positionSlider, 500);
|
||||
});
|
||||
|
||||
function endsWith(text, pattern) {
|
||||
|
||||
|
|
@ -25,9 +160,35 @@
|
|||
return d >= 0 && text.lastIndexOf(pattern) === d;
|
||||
}
|
||||
|
||||
function playAudio(item, params) {
|
||||
function setCurrentTimePercent(percent, item) {
|
||||
|
||||
var volume = localStorage.getItem("volume") || 0.5;
|
||||
var position = (percent / 100) * curentDurationTicks;
|
||||
setCurrentTime(position, item, false);
|
||||
}
|
||||
|
||||
function setCurrentTime(ticks, item, updateSlider) {
|
||||
|
||||
// Convert to ticks
|
||||
ticks = Math.floor(ticks);
|
||||
|
||||
var timeText = DashboardPage.getDisplayText(ticks);
|
||||
|
||||
if (curentDurationTicks) {
|
||||
|
||||
timeText += " / " + DashboardPage.getDisplayText(curentDurationTicks);
|
||||
|
||||
if (updateSlider) {
|
||||
var percent = ticks / curentDurationTicks;
|
||||
percent *= 100;
|
||||
|
||||
positionSlider.val(percent);
|
||||
}
|
||||
}
|
||||
|
||||
currentTimeElement.html(timeText);
|
||||
}
|
||||
|
||||
function playAudio(item, params) {
|
||||
|
||||
var baseParams = {
|
||||
audioChannels: 2,
|
||||
|
|
@ -68,58 +229,82 @@
|
|||
|
||||
}
|
||||
|
||||
/* ffmpeg always says the ogg stream is corrupt after conversion
|
||||
var oggUrl = ApiClient.getUrl('Audio/' + item.Id + '/stream.oga', $.extend({}, baseParams, {
|
||||
audioCodec: 'Vorbis'
|
||||
}));
|
||||
*/
|
||||
|
||||
var html = '';
|
||||
html += '<audio class="itemAudio" preload="none" controls autoplay>';
|
||||
|
||||
var attributes = "autoplay";
|
||||
|
||||
if ($.browser.ipad || $.browser.iphone || $.browser.android) {
|
||||
attributes += " controls";
|
||||
}
|
||||
html += '<audio preload="auto" ' + attributes + '>';
|
||||
html += '<source type="audio/mpeg" src="' + mp3Url + '" />';
|
||||
html += '<source type="audio/aac" src="' + aacUrl + '" />';
|
||||
html += '<source type="audio/webm" src="' + webmUrl + '" />';
|
||||
//html += '<source type="audio/ogg" src="' + oggUrl + '" />';
|
||||
html += '</audio';
|
||||
|
||||
var nowPlayingBar = $('#nowPlayingBar').show();
|
||||
//show stop button
|
||||
$('#stopButton', nowPlayingBar).show();
|
||||
$('#playButton', nowPlayingBar).hide();
|
||||
$('#pauseButton', nowPlayingBar).show();
|
||||
|
||||
$('#mediaElement', nowPlayingBar).html(html);
|
||||
|
||||
$(".itemAudio").each(function () {
|
||||
this.volume = volume;
|
||||
var audioElement = $("audio", nowPlayingBar);
|
||||
|
||||
audioElement.each(function () {
|
||||
this.volume = localStorage.getItem("volume") || 0.5;
|
||||
});
|
||||
|
||||
$(".itemAudio").on("ended", function () {
|
||||
MediaPlayer.stopAudio(item.Id);
|
||||
audioElement.on("volumechange", function () {
|
||||
|
||||
MediaPlayer.queuePlayNext();
|
||||
});
|
||||
var vol = this.volume;
|
||||
|
||||
$(".itemAudio").on("volumechange", function () {
|
||||
localStorage.setItem("volume", this.volume);
|
||||
});
|
||||
localStorage.setItem("volume", vol);
|
||||
|
||||
$(".itemAudio").on("play", updateAudioProgress(item.Id));
|
||||
updateVolumeButtons(vol);
|
||||
|
||||
}).on("play.once", function () {
|
||||
|
||||
var duration = this.duration;
|
||||
isStaticStream = duration && !isNaN(duration) && duration != Number.POSITIVE_INFINITY && duration != Number.NEGATIVE_INFINITY;
|
||||
|
||||
currentTimeElement.show();
|
||||
audioElement.removeAttr('controls').hide().off("play.once");
|
||||
|
||||
updateVolumeButtons(this.volume);
|
||||
|
||||
ApiClient.reportPlaybackStart(Dashboard.getCurrentUserId(), item.Id);
|
||||
|
||||
startProgressInterval(item.Id);
|
||||
|
||||
}).on("pause", function () {
|
||||
|
||||
$('#playButton', nowPlayingBar).show();
|
||||
$('#pauseButton', nowPlayingBar).hide();
|
||||
|
||||
}).on("playing", function () {
|
||||
|
||||
$('#playButton', nowPlayingBar).hide();
|
||||
$('#pauseButton', nowPlayingBar).show();
|
||||
|
||||
}).on("timeupdate", function () {
|
||||
|
||||
if (!isPositionSliderActive) {
|
||||
|
||||
var ticks = startTimeTicksOffset + this.currentTime * 1000 * 10000;
|
||||
|
||||
setCurrentTime(ticks, item, true);
|
||||
}
|
||||
|
||||
}).on("ended.playbackstopped", onPlaybackStopped);
|
||||
|
||||
MediaPlayer.nowPlaying(item);
|
||||
|
||||
return $('audio', nowPlayingBar)[0];
|
||||
}
|
||||
currentItem = item;
|
||||
curentDurationTicks = item.RunTimeTicks;
|
||||
|
||||
function updateAudioProgress(itemId) {
|
||||
ApiClient.reportPlaybackStart(Dashboard.getCurrentUserId(), itemId);
|
||||
|
||||
currentProgressInterval = setInterval(function () {
|
||||
var position;
|
||||
$(".itemAudio").each(function () {
|
||||
position = Math.floor(10000000 * this.currentTime);
|
||||
});
|
||||
|
||||
ApiClient.reportPlaybackProgress(Dashboard.getCurrentUserId(), itemId, position);
|
||||
}, 30000);
|
||||
return audioElement[0];
|
||||
}
|
||||
|
||||
function playVideo(item, startPosition) {
|
||||
|
|
@ -326,6 +511,8 @@
|
|||
mediaElement = playAudio(item);
|
||||
}
|
||||
|
||||
startTimeTicksOffset = startPosition || 0;
|
||||
|
||||
if (!mediaElement) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -392,7 +579,7 @@
|
|||
else
|
||||
html += '<div>' + seriesName + '<br/>' + name + '</div>';
|
||||
|
||||
$('#mediaInfo', nowPlayingBar).html(html);
|
||||
$('.nowPlayingMediaInfo', nowPlayingBar).html(html);
|
||||
};
|
||||
|
||||
self.playById = function (id, startPositionTicks) {
|
||||
|
|
@ -405,8 +592,6 @@
|
|||
|
||||
};
|
||||
|
||||
|
||||
|
||||
self.nowPlaying = function (item) {
|
||||
self.playing = item;
|
||||
};
|
||||
|
|
@ -445,13 +630,13 @@
|
|||
self.queueAddNext = function (item) {
|
||||
if (typeof self.queue[0] != "undefined") {
|
||||
self.queue.unshift(item);
|
||||
}else {
|
||||
} else {
|
||||
self.queueAdd(item);
|
||||
}
|
||||
};
|
||||
|
||||
self.inQueue = function (item) {
|
||||
$.each(MediaPlayer.queue, function(i, queueItem){
|
||||
$.each(MediaPlayer.queue, function (i, queueItem) {
|
||||
if (item.Id == queueItem.Id) {
|
||||
return true;
|
||||
}
|
||||
|
|
@ -471,6 +656,22 @@
|
|||
});
|
||||
};
|
||||
|
||||
self.pause = function () {
|
||||
currentMediaElement.pause();
|
||||
};
|
||||
|
||||
self.unpause = function () {
|
||||
currentMediaElement.play();
|
||||
};
|
||||
|
||||
self.mute = function () {
|
||||
currentMediaElement.volume = 0;
|
||||
};
|
||||
|
||||
self.unmute = function () {
|
||||
currentMediaElement.volume = volumeSlider.val();
|
||||
};
|
||||
|
||||
self.stop = function () {
|
||||
|
||||
var elem = currentMediaElement;
|
||||
|
|
@ -496,8 +697,6 @@
|
|||
//player.tech.destroy();
|
||||
player.destroy();
|
||||
} else {
|
||||
self.stopAudio();
|
||||
|
||||
elem.pause();
|
||||
elem.src = "";
|
||||
}
|
||||
|
|
@ -527,22 +726,6 @@
|
|||
}
|
||||
};
|
||||
|
||||
self.stopAudio = function () {
|
||||
var itemString = $(".itemAudio source").attr('src').match(new RegExp("Audio/[0-9a-z\-]+", "g"));
|
||||
var itemId = itemString[0].replace("Audio/", "");
|
||||
|
||||
var position;
|
||||
$(".itemAudio").each(function () {
|
||||
position = Math.floor(10000000 * this.currentTime);
|
||||
});
|
||||
|
||||
ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), itemId, position);
|
||||
|
||||
if (currentProgressInterval) {
|
||||
clearTimeout(currentProgressInterval);
|
||||
}
|
||||
};
|
||||
|
||||
self.isPlaying = function () {
|
||||
return currentMediaElement;
|
||||
};
|
||||
|
|
@ -550,4 +733,4 @@
|
|||
|
||||
window.MediaPlayer = new mediaPlayer();
|
||||
|
||||
})(document, clearTimeout, screen, localStorage, _V_, $, setInterval, window);
|
||||
})(document, setTimeout, clearTimeout, screen, localStorage, _V_, $, setInterval, window);
|
||||
|
|
@ -1106,11 +1106,21 @@ $(function () {
|
|||
footerHtml += '<div id="nowPlayingBar" style="display:none;">';
|
||||
footerHtml += '<a class="imageButton mediaButton" href="playlist.html"><img src="css/images/media/playlist.png" /></a>';
|
||||
footerHtml += '<button id="previousTrackButton" class="imageButton mediaButton" title="Previous Track" type="button"><img src="css/images/media/previoustrack.png" /></button>';
|
||||
footerHtml += '<button id="playButton" class="imageButton mediaButton" title="Play" type="button" onclick="MediaPlayer.unpause();"><img src="css/images/media/play.png" /></button>';
|
||||
footerHtml += '<button id="pauseButton" class="imageButton mediaButton" title="Pause" type="button" onclick="MediaPlayer.pause();"><img src="css/images/media/pause.png" /></button>';
|
||||
footerHtml += '<button id="stopButton" class="imageButton mediaButton" title="Stop" type="button" onclick="MediaPlayer.stop();"><img src="css/images/media/stop.png" /></button>';
|
||||
footerHtml += '<button id="nextTrackButton" class="imageButton mediaButton" title="Next Track" type="button"><img src="css/images/media/nexttrack.png" /></button>';
|
||||
footerHtml += '<input type="range" class="mediaSlider positionSlider" step=".001" min="0" max="100" value="0" />';
|
||||
footerHtml += '<div class="currentTime"></div>';
|
||||
footerHtml += '<div id="mediaElement"></div>';
|
||||
footerHtml += '<div id="mediaInfo"></div>';
|
||||
footerHtml += '<div class="nowPlayingMediaInfo"></div>';
|
||||
|
||||
footerHtml += '<button id="muteButton" onclick="MediaPlayer.mute();" class="imageButton mediaButton volumeButton" title="Volume" type="button"><img src="css/images/media/volume.png" /></button>';
|
||||
footerHtml += '<button id="unmuteButton" onclick="MediaPlayer.unmute();" class="imageButton mediaButton volumeButton" title="Volume" type="button"><img src="css/images/media/mute.png" /></button>';
|
||||
footerHtml += '<input type="range" class="mediaSlider volumeSlider" step=".05" min="0" max="1" value="0" />';
|
||||
|
||||
footerHtml += '</div>';
|
||||
|
||||
footerHtml += '<div id="footerNotifications"></div>';
|
||||
footerHtml += '</div>';
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue