Skip to content

Module: src/selection/File

The File component provides functionality to handle playing local media files. Files can be selected via the standard file selector or by dragging & dropping. It converts the selected files into binary blobs and passes them to the player where they can be played as usual. If more than one file is selected, a corresponding playlist will be automatically generated.

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

Constructor

new File(player, parent, optionsopt)

Creates an instance of the File component.

Parameters:
Name Type Attributes Description
player Player

Reference to the VisionPlayer instance.
parent Controller

The parent container, in this case the controller.
options Object optional

Additional options.

Parameters:
Name Type Attributes Description
apiKey symbol optional

Token for extended access to the player API.

Members

Contains configuration options for how files are handled.

Properties
Name Type Attributes Default Description
fileDrop boolean optional true

Enables drag & drop file upload.
fileSelector boolean optional true

Enables the file selection button in the controller.
fileSelectorAccept boolean optional true

If true, the file picker limits selection to supported extensions (e.g. .mp4, .webm); if false, it accepts any file type, enabling formats such as .mov or .mkv.
Type
Object
Source
File.js, line 23

Reference to the main player instance.

Type
Player
Source
File.js, line 33

Reference to the DomSmith instance for the file selector button.

Type
DomSmith
Source
File.js, line 39

Reference to the DomSmith instance for the drop zone.

Type
DomSmith
Source
File.js, line 45

Holds uploades blobs for later revoking.

Type
Array
Source
File.js, line 51

Methods

private #fileSelected(event)

Handler for file selection via the file input or drag'n'drop event. Creates an array of file objects with properties:

  • title: File name.
  • ext: File extension.
  • src: Blob URL created from the file.
  • type: MIME type of the file. Then sets the media data for the player by creating a playlist of the selcted files.
Parameters:
Name Type Description
event Event

The change event from the file input.
Source
File.js, line 140

private #onZoneDragEnter(event)

Handles the dragenter event on the drop zone. Displays a visual indication that the file can be dropped.

Parameters:
Name Type Description
event DragEvent

The dragenter event.
Listens
dragover
Source
File.js, line 172

private #onZoneDragLeave(event)

Handles the dragleave event on the drop zone. Removes the visual drag indicator.

Parameters:
Name Type Description
event DragEvent

The dragleave event.
Listens
dragleave
Source
File.js, line 191

private #onZoneDrop(event)

Handles the drop, by extracting the associated files from the drop event.

Parameters:
Name Type Description
event DragEvent

The originating drag event.
Listens
drop
Source
File.js, line 205

private #onWinDragOver(event)

Handles the dragenter event on the window. Visually activates the inner drop zone.

Parameters:
Name Type Description
event DragEvent

The dragenter event.
Listens
dragover
Source
File.js, line 224

private #onWinDragLeave(event)

Handles the dragleave event on the window. Visually deactivates the inner drop zone.

Parameters:
Name Type Description
event DragEvent

The dragleave event.
Listens
dragover
Source
File.js, line 239

private #isFileDrag(event) → boolean

Helper function to determine whether the drag event contains files.

Parameters:
Name Type Description
event DragEvent

The originating drag event.
Returns

Returns true if the drag event contains files.

Type boolean
Source
File.js, line 252

destroy()

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

Source
File.js, line 262