@tiwz/react-video-player 1.0.3 → 1.0.4

package/README.md

@@ -63,6 +63,7 @@ export default function App() {
 
 | Prop | Type | Required | Description |
 |--------|------|----------|--------------|
+| `hls` | `boolean \| Partial<HlsConfig>` | ❌ | Using hls.js |
 | `title` | `string` | ❌ | Video title overlay |
 | `source` | `string \| { link: string; type?: 'video/mp4' \| 'video/ogg' \| 'video/webm' }` | ✅ | Video source |
 

package/dist/index.css

@@ -1 +1 @@
-.VideoPlayer-module_hide__nwlly{display:none}.VideoPlayer-module_visit__PJEFg{visibility:visible}.VideoPlayer-module_invisit__A7jP6{visibility:hidden}.VideoPlayer-module_opacity0__M4VIz{opacity:0}.VideoPlayer-module_opacity1__wWDar{opacity:1}.VideoPlayer-module_videoContainer__-vADj{aspect-ratio:16/9;width:100%}.VideoPlayer-module_absoluteCenter__A2KzN{cursor:pointer;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.VideoPlayer-module_wrapper__8iODY,.VideoPlayer-module_wrapper__8iODY *{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.VideoPlayer-module_wrapper__8iODY{aspect-ratio:16/9;background-color:#000;color:#fff;display:block;position:relative;width:100%}.VideoPlayer-module_video__fcIYk{display:block;height:100%;width:100%}.VideoPlayer-module_controller__eyPIB{align-items:center;background-color:rgba(0,0,0,.5);display:flex;flex-direction:column;height:100%;justify-content:center;left:0;position:absolute;top:0;transition:all .2s;width:100%}.VideoPlayer-module_title__oxKqS{font-size:1.1rem;font-weight:400;line-height:1.1rem;padding:1rem 0 0 1rem;width:100%;p{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:calc(100% - 3.6rem)}}.VideoPlayer-module_center__arqa3{display:flex;flex:1;flex-direction:row;width:100%;div{display:flex;flex:1}}.VideoPlayer-module_controls__OQ23e{display:flex;gap:.6em;padding:.8em 1em;width:100%}.VideoPlayer-module_controls__OQ23e button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff0;border:0;color:#fff;cursor:pointer;padding:.25em;transition:background-color .2s}.VideoPlayer-module_controls__OQ23e button:hover{background-color:#00b2ff;border-radius:5px}.VideoPlayer-module_timeWrapper__fpsFx{align-items:center;display:flex;flex:1;font-family:monospace;font-size:1rem;gap:.6em;padding-inline:.3em;article{font-size:1em}}.VideoPlayer-module_btnSetting__le5fg{font-size:.8em;position:absolute;right:1em;top:.8em;button svg{width:2em!important}}.VideoPlayer-module_customSelect__GSAin{background-color:#fff;border-radius:6px;box-shadow:0 0 2px #000a;color:#000;min-width:12em;padding:.3em;padding-inline:1em;position:absolute;right:1em;top:2.8em;z-index:2}.VideoPlayer-module_speedControl__W-yYE{cursor:pointer;font-size:12pt;padding-block:.3em;text-align:center}.VideoPlayer-module_hoverTime__Dl7h0{background-color:#fff;border-radius:99px;box-shadow:0 0 2px #000a;color:#000;font-size:.8em;padding:.1em .8em;position:absolute;top:-3em}.VideoPlayer-module_hoverTime__Dl7h0:before{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #fff;content:"";height:0;left:50%;position:absolute;top:99%;transform:translateX(-50%);width:0}.VideoPlayer-module_timeControl__sz7qH{flex:1;position:relative}.VideoPlayer-module_backProcess__I5ZGe{background-color:#fff5;border-radius:2em;height:4px;max-width:100%;width:100%}.VideoPlayer-module_progressBar__v-AQM{background-color:#fffa;border-radius:2em;height:4px;left:0;max-width:100%;position:absolute;top:0;width:100%}.VideoPlayer-module_rangeTime__Sp6FM{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border-radius:2em;height:4px;left:0;position:absolute;top:0;width:100%}.VideoPlayer-module_rangeTime__Sp6FM::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:#fff;border-radius:2em;height:1em;width:1em}.VideoPlayer-module_rangeTime__Sp6FM:hover{cursor:pointer}.VideoPlayer-module_rangeTime__Sp6FM::-webkit-slider-thumb:hover{box-shadow:0 0 1px 3px #fff4}.VideoPlayer-module_volumeWrapper__QBYAa{align-items:center;display:flex;gap:.1em}.VideoPlayer-module_rangeVolume__koFUe{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border-radius:2em;cursor:pointer;height:4px;width:4em}.VideoPlayer-module_rangeVolume__koFUe::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:#fff;border-radius:2em;height:1em;width:1em}.VideoPlayer-module_rangeVolume__koFUe::-webkit-slider-thumb:hover{box-shadow:0 0 1px 3px #fff4}.VideoPlayer-module_seekLeft__494Gh,.VideoPlayer-module_seekRight__Wq-Br{font-size:1.6rem;position:absolute;text-shadow:0 0 2px #0004;top:50%;transform:translateY(-50%)}.VideoPlayer-module_seekLeft__494Gh{animation:VideoPlayer-module_shaking__mp-kJ .2s;left:20%}.VideoPlayer-module_seekRight__Wq-Br{animation:VideoPlayer-module_shaking__mp-kJ .2s;right:20%}.VideoPlayer-module_loadingContainer__H2pCH{display:block;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:12%;svg{color:#fff;display:block;width:100%}}.VideoPlayer-module_playFirstContainer__iHyIf{align-items:center;background-color:#000;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.VideoPlayer-module_btnCenterPlay__XegUw{background-color:transparent;border:0;cursor:pointer;margin:0;padding:.6em}.VideoPlayer-module_speedList__n80GY{list-style:none;li{padding:1em}}.VideoPlayer-module_speedMenu__3R-fd{border-radius:15px;cursor:pointer;padding:.3em;text-align:center}.VideoPlayer-module_speedMenu__3R-fd:hover{background-color:#00f7ff}@keyframes VideoPlayer-module_shaking__mp-kJ{0%{transform:translateY(-50%) scale(1)}50%{transform:translateY(-50%) scale(2)}to{transform:translateY(-50%) scale(1)}}@media (max-width:640px){.VideoPlayer-module_hideOnMobile__-bl4X{display:none}}@media (min-width:640px){.VideoPlayer-module_rangeVolume__koFUe{width:6em}.VideoPlayer-module_seekLeft__494Gh,.VideoPlayer-module_seekRight__Wq-Br{font-size:3rem}}
+.VideoPlayer-module_hide__nwlly{display:none}.VideoPlayer-module_visit__PJEFg{visibility:visible}.VideoPlayer-module_invisit__A7jP6{visibility:hidden}.VideoPlayer-module_opacity0__M4VIz{opacity:0}.VideoPlayer-module_opacity1__wWDar{opacity:1}.VideoPlayer-module_videoContainer__-vADj{aspect-ratio:16/9;width:100%}.VideoPlayer-module_absoluteCenter__A2KzN{cursor:pointer;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.VideoPlayer-module_wrapper__8iODY,.VideoPlayer-module_wrapper__8iODY *{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.VideoPlayer-module_wrapper__8iODY{aspect-ratio:16/9;background-color:#000;color:#fff;display:block;position:relative;width:100%}.VideoPlayer-module_video__fcIYk{display:block;height:100%;width:100%}.VideoPlayer-module_controller__eyPIB{align-items:center;background-color:rgba(0,0,0,.5);display:flex;flex-direction:column;height:100%;justify-content:center;left:0;position:absolute;top:0;transition:all .2s;width:100%}.VideoPlayer-module_title__oxKqS{font-size:1.1rem;font-weight:400;line-height:1.1rem;padding:1rem 0 0 1rem;width:100%;p{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:calc(100% - 3.6rem)}}.VideoPlayer-module_center__arqa3{display:flex;flex:1;flex-direction:row;width:100%;div{display:flex;flex:1}}.VideoPlayer-module_controls__OQ23e{display:flex;gap:.6em;padding:.8em 1em;width:100%}.VideoPlayer-module_controls__OQ23e button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff0;border:0;color:#fff;cursor:pointer;padding:.25em;transition:background-color .2s}.VideoPlayer-module_controls__OQ23e button:hover{background-color:#00b2ff;border-radius:5px}.VideoPlayer-module_timeWrapper__fpsFx{align-items:center;display:flex;flex:1;font-family:monospace;font-size:1rem;gap:.6em;padding-inline:.3em;article{font-size:1em}}.VideoPlayer-module_btnSetting__le5fg{font-size:.8em;position:absolute;right:1em;top:.8em;button svg{width:2em!important}}.VideoPlayer-module_customSelect__GSAin{background-color:#fff;border-radius:6px;box-shadow:0 0 2px #000a;color:#000;min-width:12em;padding:.3em;padding-inline:1em;position:absolute;right:1em;top:2.8em;z-index:2}.VideoPlayer-module_speedControl__W-yYE{cursor:pointer;font-size:12pt;padding-block:.3em;text-align:center}.VideoPlayer-module_hoverTime__Dl7h0{background-color:#fff;border-radius:99px;box-shadow:0 0 2px #000a;color:#000;font-size:.8em;padding:.1em .8em;position:absolute;top:-3em}.VideoPlayer-module_hoverTime__Dl7h0:before{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #fff;content:"";height:0;left:50%;position:absolute;top:99%;transform:translateX(-50%);width:0}.VideoPlayer-module_timeControl__sz7qH{flex:1;position:relative}.VideoPlayer-module_backProcess__I5ZGe{background-color:#fff5;border-radius:2em;height:4px;max-width:100%;width:100%}.VideoPlayer-module_progressBar__v-AQM{background-color:#fffa;border-radius:2em;height:4px;left:0;max-width:100%;position:absolute;top:0;width:100%}.VideoPlayer-module_rangeTime__Sp6FM{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border-radius:2em;height:4px;left:0;position:absolute;top:0;width:100%}.VideoPlayer-module_rangeTime__Sp6FM::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:#fff;border-radius:2em;height:1em;width:1em}.VideoPlayer-module_rangeTime__Sp6FM:hover{cursor:pointer}.VideoPlayer-module_rangeTime__Sp6FM::-webkit-slider-thumb:hover{box-shadow:0 0 1px 3px #fff4}.VideoPlayer-module_volumeWrapper__QBYAa{align-items:center;display:flex;gap:.1em}.VideoPlayer-module_rangeVolume__koFUe{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border-radius:2em;cursor:pointer;height:4px;width:4em}.VideoPlayer-module_rangeVolume__koFUe::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:#fff;border-radius:2em;height:1em;width:1em}.VideoPlayer-module_rangeVolume__koFUe::-webkit-slider-thumb:hover{box-shadow:0 0 1px 3px #fff4}.VideoPlayer-module_seekLeft__494Gh,.VideoPlayer-module_seekRight__Wq-Br{font-size:1.6rem;position:absolute;text-shadow:0 0 2px #0004;top:50%;transform:translateY(-50%)}.VideoPlayer-module_seekLeft__494Gh{animation:VideoPlayer-module_shaking__mp-kJ .2s;left:20%}.VideoPlayer-module_seekRight__Wq-Br{animation:VideoPlayer-module_shaking__mp-kJ .2s;right:20%}.VideoPlayer-module_loadingContainer__H2pCH{display:block;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:12%;svg{color:#fff;display:block;width:100%}}.VideoPlayer-module_playFirstContainer__iHyIf{align-items:center;background-color:#000;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.VideoPlayer-module_btnCenterPlay__XegUw{background-color:transparent;border:0;cursor:pointer;margin:0;padding:.6em;position:relative}.VideoPlayer-module_errorMessage__9gOzk{color:#fff;font-size:1.4em;left:-50%;padding:.1em 0;position:absolute;text-align:center;width:200%}.VideoPlayer-module_speedList__n80GY{list-style:none;li{padding:1em}}.VideoPlayer-module_speedMenu__3R-fd{border-radius:15px;cursor:pointer;padding:.3em;text-align:center}.VideoPlayer-module_speedMenu__3R-fd:hover{background-color:#00f7ff}@keyframes VideoPlayer-module_shaking__mp-kJ{0%{transform:translateY(-50%) scale(1)}50%{transform:translateY(-50%) scale(2)}to{transform:translateY(-50%) scale(1)}}@media (max-width:640px){.VideoPlayer-module_hideOnMobile__-bl4X{display:none}}@media (min-width:640px){.VideoPlayer-module_rangeVolume__koFUe{width:6em}.VideoPlayer-module_seekLeft__494Gh,.VideoPlayer-module_seekRight__Wq-Br{font-size:3rem}}