Skip to content

Module: src/ui/Notifications

The Notifications component provides a centralized UI for showing messages triggered by the player or other components. It supports different notification types (e.g., info, warning, error or success), custom content nodes, and optional auto-hide behavior.

Version
1.0.0
Author
Frank Kudermann - alphanull
License
MIT
Requires
DomSmith
Source
Notifications.js, line 12

Constructor

new Notifications(player, parent)

Creates a new instance of the Notifications component.

Parameters:
Name Type Description
player Player

Reference to the VisionPlayer instance.
parent UI

Reference to the parent instance, in this case the UI.

Members

Holds the instance configuration for this component.

Properties
Name Type Attributes Default Description
showFileOnError boolean optional false

Shows the media file name in errors.
showMessageOnError boolean optional false

Show additional message in errors, useful for debugging.
Type
Object
Source
Notifications.js, line 19

Reference to the main player instance.

Type
Player
Source
Notifications.js, line 28

The DomSmith instance used to create the notification UI.

Type
DomSmith
Source
Notifications.js, line 34

The DomSmith instance holding the actual notification content.

Type
DomSmith
Source
Notifications.js, line 40

Holds tokens of subscriptions to player events, for later unsubscribe.

Type
Array<number>
Source
Notifications.js, line 46

Internal queue of notifications to show.

Type
Array<Notifications~notificationData>
Source
Notifications.js, line 52

The current state of the notification: "hidden", "visible", or "hiding".

Type
string
Source
Notifications.js, line 58

Holds the ID of the timeout which causes the notification to autohide.

Type
number
Source
Notifications.js, line 64

Methods

private #show(notifyDataArgopt)

Shows a notification (or queues it if there is another active). If no argument is given, tries to show the first queued item.

Parameters:
Name Type Attributes Description
notifyDataArg Notifications~notificationData optional

The notification data to show.
Source
Notifications.js, line 104

private #hide()

Hides the notification, usually after a certain timeout Notifications might also be hidden if the players recovers from an error state, for example by loading another media file or if the video is playable again.

Listens
media/canplay
media/play
Source
Notifications.js, line 209

private #hidden()

Triggered when the hide transition finishes. Removes the item from the queue and if any are left, tries to show the next one.

Source
Notifications.js, line 226

private #onMediaError(event)

Handler for media/error events. This tries to map the error code to a more user-friendly message and triggers a notification with the error details.

Parameters:
Name Type Description
event Object

The error event object.

Parameters:
Name Type Description
error Object

The underlying media error.
Listens
media/error
Source
Notifications.js, line 246

private #onDataError(message)

Handler listing to data errors, invokes the show() method to display an appropriate notification.

Parameters:
Name Type Description
message Object

A message Object.

Parameters:
Name Type Description
code string

The message code ('DATA_ERR').
message string

The message to display.
Listens
data/error
Source
Notifications.js, line 299

private #onNotification(notifyData, topic)

Handler listing to notification events, invokes the show() method to display an appropriate notification.

Parameters:
Name Type Description
notifyData Notifications~notificationData

The data and configuration Object.
topic string

Publisher topic.
Listens
notification
Source
Notifications.js, line 316

destroy()

This method removes all events, subscriptions and DOM nodes created by this component.

Source
Notifications.js, line 339

Type Definitions

Represents the data used to show a notification in the UI.

Properties
Name Type Attributes Description
type string optional

The notification type (e.g., "error", "info", etc.).
title string optional

The title of the notification.
message string optional

The main message body of the notification.
messageSecondary string optional

Additional / secondary message text.
content HTMLElement optional

Optional custom DOM node to display in the notification.
options Object optional

Additional options.

Properties
Name Type Attributes Description
timeout number optional

Time (in seconds) after which the notification auto-hides.
Type
Object
Source
Notifications.js, line 351

Events

notification

This event triggeres a notification to be displayed.

Parameters:
Name Type Description
notificationData Notifications~notificationData

Notification data to display.
Listeners
Notifications#onNotification
Source
Notifications.js, line 363