From a32195a5a1a39ae5249919e59284c80d247f04b8 Mon Sep 17 00:00:00 2001 From: Guy Livni Date: Wed, 25 Jan 2017 13:33:45 +0200 Subject: [PATCH] Fec 6351 cvaa (#3227) * initial changes * update screens * update plugin * template update * update template and previews logic * adjust for mobile and add on/off btn * update cvaa * fix safari font issues * remove unneeded preset default fields and update test pages * Add paging to small screens. Need new icons and also fine tune positioning of arrows * add arrow icon, carousel styles * update layout css --- .../components/cvaa/CvaaDemo.html | 52 +- .../components/cvaa/CvaaDemoSmall.html | 98 ++ .../KalturaSupport/components/cvaa/cvaa.css | 611 +++++++++-- .../KalturaSupport/components/cvaa/cvaa.js | 972 ++++++++++-------- .../components/cvaa/cvaa.tmpl.html | 185 ++-- .../components/cvaa/fonts/icvaa.eot | Bin 0 -> 2328 bytes .../components/cvaa/fonts/icvaa.svg | 17 + .../components/cvaa/fonts/icvaa.ttf | Bin 0 -> 2164 bytes .../components/cvaa/fonts/icvaa.woff | Bin 0 -> 2240 bytes .../components/cvaa/fonts/icvaa.woff2 | Bin 0 -> 1160 bytes .../resources/mw.ClosedCaptions.js | 12 +- skins/kdark/css/layout.css | 21 +- 12 files changed, 1314 insertions(+), 654 deletions(-) create mode 100644 modules/KalturaSupport/components/cvaa/CvaaDemoSmall.html create mode 100755 modules/KalturaSupport/components/cvaa/fonts/icvaa.eot create mode 100755 modules/KalturaSupport/components/cvaa/fonts/icvaa.svg create mode 100755 modules/KalturaSupport/components/cvaa/fonts/icvaa.ttf create mode 100755 modules/KalturaSupport/components/cvaa/fonts/icvaa.woff create mode 100755 modules/KalturaSupport/components/cvaa/fonts/icvaa.woff2 diff --git a/modules/KalturaSupport/components/cvaa/CvaaDemo.html b/modules/KalturaSupport/components/cvaa/CvaaDemo.html index cc24185995..6f7209cb1f 100644 --- a/modules/KalturaSupport/components/cvaa/CvaaDemo.html +++ b/modules/KalturaSupport/components/cvaa/CvaaDemo.html @@ -10,7 +10,7 @@

Captions styles menu

-
+


Caption Styles Api 

@@ -29,22 +29,22 @@ 
It is possible to update styles via API call, using the following object for
      );
  });
 
-
Additionally you can set up the default styles settings, using "cvaaDefaultSettings" flashvar:

-        'flashvars': {
-            'cvaa':{
-                'cvaaDefaultSettings': {
-                     'fontFamily': "Arial, Roboto, Arial Unicode Ms, Helvetica, Verdana, PT Sans Caption, sans-serif",
-                     'fontColor': "#ffffff",
-                     'fontOpacity': 100,
-                     'fontSize': 12,
-                     'backgroundColor': "#000000",
-                     'backgroundOpacity': 75,
-                     'windowColor': "#ffffff",
-                     'windowOpacity': 0,
-                     'edgeStyle': "none"
-                 }
+
Additionally you can set up the default styles settings, using "cvaaDefault" flashvar:

+    'flashvars': {
+        'cvaa':{
+            'cvaaDefault': {
+                 'fontFamily': "Arial, Roboto, Arial Unicode Ms, Helvetica, Verdana, PT Sans Caption, sans-serif",
+                 'fontColor': "#ffffff",
+                 'fontOpacity': 100,
+                 'fontSize': 12,
+                 'backgroundColor': "#000000",
+                 'backgroundOpacity': 75,
+                 'windowColor': "#ffffff",
+                 'windowOpacity': 0,
+                 'edgeStyle': "none"
              }
          }
+     }
 
 NOTE:The caption menu style settings are saved using cookies per page, you can disable cookies,
 However upon page refresh the settings will not be saved and the default will be used.
@@ -64,13 +64,33 @@ 
Additionally you can set up the default styles settings, using "cvaaDefaultS
 		'uiconf_id': '20540612',
 		'entry_id': '0_uka1msg4',
 		'flashvars': {
+		    'EmbedPlayer.EnableMobileSkin': true,
 			'disableTrackElement': true,
 			'closedCaptions': {
-				'enableOptionsMenu': true
+				'enableOptionsMenu': true,
+				"hideClosedCaptions": false
 			},
 			'cvaa':{
 				'useCookie': true
 			}
+//            'smartContainer': {
+//                'plugin': true,
+//                'tooltip': 'Global Settings',
+//                'config':{
+//                    'plugins':[
+//                        {
+//                            'pluginName':'closedCaptions',
+//                            'properties':[
+//                                {
+//                                    'property':'captions',
+//                                    'label': 'Language:',
+//                                    'type': 'enum'
+//                                }
+//                            ]
+//                        }
+//                    ]
+//                }
+//            }
 		}
 	});
 
diff --git a/modules/KalturaSupport/components/cvaa/CvaaDemoSmall.html b/modules/KalturaSupport/components/cvaa/CvaaDemoSmall.html
new file mode 100644
index 0000000000..6e71d15330
--- /dev/null
+++ b/modules/KalturaSupport/components/cvaa/CvaaDemoSmall.html
@@ -0,0 +1,98 @@
+
+
+
+	
+	Cvaa Demo
+	
+	
+	
+	
+
+
+	
Captions styles menu

+	

+	


+	
 Caption Styles Api 

+
+
It is possible to update styles via API call, using the following object format:

+ kWidget.addReadyCallback( function( playerId ){
+    var kdp = document.getElementById( playerId );
+     kaltura_player.sendNotification("newCaptionsStyles",
+       {
+           "fontFamily": "Courier New, Courier, Nimbus Mono L, Cutive Mono, monospace",
+           "fontColor": "rgb(123, 33, 111, 0.8)",
+           "fontSize": "3em",
+           "backgroundColor": "rgba(1, 1, 1, 0.5)",
+           "windowColor": "rgba(255, 255, 0, 0.8)",
+           "charEdgeStyle": "rgb(34, 34, 34) 2px 2px 3px, rgb(34, 34, 34) 2px 2px 4px, rgb(34, 34, 34) 2px 2px 5px"
+       }
+     );
+ });
+
+
Additionally you can set up the default styles settings, using "cvaaDefault" flashvar:

+        'flashvars': {
+            'cvaa':{
+                'cvaaDefault': {
+                     'fontFamily': "Arial, Roboto, Arial Unicode Ms, Helvetica, Verdana, PT Sans Caption, sans-serif",
+                     'fontColor': "#ffffff",
+                     'fontOpacity': 100,
+                     'fontSize': 12,
+                     'backgroundColor': "#000000",
+                     'backgroundOpacity': 75,
+                     'windowColor': "#ffffff",
+                     'windowOpacity': 0,
+                     'edgeStyle': "none"
+                 }
+             }
+         }
+
+NOTE:The caption menu style settings are saved using cookies per page, you can disable cookies,
+However upon page refresh the settings will not be saved and the default will be used.
+To disable cookie for the plugin set the following flashvar to false:
+
+        'flashvars': {
+            'cvaa':{
+                'useCookie': false
+             }
+         }
+

+
+
+
+
diff --git a/modules/KalturaSupport/components/cvaa/cvaa.css b/modules/KalturaSupport/components/cvaa/cvaa.css
index a7bcce1ff2..77e5a757fd 100644
--- a/modules/KalturaSupport/components/cvaa/cvaa.css
+++ b/modules/KalturaSupport/components/cvaa/cvaa.css
@@ -1,173 +1,584 @@
-.screen .cvaaScreenPanel {
-	width: 100%;
+/*------------------SCREEN Template-------------------*/
+.videoHolder .screen.cvaa.semiTransparentBkg {
+	padding-top: 1em;
+}
+
+.videoHolder .cvaa .screen-content .icon-close {
+	right: 0.8em;
+}
+
+.cvaa .screen-content {
+	position: relative;
 	height: 100%;
-	display: table-cell;
-	vertical-align: middle;
 }
 
+.cvaa .screen-content .tmpl,
+.cvaa-btn-label span,
+.cvaa-btn, .cvaa-btn-text {
+	font-family: Helvetica Neue Regular, Lato-Regular, Lato;
+	font-size: 16px;
+	line-height: 30px;
+}
+
+/*------------------BUTTONS/DROPDOWNS-------------------*/
+.cvaa-btn {
+	position: relative;
+	display: inline-block;
+	width: 78px;
+	height: 34px;
+	border: 1px solid rgba(255, 255, 255, 0.5);
+	border-radius: 3px;
+	margin: 7px;
+}
+
+.cvaa-btn.small {
+	width: 58px;
+}
+
+.cvaa-btn-text {
+	color: #ffffff;
+	background: none;
+	border: none;
+	margin: 0;
+	padding: 0;
+	text-decoration: underline;
+}
+
+.cvaa-btn,
+.cvaa-btn-text {
+	cursor: pointer;
+}
+
+.cvaa-btn-label {
+	position: relative;
+	display: inline-block;
+	vertical-align: top;
+	text-align: center;
+}
+
+.cvaa-btn-label span {
+	display: block;
+	font-size: 12px;
+}
+
+.cvaa-dropdown {
+	width: 144px;
+	height: 34px;
+	background-color: rgba(255, 255, 255, 0);
+	border: 1px solid rgba(255, 255, 255, 0.5);
+	color: #fff;
+	border-radius: 3px;
+	float: right;
+	font-size: inherit;
+}
+
+/*------------------TEMPLATE LAYOUT-------------------*/
 .cvaa .screen-content .tmpl {
 	display: table;
 	width: 100%;
 	height: 100%;
 }
 
-#cvaaPreview #previewWindow{
-	padding: 10px;
-	display: inline-block;
+.cvaa-container {
+	width: 100%;
+	height: 100%;
+	display: table-cell;
+	vertical-align: middle;
+}
+
+.cvaa-row {
+	position: relative;
+	width: 300px;
+	height: 100%;
+	margin: 0 auto 12px;
+	display: block;
 }
 
-.screen .cvaaScreenPanel #cvaaPreview{
+.cvaa-row--center {
+	width: 100%;
 	text-align: center;
-	margin-bottom: 50px;
-	height: 50px;
 }
 
-.size-small .screen .cvaaScreenPanel #cvaaPreview{
-	margin-bottom: 20px;
+.cvaa-main, .cvaa-adv,
+.cvaa-cstm, .cvaa-size,
+.cvaa-bg, .cvaa-color,
+.cvaa-font, .icon-arrow {
+	display: none;
 }
 
-.cvaa #kFontFamily,
-.cvaa #kEdgeStyle{
-	width:100%;
+/*------------------HIDE/SHOW MENUS-------------------*/
+.cvaa--show {
+	display: block;
 }
 
-.fullscreen .screen .cvaaScreenPanel{
-	padding-top: 100px;
+/*------------------HEADER-------------------*/
+.cvaa-header {
+	position: absolute;
+	width: 100%;
+	text-align: center;
+	line-height: 17px;
+	font-size: 1.2em;
+	top: 0;
+	left: 0;
+	margin: 0;
 }
-.mobile.fullscreen .screen .cvaaScreenPanel{
-	padding-top: 20px;
+
+.cvaa .icon-arrow {
+	position: absolute;
+	top: -0.2em;
+	font-size: 1.6em;
+	left: 0.4em;
+	cursor: pointer;
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+	z-index: 100;
 }
-.screen .cvaaScreenPanel .column-1-2{
+
+.mobile .cvaa .icon-arrow {
+	position: absolute;
+	top: 0.1em;
+	font-size: 1.6em;
+	left: 0.8em;
+	cursor: pointer;
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+	z-index: 100;
+}
+
+.cvaa .icon-arrow:before {
+	content: "\e917";
+}
+
+/*------------------MAIN SCREEN-------------------*/
+
+.cvaa-main {
+	margin-top: 30px;
+}
+
+/*switch button start*/
+.cvaa-main__switch {
+	position: relative;
+	width: 58px;
+	float: right;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+}
+
+.cvaa-main__switch-checkbox {
+	opacity: 0;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+}
+
+.cvaa-main__switch-label {
+	display: block;
+	overflow: hidden;
+	cursor: pointer;
+	border-radius: 31px;
+}
+
+.cvaa-main__switch-label__inner {
+	display: block;
+	width: 200%;
+	margin-left: -100%;
+	transition: margin 0.3s ease-in 0s;
+}
+
+.cvaa-main__switch-label__inner:before,
+.cvaa-main__switch-label__inner:after {
+	display: block;
 	float: left;
 	width: 50%;
-	margin-top: -10px;
-	margin-left: -30px;
+	height: 26px;
+	padding: 0;
+	line-height: 26px;
+	font-size: 11px;
+	color: white;
+	box-sizing: border-box;
+}
+
+.cvaa-main__switch-label__inner:before {
+	content: "ON";
+	padding-left: 10px;
+	background-color: #01C2FF;
+	color: #FFFFFF;
+}
+
+.cvaa-main__switch-label__inner:after {
+	content: "OFF";
+	padding-right: 6px;
+	background-color: #EEEEEE;
+	color: #999999;
+	text-align: right;
 }
-.size-small .screen .cvaaScreenPanel .column-1-2{
+
+.cvaa-main__switch-label__btn {
+	display: block;
+	width: 16px;
+	margin: 3px;
+	background: #FFFFFF;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	right: 30px;
+	border: 2px solid;
+	border-radius: 31px;
+	transition: all 0.3s ease-in 0s;
+}
+
+.cvaa-main__switch-checkbox:checked + .cvaa-main__switch-label .cvaa-main__switch-label__inner {
 	margin-left: 0;
 }
-.screen .cvaaScreenPanel .column-1-4{
-	float: left;
-	width: 25%;
+
+.cvaa-main__switch-checkbox:checked + .cvaa-main__switch-label .cvaa-main__switch-label__btn {
+	right: 0;
 }
 
-.cvaa .ui-slider {
-	height: 0.3em;
-	cursor: pointer;
-	background-color: #ffffff;
-	margin: 5px;
+/*switch button end*/
+
+/*------------------ADVANCED SCREEN-------------------*/
+.cvaa-adv {
+	margin-top: 30px;
 }
 
-.cvaa .ui-slider-handle {
-	width: 15px;
-	height: 15px;
-	border-radius: 50%;
-	background-color: #ffffff;
+.cvaa-adv .custom {
+	display: none;
 }
 
-.cvaa .fontSizeContainer,
-.cvaa .fontOpacityContainer,
-.cvaa .backgroundOpacityContainer,
-.cvaa .windowOpacityContainer,
-.cvaa .fontFamilyContainer,
-.cvaa .fontEdgeStyleContainer{
-	margin-bottom: 25px;
+.cvaa-adv .cvaa-btn {
+	font-size: 14px;
+	padding: 2px;
 }
 
-.cvaa input[type="text"]{
-	width: 20px;
-	float: right;
-	color: #ffffff;
+.cvaa-adv .cvaa-btn:after{
+	top: -4px;
+	right: -4px;
+}
+
+.cvaa-btn.cvaa-adv__cstmoptions-btn {
+	margin: 0 auto;
+	display: block;
+}
+
+.cvaa-btn.cvaaDefault {
 	background: transparent;
-	border: none;
+	color: #ffffff;
 }
 
-.cvaa ul{
-	list-style: none;
+.cvaa-btn.cvaaPreset1 {
+	background: #ffffff;
+	color: #000000;
+	border-color: #ffffff;
 }
 
-.cvaa ul > div{
-	margin-bottom: 5px;
+.cvaa-btn.cvaaPreset2 {
+	background: #000000;
+	color: #ffff00;
+	border-color: #000000;
 }
 
-.cvaa li{
-	float: left;
-	margin: 0 5px 5px 0;
+/*------------------CUSTOM CAPTIONS SCREEN-------------------*/
+.cvaa-cstm .cvaa-cstm__bg-label {
+	position: absolute;
 }
 
-.cvaa li span{
-	background-color: #000;
-	font-size: 1em;
-	font-weight: bold;
-	text-align: center;
-	height: 30px;
-	width: 30px;
-	line-height: 30px;
-	display: block;
-	cursor: pointer;
-	border: 1px solid #fff;
+.cvaa-cstm__bg-btn, .cvaa-cstm__size-btn,
+.cvaa-cstm__font-btn, .cvaa-cstm__color-btn {
+	font-size: 1.3em;
 }
-.size-small .cvaa li span{
-	height: 12px;
-	width: 12px;
+
+.cvaa-cstm .cvaa-btn.small {
+	background-color: transparent;
 }
 
-.size-medium .cvaa li span{
-	height: 17px;
-	width: 17px;
+.cvaa-cstm__size-btn, .cvaa-cstm__font-btn,
+.cvaa-cstm__bg-btn {
+	color: #ffffff;
 }
 
-.cvaa #cvaaButtons{
-	float: right;
-	margin-top: 60px;
-	margin-right: 25px;
+.cvaa-cstm__color-btn {
+	color: #01C2FF
 }
-.size-small .cvaa #cvaaButtons{
-	margin-top: 0;
-	margin-right: 0;
+
+.cvaa-cstm .cvaa-btn.small.cvaa-cstm__bg-btn {
+	background-color: #01C2FF;
 }
-.size-medium .cvaa #cvaaButtons{
-	margin-top: 30px;
-	margin-right: 0;
+
+/*------------------SIZE SCREEN-------------------*/
+.cvaa-size .cvaa-btn.small {
+	background-color: transparent;
 }
-.fullscreen .cvaa #cvaaButtons{
-	margin-top: 150px;
+
+.cvaa-size__small-btn {
+	font-size: 0.7em;
 }
-.mobile.fullscreen .cvaa #cvaaButtons{
-	margin-top: 15px;
+
+.cvaa-size__medium-btn {
+	font-size: 0.9em;
 }
 
-.cvaa .colorContainer{
-	margin: 10px auto;
-	display: table;
+.cvaa-size__large-btn {
+	font-size: 1.1em;
+}
+
+.cvaa-size__exlarge-btn {
+	font-size: 1.3em;
+}
+
+.cvaa-size .cvaa-btn {
+	line-height: 0;
+	color: #ffffff;
+}
+
+/*------------------BACKGROUND/COLOR SCREEN-------------------*/
+.cvaa-bg .cvaa-dropdown,
+.cvaa-color .cvaa-dropdown {
+	margin: 0 auto;
+	float: none;
+}
+
+.cvaa-color .cvaa-btn:before {
+	font-size: 1.5em;
+}
+
+.cvaa-color .cvaa-btn:after,
+.cvaa-bg .cvaa-btn:after {
+	top: -4px;
+	right: -4px;
+}
+
+.cvaa-color .cvaa-btn.small,
+.cvaa-bg .cvaa-btn.small {
+	width: 48px;
+}
+/*------------------FOOTER-------------------*/
+
+.cvaa-footer {
+	display: none;
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 5px;
+	text-align: center;
+}
+
+.cvaa-footer__preview {
+
+}
+
+/*------------------BTN COLORS-------------------*/
+
+/* Handle small screens paging */
+@media (max-height: 220px) {
+	.cvaa-bg .cvaa-row.cvaa-row--center .Black,
+	.cvaa-bg .cvaa-row.cvaa-row--center .Magenta,
+	.cvaa-bg .cvaa-row.cvaa-row--center .Blue,
+	.cvaa-bg .cvaa-row.cvaa-row--center .Red,
+	.cvaa-color .cvaa-row.cvaa-row--center .Black,
+	.cvaa-color .cvaa-row.cvaa-row--center .Magenta,
+	.cvaa-color .cvaa-row.cvaa-row--center .Blue,
+	.cvaa-color .cvaa-row.cvaa-row--center .Red {
+		display: none;
+	}
+	.cvaa-bg .cvaa-row.cvaa-row--center .White,
+	.cvaa-bg .cvaa-row.cvaa-row--center .Yellow,
+	.cvaa-bg .cvaa-row.cvaa-row--center .Green,
+	.cvaa-bg .cvaa-row.cvaa-row--center .Cyan,
+	.cvaa-color .cvaa-row.cvaa-row--center .White,
+	.cvaa-color .cvaa-row.cvaa-row--center .Yellow,
+	.cvaa-color .cvaa-row.cvaa-row--center .Green,
+	.cvaa-color .cvaa-row.cvaa-row--center .Cyan {
+		display: inline-block;
+	}
+
+	.cvaa-bg.cvaa-alternate-page-view .cvaa-row.cvaa-row--center .Black,
+	.cvaa-bg.cvaa-alternate-page-view .cvaa-row.cvaa-row--center .Magenta,
+	.cvaa-bg.cvaa-alternate-page-view .cvaa-row.cvaa-row--center .Blue,
+	.cvaa-bg.cvaa-alternate-page-view .cvaa-row.cvaa-row--center .Red,
+	.cvaa-color.cvaa-alternate-page-view .cvaa-row.cvaa-row--center .Black,
+	.cvaa-color.cvaa-alternate-page-view .cvaa-row.cvaa-row--center .Magenta,
+	.cvaa-color.cvaa-alternate-page-view .cvaa-row.cvaa-row--center .Blue,
+	.cvaa-color.cvaa-alternate-page-view .cvaa-row.cvaa-row--center .Red {
+		display: inline-block;
+	}
+
+	.cvaa-bg.cvaa-alternate-page-view .cvaa-row.cvaa-row--center .White,
+	.cvaa-bg.cvaa-alternate-page-view .cvaa-row.cvaa-row--center .Yellow,
+	.cvaa-bg.cvaa-alternate-page-view .cvaa-row.cvaa-row--center .Green,
+	.cvaa-bg.cvaa-alternate-page-view .cvaa-row.cvaa-row--center .Cyan,
+	.cvaa-color.cvaa-alternate-page-view .cvaa-row.cvaa-row--center .White,
+	.cvaa-color.cvaa-alternate-page-view .cvaa-row.cvaa-row--center .Yellow,
+	.cvaa-color.cvaa-alternate-page-view .cvaa-row.cvaa-row--center .Green,
+	.cvaa-color.cvaa-alternate-page-view .cvaa-row.cvaa-row--center .Cyan {
+		display: none;
+	}
+
+	.cvaa-row .cvaa-arrow {
+		display: block;
+	}
+
+	.cvaa-btn {
+		margin: 0 7px 7px;
+	}
+
+	.cvaa-adv .icvaa-check:after,
+	.cvaa-size .icvaa-check:after {
+		top: -4px;
+	}
+}
+.cvaa-arrow {
+	display: none;
+	position: absolute;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	cursor: pointer;
+	top: 10%;
+	font-size: 20px;
 }
 
-.cvaa .colorContainer span.White{
+.cvaa-color .cvaa-btn,
+.cvaa-bg .cvaa-btn {
+	border: solid 1px #ffffff;
+	padding: 4px;
+	border-radius: 4px;
+	background-clip: content-box;
+	vertical-align: top;
+}
+
+.cvaa-color .cvaa-btn.White {
+	background-color: transparent;
+	color: #ffffff;
+}
+
+.cvaa-btn.White {
 	background-color: #ffffff;
 }
-.cvaa .colorContainer span.Yellow{
+
+.cvaa-color .cvaa-btn.Yellow {
+	background-color: transparent;
+	color: #ffff00;
+}
+
+.cvaa-btn.Yellow {
 	background-color: #ffff00;
 }
-.cvaa .colorContainer span.Green{
+
+.cvaa-color .cvaa-btn.Green {
+	background-color: transparent;
+	color: #00ff00;
+}
+
+.cvaa-btn.Green {
 	background-color: #00ff00;
 }
-.cvaa .colorContainer span.Cyan{
+
+.cvaa-color .cvaa-btn.Cyan {
+	background-color: transparent;
+	color: #00ffff;
+}
+
+.cvaa-btn.Cyan {
 	background-color: #00ffff;
 }
-.cvaa .colorContainer span.Blue{
+
+.cvaa-color .cvaa-btn.Blue {
+	background-color: transparent;
+	color: #0000ff;
+}
+
+.cvaa-btn.Blue {
 	background-color: #0000ff;
 }
-.cvaa .colorContainer span.Magenta{
+
+.cvaa-color .cvaa-btn.Magenta {
+	background-color: transparent;
+	color: #ff00ff;
+}
+
+.cvaa-btn.Magenta {
 	background-color: #ff00ff;
 }
-.cvaa .colorContainer span.Red{
+
+.cvaa-color .cvaa-btn.Red {
+	background-color: transparent;
+	color: #ff0000;
+}
+
+.cvaa-btn.Red {
 	background-color: #ff0000;
 }
-.cvaa .colorContainer span.Black{
+
+.cvaa-color .cvaa-btn.Black {
+	background-color: transparent;
+	color: #000000;
+}
+
+.cvaa-btn.Black {
 	background-color: #000000;
 }
 
-.cvaa .active span{
-	outline: 3px solid #3EAFE6;
-	outline-offset: 1px;
+/*------------------Fonts-------------------*/
+@font-face {
+	font-family: 'icvaa';
+	src: url('fonts/icvaa.eot?edpuz4');
+	src: url('fonts/icvaa.eot?#iefixedpuz4') format('embedded-opentype'),
+	url('fonts/icvaa.woff?edpuz4') format('woff'),
+	url('fonts/icvaa.ttf?edpuz4') format('truetype'),
+	url('fonts/icvaa.svg?edpuz4#icvaa') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+[class^="icvaa-"], [class*=" icvaa-"] {
+	font-family: 'icvaa';
+	speak: none;
+	font-style: normal;
+	font-weight: normal;
+	font-variant: normal;
+	text-transform: none;
+	line-height: 1;
+}
+
+.icvaa-check:after {
+	content: "\e900";
+	display: block;
+	font-size: 0.7em;
+	line-height: 18px;
+	color: #FFFFFF;
+	width: 16px;
+	height: 16px;
+	background-color: #01c2ff;
+	position: absolute;
+	top: 2px;
+	right: 2px;
+	border-radius: 50%;
+}
+
+.icvaa-font-color:before {
+	content: "\e901";
+}
+
+.icvaa-font-family:before {
+	content: "\e902";
+}
+
+.icvaa-font-size:before {
+	content: "\e903";
+}
+
+.icvaa-letter-size:before {
+	content: "\e904";
+}
+
+.icvaa-right-arrow:before {
+	content: "\e905";
+}
+
+.icvaa-right-arrow {
+	right: 0;
+}
+
+.icvaa-left-arrow:before {
+	content: "\e906";
 }
\ No newline at end of file
diff --git a/modules/KalturaSupport/components/cvaa/cvaa.js b/modules/KalturaSupport/components/cvaa/cvaa.js
index 0925154c28..23bf14eca4 100644
--- a/modules/KalturaSupport/components/cvaa/cvaa.js
+++ b/modules/KalturaSupport/components/cvaa/cvaa.js
@@ -1,454 +1,518 @@
-( function( mw, $ ) {"use strict";
-
-	mw.closedCaptions = mw.closedCaptions || {};
-
-	mw.closedCaptions.cvaa = mw.KBaseScreen.extend({
-
-		defaultConfig: {
-			templatePath: 'components/cvaa/cvaa.tmpl.html',
-			usePreviewPlayer: false,
-			previewPlayerEnabled: false,
-			useCookie: true,
-			cvaaDefaultSettings: {
-				fontFamily: "Arial, Roboto, Arial Unicode Ms, Helvetica, Verdana, PT Sans Caption, sans-serif",
-				fontColor: "#ffffff",
-				fontOpacity: 100,
-				fontSize: 12,
-				backgroundColor: "#000000",
-				backgroundOpacity: 75,
-				windowColor: "#ffffff",
-				windowOpacity: 0,
-				edgeStyle: "none"
-			},
-			cvaaOptions:{
-				"sliders": {
-					"fontSize": {
-						"min": 6,
-						"max": 24,
-						"default": "fontSize",
-						"selector": "kFontSize"
-					},
-					"fontOpacity": {
-						"min": 0,
-						"max": 100,
-						"default": "fontOpacity",
-						"selector": "kFontOpacity"
-					},
-					"backgroundOpacity": {
-						"min": 0,
-						"max": 100,
-						"default": "backgroundOpacity",
-						"selector": "kBackgroundOpacity"
-					},
-					"windowOpacity": {
-						"min": 0,
-						"max": 100,
-						"default": "windowOpacity",
-						"selector": "kWindowOpacity"
-					}
-				},
-				"edgeStyle":[
-						{"prop": 1, "text":"None", 			"value":	"none"},
-						{"prop": 2, "text":"Drop shadow",	"value":	"rgb(34, 34, 34) 2px 2px 3px, rgb(34, 34, 34) 2px 2px 4px, rgb(34, 34, 34) 2px 2px 5px"},
-						{"prop": 3, "text":"Raised", 		"value":	"rgb(34, 34, 34) 1px 1px, rgb(34, 34, 34) 2px 2px, rgb(34, 34, 34) 3px 3px"},
-						{"prop": 4, "text":"Depressed", 	"value":	"rgb(204, 204, 204) 1px 1px, rgb(204, 204, 204) 0px 1px, rgb(34, 34, 34) -1px -1px, rgb(34, 34, 34) 0px -1px"},
-						{"prop": 5, "text":"Outlined",		"value":	"rgb(34, 34, 34) 0px 0px 4px, rgb(34, 34, 34) 0px 0px 4px, rgb(34, 34, 34) 0px 0px 4px, rgb(34, 34, 34) 0px 0px 4px"}
-				],
-				"color":[
-						{"prop": 1, "text":"White", 	"value":	"#ffffff"},
-						{"prop": 2, "text":"Yellow",	"value":	"#ffff00"},
-						{"prop": 3, "text":"Green",		"value":	"#00ff00"},
-						{"prop": 4, "text":"Cyan",		"value":	"#00ffff"},
-						{"prop": 5, "text":"Blue",		"value":	"#0000ff"},
-						{"prop": 6, "text":"Magenta",	"value":	"#ff00ff"},
-						{"prop": 7, "text":"Red",		"value":	"#ff0000"},
-						{"prop": 8, "text":"Black",		"value":	"#000000"}
-				],
-				"family":[
-					{"prop": 1, "text":"Monospaced Serif",			"value":	"Courier New, Courier, Nimbus Mono L, Cutive Mono, monospace"},
-					{"prop": 2, "text":"Proportional Serif",		"value":	"Times New Roman, Times, Georgia, Cambria, PT Serif Caption, serif"},
-					{"prop": 3, "text":"Monospaced Sans-Serif", 	"value":	"Lucida Console, Deja Vu Sans Mono, Monaco, Consolas, PT Mono, monospace"},
-					{"prop": 4, "text":"Proportional Sans-Serif",	"value":	"Arial, Roboto, Arial Unicode Ms, Helvetica, Verdana, PT Sans Caption, sans-serif"},
-					{"prop": 5, "text":"Casual", 					"value":	"Comic Sans MS, Impact, Handlee, fantasy"},
-					{"prop": 6, "text":"Cursive", 					"value":	"Monotype Corsiva, URW Chancery L, Apple Chancery, Dancing Script, cursive"},
-					{"prop": 7, "text":"Small Capitals",			"value":	"Verdana ,Arial Unicode Ms, Arial, Helvetica, Marcellus SC, sans-serif"}
-				]
-			}
-		},
-		locale:{
-			"fontSizelabel": gM('mwe-cvaa-fontSize'),
-			"fontOplabel": gM('mwe-cvaa-fontOpacity'),
-			"backgroundOpLabel": gM('mwe-cvaa-backgroundOpacity'),
-			"windowOplabel": gM('mwe-cvaa-windowOpacity'),
-			"fontColorlabel": gM('mwe-cvaa-fontColor' ),
-			"backgroundColorlabel": gM('mwe-cvaa-backgroundColor'),
-			"windowColorlabel": gM('mwe-cvaa-windowColor'),
-			"fontFamilylabel": gM('mwe-cvaa-fontFamily'),
-			"edgeStylelabel": gM('mwe-cvaa-edgeStyle'),
-			"optionsBtnLabel": gM( 'mwe-cvaa-options' ),
-			"captionsPreviewText": gM( 'mwe-cvaa-previewText' )
-		},
-		cvaaSettingsObj: null,
-		cvaaSavedSettings:null,
-		cvaaSentSettings:null,
-		currentFontFamily:null,
-		currentFontColor:null,
-		currentFontOpacity:null,
-		currentFontSize:null,
-		currentBackgroundColor:null,
-		currentBackgroundOpacity:null,
-		currentWindowColor:null,
-		currentWindowOpacity:null,
-		currentEdgeStyle:null,
-		firstInit: true,
-		handlersAreSet: false,
-
-		setup: function () {
-			this.cvaaSettingsObj = this.getConfig("cvaaOptions");
-			this.addBindings();
-		},
-		addScreenBindings: function(){
-			var _this = this;
-			$(".cvaa .icon-close").on("mousedown", function(e){
-				_this.resetSettingsToLast();
-			});
-		},
-		addBindings: function () {
-			var _this = this;
-			var embedPlayer = this.getPlayer();
-
-			this.bind('playerReady', function () {
-				_this.getCurrentSettings();
-				_this.initPreviewUpdate();
-			});
-
-			this.bind('openCvaaOptions', function () {
-				_this.getScreen().then(function(screen){
-					_this.toggleScreen();
-				});
-			});
-
-			this.bind('onChangeMedia', function () {
-				_this.handlersAreSet = false;
-			});
-
-			this.bind('preShowScreen', function (event, screenName) {
-
-				_this.initPreviewUpdate();
-				if(!_this.handlersAreSet) {
-					_this.setUpHandlers();
-				}
-
-				if ( screenName === "cvaa" ){
-					_this.getScreen().then(function(screen){
-						screen.addClass('semiTransparentBkg');
-						// prevent keyboard key actions to allow typing in share screen fields
-						embedPlayer.triggerHelper( 'onDisableKeyboardBinding' );
-						embedPlayer.triggerHelper("cvaaScreenOpen");
-						embedPlayer.disablePlayControls(["cvaa"]);
-					});
-				}
-			});
-
-			this.bind('showScreen', function (event, screenName) {
-				if ( screenName === "cvaa" ){
-					_this.getScreen().then(function(screen){
-						$(embedPlayer.getPlayerElement()).addClass("blur");
-						embedPlayer.getPlayerPoster().addClass("blur");
-					});
-				}
-			});
-
-			this.bind('preHideScreen', function (event, screenName) {
-				if ( screenName === "cvaa" ){
-					if (_this.getPlayer().getPlayerElement()) {
-						$( "#" + _this.getPlayer().getPlayerElement().id ).removeClass( "blur" );
-						_this.getPlayer().getPlayerPoster().removeClass( "blur" );
-					}
-					// restore keyboard actions
-					embedPlayer.triggerHelper( 'onEnableKeyboardBinding' );
-					// re-enable player controls
-					if ( !embedPlayer.isInSequence() ){
-						embedPlayer.enablePlayControls();
-					}
-				}
-			});
-
-		},
-		updateSettingsAndPreview: function(option, value){
-			var selectedItem;
-			switch (option) {
-				case "kFontFamily":
-					selectedItem = this.getValueByProp("family", value);
-					this.updatePreview("text", "font-family", selectedItem);
-					this.cvaaSentSettings.fontFamily = selectedItem;
-					this.cvaaSavedSettings.fontFamily = selectedItem;
-					break;
-				case "kFontColor":
-					this.currentFontColor = this.getValueByProp("color", value);
-					selectedItem = this.rgb2rgba(this.hex2rgb(this.currentFontColor), this.currentFontOpacity);
-					this.updatePreview("text", "color", selectedItem);
-					this.cvaaSentSettings.fontColor = selectedItem;
-					this.cvaaSavedSettings.fontColor = this.currentFontColor;
-					break;
-				case "kFontOpacity":
-					this.currentFontOpacity = value;
-					selectedItem = this.rgb2rgba(this.hex2rgb(this.currentFontColor), this.currentFontOpacity);
-					this.updatePreview("text", "color", selectedItem);
-					this.cvaaSentSettings.fontColor = selectedItem;
-					this.cvaaSavedSettings.fontOpacity = this.currentFontOpacity;
-					break;
-				case "kFontSize":
-					this.currentFontSize = value;
-					this.updatePreview("text", "font-size", this.getFontSize(this.currentFontSize));
-					this.cvaaSentSettings.fontSize = this.getFontSize(this.currentFontSize);
-					this.cvaaSavedSettings.fontSize = this.currentFontSize;
-					break;
-				case "kBackgroundColor":
-					this.currentBackgroundColor = this.getValueByProp("color", value);
-					selectedItem = this.rgb2rgba(this.hex2rgb(this.currentBackgroundColor), this.currentBackgroundOpacity);
-					this.updatePreview("text", "background-color", selectedItem);
-					this.cvaaSentSettings.backgroundColor = selectedItem;
-					this.cvaaSavedSettings.backgroundColor = this.currentBackgroundColor;
-					break;
-				case "kBackgroundOpacity":
-					this.currentBackgroundOpacity = value;
-					selectedItem = this.rgb2rgba(this.hex2rgb(this.currentBackgroundColor), this.currentBackgroundOpacity);
-					this.updatePreview("text", "background-color", selectedItem);
-					this.cvaaSentSettings.backgroundColor = selectedItem;
-					this.cvaaSavedSettings.backgroundOpacity = this.currentBackgroundOpacity;
-					break;
-				case "kWindowColor":
-					this.currentWindowColor = this.getValueByProp("color", value);
-					selectedItem = this.rgb2rgba(this.hex2rgb(this.currentWindowColor), this.currentWindowOpacity);
-					this.updatePreview("window", "background-color", selectedItem);
-					this.cvaaSentSettings.windowColor = selectedItem;
-					this.cvaaSavedSettings.windowColor = this.currentWindowColor;
-					break;
-				case "kWindowOpacity":
-					this.currentWindowOpacity = value;
-					selectedItem = this.rgb2rgba(this.hex2rgb(this.currentWindowColor), this.currentWindowOpacity);
-					this.updatePreview("window", "background-color", selectedItem);
-					this.cvaaSentSettings.windowColor = selectedItem;
-					this.cvaaSavedSettings.windowOpacity = this.currentWindowOpacity;
-					break;
-				case "kEdgeStyle":
-					selectedItem = this.getValueByProp("edgeStyle", value);
-					this.updatePreview("text", "text-shadow", selectedItem);
-					this.cvaaSentSettings.edgeStyle = selectedItem;
-					this.cvaaSavedSettings.edgeStyle = selectedItem;
-					break;
-			}
-		},
-		getValueByProp: function(option, propValue){
-			var cvaaOptions = this.cvaaSettingsObj[option];
-
-			for(var i=0; i 24 ) ? emFontMap[24] + 'em' : emFontMap[6];
-		},
-		saveCvaaSettings: function(){
-			this.getPlayer().setCookie( 'cvaaSavedSettings' ,JSON.stringify(this.cvaaSavedSettings) , {
-				expires : 356,
-				path : '/',
-				domain : ''
-			});
-
-			this.getPlayer().triggerHelper("newCaptionsStyles", this.cvaaSentSettings);
-			this.hideScreen();
-		},
-		resetCvaaSettings: function(){
-			this.getPlayer().setCookie( 'cvaaSavedSettings' ,null , {
-				expires : -1,
-				path : '/',
-				domain : ''
-			});
-
-			this.resetSettingsToLast();
-			this.getPlayer().triggerHelper("newCaptionsStyles", this.cvaaSentSettings);
-		},
-		resetSettingsToLast: function(){
-			this.firstInit = true;
-			this.getCurrentSettings();
-			this.initPreviewUpdate();
-			this.resetSliders();
-		},
-		resetSliders: function(){
-			//reset sliders and sliders labels
-			$("#kFontOpacity").slider("option","value",this.currentFontOpacity);
-			$("#kFontOpacityVal").val(this.currentFontOpacity);
-
-			$("#kBackgroundOpacity").slider("option","value",this.currentBackgroundOpacity);
-			$("#kBackgroundOpacityVal").val(this.currentBackgroundOpacity);
-
-			$("#kWindowOpacity").slider("option","value",this.currentWindowOpacity);
-			$("#kWindowOpacityVal").val(this.currentWindowOpacity);
-
-			$("#kFontSize").slider("option","value",this.currentFontSize);
-			$("#kFontSizeVal").val(this.currentFontSize);
-		},
-		addOptionsBtn: function(){
-			return {
-				"optionsLabel": this.locale.optionsBtnLabel,
-				"optionsEvent": "openCvaaOptions"
-			}
-		},
-		getTemplateData: function () {
-			return {
-				'cvaa': this,
-				'cvaaOptions': this.cvaaSettingsObj
-			};
-		},
-		isSafeEnviornment: function() {
-			return !mw.isIphone() && !mw.isIE8();
-		}
-	});
-
-} )( window.mw, window.jQuery );
\ No newline at end of file
+(function (mw, $) {
+    "use strict";
+
+    mw.closedCaptions = mw.closedCaptions || {};
+
+    mw.closedCaptions.cvaa = mw.KBaseScreen.extend({
+
+        defaultConfig: {
+            templatePath: 'components/cvaa/cvaa.tmpl.html',
+            usePreviewPlayer: false,
+            previewPlayerEnabled: false,
+            useCookie: true,
+            cvaaDefault: {
+                fontFamily: "Arial, Roboto, Arial Unicode Ms, Helvetica, Verdana, PT Sans Caption, sans-serif",
+                fontColor: "rgba(255,255,255,1)",
+                fontHexColor: "#ffffff",
+                fontOpacity: 100,
+                fontSize: "1em",
+                fontPxSize: 12,
+                backgroundColor: "rgba(0,0,0,0)",
+                backgroundHexColor: "#000000",
+                backgroundOpacity: 0,
+                edgeStyle: "none"
+            },
+            cvaaPreset1: {
+                fontFamily: "Arial, Roboto, Arial Unicode Ms, Helvetica, Verdana, PT Sans Caption, sans-serif",
+                fontColor: "rgba(0,0,0,1)",
+                fontHexColor: "#000000",
+                fontOpacity: 100,
+                fontSize: "1em",
+                fontPxSize: 12,
+                backgroundColor: "rgba(255,255,255,1)",
+                backgroundHexColor: "#ffffff",
+                backgroundOpacity: 100,
+                edgeStyle: "none"
+            },
+            cvaaPreset2: {
+                fontFamily: "Arial, Roboto, Arial Unicode Ms, Helvetica, Verdana, PT Sans Caption, sans-serif",
+                fontColor: "rgba(255,255,0,1)",
+                fontHexColor: "#ffff00",
+                fontOpacity: 100,
+                fontSize: "1em",
+                fontPxSize: 12,
+                backgroundColor: "rgba(0,0,0,1)",
+                backgroundHexColor: "#000000",
+                backgroundOpacity: 100,
+                edgeStyle: "none"
+            },
+            cvaaOptions: {
+                "size":[
+                    { "prop": 1, "value": "12", "text": "Small",       "btnClass": "cvaa-size__small-btn" },
+                    { "prop": 2, "value": "16", "text": "Medium",      "btnClass": "cvaa-size__medium-btn" },
+                    { "prop": 3, "value": "20", "text": "Large",       "btnClass": "cvaa-size__large-btn" },
+                    { "prop": 4, "value": "25", "text": "Extra Large", "btnClass": "cvaa-size__exlarge-btn" }
+                ],
+                "edgeStyle":[
+                    { "prop": 1, "text":"None",          "value": "none" },
+                    { "prop": 2, "text":"Drop shadow",   "value": "rgb(34, 34, 34) 2px 2px 3px, rgb(34, 34, 34) 2px 2px 4px, rgb(34, 34, 34) 2px 2px 5px" },
+                    { "prop": 3, "text":"Raised",        "value": "rgb(34, 34, 34) 1px 1px, rgb(34, 34, 34) 2px 2px, rgb(34, 34, 34) 3px 3px" },
+                    { "prop": 4, "text":"Depressed",     "value": "rgb(204, 204, 204) 1px 1px, rgb(204, 204, 204) 0px 1px, rgb(34, 34, 34) -1px -1px, rgb(34, 34, 34) 0px -1px" },
+                    { "prop": 5, "text":"Outlined",      "value": "rgb(34, 34, 34) 0px 0px 4px, rgb(34, 34, 34) 0px 0px 4px, rgb(34, 34, 34) 0px 0px 4px, rgb(34, 34, 34) 0px 0px 4px" }
+                ],
+                "color":[
+                    { "prop": 1, "text":"White",   "value": "#ffffff" },
+                    { "prop": 2, "text":"Yellow",  "value": "#ffff00" },
+                    { "prop": 3, "text":"Green",   "value": "#00ff00" },
+                    { "prop": 4, "text":"Cyan",    "value": "#00ffff" },
+                    { "prop": 5, "text":"Blue",    "value": "#0000ff" },
+                    { "prop": 6, "text":"Magenta", "value": "#ff00ff" },
+                    { "prop": 7, "text":"Red",     "value": "#ff0000" },
+                    { "prop": 8, "text":"Black",   "value": "#000000" }
+                ],
+                "family":[
+                    { "prop": 1, "text":"Monospaced Serif",        "value": "Courier New, Courier, Nimbus Mono L, Cutive Mono, monospace" },
+                    { "prop": 2, "text":"Proportional Serif",      "value": "Times New Roman, Times, Georgia, Cambria, PT Serif Caption, serif" },
+                    { "prop": 3, "text":"Monospaced Sans-Serif",   "value": "Lucida Console, Deja Vu Sans Mono, Monaco, Consolas, PT Mono, monospace" },
+                    { "prop": 4, "text":"Proportional Sans-Serif", "value": "Arial, Roboto, Arial Unicode Ms, Helvetica, Verdana, PT Sans Caption, sans-serif" },
+                    { "prop": 5, "text":"Casual",                  "value": "Comic Sans MS, Impact, Handlee, fantasy" },
+                    { "prop": 6, "text":"Cursive",                 "value": "Monotype Corsiva, URW Chancery L, Apple Chancery, Dancing Script, cursive" },
+                    { "prop": 7, "text":"Small Capitals",          "value": "Verdana ,Arial Unicode Ms, Arial, Helvetica, Marcellus SC, sans-serif" }
+                ],
+                "opacity": [
+                    { "prop": 1, "text": "Opacity 0%",   "value": 0 },
+                    { "prop": 2, "text": "Opacity 25%",  "value": 25 },
+                    { "prop": 3, "text": "Opacity 50%",  "value": 50 },
+                    { "prop": 4, "text": "Opacity 75%",  "value": 75 },
+                    { "prop": 5, "text": "Opacity 100%", "value": 100 }
+                ],
+                "presets": [
+                    { "prop": 1, "text": "Default", "value": "cvaaDefault" },
+                    { "prop": 2, "text": "Sample",  "value": "cvaaPreset1" },
+                    { "prop": 3, "text": "Sample",  "value": "cvaaPreset2" },
+                    { "prop": 4, "text": "Custom",  "value": "custom" }
+                ]
+            }
+        },
+        locale: {
+            "fontSizelabel": gM('mwe-cvaa-fontSize'),
+            "fontOplabel": gM('mwe-cvaa-fontOpacity'),
+            "backgroundOpLabel": gM('mwe-cvaa-backgroundOpacity'),
+            "fontColorlabel": gM('mwe-cvaa-fontColor'),
+            "backgroundColorlabel": gM('mwe-cvaa-backgroundColor'),
+            "fontFamilylabel": gM('mwe-cvaa-fontFamily'),
+            "edgeStylelabel": gM('mwe-cvaa-edgeStyle'),
+            "optionsBtnLabel": gM('mwe-cvaa-options'),
+            "captionsPreviewText": gM('mwe-cvaa-previewText')
+        },
+        previousScreen: "cvaa-adv",
+        currentScreen: "cvaa-adv",
+        currentLanguageIndex: "",
+        currentLanguage: "",
+
+        cvaaSettings: {},
+        currentFontFamily: "",
+        currentFontColor: "",
+        currentFontHexColor: "",
+        currentFontOpacity: null,
+        currentFontSize: null,
+        currentFontPxSize: null,
+        currentBackgroundColor: "",
+        currentBackgroundHexColor: "",
+        currentBackgroundOpacity: null,
+        currentEdgeStyle: "",
+
+        setup: function () {
+            this.addBindings();
+        },
+
+        addScreenBindings: function () {
+            var _this = this;
+
+            var cvaaMenus = [
+                { name: "cvaa-cstm",  btnClass: "cvaa-adv__cstmoptions-btn" },
+                { name: "cvaa-size",  btnClass: "cvaa-cstm__size-btn" },
+                { name: "cvaa-font",  btnClass: "cvaa-cstm__font-btn" },
+                { name: "cvaa-bg",    btnClass: "cvaa-cstm__bg-btn" },
+                { name: "cvaa-color", btnClass: "cvaa-cstm__color-btn" }];
+
+            $(".cvaa .icon-arrow").on("mousedown", function () {
+                _this.cvaaMenuChanged(_this.previousScreen);
+            });
+
+            $(".cvaa .icon-close").on("mousedown", function () {
+                _this.cvaaMenuChanged("cvaa-adv");
+            });
+
+            $.each(cvaaMenus, function (index, menu) {
+                $(".cvaa ." + menu.btnClass).on("mousedown", function () {
+                    _this.cvaaMenuChanged(menu.name);
+                });
+            });
+        },
+
+        addBindings: function () {
+            var _this = this;
+            var embedPlayer = this.getPlayer();
+
+            this.bind('playerReady', function () {
+               _this.getCurrentSettings();
+
+            });
+
+            this.bind('openCvaaOptions', function (e, currentLanguageIndex) {
+                _this.currentLanguageIndex = currentLanguageIndex;
+                _this.currentLanguage = _this.getPlayer().getInterface().find(".closedCaptions .dropdown-menu li").eq(_this.currentLanguageIndex).children().attr("title");
+
+                _this.getScreen().then(function (screen) {
+                    _this.toggleScreen();
+                });
+            });
+
+            this.bind('preShowScreen', function (event, screenName) {
+
+                _this.getCurrentSettings();
+                _this.setUpHandlers();
+
+                if (screenName === "cvaa") {
+                    _this.getScreen().then(function (screen) {
+                        screen.addClass('semiTransparentBkg');
+                        // prevent keyboard key actions to allow typing in share screen fields
+                        embedPlayer.triggerHelper('onDisableKeyboardBinding');
+                        embedPlayer.triggerHelper("cvaaScreenOpen");
+                        embedPlayer.disablePlayControls(["cvaa"]);
+                    });
+                }
+            });
+
+            this.bind('showScreen', function (event, screenName) {
+                if (screenName === "cvaa") {
+                    _this.getScreen().then(function (screen) {
+                        $(embedPlayer.getPlayerElement()).addClass("blur");
+                        embedPlayer.getPlayerPoster().addClass("blur");
+                    });
+                }
+            });
+
+            this.bind('preHideScreen', function (event, screenName) {
+                if (screenName === "cvaa") {
+                    //set correct currently selected language
+                    _this.getPlayer().getInterface().find(".closedCaptions .dropdown-menu li").eq(_this.lastActiveCaption).addClass('active');
+                    _this.getPlayer().getInterface().find(".closedCaptions .mobileMenuSelect").val(_this.currentLanguage);
+
+                    if (_this.getPlayer().getPlayerElement()) {
+                        $("#" + _this.getPlayer().getPlayerElement().id).removeClass("blur");
+                        _this.getPlayer().getPlayerPoster().removeClass("blur");
+                    }
+                    // restore keyboard actions
+                    embedPlayer.triggerHelper('onEnableKeyboardBinding');
+                    // re-enable player controls
+                    if (!embedPlayer.isInSequence()) {
+                        embedPlayer.enablePlayControls();
+                    }
+                }
+            });
+        },
+
+        getCurrentSettings: function () {
+            var currentPreset = {};
+
+            if (this.getConfig('useCookie') && $.cookie('cvaaSettings')) {
+                this.cvaaSettings = JSON.parse($.cookie('cvaaSettings'));
+                this.initUpdatePreviewBtn(this.cvaaSettings);
+                currentPreset = this.getCurrentPreset(this.cvaaSettings.currentPreset);
+            } else {
+                this.cvaaSettings.currentPreset = "cvaaDefault";
+                currentPreset = $.extend(true, {}, this.getConfig("cvaaDefault"));
+            }
+
+            this.initPreviewUpdate(currentPreset);
+        },
+
+        getCurrentPreset: function (preset) {
+            if (preset === "custom") {
+                return this.cvaaSettings;
+            } else {
+                return $.extend(true, {}, this.getConfig(preset));
+            }
+        },
+
+        cvaaMenuChanged: function (newScreen) {
+            this.previousScreen = this.currentScreen;
+            this.currentScreen = newScreen;
+
+            //show preview
+            this.showHidePreview(newScreen);
+
+            //show back button only if it is not the main screen
+            this.showHideBackBtn();
+
+            //hide current screen and show new screen
+            this.showHideScreens();
+
+            //set correct previous screen for general screens
+            if (newScreen == "cvaa-cstm") {
+                this.previousScreen = "cvaa-adv";
+            }
+        },
+
+        showHidePreview: function (currentMenu) {
+            if ( currentMenu !== "cvaa-adv" ) {
+                this.getPlayer().getInterface().find(".cvaa-footer").show();
+            } else {
+                this.getPlayer().getInterface().find(".cvaa-footer").hide();
+            }
+        },
+
+        showHideScreens: function () {
+            $(".cvaa ." + this.previousScreen).removeClass("cvaa--show");
+            $(".cvaa ." + this.currentScreen).addClass("cvaa--show");
+        },
+
+        showHideBackBtn: function () {
+            if (this.currentScreen !== "cvaa-adv") {
+                $(".cvaa-container .icon-arrow").addClass("cvaa--show");
+            } else {
+                $(".cvaa-container .icon-arrow").removeClass("cvaa--show");
+            }
+        },
+
+        setUpHandlers: function () {
+            var _this = this;
+
+            var presets = [ "cvaaDefault", "cvaaPreset1", "cvaaPreset2", "custom"];
+
+            //presets
+            $.each(presets, function (index, preset) {
+                $(".cvaa-adv ." + preset).on("click keydown", function () {
+                    if (event.which === 32 || event.which === 13 || event.type == "click") {
+                        $(this).parent().addClass('icvaa-check').siblings().removeClass('icvaa-check');
+                        _this.cvaaSettings.currentPreset = preset;
+                        _this.initPreviewUpdate(_this.getCurrentPreset(_this.cvaaSettings.currentPreset));
+                        _this.saveCvaaSettings();
+                    }
+                });
+            });
+
+            //size buttons
+            $(".cvaa-size .cvaa-btn").on('click keydown', function (event) {
+                if (event.which === 32 || event.which === 13 || event.type == "click") {
+                    $(this).parent().addClass('icvaa-check').siblings().removeClass('icvaa-check');
+                    _this.updateSettingsAndPreview(this.name, $(this).val());
+                    _this.saveCvaaSettings();
+                }
+            });
+            //color and bg-color buttons
+            $(".cvaa-color .cvaa-btn, .cvaa-bg .cvaa-btn").on('click keydown', function (event) {
+                if (event.which === 32 || event.which === 13 || event.type == "click") {
+                    $(this).addClass('icvaa-check').siblings().removeClass('icvaa-check');
+                    _this.updateSettingsAndPreview(this.name, $(this).val());
+                    _this.saveCvaaSettings();
+                }
+            });
+
+            //font-family / bg and font opacity
+            $(".cvaa-color .cvaa-dropdown, .cvaa-bg .cvaa-dropdown, .cvaa-font .cvaa-dropdown").on("change keydown", function (event) {
+                if (event.which === 32 || event.which === 13 || event.type == "change") {
+                    _this.updateSettingsAndPreview(this.name, $(this).val());
+                    _this.saveCvaaSettings();
+                }
+            });
+
+            //paging buttons for colors anf backgrounds
+            $(".cvaa-arrow").on("click", function (event) {
+                $(this).parent().parent().toggleClass("cvaa-alternate-page-view")
+            });
+        },
+
+        updateSettingsAndPreview: function (option, value) {
+
+            this.setDefaultCustomSettings();
+            this.initUpdatePreviewBtn(this.cvaaSettings);
+
+            switch (option) {
+                case "cvaa-font":
+                    this.cvaaSettings.fontFamily = this.getValueOrProp("family", value, "prop");
+                    this.updatePreview("custom", "font-family", this.cvaaSettings.fontFamily);
+                    break;
+                case "cvaa-style":
+                    this.cvaaSettings.edgeStyle = this.getValueOrProp("edgeStyle", value, "prop");
+                    this.updatePreview("custom", "text-shadow", this.cvaaSettings.edgeStyle);
+                    break;
+                case "cvaa-color":
+                    this.currentFontHexColor = this.getValueOrProp("color", value, "prop");
+                    this.currentFontColor = this.rgb2rgba(this.hex2rgb(this.currentFontHexColor), this.currentFontOpacity);
+                    this.cvaaSettings.fontColor = this.currentFontColor;
+                    this.cvaaSettings.fontHexColor = this.currentFontHexColor;
+                    this.updatePreview("custom", "color", this.currentFontColor);
+                    break;
+                case "cvaa-color-opacity":
+                    this.currentFontOpacity = this.getValueOrProp("opacity", value, "prop");
+                    this.currentFontColor = this.rgb2rgba(this.hex2rgb(this.currentFontColor), this.currentFontOpacity);
+                    this.cvaaSettings.fontColor = this.currentFontColor ;
+                    this.cvaaSettings.fontOpacity = this.currentFontOpacity;
+                    this.updatePreview("custom", "color", this.currentFontColor );
+                    break;
+                case "cvaa-bg":
+                    this.currentBackgroundHexColor = this.getValueOrProp("color", value, "prop");
+                    this.currentBackgroundColor = this.rgb2rgba(this.hex2rgb(this.currentBackgroundHexColor), this.currentBackgroundOpacity);
+                    this.cvaaSettings.backgroundColor = this.currentBackgroundColor;
+                    this.cvaaSettings.backgroundHexColor = this.currentBackgroundHexColor;
+                    this.updatePreview("custom", "background-color", this.currentBackgroundColor);
+                    break;
+                case "cvaa-bg-opacity":
+                    this.currentBackgroundOpacity = this.getValueOrProp("opacity", value, "prop");
+                    this.currentBackgroundColor = this.rgb2rgba(this.hex2rgb(this.currentBackgroundHexColor), this.currentBackgroundOpacity);
+                    this.cvaaSettings.backgroundColor = this.currentBackgroundColor;
+                    this.cvaaSettings.backgroundOpacity = this.currentBackgroundOpacity;
+                    this.updatePreview("custom", "background-color", this.currentBackgroundColor);
+                    break;
+                case "cvaa-size":
+                    this.currentFontPxSize = this.getValueOrProp("size", value, "prop");
+                    this.currentFontSize = this.getFontSize(this.currentFontPxSize);
+                    this.cvaaSettings.fontSize = this.currentFontSize;
+                    this.cvaaSettings.fontPxSize = this.currentFontPxSize;
+                    this.updatePreview("custom", "font-size", this.currentFontSize);
+                    break;
+            }
+        },
+
+        setDefaultCustomSettings: function () {
+            this.cvaaSettings.fontFamily = this.cvaaSettings.fontFamily || this.currentFontFamily;
+            this.cvaaSettings.edgeStyle = this.cvaaSettings.edgeStyle || this.currentEdgeStyle;
+            this.cvaaSettings.fontColor = this.cvaaSettings.fontColor || this.currentFontColor;
+            this.cvaaSettings.fontHexColor = this.cvaaSettings.fontHexColor || this.currentFontHexColor;
+            this.cvaaSettings.fontOpacity = this.cvaaSettings.fontOpacity || this.currentFontOpacity;
+            this.cvaaSettings.backgroundColor = this.cvaaSettings.backgroundColor || this.currentBackgroundColor;
+            this.cvaaSettings.backgroundHexColor = this.cvaaSettings.backgroundHexColor || this.currentBackgroundHexColor;
+            this.cvaaSettings.backgroundOpacity = this.cvaaSettings.backgroundOpacity || this.currentBackgroundOpacity;
+            this.cvaaSettings.fontSize = this.cvaaSettings.fontSize || this.currentFontSize;
+            this.cvaaSettings.fontPxSize = this.cvaaSettings.fontPxSize || this.currentFontPxSize;
+        },
+
+        initPreviewUpdate: function (currentPreset) {
+            //set font family
+            this.currentFontFamily = currentPreset.fontFamily;
+            $(".cvaa-font .cvaa-family").val(this.getValueOrProp("family", this.currentFontFamily, "value"));
+            this.updatePreview(currentPreset.currentPreset, "font-family", this.currentFontFamily);
+
+            //set edge style - text shadow
+            this.currentEdgeStyle = currentPreset.edgeStyle;
+            $(".cvaa-font .cvaa-style").val(this.getValueOrProp("edgeStyle", this.currentEdgeStyle, "value"));
+            this.updatePreview(currentPreset.currentPreset, "text-shadow", this.currentEdgeStyle);
+
+            //set font color and opacity
+            this.currentFontHexColor = currentPreset.fontHexColor;
+            this.currentFontOpacity = currentPreset.fontOpacity;
+            this.currentFontColor = currentPreset.fontColor;
+            $(".cvaa-color .cvaa-color-opacity").val(this.getValueOrProp("opacity", this.currentFontOpacity, "value"));
+            $(".cvaa-color .cvaa-btn[value='" + this.getValueOrProp("color", this.currentFontHexColor, "value") + "']").addClass('icvaa-check').siblings().removeClass('icvaa-check');
+            this.updatePreview(currentPreset.currentPreset, "color", this.currentFontColor);
+
+            //set background color and opacity
+            this.currentBackgroundHexColor = currentPreset.backgroundHexColor;
+            this.currentBackgroundOpacity = currentPreset.backgroundOpacity;
+            this.currentBackgroundColor = currentPreset.backgroundColor;
+            $(".cvaa-bg .cvaa-bg-opacity").val(this.getValueOrProp("opacity", this.currentBackgroundOpacity, "value"));
+            $(".cvaa-bg .cvaa-btn[value='" + this.getValueOrProp("color", this.currentBackgroundHexColor, "value") + "']").addClass('icvaa-check').siblings().removeClass('icvaa-check');
+            this.updatePreview(currentPreset.currentPreset, "background-color", this.currentBackgroundColor);
+
+            //set font size
+            this.currentFontSize = currentPreset.fontSize;
+            this.currentFontPxSize = currentPreset.fontPxSize;
+            $(".cvaa-size .cvaa-btn[value='" + this.getValueOrProp("size", this.currentFontPxSize, "value") + "']").parent().addClass('icvaa-check').siblings().removeClass('icvaa-check');
+            this.updatePreview(currentPreset.currentPreset, "font-size", this.currentFontSize);
+
+            //set current preset btn
+            $(".cvaa-adv .cvaa-btn[value='" + this.getValueOrProp("presets", this.cvaaSettings.currentPreset, "value") + "']").parent().addClass('icvaa-check').siblings().removeClass('icvaa-check');
+
+            //send styles to captions plugin
+            this.getPlayer().triggerHelper("newCaptionsStyles", currentPreset);
+        },
+
+        updatePreview: function (preset, option, value) {
+            if (preset == "custom" && option !== "font-size") {
+                this.getPlayer().getInterface().find(".cvaa-adv .custom").css(option, value);
+            }
+
+            this.getPlayer().getInterface().find(".cvaa-footer__preview").css(option, value);
+        },
+
+        initUpdatePreviewBtn: function (cvaaSettings) {
+            if (Object.keys(cvaaSettings).length > 1) {
+                this.getPlayer().getInterface().find(".cvaa-adv .custom").show();
+                $(".cvaa-adv .cvaa-adv__cstmoptions-btn").html("Edit custom captions");
+            }
+            this.getPlayer().getInterface().find(".cvaa-adv .custom").css({
+                'font-family': cvaaSettings.fontFamily,
+                'text-shadow': cvaaSettings.edgeStyle,
+                'color': cvaaSettings.fontColor,
+                'background-color': cvaaSettings.backgroundColor
+            });
+        },
+
+        getValueOrProp: function (option, property, type) {
+            var cvaaSettings = this.getConfig("cvaaOptions");
+            var cvaaOptions = cvaaSettings[option];
+
+            for (var i = 0; i < cvaaOptions.length; i++) {
+                if (cvaaOptions && cvaaOptions[i][type] == property) {
+                    return type == "prop" ? cvaaOptions[i].value : cvaaOptions[i].prop;
+                }
+            }
+        },
+
+        hex2rgb: function (hex) {
+            hex = hex.replace('#', '');
+            return [parseInt(hex.substring(0, 2), 16), parseInt(hex.substring(2, 4), 16), parseInt(hex.substring(4, 6), 16)];
+        },
+
+        rgb2rgba: function (color, opacity) {
+            if (opacity !== undefined) {
+                return 'rgba(' + color.join(',') + ',' + opacity / 100 + ')';
+            } else {
+                return 'rgb(' + color.join(',') + ')';
+            }
+        },
+
+        getFontSize: function (fontsize) {
+            // Translate to em size so that font-size parent percentage
+            // base on http://pxtoem.com/
+            var emFontMap = {
+                '6': .5, '7': .583, '8': .666, '9': .75, '10': .833, '11': .916,
+                '12': 1, '13': 1.083, '14': 1.166, '15': 1.25, '16': 1.333, '17': 1.416, '18': 1.5, '19': 1.583,
+                '20': 1.666, '21': 1.75, '22': 1.833, '23': 1.916, '24': 2
+            };
+            return ( emFontMap[fontsize] ) ?
+                emFontMap[fontsize] + 'em' :
+                (  fontsize > 24 ) ? emFontMap[24] + 'em' : emFontMap[6];
+        },
+
+        saveCvaaSettings: function () {
+            this.getPlayer().setCookie('cvaaSettings', JSON.stringify(this.cvaaSettings), {
+                expires: 356,
+                path: '/',
+                domain: ''
+            });
+        },
+
+        addOptionsBtn: function () {
+            return {
+                "optionsLabel": this.locale.optionsBtnLabel,
+                "optionsEvent": "openCvaaOptions"
+            }
+        },
+
+        getTemplateData: function () {
+            return {
+                'cvaa': this,
+                'cvaaOptions': this.getConfig("cvaaOptions")
+            };
+        },
+
+        isSafeEnviornment: function () {
+            return !mw.isIphone() && !mw.isIE8();
+        }
+    });
+
+})(window.mw, window.jQuery);
\ No newline at end of file
diff --git a/modules/KalturaSupport/components/cvaa/cvaa.tmpl.html b/modules/KalturaSupport/components/cvaa/cvaa.tmpl.html
index 442f278e72..a9a28be8d2 100644
--- a/modules/KalturaSupport/components/cvaa/cvaa.tmpl.html
+++ b/modules/KalturaSupport/components/cvaa/cvaa.tmpl.html
@@ -1,33 +1,99 @@
-

+

 
-	

-		
-			
-				<%=cvaa.locale.captionsPreviewText%>
-			
-		
+	
+
+	
+	
+		
+		
+			
+			
+				
+					   
+				
+					
+					
+				
+			
+		
+		
+			
+			
+			
+		
+		
+			
+		
+	
+
+	
+	

+		
Advanced options

+		

+			<% $.each(cvaaOptions.presets, function(idx, property){ %>
+			

+				
+			

+			<% }); %>
+		

+
+		

+			
+		

 	

 
-	

-		

-			
-			
<%=cvaa.locale.fontSizelabel%>

-			

+	
+	

+		
Custom captions

+		

+			

+				
+				Size
+			

+			

+				
+				Color
+			

+			

+				
+				Font
+			

+			

+				
+				Background
+			

 		

+	

 
-		

-			
<%=cvaa.locale.fontFamilylabel%>

-			
 				<% $.each(cvaaOptions.family, function(idx, property){ %>
 				
 				<% }); %>
 			
 		

-
-
-		

-			
<%=cvaa.locale.edgeStylelabel%>

-			
 				<% $.each(cvaaOptions.edgeStyle, function(idx, property){ %>
 				
 				<% }); %>
@@ -35,57 +101,50 @@
 		

 	

 
-	

-			
    
-				
    <%=cvaa.locale.fontColorlabel%>
    
-				<% $.each(cvaaOptions.color, function(idx, property){ %>
-				
  • 
-					>
-				
    • 
-				<% }); %>
-			

-
-			
    
-				
    <%=cvaa.locale.backgroundColorlabel%>
    
-				<% $.each(cvaaOptions.color, function(idx, property){ %>
-				
  • 
-					>
-				
    • 
-				<% }); %>
-			

+	
+	

+		
Background

 
+		

+			

+			<% $.each(cvaaOptions.color, function(idx, property){ %>
+			
+			<% }); %>
+			

+		

 
-			
    
-				
    <%=cvaa.locale.windowColorlabel%>
    
-				<% $.each(cvaaOptions.color, function(idx, property){ %>
-				
  • 
-					>
-				
    • 
+		
    
+			
+		
    
 	

 
-	

-		

-			
-			
<%=cvaa.locale.fontOplabel%>

-			

-		

-		

-			
-			
<%=cvaa.locale.backgroundOpLabel%>

-			

+	
+	

+		
Color

+		

+			

+			<% $.each(cvaaOptions.color, function(idx, property){ %>
+			
+			<% }); %>
+			

 		

-		

-			
-			
<%=cvaa.locale.windowOplabel%>

-			

+
+		

+			
 		

 	

 
-	

-		
-		
-	

 
+	

+		Captions preview
+	

 

\ No newline at end of file
diff --git a/modules/KalturaSupport/components/cvaa/fonts/icvaa.eot b/modules/KalturaSupport/components/cvaa/fonts/icvaa.eot
new file mode 100755
index 0000000000000000000000000000000000000000..41df74bb45c4f2b24c1d772e088a6894f018912d
GIT binary patch
literal 2328
zcmb7GUu+ab82@HxcW-y^ZuhQtx4U;-uh-l5jzT@k{ViaHU?~A1m|77N1&(sI#NJ)g
zUQHXtU_>4e6cfPUgAYo0Acn-m1QU7aqfs7=;lYHcF(eo?F=9%h0rvcMZ!26=gHCpK
ze&27t`R3bizL_0e1gHxD1Q=*71Wpl)+3|EMZ|OG69rohz(mntg4#6nYpn|mqRaB5+
z7|JjPGcW-qm_kN{-N;PAH0oM9aaap!=(BZ~jz-d&&<#g`Lf@`u)?}16?ssIaVBJ4j
zDNSm-zdeacQItoXB^djbLeTBjvI*c8Pv;x+u!&;D&c)zc
zdU5Mz&t}aS#lB`sZLKJ<(2u+X0xm9tT>KW_xZh}4gAjv_N#lmb;<$(H5+JChJj7vg
z6xZ1*5A+_z9fcwKIqic0I-N|o_+ST73q?{$rjopiq(~_CY%CW0p>uDPd=c>^5+f1w
z#M|UEZds?5Tb&a@({
zBFo+XC4v?_9Log)9LIV@J|1CIMG0<5UBTD_Y@sIlvj@|<4u=7{aWa`0i6nZK&pB=s
z^Epdy`V!KDmP-$-WHXNU?PT#goKFZXDy9aAZ5c;~Y#mF13uFUE%5W94RvfUOOk_5C
z13hY@UsYANq-49g=0+5sl5W=w*()=mAgHoe6-1#U-mzz0@78FjLvry9LwJ@GIbLFg
z_Rz{5-TtWLmPlcXFWTerc+h|mjBf2E8&2fU_OJS2W#Mp2@N!h*KTSQxi=w7!14(_A
zUr(!{Tt}pDu&u2Phedro{;(*Dk|>7#v321{M3FrSUD>$i$Mky1EmM}I3>Q&X77AXE
zrze*FE7T$QI{p4+FtXb3_ZeL$NzHt(R(rp!B^AHXhWQIHKyTaYzwiHNz`tgUv3$lb
z)qgTZ&p8>RXyzHr7>ReYjFmBpW@ij})6Gdd@00kT9K&$BI8GMiYhF?2Su4El!I9$5WO5j%`cT8%kq{3n5K-2rvZiZi-N~cD|n>9b$EkjFeUv!YTJvjN*9SH7qT=Q_w_<**4I)AEkMZ_WMu4VVg~V;gDK(x2eXJ@b1;YNkAEq9
zERX!KgC)qp`9q_%O08CH{iE+LPfZ`HRpV>ZearvGmmRe%Ib0r_nJ7)Q-Vc`59I938
z@v(BXJXNZf55^D7#kY;tcA{@-jK6h-sN+|R;iaN#Uo1)}m*F6C2Vf50+w3dJPUlLJ
O#;Du>=%q{ZK>i!;$x
+
+
+Generated by IcoMoon
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/modules/KalturaSupport/components/cvaa/fonts/icvaa.ttf b/modules/KalturaSupport/components/cvaa/fonts/icvaa.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..1aa12ebeafb4223531763ab01f8889a650798f19
GIT binary patch
literal 2164
zcmb7FU2GIp6h3F}%3kZnrz_E`_?3-F92R3c*qWN=UFGCJHQNZHe98
zraz{QVlW~P2>v7#gAYC^;lUUZ6BA72p^rv+Fop*cqQ;P5(8P#=L<3AcGdq<+YS6oL
z_kQO)=bm%!opbL10)QWm0E4cbPpv6vO~UWQT%^8#xLO`Jc7J;k0FxvSjg%+HX$+C<
zjMB*1>`#(MN$wo0
z51085h3`l{MY35f&y17zBP4%9a=KQoR?cjfZ<98=!aQtZ)Jf^=#bQglz=`JcBbFGrVLm%-9
zNWjq#A$?t3xVy06&Prbg7vsWJgQs~*{URV)X-hZ`pm&{Xa?kEz+))^0pR+EAP}13q
zPmH#pUh2hCHkTEBn8R4==~OE9L+jooevt@dGD8Xb#GCjTaYMw4S#Bp$@j%Abj#I`6
z7ibUKxtp+tgqW4bocpZCa8x%^NY4h0we}PXrQXMoo}RFk5q&E9te#fZ9+8?9Wkr*m
zi5D4TepxbA!#-_jrtI?*QLu_3Jt;=G8h7(zYhF`znHTQGsm-?df*pMlLZU>ZG*Pq*(B>Z^p%S
zcuR;a8s_@Z^-MEku8m_LM2ZnBXZd=I&OVSH#|j&Rkq$l6r|Y_3(TZ(tvqM@)%QqXA
z8dN!1l5{nwOS06GZrQW0b89lzqWDCPLy;F`K~#9DIkxi2_Ha`1D_GhRN_GSS0dinP
zlUqA+!-<~LeXHJISvs7Pf&x>-PjiomvTPVef7Vgp{aq4scl^IV}8BjR~gSUPDto0OQm2S(2>gj6>E_~t>JJsnphnUhpe`f
zShwG;*WarcSuJceQT+n+vm5UF-}nD3;9o1oTE1eq+CLRzc6$}08TK4ij3WAZ&Z!v9
za4QC1_X~WXrf55Tf}l$3<)EyJytBQ{(UcqvGe5rgA8X70z8YB}$w7f*_Lo|e
z=S3$0DpSrUvWSL#vJ|lNDqSgX1zuwX+7k(av?q;C
z%`XUk&Hl(3AOd^v1Kb?n8jr{AxzOrptTSZKneq5w95*|c3&J(>eQD8msXIsKpK90;
zbp!Q6FA<2Rv1FL$epN=1)`9GL3j%X
z@f-Y&OLE&?uYP#d3*)$Xu&Hp~i;dtTWg`!c@O}?7!X*#$gr_|$&{r_#VUhSJJgh(h
zjyrcaFB7AZrhz%aBOYdi`#sDPe#OHAy?^>jxpPJ0cX?QWZa8~rxL&Q-Yj6mLp$=8*
zb*SyGOiUiC*V1eAU9cM}FaeWfKnn7+7V^-w?5t(UU6qmPvGN23tx%%Vbdi=}Vp+?<
zdTlB_QmIuY%2Snt=>xOrZNv2)lv|$m--$g%(MQNl&CRGxas>_&cK~MTf1A629gPK0
Nj*TzogKuVu{5SPcLD~QS

literal 0
HcmV?d00001

diff --git a/modules/KalturaSupport/components/cvaa/fonts/icvaa.woff b/modules/KalturaSupport/components/cvaa/fonts/icvaa.woff
new file mode 100755
index 0000000000000000000000000000000000000000..070de2be163610ff06f51ff4b250b00bdf2c1676
GIT binary patch
literal 2240
zcmb7FU5pb|6h3$E%yeej&h&R?TDskCXSZcxElb;N7jT6jlzmqJ@M%M(WiA$c>>s%*5F7
z?eWp-B;zik&TN?kM#pEKL+%Rz{#_<7^}L~s)vEgd#GN=_V&Xe^U~VoKyQsVN0{ADsGCgqkA&~))q@yUyoGwokpR5fsMc!$9<(7xn4I1s
z-#*Zs#63zM-m{~KD4iuIKmg!Qb91P_-5$wrP#`ku3mXY6)EHg|a80DMtyx${QIH`h
z^DX57Ckmnj&M}<8o>?V;hd~?_JSh%;1X9<;*4awN^`ul
zIS!z_$_afx{)4!~P@$jEeh8z(OxhzxI*DE?lTs#|5j`YJqRA(d$>a}RyAtH{xG$X^
zj@!rHB{=~K@WEWR-nJAl_Oc_Sx$lx-AEFA){tn|Kp|f$
zKSJ;s2wG{;qY{rb&_#Q~QbXglBpW@DMK@5j~9u&RS4(_G0Zi%8yCBB
znySmZaQD|ZdhiLn5Dp6h?~}z;oYOTevL<^G&lX@KwK1QaFb-322%rapsl-ZWFtdT8
zn?`w{$nwN(-Q6?8T0qNn7?$c+Ia!i))vrsk)S2qsxvFndBHF2VM2;gOFUW$Z
z@KQ%~>Ek`YgyL05X=5PK>+|{0ffY$?>LY884V)TW_Wsh+p{(Q=s3LxveMppL!!U+2
z=CYuf)1$@Cc>jh_D1^%rf!<(DmSshjW5MLASUj$&zO<>WUGZaXwc=GN&r?o_>q|=|
zzt7j3%>5PZlmcDBU?vh@9t;Mo?&G9szte2KS2HqN&A+LJ{MHB;y7*UgWoE||?CH0bDRz;p2Z$~64
z`-9X=p8t=vWq)4}FOg)wz)|~4EyD96O90E1^N2L8kwIDVS$Z9>6u1np(LA1s1b#e|
zc12iWTA&ssbJN#fSbcl-#P#g#F1nk$argMyv)rV8gsAqPXbg8+SGb?))1U*$BvUMx
z@&-u~kB%Rwn9d?WxRv(TrfF_4$g`SP5WJfGv9SROGC)2c>tmZ@v6y`_usjm&3)m;k
zSgaBw>)Cxl;41o_oA+HRX7T&S8a71TAbP%x1R_Y^&bgt{E`(x`0wJ|#Tk6?Af8s1yZJ?eb8i0uWpTie3*)K=Is
z^n4iQ0*m0vWgPFITy?Azh(Ho5@D{0%Z^-Xlg4^PF^};J|nEB{!r|n*ab8c(`9;Dhg
zDu;NFiz(ugi+RM;E*9{gH0ojz`Nv$WKpc*;JDiu1QE{e?ImDwbrih1J%p-o;#R9(n
zl#4~=x4T$@BAnSj(yTX|4cHGO(1bcl6B;{e6O;R!jnv9qKkR@SOu!@>-~{?v2|4Ir
zbk(Bd_S)$5cy$7U)-cg&yhy7sv8ZLG*_cX=)*7{m>QrrCYVS;H^GI_m=9a_rXR)U+
k`Y5_-I2lz@ufaa#_QDMIo1G18ZEpZ`!~$6OO8$xe21B?N_UZeAOVOLYz*1reZ;R@+61^
zM*sj1WvC-Sasbi{Y;XrNTZzrMoKQ-ImT`hi-m;}!qEZq2BXX9Qf)^P=#%;eCRj~3x
z=Pl>LGovShYg(bSEeW)3;5gRMsIXcU*7-aSJHne6s;aA1)%8Tenf3{bR=IP;G2_@V
zVct5%|yiyr8Yy!kN|ymKt~%Y6QzX&a^;jt0Ts>VM{Oa=JNsb
zmusxE0mJO>%-SxfR#h(z!>)6OUZqJ($f0w>ylv{51{fMOwd;BF#U5!1d>j|ejg8@>
z>zb6|eyXbmWm%}SuFh&x+7=iXLoKY}sG6hpd4gq`y4}8jPs(}$mlDgzbFpRFON?Pl
z%^_LVMs;n2kh#bd+OQm}E;ZKkO~IL#22D+)B5ScZj5cS3f`ql#$6dcZ_WFMXk|gW5
z4F8uOqfw9H|1EoEnu*q<-)(a(_GoIHubwPu+9ZEp_A&RjM_Hp72(b@CSr^hjxPT~C>why^otxJx&8L825Nv-=#mPr3=Rerc%aK(^z
z0nXd%m)6)vejeM`^W#p#s#WU+?UPrxq6GK;zH2-GVb-;?>NVkCbY`+F(R_-6}
z{og1Qy}i6f-Ij9{6u2#8mUdJqUSz!GB;O*wcU?^EH_NEj4xSwyU0rEb@7`x*4*WUZ
zUVdhDt7wG_ejh@G$E#~EA=->4VkcSNDQ3O5o(9MM(zg1*QL?a8O
zC_^6f(7_w65Q&z&yk`ENduNPB7IIL5LZqP-N`8$mnkU$xf?@SY^v_*b4sYZj3%X$f
a(@>5qWKK-Scz9z_AJMRbBN7w_0002+LmCDE

literal 0
HcmV?d00001

diff --git a/modules/KalturaSupport/resources/mw.ClosedCaptions.js b/modules/KalturaSupport/resources/mw.ClosedCaptions.js
index 5329db0e8a..9cfaf48f6b 100644
--- a/modules/KalturaSupport/resources/mw.ClosedCaptions.js
+++ b/modules/KalturaSupport/resources/mw.ClosedCaptions.js
@@ -662,7 +662,6 @@
 				.html($(caption.content)
 					.addClass('caption')
 					.css('pointer-events', 'auto')
-					.css("background-color", (this.customStyle && this.customStyle.windowColor) ? this.customStyle.windowColor : "none")
 				);
 
 			this.displayTextTarget($textTarget);
@@ -686,18 +685,10 @@
 				.attr('data-capId', capId)
 				.hide();
 
-			var $windowTarget = $('
')
-				.css("background-color", (this.customStyle && this.customStyle.windowColor) ? this.customStyle.windowColor : "none")
-				.addClass('trackWindow')
-				.attr('dir', "auto");
-
-
 			// Update text ( use "html" instead of "text" so that subtitle format can
 			// include html formating
 			// TOOD we should scrub this for non-formating html
-
 			$textTarget.append(
-				$windowTarget.append(
 				$('')
 					.addClass('ttmlStyled')
 					.css('pointer-events', 'auto')
@@ -709,7 +700,6 @@
 							.css('position', 'relative')
 							.html(caption.content)
 					)
-				)
 			);
 
 			// Add/update the lang option
@@ -1104,7 +1094,7 @@
 					'class': "cvaaOptions"
 				},
 				'callback': function(){
-					_this.getPlayer().triggerHelper(btnOptions.optionsEvent);
+					_this.getPlayer().triggerHelper(btnOptions.optionsEvent, _this.lastActiveCaption);
 				},
 				'active': false
 			});
diff --git a/skins/kdark/css/layout.css b/skins/kdark/css/layout.css
index 0a0dfc4b80..517265a82a 100644
--- a/skins/kdark/css/layout.css
+++ b/skins/kdark/css/layout.css
@@ -1201,11 +1201,17 @@ body {
     display: none !important;
 }
 .closedCaptions > .dropdown-menu {
-	overflow-y:auto;
-	overflow-x:hidden;
-	max-height:200px;
-	width:auto;
-	max-width:140px;
+	overflow-y: auto;
+	overflow-x: hidden;
+	max-height: 200px;
+	width: auto;
+	max-width: 140px;
+}
+
+@media (max-height: 220px) {
+	.closedCaptions > .dropdown-menu {
+		max-height: 120px;
+	}
 }
 
 .dropup .dropdown-submenu > .dropdown-menu {
@@ -1991,11 +1997,6 @@ background-image:  linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transpa
     -o-transition: top 0.3s ease-in-out;
     transition: top 0.3s ease-in-out;
 }
-.trackWindow{
-    display: inline-block;
-    padding: 5px;
-    margin: 0 15px 0 15px;
- }
 /* used to detect when the css file finished loading */
 .cssChecker{
     display: none !important;