Skip to content

Commit 8f18b7a

Browse files
toshokannekotoshokanneko
committed
Update fire & slime, add unfollow modal, handle shorts overlay & anonymous shorts
1 parent 1adf46e commit 8f18b7a

File tree

15 files changed

+413
-91
lines changed

15 files changed

+413
-91
lines changed

‎ui/component/common/icon-custom.jsx‎

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1525,11 +1525,20 @@ export const icons = {
15251525
<path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" />
15261526
),
15271527
[ICONS.SLIME_ACTIVE]: buildIcon(
1528-
<path
1529-
d="M13.065 4.18508C12.5638 4.47334 11.9699 4.5547 11.4096 4.41183C10.8494 4.26896 10.367 3.91315 10.065 3.42008C9.70126 2.96799 9.52899 2.39146 9.58506 1.81392C9.64113 1.23639 9.92109 0.703759 10.365 0.330081C10.8662 0.0418164 11.4601 -0.0395341 12.0204 0.103332C12.5806 0.246199 13.063 0.602008 13.365 1.09508C13.7287 1.54717 13.901 2.12371 13.8449 2.70124C13.7889 3.27877 13.5089 3.8114 13.065 4.18508ZM2.565 6.76508C1.98518 6.6732 1.39241 6.81157 0.913189 7.15066C0.433971 7.48976 0.106262 8.00272 0 8.58008C0.0118186 9.17159 0.256137 9.73464 0.680058 10.1473C1.10398 10.56 1.67339 10.7891 2.265 10.7851C2.84509 10.8863 3.44175 10.7561 3.92691 10.4224C4.41207 10.0886 4.74707 9.57801 4.86 9.00008C4.85804 8.7046 4.79789 8.41241 4.683 8.14018C4.56811 7.86794 4.40072 7.62101 4.1904 7.41347C3.98007 7.20593 3.73093 7.04185 3.45719 6.9306C3.18345 6.81935 2.89048 6.7631 2.595 6.76508H2.565ZM22.2 15.1951C21.9286 15.0703 21.635 15.0008 21.3364 14.9907C21.0379 14.9806 20.7403 15.0301 20.461 15.1362C20.1818 15.2423 19.9264 15.403 19.7099 15.6088C19.4934 15.8146 19.3201 16.0615 19.2 16.3351C19.1369 16.6299 19.1337 16.9345 19.1906 17.2306C19.2475 17.5267 19.3634 17.8084 19.5313 18.0588C19.6992 18.3093 19.9157 18.5235 20.168 18.6886C20.4203 18.8537 20.7033 18.9665 21 19.0201C21.2714 19.1449 21.565 19.2143 21.8636 19.2244C22.1621 19.2346 22.4597 19.1851 22.739 19.079C23.0182 18.9729 23.2736 18.8122 23.4901 18.6064C23.7066 18.4005 23.8799 18.1536 24 17.8801C24.0634 17.5873 24.0677 17.2849 24.0127 16.9904C23.9577 16.696 23.8444 16.4155 23.6795 16.1654C23.5147 15.9153 23.3015 15.7007 23.0526 15.5341C22.8037 15.3674 22.524 15.2522 22.23 15.1951H22.2ZM20.34 10.2451C20.0073 9.99542 19.6009 9.86349 19.185 9.87008C18.4572 9.93018 17.7485 10.1341 17.1 10.4701C16.7447 10.6341 16.3789 10.7744 16.005 10.8901H15.69C15.5961 10.9108 15.4989 10.9108 15.405 10.8901C15 9.97508 16.5 9.00008 18.285 7.93508C18.8914 7.60883 19.4599 7.21644 19.98 6.76508C20.3961 6.30667 20.646 5.72169 20.6895 5.10413C20.733 4.48658 20.5677 3.87232 20.22 3.36008C19.9329 2.89588 19.5307 2.51381 19.0523 2.25098C18.574 1.98815 18.0358 1.85349 17.49 1.86008C17.2067 1.85969 16.9245 1.89496 16.65 1.96508C16.1585 2.08101 15.7042 2.31914 15.3293 2.65739C14.9543 2.99565 14.6708 3.42308 14.505 3.90008C14.16 4.75508 13.14 7.30508 12.135 7.71008C12.0359 7.72949 11.9341 7.72949 11.835 7.71008C11.6138 7.70259 11.3956 7.65692 11.19 7.57508C9.96 7.12508 9.6 5.62508 9.225 4.03508C9.06457 3.15891 8.79234 2.30695 8.415 1.50008C8.17043 1.04181 7.80465 0.659541 7.3576 0.395014C6.91055 0.130487 6.39941 -0.00612938 5.88 8.05856e-05C5.30686 0.011692 4.74338 0.149999 4.23 0.405081C3.872 0.589131 3.5547 0.843345 3.297 1.15258C3.03931 1.46182 2.84648 1.81976 2.73 2.20508C2.58357 2.66415 2.532 3.1482 2.57841 3.62781C2.62483 4.10743 2.76826 4.57261 3 4.99508C3.63898 5.99088 4.39988 6.90294 5.265 7.71008C5.59239 8.0233 5.90283 8.35377 6.195 8.70008C6.41249 8.94283 6.57687 9.22833 6.67761 9.5383C6.77835 9.84826 6.81322 10.1759 6.78 10.5001C6.68279 10.762 6.52008 10.9947 6.30737 11.1759C6.09467 11.3571 5.83908 11.4808 5.565 11.5351H5.19C4.89755 11.5247 4.60651 11.4896 4.32 11.4301C3.94485 11.3508 3.56329 11.3056 3.18 11.2951H3C2.50224 11.3269 2.02675 11.513 1.63964 11.8275C1.25253 12.142 0.973032 12.5694 0.84 13.0501C0.685221 13.5092 0.678705 14.0053 0.821373 14.4683C0.964041 14.9313 1.24867 15.3377 1.635 15.6301C1.97288 15.8809 2.38429 16.0127 2.805 16.0051C3.4891 15.9504 4.15377 15.751 4.755 15.4201C5.18104 15.1991 5.64344 15.0568 6.12 15.0001H6.285C6.32317 15.0086 6.35846 15.0269 6.38739 15.0532C6.41632 15.0795 6.4379 15.1129 6.45 15.1501C6.52858 15.4213 6.49621 15.7127 6.36 15.9601C5.80418 16.8088 4.95508 17.4229 3.975 17.6851C3.38444 17.8608 2.85799 18.205 2.46025 18.6756C2.06252 19.1462 1.81078 19.7226 1.73592 20.3342C1.66107 20.9458 1.76635 21.5659 2.03886 22.1185C2.31136 22.6711 2.73924 23.1321 3.27 23.4451C3.81477 23.8292 4.46349 24.0384 5.13 24.0451C6.1389 23.9485 7.08103 23.4979 7.7894 22.773C8.49778 22.0482 8.92665 21.0959 9 20.0851V19.9501C9.135 19.0351 9.33 17.7751 10.05 17.3401C10.2442 17.2216 10.4675 17.1593 10.695 17.1601C11.0828 17.1781 11.4558 17.3142 11.7641 17.5501C12.0724 17.786 12.3012 18.1105 12.42 18.4801C13.155 21.2251 13.725 23.4001 16.14 23.4001C16.4527 23.3961 16.7643 23.361 17.07 23.2951C17.8256 23.2158 18.5231 22.8527 19.0214 22.2792C19.5198 21.7057 19.7819 20.9644 19.755 20.2051C19.6664 19.6213 19.4389 19.0673 19.0918 18.5896C18.7446 18.112 18.2879 17.7246 17.76 17.4601C17.4534 17.2574 17.1625 17.0317 16.89 16.7851C16.005 15.9301 15.855 15.4051 15.885 15.1051C15.9198 14.8698 16.0313 14.6526 16.2021 14.4871C16.373 14.3217 16.5937 14.2173 16.83 14.1901H17.055C17.31 14.1901 17.61 14.1901 17.895 14.1901C18.18 14.1901 18.57 14.1901 18.84 14.1901H19.14C19.6172 14.1642 20.0748 13.9919 20.4505 13.6967C20.8263 13.4014 21.102 12.9976 21.24 12.5401C21.3316 12.1166 21.2981 11.6757 21.1436 11.2709C20.9892 10.8661 20.7204 10.5149 20.37 10.2601L20.34 10.2451Z"
1530-
fill="#81C554"
1531-
strokeWidth="0"
1532-
/>
1528+
<>
1529+
<defs>
1530+
<radialGradient id="slimeGrad" cx="50%" cy="50%" r="50%">
1531+
<stop offset="0%" stopColor="#c4ff55" />
1532+
<stop offset="35%" stopColor="#81C554" />
1533+
<stop offset="100%" stopColor="#3d8a1e" />
1534+
</radialGradient>
1535+
</defs>
1536+
<path
1537+
d="M13.065 4.18508C12.5638 4.47334 11.9699 4.5547 11.4096 4.41183C10.8494 4.26896 10.367 3.91315 10.065 3.42008C9.70126 2.96799 9.52899 2.39146 9.58506 1.81392C9.64113 1.23639 9.92109 0.703759 10.365 0.330081C10.8662 0.0418164 11.4601 -0.0395341 12.0204 0.103332C12.5806 0.246199 13.063 0.602008 13.365 1.09508C13.7287 1.54717 13.901 2.12371 13.8449 2.70124C13.7889 3.27877 13.5089 3.8114 13.065 4.18508ZM2.565 6.76508C1.98518 6.6732 1.39241 6.81157 0.913189 7.15066C0.433971 7.48976 0.106262 8.00272 0 8.58008C0.0118186 9.17159 0.256137 9.73464 0.680058 10.1473C1.10398 10.56 1.67339 10.7891 2.265 10.7851C2.84509 10.8863 3.44175 10.7561 3.92691 10.4224C4.41207 10.0886 4.74707 9.57801 4.86 9.00008C4.85804 8.7046 4.79789 8.41241 4.683 8.14018C4.56811 7.86794 4.40072 7.62101 4.1904 7.41347C3.98007 7.20593 3.73093 7.04185 3.45719 6.9306C3.18345 6.81935 2.89048 6.7631 2.595 6.76508H2.565ZM22.2 15.1951C21.9286 15.0703 21.635 15.0008 21.3364 14.9907C21.0379 14.9806 20.7403 15.0301 20.461 15.1362C20.1818 15.2423 19.9264 15.403 19.7099 15.6088C19.4934 15.8146 19.3201 16.0615 19.2 16.3351C19.1369 16.6299 19.1337 16.9345 19.1906 17.2306C19.2475 17.5267 19.3634 17.8084 19.5313 18.0588C19.6992 18.3093 19.9157 18.5235 20.168 18.6886C20.4203 18.8537 20.7033 18.9665 21 19.0201C21.2714 19.1449 21.565 19.2143 21.8636 19.2244C22.1621 19.2346 22.4597 19.1851 22.739 19.079C23.0182 18.9729 23.2736 18.8122 23.4901 18.6064C23.7066 18.4005 23.8799 18.1536 24 17.8801C24.0634 17.5873 24.0677 17.2849 24.0127 16.9904C23.9577 16.696 23.8444 16.4155 23.6795 16.1654C23.5147 15.9153 23.3015 15.7007 23.0526 15.5341C22.8037 15.3674 22.524 15.2522 22.23 15.1951H22.2ZM20.34 10.2451C20.0073 9.99542 19.6009 9.86349 19.185 9.87008C18.4572 9.93018 17.7485 10.1341 17.1 10.4701C16.7447 10.6341 16.3789 10.7744 16.005 10.8901H15.69C15.5961 10.9108 15.4989 10.9108 15.405 10.8901C15 9.97508 16.5 9.00008 18.285 7.93508C18.8914 7.60883 19.4599 7.21644 19.98 6.76508C20.3961 6.30667 20.646 5.72169 20.6895 5.10413C20.733 4.48658 20.5677 3.87232 20.22 3.36008C19.9329 2.89588 19.5307 2.51381 19.0523 2.25098C18.574 1.98815 18.0358 1.85349 17.49 1.86008C17.2067 1.85969 16.9245 1.89496 16.65 1.96508C16.1585 2.08101 15.7042 2.31914 15.3293 2.65739C14.9543 2.99565 14.6708 3.42308 14.505 3.90008C14.16 4.75508 13.14 7.30508 12.135 7.71008C12.0359 7.72949 11.9341 7.72949 11.835 7.71008C11.6138 7.70259 11.3956 7.65692 11.19 7.57508C9.96 7.12508 9.6 5.62508 9.225 4.03508C9.06457 3.15891 8.79234 2.30695 8.415 1.50008C8.17043 1.04181 7.80465 0.659541 7.3576 0.395014C6.91055 0.130487 6.39941 -0.00612938 5.88 8.05856e-05C5.30686 0.011692 4.74338 0.149999 4.23 0.405081C3.872 0.589131 3.5547 0.843345 3.297 1.15258C3.03931 1.46182 2.84648 1.81976 2.73 2.20508C2.58357 2.66415 2.532 3.1482 2.57841 3.62781C2.62483 4.10743 2.76826 4.57261 3 4.99508C3.63898 5.99088 4.39988 6.90294 5.265 7.71008C5.59239 8.0233 5.90283 8.35377 6.195 8.70008C6.41249 8.94283 6.57687 9.22833 6.67761 9.5383C6.77835 9.84826 6.81322 10.1759 6.78 10.5001C6.68279 10.762 6.52008 10.9947 6.30737 11.1759C6.09467 11.3571 5.83908 11.4808 5.565 11.5351H5.19C4.89755 11.5247 4.60651 11.4896 4.32 11.4301C3.94485 11.3508 3.56329 11.3056 3.18 11.2951H3C2.50224 11.3269 2.02675 11.513 1.63964 11.8275C1.25253 12.142 0.973032 12.5694 0.84 13.0501C0.685221 13.5092 0.678705 14.0053 0.821373 14.4683C0.964041 14.9313 1.24867 15.3377 1.635 15.6301C1.97288 15.8809 2.38429 16.0127 2.805 16.0051C3.4891 15.9504 4.15377 15.751 4.755 15.4201C5.18104 15.1991 5.64344 15.0568 6.12 15.0001H6.285C6.32317 15.0086 6.35846 15.0269 6.38739 15.0532C6.41632 15.0795 6.4379 15.1129 6.45 15.1501C6.52858 15.4213 6.49621 15.7127 6.36 15.9601C5.80418 16.8088 4.95508 17.4229 3.975 17.6851C3.38444 17.8608 2.85799 18.205 2.46025 18.6756C2.06252 19.1462 1.81078 19.7226 1.73592 20.3342C1.66107 20.9458 1.76635 21.5659 2.03886 22.1185C2.31136 22.6711 2.73924 23.1321 3.27 23.4451C3.81477 23.8292 4.46349 24.0384 5.13 24.0451C6.1389 23.9485 7.08103 23.4979 7.7894 22.773C8.49778 22.0482 8.92665 21.0959 9 20.0851V19.9501C9.135 19.0351 9.33 17.7751 10.05 17.3401C10.2442 17.2216 10.4675 17.1593 10.695 17.1601C11.0828 17.1781 11.4558 17.3142 11.7641 17.5501C12.0724 17.786 12.3012 18.1105 12.42 18.4801C13.155 21.2251 13.725 23.4001 16.14 23.4001C16.4527 23.3961 16.7643 23.361 17.07 23.2951C17.8256 23.2158 18.5231 22.8527 19.0214 22.2792C19.5198 21.7057 19.7819 20.9644 19.755 20.2051C19.6664 19.6213 19.4389 19.0673 19.0918 18.5896C18.7446 18.112 18.2879 17.7246 17.76 17.4601C17.4534 17.2574 17.1625 17.0317 16.89 16.7851C16.005 15.9301 15.855 15.4051 15.885 15.1051C15.9198 14.8698 16.0313 14.6526 16.2021 14.4871C16.373 14.3217 16.5937 14.2173 16.83 14.1901H17.055C17.31 14.1901 17.61 14.1901 17.895 14.1901C18.18 14.1901 18.57 14.1901 18.84 14.1901H19.14C19.6172 14.1642 20.0748 13.9919 20.4505 13.6967C20.8263 13.4014 21.102 12.9976 21.24 12.5401C21.3316 12.1166 21.2981 11.6757 21.1436 11.2709C20.9892 10.8661 20.7204 10.5149 20.37 10.2601L20.34 10.2451Z"
1538+
fill="url(#slimeGrad)"
1539+
strokeWidth="0"
1540+
/>
1541+
</>
15331542
),
15341543
[ICONS.FIRE]: buildIcon(
15351544
<path
@@ -1538,11 +1547,20 @@ export const icons = {
15381547
/>
15391548
),
15401549
[ICONS.FIRE_ACTIVE]: buildIcon(
1541-
<path
1542-
d="M15.45 22.65C17.25 16.65 12.15 12.75 12.15 12.75C12.15 12.75 9.00001 18.15 9.60001 22.65C7.20001 21.45 5.55001 19.8 4.80001 17.7C3.60001 14.55 4.50001 11.1 5.25001 9C5.85001 10.2 7.80001 12.15 7.80001 12.15L7.95001 10.5C8.55001 2.25 12.6 0.9 14.4 0.75C14.4 1.8 14.7 4.8 17.1 7.95C18.75 10.05 20.55 12.45 20.4 16.5C20.1 20.1 17.4 21.9 15.45 22.65Z"
1543-
fill="#d62912"
1544-
strokeWidth="0"
1545-
/>
1550+
<>
1551+
<defs>
1552+
<linearGradient id="fireGrad" x1="0" y1="0" x2="0" y2="1">
1553+
<stop offset="0%" stopColor="#ffb833" />
1554+
<stop offset="35%" stopColor="#ff9b20" />
1555+
<stop offset="75%" stopColor="#c91800" />
1556+
</linearGradient>
1557+
</defs>
1558+
<path
1559+
d="M15.45 22.65C17.25 16.65 12.15 12.75 12.15 12.75C12.15 12.75 9.00001 18.15 9.60001 22.65C7.20001 21.45 5.55001 19.8 4.80001 17.7C3.60001 14.55 4.50001 11.1 5.25001 9C5.85001 10.2 7.80001 12.15 7.80001 12.15L7.95001 10.5C8.55001 2.25 12.6 0.9 14.4 0.75C14.4 1.8 14.7 4.8 17.1 7.95C18.75 10.05 20.55 12.45 20.4 16.5C20.1 20.1 17.4 21.9 15.45 22.65Z"
1560+
fill="url(#fireGrad)"
1561+
strokeMiterlimit="10"
1562+
/>
1563+
</>
15461564
),
15471565
[ICONS.SLIME]: buildIcon(
15481566
<path

‎ui/component/counter/view.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@ import './style.scss';
55
type Props = {
66
value: number,
77
precision: number,
8+
startFrom?: number,
89
};
910
const DIGITS = Array.from({ length: 10 }, (_, i) => i);
1011

1112
export default function Counter(props: Props) {
12-
const { value, precision = 2 } = props;
13+
const { value, precision = 2, startFrom } = props;
1314

1415
const [chars, setChars] = React.useState([]);
15-
const [displayValue, setDisplayValue] = React.useState(value);
16+
const [displayValue, setDisplayValue] = React.useState(startFrom != null ? startFrom : value);
1617

1718
React.useEffect(() => {
1819
const timer = setTimeout(() => {

‎ui/component/fileReactions/view.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import classnames from 'classnames';
55
import * as REACTION_TYPES from 'constants/reactions';
66
import * as ICONS from 'constants/icons';
77
import RatioBar from 'component/ratioBar';
8-
import { formatNumberWithCommas } from 'util/number';
98
import FileActionButton from 'component/common/file-action-button';
9+
import Counter from 'component/counter';
1010

1111
const LIVE_REACTION_FETCH_MS = 1000 * 45;
1212

@@ -108,7 +108,7 @@ const LikeButton = (props: ButtonProps) => {
108108
<div className="button__fire-particle6" />
109109
</>
110110
)}
111-
{Number.isInteger(reactionCount) ? <span>{formatNumberWithCommas(reactionCount, 0)}</span> : Placeholder}
111+
{Number.isInteger(reactionCount) ? <Counter value={reactionCount} precision={0} /> : Placeholder}
112112
</>
113113
}
114114
iconSize={18}
@@ -138,7 +138,7 @@ const DislikeButton = (props: ButtonProps) => {
138138
<div className="button__slime-drop2" />
139139
</>
140140
)}
141-
{Number.isInteger(reactionCount) ? <span>{formatNumberWithCommas(reactionCount, 0)}</span> : Placeholder}
141+
{Number.isInteger(reactionCount) ? <Counter value={reactionCount} precision={0} /> : Placeholder}
142142
</>
143143
}
144144
iconSize={18}

‎ui/component/shortsActions/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
selectIsUriUnlisted,
1212
selectPermanentUrlForUri,
1313
selectChannelForClaimUri,
14+
selectChannelTitleForUri,
1415
} from 'redux/selectors/claims';
1516
import { selectIsSubscribedForUri } from 'redux/selectors/subscriptions';
1617
import { doChannelSubscribe, doChannelUnsubscribe } from 'redux/actions/subscriptions';
@@ -41,6 +42,7 @@ const select = (state, props) => {
4142
channelUrl,
4243
isSubscribed: channelUrl ? selectIsSubscribedForUri(state, channelUrl) : false,
4344
channelPermanentUrl: channelUrl ? selectPermanentUrlForUri(state, channelUrl) : undefined,
45+
channelTitle: channelUrl ? selectChannelTitleForUri(state, channelUrl) : undefined,
4446
};
4547
};
4648

‎ui/component/shortsActions/shortsMobileActions/view.jsx‎

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ import Icon from 'component/common/icon';
88
import * as ICONS from 'constants/icons';
99
import * as MODALS from 'constants/modal_types';
1010
import * as REACTION_TYPES from 'constants/reactions';
11-
import Skeleton from '@mui/material/Skeleton';
12-
import { formatNumberWithCommas } from 'util/number';
11+
import Counter from 'component/counter';
1312

1413
type Props = {
1514
uri: string,
@@ -71,8 +70,6 @@ const MobileActions = ({
7170
const isFireActive = effectiveReaction === REACTION_TYPES.LIKE;
7271
const isSlimeActive = effectiveReaction === REACTION_TYPES.DISLIKE;
7372

74-
const Placeholder = <Skeleton variant="text" animation="wave" className="reaction-count-placeholder" />;
75-
7673
return (
7774
<>
7875
{fireEffect &&
@@ -124,9 +121,24 @@ const MobileActions = ({
124121
'button--fire': isFireActive,
125122
'button--fire-glow-pulse': fireButtonGlow,
126123
})}
124+
label={
125+
<>
126+
{isFireActive && (
127+
<>
128+
<div className="button__fire-glow" />
129+
<div className="button__fire-particle1" />
130+
<div className="button__fire-particle2" />
131+
<div className="button__fire-particle3" />
132+
<div className="button__fire-particle4" />
133+
<div className="button__fire-particle5" />
134+
<div className="button__fire-particle6" />
135+
</>
136+
)}
137+
</>
138+
}
127139
/>
128140
<span className="shorts-mobile-panel__count">
129-
{Number.isInteger(likeCount) ? formatNumberWithCommas(likeCount, 0) : Placeholder}
141+
<Counter value={Number.isInteger(likeCount) ? likeCount : 0} precision={0} startFrom={0} />
130142
</span>
131143
</div>
132144

@@ -157,9 +169,20 @@ const MobileActions = ({
157169
}
158170
doReactionDislike(uri);
159171
}}
172+
label={
173+
<>
174+
{isSlimeActive && (
175+
<>
176+
<div className="button__slime-stain" />
177+
<div className="button__slime-drop1" />
178+
<div className="button__slime-drop2" />
179+
</>
180+
)}
181+
</>
182+
}
160183
/>
161184
<span className="shorts-mobile-panel__count">
162-
{Number.isInteger(dislikeCount) ? formatNumberWithCommas(dislikeCount, 0) : Placeholder}
185+
<Counter value={Number.isInteger(dislikeCount) ? dislikeCount : 0} precision={0} startFrom={0} />
163186
</span>
164187
</div>
165188

‎ui/component/shortsActions/swipeNavigation/style.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,8 @@
100100
align-items: center;
101101
justify-content: center;
102102
gap: 2px;
103+
position: relative;
104+
overflow: visible;
103105
}
104106

105107
button.shorts-mobile-panel__action-button.shorts-mobile-panel__action-button {
@@ -118,6 +120,22 @@ button.shorts-mobile-panel__action-button.shorts-mobile-panel__action-button {
118120
transition: all 0.2s ease-in-out;
119121
position: relative;
120122
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
123+
overflow: visible;
124+
125+
.button__label {
126+
display: contents;
127+
}
128+
129+
.button__fire-glow {
130+
left: 50%;
131+
bottom: 50%;
132+
}
133+
134+
[class^='button__fire-particle'],
135+
[class^='button__slime'] {
136+
left: 50%;
137+
bottom: 50%;
138+
}
121139

122140
.icon {
123141
color: white;

‎ui/component/shortsActions/swipeNavigation/viewModeToggle/view.jsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,16 @@ type Props = {
77
viewMode: string,
88
channelName: ?string,
99
onViewModeChange: (mode: string) => void,
10+
isTransitioning?: boolean,
1011
};
1112

12-
const ViewModeToggle = React.memo<Props>(({ viewMode, channelName, onViewModeChange }: Props) => {
13+
const ViewModeToggle = React.memo<Props>(({ viewMode, channelName, onViewModeChange, isTransitioning }: Props) => {
1314
return (
14-
<div className="shorts-page__view-toggle--overlay">
15+
<div
16+
className={classnames('shorts-page__view-toggle--overlay', {
17+
'shorts-page__view-toggle--hidden': isTransitioning,
18+
})}
19+
>
1520
<Button
1621
className={classnames('button-bubble', {
1722
'button-bubble--active': viewMode === 'related',

0 commit comments

Comments
 (0)