mirror of
https://github.com/mediacms-io/mediacms.git
synced 2025-11-08 16:38:54 -05:00
feat: Change autoplay icons and improve switch on/off functionality
This commit is contained in:
Yiannis Christodoulou
parent
f73c3dde89
commit
ed07da1783
9550
frontend-tools/video-js/package-lock.json
generated
9550
frontend-tools/video-js/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -26,8 +26,9 @@
|
||||
"eslint-plugin-react-hooks": "^5.2.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.19",
|
||||
"globals": "^16.0.0",
|
||||
"prettier": "^3.6.0",
|
||||
"sass": "^1.89.2",
|
||||
"vite": "^4.5.14",
|
||||
"prettier": "^3.6.0"
|
||||
"vite-plugin-svgr": "^4.5.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -163,6 +163,13 @@ html {
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.vjs-autoplay-toggle.vjs-control.vjs-button,
|
||||
.vjs-picture-in-picture-control.vjs-control.vjs-button,
|
||||
.vjs-settings-button.vjs-control.vjs-button {
|
||||
margin-right: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.vjs-next-video-control .vjs-icon-placeholder {
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
@ -636,7 +643,6 @@ html {
|
||||
min-width: 32px !important;
|
||||
height: 32px !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 2px !important;
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
color: inherit !important;
|
||||
|
||||
@ -0,0 +1,5 @@
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="512" height="512">
|
||||
<path d="M0 0 C-0.433125 -1.34191406 -0.433125 -1.34191406 -0.875 -2.7109375 C-6.09881941 -19.72462712 -6.09881941 -19.72462712 -2.3125 -27.4375 C1.29181858 -31.43147464 3.46705328 -32.82692537 8.875 -33.4375 C14.03070714 -33.2328311 17.93685338 -31.15240594 21.5335083 -27.40014648 C23.66136068 -23.91757826 24.57955587 -20.26587831 25.65136719 -16.34765625 C25.89725082 -15.47567596 26.14313446 -14.60369568 26.39646912 -13.70529175 C27.2054943 -10.82676544 28.00161602 -7.94485738 28.796875 -5.0625 C29.35500554 -3.05984239 29.9136265 -1.05732139 30.47271729 0.94506836 C31.64172338 5.13985929 32.80426538 9.33637539 33.96240234 13.53417969 C35.4484126 18.91810368 36.95112239 24.29719868 38.4587822 29.6750946 C39.61531529 33.80806512 40.76260682 37.9435572 41.90714264 42.0798645 C42.45761974 44.06464245 43.01107173 46.04859777 43.56752777 48.03170776 C44.34322212 50.80117643 45.10633141 53.57381326 45.86621094 56.34765625 C46.09886154 57.16855743 46.33151215 57.98945862 46.57121277 58.8352356 C47.59705962 62.62991732 48.176954 65.24156958 47 69 C45.81664062 68.60167969 44.63328125 68.20335937 43.4140625 67.79296875 C33.50285812 64.43929386 33.50285812 64.43929386 23.5 61.375 C20.39323933 60.47106772 17.43540407 59.39868209 14.44799805 58.15771484 C8.82088038 55.88360588 3.10070191 53.9811806 -2.66796875 52.1015625 C-4.88243287 51.36800634 -7.09661753 50.63360608 -9.31054688 49.8984375 C-12.75747879 48.7562647 -16.20570129 47.61908096 -19.65893555 46.49609375 C-23.02131141 45.40051226 -26.37617963 44.28412069 -29.73046875 43.1640625 C-30.75665817 42.83572418 -31.7828476 42.50738586 -32.84013367 42.1690979 C-38.8081268 40.15360247 -43.85724468 37.90349374 -48 33 C-49.65112454 28.04662639 -49.85967138 23.0360638 -47.8125 18.1875 C-44.28613752 13.93154528 -41.72539829 11.87594769 -36.1875 11.25 C-34.7927696 11.14988885 -33.39699314 11.06087116 -32 11 C-54.85980825 -3.1888465 -78.4236758 -13.92190954 -105 -19 C-105.85609863 -19.16371094 -106.71219727 -19.32742187 -107.59423828 -19.49609375 C-157.80780316 -28.63441501 -211.96431397 -17.01851006 -254.15771484 11.70703125 C-264.11424607 18.69481145 -273.20855898 26.61318597 -282 35 C-282.85207031 35.79921875 -283.70414062 36.5984375 -284.58203125 37.421875 C-319.39827456 70.97705752 -340.05957057 121.17321165 -341.203125 169.29296875 C-341.6999446 213.00992883 -331.35878926 256.33505042 -305 292 C-304.23300781 293.04929687 -303.46601563 294.09859375 -302.67578125 295.1796875 C-296.92777875 302.91176629 -290.6483079 310.03510601 -284 317 C-283.19949219 317.85335938 -282.39898437 318.70671875 -281.57421875 319.5859375 C-248.02211966 354.40104523 -197.82293435 375.05966216 -149.70703125 376.203125 C-101.74434051 376.74815558 -55.686853 363.36601425 -18 333 C-17.22197021 332.37424072 -17.22197021 332.37424072 -16.42822266 331.73583984 C-3.32663468 321.12642312 7.98984734 309.57341376 18 296 C19.17369141 294.40865234 19.17369141 294.40865234 20.37109375 292.78515625 C28.27874793 281.69799467 34.90252963 269.85737279 40.515625 257.453125 C42.61872387 253.9774774 45.13502505 251.62525172 49.02734375 250.3203125 C53.51185664 249.86177335 56.82337593 250.00661124 61 252 C63.92114444 254.52639519 65.81999243 256.34791468 66.24707031 260.26757812 C66.45726449 267.43443975 65.16699816 272.250095 61.75 278.5 C61.30180908 279.35239258 60.85361816 280.20478516 60.3918457 281.08300781 C49.45751118 301.51082012 35.96044985 319.26840103 20 336 C18.69482422 337.38445312 18.69482422 337.38445312 17.36328125 338.796875 C10.43460553 345.95819238 2.96274935 352.03893626 -5 358 C-5.54462891 358.41604492 -6.08925781 358.83208984 -6.65039062 359.26074219 C-44.17163578 387.86672172 -89.26992844 401.71764638 -136 404 C-137.20269531 404.06058594 -138.40539062 404.12117188 -139.64453125 404.18359375 C-185.00823853 405.19431855 -233.27467767 390.71419219 -270 364 C-270.96679688 363.30519531 -271.93359375 362.61039062 -272.9296875 361.89453125 C-292.18274455 347.76728809 -309.9943212 331.42120794 -324 312 C-324.763125 310.9584375 -325.52625 309.916875 -326.3125 308.84375 C-360.63176435 260.70144862 -375.43162826 201.38995398 -366.50683594 142.76025391 C-360.87779847 109.34350824 -348.93888053 76.63183443 -329 49 C-328.30390625 48.030625 -327.6078125 47.06125 -326.890625 46.0625 C-312.75625176 26.81569389 -296.42128948 9.0057376 -277 -5 C-275.9584375 -5.763125 -274.916875 -6.52625 -273.84375 -7.3125 C-199.47029629 -60.33119968 -95.2464143 -65.31685486 0 0 Z " fill="#000000" transform="translate(398,79)" data-index="0" style="opacity: 1; visibility: visible; fill: rgb(255, 255, 255);"></path>
|
||||
<path d="M0 0 C4.18837807 3.96234919 4.89755141 7.95927796 5.08607101 13.54927063 C5.14433569 16.74327008 5.12521169 19.93385094 5.10053635 23.12812805 C5.1086722 24.89119262 5.11935846 26.65424698 5.1323967 28.4172821 C5.15970453 33.19430005 5.14916372 37.97053882 5.13012218 42.74757004 C5.11490847 47.75180375 5.12902587 52.75597173 5.13843918 57.76020813 C5.14934842 66.16324311 5.13498692 74.56596147 5.10639572 82.96894836 C5.07374323 92.67753759 5.0843207 102.38537078 5.11735415 112.09394169 C5.14460107 120.43643944 5.148415 128.77870987 5.13272214 137.12123775 C5.12337832 142.10084357 5.12209215 147.08009426 5.14194107 152.05967712 C5.15930158 156.7418562 5.14720104 161.42306264 5.11257553 166.10513687 C5.1046567 167.8211722 5.10689564 169.53728969 5.12015152 171.25329208 C5.22232503 185.82580632 5.22232503 185.82580632 1.52173996 190.39497375 C-1.68912059 193.42357168 -5.26600437 194.86981975 -9.67583084 194.9210968 C-15.14842993 193.43700213 -18.75525341 190.77326931 -21.67583084 185.9210968 C-22.30782986 182.39123631 -22.30782986 182.39123631 -22.31747818 178.41317749 C-22.3259837 177.67795048 -22.33448922 176.94272346 -22.34325248 176.18521684 C-22.36546134 173.732181 -22.35210491 171.28067095 -22.33867264 168.82759094 C-22.34708871 167.06467608 -22.35761511 165.30177021 -22.37009048 163.53887939 C-22.39713655 158.7577657 -22.39243829 153.97717389 -22.38038993 149.1960175 C-22.37325654 145.20241911 -22.38175934 141.2089171 -22.39029533 137.21532625 C-22.41024663 127.79302406 -22.4046795 118.37097559 -22.38261795 108.94868469 C-22.36025518 99.23274755 -22.37785196 89.51747487 -22.41566724 79.80160052 C-22.44691091 71.45489094 -22.45481414 63.10838695 -22.44371349 54.76162618 C-22.43722876 49.77863543 -22.43921746 44.79602806 -22.46303749 39.81308174 C-22.48429866 35.12683927 -22.4763001 30.44153365 -22.44594383 25.75535011 C-22.43961946 24.03769333 -22.44347004 22.31996371 -22.45835495 20.60235977 C-22.57452963 6.01168613 -22.57452963 6.01168613 -18.80798721 1.44232178 C-13.02605712 -3.88628368 -6.52576834 -4.20130252 0 0 Z " fill="#000000" transform="translate(328.67583084106445,160.0789031982422)" data-index="1" style="opacity: 1; visibility: visible; fill: rgb(255, 255, 255);"></path>
|
||||
<path d="M0 0 C4.18837807 3.96234919 4.89755141 7.95927796 5.08607101 13.54927063 C5.14433569 16.74327008 5.12521169 19.93385094 5.10053635 23.12812805 C5.1086722 24.89119262 5.11935846 26.65424698 5.1323967 28.4172821 C5.15970453 33.19430005 5.14916372 37.97053882 5.13012218 42.74757004 C5.11490847 47.75180375 5.12902587 52.75597173 5.13843918 57.76020813 C5.14934842 66.16324311 5.13498692 74.56596147 5.10639572 82.96894836 C5.07374323 92.67753759 5.0843207 102.38537078 5.11735415 112.09394169 C5.14460107 120.43643944 5.148415 128.77870987 5.13272214 137.12123775 C5.12337832 142.10084357 5.12209215 147.08009426 5.14194107 152.05967712 C5.15930158 156.7418562 5.14720104 161.42306264 5.11257553 166.10513687 C5.1046567 167.8211722 5.10689564 169.53728969 5.12015152 171.25329208 C5.22232503 185.82580632 5.22232503 185.82580632 1.52173996 190.39497375 C-1.68912059 193.42357168 -5.26600437 194.86981975 -9.67583084 194.9210968 C-15.14842993 193.43700213 -18.75525341 190.77326931 -21.67583084 185.9210968 C-22.30782986 182.39123631 -22.30782986 182.39123631 -22.31747818 178.41317749 C-22.3259837 177.67795048 -22.33448922 176.94272346 -22.34325248 176.18521684 C-22.36546134 173.732181 -22.35210491 171.28067095 -22.33867264 168.82759094 C-22.34708871 167.06467608 -22.35761511 165.30177021 -22.37009048 163.53887939 C-22.39713655 158.7577657 -22.39243829 153.97717389 -22.38038993 149.1960175 C-22.37325654 145.20241911 -22.38175934 141.2089171 -22.39029533 137.21532625 C-22.41024663 127.79302406 -22.4046795 118.37097559 -22.38261795 108.94868469 C-22.36025518 99.23274755 -22.37785196 89.51747487 -22.41566724 79.80160052 C-22.44691091 71.45489094 -22.45481414 63.10838695 -22.44371349 54.76162618 C-22.43722876 49.77863543 -22.43921746 44.79602806 -22.46303749 39.81308174 C-22.48429866 35.12683927 -22.4763001 30.44153365 -22.44594383 25.75535011 C-22.43961946 24.03769333 -22.44347004 22.31996371 -22.45835495 20.60235977 C-22.57452963 6.01168613 -22.57452963 6.01168613 -18.80798721 1.44232178 C-13.02605712 -3.88628368 -6.52576834 -4.20130252 0 0 Z " fill="#000000" transform="translate(200.67583084106445,160.0789031982422)" data-index="2" style="opacity: 1; visibility: visible; fill: rgb(255, 255, 255);"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.9 KiB |
@ -0,0 +1,4 @@
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="512" height="512">
|
||||
<path d="M0 0 C-0.433125 -1.34191406 -0.433125 -1.34191406 -0.875 -2.7109375 C-6.09881941 -19.72462712 -6.09881941 -19.72462712 -2.3125 -27.4375 C1.29181858 -31.43147464 3.46705328 -32.82692537 8.875 -33.4375 C14.03070714 -33.2328311 17.93685338 -31.15240594 21.5335083 -27.40014648 C23.66136068 -23.91757826 24.57955587 -20.26587831 25.65136719 -16.34765625 C25.89725082 -15.47567596 26.14313446 -14.60369568 26.39646912 -13.70529175 C27.2054943 -10.82676544 28.00161602 -7.94485738 28.796875 -5.0625 C29.35500554 -3.05984239 29.9136265 -1.05732139 30.47271729 0.94506836 C31.64172338 5.13985929 32.80426538 9.33637539 33.96240234 13.53417969 C35.4484126 18.91810368 36.95112239 24.29719868 38.4587822 29.6750946 C39.61531529 33.80806512 40.76260682 37.9435572 41.90714264 42.0798645 C42.45761974 44.06464245 43.01107173 46.04859777 43.56752777 48.03170776 C44.34322212 50.80117643 45.10633141 53.57381326 45.86621094 56.34765625 C46.09886154 57.16855743 46.33151215 57.98945862 46.57121277 58.8352356 C47.59705962 62.62991732 48.176954 65.24156958 47 69 C45.81664062 68.60167969 44.63328125 68.20335937 43.4140625 67.79296875 C33.50285812 64.43929386 33.50285812 64.43929386 23.5 61.375 C20.39323933 60.47106772 17.43540407 59.39868209 14.44799805 58.15771484 C8.82088038 55.88360588 3.10070191 53.9811806 -2.66796875 52.1015625 C-4.88243287 51.36800634 -7.09661753 50.63360608 -9.31054688 49.8984375 C-12.75747879 48.7562647 -16.20570129 47.61908096 -19.65893555 46.49609375 C-23.02131141 45.40051226 -26.37617963 44.28412069 -29.73046875 43.1640625 C-30.75665817 42.83572418 -31.7828476 42.50738586 -32.84013367 42.1690979 C-38.8081268 40.15360247 -43.85724468 37.90349374 -48 33 C-49.65112454 28.04662639 -49.85967138 23.0360638 -47.8125 18.1875 C-44.28613752 13.93154528 -41.72539829 11.87594769 -36.1875 11.25 C-34.7927696 11.14988885 -33.39699314 11.06087116 -32 11 C-54.85980825 -3.1888465 -78.4236758 -13.92190954 -105 -19 C-105.85609863 -19.16371094 -106.71219727 -19.32742187 -107.59423828 -19.49609375 C-157.80780316 -28.63441501 -211.96431397 -17.01851006 -254.15771484 11.70703125 C-264.11424607 18.69481145 -273.20855898 26.61318597 -282 35 C-282.85207031 35.79921875 -283.70414062 36.5984375 -284.58203125 37.421875 C-319.39827456 70.97705752 -340.05957057 121.17321165 -341.203125 169.29296875 C-341.6999446 213.00992883 -331.35878926 256.33505042 -305 292 C-304.23300781 293.04929687 -303.46601563 294.09859375 -302.67578125 295.1796875 C-296.92777875 302.91176629 -290.6483079 310.03510601 -284 317 C-283.19949219 317.85335938 -282.39898437 318.70671875 -281.57421875 319.5859375 C-248.02211966 354.40104523 -197.82293435 375.05966216 -149.70703125 376.203125 C-101.74434051 376.74815558 -55.686853 363.36601425 -18 333 C-17.22197021 332.37424072 -17.22197021 332.37424072 -16.42822266 331.73583984 C-3.32663468 321.12642312 7.98984734 309.57341376 18 296 C19.17369141 294.40865234 19.17369141 294.40865234 20.37109375 292.78515625 C28.27874793 281.69799467 34.90252963 269.85737279 40.515625 257.453125 C42.61872387 253.9774774 45.13502505 251.62525172 49.02734375 250.3203125 C53.51185664 249.86177335 56.82337593 250.00661124 61 252 C63.92114444 254.52639519 65.81999243 256.34791468 66.24707031 260.26757812 C66.45726449 267.43443975 65.16699816 272.250095 61.75 278.5 C61.30180908 279.35239258 60.85361816 280.20478516 60.3918457 281.08300781 C49.45751118 301.51082012 35.96044985 319.26840103 20 336 C18.69482422 337.38445312 18.69482422 337.38445312 17.36328125 338.796875 C10.43460553 345.95819238 2.96274935 352.03893626 -5 358 C-5.54462891 358.41604492 -6.08925781 358.83208984 -6.65039062 359.26074219 C-44.17163578 387.86672172 -89.26992844 401.71764638 -136 404 C-137.20269531 404.06058594 -138.40539062 404.12117188 -139.64453125 404.18359375 C-185.00823853 405.19431855 -233.27467767 390.71419219 -270 364 C-270.96679688 363.30519531 -271.93359375 362.61039062 -272.9296875 361.89453125 C-292.18274455 347.76728809 -309.9943212 331.42120794 -324 312 C-324.763125 310.9584375 -325.52625 309.916875 -326.3125 308.84375 C-360.63176435 260.70144862 -375.43162826 201.38995398 -366.50683594 142.76025391 C-360.87779847 109.34350824 -348.93888053 76.63183443 -329 49 C-328.30390625 48.030625 -327.6078125 47.06125 -326.890625 46.0625 C-312.75625176 26.81569389 -296.42128948 9.0057376 -277 -5 C-275.9584375 -5.763125 -274.916875 -6.52625 -273.84375 -7.3125 C-199.47029629 -60.33119968 -95.2464143 -65.31685486 0 0 Z " fill="#323232" transform="translate(398,79)" data-index="0" style="opacity: 1; visibility: visible; fill: rgb(255, 255, 255);"></path>
|
||||
<path d="M0 0 C1.08539063 0.62712891 2.17078125 1.25425781 3.2890625 1.90039062 C6.66140114 3.85392707 10.01885562 5.83129856 13.375 7.8125 C15.40288047 8.99740458 17.43150112 10.18104352 19.4609375 11.36328125 C22.42667849 13.09187201 25.39135908 14.82209892 28.35205078 16.55932617 C35.47696839 20.7346186 42.65913896 24.79671647 49.875 28.8125 C59.10431402 33.94881389 68.24736973 39.21462535 77.35546875 44.5625 C84.48028808 48.73494321 91.66059452 52.79720458 98.875 56.8125 C107.48490622 61.60759924 116.04712909 66.47628023 124.5625 71.4375 C126.05910156 72.30761719 126.05910156 72.30761719 127.5859375 73.1953125 C147.54165057 84.865964 147.54165057 84.865964 150.9375 95.75390625 C152.51324773 103.1683621 151.54358037 110.38266142 147.375 116.8125 C141.54916371 123.07300125 134.33956556 126.88675269 126.875 130.875 C124.44776528 132.19288245 122.02471526 133.5183806 119.6015625 134.84375 C118.99200714 135.17601089 118.38245178 135.50827179 117.75442505 135.8506012 C111.85151223 139.07656365 106.04498742 142.45933783 100.25 145.875 C92.17884901 150.62120511 84.05684762 155.25976931 75.875 159.8125 C67.6529741 164.388164 59.4891857 169.04820748 51.375 173.8125 C42.24116153 179.17548772 33.0325033 184.38708251 23.77661133 189.53613281 C15.11351153 194.36798849 6.53779888 199.34132671 -2.01171875 204.37109375 C-3.42324219 205.20060547 -3.42324219 205.20060547 -4.86328125 206.046875 C-5.68868408 206.53381836 -6.51408691 207.02076172 -7.36450195 207.52246094 C-14.39629888 211.53542292 -21.33469121 212.24126953 -29.30078125 210.08984375 C-36.89414359 206.93764123 -40.92094081 201.95604272 -44.625 194.8125 C-45.78498377 191.33254868 -45.77313263 188.21573303 -45.77217102 184.59614563 C-45.77768605 183.48595771 -45.77768605 183.48595771 -45.7833125 182.35334176 C-45.79435073 179.86616943 -45.79819342 177.37903887 -45.80200195 174.8918457 C-45.80826654 173.11130134 -45.81491333 171.33075829 -45.82191467 169.55021667 C-45.84295933 163.69624747 -45.85331792 157.84227799 -45.86328125 151.98828125 C-45.86732875 149.97293776 -45.87144567 147.95759441 -45.87563133 145.94225121 C-45.89468444 136.47342694 -45.90891483 127.00461047 -45.9172433 117.53577071 C-45.92701446 106.6071614 -45.95333037 95.6787547 -45.99374419 84.75021678 C-46.02391115 76.30254104 -46.03871276 67.85492335 -46.04202431 59.40719479 C-46.04437428 54.36213933 -46.05332781 49.31730029 -46.07848549 44.27230263 C-46.10178107 39.52394432 -46.10599343 34.77594469 -46.09572411 30.02754402 C-46.09522898 28.28771521 -46.10154243 26.54786866 -46.11528015 24.80809402 C-46.23736451 8.42631994 -46.23736451 8.42631994 -41.625 1.8125 C-28.94670806 -10.86579194 -13.95712382 -8.31582441 0 0 Z M-19.625 21.8125 C-19.625 75.2725 -19.625 128.7325 -19.625 183.8125 C-16.03958981 182.37833593 -12.97730209 180.98765532 -9.65234375 179.1171875 C-8.68490234 178.57449219 -7.71746094 178.03179687 -6.72070312 177.47265625 C-5.67849609 176.88355469 -4.63628906 176.29445313 -3.5625 175.6875 C-1.91604492 174.76130859 -1.91604492 174.76130859 -0.23632812 173.81640625 C8.57840092 168.84909988 17.36332595 163.82985968 26.14239502 158.79986572 C34.50668168 154.00762522 42.89562813 149.26195819 51.3125 144.5625 C61.3874155 138.93640169 71.41992896 133.24071922 81.43017578 127.50048828 C86.7051868 124.47682502 91.98315406 121.45833392 97.26156616 118.44061279 C99.07351493 117.40444196 100.88504303 116.36753871 102.6965332 115.33056641 C108.90013648 111.78298756 115.11545529 108.26053706 121.375 104.8125 C118.54072371 101.76064792 115.75942939 99.68168503 112.140625 97.6328125 C111.10405762 97.04105225 110.06749023 96.44929199 108.99951172 95.83959961 C107.88592285 95.21190674 106.77233398 94.58421387 105.625 93.9375 C104.4541575 93.27102263 103.28375377 92.60377391 102.11376953 91.93579102 C100.31112444 90.9067038 98.5082372 89.87807226 96.70401001 88.85176086 C90.86082003 85.5275201 85.0525935 82.14456055 79.25 78.75 C77.26563691 77.59112544 75.2812619 76.43227128 73.296875 75.2734375 C70.33649279 73.54345805 67.37625418 71.81323305 64.41601562 70.08300781 C61.44434495 68.34643164 58.47230626 66.61048808 55.5 64.875 C54.51281982 64.29854736 53.52563965 63.72209473 52.50854492 63.12817383 C44.13616893 58.24479673 35.73557787 53.41114 27.33251953 48.58081055 C21.55905242 45.25369115 15.80664597 41.8946566 10.08203125 38.484375 C9.47707321 38.12423309 8.87211517 37.76409119 8.24882507 37.39303589 C5.33992689 35.66013449 2.43408931 33.92249635 -0.46801758 32.17822266 C-1.52013428 31.54964355 -2.57225098 30.92106445 -3.65625 30.2734375 C-5.02620117 29.45045166 -5.02620117 29.45045166 -6.42382812 28.61083984 C-10.73912842 26.18660998 -15.1979281 24.02603595 -19.625 21.8125 Z " fill="#999999" transform="translate(224.625,154.1875)" data-index="1" style="opacity: 1; visibility: visible; fill: rgb(255, 255, 255);"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.3 KiB |
@ -1,4 +1,6 @@
|
||||
import videojs from 'video.js';
|
||||
import autoPlayIconUrl from '../../assets/icons/autoplay-video-js-play.svg';
|
||||
import autoPauseIconUrl from '../../assets/icons/autoplay-video-js-pause.svg';
|
||||
|
||||
const Button = videojs.getComponent('Button');
|
||||
|
||||
@ -36,9 +38,9 @@ class AutoplayToggleButton extends Button {
|
||||
|
||||
// Set initial icon state directly
|
||||
if (this.isAutoplayEnabled) {
|
||||
this.iconSpan.innerHTML = `<span style="font-size: 1.2em; color: #ff4444;">●</span>`;
|
||||
this.iconSpan.innerHTML = `<img src="${autoPlayIconUrl}" alt="Autoplay on" style="width: 26px; height: 26px;" />`;
|
||||
} else {
|
||||
this.iconSpan.innerHTML = `<span style="font-size: 1.2em; color: #ccc;">○</span>`;
|
||||
this.iconSpan.innerHTML = `<img src="${autoPauseIconUrl}" alt="Autoplay off" style="width: 26px; height: 26px;" />`;
|
||||
}
|
||||
|
||||
// Create control text span
|
||||
@ -65,13 +67,7 @@ class AutoplayToggleButton extends Button {
|
||||
// After fade-out complete, update innerHTML and fade back in
|
||||
setTimeout(() => {
|
||||
if (this.isAutoplayEnabled) {
|
||||
this.iconSpan.innerHTML = `<span style="transform: inherit !important; margin: 20px 0 0; font-size: 1.2em; color: #ff4444;">
|
||||
<svg width="198" height="100" viewBox="0 0 198 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="18" width="180" height="64" rx="32" fill="white"/>
|
||||
<rect x="98" width="100" height="100" rx="50" fill="white"/>
|
||||
<path d="M133 69L163 50L133 31V69ZM138.455 59.0929V40.9071L152.773 50L138.455 59.0929Z" fill="#1C1B1F"/>
|
||||
</svg>
|
||||
</span>`;
|
||||
this.iconSpan.innerHTML = `<img src="${autoPlayIconUrl}" alt="Autoplay on" style="width: 26px; height: 26px;" />`;
|
||||
if (this.el()) {
|
||||
this.el().title = 'Autoplay is on';
|
||||
this.el().setAttribute('aria-label', 'Autoplay is on');
|
||||
@ -79,13 +75,7 @@ class AutoplayToggleButton extends Button {
|
||||
if (controlText) controlText.textContent = 'Autoplay is on';
|
||||
}
|
||||
} else {
|
||||
this.iconSpan.innerHTML = `<span style="transform: inherit !important; margin: 20px 0 0; font-size: 1.2em; color: #ccc;">
|
||||
<svg width="198" height="100" viewBox="0 0 198 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="18" y="18" width="180" height="64" rx="32" fill="white"/>
|
||||
<rect width="100" height="100" rx="50" fill="white"/>
|
||||
<path d="M52.1429 65V35H65V65H52.1429ZM35 65V35H47.8571V65H35ZM56.4286 60.7143H60.7143V39.2857H56.4286V60.7143ZM39.2857 60.7143H43.5714V39.2857H39.2857V60.7143Z" fill="#1C1B1F"/>
|
||||
</svg>
|
||||
</span>`;
|
||||
this.iconSpan.innerHTML = `<img src="${autoPauseIconUrl}" alt="Autoplay off" style="width: 26px; height: 26px;" />`;
|
||||
if (this.el()) {
|
||||
this.el().title = 'Autoplay is off';
|
||||
this.el().setAttribute('aria-label', 'Autoplay is off');
|
||||
|
||||
@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
import { ReactComponent as PlayIcon } from '/autoplay-video-js-play.svg';
|
||||
import { ReactComponent as PauseIcon } from '/autoplay-video-js-pause.svg';
|
||||
|
||||
const AutoplayToggleButton = ({ isAutoplayEnabled, onToggle, className = '' }) => {
|
||||
const handleClick = () => {
|
||||
onToggle(!isAutoplayEnabled);
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
className={`vjs-autoplay-toggle vjs-control vjs-button ${className}`}
|
||||
type="button"
|
||||
title={isAutoplayEnabled ? 'Autoplay is on' : 'Autoplay is off'}
|
||||
aria-label={isAutoplayEnabled ? 'Autoplay is on' : 'Autoplay is off'}
|
||||
onClick={handleClick}
|
||||
>
|
||||
<span aria-hidden="true" className="vjs-autoplay-icon">
|
||||
{isAutoplayEnabled ? (
|
||||
<PlayIcon style={{ width: '26px', height: '26px' }} />
|
||||
) : (
|
||||
<PauseIcon style={{ width: '26px', height: '26px' }} />
|
||||
)}
|
||||
</span>
|
||||
<span className="vjs-control-text">{isAutoplayEnabled ? 'Autoplay is on' : 'Autoplay is off'}</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default AutoplayToggleButton;
|
||||
@ -1,7 +1,16 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import svgr from 'vite-plugin-svgr';
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
plugins: [
|
||||
react(),
|
||||
svgr({
|
||||
// Options for svgr
|
||||
svgrOptions: {
|
||||
exportType: 'default',
|
||||
},
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user