Updates

Author: clarej12

1bfc9850-609ded0e9698d6852236.js

@@ -0,0 +1,55 @@
+/**
+ * @component HoverVideoPlayer
+ *
+ * @param {(string|string[]|VideoSource|VideoSource[])}  videoSrc - Source(s) to use for the video player. Accepts 3 different formats:
+ *                                                                   - **String**: the URL string to use as the video player's src
+ *                                                                   - **Object**: an object with attributes:
+ *                                                                     - src: The src URL string to use for a video player source
+ *                                                                     - type: The media type of the video source, ie 'video/mp4'
+ *                                                                   - **Array**: if you would like to provide multiple sources, you can provide an array of URL strings and/or objects with the shape described above
+ * @param {(VideoCaptionsTrack|VideoCaptionsTrack[])} [videoCaptions] - Captions track(s) to use for the video player for accessibility. Accepts 2 formats:
+ *                                                                                      - **Object**: an object with attributes:
+ *                                                                                        - src: The src URL string for the captions track file
+ *                                                                                        - srcLang: The language code for the language that these captions are in (ie, 'en', 'es', 'fr')
+ *                                                                                        - label: The title of the captions track
+ *                                                                                        - default: Whether this track should be used by default if the user's preferences don't match an available srcLang
+ *                                                                                      - **Array**: if you would like to provide multiple caption tracks, you can provide an array of objects with the shape described above
+ * @param {boolean} [focused=false] - Offers a prop interface for forcing the video to start/stop without DOM events
+ *                                      When set to true, the video will begin playing and any events that would normally stop it will be ignored
+ * @param {boolean} [disableDefaultEventHandling] - Whether the video player's default mouse and touch event handling should be disabled in favor of a fully custom solution using the `focused` prop
+ * @param {node}    [hoverTargetRef] - Ref to a custom element that should be used as the target for hover events to start/stop the video
+ *                                      By default will just use the container div wrapping the player
+ * @param {node}    [pausedOverlay] - Contents to render over the video while it's not playing
+ * @param {node}    [loadingOverlay] - Contents to render over the video while it's loading
+ * @param {number}  [loadingStateTimeout=200] - Duration in ms to wait after attempting to start the video before showing the loading overlay
+ * @param {number}  [overlayTransitionDuration=400] - The transition duration in ms for how long it should take for the overlay to fade in/out
+ * @param {boolean} [restartOnPaused=false] - Whether the video should reset to the beginning every time it stops playing after the user mouses out of the player
+ * @param {boolean} [unloadVideoOnPaused=false] - Whether we should unload the video's sources when it is not playing in order to free up memory and bandwidth
+ *                                                  This can be useful in scenarios where you may have a large number of relatively large video files on a single page;
+ *                                                  particularly due to a known bug in Google Chrome, if too many videos are loading in the background at the same time,
+ *                                                  it starts to gum up the works so that nothing loads properly and performance can degrade significantly.
+ * @param {boolean} [muted=true] - Whether the video player should be muted
+ * @param {boolean} [loop=true] - Whether the video player should loop when it reaches the end
+ * @param {string}  [preload] - Sets how much information the video element should preload before being played. Accepts one of the following values:
+ *                              - **"none"**: Nothing should be preloaded before the video is played
+ *                              - **"metadata"**: Only the video's metadata (ie length, dimensions) should be preloaded
+ *                              - **"auto"**: The whole video file should be preloaded even if it won't be played
+ * @param {string}  [crossOrigin='anonymous'] - Sets how the video element should handle CORS requests. Accepts one of the following values:
+ *                                              - **"anonymous"**: CORS requests will have the credentials flag set to 'same-origin'
+ *                                              - **"use-credentials"**: CORS requests for this element will have the credentials flag set to 'include'
+ * @param {string}  [className] - Optional className to apply custom styling to the container element
+ * @param {object}  [style] - Style object to apply custom inlined styles to the hover player container
+ * @param {string}  [pausedOverlayWrapperClassName] - Optional className to apply custom styling to the overlay contents' wrapper
+ * @param {object}  [pausedOverlayWrapperStyle] - Style object to apply custom inlined styles to the paused overlay wrapper
+ * @param {string}  [loadingOverlayWrapperClassName] - Optional className to apply custom styling to the loading state overlay contents' wrapper
+ * @param {object}  [loadingOverlayWrapperStyle] - Style object to apply custom inlined styles to the loading overlay wrapper
+ * @param {string}  [videoClassName] - Optional className to apply custom styling to the video element
+ * @param {object}  [videoStyle] - Style object to apply custom inlined styles to the video element
+ * @param {string}  [sizingMode='video'] - Describes sizing mode to use to determine how the player's contents should be styled. Accepts 4 possible values:
+ *                                         - **"video"**: Everything should be sized based on the video element's dimensions - the overlays will expand to cover the video
+ *                                         - **"overlay"**: Everything should be sized based on the paused overlay's dimensions - the video element will expand to fit inside those dimensions
+ *                                         - **"container"**: Everything should be sized based on the player's outer container div - the overlays and video will all expand to cover the container
+ *                                         - **"manual"**: Manual mode does not apply any special styling and allows the developer to exercise full control over how everything should be sized - this means you will likely need to provide your own custom styling for both the paused overlay and the video element
+ *
+ * @license MIT
+ */