diff --git a/packages/appstore/src/components/banners/wallets-banner/wallets-banner-unsuccessful.tsx b/packages/appstore/src/components/banners/wallets-banner/wallets-banner-unsuccessful.tsx index 79b975bfff08..f88c698409e2 100644 --- a/packages/appstore/src/components/banners/wallets-banner/wallets-banner-unsuccessful.tsx +++ b/packages/appstore/src/components/banners/wallets-banner/wallets-banner-unsuccessful.tsx @@ -19,9 +19,10 @@ const trackAnalyticsEvent = ( }; const WalletsBannerUnsuccessful = observer(() => { - const { traders_hub } = useStore(); + const { traders_hub, common } = useStore(); const { isDesktop, isMobile, isTablet } = useDevice(); const { is_demo, toggleWalletsUpgrade } = traders_hub; + const { current_language } = common; const account_mode = is_demo ? 'demo' : 'real'; let titleFontSize, descriptionFontSize, iconHeight, iconWidth; @@ -52,7 +53,10 @@ const WalletsBannerUnsuccessful = observer(() => { }; return ( -
+
= observer(({ is_upgrading }) => { - const { traders_hub } = useStore(); + const { traders_hub, common } = useStore(); const { isDesktop, isMobile, isTablet } = useDevice(); const { is_demo, toggleWalletsUpgrade } = traders_hub; + const { current_language } = common; const account_mode = is_demo ? 'demo' : 'real'; let titleFontSize, iconHeight, iconWidth; @@ -53,7 +54,7 @@ const WalletsBannerUpgrade: React.FC = observer(({ is_upgrading }) => { }; return ( -
+
{ - const { traders_hub } = useStore(); + const { traders_hub, common } = useStore(); const { is_demo } = traders_hub; + const { current_language } = common; const { isDesktop, isMobile, isTablet } = useDevice(); let titleFontSize, descriptionFontSize, iconHeight, iconWidth; @@ -39,7 +40,7 @@ const WalletsBannerUpgrading = observer(() => { }, [is_demo]); return ( -
+
diff --git a/packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.tsx b/packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.tsx index 6c138d927e4a..250a61877887 100644 --- a/packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.tsx +++ b/packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.tsx @@ -5,6 +5,10 @@ import { Button, Text, Modal, VideoPlayer } from '@deriv/components'; import { localize, Localize } from '@deriv/translations'; import { observer, useStore } from '@deriv/stores'; import { useWalletMigration } from '@deriv/hooks'; +import { + getWalletMigrationVideoTranslations, + WALLET_MIGRATION_VIDEO_TRANSLATIONS, +} from 'Constants/wallet-migration-video-translations'; import './wallets-upgrade-modal.scss'; const trackAnalyticsEvent = ( @@ -21,7 +25,8 @@ const trackAnalyticsEvent = ( }; const WalletsUpgradeModal = observer(() => { - const { traders_hub, ui } = useStore(); + const { traders_hub, ui, common } = useStore(); + const { current_language } = common; const { is_demo, is_real_wallets_upgrade_on, toggleWalletsUpgrade } = traders_hub; const { is_desktop, is_mobile } = ui; const { is_eligible, startMigration } = useWalletMigration(); @@ -30,6 +35,10 @@ const WalletsUpgradeModal = observer(() => { const [modalOpen, setModalOpen] = React.useState(!isWalletMigrationModalClosed); const is_open = (is_eligible && modalOpen) || is_real_wallets_upgrade_on; + const video_src = getWalletMigrationVideoTranslations( + current_language as keyof typeof WALLET_MIGRATION_VIDEO_TRANSLATIONS + ); + React.useEffect(() => { if (is_open) { trackAnalyticsEvent('open', account_mode); @@ -68,7 +77,7 @@ const WalletsUpgradeModal = observer(() => { height={is_desktop ? '311px' : '157px'} is_mobile={is_mobile} muted - src='25df7df0d0af48090b086cd6f103d8f3' + src={video_src} />
diff --git a/packages/appstore/src/constants/wallet-migration-video-translations.ts b/packages/appstore/src/constants/wallet-migration-video-translations.ts new file mode 100644 index 000000000000..ac7d4ee7f9ba --- /dev/null +++ b/packages/appstore/src/constants/wallet-migration-video-translations.ts @@ -0,0 +1,12 @@ +export const WALLET_MIGRATION_VIDEO_TRANSLATIONS = { + AR: 'e52c6a3b483e287e39e983791f50e592', + EN: '25df7df0d0af48090b086cd6f103d8f3', + // TODO: Add translations for other languages +} as const; + +export const getWalletMigrationVideoTranslations = (language_key: keyof typeof WALLET_MIGRATION_VIDEO_TRANSLATIONS) => { + if (language_key in WALLET_MIGRATION_VIDEO_TRANSLATIONS) { + return WALLET_MIGRATION_VIDEO_TRANSLATIONS[language_key]; + } + return WALLET_MIGRATION_VIDEO_TRANSLATIONS.EN; +}; diff --git a/packages/components/package.json b/packages/components/package.json index a35305b1f57a..e87e1328a0a1 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -75,6 +75,7 @@ "@cloudflare/stream-react": "^1.9.1", "@contentpass/zxcvbn": "^4.4.3", "@deriv-com/ui": "1.29.10", + "@deriv/hooks": "^1.0.0", "@deriv/shared": "^1.0.0", "@deriv/stores": "^1.0.0", "@deriv/translations": "^1.0.0", diff --git a/packages/components/src/components/video-player/video-player.tsx b/packages/components/src/components/video-player/video-player.tsx index bc3f13a2bb54..c86ea84604a6 100644 --- a/packages/components/src/components/video-player/video-player.tsx +++ b/packages/components/src/components/video-player/video-player.tsx @@ -1,6 +1,7 @@ import React from 'react'; import classNames from 'classnames'; import { Stream, StreamPlayerApi } from '@cloudflare/stream-react'; +import { useIsRtl } from '@deriv/hooks'; import { isSafariBrowser, mobileOSDetect } from '@deriv/shared'; import debounce from 'lodash.debounce'; import VideoOverlay from './video-overlay'; @@ -16,6 +17,8 @@ type TVideoPlayerProps = { }; const VideoPlayer = ({ className, data_testid, height, is_mobile, muted = false, src }: TVideoPlayerProps) => { + const is_rtl = useIsRtl(); + const should_autoplay = (!isSafariBrowser() || (is_mobile && mobileOSDetect() !== 'iOS' && mobileOSDetect() !== 'unknown')) ?? true; @@ -51,6 +54,7 @@ const VideoPlayer = ({ className, data_testid, height, is_mobile, muted = false, | TouchEvent | MouseEvent ) => { + const full_width = 100; const progress_bar = progress_bar_ref.current; const client_X = e.type === 'mousemove' || e.type === 'click' @@ -60,8 +64,9 @@ const VideoPlayer = ({ className, data_testid, height, is_mobile, muted = false, let new_width = ((client_X - shift_X - (progress_bar?.getBoundingClientRect().left ?? 0)) / (progress_bar?.getBoundingClientRect().width ?? 0)) * - 100; - if (new_width >= 100) new_width = 100; + full_width; + if (is_rtl) new_width = full_width - new_width; + if (new_width >= full_width) new_width = full_width; if (new_width <= 0) new_width = 0; return parseFloat(new_width.toFixed(3)); };