@tiwz/react-video-player 1.0.0 → 1.0.1
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 +1 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
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_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%}.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_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%;-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}}}
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("react");function r({name:t,bigger:r,className:n,onClick:i}){return"loading"===t?e.jsxs("svg",{version:"1.1",id:"L1",xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",x:"0px",y:"0px",viewBox:"0 0 100 100",enableBackground:"new 0 0 100 100",xmlSpace:"preserve",children:[e.jsx("title",{children:"loading"}),e.jsx("circle",{fill:"none",stroke:"currentColor",strokeWidth:"6",strokeMiterlimit:"15",strokeDasharray:"14.2472,14.2472",cx:"50",cy:"50",r:"47",children:e.jsx("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"5s",from:"0 50 50",to:"360 50 50",repeatCount:"indefinite"})}),e.jsx("circle",{fill:"none",stroke:"currentColor",strokeWidth:"1",strokeMiterlimit:"10",strokeDasharray:"10,10",cx:"50",cy:"50",r:"39",children:e.jsx("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"5s",from:"0 50 50",to:"-360 50 50",repeatCount:"indefinite"})}),e.jsxs("g",{fill:"currentColor",children:[e.jsx("rect",{x:"30",y:"35",width:"5",height:"30",children:e.jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.1"})}),e.jsx("rect",{x:"40",y:"35",width:"5",height:"30",children:e.jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.2"})}),e.jsx("rect",{x:"50",y:"35",width:"5",height:"30",children:e.jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.3"})}),e.jsx("rect",{x:"60",y:"35",width:"5",height:"30",children:e.jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.4"})}),e.jsx("rect",{x:"70",y:"35",width:"5",height:"30",children:e.jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.5"})})]})]}):"hide"===t?e.jsx(e.Fragment,{}):e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,onClick:i,className:n,style:{display:"block",width:(r?"5":"1.6")+"em"},stroke:"currentColor",children:[e.jsx("title",{children:t}),"play"===t&&e.jsx("path",{fill:"#fff",strokeLinecap:"round",strokeLinejoin:"round",d:"M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z"}),"pause"===t&&e.jsx("path",{strokeWidth:4,strokeLinecap:"round",strokeLinejoin:"round",d:"M16.4 5.25v13.5m-8.5-13.5v13.5"}),"fullscreen"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"}),"unfullscreen"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25"}),"pip"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"}),"muted"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M17.25 9.75 19.5 12m0 0 2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6 4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"}),"volume"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M19.114 5.636a9 9 0 0 1 0 12.728M16.463 8.288a5.25 5.25 0 0 1 0 7.424M6.75 8.25l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"}),"restart"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"})]})}var n="VideoPlayer-module_visit__PJEFg",i="VideoPlayer-module_invisit__A7jP6",o="VideoPlayer-module_opacity0__M4VIz",a="VideoPlayer-module_opacity1__wWDar",l="VideoPlayer-module_absoluteCenter__A2KzN",s="VideoPlayer-module_wrapper__8iODY",u="VideoPlayer-module_video__fcIYk",c="VideoPlayer-module_controller__eyPIB",d="VideoPlayer-module_title__oxKqS",m="VideoPlayer-module_center__arqa3",f="VideoPlayer-module_controls__OQ23e",h="VideoPlayer-module_timeWrapper__fpsFx",p="VideoPlayer-module_timeControl__sz7qH",y="VideoPlayer-module_backProcess__I5ZGe",x="VideoPlayer-module_progressBar__v-AQM",v="VideoPlayer-module_rangeTime__Sp6FM",g="VideoPlayer-module_volumeWrapper__QBYAa",b="VideoPlayer-module_rangeVolume__koFUe",j="VideoPlayer-module_seekLeft__494Gh",k="VideoPlayer-module_seekRight__Wq-Br",w="VideoPlayer-module_hideOnMobile__-bl4X",_="VideoPlayer-module_loadingContainer__H2pCH",P="VideoPlayer-module_playFirstContainer__iHyIf";exports.VideoPlayer=function({source:M,title:C}){const T="string"==typeof M?M:M.link,L="object"==typeof M&&"string"==typeof M.type?M.type:"video/mp4",V=t.useRef(null),N=t.useRef(null),F=t.useRef(null),S=t.useRef(null),E=t.useRef(0),[I,A]=t.useState(!0),[H,q]=t.useState(0),[R,$]=t.useState(!1),[W,B]=t.useState(!1),[D,z]=t.useState(!1),[O,X]=t.useState(!1),[Z,Q]=t.useState(!1),[U,Y]=t.useState(!1),[G,K]=t.useState(!1),[J,ee]=t.useState(!0),[te,re]=t.useState(!1),[ne,ie]=t.useState(1),[oe,ae]=t.useState(0),[le,se]=t.useState(0);function ue(e){if(void 0===e||Number.isNaN(e)||e<0)return"00:00";const t=Math.floor(e),r=t%60;return`${Math.floor(t/60).toString().padStart(2,"0")}:${r.toString().padStart(2,"0")}`}async function ce(e,t){e.current&&await t(e.current)}t.useEffect(()=>{X(!1),K(!1),Q(!1),ae(0),se(0),q(0),$(!1)},[T]),t.useEffect(()=>()=>{V.current&&(clearTimeout(V.current),V.current=null),N.current&&(clearTimeout(N.current),N.current=null)},[]);const de=t.useCallback(()=>{N.current&&(clearTimeout(N.current),N.current=null),$(!0),N.current=setTimeout(()=>{$(!1),q(0),N.current=null},1500)},[]),me=t.useCallback(()=>{ce(F,async e=>{try{e.paused?await e.play():e.pause()}catch{return}})},[]),fe=t.useCallback(e=>{ce(F,t=>{q(r=>{const n="+"===e?r<0?10:r+10:r>0?-10:r-10;return t.currentTime+="+"===e?10:-10,n}),de()})},[de]);function he(){const e=document;!!(e.fullscreenEnabled||e.webkitFullscreenEnabled||e.mozFullScreenEnabled||e.msFullscreenEnabled)&&ce(S,e=>{document.fullscreenElement?async function(){const e=document,t=e.exitFullscreen||e.webkitExitFullscreen||e.mozCancelFullScreen||e.msExitFullscreen;if(t)try{await t.call(e)}catch{return void console.error("Failed to exit fullscreen")}}():async function(e){const t=e,r=t.requestFullscreen||t.webkitRequestFullscreen||t.webkitEnterFullscreen||t.mozRequestFullScreen||t.msRequestFullscreen;if(r)try{await r.call(t)}catch{return void console.error("Failed to enter fullscreen")}}(e)})}function pe(){"pictureInPictureEnabled"in document&&"requestPictureInPicture"in HTMLVideoElement.prototype&&ce(F,e=>{document.pictureInPictureElement?async function(e){if(!1===e.disablePictureInPicture&&"pictureInPictureElement"in document&&document.pictureInPictureElement)try{await document.exitPictureInPicture()}catch{return void console.error("Failed to exit Picture-in-Picture")}}(e):async function(e){if(!("pictureInPictureEnabled"in document)||"function"!=typeof e.requestPictureInPicture)return console.error("Picture-in-Picture is not supported in this browser"),null;try{return e.paused&&await e.play().catch(()=>{console.warn("Auto-play was prevented")}),await e.requestPictureInPicture()}catch{return console.error("Failed to enter Picture-in-Picture"),null}}(e)})}function ye(e,t){ce(F,r=>{"time"===e?(se(t),r.currentTime=t):(ie(t),r.volume=t,r.muted&&(r.muted=!1,Y(!1)))})}function xe(e=2500){J||(V.current&&(clearTimeout(V.current),V.current=null),B(!0),V.current=setTimeout(()=>{te||B(!1),V.current=null},e))}t.useEffect(()=>{const e=/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i.test(window.navigator.userAgent);async function t(){if(S.current&&F.current){const e=document.fullscreenElement===S.current;z(document.fullscreenEnabled&&e);const t=F.current.videoWidth>F.current.videoHeight;if("undefined"!=typeof window&&window.screen&&"orientation"in window.screen&&window.screen.orientation&&"lock"in window.screen.orientation&&"function"==typeof window.screen.orientation.lock&&t&&e)try{await window.screen.orientation.lock("landscape")}catch{return!1}}}function r(e){[" ","f","p","ArrowLeft","ArrowRight"].includes(e.key)&&e.preventDefault(),ce(F,t=>{switch(e.key){case" ":me();break;case"f":he();break;case"p":pe();break;case"ArrowLeft":q(e=>{const r=e>0?-10:e-10;return t.currentTime-=10,r}),de();break;case"ArrowRight":q(e=>{const r=e<0?10:e+10;return t.currentTime+=10,r}),de()}})}return A(e),document.addEventListener("fullscreenchange",t),!e&&window.addEventListener("keydown",r),()=>{document.removeEventListener("fullscreenchange",t),!e&&window.removeEventListener("keydown",r)}},[T,me,de]);const ve=t.useCallback(function(e,t){let r=null,n=0;return function(...i){const o=Date.now();n?(r&&clearTimeout(r),r=setTimeout(()=>{o-n>=t&&(e.apply(this,i),n=o)},t-(o-n))):(e.apply(this,i),n=o)}}(()=>{J||xe()},200),[J,te]),ge=t.useCallback(()=>{B(!1),V.current&&(clearTimeout(V.current),V.current=null)},[]);t.useEffect(()=>{te&&xe(1e3)},[te]);const be=t.useCallback(e=>{const t=e.currentTarget.currentTime;(Math.floor(t)!==Math.floor(le)||Math.abs(t-le)>1)&&se(t)},[le]),je=t.useMemo(()=>{if(!F.current||!oe)return 0;const e=F.current.buffered;if(0===e.length)return 0;let t=0;for(let r=0;r<e.length;r++)if(e.start(r)<=le&&e.end(r)>le){t=e.end(r);break}return t/oe*100},[le,oe]),ke=t.useMemo(()=>oe>0?le/oe*100:0,[le,oe]),we=t.useCallback(e=>{if(!I)return;const t=Date.now(),r=t-E.current;(r>0&&r<300||R)&&(R||$(!0),fe(e)),E.current=t},[I,R,fe]);return e.jsxs("div",{className:s,ref:S,onMouseMove:ve,onMouseLeave:ge,children:[e.jsx("video",{playsInline:!0,preload:"none",ref:F,controls:!1,onTimeUpdate:be,onLoadedMetadata:e=>ae(e.currentTarget.duration),onVolumeChange:e=>ie(e.currentTarget.volume),onCanPlayThrough:()=>Q(!1),onWaiting:()=>Q(!0),onLoadStart:()=>K(!1),onEnded:()=>K(!0),onPlay:()=>{K(!1),ee(!1),X(!0)},onPause:()=>ee(!0),className:u,children:e.jsx("source",{src:T,type:L})}),e.jsxs("div",{className:`${c} ${I?J||W?n:i:J||W?a:o}`,children:[e.jsx("h1",{className:d,children:C}),e.jsxs("div",{className:m,onClick:I?void 0:me,children:[e.jsx("div",{onClick:()=>we("-")}),e.jsx("div",{onClick:()=>we("+")})]}),e.jsxs("div",{className:f,children:[e.jsxs("div",{className:h,children:[e.jsx("article",{children:ue(le)}),e.jsxs("div",{className:p,children:[e.jsx("div",{className:y}),e.jsx("div",{className:x,style:{width:`${je}%`}}),e.jsx("input",{type:"range",step:"any",max:oe,value:le,onFocus:e=>e.currentTarget.blur(),className:v,onPointerDown:()=>re(!0),onPointerUp:()=>re(!1),onPointerCancel:()=>re(!1),onChange:e=>ye("time",+e.currentTarget.value),style:{backgroundImage:`linear-gradient(to right, #00b2ff ${ke}%, #0000 ${ke}%)`}})]}),e.jsx("article",{children:ue(oe)})]}),e.jsxs("div",{className:g,children:[e.jsx("button",{type:"button",onClick:function(){ce(F,e=>{e.muted=!e.muted,Y(e.muted)})},onFocus:e=>e.currentTarget.blur(),children:e.jsx(r,{name:U||0===ne?"muted":"volume"})}),e.jsx("input",{max:1,type:"range",step:"any",value:U?0:ne,onFocus:e=>e.currentTarget.blur(),className:b+(I?` ${w}`:""),style:{backgroundImage:`linear-gradient(to right, #00b2ff ${U?0:100*ne}%, #fff5 ${U?0:100*ne}%)`},onChange:e=>ye("volume",+e.currentTarget.value)})]}),e.jsx("div",{children:e.jsx("button",{type:"button",onClick:pe,onFocus:e=>e.currentTarget.blur(),children:e.jsx(r,{name:"pip"})})}),e.jsx("div",{children:e.jsx("button",{type:"button",onClick:he,onFocus:e=>e.currentTarget.blur(),children:e.jsx(r,{name:D?"unfullscreen":"fullscreen"})})})]}),e.jsx(r,{name:Z?"hide":G?"restart":J?"play":"pause",bigger:!0,className:l,onClick:me})]}),H<0&&e.jsx("div",{inert:!0,className:j,children:H.toString()},H),H>0&&e.jsx("div",{inert:!0,className:k,children:`+${H.toString()}`},H),Z&&e.jsx("div",{className:_,children:e.jsx(r,{name:"loading"})}),!O&&e.jsx("div",{className:P,children:e.jsx("button",{type:"button",onFocus:e=>e.currentTarget.blur(),onClick:()=>{X(!0),ce(F,async e=>{try{await e.play()}catch{return}})},children:e.jsx(r,{name:"play",bigger:!0})})})]},T)};
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("react");function r({name:t,bigger:r,className:n,onClick:i}){return"loading"===t?e.jsxs("svg",{version:"1.1",id:"L1",xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",x:"0px",y:"0px",viewBox:"0 0 100 100",enableBackground:"new 0 0 100 100",xmlSpace:"preserve",children:[e.jsx("title",{children:"loading"}),e.jsx("circle",{fill:"none",stroke:"currentColor",strokeWidth:"6",strokeMiterlimit:"15",strokeDasharray:"14.2472,14.2472",cx:"50",cy:"50",r:"47",children:e.jsx("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"5s",from:"0 50 50",to:"360 50 50",repeatCount:"indefinite"})}),e.jsx("circle",{fill:"none",stroke:"currentColor",strokeWidth:"1",strokeMiterlimit:"10",strokeDasharray:"10,10",cx:"50",cy:"50",r:"39",children:e.jsx("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"5s",from:"0 50 50",to:"-360 50 50",repeatCount:"indefinite"})}),e.jsxs("g",{fill:"currentColor",children:[e.jsx("rect",{x:"30",y:"35",width:"5",height:"30",children:e.jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.1"})}),e.jsx("rect",{x:"40",y:"35",width:"5",height:"30",children:e.jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.2"})}),e.jsx("rect",{x:"50",y:"35",width:"5",height:"30",children:e.jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.3"})}),e.jsx("rect",{x:"60",y:"35",width:"5",height:"30",children:e.jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.4"})}),e.jsx("rect",{x:"70",y:"35",width:"5",height:"30",children:e.jsx("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.5"})})]})]}):"hide"===t?e.jsx(e.Fragment,{}):e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,onClick:i,className:n,style:{display:"block",width:(r?"5":"1.6")+"em"},stroke:"currentColor",children:[e.jsx("title",{children:t}),"play"===t&&e.jsx("path",{fill:"#fff",strokeLinecap:"round",strokeLinejoin:"round",d:"M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z"}),"pause"===t&&e.jsx("path",{strokeWidth:4,strokeLinecap:"round",strokeLinejoin:"round",d:"M16.4 5.25v13.5m-8.5-13.5v13.5"}),"fullscreen"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"}),"unfullscreen"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25"}),"pip"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"}),"muted"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M17.25 9.75 19.5 12m0 0 2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6 4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"}),"volume"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M19.114 5.636a9 9 0 0 1 0 12.728M16.463 8.288a5.25 5.25 0 0 1 0 7.424M6.75 8.25l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"}),"restart"===t&&e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"}),"setting"===t&&e.jsxs(e.Fragment,{children:[e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 0 1 1.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.559.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.894.149c-.424.07-.764.383-.929.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 0 1-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.398.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 0 1-.12-1.45l.527-.737c.25-.35.272-.806.108-1.204-.165-.397-.506-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.108-1.204l-.526-.738a1.125 1.125 0 0 1 .12-1.45l.773-.773a1.125 1.125 0 0 1 1.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894Z"}),e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"})]})]})}var n="VideoPlayer-module_visit__PJEFg",i="VideoPlayer-module_invisit__A7jP6",o="VideoPlayer-module_opacity0__M4VIz",l="VideoPlayer-module_opacity1__wWDar",a="VideoPlayer-module_videoContainer__-vADj",s="VideoPlayer-module_absoluteCenter__A2KzN",c="VideoPlayer-module_wrapper__8iODY",u="VideoPlayer-module_video__fcIYk",d="VideoPlayer-module_controller__eyPIB",m="VideoPlayer-module_title__oxKqS",h="VideoPlayer-module_center__arqa3",f="VideoPlayer-module_controls__OQ23e",p="VideoPlayer-module_timeWrapper__fpsFx",y="VideoPlayer-module_btnSetting__le5fg",x="VideoPlayer-module_customSelect__GSAin",v="VideoPlayer-module_hoverTime__Dl7h0",j="VideoPlayer-module_timeControl__sz7qH",k="VideoPlayer-module_backProcess__I5ZGe",g="VideoPlayer-module_progressBar__v-AQM",b="VideoPlayer-module_rangeTime__Sp6FM",_="VideoPlayer-module_volumeWrapper__QBYAa",w="VideoPlayer-module_rangeVolume__koFUe",P="VideoPlayer-module_seekLeft__494Gh",C="VideoPlayer-module_seekRight__Wq-Br",M="VideoPlayer-module_hideOnMobile__-bl4X",T="VideoPlayer-module_loadingContainer__H2pCH",L="VideoPlayer-module_playFirstContainer__iHyIf";exports.VideoPlayer=function({source:V,title:S}){const N="string"==typeof V?V:V.link,F="object"==typeof V&&"string"==typeof V.type?V.type:"video/mp4",E=t.useRef(null),A=t.useRef(null),I=t.useRef(null),q=t.useRef(null),H=t.useRef(0),R=t.useRef(null),[$,B]=t.useState(!0),[D,W]=t.useState(0),[z,Z]=t.useState(!1),[O,X]=t.useState(!1),[G,Q]=t.useState(!1),[U,Y]=t.useState(!1),[K,J]=t.useState(!1),[ee,te]=t.useState(!1),[re,ne]=t.useState(!1),[ie,oe]=t.useState(!0),[le,ae]=t.useState(!1),[se,ce]=t.useState(1),[ue,de]=t.useState(0),[me,he]=t.useState(0),[fe,pe]=t.useState(1),[ye,xe]=t.useState(!1),[ve,je]=t.useState(null),[ke,ge]=t.useState(null),[be,_e]=t.useState(0);function we(e){if(void 0===e||Number.isNaN(e)||e<0)return"00:00";const t=Math.floor(e),r=t%60;return`${Math.floor(t/60).toString().padStart(2,"0")}:${r.toString().padStart(2,"0")}`}async function Pe(e,t){e.current&&await t(e.current)}t.useEffect(()=>{Y(!1),ne(!1),J(!1),de(0),he(0),W(0),Z(!1),ae(!1),xe(!1),je(null)},[N]),t.useEffect(()=>()=>{E.current&&(clearTimeout(E.current),E.current=null),A.current&&(clearTimeout(A.current),A.current=null),R.current&&(cancelAnimationFrame(R.current),R.current=null)},[]);const Ce=t.useCallback(()=>{A.current&&(clearTimeout(A.current),A.current=null),Z(!0),A.current=setTimeout(()=>{Z(!1),W(0),A.current=null},1500)},[]),Me=t.useCallback(()=>{Pe(I,async e=>{try{e.paused?await e.play():e.pause()}catch{return}})},[]),Te=t.useCallback(e=>{Pe(I,t=>{W(r=>{const n="+"===e?r<0?10:r+10:r>0?-10:r-10;return t.currentTime+="+"===e?10:-10,n}),Ce()})},[Ce]);function Le(){const e=document;!!(e.fullscreenEnabled||e.webkitFullscreenEnabled||e.mozFullScreenEnabled||e.msFullscreenEnabled)&&Pe(q,e=>{document.fullscreenElement?async function(){const e=document,t=e.exitFullscreen||e.webkitExitFullscreen||e.mozCancelFullScreen||e.msExitFullscreen;if(t)try{await t.call(e)}catch{return void console.error("Failed to exit fullscreen")}}():async function(e){const t=e,r=t.requestFullscreen||t.webkitRequestFullscreen||t.webkitEnterFullscreen||t.mozRequestFullScreen||t.msRequestFullscreen;if(r)try{await r.call(t)}catch{return void console.error("Failed to enter fullscreen")}}(e)})}function Ve(){"pictureInPictureEnabled"in document&&"requestPictureInPicture"in HTMLVideoElement.prototype&&Pe(I,e=>{document.pictureInPictureElement?async function(e){if(!1===e.disablePictureInPicture&&"pictureInPictureElement"in document&&document.pictureInPictureElement)try{await document.exitPictureInPicture()}catch{return void console.error("Failed to exit Picture-in-Picture")}}(e):async function(e){if(!("pictureInPictureEnabled"in document)||"function"!=typeof e.requestPictureInPicture)return console.error("Picture-in-Picture is not supported in this browser"),null;try{return e.paused&&await e.play().catch(()=>{console.warn("Auto-play was prevented")}),await e.requestPictureInPicture()}catch{return console.error("Failed to enter Picture-in-Picture"),null}}(e)})}function Se(e,t){Pe(I,r=>{"time"===e?(he(t),r.currentTime=t):(ce(t),r.volume=t,r.muted&&(r.muted=!1,te(!1)))})}function Ne(e=2500){ie||(E.current&&(clearTimeout(E.current),E.current=null),X(!0),E.current=setTimeout(()=>{le||X(!1),E.current=null},e))}t.useEffect(()=>{const e=/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i.test(window.navigator.userAgent);async function t(){if(q.current&&I.current){const e=document.fullscreenElement===q.current;Q(document.fullscreenEnabled&&e);const t=I.current.videoWidth>I.current.videoHeight;if("undefined"!=typeof window&&window.screen&&"orientation"in window.screen&&window.screen.orientation&&"lock"in window.screen.orientation&&"function"==typeof window.screen.orientation.lock&&t&&e)try{await window.screen.orientation.lock("landscape")}catch{return!1}}}function r(e){[" ","f","p","ArrowLeft","ArrowRight"].includes(e.key)&&e.preventDefault(),Pe(I,t=>{switch(e.key){case" ":Me();break;case"f":Le();break;case"p":Ve();break;case"ArrowLeft":W(e=>{const r=e>0?-10:e-10;return t.currentTime-=10,r}),Ce();break;case"ArrowRight":W(e=>{const r=e<0?10:e+10;return t.currentTime+=10,r}),Ce()}})}return B(e),document.addEventListener("fullscreenchange",t),!e&&window.addEventListener("keydown",r),()=>{document.removeEventListener("fullscreenchange",t),!e&&window.removeEventListener("keydown",r)}},[N,Me,Ce]);const Fe=t.useCallback(function(e,t){let r=null,n=0;return function(...i){const o=Date.now();n?(r&&clearTimeout(r),r=setTimeout(()=>{o-n>=t&&(e.apply(this,i),n=o)},t-(o-n))):(e.apply(this,i),n=o)}}(()=>{ie||Ne()},200),[ie,le]),Ee=t.useCallback(()=>{X(!1),E.current&&(clearTimeout(E.current),E.current=null)},[]);t.useEffect(()=>{le&&Ne(1e3)},[le]);const Ae=t.useCallback(e=>{const t=e.currentTarget.currentTime;(Math.floor(t)!==Math.floor(me)||Math.abs(t-me)>1)&&he(t)},[me]),Ie=t.useMemo(()=>{if(!I.current||!ue)return 0;const e=I.current.buffered;if(0===e.length)return 0;let t=0;for(let r=0;r<e.length;r++)if(e.start(r)<=me&&e.end(r)>me){t=e.end(r);break}return t/ue*100},[me,ue]),qe=t.useMemo(()=>ue>0?me/ue*100:0,[me,ue]),He=t.useCallback(e=>{if(!$)return;const t=Date.now(),r=t-H.current;(r>0&&r<300||z)&&(z||Z(!0),Te(e)),H.current=t},[$,z,Te]);function Re(e){pe(e),xe(!1),je(null)}return t.useEffect(()=>{Pe(I,e=>{e.playbackRate=fe})},[fe]),e.jsx("div",{className:a,children:e.jsxs("div",{className:c,ref:q,onMouseMove:Fe,onMouseLeave:Ee,children:[e.jsx("video",{playsInline:!0,preload:"none",ref:I,controls:!1,onTimeUpdate:Ae,onLoadedMetadata:e=>de(e.currentTarget.duration),onVolumeChange:e=>ce(e.currentTarget.volume),onCanPlayThrough:()=>J(!1),onWaiting:()=>J(!0),onLoadStart:()=>ne(!1),onEnded:()=>ne(!0),onPlay:()=>{ne(!1),oe(!1),Y(!0)},onPause:()=>oe(!0),className:u,children:e.jsx("source",{src:N,type:F})}),e.jsxs("div",{className:`${d} ${$?ie||O?n:i:ie||O?l:o}`,children:[e.jsx("h1",{className:m,children:e.jsx("p",{children:S})}),e.jsxs("div",{className:h,onClick:$?void 0:Me,children:[e.jsx("div",{onClick:()=>He("-")}),e.jsx("div",{onClick:()=>He("+")})]}),e.jsxs("div",{className:f,children:[e.jsxs("div",{className:p,children:[e.jsx("article",{children:we(me)}),e.jsxs("div",{className:j,children:[e.jsx("div",{className:k}),e.jsx("div",{className:g,style:{width:`${Ie}%`}}),e.jsx("div",{className:v,style:{left:be-25,display:ke?void 0:"none"},children:we(ke||0)}),e.jsx("input",{type:"range",step:"any",max:ue,value:me,onFocus:e=>e.currentTarget.blur(),className:b,onPointerDown:()=>ae(!0),onPointerUp:()=>ae(!1),onPointerCancel:()=>ae(!1),onChange:e=>Se("time",+e.currentTarget.value),onMouseLeave:()=>{ge(null)},onMouseMove:e=>{if(R.current)return;const t=e.currentTarget;R.current=requestAnimationFrame(()=>{R.current=null;const r=t.getBoundingClientRect(),n=e.clientX-r.left,i=Math.min(Math.max(n/r.width,0),1)*ue;_e(n),ge(i)})},style:{backgroundImage:`linear-gradient(to right, #00b2ff ${qe}%, #0000 ${qe}%)`}})]}),e.jsx("article",{children:we(ue)})]}),e.jsxs("div",{className:_,children:[e.jsx("button",{type:"button",onClick:function(){Pe(I,e=>{e.muted=!e.muted,te(e.muted)})},onFocus:e=>e.currentTarget.blur(),children:e.jsx(r,{name:ee||0===se?"muted":"volume"})}),e.jsx("input",{max:1,type:"range",step:"any",value:ee?0:se,onFocus:e=>e.currentTarget.blur(),className:w+($?` ${M}`:""),style:{backgroundImage:`linear-gradient(to right, #00b2ff ${ee?0:100*se}%, #fff5 ${ee?0:100*se}%)`},onChange:e=>Se("volume",+e.currentTarget.value)})]}),e.jsx("div",{children:e.jsx("button",{type:"button",onClick:Ve,onFocus:e=>e.currentTarget.blur(),children:e.jsx(r,{name:"pip"})})}),e.jsx("div",{children:e.jsx("button",{type:"button",onClick:Le,onFocus:e=>e.currentTarget.blur(),children:e.jsx(r,{name:G?"unfullscreen":"fullscreen"})})}),e.jsxs("div",{className:y,children:[e.jsx("button",{type:"button",onClick:function(){ae(!le),xe(!ye),je(null)},onFocus:e=>e.currentTarget.blur(),children:e.jsx(r,{name:"setting"})}),e.jsxs("div",{className:x,style:{display:ye?void 0:"none"},children:[e.jsx("div",{onClick:()=>je("speed"===ve?null:"speed"),children:"ความเร็วในการเล่น"}),"speed"===ve&&e.jsxs("ul",{children:[e.jsx("li",{style:{backgroundColor:.25===fe?"#eeee":void 0},onClick:()=>Re(.25),children:"0.25"}),e.jsx("li",{style:{backgroundColor:.5===fe?"#eeee":void 0},onClick:()=>Re(.5),children:"0.5"}),e.jsx("li",{style:{backgroundColor:.75===fe?"#eeee":void 0},onClick:()=>Re(.75),children:"0.75"}),e.jsx("li",{style:{backgroundColor:1===fe?"#eeee":void 0},onClick:()=>Re(1),children:"1"}),e.jsx("li",{style:{backgroundColor:1.25===fe?"#eeee":void 0},onClick:()=>Re(1.25),children:"1.25"}),e.jsx("li",{style:{backgroundColor:1.5===fe?"#eeee":void 0},onClick:()=>Re(1.5),children:"1.5"}),e.jsx("li",{style:{backgroundColor:1.75===fe?"#eeee":void 0},onClick:()=>Re(1.75),children:"1.75"}),e.jsx("li",{style:{backgroundColor:2===fe?"#eeee":void 0},onClick:()=>Re(2),children:"2"})]})]})]})]}),e.jsx(r,{name:K?"hide":re?"restart":ie?"play":"pause",bigger:!0,className:s,onClick:Me})]}),D<0&&e.jsx("div",{inert:!0,className:P,children:D.toString()},D),D>0&&e.jsx("div",{inert:!0,className:C,children:`+${D.toString()}`},D),K&&e.jsx("div",{className:T,children:e.jsx(r,{name:"loading"})}),!U&&e.jsx("div",{className:L,children:e.jsx("button",{type:"button",onFocus:e=>e.currentTarget.blur(),onClick:()=>{Y(!0),Pe(I,async e=>{try{await e.play()}catch{return}})},children:e.jsx(r,{name:"play",bigger:!0})})})]})},N)};
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as r,Fragment as t}from"react/jsx-runtime";import{useRef as n,useState as i,useEffect as o,useCallback as a,useMemo as l}from"react";function c({name:n,bigger:i,className:o,onClick:a}){return"loading"===n?e("svg",{version:"1.1",id:"L1",xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",x:"0px",y:"0px",viewBox:"0 0 100 100",enableBackground:"new 0 0 100 100",xmlSpace:"preserve",children:[r("title",{children:"loading"}),r("circle",{fill:"none",stroke:"currentColor",strokeWidth:"6",strokeMiterlimit:"15",strokeDasharray:"14.2472,14.2472",cx:"50",cy:"50",r:"47",children:r("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"5s",from:"0 50 50",to:"360 50 50",repeatCount:"indefinite"})}),r("circle",{fill:"none",stroke:"currentColor",strokeWidth:"1",strokeMiterlimit:"10",strokeDasharray:"10,10",cx:"50",cy:"50",r:"39",children:r("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"5s",from:"0 50 50",to:"-360 50 50",repeatCount:"indefinite"})}),e("g",{fill:"currentColor",children:[r("rect",{x:"30",y:"35",width:"5",height:"30",children:r("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.1"})}),r("rect",{x:"40",y:"35",width:"5",height:"30",children:r("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.2"})}),r("rect",{x:"50",y:"35",width:"5",height:"30",children:r("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.3"})}),r("rect",{x:"60",y:"35",width:"5",height:"30",children:r("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.4"})}),r("rect",{x:"70",y:"35",width:"5",height:"30",children:r("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.5"})})]})]}):"hide"===n?r(t,{}):e("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,onClick:a,className:o,style:{display:"block",width:(i?"5":"1.6")+"em"},stroke:"currentColor",children:[r("title",{children:n}),"play"===n&&r("path",{fill:"#fff",strokeLinecap:"round",strokeLinejoin:"round",d:"M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z"}),"pause"===n&&r("path",{strokeWidth:4,strokeLinecap:"round",strokeLinejoin:"round",d:"M16.4 5.25v13.5m-8.5-13.5v13.5"}),"fullscreen"===n&&r("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"}),"unfullscreen"===n&&r("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25"}),"pip"===n&&r("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"}),"muted"===n&&r("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M17.25 9.75 19.5 12m0 0 2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6 4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"}),"volume"===n&&r("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M19.114 5.636a9 9 0 0 1 0 12.728M16.463 8.288a5.25 5.25 0 0 1 0 7.424M6.75 8.25l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"}),"restart"===n&&r("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"})]})}var u="VideoPlayer-module_visit__PJEFg",s="VideoPlayer-module_invisit__A7jP6",d="VideoPlayer-module_opacity0__M4VIz",m="VideoPlayer-module_opacity1__wWDar",h="VideoPlayer-module_absoluteCenter__A2KzN",p="VideoPlayer-module_wrapper__8iODY",f="VideoPlayer-module_video__fcIYk",y="VideoPlayer-module_controller__eyPIB",v="VideoPlayer-module_title__oxKqS",g="VideoPlayer-module_center__arqa3",w="VideoPlayer-module_controls__OQ23e",_="VideoPlayer-module_timeWrapper__fpsFx",b="VideoPlayer-module_timeControl__sz7qH",k="VideoPlayer-module_backProcess__I5ZGe",P="VideoPlayer-module_progressBar__v-AQM",M="VideoPlayer-module_rangeTime__Sp6FM",T="VideoPlayer-module_volumeWrapper__QBYAa",C="VideoPlayer-module_rangeVolume__koFUe",L="VideoPlayer-module_seekLeft__494Gh",V="VideoPlayer-module_seekRight__Wq-Br",N="VideoPlayer-module_hideOnMobile__-bl4X",x="VideoPlayer-module_loadingContainer__H2pCH",F="VideoPlayer-module_playFirstContainer__iHyIf";function E({source:t,title:E}){const I="string"==typeof t?t:t.link,A="object"==typeof t&&"string"==typeof t.type?t.type:"video/mp4",H=n(null),S=n(null),j=n(null),q=n(null),$=n(0),[W,B]=i(!0),[D,z]=i(0),[R,O]=i(!1),[X,Z]=i(!1),[Q,U]=i(!1),[Y,G]=i(!1),[K,J]=i(!1),[ee,re]=i(!1),[te,ne]=i(!1),[ie,oe]=i(!0),[ae,le]=i(!1),[ce,ue]=i(1),[se,de]=i(0),[me,he]=i(0);function pe(e){if(void 0===e||Number.isNaN(e)||e<0)return"00:00";const r=Math.floor(e),t=r%60;return`${Math.floor(r/60).toString().padStart(2,"0")}:${t.toString().padStart(2,"0")}`}async function fe(e,r){e.current&&await r(e.current)}o(()=>{G(!1),ne(!1),J(!1),de(0),he(0),z(0),O(!1)},[I]),o(()=>()=>{H.current&&(clearTimeout(H.current),H.current=null),S.current&&(clearTimeout(S.current),S.current=null)},[]);const ye=a(()=>{S.current&&(clearTimeout(S.current),S.current=null),O(!0),S.current=setTimeout(()=>{O(!1),z(0),S.current=null},1500)},[]),ve=a(()=>{fe(j,async e=>{try{e.paused?await e.play():e.pause()}catch{return}})},[]),ge=a(e=>{fe(j,r=>{z(t=>{const n="+"===e?t<0?10:t+10:t>0?-10:t-10;return r.currentTime+="+"===e?10:-10,n}),ye()})},[ye]);function we(){const e=document;!!(e.fullscreenEnabled||e.webkitFullscreenEnabled||e.mozFullScreenEnabled||e.msFullscreenEnabled)&&fe(q,e=>{document.fullscreenElement?async function(){const e=document,r=e.exitFullscreen||e.webkitExitFullscreen||e.mozCancelFullScreen||e.msExitFullscreen;if(r)try{await r.call(e)}catch{return void console.error("Failed to exit fullscreen")}}():async function(e){const r=e,t=r.requestFullscreen||r.webkitRequestFullscreen||r.webkitEnterFullscreen||r.mozRequestFullScreen||r.msRequestFullscreen;if(t)try{await t.call(r)}catch{return void console.error("Failed to enter fullscreen")}}(e)})}function _e(){"pictureInPictureEnabled"in document&&"requestPictureInPicture"in HTMLVideoElement.prototype&&fe(j,e=>{document.pictureInPictureElement?async function(e){if(!1===e.disablePictureInPicture&&"pictureInPictureElement"in document&&document.pictureInPictureElement)try{await document.exitPictureInPicture()}catch{return void console.error("Failed to exit Picture-in-Picture")}}(e):async function(e){if(!("pictureInPictureEnabled"in document)||"function"!=typeof e.requestPictureInPicture)return console.error("Picture-in-Picture is not supported in this browser"),null;try{return e.paused&&await e.play().catch(()=>{console.warn("Auto-play was prevented")}),await e.requestPictureInPicture()}catch{return console.error("Failed to enter Picture-in-Picture"),null}}(e)})}function be(e,r){fe(j,t=>{"time"===e?(he(r),t.currentTime=r):(ue(r),t.volume=r,t.muted&&(t.muted=!1,re(!1)))})}function ke(e=2500){ie||(H.current&&(clearTimeout(H.current),H.current=null),Z(!0),H.current=setTimeout(()=>{ae||Z(!1),H.current=null},e))}o(()=>{const e=/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i.test(window.navigator.userAgent);async function r(){if(q.current&&j.current){const e=document.fullscreenElement===q.current;U(document.fullscreenEnabled&&e);const r=j.current.videoWidth>j.current.videoHeight;if("undefined"!=typeof window&&window.screen&&"orientation"in window.screen&&window.screen.orientation&&"lock"in window.screen.orientation&&"function"==typeof window.screen.orientation.lock&&r&&e)try{await window.screen.orientation.lock("landscape")}catch{return!1}}}function t(e){[" ","f","p","ArrowLeft","ArrowRight"].includes(e.key)&&e.preventDefault(),fe(j,r=>{switch(e.key){case" ":ve();break;case"f":we();break;case"p":_e();break;case"ArrowLeft":z(e=>{const t=e>0?-10:e-10;return r.currentTime-=10,t}),ye();break;case"ArrowRight":z(e=>{const t=e<0?10:e+10;return r.currentTime+=10,t}),ye()}})}return B(e),document.addEventListener("fullscreenchange",r),!e&&window.addEventListener("keydown",t),()=>{document.removeEventListener("fullscreenchange",r),!e&&window.removeEventListener("keydown",t)}},[I,ve,ye]);const Pe=a(function(e,r){let t=null,n=0;return function(...i){const o=Date.now();n?(t&&clearTimeout(t),t=setTimeout(()=>{o-n>=r&&(e.apply(this,i),n=o)},r-(o-n))):(e.apply(this,i),n=o)}}(()=>{ie||ke()},200),[ie,ae]),Me=a(()=>{Z(!1),H.current&&(clearTimeout(H.current),H.current=null)},[]);o(()=>{ae&&ke(1e3)},[ae]);const Te=a(e=>{const r=e.currentTarget.currentTime;(Math.floor(r)!==Math.floor(me)||Math.abs(r-me)>1)&&he(r)},[me]),Ce=l(()=>{if(!j.current||!se)return 0;const e=j.current.buffered;if(0===e.length)return 0;let r=0;for(let t=0;t<e.length;t++)if(e.start(t)<=me&&e.end(t)>me){r=e.end(t);break}return r/se*100},[me,se]),Le=l(()=>se>0?me/se*100:0,[me,se]),Ve=a(e=>{if(!W)return;const r=Date.now(),t=r-$.current;(t>0&&t<300||R)&&(R||O(!0),ge(e)),$.current=r},[W,R,ge]);return e("div",{className:p,ref:q,onMouseMove:Pe,onMouseLeave:Me,children:[r("video",{playsInline:!0,preload:"none",ref:j,controls:!1,onTimeUpdate:Te,onLoadedMetadata:e=>de(e.currentTarget.duration),onVolumeChange:e=>ue(e.currentTarget.volume),onCanPlayThrough:()=>J(!1),onWaiting:()=>J(!0),onLoadStart:()=>ne(!1),onEnded:()=>ne(!0),onPlay:()=>{ne(!1),oe(!1),G(!0)},onPause:()=>oe(!0),className:f,children:r("source",{src:I,type:A})}),e("div",{className:`${y} ${W?ie||X?u:s:ie||X?m:d}`,children:[r("h1",{className:v,children:E}),e("div",{className:g,onClick:W?void 0:ve,children:[r("div",{onClick:()=>Ve("-")}),r("div",{onClick:()=>Ve("+")})]}),e("div",{className:w,children:[e("div",{className:_,children:[r("article",{children:pe(me)}),e("div",{className:b,children:[r("div",{className:k}),r("div",{className:P,style:{width:`${Ce}%`}}),r("input",{type:"range",step:"any",max:se,value:me,onFocus:e=>e.currentTarget.blur(),className:M,onPointerDown:()=>le(!0),onPointerUp:()=>le(!1),onPointerCancel:()=>le(!1),onChange:e=>be("time",+e.currentTarget.value),style:{backgroundImage:`linear-gradient(to right, #00b2ff ${Le}%, #0000 ${Le}%)`}})]}),r("article",{children:pe(se)})]}),e("div",{className:T,children:[r("button",{type:"button",onClick:function(){fe(j,e=>{e.muted=!e.muted,re(e.muted)})},onFocus:e=>e.currentTarget.blur(),children:r(c,{name:ee||0===ce?"muted":"volume"})}),r("input",{max:1,type:"range",step:"any",value:ee?0:ce,onFocus:e=>e.currentTarget.blur(),className:C+(W?` ${N}`:""),style:{backgroundImage:`linear-gradient(to right, #00b2ff ${ee?0:100*ce}%, #fff5 ${ee?0:100*ce}%)`},onChange:e=>be("volume",+e.currentTarget.value)})]}),r("div",{children:r("button",{type:"button",onClick:_e,onFocus:e=>e.currentTarget.blur(),children:r(c,{name:"pip"})})}),r("div",{children:r("button",{type:"button",onClick:we,onFocus:e=>e.currentTarget.blur(),children:r(c,{name:Q?"unfullscreen":"fullscreen"})})})]}),r(c,{name:K?"hide":te?"restart":ie?"play":"pause",bigger:!0,className:h,onClick:ve})]}),D<0&&r("div",{inert:!0,className:L,children:D.toString()},D),D>0&&r("div",{inert:!0,className:V,children:`+${D.toString()}`},D),K&&r("div",{className:x,children:r(c,{name:"loading"})}),!Y&&r("div",{className:F,children:r("button",{type:"button",onFocus:e=>e.currentTarget.blur(),onClick:()=>{G(!0),fe(j,async e=>{try{await e.play()}catch{return}})},children:r(c,{name:"play",bigger:!0})})})]},I)}export{E as VideoPlayer};
|
|
1
|
+
import{jsxs as e,jsx as n,Fragment as r}from"react/jsx-runtime";import{useRef as t,useState as i,useEffect as o,useCallback as l,useMemo as a}from"react";function c({name:t,bigger:i,className:o,onClick:l}){return"loading"===t?e("svg",{version:"1.1",id:"L1",xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",x:"0px",y:"0px",viewBox:"0 0 100 100",enableBackground:"new 0 0 100 100",xmlSpace:"preserve",children:[n("title",{children:"loading"}),n("circle",{fill:"none",stroke:"currentColor",strokeWidth:"6",strokeMiterlimit:"15",strokeDasharray:"14.2472,14.2472",cx:"50",cy:"50",r:"47",children:n("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"5s",from:"0 50 50",to:"360 50 50",repeatCount:"indefinite"})}),n("circle",{fill:"none",stroke:"currentColor",strokeWidth:"1",strokeMiterlimit:"10",strokeDasharray:"10,10",cx:"50",cy:"50",r:"39",children:n("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"5s",from:"0 50 50",to:"-360 50 50",repeatCount:"indefinite"})}),e("g",{fill:"currentColor",children:[n("rect",{x:"30",y:"35",width:"5",height:"30",children:n("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.1"})}),n("rect",{x:"40",y:"35",width:"5",height:"30",children:n("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.2"})}),n("rect",{x:"50",y:"35",width:"5",height:"30",children:n("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.3"})}),n("rect",{x:"60",y:"35",width:"5",height:"30",children:n("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.4"})}),n("rect",{x:"70",y:"35",width:"5",height:"30",children:n("animateTransform",{attributeName:"transform",dur:"1s",type:"translate",values:"0 5 ; 0 -5; 0 5",repeatCount:"indefinite",begin:"0.5"})})]})]}):"hide"===t?n(r,{}):e("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,onClick:l,className:o,style:{display:"block",width:(i?"5":"1.6")+"em"},stroke:"currentColor",children:[n("title",{children:t}),"play"===t&&n("path",{fill:"#fff",strokeLinecap:"round",strokeLinejoin:"round",d:"M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z"}),"pause"===t&&n("path",{strokeWidth:4,strokeLinecap:"round",strokeLinejoin:"round",d:"M16.4 5.25v13.5m-8.5-13.5v13.5"}),"fullscreen"===t&&n("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"}),"unfullscreen"===t&&n("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25"}),"pip"===t&&n("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"}),"muted"===t&&n("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M17.25 9.75 19.5 12m0 0 2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6 4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"}),"volume"===t&&n("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M19.114 5.636a9 9 0 0 1 0 12.728M16.463 8.288a5.25 5.25 0 0 1 0 7.424M6.75 8.25l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"}),"restart"===t&&n("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"}),"setting"===t&&e(r,{children:[n("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 0 1 1.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.559.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.894.149c-.424.07-.764.383-.929.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 0 1-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.398.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 0 1-.12-1.45l.527-.737c.25-.35.272-.806.108-1.204-.165-.397-.506-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.108-1.204l-.526-.738a1.125 1.125 0 0 1 .12-1.45l.773-.773a1.125 1.125 0 0 1 1.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894Z"}),n("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"})]})]})}var u="VideoPlayer-module_visit__PJEFg",d="VideoPlayer-module_invisit__A7jP6",s="VideoPlayer-module_opacity0__M4VIz",m="VideoPlayer-module_opacity1__wWDar",h="VideoPlayer-module_videoContainer__-vADj",p="VideoPlayer-module_absoluteCenter__A2KzN",y="VideoPlayer-module_wrapper__8iODY",f="VideoPlayer-module_video__fcIYk",v="VideoPlayer-module_controller__eyPIB",g="VideoPlayer-module_title__oxKqS",k="VideoPlayer-module_center__arqa3",_="VideoPlayer-module_controls__OQ23e",b="VideoPlayer-module_timeWrapper__fpsFx",w="VideoPlayer-module_btnSetting__le5fg",P="VideoPlayer-module_customSelect__GSAin",C="VideoPlayer-module_hoverTime__Dl7h0",M="VideoPlayer-module_timeControl__sz7qH",T="VideoPlayer-module_backProcess__I5ZGe",L="VideoPlayer-module_progressBar__v-AQM",V="VideoPlayer-module_rangeTime__Sp6FM",N="VideoPlayer-module_volumeWrapper__QBYAa",x="VideoPlayer-module_rangeVolume__koFUe",F="VideoPlayer-module_seekLeft__494Gh",E="VideoPlayer-module_seekRight__Wq-Br",A="VideoPlayer-module_hideOnMobile__-bl4X",I="VideoPlayer-module_loadingContainer__H2pCH",S="VideoPlayer-module_playFirstContainer__iHyIf";function j({source:r,title:j}){const H="string"==typeof r?r:r.link,q="object"==typeof r&&"string"==typeof r.type?r.type:"video/mp4",$=t(null),B=t(null),D=t(null),W=t(null),R=t(0),z=t(null),[Z,O]=i(!0),[X,G]=i(0),[Q,U]=i(!1),[Y,K]=i(!1),[J,ee]=i(!1),[ne,re]=i(!1),[te,ie]=i(!1),[oe,le]=i(!1),[ae,ce]=i(!1),[ue,de]=i(!0),[se,me]=i(!1),[he,pe]=i(1),[ye,fe]=i(0),[ve,ge]=i(0),[ke,_e]=i(1),[be,we]=i(!1),[Pe,Ce]=i(null),[Me,Te]=i(null),[Le,Ve]=i(0);function Ne(e){if(void 0===e||Number.isNaN(e)||e<0)return"00:00";const n=Math.floor(e),r=n%60;return`${Math.floor(n/60).toString().padStart(2,"0")}:${r.toString().padStart(2,"0")}`}async function xe(e,n){e.current&&await n(e.current)}o(()=>{re(!1),ce(!1),ie(!1),fe(0),ge(0),G(0),U(!1),me(!1),we(!1),Ce(null)},[H]),o(()=>()=>{$.current&&(clearTimeout($.current),$.current=null),B.current&&(clearTimeout(B.current),B.current=null),z.current&&(cancelAnimationFrame(z.current),z.current=null)},[]);const Fe=l(()=>{B.current&&(clearTimeout(B.current),B.current=null),U(!0),B.current=setTimeout(()=>{U(!1),G(0),B.current=null},1500)},[]),Ee=l(()=>{xe(D,async e=>{try{e.paused?await e.play():e.pause()}catch{return}})},[]),Ae=l(e=>{xe(D,n=>{G(r=>{const t="+"===e?r<0?10:r+10:r>0?-10:r-10;return n.currentTime+="+"===e?10:-10,t}),Fe()})},[Fe]);function Ie(){const e=document;!!(e.fullscreenEnabled||e.webkitFullscreenEnabled||e.mozFullScreenEnabled||e.msFullscreenEnabled)&&xe(W,e=>{document.fullscreenElement?async function(){const e=document,n=e.exitFullscreen||e.webkitExitFullscreen||e.mozCancelFullScreen||e.msExitFullscreen;if(n)try{await n.call(e)}catch{return void console.error("Failed to exit fullscreen")}}():async function(e){const n=e,r=n.requestFullscreen||n.webkitRequestFullscreen||n.webkitEnterFullscreen||n.mozRequestFullScreen||n.msRequestFullscreen;if(r)try{await r.call(n)}catch{return void console.error("Failed to enter fullscreen")}}(e)})}function Se(){"pictureInPictureEnabled"in document&&"requestPictureInPicture"in HTMLVideoElement.prototype&&xe(D,e=>{document.pictureInPictureElement?async function(e){if(!1===e.disablePictureInPicture&&"pictureInPictureElement"in document&&document.pictureInPictureElement)try{await document.exitPictureInPicture()}catch{return void console.error("Failed to exit Picture-in-Picture")}}(e):async function(e){if(!("pictureInPictureEnabled"in document)||"function"!=typeof e.requestPictureInPicture)return console.error("Picture-in-Picture is not supported in this browser"),null;try{return e.paused&&await e.play().catch(()=>{console.warn("Auto-play was prevented")}),await e.requestPictureInPicture()}catch{return console.error("Failed to enter Picture-in-Picture"),null}}(e)})}function je(e,n){xe(D,r=>{"time"===e?(ge(n),r.currentTime=n):(pe(n),r.volume=n,r.muted&&(r.muted=!1,le(!1)))})}function He(e=2500){ue||($.current&&(clearTimeout($.current),$.current=null),K(!0),$.current=setTimeout(()=>{se||K(!1),$.current=null},e))}o(()=>{const e=/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i.test(window.navigator.userAgent);async function n(){if(W.current&&D.current){const e=document.fullscreenElement===W.current;ee(document.fullscreenEnabled&&e);const n=D.current.videoWidth>D.current.videoHeight;if("undefined"!=typeof window&&window.screen&&"orientation"in window.screen&&window.screen.orientation&&"lock"in window.screen.orientation&&"function"==typeof window.screen.orientation.lock&&n&&e)try{await window.screen.orientation.lock("landscape")}catch{return!1}}}function r(e){[" ","f","p","ArrowLeft","ArrowRight"].includes(e.key)&&e.preventDefault(),xe(D,n=>{switch(e.key){case" ":Ee();break;case"f":Ie();break;case"p":Se();break;case"ArrowLeft":G(e=>{const r=e>0?-10:e-10;return n.currentTime-=10,r}),Fe();break;case"ArrowRight":G(e=>{const r=e<0?10:e+10;return n.currentTime+=10,r}),Fe()}})}return O(e),document.addEventListener("fullscreenchange",n),!e&&window.addEventListener("keydown",r),()=>{document.removeEventListener("fullscreenchange",n),!e&&window.removeEventListener("keydown",r)}},[H,Ee,Fe]);const qe=l(function(e,n){let r=null,t=0;return function(...i){const o=Date.now();t?(r&&clearTimeout(r),r=setTimeout(()=>{o-t>=n&&(e.apply(this,i),t=o)},n-(o-t))):(e.apply(this,i),t=o)}}(()=>{ue||He()},200),[ue,se]),$e=l(()=>{K(!1),$.current&&(clearTimeout($.current),$.current=null)},[]);o(()=>{se&&He(1e3)},[se]);const Be=l(e=>{const n=e.currentTarget.currentTime;(Math.floor(n)!==Math.floor(ve)||Math.abs(n-ve)>1)&&ge(n)},[ve]),De=a(()=>{if(!D.current||!ye)return 0;const e=D.current.buffered;if(0===e.length)return 0;let n=0;for(let r=0;r<e.length;r++)if(e.start(r)<=ve&&e.end(r)>ve){n=e.end(r);break}return n/ye*100},[ve,ye]),We=a(()=>ye>0?ve/ye*100:0,[ve,ye]),Re=l(e=>{if(!Z)return;const n=Date.now(),r=n-R.current;(r>0&&r<300||Q)&&(Q||U(!0),Ae(e)),R.current=n},[Z,Q,Ae]);function ze(e){_e(e),we(!1),Ce(null)}return o(()=>{xe(D,e=>{e.playbackRate=ke})},[ke]),n("div",{className:h,children:e("div",{className:y,ref:W,onMouseMove:qe,onMouseLeave:$e,children:[n("video",{playsInline:!0,preload:"none",ref:D,controls:!1,onTimeUpdate:Be,onLoadedMetadata:e=>fe(e.currentTarget.duration),onVolumeChange:e=>pe(e.currentTarget.volume),onCanPlayThrough:()=>ie(!1),onWaiting:()=>ie(!0),onLoadStart:()=>ce(!1),onEnded:()=>ce(!0),onPlay:()=>{ce(!1),de(!1),re(!0)},onPause:()=>de(!0),className:f,children:n("source",{src:H,type:q})}),e("div",{className:`${v} ${Z?ue||Y?u:d:ue||Y?m:s}`,children:[n("h1",{className:g,children:n("p",{children:j})}),e("div",{className:k,onClick:Z?void 0:Ee,children:[n("div",{onClick:()=>Re("-")}),n("div",{onClick:()=>Re("+")})]}),e("div",{className:_,children:[e("div",{className:b,children:[n("article",{children:Ne(ve)}),e("div",{className:M,children:[n("div",{className:T}),n("div",{className:L,style:{width:`${De}%`}}),n("div",{className:C,style:{left:Le-25,display:Me?void 0:"none"},children:Ne(Me||0)}),n("input",{type:"range",step:"any",max:ye,value:ve,onFocus:e=>e.currentTarget.blur(),className:V,onPointerDown:()=>me(!0),onPointerUp:()=>me(!1),onPointerCancel:()=>me(!1),onChange:e=>je("time",+e.currentTarget.value),onMouseLeave:()=>{Te(null)},onMouseMove:e=>{if(z.current)return;const n=e.currentTarget;z.current=requestAnimationFrame(()=>{z.current=null;const r=n.getBoundingClientRect(),t=e.clientX-r.left,i=Math.min(Math.max(t/r.width,0),1)*ye;Ve(t),Te(i)})},style:{backgroundImage:`linear-gradient(to right, #00b2ff ${We}%, #0000 ${We}%)`}})]}),n("article",{children:Ne(ye)})]}),e("div",{className:N,children:[n("button",{type:"button",onClick:function(){xe(D,e=>{e.muted=!e.muted,le(e.muted)})},onFocus:e=>e.currentTarget.blur(),children:n(c,{name:oe||0===he?"muted":"volume"})}),n("input",{max:1,type:"range",step:"any",value:oe?0:he,onFocus:e=>e.currentTarget.blur(),className:x+(Z?` ${A}`:""),style:{backgroundImage:`linear-gradient(to right, #00b2ff ${oe?0:100*he}%, #fff5 ${oe?0:100*he}%)`},onChange:e=>je("volume",+e.currentTarget.value)})]}),n("div",{children:n("button",{type:"button",onClick:Se,onFocus:e=>e.currentTarget.blur(),children:n(c,{name:"pip"})})}),n("div",{children:n("button",{type:"button",onClick:Ie,onFocus:e=>e.currentTarget.blur(),children:n(c,{name:J?"unfullscreen":"fullscreen"})})}),e("div",{className:w,children:[n("button",{type:"button",onClick:function(){me(!se),we(!be),Ce(null)},onFocus:e=>e.currentTarget.blur(),children:n(c,{name:"setting"})}),e("div",{className:P,style:{display:be?void 0:"none"},children:[n("div",{onClick:()=>Ce("speed"===Pe?null:"speed"),children:"ความเร็วในการเล่น"}),"speed"===Pe&&e("ul",{children:[n("li",{style:{backgroundColor:.25===ke?"#eeee":void 0},onClick:()=>ze(.25),children:"0.25"}),n("li",{style:{backgroundColor:.5===ke?"#eeee":void 0},onClick:()=>ze(.5),children:"0.5"}),n("li",{style:{backgroundColor:.75===ke?"#eeee":void 0},onClick:()=>ze(.75),children:"0.75"}),n("li",{style:{backgroundColor:1===ke?"#eeee":void 0},onClick:()=>ze(1),children:"1"}),n("li",{style:{backgroundColor:1.25===ke?"#eeee":void 0},onClick:()=>ze(1.25),children:"1.25"}),n("li",{style:{backgroundColor:1.5===ke?"#eeee":void 0},onClick:()=>ze(1.5),children:"1.5"}),n("li",{style:{backgroundColor:1.75===ke?"#eeee":void 0},onClick:()=>ze(1.75),children:"1.75"}),n("li",{style:{backgroundColor:2===ke?"#eeee":void 0},onClick:()=>ze(2),children:"2"})]})]})]})]}),n(c,{name:te?"hide":ae?"restart":ue?"play":"pause",bigger:!0,className:p,onClick:Ee})]}),X<0&&n("div",{inert:!0,className:F,children:X.toString()},X),X>0&&n("div",{inert:!0,className:E,children:`+${X.toString()}`},X),te&&n("div",{className:I,children:n(c,{name:"loading"})}),!ne&&n("div",{className:S,children:n("button",{type:"button",onFocus:e=>e.currentTarget.blur(),onClick:()=>{re(!0),xe(D,async e=>{try{await e.play()}catch{return}})},children:n(c,{name:"play",bigger:!0})})})]})},H)}export{j as VideoPlayer};
|