bitmovin-player-ui
Advanced tools
Comparing version 3.24.0 to 3.25.0
@@ -7,2 +7,13 @@ # Change Log | ||
## [3.25.0] | ||
### Added | ||
- Build step to publish releases to npm via CI | ||
### Added | ||
- Support for Mobile V3 `PlayerError` and `SourceError` events | ||
### Fixed | ||
- Controls' focus highlighting is shown in case of non-keyboard interaction on some browsers/platforms | ||
## [3.24.0] - 2021-02-16 | ||
@@ -711,2 +722,3 @@ | ||
[3.25.0]: https://github.com/bitmovin/bitmovin-player-ui/compare/v3.24.0...v3.25.0 | ||
[3.24.0]: https://github.com/bitmovin/bitmovin-player-ui/compare/v3.23.0...v3.24.0 | ||
@@ -713,0 +725,0 @@ [3.23.0]: https://github.com/bitmovin/bitmovin-player-ui/compare/v3.22.0...v3.23.0 |
import { ContainerConfig, Container } from './container'; | ||
import { UIInstanceManager } from '../uimanager'; | ||
import { ErrorEvent, PlayerAPI } from 'bitmovin-player'; | ||
import { MobileV3PlayerAPI, MobileV3PlayerErrorEvent } from '../mobilev3playerapi'; | ||
export interface ErrorMessageTranslator { | ||
(error: ErrorEvent): string; | ||
(error: ErrorEvent | MobileV3PlayerErrorEvent): string; | ||
} | ||
@@ -77,4 +78,4 @@ export interface ErrorMessageMap { | ||
constructor(config?: ErrorMessageOverlayConfig); | ||
configure(player: PlayerAPI, uimanager: UIInstanceManager): void; | ||
configure(player: PlayerAPI | MobileV3PlayerAPI, uimanager: UIInstanceManager): void; | ||
release(): void; | ||
} |
@@ -21,2 +21,3 @@ "use strict"; | ||
var errorutils_1 = require("../errorutils"); | ||
var mobilev3playerapi_1 = require("../mobilev3playerapi"); | ||
/** | ||
@@ -43,23 +44,6 @@ * Overlays the player and displays error messages. | ||
var config = this.getConfig(); | ||
player.on(player.exports.PlayerEvent.Error, function (event) { | ||
var message = errorutils_1.ErrorUtils.defaultErrorMessageTranslator(event); | ||
// errorMessages configured in `UIConfig` take precedence `ErrorMessageOverlayConfig` | ||
var errorMessages = uimanager.getConfig().errorMessages || config.messages; | ||
// Process message vocabularies | ||
if (errorMessages) { | ||
if (typeof errorMessages === 'function') { | ||
// Translation function for all errors | ||
message = errorMessages(event); | ||
} | ||
else if (errorMessages[event.code]) { | ||
// It's not a translation function, so it must be a map of strings or translation functions | ||
var customMessage = errorMessages[event.code]; | ||
if (typeof customMessage === 'string') { | ||
message = customMessage; | ||
} | ||
else { | ||
// The message is a translation function, so we call it | ||
message = customMessage(event); | ||
} | ||
} | ||
var handleErrorMessage = function (event, message) { | ||
var customizedMessage = customizeErrorMessage(uimanager.getConfig().errorMessages || config.messages, event); | ||
if (customizedMessage) { | ||
message = customizedMessage; | ||
} | ||
@@ -69,3 +53,17 @@ _this.errorLabel.setText(message); | ||
_this.show(); | ||
}); | ||
}; | ||
if (mobilev3playerapi_1.isMobileV3PlayerAPI(player)) { | ||
var errorEventHandler = function (event) { | ||
var message = errorutils_1.ErrorUtils.defaultMobileV3ErrorMessageTranslator(event); | ||
handleErrorMessage(event, message); | ||
}; | ||
player.on(mobilev3playerapi_1.MobileV3PlayerEvent.PlayerError, errorEventHandler); | ||
player.on(mobilev3playerapi_1.MobileV3PlayerEvent.SourceError, errorEventHandler); | ||
} | ||
else { | ||
player.on(player.exports.PlayerEvent.Error, function (event) { | ||
var message = errorutils_1.ErrorUtils.defaultWebErrorMessageTranslator(event); | ||
handleErrorMessage(event, message); | ||
}); | ||
} | ||
player.on(player.exports.PlayerEvent.SourceLoaded, function (event) { | ||
@@ -86,1 +84,16 @@ if (_this.isShown()) { | ||
exports.ErrorMessageOverlay = ErrorMessageOverlay; | ||
function customizeErrorMessage(errorMessages, event) { | ||
if (!errorMessages) { | ||
return undefined; | ||
} | ||
// Process message vocabularies | ||
if (typeof errorMessages === 'function') { | ||
// Translation function for all errors | ||
return errorMessages(event); | ||
} | ||
if (errorMessages[event.code]) { | ||
// It's not a translation function, so it must be a map of strings or translation functions | ||
var customMessage = errorMessages[event.code]; | ||
return typeof customMessage === 'string' ? customMessage : customMessage(event); | ||
} | ||
} |
@@ -97,3 +97,3 @@ "use strict"; | ||
else { | ||
this.frameUpdateHandlerId = setTimeout(this.renderFrame.bind(this), this.frameInterval); | ||
this.frameUpdateHandlerId = window.setTimeout(this.renderFrame.bind(this), this.frameInterval); | ||
} | ||
@@ -100,0 +100,0 @@ }; |
import { ErrorMessageMap, ErrorMessageTranslator } from './components/errormessageoverlay'; | ||
import { MobileV3PlayerErrorEvent, MobileV3SourceErrorEvent } from './mobilev3playerapi'; | ||
export declare namespace ErrorUtils { | ||
const defaultErrorMessages: ErrorMessageMap; | ||
const defaultErrorMessageTranslator: ErrorMessageTranslator; | ||
const defaultMobileV3ErrorMessageTranslator: (error: MobileV3PlayerErrorEvent | MobileV3SourceErrorEvent) => string; | ||
const defaultWebErrorMessageTranslator: ErrorMessageTranslator; | ||
} |
@@ -69,3 +69,6 @@ "use strict"; | ||
}; | ||
ErrorUtils.defaultErrorMessageTranslator = function (error) { | ||
ErrorUtils.defaultMobileV3ErrorMessageTranslator = function (error) { | ||
return error.message; | ||
}; | ||
ErrorUtils.defaultWebErrorMessageTranslator = function (error) { | ||
var errorMessage = ErrorUtils.defaultErrorMessages[error.code]; | ||
@@ -72,0 +75,0 @@ if (errorMessage) { |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.version = void 0; | ||
exports.version = '3.24.0'; | ||
exports.version = '3.25.0'; | ||
// Management | ||
@@ -6,0 +6,0 @@ var uimanager_1 = require("./uimanager"); |
@@ -86,2 +86,3 @@ import { UIContainer } from './components/uicontainer'; | ||
private managerPlayerWrapper; | ||
private focusVisibilityTracker; | ||
private events; | ||
@@ -242,3 +243,3 @@ /** | ||
*/ | ||
interface WrappedPlayer extends PlayerAPI { | ||
export interface WrappedPlayer extends PlayerAPI { | ||
/** | ||
@@ -270,2 +271,1 @@ * Fires an event on the player that targets all handlers in the UI but never enters the real player. | ||
} | ||
export {}; |
@@ -44,2 +44,4 @@ "use strict"; | ||
var i18n_1 = require("./localization/i18n"); | ||
var focusvisibilitytracker_1 = require("./focusvisibilitytracker"); | ||
var mobilev3playerapi_1 = require("./mobilev3playerapi"); | ||
var UIManager = /** @class */ (function () { | ||
@@ -102,7 +104,8 @@ function UIManager(player, playerUiOrUiVariants, uiconfig) { | ||
}; | ||
this.managerPlayerWrapper.getPlayer().on(this.player.exports.PlayerEvent.SourceLoaded, updateSource); | ||
var wrappedPlayer = this.managerPlayerWrapper.getPlayer(); | ||
wrappedPlayer.on(this.player.exports.PlayerEvent.SourceLoaded, updateSource); | ||
// The PlaylistTransition event is only available on Mobile v3 for now. | ||
// This event is fired when a new source becomes active in the player. | ||
if (this.player.exports.PlayerEvent.PlaylistTransition) { | ||
this.managerPlayerWrapper.getPlayer().on(this.player.exports.PlayerEvent.PlaylistTransition, updateSource); | ||
if (mobilev3playerapi_1.isMobileV3PlayerAPI(wrappedPlayer)) { | ||
wrappedPlayer.on(mobilev3playerapi_1.MobileV3PlayerEvent.PlaylistTransition, updateSource); | ||
} | ||
@@ -233,2 +236,3 @@ if (uiconfig.container) { | ||
} | ||
this.focusVisibilityTracker = new focusvisibilitytracker_1.FocusVisibilityTracker('bmpui'); | ||
// Initialize the UI | ||
@@ -372,2 +376,3 @@ resolveUiVariant(null); | ||
this.managerPlayerWrapper.clearEventHandlers(); | ||
this.focusVisibilityTracker.release(); | ||
}; | ||
@@ -374,0 +379,0 @@ Object.defineProperty(UIManager.prototype, "onUiVariantResolve", { |
{ | ||
"name": "bitmovin-player-ui", | ||
"version": "3.24.0", | ||
"version": "3.25.0", | ||
"description": "Bitmovin Player UI Framework", | ||
@@ -23,2 +23,3 @@ "main": "./dist/js/framework/main.js", | ||
"@types/jest": "^24.0.11", | ||
"@types/jsdom": "^12.2.4", | ||
"autoprefixer": "^6.5.2", | ||
@@ -25,0 +26,0 @@ "bitmovin-player": "^8.28.0", |
import { InternalUIConfig, PlayerWrapper, UIManager } from '../src/ts/uimanager'; | ||
import { PlayerAPI } from 'bitmovin-player'; | ||
import { MockHelper, TestingPlayerAPI } from './helper/MockHelper'; | ||
import { MobileV3PlayerEvent } from '../src/ts/mobilev3playerapi'; | ||
@@ -78,3 +79,5 @@ jest.mock('../src/ts/dom'); | ||
beforeEach(() => { | ||
(playerMock.exports.PlayerEvent as any).PlaylistTransition = 'playlisttransition'; | ||
(playerMock.exports.PlayerEvent as any).SourceError = MobileV3PlayerEvent.SourceError; | ||
(playerMock.exports.PlayerEvent as any).PlayerError = MobileV3PlayerEvent.PlayerError; | ||
(playerMock.exports.PlayerEvent as any).PlaylistTransition = MobileV3PlayerEvent.PlaylistTransition; | ||
}); | ||
@@ -81,0 +84,0 @@ it('attaches the listener', () => { |
@@ -5,7 +5,11 @@ import {ContainerConfig, Container} from './container'; | ||
import {TvNoiseCanvas} from './tvnoisecanvas'; | ||
import {ErrorUtils} from '../errorutils'; | ||
import { ErrorUtils } from '../errorutils'; | ||
import { ErrorEvent, PlayerAPI, PlayerEventBase } from 'bitmovin-player'; | ||
import { | ||
isMobileV3PlayerAPI, | ||
MobileV3PlayerAPI, MobileV3PlayerErrorEvent, MobileV3PlayerEvent, MobileV3SourceErrorEvent, | ||
} from '../mobilev3playerapi'; | ||
export interface ErrorMessageTranslator { | ||
(error: ErrorEvent): string; | ||
(error: ErrorEvent | MobileV3PlayerErrorEvent): string; | ||
} | ||
@@ -99,3 +103,3 @@ | ||
configure(player: PlayerAPI, uimanager: UIInstanceManager): void { | ||
configure(player: PlayerAPI | MobileV3PlayerAPI, uimanager: UIInstanceManager): void { | ||
super.configure(player, uimanager); | ||
@@ -105,23 +109,9 @@ | ||
player.on(player.exports.PlayerEvent.Error, (event: ErrorEvent) => { | ||
let message = ErrorUtils.defaultErrorMessageTranslator(event); | ||
// errorMessages configured in `UIConfig` take precedence `ErrorMessageOverlayConfig` | ||
let errorMessages = uimanager.getConfig().errorMessages || config.messages; | ||
// Process message vocabularies | ||
if (errorMessages) { | ||
if (typeof errorMessages === 'function') { | ||
// Translation function for all errors | ||
message = errorMessages(event); | ||
} else if (errorMessages[event.code]) { | ||
// It's not a translation function, so it must be a map of strings or translation functions | ||
let customMessage = errorMessages[event.code]; | ||
if (typeof customMessage === 'string') { | ||
message = customMessage; | ||
} else { | ||
// The message is a translation function, so we call it | ||
message = customMessage(event); | ||
} | ||
} | ||
const handleErrorMessage = ( | ||
event: ErrorEvent | MobileV3SourceErrorEvent | MobileV3PlayerErrorEvent, | ||
message: string, | ||
) => { | ||
const customizedMessage = customizeErrorMessage(uimanager.getConfig().errorMessages || config.messages, event); | ||
if (customizedMessage) { | ||
message = customizedMessage; | ||
} | ||
@@ -132,4 +122,19 @@ | ||
this.show(); | ||
}); | ||
}; | ||
if (isMobileV3PlayerAPI(player)) { | ||
const errorEventHandler = (event: MobileV3SourceErrorEvent | MobileV3PlayerErrorEvent) => { | ||
const message = ErrorUtils.defaultMobileV3ErrorMessageTranslator(event); | ||
handleErrorMessage(event, message); | ||
}; | ||
player.on(MobileV3PlayerEvent.PlayerError, errorEventHandler); | ||
player.on(MobileV3PlayerEvent.SourceError, errorEventHandler); | ||
} else { | ||
player.on(player.exports.PlayerEvent.Error, (event: ErrorEvent) => { | ||
let message = ErrorUtils.defaultWebErrorMessageTranslator(event); | ||
handleErrorMessage(event, message); | ||
}); | ||
} | ||
player.on(player.exports.PlayerEvent.SourceLoaded, (event: PlayerEventBase) => { | ||
@@ -149,2 +154,23 @@ if (this.isShown()) { | ||
} | ||
} | ||
} | ||
function customizeErrorMessage( | ||
errorMessages: ErrorMessageTranslator | ErrorMessageMap, | ||
event: ErrorEvent | MobileV3PlayerErrorEvent | MobileV3SourceErrorEvent, | ||
): string | undefined { | ||
if (!errorMessages) { | ||
return undefined; | ||
} | ||
// Process message vocabularies | ||
if (typeof errorMessages === 'function') { | ||
// Translation function for all errors | ||
return errorMessages(event); | ||
} | ||
if (errorMessages[event.code]) { | ||
// It's not a translation function, so it must be a map of strings or translation functions | ||
const customMessage = errorMessages[event.code]; | ||
return typeof customMessage === 'string' ? customMessage : customMessage(event); | ||
} | ||
} |
@@ -100,5 +100,5 @@ import {Component, ComponentConfig} from './component'; | ||
} else { | ||
this.frameUpdateHandlerId = setTimeout(this.renderFrame.bind(this), this.frameInterval); | ||
this.frameUpdateHandlerId = window.setTimeout(this.renderFrame.bind(this), this.frameInterval); | ||
} | ||
} | ||
} |
import {ErrorMessageMap, ErrorMessageTranslator} from './components/errormessageoverlay'; | ||
import { ErrorEvent } from 'bitmovin-player'; | ||
import { MobileV3PlayerErrorEvent, MobileV3SourceErrorEvent } from './mobilev3playerapi'; | ||
@@ -70,3 +71,7 @@ export namespace ErrorUtils { | ||
export const defaultErrorMessageTranslator: ErrorMessageTranslator = (error: ErrorEvent) => { | ||
export const defaultMobileV3ErrorMessageTranslator = (error: MobileV3PlayerErrorEvent | MobileV3SourceErrorEvent) => { | ||
return error.message; | ||
}; | ||
export const defaultWebErrorMessageTranslator: ErrorMessageTranslator = (error: ErrorEvent) => { | ||
const errorMessage = ErrorUtils.defaultErrorMessages[error.code]; | ||
@@ -73,0 +78,0 @@ |
@@ -14,2 +14,4 @@ import {UIContainer} from './components/uicontainer'; | ||
import { i18n, CustomVocabulary, Vocabularies } from './localization/i18n'; | ||
import { FocusVisibilityTracker } from './focusvisibilitytracker'; | ||
import { isMobileV3PlayerAPI, MobileV3PlayerAPI, MobileV3PlayerEvent } from './mobilev3playerapi'; | ||
@@ -99,2 +101,3 @@ export interface LocalizationConfig { | ||
private managerPlayerWrapper: PlayerWrapper; | ||
private focusVisibilityTracker: FocusVisibilityTracker; | ||
@@ -195,11 +198,10 @@ private events = { | ||
this.managerPlayerWrapper.getPlayer().on(this.player.exports.PlayerEvent.SourceLoaded, updateSource); | ||
const wrappedPlayer = this.managerPlayerWrapper.getPlayer(); | ||
wrappedPlayer.on(this.player.exports.PlayerEvent.SourceLoaded, updateSource); | ||
// The PlaylistTransition event is only available on Mobile v3 for now. | ||
// This event is fired when a new source becomes active in the player. | ||
if ((this.player.exports.PlayerEvent as any).PlaylistTransition) { | ||
this.managerPlayerWrapper.getPlayer().on( | ||
(this.player.exports.PlayerEvent as any).PlaylistTransition, | ||
updateSource, | ||
); | ||
if (isMobileV3PlayerAPI(wrappedPlayer)) { | ||
wrappedPlayer.on(MobileV3PlayerEvent.PlaylistTransition, updateSource); | ||
} | ||
@@ -337,2 +339,4 @@ | ||
this.focusVisibilityTracker = new FocusVisibilityTracker('{{PREFIX}}'); | ||
// Initialize the UI | ||
@@ -496,2 +500,3 @@ resolveUiVariant(null); | ||
this.managerPlayerWrapper.clearEventHandlers(); | ||
this.focusVisibilityTracker.release(); | ||
} | ||
@@ -765,3 +770,3 @@ | ||
*/ | ||
interface WrappedPlayer extends PlayerAPI { | ||
export interface WrappedPlayer extends PlayerAPI { | ||
/** | ||
@@ -768,0 +773,0 @@ * Fires an event on the player that targets all handlers in the UI but never enters the real player. |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
4389141
435
49049
33