\n
\n );\n }\n);\n\nPlayer.displayName = 'Player'; ","import { useRef, useCallback, useState } from 'react';\nimport shaka from 'shaka-player/dist/shaka-player.ui';\nimport { isAppleDevice, isPlayReadySupported, supportsWidevinePersistentLicenses } from '../utils/devices';\nimport { Playlist } from '../api';\nimport { MuxAnalyticsConfig } from '../types';\nimport initShakaPlayerMux from '@mux/mux-data-shakaplayer';\nimport { version } from '../../package.json';\nimport {\n PersistentSessionMetadata,\n storePersistentLicense,\n retrievePersistentLicense,\n clearAllPersistentLicenses\n} from '../utils/licenseCache';\n\n/**\n * Removes the query string (and hash) from a URL, dropping signed CDN tokens\n * before the URL is reported to analytics. Returns the input unchanged if it\n * cannot be parsed.\n */\nconst stripUrlQuery = (url: string): string => {\n if (!url) return url;\n const queryIndex = url.search(/[?#]/);\n return queryIndex === -1 ? url : url.slice(0, queryIndex);\n};\n\n/**\n * Wraps a Shaka player in a Proxy that scrubs signed CDN tokens from the two\n * URL sources Mux reads — getAssetUri() (video_source_url) and each\n * response.uri (request_url/request_hostname) — WITHOUT touching the real\n * player. The signature must stay on every URL Shaka uses; stripping the real\n * response.uri made Shaka refresh the live media playlist unsigned (HTTP 500).\n * Only the Mux-facing view is scrubbed:\n * - getAssetUri() returns the de-tokenized load URL.\n * - the networking engine's registerResponseFilter wraps Mux's filter so it\n * receives a shallow clone of each response with a stripped uri, leaving the\n * real response object (and Shaka's playback) untouched.\n */\nconst createMuxScrubbingPlayer = (player: any): any =>\n new Proxy(player, {\n get(target, prop) {\n if (prop === 'getAssetUri') {\n return () => stripUrlQuery(target.getAssetUri?.() ?? '');\n }\n if (prop === 'getNetworkingEngine') {\n return () => {\n const engine = target.getNetworkingEngine();\n if (!engine) return engine;\n return new Proxy(engine, {\n get(engineTarget, engineProp) {\n if (engineProp === 'registerResponseFilter') {\n return (filter: any) =>\n engineTarget.registerResponseFilter(\n (type: any, response: any, ...rest: any[]) =>\n filter(\n type,\n { ...response, uri: stripUrlQuery(response?.uri) },\n ...rest\n )\n );\n }\n const value = engineTarget[engineProp];\n return typeof value === 'function' ? value.bind(engineTarget) : value;\n },\n });\n };\n }\n // Return `constructor` unbound: Mux validates the player via\n // `player.constructor.version`, and a bound function loses the original's\n // static `version` property — which made initShakaPlayerMux reject the\n // proxy (\"You must provide a valid shakaPlayer\") and skip all analytics.\n const value = target[prop];\n if (typeof value !== 'function' || prop === 'constructor') return value;\n return value.bind(target);\n },\n });\n\n/**\n * Manages the Shaka Player lifecycle, configuration, and low-level operations.\n * \n * RESPONSIBILITIES:\n * ----------------\n * - Create/destroy Shaka Player instances with proper lifecycle coordination\n * - Configure DRM systems (Widevine, PlayReady, FairPlay) with platform-specific settings\n * - Handle persistent license caching and stale license recovery\n * - Setup network filters for authentication headers and FairPlay base64 decoding\n * - Error handling with automatic retry logic for DRM failures\n * - Mux Analytics integration for monitoring and debugging\n * \n * IMPORTANT: Conditional Manifest Loading\n * ---------------------------------------\n * This hook skips automatic manifest loading when hasAds=true or hasSystem73=true.\n * This is critical because:\n * \n * - System73 SDK must wrap the player BEFORE manifest loads to detect all ABR profiles\n * - Google IMA ads need to intercept loading to serve pre-roll ads\n * \n * When skipped, the caller (typically usePlayerInitialization) must explicitly call\n * loadManifest() after the third-party integrations are ready.\n * \n * RELATIONSHIP TO OTHER HOOKS:\n * ---------------------------\n * This hook provides the \"HOW\" - it knows how to configure and manage Shaka Player.\n * It does NOT control \"WHEN\" - that's handled by usePlayerInitialization, which\n * orchestrates the initialization sequence across all integrations.\n * \n * EXPORTED METHODS:\n * ----------------\n * - initializePlayer(video): Creates and configures player, but may skip manifest load\n * - loadManifest(): Explicitly loads the manifest (called after System73/ads setup)\n * - destroyPlayer(): Cleans up player instance, listeners, and resources\n * \n * REFS & STATE:\n * ------------\n * - playerRef: Reference to Shaka Player instance\n * - videoElementRef: Reference to HTMLVideoElement for retry functionality\n * - isRetrying: State flag to prevent multiple simultaneous retry attempts\n * - Multiple DRM-related refs for persistent license management and cleanup\n */\n\ninterface DRMConfig {\n clearKeys?: { [keyId: string]: string };\n servers?: { [keySystem: string]: string };\n}\n\n// Maps the CDN's X-Error-Code segment response header to the translation key\n// shown on the player's blocking error screen. 940 (playback token expired,\n// e.g. after a long pause) is handled separately by reloading the page so a\n// fresh token is issued.\nconst SEGMENT_ERROR_MESSAGE_KEYS: Record\n 
\n videoRef.current?.play()}\n aria-label=\"Play\"\n >\n
\n )}\n\n {isInitialLoading && !blockedMessageKey && !hasFatalError && (\n \n
\n \n \n
\n )}\n\n {blockedMessageKey && (\n \n
\n )}\n\n {hasFatalError && !blockedMessageKey && (\n \n
\n )}\n \n * \n * \n * \n * {currentTime} / {duration}\n *
\n * );\n * }\n * ```\n */\nexport function usePlayerStore(): PlayerStore {\n const store = useContext(PlayerStoreContext);\n \n if (!store) {\n throw new Error(\n 'usePlayerStore must be used within a PlayerProvider. ' +\n 'Wrap your component tree with \n \n
\n {/* Loading... */}\n \n); ","import React from 'react';\n\ninterface ErrorScreenProps {\n title?: string;\n description?: string;\n}\n\nexport const ErrorScreen: React.FC\n
\n); ","import React from 'react';\n\ninterface TitleProps {\n title: string;\n}\n\nexport const Title: React.FC\n \n
\n \n
\n {title || \"Playback Error\"}
\n{description || \"Unable to play the video. Please try again later.\"}
\n \n
\n); ","import React from 'react';\nimport { twMerge } from 'tailwind-merge';\n\n// Title block shown under the Event and CreativeWork players and countdown\n// cards. dateTime is the event start time or creative work release time.\nexport const TitleAndDescription = ({\n title,\n description,\n dateTime,\n locale = 'en',\n className,\n}: {\n title: string;\n description: string;\n dateTime: string;\n locale?: string;\n className?: string;\n}) => {\n return (\n {title}
\n\n
\n );\n};\n","import { useState, useEffect } from 'react';\n\n// Import JSON files as modules\nimport en from './en.json';\nimport es from './es.json';\nimport ar from './ar.json';\nimport de from './de.json';\nimport fr from './fr.json';\nimport it from './it.json';\nimport pt from './pt.json';\nimport zh from './zh.json';\nimport nl from './nl.json';\nimport fa from './fa.json';\n\n// Define the available languages\nconst availableLanguages = {\n en,\n es,\n ar,\n de,\n fr,\n it,\n pt,\n zh,\n nl,\n fa\n};\n\ntype Language = keyof typeof availableLanguages;\n\n// Base translations type - this represents all possible keys that can exist\nexport type Translations = {\n \"DAYS\": string\n \"HOURS\": string\n \"MINUTES\": string\n \"SECONDS\": string\n \"STARTING_SOON\": string\n \"EVENT_NOT_STARTED\": string\n \"DEFAULT_ERROR\": string\n \"DEFAULT_ERROR_DESCRIPTION\": string\n \"API_ERROR\": string\n \"API_ERROR_DESCRIPTION\": string\n \"ERROR_CODE_NOT_AUTHENTICATED\": string\n \"ERROR_CODE_NOT_AUTHENTICATED_DESCRIPTION\": string\n \"ERROR_CODE_GEO_BLOCKED\": string\n \"ERROR_CODE_GEO_BLOCKED_DESCRIPTION\": string\n \"ERROR_CODE_NOT_ENTITLED\": string\n \"ERROR_CODE_NOT_ENTITLED_DESCRIPTION\": string\n \"ERROR_CODE_VPN_BLOCKED\": string\n \"ERROR_CODE_VPN_BLOCKED_DESCRIPTION\": string\n \"ERROR_CODE_IP_CHANGED\": string\n \"ERROR_CODE_IP_CHANGED_DESCRIPTION\": string\n \"ERROR_CODE_VPN_DETECTED\": string\n \"ERROR_CODE_VPN_DETECTED_DESCRIPTION\": string\n \"ERROR_CODE_ANONYMOUS_PROXY\": string\n \"ERROR_CODE_ANONYMOUS_PROXY_DESCRIPTION\": string\n \"CONCURRENCY_KICKED\": string\n \"CONCURRENCY_KICKED_DESCRIPTION\": string\n \"CONCURRENCY_CONNECTION_FAILED\": string\n \"CONCURRENCY_CONNECTION_FAILED_DESCRIPTION\": string\n}\n\n// Partial translations type for individual language files (allows missing keys)\ntype PartialTranslations = Partial{title}
\n {dateTime ? (\n \n {new Date(dateTime || \"\").toLocaleDateString(locale || \"default\", {\n month: \"long\",\n year: \"numeric\",\n day: \"numeric\",\n })}{\" \"}\n - {new Date(dateTime || \"\").toLocaleTimeString(locale || \"default\", {\n hour: \"2-digit\",\n minute: \"2-digit\",\n })}\n
\n ) : null}\n {description && (\n {description}
\n )}\n \n
\n );\n }\n\n // Handle empty playlists\n if (!isLoading && video && !activePlaylistHasUrl && events?.onEmptyPlaylists) {\n events.onEmptyPlaylists();\n }\n\n // Error state\n if (error || video?.error) {\n const errorKey = video?.error ? getErrorType(undefined, video) : 'API_ERROR';\n const errorObj = error || new Error(video?.error || 'Unknown error');\n \n if (events?.onError) {\n events.onError(errorObj);\n }\n\n // Use localized error messages\n const title = t(errorKey as keyof Translations) || t('DEFAULT_ERROR');\n const description = t(`${errorKey}_DESCRIPTION` as keyof Translations) || t('DEFAULT_ERROR_DESCRIPTION');\n\n return (\n \n
\n \n
\n );\n }\n\n // No playable source or missing playlist\n if (!activePlaylist || !activePlaylistHasUrl) {\n return (\n \n
\n \n
\n );\n }\n\n // Render video player with source\n return (\n \n
\n \n
\n );\n}; ","import { createClient } from '@connectrpc/connect';\nimport { timestampDate } from '@bufbuild/protobuf/wkt';\nimport { EventService } from '@buf/motto_cda.bufbuild_es/motto/cda/cms/event/v1/service_pb';\nimport { cdaTransport, authHeaders } from './transport';\n\nexport interface EventData {\n id: string;\n title: string;\n description?: string;\n startTime: string;\n endTime?: string;\n posterUrl?: string;\n videoIds?: string[];\n error?: string;\n}\n\n\n\nexport enum EventsSortDirection {\n ASC = 'asc',\n DESC = 'desc'\n}\n\nconst eventClient = createClient(EventService, cdaTransport);\n\nexport async function fetchEventData(\n publicKey: string,\n eventId: string,\n unused?: any,\n filter?: string,\n order?: EventsSortDirection,\n locale?: string\n): Promise\n \n {children}\n \n
\n \n
\n );\n }\n\n if (hasPreEventCard && eventData) {\n return (\n \n
\n \n
\n );\n }\n \n // Handle empty playlists\n if (!loadingPlaylist && eventData && !activePlaylist && events?.onEmptyPlaylists) {\n events.onEmptyPlaylists();\n }\n\n // Loading state\n if (loadingPlaylist) {\n return (\n \n
\n \n
\n );\n }\n\n // ============================================================================\n // Concurrency Control Check (SECURITY)\n // ============================================================================\n /**\n * If concurrency control is required but playback is not allowed,\n * show an error screen. This prevents bypassing concurrency limits\n * by blocking the WebSocket connection.\n */\n if (activeConcurrencySession && !isPlaybackAllowed) {\n // Determine the appropriate error message\n const isConnecting = concurrencyConnectionState === ConcurrencyConnectionState.CONNECTING;\n\n // If still connecting, show loading instead of error\n if (isConnecting) {\n return (\n \n
\n \n
\n );\n }\n\n // User was kicked or connection failed - show error\n // Map kickedReason to appropriate translation keys\n const isConnectionFailure = kickedReason === 'connection_failed';\n const errorTitle = isConnectionFailure\n ? t(\"CONCURRENCY_CONNECTION_FAILED\" as keyof Translations) || \"Connection Error\"\n : t(\"CONCURRENCY_KICKED\" as keyof Translations) || \"Playback Stopped\";\n\n const errorDescription = isConnectionFailure\n ? t(\"CONCURRENCY_CONNECTION_FAILED_DESCRIPTION\" as keyof Translations) || \"Unable to establish a connection. Please try again.\"\n : t(\"CONCURRENCY_KICKED_DESCRIPTION\" as keyof Translations) || \"Your session was ended. This may happen if you started watching on another device.\";\n\n return (\n \n
\n \n
\n );\n }\n\n // Active video player\n if (activePlaylist && activeVideoId && videosData) {\n const activeVideo = videosData.find((video) => video.id === activeVideoId);\n return (\n \n
\n \n
\n );\n }\n\n // Pre-event countdown\n if (eventData) {\n return (\n \n
\n {!hideTitle && eventData && (\n \n
\n );\n }\n\n return null;\n};\n\n// Pre-event countdown component\nfunction PreEvent({ \n event, \n locale = 'en', \n hideTitle, \n backgroundImageUrl, \n showAnimation = true \n}: { \n event: EventData; \n locale?: string; \n hideTitle?: boolean; \n backgroundImageUrl?: string; \n showAnimation?: boolean;\n}): JSX.Element {\n const date = new Date(event.startTime);\n const now = new Date();\n const [remainingTime, setRemainingTime] = useState(\n date.getTime() - now.getTime()\n );\n const shouldBeStarted = remainingTime < 0;\n const { t } = useMessages(locale);\n useEffect(() => {\n const interval = setInterval(() => {\n if (remainingTime < 0) {\n clearInterval(interval);\n } else {\n setRemainingTime(date.getTime() - new Date().getTime());\n }\n }, 1000);\n\n return () => clearInterval(interval);\n }, [date, remainingTime]);\n\n const renderCountdown = useCallback(() => {\n if (shouldBeStarted) {\n return {t(\"EVENT_NOT_STARTED\")};\n }\n\n const seconds = Math.floor(remainingTime / 1000) % 60;\n const minutes = Math.floor(remainingTime / 1000 / 60) % 60;\n const hours = Math.floor(remainingTime / 1000 / 60 / 60) % 24;\n const days = Math.floor(remainingTime / 1000 / 60 / 60 / 24);\n\n return (\n \n
\n \n
\n );\n }, [remainingTime, shouldBeStarted, t]);\n\n return (\n <>\n {event?.posterUrl ? (\n <>\n \n {/* daisyUI's `countdown` only supports 2 digits, so days (which can be\n 3+) is plain text. Mimic countdown's box model (inline-flex,\n line-height:1em, child height:1em) so it aligns with the others. */}\n \n \n {days.toString()}\n \n \n {t(\"DAYS\")}\n
\n \n \n \n {hours?.toString()?.padStart(2, '0')}\n \n \n {t(\"HOURS\")}\n
\n \n \n \n {minutes?.toString()?.padStart(2, '0')}\n \n \n {t(\"MINUTES\")}\n
\n \n \n \n {seconds?.toString()?.padStart(2, '0')}\n \n \n {t(\"SECONDS\")}\n
\n \n {renderCountdown()}\n
\n \n {!hideTitle && (\n \n {renderCountdown()}\n
\n \n {!hideTitle && (\n \n
\n );\n }\n\n if (hasPreEventCard && creativeWorkData) {\n return (\n \n
\n \n
\n );\n }\n\n // Loading state\n if (isCreativeWorkLoading || videosIsLoading || loadingApisState) {\n return (\n \n
\n \n
\n );\n }\n\n // ============================================================================\n // Concurrency Control Check (SECURITY)\n // ============================================================================\n /**\n * If concurrency control is required but playback is not allowed,\n * show an error screen. This prevents bypassing concurrency limits\n * by blocking the WebSocket connection.\n */\n if (activeConcurrencySession && !isPlaybackAllowed) {\n // Determine the appropriate error message\n const isConnecting = concurrencyConnectionState === ConcurrencyConnectionState.CONNECTING;\n\n // If still connecting, show loading instead of error\n if (isConnecting) {\n return (\n \n
\n \n
\n );\n }\n\n // User was kicked or connection failed - show error\n // Map kickedReason to appropriate translation keys\n const isConnectionFailure = kickedReason === 'connection_failed';\n const errorTitle = isConnectionFailure\n ? t(\"CONCURRENCY_CONNECTION_FAILED\" as keyof Translations) || \"Connection Error\"\n : t(\"CONCURRENCY_KICKED\" as keyof Translations) || \"Playback Stopped\";\n\n const errorDescription = isConnectionFailure\n ? t(\"CONCURRENCY_CONNECTION_FAILED_DESCRIPTION\" as keyof Translations) || \"Unable to establish a connection. Please try again.\"\n : t(\"CONCURRENCY_KICKED_DESCRIPTION\" as keyof Translations) || \"Your session was ended. This may happen if you started watching on another device.\";\n\n return (\n \n
\n \n
\n );\n }\n\n // Show player if we have an active playlist\n if (activeVideoId && activePlaylist && !loadingPlaylist) {\n const activeVideo = videosData?.find((video) => video.id === activeVideoId);\n \n return (\n \n
\n \n
\n );\n }\n\n // Loading state for playlist\n if (loadingPlaylist) {\n return (\n \n
\n \n
\n );\n }\n\n // Empty state\n return null;\n};\n\nfunction PreCreativeWork({ \n creativeWork, \n locale = 'en', \n hideTitle, \n backgroundImageUrl, \n showAnimation = true \n}: { \n creativeWork: CreativeWorkData; \n locale?: string; \n hideTitle?: boolean; \n backgroundImageUrl?: string; \n showAnimation?: boolean;\n}): JSX.Element {\n const date = new Date(creativeWork.releaseTime);\n const now = new Date();\n const [remainingTime, setRemainingTime] = useState(\n date.getTime() - now.getTime()\n );\n const shouldBeStarted = remainingTime < 0;\n const { t } = useMessages(locale);\n\n useEffect(() => {\n const interval = setInterval(() => {\n if (remainingTime < 0) {\n clearInterval(interval);\n } else {\n setRemainingTime(date.getTime() - new Date().getTime());\n }\n }, 1000);\n\n return () => { clearInterval(interval); };\n }, [date, remainingTime]);\n\n const renderCountdown = () => {\n if (shouldBeStarted) {\n return {t(\"EVENT_NOT_STARTED\")};\n }\n\n const seconds = Math.floor(remainingTime / 1000) % 60;\n const minutes = Math.floor(remainingTime / 1000 / 60) % 60;\n const hours = Math.floor(remainingTime / 1000 / 60 / 60) % 24;\n const days = Math.floor(remainingTime / 1000 / 60 / 60 / 24);\n\n return (\n \n
\n \n
\n );\n };\n\n return (\n <>\n \n {/* daisyUI's `countdown` only supports 2 digits, so days (which can be\n 3+) is plain text. Mimic countdown's box model (inline-flex,\n line-height:1em, child height:1em) so it aligns with the others. */}\n \n \n {days.toString()}\n \n \n {t(\"DAYS\")}\n
\n \n \n \n {hours?.toString()?.padStart(2, '0')}\n \n \n {t(\"HOURS\")}\n
\n \n \n \n {minutes?.toString()?.padStart(2, '0')}\n \n \n {t(\"MINUTES\")}\n
\n \n \n \n {seconds?.toString()?.padStart(2, '0')}\n \n \n {t(\"SECONDS\")}\n
\n \n {renderCountdown()}\n
\n \n {!hideTitle && (\n