@tiwz/react-video-player 1.1.9 → 2.0.0

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.
Files changed (7) hide show
  1. package/README.md +1 -1
  2. package/dist/fonts/Kodchasan.ttf +0 -0
  3. package/dist/index.css +1 -1
  4. package/dist/index.d.ts +11 -11
  5. package/dist/index.js +1 -1
  6. package/dist/index.mjs +1 -1
  7. package/package.json +7 -6
package/README.md CHANGED
@@ -43,7 +43,7 @@ yarn add @tiwz/react-video-player
43
43
 
44
44
  ```tsx
45
45
  import { VideoPlayer } from '@tiwz/react-video-player'
46
- import '@tiwz/react-video-player/model'
46
+ import '@tiwz/react-video-player/model.css'
47
47
 
48
48
  export default function App() {
49
49
  return (
package/dist/fonts/Kodchasan.ttf ADDED
Binary file
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{cursor:none;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.VideoPlayer-module_isMobile__JgziT *{cursor:none!important}.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}}
1
+ @font-face{font-display:swap;font-family:BasePlayer;font-style:normal;font-weight:400;src:url(fonts/Kodchasan.ttf) format("truetype")}.style-module_PlayerButton__3pLMQ{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:5px;display:flex;height:30px;justify-content:center;transition:background-color .2s;width:30px}.style-module_PlayerDesktop__ccJTe .style-module_PlayerButton__3pLMQ:hover{background-color:#00b2ff;cursor:pointer}.style-module_PlayerWrapper__37Xpc,.style-module_PlayerWrapper__37Xpc *,.style-module_PlayerWrapper__37Xpc :after,.style-module_PlayerWrapper__37Xpc :before{box-sizing:border-box;color:#fff;font-family:BasePlayer,sans-serif;font-optical-sizing:auto;font-style:normal;font-variation-settings:"wdth" 100,"YTLC" 500;font-weight:400;margin:0;padding:0}.style-module_PlayerWrapper__37Xpc{align-items:center;aspect-ratio:16/9;background-color:#000;cursor:none;display:flex;justify-content:center;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.style-module_PlayerVideo__NkoX3{height:100%;max-height:100%;max-width:100%;width:100%}.style-module_PlayerControls__IyMmM{background-color:#0000;display:flex;flex-direction:column;height:100%;left:0;opacity:0;position:absolute;top:0;transition:background-color .4s ease;visibility:hidden;width:100%}.style-module_PlayerControls__IyMmM.style-module_PlayerShown__uVIfu{background-color:#0006;cursor:default;opacity:1;visibility:visible}.style-module_PlayerPanelTop__x02Dp{align-items:center;display:flex;height:50px;padding-inline:14px}.style-module_PlayerTitle__yTvNu{flex:1;font-size:12pt;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.style-module_PlayerPanelCenter__y8jR0{display:flex;flex:1}.style-module_PlayerSeekArea__z-qY-{align-items:center;display:flex;flex:1;height:100%;justify-content:center}.style-module_PlayerPanelBottom__bdhhD{align-items:center;display:flex;gap:10px;height:50px;padding-inline:14px;position:relative}.style-module_PlayerCurrentTime__IaolO,.style-module_PlayerDurationTime__uCgjW{font-family:monospace;font-size:13pt;padding-inline:4px}.style-module_PlayerVolume__r7ll8{align-items:center;display:flex;gap:6px;padding-right:5px}.style-module_PlayerVolumeZone__7LHeR{align-items:center;display:flex;height:4px;position:relative;width:70px}.style-module_PlayerRangeVolume__8XBa1{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;width:100%}.style-module_PlayerSeekTime__SEypx{flex:1;height:4px;position:relative}.style-module_PlayerHoverTime__iBu1D{background-color:#fff;border-radius:99px;color:#000;font-family:monospace;font-size:10pt;left:var(--player-hover-position);padding:2px 8px;position:absolute;top:-34px;transform:translateX(-50%)}.style-module_PlayerHoverTime__iBu1D: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}.style-module_PlayerRangeTime__QVr8d,.style-module_PlayerRangeVolume__8XBa1{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;background-image:linear-gradient(to right,#00b2ff var(--player-time-position),#fffa var(--player-time-position),#fffa var(--player-buffer-position),#fff6 var(--player-buffer-position));border-radius:4px;cursor:pointer;display:flex;height:100%;width:100%}.style-module_PlayerRangeTime__QVr8d::-webkit-slider-thumb,.style-module_PlayerRangeVolume__8XBa1::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border:0;height:0;width:0}.style-module_PlayerRangeTime__QVr8d::-moz-range-thumb,.style-module_PlayerRangeVolume__8XBa1::-moz-range-thumb{-moz-appearance:none;appearance:none;border:0;height:0;width:0}.style-module_PlayerRangeTime__QVr8d::-ms-thumb,.style-module_PlayerRangeVolume__8XBa1::-ms-thumb{appearance:none;border:0;height:0;width:0}.style-module_PlayerRangeThumb__J5IcV{background-color:#fff;border-radius:11px;height:12px;left:var(--player-thumb-position);pointer-events:none;position:absolute;top:-4px;transform:translateX(-50%);transition:box-shadow .2s;width:12px}.style-module_PlayerRangeTime__QVr8d:hover+.style-module_PlayerRangeThumb__J5IcV,.style-module_PlayerRangeVolume__8XBa1:hover+.style-module_PlayerRangeThumb__J5IcV{box-shadow:0 0 1px 3px hsla(0,0%,100%,.28)}.style-module_PlayerCenter__qLy3K,.style-module_PlayerLoading__PBiIH{cursor:pointer;height:60px;left:50%;padding:2px;position:absolute;top:50%;transform:translate(-50%,-50%);width:60px}.style-module_PlayerLoading__PBiIH{height:80px;width:80px}.style-module_PlayerSetting__BhP11{background-color:#0006;cursor:default;height:100%;left:0;position:absolute;top:0;width:100%}.style-module_PlayerSettingPanelQuality__4UQId,.style-module_PlayerSettingPanelSpeed__ABgXy,.style-module_PlayerSettingPanel__tZE0z{background-color:#fff;border-radius:10px;bottom:20px;display:flex;flex-direction:column;gap:4px;left:50%;max-width:80%;padding:10px 4px;position:absolute;transform:translateX(-50%);width:240px}.style-module_PlayerSettingPanelQuality__4UQId *,.style-module_PlayerSettingPanelSpeed__ABgXy *,.style-module_PlayerSettingPanel__tZE0z *{color:#000}.style-module_PlayerSettingPanelQuality__4UQId{max-height:calc(100% - 40px)}.style-module_PlayerSettingList__KEYZR{align-items:center;border-radius:8px;cursor:pointer;display:flex;font-size:14pt;gap:8px;padding:6px 14px}.style-module_PlayerSettingDisplay__-yFqd{display:flex;flex:1;justify-content:space-between}.style-module_PlayerButtonCursor__4PyXl{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#eee;border:0;border-radius:55px;cursor:pointer;display:flex;height:30px;justify-content:center;width:30px}.style-module_PlayerSpeedShow__u1NIt{font-size:14pt;padding-block:4px;text-align:center;width:100%}.style-module_PlayerPlayback__EZYH2{align-items:center;display:flex;gap:8px;padding-inline:8px}.style-module_PlayerRangeSpeed__ElauL{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:linear-gradient(to right,#000 var(--spped-thumb-position),#0006 var(--spped-thumb-position));border-radius:4px;flex:1;height:4px}.style-module_PlayerRangeSpeed__ElauL::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:#000;border-radius:50%;cursor:pointer;height:12px;width:12px}.style-module_PlayerRangeSpeed__ElauL::-moz-range-thumb{background-color:#000;border:none;border-radius:50%;cursor:pointer;height:12px;width:12px}.style-module_PlayerRangeSpeed__ElauL::-ms-thumb{background-color:#000;border-radius:50%;cursor:pointer;height:12px;width:12px}.style-module_PlayerCheckbox__At22K{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#eee;border-radius:14px;height:14px;width:14px}.style-module_PlayerCheckbox__At22K:checked{background-image:radial-gradient(circle at center,#fff 34%,#00b2ff 0)}.style-module_PlayerQualityList__rvIel{display:flex;flex-direction:column;font-size:12pt;gap:4px;overflow-y:auto;padding-inline:10px}.style-module_PlayerSettingList__KEYZR:hover{background-color:#eee6}.style-module_seekLeft__9AAFX,.style-module_seekRight__RMywZ{animation:style-module_shaking__Hgx0x .2s;font-size:24pt;position:absolute;text-shadow:0 0 2px rgba(0,0,0,.3);top:50%;transform:translateY(-50%)}@keyframes style-module_shaking__Hgx0x{0%{transform:translateY(-50%) scale(1)}50%{transform:translateY(-50%) scale(2)}to{transform:translateY(-50%) scale(1)}}@media (max-width:460px){.style-module_PlayerDurationTime__uCgjW,.style-module_PlayerVolumeZone__7LHeR{display:none}.style-module_PlayerVolume__r7ll8{padding-right:0}.style-module_seekLeft__9AAFX,.style-module_seekRight__RMywZ{font-size:18pt}}
package/dist/index.d.ts CHANGED
@@ -1,16 +1,16 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { HlsConfig } from 'hls.js';
3
2
 
4
- interface VideoPlayerSource {
5
- link: string;
6
- quality?: string;
7
- type?: 'video/mp4' | 'video/ogg' | 'video/webm' | 'application/vnd.apple.mpegurl' | 'application/x-mpegURL';
8
- }
9
- interface VideoPlayerProps {
3
+ type VideoSourceQuality = {
4
+ src: string;
5
+ quality: number;
6
+ };
7
+ type VideoPlayerProps = {
10
8
  title?: string;
11
- hls?: boolean | Partial<HlsConfig>;
12
- source: string | Omit<VideoPlayerSource, 'quality'>;
13
- }
14
- declare function VideoPlayer({ source, title, hls }: VideoPlayerProps): react_jsx_runtime.JSX.Element;
9
+ poster?: string;
10
+ source: string | VideoSourceQuality[];
11
+ };
12
+
13
+ declare function VideoPlayer({ title, poster, source }: VideoPlayerProps): react_jsx_runtime.JSX.Element;
15
14
 
16
15
  export { VideoPlayer };
16
+ export type { VideoSourceQuality };