@tiwz/react-video-player 1.0.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -1 +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%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.VideoPlayer-module_wrapper__8iODY,.VideoPlayer-module_wrapper__8iODY *{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-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{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:rgba(0,0,0,.5);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;justify-content:center;left:0;position:absolute;top:0;-webkit-transition:all .2s;-o-transition:all .2s;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;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;width:calc(100% - 3.6rem)}}.VideoPlayer-module_center__arqa3{-webkit-box-flex:1;-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;width:100%;div{-webkit-box-flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}}.VideoPlayer-module_controls__OQ23e{display:-webkit-box;display:-ms-flexbox;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;-webkit-transition:background-color .2s;-o-transition:background-color .2s;transition:background-color .2s}.VideoPlayer-module_controls__OQ23e button:hover{background-color:#00b2ff;border-radius:5px}.VideoPlayer-module_timeWrapper__fpsFx{-webkit-box-flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex:1;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;-webkit-box-shadow:0 0 2px #000a;box-shadow:0 0 2px #000a;color:#000;min-width:12em;padding-block:.4em;padding-inline:1em;position:absolute;right:1em;top:2.8em;z-index:2;div,ul li{border-radius:8px;cursor:pointer;padding:.4em 0;text-align:center}}.VideoPlayer-module_hoverTime__Dl7h0{background-color:#fff;border-radius:99px;-webkit-box-shadow:0 0 2px #000a;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%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:0}.VideoPlayer-module_timeControl__sz7qH{-webkit-box-flex:1;-ms-flex:1;flex:1;position:relative}.VideoPlayer-module_backProcess__I5ZGe{background-color:#fff5;border-radius:2em;height:4px;width:100%}.VideoPlayer-module_progressBar__v-AQM{background-color:#fffa;border-radius:2em;height:4px;left:0;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{-webkit-box-shadow:0 0 1px 3px #fff4;box-shadow:0 0 1px 3px #fff4}.VideoPlayer-module_volumeWrapper__QBYAa{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;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{-webkit-box-shadow:0 0 1px 3px #fff4;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%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.VideoPlayer-module_seekLeft__494Gh{left:20%}.VideoPlayer-module_seekLeft__494Gh,.VideoPlayer-module_seekRight__Wq-Br{-webkit-animation:VideoPlayer-module_shaking__mp-kJ .2s;animation:VideoPlayer-module_shaking__mp-kJ .2s}.VideoPlayer-module_seekRight__Wq-Br{right:20%}@-webkit-keyframes VideoPlayer-module_shaking__mp-kJ{0%{-webkit-transform:translateY(-50%) scale(1);transform:translateY(-50%) scale(1)}50%{-webkit-transform:translateY(-50%) scale(2);transform:translateY(-50%) scale(2)}to{-webkit-transform:translateY(-50%) scale(1);transform:translateY(-50%) scale(1)}}@keyframes VideoPlayer-module_shaking__mp-kJ{0%{-webkit-transform:translateY(-50%) scale(1);transform:translateY(-50%) scale(1)}50%{-webkit-transform:translateY(-50%) scale(2);transform:translateY(-50%) scale(2)}to{-webkit-transform:translateY(-50%) scale(1);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_loadingContainer__H2pCH{display:block;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:12%;svg{color:#fff;display:block;width:100%}}.VideoPlayer-module_playFirstContainer__iHyIf{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:#000;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;button{background-color:transparent;border:0;cursor:pointer;margin:0;padding:.6em;svg{color:#fff}}}
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}}
package/dist/index.d.ts CHANGED
@@ -1,12 +1,14 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { HlsConfig } from 'hls.js';
2
3
 
3
4
  interface VideoPlayerProps {
4
5
  title?: string;
6
+ hls?: boolean | Partial<HlsConfig>;
5
7
  source: string | {
6
8
  link: string;
7
9
  type?: 'video/mp4' | 'video/ogg' | 'video/webm';
8
10
  };
9
11
  }
10
- declare function VideoPlayer({ source, title }: VideoPlayerProps): react_jsx_runtime.JSX.Element;
12
+ declare function VideoPlayer({ source, title, hls }: VideoPlayerProps): react_jsx_runtime.JSX.Element;
11
13
 
12
14
  export { VideoPlayer };