npm - @hubspot/video-player-core - Versions diffs - 0.1.19 → 0.1.20 - Mend

@hubspot/video-player-core 0.1.19 → 0.1.20

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 (6) hide show

package/dist/components/HSThemeTemplate.js +1 -1
package/dist/styles/player-theme-styles.d.ts +3 -0
package/dist/styles/player-theme-styles.d.ts.map +1 -0
package/dist/styles/player-theme-styles.js +1 -0
package/dist/styles/player-theme-styles.ts +1 -0
package/package.json +3 -2

package/dist/components/HSThemeTemplate.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { MediaCaptionsMenu, MediaCaptionsMenuButton, MediaPlaybackRateMenu, Medi
 import { useEffect, useRef } from 'react';
 import { createRoot } from 'react-dom/client';
 import { DEFAULT_PLAY_BUTTON_COLOR } from '../constants';
-import playerThemeStyles from '../styles/player-theme.css';
+import playerThemeStyles from '../styles/player-theme-styles';
 import { BigPlayIcon, CaptionsMenuIcon, EnterFullscreenIcon, ExitFullscreenIcon, PipIcon, PlayPauseIcon, SettingsMenuIcon, VolumeHighIcon, VolumeLowIcon, VolumeMuteIcon, } from './HSPlayerIcons';
 import { useLanguage, useTranslations } from './TranslationsProvider';
 import { useVideoPlayer } from './VideoPlayerProvider';

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

@@ -0,0 +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  --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";
+export default _default;
+//# sourceMappingURL=player-theme-styles.d.ts.map

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

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"player-theme-styles.d.ts","sourceRoot":"","sources":["../../src/styles/player-theme-styles.ts"],"names":[],"mappings":"wBAAe,4tXAA4tX;AAA3uX,wBAA4uX"}

package/dist/styles/player-theme-styles.js ADDED Viewed

@@ -0,0 +1 @@

+ export 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";

package/dist/styles/player-theme-styles.ts ADDED Viewed

@@ -0,0 +1 @@

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/video-player-core",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "description": "Core video player components",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -39,9 +39,10 @@
     "vitest": "^0.24.3"
   },
   "scripts": {
+    "clean": "rm -rf dist",
     "build": "tsc -p tsconfig.json && mkdir -p dist/styles && cp -R src/styles/. dist/styles/",
+    "build:clean": "yarn clean && yarn build",
     "build:watch": "tsc -p tsconfig.json --watch",
-    "prepublish": "yarn run build",
     "lint": "eslint .",
     "test": "vitest run",
     "flow": "flow"