henry/fix: add video to accumulators info description (#9079)

* fix: add video to accumulators info description

* fix: change to has_toggle_buttons and make video component generic

* fix: change to rem

* fix: disable pic-in-pic mode for chrome and firefox

* fix: empty commit

* fix: remove download video option

* fix: empty commit

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { localize } from '@deriv/translations';
+import { getUrlBase, isMobile } from '@deriv/shared';
+import { useStore } from '@deriv/stores';
+
+const ContractTypeDescriptionVideo = ({ selected_contract_type }: { selected_contract_type: string }) => {
+    const { ui } = useStore();
+    const { is_dark_mode_on: is_dark_theme } = ui;
+    const getVideoSource = React.useCallback(
+        (extension: 'mp4' | 'webm') => {
+            return getUrlBase(
+                `/public/images/common/${selected_contract_type}_description${
+                    is_dark_theme ? '_dark' : '_light'
+                }.${extension}`
+            );
+        },
+        [is_dark_theme, selected_contract_type]
+    );
+
+    // memoize file paths for videos and open the modal only after we get them
+    const mp4_src = React.useMemo(() => getVideoSource('mp4'), [getVideoSource]);
+    const webm_src = React.useMemo(() => getVideoSource('webm'), [getVideoSource]);
+
+    if (selected_contract_type !== 'accumulator') return null;
+    return (
+        <video
+            autoPlay
+            loop
+            playsInline
+            disablePictureInPicture
+            controlsList='nodownload'
+            onContextMenu={e => e.preventDefault()}
+            preload='auto'
+            controls
+            width={isMobile() ? 328 : 480}
+            height={isMobile() ? 184.5 : 270}
+        >
+            {/* a browser will select a source with extension it recognizes */}
+            <source src={mp4_src} type='video/mp4' />
+            <source src={webm_src} type='video/webm' />
+            {localize('Unfortunately, your browser does not support the video.')}
+        </video>
+    );
+};
+
+export default React.memo(ContractTypeDescriptionVideo);

packages/trader/src/Assets/Trading/Categories/trade-categories-gif.jsx

@@ -14,13 +14,13 @@ import ImageReset from 'Assets/SvgComponents/trade_explanations/img-reset.svg';
 import ImageRiseFall from 'Assets/SvgComponents/trade_explanations/img-rise-fall.svg';
 import ImageRunHighLow from 'Assets/SvgComponents/trade_explanations/img-run-high-low.svg';
 import ImageSpread from 'Assets/SvgComponents/trade_explanations/img-spread.svg';
-import ImageAccumulator from 'Assets/SvgComponents/trade_explanations/img-accumulator.svg';
 import ImageTickHighLow from 'Assets/SvgComponents/trade_explanations/img-tick-high-low.svg';
 import ImageTouch from 'Assets/SvgComponents/trade_explanations/img-touch.svg';
 import ImageVanilla from 'Assets/SvgComponents/trade_explanations/img-vanilla.svg';
+import ContractTypeDescriptionVideo from './contract-type-description-video';
 
 // TODO: Replace static image svgs with themed GIFs or animated SVGs
-const TradeCategoriesGIF = ({ category }) => {
+const TradeCategoriesGIF = ({ category, selected_contract_type }) => {
     switch (category) {
         case 'asian':
             return <ImageAsianUpDown />;
@@ -53,7 +53,7 @@ const TradeCategoriesGIF = ({ category }) => {
         case 'run_high_low':
             return <ImageRunHighLow />;
         case 'accumulator':
-            return <ImageAccumulator />;
+            return <ContractTypeDescriptionVideo selected_contract_type={selected_contract_type} />;
         case 'tick_high_low':
             return <ImageTickHighLow />;
         case 'touch':
@@ -67,6 +67,7 @@ const TradeCategoriesGIF = ({ category }) => {
 
 TradeCategoriesGIF.propTypes = {
     category: PropTypes.string,
+    selected_contract_type: PropTypes.string,
 };
 
 export default TradeCategoriesGIF;

packages/trader/src/Modules/Trading/Components/Form/ContractType/ContractTypeInfo/contract-type-info.jsx

@@ -18,30 +18,22 @@ const Info = ({ handleNavigationClick, handleSelect, initial_index, item, list }
     const [carousel_index, setCarouselIndex] = React.useState('');
     const [selected_tab, setSelectedTab] = React.useState(TABS.DESCRIPTION);
     const contract_types = getContractTypes(list, item).filter(i => i.value !== 'rise_fall_equal');
-    const has_toggle_buttons = carousel_index !== 'accumulator' && carousel_index !== 'vanilla';
+    const has_toggle_buttons = /accumulator|vanilla/i.test(carousel_index);
     const is_description_tab_selected = selected_tab === TABS.DESCRIPTION;
     const is_glossary_tab_selected = selected_tab === TABS.GLOSSARY;
     const width = isMobile() ? '328' : '528';
-    const scroll_bar_height = has_toggle_buttons ? '560px' : '464px';
+    const scroll_bar_height = has_toggle_buttons ? '464px' : '560px';
     const selected_contract_type = contract_types.find(type => type.value === carousel_index);
 
     const onClickGlossary = () => setSelectedTab(TABS.GLOSSARY);
     const handleItemSelect = active_index => {
         setCarouselIndex(contract_types[active_index].value);
         handleNavigationClick(contract_types[active_index]);
-        if (has_toggle_buttons && is_glossary_tab_selected) {
-            setSelectedTab(TABS.DESCRIPTION);
-        }
     };
 
     const cards = contract_types.map((type, idx) => {
         return (
-            <div
-                key={idx}
-                className={classNames('contract-type-info__card', {
-                    'contract-type-info__card--has-toggle-buttons': !has_toggle_buttons,
-                })}
-            >
+            <div key={idx} className='contract-type-info__card'>
                 <ThemedScrollbars
                     className={classNames('contract-type-info__scrollbars', {
                         'contract-type-info__scrollbars-description--active': is_description_tab_selected,
@@ -60,10 +52,15 @@ const Info = ({ handleNavigationClick, handleSelect, initial_index, item, list }
                             'contract-type-info__gif--has-toggle-buttons': has_toggle_buttons,
                             'contract-type-info__content': is_glossary_tab_selected,
                             'contract-type-info__gif': is_description_tab_selected,
+                            'contract-type-info__gif--has-video':
+                                carousel_index === 'accumulator' && is_description_tab_selected,
                         })}
                     >
                         {is_description_tab_selected ? (
-                            <TradeCategoriesGIF category={type.value} />
+                            <TradeCategoriesGIF
+                                category={type.value}
+                                selected_contract_type={selected_contract_type?.value}
+                            />
                         ) : (
                             <ContractTypeGlossary category={type.value} />
                         )}
@@ -80,7 +77,7 @@ const Info = ({ handleNavigationClick, handleSelect, initial_index, item, list }
 
     return (
         <React.Fragment>
-            {!has_toggle_buttons && (
+            {has_toggle_buttons && (
                 <div className='contract-type-info__button-wrapper'>
                     <ButtonToggle
                         buttons_arr={[

packages/trader/src/sass/app/_common/components/contract-type-dialog.scss

@@ -105,4 +105,5 @@
 
 .contract-type-widget__header ~ .dc-mobile-dialog__content {
     height: 100%;
+    overflow-y: hidden;
 }

packages/trader/src/sass/app/_common/components/contract-type-info.scss

@@ -6,9 +6,9 @@
     flex-direction: column;
 
     @include mobile {
-        height: calc(100% - 148.5px);
+        height: calc(100% - 7.4rem);
         &--has-toggle-buttons {
-            height: calc(100% - 74px);
+            height: calc(100% - 14.85rem);
         }
     }
 
@@ -117,7 +117,7 @@
         height: 16.4rem;
         border-radius: 4px;
         text-align: center;
-        margin-top: 0;
+        margin-top: 1.6rem;
         margin-bottom: 1.6rem;
 
         @include mobile {
@@ -130,8 +130,16 @@
             }
         }
 
+        &--has-video {
+            height: 27rem;
+
+            @include mobile {
+                height: 18.45rem;
+            }
+        }
+
         &--has-toggle-buttons {
-            margin-top: 1.6rem;
+            margin-top: 0;
         }
     }
     &__action-bar {