@videojs/react 0.1.0-preview.6 → 0.1.0-preview.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/{VolumeSlider-CWpLFzdJ.js → VolumeSlider-B8x0_k2f.js} +338 -203
  2. package/dist/VolumeSlider-B8x0_k2f.js.map +1 -0
  3. package/dist/{frosted-JuY6ZaAp.js → frosted-BYwSN7-8.js} +34 -38
  4. package/dist/frosted-BYwSN7-8.js.map +1 -0
  5. package/dist/index.d.ts +9 -37
  6. package/dist/index.d.ts.map +1 -1
  7. package/dist/index.js +3 -3
  8. package/dist/{minimal-pUeFJF1F.js → minimal-CVRiJIWD.js} +35 -38
  9. package/dist/minimal-CVRiJIWD.js.map +1 -0
  10. package/dist/skins/frosted.css +1 -1
  11. package/dist/skins/frosted.js +2 -2
  12. package/dist/skins/minimal.css +1 -1
  13. package/dist/skins/minimal.js +2 -2
  14. package/package.json +4 -5
  15. package/dist/VolumeSlider-CWpLFzdJ.js.map +0 -1
  16. package/dist/frosted-JuY6ZaAp.js.map +0 -1
  17. package/dist/minimal-pUeFJF1F.js.map +0 -1
package/dist/skins/minimal.css CHANGED
@@ -1,4 +1,4 @@
1
1
  /*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
2
2
  @layer base{.vjs *,.vjs :after,.vjs :before,.vjs ::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}.vjs ::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}.vjs,:host{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}.vjs hr{height:0;color:inherit;border-top-width:1px}.vjs abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.vjs h1,.vjs h2,.vjs h3,.vjs h4,.vjs h5,.vjs h6{font-size:inherit;font-weight:inherit}.vjs a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}.vjs b,.vjs strong{font-weight:bolder}.vjs code,.vjs kbd,.vjs samp,.vjs pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}.vjs small{font-size:80%}.vjs sub,.vjs sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}.vjs sub{bottom:-.25em}.vjs sup{top:-.5em}.vjs table{text-indent:0;border-color:inherit;border-collapse:collapse}.vjs :-moz-focusring{outline:auto}.vjs progress{vertical-align:baseline}.vjs summary{display:list-item}.vjs ol,.vjs ul,.vjs menu{list-style:none}.vjs img,.vjs svg,.vjs video,.vjs canvas,.vjs audio,.vjs iframe,.vjs embed,.vjs object{vertical-align:middle;display:block}.vjs img,.vjs video{max-width:100%;height:auto}.vjs button,.vjs input,.vjs select,.vjs optgroup,.vjs textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}.vjs ::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}.vjs :where(select:is([multiple],[size])) optgroup{font-weight:bolder}.vjs :where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}.vjs ::file-selector-button{margin-inline-end:4px}.vjs ::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){.vjs ::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){.vjs ::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}.vjs textarea{resize:vertical}.vjs ::-webkit-search-decoration{-webkit-appearance:none}.vjs ::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}.vjs ::-webkit-datetime-edit{display:inline-flex}.vjs ::-webkit-datetime-edit-fields-wrapper{padding:0}.vjs ::-webkit-datetime-edit{padding-block:0}.vjs ::-webkit-datetime-edit-year-field{padding-block:0}.vjs ::-webkit-datetime-edit-month-field{padding-block:0}.vjs ::-webkit-datetime-edit-day-field{padding-block:0}.vjs ::-webkit-datetime-edit-hour-field{padding-block:0}.vjs ::-webkit-datetime-edit-minute-field{padding-block:0}.vjs ::-webkit-datetime-edit-second-field{padding-block:0}.vjs ::-webkit-datetime-edit-millisecond-field{padding-block:0}.vjs ::-webkit-datetime-edit-meridiem-field{padding-block:0}.vjs ::-webkit-calendar-picker-indicator{line-height:1}.vjs :-moz-ui-invalid{box-shadow:none}.vjs button,.vjs input:where([type=button],[type=reset],[type=submit]){appearance:button}.vjs ::file-selector-button{appearance:button}.vjs ::-webkit-inner-spin-button{height:auto}.vjs ::-webkit-outer-spin-button{height:auto}.vjs [hidden]:where(:not([hidden=until-found])){display:none!important}}
3
3
  /*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
4
- @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-text-shadow-color:initial;--tw-text-shadow-alpha:100%;--tw-content:""}}}@layer theme{:root,:host{--vjs-color-blue-500:oklch(62.3% .214 259.815);--vjs-color-black:#000;--vjs-color-white:#fff;--vjs-spacing:.25rem;--vjs-text-xs:.75rem;--vjs-text-xs--line-height:calc(1/.75);--vjs-text-sm:.875rem;--vjs-text-sm--line-height:calc(1.25/.875);--vjs-radius-md:.375rem;--vjs-ease-out:cubic-bezier(0,0,.2,1);--vjs-blur-sm:8px;--vjs-blur-3xl:64px;--vjs-default-transition-duration:.15s;--vjs-default-transition-timing-function:cubic-bezier(.4,0,.2,1)}}@layer base,components;@layer utilities{.vjs\:\@container\/controls{container:controls/inline-size}.vjs\:\@container\/root{container:root/inline-size}.vjs\:pointer-events-none{pointer-events:none}.vjs\:absolute{position:absolute}.vjs\:relative{position:relative}.vjs\:inset-0{inset:calc(var(--vjs-spacing)*0)}.vjs\:inset-x-0{inset-inline:calc(var(--vjs-spacing)*0)}.vjs\:inset-x-3{inset-inline:calc(var(--vjs-spacing)*3)}.vjs\:bottom-0{bottom:calc(var(--vjs-spacing)*0)}.vjs\:bottom-3{bottom:calc(var(--vjs-spacing)*3)}.vjs\:isolate{isolation:isolate}.vjs\:z-10{z-index:10}.vjs\:z-20{z-index:20}.vjs\:mx-2{margin-inline:calc(var(--vjs-spacing)*2)}.vjs\:contents{display:contents}.vjs\:flex{display:flex}.vjs\:grid{display:grid}.vjs\:hidden{display:none}.vjs\:size-2\.5{width:calc(var(--vjs-spacing)*2.5);height:calc(var(--vjs-spacing)*2.5)}.vjs\:size-3{width:calc(var(--vjs-spacing)*3);height:calc(var(--vjs-spacing)*3)}.vjs\:flex-1{flex:1}.vjs\:shrink-0{flex-shrink:0}.vjs\:origin-bottom{transform-origin:bottom}.vjs\:origin-center{transform-origin:50%}.vjs\:translate-y-full{--tw-translate-y:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}.vjs\:scale-70{--tw-scale-x:70%;--tw-scale-y:70%;--tw-scale-z:70%;scale:var(--tw-scale-x)var(--tw-scale-y)}.vjs\:scale-90{--tw-scale-x:90%;--tw-scale-y:90%;--tw-scale-z:90%;scale:var(--tw-scale-x)var(--tw-scale-y)}.vjs\:cursor-pointer{cursor:pointer}.vjs\:flex-col{flex-direction:column}.vjs\:items-center{align-items:center}.vjs\:justify-center{justify-content:center}.vjs\:gap-0\.5{gap:calc(var(--vjs-spacing)*.5)}.vjs\:gap-1\.5{gap:calc(var(--vjs-spacing)*1.5)}.vjs\:gap-3{gap:calc(var(--vjs-spacing)*3)}.vjs\:gap-3\.5{gap:calc(var(--vjs-spacing)*3.5)}.vjs\:overflow-clip{overflow:clip}.vjs\:rounded{border-radius:.25rem}.vjs\:rounded-\[inherit\]{border-radius:inherit}.vjs\:rounded-full{border-radius:3.40282e38px}.vjs\:rounded-md{border-radius:var(--vjs-radius-md)}.vjs\:bg-black{background-color:var(--vjs-color-black)}.vjs\:bg-transparent{background-color:#0000}.vjs\:bg-white,.vjs\:bg-white\/10{background-color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:bg-white\/10{background-color:color-mix(in oklab,var(--vjs-color-white)10%,transparent)}}.vjs\:bg-white\/20{background-color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:bg-white\/20{background-color:color-mix(in oklab,var(--vjs-color-white)20%,transparent)}}.vjs\:bg-gradient-to-t{--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.vjs\:from-black\/50{--tw-gradient-from:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:from-black\/50{--tw-gradient-from:color-mix(in oklab,var(--vjs-color-black)50%,transparent)}}.vjs\:from-black\/50{--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))}.vjs\:from-black\/70{--tw-gradient-from:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:from-black\/70{--tw-gradient-from:color-mix(in oklab,var(--vjs-color-black)70%,transparent)}}.vjs\:from-black\/70{--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))}.vjs\:via-black\/20{--tw-gradient-via:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:via-black\/20{--tw-gradient-via:color-mix(in oklab,var(--vjs-color-black)20%,transparent)}}.vjs\:via-black\/20{--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.vjs\:via-black\/50{--tw-gradient-via:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:via-black\/50{--tw-gradient-via:color-mix(in oklab,var(--vjs-color-black)50%,transparent)}}.vjs\:via-black\/50{--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.vjs\:via-\[7\.5rem\]{--tw-gradient-via-position:7.5rem}.vjs\:to-transparent{--tw-gradient-to:transparent;--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))}.vjs\:p-1{padding:calc(var(--vjs-spacing)*1)}.vjs\:p-2{padding:calc(var(--vjs-spacing)*2)}.vjs\:p-2\.5{padding:calc(var(--vjs-spacing)*2.5)}.vjs\:px-1{padding-inline:calc(var(--vjs-spacing)*1)}.vjs\:px-1\.5{padding-inline:calc(var(--vjs-spacing)*1.5)}.vjs\:px-2{padding-inline:calc(var(--vjs-spacing)*2)}.vjs\:px-2\.5{padding-inline:calc(var(--vjs-spacing)*2.5)}.vjs\:px-3{padding-inline:calc(var(--vjs-spacing)*3)}.vjs\:py-1{padding-block:calc(var(--vjs-spacing)*1)}.vjs\:py-2{padding-block:calc(var(--vjs-spacing)*2)}.vjs\:py-3{padding-block:calc(var(--vjs-spacing)*3)}.vjs\:pt-10{padding-top:calc(var(--vjs-spacing)*10)}.vjs\:pb-3{padding-bottom:calc(var(--vjs-spacing)*3)}.vjs\:text-xs{font-size:var(--vjs-text-xs);line-height:var(--tw-leading,var(--vjs-text-xs--line-height))}.vjs\:text-\[0\.8125rem\]{font-size:.8125rem}.vjs\:whitespace-nowrap{white-space:nowrap}.vjs\:text-white,.vjs\:text-white\/50{color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:text-white\/50{color:color-mix(in oklab,var(--vjs-color-white)50%,transparent)}}.vjs\:text-white\/90{color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:text-white\/90{color:color-mix(in oklab,var(--vjs-color-white)90%,transparent)}}.vjs\:tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.vjs\:opacity-0{opacity:0}.vjs\:shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.vjs\:shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.vjs\:ring,.vjs\:ring-1{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.vjs\:shadow-black\/5{--tw-shadow-color:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:shadow-black\/5{--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--vjs-color-black)5%,transparent)var(--tw-shadow-alpha),transparent)}}.vjs\:shadow-black\/15{--tw-shadow-color:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:shadow-black\/15{--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--vjs-color-black)15%,transparent)var(--tw-shadow-alpha),transparent)}}.vjs\:ring-black\/5{--tw-ring-color:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:ring-black\/5{--tw-ring-color:color-mix(in oklab,var(--vjs-color-black)5%,transparent)}}.vjs\:ring-black\/10{--tw-ring-color:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:ring-black\/10{--tw-ring-color:color-mix(in oklab,var(--vjs-color-black)10%,transparent)}}.vjs\:ring-white\/10{--tw-ring-color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:ring-white\/10{--tw-ring-color:color-mix(in oklab,var(--vjs-color-white)10%,transparent)}}.vjs\:outline-0{outline-style:var(--tw-outline-style);outline-width:0}.vjs\:-outline-offset-2{outline-offset:calc(2px*-1)}.vjs\:blur-sm{--tw-blur:blur(var(--vjs-blur-sm));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,)}.vjs\:backdrop-blur-3xl{--tw-backdrop-blur:blur(var(--vjs-blur-3xl));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.vjs\:backdrop-brightness-90{--tw-backdrop-brightness:brightness(90%);-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.vjs\:backdrop-saturate-150{--tw-backdrop-saturate:saturate(150%);-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.vjs\:transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--vjs-default-transition-timing-function));transition-duration:var(--tw-duration,var(--vjs-default-transition-duration))}.vjs\:transition-\[color\,background\,outline-offset\]{transition-property:color,background,outline-offset;transition-timing-function:var(--tw-ease,var(--vjs-default-transition-timing-function));transition-duration:var(--tw-duration,var(--vjs-default-transition-duration))}.vjs\:transition-\[opacity\,height\,width\]{transition-property:opacity,height,width;transition-timing-function:var(--tw-ease,var(--vjs-default-transition-timing-function));transition-duration:var(--tw-duration,var(--vjs-default-transition-duration))}.vjs\:transition-\[opacity\,scale\]{transition-property:opacity,scale;transition-timing-function:var(--tw-ease,var(--vjs-default-transition-timing-function));transition-duration:var(--tw-duration,var(--vjs-default-transition-duration))}.vjs\:transition-\[outline-offset\]{transition-property:outline-offset;transition-timing-function:var(--tw-ease,var(--vjs-default-transition-timing-function));transition-duration:var(--tw-duration,var(--vjs-default-transition-duration))}.vjs\:transition-\[transform\,scale\,opacity\,filter\]{transition-property:transform,scale,opacity,filter;transition-timing-function:var(--tw-ease,var(--vjs-default-transition-timing-function));transition-duration:var(--tw-duration,var(--vjs-default-transition-duration))}.vjs\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--vjs-default-transition-timing-function));transition-duration:var(--tw-duration,var(--vjs-default-transition-duration))}.vjs\:delay-500{transition-delay:.5s}.vjs\:duration-200{--tw-duration:.2s;transition-duration:.2s}.vjs\:duration-300{--tw-duration:.3s;transition-duration:.3s}.vjs\:ease-out{--tw-ease:var(--vjs-ease-out);transition-timing-function:var(--vjs-ease-out)}.vjs\:will-change-\[transform\,filter\,opacity\]{will-change:transform,filter,opacity}.vjs\:will-change-\[transform\,scale\,filter\,opacity\]{will-change:transform,scale,filter,opacity}.vjs\:select-none{-webkit-user-select:none;user-select:none}.vjs\:text-shadow-2xs\/20{--tw-text-shadow-alpha:20%;text-shadow:0px 1px 0px var(--tw-text-shadow-color,oklab(0% 0 0/.2))}.vjs\:text-shadow-2xs\/25{--tw-text-shadow-alpha:25%;text-shadow:0px 1px 0px var(--tw-text-shadow-color,oklab(0% 0 0/.25))}.vjs\:ring-inset{--tw-ring-inset:inset}.vjs\:group-focus-within\/slider\:opacity-100:is(:where(.vjs\:group\/slider):focus-within *){opacity:1}@media (hover:hover){.vjs\:group-hover\/root\:translate-y-0:is(:where(.vjs\:group\/root):hover *){--tw-translate-y:calc(var(--vjs-spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.vjs\:group-hover\/root\:scale-100:is(:where(.vjs\:group\/root):hover *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.vjs\:group-hover\/root\:opacity-100:is(:where(.vjs\:group\/root):hover *){opacity:1}.vjs\:group-hover\/root\:blur-none:is(:where(.vjs\:group\/root):hover *){--tw-blur: ;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,)}.vjs\:group-hover\/root\:delay-0:is(:where(.vjs\:group\/root):hover *){transition-delay:0s}.vjs\:group-hover\/root\:duration-75:is(:where(.vjs\:group\/root):hover *){--tw-duration:75ms;transition-duration:75ms}.vjs\:group-hover\/root\:duration-100:is(:where(.vjs\:group\/root):hover *){--tw-duration:.1s;transition-duration:.1s}.vjs\:group-hover\/slider\:scale-100:is(:where(.vjs\:group\/slider):hover *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.vjs\:group-hover\/slider\:opacity-100:is(:where(.vjs\:group\/slider):hover *){opacity:1}}.vjs\:group-focus-visible\/slider\:outline-2:is(:where(.vjs\:group\/slider):focus-visible *){outline-style:var(--tw-outline-style);outline-width:2px}.vjs\:group-focus-visible\/slider\:outline-offset-6:is(:where(.vjs\:group\/slider):focus-visible *){outline-offset:6px}.vjs\:group-focus-visible\/slider\:outline-blue-500:is(:where(.vjs\:group\/slider):focus-visible *){outline-color:var(--vjs-color-blue-500)}.vjs\:group-focus-visible\/slider\:outline-white:is(:where(.vjs\:group\/slider):focus-visible *){outline-color:var(--vjs-color-white)}.vjs\:group-active\/slider\:size-3:is(:where(.vjs\:group\/slider):active *){width:calc(var(--vjs-spacing)*3);height:calc(var(--vjs-spacing)*3)}.vjs\:before\:pointer-events-none:before{content:var(--tw-content);pointer-events:none}.vjs\:before\:absolute:before{content:var(--tw-content);position:absolute}.vjs\:before\:inset-px:before{content:var(--tw-content);inset:1px}.vjs\:before\:z-10:before{content:var(--tw-content);z-index:10}.vjs\:before\:rounded-\[inherit\]:before{content:var(--tw-content);border-radius:inherit}.vjs\:before\:ring-1:before{content:var(--tw-content);--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.vjs\:before\:ring-white\/15:before{content:var(--tw-content);--tw-ring-color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:before\:ring-white\/15:before{--tw-ring-color:color-mix(in oklab,var(--vjs-color-white)15%,transparent)}}.vjs\:before\:ring-inset:before{content:var(--tw-content);--tw-ring-inset:inset}.vjs\:after\:pointer-events-none:after{content:var(--tw-content);pointer-events:none}.vjs\:after\:absolute:after{content:var(--tw-content);position:absolute}.vjs\:after\:inset-0:after{content:var(--tw-content);inset:calc(var(--vjs-spacing)*0)}.vjs\:after\:z-10:after{content:var(--tw-content);z-index:10}.vjs\:after\:rounded-\[inherit\]:after{content:var(--tw-content);border-radius:inherit}.vjs\:after\:ring:after,.vjs\:after\:ring-1:after{content:var(--tw-content);--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.vjs\:after\:ring-black\/10:after{content:var(--tw-content);--tw-ring-color:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:after\:ring-black\/10:after{--tw-ring-color:color-mix(in oklab,var(--vjs-color-black)10%,transparent)}}.vjs\:after\:ring-black\/15:after{content:var(--tw-content);--tw-ring-color:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:after\:ring-black\/15:after{--tw-ring-color:color-mix(in oklab,var(--vjs-color-black)15%,transparent)}}.vjs\:after\:ring-black\/20:after{content:var(--tw-content);--tw-ring-color:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:after\:ring-black\/20:after{--tw-ring-color:color-mix(in oklab,var(--vjs-color-black)20%,transparent)}}.vjs\:after\:ring-inset:after{content:var(--tw-content);--tw-ring-inset:inset}@media (hover:hover){.vjs\:hover\:bg-white\/10:hover{background-color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:hover\:bg-white\/10:hover{background-color:color-mix(in oklab,var(--vjs-color-white)10%,transparent)}}.vjs\:hover\:text-white:hover,.vjs\:hover\:text-white\/80:hover{color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:hover\:text-white\/80:hover{color:color-mix(in oklab,var(--vjs-color-white)80%,transparent)}}.vjs\:hover\:no-underline:hover{text-decoration-line:none}}.vjs\:focus-visible\:bg-white\/10:focus-visible{background-color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:focus-visible\:bg-white\/10:focus-visible{background-color:color-mix(in oklab,var(--vjs-color-white)10%,transparent)}}.vjs\:focus-visible\:text-white:focus-visible,.vjs\:focus-visible\:text-white\/80:focus-visible{color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:focus-visible\:text-white\/80:focus-visible{color:color-mix(in oklab,var(--vjs-color-white)80%,transparent)}}.vjs\:focus-visible\:no-underline:focus-visible{text-decoration-line:none}.vjs\:focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.vjs\:focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.vjs\:focus-visible\:outline-blue-500:focus-visible{outline-color:var(--vjs-color-blue-500)}.vjs\:focus-visible\:outline-white:focus-visible{outline-color:var(--vjs-color-white)}.vjs\:active\:size-3:active{width:calc(var(--vjs-spacing)*3);height:calc(var(--vjs-spacing)*3)}.vjs\:disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.vjs\:disabled\:opacity-50:disabled{opacity:.5}.vjs\:disabled\:grayscale:disabled{--tw-grayscale:grayscale(100%);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,)}.vjs\:has-\[\[aria-expanded\=\"true\"\]\]\:translate-y-0:has([aria-expanded=true]){--tw-translate-y:calc(var(--vjs-spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.vjs\:has-\[\[aria-expanded\=\"true\"\]\]\:scale-100:has([aria-expanded=true]){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.vjs\:has-\[\[aria-expanded\=\"true\"\]\]\:opacity-100:has([aria-expanded=true]){opacity:1}.vjs\:has-\[\[aria-expanded\=\"true\"\]\]\:blur-none:has([aria-expanded=true]){--tw-blur: ;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,)}.vjs\:has-\[\[aria-expanded\=\"true\"\]\]\:delay-0:has([aria-expanded=true]){transition-delay:0s}.vjs\:has-\[\[aria-expanded\=\"true\"\]\]\:duration-75:has([aria-expanded=true]){--tw-duration:75ms;transition-duration:75ms}.vjs\:has-\[\[aria-expanded\=\"true\"\]\]\:duration-100:has([aria-expanded=true]){--tw-duration:.1s;transition-duration:.1s}.vjs\:has-\[\[data-paused\]\]\:translate-y-0:has([data-paused]){--tw-translate-y:calc(var(--vjs-spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.vjs\:has-\[\[data-paused\]\]\:scale-100:has([data-paused]){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.vjs\:has-\[\[data-paused\]\]\:opacity-100:has([data-paused]){opacity:1}.vjs\:has-\[\[data-paused\]\]\:blur-none:has([data-paused]){--tw-blur: ;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,)}.vjs\:has-\[\[data-paused\]\]\:delay-0:has([data-paused]){transition-delay:0s}.vjs\:has-\[\[data-paused\]\]\:duration-75:has([data-paused]){--tw-duration:75ms;transition-duration:75ms}.vjs\:has-\[\[data-paused\]\]\:duration-100:has([data-paused]){--tw-duration:.1s;transition-duration:.1s}.vjs\:has-\[\+\.controls_\[aria-expanded\=\"true\"\]\]\:opacity-100:has(+.controls [aria-expanded=true]){opacity:1}.vjs\:has-\[\+\.controls_\[aria-expanded\=\"true\"\]\]\:delay-0:has(+.controls [aria-expanded=true]){transition-delay:0s}.vjs\:has-\[\+\.controls_\[aria-expanded\=\"true\"\]\]\:duration-75:has(+.controls [aria-expanded=true]){--tw-duration:75ms;transition-duration:75ms}.vjs\:has-\[\+\.controls_\[aria-expanded\=\"true\"\]\]\:duration-100:has(+.controls [aria-expanded=true]){--tw-duration:.1s;transition-duration:.1s}.vjs\:has-\[\+\.controls_\[data-paused\]\]\:opacity-100:has(+.controls [data-paused]){opacity:1}.vjs\:has-\[\+\.controls_\[data-paused\]\]\:delay-0:has(+.controls [data-paused]){transition-delay:0s}.vjs\:has-\[\+\.controls_\[data-paused\]\]\:duration-75:has(+.controls [data-paused]){--tw-duration:75ms;transition-duration:75ms}.vjs\:has-\[\+\.controls_\[data-paused\]\]\:duration-100:has(+.controls [data-paused]){--tw-duration:.1s;transition-duration:.1s}.vjs\:aria-busy\:pointer-events-none[aria-busy=true]{pointer-events:none}.vjs\:aria-busy\:cursor-not-allowed[aria-busy=true]{cursor:not-allowed}.vjs\:aria-expanded\:bg-white\/10[aria-expanded=true]{background-color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:aria-expanded\:bg-white\/10[aria-expanded=true]{background-color:color-mix(in oklab,var(--vjs-color-white)10%,transparent)}}.vjs\:aria-expanded\:text-white[aria-expanded=true],.vjs\:aria-expanded\:text-white\/80[aria-expanded=true]{color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:aria-expanded\:text-white\/80[aria-expanded=true]{color:color-mix(in oklab,var(--vjs-color-white)80%,transparent)}}.vjs\:data-\[ending-style\]\:scale-0[data-ending-style]{--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x)var(--tw-scale-y)}.vjs\:data-\[ending-style\]\:opacity-0[data-ending-style]{opacity:0}.vjs\:data-\[ending-style\]\:blur-sm[data-ending-style]{--tw-blur:blur(var(--vjs-blur-sm));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,)}.vjs\:data-\[instant\]\:duration-0[data-instant]{--tw-duration:0s;transition-duration:0s}.vjs\:data-\[starting-style\]\:scale-0[data-starting-style]{--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x)var(--tw-scale-y)}.vjs\:data-\[starting-style\]\:opacity-0[data-starting-style]{opacity:0}.vjs\:data-\[starting-style\]\:blur-sm[data-starting-style]{--tw-blur:blur(var(--vjs-blur-sm));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,)}@media (prefers-contrast:more){.vjs\:contrast-more\:bg-black\/90{background-color:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:contrast-more\:bg-black\/90{background-color:color-mix(in oklab,var(--vjs-color-black)90%,transparent)}}.vjs\:contrast-more\:from-black\/75{--tw-gradient-from:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:contrast-more\:from-black\/75{--tw-gradient-from:color-mix(in oklab,var(--vjs-color-black)75%,transparent)}}.vjs\:contrast-more\:from-black\/75{--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))}.vjs\:contrast-more\:ring-black{--tw-ring-color:var(--vjs-color-black)}.vjs\:contrast-more\:after\:ring-white\/20:after{content:var(--tw-content);--tw-ring-color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:contrast-more\:after\:ring-white\/20:after{--tw-ring-color:color-mix(in oklab,var(--vjs-color-white)20%,transparent)}}}@container root (min-width:80rem){.vjs\:\@7xl\/root\:text-sm{font-size:var(--vjs-text-sm);line-height:var(--tw-leading,var(--vjs-text-sm--line-height))}}@media (prefers-color-scheme:dark){.vjs\:dark\:before\:ring-0:before{content:var(--tw-content);--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(0px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.vjs\:dark\:after\:ring-white\/10:after{content:var(--tw-content);--tw-ring-color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:dark\:after\:ring-white\/10:after{--tw-ring-color:color-mix(in oklab,var(--vjs-color-white)10%,transparent)}}.vjs\:dark\:after\:ring-white\/20:after{content:var(--tw-content);--tw-ring-color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:dark\:after\:ring-white\/20:after{--tw-ring-color:color-mix(in oklab,var(--vjs-color-white)20%,transparent)}}}.vjs\:\[\&_\.arrow-1\]\:-translate-x-px .arrow-1{--tw-translate-x:-1px;translate:var(--tw-translate-x)var(--tw-translate-y)}.vjs\:\[\&_\.arrow-1\]\:translate-x-px .arrow-1{--tw-translate-x:1px;translate:var(--tw-translate-x)var(--tw-translate-y)}.vjs\:\[\&_\.arrow-1\]\:-translate-y-px .arrow-1{--tw-translate-y:-1px;translate:var(--tw-translate-x)var(--tw-translate-y)}@media (hover:hover){.vjs\:group-hover\/button\:\[\&_\.arrow-1\]\:translate-0:is(:where(.vjs\:group\/button):hover *) .arrow-1{--tw-translate-x:calc(var(--vjs-spacing)*0);--tw-translate-y:calc(var(--vjs-spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.vjs\:group-hover\/button\:\[\&_\.arrow-1\]\:-translate-x-px:is(:where(.vjs\:group\/button):hover *) .arrow-1{--tw-translate-x:-1px;translate:var(--tw-translate-x)var(--tw-translate-y)}.vjs\:group-hover\/button\:\[\&_\.arrow-1\]\:translate-x-px:is(:where(.vjs\:group\/button):hover *) .arrow-1{--tw-translate-x:1px;translate:var(--tw-translate-x)var(--tw-translate-y)}.vjs\:group-hover\/button\:\[\&_\.arrow-1\]\:-translate-y-px:is(:where(.vjs\:group\/button):hover *) .arrow-1{--tw-translate-y:-1px;translate:var(--tw-translate-x)var(--tw-translate-y)}}.vjs\:\[\&_\.arrow-2\]\:-translate-x-px .arrow-2{--tw-translate-x:-1px;translate:var(--tw-translate-x)var(--tw-translate-y)}.vjs\:\[\&_\.arrow-2\]\:translate-x-px .arrow-2{--tw-translate-x:1px;translate:var(--tw-translate-x)var(--tw-translate-y)}.vjs\:\[\&_\.arrow-2\]\:translate-y-px .arrow-2{--tw-translate-y:1px;translate:var(--tw-translate-x)var(--tw-translate-y)}@media (hover:hover){.vjs\:group-hover\/button\:\[\&_\.arrow-2\]\:translate-0:is(:where(.vjs\:group\/button):hover *) .arrow-2{--tw-translate-x:calc(var(--vjs-spacing)*0);--tw-translate-y:calc(var(--vjs-spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.vjs\:group-hover\/button\:\[\&_\.arrow-2\]\:-translate-x-px:is(:where(.vjs\:group\/button):hover *) .arrow-2{--tw-translate-x:-1px;translate:var(--tw-translate-x)var(--tw-translate-y)}.vjs\:group-hover\/button\:\[\&_\.arrow-2\]\:translate-x-px:is(:where(.vjs\:group\/button):hover *) .arrow-2{--tw-translate-x:1px;translate:var(--tw-translate-x)var(--tw-translate-y)}.vjs\:group-hover\/button\:\[\&_\.arrow-2\]\:translate-y-px:is(:where(.vjs\:group\/button):hover *) .arrow-2{--tw-translate-y:1px;translate:var(--tw-translate-x)var(--tw-translate-y)}}.vjs\:\[\&_\.fullscreen-enter-icon\]\:opacity-100 .fullscreen-enter-icon{opacity:1}.vjs\:\[\&_\.fullscreen-enter-tooltip\]\:inline .fullscreen-enter-tooltip{display:inline}.vjs\:\[\&_\.fullscreen-exit-icon\]\:opacity-0 .fullscreen-exit-icon{opacity:0}.vjs\:\[\&_\.fullscreen-exit-tooltip\]\:hidden .fullscreen-exit-tooltip,.vjs\:\[\&_\.icon\]\:hidden .icon{display:none}.vjs\:\[\&_\.icon\]\:shrink-0 .icon{flex-shrink:0}.vjs\:\[\&_\.icon\]\:shadow-black\/25 .icon{--tw-shadow-color:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:\[\&_\.icon\]\:shadow-black\/25 .icon{--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--vjs-color-black)25%,transparent)var(--tw-shadow-alpha),transparent)}}.vjs\:\[\&_\.icon\]\:shadow-black\/40 .icon{--tw-shadow-color:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:\[\&_\.icon\]\:shadow-black\/40 .icon{--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--vjs-color-black)40%,transparent)var(--tw-shadow-alpha),transparent)}}.vjs\:\[\&_\.icon\]\:drop-shadow-\[0_1px_0_var\(--tw-shadow-color\)\] .icon{--tw-drop-shadow-size:drop-shadow(0 1px 0 var(--tw-drop-shadow-color,var(--tw-shadow-color)));--tw-drop-shadow:var(--tw-drop-shadow-size);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,)}.vjs\:\[\&_\.icon\]\:transition-opacity .icon{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--vjs-default-transition-timing-function));transition-duration:var(--tw-duration,var(--vjs-default-transition-duration))}.vjs\:\[\&_\.icon\]\:duration-150 .icon{--tw-duration:.15s;transition-duration:.15s}.vjs\:\[\&_\.icon\]\:ease-linear .icon{--tw-ease:linear;transition-timing-function:linear}.vjs\:\[\&_\.icon\]\:\[grid-area\:1\/1\] .icon{grid-area:1/1}.vjs\:\[\&_\.pause-icon\]\:opacity-100 .pause-icon{opacity:1}.vjs\:\[\&_\.pause-tooltip\]\:inline .pause-tooltip{display:inline}.vjs\:\[\&_\.play-icon\]\:opacity-0 .play-icon{opacity:0}.vjs\:\[\&_\.play-tooltip\]\:hidden .play-tooltip{display:none}.vjs\:\[\&_path\]\:transition-transform path{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--vjs-default-transition-timing-function));transition-duration:var(--tw-duration,var(--vjs-default-transition-duration))}.vjs\:\[\&_video\]\:h-full video{height:100%}.vjs\:\[\&_video\]\:w-full video{width:100%}.vjs\:\[\&\:fullscreen\]\:rounded-none:fullscreen{border-radius:0}.vjs\:\[\&\[data-fullscreen\]_\.fullscreen-enter-icon\]\:opacity-0[data-fullscreen] .fullscreen-enter-icon{opacity:0}.vjs\:\[\&\[data-fullscreen\]_\.fullscreen-enter-tooltip\]\:hidden[data-fullscreen] .fullscreen-enter-tooltip{display:none}.vjs\:\[\&\[data-fullscreen\]_\.fullscreen-exit-icon\]\:opacity-100[data-fullscreen] .fullscreen-exit-icon{opacity:1}.vjs\:\[\&\[data-fullscreen\]_\.fullscreen-exit-tooltip\]\:inline[data-fullscreen] .fullscreen-exit-tooltip{display:inline}.vjs\:\[\&\[data-orientation\=\"horizontal\"\]\]\:h-1[data-orientation=horizontal]{height:calc(var(--vjs-spacing)*1)}.vjs\:\[\&\[data-orientation\=\"horizontal\"\]\]\:h-5[data-orientation=horizontal]{height:calc(var(--vjs-spacing)*5)}.vjs\:\[\&\[data-orientation\=\"horizontal\"\]\]\:h-\[0\.1875rem\][data-orientation=horizontal]{height:.1875rem}.vjs\:\[\&\[data-orientation\=\"horizontal\"\]\]\:w-full[data-orientation=horizontal]{width:100%}.vjs\:\[\&\[data-orientation\=\"horizontal\"\]\]\:min-w-20[data-orientation=horizontal]{min-width:calc(var(--vjs-spacing)*20)}@media (hover:hover){.vjs\:\[\&\[data-orientation\=\"horizontal\"\]\]\:hover\:cursor-ew-resize[data-orientation=horizontal]:hover{cursor:ew-resize}}.vjs\:\[\&\[data-orientation\=\"vertical\"\]\]\:h-18[data-orientation=vertical]{height:calc(var(--vjs-spacing)*18)}.vjs\:\[\&\[data-orientation\=\"vertical\"\]\]\:h-20[data-orientation=vertical]{height:calc(var(--vjs-spacing)*20)}.vjs\:\[\&\[data-orientation\=\"vertical\"\]\]\:w-1[data-orientation=vertical]{width:calc(var(--vjs-spacing)*1)}.vjs\:\[\&\[data-orientation\=\"vertical\"\]\]\:w-5[data-orientation=vertical]{width:calc(var(--vjs-spacing)*5)}.vjs\:\[\&\[data-orientation\=\"vertical\"\]\]\:w-\[0\.1875rem\][data-orientation=vertical]{width:.1875rem}@media (hover:hover){.vjs\:\[\&\[data-orientation\=\"vertical\"\]\]\:hover\:cursor-ns-resize[data-orientation=vertical]:hover{cursor:ns-resize}}.vjs\:\[\&\[data-paused\]_\.pause-icon\]\:opacity-0[data-paused] .pause-icon{opacity:0}.vjs\:\[\&\[data-paused\]_\.pause-tooltip\]\:hidden[data-paused] .pause-tooltip{display:none}.vjs\:\[\&\[data-paused\]_\.play-icon\]\:opacity-100[data-paused] .play-icon{opacity:1}.vjs\:\[\&\[data-paused\]_\.play-tooltip\]\:inline[data-paused] .play-tooltip,.vjs\:\[\&\[data-volume-level\=\"high\"\]_\.volume-high-icon\]\:inline[data-volume-level=high] .volume-high-icon,.vjs\:\[\&\[data-volume-level\=\"low\"\]_\.volume-low-icon\]\:inline[data-volume-level=low] .volume-low-icon,.vjs\:\[\&\[data-volume-level\=\"medium\"\]_\.volume-low-icon\]\:inline[data-volume-level=medium] .volume-low-icon,.vjs\:\[\&\[data-volume-level\=\"off\"\]_\.volume-off-icon\]\:inline[data-volume-level=off] .volume-off-icon{display:inline}}.vjs{font-family:inherit}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-text-shadow-color{syntax:"*";inherits:false}@property --tw-text-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-content{syntax:"*";inherits:false;initial-value:""}
4
+ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-text-shadow-color:initial;--tw-text-shadow-alpha:100%;--tw-content:""}}}@layer theme{:root,:host{--vjs-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--vjs-color-blue-500:oklch(62.3% .214 259.815);--vjs-color-black:#000;--vjs-color-white:#fff;--vjs-spacing:.25rem;--vjs-text-xs:.75rem;--vjs-text-xs--line-height:calc(1/.75);--vjs-text-sm:.875rem;--vjs-text-sm--line-height:calc(1.25/.875);--vjs-radius-md:.375rem;--vjs-ease-out:cubic-bezier(0,0,.2,1);--vjs-blur-sm:8px;--vjs-blur-3xl:64px;--vjs-default-transition-duration:.15s;--vjs-default-transition-timing-function:cubic-bezier(.4,0,.2,1)}}@layer base,components;@layer utilities{.vjs\:\@container\/controls{container:controls/inline-size}.vjs\:\@container\/root{container:root/inline-size}.vjs\:pointer-events-none{pointer-events:none}.vjs\:absolute{position:absolute}.vjs\:relative{position:relative}.vjs\:inset-0{inset:calc(var(--vjs-spacing)*0)}.vjs\:inset-x-0{inset-inline:calc(var(--vjs-spacing)*0)}.vjs\:inset-x-3{inset-inline:calc(var(--vjs-spacing)*3)}.vjs\:bottom-0{bottom:calc(var(--vjs-spacing)*0)}.vjs\:bottom-3{bottom:calc(var(--vjs-spacing)*3)}.vjs\:isolate{isolation:isolate}.vjs\:z-10{z-index:10}.vjs\:z-20{z-index:20}.vjs\:mx-2{margin-inline:calc(var(--vjs-spacing)*2)}.vjs\:contents{display:contents}.vjs\:flex{display:flex}.vjs\:grid{display:grid}.vjs\:hidden{display:none}.vjs\:size-2\.5{width:calc(var(--vjs-spacing)*2.5);height:calc(var(--vjs-spacing)*2.5)}.vjs\:size-3{width:calc(var(--vjs-spacing)*3);height:calc(var(--vjs-spacing)*3)}.vjs\:flex-1{flex:1}.vjs\:shrink-0{flex-shrink:0}.vjs\:origin-bottom{transform-origin:bottom}.vjs\:origin-center{transform-origin:50%}.vjs\:translate-y-full{--tw-translate-y:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}.vjs\:scale-70{--tw-scale-x:70%;--tw-scale-y:70%;--tw-scale-z:70%;scale:var(--tw-scale-x)var(--tw-scale-y)}.vjs\:scale-90{--tw-scale-x:90%;--tw-scale-y:90%;--tw-scale-z:90%;scale:var(--tw-scale-x)var(--tw-scale-y)}.vjs\:cursor-pointer{cursor:pointer}.vjs\:flex-col{flex-direction:column}.vjs\:items-center{align-items:center}.vjs\:justify-center{justify-content:center}.vjs\:gap-0\.5{gap:calc(var(--vjs-spacing)*.5)}.vjs\:gap-1\.5{gap:calc(var(--vjs-spacing)*1.5)}.vjs\:gap-3{gap:calc(var(--vjs-spacing)*3)}.vjs\:gap-3\.5{gap:calc(var(--vjs-spacing)*3.5)}.vjs\:overflow-clip{overflow:clip}.vjs\:rounded{border-radius:.25rem}.vjs\:rounded-\(--frosted-border-radius\,2rem\){border-radius:var(--frosted-border-radius,2rem)}.vjs\:rounded-\(--minimal-border-radius\,0\.75rem\){border-radius:var(--minimal-border-radius,.75rem)}.vjs\:rounded-\[inherit\]{border-radius:inherit}.vjs\:rounded-full{border-radius:3.40282e38px}.vjs\:rounded-md{border-radius:var(--vjs-radius-md)}.vjs\:bg-black{background-color:var(--vjs-color-black)}.vjs\:bg-transparent{background-color:#0000}.vjs\:bg-white,.vjs\:bg-white\/10{background-color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:bg-white\/10{background-color:color-mix(in oklab,var(--vjs-color-white)10%,transparent)}}.vjs\:bg-white\/20{background-color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:bg-white\/20{background-color:color-mix(in oklab,var(--vjs-color-white)20%,transparent)}}.vjs\:bg-gradient-to-t{--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.vjs\:from-black\/50{--tw-gradient-from:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:from-black\/50{--tw-gradient-from:color-mix(in oklab,var(--vjs-color-black)50%,transparent)}}.vjs\:from-black\/50{--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))}.vjs\:from-black\/70{--tw-gradient-from:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:from-black\/70{--tw-gradient-from:color-mix(in oklab,var(--vjs-color-black)70%,transparent)}}.vjs\:from-black\/70{--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))}.vjs\:via-black\/20{--tw-gradient-via:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:via-black\/20{--tw-gradient-via:color-mix(in oklab,var(--vjs-color-black)20%,transparent)}}.vjs\:via-black\/20{--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.vjs\:via-black\/50{--tw-gradient-via:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:via-black\/50{--tw-gradient-via:color-mix(in oklab,var(--vjs-color-black)50%,transparent)}}.vjs\:via-black\/50{--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.vjs\:via-\[7\.5rem\]{--tw-gradient-via-position:7.5rem}.vjs\:to-transparent{--tw-gradient-to:transparent;--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))}.vjs\:p-1{padding:calc(var(--vjs-spacing)*1)}.vjs\:p-2{padding:calc(var(--vjs-spacing)*2)}.vjs\:p-2\.5{padding:calc(var(--vjs-spacing)*2.5)}.vjs\:px-1{padding-inline:calc(var(--vjs-spacing)*1)}.vjs\:px-1\.5{padding-inline:calc(var(--vjs-spacing)*1.5)}.vjs\:px-2{padding-inline:calc(var(--vjs-spacing)*2)}.vjs\:px-2\.5{padding-inline:calc(var(--vjs-spacing)*2.5)}.vjs\:px-3{padding-inline:calc(var(--vjs-spacing)*3)}.vjs\:py-1{padding-block:calc(var(--vjs-spacing)*1)}.vjs\:py-2{padding-block:calc(var(--vjs-spacing)*2)}.vjs\:py-3{padding-block:calc(var(--vjs-spacing)*3)}.vjs\:pt-10{padding-top:calc(var(--vjs-spacing)*10)}.vjs\:pb-3{padding-bottom:calc(var(--vjs-spacing)*3)}.vjs\:font-sans{font-family:var(--vjs-font-sans)}.vjs\:text-xs{font-size:var(--vjs-text-xs);line-height:var(--tw-leading,var(--vjs-text-xs--line-height))}.vjs\:text-\[0\.8125rem\]{font-size:.8125rem}.vjs\:whitespace-nowrap{white-space:nowrap}.vjs\:text-white,.vjs\:text-white\/50{color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:text-white\/50{color:color-mix(in oklab,var(--vjs-color-white)50%,transparent)}}.vjs\:text-white\/90{color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:text-white\/90{color:color-mix(in oklab,var(--vjs-color-white)90%,transparent)}}.vjs\:tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,)var(--tw-slashed-zero,)var(--tw-numeric-figure,)var(--tw-numeric-spacing,)var(--tw-numeric-fraction,)}.vjs\:subpixel-antialiased{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}.vjs\:opacity-0{opacity:0}.vjs\:shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.vjs\:shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.vjs\:ring,.vjs\:ring-1{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.vjs\:shadow-black\/5{--tw-shadow-color:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:shadow-black\/5{--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--vjs-color-black)5%,transparent)var(--tw-shadow-alpha),transparent)}}.vjs\:shadow-black\/15{--tw-shadow-color:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:shadow-black\/15{--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--vjs-color-black)15%,transparent)var(--tw-shadow-alpha),transparent)}}.vjs\:ring-black\/5{--tw-ring-color:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:ring-black\/5{--tw-ring-color:color-mix(in oklab,var(--vjs-color-black)5%,transparent)}}.vjs\:ring-black\/10{--tw-ring-color:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:ring-black\/10{--tw-ring-color:color-mix(in oklab,var(--vjs-color-black)10%,transparent)}}.vjs\:ring-white\/10{--tw-ring-color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:ring-white\/10{--tw-ring-color:color-mix(in oklab,var(--vjs-color-white)10%,transparent)}}.vjs\:outline-0{outline-style:var(--tw-outline-style);outline-width:0}.vjs\:-outline-offset-2{outline-offset:calc(2px*-1)}.vjs\:blur-sm{--tw-blur:blur(var(--vjs-blur-sm));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,)}.vjs\:backdrop-blur-3xl{--tw-backdrop-blur:blur(var(--vjs-blur-3xl));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.vjs\:backdrop-brightness-90{--tw-backdrop-brightness:brightness(90%);-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.vjs\:backdrop-saturate-150{--tw-backdrop-saturate:saturate(150%);-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.vjs\:transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--vjs-default-transition-timing-function));transition-duration:var(--tw-duration,var(--vjs-default-transition-duration))}.vjs\:transition-\[color\,background\,outline-offset\]{transition-property:color,background,outline-offset;transition-timing-function:var(--tw-ease,var(--vjs-default-transition-timing-function));transition-duration:var(--tw-duration,var(--vjs-default-transition-duration))}.vjs\:transition-\[opacity\,height\,width\]{transition-property:opacity,height,width;transition-timing-function:var(--tw-ease,var(--vjs-default-transition-timing-function));transition-duration:var(--tw-duration,var(--vjs-default-transition-duration))}.vjs\:transition-\[opacity\,scale\]{transition-property:opacity,scale;transition-timing-function:var(--tw-ease,var(--vjs-default-transition-timing-function));transition-duration:var(--tw-duration,var(--vjs-default-transition-duration))}.vjs\:transition-\[outline-offset\]{transition-property:outline-offset;transition-timing-function:var(--tw-ease,var(--vjs-default-transition-timing-function));transition-duration:var(--tw-duration,var(--vjs-default-transition-duration))}.vjs\:transition-\[transform\,scale\,opacity\,filter\]{transition-property:transform,scale,opacity,filter;transition-timing-function:var(--tw-ease,var(--vjs-default-transition-timing-function));transition-duration:var(--tw-duration,var(--vjs-default-transition-duration))}.vjs\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--vjs-default-transition-timing-function));transition-duration:var(--tw-duration,var(--vjs-default-transition-duration))}.vjs\:delay-500{transition-delay:.5s}.vjs\:duration-200{--tw-duration:.2s;transition-duration:.2s}.vjs\:duration-300{--tw-duration:.3s;transition-duration:.3s}.vjs\:ease-out{--tw-ease:var(--vjs-ease-out);transition-timing-function:var(--vjs-ease-out)}.vjs\:will-change-\[transform\,filter\,opacity\]{will-change:transform,filter,opacity}.vjs\:will-change-\[transform\,scale\,filter\,opacity\]{will-change:transform,scale,filter,opacity}.vjs\:select-none{-webkit-user-select:none;user-select:none}.vjs\:text-shadow-2xs\/20{--tw-text-shadow-alpha:20%;text-shadow:0px 1px 0px var(--tw-text-shadow-color,oklab(0% 0 0/.2))}.vjs\:text-shadow-2xs\/25{--tw-text-shadow-alpha:25%;text-shadow:0px 1px 0px var(--tw-text-shadow-color,oklab(0% 0 0/.25))}.vjs\:ring-inset{--tw-ring-inset:inset}.vjs\:group-focus-within\/slider\:opacity-100:is(:where(.vjs\:group\/slider):focus-within *){opacity:1}@media (hover:hover){.vjs\:group-hover\/root\:translate-y-0:is(:where(.vjs\:group\/root):hover *){--tw-translate-y:calc(var(--vjs-spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.vjs\:group-hover\/root\:scale-100:is(:where(.vjs\:group\/root):hover *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.vjs\:group-hover\/root\:opacity-100:is(:where(.vjs\:group\/root):hover *){opacity:1}.vjs\:group-hover\/root\:blur-none:is(:where(.vjs\:group\/root):hover *){--tw-blur: ;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,)}.vjs\:group-hover\/root\:delay-0:is(:where(.vjs\:group\/root):hover *){transition-delay:0s}.vjs\:group-hover\/root\:duration-75:is(:where(.vjs\:group\/root):hover *){--tw-duration:75ms;transition-duration:75ms}.vjs\:group-hover\/root\:duration-100:is(:where(.vjs\:group\/root):hover *){--tw-duration:.1s;transition-duration:.1s}.vjs\:group-hover\/slider\:scale-100:is(:where(.vjs\:group\/slider):hover *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.vjs\:group-hover\/slider\:opacity-100:is(:where(.vjs\:group\/slider):hover *){opacity:1}}.vjs\:group-focus-visible\/slider\:outline-2:is(:where(.vjs\:group\/slider):focus-visible *){outline-style:var(--tw-outline-style);outline-width:2px}.vjs\:group-focus-visible\/slider\:outline-offset-6:is(:where(.vjs\:group\/slider):focus-visible *){outline-offset:6px}.vjs\:group-focus-visible\/slider\:outline-blue-500:is(:where(.vjs\:group\/slider):focus-visible *){outline-color:var(--vjs-color-blue-500)}.vjs\:group-focus-visible\/slider\:outline-white:is(:where(.vjs\:group\/slider):focus-visible *){outline-color:var(--vjs-color-white)}.vjs\:group-active\/slider\:size-3:is(:where(.vjs\:group\/slider):active *){width:calc(var(--vjs-spacing)*3);height:calc(var(--vjs-spacing)*3)}.vjs\:group-data-fullscreen\/button\:hidden:is(:where(.vjs\:group\/button)[data-fullscreen] *){display:none}.vjs\:group-data-fullscreen\/button\:inline:is(:where(.vjs\:group\/button)[data-fullscreen] *){display:inline}.vjs\:group-data-paused\/button\:opacity-0:is(:where(.vjs\:group\/button)[data-paused] *){opacity:0}.vjs\:group-data-paused\/button\:opacity-100:is(:where(.vjs\:group\/button)[data-paused] *){opacity:1}.vjs\:group-data-\[volume-level\=high\]\/button\:inline:is(:where(.vjs\:group\/button)[data-volume-level=high] *),.vjs\:group-data-\[volume-level\=low\]\/button\:inline:is(:where(.vjs\:group\/button)[data-volume-level=low] *),.vjs\:group-data-\[volume-level\=medium\]\/button\:inline:is(:where(.vjs\:group\/button)[data-volume-level=medium] *),.vjs\:group-data-\[volume-level\=off\]\/button\:inline:is(:where(.vjs\:group\/button)[data-volume-level=off] *){display:inline}.vjs\:before\:pointer-events-none:before{content:var(--tw-content);pointer-events:none}.vjs\:before\:absolute:before{content:var(--tw-content);position:absolute}.vjs\:before\:inset-px:before{content:var(--tw-content);inset:1px}.vjs\:before\:z-10:before{content:var(--tw-content);z-index:10}.vjs\:before\:rounded-\[inherit\]:before{content:var(--tw-content);border-radius:inherit}.vjs\:before\:ring-1:before{content:var(--tw-content);--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.vjs\:before\:ring-white\/15:before{content:var(--tw-content);--tw-ring-color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:before\:ring-white\/15:before{--tw-ring-color:color-mix(in oklab,var(--vjs-color-white)15%,transparent)}}.vjs\:before\:ring-inset:before{content:var(--tw-content);--tw-ring-inset:inset}.vjs\:after\:pointer-events-none:after{content:var(--tw-content);pointer-events:none}.vjs\:after\:absolute:after{content:var(--tw-content);position:absolute}.vjs\:after\:inset-0:after{content:var(--tw-content);inset:calc(var(--vjs-spacing)*0)}.vjs\:after\:z-10:after{content:var(--tw-content);z-index:10}.vjs\:after\:rounded-\[inherit\]:after{content:var(--tw-content);border-radius:inherit}.vjs\:after\:ring:after,.vjs\:after\:ring-1:after{content:var(--tw-content);--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.vjs\:after\:ring-black\/10:after{content:var(--tw-content);--tw-ring-color:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:after\:ring-black\/10:after{--tw-ring-color:color-mix(in oklab,var(--vjs-color-black)10%,transparent)}}.vjs\:after\:ring-black\/15:after{content:var(--tw-content);--tw-ring-color:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:after\:ring-black\/15:after{--tw-ring-color:color-mix(in oklab,var(--vjs-color-black)15%,transparent)}}.vjs\:after\:ring-inset:after{content:var(--tw-content);--tw-ring-inset:inset}@media (hover:hover){.vjs\:hover\:bg-white\/10:hover{background-color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:hover\:bg-white\/10:hover{background-color:color-mix(in oklab,var(--vjs-color-white)10%,transparent)}}.vjs\:hover\:text-white:hover,.vjs\:hover\:text-white\/80:hover{color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:hover\:text-white\/80:hover{color:color-mix(in oklab,var(--vjs-color-white)80%,transparent)}}.vjs\:hover\:no-underline:hover{text-decoration-line:none}}.vjs\:focus-visible\:bg-white\/10:focus-visible{background-color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:focus-visible\:bg-white\/10:focus-visible{background-color:color-mix(in oklab,var(--vjs-color-white)10%,transparent)}}.vjs\:focus-visible\:text-white:focus-visible,.vjs\:focus-visible\:text-white\/80:focus-visible{color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:focus-visible\:text-white\/80:focus-visible{color:color-mix(in oklab,var(--vjs-color-white)80%,transparent)}}.vjs\:focus-visible\:no-underline:focus-visible{text-decoration-line:none}.vjs\:focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.vjs\:focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.vjs\:focus-visible\:outline-blue-500:focus-visible{outline-color:var(--vjs-color-blue-500)}.vjs\:focus-visible\:outline-white:focus-visible{outline-color:var(--vjs-color-white)}.vjs\:active\:size-3:active{width:calc(var(--vjs-spacing)*3);height:calc(var(--vjs-spacing)*3)}.vjs\:disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.vjs\:disabled\:opacity-50:disabled{opacity:.5}.vjs\:disabled\:grayscale:disabled{--tw-grayscale:grayscale(100%);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,)}.vjs\:has-\[\[aria-expanded\=\"true\"\]\]\:translate-y-0:has([aria-expanded=true]){--tw-translate-y:calc(var(--vjs-spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.vjs\:has-\[\[aria-expanded\=\"true\"\]\]\:scale-100:has([aria-expanded=true]){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.vjs\:has-\[\[aria-expanded\=\"true\"\]\]\:opacity-100:has([aria-expanded=true]){opacity:1}.vjs\:has-\[\[aria-expanded\=\"true\"\]\]\:blur-none:has([aria-expanded=true]){--tw-blur: ;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,)}.vjs\:has-\[\[aria-expanded\=\"true\"\]\]\:delay-0:has([aria-expanded=true]){transition-delay:0s}.vjs\:has-\[\[aria-expanded\=\"true\"\]\]\:duration-75:has([aria-expanded=true]){--tw-duration:75ms;transition-duration:75ms}.vjs\:has-\[\[aria-expanded\=\"true\"\]\]\:duration-100:has([aria-expanded=true]){--tw-duration:.1s;transition-duration:.1s}.vjs\:has-\[\[data-paused\]\]\:translate-y-0:has([data-paused]){--tw-translate-y:calc(var(--vjs-spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.vjs\:has-\[\[data-paused\]\]\:scale-100:has([data-paused]){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.vjs\:has-\[\[data-paused\]\]\:opacity-100:has([data-paused]){opacity:1}.vjs\:has-\[\[data-paused\]\]\:blur-none:has([data-paused]){--tw-blur: ;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,)}.vjs\:has-\[\[data-paused\]\]\:delay-0:has([data-paused]){transition-delay:0s}.vjs\:has-\[\[data-paused\]\]\:duration-75:has([data-paused]){--tw-duration:75ms;transition-duration:75ms}.vjs\:has-\[\[data-paused\]\]\:duration-100:has([data-paused]){--tw-duration:.1s;transition-duration:.1s}.vjs\:has-\[\+\.controls_\[aria-expanded\=\"true\"\]\]\:opacity-100:has(+.controls [aria-expanded=true]){opacity:1}.vjs\:has-\[\+\.controls_\[aria-expanded\=\"true\"\]\]\:delay-0:has(+.controls [aria-expanded=true]){transition-delay:0s}.vjs\:has-\[\+\.controls_\[aria-expanded\=\"true\"\]\]\:duration-75:has(+.controls [aria-expanded=true]){--tw-duration:75ms;transition-duration:75ms}.vjs\:has-\[\+\.controls_\[aria-expanded\=\"true\"\]\]\:duration-100:has(+.controls [aria-expanded=true]){--tw-duration:.1s;transition-duration:.1s}.vjs\:has-\[\+\.controls_\[data-paused\]\]\:opacity-100:has(+.controls [data-paused]){opacity:1}.vjs\:has-\[\+\.controls_\[data-paused\]\]\:delay-0:has(+.controls [data-paused]){transition-delay:0s}.vjs\:has-\[\+\.controls_\[data-paused\]\]\:duration-75:has(+.controls [data-paused]){--tw-duration:75ms;transition-duration:75ms}.vjs\:has-\[\+\.controls_\[data-paused\]\]\:duration-100:has(+.controls [data-paused]){--tw-duration:.1s;transition-duration:.1s}.vjs\:aria-busy\:pointer-events-none[aria-busy=true]{pointer-events:none}.vjs\:aria-busy\:cursor-not-allowed[aria-busy=true]{cursor:not-allowed}.vjs\:aria-expanded\:bg-white\/10[aria-expanded=true]{background-color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:aria-expanded\:bg-white\/10[aria-expanded=true]{background-color:color-mix(in oklab,var(--vjs-color-white)10%,transparent)}}.vjs\:aria-expanded\:text-white[aria-expanded=true],.vjs\:aria-expanded\:text-white\/80[aria-expanded=true]{color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:aria-expanded\:text-white\/80[aria-expanded=true]{color:color-mix(in oklab,var(--vjs-color-white)80%,transparent)}}.vjs\:data-ending-style\:scale-0[data-ending-style]{--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x)var(--tw-scale-y)}.vjs\:data-ending-style\:opacity-0[data-ending-style]{opacity:0}.vjs\:data-ending-style\:blur-sm[data-ending-style]{--tw-blur:blur(var(--vjs-blur-sm));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,)}.vjs\:data-instant\:duration-0[data-instant]{--tw-duration:0s;transition-duration:0s}.vjs\:data-starting-style\:scale-0[data-starting-style]{--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x)var(--tw-scale-y)}.vjs\:data-starting-style\:opacity-0[data-starting-style]{opacity:0}.vjs\:data-starting-style\:blur-sm[data-starting-style]{--tw-blur:blur(var(--vjs-blur-sm));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,)}.vjs\:data-\[orientation\=horizontal\]\:h-1[data-orientation=horizontal]{height:calc(var(--vjs-spacing)*1)}.vjs\:data-\[orientation\=horizontal\]\:h-5[data-orientation=horizontal]{height:calc(var(--vjs-spacing)*5)}.vjs\:data-\[orientation\=horizontal\]\:h-\[0\.1875rem\][data-orientation=horizontal]{height:.1875rem}.vjs\:data-\[orientation\=horizontal\]\:w-full[data-orientation=horizontal]{width:100%}.vjs\:data-\[orientation\=horizontal\]\:min-w-20[data-orientation=horizontal]{min-width:calc(var(--vjs-spacing)*20)}@media (hover:hover){.vjs\:data-\[orientation\=horizontal\]\:hover\:cursor-ew-resize[data-orientation=horizontal]:hover{cursor:ew-resize}}.vjs\:data-\[orientation\=vertical\]\:h-18[data-orientation=vertical]{height:calc(var(--vjs-spacing)*18)}.vjs\:data-\[orientation\=vertical\]\:h-20[data-orientation=vertical]{height:calc(var(--vjs-spacing)*20)}.vjs\:data-\[orientation\=vertical\]\:w-1[data-orientation=vertical]{width:calc(var(--vjs-spacing)*1)}.vjs\:data-\[orientation\=vertical\]\:w-5[data-orientation=vertical]{width:calc(var(--vjs-spacing)*5)}.vjs\:data-\[orientation\=vertical\]\:w-\[0\.1875rem\][data-orientation=vertical]{width:.1875rem}@media (hover:hover){.vjs\:data-\[orientation\=vertical\]\:hover\:cursor-ns-resize[data-orientation=vertical]:hover{cursor:ns-resize}}@media (prefers-contrast:more){.vjs\:contrast-more\:bg-black\/90{background-color:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:contrast-more\:bg-black\/90{background-color:color-mix(in oklab,var(--vjs-color-black)90%,transparent)}}.vjs\:contrast-more\:from-black\/75{--tw-gradient-from:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:contrast-more\:from-black\/75{--tw-gradient-from:color-mix(in oklab,var(--vjs-color-black)75%,transparent)}}.vjs\:contrast-more\:from-black\/75{--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))}.vjs\:contrast-more\:ring-black{--tw-ring-color:var(--vjs-color-black)}.vjs\:contrast-more\:after\:ring-white\/20:after{content:var(--tw-content);--tw-ring-color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:contrast-more\:after\:ring-white\/20:after{--tw-ring-color:color-mix(in oklab,var(--vjs-color-white)20%,transparent)}}}@container root (min-width:80rem){.vjs\:\@7xl\/root\:text-sm{font-size:var(--vjs-text-sm);line-height:var(--tw-leading,var(--vjs-text-sm--line-height))}}@media (prefers-color-scheme:dark){.vjs\:dark\:before\:ring-0:before{content:var(--tw-content);--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(0px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.vjs\:dark\:after\:ring-white\/10:after{content:var(--tw-content);--tw-ring-color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:dark\:after\:ring-white\/10:after{--tw-ring-color:color-mix(in oklab,var(--vjs-color-white)10%,transparent)}}.vjs\:dark\:after\:ring-white\/15:after{content:var(--tw-content);--tw-ring-color:var(--vjs-color-white)}@supports (color:color-mix(in lab, red, red)){.vjs\:dark\:after\:ring-white\/15:after{--tw-ring-color:color-mix(in oklab,var(--vjs-color-white)15%,transparent)}}}.vjs\:\[\&_\.arrow-1\]\:-translate-x-px .arrow-1{--tw-translate-x:-1px;translate:var(--tw-translate-x)var(--tw-translate-y)}.vjs\:\[\&_\.arrow-1\]\:translate-x-px .arrow-1{--tw-translate-x:1px;translate:var(--tw-translate-x)var(--tw-translate-y)}.vjs\:\[\&_\.arrow-1\]\:-translate-y-px .arrow-1{--tw-translate-y:-1px;translate:var(--tw-translate-x)var(--tw-translate-y)}@media (hover:hover){.vjs\:group-hover\/button\:\[\&_\.arrow-1\]\:translate-0:is(:where(.vjs\:group\/button):hover *) .arrow-1{--tw-translate-x:calc(var(--vjs-spacing)*0);--tw-translate-y:calc(var(--vjs-spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.vjs\:group-hover\/button\:\[\&_\.arrow-1\]\:-translate-x-px:is(:where(.vjs\:group\/button):hover *) .arrow-1{--tw-translate-x:-1px;translate:var(--tw-translate-x)var(--tw-translate-y)}.vjs\:group-hover\/button\:\[\&_\.arrow-1\]\:translate-x-px:is(:where(.vjs\:group\/button):hover *) .arrow-1{--tw-translate-x:1px;translate:var(--tw-translate-x)var(--tw-translate-y)}.vjs\:group-hover\/button\:\[\&_\.arrow-1\]\:-translate-y-px:is(:where(.vjs\:group\/button):hover *) .arrow-1{--tw-translate-y:-1px;translate:var(--tw-translate-x)var(--tw-translate-y)}}.vjs\:\[\&_\.arrow-2\]\:-translate-x-px .arrow-2{--tw-translate-x:-1px;translate:var(--tw-translate-x)var(--tw-translate-y)}.vjs\:\[\&_\.arrow-2\]\:translate-x-px .arrow-2{--tw-translate-x:1px;translate:var(--tw-translate-x)var(--tw-translate-y)}.vjs\:\[\&_\.arrow-2\]\:translate-y-px .arrow-2{--tw-translate-y:1px;translate:var(--tw-translate-x)var(--tw-translate-y)}@media (hover:hover){.vjs\:group-hover\/button\:\[\&_\.arrow-2\]\:translate-0:is(:where(.vjs\:group\/button):hover *) .arrow-2{--tw-translate-x:calc(var(--vjs-spacing)*0);--tw-translate-y:calc(var(--vjs-spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.vjs\:group-hover\/button\:\[\&_\.arrow-2\]\:-translate-x-px:is(:where(.vjs\:group\/button):hover *) .arrow-2{--tw-translate-x:-1px;translate:var(--tw-translate-x)var(--tw-translate-y)}.vjs\:group-hover\/button\:\[\&_\.arrow-2\]\:translate-x-px:is(:where(.vjs\:group\/button):hover *) .arrow-2{--tw-translate-x:1px;translate:var(--tw-translate-x)var(--tw-translate-y)}.vjs\:group-hover\/button\:\[\&_\.arrow-2\]\:translate-y-px:is(:where(.vjs\:group\/button):hover *) .arrow-2{--tw-translate-y:1px;translate:var(--tw-translate-x)var(--tw-translate-y)}}.vjs\:\[\&_\.fullscreen-enter-tooltip\]\:inline .fullscreen-enter-tooltip{display:inline}.vjs\:data-fullscreen\:\[\&_\.fullscreen-enter-tooltip\]\:hidden[data-fullscreen] .fullscreen-enter-tooltip,.vjs\:\[\&_\.fullscreen-exit-tooltip\]\:hidden .fullscreen-exit-tooltip{display:none}.vjs\:data-fullscreen\:\[\&_\.fullscreen-exit-tooltip\]\:inline[data-fullscreen] .fullscreen-exit-tooltip{display:inline}.vjs\:\[\&_\.icon\]\:shrink-0 .icon{flex-shrink:0}.vjs\:\[\&_\.icon\]\:shadow-black\/25 .icon{--tw-shadow-color:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:\[\&_\.icon\]\:shadow-black\/25 .icon{--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--vjs-color-black)25%,transparent)var(--tw-shadow-alpha),transparent)}}.vjs\:\[\&_\.icon\]\:shadow-black\/40 .icon{--tw-shadow-color:var(--vjs-color-black)}@supports (color:color-mix(in lab, red, red)){.vjs\:\[\&_\.icon\]\:shadow-black\/40 .icon{--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--vjs-color-black)40%,transparent)var(--tw-shadow-alpha),transparent)}}.vjs\:\[\&_\.icon\]\:drop-shadow-\[0_1px_0_var\(--tw-shadow-color\)\] .icon{--tw-drop-shadow-size:drop-shadow(0 1px 0 var(--tw-drop-shadow-color,var(--tw-shadow-color)));--tw-drop-shadow:var(--tw-drop-shadow-size);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,)}.vjs\:\[\&_\.icon\]\:transition-opacity .icon{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--vjs-default-transition-timing-function));transition-duration:var(--tw-duration,var(--vjs-default-transition-duration))}.vjs\:\[\&_\.icon\]\:duration-150 .icon{--tw-duration:.15s;transition-duration:.15s}.vjs\:\[\&_\.icon\]\:ease-linear .icon{--tw-ease:linear;transition-timing-function:linear}.vjs\:\[\&_\.icon\]\:\[grid-area\:1\/1\] .icon{grid-area:1/1}.vjs\:\[\&_\.pause-tooltip\]\:inline .pause-tooltip{display:inline}.vjs\:data-paused\:\[\&_\.pause-tooltip\]\:hidden[data-paused] .pause-tooltip,.vjs\:\[\&_\.play-tooltip\]\:hidden .play-tooltip{display:none}.vjs\:data-paused\:\[\&_\.play-tooltip\]\:inline[data-paused] .play-tooltip{display:inline}.vjs\:\[\&_path\]\:transition-transform path{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--vjs-default-transition-timing-function));transition-duration:var(--tw-duration,var(--vjs-default-transition-duration))}.vjs\:\[\&_path\]\:ease-out path{--tw-ease:var(--vjs-ease-out);transition-timing-function:var(--vjs-ease-out)}.vjs\:\[\&_video\]\:h-full video{height:100%}.vjs\:\[\&_video\]\:w-full video{width:100%}.vjs\:\[\&\:fullscreen\]\:rounded-none:fullscreen{border-radius:0}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-text-shadow-color{syntax:"*";inherits:false}@property --tw-text-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-content{syntax:"*";inherits:false;initial-value:""}
package/dist/skins/minimal.js CHANGED
@@ -2,8 +2,8 @@
2
2
 
3
3
 
4
4
  import "../store-hGO5HE2A.js";
5
- import "../VolumeSlider-CWpLFzdJ.js";
5
+ import "../VolumeSlider-B8x0_k2f.js";
6
6
  import "../icons-BqfV81R8.js";
7
- import { t as MinimalSkin } from "../minimal-pUeFJF1F.js";
7
+ import { t as MinimalSkin } from "../minimal-CVRiJIWD.js";
8
8
 
9
9
  export { MinimalSkin };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@videojs/react",
3
3
  "type": "module",
4
- "version": "0.1.0-preview.6",
4
+ "version": "0.1.0-preview.7",
5
5
  "description": "React library for building media players",
6
6
  "license": "Apache-2.0",
7
7
  "keywords": [
@@ -46,10 +46,9 @@
46
46
  "react": ">=16.8.0"
47
47
  },
48
48
  "dependencies": {
49
- "@floating-ui/react": "^0.27.16",
50
- "@videojs/icons": "0.1.0-preview.6",
51
- "@videojs/core": "0.1.0-preview.6",
52
- "@videojs/utils": "0.1.0-preview.6"
49
+ "@videojs/core": "0.1.0-preview.7",
50
+ "@videojs/icons": "0.1.0-preview.7",
51
+ "@videojs/utils": "0.1.0-preview.7"
53
52
  },
54
53
  "devDependencies": {
55
54
  "@svgr/babel-plugin-add-jsx-attribute": "^8.0.0",
package/dist/VolumeSlider-CWpLFzdJ.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"VolumeSlider-CWpLFzdJ.js","names":["Context","CurrentTimeDisplay: ConnectedComponent<CurrentTimeDisplayProps, typeof renderCurrentTimeDisplay>","DurationDisplay: ConnectedComponent<DurationDisplayProps, typeof renderDurationDisplay>","baseProps: Record<string, any>","FullscreenButton: ConnectedComponent<FullscreenButtonProps, typeof renderFullscreenButton>","React","MediaContainer: FC<PropsWithChildren<HTMLProps<HTMLDivElement> & { portalId?: string }>>","baseProps: Record<string, any>","MuteButton: ConnectedComponent<MuteButtonProps, typeof renderMuteButton>","baseProps: Record<string, any>","PlayButton: ConnectedComponent<PlayButtonProps, typeof renderPlayButton>","open","value: PopoverContextType","Popover: {\n Root: typeof PopoverRoot;\n Trigger: typeof PopoverTrigger;\n Positioner: typeof PopoverPositioner;\n Popup: typeof PopoverPopup;\n Portal: typeof PopoverPortal;\n}","PreviewTimeDisplay: ConnectedComponent<PreviewTimeDisplayProps, typeof renderPreviewTimeDisplay>","CoreTimeSlider","TimeSliderRoot: ConnectedComponent<TimeSliderProps, typeof renderTimeSliderRoot>","TimeSliderTrack: ConnectedComponent<React.ComponentProps<'div'>, typeof renderTimeSliderTrack>","TimeSliderThumb: ConnectedComponent<React.ComponentProps<'div'>, typeof renderTimeSliderThumb>","TimeSliderPointer: ConnectedComponent<\n React.ComponentProps<'div'>,\n typeof renderTimeSliderPointer\n>","TimeSliderProgress: ConnectedComponent<\n React.ComponentProps<'div'>,\n typeof renderTimeSliderProgress\n>","TimeSlider","sideOffset","collisionPadding","value: TooltipContextType","positionerContextValue: TooltipPositionerContextType","Tooltip: {\n Root: typeof TooltipRoot;\n Trigger: typeof TooltipTrigger;\n Positioner: typeof TooltipPositioner;\n Popup: typeof TooltipPopup;\n Arrow: typeof TooltipArrow;\n Portal: typeof TooltipPortal;\n}","CoreVolumeSlider","VolumeSliderRoot: ConnectedComponent<VolumeSliderProps, typeof renderVolumeSliderRoot>","VolumeSliderTrack: ConnectedComponent<\n React.ComponentProps<'div'>,\n typeof renderVolumeSliderTrack\n>","VolumeSliderThumb: ConnectedComponent<\n React.ComponentProps<'div'>,\n typeof renderVolumeSliderThumb\n>","VolumeSliderProgress: ConnectedComponent<\n React.ComponentProps<'div'>,\n typeof renderVolumeSliderProgress\n>","VolumeSlider"],"sources":["../src/utils/component-factory.tsx","../src/components/CurrentTimeDisplay.tsx","../src/components/DurationDisplay.tsx","../src/components/FullscreenButton.tsx","../src/utils/use-composed-refs.ts","../src/components/MediaContainer.tsx","../src/components/MuteButton.tsx","../src/components/PlayButton.tsx","../src/components/Popover.tsx","../src/components/PreviewTimeDisplay.tsx","../src/components/TimeSlider.tsx","../src/components/Tooltip.tsx","../src/components/VolumeSlider.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\n\nimport { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useSyncExternalStore } from 'react';\n\nexport type StateHookFn<TProps = any, TState = any> = (props: TProps) => TState;\n\nexport type PropsHookFn<TProps = any, TState = any, TResultProps = any> = (\n props: TProps,\n state: TState\n) => TResultProps;\n\nexport type RenderFn<TProps = any, TState = any> = (props: TProps, state: TState) => ReactElement;\n\nconst Context = createContext<any>(null);\n\n/**\n * Generic factory function to create connected components following the hooks pattern\n * inspired by Adobe React Spectrum and Base UI architectures.\n *\n * @param useStateHook - Hook that provides component state\n * @param usePropsHook - Hook that enhances props with state-derived values\n * @param defaultRender - Default render function for the component\n * @param displayName - Display name for React DevTools\n * @returns Connected component with customizable render prop\n */\nexport function toConnectedComponent<\n TProps extends Record<string, any>,\n TState,\n TResultProps extends Record<string, any>,\n TRenderFn extends RenderFn<TResultProps, TState>,\n>(\n useStateHook: StateHookFn<TProps, TState>,\n usePropsHook: PropsHookFn<TProps, TState, TResultProps>,\n defaultRender: TRenderFn,\n displayName: string,\n): ConnectedComponent<TProps, TRenderFn> {\n const ConnectedComponent = forwardRef<HTMLElement, TProps & { render?: TRenderFn }>(\n ({ render = defaultRender, ...props }, ref) => {\n const propsWithRef = ref ? { ...props, ref } : props;\n const connectedState = useStateHook(propsWithRef as unknown as TProps);\n const connectedProps = usePropsHook(propsWithRef as unknown as TProps, connectedState);\n return <Context.Provider value={connectedState}>{render(connectedProps, connectedState)}</Context.Provider>;\n },\n );\n\n ConnectedComponent.displayName = displayName;\n\n return ConnectedComponent;\n}\n\n/**\n * Type helper to infer the component type from the factory\n */\nexport type ConnectedComponent<TProps extends Record<string, any>, TRenderFn extends RenderFn<any, any>> = React.ForwardRefExoticComponent<\n React.PropsWithoutRef<TProps & { render?: TRenderFn }> & React.RefAttributes<HTMLElement>\n>;\n\n/**\n * Factory function to create context-based components that don't use toConnectedComponent\n * These components rely on context provided by a parent component.\n *\n * @param usePropsHook - Hook that enhances props with context-derived values\n * @param defaultRender - Default render function for the component\n * @param displayName - Display name for React DevTools\n * @returns Context-based component with customizable render prop\n */\nexport function toContextComponent<\n TProps extends Record<string, any>,\n TResultProps extends Record<string, any>,\n TRenderFn extends (props: TResultProps, context: any) => ReactElement,\n>(\n usePropsHook: (props: TProps, context: any) => TResultProps,\n defaultRender: TRenderFn,\n displayName: string,\n): ContextComponent<TProps, TRenderFn> {\n const ContextComponent = forwardRef<HTMLElement, TProps & { render?: TRenderFn }>(\n ({ render = defaultRender, ...props }, ref) => {\n const context = useContext(Context);\n const propsWithRef = ref ? { ...props, ref } : props;\n const contextProps = usePropsHook(propsWithRef as unknown as TProps, context);\n return render(contextProps, context);\n },\n );\n\n ContextComponent.displayName = displayName;\n\n return ContextComponent;\n}\n\n/**\n * Type helper to infer the context component type from the factory\n */\nexport type ContextComponent<\n TProps extends Record<string, any>,\n TRenderFn extends (props: any, context: any) => ReactElement,\n> = React.ForwardRefExoticComponent<\n React.PropsWithoutRef<TProps & { render?: TRenderFn }> & React.RefAttributes<any>\n>;\n\n/**\n * Hook that manages a CoreClass instance and triggers re-renders when state changes.\n * Uses useSyncExternalStore for optimal performance with external state subscriptions.\n */\nexport function useCore<\n T extends {\n subscribe: (callback: (state: any) => void) => () => void;\n getState: () => any;\n setState: (state: any) => void;\n },\n>(CoreClass: new () => T, state: any): T {\n const coreRef = useRef<T | null>(null);\n const snapshotRef = useRef<any>(null);\n\n // Initialize the core instance\n if (!coreRef.current) {\n coreRef.current = new CoreClass();\n snapshotRef.current = coreRef.current.getState();\n }\n\n useEffect(() => {\n coreRef.current?.setState(state);\n }, [...Object.values(state)]);\n\n // Use useSyncExternalStore to subscribe to state changes\n useSyncExternalStore(\n useCallback((onStoreChange) => {\n if (!coreRef.current) return () => {};\n return coreRef.current.subscribe((newState) => {\n snapshotRef.current = newState;\n onStoreChange();\n });\n }, []),\n useCallback(() => {\n return snapshotRef.current;\n }, []),\n () => null, // server snapshot\n );\n\n return coreRef.current;\n}\n","import type { PropsWithChildren } from 'react';\nimport type { ConnectedComponent } from '../utils/component-factory';\n\nimport { currentTimeDisplayStateDefinition } from '@videojs/core/store';\nimport { formatDisplayTime, shallowEqual } from '@videojs/utils';\n\nimport { useMediaSelector } from '@/store';\nimport { toConnectedComponent } from '../utils/component-factory';\n\nexport function useCurrentTimeDisplayState(_props: any): {\n currentTime: number;\n duration: number;\n} {\n /** @TODO Fix type issues with hooks (CJP) */\n const mediaState = useMediaSelector(currentTimeDisplayStateDefinition.stateTransform, shallowEqual);\n\n // Current time display is read-only, no request methods needed\n return {\n currentTime: mediaState.currentTime ?? 0,\n duration: mediaState.duration ?? 0,\n };\n}\n\nexport type CurrentTimeDisplayState = ReturnType<typeof useCurrentTimeDisplayState>;\n\nexport interface CurrentTimeDisplayProps extends React.ComponentProps<'span'> {\n showRemaining?: boolean;\n}\n\nexport function useCurrentTimeDisplayProps(\n props: PropsWithChildren,\n _state: ReturnType<typeof useCurrentTimeDisplayState>,\n): PropsWithChildren<Record<string, unknown>> {\n const baseProps: Record<string, any> = {\n /** external props spread last to allow for overriding */\n ...props,\n };\n\n return baseProps;\n}\n\nexport function renderCurrentTimeDisplay(props: CurrentTimeDisplayProps, state: CurrentTimeDisplayState): JSX.Element {\n const { showRemaining, ...restProps } = props;\n\n /** @TODO Should this live here or elsewhere? (CJP) */\n const timeLabel\n = showRemaining && state.duration != null && state.currentTime != null\n ? formatDisplayTime(-(state.duration - state.currentTime))\n : formatDisplayTime(state.currentTime);\n\n return <span {...restProps}>{timeLabel}</span>;\n}\n\nexport const CurrentTimeDisplay: ConnectedComponent<CurrentTimeDisplayProps, typeof renderCurrentTimeDisplay>\n = toConnectedComponent(\n useCurrentTimeDisplayState,\n useCurrentTimeDisplayProps,\n renderCurrentTimeDisplay,\n 'CurrentTimeDisplay',\n );\n\nexport default CurrentTimeDisplay;\n","import type { PropsWithChildren } from 'react';\nimport type { ConnectedComponent } from '../utils/component-factory';\n\nimport { durationDisplayStateDefinition } from '@videojs/core/store';\nimport { formatDisplayTime, shallowEqual } from '@videojs/utils';\n\nimport { useMediaSelector } from '@/store';\nimport { toConnectedComponent } from '../utils/component-factory';\n\nexport function useDurationDisplayState(_props: any): {\n duration: number;\n} {\n /** @TODO Fix type issues with hooks (CJP) */\n const mediaState = useMediaSelector(durationDisplayStateDefinition.stateTransform, shallowEqual);\n\n // Duration display is read-only, no request methods needed\n return {\n duration: mediaState.duration ?? 0,\n };\n}\n\nexport type useDurationDisplayState = typeof useDurationDisplayState;\nexport type DurationDisplayState = ReturnType<useDurationDisplayState>;\n\nexport function useDurationDisplayProps(props: PropsWithChildren): PropsWithChildren<Record<string, unknown>> {\n const baseProps: Record<string, any> = {\n /** external props spread last to allow for overriding */\n ...props,\n };\n\n return baseProps;\n}\n\nexport type useDurationDisplayProps = typeof useDurationDisplayProps;\ntype DurationDisplayProps = ReturnType<useDurationDisplayProps>;\n\nexport function renderDurationDisplay(props: DurationDisplayProps, state: DurationDisplayState): JSX.Element {\n return <span {...props}>{formatDisplayTime(state.duration)}</span>;\n}\n\nexport type renderDurationDisplay = typeof renderDurationDisplay;\n\nexport const DurationDisplay: ConnectedComponent<DurationDisplayProps, typeof renderDurationDisplay>\n = toConnectedComponent(useDurationDisplayState, useDurationDisplayProps, renderDurationDisplay, 'DurationDisplay');\n\nexport default DurationDisplay;\n","import type { PropsWithChildren } from 'react';\nimport type { ConnectedComponent } from '../utils/component-factory';\n\nimport { fullscreenButtonStateDefinition } from '@videojs/core/store';\n\nimport { shallowEqual } from '@videojs/utils';\nimport { useMemo } from 'react';\n\nimport { useMediaSelector, useMediaStore } from '@/store';\nimport { toConnectedComponent } from '../utils/component-factory';\n\nexport function useFullscreenButtonState(_props: any): {\n fullscreen: boolean;\n requestEnterFullscreen: () => void;\n requestExitFullscreen: () => void;\n} {\n const mediaStore = useMediaStore();\n const mediaState = useMediaSelector(fullscreenButtonStateDefinition.stateTransform, shallowEqual);\n const methods = useMemo(\n () => fullscreenButtonStateDefinition.createRequestMethods(mediaStore.dispatch),\n [mediaStore],\n );\n\n return {\n fullscreen: mediaState.fullscreen,\n requestEnterFullscreen: methods.requestEnterFullscreen,\n requestExitFullscreen: methods.requestExitFullscreen,\n } as const;\n}\n\nexport type FullscreenButtonState = ReturnType<typeof useFullscreenButtonState>;\n\nexport function getFullscreenButtonProps(\n props: PropsWithChildren,\n state: FullscreenButtonState,\n): PropsWithChildren<Record<string, unknown>> {\n const baseProps: Record<string, any> = {\n /** @TODO Need another state provider in core for i18n (CJP) */\n /** aria attributes/props */\n role: 'button',\n 'aria-label': state.fullscreen ? 'exit fullscreen' : 'enter fullscreen',\n /** tooltip */\n 'data-tooltip': state.fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen',\n /** external props spread last to allow for overriding */\n ...props,\n };\n\n // Handle boolean data attribute: present with empty string when true, absent when false\n if (state.fullscreen) {\n baseProps['data-fullscreen'] = '';\n }\n\n return baseProps;\n}\n\nexport type FullscreenButtonProps = ReturnType<typeof getFullscreenButtonProps>;\n\nexport function renderFullscreenButton(props: FullscreenButtonProps, state: FullscreenButtonState): JSX.Element {\n return (\n <button\n type=\"button\"\n {...props}\n onClick={() => {\n if (props.disabled) return;\n if (state.fullscreen) {\n state.requestExitFullscreen();\n } else {\n state.requestEnterFullscreen();\n }\n }}\n >\n {props.children}\n </button>\n );\n}\n\nexport const FullscreenButton: ConnectedComponent<FullscreenButtonProps, typeof renderFullscreenButton>\n = toConnectedComponent(useFullscreenButtonState, getFullscreenButtonProps, renderFullscreenButton, 'FullscreenButton');\n\nexport default FullscreenButton;\n","import * as React from 'react';\n\ntype PossibleRef<T> = React.Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n */\nfunction setRef<T>(ref: PossibleRef<T>, value: T): (() => void) | void | undefined {\n if (typeof ref === 'function') {\n return ref(value);\n } else if (ref !== null && ref !== undefined) {\n (ref as React.MutableRefObject<T>).current = value;\n }\n}\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */\nfunction composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {\n return (node) => {\n let hasCleanup = false;\n const cleanups = refs.map((ref) => {\n const cleanup = setRef(ref, node);\n if (!hasCleanup && typeof cleanup == 'function') {\n hasCleanup = true;\n }\n return cleanup;\n });\n\n // React <19 will log an error to the console if a callback ref returns a\n // value. We don't use ref cleanups internally so this will only happen if a\n // user's ref callback returns a value, which we only expect if they are\n // using the cleanup functionality added in React 19.\n if (hasCleanup) {\n return () => {\n for (let i = 0; i < cleanups.length; i++) {\n const cleanup = cleanups[i];\n if (typeof cleanup == 'function') {\n cleanup();\n } else {\n setRef(refs[i], null);\n }\n }\n };\n }\n };\n}\n\n/**\n * A custom hook that composes multiple refs\n * Accepts callback refs and RefObject(s)\n */\nfunction useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return React.useCallback(composeRefs(...refs), refs);\n}\n\nexport { composeRefs, useComposedRefs };\n","import type { FC, HTMLProps, PropsWithChildren, RefCallback } from 'react';\n\nimport { playButtonStateDefinition } from '@videojs/core/store';\n\nimport { shallowEqual } from '@videojs/utils';\nimport { forwardRef, useCallback, useMemo } from 'react';\nimport { useMediaSelector, useMediaStore } from '@/store';\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\n/**\n * Hook to associate a React element as the fullscreen container for the media store.\n * This is equivalent to Media Chrome's useMediaFullscreenRef but for VJS-10.\n *\n * The ref callback will register the element as the container state owner\n * in the media store, enabling fullscreen functionality.\n *\n * @example\n * import { useMediaContainerRef } from '@videojs/react';\n *\n * const PlayerContainer = ({ children }) => {\n * const containerRef = useMediaContainerRef();\n * return <div ref={containerRef}>{children}</div>;\n * };\n */\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useMediaContainerRef(): RefCallback<HTMLElement | null> {\n const mediaStore = useMediaStore();\n\n return useCallback(\n (containerElement: HTMLElement | null) => {\n if (!mediaStore) return;\n\n // Register or unregister the container element as the container state owner\n mediaStore.dispatch({\n type: 'containerstateownerchangerequest',\n detail: containerElement,\n });\n },\n [mediaStore],\n );\n}\n\n/**\n * MediaContainer component that automatically registers itself as the fullscreen container.\n * This provides a simple wrapper component for fullscreen functionality.\n *\n * @example\n * import { MediaContainer } from '@videojs/react';\n *\n * const MyPlayer = () => (\n * <MediaContainer>\n * <video src=\"video.mp4\" />\n * <div>Controls here</div>\n * </MediaContainer>\n * );\n */\nexport const MediaContainer: FC<PropsWithChildren<HTMLProps<HTMLDivElement> & { portalId?: string }>> = forwardRef(\n ({ children, portalId = '@default_portal_id', ...props }, ref) => {\n const containerRef = useMediaContainerRef();\n const composedRef = useComposedRefs(ref, containerRef);\n\n const mediaStore = useMediaStore();\n const mediaState = useMediaSelector(playButtonStateDefinition.stateTransform, shallowEqual);\n const methods = useMemo(() => playButtonStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);\n\n const handleClick = useCallback((event: React.MouseEvent<HTMLDivElement>) => {\n if (!['video', 'audio'].includes((event.target as HTMLElement).localName || '')) return;\n\n if (mediaState.paused) {\n methods.requestPlay();\n } else {\n methods.requestPause();\n }\n }, [mediaState.paused, methods]);\n\n return (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n <div\n ref={composedRef}\n onClick={handleClick}\n {...props}\n >\n {children}\n {/* @TODO We need to make sure this is non-brittle longer term (CJP) */}\n <div id={portalId} style={{ position: 'absolute', zIndex: 10 }} />\n </div>\n );\n },\n);\n","import type { PropsWithChildren } from 'react';\nimport type { ConnectedComponent } from '../utils/component-factory';\n\nimport { muteButtonStateDefinition } from '@videojs/core/store';\n\nimport { shallowEqual } from '@videojs/utils';\nimport { useMemo } from 'react';\n\nimport { useMediaSelector, useMediaStore } from '@/store';\nimport { toConnectedComponent } from '../utils/component-factory';\n\nexport function useMuteButtonState(_props: any): {\n volumeLevel: string;\n muted: boolean;\n requestMute: () => void;\n requestUnmute: () => void;\n} {\n const mediaStore = useMediaStore();\n const mediaState = useMediaSelector(muteButtonStateDefinition.stateTransform, shallowEqual);\n const methods = useMemo(() => muteButtonStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);\n\n return {\n volumeLevel: mediaState.volumeLevel,\n muted: mediaState.muted,\n requestMute: methods.requestMute,\n requestUnmute: methods.requestUnmute,\n } as const;\n}\n\nexport type MuteButtonState = ReturnType<typeof useMuteButtonState>;\n\nexport function getMuteButtonProps(\n props: PropsWithChildren,\n state: MuteButtonState,\n): PropsWithChildren<Record<string, unknown>> {\n const baseProps: Record<string, any> = {\n /** data attributes/props - non-boolean */\n 'data-volume-level': state.volumeLevel,\n /** @TODO Need another state provider in core for i18n (CJP) */\n /** aria attributes/props */\n role: 'button',\n 'aria-label': state.muted ? 'unmute' : 'mute',\n /** tooltip */\n 'data-tooltip': state.muted ? 'Unmute' : 'Mute',\n /** external props spread last to allow for overriding */\n ...props,\n };\n\n // Handle boolean data attribute: present with empty string when true, absent when false\n if (state.muted) {\n baseProps['data-muted'] = '';\n }\n\n return baseProps;\n}\n\nexport type MuteButtonProps = ReturnType<typeof getMuteButtonProps>;\n\nexport function renderMuteButton(props: MuteButtonProps, state: MuteButtonState): JSX.Element {\n return (\n <button\n type=\"button\"\n {...props}\n onClick={() => {\n if (props.disabled) return;\n if (state.volumeLevel === 'off') {\n state.requestUnmute();\n } else {\n state.requestMute();\n }\n }}\n >\n {props.children}\n </button>\n );\n}\n\nexport const MuteButton: ConnectedComponent<MuteButtonProps, typeof renderMuteButton> = toConnectedComponent(\n useMuteButtonState,\n getMuteButtonProps,\n renderMuteButton,\n 'MuteButton',\n);\n\nexport default MuteButton;\n","import type { PropsWithChildren } from 'react';\nimport type { ConnectedComponent } from '../utils/component-factory';\n\nimport { playButtonStateDefinition } from '@videojs/core/store';\n\nimport { shallowEqual } from '@videojs/utils';\nimport { useMemo } from 'react';\n\nimport { useMediaSelector, useMediaStore } from '@/store';\nimport { toConnectedComponent } from '../utils/component-factory';\n\nexport function usePlayButtonState(_props: any): {\n paused: boolean;\n requestPlay: () => void;\n requestPause: () => void;\n} {\n const mediaStore = useMediaStore();\n const mediaState = useMediaSelector(playButtonStateDefinition.stateTransform, shallowEqual);\n const methods = useMemo(() => playButtonStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);\n\n return {\n paused: mediaState.paused,\n requestPlay: methods.requestPlay,\n requestPause: methods.requestPause,\n };\n}\n\nexport type PlayButtonState = ReturnType<typeof usePlayButtonState>;\n\nexport function getPlayButtonProps(\n props: Record<string, unknown>,\n state: PlayButtonState,\n): PropsWithChildren<Record<string, unknown>> {\n const baseProps: Record<string, any> = {\n /** @TODO Need another state provider in core for i18n (CJP) */\n /** aria attributes/props */\n role: 'button',\n 'aria-label': state.paused ? 'play' : 'pause',\n /** tooltip */\n 'data-tooltip': state.paused ? 'Play' : 'Pause',\n /** external props spread last to allow for overriding */\n ...props,\n };\n\n // Handle boolean data attribute: present with empty string when true, absent when false\n if (state.paused) {\n baseProps['data-paused'] = '';\n }\n\n return baseProps;\n}\n\nexport type PlayButtonProps = ReturnType<typeof getPlayButtonProps>;\n\nexport function renderPlayButton(props: PlayButtonProps, state: PlayButtonState): JSX.Element {\n return (\n <button\n type=\"button\"\n {...props}\n onClick={() => {\n if (props.disabled) return;\n if (state.paused) {\n state.requestPlay();\n } else {\n state.requestPause();\n }\n }}\n >\n {props.children}\n </button>\n );\n}\n\nexport const PlayButton: ConnectedComponent<PlayButtonProps, typeof renderPlayButton> = toConnectedComponent(\n usePlayButtonState,\n getPlayButtonProps,\n renderPlayButton,\n 'PlayButton',\n);\n\nexport default PlayButton;\n","import type { OpenChangeReason, Placement } from '@floating-ui/react';\nimport type { MutableRefObject, ReactNode } from 'react';\n\nimport {\n autoUpdate,\n flip,\n FloatingFocusManager,\n FloatingPortal,\n offset,\n safePolygon,\n shift,\n useDismiss,\n useFloating,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n useTransitionStatus,\n} from '@floating-ui/react';\n\nimport {\n Children,\n cloneElement,\n createContext,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from 'react';\n\ninterface PopoverContextType {\n open: boolean;\n setOpen: (open: boolean) => void;\n openReason: OpenChangeReason | null;\n refs: ReturnType<typeof useFloating>['refs'];\n floatingStyles: ReturnType<typeof useFloating>['floatingStyles'];\n getReferenceProps: ReturnType<typeof useInteractions>['getReferenceProps'];\n getFloatingProps: ReturnType<typeof useInteractions>['getFloatingProps'];\n context: ReturnType<typeof useFloating>['context'];\n updatePositioning: (placement: Placement, sideOffset: number) => void;\n transitionStatus: ReturnType<typeof useTransitionStatus>['status'];\n}\n\ninterface PopoverRootProps {\n openOnHover?: boolean;\n delay?: number;\n closeDelay?: number;\n children: ReactNode;\n}\n\ninterface PopoverTriggerProps {\n children: ReactNode;\n}\n\ninterface PopoverPositionerProps {\n side?: Placement;\n sideOffset?: number;\n children: ReactNode;\n}\n\ninterface PopoverPopupProps {\n className?: string;\n children: ReactNode;\n}\n\ninterface PopoverPortalProps {\n children: ReactNode;\n root?: HTMLElement | ShadowRoot | MutableRefObject<HTMLElement | ShadowRoot | null> | null;\n rootId?: string;\n}\n\nconst PopoverContext = createContext<PopoverContextType | null>(null);\n\nfunction usePopoverContext(): PopoverContextType {\n const context = useContext(PopoverContext);\n if (!context) {\n throw new Error('Popover components must be used within PopoverRoot');\n }\n return context;\n}\n\nfunction PopoverRoot({ openOnHover = false, delay = 0, closeDelay = 0, children }: PopoverRootProps): JSX.Element {\n const [open, setOpen] = useState(false);\n const [placement, setPlacement] = useState<Placement>('top');\n const [sideOffset, setSideOffset] = useState(5);\n const [openReason, setOpenReason] = useState<OpenChangeReason | null>(null);\n\n const { refs, floatingStyles, context } = useFloating({\n open,\n onOpenChange: (open, _event, reason) => {\n setOpen(open);\n setOpenReason(reason || null);\n },\n placement,\n middleware: [offset(sideOffset), flip(), shift()],\n whileElementsMounted: autoUpdate,\n });\n\n const { status: transitionStatus } = useTransitionStatus(context);\n\n const hover = useHover(context, {\n enabled: openOnHover,\n mouseOnly: true,\n move: false,\n delay: {\n open: delay,\n close: closeDelay,\n },\n handleClose: safePolygon({ blockPointerEvents: true }),\n });\n const focus = useFocus(context);\n const dismiss = useDismiss(context);\n const role = useRole(context);\n\n const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);\n\n const updatePositioning = useCallback((newPlacement: Placement, newSideOffset: number) => {\n setPlacement(newPlacement);\n setSideOffset(newSideOffset);\n }, []);\n\n const value: PopoverContextType = useMemo(() => ({\n open,\n setOpen,\n openReason,\n refs,\n floatingStyles,\n getReferenceProps,\n getFloatingProps,\n context,\n updatePositioning,\n transitionStatus,\n }), [open, openReason, refs, floatingStyles, getReferenceProps, getFloatingProps, context, updatePositioning, transitionStatus]);\n\n return <PopoverContext.Provider value={value}>{children}</PopoverContext.Provider>;\n}\n\nfunction PopoverTrigger({ children }: PopoverTriggerProps): JSX.Element {\n const { refs, getReferenceProps, open } = usePopoverContext();\n\n // eslint-disable-next-line react/no-clone-element, react/no-children-only\n return cloneElement(Children.only(children) as JSX.Element, {\n ref: refs.setReference,\n ...getReferenceProps(),\n 'data-popup-open': open ? '' : undefined,\n });\n}\n\nfunction PopoverPositioner({ side = 'top', sideOffset = 5, children }: PopoverPositionerProps): JSX.Element | null {\n const { refs, floatingStyles, updatePositioning } = usePopoverContext();\n\n useEffect(() => {\n updatePositioning(side, sideOffset);\n }, [side, sideOffset, updatePositioning]);\n\n return (\n <div ref={refs.setFloating} style={floatingStyles}>\n {children}\n </div>\n );\n}\n\nfunction PopoverPopup({ className, children }: PopoverPopupProps): JSX.Element {\n const { getFloatingProps, context, transitionStatus } = usePopoverContext();\n const { refs, placement } = context;\n const triggerElement = refs.reference.current as HTMLElement | null;\n\n // Copy data attributes from trigger element\n const dataAttributes = triggerElement?.attributes\n ? Object.fromEntries(\n Array.from(triggerElement.attributes)\n .filter(attr => attr.name.startsWith('data-'))\n .map(attr => [attr.name, attr.value]),\n )\n : {};\n\n return (\n <FloatingFocusManager\n context={context}\n modal={false}\n initialFocus={-1}\n returnFocus={false}\n >\n <div\n className={className}\n {...getFloatingProps()}\n {...dataAttributes}\n data-side={placement}\n data-starting-style={transitionStatus === 'initial' ? '' : undefined}\n data-open={transitionStatus === 'initial' || transitionStatus === 'open' ? '' : undefined}\n data-ending-style={transitionStatus === 'close' || transitionStatus === 'unmounted' ? '' : undefined}\n data-closed={transitionStatus === 'close' || transitionStatus === 'unmounted' ? '' : undefined}\n >\n {children}\n </div>\n </FloatingFocusManager>\n );\n}\n\nfunction PopoverPortal({ children, root, rootId = '@default_portal_id' }: PopoverPortalProps): JSX.Element {\n return (\n <FloatingPortal root={root as HTMLElement} id={rootId as string}>\n {children}\n </FloatingPortal>\n );\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport const Popover: {\n Root: typeof PopoverRoot;\n Trigger: typeof PopoverTrigger;\n Positioner: typeof PopoverPositioner;\n Popup: typeof PopoverPopup;\n Portal: typeof PopoverPortal;\n} = {\n Root: PopoverRoot,\n Trigger: PopoverTrigger,\n Positioner: PopoverPositioner,\n Popup: PopoverPopup,\n Portal: PopoverPortal,\n};\n\nexport default Popover;\n","import type { PropsWithChildren } from 'react';\nimport type { ConnectedComponent } from '../utils/component-factory';\n\nimport { previewTimeDisplayStateDefinition } from '@videojs/core/store';\nimport { formatDisplayTime, shallowEqual } from '@videojs/utils';\n\nimport { useMediaSelector } from '@/store';\nimport { toConnectedComponent } from '../utils/component-factory';\n\nexport function usePreviewTimeDisplayState(_props: any): {\n previewTime: number;\n} {\n /** @TODO Fix type issues with hooks (CJP) */\n const mediaState = useMediaSelector(previewTimeDisplayStateDefinition.stateTransform, shallowEqual);\n\n // Preview time display is read-only, no request methods needed\n return {\n previewTime: mediaState.previewTime ?? 0,\n };\n}\n\nexport type PreviewTimeDisplayState = ReturnType<typeof usePreviewTimeDisplayState>;\n\nexport interface PreviewTimeDisplayProps extends React.ComponentProps<'span'> {\n showRemaining?: boolean;\n}\n\nexport function getPreviewTimeDisplayProps(\n props: PropsWithChildren,\n _state: ReturnType<typeof usePreviewTimeDisplayState>,\n): PropsWithChildren<Record<string, unknown>> {\n const baseProps: Record<string, any> = {\n /** external props spread last to allow for overriding */\n ...props,\n };\n\n return baseProps;\n}\n\nexport function renderPreviewTimeDisplay(props: PreviewTimeDisplayProps, state: PreviewTimeDisplayState): JSX.Element {\n const { showRemaining, ...restProps } = props;\n\n /** @TODO Should this live here or elsewhere? (CJP) */\n const timeLabel = formatDisplayTime(state.previewTime);\n\n return <span {...restProps}>{timeLabel}</span>;\n}\n\nexport const PreviewTimeDisplay: ConnectedComponent<PreviewTimeDisplayProps, typeof renderPreviewTimeDisplay>\n = toConnectedComponent(\n usePreviewTimeDisplayState,\n getPreviewTimeDisplayProps,\n renderPreviewTimeDisplay,\n 'PreviewTimeDisplay',\n );\n\nexport default PreviewTimeDisplay;\n","import type { ConnectedComponent } from '../utils/component-factory';\n\nimport { TimeSlider as CoreTimeSlider } from '@videojs/core';\n\nimport { timeSliderStateDefinition } from '@videojs/core/store';\nimport { shallowEqual } from '@videojs/utils';\nimport { useCallback, useMemo } from 'react';\n\nimport { useMediaSelector, useMediaStore } from '@/store';\nimport { toConnectedComponent, toContextComponent, useCore } from '../utils/component-factory';\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\nexport interface TimeSliderState {\n currentTime: number;\n duration: number;\n requestSeek: (time: number) => void;\n core: CoreTimeSlider;\n orientation: 'horizontal' | 'vertical';\n}\n\nexport interface TimeSliderProps extends React.ComponentPropsWithRef<'div'> {\n orientation?: 'horizontal' | 'vertical';\n}\n\ninterface TimeSliderRenderProps extends React.ComponentProps<'div'> {\n 'data-orientation'?: 'horizontal' | 'vertical';\n 'data-current-time'?: number;\n 'data-duration'?: number;\n}\n\n// ============================================================================\n// ROOT COMPONENT\n// ============================================================================\n\nexport function useTimeSliderRootState(props: TimeSliderProps): TimeSliderState {\n const { orientation = 'horizontal' } = props;\n const mediaStore = useMediaStore();\n const mediaState = useMediaSelector(timeSliderStateDefinition.stateTransform, shallowEqual);\n const mediaMethods = useMemo(() => timeSliderStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);\n const core = useCore(CoreTimeSlider, { ...mediaState, ...mediaMethods });\n\n return {\n ...mediaState,\n ...mediaMethods,\n orientation,\n core,\n };\n}\n\nexport function useTimeSliderRootProps(props: TimeSliderProps, state: TimeSliderState): TimeSliderRenderProps {\n const { _fillWidth, _pointerWidth, _currentTimeText, _durationText } = state.core.getState();\n\n const { children, className, id, style, orientation = 'horizontal', ref } = props;\n\n const internalRef = useCallback((el: HTMLDivElement) => {\n if (!el) return;\n state.core?.attach(el);\n }, [state.core]);\n\n const composedRef = useComposedRefs(ref, internalRef);\n\n return {\n ref: composedRef,\n id,\n role: 'slider',\n tabIndex: 0,\n 'aria-label': 'Seek',\n 'aria-valuemin': 0,\n 'aria-valuemax': Math.round(state.duration),\n 'aria-valuenow': Math.round(state.currentTime),\n 'aria-valuetext': `${_currentTimeText} of ${_durationText}`,\n 'aria-orientation': orientation,\n 'data-orientation': orientation,\n 'data-current-time': state.currentTime,\n 'data-duration': state.duration,\n className,\n style: {\n ...style,\n '--slider-fill': `${_fillWidth.toFixed(3)}%`,\n '--slider-pointer': `${(_pointerWidth * 100).toFixed(3)}%`,\n } as React.CSSProperties,\n children,\n };\n}\n\nexport function renderTimeSliderRoot(props: TimeSliderRenderProps): JSX.Element {\n return <div {...props} />;\n}\n\nconst TimeSliderRoot: ConnectedComponent<TimeSliderProps, typeof renderTimeSliderRoot> = toConnectedComponent(\n useTimeSliderRootState,\n useTimeSliderRootProps,\n renderTimeSliderRoot,\n 'TimeSlider.Root',\n);\n\n// ============================================================================\n// TRACK COMPONENT\n// ============================================================================\n\nexport function useTimeSliderTrackProps(props: React.ComponentProps<'div'>, context: TimeSliderState): TimeSliderRenderProps {\n return {\n ref: useCallback((el: HTMLDivElement) => {\n context.core?.setState({ _trackElement: el });\n }, [context.core]),\n 'data-orientation': context.orientation,\n ...props,\n style: {\n ...props.style,\n [context.orientation === 'horizontal' ? 'width' : 'height']: '100%',\n },\n };\n}\n\nexport function renderTimeSliderTrack(props: TimeSliderRenderProps): JSX.Element {\n return <div {...props} />;\n}\n\nconst TimeSliderTrack: ConnectedComponent<React.ComponentProps<'div'>, typeof renderTimeSliderTrack> = toContextComponent(\n useTimeSliderTrackProps,\n renderTimeSliderTrack,\n 'TimeSlider.Track',\n);\n\n// ============================================================================\n// THUMB COMPONENT\n// ============================================================================\n\nexport function getTimeSliderThumbProps(props: React.ComponentProps<'div'>, context: TimeSliderState): TimeSliderRenderProps {\n return {\n 'data-orientation': context.orientation,\n ...props,\n style: {\n ...props.style,\n [context.orientation === 'horizontal' ? 'insetInlineStart' : 'insetBlockEnd']: 'var(--slider-fill)',\n [context.orientation === 'horizontal' ? 'top' : 'left']: '50%',\n translate: context.orientation === 'horizontal' ? '-50% -50%' : '-50% 50%',\n position: 'absolute' as const,\n },\n };\n}\n\nexport function renderTimeSliderThumb(props: TimeSliderRenderProps): JSX.Element {\n return <div {...props} />;\n}\n\nconst TimeSliderThumb: ConnectedComponent<React.ComponentProps<'div'>, typeof renderTimeSliderThumb> = toContextComponent(\n getTimeSliderThumbProps,\n renderTimeSliderThumb,\n 'TimeSlider.Thumb',\n);\n\n// ============================================================================\n// POINTER COMPONENT\n// ============================================================================\n\nexport function getTimeSliderPointerProps(props: React.ComponentProps<'div'>, context: TimeSliderState): TimeSliderRenderProps {\n return {\n 'data-orientation': context.orientation,\n ...props,\n style: {\n ...props.style,\n [context.orientation === 'horizontal' ? 'width' : 'height']: 'var(--slider-pointer, 0%)',\n [context.orientation === 'horizontal' ? 'height' : 'width']: '100%',\n position: 'absolute' as const,\n },\n };\n}\n\nexport function renderTimeSliderPointer(props: TimeSliderRenderProps): JSX.Element {\n return <div {...props} />;\n}\n\nconst TimeSliderPointer: ConnectedComponent<\n React.ComponentProps<'div'>,\n typeof renderTimeSliderPointer\n> = toContextComponent(getTimeSliderPointerProps, renderTimeSliderPointer, 'TimeSlider.Pointer');\n\n// ============================================================================\n// PROGRESS COMPONENT\n// ============================================================================\n\nexport function getTimeSliderProgressProps(props: React.ComponentProps<'div'>, context: TimeSliderState): TimeSliderRenderProps {\n return {\n 'data-orientation': context.orientation,\n ...props,\n style: {\n ...props.style,\n [context.orientation === 'horizontal' ? 'width' : 'height']: 'var(--slider-fill, 0%)',\n [context.orientation === 'horizontal' ? 'height' : 'width']: '100%',\n [context.orientation === 'horizontal' ? 'top' : 'bottom']: '0',\n position: 'absolute' as const,\n },\n };\n}\n\nexport function renderTimeSliderProgress(props: TimeSliderRenderProps): JSX.Element {\n return <div {...props} />;\n}\n\nconst TimeSliderProgress: ConnectedComponent<\n React.ComponentProps<'div'>,\n typeof renderTimeSliderProgress\n> = toContextComponent(getTimeSliderProgressProps, renderTimeSliderProgress, 'TimeSlider.Progress');\n\n// ============================================================================\n// EXPORTS\n// ============================================================================\n\nexport const TimeSlider = Object.assign(\n {},\n {\n Root: TimeSliderRoot,\n Track: TimeSliderTrack,\n Thumb: TimeSliderThumb,\n Pointer: TimeSliderPointer,\n Progress: TimeSliderProgress,\n },\n) as {\n Root: typeof TimeSliderRoot;\n Track: typeof TimeSliderTrack;\n Thumb: typeof TimeSliderThumb;\n Pointer: typeof TimeSliderPointer;\n Progress: typeof TimeSliderProgress;\n};\n\nexport default TimeSlider;\n","import type { Placement } from '@floating-ui/react';\nimport type { MutableRefObject, ReactNode, RefObject } from 'react';\n\nimport {\n arrow,\n autoUpdate,\n flip,\n FloatingPortal,\n offset,\n shift,\n useClientPoint,\n useDismiss,\n useFloating,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n useTransitionStatus,\n} from '@floating-ui/react';\n\nimport {\n Children,\n cloneElement,\n createContext,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\ninterface UpdatePositioningProps {\n side: Placement;\n sideOffset: number;\n collisionPadding: number;\n}\n\ninterface TooltipContextType {\n arrowRef: MutableRefObject<HTMLElement | null>;\n context: ReturnType<typeof useFloating>['context'];\n transitionStatus: ReturnType<typeof useTransitionStatus>['status'];\n getReferenceProps: ReturnType<typeof useInteractions>['getReferenceProps'];\n getFloatingProps: ReturnType<typeof useInteractions>['getFloatingProps'];\n updatePositioning: (props: UpdatePositioningProps) => void;\n trackCursorAxis?: 'x' | 'y' | 'both' | undefined;\n}\n\ninterface TooltipRootProps {\n delay?: number;\n closeDelay?: number;\n children: ReactNode;\n trackCursorAxis?: 'x' | 'y' | 'both';\n}\n\ninterface TooltipTriggerProps {\n children: ReactNode;\n}\n\ninterface TooltipPositionerProps {\n side?: Placement;\n sideOffset?: number;\n collisionPadding?: number;\n children: ReactNode;\n}\n\ninterface TooltipPopupProps {\n className?: string;\n children: ReactNode;\n}\n\ninterface TooltipArrowProps {\n className?: string;\n children: ReactNode;\n}\n\ninterface TooltipPortalProps {\n children: ReactNode;\n root?: HTMLElement | ShadowRoot | MutableRefObject<HTMLElement | ShadowRoot | null> | null;\n rootId?: string;\n}\n\nconst TooltipContext = createContext<TooltipContextType | null>(null);\n\ninterface TooltipPositionerContextType {\n side: Placement;\n}\n\nconst TooltipPositionerContext = createContext<TooltipPositionerContextType | null>(null);\n\nfunction useTooltipContext(): TooltipContextType {\n const context = useContext(TooltipContext);\n if (!context) {\n throw new Error('Tooltip components must be used within TooltipRoot');\n }\n return context;\n}\n\nfunction useTooltipPositionerContext(): TooltipPositionerContextType {\n const context = useContext(TooltipPositionerContext);\n if (!context) {\n throw new Error('TooltipArrow must be used within TooltipPositioner');\n }\n return context;\n}\n\nfunction TooltipRoot({ delay = 0, closeDelay = 0, trackCursorAxis, children }: TooltipRootProps): JSX.Element {\n const [open, setOpen] = useState(false);\n const [placement, setPlacement] = useState<Placement>('top');\n const [sideOffset, setSideOffset] = useState(0);\n const [collisionPadding, setCollisionPadding] = useState(0);\n const arrowRef = useRef<HTMLElement | null>(null);\n\n const { context } = useFloating({\n open,\n onOpenChange: setOpen,\n placement,\n middleware: [\n offset(sideOffset),\n flip(),\n shift({ padding: collisionPadding }),\n arrow({\n element: arrowRef,\n }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n const { status: transitionStatus } = useTransitionStatus(context);\n\n const hover = useHover(context, {\n // restMs: 300, // this broke the time slider tooltip, todo: find solution!\n delay: {\n open: delay,\n close: closeDelay,\n },\n });\n const focus = useFocus(context);\n const dismiss = useDismiss(context);\n const role = useRole(context, { role: 'tooltip' });\n\n // Use client point hook when trackCursorAxis is enabled\n const clientPoint = useClientPoint(context, {\n axis: trackCursorAxis || 'both',\n enabled: !!trackCursorAxis,\n });\n\n // Combine interactions based on whether cursor tracking is enabled\n const interactions = trackCursorAxis\n ? [hover, focus, dismiss, role, clientPoint]\n : [hover, focus, dismiss, role];\n\n const { getReferenceProps, getFloatingProps } = useInteractions(interactions);\n\n const updatePositioning = useCallback(({ side, sideOffset, collisionPadding }: UpdatePositioningProps) => {\n setPlacement(side);\n setSideOffset(sideOffset);\n setCollisionPadding(collisionPadding);\n }, []);\n\n const value: TooltipContextType = useMemo(() => ({\n getReferenceProps,\n getFloatingProps,\n context,\n updatePositioning,\n arrowRef,\n transitionStatus,\n trackCursorAxis,\n }), [getReferenceProps, getFloatingProps, context, updatePositioning, transitionStatus, trackCursorAxis]);\n\n return <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>;\n}\n\nfunction TooltipTrigger({ children }: TooltipTriggerProps): JSX.Element {\n const { context, getReferenceProps } = useTooltipContext();\n const { refs, open } = context;\n\n // eslint-disable-next-line react/no-clone-element, react/no-children-only\n return cloneElement(Children.only(children) as JSX.Element, {\n ref: refs.setReference,\n ...getReferenceProps(),\n 'data-popup-open': open ? '' : undefined,\n });\n}\n\nfunction TooltipPositioner({\n side = 'top',\n sideOffset = 0,\n collisionPadding = 0,\n children,\n}: TooltipPositionerProps): JSX.Element | null {\n const { context, updatePositioning, trackCursorAxis } = useTooltipContext();\n const { refs, floatingStyles } = context;\n\n // Update positioning when props change\n useEffect(() => {\n updatePositioning({ side, sideOffset, collisionPadding });\n }, [side, sideOffset, collisionPadding, updatePositioning]);\n\n const positionerContextValue: TooltipPositionerContextType = useMemo(() => ({\n side,\n }), [side]);\n\n return (\n <TooltipPositionerContext.Provider value={positionerContextValue}>\n <div\n ref={refs.setFloating}\n style={{\n ...floatingStyles,\n pointerEvents: trackCursorAxis ? 'none' : undefined,\n }}\n >\n {children}\n </div>\n </TooltipPositionerContext.Provider>\n );\n}\n\nfunction TooltipPopup({ className = '', children }: TooltipPopupProps): JSX.Element | null {\n const { context, getFloatingProps, transitionStatus } = useTooltipContext();\n const { refs, placement } = context;\n const triggerElement = refs.reference.current as HTMLElement | null;\n\n // Copy data attributes from trigger element\n const dataAttributes = triggerElement?.attributes\n ? Object.fromEntries(\n Array.from(triggerElement.attributes)\n .filter(attr => attr.name.startsWith('data-'))\n .map(attr => [attr.name, attr.value]),\n )\n : {};\n\n return (\n <div\n className={className}\n {...getFloatingProps()}\n {...dataAttributes}\n data-side={placement}\n data-starting-style={transitionStatus === 'initial' ? '' : undefined}\n data-open={transitionStatus === 'initial' || transitionStatus === 'open' ? '' : undefined}\n data-ending-style={transitionStatus === 'close' || transitionStatus === 'unmounted' ? '' : undefined}\n data-closed={transitionStatus === 'close' || transitionStatus === 'unmounted' ? '' : undefined}\n >\n {children}\n </div>\n );\n}\n\nfunction TooltipArrow({ className = '', children }: TooltipArrowProps): JSX.Element {\n const { arrowRef, context } = useTooltipContext();\n const { side } = useTooltipPositionerContext();\n\n // Get arrow positioning data from floating-ui\n const { x: arrowX, y: arrowY } = context.middlewareData.arrow || { x: 0, y: 0 };\n\n return (\n <div\n ref={arrowRef as RefObject<HTMLDivElement>}\n className={className}\n aria-hidden=\"true\"\n data-side={side}\n style={{\n left: arrowX != null ? `${arrowX}px` : undefined,\n top: arrowY != null ? `${arrowY}px` : undefined,\n }}\n >\n {children}\n </div>\n );\n}\n\nfunction TooltipPortal({ children, root, rootId = '@default_portal_id' }: TooltipPortalProps): JSX.Element {\n return (\n <FloatingPortal root={root as HTMLElement} id={rootId as string}>\n {children}\n </FloatingPortal>\n );\n}\n\n// Export compound component\n// eslint-disable-next-line react-refresh/only-export-components\nexport const Tooltip: {\n Root: typeof TooltipRoot;\n Trigger: typeof TooltipTrigger;\n Positioner: typeof TooltipPositioner;\n Popup: typeof TooltipPopup;\n Arrow: typeof TooltipArrow;\n Portal: typeof TooltipPortal;\n} = {\n Root: TooltipRoot,\n Trigger: TooltipTrigger,\n Positioner: TooltipPositioner,\n Popup: TooltipPopup,\n Arrow: TooltipArrow,\n Portal: TooltipPortal,\n};\n\nexport default Tooltip;\n","import type { ConnectedComponent } from '../utils/component-factory';\n\nimport { VolumeSlider as CoreVolumeSlider } from '@videojs/core';\n\nimport { volumeSliderStateDefinition } from '@videojs/core/store';\nimport { shallowEqual } from '@videojs/utils';\nimport { useCallback, useMemo } from 'react';\n\nimport { useMediaSelector, useMediaStore } from '@/store';\nimport { toConnectedComponent, toContextComponent, useCore } from '../utils/component-factory';\n\nexport interface VolumeSliderState {\n volume: number;\n muted: boolean;\n volumeLevel: string;\n requestVolumeChange: (volume: number) => void;\n core: CoreVolumeSlider;\n orientation: 'horizontal' | 'vertical';\n}\n\nexport interface VolumeSliderProps extends React.ComponentProps<'div'> {\n orientation?: 'horizontal' | 'vertical';\n}\n\ninterface VolumeSliderRenderProps extends React.ComponentProps<'div'> {\n 'data-orientation'?: 'horizontal' | 'vertical';\n 'data-muted'?: boolean;\n 'data-volume-level'?: string;\n}\n\n// ============================================================================\n// ROOT COMPONENT\n// ============================================================================\n\nexport function useVolumeSliderRootState(props: VolumeSliderProps): VolumeSliderState {\n const { orientation = 'horizontal' } = props;\n const mediaStore = useMediaStore();\n const mediaState = useMediaSelector(volumeSliderStateDefinition.stateTransform, shallowEqual);\n const mediaMethods = useMemo(\n () => volumeSliderStateDefinition.createRequestMethods(mediaStore.dispatch),\n [mediaStore],\n );\n const core = useCore(CoreVolumeSlider, { ...mediaState, ...mediaMethods });\n\n return {\n ...mediaState,\n ...mediaMethods,\n orientation,\n core,\n };\n}\n\nexport function useVolumeSliderRootProps(props: VolumeSliderProps, state: VolumeSliderState): VolumeSliderRenderProps {\n const { _fillWidth, _pointerWidth, _volumeText } = state.core.getState();\n\n const { children, className, id, style, orientation = 'horizontal' } = props;\n\n return {\n ref: useCallback((el: HTMLDivElement) => {\n if (!el) return;\n state.core?.attach(el);\n }, []),\n id,\n role: 'slider',\n tabIndex: 0,\n 'aria-label': 'Volume',\n 'aria-valuemin': 0,\n 'aria-valuemax': 100,\n 'aria-valuenow': Math.round(state.volume * 100),\n 'aria-valuetext': _volumeText,\n 'aria-orientation': orientation,\n 'data-orientation': orientation,\n 'data-muted': state.muted,\n 'data-volume-level': state.volumeLevel,\n className,\n style: {\n ...style,\n '--slider-fill': `${_fillWidth.toFixed(3)}%`,\n '--slider-pointer': `${_pointerWidth.toFixed(3)}%`,\n } as React.CSSProperties,\n children,\n };\n}\n\nexport function renderVolumeSliderRoot(props: VolumeSliderRenderProps): JSX.Element {\n return <div {...props} />;\n}\n\nconst VolumeSliderRoot: ConnectedComponent<VolumeSliderProps, typeof renderVolumeSliderRoot> = toConnectedComponent(\n useVolumeSliderRootState,\n useVolumeSliderRootProps,\n renderVolumeSliderRoot,\n 'VolumeSlider.Root',\n);\n\n// ============================================================================\n// TRACK COMPONENT\n// ============================================================================\n\nexport function useVolumeSliderTrackProps(props: React.ComponentProps<'div'>, context: VolumeSliderState): VolumeSliderRenderProps {\n return {\n ref: useCallback((el: HTMLDivElement) => {\n context.core?.setState({ _trackElement: el });\n }, []),\n 'data-orientation': context.orientation,\n ...props,\n style: {\n ...props.style,\n [context.orientation === 'horizontal' ? 'width' : 'height']: '100%',\n },\n };\n}\n\nexport function renderVolumeSliderTrack(props: VolumeSliderRenderProps): JSX.Element {\n return <div {...props} />;\n}\n\nconst VolumeSliderTrack: ConnectedComponent<\n React.ComponentProps<'div'>,\n typeof renderVolumeSliderTrack\n> = toContextComponent(useVolumeSliderTrackProps, renderVolumeSliderTrack, 'VolumeSlider.Track');\n\n// ============================================================================\n// THUMB COMPONENT\n// ============================================================================\n\nexport function getVolumeSliderThumbProps(props: React.ComponentProps<'div'>, context: VolumeSliderState): VolumeSliderRenderProps {\n return {\n 'data-orientation': context.orientation,\n ...props,\n style: {\n ...props.style,\n [context.orientation === 'horizontal' ? 'insetInlineStart' : 'insetBlockEnd']: 'var(--slider-fill)',\n [context.orientation === 'horizontal' ? 'top' : 'left']: '50%',\n translate: context.orientation === 'horizontal' ? '-50% -50%' : '-50% 50%',\n position: 'absolute' as const,\n },\n };\n}\n\nexport function renderVolumeSliderThumb(props: VolumeSliderRenderProps): JSX.Element {\n return <div {...props} />;\n}\n\nconst VolumeSliderThumb: ConnectedComponent<\n React.ComponentProps<'div'>,\n typeof renderVolumeSliderThumb\n> = toContextComponent(getVolumeSliderThumbProps, renderVolumeSliderThumb, 'VolumeSlider.Thumb');\n\n// ============================================================================\n// PROGRESS COMPONENT\n// ============================================================================\n\nexport function getVolumeSliderProgressProps(props: React.ComponentProps<'div'>, context: VolumeSliderState): VolumeSliderRenderProps {\n return {\n 'data-orientation': context.orientation,\n ...props,\n style: {\n ...props.style,\n [context.orientation === 'horizontal' ? 'width' : 'height']: 'var(--slider-fill, 0%)',\n [context.orientation === 'horizontal' ? 'height' : 'width']: '100%',\n [context.orientation === 'horizontal' ? 'top' : 'bottom']: '0',\n position: 'absolute' as const,\n },\n };\n}\n\nexport function renderVolumeSliderProgress(props: VolumeSliderRenderProps): JSX.Element {\n return <div {...props} />;\n}\n\nconst VolumeSliderProgress: ConnectedComponent<\n React.ComponentProps<'div'>,\n typeof renderVolumeSliderProgress\n> = toContextComponent(getVolumeSliderProgressProps, renderVolumeSliderProgress, 'VolumeSlider.Progress');\n\n// ============================================================================\n// EXPORTS\n// ============================================================================\n\nexport const VolumeSlider = Object.assign(\n {},\n {\n Root: VolumeSliderRoot,\n Track: VolumeSliderTrack,\n Thumb: VolumeSliderThumb,\n Progress: VolumeSliderProgress,\n },\n) as {\n Root: typeof VolumeSliderRoot;\n Track: typeof VolumeSliderTrack;\n Thumb: typeof VolumeSliderThumb;\n Progress: typeof VolumeSliderProgress;\n};\n\nexport default VolumeSlider;\n"],"mappings":"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"}
package/dist/frosted-JuY6ZaAp.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"frosted-JuY6ZaAp.js","names":["styles: FrostedSkinStyles","styles","PlayButton","PlayIcon","PauseIcon","MuteButton","VolumeHighIcon","VolumeLowIcon","VolumeOffIcon","FullscreenEnterIcon","FullscreenExitIcon"],"sources":["../src/skins/frosted/styles.ts","../src/skins/frosted/FrostedSkin.tsx"],"sourcesContent":["import type { FrostedSkinStyles } from './types';\n\n// NOTE: Removing import to sidestep for compiler complexity (CJP)\n// import { cn } from '../../utils/cn';\n// A (very crude) utility to merge class names\n// Usually I'd use something like `clsx` or `classnames` but this is ok for our simple use case.\n// It just makes the billions of Tailwind classes a little easier to read.\nfunction cn(...classes: (string | undefined)[]): string {\n return classes.filter(Boolean).join(' ');\n}\n\nconst styles: FrostedSkinStyles = {\n MediaContainer: cn(\n 'vjs', // Scope preflight\n 'vjs:relative vjs:isolate vjs:@container/root vjs:group/root vjs:overflow-clip vjs:bg-black',\n // Base typography\n 'vjs:text-[0.8125rem]', // 13px\n // Fancy borders.\n 'vjs:after:absolute vjs:after:inset-0 vjs:after:ring-black/10 vjs:after:ring-1 vjs:dark:after:ring-white/10 vjs:after:ring-inset vjs:after:z-10 vjs:after:pointer-events-none vjs:after:rounded-[inherit]',\n 'vjs:before:absolute vjs:before:inset-px vjs:before:rounded-[inherit] vjs:before:ring-white/15 vjs:before:ring-1 vjs:before:ring-inset vjs:before:z-10 vjs:before:pointer-events-none vjs:dark:before:ring-0',\n // Prevent rounded corners in fullscreen.\n 'vjs:[&:fullscreen]:rounded-none',\n // Ensure the nested video inherits the radius.\n 'vjs:[&_video]:w-full vjs:[&_video]:h-full',\n ),\n Overlay: cn(\n 'vjs:opacity-0 vjs:delay-500 vjs:duration-300 vjs:rounded-[inherit] vjs:absolute vjs:inset-0 vjs:pointer-events-none vjs:bg-gradient-to-t vjs:from-black/50 vjs:via-black/20 vjs:to-transparent vjs:transition-opacity vjs:backdrop-saturate-150 vjs:backdrop-brightness-90',\n // Hide when playing (for now).\n // FIXME: This is crude temporary logic, we'll improve it later I guess with a [data-show-controls] attribute or something?\n 'vjs:has-[+.controls_[data-paused]]:opacity-100 vjs:has-[+.controls_[data-paused]]:delay-0 vjs:has-[+.controls_[data-paused]]:duration-100',\n 'vjs:has-[+.controls_[aria-expanded=\"true\"]]:opacity-100 vjs:has-[+.controls_[aria-expanded=\"true\"]]:delay-0 vjs:has-[+.controls_[aria-expanded=\"true\"]]:duration-100',\n 'vjs:group-hover/root:opacity-100 vjs:group-hover/root:delay-0 vjs:group-hover/root:duration-100',\n ),\n Surface: cn(\n 'vjs:bg-white/10 vjs:backdrop-blur-3xl vjs:backdrop-saturate-150 vjs:backdrop-brightness-90',\n // Ring and shadow\n 'vjs:ring vjs:ring-white/10 vjs:ring-inset vjs:shadow-sm vjs:shadow-black/15',\n // Border to enhance contrast on lighter videos\n 'vjs:after:absolute vjs:after:inset-0 vjs:after:ring vjs:after:rounded-[inherit] vjs:after:ring-black/15 vjs:after:pointer-events-none vjs:after:z-10',\n // Reduced transparency for users with preference\n // XXX: This requires a Tailwind custom variant (see 1 below)\n 'vjs:reduced-transparency:bg-black/70 vjs:reduced-transparency:ring-black vjs:reduced-transparency:after:ring-white/20',\n // High contrast mode\n 'vjs:contrast-more:bg-black/90 vjs:contrast-more:ring-black vjs:contrast-more:after:ring-white/20',\n ),\n Controls: cn(\n 'vjs:@container/controls vjs:absolute vjs:inset-x-3 vjs:bottom-3 vjs:rounded-full vjs:flex vjs:items-center vjs:p-1 vjs:gap-0.5 vjs:text-white',\n // Animation\n 'vjs:transition vjs:will-change-[transform,scale,filter,opacity] vjs:origin-bottom vjs:ease-out',\n // FIXME: Temporary className hook for above logic in the overlay. Can be removed once have a proper way to handle controls visibility.\n 'controls',\n // FIXME: Temporary hide/show logic\n 'vjs:scale-90 vjs:opacity-0 vjs:blur-sm vjs:delay-500 vjs:duration-300',\n 'vjs:has-[[data-paused]]:scale-100 vjs:has-[[data-paused]]:opacity-100 vjs:has-[[data-paused]]:blur-none vjs:has-[[data-paused]]:delay-0 vjs:has-[[data-paused]]:duration-100',\n 'vjs:has-[[aria-expanded=\"true\"]]:scale-100 vjs:has-[[aria-expanded=\"true\"]]:opacity-100 vjs:has-[[aria-expanded=\"true\"]]:blur-none vjs:has-[[aria-expanded=\"true\"]]:delay-0 vjs:has-[[aria-expanded=\"true\"]]:duration-100',\n 'vjs:group-hover/root:scale-100 vjs:group-hover/root:opacity-100 vjs:group-hover/root:blur-none vjs:group-hover/root:delay-0 vjs:group-hover/root:duration-100',\n ),\n Icon: cn('icon'),\n Button: cn(\n 'vjs:group/button vjs:cursor-pointer vjs:relative vjs:shrink-0 vjs:transition-[color,background,outline-offset] vjs:select-none vjs:p-2 vjs:rounded-full',\n // Background/foreground\n 'vjs:bg-transparent vjs:text-white/90',\n // Hover and focus states\n 'vjs:hover:no-underline vjs:hover:bg-white/10 vjs:hover:text-white vjs:focus-visible:no-underline vjs:focus-visible:bg-white/10 vjs:focus-visible:text-white',\n // Focus state\n 'vjs:-outline-offset-2 vjs:focus-visible:outline-2 vjs:focus-visible:outline-offset-2 vjs:focus-visible:outline-blue-500',\n // Disabled state\n 'vjs:disabled:grayscale vjs:disabled:opacity-50 vjs:disabled:cursor-not-allowed',\n // Loading state\n 'vjs:aria-busy:pointer-events-none vjs:aria-busy:cursor-not-allowed',\n // Expanded state\n 'vjs:aria-expanded:bg-white/10 vjs:aria-expanded:text-white',\n ),\n IconButton: cn(\n 'vjs:grid vjs:[&_.icon]:[grid-area:1/1]',\n 'vjs:[&_.icon]:shrink-0 vjs:[&_.icon]:transition-opacity vjs:[&_.icon]:duration-150 vjs:[&_.icon]:ease-linear vjs:[&_.icon]:drop-shadow-[0_1px_0_var(--tw-shadow-color)] vjs:[&_.icon]:shadow-black/25',\n ),\n PlayButton: cn(\n 'vjs:[&_.pause-icon]:opacity-100 vjs:[&[data-paused]_.pause-icon]:opacity-0',\n 'vjs:[&_.play-icon]:opacity-0 vjs:[&[data-paused]_.play-icon]:opacity-100',\n ),\n PlayIcon: cn('play-icon'),\n PauseIcon: cn('pause-icon'),\n PlayTooltipPopup: cn(\n 'vjs:[&_.pause-tooltip]:inline vjs:[&[data-paused]_.pause-tooltip]:hidden',\n 'vjs:[&_.play-tooltip]:hidden vjs:[&[data-paused]_.play-tooltip]:inline',\n ),\n PlayTooltip: cn('play-tooltip'),\n PauseTooltip: cn('pause-tooltip'),\n MuteButton: cn(\n 'vjs:[&_.icon]:hidden',\n 'vjs:[&[data-volume-level=\"high\"]_.volume-high-icon]:inline',\n 'vjs:[&[data-volume-level=\"medium\"]_.volume-low-icon]:inline',\n 'vjs:[&[data-volume-level=\"low\"]_.volume-low-icon]:inline',\n 'vjs:[&[data-volume-level=\"off\"]_.volume-off-icon]:inline',\n ),\n VolumeHighIcon: cn('volume-high-icon'),\n VolumeLowIcon: cn('volume-low-icon'),\n VolumeOffIcon: cn('volume-off-icon'),\n FullscreenButton: cn(\n 'vjs:[&_.fullscreen-enter-icon]:opacity-100 vjs:[&[data-fullscreen]_.fullscreen-enter-icon]:opacity-0',\n 'vjs:[&_.fullscreen-exit-icon]:opacity-0 vjs:[&[data-fullscreen]_.fullscreen-exit-icon]:opacity-100',\n 'vjs:[&_path]:transition-transform vjs:ease-out',\n ),\n FullscreenEnterIcon: cn(\n 'fullscreen-enter-icon',\n 'vjs:group-hover/button:[&_.arrow-1]:-translate-x-px vjs:group-hover/button:[&_.arrow-1]:-translate-y-px',\n 'vjs:group-hover/button:[&_.arrow-2]:translate-x-px vjs:group-hover/button:[&_.arrow-2]:translate-y-px',\n ),\n FullscreenExitIcon: cn(\n 'fullscreen-exit-icon',\n 'vjs:[&_.arrow-1]:-translate-x-px vjs:[&_.arrow-1]:-translate-y-px',\n 'vjs:[&_.arrow-2]:translate-x-px vjs:[&_.arrow-2]:translate-y-px',\n 'vjs:group-hover/button:[&_.arrow-1]:translate-0',\n 'vjs:group-hover/button:[&_.arrow-2]:translate-0',\n ),\n FullscreenTooltipPopup: cn(\n 'vjs:[&_.fullscreen-enter-tooltip]:inline vjs:[&[data-fullscreen]_.fullscreen-enter-tooltip]:hidden',\n 'vjs:[&_.fullscreen-exit-tooltip]:hidden vjs:[&[data-fullscreen]_.fullscreen-exit-tooltip]:inline',\n ),\n FullscreenEnterTooltip: cn('fullscreen-enter-tooltip'),\n FullscreenExitTooltip: cn('fullscreen-exit-tooltip'),\n TimeControls: cn('vjs:flex-1 vjs:flex vjs:items-center vjs:gap-3 vjs:px-1.5'),\n TimeDisplay: cn('vjs:tabular-nums vjs:text-shadow-2xs/25'),\n SliderRoot: cn(\n 'vjs:group/slider vjs:outline-0 vjs:flex vjs:items-center vjs:justify-center vjs:flex-1 vjs:relative vjs:rounded-full',\n 'vjs:[&[data-orientation=\"horizontal\"]]:h-5 vjs:[&[data-orientation=\"horizontal\"]]:min-w-20',\n 'vjs:[&[data-orientation=\"vertical\"]]:w-5 vjs:[&[data-orientation=\"vertical\"]]:h-20',\n ),\n SliderTrack: cn(\n 'vjs:relative vjs:select-none vjs:transition-[outline-offset] vjs:rounded-[inherit] vjs:bg-white/20 vjs:ring-1 vjs:ring-black/5',\n 'vjs:[&[data-orientation=\"horizontal\"]]:w-full vjs:[&[data-orientation=\"horizontal\"]]:h-1',\n 'vjs:[&[data-orientation=\"vertical\"]]:w-1',\n 'vjs:-outline-offset-2 vjs:group-focus-visible/slider:outline-2 vjs:group-focus-visible/slider:outline-offset-6 vjs:group-focus-visible/slider:outline-blue-500',\n ),\n SliderProgress: cn('vjs:bg-white vjs:rounded-[inherit]'),\n // TODO: Work out what we want to do here.\n SliderPointer: cn('vjs:bg-white/20 vjs:rounded-[inherit]'),\n SliderThumb: cn(\n 'vjs:bg-white vjs:z-10 vjs:select-none vjs:ring vjs:ring-black/10 vjs:rounded-full vjs:shadow-sm vjs:shadow-black/15 vjs:opacity-0 vjs:transition-[opacity,height,width] vjs:ease-out',\n 'vjs:group-hover/slider:opacity-100 vjs:group-focus-within/slider:opacity-100',\n 'vjs:size-2.5 vjs:active:size-3 vjs:group-active/slider:size-3',\n 'vjs:[&[data-orientation=\"horizontal\"]]:hover:cursor-ew-resize',\n 'vjs:[&[data-orientation=\"vertical\"]]:hover:cursor-ns-resize',\n ),\n PopupAnimation: cn(\n // Animation\n // XXX: We can't use transforms since floating UI uses them for positioning.\n 'vjs:transition-[transform,scale,opacity,filter] vjs:origin-bottom vjs:duration-200 vjs:data-[instant]:duration-0',\n 'vjs:data-[starting-style]:scale-0 vjs:data-[starting-style]:opacity-0 vjs:data-[starting-style]:blur-sm',\n 'vjs:data-[ending-style]:scale-0 vjs:data-[ending-style]:opacity-0 vjs:data-[ending-style]:blur-sm',\n ),\n PopoverPopup: cn(\n 'vjs:relative vjs:px-1 vjs:py-3 vjs:rounded-full',\n ),\n TooltipPopup: cn(\n 'vjs:whitespace-nowrap vjs:rounded-full vjs:text-white vjs:text-xs vjs:@7xl/root:text-sm vjs:px-2.5 vjs:py-1',\n ),\n};\n\n/*\n[1] @custom-variant reduced-transparency @media (prefers-reduced-transparency: reduce);\n*/\n\nexport default styles;\n","import type { PropsWithChildren } from 'react';\n\nimport { CurrentTimeDisplay } from '@/components/CurrentTimeDisplay';\nimport { DurationDisplay } from '@/components/DurationDisplay';\nimport { FullscreenButton } from '@/components/FullscreenButton';\nimport { MediaContainer } from '@/components/MediaContainer';\nimport MuteButton from '@/components/MuteButton';\nimport PlayButton from '@/components/PlayButton';\nimport { Popover } from '@/components/Popover';\nimport { PreviewTimeDisplay } from '@/components/PreviewTimeDisplay';\nimport { TimeSlider } from '@/components/TimeSlider';\nimport { Tooltip } from '@/components/Tooltip';\nimport { VolumeSlider } from '@/components/VolumeSlider';\nimport {\n FullscreenEnterIcon,\n FullscreenExitIcon,\n PauseIcon,\n PlayIcon,\n VolumeHighIcon,\n VolumeLowIcon,\n VolumeOffIcon,\n} from '@/icons';\nimport styles from './styles';\n\ntype SkinProps = PropsWithChildren<{\n className?: string;\n}>;\n\nexport default function FrostedSkin({ children, className = '' }: SkinProps): JSX.Element {\n return (\n <MediaContainer className={`${styles.MediaContainer} ${className}`}>\n {children}\n\n <div className={styles.Overlay} />\n\n <div className={`${styles.Surface} ${styles.Controls}`} data-testid=\"media-controls\">\n <Tooltip.Root delay={500}>\n <Tooltip.Trigger>\n <PlayButton className={`${styles.Button} ${styles.IconButton} ${styles.PlayButton}`}>\n <PlayIcon className={`${styles.PlayIcon} ${styles.Icon}`} />\n <PauseIcon className={`${styles.PauseIcon} ${styles.Icon}`} />\n </PlayButton>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Positioner side=\"top\" sideOffset={12} collisionPadding={12}>\n <Tooltip.Popup className={`${styles.TooltipPopup} ${styles.Surface} ${styles.PopupAnimation} ${styles.PlayTooltipPopup}`}>\n <span className={styles.PlayTooltip}>Play</span>\n <span className={styles.PauseTooltip}>Pause</span>\n </Tooltip.Popup>\n </Tooltip.Positioner>\n </Tooltip.Portal>\n </Tooltip.Root>\n\n <div className={styles.TimeControls}>\n <CurrentTimeDisplay\n // Use showRemaining to show count down/remaining time\n // showRemaining\n className={styles.TimeDisplay}\n />\n\n <Tooltip.Root trackCursorAxis=\"x\">\n <Tooltip.Trigger>\n <TimeSlider.Root className={styles.SliderRoot}>\n <TimeSlider.Track className={styles.SliderTrack}>\n <TimeSlider.Progress className={styles.SliderProgress} />\n <TimeSlider.Pointer className={styles.SliderPointer} />\n </TimeSlider.Track>\n <TimeSlider.Thumb className={styles.SliderThumb} />\n </TimeSlider.Root>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Positioner side=\"top\" sideOffset={18} collisionPadding={12}>\n <Tooltip.Popup className={`${styles.Surface} ${styles.PopupAnimation} ${styles.TooltipPopup}`}>\n <PreviewTimeDisplay className={styles.TimeDisplay} />\n </Tooltip.Popup>\n </Tooltip.Positioner>\n </Tooltip.Portal>\n </Tooltip.Root>\n\n <DurationDisplay className={styles.TimeDisplay} />\n </div>\n\n <Popover.Root openOnHover delay={200} closeDelay={100}>\n <Popover.Trigger>\n <MuteButton className={`${styles.Button} ${styles.IconButton} ${styles.MuteButton}`}>\n <VolumeHighIcon className={`${styles.VolumeHighIcon} ${styles.Icon}`} />\n <VolumeLowIcon className={`${styles.VolumeLowIcon} ${styles.Icon}`} />\n <VolumeOffIcon className={`${styles.VolumeOffIcon} ${styles.Icon}`} />\n </MuteButton>\n </Popover.Trigger>\n <Popover.Portal>\n <Popover.Positioner side=\"top\" sideOffset={12}>\n <Popover.Popup className={`${styles.Surface} ${styles.PopupAnimation} ${styles.PopoverPopup}`}>\n <VolumeSlider.Root className={styles.SliderRoot} orientation=\"vertical\">\n <VolumeSlider.Track className={styles.SliderTrack}>\n <VolumeSlider.Progress className={styles.SliderProgress} />\n </VolumeSlider.Track>\n <VolumeSlider.Thumb className={styles.SliderThumb} />\n </VolumeSlider.Root>\n </Popover.Popup>\n </Popover.Positioner>\n </Popover.Portal>\n </Popover.Root>\n\n <Tooltip.Root delay={500}>\n <Tooltip.Trigger>\n <FullscreenButton className={`${styles.Button} ${styles.IconButton} ${styles.FullscreenButton}`}>\n <FullscreenEnterIcon className={`${styles.FullscreenEnterIcon} ${styles.Icon}`} />\n <FullscreenExitIcon className={`${styles.FullscreenExitIcon} ${styles.Icon}`} />\n </FullscreenButton>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Positioner side=\"top\" sideOffset={12} collisionPadding={12}>\n <Tooltip.Popup className={`${styles.Surface} ${styles.PopupAnimation} ${styles.TooltipPopup} ${styles.FullscreenTooltipPopup}`}>\n <span className={styles.FullscreenEnterTooltip}>Enter Fullscreen</span>\n <span className={styles.FullscreenExitTooltip}>Exit Fullscreen</span>\n </Tooltip.Popup>\n </Tooltip.Positioner>\n </Tooltip.Portal>\n </Tooltip.Root>\n </div>\n </MediaContainer>\n );\n}\n\n// function ArrowSvg(props: React.ComponentProps<'svg'>) {\n// return (\n// <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" {...props}>\n// <path\n// d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n// className={styles.ArrowFill}\n// />\n// <path\n// d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n// className={styles.ArrowOuterStroke}\n// />\n// <path\n// d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n// className={styles.ArrowInnerStroke}\n// />\n// </svg>\n// );\n// }\n"],"mappings":"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"}
package/dist/minimal-pUeFJF1F.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"minimal-pUeFJF1F.js","names":["styles: MinimalSkinStyles","styles","Tooltip","PlayButton","PlayIcon","PauseIcon","PreviewTimeDisplay","Popover","MuteButton","VolumeHighIcon","VolumeLowIcon","VolumeOffIcon","VolumeSlider","FullscreenEnterAltIcon","FullscreenExitAltIcon"],"sources":["../src/skins/minimal/styles.ts","../src/skins/minimal/MinimalSkin.tsx"],"sourcesContent":["import type { MinimalSkinStyles } from './types';\n\n// NOTE: Removing import to sidestep for compiler complexity (CJP)\n// import { cn } from '../../utils/cn';\n// A (very crude) utility to merge class names\n// Usually I'd use something like `clsx` or `classnames` but this is ok for our simple use case.\n// It just makes the billions of Tailwind classes a little easier to read.\nfunction cn(...classes: (string | undefined)[]): string {\n return classes.filter(Boolean).join(' ');\n}\n\nconst styles: MinimalSkinStyles = {\n MediaContainer: cn(\n 'vjs', // Scope preflight\n 'vjs:relative vjs:isolate vjs:@container/root vjs:group/root vjs:overflow-clip vjs:bg-black',\n // Base typography\n 'vjs:text-[0.8125rem]', // 13px\n 'vjs:after:absolute vjs:after:inset-0 vjs:after:ring-black/20 vjs:after:ring-1 vjs:dark:after:ring-white/20 vjs:after:ring-inset vjs:after:z-10 vjs:after:pointer-events-none vjs:after:rounded-[inherit]',\n // Prevent rounded corners in fullscreen.\n 'vjs:[&:fullscreen]:rounded-none',\n // Ensure the nested video inherits the radius.\n 'vjs:[&_video]:w-full vjs:[&_video]:h-full',\n ),\n Overlay: cn(\n 'vjs:absolute vjs:inset-0 vjs:rounded-[inherit] vjs:pointer-events-none',\n 'vjs:bg-gradient-to-t vjs:from-black/70 vjs:via-black/50 vjs:via-[7.5rem] vjs:to-transparent',\n 'vjs:opacity-0 vjs:delay-500 vjs:duration-300',\n // FIXME: Temporary hide/show logic\n 'vjs:has-[+.controls_[data-paused]]:opacity-100 vjs:has-[+.controls_[data-paused]]:delay-0 vjs:has-[+.controls_[data-paused]]:duration-75',\n 'vjs:has-[+.controls_[aria-expanded=\"true\"]]:opacity-100 vjs:has-[+.controls_[aria-expanded=\"true\"]]:delay-0 vjs:has-[+.controls_[aria-expanded=\"true\"]]:duration-75',\n 'vjs:group-hover/root:opacity-100 vjs:group-hover/root:delay-0 vjs:group-hover/root:duration-75',\n // High contrast mode\n 'vjs:contrast-more:from-black/75',\n ),\n Controls: cn(\n 'controls', // FIXME: Temporary className hook for above logic in the overlay. Can be removed once have a proper way to handle controls visibility.\n 'vjs:@container/controls vjs:absolute vjs:inset-x-0 vjs:bottom-0 vjs:flex vjs:items-center vjs:gap-3.5 vjs:z-20 vjs:px-3 vjs:pb-3 vjs:pt-10 vjs:text-white',\n // Animation\n 'vjs:transition vjs:will-change-[transform,filter,opacity] vjs:ease-out',\n // FIXME: Temporary hide/show logic\n 'vjs:translate-y-full vjs:opacity-0 vjs:blur-sm vjs:delay-500 vjs:duration-300',\n 'vjs:has-[[data-paused]]:translate-y-0 vjs:has-[[data-paused]]:opacity-100 vjs:has-[[data-paused]]:blur-none vjs:has-[[data-paused]]:delay-0 vjs:has-[[data-paused]]:duration-75',\n 'vjs:has-[[aria-expanded=\"true\"]]:translate-y-0 vjs:has-[[aria-expanded=\"true\"]]:opacity-100 vjs:has-[[aria-expanded=\"true\"]]:blur-none vjs:has-[[aria-expanded=\"true\"]]:delay-0 vjs:has-[[aria-expanded=\"true\"]]:duration-75',\n 'vjs:group-hover/root:translate-y-0 vjs:group-hover/root:opacity-100 vjs:group-hover/root:blur-none vjs:group-hover/root:delay-0 vjs:group-hover/root:duration-75',\n ),\n Icon: cn('icon'),\n TimeDisplayGroup: cn('flex items-center gap-1'),\n Button: cn(\n 'vjs:group/button vjs:cursor-pointer vjs:relative vjs:shrink-0 vjs:transition-[color,background,outline-offset] vjs:select-none vjs:p-2.5 vjs:rounded-md',\n // Background/foreground\n 'vjs:bg-transparent vjs:text-white',\n // Hover and focus states\n 'vjs:hover:text-white/80 vjs:focus-visible:text-white/80',\n // Focus state\n 'vjs:-outline-offset-2 vjs:focus-visible:outline-2 vjs:focus-visible:outline-offset-2 vjs:focus-visible:outline-white',\n // Disabled state\n 'vjs:disabled:grayscale vjs:disabled:opacity-50 vjs:disabled:cursor-not-allowed',\n // Loading state\n 'vjs:aria-busy:pointer-events-none vjs:aria-busy:cursor-not-allowed',\n // Expanded state\n 'vjs:aria-expanded:text-white/80',\n ),\n ButtonGroup: cn('vjs:flex vjs:items-center vjs:gap-1.5'),\n IconButton: cn(\n 'vjs:grid vjs:[&_.icon]:[grid-area:1/1]',\n 'vjs:[&_.icon]:shrink-0 vjs:[&_.icon]:transition-opacity vjs:[&_.icon]:duration-150 vjs:[&_.icon]:ease-linear vjs:[&_.icon]:drop-shadow-[0_1px_0_var(--tw-shadow-color)] vjs:[&_.icon]:shadow-black/40',\n ),\n PlayButton: cn(\n 'vjs:[&_.pause-icon]:opacity-100 vjs:[&[data-paused]_.pause-icon]:opacity-0',\n 'vjs:[&_.play-icon]:opacity-0 vjs:[&[data-paused]_.play-icon]:opacity-100',\n ),\n PlayIcon: cn('play-icon'),\n PauseIcon: cn('pause-icon'),\n PlayTooltipPopup: cn(\n 'vjs:[&_.pause-tooltip]:inline vjs:[&[data-paused]_.pause-tooltip]:hidden',\n 'vjs:[&_.play-tooltip]:hidden vjs:[&[data-paused]_.play-tooltip]:inline',\n ),\n PlayTooltip: cn('play-tooltip'),\n PauseTooltip: cn('pause-tooltip'),\n MuteButton: cn(\n 'vjs:[&_.icon]:hidden',\n 'vjs:[&[data-volume-level=\"high\"]_.volume-high-icon]:inline',\n 'vjs:[&[data-volume-level=\"medium\"]_.volume-low-icon]:inline',\n 'vjs:[&[data-volume-level=\"low\"]_.volume-low-icon]:inline',\n 'vjs:[&[data-volume-level=\"off\"]_.volume-off-icon]:inline',\n ),\n VolumeHighIcon: cn('volume-high-icon'),\n VolumeLowIcon: cn('volume-low-icon'),\n VolumeOffIcon: cn('volume-off-icon'),\n FullscreenButton: cn(\n 'vjs:[&_.fullscreen-enter-icon]:opacity-100 vjs:[&[data-fullscreen]_.fullscreen-enter-icon]:opacity-0',\n 'vjs:[&_.fullscreen-exit-icon]:opacity-0 vjs:[&[data-fullscreen]_.fullscreen-exit-icon]:opacity-100',\n 'vjs:[&_path]:transition-transform vjs:ease-out',\n ),\n FullscreenEnterIcon: cn(\n 'fullscreen-enter-icon',\n 'vjs:group-hover/button:[&_.arrow-1]:translate-x-px vjs:group-hover/button:[&_.arrow-1]:-translate-y-px',\n 'vjs:group-hover/button:[&_.arrow-2]:-translate-x-px vjs:group-hover/button:[&_.arrow-2]:translate-y-px',\n ),\n FullscreenExitIcon: cn(\n 'fullscreen-exit-icon',\n 'vjs:[&_.arrow-1]:translate-x-px vjs:[&_.arrow-1]:-translate-y-px',\n 'vjs:[&_.arrow-2]:-translate-x-px vjs:[&_.arrow-2]:translate-y-px',\n 'vjs:group-hover/button:[&_.arrow-1]:translate-0',\n 'vjs:group-hover/button:[&_.arrow-2]:translate-0',\n ),\n FullscreenTooltipPopup: cn(\n 'vjs:[&_.fullscreen-enter-tooltip]:inline vjs:[&[data-fullscreen]_.fullscreen-enter-tooltip]:hidden',\n 'vjs:[&_.fullscreen-exit-tooltip]:hidden vjs:[&[data-fullscreen]_.fullscreen-exit-tooltip]:inline',\n ),\n FullscreenEnterTooltip: cn('fullscreen-enter-tooltip'),\n FullscreenExitTooltip: cn('fullscreen-exit-tooltip'),\n TimeSliderRoot: cn('vjs:mx-2'),\n TimeDisplay: cn('vjs:tabular-nums vjs:text-shadow-2xs/20'),\n DurationDisplay: cn('vjs:text-white/50 vjs:contents'),\n SliderRoot: cn(\n 'vjs:group/slider vjs:outline-0 vjs:flex vjs:items-center vjs:justify-center vjs:flex-1 vjs:group/slider vjs:relative vjs:rounded-full',\n 'vjs:[&[data-orientation=\"horizontal\"]]:h-5 vjs:[&[data-orientation=\"horizontal\"]]:min-w-20',\n 'vjs:[&[data-orientation=\"vertical\"]]:w-5 vjs:[&[data-orientation=\"vertical\"]]:h-18',\n ),\n SliderTrack: cn(\n 'vjs:relative vjs:select-none vjs:rounded-[inherit] vjs:bg-white/10',\n 'vjs:[&[data-orientation=\"horizontal\"]]:w-full vjs:[&[data-orientation=\"horizontal\"]]:h-[0.1875rem]',\n 'vjs:[&[data-orientation=\"vertical\"]]:w-[0.1875rem]',\n 'vjs:-outline-offset-2 vjs:group-focus-visible/slider:outline-2 vjs:group-focus-visible/slider:outline-offset-6 vjs:group-focus-visible/slider:outline-white',\n ),\n SliderProgress: cn('vjs:bg-white vjs:rounded-[inherit]'),\n SliderPointer: cn('vjs:hidden'),\n SliderThumb: cn(\n 'vjs:bg-white vjs:z-10 vjs:size-3 vjs:select-none vjs:ring vjs:ring-black/10 vjs:rounded-full vjs:shadow-sm vjs:shadow-black/15 vjs:transition-[opacity,scale] vjs:ease-out vjs:opacity-0 vjs:scale-70 vjs:origin-center',\n 'vjs:group-hover/slider:opacity-100 vjs:group-hover/slider:scale-100',\n 'vjs:[&[data-orientation=\"horizontal\"]]:hover:cursor-ew-resize',\n 'vjs:[&[data-orientation=\"vertical\"]]:hover:cursor-ns-resize',\n ),\n PopupAnimation: cn(\n // Animation\n // XXX: We can't use transforms since floating UI uses them for positioning.\n 'vjs:transition-[transform,scale,opacity,filter] vjs:origin-bottom vjs:duration-200 vjs:data-[instant]:duration-0',\n 'vjs:data-[starting-style]:scale-0 vjs:data-[starting-style]:opacity-0 vjs:data-[starting-style]:blur-sm',\n 'vjs:data-[ending-style]:scale-0 vjs:data-[ending-style]:opacity-0 vjs:data-[ending-style]:blur-sm',\n ),\n PopoverPopup: cn(\n 'vjs:py-2',\n ),\n TooltipPopup: cn(\n 'vjs:whitespace-nowrap vjs:flex vjs:flex-col vjs:rounded vjs:text-white vjs:text-xs vjs:@7xl/root:text-sm vjs:px-2 vjs:py-1 vjs:bg-white/20 vjs:backdrop-blur-3xl vjs:backdrop-saturate-150 vjs:backdrop-brightness-90 vjs:shadow-md vjs:shadow-black/5',\n ),\n};\n\nexport default styles;\n","import type { PropsWithChildren } from 'react';\n\nimport { CurrentTimeDisplay } from '@/components/CurrentTimeDisplay';\nimport { DurationDisplay } from '@/components/DurationDisplay';\nimport { FullscreenButton } from '@/components/FullscreenButton';\nimport { MediaContainer } from '@/components/MediaContainer';\nimport MuteButton from '@/components/MuteButton';\nimport PlayButton from '@/components/PlayButton';\nimport Popover from '@/components/Popover';\nimport PreviewTimeDisplay from '@/components/PreviewTimeDisplay';\nimport { TimeSlider } from '@/components/TimeSlider';\nimport Tooltip from '@/components/Tooltip';\nimport VolumeSlider from '@/components/VolumeSlider';\nimport {\n FullscreenEnterAltIcon,\n FullscreenExitAltIcon,\n PauseIcon,\n PlayIcon,\n VolumeHighIcon,\n VolumeLowIcon,\n VolumeOffIcon,\n} from '@/icons';\nimport styles from './styles';\n\ntype SkinProps = PropsWithChildren<{\n className?: string;\n}>;\n\nexport default function MinimalSkin({ children, className = '' }: SkinProps): JSX.Element {\n return (\n <MediaContainer className={`${styles.MediaContainer} ${className}`}>\n {children}\n\n <div className={styles.Overlay} />\n\n <div className={styles.Controls}>\n <Tooltip.Root delay={500} closeDelay={0}>\n <Tooltip.Trigger>\n <PlayButton className={`${styles.Button} ${styles.IconButton} ${styles.PlayButton}`}>\n <PlayIcon className={`${styles.PlayIcon} ${styles.Icon}`} />\n <PauseIcon className={`${styles.PauseIcon} ${styles.Icon}`} />\n </PlayButton>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Positioner side=\"top-start\" sideOffset={6} collisionPadding={12}>\n <Tooltip.Popup className={`${styles.PopupAnimation} ${styles.TooltipPopup} ${styles.PlayTooltipPopup}`}>\n <span className={styles.PlayTooltip}>Play</span>\n <span className={styles.PauseTooltip}>Pause</span>\n </Tooltip.Popup>\n </Tooltip.Positioner>\n </Tooltip.Portal>\n </Tooltip.Root>\n\n <div className={styles.TimeDisplayGroup}>\n <CurrentTimeDisplay\n // Use showRemaining to show count down/remaining time\n // showRemaining\n className={styles.TimeDisplay}\n />\n\n <span className={styles.DurationDisplay}>\n /\n <DurationDisplay className={`${styles.TimeDisplay}`} />\n </span>\n </div>\n\n <Tooltip.Root trackCursorAxis=\"x\">\n <Tooltip.Trigger>\n <TimeSlider.Root className={styles.SliderRoot}>\n <TimeSlider.Track className={styles.SliderTrack}>\n <TimeSlider.Progress className={styles.SliderProgress} />\n <TimeSlider.Pointer className={styles.SliderPointer} />\n </TimeSlider.Track>\n <TimeSlider.Thumb className={styles.SliderThumb} />\n </TimeSlider.Root>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Positioner side=\"top\" sideOffset={12} collisionPadding={12}>\n <Tooltip.Popup className={`${styles.PopupAnimation} ${styles.TooltipPopup}`}>\n <PreviewTimeDisplay className={styles.TimeDisplay} />\n </Tooltip.Popup>\n </Tooltip.Positioner>\n </Tooltip.Portal>\n </Tooltip.Root>\n\n <div className={styles.ButtonGroup}>\n <Popover.Root openOnHover delay={200} closeDelay={300}>\n <Popover.Trigger>\n <MuteButton className={`${styles.Button} ${styles.IconButton} ${styles.MuteButton}`}>\n <VolumeHighIcon className={`${styles.VolumeHighIcon} ${styles.Icon}`} />\n <VolumeLowIcon className={`${styles.VolumeLowIcon} ${styles.Icon}`} />\n <VolumeOffIcon className={`${styles.VolumeOffIcon} ${styles.Icon}`} />\n </MuteButton>\n </Popover.Trigger>\n <Popover.Portal>\n <Popover.Positioner side=\"top\" sideOffset={2}>\n <Popover.Popup className={`${styles.PopupAnimation} ${styles.PopoverPopup}`}>\n <VolumeSlider.Root className={styles.SliderRoot} orientation=\"vertical\">\n <VolumeSlider.Track className={styles.SliderTrack}>\n <VolumeSlider.Progress className={styles.SliderProgress} />\n </VolumeSlider.Track>\n <VolumeSlider.Thumb className={styles.SliderThumb} />\n </VolumeSlider.Root>\n </Popover.Popup>\n </Popover.Positioner>\n </Popover.Portal>\n </Popover.Root>\n\n <Tooltip.Root delay={500} closeDelay={0}>\n <Tooltip.Trigger>\n <FullscreenButton className={`${styles.Button} ${styles.IconButton} ${styles.FullscreenButton}`}>\n <FullscreenEnterAltIcon className={`${styles.FullscreenEnterIcon} ${styles.Icon}`} />\n <FullscreenExitAltIcon className={`${styles.FullscreenExitIcon} ${styles.Icon}`} />\n </FullscreenButton>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Positioner side=\"top-end\" sideOffset={6} collisionPadding={12}>\n <Tooltip.Popup className={`${styles.PopupAnimation} ${styles.TooltipPopup} ${styles.FullscreenTooltipPopup}`}>\n <span className={styles.FullscreenEnterTooltip}>Enter Fullscreen</span>\n <span className={styles.FullscreenExitTooltip}>Exit Fullscreen</span>\n </Tooltip.Popup>\n </Tooltip.Positioner>\n </Tooltip.Portal>\n </Tooltip.Root>\n </div>\n </div>\n </MediaContainer>\n );\n}\n"],"mappings":"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"}