Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on May 20, 2025. It is now read-only.

Al-amin/Convert Dtrader page to TS #2408

Merged
8 commits merged into from
Jan 17, 2022
Merged

Al-amin/Convert Dtrader page to TS #2408

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1c8b29b
working on converting Dtrader page to TS
Dec 29, 2021
63ad36a
Merge branch 'master' of github.com:binary-com/deriv-com into Convert…
Dec 29, 2021
e60e5b2
convert DTrader page to TS
Dec 29, 2021
388b2c4
fixed code smell
Dec 29, 2021
9b8f135
resolved conflict
Dec 29, 2021
cb4259f
address PR comment
Dec 30, 2021
8deb6dc
address PR comment
Dec 31, 2021
361c63c
Address Pr comments
Jan 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 11 additions & 5 deletions src/pages/dtrader/_dtrader-video.js → src/pages/dtrader/_dtrader-tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ import device from 'themes/device.js'
import { isBrowser } from 'common/utility'
import { LinkButton } from 'components/form'

type StepCommonType = {
no_margin: boolean
}

const Container = styled.section`
width: 100%;
display: flex;
Expand Down Expand Up @@ -41,7 +45,8 @@ const TabsWrapper = styled.div`
margin-top: 0;
}
`
const StepCommon = css`

const StepCommon = css<StepCommonType>`
font-weight: 500;
cursor: pointer;
padding-left: 1.8rem;
Expand Down Expand Up @@ -104,8 +109,9 @@ const GotoLiveWrapper = styled.div`
margin: 4rem auto;
}
`

class DtraderTabs extends React.Component {
my_ref = React.createRef()
my_ref = React.createRef<HTMLVideoElement>()
interval_ref = undefined
state = {
current_time: 0,
Expand Down Expand Up @@ -143,7 +149,7 @@ class DtraderTabs extends React.Component {
this.updatePlay()
this.observer.observe(node)

const is_ios = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream
const is_ios = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window['MSStream']

this.setState({ is_ios })
}
Expand All @@ -153,7 +159,7 @@ class DtraderTabs extends React.Component {
}

updatePlay = async () => {
if (!this.my_ref.current.is_playing) {
if (!this.my_ref.current['is_playing']) {
try {
await this.my_ref.current.play()
} catch (err) {
Expand Down Expand Up @@ -262,7 +268,7 @@ class DtraderTabs extends React.Component {
controls={this.state.is_ios}
preload="metadata"
muted
playsinline
playsInline
>
<source src="/Dtrader_GIF.mp4" type="video/mp4" />
<source src="/Dtrader_GIF.webm" type="video/webm" />
Expand Down
4 changes: 2 additions & 2 deletions src/pages/dtrader/index.js → src/pages/dtrader/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import DTraderBG from 'images/svg/dtrader/dtrader-bg.svg'
import BackgroundPatternTrader from 'images/common/bg_banner_trader.png'
import DHero from 'components/custom/_dhero.js'
import DNumber from 'components/custom/_dnumbers.js'
const DtraderVideo = Loadable(() => import('./_dtrader-video.js'))
const DtraderVideo = Loadable(() => import('./_dtrader-tabs'))
const DTrading = Loadable(() => import('components/custom/_dtrading.js'))
const DBanner = Loadable(() => import('components/custom/_dbanner.js'))
const DHowItWorks = Loadable(() => import('components/custom/_dhow-it-works.js'))
Expand Down Expand Up @@ -72,7 +72,7 @@ const PlatformContainer = styled.div`
padding: 8rem 0;
`
const Dtrader = () => {
const [is_mobile, setMobile] = useState('')
const [is_mobile, setMobile] = useState(false)

const handleResizeWindow = () => {
setMobile(isBrowser() ? window.screen.width <= size.mobileL : false)
Expand Down