mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
feat(ui): micro icons, toasted design tweaks (#52)
This commit is contained in:
Sam Potts
@@ -1,12 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
|
||||
<g fill="currentColor">
|
||||
<path
|
||||
d="M9.57,3.617c-.156-.375-.519-.617-.924-.617H4c-.552,0-1,.449-1,1v4.646c0,.406,.242,.769,.618,.924,.124,.051,.255,.076,.383,.076,.261,0,.515-.102,.706-.293l4.647-4.647c.286-.287,.371-.715,.216-1.089Z"
|
||||
className="arrow-1"
|
||||
/>
|
||||
<path
|
||||
d="M14.382,8.429c-.377-.156-.804-.068-1.089,.217l-4.647,4.647c-.286,.287-.371,.715-.216,1.089,.156,.375,.519,.617,.924,.617h4.646c.552,0,1-.449,1-1v-4.646c0-.406-.242-.769-.618-.924Z"
|
||||
className="arrow-2"
|
||||
/>
|
||||
</g>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
|
||||
<path
|
||||
d="M9.57,3.617c-.156-.375-.519-.617-.924-.617H4c-.552,0-1,.449-1,1v4.646c0,.406,.242,.769,.618,.924,.124,.051,.255,.076,.383,.076,.261,0,.515-.102,.706-.293l4.647-4.647c.286-.287,.371-.715,.216-1.089Z"
|
||||
className="arrow-1"
|
||||
/>
|
||||
<path
|
||||
d="M14.382,8.429c-.377-.156-.804-.068-1.089,.217l-4.647,4.647c-.286,.287-.371,.715-.216,1.089,.156,.375,.519,.617,.924,.617h4.646c.552,0,1-.449,1-1v-4.646c0-.406-.242-.769-.618-.924Z"
|
||||
className="arrow-2"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 608 B After Width: | Height: | Size: 579 B |
@@ -1,12 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18">
|
||||
<g fill="currentColor">
|
||||
<path
|
||||
d="M7.883,1.93c-.375-.157-.803-.07-1.09,.217L2.146,6.793c-.287,.287-.372,.715-.217,1.09s.518,.617,.924,.617H7.5c.551,0,1-.449,1-1V2.854c0-.406-.242-.769-.617-.924Z"
|
||||
className="arrow-1"
|
||||
/>
|
||||
<path
|
||||
d="M15.146,9.5h-4.646c-.551,0-1,.449-1,1v4.646c0,.406,.242,.769,.617,.924,.125,.052,.255,.077,.384,.077,.26,0,.514-.102,.706-.293l4.646-4.646c.287-.287,.372-.715,.217-1.09s-.518-.617-.924-.617Z"
|
||||
className="arrow-2"
|
||||
/>
|
||||
</g>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18" fill="currentColor">
|
||||
<path
|
||||
d="M7.883,1.93c-.375-.157-.803-.07-1.09,.217L2.146,6.793c-.287,.287-.372,.715-.217,1.09s.518,.617,.924,.617H7.5c.551,0,1-.449,1-1V2.854c0-.406-.242-.769-.617-.924Z"
|
||||
className="arrow-1"
|
||||
/>
|
||||
<path
|
||||
d="M15.146,9.5h-4.646c-.551,0-1,.449-1,1v4.646c0,.406,.242,.769,.617,.924,.125,.052,.255,.077,.384,.077,.26,0,.514-.102,.706-.293l4.646-4.646c.287-.287,.372-.715,.217-1.09s-.518-.617-.924-.617Z"
|
||||
className="arrow-2"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 582 B After Width: | Height: | Size: 553 B |
@@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
|
||||
<path
|
||||
d="M10.75,0.5 C11.1642136,0.5 11.5,0.835786438 11.5,1.25 L11.5,5 C11.5,5.41421356 11.1642136,5.75 10.75,5.75 C10.3357864,5.75 10,5.41421356 10,5 L10,3.06 L7.79833009,5.26233009 C7.50543687,5.5552233 7.03056313,5.5552233 6.73766991,5.26233009 C6.4447767,4.96943687 6.4447767,4.49456313 6.73766991,4.20166991 L8.938,2 L7,2 C6.62030423,2 6.30650904,1.71784612 6.25684662,1.35177056 L6.25,1.25 C6.25,0.835786438 6.58578644,0.5 7,0.5 L10.75,0.5 Z"
|
||||
/>
|
||||
<path
|
||||
d="M1.25,6.25 C1.66421356,6.25 2,6.58578644 2,7 L2,8.938 L4.20166991,6.73766991 C4.49456313,6.4447767 4.96943687,6.4447767 5.26233009,6.73766991 C5.5552233,7.03056313 5.5552233,7.50543687 5.26233009,7.79833009 L3.06,10 L5,10 C5.37969577,10 5.69349096,10.2821539 5.74315338,10.6482294 L5.75,10.75 C5.75,11.1642136 5.41421356,11.5 5,11.5 L1.25,11.5 C0.835786438,11.5 0.5,11.1642136 0.5,10.75 L0.5,7 C0.5,6.58578644 0.835786438,6.25 1.25,6.25 Z"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
|
||||
<path
|
||||
d="M7.268,0.232 C7.68221356,0.232 8.018,0.567786438 8.018,0.982 L8.017,2.921 L10.2196699,0.719669914 C10.5125631,0.426776695 10.9874369,0.426776695 11.2803301,0.719669914 C11.5732233,1.01256313 11.5732233,1.48743687 11.2803301,1.78033009 L9.078,3.982 L11.018,3.982 C11.3976958,3.982 11.711491,4.26415388 11.7611534,4.63022944 L11.768,4.732 C11.768,5.14621356 11.4322136,5.482 11.018,5.482 L7.268,5.482 C6.85378644,5.482 6.518,5.14621356 6.518,4.732 L6.518,0.982 C6.518,0.567786438 6.85378644,0.232 7.268,0.232 Z"
|
||||
/>
|
||||
<path
|
||||
d="M4.732,6.518 C5.14621356,6.518 5.482,6.85378644 5.482,7.268 L5.482,11.018 C5.482,11.4322136 5.14621356,11.768 4.732,11.768 C4.31778644,11.768 3.982,11.4322136 3.982,11.018 L3.982,9.078 L1.78033009,11.2803301 C1.48743687,11.5732233 1.01256313,11.5732233 0.719669914,11.2803301 C0.426776695,10.9874369 0.426776695,10.5125631 0.719669914,10.2196699 L2.921,8.017 L0.982,8.018 C0.602304234,8.018 0.288509039,7.73584612 0.238846616,7.36977056 L0.232,7.268 C0.232,6.85378644 0.567786438,6.518 0.982,6.518 L4.732,6.518 Z"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
|
||||
<path
|
||||
d="M1.5,1.5 C1.5,0.94771525 1.94771525,0.5 2.5,0.5 L4,0.5 C4.55228475,0.5 5,0.94771525 5,1.5 L5,10.5 C5,11.0522847 4.55228475,11.5 4,11.5 L2.5,11.5 C1.94771525,11.5 1.5,11.0522847 1.5,10.5 L1.5,1.5 Z M7,1.5 C7,0.94771525 7.44771525,0.5 8,0.5 L9.5,0.5 C10.0522847,0.5 10.5,0.94771525 10.5,1.5 L10.5,10.5 C10.5,11.0522847 10.0522847,11.5 9.5,11.5 L8,11.5 C7.44771525,11.5 7,11.0522847 7,10.5 L7,1.5 Z"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 528 B |
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
|
||||
<path
|
||||
d="M3.104,0.41 L10.334,4.912 C10.7399092,5.16540087 10.9848867,5.61160658 10.9808559,6.09010175 C10.9767247,6.56859692 10.7241722,7.01055931 10.314,7.257 L3.085,11.6 C2.660044,11.8552526 2.13058927,11.8619999 1.69926652,11.6176596 C1.26794378,11.3733193 1.00153536,10.915723 1.00199939,10.42 L1.00199939,1.576 C1.00239522,1.07671678 1.2734089,0.616881916 1.71001777,0.374690696 C2.14662664,0.132499476 2.68021247,0.146015104 3.104,0.41 Z"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 567 B |
@@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
|
||||
<path
|
||||
d="M10.2857142,2.2 C9.99999989,1.93333333 9.5714284,1.93333333 9.28571413,2.2 C8.99999983,2.46666667 8.99999983,2.86666667 9.28571413,3.13333333 C10.142857,3.93333333 10.5714284,4.93333333 10.5714284,6 C10.5714284,7.06666667 10.142857,8.06666667 9.28571413,8.86666667 C8.99999983,9.13333333 8.99999983,9.53333333 9.28571413,9.8 C9.42857128,9.93333333 9.64285701,10 9.78571416,10 C9.99999989,10 10.142857,9.93333333 10.2857142,9.8 C11.3571428,8.8 12,7.46666667 12,6 C12,4.53333333 11.3571428,3.2 10.2857142,2.2 L10.2857142,2.2 Z"
|
||||
/>
|
||||
<path
|
||||
d="M7.20141037 3.52131633C6.93286321 3.77196031 6.93286321 4.14792629 7.20141037 4.39857028 7.72653847 4.88868985 7.91235391 5.37070299 7.91235391 6 7.91235391 6.62392308 7.60834146 7.27813427 7.20141037 7.6579366 6.93286321 7.9085806 6.93286321 8.2845466 7.20141037 8.5351906 7.3051173 8.63198367 7.65548032 8.70996853 7.92843927 8.63950433 8.00889141 8.61873567 8.08261928 8.58507087 8.14132542 8.5351906 8.9809794 7.82176933 9.23651163 6.77319427 9.23660898 6 9.23660898 5.886637 9.23473663 5.77343765 9.22833227 5.6598286 9.19105591 4.99856631 9.00072661 4.32342409 8.14132535 3.52131633 7.87277819 3.27067233 7.46995753 3.27067233 7.20141037 3.52131633ZM2.5 4 .5 4C.214285715 4 3.55271368e-15 4.17770752 3.55271368e-15 4.5L3.55271368e-15 7.5C3.55271368e-15 7.82229242.166666664 8 .452380949 8L2.5 8 5.23809524 10.9157087C5.57142857 11.1305704 6 10.9157087 6 10.4859854L6 1.53725661C6 1.10753333 5.57142857.838956275 5.23809524 1.10753333L2.5 4Z"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
|
||||
<path
|
||||
d="M7.20141037 3.52131633C6.93286321 3.77196031 6.93286321 4.14792629 7.20141037 4.39857028 7.72653847 4.88868985 7.91235391 5.37070299 7.91235391 6 7.91235391 6.62392308 7.60834146 7.27813427 7.20141037 7.6579366 6.93286321 7.9085806 6.93286321 8.2845466 7.20141037 8.5351906 7.3051173 8.63198367 7.65548032 8.70996853 7.92843927 8.63950433 8.00889141 8.61873567 8.08261928 8.58507087 8.14132542 8.5351906 8.9809794 7.82176933 9.23651163 6.77319427 9.23660898 6 9.23660898 5.886637 9.23473663 5.77343765 9.22833227 5.6598286 9.19105591 4.99856631 9.00072661 4.32342409 8.14132535 3.52131633 7.87277819 3.27067233 7.46995753 3.27067233 7.20141037 3.52131633ZM2.5 4 .5 4C.214285715 4 3.55271368e-15 4.17770752 3.55271368e-15 4.5L3.55271368e-15 7.5C3.55271368e-15 7.82229242.166666664 8 .452380949 8L2.5 8 5.23809524 10.9157087C5.57142857 11.1305704 6 10.9157087 6 10.4859854L6 1.53725661C6 1.10753333 5.57142857.838956275 5.23809524 1.10753333L2.5 4Z"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
|
||||
<path
|
||||
d="M8.228179 3.73584846 9.5 5.00782311 10.771821 3.73584846C11.0527839 3.45488553 11.5083149 3.45488553 11.7892778 3.73584846 12.0702407 4.0168114 12.0702407 4.47234233 11.7892778 4.75330526L10.5173032 6.02512626 11.7892778 7.29694726C12.0702407 7.5779102 12.0702407 8.03344112 11.7892778 8.31440406 11.5083149 8.59536699 11.0527839 8.59536699 10.771821 8.31440406L9.5 7.04242941 8.228179 8.31440406C7.94721606 8.59536699 7.49168514 8.59536699 7.2107222 8.31440406 6.92975927 8.03344112 6.92975927 7.5779102 7.2107222 7.29694726L8.4819774 6.02512626 7.2107222 4.75330526C6.92975927 4.47234233 6.92975927 4.0168114 7.2107222 3.73584846 7.49168514 3.45488553 7.94721606 3.45488553 8.228179 3.73584846ZM2.5 4 .5 4C.214285715 4 3.55271368e-15 4.17770752 3.55271368e-15 4.5L3.55271368e-15 7.5C3.55271368e-15 7.82229242.166666664 8 .452380949 8L2.5 8 5.23809524 10.9157087C5.57142857 11.1305704 6 10.9157087 6 10.4859854L6 1.53725661C6 1.10753333 5.57142857.838956275 5.23809524 1.10753333L2.5 4Z"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -1,6 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
|
||||
<g fill="currentColor">
|
||||
<rect x="2" y="2" width="5" height="14" rx="1.75" ry="1.75" />
|
||||
<rect x="11" y="2" width="5" height="14" rx="1.75" ry="1.75" />
|
||||
</g>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
|
||||
<rect x="2" y="2" width="5" height="14" rx="1.75" ry="1.75" />
|
||||
<rect x="11" y="2" width="5" height="14" rx="1.75" ry="1.75" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 259 B After Width: | Height: | Size: 242 B |
@@ -1,6 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
|
||||
<path
|
||||
d="M15.1,7.478L5.608,2.222c-.553-.306-1.206-.297-1.749,.023-.538,.317-.859,.877-.859,1.499V14.256c0,.622,.321,1.182,.859,1.499,.279,.164,.586,.247,.895,.247,.293,0,.586-.075,.854-.223l9.491-5.256c.556-.307,.901-.891,.901-1.522s-.345-1.215-.9-1.522Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 382 B After Width: | Height: | Size: 378 B |
@@ -1,65 +1,35 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
|
||||
<g fill="currentColor">
|
||||
<rect width="2" height="5" x="8" y=".5" rx="1" opacity="0.5">
|
||||
<animate attributeName="opacity" values="1;0" dur="1s" begin="0s" repeatCount="indefinite" calcMode="linear" />
|
||||
</rect>
|
||||
<rect width="2" height="5" x="12.243" y="2.257" rx="1" transform="rotate(45 13.243 4.757)" opacity="0.45">
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="1;0"
|
||||
dur="1s"
|
||||
begin="0.125s"
|
||||
repeatCount="indefinite"
|
||||
calcMode="linear"
|
||||
/>
|
||||
</rect>
|
||||
<rect width="5" height="2" x="12.5" y="8" rx="1" opacity="0.4">
|
||||
<animate attributeName="opacity" values="1;0" dur="1s" begin="0.25s" repeatCount="indefinite" calcMode="linear" />
|
||||
</rect>
|
||||
<rect width="5" height="2" x="10.743" y="12.243" rx="1" transform="rotate(45 13.243 13.243)" opacity="0.35">
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="1;0"
|
||||
dur="1s"
|
||||
begin="0.375s"
|
||||
repeatCount="indefinite"
|
||||
calcMode="linear"
|
||||
/>
|
||||
</rect>
|
||||
<rect width="2" height="5" x="8" y="12.5" rx="1" opacity="0.3">
|
||||
<animate attributeName="opacity" values="1;0" dur="1s" begin="0.5s" repeatCount="indefinite" calcMode="linear" />
|
||||
</rect>
|
||||
<rect width="2" height="5" x="3.757" y="10.743" rx="1" transform="rotate(45 4.757 13.243)" opacity="0.25">
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="1;0"
|
||||
dur="1s"
|
||||
begin="0.625s"
|
||||
repeatCount="indefinite"
|
||||
calcMode="linear"
|
||||
/>
|
||||
</rect>
|
||||
<rect width="5" height="2" x=".5" y="8" rx="1" opacity="0.15">
|
||||
<animate attributeName="opacity" values="1;0" dur="1s" begin="0.75s" repeatCount="indefinite" calcMode="linear" />
|
||||
</rect>
|
||||
<rect
|
||||
width="5"
|
||||
height="2"
|
||||
x="2.257"
|
||||
y="3.757"
|
||||
fill-rule="nonzero"
|
||||
rx="1"
|
||||
transform="rotate(45 4.757 4.757)"
|
||||
opacity="0.1"
|
||||
>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="1;0"
|
||||
dur="1s"
|
||||
begin="0.875s"
|
||||
repeatCount="indefinite"
|
||||
calcMode="linear"
|
||||
/>
|
||||
</rect>
|
||||
</g>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
|
||||
<rect width="2" height="5" x="8" y=".5" rx="1" opacity="0.5">
|
||||
<animate attributeName="opacity" values="1;0" dur="1s" begin="0s" repeatCount="indefinite" calcMode="linear" />
|
||||
</rect>
|
||||
<rect width="2" height="5" x="12.243" y="2.257" rx="1" transform="rotate(45 13.243 4.757)" opacity="0.45">
|
||||
<animate attributeName="opacity" values="1;0" dur="1s" begin="0.125s" repeatCount="indefinite" calcMode="linear" />
|
||||
</rect>
|
||||
<rect width="5" height="2" x="12.5" y="8" rx="1" opacity="0.4">
|
||||
<animate attributeName="opacity" values="1;0" dur="1s" begin="0.25s" repeatCount="indefinite" calcMode="linear" />
|
||||
</rect>
|
||||
<rect width="5" height="2" x="10.743" y="12.243" rx="1" transform="rotate(45 13.243 13.243)" opacity="0.35">
|
||||
<animate attributeName="opacity" values="1;0" dur="1s" begin="0.375s" repeatCount="indefinite" calcMode="linear" />
|
||||
</rect>
|
||||
<rect width="2" height="5" x="8" y="12.5" rx="1" opacity="0.3">
|
||||
<animate attributeName="opacity" values="1;0" dur="1s" begin="0.5s" repeatCount="indefinite" calcMode="linear" />
|
||||
</rect>
|
||||
<rect width="2" height="5" x="3.757" y="10.743" rx="1" transform="rotate(45 4.757 13.243)" opacity="0.25">
|
||||
<animate attributeName="opacity" values="1;0" dur="1s" begin="0.625s" repeatCount="indefinite" calcMode="linear" />
|
||||
</rect>
|
||||
<rect width="5" height="2" x=".5" y="8" rx="1" opacity="0.15">
|
||||
<animate attributeName="opacity" values="1;0" dur="1s" begin="0.75s" repeatCount="indefinite" calcMode="linear" />
|
||||
</rect>
|
||||
<rect
|
||||
width="5"
|
||||
height="2"
|
||||
x="2.257"
|
||||
y="3.757"
|
||||
fill-rule="nonzero"
|
||||
rx="1"
|
||||
transform="rotate(45 4.757 4.757)"
|
||||
opacity="0.1"
|
||||
>
|
||||
<animate attributeName="opacity" values="1;0" dur="1s" begin="0.875s" repeatCount="indefinite" calcMode="linear" />
|
||||
</rect>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 1.8 KiB |
@@ -1,10 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
|
||||
<g fill="currentColor">
|
||||
<path
|
||||
d="M15.5999996,3.3 C15.1999996,2.9 14.5999996,2.9 14.1999996,3.3 C13.7999996,3.7 13.7999996,4.3 14.1999996,4.7 C15.3999996,5.9 15.9999996,7.4 15.9999996,9 C15.9999996,10.6 15.3999996,12.1 14.1999996,13.3 C13.7999996,13.7 13.7999996,14.3 14.1999996,14.7 C14.3999996,14.9 14.6999996,15 14.8999996,15 C15.1999996,15 15.3999996,14.9 15.5999996,14.7 C17.0999996,13.2 17.9999996,11.2 17.9999996,9 C17.9999996,6.8 17.0999996,4.8 15.5999996,3.3 L15.5999996,3.3 Z"
|
||||
/>
|
||||
<path
|
||||
d="M11.2819745,5.28197449 C10.9060085,5.65794047 10.9060085,6.22188944 11.2819745,6.59785542 C12.0171538,7.33303477 12.2772954,8.05605449 12.2772954,9 C12.2772954,9.93588462 11.851678,10.9172014 11.2819745,11.4869049 C10.9060085,11.8628709 10.9060085,12.4268199 11.2819745,12.8027859 C11.4271642,12.9479755 11.9176724,13.0649528 12.2998149,12.9592565 C12.4124479,12.9281035 12.5156669,12.8776063 12.5978555,12.8027859 C13.773371,11.732654 14.1311161,10.1597914 14.1312524,9 C14.1312524,8.8299555 14.1286311,8.66015647 14.119665,8.4897429 C14.0674781,7.49784946 13.8010171,6.48513613 12.5978554,5.28197449 C12.2218894,4.9060085 11.6579405,4.9060085 11.2819745,5.28197449 Z M3.78571429,6.00820648 L0.714285714,6.00820648 C0.285714286,6.00820648 0,6.30901277 0,6.76022222 L0,11.2723167 C0,11.7235261 0.285714286,12.0243324 0.714285714,12.0243324 L3.78571429,12.0243324 L7.85714286,15.8819922 C8.35714286,16.1827985 9,15.8819922 9,15.2803796 L9,2.75215925 C9,2.15054666 8.35714286,1.77453879 7.85714286,2.15054666 L3.78571429,6.00820648 Z"
|
||||
/>
|
||||
</g>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
|
||||
<path
|
||||
d="M15.5999996,3.3 C15.1999996,2.9 14.5999996,2.9 14.1999996,3.3 C13.7999996,3.7 13.7999996,4.3 14.1999996,4.7 C15.3999996,5.9 15.9999996,7.4 15.9999996,9 C15.9999996,10.6 15.3999996,12.1 14.1999996,13.3 C13.7999996,13.7 13.7999996,14.3 14.1999996,14.7 C14.3999996,14.9 14.6999996,15 14.8999996,15 C15.1999996,15 15.3999996,14.9 15.5999996,14.7 C17.0999996,13.2 17.9999996,11.2 17.9999996,9 C17.9999996,6.8 17.0999996,4.8 15.5999996,3.3 L15.5999996,3.3 Z"
|
||||
/>
|
||||
<path
|
||||
d="M11.2819745,5.28197449 C10.9060085,5.65794047 10.9060085,6.22188944 11.2819745,6.59785542 C12.0171538,7.33303477 12.2772954,8.05605449 12.2772954,9 C12.2772954,9.93588462 11.851678,10.9172014 11.2819745,11.4869049 C10.9060085,11.8628709 10.9060085,12.4268199 11.2819745,12.8027859 C11.4271642,12.9479755 11.9176724,13.0649528 12.2998149,12.9592565 C12.4124479,12.9281035 12.5156669,12.8776063 12.5978555,12.8027859 C13.773371,11.732654 14.1311161,10.1597914 14.1312524,9 C14.1312524,8.8299555 14.1286311,8.66015647 14.119665,8.4897429 C14.0674781,7.49784946 13.8010171,6.48513613 12.5978554,5.28197449 C12.2218894,4.9060085 11.6579405,4.9060085 11.2819745,5.28197449 Z M3.78571429,6.00820648 L0.714285714,6.00820648 C0.285714286,6.00820648 0,6.30901277 0,6.76022222 L0,11.2723167 C0,11.7235261 0.285714286,12.0243324 0.714285714,12.0243324 L3.78571429,12.0243324 L7.85714286,15.8819922 C8.35714286,16.1827985 9,15.8819922 9,15.2803796 L9,2.75215925 C9,2.15054666 8.35714286,1.77453879 7.85714286,2.15054666 L3.78571429,6.00820648 Z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
@@ -1,6 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
|
||||
<path
|
||||
d="M11.2819745 5.28197449C10.9060085 5.65794047 10.9060085 6.22188944 11.2819745 6.59785542 12.0171538 7.33303477 12.2772954 8.05605449 12.2772954 9 12.2772954 9.93588462 11.851678 10.9172014 11.2819745 11.4869049 10.9060085 11.8628709 10.9060085 12.4268199 11.2819745 12.8027859 11.4271642 12.9479755 11.9176724 13.0649528 12.2998149 12.9592565 12.4124479 12.9281035 12.5156669 12.8776063 12.5978555 12.8027859 13.773371 11.732654 14.1311161 10.1597914 14.1312524 9 14.1312524 8.8299555 14.1286311 8.66015647 14.119665 8.4897429 14.0674781 7.49784946 13.8010171 6.48513613 12.5978554 5.28197449 12.2218894 4.9060085 11.6579405 4.9060085 11.2819745 5.28197449ZM3.78571429 6.00820648.714285714 6.00820648C.285714286 6.00820648 0 6.30901277 0 6.76022222L0 11.2723167C0 11.7235261.285714286 12.0243324.714285714 12.0243324L3.78571429 12.0243324 7.85714286 15.8819922C8.35714286 16.1827985 9 15.8819922 9 15.2803796L9 2.75215925C9 2.15054666 8.35714286 1.77453879 7.85714286 2.15054666L3.78571429 6.00820648Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
@@ -1,6 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
|
||||
<path
|
||||
d="M12.7535534 12.1464466 14.5 10.4 14.5 10.4 16.2464466 12.1464466C16.4417088 12.3417088 16.7582912 12.3417088 16.9535534 12.1464466L17.6464466 11.4535534C17.8417088 11.2582912 17.8417088 10.9417088 17.6464466 10.7464466L15.9 9 15.9 9 17.6464466 7.25355339C17.8417088 7.05829124 17.8417088 6.74170876 17.6464466 6.54644661L16.9535534 5.85355339C16.7582912 5.65829124 16.4417088 5.65829124 16.2464466 5.85355339L14.5 7.6 14.5 7.6 12.7535534 5.85355339C12.5582912 5.65829124 12.2417088 5.65829124 12.0464466 5.85355339L11.3535534 6.54644661C11.1582912 6.74170876 11.1582912 7.05829124 11.3535534 7.25355339L13.1 9 13.1 9 11.3535534 10.7464466C11.1582912 10.9417088 11.1582912 11.2582912 11.3535534 11.4535534L12.0464466 12.1464466C12.2417088 12.3417088 12.5582912 12.3417088 12.7535534 12.1464466ZM3.78571429 6.00820648.714285714 6.00820648C.285714286 6.00820648 0 6.30901277 0 6.76022222L0 11.2723167C0 11.7235261.285714286 12.0243324.714285714 12.0243324L3.78571429 12.0243324 7.85714286 15.8819922C8.35714286 16.1827985 9 15.8819922 9 15.2803796L9 2.75215925C9 2.15054666 8.35714286 1.77453879 7.85714286 2.15054666L3.78571429 6.00820648Z"
|
||||
fill="currentColor"
|
||||
d="M12.732233,5.81801948 L14.5,7.586 L16.267767,5.81801948 C16.6582912,5.42749519 17.2914562,5.42749519 17.6819805,5.81801948 C18.0725048,6.20854378 18.0725048,6.84170876 17.6819805,7.23223305 L15.914,9 L17.6819805,10.767767 C18.0725048,11.1582912 18.0725048,11.7914562 17.6819805,12.1819805 C17.2914562,12.5725048 16.6582912,12.5725048 16.267767,12.1819805 L14.5,10.414 L12.732233,12.1819805 C12.3417088,12.5725048 11.7085438,12.5725048 11.3180195,12.1819805 C10.9274952,11.7914562 10.9274952,11.1582912 11.3180195,10.767767 L13.085,9 L11.3180195,7.23223305 C10.9274952,6.84170876 10.9274952,6.20854378 11.3180195,5.81801948 C11.7085438,5.42749519 12.3417088,5.42749519 12.732233,5.81801948 Z M3.78571429,6.00820648 L0.714285714,6.00820648 C0.285714286,6.00820648 0,6.30901277 0,6.76022222 L0,11.2723167 C0,11.7235261 0.285714286,12.0243324 0.714285714,12.0243324 L3.78571429,12.0243324 L7.85714286,15.8819922 C8.35714286,16.1827985 9,15.8819922 9,15.2803796 L9,2.75215925 C9,2.15054666 8.35714286,1.77453879 7.85714286,2.15054666 L3.78571429,6.00820648 Z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
@@ -1,22 +1,38 @@
|
||||
// Import SVG files as strings
|
||||
import fullscreenEnterSvg from '../assets/fullscreen-enter.svg';
|
||||
import fullscreenExitSvg from '../assets/fullscreen-exit.svg';
|
||||
import pauseSvg from '../assets/pause.svg';
|
||||
import playSvg from '../assets/play.svg';
|
||||
import volumeHighSvg from '../assets/volume-high.svg';
|
||||
import volumeLowSvg from '../assets/volume-low.svg';
|
||||
import volumeOffSvg from '../assets/volume-off.svg';
|
||||
import fullscreenEnter from '../assets/fullscreen-enter.svg';
|
||||
import fullscreenExit from '../assets/fullscreen-exit.svg';
|
||||
import microFullscreenEnter from '../assets/micro-fullscreen-enter.svg';
|
||||
import microFullscreenExit from '../assets/micro-fullscreen-exit.svg';
|
||||
import microPause from '../assets/micro-pause.svg';
|
||||
import microPlay from '../assets/micro-play.svg';
|
||||
import microVolumeHigh from '../assets/micro-volume-high.svg';
|
||||
import microVolumeLow from '../assets/micro-volume-low.svg';
|
||||
import microVolumeOff from '../assets/micro-volume-off.svg';
|
||||
import pause from '../assets/pause.svg';
|
||||
import play from '../assets/play.svg';
|
||||
import volumeHigh from '../assets/volume-high.svg';
|
||||
import volumeLow from '../assets/volume-low.svg';
|
||||
import volumeOff from '../assets/volume-off.svg';
|
||||
|
||||
export const SVG_ICONS: Record<string, string> = {
|
||||
play: playSvg,
|
||||
pause: pauseSvg,
|
||||
volumeHigh: volumeHighSvg,
|
||||
volumeLow: volumeLowSvg,
|
||||
volumeOff: volumeOffSvg,
|
||||
fullscreenEnter: fullscreenEnterSvg,
|
||||
fullscreenExit: fullscreenExitSvg,
|
||||
play,
|
||||
pause,
|
||||
volumeHigh,
|
||||
volumeLow,
|
||||
volumeOff,
|
||||
fullscreenEnter,
|
||||
fullscreenExit,
|
||||
microPlay,
|
||||
microPause,
|
||||
microVolumeHigh,
|
||||
microVolumeLow,
|
||||
microVolumeOff,
|
||||
microFullscreenEnter,
|
||||
microFullscreenExit,
|
||||
};
|
||||
|
||||
// TODO: Check if we need below? It seems to be unused now.
|
||||
|
||||
// Legacy interface for backward compatibility
|
||||
export interface IconDefinition {
|
||||
name: string;
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "tsdown",
|
||||
"build": "pnpm generate:icons && tsdown",
|
||||
"build:watch": "tsdown --watch --silent",
|
||||
"dev": "pnpm generate:icons && pnpm run build:watch",
|
||||
"clean": "rm -rf dist src/generated-icons",
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import type { Placement } from '@floating-ui/react';
|
||||
import type { ReactNode } from 'react';
|
||||
import type { MutableRefObject, ReactNode } from 'react';
|
||||
|
||||
import {
|
||||
autoUpdate,
|
||||
flip,
|
||||
FloatingPortal,
|
||||
offset,
|
||||
safePolygon,
|
||||
shift,
|
||||
useDismiss,
|
||||
useFloating,
|
||||
@@ -15,7 +16,16 @@ import {
|
||||
useRole,
|
||||
} from '@floating-ui/react';
|
||||
|
||||
import React, { createContext, useContext, useEffect, useState } from 'react';
|
||||
import {
|
||||
Children,
|
||||
cloneElement,
|
||||
createContext,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react';
|
||||
|
||||
interface PopoverContextType {
|
||||
open: boolean;
|
||||
@@ -52,7 +62,7 @@ interface PopoverPopupProps {
|
||||
|
||||
interface PopoverPortalProps {
|
||||
children: ReactNode;
|
||||
root?: HTMLElement | ShadowRoot | React.MutableRefObject<HTMLElement | ShadowRoot | null> | null;
|
||||
root?: HTMLElement | ShadowRoot | MutableRefObject<HTMLElement | ShadowRoot | null> | null;
|
||||
rootId?: string;
|
||||
}
|
||||
|
||||
@@ -85,6 +95,7 @@ function PopoverRoot({ openOnHover = false, delay = 0, closeDelay = 0, children
|
||||
open: delay,
|
||||
close: closeDelay,
|
||||
},
|
||||
handleClose: safePolygon({ blockPointerEvents: true }),
|
||||
});
|
||||
const focus = useFocus(context);
|
||||
const dismiss = useDismiss(context);
|
||||
@@ -92,12 +103,12 @@ function PopoverRoot({ openOnHover = false, delay = 0, closeDelay = 0, children
|
||||
|
||||
const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);
|
||||
|
||||
const updatePositioning = (newPlacement: Placement, newSideOffset: number) => {
|
||||
const updatePositioning = useCallback((newPlacement: Placement, newSideOffset: number) => {
|
||||
setPlacement(newPlacement);
|
||||
setSideOffset(newSideOffset);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const value: PopoverContextType = {
|
||||
const value: PopoverContextType = useMemo(() => ({
|
||||
open,
|
||||
setOpen,
|
||||
refs,
|
||||
@@ -106,7 +117,7 @@ function PopoverRoot({ openOnHover = false, delay = 0, closeDelay = 0, children
|
||||
getFloatingProps,
|
||||
context,
|
||||
updatePositioning,
|
||||
};
|
||||
}), [open, refs, floatingStyles, getReferenceProps, getFloatingProps, context, updatePositioning]);
|
||||
|
||||
return <PopoverContext.Provider value={value}>{children}</PopoverContext.Provider>;
|
||||
}
|
||||
@@ -114,7 +125,8 @@ function PopoverRoot({ openOnHover = false, delay = 0, closeDelay = 0, children
|
||||
function PopoverTrigger({ children }: PopoverTriggerProps): JSX.Element {
|
||||
const { refs, getReferenceProps } = usePopoverContext();
|
||||
|
||||
return React.cloneElement(React.Children.only(children) as JSX.Element, {
|
||||
// eslint-disable-next-line react/no-clone-element, react/no-children-only
|
||||
return cloneElement(Children.only(children) as JSX.Element, {
|
||||
ref: refs.setReference,
|
||||
...getReferenceProps(),
|
||||
});
|
||||
@@ -158,6 +170,7 @@ function PopoverPortal({ children, root, rootId }: PopoverPortalProps): JSX.Elem
|
||||
}
|
||||
|
||||
// Export compound component
|
||||
// eslint-disable-next-line react-refresh/only-export-components
|
||||
export const Popover: {
|
||||
Root: typeof PopoverRoot;
|
||||
Trigger: typeof PopoverTrigger;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import type { Placement } from '@floating-ui/react';
|
||||
import type { ReactNode } from 'react';
|
||||
import type { MutableRefObject, ReactNode, RefObject } from 'react';
|
||||
|
||||
import {
|
||||
arrow,
|
||||
@@ -17,7 +17,17 @@ import {
|
||||
useTransitionStatus,
|
||||
} from '@floating-ui/react';
|
||||
|
||||
import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
|
||||
import {
|
||||
Children,
|
||||
cloneElement,
|
||||
createContext,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
|
||||
interface UpdatePositioningProps {
|
||||
side: Placement;
|
||||
@@ -26,7 +36,7 @@ interface UpdatePositioningProps {
|
||||
}
|
||||
|
||||
interface TooltipContextType {
|
||||
arrowRef: React.MutableRefObject<HTMLElement | null>;
|
||||
arrowRef: MutableRefObject<HTMLElement | null>;
|
||||
context: ReturnType<typeof useFloating>['context'];
|
||||
transitionStatus: ReturnType<typeof useTransitionStatus>['status'];
|
||||
getReferenceProps: ReturnType<typeof useInteractions>['getReferenceProps'];
|
||||
@@ -63,7 +73,7 @@ interface TooltipArrowProps {
|
||||
|
||||
interface TooltipPortalProps {
|
||||
children: ReactNode;
|
||||
root?: HTMLElement | ShadowRoot | React.MutableRefObject<HTMLElement | ShadowRoot | null> | null;
|
||||
root?: HTMLElement | ShadowRoot | MutableRefObject<HTMLElement | ShadowRoot | null> | null;
|
||||
rootId?: string;
|
||||
}
|
||||
|
||||
@@ -116,6 +126,7 @@ function TooltipRoot({ delay = 600, closeDelay = 0, children }: TooltipRootProps
|
||||
const { status: transitionStatus } = useTransitionStatus(context);
|
||||
|
||||
const hover = useHover(context, {
|
||||
restMs: 300,
|
||||
delay: {
|
||||
open: delay,
|
||||
close: closeDelay,
|
||||
@@ -127,20 +138,20 @@ function TooltipRoot({ delay = 600, closeDelay = 0, children }: TooltipRootProps
|
||||
|
||||
const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);
|
||||
|
||||
const updatePositioning = ({ side, sideOffset, collisionPadding }: UpdatePositioningProps) => {
|
||||
const updatePositioning = useCallback(({ side, sideOffset, collisionPadding }: UpdatePositioningProps) => {
|
||||
setPlacement(side);
|
||||
setSideOffset(sideOffset);
|
||||
setCollisionPadding(collisionPadding);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const value: TooltipContextType = {
|
||||
const value: TooltipContextType = useMemo(() => ({
|
||||
getReferenceProps,
|
||||
getFloatingProps,
|
||||
context,
|
||||
updatePositioning,
|
||||
arrowRef,
|
||||
transitionStatus,
|
||||
};
|
||||
}), [getReferenceProps, getFloatingProps, context, updatePositioning, transitionStatus]);
|
||||
|
||||
return <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>;
|
||||
}
|
||||
@@ -149,7 +160,8 @@ function TooltipTrigger({ children }: TooltipTriggerProps): JSX.Element {
|
||||
const { context, getReferenceProps } = useTooltipContext();
|
||||
const { refs, open } = context;
|
||||
|
||||
return React.cloneElement(React.Children.only(children) as JSX.Element, {
|
||||
// eslint-disable-next-line react/no-clone-element, react/no-children-only
|
||||
return cloneElement(Children.only(children) as JSX.Element, {
|
||||
ref: refs.setReference,
|
||||
...getReferenceProps(),
|
||||
'data-popup-open': open ? '' : undefined,
|
||||
@@ -170,9 +182,9 @@ function TooltipPositioner({
|
||||
updatePositioning({ side, sideOffset, collisionPadding });
|
||||
}, [side, sideOffset, collisionPadding, updatePositioning]);
|
||||
|
||||
const positionerContextValue: TooltipPositionerContextType = {
|
||||
const positionerContextValue: TooltipPositionerContextType = useMemo(() => ({
|
||||
side,
|
||||
};
|
||||
}), [side]);
|
||||
|
||||
return (
|
||||
<TooltipPositionerContext.Provider value={positionerContextValue}>
|
||||
@@ -222,7 +234,7 @@ function TooltipArrow({ className = '', children }: TooltipArrowProps): JSX.Elem
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={arrowRef as React.RefObject<HTMLDivElement>}
|
||||
ref={arrowRef as RefObject<HTMLDivElement>}
|
||||
className={className}
|
||||
aria-hidden="true"
|
||||
data-side={side}
|
||||
@@ -245,6 +257,7 @@ function TooltipPortal({ children, root, rootId = '@default_portal_id' }: Toolti
|
||||
}
|
||||
|
||||
// Export compound component
|
||||
// eslint-disable-next-line react-refresh/only-export-components
|
||||
export const Tooltip: {
|
||||
Root: typeof TooltipRoot;
|
||||
Trigger: typeof TooltipTrigger;
|
||||
|
||||
@@ -36,7 +36,7 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps
|
||||
<div className={styles.Overlay} aria-hidden="true" />
|
||||
|
||||
<div className={styles.Controls} data-testid="media-controls">
|
||||
<Tooltip.Root delay={600} closeDelay={0}>
|
||||
<Tooltip.Root delay={400} closeDelay={0}>
|
||||
<Tooltip.Trigger>
|
||||
<PlayButton className={`${styles.Button} ${styles.IconButton} ${styles.PlayButton}`}>
|
||||
<PlayIcon className={`${styles.PlayIcon} ${styles.Icon}`} />
|
||||
@@ -93,7 +93,7 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps
|
||||
</Popover.Portal>
|
||||
</Popover.Root>
|
||||
|
||||
<Tooltip.Root delay={600} closeDelay={0}>
|
||||
<Tooltip.Root delay={400} closeDelay={0}>
|
||||
<Tooltip.Trigger>
|
||||
<FullscreenButton className={`${styles.Button} ${styles.IconButton} ${styles.FullscreenButton}`}>
|
||||
<FullscreenEnterIcon className={`${styles.FullscreenEnterIcon} ${styles.Icon}`} />
|
||||
|
||||
@@ -13,7 +13,7 @@ const styles: MediaDefaultSkinStyles = {
|
||||
MediaContainer: cn(
|
||||
'relative @container/root group/root overflow-clip',
|
||||
// Base typography
|
||||
'text-sm',
|
||||
'text-[0.8125rem]', // 13px
|
||||
// Prevent rounded corners in fullscreen.
|
||||
'[&:fullscreen]:rounded-none [&:fullscreen]:[&_video]:h-full [&:fullscreen]:[&_video]:w-full',
|
||||
// Fancy borders.
|
||||
@@ -27,6 +27,7 @@ const styles: MediaDefaultSkinStyles = {
|
||||
// Hide when playing (for now).
|
||||
// FIXME: This is crude temporary logic, we’ll improve it later I guess with a [data-show-controls] attribute or something?
|
||||
'has-[+.controls_[data-paused]]:opacity-100 has-[+.controls_[data-paused]]:delay-0',
|
||||
'has-[+.controls_[aria-expanded="true"]]:opacity-100 has-[+.controls_[aria-expanded="true"]]:delay-0',
|
||||
'group-hover/root:opacity-100 group-hover/root:delay-0',
|
||||
),
|
||||
Controls: cn(
|
||||
@@ -38,8 +39,9 @@ const styles: MediaDefaultSkinStyles = {
|
||||
// Animation
|
||||
'transition will-change-transform origin-bottom ease-out',
|
||||
// FIXME: Temporary hide/show logic
|
||||
'scale-90 opacity-0 delay-500',
|
||||
'scale-90 opacity-0 delay-500 duration-300',
|
||||
'has-[[data-paused]]:scale-100 has-[[data-paused]]:opacity-100 has-[[data-paused]]:delay-0',
|
||||
'has-[[aria-expanded="true"]]:scale-100 has-[[aria-expanded="true"]]:opacity-100 has-[[aria-expanded="true"]]:delay-0',
|
||||
'group-hover/root:scale-100 group-hover/root:opacity-100 group-hover/root:delay-0',
|
||||
// Border to enhance contrast on lighter videos
|
||||
'after:absolute after:inset-0 after:ring after:rounded-[inherit] after:ring-black/15 after:pointer-events-none after:z-10',
|
||||
@@ -149,10 +151,12 @@ const styles: MediaDefaultSkinStyles = {
|
||||
'opacity-0 transition-[opacity,height,width] ease-in-out',
|
||||
'-outline-offset-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500',
|
||||
'group-hover/slider:opacity-100 group-focus-within/slider:opacity-100',
|
||||
'size-2.5 active:size-3 group-active/slider:size-3 hover:cursor-ew-resize',
|
||||
'size-2.5 active:size-3 group-active/slider:size-3',
|
||||
'[&[data-orientation="horizontal"]]:hover:cursor-ew-resize',
|
||||
'[&[data-orientation="vertical"]]:hover:cursor-ns-resize',
|
||||
),
|
||||
PopoverPopup: cn(
|
||||
'relative px-2 py-4 rounded-2xl',
|
||||
'relative px-1.5 py-3.5 rounded-full',
|
||||
'bg-white/10 backdrop-blur-3xl backdrop-saturate-150 backdrop-brightness-90',
|
||||
'ring ring-white/10 ring-inset shadow-sm shadow-black/15',
|
||||
// Border to enhance contrast on lighter videos
|
||||
|
||||
@@ -1,17 +1,20 @@
|
||||
import type { PropsWithChildren } from 'react';
|
||||
|
||||
import {
|
||||
FullscreenEnterIcon,
|
||||
FullscreenExitIcon,
|
||||
PauseIcon,
|
||||
PlayIcon,
|
||||
VolumeHighIcon,
|
||||
VolumeLowIcon,
|
||||
VolumeOffIcon,
|
||||
MicroFullscreenEnterIcon,
|
||||
MicroFullscreenExitIcon,
|
||||
MicroPauseIcon,
|
||||
MicroPlayIcon,
|
||||
MicroVolumeHighIcon,
|
||||
MicroVolumeLowIcon,
|
||||
MicroVolumeOffIcon,
|
||||
} from '@vjs-10/react-icons';
|
||||
|
||||
import { CurrentTimeDisplay } from '../../components/CurrentTimeDisplay';
|
||||
import Popover from '@/components/Popover';
|
||||
|
||||
import Tooltip from '@/components/Tooltip';
|
||||
import VolumeSlider from '@/components/VolumeSlider';
|
||||
import { CurrentTimeDisplay } from '../../components/CurrentTimeDisplay';
|
||||
import { DurationDisplay } from '../../components/DurationDisplay';
|
||||
import { FullscreenButton } from '../../components/FullscreenButton';
|
||||
import { MediaContainer } from '../../components/MediaContainer';
|
||||
@@ -32,10 +35,22 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps
|
||||
<div className={styles.Overlay} aria-hidden="true" />
|
||||
|
||||
<div className={styles.Controls}>
|
||||
<PlayButton className={`${styles.Button} ${styles.IconButton} ${styles.PlayButton}`}>
|
||||
<PlayIcon className={`${styles.PlayIcon} ${styles.Icon}`} />
|
||||
<PauseIcon className={`${styles.PauseIcon} ${styles.Icon}`} />
|
||||
</PlayButton>
|
||||
<Tooltip.Root delay={400} closeDelay={0}>
|
||||
<Tooltip.Trigger>
|
||||
<PlayButton className={`${styles.Button} ${styles.IconButton} ${styles.PlayButton}`}>
|
||||
<MicroPlayIcon className={`${styles.PlayIcon} ${styles.Icon}`} />
|
||||
<MicroPauseIcon className={`${styles.PauseIcon} ${styles.Icon}`} />
|
||||
</PlayButton>
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Portal>
|
||||
<Tooltip.Positioner side="top" sideOffset={6} collisionPadding={12}>
|
||||
<Tooltip.Popup className={`${styles.TooltipPopup} ${styles.PlayTooltipPopup}`}>
|
||||
<span className={styles.PlayTooltip}>Play</span>
|
||||
<span className={styles.PauseTooltip}>Pause</span>
|
||||
</Tooltip.Popup>
|
||||
</Tooltip.Positioner>
|
||||
</Tooltip.Portal>
|
||||
</Tooltip.Root>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<CurrentTimeDisplay
|
||||
@@ -56,16 +71,44 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps
|
||||
</TimeSlider.Root>
|
||||
|
||||
<div className={styles.ButtonGroup}>
|
||||
<MuteButton className={`${styles.Button} ${styles.IconButton} ${styles.MuteButton}`}>
|
||||
<VolumeHighIcon className={`${styles.VolumeHighIcon} ${styles.Icon}`} />
|
||||
<VolumeLowIcon className={`${styles.VolumeLowIcon} ${styles.Icon}`} />
|
||||
<VolumeOffIcon className={`${styles.VolumeOffIcon} ${styles.Icon}`} />
|
||||
</MuteButton>
|
||||
<Popover.Root openOnHover delay={200} closeDelay={300}>
|
||||
<Popover.Trigger>
|
||||
<MuteButton className={`${styles.Button} ${styles.IconButton} ${styles.MuteButton}`}>
|
||||
<MicroVolumeHighIcon className={`${styles.VolumeHighIcon} ${styles.Icon}`} />
|
||||
<MicroVolumeLowIcon className={`${styles.VolumeLowIcon} ${styles.Icon}`} />
|
||||
<MicroVolumeOffIcon className={`${styles.VolumeOffIcon} ${styles.Icon}`} />
|
||||
</MuteButton>
|
||||
</Popover.Trigger>
|
||||
<Popover.Portal>
|
||||
<Popover.Positioner side="top" sideOffset={2}>
|
||||
<Popover.Popup className={styles.PopoverPopup}>
|
||||
<VolumeSlider.Root className={styles.SliderRoot} orientation="vertical">
|
||||
<VolumeSlider.Track className={styles.SliderTrack}>
|
||||
<VolumeSlider.Progress className={styles.SliderProgress} />
|
||||
</VolumeSlider.Track>
|
||||
<VolumeSlider.Thumb className={styles.SliderThumb} />
|
||||
</VolumeSlider.Root>
|
||||
</Popover.Popup>
|
||||
</Popover.Positioner>
|
||||
</Popover.Portal>
|
||||
</Popover.Root>
|
||||
|
||||
<FullscreenButton className={`${styles.Button} ${styles.IconButton} ${styles.FullscreenButton}`}>
|
||||
<FullscreenEnterIcon className={`${styles.FullscreenEnterIcon} ${styles.Icon}`} />
|
||||
<FullscreenExitIcon className={`${styles.FullscreenExitIcon} ${styles.Icon}`} />
|
||||
</FullscreenButton>
|
||||
<Tooltip.Root delay={400} closeDelay={0}>
|
||||
<Tooltip.Trigger>
|
||||
<FullscreenButton className={`${styles.Button} ${styles.IconButton} ${styles.FullscreenButton}`}>
|
||||
<MicroFullscreenEnterIcon className={`${styles.FullscreenEnterIcon} ${styles.Icon}`} />
|
||||
<MicroFullscreenExitIcon className={`${styles.FullscreenExitIcon} ${styles.Icon}`} />
|
||||
</FullscreenButton>
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Portal>
|
||||
<Tooltip.Positioner side="top" sideOffset={6} collisionPadding={12}>
|
||||
<Tooltip.Popup className={`${styles.TooltipPopup} ${styles.FullscreenTooltipPopup}`}>
|
||||
<span className={styles.FullscreenEnterTooltip}>Enter Fullscreen</span>
|
||||
<span className={styles.FullscreenExitTooltip}>Exit Fullscreen</span>
|
||||
</Tooltip.Popup>
|
||||
</Tooltip.Positioner>
|
||||
</Tooltip.Portal>
|
||||
</Tooltip.Root>
|
||||
</div>
|
||||
</div>
|
||||
</MediaContainer>
|
||||
|
||||
@@ -27,22 +27,26 @@ const styles: MediaToastedSkinStyles = {
|
||||
'opacity-0 delay-500 duration-300',
|
||||
// FIXME: Temporary hide/show logic
|
||||
'has-[+.controls_[data-paused]]:opacity-100 has-[+.controls_[data-paused]]:delay-0 has-[+.controls_[data-paused]]:duration-75',
|
||||
'has-[+.controls_[aria-expanded="true"]]:opacity-100 has-[+.controls_[aria-expanded="true"]]:delay-0 has-[+.controls_[aria-expanded="true"]]:duration-75',
|
||||
'group-hover/root:opacity-100 group-hover/root:delay-0 group-hover/root:duration-75',
|
||||
// High contrast mode
|
||||
'contrast-more:from-black/75',
|
||||
),
|
||||
Controls: cn(
|
||||
'controls', // FIXME: Temporary className hook for above logic in the overlay. Can be removed once have a proper way to handle controls visibility.
|
||||
'@container/controls absolute inset-x-0 bottom-0 flex items-center gap-3.5 z-20 px-6 pb-6 pt-10 text-white text-shadow',
|
||||
'@container/controls absolute inset-x-0 bottom-0 flex items-center gap-3.5 z-20 px-4 pb-4 pt-10 text-white text-shadow',
|
||||
'shadow-sm shadow-black/15',
|
||||
// Animation
|
||||
'transition ease-in-out',
|
||||
// FIXME: Temporary hide/show logic
|
||||
'translate-y-full opacity-0 delay-500 duration-300',
|
||||
'has-[[data-paused]]:translate-y-0 has-[[data-paused]]:opacity-100 has-[[data-paused]]:delay-0 has-[[data-paused]]:duration-75',
|
||||
'has-[[aria-expanded="true"]]:translate-y-0 has-[[aria-expanded="true"]]:opacity-100 has-[[aria-expanded="true"]]:delay-0 has-[[aria-expanded="true"]]:duration-75',
|
||||
'group-hover/root:translate-y-0 group-hover/root:opacity-100 group-hover/root:delay-0 group-hover/root:duration-75',
|
||||
),
|
||||
Icon: cn('icon'),
|
||||
Button: cn(
|
||||
'group/button cursor-pointer relative shrink-0 transition select-none p-2 rounded-md',
|
||||
'group/button cursor-pointer relative shrink-0 transition select-none p-2.5 rounded-md',
|
||||
// Background/foreground
|
||||
'bg-transparent text-white',
|
||||
// Hover and focus states
|
||||
@@ -69,6 +73,18 @@ const styles: MediaToastedSkinStyles = {
|
||||
),
|
||||
PlayIcon: cn('play-icon'),
|
||||
PauseIcon: cn('pause-icon'),
|
||||
TooltipPopup: cn(
|
||||
'whitespace-nowrap flex origin-[var(--transform-origin)] flex-col rounded-md text-white text-xs @7xl/root:text-sm px-2 py-1',
|
||||
'bg-black/30 backdrop-blur-sm',
|
||||
// Animation
|
||||
'transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[instant]:duration-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0',
|
||||
),
|
||||
PlayTooltipPopup: cn(
|
||||
'[&_.pause-tooltip]:inline [&[data-paused]_.pause-tooltip]:hidden',
|
||||
'[&_.play-tooltip]:hidden [&[data-paused]_.play-tooltip]:inline',
|
||||
),
|
||||
PlayTooltip: cn('play-tooltip'),
|
||||
PauseTooltip: cn('pause-tooltip'),
|
||||
MuteButton: cn(
|
||||
'[&_.icon]:hidden',
|
||||
'[&[data-volume-level="high"]_.volume-high-icon]:inline',
|
||||
@@ -82,27 +98,26 @@ const styles: MediaToastedSkinStyles = {
|
||||
FullscreenButton: cn(
|
||||
'[&_.fullscreen-enter-icon]:opacity-100 [&[data-fullscreen]_.fullscreen-enter-icon]:opacity-0',
|
||||
'[&_.fullscreen-exit-icon]:opacity-0 [&[data-fullscreen]_.fullscreen-exit-icon]:opacity-100',
|
||||
'[&_path]:transition-transform ease-out',
|
||||
),
|
||||
FullscreenEnterIcon: cn(
|
||||
'fullscreen-enter-icon',
|
||||
'group-hover/button:[&_.arrow-1]:-translate-x-px group-hover/button:[&_.arrow-1]:-translate-y-px',
|
||||
'group-hover/button:[&_.arrow-2]:translate-x-px group-hover/button:[&_.arrow-2]:translate-y-px',
|
||||
),
|
||||
FullscreenExitIcon: cn(
|
||||
'fullscreen-exit-icon',
|
||||
'[&_.arrow-1]:-translate-x-px [&_.arrow-1]:-translate-y-px',
|
||||
'[&_.arrow-2]:translate-x-px [&_.arrow-2]:translate-y-px',
|
||||
'group-hover/button:[&_.arrow-1]:translate-0',
|
||||
'group-hover/button:[&_.arrow-2]:translate-0',
|
||||
),
|
||||
FullscreenTooltipPopup: cn(
|
||||
'[&_.fullscreen-enter-tooltip]:inline [&[data-fullscreen]_.fullscreen-enter-tooltip]:hidden',
|
||||
'[&_.fullscreen-exit-tooltip]:hidden [&[data-fullscreen]_.fullscreen-exit-tooltip]:inline',
|
||||
),
|
||||
FullscreenEnterTooltip: cn('fullscreen-enter-tooltip'),
|
||||
FullscreenExitTooltip: cn('fullscreen-exit-tooltip'),
|
||||
TimeSliderRoot: cn('mx-2'),
|
||||
TimeSliderThumb: cn('opacity-0'),
|
||||
TimeDisplay: cn('tabular-nums text-shadow-2xs shadow-black/50'),
|
||||
SliderRoot: cn(
|
||||
'flex items-center justify-center flex-1 group/slider relative',
|
||||
'[&[data-orientation="horizontal"]]:h-5 [&[data-orientation="horizontal"]]:min-w-20',
|
||||
'[&[data-orientation="vertical"]]:w-5 [&[data-orientation="vertical"]]:h-20',
|
||||
'[&[data-orientation="vertical"]]:w-5 [&[data-orientation="vertical"]]:h-18',
|
||||
),
|
||||
SliderTrack: cn(
|
||||
'relative select-none rounded-full bg-white/10',
|
||||
@@ -114,8 +129,11 @@ const styles: MediaToastedSkinStyles = {
|
||||
SliderThumb: cn(
|
||||
'bg-white z-10 select-none ring ring-black/10 rounded-full shadow-sm shadow-black/15 transition-[opacity,height,width] ease-in-out',
|
||||
'-outline-offset-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500',
|
||||
'size-3 active:size-3.5 group-active/slider:size-3.5 hover:cursor-ew-resize',
|
||||
'size-2.5 active:size-3 group-active/slider:size-3',
|
||||
'[&[data-orientation="horizontal"]]:hover:cursor-ew-resize',
|
||||
'[&[data-orientation="vertical"]]:hover:cursor-ns-resize',
|
||||
),
|
||||
PopoverPopup: cn('py-2'),
|
||||
};
|
||||
|
||||
export default styles;
|
||||
|
||||
@@ -9,6 +9,10 @@ export interface MediaToastedSkinStyles {
|
||||
readonly PlayButton: string;
|
||||
readonly PlayIcon: string;
|
||||
readonly PauseIcon: string;
|
||||
readonly PlayTooltipPopup: string;
|
||||
readonly PlayTooltip: string;
|
||||
readonly PauseTooltip: string;
|
||||
readonly TooltipPopup: string;
|
||||
readonly MuteButton: string;
|
||||
readonly VolumeHighIcon: string;
|
||||
readonly VolumeLowIcon: string;
|
||||
@@ -16,6 +20,10 @@ export interface MediaToastedSkinStyles {
|
||||
readonly FullscreenButton: string;
|
||||
readonly FullscreenEnterIcon: string;
|
||||
readonly FullscreenExitIcon: string;
|
||||
readonly FullscreenTooltipPopup: string;
|
||||
readonly FullscreenEnterTooltip: string;
|
||||
readonly FullscreenExitTooltip: string;
|
||||
readonly PopoverPopup: string;
|
||||
readonly TimeSliderRoot: string;
|
||||
readonly TimeSliderThumb: string;
|
||||
readonly TimeDisplay: string;
|
||||
|
||||
Reference in New Issue
Block a user