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));
};