From 113b8deb2881230f4109c66178b550af7880ceb5 Mon Sep 17 00:00:00 2001 From: Elyse Segebart Date: Tue, 8 Aug 2023 14:37:46 -0500 Subject: [PATCH] [+] Add skip forward/back for 15s [+] Clean up console logs [+] Add button controls for skips [+] Add images for skip button --- src/VideoPlayer.tsx | 42 ++++++--------------- src/assets/img/rotate-left-rewind.png | Bin 0 -> 925 bytes src/assets/img/rotate-left-rewind@2x.png | Bin 0 -> 1077 bytes src/assets/img/rotate-left-rewind@3x.png | Bin 0 -> 1330 bytes src/assets/img/rotate-right-forward.png | Bin 0 -> 443 bytes src/assets/img/rotate-right-forward@2x.png | Bin 0 -> 632 bytes src/assets/img/rotate-right-forward@3x.png | Bin 0 -> 858 bytes src/components/PlayPause/PlayPause.tsx | 24 +++++++++++- 8 files changed, 35 insertions(+), 31 deletions(-) create mode 100644 src/assets/img/rotate-left-rewind.png create mode 100644 src/assets/img/rotate-left-rewind@2x.png create mode 100644 src/assets/img/rotate-left-rewind@3x.png create mode 100644 src/assets/img/rotate-right-forward.png create mode 100644 src/assets/img/rotate-right-forward@2x.png create mode 100644 src/assets/img/rotate-right-forward@3x.png diff --git a/src/VideoPlayer.tsx b/src/VideoPlayer.tsx index 9e5b050..d76c80f 100644 --- a/src/VideoPlayer.tsx +++ b/src/VideoPlayer.tsx @@ -300,10 +300,8 @@ export const VideoPlayer = (props: VideoPlayerProps) => { const x: NodeJS.Timeout = setTimeout(() => { if (rewindPressCount === 4) { setRewindPressCount(0); - console.log('count reset', rewindPressCount); } else { let newCount = rewindPressCount + 1; - console.log('new rewind count', newCount); setRewindPressCount(newCount); } }, 500); @@ -312,7 +310,6 @@ export const VideoPlayer = (props: VideoPlayerProps) => { return function () { setRewindPressCount(0); - console.log('return count', rewindPressCount); clearTimeout(timeoutId as unknown as number); }; }; @@ -322,10 +319,8 @@ export const VideoPlayer = (props: VideoPlayerProps) => { const x: NodeJS.Timeout = setTimeout(() => { if (pressCount === 4) { setPressCount(0); - console.log('count reset', pressCount); } else { let newCount = pressCount + 1; - console.log('new count', newCount); setPressCount(newCount); } }, 500); @@ -334,19 +329,16 @@ export const VideoPlayer = (props: VideoPlayerProps) => { return function () { setPressCount(0); - console.log('return count', pressCount); clearTimeout(timeoutId as unknown as number); }; }; useEffect(() => { - console.log('rewing press count useEffect? ', rewindPressCount); - let skipTime = (duration * 0.0015) * rewindPressCount; - console.log('skipTime: ', skipTime); + let skipTime = (duration * 0.0012) * rewindPressCount; - if (rewindPressCount === 1) { + if (currentTime <= duration && rewindPressCount === 1) { videoRef?.current?.seek(currentTime - rewindTime); - } else if (rewindPressCount != 0 && rewindPressCount > 1) { + } else if (currentTime <= duration && rewindPressCount > 1) { videoRef?.current?.seek(currentTime - skipTime); } else { setPaused(false); @@ -354,27 +346,17 @@ export const VideoPlayer = (props: VideoPlayerProps) => { }, [rewindPressCount, currentTime]) useEffect(() => { - console.log('press count useEffect? ', pressCount); - let skipTime = (duration * 0.0015) * pressCount; - console.log('skipTime: ', skipTime); + let skipTime = (duration * 0.0012) * pressCount; - if (pressCount === 1) { + if (currentTime <= duration && pressCount === 1) { videoRef?.current?.seek(currentTime + rewindTime); - } else if (pressCount != 0 && pressCount > 1) { + } else if (currentTime <= duration && pressCount > 1) { videoRef?.current?.seek(currentTime + skipTime); } else { setPaused(false); } }, [pressCount, currentTime]) - // useEffect Listener for select button presses - useEffect(() => { - console.log( - 'EVENT TYPE AND CURRENT TIME: ', - lastEventType, - ); - }, [lastEventType]); - useEffect(() => { if (currentTime >= duration) { videoRef?.current?.seek(0); @@ -521,14 +503,14 @@ export const VideoPlayer = (props: VideoPlayerProps) => { togglePlayPause={togglePlayPause} resetControlTimeout={resetControlTimeout} showControls={showControls} - // onPressRewind={() => - // videoRef?.current?.seek(currentTime - rewindTime) - // } + onPressSkipBackward={() => + videoRef?.current?.seek(currentTime - rewindTime) + } onPressRewind={() => handleRewindPress()} onPressForward={() => handleFastForwardPress()} - // onPressForward={() => - // videoRef?.current?.seek(currentTime + rewindTime) - // } + onPressSkipForward={() => + videoRef?.current?.seek(currentTime + rewindTime) + } /> EX>4Tx04R}tkv&MmP!xqvQ>8^JLhT^pkfAzR5EXHhDi*;)X)CnqVDi#GXws0R zxHt-~1qXi?s}3&Cx;nTDg5VE`tBaGOin#HL}Hz^bcdS7h&V-yJN0jdyW16NwdUuy!hpQJZB zTJ#7Q*aj}HJDR))T187sb(Tu@lQSlo{MNFE^7ErQ}Ambxp0cNl)Gk1=A;GFAR+?fq~ z_w4-dz8C(1rb5`v09hao^ngd89|k-Htd7uUfilnp1`0QUBYEdUG2m5W zlH#!yR}pwpYztvPuYiPOeI$UI66&-sXvMP=VhV6IOn7~P6H2JFzMuo(*b}&D*q4LK zIY-cYPtZ8<5wLFrtL_`v0X9aA#XfN13EGqP+7vk_c>Snn`=Jr7Jiv6splw5*odoET zA$KPMnlt29)cK6dto~KKQF^)sBm;6SYA@$yNmwV6Mj7A)IFR1*J!k6UX0JxAfWfu= zxvPhDmo1}_c`>{I+rvJy6irD9sk%>XV{g~8@xOpu-~o7(K3tK@A*sCI1I~PM6WNXA zQc%9v;H7I0$I-aEw;}rFNnH3{sr1O#)t~7H=Y!ww;#vAK00000NkvXXu0mjf5TTi6 literal 0 HcmV?d00001 diff --git a/src/assets/img/rotate-left-rewind@2x.png b/src/assets/img/rotate-left-rewind@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..feda63bbb5b84cd2f80e0d5c8550bf9d6b2268ee GIT binary patch literal 1077 zcmV-51j_q~P)EX>4Tx04R}tkv&MmP!xqvQ>8^JLhT^pkfAzR5EXHhDi*;)X)CnqVDi#GXws0R zxHt-~1qXi?s}3&Cx;nTDg5VE`tBaGOin#HL}Hz^bcdS7h&V-yJN0jdyW16NwdUuy!hpQJZB zTJ#7Q*aj}HJDR))T_z9f2f_)7P8^%rn z%K~v9&}tGp6$Neq_$P)dK)X-eG*C8x@@r*a#s;wHG0J-&(?B5tn70+g(^z{7lRVG? zyay@{;To+X-bR~b4;WK?-vlOrq{ib0*aeP&GwJIF-T?0m{yPJFw;92pwgt=q35{<; zVt#0Ru1!WV3}6+=TCDS|W~o$y)}$%m4v>j(TBL!JX5&N#T$POzMJWyBw2LXuJAlmi zOn2GUCdq3K^Dt{txrpxuUNtPJmj)0q~Wg?;=is zLyEq7TxKvCbj-9`^QH%NtF&c$)wMz&!z2rjt&C*m#_5)y`hX4KScX3304^n&d8mZd zPrp0{yFhOQxLyrhA*@-qrj(JhfXiu0B^98@rm$4kq+2B^nRIGAIwfXX<8!5Zb_P|q zJ^EX>4Tx04R}tkv&MmP!xqvQ>8^JLhT^pkfAzR5EXHhDi*;)X)CnqVDi#GXws0R zxHt-~1qXi?s}3&Cx;nTDg5VE`tBaGOin#HL}Hz^bcdS7h&V-yJN0jdyW16NwdUuy!hpQJZB zTJ#7Q*aj}HJDR))TdP<%s|Q120KLK~!ko?V3w#6hRQje|f3v zLG%cNNr8M`Y08Vf+I?w>%R-6Ho$*z(-(C zo*Pm6a2-Gfm;&Zy^18MFJOW1KeP>7jSAlWhGSCv>-DaR4m@y=!Yk43Ya1KVuRw#N1 z?9jZ^2n+xPOXMnB0T>iLH6yi&k_iRTUSQS{xytrZ^woqug@S5CFNxvU@Ysr?*9pmg ziMGg|-Ppo5Zm^B2x{yBLwWjZ+kUSOQBYqQC@flbFb^@*9TK0t)ZyGo)t7~l~gSOwm zV_*pA(&+A#e$(=vsg7(=>uZbT3UC`phTJwuU{uC2{dK*PdE*Wz^Y~rvnC(87Lrq9EnO4Ut>}R3Jvr%t=ylB;<|Kx8 zYIr7sI_VI5RA-FRK3s@vqA87g$@>Zh?mIq=k1BMptInggBc3A;NhURsQKs5?5Ma&n zMA{vad=KOl@{^khT7Y+!R`Cb0-?60~Qs|#oy?7XSB9r_TqWzSU%ux^bNL`u_-A+vK zRYCH2wLKX{6cn;DP*O%kZe`Rmf}LPTOs=t2lo-kPeyem zPbg#yz=t@HJfo1kio>tk5%d%iMcmPxCzDYp*n|4!E+2J*jlgq_Rqc;D$(z)8TW5+3 zz#HH@<<$8xPXyDl-)g#dHNllC1Fr$+JP=&N!VS7fFubU+Xtx~r+(!9Dbt`C`3(?__ z!QIY`^s|A3Vkxa=wRG5vS%P#GxJNm$8U~%fUGxc_Q29v{j1erImjf=M&sp|Jza09c zPN+Gi!LnPcBuXs!$GB1HEdNK&oG|h zvm)z-EjJO?mkmlt<$~OtL^2I*12juylD9x?T>|lbTd}CCL+uE`>Rsohf5ydm&}Zdx o8|9nrzm>~N{9n0TM;&#*AM~GGlde~;JOBUy07*qoM6N<$f`4{icK`qY literal 0 HcmV?d00001 diff --git a/src/assets/img/rotate-right-forward.png b/src/assets/img/rotate-right-forward.png new file mode 100644 index 0000000000000000000000000000000000000000..f39ca0d12e8737e7bb9ee808ee21b2dc9bcc9d64 GIT binary patch literal 443 zcmV;s0Yv_ZP)Px$bxA})R7gw3mW@pVF${&@Z9+FGlTaoBCIKdaPEs}jz3Pl|@9c{m^&rwoRg?Jh zzcb+<)-=exYwmqjWn`g*JODV(pK=I(1Mm(YQi3wBdp)SZo|D#4=qG>|fxiMc&Ho*? zptR~E35zTz+<{P_{H?>@LfonncxjmXwR2BkoOuBlof)9MV#X z2U}>HeSZekI@>L-t)-ewm7ZI2ur>f~W20`idUanC3XP@=dvNA0q*KPN0N*-;O|Y6$}_|=xLayHs0q5oyZ5)OvQVu< lo4c8eUe)j@wA2jr@DJ(iR{qJU-GTrB002ovPDHLkV1n%K$N2yN literal 0 HcmV?d00001 diff --git a/src/assets/img/rotate-right-forward@2x.png b/src/assets/img/rotate-right-forward@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..d525abc52cff34b9b72873101e305e9ec4a187c1 GIT binary patch literal 632 zcmV-;0*C#HP)Px%GD$>1R9HvNn1M}1Aq<9llc<|`lcq5x`m1tOY@(V^yn# z!Bm$-Z zBlxiiqOA+qgX6e~8j}5>DCX8&8dlJXJ1BQILe-4179R$*CV+BNS)r;IjYZYPmU=i` zu_0z!R5`Yx0`f_IwcTgP>gK>E$ut!Z$4VQ(E7beRkk!5=+q9WPn+O}@lDr2DVMx}! z7*m9ifLi<&nFpcT;|25MIu>cT`4mwkpmvaINj+jHud)vElv1kgIKR^;GifZ9g+R~6e#vgKuANJXt^($bPFaE1(x4$=Uv zT4bfG5lZkD7xZSXx5~~ful#M{-_7?HV6S!}@NLBz}u2;Btj~4E|x0=x7QKnSPY*z0fsm$dm$OhR}?QJImB>RRh!cjm8y5;lR z)q=Btt)e)~ygHY6{pA{;k$n_U+K^Ac_?@4D`Nb>4vrNG$qnW`g6wKI5_x%NeVumS{ Sy^omy0000Px&6iGxuRA@u(nt@FoF${&xCS?-ZNeYwDPSP?-VG>}HR`1tubg~lrIdM)pt|uX? zl1u#gId+oEjhx`QIRT^mhb&V0%e5c;)_>!_-Zno)L$$kEp`^mxiO3JqdH_F*$cu>l zCf}i(RYHChkw+21@0mvxei{JA*x#+QDj=cUuL8K1V*vbcRXK9pA7cX|0`E>Go|SMG z2%!vv0o{5mpw9W*8AyZ$I^OdEAk_J325kXqlW&NEk#NPlV-rfX6D+6)h_QztqfR}j zZOPCKye%mihd@!h8zs3kWEN1pjx5=mO8|qh$cQjFGCJdkw33++jgo|CD1b56eU_%v zo>r1gGBa@2M!+I+M#DLkcreH-;nk0tM6_j_Xc*5VIZ8=p9-@AgFU2;V$V?UMzz~uN z(@Q6;G=uFJNB6o8A*0S$gs3$(vLW)D3mK^h_0Yk}XBIFlA<+PdvgNG=5m~Hw8uhvnRSl^ zz!LwR64DFTPov~1=A@ThKTYC^O33Pk`7VhEgLo?*97Wi}-6e)qcG@cL-rDt$$)^Pw zEs_rxvMtDHULH=(-dZ%;xE@N)9%K}pvfSuwho^x22a^%CI!lV@egFUf07*qoM6N<$g2~d2jQ{`u literal 0 HcmV?d00001 diff --git a/src/components/PlayPause/PlayPause.tsx b/src/components/PlayPause/PlayPause.tsx index eb01dc2..a36fd60 100644 --- a/src/components/PlayPause/PlayPause.tsx +++ b/src/components/PlayPause/PlayPause.tsx @@ -17,12 +17,16 @@ interface PlayPauseProps { showControls: boolean; onPressForward: () => void; onPressRewind: () => void; + onPressSkipForward: () => void; + onPressSkipBackward: () => void; } const play = require('../../assets/img/play.png'); const pause = require('../../assets/img/pause.png'); const rewind = require('../../assets/img/rewind.png'); const forward = require('../../assets/img/forward.png'); +const skipForward = require('../../assets/img/rotate-right-forward.png'); +const skipBackward = require('../../assets/img/rotate-left-rewind.png'); export const PlayPause = ({ animations, @@ -34,6 +38,8 @@ export const PlayPause = ({ showControls, onPressForward, onPressRewind, + onPressSkipForward, + onPressSkipBackward, }: PlayPauseProps) => { let source = paused ? play : pause; @@ -58,6 +64,14 @@ export const PlayPause = ({ ) : null} + {!disableSeekButtons ? ( + + + + ) : null} + {!disableSeekButtons ? ( + + + + ) : null} {!disableSeekButtons ? ( ) : null}