@mottosports/motto-video-player 1.0.1-rc.15 → 1.0.1-rc.17

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