bitmovin-player-ui - npm Package Compare versions

Comparing version 3.51.0 to 3.52.0

CHANGELOG.md

@@ -7,4 +7,9 @@ # Change Log
 
-## [3.51.0]
+## [3.52.0]
 
+### Fixed
+- When having a spatial navigation and using a mouselike device, components will lose focus when the mouse leaves the hovered component. Spatial navigation will continue at the last active component when using arrow keys again.
+
+## [3.51.0] - 2023-09-18
+
 ### Changed
@@ -876,2 +881,3 @@ - On seek/timeshift operations the UI will only remove subtitle cues which do not enclose the seek target instead of removing all.
 
+[3.51.0]: https://github.com/bitmovin/bitmovin-player-ui/compare/v3.50.0...v3.51.0
 [3.50.0]: https://github.com/bitmovin/bitmovin-player-ui/compare/v3.49.0...v3.50.0
@@ -878,0 +884,0 @@ [3.49.0]: https://github.com/bitmovin/bitmovin-player-ui/compare/v3.48.0...v3.49.0

dist/js/framework/main.js

@@ -5,3 +5,3 @@ "use strict";
 exports.ReplayButton = exports.SettingsPanelItem = exports.SubtitleSettingsPanelPage = exports.SettingsPanelPageOpenButton = exports.SettingsPanelPageBackButton = exports.SettingsPanelPage = exports.AudioTrackListBox = exports.SubtitleListBox = exports.ListBox = exports.SubtitleSettingsResetButton = exports.WindowOpacitySelectBox = exports.WindowColorSelectBox = exports.SubtitleSettingsLabel = exports.SubtitleSettingSelectBox = exports.FontSizeSelectBox = exports.FontOpacitySelectBox = exports.FontFamilySelectBox = exports.FontColorSelectBox = exports.CharacterEdgeSelectBox = exports.BackgroundOpacitySelectBox = exports.BackgroundColorSelectBox = exports.Spacer = exports.PictureInPictureToggleButton = exports.VolumeSlider = exports.AirPlayToggleButton = exports.MetadataLabelContent = exports.MetadataLabel = exports.CloseButton = exports.PlaybackToggleOverlay = exports.CastUIContainer = exports.BufferingOverlay = exports.HugeReplayButton = exports.PlaybackSpeedSelectBox = exports.AdClickOverlay = exports.AdMessageLabel = exports.AdSkipButton = exports.ClickOverlay = void 0;
-exports.version = '3.51.0';
+exports.version = '3.52.0';
 // Management
@@ -8,0 +8,0 @@ var uimanager_1 = require("./uimanager");

dist/js/framework/spatialnavigation/navigationgroup.js

@@ -79,2 +79,13 @@ "use strict";
     NavigationGroup.prototype.handleNavigation = function (direction) {
+        if (!this.activeElement) {
+            // If we do not have an active element, the active element has been disabled by a mouseleave
+            // event. We should continue the navigation at the exact place where we left off.
+            if (this.activeElementBeforeDisable) {
+                this.focusElement(this.activeElementBeforeDisable);
+            }
+            else {
+                this.focusFirstElement();
+            }
+            return;
+        }
         this.handleInput(direction, this.defaultNavigationHandler, this.onNavigation);
@@ -126,5 +137,10 @@ };
         var removeEventListenerFunctions = (0, gethtmlelementsfromcomponents_1.getHtmlElementsFromComponents)(this.components).map(function (htmlElem) {
-            var listener = _this.focusElement.bind(_this, htmlElem);
-            _this.eventSubscriber.on(htmlElem, 'mouseenter', listener);
-            return function () { return _this.eventSubscriber.off(htmlElem, 'mouseenter', listener); };
+            var enterListener = _this.focusElement.bind(_this, htmlElem);
+            var exitListener = function () { return _this.disable(); };
+            _this.eventSubscriber.on(htmlElem, 'mouseenter', enterListener);
+            _this.eventSubscriber.on(htmlElem, 'mouseleave', exitListener);
+            return function () {
+                _this.eventSubscriber.off(htmlElem, 'mouseenter', enterListener);
+                _this.eventSubscriber.off(htmlElem, 'mouseleave', exitListener);
+            };
         });
@@ -131,0 +147,0 @@ this.removeElementHoverEventListeners = function () { return removeEventListenerFunctions.forEach(function (fn) { return fn(); }); };

package.json

 {
   "name": "bitmovin-player-ui",
-  "version": "3.51.0",
+  "version": "3.52.0",
   "description": "Bitmovin Player UI Framework",
@@ -5,0 +5,0 @@ "main": "./dist/js/framework/main.js",

spec/spatialnavigation/navigationgroup.spec.ts

@@ -76,2 +76,3 @@ import { NavigationGroup } from '../../src/ts/spatialnavigation/navigationgroup';
     it('should focus element found by algorithm', () => {
+      rootNavigationGroup['activeElement'] = getFirstDomElement(playbackToggleButtonMock);
       rootNavigationGroup.handleNavigation(Direction.DOWN);
@@ -82,2 +83,11 @@
 
+    it('should default to the last selected item when there is no active item', () => {
+      rootNavigationGroup['activeElementBeforeDisable'] = subtitleToggleButtonHTML;
+      rootNavigationGroup['activeElement'] = undefined;
+
+      rootNavigationGroup.handleNavigation(Direction.LEFT);
+      
+      expect(subtitleToggleButtonHTML.focus).toHaveBeenCalled();
+    });
+
     describe('onNavigation', () => {
@@ -84,0 +94,0 @@ it('should not call default navigation handler if propagation was stopped from the outside', () => {

src/ts/spatialnavigation/navigationgroup.ts

@@ -113,2 +113,12 @@ import { Container } from '../components/container';
   public handleNavigation(direction: Direction): void {
+    if (!this.activeElement) {
+      // If we do not have an active element, the active element has been disabled by a mouseleave
+      // event. We should continue the navigation at the exact place where we left off.
+      if (this.activeElementBeforeDisable) {
+        this.focusElement(this.activeElementBeforeDisable);
+      } else {
+        this.focusFirstElement();
+      }
+      return;
+    }
     this.handleInput(direction, this.defaultNavigationHandler, this.onNavigation);
@@ -164,7 +174,12 @@ }
     const removeEventListenerFunctions = getHtmlElementsFromComponents(this.components).map(htmlElem => {
-      const listener = this.focusElement.bind(this, htmlElem);
+      const enterListener = this.focusElement.bind(this, htmlElem);
+      const exitListener = () => this.disable();
 
-      this.eventSubscriber.on(htmlElem, 'mouseenter', listener);
+      this.eventSubscriber.on(htmlElem, 'mouseenter', enterListener);
+      this.eventSubscriber.on(htmlElem, 'mouseleave', exitListener);
 
-      return () => this.eventSubscriber.off(htmlElem, 'mouseenter', listener);
+      return () => {
+        this.eventSubscriber.off(htmlElem, 'mouseenter', enterListener);
+        this.eventSubscriber.off(htmlElem, 'mouseleave', exitListener);
+      };
     });
@@ -171,0 +186,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5843353

increased by0.12%

Lines of code

57302

increased by0.1%

No dependency changes