From 9c2e442d4689e1ff16dba6de42d5cd35c1bbd825 Mon Sep 17 00:00:00 2001
From: Techywarrior <techywarrior@gmail.com>
Date: Thu, 4 Apr 2013 19:09:05 -0700
Subject: [PATCH] subtitle and language selector in video player, respect audio
 and subtitle preference selections

---
 dashboard-ui/css/images/media/language.png | Bin 0 -> 738 bytes
 dashboard-ui/css/images/media/quality.png  | Bin 857 -> 651 bytes
 dashboard-ui/css/site.css                  |  14 ++-
 dashboard-ui/scripts/mediaplayer.js        |  41 +++++-
 dashboard-ui/scripts/videojsextensions.js  | 139 +++++++++++++--------
 5 files changed, 131 insertions(+), 63 deletions(-)
 create mode 100644 dashboard-ui/css/images/media/language.png

diff --git a/dashboard-ui/css/images/media/language.png b/dashboard-ui/css/images/media/language.png
new file mode 100644
index 0000000000000000000000000000000000000000..7a44d41cee3bff1a0a0c1086a902d83c1c5c6e6f
GIT binary patch
literal 738
zcmV<80v-K{P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!gh@m}RCwB?Q%h?TVHCadNHQ5}NJ~N<
z1rrMiA&F^?ZG|8T;-VV`p_}Zipx`3EpfH=R+_-Sz%EzuEh^CwDbdjhCHYRkDDm5)_
z5G-jDCGY2WZZR8imk$mz^L_U_=bn4-2)eG*Buk_Tm%O>TNp82BqR}YzdOhBo1}*|Y
zzySzA1^5PR13x)P5Cq!a-zPblOj0Bgp}D!av#nNZ9hO#cIK$RBh!?*zL{V(vGllmJ
zJa=-r9Elu+gKLAqAXhGz@3q_QnP#&|!{Lx>wHjfM`u+YXL8VerPfku&@y(gsKD7`E
zg}lql%P)_QkAEK?9)_$|tJdjsT6VkrCiW7e(dY{<yqcPtS~xm7x{N!&TrSs^!{K-i
z((m%h%1T^SRU4GMuyP$wFS4o0vaI_3{za3?BsUt3X=Evf!{G~(B<aZT3}Pr446eyg
zP&mDMy>3XS(;kDt@BtaEL+vdr*g(2fC=?#S(rcg3_pn$jzVUj!CbQYh4irJtw1uUm
zrB4=%r39i&AW*>m6~qrvpCtCOP+vqwKTzb4IJ;pq8lNhPawU~Y-4f#QIN@L|kw`qT
z*=!;L22hj1-Uo)P0&w+5AW}i3qnJ`YpWo<qyP5=F<neg&@b>QD;J}BVb71EdN>E2U
zbCCh0#%i@H?C$OsVDCPxJq7`B4TvwqVzKw|cNK@{5flTlhKyX<Z1yuU%ptA_dl__K
zdwzbt&voO$lgER?y+&*F+1c40Twq&{OeXUJdv^kXK!-DdcVa>Az<3&Er_)J1ID310
z#3{joz{7&?yQumzw2?}s68-zrjfn(SW<{R7ze_-{2*n{QjMe_Pm|U3jcm5;502IP#
U(|8e-tN;K207*qoM6N<$f_sorSO5S3

literal 0
HcmV?d00001

diff --git a/dashboard-ui/css/images/media/quality.png b/dashboard-ui/css/images/media/quality.png
index b52641fcb6796fb2fa2fa12778efc405205afddf..6312637ec87edb99d509153656f93c5dd4b3acdb 100644
GIT binary patch
literal 651
zcmV;60(AX}P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU!ElET{RCwB?le>!(Q544K&fL6=d5}m7
zu?SI;LV~a&TUgm_Bcu{+?d|*zwh?SBbt^5mw^D4=2(Af%EP)LR;>Li<<Ux|n<Tc~(
z#2JWI!XCJD?wt4e<{RaCo^ch?o6ROXolf_-M=0iMt<`e5^upn=TCdlhQpzw*Q>|93
ztxdGVkmtqY@w%SPW;d(V>LG?}i^XD^N~Q9{;jos;WcJYQNF<U9g+g)S&cxR1_3DX4
z;?6ImQmMSubWoOM8Ld|9O*)-+$K!E?j+c|k<Rh*H+F~+GY)ty$5~<Z{w@Rhb0e(}v
zuB&kl3WdUPxm-2`6B&C~<XwueniM-~G#VxYv;_iF0w^N;8U$<)tL)zOXf(PzpU+Rb
z-R@K39<tUAay*fsfB^>EBX=n%MM!$i?w@VjzK5?Uz)6fWlQ@}H%fnAH{3#Nk{BAH9
zd;z=%bi0jxBfcOxXe1I$upsHa<2aw#?GfFd5Okg6?j{B&C?L&)0!}m<eT?&f@BCNr
zzlnhk2&e-L5W&Rw-?NK>Fe}mNbn4A!^9T$&u~_UaYn;H34xhM<?K`&jfO-xl#{heg
z&1Uzvxdf~+<dVtcGuE(S;%jjDn#<*0K&o@-8w1QkSb1737GL%I{dzv17e>aIdM*FL
z4Dh}&Qj&rWNk2#s{S)69-;!w@rgY%L1*Dq6$N{l7c3a6VToeZ7GtTqBjw=QqEO`h$
l{{;D(My|T*@BCYU0RRWj2^OLb4JH5p002ovPDHLkV1l&lFbV(w

literal 857
zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1|$#LC7uRSjKx9jP7LeL$-D$|SkfJR9T^xl
z_H+M9WCij$3p^r=85sBugD~Uq{1qt-3{3AlT^vIy;@;l1FS_g?bF|QV`GS_dzB>#r
zG<Gtc6kMUfDZBCko2QnPl+_B4gN!u{X_J(fEco`R?91#k4O^x;OjCYcYi~U3s+;!O
z$2NaAs%UEiEkXhtI6|jv-gq;|ZiPiwmTP)xY<=&?gF#-)weFd1&C4oYm^$C3)ZlFS
znn!z9mIlw(*8N=>lD@F7$ggkJs;X<oHXYj}GW!@0$O$qOvmB6NG;n7)Lkjck$88_p
z|2%hp#k4sq&bs#8_te}Q61Zn+%;ovtbfa^xWqnp%6`RLZEB_?-;pWNA3(Qyf*KLkA
zd0*)>->0tj;$3-@mpd{8!)ATA+sIAO>KhYlS_2M;74H$+vE}r^{!pL43@f9*?(Hjl
zb8E)wgFnjOFhQJtXAvLM@+FV^YSt&-SI%({l;8iw^I>s_?b)vi0k!kYV*TCs|1K@r
zZXOoRu=lw0wMX-#zV%D&UtC!&Z(=*`*N%%~4+2AMeRr~6sM(vn@z?u3Tcan7?PPtR
zaN&*&bHOr2`}O-RGEy^h7d6Il@$GKdzX8SN+rJw(T3!0PB<a#@vsJ5hy|D^j!Tk3B
zzwL$2&t$!8b^iM#{9Ca&z9j2s|J6zL_k8poCo8PEb6oF1)a>W&fpbq;f4z8%D??R!
zGxrJc6<y*hP5yTNI@7;GGidgoikYWZY|Hqy_SZj&tEpC3Vjbkqo>ERKsNiU@WJ>5`
zn4!$@428LKFS|ngyEWT9G-F*a=YA4*-uBW)w8v~4nlkK~A)>|AK^g!4-CMn)>{8MG
z%nJFd2fyr!Ur}-SO4qg0*!_KlNXZb$Y><syTgPnA%=BHzz|s>W=jrO_vd$@?2>{-!
BWSRf~

diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css
index e4e97fe8f2..34af51eebd 100644
--- a/dashboard-ui/css/site.css
+++ b/dashboard-ui/css/site.css
@@ -838,8 +838,10 @@ progress {
     width: auto !important;
 }
 
-.vjs-quality-button div {
-    background: red !important;
+.vjs-default-skin .vjs-menu-button.vjs-quality-button div {
+	background: url("images/media/quality.png");
+	height: 16px;
+	width: 16px;
 }
 
 .vjs-chapter-button div {
@@ -873,7 +875,7 @@ progress {
 }
 
 .vjs-subtitle-button div {
-	background: green !important;
+	background-position: -25px -75px !important;
 }
 
 .vjs-subtitle-button.vjs-menu-button ul {
@@ -889,8 +891,10 @@ progress {
 	padding-right: 10px;
 }
 
-.vjs-language-button div {
-	background: yellow !important;
+.vjs-default-skin .vjs-menu-button.vjs-language-button div {
+	background: url("images/media/language.png") !important;
+	height: 16px;
+	width: 16px;
 }
 
 .vjs-language-button.vjs-menu-button ul {
diff --git a/dashboard-ui/scripts/mediaplayer.js b/dashboard-ui/scripts/mediaplayer.js
index f05ba46d1a..c03afad628 100644
--- a/dashboard-ui/scripts/mediaplayer.js
+++ b/dashboard-ui/scripts/mediaplayer.js
@@ -179,6 +179,37 @@
 		var screenHeight = Math.min(screen.height, screen.width);
 
 		var volume = localStorage.getItem("volume") || 0.5;
+		var user = Dashboard.getCurrentUser();
+		var defaults = {languageIndex: null, subtitleIndex: null};
+
+		var user_config = 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) {
+							defaults.subtitleIndex = i;
+						}
+					}else if (user_config.SubtitleLanguagePreference && !defaults.subtitleIndex) {
+						if (stream.Language == user_config.SubtitleLanguagePreference) {
+							defaults.subtitleIndex = i;
+						}
+					}else if (user_config.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) {
+							defaults.languageIndex = i;
+						}
+					}
+				}
+			});
+		}
 
 		var baseParams = {
 			audioChannels: 2,
@@ -186,7 +217,9 @@
 			videoBitrate: 1500000,
 			maxWidth: screenWidth,
 			maxHeight: screenHeight,
-			StartTimeTicks: 0
+			StartTimeTicks: 0,
+			SubtitleStreamIndex: null,
+			AudioStreamIndex: null
 		};
 
 		if (typeof (startPosition) != "undefined") {
@@ -235,7 +268,7 @@
 				{ type: "video/ogg", src: ogvVideoUrl }]
 			).volume(volume);
 
-			videoJSextension.setup_video($('#videoWindow'), item);
+			videoJSextension.setup_video($('#videoWindow'), item, defaults);
 
 			(this).addEvent("loadstart", function () {
 				$(".vjs-remaining-time-display").hide();
@@ -276,7 +309,7 @@
 
 			ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), item_id, positionTicks);
 
-			clearTimeout(progressInterval);
+			clearTimeout(MediaPlayer.progressInterval);
 
 			if (player.techName == "html5") {
 				player.tag.src = "";
@@ -302,7 +335,7 @@
 	},
 
 	updateProgress: function () {
-		progressInterval = setInterval(function () {
+		MediaPlayer.progressInterval = setInterval(function () {
 			var player = _V_("videoWindow");
 
 			var startTimeTicks = player.tag.src.match(new RegExp("StartTimeTicks=[0-9]+", "g"));
diff --git a/dashboard-ui/scripts/videojsextensions.js b/dashboard-ui/scripts/videojsextensions.js
index 2c0437590c..314c16dab3 100644
--- a/dashboard-ui/scripts/videojsextensions.js
+++ b/dashboard-ui/scripts/videojsextensions.js
@@ -6,7 +6,7 @@ var videoJSextension = {
 	 a mandatory jQuery object of the <video> element we are setting up the
 	 videojs video for.
 	 */
-	setup_video: function ($video, item) {
+	setup_video: function ($video, item, defaults) {
 
 		// Add the stop button.
 		_V_.merge(_V_.ControlBar.prototype.options.components, { StopButton: {} });
@@ -18,6 +18,10 @@ var videoJSextension = {
 			vjs_source = {},
 			vjs_chapters = [], // This will be an array of arrays of objects, see the video.js api documentation for myPlayer.src()
 			vjs_chapter = {};
+			vjs_languages = [], // This will be an array of arrays of objects, see the video.js api documentation for myPlayer.src()
+			vjs_language = {};
+			vjs_subtitles = [], // This will be an array of arrays of objects, see the video.js api documentation for myPlayer.src()
+			vjs_subtitle = {};
 
 		// Determine this video's default res (it might not have the globally determined default available)
 		default_res = available_res[0];
@@ -67,53 +71,63 @@ var videoJSextension = {
 		}
 
 
-		//chceck if langauges exist and add language selector
-		if (item.Chapters && item.Chapters.length) {
-			// Put together the videojs source arrays for each available chapter
-			$.each(item.Chapters, function (i, chapter) {
+		//chceck if langauges exist and add language selector also subtitles
+		if (item.MediaStreams && item.MediaStreams.length) {
+			var subCount = 1;
+			var langCount = 1;
+			var defaultLanguageIndex = defaults.languageIndex || 1;
+			var defaultSubtitleIndex = defaults.subtitleIndex || 0;
 
-				vjs_chapters[i] = [];
+			// Put together the videojs source arrays for each available language and subtitle
+			$.each(item.MediaStreams, function (i, stream) {
+				var language = stream.Language || '';
 
-				vjs_chapter = {};
-				vjs_chapter.Name = chapter.Name + " (" + ticks_to_human(chapter.StartPositionTicks) + ")";
-				vjs_chapter.StartPositionTicks = chapter.StartPositionTicks;
+				if (stream.Type == "Audio") {
+					vjs_languages[i] = [];
+					vjs_language = {};
 
-				vjs_chapters[i].push(vjs_chapter);
+					vjs_language.Name = langCount + ": " + language + " " + stream.Codec + " " + stream.Channels + "ch";
+					vjs_language.index = i;
 
+					vjs_languages[i].push(vjs_language);
+
+					langCount++;
+				}else if (stream.Type == "Subtitle") {
+					vjs_subtitles[i] = [];
+					vjs_subtitle = {};
+
+					vjs_subtitle.Name = subCount + ": " + language;
+					vjs_subtitle.index = i;
+
+					vjs_subtitles[i].push(vjs_subtitle);
+
+					subCount++;
+				}
 			});
 
-			_V_.LanguageSelectorButton = _V_.LanguageSelector.extend({
-				buttonText: '',
-				Chapters: vjs_chapters
-			});
+			if (vjs_languages.length) {
 
-			// Add the chapter selector button.
-			_V_.merge(_V_.ControlBar.prototype.options.components, { LanguageSelectorButton: {} });
-		}
+				_V_.LanguageSelectorButton = _V_.LanguageSelector.extend({
+					buttonText: vjs_languages[defaultLanguageIndex][0].Name,
+					Languages: vjs_languages
+				});
 
+				// Add the language selector button.
+				_V_.merge(_V_.ControlBar.prototype.options.components, { LanguageSelectorButton: {} });
+			}
 
-		//chceck if subtitles exist and add subtitle selector
-		if (item.Chapters && item.Chapters.length) {
-			// Put together the videojs source arrays for each available chapter
-			$.each(item.Chapters, function (i, chapter) {
+			if (vjs_subtitles.length) {
+				vjs_subtitles[0] = [];
+				vjs_subtitles[0].push({Name: "Off", index: ''});
+				_V_.SubtitleSelectorButton = _V_.SubtitleSelector.extend({
+					buttonText: vjs_subtitles[defaultSubtitleIndex][0].Name,
+					Subtitles: vjs_subtitles
+				});
 
-				vjs_chapters[i] = [];
+				// Add the subtitle selector button.
+				_V_.merge(_V_.ControlBar.prototype.options.components, { SubtitleSelectorButton: {} });
+			}
 
-				vjs_chapter = {};
-				vjs_chapter.Name = chapter.Name + " (" + ticks_to_human(chapter.StartPositionTicks) + ")";
-				vjs_chapter.StartPositionTicks = chapter.StartPositionTicks;
-
-				vjs_chapters[i].push(vjs_chapter);
-
-			});
-
-			_V_.SubtitleSelectorButton = _V_.SubtitleSelector.extend({
-				buttonText: '',
-				Chapters: vjs_chapters
-			});
-
-			// Add the chapter selector button.
-			_V_.merge(_V_.ControlBar.prototype.options.components, { SubtitleSelectorButton: {} });
 		}
 
 	}
@@ -292,6 +306,7 @@ _V_.ResolutionMenuItem = _V_.MenuItem.extend({
 				this.play();
 			});
 		} else {
+			newSrc += "&StartTimeTicks=0";
 			this.player.src(newSrc).one('loadedmetadata', function () {
 				this.currentTime(current_time);
 				this.play();
@@ -548,6 +563,9 @@ _V_.SubtitleSelector = _V_.Button.extend({
 
 		this._super(player, options);
 
+		// Save the starting subtitle track as a property of the player object
+		player.options.currentSubtitle = this.buttonText;
+
 		this.menu = this.createMenu();
 
 		if (this.items.length === 0) {
@@ -598,11 +616,12 @@ _V_.SubtitleSelector = _V_.Button.extend({
 		var items = [];
 
 		this.each(this.Subtitles, function (subtitle) {
-
-			items.push(new _V_.SubtitleMenuItem(this.player, {
-				label: subtitle[0].Name,
-				src: subtitle
-			}));
+			if (subtitle && subtitle.length) {
+				items.push(new _V_.SubtitleMenuItem(this.player, {
+					label: subtitle[0].Name,
+					src: subtitle
+				}));
+			}
 		});
 
 		return items;
@@ -654,7 +673,7 @@ _V_.SubtitleMenuItem = _V_.MenuItem.extend({
 	init: function (player, options) {
 
 		// Modify options for parent MenuItem class's init.
-		//options.selected = ( options.label === player.options.currentResolution );
+		options.selected = ( options.label === player.options.currentSubtitle );
 		this._super(player, options);
 
 		this.player.addEvent('changeSubtitle', _V_.proxy(this, this.update));
@@ -668,17 +687,17 @@ _V_.SubtitleMenuItem = _V_.MenuItem.extend({
 
 		var current_time = this.player.currentTime();
 
-		// Set the button text to the newly chosen quality
+		// Set the button text to the newly chosen subtitle
 		jQuery(this.player.controlBar.el).find('.vjs-quality-text').html(this.options.label);
 
 		// Change the source and make sure we don't start the video over
 		var currentSrc = this.player.tag.src;
 		var src = parse_src_url(currentSrc);
 
-
 		var newSrc = "/mediabrowser/" + src.Type + "/" + src.item_id + "/stream." + src.stream + "?audioChannels=" + src.audioChannels + "&audioBitrate=" + src.audioBitrate +
 			"&videoBitrate=" + src.videoBitrate + "&maxWidth=" + src.maxWidth + "&maxHeight=" + src.maxHeight +
-			"&videoCodec=" + src.videoCodec + "&audioCodec=" + src.audioCodec;
+			"&videoCodec=" + src.videoCodec + "&audioCodec=" + src.audioCodec +
+			"&AudioStreamIndex=" + src.AudioStreamIndex + "&SubtitleStreamIndex=" + this.options.src[0].index;
 
 		if (this.player.duration() == "Infinity") {
 			if (currentSrc.indexOf("StartTimeTicks") >= 0) {
@@ -694,6 +713,7 @@ _V_.SubtitleMenuItem = _V_.MenuItem.extend({
 				this.play();
 			});
 		} else {
+			newSrc += "&StartTimeTicks=0";
 			this.player.src(newSrc).one('loadedmetadata', function () {
 				this.currentTime(current_time);
 				this.play();
@@ -733,6 +753,9 @@ _V_.LanguageSelector = _V_.Button.extend({
 
 		this._super(player, options);
 
+		// Save the starting language as a property of the player object
+		player.options.currentLanguage = this.buttonText;
+
 		this.menu = this.createMenu();
 
 		if (this.items.length === 0) {
@@ -783,11 +806,12 @@ _V_.LanguageSelector = _V_.Button.extend({
 		var items = [];
 
 		this.each(this.Languages, function (language) {
-
-			items.push(new _V_.LanguageMenuItem(this.player, {
-				label: language[0].Name,
-				src: language
-			}));
+			if (language && language.length) {
+				items.push(new _V_.LanguageMenuItem(this.player, {
+					label: language[0].Name,
+					src: language
+				}));
+			}
 		});
 
 		return items;
@@ -839,20 +863,26 @@ _V_.LanguageMenuItem = _V_.MenuItem.extend({
 	init: function (player, options) {
 
 		// Modify options for parent MenuItem class's init.
-		//options.selected = ( options.label === player.options.currentResolution );
+		options.selected = ( options.label === player.options.currentLanguage );
 		this._super(player, options);
 
 		this.player.addEvent('changeLanguage', _V_.proxy(this, this.update));
 	},
 
 	onClick: function () {
-		// Check that we are changing to a new subtitle (not the one we are already on)
+
+		// Check that we are changing to a new language (not the one we are already on)
 		if (this.options.label === this.player.options.currentLanguage)
 			return;
 
+		// Change the source and make sure we don't start the video over
+		var currentSrc = this.player.tag.src;
+		var src = parse_src_url(currentSrc);
+
 		var newSrc = "/mediabrowser/" + src.Type + "/" + src.item_id + "/stream." + src.stream + "?audioChannels=" + src.audioChannels + "&audioBitrate=" + src.audioBitrate +
 			"&videoBitrate=" + src.videoBitrate + "&maxWidth=" + src.maxWidth + "&maxHeight=" + src.maxHeight +
-			"&videoCodec=" + src.videoCodec + "&audioCodec=" + src.audioCodec;
+			"&videoCodec=" + src.videoCodec + "&audioCodec=" + src.audioCodec +
+			"&AudioStreamIndex=" + this.options.src[0].index + "&SubtitleStreamIndex=" + src.SubtitleStreamIndex;
 
 		if (this.player.duration() == "Infinity") {
 			if (currentSrc.indexOf("StartTimeTicks") >= 0) {
@@ -868,6 +898,7 @@ _V_.LanguageMenuItem = _V_.MenuItem.extend({
 				this.play();
 			});
 		} else {
+			newSrc += "&StartTimeTicks=0";
 			this.player.src(newSrc).one('loadedmetadata', function () {
 				this.currentTime(current_time);
 				this.play();