@hubspot/video-player-core 0.1.21 → 0.1.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/components/HSPlayerIcons.d.ts.map +1 -1
  2. package/dist/components/VideoPlayer.d.ts +1 -1
  3. package/dist/components/VideoPlayer.d.ts.map +1 -1
  4. package/dist/index.cjs +236 -178
  5. package/dist/index.js +4821 -4716
  6. package/dist/styles/player-theme-styles.d.ts +1 -1
  7. package/dist/styles/player-theme-styles.d.ts.map +1 -1
  8. package/dist/types.d.ts +1 -0
  9. package/dist/types.d.ts.map +1 -1
  10. package/package.json +1 -1
package/dist/styles/player-theme-styles.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- 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 --media-primary-color: #ffffff;\n --media-text-color: #ffffff;\n\n --hs-secondary-color: #4b4b4b;\n --hs-secondary-color-translucent: #4b4b4bcc;\n --media-secondary-color: transparent;\n\n --media-accent-color: #f7761f;\n --hs-menu-border-color: #aaa;\n --hs-menu-bottom-offset: 40px;\n\n --media-menu-background: var(--hs-secondary-color);\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: 50px;\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-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 display: inline-block;\n width: 36px;\n padding: 0 2px;\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}\n[breakpointmd] .hs-button {\n width: 42px;\n}\n[mediaisfullscreen] .hs-button {\n width: 54px;\n --hs-tooltip-font-size: 14px;\n}\n\n.hs-button svg {\n height: 100%;\n width: 100%;\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 position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 25%;\n aspect-ratio: 1;\n padding: 0;\n z-index: 1;\n border-radius: 50%;\n opacity: 0;\n --media-control-background: var(--media-accent-color);\n --media-control-hover-background: var(--media-accent-color);\n --media-tooltip-display: none;\n}\n[mediapaused] media-play-button.centered-play-button {\n opacity: 1;\n transition: opacity 0.3s ease-in;\n}\n.centered-play-button svg {\n position: absolute;\n height: 80%;\n fill: var(--hs-secondary-color);\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: 10px;\n right: 10px;\n bottom: 10px;\n background-color: var(--hs-secondary-color-translucent);\n border-radius: 5px;\n padding-top: 3px;\n}\n.hs-bottom-gradient {\n position: absolute;\n width: 100%;\n height: 100%;\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(--hs-secondary-color-translucent);\n border: 1px solid var(--hs-menu-border-color);\n border-radius: 5px;\n right: 12px;\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 --media-settings-menu-min-width: 220px;\n}\n[mediaisfullscreen] media-settings-menu {\n --media-settings-menu-min-width: 320px;\n right: 24px;\n bottom: 70px;\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(--hs-secondary-color-translucent);\n border: 1px solid var(--hs-menu-border-color);\n border-radius: 5px;\n bottom: var(--hs-menu-bottom-offset);\n right: 70px;\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}\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: calc(100% + 10px);\n height: 8px;\n left: -5px;\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: 4px;\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: 30px;\n line-height: 30px;\n top: -2px;\n}\n[breakpointmd] media-control-bar {\n height: 40px;\n line-height: 40px;\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 svg {\n transform: scale(0.7);\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: -4.25rem;\n left: -1.75rem;\n height: 40px;\n width: 100px;\n opacity: 0;\n transform: rotate(-90deg);\n z-index: 5;\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: 6px;\n padding-bottom: 6px;\n padding-left: 0;\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 transform: scale(0.7);\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: scale(0.55) rotateZ(0deg);\n}\nmedia-settings-menu-button[aria-expanded='true'] svg {\n stroke: var(--media-primary-color);\n stroke-width: 0.5px;\n transform: scale(0.55) rotateZ(30deg);\n}\n\n/* Fullscreen Button */\nmedia-fullscreen-button[mediaisfullscreen] svg {\n transform: scale(0.6);\n}\n";
1
+ 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";
2
2
  export default _default;
3
3
  //# sourceMappingURL=player-theme-styles.d.ts.map
package/dist/styles/player-theme-styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"player-theme-styles.d.ts","sourceRoot":"","sources":["../../src/styles/player-theme-styles.ts"],"names":[],"mappings":"wBAAe,4tXAA4tX;AAA3uX,wBAA4uX"}
1
+ {"version":3,"file":"player-theme-styles.d.ts","sourceRoot":"","sources":["../../src/styles/player-theme-styles.ts"],"names":[],"mappings":"wBAAe,mraAAmra;AAAlsa,wBAAmsa"}
package/dist/types.d.ts CHANGED
@@ -12,6 +12,7 @@ export type HubSpotVideoParams = {
12
12
  height: number;
13
13
  max_width?: number;
14
14
  max_height?: number;
15
+ size_type?: 'auto_full_width' | 'auto_custom_max' | 'exact';
15
16
  autoplay?: boolean;
16
17
  hide_controls?: boolean;
17
18
  loop_video?: boolean;
package/dist/types.d.ts.map CHANGED
@@ -1 +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,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,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"}
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,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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hubspot/video-player-core",
3
- "version": "0.1.21",
3
+ "version": "0.1.22",
4
4
  "description": "Core video player components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",