@mottosports/motto-video-player 1.0.1-rc.2 → 1.0.1-rc.20

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 -102
  2. package/dist/index.d.mts +36 -18
  3. package/dist/index.d.ts +36 -18
  4. package/dist/index.js +2776 -760
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +2762 -746
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -31,15 +31,18 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
31
31
  // src/index.ts
32
32
  var index_exports = {};
33
33
  __export(index_exports, {
34
- ClientSideEvent: () => ClientSideEvent,
34
+ BigPlayIcon: () => BigPlayIcon,
35
35
  CreativeWork: () => CreativeWork,
36
36
  Event: () => Event,
37
37
  Player: () => Player,
38
38
  QueryProvider: () => QueryProvider,
39
+ SkipBackIcon: () => SkipBackIcon,
40
+ SkipForwardIcon: () => SkipForwardIcon,
39
41
  Video: () => Video,
40
42
  queryClient: () => queryClient
41
43
  });
42
44
  module.exports = __toCommonJS(index_exports);
45
+ var import_controls = require("shaka-player/dist/controls.css");
43
46
 
44
47
  // #style-inject:#style-inject
45
48
  function styleInject(css, { insertAt } = {}) {
@@ -64,10 +67,1084 @@ 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-8 {\n height: calc(var(--spacing) * 8);\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-8 {\n width: calc(var(--spacing) * 8);\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 .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n .border-white {\n border-color: var(--color-white);\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 .shaka-controls-container {\n z-index: 90 !important;\n height: 100px !important;\n bottom: 0 !important;\n top: unset !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@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }\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-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-border-style: solid;\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-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
+ .motto-video-container {
1025
+ background: black;
1026
+ }
1027
+ .motto-video-container video {
1028
+ width: 100% !important;
1029
+ height: 100% !important;
1030
+ margin-left: auto !important;
1031
+ margin-right: auto !important;
1032
+ }
1033
+ @property --tw-gradient-position { syntax: "*"; inherits: false; }
1034
+ @property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; }
1035
+ @property --tw-gradient-via { syntax: "<color>"; inherits: false; initial-value: #0000; }
1036
+ @property --tw-gradient-to { syntax: "<color>"; inherits: false; initial-value: #0000; }
1037
+ @property --tw-gradient-stops { syntax: "*"; inherits: false; }
1038
+ @property --tw-gradient-via-stops { syntax: "*"; inherits: false; }
1039
+ @property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }
1040
+ @property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }
1041
+ @property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }
1042
+ @property --tw-font-weight { syntax: "*"; inherits: false; }
1043
+ @property --tw-tracking { syntax: "*"; inherits: false; }
1044
+ @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
1045
+ @property --tw-shadow-color { syntax: "*"; inherits: false; }
1046
+ @property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
1047
+ @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
1048
+ @property --tw-inset-shadow-color { syntax: "*"; inherits: false; }
1049
+ @property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
1050
+ @property --tw-ring-color { syntax: "*"; inherits: false; }
1051
+ @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
1052
+ @property --tw-inset-ring-color { syntax: "*"; inherits: false; }
1053
+ @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
1054
+ @property --tw-ring-inset { syntax: "*"; inherits: false; }
1055
+ @property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }
1056
+ @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
1057
+ @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
1058
+ @property --tw-blur { syntax: "*"; inherits: false; }
1059
+ @property --tw-brightness { syntax: "*"; inherits: false; }
1060
+ @property --tw-contrast { syntax: "*"; inherits: false; }
1061
+ @property --tw-grayscale { syntax: "*"; inherits: false; }
1062
+ @property --tw-hue-rotate { syntax: "*"; inherits: false; }
1063
+ @property --tw-invert { syntax: "*"; inherits: false; }
1064
+ @property --tw-opacity { syntax: "*"; inherits: false; }
1065
+ @property --tw-saturate { syntax: "*"; inherits: false; }
1066
+ @property --tw-sepia { syntax: "*"; inherits: false; }
1067
+ @property --tw-drop-shadow { syntax: "*"; inherits: false; }
1068
+ @property --tw-drop-shadow-color { syntax: "*"; inherits: false; }
1069
+ @property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
1070
+ @property --tw-drop-shadow-size { syntax: "*"; inherits: false; }
1071
+ @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
1072
+ @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
1073
+ @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
1074
+ @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
1075
+ @property --tw-duration { syntax: "*"; inherits: false; }
1076
+ @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; }
1077
+ @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; }
1078
+ @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }
1079
+ @keyframes spin {
1080
+ to {
1081
+ transform: rotate(360deg);
1082
+ }
1083
+ }
1084
+ @keyframes pulse {
1085
+ 50% {
1086
+ opacity: 0.5;
1087
+ }
1088
+ }
1089
+ @layer properties {
1090
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
1091
+ *,
1092
+ ::before,
1093
+ ::after,
1094
+ ::backdrop {
1095
+ --tw-gradient-position: initial;
1096
+ --tw-gradient-from: #0000;
1097
+ --tw-gradient-via: #0000;
1098
+ --tw-gradient-to: #0000;
1099
+ --tw-gradient-stops: initial;
1100
+ --tw-gradient-via-stops: initial;
1101
+ --tw-gradient-from-position: 0%;
1102
+ --tw-gradient-via-position: 50%;
1103
+ --tw-gradient-to-position: 100%;
1104
+ --tw-font-weight: initial;
1105
+ --tw-tracking: initial;
1106
+ --tw-shadow: 0 0 #0000;
1107
+ --tw-shadow-color: initial;
1108
+ --tw-shadow-alpha: 100%;
1109
+ --tw-inset-shadow: 0 0 #0000;
1110
+ --tw-inset-shadow-color: initial;
1111
+ --tw-inset-shadow-alpha: 100%;
1112
+ --tw-ring-color: initial;
1113
+ --tw-ring-shadow: 0 0 #0000;
1114
+ --tw-inset-ring-color: initial;
1115
+ --tw-inset-ring-shadow: 0 0 #0000;
1116
+ --tw-ring-inset: initial;
1117
+ --tw-ring-offset-width: 0px;
1118
+ --tw-ring-offset-color: #fff;
1119
+ --tw-ring-offset-shadow: 0 0 #0000;
1120
+ --tw-blur: initial;
1121
+ --tw-brightness: initial;
1122
+ --tw-contrast: initial;
1123
+ --tw-grayscale: initial;
1124
+ --tw-hue-rotate: initial;
1125
+ --tw-invert: initial;
1126
+ --tw-opacity: initial;
1127
+ --tw-saturate: initial;
1128
+ --tw-sepia: initial;
1129
+ --tw-drop-shadow: initial;
1130
+ --tw-drop-shadow-color: initial;
1131
+ --tw-drop-shadow-alpha: 100%;
1132
+ --tw-drop-shadow-size: initial;
1133
+ --tw-translate-x: 0;
1134
+ --tw-translate-y: 0;
1135
+ --tw-translate-z: 0;
1136
+ --tw-border-style: solid;
1137
+ --tw-duration: initial;
1138
+ --tw-scale-x: 1;
1139
+ --tw-scale-y: 1;
1140
+ --tw-scale-z: 1;
1141
+ }
1142
+ }
1143
+ }
1144
+ `);
68
1145
 
69
1146
  // src/Player.tsx
70
- var import_react11 = require("react");
1147
+ var import_react12 = require("react");
71
1148
  var import_shaka_player4 = __toESM(require("shaka-player/dist/shaka-player.ui"));
72
1149
 
73
1150
  // src/hooks/useShakePlayer.ts
@@ -103,6 +1180,9 @@ var useShakePlayer = ({
103
1180
  }
104
1181
  player.addEventListener("error", (event) => {
105
1182
  const error = event.detail;
1183
+ if (error?.code === 7e3) {
1184
+ return;
1185
+ }
106
1186
  console.error("Shaka Player Error:", error);
107
1187
  onError?.(new Error(`Shaka Player Error: ${error.message || "Unknown error"}`));
108
1188
  });
@@ -110,6 +1190,9 @@ var useShakePlayer = ({
110
1190
  onPlayerReady?.(player);
111
1191
  return player;
112
1192
  } catch (error) {
1193
+ if (error?.code === 7e3) {
1194
+ return;
1195
+ }
113
1196
  console.error("Error initializing Shaka Player:", error);
114
1197
  onError?.(error);
115
1198
  throw error;
@@ -152,11 +1235,25 @@ var useQualityControl = (playerRef, qualityConfig, onQualityChange) => {
152
1235
  if (!playerRef.current) return;
153
1236
  if (height === 0) {
154
1237
  playerRef.current.configure({
155
- abr: { enabled: true }
1238
+ abr: {
1239
+ enabled: true,
1240
+ switchInterval: 2,
1241
+ // quicker re-checks
1242
+ clearBufferSwitch: true,
1243
+ safeMarginSwitch: 10
1244
+ // leave ~10 s in front of the playhead }
1245
+ }
156
1246
  });
157
1247
  } else {
158
1248
  playerRef.current.configure({
159
- abr: { enabled: false }
1249
+ abr: {
1250
+ enabled: false,
1251
+ switchInterval: 2,
1252
+ // quicker re-checks
1253
+ clearBufferSwitch: true,
1254
+ safeMarginSwitch: 10
1255
+ // leave ~10 s in front of the playhead }
1256
+ }
160
1257
  });
161
1258
  const tracks = playerRef.current.getVariantTracks();
162
1259
  const targetTrack = tracks.find((track) => track.height === height);
@@ -301,30 +1398,166 @@ var useMuxAnalytics = (playerRef, muxConfig, onMuxReady, onMuxDataUpdate) => {
301
1398
  };
302
1399
 
303
1400
  // src/hooks/useShakaUI.ts
304
- var import_react5 = require("react");
1401
+ var import_react6 = require("react");
305
1402
  var import_shaka_player3 = require("shaka-player/dist/shaka-player.ui");
306
- var SkipBackButton = class {
307
- constructor(parent, controls, onSkipBack) {
308
- this.parent = parent;
309
- this.controls = controls;
310
- this.eventManager = { listen: (element, event, handler) => {
311
- element.addEventListener(event, handler);
312
- } };
313
- if (typeof document === "undefined") {
314
- console.warn("SkipBackButton: document is not available (SSR environment)");
315
- return;
1403
+
1404
+ // src/icons/SkipBackIcon.tsx
1405
+ var import_jsx_runtime = require("react/jsx-runtime");
1406
+ var SkipBackIcon = ({ size = 24, className = "" }) => {
1407
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1408
+ "svg",
1409
+ {
1410
+ width: size,
1411
+ height: size,
1412
+ strokeWidth: "2",
1413
+ viewBox: "0 0 24 24",
1414
+ fill: "none",
1415
+ xmlns: "http://www.w3.org/2000/svg",
1416
+ className,
1417
+ children: [
1418
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1419
+ "path",
1420
+ {
1421
+ d: "M3 13C3 17.9706 7.02944 22 12 22C16.9706 22 21 17.9706 21 13C21 8.02944 16.9706 4 12 4",
1422
+ stroke: "currentColor",
1423
+ strokeWidth: "2",
1424
+ strokeLinecap: "round",
1425
+ strokeLinejoin: "round"
1426
+ }
1427
+ ),
1428
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1429
+ "path",
1430
+ {
1431
+ d: "M9 9L9 16",
1432
+ stroke: "currentColor",
1433
+ strokeWidth: "2",
1434
+ strokeLinecap: "round",
1435
+ strokeLinejoin: "round"
1436
+ }
1437
+ ),
1438
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1439
+ "path",
1440
+ {
1441
+ 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",
1442
+ stroke: "currentColor",
1443
+ strokeWidth: "2",
1444
+ strokeLinecap: "round",
1445
+ strokeLinejoin: "round"
1446
+ }
1447
+ ),
1448
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1449
+ "path",
1450
+ {
1451
+ d: "M12 4L4.5 4M4.5 4L6.5 2M4.5 4L6.5 6",
1452
+ stroke: "currentColor",
1453
+ strokeWidth: "2",
1454
+ strokeLinecap: "round",
1455
+ strokeLinejoin: "round"
1456
+ }
1457
+ )
1458
+ ]
316
1459
  }
317
- this.button_ = document.createElement("button");
318
- this.button_.className = "shaka-button motto-native-skip-button";
319
- this.button_.innerHTML = `
320
- <svg width="24px" stroke-width="2" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
321
- <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>
322
- <path d="M9 9L9 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
323
- <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>
324
- <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>
325
- </svg>
326
- `;
327
- this.button_.title = "Skip back 15 seconds";
1460
+ );
1461
+ };
1462
+
1463
+ // src/icons/SkipForwardIcon.tsx
1464
+ var import_jsx_runtime2 = require("react/jsx-runtime");
1465
+ var SkipForwardIcon = ({ size = 24, className = "" }) => {
1466
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1467
+ "svg",
1468
+ {
1469
+ width: size,
1470
+ height: size,
1471
+ strokeWidth: "2",
1472
+ viewBox: "0 0 24 24",
1473
+ fill: "none",
1474
+ xmlns: "http://www.w3.org/2000/svg",
1475
+ className,
1476
+ children: [
1477
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1478
+ "path",
1479
+ {
1480
+ d: "M21 13C21 17.9706 16.9706 22 12 22C7.02944 22 3 17.9706 3 13C3 8.02944 7.02944 4 12 4",
1481
+ stroke: "currentColor",
1482
+ strokeLinecap: "round",
1483
+ strokeLinejoin: "round"
1484
+ }
1485
+ ),
1486
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1487
+ "path",
1488
+ {
1489
+ d: "M12 4H19.5M19.5 4L17.5 2M19.5 4L17.5 6",
1490
+ stroke: "currentColor",
1491
+ strokeLinecap: "round",
1492
+ strokeLinejoin: "round"
1493
+ }
1494
+ ),
1495
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1496
+ "path",
1497
+ {
1498
+ d: "M9 9L9 16",
1499
+ stroke: "currentColor",
1500
+ strokeLinecap: "round",
1501
+ strokeLinejoin: "round"
1502
+ }
1503
+ ),
1504
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1505
+ "path",
1506
+ {
1507
+ 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",
1508
+ stroke: "currentColor",
1509
+ strokeLinecap: "round",
1510
+ strokeLinejoin: "round"
1511
+ }
1512
+ )
1513
+ ]
1514
+ }
1515
+ );
1516
+ };
1517
+
1518
+ // src/icons/BigPlayIcon.tsx
1519
+ var import_jsx_runtime3 = require("react/jsx-runtime");
1520
+ var BigPlayIcon = ({ size = 40, className = "" }) => {
1521
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1522
+ "svg",
1523
+ {
1524
+ width: size,
1525
+ height: size,
1526
+ viewBox: "0 0 24 24",
1527
+ fill: "currentColor",
1528
+ xmlns: "http://www.w3.org/2000/svg",
1529
+ className,
1530
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1531
+ "path",
1532
+ {
1533
+ fillRule: "evenodd",
1534
+ 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",
1535
+ clipRule: "evenodd"
1536
+ }
1537
+ )
1538
+ }
1539
+ );
1540
+ };
1541
+
1542
+ // src/utils/renderIcon.ts
1543
+ var import_server = require("react-dom/server");
1544
+ var import_react5 = require("react");
1545
+ var renderIcon = (Component, props = {}) => {
1546
+ return (0, import_server.renderToStaticMarkup)((0, import_react5.createElement)(Component, props));
1547
+ };
1548
+
1549
+ // src/hooks/useShakaUI.ts
1550
+ var SkipBackButton = class {
1551
+ constructor(parent, controls, onSkipBack, iconSize = 24) {
1552
+ this.parent = parent;
1553
+ this.controls = controls;
1554
+ this.eventManager = { listen: (element, event, handler) => {
1555
+ element.addEventListener(event, handler);
1556
+ } };
1557
+ this.button_ = document.createElement("button");
1558
+ this.button_.className = "shaka-button motto-native-skip-button";
1559
+ this.button_.innerHTML = renderIcon(SkipBackIcon, { size: iconSize });
1560
+ this.button_.title = "Skip back 15 seconds";
328
1561
  this.button_.setAttribute("aria-label", "Skip back 15 seconds");
329
1562
  this.parent.appendChild(this.button_);
330
1563
  this.eventManager.listen(this.button_, "click", () => {
@@ -336,28 +1569,21 @@ var SkipBackButton = class {
336
1569
  }
337
1570
  });
338
1571
  }
1572
+ // Shaka UI will call `release` when the controls are destroyed.
1573
+ // Provide a no-op implementation to avoid TypeErrors.
1574
+ release() {
1575
+ }
339
1576
  };
340
1577
  var SkipForwardButton = class {
341
- constructor(parent, controls, onSkipForward) {
1578
+ constructor(parent, controls, onSkipForward, iconSize = 24) {
342
1579
  this.parent = parent;
343
1580
  this.controls = controls;
344
1581
  this.eventManager = { listen: (element, event, handler) => {
345
1582
  element.addEventListener(event, handler);
346
1583
  } };
347
- if (typeof document === "undefined") {
348
- console.warn("SkipForwardButton: document is not available (SSR environment)");
349
- return;
350
- }
351
1584
  this.button_ = document.createElement("button");
352
1585
  this.button_.className = "shaka-button motto-native-skip-button";
353
- this.button_.innerHTML = `
354
- <svg fill="none" height="24" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
355
- <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"/>
356
- <path d="M12 4H19.5M19.5 4L17.5 2M19.5 4L17.5 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
357
- <path d="M9 9L9 16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
358
- <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"/>
359
- </svg>
360
- `;
1586
+ this.button_.innerHTML = renderIcon(SkipForwardIcon, { size: iconSize });
361
1587
  this.button_.title = "Skip forward 15 seconds";
362
1588
  this.button_.setAttribute("aria-label", "Skip forward 15 seconds");
363
1589
  this.parent.appendChild(this.button_);
@@ -370,266 +1596,56 @@ var SkipForwardButton = class {
370
1596
  }
371
1597
  });
372
1598
  }
1599
+ release() {
1600
+ }
373
1601
  };
374
1602
  var SkipBackButtonFactory = class {
375
- constructor(onSkipBack) {
1603
+ constructor(onSkipBack, iconSize) {
376
1604
  this.onSkipBack = onSkipBack;
1605
+ this.iconSize = iconSize;
377
1606
  }
378
1607
  create(rootElement, controls) {
379
- return new SkipBackButton(rootElement, controls, this.onSkipBack);
1608
+ return new SkipBackButton(rootElement, controls, this.onSkipBack, this.iconSize);
380
1609
  }
381
1610
  };
382
1611
  var SkipForwardButtonFactory = class {
383
- constructor(onSkipForward) {
384
- this.onSkipForward = onSkipForward;
385
- }
386
- create(rootElement, controls) {
387
- return new SkipForwardButton(rootElement, controls, this.onSkipForward);
388
- }
389
- };
390
- var MobilePlayButton = class {
391
- constructor(parent, controls) {
392
- this.parent = parent;
393
- this.controls = controls;
394
- if (typeof document === "undefined") {
395
- console.warn("MobilePlayButton: document is not available (SSR environment)");
396
- return;
397
- }
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;
402
- }
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");
435
- }
436
- }
437
- };
438
- var MobileSkipBackButton = class {
439
- constructor(parent, controls, onSkipBack) {
440
- this.parent = parent;
441
- this.controls = controls;
442
- if (typeof document === "undefined") {
443
- console.warn("MobileSkipBackButton: document is not available (SSR environment)");
444
- return;
445
- }
446
- this.video = controls?.getVideo?.() || parent.querySelector("video") || document.querySelector("video");
447
- if (!this.video) {
448
- console.error("MobileSkipBackButton: No video element found");
449
- return;
450
- }
451
- this.eventManager = { listen: (element, event, handler) => {
452
- element.addEventListener(event, handler);
453
- } };
454
- this.button_ = document.createElement("button");
455
- this.button_.className = "motto-mobile-skip-button";
456
- this.button_.innerHTML = `
457
- <svg width="20px" stroke-width="2" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
458
- <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>
459
- <path d="M9 9L9 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
460
- <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>
461
- <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>
462
- </svg>
463
- `;
464
- this.button_.setAttribute("aria-label", "Skip back 15 seconds");
465
- this.parent.appendChild(this.button_);
466
- this.eventManager.listen(this.button_, "click", () => {
467
- const newTime = Math.max(0, this.video.currentTime - 15);
468
- this.video.currentTime = newTime;
469
- onSkipBack?.(newTime);
470
- });
471
- }
472
- };
473
- var MobileSkipForwardButton = class {
474
- constructor(parent, controls, onSkipForward) {
475
- this.parent = parent;
476
- this.controls = controls;
477
- if (typeof document === "undefined") {
478
- console.warn("MobileSkipForwardButton: document is not available (SSR environment)");
479
- return;
480
- }
481
- this.video = controls?.getVideo?.() || parent.querySelector("video") || document.querySelector("video");
482
- if (!this.video) {
483
- console.error("MobileSkipForwardButton: No video element found");
484
- return;
485
- }
486
- this.eventManager = { listen: (element, event, handler) => {
487
- element.addEventListener(event, handler);
488
- } };
489
- this.button_ = document.createElement("button");
490
- this.button_.className = "motto-mobile-skip-button";
491
- this.button_.innerHTML = `
492
- <svg fill="none" height="20" stroke-width="2" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg">
493
- <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"/>
494
- <path d="M12 4H19.5M19.5 4L17.5 2M19.5 4L17.5 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
495
- <path d="M9 9L9 16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
496
- <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"/>
497
- </svg>
498
- `;
499
- this.button_.setAttribute("aria-label", "Skip forward 15 seconds");
500
- this.parent.appendChild(this.button_);
501
- this.eventManager.listen(this.button_, "click", () => {
502
- const newTime = Math.min(this.video.duration || 0, this.video.currentTime + 15);
503
- this.video.currentTime = newTime;
504
- onSkipForward?.(newTime);
505
- });
506
- }
507
- };
508
- var MobileControlsContainer = class {
509
- constructor(parent, controls, onSkipBack, onSkipForward) {
510
- this.parent = parent;
511
- this.controls = controls;
512
- if (typeof document === "undefined") {
513
- console.warn("MobileControlsContainer: document is not available (SSR environment)");
514
- return;
515
- }
516
- if (!parent) {
517
- console.error("MobileControlsContainer: No parent element provided");
518
- return;
519
- }
520
- this.container_ = document.createElement("div");
521
- this.container_.className = "motto-mobile-controls-overlay";
522
- const controlsGroup = document.createElement("div");
523
- controlsGroup.className = "motto-mobile-controls-group";
524
- new MobileSkipBackButton(controlsGroup, controls, onSkipBack);
525
- new MobilePlayButton(controlsGroup, controls);
526
- new MobileSkipForwardButton(controlsGroup, controls, onSkipForward);
527
- this.container_.appendChild(controlsGroup);
528
- this.parent.appendChild(this.container_);
529
- this.setupVisibilitySync();
530
- }
531
- setupVisibilitySync() {
532
- setTimeout(() => {
533
- this.syncVisibility();
534
- this.observer = new MutationObserver((mutations) => {
535
- mutations.forEach((mutation) => {
536
- if (mutation.type === "attributes" && mutation.attributeName === "class") {
537
- this.syncVisibility();
538
- }
539
- });
540
- });
541
- this.observer.observe(this.parent, {
542
- attributes: true,
543
- attributeFilter: ["class"]
544
- });
545
- const video = this.controls?.getVideo?.() || this.parent.querySelector("video");
546
- if (video) {
547
- video.addEventListener("play", () => {
548
- setTimeout(() => this.syncVisibility(), 50);
549
- });
550
- video.addEventListener("pause", () => {
551
- setTimeout(() => this.syncVisibility(), 50);
552
- });
553
- }
554
- }, 1e3);
555
- }
556
- syncVisibility() {
557
- const mainContainer = this.parent;
558
- const hasNoCursor = mainContainer.classList.contains("no-cursor");
559
- const video = this.controls?.getVideo?.() || this.parent.querySelector("video");
560
- const isVideoPaused = video ? video.paused : false;
561
- const isControlsVisible = !hasNoCursor || isVideoPaused;
562
- if (this.container_) {
563
- if (isControlsVisible) {
564
- this.container_.style.opacity = "1";
565
- this.container_.style.pointerEvents = "none";
566
- } else {
567
- this.container_.style.opacity = "0";
568
- this.container_.style.pointerEvents = "none";
569
- }
570
- }
571
- }
572
- isElementVisible(element) {
573
- if (typeof window === "undefined") {
574
- return false;
575
- }
576
- const style = window.getComputedStyle(element);
577
- const hasHiddenClass = element.classList.contains("shaka-hidden") || element.classList.contains("hidden") || element.classList.contains("shaka-fade-out");
578
- return style.display !== "none" && style.visibility !== "hidden" && style.opacity !== "0" && !element.hidden && !hasHiddenClass;
579
- }
580
- };
581
- var MobileControlsContainerFactory = class {
582
- constructor(onSkipBack, onSkipForward) {
583
- this.onSkipBack = onSkipBack;
1612
+ constructor(onSkipForward, iconSize) {
584
1613
  this.onSkipForward = onSkipForward;
1614
+ this.iconSize = iconSize;
585
1615
  }
586
1616
  create(rootElement, controls) {
587
- return new MobileControlsContainer(rootElement, controls, this.onSkipBack, this.onSkipForward);
1617
+ return new SkipForwardButton(rootElement, controls, this.onSkipForward, this.iconSize);
588
1618
  }
589
1619
  };
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 () => {
594
- if (typeof window === "undefined" || typeof document === "undefined") {
595
- console.warn("useShakaUI: Cannot initialize UI in SSR environment");
596
- return null;
597
- }
1620
+ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig, seekbarColors, onSkipBack, onSkipForward, iconSizes) => {
1621
+ const uiRef = (0, import_react6.useRef)(null);
1622
+ const registeredElements = (0, import_react6.useRef)(/* @__PURE__ */ new Set());
1623
+ const initializeUI = (0, import_react6.useCallback)(async () => {
598
1624
  if (!controls || !containerRef.current || !playerRef.current || !videoRef.current) {
599
1625
  return null;
600
1626
  }
601
- const isMobile = typeof window !== "undefined" && typeof navigator !== "undefined" && (window.innerWidth <= 767 || /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));
602
1627
  if (!registeredElements.current.has("skip_back_button")) {
603
- import_shaka_player3.ui.Controls.registerElement("skip_back_button", new SkipBackButtonFactory(onSkipBack));
1628
+ import_shaka_player3.ui.Controls.registerElement("skip_back_button", new SkipBackButtonFactory(onSkipBack, iconSizes?.skipButtons));
604
1629
  registeredElements.current.add("skip_back_button");
605
1630
  }
606
1631
  if (!registeredElements.current.has("skip_forward_button")) {
607
- import_shaka_player3.ui.Controls.registerElement("skip_forward_button", new SkipForwardButtonFactory(onSkipForward));
1632
+ import_shaka_player3.ui.Controls.registerElement("skip_forward_button", new SkipForwardButtonFactory(onSkipForward, iconSizes?.skipButtons));
608
1633
  registeredElements.current.add("skip_forward_button");
609
1634
  }
610
- if (isMobile) {
611
- if (!registeredElements.current.has("mobile_controls_container")) {
612
- import_shaka_player3.ui.Controls.registerElement("mobile_controls_container", new MobileControlsContainerFactory(onSkipBack, onSkipForward));
613
- registeredElements.current.add("mobile_controls_container");
614
- }
615
- }
616
1635
  const ui = new import_shaka_player3.ui.Overlay(playerRef.current, containerRef.current, videoRef.current);
617
1636
  uiRef.current = ui;
618
- const controlPanelElements = isMobile ? [
619
- "mute",
620
- "time_and_duration",
621
- "spacer",
622
- "fullscreen",
623
- "overflow_menu"
624
- ] : [
625
- "skip_back_button",
626
- "play_pause",
627
- "skip_forward_button",
1637
+ const isMobile = window.innerWidth <= 767;
1638
+ const controlPanelElements = [
1639
+ ...isMobile ? [] : ["skip_back_button"],
1640
+ ...isMobile ? [] : ["play_pause"],
1641
+ ...isMobile ? [] : ["skip_forward_button"],
628
1642
  "mute",
629
- "volume",
1643
+ ...isMobile ? [] : ["volume"],
1644
+ // Only include volume on desktop
630
1645
  "time_and_duration",
631
1646
  "spacer",
632
1647
  "fullscreen",
1648
+ "cast",
633
1649
  "overflow_menu"
634
1650
  ];
635
1651
  const uiConfig = {
@@ -642,10 +1658,16 @@ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig,
642
1658
  // Progress/played portion (white)
643
1659
  },
644
1660
  controlPanelElements,
1661
+ addBigPlayButton: isMobile,
645
1662
  ...chromecastConfig?.receiverApplicationId && {
646
1663
  "castReceiverAppId": chromecastConfig.receiverApplicationId,
647
1664
  "castAndroidReceiverCompatible": false
648
- }
1665
+ },
1666
+ overflowMenuButtons: [
1667
+ "quality",
1668
+ "picture_in_picture",
1669
+ "playback_rate"
1670
+ ]
649
1671
  };
650
1672
  if (chromecastConfig?.receiverApplicationId) {
651
1673
  uiConfig.castReceiverAppId = chromecastConfig.receiverApplicationId;
@@ -653,17 +1675,33 @@ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig,
653
1675
  }
654
1676
  ui.configure(uiConfig);
655
1677
  if (isMobile) {
656
- setTimeout(() => {
657
- const container = containerRef.current;
658
- const video = videoRef.current;
659
- if (container && video) {
660
- new MobileControlsContainer(container, { getVideo: () => video }, onSkipBack, onSkipForward);
1678
+ const customizeBigPlayButton = () => {
1679
+ const bigPlayButton = containerRef.current?.querySelector(".shaka-big-play-button");
1680
+ if (bigPlayButton && !bigPlayButton.hasAttribute("data-customized")) {
1681
+ const buttonSize = iconSizes?.bigPlayButton || 40;
1682
+ bigPlayButton.innerHTML = renderIcon(BigPlayIcon, { size: buttonSize });
1683
+ bigPlayButton.setAttribute("data-customized", "true");
1684
+ const buttonElement = bigPlayButton;
1685
+ buttonElement.style.display = "flex";
1686
+ buttonElement.style.alignItems = "center";
1687
+ buttonElement.style.justifyContent = "center";
661
1688
  }
662
- }, 500);
1689
+ };
1690
+ setTimeout(customizeBigPlayButton, 100);
1691
+ const observer = new MutationObserver(() => {
1692
+ customizeBigPlayButton();
1693
+ });
1694
+ if (containerRef.current) {
1695
+ observer.observe(containerRef.current, {
1696
+ childList: true,
1697
+ subtree: true,
1698
+ attributes: false
1699
+ });
1700
+ }
663
1701
  }
664
1702
  return ui;
665
- }, [controls, containerRef, playerRef, videoRef, chromecastConfig, seekbarColors, onSkipBack, onSkipForward]);
666
- const destroyUI = (0, import_react5.useCallback)(() => {
1703
+ }, [controls, containerRef, playerRef, videoRef, chromecastConfig, seekbarColors, onSkipBack, onSkipForward, iconSizes]);
1704
+ const destroyUI = (0, import_react6.useCallback)(() => {
667
1705
  if (uiRef.current) {
668
1706
  try {
669
1707
  uiRef.current.destroy();
@@ -681,9 +1719,9 @@ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig,
681
1719
  };
682
1720
 
683
1721
  // src/hooks/useEventHandlers.ts
684
- var import_react6 = require("react");
1722
+ var import_react7 = require("react");
685
1723
  var useEventHandlers = (videoRef, handlers) => {
686
- const setupEventListeners = (0, import_react6.useCallback)(() => {
1724
+ const setupEventListeners = (0, import_react7.useCallback)(() => {
687
1725
  const video = videoRef.current;
688
1726
  if (!video) return;
689
1727
  const { onPlay, onPause, onEnded, onLoadStart, onCanPlay } = handlers;
@@ -693,7 +1731,7 @@ var useEventHandlers = (videoRef, handlers) => {
693
1731
  if (onLoadStart) video.addEventListener("loadstart", onLoadStart);
694
1732
  if (onCanPlay) video.addEventListener("canplay", onCanPlay);
695
1733
  }, [videoRef, handlers]);
696
- const cleanupEventListeners = (0, import_react6.useCallback)(() => {
1734
+ const cleanupEventListeners = (0, import_react7.useCallback)(() => {
697
1735
  const video = videoRef.current;
698
1736
  if (!video) return;
699
1737
  const { onPlay, onPause, onEnded, onLoadStart, onCanPlay } = handlers;
@@ -710,12 +1748,13 @@ var useEventHandlers = (videoRef, handlers) => {
710
1748
  };
711
1749
 
712
1750
  // src/hooks/useLiveBadge.ts
713
- var import_react7 = require("react");
1751
+ var import_react8 = require("react");
714
1752
  var useLiveBadge = (playerRef, options = {}) => {
715
- const [isLive, setIsLive] = (0, import_react7.useState)(false);
716
- const [isVisible, setIsVisible] = (0, import_react7.useState)(false);
717
- const intervalRef = (0, import_react7.useRef)(null);
718
- const { enabled = true, onLiveStateChange } = options;
1753
+ const [isLive, setIsLive] = (0, import_react8.useState)(false);
1754
+ const [isVisible, setIsVisible] = (0, import_react8.useState)(false);
1755
+ const [isNearLiveEdge, setIsNearLiveEdge] = (0, import_react8.useState)(false);
1756
+ const intervalRef = (0, import_react8.useRef)(null);
1757
+ const { enabled = true, onLiveStateChange, liveThresholdSeconds = 15 } = options;
719
1758
  const checkLiveStatus = () => {
720
1759
  if (!playerRef.current || !enabled) {
721
1760
  return;
@@ -734,33 +1773,53 @@ var useLiveBadge = (playerRef, options = {}) => {
734
1773
  return;
735
1774
  }
736
1775
  const liveStatus = timeline.isLive();
1776
+ let nearLiveEdge = false;
1777
+ if (liveStatus) {
1778
+ try {
1779
+ const seekRange = player.getSeekRange();
1780
+ const videoElement = player.getMediaElement();
1781
+ if (seekRange && videoElement) {
1782
+ const liveEdge = seekRange.end;
1783
+ const currentTime = videoElement.currentTime;
1784
+ const timeBehindLive = liveEdge - currentTime;
1785
+ nearLiveEdge = timeBehindLive <= liveThresholdSeconds;
1786
+ }
1787
+ } catch (error) {
1788
+ console.error("Error checking live edge position:", error);
1789
+ nearLiveEdge = liveStatus;
1790
+ }
1791
+ }
737
1792
  if (liveStatus !== isLive) {
738
1793
  setIsLive(liveStatus);
739
- setIsVisible(liveStatus);
740
1794
  onLiveStateChange?.(liveStatus);
741
1795
  }
1796
+ if (nearLiveEdge !== isNearLiveEdge) {
1797
+ setIsNearLiveEdge(nearLiveEdge);
1798
+ setIsVisible(nearLiveEdge);
1799
+ }
742
1800
  } catch (error) {
743
1801
  if (error instanceof Error && !error.message.includes("not a function")) {
744
1802
  console.error("Error checking live status:", error);
745
1803
  }
746
1804
  }
747
1805
  };
748
- (0, import_react7.useEffect)(() => {
1806
+ (0, import_react8.useEffect)(() => {
749
1807
  if (!enabled) {
750
1808
  setIsLive(false);
751
1809
  setIsVisible(false);
1810
+ setIsNearLiveEdge(false);
752
1811
  return;
753
1812
  }
754
1813
  checkLiveStatus();
755
- intervalRef.current = setInterval(checkLiveStatus, 2e3);
1814
+ intervalRef.current = setInterval(checkLiveStatus, 1e3);
756
1815
  return () => {
757
1816
  if (intervalRef.current) {
758
1817
  clearInterval(intervalRef.current);
759
1818
  intervalRef.current = null;
760
1819
  }
761
1820
  };
762
- }, [enabled, playerRef.current]);
763
- (0, import_react7.useEffect)(() => {
1821
+ }, [enabled, playerRef.current, liveThresholdSeconds]);
1822
+ (0, import_react8.useEffect)(() => {
764
1823
  return () => {
765
1824
  if (intervalRef.current) {
766
1825
  clearInterval(intervalRef.current);
@@ -772,6 +1831,7 @@ var useLiveBadge = (playerRef, options = {}) => {
772
1831
  return {
773
1832
  isLive,
774
1833
  isVisible,
1834
+ isNearLiveEdge,
775
1835
  hideBadge,
776
1836
  showBadge,
777
1837
  checkLiveStatus
@@ -779,23 +1839,52 @@ var useLiveBadge = (playerRef, options = {}) => {
779
1839
  };
780
1840
 
781
1841
  // src/hooks/usePosterFallback.ts
782
- var import_react8 = require("react");
1842
+ var import_react9 = require("react");
783
1843
 
784
1844
  // src/hooks/useLiveIndicator.ts
785
- var import_react9 = require("react");
786
- var useLiveIndicator = (containerRef, options = {}) => {
787
- const observerRef = (0, import_react9.useRef)(null);
1845
+ var import_react10 = require("react");
1846
+ var useLiveIndicator = (containerRef, playerRef, options = {}) => {
1847
+ const observerRef = (0, import_react10.useRef)(null);
1848
+ const intervalRef = (0, import_react10.useRef)(null);
788
1849
  const {
789
1850
  enabled = true,
790
1851
  indicatorColor = "#ff0000",
791
1852
  indicatorSize = 8,
792
- showPulseAnimation = true
1853
+ showPulseAnimation = true,
1854
+ liveThresholdSeconds = 15
793
1855
  } = options;
794
- (0, import_react9.useEffect)(() => {
795
- if (typeof window === "undefined" || typeof document === "undefined") {
796
- return;
1856
+ const isNearLiveEdge = (player) => {
1857
+ if (!player) return false;
1858
+ try {
1859
+ if (!player.getManifest || !player.getPresentationTimeline || typeof player.getPresentationTimeline !== "function") {
1860
+ return false;
1861
+ }
1862
+ const manifest = player.getManifest();
1863
+ if (!manifest) {
1864
+ return false;
1865
+ }
1866
+ const timeline = player.getPresentationTimeline();
1867
+ if (!timeline || typeof timeline.isLive !== "function") {
1868
+ return false;
1869
+ }
1870
+ const liveStatus = timeline.isLive();
1871
+ if (!liveStatus) return false;
1872
+ const seekRange = player.getSeekRange();
1873
+ const videoElement = player.getMediaElement();
1874
+ if (seekRange && videoElement) {
1875
+ const liveEdge = seekRange.end;
1876
+ const currentTime = videoElement.currentTime;
1877
+ const timeBehindLive = liveEdge - currentTime;
1878
+ return timeBehindLive <= liveThresholdSeconds;
1879
+ }
1880
+ return false;
1881
+ } catch (error) {
1882
+ console.error("Error checking live edge position in indicator:", error);
1883
+ return false;
797
1884
  }
798
- if (!containerRef.current || !enabled) {
1885
+ };
1886
+ (0, import_react10.useEffect)(() => {
1887
+ if (!containerRef.current || !playerRef.current || !enabled) {
799
1888
  return;
800
1889
  }
801
1890
  const addLiveIndicator = (currentTimeElement) => {
@@ -826,7 +1915,7 @@ var useLiveIndicator = (containerRef, options = {}) => {
826
1915
  const currentTimeElements = containerRef.current?.querySelectorAll(".shaka-current-time");
827
1916
  currentTimeElements?.forEach((element) => {
828
1917
  const textContent = element.textContent?.trim() || "";
829
- if (textContent.toLowerCase().includes("live")) {
1918
+ if (textContent.toLowerCase().includes("live") && isNearLiveEdge(playerRef.current)) {
830
1919
  addLiveIndicator(element);
831
1920
  } else {
832
1921
  removeLiveIndicator(element);
@@ -834,6 +1923,7 @@ var useLiveIndicator = (containerRef, options = {}) => {
834
1923
  });
835
1924
  };
836
1925
  checkForLiveContent();
1926
+ intervalRef.current = setInterval(checkForLiveContent, 1e3);
837
1927
  observerRef.current = new MutationObserver((mutations) => {
838
1928
  let shouldCheck = false;
839
1929
  mutations.forEach((mutation) => {
@@ -859,333 +1949,1264 @@ var useLiveIndicator = (containerRef, options = {}) => {
859
1949
  characterData: true,
860
1950
  characterDataOldValue: true
861
1951
  });
862
- const intervalId = setInterval(checkForLiveContent, 1e3);
863
1952
  return () => {
864
1953
  if (observerRef.current) {
865
1954
  observerRef.current.disconnect();
866
1955
  }
867
- clearInterval(intervalId);
1956
+ if (intervalRef.current) {
1957
+ clearInterval(intervalRef.current);
1958
+ }
868
1959
  };
869
- }, [containerRef, enabled, indicatorColor, indicatorSize, showPulseAnimation]);
1960
+ }, [containerRef, playerRef, enabled, indicatorColor, indicatorSize, showPulseAnimation, liveThresholdSeconds]);
870
1961
  return {
871
1962
  // Expose method to manually trigger check if needed
872
1963
  checkForLiveContent: () => {
873
1964
  const currentTimeElements = containerRef.current?.querySelectorAll(".shaka-current-time");
874
1965
  currentTimeElements?.forEach((element) => {
875
1966
  const textContent = element.textContent?.trim() || "";
876
- if (textContent.toLowerCase().includes("live")) {
1967
+ if (textContent.toLowerCase().includes("live") && isNearLiveEdge(playerRef.current)) {
877
1968
  }
878
1969
  });
879
1970
  }
880
1971
  };
881
1972
  };
882
1973
 
883
- // src/hooks/useShakaAbsoluteTime.ts
884
- var import_react10 = require("react");
885
- function useShakaAbsoluteTime({
886
- player,
887
- controls,
888
- manualStreamStartDate
889
- }) {
890
- const [detectedStreamStart, setDetectedStreamStart] = (0, import_react10.useState)(null);
891
- const detectStreamStartFromManifest = async () => {
892
- if (!player) return null;
893
- try {
894
- const manifest = player.getManifest();
895
- if (!manifest) return null;
896
- const isLive = player.isLive();
897
- if (!isLive) return null;
898
- const video = player.getMediaElement();
899
- if (video && video.seekable && video.seekable.length > 0) {
900
- const seekableStart = video.seekable.start(0);
901
- const seekableEnd = video.seekable.end(0);
902
- const seekableDuration = seekableEnd - seekableStart;
903
- const now = Date.now() / 1e3;
904
- const estimatedStreamStart = now - seekableDuration;
905
- return new Date(estimatedStreamStart * 1e3);
906
- }
907
- const stats = player.getStats();
908
- if (stats && stats.manifestTimeSeconds) {
909
- return new Date((Date.now() / 1e3 - stats.manifestTimeSeconds) * 1e3);
910
- }
911
- try {
912
- const bufferedTimeRanges = video?.buffered;
913
- if (bufferedTimeRanges && bufferedTimeRanges.length > 0) {
914
- const totalBuffered = bufferedTimeRanges.end(bufferedTimeRanges.length - 1);
915
- const now = Date.now() / 1e3;
916
- return new Date((now - totalBuffered) * 1e3);
1974
+ // src/hooks/useKeyboardControls.ts
1975
+ var import_react11 = require("react");
1976
+ var useKeyboardControls = (videoRef, options = {}) => {
1977
+ const { skipBack, skipForward, enabled = true } = options;
1978
+ const isDesktop = (0, import_react11.useCallback)(() => {
1979
+ return window.innerWidth > 767 && !/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
1980
+ }, []);
1981
+ const handleKeydown = (0, import_react11.useCallback)((event) => {
1982
+ if (!enabled || !isDesktop() || !videoRef.current) return;
1983
+ const activeElement = document.activeElement;
1984
+ if (activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || activeElement.isContentEditable)) {
1985
+ return;
1986
+ }
1987
+ switch (event.key) {
1988
+ case "ArrowLeft":
1989
+ event.preventDefault();
1990
+ skipBack?.();
1991
+ break;
1992
+ case "ArrowRight":
1993
+ event.preventDefault();
1994
+ skipForward?.();
1995
+ break;
1996
+ case " ":
1997
+ case "Space":
1998
+ event.preventDefault();
1999
+ if (videoRef.current.paused) {
2000
+ videoRef.current.play();
2001
+ } else {
2002
+ videoRef.current.pause();
917
2003
  }
918
- } catch (error) {
919
- console.warn("Error extracting buffered timing info:", error);
2004
+ break;
2005
+ }
2006
+ }, [enabled, videoRef, skipBack, skipForward, isDesktop]);
2007
+ (0, import_react11.useEffect)(() => {
2008
+ if (!enabled || !isDesktop()) return;
2009
+ document.addEventListener("keydown", handleKeydown);
2010
+ return () => {
2011
+ document.removeEventListener("keydown", handleKeydown);
2012
+ };
2013
+ }, [handleKeydown, enabled, isDesktop]);
2014
+ return {
2015
+ isDesktop: isDesktop()
2016
+ };
2017
+ };
2018
+
2019
+ // src/components/Loading.tsx
2020
+ var import_tailwind_merge = require("tailwind-merge");
2021
+ var import_jsx_runtime4 = require("react/jsx-runtime");
2022
+ var Loading = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
2023
+ "div",
2024
+ {
2025
+ className: (0, import_tailwind_merge.twMerge)(
2026
+ "relative bg-[#151515] md:rounded-2xl! overflow-hidden aspect-video text-white w-full h-full flex justify-center items-center text-[10px]",
2027
+ className
2028
+ ),
2029
+ role: "status",
2030
+ children: [
2031
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "shaka-spinner-container flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
2032
+ "svg",
2033
+ {
2034
+ className: "shaka-spinner-svg animate-spin h-12 w-12",
2035
+ viewBox: "0 0 64 64",
2036
+ xmlns: "http://www.w3.org/2000/svg",
2037
+ children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
2038
+ "circle",
2039
+ {
2040
+ className: "shaka-spinner-path",
2041
+ cx: "32",
2042
+ cy: "32",
2043
+ r: "28",
2044
+ strokeWidth: "4",
2045
+ strokeLinecap: "round"
2046
+ }
2047
+ )
2048
+ }
2049
+ ) }),
2050
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "sr-only", children: "Loading..." })
2051
+ ]
2052
+ }
2053
+ );
2054
+
2055
+ // src/components/ErrorScreen.tsx
2056
+ var import_jsx_runtime5 = require("react/jsx-runtime");
2057
+ 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: [
2058
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2059
+ "svg",
2060
+ {
2061
+ className: "w-24 h-24 m-6",
2062
+ fill: "none",
2063
+ stroke: "currentColor",
2064
+ strokeWidth: "2",
2065
+ style: { width: 96 },
2066
+ viewBox: "0 0 24 24",
2067
+ xmlns: "http://www.w3.org/2000/svg",
2068
+ children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2069
+ "path",
2070
+ {
2071
+ d: "M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z",
2072
+ strokeLinecap: "round",
2073
+ strokeLinejoin: "round"
2074
+ }
2075
+ )
2076
+ }
2077
+ ),
2078
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
2079
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "text-2xl mb-2", children: title || "Playback Error" }),
2080
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-lg", children: description || "Unable to play the video. Please try again later." })
2081
+ ] })
2082
+ ] }) });
2083
+
2084
+ // src/components/Title.tsx
2085
+ var import_jsx_runtime6 = require("react/jsx-runtime");
2086
+ 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 }) });
2087
+
2088
+ // src/components/LiveBadge.tsx
2089
+ var import_jsx_runtime7 = require("react/jsx-runtime");
2090
+ var LiveBadge = ({
2091
+ isVisible,
2092
+ position = "top-right",
2093
+ className = "",
2094
+ style = {},
2095
+ text = "LIVE"
2096
+ }) => {
2097
+ if (!isVisible) return null;
2098
+ const positionClasses = {
2099
+ "top-left": "top-4 left-4",
2100
+ "top-right": "top-4 right-4",
2101
+ "bottom-left": "bottom-4 left-4",
2102
+ "bottom-right": "bottom-4 right-4"
2103
+ };
2104
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
2105
+ "div",
2106
+ {
2107
+ className: `
2108
+ absolute z-50
2109
+ ${positionClasses[position]}
2110
+ bg-red-600 text-white
2111
+ px-2 py-1
2112
+ rounded-md
2113
+ text-xs font-bold
2114
+ uppercase tracking-wide
2115
+ shadow-lg
2116
+ animate-pulse
2117
+ pointer-events-none
2118
+ ${className}
2119
+ `,
2120
+ style,
2121
+ children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "flex items-center gap-1", children: [
2122
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-2 h-2 bg-white rounded-full animate-pulse" }),
2123
+ text
2124
+ ] })
2125
+ }
2126
+ );
2127
+ };
2128
+
2129
+ // src/styles.css
2130
+ styleInject(`/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
2131
+ @layer properties;
2132
+ @layer theme, base, components, utilities;
2133
+ @layer theme {
2134
+ :root,
2135
+ :host {
2136
+ --font-sans:
2137
+ ui-sans-serif,
2138
+ system-ui,
2139
+ sans-serif,
2140
+ "Apple Color Emoji",
2141
+ "Segoe UI Emoji",
2142
+ "Segoe UI Symbol",
2143
+ "Noto Color Emoji";
2144
+ --font-mono:
2145
+ ui-monospace,
2146
+ SFMono-Regular,
2147
+ Menlo,
2148
+ Monaco,
2149
+ Consolas,
2150
+ "Liberation Mono",
2151
+ "Courier New",
2152
+ monospace;
2153
+ --color-red-600: oklch(57.7% 0.245 27.325);
2154
+ --color-black: #000;
2155
+ --color-white: #fff;
2156
+ --spacing: 0.25rem;
2157
+ --text-xs: 0.75rem;
2158
+ --text-xs--line-height: calc(1 / 0.75);
2159
+ --text-sm: 0.875rem;
2160
+ --text-sm--line-height: calc(1.25 / 0.875);
2161
+ --text-base: 1rem;
2162
+ --text-base--line-height: calc(1.5 / 1);
2163
+ --text-lg: 1.125rem;
2164
+ --text-lg--line-height: calc(1.75 / 1.125);
2165
+ --text-xl: 1.25rem;
2166
+ --text-xl--line-height: calc(1.75 / 1.25);
2167
+ --text-2xl: 1.5rem;
2168
+ --text-2xl--line-height: calc(2 / 1.5);
2169
+ --text-5xl: 3rem;
2170
+ --text-5xl--line-height: 1;
2171
+ --font-weight-medium: 500;
2172
+ --font-weight-semibold: 600;
2173
+ --font-weight-bold: 700;
2174
+ --tracking-wide: 0.025em;
2175
+ --tracking-widest: 0.1em;
2176
+ --radius-md: 0.375rem;
2177
+ --radius-2xl: 1rem;
2178
+ --animate-spin: spin 1s linear infinite;
2179
+ --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
2180
+ --aspect-video: 16 / 9;
2181
+ --default-transition-duration: 150ms;
2182
+ --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2183
+ --default-font-family: var(--font-sans);
2184
+ --default-mono-font-family: var(--font-mono);
2185
+ }
2186
+ }
2187
+ @layer base {
2188
+ *,
2189
+ ::after,
2190
+ ::before,
2191
+ ::backdrop,
2192
+ ::file-selector-button {
2193
+ box-sizing: border-box;
2194
+ margin: 0;
2195
+ padding: 0;
2196
+ border: 0 solid;
2197
+ }
2198
+ html,
2199
+ :host {
2200
+ line-height: 1.5;
2201
+ -webkit-text-size-adjust: 100%;
2202
+ tab-size: 4;
2203
+ 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");
2204
+ font-feature-settings: var(--default-font-feature-settings, normal);
2205
+ font-variation-settings: var(--default-font-variation-settings, normal);
2206
+ -webkit-tap-highlight-color: transparent;
2207
+ }
2208
+ hr {
2209
+ height: 0;
2210
+ color: inherit;
2211
+ border-top-width: 1px;
2212
+ }
2213
+ abbr:where([title]) {
2214
+ -webkit-text-decoration: underline dotted;
2215
+ text-decoration: underline dotted;
2216
+ }
2217
+ h1,
2218
+ h2,
2219
+ h3,
2220
+ h4,
2221
+ h5,
2222
+ h6 {
2223
+ font-size: inherit;
2224
+ font-weight: inherit;
2225
+ }
2226
+ a {
2227
+ color: inherit;
2228
+ -webkit-text-decoration: inherit;
2229
+ text-decoration: inherit;
2230
+ }
2231
+ b,
2232
+ strong {
2233
+ font-weight: bolder;
2234
+ }
2235
+ code,
2236
+ kbd,
2237
+ samp,
2238
+ pre {
2239
+ font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
2240
+ font-feature-settings: var(--default-mono-font-feature-settings, normal);
2241
+ font-variation-settings: var(--default-mono-font-variation-settings, normal);
2242
+ font-size: 1em;
2243
+ }
2244
+ small {
2245
+ font-size: 80%;
2246
+ }
2247
+ sub,
2248
+ sup {
2249
+ font-size: 75%;
2250
+ line-height: 0;
2251
+ position: relative;
2252
+ vertical-align: baseline;
2253
+ }
2254
+ sub {
2255
+ bottom: -0.25em;
2256
+ }
2257
+ sup {
2258
+ top: -0.5em;
2259
+ }
2260
+ table {
2261
+ text-indent: 0;
2262
+ border-color: inherit;
2263
+ border-collapse: collapse;
2264
+ }
2265
+ :-moz-focusring {
2266
+ outline: auto;
2267
+ }
2268
+ progress {
2269
+ vertical-align: baseline;
2270
+ }
2271
+ summary {
2272
+ display: list-item;
2273
+ }
2274
+ ol,
2275
+ ul,
2276
+ menu {
2277
+ list-style: none;
2278
+ }
2279
+ img,
2280
+ svg,
2281
+ video,
2282
+ canvas,
2283
+ audio,
2284
+ iframe,
2285
+ embed,
2286
+ object {
2287
+ display: block;
2288
+ vertical-align: middle;
2289
+ }
2290
+ img,
2291
+ video {
2292
+ max-width: 100%;
2293
+ height: auto;
2294
+ }
2295
+ button,
2296
+ input,
2297
+ select,
2298
+ optgroup,
2299
+ textarea,
2300
+ ::file-selector-button {
2301
+ font: inherit;
2302
+ font-feature-settings: inherit;
2303
+ font-variation-settings: inherit;
2304
+ letter-spacing: inherit;
2305
+ color: inherit;
2306
+ border-radius: 0;
2307
+ background-color: transparent;
2308
+ opacity: 1;
2309
+ }
2310
+ :where(select:is([multiple], [size])) optgroup {
2311
+ font-weight: bolder;
2312
+ }
2313
+ :where(select:is([multiple], [size])) optgroup option {
2314
+ padding-inline-start: 20px;
2315
+ }
2316
+ ::file-selector-button {
2317
+ margin-inline-end: 4px;
2318
+ }
2319
+ ::placeholder {
2320
+ opacity: 1;
2321
+ }
2322
+ @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
2323
+ ::placeholder {
2324
+ color: currentcolor;
2325
+ @supports (color: color-mix(in lab, red, red)) {
2326
+ color: color-mix(in oklab, currentcolor 50%, transparent);
920
2327
  }
921
- console.warn("Could not detect stream start time from manifest");
922
- return null;
923
- } catch (error) {
924
- console.warn("Error detecting stream start time:", error);
925
- return null;
926
2328
  }
927
- };
928
- (0, import_react10.useEffect)(() => {
929
- if (!player || manualStreamStartDate) return;
930
- const detectStartTime = async () => {
931
- setTimeout(async () => {
932
- const detectedStart = await detectStreamStartFromManifest();
933
- if (detectedStart) {
934
- setDetectedStreamStart(detectedStart);
935
- console.log("Detected stream start time:", detectedStart.toISOString());
936
- }
937
- }, 1e3);
938
- };
939
- const onManifestParsed = () => {
940
- detectStartTime();
941
- };
942
- detectStartTime();
943
- try {
944
- player.addEventListener("manifestparsed", onManifestParsed);
945
- player.addEventListener("streaming", onManifestParsed);
946
- } catch (error) {
947
- console.warn("Could not add manifest event listeners:", error);
2329
+ }
2330
+ textarea {
2331
+ resize: vertical;
2332
+ }
2333
+ ::-webkit-search-decoration {
2334
+ -webkit-appearance: none;
2335
+ }
2336
+ ::-webkit-date-and-time-value {
2337
+ min-height: 1lh;
2338
+ text-align: inherit;
2339
+ }
2340
+ ::-webkit-datetime-edit {
2341
+ display: inline-flex;
2342
+ }
2343
+ ::-webkit-datetime-edit-fields-wrapper {
2344
+ padding: 0;
2345
+ }
2346
+ ::-webkit-datetime-edit,
2347
+ ::-webkit-datetime-edit-year-field,
2348
+ ::-webkit-datetime-edit-month-field,
2349
+ ::-webkit-datetime-edit-day-field,
2350
+ ::-webkit-datetime-edit-hour-field,
2351
+ ::-webkit-datetime-edit-minute-field,
2352
+ ::-webkit-datetime-edit-second-field,
2353
+ ::-webkit-datetime-edit-millisecond-field,
2354
+ ::-webkit-datetime-edit-meridiem-field {
2355
+ padding-block: 0;
2356
+ }
2357
+ :-moz-ui-invalid {
2358
+ box-shadow: none;
2359
+ }
2360
+ button,
2361
+ input:where([type=button], [type=reset], [type=submit]),
2362
+ ::file-selector-button {
2363
+ appearance: button;
2364
+ }
2365
+ ::-webkit-inner-spin-button,
2366
+ ::-webkit-outer-spin-button {
2367
+ height: auto;
2368
+ }
2369
+ [hidden]:where(:not([hidden=until-found])) {
2370
+ display: none !important;
2371
+ }
2372
+ }
2373
+ @layer utilities {
2374
+ .pointer-events-auto {
2375
+ pointer-events: auto;
2376
+ }
2377
+ .pointer-events-none {
2378
+ pointer-events: none;
2379
+ }
2380
+ .visible {
2381
+ visibility: visible;
2382
+ }
2383
+ .sr-only {
2384
+ position: absolute;
2385
+ width: 1px;
2386
+ height: 1px;
2387
+ padding: 0;
2388
+ margin: -1px;
2389
+ overflow: hidden;
2390
+ clip: rect(0, 0, 0, 0);
2391
+ white-space: nowrap;
2392
+ border-width: 0;
2393
+ }
2394
+ .absolute {
2395
+ position: absolute;
2396
+ }
2397
+ .fixed {
2398
+ position: fixed;
2399
+ }
2400
+ .relative {
2401
+ position: relative;
2402
+ }
2403
+ .static {
2404
+ position: static;
2405
+ }
2406
+ .inset-0 {
2407
+ inset: calc(var(--spacing) * 0);
2408
+ }
2409
+ .top-0 {
2410
+ top: calc(var(--spacing) * 0);
2411
+ }
2412
+ .top-4 {
2413
+ top: calc(var(--spacing) * 4);
2414
+ }
2415
+ .right-0 {
2416
+ right: calc(var(--spacing) * 0);
2417
+ }
2418
+ .right-4 {
2419
+ right: calc(var(--spacing) * 4);
2420
+ }
2421
+ .bottom-0 {
2422
+ bottom: calc(var(--spacing) * 0);
2423
+ }
2424
+ .bottom-4 {
2425
+ bottom: calc(var(--spacing) * 4);
2426
+ }
2427
+ .left-0 {
2428
+ left: calc(var(--spacing) * 0);
2429
+ }
2430
+ .left-4 {
2431
+ left: calc(var(--spacing) * 4);
2432
+ }
2433
+ .z-10 {
2434
+ z-index: 10;
2435
+ }
2436
+ .z-50 {
2437
+ z-index: 50;
2438
+ }
2439
+ .container {
2440
+ width: 100%;
2441
+ @media (width >= 40rem) {
2442
+ max-width: 40rem;
2443
+ }
2444
+ @media (width >= 48rem) {
2445
+ max-width: 48rem;
2446
+ }
2447
+ @media (width >= 64rem) {
2448
+ max-width: 64rem;
2449
+ }
2450
+ @media (width >= 80rem) {
2451
+ max-width: 80rem;
2452
+ }
2453
+ @media (width >= 96rem) {
2454
+ max-width: 96rem;
2455
+ }
2456
+ }
2457
+ .m-6 {
2458
+ margin: calc(var(--spacing) * 6);
2459
+ }
2460
+ .mt-1 {
2461
+ margin-top: calc(var(--spacing) * 1);
2462
+ }
2463
+ .mt-3 {
2464
+ margin-top: calc(var(--spacing) * 3);
2465
+ }
2466
+ .mb-2 {
2467
+ margin-bottom: calc(var(--spacing) * 2);
2468
+ }
2469
+ .mb-6 {
2470
+ margin-bottom: calc(var(--spacing) * 6);
2471
+ }
2472
+ .flex {
2473
+ display: flex;
2474
+ }
2475
+ .grid {
2476
+ display: grid;
2477
+ }
2478
+ .aspect-video {
2479
+ aspect-ratio: var(--aspect-video);
2480
+ }
2481
+ .h-2 {
2482
+ height: calc(var(--spacing) * 2);
2483
+ }
2484
+ .h-12 {
2485
+ height: calc(var(--spacing) * 12);
2486
+ }
2487
+ .h-24 {
2488
+ height: calc(var(--spacing) * 24);
2489
+ }
2490
+ .h-full {
2491
+ height: 100%;
2492
+ }
2493
+ .w-2 {
2494
+ width: calc(var(--spacing) * 2);
2495
+ }
2496
+ .w-12 {
2497
+ width: calc(var(--spacing) * 12);
2498
+ }
2499
+ .w-24 {
2500
+ width: calc(var(--spacing) * 24);
2501
+ }
2502
+ .w-full {
2503
+ width: 100%;
2504
+ }
2505
+ .animate-pulse {
2506
+ animation: var(--animate-pulse);
2507
+ }
2508
+ .animate-spin {
2509
+ animation: var(--animate-spin);
2510
+ }
2511
+ .auto-cols-max {
2512
+ grid-auto-columns: max-content;
2513
+ }
2514
+ .grid-flow-col {
2515
+ grid-auto-flow: column;
2516
+ }
2517
+ .flex-col {
2518
+ flex-direction: column;
2519
+ }
2520
+ .items-center {
2521
+ align-items: center;
2522
+ }
2523
+ .justify-center {
2524
+ justify-content: center;
2525
+ }
2526
+ .justify-stretch {
2527
+ justify-content: stretch;
2528
+ }
2529
+ .gap-1 {
2530
+ gap: calc(var(--spacing) * 1);
2531
+ }
2532
+ .gap-5 {
2533
+ gap: calc(var(--spacing) * 5);
2534
+ }
2535
+ .overflow-hidden {
2536
+ overflow: hidden;
2537
+ }
2538
+ .rounded-full {
2539
+ border-radius: calc(infinity * 1px);
2540
+ }
2541
+ .rounded-md {
2542
+ border-radius: var(--radius-md);
2543
+ }
2544
+ .bg-\\[\\#151515\\] {
2545
+ background-color: #151515;
2546
+ }
2547
+ .bg-black {
2548
+ background-color: var(--color-black);
2549
+ }
2550
+ .bg-red-600 {
2551
+ background-color: var(--color-red-600);
2552
+ }
2553
+ .bg-white {
2554
+ background-color: var(--color-white);
2555
+ }
2556
+ .bg-gradient-to-t {
2557
+ --tw-gradient-position: to top in oklab;
2558
+ background-image: linear-gradient(var(--tw-gradient-stops));
2559
+ }
2560
+ .from-black\\/70 {
2561
+ --tw-gradient-from: color-mix(in srgb, #000 70%, transparent);
2562
+ @supports (color: color-mix(in lab, red, red)) {
2563
+ --tw-gradient-from: color-mix(in oklab, var(--color-black) 70%, transparent);
2564
+ }
2565
+ --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));
2566
+ }
2567
+ .to-transparent {
2568
+ --tw-gradient-to: transparent;
2569
+ --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));
2570
+ }
2571
+ .bg-cover {
2572
+ background-size: cover;
2573
+ }
2574
+ .bg-center {
2575
+ background-position: center;
2576
+ }
2577
+ .bg-no-repeat {
2578
+ background-repeat: no-repeat;
2579
+ }
2580
+ .p-2 {
2581
+ padding: calc(var(--spacing) * 2);
2582
+ }
2583
+ .p-4 {
2584
+ padding: calc(var(--spacing) * 4);
2585
+ }
2586
+ .px-2 {
2587
+ padding-inline: calc(var(--spacing) * 2);
2588
+ }
2589
+ .px-4 {
2590
+ padding-inline: calc(var(--spacing) * 4);
2591
+ }
2592
+ .py-1 {
2593
+ padding-block: calc(var(--spacing) * 1);
2594
+ }
2595
+ .text-center {
2596
+ text-align: center;
2597
+ }
2598
+ .text-left {
2599
+ text-align: left;
2600
+ }
2601
+ .font-mono {
2602
+ font-family: var(--font-mono);
2603
+ }
2604
+ .text-2xl {
2605
+ font-size: var(--text-2xl);
2606
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
2607
+ }
2608
+ .text-5xl {
2609
+ font-size: var(--text-5xl);
2610
+ line-height: var(--tw-leading, var(--text-5xl--line-height));
2611
+ }
2612
+ .text-base {
2613
+ font-size: var(--text-base);
2614
+ line-height: var(--tw-leading, var(--text-base--line-height));
2615
+ }
2616
+ .text-lg {
2617
+ font-size: var(--text-lg);
2618
+ line-height: var(--tw-leading, var(--text-lg--line-height));
2619
+ }
2620
+ .text-sm {
2621
+ font-size: var(--text-sm);
2622
+ line-height: var(--tw-leading, var(--text-sm--line-height));
2623
+ }
2624
+ .text-xl {
2625
+ font-size: var(--text-xl);
2626
+ line-height: var(--tw-leading, var(--text-xl--line-height));
2627
+ }
2628
+ .text-xs {
2629
+ font-size: var(--text-xs);
2630
+ line-height: var(--tw-leading, var(--text-xs--line-height));
2631
+ }
2632
+ .text-\\[10px\\] {
2633
+ font-size: 10px;
2634
+ }
2635
+ .font-bold {
2636
+ --tw-font-weight: var(--font-weight-bold);
2637
+ font-weight: var(--font-weight-bold);
2638
+ }
2639
+ .font-medium {
2640
+ --tw-font-weight: var(--font-weight-medium);
2641
+ font-weight: var(--font-weight-medium);
2642
+ }
2643
+ .font-semibold {
2644
+ --tw-font-weight: var(--font-weight-semibold);
2645
+ font-weight: var(--font-weight-semibold);
2646
+ }
2647
+ .tracking-wide {
2648
+ --tw-tracking: var(--tracking-wide);
2649
+ letter-spacing: var(--tracking-wide);
2650
+ }
2651
+ .tracking-widest {
2652
+ --tw-tracking: var(--tracking-widest);
2653
+ letter-spacing: var(--tracking-widest);
2654
+ }
2655
+ .text-white {
2656
+ color: var(--color-white);
2657
+ }
2658
+ .uppercase {
2659
+ text-transform: uppercase;
2660
+ }
2661
+ .shadow-lg {
2662
+ --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));
2663
+ box-shadow:
2664
+ var(--tw-inset-shadow),
2665
+ var(--tw-inset-ring-shadow),
2666
+ var(--tw-ring-offset-shadow),
2667
+ var(--tw-ring-shadow),
2668
+ var(--tw-shadow);
2669
+ }
2670
+ .filter {
2671
+ 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,);
2672
+ }
2673
+ .md\\:rounded-2xl {
2674
+ @media (width >= 48rem) {
2675
+ border-radius: var(--radius-2xl);
2676
+ }
2677
+ }
2678
+ .md\\:rounded-2xl\\! {
2679
+ @media (width >= 48rem) {
2680
+ border-radius: var(--radius-2xl) !important;
2681
+ }
2682
+ }
2683
+ .md\\:text-base {
2684
+ @media (width >= 48rem) {
2685
+ font-size: var(--text-base);
2686
+ line-height: var(--tw-leading, var(--text-base--line-height));
2687
+ }
2688
+ }
2689
+ .md\\:text-sm {
2690
+ @media (width >= 48rem) {
2691
+ font-size: var(--text-sm);
2692
+ line-height: var(--tw-leading, var(--text-sm--line-height));
2693
+ }
2694
+ }
2695
+ .md\\:text-xl {
2696
+ @media (width >= 48rem) {
2697
+ font-size: var(--text-xl);
2698
+ line-height: var(--tw-leading, var(--text-xl--line-height));
2699
+ }
2700
+ }
2701
+ }
2702
+ @layer components {
2703
+ video::-webkit-media-controls {
2704
+ display: none !important;
2705
+ }
2706
+ video::-webkit-media-controls-panel {
2707
+ display: none !important;
2708
+ }
2709
+ video::-webkit-media-controls-play-button {
2710
+ display: none !important;
2711
+ }
2712
+ video::-webkit-media-controls-timeline {
2713
+ display: none !important;
2714
+ }
2715
+ video::-webkit-media-controls-current-time-display {
2716
+ display: none !important;
2717
+ }
2718
+ video::-webkit-media-controls-time-remaining-display {
2719
+ display: none !important;
2720
+ }
2721
+ video::-webkit-media-controls-mute-button {
2722
+ display: none !important;
2723
+ }
2724
+ video::-webkit-media-controls-volume-slider {
2725
+ display: none !important;
2726
+ }
2727
+ video::-webkit-media-controls-fullscreen-button {
2728
+ display: none !important;
2729
+ }
2730
+ video::-webkit-media-controls-overlay-play-button {
2731
+ display: none !important;
2732
+ }
2733
+ video::-moz-media-controls {
2734
+ display: none !important;
2735
+ }
2736
+ video {
2737
+ outline: none !important;
2738
+ }
2739
+ video[controls] {
2740
+ -webkit-appearance: none !important;
2741
+ appearance: none !important;
2742
+ }
2743
+ video::-webkit-media-controls-enclosure {
2744
+ display: none !important;
2745
+ }
2746
+ video::-webkit-media-controls-start-playback-button {
2747
+ display: none !important;
2748
+ }
2749
+ video[controls]::-webkit-media-controls,
2750
+ video[controls]::-webkit-media-controls-panel,
2751
+ video[controls]::-webkit-media-controls-play-button,
2752
+ video[controls]::-webkit-media-controls-timeline,
2753
+ video[controls]::-webkit-media-controls-current-time-display,
2754
+ video[controls]::-webkit-media-controls-time-remaining-display,
2755
+ video[controls]::-webkit-media-controls-mute-button,
2756
+ video[controls]::-webkit-media-controls-volume-slider,
2757
+ video[controls]::-webkit-media-controls-fullscreen-button,
2758
+ video[controls]::-webkit-media-controls-overlay-play-button,
2759
+ video[controls]::-webkit-media-controls-enclosure,
2760
+ video[controls]::-webkit-media-controls-start-playback-button {
2761
+ display: none !important;
2762
+ visibility: hidden !important;
2763
+ opacity: 0 !important;
2764
+ pointer-events: none !important;
2765
+ }
2766
+ video[controls]::-moz-media-controls {
2767
+ display: none !important;
2768
+ visibility: hidden !important;
2769
+ opacity: 0 !important;
2770
+ }
2771
+ .motto-video-container {
2772
+ position: relative;
2773
+ width: 100%;
2774
+ min-height: 300px;
2775
+ }
2776
+ @supports (aspect-ratio: 16/9) {
2777
+ .motto-video-container {
2778
+ min-height: auto;
2779
+ }
2780
+ }
2781
+ .motto-video-responsive {
2782
+ position: absolute;
2783
+ top: calc(var(--spacing) * 0);
2784
+ left: calc(var(--spacing) * 0);
2785
+ height: 100%;
2786
+ width: 100%;
2787
+ }
2788
+ .motto-skip-button {
2789
+ position: absolute;
2790
+ top: calc(1/2 * 100%);
2791
+ z-index: 10;
2792
+ display: flex;
2793
+ height: calc(var(--spacing) * 16);
2794
+ width: calc(var(--spacing) * 16);
2795
+ --tw-translate-y: calc(calc(1/2 * 100%) * -1);
2796
+ translate: var(--tw-translate-x) var(--tw-translate-y);
2797
+ cursor: pointer;
2798
+ align-items: center;
2799
+ justify-content: center;
2800
+ border-radius: calc(infinity * 1px);
2801
+ border-style: var(--tw-border-style);
2802
+ border-width: 0px;
2803
+ background-color: color-mix(in srgb, #000 70%, transparent);
2804
+ @supports (color: color-mix(in lab, red, red)) {
2805
+ background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
948
2806
  }
949
- return () => {
950
- try {
951
- player.removeEventListener("manifestparsed", onManifestParsed);
952
- player.removeEventListener("streaming", onManifestParsed);
953
- } catch (error) {
954
- }
955
- };
956
- }, [player, manualStreamStartDate]);
957
- const effectiveStreamStart = manualStreamStartDate || detectedStreamStart;
958
- (0, import_react10.useEffect)(() => {
959
- if (!player || !controls || !effectiveStreamStart) return;
960
- const video = player.getMediaElement();
961
- if (!video) return;
962
- let originalGetDisplayTime;
963
- let timeDisplayElement;
964
- const formatElapsedTime = (elapsedSeconds) => {
965
- const hours = Math.floor(elapsedSeconds / 3600);
966
- const minutes = Math.floor(elapsedSeconds % 3600 / 60);
967
- const seconds = Math.floor(elapsedSeconds % 60);
968
- if (hours > 0) {
969
- return [hours, minutes, seconds].map((val) => val.toString().padStart(2, "0")).join(":");
970
- } else {
971
- return [minutes, seconds].map((val) => val.toString().padStart(2, "0")).join(":");
972
- }
973
- };
974
- const getElapsedTime = () => {
975
- const now = /* @__PURE__ */ new Date();
976
- const elapsedMs = now.getTime() - effectiveStreamStart.getTime();
977
- return Math.max(0, elapsedMs / 1e3);
978
- };
979
- const customGetDisplayTime = function() {
980
- const elapsedSeconds = getElapsedTime();
981
- return formatElapsedTime(elapsedSeconds);
982
- };
983
- const setupTimeDisplayOverride = () => {
984
- try {
985
- const controlsContainer = controls.getControlsContainer();
986
- if (!controlsContainer) return;
987
- const timeDisplay = controlsContainer.querySelector(".shaka-current-time");
988
- if (timeDisplay) {
989
- timeDisplayElement = timeDisplay;
990
- if (timeDisplayElement.getDisplayTime) {
991
- originalGetDisplayTime = timeDisplayElement.getDisplayTime.bind(timeDisplayElement);
992
- timeDisplayElement.getDisplayTime = customGetDisplayTime.bind(timeDisplayElement);
993
- } else {
994
- setupDirectTextUpdate();
995
- }
996
- }
997
- } catch (error) {
998
- console.warn("Error setting up time display override:", error);
999
- setupDirectTextUpdate();
1000
- }
1001
- };
1002
- const setupDirectTextUpdate = () => {
1003
- let animationFrameId;
1004
- let isDestroyed = false;
1005
- const updateTimeDisplay = () => {
1006
- if (isDestroyed) return;
1007
- try {
1008
- const controlsContainer = controls.getControlsContainer();
1009
- if (controlsContainer) {
1010
- const currentTimeLabels = controlsContainer.querySelectorAll(".shaka-current-time");
1011
- const elapsedSeconds = getElapsedTime();
1012
- const timeText = formatElapsedTime(elapsedSeconds);
1013
- currentTimeLabels.forEach((label) => {
1014
- if (label && label.textContent !== timeText) {
1015
- label.textContent = timeText;
1016
- }
1017
- });
1018
- }
1019
- } catch (error) {
1020
- console.warn("Error updating time display:", error);
1021
- }
1022
- animationFrameId = requestAnimationFrame(updateTimeDisplay);
1023
- };
1024
- updateTimeDisplay();
1025
- return () => {
1026
- isDestroyed = true;
1027
- if (animationFrameId) {
1028
- cancelAnimationFrame(animationFrameId);
1029
- }
1030
- };
1031
- };
1032
- const setupSeekbarTooltip = () => {
1033
- try {
1034
- const controlsContainer = controls.getControlsContainer();
1035
- if (!controlsContainer) return;
1036
- const seekBar = controlsContainer.querySelector(".shaka-seek-bar");
1037
- if (!seekBar) return;
1038
- const onSeekBarMouseMove = (event) => {
1039
- const rect = seekBar.getBoundingClientRect();
1040
- const pos = (event.clientX - rect.left) / rect.width;
1041
- const totalElapsedSeconds = getElapsedTime();
1042
- const seekableRange = video.seekable;
1043
- if (seekableRange.length > 0) {
1044
- const seekableDuration = seekableRange.end(0) - seekableRange.start(0);
1045
- const positionInStream = totalElapsedSeconds - seekableDuration * (1 - pos);
1046
- const timeAtPosition = Math.max(0, positionInStream);
1047
- seekBar.title = formatElapsedTime(timeAtPosition);
1048
- } else {
1049
- seekBar.title = formatElapsedTime(totalElapsedSeconds);
1050
- }
1051
- };
1052
- seekBar.addEventListener("mousemove", onSeekBarMouseMove);
1053
- return () => {
1054
- seekBar.removeEventListener("mousemove", onSeekBarMouseMove);
1055
- };
1056
- } catch (error) {
1057
- console.warn("Error setting up seekbar tooltip:", error);
1058
- return () => {
1059
- };
2807
+ font-size: var(--text-2xl);
2808
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
2809
+ color: var(--color-white);
2810
+ opacity: 80%;
2811
+ transition-property: all;
2812
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2813
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2814
+ --tw-duration: 200ms;
2815
+ transition-duration: 200ms;
2816
+ &:hover {
2817
+ @media (hover: hover) {
2818
+ --tw-scale-x: 110%;
2819
+ --tw-scale-y: 110%;
2820
+ --tw-scale-z: 110%;
2821
+ scale: var(--tw-scale-x) var(--tw-scale-y);
1060
2822
  }
1061
- };
1062
- const setupWithDelay = () => {
1063
- setTimeout(() => {
1064
- setupTimeDisplayOverride();
1065
- const cleanupSeekbar = setupSeekbarTooltip();
1066
- setupWithDelay.cleanupSeekbar = cleanupSeekbar;
1067
- }, 100);
1068
- };
1069
- setupWithDelay();
1070
- return () => {
1071
- if (timeDisplayElement && originalGetDisplayTime) {
1072
- try {
1073
- timeDisplayElement.getDisplayTime = originalGetDisplayTime;
1074
- } catch (error) {
1075
- console.warn("Error restoring original getDisplayTime:", error);
1076
- }
1077
- }
1078
- if (setupWithDelay.cleanupSeekbar) {
1079
- setupWithDelay.cleanupSeekbar();
2823
+ }
2824
+ &:hover {
2825
+ @media (hover: hover) {
2826
+ opacity: 100%;
1080
2827
  }
1081
- };
1082
- }, [player, controls, effectiveStreamStart]);
1083
- return {
1084
- detectedStreamStart,
1085
- effectiveStreamStart,
1086
- isUsingManualDate: !!manualStreamStartDate
1087
- };
2828
+ }
2829
+ &:active {
2830
+ --tw-scale-x: 95%;
2831
+ --tw-scale-y: 95%;
2832
+ --tw-scale-z: 95%;
2833
+ scale: var(--tw-scale-x) var(--tw-scale-y);
2834
+ }
2835
+ }
2836
+ .motto-skip-button-back {
2837
+ left: calc(var(--spacing) * 5);
2838
+ }
2839
+ .motto-skip-button-forward {
2840
+ right: calc(var(--spacing) * 5);
2841
+ }
1088
2842
  }
1089
-
1090
- // src/components/Loading.tsx
1091
- var import_tailwind_merge = require("tailwind-merge");
1092
- var import_jsx_runtime = require("react/jsx-runtime");
1093
- var Loading = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1094
- "div",
1095
- {
1096
- className: (0, import_tailwind_merge.twMerge)(
1097
- "relative bg-[#151515] md:rounded-2xl! overflow-hidden aspect-video text-white w-full h-full flex justify-center items-center text-[10px]",
1098
- className
1099
- ),
1100
- role: "status",
1101
- children: [
1102
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-white" }),
1103
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: "Loading..." })
1104
- ]
2843
+ .shaka-seek-bar-container {
2844
+ height: 6px !important;
2845
+ width: 100% !important;
2846
+ margin: 8px 0 !important;
2847
+ border-radius: 4px !important;
2848
+ position: relative !important;
2849
+ border-top: none !important;
2850
+ border-bottom: none !important;
2851
+ box-shadow: none !important;
2852
+ }
2853
+ .shaka-seek-bar {
2854
+ height: 6px !important;
2855
+ width: 100% !important;
2856
+ -webkit-appearance: none !important;
2857
+ appearance: none !important;
2858
+ background: transparent !important;
2859
+ cursor: pointer !important;
2860
+ border: none !important;
2861
+ outline: none !important;
2862
+ position: absolute !important;
2863
+ top: 0 !important;
2864
+ left: 0 !important;
2865
+ border-radius: 4px !important;
2866
+ }
2867
+ .shaka-seek-bar::-webkit-slider-runnable-track {
2868
+ height: 6px !important;
2869
+ background: transparent !important;
2870
+ border-radius: 4px !important;
2871
+ border: none !important;
2872
+ }
2873
+ .shaka-seek-bar::-moz-range-track {
2874
+ height: 6px !important;
2875
+ background: transparent !important;
2876
+ border-radius: 4px !important;
2877
+ border: none !important;
2878
+ }
2879
+ .shaka-seek-bar::-webkit-slider-thumb {
2880
+ -webkit-appearance: none !important;
2881
+ appearance: none !important;
2882
+ width: 16px !important;
2883
+ height: 16px !important;
2884
+ border-radius: 50% !important;
2885
+ background: #ffffff !important;
2886
+ cursor: pointer !important;
2887
+ border: 2px solid #ffffff !important;
2888
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
2889
+ margin-top: -4px !important;
2890
+ }
2891
+ .shaka-seek-bar::-moz-range-thumb {
2892
+ width: 16px !important;
2893
+ height: 16px !important;
2894
+ border-radius: 50% !important;
2895
+ background: #ffffff !important;
2896
+ cursor: pointer !important;
2897
+ border: 2px solid #ffffff !important;
2898
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
2899
+ margin-top: -4px !important;
2900
+ }
2901
+ .motto-skip-back-button,
2902
+ .motto-skip-forward-button,
2903
+ .motto-native-skip-button {
2904
+ background: transparent !important;
2905
+ border: none !important;
2906
+ padding: 4px !important;
2907
+ margin: 0px !important;
2908
+ cursor: pointer !important;
2909
+ color: #ffffff !important;
2910
+ transition: all 0.2s ease !important;
2911
+ min-width: 32px !important;
2912
+ height: 32px !important;
2913
+ display: flex !important;
2914
+ align-items: center !important;
2915
+ justify-content: center !important;
2916
+ border-radius: 4px !important;
2917
+ width: 25px;
2918
+ }
2919
+ .motto-skip-back-button:hover,
2920
+ .motto-skip-forward-button:hover,
2921
+ .motto-native-skip-button:hover {
2922
+ opacity: 0.8 !important;
2923
+ background: transparent !important;
2924
+ transform: scale(1.05) !important;
2925
+ }
2926
+ .motto-skip-back-button:active,
2927
+ .motto-skip-forward-button:active,
2928
+ .motto-native-skip-button:active {
2929
+ transform: scale(0.95) !important;
2930
+ }
2931
+ .motto-skip-back-button svg,
2932
+ .motto-skip-forward-button svg,
2933
+ .motto-native-skip-button svg {
2934
+ width: 24px !important;
2935
+ height: 24px !important;
2936
+ }
2937
+ .shaka-spinner-svg {
2938
+ color: white !important;
2939
+ fill: white !important;
2940
+ }
2941
+ .shaka-spinner-path {
2942
+ stroke: white !important;
2943
+ fill: none !important;
2944
+ }
2945
+ .shaka-spinner-container {
2946
+ color: white !important;
2947
+ }
2948
+ .shaka-buffering-spinner {
2949
+ color: white !important;
2950
+ fill: white !important;
2951
+ }
2952
+ .shaka-buffering-spinner svg {
2953
+ color: white !important;
2954
+ fill: white !important;
2955
+ }
2956
+ .shaka-buffering-spinner path {
2957
+ stroke: white !important;
2958
+ fill: none !important;
2959
+ }
2960
+ [data-shaka-player-container] .shaka-spinner,
2961
+ [data-shaka-player-container] .spinner {
2962
+ color: white !important;
2963
+ border-color: white !important;
2964
+ }
2965
+ .material-icons.shaka-spinner {
2966
+ color: white !important;
2967
+ }
2968
+ .shaka-controls-container .shaka-spinner,
2969
+ .shaka-video-container .shaka-spinner {
2970
+ color: white !important;
2971
+ fill: white !important;
2972
+ }
2973
+ .shaka-controls-container .shaka-spinner svg,
2974
+ .shaka-video-container .shaka-spinner svg {
2975
+ color: white !important;
2976
+ fill: white !important;
2977
+ }
2978
+ .shaka-controls-container .shaka-spinner path,
2979
+ .shaka-video-container .shaka-spinner path {
2980
+ stroke: white !important;
2981
+ }
2982
+ .motto-video-loading-overlay {
2983
+ position: absolute;
2984
+ top: 0;
2985
+ left: 0;
2986
+ width: 100%;
2987
+ height: 100%;
2988
+ background:
2989
+ linear-gradient(
2990
+ 135deg,
2991
+ #1a1a1a 0%,
2992
+ #2d2d2d 100%);
2993
+ display: flex;
2994
+ flex-direction: column;
2995
+ align-items: center;
2996
+ justify-content: center;
2997
+ z-index: 10;
2998
+ transition: opacity 0.3s ease;
2999
+ }
3000
+ .motto-video-loading-overlay.hidden {
3001
+ opacity: 0;
3002
+ pointer-events: none;
3003
+ }
3004
+ .motto-video-loading-content {
3005
+ text-align: center;
3006
+ color: white;
3007
+ }
3008
+ .motto-video-loading-icon {
3009
+ width: 64px;
3010
+ height: 64px;
3011
+ margin-bottom: 16px;
3012
+ opacity: 0.7;
3013
+ }
3014
+ .motto-video-loading-text {
3015
+ font-size: 16px;
3016
+ font-weight: 500;
3017
+ margin-bottom: 8px;
3018
+ }
3019
+ .motto-video-loading-subtext {
3020
+ font-size: 14px;
3021
+ opacity: 0.7;
3022
+ }
3023
+ @keyframes pulse-live {
3024
+ 0% {
3025
+ opacity: 1;
3026
+ transform: scale(1);
1105
3027
  }
1106
- );
1107
-
1108
- // src/components/ErrorScreen.tsx
1109
- var import_jsx_runtime2 = require("react/jsx-runtime");
1110
- 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: [
1111
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1112
- "svg",
1113
- {
1114
- className: "w-24 h-24 m-6",
1115
- fill: "none",
1116
- stroke: "currentColor",
1117
- strokeWidth: "2",
1118
- style: { width: 96 },
1119
- viewBox: "0 0 24 24",
1120
- xmlns: "http://www.w3.org/2000/svg",
1121
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1122
- "path",
1123
- {
1124
- d: "M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z",
1125
- strokeLinecap: "round",
1126
- strokeLinejoin: "round"
1127
- }
1128
- )
1129
- }
1130
- ),
1131
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
1132
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "text-2xl mb-2", children: title || "Playback Error" }),
1133
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-lg", children: description || "Unable to play the video. Please try again later." })
1134
- ] })
1135
- ] }) });
1136
-
1137
- // src/components/Title.tsx
1138
- var import_jsx_runtime3 = require("react/jsx-runtime");
1139
- 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 }) });
1140
-
1141
- // src/components/LiveBadge.tsx
1142
- var import_jsx_runtime4 = require("react/jsx-runtime");
1143
- var LiveBadge = ({
1144
- isVisible,
1145
- position = "top-right",
1146
- className = "",
1147
- style = {},
1148
- text = "LIVE"
1149
- }) => {
1150
- if (!isVisible) return null;
1151
- const positionClasses = {
1152
- "top-left": "top-4 left-4",
1153
- "top-right": "top-4 right-4",
1154
- "bottom-left": "bottom-4 left-4",
1155
- "bottom-right": "bottom-4 right-4"
1156
- };
1157
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
1158
- "div",
1159
- {
1160
- className: `
1161
- absolute z-50
1162
- ${positionClasses[position]}
1163
- bg-red-600 text-white
1164
- px-2 py-1
1165
- rounded-md
1166
- text-xs font-bold
1167
- uppercase tracking-wide
1168
- shadow-lg
1169
- animate-pulse
1170
- pointer-events-none
1171
- ${className}
1172
- `,
1173
- style,
1174
- children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex items-center gap-1", children: [
1175
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "w-2 h-2 bg-white rounded-full animate-pulse" }),
1176
- text
1177
- ] })
3028
+ 50% {
3029
+ opacity: 0.7;
3030
+ transform: scale(1.1);
3031
+ }
3032
+ 100% {
3033
+ opacity: 1;
3034
+ transform: scale(1);
3035
+ }
3036
+ }
3037
+ .shaka-play-button {
3038
+ background: rgba(255, 255, 255, 0.1) !important;
3039
+ border: none !important;
3040
+ color: white !important;
3041
+ padding: 10px !important;
3042
+ border-radius: 100% !important;
3043
+ transition: all 0.2s ease !important;
3044
+ display: flex !important;
3045
+ align-items: center !important;
3046
+ justify-content: center !important;
3047
+ min-width: 55px !important;
3048
+ height: 55px !important;
3049
+ }
3050
+ .shaka-play-button-container {
3051
+ background: transparent;
3052
+ transition: all 0.2s ease !important;
3053
+ }
3054
+ .motto-video-container:not(.no-cursor) .shaka-play-button-container {
3055
+ background: rgba(0, 0, 0, 0.3);
3056
+ transition: all 0.s ease !important;
3057
+ }
3058
+ .shaka-play-button:hover {
3059
+ background: rgba(255, 255, 255, 0.2) !important;
3060
+ transform: scale(1.05) !important;
3061
+ }
3062
+ .shaka-play-button:active {
3063
+ transform: scale(0.95) !important;
3064
+ }
3065
+ .shaka-play-button > * {
3066
+ display: none !important;
3067
+ }
3068
+ .shaka-play-button::after {
3069
+ content: "" !important;
3070
+ width: 35px !important;
3071
+ height: 35px !important;
3072
+ 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;
3073
+ background-repeat: no-repeat !important;
3074
+ background-size: contain !important;
3075
+ background-position: center !important;
3076
+ display: block !important;
3077
+ }
3078
+ .shaka-play-button[aria-label*=Play]::after {
3079
+ 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;
3080
+ }
3081
+ .shaka-play-button[aria-label*=Pause]::after {
3082
+ 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;
3083
+ }
3084
+ .motto-video-container {
3085
+ background: black;
3086
+ }
3087
+ .motto-video-container video {
3088
+ width: 100% !important;
3089
+ height: 100% !important;
3090
+ margin-left: auto !important;
3091
+ margin-right: auto !important;
3092
+ }
3093
+ @property --tw-gradient-position { syntax: "*"; inherits: false; }
3094
+ @property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; }
3095
+ @property --tw-gradient-via { syntax: "<color>"; inherits: false; initial-value: #0000; }
3096
+ @property --tw-gradient-to { syntax: "<color>"; inherits: false; initial-value: #0000; }
3097
+ @property --tw-gradient-stops { syntax: "*"; inherits: false; }
3098
+ @property --tw-gradient-via-stops { syntax: "*"; inherits: false; }
3099
+ @property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }
3100
+ @property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }
3101
+ @property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }
3102
+ @property --tw-font-weight { syntax: "*"; inherits: false; }
3103
+ @property --tw-tracking { syntax: "*"; inherits: false; }
3104
+ @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
3105
+ @property --tw-shadow-color { syntax: "*"; inherits: false; }
3106
+ @property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
3107
+ @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
3108
+ @property --tw-inset-shadow-color { syntax: "*"; inherits: false; }
3109
+ @property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
3110
+ @property --tw-ring-color { syntax: "*"; inherits: false; }
3111
+ @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
3112
+ @property --tw-inset-ring-color { syntax: "*"; inherits: false; }
3113
+ @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
3114
+ @property --tw-ring-inset { syntax: "*"; inherits: false; }
3115
+ @property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }
3116
+ @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
3117
+ @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
3118
+ @property --tw-blur { syntax: "*"; inherits: false; }
3119
+ @property --tw-brightness { syntax: "*"; inherits: false; }
3120
+ @property --tw-contrast { syntax: "*"; inherits: false; }
3121
+ @property --tw-grayscale { syntax: "*"; inherits: false; }
3122
+ @property --tw-hue-rotate { syntax: "*"; inherits: false; }
3123
+ @property --tw-invert { syntax: "*"; inherits: false; }
3124
+ @property --tw-opacity { syntax: "*"; inherits: false; }
3125
+ @property --tw-saturate { syntax: "*"; inherits: false; }
3126
+ @property --tw-sepia { syntax: "*"; inherits: false; }
3127
+ @property --tw-drop-shadow { syntax: "*"; inherits: false; }
3128
+ @property --tw-drop-shadow-color { syntax: "*"; inherits: false; }
3129
+ @property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
3130
+ @property --tw-drop-shadow-size { syntax: "*"; inherits: false; }
3131
+ @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
3132
+ @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
3133
+ @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
3134
+ @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
3135
+ @property --tw-duration { syntax: "*"; inherits: false; }
3136
+ @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; }
3137
+ @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; }
3138
+ @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }
3139
+ @keyframes spin {
3140
+ to {
3141
+ transform: rotate(360deg);
3142
+ }
3143
+ }
3144
+ @keyframes pulse {
3145
+ 50% {
3146
+ opacity: 0.5;
3147
+ }
3148
+ }
3149
+ @layer properties {
3150
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
3151
+ *,
3152
+ ::before,
3153
+ ::after,
3154
+ ::backdrop {
3155
+ --tw-gradient-position: initial;
3156
+ --tw-gradient-from: #0000;
3157
+ --tw-gradient-via: #0000;
3158
+ --tw-gradient-to: #0000;
3159
+ --tw-gradient-stops: initial;
3160
+ --tw-gradient-via-stops: initial;
3161
+ --tw-gradient-from-position: 0%;
3162
+ --tw-gradient-via-position: 50%;
3163
+ --tw-gradient-to-position: 100%;
3164
+ --tw-font-weight: initial;
3165
+ --tw-tracking: initial;
3166
+ --tw-shadow: 0 0 #0000;
3167
+ --tw-shadow-color: initial;
3168
+ --tw-shadow-alpha: 100%;
3169
+ --tw-inset-shadow: 0 0 #0000;
3170
+ --tw-inset-shadow-color: initial;
3171
+ --tw-inset-shadow-alpha: 100%;
3172
+ --tw-ring-color: initial;
3173
+ --tw-ring-shadow: 0 0 #0000;
3174
+ --tw-inset-ring-color: initial;
3175
+ --tw-inset-ring-shadow: 0 0 #0000;
3176
+ --tw-ring-inset: initial;
3177
+ --tw-ring-offset-width: 0px;
3178
+ --tw-ring-offset-color: #fff;
3179
+ --tw-ring-offset-shadow: 0 0 #0000;
3180
+ --tw-blur: initial;
3181
+ --tw-brightness: initial;
3182
+ --tw-contrast: initial;
3183
+ --tw-grayscale: initial;
3184
+ --tw-hue-rotate: initial;
3185
+ --tw-invert: initial;
3186
+ --tw-opacity: initial;
3187
+ --tw-saturate: initial;
3188
+ --tw-sepia: initial;
3189
+ --tw-drop-shadow: initial;
3190
+ --tw-drop-shadow-color: initial;
3191
+ --tw-drop-shadow-alpha: 100%;
3192
+ --tw-drop-shadow-size: initial;
3193
+ --tw-translate-x: 0;
3194
+ --tw-translate-y: 0;
3195
+ --tw-translate-z: 0;
3196
+ --tw-border-style: solid;
3197
+ --tw-duration: initial;
3198
+ --tw-scale-x: 1;
3199
+ --tw-scale-y: 1;
3200
+ --tw-scale-z: 1;
1178
3201
  }
1179
- );
1180
- };
1181
-
1182
- // src/styles.css
1183
- 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-8 {\n height: calc(var(--spacing) * 8);\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-8 {\n width: calc(var(--spacing) * 8);\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 .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n .border-white {\n border-color: var(--color-white);\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 .shaka-controls-container {\n z-index: 90 !important;\n height: 100px !important;\n bottom: 0 !important;\n top: unset !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-border-style { syntax: "*"; inherits: false; initial-value: solid; }\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-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-border-style: solid;\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-duration: initial;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n }\n }\n}\n');
3202
+ }
3203
+ }
3204
+ `);
1184
3205
 
1185
3206
  // src/Player.tsx
1186
3207
  var import_tailwind_merge2 = require("tailwind-merge");
1187
- var import_jsx_runtime5 = require("react/jsx-runtime");
1188
- var Player = (0, import_react11.forwardRef)(
3208
+ var import_jsx_runtime8 = require("react/jsx-runtime");
3209
+ var Player = (0, import_react12.forwardRef)(
1189
3210
  ({
1190
3211
  src,
1191
3212
  autoPlay = false,
@@ -1203,15 +3224,15 @@ var Player = (0, import_react11.forwardRef)(
1203
3224
  chromecastConfig,
1204
3225
  qualityConfig,
1205
3226
  seekbarConfig,
3227
+ iconSizes,
1206
3228
  events,
1207
3229
  containerClassName,
1208
- streamStartDate,
1209
- ...props
3230
+ ...videoProps
1210
3231
  }, ref) => {
1211
- const videoRef = (0, import_react11.useRef)(null);
1212
- const containerRef = (0, import_react11.useRef)(null);
1213
- const adContainerRef = (0, import_react11.useRef)(null);
1214
- (0, import_react11.useImperativeHandle)(ref, () => videoRef.current, []);
3232
+ const videoRef = (0, import_react12.useRef)(null);
3233
+ const containerRef = (0, import_react12.useRef)(null);
3234
+ const adContainerRef = (0, import_react12.useRef)(null);
3235
+ (0, import_react12.useImperativeHandle)(ref, () => videoRef.current, []);
1215
3236
  const { playerRef, initializePlayer, destroyPlayer } = useShakePlayer({
1216
3237
  src,
1217
3238
  shakaConfig,
@@ -1231,6 +3252,11 @@ var Player = (0, import_react11.forwardRef)(
1231
3252
  skipDuration,
1232
3253
  shouldShowSkipControls
1233
3254
  } = useSkipControls(videoRef, events?.onSkipBack, events?.onSkipForward);
3255
+ useKeyboardControls(videoRef, {
3256
+ skipBack,
3257
+ skipForward,
3258
+ enabled: true
3259
+ });
1234
3260
  const {
1235
3261
  initializeMux,
1236
3262
  updateMuxData,
@@ -1252,24 +3278,22 @@ var Player = (0, import_react11.forwardRef)(
1252
3278
  chromecastConfig,
1253
3279
  seekbarConfig,
1254
3280
  events?.onSkipBack,
1255
- events?.onSkipForward
3281
+ events?.onSkipForward,
3282
+ iconSizes
1256
3283
  );
1257
3284
  const { isLive, isVisible: isLiveBadgeVisible } = useLiveBadge(playerRef, {
1258
3285
  enabled: true,
3286
+ liveThresholdSeconds: 15,
1259
3287
  onLiveStateChange: (isLive2) => {
1260
3288
  events?.onLiveStateChange?.(isLive2);
1261
3289
  }
1262
3290
  });
1263
- useLiveIndicator(containerRef, {
3291
+ useLiveIndicator(containerRef, playerRef, {
1264
3292
  enabled: true,
1265
3293
  indicatorColor: "#ff0000",
1266
3294
  indicatorSize: 8,
1267
- showPulseAnimation: true
1268
- });
1269
- const { detectedStreamStart, effectiveStreamStart } = useShakaAbsoluteTime({
1270
- player: playerRef.current,
1271
- controls: uiRef.current,
1272
- manualStreamStartDate: streamStartDate
3295
+ showPulseAnimation: true,
3296
+ liveThresholdSeconds: 15
1273
3297
  });
1274
3298
  const initializeAds = () => {
1275
3299
  if (!imaConfig || !playerRef.current || !videoRef.current) return;
@@ -1311,7 +3335,7 @@ var Player = (0, import_react11.forwardRef)(
1311
3335
  console.warn("Chromecast initialization failed:", error);
1312
3336
  }
1313
3337
  };
1314
- (0, import_react11.useEffect)(() => {
3338
+ (0, import_react12.useEffect)(() => {
1315
3339
  const video = videoRef.current;
1316
3340
  if (!video) return;
1317
3341
  const initialize = async () => {
@@ -1336,22 +3360,8 @@ var Player = (0, import_react11.forwardRef)(
1336
3360
  destroyMux();
1337
3361
  destroyPlayer();
1338
3362
  };
1339
- }, [
1340
- src,
1341
- initializePlayer,
1342
- setupEventListeners,
1343
- setupQualityTracking,
1344
- configureQuality,
1345
- initializeUI,
1346
- initializeMux,
1347
- cleanupEventListeners,
1348
- destroyUI,
1349
- destroyMux,
1350
- destroyPlayer,
1351
- handleMuxError,
1352
- playerRef
1353
- ]);
1354
- (0, import_react11.useEffect)(() => {
3363
+ }, [src]);
3364
+ (0, import_react12.useEffect)(() => {
1355
3365
  const video = videoRef.current;
1356
3366
  if (!video) return;
1357
3367
  video.autoplay = autoPlay;
@@ -1360,7 +3370,31 @@ var Player = (0, import_react11.forwardRef)(
1360
3370
  video.controls = false;
1361
3371
  if (poster) video.poster = poster;
1362
3372
  }, [autoPlay, loop, muted, poster]);
1363
- (0, import_react11.useImperativeHandle)(ref, () => ({
3373
+ (0, import_react12.useEffect)(() => {
3374
+ const video = videoRef.current;
3375
+ if (!video) return;
3376
+ video.controls = false;
3377
+ video.setAttribute("controls", "false");
3378
+ video.removeAttribute("controls");
3379
+ const observer = new MutationObserver((mutations) => {
3380
+ mutations.forEach((mutation) => {
3381
+ if (mutation.type === "attributes" && mutation.attributeName === "controls") {
3382
+ if (video.hasAttribute("controls")) {
3383
+ video.removeAttribute("controls");
3384
+ video.controls = false;
3385
+ }
3386
+ }
3387
+ });
3388
+ });
3389
+ observer.observe(video, {
3390
+ attributes: true,
3391
+ attributeFilter: ["controls"]
3392
+ });
3393
+ return () => {
3394
+ observer.disconnect();
3395
+ };
3396
+ }, []);
3397
+ (0, import_react12.useImperativeHandle)(ref, () => ({
1364
3398
  ...videoRef.current,
1365
3399
  // Custom methods for quality control
1366
3400
  getAvailableQualities,
@@ -1375,13 +3409,15 @@ var Player = (0, import_react11.forwardRef)(
1375
3409
  getMuxMonitor: () => null
1376
3410
  }), [getAvailableQualities, setQuality, skipBack, skipForward, updateMuxData]);
1377
3411
  const isResponsive = !width && !height;
1378
- const containerClasses = (0, import_tailwind_merge2.twMerge)(containerClassName, "motto-video-container");
3412
+ const containerClasses = (0, import_tailwind_merge2.twMerge)(containerClassName, "motto-video-container bg-black");
1379
3413
  const containerStyle = isResponsive ? {
1380
3414
  aspectRatio: aspectRatio.toString()
1381
3415
  } : { width, height };
1382
- const videoClasses = isResponsive ? "motto-video-responsive" : "w-full h-full ";
3416
+ const videoClasses = isResponsive ? "motto-video-responsive w-full" : "w-full h-full ";
1383
3417
  const videoStyle = isResponsive ? {} : { width, height };
1384
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
3418
+ const filteredVideoProps = { ...videoProps };
3419
+ delete filteredVideoProps.controls;
3420
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
1385
3421
  "div",
1386
3422
  {
1387
3423
  ref: containerRef,
@@ -1390,7 +3426,7 @@ var Player = (0, import_react11.forwardRef)(
1390
3426
  "data-shaka-player-container": true,
1391
3427
  "data-shaka-player-cast-receiver-id": chromecastConfig?.receiverApplicationId,
1392
3428
  children: [
1393
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
3429
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1394
3430
  "video",
1395
3431
  {
1396
3432
  ref: videoRef,
@@ -1399,11 +3435,12 @@ var Player = (0, import_react11.forwardRef)(
1399
3435
  height: isResponsive ? void 0 : height,
1400
3436
  style: videoStyle,
1401
3437
  controls: false,
1402
- ...props
3438
+ playsInline: true,
3439
+ ...filteredVideoProps
1403
3440
  }
1404
3441
  ),
1405
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LiveBadge, { isVisible: isLiveBadgeVisible }),
1406
- imaConfig && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
3442
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LiveBadge, { isVisible: isLiveBadgeVisible }),
3443
+ imaConfig && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1407
3444
  "div",
1408
3445
  {
1409
3446
  ref: adContainerRef,
@@ -1418,7 +3455,7 @@ var Player = (0, import_react11.forwardRef)(
1418
3455
  Player.displayName = "Player";
1419
3456
 
1420
3457
  // src/Video.tsx
1421
- var import_react13 = require("react");
3458
+ var import_react14 = require("react");
1422
3459
  var import_tailwind_merge3 = require("tailwind-merge");
1423
3460
  var import_react_query = require("@tanstack/react-query");
1424
3461
 
@@ -1559,7 +3596,7 @@ var getErrorType = (error, video) => {
1559
3596
  };
1560
3597
 
1561
3598
  // src/messages/useMessages.tsx
1562
- var import_react12 = require("react");
3599
+ var import_react13 = require("react");
1563
3600
 
1564
3601
  // src/messages/en.json
1565
3602
  var en_default = {
@@ -1857,16 +3894,13 @@ var availableLanguages = {
1857
3894
  fa: fa_default
1858
3895
  };
1859
3896
  var getBrowserLanguage = () => {
1860
- if (typeof window === "undefined" || typeof navigator === "undefined") {
1861
- return "en";
1862
- }
1863
3897
  const language = navigator.language.split("-")[0];
1864
3898
  return availableLanguages[language] ? language : "en";
1865
3899
  };
1866
3900
  var useMessages = (locale) => {
1867
- const [language, setLanguage] = (0, import_react12.useState)("en");
1868
- const [translations, setTranslations] = (0, import_react12.useState)(availableLanguages.en);
1869
- (0, import_react12.useEffect)(() => {
3901
+ const [language, setLanguage] = (0, import_react13.useState)("en");
3902
+ const [translations, setTranslations] = (0, import_react13.useState)(availableLanguages.en);
3903
+ (0, import_react13.useEffect)(() => {
1870
3904
  const lang = !!availableLanguages?.[locale] ? locale : getBrowserLanguage();
1871
3905
  ;
1872
3906
  setLanguage(lang);
@@ -1892,7 +3926,7 @@ var useMessages = (locale) => {
1892
3926
  var useMessages_default = useMessages;
1893
3927
 
1894
3928
  // src/Video.tsx
1895
- var import_jsx_runtime6 = require("react/jsx-runtime");
3929
+ var import_jsx_runtime9 = require("react/jsx-runtime");
1896
3930
  var Video = ({
1897
3931
  videoId,
1898
3932
  publicKey,
@@ -1928,13 +3962,13 @@ var Video = ({
1928
3962
  const { t } = useMessages_default(locale);
1929
3963
  const activePlaylist = findHLSPlaylist(video);
1930
3964
  const hlsUrl = activePlaylist?.url;
1931
- (0, import_react13.useEffect)(() => {
3965
+ (0, import_react14.useEffect)(() => {
1932
3966
  if (events?.onVideoData && video) {
1933
3967
  events.onVideoData(video);
1934
3968
  }
1935
3969
  }, [video, events]);
1936
3970
  if (isLoading || !providedVideoData && !video) {
1937
- 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, {}) }) });
3971
+ 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, {}) }) });
1938
3972
  }
1939
3973
  if (!isLoading && video && !hlsUrl && events?.onEmptyPlaylists) {
1940
3974
  events.onEmptyPlaylists();
@@ -1947,8 +3981,8 @@ var Video = ({
1947
3981
  }
1948
3982
  const title = t(errorKey) || t("DEFAULT_ERROR");
1949
3983
  const description = t(`${errorKey}_DESCRIPTION`) || t("DEFAULT_ERROR_DESCRIPTION");
1950
- 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: [
1951
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
3984
+ 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: [
3985
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
1952
3986
  ErrorScreen,
1953
3987
  {
1954
3988
  title,
@@ -1959,13 +3993,13 @@ var Video = ({
1959
3993
  ] }) });
1960
3994
  }
1961
3995
  if (!hlsUrl) {
1962
- 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: [
1963
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Title, { title: video?.name || "" }),
3996
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_tailwind_merge3.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative w-full h-full bg-[#151515]", children: [
3997
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Title, { title: video?.name || "" }),
1964
3998
  children
1965
3999
  ] }) });
1966
4000
  }
1967
4001
  console.log("hlsUrl", hlsUrl);
1968
- 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)(
4002
+ 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)(
1969
4003
  Player,
1970
4004
  {
1971
4005
  ...props,
@@ -1979,10 +4013,10 @@ var Video = ({
1979
4013
  };
1980
4014
 
1981
4015
  // src/Event.tsx
1982
- var import_react14 = require("react");
4016
+ var import_react15 = require("react");
1983
4017
  var import_tailwind_merge4 = require("tailwind-merge");
1984
4018
  var import_react_query2 = require("@tanstack/react-query");
1985
- var import_jsx_runtime7 = require("react/jsx-runtime");
4019
+ var import_jsx_runtime10 = require("react/jsx-runtime");
1986
4020
  var Event = ({
1987
4021
  publicKey,
1988
4022
  eventId,
@@ -2012,8 +4046,8 @@ var Event = ({
2012
4046
  retry: queryOptions.retry ?? 3,
2013
4047
  retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
2014
4048
  });
2015
- const [activePlaylist, setActivePlaylist] = (0, import_react14.useState)();
2016
- const [activeVideoId, setActiveVideoId] = (0, import_react14.useState)();
4049
+ const [activePlaylist, setActivePlaylist] = (0, import_react15.useState)();
4050
+ const [activeVideoId, setActiveVideoId] = (0, import_react15.useState)();
2017
4051
  const videoIds = eventData?.videoIds ?? [];
2018
4052
  const {
2019
4053
  data: videosData,
@@ -2029,8 +4063,8 @@ var Event = ({
2029
4063
  retry: queryOptions.retry ?? 3,
2030
4064
  retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
2031
4065
  });
2032
- const [loadingApisState, setLoadingApisState] = (0, import_react14.useState)(true);
2033
- (0, import_react14.useEffect)(() => {
4066
+ const [loadingApisState, setLoadingApisState] = (0, import_react15.useState)(true);
4067
+ (0, import_react15.useEffect)(() => {
2034
4068
  if (videosData !== void 0) {
2035
4069
  setLoadingApisState(false);
2036
4070
  const videosWithPlaylists = videosData.filter(
@@ -2062,12 +4096,12 @@ var Event = ({
2062
4096
  }
2063
4097
  }, [videosData, eventData]);
2064
4098
  const { t } = useMessages_default(locale);
2065
- (0, import_react14.useEffect)(() => {
4099
+ (0, import_react15.useEffect)(() => {
2066
4100
  if (events?.onEventData && eventData) {
2067
4101
  events.onEventData(eventData);
2068
4102
  }
2069
4103
  }, [eventData, events]);
2070
- (0, import_react14.useEffect)(() => {
4104
+ (0, import_react15.useEffect)(() => {
2071
4105
  if (events?.onVideoData && activeVideoId && videosData) {
2072
4106
  const activeVideo = videosData.find((video) => video.id === activeVideoId);
2073
4107
  if (activeVideo) {
@@ -2075,10 +4109,10 @@ var Event = ({
2075
4109
  }
2076
4110
  }
2077
4111
  }, [activeVideoId, videosData, events]);
2078
- const [error, setError] = (0, import_react14.useState)(null);
2079
- const [loadingPlaylist, setLoadingPlaylist] = (0, import_react14.useState)(true);
4112
+ const [error, setError] = (0, import_react15.useState)(null);
4113
+ const [loadingPlaylist, setLoadingPlaylist] = (0, import_react15.useState)(true);
2080
4114
  const videosDataError = videosData?.some((video) => !!video.error);
2081
- (0, import_react14.useEffect)(() => {
4115
+ (0, import_react15.useEffect)(() => {
2082
4116
  if (eventError || videosError || videosDataError) {
2083
4117
  const errorObj = eventError || videosError || videosData?.find((video) => !!video.error)?.error && new Error(videosData?.find((video) => !!video.error)?.error) || new Error("default");
2084
4118
  setError(errorObj);
@@ -2089,7 +4123,7 @@ var Event = ({
2089
4123
  setError(null);
2090
4124
  }
2091
4125
  }, [eventError, videosError, videosDataError, videosData, events]);
2092
- (0, import_react14.useEffect)(() => {
4126
+ (0, import_react15.useEffect)(() => {
2093
4127
  const eventLoadedWithNoVideos = !isEventLoading && eventData && eventData.videoIds && (!eventData.videoIds || eventData?.videoIds?.length === 0) && !loadingApisState;
2094
4128
  const allApisLoadedWithPotentialVideos = !isEventLoading && !videosIsLoading && eventData && !loadingApisState;
2095
4129
  if (eventLoadedWithNoVideos || allApisLoadedWithPotentialVideos) {
@@ -2099,7 +4133,7 @@ var Event = ({
2099
4133
  if (error) {
2100
4134
  const title = t(error.message)?.length ? t(error.message) : t("DEFAULT_ERROR");
2101
4135
  const description = t(`${error.message}_DESCRIPTION`)?.length ? t(`${error.message}_DESCRIPTION`) : t("DEFAULT_ERROR_DESCRIPTION");
2102
- 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)(
4136
+ 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)(
2103
4137
  ErrorScreen,
2104
4138
  {
2105
4139
  title,
@@ -2111,12 +4145,12 @@ var Event = ({
2111
4145
  events.onEmptyPlaylists();
2112
4146
  }
2113
4147
  if (loadingPlaylist) {
2114
- 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, {}) }) });
4148
+ 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, {}) }) });
2115
4149
  }
2116
4150
  if (activePlaylist && activeVideoId && videosData) {
2117
4151
  const activeVideo = videosData.find((video) => video.id === activeVideoId);
2118
- 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: [
2119
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
4152
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: (0, import_tailwind_merge4.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: [
4153
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
2120
4154
  Player,
2121
4155
  {
2122
4156
  ...props,
@@ -2125,8 +4159,8 @@ var Event = ({
2125
4159
  events,
2126
4160
  containerClassName: "w-full h-full"
2127
4161
  }
2128
- ),
2129
- !hideTitle && eventData && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
4162
+ ) }),
4163
+ !hideTitle && eventData && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
2130
4164
  TitleAndDescription,
2131
4165
  {
2132
4166
  title: eventData.title,
@@ -2135,10 +4169,10 @@ var Event = ({
2135
4169
  locale
2136
4170
  }
2137
4171
  )
2138
- ] }) });
4172
+ ] });
2139
4173
  }
2140
4174
  if (eventData) {
2141
- 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)(
4175
+ 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)(
2142
4176
  PreEvent,
2143
4177
  {
2144
4178
  event: eventData,
@@ -2160,12 +4194,12 @@ function PreEvent({
2160
4194
  }) {
2161
4195
  const date = new Date(event.startTime);
2162
4196
  const now = /* @__PURE__ */ new Date();
2163
- const [remainingTime, setRemainingTime] = (0, import_react14.useState)(
4197
+ const [remainingTime, setRemainingTime] = (0, import_react15.useState)(
2164
4198
  date.getTime() - now.getTime()
2165
4199
  );
2166
4200
  const shouldBeStarted = remainingTime < 0;
2167
4201
  const { t } = useMessages_default(locale);
2168
- (0, import_react14.useEffect)(() => {
4202
+ (0, import_react15.useEffect)(() => {
2169
4203
  const interval = setInterval(() => {
2170
4204
  if (remainingTime < 0) {
2171
4205
  clearInterval(interval);
@@ -2175,17 +4209,17 @@ function PreEvent({
2175
4209
  }, 1e3);
2176
4210
  return () => clearInterval(interval);
2177
4211
  }, [date, remainingTime]);
2178
- const renderCountdown = (0, import_react14.useCallback)(() => {
4212
+ const renderCountdown = (0, import_react15.useCallback)(() => {
2179
4213
  if (shouldBeStarted) {
2180
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-base-content text-xl", children: t("EVENT_NOT_STARTED") });
4214
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-base-content text-xl", children: t("EVENT_NOT_STARTED") });
2181
4215
  }
2182
4216
  const seconds = Math.floor(remainingTime / 1e3) % 60;
2183
4217
  const minutes = Math.floor(remainingTime / 1e3 / 60) % 60;
2184
4218
  const hours = Math.floor(remainingTime / 1e3 / 60 / 60) % 24;
2185
4219
  const days = Math.floor(remainingTime / 1e3 / 60 / 60 / 24);
2186
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "grid grid-flow-col gap-5 text-center auto-cols-max", children: [
2187
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
2188
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
4220
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "grid grid-flow-col gap-5 text-center auto-cols-max", children: [
4221
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
4222
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
2189
4223
  "span",
2190
4224
  {
2191
4225
  style: { "--value": days },
@@ -2194,10 +4228,10 @@ function PreEvent({
2194
4228
  children: days?.toString()?.padStart(2, "0")
2195
4229
  }
2196
4230
  ) }),
2197
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("DAYS") })
4231
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("DAYS") })
2198
4232
  ] }),
2199
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
2200
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
4233
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
4234
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
2201
4235
  "span",
2202
4236
  {
2203
4237
  style: { "--value": hours },
@@ -2206,10 +4240,10 @@ function PreEvent({
2206
4240
  children: hours?.toString()?.padStart(2, "0")
2207
4241
  }
2208
4242
  ) }),
2209
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("HOURS") })
4243
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("HOURS") })
2210
4244
  ] }),
2211
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
2212
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
4245
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
4246
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
2213
4247
  "span",
2214
4248
  {
2215
4249
  style: { "--value": minutes },
@@ -2218,10 +4252,10 @@ function PreEvent({
2218
4252
  children: minutes?.toString()?.padStart(2, "0")
2219
4253
  }
2220
4254
  ) }),
2221
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("MINUTES") })
4255
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("MINUTES") })
2222
4256
  ] }),
2223
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
2224
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
4257
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
4258
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
2225
4259
  "span",
2226
4260
  {
2227
4261
  style: { "--value": seconds },
@@ -2230,12 +4264,12 @@ function PreEvent({
2230
4264
  children: seconds?.toString()?.padStart(2, "0")
2231
4265
  }
2232
4266
  ) }),
2233
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("SECONDS") })
4267
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("SECONDS") })
2234
4268
  ] })
2235
4269
  ] });
2236
4270
  }, [remainingTime, shouldBeStarted, t]);
2237
- 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: [
2238
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
4271
+ 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: [
4272
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
2239
4273
  "div",
2240
4274
  {
2241
4275
  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",
@@ -2244,13 +4278,10 @@ function PreEvent({
2244
4278
  backgroundRepeat: "no-repeat",
2245
4279
  backgroundSize: "cover"
2246
4280
  },
2247
- children: [
2248
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute inset-0 bg-black bg-opacity-40" }),
2249
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "relative z-10", children: renderCountdown() })
2250
- ]
4281
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative z-10", children: renderCountdown() })
2251
4282
  }
2252
4283
  ),
2253
- !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
4284
+ !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
2254
4285
  TitleAndDescription,
2255
4286
  {
2256
4287
  title: event.title,
@@ -2259,21 +4290,18 @@ function PreEvent({
2259
4290
  locale
2260
4291
  }
2261
4292
  )
2262
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
2263
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
4293
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
4294
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
2264
4295
  "div",
2265
4296
  {
2266
4297
  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",
2267
4298
  style: {
2268
4299
  backgroundImage: backgroundImageUrl ? `url(${backgroundImageUrl})` : ""
2269
4300
  },
2270
- children: [
2271
- backgroundImageUrl && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute inset-0 bg-black bg-opacity-40" }),
2272
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "relative z-10", children: renderCountdown() })
2273
- ]
4301
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative z-10", children: renderCountdown() })
2274
4302
  }
2275
4303
  ),
2276
- !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
4304
+ !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
2277
4305
  TitleAndDescription,
2278
4306
  {
2279
4307
  title: event.title,
@@ -2291,9 +4319,9 @@ var TitleAndDescription = ({
2291
4319
  locale = "en",
2292
4320
  className
2293
4321
  }) => {
2294
- 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: [
2295
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-base md:text-xl m-event-title text-base-content font-medium", children: title }),
2296
- startTime ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "text-sm md:text-base text-base-content/70 m-event-start-time", children: [
4322
+ 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: [
4323
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-base md:text-xl m-event-title text-base-content font-medium", children: title }),
4324
+ startTime ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "text-sm md:text-base text-base-content/70 m-event-start-time", children: [
2297
4325
  new Date(startTime || "").toLocaleDateString(locale || "default", {
2298
4326
  month: "long",
2299
4327
  year: "numeric",
@@ -2306,29 +4334,15 @@ var TitleAndDescription = ({
2306
4334
  minute: "2-digit"
2307
4335
  })
2308
4336
  ] }) : null,
2309
- description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-xs md:text-sm text-base-content/60 uppercase", children: description })
4337
+ description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-xs md:text-sm text-base-content/60 uppercase", children: description })
2310
4338
  ] });
2311
4339
  };
2312
4340
 
2313
- // src/ClientSideEvent.tsx
2314
- var import_react15 = require("react");
2315
- var import_jsx_runtime8 = require("react/jsx-runtime");
2316
- var ClientSideEvent = (props) => {
2317
- const [isClient, setIsClient] = (0, import_react15.useState)(false);
2318
- (0, import_react15.useEffect)(() => {
2319
- setIsClient(true);
2320
- }, []);
2321
- if (!isClient) {
2322
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "md:rounded-2xl overflow-hidden aspect-video bg-[#151515] flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-white" }) });
2323
- }
2324
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Event, { ...props });
2325
- };
2326
-
2327
4341
  // src/CreativeWork.tsx
2328
4342
  var import_react16 = require("react");
2329
4343
  var import_tailwind_merge5 = require("tailwind-merge");
2330
4344
  var import_react_query3 = require("@tanstack/react-query");
2331
- var import_jsx_runtime9 = require("react/jsx-runtime");
4345
+ var import_jsx_runtime11 = require("react/jsx-runtime");
2332
4346
  var CreativeWork = ({
2333
4347
  publicKey,
2334
4348
  creativeWorkId,
@@ -2441,7 +4455,7 @@ var CreativeWork = ({
2441
4455
  if (error) {
2442
4456
  const title = t(error.message)?.length ? t(error.message) : t("DEFAULT_ERROR");
2443
4457
  const description = t(`${error.message}_DESCRIPTION`)?.length ? t(`${error.message}_DESCRIPTION`) : t("DEFAULT_ERROR_DESCRIPTION");
2444
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_tailwind_merge5.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)(
4458
+ 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)(
2445
4459
  ErrorScreen,
2446
4460
  {
2447
4461
  title,
@@ -2471,10 +4485,10 @@ var CreativeWork = ({
2471
4485
  events
2472
4486
  ]);
2473
4487
  if (isCreativeWorkLoading || videosIsLoading || loadingApisState) {
2474
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_tailwind_merge5.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)(Loading, {}) }) });
4488
+ 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, {}) }) });
2475
4489
  }
2476
4490
  if (showCountDown && creativeWorkData) {
2477
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsx)(
4491
+ 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)(
2478
4492
  PreCreativeWork,
2479
4493
  {
2480
4494
  creativeWork: creativeWorkData,
@@ -2487,8 +4501,8 @@ var CreativeWork = ({
2487
4501
  }
2488
4502
  if (activeVideoId && activePlaylist && !loadingPlaylist) {
2489
4503
  const activeVideo = videosData?.find((video) => video.id === activeVideoId);
2490
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (0, import_tailwind_merge5.twMerge)("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative w-full h-full", children: [
2491
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
4504
+ 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: [
4505
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
2492
4506
  Player,
2493
4507
  {
2494
4508
  ...props,
@@ -2500,7 +4514,7 @@ var CreativeWork = ({
2500
4514
  containerClassName: "w-full h-full"
2501
4515
  }
2502
4516
  ),
2503
- !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
4517
+ !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
2504
4518
  TitleAndDescription2,
2505
4519
  {
2506
4520
  title: creativeWorkData?.title || "",
@@ -2513,7 +4527,7 @@ var CreativeWork = ({
2513
4527
  ] }) });
2514
4528
  }
2515
4529
  if (loadingPlaylist) {
2516
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Loading, {});
4530
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Loading, {});
2517
4531
  }
2518
4532
  return null;
2519
4533
  };
@@ -2545,15 +4559,15 @@ function PreCreativeWork({
2545
4559
  }, [date, remainingTime]);
2546
4560
  const renderCountdown = () => {
2547
4561
  if (shouldBeStarted) {
2548
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-base-content text-xl", children: t("EVENT_NOT_STARTED") });
4562
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-base-content text-xl", children: t("EVENT_NOT_STARTED") });
2549
4563
  }
2550
4564
  const seconds = Math.floor(remainingTime / 1e3) % 60;
2551
4565
  const minutes = Math.floor(remainingTime / 1e3 / 60) % 60;
2552
4566
  const hours = Math.floor(remainingTime / 1e3 / 60 / 60) % 24;
2553
4567
  const days = Math.floor(remainingTime / 1e3 / 60 / 60 / 24);
2554
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "grid grid-flow-col gap-5 text-center auto-cols-max", children: [
2555
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
2556
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
4568
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "grid grid-flow-col gap-5 text-center auto-cols-max", children: [
4569
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
4570
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
2557
4571
  "span",
2558
4572
  {
2559
4573
  style: { "--value": days },
@@ -2562,10 +4576,10 @@ function PreCreativeWork({
2562
4576
  children: days?.toString()?.padStart(2, "0")
2563
4577
  }
2564
4578
  ) }),
2565
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("DAYS") })
4579
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("DAYS") })
2566
4580
  ] }),
2567
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
2568
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
4581
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
4582
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
2569
4583
  "span",
2570
4584
  {
2571
4585
  style: { "--value": hours },
@@ -2574,10 +4588,10 @@ function PreCreativeWork({
2574
4588
  children: hours?.toString()?.padStart(2, "0")
2575
4589
  }
2576
4590
  ) }),
2577
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("HOURS") })
4591
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("HOURS") })
2578
4592
  ] }),
2579
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
2580
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
4593
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
4594
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
2581
4595
  "span",
2582
4596
  {
2583
4597
  style: { "--value": minutes },
@@ -2586,10 +4600,10 @@ function PreCreativeWork({
2586
4600
  children: minutes?.toString()?.padStart(2, "0")
2587
4601
  }
2588
4602
  ) }),
2589
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("MINUTES") })
4603
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("MINUTES") })
2590
4604
  ] }),
2591
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
2592
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
4605
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
4606
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
2593
4607
  "span",
2594
4608
  {
2595
4609
  style: { "--value": seconds },
@@ -2598,12 +4612,12 @@ function PreCreativeWork({
2598
4612
  children: seconds?.toString()?.padStart(2, "0")
2599
4613
  }
2600
4614
  ) }),
2601
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("SECONDS") })
4615
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("SECONDS") })
2602
4616
  ] })
2603
4617
  ] });
2604
4618
  };
2605
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
2606
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
4619
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
4620
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
2607
4621
  "div",
2608
4622
  {
2609
4623
  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",
@@ -2611,12 +4625,12 @@ function PreCreativeWork({
2611
4625
  backgroundImage: backgroundImageUrl ? `url(${backgroundImageUrl})` : ""
2612
4626
  },
2613
4627
  children: [
2614
- backgroundImageUrl && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute inset-0 bg-black bg-opacity-40" }),
2615
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "relative z-10", children: renderCountdown() })
4628
+ backgroundImageUrl && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute inset-0 bg-black bg-opacity-40" }),
4629
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "relative z-10", children: renderCountdown() })
2616
4630
  ]
2617
4631
  }
2618
4632
  ),
2619
- !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
4633
+ !hideTitle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
2620
4634
  TitleAndDescription2,
2621
4635
  {
2622
4636
  title: creativeWork.title,
@@ -2634,9 +4648,9 @@ var TitleAndDescription2 = ({
2634
4648
  locale = "en",
2635
4649
  className
2636
4650
  }) => {
2637
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: (0, import_tailwind_merge5.twMerge)("mt-3 mb-6 m-event-details-ctn px-4 text-left w-full", className), children: [
2638
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-base md:text-xl m-event-title text-base-content font-medium", children: title }),
2639
- releaseTime ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "text-sm md:text-base text-base-content/70 m-event-start-time", children: [
4651
+ 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: [
4652
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "text-base md:text-xl m-event-title text-base-content font-medium", children: title }),
4653
+ releaseTime ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "text-sm md:text-base text-base-content/70 m-event-start-time", children: [
2640
4654
  new Date(releaseTime || "").toLocaleDateString(locale || "default", {
2641
4655
  month: "long",
2642
4656
  year: "numeric",
@@ -2649,13 +4663,13 @@ var TitleAndDescription2 = ({
2649
4663
  minute: "2-digit"
2650
4664
  })
2651
4665
  ] }) : null,
2652
- description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-xs md:text-sm text-base-content/60 uppercase", children: description })
4666
+ description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "text-xs md:text-sm text-base-content/60 uppercase", children: description })
2653
4667
  ] });
2654
4668
  };
2655
4669
 
2656
4670
  // src/QueryProvider.tsx
2657
4671
  var import_react_query4 = require("@tanstack/react-query");
2658
- var import_jsx_runtime10 = require("react/jsx-runtime");
4672
+ var import_jsx_runtime12 = require("react/jsx-runtime");
2659
4673
  var queryClient = new import_react_query4.QueryClient({
2660
4674
  defaultOptions: {
2661
4675
  queries: {
@@ -2669,15 +4683,17 @@ var queryClient = new import_react_query4.QueryClient({
2669
4683
  }
2670
4684
  });
2671
4685
  var QueryProvider = ({ children }) => {
2672
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_query4.QueryClientProvider, { client: queryClient, children });
4686
+ return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_query4.QueryClientProvider, { client: queryClient, children });
2673
4687
  };
2674
4688
  // Annotate the CommonJS export names for ESM import in node:
2675
4689
  0 && (module.exports = {
2676
- ClientSideEvent,
4690
+ BigPlayIcon,
2677
4691
  CreativeWork,
2678
4692
  Event,
2679
4693
  Player,
2680
4694
  QueryProvider,
4695
+ SkipBackIcon,
4696
+ SkipForwardIcon,
2681
4697
  Video,
2682
4698
  queryClient
2683
4699
  });