@mottosports/motto-video-player 1.0.0

package/dist/index.mjs

@@ -0,0 +1,2590 @@
+"use client";
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/index.css
+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');
+
+// src/Player.tsx
+import { forwardRef, useEffect as useEffect5, useRef as useRef8, useImperativeHandle } from "react";
+import shaka2 from "shaka-player/dist/shaka-player.ui";
+
+// src/hooks/useShakePlayer.ts
+import { useRef, useCallback } from "react";
+import { Player as ShakaPlayer, polyfill } from "shaka-player/dist/shaka-player.ui";
+var useShakePlayer = ({
+  src,
+  shakaConfig,
+  drmConfig,
+  onError,
+  onPlayerReady
+}) => {
+  const playerRef = useRef(null);
+  const initializePlayer = useCallback(async (video) => {
+    try {
+      polyfill.installAll();
+      if (!ShakaPlayer.isBrowserSupported()) {
+        throw new Error("Browser not supported by Shaka Player");
+      }
+      const player = new ShakaPlayer();
+      playerRef.current = player;
+      await player.attach(video);
+      if (shakaConfig) {
+        player.configure(shakaConfig);
+      }
+      if (drmConfig) {
+        if (drmConfig.clearKeys) {
+          player.configure({ "drm.clearKeys": drmConfig.clearKeys });
+        }
+        if (drmConfig.servers) {
+          player.configure({ "drm.servers": drmConfig.servers });
+        }
+      }
+      player.addEventListener("error", (event) => {
+        const error = event.detail;
+        console.error("Shaka Player Error:", error);
+        onError?.(new Error(`Shaka Player Error: ${error.message || "Unknown error"}`));
+      });
+      await player.load(src);
+      onPlayerReady?.(player);
+      return player;
+    } catch (error) {
+      console.error("Error initializing Shaka Player:", error);
+      onError?.(error);
+      throw error;
+    }
+  }, [shakaConfig, drmConfig, src, onError, onPlayerReady]);
+  const destroyPlayer = useCallback(async () => {
+    if (playerRef.current) {
+      try {
+        await playerRef.current.destroy();
+      } catch (error) {
+        console.warn("Error destroying Shaka Player:", error);
+      } finally {
+        playerRef.current = null;
+      }
+    }
+  }, []);
+  return {
+    playerRef,
+    initializePlayer,
+    destroyPlayer
+  };
+};
+
+// src/hooks/useQualityControl.ts
+import { useCallback as useCallback2 } from "react";
+var useQualityControl = (playerRef, qualityConfig, onQualityChange) => {
+  const getAvailableQualities = useCallback2(() => {
+    if (!playerRef.current) return [];
+    const tracks = playerRef.current.getVariantTracks();
+    const qualities = tracks.filter(
+      (track, index, self) => index === self.findIndex((t) => t.height === track.height)
+    ).map((track) => ({
+      height: track.height || 0,
+      bandwidth: track.bandwidth || 0,
+      label: `${track.height}p`
+    })).sort((a, b) => b.height - a.height);
+    return qualities;
+  }, [playerRef]);
+  const setQuality = useCallback2((height) => {
+    if (!playerRef.current) return;
+    if (height === 0) {
+      playerRef.current.configure({
+        abr: { enabled: true }
+      });
+    } else {
+      playerRef.current.configure({
+        abr: { enabled: false }
+      });
+      const tracks = playerRef.current.getVariantTracks();
+      const targetTrack = tracks.find((track) => track.height === height);
+      if (targetTrack) {
+        playerRef.current.selectVariantTrack(
+          targetTrack,
+          /* clearBuffer= */
+          true
+        );
+      }
+    }
+  }, [playerRef]);
+  const setupQualityTracking = useCallback2(() => {
+    if (!playerRef.current || !onQualityChange) return;
+    const handleQualityChange = () => {
+      const activeTrack = playerRef.current.getVariantTracks().find((track) => track.active);
+      if (activeTrack) {
+        onQualityChange({
+          height: activeTrack.height || 0,
+          bandwidth: activeTrack.bandwidth || 0
+        });
+      }
+    };
+    playerRef.current.addEventListener("variantchanged", handleQualityChange);
+    return () => {
+      playerRef.current?.removeEventListener("variantchanged", handleQualityChange);
+    };
+  }, [playerRef, onQualityChange]);
+  const configureQuality = useCallback2(() => {
+    if (!playerRef.current || !qualityConfig) return;
+    if (qualityConfig.enableAdaptation !== void 0) {
+      playerRef.current.configure({
+        abr: { enabled: qualityConfig.enableAdaptation }
+      });
+    }
+    if (qualityConfig.selectedQuality !== void 0) {
+      setQuality(qualityConfig.selectedQuality);
+    }
+  }, [playerRef, qualityConfig, setQuality]);
+  return {
+    getAvailableQualities,
+    setQuality,
+    setupQualityTracking,
+    configureQuality
+  };
+};
+
+// src/hooks/useSkipControls.ts
+import { useCallback as useCallback3 } from "react";
+var useSkipControls = (videoRef, onSkipBack, onSkipForward) => {
+  const skipDuration = 15;
+  const skipBack = useCallback3(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    const newTime = Math.max(0, video.currentTime - skipDuration);
+    video.currentTime = newTime;
+    onSkipBack?.(newTime);
+  }, [videoRef, onSkipBack]);
+  const skipForward = useCallback3(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    const newTime = Math.min(video.duration || 0, video.currentTime + skipDuration);
+    video.currentTime = newTime;
+    onSkipForward?.(newTime);
+  }, [videoRef, onSkipForward]);
+  const shouldShowSkipControls = useCallback3(() => {
+    return true;
+  }, []);
+  return {
+    skipBack,
+    skipForward,
+    skipDuration,
+    shouldShowSkipControls
+  };
+};
+
+// src/hooks/useMuxAnalytics.ts
+import { useCallback as useCallback4, useRef as useRef3 } from "react";
+import initShakaPlayerMux from "@mux/mux-data-shakaplayer";
+import shaka from "shaka-player/dist/shaka-player.ui";
+var useMuxAnalytics = (playerRef, muxConfig, onMuxReady, onMuxDataUpdate) => {
+  const shakaPlayerMuxRef = useRef3(null);
+  const initializeMux = useCallback4(() => {
+    if (!muxConfig || !playerRef.current) return;
+    try {
+      const playerInitTime = initShakaPlayerMux.utils.now();
+      const muxOptions = {
+        debug: muxConfig.debug || false,
+        disableCookies: muxConfig.disableCookies || false,
+        respectDoNotTrack: muxConfig.respectDoNotTrack || false,
+        automaticErrorTracking: muxConfig.automaticErrorTracking !== false,
+        ...muxConfig.beaconCollectionDomain && { beaconCollectionDomain: muxConfig.beaconCollectionDomain },
+        ...muxConfig.errorTranslator && { errorTranslator: muxConfig.errorTranslator },
+        data: {
+          env_key: muxConfig.envKey,
+          player_name: "Motto Video Player",
+          player_version: "1.0.0",
+          player_init_time: playerInitTime,
+          ...muxConfig.metadata
+        }
+      };
+      shakaPlayerMuxRef.current = initShakaPlayerMux(playerRef.current, muxOptions, shaka);
+      onMuxReady?.();
+    } catch (error) {
+      console.error("Failed to initialize Mux Analytics:", error);
+    }
+  }, [muxConfig, onMuxReady, playerRef]);
+  const updateMuxData = useCallback4((data) => {
+    if (playerRef.current?.mux?.updateData) {
+      try {
+        playerRef.current.mux.updateData(data);
+        onMuxDataUpdate?.(data);
+      } catch (error) {
+        console.error("Failed to update Mux data:", error);
+      }
+    }
+  }, [onMuxDataUpdate, playerRef]);
+  const handleMuxError = useCallback4((error) => {
+    if (shakaPlayerMuxRef.current?.loadErrorHandler) {
+      shakaPlayerMuxRef.current.loadErrorHandler(error);
+    }
+  }, []);
+  const destroyMux = useCallback4(() => {
+    if (playerRef.current?.mux?.destroy) {
+      try {
+        playerRef.current.mux.destroy();
+      } catch (error) {
+        console.error("Error destroying Mux:", error);
+      }
+    }
+    if (shakaPlayerMuxRef.current) {
+      shakaPlayerMuxRef.current = null;
+    }
+  }, [playerRef]);
+  return {
+    initializeMux,
+    updateMuxData,
+    handleMuxError,
+    destroyMux,
+    shakaPlayerMuxRef
+  };
+};
+
+// src/hooks/useShakaUI.ts
+import { useCallback as useCallback5, useRef as useRef4 } from "react";
+import { ui as ShakaUI } from "shaka-player/dist/shaka-player.ui";
+var SkipBackButton = class {
+  constructor(parent, controls, onSkipBack) {
+    this.parent = parent;
+    this.controls = controls;
+    this.eventManager = { listen: (element, event, handler) => {
+      element.addEventListener(event, handler);
+    } };
+    this.button_ = document.createElement("button");
+    this.button_.className = "shaka-button motto-native-skip-button";
+    this.button_.innerHTML = `
+      <svg width="24px" stroke-width="2" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <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>
+        <path d="M9 9L9 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+        <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>
+        <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>
+      </svg>
+    `;
+    this.button_.title = "Skip back 15 seconds";
+    this.button_.setAttribute("aria-label", "Skip back 15 seconds");
+    this.parent.appendChild(this.button_);
+    this.eventManager.listen(this.button_, "click", () => {
+      const video = this.controls.getVideo();
+      if (video) {
+        const newTime = Math.max(0, video.currentTime - 15);
+        video.currentTime = newTime;
+        onSkipBack?.(newTime);
+      }
+    });
+  }
+};
+var SkipForwardButton = class {
+  constructor(parent, controls, onSkipForward) {
+    this.parent = parent;
+    this.controls = controls;
+    this.eventManager = { listen: (element, event, handler) => {
+      element.addEventListener(event, handler);
+    } };
+    this.button_ = document.createElement("button");
+    this.button_.className = "shaka-button motto-native-skip-button";
+    this.button_.innerHTML = `
+      <svg fill="none" height="24" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+        <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"/>
+        <path d="M12 4H19.5M19.5 4L17.5 2M19.5 4L17.5 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M9 9L9 16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+        <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"/>
+      </svg>
+    `;
+    this.button_.title = "Skip forward 15 seconds";
+    this.button_.setAttribute("aria-label", "Skip forward 15 seconds");
+    this.parent.appendChild(this.button_);
+    this.eventManager.listen(this.button_, "click", () => {
+      const video = this.controls.getVideo();
+      if (video) {
+        const newTime = Math.min(video.duration || 0, video.currentTime + 15);
+        video.currentTime = newTime;
+        onSkipForward?.(newTime);
+      }
+    });
+  }
+};
+var SkipBackButtonFactory = class {
+  constructor(onSkipBack) {
+    this.onSkipBack = onSkipBack;
+  }
+  create(rootElement, controls) {
+    return new SkipBackButton(rootElement, controls, this.onSkipBack);
+  }
+};
+var SkipForwardButtonFactory = class {
+  constructor(onSkipForward) {
+    this.onSkipForward = onSkipForward;
+  }
+  create(rootElement, controls) {
+    return new SkipForwardButton(rootElement, controls, this.onSkipForward);
+  }
+};
+var MobilePlayButton = class {
+  constructor(parent, controls) {
+    this.parent = parent;
+    this.controls = controls;
+    this.video = controls?.getVideo?.() || parent.querySelector("video") || document.querySelector("video");
+    if (!this.video) {
+      console.error("MobilePlayButton: No video element found");
+      return;
+    }
+    this.eventManager = { listen: (element, event, handler) => {
+      element.addEventListener(event, handler);
+    } };
+    this.button_ = document.createElement("button");
+    this.button_.className = "motto-mobile-play-button";
+    this.updateIcon();
+    this.parent.appendChild(this.button_);
+    this.eventManager.listen(this.button_, "click", () => {
+      if (this.video.paused) {
+        this.video.play();
+      } else {
+        this.video.pause();
+      }
+    });
+    this.eventManager.listen(this.video, "play", () => this.updateIcon());
+    this.eventManager.listen(this.video, "pause", () => this.updateIcon());
+  }
+  updateIcon() {
+    if (this.video.paused) {
+      this.button_.innerHTML = `
+        <svg xmlns="http://www.w3.org/2000/svg" stroke-width="2" viewBox="0 0 24 24" fill="currentColor">
+          <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" />
+        </svg>
+      `;
+      this.button_.setAttribute("aria-label", "Play");
+    } else {
+      this.button_.innerHTML = `
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+          <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>
+      `;
+      this.button_.setAttribute("aria-label", "Pause");
+    }
+  }
+};
+var MobileSkipBackButton = class {
+  constructor(parent, controls, onSkipBack) {
+    this.parent = parent;
+    this.controls = controls;
+    this.video = controls?.getVideo?.() || parent.querySelector("video") || document.querySelector("video");
+    if (!this.video) {
+      console.error("MobileSkipBackButton: No video element found");
+      return;
+    }
+    this.eventManager = { listen: (element, event, handler) => {
+      element.addEventListener(event, handler);
+    } };
+    this.button_ = document.createElement("button");
+    this.button_.className = "motto-mobile-skip-button";
+    this.button_.innerHTML = `
+      <svg width="20px" stroke-width="2" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <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>
+        <path d="M9 9L9 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+        <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>
+        <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>
+      </svg>
+    `;
+    this.button_.setAttribute("aria-label", "Skip back 15 seconds");
+    this.parent.appendChild(this.button_);
+    this.eventManager.listen(this.button_, "click", () => {
+      const newTime = Math.max(0, this.video.currentTime - 15);
+      this.video.currentTime = newTime;
+      onSkipBack?.(newTime);
+    });
+  }
+};
+var MobileSkipForwardButton = class {
+  constructor(parent, controls, onSkipForward) {
+    this.parent = parent;
+    this.controls = controls;
+    this.video = controls?.getVideo?.() || parent.querySelector("video") || document.querySelector("video");
+    if (!this.video) {
+      console.error("MobileSkipForwardButton: No video element found");
+      return;
+    }
+    this.eventManager = { listen: (element, event, handler) => {
+      element.addEventListener(event, handler);
+    } };
+    this.button_ = document.createElement("button");
+    this.button_.className = "motto-mobile-skip-button";
+    this.button_.innerHTML = `
+      <svg fill="none" height="20" stroke-width="2" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg">
+        <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"/>
+        <path d="M12 4H19.5M19.5 4L17.5 2M19.5 4L17.5 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M9 9L9 16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+        <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"/>
+      </svg>
+    `;
+    this.button_.setAttribute("aria-label", "Skip forward 15 seconds");
+    this.parent.appendChild(this.button_);
+    this.eventManager.listen(this.button_, "click", () => {
+      const newTime = Math.min(this.video.duration || 0, this.video.currentTime + 15);
+      this.video.currentTime = newTime;
+      onSkipForward?.(newTime);
+    });
+  }
+};
+var MobileControlsContainer = class {
+  constructor(parent, controls, onSkipBack, onSkipForward) {
+    this.parent = parent;
+    this.controls = controls;
+    if (!parent) {
+      console.error("MobileControlsContainer: No parent element provided");
+      return;
+    }
+    this.container_ = document.createElement("div");
+    this.container_.className = "motto-mobile-controls-overlay";
+    const controlsGroup = document.createElement("div");
+    controlsGroup.className = "motto-mobile-controls-group";
+    new MobileSkipBackButton(controlsGroup, controls, onSkipBack);
+    new MobilePlayButton(controlsGroup, controls);
+    new MobileSkipForwardButton(controlsGroup, controls, onSkipForward);
+    this.container_.appendChild(controlsGroup);
+    this.parent.appendChild(this.container_);
+    this.setupVisibilitySync();
+  }
+  setupVisibilitySync() {
+    setTimeout(() => {
+      this.syncVisibility();
+      this.observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === "attributes" && mutation.attributeName === "class") {
+            this.syncVisibility();
+          }
+        });
+      });
+      this.observer.observe(this.parent, {
+        attributes: true,
+        attributeFilter: ["class"]
+      });
+      const video = this.controls?.getVideo?.() || this.parent.querySelector("video");
+      if (video) {
+        video.addEventListener("play", () => {
+          setTimeout(() => this.syncVisibility(), 50);
+        });
+        video.addEventListener("pause", () => {
+          setTimeout(() => this.syncVisibility(), 50);
+        });
+      }
+    }, 1e3);
+  }
+  syncVisibility() {
+    const mainContainer = this.parent;
+    const hasNoCursor = mainContainer.classList.contains("no-cursor");
+    const video = this.controls?.getVideo?.() || this.parent.querySelector("video");
+    const isVideoPaused = video ? video.paused : false;
+    const isControlsVisible = !hasNoCursor || isVideoPaused;
+    if (this.container_) {
+      if (isControlsVisible) {
+        this.container_.style.opacity = "1";
+        this.container_.style.pointerEvents = "none";
+      } else {
+        this.container_.style.opacity = "0";
+        this.container_.style.pointerEvents = "none";
+      }
+    }
+  }
+  isElementVisible(element) {
+    const style = window.getComputedStyle(element);
+    const hasHiddenClass = element.classList.contains("shaka-hidden") || element.classList.contains("hidden") || element.classList.contains("shaka-fade-out");
+    return style.display !== "none" && style.visibility !== "hidden" && style.opacity !== "0" && !element.hidden && !hasHiddenClass;
+  }
+};
+var MobileControlsContainerFactory = class {
+  constructor(onSkipBack, onSkipForward) {
+    this.onSkipBack = onSkipBack;
+    this.onSkipForward = onSkipForward;
+  }
+  create(rootElement, controls) {
+    return new MobileControlsContainer(rootElement, controls, this.onSkipBack, this.onSkipForward);
+  }
+};
+var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig, seekbarColors, onSkipBack, onSkipForward) => {
+  const uiRef = useRef4(null);
+  const registeredElements = useRef4(/* @__PURE__ */ new Set());
+  const initializeUI = useCallback5(async () => {
+    if (!controls || !containerRef.current || !playerRef.current || !videoRef.current) {
+      return null;
+    }
+    const isMobile = window.innerWidth <= 767 || /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    if (!registeredElements.current.has("skip_back_button")) {
+      ShakaUI.Controls.registerElement("skip_back_button", new SkipBackButtonFactory(onSkipBack));
+      registeredElements.current.add("skip_back_button");
+    }
+    if (!registeredElements.current.has("skip_forward_button")) {
+      ShakaUI.Controls.registerElement("skip_forward_button", new SkipForwardButtonFactory(onSkipForward));
+      registeredElements.current.add("skip_forward_button");
+    }
+    if (isMobile) {
+      if (!registeredElements.current.has("mobile_controls_container")) {
+        ShakaUI.Controls.registerElement("mobile_controls_container", new MobileControlsContainerFactory(onSkipBack, onSkipForward));
+        registeredElements.current.add("mobile_controls_container");
+      }
+    }
+    const ui = new ShakaUI.Overlay(playerRef.current, containerRef.current, videoRef.current);
+    uiRef.current = ui;
+    const controlPanelElements = isMobile ? [
+      "mute",
+      "time_and_duration",
+      "spacer",
+      "fullscreen",
+      "overflow_menu"
+    ] : [
+      "skip_back_button",
+      "play_pause",
+      "skip_forward_button",
+      "mute",
+      "volume",
+      "time_and_duration",
+      "spacer",
+      "fullscreen",
+      "overflow_menu"
+    ];
+    const uiConfig = {
+      seekBarColors: {
+        base: seekbarColors?.base || "rgba(255, 255, 255, 0.3)",
+        // Unbuffered track
+        buffered: seekbarColors?.buffered || "rgba(255, 255, 255, 0.5)",
+        // Buffered but not played
+        played: seekbarColors?.played || "#ffffff"
+        // Progress/played portion (white)
+      },
+      controlPanelElements,
+      ...chromecastConfig?.receiverApplicationId && {
+        "castReceiverAppId": chromecastConfig.receiverApplicationId,
+        "castAndroidReceiverCompatible": false
+      }
+    };
+    if (chromecastConfig?.receiverApplicationId) {
+      uiConfig.castReceiverAppId = chromecastConfig.receiverApplicationId;
+      uiConfig.castAndroidReceiverCompatible = false;
+    }
+    ui.configure(uiConfig);
+    if (isMobile) {
+      setTimeout(() => {
+        const container = containerRef.current;
+        const video = videoRef.current;
+        if (container && video) {
+          new MobileControlsContainer(container, { getVideo: () => video }, onSkipBack, onSkipForward);
+        }
+      }, 500);
+    }
+    return ui;
+  }, [controls, containerRef, playerRef, videoRef, chromecastConfig, seekbarColors, onSkipBack, onSkipForward]);
+  const destroyUI = useCallback5(() => {
+    if (uiRef.current) {
+      try {
+        uiRef.current.destroy();
+      } catch (error) {
+        console.error("Error destroying UI:", error);
+      }
+      uiRef.current = null;
+    }
+  }, []);
+  return {
+    uiRef,
+    initializeUI,
+    destroyUI
+  };
+};
+
+// src/hooks/useEventHandlers.ts
+import { useCallback as useCallback6 } from "react";
+var useEventHandlers = (videoRef, handlers) => {
+  const setupEventListeners = useCallback6(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    const { onPlay, onPause, onEnded, onLoadStart, onCanPlay } = handlers;
+    if (onPlay) video.addEventListener("play", onPlay);
+    if (onPause) video.addEventListener("pause", onPause);
+    if (onEnded) video.addEventListener("ended", onEnded);
+    if (onLoadStart) video.addEventListener("loadstart", onLoadStart);
+    if (onCanPlay) video.addEventListener("canplay", onCanPlay);
+  }, [videoRef, handlers]);
+  const cleanupEventListeners = useCallback6(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    const { onPlay, onPause, onEnded, onLoadStart, onCanPlay } = handlers;
+    if (onPlay) video.removeEventListener("play", onPlay);
+    if (onPause) video.removeEventListener("pause", onPause);
+    if (onEnded) video.removeEventListener("ended", onEnded);
+    if (onLoadStart) video.removeEventListener("loadstart", onLoadStart);
+    if (onCanPlay) video.removeEventListener("canplay", onCanPlay);
+  }, [videoRef, handlers]);
+  return {
+    setupEventListeners,
+    cleanupEventListeners
+  };
+};
+
+// src/hooks/useLiveBadge.ts
+import { useEffect, useState, useRef as useRef5 } from "react";
+var useLiveBadge = (playerRef, options = {}) => {
+  const [isLive, setIsLive] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const intervalRef = useRef5(null);
+  const { enabled = true, onLiveStateChange } = options;
+  const checkLiveStatus = () => {
+    if (!playerRef.current || !enabled) {
+      return;
+    }
+    try {
+      const player = playerRef.current;
+      if (!player.getManifest || !player.getPresentationTimeline || typeof player.getPresentationTimeline !== "function") {
+        return;
+      }
+      const manifest = player.getManifest();
+      if (!manifest) {
+        return;
+      }
+      const timeline = player.getPresentationTimeline();
+      if (!timeline || typeof timeline.isLive !== "function") {
+        return;
+      }
+      const liveStatus = timeline.isLive();
+      if (liveStatus !== isLive) {
+        setIsLive(liveStatus);
+        setIsVisible(liveStatus);
+        onLiveStateChange?.(liveStatus);
+      }
+    } catch (error) {
+      if (error instanceof Error && !error.message.includes("not a function")) {
+        console.error("Error checking live status:", error);
+      }
+    }
+  };
+  useEffect(() => {
+    if (!enabled) {
+      setIsLive(false);
+      setIsVisible(false);
+      return;
+    }
+    checkLiveStatus();
+    intervalRef.current = setInterval(checkLiveStatus, 2e3);
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [enabled, playerRef.current]);
+  useEffect(() => {
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, []);
+  const hideBadge = () => setIsVisible(false);
+  const showBadge = () => setIsVisible(true);
+  return {
+    isLive,
+    isVisible,
+    hideBadge,
+    showBadge,
+    checkLiveStatus
+  };
+};
+
+// src/hooks/usePosterFallback.ts
+import { useEffect as useEffect2, useState as useState2 } from "react";
+
+// src/hooks/useLiveIndicator.ts
+import { useEffect as useEffect3, useRef as useRef7 } from "react";
+var useLiveIndicator = (containerRef, options = {}) => {
+  const observerRef = useRef7(null);
+  const {
+    enabled = true,
+    indicatorColor = "#ff0000",
+    indicatorSize = 8,
+    showPulseAnimation = true
+  } = options;
+  useEffect3(() => {
+    if (!containerRef.current || !enabled) {
+      return;
+    }
+    const addLiveIndicator = (currentTimeElement) => {
+      if (currentTimeElement.querySelector(".live-indicator-dot")) {
+        return;
+      }
+      const indicator = document.createElement("span");
+      indicator.className = "live-indicator-dot";
+      indicator.style.cssText = `
+        display: inline-block;
+        width: ${indicatorSize}px;
+        height: ${indicatorSize}px;
+        background-color: ${indicatorColor};
+        border-radius: 50%;
+        margin-right: 6px;
+        vertical-align: middle;
+        ${showPulseAnimation ? "animation: pulse-live 2s infinite;" : ""}
+      `;
+      currentTimeElement.insertBefore(indicator, currentTimeElement.firstChild);
+    };
+    const removeLiveIndicator = (currentTimeElement) => {
+      const indicator = currentTimeElement.querySelector(".live-indicator-dot");
+      if (indicator) {
+        indicator.remove();
+      }
+    };
+    const checkForLiveContent = () => {
+      const currentTimeElements = containerRef.current?.querySelectorAll(".shaka-current-time");
+      currentTimeElements?.forEach((element) => {
+        const textContent = element.textContent?.trim() || "";
+        if (textContent.toLowerCase().includes("live")) {
+          addLiveIndicator(element);
+        } else {
+          removeLiveIndicator(element);
+        }
+      });
+    };
+    checkForLiveContent();
+    observerRef.current = new MutationObserver((mutations) => {
+      let shouldCheck = false;
+      mutations.forEach((mutation) => {
+        if (mutation.type === "childList" || mutation.type === "characterData") {
+          shouldCheck = true;
+        }
+        mutation.addedNodes.forEach((node) => {
+          if (node.nodeType === Node.ELEMENT_NODE) {
+            const element = node;
+            if (element.classList?.contains("shaka-current-time") || element.querySelector?.(".shaka-current-time")) {
+              shouldCheck = true;
+            }
+          }
+        });
+      });
+      if (shouldCheck) {
+        setTimeout(checkForLiveContent, 100);
+      }
+    });
+    observerRef.current.observe(containerRef.current, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+      characterDataOldValue: true
+    });
+    const intervalId = setInterval(checkForLiveContent, 1e3);
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+      clearInterval(intervalId);
+    };
+  }, [containerRef, enabled, indicatorColor, indicatorSize, showPulseAnimation]);
+  return {
+    // Expose method to manually trigger check if needed
+    checkForLiveContent: () => {
+      const currentTimeElements = containerRef.current?.querySelectorAll(".shaka-current-time");
+      currentTimeElements?.forEach((element) => {
+        const textContent = element.textContent?.trim() || "";
+        if (textContent.toLowerCase().includes("live")) {
+        }
+      });
+    }
+  };
+};
+
+// src/hooks/useShakaAbsoluteTime.ts
+import { useEffect as useEffect4, useState as useState3 } from "react";
+function useShakaAbsoluteTime({
+  player,
+  controls,
+  manualStreamStartDate
+}) {
+  const [detectedStreamStart, setDetectedStreamStart] = useState3(null);
+  const detectStreamStartFromManifest = async () => {
+    if (!player) return null;
+    try {
+      const manifest = player.getManifest();
+      if (!manifest) return null;
+      const isLive = player.isLive();
+      if (!isLive) return null;
+      const video = player.getMediaElement();
+      if (video && video.seekable && video.seekable.length > 0) {
+        const seekableStart = video.seekable.start(0);
+        const seekableEnd = video.seekable.end(0);
+        const seekableDuration = seekableEnd - seekableStart;
+        const now = Date.now() / 1e3;
+        const estimatedStreamStart = now - seekableDuration;
+        return new Date(estimatedStreamStart * 1e3);
+      }
+      const stats = player.getStats();
+      if (stats && stats.manifestTimeSeconds) {
+        return new Date((Date.now() / 1e3 - stats.manifestTimeSeconds) * 1e3);
+      }
+      try {
+        const bufferedTimeRanges = video?.buffered;
+        if (bufferedTimeRanges && bufferedTimeRanges.length > 0) {
+          const totalBuffered = bufferedTimeRanges.end(bufferedTimeRanges.length - 1);
+          const now = Date.now() / 1e3;
+          return new Date((now - totalBuffered) * 1e3);
+        }
+      } catch (error) {
+        console.warn("Error extracting buffered timing info:", error);
+      }
+      console.warn("Could not detect stream start time from manifest");
+      return null;
+    } catch (error) {
+      console.warn("Error detecting stream start time:", error);
+      return null;
+    }
+  };
+  useEffect4(() => {
+    if (!player || manualStreamStartDate) return;
+    const detectStartTime = async () => {
+      setTimeout(async () => {
+        const detectedStart = await detectStreamStartFromManifest();
+        if (detectedStart) {
+          setDetectedStreamStart(detectedStart);
+          console.log("Detected stream start time:", detectedStart.toISOString());
+        }
+      }, 1e3);
+    };
+    const onManifestParsed = () => {
+      detectStartTime();
+    };
+    detectStartTime();
+    try {
+      player.addEventListener("manifestparsed", onManifestParsed);
+      player.addEventListener("streaming", onManifestParsed);
+    } catch (error) {
+      console.warn("Could not add manifest event listeners:", error);
+    }
+    return () => {
+      try {
+        player.removeEventListener("manifestparsed", onManifestParsed);
+        player.removeEventListener("streaming", onManifestParsed);
+      } catch (error) {
+      }
+    };
+  }, [player, manualStreamStartDate]);
+  const effectiveStreamStart = manualStreamStartDate || detectedStreamStart;
+  useEffect4(() => {
+    if (!player || !controls || !effectiveStreamStart) return;
+    const video = player.getMediaElement();
+    if (!video) return;
+    let originalGetDisplayTime;
+    let timeDisplayElement;
+    const formatElapsedTime = (elapsedSeconds) => {
+      const hours = Math.floor(elapsedSeconds / 3600);
+      const minutes = Math.floor(elapsedSeconds % 3600 / 60);
+      const seconds = Math.floor(elapsedSeconds % 60);
+      if (hours > 0) {
+        return [hours, minutes, seconds].map((val) => val.toString().padStart(2, "0")).join(":");
+      } else {
+        return [minutes, seconds].map((val) => val.toString().padStart(2, "0")).join(":");
+      }
+    };
+    const getElapsedTime = () => {
+      const now = /* @__PURE__ */ new Date();
+      const elapsedMs = now.getTime() - effectiveStreamStart.getTime();
+      return Math.max(0, elapsedMs / 1e3);
+    };
+    const customGetDisplayTime = function() {
+      const elapsedSeconds = getElapsedTime();
+      return formatElapsedTime(elapsedSeconds);
+    };
+    const setupTimeDisplayOverride = () => {
+      try {
+        const controlsContainer = controls.getControlsContainer();
+        if (!controlsContainer) return;
+        const timeDisplay = controlsContainer.querySelector(".shaka-current-time");
+        if (timeDisplay) {
+          timeDisplayElement = timeDisplay;
+          if (timeDisplayElement.getDisplayTime) {
+            originalGetDisplayTime = timeDisplayElement.getDisplayTime.bind(timeDisplayElement);
+            timeDisplayElement.getDisplayTime = customGetDisplayTime.bind(timeDisplayElement);
+          } else {
+            setupDirectTextUpdate();
+          }
+        }
+      } catch (error) {
+        console.warn("Error setting up time display override:", error);
+        setupDirectTextUpdate();
+      }
+    };
+    const setupDirectTextUpdate = () => {
+      let animationFrameId;
+      let isDestroyed = false;
+      const updateTimeDisplay = () => {
+        if (isDestroyed) return;
+        try {
+          const controlsContainer = controls.getControlsContainer();
+          if (controlsContainer) {
+            const currentTimeLabels = controlsContainer.querySelectorAll(".shaka-current-time");
+            const elapsedSeconds = getElapsedTime();
+            const timeText = formatElapsedTime(elapsedSeconds);
+            currentTimeLabels.forEach((label) => {
+              if (label && label.textContent !== timeText) {
+                label.textContent = timeText;
+              }
+            });
+          }
+        } catch (error) {
+          console.warn("Error updating time display:", error);
+        }
+        animationFrameId = requestAnimationFrame(updateTimeDisplay);
+      };
+      updateTimeDisplay();
+      return () => {
+        isDestroyed = true;
+        if (animationFrameId) {
+          cancelAnimationFrame(animationFrameId);
+        }
+      };
+    };
+    const setupSeekbarTooltip = () => {
+      try {
+        const controlsContainer = controls.getControlsContainer();
+        if (!controlsContainer) return;
+        const seekBar = controlsContainer.querySelector(".shaka-seek-bar");
+        if (!seekBar) return;
+        const onSeekBarMouseMove = (event) => {
+          const rect = seekBar.getBoundingClientRect();
+          const pos = (event.clientX - rect.left) / rect.width;
+          const totalElapsedSeconds = getElapsedTime();
+          const seekableRange = video.seekable;
+          if (seekableRange.length > 0) {
+            const seekableDuration = seekableRange.end(0) - seekableRange.start(0);
+            const positionInStream = totalElapsedSeconds - seekableDuration * (1 - pos);
+            const timeAtPosition = Math.max(0, positionInStream);
+            seekBar.title = formatElapsedTime(timeAtPosition);
+          } else {
+            seekBar.title = formatElapsedTime(totalElapsedSeconds);
+          }
+        };
+        seekBar.addEventListener("mousemove", onSeekBarMouseMove);
+        return () => {
+          seekBar.removeEventListener("mousemove", onSeekBarMouseMove);
+        };
+      } catch (error) {
+        console.warn("Error setting up seekbar tooltip:", error);
+        return () => {
+        };
+      }
+    };
+    const setupWithDelay = () => {
+      setTimeout(() => {
+        setupTimeDisplayOverride();
+        const cleanupSeekbar = setupSeekbarTooltip();
+        setupWithDelay.cleanupSeekbar = cleanupSeekbar;
+      }, 100);
+    };
+    setupWithDelay();
+    return () => {
+      if (timeDisplayElement && originalGetDisplayTime) {
+        try {
+          timeDisplayElement.getDisplayTime = originalGetDisplayTime;
+        } catch (error) {
+          console.warn("Error restoring original getDisplayTime:", error);
+        }
+      }
+      if (setupWithDelay.cleanupSeekbar) {
+        setupWithDelay.cleanupSeekbar();
+      }
+    };
+  }, [player, controls, effectiveStreamStart]);
+  return {
+    detectedStreamStart,
+    effectiveStreamStart,
+    isUsingManualDate: !!manualStreamStartDate
+  };
+}
+
+// src/components/Loading.tsx
+import { twMerge } from "tailwind-merge";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Loading = ({ className }) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: twMerge(
+      "relative bg-[#151515] md:rounded-2xl! overflow-hidden aspect-video text-white w-full h-full flex justify-center items-center text-[10px]",
+      className
+    ),
+    role: "status",
+    children: [
+      /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-white" }),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading..." })
+    ]
+  }
+);
+
+// src/components/ErrorScreen.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ErrorScreen = ({ title, description }) => /* @__PURE__ */ jsx2("div", { className: "w-full h-full md:rounded-2xl! aspect-video bg-black", children: /* @__PURE__ */ jsxs2("div", { className: "bg-[#151515] text-white w-full h-full flex justify-stretch items-center", children: [
+  /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      className: "w-24 h-24 m-6",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      style: { width: 96 },
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx2(
+        "path",
+        {
+          d: "M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  ),
+  /* @__PURE__ */ jsxs2("div", { children: [
+    /* @__PURE__ */ jsx2("h3", { className: "text-2xl mb-2", children: title || "Playback Error" }),
+    /* @__PURE__ */ jsx2("div", { className: "text-lg", children: description || "Unable to play the video. Please try again later." })
+  ] })
+] }) });
+
+// src/components/Title.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Title = ({ title }) => /* @__PURE__ */ jsx3("div", { className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4", children: /* @__PURE__ */ jsx3("h2", { className: "text-white text-xl font-semibold", children: title }) });
+
+// src/components/LiveBadge.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var LiveBadge = ({
+  isVisible,
+  position = "top-right",
+  className = "",
+  style = {},
+  text = "LIVE"
+}) => {
+  if (!isVisible) return null;
+  const positionClasses = {
+    "top-left": "top-4 left-4",
+    "top-right": "top-4 right-4",
+    "bottom-left": "bottom-4 left-4",
+    "bottom-right": "bottom-4 right-4"
+  };
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: `
+        absolute z-50 
+        ${positionClasses[position]}
+        bg-red-600 text-white 
+        px-2 py-1 
+        rounded-md 
+        text-xs font-bold 
+        uppercase tracking-wide
+        shadow-lg
+        animate-pulse
+        pointer-events-none
+        ${className}
+      `,
+      style,
+      children: /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx4("span", { className: "w-2 h-2 bg-white rounded-full animate-pulse" }),
+        text
+      ] })
+    }
+  );
+};
+
+// src/styles.css
+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');
+
+// src/Player.tsx
+import { twMerge as twMerge2 } from "tailwind-merge";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var Player = forwardRef(
+  ({
+    src,
+    autoPlay = false,
+    loop = false,
+    muted = false,
+    controls = true,
+    poster,
+    width,
+    height,
+    aspectRatio = 16 / 9,
+    shakaConfig,
+    drmConfig,
+    muxConfig,
+    imaConfig,
+    chromecastConfig,
+    qualityConfig,
+    seekbarConfig,
+    events,
+    containerClassName,
+    streamStartDate,
+    ...props
+  }, ref) => {
+    const videoRef = useRef8(null);
+    const containerRef = useRef8(null);
+    const adContainerRef = useRef8(null);
+    useImperativeHandle(ref, () => videoRef.current, []);
+    const { playerRef, initializePlayer, destroyPlayer } = useShakePlayer({
+      src,
+      shakaConfig,
+      drmConfig,
+      onError: events?.onError,
+      onPlayerReady: events?.onPlayerReady
+    });
+    const {
+      getAvailableQualities,
+      setQuality,
+      setupQualityTracking,
+      configureQuality
+    } = useQualityControl(playerRef, qualityConfig, events?.onQualityChange);
+    const {
+      skipBack,
+      skipForward,
+      skipDuration,
+      shouldShowSkipControls
+    } = useSkipControls(videoRef, events?.onSkipBack, events?.onSkipForward);
+    const {
+      initializeMux,
+      updateMuxData,
+      handleMuxError,
+      destroyMux
+    } = useMuxAnalytics(playerRef, muxConfig, events?.onMuxReady, events?.onMuxDataUpdate);
+    const { setupEventListeners, cleanupEventListeners } = useEventHandlers(videoRef, {
+      onPlay: events?.onPlay,
+      onPause: events?.onPause,
+      onEnded: events?.onEnded,
+      onLoadStart: events?.onLoadStart,
+      onCanPlay: events?.onCanPlay
+    });
+    const { uiRef, initializeUI, destroyUI } = useShakaUI(
+      playerRef,
+      containerRef,
+      videoRef,
+      controls,
+      chromecastConfig,
+      seekbarConfig,
+      events?.onSkipBack,
+      events?.onSkipForward
+    );
+    const { isLive, isVisible: isLiveBadgeVisible } = useLiveBadge(playerRef, {
+      enabled: true,
+      onLiveStateChange: (isLive2) => {
+        events?.onLiveStateChange?.(isLive2);
+      }
+    });
+    useLiveIndicator(containerRef, {
+      enabled: true,
+      indicatorColor: "#ff0000",
+      indicatorSize: 8,
+      showPulseAnimation: true
+    });
+    const { detectedStreamStart, effectiveStreamStart } = useShakaAbsoluteTime({
+      player: playerRef.current,
+      controls: uiRef.current,
+      manualStreamStartDate: streamStartDate
+    });
+    const initializeAds = () => {
+      if (!imaConfig || !playerRef.current || !videoRef.current) return;
+      const adManager = playerRef.current.getAdManager();
+      if (!adManager) return;
+      adManager.addEventListener(shaka2.ads?.Utils?.AD_STARTED, () => {
+        events?.onAdStart?.();
+      });
+      adManager.addEventListener(shaka2.ads?.Utils?.AD_COMPLETE, () => {
+        events?.onAdComplete?.();
+      });
+      adManager.addEventListener(shaka2.ads?.Utils?.AD_ERROR, (event) => {
+        events?.onAdError?.(event.detail);
+      });
+      if (imaConfig.adTagUrl) {
+        const adContainer = adContainerRef.current;
+        if (adContainer) {
+          adManager.initClientSide(adContainer, videoRef.current, imaConfig.adsRenderingSettings);
+          const adsRequest = {
+            adTagUrl: imaConfig.adTagUrl,
+            linearAdSlotWidth: imaConfig.linearAdSlotWidth || width || 640,
+            linearAdSlotHeight: imaConfig.linearAdSlotHeight || height || 360,
+            nonLinearAdSlotWidth: imaConfig.nonLinearAdSlotWidth || width || 640,
+            nonLinearAdSlotHeight: imaConfig.nonLinearAdSlotHeight || 150
+          };
+          adManager.requestClientSideAds(adsRequest);
+        }
+      }
+    };
+    const initializeChromecast = () => {
+      if (!chromecastConfig?.enabled) {
+        return;
+      }
+      try {
+        if (events?.onCastStateChange) {
+          setTimeout(() => events.onCastStateChange(false), 100);
+        }
+      } catch (error) {
+        console.warn("Chromecast initialization failed:", error);
+      }
+    };
+    useEffect5(() => {
+      const video = videoRef.current;
+      if (!video) return;
+      const initialize = async () => {
+        try {
+          await initializePlayer(video);
+          setupEventListeners();
+          const cleanupQuality = setupQualityTracking();
+          configureQuality();
+          await initializeUI();
+          initializeMux();
+          initializeAds();
+          initializeChromecast();
+        } catch (error) {
+          console.error("Error during player initialization:", error);
+          handleMuxError(error);
+        }
+      };
+      initialize();
+      return () => {
+        cleanupEventListeners();
+        destroyUI();
+        destroyMux();
+        destroyPlayer();
+      };
+    }, [
+      src,
+      initializePlayer,
+      setupEventListeners,
+      setupQualityTracking,
+      configureQuality,
+      initializeUI,
+      initializeMux,
+      cleanupEventListeners,
+      destroyUI,
+      destroyMux,
+      destroyPlayer,
+      handleMuxError,
+      playerRef
+    ]);
+    useEffect5(() => {
+      const video = videoRef.current;
+      if (!video) return;
+      video.autoplay = autoPlay;
+      video.loop = loop;
+      video.muted = muted;
+      video.controls = false;
+      if (poster) video.poster = poster;
+    }, [autoPlay, loop, muted, poster]);
+    useImperativeHandle(ref, () => ({
+      ...videoRef.current,
+      // Custom methods for quality control
+      getAvailableQualities,
+      setQuality,
+      // Skip methods
+      skipBack,
+      skipForward,
+      // Mux methods
+      updateMuxData,
+      // Access to underlying instances
+      getPlayer: () => playerRef.current,
+      getMuxMonitor: () => null
+    }), [getAvailableQualities, setQuality, skipBack, skipForward, updateMuxData]);
+    const isResponsive = !width && !height;
+    const containerClasses = twMerge2(containerClassName, "motto-video-container");
+    const containerStyle = isResponsive ? {
+      aspectRatio: aspectRatio.toString()
+    } : { width, height };
+    const videoClasses = isResponsive ? "motto-video-responsive" : "w-full h-full ";
+    const videoStyle = isResponsive ? {} : { width, height };
+    return /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        ref: containerRef,
+        className: containerClasses,
+        style: containerStyle,
+        "data-shaka-player-container": true,
+        "data-shaka-player-cast-receiver-id": chromecastConfig?.receiverApplicationId,
+        children: [
+          /* @__PURE__ */ jsx5(
+            "video",
+            {
+              ref: videoRef,
+              className: videoClasses,
+              width: isResponsive ? void 0 : width,
+              height: isResponsive ? void 0 : height,
+              style: videoStyle,
+              controls: false,
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx5(LiveBadge, { isVisible: isLiveBadgeVisible }),
+          imaConfig && /* @__PURE__ */ jsx5(
+            "div",
+            {
+              ref: adContainerRef,
+              className: "absolute top-0 left-0 w-full h-full pointer-events-auto"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Player.displayName = "Player";
+
+// src/Video.tsx
+import { useEffect as useEffect7 } from "react";
+import { twMerge as twMerge3 } from "tailwind-merge";
+import { useQuery } from "@tanstack/react-query";
+
+// src/api/video.ts
+var fetchVideoData = async (videoId, publicKey, mottoToken) => {
+  const endpoint = "https://cda.mottostreaming.com/motto.cda.streaming.video.v1.VideoService/GetVideo";
+  const url = new URL(endpoint);
+  url.searchParams.set("encoding", "json");
+  url.searchParams.set("message", JSON.stringify({ videoId }));
+  const response = await fetch(url, {
+    method: "GET",
+    headers: {
+      Authorization: `Bearer ${publicKey}`,
+      ...Boolean(mottoToken) && { "x-motto-token": mottoToken }
+    }
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to fetch video: ${response.statusText}`);
+  }
+  const data = await response.json();
+  return data.video;
+};
+async function fetchVideosList(publicKey, videoIds, mottoToken, skip = 0, limit = 0) {
+  if (!videoIds || videoIds.length === 0) {
+    return [];
+  }
+  const endpoint = "https://cda.mottostreaming.com/motto.cda.streaming.video.v1.VideoService/BatchGetVideos";
+  const url = new URL(endpoint);
+  url.searchParams.set("encoding", "json");
+  url.searchParams.set("message", JSON.stringify({ videoIds }));
+  const response = await fetch(url.toString(), {
+    method: "GET",
+    headers: {
+      Authorization: `Bearer ${publicKey}`,
+      ...Boolean(mottoToken) && { "x-motto-token": mottoToken }
+    }
+  }).catch((err) => {
+    throw new Error(`Failed to fetch videos: ${err}`);
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to fetch videos list: ${response.status}`);
+  }
+  const data = await response.json();
+  return data.videos;
+}
+
+// src/api/event.ts
+async function fetchEventData(publicKey, eventId, unused, filter, order, locale) {
+  const endpoint = "https://cda.mottostreaming.com/motto.cda.cms.event.v1.EventService/GetEvent";
+  const url = new URL(endpoint);
+  const message = { eventId };
+  if (locale?.length) message.locale = locale;
+  if (filter) message.filter = filter;
+  if (order) message.order = order;
+  url.searchParams.set("encoding", "json");
+  url.searchParams.set("message", JSON.stringify(message));
+  const response = await fetch(url.toString(), {
+    method: "GET",
+    headers: {
+      Authorization: `Bearer ${publicKey}`
+    }
+  }).catch((err) => {
+    throw new Error(`Failed to fetch event: ${err}`);
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to fetch event data: ${response.status}`);
+  }
+  const data = await response.json();
+  return data.event;
+}
+
+// src/api/creative-work.ts
+async function fetchCreativeWorkData(publicKey, creativeWorkId, unused, filter, order, locale) {
+  const endpoint = "https://cda.mottostreaming.com/motto.cda.cms.creative_work.v1.CreativeWorkService/GetCreativeWork";
+  const url = new URL(endpoint);
+  const message = { creativeWorkId };
+  if (locale?.length) message.locale = locale;
+  if (filter) message.filter = filter;
+  if (order) message.order = order;
+  url.searchParams.set("encoding", "json");
+  url.searchParams.set("message", JSON.stringify(message));
+  const response = await fetch(url.toString(), {
+    method: "GET",
+    headers: {
+      Authorization: `Bearer ${publicKey}`
+    }
+  }).catch((err) => {
+    throw new Error(`Failed to fetch creative work: ${err}`);
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to fetch creative work data: ${response.status}`);
+  }
+  const data = await response.json();
+  return data.creativeWork;
+}
+
+// src/helper.ts
+var defaultError = {
+  title: "Playback Error",
+  description: "Unable to play the video. Please try again later."
+};
+var errorTypes = {
+  api: {
+    title: "Failed to Retrieve Video Info",
+    description: "Error fetching video details. Check your videoId and internet connection and try again."
+  },
+  ERROR_CODE_NOT_AUTHENTICATED: {
+    title: "Authorisation",
+    description: "You don't have permission to play this video. "
+  },
+  ERROR_CODE_GEO_BLOCKED: {
+    title: "Geoblocking Restriction",
+    description: "Sorry, this video is not available in your region due to geoblocking restrictions."
+  },
+  ERROR_CODE_NOT_ENTITLED: {
+    title: "Not entitled",
+    description: "Sorry, you are not entitled to play this video."
+  },
+  ERROR_CODE_VPN_BLOCKED: {
+    title: "VPN BLOCKED",
+    description: "This video is not available due to the use of a VPN."
+  },
+  ERROR_CODE_UNSPECIFIED: defaultError,
+  ERROR_CODE_SIGNATURE_MISMATCH: defaultError,
+  ERROR_CODE_INVALID_DOMAIN: defaultError,
+  default: defaultError
+};
+var findHLSPlaylist = (video) => {
+  return video?.playlists?.find((playlist) => {
+    return playlist.format === "HLS" || playlist.format === "hls" || playlist.format === "PLAYLIST_FORMAT_HLS";
+  });
+};
+var getErrorType = (error, video) => {
+  if (video?.error && errorTypes[video.error]) {
+    return video.error;
+  }
+  return "DEFAULT_ERROR";
+};
+
+// src/messages/useMessages.tsx
+import { useState as useState4, useEffect as useEffect6 } from "react";
+
+// src/messages/en.json
+var en_default = {
+  DAYS: "days",
+  HOURS: "hours",
+  MINUTES: "min",
+  SECONDS: "sec",
+  STARTING_SOON: "Starting soon...",
+  EVENT_NOT_STARTED: "This event has not started...",
+  DEFAULT_ERROR: "Playback Error",
+  DEFAULT_ERROR_DESCRIPTION: "Unable to play the video. Please try again later.",
+  API_ERROR: "Failed to Retrieve Video Info",
+  API_ERROR_DESCRIPTION: "Error fetching video details. Check your videoId and internet connection and try again.",
+  ERROR_CODE_NOT_AUTHENTICATED: "Authorisation",
+  ERROR_CODE_NOT_AUTHENTICATED_DESCRIPTION: "You don't have permission to play this video.",
+  ERROR_CODE_GEO_BLOCKED: "Geoblocking Restriction",
+  ERROR_CODE_GEO_BLOCKED_DESCRIPTION: "Sorry, this video is not available in your region due to geoblocking restrictions.",
+  ERROR_CODE_NOT_ENTITLED: "Not entitled",
+  ERROR_CODE_NOT_ENTITLED_DESCRIPTION: "Sorry, you are not entitled to play this video.",
+  ERROR_CODE_VPN_BLOCKED: "VPN BLOCKED",
+  ERROR_CODE_VPN_BLOCKED_DESCRIPTION: "This video is not available due to the use of a VPN."
+};
+
+// src/messages/es.json
+var es_default = {
+  DAYS: "d\xEDas",
+  HOURS: "horas",
+  MINUTES: "min",
+  SECONDS: "seg",
+  STARTING_SOON: "En instantes...",
+  EVENT_NOT_STARTED: "Este evento a\xFAn no ha comenzado...",
+  DEFAULT_ERROR: "Error de reproducci\xF3n",
+  DEFAULT_ERROR_DESCRIPTION: "No se puede reproducir el video. Por favor, int\xE9ntelo de nuevo m\xE1s tarde.",
+  API_ERROR: "Error al recuperar informaci\xF3n del video",
+  API_ERROR_DESCRIPTION: "Error al obtener detalles del video. Verifique su videoId y conexi\xF3n a internet e int\xE9ntelo de nuevo.",
+  ERROR_CODE_NOT_AUTHENTICATED: "Autorizaci\xF3n",
+  ERROR_CODE_NOT_AUTHENTICATED_DESCRIPTION: "No tienes permiso para reproducir este video.",
+  ERROR_CODE_GEO_BLOCKED: "Restricci\xF3n geogr\xE1fica",
+  ERROR_CODE_GEO_BLOCKED_DESCRIPTION: "Lo siento, este video no est\xE1 disponible en tu regi\xF3n debido a restricciones geogr\xE1ficas.",
+  ERROR_CODE_NOT_ENTITLED: "No autorizado",
+  ERROR_CODE_NOT_ENTITLED_DESCRIPTION: "Lo siento, no est\xE1s autorizado para reproducir este video.",
+  ERROR_CODE_VPN_BLOCKED: "VPN BLOQUEADO",
+  ERROR_CODE_VPN_BLOCKED_DESCRIPTION: "Este video no est\xE1 disponible debido al uso de una VPN."
+};
+
+// src/messages/ar.json
+var ar_default = {
+  DAYS: "\u0623\u064A\u0627\u0645",
+  HOURS: "\u0633\u0627\u0639\u0627\u062A",
+  MINUTES: "\u062F\u0642\u0627\u0626\u0642",
+  SECONDS: "\u062B\u0648\u0627\u0646\u064A",
+  STARTING_SOON: "\u064A\u0628\u062F\u0623 \u0642\u0631\u064A\u0628\u0627...",
+  EVENT_NOT_STARTED: "\u0647\u0630\u0627 \u0627\u0644\u062D\u062F\u062B \u0644\u0645 \u064A\u0628\u062F\u0623 \u0628\u0639\u062F...",
+  DEFAULT_ERROR: "\u062E\u0637\u0623 \u0641\u064A \u0627\u0644\u062A\u0634\u063A\u064A\u0644",
+  DEFAULT_ERROR_DESCRIPTION: "\u063A\u064A\u0631 \u0642\u0627\u062F\u0631 \u0639\u0644\u0649 \u062A\u0634\u063A\u064A\u0644 \u0627\u0644\u0641\u064A\u062F\u064A\u0648. \u064A\u0631\u062C\u0649 \u0627\u0644\u0645\u062D\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062E\u0631\u0649 \u0644\u0627\u062D\u0642\u064B\u0627.",
+  API_ERROR: "\u0641\u0634\u0644 \u0641\u064A \u0627\u0633\u062A\u0631\u062C\u0627\u0639 \u0645\u0639\u0644\u0648\u0645\u0627\u062A \u0627\u0644\u0641\u064A\u062F\u064A\u0648",
+  API_ERROR_DESCRIPTION: "\u062E\u0637\u0623 \u0641\u064A \u062C\u0644\u0628 \u062A\u0641\u0627\u0635\u064A\u0644 \u0627\u0644\u0641\u064A\u062F\u064A\u0648. \u062A\u062D\u0642\u0642 \u0645\u0646 \u0645\u0639\u0631\u0641 \u0627\u0644\u0641\u064A\u062F\u064A\u0648 \u0648\u0627\u062A\u0635\u0627\u0644 \u0627\u0644\u0625\u0646\u062A\u0631\u0646\u062A \u0648\u062D\u0627\u0648\u0644 \u0645\u0631\u0629 \u0623\u062E\u0631\u0649.",
+  ERROR_CODE_NOT_AUTHENTICATED: "\u062A\u0641\u0648\u064A\u0636",
+  ERROR_CODE_NOT_AUTHENTICATED_DESCRIPTION: "\u0644\u064A\u0633 \u0644\u062F\u064A\u0643 \u0625\u0630\u0646 \u0644\u062A\u0634\u063A\u064A\u0644 \u0647\u0630\u0627 \u0627\u0644\u0641\u064A\u062F\u064A\u0648.",
+  ERROR_CODE_GEO_BLOCKED: "\u0642\u064A\u0648\u062F \u0627\u0644\u062C\u063A\u0631\u0627\u0641\u064A\u0627",
+  ERROR_CODE_GEO_BLOCKED_DESCRIPTION: "\u0639\u0630\u0631\u064B\u0627\u060C \u0647\u0630\u0627 \u0627\u0644\u0641\u064A\u062F\u064A\u0648 \u063A\u064A\u0631 \u0645\u062A\u0627\u062D \u0641\u064A \u0645\u0646\u0637\u0642\u062A\u0643 \u0628\u0633\u0628\u0628 \u0642\u064A\u0648\u062F \u0627\u0644\u062C\u063A\u0631\u0627\u0641\u064A\u0627.",
+  ERROR_CODE_NOT_ENTITLED: "\u063A\u064A\u0631 \u0645\u062E\u0648\u0644",
+  ERROR_CODE_NOT_ENTITLED_DESCRIPTION: "\u0639\u0630\u0631\u064B\u0627\u060C \u0644\u064A\u0633 \u0644\u062F\u064A\u0643 \u0627\u0644\u062D\u0642 \u0641\u064A \u062A\u0634\u063A\u064A\u0644 \u0647\u0630\u0627 \u0627\u0644\u0641\u064A\u062F\u064A\u0648.",
+  ERROR_CODE_VPN_BLOCKED: "\u062A\u0645 \u062D\u0638\u0631 VPN",
+  ERROR_CODE_VPN_BLOCKED_DESCRIPTION: "\u0647\u0630\u0627 \u0627\u0644\u0641\u064A\u062F\u064A\u0648 \u063A\u064A\u0631 \u0645\u062A\u0627\u062D \u0628\u0633\u0628\u0628 \u0627\u0633\u062A\u062E\u062F\u0627\u0645 VPN."
+};
+
+// src/messages/de.json
+var de_default = {
+  DAYS: "Tage",
+  HOURS: "Stunden",
+  MINUTES: "Min",
+  SECONDS: "Sek",
+  STARTING_SOON: "Beginnt bald...",
+  DEFAULT_ERROR: "Wiedergabefehler",
+  DEFAULT_ERROR_DESCRIPTION: "Das Video kann nicht abgespielt werden. Bitte versuchen Sie es sp\xE4ter erneut.",
+  API_ERROR: "Fehler beim Abrufen der Videoinformationen",
+  API_ERROR_DESCRIPTION: "Fehler beim Abrufen der Videodetails. \xDCberpr\xFCfen Sie Ihre videoId und Internetverbindung und versuchen Sie es erneut.",
+  ERROR_CODE_NOT_AUTHENTICATED: "Autorisierung",
+  ERROR_CODE_NOT_AUTHENTICATED_DESCRIPTION: "Sie haben keine Berechtigung, dieses Video abzuspielen.",
+  ERROR_CODE_GEO_BLOCKED: "Geoblocking-Beschr\xE4nkung",
+  ERROR_CODE_GEO_BLOCKED_DESCRIPTION: "Entschuldigung, dieses Video ist in Ihrer Region aufgrund von Geoblocking-Beschr\xE4nkungen nicht verf\xFCgbar.",
+  ERROR_CODE_NOT_ENTITLED: "Nicht berechtigt",
+  ERROR_CODE_NOT_ENTITLED_DESCRIPTION: "Entschuldigung, Sie sind nicht berechtigt, dieses Video abzuspielen.",
+  ERROR_CODE_VPN_BLOCKED: "VPN BLOCKIERT",
+  ERROR_CODE_VPN_BLOCKED_DESCRIPTION: "Dieses Video ist aufgrund der Verwendung eines VPN nicht verf\xFCgbar."
+};
+
+// src/messages/fr.json
+var fr_default = {
+  DAYS: "jours",
+  HOURS: "heures",
+  MINUTES: "minutes",
+  SECONDS: "secondes",
+  STARTING_SOON: "Commence bient\xF4t...",
+  EVENT_NOT_STARTED: "Cet \xE9v\xE9nement n'a pas commenc\xE9...",
+  DEFAULT_ERROR: "Erreur de lecture",
+  DEFAULT_ERROR_DESCRIPTION: "Impossible de lire la vid\xE9o. Veuillez r\xE9essayer plus tard.",
+  API_ERROR: "\xC9chec de la r\xE9cup\xE9ration des informations vid\xE9o",
+  API_ERROR_DESCRIPTION: "Erreur lors de la r\xE9cup\xE9ration des d\xE9tails de la vid\xE9o. V\xE9rifiez votre videoId et votre connexion Internet, puis r\xE9essayez.",
+  ERROR_CODE_NOT_AUTHENTICATED: "Autorisation",
+  ERROR_CODE_NOT_AUTHENTICATED_DESCRIPTION: "Vous n'avez pas la permission de lire cette vid\xE9o.",
+  ERROR_CODE_GEO_BLOCKED: "Restriction de g\xE9oblocage",
+  ERROR_CODE_GEO_BLOCKED_DESCRIPTION: "D\xE9sol\xE9, cette vid\xE9o n'est pas disponible dans votre r\xE9gion en raison de restrictions de g\xE9oblocage.",
+  ERROR_CODE_NOT_ENTITLED: "Non autoris\xE9",
+  ERROR_CODE_NOT_ENTITLED_DESCRIPTION: "D\xE9sol\xE9, vous n'\xEAtes pas autoris\xE9 \xE0 lire cette vid\xE9o.",
+  ERROR_CODE_VPN_BLOCKED: "VPN BLOQU\xC9",
+  ERROR_CODE_VPN_BLOCKED_DESCRIPTION: "Cette vid\xE9o n'est pas disponible en raison de l'utilisation d'un VPN."
+};
+
+// src/messages/it.json
+var it_default = {
+  DAYS: "giorni",
+  HOURS: "ore",
+  MINUTES: "minuti",
+  SECONDS: "secondi",
+  STARTING_SOON: "Inizia presto...",
+  DEFAULT_ERROR: "Errore di riproduzione",
+  DEFAULT_ERROR_DESCRIPTION: "Impossibile riprodurre il video. Per favore riprova pi\xF9 tardi.",
+  API_ERROR: "Errore nel recupero delle informazioni video",
+  API_ERROR_DESCRIPTION: "Errore nel recupero dei dettagli del video. Controlla il tuo videoId e la connessione internet e riprova.",
+  ERROR_CODE_NOT_AUTHENTICATED: "Autorizzazione",
+  ERROR_CODE_NOT_AUTHENTICATED_DESCRIPTION: "Non hai il permesso di riprodurre questo video.",
+  ERROR_CODE_GEO_BLOCKED: "Restrizione geoblocking",
+  ERROR_CODE_GEO_BLOCKED_DESCRIPTION: "Spiacenti, questo video non \xE8 disponibile nella tua regione a causa di restrizioni geografiche.",
+  ERROR_CODE_NOT_ENTITLED: "Non autorizzato",
+  ERROR_CODE_NOT_ENTITLED_DESCRIPTION: "Spiacenti, non sei autorizzato a riprodurre questo video.",
+  ERROR_CODE_VPN_BLOCKED: "VPN BLOCCATA",
+  ERROR_CODE_VPN_BLOCKED_DESCRIPTION: "Questo video non \xE8 disponibile a causa dell'uso di una VPN."
+};
+
+// src/messages/ja.json
+var ja_default = {
+  DAYS: "\u65E5",
+  HOURS: "\u6642\u9593",
+  MINUTES: "\u5206",
+  SECONDS: "\u79D2",
+  STARTING_SOON: "\u307E\u3082\u306A\u304F\u958B\u59CB...",
+  DEFAULT_ERROR: "\u518D\u751F\u30A8\u30E9\u30FC",
+  DEFAULT_ERROR_DESCRIPTION: "\u30D3\u30C7\u30AA\u3092\u518D\u751F\u3067\u304D\u307E\u305B\u3093\u3002\u5F8C\u3067\u3082\u3046\u4E00\u5EA6\u304A\u8A66\u3057\u304F\u3060\u3055\u3044\u3002",
+  API_ERROR: "\u30D3\u30C7\u30AA\u60C5\u5831\u306E\u53D6\u5F97\u306B\u5931\u6557\u3057\u307E\u3057\u305F",
+  API_ERROR_DESCRIPTION: "\u30D3\u30C7\u30AA\u306E\u8A73\u7D30\u3092\u53D6\u5F97\u4E2D\u306B\u30A8\u30E9\u30FC\u304C\u767A\u751F\u3057\u307E\u3057\u305F\u3002videoId\u3068\u30A4\u30F3\u30BF\u30FC\u30CD\u30C3\u30C8\u63A5\u7D9A\u3092\u78BA\u8A8D\u3057\u3066\u3001\u3082\u3046\u4E00\u5EA6\u304A\u8A66\u3057\u304F\u3060\u3055\u3044\u3002",
+  ERROR_CODE_NOT_AUTHENTICATED: "\u8A8D\u8A3C",
+  ERROR_CODE_NOT_AUTHENTICATED_DESCRIPTION: "\u3053\u306E\u30D3\u30C7\u30AA\u3092\u518D\u751F\u3059\u308B\u6A29\u9650\u304C\u3042\u308A\u307E\u305B\u3093\u3002",
+  ERROR_CODE_GEO_BLOCKED: "\u5730\u57DF\u5236\u9650",
+  ERROR_CODE_GEO_BLOCKED_DESCRIPTION: "\u7533\u3057\u8A33\u3042\u308A\u307E\u305B\u3093\u304C\u3001\u5730\u57DF\u5236\u9650\u306E\u305F\u3081\u3053\u306E\u30D3\u30C7\u30AA\u306F\u3054\u5229\u7528\u3044\u305F\u3060\u3051\u307E\u305B\u3093\u3002",
+  ERROR_CODE_NOT_ENTITLED: "\u6A29\u5229\u306A\u3057",
+  ERROR_CODE_NOT_ENTITLED_DESCRIPTION: "\u7533\u3057\u8A33\u3042\u308A\u307E\u305B\u3093\u304C\u3001\u3053\u306E\u30D3\u30C7\u30AA\u3092\u518D\u751F\u3059\u308B\u6A29\u5229\u304C\u3042\u308A\u307E\u305B\u3093\u3002",
+  ERROR_CODE_VPN_BLOCKED: "VPN\u30D6\u30ED\u30C3\u30AF",
+  ERROR_CODE_VPN_BLOCKED_DESCRIPTION: "VPN\u306E\u4F7F\u7528\u306B\u3088\u308A\u3001\u3053\u306E\u30D3\u30C7\u30AA\u306F\u3054\u5229\u7528\u3044\u305F\u3060\u3051\u307E\u305B\u3093\u3002"
+};
+
+// src/messages/ko.json
+var ko_default = {
+  DAYS: "\uC77C",
+  HOURS: "\uC2DC\uAC04",
+  MINUTES: "\uBD84",
+  SECONDS: "\uCD08",
+  STARTING_SOON: "\uACE7 \uC2DC\uC791...",
+  DEFAULT_ERROR: "\uC7AC\uC0DD \uC624\uB958",
+  DEFAULT_ERROR_DESCRIPTION: "\uBE44\uB514\uC624\uB97C \uC7AC\uC0DD\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4. \uB098\uC911\uC5D0 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694.",
+  API_ERROR: "\uBE44\uB514\uC624 \uC815\uBCF4 \uAC00\uC838\uC624\uAE30 \uC2E4\uD328",
+  API_ERROR_DESCRIPTION: "\uBE44\uB514\uC624 \uC138\uBD80 \uC815\uBCF4\uB97C \uAC00\uC838\uC624\uB294 \uC911 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4. videoId\uC640 \uC778\uD130\uB137 \uC5F0\uACB0\uC744 \uD655\uC778\uD558\uACE0 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694.",
+  ERROR_CODE_NOT_AUTHENTICATED: "\uC778\uC99D",
+  ERROR_CODE_NOT_AUTHENTICATED_DESCRIPTION: "\uC774 \uBE44\uB514\uC624\uB97C \uC7AC\uC0DD\uD560 \uAD8C\uD55C\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.",
+  ERROR_CODE_GEO_BLOCKED: "\uC9C0\uC5ED \uC81C\uD55C",
+  ERROR_CODE_GEO_BLOCKED_DESCRIPTION: "\uC8C4\uC1A1\uD569\uB2C8\uB2E4. \uC774 \uBE44\uB514\uC624\uB294 \uC9C0\uC5ED \uC81C\uD55C\uC73C\uB85C \uC778\uD574 \uADC0\uD558\uC758 \uC9C0\uC5ED\uC5D0\uC11C \uC0AC\uC6A9\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.",
+  ERROR_CODE_NOT_ENTITLED: "\uAD8C\uD55C \uC5C6\uC74C",
+  ERROR_CODE_NOT_ENTITLED_DESCRIPTION: "\uC8C4\uC1A1\uD569\uB2C8\uB2E4. \uC774 \uBE44\uB514\uC624\uB97C \uC7AC\uC0DD\uD560 \uAD8C\uD55C\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.",
+  ERROR_CODE_VPN_BLOCKED: "VPN \uCC28\uB2E8\uB428",
+  ERROR_CODE_VPN_BLOCKED_DESCRIPTION: "VPN \uC0AC\uC6A9\uC73C\uB85C \uC778\uD574 \uC774 \uBE44\uB514\uC624\uB97C \uC0AC\uC6A9\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4."
+};
+
+// src/messages/pt.json
+var pt_default = {
+  DAYS: "dias",
+  HOURS: "horas",
+  MINUTES: "minutos",
+  SECONDS: "segundos",
+  STARTING_SOON: "Come\xE7ando em breve...",
+  DEFAULT_ERROR: "Playback Error",
+  DEFAULT_ERROR_DESCRIPTION: "N\xE3o foi poss\xEDvel reproduzir o v\xEDdeo. Por favor, tente novamente mais tarde.",
+  API_ERROR: "Falha ao Recuperar Informa\xE7\xF5es do V\xEDdeo",
+  API_ERROR_DESCRIPTION: "Erro ao buscar detalhes do v\xEDdeo. Verifique seu videoId e conex\xE3o com a internet e tente novamente.",
+  ERROR_CODE_NOT_AUTHENTICATED: "Autoriza\xE7\xE3o",
+  ERROR_CODE_NOT_AUTHENTICATED_DESCRIPTION: "Voc\xEA n\xE3o tem permiss\xE3o para reproduzir este v\xEDdeo.",
+  ERROR_CODE_GEO_BLOCKED: "Restri\xE7\xE3o de Geoblocking",
+  ERROR_CODE_GEO_BLOCKED_DESCRIPTION: "Desculpe, este v\xEDdeo n\xE3o est\xE1 dispon\xEDvel em sua regi\xE3o devido a restri\xE7\xF5es de geoblocking.",
+  ERROR_CODE_NOT_ENTITLED: "N\xE3o autorizado",
+  ERROR_CODE_NOT_ENTITLED_DESCRIPTION: "Desculpe, voc\xEA n\xE3o est\xE1 autorizado a reproduzir este v\xEDdeo.",
+  ERROR_CODE_VPN_BLOCKED: "VPN BLOQUEADO",
+  ERROR_CODE_VPN_BLOCKED_DESCRIPTION: "Este v\xEDdeo n\xE3o est\xE1 dispon\xEDvel devido ao uso de uma VPN."
+};
+
+// src/messages/ru.json
+var ru_default = {
+  DAYS: "\u0434\u043D\u0435\u0439",
+  HOURS: "\u0447\u0430\u0441\u043E\u0432",
+  MINUTES: "\u043C\u0438\u043D",
+  SECONDS: "\u0441\u0435\u043A",
+  STARTING_SOON: "\u0421\u043A\u043E\u0440\u043E \u043D\u0430\u0447\u043D\u0435\u0442\u0441\u044F...",
+  DEFAULT_ERROR: "\u041E\u0448\u0438\u0431\u043A\u0430 \u0432\u043E\u0441\u043F\u0440\u043E\u0438\u0437\u0432\u0435\u0434\u0435\u043D\u0438\u044F",
+  DEFAULT_ERROR_DESCRIPTION: "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0432\u043E\u0441\u043F\u0440\u043E\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u0432\u0438\u0434\u0435\u043E. \u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u043F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u043F\u043E\u0437\u0436\u0435.",
+  API_ERROR: "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u043F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044E \u043E \u0432\u0438\u0434\u0435\u043E",
+  API_ERROR_DESCRIPTION: "\u041E\u0448\u0438\u0431\u043A\u0430 \u043F\u0440\u0438 \u043F\u043E\u043B\u0443\u0447\u0435\u043D\u0438\u0438 \u0434\u0435\u0442\u0430\u043B\u0435\u0439 \u0432\u0438\u0434\u0435\u043E. \u041F\u0440\u043E\u0432\u0435\u0440\u044C\u0442\u0435 \u0432\u0430\u0448 videoId \u0438 \u043F\u043E\u0434\u043A\u043B\u044E\u0447\u0435\u043D\u0438\u0435 \u043A \u0438\u043D\u0442\u0435\u0440\u043D\u0435\u0442\u0443, \u0437\u0430\u0442\u0435\u043C \u043F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u0441\u043D\u043E\u0432\u0430.",
+  ERROR_CODE_NOT_AUTHENTICATED: "\u0410\u0432\u0442\u043E\u0440\u0438\u0437\u0430\u0446\u0438\u044F",
+  ERROR_CODE_NOT_AUTHENTICATED_DESCRIPTION: "\u0423 \u0432\u0430\u0441 \u043D\u0435\u0442 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043D\u0438\u044F \u043D\u0430 \u0432\u043E\u0441\u043F\u0440\u043E\u0438\u0437\u0432\u0435\u0434\u0435\u043D\u0438\u0435 \u044D\u0442\u043E\u0433\u043E \u0432\u0438\u0434\u0435\u043E.",
+  ERROR_CODE_GEO_BLOCKED: "\u0413\u0435\u043E\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043A\u043E\u0435 \u043E\u0433\u0440\u0430\u043D\u0438\u0447\u0435\u043D\u0438\u0435",
+  ERROR_CODE_GEO_BLOCKED_DESCRIPTION: "\u0418\u0437\u0432\u0438\u043D\u0438\u0442\u0435, \u044D\u0442\u043E \u0432\u0438\u0434\u0435\u043E \u043D\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u043D\u043E \u0432 \u0432\u0430\u0448\u0435\u043C \u0440\u0435\u0433\u0438\u043E\u043D\u0435 \u0438\u0437-\u0437\u0430 \u0433\u0435\u043E\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043E\u0433\u0440\u0430\u043D\u0438\u0447\u0435\u043D\u0438\u0439.",
+  ERROR_CODE_NOT_ENTITLED: "\u041D\u0435\u0442 \u043F\u0440\u0430\u0432",
+  ERROR_CODE_NOT_ENTITLED_DESCRIPTION: "\u0418\u0437\u0432\u0438\u043D\u0438\u0442\u0435, \u0443 \u0432\u0430\u0441 \u043D\u0435\u0442 \u043F\u0440\u0430\u0432 \u043D\u0430 \u0432\u043E\u0441\u043F\u0440\u043E\u0438\u0437\u0432\u0435\u0434\u0435\u043D\u0438\u0435 \u044D\u0442\u043E\u0433\u043E \u0432\u0438\u0434\u0435\u043E.",
+  ERROR_CODE_VPN_BLOCKED: "VPN \u0437\u0430\u0431\u043B\u043E\u043A\u0438\u0440\u043E\u0432\u0430\u043D",
+  ERROR_CODE_VPN_BLOCKED_DESCRIPTION: "\u042D\u0442\u043E \u0432\u0438\u0434\u0435\u043E \u043D\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u043D\u043E \u0438\u0437-\u0437\u0430 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u044F VPN."
+};
+
+// src/messages/zh.json
+var zh_default = {
+  DAYS: "\u5929",
+  HOURS: "\u5C0F\u65F6",
+  MINUTES: "\u5206\u949F",
+  SECONDS: "\u79D2",
+  STARTING_SOON: "\u5373\u5C06\u5F00\u59CB...",
+  DEFAULT_ERROR: "\u64AD\u653E\u9519\u8BEF",
+  DEFAULT_ERROR_DESCRIPTION: "\u65E0\u6CD5\u64AD\u653E\u89C6\u9891\u3002\u8BF7\u7A0D\u540E\u518D\u8BD5\u3002",
+  API_ERROR: "\u83B7\u53D6\u89C6\u9891\u4FE1\u606F\u5931\u8D25",
+  API_ERROR_DESCRIPTION: "\u83B7\u53D6\u89C6\u9891\u8BE6\u60C5\u65F6\u51FA\u9519\u3002\u8BF7\u68C0\u67E5\u60A8\u7684\u89C6\u9891ID\u548C\u4E92\u8054\u7F51\u8FDE\u63A5\uFF0C\u7136\u540E\u91CD\u8BD5\u3002",
+  ERROR_CODE_NOT_AUTHENTICATED: "\u6388\u6743",
+  ERROR_CODE_NOT_AUTHENTICATED_DESCRIPTION: "\u60A8\u6CA1\u6709\u6743\u9650\u64AD\u653E\u6B64\u89C6\u9891\u3002",
+  ERROR_CODE_GEO_BLOCKED: "\u5730\u7406\u5C01\u9501\u9650\u5236",
+  ERROR_CODE_GEO_BLOCKED_DESCRIPTION: "\u62B1\u6B49\uFF0C\u7531\u4E8E\u5730\u7406\u5C01\u9501\u9650\u5236\uFF0C\u6B64\u89C6\u9891\u5728\u60A8\u7684\u5730\u533A\u4E0D\u53EF\u7528\u3002",
+  ERROR_CODE_NOT_ENTITLED: "\u65E0\u6743\u64AD\u653E",
+  ERROR_CODE_NOT_ENTITLED_DESCRIPTION: "\u62B1\u6B49\uFF0C\u60A8\u65E0\u6743\u64AD\u653E\u6B64\u89C6\u9891\u3002",
+  ERROR_CODE_VPN_BLOCKED: "VPN\u88AB\u5C01\u9501",
+  ERROR_CODE_VPN_BLOCKED_DESCRIPTION: "\u7531\u4E8E\u4F7F\u7528VPN\uFF0C\u6B64\u89C6\u9891\u4E0D\u53EF\u7528\u3002"
+};
+
+// src/messages/nl.json
+var nl_default = {
+  DAYS: "dagen",
+  HOURS: "uren",
+  MINUTES: "min",
+  SECONDS: "sec",
+  STARTING_SOON: "Begint binnenkort...",
+  EVENT_NOT_STARTED: "Dit evenement is nog niet begonnen...",
+  DEFAULT_ERROR: "Afspelfout",
+  DEFAULT_ERROR_DESCRIPTION: "Kan de video niet afspelen. Probeer het later opnieuw.",
+  API_ERROR: "Kan videogegevens niet ophalen",
+  API_ERROR_DESCRIPTION: "Fout bij het ophalen van videogegevens. Controleer uw video-ID en internetverbinding en probeer het opnieuw.",
+  ERROR_CODE_NOT_AUTHENTICATED: "Autorisatie",
+  ERROR_CODE_NOT_AUTHENTICATED_DESCRIPTION: "U heeft geen toestemming om deze video af te spelen.",
+  ERROR_CODE_GEO_BLOCKED: "Geoblocking Beperking",
+  ERROR_CODE_GEO_BLOCKED_DESCRIPTION: "Sorry, deze video is niet beschikbaar in uw regio vanwege geoblocking beperkingen.",
+  ERROR_CODE_NOT_ENTITLED: "Geen recht",
+  ERROR_CODE_NOT_ENTITLED_DESCRIPTION: "Sorry, u heeft geen recht om deze video af te spelen.",
+  ERROR_CODE_VPN_BLOCKED: "VPN GEBLOKKEERD",
+  ERROR_CODE_VPN_BLOCKED_DESCRIPTION: "Deze video is niet beschikbaar vanwege het gebruik van een VPN."
+};
+
+// src/messages/fa.json
+var fa_default = {
+  DAYS: "\u0631\u0648\u0632\u0647\u0627",
+  HOURS: "\u0633\u0627\u0639\u062A\u200C\u0647\u0627",
+  MINUTES: "\u062F\u0642\u06CC\u0642\u0647\u200C\u0647\u0627",
+  SECONDS: "\u062B\u0627\u0646\u06CC\u0647\u200C\u0647\u0627",
+  STARTING_SOON: "\u0628\u0647 \u0632\u0648\u062F\u06CC \u0634\u0631\u0648\u0639 \u0645\u06CC\u200C\u0634\u0648\u062F...",
+  EVENT_NOT_STARTED: "\u0627\u06CC\u0646 \u0631\u0648\u06CC\u062F\u0627\u062F \u0647\u0646\u0648\u0632 \u0634\u0631\u0648\u0639 \u0646\u0634\u062F\u0647 \u0627\u0633\u062A...",
+  DEFAULT_ERROR: "\u062E\u0637\u0627\u06CC \u067E\u062E\u0634",
+  DEFAULT_ERROR_DESCRIPTION: "\u0627\u0645\u06A9\u0627\u0646 \u067E\u062E\u0634 \u0648\u06CC\u062F\u06CC\u0648 \u0648\u062C\u0648\u062F \u0646\u062F\u0627\u0631\u062F. \u0644\u0637\u0641\u0627\u064B \u0628\u0639\u062F\u0627\u064B \u062F\u0648\u0628\u0627\u0631\u0647 \u062A\u0644\u0627\u0634 \u06A9\u0646\u06CC\u062F.",
+  API_ERROR: "\u062E\u0637\u0627 \u062F\u0631 \u0628\u0627\u0632\u06CC\u0627\u0628\u06CC \u0627\u0637\u0644\u0627\u0639\u0627\u062A \u0648\u06CC\u062F\u06CC\u0648",
+  API_ERROR_DESCRIPTION: "\u062E\u0637\u0627 \u062F\u0631 \u062F\u0631\u06CC\u0627\u0641\u062A \u062C\u0632\u0626\u06CC\u0627\u062A \u0648\u06CC\u062F\u06CC\u0648. \u0648\u06CC\u062F\u06CC\u0648Id \u0648 \u0627\u062A\u0635\u0627\u0644 \u0627\u06CC\u0646\u062A\u0631\u0646\u062A \u062E\u0648\u062F \u0631\u0627 \u0628\u0631\u0631\u0633\u06CC \u06A9\u0631\u062F\u0647 \u0648 \u062F\u0648\u0628\u0627\u0631\u0647 \u062A\u0644\u0627\u0634 \u06A9\u0646\u06CC\u062F.",
+  ERROR_CODE_NOT_AUTHENTICATED: "\u0645\u062C\u0648\u0632",
+  ERROR_CODE_NOT_AUTHENTICATED_DESCRIPTION: "\u0634\u0645\u0627 \u0627\u062C\u0627\u0632\u0647 \u067E\u062E\u0634 \u0627\u06CC\u0646 \u0648\u06CC\u062F\u06CC\u0648 \u0631\u0627 \u0646\u062F\u0627\u0631\u06CC\u062F.",
+  ERROR_CODE_GEO_BLOCKED: "\u0645\u062D\u062F\u0648\u062F\u06CC\u062A \u062C\u063A\u0631\u0627\u0641\u06CC\u0627\u06CC\u06CC",
+  ERROR_CODE_GEO_BLOCKED_DESCRIPTION: "\u0645\u062A\u0627\u0633\u0641\u06CC\u0645\u060C \u0627\u06CC\u0646 \u0648\u06CC\u062F\u06CC\u0648 \u0628\u0647 \u062F\u0644\u06CC\u0644 \u0645\u062D\u062F\u0648\u062F\u06CC\u062A\u200C\u0647\u0627\u06CC \u062C\u063A\u0631\u0627\u0641\u06CC\u0627\u06CC\u06CC \u062F\u0631 \u0645\u0646\u0637\u0642\u0647 \u0634\u0645\u0627 \u062F\u0631 \u062F\u0633\u062A\u0631\u0633 \u0646\u06CC\u0633\u062A.",
+  ERROR_CODE_NOT_ENTITLED: "\u0639\u062F\u0645 \u062F\u0633\u062A\u0631\u0633\u06CC",
+  ERROR_CODE_NOT_ENTITLED_DESCRIPTION: "\u0645\u062A\u0627\u0633\u0641\u06CC\u0645\u060C \u0634\u0645\u0627 \u0627\u062C\u0627\u0632\u0647 \u067E\u062E\u0634 \u0627\u06CC\u0646 \u0648\u06CC\u062F\u06CC\u0648 \u0631\u0627 \u0646\u062F\u0627\u0631\u06CC\u062F.",
+  ERROR_CODE_VPN_BLOCKED: "\u0645\u0633\u062F\u0648\u062F \u0634\u062F\u0646 VPN",
+  ERROR_CODE_VPN_BLOCKED_DESCRIPTION: "\u0627\u06CC\u0646 \u0648\u06CC\u062F\u06CC\u0648 \u0628\u0647 \u062F\u0644\u06CC\u0644 \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u0627\u0632 VPN \u062F\u0631 \u062F\u0633\u062A\u0631\u0633 \u0646\u06CC\u0633\u062A."
+};
+
+// src/messages/useMessages.tsx
+var availableLanguages = {
+  en: en_default,
+  es: es_default,
+  ar: ar_default,
+  de: de_default,
+  fr: fr_default,
+  it: it_default,
+  ja: ja_default,
+  ko: ko_default,
+  pt: pt_default,
+  ru: ru_default,
+  zh: zh_default,
+  nl: nl_default,
+  fa: fa_default
+};
+var getBrowserLanguage = () => {
+  const language = navigator.language.split("-")[0];
+  return availableLanguages[language] ? language : "en";
+};
+var useMessages = (locale) => {
+  const [language, setLanguage] = useState4("en");
+  const [translations, setTranslations] = useState4(availableLanguages.en);
+  useEffect6(() => {
+    const lang = !!availableLanguages?.[locale] ? locale : getBrowserLanguage();
+    ;
+    setLanguage(lang);
+    setTranslations(availableLanguages[lang]);
+  }, [locale]);
+  const t = (key) => {
+    if (translations[key]) {
+      return translations[key];
+    }
+    if (language !== "en" && availableLanguages.en[key]) {
+      return availableLanguages.en[key];
+    }
+    return "";
+  };
+  const changeLanguage = (lng) => {
+    if (availableLanguages[lng]) {
+      setLanguage(lng);
+      setTranslations(availableLanguages[lng]);
+    }
+  };
+  return { t, language, changeLanguage };
+};
+var useMessages_default = useMessages;
+
+// src/Video.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var Video = ({
+  videoId,
+  publicKey,
+  mottoToken,
+  videoData: providedVideoData,
+  refetchInterval = 0,
+  playerName,
+  locale = "en",
+  events,
+  children,
+  className,
+  queryOptions = {},
+  ...props
+}) => {
+  const {
+    data,
+    isLoading,
+    error,
+    refetch
+  } = useQuery({
+    queryKey: ["video", videoId, publicKey, mottoToken],
+    queryFn: () => fetchVideoData(videoId, publicKey, mottoToken),
+    enabled: !!videoId && !!publicKey && !providedVideoData,
+    refetchInterval: refetchInterval > 0 ? refetchInterval : false,
+    staleTime: queryOptions.staleTime ?? 5 * 60 * 1e3,
+    // 5 minutes
+    gcTime: queryOptions.cacheTime ?? 10 * 60 * 1e3,
+    // 10 minutes (was cacheTime in v4)
+    retry: queryOptions.retry ?? 3,
+    retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
+  });
+  const video = providedVideoData || data;
+  const { t } = useMessages_default(locale);
+  const activePlaylist = findHLSPlaylist(video);
+  const hlsUrl = activePlaylist?.url;
+  useEffect7(() => {
+    if (events?.onVideoData && video) {
+      events.onVideoData(video);
+    }
+  }, [video, events]);
+  if (isLoading || !providedVideoData && !video) {
+    return /* @__PURE__ */ jsx6("div", { className: twMerge3("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsx6("div", { className: "relative w-full h-full bg-[#151515]", children: /* @__PURE__ */ jsx6(Loading, {}) }) });
+  }
+  if (!isLoading && video && !hlsUrl && events?.onEmptyPlaylists) {
+    events.onEmptyPlaylists();
+  }
+  if (error || video?.error) {
+    const errorKey = video?.error ? getErrorType(void 0, video) : "API_ERROR";
+    const errorObj = error || new Error(video?.error || "Unknown error");
+    if (events?.onError) {
+      events.onError(errorObj);
+    }
+    const title = t(errorKey) || t("DEFAULT_ERROR");
+    const description = t(`${errorKey}_DESCRIPTION`) || t("DEFAULT_ERROR_DESCRIPTION");
+    return /* @__PURE__ */ jsx6("div", { className: twMerge3("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsxs5("div", { className: "relative w-full h-full", children: [
+      /* @__PURE__ */ jsx6(
+        ErrorScreen,
+        {
+          title,
+          description
+        }
+      ),
+      children
+    ] }) });
+  }
+  if (!hlsUrl) {
+    return /* @__PURE__ */ jsx6("div", { className: twMerge3("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsxs5("div", { className: "relative w-full h-full bg-[#151515]", children: [
+      /* @__PURE__ */ jsx6(Title, { title: video?.name || "" }),
+      children
+    ] }) });
+  }
+  console.log("hlsUrl", hlsUrl);
+  return /* @__PURE__ */ jsx6("div", { className: twMerge3("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsx6("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx6(
+    Player,
+    {
+      ...props,
+      src: hlsUrl,
+      className: twMerge3("video-player-container", className),
+      events,
+      containerClassName: "w-full h-full",
+      children
+    }
+  ) }) });
+};
+
+// src/Event.tsx
+import { useCallback as useCallback7, useEffect as useEffect8, useState as useState5 } from "react";
+import { twMerge as twMerge4 } from "tailwind-merge";
+import { useQuery as useQuery2 } from "@tanstack/react-query";
+import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var Event = ({
+  publicKey,
+  eventId,
+  events,
+  hideTitle,
+  locale = "en",
+  order,
+  filter,
+  className,
+  settings,
+  auth,
+  queryOptions = {},
+  ...props
+}) => {
+  const {
+    data: eventData,
+    isLoading: isEventLoading,
+    error: eventError
+  } = useQuery2({
+    queryKey: ["event", publicKey, eventId, filter, order, locale],
+    queryFn: () => fetchEventData(publicKey, eventId, void 0, filter, order, locale),
+    enabled: !!publicKey && !!eventId,
+    staleTime: queryOptions.staleTime ?? 5 * 60 * 1e3,
+    // 5 minutes
+    gcTime: queryOptions.cacheTime ?? 10 * 60 * 1e3,
+    // 10 minutes
+    retry: queryOptions.retry ?? 3,
+    retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
+  });
+  const [activePlaylist, setActivePlaylist] = useState5();
+  const [activeVideoId, setActiveVideoId] = useState5();
+  const videoIds = eventData?.videoIds ?? [];
+  const {
+    data: videosData,
+    isLoading: videosIsLoading,
+    error: videosError
+  } = useQuery2({
+    queryKey: ["videos-list", publicKey, videoIds, auth?.mottoToken],
+    queryFn: () => fetchVideosList(publicKey, videoIds, auth?.mottoToken, 0, 0),
+    enabled: !!publicKey && videoIds.length > 0,
+    refetchInterval: activePlaylist === null ? 3e4 : false,
+    staleTime: queryOptions.staleTime ?? 5 * 60 * 1e3,
+    gcTime: queryOptions.cacheTime ?? 10 * 60 * 1e3,
+    retry: queryOptions.retry ?? 3,
+    retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
+  });
+  const [loadingApisState, setLoadingApisState] = useState5(true);
+  useEffect8(() => {
+    if (videosData !== void 0) {
+      setLoadingApisState(false);
+      const videosWithPlaylists = videosData.filter(
+        (video) => video.playlists && video.playlists.length > 0
+      );
+      if (videosWithPlaylists.length > 0) {
+        let hlsPlaylistFound = false;
+        for (const video of videosWithPlaylists) {
+          const hlsPlaylist = findHLSPlaylist(video);
+          if (hlsPlaylist?.url) {
+            setActivePlaylist(hlsPlaylist.url);
+            setActiveVideoId(video.id);
+            hlsPlaylistFound = true;
+            break;
+          }
+        }
+        if (!hlsPlaylistFound) {
+          setActivePlaylist(null);
+          setActiveVideoId(null);
+        }
+      } else {
+        setActivePlaylist(null);
+        setActiveVideoId(null);
+      }
+    } else if (eventData && (!eventData.videoIds || eventData.videoIds.length === 0)) {
+      setLoadingApisState(false);
+      setActivePlaylist(null);
+      setActiveVideoId(null);
+    }
+  }, [videosData, eventData]);
+  const { t } = useMessages_default(locale);
+  useEffect8(() => {
+    if (events?.onEventData && eventData) {
+      events.onEventData(eventData);
+    }
+  }, [eventData, events]);
+  useEffect8(() => {
+    if (events?.onVideoData && activeVideoId && videosData) {
+      const activeVideo = videosData.find((video) => video.id === activeVideoId);
+      if (activeVideo) {
+        events.onVideoData(activeVideo);
+      }
+    }
+  }, [activeVideoId, videosData, events]);
+  const [error, setError] = useState5(null);
+  const [loadingPlaylist, setLoadingPlaylist] = useState5(true);
+  const videosDataError = videosData?.some((video) => !!video.error);
+  useEffect8(() => {
+    if (eventError || videosError || videosDataError) {
+      const errorObj = eventError || videosError || videosData?.find((video) => !!video.error)?.error && new Error(videosData?.find((video) => !!video.error)?.error) || new Error("default");
+      setError(errorObj);
+      if (events?.onError) {
+        events.onError(errorObj);
+      }
+    } else {
+      setError(null);
+    }
+  }, [eventError, videosError, videosDataError, videosData, events]);
+  useEffect8(() => {
+    const eventLoadedWithNoVideos = !isEventLoading && eventData && eventData.videoIds && (!eventData.videoIds || eventData?.videoIds?.length === 0) && !loadingApisState;
+    const allApisLoadedWithPotentialVideos = !isEventLoading && !videosIsLoading && eventData && !loadingApisState;
+    if (eventLoadedWithNoVideos || allApisLoadedWithPotentialVideos) {
+      setLoadingPlaylist(false);
+    }
+  }, [isEventLoading, videosIsLoading, eventData, loadingApisState]);
+  if (error) {
+    const title = t(error.message)?.length ? t(error.message) : t("DEFAULT_ERROR");
+    const description = t(`${error.message}_DESCRIPTION`)?.length ? t(`${error.message}_DESCRIPTION`) : t("DEFAULT_ERROR_DESCRIPTION");
+    return /* @__PURE__ */ jsx7("div", { className: twMerge4("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsx7("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx7(
+      ErrorScreen,
+      {
+        title,
+        description
+      }
+    ) }) });
+  }
+  if (!loadingPlaylist && eventData && !activePlaylist && events?.onEmptyPlaylists) {
+    events.onEmptyPlaylists();
+  }
+  if (loadingPlaylist) {
+    return /* @__PURE__ */ jsx7("div", { className: twMerge4("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsx7("div", { className: "relative w-full h-full bg-[#151515]", children: /* @__PURE__ */ jsx7(Loading, {}) }) });
+  }
+  if (activePlaylist && activeVideoId && videosData) {
+    const activeVideo = videosData.find((video) => video.id === activeVideoId);
+    return /* @__PURE__ */ jsx7("div", { className: twMerge4("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsxs6("div", { className: "relative w-full h-full", children: [
+      /* @__PURE__ */ jsx7(
+        Player,
+        {
+          ...props,
+          src: activePlaylist,
+          className: twMerge4(className, "peer"),
+          events,
+          containerClassName: "w-full h-full"
+        }
+      ),
+      !hideTitle && eventData && /* @__PURE__ */ jsx7(
+        TitleAndDescription,
+        {
+          title: eventData.title,
+          description: eventData.description || "",
+          startTime: eventData.startTime,
+          locale
+        }
+      )
+    ] }) });
+  }
+  if (eventData) {
+    return /* @__PURE__ */ jsx7("div", { className: twMerge4("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsx7("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx7(
+      PreEvent,
+      {
+        event: eventData,
+        hideTitle,
+        locale,
+        backgroundImageUrl: settings?.backgroundImageUrl,
+        showAnimation: settings?.showCountdownAnimation
+      }
+    ) }) });
+  }
+  return null;
+};
+function PreEvent({
+  event,
+  locale = "en",
+  hideTitle,
+  backgroundImageUrl,
+  showAnimation = true
+}) {
+  const date = new Date(event.startTime);
+  const now = /* @__PURE__ */ new Date();
+  const [remainingTime, setRemainingTime] = useState5(
+    date.getTime() - now.getTime()
+  );
+  const shouldBeStarted = remainingTime < 0;
+  const { t } = useMessages_default(locale);
+  useEffect8(() => {
+    const interval = setInterval(() => {
+      if (remainingTime < 0) {
+        clearInterval(interval);
+      } else {
+        setRemainingTime(date.getTime() - (/* @__PURE__ */ new Date()).getTime());
+      }
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [date, remainingTime]);
+  const renderCountdown = useCallback7(() => {
+    if (shouldBeStarted) {
+      return /* @__PURE__ */ jsx7("span", { className: "text-base-content text-xl", children: t("EVENT_NOT_STARTED") });
+    }
+    const seconds = Math.floor(remainingTime / 1e3) % 60;
+    const minutes = Math.floor(remainingTime / 1e3 / 60) % 60;
+    const hours = Math.floor(remainingTime / 1e3 / 60 / 60) % 24;
+    const days = Math.floor(remainingTime / 1e3 / 60 / 60 / 24);
+    return /* @__PURE__ */ jsxs6("div", { className: "grid grid-flow-col gap-5 text-center auto-cols-max", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ jsx7("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ jsx7(
+          "span",
+          {
+            style: { "--value": days },
+            "aria-live": "polite",
+            "aria-label": days.toString(),
+            children: days?.toString()?.padStart(2, "0")
+          }
+        ) }),
+        /* @__PURE__ */ jsx7("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("DAYS") })
+      ] }),
+      /* @__PURE__ */ jsxs6("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ jsx7("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ jsx7(
+          "span",
+          {
+            style: { "--value": hours },
+            "aria-live": "polite",
+            "aria-label": hours.toString(),
+            children: hours?.toString()?.padStart(2, "0")
+          }
+        ) }),
+        /* @__PURE__ */ jsx7("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("HOURS") })
+      ] }),
+      /* @__PURE__ */ jsxs6("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ jsx7("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ jsx7(
+          "span",
+          {
+            style: { "--value": minutes },
+            "aria-live": "polite",
+            "aria-label": minutes.toString(),
+            children: minutes?.toString()?.padStart(2, "0")
+          }
+        ) }),
+        /* @__PURE__ */ jsx7("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("MINUTES") })
+      ] }),
+      /* @__PURE__ */ jsxs6("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ jsx7("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ jsx7(
+          "span",
+          {
+            style: { "--value": seconds },
+            "aria-live": "polite",
+            "aria-label": seconds.toString(),
+            children: seconds?.toString()?.padStart(2, "0")
+          }
+        ) }),
+        /* @__PURE__ */ jsx7("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("SECONDS") })
+      ] })
+    ] });
+  }, [remainingTime, shouldBeStarted, t]);
+  return /* @__PURE__ */ jsx7(Fragment, { children: event?.posterUrl ? /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        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",
+        style: {
+          backgroundImage: `url(${event.posterUrl})`,
+          backgroundRepeat: "no-repeat",
+          backgroundSize: "cover"
+        },
+        children: [
+          /* @__PURE__ */ jsx7("div", { className: "absolute inset-0 bg-black bg-opacity-40" }),
+          /* @__PURE__ */ jsx7("div", { className: "relative z-10", children: renderCountdown() })
+        ]
+      }
+    ),
+    !hideTitle && /* @__PURE__ */ jsx7(
+      TitleAndDescription,
+      {
+        title: event.title,
+        description: event.description || "",
+        startTime: event.startTime,
+        locale
+      }
+    )
+  ] }) : /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        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",
+        style: {
+          backgroundImage: backgroundImageUrl ? `url(${backgroundImageUrl})` : ""
+        },
+        children: [
+          backgroundImageUrl && /* @__PURE__ */ jsx7("div", { className: "absolute inset-0 bg-black bg-opacity-40" }),
+          /* @__PURE__ */ jsx7("div", { className: "relative z-10", children: renderCountdown() })
+        ]
+      }
+    ),
+    !hideTitle && /* @__PURE__ */ jsx7(
+      TitleAndDescription,
+      {
+        title: event.title,
+        description: event.description || "",
+        startTime: event.startTime,
+        locale
+      }
+    )
+  ] }) });
+}
+var TitleAndDescription = ({
+  title,
+  description,
+  startTime,
+  locale = "en",
+  className
+}) => {
+  return /* @__PURE__ */ jsxs6("div", { className: twMerge4("mt-3 mb-6 m-event-details-ctn px-4 text-left w-full", className), children: [
+    /* @__PURE__ */ jsx7("div", { className: "text-base md:text-xl m-event-title text-base-content font-medium", children: title }),
+    startTime ? /* @__PURE__ */ jsxs6("div", { className: "text-sm md:text-base text-base-content/70 m-event-start-time", children: [
+      new Date(startTime || "").toLocaleDateString(locale || "default", {
+        month: "long",
+        year: "numeric",
+        day: "numeric"
+      }),
+      " ",
+      "- ",
+      new Date(startTime || "").toLocaleTimeString(locale || "default", {
+        hour: "2-digit",
+        minute: "2-digit"
+      })
+    ] }) : null,
+    description && /* @__PURE__ */ jsx7("div", { className: "text-xs md:text-sm text-base-content/60 uppercase", children: description })
+  ] });
+};
+
+// src/CreativeWork.tsx
+import { useEffect as useEffect9, useState as useState6 } from "react";
+import { twMerge as twMerge5 } from "tailwind-merge";
+import { useQuery as useQuery3 } from "@tanstack/react-query";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var CreativeWork = ({
+  publicKey,
+  creativeWorkId,
+  events,
+  hideTitle,
+  locale = "en",
+  order,
+  filter,
+  className,
+  settings,
+  auth,
+  queryOptions = {},
+  ...props
+}) => {
+  const {
+    data: creativeWorkData,
+    isLoading: isCreativeWorkLoading,
+    error: creativeWorkError
+  } = useQuery3({
+    queryKey: ["creative-work", publicKey, creativeWorkId, filter, order, locale],
+    queryFn: () => fetchCreativeWorkData(publicKey, creativeWorkId, void 0, filter, order, locale),
+    enabled: !!publicKey && !!creativeWorkId,
+    staleTime: queryOptions.staleTime ?? 5 * 60 * 1e3,
+    // 5 minutes
+    gcTime: queryOptions.cacheTime ?? 10 * 60 * 1e3,
+    // 10 minutes
+    retry: queryOptions.retry ?? 3,
+    retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
+  });
+  const [activePlaylist, setActivePlaylist] = useState6();
+  const [activeVideoId, setActiveVideoId] = useState6();
+  const [showCountDown, setShowCountDown] = useState6(false);
+  const videoIds = creativeWorkData?.videoIds ?? [];
+  const {
+    data: videosData,
+    isLoading: videosIsLoading,
+    error: videosError
+  } = useQuery3({
+    queryKey: ["videos-list", publicKey, videoIds, auth?.mottoToken],
+    queryFn: () => fetchVideosList(publicKey, videoIds, auth?.mottoToken, 0, 0),
+    enabled: !!publicKey && videoIds.length > 0,
+    refetchInterval: activePlaylist === null ? 3e4 : false,
+    staleTime: queryOptions.staleTime ?? 5 * 60 * 1e3,
+    gcTime: queryOptions.cacheTime ?? 10 * 60 * 1e3,
+    retry: queryOptions.retry ?? 3,
+    retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
+  });
+  const [loadingApisState, setLoadingApisState] = useState6(true);
+  useEffect9(() => {
+    if (videosData !== void 0) {
+      setLoadingApisState(false);
+      const videosWithPlaylists = videosData.filter(
+        (video) => video.playlists && video.playlists.length > 0
+      );
+      if (videosWithPlaylists.length > 0) {
+        let hlsPlaylistFound = false;
+        for (const video of videosWithPlaylists) {
+          const hlsPlaylist = findHLSPlaylist(video);
+          if (hlsPlaylist?.url) {
+            setActivePlaylist(hlsPlaylist.url);
+            setActiveVideoId(video.id);
+            hlsPlaylistFound = true;
+            break;
+          }
+        }
+        if (!hlsPlaylistFound) {
+          setActivePlaylist(null);
+          setActiveVideoId(null);
+        }
+      } else {
+        setActivePlaylist(null);
+        setActiveVideoId(null);
+      }
+    } else if (creativeWorkData && (!creativeWorkData.videoIds || creativeWorkData.videoIds.length === 0)) {
+      setLoadingApisState(false);
+      setActivePlaylist(null);
+      setActiveVideoId(null);
+    }
+  }, [videosData, creativeWorkData]);
+  const { t } = useMessages_default(locale);
+  useEffect9(() => {
+    if (events?.onCreativeWorkData && creativeWorkData) {
+      events.onCreativeWorkData(creativeWorkData);
+    }
+    if (creativeWorkData && !creativeWorkData?.videoIds?.length) {
+      setShowCountDown(true);
+    }
+  }, [creativeWorkData, events]);
+  useEffect9(() => {
+    if (events?.onVideoData && activeVideoId && videosData) {
+      const activeVideo = videosData.find((video) => video.id === activeVideoId);
+      if (activeVideo) {
+        events.onVideoData(activeVideo);
+      }
+    }
+  }, [activeVideoId, videosData, events]);
+  const [error, setError] = useState6(null);
+  const videosDataError = videosData?.some((video) => !!video.error);
+  useEffect9(() => {
+    if (creativeWorkError || videosError || videosDataError) {
+      const errorObj = creativeWorkError || videosError || videosData?.find((video) => !!video.error)?.error && new Error(videosData?.find((video) => !!video.error)?.error) || new Error("default");
+      setError(errorObj);
+      if (events?.onError) {
+        events.onError(errorObj);
+      }
+    } else {
+      setError(null);
+    }
+  }, [creativeWorkError, videosError, videosDataError, videosData, events]);
+  if (error) {
+    const title = t(error.message)?.length ? t(error.message) : t("DEFAULT_ERROR");
+    const description = t(`${error.message}_DESCRIPTION`)?.length ? t(`${error.message}_DESCRIPTION`) : t("DEFAULT_ERROR_DESCRIPTION");
+    return /* @__PURE__ */ jsx8("div", { className: twMerge5("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsx8("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx8(
+      ErrorScreen,
+      {
+        title,
+        description
+      }
+    ) }) });
+  }
+  const [loadingPlaylist, setLoadingPlaylist] = useState6(true);
+  useEffect9(() => {
+    const creativeWorkLoadedWithNoVideos = !isCreativeWorkLoading && creativeWorkData && creativeWorkData.videoIds && creativeWorkData.videoIds.length === 0;
+    const creativeWorkLoadedWithNoData = !isCreativeWorkLoading && creativeWorkData && !creativeWorkData.videoIds;
+    const isEventsFinished = !videosIsLoading && videosData && videosData.length > 0 && videosData.every((video) => video.playlists && video.playlists.length === 0);
+    if (creativeWorkLoadedWithNoVideos || creativeWorkLoadedWithNoData || isEventsFinished) {
+      setLoadingPlaylist(false);
+      if (events?.onEmptyPlaylists) {
+        events.onEmptyPlaylists();
+      }
+    } else if (activePlaylist) {
+      setLoadingPlaylist(false);
+    }
+  }, [
+    isCreativeWorkLoading,
+    creativeWorkData,
+    videosIsLoading,
+    videosData,
+    activePlaylist,
+    events
+  ]);
+  if (isCreativeWorkLoading || videosIsLoading || loadingApisState) {
+    return /* @__PURE__ */ jsx8("div", { className: twMerge5("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsx8("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx8(Loading, {}) }) });
+  }
+  if (showCountDown && creativeWorkData) {
+    return /* @__PURE__ */ jsx8("div", { className: twMerge5("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsx8("div", { className: "relative w-full h-full bg-base-200 text-base-content flex justify-center items-center flex-col", children: /* @__PURE__ */ jsx8(
+      PreCreativeWork,
+      {
+        creativeWork: creativeWorkData,
+        locale,
+        hideTitle,
+        backgroundImageUrl: settings?.backgroundImageUrl,
+        showAnimation: settings?.showCountdownAnimation
+      }
+    ) }) });
+  }
+  if (activeVideoId && activePlaylist && !loadingPlaylist) {
+    const activeVideo = videosData?.find((video) => video.id === activeVideoId);
+    return /* @__PURE__ */ jsx8("div", { className: twMerge5("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsxs7("div", { className: "relative w-full h-full", children: [
+      /* @__PURE__ */ jsx8(
+        Player,
+        {
+          ...props,
+          className: twMerge5(className, "peer"),
+          events: {
+            ...events
+          },
+          src: activePlaylist,
+          containerClassName: "w-full h-full"
+        }
+      ),
+      !hideTitle && /* @__PURE__ */ jsx8(
+        TitleAndDescription2,
+        {
+          title: creativeWorkData?.title || "",
+          description: creativeWorkData?.description || "",
+          releaseTime: creativeWorkData?.releaseTime || "",
+          locale,
+          className: "mt-3 mb-6 m-event-details-ctn px-4"
+        }
+      )
+    ] }) });
+  }
+  if (loadingPlaylist) {
+    return /* @__PURE__ */ jsx8(Loading, {});
+  }
+  return null;
+};
+function PreCreativeWork({
+  creativeWork,
+  locale = "en",
+  hideTitle,
+  backgroundImageUrl,
+  showAnimation = true
+}) {
+  const date = new Date(creativeWork.releaseTime);
+  const now = /* @__PURE__ */ new Date();
+  const [remainingTime, setRemainingTime] = useState6(
+    date.getTime() - now.getTime()
+  );
+  const shouldBeStarted = remainingTime < 0;
+  const { t } = useMessages_default(locale);
+  useEffect9(() => {
+    const interval = setInterval(() => {
+      if (remainingTime < 0) {
+        clearInterval(interval);
+      } else {
+        setRemainingTime(date.getTime() - (/* @__PURE__ */ new Date()).getTime());
+      }
+    }, 1e3);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [date, remainingTime]);
+  const renderCountdown = () => {
+    if (shouldBeStarted) {
+      return /* @__PURE__ */ jsx8("span", { className: "text-base-content text-xl", children: t("EVENT_NOT_STARTED") });
+    }
+    const seconds = Math.floor(remainingTime / 1e3) % 60;
+    const minutes = Math.floor(remainingTime / 1e3 / 60) % 60;
+    const hours = Math.floor(remainingTime / 1e3 / 60 / 60) % 24;
+    const days = Math.floor(remainingTime / 1e3 / 60 / 60 / 24);
+    return /* @__PURE__ */ jsxs7("div", { className: "grid grid-flow-col gap-5 text-center auto-cols-max", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ jsx8("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ jsx8(
+          "span",
+          {
+            style: { "--value": days },
+            "aria-live": "polite",
+            "aria-label": days.toString(),
+            children: days?.toString()?.padStart(2, "0")
+          }
+        ) }),
+        /* @__PURE__ */ jsx8("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("DAYS") })
+      ] }),
+      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ jsx8("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ jsx8(
+          "span",
+          {
+            style: { "--value": hours },
+            "aria-live": "polite",
+            "aria-label": hours.toString(),
+            children: hours?.toString()?.padStart(2, "0")
+          }
+        ) }),
+        /* @__PURE__ */ jsx8("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("HOURS") })
+      ] }),
+      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ jsx8("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ jsx8(
+          "span",
+          {
+            style: { "--value": minutes },
+            "aria-live": "polite",
+            "aria-label": minutes.toString(),
+            children: minutes?.toString()?.padStart(2, "0")
+          }
+        ) }),
+        /* @__PURE__ */ jsx8("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("MINUTES") })
+      ] }),
+      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col p-2 bg-neutral rounded-box text-neutral-content", children: [
+        /* @__PURE__ */ jsx8("span", { className: "countdown font-mono text-5xl", children: /* @__PURE__ */ jsx8(
+          "span",
+          {
+            style: { "--value": seconds },
+            "aria-live": "polite",
+            "aria-label": seconds.toString(),
+            children: seconds?.toString()?.padStart(2, "0")
+          }
+        ) }),
+        /* @__PURE__ */ jsx8("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("SECONDS") })
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        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",
+        style: {
+          backgroundImage: backgroundImageUrl ? `url(${backgroundImageUrl})` : ""
+        },
+        children: [
+          backgroundImageUrl && /* @__PURE__ */ jsx8("div", { className: "absolute inset-0 bg-black bg-opacity-40" }),
+          /* @__PURE__ */ jsx8("div", { className: "relative z-10", children: renderCountdown() })
+        ]
+      }
+    ),
+    !hideTitle && /* @__PURE__ */ jsx8(
+      TitleAndDescription2,
+      {
+        title: creativeWork.title,
+        description: creativeWork.description || "",
+        releaseTime: creativeWork.releaseTime,
+        locale
+      }
+    )
+  ] });
+}
+var TitleAndDescription2 = ({
+  title,
+  description,
+  releaseTime,
+  locale = "en",
+  className
+}) => {
+  return /* @__PURE__ */ jsxs7("div", { className: twMerge5("mt-3 mb-6 m-event-details-ctn px-4 text-left w-full", className), children: [
+    /* @__PURE__ */ jsx8("div", { className: "text-base md:text-xl m-event-title text-base-content font-medium", children: title }),
+    releaseTime ? /* @__PURE__ */ jsxs7("div", { className: "text-sm md:text-base text-base-content/70 m-event-start-time", children: [
+      new Date(releaseTime || "").toLocaleDateString(locale || "default", {
+        month: "long",
+        year: "numeric",
+        day: "numeric"
+      }),
+      " ",
+      "- ",
+      new Date(releaseTime || "").toLocaleTimeString(locale || "default", {
+        hour: "2-digit",
+        minute: "2-digit"
+      })
+    ] }) : null,
+    description && /* @__PURE__ */ jsx8("div", { className: "text-xs md:text-sm text-base-content/60 uppercase", children: description })
+  ] });
+};
+
+// src/QueryProvider.tsx
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 60 * 1e3,
+      // 5 minutes
+      gcTime: 10 * 60 * 1e3,
+      // 10 minutes
+      retry: 3,
+      refetchOnWindowFocus: false
+    }
+  }
+});
+var QueryProvider = ({ children }) => {
+  return /* @__PURE__ */ jsx9(QueryClientProvider, { client: queryClient, children });
+};
+export {
+  CreativeWork,
+  Event,
+  Player,
+  QueryProvider,
+  Video,
+  queryClient
+};
+//# sourceMappingURL=index.mjs.map