1
0
Fork 0
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 2013-05-23 16:09:01 -04:00
parent c83efd85a9
commit 05a4cb13a3
3 changed files with 363 additions and 122 deletions

View file

@ -697,10 +697,15 @@ progress {
/* Now playing bar */ /* Now playing bar */
#nowPlayingBar { #nowPlayingBar {
padding: 8px 20px; padding: 6px .5em;
border-top: 2px solid #D7742B; border-top: 2px solid #D7742B;
} }
#nowPlayingBar > *:not(#mediaElement) {
margin: 0 1em;
}
.nowPlayingBarImage { .nowPlayingBarImage {
border: 1px solid #a7a7a7; border: 1px solid #a7a7a7;
padding: 1px; padding: 1px;
@ -708,12 +713,12 @@ progress {
} }
.mediaButton { .mediaButton {
margin: 0 20px 0 0;
display: inline-block; display: inline-block;
position: relative;
top: -4px;
} }
#mediaElement { #mediaElement {
margin-right: 20px;
display: inline-block; display: inline-block;
position: relative; position: relative;
} }
@ -722,23 +727,27 @@ progress {
width: 270px; width: 270px;
} }
#nowPlayingBar #mediaInfo, #nowPlayingBar #mediaInfo div { .nowPlayingMediaInfo div {
margin-left: 10px;
display: inline-block; display: inline-block;
} }
#nowPlayingBar #mediaInfo { .nowPlayingMediaInfo a {
margin-right: .25em;
}
.nowPlayingMediaInfo {
display: none; display: none;
} }
@media all and (min-width: 650px) { @media all and (min-width: 650px) {
#nowPlayingBar #mediaInfo { .nowPlayingMediaInfo {
display: inline-block; display: inline-block;
} }
} }
.mediaButton img { .mediaButton img {
height: 28px; height: 24px;
} }
.itemVideo, .itemVideo.video-js { .itemVideo, .itemVideo.video-js {
@ -749,6 +758,45 @@ progress {
bottom: -5px; 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) { @media all and (min-width: 650px) {
.itemVideo { .itemVideo {

View file

@ -1,4 +1,4 @@
(function (document, clearTimeout, screen, localStorage, _V_, $, setInterval, window) { (function (document, setTimeout, clearTimeout, screen, localStorage, _V_, $, setInterval, window) {
function mediaPlayer() { function mediaPlayer() {
var self = this; var self = this;
@ -7,14 +7,149 @@
var testableVideoElement = document.createElement('video'); var testableVideoElement = document.createElement('video');
var currentMediaElement; var currentMediaElement;
var currentProgressInterval; 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.playing = ''; self.queue = [];
}
if (typeof(self.queue) == 'undefined') { function replaceQueryString(url, param, value) {
self.queue = []; var re = new RegExp("([?|&])" + param + "=.*?(&|$)", "i");
} if (url.match(re))
return url.replace(re, '$1' + param + "=" + value + '$2');
else
return url + '&' + param + "=" + value;
}
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) { function endsWith(text, pattern) {
@ -25,9 +160,35 @@
return d >= 0 && text.lastIndexOf(pattern) === d; 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 = { var baseParams = {
audioChannels: 2, 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 = ''; 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/mpeg" src="' + mp3Url + '" />';
html += '<source type="audio/aac" src="' + aacUrl + '" />'; html += '<source type="audio/aac" src="' + aacUrl + '" />';
html += '<source type="audio/webm" src="' + webmUrl + '" />'; html += '<source type="audio/webm" src="' + webmUrl + '" />';
//html += '<source type="audio/ogg" src="' + oggUrl + '" />';
html += '</audio'; html += '</audio';
var nowPlayingBar = $('#nowPlayingBar').show(); var nowPlayingBar = $('#nowPlayingBar').show();
//show stop button //show stop button
$('#stopButton', nowPlayingBar).show(); $('#stopButton', nowPlayingBar).show();
$('#playButton', nowPlayingBar).hide();
$('#pauseButton', nowPlayingBar).show();
$('#mediaElement', nowPlayingBar).html(html); $('#mediaElement', nowPlayingBar).html(html);
$(".itemAudio").each(function () { var audioElement = $("audio", nowPlayingBar);
this.volume = volume;
audioElement.each(function () {
this.volume = localStorage.getItem("volume") || 0.5;
}); });
$(".itemAudio").on("ended", function () { audioElement.on("volumechange", function () {
MediaPlayer.stopAudio(item.Id);
MediaPlayer.queuePlayNext(); var vol = this.volume;
});
$(".itemAudio").on("volumechange", function () { localStorage.setItem("volume", vol);
localStorage.setItem("volume", this.volume);
});
$(".itemAudio").on("play", updateAudioProgress(item.Id)); updateVolumeButtons(vol);
MediaPlayer.nowPlaying(item); }).on("play.once", function () {
return $('audio', nowPlayingBar)[0]; var duration = this.duration;
} isStaticStream = duration && !isNaN(duration) && duration != Number.POSITIVE_INFINITY && duration != Number.NEGATIVE_INFINITY;
function updateAudioProgress(itemId) { currentTimeElement.show();
ApiClient.reportPlaybackStart(Dashboard.getCurrentUserId(), itemId); audioElement.removeAttr('controls').hide().off("play.once");
currentProgressInterval = setInterval(function () { updateVolumeButtons(this.volume);
var position;
$(".itemAudio").each(function () {
position = Math.floor(10000000 * this.currentTime);
});
ApiClient.reportPlaybackProgress(Dashboard.getCurrentUserId(), itemId, position); ApiClient.reportPlaybackStart(Dashboard.getCurrentUserId(), item.Id);
}, 30000);
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);
currentItem = item;
curentDurationTicks = item.RunTimeTicks;
return audioElement[0];
} }
function playVideo(item, startPosition) { function playVideo(item, startPosition) {
@ -193,20 +378,20 @@
videoCodec: 'h264', videoCodec: 'h264',
audioCodec: 'aac', audioCodec: 'aac',
profile: 'high', profile: 'high',
videoBitrate: 2500000 videoBitrate: 2500000
})); }));
var tsVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.ts', $.extend({}, baseParams, { var tsVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.ts', $.extend({}, baseParams, {
videoCodec: 'h264', videoCodec: 'h264',
audioCodec: 'aac', audioCodec: 'aac',
profile: 'high', profile: 'high',
videoBitrate: 2500000 videoBitrate: 2500000
})); }));
var webmVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.webm', $.extend({}, baseParams, { var webmVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.webm', $.extend({}, baseParams, {
videoCodec: 'vpx', videoCodec: 'vpx',
audioCodec: 'Vorbis', audioCodec: 'Vorbis',
videoBitrate: 2500000 videoBitrate: 2500000
})); }));
var hlsVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.m3u8', $.extend({}, baseParams, { var hlsVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.m3u8', $.extend({}, baseParams, {
@ -234,7 +419,7 @@
(this).addEvent("loadstart", function () { (this).addEvent("loadstart", function () {
$(".vjs-remaining-time-display").hide(); $(".vjs-remaining-time-display").hide();
$(".vjs-duration-display").hide(); $(".vjs-duration-display").hide();
}); });
(this).addEvent("durationchange", function () { (this).addEvent("durationchange", function () {
@ -249,7 +434,7 @@
(this).addEvent("play", updateProgress); (this).addEvent("play", updateProgress);
(this).addEvent("ended", function () { (this).addEvent("ended", function () {
MediaPlayer.stop(); MediaPlayer.stop();
}); });
}); });
@ -278,7 +463,7 @@
var positionTicks = parseInt(startTime) + Math.floor(10000000 * player.currentTime()); var positionTicks = parseInt(startTime) + Math.floor(10000000 * player.currentTime());
ApiClient.reportPlaybackProgress(Dashboard.getCurrentUserId(), itemId, positionTicks); ApiClient.reportPlaybackProgress(Dashboard.getCurrentUserId(), itemId, positionTicks);
}, intervalTime); }, intervalTime);
} }
@ -326,6 +511,8 @@
mediaElement = playAudio(item); mediaElement = playAudio(item);
} }
startTimeTicksOffset = startPosition || 0;
if (!mediaElement) { if (!mediaElement) {
return; return;
} }
@ -392,7 +579,7 @@
else else
html += '<div>' + seriesName + '<br/>' + name + '</div>'; html += '<div>' + seriesName + '<br/>' + name + '</div>';
$('#mediaInfo', nowPlayingBar).html(html); $('.nowPlayingMediaInfo', nowPlayingBar).html(html);
}; };
self.playById = function (id, startPositionTicks) { self.playById = function (id, startPositionTicks) {
@ -405,70 +592,84 @@
}; };
self.nowPlaying = function (item) {
self.playing = item;
};
self.canQueue = function (mediaType) {
self.nowPlaying = function (item) {
self.playing = item;
};
self.canQueue = function (mediaType) {
return mediaType == "Audio"; return mediaType == "Audio";
}; };
self.queueAdd = function (item) { self.queueAdd = function (item) {
self.queue.push(item); self.queue.push(item);
}; };
self.queueRemove = function (elem) { self.queueRemove = function (elem) {
var index = $(elem).attr("data-queue-index"); var index = $(elem).attr("data-queue-index");
self.queue.splice(index, 1); self.queue.splice(index, 1);
$(elem).parent().parent().remove(); $(elem).parent().parent().remove();
return false; return false;
}; };
self.queuePlay = function (elem) { self.queuePlay = function (elem) {
var index = $(elem).attr("data-queue-index"); var index = $(elem).attr("data-queue-index");
MediaPlayer.play(new Array(self.queue[index])); MediaPlayer.play(new Array(self.queue[index]));
self.queue.splice(index, 1); self.queue.splice(index, 1);
}; };
self.queuePlayNext = function (item) { self.queuePlayNext = function (item) {
if (typeof self.queue[0] != "undefined") { if (typeof self.queue[0] != "undefined") {
MediaPlayer.play(new Array(self.queue[0])); MediaPlayer.play(new Array(self.queue[0]));
self.queue.shift(); self.queue.shift();
} }
}; };
self.queueAddNext = function (item) { self.queueAddNext = function (item) {
if (typeof self.queue[0] != "undefined") { if (typeof self.queue[0] != "undefined") {
self.queue.unshift(item); self.queue.unshift(item);
}else { } else {
self.queueAdd(item); self.queueAdd(item);
} }
}; };
self.inQueue = function (item) { self.inQueue = function (item) {
$.each(MediaPlayer.queue, function(i, queueItem){ $.each(MediaPlayer.queue, function (i, queueItem) {
if (item.Id == queueItem.Id) { if (item.Id == queueItem.Id) {
return true; return true;
} }
}); });
return false; return false;
}; };
self.playLast = function (itemId) { self.playLast = function (itemId) {
ApiClient.getItem(Dashboard.getCurrentUserId(), itemId).done(function (item) { ApiClient.getItem(Dashboard.getCurrentUserId(), itemId).done(function (item) {
self.queueAdd(item); self.queueAdd(item);
}); });
}; };
self.playNext = function (itemId) { self.playNext = function (itemId) {
ApiClient.getItem(Dashboard.getCurrentUserId(), itemId).done(function (item) { ApiClient.getItem(Dashboard.getCurrentUserId(), itemId).done(function (item) {
self.queueAddNext(item); self.queueAddNext(item);
}); });
};
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 () { self.stop = function () {
@ -496,8 +697,6 @@
//player.tech.destroy(); //player.tech.destroy();
player.destroy(); player.destroy();
} else { } else {
self.stopAudio();
elem.pause(); elem.pause();
elem.src = ""; 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 () { self.isPlaying = function () {
return currentMediaElement; return currentMediaElement;
}; };
@ -550,4 +733,4 @@
window.MediaPlayer = new mediaPlayer(); window.MediaPlayer = new mediaPlayer();
})(document, clearTimeout, screen, localStorage, _V_, $, setInterval, window); })(document, setTimeout, clearTimeout, screen, localStorage, _V_, $, setInterval, window);

View file

@ -714,7 +714,7 @@ var Dashboard = {
header.append(headerHtml); header.append(headerHtml);
if (!$('.supporterIcon', header).length) { if (!$('.supporterIcon', header).length) {
Dashboard.getPluginSecurityInfo().done(function (pluginSecurityInfo) { Dashboard.getPluginSecurityInfo().done(function (pluginSecurityInfo) {
if (pluginSecurityInfo.IsMBSupporter) { if (pluginSecurityInfo.IsMBSupporter) {
@ -1106,11 +1106,21 @@ $(function () {
footerHtml += '<div id="nowPlayingBar" style="display:none;">'; footerHtml += '<div id="nowPlayingBar" style="display:none;">';
footerHtml += '<a class="imageButton mediaButton" href="playlist.html"><img src="css/images/media/playlist.png" /></a>'; 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="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="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 += '<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="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>';
footerHtml += '<div id="footerNotifications"></div>'; footerHtml += '<div id="footerNotifications"></div>';
footerHtml += '</div>'; footerHtml += '</div>';