@glitchlab/vue-video-player 1.4.0 → 1.6.0

package/dist/style.css

@@ -1,4 +1,4 @@
 /*!
  * @glitchlab/vue-video-player styles
  * Scoped under .gvp-root — no global resets, no theme tokens, safe for any host.
- */.gvp-root{position:relative;overflow:hidden;border-radius:1.5rem;background-color:#1717174d;box-shadow:0 25px 50px -12px #00000040;outline:1px solid rgb(255 255 255 / .1);outline-offset:-1px;margin-left:auto;margin-right:auto;width:100%;box-sizing:border-box}.gvp-root *,.gvp-root *:before,.gvp-root *:after{box-sizing:border-box}.gvp-root:fullscreen,.gvp-root:-webkit-full-screen{width:100vw!important;max-width:none;height:100vh;aspect-ratio:auto!important;border-radius:0}.gvp-root:fullscreen .gvp-video,.gvp-root:-webkit-full-screen .gvp-video{object-fit:contain}.gvp-video{height:100%;width:100%;object-fit:cover;display:block}.gvp-youtube{border:0;object-fit:contain}.gvp-vignette{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(to top right,#00000059,#0000,#00000059)}.gvp-bottom-fade{pointer-events:none;position:absolute;bottom:0;left:0;right:0;height:4rem;background-image:linear-gradient(to top,rgb(0 0 0 / .35),transparent)}.gvp-toggle{position:absolute;left:1rem;top:1rem;z-index:10}.gvp-toggle-pill{display:flex;align-items:center;overflow:hidden;border-radius:1rem;background-color:#fffffff2;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;outline:1px solid rgb(0 0 0 / .05);outline-offset:-1px}.gvp-toggle-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;font-weight:600;cursor:pointer;background:transparent;border:0;color:#737373;transition:color .15s ease;font-family:inherit}.gvp-toggle-btn:hover{color:#404040}.gvp-toggle-btn.is-active{color:#5b21b6}.gvp-toggle-divider{height:1.75rem;width:1px;background-color:#e5e5e5}.gvp-close{position:absolute;right:1rem;top:1rem;display:grid;place-items:center;height:2.5rem;width:2.5rem;border:0;border-radius:9999px;background-color:#00000059;color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);outline:1px solid rgb(255 255 255 / .15);outline-offset:-1px;cursor:pointer;z-index:10;transition:background-color .15s ease}.gvp-close:hover{background-color:#00000080}.gvp-play-wrap{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;z-index:10}.gvp-play{position:relative;display:grid;place-items:center;height:3.5rem;width:3.5rem;border:0;border-radius:9999px;cursor:pointer;outline:1px solid rgb(255 255 255 / .15);outline-offset:-1px;background-color:#5b21b680;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;transition:background-color .2s ease,opacity .2s ease;color:#fff}.gvp-play:hover{background-color:#5b21b6e6}.gvp-tooltip{position:absolute;top:-3rem;left:50%;transform:translate(-50%);white-space:nowrap;border-radius:.75rem;background-color:#000000b3;padding:.375rem .75rem;font-size:.75rem;line-height:1rem;color:#fff;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;outline:1px solid rgb(255 255 255 / .1);outline-offset:-1px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.gvp-audio{position:absolute;right:1rem;bottom:1rem;z-index:10}.gvp-audio-btn{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .625rem;border:0;border-radius:.625rem;background-color:#00000073;color:#fff;font-size:.8125rem;font-weight:500;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);outline:1px solid rgb(255 255 255 / .15);outline-offset:-1px;transition:background-color .15s ease;font-family:inherit;max-width:12rem}.gvp-audio-btn:hover{background-color:#0009}.gvp-audio-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gvp-audio-menu{position:absolute;right:0;bottom:calc(100% + .375rem);margin:0;padding:.25rem;list-style:none;min-width:100%;max-height:12rem;overflow-y:auto;border-radius:.625rem;background-color:#000000bf;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);outline:1px solid rgb(255 255 255 / .15);outline-offset:-1px;box-shadow:0 10px 15px -3px #0000004d}.gvp-audio-menu-item{display:block;width:100%;text-align:left;border:0;background:transparent;color:#fff;font-size:.8125rem;padding:.375rem .625rem;border-radius:.375rem;cursor:pointer;white-space:nowrap;font-family:inherit}.gvp-audio-menu-item:hover{background-color:#ffffff1f}.gvp-audio-menu-item.is-active{background-color:#5b21b699}.gvp-icon{display:block}.gvp-controls{position:absolute;left:0;right:0;bottom:0;padding:1.5rem 1rem .625rem;background-image:linear-gradient(to top,rgb(0 0 0 / .55),transparent);color:#fff;z-index:5;opacity:1;transition:opacity .2s ease;pointer-events:auto}.gvp-controls.is-hidden{opacity:0;pointer-events:none}.gvp-controls-row{display:flex;align-items:center;gap:.75rem}.gvp-click-layer{position:absolute;top:0;right:0;bottom:0;left:0;border:0;background:transparent;cursor:pointer;z-index:2;padding:0;margin:0;color:inherit;font:inherit}.gvp-click-layer:focus-visible{outline:2px solid rgb(255 255 255 / .5);outline-offset:-2px}.gvp-ctrl-btn{display:inline-grid;place-items:center;width:2rem;height:2rem;border:0;border-radius:.5rem;background:transparent;color:#fff;cursor:pointer;transition:background-color .15s ease,color .15s ease;font-family:inherit;flex-shrink:0}.gvp-ctrl-btn:hover{background-color:#ffffff26}.gvp-ctrl-btn:focus-visible{outline:2px solid rgb(255 255 255 / .6);outline-offset:1px}.gvp-ctrl-btn.is-active{color:#a78bfa}.gvp-seek{position:relative;flex:1 1 auto;min-width:0;height:1.25rem;display:flex;align-items:center}.gvp-seek-track{position:relative;width:100%;height:.25rem;background-color:#ffffff40;border-radius:9999px;overflow:hidden}.gvp-seek-buffered{position:absolute;top:0;right:0;bottom:0;left:0;width:0;background-color:#ffffff59;transition:width .1s linear}.gvp-seek-progress{position:absolute;top:0;right:0;bottom:0;left:0;width:0;background-color:#5b21b6;transition:width .1s linear}.gvp-seek-input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:transparent;opacity:0}.gvp-seek-input:disabled{cursor:not-allowed}.gvp-seek-input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:.875rem;height:.875rem;border-radius:9999px;background:#fff;border:0;cursor:pointer}.gvp-seek-input::-moz-range-thumb{width:.875rem;height:.875rem;border-radius:9999px;background:#fff;border:0;cursor:pointer}.gvp-seek:hover .gvp-seek-input{opacity:1}.gvp-time{font-size:.75rem;color:#ffffffe6;font-variant-numeric:tabular-nums;flex-shrink:0;white-space:nowrap}.gvp-volume{display:inline-flex;align-items:center;flex-shrink:0}.gvp-volume-slider-wrap{position:relative;height:1.25rem;display:flex;align-items:center;width:0;overflow:hidden;transition:width .2s ease,margin-left .2s ease;margin-left:0}.gvp-volume.is-expandable:hover .gvp-volume-slider-wrap,.gvp-volume.is-expandable:focus-within .gvp-volume-slider-wrap{width:4.5rem;margin-left:.25rem}.gvp-volume-track{position:relative;width:100%;height:.25rem;background-color:#ffffff40;border-radius:9999px;overflow:hidden}.gvp-volume-fill{position:absolute;top:0;right:0;bottom:0;left:0;width:0;background-color:#fff;transition:width 80ms linear}.gvp-volume-input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:transparent;opacity:0}.gvp-volume-input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:.75rem;height:.75rem;border-radius:9999px;background:#fff;border:0;cursor:pointer}.gvp-volume-input::-moz-range-thumb{width:.75rem;height:.75rem;border-radius:9999px;background:#fff;border:0;cursor:pointer}.gvp-volume:hover .gvp-volume-input,.gvp-volume:focus-within .gvp-volume-input{opacity:1}.gvp-speed{position:absolute;left:1rem;bottom:1rem;z-index:10}.gvp-controls-row .gvp-speed{position:relative;left:auto;bottom:auto;z-index:auto;flex-shrink:0}.gvp-speed-btn{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .625rem;border:0;border-radius:.625rem;background-color:#00000073;color:#fff;font-size:.8125rem;font-weight:500;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);outline:1px solid rgb(255 255 255 / .15);outline-offset:-1px;transition:background-color .15s ease;font-family:inherit}.gvp-speed-btn:hover{background-color:#0009}.gvp-controls-row .gvp-speed-btn{background-color:transparent;outline:none;border-radius:.5rem;gap:.2rem;width:auto;padding:0 .375rem;height:2rem}.gvp-controls-row .gvp-speed-btn:hover{background-color:#ffffff26}.gvp-speed-label{font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums}.gvp-controls-row .gvp-speed-label{font-size:.7rem;line-height:1}.gvp-speed-menu{position:absolute;left:0;bottom:calc(100% + .375rem);z-index:20;margin:0;padding:.25rem;list-style:none;min-width:6rem;border-radius:.625rem;background-color:#000000bf;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);outline:1px solid rgb(255 255 255 / .15);outline-offset:-1px;box-shadow:0 10px 15px -3px #0000004d}.gvp-speed-menu-item{display:block;width:100%;text-align:left;border:0;background:transparent;color:#fff;font-size:.8125rem;padding:.375rem .625rem;border-radius:.375rem;cursor:pointer;white-space:nowrap;font-family:inherit}.gvp-speed-menu-item:hover{background-color:#ffffff1f}.gvp-speed-menu-item.is-active{background-color:#5b21b699}.gvp-quality{position:relative;flex-shrink:0}.gvp-quality-btn{display:inline-flex;align-items:center;gap:.2rem;width:auto;padding:0 .375rem}.gvp-quality-label{font-size:.7rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}.gvp-quality-menu{position:absolute;bottom:calc(100% + .375rem);left:50%;transform:translate(-50%);margin:0;padding:.25rem;list-style:none;min-width:7rem;border-radius:.625rem;background-color:#000000bf;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);outline:1px solid rgb(255 255 255 / .15);outline-offset:-1px;box-shadow:0 10px 15px -3px #0000004d;z-index:20}.gvp-quality-menu-item{display:block;width:100%;text-align:left;border:0;background:transparent;color:#fff;font-size:.8125rem;padding:.375rem .625rem;border-radius:.375rem;cursor:pointer;white-space:nowrap;font-family:inherit}.gvp-quality-menu-item:hover{background-color:#ffffff1f}.gvp-quality-menu-item.is-active{background-color:#5b21b699}.gvp-pip-btn{position:absolute;right:1rem;top:4rem;display:grid;place-items:center;width:2.25rem;height:2.25rem;border:0;border-radius:.625rem;background-color:#00000073;color:#fff;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);outline:1px solid rgb(255 255 255 / .15);outline-offset:-1px;transition:background-color .15s ease,color .15s ease;z-index:10}.gvp-pip-btn:hover{background-color:#0009}.gvp-pip-btn.is-active{color:#a78bfa}.gvp-captions{position:absolute;left:50%;transform:translate(-50%);bottom:1rem;z-index:10}.gvp-controls-row .gvp-captions{position:relative;left:auto;bottom:auto;transform:none;z-index:auto;flex-shrink:0}.gvp-captions-btn{display:inline-flex;align-items:center;justify-content:center;padding:.375rem .5rem;border:0;border-radius:.625rem;background-color:#00000073;color:#fff;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);outline:1px solid rgb(255 255 255 / .15);outline-offset:-1px;transition:background-color .15s ease,color .15s ease}.gvp-captions-btn:hover{background-color:#0009}.gvp-controls-row .gvp-captions-btn{display:inline-grid;place-items:center;width:2rem;height:2rem;background-color:transparent;outline:none;border-radius:.5rem;padding:0}.gvp-controls-row .gvp-captions-btn:hover{background-color:#ffffff26}.gvp-captions-btn.is-active{color:#a78bfa}.gvp-captions-menu{position:absolute;bottom:calc(100% + .375rem);left:50%;transform:translate(-50%);margin:0;padding:.25rem;list-style:none;min-width:8rem;border-radius:.625rem;background-color:#000000bf;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);outline:1px solid rgb(255 255 255 / .15);outline-offset:-1px;box-shadow:0 10px 15px -3px #0000004d}.gvp-captions-menu-item{display:block;width:100%;text-align:left;border:0;background:transparent;color:#fff;font-size:.8125rem;padding:.375rem .625rem;border-radius:.375rem;cursor:pointer;white-space:nowrap;font-family:inherit}.gvp-captions-menu-item:hover{background-color:#ffffff1f}.gvp-captions-menu-item.is-active{background-color:#5b21b699}
+ */.gvp-root{--gvp-accent-rgb: 91 33 182;--gvp-accent: rgb(var(--gvp-accent-rgb));--gvp-radius: 1.5rem;position:relative;overflow:hidden;border-radius:var(--gvp-radius);background-color:#1717174d;box-shadow:0 25px 50px -12px #00000040;outline:1px solid rgb(255 255 255 / .1);outline-offset:-1px;margin-left:auto;margin-right:auto;width:100%;box-sizing:border-box}.gvp-root *,.gvp-root *:before,.gvp-root *:after{box-sizing:border-box}.gvp-root:fullscreen,.gvp-root:-webkit-full-screen{width:100vw!important;max-width:none;height:100vh;aspect-ratio:auto!important;border-radius:0}.gvp-root:fullscreen .gvp-video,.gvp-root:-webkit-full-screen .gvp-video{object-fit:contain}.gvp-video{height:100%;width:100%;object-fit:cover;display:block}.gvp-youtube{border:0;object-fit:contain}.gvp-vignette{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(to top right,#00000059,#0000,#00000059)}.gvp-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.gvp-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;pointer-events:none}.gvp-spinner{width:2.75rem;height:2.75rem;border-radius:9999px;border:3px solid rgb(255 255 255 / .25);border-top-color:#fff;animation:gvp-spin .8s linear infinite}@keyframes gvp-spin{to{transform:rotate(360deg)}}.gvp-error{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;background-color:#000c;color:#fff;text-align:center;padding:1rem}.gvp-error-icon{color:#f87171}.gvp-error-text{margin:0;font-size:.9375rem}.gvp-error-retry{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;border:0;border-radius:.5rem;background-color:#fff;color:#111;font-family:inherit;font-size:.875rem;font-weight:500;cursor:pointer;transition:background-color .15s ease}.gvp-error-retry:hover{background-color:#e5e5e5}.gvp-error-retry:focus-visible{outline:2px solid rgb(255 255 255 / .7);outline-offset:2px}@media (prefers-reduced-motion: reduce){.gvp-spinner{animation-duration:2s}}.gvp-bottom-fade{pointer-events:none;position:absolute;bottom:0;left:0;right:0;height:4rem;background-image:linear-gradient(to top,rgb(0 0 0 / .35),transparent)}.gvp-toggle{position:absolute;left:1rem;top:1rem;z-index:10}.gvp-toggle-pill{display:flex;align-items:center;overflow:hidden;border-radius:1rem;background-color:#fffffff2;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;outline:1px solid rgb(0 0 0 / .05);outline-offset:-1px}.gvp-toggle-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;font-weight:600;cursor:pointer;background:transparent;border:0;color:#737373;transition:color .15s ease;font-family:inherit}.gvp-toggle-btn:hover{color:#404040}.gvp-toggle-btn.is-active{color:var(--gvp-accent)}.gvp-toggle-divider{height:1.75rem;width:1px;background-color:#e5e5e5}.gvp-close{position:absolute;right:1rem;top:1rem;display:grid;place-items:center;height:2.5rem;width:2.5rem;border:0;border-radius:9999px;background-color:#00000059;color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);outline:1px solid rgb(255 255 255 / .15);outline-offset:-1px;cursor:pointer;z-index:10;transition:background-color .15s ease}.gvp-close:hover{background-color:#00000080}.gvp-play-wrap{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;z-index:10}.gvp-play{position:relative;display:grid;place-items:center;height:3.5rem;width:3.5rem;border:0;border-radius:9999px;cursor:pointer;outline:1px solid rgb(255 255 255 / .15);outline-offset:-1px;background-color:rgb(var(--gvp-accent-rgb) / .5);box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;transition:background-color .2s ease,opacity .2s ease;color:#fff}.gvp-play:hover{background-color:rgb(var(--gvp-accent-rgb) / .9)}.gvp-tooltip{position:absolute;top:-3rem;left:50%;transform:translate(-50%);white-space:nowrap;border-radius:.75rem;background-color:#000000b3;padding:.375rem .75rem;font-size:.75rem;line-height:1rem;color:#fff;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;outline:1px solid rgb(255 255 255 / .1);outline-offset:-1px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.gvp-audio{position:absolute;right:1rem;bottom:1rem;z-index:10}.gvp-audio-btn{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .625rem;border:0;border-radius:.625rem;background-color:#00000073;color:#fff;font-size:.8125rem;font-weight:500;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);outline:1px solid rgb(255 255 255 / .15);outline-offset:-1px;transition:background-color .15s ease;font-family:inherit;max-width:12rem}.gvp-audio-btn:hover{background-color:#0009}.gvp-audio-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gvp-audio-menu{position:absolute;right:0;bottom:calc(100% + .375rem);margin:0;padding:.25rem;list-style:none;min-width:100%;max-height:12rem;overflow-y:auto;border-radius:.625rem;background-color:#000000bf;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);outline:1px solid rgb(255 255 255 / .15);outline-offset:-1px;box-shadow:0 10px 15px -3px #0000004d}.gvp-audio-menu-item{display:block;width:100%;text-align:left;border:0;background:transparent;color:#fff;font-size:.8125rem;padding:.375rem .625rem;border-radius:.375rem;cursor:pointer;white-space:nowrap;font-family:inherit}.gvp-audio-menu-item:hover{background-color:#ffffff1f}.gvp-audio-menu-item.is-active{background-color:rgb(var(--gvp-accent-rgb) / .6)}.gvp-icon{display:block}.gvp-controls{position:absolute;left:0;right:0;bottom:0;padding:1.5rem 1rem .625rem;background-image:linear-gradient(to top,rgb(0 0 0 / .55),transparent);color:#fff;z-index:5;opacity:1;transition:opacity .2s ease;pointer-events:auto}.gvp-controls.is-hidden{opacity:0;pointer-events:none}.gvp-controls-seek{display:flex;align-items:center;margin-bottom:.25rem}.gvp-controls-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.gvp-controls-left,.gvp-controls-right{display:flex;align-items:center;gap:.375rem;min-width:0}.gvp-controls-left{flex:1 1 auto}.gvp-controls-right{flex:0 0 auto}.gvp-click-layer{position:absolute;top:0;right:0;bottom:0;left:0;border:0;background:transparent;cursor:pointer;z-index:2;padding:0;margin:0;color:inherit;font:inherit}.gvp-click-layer:focus-visible{outline:2px solid rgb(255 255 255 / .5);outline-offset:-2px}.gvp-ctrl-btn{display:inline-grid;place-items:center;width:2rem;height:2rem;border:0;border-radius:.5rem;background:transparent;color:#fff;cursor:pointer;transition:background-color .15s ease,color .15s ease;font-family:inherit;flex-shrink:0}.gvp-ctrl-btn:hover{background-color:#ffffff26}.gvp-ctrl-btn:focus-visible{outline:2px solid rgb(255 255 255 / .6);outline-offset:1px}.gvp-ctrl-btn:disabled{opacity:.35;cursor:not-allowed}.gvp-ctrl-btn:disabled:hover{background-color:transparent}.gvp-ctrl-btn.is-active{color:#a78bfa}.gvp-seek{position:relative;flex:1 1 auto;min-width:0;height:1.25rem;display:flex;align-items:center}.gvp-seek-track{position:relative;width:100%;height:.25rem;background-color:#ffffff40;border-radius:9999px;overflow:hidden}.gvp-seek-buffered{position:absolute;top:0;right:0;bottom:0;left:0;width:0;background-color:#ffffff59;transition:width .1s linear}.gvp-seek-progress{position:absolute;top:0;right:0;bottom:0;left:0;width:0;background-color:var(--gvp-accent);transition:width .1s linear}.gvp-seek-input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:transparent;opacity:0}.gvp-seek-input:disabled{cursor:not-allowed}.gvp-seek-input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:.875rem;height:.875rem;border-radius:9999px;background:#fff;border:0;cursor:pointer}.gvp-seek-input::-moz-range-thumb{width:.875rem;height:.875rem;border-radius:9999px;background:#fff;border:0;cursor:pointer}.gvp-seek:hover .gvp-seek-input,.gvp-seek-input:focus-visible{opacity:1}.gvp-seek-preview{position:absolute;bottom:1.5rem;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:.25rem;pointer-events:none;z-index:2}.gvp-seek-preview-thumb{background-repeat:no-repeat;border-radius:.25rem;border:2px solid rgb(255 255 255 / .9);box-shadow:0 2px 8px #00000080}.gvp-seek-preview-time{font-size:.6875rem;font-variant-numeric:tabular-nums;color:#fff;background-color:#000c;padding:.0625rem .375rem;border-radius:.25rem}.gvp-seek-preview-chapter{font-size:.6875rem;font-weight:600;color:#fff;background-color:#000c;padding:.0625rem .375rem;border-radius:.25rem;max-width:12rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gvp-seek-preview:not(.has-thumb) .gvp-seek-preview-time,.gvp-seek-preview:not(.has-thumb) .gvp-seek-preview-chapter{background-color:#000000e6}.gvp-seek-chapter-tick{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background-color:#0000008c;pointer-events:none}.gvp-time{font-size:.75rem;color:#ffffffe6;font-variant-numeric:tabular-nums;flex-shrink:0;white-space:nowrap}.gvp-live{display:inline-flex;align-items:center;gap:.375rem;flex-shrink:0;padding:.1875rem .5rem;border:0;border-radius:.375rem;background-color:#ffffff26;color:#ffffffb3;font-family:inherit;font-size:.6875rem;font-weight:700;letter-spacing:.05em;cursor:pointer;transition:background-color .15s ease,color .15s ease}.gvp-live:hover{background-color:#ffffff40;color:#fff}.gvp-live.is-at-edge{background-color:transparent;color:#fff;cursor:default}.gvp-live-dot{width:.5rem;height:.5rem;border-radius:9999px;background-color:#787878}.gvp-live.is-at-edge .gvp-live-dot{background-color:#ef4444;animation:gvp-live-pulse 2s ease-in-out infinite}@keyframes gvp-live-pulse{0%,to{opacity:1}50%{opacity:.4}}@media (prefers-reduced-motion: reduce){.gvp-live.is-at-edge .gvp-live-dot{animation:none}}.gvp-volume{display:inline-flex;align-items:center;flex-shrink:0}.gvp-volume-slider-wrap{position:relative;height:1.25rem;display:flex;align-items:center;width:0;overflow:hidden;transition:width .2s ease,margin-left .2s ease;margin-left:0}.gvp-volume.is-expandable:hover .gvp-volume-slider-wrap,.gvp-volume.is-expandable:focus-within .gvp-volume-slider-wrap{width:4.5rem;margin-left:.25rem}.gvp-volume-track{position:relative;width:100%;height:.25rem;background-color:#ffffff40;border-radius:9999px;overflow:hidden}.gvp-volume-fill{position:absolute;top:0;right:0;bottom:0;left:0;width:0;background-color:#fff;transition:width 80ms linear}.gvp-volume-input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:transparent;opacity:0}.gvp-volume-input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:.75rem;height:.75rem;border-radius:9999px;background:#fff;border:0;cursor:pointer}.gvp-volume-input::-moz-range-thumb{width:.75rem;height:.75rem;border-radius:9999px;background:#fff;border:0;cursor:pointer}.gvp-volume:hover .gvp-volume-input,.gvp-volume:focus-within .gvp-volume-input{opacity:1}.gvp-speed{position:absolute;left:1rem;bottom:1rem;z-index:10}.gvp-controls-row .gvp-speed{position:relative;left:auto;bottom:auto;z-index:auto;flex-shrink:0}.gvp-speed-btn{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .625rem;border:0;border-radius:.625rem;background-color:#00000073;color:#fff;font-size:.8125rem;font-weight:500;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);outline:1px solid rgb(255 255 255 / .15);outline-offset:-1px;transition:background-color .15s ease;font-family:inherit}.gvp-speed-btn:hover{background-color:#0009}.gvp-controls-row .gvp-speed-btn{background-color:transparent;outline:none;border-radius:.5rem;gap:.2rem;width:auto;padding:0 .375rem;height:2rem}.gvp-controls-row .gvp-speed-btn:hover{background-color:#ffffff26}.gvp-speed-label{font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums}.gvp-controls-row .gvp-speed-label{font-size:.7rem;line-height:1}.gvp-speed-menu{position:absolute;left:0;bottom:calc(100% + .375rem);z-index:20;margin:0;padding:.25rem;list-style:none;min-width:6rem;border-radius:.625rem;background-color:#000000bf;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);outline:1px solid rgb(255 255 255 / .15);outline-offset:-1px;box-shadow:0 10px 15px -3px #0000004d}.gvp-speed-menu-item{display:block;width:100%;text-align:left;border:0;background:transparent;color:#fff;font-size:.8125rem;padding:.375rem .625rem;border-radius:.375rem;cursor:pointer;white-space:nowrap;font-family:inherit}.gvp-speed-menu-item:hover{background-color:#ffffff1f}.gvp-speed-menu-item.is-active{background-color:rgb(var(--gvp-accent-rgb) / .6)}.gvp-quality{position:relative;flex-shrink:0}.gvp-quality-btn{display:inline-flex;align-items:center;gap:.2rem;width:auto;padding:0 .375rem}.gvp-quality-label{font-size:.7rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}.gvp-quality-menu{position:absolute;bottom:calc(100% + .375rem);left:50%;transform:translate(-50%);margin:0;padding:.25rem;list-style:none;min-width:7rem;border-radius:.625rem;background-color:#000000bf;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);outline:1px solid rgb(255 255 255 / .15);outline-offset:-1px;box-shadow:0 10px 15px -3px #0000004d;z-index:20}.gvp-quality-menu-item{display:block;width:100%;text-align:left;border:0;background:transparent;color:#fff;font-size:.8125rem;padding:.375rem .625rem;border-radius:.375rem;cursor:pointer;white-space:nowrap;font-family:inherit}.gvp-quality-menu-item:hover{background-color:#ffffff1f}.gvp-quality-menu-item.is-active{background-color:rgb(var(--gvp-accent-rgb) / .6)}.gvp-pip-btn{position:absolute;right:1rem;top:4rem;display:grid;place-items:center;width:2.25rem;height:2.25rem;border:0;border-radius:.625rem;background-color:#00000073;color:#fff;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);outline:1px solid rgb(255 255 255 / .15);outline-offset:-1px;transition:background-color .15s ease,color .15s ease;z-index:10}.gvp-pip-btn:hover{background-color:#0009}.gvp-pip-btn.is-active{color:#a78bfa}.gvp-captions{position:absolute;left:50%;transform:translate(-50%);bottom:1rem;z-index:10}.gvp-controls-row .gvp-captions{position:relative;left:auto;bottom:auto;transform:none;z-index:auto;flex-shrink:0}.gvp-captions-btn{display:inline-flex;align-items:center;justify-content:center;padding:.375rem .5rem;border:0;border-radius:.625rem;background-color:#00000073;color:#fff;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);outline:1px solid rgb(255 255 255 / .15);outline-offset:-1px;transition:background-color .15s ease,color .15s ease}.gvp-captions-btn:hover{background-color:#0009}.gvp-controls-row .gvp-captions-btn{display:inline-grid;place-items:center;width:2rem;height:2rem;background-color:transparent;outline:none;border-radius:.5rem;padding:0}.gvp-controls-row .gvp-captions-btn:hover{background-color:#ffffff26}.gvp-captions-btn.is-active{color:#a78bfa}.gvp-captions-menu{position:absolute;bottom:calc(100% + .375rem);left:50%;transform:translate(-50%);margin:0;padding:.25rem;list-style:none;min-width:8rem;border-radius:.625rem;background-color:#000000bf;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);outline:1px solid rgb(255 255 255 / .15);outline-offset:-1px;box-shadow:0 10px 15px -3px #0000004d}.gvp-captions-menu-item{display:block;width:100%;text-align:left;border:0;background:transparent;color:#fff;font-size:.8125rem;padding:.375rem .625rem;border-radius:.375rem;cursor:pointer;white-space:nowrap;font-family:inherit}.gvp-captions-menu-item:hover{background-color:#ffffff1f}.gvp-captions-menu-item.is-active{background-color:rgb(var(--gvp-accent-rgb) / .6)}.gvp-seek-input:focus-visible,.gvp-volume-input:focus-visible,.gvp-toggle-btn:focus-visible,.gvp-close:focus-visible,.gvp-audio-btn:focus-visible,.gvp-speed-btn:focus-visible,.gvp-quality-btn:focus-visible,.gvp-audio-menu-item:focus-visible,.gvp-speed-menu-item:focus-visible,.gvp-quality-menu-item:focus-visible,.gvp-captions-menu-item:focus-visible{outline:2px solid rgb(255 255 255 / .85);outline-offset:2px}.gvp-audio-menu-item:focus-visible,.gvp-speed-menu-item:focus-visible,.gvp-quality-menu-item:focus-visible,.gvp-captions-menu-item:focus-visible{outline-offset:-2px}@media (prefers-reduced-motion: reduce){.gvp-controls,.gvp-seek-buffered,.gvp-seek-progress,.gvp-ctrl-btn,.gvp-toggle-btn,.gvp-error-retry,.gvp-volume-slider-wrap,.gvp-volume-input{transition-duration:.01ms!important}}.gvp-mini-placeholder{display:block}.gvp-mini-sentinel{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:-1}.gvp-root.gvp-mini{position:fixed;width:22rem!important;max-width:40vw;z-index:9999;box-shadow:0 20px 40px -8px #00000080;animation:gvp-mini-in .2s ease}.gvp-root.gvp-mini-bottom-right{right:1rem;bottom:1rem}.gvp-root.gvp-mini-bottom-left{left:1rem;bottom:1rem}.gvp-root.gvp-mini-top-right{right:1rem;top:1rem}.gvp-root.gvp-mini-top-left{left:1rem;top:1rem}@keyframes gvp-mini-in{0%{opacity:0;transform:translateY(1rem)}}.gvp-mini-close{position:absolute;right:.375rem;top:.375rem;display:grid;place-items:center;width:1.75rem;height:1.75rem;border:0;border-radius:9999px;background-color:#0009;color:#fff;cursor:pointer;z-index:20;transition:background-color .15s ease}.gvp-mini-close:hover{background-color:#000000d9}.gvp-mini-close:focus-visible{outline:2px solid rgb(255 255 255 / .85);outline-offset:2px}@media (prefers-reduced-motion: reduce){.gvp-root.gvp-mini{animation:none}}.gvp-ambient-wrap{position:relative;margin-left:auto;margin-right:auto}.gvp-ambient-canvas{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%) scale(1.15);filter:blur(48px) saturate(1.6);opacity:.7;pointer-events:none;z-index:0}.gvp-ambient-wrap.is-ambient .gvp-root{position:relative;z-index:1}.gvp-settings{position:relative;flex-shrink:0}.gvp-settings-menu{position:absolute;bottom:calc(100% + .375rem);right:0;min-width:13rem;max-height:16rem;overflow-y:auto;padding:.25rem;border-radius:.625rem;background-color:#000c;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);outline:1px solid rgb(255 255 255 / .15);outline-offset:-1px;box-shadow:0 10px 15px -3px #00000059;z-index:20}.gvp-settings-row{display:flex;align-items:center;gap:.5rem;width:100%;border:0;background:transparent;color:#fff;font-family:inherit;font-size:.8125rem;padding:.5rem .625rem;border-radius:.375rem;cursor:pointer;text-align:left}.gvp-settings-row:hover{background-color:#ffffff1f}.gvp-settings-row-label{flex:1}.gvp-settings-row-value{color:#fff9;font-variant-numeric:tabular-nums;white-space:nowrap}.gvp-settings-chevron{color:#ffffff80;flex-shrink:0}.gvp-settings-back{display:flex;align-items:center;gap:.25rem;width:100%;border:0;background:transparent;color:#fff;font-family:inherit;font-size:.8125rem;font-weight:600;padding:.5rem .625rem .5rem .25rem;margin-bottom:.125rem;border-bottom:1px solid rgb(255 255 255 / .12);border-radius:0;cursor:pointer;text-align:left}.gvp-settings-back-icon{transform:rotate(180deg);color:#fff9}.gvp-settings-back:hover,.gvp-settings-back:hover .gvp-settings-back-icon{color:#fff}.gvp-settings-option{display:flex;align-items:center;gap:.5rem;width:100%;border:0;background:transparent;color:#fff;font-family:inherit;font-size:.8125rem;padding:.5rem .625rem;border-radius:.375rem;cursor:pointer;text-align:left}.gvp-settings-option:hover{background-color:#ffffff1f}.gvp-settings-check{display:inline-flex;width:.875rem;flex-shrink:0;color:var(--gvp-accent)}.gvp-settings-row:focus-visible,.gvp-settings-back:focus-visible,.gvp-settings-option:focus-visible{outline:2px solid rgb(255 255 255 / .85);outline-offset:-2px}

package/dist/utils/caption-style.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Builds the `::cue` CSS that styles subtitle/caption text. Caption cues can
+ * only be styled via the `::cue` pseudo-element — not inline — so the player
+ * injects a scoped stylesheet keyed to a unique class on the video element.
+ */
+export interface CaptionStyle {
+    fontSize?: string;
+    textColor?: string;
+    backgroundColor?: string;
+    backgroundOpacity?: number;
+}
+/**
+ * Build a `::cue` rule for the given video class. Returns an empty string when
+ * no style properties are set, so the caller can skip injecting a stylesheet.
+ */
+export declare function buildCaptionCss(videoClass: string, style: CaptionStyle | undefined): string;
+//# sourceMappingURL=caption-style.d.ts.map

package/dist/utils/caption-style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"caption-style.d.ts","sourceRoot":"","sources":["../../src/utils/caption-style.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,YAAY;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B;AA+BD;;;GAGG;AACH,wBAAgB,eAAe,CAC3B,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,YAAY,GAAG,SAAS,GAChC,MAAM,CAmBR"}

package/dist/utils/chapters.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Chapter (cue marker) support. Chapters segment the timeline into named
+ * sections — useful for tutorials and long-form content. They can be supplied
+ * inline or as a WebVTT chapters file:
+ *
+ *   00:00:00.000 --> 00:02:30.000
+ *   Introduction
+ *
+ *   00:02:30.000 --> 00:10:00.000
+ *   Getting started
+ */
+export interface Chapter {
+    /** Chapter start time, in seconds. */
+    start: number;
+    /** Chapter end time, in seconds. */
+    end: number;
+    /** Human-readable chapter title. */
+    title: string;
+}
+/** Parse the text of a WebVTT chapters file into a sorted chapter list. */
+export declare function parseChaptersVtt(text: string): Chapter[];
+/**
+ * Normalize an inline chapter list: drop invalid entries, sort by start time,
+ * and fill in any missing `end` from the next chapter's start (or `duration`).
+ */
+export declare function normalizeChapters(input: Array<{
+    start: number;
+    end?: number;
+    title: string;
+}>, duration: number): Chapter[];
+/** Return the chapter covering `time`, or `null` if none matches. */
+export declare function chapterAt(chapters: Chapter[], time: number): Chapter | null;
+//# sourceMappingURL=chapters.d.ts.map

package/dist/utils/chapters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chapters.d.ts","sourceRoot":"","sources":["../../src/utils/chapters.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,MAAM,WAAW,OAAO;IACpB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;CACjB;AAYD,2EAA2E;AAC3E,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,EAAE,CAoBxD;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC7B,KAAK,EAAE,KAAK,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,EAC5D,QAAQ,EAAE,MAAM,GACjB,OAAO,EAAE,CAYX;AAED,qEAAqE;AACrE,wBAAgB,SAAS,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAK3E"}

package/dist/utils/preferences.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Opt-in playback-preference persistence. When the player is given a
+ * `persistKey`, volume / mute / playback speed and the last playback position
+ * are stored in `localStorage` so they survive reloads and revisits.
+ *
+ * Preferences (volume/mute/speed) are global to the key. The resume position
+ * is stored per source URL, so a key shared across videos resumes each one
+ * independently.
+ */
+/** Player-wide preferences, shared across every source under one key. */
+export interface PlayerPreferences {
+    volume?: number;
+    muted?: boolean;
+    speed?: number;
+    /** Resume positions keyed by source URL. */
+    positions?: Record<string, number>;
+}
+/** Read the stored preferences for a key. Returns `{}` if absent/unavailable. */
+export declare function loadPreferences(persistKey: string): PlayerPreferences;
+/** Merge a partial update into the stored preferences for a key. */
+export declare function savePreferences(persistKey: string, patch: Partial<PlayerPreferences>): void;
+/** Store the resume position (seconds) for one source under a key. */
+export declare function savePosition(persistKey: string, src: string, position: number): void;
+/** Read the resume position (seconds) for one source. `0` if none. */
+export declare function loadPosition(persistKey: string, src: string): number;
+//# sourceMappingURL=preferences.d.ts.map

package/dist/utils/preferences.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preferences.d.ts","sourceRoot":"","sources":["../../src/utils/preferences.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,yEAAyE;AACzE,MAAM,WAAW,iBAAiB;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACtC;AAMD,iFAAiF;AACjF,wBAAgB,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,iBAAiB,CAUrE;AAED,oEAAoE;AACpE,wBAAgB,eAAe,CAC3B,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,OAAO,CAAC,iBAAiB,CAAC,GAClC,IAAI,CASN;AAED,sEAAsE;AACtE,wBAAgB,YAAY,CACxB,UAAU,EAAE,MAAM,EAClB,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,MAAM,GACjB,IAAI,CAUN;AAED,sEAAsE;AACtE,wBAAgB,YAAY,CAAC,UAAU,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAIpE"}

package/dist/utils/theme.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Maps a {@link PlayerTheme} onto the CSS custom properties the stylesheet
+ * reads (`--gvp-accent-rgb`, `--gvp-radius`, …). Returned as a style object
+ * that can be spread onto the player's root element.
+ */
+export interface PlayerTheme {
+    accent?: string;
+    radius?: string;
+}
+/**
+ * Build the CSS-variable overrides for a theme. Returns an empty object when
+ * no theme is given, so it can be spread harmlessly.
+ */
+export declare function themeToCssVars(theme: PlayerTheme | undefined): Record<string, string>;
+//# sourceMappingURL=theme.d.ts.map

package/dist/utils/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/utils/theme.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,WAAW;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAsBD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,WAAW,GAAG,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAkBrF"}

package/dist/utils/thumbnails.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Parsing for WebVTT storyboard/thumbnail tracks — the format YouTube, Vimeo
+ * and most players use for seek-bar previews. Each cue maps a time range to a
+ * region of a sprite image:
+ *
+ *   00:00:00.000 --> 00:00:05.000
+ *   sprite.jpg#xywh=0,0,160,90
+ *
+ * The `#xywh=` fragment is optional. Without it, the whole image is used.
+ */
+export interface ThumbnailCue {
+    /** Cue start time, in seconds. */
+    start: number;
+    /** Cue end time, in seconds. */
+    end: number;
+    /** Absolute URL of the sprite (or standalone) image. */
+    url: string;
+    /** Crop region within the image, in pixels. */
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+/** A parsed thumbnail track plus a time → cue lookup. */
+export interface ThumbnailTrack {
+    cues: ThumbnailCue[];
+    /** Returns the cue covering `time`, or the nearest one. `null` if empty. */
+    cueAt(time: number): ThumbnailCue | null;
+}
+/**
+ * Parse the text of a WebVTT storyboard file. `baseUrl` is the URL the VTT was
+ * fetched from — used to resolve relative sprite paths.
+ */
+export declare function parseThumbnailVtt(text: string, baseUrl: string): ThumbnailCue[];
+/** Wrap parsed cues with a binary-search time lookup. */
+export declare function createThumbnailTrack(cues: ThumbnailCue[]): ThumbnailTrack;
+//# sourceMappingURL=thumbnails.d.ts.map

package/dist/utils/thumbnails.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"thumbnails.d.ts","sourceRoot":"","sources":["../../src/utils/thumbnails.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,MAAM,WAAW,YAAY;IACzB,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,wDAAwD;IACxD,GAAG,EAAE,MAAM,CAAC;IACZ,+CAA+C;IAC/C,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACb;AAED,yDAAyD;AACzD,MAAM,WAAW,cAAc;IAC3B,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,4EAA4E;IAC5E,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,CAAC;CAC5C;AAqBD;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,YAAY,EAAE,CAmC/E;AAED,yDAAyD;AACzD,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,YAAY,EAAE,GAAG,cAAc,CAuBzE"}

package/dist/utils/types.d.ts

@@ -1,12 +1,56 @@
 import { HlsConfig } from 'hls.js';
+import { PlayerTheme } from './theme';
 
+export type { PlayerTheme } from './theme';
 export type DeviceMode = "desktop" | "mobile";
 export type AspectRatio = `${number}/${number}`;
-export interface VideoPlayerProps {
+/** Visual styling for subtitle/caption cue text. */
+export interface CaptionStyle {
+    /** Cue font size as a CSS length (e.g. `"1.5em"`, `"20px"`). */
+    fontSize?: string;
+    /** Cue text color as any CSS color. */
+    textColor?: string;
+    /** Cue background color as any CSS color. */
+    backgroundColor?: string;
+    /** Cue background opacity, 0–1. Applied on top of `backgroundColor`. */
+    backgroundOpacity?: number;
+}
+/** A single entry in a {@link VideoPlayerProps.playlist}. */
+export interface PlaylistItem {
     /** Video source URL. `.m3u8` URLs are routed through hls.js automatically. */
     src: string;
+    /** Poster image for this item. Falls back to the player-level `poster`. */
+    poster?: string;
+    /** Optional human-readable title for this item. */
+    title?: string;
+    /** Per-item WebVTT storyboard URL for seek-bar thumbnails. */
+    thumbnails?: string;
+    /** Per-item chapters (WebVTT URL or inline array). */
+    chapters?: string | Array<{
+        start: number;
+        end?: number;
+        title: string;
+    }>;
+}
+export interface VideoPlayerProps {
+    /**
+     * Video source URL. `.m3u8` URLs are routed through hls.js automatically.
+     * Optional when `playlist` is supplied — the playlist drives the source.
+     */
+    src?: string;
     /** Poster image shown before playback. */
     poster?: string;
+    /**
+     * A list of videos to play in sequence. When provided, the player plays
+     * the item at `defaultIndex` and auto-advances on end. Prev/next buttons
+     * appear in the custom control bar. Each item can carry its own poster,
+     * thumbnails and chapters. Takes precedence over `src`.
+     */
+    playlist?: PlaylistItem[];
+    /** Index of the playlist item to start on. Defaults to `0`. */
+    defaultIndex?: number;
+    /** Auto-advance to the next playlist item when one ends. Defaults to `true`. */
+    autoAdvance?: boolean;
     /** Show the desktop/mobile toggle pill in the top-left. Defaults to `true`. */
     showDeviceToggle?: boolean;
     /** Initial device mode. Defaults to `"desktop"`. */
@@ -50,6 +94,56 @@ export interface VideoPlayerProps {
     hlsConfig?: HlsConfig;
     /** Force HLS routing even when the URL doesn't end in `.m3u8`. */
     isHls?: boolean;
+    /**
+     * URL of a WebVTT storyboard file for seek-bar thumbnail previews. Each cue
+     * points at a sprite region (`sprite.jpg#xywh=x,y,w,h`). Hovering the seek
+     * bar shows the matching frame. Only used with the custom control bar.
+     */
+    thumbnails?: string;
+    /**
+     * Timeline chapters. Either a URL of a WebVTT chapters file, or an inline
+     * array of `{ start, title }` (with optional `end`). Chapters add tick
+     * marks to the seek bar and the chapter title to the hover preview. Only
+     * used with the custom control bar.
+     */
+    chapters?: string | Array<{
+        start: number;
+        end?: number;
+        title: string;
+    }>;
+    /**
+     * Opt-in preference persistence. When set, the player saves volume, mute,
+     * playback speed and the last playback position to `localStorage` under
+     * this key, and restores them on reload. Resume position is tracked per
+     * source URL. Omit to disable persistence entirely.
+     */
+    persistKey?: string;
+    /**
+     * Visual styling for subtitle/caption cue text — font size, colors and
+     * background. Applied via the `::cue` pseudo-element.
+     */
+    captionStyle?: CaptionStyle;
+    /**
+     * Theme overrides (accent color, corner radius) applied as CSS variables
+     * on the player. For deeper customization, override the `.gvp-*` classes
+     * or the `--gvp-*` variables directly in your own CSS.
+     */
+    theme?: PlayerTheme;
+    /**
+     * Enable the floating mini-player. When the player scrolls out of view
+     * while playing, it docks to a corner of the viewport; it returns when
+     * scrolled back in. Defaults to `false`.
+     */
+    miniPlayer?: boolean;
+    /** Corner the mini-player docks to. Defaults to `"bottom-right"`. */
+    miniPlayerPosition?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+    /**
+     * Enable ambient mode — a soft, blurred color glow behind the player that
+     * samples the current video frame (YouTube's "ambient mode"). Defaults to
+     * `false`. The host should give the player some surrounding padding so the
+     * glow is visible.
+     */
+    ambientMode?: boolean;
 }
 export interface HLSPlayerProps {
     src: string;

package/dist/utils/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE9C,MAAM,MAAM,WAAW,GAAG,GAAG,MAAM,IAAI,MAAM,EAAE,CAAC;AAEhD,MAAM,WAAW,gBAAgB;IAC/B,8EAA8E;IAC9E,GAAG,EAAE,MAAM,CAAC;IACZ,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,+EAA+E;IAC/E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oDAAoD;IACpD,aAAa,CAAC,EAAE,UAAU,CAAC;IAE3B,gFAAgF;IAChF,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACzC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,uDAAuD;IACvD,aAAa,CAAC,EAAE;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IAEF,wCAAwC;IACxC,WAAW,CAAC,EAAE;QACZ,OAAO,CAAC,EAAE,WAAW,CAAC;QACtB,MAAM,CAAC,EAAE,WAAW,CAAC;KACtB,CAAC;IAEF;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,kEAAkE;IAClE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glitchlab/vue-video-player",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "Vue 3 / Nuxt 3 video player with HLS support, device-mode toggle, hover-to-play, and zero global CSS side-effects.",
   "license": "MIT",
   "author": "im-fahad",