@glitchlab/vue-video-player 1.4.0 → 1.5.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{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: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:#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-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-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}

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/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

@@ -2,11 +2,42 @@ import { HlsConfig } from 'hls.js';
 
 export type DeviceMode = "desktop" | "mobile";
 export type AspectRatio = `${number}/${number}`;
-export interface VideoPlayerProps {
+/** 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 +81,23 @@ 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;
+    }>;
 }
 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":"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,6DAA6D;AAC7D,MAAM,WAAW,YAAY;IAC3B,8EAA8E;IAC9E,GAAG,EAAE,MAAM,CAAC;IACZ,2EAA2E;IAC3E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC3E;AAED,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAC1B,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gFAAgF;IAChF,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,+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;IAEhB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC3E;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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glitchlab/vue-video-player",
-  "version": "1.4.0",
+  "version": "1.5.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",