mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

restored audio and subtitle menus

Browse source
This commit is contained in:
Luke Pulverenti 2013-05-26 00:52:14 -04:00
parent cd0260b41e
commit 8414228858
6 changed files with 245 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
dashboard-ui/css/images/media/audioflyout.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
dashboard-ui/css/images/media/subtitleflyout.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 789 B

15
dashboard-ui/css/site.css
View file

@ -663,7 +663,6 @@ progress {
progress::-moz-progress-bar { progress::-moz-progress-bar {
border-radius: 5px; border-radius: 5px;
background-image: -moz-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% ); background-image: -moz-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );
s;
} }
/* Chrome */ /* Chrome */
@ -894,6 +893,10 @@ input[type="range"]::-ms-fill-upper {
width: 250px; width: 250px;
} }
.audioTracksFlyout {
width: 250px;
}
.mediaFlyoutOption { .mediaFlyoutOption {
display: block; display: block;
text-decoration: none; text-decoration: none;
@ -912,13 +915,21 @@ input[type="range"]::-ms-fill-upper {
.mediaFlyoutOptionImage { .mediaFlyoutOptionImage {
display: inline-block; display: inline-block;
width: 40%; width: 15%;
vertical-align: middle; vertical-align: middle;
} }
.mediaFlyoutOptionImage + .mediaFlyoutOptionContent { .mediaFlyoutOptionImage + .mediaFlyoutOptionContent {
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
width: 85%;
}
.chaptersFlyout .mediaFlyoutOptionImage {
width: 40%;
}
.chaptersFlyout .mediaFlyoutOptionImage + .mediaFlyoutOptionContent {
width: 60%; width: 60%;
} }

4
dashboard-ui/scripts/extensions.js
View file

@ -188,11 +188,11 @@ function humane_elapsed(firstDateStr, secondDateStr) {
} }
function getParameterByName(name) { function getParameterByName(name, url) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]"); name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)"; var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS); var regex = new RegExp(regexS);
var results = regex.exec(window.location.search); var results = regex.exec(url || window.location.search);
if (results == null) if (results == null)
return ""; return "";
else else

242
dashboard-ui/scripts/mediaplayer.js
View file

@ -18,6 +18,7 @@
var startTimeTicksOffset; var startTimeTicksOffset;
var curentDurationTicks; var curentDurationTicks;
var isStaticStream; var isStaticStream;
var culturesPromise;
self.playing = ''; self.playing = '';
self.queue = []; self.queue = [];
@ -69,6 +70,10 @@
} }
} }
function getCurrentTicks(mediaElement) {
return Math.floor(10000000 * (mediaElement || currentMediaElement).currentTime) + startTimeTicksOffset;
}
function onPlaybackStopped() { function onPlaybackStopped() {
currentTimeElement.hide(); currentTimeElement.hide();
@ -102,9 +107,8 @@
} }
function sendProgressUpdate(itemId) { function sendProgressUpdate(itemId) {
var position = Math.floor(10000000 * currentMediaElement.currentTime) + startTimeTicksOffset;
ApiClient.reportPlaybackProgress(Dashboard.getCurrentUserId(), itemId, position); ApiClient.reportPlaybackProgress(Dashboard.getCurrentUserId(), itemId, getCurrentTicks());
} }
function clearProgressInterval() { function clearProgressInterval() {
@ -115,24 +119,27 @@
} }
} }
function seek(ticks) { function changeStream(ticks, params) {
var element = currentMediaElement; var element = currentMediaElement;
if (isStaticStream) { if (isStaticStream && params == null) {
element.currentTime = ticks / (1000 * 10000); element.currentTime = ticks / (1000 * 10000);
} else { } else {
params = params || {};
var currentSrc = element.currentSrc; var currentSrc = element.currentSrc;
if (currentSrc.toLowerCase().indexOf('starttimeticks') == -1) {
currentSrc += "&starttimeticks=" + ticks;
} else {
currentSrc = replaceQueryString(currentSrc, 'starttimeticks', ticks); currentSrc = replaceQueryString(currentSrc, 'starttimeticks', ticks);
if (params.AudioStreamIndex != null) {
currentSrc = replaceQueryString(currentSrc, 'AudioStreamIndex', params.AudioStreamIndex);
}
if (params.SubtitleStreamIndex != null) {
currentSrc = replaceQueryString(currentSrc, 'SubtitleStreamIndex', params.SubtitleStreamIndex);
} }
clearProgressInterval(); clearProgressInterval();
@ -158,7 +165,7 @@
var newPositionTicks = (newPercent / 100) * currentItem.RunTimeTicks; var newPositionTicks = (newPercent / 100) * currentItem.RunTimeTicks;
seek(newPositionTicks); changeStream(newPositionTicks);
} }
$(function () { $(function () {
@ -213,10 +220,32 @@
var ticks = parseInt(this.getAttribute('data-positionticks')); var ticks = parseInt(this.getAttribute('data-positionticks'));
seek(ticks); changeStream(ticks);
hideFlyout($('#chaptersFlyout')); hideFlyout($('#chaptersFlyout'));
}); });
$('#audioTracksFlyout').on('click', '.mediaFlyoutOption', function () {
if (!$(this).hasClass('selectedMediaFlyoutOption')) {
var index = parseInt(this.getAttribute('data-index'));
changeStream(getCurrentTicks(), { AudioStreamIndex: index });
}
hideFlyout($('#audioTracksFlyout'));
});
$('#subtitleFlyout').on('click', '.mediaFlyoutOption', function () {
if (!$(this).hasClass('selectedMediaFlyoutOption')) {
var index = parseInt(this.getAttribute('data-index'));
changeStream(getCurrentTicks(), { SubtitleStreamIndex: index });
}
hideFlyout($('#subtitleFlyout'));
});
}); });
function endsWith(text, pattern) { function endsWith(text, pattern) {
@ -385,9 +414,7 @@
if (!isPositionSliderActive) { if (!isPositionSliderActive) {
var ticks = startTimeTicksOffset + this.currentTime * 1000 * 10000; setCurrentTime(getCurrentTicks(this), item, true);
setCurrentTime(ticks, item, true);
} }
}).on("ended.playbackstopped", onPlaybackStopped); }).on("ended.playbackstopped", onPlaybackStopped);
@ -484,6 +511,7 @@
$('#mediaElement', nowPlayingBar).html(html); $('#mediaElement', nowPlayingBar).html(html);
$('#qualityButton', nowPlayingBar).show(); $('#qualityButton', nowPlayingBar).show();
$('#audioTracksButton', nowPlayingBar).show(); $('#audioTracksButton', nowPlayingBar).show();
if (item.MediaStreams.filter(function (i) { if (item.MediaStreams.filter(function (i) {
@ -552,9 +580,7 @@
if (!isPositionSliderActive) { if (!isPositionSliderActive) {
var ticks = startTimeTicksOffset + this.currentTime * 1000 * 10000; setCurrentTime(getCurrentTicks(this), item, true);
setCurrentTime(ticks, item, true);
} }
}).on("ended.playbackstopped", onPlaybackStopped); }).on("ended.playbackstopped", onPlaybackStopped);
@ -569,10 +595,14 @@
function getInitialAudioStreamIndex(mediaStreams, user) { function getInitialAudioStreamIndex(mediaStreams, user) {
var audioStreams = mediaStreams.filter(function (stream) {
return stream.Type == "Audio";
});
if (user.Configuration.AudioLanguagePreference) { if (user.Configuration.AudioLanguagePreference) {
for (var i = 0, length = mediaStreams.length; i < length; i++) { for (var i = 0, length = audioStreams.length; i < length; i++) {
var mediaStream = mediaStreams[i]; var mediaStream = audioStreams[i];
if (mediaStream.Type == "Audio" && mediaStream.Language == user.Configuration.AudioLanguagePreference) { if (mediaStream.Type == "Audio" && mediaStream.Language == user.Configuration.AudioLanguagePreference) {
return mediaStream.Index; return mediaStream.Index;
@ -581,7 +611,8 @@
} }
} }
return null; // Just use the first audio stream
return audioStreams.length ? audioStreams[0].Index : null;
} }
function getInitialSubtitleStreamIndex(mediaStreams, user) { function getInitialSubtitleStreamIndex(mediaStreams, user) {
@ -951,7 +982,7 @@
var html = ''; var html = '';
var currentTicks = Math.floor(10000000 * currentMediaElement.currentTime) + startTimeTicksOffset; var currentTicks = getCurrentTicks();
for (var i = 0, length = item.Chapters.length; i < length; i++) { for (var i = 0, length = item.Chapters.length; i < length; i++) {
@ -1004,14 +1035,174 @@
return html; return html;
} }
function getAudioTracksHtml(item, cultures) {
var streams = item.MediaStreams.filter(function (i) {
return i.Type == "Audio";
});
var currentIndex = getParameterByName('AudioStreamIndex', currentMediaElement.currentSrc);
var html = '';
for (var i = 0, length = streams.length; i < length; i++) {
var stream = streams[i];
if (stream.Index == currentIndex) {
html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption selectedMediaFlyoutOption">';
} else {
html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption">';
}
html += '<img class="mediaFlyoutOptionImage" src="css/images/media/audioflyout.png" />';
html += '<div class="mediaFlyoutOptionContent">';
var language = null;
if (stream.Language && stream.Language != "und") {
var culture = cultures.filter(function (current) {
return current.ThreeLetterISOLanguageName.toLowerCase() == stream.Language.toLowerCase();
});
if (culture.length) {
language = culture[0].DisplayName;
}
}
html += '<div class="mediaFlyoutOptionName">' + (language || 'Unknown language') + '</div>';
var options = [];
if (stream.Codec) {
options.push(stream.Codec);
}
if (stream.Profile) {
options.push(stream.Profile);
}
if (stream.BitRate) {
options.push((parseInt(stream.BitRate / 1000)) + ' kbps');
}
if (stream.Channels) {
options.push(stream.Channels + ' ch');
}
if (options.length) {
html += '<div class="mediaFlyoutOptionSecondaryText">' + options.join('&nbsp;&#149;&nbsp;') + '</div>';
}
options = [];
if (stream.IsDefault) {
options.push('Default');
}
if (stream.IsForced) {
options.push('Forced');
}
if (options.length) {
html += '<div class="mediaFlyoutOptionSecondaryText">' + options.join('&nbsp;&#149;&nbsp;') + '</div>';
}
html += "</div>";
html += "</div>";
}
return html;
}
function getSubtitleTracksHtml(item, cultures) {
var streams = item.MediaStreams.filter(function (i) {
return i.Type == "Subtitle";
});
var currentIndex = getParameterByName('SubtitleStreamIndex', currentMediaElement.currentSrc);
var html = '';
for (var i = 0, length = streams.length; i < length; i++) {
var stream = streams[i];
if (stream.Index == currentIndex) {
html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption selectedMediaFlyoutOption">';
} else {
html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption">';
}
html += '<img class="mediaFlyoutOptionImage" src="css/images/media/audioflyout.png" />';
html += '<div class="mediaFlyoutOptionContent">';
var language = null;
if (stream.Language && stream.Language != "und") {
var culture = cultures.filter(function (current) {
return current.ThreeLetterISOLanguageName.toLowerCase() == stream.Language.toLowerCase();
});
if (culture.length) {
language = culture[0].DisplayName;
}
}
html += '<div class="mediaFlyoutOptionName">' + (language || 'Unknown language') + '</div>';
var options = [];
if (stream.Codec) {
options.push(stream.Codec);
}
if (options.length) {
html += '<div class="mediaFlyoutOptionSecondaryText">' + options.join('&nbsp;&#149;&nbsp;') + '</div>';
}
options = [];
if (stream.IsDefault) {
options.push('Default');
}
if (stream.IsForced) {
options.push('Forced');
}
if (stream.IsExternal) {
options.push('External');
}
if (options.length) {
html += '<div class="mediaFlyoutOptionSecondaryText">' + options.join('&nbsp;&#149;&nbsp;') + '</div>';
}
html += "</div>";
html += "</div>";
}
return html;
}
self.showAudioTracksFlyout = function () { self.showAudioTracksFlyout = function () {
var flyout = $('#audioTracksFlyout'); var flyout = $('#audioTracksFlyout');
if (!flyout.is(':visible')) { if (!flyout.is(':visible')) {
culturesPromise = culturesPromise || ApiClient.getCultures();
culturesPromise.done(function (cultures) {
showFlyout(flyout, '#audioTracksButton'); showFlyout(flyout, '#audioTracksButton');
flyout.html(getAudioTracksHtml(currentItem, cultures)).scrollTop(0);
});
} }
}; };
@ -1023,7 +1214,7 @@
showFlyout(flyout, '#chaptersButton'); showFlyout(flyout, '#chaptersButton');
flyout.html(getChaptersFlyoutHtml(currentItem)); flyout.html(getChaptersFlyoutHtml(currentItem)).scrollTop(0);
} }
}; };
@ -1044,8 +1235,15 @@
if (!flyout.is(':visible')) { if (!flyout.is(':visible')) {
culturesPromise = culturesPromise || ApiClient.getCultures();
culturesPromise.done(function (cultures) {
showFlyout(flyout, '#subtitleButton'); showFlyout(flyout, '#subtitleButton');
flyout.html(getSubtitleTracksHtml(currentItem, cultures)).scrollTop(0);
});
} }
}; };
} }

11
dashboard-ui/scripts/site.js
View file

@ -1118,19 +1118,20 @@ $(function () {
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="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 += '<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 += '<input type="range" class="mediaSlider volumeSlider" step=".05" min="0" max="1" value="0" />';
footerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="fullscreenButton" class="imageButton mediaButton fullscreenButton" title="Fullscreen" type="button"><img src="css/images/media/fullscreen.png" /></button>';
footerHtml += '<button onclick="MediaPlayer.showQualityFlyout();" id="qualityButton" class="imageButton mediaButton qualityButton" title="Quality" type="button"><img src="css/images/media/quality.png" /></button>'; footerHtml += '<button onclick="MediaPlayer.showQualityFlyout();" id="qualityButton" class="imageButton mediaButton qualityButton" title="Quality" type="button"><img src="css/images/media/quality.png" /></button>';
footerHtml += '<div class="mediaFlyoutContainer"><div id="qualityFlyout" style="display:none;" class="mediaPlayerFlyout">Coming soon</div></div>'; footerHtml += '<div class="mediaFlyoutContainer"><div id="qualityFlyout" style="display:none;" class="mediaPlayerFlyout"></div></div>';
footerHtml += '<button onclick="MediaPlayer.showAudioTracksFlyout();" id="audioTracksButton" class="imageButton mediaButton audioTracksButton" title="Audio tracks" type="button"><img src="css/images/media/audiotrack.png" /></button>'; footerHtml += '<button onclick="MediaPlayer.showAudioTracksFlyout();" id="audioTracksButton" class="imageButton mediaButton audioTracksButton" title="Audio tracks" type="button"><img src="css/images/media/audiotrack.png" /></button>';
footerHtml += '<div class="mediaFlyoutContainer"><div id="audioTracksFlyout" style="display:none;" class="mediaPlayerFlyout">Coming soon</div></div>'; footerHtml += '<div class="mediaFlyoutContainer"><div id="audioTracksFlyout" style="display:none;" class="mediaPlayerFlyout audioTracksFlyout"></div></div>';
footerHtml += '<button onclick="MediaPlayer.showSubtitleMenu();" id="subtitleButton" class="imageButton mediaButton subtitleButton" title="Subtitles" type="button"><img src="css/images/media/subtitles.png" /></button>'; footerHtml += '<button onclick="MediaPlayer.showSubtitleMenu();" id="subtitleButton" class="imageButton mediaButton subtitleButton" title="Subtitles" type="button"><img src="css/images/media/subtitles.png" /></button>';
footerHtml += '<div class="mediaFlyoutContainer"><div id="subtitleFlyout" style="display:none;" class="mediaPlayerFlyout">Coming soon</div></div>'; footerHtml += '<div class="mediaFlyoutContainer"><div id="subtitleFlyout" style="display:none;" class="mediaPlayerFlyout subtitleFlyout"></div></div>';
footerHtml += '<button onclick="MediaPlayer.showChaptersFlyout();" id="chaptersButton" class="imageButton mediaButton chaptersButton" title="Scenes" type="button"><img src="css/images/media/chapters.png" /></button>'; footerHtml += '<button onclick="MediaPlayer.showChaptersFlyout();" id="chaptersButton" class="imageButton mediaButton chaptersButton" title="Scenes" type="button"><img src="css/images/media/chapters.png" /></button>';
footerHtml += '<div class="mediaFlyoutContainer"><div id="chaptersFlyout" style="display:none;" class="mediaPlayerFlyout chaptersFlyout">Coming soon</div></div>'; footerHtml += '<div class="mediaFlyoutContainer"><div id="chaptersFlyout" style="display:none;" class="mediaPlayerFlyout chaptersFlyout"></div></div>';
footerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="fullscreenButton" class="imageButton mediaButton fullscreenButton" title="Fullscreen" type="button"><img src="css/images/media/fullscreen.png" /></button>';
footerHtml += '</div>'; footerHtml += '</div>';