Release v0.9.4: player control fixes (#290)

* Update Brightcove account_id field validation (#277) * fixed speed menu position * Suppress custom menus hiding * Remove non functional caret control * Prepare CHANGELOG.md for a new release * Bump __version__ to 0.9.4
raccoongang · Jan 18, 2018 · ea48719 · ea48719
1 parent ac4fa3a
commit ea48719
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 
+## [0.9.4] - 2018-01-18
+
+### Fixed
+
+- Language menu popup behaviour in player's subtitles/transcripts control group;
+- Removed caret control from controls;
+- Speed rates popup shifted;
+
 ## [0.9.3] - 2017-12-28
 
 ### Fixed
@@ -261,4 +269,5 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 [0.9.1]: https://github.com/raccoongang/xblock-video/compare/v0.9.0...v0.9.1
 [0.9.2]: https://github.com/raccoongang/xblock-video/compare/v0.9.1...v0.9.2
 [0.9.3]: https://github.com/raccoongang/xblock-video/compare/v0.9.2...v0.9.3
-[Unreleased]: https://github.com/raccoongang/xblock-video/compare/v0.9.3...HEAD
+[0.9.4]: https://github.com/raccoongang/xblock-video/compare/v0.9.3...v0.9.4
+[Unreleased]: https://github.com/raccoongang/xblock-video/compare/v0.9.4...HEAD
diff --git a/video_xblock/__init__.py b/video_xblock/__init__.py
@@ -2,7 +2,7 @@
 Video xblock module.
 """
 
-__version__ = '0.9.3'
+__version__ = '0.9.4'
 
 # pylint: disable=wildcard-import
 from .video_xblock import *  # nopep8
diff --git a/video_xblock/static/css/brightcove.css b/video_xblock/static/css/brightcove.css
@@ -238,7 +238,7 @@ body {
 }
 .video-js .vjs-custom-transcript-button {
     position: absolute;
-    right: 20px;
+    right: 0;
     width: 40px;
     font-size: 8px;
 }
@@ -247,7 +247,7 @@ body {
 }
 .video-js .vjs-custom-caption-button {
     position: absolute;
-    right: 61px;
+    right: 41px;
     width: 40px;
     font-size: 8px;
 }
@@ -256,19 +256,19 @@ body {
 }
 .video-js .vjs-fullscreen-control {
     position: absolute;
-    right: 100;
+    right: 80;
     border-left: 1px dotted #4f595d;
     border-right: 1px dotted #4f595d;
     width: 41px;
 }
 .video-js .vjs-volume-menu-button {
     position: absolute;
-    right: 140px !important;
+    right: 120px !important;
     border-left: 1px dotted #4f595d;
 }
 .video-js .vjs-playback-rate {
     position: absolute;
-    right: 182px;
+    right: 122px;
     border-left: 1px dotted #4f595d;
     width: 120px;
 }
@@ -637,7 +637,7 @@ body .video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item:hover {
 body .vjs-v6.video-js .vjs-custom-caption-button {
     right: 0 !important;
 }
-div.vjs-control-bar > div.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button.icon.fa.fa-cc.vjs-singleton:hover .vjs-menu,
+/* div.vjs-control-bar > div.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button.icon.fa.fa-cc.vjs-singleton:hover .vjs-menu,
 div.vjs-control-bar > div.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button.icon.fa.fa-quote-left.vjs-singleton:hover .vjs-menu,
 div.vjs-control-bar > div.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button.icon.fa.fa-cc.vjs-singleton.vjs-control-enabled .vjs-menu,
 div.vjs-control-bar > div.vjs-custom-caption-button.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button.icon.fa.fa-cc.vjs-singleton.vjs-control-enabled .vjs-menu {
@@ -649,5 +649,15 @@ body .video-js .fa-quote-left .vjs-menu,
 body .video-js .fa-cc .vjs-menu,
 body .vjs-v6 .vjs-custom-caption-button .vjs-menu-content,
 body .vjs-v6 .vjs-custom-transcript-button .vjs-menu-content {
-    display: none !important;.
+    display: none !important;
+} */
+body .vjs-custom-transcript-button:focus .vjs-menu,
+body .vjs-custom-caption-button:focus .vjs-menu,
+body .vjs-custom-caption-button .vjs-menu.vjs-lock-showing,
+body .vjs-custom-caret-button {
+    display: none !important;
+}
+
+body .vjs-playback-rate .vjs-menu-content {
+    transform: translate(50%,0);
 }
diff --git a/video_xblock/static/css/videojs.css b/video_xblock/static/css/videojs.css
@@ -228,7 +228,7 @@ body {
 
 .video-js .vjs-custom-transcript-button {
     position: absolute;
-    right: 20px;
+    right: 0px;
     width: 40px;
     font-size: 8px;
 }
@@ -238,7 +238,7 @@ body {
 
 .video-js .vjs-custom-caption-button {
     position: absolute;
-    right: 61px;
+    right: 41px;
     width: 40px;
     font-size: 8px;
 }
@@ -249,22 +249,22 @@ body {
 
 .video-js .vjs-fullscreen-control {
     position: absolute;
-    right: 100;
+    right: 80px;
     border-left: 1px dotted #4f595d;
     border-right: 1px dotted #4f595d;
     width: 41px;
 }
 
 .video-js .vjs-volume-menu-button {
     position: absolute;
-    right: 141px;
+    right: 121px;
     border-left: 1px dotted #4f595d;
     width: 41px;
 }
 
 .video-js .vjs-playback-rate {
     position: absolute;
-    right: 182px;
+    right: 162px;
     border-left: 1px dotted #4f595d;
     width: 128px;
 }
@@ -274,7 +274,7 @@ body {
         display: none;
     }
     .video-js .vjs-playback-rate {
-        width: 41px;
+        width: 128px;
     }
 }
 .vjs-playback-rate-value:before {
@@ -454,3 +454,13 @@ body {
 .vjs-text-track-display div div {
     width: 100% !important;
 } 
+
+.vjs-menu li.vjs-selected, .vjs-menu li.vjs-selected:focus, .vjs-menu li.vjs-selected:hover {
+    background-color: rgba(115,133,159,.5);
+    color: #e7ecee;
+}
+
+.vjs-custom-caption-button .vjs-menu,
+.vjs-custom-transcript-button .vjs-menu {
+    transform: translate(-75%);
+}
diff --git a/video_xblock/static/js/videojs/toggle-button.js b/video_xblock/static/js/videojs/toggle-button.js
@@ -152,9 +152,16 @@ domReady(function() {
         },
         onClick: function onClick(event) {
             var el = event.currentTarget;
+            var menusCollection = this.player_.el_.getElementsByClassName('vjs-lock-showing');
             var eventName = this.hasClass('vjs-control-enabled') ? this.disabledEventName() : this.enabledEventName();
             el.classList.toggle('vjs-control-enabled');
             this.player_.trigger(eventName);
+
+            // kind a hack here - removing vjs special class to make lang menu appear on hover...
+            for (var i = 0; i < menusCollection.length; i++) {  // eslint-disable-line vars-on-top
+                menusCollection.item(i).classList.remove('vjs-lock-showing');
+            }
+            el.blur();
         }
     });
 

diff --git a/video_xblock/static/js/videojs/videojs-transcript.js b/video_xblock/static/js/videojs/videojs-transcript.js
@@ -106,12 +106,5 @@ domReady(function() {
             cssClasses: cssClasses,
             tabIndex: 7
         });
-        this.toggleButton({
-            style: 'fa-caret-left',
-            enabledEvent: 'caretenabled',
-            disabledEvent: 'caretdisabled',
-            cssClasses: 'vjs-custom-caret-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button',
-            tabIndex: 8
-        });
     });
 });