-
Notifications
You must be signed in to change notification settings - Fork 299
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
1 parent
b2ed069
commit 0d69847
Showing
10 changed files
with
73 additions
and
21 deletions.
There are no files selected for viewing
Binary file added
BIN
+3.82 MB
packages/core/src/public/images/common/static_images/accumulator_description_dark.mp4
Binary file not shown.
Binary file added
BIN
+2.55 MB
packages/core/src/public/images/common/static_images/accumulator_description_dark.webm
Binary file not shown.
Binary file added
BIN
+3.82 MB
packages/core/src/public/images/common/static_images/accumulator_description_light.mp4
Binary file not shown.
Binary file added
BIN
+2.51 MB
packages/core/src/public/images/common/static_images/accumulator_description_light.webm
Binary file not shown.
1 change: 0 additions & 1 deletion
1
packages/trader/src/Assets/SvgComponents/trade_explanations/img-accumulator.svg
This file was deleted.
Oops, something went wrong.
46 changes: 46 additions & 0 deletions
46
packages/trader/src/Assets/Trading/Categories/contract-type-description-video.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -105,4 +105,5 @@ | |
|
||
.contract-type-widget__header ~ .dc-mobile-dialog__content { | ||
height: 100%; | ||
overflow-y: hidden; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
0d69847
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
deriv-app – ./
deriv-app.vercel.app
binary.sx
deriv-app.binary.sx
deriv-app-git-master.binary.sx