Class CameraViews

The Camera UI View that displays all the camera feeds as individual video elements.

Param: webrtc

The WebRTC Implementation to display

Param: options

Application configuration options.

Hierarchy (view full)

Application
- CameraViews

Properties

options

options: object

The options provided to this application upon initialization

_element

_element: jQuery

An internal reference to the HTML element this application renders

position

position: object

Track the current position and dimensions of the Application UI

_dragDrop

_dragDrop: DragDrop[]

DragDrop workflow handlers which are active for this Application

_tabs

_tabs: Tabs[]

Tab navigation handlers which are active for this Application

_searchFilters

_searchFilters: SearchFilter[]

SearchFilter handlers which are active for this Application

_minimized

_minimized: boolean

Track whether the Application is currently minimized

_scrollPositions

_scrollPositions: object

Track the most recent scroll positions for any vertically scrolling containers

appId

appId: number

The application ID is a unique incrementing integer which is used to identify every application window drawn by the VTT

`Protected` _state

_state: number

The current render state of the Application

See

`Protected` _priorState

_priorState: number

The prior render state of this Application. This allows for rendering logic to understand if the application is being rendered for the first time.

See

`Static` RENDER_STATES

RENDER_STATES: Readonly<{
    ERROR: -3;
    CLOSING: -2;
    CLOSED: -1;
    NONE: 0;
    RENDERING: 1;
    RENDERED: 2;
}> = ...

The sequence of rendering states that track the Application life-cycle.

Type declaration

ERROR: -3
CLOSING: -2
CLOSED: -1
NONE: 0
RENDERING: 1
RENDERED: 2

Accessors

webrtc

get webrtc(): AVMaster
A reference to the master AV orchestrator instance

Returns AVMaster

hidden

get hidden(): boolean
If all camera views are popped out, hide the dock.

Returns boolean

id

get id(): string
Return the CSS application ID which uniquely references this UI element

Returns string
Inherited from Application.id

element

get element(): jQuery
Return the active application element, if it currently exists in the DOM

Returns jQuery
Inherited from Application.element

template

get template(): string
The path to the HTML template file which should be used to render the inner content of the app

Returns string
Inherited from Application.template

popOut

get popOut(): boolean
Control the rendering style of the application. If popOut is true, the application is rendered in its own wrapper window, otherwise only the inner app content is rendered

Returns boolean
Inherited from Application.popOut

rendered

get rendered(): boolean
Return a flag for whether the Application instance is currently rendered

Returns boolean
Inherited from Application.rendered

closing

get closing(): boolean
Whether the Application is currently closing.

Returns boolean
Inherited from Application.closing

title

get title(): string
An Application window should define its own title definition logic which may be dynamic depending on its data

Returns string
Inherited from Application.title

`Static` defaultOptions

get defaultOptions(): object
Returns object
Overrides Application.defaultOptions

Methods

getUserCameraView

getUserCameraView(userId): HTMLElement
Obtain a reference to the div.camera-view which is used to portray a given Foundry User.
Parameters
- userId: string
  The ID of the User document
Returns HTMLElement

getUserVideoElement

getUserVideoElement(userId): HTMLVideoElement
Obtain a reference to the video.user-camera which displays the video channel for a requested Foundry User. If the user is not broadcasting video this will return null.
Parameters
- userId: string
  The ID of the User document
Returns HTMLVideoElement

setUserIsSpeaking

setUserIsSpeaking(userId, speaking): void
Sets whether a user is currently speaking or not
Parameters
- userId: string
  The ID of the user
- speaking: boolean
  Whether the user is speaking
Returns void

render

render(force, context?): any
Extend the render logic to first check whether a render is necessary based on the context If a specific context was provided, make sure an update to the navigation is necessary before rendering
Parameters
- force: any
- context: {} = {}
Returns any
Overrides Application.render

_render

_render(force?, options?): Promise<void>
Parameters
- force: boolean = false
- options: {} = {}
Returns Promise<void>
Overrides Application._render

setPosition

setPosition(__namedParameters?): void | {
    left: number;
    top: number;
    width: number;
    height: number;
    scale: number;
}
Set the application position and store its new location. Returns the updated position object for the application containing the new values.
Parameters
- __namedParameters: {
      left: any;
      top: any;
      width: any;
      scale: any;
  } = {}
  Positional data
  - left: any
  - top: any
  - width: any
  - scale: any
Returns void | {
    left: number;
    top: number;
    width: number;
    height: number;
    scale: number;
}
Overrides Application.setPosition

getData

getData(options?): {
    self: User;
    muteAll: any;
    borderColors: any;
    dockClass: string;
    hidden: boolean;
    users: any[];
    nameplates: {
        cssClass: any;
        playerName: boolean;
        charname: boolean;
    };
}
Parameters
- options: {} = {}
Returns {
    self: User;
    muteAll: any;
    borderColors: any;
    dockClass: string;
    hidden: boolean;
    users: any[];
    nameplates: {
        cssClass: any;
        playerName: boolean;
        charname: boolean;
    };
}
- self: User
- muteAll: any
- borderColors: any
- dockClass: string
- hidden: boolean
- users: any[]
- nameplates: {
      cssClass: any;
      playerName: boolean;
      charname: boolean;
  }
  - cssClass: any
  - playerName: boolean
  - charname: boolean
Overrides Application.getData

activateListeners

activateListeners(html): void
Parameters
- html: any
Returns void
Overrides Application.activateListeners

activateTab

activateTab(tabName, options?): void
Change the currently active tab
Parameters
- tabName: string
  The target tab name to switch to
- options: {
  group: string;
  triggerCallback: boolean;
  } = {}
  Options which configure changing the tab
  - group: string
    A specific named tab group, useful if multiple sets of tabs are present
  - triggerCallback: boolean
    Whether to trigger tab-change callback functions
Returns void
Inherited from Application.activateTab

bringToTop

bringToTop(): void
Bring the application to the top of the rendering stack

Returns void
Inherited from Application.bringToTop

close

close(options?): Promise<void>
Close the application and un-register references to it within UI mappings This function returns a Promise which resolves once the window closing animation concludes
Parameters
- Optional options: object = {}
  Options which affect how the Application is closed
Returns Promise<void>
A Promise which resolves once the application is closed

Fires
closeApplication

Inherited from Application.close

minimize

minimize(): Promise<void>
Minimize the pop-out window, collapsing it to a small tab Take no action for applications which are not of the pop-out variety or apps which are already minimized

Returns Promise<void>
A Promise which resolves once the minimization action has completed

Inherited from Application.minimize

maximize

maximize(): Promise<void>
Maximize the pop-out window, expanding it to its original size Take no action for applications which are not of the pop-out variety or are already maximized

Returns Promise<void>
A Promise which resolves once the maximization action has completed

Inherited from Application.maximize

`Protected` _refreshView

_refreshView(userId): void
Protected
Dynamically refresh the state of a single camera view
Parameters
- userId: string
  The ID of the user whose view we want to refresh.
Returns void

`Protected` _getToggleIcon

_getToggleIcon(action, state): string
Protected
Get the icon class that should be used for various action buttons with different toggled states. The returned icon should represent the visual status of the NEXT state (not the CURRENT state).
Parameters
- action: string
  The named av-control button action
- state: boolean
  The CURRENT action state.
Returns string
The icon that represents the NEXT action state.

`Protected` _getToggleTooltip

_getToggleTooltip(action, state): string
Protected
Get the text title that should be used for various action buttons with different toggled states. The returned title should represent the tooltip of the NEXT state (not the CURRENT state).
Parameters
- action: string
  The named av-control button action
- state: boolean
  The CURRENT action state.
Returns string
The icon that represents the NEXT action state.

`Protected` _callHooks

_callHooks(hookName, ...hookArgs): void
Protected Internal
Call all hooks for all applications in the inheritance chain.
Parameters
- hookName: string | ((className) => string)
  The hook being triggered, which formatted with the Application class name
- Rest ...hookArgs: any[]
  The arguments passed to the hook calls
Returns void
Inherited from Application._callHooks

`Protected` _saveScrollPositions

_saveScrollPositions(html): void
Protected
Persist the scroll positions of containers within the app before re-rendering the content
Parameters
- html: jQuery
  The HTML object being traversed
Returns void
Inherited from Application._saveScrollPositions

`Protected` _restoreScrollPositions

_restoreScrollPositions(html): void
Protected
Restore the scroll positions of containers within the app after re-rendering the content
Parameters
- html: jQuery
  The HTML object being traversed
Returns void
Inherited from Application._restoreScrollPositions

`Protected` _renderOuter

_renderOuter(): Promise<jQuery>
Protected
Render the outer application wrapper

Returns Promise<jQuery>
A promise resolving to the constructed jQuery object

Inherited from Application._renderOuter

`Protected` _getHeaderButtons

_getHeaderButtons(): ApplicationHeaderButton[]
Protected
Specify the set of config buttons which should appear in the Application header. Buttons should be returned as an Array of objects. The header buttons which are added to the application can be modified by the getApplicationHeaderButtons hook.

Returns ApplicationHeaderButton[]
Fires
getApplicationHeaderButtons

Inherited from Application._getHeaderButtons

`Protected` _activateCoreListeners

_activateCoreListeners(html): void
Protected
Activate required listeners which must be enabled on every Application. These are internal interactions which should not be overridden by downstream subclasses.
Parameters
- html: jQuery
Returns void
Inherited from Application._activateCoreListeners

`Protected` _onChangeTab

_onChangeTab(event, tabs, active): void
Protected
Handle changes to the active tab in a configured Tabs controller
Parameters
- event: MouseEvent
  A left click event
- tabs: Tabs
  The Tabs controller
- active: string
  The new active tab name
Returns void
Inherited from Application._onChangeTab

`Protected` _onSearchFilter

_onSearchFilter(event, query, rgx, html): void
Protected
Handle changes to search filtering controllers which are bound to the Application
Parameters
- event: KeyboardEvent
  The key-up event from keyboard input
- query: string
  The raw string input to the search field
- rgx: RegExp
  The regular expression to test against
- html: HTMLElement
  The HTML element which should be filtered
Returns void
Inherited from Application._onSearchFilter

`Protected` _canDragStart

_canDragStart(selector): boolean
Protected
Define whether a user is able to begin a dragstart workflow for a given drag selector
Parameters
- selector: string
  The candidate HTML selector for dragging
Returns boolean
Can the current user drag this selector?

Inherited from Application._canDragStart

`Protected` _canDragDrop

_canDragDrop(selector): boolean
Protected
Define whether a user is able to conclude a drag-and-drop workflow for a given drop selector
Parameters
- selector: string
  The candidate HTML selector for the drop target
Returns boolean
Can the current user drop on this selector?

Inherited from Application._canDragDrop

`Protected` _onDragStart

_onDragStart(event): void
Protected
Callback actions which occur at the beginning of a drag start workflow.
Parameters
- event: DragEvent
  The originating DragEvent
Returns void
Inherited from Application._onDragStart

`Protected` _onDragOver

_onDragOver(event): void
Protected
Callback actions which occur when a dragged element is over a drop target.
Parameters
- event: DragEvent
  The originating DragEvent
Returns void
Inherited from Application._onDragOver

`Protected` _onDrop

_onDrop(event): void
Protected
Callback actions which occur when a dragged element is dropped on a target.
Parameters
- event: DragEvent
  The originating DragEvent
Returns void
Inherited from Application._onDrop

`Protected` _waitForImages

_waitForImages(): Promise<void>
Protected
Wait for any images present in the Application to load.

Returns Promise<void>
A Promise that resolves when all images have loaded.

Inherited from Application._waitForImages

`Private` _getDataForUser

_getDataForUser(userId, settings): {
    user: Document;
    settings: any;
    local: any;
    charname: any;
    volume: number;
    cameraViewClass: any;
}
Private
Prepare rendering data for a single user
Parameters
- userId: any
- settings: any
Returns {
    user: Document;
    settings: any;
    local: any;
    charname: any;
    volume: number;
    cameraViewClass: any;
}
- user: Document
- settings: any
- local: any
- charname: any
- volume: number
- cameraViewClass: any

`Private` _onVolumeChange

_onVolumeChange(event): void
Private
Change volume control for a stream
Parameters
- event: Event
  The originating change event from interaction with the range input
Returns void

`Private` _setPlayerListVisibility

_setPlayerListVisibility(): void
Private
Render changes needed to the PlayerList ui. Show/Hide players depending on option.

Returns void

`Private` _toggleControlVisibility

_toggleControlVisibility(container, show, selector): void
Private
Show or hide UI control elements This replaces the use of jquery.show/hide as it simply adds a class which has display:none which allows us to have elements with display:flex which can be hidden then shown without breaking their display style. This will show/hide the toggle buttons, volume controls and overlay sidebars
Parameters
- container: jQuery
  The container for which to show/hide control elements
- show: boolean
  Whether to show or hide the controls
- selector: string
  Override selector to specify which controls to show or hide
Returns void

`Static` `Private` _sortUsers

_sortUsers(a, b): number
Private
A custom sorting function that orders/arranges the user display frames
Parameters
- a: any
- b: any
Returns number

Events

`Private` _onCameraViewHover

_onCameraViewHover(event): void
Private
On hover in a camera container, show/hide the controls. event The original mouseover or mouseout hover event
Parameters
- event: any
Returns void

`Private` _onClickControl

_onClickControl(event): Promise<any>
Private
On clicking on a toggle, disable/enable the audio or video stream. event The originating click event
Parameters
- event: any
Returns Promise<any>

Class CameraViews

Param: webrtc

Param: options

Hierarchy (view full)

Index

Properties

Accessors

Methods

Events

Properties

options

_element

position

_dragDrop

_tabs

_searchFilters

_minimized

_scrollPositions

appId

Protected _state

See

Protected _priorState

See

Static RENDER_STATES

Type declaration

ERROR: -3

CLOSING: -2

CLOSED: -1

NONE: 0

RENDERING: 1

RENDERED: 2

Accessors

webrtc

Returns AVMaster

hidden

Returns boolean

id

Returns string

element

Returns jQuery

template

Returns string

popOut

Returns boolean

rendered

Returns boolean

closing

Returns boolean

title

Returns string

Static defaultOptions

Returns object

Methods

getUserCameraView

Parameters

Returns HTMLElement

getUserVideoElement

Parameters

Returns HTMLVideoElement

setUserIsSpeaking

Parameters

Returns void

render

Parameters

Returns any

_render

Parameters

Returns Promise<void>

setPosition

Parameters

left: any

top: any

width: any

scale: any

Returns void | { left: number; top: number; width: number; height: number; scale: number; }

getData

Parameters

Returns { self: User; muteAll: any; borderColors: any; dockClass: string; hidden: boolean; users: any[]; nameplates: { cssClass: any; playerName: boolean; charname: boolean; }; }

self: User

muteAll: any

`Protected` _state

`Protected` _priorState

`Static` RENDER_STATES

`Static` defaultOptions

Returns void | {
left: number;
top: number;
width: number;
height: number;
scale: number;
}

Returns {
self: User;
muteAll: any;
borderColors: any;
dockClass: string;
hidden: boolean;
users: any[];
nameplates: {
cssClass: any;
playerName: boolean;
charname: boolean;
};
}

nameplates: {
cssClass: any;
playerName: boolean;
charname: boolean;
}

`Protected` _refreshView

`Protected` _getToggleIcon

`Protected` _getToggleTooltip

`Protected` _callHooks

`Protected` _saveScrollPositions

`Protected` _restoreScrollPositions

`Protected` _renderOuter

`Protected` _getHeaderButtons

`Protected` _activateCoreListeners

`Protected` _onChangeTab

`Protected` _onSearchFilter

`Protected` _canDragStart

`Protected` _canDragDrop

`Protected` _onDragStart

`Protected` _onDragOver