vnetwork-player/dist/vnetwork-player.cjs.production.min.js

A React component custom player support video m3u8, mp4

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;function l(e,t){return(l=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e})(e,t)}var r=function(e){var t,r;function a(){var t;return(t=e.apply(this,arguments)||this).state={hasError:!1,message:""},t}r=e,(t=a).prototype=Object.create(r.prototype),t.prototype.constructor=t,l(t,r),a.getDerivedStateFromError=function(e){return{message:e.message,hasError:!0}};var c=a.prototype;return c.componentDidCatch=function(e,t){console.error("Uncaught error:",e,t)},c.render=function(){return this.state.hasError?n.createElement("div",{className:"video-container error-container"},n.createElement("img",{className:"error-image",src:"https://raw.githubusercontent.com/an678-mhg/tiktok-clone/main/public/error.png"}),n.createElement("h1",{className:"text-sm font-semibold error-message line-clamp-1"},n.createElement("span",{style:{color:"#fff"}},"Error: ")," ",this.state.message)):this.props.children},a}(t.Component),a=function(e){try{var t=new Date(0);t.setSeconds(e);var n=t.toISOString().slice(11,19);return n.startsWith("00:0")?n.slice(4):n.startsWith("00")?n.slice(3):8===n.length&&n.startsWith("0")?n.slice(1):n}catch(e){return"0:00"}},c=[{label:"0.25x",value:.25},{label:"0.5x",value:.5},{label:"0.75x",value:.75},{label:"1x",value:1},{label:"1.25x",value:1.25},{label:"1.5x",value:1.5},{label:"2x",value:2}],i=function(e){var t;return null==(t=e.split("?"))?void 0:t[0]};function o(e){return t.createElement("svg",Object.assign({viewBox:"0 0 500 1000",fill:"currentColor",height:"1em",width:"1em"},e),t.createElement("path",{d:"M486 474c9.333 6.667 14 15.333 14 26 0 9.333-4.667 17.333-14 24L58 790c-16 10.667-29.667 12.667-41 6-11.333-6.667-17-20-17-40V242c0-20 5.667-33.333 17-40 11.333-6.667 25-4.667 41 6l428 266"}))}function u(e){return t.createElement("svg",Object.assign({viewBox:"0 0 24 24",fill:"currentColor",height:"1em",width:"1em"},e),t.createElement("path",{d:"M5 5h5V3H3v7h2zm5 14H5v-5H3v7h7zm11-5h-2v5h-5v2h7zm-2-4h2V3h-7v2h5z"}))}function s(e){return t.createElement("svg",Object.assign({viewBox:"0 0 24 24",fill:"currentColor",height:"1em",width:"1em"},e),t.createElement("path",{d:"M14 14h5v2h-3v3h-2v-5m-9 0h5v5H8v-3H5v-2m3-9h2v5H5V8h3V5m11 3v2h-5V5h2v3h3z"}))}function m(e){return t.createElement("svg",Object.assign({viewBox:"0 0 24 24",fill:"currentColor",height:"1em",width:"1em"},e),t.createElement("path",{d:"M14 19h4V5h-4M6 19h4V5H6v14z"}))}function v(e){return t.createElement("svg",Object.assign({viewBox:"0 0 512 512",fill:"currentColor",height:"1em",width:"1em"},e),t.createElement("path",{d:"M256 176a80 80 0 1080 80 80.24 80.24 0 00-80-80zm172.72 80a165.53 165.53 0 01-1.64 22.34l48.69 38.12a11.59 11.59 0 012.63 14.78l-46.06 79.52a11.64 11.64 0 01-14.14 4.93l-57.25-23a176.56 176.56 0 01-38.82 22.67l-8.56 60.78a11.93 11.93 0 01-11.51 9.86h-92.12a12 12 0 01-11.51-9.53l-8.56-60.78A169.3 169.3 0 01151.05 393L93.8 416a11.64 11.64 0 01-14.14-4.92L33.6 331.57a11.59 11.59 0 012.63-14.78l48.69-38.12A174.58 174.58 0 0183.28 256a165.53 165.53 0 011.64-22.34l-48.69-38.12a11.59 11.59 0 01-2.63-14.78l46.06-79.52a11.64 11.64 0 0114.14-4.93l57.25 23a176.56 176.56 0 0138.82-22.67l8.56-60.78A11.93 11.93 0 01209.94 26h92.12a12 12 0 0111.51 9.53l8.56 60.78A169.3 169.3 0 01361 119l57.2-23a11.64 11.64 0 0114.14 4.92l46.06 79.52a11.59 11.59 0 01-2.63 14.78l-48.69 38.12a174.58 174.58 0 011.64 22.66z"}))}function d(e){return t.createElement("svg",Object.assign({viewBox:"0 0 512 512",fill:"currentColor",height:"1em",width:"1em"},e),t.createElement("path",{d:"M232 416a23.88 23.88 0 01-14.2-4.68 8.27 8.27 0 01-.66-.51L125.76 336H56a24 24 0 01-24-24V200a24 24 0 0124-24h69.75l91.37-74.81a8.27 8.27 0 01.66-.51A24 24 0 01256 120v272a24 24 0 01-24 24zm-106.18-80zm-.27-159.86zM320 336a16 16 0 01-14.29-23.19c9.49-18.87 14.3-38 14.3-56.81 0-19.38-4.66-37.94-14.25-56.73a16 16 0 0128.5-14.54C346.19 208.12 352 231.44 352 256c0 23.86-6 47.81-17.7 71.19A16 16 0 01320 336z"}),t.createElement("path",{d:"M368 384a16 16 0 01-13.86-24C373.05 327.09 384 299.51 384 256c0-44.17-10.93-71.56-29.82-103.94a16 16 0 0127.64-16.12C402.92 172.11 416 204.81 416 256c0 50.43-13.06 83.29-34.13 120a16 16 0 01-13.87 8z"}),t.createElement("path",{d:"M416 432a16 16 0 01-13.39-24.74C429.85 365.47 448 323.76 448 256c0-66.5-18.18-108.62-45.49-151.39a16 16 0 1127-17.22C459.81 134.89 480 181.74 480 256c0 64.75-14.66 113.63-50.6 168.74A16 16 0 01416 432z"}))}function f(e){return t.createElement("svg",Object.assign({viewBox:"0 0 512 512",fill:"currentColor",height:"1em",width:"1em"},e),t.createElement("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:10,strokeWidth:32,d:"M416 432L64 80"}),t.createElement("path",{d:"M243.33 98.86a23.89 23.89 0 00-25.55 1.82l-.66.51-28.52 23.35a8 8 0 00-.59 11.85l54.33 54.33a8 8 0 0013.66-5.66v-64.49a24.51 24.51 0 00-12.67-21.71zM251.33 335.29L96.69 180.69A16 16 0 0085.38 176H56a24 24 0 00-24 24v112a24 24 0 0024 24h69.76l92 75.31a23.9 23.9 0 0025.87 1.69A24.51 24.51 0 00256 391.45v-44.86a16 16 0 00-4.67-11.3zM352 256c0-24.56-5.81-47.87-17.75-71.27a16 16 0 10-28.5 14.55C315.34 218.06 320 236.62 320 256q0 4-.31 8.13a8 8 0 002.32 6.25l14.36 14.36a8 8 0 0013.55-4.31A146 146 0 00352 256zM416 256c0-51.18-13.08-83.89-34.18-120.06a16 16 0 00-27.64 16.12C373.07 184.44 384 211.83 384 256c0 23.83-3.29 42.88-9.37 60.65a8 8 0 001.9 8.26L389 337.4a8 8 0 0013.13-2.79C411 311.76 416 287.26 416 256z"}),t.createElement("path",{d:"M480 256c0-74.25-20.19-121.11-50.51-168.61a16 16 0 10-27 17.22C429.82 147.38 448 189.5 448 256c0 46.19-8.43 80.27-22.43 110.53a8 8 0 001.59 9l11.92 11.92a8 8 0 0012.92-2.16C471.6 344.9 480 305 480 256z"}))}function p(e){return t.createElement("svg",Object.assign({viewBox:"0 0 24 24",fill:"currentColor",height:"1em",width:"1em"},e),t.createElement("path",{fill:"none",d:"M0 0h24v24H0z"}),t.createElement("path",{d:"M21 3a1 1 0 011 1v7h-2V5H4v14h6v2H3a1 1 0 01-1-1V4a1 1 0 011-1h18zm0 10a1 1 0 011 1v6a1 1 0 01-1 1h-8a1 1 0 01-1-1v-6a1 1 0 011-1h8z"}))}function h(e){return t.createElement("svg",Object.assign({fill:"currentColor",viewBox:"0 0 16 16",height:"1em",width:"1em"},e),t.createElement("path",{fillRule:"evenodd",d:"M11.354 1.646a.5.5 0 010 .708L5.707 8l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"}))}function E(e){return t.createElement("svg",Object.assign({fill:"currentColor",viewBox:"0 0 16 16",height:"1em",width:"1em"},e),t.createElement("path",{fillRule:"evenodd",d:"M4.646 1.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L10.293 8 4.646 2.354a.5.5 0 010-.708z"}))}function g(e){return t.createElement("svg",Object.assign({viewBox:"0 0 24 24",fill:"currentColor",height:"1em",width:"1em"},e),t.createElement("path",{d:"M11.628 16.186l-2.047-2.14 6.791-5.953 1.21 1.302zm8.837 6.047c2.14-2.14 3.535-5.117 3.535-8.466 0-6.604-5.395-12-12-12s-12 5.396-12 12c0 3.35 1.302 6.326 3.535 8.466l1.674-1.675c-1.767-1.767-2.79-4.093-2.79-6.79A9.568 9.568 0 0112 4.185a9.568 9.568 0 019.581 9.581c0 2.605-1.116 5.024-2.79 6.791z"}))}function b(e){return t.createElement("svg",Object.assign({viewBox:"0 0 24 24",fill:"currentColor",height:"1em",width:"1em"},e),t.createElement("path",{d:"M14.5 13.5h2v-3h-2M18 14a1 1 0 01-1 1h-.75v1.5h-1.5V15H14a1 1 0 01-1-1v-4a1 1 0 011-1h3a1 1 0 011 1m-7 5H9.5v-2h-2v2H6V9h1.5v2.5h2V9H11m8-5H5c-1.11 0-2 .89-2 2v12a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2z"}))}function y(e){return t.createElement("svg",Object.assign({viewBox:"0 0 24 24",fill:"currentColor",height:"1em",width:"1em"},e),t.createElement("path",{d:"M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2M4 12h4v2H4v-2m10 6H4v-2h10v2m6 0h-4v-2h4v2m0-4H10v-2h10v2z"}))}function S(e){return t.createElement("svg",Object.assign({fill:"currentColor",viewBox:"0 0 16 16",height:"1em",width:"1em"},e),t.createElement("path",{d:"M12.736 3.97a.733.733 0 011.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 01-1.065.02L3.217 8.384a.757.757 0 010-1.06.733.733 0 011.047 0l3.052 3.093 5.4-6.425a.247.247 0 01.02-.022z"}))}var N=function(e){var t=e.setSettingsType,l=e.currentQuality,r=e.currentSpeed,a=e.currentSubtitle,c=e.haveQuality,i=e.haveSubtitle;return n.createElement("div",{className:"opacity-animation settings-content scale-in-bl w-full"},n.createElement("div",{onClick:function(){return t("playspeed")},className:"main-settings cursor-pointer "},n.createElement("div",{className:"main-settings-content"},n.createElement(g,{fontSize:20,className:"mr-3"}),n.createElement("p",{className:"text-sm font-semibold"},"Play speed")),n.createElement("div",{className:"main-settings-content"},n.createElement("p",{className:"text-sm font-semibold line-clamp-1 mr-3"},r),n.createElement(E,{fontSize:20}))),c&&n.createElement("div",{onClick:function(){return t("quality")},className:"main-settings-content justify-between cursor-pointer p-2 "},n.createElement("div",{className:"main-settings-content"},n.createElement(b,{fontSize:22,className:"mr-3"}),n.createElement("p",{className:"text-sm font-semibold"},"Quality")),n.createElement("div",{className:"main-settings-content"},n.createElement("p",{className:"text-sm font-semibold line-clamp-1 mr-3"},l),n.createElement(E,{fontSize:20}))),i&&n.createElement("div",{onClick:function(){return t("subtitle")},className:"main-settings-content justify-between cursor-pointer p-2"},n.createElement("div",{className:"main-settings-content"},n.createElement(y,{fontSize:22,className:"mr-3"}),n.createElement("p",{className:"text-sm font-semibold"},"Subtitle")),n.createElement("div",{className:"main-settings-content"},n.createElement("p",{className:"text-sm font-semibold line-clamp-1 mr-3"},a),n.createElement(E,{fontSize:20}))))},w=function(e){var t=e.setSettingsType,l=e.currentPlaySpeed,r=e.handleChangePlaySpeed;return n.createElement("div",{className:"opacity-animation settings-content scale-in-bl w-full"},n.createElement("div",{onClick:function(){return t("main")},className:"main-settings-content  p-2 cursor-pointer"},n.createElement(h,{fontSize:20,className:"mr-3"}),n.createElement("p",{className:"text-sm font-semibold"},"Play speed")),n.createElement("div",null,null==c?void 0:c.map((function(e,t){return n.createElement("div",{className:"p-2 text-sm font-semibold  main-settings-content cursor-pointer",key:null==e?void 0:e.value,onClick:function(){return r(t,null==e?void 0:e.value)}},n.createElement("div",{className:"icon-20px mr-3"},l===t&&n.createElement(S,{fontSize:20})),n.createElement("p",null,null==e?void 0:e.label))}))))},C=function(e){var t=e.setSettingsType,l=e.source,r=e.currentSource,a=e.handleChangeSource;return n.createElement("div",{className:"overflow-y-auto opacity-animation settings-content scale-in-bl w-full"},n.createElement("div",{onClick:function(){return t("main")},className:"main-settings-content p-2 cursor-pointer"},n.createElement(h,{fontSize:20,className:"mr-3"}),n.createElement("p",{className:"text-sm font-semibold"},"Quality")),n.createElement("div",null,null==l?void 0:l.map((function(e,t){return n.createElement("div",{onClick:function(){return a(t)},className:"p-2 text-sm font-semibold main-settings-content cursor-pointer",key:null==e?void 0:e.url},n.createElement("div",{className:"icon-20px mr-3"},r===t&&n.createElement(S,{fontSize:20})),n.createElement("p",null,null==e?void 0:e.label))}))))},k=function(e){var t=e.currentSubtitle,l=e.handleChangeSubtitle,r=e.setSettingsType,a=e.subtitle,c=e.handleTurnOffSubtitle;return n.createElement("div",{className:"overflow-y-auto opacity-animation settings-content scale-in-bl w-full"},n.createElement("div",{onClick:function(){return r("main")},className:"main-settings-content  p-2 cursor-pointer"},n.createElement(h,{fontSize:20,className:"mr-3"}),n.createElement("p",{className:"text-sm font-semibold"},"Subtitle")),n.createElement("div",null,n.createElement("div",{onClick:c,className:"p-2 text-sm font-semibold main-settings-content cursor-pointer"},n.createElement("div",{className:"icon-20px mr-3"},null===t&&n.createElement(S,{fontSize:20})),n.createElement("p",null,"Off")),null==a?void 0:a.map((function(e,r){return n.createElement("div",{onClick:function(){return l(r)},className:"p-2 text-sm font-semibold  main-settings-content cursor-pointer",key:null==e?void 0:e.url},n.createElement("div",{className:"icon-20px mr-3"},t===r&&n.createElement(S,{fontSize:20})),n.createElement("p",null,null==e?void 0:e.lang))}))))},x=function(){return n.createElement("svg",{viewBox:"25 25 50 50",className:"loading"},n.createElement("circle",{cx:"50",cy:"50",r:"20"}))},z=function(e){var l=e.value,r=e.onChange,a=e.min,c=void 0===a?0:a,i=e.max,o=void 0===i?100:i,u=e.className,s=void 0===u?"":u,m=e.color,v=void 0===m?"#ef4444":m,d=e.live,f=void 0!==d&&d,p=e.onDragEnd,h=e.onPreview,E=e.children,g=void 0===E?n.createElement(n.Fragment,null):E,b=t.useRef(null),y=t.useState(!1),S=y[0],N=y[1],w=function(e){if(b.current&&!f){var t=b.current.getBoundingClientRect();return Math.min(Math.max((e-t.left)/t.width*(o-c)+c,c),o)}},C=function(e){var t=w(e);r(t)},k=function(e){S&&C(e)},x=function(){N(!1),p&&p(),document.body.style.userSelect="auto"},z=function(e){f||(N(!0),C(e)),document.body.style.userSelect="none"};t.useEffect((function(){if(S){var e=function(e){return k(e.clientX)},t=function(e){return k(e.touches[0].clientX)};return document.addEventListener("mousemove",e),document.addEventListener("touchmove",t),document.addEventListener("mouseup",x),document.addEventListener("touchend",x),function(){document.removeEventListener("mousemove",e),document.removeEventListener("touchmove",t),document.removeEventListener("mouseup",x),document.removeEventListener("touchend",x),p&&p()}}}),[S]);var M=(l-c)/(o-c)*100;return n.createElement("div",{ref:b,className:"progress-vnet "+s,onClick:function(e){return C(e.clientX)},onMouseDown:function(e){return z(e.clientX)},onTouchStart:function(e){return z(e.touches[0].clientX)},onMouseMove:function(e){return l=w(t=e.clientX),r=null==(n=b.current)?void 0:n.getBoundingClientRect(),void(h&&h(l,(t-(null==r?void 0:r.left))/(null==r?void 0:r.width)));var t,n,l,r},onMouseLeave:function(){h&&h(null,null),p&&p()}},n.createElement("div",{className:"progress-gray"},n.createElement("div",{className:"progress-main",style:{width:f?"100%":M+"%",backgroundColor:v}})),g,!f&&n.createElement("div",{className:"progress-dot",style:{backgroundColor:v,left:"calc("+M+"% - 5px)"}}))},M=["color","subtitle","playerRef","className","poster","source","live","autoPlay","Hls"],P=function(e){var l,r,h,E,g,b,y=e.color,S=e.subtitle,P=e.playerRef,L=e.className,O=e.poster,A=e.source,T=e.live,j=e.autoPlay,F=e.Hls,R=function(e,t){if(null==e)return{};var n,l,r={},a=Object.keys(e);for(l=0;l<a.length;l++)t.indexOf(n=a[l])>=0||(r[n]=e[n]);return r}(e,M),H=t.useRef(null);if(!A)throw H.current&&(null==(b=H.current)||b.destroy()),new Error("Missing src props");var q=A,B=t.useRef(null),I=t.useRef(null),V=t.useRef(null),D=t.useState(0),X=D[0],_=D[1],Q=t.useState([]),U=Q[0],W=Q[1],J=t.useState(3),K=J[0],G=J[1],Y=t.useState(!0),Z=Y[0],$=Y[1],ee=t.useState(!1),te=ee[0],ne=ee[1],le=t.useState(0),re=le[0],ae=le[1],ce=t.useState(!1),ie=ce[0],oe=ce[1],ue=t.useState(JSON.parse(localStorage.getItem("vnetwork-player-muted"))||!1),se=ue[0],me=ue[1],ve=t.useState(!0),de=ve[0],fe=ve[1],pe=t.useState(!1),he=pe[0],Ee=pe[1],ge=t.useState("main"),be=ge[0],ye=ge[1],Se=t.useState(0),Ne=Se[0],we=Se[1],Ce=t.useState(Number(localStorage.getItem("vnetwork-player-volume"))||100),ke=Ce[0],xe=Ce[1],ze=t.useState(!1),Me=ze[0],Pe=ze[1],Le=t.useState({time:null,left:null}),Oe=Le[0],Ae=Le[1],Te=y||"#ef4444",je=P||I,Fe=function(){ne((function(e){return!e}))},Re=function(){var e;if(null!=B&&B.current){var t,n=B.current;null!=(e=document)&&e.pictureInPictureElement&&(null==(t=document)||t.exitPictureInPicture().catch(console.error)),document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement?document.exitFullscreen?document.exitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen():n.requestFullscreen?n.requestFullscreen():n.mozRequestFullScreen?n.mozRequestFullScreen():n.webkitRequestFullscreen?n.webkitRequestFullscreen():n.msRequestFullscreen&&n.msRequestFullscreen()}},He=function(){me((function(e){return!e})),localStorage.setItem("vnetwork-player-muted",JSON.stringify(!se))},qe=function(){var e,t,n,l;null!=H&&H.current&&(null==H||null==(e=H.current)||e.destroy()),W("string"==typeof q?[{label:"Default",url:q}]:q),"string"==typeof q?null==je||null==(t=je.current)||t.setAttribute("src",q):(_((null==q?void 0:q.length)-1),null==je||null==(n=je.current)||n.setAttribute("src",null==q||null==(l=q[(null==q?void 0:q.length)-1])?void 0:l.url))},Be=function(e){null!==je&&null!==(null==je?void 0:je.current)&&(Pe(!0),xe(e),localStorage.setItem("vnetwork-player-volume",JSON.stringify(e)),je.current.volume=e/100)},Ie=function(){Ae({time:null,left:null}),Pe(!1)};return t.useEffect((function(){null!==je&&null!==(null==je?void 0:je.current)&&(je.current.volume=(ke<=0?0:ke)/100)}),[ke]),t.useEffect((function(){var e;if(!(!te||!Z||he||Me||null!=Oe&&Oe.left))return e=setTimeout((function(){$(!1)}),3e3),function(){e&&clearTimeout(e)}}),[Z,te,he,Me]),t.useEffect((function(){var e=function(){oe((function(e){return!e}))};return document.addEventListener("fullscreenchange",e),function(){document.removeEventListener("fullscreenchange",e)}}),[]),t.useEffect((function(){if(S&&S.length>0){var e,t,n,l;if(null===Ne)return;var r=null==je||null==(e=je.current)?void 0:e.querySelector("track");r&&r.remove();var a=document.createElement("track");a.src=null==S||null==(t=S[Ne])?void 0:t.url,a.label=null==S||null==(n=S[Ne])?void 0:n.lang,a.default=!0,null==je||null==(l=je.current)||l.appendChild(a)}}),[Ne,X]),t.useEffect((function(){var e,t,n,l,r,a="string"==typeof q?null==(e=i(q))?void 0:e.split(".")[(null==q||null==(t=q.split("."))?void 0:t.length)-1]:null==(n=i(null==q||null==(l=q[0])?void 0:l.url))?void 0:n.split(".")[(null==q||null==(r=q[0])||null==(r=r.url)||null==(r=r.split("."))?void 0:r.length)-1];return"mp4"===a?qe():"m3u8"===a?function(){if(!F)throw Error("To use video type m3u8 try install `npm i hls.js` and pass props Hls");if(null!=je&&je.current){if(!F.isSupported())throw Error("Not support hls");var e;null!=H&&H.current&&(null==H||null==(e=H.current)||e.destroy()),H.current=new F;var t,n=null==H?void 0:H.current;n.on(F.Events.MANIFEST_PARSED,(function(e,t){var l,r,a,c;if("string"!=typeof q)return W(q);(null==t||null==(l=t.levels)?void 0:l.length)!==(null==U?void 0:U.length)&&0!==(null==U?void 0:U.length)||(W(null==t||null==(r=t.levels)?void 0:r.map((function(e){var t;return{label:(null==e?void 0:e.height)+"p",url:null==e||null==(t=e.url)?void 0:t[0]}}))),_((null==t||null==(a=t.levels)?void 0:a.length)-1),n.startLevel=(null==t||null==(c=t.levels)?void 0:c.length)-1)})),n.attachMedia(null==je?void 0:je.current),n.loadSource("string"==typeof q?q:null==q||null==(t=q[X])?void 0:t.url),n.startLoad()}}():qe(),function(){var e;null!=H&&H.current&&(null==H||null==(e=H.current)||e.destroy())}}),[q,null==U?void 0:U.length,null==H?void 0:H.current]),t.useEffect((function(){null!==je&&null!==(null==je?void 0:je.current)&&(je.current.muted=se)}),[se]),t.useEffect((function(){j&&null!==je&&null!==(null==je?void 0:je.current)&&(je.current.muted=!0,je.current.addEventListener("loadedmetadata",(function(){je.current.play()})),me(!0))}),[j]),t.useEffect((function(){var e=function(e){var t=e.target;if("INPUT"!==t.tagName&&"TEXTAREA"!==t.tagName&&!t.isContentEditable)switch(["Space","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","f","m"].includes(e.code)&&e.preventDefault(),e.code){case"Space":Fe();break;case"ArrowLeft":je.current&&(je.current.currentTime-=5);break;case"ArrowRight":je.current&&(je.current.currentTime+=5);break;case"ArrowUp":Be(Math.min(ke+5,100));break;case"ArrowDown":Be(Math.max(ke-5,0));break;case"KeyF":Re();break;case"KeyM":He()}};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[te,ke,Fe,Be,Re,He]),t.useEffect((function(){var e,t;te||$(!0),te?null==je||null==(e=je.current)||e.play():null==je||null==(t=je.current)||t.pause()}),[te]),t.useEffect((function(){return function(){var e;null!=H&&H.current&&(null==H||null==(e=H.current)||e.destroy())}}),[]),n.createElement("div",{ref:B,onMouseMove:function(){return $(!0)},onMouseLeave:function(){Me||$(!1)},onClick:function(){return $(!0)},className:"video-container"},n.createElement("video",Object.assign({ref:je,className:"video "+(L||""),poster:O||"",onPlay:function(){return ne(!0)},onPause:function(){return ne(!1)},onTimeUpdate:function(){var e;Me||ae((null==je||null==(e=je.current)?void 0:e.currentTime)||0)},onCanPlay:function(){return fe(!1)},onWaiting:function(){return fe(!0)},onLoad:function(){return fe(!0)},onLoadedMetadata:function(){return fe(!0)}},R)),de&&n.createElement("div",{className:"center-item-absolute"},n.createElement(x,null)),n.createElement("div",{onClick:function(e){e.stopPropagation(),Ee(!1),$(!1)},style:{display:Z?"flex":"none"},className:"control-container opacity-animation"},!de&&n.createElement("div",{onClick:Fe,className:"center-item-absolute cursor-pointer"},n.createElement(te?m:o,{fontSize:60})),he&&n.createElement("div",{onClick:function(e){return Ee(!1)},className:"settings-container"},n.createElement("div",{className:"w-full",onClick:function(e){return e.stopPropagation()}},"main"===be?n.createElement(N,{currentQuality:null==U||null==(l=U[X])?void 0:l.label,currentSpeed:null==c||null==(r=c[K])?void 0:r.label,setSettingsType:ye,currentSubtitle:"number"==typeof Ne?null==S||null==(h=S[Ne])?void 0:h.lang:"Off",haveSubtitle:Boolean(S),haveQuality:(null==q?void 0:q.length)>0}):"playspeed"===be?n.createElement(w,{handleChangePlaySpeed:function(e,t){G(e),null!==je&&null!==(null==je?void 0:je.current)&&(je.current.playbackRate=t),Ee(!1),ye("main")},currentPlaySpeed:K,setSettingsType:ye}):"quality"===be?n.createElement(C,{handleChangeSource:function(e){var t;if(null!=je&&je.current&&X!==e){_(e);var n=null==je||null==(t=je.current)?void 0:t.querySelector("track");if(n&&n.remove(),null!=H&&H.current){var l,r=null==H?void 0:H.current;r.startLevel=e,r.loadSource(null==U||null==(l=U[e])?void 0:l.url),r.startLoad()}else{var a,c;null==je||null==(a=je.current)||a.setAttribute("src",null==U||null==(c=U[e])?void 0:c.url)}var i=re;ae(i),null!==je&&null!==(null==je?void 0:je.current)&&(je.current.currentTime=i,je.current.play()),Ee(!1),ye("main")}},currentSource:X,setSettingsType:ye,source:U}):n.createElement(k,{currentSubtitle:Ne,setSettingsType:ye,handleChangeSubtitle:function(e){we(e),Ee(!1),ye("main")},subtitle:S,handleTurnOffSubtitle:function(){var e;we(null);var t=null==je||null==(e=je.current)?void 0:e.querySelector("track");t&&t.remove(),Ee(!1),ye("main")}}))),n.createElement("div",{onClick:function(e){return e.stopPropagation()},className:"w-full"},n.createElement(z,{onDragEnd:Ie,value:re,onChange:function(e){null!==je&&null!==(null==je?void 0:je.current)&&(Pe(!0),ae(e),V.current&&clearTimeout(V.current),V.current=setTimeout((function(){je.current.currentTime=e}),100))},min:0,max:null==je||null==(E=je.current)?void 0:E.duration,live:T,color:Te,onPreview:function(e,t){Ae({time:e,left:t})},className:"tooltip-container"},!T&&Number(null==Oe?void 0:Oe.time)&&null!=Oe&&Oe.left?n.createElement("div",{style:{left:100*(null==Oe?void 0:Oe.left)+"%",top:-30},className:"tooltip"},n.createElement("p",null,a(Number(null==Oe?void 0:Oe.time)))):""),n.createElement("div",{onMouseDown:function(e){return e.stopPropagation()},className:"main-control-container"},n.createElement("div",{className:"main-settings-content"},n.createElement("div",{onClick:Fe,className:"cursor-pointer mr-3 main-settings-content tooltip-container"},n.createElement(te?m:o,{fontSize:28}),n.createElement("div",{className:"tooltip opacity-animation"},"Play")),n.createElement("div",{className:"main-settings-content"},n.createElement("div",{className:"main-settings-content volume-container"},n.createElement("div",{onClick:He,className:"cursor-pointer mr-3 main-settings-content tooltip-container"},n.createElement(se?f:d,{fontSize:25}),n.createElement("div",{className:"tooltip"},"Volume")),n.createElement(z,{onDragEnd:Ie,value:ke,onChange:Be,min:0,max:100,live:!1,color:Te,className:"volume mr-3 width-animation"})),T?n.createElement("div",{className:"text-sm font-semibold cursor-pointer live-button"},"Live"):n.createElement("div",{className:"time"},a(re)," / ",a(null==je||null==(g=je.current)?void 0:g.duration)))),n.createElement("div",{className:"main-settings-content"},n.createElement("div",{className:"tooltip-container main-settings-content"},n.createElement(v,{onClick:function(){return Ee(!he)},className:"cursor-pointer mr-3",fontSize:23}),n.createElement("div",{className:"tooltip"},"Settings")),n.createElement("div",{className:"tooltip-container main-settings-content"},n.createElement(p,{onClick:function(){if(je.current){var e=je.current;document.pictureInPictureEnabled||"webkitSetPresentationMode"in e||"mozRequestPictureInPicture"in e?document.pictureInPictureElement?document.exitPictureInPicture().catch(console.error):document.pictureInPictureEnabled?e.requestPictureInPicture().catch(console.error):"webkitSetPresentationMode"in e?e.webkitSetPresentationMode("picture-in-picture"===e.webkitPresentationMode?"inline":"picture-in-picture"):"mozRequestPictureInPicture"in e&&e.mozRequestPictureInPicture().catch(console.error):console.warn("Picture-in-Picture không được hỗ trợ trong trình duyệt này.")}},className:"cursor-pointer mr-3",fontSize:23}),n.createElement("div",{className:"tooltip"},"PIP")),n.createElement("div",{onClick:Re,className:"cursor-pointer main-settings-content tooltip-container"},ie?n.createElement(s,{fontSize:30}):n.createElement(u,{fontSize:23}),n.createElement("div",{className:"tooltip"},"Fullscreen")))))))},L=function(e){var l=e.children,r=t.useState("undefined"!=typeof window),a=r[0],c=r[1];return t.useEffect((function(){c(!0)}),[]),a?l:n.createElement(n.Fragment,null)};exports.default=function(e){return n.createElement("div",{id:"vnetwork-player"},n.createElement(r,null,n.createElement(L,null,n.createElement(P,Object.assign({},e)))))};
//# sourceMappingURL=vnetwork-player.cjs.production.min.js.map