@glitchlab/vue-video-player 1.3.0 → 1.4.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-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.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}

package/dist/utils/quality-levels.d.ts

@@ -0,0 +1,18 @@
+/**
+ * A normalized quality-level descriptor for an HLS stream. `index` maps to a
+ * `hls.js` level index; the special index `-1` represents "Auto" (adaptive
+ * bitrate, where hls.js picks the level).
+ */
+export interface QualityLevelInfo {
+    /** hls.js level index, or -1 for the synthetic "Auto" entry. */
+    index: number;
+    /** Vertical resolution in pixels (0 when unknown). */
+    height: number;
+    /** Display label, e.g. "1080p", "720p", or "Auto". */
+    label: string;
+}
+/** The synthetic "Auto" (adaptive) entry, always offered first. */
+export declare const AUTO_QUALITY: QualityLevelInfo;
+/** Build a display label for a level, preferring height (e.g. "720p"). */
+export declare function qualityLevelLabel(height: number, index: number): string;
+//# sourceMappingURL=quality-levels.d.ts.map

package/dist/utils/quality-levels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quality-levels.d.ts","sourceRoot":"","sources":["../../src/utils/quality-levels.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,WAAW,gBAAgB;IAC7B,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,MAAM,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,mEAAmE;AACnE,eAAO,MAAM,YAAY,EAAE,gBAI1B,CAAC;AAEF,0EAA0E;AAC1E,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAGvE"}

package/package.json

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