@mdcrtrs/player 0.3.0 → 0.4.0
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.
- package/README.md +6 -0
- package/dist/index.cjs +153 -41
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +15 -3
- package/dist/index.d.ts +15 -3
- package/dist/index.js +153 -41
- package/dist/index.js.map +1 -1
- package/package.json +12 -12
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/player.tsx","../src/themes/mediacreators.ts","../src/assets/logo.ts","../src/lang/es.ts","../src/lang/pt.ts","../src/hooks/use-playback-session.ts","../src/types.ts","../src/lib/api.ts","../src/hooks/use-player-events.ts","../src/hooks/use-volume.ts","../src/hooks/use-watch-progress.ts","../src/components/player-branding.tsx","../src/lib/session.ts","../src/lib/theme.ts"],"sourcesContent":["import { type FC, memo, useCallback, useEffect, useMemo, useRef } from \"react\"\nimport MuxPlayer from \"@mux/mux-player-react\"\nimport \"../themes/mediacreators\"\nimport { usePlaybackSession } from \"../hooks/use-playback-session\"\nimport { usePlayerEvents } from \"../hooks/use-player-events\"\nimport { useVolume } from \"../hooks/use-volume\"\nimport { useWatchProgress } from \"../hooks/use-watch-progress\"\nimport { updateBranding } from \"./player-branding\"\nimport { getSessionId } from \"../lib/session\"\nimport { deriveTheme } from \"../lib/theme\"\nimport { PLATFORM } from \"../types\"\nimport type { MediaCreatorsPlayerProps } from \"../types\"\n\nfunction decodeJwtSub(token: string): string | null {\n try {\n const payloadPart = token.split(\".\")[1]\n if (!payloadPart) return null\n const padded = payloadPart + \"==\".slice((payloadPart.length % 4 || 4) - 2)\n const base64 = padded.replace(/-/g, \"+\").replace(/_/g, \"/\")\n const json = JSON.parse(atob(base64)) as { sub?: string }\n return typeof json.sub === \"string\" ? json.sub : null\n } catch {\n return null\n }\n}\n\nexport const MediaCreatorsPlayer: FC<MediaCreatorsPlayerProps> = memo(function MediaCreatorsPlayer({\n creatorId,\n asset,\n auth,\n theme,\n branding,\n config,\n poster,\n metadata,\n autoResume,\n className,\n onTimeUpdate,\n onQuartile,\n onPause,\n onPlay,\n onSeeked,\n onComplete,\n onError,\n onReady,\n onResume,\n}) {\n const durationHint = asset.duration ?? 3600\n const { tokens, isLoading, error } = usePlaybackSession(creatorId, asset.playbackId, durationHint, auth?.fanToken)\n\n const accentSource = config?.accentColor ?? theme?.primaryColor ?? \"#4ae9ab\"\n const colors = useMemo(() => deriveTheme(accentSource), [accentSource])\n const { initialVolume, handleVolumeChange } = useVolume()\n\n const configStyle = useMemo(() => {\n const controls = config?.controls\n const style: Record<string, string> = {}\n if (controls) {\n if (controls.captions === false) style[\"--mc-captions-display\"] = \"none\"\n if (controls.airplay === false) style[\"--mc-airplay-display\"] = \"none\"\n if (controls.pip === false) style[\"--mc-pip-display\"] = \"none\"\n if (controls.cast === false) style[\"--mc-cast-display\"] = \"none\"\n if (controls.storyboard === false) style[\"--mc-storyboard-display\"] = \"none\"\n if (controls.playbackSpeed === false) style[\"--mc-speed-display\"] = \"none\"\n if (controls.quality === false) style[\"--mc-quality-display\"] = \"none\"\n if (controls.playbackSpeed === false && controls.quality === false && controls.captions === false) {\n style[\"--mc-settings-display\"] = \"none\"\n }\n }\n if (config?.branding?.filterToWhite === false) {\n style[\"--mc-branding-filter\"] = \"none\"\n }\n return style\n }, [config?.controls, config?.branding?.filterToWhite])\n const playerRef = useRef<HTMLElement | null>(null)\n const seekDoneRef = useRef(false)\n\n const events = usePlayerEvents(\n { onTimeUpdate, onQuartile, onPause, onPlay, onSeeked, onComplete, onError, onReady, onResume },\n asset.assetId\n )\n\n const { resumePosition, saveProgress } = useWatchProgress(\n creatorId,\n asset.assetId,\n auth?.fanToken,\n autoResume,\n onResume\n )\n\n useEffect(() => {\n import(\"media-chrome/dist/utils/i18n.js\").then(({ setLanguage }) => {\n setLanguage(config?.defaultLanguage ?? \"es\")\n })\n }, [config?.defaultLanguage])\n\n useEffect(() => {\n if (error) {\n onError?.({ code: \"SESSION_ERROR\", message: error.message })\n }\n }, [error, onError])\n\n useEffect(() => {\n seekDoneRef.current = false\n }, [asset.assetId])\n\n useEffect(() => {\n if (seekDoneRef.current) return\n if (resumePosition === null || !playerRef.current) return\n const el = playerRef.current as unknown as HTMLMediaElement\n if (typeof el.currentTime === \"number\") {\n el.currentTime = resumePosition\n seekDoneRef.current = true\n }\n }, [resumePosition, tokens])\n\n const mergedBranding = useMemo(() => {\n const b = branding ?? config?.branding\n if (!b) return undefined\n return {\n logoUrl: b.logoUrl,\n linkUrl: b.linkUrl,\n logoTitle: b.logoTitle,\n }\n }, [branding, config?.branding])\n\n useEffect(() => {\n if (!playerRef.current) return\n updateBranding(playerRef.current, asset.assetId, creatorId, mergedBranding)\n }, [asset.assetId, creatorId, mergedBranding, tokens])\n\n const handlePlayerRef = useCallback(\n (el: HTMLElement | null) => {\n playerRef.current = el\n if (el && initialVolume !== null) {\n ;(el as unknown as HTMLMediaElement).volume = initialVolume\n }\n },\n [initialVolume]\n )\n\n const viewerUserId =\n metadata?.viewerUserId ?? (auth?.fanToken ? decodeJwtSub(auth.fanToken) : null) ?? getSessionId() ?? undefined\n\n if (isLoading || !tokens) {\n return <div className={className} style={{ width: \"100%\", aspectRatio: \"16 / 9\", background: \"#111\" }} />\n }\n\n return (\n <MuxPlayer\n ref={handlePlayerRef}\n className={className}\n theme=\"mediacreators\"\n playbackId={asset.playbackId}\n poster={poster}\n envKey={PLATFORM.dataEnvKey}\n tokens={{\n playback: tokens.video,\n thumbnail: tokens.thumbnail,\n storyboard: tokens.storyboard,\n }}\n primaryColor={colors.primary}\n secondaryColor={colors.secondary}\n accentColor={colors.accent}\n themeProps={{ lang: config?.defaultLanguage ?? \"es\" }}\n defaultHiddenCaptions={!config?.defaultCaptionsLanguage}\n metadata={{\n video_id: asset.assetId,\n video_title: asset.title,\n video_stream_type: \"on-demand\",\n viewer_user_id: viewerUserId,\n sub_property_id: creatorId,\n player_name: metadata?.playerName ?? \"mediacreators-sdk\",\n custom_1: metadata?.custom1 ?? creatorId,\n custom_2: metadata?.custom2 ?? \"sdk\",\n }}\n playsInline\n style={{ width: \"100%\", maxHeight: \"100%\", aspectRatio: \"16 / 9\", ...configStyle }}\n onLoadedData={() => events.handleReady()}\n onTimeUpdate={(e) => {\n const el = e.target as HTMLMediaElement | null\n if (!el) return\n events.handleTimeUpdate(el.currentTime, el.duration)\n if (auth?.fanToken) {\n saveProgress(el.currentTime, el.duration)\n }\n }}\n onPause={(e) => {\n const el = e.target as HTMLMediaElement | null\n events.handlePause(el?.currentTime ?? 0)\n }}\n onPlay={(e) => {\n const el = e.target as HTMLMediaElement | null\n events.handlePlay(el?.currentTime ?? 0)\n }}\n onEnded={() => events.handleComplete()}\n onVolumeChange={(e) => {\n const el = e.target as HTMLMediaElement | null\n if (el && typeof el.volume === \"number\") {\n handleVolumeChange(el.volume)\n }\n }}\n onError={() => events.handleError(\"Playback error\")}\n />\n )\n})\n","import \"media-chrome\"\nimport MediaGestureReceiver from \"media-chrome/dist/media-gesture-receiver.js\"\nimport { MediaThemeElement } from \"media-chrome/dist/media-theme-element.js\"\nimport { addTranslation } from \"media-chrome/dist/utils/i18n.js\"\nimport { globalThis } from \"media-chrome/dist/utils/server-safe-globals.js\"\nimport \"media-chrome/dist/menu/index.js\"\nimport { LOGO_DATA_URI } from \"../assets/logo\"\nimport { Es } from \"../lang/es\"\nimport { Pt } from \"../lang/pt\"\n\naddTranslation(\"es\", Es)\naddTranslation(\"pt\", Pt)\n\n// media-chrome's handleTap() is intentionally empty — mobile taps show/hide controls\n// but never toggle play/pause. For an embed player, tap-to-play is expected behavior.\nMediaGestureReceiver.prototype.handleTap = MediaGestureReceiver.prototype.handleMouseClick\n\nconst template = globalThis.document?.createElement?.(\"template\")\nif (template) {\n template.innerHTML = String.raw /*html*/ `\n <style>\n :host {\n --_primary-color: var(--media-primary-color, #fff);\n --_secondary-color: var(--media-secondary-color, transparent);\n --_accent-color: var(--media-accent-color, #fff);\n }\n\n media-controller {\n --base: 18px;\n\n font-size: calc(0.75 * var(--base));\n font-family: Roboto, Arial, sans-serif;\n --media-font-family: Roboto, helvetica neue, segoe ui, arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n\n --media-primary-color: #fff;\n --media-secondary-color: transparent;\n --media-menu-background: rgba(28, 28, 28, 0.6);\n --media-text-color: var(--_primary-color);\n --media-control-hover-background: var(--media-secondary-color);\n\n --media-range-track-height: calc(0.125 * var(--base));\n --media-range-thumb-height: var(--base);\n --media-range-thumb-width: var(--base);\n --media-range-thumb-border-radius: var(--base);\n\n --media-control-height: calc(2 * var(--base));\n }\n\n media-controller[breakpointmd] {\n --base: 20px;\n }\n\n media-controller[mediaisfullscreen] {\n --base: 24px;\n }\n\n .media-button {\n --media-control-hover-background: var(--_secondary-color);\n --media-tooltip-background: rgb(28 28 28 / .24);\n --media-text-content-height: 1.2;\n --media-tooltip-padding: .7em 1em;\n --media-tooltip-distance: 8px;\n --media-tooltip-container-margin: 18px;\n position: relative;\n padding: 0;\n opacity: 0.9;\n transition: opacity 0.1s cubic-bezier(0.4, 0, 1, 1);\n }\n\n .media-button svg {\n fill: none;\n stroke: var(--_primary-color);\n stroke-width: 1;\n stroke-linecap: 'round';\n stroke-linejoin: 'round';\n }\n\n svg .svg-shadow {\n stroke: #000;\n stroke-opacity: 0.15;\n stroke-width: 2px;\n fill: none;\n }\n </style>\n\n <media-controller\n breakpoints=\"md:480\"\n defaultsubtitles=\"{{defaultsubtitles}}\"\n defaultduration=\"{{defaultduration}}\"\n hotkeys=\"{{hotkeys}}\"\n nohotkeys=\"{{nohotkeys}}\"\n defaultstreamtype=\"on-demand\"\n lang=\"{{lang}}\"\n >\n <slot name=\"media\" slot=\"media\"></slot>\n <slot name=\"poster\" slot=\"poster\"></slot>\n <slot name=\"centered-chrome\" slot=\"centered-chrome\"></slot>\n\n <style>\n media-captions-button { display: var(--mc-captions-display, flex); }\n media-pip-button { display: var(--mc-pip-display, flex); }\n media-airplay-button { display: var(--mc-airplay-display, flex); }\n media-cast-button { display: var(--mc-cast-display, flex); }\n media-preview-thumbnail { display: var(--mc-storyboard-display, block); }\n media-settings-menu-button { display: var(--mc-settings-display, flex); }\n </style>\n <media-error-dialog slot=\"dialog\"></media-error-dialog>\n\n <style>\n .center-play-btn {\n display: none;\n }\n\n media-controller:not([breakpointmd]) .center-play-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n inset: 0;\n z-index: 1;\n pointer-events: none;\n }\n\n media-controller:not([breakpointmd]) .center-play-btn media-play-button {\n pointer-events: auto;\n --media-control-background: rgba(0, 0, 0, 0.6);\n --media-control-hover-background: rgba(0, 0, 0, 0.8);\n --media-control-padding: 0;\n width: 64px;\n height: 64px;\n border-radius: 50%;\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n transition: opacity 0.3s, transform 0.3s;\n }\n\n media-controller:not([breakpointmd]) .center-play-btn media-play-button svg {\n width: 28px;\n height: 28px;\n fill: #fff;\n stroke: none;\n }\n\n media-controller:not([breakpointmd]):is([mediahasplayed]):not([mediapaused]) .center-play-btn {\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.3s;\n }\n </style>\n <div class=\"center-play-btn\" slot=\"centered-chrome\">\n <media-play-button>\n <svg slot=\"icon\" viewBox=\"0 0 24 24\">\n <path d=\"M8 5.14v14l11-7-11-7z\" fill=\"#fff\" />\n </svg>\n </media-play-button>\n </div>\n\n <style>\n .media-gradient-bottom {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: calc(8 * var(--base));\n pointer-events: none;\n }\n\n .media-gradient-bottom::before {\n content: '';\n --gradient-steps: hsl(0 0% 0% / 0) 0%, hsl(0 0% 0% / 0.013) 8.1%, hsl(0 0% 0% / 0.049) 15.5%,\n hsl(0 0% 0% / 0.104) 22.5%, hsl(0 0% 0% / 0.175) 29%, hsl(0 0% 0% / 0.259) 35.3%, hsl(0 0% 0% / 0.352) 41.2%,\n hsl(0 0% 0% / 0.45) 47.1%, hsl(0 0% 0% / 0.55) 52.9%, hsl(0 0% 0% / 0.648) 58.8%, hsl(0 0% 0% / 0.741) 64.7%,\n hsl(0 0% 0% / 0.825) 71%, hsl(0 0% 0% / 0.896) 77.5%, hsl(0 0% 0% / 0.951) 84.5%, hsl(0 0% 0% / 0.987) 91.9%,\n hsl(0 0% 0%) 100%;\n\n position: absolute;\n inset: 0;\n opacity: 0.7;\n background: linear-gradient(to bottom, var(--gradient-steps));\n }\n </style>\n <div class=\"media-gradient-bottom\" style=\"position: absolute; bottom: 0; width: 100%; pointer-events: none\"></div>\n\n <style>\n media-settings-menu {\n --media-menu-icon-height: 20px;\n --media-menu-item-icon-height: 20px;\n --media-settings-menu-min-width: calc(10 * var(--base));\n --media-menu-transform-in: translateY(0) scale(1);\n --media-menu-transform-out: translateY(20px) rotate(3deg) scale(1);\n padding-block: calc(0.15 * var(--base));\n margin-right: 10px;\n margin-bottom: 17px;\n border-radius: 8px;\n z-index: 2;\n user-select: none;\n }\n\n media-settings-menu-item,\n [role='menu']::part(menu-item) {\n --media-icon-color: var(--_primary-color);\n margin-inline: calc(0.45 * var(--base));\n height: calc(1.6 * var(--base));\n font-size: calc(0.7 * var(--base));\n font-weight: 400;\n padding: 0;\n padding-left: calc(0.4 * var(--base));\n padding-right: calc(0.1 * var(--base));\n border-radius: 6px;\n text-shadow: none;\n }\n\n [slot='submenu']::part(back button) {\n font-size: calc(0.7 * var(--base));\n }\n\n media-settings-menu-item:hover {\n --media-icon-color: #000;\n color: #000;\n background-color: #fff;\n }\n\n media-settings-menu-item:hover [slot='submenu']::part(menu-item),\n [slot='submenu']::part(back indicator) {\n --media-icon-color: var(--_primary-color);\n }\n\n media-settings-menu-item:hover [slot='submenu']::part(menu-item):hover {\n --media-icon-color: #000;\n color: #000;\n background-color: #fff;\n }\n\n media-settings-menu-item[submenusize='0'] {\n display: none;\n }\n\n .quality-settings[submenusize='1'] {\n display: none;\n }\n\n .mc-speed-item { display: var(--mc-speed-display, flex); }\n .mc-quality-item { display: var(--mc-quality-display, flex); }\n .mc-captions-item { display: var(--mc-captions-display, flex); }\n\n .mc-label { font-size: 0; line-height: 0; }\n .mc-label::after { font-size: calc(0.7 * var(--base)); line-height: normal; }\n .mc-label::after { content: attr(data-en); }\n media-controller[lang=\"es\"] .mc-label::after { content: attr(data-es); }\n media-controller[lang=\"pt\"] .mc-label::after { content: attr(data-pt); }\n </style>\n <media-settings-menu hidden anchor=\"auto\">\n <media-settings-menu-item class=\"mc-speed-item\">\n <span class=\"mc-label\" data-en=\"Playback Speed\" data-es=\"Velocidad de reproducción\" data-pt=\"Velocidade de reprodução\"></span>\n <media-playback-rate-menu slot=\"submenu\" hidden>\n <div slot=\"title\"><span class=\"mc-label\" data-en=\"Playback Speed\" data-es=\"Velocidad de reproducción\" data-pt=\"Velocidade de reprodução\"></span></div>\n </media-playback-rate-menu>\n </media-settings-menu-item>\n <media-settings-menu-item class=\"mc-quality-item quality-settings\">\n <span class=\"mc-label\" data-en=\"Quality\" data-es=\"Calidad\" data-pt=\"Qualidade\"></span>\n <media-rendition-menu slot=\"submenu\" hidden>\n <div slot=\"title\"><span class=\"mc-label\" data-en=\"Quality\" data-es=\"Calidad\" data-pt=\"Qualidade\"></span></div>\n </media-rendition-menu>\n </media-settings-menu-item>\n <media-settings-menu-item class=\"mc-captions-item\">\n <span class=\"mc-label\" data-en=\"Subtitles/CC\" data-es=\"Subtítulos\" data-pt=\"Legendas\"></span>\n <media-captions-menu slot=\"submenu\" hidden>\n <div slot=\"title\"><span class=\"mc-label\" data-en=\"Subtitles/CC\" data-es=\"Subtítulos\" data-pt=\"Legendas\"></span></div>\n </media-captions-menu>\n </media-settings-menu-item>\n </media-settings-menu>\n\n <style>\n media-control-bar {\n position: absolute;\n height: calc(2 * var(--base));\n line-height: calc(2 * var(--base));\n bottom: var(--base);\n left: var(--base);\n right: var(--base);\n }\n </style>\n <media-control-bar style=\"position: absolute; bottom: var(--base); left: var(--base); right: var(--base); height: calc(2 * var(--base)); line-height: calc(2 * var(--base))\">\n <style>\n @keyframes bounce-scale-play {\n 0% {\n transform: scale(0.75, 0.75);\n }\n 50% {\n transform: scale(115%, 115%);\n }\n 100% {\n transform: scale(1, 1);\n }\n }\n\n .media-button {\n border-radius: 25%;\n backdrop-filter: blur(10px) invert(15%) brightness(80%) opacity(0);\n -webkit-backdrop-filter: blur(10px) invert(15%) brightness(80%) opacity(0);\n transition: backdrop-filter 0.3s, -webkit-backdrop-filter 0.3s, box-shadow 0.3s;\n }\n\n .media-button:hover {\n box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px;\n backdrop-filter: blur(10px) invert(15%) brightness(80%) opacity(1);\n -webkit-backdrop-filter: blur(10px) invert(15%) brightness(80%) opacity(1);\n transition: backdrop-filter 0.3s, -webkit-backdrop-filter 0.3s;\n }\n\n media-play-button #icon-play {\n opacity: 0;\n transform-box: view-box;\n transform-origin: center center;\n transform: scale(0.5, 0.5);\n transition: all 0.5s;\n }\n\n media-play-button[mediapaused] #icon-play {\n opacity: 1;\n transform: scale(1, 1);\n animation: 0.35s bounce-scale-play ease-in-out;\n }\n\n @keyframes bounce-pause-left {\n 0% {\n font-size: 10px;\n }\n 50% {\n font-size: 3px;\n }\n 100% {\n font-size: 4px;\n }\n }\n\n @keyframes bounce-pause-right {\n 0% {\n font-size: 10px;\n transform: translateX(-8px);\n }\n 50% {\n font-size: 3px;\n transform: translateX(1px);\n }\n 100% {\n font-size: 4px;\n transform: translateX(0);\n }\n }\n\n media-play-button #pause-left,\n media-play-button #pause-right {\n font-size: 4px;\n opacity: 1;\n transform: translateX(0);\n transform-box: view-box;\n }\n\n media-play-button:not([mediapaused]) #pause-left {\n animation: 0.3s bounce-pause-left ease-out;\n }\n\n media-play-button:not([mediapaused]) #pause-right {\n animation: 0.3s bounce-pause-right ease-out;\n }\n\n media-play-button[mediapaused] #pause-left,\n media-play-button[mediapaused] #pause-right {\n opacity: 0;\n font-size: 10px;\n }\n\n media-play-button[mediapaused] #pause-right {\n transform-origin: right center;\n transform: translateX(-8px);\n }\n </style>\n <media-play-button mediapaused class=\"media-button\">\n <svg slot=\"icon\" viewBox=\"0 0 32 32\">\n <g>\n <path\n id=\"icon-play\"\n d=\"M20.7131 14.6976C21.7208 15.2735 21.7208 16.7265 20.7131 17.3024L12.7442 21.856C11.7442 22.4274 10.5 21.7054 10.5 20.5536L10.5 11.4464C10.5 10.2946 11.7442 9.57257 12.7442 10.144L20.7131 14.6976Z\"\n />\n </g>\n <g id=\"icon-pause\">\n <rect id=\"pause-left\" x=\"10.5\" width=\"1em\" y=\"10.5\" height=\"11\" rx=\"0.5\" />\n <rect id=\"pause-right\" x=\"17.5\" width=\"1em\" y=\"10.5\" height=\"11\" rx=\"0.5\" />\n </g>\n </svg>\n </media-play-button>\n\n <style>\n media-mute-button {\n position: relative;\n }\n\n media-mute-button .muted-path {\n transition: clip-path 0.2s ease-out;\n }\n\n media-mute-button #muted-path-2 {\n transition-delay: 0.2s;\n }\n\n media-mute-button .muted-path {\n clip-path: inset(0);\n }\n\n media-mute-button:not([mediavolumelevel='off']) #muted-path-1 {\n clip-path: inset(0 0 100% 0);\n }\n\n media-mute-button:not([mediavolumelevel='off']) #muted-path-2 {\n clip-path: inset(0 0 100% 0);\n }\n\n media-mute-button .muted-path {\n opacity: 0;\n }\n\n media-mute-button[mediavolumelevel='off'] .muted-path {\n opacity: 1;\n }\n\n media-mute-button .vol-path {\n opacity: 1;\n transition: opacity 0.4s;\n }\n\n media-mute-button[mediavolumelevel='off'] .vol-path {\n opacity: 0;\n }\n\n media-mute-button[mediavolumelevel='low'] #vol-high-path,\n media-mute-button[mediavolumelevel='medium'] #vol-high-path {\n opacity: 0;\n }\n\n media-volume-range {\n --media-range-track-background: rgba(255, 255, 255, 0.2);\n --media-range-thumb-opacity: 0;\n }\n\n @keyframes volume-in {\n 0% {\n visibility: hidden;\n opacity: 0;\n transform: translateY(50%) rotate(1deg);\n }\n 50% {\n visibility: visible;\n opacity: 1;\n transform: rotate(-2deg);\n }\n 100% {\n visibility: visible;\n opacity: 1;\n transform: translateY(0) rotate(0deg);\n }\n }\n\n @keyframes volume-out {\n 0% {\n visibility: visible;\n opacity: 1;\n transform: translateY(0) rotate(0deg);\n }\n 50% {\n opacity: 1;\n transform: rotate(0deg);\n }\n 100% {\n visibility: hidden;\n opacity: 0;\n transform: translateY(50%) rotate(1deg);\n }\n }\n\n .media-volume-range-wrapper {\n opacity: 0;\n visibility: hidden;\n\n position: absolute;\n top: -100%;\n left: calc(2 * var(--base));\n\n width: calc(10 * var(--base));\n height: calc(2.5 * var(--base));\n transform-origin: center left;\n }\n\n media-volume-range {\n opacity: 0;\n transition: opacity 0s 1s;\n\n width: calc(10 * var(--base));\n height: var(--base);\n padding: 0;\n border-radius: calc(0.25 * var(--base));\n overflow: hidden;\n background: rgba(0, 0, 0, 0.2);\n\n --media-range-bar-color: var(--media-accent-color);\n\n --media-range-padding-left: 0;\n --media-range-padding-right: 0;\n\n --media-range-track-width: calc(10 * var(--base));\n --media-range-track-height: var(--base);\n --media-range-track-border-radius: calc(0.25 * var(--base));\n --media-range-track-backdrop-filter: blur(10px) brightness(80%);\n\n --media-range-thumb-width: var(--base);\n --media-range-thumb-border-radius: calc(0.25 * var(--base));\n }\n\n media-volume-range[mediavolume] {\n opacity: 1;\n }\n\n [keyboardcontrol] media-volume-range:focus {\n outline: 1px solid rgba(27, 127, 204, 0.9);\n }\n\n media-mute-button:hover + .media-volume-range-wrapper,\n media-mute-button:focus + .media-volume-range-wrapper,\n media-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 animation: 0.3s volume-in forwards ease-out;\n }\n\n .media-volume-range-wrapper:not(:hover, :focus-within) {\n animation: 0.3s volume-out ease-out;\n }\n\n [keyboardcontrol] .media-volume-range-wrapper,\n [keyboardcontrol] .media-volume-range-wrapper:focus-within,\n [keyboardcontrol] .media-volume-range-wrapper:focus-within media-volume-range {\n visibility: visible;\n }\n </style>\n <media-mute-button class=\"media-button\" notooltip>\n <use class=\"svg-shadow\" xlink:href=\"#vol-paths\"></use>\n <svg slot=\"icon\" viewBox=\"0 0 32 32\">\n <g id=\"vol-paths\">\n <path\n id=\"speaker-path\"\n d=\"M16.5 20.486v-8.972c0-1.537-2.037-2.08-2.802-.745l-1.026 1.79a2.5 2.5 0 0 1-.8.85l-1.194.78A1.5 1.5 0 0 0 10 15.446v1.11c0 .506.255.978.678 1.255l1.194.782a2.5 2.5 0 0 1 .8.849l1.026 1.79c.765 1.334 2.802.792 2.802-.745Z\"\n />\n <path\n id=\"vol-low-path\"\n class=\"vol-path\"\n d=\"M18.5 18C19.6046 18 20.5 17.1046 20.5 16C20.5 14.8954 19.6046 14 18.5 14\"\n />\n <path\n id=\"vol-high-path\"\n class=\"vol-path\"\n d=\"M18 21C20.7614 21 23 18.7614 23 16C23 13.2386 20.7614 11 18 11\"\n />\n <path id=\"muted-path-1\" class=\"muted-path\" d=\"M23 18L19 14\" />\n <path id=\"muted-path-2\" class=\"muted-path\" d=\"M23 14L19 18\" />\n </g>\n </svg>\n </media-mute-button>\n <div class=\"media-volume-range-wrapper\">\n <media-volume-range></media-volume-range>\n </div>\n\n <style>\n media-time-display {\n position: relative;\n padding: calc(0.5 * var(--base));\n font-size: calc(0.7 * var(--base));\n border-radius: calc(0.5 * var(--base));\n }\n\n media-controller[breakpointmd] media-time-display:not([showduration]) {\n display: none;\n }\n\n media-controller:not([breakpointmd]) media-time-display[showduration] {\n display: none;\n }\n </style>\n <media-time-display></media-time-display>\n <media-time-display showduration></media-time-display>\n\n <style>\n media-time-range {\n height: calc(2 * var(--base));\n border-radius: calc(0.25 * var(--base));\n\n --media-range-track-backdrop-filter: invert(10%) blur(5px) brightness(110%);\n --media-range-track-background: rgba(255, 255, 255, 0.2);\n --media-range-track-pointer-background: rgba(255, 255, 255, 0.5);\n --media-range-track-border-radius: calc(0.25 * var(--base));\n\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-background: var(--media-accent-color);\n --media-range-thumb-transition: opacity 0.1s linear;\n --media-range-thumb-opacity: 0;\n\n --media-preview-thumbnail-border: calc(0.125 * var(--base)) solid #fff;\n --media-preview-thumbnail-border-radius: calc(0.5 * var(--base));\n --media-preview-thumbnail-min-width: calc(8 * var(--base));\n --media-preview-thumbnail-max-width: calc(10 * var(--base));\n --media-preview-thumbnail-min-height: calc(5 * var(--base));\n --media-preview-thumbnail-max-height: calc(7 * var(--base));\n --media-preview-box-margin: 0 0 -10px;\n }\n media-time-range:hover {\n --media-range-thumb-opacity: 1;\n --media-range-track-height: calc(0.25 * var(--base));\n }\n\n media-preview-thumbnail {\n margin-bottom: 5px;\n }\n\n media-preview-chapter-display {\n font-size: calc(0.6 * var(--base));\n padding-block: 0;\n }\n\n media-preview-time-display {\n font-size: calc(0.65 * var(--base));\n padding-top: 0;\n }\n </style>\n <media-time-range>\n <media-preview-thumbnail slot=\"preview\"></media-preview-thumbnail>\n <media-preview-chapter-display slot=\"preview\"></media-preview-chapter-display>\n <media-preview-time-display slot=\"preview\"></media-preview-time-display>\n </media-time-range>\n\n <style>\n media-captions-button {\n position: relative;\n }\n\n media-controller:not([breakpointmd]) media-captions-button {\n display: none;\n }\n\n media-captions-button svg :is(path, rect) {\n stroke: none;\n fill: var(--_primary-color);\n }\n\n media-captions-button:not([mediasubtitleslist]) svg {\n opacity: 0.3;\n }\n\n media-captions-button #cc-underline {\n opacity: 1;\n }\n\n media-captions-button[mediasubtitleslist][aria-checked='true'] #cc-underline {\n opacity: 1;\n }\n\n media-captions-button #cc-underline {\n transition: clip-path 0.15s ease-out;\n }\n\n media-captions-button #cc-underline {\n clip-path: inset(0 100% 0 0);\n }\n\n media-captions-button[aria-checked='true'] #cc-underline {\n clip-path: inset(0 0 0 0);\n }\n </style>\n <media-captions-button class=\"media-button\">\n <svg slot=\"icon\" viewBox=\"0 0 32 32\">\n <use class=\"svg-shadow\" xlink:href=\"#cc-icon\"></use>\n <g id=\"cc-icon\">\n <path\n class=\"cc-c\"\n d=\"M15.6634 14.3574H14.5636C14.4985 14.0523 14.3847 13.7842 14.2221 13.5532C14.0624 13.3222 13.8673 13.1283 13.6367 12.9715C13.409 12.8118 13.1562 12.692 12.8783 12.6122C12.6004 12.5323 12.3107 12.4924 12.0091 12.4924C11.4592 12.4924 10.961 12.6264 10.5146 12.8945C10.0711 13.1625 9.71776 13.5575 9.45463 14.0794C9.19445 14.6012 9.06436 15.2414 9.06436 16C9.06436 16.7586 9.19445 17.3988 9.45463 17.9206C9.71776 18.4425 10.0711 18.8375 10.5146 19.1055C10.961 19.3736 11.4592 19.5076 12.0091 19.5076C12.3107 19.5076 12.6004 19.4677 12.8783 19.3878C13.1562 19.308 13.409 19.1896 13.6367 19.0328C13.8673 18.8731 14.0624 18.6778 14.2221 18.4468C14.3847 18.2129 14.4985 17.9449 14.5636 17.6426H15.6634C15.5806 18.0903 15.4298 18.491 15.2111 18.8446C14.9923 19.1982 14.7203 19.499 14.3951 19.7471C14.0698 19.9924 13.7047 20.1792 13.2996 20.3075C12.8976 20.4358 12.4674 20.5 12.0091 20.5C11.2345 20.5 10.5456 20.3175 9.94246 19.9525C9.33932 19.5875 8.8648 19.0684 8.51888 18.3954C8.17296 17.7224 8 16.924 8 16C8 15.076 8.17296 14.2776 8.51888 13.6046C8.8648 12.9316 9.33932 12.4125 9.94246 12.0475C10.5456 11.6825 11.2345 11.5 12.0091 11.5C12.4674 11.5 12.8976 11.5642 13.2996 11.6925C13.7047 11.8208 14.0698 12.009 14.3951 12.2571C14.7203 12.5024 14.9923 12.8018 15.2111 13.1554C15.4298 13.5062 15.5806 13.9068 15.6634 14.3574Z\"\n />\n <path\n class=\"cc-c\"\n d=\"M24 14.3574H22.9002C22.8351 14.0523 22.7213 13.7842 22.5587 13.5532C22.399 13.3222 22.2039 13.1283 21.9733 12.9715C21.7456 12.8118 21.4928 12.692 21.2149 12.6122C20.937 12.5323 20.6473 12.4924 20.3457 12.4924C19.7958 12.4924 19.2976 12.6264 18.8511 12.8945C18.4077 13.1625 18.0543 13.5575 17.7912 14.0794C17.531 14.6012 17.4009 15.2414 17.4009 16C17.4009 16.7586 17.531 17.3988 17.7912 17.9206C18.0543 18.4425 18.4077 18.8375 18.8511 19.1055C19.2976 19.3736 19.7958 19.5076 20.3457 19.5076C20.6473 19.5076 20.937 19.4677 21.2149 19.3878C21.4928 19.308 21.7456 19.1896 21.9733 19.0328C22.2039 18.8731 22.399 18.6778 22.5587 18.4468C22.7213 18.2129 22.8351 17.9449 22.9002 17.6426H24C23.9172 18.0903 23.7664 18.491 23.5476 18.8446C23.3289 19.1982 23.0569 19.499 22.7316 19.7471C22.4064 19.9924 22.0413 20.1792 21.6362 20.3075C21.2341 20.4358 20.804 20.5 20.3457 20.5C19.5711 20.5 18.8822 20.3175 18.279 19.9525C17.6759 19.5875 17.2014 19.0684 16.8555 18.3954C16.5095 17.7224 16.3366 16.924 16.3366 16C16.3366 15.076 16.5095 14.2776 16.8555 13.6046C17.2014 12.9316 17.6759 12.4125 18.279 12.0475C18.8822 11.6825 19.5711 11.5 20.3457 11.5C20.804 11.5 21.2341 11.5642 21.6362 11.6925C22.0413 11.8208 22.4064 12.009 22.7316 12.2571C23.0569 12.5024 23.3289 12.8018 23.5476 13.1554C23.7664 13.5062 23.9172 13.9068 24 14.3574Z\"\n />\n <rect id=\"cc-underline\" x=\"8\" y=\"23\" width=\"16\" height=\"1\" rx=\"0.5\" />\n </g>\n </svg>\n </media-captions-button>\n\n <style>\n media-settings-menu-button svg {\n transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1);\n transform: rotateZ(0deg);\n }\n media-settings-menu-button[aria-expanded='true'] svg {\n transform: rotateZ(30deg);\n }\n </style>\n <media-settings-menu-button class=\"media-button\">\n <svg slot=\"icon\" viewBox=\"0 0 32 32\">\n <use class=\"svg-shadow\" xlink:href=\"#settings-icon\"></use>\n <g id=\"settings-icon\">\n <path\n d=\"M16 18C17.1046 18 18 17.1046 18 16C18 14.8954 17.1046 14 16 14C14.8954 14 14 14.8954 14 16C14 17.1046 14.8954 18 16 18Z\"\n />\n <path\n d=\"M21.0176 13.0362L20.9715 12.9531C20.8445 12.7239 20.7797 12.4629 20.784 12.1982L20.8049 10.8997C20.8092 10.6343 20.675 10.3874 20.4545 10.2549L18.5385 9.10362C18.3186 8.97143 18.0472 8.9738 17.8293 9.10981L16.7658 9.77382C16.5485 9.90953 16.2999 9.98121 16.0465 9.98121H15.9543C15.7004 9.98121 15.4513 9.90922 15.2336 9.77295L14.1652 9.10413C13.9467 8.96728 13.674 8.96518 13.4535 9.09864L11.5436 10.2545C11.3242 10.3873 11.1908 10.6336 11.1951 10.8981L11.216 12.1982C11.2203 12.4629 11.1555 12.7239 11.0285 12.9531L10.9831 13.0351C10.856 13.2645 10.6715 13.4535 10.4493 13.5819L9.36075 14.2109C9.13763 14.3398 8.99942 14.5851 9 14.8511L9.00501 17.152C9.00559 17.4163 9.1432 17.6597 9.36476 17.7883L10.4481 18.4167C10.671 18.546 10.8559 18.7364 10.9826 18.9673L11.0313 19.0559C11.1565 19.284 11.2203 19.5431 11.2161 19.8059L11.1951 21.1003C11.1908 21.3657 11.325 21.6126 11.5456 21.7452L13.4615 22.8964C13.6814 23.0286 13.9528 23.0262 14.1707 22.8902L15.2342 22.2262C15.4515 22.0905 15.7001 22.0188 15.9535 22.0188H16.0457C16.2996 22.0188 16.5487 22.0908 16.7664 22.227L17.8348 22.8959C18.0534 23.0327 18.326 23.0348 18.5465 22.9014L20.4564 21.7455C20.6758 21.6127 20.8092 21.3664 20.8049 21.1019L20.784 19.8018C20.7797 19.5371 20.8445 19.2761 20.9715 19.0469L21.0169 18.9649C21.144 18.7355 21.3285 18.5465 21.5507 18.4181L22.6393 17.7891C22.8624 17.6602 23.0006 17.4149 23 17.1489L22.995 14.848C22.9944 14.5837 22.8568 14.3403 22.6352 14.2117L21.5493 13.5818C21.328 13.4534 21.1442 13.2649 21.0176 13.0362Z\"\n />\n </g>\n </svg>\n </media-settings-menu-button>\n\n <style>\n media-pip-button[mediapipunavailable] {\n display: none;\n }\n </style>\n <media-pip-button class=\"media-button\">\n <svg slot=\"icon\" viewBox=\"0 0 32 32\">\n <use class=\"svg-shadow\" xlink:href=\"#pip-icon\"></use>\n <g id=\"pip-icon\">\n <path\n d=\"M12 22H9.77778C9.34822 22 9 21.6162 9 21.1429V10.8571C9 10.3838 9.34822 10 9.77778 10L22.2222 10C22.6518 10 23 10.3838 23 10.8571V12.5714\"\n />\n <path\n d=\"M15 21.5714V16.4286C15 16.1919 15.199 16 15.4444 16H22.5556C22.801 16 23 16.1919 23 16.4286V17V21.5714C23 21.8081 22.801 22 22.5556 22H20.3333H17.6667H15.4444C15.199 22 15 21.8081 15 21.5714Z\"\n />\n </g>\n </svg>\n </media-pip-button>\n\n <media-airplay-button class=\"media-button\">\n <svg viewBox=\"0 0 32 32\" aria-hidden=\"true\" slot=\"icon\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M20.5 20h1.722c.43 0 .778-.32.778-.714v-8.572c0-.394-.348-.714-.778-.714H9.778c-.43 0-.778.32-.778.714v1.429\"/>\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11.5 20H9.778c-.43 0-.778-.32-.778-.714v-8.572c0-.394.348-.714.778-.714h12.444c.43 0 .778.32.778.714v1.429\"/>\n <path stroke-linejoin=\"round\" d=\"m16 19 3.464 3.75h-6.928L16 19Z\"/>\n </svg>\n </media-airplay-button>\n\n <media-cast-button class=\"media-button\">\n <svg slot=\"icon\" viewBox=\"0 0 32 32\">\n <use class=\"svg-shadow\" xlink:href=\"#cast-icon\"></use>\n <g id=\"cast-icon\">\n <path\n d=\"M18.5 21.833h4.167c.46 0 .833-.373.833-.833V11a.833.833 0 0 0-.833-.833H9.333A.833.833 0 0 0 8.5 11v1.111m0 8.056c.92 0 1.667.746 1.667 1.666M8.5 17.667a4.167 4.167 0 0 1 4.167 4.166\"\n />\n <path d=\"M8.5 15.167a6.667 6.667 0 0 1 6.667 6.666\" />\n </g>\n </svg>\n </media-cast-button>\n\n <style>\n media-fullscreen-button .fs-arrow {\n translate: 0% 0%;\n }\n media-fullscreen-button:hover .fs-arrow {\n animation: 0.35s up-left-bounce cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n media-fullscreen-button:hover #fs-enter-top,\n media-fullscreen-button:hover #fs-exit-bottom {\n animation-name: up-right-bounce;\n }\n\n media-fullscreen-button:hover #fs-enter-bottom,\n media-fullscreen-button:hover #fs-exit-top {\n animation-name: down-left-bounce;\n }\n\n @keyframes up-left-bounce {\n 0% {\n translate: 0 0;\n }\n 50% {\n translate: -4% -4%;\n }\n }\n @keyframes up-right-bounce {\n 0% {\n translate: 0 0;\n }\n 50% {\n translate: 4% -4%;\n }\n }\n @keyframes down-left-bounce {\n 0% {\n translate: 0 0;\n }\n 50% {\n translate: -4% 4%;\n }\n }\n @keyframes down-right-bounce {\n 0% {\n translate: 0 0;\n }\n 50% {\n translate: 4% 4%;\n }\n }\n </style>\n <media-fullscreen-button class=\"media-button\">\n <svg slot=\"enter\" viewBox=\"0 0 32 32\">\n <use class=\"svg-shadow\" xlink:href=\"#fs-enter-paths\"></use>\n <g id=\"fs-enter-paths\">\n <g id=\"fs-enter-top\" class=\"fs-arrow\">\n <path d=\"M18 10H22V14\" />\n <path d=\"M22 10L18 14\" />\n </g>\n <g id=\"fs-enter-bottom\" class=\"fs-arrow\">\n <path d=\"M14 22L10 22V18\" />\n <path d=\"M10 22L14 18\" />\n </g>\n </g>\n </svg>\n <svg slot=\"exit\" viewBox=\"0 0 32 32\">\n <use class=\"svg-shadow\" xlink:href=\"#fs-exit-paths\"></use>\n <g id=\"fs-exit-paths\">\n <g id=\"fs-exit-top\" class=\"fs-arrow\">\n <path d=\"M22 14H18V10\" />\n <path d=\"M22 10L18 14\" />\n </g>\n <g id=\"fs-exit-bottom\" class=\"fs-arrow\">\n <path d=\"M10 18L14 18V22\" />\n <path d=\"M14 18L10 22\" />\n </g>\n </g>\n </svg>\n </media-fullscreen-button>\n <style>\n .mc-branding {\n display: flex;\n align-items: center;\n padding: 0 calc(0.25 * var(--base));\n position: relative;\n --media-tooltip-background: rgb(28 28 28 / .24);\n --media-tooltip-padding: .7em 1em;\n --media-tooltip-distance: 8px;\n --media-tooltip-container-margin: 18px;\n --media-text-content-height: 1.2;\n }\n\n .mc-branding a {\n display: flex;\n align-items: center;\n height: calc(2 * var(--base));\n padding: 0 calc(0.4 * var(--base));\n opacity: 0.6;\n filter: var(--mc-branding-filter, brightness(0) invert(1));\n transition: opacity 0.3s;\n text-decoration: none;\n border-radius: 25%;\n }\n\n .mc-branding a:hover {\n opacity: 1;\n filter: none;\n box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px;\n backdrop-filter: blur(10px) invert(15%) brightness(80%);\n -webkit-backdrop-filter: blur(10px) invert(15%) brightness(80%);\n }\n\n .mc-branding img {\n height: calc(1.2 * var(--base));\n width: auto;\n display: block;\n }\n\n .mc-branding media-tooltip {\n max-width: 0;\n overflow-x: clip;\n opacity: 0;\n transition: opacity .3s, max-width 0s 9s;\n }\n\n .mc-branding:hover media-tooltip {\n max-width: 100vw;\n opacity: 1;\n transition: opacity .3s;\n }\n </style>\n <div class=\"mc-branding\">\n <a href=\"https://mediacreators.io\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"MediaCreators\" data-branding-link>\n <img src=\"${LOGO_DATA_URI}\" alt=\"\" draggable=\"false\" data-branding-logo />\n </a>\n <media-tooltip placement=\"top\" data-branding-tooltip>MediaCreators</media-tooltip>\n </div>\n </media-control-bar>\n </media-controller>\n\n `\n}\n\nclass MediaThemeMediacreatorsElement extends MediaThemeElement {\n static template = template\n}\n\nif (globalThis.customElements && !globalThis.customElements.get(\"media-theme-mediacreators\")) {\n globalThis.customElements.define(\"media-theme-mediacreators\", MediaThemeMediacreatorsElement)\n}\n\nexport default MediaThemeMediacreatorsElement\n","import logo from \"./mdcrtrsxdclb000f3b6tm98p15rp.png\"\n\nexport const LOGO_DATA_URI = logo\n","import type { TranslateDictionary } from \"media-chrome/dist/lang/en.js\"\n\nexport const Es: TranslateDictionary = {\n \"Start airplay\": \"Iniciar AirPlay\",\n \"Stop airplay\": \"Detener AirPlay\",\n Audio: \"Audio\",\n Captions: \"Subtítulos\",\n \"Enable captions\": \"Activar subtítulos\",\n \"Disable captions\": \"Desactivar subtítulos\",\n \"Start casting\": \"Iniciar transmisión\",\n \"Stop casting\": \"Detener transmisión\",\n \"Enter fullscreen mode\": \"Pantalla completa\",\n \"Exit fullscreen mode\": \"Salir de pantalla completa\",\n Mute: \"Silenciar\",\n Unmute: \"Activar sonido\",\n Loop: \"Repetir\",\n \"Enter picture in picture mode\": \"Entrar en picture-in-picture\",\n \"Exit picture in picture mode\": \"Salir de picture-in-picture\",\n Play: \"Reproducir\",\n Pause: \"Pausar\",\n \"Playback rate\": \"Velocidad de reproducción\",\n \"Playback rate {playbackRate}\": \"Velocidad {playbackRate}\",\n Quality: \"Calidad\",\n \"Seek backward\": \"Retroceder\",\n \"Seek forward\": \"Avanzar\",\n Settings: \"Configuración\",\n Auto: \"Automático\",\n \"audio player\": \"reproductor de audio\",\n \"video player\": \"reproductor de video\",\n volume: \"volumen\",\n seek: \"buscar\",\n \"closed captions\": \"subtítulos\",\n \"current playback rate\": \"velocidad actual\",\n \"playback time\": \"tiempo de reproducción\",\n \"media loading\": \"cargando\",\n settings: \"configuración\",\n \"audio tracks\": \"pistas de audio\",\n quality: \"calidad\",\n play: \"reproducir\",\n pause: \"pausar\",\n mute: \"silenciar\",\n unmute: \"activar sonido\",\n \"chapter: {chapterName}\": \"capítulo: {chapterName}\",\n live: \"en vivo\",\n Off: \"Desactivado\",\n \"start airplay\": \"iniciar AirPlay\",\n \"stop airplay\": \"detener AirPlay\",\n \"start casting\": \"iniciar transmisión\",\n \"stop casting\": \"detener transmisión\",\n \"enter fullscreen mode\": \"pantalla completa\",\n \"exit fullscreen mode\": \"salir de pantalla completa\",\n \"enter picture in picture mode\": \"entrar en picture-in-picture\",\n \"exit picture in picture mode\": \"salir de picture-in-picture\",\n \"seek to live\": \"ir a en vivo\",\n \"playing live\": \"en vivo\",\n \"seek back {seekOffset} seconds\": \"retroceder {seekOffset} segundos\",\n \"seek forward {seekOffset} seconds\": \"avanzar {seekOffset} segundos\",\n \"Network Error\": \"Error de red\",\n \"Decode Error\": \"Error de decodificación\",\n \"Source Not Supported\": \"Fuente no soportada\",\n \"Encryption Error\": \"Error de cifrado\",\n \"A network error caused the media download to fail.\": \"Un error de red causó que la descarga fallara.\",\n \"A media error caused playback to be aborted. The media could be corrupt or your browser does not support this format.\":\n \"Un error causó que la reproducción se interrumpiera. El archivo puede estar dañado o tu navegador no soporta este formato.\",\n \"An unsupported error occurred. The server or network failed, or your browser does not support this format.\":\n \"Ocurrió un error. El servidor o la red fallaron, o tu navegador no soporta este formato.\",\n \"The media is encrypted and there are no keys to decrypt it.\":\n \"El contenido está cifrado y no hay claves para descifrarlo.\",\n hour: \"hora\",\n hours: \"horas\",\n minute: \"minuto\",\n minutes: \"minutos\",\n second: \"segundo\",\n seconds: \"segundos\",\n \"{time} remaining\": \"{time} restante\",\n \"{currentTime} of {totalTime}\": \"{currentTime} de {totalTime}\",\n \"video not loaded, unknown time.\": \"video no cargado, tiempo desconocido.\",\n}\n","import type { TranslateDictionary } from \"media-chrome/dist/lang/en.js\"\n\nexport const Pt: TranslateDictionary = {\n \"Start airplay\": \"Iniciar AirPlay\",\n \"Stop airplay\": \"Parar AirPlay\",\n Audio: \"Áudio\",\n Captions: \"Legendas\",\n \"Enable captions\": \"Ativar legendas\",\n \"Disable captions\": \"Desativar legendas\",\n \"Start casting\": \"Iniciar transmissão\",\n \"Stop casting\": \"Parar transmissão\",\n \"Enter fullscreen mode\": \"Tela cheia\",\n \"Exit fullscreen mode\": \"Sair da tela cheia\",\n Mute: \"Silenciar\",\n Unmute: \"Ativar som\",\n Loop: \"Repetir\",\n \"Enter picture in picture mode\": \"Entrar em picture-in-picture\",\n \"Exit picture in picture mode\": \"Sair de picture-in-picture\",\n Play: \"Reproduzir\",\n Pause: \"Pausar\",\n \"Playback rate\": \"Velocidade de reprodução\",\n \"Playback rate {playbackRate}\": \"Velocidade {playbackRate}\",\n Quality: \"Qualidade\",\n \"Seek backward\": \"Retroceder\",\n \"Seek forward\": \"Avançar\",\n Settings: \"Configurações\",\n Auto: \"Automático\",\n \"audio player\": \"reprodutor de áudio\",\n \"video player\": \"reprodutor de vídeo\",\n volume: \"volume\",\n seek: \"buscar\",\n \"closed captions\": \"legendas\",\n \"current playback rate\": \"velocidade atual\",\n \"playback time\": \"tempo de reprodução\",\n \"media loading\": \"carregando\",\n settings: \"configurações\",\n \"audio tracks\": \"faixas de áudio\",\n quality: \"qualidade\",\n play: \"reproduzir\",\n pause: \"pausar\",\n mute: \"silenciar\",\n unmute: \"ativar som\",\n \"chapter: {chapterName}\": \"capítulo: {chapterName}\",\n live: \"ao vivo\",\n Off: \"Desativado\",\n \"start airplay\": \"iniciar AirPlay\",\n \"stop airplay\": \"parar AirPlay\",\n \"start casting\": \"iniciar transmissão\",\n \"stop casting\": \"parar transmissão\",\n \"enter fullscreen mode\": \"tela cheia\",\n \"exit fullscreen mode\": \"sair da tela cheia\",\n \"enter picture in picture mode\": \"entrar em picture-in-picture\",\n \"exit picture in picture mode\": \"sair de picture-in-picture\",\n \"seek to live\": \"ir para ao vivo\",\n \"playing live\": \"ao vivo\",\n \"seek back {seekOffset} seconds\": \"retroceder {seekOffset} segundos\",\n \"seek forward {seekOffset} seconds\": \"avançar {seekOffset} segundos\",\n \"Network Error\": \"Erro de rede\",\n \"Decode Error\": \"Erro de decodificação\",\n \"Source Not Supported\": \"Fonte não suportada\",\n \"Encryption Error\": \"Erro de criptografia\",\n \"A network error caused the media download to fail.\": \"Um erro de rede causou falha no download.\",\n \"A media error caused playback to be aborted. The media could be corrupt or your browser does not support this format.\":\n \"Um erro causou a interrupção da reprodução. O arquivo pode estar corrompido ou seu navegador não suporta este formato.\",\n \"An unsupported error occurred. The server or network failed, or your browser does not support this format.\":\n \"Ocorreu um erro. O servidor ou rede falhou, ou seu navegador não suporta este formato.\",\n \"The media is encrypted and there are no keys to decrypt it.\":\n \"O conteúdo está criptografado e não há chaves para descriptografá-lo.\",\n hour: \"hora\",\n hours: \"horas\",\n minute: \"minuto\",\n minutes: \"minutos\",\n second: \"segundo\",\n seconds: \"segundos\",\n \"{time} remaining\": \"{time} restante\",\n \"{currentTime} of {totalTime}\": \"{currentTime} de {totalTime}\",\n \"video not loaded, unknown time.\": \"vídeo não carregado, tempo desconhecido.\",\n}\n","import { useEffect, useRef, useState } from \"react\"\nimport { fetchPlaybackTokens, fetchSessionToken } from \"../lib/api\"\nimport type { PlaybackTokens } from \"../types\"\n\ntype RefreshFn = () => Promise<void>\n\nfunction scheduleRefresh(\n expiresIn: number,\n refreshFn: RefreshFn,\n timerRef: { current: ReturnType<typeof setTimeout> | null }\n): void {\n if (timerRef.current !== null) {\n clearTimeout(timerRef.current)\n }\n const refreshAtMs = expiresIn * 0.8 * 1000\n timerRef.current = setTimeout(async () => {\n try {\n await refreshFn()\n } catch (err) {\n console.error(\"[player/session] Scheduled refresh failed:\", err)\n }\n }, refreshAtMs)\n}\n\nfunction cancelRefresh(timerRef: { current: ReturnType<typeof setTimeout> | null }): void {\n if (timerRef.current !== null) {\n clearTimeout(timerRef.current)\n timerRef.current = null\n }\n}\n\nexport interface UsePlaybackSessionResult {\n tokens: PlaybackTokens | null\n isLoading: boolean\n error: Error | null\n}\n\nexport function usePlaybackSession(\n creatorId: string,\n playbackId: string,\n duration: number,\n fanToken?: string\n): UsePlaybackSessionResult {\n const [tokens, setTokens] = useState<PlaybackTokens | null>(null)\n const [isLoading, setIsLoading] = useState(true)\n const [error, setError] = useState<Error | null>(null)\n\n const sessionTokenRef = useRef<string | null>(null)\n const sessionExpiresAtRef = useRef<Date | null>(null)\n const tokensRef = useRef<PlaybackTokens | null>(null)\n const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n const visibilityHandlerRef = useRef<(() => void) | null>(null)\n\n useEffect(() => {\n let cancelled = false\n tokensRef.current = null\n setTokens(null)\n setIsLoading(true)\n setError(null)\n\n async function refresh(): Promise<void> {\n if (!sessionTokenRef.current || !sessionExpiresAtRef.current) return\n\n const now = Date.now()\n const sessionExpiry = sessionExpiresAtRef.current.getTime()\n let sessionToken = sessionTokenRef.current\n\n if (sessionExpiry - now < 60_000) {\n const newSession = await fetchSessionToken(creatorId, fanToken)\n sessionToken = newSession.token\n sessionTokenRef.current = newSession.token\n sessionExpiresAtRef.current = new Date(newSession.expiresAt)\n }\n\n const nextTokens = await fetchPlaybackTokens(creatorId, playbackId, duration, sessionToken)\n if (cancelled) return\n tokensRef.current = nextTokens\n setTokens(nextTokens)\n scheduleRefresh(nextTokens.expiresIn, refresh, timerRef)\n }\n\n async function initialize(): Promise<void> {\n try {\n const session = await fetchSessionToken(creatorId, fanToken)\n if (cancelled) return\n\n sessionTokenRef.current = session.token\n sessionExpiresAtRef.current = new Date(session.expiresAt)\n\n const initialTokens = await fetchPlaybackTokens(creatorId, playbackId, duration, session.token)\n if (cancelled) return\n\n tokensRef.current = initialTokens\n setTokens(initialTokens)\n scheduleRefresh(initialTokens.expiresIn, refresh, timerRef)\n\n visibilityHandlerRef.current = () => {\n if (document.visibilityState !== \"visible\") return\n const current = tokensRef.current\n if (!sessionTokenRef.current || !sessionExpiresAtRef.current || !current) return\n\n const now = Date.now()\n const sessionExpiry = sessionExpiresAtRef.current.getTime()\n const approxTokenExpiry = now + current.expiresIn * 1000\n const sessionExpired = sessionExpiry <= now\n const tokenNearExpiry = approxTokenExpiry - now < current.expiresIn * 0.2 * 1000\n\n if (sessionExpired || tokenNearExpiry) {\n cancelRefresh(timerRef)\n refresh().catch((err: Error) => {\n if (!cancelled) setError(err)\n })\n }\n }\n document.addEventListener(\"visibilitychange\", visibilityHandlerRef.current)\n } catch (err) {\n if (!cancelled) {\n setError(err instanceof Error ? err : new Error(String(err)))\n setTokens(null)\n }\n } finally {\n if (!cancelled) setIsLoading(false)\n }\n }\n\n void initialize()\n\n return () => {\n cancelled = true\n cancelRefresh(timerRef)\n if (visibilityHandlerRef.current) {\n document.removeEventListener(\"visibilitychange\", visibilityHandlerRef.current)\n visibilityHandlerRef.current = null\n }\n sessionTokenRef.current = null\n sessionExpiresAtRef.current = null\n }\n }, [creatorId, playbackId, duration, fanToken])\n\n return { tokens, isLoading, error }\n}\n","export const PLATFORM = {\n apiBase: \"https://api.mediacreators.io\",\n playbackBase: \"https://playback.mediacreators.io\",\n dataEnvKey: \"fhri2484lqcn6gk89r013ckmb\",\n} as const\n\nexport interface PlayerAsset {\n assetId: string\n playbackId: string\n title: string\n /** Optional duration hint (seconds) for token TTL; defaults to 3600 */\n duration?: number\n}\n\nexport interface PlayerAuth {\n fanToken: string\n}\n\nexport interface PlayerTheme {\n primaryColor: string\n}\n\nexport interface PlayerMetadata {\n playerName?: string\n custom1?: string\n custom2?: string\n viewerUserId?: string\n}\n\nexport interface PlayerError {\n code: string\n message: string\n}\n\nexport interface PlayerEvents {\n onTimeUpdate?: (currentTime: number, duration: number, pct: number) => void\n onQuartile?: (quartile: 25 | 50 | 75 | 100) => void\n onPause?: (currentTime: number) => void\n onPlay?: (currentTime: number) => void\n onSeeked?: (from: number, to: number) => void\n onComplete?: () => void\n onError?: (error: PlayerError) => void\n onReady?: () => void\n onResume?: (position: number) => void\n}\n\nexport interface PlayerBrandingConfig {\n logoUrl: string\n linkUrl: string\n logoTitle?: string\n filterToWhite?: boolean\n}\n\nexport interface PlayerControlsConfig {\n captions?: boolean\n airplay?: boolean\n pip?: boolean\n cast?: boolean\n playbackSpeed?: boolean\n quality?: boolean\n storyboard?: boolean\n}\n\nexport interface PlayerConfig {\n controls?: PlayerControlsConfig\n branding?: PlayerBrandingConfig\n accentColor?: string | null\n defaultLanguage?: string\n defaultCaptionsLanguage?: string | null\n}\n\nexport interface MediaCreatorsPlayerProps extends PlayerEvents {\n creatorId: string\n asset: PlayerAsset\n auth?: PlayerAuth\n theme?: PlayerTheme\n /** Custom branding override. Omit to show the default MediaCreators logo. */\n branding?: PlayerBrandingConfig\n /** Player customization config (controls visibility, accent, language). */\n config?: PlayerConfig\n /** Poster / thumbnail shown before playback. */\n poster?: string\n metadata?: PlayerMetadata\n autoResume?: boolean\n className?: string\n}\n\nexport interface PlaybackTokens {\n video: string\n thumbnail: string\n storyboard: string\n expiresIn: number\n}\n\nexport interface SessionToken {\n token: string\n expiresAt: string\n}\n\nexport interface WatchProgressRecord {\n asset_id: string\n position: number\n duration: number\n completed: boolean\n progress_pct: number\n updated_at: string\n title?: string\n thumbnail_url?: string | null\n}\n","import { PLATFORM } from \"../types\"\nimport type { PlaybackTokens, SessionToken, WatchProgressRecord } from \"../types\"\n\nclass ApiError extends Error {\n constructor(\n message: string,\n public readonly status: number\n ) {\n super(message)\n this.name = \"ApiError\"\n }\n}\n\nasync function fetchWithRetry(url: string, init?: RequestInit, maxRetries = 3): Promise<Response> {\n let lastError: Error = new Error(\"Unknown fetch error\")\n for (let attempt = 0; attempt < maxRetries; attempt++) {\n try {\n const res = await fetch(url, init)\n if (res.ok || res.status < 500) {\n return res\n }\n lastError = new ApiError(`HTTP ${res.status}`, res.status)\n } catch (err) {\n lastError = err instanceof Error ? err : new Error(String(err))\n }\n if (attempt < maxRetries - 1) {\n await new Promise((resolve) => setTimeout(resolve, 2 ** attempt * 500))\n }\n }\n throw lastError\n}\n\nexport async function fetchSessionToken(creatorId: string, fanToken?: string): Promise<SessionToken> {\n const headers: Record<string, string> = {}\n if (fanToken) {\n headers[\"X-Fan-Token\"] = fanToken\n }\n\n const url = `${PLATFORM.apiBase}/v1/mos/${encodeURIComponent(creatorId)}/playback-session`\n const res = await fetchWithRetry(url, { method: \"POST\", headers })\n\n if (!res.ok) {\n throw new ApiError(`Failed to fetch session token: ${res.status}`, res.status)\n }\n\n const json = (await res.json()) as { success: true; token: string; expires_at: string }\n return { token: json.token, expiresAt: json.expires_at }\n}\n\nexport async function fetchPlaybackTokens(\n creatorId: string,\n playbackId: string,\n duration: number,\n sessionToken: string\n): Promise<PlaybackTokens> {\n const params = new URLSearchParams({ duration: String(duration) })\n const url = `${PLATFORM.playbackBase}/v1/${encodeURIComponent(creatorId)}/tokens/${encodeURIComponent(playbackId)}?${params}`\n\n const res = await fetchWithRetry(url, {\n headers: { Authorization: `Bearer ${sessionToken}` },\n })\n\n if (res.status === 401 || res.status === 403) {\n throw new ApiError(\"Session token invalid or expired\", res.status)\n }\n if (!res.ok) {\n throw new ApiError(`Failed to fetch playback tokens: ${res.status}`, res.status)\n }\n\n const json = (await res.json()) as {\n success: true\n tokens: { video: string; thumbnail: string; storyboard: string }\n expires_in: number\n }\n\n return {\n video: json.tokens.video,\n thumbnail: json.tokens.thumbnail,\n storyboard: json.tokens.storyboard,\n expiresIn: json.expires_in,\n }\n}\n\nexport type SaveProgressResult = { ok: true } | { ok: false; status: number }\n\nexport async function saveWatchProgress(\n creatorId: string,\n assetId: string,\n position: number,\n duration: number,\n fanToken: string,\n completed?: boolean\n): Promise<SaveProgressResult> {\n const url = `${PLATFORM.apiBase}/v1/mos/${encodeURIComponent(creatorId)}/watch-progress/${encodeURIComponent(assetId)}`\n try {\n const res = await fetch(url, {\n method: \"PUT\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"X-Fan-Token\": fanToken,\n },\n body: JSON.stringify({ position, duration, completed: completed ?? false }),\n keepalive: true,\n })\n if (!res.ok) return { ok: false, status: res.status }\n return { ok: true }\n } catch {\n return { ok: false, status: 0 }\n }\n}\n\nexport async function getWatchProgress(\n creatorId: string,\n assetId: string,\n fanToken: string\n): Promise<WatchProgressRecord | null> {\n const url = `${PLATFORM.apiBase}/v1/mos/${encodeURIComponent(creatorId)}/watch-progress/${encodeURIComponent(assetId)}`\n try {\n const res = await fetch(url, {\n headers: { \"X-Fan-Token\": fanToken },\n })\n if (res.status === 401 || res.status === 404) return null\n if (!res.ok) return null\n const json = (await res.json()) as { success: true; data: WatchProgressRecord }\n return json.data\n } catch {\n return null\n }\n}\n","import { useEffect, useRef } from \"react\"\nimport type { PlayerEvents } from \"../types\"\n\nconst QUARTILES = [25, 50, 75, 100] as const\n\nexport function usePlayerEvents(events: PlayerEvents, assetId: string) {\n const firedQuartiles = useRef(new Set<number>())\n const prevTime = useRef(0)\n const eventsRef = useRef(events)\n eventsRef.current = events\n\n useEffect(() => {\n firedQuartiles.current = new Set()\n prevTime.current = 0\n }, [assetId])\n\n return {\n handleTimeUpdate: (currentTime: number, duration: number) => {\n if (!duration || duration <= 0) return\n const pct = (currentTime / duration) * 100\n eventsRef.current.onTimeUpdate?.(currentTime, duration, pct)\n\n for (const q of QUARTILES) {\n if (pct >= q && !firedQuartiles.current.has(q)) {\n firedQuartiles.current.add(q)\n eventsRef.current.onQuartile?.(q)\n }\n }\n\n const delta = Math.abs(currentTime - prevTime.current)\n // Heuristic seek: jump > 2s without being a normal play tick\n if (delta > 2 && prevTime.current > 0) {\n eventsRef.current.onSeeked?.(prevTime.current, currentTime)\n }\n prevTime.current = currentTime\n },\n handlePause: (currentTime: number) => {\n eventsRef.current.onPause?.(currentTime)\n },\n handlePlay: (currentTime: number) => {\n eventsRef.current.onPlay?.(currentTime)\n },\n handleComplete: () => {\n if (!firedQuartiles.current.has(100)) {\n firedQuartiles.current.add(100)\n eventsRef.current.onQuartile?.(100)\n }\n eventsRef.current.onComplete?.()\n },\n handleReady: () => {\n eventsRef.current.onReady?.()\n },\n handleError: (message: string) => {\n eventsRef.current.onError?.({ code: \"PLAYER_ERROR\", message })\n },\n }\n}\n","import { useCallback, useRef } from \"react\"\n\nconst STORAGE_KEY = \"mc-player-volume\"\n\nfunction getStoredVolume(): number | null {\n try {\n const raw = window.localStorage.getItem(STORAGE_KEY)\n if (raw === null) return null\n const parsed = parseFloat(raw)\n if (Number.isNaN(parsed) || parsed < 0 || parsed > 1) return null\n return parsed\n } catch {\n return null\n }\n}\n\nfunction saveVolume(volume: number): void {\n try {\n window.localStorage.setItem(STORAGE_KEY, String(volume))\n } catch {\n // localStorage may be blocked (iframe / private mode)\n }\n}\n\nexport function useVolume(): {\n initialVolume: number | null\n handleVolumeChange: (volume: number) => void\n} {\n const initialVolume = useRef(getStoredVolume())\n const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n const handleVolumeChange = useCallback((volume: number) => {\n if (debounceTimer.current !== null) clearTimeout(debounceTimer.current)\n debounceTimer.current = setTimeout(() => saveVolume(volume), 500)\n }, [])\n\n return { initialVolume: initialVolume.current, handleVolumeChange }\n}\n","import { useCallback, useEffect, useRef, useState } from \"react\"\nimport { getWatchProgress, saveWatchProgress } from \"../lib/api\"\n\nconst SAVE_DEBOUNCE_MS = 10_000\n\nexport interface UseWatchProgressResult {\n resumePosition: number | null\n saveProgress: (position: number, duration: number) => void\n authExpired: boolean\n}\n\nexport function useWatchProgress(\n creatorId: string,\n assetId: string,\n fanToken: string | undefined,\n autoResume: boolean | undefined,\n onResume?: (position: number) => void,\n): UseWatchProgressResult {\n const [resumePosition, setResumePosition] = useState<number | null>(null)\n const [authExpired, setAuthExpired] = useState(false)\n const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null)\n const onResumeRef = useRef(onResume)\n onResumeRef.current = onResume\n const stoppedRef = useRef(false)\n\n useEffect(() => {\n stoppedRef.current = false\n setAuthExpired(false)\n setResumePosition(null)\n\n if (!fanToken || !autoResume) return\n\n let cancelled = false\n void getWatchProgress(creatorId, assetId, fanToken).then((record) => {\n if (cancelled || !record || record.completed) return\n if (record.position > 5) {\n setResumePosition(record.position)\n onResumeRef.current?.(record.position)\n }\n })\n\n return () => {\n cancelled = true\n if (debounceTimer.current !== null) {\n clearTimeout(debounceTimer.current)\n debounceTimer.current = null\n }\n }\n }, [creatorId, assetId, fanToken, autoResume])\n\n const saveProgress = useCallback(\n (position: number, duration: number) => {\n if (!fanToken || stoppedRef.current) return\n\n if (debounceTimer.current !== null) clearTimeout(debounceTimer.current)\n debounceTimer.current = setTimeout(() => {\n const completed = duration > 0 && position / duration >= 0.95\n void saveWatchProgress(creatorId, assetId, position, duration, fanToken, completed).then((result) => {\n if (!result.ok && result.status === 401) {\n stoppedRef.current = true\n setAuthExpired(true)\n }\n })\n }, SAVE_DEBOUNCE_MS)\n },\n [creatorId, assetId, fanToken],\n )\n\n return { resumePosition, saveProgress, authExpired }\n}\n","import type { PlayerBrandingConfig } from \"../types\"\nimport { LOGO_DATA_URI } from \"../assets/logo\"\n\nfunction applyBranding(\n player: HTMLElement,\n videoId: string,\n creatorId: string,\n config?: PlayerBrandingConfig\n): boolean {\n const theme = player.shadowRoot?.querySelector(\"media-theme\")\n const controller = theme?.shadowRoot?.querySelector(\"media-controller\")\n if (!controller) return false\n\n const link = controller.querySelector<HTMLAnchorElement>(\"[data-branding-link]\")\n if (!link) return false\n\n const utmParams = {\n utm_source: \"player\",\n utm_medium: \"embed\",\n utm_campaign: \"watermark\",\n utm_content: videoId,\n utm_term: creatorId,\n }\n\n if (config?.linkUrl) {\n try {\n const url = new URL(config.linkUrl)\n for (const [k, v] of Object.entries(utmParams)) url.searchParams.set(k, v)\n link.href = url.toString()\n } catch {\n link.href = config.linkUrl\n }\n } else {\n link.href = `https://mediacreators.io?${new URLSearchParams(utmParams)}`\n }\n\n const img = controller.querySelector<HTMLImageElement>(\"[data-branding-logo]\")\n if (img) img.src = config?.logoUrl ?? LOGO_DATA_URI\n\n const tooltip = controller.querySelector<HTMLElement & { updateXOffset?: () => void }>(\"[data-branding-tooltip]\")\n const brandingDiv = tooltip?.parentElement\n if (tooltip?.updateXOffset && brandingDiv && !brandingDiv.dataset.tooltipBound) {\n brandingDiv.dataset.tooltipBound = \"1\"\n brandingDiv.addEventListener(\"mouseenter\", () => tooltip.updateXOffset!())\n }\n\n if (tooltip) {\n tooltip.textContent = config?.logoTitle ?? \"MediaCreators\"\n }\n\n return true\n}\n\nexport function updateBranding(player: HTMLElement, videoId: string, creatorId: string, config?: PlayerBrandingConfig) {\n if (applyBranding(player, videoId, creatorId, config)) return\n\n let attempts = 0\n const tryApply = () => {\n if (++attempts > 20) return\n if (!applyBranding(player, videoId, creatorId, config)) {\n requestAnimationFrame(tryApply)\n }\n }\n requestAnimationFrame(tryApply)\n}\n","const SESSION_STORAGE_KEY = \"mc-player-session\"\n\n/** Stable per-tab anonymous session id for analytics viewer tracking. */\nexport function getSessionId(): string | null {\n try {\n const existing = window.sessionStorage.getItem(SESSION_STORAGE_KEY)\n if (existing) return existing\n\n const generated = crypto.randomUUID()\n window.sessionStorage.setItem(SESSION_STORAGE_KEY, generated)\n return generated\n } catch {\n return null\n }\n}\n","export interface HSL {\n h: number\n s: number\n l: number\n}\n\nexport interface DerivedColors {\n primary: string\n secondary: string\n accent: string\n}\n\nfunction normalizeHex(hex: string): string {\n const sanitized = hex.trim().replace(/^#/, \"\")\n if (!/^[0-9a-fA-F]{3}$|^[0-9a-fA-F]{6}$/.test(sanitized)) {\n return \"#1a1a1a\"\n }\n if (sanitized.length === 3) {\n return `#${sanitized\n .split(\"\")\n .map((c) => c + c)\n .join(\"\")}`\n }\n return `#${sanitized}`\n}\n\nfunction hexToRgb(hex: string): { r: number; g: number; b: number } {\n const full = normalizeHex(hex).slice(1)\n return {\n r: parseInt(full.slice(0, 2), 16),\n g: parseInt(full.slice(2, 4), 16),\n b: parseInt(full.slice(4, 6), 16),\n }\n}\n\nexport function relativeLuminance(hex: string): number {\n const { r, g, b } = hexToRgb(hex)\n const linear = [r, g, b].map((channel) => {\n const s = channel / 255\n return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4\n })\n return 0.2126 * linear[0]! + 0.7152 * linear[1]! + 0.0722 * linear[2]!\n}\n\nexport function hexToHSL(hex: string): HSL {\n const { r, g, b } = hexToRgb(hex)\n const rNorm = r / 255\n const gNorm = g / 255\n const bNorm = b / 255\n\n const max = Math.max(rNorm, gNorm, bNorm)\n const min = Math.min(rNorm, gNorm, bNorm)\n const delta = max - min\n\n let h = 0\n if (delta !== 0) {\n if (max === rNorm) {\n h = ((gNorm - bNorm) / delta) % 6\n } else if (max === gNorm) {\n h = (bNorm - rNorm) / delta + 2\n } else {\n h = (rNorm - gNorm) / delta + 4\n }\n h = Math.round(h * 60)\n if (h < 0) h += 360\n }\n\n const l = (max + min) / 2\n const s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1))\n\n return {\n h,\n s: Math.round(s * 100),\n l: Math.round(l * 100),\n }\n}\n\nexport function hslToHex({ h, s, l }: HSL): string {\n const sNorm = s / 100\n const lNorm = l / 100\n\n const c = (1 - Math.abs(2 * lNorm - 1)) * sNorm\n const x = c * (1 - Math.abs(((h / 60) % 2) - 1))\n const m = lNorm - c / 2\n\n let r = 0\n let g = 0\n let b = 0\n\n if (h < 60) {\n ;[r, g, b] = [c, x, 0]\n } else if (h < 120) {\n ;[r, g, b] = [x, c, 0]\n } else if (h < 180) {\n ;[r, g, b] = [0, c, x]\n } else if (h < 240) {\n ;[r, g, b] = [0, x, c]\n } else if (h < 300) {\n ;[r, g, b] = [x, 0, c]\n } else {\n ;[r, g, b] = [c, 0, x]\n }\n\n const toHex = (v: number) =>\n Math.round((v + m) * 255)\n .toString(16)\n .padStart(2, \"0\")\n\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`\n}\n\nfunction clamp(value: number, min: number, max: number): number {\n return Math.min(max, Math.max(min, value))\n}\n\n/** Maps a creator brand color to player theme tokens with readable contrast. */\nexport function deriveColors(primaryHex: string): DerivedColors {\n const brand = normalizeHex(primaryHex)\n const hsl = hexToHSL(brand)\n const lum = relativeLuminance(brand)\n\n const accentL = clamp(hsl.l < 42 ? 50 : hsl.l > 78 ? 70 : hsl.l, 38, 72)\n const accent = hslToHex({\n h: hsl.h,\n s: clamp(hsl.s, 0, 100),\n l: accentL,\n })\n\n let primary: string\n if (lum >= 0.72) {\n primary = \"#1a1a1a\"\n } else if (lum >= 0.58 && hsl.s < 22) {\n primary = brand\n } else {\n primary = \"#ffffff\"\n }\n\n const secondary = lum >= 0.72 ? \"rgba(0, 0, 0, 0.1)\" : \"rgba(255, 255, 255, 0.14)\"\n\n return { primary, secondary, accent }\n}\n\nexport function deriveTheme(primaryColor: string): DerivedColors {\n return deriveColors(primaryColor)\n}\n"],"mappings":"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AA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAu2BN,aAAa;AAAA;AAAA;AAAA;AAAA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","names":["useCallback","useEffect","useRef","useEffect","useRef","_a","_b","useRef","useCallback","useEffect","useRef","useState","useState","useRef","useEffect","_a","useCallback","_a","_b","MediaCreatorsPlayer","_a","_b","useRef","useEffect","useCallback"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/player.tsx","../src/themes/mediacreators.ts","../src/assets/logo.ts","../src/lang/es.ts","../src/lang/pt.ts","../src/hooks/use-playback-session.ts","../src/types.ts","../src/lib/api.ts","../src/hooks/use-player-events.ts","../src/hooks/use-volume.ts","../src/hooks/use-watch-progress.ts","../src/components/access-lock.tsx","../src/components/player-branding.tsx","../src/lib/session.ts","../src/lib/theme.ts"],"sourcesContent":["import { type FC, memo, useCallback, useEffect, useMemo, useRef } from \"react\"\nimport MuxPlayer from \"@mux/mux-player-react\"\nimport \"../themes/mediacreators\"\nimport { usePlaybackSession } from \"../hooks/use-playback-session\"\nimport { usePlayerEvents } from \"../hooks/use-player-events\"\nimport { useVolume } from \"../hooks/use-volume\"\nimport { useWatchProgress } from \"../hooks/use-watch-progress\"\nimport { AccessLock } from \"./access-lock\"\nimport { updateBranding } from \"./player-branding\"\nimport { getSessionId } from \"../lib/session\"\nimport { deriveTheme } from \"../lib/theme\"\nimport { PLATFORM } from \"../types\"\nimport type { MediaCreatorsPlayerProps } from \"../types\"\n\nfunction decodeJwtSub(token: string): string | null {\n try {\n const payloadPart = token.split(\".\")[1]\n if (!payloadPart) return null\n const padded = payloadPart + \"==\".slice((payloadPart.length % 4 || 4) - 2)\n const base64 = padded.replace(/-/g, \"+\").replace(/_/g, \"/\")\n const json = JSON.parse(atob(base64)) as { sub?: string }\n return typeof json.sub === \"string\" ? json.sub : null\n } catch {\n return null\n }\n}\n\nexport const MediaCreatorsPlayer: FC<MediaCreatorsPlayerProps> = memo(function MediaCreatorsPlayer({\n creatorId,\n asset,\n env = \"production\",\n auth,\n theme,\n branding,\n config,\n poster,\n metadata,\n autoResume,\n className,\n getSession,\n onAccessDenied,\n onTimeUpdate,\n onQuartile,\n onPause,\n onPlay,\n onSeeked,\n onComplete,\n onError,\n onReady,\n onResume,\n}) {\n const durationHint = asset.duration ?? 3600\n const { tokens, isLoading, error, accessDenied } = usePlaybackSession(\n creatorId,\n asset.playbackId,\n durationHint,\n auth?.fanToken,\n env,\n getSession\n )\n\n const accentSource = config?.accentColor ?? theme?.primaryColor ?? \"#4ae9ab\"\n const colors = useMemo(() => deriveTheme(accentSource), [accentSource])\n const { initialVolume, handleVolumeChange } = useVolume()\n\n const configStyle = useMemo(() => {\n const controls = config?.controls\n const style: Record<string, string> = {}\n if (controls) {\n if (controls.captions === false) style[\"--mc-captions-display\"] = \"none\"\n if (controls.airplay === false) style[\"--mc-airplay-display\"] = \"none\"\n if (controls.pip === false) style[\"--mc-pip-display\"] = \"none\"\n if (controls.cast === false) style[\"--mc-cast-display\"] = \"none\"\n if (controls.storyboard === false) style[\"--mc-storyboard-display\"] = \"none\"\n if (controls.playbackSpeed === false) style[\"--mc-speed-display\"] = \"none\"\n if (controls.quality === false) style[\"--mc-quality-display\"] = \"none\"\n if (controls.playbackSpeed === false && controls.quality === false && controls.captions === false) {\n style[\"--mc-settings-display\"] = \"none\"\n }\n }\n if (config?.branding?.filterToWhite === false) {\n style[\"--mc-branding-filter\"] = \"none\"\n }\n return style\n }, [config?.controls, config?.branding?.filterToWhite])\n const playerRef = useRef<HTMLElement | null>(null)\n const seekDoneRef = useRef(false)\n\n const events = usePlayerEvents(\n { onTimeUpdate, onQuartile, onPause, onPlay, onSeeked, onComplete, onError, onReady, onResume },\n asset.assetId\n )\n\n const { resumePosition, saveProgress } = useWatchProgress(\n creatorId,\n asset.assetId,\n auth?.fanToken,\n autoResume,\n onResume,\n env\n )\n\n useEffect(() => {\n import(\"media-chrome/dist/utils/i18n.js\").then(({ setLanguage }) => {\n setLanguage(config?.defaultLanguage ?? \"es\")\n })\n }, [config?.defaultLanguage])\n\n useEffect(() => {\n if (error) {\n onError?.({ code: \"SESSION_ERROR\", message: error.message })\n }\n }, [error, onError])\n\n // Keyed on the state alone: a host passing a new inline callback each render must not re-fire it.\n const onAccessDeniedRef = useRef(onAccessDenied)\n onAccessDeniedRef.current = onAccessDenied\n useEffect(() => {\n if (accessDenied) onAccessDeniedRef.current?.(accessDenied)\n }, [accessDenied])\n\n useEffect(() => {\n seekDoneRef.current = false\n }, [asset.assetId])\n\n useEffect(() => {\n if (seekDoneRef.current) return\n if (resumePosition === null || !playerRef.current) return\n const el = playerRef.current as unknown as HTMLMediaElement\n if (typeof el.currentTime === \"number\") {\n el.currentTime = resumePosition\n seekDoneRef.current = true\n }\n }, [resumePosition, tokens])\n\n const mergedBranding = useMemo(() => {\n const b = branding ?? config?.branding\n if (!b) return undefined\n return {\n logoUrl: b.logoUrl,\n linkUrl: b.linkUrl,\n logoTitle: b.logoTitle,\n }\n }, [branding, config?.branding])\n\n useEffect(() => {\n if (!playerRef.current) return\n updateBranding(playerRef.current, asset.assetId, creatorId, mergedBranding)\n }, [asset.assetId, creatorId, mergedBranding, tokens])\n\n const handlePlayerRef = useCallback(\n (el: HTMLElement | null) => {\n playerRef.current = el\n if (el && initialVolume !== null) {\n ;(el as unknown as HTMLMediaElement).volume = initialVolume\n }\n },\n [initialVolume]\n )\n\n const viewerUserId =\n metadata?.viewerUserId ?? (auth?.fanToken ? decodeJwtSub(auth.fanToken) : null) ?? getSessionId() ?? undefined\n\n if (accessDenied) {\n return <AccessLock state={accessDenied} poster={poster} className={className} />\n }\n\n if (isLoading || !tokens) {\n return <div className={className} style={{ width: \"100%\", aspectRatio: \"16 / 9\", background: \"#111\" }} />\n }\n\n return (\n <MuxPlayer\n ref={handlePlayerRef}\n className={className}\n theme=\"mediacreators\"\n playbackId={asset.playbackId}\n poster={poster}\n envKey={PLATFORM.dataEnvKey}\n tokens={{\n playback: tokens.video,\n thumbnail: tokens.thumbnail,\n storyboard: tokens.storyboard,\n }}\n primaryColor={colors.primary}\n secondaryColor={colors.secondary}\n accentColor={colors.accent}\n themeProps={{ lang: config?.defaultLanguage ?? \"es\" }}\n defaultHiddenCaptions={!config?.defaultCaptionsLanguage}\n metadata={{\n video_id: asset.assetId,\n video_title: asset.title,\n video_stream_type: \"on-demand\",\n viewer_user_id: viewerUserId,\n sub_property_id: creatorId,\n player_name: metadata?.playerName ?? \"mediacreators-sdk\",\n custom_1: metadata?.custom1 ?? creatorId,\n custom_2: metadata?.custom2 ?? \"sdk\",\n }}\n playsInline\n style={{ width: \"100%\", maxHeight: \"100%\", aspectRatio: \"16 / 9\", ...configStyle }}\n onLoadedData={() => events.handleReady()}\n onTimeUpdate={(e) => {\n const el = e.target as HTMLMediaElement | null\n if (!el) return\n events.handleTimeUpdate(el.currentTime, el.duration)\n if (auth?.fanToken) {\n saveProgress(el.currentTime, el.duration)\n }\n }}\n onPause={(e) => {\n const el = e.target as HTMLMediaElement | null\n events.handlePause(el?.currentTime ?? 0)\n }}\n onPlay={(e) => {\n const el = e.target as HTMLMediaElement | null\n events.handlePlay(el?.currentTime ?? 0)\n }}\n onEnded={() => events.handleComplete()}\n onVolumeChange={(e) => {\n const el = e.target as HTMLMediaElement | null\n if (el && typeof el.volume === \"number\") {\n handleVolumeChange(el.volume)\n }\n }}\n onError={() => events.handleError(\"Playback error\")}\n />\n )\n})\n","import \"media-chrome\"\nimport MediaGestureReceiver from \"media-chrome/dist/media-gesture-receiver.js\"\nimport { MediaThemeElement } from \"media-chrome/dist/media-theme-element.js\"\nimport { addTranslation } from \"media-chrome/dist/utils/i18n.js\"\nimport { globalThis } from \"media-chrome/dist/utils/server-safe-globals.js\"\nimport \"media-chrome/dist/menu/index.js\"\nimport { LOGO_DATA_URI } from \"../assets/logo\"\nimport { Es } from \"../lang/es\"\nimport { Pt } from \"../lang/pt\"\n\naddTranslation(\"es\", Es)\naddTranslation(\"pt\", Pt)\n\n// media-chrome's handleTap() is intentionally empty — mobile taps show/hide controls\n// but never toggle play/pause. For an embed player, tap-to-play is expected behavior.\nMediaGestureReceiver.prototype.handleTap = MediaGestureReceiver.prototype.handleMouseClick\n\nconst template = globalThis.document?.createElement?.(\"template\")\nif (template) {\n template.innerHTML = String.raw /*html*/ `\n <style>\n :host {\n --_primary-color: var(--media-primary-color, #fff);\n --_secondary-color: var(--media-secondary-color, transparent);\n --_accent-color: var(--media-accent-color, #fff);\n }\n\n media-controller {\n --base: 18px;\n\n font-size: calc(0.75 * var(--base));\n font-family: Roboto, Arial, sans-serif;\n --media-font-family: Roboto, helvetica neue, segoe ui, arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n\n --media-primary-color: #fff;\n --media-secondary-color: transparent;\n --media-menu-background: rgba(28, 28, 28, 0.6);\n --media-text-color: var(--_primary-color);\n --media-control-hover-background: var(--media-secondary-color);\n\n --media-range-track-height: calc(0.125 * var(--base));\n --media-range-thumb-height: var(--base);\n --media-range-thumb-width: var(--base);\n --media-range-thumb-border-radius: var(--base);\n\n --media-control-height: calc(2 * var(--base));\n }\n\n media-controller[breakpointmd] {\n --base: 20px;\n }\n\n media-controller[mediaisfullscreen] {\n --base: 24px;\n }\n\n .media-button {\n --media-control-hover-background: var(--_secondary-color);\n --media-tooltip-background: rgb(28 28 28 / .24);\n --media-text-content-height: 1.2;\n --media-tooltip-padding: .7em 1em;\n --media-tooltip-distance: 8px;\n --media-tooltip-container-margin: 18px;\n position: relative;\n padding: 0;\n opacity: 0.9;\n transition: opacity 0.1s cubic-bezier(0.4, 0, 1, 1);\n }\n\n .media-button svg {\n fill: none;\n stroke: var(--_primary-color);\n stroke-width: 1;\n stroke-linecap: 'round';\n stroke-linejoin: 'round';\n }\n\n svg .svg-shadow {\n stroke: #000;\n stroke-opacity: 0.15;\n stroke-width: 2px;\n fill: none;\n }\n </style>\n\n <media-controller\n breakpoints=\"md:480\"\n defaultsubtitles=\"{{defaultsubtitles}}\"\n defaultduration=\"{{defaultduration}}\"\n hotkeys=\"{{hotkeys}}\"\n nohotkeys=\"{{nohotkeys}}\"\n defaultstreamtype=\"on-demand\"\n lang=\"{{lang}}\"\n >\n <slot name=\"media\" slot=\"media\"></slot>\n <slot name=\"poster\" slot=\"poster\"></slot>\n <slot name=\"centered-chrome\" slot=\"centered-chrome\"></slot>\n\n <style>\n media-captions-button { display: var(--mc-captions-display, flex); }\n media-pip-button { display: var(--mc-pip-display, flex); }\n media-airplay-button { display: var(--mc-airplay-display, flex); }\n media-cast-button { display: var(--mc-cast-display, flex); }\n media-preview-thumbnail { display: var(--mc-storyboard-display, block); }\n media-settings-menu-button { display: var(--mc-settings-display, flex); }\n </style>\n <media-error-dialog slot=\"dialog\"></media-error-dialog>\n\n <style>\n .center-play-btn {\n display: none;\n }\n\n media-controller:not([breakpointmd]) .center-play-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n inset: 0;\n z-index: 1;\n pointer-events: none;\n }\n\n media-controller:not([breakpointmd]) .center-play-btn media-play-button {\n pointer-events: auto;\n --media-control-background: rgba(0, 0, 0, 0.6);\n --media-control-hover-background: rgba(0, 0, 0, 0.8);\n --media-control-padding: 0;\n width: 64px;\n height: 64px;\n border-radius: 50%;\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n transition: opacity 0.3s, transform 0.3s;\n }\n\n media-controller:not([breakpointmd]) .center-play-btn media-play-button svg {\n width: 28px;\n height: 28px;\n fill: #fff;\n stroke: none;\n }\n\n media-controller:not([breakpointmd]):is([mediahasplayed]):not([mediapaused]) .center-play-btn {\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.3s;\n }\n </style>\n <div class=\"center-play-btn\" slot=\"centered-chrome\">\n <media-play-button>\n <svg slot=\"icon\" viewBox=\"0 0 24 24\">\n <path d=\"M8 5.14v14l11-7-11-7z\" fill=\"#fff\" />\n </svg>\n </media-play-button>\n </div>\n\n <style>\n .media-gradient-bottom {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: calc(8 * var(--base));\n pointer-events: none;\n }\n\n .media-gradient-bottom::before {\n content: '';\n --gradient-steps: hsl(0 0% 0% / 0) 0%, hsl(0 0% 0% / 0.013) 8.1%, hsl(0 0% 0% / 0.049) 15.5%,\n hsl(0 0% 0% / 0.104) 22.5%, hsl(0 0% 0% / 0.175) 29%, hsl(0 0% 0% / 0.259) 35.3%, hsl(0 0% 0% / 0.352) 41.2%,\n hsl(0 0% 0% / 0.45) 47.1%, hsl(0 0% 0% / 0.55) 52.9%, hsl(0 0% 0% / 0.648) 58.8%, hsl(0 0% 0% / 0.741) 64.7%,\n hsl(0 0% 0% / 0.825) 71%, hsl(0 0% 0% / 0.896) 77.5%, hsl(0 0% 0% / 0.951) 84.5%, hsl(0 0% 0% / 0.987) 91.9%,\n hsl(0 0% 0%) 100%;\n\n position: absolute;\n inset: 0;\n opacity: 0.7;\n background: linear-gradient(to bottom, var(--gradient-steps));\n }\n </style>\n <div class=\"media-gradient-bottom\" style=\"position: absolute; bottom: 0; width: 100%; pointer-events: none\"></div>\n\n <style>\n media-settings-menu {\n --media-menu-icon-height: 20px;\n --media-menu-item-icon-height: 20px;\n --media-settings-menu-min-width: calc(10 * var(--base));\n --media-menu-transform-in: translateY(0) scale(1);\n --media-menu-transform-out: translateY(20px) rotate(3deg) scale(1);\n padding-block: calc(0.15 * var(--base));\n margin-right: 10px;\n margin-bottom: 17px;\n border-radius: 8px;\n z-index: 2;\n user-select: none;\n }\n\n media-settings-menu-item,\n [role='menu']::part(menu-item) {\n --media-icon-color: var(--_primary-color);\n margin-inline: calc(0.45 * var(--base));\n height: calc(1.6 * var(--base));\n font-size: calc(0.7 * var(--base));\n font-weight: 400;\n padding: 0;\n padding-left: calc(0.4 * var(--base));\n padding-right: calc(0.1 * var(--base));\n border-radius: 6px;\n text-shadow: none;\n }\n\n [slot='submenu']::part(back button) {\n font-size: calc(0.7 * var(--base));\n }\n\n media-settings-menu-item:hover {\n --media-icon-color: #000;\n color: #000;\n background-color: #fff;\n }\n\n media-settings-menu-item:hover [slot='submenu']::part(menu-item),\n [slot='submenu']::part(back indicator) {\n --media-icon-color: var(--_primary-color);\n }\n\n media-settings-menu-item:hover [slot='submenu']::part(menu-item):hover {\n --media-icon-color: #000;\n color: #000;\n background-color: #fff;\n }\n\n media-settings-menu-item[submenusize='0'] {\n display: none;\n }\n\n .quality-settings[submenusize='1'] {\n display: none;\n }\n\n .mc-speed-item { display: var(--mc-speed-display, flex); }\n .mc-quality-item { display: var(--mc-quality-display, flex); }\n .mc-captions-item { display: var(--mc-captions-display, flex); }\n\n .mc-label { font-size: 0; line-height: 0; }\n .mc-label::after { font-size: calc(0.7 * var(--base)); line-height: normal; }\n .mc-label::after { content: attr(data-en); }\n media-controller[lang=\"es\"] .mc-label::after { content: attr(data-es); }\n media-controller[lang=\"pt\"] .mc-label::after { content: attr(data-pt); }\n </style>\n <media-settings-menu hidden anchor=\"auto\">\n <media-settings-menu-item class=\"mc-speed-item\">\n <span class=\"mc-label\" data-en=\"Playback Speed\" data-es=\"Velocidad de reproducción\" data-pt=\"Velocidade de reprodução\"></span>\n <media-playback-rate-menu slot=\"submenu\" hidden>\n <div slot=\"title\"><span class=\"mc-label\" data-en=\"Playback Speed\" data-es=\"Velocidad de reproducción\" data-pt=\"Velocidade de reprodução\"></span></div>\n </media-playback-rate-menu>\n </media-settings-menu-item>\n <media-settings-menu-item class=\"mc-quality-item quality-settings\">\n <span class=\"mc-label\" data-en=\"Quality\" data-es=\"Calidad\" data-pt=\"Qualidade\"></span>\n <media-rendition-menu slot=\"submenu\" hidden>\n <div slot=\"title\"><span class=\"mc-label\" data-en=\"Quality\" data-es=\"Calidad\" data-pt=\"Qualidade\"></span></div>\n </media-rendition-menu>\n </media-settings-menu-item>\n <media-settings-menu-item class=\"mc-captions-item\">\n <span class=\"mc-label\" data-en=\"Subtitles/CC\" data-es=\"Subtítulos\" data-pt=\"Legendas\"></span>\n <media-captions-menu slot=\"submenu\" hidden>\n <div slot=\"title\"><span class=\"mc-label\" data-en=\"Subtitles/CC\" data-es=\"Subtítulos\" data-pt=\"Legendas\"></span></div>\n </media-captions-menu>\n </media-settings-menu-item>\n </media-settings-menu>\n\n <style>\n media-control-bar {\n position: absolute;\n height: calc(2 * var(--base));\n line-height: calc(2 * var(--base));\n bottom: var(--base);\n left: var(--base);\n right: var(--base);\n }\n </style>\n <media-control-bar style=\"position: absolute; bottom: var(--base); left: var(--base); right: var(--base); height: calc(2 * var(--base)); line-height: calc(2 * var(--base))\">\n <style>\n @keyframes bounce-scale-play {\n 0% {\n transform: scale(0.75, 0.75);\n }\n 50% {\n transform: scale(115%, 115%);\n }\n 100% {\n transform: scale(1, 1);\n }\n }\n\n .media-button {\n border-radius: 25%;\n backdrop-filter: blur(10px) invert(15%) brightness(80%) opacity(0);\n -webkit-backdrop-filter: blur(10px) invert(15%) brightness(80%) opacity(0);\n transition: backdrop-filter 0.3s, -webkit-backdrop-filter 0.3s, box-shadow 0.3s;\n }\n\n .media-button:hover {\n box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px;\n backdrop-filter: blur(10px) invert(15%) brightness(80%) opacity(1);\n -webkit-backdrop-filter: blur(10px) invert(15%) brightness(80%) opacity(1);\n transition: backdrop-filter 0.3s, -webkit-backdrop-filter 0.3s;\n }\n\n media-play-button #icon-play {\n opacity: 0;\n transform-box: view-box;\n transform-origin: center center;\n transform: scale(0.5, 0.5);\n transition: all 0.5s;\n }\n\n media-play-button[mediapaused] #icon-play {\n opacity: 1;\n transform: scale(1, 1);\n animation: 0.35s bounce-scale-play ease-in-out;\n }\n\n @keyframes bounce-pause-left {\n 0% {\n font-size: 10px;\n }\n 50% {\n font-size: 3px;\n }\n 100% {\n font-size: 4px;\n }\n }\n\n @keyframes bounce-pause-right {\n 0% {\n font-size: 10px;\n transform: translateX(-8px);\n }\n 50% {\n font-size: 3px;\n transform: translateX(1px);\n }\n 100% {\n font-size: 4px;\n transform: translateX(0);\n }\n }\n\n media-play-button #pause-left,\n media-play-button #pause-right {\n font-size: 4px;\n opacity: 1;\n transform: translateX(0);\n transform-box: view-box;\n }\n\n media-play-button:not([mediapaused]) #pause-left {\n animation: 0.3s bounce-pause-left ease-out;\n }\n\n media-play-button:not([mediapaused]) #pause-right {\n animation: 0.3s bounce-pause-right ease-out;\n }\n\n media-play-button[mediapaused] #pause-left,\n media-play-button[mediapaused] #pause-right {\n opacity: 0;\n font-size: 10px;\n }\n\n media-play-button[mediapaused] #pause-right {\n transform-origin: right center;\n transform: translateX(-8px);\n }\n </style>\n <media-play-button mediapaused class=\"media-button\">\n <svg slot=\"icon\" viewBox=\"0 0 32 32\">\n <g>\n <path\n id=\"icon-play\"\n d=\"M20.7131 14.6976C21.7208 15.2735 21.7208 16.7265 20.7131 17.3024L12.7442 21.856C11.7442 22.4274 10.5 21.7054 10.5 20.5536L10.5 11.4464C10.5 10.2946 11.7442 9.57257 12.7442 10.144L20.7131 14.6976Z\"\n />\n </g>\n <g id=\"icon-pause\">\n <rect id=\"pause-left\" x=\"10.5\" width=\"1em\" y=\"10.5\" height=\"11\" rx=\"0.5\" />\n <rect id=\"pause-right\" x=\"17.5\" width=\"1em\" y=\"10.5\" height=\"11\" rx=\"0.5\" />\n </g>\n </svg>\n </media-play-button>\n\n <style>\n media-mute-button {\n position: relative;\n }\n\n media-mute-button .muted-path {\n transition: clip-path 0.2s ease-out;\n }\n\n media-mute-button #muted-path-2 {\n transition-delay: 0.2s;\n }\n\n media-mute-button .muted-path {\n clip-path: inset(0);\n }\n\n media-mute-button:not([mediavolumelevel='off']) #muted-path-1 {\n clip-path: inset(0 0 100% 0);\n }\n\n media-mute-button:not([mediavolumelevel='off']) #muted-path-2 {\n clip-path: inset(0 0 100% 0);\n }\n\n media-mute-button .muted-path {\n opacity: 0;\n }\n\n media-mute-button[mediavolumelevel='off'] .muted-path {\n opacity: 1;\n }\n\n media-mute-button .vol-path {\n opacity: 1;\n transition: opacity 0.4s;\n }\n\n media-mute-button[mediavolumelevel='off'] .vol-path {\n opacity: 0;\n }\n\n media-mute-button[mediavolumelevel='low'] #vol-high-path,\n media-mute-button[mediavolumelevel='medium'] #vol-high-path {\n opacity: 0;\n }\n\n media-volume-range {\n --media-range-track-background: rgba(255, 255, 255, 0.2);\n --media-range-thumb-opacity: 0;\n }\n\n @keyframes volume-in {\n 0% {\n visibility: hidden;\n opacity: 0;\n transform: translateY(50%) rotate(1deg);\n }\n 50% {\n visibility: visible;\n opacity: 1;\n transform: rotate(-2deg);\n }\n 100% {\n visibility: visible;\n opacity: 1;\n transform: translateY(0) rotate(0deg);\n }\n }\n\n @keyframes volume-out {\n 0% {\n visibility: visible;\n opacity: 1;\n transform: translateY(0) rotate(0deg);\n }\n 50% {\n opacity: 1;\n transform: rotate(0deg);\n }\n 100% {\n visibility: hidden;\n opacity: 0;\n transform: translateY(50%) rotate(1deg);\n }\n }\n\n .media-volume-range-wrapper {\n opacity: 0;\n visibility: hidden;\n\n position: absolute;\n top: -100%;\n left: calc(2 * var(--base));\n\n width: calc(10 * var(--base));\n height: calc(2.5 * var(--base));\n transform-origin: center left;\n }\n\n media-volume-range {\n opacity: 0;\n transition: opacity 0s 1s;\n\n width: calc(10 * var(--base));\n height: var(--base);\n padding: 0;\n border-radius: calc(0.25 * var(--base));\n overflow: hidden;\n background: rgba(0, 0, 0, 0.2);\n\n --media-range-bar-color: var(--media-accent-color);\n\n --media-range-padding-left: 0;\n --media-range-padding-right: 0;\n\n --media-range-track-width: calc(10 * var(--base));\n --media-range-track-height: var(--base);\n --media-range-track-border-radius: calc(0.25 * var(--base));\n --media-range-track-backdrop-filter: blur(10px) brightness(80%);\n\n --media-range-thumb-width: var(--base);\n --media-range-thumb-border-radius: calc(0.25 * var(--base));\n }\n\n media-volume-range[mediavolume] {\n opacity: 1;\n }\n\n [keyboardcontrol] media-volume-range:focus {\n outline: 1px solid rgba(27, 127, 204, 0.9);\n }\n\n media-mute-button:hover + .media-volume-range-wrapper,\n media-mute-button:focus + .media-volume-range-wrapper,\n media-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 animation: 0.3s volume-in forwards ease-out;\n }\n\n .media-volume-range-wrapper:not(:hover, :focus-within) {\n animation: 0.3s volume-out ease-out;\n }\n\n [keyboardcontrol] .media-volume-range-wrapper,\n [keyboardcontrol] .media-volume-range-wrapper:focus-within,\n [keyboardcontrol] .media-volume-range-wrapper:focus-within media-volume-range {\n visibility: visible;\n }\n </style>\n <media-mute-button class=\"media-button\" notooltip>\n <use class=\"svg-shadow\" xlink:href=\"#vol-paths\"></use>\n <svg slot=\"icon\" viewBox=\"0 0 32 32\">\n <g id=\"vol-paths\">\n <path\n id=\"speaker-path\"\n d=\"M16.5 20.486v-8.972c0-1.537-2.037-2.08-2.802-.745l-1.026 1.79a2.5 2.5 0 0 1-.8.85l-1.194.78A1.5 1.5 0 0 0 10 15.446v1.11c0 .506.255.978.678 1.255l1.194.782a2.5 2.5 0 0 1 .8.849l1.026 1.79c.765 1.334 2.802.792 2.802-.745Z\"\n />\n <path\n id=\"vol-low-path\"\n class=\"vol-path\"\n d=\"M18.5 18C19.6046 18 20.5 17.1046 20.5 16C20.5 14.8954 19.6046 14 18.5 14\"\n />\n <path\n id=\"vol-high-path\"\n class=\"vol-path\"\n d=\"M18 21C20.7614 21 23 18.7614 23 16C23 13.2386 20.7614 11 18 11\"\n />\n <path id=\"muted-path-1\" class=\"muted-path\" d=\"M23 18L19 14\" />\n <path id=\"muted-path-2\" class=\"muted-path\" d=\"M23 14L19 18\" />\n </g>\n </svg>\n </media-mute-button>\n <div class=\"media-volume-range-wrapper\">\n <media-volume-range></media-volume-range>\n </div>\n\n <style>\n media-time-display {\n position: relative;\n padding: calc(0.5 * var(--base));\n font-size: calc(0.7 * var(--base));\n border-radius: calc(0.5 * var(--base));\n }\n\n media-controller[breakpointmd] media-time-display:not([showduration]) {\n display: none;\n }\n\n media-controller:not([breakpointmd]) media-time-display[showduration] {\n display: none;\n }\n </style>\n <media-time-display></media-time-display>\n <media-time-display showduration></media-time-display>\n\n <style>\n media-time-range {\n height: calc(2 * var(--base));\n border-radius: calc(0.25 * var(--base));\n\n --media-range-track-backdrop-filter: invert(10%) blur(5px) brightness(110%);\n --media-range-track-background: rgba(255, 255, 255, 0.2);\n --media-range-track-pointer-background: rgba(255, 255, 255, 0.5);\n --media-range-track-border-radius: calc(0.25 * var(--base));\n\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-background: var(--media-accent-color);\n --media-range-thumb-transition: opacity 0.1s linear;\n --media-range-thumb-opacity: 0;\n\n --media-preview-thumbnail-border: calc(0.125 * var(--base)) solid #fff;\n --media-preview-thumbnail-border-radius: calc(0.5 * var(--base));\n --media-preview-thumbnail-min-width: calc(8 * var(--base));\n --media-preview-thumbnail-max-width: calc(10 * var(--base));\n --media-preview-thumbnail-min-height: calc(5 * var(--base));\n --media-preview-thumbnail-max-height: calc(7 * var(--base));\n --media-preview-box-margin: 0 0 -10px;\n }\n media-time-range:hover {\n --media-range-thumb-opacity: 1;\n --media-range-track-height: calc(0.25 * var(--base));\n }\n\n media-preview-thumbnail {\n margin-bottom: 5px;\n }\n\n media-preview-chapter-display {\n font-size: calc(0.6 * var(--base));\n padding-block: 0;\n }\n\n media-preview-time-display {\n font-size: calc(0.65 * var(--base));\n padding-top: 0;\n }\n </style>\n <media-time-range>\n <media-preview-thumbnail slot=\"preview\"></media-preview-thumbnail>\n <media-preview-chapter-display slot=\"preview\"></media-preview-chapter-display>\n <media-preview-time-display slot=\"preview\"></media-preview-time-display>\n </media-time-range>\n\n <style>\n media-captions-button {\n position: relative;\n }\n\n media-controller:not([breakpointmd]) media-captions-button {\n display: none;\n }\n\n media-captions-button svg :is(path, rect) {\n stroke: none;\n fill: var(--_primary-color);\n }\n\n media-captions-button:not([mediasubtitleslist]) svg {\n opacity: 0.3;\n }\n\n media-captions-button #cc-underline {\n opacity: 1;\n }\n\n media-captions-button[mediasubtitleslist][aria-checked='true'] #cc-underline {\n opacity: 1;\n }\n\n media-captions-button #cc-underline {\n transition: clip-path 0.15s ease-out;\n }\n\n media-captions-button #cc-underline {\n clip-path: inset(0 100% 0 0);\n }\n\n media-captions-button[aria-checked='true'] #cc-underline {\n clip-path: inset(0 0 0 0);\n }\n </style>\n <media-captions-button class=\"media-button\">\n <svg slot=\"icon\" viewBox=\"0 0 32 32\">\n <use class=\"svg-shadow\" xlink:href=\"#cc-icon\"></use>\n <g id=\"cc-icon\">\n <path\n class=\"cc-c\"\n d=\"M15.6634 14.3574H14.5636C14.4985 14.0523 14.3847 13.7842 14.2221 13.5532C14.0624 13.3222 13.8673 13.1283 13.6367 12.9715C13.409 12.8118 13.1562 12.692 12.8783 12.6122C12.6004 12.5323 12.3107 12.4924 12.0091 12.4924C11.4592 12.4924 10.961 12.6264 10.5146 12.8945C10.0711 13.1625 9.71776 13.5575 9.45463 14.0794C9.19445 14.6012 9.06436 15.2414 9.06436 16C9.06436 16.7586 9.19445 17.3988 9.45463 17.9206C9.71776 18.4425 10.0711 18.8375 10.5146 19.1055C10.961 19.3736 11.4592 19.5076 12.0091 19.5076C12.3107 19.5076 12.6004 19.4677 12.8783 19.3878C13.1562 19.308 13.409 19.1896 13.6367 19.0328C13.8673 18.8731 14.0624 18.6778 14.2221 18.4468C14.3847 18.2129 14.4985 17.9449 14.5636 17.6426H15.6634C15.5806 18.0903 15.4298 18.491 15.2111 18.8446C14.9923 19.1982 14.7203 19.499 14.3951 19.7471C14.0698 19.9924 13.7047 20.1792 13.2996 20.3075C12.8976 20.4358 12.4674 20.5 12.0091 20.5C11.2345 20.5 10.5456 20.3175 9.94246 19.9525C9.33932 19.5875 8.8648 19.0684 8.51888 18.3954C8.17296 17.7224 8 16.924 8 16C8 15.076 8.17296 14.2776 8.51888 13.6046C8.8648 12.9316 9.33932 12.4125 9.94246 12.0475C10.5456 11.6825 11.2345 11.5 12.0091 11.5C12.4674 11.5 12.8976 11.5642 13.2996 11.6925C13.7047 11.8208 14.0698 12.009 14.3951 12.2571C14.7203 12.5024 14.9923 12.8018 15.2111 13.1554C15.4298 13.5062 15.5806 13.9068 15.6634 14.3574Z\"\n />\n <path\n class=\"cc-c\"\n d=\"M24 14.3574H22.9002C22.8351 14.0523 22.7213 13.7842 22.5587 13.5532C22.399 13.3222 22.2039 13.1283 21.9733 12.9715C21.7456 12.8118 21.4928 12.692 21.2149 12.6122C20.937 12.5323 20.6473 12.4924 20.3457 12.4924C19.7958 12.4924 19.2976 12.6264 18.8511 12.8945C18.4077 13.1625 18.0543 13.5575 17.7912 14.0794C17.531 14.6012 17.4009 15.2414 17.4009 16C17.4009 16.7586 17.531 17.3988 17.7912 17.9206C18.0543 18.4425 18.4077 18.8375 18.8511 19.1055C19.2976 19.3736 19.7958 19.5076 20.3457 19.5076C20.6473 19.5076 20.937 19.4677 21.2149 19.3878C21.4928 19.308 21.7456 19.1896 21.9733 19.0328C22.2039 18.8731 22.399 18.6778 22.5587 18.4468C22.7213 18.2129 22.8351 17.9449 22.9002 17.6426H24C23.9172 18.0903 23.7664 18.491 23.5476 18.8446C23.3289 19.1982 23.0569 19.499 22.7316 19.7471C22.4064 19.9924 22.0413 20.1792 21.6362 20.3075C21.2341 20.4358 20.804 20.5 20.3457 20.5C19.5711 20.5 18.8822 20.3175 18.279 19.9525C17.6759 19.5875 17.2014 19.0684 16.8555 18.3954C16.5095 17.7224 16.3366 16.924 16.3366 16C16.3366 15.076 16.5095 14.2776 16.8555 13.6046C17.2014 12.9316 17.6759 12.4125 18.279 12.0475C18.8822 11.6825 19.5711 11.5 20.3457 11.5C20.804 11.5 21.2341 11.5642 21.6362 11.6925C22.0413 11.8208 22.4064 12.009 22.7316 12.2571C23.0569 12.5024 23.3289 12.8018 23.5476 13.1554C23.7664 13.5062 23.9172 13.9068 24 14.3574Z\"\n />\n <rect id=\"cc-underline\" x=\"8\" y=\"23\" width=\"16\" height=\"1\" rx=\"0.5\" />\n </g>\n </svg>\n </media-captions-button>\n\n <style>\n media-settings-menu-button svg {\n transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1);\n transform: rotateZ(0deg);\n }\n media-settings-menu-button[aria-expanded='true'] svg {\n transform: rotateZ(30deg);\n }\n </style>\n <media-settings-menu-button class=\"media-button\">\n <svg slot=\"icon\" viewBox=\"0 0 32 32\">\n <use class=\"svg-shadow\" xlink:href=\"#settings-icon\"></use>\n <g id=\"settings-icon\">\n <path\n d=\"M16 18C17.1046 18 18 17.1046 18 16C18 14.8954 17.1046 14 16 14C14.8954 14 14 14.8954 14 16C14 17.1046 14.8954 18 16 18Z\"\n />\n <path\n d=\"M21.0176 13.0362L20.9715 12.9531C20.8445 12.7239 20.7797 12.4629 20.784 12.1982L20.8049 10.8997C20.8092 10.6343 20.675 10.3874 20.4545 10.2549L18.5385 9.10362C18.3186 8.97143 18.0472 8.9738 17.8293 9.10981L16.7658 9.77382C16.5485 9.90953 16.2999 9.98121 16.0465 9.98121H15.9543C15.7004 9.98121 15.4513 9.90922 15.2336 9.77295L14.1652 9.10413C13.9467 8.96728 13.674 8.96518 13.4535 9.09864L11.5436 10.2545C11.3242 10.3873 11.1908 10.6336 11.1951 10.8981L11.216 12.1982C11.2203 12.4629 11.1555 12.7239 11.0285 12.9531L10.9831 13.0351C10.856 13.2645 10.6715 13.4535 10.4493 13.5819L9.36075 14.2109C9.13763 14.3398 8.99942 14.5851 9 14.8511L9.00501 17.152C9.00559 17.4163 9.1432 17.6597 9.36476 17.7883L10.4481 18.4167C10.671 18.546 10.8559 18.7364 10.9826 18.9673L11.0313 19.0559C11.1565 19.284 11.2203 19.5431 11.2161 19.8059L11.1951 21.1003C11.1908 21.3657 11.325 21.6126 11.5456 21.7452L13.4615 22.8964C13.6814 23.0286 13.9528 23.0262 14.1707 22.8902L15.2342 22.2262C15.4515 22.0905 15.7001 22.0188 15.9535 22.0188H16.0457C16.2996 22.0188 16.5487 22.0908 16.7664 22.227L17.8348 22.8959C18.0534 23.0327 18.326 23.0348 18.5465 22.9014L20.4564 21.7455C20.6758 21.6127 20.8092 21.3664 20.8049 21.1019L20.784 19.8018C20.7797 19.5371 20.8445 19.2761 20.9715 19.0469L21.0169 18.9649C21.144 18.7355 21.3285 18.5465 21.5507 18.4181L22.6393 17.7891C22.8624 17.6602 23.0006 17.4149 23 17.1489L22.995 14.848C22.9944 14.5837 22.8568 14.3403 22.6352 14.2117L21.5493 13.5818C21.328 13.4534 21.1442 13.2649 21.0176 13.0362Z\"\n />\n </g>\n </svg>\n </media-settings-menu-button>\n\n <style>\n media-pip-button[mediapipunavailable] {\n display: none;\n }\n </style>\n <media-pip-button class=\"media-button\">\n <svg slot=\"icon\" viewBox=\"0 0 32 32\">\n <use class=\"svg-shadow\" xlink:href=\"#pip-icon\"></use>\n <g id=\"pip-icon\">\n <path\n d=\"M12 22H9.77778C9.34822 22 9 21.6162 9 21.1429V10.8571C9 10.3838 9.34822 10 9.77778 10L22.2222 10C22.6518 10 23 10.3838 23 10.8571V12.5714\"\n />\n <path\n d=\"M15 21.5714V16.4286C15 16.1919 15.199 16 15.4444 16H22.5556C22.801 16 23 16.1919 23 16.4286V17V21.5714C23 21.8081 22.801 22 22.5556 22H20.3333H17.6667H15.4444C15.199 22 15 21.8081 15 21.5714Z\"\n />\n </g>\n </svg>\n </media-pip-button>\n\n <media-airplay-button class=\"media-button\">\n <svg viewBox=\"0 0 32 32\" aria-hidden=\"true\" slot=\"icon\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M20.5 20h1.722c.43 0 .778-.32.778-.714v-8.572c0-.394-.348-.714-.778-.714H9.778c-.43 0-.778.32-.778.714v1.429\"/>\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11.5 20H9.778c-.43 0-.778-.32-.778-.714v-8.572c0-.394.348-.714.778-.714h12.444c.43 0 .778.32.778.714v1.429\"/>\n <path stroke-linejoin=\"round\" d=\"m16 19 3.464 3.75h-6.928L16 19Z\"/>\n </svg>\n </media-airplay-button>\n\n <media-cast-button class=\"media-button\">\n <svg slot=\"icon\" viewBox=\"0 0 32 32\">\n <use class=\"svg-shadow\" xlink:href=\"#cast-icon\"></use>\n <g id=\"cast-icon\">\n <path\n d=\"M18.5 21.833h4.167c.46 0 .833-.373.833-.833V11a.833.833 0 0 0-.833-.833H9.333A.833.833 0 0 0 8.5 11v1.111m0 8.056c.92 0 1.667.746 1.667 1.666M8.5 17.667a4.167 4.167 0 0 1 4.167 4.166\"\n />\n <path d=\"M8.5 15.167a6.667 6.667 0 0 1 6.667 6.666\" />\n </g>\n </svg>\n </media-cast-button>\n\n <style>\n media-fullscreen-button .fs-arrow {\n translate: 0% 0%;\n }\n media-fullscreen-button:hover .fs-arrow {\n animation: 0.35s up-left-bounce cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n media-fullscreen-button:hover #fs-enter-top,\n media-fullscreen-button:hover #fs-exit-bottom {\n animation-name: up-right-bounce;\n }\n\n media-fullscreen-button:hover #fs-enter-bottom,\n media-fullscreen-button:hover #fs-exit-top {\n animation-name: down-left-bounce;\n }\n\n @keyframes up-left-bounce {\n 0% {\n translate: 0 0;\n }\n 50% {\n translate: -4% -4%;\n }\n }\n @keyframes up-right-bounce {\n 0% {\n translate: 0 0;\n }\n 50% {\n translate: 4% -4%;\n }\n }\n @keyframes down-left-bounce {\n 0% {\n translate: 0 0;\n }\n 50% {\n translate: -4% 4%;\n }\n }\n @keyframes down-right-bounce {\n 0% {\n translate: 0 0;\n }\n 50% {\n translate: 4% 4%;\n }\n }\n </style>\n <media-fullscreen-button class=\"media-button\">\n <svg slot=\"enter\" viewBox=\"0 0 32 32\">\n <use class=\"svg-shadow\" xlink:href=\"#fs-enter-paths\"></use>\n <g id=\"fs-enter-paths\">\n <g id=\"fs-enter-top\" class=\"fs-arrow\">\n <path d=\"M18 10H22V14\" />\n <path d=\"M22 10L18 14\" />\n </g>\n <g id=\"fs-enter-bottom\" class=\"fs-arrow\">\n <path d=\"M14 22L10 22V18\" />\n <path d=\"M10 22L14 18\" />\n </g>\n </g>\n </svg>\n <svg slot=\"exit\" viewBox=\"0 0 32 32\">\n <use class=\"svg-shadow\" xlink:href=\"#fs-exit-paths\"></use>\n <g id=\"fs-exit-paths\">\n <g id=\"fs-exit-top\" class=\"fs-arrow\">\n <path d=\"M22 14H18V10\" />\n <path d=\"M22 10L18 14\" />\n </g>\n <g id=\"fs-exit-bottom\" class=\"fs-arrow\">\n <path d=\"M10 18L14 18V22\" />\n <path d=\"M14 18L10 22\" />\n </g>\n </g>\n </svg>\n </media-fullscreen-button>\n <style>\n .mc-branding {\n display: flex;\n align-items: center;\n padding: 0 calc(0.25 * var(--base));\n position: relative;\n --media-tooltip-background: rgb(28 28 28 / .24);\n --media-tooltip-padding: .7em 1em;\n --media-tooltip-distance: 8px;\n --media-tooltip-container-margin: 18px;\n --media-text-content-height: 1.2;\n }\n\n .mc-branding a {\n display: flex;\n align-items: center;\n height: calc(2 * var(--base));\n padding: 0 calc(0.4 * var(--base));\n opacity: 0.6;\n filter: var(--mc-branding-filter, brightness(0) invert(1));\n transition: opacity 0.3s;\n text-decoration: none;\n border-radius: 25%;\n }\n\n .mc-branding a:hover {\n opacity: 1;\n filter: none;\n box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px;\n backdrop-filter: blur(10px) invert(15%) brightness(80%);\n -webkit-backdrop-filter: blur(10px) invert(15%) brightness(80%);\n }\n\n .mc-branding img {\n height: calc(1.2 * var(--base));\n width: auto;\n display: block;\n }\n\n .mc-branding media-tooltip {\n max-width: 0;\n overflow-x: clip;\n opacity: 0;\n transition: opacity .3s, max-width 0s 9s;\n }\n\n .mc-branding:hover media-tooltip {\n max-width: 100vw;\n opacity: 1;\n transition: opacity .3s;\n }\n </style>\n <div class=\"mc-branding\">\n <a href=\"https://mediacreators.io\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"MediaCreators\" data-branding-link>\n <img src=\"${LOGO_DATA_URI}\" alt=\"\" draggable=\"false\" data-branding-logo />\n </a>\n <media-tooltip placement=\"top\" data-branding-tooltip>MediaCreators</media-tooltip>\n </div>\n </media-control-bar>\n </media-controller>\n\n `\n}\n\nclass MediaThemeMediacreatorsElement extends MediaThemeElement {\n static template = template\n}\n\nif (globalThis.customElements && !globalThis.customElements.get(\"media-theme-mediacreators\")) {\n globalThis.customElements.define(\"media-theme-mediacreators\", MediaThemeMediacreatorsElement)\n}\n\nexport default MediaThemeMediacreatorsElement\n","import logo from \"./mdcrtrsxdclb000f3b6tm98p15rp.png\"\n\nexport const LOGO_DATA_URI = logo\n","import type { TranslateDictionary } from \"media-chrome/dist/lang/en.js\"\n\nexport const Es: TranslateDictionary = {\n \"Start airplay\": \"Iniciar AirPlay\",\n \"Stop airplay\": \"Detener AirPlay\",\n Audio: \"Audio\",\n Captions: \"Subtítulos\",\n \"Enable captions\": \"Activar subtítulos\",\n \"Disable captions\": \"Desactivar subtítulos\",\n \"Start casting\": \"Iniciar transmisión\",\n \"Stop casting\": \"Detener transmisión\",\n \"Enter fullscreen mode\": \"Pantalla completa\",\n \"Exit fullscreen mode\": \"Salir de pantalla completa\",\n Mute: \"Silenciar\",\n Unmute: \"Activar sonido\",\n Loop: \"Repetir\",\n \"Enter picture in picture mode\": \"Entrar en picture-in-picture\",\n \"Exit picture in picture mode\": \"Salir de picture-in-picture\",\n Play: \"Reproducir\",\n Pause: \"Pausar\",\n \"Playback rate\": \"Velocidad de reproducción\",\n \"Playback rate {playbackRate}\": \"Velocidad {playbackRate}\",\n Quality: \"Calidad\",\n \"Seek backward\": \"Retroceder\",\n \"Seek forward\": \"Avanzar\",\n Settings: \"Configuración\",\n Auto: \"Automático\",\n \"audio player\": \"reproductor de audio\",\n \"video player\": \"reproductor de video\",\n volume: \"volumen\",\n seek: \"buscar\",\n \"closed captions\": \"subtítulos\",\n \"current playback rate\": \"velocidad actual\",\n \"playback time\": \"tiempo de reproducción\",\n \"media loading\": \"cargando\",\n settings: \"configuración\",\n \"audio tracks\": \"pistas de audio\",\n quality: \"calidad\",\n play: \"reproducir\",\n pause: \"pausar\",\n mute: \"silenciar\",\n unmute: \"activar sonido\",\n \"chapter: {chapterName}\": \"capítulo: {chapterName}\",\n live: \"en vivo\",\n Off: \"Desactivado\",\n \"start airplay\": \"iniciar AirPlay\",\n \"stop airplay\": \"detener AirPlay\",\n \"start casting\": \"iniciar transmisión\",\n \"stop casting\": \"detener transmisión\",\n \"enter fullscreen mode\": \"pantalla completa\",\n \"exit fullscreen mode\": \"salir de pantalla completa\",\n \"enter picture in picture mode\": \"entrar en picture-in-picture\",\n \"exit picture in picture mode\": \"salir de picture-in-picture\",\n \"seek to live\": \"ir a en vivo\",\n \"playing live\": \"en vivo\",\n \"seek back {seekOffset} seconds\": \"retroceder {seekOffset} segundos\",\n \"seek forward {seekOffset} seconds\": \"avanzar {seekOffset} segundos\",\n \"Network Error\": \"Error de red\",\n \"Decode Error\": \"Error de decodificación\",\n \"Source Not Supported\": \"Fuente no soportada\",\n \"Encryption Error\": \"Error de cifrado\",\n \"A network error caused the media download to fail.\": \"Un error de red causó que la descarga fallara.\",\n \"A media error caused playback to be aborted. The media could be corrupt or your browser does not support this format.\":\n \"Un error causó que la reproducción se interrumpiera. El archivo puede estar dañado o tu navegador no soporta este formato.\",\n \"An unsupported error occurred. The server or network failed, or your browser does not support this format.\":\n \"Ocurrió un error. El servidor o la red fallaron, o tu navegador no soporta este formato.\",\n \"The media is encrypted and there are no keys to decrypt it.\":\n \"El contenido está cifrado y no hay claves para descifrarlo.\",\n hour: \"hora\",\n hours: \"horas\",\n minute: \"minuto\",\n minutes: \"minutos\",\n second: \"segundo\",\n seconds: \"segundos\",\n \"{time} remaining\": \"{time} restante\",\n \"{currentTime} of {totalTime}\": \"{currentTime} de {totalTime}\",\n \"video not loaded, unknown time.\": \"video no cargado, tiempo desconocido.\",\n}\n","import type { TranslateDictionary } from \"media-chrome/dist/lang/en.js\"\n\nexport const Pt: TranslateDictionary = {\n \"Start airplay\": \"Iniciar AirPlay\",\n \"Stop airplay\": \"Parar AirPlay\",\n Audio: \"Áudio\",\n Captions: \"Legendas\",\n \"Enable captions\": \"Ativar legendas\",\n \"Disable captions\": \"Desativar legendas\",\n \"Start casting\": \"Iniciar transmissão\",\n \"Stop casting\": \"Parar transmissão\",\n \"Enter fullscreen mode\": \"Tela cheia\",\n \"Exit fullscreen mode\": \"Sair da tela cheia\",\n Mute: \"Silenciar\",\n Unmute: \"Ativar som\",\n Loop: \"Repetir\",\n \"Enter picture in picture mode\": \"Entrar em picture-in-picture\",\n \"Exit picture in picture mode\": \"Sair de picture-in-picture\",\n Play: \"Reproduzir\",\n Pause: \"Pausar\",\n \"Playback rate\": \"Velocidade de reprodução\",\n \"Playback rate {playbackRate}\": \"Velocidade {playbackRate}\",\n Quality: \"Qualidade\",\n \"Seek backward\": \"Retroceder\",\n \"Seek forward\": \"Avançar\",\n Settings: \"Configurações\",\n Auto: \"Automático\",\n \"audio player\": \"reprodutor de áudio\",\n \"video player\": \"reprodutor de vídeo\",\n volume: \"volume\",\n seek: \"buscar\",\n \"closed captions\": \"legendas\",\n \"current playback rate\": \"velocidade atual\",\n \"playback time\": \"tempo de reprodução\",\n \"media loading\": \"carregando\",\n settings: \"configurações\",\n \"audio tracks\": \"faixas de áudio\",\n quality: \"qualidade\",\n play: \"reproduzir\",\n pause: \"pausar\",\n mute: \"silenciar\",\n unmute: \"ativar som\",\n \"chapter: {chapterName}\": \"capítulo: {chapterName}\",\n live: \"ao vivo\",\n Off: \"Desativado\",\n \"start airplay\": \"iniciar AirPlay\",\n \"stop airplay\": \"parar AirPlay\",\n \"start casting\": \"iniciar transmissão\",\n \"stop casting\": \"parar transmissão\",\n \"enter fullscreen mode\": \"tela cheia\",\n \"exit fullscreen mode\": \"sair da tela cheia\",\n \"enter picture in picture mode\": \"entrar em picture-in-picture\",\n \"exit picture in picture mode\": \"sair de picture-in-picture\",\n \"seek to live\": \"ir para ao vivo\",\n \"playing live\": \"ao vivo\",\n \"seek back {seekOffset} seconds\": \"retroceder {seekOffset} segundos\",\n \"seek forward {seekOffset} seconds\": \"avançar {seekOffset} segundos\",\n \"Network Error\": \"Erro de rede\",\n \"Decode Error\": \"Erro de decodificação\",\n \"Source Not Supported\": \"Fonte não suportada\",\n \"Encryption Error\": \"Erro de criptografia\",\n \"A network error caused the media download to fail.\": \"Um erro de rede causou falha no download.\",\n \"A media error caused playback to be aborted. The media could be corrupt or your browser does not support this format.\":\n \"Um erro causou a interrupção da reprodução. O arquivo pode estar corrompido ou seu navegador não suporta este formato.\",\n \"An unsupported error occurred. The server or network failed, or your browser does not support this format.\":\n \"Ocorreu um erro. O servidor ou rede falhou, ou seu navegador não suporta este formato.\",\n \"The media is encrypted and there are no keys to decrypt it.\":\n \"O conteúdo está criptografado e não há chaves para descriptografá-lo.\",\n hour: \"hora\",\n hours: \"horas\",\n minute: \"minuto\",\n minutes: \"minutos\",\n second: \"segundo\",\n seconds: \"segundos\",\n \"{time} remaining\": \"{time} restante\",\n \"{currentTime} of {totalTime}\": \"{currentTime} de {totalTime}\",\n \"video not loaded, unknown time.\": \"vídeo não carregado, tempo desconhecido.\",\n}\n","import { useEffect, useRef, useState } from \"react\"\nimport { AccessDeniedError, fetchPlaybackTokens, fetchSessionToken } from \"../lib/api\"\nimport type { PlaybackTokens, PlayerAccessState, PlayerEnv, SessionToken } from \"../types\"\n\ntype RefreshFn = () => Promise<void>\n\nfunction scheduleRefresh(\n expiresIn: number,\n refreshFn: RefreshFn,\n timerRef: { current: ReturnType<typeof setTimeout> | null }\n): void {\n if (timerRef.current !== null) {\n clearTimeout(timerRef.current)\n }\n const refreshAtMs = expiresIn * 0.8 * 1000\n timerRef.current = setTimeout(async () => {\n try {\n await refreshFn()\n } catch (err) {\n console.error(\"[player/session] Scheduled refresh failed:\", err)\n }\n }, refreshAtMs)\n}\n\nfunction cancelRefresh(timerRef: { current: ReturnType<typeof setTimeout> | null }): void {\n if (timerRef.current !== null) {\n clearTimeout(timerRef.current)\n timerRef.current = null\n }\n}\n\nexport interface UsePlaybackSessionResult {\n tokens: PlaybackTokens | null\n isLoading: boolean\n error: Error | null\n /** Set when the playback service refused the viewer (403). Not an `error`: render a lock. */\n accessDenied: PlayerAccessState | null\n}\n\nexport function usePlaybackSession(\n creatorId: string,\n playbackId: string,\n duration: number,\n fanToken?: string,\n env: PlayerEnv = \"production\",\n getSession?: () => Promise<SessionToken>\n): UsePlaybackSessionResult {\n const [tokens, setTokens] = useState<PlaybackTokens | null>(null)\n const [isLoading, setIsLoading] = useState(true)\n const [error, setError] = useState<Error | null>(null)\n const [accessDenied, setAccessDenied] = useState<PlayerAccessState | null>(null)\n\n // Read at call time so a new inline `getSession` each render does not restart the session.\n const getSessionRef = useRef(getSession)\n getSessionRef.current = getSession\n\n const sessionTokenRef = useRef<string | null>(null)\n const sessionExpiresAtRef = useRef<Date | null>(null)\n const tokensRef = useRef<PlaybackTokens | null>(null)\n const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n const visibilityHandlerRef = useRef<(() => void) | null>(null)\n\n useEffect(() => {\n let cancelled = false\n tokensRef.current = null\n setTokens(null)\n setIsLoading(true)\n setError(null)\n setAccessDenied(null)\n\n function mintSession(): Promise<SessionToken> {\n const hostSession = getSessionRef.current\n return hostSession ? hostSession() : fetchSessionToken(creatorId, fanToken, env)\n }\n\n function deny(err: AccessDeniedError): void {\n if (cancelled) return\n cancelRefresh(timerRef)\n tokensRef.current = null\n setTokens(null)\n setError(null)\n setAccessDenied(err.state)\n }\n\n async function refresh(): Promise<void> {\n if (!sessionTokenRef.current || !sessionExpiresAtRef.current) return\n\n try {\n const now = Date.now()\n const sessionExpiry = sessionExpiresAtRef.current.getTime()\n let sessionToken = sessionTokenRef.current\n\n if (sessionExpiry - now < 60_000) {\n const newSession = await mintSession()\n sessionToken = newSession.token\n sessionTokenRef.current = newSession.token\n sessionExpiresAtRef.current = new Date(newSession.expiresAt)\n }\n\n const nextTokens = await fetchPlaybackTokens(creatorId, playbackId, duration, sessionToken, env)\n if (cancelled) return\n tokensRef.current = nextTokens\n setTokens(nextTokens)\n scheduleRefresh(nextTokens.expiresIn, refresh, timerRef)\n } catch (err) {\n if (!(err instanceof AccessDeniedError)) throw err\n deny(err)\n }\n }\n\n async function initialize(): Promise<void> {\n try {\n const session = await mintSession()\n if (cancelled) return\n\n sessionTokenRef.current = session.token\n sessionExpiresAtRef.current = new Date(session.expiresAt)\n\n const initialTokens = await fetchPlaybackTokens(creatorId, playbackId, duration, session.token, env)\n if (cancelled) return\n\n tokensRef.current = initialTokens\n setTokens(initialTokens)\n scheduleRefresh(initialTokens.expiresIn, refresh, timerRef)\n\n visibilityHandlerRef.current = () => {\n if (document.visibilityState !== \"visible\") return\n const current = tokensRef.current\n if (!sessionTokenRef.current || !sessionExpiresAtRef.current || !current) return\n\n const now = Date.now()\n const sessionExpiry = sessionExpiresAtRef.current.getTime()\n const approxTokenExpiry = now + current.expiresIn * 1000\n const sessionExpired = sessionExpiry <= now\n const tokenNearExpiry = approxTokenExpiry - now < current.expiresIn * 0.2 * 1000\n\n if (sessionExpired || tokenNearExpiry) {\n cancelRefresh(timerRef)\n refresh().catch((err: Error) => {\n if (!cancelled) setError(err)\n })\n }\n }\n document.addEventListener(\"visibilitychange\", visibilityHandlerRef.current)\n } catch (err) {\n if (err instanceof AccessDeniedError) {\n deny(err)\n } else if (!cancelled) {\n setError(err instanceof Error ? err : new Error(String(err)))\n setTokens(null)\n }\n } finally {\n if (!cancelled) setIsLoading(false)\n }\n }\n\n void initialize()\n\n return () => {\n cancelled = true\n cancelRefresh(timerRef)\n if (visibilityHandlerRef.current) {\n document.removeEventListener(\"visibilitychange\", visibilityHandlerRef.current)\n visibilityHandlerRef.current = null\n }\n sessionTokenRef.current = null\n sessionExpiresAtRef.current = null\n }\n }, [creatorId, playbackId, duration, fanToken, env])\n\n return { tokens, isLoading, error, accessDenied }\n}\n","/** Platform environment. `preview` targets the preview Workers; defaults to `production`. */\nexport type PlayerEnv = \"production\" | \"preview\"\n\nexport const PLATFORM_ENDPOINTS = {\n production: {\n apiBase: \"https://api.mediacreators.io\",\n playbackBase: \"https://playback.mediacreators.io\",\n },\n preview: {\n apiBase: \"https://preview-api.mediacreators.io\",\n playbackBase: \"https://preview-playback.mediacreators.io\",\n },\n} as const satisfies Record<PlayerEnv, { apiBase: string; playbackBase: string }>\n\nexport const PLATFORM = {\n ...PLATFORM_ENDPOINTS.production,\n dataEnvKey: \"fhri2484lqcn6gk89r013ckmb\",\n} as const\n\nexport interface PlayerAsset {\n assetId: string\n playbackId: string\n title: string\n /** Optional duration hint (seconds) for token TTL; defaults to 3600 */\n duration?: number\n}\n\nexport interface PlayerAuth {\n fanToken: string\n}\n\nexport interface PlayerTheme {\n primaryColor: string\n}\n\nexport interface PlayerMetadata {\n playerName?: string\n custom1?: string\n custom2?: string\n viewerUserId?: string\n}\n\nexport interface PlayerError {\n code: string\n message: string\n}\n\n/** Code the playback service answers a refused token request with (HTTP 403 `error`). */\nexport type PlayerAccessState = \"access_denied\" | \"not_available\"\n\nexport interface PlayerEvents {\n onTimeUpdate?: (currentTime: number, duration: number, pct: number) => void\n onQuartile?: (quartile: 25 | 50 | 75 | 100) => void\n onPause?: (currentTime: number) => void\n onPlay?: (currentTime: number) => void\n onSeeked?: (from: number, to: number) => void\n onComplete?: () => void\n onError?: (error: PlayerError) => void\n onReady?: () => void\n onResume?: (position: number) => void\n}\n\nexport interface PlayerBrandingConfig {\n logoUrl: string\n linkUrl: string\n logoTitle?: string\n filterToWhite?: boolean\n}\n\nexport interface PlayerControlsConfig {\n captions?: boolean\n airplay?: boolean\n pip?: boolean\n cast?: boolean\n playbackSpeed?: boolean\n quality?: boolean\n storyboard?: boolean\n}\n\nexport interface PlayerConfig {\n controls?: PlayerControlsConfig\n branding?: PlayerBrandingConfig\n accentColor?: string | null\n defaultLanguage?: string\n defaultCaptionsLanguage?: string | null\n}\n\nexport interface MediaCreatorsPlayerProps extends PlayerEvents {\n creatorId: string\n asset: PlayerAsset\n /** Override the platform environment (e.g. `\"preview\"` on preview deploys). Defaults to `\"production\"`. */\n env?: PlayerEnv\n auth?: PlayerAuth\n theme?: PlayerTheme\n /** Custom branding override. Omit to show the default MediaCreators logo. */\n branding?: PlayerBrandingConfig\n /** Player customization config (controls visibility, accent, language). */\n config?: PlayerConfig\n /** Poster / thumbnail shown before playback. */\n poster?: string\n metadata?: PlayerMetadata\n autoResume?: boolean\n className?: string\n /** Host-minted playback session (sc-one). When set, the SDK never calls POST /playback-session. */\n getSession?: () => Promise<SessionToken>\n /** Called when the token endpoint answers 403 with code access_denied / not_available. */\n onAccessDenied?: (state: PlayerAccessState) => void\n}\n\nexport interface PlaybackTokens {\n video: string\n thumbnail: string\n storyboard: string\n expiresIn: number\n}\n\nexport interface SessionToken {\n token: string\n expiresAt: string\n}\n\nexport interface WatchProgressRecord {\n asset_id: string\n position: number\n duration: number\n completed: boolean\n progress_pct: number\n updated_at: string\n title?: string\n thumbnail_url?: string | null\n}\n","import { PLATFORM_ENDPOINTS } from \"../types\"\nimport type { PlaybackTokens, PlayerAccessState, PlayerEnv, SessionToken, WatchProgressRecord } from \"../types\"\n\nclass ApiError extends Error {\n constructor(\n message: string,\n public readonly status: number\n ) {\n super(message)\n this.name = \"ApiError\"\n }\n}\n\n/** The playback service refused to sign tokens: the viewer may not watch this item (403). */\nexport class AccessDeniedError extends ApiError {\n constructor(public readonly state: PlayerAccessState) {\n super(state === \"not_available\" ? \"Content is not available\" : \"Access denied\", 403)\n this.name = \"AccessDeniedError\"\n }\n}\n\n// Only the `error` code matters: other 403 bodies (e.g. a session for another creator) are not a lock.\nasync function readAccessState(res: Response): Promise<PlayerAccessState | null> {\n try {\n const body = (await res.json()) as { error?: unknown } | null\n const code = body?.error\n return code === \"access_denied\" || code === \"not_available\" ? code : null\n } catch {\n return null\n }\n}\n\nasync function fetchWithRetry(url: string, init?: RequestInit, maxRetries = 3): Promise<Response> {\n let lastError: Error = new Error(\"Unknown fetch error\")\n for (let attempt = 0; attempt < maxRetries; attempt++) {\n try {\n const res = await fetch(url, init)\n if (res.ok || res.status < 500) {\n return res\n }\n lastError = new ApiError(`HTTP ${res.status}`, res.status)\n } catch (err) {\n lastError = err instanceof Error ? err : new Error(String(err))\n }\n if (attempt < maxRetries - 1) {\n await new Promise((resolve) => setTimeout(resolve, 2 ** attempt * 500))\n }\n }\n throw lastError\n}\n\nexport async function fetchSessionToken(\n creatorId: string,\n fanToken?: string,\n env: PlayerEnv = \"production\"\n): Promise<SessionToken> {\n const headers: Record<string, string> = {}\n if (fanToken) {\n headers[\"X-Fan-Token\"] = fanToken\n }\n\n const url = `${PLATFORM_ENDPOINTS[env].apiBase}/v1/mos/${encodeURIComponent(creatorId)}/playback-session`\n const res = await fetchWithRetry(url, { method: \"POST\", headers })\n\n if (!res.ok) {\n throw new ApiError(`Failed to fetch session token: ${res.status}`, res.status)\n }\n\n const json = (await res.json()) as { success: true; token: string; expires_at: string }\n return { token: json.token, expiresAt: json.expires_at }\n}\n\nexport async function fetchPlaybackTokens(\n creatorId: string,\n playbackId: string,\n duration: number,\n sessionToken: string,\n env: PlayerEnv = \"production\"\n): Promise<PlaybackTokens> {\n const params = new URLSearchParams({ duration: String(duration) })\n const url = `${PLATFORM_ENDPOINTS[env].playbackBase}/v1/${encodeURIComponent(creatorId)}/tokens/${encodeURIComponent(playbackId)}?${params}`\n\n const res = await fetchWithRetry(url, {\n headers: { Authorization: `Bearer ${sessionToken}` },\n })\n\n if (res.status === 403) {\n const state = await readAccessState(res)\n if (state) throw new AccessDeniedError(state)\n }\n if (res.status === 401 || res.status === 403) {\n throw new ApiError(\"Session token invalid or expired\", res.status)\n }\n if (!res.ok) {\n throw new ApiError(`Failed to fetch playback tokens: ${res.status}`, res.status)\n }\n\n const json = (await res.json()) as {\n success: true\n tokens: { video: string; thumbnail: string; storyboard: string }\n expires_in: number\n }\n\n return {\n video: json.tokens.video,\n thumbnail: json.tokens.thumbnail,\n storyboard: json.tokens.storyboard,\n expiresIn: json.expires_in,\n }\n}\n\nexport type SaveProgressResult = { ok: true } | { ok: false; status: number }\n\nexport async function saveWatchProgress(\n creatorId: string,\n assetId: string,\n position: number,\n duration: number,\n fanToken: string,\n completed?: boolean,\n env: PlayerEnv = \"production\"\n): Promise<SaveProgressResult> {\n const url = `${PLATFORM_ENDPOINTS[env].apiBase}/v1/mos/${encodeURIComponent(creatorId)}/watch-progress/${encodeURIComponent(assetId)}`\n try {\n const res = await fetch(url, {\n method: \"PUT\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"X-Fan-Token\": fanToken,\n },\n body: JSON.stringify({ position, duration, completed: completed ?? false }),\n keepalive: true,\n })\n if (!res.ok) return { ok: false, status: res.status }\n return { ok: true }\n } catch {\n return { ok: false, status: 0 }\n }\n}\n\nexport async function getWatchProgress(\n creatorId: string,\n assetId: string,\n fanToken: string,\n env: PlayerEnv = \"production\"\n): Promise<WatchProgressRecord | null> {\n const url = `${PLATFORM_ENDPOINTS[env].apiBase}/v1/mos/${encodeURIComponent(creatorId)}/watch-progress/${encodeURIComponent(assetId)}`\n try {\n const res = await fetch(url, {\n headers: { \"X-Fan-Token\": fanToken },\n })\n if (res.status === 401 || res.status === 404) return null\n if (!res.ok) return null\n const json = (await res.json()) as { success: true; data: WatchProgressRecord }\n return json.data\n } catch {\n return null\n }\n}\n","import { useEffect, useRef } from \"react\"\nimport type { PlayerEvents } from \"../types\"\n\nconst QUARTILES = [25, 50, 75, 100] as const\n\nexport function usePlayerEvents(events: PlayerEvents, assetId: string) {\n const firedQuartiles = useRef(new Set<number>())\n const prevTime = useRef(0)\n const eventsRef = useRef(events)\n eventsRef.current = events\n\n useEffect(() => {\n firedQuartiles.current = new Set()\n prevTime.current = 0\n }, [assetId])\n\n return {\n handleTimeUpdate: (currentTime: number, duration: number) => {\n if (!duration || duration <= 0) return\n const pct = (currentTime / duration) * 100\n eventsRef.current.onTimeUpdate?.(currentTime, duration, pct)\n\n for (const q of QUARTILES) {\n if (pct >= q && !firedQuartiles.current.has(q)) {\n firedQuartiles.current.add(q)\n eventsRef.current.onQuartile?.(q)\n }\n }\n\n const delta = Math.abs(currentTime - prevTime.current)\n // Heuristic seek: jump > 2s without being a normal play tick\n if (delta > 2 && prevTime.current > 0) {\n eventsRef.current.onSeeked?.(prevTime.current, currentTime)\n }\n prevTime.current = currentTime\n },\n handlePause: (currentTime: number) => {\n eventsRef.current.onPause?.(currentTime)\n },\n handlePlay: (currentTime: number) => {\n eventsRef.current.onPlay?.(currentTime)\n },\n handleComplete: () => {\n if (!firedQuartiles.current.has(100)) {\n firedQuartiles.current.add(100)\n eventsRef.current.onQuartile?.(100)\n }\n eventsRef.current.onComplete?.()\n },\n handleReady: () => {\n eventsRef.current.onReady?.()\n },\n handleError: (message: string) => {\n eventsRef.current.onError?.({ code: \"PLAYER_ERROR\", message })\n },\n }\n}\n","import { useCallback, useRef } from \"react\"\n\nconst STORAGE_KEY = \"mc-player-volume\"\n\nfunction getStoredVolume(): number | null {\n try {\n const raw = window.localStorage.getItem(STORAGE_KEY)\n if (raw === null) return null\n const parsed = parseFloat(raw)\n if (Number.isNaN(parsed) || parsed < 0 || parsed > 1) return null\n return parsed\n } catch {\n return null\n }\n}\n\nfunction saveVolume(volume: number): void {\n try {\n window.localStorage.setItem(STORAGE_KEY, String(volume))\n } catch {\n // localStorage may be blocked (iframe / private mode)\n }\n}\n\nexport function useVolume(): {\n initialVolume: number | null\n handleVolumeChange: (volume: number) => void\n} {\n const initialVolume = useRef(getStoredVolume())\n const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n const handleVolumeChange = useCallback((volume: number) => {\n if (debounceTimer.current !== null) clearTimeout(debounceTimer.current)\n debounceTimer.current = setTimeout(() => saveVolume(volume), 500)\n }, [])\n\n return { initialVolume: initialVolume.current, handleVolumeChange }\n}\n","import { useCallback, useEffect, useRef, useState } from \"react\"\nimport { getWatchProgress, saveWatchProgress } from \"../lib/api\"\nimport type { PlayerEnv } from \"../types\"\n\nconst SAVE_DEBOUNCE_MS = 10_000\n\nexport interface UseWatchProgressResult {\n resumePosition: number | null\n saveProgress: (position: number, duration: number) => void\n authExpired: boolean\n}\n\nexport function useWatchProgress(\n creatorId: string,\n assetId: string,\n fanToken: string | undefined,\n autoResume: boolean | undefined,\n onResume?: (position: number) => void,\n env: PlayerEnv = \"production\"\n): UseWatchProgressResult {\n const [resumePosition, setResumePosition] = useState<number | null>(null)\n const [authExpired, setAuthExpired] = useState(false)\n const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null)\n const onResumeRef = useRef(onResume)\n onResumeRef.current = onResume\n const stoppedRef = useRef(false)\n\n useEffect(() => {\n stoppedRef.current = false\n setAuthExpired(false)\n setResumePosition(null)\n\n if (!fanToken || !autoResume) return\n\n let cancelled = false\n void getWatchProgress(creatorId, assetId, fanToken, env).then((record) => {\n if (cancelled || !record || record.completed) return\n if (record.position > 5) {\n setResumePosition(record.position)\n onResumeRef.current?.(record.position)\n }\n })\n\n return () => {\n cancelled = true\n if (debounceTimer.current !== null) {\n clearTimeout(debounceTimer.current)\n debounceTimer.current = null\n }\n }\n }, [creatorId, assetId, fanToken, autoResume, env])\n\n const saveProgress = useCallback(\n (position: number, duration: number) => {\n if (!fanToken || stoppedRef.current) return\n\n if (debounceTimer.current !== null) clearTimeout(debounceTimer.current)\n debounceTimer.current = setTimeout(() => {\n const completed = duration > 0 && position / duration >= 0.95\n void saveWatchProgress(creatorId, assetId, position, duration, fanToken, completed, env).then((result) => {\n if (!result.ok && result.status === 401) {\n stoppedRef.current = true\n setAuthExpired(true)\n }\n })\n }, SAVE_DEBOUNCE_MS)\n },\n [creatorId, assetId, fanToken, env]\n )\n\n return { resumePosition, saveProgress, authExpired }\n}\n","import type { FC } from \"react\"\nimport type { PlayerAccessState } from \"../types\"\n\n// The SDK ships no copy of its own (hosts own the language and the call to action): the\n// lock is an icon over the poster, labelled for assistive tech only.\nconst LABELS: Record<PlayerAccessState, string> = {\n access_denied: \"Locked\",\n not_available: \"Not available\",\n}\n\ninterface AccessLockProps {\n state: PlayerAccessState\n poster?: string\n className?: string\n}\n\nexport const AccessLock: FC<AccessLockProps> = ({ state, poster, className }) => (\n <div\n className={className}\n role=\"img\"\n aria-label={LABELS[state]}\n data-mc-player-state={state}\n style={{\n position: \"relative\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n width: \"100%\",\n aspectRatio: \"16 / 9\",\n overflow: \"hidden\",\n background: \"#111\",\n }}\n >\n {poster ? (\n <img\n src={poster}\n alt=\"\"\n aria-hidden=\"true\"\n style={{ position: \"absolute\", inset: 0, width: \"100%\", height: \"100%\", objectFit: \"cover\", opacity: 0.3 }}\n />\n ) : null}\n <svg viewBox=\"0 0 24 24\" width=\"48\" height=\"48\" fill=\"#fff\" aria-hidden=\"true\" style={{ position: \"relative\" }}>\n <path d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z\" />\n </svg>\n </div>\n)\n","import type { PlayerBrandingConfig } from \"../types\"\nimport { LOGO_DATA_URI } from \"../assets/logo\"\n\nfunction applyBranding(\n player: HTMLElement,\n videoId: string,\n creatorId: string,\n config?: PlayerBrandingConfig\n): boolean {\n const theme = player.shadowRoot?.querySelector(\"media-theme\")\n const controller = theme?.shadowRoot?.querySelector(\"media-controller\")\n if (!controller) return false\n\n const link = controller.querySelector<HTMLAnchorElement>(\"[data-branding-link]\")\n if (!link) return false\n\n const utmParams = {\n utm_source: \"player\",\n utm_medium: \"embed\",\n utm_campaign: \"watermark\",\n utm_content: videoId,\n utm_term: creatorId,\n }\n\n if (config?.linkUrl) {\n try {\n const url = new URL(config.linkUrl)\n for (const [k, v] of Object.entries(utmParams)) url.searchParams.set(k, v)\n link.href = url.toString()\n } catch {\n link.href = config.linkUrl\n }\n } else {\n link.href = `https://mediacreators.io?${new URLSearchParams(utmParams)}`\n }\n\n const img = controller.querySelector<HTMLImageElement>(\"[data-branding-logo]\")\n if (img) img.src = config?.logoUrl ?? LOGO_DATA_URI\n\n const tooltip = controller.querySelector<HTMLElement & { updateXOffset?: () => void }>(\"[data-branding-tooltip]\")\n const brandingDiv = tooltip?.parentElement\n if (tooltip?.updateXOffset && brandingDiv && !brandingDiv.dataset.tooltipBound) {\n brandingDiv.dataset.tooltipBound = \"1\"\n brandingDiv.addEventListener(\"mouseenter\", () => tooltip.updateXOffset!())\n }\n\n if (tooltip) {\n tooltip.textContent = config?.logoTitle ?? \"MediaCreators\"\n }\n\n return true\n}\n\nexport function updateBranding(player: HTMLElement, videoId: string, creatorId: string, config?: PlayerBrandingConfig) {\n if (applyBranding(player, videoId, creatorId, config)) return\n\n let attempts = 0\n const tryApply = () => {\n if (++attempts > 20) return\n if (!applyBranding(player, videoId, creatorId, config)) {\n requestAnimationFrame(tryApply)\n }\n }\n requestAnimationFrame(tryApply)\n}\n","const SESSION_STORAGE_KEY = \"mc-player-session\"\n\n/** Stable per-tab anonymous session id for analytics viewer tracking. */\nexport function getSessionId(): string | null {\n try {\n const existing = window.sessionStorage.getItem(SESSION_STORAGE_KEY)\n if (existing) return existing\n\n const generated = crypto.randomUUID()\n window.sessionStorage.setItem(SESSION_STORAGE_KEY, generated)\n return generated\n } catch {\n return null\n }\n}\n","export interface HSL {\n h: number\n s: number\n l: number\n}\n\nexport interface DerivedColors {\n primary: string\n secondary: string\n accent: string\n}\n\nfunction normalizeHex(hex: string): string {\n const sanitized = hex.trim().replace(/^#/, \"\")\n if (!/^[0-9a-fA-F]{3}$|^[0-9a-fA-F]{6}$/.test(sanitized)) {\n return \"#1a1a1a\"\n }\n if (sanitized.length === 3) {\n return `#${sanitized\n .split(\"\")\n .map((c) => c + c)\n .join(\"\")}`\n }\n return `#${sanitized}`\n}\n\nfunction hexToRgb(hex: string): { r: number; g: number; b: number } {\n const full = normalizeHex(hex).slice(1)\n return {\n r: parseInt(full.slice(0, 2), 16),\n g: parseInt(full.slice(2, 4), 16),\n b: parseInt(full.slice(4, 6), 16),\n }\n}\n\nexport function relativeLuminance(hex: string): number {\n const { r, g, b } = hexToRgb(hex)\n const linear = [r, g, b].map((channel) => {\n const s = channel / 255\n return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4\n })\n return 0.2126 * linear[0]! + 0.7152 * linear[1]! + 0.0722 * linear[2]!\n}\n\nexport function hexToHSL(hex: string): HSL {\n const { r, g, b } = hexToRgb(hex)\n const rNorm = r / 255\n const gNorm = g / 255\n const bNorm = b / 255\n\n const max = Math.max(rNorm, gNorm, bNorm)\n const min = Math.min(rNorm, gNorm, bNorm)\n const delta = max - min\n\n let h = 0\n if (delta !== 0) {\n if (max === rNorm) {\n h = ((gNorm - bNorm) / delta) % 6\n } else if (max === gNorm) {\n h = (bNorm - rNorm) / delta + 2\n } else {\n h = (rNorm - gNorm) / delta + 4\n }\n h = Math.round(h * 60)\n if (h < 0) h += 360\n }\n\n const l = (max + min) / 2\n const s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1))\n\n return {\n h,\n s: Math.round(s * 100),\n l: Math.round(l * 100),\n }\n}\n\nexport function hslToHex({ h, s, l }: HSL): string {\n const sNorm = s / 100\n const lNorm = l / 100\n\n const c = (1 - Math.abs(2 * lNorm - 1)) * sNorm\n const x = c * (1 - Math.abs(((h / 60) % 2) - 1))\n const m = lNorm - c / 2\n\n let r = 0\n let g = 0\n let b = 0\n\n if (h < 60) {\n ;[r, g, b] = [c, x, 0]\n } else if (h < 120) {\n ;[r, g, b] = [x, c, 0]\n } else if (h < 180) {\n ;[r, g, b] = [0, c, x]\n } else if (h < 240) {\n ;[r, g, b] = [0, x, c]\n } else if (h < 300) {\n ;[r, g, b] = [x, 0, c]\n } else {\n ;[r, g, b] = [c, 0, x]\n }\n\n const toHex = (v: number) =>\n Math.round((v + m) * 255)\n .toString(16)\n .padStart(2, \"0\")\n\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`\n}\n\nfunction clamp(value: number, min: number, max: number): number {\n return Math.min(max, Math.max(min, value))\n}\n\n/** Maps a creator brand color to player theme tokens with readable contrast. */\nexport function deriveColors(primaryHex: string): DerivedColors {\n const brand = normalizeHex(primaryHex)\n const hsl = hexToHSL(brand)\n const lum = relativeLuminance(brand)\n\n const accentL = clamp(hsl.l < 42 ? 50 : hsl.l > 78 ? 70 : hsl.l, 38, 72)\n const accent = hslToHex({\n h: hsl.h,\n s: clamp(hsl.s, 0, 100),\n l: accentL,\n })\n\n let primary: string\n if (lum >= 0.72) {\n primary = \"#1a1a1a\"\n } else if (lum >= 0.58 && hsl.s < 22) {\n primary = brand\n } else {\n primary = \"#ffffff\"\n }\n\n const secondary = lum >= 0.72 ? \"rgba(0, 0, 0, 0.1)\" : \"rgba(255, 255, 255, 0.14)\"\n\n return { primary, secondary, accent }\n}\n\nexport function deriveTheme(primaryColor: string): DerivedColors {\n return deriveColors(primaryColor)\n}\n"],"mappings":"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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAu2BN,aAAa;AAAA;AAAA;AAAA;A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","names":["useCallback","useEffect","useRef","useEffect","useRef","_a","_b","useRef","useCallback","useEffect","useRef","useState","useState","useRef","useEffect","_a","useCallback","_a","_b","jsx","MediaCreatorsPlayer","_a","_b","useRef","useEffect","useCallback"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mdcrtrs/player",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -20,13 +20,6 @@
|
|
|
20
20
|
"dist",
|
|
21
21
|
"LICENSE"
|
|
22
22
|
],
|
|
23
|
-
"scripts": {
|
|
24
|
-
"build": "tsup",
|
|
25
|
-
"typecheck": "tsc --noEmit",
|
|
26
|
-
"test": "vitest run",
|
|
27
|
-
"test:watch": "vitest",
|
|
28
|
-
"dev": "tsup --watch"
|
|
29
|
-
},
|
|
30
23
|
"dependencies": {
|
|
31
24
|
"@mux/mux-player-react": ">=3",
|
|
32
25
|
"media-chrome": "~4.18.3"
|
|
@@ -36,8 +29,7 @@
|
|
|
36
29
|
"react-dom": ">=18"
|
|
37
30
|
},
|
|
38
31
|
"devDependencies": {
|
|
39
|
-
"@mux/mux-player-react": "
|
|
40
|
-
"@one/tsconfig": "workspace:*",
|
|
32
|
+
"@mux/mux-player-react": "^3.11.8",
|
|
41
33
|
"@testing-library/react": "^16.3.0",
|
|
42
34
|
"@types/react": "19.2.2",
|
|
43
35
|
"@types/react-dom": "19.2.2",
|
|
@@ -47,6 +39,14 @@
|
|
|
47
39
|
"react-dom": "^19.2.0",
|
|
48
40
|
"tsup": "^8.5.0",
|
|
49
41
|
"typescript": "^5.9.3",
|
|
50
|
-
"vitest": "^3.2.4"
|
|
42
|
+
"vitest": "^3.2.4",
|
|
43
|
+
"@one/tsconfig": "0.0.1"
|
|
44
|
+
},
|
|
45
|
+
"scripts": {
|
|
46
|
+
"build": "tsup",
|
|
47
|
+
"typecheck": "tsc --noEmit",
|
|
48
|
+
"test": "vitest run",
|
|
49
|
+
"test:watch": "vitest",
|
|
50
|
+
"dev": "tsup --watch"
|
|
51
51
|
}
|
|
52
|
-
}
|
|
52
|
+
}
|