@hubspot/video-player-core 0.1.19 → 0.1.21

package/dist/styles/player-theme.css

@@ -1,446 +0,0 @@
-:host {
-  direction: ltr;
-}
-
-media-controller {
-  --media-font-family: 'Lexend Deca', Helvetica, Arial, sans-serif;
-  --media-font-weight: 500;
-  --media-font-size: 12px;
-  --hs-fullscreen-font-size: 17px;
-  --hs-tooltip-font-size: 12px;
-  font-family: var(--media-font-family);
-  font-weight: var(--media-font-weight);
-  font-size: var(--media-font-size);
-  -webkit-font-smoothing: antialiased;
-
-  --media-primary-color: #ffffff;
-  --media-text-color: #ffffff;
-
-  --hs-secondary-color: #4b4b4b;
-  --hs-secondary-color-translucent: #4b4b4bcc;
-  --media-secondary-color: transparent;
-
-  --media-accent-color: #f7761f;
-  --hs-menu-border-color: #aaa;
-  --hs-menu-bottom-offset: 40px;
-
-  --media-menu-background: var(--hs-secondary-color);
-  --media-control-hover-background: transparent;
-  --media-range-track-height: 3px;
-  --media-range-thumb-height: 13px;
-  --media-range-thumb-width: 13px;
-  --media-range-thumb-border-radius: 13px;
-  --media-tooltip-background-color: var(
-    --hs-secondary-color,
-    rgba(20, 20, 30, 0.7)
-  );
-  --media-object-fit: cover; /* avoids 1px black bars that tend to occur in safari, depending on exact window & video size */
-  position: absolute;
-  height: 100%;
-  width: 100%;
-}
-
-media-controller[breakpointmd] {
-  --media-font-size: 14px;
-  --hs-menu-bottom-offset: 50px;
-}
-
-/* The biggest size controller is tied to going fullscreen instead of a player width */
-media-controller[mediaisfullscreen] {
-  font-size: var(--hs-fullscreen-font-size);
-  --media-range-thumb-height: 20px;
-  --media-range-thumb-width: 20px;
-  --media-range-thumb-border-radius: 10px;
-  --media-range-track-height: 4px;
-}
-/* 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 */
-video::-webkit-media-text-track-display {
-  transform: translateY(-3em);
-}
-
-.hs-button {
-  position: relative;
-  display: inline-block;
-  width: 36px;
-  padding: 0 2px;
-  height: 100%;
-  opacity: 0.9;
-  transition: opacity 0.1s cubic-bezier(0.4, 0, 1, 1);
-  --media-font-size: var(--hs-tooltip-font-size);
-}
-[breakpointmd] .hs-button {
-  width: 42px;
-}
-[mediaisfullscreen] .hs-button {
-  width: 54px;
-  --hs-tooltip-font-size: 14px;
-}
-
-.hs-button svg {
-  height: 100%;
-  width: 100%;
-  fill: var(--media-primary-color);
-  fill-rule: evenodd;
-}
-
-.svg-shadow {
-  stroke: #000;
-  stroke-opacity: 0.15;
-  stroke-width: 2px;
-  fill: none;
-}
-
-/* Big centered Play/Pause */
-media-play-button.centered-play-button,
-media-pause-button.centered-play-button {
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 25%;
-  aspect-ratio: 1;
-  padding: 0;
-  z-index: 1;
-  border-radius: 50%;
-  opacity: 0;
-  --media-control-background: var(--media-accent-color);
-  --media-control-hover-background: var(--media-accent-color);
-  --media-tooltip-display: none;
-}
-[mediapaused] media-play-button.centered-play-button {
-  opacity: 1;
-  transition: opacity 0.3s ease-in;
-}
-.centered-play-button svg {
-  position: absolute;
-  height: 80%;
-  fill: var(--hs-secondary-color);
-}
-
-/* Error Dialog */
-media-error-dialog {
-  --media-control-background: rgba(255, 255, 255, 0.7);
-  z-index: 2;
-}
-
-/* Gradient */
-.hs-control-bar-background {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  left: 10px;
-  right: 10px;
-  bottom: 10px;
-  background-color: var(--hs-secondary-color-translucent);
-  border-radius: 5px;
-  padding-top: 3px;
-}
-.hs-bottom-gradient {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  bottom: 0;
-  pointer-events: none;
-  box-shadow: inset 0 -24px 8px -8px rgba(30, 30, 30, 0.3),
-    inset 0 -48px 16px -16px rgba(60, 60, 60, 0.25);
-  border-radius: 5px;
-}
-[data-theme-variant='light'].hs-bottom-gradient {
-  box-shadow: inset 0 -24px 8px -8px rgba(210, 210, 210, 0.3),
-    inset 0 -48px 16px -16px rgba(250, 250, 250, 0.25);
-}
-
-/* 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 */
-media-settings-menu {
-  position: absolute;
-  background-color: var(--hs-secondary-color-translucent);
-  border: 1px solid var(--hs-menu-border-color);
-  border-radius: 5px;
-  right: 12px;
-  bottom: var(--hs-menu-bottom-offset);
-  z-index: 10;
-  will-change: width, height;
-  transition: opacity 0.1s cubic-bezier(0, 0, 0.2, 1);
-  user-select: none;
-  --media-settings-menu-min-width: 220px;
-}
-[mediaisfullscreen] media-settings-menu {
-  --media-settings-menu-min-width: 320px;
-  right: 24px;
-  bottom: 70px;
-}
-media-settings-menu-item {
-  height: 40px;
-  font-weight: var(--media-font-weight);
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-[mediaisfullscreen] media-settings-menu-item {
-  font-size: var(--hs-fullscreen-font-size);
-  height: 50px;
-}
-
-media-settings-menu-item[submenusize='0'] {
-  display: none;
-}
-
-/* Also hide if only 'Auto' is added. */
-.quality-settings[submenusize='1'] {
-  display: none;
-}
-
-media-captions-menu {
-  position: absolute;
-  background-color: var(--hs-secondary-color-translucent);
-  border: 1px solid var(--hs-menu-border-color);
-  border-radius: 5px;
-  bottom: var(--hs-menu-bottom-offset);
-  right: 70px;
-  z-index: 10;
-  will-change: width, height;
-  transition: opacity 0.1s cubic-bezier(0, 0, 0.2, 1);
-  user-select: none;
-}
-[mediaisfullscreen] media-captions-menu {
-  bottom: var(--hs-menu-bottom-offset);
-  font-size: var(--hs-fullscreen-font-size);
-}
-
-/* Time Range / Progress Bar */
-media-time-range {
-  width: calc(100% + 10px);
-  height: 8px;
-  left: -5px;
-  z-index: 2;
-  --media-range-track-background: rgba(155, 155, 155, 0.5);
-  --media-range-track-pointer-background: rgba(155, 155, 155, 0.5);
-  --media-range-track-height: 6px;
-  --media-range-track-border-radius: 4px;
-  --media-box-border-radius: 4px;
-  --media-time-range-buffered-color: rgba(255, 255, 255, 0.4);
-  --media-range-bar-color: var(--media-accent-color);
-
-  --media-range-thumb-border-radius: 13px;
-  --media-range-thumb-background: var(--media-accent-color);
-  --media-range-thumb-transition: transform 0.1s linear;
-  --media-range-thumb-transform: scale(0) translate(0%, 0%);
-
-  --media-preview-thumbnail-border: 2px solid transparent;
-  --media-preview-thumbnail-border-radius: 4px;
-  --media-preview-chapter-text-shadow: none;
-  --media-preview-time-text-shadow: none;
-  --media-preview-thumbnail-background: var(--hs-secondary-color);
-  --media-preview-chapter-background: var(--hs-secondary-color);
-  --media-preview-time-background: var(--hs-secondary-color);
-}
-media-time-range:hover {
-  --media-range-thumb-transform: scale(1) translate(0%, 0%);
-}
-[mediaisfullscreen] media-time-range:hover {
-  --media-range-track-height: 8px;
-}
-
-media-preview-thumbnail {
-  background-color: var(--hs-secondary-color);
-}
-
-/* Control Bar */
-media-control-bar {
-  position: relative;
-  height: 30px;
-  line-height: 30px;
-  top: -2px;
-}
-[breakpointmd] media-control-bar {
-  height: 40px;
-  line-height: 40px;
-}
-[mediaisfullscreen] media-control-bar {
-  height: 54px;
-  line-height: 54px;
-}
-
-/* Play/Pause */
-/* Slow down the play icon part hiding slightly to achieve the morphing look a little better */
-media-play-button:not([mediapaused]) #play-p2,
-media-play-button:not([mediapaused]) #play-p2 {
-  transition: clip-path 0.35s ease-in;
-}
-
-/* Show icon */
-media-play-button :is(#pause-p1, #pause-p2),
-media-play-button[mediapaused] :is(#play-p1, #play-p2) {
-  clip-path: inset(0);
-}
-
-/* Hide icon wth clip path mask */
-media-play-button #play-p1 {
-  clip-path: inset(0 100% 0 0);
-}
-media-play-button #play-p2 {
-  clip-path: inset(0 20% 0 100%);
-}
-media-play-button[mediapaused] #pause-p1 {
-  clip-path: inset(50% 0 50% 0);
-}
-media-play-button[mediapaused] #pause-p2 {
-  clip-path: inset(50% 0 50% 0);
-}
-
-/* Volume/Mute */
-media-mute-button svg {
-  transform: scale(0.7);
-  stroke: var(--media-primary-color);
-  stroke-width: 0.75px;
-}
-
-media-mute-button :is(#icon-muted, #icon-volume) {
-  transition: clip-path 0.3s ease-out;
-}
-media-mute-button #icon-muted {
-  clip-path: inset(0 0 100% 0);
-}
-media-mute-button[mediavolumelevel='off'] #icon-muted {
-  clip-path: inset(0);
-}
-media-mute-button #icon-volume {
-  clip-path: inset(0);
-}
-media-mute-button[mediavolumelevel='off'] #icon-volume {
-  clip-path: inset(100% 0 0 0);
-}
-
-media-mute-button #volume-high,
-media-mute-button[mediavolumelevel='off'] #volume-high {
-  opacity: 1;
-  transition: opacity 0.3s;
-}
-media-mute-button[mediavolumelevel='low'] #volume-high,
-media-mute-button[mediavolumelevel='medium'] #volume-high {
-  opacity: 0.2;
-}
-
-media-controller .media-volume-wrapper {
-  position: relative;
-}
-
-.media-volume-range-wrapper {
-  position: absolute;
-  top: -4.25rem;
-  left: -1.75rem;
-  height: 40px;
-  width: 100px;
-  opacity: 0;
-  transform: rotate(-90deg);
-  z-index: 5;
-}
-.media-volume-range-inner {
-  position: relative;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 12px; /* achieves proper vertical alignment of other popup menus, while ensuring you can move cursor up after hovering on mute button without dismissing */
-  background-color: var(--hs-secondary-color-translucent);
-  border: 1px solid var(--hs-menu-border-color);
-  border-radius: 5px;
-}
-
-media-mute-button:hover + .media-volume-range-wrapper,
-media-mute-button:focus + .media-volume-range-wrapper,
-media-mute-button:focus-within + .media-volume-range-wrapper,
-.media-volume-range-wrapper:hover,
-.media-volume-range-wrapper:focus,
-.media-volume-range-wrapper:focus-within {
-  opacity: 1;
-}
-
-media-volume-range {
-  height: 100%;
-  width: 100%;
-  vertical-align: middle;
-  --media-range-track-background: var(--media-primary-color);
-}
-
-/* Time Display */
-media-time-display {
-  padding-top: 6px;
-  padding-bottom: 6px;
-  padding-left: 0;
-}
-[mediaisfullscreen] media-time-display {
-  font-size: var(--hs-fullscreen-font-size);
-}
-
-/* Control spacer */
-.control-spacer {
-  flex-grow: 1;
-}
-
-/* Subtitles/CC Button */
-media-captions-button {
-  position: relative;
-}
-
-media-captions-menu-button svg {
-  transform: scale(0.7);
-  stroke: var(--media-primary-color);
-  stroke-width: 0.5px;
-}
-
-/* Hide the captions menu button when no subtitles are available */
-media-captions-menu-button:not([mediasubtitleslist]) {
-  display: none;
-}
-
-/* Disble the captions button when no subtitles are available */
-media-captions-button:not([mediasubtitleslist]) svg {
-  opacity: 0.3;
-}
-
-media-captions-button[mediasubtitleslist]:after {
-  content: '';
-  display: block;
-  position: absolute;
-  width: 0;
-  height: 3px;
-  border-radius: 3px;
-  background-color: var(--media-accent-color);
-  bottom: 19%;
-  left: 50%;
-  transition: all 0.1s cubic-bezier(0, 0, 0.2, 1),
-    width 0.1s cubic-bezier(0, 0, 0.2, 1);
-}
-
-media-captions-button[mediasubtitleslist][aria-checked='true']:after {
-  left: 25%;
-  width: 50%;
-  transition: left 0.25s cubic-bezier(0, 0, 0.2, 1),
-    width 0.25s cubic-bezier(0, 0, 0.2, 1);
-}
-
-media-captions-button[mediasubtitleslist][aria-checked='true']:after {
-  left: 25%;
-  width: 50%;
-
-  transition: left 0.25s cubic-bezier(0, 0, 0.2, 1),
-    width 0.25s cubic-bezier(0, 0, 0.2, 1);
-}
-
-/* Settings Menu Button */
-media-settings-menu-button svg {
-  stroke: var(--media-primary-color);
-  stroke-width: 1px;
-  transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1);
-  transform: scale(0.55) rotateZ(0deg);
-}
-media-settings-menu-button[aria-expanded='true'] svg {
-  stroke: var(--media-primary-color);
-  stroke-width: 0.5px;
-  transform: scale(0.55) rotateZ(30deg);
-}
-
-/* Fullscreen Button */
-media-fullscreen-button[mediaisfullscreen] svg {
-  transform: scale(0.6);
-}

package/dist/types.js

@@ -1 +0,0 @@
-export {};

package/dist/utils/i18n.js

@@ -1,79 +0,0 @@
-export const DEFAULT_LANGUAGE = 'en';
-export const DEFAULT_TRANSLATIONS = {
-    play: 'Play',
-    pause: 'Pause',
-    mute: 'Mute',
-    unmute: 'Unmute',
-    captions: 'Captions',
-    settings: 'Settings',
-    playbackSpeed: 'Playback speed',
-    quality: 'Quality',
-    auto: 'Auto',
-    off: 'Off',
-    enterFullscreen: 'Enter fullscreen mode',
-    exitFullscreen: 'Exit fullscreen mode',
-    enterPipMode: 'Enter picture-in-picture mode',
-    exitPipMode: 'Exit picture-in-picture mode',
-    seek: 'Seek',
-    playbackTime: 'playback time',
-    videoPlayer: 'video player',
-    audioPlayer: 'audio player',
-    loading: 'media loading',
-    closedCaptions: 'closed captions',
-    networkError: 'Network Error',
-    decodeError: 'Decode Error',
-    sourceNotSupported: 'Source Not Supported',
-    encryptionError: 'Encryption Error',
-    networkErrorMessage: 'A network error caused the media download to fail.',
-    decodeErrorMessage: 'A media error caused playback to be aborted. The media could be corrupt or your browser does not support this format.',
-    unsupportedErrorMessage: 'An unsupported error occurred. The server or network failed, or your browser does not support this format.',
-    encryptionErrorMessage: 'The media is encrypted and there are no keys to decrypt it.',
-    // overlays
-    watchVideo: 'Watch video',
-    defaultInlineMessage: 'Thanks for your response!',
-};
-/**
- * Create map of media-chrome's i18n keys to string values of the provided translations object
- * https://www.media-chrome.org/docs/en/internationalization/adding-language-support
- */
-export const createTranslationsMap = (translations) => {
-    return {
-        Play: translations.play,
-        play: translations.play,
-        Pause: translations.pause,
-        pause: translations.pause,
-        Mute: translations.mute,
-        mute: translations.mute,
-        Unmute: translations.unmute,
-        unmute: translations.unmute,
-        Off: translations.off,
-        Captions: translations.captions,
-        'Playback rate': translations.playbackSpeed,
-        'playback time': translations.playbackTime,
-        Quality: translations.quality,
-        quality: translations.quality,
-        'Enter fullscreen mode': translations.enterFullscreen,
-        'enter fullscreen mode': translations.enterFullscreen,
-        'Exit fullscreen mode': translations.exitFullscreen,
-        'exit fullscreen mode': translations.exitFullscreen,
-        'Enter picture in picture mode': translations.enterPipMode,
-        'enter picture in picture mode': translations.enterPipMode,
-        'Exit picture in picture mode': translations.exitPipMode,
-        'exit picture in picture mode': translations.exitPipMode,
-        Settings: translations.settings,
-        settings: translations.settings,
-        Auto: translations.auto,
-        'video player': translations.videoPlayer,
-        'audio player': translations.audioPlayer,
-        'media loading': translations.loading,
-        'closed captions': translations.closedCaptions,
-        'Network Error': translations.networkError,
-        'Decode Error': translations.decodeError,
-        'Source Not Supported': translations.sourceNotSupported,
-        'Encryption Error': translations.encryptionError,
-        'A network error caused the media download to fail.': translations.networkErrorMessage,
-        'A media error caused playback to be aborted. The media could be corrupt or your browser does not support this format.': translations.decodeErrorMessage,
-        'An unsupported error occurred. The server or network failed, or your browser does not support this format.': translations.unsupportedErrorMessage,
-        'The media is encrypted and there are no keys to decrypt it.': translations.encryptionErrorMessage,
-    };
-};