https://teach.cats4me.net/_next/static/chunks/7005-deca6a6927af9bb0.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7005],{27005:function(e,n,t){t.d(n,{Y:function(){return y}});var r=t(26042),u=t(69396),s=t(85893),a=t(67294),i=t(30381),l=t.n(i),o=t(86010),c=t(85518);var d=function(e){var n=e.onPlay;return(0,s.jsx)("div",{className:"middleController",children:(0,s.jsx)("button",{type:"button",className:"middleIconButton iconPlay",onClick:n,children:(0,s.jsx)("span",{className:"hidden",children:"\uc7ac\uc0dd"})})})},m=98;var v=function(e){var n=e.state,t=e.controller,r=e.previewVideo,u=e.bookMarks,i=(0,a.useRef)(),o=(0,a.useRef)(),c=(0,a.useState)(0),d=c[0],v=c[1],f=(0,a.useState)(null),p=f[0],h=f[1],b=(0,a.useState)(0),k=b[0],g=b[1],x=(0,a.useMemo)((function(){return!n.duration||n.scrubbing?k:n.currentTime/n.duration}),[n,k]),E=(0,a.useCallback)((function(){return i.current.getBoundingClientRect()}),[]),j=(0,a.useCallback)((function(e,n){return Math.min(Math.max(0,e-n.left),n.width)/n.width}),[]),y=(0,a.useCallback)((function(e){if(u&&!(u.length<1)){var n=!0,t=!1,r=void 0;try{for(var s,a=u[Symbol.iterator]();!(n=(s=a.next()).done);n=!0){var i=s.value;i.seconds<e&&h(i.title)}}

1catch(l){t=!0,r=l}finally{try{n||null==a.return||a.return()}finally{if(t)throw r}}}}),[u]),C=(0,a.useCallback)((function(e,n){var t=e-n.left;t<m/2?o.current.style.left="0px":t>n.width-m/2?o.current.style.left=n.width-m+"px":o.current.style.left=t-m/2+"px"}),[]),N=(0,a.useCallback)((function(e){var t=E(),u=Number(j(e.pageX||e.changedTouches[0].pageX,t)*n.duration).toFixed(0);v(u),r.current.currentTime=u,y(u),C(e.pageX||e.changedTouches[0].pageX,t)}),[n,r,E,j,y,C]);(0,a.useEffect)((function(){r.current.currentTime=d}),[d,r]);var F,S=(0,a.useCallback)((function(e){t.scrub(),N(e)}),[t,N]),w=(0,a.useCallback)((function(e){if(n.scrubbing&&.5===e.pressure){var t=E(),r=j(e.pageX,t);g(r),N(e)}}),[n,E,j,N]),L=(0,a.useCallback)((function(e){if(n.scrubbing){var r=E(),u=j(e.pageX||e.changedTouches[0].pageX,r),s=n.duration*u;g(u),t.seek(s)}}),[n,t,E,j]);return(0,a.useEffect)((function(){return document.addEventListener("pointermove",w),document.addEventListener("pointerup",L),function(){document.removeEventListener("pointermove",w),document.removeEventListener("pointerup",L)}}),[w,L]),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"progressHover",ref:i,onPointerDown:S,onPointerMove:N,onTouchStart:S,onTouchMove:N,onTouchEnd:L,children:(0,s.jsx)("div",{className:"progress",children:(0,s.jsx)("div",{className:"progressFilled",style:{width:"".concat(100*x,"%")}})})}),(0,s.jsxs)("div",{ref:o,className:"snapShotContainer",children:[(0,s.jsxs)("div",{className:"snapShotImg",children:[(0,s.jsx)("video",{ref:r}),(0,s.jsx)("p",{className:"snapShotTime",children:(F=d,l().utc(1e3*F).format("mm:ss"))})]}),(0,s.jsx)("p",{className:"snapShotname",children:(null===p||void 0===p?void 0:p.length)>10?p.substring(0,10)+"..":p})]})]})};var f=function(e){var n=e.state,t=e.onVolumeChange,r=(0,a.useRef)(),u=(0,a.useState)(!1),i=u[0],l=u[1],o=(0,a.useCallback)((function(){return r.current.getBoundingClientRect()}),[]),c=(0,a.useCallback)((function(e,n){return Math.min(Math.max(0,e-n.left),80)/80}),[]),d=(0,a.useCallback)((function(e){t(e)}),[t]),m=(0,a.useCallback)((function(){l(!0)}),[]),v=(0,a.useCallback)((function(e){if(i){var n=o(),t=c(e.pageX,n);d(t)}}),[i,o,c,d]),f=(0,a.useCallback)((function(e){if(i){var n=o(),t=c(e.pageX,n);d(t),l(!1)}}),[i,o,c,d]);return(0,a.useEffect)((function(){return document.addEventListener("pointermove",v),document.addEventListener("pointerup",f),function(){document.removeEventListener("pointermove",v),document.removeEventListener("pointerup",f)}}),[v,f]),(0,s.jsx)("div",{ref:r,className:"volumeSlider",onPointerDown:m,children:(0,s.jsx)("div",{className:"volumeSliderHandle",style:{left:"".concat(74*n.volume,"px")}})})};var p=function(e){var n=e.state,t=e.passedTime,r=e.totalTime,u=e.expandedPlaybackRate,a=e.onPlay,i=e.onMute,l=e.onVolumeChange,c=e.onRateShow,d=e.onRateChange,m=e.onFullScreen;return(0,s.jsxs)("div",{className:"settings",children:[(0,s.jsxs)("div",{className:"bottomLeftController",children:[(0,s.jsx)("button",{type:"button",className:(0,o.Z)("bottomIconButton",n.ended?"iconReplay":n.paused?"iconPlay":"iconStop"),onClick:a,children:(0,s.jsx)("span",{className:"hidden",children:"\uc7ac\uc0dd"})}),(0,s.jsxs)("div",{className:"timeArea",children:[(0,s.jsx)("span",{className:"timeCurrent",children:t})," / ",r]}),(0,s.jsxs)("div",{className:"volumeArea",children:[(0,s.jsx)("button",{type:"button",className:(0,o.Z)("iconMute",0===n.volume?"":n.volume<=.5?"volumeLow":"volumeHigh"),onClick:i,children:(0,s.jsx)("span",{className:"hidden",children:"\uc74c\uc18c\uac70"})}),(0,s.jsx)("div",{className:"volumePanel",children:(0,s.jsx)(f,{state:n,onVolumeChange:l})})]})]}),(0,s.jsxs)("div",{className:"bottomRightController",children:[(0,s.jsxs)("div",{className:"rate",children:[(0,s.jsx)("button",{type:"button",onClick:c,children:(0,s.jsxs)("span",{children:["X ",n.rate%1===0?n.rate+".0":n.rate]})}),(0,s.jsx)("div",{className:(0,o.Z)("rateOption",u&&"active"),style:{maxHeight:"172px",overflow:"auto"},children:(0,s.jsx)("ul",{children:["0.8","1.0","1.2","1.3","1.4","1.6","1.8","2.0"].map((function(e){return(0,s.jsxs)("li",{onClick:function(){return d(e)},children:["X ",e]},e)}))})})]}),(0,s.jsx)("button",{type:"button",className:"icoFullScreen",onClick:m,children:(0,s.jsx)("span",{className:"hidden",children:"\uc804\uccb4\ud654\uba74"})})]})]})};var h=function(e){var n=e.bookMark,t=e.isActive,r=e.seekBookMark;return(0,s.jsx)("li",{className:(0,o.Z)(t&&"active"),children:(0,s.jsxs)("a",{className:"thumbStartPoint",onClick:function(e){e.preventDefault(),r(n.seconds)},children:[(0,s.jsx)("div",{className:"thumbImg",children:(0,s.jsx)("img",{src:n.thumbnailFileUrl+"?w=176",alt:n.title,onError:function(e){return e.target.src=n.thumbnailFileUrl}})}),(0,s.jsxs)("div",{className:"thumbDetail",children:[(0,s.jsx)("div",{className:"listName",children:n.title}),(0,s.jsx)("span",{className:"listTime",children:n.formattedTime})]})]})})};var b=function(e){var n=e.passedTime,t=e.bookMarks,r=e.seekBookMark,u=(0,a.useCallback)((function(e){var r,u,s;return t[e+1]?(null===(r=t[e])||void 0===r?void 0:r.seconds)<=n&&n<(null===(u=t[e+1])||void 0===u?void 0:u.seconds):(null===(s=t[e])||void 0===s?void 0:s.seconds)<=n}),[n,t]);return(0,s.jsxs)("div",{className:"ShortcutsArea",children:[(0,s.jsx)("div",{className:"header",children:"\uad6c\uac04 \ubc14\ub85c\uac00\uae30"}),(0,s.jsx)("div",{className:"thumbnailList",children:(0,s.jsx)("ol",{children:t.map((function(e,n){return(0,s.jsx)(h,{bookMark:e,isActive:u(n),seekBookMark:r},n)}))})})]})},k=t(19049),g=13,x=32,E=37,j=39;var y=function(e){var n=e.src,t=(e.title,e.poster),i=e.indexList,m=(0,a.useRef)(),f=(0,k.Z)(n),h=f.refVideo,y=f.state,C=f.controller,N=(0,k.Z)(n).refVideo,F=(0,a.useState)(!1),S=F[0],w=F[1],L=(0,a.useState)(!1),R=L[0],T=L[1],M=function(e){return l().utc(1e3*e).format("HH:mm:ss")},q=y.currentTime,Z=y.duration,P=(0,a.useMemo)((function(){return!i||i.length<1?[]:i.map((function(e){return(0,u.Z)((0,r.Z)({},e),{seconds:e.milliseconds/1e3,formattedTime:M(e.milliseconds/1e3)})}))}),[i]),B=(0,a.useCallback)((function(){y.paused?C.play():C.pause()}

1),[y,C]),V=(0,a.useCallback)((function(){y.muted?C.unMute():C.mute()}),[y,C]),X=(0,a.useCallback)((function(e){C.volume(e)}),[C]),D=(0,a.useCallback)((function(){w((function(e){return!e}))}),[]),I=(0,a.useCallback)((function(e){C.playBackRate(e),w((function(e){return!e}))}),[C]),z=(0,a.useCallback)((function(){var e=h.current,n=m.current,t=!!(document.fullscreenEnabled||document.mozFullScreenEnabled||document.msFullscreenEnabled||document.webkitSupportsFullscreen||document.webkitFullscreenEnabled||e.webkitSupportsFullscreen||document.createElement("video").webkitRequestFullScreen),r=!!(document.fullScreen||document.webkitIsFullScreen||document.mozFullScreen||document.msFullscreenElement||document.fullscreenElement);if(!t)return console.error("Not supported full screen."),!1;if(isNaN(e.duration))return!1;if(c.tq){if(e.requestFullscreen)e.requestFullscreen();else if(e.mozRequestFullScreen)e.mozRequestFullScreen();else if(e.webkitRequestFullScreen)e.webkitRequestFullScreen();else if(e.webkitEnterFullscreen)e.webkitEnterFullscreen();else{if(!e.msRequestFullscreen)return!1;e.msRequestFullscreen()}return!0}if(r){if(document.exitFullscreen)document.exitFullscreen();else if(document.mozCancelFullScreen)document.mozCancelFullScreen();else if(document.webkitCancelFullScreen)document.webkitCancelFullScreen();else{if(!document.msExitFullscreen)return!1;document.msExitFullscreen()}return T(!1),!0}if(n.requestFullscreen)n.requestFullscreen();else if(n.mozRequestFullScreen)n.mozRequestFullScreen();else if(n.webkitRequestFullScreen)n.webkitRequestFullScreen();else{if(!n.msRequestFullscreen)return!1;n.msRequestFullscreen()}return T(!0),!0}),[h]),A=(0,a.useCallback)((function(e){h.current.currentTime=e}),[h]),O=(0,a.useCallback)((function(e){e.preventDefault(),e.keyCode!==g&&e.keyCode!==x||B(),e.keyCode===E&&C.rwd(),e.keyCode===j&&C.fwd()}),[C,B]);return(0,a.useEffect)((function(){return document.addEventListener("keydown",O),function(){return document.removeEventListener("keydown",O)}}),[O]),(0,s.jsxs)("div",{className:"playerContainer",style:(0,r.Z)({},P.length<1&&{paddingRight:0}),children:[(0,s.jsxs)("div",{className:(0,o.Z)("playerWrapper",R&&"playerBigMode",y.paused&&"active"),ref:m,style:{position:"relative",paddingBottom:"56.25%",height:0,overflow:"hidden"},children:[(0,s.jsx)("video",{ref:h,preload:"auto",crossOrigin:"annoymous",poster:t,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%"}}),(0,s.jsxs)("div",{className:"controlsWrapper",children:[(0,s.jsx)("div",{className:"topController"}),y.paused&&(0,s.jsx)(d,{onPlay:B}),(0,s.jsxs)("div",{className:"bottomController",children:[(0,s.jsx)(v,{state:y,controller:C,previewVideo:N,bookMarks:P}),(0,s.jsx)(p,{state:y,passedTime:M(q),totalTime:M(Z),expandedPlaybackRate:S,onPlay:B,onMute:V,onVolumeChange:X,onRateShow:D,onRateChange:I,onFullScreen:z})]})]})]}),P.length>0&&(0,s.jsx)(b,{passedTime:q,bookMarks:P,seekBookMark:A})]})}},19049:function(e,n,t){t.d(n,{Z:function(){return i},c:function(){return l}});var r=t(10253),u=t(67294),s=t(20610),a=t(93041);function i(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:l.VIDEO,t=(0,u.useRef)(),i=(0,r.Z)((0,s.Z)({paused:!0,playing:!1,muted:!1,volume:1,rate:1,currentTime:0,duration:0,ended:!1,scrubbing:!1}),2),o=i[0],c=i[1],d=(0,u.useRef)(!1),m=(0,u.useMemo)((function(){return{play:function(){var e=t.current;if(e&&!d.current){var n=e.play();if("object"===typeof n){d.current=!0;var r=function(){d.current=!1};n.then(r,r)}}},pause:function(){var e=t.current;if(e&&!d.current)return e.pause()},stop:function(){t.current&&(t.current.pause(),t.current.currentTime=0)},mute:function(){var e=t.current;e&&(e.muted=!0)},unMute:function(){var e=t.current;e&&(e.muted=!1)},volume:function(e){var n=t.current;n&&(e=Math.min(1,Math.max(0,e)),n.volume=e,n.muted=0===e)},seek:function(e){var n=t.current;isNaN(e)||(n.currentTime=e)},playBackRate:function(e){t.current.playbackRate=e},rwd:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:10,n=t.current;n.currentTime=n.currentTime-e},fwd:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:10,n=t.current;n.currentTime=n.currentTime+e},scrub:function(){c({scrubbing:!0})}}}),[c]);return(0,u.useEffect)((function(){var r=t.current;if(r){if(r.volume=1,n===l.AUDIO)r.src=e,r.load();else if(a.Z.isSupported()){var u=new a.Z;u.loadSource(e),u.attachMedia(r)}else r.canPlayType("application/vnd.apple.mpegurl")&&(r.src=e);var s=function(){c({paused:!1,playing:!0,ended:!1})},i=function(){c({paused:!0,playing:!1})},o=function(){r.muted?c({volume:0,muted:r.muted}):c({volume:r.volume,muted:r.muted})},d=function(){c({currentTime:r.currentTime,duration:r.duration})},m=function(){c({rate:r.playbackRate})},v=function(){c({duration:r.duration})},f=function(){},p=function(){},h=function(){c({scrubbing:!1})},b=function(){},k=function(){},g=function(){c({ended:!0})};return r.addEventListener("play",s),r.addEventListener("pause",i),r.addEventListener("volumechange",o),r.addEventListener("timeupdate",d),r.addEventListener("ratechange",m),r.addEventListener("loadedmetadata",v),r.addEventListener("ended",g),r.addEventListener("canplay",f),r.addEventListener("canplaythrough",p),r.addEventListener("seeking",b),r.addEventListener("seeked",h),r.addEventListener("waiting",k),r.addEventListener("ended",g),function(){r.removeEventListener("play",s),r.removeEventListener("pause",i),r.removeEventListener("volumechange",o),r.removeEventListener("timeupdate",d),r.removeEventListener("ratechange",m),r.removeEventListener("loadedmetadata",v),r.removeEventListener("ended",g),r.removeEventListener("canplay",f),r.removeEventListener("canplaythrough",p),r.removeEventListener("seeking",b),r.removeEventListener("seeked",h),r.removeEventListener("waiting",k),r.removeEventListener("ended",g)}}}),[e,n,c]),(0,u.useEffect)((function(){c({paused:!0,playing:!1,muted:!1,volume:1,rate:1,currentTime:0,duration:0,ended:!1,scrubbing:!1})}),[e,c]),{refVideo:t,controller:m,state:o}}

1var l={VIDEO:0,AUDIO:1}},20610:function(e,n,t){t.d(n,{Z:function(){return s}});var r=t(82670),u=t(67294);function s(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=(0,u.useState)(e),t=n[0],s=n[1],a=(0,u.useCallback)((function(e){s((function(n){return Object.assign({},n,(0,r.Z)(e,Function)?e(n):e)}))}),[]);return[t,a]}}}]);