API Docs
ViewVideo Module
frametrail/player/modules/ViewVideo/module.js:6
I am the ViewVideo. I am the most important user interface component. I contain all the visual elements of the hypervideo player, like the main <video> element, the containers for overlays, videolinks and annotations, their respective timelines and the player control elements.
When I am initialized, I prepare all DOM elements and set up their event listeners.
Item Index
Methods
- adjustHypervideo
- adjustLayout
- changeSlidePosition
- changeViewSize
- closestToOffset
- create
- destroyScrollAnimations
- enterAnnotationMode
- enterAudioMode
- enterLinkMode
- enterOverlayMode
- enterPreviewMode
- initEditMode
- initScrollAnimations
- leaveEditMode
- onViewSizeChanged
- resetEditMode
- showDetails
- slidePositionDown
- slidePositionUp
- toggleConfig_annotationPreviewVisible
- toggleConfig_annotationsPosition
- toggleConfig_annotationsVisible
- toggleConfig_autohideControls
- toggleConfig_captionsVisible
- toggleConfig_overlaysVisible
- toggleConfig_slidingMode
- toggleConfig_slidingTrigger
- toggleConfig_theme
- toggleConfig_videolinksVisible
- toggleEditMode
- toggleFullscreen
- toggleFullscreenState
- toggleGrid
- toggleNativeFullscreenState
- toggleSidebarOpen
- toggleVideoWorking
- toggleViewMode
- toogleUnsavedChanges
Attributes
- AnnotationContainer
- AnnotationPreviewContainer
- AnnotationTiles
- AnnotationTileSlider
- AnnotationTimeline
- CaptionContainer
- CaptionsButton
- currentTime
- duration
- EditingOptions
- EditPropertiesContainer
- ExpandButton
- HypervideoContainer
- OverlayContainer
- OverlayTimeline
- PlayButton
- PlayerProgress
- shownDetails
- Video
- VideolinkContainer
- VideolinkTiles
- VideolinkTileSlider
- VideolinkTimeline
Methods
adjustHypervideo
-
animate
I re-adjust the CSS of the main video and its container (without surrounding elements). I try to fill the available space to fit the video elements.
Also I try to animate the transition of the dimensions smoothly, when my single parameter is true.
Parameters:
-
animateBoolean
adjustLayout
()
I am a central method of the ViewVideo. I rearrange all my child elements. Their position is defined by the global state "editMode" and by the various "hvconfig[...]" states, as well as the current width and height of the display area.
I am called from many places, whenever one of the defining variables (see above) changes.
changeSlidePosition
-
newState -
oldState
I am called when the global state "slidePosition" changes.
This state is either "top", "middle" or "bottom", and indicates, which area has the most visual weight. The Hypervideocontainer is always displayed in the middle (in different sizes), while the annotations and the video links can change their position (top or bottom), as defined in the hypervideo's _index.json.
changeViewSize
-
arrayWidthAndHeight
I am called when the global state "viewSize" changes (which it does after a window resize, and one time during app start, after all create methods of interface modules have been called).
Parameters:
-
arrayWidthAndHeightArray
closestToOffset
-
collection -
position
I return the closest element from a given position {top: XX, left: XX} in a collection.
create
()
I am called from Interface/create(). I update my local state from the global state variables and append my elements in the DOM tree.
destroyScrollAnimations
-
callback
Destroy Scroll Animations
Parameters:
-
callbackMethod
enterAnnotationMode
()
I am called when the app enters the editMode "annotations"
enterAudioMode
()
I am called when the app enters the editMode "audio"
enterLinkMode
()
I am called when the app enters the editMode "links"
enterOverlayMode
()
I am called when the app enters the editMode "overlays"
enterPreviewMode
()
I am called when the app enters the editMode "preview"
initEditMode
()
I prepare the several UI elements, when one of the editMode is started.
initScrollAnimations
()
Init Scroll Animations (using ScrollMagic & TweenMax)
leaveEditMode
()
I restore the UI elements to the view mode with no editing features activated.
onViewSizeChanged
()
private
I react to changes in the global state viewSizeChanged. The state changes after a window resize event and is meant to be used for performance-heavy operations.
resetEditMode
()
I am called, whenever the editMode changes, to restore the default timeline.
showDetails
-
mode
This method is used to show the details (aka the content) of either the annotation or of the videolink. Because they can change their position ("top" or "bottom"), this method checks first were they are placed according to the current configuration, and slides the display area up or down respectively.
Parameters:
-
modeString
slidePositionDown
()
This method changes the global state "slidePosition" from "top" to "middle" or from "middle" to "bottom".
slidePositionUp
()
This method changes the global state "slidePosition" from "bottom" to "middle" or from "middle" to "top".
toggleConfig_annotationPreviewVisible
-
newState -
oldState
I am called when the global state "hv_config_annotationPreviewVisible" changes.
This is a configuration option (saved in the hypervideo's index.json entry).
toggleConfig_annotationsPosition
-
newState -
oldState
I am called when the global state "hv_config_annotationsPosition" changes.
This is a configuration option (saved in the hypervideo's index.json entry).
toggleConfig_annotationsVisible
-
newState -
oldState
I am called when the global state "hv_config_annotationsVisible" changes.
This is a configuration option (saved in the hypervideo's index.json entry).
toggleConfig_autohideControls
-
newState -
oldState
I am called when the global state "hv_config_autohideControls" changes.
This is a configuration option (saved in the hypervideo's index.json entry).
toggleConfig_captionsVisible
-
newState -
oldState
I am called when the global state "hv_config_captionsVisible" changes.
This is a configuration option (saved in the hypervideo's index.json entry).
toggleConfig_overlaysVisible
-
newState -
oldState
I am called when the global state "hv_config_overlaysVisible" changes.
This is a configuration option (saved in the hypervideo's index.json entry).
toggleConfig_slidingMode
-
newState -
oldState
I am called when the global state "hv_config_slidingMode" changes.
This is a configuration option (saved in the hypervideo's index.json entry).
toggleConfig_slidingTrigger
-
newState -
oldState
I am called when the global state "hv_config_slidingTrigger" changes.
This is a configuration option (saved in the hypervideo's index.json entry).
toggleConfig_theme
-
newState -
oldState
I am called when the global state "hv_config_theme" changes.
This is a configuration option (saved in the hypervideo's index.json entry).
toggleConfig_videolinksVisible
-
newState -
oldState
I am called when the global state "hv_config_videolinksVisible" changes.
This is a configuration option (saved in the hypervideo's index.json entry).
toggleEditMode
-
editMode
I react to a change in the global state "editMode".
Parameters:
-
editModeObject
Returns:
toggleFullscreen
-
aBoolean
I react to a change of the global state "fullscreen".
Parameters:
-
aBooleanBoolean
toggleFullscreenState
()
Toggle internal Fullscreen State
toggleGrid
-
visible
Toggles the visibility of a vertical grid based on the positions of all timeline items in each category (Videolinks, Overlays, Annotations). This grid is used to allow snapping items to positions of other timeline items.
Parameters:
-
visibleBoolean
toggleNativeFullscreenState
()
Toggle (Enter / Exit) native Fullscreen State
toggleSidebarOpen
-
opened
I am called when the global state "sidebarOpen" changes.
Parameters:
-
openedBoolean
toggleVideoWorking
-
working
Toggles the visibility of the working (loading) indicator.
Parameters:
-
workingBoolean
toggleViewMode
-
viewMode
I react to a change in the global state "viewMode".
Parameters:
-
viewModeString
toogleUnsavedChanges
-
aBoolean
I react to a change of the global state "unsavedChanges".
Parameters:
-
aBooleanBoolean
Attributes
CaptionsButton
HTMLElement
I contain the CaptionsButton element, including the list of available subtitles.
EditingOptions
HTMLElement
I contain the EditingOptions element (where e.g. the ResourcePicker is rendered).
EditPropertiesContainer
HTMLElement
I contain the EditPropertiesContainer element (where properties of an overlay/annotation/videolink can be viewed and – in the case ov overlays – changed).