@tiwz/react-video-player 1.1.5 → 1.1.7

package/README.md

@@ -57,15 +57,19 @@ export default function App() {
 
 ---
 
-## 🧩 Props
+## Video Types
+```ts
+type VideoTypes = 'video/mp4' | 'video/ogg' | 'video/webm' |'application/vnd.apple.mpegurl' | 'application/x-mpegURL'
+```
 
+## 🧩 Props
 ### VideoPlayerProps
 
 | 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 |
+| `source` | `string \| { link: string; type?: VideoTypes }` | ✅ | 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%}.VideoPlayer-module_title__oxKqS p{display:block;overflow:hidden;padding-bottom:4px;text-overflow:ellipsis;white-space:nowrap;width:calc(100% - 3.6rem)}.VideoPlayer-module_center__arqa3{display:flex;flex:1;flex-direction:row;width:100%}.VideoPlayer-module_center__arqa3 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:transparent;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}.VideoPlayer-module_timeWrapper__fpsFx article{font-size:1em}.VideoPlayer-module_btnSetting__le5fg{font-size:.8em;position:absolute;right:1em;top:.8em}.VideoPlayer-module_btnSetting__le5fg button svg{width:1.8em!important}.VideoPlayer-module_customSelect__GSAin{background-color:#fff;border-radius:6px;box-shadow:0 0 2px rgba(0,0,0,.6);color:#000;min-width:calc(4rem + 7ch);padding-inline:1em;position:absolute;right:1em;top:2.8em;z-index:2}.VideoPlayer-module_speedControl__W-yYE{align-items:center;cursor:pointer;display:flex;font-size:12pt;font-weight:400;gap:.4em;justify-content:center;padding-block:.4em}.VideoPlayer-module_hoverTime__Dl7h0{background-color:#fff;border-radius:99px;box-shadow:0 0 2px rgba(0,0,0,.6);color:#000;font-size:.8em;padding:.16em 0;position:absolute;text-align:center;top:-3em;width:54px}.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:hsla(0,0%,100%,.3);border-radius:2em;height:4px;max-width:100%;width:100%}.VideoPlayer-module_progressBar__v-AQM{background-color:hsla(0,0%,100%,.6)}.VideoPlayer-module_progressBar__v-AQM,.VideoPlayer-module_rangeTime__Sp6FM{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}.VideoPlayer-module_rangeTime__Sp6FM::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:#fff;border:0;border-radius:50%;cursor:pointer;height:1em;width:1em}.VideoPlayer-module_rangeTime__Sp6FM::-webkit-slider-thumb:hover{box-shadow:0 0 1px 3px hsla(0,0%,100%,.3)}.VideoPlayer-module_rangeTime__Sp6FM::-moz-range-thumb{background-color:#fff;border:0;border-radius:50%;cursor:pointer;height:1em;width:1em}.VideoPlayer-module_rangeTime__Sp6FM::-moz-range-thumb:hover{box-shadow:0 0 1px 3px hsla(0,0%,100%,.3)}.VideoPlayer-module_rangeTime__Sp6FM::-ms-thumb{background-color:#fff;border:0;border-radius:50%;cursor:pointer;height:1em;width:1em}.VideoPlayer-module_rangeTime__Sp6FM::-ms-thumb:hover{box-shadow:0 0 1px 3px hsla(0,0%,100%,.3)}.VideoPlayer-module_rangeTime__Sp6FM:hover{cursor:pointer}.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:0;border-radius:50%;cursor:pointer;height:1em;width:1em}.VideoPlayer-module_rangeVolume__koFUe::-webkit-slider-thumb:hover{box-shadow:0 0 1px 3px hsla(0,0%,100%,.3)}.VideoPlayer-module_rangeVolume__koFUe::-moz-range-thumb{background-color:#fff;border:0;border-radius:50%;cursor:pointer;height:1em;width:1em}.VideoPlayer-module_rangeVolume__koFUe::-moz-range-thumb:hover{box-shadow:0 0 1px 3px hsla(0,0%,100%,.3)}.VideoPlayer-module_rangeVolume__koFUe::-ms-thumb{background-color:#fff;border:0;border-radius:50%;cursor:pointer;height:1em;width:1em}.VideoPlayer-module_rangeVolume__koFUe::-ms-thumb:hover{box-shadow:0 0 1px 3px hsla(0,0%,100%,.3)}.VideoPlayer-module_seekLeft__494Gh,.VideoPlayer-module_seekRight__Wq-Br{font-size:1.6rem;position:absolute;text-shadow:0 0 2px rgba(0,0,0,.3);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%}.VideoPlayer-module_loadingContainer__H2pCH 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{display:flex;flex-direction:column;gap:1mm;list-style:none;padding-bottom:1em}.VideoPlayer-module_speedList__n80GY li{padding:.55em}.VideoPlayer-module_speedBox__JbV-U{border-radius:.6em;cursor:pointer;display:flex;gap:.6em;padding-block:.6em;padding-inline:1em;transition:all .3s}.VideoPlayer-module_speedMenu__3R-fd{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#eee;border-radius:100%;color:#000;height:1.3em;width:1.3em}.VideoPlayer-module_speedMenu__3R-fd:checked{background-image:radial-gradient(#fff 34%,#00b3ff 0);outline:1px #fff}.VideoPlayer-module_speedBox__JbV-U:hover{background-color:#00b2ff;color:#fff}@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%}.VideoPlayer-module_title__oxKqS p{display:block;overflow:hidden;padding-bottom:4px;text-overflow:ellipsis;white-space:nowrap;width:calc(100% - 3.6rem)}.VideoPlayer-module_center__arqa3{display:flex;flex:1;flex-direction:row;width:100%}.VideoPlayer-module_center__arqa3 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:transparent;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}.VideoPlayer-module_timeWrapper__fpsFx article{font-size:1em}.VideoPlayer-module_btnSetting__le5fg{font-size:.8em;position:absolute;right:1em;top:.8em}.VideoPlayer-module_btnSetting__le5fg button svg{width:1.8em!important}.VideoPlayer-module_customSelect__GSAin{background-color:#fff;border-radius:6px;box-shadow:0 0 2px rgba(0,0,0,.6);color:#000;min-width:calc(4rem + 7ch);padding-inline:1em;position:absolute;right:1em;top:2.8em;z-index:2}.VideoPlayer-module_speedControl__W-yYE{align-items:center;cursor:pointer;display:flex;font-size:12pt;font-weight:400;gap:.4em;justify-content:center;padding-block:.4em}.VideoPlayer-module_hoverTime__Dl7h0{background-color:#fff;border-radius:99px;box-shadow:0 0 2px rgba(0,0,0,.6);color:#000;font-size:.8em;padding:.16em 0;position:absolute;text-align:center;top:-3em;width:54px}.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:hsla(0,0%,100%,.3);border-radius:2em;height:4px;max-width:100%;width:100%}.VideoPlayer-module_progressBar__v-AQM{background-color:hsla(0,0%,100%,.6)}.VideoPlayer-module_progressBar__v-AQM,.VideoPlayer-module_rangeTime__Sp6FM{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}.VideoPlayer-module_rangeTime__Sp6FM::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:#fff;border:0;border-radius:50%;cursor:pointer;height:1em;width:1em}.VideoPlayer-module_rangeTime__Sp6FM::-webkit-slider-thumb:hover{box-shadow:0 0 1px 3px hsla(0,0%,100%,.3)}.VideoPlayer-module_rangeTime__Sp6FM::-moz-range-thumb{background-color:#fff;border:0;border-radius:50%;cursor:pointer;height:1em;width:1em}.VideoPlayer-module_rangeTime__Sp6FM::-moz-range-thumb:hover{box-shadow:0 0 1px 3px hsla(0,0%,100%,.3)}.VideoPlayer-module_rangeTime__Sp6FM::-ms-thumb{background-color:#fff;border:0;border-radius:50%;cursor:pointer;height:1em;width:1em}.VideoPlayer-module_rangeTime__Sp6FM::-ms-thumb:hover{box-shadow:0 0 1px 3px hsla(0,0%,100%,.3)}.VideoPlayer-module_rangeTime__Sp6FM:hover{cursor:pointer}.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:0;border-radius:50%;cursor:pointer;height:1em;width:1em}.VideoPlayer-module_rangeVolume__koFUe::-webkit-slider-thumb:hover{box-shadow:0 0 1px 3px hsla(0,0%,100%,.3)}.VideoPlayer-module_rangeVolume__koFUe::-moz-range-thumb{background-color:#fff;border:0;border-radius:50%;cursor:pointer;height:1em;width:1em}.VideoPlayer-module_rangeVolume__koFUe::-moz-range-thumb:hover{box-shadow:0 0 1px 3px hsla(0,0%,100%,.3)}.VideoPlayer-module_rangeVolume__koFUe::-ms-thumb{background-color:#fff;border:0;border-radius:50%;cursor:pointer;height:1em;width:1em}.VideoPlayer-module_rangeVolume__koFUe::-ms-thumb:hover{box-shadow:0 0 1px 3px hsla(0,0%,100%,.3)}.VideoPlayer-module_seekLeft__494Gh,.VideoPlayer-module_seekRight__Wq-Br{font-size:1.6rem;position:absolute;text-shadow:0 0 2px rgba(0,0,0,.3);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{align-items:center;display:flex;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:12%}.VideoPlayer-module_loadingContainer__H2pCH svg{color:#fff;display:block;max-width:5.5rem;min-width:4.5rem;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{display:flex;flex-direction:column;gap:1mm;list-style:none;padding-bottom:1em}.VideoPlayer-module_speedList__n80GY li{padding:.55em}.VideoPlayer-module_speedBox__JbV-U{border-radius:.6em;cursor:pointer;display:flex;gap:.6em;padding-block:.6em;padding-inline:1em;transition:background-color .3s}.VideoPlayer-module_speedMenu__3R-fd{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#eee;border-radius:100%;color:#000;height:1.3em;width:1.3em}.VideoPlayer-module_speedMenu__3R-fd:checked{background-image:radial-gradient(#fff 34%,#00b3ff 0);outline:1px #fff}.VideoPlayer-module_speedBox__JbV-U:hover{background-color:#00b2ff;color:#fff}@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}}

package/dist/index.d.ts

@@ -6,7 +6,7 @@ interface VideoPlayerProps {
     hls?: boolean | Partial<HlsConfig>;
     source: string | {
         link: string;
-        type?: 'video/mp4' | 'video/ogg' | 'video/webm';
+        type?: 'video/mp4' | 'video/ogg' | 'video/webm' | 'application/vnd.apple.mpegurl' | 'application/x-mpegURL';
     };
 }
 declare function VideoPlayer({ source, title, hls }: VideoPlayerProps): react_jsx_runtime.JSX.Element;