[WALL] Aizad/WALL-4550/Adding Video Player as Common Components (bina…

…ry-com#16093)

* chore: added video player inside of componetns package

* chore: remove package from appstore

* chore: fix test case

* chore: fix test case pt.2

* chore: made changes inside of Trader package

* chore: remove unused class

* chore: retrigger vercel

* chore: removed unused styles

* chore: udpate video height

* chore: update video height

* chore: update stylings for Video Controls and minor sizing change for Onboarding video

packages/appstore/package.json

@@ -45,8 +45,7 @@
         "react-content-loader": "^6.2.0",
         "react-joyride": "^2.5.3",
         "react-router": "^5.2.0",
-        "react-router-dom": "^5.2.0",
-        "@cloudflare/stream-react": "^1.9.1"
+        "react-router-dom": "^5.2.0"
     },
     "devDependencies": {
         "@babel/eslint-parser": "^7.17.0",

packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.scss

@@ -32,12 +32,12 @@
     &__media-container {
         width: 56rem;
         height: 100%;
-        min-height: 32rem;
+        min-height: 30rem;
         filter: drop-shadow(0px 4px 6px rgba(14, 14, 14, 0.03)) drop-shadow(0px 12px 16px rgba(14, 14, 14, 0.08));
 
         @include mobile-screen {
-            width: 27.9rem;
-            min-height: 16.1rem;
+            width: 28rem;
+            min-height: 16rem;
         }
 
         @include tablet-screen {
@@ -46,18 +46,6 @@
         }
     }
 
-    &__video {
-        width: 100%;
-
-        iframe {
-            aspect-ratio: 16 / 9;
-            border-radius: $BORDER_RADIUS;
-            @include mobile-or-tablet-screen {
-                border-radius: 4px;
-            }
-        }
-    }
-
     &__text {
         display: flex;
         flex-direction: column;

packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { Analytics, TEvents } from '@deriv-com/analytics';
 import classNames from 'classnames';
-import { Stream } from '@cloudflare/stream-react';
-import { Button, Text, Modal } from '@deriv/components';
+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';
@@ -24,7 +23,7 @@ const trackAnalyticsEvent = (
 const WalletsUpgradeModal = observer(() => {
     const { traders_hub, ui } = useStore();
     const { is_demo, is_real_wallets_upgrade_on, toggleWalletsUpgrade } = traders_hub;
-    const { is_desktop } = ui;
+    const { is_desktop, is_mobile } = ui;
     const { is_eligible, startMigration } = useWalletMigration();
     const account_mode = is_demo ? 'demo' : 'real';
     const isWalletMigrationModalClosed = localStorage.getItem('is_wallet_migration_modal_closed');
@@ -65,17 +64,11 @@ const WalletsUpgradeModal = observer(() => {
             <Modal.Body>
                 <div className='wallets-upgrade-modal__content'>
                     <div className='wallets-upgrade-modal__media-container'>
-                        <Stream
-                            autoplay
-                            className='wallets-upgrade-modal__video'
-                            controls
-                            letterboxColor='transparent'
-                            loop
+                        <VideoPlayer
+                            height={is_desktop ? '311px' : '157px'}
+                            is_mobile={is_mobile}
                             muted
-                            preload='auto'
-                            responsive={false}
                             src='25df7df0d0af48090b086cd6f103d8f3'
-                            width='100%'
                         />
                     </div>
                     <div className='wallets-upgrade-modal__text'>

packages/components/package.json

@@ -72,6 +72,7 @@
         "webpack-cli": "^4.7.2"
     },
     "dependencies": {
+        "@cloudflare/stream-react": "^1.9.1",
         "@contentpass/zxcvbn": "^4.4.3",
         "@deriv-com/ui": "1.29.9",
         "@deriv/shared": "^1.0.0",

packages/trader/src/App/Components/Elements/VideoPlayer/__tests__/video-player.spec.tsx → packages/components/src/components/video-player/__tests__/video-player.spec.tsx

@@ -24,16 +24,16 @@ const mocked_props: React.ComponentProps<typeof VideoPlayer> = {
     src: 'test_src',
 };
 
-jest.mock('@deriv/components', () => ({
-    ...jest.requireActual('@deriv/components'),
-    Icon: jest.fn(({ icon }: { icon: string }) => <div>{icon}</div>),
+jest.mock('../../icon', () => ({
+    __esModule: true,
+    default: jest.fn(({ icon }: { icon: string }) => <div>{icon}</div>),
 }));
 
 jest.mock('@cloudflare/stream-react', () => ({
     ...jest.requireActual('@cloudflare/stream-react'),
     Stream: jest.fn(({ onEnded, onPlay, onLoadedMetaData, streamRef, src }: TMockedStreamProps) => (
         <video
-            data-testid='dt_video'
+            data-testid={video_data_testid}
             onClick={onEnded}
             onLoadedData={onLoadedMetaData}
             onPlay={onPlay}

packages/trader/src/App/Components/Elements/VideoPlayer/index.ts → packages/components/src/components/video-player/index.ts

@@ -1,3 +1,4 @@
 import VideoPlayer from './video-player';
+import './video-player.scss';
 
 export default VideoPlayer;

packages/trader/src/App/Components/Elements/VideoPlayer/playback-rate-control.tsx → packages/components/src/components/video-player/playback-rate-control.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Dropdown, Icon } from '@deriv/components';
+import Dropdown from '../dropdown';
+import Icon from '../icon';
 import { localize } from '@deriv/translations';
 
 type TPlaybackRateControl = {

packages/trader/src/App/Components/Elements/VideoPlayer/video-controls.tsx → packages/components/src/components/video-player/video-controls.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Text, Icon } from '@deriv/components';
+import Icon from '../icon';
+import Text from '../text';
 import { formatDurationTime } from '@deriv/shared';
 import VolumeControl from './volume-control';
 import PlaybackRateControl from './playback-rate-control';

packages/trader/src/App/Components/Elements/VideoPlayer/video-overlay.tsx → packages/components/src/components/video-player/video-overlay.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Icon } from '@deriv/components';
+import Icon from '../icon';
 
 type TVideoOverlay = {
     onClick: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;

packages/trader/src/sass/app/_common/components/video-player.scss → packages/components/src/components/video-player/video-player.scss

@@ -115,7 +115,7 @@
             align-items: center;
 
             svg {
-                margin: 0;
+                margin: 0 !important; // Override default margin from contract-type-info.scss
             }
         }
     }

packages/trader/src/App/Components/Elements/VideoPlayer/video-player.tsx → packages/components/src/components/video-player/video-player.tsx

@@ -11,18 +11,19 @@ type TVideoPlayerProps = {
     data_testid?: string;
     height?: string;
     is_mobile?: boolean;
+    muted?: boolean;
     src: string;
 };
 
-const VideoPlayer = ({ className, data_testid, height, is_mobile, src }: TVideoPlayerProps) => {
+const VideoPlayer = ({ className, data_testid, height, is_mobile, muted = false, src }: TVideoPlayerProps) => {
     const should_autoplay =
         (!isSafariBrowser() || (is_mobile && mobileOSDetect() !== 'iOS' && mobileOSDetect() !== 'unknown')) ?? true;
 
     const [current_time, setCurrentTime] = React.useState<number>();
     const [has_enlarged_dot, setHasEnlargedDot] = React.useState(false);
     const [is_animated, setIsAnimated] = React.useState(true);
     const [is_playing, setIsPlaying] = React.useState(false);
-    const [is_muted, setIsMuted] = React.useState(false);
+    const [is_muted, setIsMuted] = React.useState(muted);
     const [playback_rate, setPlaybackRate] = React.useState(1);
     const [show_controls, setShowControls] = React.useState(!should_autoplay);
     const [shift_X, setShiftX] = React.useState(0);

packages/trader/src/App/Components/Elements/VideoPlayer/volume-control.tsx → packages/components/src/components/video-player/volume-control.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { CSSTransition } from 'react-transition-group';
-import { Icon } from '@deriv/components';
+import Icon from '../icon';
 
 type TVolumeControl = {
     onVolumeChange: (new_value: number) => void;

packages/components/src/index.ts

@@ -123,6 +123,7 @@ export { default as UILoader } from './components/u-i-loader';
 export { default as UnhandledErrorModal } from './components/unhandled-error-modal';
 export { default as VerticalTab } from './components/vertical-tab';
 export { default as Wizard } from './components/wizard';
+export { default as VideoPlayer } from './components/video-player';
 export * from './components/wallet-card';
 export * from './components/wallet-icon';
 export * from './components/app-linked-with-wallet-icon';

packages/trader/package.json

@@ -87,7 +87,6 @@
         "webpack-node-externals": "^2.5.2"
     },
     "dependencies": {
-        "@cloudflare/stream-react": "^1.9.1",
         "@deriv-com/analytics": "1.11.0",
         "@deriv-com/quill-tokens": "^2.0.4",
         "@deriv-com/quill-ui": "1.13.27",

packages/trader/src/AppV2/Components/Guide/guide-description-modal.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { ActionSheet, Heading, Chip, Text } from '@deriv-com/quill-ui';
+import { VideoPlayer } from '@deriv/components';
 import { Localize } from '@deriv/translations';
 import { clickAndKeyEventHandler } from '@deriv/shared';
 import { AVAILABLE_CONTRACTS, CONTRACT_LIST } from 'AppV2/Utils/trade-types-utils';
 import { getDescriptionVideoIds } from 'AppV2/Utils/contract-description-utils';
-import VideoPlayer from 'App/Components/Elements/VideoPlayer';
 import TradeDescription from './Description/trade-description';
 import VideoPreview from './Description/video-preview';
 

packages/trader/src/Assets/Trading/Categories/contract-type-description-video.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
+import { VideoPlayer } from '@deriv/components';
 import { useStore } from '@deriv/stores';
 import { getDescriptionVideoId } from 'Modules/Trading/Helpers/video-config';
-import VideoPlayer from 'App/Components/Elements/VideoPlayer';
 
 type TContractTypeDescriptionVideo = {
     data_testid?: string;

packages/trader/src/sass/app.scss

@@ -21,7 +21,6 @@
 @import 'app/_common/components/contract-type-no-result';
 @import 'app/_common/components/market-is-closed-overlay';
 @import 'app/_common/components/number-selector';
-@import 'app/_common//components/video-player';
 @import 'app/_common/components/purchase-button';
 @import 'app/_common/components/range-slider';