@ezuikit/player-theme 3.1.2-beta.3 → 3.1.3-beta.1

package/dist/style.css

@@ -17,12 +17,13 @@ body.ezplayer-body-mobile-noscroll{background-color:#000!important;height:100vh;
 :root{--emodal-z-index:1000;--emodal-bg:#fff;--emodal-color:rgba(0,0,0,.88);--emodal-border-radius:2px;--emodal-shadow:0 6px 16px 0 rgba(0,0,0,.08),0 3px 6px -4px rgba(0,0,0,.12),0 9px 28px 8px rgba(0,0,0,.05);--emodal-mask-bg:rgba(0,0,0,.45);--emodal-header-height:48px;--emodal-title-color:rgba(0,0,0,.88);--emodal-border-color:rgba(5,5,5,.06);--emodal-close-color:rgba(0,0,0,.45);--emodal-close-hover-color:rgba(0,0,0,.88);--emodal-close-hover-bg:rgba(0,0,0,.06)}.emodal-mask{background-color:var(--emodal-mask-bg,rgba(0,0,0,.45));inset:0;position:fixed;z-index:var(--emodal-z-index,1000)}.emodal-wrap{background-color:var(--emodal-bg,#fff);border-radius:var(--emodal-border-radius,2px);box-shadow:var(--emodal-shadow,0 6px 16px 0 rgba(0,0,0,.08));color:var(--emodal-color,rgba(0,0,0,.88));flex-direction:column;left:0;max-height:100vh;max-width:100vw;overflow:hidden;position:fixed;top:0;z-index:calc(var(--emodal-z-index, 1000) + 1)}.emodal-header,.emodal-wrap{box-sizing:border-box;display:flex}.emodal-header{align-items:center;border-bottom:1px solid var(--emodal-border-color,rgba(5,5,5,.06));flex:0 0 auto;justify-content:space-between;min-height:var(--emodal-header-height,48px);padding:0 16px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.emodal-draggable .emodal-header{cursor:move}.emodal-title{color:var(--emodal-title-color,rgba(0,0,0,.88));flex:1 1 auto;font-size:14px;font-weight:600;line-height:1.5;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.emodal-close{align-items:center;background:transparent;border:none;border-radius:4px;color:var(--emodal-close-color,rgba(0,0,0,.45));cursor:pointer;display:inline-flex;flex:0 0 auto;height:28px;justify-content:center;margin-left:12px;padding:0;transition:color .2s,background-color .2s;width:28px}.emodal-close:hover{background-color:var(--emodal-close-hover-bg,rgba(0,0,0,.06));color:var(--emodal-close-hover-color,rgba(0,0,0,.88))}.emodal-close svg{display:block;height:16px;width:16px}.emodal-body{box-sizing:border-box;flex:1 1 auto;overflow:auto}.emodal-hidden{display:none!important}.emodal-dragging{cursor:move!important;-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important}
 .evscroll-wrapper{overflow-x:hidden;overflow-y:auto;position:relative;-webkit-overflow-scrolling:touch}.evscroll-content{position:relative;width:100%}.evscroll-viewport{top:0}.evscroll-item,.evscroll-viewport{left:0;position:absolute;width:100%}.evscroll-item{box-sizing:border-box}.evscroll-wrapper::-webkit-scrollbar{height:6px;width:6px}.evscroll-wrapper::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:3px}.evscroll-wrapper::-webkit-scrollbar-track{background:transparent}
 .ez-rec-list-modal-list{box-sizing:border-box;height:100%;position:relative;width:100%}.ez-rec-list-modal-empty{align-items:center;color:rgba(0,0,0,.35);display:flex;font-size:14px;inset:0;justify-content:center;position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1}.ez-rec-list-modal-group{align-items:flex-end;box-sizing:border-box;display:flex;gap:6px;height:100%;line-height:1;padding:0 10px 8px 12px}.ez-rec-list-modal-group-title{color:rgba(0,0,0,.88);font-size:14px;font-weight:600;height:20px;line-height:20px}.ez-rec-list-modal-group-count{align-items:center;background-color:#369fff;border-radius:9px;box-sizing:border-box;color:#fff;display:inline-flex;font-size:12px;height:18px;justify-content:center;line-height:18px;min-width:18px;padding:0 5px}.ez-rec-list-modal-row{align-items:stretch;box-sizing:border-box;display:flex;gap:8px;height:100%;padding:0 10px 8px 12px}.ez-rec-list-modal-card{cursor:pointer;flex:1 1 0;max-width:calc(50% - 4px);min-width:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ez-rec-list-modal-card-active .ez-rec-list-modal-card-thumb{box-shadow:0 0 0 1px var(--ez-rec-list-modal-card-active-gap,#fff),0 0 0 3px var(--ez-rec-list-modal-card-active,#369fff)}.ez-rec-list-modal-card-playing{align-items:flex-end;bottom:4px;color:#fff;display:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));left:6px;pointer-events:none;position:absolute;z-index:2}.ez-rec-list-modal-card-playing svg{display:block;height:16px;width:16px}.ez-rec-list-modal-card-playing svg rect{animation:ez-rec-list-modal-eq .9s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom}.ez-rec-list-modal-card-playing svg rect:nth-child(2){animation-delay:.15s}.ez-rec-list-modal-card-playing svg rect:nth-child(3){animation-delay:.3s}.ez-rec-list-modal-card-active .ez-rec-list-modal-card-playing{display:inline-flex}@media (prefers-reduced-motion:reduce){.ez-rec-list-modal-card-playing svg rect{animation:none}}.ez-rec-list-modal-card-thumb{background-color:#ddd;border-radius:8px;height:100%;overflow:hidden;position:relative;width:100%}.ez-rec-list-modal-card-thumb:before{background:linear-gradient(180deg,rgba(0,0,0,.45),transparent);content:"";height:38px;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:1}.ez-rec-list-modal-card-img{height:100%;left:0;-o-object-fit:cover;object-fit:cover;opacity:0;position:absolute;top:0;transition:opacity .25s ease;width:100%;z-index:0}.ez-rec-list-modal-card-placeholder{align-items:center;background:linear-gradient(180deg,var(--ez-rec-list-modal-item-cover-placeholder-start,#b7c3cf),var(--ez-rec-list-modal-item-cover-placeholder-end,#d4d1d1) 100%);color:#fff;display:flex;font-size:20px;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:1}.ez-rec-list-modal-card-start{left:6px}.ez-rec-list-modal-card-duration,.ez-rec-list-modal-card-start{color:#fff;font-size:12px;line-height:14px;position:absolute;text-shadow:0 1px 2px rgba(0,0,0,.5);top:5px;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:2}.ez-rec-list-modal-card-duration{right:6px}.ez-rec-list-modal-card-icon{align-items:center;bottom:4px;color:#fff;display:inline-flex;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));justify-content:center;pointer-events:none;position:absolute;right:5px;z-index:2}.ez-rec-list-modal-card-icon svg{display:block;height:14px;width:14px}.ez-rec-list-modal-title{align-items:center;display:flex;gap:12px;min-width:0}.ez-rec-list-modal-title-text{flex:0 0 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ez-lazy-image.ez-lazy-image-loaded{opacity:1}.ez-lazy-image.ez-lazy-image-error{opacity:0}.ez-rec-list-modal-checkbox{align-items:center;color:var(--ez-rec-list-modal-checkbox-label,rgba(0,0,0,.65));cursor:pointer;display:inline-flex;font-size:13px;gap:6px;line-height:1;margin:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ez-rec-list-modal-checkbox-input{border:0;height:1px;margin:0;opacity:0;padding:0;pointer-events:none;position:absolute;width:1px}.ez-rec-list-modal-checkbox-box{background-color:#fff;border:1px solid var(--ez-rec-list-modal-checkbox-border,#c0c4cc);border-radius:4px;box-sizing:border-box;flex:0 0 auto;height:var(--ez-rec-list-modal-checkbox-size,16px);position:relative;transition:background-color .2s ease,border-color .2s ease;width:var(--ez-rec-list-modal-checkbox-size,16px)}.ez-rec-list-modal-checkbox-check{color:#fff;display:block;inset:0;opacity:0;position:absolute;transform:scale(.6);transition:opacity .15s ease,transform .15s ease}.ez-rec-list-modal-checkbox-check svg{display:block;height:100%;width:100%}.ez-rec-list-modal-checkbox-checked .ez-rec-list-modal-checkbox-box{background-color:var(--ez-rec-list-modal-checkbox-active,#2f6fdb);border-color:var(--ez-rec-list-modal-checkbox-active,#2f6fdb)}.ez-rec-list-modal-checkbox-checked .ez-rec-list-modal-checkbox-check{opacity:1;transform:scale(1)}.ez-rec-list-modal-checkbox-disabled{cursor:not-allowed;opacity:.5}.ez-rec-list-modal-checkbox-input:focus-visible+.ez-rec-list-modal-checkbox-box{box-shadow:0 0 0 2px rgba(47,111,219,.3)}@keyframes ez-rec-list-modal-eq{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}
+.ez-segment-progress{align-items:center;box-sizing:border-box;display:flex;padding:8px 10px;-moz-user-select:none;user-select:none;-webkit-user-select:none;width:100%;-webkit-tap-highlight-color:transparent}.ez-segment-progress-time{color:var(--ez-segment-progress-text-color,hsla(0,0%,100%,.9));flex:none;font-size:12px;font-variant-numeric:tabular-nums;line-height:1}.ez-segment-progress-time-current{margin-right:8px}.ez-segment-progress-time-total{margin-left:8px}.ez-segment-progress-track{background:var(--ez-segment-progress-track-color,hsla(0,0%,100%,.35));border-radius:2px;cursor:pointer;flex:1 1 auto;height:3px;position:relative;touch-action:none}.ez-segment-progress-track:before{bottom:-12px;content:"";left:0;position:absolute;right:0;top:-12px}.ez-segment-progress-track:focus-visible{outline:2px solid var(--ez-segment-progress-played-color,#1890ff);outline-offset:4px}.ez-segment-progress-played{background:var(--ez-segment-progress-played-color,#1890ff);border-radius:2px;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:0}.ez-segment-progress-thumb{background:var(--ez-segment-progress-thumb-color,#fff);border-radius:50%;box-shadow:0 0 2px rgba(0,0,0,.35);height:10px;left:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);transition:width .1s,height .1s;width:10px}.ez-segment-progress-dragging .ez-segment-progress-thumb{height:14px;width:14px}.ez-segment-progress-disabled{opacity:.5}.ez-segment-progress-disabled .ez-segment-progress-track{cursor:not-allowed}
 .ezplayer .ezplayer-progress{align-items:center;background-color:var(--ezplayer-panel-bg-color,rgba(0,0,0,.7));border-radius:var(--ezplayer-border-radius,8px);box-sizing:border-box;cursor:default;display:flex;flex-direction:column;justify-content:center;padding:30px 9px 11px;position:relative;width:38px}.ezplayer .ezplayer-progress,.ezplayer .ezplayer-progress-text{-webkit-user-select:none;-moz-user-select:none;user-select:none}.ezplayer .ezplayer-progress-text{font-size:12px;height:17px;left:0;line-height:17px;position:absolute;text-align:center;top:8px;width:100%}.ezplayer .ezplayer-progress-minus,.ezplayer .ezplayer-progress-plus{display:flex;height:25px;justify-content:center}.ezplayer .ezplayer-progress-minus .ezplayer-icon,.ezplayer .ezplayer-progress-plus .ezplayer-icon{color:#fff;cursor:pointer;display:inline-block;font-size:20px;height:20px;text-align:center;transition:color .3s ease,border-color .3s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:20px}.ezplayer .ezplayer-progress-minus .ezplayer-icon:active,.ezplayer .ezplayer-progress-plus .ezplayer-icon:active{color:var(--ezplayer-primary-color,#407aff)}@media (hover:hover){.ezplayer .ezplayer-progress-minus .ezplayer-icon:hover,.ezplayer .ezplayer-progress-plus .ezplayer-icon:hover{color:var(--ezplayer-primary-color,#407aff)}}.ezplayer .ezplayer-progress-plus{padding-bottom:5px}.ezplayer .ezplayer-progress-minus{padding-top:5px}.ezplayer .ezplayer-progress-slider{background-color:hsla(0,0%,100%,.75);border-radius:2px;cursor:pointer;flex:1 1 auto;position:relative;width:4px}.ezplayer .ezplayer-progress-slider-fill{background-color:var(--ezplayer-primary-color,#407aff);border-radius:4px;bottom:0;height:0;left:0;position:absolute;width:100%}.ezplayer .ezplayer-progress-slider-handle{align-items:center;background-color:var(--ezplayer-primary-color,#407aff);border-radius:50%;cursor:pointer;display:inline-flex;height:12px;justify-content:center;left:50%;position:absolute;top:0;transform:translate(-50%,-50%);width:12px}.ezplayer .ezplayer-progress-slider-handle:hover{box-shadow:0 0 2px var(--ezplayer-primary-color,#407aff)}.ezplayer .ezplayer-progress-slider-handle:before{background-color:#fff;border-radius:50%;content:"";display:inline;height:6px;width:6px}
 .ezplayer-icon{align-items:center;color:inherit;display:inline-flex;font-size:var(--ezplayer-icon-font-size,24px);font-style:normal;line-height:0;text-align:center;text-rendering:optimizeLegibility;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
 .ezplayer-select-panel{background-color:var(--ezplayer-panel-bg-color,rgba(0,0,0,.7));border-radius:var(--ezplayer-border-radius,8px);color:var(--ezplayer-default-color,#fff);display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;position:relative}.ezplayer-select-btn{width:50px}.ezplayer-select-btn span{display:inline-block;font-size:12px;font-size:calc(var(--ezplayer-font-size, 14px) - 2px);line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ezplayer-select-list{align-items:center;display:flex;flex-direction:column;font-size:var(--ezplayer-font-size,14px);list-style:none;margin:0;padding:12px 0!important;width:100%}.ezplayer-select-option{box-sizing:border-box;cursor:pointer;display:inline-flex;height:28px;justify-content:center;line-height:18px;list-style:none;padding:5px 20px!important;transition:color .3s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.ezplayer-select-option span{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ezplayer-select-option:hover{color:var(--ezplayer-active-color)}.ezplayer-select-cancel,.ezplayer-select-close{display:none}.ezplayer-select-cancel{font-size:var(--ezplayer-font-size,14px)}.ezplayer-mobile .epicker-mobile.ezplayer-select-picker .ezplayer-select-panel{background-color:transparent;max-width:400px;padding-bottom:calc(54px + env(safe-area-inset-bottom));width:90%}.ezplayer-mobile .epicker-mobile.ezplayer-select-picker .ezplayer-select-list{align-items:center;background-color:#fff;border-radius:var(--ezplayer-border-radius,8px);display:flex;flex-direction:column;font-size:var(--ezplayer-font-size,14px);max-height:70vh;max-height:calc(90vh - 108px);overflow-x:hidden;overflow-y:auto;padding:20px 0!important}.ezplayer-mobile .epicker-mobile.ezplayer-select-picker .ezplayer-select-cancel,.ezplayer-mobile .epicker-mobile.ezplayer-select-picker .ezplayer-select-option{align-items:center;box-sizing:border-box;color:#2c2c2c;display:inline-flex;height:36px;justify-content:center;line-height:26px;padding:5px 20px!important}.ezplayer-mobile .epicker-mobile.ezplayer-select-picker .ezplayer-select-option{--webkit-tap-highlight-color:transparent!important}.ezplayer-mobile .epicker-mobile.ezplayer-select-picker .ezplayer-select-option:hover{color:#2c2c2c}.ezplayer-mobile .epicker-mobile.ezplayer-select-picker .ezplayer-select-option:active{background-color:#f8f8f8}.ezplayer-mobile .epicker-mobile.ezplayer-select-picker .ezplayer-select-cancel{background-color:#fff;border-radius:var(--ezplayer-border-radius,8px);display:flex;height:54px;margin-top:8px}.ezplayer-mobile .epicker-mobile.ezplayer-select-picker .ezplayer-select-cancel:active{color:var(--ezplayer-active-color)}.ezplayer-mobile.ezplayer-fullscreen .epicker-mobile.ezplayer-select-picker .epicker-body{bottom:0;left:unset;right:0;top:0;width:240px}.ezplayer-mobile.ezplayer-fullscreen .epicker-mobile.ezplayer-select-picker .ezplayer-select-panel{align-items:center;background-color:var(--ezplayer-panel-bg-color,rgba(0,0,0,.7));border-bottom-right-radius:0;border-top-right-radius:0;height:100%;justify-content:center;padding-bottom:env(safe-area-inset-bottom);width:100%}.ezplayer-mobile.ezplayer-fullscreen .epicker-mobile.ezplayer-select-picker .ezplayer-select-list{background-color:transparent;border-radius:0;color:#fff;height:auto;margin:0;max-height:100%;width:100%}.ezplayer-mobile.ezplayer-fullscreen .epicker-mobile.ezplayer-select-picker .ezplayer-select-option,.ezplayer-mobile.ezplayer-fullscreen .epicker-mobile.ezplayer-select-picker .ezplayer-select-option:hover{color:#fff}.ezplayer-mobile.ezplayer-fullscreen .epicker-mobile.ezplayer-select-picker .ezplayer-select-option:active{background-color:transparent;color:var(--ezplayer-active-color)}.ezplayer-mobile.ezplayer-fullscreen .epicker-mobile.ezplayer-select-picker .ezplayer-select-cancel{display:none}.ezplayer-mobile.ezplayer-fullscreen .epicker-mobile.ezplayer-select-picker .ezplayer-select-close{display:inline-flex;left:10px;position:absolute;top:10px}.ezplayer-mobile.ezplayer-fullscreen .epicker-mobile.ezplayer-select-picker .ezplayer-select-close:active{color:var(--ezplayer-active-color)}
 .ezplayer-control-fullscreen .ezplayer-icon-exit-fullscreen,.ezplayer-control-global-fullscreen .ezplayer-icon-exit-global-fullscreen{display:none}.ezplayer-fullscreen .ezplayer-icon-exit-fullscreen{display:inline-flex}.ezplayer-fullscreen .ezplayer-icon-fullscreen{display:none}.ezplayer-global-fullscreen .ezplayer-icon-exit-global-fullscreen{display:inline-flex}.ezplayer-global-fullscreen .ezplayer-icon-global-fullscreen{display:none}
 .ezplayer-loading{background-color:rgba(0,0,0,.5);bottom:0;color:#fff;display:none;font-size:14px;height:100%;left:0;position:absolute;right:0;top:0;transition:transform .3s cubic-bezier(.78,.14,.15,.86);vertical-align:middle;width:100%;z-index:4}.ezplayer-loading-dot{display:inline-block;font-size:25px;height:25px;position:relative;width:25px}.ezplayer-loading-dot-item{background-color:#fff;border-radius:2px;display:block;height:10px;position:absolute;transform-origin:50% 50%;width:10px}.ezplayer-loading-dot-item:first-child{animation:animationShape1 2s linear 0s infinite normal;left:0;opacity:1;top:0}.ezplayer-loading-dot-item:nth-child(2){animation:animationShape2 2s linear 0s infinite normal;left:15px;opacity:.8;top:0}.ezplayer-loading-dot-item:nth-child(3){animation:animationShape3 2s linear 0s infinite normal;left:0;opacity:.5;top:15px}.ezplayer-loading-dot-item:nth-child(4){animation:animationShape4 2s linear 0s infinite normal;left:15px;opacity:.3;top:15px}.ezplayer-loading-dot-load{animation:rotation 1s infinite}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.ezplayer-load-blur{background:#fff;opacity:.5}}@keyframes ezdSpinMove{to{opacity:1}}@keyframes ezdRotate{to{transform:rotate(405deg)}}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes animationShape1{0%{transform:translate(0)}25%{transform:translateY(15px)}50%{transform:translate(15px,15px)}75%{transform:translate(15px)}to{transform:translate(translate)}}@keyframes animationShape2{0%{transform:translate(0)}25%{transform:translate(-15px)}50%{transform:translate(-15px,15px)}75%{transform:translateY(15px)}}@keyframes animationShape3{0%{transform:translate(0)}25%{transform:translate(15px)}50%{transform:translate(15px,-15px)}75%{transform:translateY(-15px)}}@keyframes animationShape4{0%{transform:translate(0)}25%{transform:translateY(-15px)}50%{transform:translate(-15px,-15px)}75%{transform:translate(-15px)}}.ezplayer-loading-text{margin-top:20px}
-.ezplayer-message{background-color:rgba(0,0,0,.4);bottom:0;color:#fff;display:none;font-size:16px;height:100%;left:0;overflow:hidden;position:absolute;right:0;top:0;width:100%;z-index:5}.ezplayer-message-content{align-items:center;display:flex;flex-direction:column;justify-content:center}.ezplayer-message-msg{display:-webkit-box;margin-top:15px;max-width:500px;overflow:hidden;word-break:break-all;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0 20px}.ezplayer-message-error{color:#ff4d4f}.ezplayer-toast{background-color:rgba(0,0,0,.8);border-radius:var(--ezplayer-border-radius,8px);box-shadow:0 9px 28px 8px rgba(0,0,0,.05),0 3px 16px 0 rgba(0,0,0,.03),0 3px 7px -4px rgba(0,0,0,.05);color:#fff;display:flex;font-size:14px;left:50%;line-height:22px;max-width:450px;overflow:hidden;padding:9px 16px;position:absolute;top:50px;transform:translateX(-50%);z-index:6}.ezplayer-toast-content{padding-left:24px;position:relative}.ezplayer-toast .ezplayer-icon{font-size:16px;left:0;position:absolute;top:3px}.ezplayer-toast .ezplayer-icon-info-circle{color:var(--ezplayer-default-color,#fff)}.ezplayer-toast .ezplayer-icon-warn-circle{color:#faad14}.ezplayer-toast .ezplayer-icon-close-circle{color:#ff4d4f}.ezplayer-mobile .ezplayer-toast{font-size:12px;line-height:20px}.ezplayer-mobile .ezplayer-toast-content{padding-left:20px}.ezplayer-mobile .ezplayer-toast .ezplayer-icon{font-size:14px}
+.ezplayer-message{background-color:rgba(0,0,0,.4);bottom:0;color:#fff;display:none;font-size:16px;height:100%;left:0;overflow:hidden;position:absolute;right:0;top:0;width:100%;z-index:5}.ezplayer-message-content{align-items:center;display:flex;flex-direction:column;justify-content:center}.ezplayer-message-msg{display:-webkit-box;-webkit-line-clamp:2;margin-top:15px;max-width:500px;overflow:hidden;word-break:break-all;-webkit-box-orient:vertical;padding:0 20px}.ezplayer-message-error{color:#ff4d4f}.ezplayer-toast{background-color:rgba(0,0,0,.8);border-radius:var(--ezplayer-border-radius,8px);box-shadow:0 9px 28px 8px rgba(0,0,0,.05),0 3px 16px 0 rgba(0,0,0,.03),0 3px 7px -4px rgba(0,0,0,.05);color:#fff;display:flex;font-size:14px;left:50%;line-height:22px;max-width:450px;overflow:hidden;padding:9px 16px;position:absolute;top:50px;transform:translateX(-50%);z-index:6}.ezplayer-toast-content{padding-left:24px;position:relative}.ezplayer-toast .ezplayer-icon{font-size:16px;left:0;position:absolute;top:3px}.ezplayer-toast .ezplayer-icon-info-circle{color:var(--ezplayer-default-color,#fff)}.ezplayer-toast .ezplayer-icon-warn-circle{color:#faad14}.ezplayer-toast .ezplayer-icon-close-circle{color:#ff4d4f}.ezplayer-mobile .ezplayer-toast{font-size:12px;line-height:20px}.ezplayer-mobile .ezplayer-toast-content{padding-left:20px}.ezplayer-mobile .ezplayer-toast .ezplayer-icon{font-size:14px}
 .ezplayer-poster{bottom:0;display:none;height:100%;left:0;overflow:hidden;position:absolute;right:0;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;z-index:2}.ezplayer-poster img{border:0;font-size:0;height:100%;outline:none;pointer-events:none;width:100%}
 .ezplayer-icon-volume{position:relative}.ezplayer-icon-volume svg .ezplayer-icon-volume-high,.ezplayer-icon-volume svg .ezplayer-icon-volume-low,.ezplayer-icon-volume svg .ezplayer-icon-volume-muted{display:none}.ezplayer-icon-volume.ezplayer-icon-volume-high svg .ezplayer-icon-volume-high,.ezplayer-icon-volume.ezplayer-icon-volume-high svg .ezplayer-icon-volume-low,.ezplayer-icon-volume.ezplayer-icon-volume-low svg .ezplayer-icon-volume-low,.ezplayer-icon-volume.ezplayer-icon-volume-muted svg .ezplayer-icon-volume-muted,.ezplayer-icon-volume.ezplayer-icon-volume-zero svg .ezplayer-icon-volume-muted{display:inline}.ezplayer-volume-progress{height:126px}
 .ezplayer-control-rec{box-sizing:border-box;display:inline-flex;flex-direction:row}.ezplayer-control-rec .ezplayer-icon-cloud-rec,.ezplayer-control-rec .ezplayer-icon-cloud-record,.ezplayer-control-rec .ezplayer-icon-sdk{color:#d4d7dd;cursor:pointer;margin-left:5px}.ezplayer-mobile-extend .ezplayer-control-rec{background-color:#f4f6fc;border:1px solid #ededed;border-radius:18px;height:30px}.ezplayer-mobile-extend .ezplayer-icon-cloud-rec,.ezplayer-mobile-extend .ezplayer-icon-cloud-record,.ezplayer-mobile-extend .ezplayer-icon-sdk{cursor:pointer;font-size:20px;margin-left:1px;padding:2px 7px}.ezplayer-mobile-extend .ezplayer-icon-cloud-rec.ezplayer-active,.ezplayer-mobile-extend .ezplayer-icon-cloud-record.ezplayer-active,.ezplayer-mobile-extend .ezplayer-icon-sdk.ezplayer-active{background-color:#fff;border-radius:12px;box-shadow:0 1px 4px 0 hsla(0,0%,68%,.2)}.ezplayer-mobile .ezplayer-icon-cloud-rec,.ezplayer-mobile .ezplayer-icon-cloud-record,.ezplayer-mobile .ezplayer-icon-sdk{margin-left:10px}
@@ -35,7 +36,7 @@ body.ezplayer-body-mobile-noscroll{background-color:#000!important;height:100vh;
 .ezplayer-control-rec-dropdown .ezplayer-rec-dropdown-btn{cursor:pointer;font-size:14px;line-height:20px;padding:2px 6px;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.ezplayer-control-rec-dropdown.ezplayer-active .ezplayer-rec-dropdown-btn{color:var(--ezplayer-active-color,#407aff)}.ezplayer-rec-dropdown-picker .ezplayer-rec-dropdown-panel{background-color:var(--ezplayer-panel-bg-color,rgba(0,0,0,.7));border-radius:var(--ezplayer-border-radius,8px);color:var(--ezplayer-default-color,#fff);padding:8px 0}.ezplayer-rec-dropdown-picker .ezplayer-rec-dropdown-list{list-style:none;margin:0;padding:0}.ezplayer-rec-dropdown-picker .ezplayer-rec-dropdown-item{cursor:pointer;font-size:14px;line-height:20px;padding:6px 20px;transition:color .2s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.ezplayer-rec-dropdown-picker .ezplayer-rec-dropdown-item.ezplayer-active,.ezplayer-rec-dropdown-picker .ezplayer-rec-dropdown-item:hover{color:var(--ezplayer-active-color,#407aff)}
 .ezplayer-control-rec-list .ezplayer-rec-list-btn{cursor:pointer;font-size:14px;line-height:20px;padding:2px 6px;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.ezplayer-control-rec-list.ezplayer-active .ezplayer-rec-list-btn{color:var(--ezplayer-active-color,#407aff)}.ezplayer-mobile-extend .ezplayer-control-rec-list{display:none}
 .ezplayer-control-alarm-message .ezplayer-alarm-message-btn{cursor:pointer;font-size:14px;line-height:20px;padding:2px 6px;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.ezplayer-mobile-extend .ezplayer-control-alarm-message{align-items:center;background-color:#f4f6fc;border:1px solid #ededed;border-radius:50%;box-sizing:border-box;cursor:pointer;display:inline-flex;font-size:18px;height:30px;justify-content:center;margin-left:8px;width:30px}
-.ezplayer-record-timer{align-items:center;background-color:#ff4c5c;border-radius:24px;color:#fff;display:inline-flex;flex-direction:row;left:50%;padding:2px 6px;position:absolute;top:60px;transform:translateX(-50%);-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:3}.ezplayer-record-timer .ezplayer-icon-record-circle{font-size:14px}.ezplayer-record-timer-time{font-weight:400;letter-spacing:1px;line-height:20px;margin-left:2px}
+.ezplayer-record-timer .ezplayer-icon-record-circle{font-size:14px}.ezplayer-record-timer{align-items:center;background-color:#ff4c5c;border-radius:24px;color:#fff;display:inline-flex;flex-direction:row;left:50%;padding:2px 6px;position:absolute;top:60px;transform:translateX(-50%);-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:3}.ezplayer-record-timer-time{font-weight:400;letter-spacing:1px;line-height:20px;margin-left:2px}
 .ezplayer-select-definition .ezplayer-select-panel{width:100px}.ezplayer-control-definition .ezplayer-select-btn{width:75px}
 
 .ezplayer-control-device{width:100%}.ezplayer-control-device span{display:inline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@@ -44,4 +45,5 @@ body.ezplayer-body-mobile-noscroll{background-color:#000!important;height:100vh;
 
 .ezplayer-control-date .ezplayer-icon-date:hover{color:var(--ezplayer-primary-color,#407aff)}.ezplayer-mobile-extend .ezplayer-mobile-date-filter{align-items:center;background:#f4f6fc;border:1px solid #ededed;border-radius:8px;box-sizing:border-box;color:#2c2c2c;display:inline-flex;font-family:PingFang SC;font-size:16px;font-weight:500;height:36px;justify-content:center;letter-spacing:0;line-height:20px;padding:6px 10px}.ezplayer-mobile-extend .ezplayer-mobile-date-filter-value{margin-right:5px}.ezplayer-mobile-extend .ezplayer-icon-filter{font-size:20px}
 .ezplayer-control-time .ezplayer-icon-time:hover{color:var(--ezplayer-primary-color,#407aff)}
-.ezplayer-control-time-line{position:relative}.ezplayer-control-time-line .ezplayer-time-line-zoom{background-color:#000;bottom:0;display:inline-flex;flex-direction:column;justify-content:space-between;padding-bottom:2px;padding-left:10px;padding-top:2px;position:absolute;right:0;top:0;z-index:3}.ezplayer-control-time-line .ezplayer-time-line-zoom-add,.ezplayer-control-time-line .ezplayer-time-line-zoom-sub{align-items:center;background-color:#333;color:var(--ezplayer-default-color,#fff);cursor:pointer;display:inline-flex;height:20px;justify-content:center;overflow:hidden;right:0;transition:color .3s ease;width:14px}.ezplayer-control-time-line .ezplayer-icon-add,.ezplayer-control-time-line .ezplayer-icon-reduce{font-size:14px;font-weight:500}.ezplayer-control-time-line .ezplayer-icon-add:hover,.ezplayer-control-time-line .ezplayer-icon-reduce:hover{color:var(--ezplayer-primary-color,#407aff)}.ezplayer-control-time-line .ezplayer-time-line-zoom-add{border-top-left-radius:2px;border-top-right-radius:2px}.ezplayer-control-time-line .ezplayer-time-line-zoom-sub{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.ezplayer-mobile-extend .ezplayer-control-time-line{display:block;height:300px;margin-top:10px;padding-right:0}
+.ezplayer-control-time-line{position:relative}.ezplayer-control-time-line .ezplayer-time-line-zoom{background-color:#000;bottom:0;display:inline-flex;flex-direction:column;justify-content:space-between;padding-bottom:2px;padding-left:10px;padding-top:2px;position:absolute;right:0;top:0;z-index:3}.ezplayer-control-time-line .ezplayer-time-line-zoom-add,.ezplayer-control-time-line .ezplayer-time-line-zoom-sub{align-items:center;background-color:#333;color:var(--ezplayer-default-color,#fff);cursor:pointer;display:inline-flex;height:20px;justify-content:center;overflow:hidden;right:0;transition:color .3s ease;width:14px}.ezplayer-control-time-line .ezplayer-icon-add,.ezplayer-control-time-line .ezplayer-icon-reduce{font-size:14px;font-weight:500}.ezplayer-control-time-line .ezplayer-icon-add:hover,.ezplayer-control-time-line .ezplayer-icon-reduce:hover{color:var(--ezplayer-primary-color,#407aff)}.ezplayer-control-time-line .ezplayer-time-line-zoom-add{border-top-left-radius:2px;border-top-right-radius:2px}.ezplayer-control-time-line .ezplayer-time-line-zoom-sub{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.ezplayer-mobile-extend .ezplayer-control-time-line{display:block;height:300px;margin-top:10px;padding-right:0}
+.ezplayer-control-segment-progress{display:block;padding:0;width:100%}.ezplayer-mobile-extend-segment-progress{width:100%;--ez-segment-progress-text-color:var(--ezplayer-mobile-extend-default-color,#2c2c2c);--ez-segment-progress-track-color:rgba(0,0,0,.15)}.ezplayer-mobile-extend-segment-progress:empty{display:none}.ezplayer-mobile-extend-segment-progress .ezplayer-control-segment-progress{touch-action:none}.ezplayer-mobile-extend-segment-progress .ezplayer-control-segment-progress .ez-segment-progress{padding-top:0}

package/dist/style.js

@@ -1,6 +1,6 @@
 /*
-* @ezuikit/player-theme v3.1.2-beta.3
-* Copyright (c) 2026-08-14 08:18:55 Ezviz-OpenBiz
+* @ezuikit/player-theme v3.1.3-beta.1
+* Copyright (c) 2026-08-19 16:47:24 Ezviz-OpenBiz
 * Released under the MIT License.
 */
 require("./style.css");

package/dist/types/index.d.ts

@@ -18,7 +18,7 @@ declare const THEME_SCALE_MODE_TYPE: {
     /** 视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全 */
     readonly fullAuto: 2;
 };
-declare const THEME_PROPS: readonly ["width", "height", "playing", "volume", "muted", "loading", "recType", "isCurrentFullscreen", "orientationAngle", "zooming", "zoom", "recording", "recordList", "speed", "urlInfo", "videoLevelList", "videoLevel", "recMonth", "url"];
+declare const THEME_PROPS: readonly ["width", "height", "playing", "volume", "muted", "loading", "recType", "isCurrentFullscreen", "orientationAngle", "zooming", "zoom", "recording", "recordList", "speed", "urlInfo", "videoLevelList", "videoLevel", "recMonth", "url", "playbackRange"];
 /**
  *
  * 事件名
@@ -111,6 +111,8 @@ declare const EVENTS: {
     readonly currentVideoLevelAuto: "currentVideoLevelAuto";
     readonly setAllDayRecTimes: "setAllDayRecTimes";
     readonly getOSDTime: "getOSDTime";
+    /** 播放区间播放结束（SDK 层 playbackRange 特性） */
+    readonly playbackEnd: "playbackEnd";
     /**
      * 控件相关
      */
@@ -342,6 +344,8 @@ declare class Control extends EventEmitter {
     protected _disabled: boolean;
     protected _active: boolean;
     private readonly _camelCaseName;
+    /** click 监听引用，销毁时需显式移除 */
+    private _onClickHandler;
     constructor(options: Partial<ControlOptions>);
     /**
      * 是否激活
@@ -1022,7 +1026,9 @@ type ControlType =
 /** 时间选择 */
  | 'time'
 /** 时间轴 */
- | 'timeLine';
+ | 'timeLine'
+/** 回放片段进度条（移动端，播放区间约束下渲染） */
+ | 'segmentProgress';
 type MergeControlType = 
 /** 设备序列号 */
 'deviceID'
@@ -1341,6 +1347,10 @@ declare class MobileExtend extends EventEmitter {
     $topLeft: HTMLElement;
     $topRight: HTMLElement;
     $top: HTMLElement;
+    /**
+     * 回放片段进度条容器，位于扩展区最上方（紧贴播放控件下方）
+     */
+    $segmentProgress: HTMLElement;
     private readonly _$siblingContainer;
     constructor($siblingContainer: HTMLElement);
     render(): void;
@@ -1502,37 +1512,31 @@ declare class Theme extends EventEmitter {
         readonly recTypeChange: "recTypeChange";
         readonly definitionChange: "definitionChange";
         readonly speedChange: "speedChange";
-        readonly recordingChange: "recordingChange";
+        readonly recordingChange: "recordingChange"; /** 封面控件 @since 0.0.1 @private */
         readonly talkingChange: "talkingChange";
         readonly talkVolumeChange: "talkVolumeChange";
         readonly broadcastChange: "broadcastChange";
         readonly aichatChange: "aichatChange";
         readonly liveChange: "liveChange";
-        /**
-         * @type { "rec" | "cloudRec" | "cloudRecord" } recType 回放类型
-         * ```ts
-         * theme.recType // 回放类型
-         * ```
-         */
         readonly recDropdownChange: "recDropdownChange";
         readonly recListChange: "recListChange";
         readonly alarmMessageChange: "alarmMessageChange";
         readonly setLoggerOptions: "setLoggerOptions";
-        readonly records: "records"; /**
-         * 更多控件（footer more）
-         * @since 0.0.1
-         * @private
-         */
+        readonly records: "records";
         readonly ptzSpeedChange: "ptzSpeedChange";
         readonly setVideoLevelList: "setVideoLevelList";
         readonly currentVideoLevel: "currentVideoLevel";
         readonly currentVideoLevelAuto: "currentVideoLevelAuto";
-        readonly setAllDayRecTimes: "setAllDayRecTimes";
+        readonly setAllDayRecTimes: "setAllDayRecTimes"; /**
+         * 移动端扩展容器, 扩展的控件渲染在指定容器以外， 仅只用端适用， 为了可以放置大的控件和方便开发接入
+         * @private
+         */
         readonly getOSDTime: "getOSDTime";
+        readonly playbackEnd: "playbackEnd";
         readonly control: {
             readonly play: "Control.play";
             readonly playDestroy: "Control.playDestroy";
-            readonly capturePicture: "Control.capturePicture"; /**  @since 0.0.1 @private */
+            readonly capturePicture: "Control.capturePicture";
             readonly capturePictureResult: "Control.capturePictureResult";
             readonly capturePictureDestroy: "Control.capturePictureDestroy";
             readonly volumechange: "Control.volumechange";
@@ -1540,11 +1544,11 @@ declare class Theme extends EventEmitter {
             readonly volumeDestroy: "Control.volumeDestroy";
             readonly controlsBarOpenChange: "Control.controlsBarOpenChange";
             readonly headerMoreShowControlsChange: "Control.headerMoreShowControlsChange";
-            readonly headerMorePanelOpenChange: "Control.headerMorePanelOpenChange";
+            readonly headerMorePanelOpenChange: "Control.headerMorePanelOpenChange"; /** 电子放大倍数 @private */
             readonly footerMoreShowControlsChange: "Control.footerMoreShowControlsChange";
             readonly footerMorePanelOpenChange: "Control.footerMorePanelOpenChange";
             readonly deviceDestroy: "Control.deviceDestroy";
-            readonly recTypeChange: "Control.recTypeChange"; /** 自定清晰度 @private */
+            readonly recTypeChange: "Control.recTypeChange";
             readonly recDestroy: "Control.recDestroy";
             readonly definitionChange: "Control.definitionChange";
             readonly definitionList: "Control.definitionList";
@@ -1748,7 +1752,7 @@ declare class Theme extends EventEmitter {
             DEVICE_ENCRYPTED: string;
             NO_RECORD: string;
             PLAY_FAILED: string;
-            PLAY_SUCCESS: string;
+            PLAY_SUCCESS: string; /** 语言包 @since 0.0.1 */
             STOP_SUCCESS: string;
             CHANGE_PLAYURL_SUCCESS: string;
             CHANGE_PLAYURL_FAILED: string;
@@ -1763,14 +1767,14 @@ declare class Theme extends EventEmitter {
             MAX_SPEED_LIMIT: string;
             MIN_SPEED_LIMIT: string;
             SEEK_CANNOT_CROSS_DAYS: string;
-            SEEK_TIMEFORMAT_ERROR: string;
             /** 所有控件列表, 所有控件名称规则（`${iconId}Control`）， 如音量控件 this.controls["volumeControl"]  @since 0.0.1 */
+            SEEK_TIMEFORMAT_ERROR: string;
             PAUSE: string;
             PAUSE_FAILED: string;
             RESUME: string;
             RESUME_FAILED: string;
             CALL_END: string;
-            USER_DO_NOT_OWN_DEVICE: string;
+            USER_DO_NOT_OWN_DEVICE: string; /** 加载控件 @since 0.0.1  @private */
             NO_CLOUD_RECORD: string;
             CHANGE_VIDEO_LEVEL: string;
             CHANGE_VIDEO_LEVEL_FAIL: string;
@@ -1786,13 +1790,13 @@ declare class Theme extends EventEmitter {
             VIDEO_LEVEL_3K: string;
             VIDEO_LEVEL_4k: string;
             RESET_THEME: string;
-            BTN_PLAY: string;
-            BTN_PAUSE: string;
             /**
              * 更多控件（header more）
              * @since 0.0.1
              * @private
              */
+            BTN_PLAY: string;
+            BTN_PAUSE: string;
             BTN_VOLUME: string;
             BTN_MUTED: string;
             BTN_RECORDVIDEO: string;
@@ -1802,9 +1806,9 @@ declare class Theme extends EventEmitter {
             BTN_AICHAT: string;
             BTN_LIVE: string;
             BTN_REC_DROPDOWN: string;
-            BTN_ALARM_MESSAGE: string; /** 头部控件 @since 0.0.1 @private */
-            REC_DROPDOWN_CLOUD_REC: string;
-            REC_DROPDOWN_CLOUD_RECORD: string; /** 低部控件 @since 0.0.1 @private */
+            BTN_ALARM_MESSAGE: string;
+            REC_DROPDOWN_CLOUD_REC: string; /** 低部控件 @since 0.0.1 @private */
+            REC_DROPDOWN_CLOUD_RECORD: string;
             REC_DROPDOWN_LOCAL_REC: string;
             BTN_ZOOM: string;
             BTN_3D_ZOOM: string;
@@ -1832,7 +1836,7 @@ declare class Theme extends EventEmitter {
             RECORD_TIPS: string;
             RECORDS: string;
             OPEN_SOUND: string;
-            CLOSE_SOUND: string;
+            CLOSE_SOUND: string; /** 容器的宽 */
             SOUND_OPENED: string;
             ZOOM: string;
             START_ZOOM: string;
@@ -1852,11 +1856,10 @@ declare class Theme extends EventEmitter {
             DEVICE_NOT_SUPPORT_3D_ZOOM: string;
             '3D_ZOOM_ACTIVED': string;
             '3D_ZOOM_NOT_ACTIVED': string;
-            '3D_ZOOM_CLOSED': string; /** 录制中 @private */
+            '3D_ZOOM_CLOSED': string;
             CHANGE_ZOOM_TYPE: string;
             FULLSCREEN: string;
             FULLSCREEN_EXIT: string;
-            /** 倍速 @private */
             GET_WEB_FULLSCREEN_STATUS: string;
             WEB_FULLSCREEN: string;
             WEB_FULLSCREEN_EXIT: string;
@@ -1870,8 +1873,21 @@ declare class Theme extends EventEmitter {
             PTZ_FAST: string;
             PTZ_MID: string;
             PTZ_SLOW: string;
-            PTZ_SPEED: string;
+            PTZ_SPEED: string; /**
+            //  * 记录回放的月份
+            //  *
+            //  * key: {序列号}_{通道号}_{rec | cloud | cloudRecord}   比如：BC7799091_1_rec  BC7799091_1_cloud BC7799091_1_cloudRecord
+            //  *
+            //  * value: 月份列表  比如 ["2025-12-01", "2025-12-02"]
+            //  * @private
+            //  */
+            /**
+             * 录像回放的月份列表 @private
+             */
             DEVICE_ZOOM: string;
+            /**
+             * 录像回放的月份列表 @private
+             */
             DEVICE_FOCUS: string;
             NOT_SUPPORT_DEVICE_ZOOM: string;
             NOT_SUPPORT_FOCUS: string;
@@ -1880,7 +1896,7 @@ declare class Theme extends EventEmitter {
              * 录像回放的月份列表 @private
              */
             MIRROR_TYPE_ERROR: string;
-            CHANGE_FEC_TYPE: string; /** 清理 header/footer 动画 定时器 @private */
+            CHANGE_FEC_TYPE: string;
             DEVICE_NOT_SUPPORT: string;
             TYPE_NOT_SUPPORT: string;
             FEC_SUPPORT_VERSION: string;
@@ -1932,6 +1948,40 @@ declare class Theme extends EventEmitter {
             395506: string;
             395507: string;
             395530: string;
+            /**
+             * 播放器主题
+             * @class Theme
+             * @category Theme
+             * @remarks
+             * 萤石播放器主题，主要用于播放器的 UI 展示和交互，支持 flv, hls, mp4, ezopen 等流类型。
+             * 提供了丰富的控件和配置选项，支持多语言和自定义样式。
+             *
+             * @example
+             * ```ts
+             * // import css file
+             * import "@ezuikit/player-theme/dist/style.js"
+             * import Theme from '@ezuikit/player-theme';
+             *
+             * // class Player extends Theme {}
+             *
+             * const theme = new Theme({
+             *  container: () => document.querySelector('.player'),
+             *  type: 'flv',
+             * });
+             * ```
+             *
+             * ```html
+             * <!-- html script, static in `@ezuikit/player-theme/dist` -->
+             * <link rel="stylesheet" href="./assets/@ezuikit/player-theme/dist/style.css" />
+             * <script src="./assets/@ezuikit/player-theme/dist/index.umd.js"></script>
+             * <script>
+             *  const theme = new Theme({
+             *      container: () => document.querySelector('.player'),
+             *      type: 'flv',
+             *  });
+             * </script>
+             * ```
+             */
             395544: string;
             395545: string;
             395546: string;
@@ -1953,7 +2003,6 @@ declare class Theme extends EventEmitter {
             395602: string;
             395610: string;
             395620: string;
-            /** 消息提示控件 @since 0.0.1 @private */
             395701: string;
             395702: string;
             395703: string;
@@ -1981,17 +2030,17 @@ declare class Theme extends EventEmitter {
             396511: string;
             396512: string;
             396513: string;
-            396514: string; /** 回放片段列表 */
+            396514: string;
             396515: string;
             396516: string;
-            /**
-             * 录像回放的月份列表 @private
-             */
             396517: string;
             396518: string;
             396519: string;
             396520: string;
             396700: string;
+            /**
+             * 录像回放的月份列表 @private
+             */
             396701: string;
             397001: string;
             397002: string;
@@ -2066,10 +2115,6 @@ declare class Theme extends EventEmitter {
             CHANGE_VIDEO_LEVEL: string;
             CHANGE_VIDEO_LEVEL_FAIL: string;
             GET_VIDEO_LEVEL_LIST: string;
-            /**
-             * 视频分辨率 高
-             * @version 3.1.2
-             */
             PLEASE_INPUT_RIGHT_VIDEO_LEVEL: string;
             VIDEO_LEVEL_NOT_SUPPORT: string;
             VIDEO_LEVEL_AUTO: string;
@@ -2078,19 +2123,38 @@ declare class Theme extends EventEmitter {
             VIDEO_LEVEL_HEIGH: string;
             VIDEO_LEVEL_SUPER: string;
             VIDEO_LEVEL_EXTREME: string;
+            /**
+             * 视频信息
+             * @version 3.1.2
+             * ```ts
+             * theme.videoInfo // ThemeVideoInfo
+             * ```
+             */
             VIDEO_LEVEL_3K: string;
             VIDEO_LEVEL_4k: string;
             RESET_THEME: string;
             BTN_PLAY: string;
             BTN_PAUSE: string;
             BTN_VOLUME: string;
-            BTN_MUTED: string;
+            BTN_MUTED: string; /**
+             * 视频分辨率 宽
+             *
+             * @version 3.1.2
+             *
+             * ```ts
+             * theme.videoWidth // number
+             * ```
+             */
             BTN_RECORDVIDEO: string;
             BTN_CAPTURE: string;
             BTN_TALK: string;
             BTN_BROADCAST: string;
             BTN_AICHAT: string;
             BTN_LIVE: string;
+            /**
+             * 视频分辨率 高
+             * @version 3.1.2
+             */
             BTN_REC_DROPDOWN: string;
             BTN_ALARM_MESSAGE: string;
             REC_DROPDOWN_CLOUD_REC: string;
@@ -2119,9 +2183,6 @@ declare class Theme extends EventEmitter {
             CAPTURE_FAILED: string;
             START_RECORD_SUCCESS: string;
             START_RECORD_FAILED: string;
-            /**
-             * 音量值
-             */
             STOP_RECORD_SUCCESS: string;
             STOP_RECORD_FAILED: string;
             RECORD_TIPS: string;
@@ -2138,10 +2199,6 @@ declare class Theme extends EventEmitter {
             ZOOM_SUB_MIN: string;
             ZOOM_LIMIT_MAX: string;
             ZOOM_LIMIT_MIN: string;
-            /**
-             * 静音
-             *
-             */
             ZOOM_NOT_ENABLED: string;
             '3D_ZOOM': string;
             '3D_ZOOM_DISABLE': string;
@@ -2294,6 +2351,15 @@ declare class Theme extends EventEmitter {
     videoLevelList: DefinitionItem[];
     /** 回放片段列表 */
     recordList: TimeLineTimeSection[];
+    /**
+     * 播放区间（片段分享），null 表示不约束。
+     * 由 SDK 层在初始化时通过 props 下发，主题层据此决定日历/回放类型按钮
+     * 是否渲染、片段进度条是否渲染。区间没有运行时变更入口。
+     */
+    playbackRange: {
+        begin: string;
+        end: string;
+    } | null;
     /** 窗口尺寸变化时，设置窗口超出隐藏，防止出现滚动条 */
     private _resizeOverflowTimer;
     /**
@@ -2302,6 +2368,18 @@ declare class Theme extends EventEmitter {
     recMonth: string[];
     /** 清理 header/footer 动画 定时器 @private */
     _onPauseTimingFunc: ((open: boolean) => void) | null;
+    /**
+     * 首帧同步 Live/RecDropdown 激活态的监听器引用。
+     * 每次 `_renderTheme` 重新绑定前需先移除旧引用，避免 changeTheme 累积监听。
+     * @private
+     */
+    _onFirstFrameSync: (() => void) | null;
+    /**
+     * 模板请求（getDetail）的中止控制器。
+     * 重新渲染或销毁时中止在途请求，避免请求返回后在已销毁/已切换的 theme 上继续操作。
+     * @private
+     */
+    _templateAbortController: AbortController | null;
     /** 销毁标识  @readonly */
     destroyed: boolean;
     scaleMode: ThemeOptions['scaleMode'];
@@ -2819,6 +2897,8 @@ interface ThemeOptions {
     timeOptions?: OmitControlOptions<TimePickerControlOptions> | null;
     /** 时间轴控件配置， 设置 null 不渲染控件 @since 0.0.1 */
     timeLineOptions?: any | null;
+    /** 回放片段进度条配置（移动端，仅在设置了播放区间时渲染）， 设置 null 不渲染控件 */
+    segmentProgressOptions?: any | null;
     /** 初始化开始回调, 在内部可以添加事件(Control.beforeMountControls, Control.mountedControls)监听，设置 null 不渲染控件 @since 0.0.1 */
     onInitializing?: (theme: Theme) => void;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ezuikit/player-theme",
-  "version": "3.1.2-beta.3",
+  "version": "3.1.3-beta.1",
   "description": "player theme",
   "title": "theme",
   "main": "dist/index.cjs",
@@ -37,7 +37,8 @@
     "@ezuikit/utils-i18n": "^2.0.1",
     "@ezuikit/utils-logger": "^2.0.1",
     "@ezuikit/utils-tools": "^2.0.6",
-    "@ezuikit/control-date-picker": "2.1.1",
+    "@ezuikit/control-date-picker": "2.1.2-beta.1",
+    "@ezuikit/control-segment-progress": "0.0.1",
     "@ezuikit/control-time-line": "2.1.0",
     "@ezuikit/control-ptz": "1.0.0",
     "@ezuikit/control-rec-list-modal": "0.0.1",