Reaction Selector: Update thumb sprite (#2193)
This commit is contained in:
parent
a29802266e
commit
b712f9dcb2
@ -464,7 +464,7 @@ export function buildApiChatReactions(availableReactions?: GramJs.TypeChatReacti
|
|||||||
if (availableReactions instanceof GramJs.ChatReactionsAll) {
|
if (availableReactions instanceof GramJs.ChatReactionsAll) {
|
||||||
// TODO Hack before custom reactions are implemented
|
// TODO Hack before custom reactions are implemented
|
||||||
// eslint-disable-next-line max-len
|
// eslint-disable-next-line max-len
|
||||||
return ['👍', '👎', '❤', '🔥', '🥰', '👏', '😁', '🤔', '🤯', '😱', '🤬', '😢', '🎉', '🤩', '🤮', '💩', '🙏', '👌', '🕊', '🤡', '🥱', '🥴', '😍', '🐳', '❤🔥', '🌚', '🌭', '💯', '🤣', '⚡', '🍌', '🏆', '💔', '🤨', '😐', '🍓', '🍾', '💋', '🖕', '😈', '😴', '😭', '🤓', '👻', '👨💻', '👀', '🎃'];
|
return ['👍', '👎', '❤', '🔥', '🥰', '👏', '😁', '🤔', '🤯', '😱', '🤬', '😢', '🎉', '🤩', '🤮', '💩', '🙏', '👌', '🕊', '🤡', '🥱', '🥴', '😍', '🐳', '❤🔥', '🌚', '🌭', '💯', '🤣', '⚡', '🍌', '🏆', '💔', '🤨', '😐', '🍓', '🍾', '💋', '🖕', '😈', '😴', '😭', '🤓', '👻', '👨💻', '👀', '🎃', '🙈', '😇', '😨', '🤝', '✍️', '🤗', '🫡'];
|
||||||
}
|
}
|
||||||
if (availableReactions instanceof GramJs.ChatReactionsSome) {
|
if (availableReactions instanceof GramJs.ChatReactionsSome) {
|
||||||
return availableReactions.reactions.map(buildApiReaction).filter(Boolean);
|
return availableReactions.reactions.map(buildApiReaction).filter(Boolean);
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 62 KiB |
@ -7,7 +7,7 @@ import type { ThemeKey } from '../../types';
|
|||||||
import type { FC } from '../../lib/teact/teact';
|
import type { FC } from '../../lib/teact/teact';
|
||||||
|
|
||||||
import { getChatAvatarHash } from '../../global/helpers/chats'; // Direct import for better module splitting
|
import { getChatAvatarHash } from '../../global/helpers/chats'; // Direct import for better module splitting
|
||||||
import { selectIsRightColumnShown, selectTheme, selectIsCurrentUserPremium } from '../../global/selectors';
|
import { selectIsRightColumnShown, selectTheme } from '../../global/selectors';
|
||||||
import { DARK_THEME_BG_COLOR, LIGHT_THEME_BG_COLOR } from '../../config';
|
import { DARK_THEME_BG_COLOR, LIGHT_THEME_BG_COLOR } from '../../config';
|
||||||
import useFlag from '../../hooks/useFlag';
|
import useFlag from '../../hooks/useFlag';
|
||||||
import useShowTransition from '../../hooks/useShowTransition';
|
import useShowTransition from '../../hooks/useShowTransition';
|
||||||
@ -22,7 +22,6 @@ import styles from './UiLoader.module.scss';
|
|||||||
|
|
||||||
import telegramLogoPath from '../../assets/telegram-logo.svg';
|
import telegramLogoPath from '../../assets/telegram-logo.svg';
|
||||||
import reactionThumbsPath from '../../assets/reaction-thumbs.png';
|
import reactionThumbsPath from '../../assets/reaction-thumbs.png';
|
||||||
import premiumReactionThumbsPath from '../../assets/reaction-thumbs-premium.png';
|
|
||||||
import lockPreviewPath from '../../assets/lock.png';
|
import lockPreviewPath from '../../assets/lock.png';
|
||||||
import monkeyPath from '../../assets/monkey.svg';
|
import monkeyPath from '../../assets/monkey.svg';
|
||||||
|
|
||||||
@ -44,7 +43,6 @@ type StateProps = Pick<GlobalState, 'uiReadyState' | 'shouldSkipHistoryAnimation
|
|||||||
isRightColumnShown?: boolean;
|
isRightColumnShown?: boolean;
|
||||||
leftColumnWidth?: number;
|
leftColumnWidth?: number;
|
||||||
theme: ThemeKey;
|
theme: ThemeKey;
|
||||||
isCurrentUserPremium?: boolean;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const MAX_PRELOAD_DELAY = 700;
|
const MAX_PRELOAD_DELAY = 700;
|
||||||
@ -73,11 +71,11 @@ function preloadAvatars() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const preloadTasks = {
|
const preloadTasks = {
|
||||||
main: (isCurrentUserPremium: boolean) => Promise.all([
|
main: () => Promise.all([
|
||||||
loadModule(Bundles.Main, 'Main')
|
loadModule(Bundles.Main, 'Main')
|
||||||
.then(preloadFonts),
|
.then(preloadFonts),
|
||||||
preloadAvatars(),
|
preloadAvatars(),
|
||||||
preloadImage(isCurrentUserPremium ? premiumReactionThumbsPath : reactionThumbsPath),
|
preloadImage(reactionThumbsPath),
|
||||||
]),
|
]),
|
||||||
authPhoneNumber: () => Promise.all([
|
authPhoneNumber: () => Promise.all([
|
||||||
preloadFonts(),
|
preloadFonts(),
|
||||||
@ -101,7 +99,6 @@ const UiLoader: FC<OwnProps & StateProps> = ({
|
|||||||
shouldSkipHistoryAnimations,
|
shouldSkipHistoryAnimations,
|
||||||
leftColumnWidth,
|
leftColumnWidth,
|
||||||
theme,
|
theme,
|
||||||
isCurrentUserPremium,
|
|
||||||
}) => {
|
}) => {
|
||||||
const { setIsUiReady } = getActions();
|
const { setIsUiReady } = getActions();
|
||||||
|
|
||||||
@ -115,7 +112,7 @@ const UiLoader: FC<OwnProps & StateProps> = ({
|
|||||||
|
|
||||||
const safePreload = async () => {
|
const safePreload = async () => {
|
||||||
try {
|
try {
|
||||||
await preloadTasks[page!](isCurrentUserPremium!);
|
await preloadTasks[page!]();
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
// Do nothing
|
// Do nothing
|
||||||
}
|
}
|
||||||
@ -183,7 +180,6 @@ export default withGlobal<OwnProps>(
|
|||||||
isRightColumnShown: selectIsRightColumnShown(global),
|
isRightColumnShown: selectIsRightColumnShown(global),
|
||||||
leftColumnWidth: global.leftColumnWidth,
|
leftColumnWidth: global.leftColumnWidth,
|
||||||
theme,
|
theme,
|
||||||
isCurrentUserPremium: selectIsCurrentUserPremium(global),
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
)(UiLoader);
|
)(UiLoader);
|
||||||
|
|||||||
@ -73,7 +73,6 @@ const ReactionSelector: FC<OwnProps> = ({
|
|||||||
isReady={isReady}
|
isReady={isReady}
|
||||||
onSendReaction={onSendReaction}
|
onSendReaction={onSendReaction}
|
||||||
reaction={reaction}
|
reaction={reaction}
|
||||||
isCurrentUserPremium={isCurrentUserPremium}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|||||||
@ -17,10 +17,6 @@
|
|||||||
background-image: url('../../../assets/reaction-thumbs.png');
|
background-image: url('../../../assets/reaction-thumbs.png');
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: auto 100%;
|
background-size: auto 100%;
|
||||||
|
|
||||||
&--premium {
|
|
||||||
background-image: url('../../../assets/reaction-thumbs-premium.png');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.AnimatedSticker {
|
.AnimatedSticker {
|
||||||
|
|||||||
@ -19,13 +19,12 @@ type OwnProps = {
|
|||||||
previewIndex: number;
|
previewIndex: number;
|
||||||
isReady?: boolean;
|
isReady?: boolean;
|
||||||
onSendReaction: (reaction: string, x: number, y: number) => void;
|
onSendReaction: (reaction: string, x: number, y: number) => void;
|
||||||
isCurrentUserPremium?: boolean;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const cn = createClassNameBuilder('ReactionSelectorReaction');
|
const cn = createClassNameBuilder('ReactionSelectorReaction');
|
||||||
|
|
||||||
const ReactionSelectorReaction: FC<OwnProps> = ({
|
const ReactionSelectorReaction: FC<OwnProps> = ({
|
||||||
reaction, previewIndex, onSendReaction, isReady, isCurrentUserPremium,
|
reaction, previewIndex, onSendReaction, isReady,
|
||||||
}) => {
|
}) => {
|
||||||
// eslint-disable-next-line no-null/no-null
|
// eslint-disable-next-line no-null/no-null
|
||||||
const containerRef = useRef<HTMLDivElement>(null);
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
@ -54,10 +53,7 @@ const ReactionSelectorReaction: FC<OwnProps> = ({
|
|||||||
>
|
>
|
||||||
{shouldRenderStatic && (
|
{shouldRenderStatic && (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn('static')}
|
||||||
'static',
|
|
||||||
isCurrentUserPremium && 'premium',
|
|
||||||
)}
|
|
||||||
style={`background-position-x: ${previewIndex * -REACTION_SIZE}px;`}
|
style={`background-position-x: ${previewIndex * -REACTION_SIZE}px;`}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user