@mottosports/motto-video-player 1.0.1-rc.16 → 1.0.1-rc.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.d.mts +38 -1
  2. package/dist/index.d.ts +38 -1
  3. package/dist/index.js +2742 -565
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +2550 -377
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -31,11 +31,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
31
31
  // src/index.ts
32
32
  var index_exports = {};
33
33
  __export(index_exports, {
34
+ BigPlayIcon: () => BigPlayIcon,
34
35
  CreativeWork: () => CreativeWork,
35
36
  Event: () => Event,
36
37
  Player: () => Player,
37
38
  QueryProvider: () => QueryProvider,
39
+ SkipBackIcon: () => SkipBackIcon,
40
+ SkipForwardIcon: () => SkipForwardIcon,
38
41
  Video: () => Video,
42
+ polyfillCryptoRandomUUID: () => polyfillCryptoRandomUUID,
39
43
  queryClient: () => queryClient
40
44
  });
41
45
  module.exports = __toCommonJS(index_exports);
@@ -64,10 +68,1075 @@ function styleInject(css, { insertAt } = {}) {
64
68
  }
65
69
 
66
70
  // src/index.css
67
- styleInject('/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root,\n :host {\n --font-sans:\n ui-sans-serif,\n system-ui,\n sans-serif,\n "Apple Color Emoji",\n "Segoe UI Emoji",\n "Segoe UI Symbol",\n "Noto Color Emoji";\n --font-mono:\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n Consolas,\n "Liberation Mono",\n "Courier New",\n monospace;\n --color-red-600: oklch(57.7% 0.245 27.325);\n --color-black: #000;\n --color-white: #fff;\n --spacing: 0.25rem;\n --text-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-base: 1rem;\n --text-base--line-height: calc(1.5 / 1);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-xl: 1.25rem;\n --text-xl--line-height: calc(1.75 / 1.25);\n --text-2xl: 1.5rem;\n --text-2xl--line-height: calc(2 / 1.5);\n --text-5xl: 3rem;\n --text-5xl--line-height: 1;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --tracking-wide: 0.025em;\n --tracking-widest: 0.1em;\n --radius-md: 0.375rem;\n --radius-2xl: 1rem;\n --animate-spin: spin 1s linear infinite;\n --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n --aspect-video: 16 / 9;\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n }\n}\n@layer base {\n *,\n ::after,\n ::before,\n ::backdrop,\n ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html,\n :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b,\n strong {\n font-weight: bolder;\n }\n code,\n kbd,\n samp,\n pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub,\n sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol,\n ul,\n menu {\n list-style: none;\n }\n img,\n svg,\n video,\n canvas,\n audio,\n iframe,\n embed,\n object {\n display: block;\n vertical-align: middle;\n }\n img,\n video {\n max-width: 100%;\n height: auto;\n }\n button,\n input,\n select,\n optgroup,\n textarea,\n ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit,\n ::-webkit-datetime-edit-year-field,\n ::-webkit-datetime-edit-month-field,\n ::-webkit-datetime-edit-day-field,\n ::-webkit-datetime-edit-hour-field,\n ::-webkit-datetime-edit-minute-field,\n ::-webkit-datetime-edit-second-field,\n ::-webkit-datetime-edit-millisecond-field,\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button,\n input:where([type=button], [type=reset], [type=submit]),\n ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button,\n ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=until-found])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-auto {\n pointer-events: auto;\n }\n .pointer-events-none {\n pointer-events: none;\n }\n .visible {\n visibility: visible;\n }\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .static {\n position: static;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .top-4 {\n top: calc(var(--spacing) * 4);\n }\n .right-0 {\n right: calc(var(--spacing) * 0);\n }\n .right-4 {\n right: calc(var(--spacing) * 4);\n }\n .bottom-0 {\n bottom: calc(var(--spacing) * 0);\n }\n .bottom-4 {\n bottom: calc(var(--spacing) * 4);\n }\n .left-0 {\n left: calc(var(--spacing) * 0);\n }\n .left-4 {\n left: calc(var(--spacing) * 4);\n }\n .z-10 {\n z-index: 10;\n }\n .z-50 {\n z-index: 50;\n }\n .container {\n width: 100%;\n @media (width >= 40rem) {\n max-width: 40rem;\n }\n @media (width >= 48rem) {\n max-width: 48rem;\n }\n @media (width >= 64rem) {\n max-width: 64rem;\n }\n @media (width >= 80rem) {\n max-width: 80rem;\n }\n @media (width >= 96rem) {\n max-width: 96rem;\n }\n }\n .m-6 {\n margin: calc(var(--spacing) * 6);\n }\n .mt-1 {\n margin-top: calc(var(--spacing) * 1);\n }\n .mt-3 {\n margin-top: calc(var(--spacing) * 3);\n }\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n .mb-6 {\n margin-bottom: calc(var(--spacing) * 6);\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .hidden {\n display: none;\n }\n .aspect-video {\n aspect-ratio: var(--aspect-video);\n }\n .h-2 {\n height: calc(var(--spacing) * 2);\n }\n .h-12 {\n height: calc(var(--spacing) * 12);\n }\n .h-24 {\n height: calc(var(--spacing) * 24);\n }\n .h-full {\n height: 100%;\n }\n .w-2 {\n width: calc(var(--spacing) * 2);\n }\n .w-12 {\n width: calc(var(--spacing) * 12);\n }\n .w-24 {\n width: calc(var(--spacing) * 24);\n }\n .w-full {\n width: 100%;\n }\n .animate-pulse {\n animation: var(--animate-pulse);\n }\n .animate-spin {\n animation: var(--animate-spin);\n }\n .auto-cols-max {\n grid-auto-columns: max-content;\n }\n .grid-flow-col {\n grid-auto-flow: column;\n }\n .flex-col {\n flex-direction: column;\n }\n .items-center {\n align-items: center;\n }\n .justify-center {\n justify-content: center;\n }\n .justify-stretch {\n justify-content: stretch;\n }\n .gap-1 {\n gap: calc(var(--spacing) * 1);\n }\n .gap-5 {\n gap: calc(var(--spacing) * 5);\n }\n .overflow-hidden {\n overflow: hidden;\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-md {\n border-radius: var(--radius-md);\n }\n .bg-\\[\\#151515\\] {\n background-color: #151515;\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-red-600 {\n background-color: var(--color-red-600);\n }\n .bg-white {\n background-color: var(--color-white);\n }\n .bg-gradient-to-t {\n --tw-gradient-position: to top in oklab;\n background-image: linear-gradient(var(--tw-gradient-stops));\n }\n .from-black\\/70 {\n --tw-gradient-from: color-mix(in srgb, #000 70%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-gradient-from: color-mix(in oklab, var(--color-black) 70%, transparent);\n }\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n .to-transparent {\n --tw-gradient-to: transparent;\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n .bg-cover {\n background-size: cover;\n }\n .bg-center {\n background-position: center;\n }\n .bg-no-repeat {\n background-repeat: no-repeat;\n }\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n .py-1 {\n padding-block: calc(var(--spacing) * 1);\n }\n .text-center {\n text-align: center;\n }\n .text-left {\n text-align: left;\n }\n .font-mono {\n font-family: var(--font-mono);\n }\n .text-2xl {\n font-size: var(--text-2xl);\n line-height: var(--tw-leading, var(--text-2xl--line-height));\n }\n .text-5xl {\n font-size: var(--text-5xl);\n line-height: var(--tw-leading, var(--text-5xl--line-height));\n }\n .text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n .text-\\[10px\\] {\n font-size: 10px;\n }\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .tracking-wide {\n --tw-tracking: var(--tracking-wide);\n letter-spacing: var(--tracking-wide);\n }\n .tracking-widest {\n --tw-tracking: var(--tracking-widest);\n letter-spacing: var(--tracking-widest);\n }\n .text-white {\n color: var(--color-white);\n }\n .uppercase {\n text-transform: uppercase;\n }\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .filter {\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .md\\:rounded-2xl {\n @media (width >= 48rem) {\n border-radius: var(--radius-2xl);\n }\n }\n .md\\:rounded-2xl\\! {\n @media (width >= 48rem) {\n border-radius: var(--radius-2xl) !important;\n }\n }\n .md\\:text-base {\n @media (width >= 48rem) {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n }\n .md\\:text-sm {\n @media (width >= 48rem) {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n }\n .md\\:text-xl {\n @media (width >= 48rem) {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n }\n}\n@layer components {\n .motto-video-container {\n position: relative;\n width: 100%;\n min-height: 300px;\n }\n @supports (aspect-ratio: 16/9) {\n .motto-video-container {\n min-height: auto;\n }\n }\n .motto-video-responsive {\n position: absolute;\n top: calc(var(--spacing) * 0);\n left: calc(var(--spacing) * 0);\n height: 100%;\n width: 100%;\n }\n .motto-skip-button {\n position: absolute;\n top: calc(1/2 * 100%);\n z-index: 10;\n display: flex;\n height: calc(var(--spacing) * 16);\n width: calc(var(--spacing) * 16);\n --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border-radius: calc(infinity * 1px);\n border-style: var(--tw-border-style);\n border-width: 0px;\n background-color: color-mix(in srgb, #000 70%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 70%, transparent);\n }\n font-size: var(--text-2xl);\n line-height: var(--tw-leading, var(--text-2xl--line-height));\n color: var(--color-white);\n opacity: 80%;\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n --tw-duration: 200ms;\n transition-duration: 200ms;\n &:hover {\n @media (hover: hover) {\n --tw-scale-x: 110%;\n --tw-scale-y: 110%;\n --tw-scale-z: 110%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n }\n &:hover {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n &:active {\n --tw-scale-x: 95%;\n --tw-scale-y: 95%;\n --tw-scale-z: 95%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n }\n .motto-skip-button-back {\n left: calc(var(--spacing) * 5);\n }\n .motto-skip-button-forward {\n right: calc(var(--spacing) * 5);\n }\n .motto-mobile-controls-overlay {\n position: absolute;\n inset: calc(var(--spacing) * 0);\n z-index: 20;\n display: flex;\n align-items: center;\n justify-content: center;\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n --tw-duration: 300ms;\n transition-duration: 300ms;\n pointer-events: none;\n }\n .motto-mobile-controls-group {\n display: flex;\n align-items: center;\n gap: calc(var(--spacing) * 8);\n opacity: 100%;\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n --tw-duration: 200ms;\n transition-duration: 200ms;\n pointer-events: none;\n }\n .motto-mobile-play-button {\n display: flex;\n height: calc(var(--spacing) * 14);\n width: calc(var(--spacing) * 14);\n cursor: pointer;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: calc(infinity * 1px);\n border-style: var(--tw-border-style);\n border-width: 0px;\n background-color: color-mix(in srgb, #000 30%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 30%, transparent);\n }\n color: var(--color-white);\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n --tw-duration: 200ms;\n transition-duration: 200ms;\n pointer-events: auto;\n }\n .motto-mobile-play-button:active {\n --tw-scale-x: 95%;\n --tw-scale-y: 95%;\n --tw-scale-z: 95%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .motto-mobile-play-button svg {\n height: calc(var(--spacing) * 7);\n width: calc(var(--spacing) * 7);\n }\n .motto-mobile-skip-button {\n display: flex;\n height: calc(var(--spacing) * 10);\n width: calc(var(--spacing) * 10);\n cursor: pointer;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: calc(infinity * 1px);\n border-style: var(--tw-border-style);\n border-width: 0px;\n background-color: color-mix(in srgb, #000 30%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 30%, transparent);\n }\n color: var(--color-white);\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n --tw-duration: 200ms;\n transition-duration: 200ms;\n pointer-events: auto;\n }\n .motto-mobile-skip-button:active {\n --tw-scale-x: 95%;\n --tw-scale-y: 95%;\n --tw-scale-z: 95%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .motto-mobile-skip-button svg {\n height: calc(var(--spacing) * 6);\n width: calc(var(--spacing) * 6);\n }\n}\n@media (min-width: 768px) {\n .motto-mobile-controls-overlay {\n display: none !important;\n }\n}\n@media (max-width: 767px) {\n .shaka-controls-container .motto-native-skip-button,\n .shaka-controls-container .motto-skip-back-button,\n .shaka-controls-container .motto-skip-forward-button,\n .shaka-controls-container .shaka-button[title*="Skip back"],\n .shaka-controls-container .shaka-button[title*="Skip forward"],\n .shaka-controls-container .shaka-button[aria-label*="Skip back"],\n .shaka-controls-container .shaka-button[aria-label*="Skip forward"],\n .shaka-controls-container button[title*="Skip back"],\n .shaka-controls-container button[title*="Skip forward"],\n .shaka-controls-container button[aria-label*="Skip back"],\n .shaka-controls-container button[aria-label*="Skip forward"],\n .motto-native-skip-button:not(.motto-mobile-skip-button),\n .motto-skip-back-button:not(.motto-mobile-skip-button),\n .motto-skip-forward-button:not(.motto-mobile-skip-button),\n .shaka-button[title*="Skip back"]:not(.motto-mobile-skip-button),\n .shaka-button[title*="Skip forward"]:not(.motto-mobile-skip-button),\n .shaka-button[aria-label*="Skip back"]:not(.motto-mobile-skip-button),\n .shaka-button[aria-label*="Skip forward"]:not(.motto-mobile-skip-button),\n button[title*="Skip back"]:not(.motto-mobile-skip-button),\n button[title*="Skip forward"]:not(.motto-mobile-skip-button),\n button[aria-label*="Skip back"]:not(.motto-mobile-skip-button),\n button[aria-label*="Skip forward"]:not(.motto-mobile-skip-button) {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n width: 0 !important;\n height: 0 !important;\n padding: 0 !important;\n margin: 0 !important;\n }\n .motto-mobile-skip-button {\n display: flex !important;\n visibility: visible !important;\n opacity: 1 !important;\n }\n}\n.shaka-seek-bar-container {\n height: 6px !important;\n width: 100% !important;\n margin: 8px 0 !important;\n border-radius: 4px !important;\n position: relative !important;\n border-top: none !important;\n border-bottom: none !important;\n box-shadow: none !important;\n}\n.shaka-seek-bar {\n height: 6px !important;\n width: 100% !important;\n -webkit-appearance: none !important;\n appearance: none !important;\n background: transparent !important;\n cursor: pointer !important;\n border: none !important;\n outline: none !important;\n position: absolute !important;\n top: 0 !important;\n left: 0 !important;\n border-radius: 4px !important;\n}\n.shaka-seek-bar::-webkit-slider-runnable-track {\n height: 6px !important;\n background: transparent !important;\n border-radius: 4px !important;\n border: none !important;\n}\n.shaka-seek-bar::-moz-range-track {\n height: 6px !important;\n background: transparent !important;\n border-radius: 4px !important;\n border: none !important;\n}\n.shaka-seek-bar::-webkit-slider-thumb {\n -webkit-appearance: none !important;\n appearance: none !important;\n width: 16px !important;\n height: 16px !important;\n border-radius: 50% !important;\n background: #ffffff !important;\n cursor: pointer !important;\n border: 2px solid #ffffff !important;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;\n margin-top: -4px !important;\n}\n.shaka-seek-bar::-moz-range-thumb {\n width: 16px !important;\n height: 16px !important;\n border-radius: 50% !important;\n background: #ffffff !important;\n cursor: pointer !important;\n border: 2px solid #ffffff !important;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;\n margin-top: -4px !important;\n}\n.motto-skip-back-button,\n.motto-skip-forward-button,\n.motto-native-skip-button {\n background: transparent !important;\n border: none !important;\n padding: 4px !important;\n margin: 0px !important;\n cursor: pointer !important;\n color: #ffffff !important;\n transition: all 0.2s ease !important;\n min-width: 32px !important;\n height: 32px !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n border-radius: 4px !important;\n width: 25px;\n}\n.motto-skip-back-button:hover,\n.motto-skip-forward-button:hover,\n.motto-native-skip-button:hover {\n opacity: 0.8 !important;\n background: transparent !important;\n transform: scale(1.05) !important;\n}\n.motto-skip-back-button:active,\n.motto-skip-forward-button:active,\n.motto-native-skip-button:active {\n transform: scale(0.95) !important;\n}\n.motto-skip-back-button svg,\n.motto-skip-forward-button svg,\n.motto-native-skip-button svg {\n width: 24px !important;\n height: 24px !important;\n}\n@media (max-width: 767px) {\n .shaka-controls-container .motto-native-skip-button,\n .shaka-controls-container .motto-skip-back-button,\n .shaka-controls-container .motto-skip-forward-button,\n .shaka-controls-container .shaka-play-button,\n .shaka-controls-container .shaka-pause-button {\n display: none !important;\n }\n}\n.shaka-spinner-svg {\n color: white !important;\n fill: white !important;\n}\n.shaka-spinner-path {\n stroke: white !important;\n fill: none !important;\n}\n.shaka-spinner-container {\n color: white !important;\n}\n.shaka-buffering-spinner {\n color: white !important;\n fill: white !important;\n}\n.shaka-buffering-spinner svg {\n color: white !important;\n fill: white !important;\n}\n.shaka-buffering-spinner path {\n stroke: white !important;\n fill: none !important;\n}\n[data-shaka-player-container] .shaka-spinner,\n[data-shaka-player-container] .spinner {\n color: white !important;\n border-color: white !important;\n}\n.material-icons.shaka-spinner {\n color: white !important;\n}\n.shaka-controls-container .shaka-spinner,\n.shaka-video-container .shaka-spinner {\n color: white !important;\n fill: white !important;\n}\n.shaka-controls-container .shaka-spinner svg,\n.shaka-video-container .shaka-spinner svg {\n color: white !important;\n fill: white !important;\n}\n.shaka-controls-container .shaka-spinner path,\n.shaka-video-container .shaka-spinner path {\n stroke: white !important;\n}\n.motto-video-loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background:\n linear-gradient(\n 135deg,\n #1a1a1a 0%,\n #2d2d2d 100%);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 10;\n transition: opacity 0.3s ease;\n}\n.motto-video-loading-overlay.hidden {\n opacity: 0;\n pointer-events: none;\n}\n.motto-video-loading-content {\n text-align: center;\n color: white;\n}\n.motto-video-loading-icon {\n width: 64px;\n height: 64px;\n margin-bottom: 16px;\n opacity: 0.7;\n}\n.motto-video-loading-text {\n font-size: 16px;\n font-weight: 500;\n margin-bottom: 8px;\n}\n.motto-video-loading-subtext {\n font-size: 14px;\n opacity: 0.7;\n}\n@keyframes pulse-live {\n 0% {\n opacity: 1;\n transform: scale(1);\n }\n 50% {\n opacity: 0.7;\n transform: scale(1.1);\n }\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n.shaka-play-button-container {\n display: none !important;\n}\n@media (max-width: 767px) {\n .shaka-controls-container {\n z-index: 90 !important;\n height: 100px !important;\n bottom: 0 !important;\n top: unset !important;\n }\n}\n@property --tw-gradient-position { syntax: "*"; inherits: false; }\n@property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-via { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-to { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-stops { syntax: "*"; inherits: false; }\n@property --tw-gradient-via-stops { syntax: "*"; inherits: false; }\n@property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }\n@property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }\n@property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-font-weight { syntax: "*"; inherits: false; }\n@property --tw-tracking { syntax: "*"; inherits: false; }\n@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-ring-color { syntax: "*"; inherits: false; }\n@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-ring-color { syntax: "*"; inherits: false; }\n@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-ring-inset { syntax: "*"; inherits: false; }\n@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }\n@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }\n@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-blur { syntax: "*"; inherits: false; }\n@property --tw-brightness { syntax: "*"; inherits: false; }\n@property --tw-contrast { syntax: "*"; inherits: false; }\n@property --tw-grayscale { syntax: "*"; inherits: false; }\n@property --tw-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-invert { syntax: "*"; inherits: false; }\n@property --tw-opacity { syntax: "*"; inherits: false; }\n@property --tw-saturate { syntax: "*"; inherits: false; }\n@property --tw-sepia { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }\n@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }\n@property --tw-duration { syntax: "*"; inherits: false; }\n@property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *,\n ::before,\n ::after,\n ::backdrop {\n --tw-gradient-position: initial;\n --tw-gradient-from: #0000;\n --tw-gradient-via: #0000;\n --tw-gradient-to: #0000;\n --tw-gradient-stops: initial;\n --tw-gradient-via-stops: initial;\n --tw-gradient-from-position: 0%;\n --tw-gradient-via-position: 50%;\n --tw-gradient-to-position: 100%;\n --tw-font-weight: initial;\n --tw-tracking: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-border-style: solid;\n --tw-duration: initial;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n }\n }\n}\n');
71
+ styleInject(`/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
72
+ @layer properties;
73
+ @layer theme, base, components, utilities;
74
+ @layer theme {
75
+ :root,
76
+ :host {
77
+ --font-sans:
78
+ ui-sans-serif,
79
+ system-ui,
80
+ sans-serif,
81
+ "Apple Color Emoji",
82
+ "Segoe UI Emoji",
83
+ "Segoe UI Symbol",
84
+ "Noto Color Emoji";
85
+ --font-mono:
86
+ ui-monospace,
87
+ SFMono-Regular,
88
+ Menlo,
89
+ Monaco,
90
+ Consolas,
91
+ "Liberation Mono",
92
+ "Courier New",
93
+ monospace;
94
+ --color-red-600: oklch(57.7% 0.245 27.325);
95
+ --color-black: #000;
96
+ --color-white: #fff;
97
+ --spacing: 0.25rem;
98
+ --text-xs: 0.75rem;
99
+ --text-xs--line-height: calc(1 / 0.75);
100
+ --text-sm: 0.875rem;
101
+ --text-sm--line-height: calc(1.25 / 0.875);
102
+ --text-base: 1rem;
103
+ --text-base--line-height: calc(1.5 / 1);
104
+ --text-lg: 1.125rem;
105
+ --text-lg--line-height: calc(1.75 / 1.125);
106
+ --text-xl: 1.25rem;
107
+ --text-xl--line-height: calc(1.75 / 1.25);
108
+ --text-2xl: 1.5rem;
109
+ --text-2xl--line-height: calc(2 / 1.5);
110
+ --text-5xl: 3rem;
111
+ --text-5xl--line-height: 1;
112
+ --font-weight-medium: 500;
113
+ --font-weight-semibold: 600;
114
+ --font-weight-bold: 700;
115
+ --tracking-wide: 0.025em;
116
+ --tracking-widest: 0.1em;
117
+ --radius-md: 0.375rem;
118
+ --radius-2xl: 1rem;
119
+ --animate-spin: spin 1s linear infinite;
120
+ --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
121
+ --aspect-video: 16 / 9;
122
+ --default-transition-duration: 150ms;
123
+ --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
124
+ --default-font-family: var(--font-sans);
125
+ --default-mono-font-family: var(--font-mono);
126
+ }
127
+ }
128
+ @layer base {
129
+ *,
130
+ ::after,
131
+ ::before,
132
+ ::backdrop,
133
+ ::file-selector-button {
134
+ box-sizing: border-box;
135
+ margin: 0;
136
+ padding: 0;
137
+ border: 0 solid;
138
+ }
139
+ html,
140
+ :host {
141
+ line-height: 1.5;
142
+ -webkit-text-size-adjust: 100%;
143
+ tab-size: 4;
144
+ font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
145
+ font-feature-settings: var(--default-font-feature-settings, normal);
146
+ font-variation-settings: var(--default-font-variation-settings, normal);
147
+ -webkit-tap-highlight-color: transparent;
148
+ }
149
+ hr {
150
+ height: 0;
151
+ color: inherit;
152
+ border-top-width: 1px;
153
+ }
154
+ abbr:where([title]) {
155
+ -webkit-text-decoration: underline dotted;
156
+ text-decoration: underline dotted;
157
+ }
158
+ h1,
159
+ h2,
160
+ h3,
161
+ h4,
162
+ h5,
163
+ h6 {
164
+ font-size: inherit;
165
+ font-weight: inherit;
166
+ }
167
+ a {
168
+ color: inherit;
169
+ -webkit-text-decoration: inherit;
170
+ text-decoration: inherit;
171
+ }
172
+ b,
173
+ strong {
174
+ font-weight: bolder;
175
+ }
176
+ code,
177
+ kbd,
178
+ samp,
179
+ pre {
180
+ font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
181
+ font-feature-settings: var(--default-mono-font-feature-settings, normal);
182
+ font-variation-settings: var(--default-mono-font-variation-settings, normal);
183
+ font-size: 1em;
184
+ }
185
+ small {
186
+ font-size: 80%;
187
+ }
188
+ sub,
189
+ sup {
190
+ font-size: 75%;
191
+ line-height: 0;
192
+ position: relative;
193
+ vertical-align: baseline;
194
+ }
195
+ sub {
196
+ bottom: -0.25em;
197
+ }
198
+ sup {
199
+ top: -0.5em;
200
+ }
201
+ table {
202
+ text-indent: 0;
203
+ border-color: inherit;
204
+ border-collapse: collapse;
205
+ }
206
+ :-moz-focusring {
207
+ outline: auto;
208
+ }
209
+ progress {
210
+ vertical-align: baseline;
211
+ }
212
+ summary {
213
+ display: list-item;
214
+ }
215
+ ol,
216
+ ul,
217
+ menu {
218
+ list-style: none;
219
+ }
220
+ img,
221
+ svg,
222
+ video,
223
+ canvas,
224
+ audio,
225
+ iframe,
226
+ embed,
227
+ object {
228
+ display: block;
229
+ vertical-align: middle;
230
+ }
231
+ img,
232
+ video {
233
+ max-width: 100%;
234
+ height: auto;
235
+ }
236
+ button,
237
+ input,
238
+ select,
239
+ optgroup,
240
+ textarea,
241
+ ::file-selector-button {
242
+ font: inherit;
243
+ font-feature-settings: inherit;
244
+ font-variation-settings: inherit;
245
+ letter-spacing: inherit;
246
+ color: inherit;
247
+ border-radius: 0;
248
+ background-color: transparent;
249
+ opacity: 1;
250
+ }
251
+ :where(select:is([multiple], [size])) optgroup {
252
+ font-weight: bolder;
253
+ }
254
+ :where(select:is([multiple], [size])) optgroup option {
255
+ padding-inline-start: 20px;
256
+ }
257
+ ::file-selector-button {
258
+ margin-inline-end: 4px;
259
+ }
260
+ ::placeholder {
261
+ opacity: 1;
262
+ }
263
+ @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
264
+ ::placeholder {
265
+ color: currentcolor;
266
+ @supports (color: color-mix(in lab, red, red)) {
267
+ color: color-mix(in oklab, currentcolor 50%, transparent);
268
+ }
269
+ }
270
+ }
271
+ textarea {
272
+ resize: vertical;
273
+ }
274
+ ::-webkit-search-decoration {
275
+ -webkit-appearance: none;
276
+ }
277
+ ::-webkit-date-and-time-value {
278
+ min-height: 1lh;
279
+ text-align: inherit;
280
+ }
281
+ ::-webkit-datetime-edit {
282
+ display: inline-flex;
283
+ }
284
+ ::-webkit-datetime-edit-fields-wrapper {
285
+ padding: 0;
286
+ }
287
+ ::-webkit-datetime-edit,
288
+ ::-webkit-datetime-edit-year-field,
289
+ ::-webkit-datetime-edit-month-field,
290
+ ::-webkit-datetime-edit-day-field,
291
+ ::-webkit-datetime-edit-hour-field,
292
+ ::-webkit-datetime-edit-minute-field,
293
+ ::-webkit-datetime-edit-second-field,
294
+ ::-webkit-datetime-edit-millisecond-field,
295
+ ::-webkit-datetime-edit-meridiem-field {
296
+ padding-block: 0;
297
+ }
298
+ :-moz-ui-invalid {
299
+ box-shadow: none;
300
+ }
301
+ button,
302
+ input:where([type=button], [type=reset], [type=submit]),
303
+ ::file-selector-button {
304
+ appearance: button;
305
+ }
306
+ ::-webkit-inner-spin-button,
307
+ ::-webkit-outer-spin-button {
308
+ height: auto;
309
+ }
310
+ [hidden]:where(:not([hidden=until-found])) {
311
+ display: none !important;
312
+ }
313
+ }
314
+ @layer utilities {
315
+ .pointer-events-auto {
316
+ pointer-events: auto;
317
+ }
318
+ .pointer-events-none {
319
+ pointer-events: none;
320
+ }
321
+ .visible {
322
+ visibility: visible;
323
+ }
324
+ .sr-only {
325
+ position: absolute;
326
+ width: 1px;
327
+ height: 1px;
328
+ padding: 0;
329
+ margin: -1px;
330
+ overflow: hidden;
331
+ clip: rect(0, 0, 0, 0);
332
+ white-space: nowrap;
333
+ border-width: 0;
334
+ }
335
+ .absolute {
336
+ position: absolute;
337
+ }
338
+ .fixed {
339
+ position: fixed;
340
+ }
341
+ .relative {
342
+ position: relative;
343
+ }
344
+ .static {
345
+ position: static;
346
+ }
347
+ .inset-0 {
348
+ inset: calc(var(--spacing) * 0);
349
+ }
350
+ .top-0 {
351
+ top: calc(var(--spacing) * 0);
352
+ }
353
+ .top-4 {
354
+ top: calc(var(--spacing) * 4);
355
+ }
356
+ .right-0 {
357
+ right: calc(var(--spacing) * 0);
358
+ }
359
+ .right-4 {
360
+ right: calc(var(--spacing) * 4);
361
+ }
362
+ .bottom-0 {
363
+ bottom: calc(var(--spacing) * 0);
364
+ }
365
+ .bottom-4 {
366
+ bottom: calc(var(--spacing) * 4);
367
+ }
368
+ .left-0 {
369
+ left: calc(var(--spacing) * 0);
370
+ }
371
+ .left-4 {
372
+ left: calc(var(--spacing) * 4);
373
+ }
374
+ .z-10 {
375
+ z-index: 10;
376
+ }
377
+ .z-50 {
378
+ z-index: 50;
379
+ }
380
+ .container {
381
+ width: 100%;
382
+ @media (width >= 40rem) {
383
+ max-width: 40rem;
384
+ }
385
+ @media (width >= 48rem) {
386
+ max-width: 48rem;
387
+ }
388
+ @media (width >= 64rem) {
389
+ max-width: 64rem;
390
+ }
391
+ @media (width >= 80rem) {
392
+ max-width: 80rem;
393
+ }
394
+ @media (width >= 96rem) {
395
+ max-width: 96rem;
396
+ }
397
+ }
398
+ .m-6 {
399
+ margin: calc(var(--spacing) * 6);
400
+ }
401
+ .mt-1 {
402
+ margin-top: calc(var(--spacing) * 1);
403
+ }
404
+ .mt-3 {
405
+ margin-top: calc(var(--spacing) * 3);
406
+ }
407
+ .mb-2 {
408
+ margin-bottom: calc(var(--spacing) * 2);
409
+ }
410
+ .mb-6 {
411
+ margin-bottom: calc(var(--spacing) * 6);
412
+ }
413
+ .flex {
414
+ display: flex;
415
+ }
416
+ .grid {
417
+ display: grid;
418
+ }
419
+ .aspect-video {
420
+ aspect-ratio: var(--aspect-video);
421
+ }
422
+ .h-2 {
423
+ height: calc(var(--spacing) * 2);
424
+ }
425
+ .h-12 {
426
+ height: calc(var(--spacing) * 12);
427
+ }
428
+ .h-24 {
429
+ height: calc(var(--spacing) * 24);
430
+ }
431
+ .h-full {
432
+ height: 100%;
433
+ }
434
+ .w-2 {
435
+ width: calc(var(--spacing) * 2);
436
+ }
437
+ .w-12 {
438
+ width: calc(var(--spacing) * 12);
439
+ }
440
+ .w-24 {
441
+ width: calc(var(--spacing) * 24);
442
+ }
443
+ .w-full {
444
+ width: 100%;
445
+ }
446
+ .animate-pulse {
447
+ animation: var(--animate-pulse);
448
+ }
449
+ .animate-spin {
450
+ animation: var(--animate-spin);
451
+ }
452
+ .auto-cols-max {
453
+ grid-auto-columns: max-content;
454
+ }
455
+ .grid-flow-col {
456
+ grid-auto-flow: column;
457
+ }
458
+ .flex-col {
459
+ flex-direction: column;
460
+ }
461
+ .items-center {
462
+ align-items: center;
463
+ }
464
+ .justify-center {
465
+ justify-content: center;
466
+ }
467
+ .justify-stretch {
468
+ justify-content: stretch;
469
+ }
470
+ .gap-1 {
471
+ gap: calc(var(--spacing) * 1);
472
+ }
473
+ .gap-5 {
474
+ gap: calc(var(--spacing) * 5);
475
+ }
476
+ .overflow-hidden {
477
+ overflow: hidden;
478
+ }
479
+ .rounded-full {
480
+ border-radius: calc(infinity * 1px);
481
+ }
482
+ .rounded-md {
483
+ border-radius: var(--radius-md);
484
+ }
485
+ .bg-\\[\\#151515\\] {
486
+ background-color: #151515;
487
+ }
488
+ .bg-black {
489
+ background-color: var(--color-black);
490
+ }
491
+ .bg-red-600 {
492
+ background-color: var(--color-red-600);
493
+ }
494
+ .bg-white {
495
+ background-color: var(--color-white);
496
+ }
497
+ .bg-gradient-to-t {
498
+ --tw-gradient-position: to top in oklab;
499
+ background-image: linear-gradient(var(--tw-gradient-stops));
500
+ }
501
+ .from-black\\/70 {
502
+ --tw-gradient-from: color-mix(in srgb, #000 70%, transparent);
503
+ @supports (color: color-mix(in lab, red, red)) {
504
+ --tw-gradient-from: color-mix(in oklab, var(--color-black) 70%, transparent);
505
+ }
506
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
507
+ }
508
+ .to-transparent {
509
+ --tw-gradient-to: transparent;
510
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
511
+ }
512
+ .bg-cover {
513
+ background-size: cover;
514
+ }
515
+ .bg-center {
516
+ background-position: center;
517
+ }
518
+ .bg-no-repeat {
519
+ background-repeat: no-repeat;
520
+ }
521
+ .p-2 {
522
+ padding: calc(var(--spacing) * 2);
523
+ }
524
+ .p-4 {
525
+ padding: calc(var(--spacing) * 4);
526
+ }
527
+ .px-2 {
528
+ padding-inline: calc(var(--spacing) * 2);
529
+ }
530
+ .px-4 {
531
+ padding-inline: calc(var(--spacing) * 4);
532
+ }
533
+ .py-1 {
534
+ padding-block: calc(var(--spacing) * 1);
535
+ }
536
+ .text-center {
537
+ text-align: center;
538
+ }
539
+ .text-left {
540
+ text-align: left;
541
+ }
542
+ .font-mono {
543
+ font-family: var(--font-mono);
544
+ }
545
+ .text-2xl {
546
+ font-size: var(--text-2xl);
547
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
548
+ }
549
+ .text-5xl {
550
+ font-size: var(--text-5xl);
551
+ line-height: var(--tw-leading, var(--text-5xl--line-height));
552
+ }
553
+ .text-base {
554
+ font-size: var(--text-base);
555
+ line-height: var(--tw-leading, var(--text-base--line-height));
556
+ }
557
+ .text-lg {
558
+ font-size: var(--text-lg);
559
+ line-height: var(--tw-leading, var(--text-lg--line-height));
560
+ }
561
+ .text-sm {
562
+ font-size: var(--text-sm);
563
+ line-height: var(--tw-leading, var(--text-sm--line-height));
564
+ }
565
+ .text-xl {
566
+ font-size: var(--text-xl);
567
+ line-height: var(--tw-leading, var(--text-xl--line-height));
568
+ }
569
+ .text-xs {
570
+ font-size: var(--text-xs);
571
+ line-height: var(--tw-leading, var(--text-xs--line-height));
572
+ }
573
+ .text-\\[10px\\] {
574
+ font-size: 10px;
575
+ }
576
+ .font-bold {
577
+ --tw-font-weight: var(--font-weight-bold);
578
+ font-weight: var(--font-weight-bold);
579
+ }
580
+ .font-medium {
581
+ --tw-font-weight: var(--font-weight-medium);
582
+ font-weight: var(--font-weight-medium);
583
+ }
584
+ .font-semibold {
585
+ --tw-font-weight: var(--font-weight-semibold);
586
+ font-weight: var(--font-weight-semibold);
587
+ }
588
+ .tracking-wide {
589
+ --tw-tracking: var(--tracking-wide);
590
+ letter-spacing: var(--tracking-wide);
591
+ }
592
+ .tracking-widest {
593
+ --tw-tracking: var(--tracking-widest);
594
+ letter-spacing: var(--tracking-widest);
595
+ }
596
+ .text-white {
597
+ color: var(--color-white);
598
+ }
599
+ .uppercase {
600
+ text-transform: uppercase;
601
+ }
602
+ .shadow-lg {
603
+ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
604
+ box-shadow:
605
+ var(--tw-inset-shadow),
606
+ var(--tw-inset-ring-shadow),
607
+ var(--tw-ring-offset-shadow),
608
+ var(--tw-ring-shadow),
609
+ var(--tw-shadow);
610
+ }
611
+ .filter {
612
+ filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
613
+ }
614
+ .md\\:rounded-2xl {
615
+ @media (width >= 48rem) {
616
+ border-radius: var(--radius-2xl);
617
+ }
618
+ }
619
+ .md\\:rounded-2xl\\! {
620
+ @media (width >= 48rem) {
621
+ border-radius: var(--radius-2xl) !important;
622
+ }
623
+ }
624
+ .md\\:text-base {
625
+ @media (width >= 48rem) {
626
+ font-size: var(--text-base);
627
+ line-height: var(--tw-leading, var(--text-base--line-height));
628
+ }
629
+ }
630
+ .md\\:text-sm {
631
+ @media (width >= 48rem) {
632
+ font-size: var(--text-sm);
633
+ line-height: var(--tw-leading, var(--text-sm--line-height));
634
+ }
635
+ }
636
+ .md\\:text-xl {
637
+ @media (width >= 48rem) {
638
+ font-size: var(--text-xl);
639
+ line-height: var(--tw-leading, var(--text-xl--line-height));
640
+ }
641
+ }
642
+ }
643
+ @layer components {
644
+ video::-webkit-media-controls {
645
+ display: none !important;
646
+ }
647
+ video::-webkit-media-controls-panel {
648
+ display: none !important;
649
+ }
650
+ video::-webkit-media-controls-play-button {
651
+ display: none !important;
652
+ }
653
+ video::-webkit-media-controls-timeline {
654
+ display: none !important;
655
+ }
656
+ video::-webkit-media-controls-current-time-display {
657
+ display: none !important;
658
+ }
659
+ video::-webkit-media-controls-time-remaining-display {
660
+ display: none !important;
661
+ }
662
+ video::-webkit-media-controls-mute-button {
663
+ display: none !important;
664
+ }
665
+ video::-webkit-media-controls-volume-slider {
666
+ display: none !important;
667
+ }
668
+ video::-webkit-media-controls-fullscreen-button {
669
+ display: none !important;
670
+ }
671
+ video::-webkit-media-controls-overlay-play-button {
672
+ display: none !important;
673
+ }
674
+ video::-moz-media-controls {
675
+ display: none !important;
676
+ }
677
+ video {
678
+ outline: none !important;
679
+ }
680
+ video[controls] {
681
+ -webkit-appearance: none !important;
682
+ appearance: none !important;
683
+ }
684
+ video::-webkit-media-controls-enclosure {
685
+ display: none !important;
686
+ }
687
+ video::-webkit-media-controls-start-playback-button {
688
+ display: none !important;
689
+ }
690
+ video[controls]::-webkit-media-controls,
691
+ video[controls]::-webkit-media-controls-panel,
692
+ video[controls]::-webkit-media-controls-play-button,
693
+ video[controls]::-webkit-media-controls-timeline,
694
+ video[controls]::-webkit-media-controls-current-time-display,
695
+ video[controls]::-webkit-media-controls-time-remaining-display,
696
+ video[controls]::-webkit-media-controls-mute-button,
697
+ video[controls]::-webkit-media-controls-volume-slider,
698
+ video[controls]::-webkit-media-controls-fullscreen-button,
699
+ video[controls]::-webkit-media-controls-overlay-play-button,
700
+ video[controls]::-webkit-media-controls-enclosure,
701
+ video[controls]::-webkit-media-controls-start-playback-button {
702
+ display: none !important;
703
+ visibility: hidden !important;
704
+ opacity: 0 !important;
705
+ pointer-events: none !important;
706
+ }
707
+ video[controls]::-moz-media-controls {
708
+ display: none !important;
709
+ visibility: hidden !important;
710
+ opacity: 0 !important;
711
+ }
712
+ .motto-video-container {
713
+ position: relative;
714
+ width: 100%;
715
+ min-height: 300px;
716
+ }
717
+ @supports (aspect-ratio: 16/9) {
718
+ .motto-video-container {
719
+ min-height: auto;
720
+ }
721
+ }
722
+ .motto-video-responsive {
723
+ position: absolute;
724
+ top: calc(var(--spacing) * 0);
725
+ left: calc(var(--spacing) * 0);
726
+ height: 100%;
727
+ width: 100%;
728
+ }
729
+ .motto-skip-button {
730
+ position: absolute;
731
+ top: calc(1/2 * 100%);
732
+ z-index: 10;
733
+ display: flex;
734
+ height: calc(var(--spacing) * 16);
735
+ width: calc(var(--spacing) * 16);
736
+ --tw-translate-y: calc(calc(1/2 * 100%) * -1);
737
+ translate: var(--tw-translate-x) var(--tw-translate-y);
738
+ cursor: pointer;
739
+ align-items: center;
740
+ justify-content: center;
741
+ border-radius: calc(infinity * 1px);
742
+ border-style: var(--tw-border-style);
743
+ border-width: 0px;
744
+ background-color: color-mix(in srgb, #000 70%, transparent);
745
+ @supports (color: color-mix(in lab, red, red)) {
746
+ background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
747
+ }
748
+ font-size: var(--text-2xl);
749
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
750
+ color: var(--color-white);
751
+ opacity: 80%;
752
+ transition-property: all;
753
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
754
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
755
+ --tw-duration: 200ms;
756
+ transition-duration: 200ms;
757
+ &:hover {
758
+ @media (hover: hover) {
759
+ --tw-scale-x: 110%;
760
+ --tw-scale-y: 110%;
761
+ --tw-scale-z: 110%;
762
+ scale: var(--tw-scale-x) var(--tw-scale-y);
763
+ }
764
+ }
765
+ &:hover {
766
+ @media (hover: hover) {
767
+ opacity: 100%;
768
+ }
769
+ }
770
+ &:active {
771
+ --tw-scale-x: 95%;
772
+ --tw-scale-y: 95%;
773
+ --tw-scale-z: 95%;
774
+ scale: var(--tw-scale-x) var(--tw-scale-y);
775
+ }
776
+ }
777
+ .motto-skip-button-back {
778
+ left: calc(var(--spacing) * 5);
779
+ }
780
+ .motto-skip-button-forward {
781
+ right: calc(var(--spacing) * 5);
782
+ }
783
+ }
784
+ .shaka-seek-bar-container {
785
+ height: 6px !important;
786
+ width: 100% !important;
787
+ margin: 8px 0 !important;
788
+ border-radius: 4px !important;
789
+ position: relative !important;
790
+ border-top: none !important;
791
+ border-bottom: none !important;
792
+ box-shadow: none !important;
793
+ }
794
+ .shaka-seek-bar {
795
+ height: 6px !important;
796
+ width: 100% !important;
797
+ -webkit-appearance: none !important;
798
+ appearance: none !important;
799
+ background: transparent !important;
800
+ cursor: pointer !important;
801
+ border: none !important;
802
+ outline: none !important;
803
+ position: absolute !important;
804
+ top: 0 !important;
805
+ left: 0 !important;
806
+ border-radius: 4px !important;
807
+ }
808
+ .shaka-seek-bar::-webkit-slider-runnable-track {
809
+ height: 6px !important;
810
+ background: transparent !important;
811
+ border-radius: 4px !important;
812
+ border: none !important;
813
+ }
814
+ .shaka-seek-bar::-moz-range-track {
815
+ height: 6px !important;
816
+ background: transparent !important;
817
+ border-radius: 4px !important;
818
+ border: none !important;
819
+ }
820
+ .shaka-seek-bar::-webkit-slider-thumb {
821
+ -webkit-appearance: none !important;
822
+ appearance: none !important;
823
+ width: 16px !important;
824
+ height: 16px !important;
825
+ border-radius: 50% !important;
826
+ background: #ffffff !important;
827
+ cursor: pointer !important;
828
+ border: 2px solid #ffffff !important;
829
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
830
+ margin-top: -4px !important;
831
+ }
832
+ .shaka-seek-bar::-moz-range-thumb {
833
+ width: 16px !important;
834
+ height: 16px !important;
835
+ border-radius: 50% !important;
836
+ background: #ffffff !important;
837
+ cursor: pointer !important;
838
+ border: 2px solid #ffffff !important;
839
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
840
+ margin-top: -4px !important;
841
+ }
842
+ .motto-skip-back-button,
843
+ .motto-skip-forward-button,
844
+ .motto-native-skip-button {
845
+ background: transparent !important;
846
+ border: none !important;
847
+ padding: 4px !important;
848
+ margin: 0px !important;
849
+ cursor: pointer !important;
850
+ color: #ffffff !important;
851
+ transition: all 0.2s ease !important;
852
+ min-width: 32px !important;
853
+ height: 32px !important;
854
+ display: flex !important;
855
+ align-items: center !important;
856
+ justify-content: center !important;
857
+ border-radius: 4px !important;
858
+ width: 25px;
859
+ }
860
+ .motto-skip-back-button:hover,
861
+ .motto-skip-forward-button:hover,
862
+ .motto-native-skip-button:hover {
863
+ opacity: 0.8 !important;
864
+ background: transparent !important;
865
+ transform: scale(1.05) !important;
866
+ }
867
+ .motto-skip-back-button:active,
868
+ .motto-skip-forward-button:active,
869
+ .motto-native-skip-button:active {
870
+ transform: scale(0.95) !important;
871
+ }
872
+ .motto-skip-back-button svg,
873
+ .motto-skip-forward-button svg,
874
+ .motto-native-skip-button svg {
875
+ width: 24px !important;
876
+ height: 24px !important;
877
+ }
878
+ .shaka-spinner-svg {
879
+ color: white !important;
880
+ fill: white !important;
881
+ }
882
+ .shaka-spinner-path {
883
+ stroke: white !important;
884
+ fill: none !important;
885
+ }
886
+ .shaka-spinner-container {
887
+ color: white !important;
888
+ }
889
+ .shaka-buffering-spinner {
890
+ color: white !important;
891
+ fill: white !important;
892
+ }
893
+ .shaka-buffering-spinner svg {
894
+ color: white !important;
895
+ fill: white !important;
896
+ }
897
+ .shaka-buffering-spinner path {
898
+ stroke: white !important;
899
+ fill: none !important;
900
+ }
901
+ [data-shaka-player-container] .shaka-spinner,
902
+ [data-shaka-player-container] .spinner {
903
+ color: white !important;
904
+ border-color: white !important;
905
+ }
906
+ .material-icons.shaka-spinner {
907
+ color: white !important;
908
+ }
909
+ .shaka-controls-container .shaka-spinner,
910
+ .shaka-video-container .shaka-spinner {
911
+ color: white !important;
912
+ fill: white !important;
913
+ }
914
+ .shaka-controls-container .shaka-spinner svg,
915
+ .shaka-video-container .shaka-spinner svg {
916
+ color: white !important;
917
+ fill: white !important;
918
+ }
919
+ .shaka-controls-container .shaka-spinner path,
920
+ .shaka-video-container .shaka-spinner path {
921
+ stroke: white !important;
922
+ }
923
+ .motto-video-loading-overlay {
924
+ position: absolute;
925
+ top: 0;
926
+ left: 0;
927
+ width: 100%;
928
+ height: 100%;
929
+ background:
930
+ linear-gradient(
931
+ 135deg,
932
+ #1a1a1a 0%,
933
+ #2d2d2d 100%);
934
+ display: flex;
935
+ flex-direction: column;
936
+ align-items: center;
937
+ justify-content: center;
938
+ z-index: 10;
939
+ transition: opacity 0.3s ease;
940
+ }
941
+ .motto-video-loading-overlay.hidden {
942
+ opacity: 0;
943
+ pointer-events: none;
944
+ }
945
+ .motto-video-loading-content {
946
+ text-align: center;
947
+ color: white;
948
+ }
949
+ .motto-video-loading-icon {
950
+ width: 64px;
951
+ height: 64px;
952
+ margin-bottom: 16px;
953
+ opacity: 0.7;
954
+ }
955
+ .motto-video-loading-text {
956
+ font-size: 16px;
957
+ font-weight: 500;
958
+ margin-bottom: 8px;
959
+ }
960
+ .motto-video-loading-subtext {
961
+ font-size: 14px;
962
+ opacity: 0.7;
963
+ }
964
+ @keyframes pulse-live {
965
+ 0% {
966
+ opacity: 1;
967
+ transform: scale(1);
968
+ }
969
+ 50% {
970
+ opacity: 0.7;
971
+ transform: scale(1.1);
972
+ }
973
+ 100% {
974
+ opacity: 1;
975
+ transform: scale(1);
976
+ }
977
+ }
978
+ .shaka-play-button {
979
+ background: rgba(255, 255, 255, 0.1) !important;
980
+ border: none !important;
981
+ color: white !important;
982
+ padding: 10px !important;
983
+ border-radius: 100% !important;
984
+ transition: all 0.2s ease !important;
985
+ display: flex !important;
986
+ align-items: center !important;
987
+ justify-content: center !important;
988
+ min-width: 55px !important;
989
+ height: 55px !important;
990
+ }
991
+ .shaka-play-button-container {
992
+ background: transparent;
993
+ transition: all 0.2s ease !important;
994
+ }
995
+ .motto-video-container:not(.no-cursor) .shaka-play-button-container {
996
+ background: rgba(0, 0, 0, 0.3);
997
+ transition: all 0.s ease !important;
998
+ }
999
+ .shaka-play-button:hover {
1000
+ background: rgba(255, 255, 255, 0.2) !important;
1001
+ transform: scale(1.05) !important;
1002
+ }
1003
+ .shaka-play-button:active {
1004
+ transform: scale(0.95) !important;
1005
+ }
1006
+ .shaka-play-button > * {
1007
+ display: none !important;
1008
+ }
1009
+ .shaka-play-button::after {
1010
+ content: "" !important;
1011
+ width: 35px !important;
1012
+ height: 35px !important;
1013
+ background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path fill-rule="evenodd" d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z" clip-rule="evenodd" /></svg>') !important;
1014
+ background-repeat: no-repeat !important;
1015
+ background-size: contain !important;
1016
+ background-position: center !important;
1017
+ display: block !important;
1018
+ }
1019
+ .shaka-play-button[aria-label*=Play]::after {
1020
+ background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path fill-rule="evenodd" d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z" clip-rule="evenodd" /></svg>') !important;
1021
+ }
1022
+ .shaka-play-button[aria-label*=Pause]::after {
1023
+ background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path fill-rule="evenodd" d="M6.75 5.25a.75.75 0 0 1 .75-.75H9a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H7.5a.75.75 0 0 1-.75-.75V5.25Zm7.5 0A.75.75 0 0 1 15 4.5h1.5a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H15a.75.75 0 0 1-.75-.75V5.25Z" clip-rule="evenodd" /></svg>') !important;
1024
+ }
1025
+ @property --tw-gradient-position { syntax: "*"; inherits: false; }
1026
+ @property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; }
1027
+ @property --tw-gradient-via { syntax: "<color>"; inherits: false; initial-value: #0000; }
1028
+ @property --tw-gradient-to { syntax: "<color>"; inherits: false; initial-value: #0000; }
1029
+ @property --tw-gradient-stops { syntax: "*"; inherits: false; }
1030
+ @property --tw-gradient-via-stops { syntax: "*"; inherits: false; }
1031
+ @property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }
1032
+ @property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }
1033
+ @property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }
1034
+ @property --tw-font-weight { syntax: "*"; inherits: false; }
1035
+ @property --tw-tracking { syntax: "*"; inherits: false; }
1036
+ @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
1037
+ @property --tw-shadow-color { syntax: "*"; inherits: false; }
1038
+ @property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
1039
+ @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
1040
+ @property --tw-inset-shadow-color { syntax: "*"; inherits: false; }
1041
+ @property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
1042
+ @property --tw-ring-color { syntax: "*"; inherits: false; }
1043
+ @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
1044
+ @property --tw-inset-ring-color { syntax: "*"; inherits: false; }
1045
+ @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
1046
+ @property --tw-ring-inset { syntax: "*"; inherits: false; }
1047
+ @property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }
1048
+ @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
1049
+ @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
1050
+ @property --tw-blur { syntax: "*"; inherits: false; }
1051
+ @property --tw-brightness { syntax: "*"; inherits: false; }
1052
+ @property --tw-contrast { syntax: "*"; inherits: false; }
1053
+ @property --tw-grayscale { syntax: "*"; inherits: false; }
1054
+ @property --tw-hue-rotate { syntax: "*"; inherits: false; }
1055
+ @property --tw-invert { syntax: "*"; inherits: false; }
1056
+ @property --tw-opacity { syntax: "*"; inherits: false; }
1057
+ @property --tw-saturate { syntax: "*"; inherits: false; }
1058
+ @property --tw-sepia { syntax: "*"; inherits: false; }
1059
+ @property --tw-drop-shadow { syntax: "*"; inherits: false; }
1060
+ @property --tw-drop-shadow-color { syntax: "*"; inherits: false; }
1061
+ @property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
1062
+ @property --tw-drop-shadow-size { syntax: "*"; inherits: false; }
1063
+ @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
1064
+ @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
1065
+ @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
1066
+ @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
1067
+ @property --tw-duration { syntax: "*"; inherits: false; }
1068
+ @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; }
1069
+ @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; }
1070
+ @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }
1071
+ @keyframes spin {
1072
+ to {
1073
+ transform: rotate(360deg);
1074
+ }
1075
+ }
1076
+ @keyframes pulse {
1077
+ 50% {
1078
+ opacity: 0.5;
1079
+ }
1080
+ }
1081
+ @layer properties {
1082
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
1083
+ *,
1084
+ ::before,
1085
+ ::after,
1086
+ ::backdrop {
1087
+ --tw-gradient-position: initial;
1088
+ --tw-gradient-from: #0000;
1089
+ --tw-gradient-via: #0000;
1090
+ --tw-gradient-to: #0000;
1091
+ --tw-gradient-stops: initial;
1092
+ --tw-gradient-via-stops: initial;
1093
+ --tw-gradient-from-position: 0%;
1094
+ --tw-gradient-via-position: 50%;
1095
+ --tw-gradient-to-position: 100%;
1096
+ --tw-font-weight: initial;
1097
+ --tw-tracking: initial;
1098
+ --tw-shadow: 0 0 #0000;
1099
+ --tw-shadow-color: initial;
1100
+ --tw-shadow-alpha: 100%;
1101
+ --tw-inset-shadow: 0 0 #0000;
1102
+ --tw-inset-shadow-color: initial;
1103
+ --tw-inset-shadow-alpha: 100%;
1104
+ --tw-ring-color: initial;
1105
+ --tw-ring-shadow: 0 0 #0000;
1106
+ --tw-inset-ring-color: initial;
1107
+ --tw-inset-ring-shadow: 0 0 #0000;
1108
+ --tw-ring-inset: initial;
1109
+ --tw-ring-offset-width: 0px;
1110
+ --tw-ring-offset-color: #fff;
1111
+ --tw-ring-offset-shadow: 0 0 #0000;
1112
+ --tw-blur: initial;
1113
+ --tw-brightness: initial;
1114
+ --tw-contrast: initial;
1115
+ --tw-grayscale: initial;
1116
+ --tw-hue-rotate: initial;
1117
+ --tw-invert: initial;
1118
+ --tw-opacity: initial;
1119
+ --tw-saturate: initial;
1120
+ --tw-sepia: initial;
1121
+ --tw-drop-shadow: initial;
1122
+ --tw-drop-shadow-color: initial;
1123
+ --tw-drop-shadow-alpha: 100%;
1124
+ --tw-drop-shadow-size: initial;
1125
+ --tw-translate-x: 0;
1126
+ --tw-translate-y: 0;
1127
+ --tw-translate-z: 0;
1128
+ --tw-border-style: solid;
1129
+ --tw-duration: initial;
1130
+ --tw-scale-x: 1;
1131
+ --tw-scale-y: 1;
1132
+ --tw-scale-z: 1;
1133
+ }
1134
+ }
1135
+ }
1136
+ `);
68
1137
 
69
1138
  // src/Player.tsx
70
- var import_react11 = require("react");
1139
+ var import_react12 = require("react");
71
1140
  var import_shaka_player4 = __toESM(require("shaka-player/dist/shaka-player.ui"));
72
1141
 
73
1142
  // src/hooks/useShakePlayer.ts
@@ -146,7 +1215,7 @@ var useQualityControl = (playerRef, qualityConfig, onQualityChange) => {
146
1215
  if (!playerRef.current) return [];
147
1216
  const tracks = playerRef.current.getVariantTracks();
148
1217
  const qualities = tracks.filter(
149
- (track, index, self) => index === self.findIndex((t) => t.height === track.height)
1218
+ (track, index, self2) => index === self2.findIndex((t) => t.height === track.height)
150
1219
  ).map((track) => ({
151
1220
  height: track.height || 0,
152
1221
  bandwidth: track.bandwidth || 0,
@@ -321,324 +1390,250 @@ var useMuxAnalytics = (playerRef, muxConfig, onMuxReady, onMuxDataUpdate) => {
321
1390
  };
322
1391
 
323
1392
  // src/hooks/useShakaUI.ts
324
- var import_react5 = require("react");
1393
+ var import_react6 = require("react");
325
1394
  var import_shaka_player3 = require("shaka-player/dist/shaka-player.ui");
326
- var SkipBackButton = class {
327
- constructor(parent, controls, onSkipBack) {
328
- this.parent = parent;
329
- this.controls = controls;
330
- this.eventManager = { listen: (element, event, handler) => {
331
- element.addEventListener(event, handler);
332
- } };
333
- this.button_ = document.createElement("button");
334
- this.button_.className = "shaka-button motto-native-skip-button";
335
- this.button_.innerHTML = `
336
- <svg width="24px" stroke-width="2" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
337
- <path d="M3 13C3 17.9706 7.02944 22 12 22C16.9706 22 21 17.9706 21 13C21 8.02944 16.9706 4 12 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
338
- <path d="M9 9L9 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
339
- <path d="M15 9L13 9C12.4477 9 12 9.44772 12 10L12 11.5C12 12.0523 12.4477 12.5 13 12.5L14 12.5C14.5523 12.5 15 12.9477 15 13.5L15 15C15 15.5523 14.5523 16 14 16L12 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
340
- <path d="M12 4L4.5 4M4.5 4L6.5 2M4.5 4L6.5 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
341
- </svg>
342
- `;
343
- this.button_.title = "Skip back 15 seconds";
344
- this.button_.setAttribute("aria-label", "Skip back 15 seconds");
345
- this.parent.appendChild(this.button_);
346
- this.eventManager.listen(this.button_, "click", () => {
347
- const video = this.controls.getVideo();
348
- if (video) {
349
- const newTime = Math.max(0, video.currentTime - 15);
350
- video.currentTime = newTime;
351
- onSkipBack?.(newTime);
352
- }
353
- });
354
- }
355
- // Shaka UI will call `release` when the controls are destroyed.
356
- // Provide a no-op implementation to avoid TypeErrors.
357
- release() {
358
- }
359
- };
360
- var SkipForwardButton = class {
361
- constructor(parent, controls, onSkipForward) {
362
- this.parent = parent;
363
- this.controls = controls;
364
- this.eventManager = { listen: (element, event, handler) => {
365
- element.addEventListener(event, handler);
366
- } };
367
- this.button_ = document.createElement("button");
368
- this.button_.className = "shaka-button motto-native-skip-button";
369
- this.button_.innerHTML = `
370
- <svg fill="none" height="24" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
371
- <path d="M21 13C21 17.9706 16.9706 22 12 22C7.02944 22 3 17.9706 3 13C3 8.02944 7.02944 4 12 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
372
- <path d="M12 4H19.5M19.5 4L17.5 2M19.5 4L17.5 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
373
- <path d="M9 9L9 16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
374
- <path d="M15 9L13 9C12.4477 9 12 9.44772 12 10L12 11.5C12 12.0523 12.4477 12.5 13 12.5L14 12.5C14.5523 12.5 15 12.9477 15 13.5L15 15C15 15.5523 14.5523 16 14 16L12 16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
375
- </svg>
376
- `;
377
- this.button_.title = "Skip forward 15 seconds";
378
- this.button_.setAttribute("aria-label", "Skip forward 15 seconds");
379
- this.parent.appendChild(this.button_);
380
- this.eventManager.listen(this.button_, "click", () => {
381
- const video = this.controls.getVideo();
382
- if (video) {
383
- const newTime = Math.min(video.duration || 0, video.currentTime + 15);
384
- video.currentTime = newTime;
385
- onSkipForward?.(newTime);
386
- }
387
- });
388
- }
389
- release() {
390
- }
391
- };
392
- var SkipBackButtonFactory = class {
393
- constructor(onSkipBack) {
394
- this.onSkipBack = onSkipBack;
395
- }
396
- create(rootElement, controls) {
397
- return new SkipBackButton(rootElement, controls, this.onSkipBack);
398
- }
399
- };
400
- var SkipForwardButtonFactory = class {
401
- constructor(onSkipForward) {
402
- this.onSkipForward = onSkipForward;
403
- }
404
- create(rootElement, controls) {
405
- return new SkipForwardButton(rootElement, controls, this.onSkipForward);
406
- }
1395
+
1396
+ // src/icons/SkipBackIcon.tsx
1397
+ var import_jsx_runtime = require("react/jsx-runtime");
1398
+ var SkipBackIcon = ({ size = 24, className = "" }) => {
1399
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1400
+ "svg",
1401
+ {
1402
+ width: size,
1403
+ height: size,
1404
+ strokeWidth: "2",
1405
+ viewBox: "0 0 24 24",
1406
+ fill: "none",
1407
+ xmlns: "http://www.w3.org/2000/svg",
1408
+ className,
1409
+ children: [
1410
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1411
+ "path",
1412
+ {
1413
+ d: "M3 13C3 17.9706 7.02944 22 12 22C16.9706 22 21 17.9706 21 13C21 8.02944 16.9706 4 12 4",
1414
+ stroke: "currentColor",
1415
+ strokeWidth: "2",
1416
+ strokeLinecap: "round",
1417
+ strokeLinejoin: "round"
1418
+ }
1419
+ ),
1420
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1421
+ "path",
1422
+ {
1423
+ d: "M9 9L9 16",
1424
+ stroke: "currentColor",
1425
+ strokeWidth: "2",
1426
+ strokeLinecap: "round",
1427
+ strokeLinejoin: "round"
1428
+ }
1429
+ ),
1430
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1431
+ "path",
1432
+ {
1433
+ d: "M15 9L13 9C12.4477 9 12 9.44772 12 10L12 11.5C12 12.0523 12.4477 12.5 13 12.5L14 12.5C14.5523 12.5 15 12.9477 15 13.5L15 15C15 15.5523 14.5523 16 14 16L12 16",
1434
+ stroke: "currentColor",
1435
+ strokeWidth: "2",
1436
+ strokeLinecap: "round",
1437
+ strokeLinejoin: "round"
1438
+ }
1439
+ ),
1440
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1441
+ "path",
1442
+ {
1443
+ d: "M12 4L4.5 4M4.5 4L6.5 2M4.5 4L6.5 6",
1444
+ stroke: "currentColor",
1445
+ strokeWidth: "2",
1446
+ strokeLinecap: "round",
1447
+ strokeLinejoin: "round"
1448
+ }
1449
+ )
1450
+ ]
1451
+ }
1452
+ );
407
1453
  };
408
- var MobilePlayButton = class {
409
- constructor(parent, controls) {
410
- this.parent = parent;
411
- this.controls = controls;
412
- this.video = controls?.getVideo?.() || parent.querySelector("video") || document.querySelector("video");
413
- if (!this.video) {
414
- console.error("MobilePlayButton: No video element found");
415
- return;
1454
+
1455
+ // src/icons/SkipForwardIcon.tsx
1456
+ var import_jsx_runtime2 = require("react/jsx-runtime");
1457
+ var SkipForwardIcon = ({ size = 24, className = "" }) => {
1458
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1459
+ "svg",
1460
+ {
1461
+ width: size,
1462
+ height: size,
1463
+ strokeWidth: "2",
1464
+ viewBox: "0 0 24 24",
1465
+ fill: "none",
1466
+ xmlns: "http://www.w3.org/2000/svg",
1467
+ className,
1468
+ children: [
1469
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1470
+ "path",
1471
+ {
1472
+ d: "M21 13C21 17.9706 16.9706 22 12 22C7.02944 22 3 17.9706 3 13C3 8.02944 7.02944 4 12 4",
1473
+ stroke: "currentColor",
1474
+ strokeLinecap: "round",
1475
+ strokeLinejoin: "round"
1476
+ }
1477
+ ),
1478
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1479
+ "path",
1480
+ {
1481
+ d: "M12 4H19.5M19.5 4L17.5 2M19.5 4L17.5 6",
1482
+ stroke: "currentColor",
1483
+ strokeLinecap: "round",
1484
+ strokeLinejoin: "round"
1485
+ }
1486
+ ),
1487
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1488
+ "path",
1489
+ {
1490
+ d: "M9 9L9 16",
1491
+ stroke: "currentColor",
1492
+ strokeLinecap: "round",
1493
+ strokeLinejoin: "round"
1494
+ }
1495
+ ),
1496
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1497
+ "path",
1498
+ {
1499
+ d: "M15 9L13 9C12.4477 9 12 9.44772 12 10L12 11.5C12 12.0523 12.4477 12.5 13 12.5L14 12.5C14.5523 12.5 15 12.9477 15 13.5L15 15C15 15.5523 14.5523 16 14 16L12 16",
1500
+ stroke: "currentColor",
1501
+ strokeLinecap: "round",
1502
+ strokeLinejoin: "round"
1503
+ }
1504
+ )
1505
+ ]
416
1506
  }
417
- this.eventManager = { listen: (element, event, handler) => {
418
- element.addEventListener(event, handler);
419
- } };
420
- this.button_ = document.createElement("button");
421
- this.button_.className = "motto-mobile-play-button";
422
- this.updateIcon();
423
- this.parent.appendChild(this.button_);
424
- this.eventManager.listen(this.button_, "click", () => {
425
- if (this.video.paused) {
426
- this.video.play();
427
- } else {
428
- this.video.pause();
429
- }
430
- });
431
- this.eventManager.listen(this.video, "play", () => this.updateIcon());
432
- this.eventManager.listen(this.video, "pause", () => this.updateIcon());
433
- }
434
- updateIcon() {
435
- if (this.video.paused) {
436
- this.button_.innerHTML = `
437
- <svg xmlns="http://www.w3.org/2000/svg" stroke-width="2" viewBox="0 0 24 24" fill="currentColor">
438
- <path stroke-width="2" fill-rule="evenodd" d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z" clip-rule="evenodd" />
439
- </svg>
440
- `;
441
- this.button_.setAttribute("aria-label", "Play");
442
- } else {
443
- this.button_.innerHTML = `
444
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
445
- <path fill-rule="evenodd" d="M6.75 5.25a.75.75 0 0 1 .75-.75H9a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H7.5a.75.75 0 0 1-.75-.75V5.25Zm7.5 0A.75.75 0 0 1 15 4.5h1.5a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H15a.75.75 0 0 1-.75-.75V5.25Z" clip-rule="evenodd" />
446
- </svg>
447
- `;
448
- this.button_.setAttribute("aria-label", "Pause");
1507
+ );
1508
+ };
1509
+
1510
+ // src/icons/BigPlayIcon.tsx
1511
+ var import_jsx_runtime3 = require("react/jsx-runtime");
1512
+ var BigPlayIcon = ({ size = 40, className = "" }) => {
1513
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1514
+ "svg",
1515
+ {
1516
+ width: size,
1517
+ height: size,
1518
+ viewBox: "0 0 24 24",
1519
+ fill: "currentColor",
1520
+ xmlns: "http://www.w3.org/2000/svg",
1521
+ className,
1522
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1523
+ "path",
1524
+ {
1525
+ fillRule: "evenodd",
1526
+ d: "M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z",
1527
+ clipRule: "evenodd"
1528
+ }
1529
+ )
449
1530
  }
450
- }
451
- release() {
452
- }
1531
+ );
453
1532
  };
454
- var MobileSkipBackButton = class {
455
- constructor(parent, controls, onSkipBack) {
1533
+
1534
+ // src/utils/renderIcon.ts
1535
+ var import_server = require("react-dom/server");
1536
+ var import_react5 = require("react");
1537
+ var renderIcon = (Component, props = {}) => {
1538
+ return (0, import_server.renderToStaticMarkup)((0, import_react5.createElement)(Component, props));
1539
+ };
1540
+
1541
+ // src/hooks/useShakaUI.ts
1542
+ var SkipBackButton = class {
1543
+ constructor(parent, controls, onSkipBack, iconSize = 24) {
456
1544
  this.parent = parent;
457
1545
  this.controls = controls;
458
- this.video = controls?.getVideo?.() || parent.querySelector("video") || document.querySelector("video");
459
- if (!this.video) {
460
- console.error("MobileSkipBackButton: No video element found");
461
- return;
462
- }
463
1546
  this.eventManager = { listen: (element, event, handler) => {
464
1547
  element.addEventListener(event, handler);
465
1548
  } };
466
1549
  this.button_ = document.createElement("button");
467
- this.button_.className = "motto-mobile-skip-button";
468
- this.button_.innerHTML = `
469
- <svg width="20px" stroke-width="2" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
470
- <path d="M3 13C3 17.9706 7.02944 22 12 22C16.9706 22 21 17.9706 21 13C21 8.02944 16.9706 4 12 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
471
- <path d="M9 9L9 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
472
- <path d="M15 9L13 9C12.4477 9 12 9.44772 12 10L12 11.5C12 12.0523 12.4477 12.5 13 12.5L14 12.5C14.5523 12.5 15 12.9477 15 13.5L15 15C15 15.5523 14.5523 16 14 16L12 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
473
- <path d="M12 4L4.5 4M4.5 4L6.5 2M4.5 4L6.5 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
474
- </svg>
475
- `;
1550
+ this.button_.className = "shaka-button motto-native-skip-button";
1551
+ this.button_.innerHTML = renderIcon(SkipBackIcon, { size: iconSize });
1552
+ this.button_.title = "Skip back 15 seconds";
476
1553
  this.button_.setAttribute("aria-label", "Skip back 15 seconds");
477
1554
  this.parent.appendChild(this.button_);
478
1555
  this.eventManager.listen(this.button_, "click", () => {
479
- const newTime = Math.max(0, this.video.currentTime - 15);
480
- this.video.currentTime = newTime;
481
- onSkipBack?.(newTime);
1556
+ const video = this.controls.getVideo();
1557
+ if (video) {
1558
+ const newTime = Math.max(0, video.currentTime - 15);
1559
+ video.currentTime = newTime;
1560
+ onSkipBack?.(newTime);
1561
+ }
482
1562
  });
483
1563
  }
1564
+ // Shaka UI will call `release` when the controls are destroyed.
1565
+ // Provide a no-op implementation to avoid TypeErrors.
484
1566
  release() {
485
1567
  }
486
1568
  };
487
- var MobileSkipForwardButton = class {
488
- constructor(parent, controls, onSkipForward) {
1569
+ var SkipForwardButton = class {
1570
+ constructor(parent, controls, onSkipForward, iconSize = 24) {
489
1571
  this.parent = parent;
490
1572
  this.controls = controls;
491
- this.video = controls?.getVideo?.() || parent.querySelector("video") || document.querySelector("video");
492
- if (!this.video) {
493
- console.error("MobileSkipForwardButton: No video element found");
494
- return;
495
- }
496
1573
  this.eventManager = { listen: (element, event, handler) => {
497
1574
  element.addEventListener(event, handler);
498
1575
  } };
499
1576
  this.button_ = document.createElement("button");
500
- this.button_.className = "motto-mobile-skip-button";
501
- this.button_.innerHTML = `
502
- <svg fill="none" height="20" stroke-width="2" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg">
503
- <path d="M21 13C21 17.9706 16.9706 22 12 22C7.02944 22 3 17.9706 3 13C3 8.02944 7.02944 4 12 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
504
- <path d="M12 4H19.5M19.5 4L17.5 2M19.5 4L17.5 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
505
- <path d="M9 9L9 16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
506
- <path d="M15 9L13 9C12.4477 9 12 9.44772 12 10L12 11.5C12 12.0523 12.4477 12.5 13 12.5L14 12.5C14.5523 12.5 15 12.9477 15 13.5L15 15C15 15.5523 14.5523 16 14 16L12 16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
507
- </svg>
508
- `;
1577
+ this.button_.className = "shaka-button motto-native-skip-button";
1578
+ this.button_.innerHTML = renderIcon(SkipForwardIcon, { size: iconSize });
1579
+ this.button_.title = "Skip forward 15 seconds";
509
1580
  this.button_.setAttribute("aria-label", "Skip forward 15 seconds");
510
1581
  this.parent.appendChild(this.button_);
511
1582
  this.eventManager.listen(this.button_, "click", () => {
512
- const newTime = Math.min(this.video.duration || 0, this.video.currentTime + 15);
513
- this.video.currentTime = newTime;
514
- onSkipForward?.(newTime);
1583
+ const video = this.controls.getVideo();
1584
+ if (video) {
1585
+ const newTime = Math.min(video.duration || 0, video.currentTime + 15);
1586
+ video.currentTime = newTime;
1587
+ onSkipForward?.(newTime);
1588
+ }
515
1589
  });
516
1590
  }
517
1591
  release() {
518
1592
  }
519
1593
  };
520
- var MobileControlsContainer = class {
521
- constructor(parent, controls, onSkipBack, onSkipForward) {
522
- this.parent = parent;
523
- this.controls = controls;
524
- if (!parent) {
525
- console.error("MobileControlsContainer: No parent element provided");
526
- return;
527
- }
528
- this.container_ = document.createElement("div");
529
- this.container_.className = "motto-mobile-controls-overlay";
530
- const controlsGroup = document.createElement("div");
531
- controlsGroup.className = "motto-mobile-controls-group";
532
- new MobileSkipBackButton(controlsGroup, controls, onSkipBack);
533
- new MobilePlayButton(controlsGroup, controls);
534
- new MobileSkipForwardButton(controlsGroup, controls, onSkipForward);
535
- this.container_.appendChild(controlsGroup);
536
- this.parent.appendChild(this.container_);
537
- this.setupVisibilitySync();
538
- }
539
- setupVisibilitySync() {
540
- setTimeout(() => {
541
- this.syncVisibility();
542
- this.observer = new MutationObserver((mutations) => {
543
- mutations.forEach((mutation) => {
544
- if (mutation.type === "attributes" && mutation.attributeName === "class") {
545
- this.syncVisibility();
546
- }
547
- });
548
- });
549
- this.observer.observe(this.parent, {
550
- attributes: true,
551
- attributeFilter: ["class"]
552
- });
553
- const video = this.controls?.getVideo?.() || this.parent.querySelector("video");
554
- if (video) {
555
- video.addEventListener("play", () => {
556
- setTimeout(() => this.syncVisibility(), 50);
557
- });
558
- video.addEventListener("pause", () => {
559
- setTimeout(() => this.syncVisibility(), 50);
560
- });
561
- }
562
- }, 1e3);
563
- }
564
- syncVisibility() {
565
- const mainContainer = this.parent;
566
- const hasNoCursor = mainContainer.classList.contains("no-cursor");
567
- const video = this.controls?.getVideo?.() || this.parent.querySelector("video");
568
- const isVideoPaused = video ? video.paused : false;
569
- const isControlsVisible = !hasNoCursor || isVideoPaused;
570
- if (this.container_) {
571
- if (isControlsVisible) {
572
- this.container_.style.opacity = "1";
573
- this.container_.style.pointerEvents = "none";
574
- } else {
575
- this.container_.style.opacity = "0";
576
- this.container_.style.pointerEvents = "none";
577
- }
578
- }
579
- }
580
- isElementVisible(element) {
581
- const style = window.getComputedStyle(element);
582
- const hasHiddenClass = element.classList.contains("shaka-hidden") || element.classList.contains("hidden") || element.classList.contains("shaka-fade-out");
583
- return style.display !== "none" && style.visibility !== "hidden" && style.opacity !== "0" && !element.hidden && !hasHiddenClass;
1594
+ var SkipBackButtonFactory = class {
1595
+ constructor(onSkipBack, iconSize) {
1596
+ this.onSkipBack = onSkipBack;
1597
+ this.iconSize = iconSize;
584
1598
  }
585
- release() {
586
- try {
587
- this.observer?.disconnect?.();
588
- if (this.container_ && this.parent.contains(this.container_)) {
589
- this.parent.removeChild(this.container_);
590
- }
591
- } catch {
592
- }
1599
+ create(rootElement, controls) {
1600
+ return new SkipBackButton(rootElement, controls, this.onSkipBack, this.iconSize);
593
1601
  }
594
1602
  };
595
- var MobileControlsContainerFactory = class {
596
- constructor(onSkipBack, onSkipForward) {
597
- this.onSkipBack = onSkipBack;
1603
+ var SkipForwardButtonFactory = class {
1604
+ constructor(onSkipForward, iconSize) {
598
1605
  this.onSkipForward = onSkipForward;
1606
+ this.iconSize = iconSize;
599
1607
  }
600
1608
  create(rootElement, controls) {
601
- return new MobileControlsContainer(rootElement, controls, this.onSkipBack, this.onSkipForward);
1609
+ return new SkipForwardButton(rootElement, controls, this.onSkipForward, this.iconSize);
602
1610
  }
603
1611
  };
604
- var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig, seekbarColors, onSkipBack, onSkipForward) => {
605
- const uiRef = (0, import_react5.useRef)(null);
606
- const mobileOverlayRef = (0, import_react5.useRef)(null);
607
- const registeredElements = (0, import_react5.useRef)(/* @__PURE__ */ new Set());
608
- const initializeUI = (0, import_react5.useCallback)(async () => {
1612
+ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig, seekbarColors, onSkipBack, onSkipForward, iconSizes) => {
1613
+ const uiRef = (0, import_react6.useRef)(null);
1614
+ const registeredElements = (0, import_react6.useRef)(/* @__PURE__ */ new Set());
1615
+ const initializeUI = (0, import_react6.useCallback)(async () => {
609
1616
  if (!controls || !containerRef.current || !playerRef.current || !videoRef.current) {
610
1617
  return null;
611
1618
  }
612
- const isMobile = window.innerWidth <= 767 || /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
613
1619
  if (!registeredElements.current.has("skip_back_button")) {
614
- import_shaka_player3.ui.Controls.registerElement("skip_back_button", new SkipBackButtonFactory(onSkipBack));
1620
+ import_shaka_player3.ui.Controls.registerElement("skip_back_button", new SkipBackButtonFactory(onSkipBack, iconSizes?.skipButtons));
615
1621
  registeredElements.current.add("skip_back_button");
616
1622
  }
617
1623
  if (!registeredElements.current.has("skip_forward_button")) {
618
- import_shaka_player3.ui.Controls.registerElement("skip_forward_button", new SkipForwardButtonFactory(onSkipForward));
1624
+ import_shaka_player3.ui.Controls.registerElement("skip_forward_button", new SkipForwardButtonFactory(onSkipForward, iconSizes?.skipButtons));
619
1625
  registeredElements.current.add("skip_forward_button");
620
1626
  }
621
- if (isMobile) {
622
- if (!registeredElements.current.has("mobile_controls_container")) {
623
- import_shaka_player3.ui.Controls.registerElement("mobile_controls_container", new MobileControlsContainerFactory(onSkipBack, onSkipForward));
624
- registeredElements.current.add("mobile_controls_container");
625
- }
626
- }
627
1627
  const ui = new import_shaka_player3.ui.Overlay(playerRef.current, containerRef.current, videoRef.current);
628
1628
  uiRef.current = ui;
629
- const controlPanelElements = isMobile ? [
1629
+ const isMobile = window.innerWidth <= 767;
1630
+ const controlPanelElements = [
1631
+ ...isMobile ? [] : ["skip_back_button"],
1632
+ ...isMobile ? [] : ["play_pause"],
1633
+ ...isMobile ? [] : ["skip_forward_button"],
630
1634
  "mute",
631
- "time_and_duration",
632
- "spacer",
633
- "fullscreen",
634
- "cast",
635
- "overflow_menu"
636
- ] : [
637
- "skip_back_button",
638
- "play_pause",
639
- "skip_forward_button",
640
- "mute",
641
- "volume",
1635
+ ...isMobile ? [] : ["volume"],
1636
+ // Only include volume on desktop
642
1637
  "time_and_duration",
643
1638
  "spacer",
644
1639
  "fullscreen",
@@ -655,6 +1650,7 @@ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig,
655
1650
  // Progress/played portion (white)
656
1651
  },
657
1652
  controlPanelElements,
1653
+ addBigPlayButton: isMobile,
658
1654
  ...chromecastConfig?.receiverApplicationId && {
659
1655
  "castReceiverAppId": chromecastConfig.receiverApplicationId,
660
1656
  "castAndroidReceiverCompatible": false
@@ -671,24 +1667,33 @@ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig,
671
1667
  }
672
1668
  ui.configure(uiConfig);
673
1669
  if (isMobile) {
674
- setTimeout(() => {
675
- const container = containerRef.current;
676
- const video = videoRef.current;
677
- if (container && video) {
678
- if (!mobileOverlayRef.current) {
679
- mobileOverlayRef.current = new MobileControlsContainer(
680
- container,
681
- { getVideo: () => video },
682
- onSkipBack,
683
- onSkipForward
684
- );
685
- }
1670
+ const customizeBigPlayButton = () => {
1671
+ const bigPlayButton = containerRef.current?.querySelector(".shaka-big-play-button");
1672
+ if (bigPlayButton && !bigPlayButton.hasAttribute("data-customized")) {
1673
+ const buttonSize = iconSizes?.bigPlayButton || 40;
1674
+ bigPlayButton.innerHTML = renderIcon(BigPlayIcon, { size: buttonSize });
1675
+ bigPlayButton.setAttribute("data-customized", "true");
1676
+ const buttonElement = bigPlayButton;
1677
+ buttonElement.style.display = "flex";
1678
+ buttonElement.style.alignItems = "center";
1679
+ buttonElement.style.justifyContent = "center";
686
1680
  }
687
- }, 500);
1681
+ };
1682
+ setTimeout(customizeBigPlayButton, 100);
1683
+ const observer = new MutationObserver(() => {
1684
+ customizeBigPlayButton();
1685
+ });
1686
+ if (containerRef.current) {
1687
+ observer.observe(containerRef.current, {
1688
+ childList: true,
1689
+ subtree: true,
1690
+ attributes: false
1691
+ });
1692
+ }
688
1693
  }
689
1694
  return ui;
690
- }, [controls, containerRef, playerRef, videoRef, chromecastConfig, seekbarColors, onSkipBack, onSkipForward]);
691
- const destroyUI = (0, import_react5.useCallback)(() => {
1695
+ }, [controls, containerRef, playerRef, videoRef, chromecastConfig, seekbarColors, onSkipBack, onSkipForward, iconSizes]);
1696
+ const destroyUI = (0, import_react6.useCallback)(() => {
692
1697
  if (uiRef.current) {
693
1698
  try {
694
1699
  uiRef.current.destroy();
@@ -697,14 +1702,6 @@ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig,
697
1702
  }
698
1703
  uiRef.current = null;
699
1704
  }
700
- if (mobileOverlayRef.current) {
701
- try {
702
- mobileOverlayRef.current.release();
703
- } catch (error) {
704
- console.warn("Error releasing mobile controls overlay:", error);
705
- }
706
- mobileOverlayRef.current = null;
707
- }
708
1705
  }, []);
709
1706
  return {
710
1707
  uiRef,
@@ -714,9 +1711,9 @@ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig,
714
1711
  };
715
1712
 
716
1713
  // src/hooks/useEventHandlers.ts
717
- var import_react6 = require("react");
1714
+ var import_react7 = require("react");
718
1715
  var useEventHandlers = (videoRef, handlers) => {
719
- const setupEventListeners = (0, import_react6.useCallback)(() => {
1716
+ const setupEventListeners = (0, import_react7.useCallback)(() => {
720
1717
  const video = videoRef.current;
721
1718
  if (!video) return;
722
1719
  const { onPlay, onPause, onEnded, onLoadStart, onCanPlay } = handlers;
@@ -726,7 +1723,7 @@ var useEventHandlers = (videoRef, handlers) => {
726
1723
  if (onLoadStart) video.addEventListener("loadstart", onLoadStart);
727
1724
  if (onCanPlay) video.addEventListener("canplay", onCanPlay);
728
1725
  }, [videoRef, handlers]);
729
- const cleanupEventListeners = (0, import_react6.useCallback)(() => {
1726
+ const cleanupEventListeners = (0, import_react7.useCallback)(() => {
730
1727
  const video = videoRef.current;
731
1728
  if (!video) return;
732
1729
  const { onPlay, onPause, onEnded, onLoadStart, onCanPlay } = handlers;
@@ -743,12 +1740,13 @@ var useEventHandlers = (videoRef, handlers) => {
743
1740
  };
744
1741
 
745
1742
  // src/hooks/useLiveBadge.ts
746
- var import_react7 = require("react");
1743
+ var import_react8 = require("react");
747
1744
  var useLiveBadge = (playerRef, options = {}) => {
748
- const [isLive, setIsLive] = (0, import_react7.useState)(false);
749
- const [isVisible, setIsVisible] = (0, import_react7.useState)(false);
750
- const intervalRef = (0, import_react7.useRef)(null);
751
- const { enabled = true, onLiveStateChange } = options;
1745
+ const [isLive, setIsLive] = (0, import_react8.useState)(false);
1746
+ const [isVisible, setIsVisible] = (0, import_react8.useState)(false);
1747
+ const [isNearLiveEdge, setIsNearLiveEdge] = (0, import_react8.useState)(false);
1748
+ const intervalRef = (0, import_react8.useRef)(null);
1749
+ const { enabled = true, onLiveStateChange, liveThresholdSeconds = 15 } = options;
752
1750
  const checkLiveStatus = () => {
753
1751
  if (!playerRef.current || !enabled) {
754
1752
  return;
@@ -767,33 +1765,53 @@ var useLiveBadge = (playerRef, options = {}) => {
767
1765
  return;
768
1766
  }
769
1767
  const liveStatus = timeline.isLive();
1768
+ let nearLiveEdge = false;
1769
+ if (liveStatus) {
1770
+ try {
1771
+ const seekRange = player.getSeekRange();
1772
+ const videoElement = player.getMediaElement();
1773
+ if (seekRange && videoElement) {
1774
+ const liveEdge = seekRange.end;
1775
+ const currentTime = videoElement.currentTime;
1776
+ const timeBehindLive = liveEdge - currentTime;
1777
+ nearLiveEdge = timeBehindLive <= liveThresholdSeconds;
1778
+ }
1779
+ } catch (error) {
1780
+ console.error("Error checking live edge position:", error);
1781
+ nearLiveEdge = liveStatus;
1782
+ }
1783
+ }
770
1784
  if (liveStatus !== isLive) {
771
1785
  setIsLive(liveStatus);
772
- setIsVisible(liveStatus);
773
1786
  onLiveStateChange?.(liveStatus);
774
1787
  }
1788
+ if (nearLiveEdge !== isNearLiveEdge) {
1789
+ setIsNearLiveEdge(nearLiveEdge);
1790
+ setIsVisible(nearLiveEdge);
1791
+ }
775
1792
  } catch (error) {
776
1793
  if (error instanceof Error && !error.message.includes("not a function")) {
777
1794
  console.error("Error checking live status:", error);
778
1795
  }
779
1796
  }
780
1797
  };
781
- (0, import_react7.useEffect)(() => {
1798
+ (0, import_react8.useEffect)(() => {
782
1799
  if (!enabled) {
783
1800
  setIsLive(false);
784
1801
  setIsVisible(false);
1802
+ setIsNearLiveEdge(false);
785
1803
  return;
786
1804
  }
787
1805
  checkLiveStatus();
788
- intervalRef.current = setInterval(checkLiveStatus, 2e3);
1806
+ intervalRef.current = setInterval(checkLiveStatus, 1e3);
789
1807
  return () => {
790
1808
  if (intervalRef.current) {
791
1809
  clearInterval(intervalRef.current);
792
1810
  intervalRef.current = null;
793
1811
  }
794
1812
  };
795
- }, [enabled, playerRef.current]);
796
- (0, import_react7.useEffect)(() => {
1813
+ }, [enabled, playerRef.current, liveThresholdSeconds]);
1814
+ (0, import_react8.useEffect)(() => {
797
1815
  return () => {
798
1816
  if (intervalRef.current) {
799
1817
  clearInterval(intervalRef.current);
@@ -805,6 +1823,7 @@ var useLiveBadge = (playerRef, options = {}) => {
805
1823
  return {
806
1824
  isLive,
807
1825
  isVisible,
1826
+ isNearLiveEdge,
808
1827
  hideBadge,
809
1828
  showBadge,
810
1829
  checkLiveStatus
@@ -812,20 +1831,52 @@ var useLiveBadge = (playerRef, options = {}) => {
812
1831
  };
813
1832
 
814
1833
  // src/hooks/usePosterFallback.ts
815
- var import_react8 = require("react");
1834
+ var import_react9 = require("react");
816
1835
 
817
1836
  // src/hooks/useLiveIndicator.ts
818
- var import_react9 = require("react");
819
- var useLiveIndicator = (containerRef, options = {}) => {
820
- const observerRef = (0, import_react9.useRef)(null);
1837
+ var import_react10 = require("react");
1838
+ var useLiveIndicator = (containerRef, playerRef, options = {}) => {
1839
+ const observerRef = (0, import_react10.useRef)(null);
1840
+ const intervalRef = (0, import_react10.useRef)(null);
821
1841
  const {
822
1842
  enabled = true,
823
1843
  indicatorColor = "#ff0000",
824
1844
  indicatorSize = 8,
825
- showPulseAnimation = true
1845
+ showPulseAnimation = true,
1846
+ liveThresholdSeconds = 15
826
1847
  } = options;
827
- (0, import_react9.useEffect)(() => {
828
- if (!containerRef.current || !enabled) {
1848
+ const isNearLiveEdge = (player) => {
1849
+ if (!player) return false;
1850
+ try {
1851
+ if (!player.getManifest || !player.getPresentationTimeline || typeof player.getPresentationTimeline !== "function") {
1852
+ return false;
1853
+ }
1854
+ const manifest = player.getManifest();
1855
+ if (!manifest) {
1856
+ return false;
1857
+ }
1858
+ const timeline = player.getPresentationTimeline();
1859
+ if (!timeline || typeof timeline.isLive !== "function") {
1860
+ return false;
1861
+ }
1862
+ const liveStatus = timeline.isLive();
1863
+ if (!liveStatus) return false;
1864
+ const seekRange = player.getSeekRange();
1865
+ const videoElement = player.getMediaElement();
1866
+ if (seekRange && videoElement) {
1867
+ const liveEdge = seekRange.end;
1868
+ const currentTime = videoElement.currentTime;
1869
+ const timeBehindLive = liveEdge - currentTime;
1870
+ return timeBehindLive <= liveThresholdSeconds;
1871
+ }
1872
+ return false;
1873
+ } catch (error) {
1874
+ console.error("Error checking live edge position in indicator:", error);
1875
+ return false;
1876
+ }
1877
+ };
1878
+ (0, import_react10.useEffect)(() => {
1879
+ if (!containerRef.current || !playerRef.current || !enabled) {
829
1880
  return;
830
1881
  }
831
1882
  const addLiveIndicator = (currentTimeElement) => {
@@ -856,7 +1907,7 @@ var useLiveIndicator = (containerRef, options = {}) => {
856
1907
  const currentTimeElements = containerRef.current?.querySelectorAll(".shaka-current-time");
857
1908
  currentTimeElements?.forEach((element) => {
858
1909
  const textContent = element.textContent?.trim() || "";
859
- if (textContent.toLowerCase().includes("live")) {
1910
+ if (textContent.toLowerCase().includes("live") && isNearLiveEdge(playerRef.current)) {
860
1911
  addLiveIndicator(element);
861
1912
  } else {
862
1913
  removeLiveIndicator(element);
@@ -864,6 +1915,7 @@ var useLiveIndicator = (containerRef, options = {}) => {
864
1915
  });
865
1916
  };
866
1917
  checkForLiveContent();
1918
+ intervalRef.current = setInterval(checkForLiveContent, 1e3);
867
1919
  observerRef.current = new MutationObserver((mutations) => {
868
1920
  let shouldCheck = false;
869
1921
  mutations.forEach((mutation) => {
@@ -893,15 +1945,18 @@ var useLiveIndicator = (containerRef, options = {}) => {
893
1945
  if (observerRef.current) {
894
1946
  observerRef.current.disconnect();
895
1947
  }
1948
+ if (intervalRef.current) {
1949
+ clearInterval(intervalRef.current);
1950
+ }
896
1951
  };
897
- }, [containerRef, enabled, indicatorColor, indicatorSize, showPulseAnimation]);
1952
+ }, [containerRef, playerRef, enabled, indicatorColor, indicatorSize, showPulseAnimation, liveThresholdSeconds]);
898
1953
  return {
899
1954
  // Expose method to manually trigger check if needed
900
1955
  checkForLiveContent: () => {
901
1956
  const currentTimeElements = containerRef.current?.querySelectorAll(".shaka-current-time");
902
1957
  currentTimeElements?.forEach((element) => {
903
1958
  const textContent = element.textContent?.trim() || "";
904
- if (textContent.toLowerCase().includes("live")) {
1959
+ if (textContent.toLowerCase().includes("live") && isNearLiveEdge(playerRef.current)) {
905
1960
  }
906
1961
  });
907
1962
  }
@@ -909,13 +1964,13 @@ var useLiveIndicator = (containerRef, options = {}) => {
909
1964
  };
910
1965
 
911
1966
  // src/hooks/useKeyboardControls.ts
912
- var import_react10 = require("react");
1967
+ var import_react11 = require("react");
913
1968
  var useKeyboardControls = (videoRef, options = {}) => {
914
1969
  const { skipBack, skipForward, enabled = true } = options;
915
- const isDesktop = (0, import_react10.useCallback)(() => {
1970
+ const isDesktop = (0, import_react11.useCallback)(() => {
916
1971
  return window.innerWidth > 767 && !/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
917
1972
  }, []);
918
- const handleKeydown = (0, import_react10.useCallback)((event) => {
1973
+ const handleKeydown = (0, import_react11.useCallback)((event) => {
919
1974
  if (!enabled || !isDesktop() || !videoRef.current) return;
920
1975
  const activeElement = document.activeElement;
921
1976
  if (activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || activeElement.isContentEditable)) {
@@ -940,136 +1995,1201 @@ var useKeyboardControls = (videoRef, options = {}) => {
940
1995
  }
941
1996
  break;
942
1997
  }
943
- }, [enabled, videoRef, skipBack, skipForward, isDesktop]);
944
- (0, import_react10.useEffect)(() => {
945
- if (!enabled || !isDesktop()) return;
946
- document.addEventListener("keydown", handleKeydown);
947
- return () => {
948
- document.removeEventListener("keydown", handleKeydown);
949
- };
950
- }, [handleKeydown, enabled, isDesktop]);
951
- return {
952
- isDesktop: isDesktop()
953
- };
954
- };
955
-
956
- // src/components/Loading.tsx
957
- var import_tailwind_merge = require("tailwind-merge");
958
- var import_jsx_runtime = require("react/jsx-runtime");
959
- var Loading = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
960
- "div",
961
- {
962
- className: (0, import_tailwind_merge.twMerge)(
963
- "relative bg-[#151515] md:rounded-2xl! overflow-hidden aspect-video text-white w-full h-full flex justify-center items-center text-[10px]",
964
- className
965
- ),
966
- role: "status",
967
- children: [
968
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "shaka-spinner-container flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
969
- "svg",
970
- {
971
- className: "shaka-spinner-svg animate-spin h-12 w-12",
972
- viewBox: "0 0 64 64",
973
- xmlns: "http://www.w3.org/2000/svg",
974
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
975
- "circle",
976
- {
977
- className: "shaka-spinner-path",
978
- cx: "32",
979
- cy: "32",
980
- r: "28",
981
- strokeWidth: "4",
982
- strokeLinecap: "round"
983
- }
984
- )
985
- }
986
- ) }),
987
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: "Loading..." })
988
- ]
1998
+ }, [enabled, videoRef, skipBack, skipForward, isDesktop]);
1999
+ (0, import_react11.useEffect)(() => {
2000
+ if (!enabled || !isDesktop()) return;
2001
+ document.addEventListener("keydown", handleKeydown);
2002
+ return () => {
2003
+ document.removeEventListener("keydown", handleKeydown);
2004
+ };
2005
+ }, [handleKeydown, enabled, isDesktop]);
2006
+ return {
2007
+ isDesktop: isDesktop()
2008
+ };
2009
+ };
2010
+
2011
+ // src/components/Loading.tsx
2012
+ var import_tailwind_merge = require("tailwind-merge");
2013
+ var import_jsx_runtime4 = require("react/jsx-runtime");
2014
+ var Loading = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
2015
+ "div",
2016
+ {
2017
+ className: (0, import_tailwind_merge.twMerge)(
2018
+ "relative bg-[#151515] md:rounded-2xl! overflow-hidden aspect-video text-white w-full h-full flex justify-center items-center text-[10px]",
2019
+ className
2020
+ ),
2021
+ role: "status",
2022
+ children: [
2023
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "shaka-spinner-container flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
2024
+ "svg",
2025
+ {
2026
+ className: "shaka-spinner-svg animate-spin h-12 w-12",
2027
+ viewBox: "0 0 64 64",
2028
+ xmlns: "http://www.w3.org/2000/svg",
2029
+ children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
2030
+ "circle",
2031
+ {
2032
+ className: "shaka-spinner-path",
2033
+ cx: "32",
2034
+ cy: "32",
2035
+ r: "28",
2036
+ strokeWidth: "4",
2037
+ strokeLinecap: "round"
2038
+ }
2039
+ )
2040
+ }
2041
+ ) }),
2042
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "sr-only", children: "Loading..." })
2043
+ ]
2044
+ }
2045
+ );
2046
+
2047
+ // src/components/ErrorScreen.tsx
2048
+ var import_jsx_runtime5 = require("react/jsx-runtime");
2049
+ var ErrorScreen = ({ title, description }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-full h-full md:rounded-2xl! aspect-video bg-black", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "bg-[#151515] text-white w-full h-full flex justify-stretch items-center", children: [
2050
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2051
+ "svg",
2052
+ {
2053
+ className: "w-24 h-24 m-6",
2054
+ fill: "none",
2055
+ stroke: "currentColor",
2056
+ strokeWidth: "2",
2057
+ style: { width: 96 },
2058
+ viewBox: "0 0 24 24",
2059
+ xmlns: "http://www.w3.org/2000/svg",
2060
+ children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2061
+ "path",
2062
+ {
2063
+ d: "M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z",
2064
+ strokeLinecap: "round",
2065
+ strokeLinejoin: "round"
2066
+ }
2067
+ )
2068
+ }
2069
+ ),
2070
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
2071
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "text-2xl mb-2", children: title || "Playback Error" }),
2072
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-lg", children: description || "Unable to play the video. Please try again later." })
2073
+ ] })
2074
+ ] }) });
2075
+
2076
+ // src/components/Title.tsx
2077
+ var import_jsx_runtime6 = require("react/jsx-runtime");
2078
+ var Title = ({ title }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: "text-white text-xl font-semibold", children: title }) });
2079
+
2080
+ // src/components/LiveBadge.tsx
2081
+ var import_jsx_runtime7 = require("react/jsx-runtime");
2082
+ var LiveBadge = ({
2083
+ isVisible,
2084
+ position = "top-right",
2085
+ className = "",
2086
+ style = {},
2087
+ text = "LIVE"
2088
+ }) => {
2089
+ if (!isVisible) return null;
2090
+ const positionClasses = {
2091
+ "top-left": "top-4 left-4",
2092
+ "top-right": "top-4 right-4",
2093
+ "bottom-left": "bottom-4 left-4",
2094
+ "bottom-right": "bottom-4 right-4"
2095
+ };
2096
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
2097
+ "div",
2098
+ {
2099
+ className: `
2100
+ absolute z-50
2101
+ ${positionClasses[position]}
2102
+ bg-red-600 text-white
2103
+ px-2 py-1
2104
+ rounded-md
2105
+ text-xs font-bold
2106
+ uppercase tracking-wide
2107
+ shadow-lg
2108
+ animate-pulse
2109
+ pointer-events-none
2110
+ ${className}
2111
+ `,
2112
+ style,
2113
+ children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "flex items-center gap-1", children: [
2114
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-2 h-2 bg-white rounded-full animate-pulse" }),
2115
+ text
2116
+ ] })
2117
+ }
2118
+ );
2119
+ };
2120
+
2121
+ // src/styles.css
2122
+ styleInject(`/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
2123
+ @layer properties;
2124
+ @layer theme, base, components, utilities;
2125
+ @layer theme {
2126
+ :root,
2127
+ :host {
2128
+ --font-sans:
2129
+ ui-sans-serif,
2130
+ system-ui,
2131
+ sans-serif,
2132
+ "Apple Color Emoji",
2133
+ "Segoe UI Emoji",
2134
+ "Segoe UI Symbol",
2135
+ "Noto Color Emoji";
2136
+ --font-mono:
2137
+ ui-monospace,
2138
+ SFMono-Regular,
2139
+ Menlo,
2140
+ Monaco,
2141
+ Consolas,
2142
+ "Liberation Mono",
2143
+ "Courier New",
2144
+ monospace;
2145
+ --color-red-600: oklch(57.7% 0.245 27.325);
2146
+ --color-black: #000;
2147
+ --color-white: #fff;
2148
+ --spacing: 0.25rem;
2149
+ --text-xs: 0.75rem;
2150
+ --text-xs--line-height: calc(1 / 0.75);
2151
+ --text-sm: 0.875rem;
2152
+ --text-sm--line-height: calc(1.25 / 0.875);
2153
+ --text-base: 1rem;
2154
+ --text-base--line-height: calc(1.5 / 1);
2155
+ --text-lg: 1.125rem;
2156
+ --text-lg--line-height: calc(1.75 / 1.125);
2157
+ --text-xl: 1.25rem;
2158
+ --text-xl--line-height: calc(1.75 / 1.25);
2159
+ --text-2xl: 1.5rem;
2160
+ --text-2xl--line-height: calc(2 / 1.5);
2161
+ --text-5xl: 3rem;
2162
+ --text-5xl--line-height: 1;
2163
+ --font-weight-medium: 500;
2164
+ --font-weight-semibold: 600;
2165
+ --font-weight-bold: 700;
2166
+ --tracking-wide: 0.025em;
2167
+ --tracking-widest: 0.1em;
2168
+ --radius-md: 0.375rem;
2169
+ --radius-2xl: 1rem;
2170
+ --animate-spin: spin 1s linear infinite;
2171
+ --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
2172
+ --aspect-video: 16 / 9;
2173
+ --default-transition-duration: 150ms;
2174
+ --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2175
+ --default-font-family: var(--font-sans);
2176
+ --default-mono-font-family: var(--font-mono);
2177
+ }
2178
+ }
2179
+ @layer base {
2180
+ *,
2181
+ ::after,
2182
+ ::before,
2183
+ ::backdrop,
2184
+ ::file-selector-button {
2185
+ box-sizing: border-box;
2186
+ margin: 0;
2187
+ padding: 0;
2188
+ border: 0 solid;
2189
+ }
2190
+ html,
2191
+ :host {
2192
+ line-height: 1.5;
2193
+ -webkit-text-size-adjust: 100%;
2194
+ tab-size: 4;
2195
+ font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
2196
+ font-feature-settings: var(--default-font-feature-settings, normal);
2197
+ font-variation-settings: var(--default-font-variation-settings, normal);
2198
+ -webkit-tap-highlight-color: transparent;
2199
+ }
2200
+ hr {
2201
+ height: 0;
2202
+ color: inherit;
2203
+ border-top-width: 1px;
2204
+ }
2205
+ abbr:where([title]) {
2206
+ -webkit-text-decoration: underline dotted;
2207
+ text-decoration: underline dotted;
2208
+ }
2209
+ h1,
2210
+ h2,
2211
+ h3,
2212
+ h4,
2213
+ h5,
2214
+ h6 {
2215
+ font-size: inherit;
2216
+ font-weight: inherit;
2217
+ }
2218
+ a {
2219
+ color: inherit;
2220
+ -webkit-text-decoration: inherit;
2221
+ text-decoration: inherit;
2222
+ }
2223
+ b,
2224
+ strong {
2225
+ font-weight: bolder;
2226
+ }
2227
+ code,
2228
+ kbd,
2229
+ samp,
2230
+ pre {
2231
+ font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
2232
+ font-feature-settings: var(--default-mono-font-feature-settings, normal);
2233
+ font-variation-settings: var(--default-mono-font-variation-settings, normal);
2234
+ font-size: 1em;
2235
+ }
2236
+ small {
2237
+ font-size: 80%;
2238
+ }
2239
+ sub,
2240
+ sup {
2241
+ font-size: 75%;
2242
+ line-height: 0;
2243
+ position: relative;
2244
+ vertical-align: baseline;
2245
+ }
2246
+ sub {
2247
+ bottom: -0.25em;
2248
+ }
2249
+ sup {
2250
+ top: -0.5em;
2251
+ }
2252
+ table {
2253
+ text-indent: 0;
2254
+ border-color: inherit;
2255
+ border-collapse: collapse;
2256
+ }
2257
+ :-moz-focusring {
2258
+ outline: auto;
2259
+ }
2260
+ progress {
2261
+ vertical-align: baseline;
2262
+ }
2263
+ summary {
2264
+ display: list-item;
2265
+ }
2266
+ ol,
2267
+ ul,
2268
+ menu {
2269
+ list-style: none;
2270
+ }
2271
+ img,
2272
+ svg,
2273
+ video,
2274
+ canvas,
2275
+ audio,
2276
+ iframe,
2277
+ embed,
2278
+ object {
2279
+ display: block;
2280
+ vertical-align: middle;
2281
+ }
2282
+ img,
2283
+ video {
2284
+ max-width: 100%;
2285
+ height: auto;
2286
+ }
2287
+ button,
2288
+ input,
2289
+ select,
2290
+ optgroup,
2291
+ textarea,
2292
+ ::file-selector-button {
2293
+ font: inherit;
2294
+ font-feature-settings: inherit;
2295
+ font-variation-settings: inherit;
2296
+ letter-spacing: inherit;
2297
+ color: inherit;
2298
+ border-radius: 0;
2299
+ background-color: transparent;
2300
+ opacity: 1;
2301
+ }
2302
+ :where(select:is([multiple], [size])) optgroup {
2303
+ font-weight: bolder;
2304
+ }
2305
+ :where(select:is([multiple], [size])) optgroup option {
2306
+ padding-inline-start: 20px;
2307
+ }
2308
+ ::file-selector-button {
2309
+ margin-inline-end: 4px;
2310
+ }
2311
+ ::placeholder {
2312
+ opacity: 1;
2313
+ }
2314
+ @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
2315
+ ::placeholder {
2316
+ color: currentcolor;
2317
+ @supports (color: color-mix(in lab, red, red)) {
2318
+ color: color-mix(in oklab, currentcolor 50%, transparent);
2319
+ }
2320
+ }
2321
+ }
2322
+ textarea {
2323
+ resize: vertical;
2324
+ }
2325
+ ::-webkit-search-decoration {
2326
+ -webkit-appearance: none;
2327
+ }
2328
+ ::-webkit-date-and-time-value {
2329
+ min-height: 1lh;
2330
+ text-align: inherit;
2331
+ }
2332
+ ::-webkit-datetime-edit {
2333
+ display: inline-flex;
2334
+ }
2335
+ ::-webkit-datetime-edit-fields-wrapper {
2336
+ padding: 0;
2337
+ }
2338
+ ::-webkit-datetime-edit,
2339
+ ::-webkit-datetime-edit-year-field,
2340
+ ::-webkit-datetime-edit-month-field,
2341
+ ::-webkit-datetime-edit-day-field,
2342
+ ::-webkit-datetime-edit-hour-field,
2343
+ ::-webkit-datetime-edit-minute-field,
2344
+ ::-webkit-datetime-edit-second-field,
2345
+ ::-webkit-datetime-edit-millisecond-field,
2346
+ ::-webkit-datetime-edit-meridiem-field {
2347
+ padding-block: 0;
2348
+ }
2349
+ :-moz-ui-invalid {
2350
+ box-shadow: none;
2351
+ }
2352
+ button,
2353
+ input:where([type=button], [type=reset], [type=submit]),
2354
+ ::file-selector-button {
2355
+ appearance: button;
2356
+ }
2357
+ ::-webkit-inner-spin-button,
2358
+ ::-webkit-outer-spin-button {
2359
+ height: auto;
2360
+ }
2361
+ [hidden]:where(:not([hidden=until-found])) {
2362
+ display: none !important;
2363
+ }
2364
+ }
2365
+ @layer utilities {
2366
+ .pointer-events-auto {
2367
+ pointer-events: auto;
2368
+ }
2369
+ .pointer-events-none {
2370
+ pointer-events: none;
2371
+ }
2372
+ .visible {
2373
+ visibility: visible;
2374
+ }
2375
+ .sr-only {
2376
+ position: absolute;
2377
+ width: 1px;
2378
+ height: 1px;
2379
+ padding: 0;
2380
+ margin: -1px;
2381
+ overflow: hidden;
2382
+ clip: rect(0, 0, 0, 0);
2383
+ white-space: nowrap;
2384
+ border-width: 0;
2385
+ }
2386
+ .absolute {
2387
+ position: absolute;
2388
+ }
2389
+ .fixed {
2390
+ position: fixed;
2391
+ }
2392
+ .relative {
2393
+ position: relative;
2394
+ }
2395
+ .static {
2396
+ position: static;
2397
+ }
2398
+ .inset-0 {
2399
+ inset: calc(var(--spacing) * 0);
2400
+ }
2401
+ .top-0 {
2402
+ top: calc(var(--spacing) * 0);
2403
+ }
2404
+ .top-4 {
2405
+ top: calc(var(--spacing) * 4);
2406
+ }
2407
+ .right-0 {
2408
+ right: calc(var(--spacing) * 0);
2409
+ }
2410
+ .right-4 {
2411
+ right: calc(var(--spacing) * 4);
2412
+ }
2413
+ .bottom-0 {
2414
+ bottom: calc(var(--spacing) * 0);
2415
+ }
2416
+ .bottom-4 {
2417
+ bottom: calc(var(--spacing) * 4);
2418
+ }
2419
+ .left-0 {
2420
+ left: calc(var(--spacing) * 0);
2421
+ }
2422
+ .left-4 {
2423
+ left: calc(var(--spacing) * 4);
2424
+ }
2425
+ .z-10 {
2426
+ z-index: 10;
2427
+ }
2428
+ .z-50 {
2429
+ z-index: 50;
2430
+ }
2431
+ .container {
2432
+ width: 100%;
2433
+ @media (width >= 40rem) {
2434
+ max-width: 40rem;
2435
+ }
2436
+ @media (width >= 48rem) {
2437
+ max-width: 48rem;
2438
+ }
2439
+ @media (width >= 64rem) {
2440
+ max-width: 64rem;
2441
+ }
2442
+ @media (width >= 80rem) {
2443
+ max-width: 80rem;
2444
+ }
2445
+ @media (width >= 96rem) {
2446
+ max-width: 96rem;
2447
+ }
2448
+ }
2449
+ .m-6 {
2450
+ margin: calc(var(--spacing) * 6);
2451
+ }
2452
+ .mt-1 {
2453
+ margin-top: calc(var(--spacing) * 1);
2454
+ }
2455
+ .mt-3 {
2456
+ margin-top: calc(var(--spacing) * 3);
2457
+ }
2458
+ .mb-2 {
2459
+ margin-bottom: calc(var(--spacing) * 2);
2460
+ }
2461
+ .mb-6 {
2462
+ margin-bottom: calc(var(--spacing) * 6);
2463
+ }
2464
+ .flex {
2465
+ display: flex;
2466
+ }
2467
+ .grid {
2468
+ display: grid;
2469
+ }
2470
+ .aspect-video {
2471
+ aspect-ratio: var(--aspect-video);
2472
+ }
2473
+ .h-2 {
2474
+ height: calc(var(--spacing) * 2);
2475
+ }
2476
+ .h-12 {
2477
+ height: calc(var(--spacing) * 12);
2478
+ }
2479
+ .h-24 {
2480
+ height: calc(var(--spacing) * 24);
2481
+ }
2482
+ .h-full {
2483
+ height: 100%;
2484
+ }
2485
+ .w-2 {
2486
+ width: calc(var(--spacing) * 2);
2487
+ }
2488
+ .w-12 {
2489
+ width: calc(var(--spacing) * 12);
2490
+ }
2491
+ .w-24 {
2492
+ width: calc(var(--spacing) * 24);
2493
+ }
2494
+ .w-full {
2495
+ width: 100%;
2496
+ }
2497
+ .animate-pulse {
2498
+ animation: var(--animate-pulse);
2499
+ }
2500
+ .animate-spin {
2501
+ animation: var(--animate-spin);
2502
+ }
2503
+ .auto-cols-max {
2504
+ grid-auto-columns: max-content;
2505
+ }
2506
+ .grid-flow-col {
2507
+ grid-auto-flow: column;
2508
+ }
2509
+ .flex-col {
2510
+ flex-direction: column;
2511
+ }
2512
+ .items-center {
2513
+ align-items: center;
2514
+ }
2515
+ .justify-center {
2516
+ justify-content: center;
2517
+ }
2518
+ .justify-stretch {
2519
+ justify-content: stretch;
2520
+ }
2521
+ .gap-1 {
2522
+ gap: calc(var(--spacing) * 1);
2523
+ }
2524
+ .gap-5 {
2525
+ gap: calc(var(--spacing) * 5);
2526
+ }
2527
+ .overflow-hidden {
2528
+ overflow: hidden;
2529
+ }
2530
+ .rounded-full {
2531
+ border-radius: calc(infinity * 1px);
2532
+ }
2533
+ .rounded-md {
2534
+ border-radius: var(--radius-md);
2535
+ }
2536
+ .bg-\\[\\#151515\\] {
2537
+ background-color: #151515;
2538
+ }
2539
+ .bg-black {
2540
+ background-color: var(--color-black);
2541
+ }
2542
+ .bg-red-600 {
2543
+ background-color: var(--color-red-600);
2544
+ }
2545
+ .bg-white {
2546
+ background-color: var(--color-white);
2547
+ }
2548
+ .bg-gradient-to-t {
2549
+ --tw-gradient-position: to top in oklab;
2550
+ background-image: linear-gradient(var(--tw-gradient-stops));
2551
+ }
2552
+ .from-black\\/70 {
2553
+ --tw-gradient-from: color-mix(in srgb, #000 70%, transparent);
2554
+ @supports (color: color-mix(in lab, red, red)) {
2555
+ --tw-gradient-from: color-mix(in oklab, var(--color-black) 70%, transparent);
2556
+ }
2557
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2558
+ }
2559
+ .to-transparent {
2560
+ --tw-gradient-to: transparent;
2561
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2562
+ }
2563
+ .bg-cover {
2564
+ background-size: cover;
2565
+ }
2566
+ .bg-center {
2567
+ background-position: center;
2568
+ }
2569
+ .bg-no-repeat {
2570
+ background-repeat: no-repeat;
2571
+ }
2572
+ .p-2 {
2573
+ padding: calc(var(--spacing) * 2);
2574
+ }
2575
+ .p-4 {
2576
+ padding: calc(var(--spacing) * 4);
2577
+ }
2578
+ .px-2 {
2579
+ padding-inline: calc(var(--spacing) * 2);
2580
+ }
2581
+ .px-4 {
2582
+ padding-inline: calc(var(--spacing) * 4);
2583
+ }
2584
+ .py-1 {
2585
+ padding-block: calc(var(--spacing) * 1);
2586
+ }
2587
+ .text-center {
2588
+ text-align: center;
2589
+ }
2590
+ .text-left {
2591
+ text-align: left;
2592
+ }
2593
+ .font-mono {
2594
+ font-family: var(--font-mono);
2595
+ }
2596
+ .text-2xl {
2597
+ font-size: var(--text-2xl);
2598
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
2599
+ }
2600
+ .text-5xl {
2601
+ font-size: var(--text-5xl);
2602
+ line-height: var(--tw-leading, var(--text-5xl--line-height));
2603
+ }
2604
+ .text-base {
2605
+ font-size: var(--text-base);
2606
+ line-height: var(--tw-leading, var(--text-base--line-height));
2607
+ }
2608
+ .text-lg {
2609
+ font-size: var(--text-lg);
2610
+ line-height: var(--tw-leading, var(--text-lg--line-height));
2611
+ }
2612
+ .text-sm {
2613
+ font-size: var(--text-sm);
2614
+ line-height: var(--tw-leading, var(--text-sm--line-height));
2615
+ }
2616
+ .text-xl {
2617
+ font-size: var(--text-xl);
2618
+ line-height: var(--tw-leading, var(--text-xl--line-height));
2619
+ }
2620
+ .text-xs {
2621
+ font-size: var(--text-xs);
2622
+ line-height: var(--tw-leading, var(--text-xs--line-height));
2623
+ }
2624
+ .text-\\[10px\\] {
2625
+ font-size: 10px;
2626
+ }
2627
+ .font-bold {
2628
+ --tw-font-weight: var(--font-weight-bold);
2629
+ font-weight: var(--font-weight-bold);
2630
+ }
2631
+ .font-medium {
2632
+ --tw-font-weight: var(--font-weight-medium);
2633
+ font-weight: var(--font-weight-medium);
2634
+ }
2635
+ .font-semibold {
2636
+ --tw-font-weight: var(--font-weight-semibold);
2637
+ font-weight: var(--font-weight-semibold);
2638
+ }
2639
+ .tracking-wide {
2640
+ --tw-tracking: var(--tracking-wide);
2641
+ letter-spacing: var(--tracking-wide);
2642
+ }
2643
+ .tracking-widest {
2644
+ --tw-tracking: var(--tracking-widest);
2645
+ letter-spacing: var(--tracking-widest);
2646
+ }
2647
+ .text-white {
2648
+ color: var(--color-white);
2649
+ }
2650
+ .uppercase {
2651
+ text-transform: uppercase;
2652
+ }
2653
+ .shadow-lg {
2654
+ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2655
+ box-shadow:
2656
+ var(--tw-inset-shadow),
2657
+ var(--tw-inset-ring-shadow),
2658
+ var(--tw-ring-offset-shadow),
2659
+ var(--tw-ring-shadow),
2660
+ var(--tw-shadow);
2661
+ }
2662
+ .filter {
2663
+ filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
2664
+ }
2665
+ .md\\:rounded-2xl {
2666
+ @media (width >= 48rem) {
2667
+ border-radius: var(--radius-2xl);
2668
+ }
2669
+ }
2670
+ .md\\:rounded-2xl\\! {
2671
+ @media (width >= 48rem) {
2672
+ border-radius: var(--radius-2xl) !important;
2673
+ }
2674
+ }
2675
+ .md\\:text-base {
2676
+ @media (width >= 48rem) {
2677
+ font-size: var(--text-base);
2678
+ line-height: var(--tw-leading, var(--text-base--line-height));
2679
+ }
989
2680
  }
990
- );
991
-
992
- // src/components/ErrorScreen.tsx
993
- var import_jsx_runtime2 = require("react/jsx-runtime");
994
- var ErrorScreen = ({ title, description }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-full h-full md:rounded-2xl! aspect-video bg-black", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-[#151515] text-white w-full h-full flex justify-stretch items-center", children: [
995
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
996
- "svg",
997
- {
998
- className: "w-24 h-24 m-6",
999
- fill: "none",
1000
- stroke: "currentColor",
1001
- strokeWidth: "2",
1002
- style: { width: 96 },
1003
- viewBox: "0 0 24 24",
1004
- xmlns: "http://www.w3.org/2000/svg",
1005
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1006
- "path",
1007
- {
1008
- d: "M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z",
1009
- strokeLinecap: "round",
1010
- strokeLinejoin: "round"
1011
- }
1012
- )
2681
+ .md\\:text-sm {
2682
+ @media (width >= 48rem) {
2683
+ font-size: var(--text-sm);
2684
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1013
2685
  }
1014
- ),
1015
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
1016
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "text-2xl mb-2", children: title || "Playback Error" }),
1017
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-lg", children: description || "Unable to play the video. Please try again later." })
1018
- ] })
1019
- ] }) });
1020
-
1021
- // src/components/Title.tsx
1022
- var import_jsx_runtime3 = require("react/jsx-runtime");
1023
- var Title = ({ title }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: "text-white text-xl font-semibold", children: title }) });
1024
-
1025
- // src/components/LiveBadge.tsx
1026
- var import_jsx_runtime4 = require("react/jsx-runtime");
1027
- var LiveBadge = ({
1028
- isVisible,
1029
- position = "top-right",
1030
- className = "",
1031
- style = {},
1032
- text = "LIVE"
1033
- }) => {
1034
- if (!isVisible) return null;
1035
- const positionClasses = {
1036
- "top-left": "top-4 left-4",
1037
- "top-right": "top-4 right-4",
1038
- "bottom-left": "bottom-4 left-4",
1039
- "bottom-right": "bottom-4 right-4"
1040
- };
1041
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
1042
- "div",
1043
- {
1044
- className: `
1045
- absolute z-50
1046
- ${positionClasses[position]}
1047
- bg-red-600 text-white
1048
- px-2 py-1
1049
- rounded-md
1050
- text-xs font-bold
1051
- uppercase tracking-wide
1052
- shadow-lg
1053
- animate-pulse
1054
- pointer-events-none
1055
- ${className}
1056
- `,
1057
- style,
1058
- children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex items-center gap-1", children: [
1059
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "w-2 h-2 bg-white rounded-full animate-pulse" }),
1060
- text
1061
- ] })
2686
+ }
2687
+ .md\\:text-xl {
2688
+ @media (width >= 48rem) {
2689
+ font-size: var(--text-xl);
2690
+ line-height: var(--tw-leading, var(--text-xl--line-height));
1062
2691
  }
1063
- );
1064
- };
1065
-
1066
- // src/styles.css
1067
- styleInject('/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root,\n :host {\n --font-sans:\n ui-sans-serif,\n system-ui,\n sans-serif,\n "Apple Color Emoji",\n "Segoe UI Emoji",\n "Segoe UI Symbol",\n "Noto Color Emoji";\n --font-mono:\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n Consolas,\n "Liberation Mono",\n "Courier New",\n monospace;\n --color-red-600: oklch(57.7% 0.245 27.325);\n --color-black: #000;\n --color-white: #fff;\n --spacing: 0.25rem;\n --text-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-base: 1rem;\n --text-base--line-height: calc(1.5 / 1);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-xl: 1.25rem;\n --text-xl--line-height: calc(1.75 / 1.25);\n --text-2xl: 1.5rem;\n --text-2xl--line-height: calc(2 / 1.5);\n --text-5xl: 3rem;\n --text-5xl--line-height: 1;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --tracking-wide: 0.025em;\n --tracking-widest: 0.1em;\n --radius-md: 0.375rem;\n --radius-2xl: 1rem;\n --animate-spin: spin 1s linear infinite;\n --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n --aspect-video: 16 / 9;\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n }\n}\n@layer base {\n *,\n ::after,\n ::before,\n ::backdrop,\n ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html,\n :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b,\n strong {\n font-weight: bolder;\n }\n code,\n kbd,\n samp,\n pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub,\n sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol,\n ul,\n menu {\n list-style: none;\n }\n img,\n svg,\n video,\n canvas,\n audio,\n iframe,\n embed,\n object {\n display: block;\n vertical-align: middle;\n }\n img,\n video {\n max-width: 100%;\n height: auto;\n }\n button,\n input,\n select,\n optgroup,\n textarea,\n ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit,\n ::-webkit-datetime-edit-year-field,\n ::-webkit-datetime-edit-month-field,\n ::-webkit-datetime-edit-day-field,\n ::-webkit-datetime-edit-hour-field,\n ::-webkit-datetime-edit-minute-field,\n ::-webkit-datetime-edit-second-field,\n ::-webkit-datetime-edit-millisecond-field,\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button,\n input:where([type=button], [type=reset], [type=submit]),\n ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button,\n ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=until-found])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-auto {\n pointer-events: auto;\n }\n .pointer-events-none {\n pointer-events: none;\n }\n .visible {\n visibility: visible;\n }\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .static {\n position: static;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .top-4 {\n top: calc(var(--spacing) * 4);\n }\n .right-0 {\n right: calc(var(--spacing) * 0);\n }\n .right-4 {\n right: calc(var(--spacing) * 4);\n }\n .bottom-0 {\n bottom: calc(var(--spacing) * 0);\n }\n .bottom-4 {\n bottom: calc(var(--spacing) * 4);\n }\n .left-0 {\n left: calc(var(--spacing) * 0);\n }\n .left-4 {\n left: calc(var(--spacing) * 4);\n }\n .z-10 {\n z-index: 10;\n }\n .z-50 {\n z-index: 50;\n }\n .container {\n width: 100%;\n @media (width >= 40rem) {\n max-width: 40rem;\n }\n @media (width >= 48rem) {\n max-width: 48rem;\n }\n @media (width >= 64rem) {\n max-width: 64rem;\n }\n @media (width >= 80rem) {\n max-width: 80rem;\n }\n @media (width >= 96rem) {\n max-width: 96rem;\n }\n }\n .m-6 {\n margin: calc(var(--spacing) * 6);\n }\n .mt-1 {\n margin-top: calc(var(--spacing) * 1);\n }\n .mt-3 {\n margin-top: calc(var(--spacing) * 3);\n }\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n .mb-6 {\n margin-bottom: calc(var(--spacing) * 6);\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .hidden {\n display: none;\n }\n .aspect-video {\n aspect-ratio: var(--aspect-video);\n }\n .h-2 {\n height: calc(var(--spacing) * 2);\n }\n .h-12 {\n height: calc(var(--spacing) * 12);\n }\n .h-24 {\n height: calc(var(--spacing) * 24);\n }\n .h-full {\n height: 100%;\n }\n .w-2 {\n width: calc(var(--spacing) * 2);\n }\n .w-12 {\n width: calc(var(--spacing) * 12);\n }\n .w-24 {\n width: calc(var(--spacing) * 24);\n }\n .w-full {\n width: 100%;\n }\n .animate-pulse {\n animation: var(--animate-pulse);\n }\n .animate-spin {\n animation: var(--animate-spin);\n }\n .auto-cols-max {\n grid-auto-columns: max-content;\n }\n .grid-flow-col {\n grid-auto-flow: column;\n }\n .flex-col {\n flex-direction: column;\n }\n .items-center {\n align-items: center;\n }\n .justify-center {\n justify-content: center;\n }\n .justify-stretch {\n justify-content: stretch;\n }\n .gap-1 {\n gap: calc(var(--spacing) * 1);\n }\n .gap-5 {\n gap: calc(var(--spacing) * 5);\n }\n .overflow-hidden {\n overflow: hidden;\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-md {\n border-radius: var(--radius-md);\n }\n .bg-\\[\\#151515\\] {\n background-color: #151515;\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-red-600 {\n background-color: var(--color-red-600);\n }\n .bg-white {\n background-color: var(--color-white);\n }\n .bg-gradient-to-t {\n --tw-gradient-position: to top in oklab;\n background-image: linear-gradient(var(--tw-gradient-stops));\n }\n .from-black\\/70 {\n --tw-gradient-from: color-mix(in srgb, #000 70%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-gradient-from: color-mix(in oklab, var(--color-black) 70%, transparent);\n }\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n .to-transparent {\n --tw-gradient-to: transparent;\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n .bg-cover {\n background-size: cover;\n }\n .bg-center {\n background-position: center;\n }\n .bg-no-repeat {\n background-repeat: no-repeat;\n }\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n .py-1 {\n padding-block: calc(var(--spacing) * 1);\n }\n .text-center {\n text-align: center;\n }\n .text-left {\n text-align: left;\n }\n .font-mono {\n font-family: var(--font-mono);\n }\n .text-2xl {\n font-size: var(--text-2xl);\n line-height: var(--tw-leading, var(--text-2xl--line-height));\n }\n .text-5xl {\n font-size: var(--text-5xl);\n line-height: var(--tw-leading, var(--text-5xl--line-height));\n }\n .text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n .text-\\[10px\\] {\n font-size: 10px;\n }\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .tracking-wide {\n --tw-tracking: var(--tracking-wide);\n letter-spacing: var(--tracking-wide);\n }\n .tracking-widest {\n --tw-tracking: var(--tracking-widest);\n letter-spacing: var(--tracking-widest);\n }\n .text-white {\n color: var(--color-white);\n }\n .uppercase {\n text-transform: uppercase;\n }\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .filter {\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .md\\:rounded-2xl {\n @media (width >= 48rem) {\n border-radius: var(--radius-2xl);\n }\n }\n .md\\:rounded-2xl\\! {\n @media (width >= 48rem) {\n border-radius: var(--radius-2xl) !important;\n }\n }\n .md\\:text-base {\n @media (width >= 48rem) {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n }\n .md\\:text-sm {\n @media (width >= 48rem) {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n }\n .md\\:text-xl {\n @media (width >= 48rem) {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n }\n}\n@layer components {\n .motto-video-container {\n position: relative;\n width: 100%;\n min-height: 300px;\n }\n @supports (aspect-ratio: 16/9) {\n .motto-video-container {\n min-height: auto;\n }\n }\n .motto-video-responsive {\n position: absolute;\n top: calc(var(--spacing) * 0);\n left: calc(var(--spacing) * 0);\n height: 100%;\n width: 100%;\n }\n .motto-skip-button {\n position: absolute;\n top: calc(1/2 * 100%);\n z-index: 10;\n display: flex;\n height: calc(var(--spacing) * 16);\n width: calc(var(--spacing) * 16);\n --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border-radius: calc(infinity * 1px);\n border-style: var(--tw-border-style);\n border-width: 0px;\n background-color: color-mix(in srgb, #000 70%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 70%, transparent);\n }\n font-size: var(--text-2xl);\n line-height: var(--tw-leading, var(--text-2xl--line-height));\n color: var(--color-white);\n opacity: 80%;\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n --tw-duration: 200ms;\n transition-duration: 200ms;\n &:hover {\n @media (hover: hover) {\n --tw-scale-x: 110%;\n --tw-scale-y: 110%;\n --tw-scale-z: 110%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n }\n &:hover {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n &:active {\n --tw-scale-x: 95%;\n --tw-scale-y: 95%;\n --tw-scale-z: 95%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n }\n .motto-skip-button-back {\n left: calc(var(--spacing) * 5);\n }\n .motto-skip-button-forward {\n right: calc(var(--spacing) * 5);\n }\n .motto-mobile-controls-overlay {\n position: absolute;\n inset: calc(var(--spacing) * 0);\n z-index: 20;\n display: flex;\n align-items: center;\n justify-content: center;\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n --tw-duration: 300ms;\n transition-duration: 300ms;\n pointer-events: none;\n }\n .motto-mobile-controls-group {\n display: flex;\n align-items: center;\n gap: calc(var(--spacing) * 8);\n opacity: 100%;\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n --tw-duration: 200ms;\n transition-duration: 200ms;\n pointer-events: none;\n }\n .motto-mobile-play-button {\n display: flex;\n height: calc(var(--spacing) * 14);\n width: calc(var(--spacing) * 14);\n cursor: pointer;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: calc(infinity * 1px);\n border-style: var(--tw-border-style);\n border-width: 0px;\n background-color: color-mix(in srgb, #000 30%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 30%, transparent);\n }\n color: var(--color-white);\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n --tw-duration: 200ms;\n transition-duration: 200ms;\n pointer-events: auto;\n }\n .motto-mobile-play-button:active {\n --tw-scale-x: 95%;\n --tw-scale-y: 95%;\n --tw-scale-z: 95%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .motto-mobile-play-button svg {\n height: calc(var(--spacing) * 7);\n width: calc(var(--spacing) * 7);\n }\n .motto-mobile-skip-button {\n display: flex;\n height: calc(var(--spacing) * 10);\n width: calc(var(--spacing) * 10);\n cursor: pointer;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: calc(infinity * 1px);\n border-style: var(--tw-border-style);\n border-width: 0px;\n background-color: color-mix(in srgb, #000 30%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 30%, transparent);\n }\n color: var(--color-white);\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n --tw-duration: 200ms;\n transition-duration: 200ms;\n pointer-events: auto;\n }\n .motto-mobile-skip-button:active {\n --tw-scale-x: 95%;\n --tw-scale-y: 95%;\n --tw-scale-z: 95%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n .motto-mobile-skip-button svg {\n height: calc(var(--spacing) * 6);\n width: calc(var(--spacing) * 6);\n }\n}\n@media (min-width: 768px) {\n .motto-mobile-controls-overlay {\n display: none !important;\n }\n}\n@media (max-width: 767px) {\n .shaka-controls-container .motto-native-skip-button,\n .shaka-controls-container .motto-skip-back-button,\n .shaka-controls-container .motto-skip-forward-button,\n .shaka-controls-container .shaka-button[title*="Skip back"],\n .shaka-controls-container .shaka-button[title*="Skip forward"],\n .shaka-controls-container .shaka-button[aria-label*="Skip back"],\n .shaka-controls-container .shaka-button[aria-label*="Skip forward"],\n .shaka-controls-container button[title*="Skip back"],\n .shaka-controls-container button[title*="Skip forward"],\n .shaka-controls-container button[aria-label*="Skip back"],\n .shaka-controls-container button[aria-label*="Skip forward"],\n .motto-native-skip-button:not(.motto-mobile-skip-button),\n .motto-skip-back-button:not(.motto-mobile-skip-button),\n .motto-skip-forward-button:not(.motto-mobile-skip-button),\n .shaka-button[title*="Skip back"]:not(.motto-mobile-skip-button),\n .shaka-button[title*="Skip forward"]:not(.motto-mobile-skip-button),\n .shaka-button[aria-label*="Skip back"]:not(.motto-mobile-skip-button),\n .shaka-button[aria-label*="Skip forward"]:not(.motto-mobile-skip-button),\n button[title*="Skip back"]:not(.motto-mobile-skip-button),\n button[title*="Skip forward"]:not(.motto-mobile-skip-button),\n button[aria-label*="Skip back"]:not(.motto-mobile-skip-button),\n button[aria-label*="Skip forward"]:not(.motto-mobile-skip-button) {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n width: 0 !important;\n height: 0 !important;\n padding: 0 !important;\n margin: 0 !important;\n }\n .motto-mobile-skip-button {\n display: flex !important;\n visibility: visible !important;\n opacity: 1 !important;\n }\n}\n.shaka-seek-bar-container {\n height: 6px !important;\n width: 100% !important;\n margin: 8px 0 !important;\n border-radius: 4px !important;\n position: relative !important;\n border-top: none !important;\n border-bottom: none !important;\n box-shadow: none !important;\n}\n.shaka-seek-bar {\n height: 6px !important;\n width: 100% !important;\n -webkit-appearance: none !important;\n appearance: none !important;\n background: transparent !important;\n cursor: pointer !important;\n border: none !important;\n outline: none !important;\n position: absolute !important;\n top: 0 !important;\n left: 0 !important;\n border-radius: 4px !important;\n}\n.shaka-seek-bar::-webkit-slider-runnable-track {\n height: 6px !important;\n background: transparent !important;\n border-radius: 4px !important;\n border: none !important;\n}\n.shaka-seek-bar::-moz-range-track {\n height: 6px !important;\n background: transparent !important;\n border-radius: 4px !important;\n border: none !important;\n}\n.shaka-seek-bar::-webkit-slider-thumb {\n -webkit-appearance: none !important;\n appearance: none !important;\n width: 16px !important;\n height: 16px !important;\n border-radius: 50% !important;\n background: #ffffff !important;\n cursor: pointer !important;\n border: 2px solid #ffffff !important;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;\n margin-top: -4px !important;\n}\n.shaka-seek-bar::-moz-range-thumb {\n width: 16px !important;\n height: 16px !important;\n border-radius: 50% !important;\n background: #ffffff !important;\n cursor: pointer !important;\n border: 2px solid #ffffff !important;\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;\n margin-top: -4px !important;\n}\n.motto-skip-back-button,\n.motto-skip-forward-button,\n.motto-native-skip-button {\n background: transparent !important;\n border: none !important;\n padding: 4px !important;\n margin: 0px !important;\n cursor: pointer !important;\n color: #ffffff !important;\n transition: all 0.2s ease !important;\n min-width: 32px !important;\n height: 32px !important;\n display: flex !important;\n align-items: center !important;\n justify-content: center !important;\n border-radius: 4px !important;\n width: 25px;\n}\n.motto-skip-back-button:hover,\n.motto-skip-forward-button:hover,\n.motto-native-skip-button:hover {\n opacity: 0.8 !important;\n background: transparent !important;\n transform: scale(1.05) !important;\n}\n.motto-skip-back-button:active,\n.motto-skip-forward-button:active,\n.motto-native-skip-button:active {\n transform: scale(0.95) !important;\n}\n.motto-skip-back-button svg,\n.motto-skip-forward-button svg,\n.motto-native-skip-button svg {\n width: 24px !important;\n height: 24px !important;\n}\n@media (max-width: 767px) {\n .shaka-controls-container .motto-native-skip-button,\n .shaka-controls-container .motto-skip-back-button,\n .shaka-controls-container .motto-skip-forward-button,\n .shaka-controls-container .shaka-play-button,\n .shaka-controls-container .shaka-pause-button {\n display: none !important;\n }\n}\n.shaka-spinner-svg {\n color: white !important;\n fill: white !important;\n}\n.shaka-spinner-path {\n stroke: white !important;\n fill: none !important;\n}\n.shaka-spinner-container {\n color: white !important;\n}\n.shaka-buffering-spinner {\n color: white !important;\n fill: white !important;\n}\n.shaka-buffering-spinner svg {\n color: white !important;\n fill: white !important;\n}\n.shaka-buffering-spinner path {\n stroke: white !important;\n fill: none !important;\n}\n[data-shaka-player-container] .shaka-spinner,\n[data-shaka-player-container] .spinner {\n color: white !important;\n border-color: white !important;\n}\n.material-icons.shaka-spinner {\n color: white !important;\n}\n.shaka-controls-container .shaka-spinner,\n.shaka-video-container .shaka-spinner {\n color: white !important;\n fill: white !important;\n}\n.shaka-controls-container .shaka-spinner svg,\n.shaka-video-container .shaka-spinner svg {\n color: white !important;\n fill: white !important;\n}\n.shaka-controls-container .shaka-spinner path,\n.shaka-video-container .shaka-spinner path {\n stroke: white !important;\n}\n.motto-video-loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background:\n linear-gradient(\n 135deg,\n #1a1a1a 0%,\n #2d2d2d 100%);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 10;\n transition: opacity 0.3s ease;\n}\n.motto-video-loading-overlay.hidden {\n opacity: 0;\n pointer-events: none;\n}\n.motto-video-loading-content {\n text-align: center;\n color: white;\n}\n.motto-video-loading-icon {\n width: 64px;\n height: 64px;\n margin-bottom: 16px;\n opacity: 0.7;\n}\n.motto-video-loading-text {\n font-size: 16px;\n font-weight: 500;\n margin-bottom: 8px;\n}\n.motto-video-loading-subtext {\n font-size: 14px;\n opacity: 0.7;\n}\n@keyframes pulse-live {\n 0% {\n opacity: 1;\n transform: scale(1);\n }\n 50% {\n opacity: 0.7;\n transform: scale(1.1);\n }\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n@property --tw-gradient-position { syntax: "*"; inherits: false; }\n@property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-via { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-to { syntax: "<color>"; inherits: false; initial-value: #0000; }\n@property --tw-gradient-stops { syntax: "*"; inherits: false; }\n@property --tw-gradient-via-stops { syntax: "*"; inherits: false; }\n@property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }\n@property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }\n@property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-font-weight { syntax: "*"; inherits: false; }\n@property --tw-tracking { syntax: "*"; inherits: false; }\n@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-ring-color { syntax: "*"; inherits: false; }\n@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-ring-color { syntax: "*"; inherits: false; }\n@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-ring-inset { syntax: "*"; inherits: false; }\n@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }\n@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }\n@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-blur { syntax: "*"; inherits: false; }\n@property --tw-brightness { syntax: "*"; inherits: false; }\n@property --tw-contrast { syntax: "*"; inherits: false; }\n@property --tw-grayscale { syntax: "*"; inherits: false; }\n@property --tw-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-invert { syntax: "*"; inherits: false; }\n@property --tw-opacity { syntax: "*"; inherits: false; }\n@property --tw-saturate { syntax: "*"; inherits: false; }\n@property --tw-sepia { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }\n@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }\n@property --tw-duration { syntax: "*"; inherits: false; }\n@property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; }\n@property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *,\n ::before,\n ::after,\n ::backdrop {\n --tw-gradient-position: initial;\n --tw-gradient-from: #0000;\n --tw-gradient-via: #0000;\n --tw-gradient-to: #0000;\n --tw-gradient-stops: initial;\n --tw-gradient-via-stops: initial;\n --tw-gradient-from-position: 0%;\n --tw-gradient-via-position: 50%;\n --tw-gradient-to-position: 100%;\n --tw-font-weight: initial;\n --tw-tracking: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-border-style: solid;\n --tw-duration: initial;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n }\n }\n}\n');
2692
+ }
2693
+ }
2694
+ @layer components {
2695
+ video::-webkit-media-controls {
2696
+ display: none !important;
2697
+ }
2698
+ video::-webkit-media-controls-panel {
2699
+ display: none !important;
2700
+ }
2701
+ video::-webkit-media-controls-play-button {
2702
+ display: none !important;
2703
+ }
2704
+ video::-webkit-media-controls-timeline {
2705
+ display: none !important;
2706
+ }
2707
+ video::-webkit-media-controls-current-time-display {
2708
+ display: none !important;
2709
+ }
2710
+ video::-webkit-media-controls-time-remaining-display {
2711
+ display: none !important;
2712
+ }
2713
+ video::-webkit-media-controls-mute-button {
2714
+ display: none !important;
2715
+ }
2716
+ video::-webkit-media-controls-volume-slider {
2717
+ display: none !important;
2718
+ }
2719
+ video::-webkit-media-controls-fullscreen-button {
2720
+ display: none !important;
2721
+ }
2722
+ video::-webkit-media-controls-overlay-play-button {
2723
+ display: none !important;
2724
+ }
2725
+ video::-moz-media-controls {
2726
+ display: none !important;
2727
+ }
2728
+ video {
2729
+ outline: none !important;
2730
+ }
2731
+ video[controls] {
2732
+ -webkit-appearance: none !important;
2733
+ appearance: none !important;
2734
+ }
2735
+ video::-webkit-media-controls-enclosure {
2736
+ display: none !important;
2737
+ }
2738
+ video::-webkit-media-controls-start-playback-button {
2739
+ display: none !important;
2740
+ }
2741
+ video[controls]::-webkit-media-controls,
2742
+ video[controls]::-webkit-media-controls-panel,
2743
+ video[controls]::-webkit-media-controls-play-button,
2744
+ video[controls]::-webkit-media-controls-timeline,
2745
+ video[controls]::-webkit-media-controls-current-time-display,
2746
+ video[controls]::-webkit-media-controls-time-remaining-display,
2747
+ video[controls]::-webkit-media-controls-mute-button,
2748
+ video[controls]::-webkit-media-controls-volume-slider,
2749
+ video[controls]::-webkit-media-controls-fullscreen-button,
2750
+ video[controls]::-webkit-media-controls-overlay-play-button,
2751
+ video[controls]::-webkit-media-controls-enclosure,
2752
+ video[controls]::-webkit-media-controls-start-playback-button {
2753
+ display: none !important;
2754
+ visibility: hidden !important;
2755
+ opacity: 0 !important;
2756
+ pointer-events: none !important;
2757
+ }
2758
+ video[controls]::-moz-media-controls {
2759
+ display: none !important;
2760
+ visibility: hidden !important;
2761
+ opacity: 0 !important;
2762
+ }
2763
+ .motto-video-container {
2764
+ position: relative;
2765
+ width: 100%;
2766
+ min-height: 300px;
2767
+ }
2768
+ @supports (aspect-ratio: 16/9) {
2769
+ .motto-video-container {
2770
+ min-height: auto;
2771
+ }
2772
+ }
2773
+ .motto-video-responsive {
2774
+ position: absolute;
2775
+ top: calc(var(--spacing) * 0);
2776
+ left: calc(var(--spacing) * 0);
2777
+ height: 100%;
2778
+ width: 100%;
2779
+ }
2780
+ .motto-skip-button {
2781
+ position: absolute;
2782
+ top: calc(1/2 * 100%);
2783
+ z-index: 10;
2784
+ display: flex;
2785
+ height: calc(var(--spacing) * 16);
2786
+ width: calc(var(--spacing) * 16);
2787
+ --tw-translate-y: calc(calc(1/2 * 100%) * -1);
2788
+ translate: var(--tw-translate-x) var(--tw-translate-y);
2789
+ cursor: pointer;
2790
+ align-items: center;
2791
+ justify-content: center;
2792
+ border-radius: calc(infinity * 1px);
2793
+ border-style: var(--tw-border-style);
2794
+ border-width: 0px;
2795
+ background-color: color-mix(in srgb, #000 70%, transparent);
2796
+ @supports (color: color-mix(in lab, red, red)) {
2797
+ background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
2798
+ }
2799
+ font-size: var(--text-2xl);
2800
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
2801
+ color: var(--color-white);
2802
+ opacity: 80%;
2803
+ transition-property: all;
2804
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2805
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2806
+ --tw-duration: 200ms;
2807
+ transition-duration: 200ms;
2808
+ &:hover {
2809
+ @media (hover: hover) {
2810
+ --tw-scale-x: 110%;
2811
+ --tw-scale-y: 110%;
2812
+ --tw-scale-z: 110%;
2813
+ scale: var(--tw-scale-x) var(--tw-scale-y);
2814
+ }
2815
+ }
2816
+ &:hover {
2817
+ @media (hover: hover) {
2818
+ opacity: 100%;
2819
+ }
2820
+ }
2821
+ &:active {
2822
+ --tw-scale-x: 95%;
2823
+ --tw-scale-y: 95%;
2824
+ --tw-scale-z: 95%;
2825
+ scale: var(--tw-scale-x) var(--tw-scale-y);
2826
+ }
2827
+ }
2828
+ .motto-skip-button-back {
2829
+ left: calc(var(--spacing) * 5);
2830
+ }
2831
+ .motto-skip-button-forward {
2832
+ right: calc(var(--spacing) * 5);
2833
+ }
2834
+ }
2835
+ .shaka-seek-bar-container {
2836
+ height: 6px !important;
2837
+ width: 100% !important;
2838
+ margin: 8px 0 !important;
2839
+ border-radius: 4px !important;
2840
+ position: relative !important;
2841
+ border-top: none !important;
2842
+ border-bottom: none !important;
2843
+ box-shadow: none !important;
2844
+ }
2845
+ .shaka-seek-bar {
2846
+ height: 6px !important;
2847
+ width: 100% !important;
2848
+ -webkit-appearance: none !important;
2849
+ appearance: none !important;
2850
+ background: transparent !important;
2851
+ cursor: pointer !important;
2852
+ border: none !important;
2853
+ outline: none !important;
2854
+ position: absolute !important;
2855
+ top: 0 !important;
2856
+ left: 0 !important;
2857
+ border-radius: 4px !important;
2858
+ }
2859
+ .shaka-seek-bar::-webkit-slider-runnable-track {
2860
+ height: 6px !important;
2861
+ background: transparent !important;
2862
+ border-radius: 4px !important;
2863
+ border: none !important;
2864
+ }
2865
+ .shaka-seek-bar::-moz-range-track {
2866
+ height: 6px !important;
2867
+ background: transparent !important;
2868
+ border-radius: 4px !important;
2869
+ border: none !important;
2870
+ }
2871
+ .shaka-seek-bar::-webkit-slider-thumb {
2872
+ -webkit-appearance: none !important;
2873
+ appearance: none !important;
2874
+ width: 16px !important;
2875
+ height: 16px !important;
2876
+ border-radius: 50% !important;
2877
+ background: #ffffff !important;
2878
+ cursor: pointer !important;
2879
+ border: 2px solid #ffffff !important;
2880
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
2881
+ margin-top: -4px !important;
2882
+ }
2883
+ .shaka-seek-bar::-moz-range-thumb {
2884
+ width: 16px !important;
2885
+ height: 16px !important;
2886
+ border-radius: 50% !important;
2887
+ background: #ffffff !important;
2888
+ cursor: pointer !important;
2889
+ border: 2px solid #ffffff !important;
2890
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
2891
+ margin-top: -4px !important;
2892
+ }
2893
+ .motto-skip-back-button,
2894
+ .motto-skip-forward-button,
2895
+ .motto-native-skip-button {
2896
+ background: transparent !important;
2897
+ border: none !important;
2898
+ padding: 4px !important;
2899
+ margin: 0px !important;
2900
+ cursor: pointer !important;
2901
+ color: #ffffff !important;
2902
+ transition: all 0.2s ease !important;
2903
+ min-width: 32px !important;
2904
+ height: 32px !important;
2905
+ display: flex !important;
2906
+ align-items: center !important;
2907
+ justify-content: center !important;
2908
+ border-radius: 4px !important;
2909
+ width: 25px;
2910
+ }
2911
+ .motto-skip-back-button:hover,
2912
+ .motto-skip-forward-button:hover,
2913
+ .motto-native-skip-button:hover {
2914
+ opacity: 0.8 !important;
2915
+ background: transparent !important;
2916
+ transform: scale(1.05) !important;
2917
+ }
2918
+ .motto-skip-back-button:active,
2919
+ .motto-skip-forward-button:active,
2920
+ .motto-native-skip-button:active {
2921
+ transform: scale(0.95) !important;
2922
+ }
2923
+ .motto-skip-back-button svg,
2924
+ .motto-skip-forward-button svg,
2925
+ .motto-native-skip-button svg {
2926
+ width: 24px !important;
2927
+ height: 24px !important;
2928
+ }
2929
+ .shaka-spinner-svg {
2930
+ color: white !important;
2931
+ fill: white !important;
2932
+ }
2933
+ .shaka-spinner-path {
2934
+ stroke: white !important;
2935
+ fill: none !important;
2936
+ }
2937
+ .shaka-spinner-container {
2938
+ color: white !important;
2939
+ }
2940
+ .shaka-buffering-spinner {
2941
+ color: white !important;
2942
+ fill: white !important;
2943
+ }
2944
+ .shaka-buffering-spinner svg {
2945
+ color: white !important;
2946
+ fill: white !important;
2947
+ }
2948
+ .shaka-buffering-spinner path {
2949
+ stroke: white !important;
2950
+ fill: none !important;
2951
+ }
2952
+ [data-shaka-player-container] .shaka-spinner,
2953
+ [data-shaka-player-container] .spinner {
2954
+ color: white !important;
2955
+ border-color: white !important;
2956
+ }
2957
+ .material-icons.shaka-spinner {
2958
+ color: white !important;
2959
+ }
2960
+ .shaka-controls-container .shaka-spinner,
2961
+ .shaka-video-container .shaka-spinner {
2962
+ color: white !important;
2963
+ fill: white !important;
2964
+ }
2965
+ .shaka-controls-container .shaka-spinner svg,
2966
+ .shaka-video-container .shaka-spinner svg {
2967
+ color: white !important;
2968
+ fill: white !important;
2969
+ }
2970
+ .shaka-controls-container .shaka-spinner path,
2971
+ .shaka-video-container .shaka-spinner path {
2972
+ stroke: white !important;
2973
+ }
2974
+ .motto-video-loading-overlay {
2975
+ position: absolute;
2976
+ top: 0;
2977
+ left: 0;
2978
+ width: 100%;
2979
+ height: 100%;
2980
+ background:
2981
+ linear-gradient(
2982
+ 135deg,
2983
+ #1a1a1a 0%,
2984
+ #2d2d2d 100%);
2985
+ display: flex;
2986
+ flex-direction: column;
2987
+ align-items: center;
2988
+ justify-content: center;
2989
+ z-index: 10;
2990
+ transition: opacity 0.3s ease;
2991
+ }
2992
+ .motto-video-loading-overlay.hidden {
2993
+ opacity: 0;
2994
+ pointer-events: none;
2995
+ }
2996
+ .motto-video-loading-content {
2997
+ text-align: center;
2998
+ color: white;
2999
+ }
3000
+ .motto-video-loading-icon {
3001
+ width: 64px;
3002
+ height: 64px;
3003
+ margin-bottom: 16px;
3004
+ opacity: 0.7;
3005
+ }
3006
+ .motto-video-loading-text {
3007
+ font-size: 16px;
3008
+ font-weight: 500;
3009
+ margin-bottom: 8px;
3010
+ }
3011
+ .motto-video-loading-subtext {
3012
+ font-size: 14px;
3013
+ opacity: 0.7;
3014
+ }
3015
+ @keyframes pulse-live {
3016
+ 0% {
3017
+ opacity: 1;
3018
+ transform: scale(1);
3019
+ }
3020
+ 50% {
3021
+ opacity: 0.7;
3022
+ transform: scale(1.1);
3023
+ }
3024
+ 100% {
3025
+ opacity: 1;
3026
+ transform: scale(1);
3027
+ }
3028
+ }
3029
+ .shaka-play-button {
3030
+ background: rgba(255, 255, 255, 0.1) !important;
3031
+ border: none !important;
3032
+ color: white !important;
3033
+ padding: 10px !important;
3034
+ border-radius: 100% !important;
3035
+ transition: all 0.2s ease !important;
3036
+ display: flex !important;
3037
+ align-items: center !important;
3038
+ justify-content: center !important;
3039
+ min-width: 55px !important;
3040
+ height: 55px !important;
3041
+ }
3042
+ .shaka-play-button-container {
3043
+ background: transparent;
3044
+ transition: all 0.2s ease !important;
3045
+ }
3046
+ .motto-video-container:not(.no-cursor) .shaka-play-button-container {
3047
+ background: rgba(0, 0, 0, 0.3);
3048
+ transition: all 0.s ease !important;
3049
+ }
3050
+ .shaka-play-button:hover {
3051
+ background: rgba(255, 255, 255, 0.2) !important;
3052
+ transform: scale(1.05) !important;
3053
+ }
3054
+ .shaka-play-button:active {
3055
+ transform: scale(0.95) !important;
3056
+ }
3057
+ .shaka-play-button > * {
3058
+ display: none !important;
3059
+ }
3060
+ .shaka-play-button::after {
3061
+ content: "" !important;
3062
+ width: 35px !important;
3063
+ height: 35px !important;
3064
+ background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path fill-rule="evenodd" d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z" clip-rule="evenodd" /></svg>') !important;
3065
+ background-repeat: no-repeat !important;
3066
+ background-size: contain !important;
3067
+ background-position: center !important;
3068
+ display: block !important;
3069
+ }
3070
+ .shaka-play-button[aria-label*=Play]::after {
3071
+ background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path fill-rule="evenodd" d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z" clip-rule="evenodd" /></svg>') !important;
3072
+ }
3073
+ .shaka-play-button[aria-label*=Pause]::after {
3074
+ background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path fill-rule="evenodd" d="M6.75 5.25a.75.75 0 0 1 .75-.75H9a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H7.5a.75.75 0 0 1-.75-.75V5.25Zm7.5 0A.75.75 0 0 1 15 4.5h1.5a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H15a.75.75 0 0 1-.75-.75V5.25Z" clip-rule="evenodd" /></svg>') !important;
3075
+ }
3076
+ @property --tw-gradient-position { syntax: "*"; inherits: false; }
3077
+ @property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; }
3078
+ @property --tw-gradient-via { syntax: "<color>"; inherits: false; initial-value: #0000; }
3079
+ @property --tw-gradient-to { syntax: "<color>"; inherits: false; initial-value: #0000; }
3080
+ @property --tw-gradient-stops { syntax: "*"; inherits: false; }
3081
+ @property --tw-gradient-via-stops { syntax: "*"; inherits: false; }
3082
+ @property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }
3083
+ @property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }
3084
+ @property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }
3085
+ @property --tw-font-weight { syntax: "*"; inherits: false; }
3086
+ @property --tw-tracking { syntax: "*"; inherits: false; }
3087
+ @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
3088
+ @property --tw-shadow-color { syntax: "*"; inherits: false; }
3089
+ @property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
3090
+ @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
3091
+ @property --tw-inset-shadow-color { syntax: "*"; inherits: false; }
3092
+ @property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
3093
+ @property --tw-ring-color { syntax: "*"; inherits: false; }
3094
+ @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
3095
+ @property --tw-inset-ring-color { syntax: "*"; inherits: false; }
3096
+ @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
3097
+ @property --tw-ring-inset { syntax: "*"; inherits: false; }
3098
+ @property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }
3099
+ @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
3100
+ @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
3101
+ @property --tw-blur { syntax: "*"; inherits: false; }
3102
+ @property --tw-brightness { syntax: "*"; inherits: false; }
3103
+ @property --tw-contrast { syntax: "*"; inherits: false; }
3104
+ @property --tw-grayscale { syntax: "*"; inherits: false; }
3105
+ @property --tw-hue-rotate { syntax: "*"; inherits: false; }
3106
+ @property --tw-invert { syntax: "*"; inherits: false; }
3107
+ @property --tw-opacity { syntax: "*"; inherits: false; }
3108
+ @property --tw-saturate { syntax: "*"; inherits: false; }
3109
+ @property --tw-sepia { syntax: "*"; inherits: false; }
3110
+ @property --tw-drop-shadow { syntax: "*"; inherits: false; }
3111
+ @property --tw-drop-shadow-color { syntax: "*"; inherits: false; }
3112
+ @property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
3113
+ @property --tw-drop-shadow-size { syntax: "*"; inherits: false; }
3114
+ @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
3115
+ @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
3116
+ @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
3117
+ @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
3118
+ @property --tw-duration { syntax: "*"; inherits: false; }
3119
+ @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; }
3120
+ @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; }
3121
+ @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }
3122
+ @keyframes spin {
3123
+ to {
3124
+ transform: rotate(360deg);
3125
+ }
3126
+ }
3127
+ @keyframes pulse {
3128
+ 50% {
3129
+ opacity: 0.5;
3130
+ }
3131
+ }
3132
+ @layer properties {
3133
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
3134
+ *,
3135
+ ::before,
3136
+ ::after,
3137
+ ::backdrop {
3138
+ --tw-gradient-position: initial;
3139
+ --tw-gradient-from: #0000;
3140
+ --tw-gradient-via: #0000;
3141
+ --tw-gradient-to: #0000;
3142
+ --tw-gradient-stops: initial;
3143
+ --tw-gradient-via-stops: initial;
3144
+ --tw-gradient-from-position: 0%;
3145
+ --tw-gradient-via-position: 50%;
3146
+ --tw-gradient-to-position: 100%;
3147
+ --tw-font-weight: initial;
3148
+ --tw-tracking: initial;
3149
+ --tw-shadow: 0 0 #0000;
3150
+ --tw-shadow-color: initial;
3151
+ --tw-shadow-alpha: 100%;
3152
+ --tw-inset-shadow: 0 0 #0000;
3153
+ --tw-inset-shadow-color: initial;
3154
+ --tw-inset-shadow-alpha: 100%;
3155
+ --tw-ring-color: initial;
3156
+ --tw-ring-shadow: 0 0 #0000;
3157
+ --tw-inset-ring-color: initial;
3158
+ --tw-inset-ring-shadow: 0 0 #0000;
3159
+ --tw-ring-inset: initial;
3160
+ --tw-ring-offset-width: 0px;
3161
+ --tw-ring-offset-color: #fff;
3162
+ --tw-ring-offset-shadow: 0 0 #0000;
3163
+ --tw-blur: initial;
3164
+ --tw-brightness: initial;
3165
+ --tw-contrast: initial;
3166
+ --tw-grayscale: initial;
3167
+ --tw-hue-rotate: initial;
3168
+ --tw-invert: initial;
3169
+ --tw-opacity: initial;
3170
+ --tw-saturate: initial;
3171
+ --tw-sepia: initial;
3172
+ --tw-drop-shadow: initial;
3173
+ --tw-drop-shadow-color: initial;
3174
+ --tw-drop-shadow-alpha: 100%;
3175
+ --tw-drop-shadow-size: initial;
3176
+ --tw-translate-x: 0;
3177
+ --tw-translate-y: 0;
3178
+ --tw-translate-z: 0;
3179
+ --tw-border-style: solid;
3180
+ --tw-duration: initial;
3181
+ --tw-scale-x: 1;
3182
+ --tw-scale-y: 1;
3183
+ --tw-scale-z: 1;
3184
+ }
3185
+ }
3186
+ }
3187
+ `);
1068
3188
 
1069
3189
  // src/Player.tsx
1070
3190
  var import_tailwind_merge2 = require("tailwind-merge");
1071
- var import_jsx_runtime5 = require("react/jsx-runtime");
1072
- var Player = (0, import_react11.forwardRef)(
3191
+ var import_jsx_runtime8 = require("react/jsx-runtime");
3192
+ var Player = (0, import_react12.forwardRef)(
1073
3193
  ({
1074
3194
  src,
1075
3195
  autoPlay = false,
@@ -1087,14 +3207,15 @@ var Player = (0, import_react11.forwardRef)(
1087
3207
  chromecastConfig,
1088
3208
  qualityConfig,
1089
3209
  seekbarConfig,
3210
+ iconSizes,
1090
3211
  events,
1091
3212
  containerClassName,
1092
3213
  ...videoProps
1093
3214
  }, ref) => {
1094
- const videoRef = (0, import_react11.useRef)(null);
1095
- const containerRef = (0, import_react11.useRef)(null);
1096
- const adContainerRef = (0, import_react11.useRef)(null);
1097
- (0, import_react11.useImperativeHandle)(ref, () => videoRef.current, []);
3215
+ const videoRef = (0, import_react12.useRef)(null);
3216
+ const containerRef = (0, import_react12.useRef)(null);
3217
+ const adContainerRef = (0, import_react12.useRef)(null);
3218
+ (0, import_react12.useImperativeHandle)(ref, () => videoRef.current, []);
1098
3219
  const { playerRef, initializePlayer, destroyPlayer } = useShakePlayer({
1099
3220
  src,
1100
3221
  shakaConfig,
@@ -1140,19 +3261,22 @@ var Player = (0, import_react11.forwardRef)(
1140
3261
  chromecastConfig,
1141
3262
  seekbarConfig,
1142
3263
  events?.onSkipBack,
1143
- events?.onSkipForward
3264
+ events?.onSkipForward,
3265
+ iconSizes
1144
3266
  );
1145
3267
  const { isLive, isVisible: isLiveBadgeVisible } = useLiveBadge(playerRef, {
1146
3268
  enabled: true,
3269
+ liveThresholdSeconds: 15,
1147
3270
  onLiveStateChange: (isLive2) => {
1148
3271
  events?.onLiveStateChange?.(isLive2);
1149
3272
  }
1150
3273
  });
1151
- useLiveIndicator(containerRef, {
3274
+ useLiveIndicator(containerRef, playerRef, {
1152
3275
  enabled: true,
1153
3276
  indicatorColor: "#ff0000",
1154
3277
  indicatorSize: 8,
1155
- showPulseAnimation: true
3278
+ showPulseAnimation: true,
3279
+ liveThresholdSeconds: 15
1156
3280
  });
1157
3281
  const initializeAds = () => {
1158
3282
  if (!imaConfig || !playerRef.current || !videoRef.current) return;
@@ -1194,7 +3318,7 @@ var Player = (0, import_react11.forwardRef)(
1194
3318
  console.warn("Chromecast initialization failed:", error);
1195
3319
  }
1196
3320
  };
1197
- (0, import_react11.useEffect)(() => {
3321
+ (0, import_react12.useEffect)(() => {
1198
3322
  const video = videoRef.current;
1199
3323
  if (!video) return;
1200
3324
  const initialize = async () => {
@@ -1220,7 +3344,7 @@ var Player = (0, import_react11.forwardRef)(
1220
3344
  destroyPlayer();
1221
3345
  };
1222
3346
  }, [src]);
1223
- (0, import_react11.useEffect)(() => {
3347
+ (0, import_react12.useEffect)(() => {
1224
3348
  const video = videoRef.current;
1225
3349
  if (!video) return;
1226
3350
  video.autoplay = autoPlay;
@@ -1229,14 +3353,31 @@ var Player = (0, import_react11.forwardRef)(
1229
3353
  video.controls = false;
1230
3354
  if (poster) video.poster = poster;
1231
3355
  }, [autoPlay, loop, muted, poster]);
1232
- (0, import_react11.useEffect)(() => {
3356
+ (0, import_react12.useEffect)(() => {
1233
3357
  const video = videoRef.current;
1234
3358
  if (!video) return;
1235
3359
  video.controls = false;
1236
3360
  video.setAttribute("controls", "false");
1237
3361
  video.removeAttribute("controls");
3362
+ const observer = new MutationObserver((mutations) => {
3363
+ mutations.forEach((mutation) => {
3364
+ if (mutation.type === "attributes" && mutation.attributeName === "controls") {
3365
+ if (video.hasAttribute("controls")) {
3366
+ video.removeAttribute("controls");
3367
+ video.controls = false;
3368
+ }
3369
+ }
3370
+ });
3371
+ });
3372
+ observer.observe(video, {
3373
+ attributes: true,
3374
+ attributeFilter: ["controls"]
3375
+ });
3376
+ return () => {
3377
+ observer.disconnect();
3378
+ };
1238
3379
  }, []);
1239
- (0, import_react11.useImperativeHandle)(ref, () => ({
3380
+ (0, import_react12.useImperativeHandle)(ref, () => ({
1240
3381
  ...videoRef.current,
1241
3382
  // Custom methods for quality control
1242
3383
  getAvailableQualities,
@@ -1259,7 +3400,7 @@ var Player = (0, import_react11.forwardRef)(
1259
3400
  const videoStyle = isResponsive ? {} : { width, height };
1260
3401
  const filteredVideoProps = { ...videoProps };
1261
3402
  delete filteredVideoProps.controls;
1262
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
3403
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
1263
3404
  "div",
1264
3405
  {
1265
3406
  ref: containerRef,
@@ -1268,7 +3409,7 @@ var Player = (0, import_react11.forwardRef)(
1268
3409
  "data-shaka-player-container": true,
1269
3410
  "data-shaka-player-cast-receiver-id": chromecastConfig?.receiverApplicationId,
1270
3411
  children: [
1271
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
3412
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1272
3413
  "video",
1273
3414
  {
1274
3415
  ref: videoRef,
@@ -1277,11 +3418,12 @@ var Player = (0, import_react11.forwardRef)(
1277
3418
  height: isResponsive ? void 0 : height,
1278
3419
  style: videoStyle,
1279
3420
  controls: false,
3421
+ playsInline: true,
1280
3422
  ...filteredVideoProps
1281
3423
  }
1282
3424
  ),
1283
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LiveBadge, { isVisible: isLiveBadgeVisible }),
1284
- imaConfig && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
3425
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LiveBadge, { isVisible: isLiveBadgeVisible }),
3426
+ imaConfig && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1285
3427
  "div",
1286
3428
  {
1287
3429
  ref: adContainerRef,
@@ -1296,7 +3438,7 @@ var Player = (0, import_react11.forwardRef)(
1296
3438
  Player.displayName = "Player";
1297
3439
 
1298
3440
  // src/Video.tsx
1299
- var import_react13 = require("react");
3441
+ var import_react14 = require("react");
1300
3442
  var import_tailwind_merge3 = require("tailwind-merge");
1301
3443
  var import_react_query = require("@tanstack/react-query");
1302
3444
 
@@ -1437,7 +3579,7 @@ var getErrorType = (error, video) => {
1437
3579
  };
1438
3580
 
1439
3581
  // src/messages/useMessages.tsx
1440
- var import_react12 = require("react");
3582
+ var import_react13 = require("react");
1441
3583
 
1442
3584
  // src/messages/en.json
1443
3585
  var en_default = {
@@ -1739,9 +3881,9 @@ var getBrowserLanguage = () => {
1739
3881
  return availableLanguages[language] ? language : "en";
1740
3882
  };
1741
3883
  var useMessages = (locale) => {
1742
- const [language, setLanguage] = (0, import_react12.useState)("en");
1743
- const [translations, setTranslations] = (0, import_react12.useState)(availableLanguages.en);
1744
- (0, import_react12.useEffect)(() => {
3884
+ const [language, setLanguage] = (0, import_react13.useState)("en");
3885
+ const [translations, setTranslations] = (0, import_react13.useState)(availableLanguages.en);
3886
+ (0, import_react13.useEffect)(() => {
1745
3887
  const lang = !!availableLanguages?.[locale] ? locale : getBrowserLanguage();
1746
3888
  ;
1747
3889
  setLanguage(lang);
@@ -1766,8 +3908,37 @@ var useMessages = (locale) => {
1766
3908
  };
1767
3909
  var useMessages_default = useMessages;
1768
3910
 
3911
+ // src/utils/crypto-polyfill.ts
3912
+ function polyfillCryptoRandomUUID() {
3913
+ if (typeof globalThis !== "undefined" && globalThis.crypto && !globalThis.crypto.randomUUID) {
3914
+ globalThis.crypto.randomUUID = generateRandomUUID;
3915
+ }
3916
+ if (typeof window !== "undefined" && window.crypto && !window.crypto.randomUUID) {
3917
+ window.crypto.randomUUID = generateRandomUUID;
3918
+ }
3919
+ if (typeof self !== "undefined" && self.crypto && !self.crypto.randomUUID) {
3920
+ self.crypto.randomUUID = generateRandomUUID;
3921
+ }
3922
+ }
3923
+ function generateRandomUUID() {
3924
+ if (typeof crypto !== "undefined" && crypto.getRandomValues) {
3925
+ const array = new Uint8Array(16);
3926
+ crypto.getRandomValues(array);
3927
+ array[6] = array[6] & 15 | 64;
3928
+ array[8] = array[8] & 63 | 128;
3929
+ const hex = Array.from(array).map((b) => b.toString(16).padStart(2, "0")).join("");
3930
+ return `${hex.substring(0, 8)}-${hex.substring(8, 12)}-${hex.substring(12, 16)}-${hex.substring(16, 20)}-${hex.substring(20, 32)}`;
3931
+ }
3932
+ return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
3933
+ const r = Math.random() * 16 | 0;
3934
+ const v = c === "x" ? r : r & 3 | 8;
3935
+ return v.toString(16);
3936
+ });
3937
+ }
3938
+
1769
3939
  // src/Video.tsx
1770
- var import_jsx_runtime6 = require("react/jsx-runtime");
3940
+ var import_jsx_runtime9 = require("react/jsx-runtime");
3941
+ polyfillCryptoRandomUUID();
1771
3942
  var Video = ({
1772
3943
  videoId,
1773
3944
  publicKey,
@@ -1803,13 +3974,13 @@ var Video = ({
1803
3974
  const { t } = useMessages_default(locale);
1804
3975
  const activePlaylist = findHLSPlaylist(video);
1805
3976
  const hlsUrl = activePlaylist?.url;
1806
- (0, import_react13.useEffect)(() => {
3977
+ (0, import_react14.useEffect)(() => {
1807
3978
  if (events?.onVideoData && video) {
1808
3979
  events.onVideoData(video);
1809
3980
  }
1810
3981
  }, [video, events]);
1811
3982
  if (isLoading || !providedVideoData && !video) {
1812
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_tailwind_merge3.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "relative w-full h-full bg-[#151515]", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Loading, {}) }) });
3983
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_tailwind_merge3.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "relative w-full h-full bg-[#151515]", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Loading, {}) }) });
1813
3984
  }
1814
3985
  if (!isLoading && video && !hlsUrl && events?.onEmptyPlaylists) {
1815
3986
  events.onEmptyPlaylists();
@@ -1822,8 +3993,8 @@ var Video = ({
1822
3993
  }
1823
3994
  const title = t(errorKey) || t("DEFAULT_ERROR");
1824
3995
  const description = t(`${errorKey}_DESCRIPTION`) || t("DEFAULT_ERROR_DESCRIPTION");
1825
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_tailwind_merge3.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative w-full h-full", children: [
1826
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
3996
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_tailwind_merge3.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative w-full h-full", children: [
3997
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
1827
3998
  ErrorScreen,
1828
3999
  {
1829
4000
  title,
@@ -1834,13 +4005,13 @@ var Video = ({
1834
4005
  ] }) });
1835
4006
  }
1836
4007
  if (!hlsUrl) {
1837
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_tailwind_merge3.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative w-full h-full bg-[#151515]", children: [
1838
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Title, { title: video?.name || "" }),
4008
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_tailwind_merge3.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative w-full h-full bg-[#151515]", children: [
4009
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Title, { title: video?.name || "" }),
1839
4010
  children
1840
4011
  ] }) });
1841
4012
  }
1842
4013
  console.log("hlsUrl", hlsUrl);
1843
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_tailwind_merge3.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
4014
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_tailwind_merge3.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
1844
4015
  Player,
1845
4016
  {
1846
4017
  ...props,
@@ -1854,10 +4025,11 @@ var Video = ({
1854
4025
  };
1855
4026
 
1856
4027
  // src/Event.tsx
1857
- var import_react14 = require("react");
4028
+ var import_react15 = require("react");
1858
4029
  var import_tailwind_merge4 = require("tailwind-merge");
1859
4030
  var import_react_query2 = require("@tanstack/react-query");
1860
- var import_jsx_runtime7 = require("react/jsx-runtime");
4031
+ var import_jsx_runtime10 = require("react/jsx-runtime");
4032
+ polyfillCryptoRandomUUID();
1861
4033
  var Event = ({
1862
4034
  publicKey,
1863
4035
  eventId,
@@ -1887,8 +4059,8 @@ var Event = ({
1887
4059
  retry: queryOptions.retry ?? 3,
1888
4060
  retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
1889
4061
  });
1890
- const [activePlaylist, setActivePlaylist] = (0, import_react14.useState)();
1891
- const [activeVideoId, setActiveVideoId] = (0, import_react14.useState)();
4062
+ const [activePlaylist, setActivePlaylist] = (0, import_react15.useState)();
4063
+ const [activeVideoId, setActiveVideoId] = (0, import_react15.useState)();
1892
4064
  const videoIds = eventData?.videoIds ?? [];
1893
4065
  const {
1894
4066
  data: videosData,
@@ -1904,8 +4076,8 @@ var Event = ({
1904
4076
  retry: queryOptions.retry ?? 3,
1905
4077
  retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
1906
4078
  });
1907
- const [loadingApisState, setLoadingApisState] = (0, import_react14.useState)(true);
1908
- (0, import_react14.useEffect)(() => {
4079
+ const [loadingApisState, setLoadingApisState] = (0, import_react15.useState)(true);
4080
+ (0, import_react15.useEffect)(() => {
1909
4081
  if (videosData !== void 0) {
1910
4082
  setLoadingApisState(false);
1911
4083
  const videosWithPlaylists = videosData.filter(
@@ -1937,12 +4109,12 @@ var Event = ({
1937
4109
  }
1938
4110
  }, [videosData, eventData]);
1939
4111
  const { t } = useMessages_default(locale);
1940
- (0, import_react14.useEffect)(() => {
4112
+ (0, import_react15.useEffect)(() => {
1941
4113
  if (events?.onEventData && eventData) {
1942
4114
  events.onEventData(eventData);
1943
4115
  }
1944
4116
  }, [eventData, events]);
1945
- (0, import_react14.useEffect)(() => {
4117
+ (0, import_react15.useEffect)(() => {
1946
4118
  if (events?.onVideoData && activeVideoId && videosData) {
1947
4119
  const activeVideo = videosData.find((video) => video.id === activeVideoId);
1948
4120
  if (activeVideo) {
@@ -1950,10 +4122,10 @@ var Event = ({
1950
4122
  }
1951
4123
  }
1952
4124
  }, [activeVideoId, videosData, events]);
1953
- const [error, setError] = (0, import_react14.useState)(null);
1954
- const [loadingPlaylist, setLoadingPlaylist] = (0, import_react14.useState)(true);
4125
+ const [error, setError] = (0, import_react15.useState)(null);
4126
+ const [loadingPlaylist, setLoadingPlaylist] = (0, import_react15.useState)(true);
1955
4127
  const videosDataError = videosData?.some((video) => !!video.error);
1956
- (0, import_react14.useEffect)(() => {
4128
+ (0, import_react15.useEffect)(() => {
1957
4129
  if (eventError || videosError || videosDataError) {
1958
4130
  const errorObj = eventError || videosError || videosData?.find((video) => !!video.error)?.error && new Error(videosData?.find((video) => !!video.error)?.error) || new Error("default");
1959
4131
  setError(errorObj);
@@ -1964,7 +4136,7 @@ var Event = ({
1964
4136
  setError(null);
1965
4137
  }
1966
4138
  }, [eventError, videosError, videosDataError, videosData, events]);
1967
- (0, import_react14.useEffect)(() => {
4139
+ (0, import_react15.useEffect)(() => {
1968
4140
  const eventLoadedWithNoVideos = !isEventLoading && eventData && eventData.videoIds && (!eventData.videoIds || eventData?.videoIds?.length === 0) && !loadingApisState;
1969
4141
  const allApisLoadedWithPotentialVideos = !isEventLoading && !videosIsLoading && eventData && !loadingApisState;
1970
4142
  if (eventLoadedWithNoVideos || allApisLoadedWithPotentialVideos) {
@@ -1974,7 +4146,7 @@ var Event = ({
1974
4146
  if (error) {
1975
4147
  const title = t(error.message)?.length ? t(error.message) : t("DEFAULT_ERROR");
1976
4148
  const description = t(`${error.message}_DESCRIPTION`)?.length ? t(`${error.message}_DESCRIPTION`) : t("DEFAULT_ERROR_DESCRIPTION");
1977
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_tailwind_merge4.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
4149
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_tailwind_merge4.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
1978
4150
  ErrorScreen,
1979
4151
  {
1980
4152
  title,
@@ -1986,12 +4158,12 @@ var Event = ({
1986
4158
  events.onEmptyPlaylists();
1987
4159
  }
1988
4160
  if (loadingPlaylist) {
1989
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_tailwind_merge4.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "relative w-full h-full bg-[#151515]", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Loading, {}) }) });
4161
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_tailwind_merge4.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative w-full h-full bg-[#151515]", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Loading, {}) }) });
1990
4162
  }
1991
4163
  if (activePlaylist && activeVideoId && videosData) {
1992
4164
  const activeVideo = videosData.find((video) => video.id === activeVideoId);
1993
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_tailwind_merge4.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative w-full h-full", children: [
1994
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
4165
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: (0, import_tailwind_merge4.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: [
4166
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
1995
4167
  Player,
1996
4168
  {
1997
4169
  ...props,
@@ -2000,8 +4172,8 @@ var Event = ({
2000
4172
  events,
2001
4173
  containerClassName: "w-full h-full"
2002
4174
  }
2003
- ),
2004
- !hideTitle && eventData && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
4175
+ ) }),
4176
+ !hideTitle && eventData && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
2005
4177
  TitleAndDescription,
2006
4178
  {
2007
4179
  title: eventData.title,
@@ -2010,10 +4182,10 @@ var Event = ({
2010
4182
  locale
2011
4183
  }
2012
4184
  )
2013
- ] }) });
4185
+ ] });
2014
4186
  }
2015
4187
  if (eventData) {
2016
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_tailwind_merge4.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
4188
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_tailwind_merge4.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
2017
4189
  PreEvent,
2018
4190
  {
2019
4191
  event: eventData,
@@ -2035,12 +4207,12 @@ function PreEvent({
2035
4207
  }) {
2036
4208
  const date = new Date(event.startTime);
2037
4209
  const now = /* @__PURE__ */ new Date();
2038
- const [remainingTime, setRemainingTime] = (0, import_react14.useState)(
4210
+ const [remainingTime, setRemainingTime] = (0, import_react15.useState)(
2039
4211
  date.getTime() - now.getTime()
2040
4212
  );
2041
4213
  const shouldBeStarted = remainingTime < 0;
2042
4214
  const { t } = useMessages_default(locale);
2043
- (0, import_react14.useEffect)(() => {
4215
+ (0, import_react15.useEffect)(() => {
2044
4216
  const interval = setInterval(() => {
2045
4217
  if (remainingTime < 0) {
2046
4218
  clearInterval(interval);
@@ -2050,17 +4222,17 @@ function PreEvent({
2050
4222
  }, 1e3);
2051
4223
  return () => clearInterval(interval);
2052
4224
  }, [date, remainingTime]);
2053
- const renderCountdown = (0, import_react14.useCallback)(() => {
4225
+ const renderCountdown = (0, import_react15.useCallback)(() => {
2054
4226
  if (shouldBeStarted) {
2055
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-base-content text-xl", children: t("EVENT_NOT_STARTED") });
4227
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-base-content text-xl", children: t("EVENT_NOT_STARTED") });
2056
4228
  }
2057
4229
  const seconds = Math.floor(remainingTime / 1e3) % 60;
2058
4230
  const minutes = Math.floor(remainingTime / 1e3 / 60) % 60;
2059
4231
  const hours = Math.floor(remainingTime / 1e3 / 60 / 60) % 24;
2060
4232
  const days = Math.floor(remainingTime / 1e3 / 60 / 60 / 24);
2061
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "grid grid-flow-col gap-5 text-center auto-cols-max", children: [
2062
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
2063
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
4233
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "grid grid-flow-col gap-5 text-center auto-cols-max", children: [
4234
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
4235
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
2064
4236
  "span",
2065
4237
  {
2066
4238
  style: { "--value": days },
@@ -2069,10 +4241,10 @@ function PreEvent({
2069
4241
  children: days?.toString()?.padStart(2, "0")
2070
4242
  }
2071
4243
  ) }),
2072
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("DAYS") })
4244
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("DAYS") })
2073
4245
  ] }),
2074
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
2075
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
4246
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
4247
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
2076
4248
  "span",
2077
4249
  {
2078
4250
  style: { "--value": hours },
@@ -2081,10 +4253,10 @@ function PreEvent({
2081
4253
  children: hours?.toString()?.padStart(2, "0")
2082
4254
  }
2083
4255
  ) }),
2084
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("HOURS") })
4256
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("HOURS") })
2085
4257
  ] }),
2086
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
2087
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
4258
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
4259
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
2088
4260
  "span",
2089
4261
  {
2090
4262
  style: { "--value": minutes },
@@ -2093,10 +4265,10 @@ function PreEvent({
2093
4265
  children: minutes?.toString()?.padStart(2, "0")
2094
4266
  }
2095
4267
  ) }),
2096
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("MINUTES") })
4268
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("MINUTES") })
2097
4269
  ] }),
2098
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
2099
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
4270
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
4271
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
2100
4272
  "span",
2101
4273
  {
2102
4274
  style: { "--value": seconds },
@@ -2105,12 +4277,12 @@ function PreEvent({
2105
4277
  children: seconds?.toString()?.padStart(2, "0")
2106
4278
  }
2107
4279
  ) }),
2108
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("SECONDS") })
4280
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("SECONDS") })
2109
4281
  ] })
2110
4282
  ] });
2111
4283
  }, [remainingTime, shouldBeStarted, t]);
2112
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: event?.posterUrl ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
2113
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
4284
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: event?.posterUrl ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
4285
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
2114
4286
  "div",
2115
4287
  {
2116
4288
  className: "relative overflow-hidden bg-base-200 aspect-video text-base-content w-full h-full flex justify-center items-center flex-col bg-no-repeat bg-cover md:rounded-2xl",
@@ -2119,10 +4291,10 @@ function PreEvent({
2119
4291
  backgroundRepeat: "no-repeat",
2120
4292
  backgroundSize: "cover"
2121
4293
  },
2122
- children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "relative z-10", children: renderCountdown() })
4294
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative z-10", children: renderCountdown() })
2123
4295
  }
2124
4296
  ),
2125
- !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
4297
+ !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
2126
4298
  TitleAndDescription,
2127
4299
  {
2128
4300
  title: event.title,
@@ -2131,18 +4303,18 @@ function PreEvent({
2131
4303
  locale
2132
4304
  }
2133
4305
  )
2134
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
2135
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
4306
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
4307
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
2136
4308
  "div",
2137
4309
  {
2138
4310
  className: "relative overflow-hidden md:rounded-2xl bg-base-200 aspect-video text-base-content flex flex-col justify-center items-center w-full h-full bg-cover bg-center bg-no-repeat",
2139
4311
  style: {
2140
4312
  backgroundImage: backgroundImageUrl ? `url(${backgroundImageUrl})` : ""
2141
4313
  },
2142
- children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "relative z-10", children: renderCountdown() })
4314
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative z-10", children: renderCountdown() })
2143
4315
  }
2144
4316
  ),
2145
- !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
4317
+ !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
2146
4318
  TitleAndDescription,
2147
4319
  {
2148
4320
  title: event.title,
@@ -2160,9 +4332,9 @@ var TitleAndDescription = ({
2160
4332
  locale = "en",
2161
4333
  className
2162
4334
  }) => {
2163
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: (0, import_tailwind_merge4.twMerge)("mt-3 mb-6 m-event-details-ctn px-4 text-left w-full", className), children: [
2164
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-base md:text-xl m-event-title text-base-content font-medium", children: title }),
2165
- startTime ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "text-sm md:text-base text-base-content/70 m-event-start-time", children: [
4335
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: (0, import_tailwind_merge4.twMerge)("mt-3 mb-6 m-event-details-ctn px-4 text-left w-full", className), children: [
4336
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-base md:text-xl m-event-title text-base-content font-medium", children: title }),
4337
+ startTime ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "text-sm md:text-base text-base-content/70 m-event-start-time", children: [
2166
4338
  new Date(startTime || "").toLocaleDateString(locale || "default", {
2167
4339
  month: "long",
2168
4340
  year: "numeric",
@@ -2175,15 +4347,16 @@ var TitleAndDescription = ({
2175
4347
  minute: "2-digit"
2176
4348
  })
2177
4349
  ] }) : null,
2178
- description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-xs md:text-sm text-base-content/60 uppercase", children: description })
4350
+ description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-xs md:text-sm text-base-content/60 uppercase", children: description })
2179
4351
  ] });
2180
4352
  };
2181
4353
 
2182
4354
  // src/CreativeWork.tsx
2183
- var import_react15 = require("react");
4355
+ var import_react16 = require("react");
2184
4356
  var import_tailwind_merge5 = require("tailwind-merge");
2185
4357
  var import_react_query3 = require("@tanstack/react-query");
2186
- var import_jsx_runtime8 = require("react/jsx-runtime");
4358
+ var import_jsx_runtime11 = require("react/jsx-runtime");
4359
+ polyfillCryptoRandomUUID();
2187
4360
  var CreativeWork = ({
2188
4361
  publicKey,
2189
4362
  creativeWorkId,
@@ -2213,9 +4386,9 @@ var CreativeWork = ({
2213
4386
  retry: queryOptions.retry ?? 3,
2214
4387
  retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
2215
4388
  });
2216
- const [activePlaylist, setActivePlaylist] = (0, import_react15.useState)();
2217
- const [activeVideoId, setActiveVideoId] = (0, import_react15.useState)();
2218
- const [showCountDown, setShowCountDown] = (0, import_react15.useState)(false);
4389
+ const [activePlaylist, setActivePlaylist] = (0, import_react16.useState)();
4390
+ const [activeVideoId, setActiveVideoId] = (0, import_react16.useState)();
4391
+ const [showCountDown, setShowCountDown] = (0, import_react16.useState)(false);
2219
4392
  const videoIds = creativeWorkData?.videoIds ?? [];
2220
4393
  const {
2221
4394
  data: videosData,
@@ -2231,8 +4404,8 @@ var CreativeWork = ({
2231
4404
  retry: queryOptions.retry ?? 3,
2232
4405
  retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
2233
4406
  });
2234
- const [loadingApisState, setLoadingApisState] = (0, import_react15.useState)(true);
2235
- (0, import_react15.useEffect)(() => {
4407
+ const [loadingApisState, setLoadingApisState] = (0, import_react16.useState)(true);
4408
+ (0, import_react16.useEffect)(() => {
2236
4409
  if (videosData !== void 0) {
2237
4410
  setLoadingApisState(false);
2238
4411
  const videosWithPlaylists = videosData.filter(
@@ -2264,7 +4437,7 @@ var CreativeWork = ({
2264
4437
  }
2265
4438
  }, [videosData, creativeWorkData]);
2266
4439
  const { t } = useMessages_default(locale);
2267
- (0, import_react15.useEffect)(() => {
4440
+ (0, import_react16.useEffect)(() => {
2268
4441
  if (events?.onCreativeWorkData && creativeWorkData) {
2269
4442
  events.onCreativeWorkData(creativeWorkData);
2270
4443
  }
@@ -2272,7 +4445,7 @@ var CreativeWork = ({
2272
4445
  setShowCountDown(true);
2273
4446
  }
2274
4447
  }, [creativeWorkData, events]);
2275
- (0, import_react15.useEffect)(() => {
4448
+ (0, import_react16.useEffect)(() => {
2276
4449
  if (events?.onVideoData && activeVideoId && videosData) {
2277
4450
  const activeVideo = videosData.find((video) => video.id === activeVideoId);
2278
4451
  if (activeVideo) {
@@ -2280,9 +4453,9 @@ var CreativeWork = ({
2280
4453
  }
2281
4454
  }
2282
4455
  }, [activeVideoId, videosData, events]);
2283
- const [error, setError] = (0, import_react15.useState)(null);
4456
+ const [error, setError] = (0, import_react16.useState)(null);
2284
4457
  const videosDataError = videosData?.some((video) => !!video.error);
2285
- (0, import_react15.useEffect)(() => {
4458
+ (0, import_react16.useEffect)(() => {
2286
4459
  if (creativeWorkError || videosError || videosDataError) {
2287
4460
  const errorObj = creativeWorkError || videosError || videosData?.find((video) => !!video.error)?.error && new Error(videosData?.find((video) => !!video.error)?.error) || new Error("default");
2288
4461
  setError(errorObj);
@@ -2296,7 +4469,7 @@ var CreativeWork = ({
2296
4469
  if (error) {
2297
4470
  const title = t(error.message)?.length ? t(error.message) : t("DEFAULT_ERROR");
2298
4471
  const description = t(`${error.message}_DESCRIPTION`)?.length ? t(`${error.message}_DESCRIPTION`) : t("DEFAULT_ERROR_DESCRIPTION");
2299
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
4472
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
2300
4473
  ErrorScreen,
2301
4474
  {
2302
4475
  title,
@@ -2304,8 +4477,8 @@ var CreativeWork = ({
2304
4477
  }
2305
4478
  ) }) });
2306
4479
  }
2307
- const [loadingPlaylist, setLoadingPlaylist] = (0, import_react15.useState)(true);
2308
- (0, import_react15.useEffect)(() => {
4480
+ const [loadingPlaylist, setLoadingPlaylist] = (0, import_react16.useState)(true);
4481
+ (0, import_react16.useEffect)(() => {
2309
4482
  const creativeWorkLoadedWithNoVideos = !isCreativeWorkLoading && creativeWorkData && creativeWorkData.videoIds && creativeWorkData.videoIds.length === 0;
2310
4483
  const creativeWorkLoadedWithNoData = !isCreativeWorkLoading && creativeWorkData && !creativeWorkData.videoIds;
2311
4484
  const isEventsFinished = !videosIsLoading && videosData && videosData.length > 0 && videosData.every((video) => video.playlists && video.playlists.length === 0);
@@ -2326,10 +4499,10 @@ var CreativeWork = ({
2326
4499
  events
2327
4500
  ]);
2328
4501
  if (isCreativeWorkLoading || videosIsLoading || loadingApisState) {
2329
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Loading, {}) }) });
4502
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Loading, {}) }) });
2330
4503
  }
2331
4504
  if (showCountDown && creativeWorkData) {
2332
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "relative w-full h-full bg-base-200 text-base-content flex justify-center items-center flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
4505
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "relative w-full h-full bg-base-200 text-base-content flex justify-center items-center flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
2333
4506
  PreCreativeWork,
2334
4507
  {
2335
4508
  creativeWork: creativeWorkData,
@@ -2342,8 +4515,8 @@ var CreativeWork = ({
2342
4515
  }
2343
4516
  if (activeVideoId && activePlaylist && !loadingPlaylist) {
2344
4517
  const activeVideo = videosData?.find((video) => video.id === activeVideoId);
2345
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative w-full h-full", children: [
2346
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
4518
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative w-full h-full", children: [
4519
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
2347
4520
  Player,
2348
4521
  {
2349
4522
  ...props,
@@ -2355,7 +4528,7 @@ var CreativeWork = ({
2355
4528
  containerClassName: "w-full h-full"
2356
4529
  }
2357
4530
  ),
2358
- !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
4531
+ !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
2359
4532
  TitleAndDescription2,
2360
4533
  {
2361
4534
  title: creativeWorkData?.title || "",
@@ -2368,7 +4541,7 @@ var CreativeWork = ({
2368
4541
  ] }) });
2369
4542
  }
2370
4543
  if (loadingPlaylist) {
2371
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Loading, {});
4544
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Loading, {});
2372
4545
  }
2373
4546
  return null;
2374
4547
  };
@@ -2381,12 +4554,12 @@ function PreCreativeWork({
2381
4554
  }) {
2382
4555
  const date = new Date(creativeWork.releaseTime);
2383
4556
  const now = /* @__PURE__ */ new Date();
2384
- const [remainingTime, setRemainingTime] = (0, import_react15.useState)(
4557
+ const [remainingTime, setRemainingTime] = (0, import_react16.useState)(
2385
4558
  date.getTime() - now.getTime()
2386
4559
  );
2387
4560
  const shouldBeStarted = remainingTime < 0;
2388
4561
  const { t } = useMessages_default(locale);
2389
- (0, import_react15.useEffect)(() => {
4562
+ (0, import_react16.useEffect)(() => {
2390
4563
  const interval = setInterval(() => {
2391
4564
  if (remainingTime < 0) {
2392
4565
  clearInterval(interval);
@@ -2400,15 +4573,15 @@ function PreCreativeWork({
2400
4573
  }, [date, remainingTime]);
2401
4574
  const renderCountdown = () => {
2402
4575
  if (shouldBeStarted) {
2403
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-base-content text-xl", children: t("EVENT_NOT_STARTED") });
4576
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-base-content text-xl", children: t("EVENT_NOT_STARTED") });
2404
4577
  }
2405
4578
  const seconds = Math.floor(remainingTime / 1e3) % 60;
2406
4579
  const minutes = Math.floor(remainingTime / 1e3 / 60) % 60;
2407
4580
  const hours = Math.floor(remainingTime / 1e3 / 60 / 60) % 24;
2408
4581
  const days = Math.floor(remainingTime / 1e3 / 60 / 60 / 24);
2409
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "grid grid-flow-col gap-5 text-center auto-cols-max", children: [
2410
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
2411
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
4582
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "grid grid-flow-col gap-5 text-center auto-cols-max", children: [
4583
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
4584
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
2412
4585
  "span",
2413
4586
  {
2414
4587
  style: { "--value": days },
@@ -2417,10 +4590,10 @@ function PreCreativeWork({
2417
4590
  children: days?.toString()?.padStart(2, "0")
2418
4591
  }
2419
4592
  ) }),
2420
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("DAYS") })
4593
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("DAYS") })
2421
4594
  ] }),
2422
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
2423
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
4595
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
4596
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
2424
4597
  "span",
2425
4598
  {
2426
4599
  style: { "--value": hours },
@@ -2429,10 +4602,10 @@ function PreCreativeWork({
2429
4602
  children: hours?.toString()?.padStart(2, "0")
2430
4603
  }
2431
4604
  ) }),
2432
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("HOURS") })
4605
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("HOURS") })
2433
4606
  ] }),
2434
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
2435
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
4607
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
4608
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
2436
4609
  "span",
2437
4610
  {
2438
4611
  style: { "--value": minutes },
@@ -2441,10 +4614,10 @@ function PreCreativeWork({
2441
4614
  children: minutes?.toString()?.padStart(2, "0")
2442
4615
  }
2443
4616
  ) }),
2444
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("MINUTES") })
4617
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("MINUTES") })
2445
4618
  ] }),
2446
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
2447
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
4619
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
4620
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
2448
4621
  "span",
2449
4622
  {
2450
4623
  style: { "--value": seconds },
@@ -2453,12 +4626,12 @@ function PreCreativeWork({
2453
4626
  children: seconds?.toString()?.padStart(2, "0")
2454
4627
  }
2455
4628
  ) }),
2456
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("SECONDS") })
4629
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("SECONDS") })
2457
4630
  ] })
2458
4631
  ] });
2459
4632
  };
2460
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
2461
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
4633
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
4634
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
2462
4635
  "div",
2463
4636
  {
2464
4637
  className: "relative overflow-hidden md:rounded-2xl bg-base-200 aspect-video text-base-content flex flex-col justify-center items-center w-full h-full bg-cover bg-center bg-no-repeat",
@@ -2466,12 +4639,12 @@ function PreCreativeWork({
2466
4639
  backgroundImage: backgroundImageUrl ? `url(${backgroundImageUrl})` : ""
2467
4640
  },
2468
4641
  children: [
2469
- backgroundImageUrl && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute inset-0 bg-black bg-opacity-40" }),
2470
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "relative z-10", children: renderCountdown() })
4642
+ backgroundImageUrl && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute inset-0 bg-black bg-opacity-40" }),
4643
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "relative z-10", children: renderCountdown() })
2471
4644
  ]
2472
4645
  }
2473
4646
  ),
2474
- !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
4647
+ !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
2475
4648
  TitleAndDescription2,
2476
4649
  {
2477
4650
  title: creativeWork.title,
@@ -2489,9 +4662,9 @@ var TitleAndDescription2 = ({
2489
4662
  locale = "en",
2490
4663
  className
2491
4664
  }) => {
2492
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: (0, import_tailwind_merge5.twMerge)("mt-3 mb-6 m-event-details-ctn px-4 text-left w-full", className), children: [
2493
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-base md:text-xl m-event-title text-base-content font-medium", children: title }),
2494
- releaseTime ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "text-sm md:text-base text-base-content/70 m-event-start-time", children: [
4665
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: (0, import_tailwind_merge5.twMerge)("mt-3 mb-6 m-event-details-ctn px-4 text-left w-full", className), children: [
4666
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "text-base md:text-xl m-event-title text-base-content font-medium", children: title }),
4667
+ releaseTime ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "text-sm md:text-base text-base-content/70 m-event-start-time", children: [
2495
4668
  new Date(releaseTime || "").toLocaleDateString(locale || "default", {
2496
4669
  month: "long",
2497
4670
  year: "numeric",
@@ -2504,13 +4677,13 @@ var TitleAndDescription2 = ({
2504
4677
  minute: "2-digit"
2505
4678
  })
2506
4679
  ] }) : null,
2507
- description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-xs md:text-sm text-base-content/60 uppercase", children: description })
4680
+ description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "text-xs md:text-sm text-base-content/60 uppercase", children: description })
2508
4681
  ] });
2509
4682
  };
2510
4683
 
2511
4684
  // src/QueryProvider.tsx
2512
4685
  var import_react_query4 = require("@tanstack/react-query");
2513
- var import_jsx_runtime9 = require("react/jsx-runtime");
4686
+ var import_jsx_runtime12 = require("react/jsx-runtime");
2514
4687
  var queryClient = new import_react_query4.QueryClient({
2515
4688
  defaultOptions: {
2516
4689
  queries: {
@@ -2524,15 +4697,19 @@ var queryClient = new import_react_query4.QueryClient({
2524
4697
  }
2525
4698
  });
2526
4699
  var QueryProvider = ({ children }) => {
2527
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_query4.QueryClientProvider, { client: queryClient, children });
4700
+ return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_query4.QueryClientProvider, { client: queryClient, children });
2528
4701
  };
2529
4702
  // Annotate the CommonJS export names for ESM import in node:
2530
4703
  0 && (module.exports = {
4704
+ BigPlayIcon,
2531
4705
  CreativeWork,
2532
4706
  Event,
2533
4707
  Player,
2534
4708
  QueryProvider,
4709
+ SkipBackIcon,
4710
+ SkipForwardIcon,
2535
4711
  Video,
4712
+ polyfillCryptoRandomUUID,
2536
4713
  queryClient
2537
4714
  });
2538
4715
  //# sourceMappingURL=index.js.map