Maryia/83069/task: replace image with video manual

packages/core/src/Stores/contract-store.js

@@ -263,8 +263,13 @@ function calculate_marker(contract_info) {
         high_barrier,
         low_barrier,
     } = contract_info;
-    const ticks_epoch_array = tick_stream ? tick_stream.map(t => t.epoch) : [];
+    const is_accumulator_contract = isAccumulatorContract(contract_type);
     const is_digit_contract = isDigitContract(contract_type);
+    const ticks_epochs =
+        (is_accumulator_contract && tick_stream?.length === 10
+            ? [entry_tick_time, ...tick_stream.map(t => t.epoch).slice(1)]
+            : tick_stream?.map(t => t.epoch)) || [];
+    const ticks_epoch_array = tick_stream ? ticks_epochs : [];
 
     // window.ci = toJS(contract_info);
 

packages/trader/src/Modules/Contract/Components/AccumulatorsStats/__tests__/accumulators-stats.spec.js

@@ -44,7 +44,7 @@ describe('AccumulatorsStats', () => {
     it('should show manual after info icon is clicked', () => {
         const { container } = render(<AccumulatorsStats />);
         fireEvent.click(container.querySelector('.info'));
-        expect(screen.getByAltText('accumulators_stats_manual')).toBeInTheDocument();
+        expect(screen.getByTestId('dt_accumulators_stats_manual')).toBeInTheDocument();
     });
     it('should render partial history values (tick counters) when initially collapsed in desktop', () => {
         render(<AccumulatorsStats />);

packages/trader/src/Modules/Contract/Components/AccumulatorsStats/accumulators-stats-manual-modal.jsx

@@ -7,28 +7,35 @@ import 'Sass/app/modules/contract/accumulators-stats.scss';
 
 const AccumulatorsStatsManualModal = ({ title, icon_classname, is_manual_open, toggleManual }) => {
     const is_mobile = isMobile();
-    const image_src = React.useMemo(() => {
-        // memoize image source and open the modal only after we get it to avoid showing empty modal
-        return getUrlBase(`/public/images/common/accumulators_stats_manual_${is_mobile ? 'mobile' : 'desktop'}.svg`);
-    }, [is_mobile]);
+    // memoize video sources and open the modal only after we get them to avoid showing half-empty modal
+    const getVideoSource = React.useCallback(
+        extension => {
+            return getUrlBase(
+                `/public/images/common/accumulators_stats_manual_${is_mobile ? 'mobile' : 'desktop'}.${extension}`
+            );
+        },
+        [is_mobile]
+    );
     return (
         <React.Fragment>
             <Icon icon='IcInfoOutline' onClick={toggleManual} size={16} className={icon_classname} />
             <Modal
-                id='dt_accumulators_stats_manual_modal'
-                is_open={is_manual_open && !!image_src}
+                is_open={is_manual_open && !!getVideoSource('mp4') && !!getVideoSource('webm')}
                 should_header_stick_body={false}
                 title={title}
                 toggleModal={toggleManual}
                 width={is_mobile ? '328px' : '596px'}
                 className='accumulators-stats-manual-modal'
             >
                 <Modal.Body className='accumulators-stats-modal-body'>
-                    <img
-                        src={image_src}
-                        alt='accumulators_stats_manual'
-                        className='accumulators-stats-modal-body__image'
-                    />
+                    <div className='accumulators-stats-modal-body__video' data-testid='dt_accumulators_stats_manual'>
+                        <video width={is_mobile ? 296 : 563} autoPlay loop playsInline>
+                            {/* a browser will select a source with extension it recognizes */}
+                            <source src={getVideoSource('mp4')} type='video/mp4' />
+                            <source src={getVideoSource('webm')} type='video/webm' />
+                            {localize('Unfortunately, your browser does not support the video.')}
+                        </video>
+                    </div>
                     <Text
                         as='p'
                         size={is_mobile ? 'xs' : 's'}

packages/trader/src/Modules/Contract/Components/AccumulatorsStats/accumulators-stats.jsx

@@ -12,7 +12,7 @@ import 'Sass/app/modules/contract/accumulators-stats.scss';
 export const ROW_SIZES = {
     DESKTOP_COLLAPSED: 10,
     DESKTOP_EXPANDED: 10,
-    MOBILE_COLLAPSED: 6,
+    MOBILE_COLLAPSED: 15,
     MOBILE_EXPANDED: 5,
 };
 
@@ -69,13 +69,6 @@ const AccumulatorsStats = ({ is_expandable = true, ticks_history_stats = {} }) =
                         rows[0]?.map((el, i) => <TicksHistoryCounter key={i} value={el} has_progress_dots={i === 0} />)
                     )}
                 </Text>
-                {is_expandable && (
-                    <Icon
-                        icon={is_collapsed ? 'IcArrowUp' : 'IcArrowDown'}
-                        onClick={() => setIsCollapsed(!is_collapsed)}
-                        className='accordion-toggle-arrow'
-                    />
-                )}
             </div>
             {is_expandable && !is_collapsed && (
                 <DynamicWrapper.Component {...DynamicWrapper.props}>
@@ -94,6 +87,13 @@ const AccumulatorsStats = ({ is_expandable = true, ticks_history_stats = {} }) =
                     </Text>
                 </DynamicWrapper.Component>
             )}
+            {is_expandable && (
+                <Icon
+                    icon={is_collapsed ? 'IcArrowUp' : 'IcArrowDown'}
+                    onClick={() => setIsCollapsed(!is_collapsed)}
+                    className='accordion-toggle-arrow'
+                />
+            )}
         </div>
     );
 };

packages/trader/src/sass/app/modules/contract/accumulators-stats.scss

@@ -30,6 +30,7 @@
         left: -0.8rem;
         margin: 0 0.8rem;
         width: calc(100vw - 1.6rem);
+        padding-right: 3rem;
     }
 
     /* Screen height fixes due to UI space restrictions */
@@ -53,6 +54,7 @@
         @include mobile {
             width: 100%;
             height: 4rem;
+            overflow-x: hidden;
         }
     }
     &__title {
@@ -204,12 +206,19 @@
     align-items: center;
     padding: 1.6rem;
 
-    &__image {
+    &__video {
         margin-bottom: 0.8rem;
+        overflow: hidden;
+        width: 56.3rem;
+        height: 44.8rem;
+        video {
+            transform: scale(1);
+        }
 
         @include mobile {
-            margin: 0.8rem 0 1.6rem;
-            max-width: 100%;
+            margin: 0 0 0.8rem;
+            width: 29.6rem;
+            height: 30.3rem;
         }
     }
     @include mobile {