bitmovin-player-ui - npm Package Compare versions

Comparing version 2.10.0 to 2.10.1

CHANGELOG.md

@@ -7,2 +7,12 @@ # Change Log
 
+## [2.10.1]
+
+### Changed
+- Removed `VolumeControlButton`'s `VolumeSlider` slide-in animation in the legacy skin to fix the slider knob at 100% bug
+
+### Fixed
+- Vertical `VolumeSlider` knob in legacy skin was not visible when set to a low volume 
+- Legacy skin's `VolumeSlider` knob was always rendered at 100% when appearing after being hidden
+- Avoid `ItemSelectionList` DOM recreation on item selection to avoid unexpected events (e.g. `mouseenter`)
+
 ## [2.10.0]
@@ -250,2 +260,3 @@
 
+[2.10.1]: https://github.com/bitmovin/bitmovin-player-ui/compare/v2.10.0...v2.10.1
 [2.10.0]: https://github.com/bitmovin/bitmovin-player-ui/compare/v2.9.0...v2.10.0
@@ -252,0 +263,0 @@ [2.9.0]: https://github.com/bitmovin/bitmovin-player-ui/compare/v2.8.3...v2.9.0

dist/js/framework/components/audiotrackselectbox.js

@@ -55,2 +55,4 @@ "use strict";
         player.addEventHandler(player.EVENT.ON_READY, updateAudioTracks);
+        // Update tracks when the period within a source changes
+        player.addEventHandler(player.EVENT.ON_PERIOD_SWITCHED, updateAudioTracks);
         // Update tracks when a track is added or removed (since player 7.1.4)
@@ -57,0 +59,0 @@ if (player.EVENT.ON_AUDIO_ADDED && player.EVENT.ON_AUDIO_REMOVED) {

dist/js/framework/components/itemselectionlist.d.ts

 import { ListSelector, ListSelectorConfig } from './listselector';
 import { DOM } from '../dom';
 export declare class ItemSelectionList extends ListSelector<ListSelectorConfig> {
+    private static readonly CLASS_SELECTED;
     private listElement;
@@ -5,0 +6,0 @@ constructor(config?: ListSelectorConfig);

dist/js/framework/components/itemselectionlist.js

@@ -43,18 +43,39 @@ "use strict";
         this.listElement.empty();
+        var selectedListItem = null;
+        var selectItem = function (listItem) {
+            listItem.addClass(_this.prefixCss(ItemSelectionList.CLASS_SELECTED));
+        };
+        var deselectItem = function (listItem) {
+            listItem.removeClass(_this.prefixCss(ItemSelectionList.CLASS_SELECTED));
+        };
         var _loop_1 = function (item) {
-            var optionElement = new dom_1.DOM('li', {
+            var listItem = new dom_1.DOM('li', {
                 'type': 'li',
                 'class': this_1.prefixCss('ui-selectionlistitem'),
             }).append(new dom_1.DOM('a', {}).html(item.label));
-            if (selectedValue == null) {
-                optionElement.addClass(this_1.prefixCss('selected'));
-                selectedValue = item.key; // Ensure no other item get selected
+            if (!selectedListItem) {
+                if (selectedValue == null) {
+                    selectedListItem = listItem;
+                }
+                else if (String(selectedValue) === item.key) {
+                    selectedListItem = listItem;
+                }
             }
-            if (item.key === String(selectedValue)) {
-                optionElement.addClass(this_1.prefixCss('selected'));
+            // Handle list item selections
+            listItem.on('click', function () {
+                // Deselect the previous item (if there was a selected item)
+                if (selectedListItem) {
+                    deselectItem(selectedListItem);
+                }
+                // Select the clicked item
+                selectedListItem = listItem;
+                selectItem(listItem);
+                // Fire the event
+                _this.onItemSelectedEvent(item.key, false);
+            });
+            // Select default item
+            if (selectedListItem) {
+                selectItem(selectedListItem);
             }
-            optionElement.on('click', function () {
-                _this.onItemSelectedEvent(item.key, true);
-            });
-            this_1.listElement.append(optionElement);
+            this_1.listElement.append(listItem);
         };
@@ -82,4 +103,5 @@ var this_1 = this;
     };
+    ItemSelectionList.CLASS_SELECTED = 'selected';
     return ItemSelectionList;
 }(listselector_1.ListSelector));
 exports.ItemSelectionList = ItemSelectionList;

dist/js/framework/components/seekbar.js

@@ -572,5 +572,6 @@ "use strict";
         // Set position of the marker
-        var px = (this.config.vertical ? this.seekBar.height() : this.seekBar.width()) / 100 * percent;
+        var totalSize = (this.config.vertical ? (this.seekBar.height() - this.seekBarPlaybackPositionMarker.height()) : this.seekBar.width());
+        var px = (totalSize) / 100 * percent;
         if (this.config.vertical) {
-            px = this.seekBar.height() - px;
+            px = this.seekBar.height() - px - this.seekBarPlaybackPositionMarker.height();
         }
@@ -577,0 +578,0 @@ var style = this.config.vertical ?

dist/js/framework/components/subtitleselectbox.js

@@ -26,2 +26,8 @@ "use strict";
         _super.prototype.configure.call(this, player, uimanager);
+        var selectCurrentSubtitle = function () {
+            var currentSubtitle = player.getSubtitle();
+            if (currentSubtitle) {
+                _this.selectItem(currentSubtitle.id);
+            }
+        };
         var updateSubtitles = function () {
@@ -33,2 +39,4 @@ _this.clearItems();
             }
+            // Select the correct subtitle after the subtitles have been added
+            selectCurrentSubtitle();
         };
@@ -39,19 +47,5 @@ this.onItemSelected.subscribe(function (sender, value) {
         // React to API events
-        player.addEventHandler(player.EVENT.ON_SUBTITLE_ADDED, function (event) {
-            if (_this.itemCount() === 0) {
-                // When a subtitle is dynamically added and it is the first one, we add all available subtitles which
-                // includes the "off"-item and makes the subtitle select box visible.
-                updateSubtitles();
-            }
-            else {
-                // If the subtitle select box is already initialized, we just add the new one to the existing ones.
-                _this.addItem(event.subtitle.id, event.subtitle.label);
-            }
-        });
-        player.addEventHandler(player.EVENT.ON_SUBTITLE_CHANGED, function (event) {
-            _this.selectItem(event.targetSubtitle.id);
-        });
-        player.addEventHandler(player.EVENT.ON_SUBTITLE_REMOVED, function (event) {
-            _this.removeItem(event.subtitleId);
-        });
+        player.addEventHandler(player.EVENT.ON_SUBTITLE_ADDED, updateSubtitles);
+        player.addEventHandler(player.EVENT.ON_SUBTITLE_CHANGED, selectCurrentSubtitle);
+        player.addEventHandler(player.EVENT.ON_SUBTITLE_REMOVED, updateSubtitles);
         // Update subtitles when source goes away
@@ -61,2 +55,4 @@ player.addEventHandler(player.EVENT.ON_SOURCE_UNLOADED, updateSubtitles);
         player.addEventHandler(player.EVENT.ON_READY, updateSubtitles);
+        // Update subtitles when the period within a source changes
+        player.addEventHandler(player.EVENT.ON_PERIOD_SWITCHED, updateSubtitles);
         // Populate subtitles at startup
@@ -63,0 +59,0 @@ updateSubtitles();

dist/js/framework/main.js

@@ -96,3 +96,3 @@ "use strict";
 var playerui = {
-    version: '2.10.0',
+    version: '2.10.1',
     // Management
@@ -99,0 +99,0 @@ UIManager: uimanager_1.UIManager,

package.json

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

src/ts/components/audiotrackselectbox.ts

@@ -52,2 +52,4 @@ import {SelectBox} from './selectbox';
     player.addEventHandler(player.EVENT.ON_READY, updateAudioTracks);
+    // Update tracks when the period within a source changes
+    player.addEventHandler(player.EVENT.ON_PERIOD_SWITCHED, updateAudioTracks);
     // Update tracks when a track is added or removed (since player 7.1.4)
@@ -54,0 +56,0 @@ if (player.EVENT.ON_AUDIO_ADDED && player.EVENT.ON_AUDIO_REMOVED) {

src/ts/components/itemselectionlist.ts

@@ -6,2 +6,4 @@ import {ListSelector, ListSelectorConfig} from './listselector';
 
+  private static readonly CLASS_SELECTED = 'selected';
+
   private listElement: DOM;
@@ -38,4 +40,14 @@
 
+    let selectedListItem: DOM = null;
+
+    const selectItem = (listItem: DOM) => {
+      listItem.addClass(this.prefixCss(ItemSelectionList.CLASS_SELECTED));
+    };
+
+    const deselectItem = (listItem: DOM) => {
+      listItem.removeClass(this.prefixCss(ItemSelectionList.CLASS_SELECTED));
+    };
+
     for (let item of this.items) {
-      let optionElement = new DOM('li', {
+      let listItem = new DOM('li', {
         'type': 'li',
@@ -46,16 +58,31 @@ 'class': this.prefixCss('ui-selectionlistitem'),
 
-      if (selectedValue == null) { // If there is no pre-selected value, select the first one
-        optionElement.addClass(this.prefixCss('selected'));
-        selectedValue = item.key; // Ensure no other item get selected
+      if (!selectedListItem) {
+        if (selectedValue == null) { // If there is no pre-selected value, select the first one
+          selectedListItem = listItem;
+        } else if (String(selectedValue) === item.key) { // convert selectedValue to string to catch 'null'/null case
+          selectedListItem = listItem;
+        }
       }
 
-      if (item.key === String(selectedValue)) { // convert selectedValue to string to catch 'null'/null case
-        optionElement.addClass(this.prefixCss('selected'));
-      }
+      // Handle list item selections
+      listItem.on('click', () => {
+        // Deselect the previous item (if there was a selected item)
+        if (selectedListItem) {
+          deselectItem(selectedListItem);
+        }
 
-      optionElement.on('click', () => {
-        this.onItemSelectedEvent(item.key, true);
+        // Select the clicked item
+        selectedListItem = listItem;
+        selectItem(listItem);
+
+        // Fire the event
+        this.onItemSelectedEvent(item.key, false);
       });
 
-      this.listElement.append(optionElement);
+      // Select default item
+      if (selectedListItem) {
+        selectItem(selectedListItem);
+      }
+
+      this.listElement.append(listItem);
     }
@@ -62,0 +89,0 @@ }

src/ts/components/seekbar.ts

@@ -705,5 +705,6 @@ import {Component, ComponentConfig} from './component';
     // Set position of the marker
-    let px = (this.config.vertical ? this.seekBar.height() : this.seekBar.width()) / 100 * percent;
+    let totalSize = (this.config.vertical ? (this.seekBar.height() - this.seekBarPlaybackPositionMarker.height()) : this.seekBar.width());
+    let px = (totalSize) / 100 * percent;
     if (this.config.vertical) {
-      px = this.seekBar.height() - px;
+      px = this.seekBar.height() - px - this.seekBarPlaybackPositionMarker.height();
     }
@@ -854,2 +855,2 @@ let style = this.config.vertical ?
   }
-}
+}

src/ts/components/subtitleselectbox.ts

 import {SelectBox} from './selectbox';
 import {ListSelectorConfig} from './listselector';
 import {UIInstanceManager} from '../uimanager';
-import SubtitleAddedEvent = bitmovin.PlayerAPI.SubtitleAddedEvent;
-import SubtitleChangedEvent = bitmovin.PlayerAPI.SubtitleChangedEvent;
-import SubtitleRemovedEvent = bitmovin.PlayerAPI.SubtitleRemovedEvent;
 
@@ -20,2 +17,10 @@ /**
 
+    let selectCurrentSubtitle = () => {
+      let currentSubtitle = player.getSubtitle();
+
+      if (currentSubtitle) {
+        this.selectItem(currentSubtitle.id);
+      }
+    };
+
     let updateSubtitles = () => {
@@ -27,2 +32,5 @@ this.clearItems();
       }
+
+      // Select the correct subtitle after the subtitles have been added
+      selectCurrentSubtitle();
     };
@@ -35,19 +43,5 @@
     // React to API events
-    player.addEventHandler(player.EVENT.ON_SUBTITLE_ADDED, (event: SubtitleAddedEvent) => {
-      if (this.itemCount() === 0) {
-        // When a subtitle is dynamically added and it is the first one, we add all available subtitles which
-        // includes the "off"-item and makes the subtitle select box visible.
-        updateSubtitles();
-      } else {
-        // If the subtitle select box is already initialized, we just add the new one to the existing ones.
-        this.addItem(event.subtitle.id, event.subtitle.label);
-      }
-    });
-    player.addEventHandler(player.EVENT.ON_SUBTITLE_CHANGED, (event: SubtitleChangedEvent) => {
-      this.selectItem(event.targetSubtitle.id);
-    });
-    player.addEventHandler(player.EVENT.ON_SUBTITLE_REMOVED, (event: SubtitleRemovedEvent) => {
-      this.removeItem(event.subtitleId);
-    });
-
+    player.addEventHandler(player.EVENT.ON_SUBTITLE_ADDED, updateSubtitles);
+    player.addEventHandler(player.EVENT.ON_SUBTITLE_CHANGED, selectCurrentSubtitle);
+    player.addEventHandler(player.EVENT.ON_SUBTITLE_REMOVED, updateSubtitles);
     // Update subtitles when source goes away
@@ -57,2 +51,4 @@ player.addEventHandler(player.EVENT.ON_SOURCE_UNLOADED, updateSubtitles);
     player.addEventHandler(player.EVENT.ON_READY, updateSubtitles);
+    // Update subtitles when the period within a source changes
+    player.addEventHandler(player.EVENT.ON_PERIOD_SWITCHED, updateSubtitles);
 
@@ -59,0 +55,0 @@ // Populate subtitles at startup

src/ts/components/volumeslider.ts

@@ -126,2 +126,2 @@ import {SeekBar, SeekBarConfig} from './seekbar';
   }
-}
+}

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

3560675

increased by0.16%

Lines of code

37159

increased by0.19%

Worsened metrics

Number of package files

412

decreased by-0.24%

No dependency changes