@tiwz/react-video-player 1.0.1 → 1.0.2

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 (3) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/index.mjs +1 -1
  3. package/package.json +1 -1
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"}),"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)};
1
+ "use strict";var e=require("react/jsx-runtime"),t=require("react");function n({name:t,bigger:n,className:r,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:r,style:{display:"block",width:(n?"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 r="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),[ne,re]=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),n=t%60;return`${Math.floor(t/60).toString().padStart(2,"0")}:${n.toString().padStart(2,"0")}`}async function Pe(e,t){e.current&&await t(e.current)}t.useEffect(()=>{Y(!1),re(!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(n=>{const r="+"===e?n<0?10:n+10:n>0?-10:n-10;return t.currentTime+="+"===e?10:-10,r}),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,n=t.requestFullscreen||t.webkitRequestFullscreen||t.webkitEnterFullscreen||t.mozRequestFullScreen||t.msRequestFullscreen;if(n)try{await n.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,n=>{"time"===e?(he(t),n.currentTime=t):(ce(t),n.volume=t,n.muted&&(n.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 n(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 n=e>0?-10:e-10;return t.currentTime-=10,n}),Ce();break;case"ArrowRight":W(e=>{const n=e<0?10:e+10;return t.currentTime+=10,n}),Ce()}})}return B(e),document.addEventListener("fullscreenchange",t),!e&&window.addEventListener("keydown",n),()=>{document.removeEventListener("fullscreenchange",t),!e&&window.removeEventListener("keydown",n)}},[N,Me,Ce]);const Fe=t.useCallback(function(e,t){let n=null,r=0;return function(...i){const o=Date.now();r?(n&&clearTimeout(n),n=setTimeout(()=>{o-r>=t&&(e.apply(this,i),r=o)},t-(o-r))):(e.apply(this,i),r=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 n=0;n<e.length;n++)if(e.start(n)<=me&&e.end(n)>me){t=e.end(n);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(),n=t-H.current;(n>0&&n<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),onCanPlay:()=>J(!1),onWaiting:()=>J(!0),onPlaying:()=>J(!1),onLoadStart:()=>re(!1),onEnded:()=>re(!0),onPlay:()=>{re(!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?r: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 n=t.getBoundingClientRect(),r=e.clientX-n.left,i=Math.min(Math.max(r/n.width,0),1)*ue;_e(r),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(n,{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(n,{name:"pip"})})}),e.jsx("div",{children:e.jsx("button",{type:"button",onClick:Le,onFocus:e=>e.currentTarget.blur(),children:e.jsx(n,{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(n,{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(n,{name:K?"hide":ne?"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(n,{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(n,{name:"play",bigger:!0})})})]})},N)};
package/dist/index.mjs CHANGED
@@ -1 +1 @@
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};
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),onCanPlay:()=>ie(!1),onWaiting:()=>ie(!0),onPlaying:()=>ie(!1),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};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tiwz/react-video-player",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "author": "tiwz",
5
5
  "repository": {
6
6
  "type": "git",