Fev 351 link to playlist title (kaltura#4061)

* fix(SUP-18895): fix typo 'hotizontal' to 'horizontal' (kaltura#4016) * feat(FEC-9034): don't filter same language audio track (kaltura#4045) remove filtering from hls as it was never an issue there changed the way we filter on shaka to use built in methods that only give audio representations languages and not adaptations. * Bump version to 2.77.2 * FEV-351 - support
noam-arad · Sep 4, 2019 · 476e8e4 · 476e8e4
1 parent 6767c3c
commit 476e8e4
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 8 deletions.
diff --git a/modules/KalturaSupport/components/playlist/playList.css b/modules/KalturaSupport/components/playlist/playList.css
@@ -364,7 +364,9 @@
 .playlistAPI .playlistItem:first-letter {
 	text-transform: capitalize
 }
-
+.playlistAPI .playlistTitle a {
+	color: #ffffff;
+}
 .playlistAPI .playlistTitle {
 	font-size: 1.1em;
 	display: block;
@@ -555,4 +557,4 @@
 
 .playlistAPI .nano > .nano-pane   { background: #888; }
 .playlistAPI .nano > .nano-pane:hover {cursor: pointer;}
-.playlistAPI .nano > .nano-pane > .nano-slider { background: #111; }
+.playlistAPI .nano > .nano-pane > .nano-slider { background: #111; }
diff --git a/modules/KalturaSupport/components/playlistAPI.js b/modules/KalturaSupport/components/playlistAPI.js
@@ -35,7 +35,10 @@
 			'renderWhenEmpty': false,
 			'paging': false,
 			'pageSize': 25,
-			'showEmptyPlaylistError': true
+			'showEmptyPlaylistError': true,
+			'playlistUrl': "",
+			'playlistUrlTarget': "_blank"
+
 		},
 
 
@@ -579,9 +582,9 @@
 					this.getMedialistComponent().prepend( '<div class="playlistSelector"></div>' );
 					$.each( this.playlistSet, function ( i, el ) {
 						if ( _this.getLayout() === "vertical" ) {
-							_this.getComponent().find( ".playlistSelector" ).append( '<br><div data-index="' + i + '" class="playlistItem"><span class="k-playlistTitle"> ' + el.name + '</span></div>' );
+							_this.getComponent().find( ".playlistSelector" ).append( '<br><div data-index="' + i + '" class="playlistItem"><span class="k-playlistTitle">' + _this.getPlaylistTitle( el.name )  + '</span></div>' );
 						} else {
-							_this.getComponent().find( ".playlistSelector" ).append( '<div data-index="' + i + '" class="playlistItem k-horizontal"><span class="k-playlistTitle"> ' + el.name + '</span></div>' );
+							_this.getComponent().find( ".playlistSelector" ).append( '<div data-index="' + i + '" class="playlistItem k-horizontal"><span class="k-playlistTitle">' + _this.getPlaylistTitle( el.name ) + '</span></div>' );
 						}
 					} );
 					this.getComponent().find( ".playlistItem" ).on( "click", function () {
@@ -680,11 +683,11 @@
 			// First playlist will always have items in it, other playlists will populate the items array after selection.
 			var numOfClips = this.playlistSet[playlistIndex].items.length;
 			if ( this.getLayout() === "vertical" ) {
-				this.getMedialistHeaderComponent().prepend( '<span class="playlistTitle">' + this.playlistSet[playlistIndex].name + '</span><span class="playlistDescription">' + numOfClips + ' ' + gM( 'mwe-embedplayer-videos' ) + '</span>' );
+				this.getMedialistHeaderComponent().prepend( '<span class="playlistTitle">' + this.getPlaylistTitle( this.playlistSet[playlistIndex].name )+ '</span><span class="playlistDescription">' + numOfClips + ' ' + gM( 'mwe-embedplayer-videos' ) + '</span>' );
 				this.getMedialistHeaderComponent().prepend( '<div class="dropDownIcon" title="' + gM( 'mwe-embedplayer-select_playlist' ) + '"></div>' );
 				this.getMedialistHeaderComponent().height(this.getConfig('verticalHeaderHeight'));
 			} else {
-				this.getMedialistHeaderComponent().prepend( '<div class="horizontalHeaderLables"><span class="playlistTitle horizontalHeader">' + this.playlistSet[playlistIndex].name + '</span><span class="playlistDescription horizontalHeader">(' + numOfClips + ' ' + gM( 'mwe-embedplayer-videos' ) + ')</span></div>' );
+				this.getMedialistHeaderComponent().prepend( '<div class="horizontalHeaderLables"><span class="playlistTitle horizontalHeader">' +  this.getPlaylistTitle(this.playlistSet[playlistIndex].name) + '</span><span class="playlistDescription horizontalHeader">(' + numOfClips + ' ' + gM( 'mwe-embedplayer-videos' ) + ')</span></div>' );
 				this.getMedialistHeaderComponent().prepend( '<div class="dropDownIcon" title="' + gM( 'mwe-embedplayer-select_playlist' ) + '"></div>' );
 				this.getMedialistHeaderComponent().height(this.getConfig('horizontalHeaderHeight'));
 			}
@@ -768,7 +771,15 @@
 		onEnable: function(){
 			this.getMedialistHeaderComponent().find(".playlistBtn").removeClass("disabled");
 			this._super();
+		},
+		getPlaylistTitle(string){
+			var url = this.getConfig("playlistUrl");
+			if(url){
+				return "<a href='"+url+"' target='"+this.getConfig("playlistUrlTarget")+"'>" + string + "</a>";
+			}
+			return string;
 		}
+
 	})
 	);
-})(window.mw, window.jQuery);
+})(window.mw, window.jQuery);
diff --git a/modules/KalturaSupport/tests/PlaylistFeatures.qunit.html b/modules/KalturaSupport/tests/PlaylistFeatures.qunit.html
@@ -59,6 +59,7 @@ <h2>Playlist Features</h2>
 				'loop': false,
 				'onPage': false,
 				'layout': 'vertical',
+				'playlistUrl': 'https://www.google.com/search?q={playlistAPI.kpl0Id}&ie=utf-8&oe=utf-8&aq=t',
 				'containerPosition': 'left',
 				'hideClipPoster': true,
 				'onPageCss1' : "../components/playlist/playList.css",