Global

Members

$video :Element

Source:

Video player element

Type:
  • Element

(constant) AnalyticsReceiver

Source:

Module to listen for analytics tracking events from iframe content.

autoplayEnabled

Source:

Checks page settings to see if muted autoplay is enabled.

expandVideoPlayer

Source:

Expand player to full width. Used when triggering a video within a story stream.

fadeInVideo

Source:

Fade out placeholder and fade in video player.

getPlayer

Source:

Return player instance by id

getVideo

Source:

Create video player iframe tag from settings.

iframeId :string

Source:

ID of video iframe

Type:
  • string

init

Source:

Add click handler to video player embed or initiate muted autoplay if indicated.

isAutoplayVideo

Source:

Checks if this is an autoplayed video

isFeaturedVideo

Source:

Checks if this is a featured video

(constant) Messenger

Source:

Module to receive and send post window messages

reset

Source:

Reset embed player to initial state and remove existing $video element

(constant) ResizeReceiver

Source:

Module to resize the iframe parent based on iframe size

setupStickyVideo

Source:

Initializes sticky video functionality

(constant) SophiTagWrapper

Source:

Utility to fire Sophi tag events

start

Source:

Fade in video player and remove click handler.

startInView

Source:

Add in view listener to trigger playback when player becomes in view.

stickyEnabled()

Source:

Checks to see if sticky video is enabled. First check if the sticky video setting is on. Then do a viewport width check if the video is set to be turned off on desktop.

support

Source:

Official What-WG Fetch Polyfill Repo: https://github.com/github/fetcheslint More on fetch here: https://github.github.io/fetch/

Methods

@destroy()

Source:

Slide the snackbar out and remove the element from the DOM.

accept()

Source:

Fire acceptance event and get rid of the snackbar.

activateVideo(iframeId)

Source:

Setup sticky player and listeners if this player is not yet active. Reset player paused parameter.

Parameters:
Name Type Description
iframeId string

ID of video iframe in question

addAnchor($video)

Source:

Add anchor to position sticky video absolutely at current position. Prevents it from going over header / footer.

Parameters:
Name Type Description
$video Element

Video player element

addContainerObserver()

Source:

Initialize observer to check if container edges have entered the viewport If so, we need to anchor the video to the viewport so it doesn't go beyond the container.

addStickyMarkup() → {Element}

Source:

Wrap $video tag in sticky video markup.

Returns:

Video player with sticky video markup added

Type
Element

addVideoObserver(iframeId)

Source:

Add intersection observer to detect when player enters and exits view.

Parameters:
Name Type Description
iframeId string

ID of video iframe in question

anchorEnabled() → {boolean}

Source:

Determines whether sticky video anchoring is enabled on this page based on global settings.

Returns:

T/F depending on whether or not anchor video is enabled.

Type
boolean

animateMove($original, $destination, duration)

Source:

A transition animation where by an element moves from its origin position to a designated position

Parameters:
Name Type Description
$original HTMLElement

Original element
$destination HTMLElement

Destination element (location and size to transition to)
duration Integer

animation duration

applySettings(settings)

Source:

Checks carousel breakpoint settings and applies settings if breakpoint is matched Technically this should be done automatically by GlideJS but it appear to not work on resize, so we are applying them manually here.

Parameters:
Name Type Description
settings object

Currently applied carousel settings. Either initSettings or activeSettings depending on carousel position.

bindVideos()

Source:

Bind video slide click listeners. Clicking on a video slide should load video into player.

calculateTopMargin()

Source:

This will shorten the viewport based on the sticky nav and WP admin bar height

canOverflow(el, axis) → {Boolean}

Source:

indicates if an element has a scrollable overflow property in the axis

Parameters:
Name Type Description
el Node
axis String
Returns:
Type
Boolean

close()

Source:

Stops the video and unsticks the player if user clicks the close button

detatchCurrentVideo()

Source:

Turn off all sticky video functionality for the current player.

dismiss()

Source:

Dismiss the snackbar and fire dismissal event.

ease(k) → {Number}

Source:

returns result of applying ease math function to a number

Parameters:
Name Type Description
k Number
Returns:
Type
Number

embedScript(url)

Source:

Embed JS script and listen for when the script is loaded

Parameters:
Name Type Description
url string

URL of js script

endSwipe(event)

Source:

Once the user has lifted the pointer, determine if a swipe gestures was completed. If so, get rid of the snackbar.

Parameters:
Name Type Description
event object

Pointerup or pointercancel event instance.

findScrollableParent(el) → {Node}

Source:

finds scrollable parent of an element

Parameters:
Name Type Description
el Node
Returns:

el

Type
Node

getActiveVideo() → {Element}

Source:

Gets currently active video element.

Returns:

Video player element

Type
Element

(static) getId(playerId) → {string}

Source:

Get video playlist id

Parameters:
Name Type Description
playerId sting
Returns:

The corresponding ID for that video playlist.

Type
string

(static) getId(playerId) → {string}

Source:

Get video carousel id

Parameters:
Name Type Description
playerId sting
Returns:

The corresponding ID for that video carousel.

Type
string

getSVGSpritePath() → {string}

Source:

Get the SVG sprite path from gnca_settings object

Returns:

file path the SVG sprite.

Type
string

getVideo(iframeId) → {Element}

Source:

Gets specified video player element.

Parameters:
Name Type Description
iframeId string

ID of video iframe in question
Returns:

Video player element

Type
Element

getVideoId()

Source:

Generate a unique id to identify a SimpleVideo element

getWatcher(name)

Source:

Static method for getting a specific in view watcher by name

Parameters:
Name Type Description
name string

getWrapper(iframeId, CSS)

Source:

Get's the CSS selector for the specified video player's parent element. Useful because we need to add our Intersection Observer to the player's parent.

Parameters:
Name Type Description
iframeId string

ID of video iframe in question
CSS string

selector to identify the player's parent element.

getWrapperSelector(iframeId, CSS)

Source:

Get's the CSS selector for the specified video player's parent element. Useful because we need to add our Intersection Observer to the player's parent.

Parameters:
Name Type Description
iframeId string

ID of video iframe in question
CSS string

selector to identify the player's parent element.

(static) goToSlide($slide, $carousel)

Source:

Adjusts carousel position to target slide.

Parameters:
Name Type Description
$slide object

Target slide to scroll to.
$carousel object

Carousel element object.

handleContainerIntersection($pageContainer, event)

Source:

Anchor the video to the edge of the container if the container bounds have been reached. Remove the anchor if it is no longer needed and resume fixed positioning.

Parameters:
Name Type Description
$pageContainer Element

Page container element
event object

InBounds event object

handleItemClick(event, $playlist, data)

Source:

Playlist item click handler. Loads selected video into player if it is not there already. Removes selected video from the playlist.

Parameters:
Name Type Description
event event

click event.
$playlist HTMLElement

DOM element of the playlist.
data object

selected video data.

handleLowerboundInView(evt)

Source:

Handle lower coming in / out of viewport

Parameters:
Name Type Description
evt object

InView event

handleMovement(event)

Source:

Change carousel settings is carousel is entering or exiting the first slide. This is because the design differs between the first and successive slides. Handler is run when slider is run before slider switches to the next slide.

Parameters:
Name Type Description
event object

run.before event object instance.

handlePickerClick(event, $item)

Source:

Toggle the appropriate slide when a picker item is clicked on If a picker item is already selected, then allow the link to take the user to the content

Parameters:
Name Type Description
event object

Reference to JS event object
$item element

DOM reference to picker item that is being hovered over

handlePickerHover($item)

Source:

On desktop we let the user toggle between slides by simply hovering over a picker item.

Parameters:
Name Type Description
$item element

DOM reference to picker item that is being hovered over

handleResizeCarousel()

Source:

Create or destroy carousel based on enableAtWidth setting. Relies on the internal GlideJS resize event which is throttled.

handleResizeSettings()

Source:

Update GlideJS carousel after browser resize. Relies on the internal GlideJS resize event which is throttled.

handleSwipe(event)

Source:

Move snackbar with pointer if user is moving downwards to dismiss.

Parameters:
Name Type Description
event object

Pointermove event instance.

handleUpperboundInView(evt)

Source:

Handle upperbound coming in / out of viewport

Parameters:
Name Type Description
evt object

InView event

handleVideoClick(event, $video)

Source:

Video slide click handler. Loads selected video into player if it is not there already. Updates now-playing flag on carousel to highlight selected video.

Parameters:
Name Type Description
event object

Video slide click event instance.
$video object

Video slide element object.

handleVideoIntersection($video, event)

Source:

Unsticks or sticks video depending on whether player is in our out of view.

Parameters:
Name Type Description
$video Element

Video player element
event Object

Custom event fired by InView intersection observer module

handleVisibilityChange(event)

Source:

Handle InView events stop playback when container element is invisible start playback when container element is visible

Parameters:
Name Type Description
event object

hasScrollableSpace(el, axis) → {Boolean}

Source:

indicates if an element has scrollable space in the provided axis

Parameters:
Name Type Description
el Node
axis String
Returns:
Type
Boolean

hide()

Source:

Animate out the video player

init()

Source:

Bind window event listener for post messages if receiver iframes exists

init()

Source:

Refresh tracking on DOMReady — required by Sophi team to fix issues in Safari and FF

init()

Source:

Initializes video playlists. Listens for playlist clicks to initiate video player.

init()

Source:

Initialize carousel, set up class members, and bind event listeners.

init()

Source:

Sets up listeners to watch for upper and lower bounds of container coming in / out of view

init()

Source:

Insert video template into the specified container element Load video scripts and initalize the video player

init()

Source:

Initialize snackbar, and add to page.

init() → {Element}

Source:

Initializes sticky video, adding sticky markup and event listeners. Closes any open sticky videos in the process.

Returns:

Video player with sticky video markup added

Type
Element

init()

Source:

Initialize video carousel, set up class members, and bind event listeners.

init()

Source:

Setup intersection observer and watch for elements getting in view.

initializeCarousel()

Source:

Initialize GlideJS carousel object if width is past breakpoint. Bind handlers to run on slide change and on resize.

initializePicker()

Source:

Initialize carousel item picker element and bind event handlers. A picker is an optional list of links that lets the user select specific carousel slides without swiping through the carousel.

initPlayer()

Source:

Initialize video player and set up event listener for animating in the player when ready.

isGoingToStart(event) → {boolean}

Source:

Determines whether or not carousel is heading towards the initial slide. If so, carousel display settings will need to change to accommodate design. Complicated logic because these settings need to be changed before the new slide position is calculated. Otherwise the style transition appears jarring.

Parameters:
Name Type Description
event object

run.before event object instance.
Returns:

True / False depending on next slide position.

Type
boolean

isMicrosoftBrowser(userAgent) → {Boolean}

Source:

indicates if a the current browser is made by Microsoft

Parameters:
Name Type Description
userAgent String
Returns:
Type
Boolean

isScrollable(el, axis) → {Boolean}

Source:

indicates if an element can be scrolled in either axis

Parameters:
Name Type Description
el Node
axis String
Returns:
Type
Boolean

isStuck(iframeId, T/F)

Source:

Determines if player in question is currently stickied.

Parameters:
Name Type Description
iframeId string

ID of video iframe in question
T/F boolean

depending on whether or not specified player is stickied.

listeners()

Source:

Add snackbar event listeners for snackbar actions.

matchBreakpoint(settings) → {object}

Source:

Iterates through carousel breakpoint settings to determine if one matches the current screen width.

Parameters:
Name Type Description
settings object

Currently applied carousel settings. Either initSettings or activeSettings depending on carousel position.
Returns:

Matched breakpoint setting if one is found.

Type
object

onScriptLoaded()

Source:

Handler for when a script is loaded Trigger API_READY event when all libraries have been loaded

pauseVideo(iframeId)

Source:

Pause sticky player if video is currently not stuck. If user pauses the player while unsticky we don't want it to stick. If users pauses the player while sticky we don't want it to unstick.

Parameters:
Name Type Description
iframeId string

ID of video iframe in question

play(url)

Source:

Begin video playback

Parameters:
Name Type Description
url string

optional. Video stream URL.

receiveMessage(data)

Source:

Resize iframe parent based on iframe size.

Parameters:
Name Type Description
data Object

Event object received from child iframe post message

receiveMessage(event)

Source:

Receive messages posted from an iframe, pass on the message to registered receivers

Parameters:
Name Type Description
event Object

Event object received from child iframe post message

receiveMessage(data)

Source:

Resize iframe parent based on iframe size.

Parameters:
Name Type Description
data Object

Event object received from child iframe post message

receiveMessage(data)

Source:

Checks to see if play event has fired for current active carousel video. If so, grabs current playlist index and passes along to update now playing flag.

Parameters:
Name Type Description
data object

postMessage data object.

receiveMessage(event)

Source:

Updates video status and potentially title based on info passed in event.

Parameters:
Name Type Description
event Object

Event object received from child iframe post message

(static) receiveMessage(data)

Source:

Checks to see if play event has fired for current active carousel video. If so, grabs current playlist index and passes along to update now playing flag. This method has to be static as we can't bind postMessage events to object instances.

Parameters:
Name Type Description
data object

postMessage data object.

refreshTracking()

Source:

Fire tag event to refresh link tracking after new links are added to DOM

registerReceiver(eventType, receiver)

Source:

Register receiver for receiving iframe messages

Parameters:
Name Type Description
eventType string

event type, e.g. gnca_video, gnca-iframe
receiver object

an object with a receiveMessage() function for receiving messages from the iframe

remove()

Source:

Remove video

removeAnchor($video)

Source:

Remove anchor and resume fixed positioning of sticky video player

Parameters:
Name Type Description
$video Element

Video player element

removeContainerObserver()

Source:

Remove container observer when video is deactivated

removeLoadIndicator(iframeId)

Source:

Removes loading spinner once video (or ad) has loaded.

Parameters:
Name Type Description
iframeId string

ID of video iframe in question

removeVideoObserver(iframeId)

Source:

Turn off intersection observer listener for specified player.

Parameters:
Name Type Description
iframeId string

ID of video iframe in question

scrollElement(x, y) → {undefined}

Source:

changes scroll position inside an element

Parameters:
Name Type Description
x Number
y Number
Returns:
Type
undefined

sendMessage(iframeId, eventType, eventAction)

Source:

Post message to an iframe with the specified iframe id

Parameters:
Name Type Description
iframeId string

iframe ID
eventType string

event type, e.g. gnca_video, gnca-iframe
eventAction string

action sent to the iframe

sendVideoAction()

Source:

Sends a message to the video player on click.

setTitle(title, iframeId)

Source:

Updates the text of the title bar above the sticky player.

Parameters:
Name Type Description
title string

text to place in the title bar
iframeId string

ID of video iframe in question

setupBoundary()

Source:

Sets up sentinal elements at the top and bottom of the container to serve as signals

shouldBailOut(firstArg) → {Boolean}

Source:

indicates if a smooth behavior should be applied

Parameters:
Name Type Description
firstArg Number | Object
Returns:
Type
Boolean

show()

Source:

Animate in the video player

smoothScroll(el, x, y) → {undefined}

Source:

scrolls window or element with a smooth behavior

Parameters:
Name Type Description
el Object | Node
x Number
y Number
Returns:
Type
undefined

startSwipe(event)

Source:

Setup and bind listeners to handle the swipe to dismiss gesture.

Parameters:
Name Type Description
event object

Pointerdown event instance.

startVideo($player)

Source:

Start video

Parameters:
Name Type Description
$player HTMLElement

DOM element of the player.

startWatching($elem)

Source:

Start watching viewability of an element

Parameters:
Name Type Description
$elem HTMLElement

observe element

step(context) → {undefined}

Source:

self invoked function that, given a context, steps through scrolling

Parameters:
Name Type Description
context Object
Returns:
Type
undefined

stick($video)

Source:

Sticks video player to right rail.

Parameters:
Name Type Description
$video Element

Video player element

stickyEnabled() → {boolean}

Source:

Determines whether sticky video should be enabled on this page based on global settings.

Returns:

T/F depending on whether or not sticky video is enabled.

Type
boolean

stop()

Source:

Stop video playback

stop()

Source:

Stop observing all

stopWatching()

Source:

Unbind observer and remove sentinal elements

stopWatching($elem)

Source:

Stop watching viewability of an element

Parameters:
Name Type Description
$elem HTMLElement

unobserve element

swapVideo($player, data)

Source:

Swap out current playlist video with a new video and restart player.

Parameters:
Name Type Description
$player HTMLElement

DOM element of the player.
data object

selected video data.

swapVideo(playerId, embedUrl, playlist, $video)

Source:

Swap out current carousel video with a new video and restart player.

Parameters:
Name Type Description
playerId object

ID of current active video iframe.
embedUrl url

New video player (and playlist) url.
playlist string

Comma separated list of successive video ids in playlist.
$video object

Video slide element object.

toggleSliderButtons()

Source:

Toggles carousel buttons visibility based on current breakpoint preview number

unstick($video)

Source:

Unsticks video from right rail

Parameters:
Name Type Description
$video Element

Video player element

updateActiveSlide()

Source:

Updates the active element flag on the carousel slide. Only operates if a layout class is defined since active slide styles are not part of the default design

(static) updateDetails(carousel, $video)

Source:

Update video details

Parameters:
Name Type Description
carousel object

VideoCarousel
$video object

$video element

(static) updateNowPlayling(iframeId, $carousel)

Source:

Updates the now playing flag based on the current active videoId.

Parameters:
Name Type Description
iframeId string

ID of current active video iframe.
$carousel object

Video carousel element object.

updatePicker()

Source:

Updates the active element flag on the item picker after a carousel slide transition.

updatePlaylist($playlist, videoId)

Source:

Set playing state for selected playlist item. Reorder playlist so that current item sits at the top, or below a live stream video if one exists.

Parameters:
Name Type Description
$playlist HTMLElement

DOM element of the playlist.
videoId string

selected video ID

updateStatus(status, iframeId)

Source:

Updates sticky behavior based on new video status.

Parameters:
Name Type Description
status string

new video state
iframeId string

ID of video iframe in question

updateTitle(iframeId)

Source:

Updates sticky video title, showing default message if ad is playing. Include show name if this is an episode or clip from a program.

Parameters:
Name Type Description
iframeId string

ID of video iframe in question

updateVolume(data)

Source:

Show / hide mute unmute buttons.

Parameters:
Name Type Description
data object