@hubspot/video-player-core 0.1.24 → 0.1.26

package/dist/styles/player-theme-styles.d.ts

@@ -1,3 +1,3 @@
-declare const _default: ":host {\n  direction: ltr;\n}\n\nmedia-controller {\n  --media-font-family: 'Lexend Deca', Helvetica, Arial, sans-serif;\n  --media-font-weight: 500;\n  --media-font-size: 12px;\n  --hs-fullscreen-font-size: 17px;\n  --hs-tooltip-font-size: 12px;\n  font-family: var(--media-font-family);\n  font-weight: var(--media-font-weight);\n  font-size: var(--media-font-size);\n  -webkit-font-smoothing: antialiased;\n\n  /* vars configured through theme props - matches DARK theme defaults.\n     accent color is driven by play button color field */\n  --media-primary-color: #ffffff;\n  --media-text-color: #ffffff;\n  --hs-secondary-color: #141414;\n  --hs-secondary-color-translucent: #141414cc;\n  --media-accent-color: #f7761f;\n  /* end configurable vars */\n\n  --media-secondary-color: transparent;\n  --hs-menu-border-color: #666666;\n  --hs-menu-bottom-offset: 40px;\n  --media-menu-border-radius: 8px;\n  --media-menu-background: color-mix(\n    in srgb,\n    var(--hs-secondary-color) 75%,\n    transparent\n  );\n  --media-control-hover-background: transparent;\n  --media-range-track-height: 3px;\n  --media-range-thumb-height: 13px;\n  --media-range-thumb-width: 13px;\n  --media-range-thumb-border-radius: 13px;\n  --media-tooltip-background-color: var(\n    --hs-secondary-color,\n    rgba(20, 20, 30, 0.7)\n  );\n  --media-object-fit: cover; /* avoids 1px black bars that tend to occur in safari, depending on exact window & video size */\n  position: absolute;\n  height: 100%;\n  width: 100%;\n}\n\nmedia-controller[breakpointmd] {\n  --media-font-size: 14px;\n  --hs-menu-bottom-offset: 45px;\n}\n\n/* The biggest size controller is tied to going fullscreen instead of a player width */\nmedia-controller[mediaisfullscreen] {\n  font-size: var(--hs-fullscreen-font-size);\n  --media-object-fit: contain;\n  --hs-menu-bottom-offset: 60px;\n  --media-range-thumb-height: 20px;\n  --media-range-thumb-width: 20px;\n  --media-range-thumb-border-radius: 10px;\n  --media-range-track-height: 4px;\n}\n/* attempt to move captions above the control bar, not working except for Chrome, see https://www.mux.com/blog/if-you-can-read-this-your-browser-captions-are-broken */\nvideo::-webkit-media-text-track-display {\n  transform: translateY(-3em);\n}\n\n.hs-button {\n  position: relative;\n  padding: 0 8px;\n  height: 100%;\n  opacity: 0.9;\n  transition: opacity 0.1s cubic-bezier(0.4, 0, 1, 1);\n  --media-font-size: var(--hs-tooltip-font-size);\n  --media-button-icon-width: 16px;\n  --media-button-icon-height: 16px;\n}\n\n.hs-button:hover {\n  opacity: 1;\n}\n\n[mediaisfullscreen] .hs-button {\n  padding: 0 12px;\n  --media-button-icon-width: 24px;\n  --media-button-icon-height: 24px;\n  --hs-tooltip-font-size: 14px;\n}\n\n.hs-button svg {\n  width: var(--media-button-icon-width);\n  height: var(--media-button-icon-height);\n  fill: var(--media-primary-color);\n  fill-rule: evenodd;\n}\n\n.svg-shadow {\n  stroke: #000;\n  stroke-opacity: 0.15;\n  stroke-width: 2px;\n  fill: none;\n}\n\n/* Big centered Play/Pause */\nmedia-play-button.centered-play-button,\nmedia-pause-button.centered-play-button {\n  --hs-big-play-button-height: 4rem;\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  aspect-ratio: 1;\n  padding: 0;\n  z-index: 1;\n  border-radius: 50%;\n  opacity: 0;\n  transition: opacity 0.7s ease-in;\n  height: var(--hs-big-play-button-height);\n\n  --media-control-background: color-mix(\n    in srgb,\n    var(--media-accent-color) 70%,\n    transparent\n  );\n  --media-control-hover-background: color-mix(\n    in srgb,\n    var(--media-accent-color) 85%,\n    transparent\n  );\n  --media-tooltip-display: none;\n  --media-button-icon-width: 28px;\n  --media-button-icon-height: 28px;\n  --media-icon-color: var(--hs-secondary-color);\n}\n[mediapaused] media-play-button.centered-play-button {\n  opacity: 1;\n  transition: opacity 0.3s ease-in;\n}\n\n[breakpointsm] media-play-button.centered-play-button {\n  --hs-big-play-button-height: 5rem;\n  --media-button-icon-height: 32px;\n}\n\n[breakpointlg] media-play-button.centered-play-button,\n[mediaisfullscreen] media-play-button.centered-play-button {\n  --hs-big-play-button-height: 7rem;\n  --media-button-icon-height: 50px;\n}\n\n/* Error Dialog */\nmedia-error-dialog {\n  --media-control-background: rgba(255, 255, 255, 0.7);\n  z-index: 2;\n}\n\n/* Gradient */\n.hs-control-bar-background {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  padding: 0;\n  background: linear-gradient(\n    transparent,\n    rgba(0, 0, 0, 0.6) 60%,\n    rgba(0, 0, 0, 0.8)\n  );\n}\n\n[breakpointmd] .hs-control-bar-background {\n  padding: 6px 12px;\n}\n\n[data-theme-variant='light'].hs-control-bar-background {\n  background: none;\n  background-color: var(--hs-secondary-color-translucent);\n}\n\n.hs-bottom-gradient {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  bottom: 0;\n  pointer-events: none;\n  box-shadow: inset 0 -24px 8px -8px rgba(30, 30, 30, 0.3),\n    inset 0 -48px 16px -16px rgba(60, 60, 60, 0.25);\n  border-radius: 5px;\n}\n[data-theme-variant='light'].hs-bottom-gradient {\n  box-shadow: inset 0 -24px 8px -8px rgba(210, 210, 210, 0.3),\n    inset 0 -48px 16px -16px rgba(250, 250, 250, 0.25);\n}\n\n/* Settings Menu - media-settings-menu and media-captions menu are at bottom, or else they cannot be clicked and the player toggles play/pause instead */\nmedia-settings-menu {\n  position: absolute;\n  background-color: var(--media-menu-background);\n  border: 1px solid var(--hs-menu-border-color);\n  border-radius: var(--media-menu-border-radius);\n  right: 2px;\n  bottom: var(--hs-menu-bottom-offset);\n  z-index: 10;\n  will-change: width, height;\n  transition: opacity 0.1s cubic-bezier(0, 0, 0.2, 1);\n  user-select: none;\n  backdrop-filter: blur(5px);\n  -webkit-backdrop-filter: blur(5px);\n  --media-settings-menu-min-width: 220px;\n}\n[mediaisfullscreen] media-settings-menu {\n  --media-settings-menu-min-width: 320px;\n  right: 24px;\n}\n\nmedia-settings-menu [slot='title'] {\n  padding: 4px 0;\n}\n\nmedia-settings-menu-item {\n  height: 40px;\n  font-weight: var(--media-font-weight);\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n[mediaisfullscreen] media-settings-menu-item {\n  font-size: var(--hs-fullscreen-font-size);\n  height: 50px;\n}\n\nmedia-settings-menu-item[submenusize='0'] {\n  display: none;\n}\n\n/* Also hide if only 'Auto' is added. */\n.quality-settings[submenusize='1'] {\n  display: none;\n}\n\nmedia-captions-menu {\n  position: absolute;\n  background-color: var(--media-menu-background);\n  border: 1px solid var(--hs-menu-border-color);\n  border-radius: var(--media-menu-border-radius);\n  bottom: var(--hs-menu-bottom-offset);\n  right: 50px;\n  z-index: 10;\n  will-change: width, height;\n  transition: opacity 0.1s cubic-bezier(0, 0, 0.2, 1);\n  user-select: none;\n  backdrop-filter: blur(5px);\n  -webkit-backdrop-filter: blur(5px);\n}\n[mediaisfullscreen] media-captions-menu {\n  bottom: var(--hs-menu-bottom-offset);\n  font-size: var(--hs-fullscreen-font-size);\n}\n\n/* Time Range / Progress Bar */\nmedia-time-range {\n  width: 100%;\n  height: 8px;\n  bottom: 6px;\n  z-index: 2;\n  --media-range-track-background: rgba(155, 155, 155, 0.5);\n  --media-range-track-pointer-background: rgba(155, 155, 155, 0.5);\n  --media-range-track-height: 6px;\n  --media-range-track-border-radius: 10px;\n  --media-box-border-radius: 4px;\n  --media-time-range-buffered-color: rgba(255, 255, 255, 0.4);\n  --media-range-bar-color: var(--media-accent-color);\n\n  --media-range-thumb-border-radius: 13px;\n  --media-range-thumb-background: var(--media-accent-color);\n  --media-range-thumb-transition: transform 0.1s linear;\n  --media-range-thumb-transform: scale(0) translate(0%, 0%);\n\n  --media-preview-thumbnail-border: 2px solid transparent;\n  --media-preview-thumbnail-border-radius: 4px;\n  --media-preview-chapter-text-shadow: none;\n  --media-preview-time-text-shadow: none;\n  --media-preview-thumbnail-background: var(--hs-secondary-color);\n  --media-preview-chapter-background: var(--hs-secondary-color);\n  --media-preview-time-background: var(--hs-secondary-color);\n}\nmedia-time-range:hover {\n  --media-range-thumb-transform: scale(1) translate(0%, 0%);\n}\n[mediaisfullscreen] media-time-range:hover {\n  --media-range-track-height: 8px;\n}\n\nmedia-preview-thumbnail {\n  background-color: var(--hs-secondary-color);\n}\n\n/* Control Bar */\nmedia-control-bar {\n  position: relative;\n  height: 35px;\n  line-height: 35px;\n  padding-right: 5px;\n}\n[breakpointmd] media-control-bar {\n  height: 45px;\n  line-height: 45px;\n}\n[mediaisfullscreen] media-control-bar {\n  height: 54px;\n  line-height: 54px;\n}\n\n/* Play/Pause */\n/* Slow down the play icon part hiding slightly to achieve the morphing look a little better */\nmedia-play-button:not([mediapaused]) #play-p2,\nmedia-play-button:not([mediapaused]) #play-p2 {\n  transition: clip-path 0.35s ease-in;\n}\n\n/* Show icon */\nmedia-play-button :is(#pause-p1, #pause-p2),\nmedia-play-button[mediapaused] :is(#play-p1, #play-p2) {\n  clip-path: inset(0);\n}\n\n/* Hide icon wth clip path mask */\nmedia-play-button #play-p1 {\n  clip-path: inset(0 100% 0 0);\n}\nmedia-play-button #play-p2 {\n  clip-path: inset(0 20% 0 100%);\n}\nmedia-play-button[mediapaused] #pause-p1 {\n  clip-path: inset(50% 0 50% 0);\n}\nmedia-play-button[mediapaused] #pause-p2 {\n  clip-path: inset(50% 0 50% 0);\n}\n\n/* Volume/Mute */\nmedia-mute-button.hs-button {\n  padding-bottom: 1px;\n}\n\nmedia-mute-button svg {\n  stroke: var(--media-primary-color);\n  stroke-width: 0.75px;\n}\n\nmedia-mute-button :is(#icon-muted, #icon-volume) {\n  transition: clip-path 0.3s ease-out;\n}\nmedia-mute-button #icon-muted {\n  clip-path: inset(0 0 100% 0);\n}\nmedia-mute-button[mediavolumelevel='off'] #icon-muted {\n  clip-path: inset(0);\n}\nmedia-mute-button #icon-volume {\n  clip-path: inset(0);\n}\nmedia-mute-button[mediavolumelevel='off'] #icon-volume {\n  clip-path: inset(100% 0 0 0);\n}\n\nmedia-mute-button #volume-high,\nmedia-mute-button[mediavolumelevel='off'] #volume-high {\n  opacity: 1;\n  transition: opacity 0.3s;\n}\nmedia-mute-button[mediavolumelevel='low'] #volume-high,\nmedia-mute-button[mediavolumelevel='medium'] #volume-high {\n  opacity: 0.2;\n}\n\nmedia-controller .media-volume-wrapper {\n  position: relative;\n}\n\n.media-volume-range-wrapper {\n  position: absolute;\n  top: -3.75rem;\n  left: -2.5rem;\n  height: 40px;\n  width: 100px;\n  opacity: 0;\n  transform: rotate(-90deg);\n  z-index: 5;\n}\n\n[mediaisfullscreen] .media-volume-range-wrapper {\n  top: -4.75rem;\n  left: -3rem;\n  width: 8rem;\n}\n\n.media-volume-range-inner {\n  position: relative;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  left: 12px; /* achieves proper vertical alignment of other popup menus, while ensuring you can move cursor up after hovering on mute button without dismissing */\n  background-color: var(--hs-secondary-color-translucent);\n  border: 1px solid var(--hs-menu-border-color);\n  border-radius: 5px;\n}\n\nmedia-mute-button:hover + .media-volume-range-wrapper,\nmedia-mute-button:focus + .media-volume-range-wrapper,\nmedia-mute-button:focus-within + .media-volume-range-wrapper,\n.media-volume-range-wrapper:hover,\n.media-volume-range-wrapper:focus,\n.media-volume-range-wrapper:focus-within {\n  opacity: 1;\n}\n\nmedia-volume-range {\n  height: 100%;\n  width: 100%;\n  vertical-align: middle;\n  --media-range-track-background: var(--media-primary-color);\n}\n\n/* Time Display */\nmedia-time-display {\n  padding-top: 0;\n  padding-bottom: 8px;\n  padding-left: 6px;\n}\n[mediaisfullscreen] media-time-display {\n  font-size: var(--hs-fullscreen-font-size);\n}\n\n/* Control spacer */\n.control-spacer {\n  flex-grow: 1;\n}\n\n/* Subtitles/CC Button */\nmedia-captions-button {\n  position: relative;\n}\n\nmedia-captions-menu-button svg {\n  stroke: var(--media-primary-color);\n  stroke-width: 0.5px;\n}\n\n/* Hide the captions menu button when no subtitles are available */\nmedia-captions-menu-button:not([mediasubtitleslist]) {\n  display: none;\n}\n\n/* Disble the captions button when no subtitles are available */\nmedia-captions-button:not([mediasubtitleslist]) svg {\n  opacity: 0.3;\n}\n\nmedia-captions-button[mediasubtitleslist]:after {\n  content: '';\n  display: block;\n  position: absolute;\n  width: 0;\n  height: 3px;\n  border-radius: 3px;\n  background-color: var(--media-accent-color);\n  bottom: 19%;\n  left: 50%;\n  transition: all 0.1s cubic-bezier(0, 0, 0.2, 1),\n    width 0.1s cubic-bezier(0, 0, 0.2, 1);\n}\n\nmedia-captions-button[mediasubtitleslist][aria-checked='true']:after {\n  left: 25%;\n  width: 50%;\n  transition: left 0.25s cubic-bezier(0, 0, 0.2, 1),\n    width 0.25s cubic-bezier(0, 0, 0.2, 1);\n}\n\nmedia-captions-button[mediasubtitleslist][aria-checked='true']:after {\n  left: 25%;\n  width: 50%;\n\n  transition: left 0.25s cubic-bezier(0, 0, 0.2, 1),\n    width 0.25s cubic-bezier(0, 0, 0.2, 1);\n}\n\n/* Settings Menu Button */\nmedia-settings-menu-button svg {\n  stroke: var(--media-primary-color);\n  stroke-width: 1px;\n  transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1);\n  transform: rotateZ(0deg);\n}\nmedia-settings-menu-button[aria-expanded='true'] svg {\n  stroke: var(--media-primary-color);\n  stroke-width: 0.5px;\n  transform: rotateZ(30deg);\n}\n";
+declare const _default: ":host {\n  direction: ltr;\n}\n\nmedia-controller {\n  --media-font-family: 'Lexend Deca', Helvetica, Arial, sans-serif;\n  --media-font-weight: 500;\n  --media-font-size: 12px;\n  --hs-fullscreen-font-size: 17px;\n  --hs-tooltip-font-size: 12px;\n  font-family: var(--media-font-family);\n  font-weight: var(--media-font-weight);\n  font-size: var(--media-font-size);\n  -webkit-font-smoothing: antialiased;\n\n  /* vars configured through theme props - matches DARK theme defaults.\n     accent color is driven by play button color field */\n  --media-primary-color: #ffffff;\n  --media-text-color: #ffffff;\n  --hs-secondary-color: #141414;\n  --hs-secondary-color-translucent: #141414cc;\n  --media-accent-color: #f7761f;\n  /* end configurable vars */\n\n  --media-secondary-color: transparent;\n  --hs-menu-border-color: #666666;\n  --hs-menu-bottom-offset: 40px;\n  --media-menu-border-radius: 8px;\n  --media-menu-background: color-mix(\n    in srgb,\n    var(--hs-secondary-color) 75%,\n    transparent\n  );\n  --media-control-hover-background: transparent;\n  --media-range-track-height: 3px;\n  --media-range-thumb-height: 13px;\n  --media-range-thumb-width: 13px;\n  --media-range-thumb-border-radius: 13px;\n  --media-tooltip-background-color: var(\n    --hs-secondary-color,\n    rgba(20, 20, 30, 0.7)\n  );\n  --media-object-fit: cover; /* avoids 1px black bars that tend to occur in safari, depending on exact window & video size */\n  position: absolute;\n  height: 100%;\n  width: 100%;\n}\n\nmedia-controller[breakpointmd] {\n  --media-font-size: 14px;\n  --hs-menu-bottom-offset: 45px;\n}\n\n/* The biggest size controller is tied to going fullscreen instead of a player width */\nmedia-controller[mediaisfullscreen] {\n  font-size: var(--hs-fullscreen-font-size);\n  --media-object-fit: contain;\n  --hs-menu-bottom-offset: 60px;\n  --media-range-thumb-height: 20px;\n  --media-range-thumb-width: 20px;\n  --media-range-thumb-border-radius: 10px;\n  --media-range-track-height: 4px;\n}\n/* attempt to move captions above the control bar, not working except for Chrome, see https://www.mux.com/blog/if-you-can-read-this-your-browser-captions-are-broken */\nvideo::-webkit-media-text-track-display {\n  transform: translateY(-3em);\n}\n\n.hs-button {\n  position: relative;\n  padding: 0 8px;\n  height: 100%;\n  opacity: 0.9;\n  transition: opacity 0.1s cubic-bezier(0.4, 0, 1, 1);\n  --media-font-size: var(--hs-tooltip-font-size);\n  --media-button-icon-width: 16px;\n  --media-button-icon-height: 16px;\n}\n\n.hs-button:hover {\n  opacity: 1;\n}\n\n.hs-button[disabled],\n.hs-button[disabled]:hover {\n  --media-tooltip-display: none;\n  opacity: 0.5;\n}\n\n[mediaisfullscreen] .hs-button {\n  padding: 0 12px;\n  --media-button-icon-width: 24px;\n  --media-button-icon-height: 24px;\n  --hs-tooltip-font-size: 14px;\n}\n\n.hs-button svg {\n  width: var(--media-button-icon-width);\n  height: var(--media-button-icon-height);\n  fill: var(--media-primary-color);\n  fill-rule: evenodd;\n}\n\n.svg-shadow {\n  stroke: #000;\n  stroke-opacity: 0.15;\n  stroke-width: 2px;\n  fill: none;\n}\n\n/* Big centered Play/Pause */\nmedia-play-button.centered-play-button,\nmedia-pause-button.centered-play-button {\n  --hs-big-play-button-height: 4rem;\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  aspect-ratio: 1;\n  padding: 0;\n  z-index: 1;\n  border-radius: 50%;\n  opacity: 0;\n  transition: opacity 0.7s ease-in;\n  height: var(--hs-big-play-button-height);\n\n  --media-control-background: color-mix(\n    in srgb,\n    var(--media-accent-color) 70%,\n    transparent\n  );\n  --media-control-hover-background: color-mix(\n    in srgb,\n    var(--media-accent-color) 85%,\n    transparent\n  );\n  --media-tooltip-display: none;\n  --media-button-icon-width: 28px;\n  --media-button-icon-height: 28px;\n  --media-icon-color: var(--hs-secondary-color);\n}\n[mediapaused] media-play-button.centered-play-button {\n  opacity: 1;\n  transition: opacity 0.3s ease-in;\n}\n\n[breakpointsm] media-play-button.centered-play-button {\n  --hs-big-play-button-height: 5rem;\n  --media-button-icon-height: 32px;\n}\n\n[breakpointlg] media-play-button.centered-play-button,\n[mediaisfullscreen] media-play-button.centered-play-button {\n  --hs-big-play-button-height: 7rem;\n  --media-button-icon-height: 50px;\n}\n\n/* Error Dialog */\nmedia-error-dialog {\n  --media-control-background: rgba(255, 255, 255, 0.7);\n  z-index: 2;\n}\n\n/* Gradient */\n.hs-control-bar-background {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  padding: 0;\n  background: linear-gradient(\n    transparent,\n    rgba(0, 0, 0, 0.6) 60%,\n    rgba(0, 0, 0, 0.8)\n  );\n}\n\n[breakpointmd] .hs-control-bar-background {\n  padding: 6px 12px;\n}\n\n[data-theme-variant='light'].hs-control-bar-background {\n  background: none;\n  background-color: var(--hs-secondary-color-translucent);\n}\n\n.hs-bottom-gradient {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  bottom: 0;\n  pointer-events: none;\n  box-shadow: inset 0 -24px 8px -8px rgba(30, 30, 30, 0.3),\n    inset 0 -48px 16px -16px rgba(60, 60, 60, 0.25);\n  border-radius: 5px;\n}\n[data-theme-variant='light'].hs-bottom-gradient {\n  box-shadow: inset 0 -24px 8px -8px rgba(210, 210, 210, 0.3),\n    inset 0 -48px 16px -16px rgba(250, 250, 250, 0.25);\n}\n\n/* Settings Menu - media-settings-menu and media-captions menu are at bottom, or else they cannot be clicked and the player toggles play/pause instead */\nmedia-settings-menu {\n  position: absolute;\n  background-color: var(--media-menu-background);\n  border: 1px solid var(--hs-menu-border-color);\n  border-radius: var(--media-menu-border-radius);\n  right: 2px;\n  bottom: var(--hs-menu-bottom-offset);\n  z-index: 10;\n  will-change: width, height;\n  transition: opacity 0.1s cubic-bezier(0, 0, 0.2, 1);\n  user-select: none;\n  backdrop-filter: blur(5px);\n  -webkit-backdrop-filter: blur(5px);\n  --media-settings-menu-min-width: 220px;\n}\n[mediaisfullscreen] media-settings-menu {\n  --media-settings-menu-min-width: 320px;\n  right: 24px;\n}\n\nmedia-settings-menu [slot='title'] {\n  padding: 4px 0;\n}\n\nmedia-settings-menu-item {\n  height: 40px;\n  font-weight: var(--media-font-weight);\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n[mediaisfullscreen] media-settings-menu-item {\n  font-size: var(--hs-fullscreen-font-size);\n  height: 50px;\n}\n\nmedia-settings-menu-item[submenusize='0'] {\n  display: none;\n}\n\n/* Also hide if only 'Auto' is added. */\n.quality-settings[submenusize='1'] {\n  display: none;\n}\n\nmedia-captions-menu {\n  position: absolute;\n  background-color: var(--media-menu-background);\n  border: 1px solid var(--hs-menu-border-color);\n  border-radius: var(--media-menu-border-radius);\n  bottom: var(--hs-menu-bottom-offset);\n  right: 50px;\n  z-index: 10;\n  will-change: width, height;\n  transition: opacity 0.1s cubic-bezier(0, 0, 0.2, 1);\n  user-select: none;\n  backdrop-filter: blur(5px);\n  -webkit-backdrop-filter: blur(5px);\n}\n[mediaisfullscreen] media-captions-menu {\n  bottom: var(--hs-menu-bottom-offset);\n  font-size: var(--hs-fullscreen-font-size);\n}\n\n/* Time Range / Progress Bar */\nmedia-time-range {\n  width: 100%;\n  height: 8px;\n  bottom: 6px;\n  z-index: 2;\n  --media-range-track-background: rgba(155, 155, 155, 0.5);\n  --media-range-track-pointer-background: rgba(155, 155, 155, 0.5);\n  --media-range-track-height: 6px;\n  --media-range-track-border-radius: 10px;\n  --media-box-border-radius: 4px;\n  --media-time-range-buffered-color: rgba(255, 255, 255, 0.4);\n  --media-range-bar-color: var(--media-accent-color);\n\n  --media-range-thumb-border-radius: 13px;\n  --media-range-thumb-background: var(--media-accent-color);\n  --media-range-thumb-transition: transform 0.1s linear;\n  --media-range-thumb-transform: scale(0) translate(0%, 0%);\n\n  --media-preview-thumbnail-border: 2px solid transparent;\n  --media-preview-thumbnail-border-radius: 4px;\n  --media-preview-chapter-text-shadow: none;\n  --media-preview-time-text-shadow: none;\n  --media-preview-thumbnail-background: var(--hs-secondary-color);\n  --media-preview-chapter-background: var(--hs-secondary-color);\n  --media-preview-time-background: var(--hs-secondary-color);\n}\nmedia-time-range:hover {\n  --media-range-thumb-transform: scale(1) translate(0%, 0%);\n}\n[mediaisfullscreen] media-time-range:hover {\n  --media-range-track-height: 8px;\n}\n\nmedia-preview-thumbnail {\n  background-color: var(--hs-secondary-color);\n}\n\n/* Control Bar */\nmedia-control-bar {\n  position: relative;\n  height: 35px;\n  line-height: 35px;\n  padding-right: 5px;\n}\n[breakpointmd] media-control-bar {\n  height: 45px;\n  line-height: 45px;\n}\n[mediaisfullscreen] media-control-bar {\n  height: 54px;\n  line-height: 54px;\n}\n\n/* Play/Pause */\n/* Slow down the play icon part hiding slightly to achieve the morphing look a little better */\nmedia-play-button:not([mediapaused]) #play-p2,\nmedia-play-button:not([mediapaused]) #play-p2 {\n  transition: clip-path 0.35s ease-in;\n}\n\n/* Show icon */\nmedia-play-button :is(#pause-p1, #pause-p2),\nmedia-play-button[mediapaused] :is(#play-p1, #play-p2) {\n  clip-path: inset(0);\n}\n\n/* Hide icon wth clip path mask */\nmedia-play-button #play-p1 {\n  clip-path: inset(0 100% 0 0);\n}\nmedia-play-button #play-p2 {\n  clip-path: inset(0 20% 0 100%);\n}\nmedia-play-button[mediapaused] #pause-p1 {\n  clip-path: inset(50% 0 50% 0);\n}\nmedia-play-button[mediapaused] #pause-p2 {\n  clip-path: inset(50% 0 50% 0);\n}\n\n/* Volume/Mute */\nmedia-mute-button.hs-button {\n  padding-bottom: 1px;\n}\n\nmedia-mute-button svg {\n  stroke: var(--media-primary-color);\n  stroke-width: 0.75px;\n}\n\nmedia-mute-button :is(#icon-muted, #icon-volume) {\n  transition: clip-path 0.3s ease-out;\n}\nmedia-mute-button #icon-muted {\n  clip-path: inset(0 0 100% 0);\n}\nmedia-mute-button[mediavolumelevel='off'] #icon-muted {\n  clip-path: inset(0);\n}\nmedia-mute-button #icon-volume {\n  clip-path: inset(0);\n}\nmedia-mute-button[mediavolumelevel='off'] #icon-volume {\n  clip-path: inset(100% 0 0 0);\n}\n\nmedia-mute-button #volume-high,\nmedia-mute-button[mediavolumelevel='off'] #volume-high {\n  opacity: 1;\n  transition: opacity 0.3s;\n}\nmedia-mute-button[mediavolumelevel='low'] #volume-high,\nmedia-mute-button[mediavolumelevel='medium'] #volume-high {\n  opacity: 0.2;\n}\n\nmedia-controller .media-volume-wrapper {\n  position: relative;\n}\n\n.media-volume-range-wrapper {\n  position: absolute;\n  top: -3.75rem;\n  left: -2.5rem;\n  height: 40px;\n  width: 100px;\n  opacity: 0;\n  transform: rotate(-90deg);\n  z-index: 5;\n}\n\n[mediaisfullscreen] .media-volume-range-wrapper {\n  top: -4.75rem;\n  left: -3rem;\n  width: 8rem;\n}\n\n.media-volume-range-inner {\n  position: relative;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  left: 12px; /* achieves proper vertical alignment of other popup menus, while ensuring you can move cursor up after hovering on mute button without dismissing */\n  background-color: var(--hs-secondary-color-translucent);\n  border: 1px solid var(--hs-menu-border-color);\n  border-radius: 5px;\n}\n\nmedia-mute-button:hover + .media-volume-range-wrapper,\nmedia-mute-button:focus + .media-volume-range-wrapper,\nmedia-mute-button:focus-within + .media-volume-range-wrapper,\n.media-volume-range-wrapper:hover,\n.media-volume-range-wrapper:focus,\n.media-volume-range-wrapper:focus-within {\n  opacity: 1;\n}\n\nmedia-volume-range {\n  height: 100%;\n  width: 100%;\n  vertical-align: middle;\n  --media-range-track-background: var(--media-primary-color);\n}\n\n/* Time Display */\nmedia-time-display {\n  padding-top: 0;\n  padding-bottom: 8px;\n  padding-left: 6px;\n}\n[mediaisfullscreen] media-time-display {\n  font-size: var(--hs-fullscreen-font-size);\n}\n\n/* Control spacer */\n.control-spacer {\n  flex-grow: 1;\n}\n\n/* Subtitles/CC Button */\nmedia-captions-button {\n  position: relative;\n}\n\nmedia-captions-menu-button svg {\n  stroke: var(--media-primary-color);\n  stroke-width: 0.5px;\n}\n\n/* Hide the captions menu button when no subtitles are available */\nmedia-captions-menu-button:not([mediasubtitleslist]) {\n  display: none;\n}\n\n/* Disble the captions button when no subtitles are available */\nmedia-captions-button:not([mediasubtitleslist]) svg {\n  opacity: 0.3;\n}\n\nmedia-captions-button[mediasubtitleslist]:after {\n  content: '';\n  display: block;\n  position: absolute;\n  width: 0;\n  height: 3px;\n  border-radius: 3px;\n  background-color: var(--media-accent-color);\n  bottom: 19%;\n  left: 50%;\n  transition: all 0.1s cubic-bezier(0, 0, 0.2, 1),\n    width 0.1s cubic-bezier(0, 0, 0.2, 1);\n}\n\nmedia-captions-button[mediasubtitleslist][aria-checked='true']:after {\n  left: 25%;\n  width: 50%;\n  transition: left 0.25s cubic-bezier(0, 0, 0.2, 1),\n    width 0.25s cubic-bezier(0, 0, 0.2, 1);\n}\n\nmedia-captions-button[mediasubtitleslist][aria-checked='true']:after {\n  left: 25%;\n  width: 50%;\n\n  transition: left 0.25s cubic-bezier(0, 0, 0.2, 1),\n    width 0.25s cubic-bezier(0, 0, 0.2, 1);\n}\n\n/* Settings Menu Button */\nmedia-settings-menu-button svg {\n  stroke: var(--media-primary-color);\n  stroke-width: 1px;\n  transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1);\n  transform: rotateZ(0deg);\n}\nmedia-settings-menu-button[aria-expanded='true'] svg {\n  stroke: var(--media-primary-color);\n  stroke-width: 0.5px;\n  transform: rotateZ(30deg);\n}\n";
 export default _default;
 //# sourceMappingURL=player-theme-styles.d.ts.map

package/dist/styles/player-theme-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"player-theme-styles.d.ts","sourceRoot":"","sources":["../../src/styles/player-theme-styles.ts"],"names":[],"mappings":"wBAAe,mraAAmra;AAAlsa,wBAAmsa"}
+{"version":3,"file":"player-theme-styles.d.ts","sourceRoot":"","sources":["../../src/styles/player-theme-styles.ts"],"names":[],"mappings":"wBAAe,gyaAAgya;AAA/ya,wBAAgza"}

package/dist/types.d.ts

@@ -29,6 +29,7 @@ export type VideoCrmObject = {
     crmObjectId: number;
     sourceFileId: number;
     fileUrl: string;
+    mp4FileUrl: string | null;
     primaryPlaybackId: string | null;
     transcodingState: string;
     title: string;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,MAAM,CAAC;AAE1C,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,KAAK,GAAG,MAAM,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,CAAC;IACpC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,iBAAiB,GAAG,iBAAiB,GAAG,OAAO,CAAC;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,eAAe,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,gBAAgB,EAAE,MAAM,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,qBAAqB,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,sBAAsB,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,qBAAqB,EAAE,MAAM,EAAE,CAAC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE;QACT,KAAK,EAAE,OAAO,EAAE,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,cAAc,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,MAAM,CAAC;AAE1C,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,KAAK,GAAG,MAAM,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,CAAC;IACpC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,iBAAiB,GAAG,iBAAiB,GAAG,OAAO,CAAC;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,eAAe,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,gBAAgB,EAAE,MAAM,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,qBAAqB,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,sBAAsB,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,qBAAqB,EAAE,MAAM,EAAE,CAAC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE;QACT,KAAK,EAAE,OAAO,EAAE,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,cAAc,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC"}

package/dist/utils/i18n.d.ts

@@ -31,6 +31,10 @@ export declare const DEFAULT_TRANSLATIONS: {
     readonly encryptionErrorMessage: "The media is encrypted and there are no keys to decrypt it.";
     readonly watchVideo: "Watch video";
     readonly defaultInlineMessage: "Thanks for your response!";
+    readonly notFoundVideoFetchError: "Video not found";
+    readonly notAuthorizedVideoFetchError: "Video not enabled";
+    readonly genericVideoFetchError: "Could not load video";
+    readonly retry: "Try again";
 };
 type TranslationKeys = keyof typeof DEFAULT_TRANSLATIONS;
 export type Translations = Record<TranslationKeys, string>;

package/dist/utils/i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../src/utils/i18n.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAE3D,eAAO,MAAM,gBAAgB,OAAO,CAAC;AAErC,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCvB,CAAC;AAEX,KAAK,eAAe,GAAG,MAAM,OAAO,oBAAoB,CAAC;AAEzD,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;AAE3D;;;GAGG;AACH,eAAO,MAAM,qBAAqB,iBAClB,OAAO,CAAC,YAAY,CAAC,KAClC,OAAO,CAAC,mBAAmB,CA4C7B,CAAC"}
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../src/utils/i18n.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAE3D,eAAO,MAAM,gBAAgB,OAAO,CAAC;AAErC,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCvB,CAAC;AAEX,KAAK,eAAe,GAAG,MAAM,OAAO,oBAAoB,CAAC;AAEzD,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;AAE3D;;;GAGG;AACH,eAAO,MAAM,qBAAqB,iBAClB,OAAO,CAAC,YAAY,CAAC,KAClC,OAAO,CAAC,mBAAmB,CA4C7B,CAAC"}

package/dist/utils/playerContainer.d.ts

@@ -0,0 +1,4 @@
+import { CSSProperties } from 'react';
+import { HubSpotVideoParams } from '../types';
+export declare const getContainerStyles: (hubspotVideoParams: HubSpotVideoParams) => CSSProperties;
+//# sourceMappingURL=playerContainer.d.ts.map

package/dist/utils/playerContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"playerContainer.d.ts","sourceRoot":"","sources":["../../src/utils/playerContainer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAqB9C,eAAO,MAAM,kBAAkB,uBACT,kBAAkB,KACrC,aASD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/video-player-core",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "description": "Core video player components",
   "main": "dist/index.cjs",
   "module": "dist/index.js",