@mottosports/motto-video-player 1.0.1-rc.8 → 1.0.1-rc.80

package/dist/index.mjs

@@ -1,5 +1,8 @@
 "use client";
 
+// src/index.ts
+import "shaka-player/dist/controls.css";
+
 // #style-inject:#style-inject
 function styleInject(css, { insertAt } = {}) {
   if (!css || typeof document === "undefined") return;
@@ -22,73 +25,1031 @@ function styleInject(css, { insertAt } = {}) {
   }
 }
 
-// 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  .motto-mobile-skip-button {\n    display: flex !important;\n    visibility: visible !important;\n    opacity: 1 !important;\n  }\n}\n.shaka-seek-bar-container {\n  height: 6px !important;\n  width: 100% !important;\n  margin: 8px 0 !important;\n  border-radius: 4px !important;\n  position: relative !important;\n  border-top: none !important;\n  border-bottom: none !important;\n  box-shadow: none !important;\n}\n.shaka-seek-bar {\n  height: 6px !important;\n  width: 100% !important;\n  -webkit-appearance: none !important;\n  appearance: none !important;\n  background: transparent !important;\n  cursor: pointer !important;\n  border: none !important;\n  outline: none !important;\n  position: absolute !important;\n  top: 0 !important;\n  left: 0 !important;\n  border-radius: 4px !important;\n}\n.shaka-seek-bar::-webkit-slider-runnable-track {\n  height: 6px !important;\n  background: transparent !important;\n  border-radius: 4px !important;\n  border: none !important;\n}\n.shaka-seek-bar::-moz-range-track {\n  height: 6px !important;\n  background: transparent !important;\n  border-radius: 4px !important;\n  border: none !important;\n}\n.shaka-seek-bar::-webkit-slider-thumb {\n  -webkit-appearance: none !important;\n  appearance: none !important;\n  width: 16px !important;\n  height: 16px !important;\n  border-radius: 50% !important;\n  background: #ffffff !important;\n  cursor: pointer !important;\n  border: 2px solid #ffffff !important;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;\n  margin-top: -4px !important;\n}\n.shaka-seek-bar::-moz-range-thumb {\n  width: 16px !important;\n  height: 16px !important;\n  border-radius: 50% !important;\n  background: #ffffff !important;\n  cursor: pointer !important;\n  border: 2px solid #ffffff !important;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;\n  margin-top: -4px !important;\n}\n.motto-skip-back-button,\n.motto-skip-forward-button,\n.motto-native-skip-button {\n  background: transparent !important;\n  border: none !important;\n  padding: 4px !important;\n  margin: 0px !important;\n  cursor: pointer !important;\n  color: #ffffff !important;\n  transition: all 0.2s ease !important;\n  min-width: 32px !important;\n  height: 32px !important;\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  border-radius: 4px !important;\n  width: 25px;\n}\n.motto-skip-back-button:hover,\n.motto-skip-forward-button:hover,\n.motto-native-skip-button:hover {\n  opacity: 0.8 !important;\n  background: transparent !important;\n  transform: scale(1.05) !important;\n}\n.motto-skip-back-button:active,\n.motto-skip-forward-button:active,\n.motto-native-skip-button:active {\n  transform: scale(0.95) !important;\n}\n.motto-skip-back-button svg,\n.motto-skip-forward-button svg,\n.motto-native-skip-button svg {\n  width: 24px !important;\n  height: 24px !important;\n}\n@media (max-width: 767px) {\n  .shaka-controls-container .motto-native-skip-button,\n  .shaka-controls-container .motto-skip-back-button,\n  .shaka-controls-container .motto-skip-forward-button,\n  .shaka-controls-container .shaka-play-button,\n  .shaka-controls-container .shaka-pause-button {\n    display: none !important;\n  }\n}\n.shaka-spinner-svg {\n  color: white !important;\n  fill: white !important;\n}\n.shaka-spinner-path {\n  stroke: white !important;\n  fill: none !important;\n}\n.shaka-spinner-container {\n  color: white !important;\n}\n.shaka-buffering-spinner {\n  color: white !important;\n  fill: white !important;\n}\n.shaka-buffering-spinner svg {\n  color: white !important;\n  fill: white !important;\n}\n.shaka-buffering-spinner path {\n  stroke: white !important;\n  fill: none !important;\n}\n[data-shaka-player-container] .shaka-spinner,\n[data-shaka-player-container] .spinner {\n  color: white !important;\n  border-color: white !important;\n}\n.material-icons.shaka-spinner {\n  color: white !important;\n}\n.shaka-controls-container .shaka-spinner,\n.shaka-video-container .shaka-spinner {\n  color: white !important;\n  fill: white !important;\n}\n.shaka-controls-container .shaka-spinner svg,\n.shaka-video-container .shaka-spinner svg {\n  color: white !important;\n  fill: white !important;\n}\n.shaka-controls-container .shaka-spinner path,\n.shaka-video-container .shaka-spinner path {\n  stroke: white !important;\n}\n.motto-video-loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background:\n    linear-gradient(\n      135deg,\n      #1a1a1a 0%,\n      #2d2d2d 100%);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  z-index: 10;\n  transition: opacity 0.3s ease;\n}\n.motto-video-loading-overlay.hidden {\n  opacity: 0;\n  pointer-events: none;\n}\n.motto-video-loading-content {\n  text-align: center;\n  color: white;\n}\n.motto-video-loading-icon {\n  width: 64px;\n  height: 64px;\n  margin-bottom: 16px;\n  opacity: 0.7;\n}\n.motto-video-loading-text {\n  font-size: 16px;\n  font-weight: 500;\n  margin-bottom: 8px;\n}\n.motto-video-loading-subtext {\n  font-size: 14px;\n  opacity: 0.7;\n}\n@keyframes pulse-live {\n  0% {\n    opacity: 1;\n    transform: scale(1);\n  }\n  50% {\n    opacity: 0.7;\n    transform: scale(1.1);\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n.shaka-play-button-container {\n  display: none !important;\n}\n@media (max-width: 767px) {\n  .shaka-controls-container {\n    z-index: 90 !important;\n    height: 100px !important;\n    bottom: 0 !important;\n    top: unset !important;\n  }\n}\n@property --tw-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/styles.css
+styleInject(`@layer components {
+  video::-webkit-media-controls {
+    display: none !important;
+  }
+  video::-webkit-media-controls-panel {
+    display: none !important;
+  }
+  video::-webkit-media-controls-play-button {
+    display: none !important;
+  }
+  video::-webkit-media-controls-timeline {
+    display: none !important;
+  }
+  video::-webkit-media-controls-current-time-display {
+    display: none !important;
+  }
+  video::-webkit-media-controls-time-remaining-display {
+    display: none !important;
+  }
+  video::-webkit-media-controls-mute-button {
+    display: none !important;
+  }
+  video::-webkit-media-controls-volume-slider {
+    display: none !important;
+  }
+  video::-webkit-media-controls-fullscreen-button {
+    display: none !important;
+  }
+  video::-webkit-media-controls-overlay-play-button {
+    display: none !important;
+  }
+  video::-moz-media-controls {
+    display: none !important;
+  }
+  video {
+    outline: none !important;
+  }
+  video[controls] {
+    -webkit-appearance: none !important;
+    appearance: none !important;
+  }
+  video::-webkit-media-controls-enclosure {
+    display: none !important;
+  }
+  video::-webkit-media-controls-start-playback-button {
+    display: none !important;
+  }
+  video[controls]::-webkit-media-controls,
+  video[controls]::-webkit-media-controls-panel,
+  video[controls]::-webkit-media-controls-play-button,
+  video[controls]::-webkit-media-controls-timeline,
+  video[controls]::-webkit-media-controls-current-time-display,
+  video[controls]::-webkit-media-controls-time-remaining-display,
+  video[controls]::-webkit-media-controls-mute-button,
+  video[controls]::-webkit-media-controls-volume-slider,
+  video[controls]::-webkit-media-controls-fullscreen-button,
+  video[controls]::-webkit-media-controls-overlay-play-button,
+  video[controls]::-webkit-media-controls-enclosure,
+  video[controls]::-webkit-media-controls-start-playback-button {
+    display: none !important;
+    visibility: hidden !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+  }
+  video[controls]::-moz-media-controls {
+    display: none !important;
+    visibility: hidden !important;
+    opacity: 0 !important;
+  }
+  .motto-video-container {
+    @apply relative w-full;
+    min-height: 300px;
+  }
+  @supports (aspect-ratio: 16/9) {
+    .motto-video-container {
+      min-height: auto;
+    }
+  }
+  .motto-video-responsive {
+    @apply absolute top-0 left-0 w-full h-full;
+  }
+  .motto-skip-button {
+    @apply absolute top-1/2 -translate-y-1/2 bg-black/70 text-white border-0 rounded-full w-16 h-16 text-2xl cursor-pointer flex items-center justify-center transition-all duration-200 z-10 opacity-80 hover:opacity-100 hover:scale-110 active:scale-95;
+  }
+  .motto-skip-button-back {
+    @apply left-5;
+  }
+  .motto-skip-button-forward {
+    @apply right-5;
+  }
+}
+.shaka-seek-bar-container {
+  height: 6px !important;
+  width: 100% !important;
+  margin: 8px 0 !important;
+  border-radius: 4px !important;
+  position: relative !important;
+  border-top: none !important;
+  border-bottom: none !important;
+  box-shadow: none !important;
+}
+.shaka-seek-bar {
+  height: 6px !important;
+  width: 100% !important;
+  -webkit-appearance: none !important;
+  appearance: none !important;
+  background: transparent !important;
+  cursor: pointer !important;
+  border: none !important;
+  outline: none !important;
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  border-radius: 4px !important;
+}
+.shaka-seek-bar::-webkit-slider-runnable-track {
+  height: 6px !important;
+  background: transparent !important;
+  border-radius: 4px !important;
+  border: none !important;
+}
+.shaka-seek-bar::-moz-range-track {
+  height: 6px !important;
+  background: transparent !important;
+  border-radius: 4px !important;
+  border: none !important;
+}
+.shaka-seek-bar::-webkit-slider-thumb {
+  -webkit-appearance: none !important;
+  appearance: none !important;
+  width: 16px !important;
+  height: 16px !important;
+  border-radius: 50% !important;
+  background: #ffffff !important;
+  cursor: pointer !important;
+  border: 2px solid #ffffff !important;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
+  margin-top: -4px !important;
+}
+.shaka-seek-bar::-moz-range-thumb {
+  width: 16px !important;
+  height: 16px !important;
+  border-radius: 50% !important;
+  background: #ffffff !important;
+  cursor: pointer !important;
+  border: 2px solid #ffffff !important;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
+  margin-top: -4px !important;
+}
+.motto-skip-back-button,
+.motto-skip-forward-button,
+.motto-native-skip-button {
+  background: transparent !important;
+  border: none !important;
+  padding: 4px !important;
+  margin: 0px !important;
+  cursor: pointer !important;
+  color: #ffffff !important;
+  transition: all 0.2s ease !important;
+  min-width: 32px !important;
+  height: 32px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  border-radius: 4px !important;
+  width: 25px;
+}
+.motto-skip-back-button:hover,
+.motto-skip-forward-button:hover,
+.motto-native-skip-button:hover {
+  opacity: 0.8 !important;
+  background: transparent !important;
+  transform: scale(1.05) !important;
+}
+.motto-skip-back-button:active,
+.motto-skip-forward-button:active,
+.motto-native-skip-button:active {
+  transform: scale(0.95) !important;
+}
+.motto-skip-back-button svg,
+.motto-skip-forward-button svg,
+.motto-native-skip-button svg {
+  width: 24px !important;
+  height: 24px !important;
+}
+.shaka-spinner-svg {
+  color: white !important;
+  fill: white !important;
+}
+.shaka-spinner-path {
+  stroke: white !important;
+  fill: none !important;
+}
+.shaka-spinner-container {
+  color: white !important;
+}
+.shaka-buffering-spinner {
+  color: white !important;
+  fill: white !important;
+}
+.shaka-buffering-spinner svg {
+  color: white !important;
+  fill: white !important;
+}
+.shaka-buffering-spinner path {
+  stroke: white !important;
+  fill: none !important;
+}
+[data-shaka-player-container] .shaka-spinner,
+[data-shaka-player-container] .spinner {
+  color: white !important;
+  border-color: white !important;
+}
+.material-icons.shaka-spinner {
+  color: white !important;
+}
+.shaka-controls-container .shaka-spinner,
+.shaka-video-container .shaka-spinner {
+  color: white !important;
+  fill: white !important;
+}
+.shaka-controls-container .shaka-spinner svg,
+.shaka-video-container .shaka-spinner svg {
+  color: white !important;
+  fill: white !important;
+}
+.shaka-controls-container .shaka-spinner path,
+.shaka-video-container .shaka-spinner path {
+  stroke: white !important;
+}
+.motto-video-loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background:
+    linear-gradient(
+      135deg,
+      #1a1a1a 0%,
+      #2d2d2d 100%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  transition: opacity 0.3s ease;
+}
+.motto-video-loading-overlay.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+.motto-video-loading-content {
+  text-align: center;
+  color: white;
+}
+.motto-video-loading-icon {
+  width: 64px;
+  height: 64px;
+  margin-bottom: 16px;
+  opacity: 0.7;
+}
+.motto-video-loading-text {
+  font-size: 16px;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+.motto-video-loading-subtext {
+  font-size: 14px;
+  opacity: 0.7;
+}
+@keyframes pulse-live {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.shaka-play-button {
+  background: rgba(255, 255, 255, 0.1) !important;
+  border: none !important;
+  color: white !important;
+  padding: 10px !important;
+  border-radius: 100% !important;
+  transition: all 0.2s ease !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  min-width: 55px !important;
+  height: 55px !important;
+}
+.shaka-play-button-container {
+  background: transparent;
+  transition: all 0.2s ease !important;
+}
+.motto-video-container:not(.no-cursor) .shaka-play-button-container {
+  background: rgba(0, 0, 0, 0.3);
+  transition: all 0.s ease !important;
+}
+.shaka-play-button:hover {
+  background: rgba(255, 255, 255, 0.2) !important;
+  transform: scale(1.05) !important;
+}
+.shaka-play-button:active {
+  transform: scale(0.95) !important;
+}
+.shaka-play-button > * {
+  display: none !important;
+}
+.shaka-play-button::after {
+  content: "" !important;
+  width: 35px !important;
+  height: 35px !important;
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path fill-rule="evenodd" d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z" clip-rule="evenodd" /></svg>') !important;
+  background-repeat: no-repeat !important;
+  background-size: contain !important;
+  background-position: center !important;
+  display: block !important;
+}
+.shaka-play-button[aria-label*=Play]::after {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path fill-rule="evenodd" d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z" clip-rule="evenodd" /></svg>') !important;
+}
+.shaka-play-button[aria-label*=Pause]::after {
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path fill-rule="evenodd" d="M6.75 5.25a.75.75 0 0 1 .75-.75H9a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H7.5a.75.75 0 0 1-.75-.75V5.25Zm7.5 0A.75.75 0 0 1 15 4.5h1.5a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H15a.75.75 0 0 1-.75-.75V5.25Z" clip-rule="evenodd" /></svg>') !important;
+}
+.motto-video-container {
+  background: #111111;
+}
+.motto-video-container video {
+  width: 100% !important;
+  height: 100% !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+html[dir=rtl] .shaka-controls-container,
+html[dir=rtl] .shaka-bottom-controls,
+html[dir=rtl] .shaka-controls-button-panel {
+  direction: ltr !important;
+}
+html[dir=rtl] .shaka-overflow-menu,
+html[dir=rtl] .shaka-settings-menu {
+  direction: rtl !important;
+  text-align: right !important;
+}
+html[dir=rtl] .shaka-overflow-menu .shaka-overflow-button .material-svg-icon:not(:first-child) {
+  margin-right: 12px !important;
+  margin-left: 0 !important;
+}
+html[dir=rtl] .shaka-overflow-menu .shaka-overflow-button .material-svg-icon:first-child {
+  margin-right: 0 !important;
+  margin-left: 12px !important;
+}
+.shaka-hidden-fast-forward-container,
+.shaka-hidden-rewind-container {
+  pointer-events: none !important;
+  display: none !important;
+}
+`);
 
 // src/Player.tsx
-import { forwardRef, useEffect as useEffect4, useRef as useRef8, useImperativeHandle } from "react";
-import shaka2 from "shaka-player/dist/shaka-player.ui";
+import { forwardRef, useEffect as useEffect4, useRef as useRef8, useImperativeHandle, useCallback as useCallback9, useState as useState3 } from "react";
+import shaka3 from "shaka-player/dist/shaka-player.ui";
+
+// src/hooks/useShakaPlayer.ts
+import { useRef, useCallback, useState } from "react";
+import shaka 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/utils/devices.ts
+var isAppleDevice = () => {
+  if (typeof navigator === "undefined") return false;
+  const ua = navigator.userAgent || "";
+  const isIOS = /iPad|iPhone|iPod/.test(ua) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
+  const isSafari = /Safari/.test(ua) && !/Chrome|CriOS|FxiOS|Edg/.test(ua);
+  const isMacSafari = /Macintosh/.test(ua) && isSafari;
+  return isIOS || isMacSafari;
+};
+var isPlayReadySupported = () => {
+  if (typeof navigator === "undefined" || typeof window === "undefined") {
+    return false;
+  }
+  if (!navigator.requestMediaKeySystemAccess) {
+    return false;
+  }
+  const userAgent = navigator.userAgent || "";
+  const isXbox = /Xbox/.test(userAgent);
+  const isEdge = /Edg/.test(userAgent);
+  const isIE = /Trident|MSIE/.test(userAgent);
+  const isWindows = /Windows/.test(userAgent);
+  return isXbox || (isEdge || isIE) && isWindows;
+};
+var supportsWidevinePersistentLicenses = () => {
+  return false;
+  if (typeof navigator === "undefined") {
+    return false;
+  }
+  const userAgent = navigator.userAgent || "";
+  const isChromeMatch = userAgent.match(/Chrome\/(\d+)/);
+  if (!isChromeMatch) {
+    return false;
+  }
+  if (/Edg|OPR|Opera/.test(userAgent)) {
+    return false;
+  }
+  const chromeVersion = parseInt(isChromeMatch[1], 10);
+  if (chromeVersion < 64) {
+    return false;
+  }
+  const isMacOS = /Mac OS X|Macintosh/.test(userAgent);
+  const isWindows = /Windows/.test(userAgent);
+  return isMacOS || isWindows;
+};
+
+// src/hooks/useShakaPlayer.ts
+import initShakaPlayerMux from "@mux/mux-data-shakaplayer";
+
+// package.json
+var version = "1.0.1-rc.80";
+
+// src/utils/licenseCache.ts
+var PERSISTENT_LICENSE_PREFIX = "motto_lic_";
+var LICENSE_EXPIRY_MS = 2 * 60 * 60 * 1e3;
+var LICENSE_MAX_RETRY_ATTEMPTS = 10;
+var getAllLicenseCacheKeys = () => {
+  const keys = [];
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i);
+    if (key?.startsWith(PERSISTENT_LICENSE_PREFIX)) {
+      keys.push(key);
+    }
+  }
+  return keys;
+};
+var getAllLicenseCacheEntries = () => {
+  const keys = getAllLicenseCacheKeys();
+  const entries = [];
+  for (const key of keys) {
+    try {
+      const stored = localStorage.getItem(key);
+      if (stored) {
+        const data = JSON.parse(stored);
+        entries.push({ key, data });
+      }
+    } catch (error) {
+      console.warn(`Failed to parse license cache entry for key ${key}:`, error);
+      localStorage.removeItem(key);
+    }
+  }
+  return entries;
+};
+var evictLRUEntry = () => {
+  const entries = getAllLicenseCacheEntries();
+  if (entries.length === 0) {
+    return false;
+  }
+  entries.sort((a, b) => {
+    const oldestA = Math.min(...a.data.map((session) => session.timestamp));
+    const oldestB = Math.min(...b.data.map((session) => session.timestamp));
+    return oldestA - oldestB;
+  });
+  const lruEntry = entries[0];
+  localStorage.removeItem(lruEntry.key);
+  console.log(`Evicted LRU license cache entry: ${lruEntry.key}`);
+  return true;
+};
+var storeWithQuotaHandling = (key, data) => {
+  let attempts = 0;
+  while (attempts < LICENSE_MAX_RETRY_ATTEMPTS) {
+    try {
+      localStorage.setItem(key, data);
+      return true;
+    } catch (error) {
+      if (error instanceof DOMException && (error.code === 22 || // QUOTA_EXCEEDED_ERR
+      error.name === "QuotaExceededError" || error.name === "NS_ERROR_DOM_QUOTA_REACHED")) {
+        console.warn(`QuotaExceededError on attempt ${attempts + 1}, attempting LRU eviction...`);
+        if (!evictLRUEntry()) {
+          console.error("No more entries to evict, storage operation failed");
+          return false;
+        }
+        attempts++;
+      } else {
+        console.error("Failed to store license cache data:", error);
+        return false;
+      }
+    }
+  }
+  console.error(`Failed to store license cache data after ${LICENSE_MAX_RETRY_ATTEMPTS} eviction attempts`);
+  return false;
+};
+var managePersistentLicenseStorage = (playlistId, licenseCacheKey, newSessionMetadata) => {
+  try {
+    const storageKey = `${PERSISTENT_LICENSE_PREFIX}${playlistId}_${licenseCacheKey}`;
+    const stored = localStorage.getItem(storageKey);
+    let existingSessions = [];
+    if (stored) {
+      try {
+        existingSessions = JSON.parse(stored);
+      } catch (parseError) {
+        console.warn("Failed to parse existing persistent license data:", parseError);
+        existingSessions = [];
+      }
+    }
+    const now = Date.now();
+    let validSessions = existingSessions.filter(
+      (session) => now - session.timestamp < LICENSE_EXPIRY_MS
+    );
+    if (newSessionMetadata && newSessionMetadata.length > 0) {
+      const newSessions = newSessionMetadata.map((session) => {
+        const uint8Array = new Uint8Array(session.initData);
+        const binaryString = Array.from(uint8Array).map((byte) => String.fromCharCode(byte)).join("");
+        return {
+          sessionId: session.sessionId,
+          initData: btoa(binaryString),
+          initDataType: session.initDataType,
+          keySystem: session.keySystem,
+          timestamp: now
+        };
+      });
+      const newSessionIds = new Set(newSessions.map((s) => s.sessionId));
+      validSessions = validSessions.filter((session) => !newSessionIds.has(session.sessionId));
+      validSessions = [...validSessions, ...newSessions];
+    }
+    if (validSessions.length === 0) {
+      localStorage.removeItem(storageKey);
+    } else {
+      const dataToStore = JSON.stringify(validSessions);
+      const success = storeWithQuotaHandling(storageKey, dataToStore);
+      if (!success) {
+        console.error(`Failed to store license cache for ${storageKey} after quota handling`);
+        return validSessions;
+      }
+    }
+    return validSessions;
+  } catch (error) {
+    console.warn("Failed to manage persistent license storage:", error);
+    return [];
+  }
+};
+var storePersistentLicense = (playlistId, licenseCacheKey, sessionMetadata) => {
+  managePersistentLicenseStorage(playlistId, licenseCacheKey, sessionMetadata);
+};
+var retrievePersistentLicense = (playlistId, licenseCacheKey) => {
+  try {
+    const validSessions = managePersistentLicenseStorage(playlistId, licenseCacheKey);
+    return validSessions.map((session) => ({
+      sessionId: session.sessionId,
+      initData: Uint8Array.from(atob(session.initData), (c) => c.charCodeAt(0)).buffer,
+      initDataType: session.initDataType,
+      keySystem: session.keySystem
+    }));
+  } catch (error) {
+    console.warn("Failed to retrieve persistent license:", error);
+    return [];
+  }
+};
+var clearAllPersistentLicenses = () => {
+  try {
+    const keys = getAllLicenseCacheKeys();
+    for (const key of keys) {
+      localStorage.removeItem(key);
+    }
+    console.log(`Cleared ${keys.length} persistent license cache entries`);
+    return keys.length;
+  } catch (error) {
+    console.error("Failed to clear persistent licenses:", error);
+    return 0;
+  }
+};
+
+// src/hooks/useShakaPlayer.ts
+var normalizeSource = (src) => {
+  if (typeof src === "string") {
+    return {
+      id: "",
+      url: src,
+      format: "auto",
+      drm: {}
+    };
+  }
+  return src;
+};
+var useShakaPlayer = ({
   src,
   shakaConfig,
   drmConfig,
   onError,
-  onPlayerReady
+  onPlayerReady,
+  muxConfig,
+  onMuxReady,
+  onMuxDataUpdate,
+  publicKey,
+  mottoToken,
+  hasAds = false,
+  hasSystem73 = false,
+  apiToken
 }) => {
   const playerRef = useRef(null);
-  const initializePlayer = useCallback(async (video) => {
+  const [isRetrying, setIsRetrying] = useState(false);
+  const videoElementRef = useRef(null);
+  const destroyInProgressRef = useRef(null);
+  const isDestroyingRef = useRef(false);
+  const initSequenceRef = useRef(0);
+  const activeInitIdRef = useRef(null);
+  const waitingForKeyTimerRef = useRef(null);
+  const waitingForKeyHandlerRef = useRef(null);
+  const playbackResumedHandlerRef = useRef(null);
+  const usingPersistentLicenseRef = useRef(false);
+  const storedPersistentThisLoadRef = useRef(false);
+  const drmExpirationHandlerRef = useRef(null);
+  const getManifestUrl = useCallback(() => {
+    const playlistSrc = normalizeSource(src);
+    let manifestUrl = playlistSrc.url;
+    const isDRM = Boolean(playlistSrc.drm?.widevine || playlistSrc.drm?.fairplay || playlistSrc.drm?.playready);
+    if (isDRM) {
+      const isPlayReady = isPlayReadySupported();
+      if (isAppleDevice() && playlistSrc.drm?.fairplay?.certificateUrl) {
+        manifestUrl = playlistSrc.drm.fairplay.playlistUrl;
+      } else if (isPlayReady && playlistSrc.drm?.playready?.licenseUrl) {
+        manifestUrl = playlistSrc.drm.playready.playlistUrl;
+      } else {
+        manifestUrl = playlistSrc.drm?.widevine?.playlistUrl || "";
+      }
+    }
+    return manifestUrl;
+  }, [src]);
+  const initializePlayerInternal = useCallback(async (video) => {
     try {
-      polyfill.installAll();
-      if (!ShakaPlayer.isBrowserSupported()) {
+      if (destroyInProgressRef.current) {
+        try {
+          await destroyInProgressRef.current;
+        } catch {
+        }
+      }
+      const myInitId = ++initSequenceRef.current;
+      activeInitIdRef.current = myInitId;
+      videoElementRef.current = video;
+      shaka.polyfill.installAll();
+      if (!shaka.Player.isBrowserSupported()) {
         throw new Error("Browser not supported by Shaka Player");
       }
-      const player = new ShakaPlayer(video);
+      if (isDestroyingRef.current) {
+        return;
+      }
+      const player = new shaka.Player();
       playerRef.current = player;
       await player.attach(video);
+      const defaultConfig = {
+        manifest: {
+          // Override availability window to allow DVR window to grow from start
+          // Set to a very large value (24 hours in seconds) to effectively allow unlimited growth
+          availabilityWindowOverride: 86400
+          // 24 hours in seconds
+        },
+        streaming: {
+          // Allow seeking to any point within the availability window
+          safeSeekOffset: 5,
+          // 5 seconds from live edge to prevent buffering
+          // Increase tolerance for manifest timing inaccuracies in live streams
+          inaccurateManifestTolerance: 2
+        }
+      };
+      player.configure(defaultConfig);
       if (shakaConfig) {
         player.configure(shakaConfig);
       }
-      if (drmConfig) {
-        if (drmConfig.clearKeys) {
-          player.configure({ "drm.clearKeys": drmConfig.clearKeys });
+      const playlistSrc = normalizeSource(src);
+      const manifestUrl = getManifestUrl();
+      let playlistId = playlistSrc.id;
+      const isDRM = Boolean(playlistSrc.drm?.widevine || playlistSrc.drm?.fairplay || playlistSrc.drm?.playready);
+      storedPersistentThisLoadRef.current = false;
+      if (activeInitIdRef.current !== myInitId || isDestroyingRef.current) {
+        try {
+          await player.destroy();
+        } catch {
+        }
+        if (playerRef.current === player) playerRef.current = null;
+        return;
+      }
+      let storedSessionsMetadata = [];
+      if (isDRM && playlistId) {
+        storedSessionsMetadata = retrievePersistentLicense(playlistId, playlistSrc.drm?.licenseCacheKey ?? "");
+      }
+      if (isDRM) {
+        const drmConfig2 = {
+          servers: {
+            "com.widevine.alpha": playlistSrc.drm?.widevine?.licenseUrl,
+            "com.microsoft.playready": playlistSrc.drm?.playready?.licenseUrl,
+            "com.apple.fps": playlistSrc.drm?.fairplay?.licenseUrl
+          },
+          keySystemsMapping: {
+            // Fall back or reroute to the platform's recommended PlayReady CDM if needed
+            "com.microsoft.playready": "com.microsoft.playready.recommendation"
+          },
+          ...playlistSrc.drm?.fairplay && {
+            advanced: {
+              "com.apple.fps": {
+                serverCertificateUri: playlistSrc.drm.fairplay.certificateUrl
+              }
+            }
+          }
+        };
+        drmConfig2.advanced = {
+          ...drmConfig2.advanced,
+          "com.widevine.alpha": {
+            ...drmConfig2.advanced?.["com.widevine.alpha"],
+            sessionType: supportsWidevinePersistentLicenses() ? "persistent-license" : "temporary"
+          },
+          "com.microsoft.playready": {
+            ...drmConfig2.advanced?.["com.microsoft.playready"],
+            sessionType: "persistent-license"
+            // PlayReady seems to always require persistent-license (temporary won't work, not compatible with license server response)
+          },
+          "com.apple.fps": {
+            ...drmConfig2.advanced?.["com.apple.fps"],
+            sessionType: "temporary"
+            // FairPlay always uses temporary sessions - Safari won't play with persistent-license
+          }
+        };
+        if (storedSessionsMetadata.length > 0) {
+          drmConfig2.persistentSessionOnlinePlayback = true;
+          drmConfig2.persistentSessionsMetadata = storedSessionsMetadata.map((session) => ({
+            sessionId: session.sessionId,
+            initData: new Uint8Array(session.initData),
+            initDataType: session.initDataType
+          }));
+        }
+        usingPersistentLicenseRef.current = storedSessionsMetadata.length > 0;
+        player.configure({ drm: drmConfig2 });
+        const clearWaitingForKeyTimer = () => {
+          if (waitingForKeyTimerRef.current !== null) {
+            window.clearTimeout(waitingForKeyTimerRef.current);
+            waitingForKeyTimerRef.current = null;
+          }
+        };
+        const onPlaybackResumed = () => {
+          clearWaitingForKeyTimer();
+        };
+        const onWaitingForKey = () => {
+          if (!usingPersistentLicenseRef.current) return;
+          if (isRetrying) return;
+          clearWaitingForKeyTimer();
+          waitingForKeyTimerRef.current = window.setTimeout(async () => {
+            try {
+              if (isRetrying) return;
+              console.warn("Stuck waiting for decryption key; attempting license cache reset and reload...");
+              const clearedCount = clearAllPersistentLicenses();
+              if (clearedCount > 0 && playerRef.current) {
+                setIsRetrying(true);
+                await playerRef.current.load(getManifestUrl());
+                console.log("Reloaded manifest after clearing cached licenses");
+              } else {
+                console.warn("No cached licenses found to clear, skipping reload");
+              }
+            } catch (e) {
+              console.error("Failed during recovery from waitingforkey state:", e);
+              onError?.(e);
+            } finally {
+              setIsRetrying(false);
+              clearWaitingForKeyTimer();
+            }
+          }, 3e3);
+        };
+        try {
+          video.addEventListener("waitingforkey", onWaitingForKey);
+          video.addEventListener("playing", onPlaybackResumed);
+          video.addEventListener("ended", onPlaybackResumed);
+          video.addEventListener("pause", onPlaybackResumed);
+          waitingForKeyHandlerRef.current = onWaitingForKey;
+          playbackResumedHandlerRef.current = onPlaybackResumed;
+        } catch (e) {
+          console.warn("Failed to attach waitingforkey/playback listeners:", e);
+        }
+        const netEngine = player.getNetworkingEngine();
+        if (netEngine) {
+          netEngine.registerRequestFilter((type, request) => {
+            switch (type) {
+              case shaka.net.NetworkingEngine.RequestType.LICENSE:
+                if (publicKey) {
+                  request.headers["authorization"] = `Bearer ${publicKey}`;
+                }
+                if (mottoToken) {
+                  request.headers["x-motto-token"] = mottoToken;
+                }
+                break;
+              case shaka.net.NetworkingEngine.RequestType.MANIFEST:
+              case shaka.net.NetworkingEngine.RequestType.SEGMENT:
+                request.allowCrossSiteCredentials = true;
+                break;
+            }
+          });
+          netEngine.registerResponseFilter((type, response) => {
+            if (type === shaka.net.NetworkingEngine.RequestType.LICENSE) {
+              const ks = player.keySystem && player.keySystem();
+              if (ks === "com.apple.fps") {
+                const responseText = shaka.util.StringUtils.fromUTF8(response.data);
+                response.data = shaka.util.Uint8ArrayUtils.fromBase64(responseText).buffer;
+              }
+            }
+          });
+        }
+      }
+      if (apiToken) {
+        const netEngine = player.getNetworkingEngine();
+        if (netEngine) {
+          netEngine.registerRequestFilter((type, request) => {
+            if (type === shaka.net.NetworkingEngine.RequestType.MANIFEST) {
+              request.headers["authorization"] = `Bearer ${apiToken}`;
+            }
+          });
         }
-        if (drmConfig.servers) {
-          player.configure({ "drm.servers": drmConfig.servers });
+      }
+      if (isDRM && playlistId) {
+        const onDRMSessionUpdate = () => {
+          try {
+            if (storedPersistentThisLoadRef.current) return;
+            const activeDrmSessions = player.getActiveSessionsMetadata?.();
+            if (!activeDrmSessions) return;
+            const persistentSessions = activeDrmSessions.filter(
+              (session) => session.sessionType === "persistent-license"
+            );
+            if (persistentSessions.length > 0) {
+              const sessionsToStore = persistentSessions.map((session) => ({
+                sessionId: session.sessionId,
+                initData: session.initData,
+                initDataType: session.initDataType,
+                keySystem: session.keySystem || "com.widevine.alpha"
+              }));
+              storePersistentLicense(playlistId, playlistSrc.drm?.licenseCacheKey ?? "", sessionsToStore);
+              storedPersistentThisLoadRef.current = true;
+            }
+          } catch (e) {
+            console.warn("Failed to persist licenses on expiration update:", e);
+          }
+        };
+        try {
+          player.addEventListener("drmsessionupdate", onDRMSessionUpdate);
+          drmExpirationHandlerRef.current = onDRMSessionUpdate;
+        } catch (e) {
+          console.warn("Failed to attach drmsessionupdate listener:", e);
         }
       }
-      player.addEventListener("error", (event) => {
+      player?.addEventListener("error", (event) => {
         const error = event.detail;
+        if (error?.code === 7e3) {
+          return;
+        }
+        if (error?.code >= 6e3 && error?.code < 7e3 && !isRetrying && videoElementRef.current) {
+          console.warn(`DRM error detected (code: ${error.code}), checking for cached licenses...`);
+          const clearedCount = clearAllPersistentLicenses();
+          if (clearedCount > 0) {
+            console.warn(`Cleared ${clearedCount} cached licenses, retrying...`);
+            setIsRetrying(true);
+            setTimeout(async () => {
+              try {
+                const video2 = videoElementRef.current;
+                const currentPlayer = playerRef.current;
+                if (video2 && currentPlayer) {
+                  console.log("Reloading manifest after license cache clear...");
+                  await currentPlayer.load(getManifestUrl());
+                  console.log("Manifest reloaded successfully");
+                }
+              } catch (retryError) {
+                console.error("Failed to retry after license clear:", retryError);
+                onError?.(retryError);
+              } finally {
+                setIsRetrying(false);
+              }
+            }, 500);
+            return;
+          } else {
+            console.warn(`No cached licenses found to clear for error code ${error.code}, not retrying to avoid infinite loop`);
+          }
+        }
         console.error("Shaka Player Error:", error);
         onError?.(new Error(`Shaka Player Error: ${error.message || "Unknown error"}`));
       });
-      await player.load(src);
+      if (muxConfig) {
+        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: muxConfig?.metadata?.player_name,
+              player_version: version,
+              player_init_time: playerInitTime,
+              video_title: muxConfig?.metadata?.video_title ?? "",
+              video_id: muxConfig?.metadata?.video_id ?? "",
+              viewer_user_id: muxConfig?.metadata?.viewer_user_id ?? "",
+              ...muxConfig.metadata
+            }
+          };
+          initShakaPlayerMux(player, muxOptions, shaka);
+          onMuxReady?.();
+        } catch (error) {
+          console.error("Failed to initialize Mux Analytics:", error);
+        }
+      }
+      if (activeInitIdRef.current !== myInitId || isDestroyingRef.current) {
+        try {
+          await player.destroy();
+        } catch {
+        }
+        if (playerRef.current === player) playerRef.current = null;
+        return;
+      }
+      if (!hasAds && !hasSystem73) {
+        console.log("\u{1F4FA} [Shaka] Auto-loading manifest:", manifestUrl);
+        await player.load(manifestUrl);
+        console.log("\u2705 [Shaka] Manifest auto-loaded successfully");
+      } else {
+        console.log("\u23ED\uFE0F  [Shaka] Skipping auto-load (hasAds:", hasAds, ", hasSystem73:", hasSystem73, ")");
+      }
       onPlayerReady?.(player);
       return player;
     } catch (error) {
+      if (error?.code === 7e3) {
+        return;
+      }
       console.error("Error initializing Shaka Player:", error);
       onError?.(error);
       throw error;
     }
-  }, [shakaConfig, drmConfig, src, onError, onPlayerReady]);
+  }, [shakaConfig, drmConfig, src, onError, onPlayerReady, muxConfig, onMuxReady, isRetrying, getManifestUrl, apiToken]);
+  const initializePlayer = useCallback(async (video) => {
+    return initializePlayerInternal(video);
+  }, [initializePlayerInternal]);
+  const loadManifest = useCallback(async () => {
+    const player = playerRef.current;
+    if (!player) {
+      console.warn("\u26A0\uFE0F  [Shaka] Cannot load manifest: player not initialized");
+      return;
+    }
+    try {
+      const manifestUrl = getManifestUrl();
+      console.log("\u{1F4FA} [Shaka] Loading manifest:", manifestUrl);
+      await player.load(manifestUrl);
+      console.log("\u2705 [Shaka] Manifest loaded successfully");
+    } catch (error) {
+      if (error?.code === 7e3) {
+        return;
+      }
+      console.error("\u274C [Shaka] Error loading manifest:", error);
+      onError?.(error);
+      throw error;
+    }
+  }, [getManifestUrl, onError]);
   const destroyPlayer = useCallback(async () => {
-    if (playerRef.current) {
+    const playerInstance = playerRef.current;
+    if (playerInstance) {
       try {
-        await playerRef.current.destroy();
+        isDestroyingRef.current = true;
+        activeInitIdRef.current = null;
+        if (videoElementRef.current) {
+          try {
+            if (waitingForKeyHandlerRef.current) {
+              videoElementRef.current.removeEventListener("waitingforkey", waitingForKeyHandlerRef.current);
+            }
+            if (playbackResumedHandlerRef.current) {
+              videoElementRef.current.removeEventListener("playing", playbackResumedHandlerRef.current);
+              videoElementRef.current.removeEventListener("ended", playbackResumedHandlerRef.current);
+              videoElementRef.current.removeEventListener("pause", playbackResumedHandlerRef.current);
+            }
+          } catch (e) {
+            console.warn("Error removing media event listeners:", e);
+          }
+        }
+        if (waitingForKeyTimerRef.current !== null) {
+          window.clearTimeout(waitingForKeyTimerRef.current);
+          waitingForKeyTimerRef.current = null;
+        }
+        try {
+          if (drmExpirationHandlerRef.current && playerInstance.removeEventListener) {
+            playerInstance.removeEventListener("drmsessionupdate", drmExpirationHandlerRef.current);
+          }
+        } catch (e) {
+          console.warn("Error removing DRM expiration listener:", e);
+        } finally {
+          drmExpirationHandlerRef.current = null;
+        }
+        const performDestroy = async () => {
+          try {
+            await playerInstance.destroy();
+          } finally {
+            try {
+              if (videoElementRef.current) {
+                videoElementRef.current.removeAttribute("src");
+                videoElementRef.current.load();
+              }
+            } catch {
+            }
+          }
+        };
+        destroyInProgressRef.current = performDestroy();
+        await destroyInProgressRef.current;
       } catch (error) {
         console.warn("Error destroying Shaka Player:", error);
       } finally {
-        playerRef.current = null;
+        if (playerRef.current === playerInstance) {
+          playerRef.current = null;
+        }
+        storedPersistentThisLoadRef.current = false;
+        isDestroyingRef.current = false;
+        destroyInProgressRef.current = null;
       }
     }
-  }, []);
+  }, [playerRef]);
   return {
     playerRef,
     initializePlayer,
-    destroyPlayer
+    loadManifest,
+    destroyPlayer,
+    isRetrying
   };
 };
 
@@ -111,11 +1072,25 @@ var useQualityControl = (playerRef, qualityConfig, onQualityChange) => {
     if (!playerRef.current) return;
     if (height === 0) {
       playerRef.current.configure({
-        abr: { enabled: true }
+        abr: {
+          enabled: true,
+          switchInterval: 2,
+          // quicker re-checks
+          clearBufferSwitch: true,
+          safeMarginSwitch: 10
+          // leave ~10 s in front of the playhead }
+        }
       });
     } else {
       playerRef.current.configure({
-        abr: { enabled: false }
+        abr: {
+          enabled: false,
+          switchInterval: 2,
+          // quicker re-checks
+          clearBufferSwitch: true,
+          safeMarginSwitch: 10
+          // leave ~10 s in front of the playhead }  
+        }
       });
       const tracks = playerRef.current.getVariantTracks();
       const targetTrack = tracks.find((track) => track.height === height);
@@ -194,14 +1169,14 @@ var useSkipControls = (videoRef, onSkipBack, onSkipForward) => {
 
 // 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";
+import initShakaPlayerMux2 from "@mux/mux-data-shakaplayer";
+import shaka2 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 playerInitTime = initShakaPlayerMux2.utils.now();
       const muxOptions = {
         debug: muxConfig.debug || false,
         disableCookies: muxConfig.disableCookies || false,
@@ -211,13 +1186,16 @@ var useMuxAnalytics = (playerRef, muxConfig, onMuxReady, onMuxDataUpdate) => {
         ...muxConfig.errorTranslator && { errorTranslator: muxConfig.errorTranslator },
         data: {
           env_key: muxConfig.envKey,
-          player_name: "Motto Video Player",
-          player_version: "1.0.0",
+          player_name: muxConfig?.metadata?.player_name,
+          player_version: version,
           player_init_time: playerInitTime,
+          video_title: muxConfig?.metadata?.video_title ?? "",
+          video_id: muxConfig?.metadata?.video_id ?? "",
+          viewer_user_id: muxConfig?.metadata?.viewer_user_id ?? "",
           ...muxConfig.metadata
         }
       };
-      shakaPlayerMuxRef.current = initShakaPlayerMux(playerRef.current, muxOptions, shaka);
+      shakaPlayerMuxRef.current = initShakaPlayerMux2(playerRef.current, muxOptions, shaka2);
       onMuxReady?.();
     } catch (error) {
       console.error("Failed to initialize Mux Analytics:", error);
@@ -262,8 +1240,155 @@ var useMuxAnalytics = (playerRef, muxConfig, onMuxReady, onMuxDataUpdate) => {
 // src/hooks/useShakaUI.ts
 import { useCallback as useCallback5, useRef as useRef4 } from "react";
 import { ui as ShakaUI } from "shaka-player/dist/shaka-player.ui";
+
+// src/icons/SkipBackIcon.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var SkipBackIcon = ({ size = 24, className = "" }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      strokeWidth: "2",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsx(
+          "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",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M9 9L9 16",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "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",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M12 4L4.5 4M4.5 4L6.5 2M4.5 4L6.5 6",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/icons/SkipForwardIcon.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var SkipForwardIcon = ({ size = 24, className = "" }) => {
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      width: size,
+      height: size,
+      strokeWidth: "2",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsx2(
+          "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",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            d: "M12 4H19.5M19.5 4L17.5 2M19.5 4L17.5 6",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            d: "M9 9L9 16",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "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",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/icons/BigPlayIcon.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var BigPlayIcon = ({ size = 40, className = "" }) => {
+  return /* @__PURE__ */ jsx3(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: /* @__PURE__ */ jsx3(
+        "path",
+        {
+          fillRule: "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",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  );
+};
+
+// src/utils/renderIcon.ts
+import { renderToStaticMarkup } from "react-dom/server";
+import { createElement } from "react";
+var renderIcon = (Component, props = {}) => {
+  return renderToStaticMarkup(createElement(Component, props));
+};
+
+// src/hooks/useShakaUI.ts
 var SkipBackButton = class {
-  constructor(parent, controls, onSkipBack) {
+  constructor(parent, controls, onSkipBack, iconSize = 24) {
     this.parent = parent;
     this.controls = controls;
     this.eventManager = { listen: (element, event, handler) => {
@@ -271,14 +1396,7 @@ var SkipBackButton = class {
     } };
     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_.innerHTML = renderIcon(SkipBackIcon, { size: iconSize });
     this.button_.title = "Skip back 15 seconds";
     this.button_.setAttribute("aria-label", "Skip back 15 seconds");
     this.parent.appendChild(this.button_);
@@ -291,9 +1409,13 @@ var SkipBackButton = class {
       }
     });
   }
+  // Shaka UI will call `release` when the controls are destroyed.
+  // Provide a no-op implementation to avoid TypeErrors.
+  release() {
+  }
 };
 var SkipForwardButton = class {
-  constructor(parent, controls, onSkipForward) {
+  constructor(parent, controls, onSkipForward, iconSize = 24) {
     this.parent = parent;
     this.controls = controls;
     this.eventManager = { listen: (element, event, handler) => {
@@ -301,14 +1423,7 @@ var SkipForwardButton = class {
     } };
     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_.innerHTML = renderIcon(SkipForwardIcon, { size: iconSize });
     this.button_.title = "Skip forward 15 seconds";
     this.button_.setAttribute("aria-label", "Skip forward 15 seconds");
     this.parent.appendChild(this.button_);
@@ -321,243 +1436,65 @@ var SkipForwardButton = class {
       }
     });
   }
+  release() {
+  }
 };
 var SkipBackButtonFactory = class {
-  constructor(onSkipBack) {
+  constructor(onSkipBack, iconSize) {
     this.onSkipBack = onSkipBack;
+    this.iconSize = iconSize;
   }
   create(rootElement, controls) {
-    return new SkipBackButton(rootElement, controls, this.onSkipBack);
+    return new SkipBackButton(rootElement, controls, this.onSkipBack, this.iconSize);
   }
 };
 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;
+  constructor(onSkipForward, iconSize) {
     this.onSkipForward = onSkipForward;
+    this.iconSize = iconSize;
   }
   create(rootElement, controls) {
-    return new MobileControlsContainer(rootElement, controls, this.onSkipBack, this.onSkipForward);
+    return new SkipForwardButton(rootElement, controls, this.onSkipForward, this.iconSize);
   }
 };
-var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig, seekbarColors, onSkipBack, onSkipForward) => {
+var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig, seekbarColors, onSkipBack, onSkipForward, iconSizes, locale = "en") => {
   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));
+      ShakaUI.Controls.registerElement("skip_back_button", new SkipBackButtonFactory(onSkipBack, iconSizes?.skipButtons));
       registeredElements.current.add("skip_back_button");
     }
     if (!registeredElements.current.has("skip_forward_button")) {
-      ShakaUI.Controls.registerElement("skip_forward_button", new SkipForwardButtonFactory(onSkipForward));
+      ShakaUI.Controls.registerElement("skip_forward_button", new SkipForwardButtonFactory(onSkipForward, iconSizes?.skipButtons));
       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",
+    if (locale !== "en") {
+      try {
+        ui.getControls().getLocalization().changeLocale([locale]);
+        console.log(`Set locale to '${locale}'`);
+      } catch (error) {
+        console.warn(`Failed to set locale to '${locale}', falling back to 'en':`, error);
+      }
+    }
+    const isMobile = window.innerWidth <= 767;
+    const controlPanelElements = [
+      ...isMobile ? [] : ["skip_back_button"],
+      ...isMobile ? [] : ["play_pause"],
+      ...isMobile ? [] : ["skip_forward_button"],
       "mute",
-      "volume",
+      ...isMobile ? [] : ["volume"],
+      // Only include volume on desktop
       "time_and_duration",
       "spacer",
       "fullscreen",
+      "cast",
+      // Always show cast button
       "overflow_menu"
     ];
     const uiConfig = {
@@ -570,35 +1507,58 @@ var useShakaUI = (playerRef, containerRef, videoRef, controls, chromecastConfig,
         // Progress/played portion (white)
       },
       controlPanelElements,
-      ...chromecastConfig?.receiverApplicationId && {
-        "castReceiverAppId": chromecastConfig.receiverApplicationId,
-        "castAndroidReceiverCompatible": false
-      }
+      addBigPlayButton: isMobile,
+      // For now, Chromecast via Shaka must use the Motto receiver that runs on the legacy cast SDK (2.0), because
+      // Shaka does not support the newer Cast SDK (3.0+) in its native integration.
+      castReceiverAppId: "EC900D4D",
+      castAndroidReceiverCompatible: true,
+      // Enable Android TV compatibility
+      overflowMenuButtons: [
+        "quality",
+        "picture_in_picture",
+        "playback_rate"
+      ]
     };
-    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);
+      const customizeBigPlayButton = () => {
+        const bigPlayButton = containerRef.current?.querySelector(".shaka-big-play-button");
+        if (bigPlayButton && !bigPlayButton.hasAttribute("data-customized")) {
+          const buttonSize = iconSizes?.bigPlayButton || 40;
+          bigPlayButton.innerHTML = renderIcon(BigPlayIcon, { size: buttonSize });
+          bigPlayButton.setAttribute("data-customized", "true");
+          const buttonElement = bigPlayButton;
+          buttonElement.style.display = "flex";
+          buttonElement.style.alignItems = "center";
+          buttonElement.style.justifyContent = "center";
         }
-      }, 500);
+      };
+      setTimeout(customizeBigPlayButton, 100);
+      const observer = new MutationObserver(() => {
+        customizeBigPlayButton();
+      });
+      if (containerRef.current) {
+        observer.observe(containerRef.current, {
+          childList: true,
+          subtree: true,
+          attributes: false
+        });
+      }
     }
     return ui;
-  }, [controls, containerRef, playerRef, videoRef, chromecastConfig, seekbarColors, onSkipBack, onSkipForward]);
-  const destroyUI = useCallback5(() => {
-    if (uiRef.current) {
+  }, [controls, containerRef, playerRef, videoRef, chromecastConfig, seekbarColors, onSkipBack, onSkipForward, iconSizes, locale]);
+  const destroyUI = useCallback5(async () => {
+    const uiInstance = uiRef.current;
+    if (uiInstance) {
       try {
-        uiRef.current.destroy();
+        await uiInstance.destroy();
       } catch (error) {
         console.error("Error destroying UI:", error);
+      } finally {
+        if (uiRef.current === uiInstance) {
+          uiRef.current = null;
+        }
       }
-      uiRef.current = null;
     }
   }, []);
   return {
@@ -637,128 +1597,153 @@ var useEventHandlers = (videoRef, handlers) => {
   };
 };
 
-// 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;
+// src/hooks/usePosterFallback.ts
+import { useEffect, useState as useState2 } from "react";
+
+// src/hooks/useLiveIndicator.ts
+import { useEffect as useEffect2, useRef as useRef6 } from "react";
+var useLiveIndicator = (containerRef, playerRef, options = {}) => {
+  const observerRef = useRef6(null);
+  const intervalRef = useRef6(null);
+  const lastStatusRef = useRef6(null);
+  const {
+    enabled = true,
+    indicatorColor = "#ff0000",
+    indicatorSize = 8,
+    showPulseAnimation = true,
+    liveThresholdSeconds = 15,
+    onLiveStatusChange
+  } = options;
+  const getLiveStatus = (player) => {
+    if (!player) {
+      return { isLive: false, isNearEdge: false };
     }
     try {
-      const player = playerRef.current;
-      if (!player.getManifest || !player.getPresentationTimeline || typeof player.getPresentationTimeline !== "function") {
-        return;
+      if (!player.getManifest || typeof player.getManifest !== "function") {
+        return { isLive: false, isNearEdge: false };
       }
       const manifest = player.getManifest();
       if (!manifest) {
-        return;
+        return { isLive: false, isNearEdge: false };
       }
-      const timeline = player.getPresentationTimeline();
+      const timeline = manifest.presentationTimeline;
       if (!timeline || typeof timeline.isLive !== "function") {
-        return;
-      }
-      const liveStatus = timeline.isLive();
-      if (liveStatus !== isLive) {
-        setIsLive(liveStatus);
-        setIsVisible(liveStatus);
-        onLiveStateChange?.(liveStatus);
+        return { isLive: false, isNearEdge: false };
       }
+      const isLiveStream = timeline.isLive();
+      if (!isLiveStream) return { isLive: false, isNearEdge: false };
+      const videoElement = player.getMediaElement?.();
+      if (!videoElement) return { isLive: true, isNearEdge: false };
+      const liveEdge = timeline.getSeekRangeEnd?.() ?? timeline.getSegmentAvailabilityEnd?.();
+      if (liveEdge === void 0) return { isLive: true, isNearEdge: false };
+      const currentTime = videoElement.currentTime;
+      const timeBehindLive = liveEdge - currentTime;
+      return {
+        isLive: true,
+        isNearEdge: timeBehindLive <= liveThresholdSeconds,
+        liveEdge
+      };
     } catch (error) {
-      if (error instanceof Error && !error.message.includes("not a function")) {
-        console.error("Error checking live status:", error);
-      }
+      console.error("Error checking live status:", error);
+      return { isLive: false, isNearEdge: false };
     }
   };
-  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 seekToLiveEdge = () => {
+    const player = playerRef.current;
+    if (!player) return;
+    try {
+      const manifest = player.getManifest();
+      if (!manifest) return;
+      const timeline = manifest.presentationTimeline;
+      const liveEdge = timeline?.getSeekRangeEnd?.() ?? timeline?.getSegmentAvailabilityEnd?.();
+      if (liveEdge !== void 0) {
+        const videoElement = player.getMediaElement?.();
+        if (videoElement) {
+          videoElement.currentTime = liveEdge;
+        }
       }
-    };
-  }, []);
-  const hideBadge = () => setIsVisible(false);
-  const showBadge = () => setIsVisible(true);
-  return {
-    isLive,
-    isVisible,
-    hideBadge,
-    showBadge,
-    checkLiveStatus
+    } catch (error) {
+      console.error("Error seeking to live edge:", error);
+    }
   };
-};
-
-// 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(() => {
+  useEffect2(() => {
     if (!containerRef.current || !enabled) {
       return;
     }
-    const addLiveIndicator = (currentTimeElement) => {
-      if (currentTimeElement.querySelector(".live-indicator-dot")) {
+    const updateLiveIndicator = (currentTimeElement, status) => {
+      const parent = currentTimeElement.parentElement;
+      if (!parent) return;
+      const existingContainer = parent.querySelector(".live-indicator-container");
+      const isCurrentlyNearEdge = existingContainer?.getAttribute("data-near-edge") === "true";
+      if (existingContainer && status.isNearEdge === isCurrentlyNearEdge) {
         return;
       }
+      if (existingContainer) {
+        existingContainer.remove();
+      }
+      const container = document.createElement("span");
+      container.className = "live-indicator-container";
+      container.setAttribute("data-near-edge", status.isNearEdge.toString());
+      container.style.cssText = `
+        display: inline-flex;
+        align-items: center;
+        width: 80px;
+        ${!status.isNearEdge ? "cursor: pointer;" : ""}
+      `;
       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};
+        background-color: ${status.isNearEdge ? indicatorColor : "#888888"};
         border-radius: 50%;
         margin-right: 6px;
-        vertical-align: middle;
-        ${showPulseAnimation ? "animation: pulse-live 2s infinite;" : ""}
+        ${status.isNearEdge && showPulseAnimation ? "animation: pulse-live 2s infinite;" : ""}
       `;
-      currentTimeElement.insertBefore(indicator, currentTimeElement.firstChild);
+      const liveText = document.createElement("span");
+      liveText.className = "live-indicator-text";
+      liveText.textContent = status.isNearEdge ? "LIVE" : "GO TO LIVE";
+      container.appendChild(indicator);
+      container.appendChild(liveText);
+      if (!status.isNearEdge) {
+        container.addEventListener("click", seekToLiveEdge);
+      }
+      if (status.isNearEdge) {
+        parent.insertBefore(container, currentTimeElement);
+        currentTimeElement.style.display = "none";
+      } else {
+        currentTimeElement.insertAdjacentElement("afterend", container);
+        currentTimeElement.style.display = "";
+      }
     };
     const removeLiveIndicator = (currentTimeElement) => {
-      const indicator = currentTimeElement.querySelector(".live-indicator-dot");
-      if (indicator) {
-        indicator.remove();
+      const parent = currentTimeElement.parentElement;
+      if (!parent) return;
+      const container = parent.querySelector(".live-indicator-container");
+      if (container) {
+        container.remove();
+        currentTimeElement.style.display = "";
       }
     };
     const checkForLiveContent = () => {
       const currentTimeElements = containerRef.current?.querySelectorAll(".shaka-current-time");
+      const status = getLiveStatus(playerRef.current);
+      const lastStatus = lastStatusRef.current;
+      if (onLiveStatusChange && (!lastStatus || lastStatus.isLive !== status.isLive || lastStatus.isNearEdge !== status.isNearEdge)) {
+        onLiveStatusChange(status);
+        lastStatusRef.current = { isLive: status.isLive, isNearEdge: status.isNearEdge };
+      }
       currentTimeElements?.forEach((element) => {
-        const textContent = element.textContent?.trim() || "";
-        if (textContent.toLowerCase().includes("live")) {
-          addLiveIndicator(element);
+        if (status.isLive) {
+          updateLiveIndicator(element, status);
         } else {
           removeLiveIndicator(element);
         }
       });
     };
     checkForLiveContent();
+    intervalRef.current = setInterval(checkForLiveContent, 1e3);
     observerRef.current = new MutationObserver((mutations) => {
       let shouldCheck = false;
       mutations.forEach((mutation) => {
@@ -784,31 +1769,289 @@ var useLiveIndicator = (containerRef, options = {}) => {
       characterData: true,
       characterDataOldValue: true
     });
-    const intervalId = setInterval(checkForLiveContent, 1e3);
     return () => {
       if (observerRef.current) {
         observerRef.current.disconnect();
       }
-      clearInterval(intervalId);
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
     };
-  }, [containerRef, enabled, indicatorColor, indicatorSize, showPulseAnimation]);
+  }, [containerRef, enabled, indicatorColor, indicatorSize, showPulseAnimation, liveThresholdSeconds]);
   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")) {
+    seekToLiveEdge,
+    getLiveStatus: () => getLiveStatus(playerRef.current)
+  };
+};
+
+// src/hooks/useKeyboardControls.ts
+import { useCallback as useCallback7, useEffect as useEffect3 } from "react";
+var useKeyboardControls = (videoRef, options = {}) => {
+  const { skipBack, skipForward, enabled = true } = options;
+  const isDesktop = useCallback7(() => {
+    return window.innerWidth > 767 && !/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+  }, []);
+  const handleKeydown = useCallback7((event) => {
+    if (!enabled || !isDesktop() || !videoRef.current) return;
+    const activeElement = document.activeElement;
+    if (activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || activeElement.isContentEditable)) {
+      return;
+    }
+    switch (event.key) {
+      case "ArrowLeft":
+        event.preventDefault();
+        skipBack?.();
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        skipForward?.();
+        break;
+      case " ":
+      case "Space":
+        event.preventDefault();
+        if (videoRef.current.paused) {
+          videoRef.current.play();
+        } else {
+          videoRef.current.pause();
         }
+        break;
+    }
+  }, [enabled, videoRef, skipBack, skipForward, isDesktop]);
+  useEffect3(() => {
+    if (!enabled || !isDesktop()) return;
+    document.addEventListener("keydown", handleKeydown);
+    return () => {
+      document.removeEventListener("keydown", handleKeydown);
+    };
+  }, [handleKeydown, enabled, isDesktop]);
+  return {
+    isDesktop: isDesktop()
+  };
+};
+
+// src/hooks/useAdEvents.ts
+import { useCallback as useCallback8, useRef as useRef7 } from "react";
+var useAdEvents = (playerRef, handlers) => {
+  const listenersRef = useRef7([]);
+  const setupAdEventListeners = useCallback8(() => {
+    const player = playerRef.current;
+    if (!player) return;
+    const adManager = player.getAdManager();
+    if (!adManager) return;
+    const onAdsManagerLoaded = (event) => {
+      const adsManager = event.getAdsManager();
+      const onAdStarted = () => {
+        console.log("Ad started");
+        handlers.onAdStart?.();
+      };
+      const onAdComplete = () => {
+        console.log("Ad completed");
+        handlers.onAdComplete?.();
+      };
+      const onAdError = (adErrorEvent) => {
+        console.error("Ad error:", adErrorEvent.getError());
+        handlers.onAdError?.(adErrorEvent.getError());
+      };
+      const onAdSkipped = () => {
+        console.log("Ad skipped");
+        handlers.onAdSkipped?.();
+      };
+      const onAdPaused = () => {
+        console.log("Ad paused");
+        handlers.onAdPaused?.();
+      };
+      const onAdResumed = () => {
+        console.log("Ad resumed");
+        handlers.onAdResumed?.();
+      };
+      const onAdProgress = (adProgressData) => {
+        handlers.onAdProgress?.(adProgressData);
+      };
+      const onAllAdsCompleted = () => {
+        console.log("All ads completed");
+        handlers.onAllAdsCompleted?.();
+      };
+      const adEventListeners = [];
+      if (window.google?.ima) {
+        const AdEvent = window.google.ima.AdEvent.Type;
+        const AdErrorEvent = window.google.ima.AdErrorEvent.Type;
+        if (handlers.onAdStart) {
+          adsManager.addEventListener(AdEvent.STARTED, onAdStarted);
+          adEventListeners.push({ event: AdEvent.STARTED, listener: onAdStarted });
+        }
+        if (handlers.onAdComplete) {
+          adsManager.addEventListener(AdEvent.COMPLETE, onAdComplete);
+          adEventListeners.push({ event: AdEvent.COMPLETE, listener: onAdComplete });
+        }
+        if (handlers.onAdError) {
+          adsManager.addEventListener(AdErrorEvent.AD_ERROR, onAdError);
+          adEventListeners.push({ event: AdErrorEvent.AD_ERROR, listener: onAdError });
+        }
+        if (handlers.onAdSkipped) {
+          adsManager.addEventListener(AdEvent.SKIPPED, onAdSkipped);
+          adEventListeners.push({ event: AdEvent.SKIPPED, listener: onAdSkipped });
+        }
+        if (handlers.onAdPaused) {
+          adsManager.addEventListener(AdEvent.PAUSED, onAdPaused);
+          adEventListeners.push({ event: AdEvent.PAUSED, listener: onAdPaused });
+        }
+        if (handlers.onAdResumed) {
+          adsManager.addEventListener(AdEvent.RESUMED, onAdResumed);
+          adEventListeners.push({ event: AdEvent.RESUMED, listener: onAdResumed });
+        }
+        if (handlers.onAdProgress) {
+          adsManager.addEventListener(AdEvent.AD_PROGRESS, onAdProgress);
+          adEventListeners.push({ event: AdEvent.AD_PROGRESS, listener: onAdProgress });
+        }
+        if (handlers.onAllAdsCompleted) {
+          adsManager.addEventListener(AdEvent.ALL_ADS_COMPLETED, onAllAdsCompleted);
+          adEventListeners.push({ event: AdEvent.ALL_ADS_COMPLETED, listener: onAllAdsCompleted });
+        }
+        listenersRef.current.push({
+          adsManager,
+          listeners: adEventListeners
+        });
+      }
+    };
+    try {
+      player.addEventListener("ad-started", () => {
+        console.log("Shaka ad-started event");
+        handlers.onAdStart?.();
+      });
+      player.addEventListener("ad-complete", () => {
+        console.log("Shaka ad-complete event");
+        handlers.onAdComplete?.();
+      });
+      player.addEventListener("ad-skipped", () => {
+        console.log("Shaka ad-skipped event");
+        handlers.onAdSkipped?.();
+      });
+      player.addEventListener("ad-error", (event) => {
+        console.error("Shaka ad-error event:", event);
+        handlers.onAdError?.(event);
+      });
+      listenersRef.current.push({
+        type: "shaka",
+        player,
+        events: ["ad-started", "ad-complete", "ad-skipped", "ad-error"]
       });
+    } catch (error) {
+      console.warn("Error setting up ad event listeners:", error);
+    }
+  }, [playerRef, handlers]);
+  const cleanupAdEventListeners = useCallback8(() => {
+    try {
+      listenersRef.current.forEach((listenerGroup) => {
+        if (listenerGroup.type === "shaka" && listenerGroup.player) {
+          listenerGroup.events.forEach((eventName) => {
+            try {
+              listenerGroup.player.removeEventListener(eventName, () => {
+              });
+            } catch (e) {
+              console.warn(`Error removing ${eventName} listener:`, e);
+            }
+          });
+        } else if (listenerGroup.adsManager && listenerGroup.listeners) {
+          listenerGroup.listeners.forEach(({ event, listener }) => {
+            try {
+              listenerGroup.adsManager.removeEventListener(event, listener);
+            } catch (e) {
+              console.warn("Error removing ad listener:", e);
+            }
+          });
+        }
+      });
+      listenersRef.current = [];
+    } catch (error) {
+      console.warn("Error cleaning up ad event listeners:", error);
     }
+  }, []);
+  return {
+    setupAdEventListeners,
+    cleanupAdEventListeners
   };
 };
 
+// src/Player.tsx
+import { twMerge as twMerge2 } from "tailwind-merge";
+
+// src/utils/scriptLoader.ts
+var SCRIPT_CONFIGS = {
+  ima: {
+    src: "https://imasdk.googleapis.com/js/sdkloader/ima3.js",
+    id: "ima-sdk",
+    type: "text/javascript"
+  },
+  system73: {
+    src: "//cdn.s73cloud.com/4/s73-sdk-shakaplayer.js",
+    id: "system73-sdk",
+    type: "application/javascript"
+  }
+};
+function loadScript(config) {
+  return new Promise((resolve, reject) => {
+    if (document.getElementById(config.id)) {
+      resolve();
+      return;
+    }
+    const script = document.createElement("script");
+    script.id = config.id;
+    script.src = config.src;
+    script.type = config.type || "text/javascript";
+    script.async = true;
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error(`Failed to load script: ${config.src}`));
+    document.head.appendChild(script);
+  });
+}
+function getRequiredScriptLoaders(needsIma, needsSystem73) {
+  const loaders = [];
+  if (needsIma) {
+    loaders.push(loadScript(SCRIPT_CONFIGS.ima));
+  }
+  if (needsSystem73) {
+    loaders.push(loadScript(SCRIPT_CONFIGS.system73));
+  }
+  return loaders;
+}
+async function loadScripts(scriptLoaders) {
+  if (scriptLoaders.length === 0) {
+    return;
+  }
+  try {
+    await Promise.all(scriptLoaders);
+  } catch (error) {
+    console.error("Error loading scripts:", error);
+    throw error;
+  }
+}
+function waitForGlobal(globalName, timeout = 5e3) {
+  return new Promise((resolve, reject) => {
+    const startTime = Date.now();
+    function checkGlobal() {
+      const global = window[globalName];
+      if (global) {
+        resolve(global);
+        return;
+      }
+      if (Date.now() - startTime > timeout) {
+        reject(new Error(`Timeout waiting for global: ${globalName}`));
+        return;
+      }
+      setTimeout(checkGlobal, 100);
+    }
+    checkGlobal();
+  });
+}
+async function waitForGlobals(globalNames, timeout = 5e3) {
+  const promises = globalNames.map((name) => waitForGlobal(name, timeout));
+  await Promise.all(promises);
+}
+
 // src/components/Loading.tsx
 import { twMerge } from "tailwind-merge";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Loading = ({ className }) => /* @__PURE__ */ jsxs(
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Loading = ({ className }) => /* @__PURE__ */ jsx4(
   "div",
   {
     className: twMerge(
@@ -816,17 +2059,36 @@ var Loading = ({ className }) => /* @__PURE__ */ jsxs(
       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..." })
-    ]
+    children: /* @__PURE__ */ jsx4("div", { className: " flex justify-center items-center", children: /* @__PURE__ */ jsx4(
+      "svg",
+      {
+        className: "shaka-spinner-svg animate-spin h-12 w-12",
+        viewBox: "0 0 64 64",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /* @__PURE__ */ jsx4(
+          "circle",
+          {
+            className: "shaka-spinner-path",
+            cx: "32",
+            cy: "32",
+            r: "28",
+            strokeWidth: "4",
+            strokeLinecap: "round",
+            stroke: "currentColor",
+            fill: "none",
+            strokeDasharray: "176",
+            strokeDashoffset: "120"
+          }
+        )
+      }
+    ) })
   }
 );
 
 // 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(
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var ErrorScreen = ({ title, description }) => /* @__PURE__ */ jsx5("div", { className: "w-full h-full md:rounded-2xl! aspect-video bg-black flex", children: /* @__PURE__ */ jsxs3("div", { className: "bg-[#151515] text-white w-full h-full flex justify-center items-center", children: [
+  /* @__PURE__ */ jsx5(
     "svg",
     {
       className: "w-24 h-24 m-6",
@@ -836,7 +2098,7 @@ var ErrorScreen = ({ title, description }) => /* @__PURE__ */ jsx2("div", { clas
       style: { width: 96 },
       viewBox: "0 0 24 24",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsx5(
         "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",
@@ -846,66 +2108,22 @@ var ErrorScreen = ({ title, description }) => /* @__PURE__ */ jsx2("div", { clas
       )
     }
   ),
-  /* @__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." })
+  /* @__PURE__ */ jsxs3("div", { children: [
+    /* @__PURE__ */ jsx5("h3", { className: "text-2xl mb-2", children: title || "Playback Error" }),
+    /* @__PURE__ */ jsx5("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  .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');
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Title = ({ title }) => /* @__PURE__ */ jsx6("div", { className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4", children: /* @__PURE__ */ jsx6("h2", { className: "text-white text-xl font-semibold", children: title }) });
 
 // src/Player.tsx
-import { twMerge as twMerge2 } from "tailwind-merge";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var Player = forwardRef(
   ({
     src,
+    managedMode = false,
     autoPlay = false,
     loop = false,
     muted = false,
@@ -917,25 +2135,48 @@ var Player = forwardRef(
     shakaConfig,
     drmConfig,
     muxConfig,
+    system73Config,
     imaConfig,
     chromecastConfig,
     qualityConfig,
     seekbarConfig,
+    iconSizes,
     events,
+    locale = "en",
     containerClassName,
-    ...props
+    liveThresholdSeconds = 15,
+    publicKey,
+    auth,
+    ...videoProps
   }, ref) => {
     const videoRef = useRef8(null);
     const containerRef = useRef8(null);
-    const adContainerRef = useRef8(null);
+    const [isScriptsLoaded, setIsScriptsLoaded] = useState3(false);
+    const [isInitialLoading, setIsInitialLoading] = useState3(true);
+    const [bfResetKey, setBfResetKey] = useState3(0);
+    const hasPlaylist = !!src && (typeof src === "string" || !!(src.url || src.drm?.widevine?.playlistUrl || src.drm?.playready?.playlistUrl || src.drm?.fairplay?.playlistUrl));
     useImperativeHandle(ref, () => videoRef.current, []);
-    const { playerRef, initializePlayer, destroyPlayer } = useShakePlayer({
+    const { playerRef, initializePlayer, loadManifest, destroyPlayer, isRetrying } = useShakaPlayer({
       src,
       shakaConfig,
       drmConfig,
       onError: events?.onError,
-      onPlayerReady: events?.onPlayerReady
+      onPlayerReady: events?.onPlayerReady,
+      muxConfig,
+      onMuxReady: events?.onMuxReady,
+      onMuxDataUpdate: events?.onMuxDataUpdate,
+      publicKey,
+      mottoToken: auth?.mottoToken,
+      hasAds: !!imaConfig?.adTagUrl,
+      hasSystem73: !!system73Config?.apiKey,
+      apiToken: auth?.apiToken
     });
+    const {
+      initializeMux,
+      updateMuxData,
+      handleMuxError,
+      destroyMux
+    } = useMuxAnalytics(playerRef, muxConfig, events?.onMuxReady, events?.onMuxDataUpdate);
     const {
       getAvailableQualities,
       setQuality,
@@ -948,12 +2189,11 @@ var Player = forwardRef(
       skipDuration,
       shouldShowSkipControls
     } = useSkipControls(videoRef, events?.onSkipBack, events?.onSkipForward);
-    const {
-      initializeMux,
-      updateMuxData,
-      handleMuxError,
-      destroyMux
-    } = useMuxAnalytics(playerRef, muxConfig, events?.onMuxReady, events?.onMuxDataUpdate);
+    useKeyboardControls(videoRef, {
+      skipBack,
+      skipForward,
+      enabled: true
+    });
     const { setupEventListeners, cleanupEventListeners } = useEventHandlers(videoRef, {
       onPlay: events?.onPlay,
       onPause: events?.onPause,
@@ -969,109 +2209,230 @@ var Player = forwardRef(
       chromecastConfig,
       seekbarConfig,
       events?.onSkipBack,
-      events?.onSkipForward
+      events?.onSkipForward,
+      iconSizes,
+      locale
     );
-    const { isLive, isVisible: isLiveBadgeVisible } = useLiveBadge(playerRef, {
-      enabled: true,
-      onLiveStateChange: (isLive2) => {
-        events?.onLiveStateChange?.(isLive2);
-      }
-    });
-    useLiveIndicator(containerRef, {
+    const { getLiveStatus, seekToLiveEdge } = useLiveIndicator(containerRef, playerRef, {
       enabled: true,
       indicatorColor: "#ff0000",
       indicatorSize: 8,
-      showPulseAnimation: true
+      showPulseAnimation: true,
+      liveThresholdSeconds,
+      onLiveStatusChange: events?.onLiveStatusChange
     });
-    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 { setupAdEventListeners, cleanupAdEventListeners } = useAdEvents(playerRef, {
+      onAdStart: events?.onAdStart,
+      onAdComplete: events?.onAdComplete,
+      onAdError: events?.onAdError,
+      onAdSkipped: events?.onAdSkipped,
+      onAdPaused: events?.onAdPaused,
+      onAdResumed: events?.onAdResumed,
+      onAdProgress: events?.onAdProgress,
+      onAllAdsCompleted: events?.onAllAdsCompleted
+    });
+    const initializeSystem73 = useCallback9((playerConfig) => {
+      if (!system73Config?.apiKey || !window.S73ShakaPlayerWrapper) {
+        return null;
       }
-    };
-    const initializeChromecast = () => {
-      if (!chromecastConfig?.enabled) {
+      console.log("Initializing System73 SDK...");
+      try {
+        const s73Config = {
+          apiKey: system73Config.apiKey,
+          contentSteeringEndpoint: system73Config.contentSteeringEndpoint,
+          channelId: system73Config.channelId
+        };
+        const wrapper = window.S73ShakaPlayerWrapper(s73Config, { shaka: shaka3 });
+        wrapper.wrapPlayerConfig(playerConfig);
+        console.log("System73 SDK initialized with config:", s73Config);
+        return wrapper;
+      } catch (error) {
+        console.error("Error initializing System73 SDK:", error);
+        return null;
+      }
+    }, [system73Config]);
+    const initializeAds = useCallback9(async () => {
+      if (!imaConfig?.adTagUrl || !playerRef.current || !videoRef.current || !uiRef.current) {
+        return;
+      }
+      if (!window.google?.ima) {
+        console.error("Google IMA SDK not available when trying to initialize ads");
         return;
       }
       try {
-        if (events?.onCastStateChange) {
-          setTimeout(() => events.onCastStateChange(false), 100);
+        const player = playerRef.current;
+        const video = videoRef.current;
+        const ui = uiRef.current;
+        const controls2 = ui.getControls();
+        const container = controls2.getClientSideAdContainer();
+        const adManager = player.getAdManager();
+        if (!adManager) {
+          console.error("Ad manager not available");
+          return;
         }
+        const google = window.google;
+        let adsRenderingSettings = null;
+        if (imaConfig.adsRenderingSettings) {
+          adsRenderingSettings = imaConfig.adsRenderingSettings;
+        } else if (autoPlay) {
+          adsRenderingSettings = new google.ima.AdsRenderingSettings();
+          adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
+        }
+        adManager.initClientSide(container, video, adsRenderingSettings);
+        const adsRequest = new google.ima.AdsRequest();
+        adsRequest.adTagUrl = imaConfig.adTagUrl;
+        adManager.requestClientSideAds(adsRequest);
+        setupAdEventListeners();
+        await new Promise((resolve) => setTimeout(resolve, 1e3));
+        await loadManifest();
       } catch (error) {
-        console.warn("Chromecast initialization failed:", error);
+        console.error("Error initializing ads:", error);
       }
-    };
+    }, [imaConfig, autoPlay, setupAdEventListeners, loadManifest]);
+    useEffect4(() => {
+      const loadRequiredScripts = async () => {
+        try {
+          const scriptLoaders = getRequiredScriptLoaders(!!imaConfig?.adTagUrl, !!system73Config?.apiKey);
+          await loadScripts(scriptLoaders);
+          const globalsToWait = [];
+          if (imaConfig?.adTagUrl) {
+            globalsToWait.push("google");
+          }
+          if (system73Config?.apiKey) {
+            globalsToWait.push("S73ShakaPlayerWrapper");
+          }
+          if (globalsToWait.length > 0) {
+            await waitForGlobals(globalsToWait);
+          }
+          setIsScriptsLoaded(true);
+        } catch (error) {
+          console.error("Error loading required scripts:", error);
+          setIsScriptsLoaded(true);
+        }
+      };
+      loadRequiredScripts();
+    }, [imaConfig?.adTagUrl, system73Config?.apiKey]);
+    useEffect4(() => {
+      const onPageShow = (e) => {
+        if (e && e.persisted) {
+          setBfResetKey((k) => k + 1);
+        }
+      };
+      window.addEventListener("pageshow", onPageShow);
+      return () => window.removeEventListener("pageshow", onPageShow);
+    }, []);
     useEffect4(() => {
       const video = videoRef.current;
-      if (!video) return;
+      if (!video || !isScriptsLoaded) return;
       const initialize = async () => {
         try {
+          console.log("\u{1F680} [Player] Starting initialization...");
+          setIsInitialLoading(true);
+          let system73Wrapper = null;
+          if (system73Config?.apiKey && window.S73ShakaPlayerWrapper) {
+            console.log("\u{1F4E6} [System73] Step 1: Initializing System73 wrapper with config");
+            const playerConfig = { ...shakaConfig };
+            system73Wrapper = initializeSystem73(playerConfig);
+            if (system73Wrapper) {
+              shakaConfig = playerConfig;
+              console.log("\u2705 [System73] Step 1 complete: Wrapper created and config modified");
+            }
+          }
+          console.log("\u{1F3AC} [Shaka] Step 2: Initializing Shaka Player (auto-load:", !system73Config?.apiKey && !imaConfig?.adTagUrl, ")");
           await initializePlayer(video);
+          console.log("\u2705 [Shaka] Step 2 complete: Player initialized");
+          if (system73Wrapper && playerRef.current) {
+            console.log("\u{1F517} [System73] Step 3: Wrapping Shaka player with System73");
+            system73Wrapper.wrapPlayer(playerRef.current);
+            console.log("\u2705 [System73] Step 3 complete: Player wrapped");
+            if (!imaConfig?.adTagUrl) {
+              console.log("\u{1F4FA} [System73] Step 4: Loading manifest");
+              await loadManifest();
+              console.log("\u2705 [System73] Step 4 complete: Manifest loaded");
+            } else {
+              console.log("\u23ED\uFE0F  [System73] Skipping manifest load - ads will handle it");
+            }
+          }
+          console.log("\u{1F4CB} [Player] Setting up event listeners and quality tracking");
           setupEventListeners();
           const cleanupQuality = setupQualityTracking();
           configureQuality();
+          console.log("\u{1F3A8} [UI] Initializing Shaka UI");
           await initializeUI();
-          initializeMux();
-          initializeAds();
-          initializeChromecast();
+          console.log("\u2705 [UI] UI initialized");
+          if (imaConfig?.adTagUrl && window.google?.ima) {
+            console.log("\u{1F4E2} [Ads] Initializing ads (will load manifest after VAST fetch)");
+            await initializeAds();
+            console.log("\u2705 [Ads] Ads initialized and manifest loaded");
+          }
+          console.log("\u2728 [Player] Initialization complete!");
         } catch (error) {
-          console.error("Error during player initialization:", error);
+          console.error("\u274C [Player] Error during initialization:", error);
           handleMuxError(error);
         }
       };
       initialize();
       return () => {
         cleanupEventListeners();
+        cleanupAdEventListeners();
         destroyUI();
         destroyMux();
         destroyPlayer();
       };
-    }, [
-      src,
-      initializePlayer,
-      setupEventListeners,
-      setupQualityTracking,
-      configureQuality,
-      initializeUI,
-      initializeMux,
-      cleanupEventListeners,
-      destroyUI,
-      destroyMux,
-      destroyPlayer,
-      handleMuxError,
-      playerRef
-    ]);
+    }, [managedMode ? hasPlaylist : src, isScriptsLoaded, bfResetKey, managedMode]);
+    useEffect4(() => {
+      const video = videoRef.current;
+      if (!video) return;
+      const onLoadStart = () => {
+        setIsInitialLoading(true);
+      };
+      const onCanPlay = () => {
+        setIsInitialLoading(false);
+      };
+      const onPlaying = () => {
+        setIsInitialLoading(false);
+      };
+      video.addEventListener("loadstart", onLoadStart);
+      video.addEventListener("canplay", onCanPlay);
+      video.addEventListener("playing", onPlaying);
+      return () => {
+        video.removeEventListener("loadstart", onLoadStart);
+        video.removeEventListener("canplay", onCanPlay);
+        video.removeEventListener("playing", onPlaying);
+      };
+    }, []);
     useEffect4(() => {
       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]);
+    }, [autoPlay, loop, muted, poster, imaConfig?.adTagUrl]);
+    useEffect4(() => {
+      const video = videoRef.current;
+      if (!video) return;
+      video.controls = false;
+      video.setAttribute("controls", "false");
+      video.removeAttribute("controls");
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === "attributes" && mutation.attributeName === "controls") {
+            if (video.hasAttribute("controls")) {
+              video.removeAttribute("controls");
+              video.controls = false;
+            }
+          }
+        });
+      });
+      observer.observe(video, {
+        attributes: true,
+        attributeFilter: ["controls"]
+      });
+      return () => {
+        observer.disconnect();
+      };
+    }, []);
     useImperativeHandle(ref, () => ({
       ...videoRef.current,
       // Custom methods for quality control
@@ -1082,27 +2443,30 @@ var Player = forwardRef(
       skipForward,
       // Mux methods
       updateMuxData,
+      // Live status methods
+      getLiveStatus,
+      seekToLiveEdge,
       // Access to underlying instances
       getPlayer: () => playerRef.current,
       getMuxMonitor: () => null
-    }), [getAvailableQualities, setQuality, skipBack, skipForward, updateMuxData]);
+    }), [getAvailableQualities, setQuality, skipBack, skipForward, updateMuxData, getLiveStatus, seekToLiveEdge]);
     const isResponsive = !width && !height;
-    const containerClasses = twMerge2(containerClassName, "motto-video-container");
+    const containerClasses = twMerge2(containerClassName, "motto-video-container relative bg-[#111111] ");
     const containerStyle = isResponsive ? {
       aspectRatio: aspectRatio.toString()
     } : { width, height };
-    const videoClasses = isResponsive ? "motto-video-responsive" : "w-full h-full ";
+    const videoClasses = isResponsive ? "motto-video-responsive w-full" : "w-full h-full ";
     const videoStyle = isResponsive ? {} : { width, height };
+    const filteredVideoProps = { ...videoProps };
+    delete filteredVideoProps.controls;
     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(
+          /* @__PURE__ */ jsx7(
             "video",
             {
               ref: videoRef,
@@ -1111,17 +2475,11 @@ var Player = forwardRef(
               height: isResponsive ? void 0 : height,
               style: videoStyle,
               controls: false,
-              ...props
+              playsInline: true,
+              ...filteredVideoProps
             }
           ),
-          /* @__PURE__ */ jsx5(LiveBadge, { isVisible: isLiveBadgeVisible }),
-          imaConfig && /* @__PURE__ */ jsx5(
-            "div",
-            {
-              ref: adContainerRef,
-              className: "absolute top-0 left-0 w-full h-full pointer-events-auto"
-            }
-          )
+          isInitialLoading && /* @__PURE__ */ jsx7("div", { className: "absolute inset-0 flex items-center justify-center z-20 pointer-events-none", children: /* @__PURE__ */ jsx7(Loading, { className: "bg-transparent" }) })
         ]
       }
     );
@@ -1135,11 +2493,11 @@ import { twMerge as twMerge3 } from "tailwind-merge";
 import { useQuery } from "@tanstack/react-query";
 
 // src/api/video.ts
-var fetchVideoData = async (videoId, publicKey, mottoToken) => {
+var fetchVideoData = async (videoId, publicKey, mottoToken, adsEnabled = false, locale = "en") => {
   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 }));
+  url.searchParams.set("message", JSON.stringify({ videoId, enable_ads: adsEnabled, locale }));
   const response = await fetch(url, {
     method: "GET",
     headers: {
@@ -1153,14 +2511,14 @@ var fetchVideoData = async (videoId, publicKey, mottoToken) => {
   const data = await response.json();
   return data.video;
 };
-async function fetchVideosList(publicKey, videoIds, mottoToken, skip = 0, limit = 0) {
+async function fetchVideosList(publicKey, videoIds, mottoToken, skip = 0, limit = 0, adsEnabled = true, locale = "en") {
   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 }));
+  url.searchParams.set("message", JSON.stringify({ videoIds, enable_ads: adsEnabled, locale }));
   const response = await fetch(url.toString(), {
     method: "GET",
     headers: {
@@ -1271,7 +2629,7 @@ var getErrorType = (error, video) => {
 };
 
 // src/messages/useMessages.tsx
-import { useState as useState3, useEffect as useEffect5 } from "react";
+import { useState as useState4, useEffect as useEffect5 } from "react";
 
 // src/messages/en.json
 var en_default = {
@@ -1573,8 +2931,8 @@ var getBrowserLanguage = () => {
   return availableLanguages[language] ? language : "en";
 };
 var useMessages = (locale) => {
-  const [language, setLanguage] = useState3("en");
-  const [translations, setTranslations] = useState3(availableLanguages.en);
+  const [language, setLanguage] = useState4("en");
+  const [translations, setTranslations] = useState4(availableLanguages.en);
   useEffect5(() => {
     const lang = !!availableLanguages?.[locale] ? locale : getBrowserLanguage();
     ;
@@ -1601,11 +2959,10 @@ var useMessages = (locale) => {
 var useMessages_default = useMessages;
 
 // src/Video.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var Video = ({
   videoId,
   publicKey,
-  mottoToken,
   videoData: providedVideoData,
   refetchInterval = 0,
   playerName,
@@ -1613,7 +2970,10 @@ var Video = ({
   events,
   children,
   className,
+  auth,
+  settings,
   queryOptions = {},
+  adsEnabled = false,
   ...props
 }) => {
   const {
@@ -1622,8 +2982,8 @@ var Video = ({
     error,
     refetch
   } = useQuery({
-    queryKey: ["video", videoId, publicKey, mottoToken],
-    queryFn: () => fetchVideoData(videoId, publicKey, mottoToken),
+    queryKey: ["video", videoId, publicKey, auth?.mottoToken, adsEnabled, locale],
+    queryFn: () => fetchVideoData(videoId, publicKey, auth?.mottoToken, adsEnabled, locale),
     enabled: !!videoId && !!publicKey && !providedVideoData,
     refetchInterval: refetchInterval > 0 ? refetchInterval : false,
     staleTime: queryOptions.staleTime ?? 5 * 60 * 1e3,
@@ -1636,16 +2996,17 @@ var Video = ({
   const video = providedVideoData || data;
   const { t } = useMessages_default(locale);
   const activePlaylist = findHLSPlaylist(video);
-  const hlsUrl = activePlaylist?.url;
+  const activePlaylistUrl = activePlaylist?.url ?? activePlaylist?.drm?.widevine?.playlistUrl ?? activePlaylist?.drm?.playready?.playlistUrl ?? activePlaylist?.drm?.fairplay?.playlistUrl;
+  const activePlaylistHasUrl = !!activePlaylistUrl;
   useEffect6(() => {
     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, {}) }) });
+    return /* @__PURE__ */ jsx8("div", { className: twMerge3("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsx8("div", { className: "relative w-full h-full bg-[#151515]", children: /* @__PURE__ */ jsx8(Loading, {}) }) });
   }
-  if (!isLoading && video && !hlsUrl && events?.onEmptyPlaylists) {
+  if (!isLoading && video && !activePlaylistHasUrl && events?.onEmptyPlaylists) {
     events.onEmptyPlaylists();
   }
   if (error || video?.error) {
@@ -1656,8 +3017,8 @@ var Video = ({
     }
     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(
+    return /* @__PURE__ */ jsx8("div", { className: twMerge3("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsxs5("div", { className: "relative w-full h-full", children: [
+      /* @__PURE__ */ jsx8(
         ErrorScreen,
         {
           title,
@@ -1667,31 +3028,35 @@ var Video = ({
       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 || "" }),
+  if (!activePlaylist || !activePlaylistHasUrl) {
+    return /* @__PURE__ */ jsx8("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__ */ jsx8(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(
+  return /* @__PURE__ */ jsx8("div", { className: twMerge3("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsx8("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx8(
     Player,
     {
       ...props,
-      src: hlsUrl,
+      src: activePlaylist,
+      managedMode: true,
       className: twMerge3("video-player-container", className),
       events,
+      locale,
       containerClassName: "w-full h-full",
+      publicKey,
+      auth,
+      ...adsEnabled && video?.ad?.adTagUrl ? { imaConfig: { adTagUrl: video?.ad?.adTagUrl } } : {},
       children
     }
   ) }) });
 };
 
 // src/Event.tsx
-import { useCallback as useCallback7, useEffect as useEffect7, useState as useState4 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect7, 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";
+import { Fragment, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var Event = ({
   publicKey,
   eventId,
@@ -1704,6 +3069,7 @@ var Event = ({
   settings,
   auth,
   queryOptions = {},
+  adsEnabled = false,
   ...props
 }) => {
   const {
@@ -1721,16 +3087,16 @@ var Event = ({
     retry: queryOptions.retry ?? 3,
     retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
   });
-  const [activePlaylist, setActivePlaylist] = useState4();
-  const [activeVideoId, setActiveVideoId] = useState4();
+  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),
+    queryKey: ["videos-list", publicKey, videoIds, auth?.mottoToken, adsEnabled, locale],
+    queryFn: () => fetchVideosList(publicKey, videoIds, auth?.mottoToken, 0, 0, adsEnabled, locale),
     enabled: !!publicKey && videoIds.length > 0,
     refetchInterval: activePlaylist === null ? 3e4 : false,
     staleTime: queryOptions.staleTime ?? 5 * 60 * 1e3,
@@ -1738,7 +3104,7 @@ var Event = ({
     retry: queryOptions.retry ?? 3,
     retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
   });
-  const [loadingApisState, setLoadingApisState] = useState4(true);
+  const [loadingApisState, setLoadingApisState] = useState5(true);
   useEffect7(() => {
     if (videosData !== void 0) {
       setLoadingApisState(false);
@@ -1748,9 +3114,11 @@ var Event = ({
       if (videosWithPlaylists.length > 0) {
         let hlsPlaylistFound = false;
         for (const video of videosWithPlaylists) {
-          const hlsPlaylist = findHLSPlaylist(video);
-          if (hlsPlaylist?.url) {
-            setActivePlaylist(hlsPlaylist.url);
+          const activePlaylist2 = findHLSPlaylist(video);
+          const activePlaylistUrl = activePlaylist2?.url ?? activePlaylist2?.drm?.widevine?.playlistUrl ?? activePlaylist2?.drm?.playready?.playlistUrl ?? activePlaylist2?.drm?.fairplay?.playlistUrl;
+          const activePlaylistHasUrl = !!activePlaylistUrl;
+          if (activePlaylist2 && activePlaylistHasUrl) {
+            setActivePlaylist(activePlaylist2);
             setActiveVideoId(video.id);
             hlsPlaylistFound = true;
             break;
@@ -1784,12 +3152,17 @@ var Event = ({
       }
     }
   }, [activeVideoId, videosData, events]);
-  const [error, setError] = useState4(null);
-  const [loadingPlaylist, setLoadingPlaylist] = useState4(true);
+  const [error, setError] = useState5(null);
+  const [loadingPlaylist, setLoadingPlaylist] = useState5(true);
   const videosDataError = videosData?.some((video) => !!video.error);
   useEffect7(() => {
-    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");
+    if (isEventLoading || videosIsLoading || loadingApisState) {
+      return;
+    }
+    const hasPlayablePlaylist = Boolean(activePlaylist);
+    if (eventError || videosError || videosDataError && !hasPlayablePlaylist) {
+      const firstVideoError = videosData?.find((video) => !!video.error)?.error;
+      const errorObj = eventError || videosError || firstVideoError && new Error(firstVideoError) || new Error("default");
       setError(errorObj);
       if (events?.onError) {
         events.onError(errorObj);
@@ -1797,7 +3170,17 @@ var Event = ({
     } else {
       setError(null);
     }
-  }, [eventError, videosError, videosDataError, videosData, events]);
+  }, [
+    eventError,
+    videosError,
+    videosDataError,
+    videosData,
+    events,
+    activePlaylist,
+    isEventLoading,
+    videosIsLoading,
+    loadingApisState
+  ]);
   useEffect7(() => {
     const eventLoadedWithNoVideos = !isEventLoading && eventData && eventData.videoIds && (!eventData.videoIds || eventData?.videoIds?.length === 0) && !loadingApisState;
     const allApisLoadedWithPotentialVideos = !isEventLoading && !videosIsLoading && eventData && !loadingApisState;
@@ -1808,7 +3191,7 @@ var Event = ({
   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(
+    return /* @__PURE__ */ jsx9("div", { className: twMerge4("md:rounded-2xl overflow-hidden aspect-video", className), children: /* @__PURE__ */ jsx9("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx9(
       ErrorScreen,
       {
         title,
@@ -1820,22 +3203,28 @@ var Event = ({
     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, {}) }) });
+    return /* @__PURE__ */ jsx9("div", { className: twMerge4("", className), children: /* @__PURE__ */ jsx9("div", { className: "relative w-full aspect-video bg-[#151515]", children: /* @__PURE__ */ jsx9(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(
+    console.log("activeVideo?.ad?.adTagUrl", activeVideo?.ad?.adTagUrl);
+    return /* @__PURE__ */ jsxs6("div", { className: twMerge4("", className), children: [
+      /* @__PURE__ */ jsx9("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx9(
         Player,
         {
           ...props,
           src: activePlaylist,
-          className: twMerge4(className, "peer"),
+          managedMode: true,
+          className: twMerge4(className, "peer aspect-video"),
           events,
-          containerClassName: "w-full h-full"
+          locale,
+          containerClassName: "w-full h-full",
+          publicKey,
+          auth,
+          ...adsEnabled && activeVideo ? { imaConfig: { adTagUrl: activeVideo?.ad?.adTagUrl } } : {}
         }
-      ),
-      !hideTitle && eventData && /* @__PURE__ */ jsx7(
+      ) }),
+      !hideTitle && eventData && /* @__PURE__ */ jsx9(
         TitleAndDescription,
         {
           title: eventData.title,
@@ -1844,10 +3233,10 @@ var Event = ({
           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(
+    return /* @__PURE__ */ jsx9("div", { className: twMerge4("", className), children: /* @__PURE__ */ jsx9("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx9(
       PreEvent,
       {
         event: eventData,
@@ -1869,7 +3258,7 @@ function PreEvent({
 }) {
   const date = new Date(event.startTime);
   const now = /* @__PURE__ */ new Date();
-  const [remainingTime, setRemainingTime] = useState4(
+  const [remainingTime, setRemainingTime] = useState5(
     date.getTime() - now.getTime()
   );
   const shouldBeStarted = remainingTime < 0;
@@ -1884,29 +3273,28 @@ function PreEvent({
     }, 1e3);
     return () => clearInterval(interval);
   }, [date, remainingTime]);
-  const renderCountdown = useCallback7(() => {
+  const renderCountdown = useCallback10(() => {
     if (shouldBeStarted) {
-      return /* @__PURE__ */ jsx7("span", { className: "text-base-content text-xl", children: t("EVENT_NOT_STARTED") });
+      return /* @__PURE__ */ jsx9("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: [
+    return /* @__PURE__ */ jsxs6("div", { className: "grid grid-flow-col gap-1 md: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(
+        /* @__PURE__ */ jsx9("span", { className: "font-mono text-lg md:text-5xl", children: /* @__PURE__ */ jsx9(
           "span",
           {
-            style: { "--value": days },
             "aria-live": "polite",
             "aria-label": days.toString(),
-            children: days?.toString()?.padStart(2, "0")
+            children: days.toString()
           }
         ) }),
-        /* @__PURE__ */ jsx7("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("DAYS") })
+        /* @__PURE__ */ jsx9("span", { className: "text-xs 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(
+        /* @__PURE__ */ jsx9("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ jsx9(
           "span",
           {
             style: { "--value": hours },
@@ -1915,10 +3303,10 @@ function PreEvent({
             children: hours?.toString()?.padStart(2, "0")
           }
         ) }),
-        /* @__PURE__ */ jsx7("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("HOURS") })
+        /* @__PURE__ */ jsx9("span", { className: "text-xs 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(
+        /* @__PURE__ */ jsx9("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ jsx9(
           "span",
           {
             style: { "--value": minutes },
@@ -1927,10 +3315,10 @@ function PreEvent({
             children: minutes?.toString()?.padStart(2, "0")
           }
         ) }),
-        /* @__PURE__ */ jsx7("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("MINUTES") })
+        /* @__PURE__ */ jsx9("span", { className: "text-xs 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(
+        /* @__PURE__ */ jsx9("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ jsx9(
           "span",
           {
             style: { "--value": seconds },
@@ -1939,12 +3327,12 @@ function PreEvent({
             children: seconds?.toString()?.padStart(2, "0")
           }
         ) }),
-        /* @__PURE__ */ jsx7("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("SECONDS") })
+        /* @__PURE__ */ jsx9("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("SECONDS") })
       ] })
     ] });
   }, [remainingTime, shouldBeStarted, t]);
-  return /* @__PURE__ */ jsx7(Fragment, { children: event?.posterUrl ? /* @__PURE__ */ jsxs6(Fragment, { children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx9(Fragment, { children: event?.posterUrl ? /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx9(
       "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",
@@ -1953,10 +3341,10 @@ function PreEvent({
           backgroundRepeat: "no-repeat",
           backgroundSize: "cover"
         },
-        children: /* @__PURE__ */ jsx7("div", { className: "relative z-10", children: renderCountdown() })
+        children: /* @__PURE__ */ jsx9("div", { className: "relative z-10", children: renderCountdown() })
       }
     ),
-    !hideTitle && /* @__PURE__ */ jsx7(
+    !hideTitle && /* @__PURE__ */ jsx9(
       TitleAndDescription,
       {
         title: event.title,
@@ -1966,17 +3354,17 @@ function PreEvent({
       }
     )
   ] }) : /* @__PURE__ */ jsxs6(Fragment, { children: [
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx9(
       "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: /* @__PURE__ */ jsx7("div", { className: "relative z-10", children: renderCountdown() })
+        children: /* @__PURE__ */ jsx9("div", { className: "relative z-10", children: renderCountdown() })
       }
     ),
-    !hideTitle && /* @__PURE__ */ jsx7(
+    !hideTitle && /* @__PURE__ */ jsx9(
       TitleAndDescription,
       {
         title: event.title,
@@ -1995,8 +3383,8 @@ var TitleAndDescription = ({
   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: [
+    /* @__PURE__ */ jsx9("div", { className: "text-base md:text-xl m-event-title text-base-content font-medium", children: title }),
+    startTime ? /* @__PURE__ */ jsxs6("div", { className: "text-xs md:text-base text-base-content/70 m-event-start-time", children: [
       new Date(startTime || "").toLocaleDateString(locale || "default", {
         month: "long",
         year: "numeric",
@@ -2009,15 +3397,15 @@ var TitleAndDescription = ({
         minute: "2-digit"
       })
     ] }) : null,
-    description && /* @__PURE__ */ jsx7("div", { className: "text-xs md:text-sm text-base-content/60 uppercase", children: description })
+    description && /* @__PURE__ */ jsx9("div", { className: "text-xs md:text-xs text-base-content/60 uppercase", children: description })
   ] });
 };
 
 // src/CreativeWork.tsx
-import { useEffect as useEffect8, useState as useState5 } from "react";
+import { useEffect as useEffect8, 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";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var CreativeWork = ({
   publicKey,
   creativeWorkId,
@@ -2030,6 +3418,7 @@ var CreativeWork = ({
   settings,
   auth,
   queryOptions = {},
+  adsEnabled = false,
   ...props
 }) => {
   const {
@@ -2047,17 +3436,17 @@ var CreativeWork = ({
     retry: queryOptions.retry ?? 3,
     retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
   });
-  const [activePlaylist, setActivePlaylist] = useState5();
-  const [activeVideoId, setActiveVideoId] = useState5();
-  const [showCountDown, setShowCountDown] = useState5(false);
+  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),
+    queryKey: ["videos-list", publicKey, videoIds, auth?.mottoToken, adsEnabled, locale],
+    queryFn: () => fetchVideosList(publicKey, videoIds, auth?.mottoToken, 0, 0, adsEnabled, locale),
     enabled: !!publicKey && videoIds.length > 0,
     refetchInterval: activePlaylist === null ? 3e4 : false,
     staleTime: queryOptions.staleTime ?? 5 * 60 * 1e3,
@@ -2065,7 +3454,7 @@ var CreativeWork = ({
     retry: queryOptions.retry ?? 3,
     retryDelay: queryOptions.retryDelay ?? ((attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4))
   });
-  const [loadingApisState, setLoadingApisState] = useState5(true);
+  const [loadingApisState, setLoadingApisState] = useState6(true);
   useEffect8(() => {
     if (videosData !== void 0) {
       setLoadingApisState(false);
@@ -2075,9 +3464,11 @@ var CreativeWork = ({
       if (videosWithPlaylists.length > 0) {
         let hlsPlaylistFound = false;
         for (const video of videosWithPlaylists) {
-          const hlsPlaylist = findHLSPlaylist(video);
-          if (hlsPlaylist?.url) {
-            setActivePlaylist(hlsPlaylist.url);
+          const activePlaylist2 = findHLSPlaylist(video);
+          const activePlaylistUrl = activePlaylist2?.url ?? activePlaylist2?.drm?.widevine?.playlistUrl ?? activePlaylist2?.drm?.playready?.playlistUrl ?? activePlaylist2?.drm?.fairplay?.playlistUrl;
+          const activePlaylistHasUrl = !!activePlaylistUrl;
+          if (activePlaylist2 && activePlaylistHasUrl) {
+            setActivePlaylist(activePlaylist2);
             setActiveVideoId(video.id);
             hlsPlaylistFound = true;
             break;
@@ -2114,7 +3505,7 @@ var CreativeWork = ({
       }
     }
   }, [activeVideoId, videosData, events]);
-  const [error, setError] = useState5(null);
+  const [error, setError] = useState6(null);
   const videosDataError = videosData?.some((video) => !!video.error);
   useEffect8(() => {
     if (creativeWorkError || videosError || videosDataError) {
@@ -2130,7 +3521,7 @@ var CreativeWork = ({
   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(
+    return /* @__PURE__ */ jsx10("div", { className: twMerge5("", className), children: /* @__PURE__ */ jsx10("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx10(
       ErrorScreen,
       {
         title,
@@ -2138,7 +3529,7 @@ var CreativeWork = ({
       }
     ) }) });
   }
-  const [loadingPlaylist, setLoadingPlaylist] = useState5(true);
+  const [loadingPlaylist, setLoadingPlaylist] = useState6(true);
   useEffect8(() => {
     const creativeWorkLoadedWithNoVideos = !isCreativeWorkLoading && creativeWorkData && creativeWorkData.videoIds && creativeWorkData.videoIds.length === 0;
     const creativeWorkLoadedWithNoData = !isCreativeWorkLoading && creativeWorkData && !creativeWorkData.videoIds;
@@ -2160,10 +3551,10 @@ var CreativeWork = ({
     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, {}) }) });
+    return /* @__PURE__ */ jsx10("div", { className: twMerge5("", className), children: /* @__PURE__ */ jsx10("div", { className: "relative w-full aspect-video bg-[#151515]", children: /* @__PURE__ */ jsx10(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(
+    return /* @__PURE__ */ jsx10("div", { className: twMerge5("", className), children: /* @__PURE__ */ jsx10("div", { className: "relative w-full h-full bg-base-200 text-base-content flex justify-center items-center flex-col", children: /* @__PURE__ */ jsx10(
       PreCreativeWork,
       {
         creativeWork: creativeWorkData,
@@ -2176,20 +3567,25 @@ var CreativeWork = ({
   }
   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(
+    return /* @__PURE__ */ jsx10("div", { className: twMerge5("", className), children: /* @__PURE__ */ jsxs7("div", { className: "relative w-full h-full", children: [
+      /* @__PURE__ */ jsx10(
         Player,
         {
           ...props,
-          className: twMerge5(className, "peer"),
+          className: twMerge5(className, "peer aspect-video"),
+          managedMode: true,
           events: {
             ...events
           },
           src: activePlaylist,
-          containerClassName: "w-full h-full"
+          locale,
+          containerClassName: "w-full h-full",
+          publicKey,
+          auth,
+          ...adsEnabled && activeVideo?.ad?.adTagUrl ? { imaConfig: { adTagUrl: activeVideo?.ad?.adTagUrl } } : {}
         }
       ),
-      !hideTitle && /* @__PURE__ */ jsx8(
+      !hideTitle && /* @__PURE__ */ jsx10(
         TitleAndDescription2,
         {
           title: creativeWorkData?.title || "",
@@ -2202,7 +3598,7 @@ var CreativeWork = ({
     ] }) });
   }
   if (loadingPlaylist) {
-    return /* @__PURE__ */ jsx8(Loading, {});
+    return /* @__PURE__ */ jsx10("div", { className: twMerge5("", className), children: /* @__PURE__ */ jsx10("div", { className: "relative w-full aspect-video bg-[#151515]", children: /* @__PURE__ */ jsx10(Loading, {}) }) });
   }
   return null;
 };
@@ -2215,7 +3611,7 @@ function PreCreativeWork({
 }) {
   const date = new Date(creativeWork.releaseTime);
   const now = /* @__PURE__ */ new Date();
-  const [remainingTime, setRemainingTime] = useState5(
+  const [remainingTime, setRemainingTime] = useState6(
     date.getTime() - now.getTime()
   );
   const shouldBeStarted = remainingTime < 0;
@@ -2234,27 +3630,26 @@ function PreCreativeWork({
   }, [date, remainingTime]);
   const renderCountdown = () => {
     if (shouldBeStarted) {
-      return /* @__PURE__ */ jsx8("span", { className: "text-base-content text-xl", children: t("EVENT_NOT_STARTED") });
+      return /* @__PURE__ */ jsx10("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: [
+    return /* @__PURE__ */ jsxs7("div", { className: "grid grid-flow-col md:gap-5 gap-1 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(
+        /* @__PURE__ */ jsx10("span", { className: "font-mono text-lg md:text-5xl", children: /* @__PURE__ */ jsx10(
           "span",
           {
-            style: { "--value": days },
             "aria-live": "polite",
             "aria-label": days.toString(),
-            children: days?.toString()?.padStart(2, "0")
+            children: days.toString()
           }
         ) }),
-        /* @__PURE__ */ jsx8("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("DAYS") })
+        /* @__PURE__ */ jsx10("span", { className: "text-xs 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(
+        /* @__PURE__ */ jsx10("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ jsx10(
           "span",
           {
             style: { "--value": hours },
@@ -2263,10 +3658,10 @@ function PreCreativeWork({
             children: hours?.toString()?.padStart(2, "0")
           }
         ) }),
-        /* @__PURE__ */ jsx8("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("HOURS") })
+        /* @__PURE__ */ jsx10("span", { className: "text-xs 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(
+        /* @__PURE__ */ jsx10("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ jsx10(
           "span",
           {
             style: { "--value": minutes },
@@ -2275,10 +3670,10 @@ function PreCreativeWork({
             children: minutes?.toString()?.padStart(2, "0")
           }
         ) }),
-        /* @__PURE__ */ jsx8("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("MINUTES") })
+        /* @__PURE__ */ jsx10("span", { className: "text-xs 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(
+        /* @__PURE__ */ jsx10("span", { className: "countdown font-mono text-lg md:text-5xl", children: /* @__PURE__ */ jsx10(
           "span",
           {
             style: { "--value": seconds },
@@ -2287,7 +3682,7 @@ function PreCreativeWork({
             children: seconds?.toString()?.padStart(2, "0")
           }
         ) }),
-        /* @__PURE__ */ jsx8("span", { className: "text-sm uppercase tracking-widest mt-1", children: t("SECONDS") })
+        /* @__PURE__ */ jsx10("span", { className: "text-xs uppercase tracking-widest mt-1", children: t("SECONDS") })
       ] })
     ] });
   };
@@ -2300,12 +3695,12 @@ function PreCreativeWork({
           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() })
+          backgroundImageUrl && /* @__PURE__ */ jsx10("div", { className: "absolute inset-0 bg-black bg-opacity-40" }),
+          /* @__PURE__ */ jsx10("div", { className: "relative z-10", children: renderCountdown() })
         ]
       }
     ),
-    !hideTitle && /* @__PURE__ */ jsx8(
+    !hideTitle && /* @__PURE__ */ jsx10(
       TitleAndDescription2,
       {
         title: creativeWork.title,
@@ -2324,7 +3719,7 @@ var TitleAndDescription2 = ({
   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 }),
+    /* @__PURE__ */ jsx10("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",
@@ -2338,13 +3733,13 @@ var TitleAndDescription2 = ({
         minute: "2-digit"
       })
     ] }) : null,
-    description && /* @__PURE__ */ jsx8("div", { className: "text-xs md:text-sm text-base-content/60 uppercase", children: description })
+    description && /* @__PURE__ */ jsx10("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";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -2358,13 +3753,16 @@ var queryClient = new QueryClient({
   }
 });
 var QueryProvider = ({ children }) => {
-  return /* @__PURE__ */ jsx9(QueryClientProvider, { client: queryClient, children });
+  return /* @__PURE__ */ jsx11(QueryClientProvider, { client: queryClient, children });
 };
 export {
+  BigPlayIcon,
   CreativeWork,
   Event,
   Player,
   QueryProvider,
+  SkipBackIcon,
+  SkipForwardIcon,
   Video,
   queryClient
 };