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.

Commit f2624c5

Browse files
yashim-derivyashimwong
yashim-deriv
and
yashimwong
authored
yashim/feat: updated blog carousel (#2043)
* Initial Commit * feat: add object parser * fix/feat: refactor repetitive functions + updated query * fix: corrected logic + data fetching * fix: conditional rendering * fix: misc updates * fetch newest * fix: structure fixes * fix: merge conflicts * refactor: whitespace redeploy * fix: date * fix: add featured check Co-authored-by: yashimwong <[email protected]>
1 parent 9839d3e commit f2624c5

File tree

8 files changed

+119
-107
lines changed

8 files changed

+119
-107
lines changed

‎src/common/utility.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { navigate } from 'gatsby'
22
import Cookies from 'js-cookie'
33
import extend from 'extend'
44
import {
5+
cms_assets_end_point,
56
deriv_cookie_domain,
67
deriv_app_languages,
78
live_chat_redirection_link,
@@ -255,3 +256,33 @@ export const convertDate = (date) => {
255256
newdate.toLocaleString('en', { year: 'numeric' })
256257
)
257258
}
259+
260+
// CMS Related Utilities
261+
export const getAssetUrl = (id) => `${cms_assets_end_point}${id}`
262+
263+
export const getVideoObject = (video_data) => {
264+
const {
265+
published_date,
266+
video_file,
267+
video_thumbnail,
268+
video_title,
269+
video_duration,
270+
video_description,
271+
featured,
272+
tags,
273+
} = video_data
274+
const { id: video_id } = video_file
275+
const { id: thumbnail_id, title: alt } = video_thumbnail
276+
277+
return {
278+
published_date,
279+
thumbnail_img: getAssetUrl(thumbnail_id),
280+
thumbnail_img_alt: alt,
281+
video_title,
282+
video_description,
283+
video_url: getAssetUrl(video_id),
284+
video_duration,
285+
featured,
286+
types: tags.map((t) => t.tags_id.tag_name),
287+
}
288+
}

‎src/pages/blog/_recent-featured-posts.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -227,7 +227,7 @@ const RecentFeaturedPosts = () => {
227227
</ArticleContentWrapper>
228228
</Tabs.Panel>
229229
</StyledTabs>
230-
<AllArticleButton tertiary to="/blog/articles/">
230+
<AllArticleButton tertiary="true" to="/blog/articles/">
231231
See all blog articles
232232
</AllArticleButton>
233233
</StyledContainer>

‎src/pages/blog/components/_markets-news.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ const MarketNews = ({ data }) => {
6868
data={data.main_image.imageFile}
6969
width="104px"
7070
height="78px"
71+
alt={data.main_image.alt || ''}
7172
/>
7273
<Flex ml="8px" fd="column">
7374
<Header type="paragraph-2" color="blue-9">
@@ -109,5 +110,5 @@ const MarketNews = ({ data }) => {
109110
export default MarketNews
110111

111112
MarketNews.propTypes = {
112-
data: PropTypes.object,
113+
data: PropTypes.array,
113114
}

‎src/pages/blog/index.js

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,25 @@ export const query = graphql`
5757
id
5858
}
5959
}
60+
videos(limit: 6, sort: "-published_date") {
61+
video_title
62+
published_date
63+
video_description
64+
video_duration
65+
featured
66+
video_thumbnail {
67+
id
68+
title
69+
}
70+
video_file {
71+
id
72+
}
73+
tags {
74+
tags_id {
75+
tag_name
76+
}
77+
}
78+
}
6079
}
6180
}
6281
`
@@ -80,6 +99,8 @@ const DerivBlog = ({ data }) => {
8099
}
81100
const homepage_banner_data = data.directus.homepage_banners
82101
const market_news_data = data.directus.blog
102+
const video_list_data = data.directus.videos
103+
83104
return (
84105
<Layout type="academy" is_ppc_redirect={true}>
85106
<SEO
@@ -113,7 +134,7 @@ const DerivBlog = ({ data }) => {
113134
</Carousel>
114135
</MainWrapper>
115136
<RecentFeaturedPosts />
116-
<DVideoBanner />
137+
<DVideoBanner video_list_data={video_list_data} />
117138
<MarketNews data={market_news_data} />
118139
<Container>
119140
<Flex direction="column" ai="flex-start" jc="space-between">

‎src/pages/blog/template/_side-cta/_side-cta.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const SideCta = () => {
3333
</Header>
3434

3535
<LinkButtonWrapper>
36-
<StyledLinkButton tertiary to="/landing/ebooks/stocks/">
36+
<StyledLinkButton tertiary="true" to="/landing/ebooks/stocks/">
3737
Claim free ebook
3838
</StyledLinkButton>
3939
</LinkButtonWrapper>

‎src/pages/blog/video-banner/_DBanner.js

Lines changed: 35 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import styled from 'styled-components'
33
import PropTypes from 'prop-types'
44
import VideoPlayer from '../_video-player'
55
import VideoCarousel from './_VideoCarousel'
6+
import { convertDate, getVideoObject } from 'common/utility'
67
import { Flex, Container } from 'components/containers'
78
import { Header } from 'components/elements'
89
import device from 'themes/device'
@@ -63,18 +64,30 @@ const StyledDot = styled.img`
6364
margin: 0 10px 4px;
6465
`
6566

66-
const Dbanner = ({ video_details, video_list }) => {
67+
const Dbanner = ({ video_list }) => {
6768
const [show, setShow] = useState(false)
6869
const handleCloseVideo = () => setShow(false)
6970
const handleOpenVideo = () => setShow(true)
71+
const featured_video = video_list.find((v) => v.featured)
72+
const filtered_video = video_list.filter((v) => v !== featured_video)
73+
74+
const {
75+
published_date,
76+
thumbnail_img,
77+
video_title,
78+
video_description,
79+
video_url,
80+
video_duration,
81+
types,
82+
} = getVideoObject(featured_video)
7083

7184
useEffect(() => {
7285
show ? (document.body.style.overflow = 'hidden') : (document.body.style.overflow = 'unset')
7386
}, [show])
7487

7588
return (
7689
<>
77-
<ParentWrapper direction="column" bg_image={video_details[0].bg_img_url}>
90+
<ParentWrapper direction="column" bg_image={thumbnail_img}>
7891
<Container direction="column" jc="flex-start">
7992
<Flex direction="column" jc="flex-start" height="auto">
8093
<PlayerIconWrapper
@@ -87,15 +100,24 @@ const Dbanner = ({ video_details, video_list }) => {
87100
<PlayerIcon width="20px" height="20px" src={PlayIcon} />
88101
</PlayerIconWrapper>
89102
<TagParentWrapper height="22px" jc="flex-start">
90-
<TagWrapper ai="center" width="auto" p="1px 8px">
91-
<Header type="paragraph-2" color="orange-2">
92-
{video_details[0].type}
93-
</Header>
94-
</TagWrapper>
103+
{types.slice(0, 2).map((t) => (
104+
<TagWrapper key={t} ai="center" width="auto" p="1px 8px" mr="8px">
105+
<Header type="paragraph-2" color="orange-2">
106+
{t}
107+
</Header>
108+
</TagWrapper>
109+
))}
110+
{types.length > 2 && (
111+
<TagWrapper ai="center" width="auto" p="1px 8px">
112+
<Header type="paragraph-2" color="orange-2">
113+
+2
114+
</Header>
115+
</TagWrapper>
116+
)}
95117
</TagParentWrapper>
96118

97119
<Header as="h2" type="heading-2" color="white" mb="8px">
98-
{video_details[0].title}
120+
{video_title}
99121
</Header>
100122
<Header
101123
as="p"
@@ -106,7 +128,7 @@ const Dbanner = ({ video_details, video_list }) => {
106128
max_width="894px"
107129
mobile_max_width="100%"
108130
>
109-
{video_details[0].description}
131+
{video_description}
110132
</Header>
111133
<Flex ai="center" jc="flex-start" height="24px">
112134
<Header
@@ -116,7 +138,7 @@ const Dbanner = ({ video_details, video_list }) => {
116138
color="grey-17"
117139
width="auto"
118140
>
119-
{video_details[0].published_date}
141+
{convertDate(published_date)}
120142
</Header>
121143
<StyledDot />
122144
<Header
@@ -126,25 +148,19 @@ const Dbanner = ({ video_details, video_list }) => {
126148
color="grey-17"
127149
width="auto"
128150
>
129-
{video_details[0].duration}
151+
{video_duration}
130152
</Header>
131153
</Flex>
132154
</Flex>
133-
<VideoCarousel carousel_items={video_list} />
155+
<VideoCarousel carousel_items={filtered_video} />
134156
</Container>
135157
</ParentWrapper>
136-
{show && (
137-
<VideoPlayer
138-
video_src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"
139-
closeVideo={handleCloseVideo}
140-
/>
141-
)}
158+
{show && <VideoPlayer video_src={video_url} closeVideo={handleCloseVideo} />}
142159
</>
143160
)
144161
}
145162

146163
Dbanner.propTypes = {
147-
video_details: PropTypes.array,
148164
video_list: PropTypes.array,
149165
}
150166

‎src/pages/blog/video-banner/_VideoCarousel.js

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { CustomCarousel } from './carousel/_custom-carousel'
77
import { Flex } from 'components/containers'
88
import { Header } from 'components/elements'
99
import { LinkButton } from 'components/form'
10+
import { convertDate, getVideoObject } from 'common/utility'
1011
import device from 'themes/device'
1112
import { useBrowserResize } from 'components/hooks/use-browser-resize'
1213
import PlayIcon from 'images/svg/blog/video/Triangle.svg'
@@ -94,10 +95,13 @@ const SeeMoreBtnMobile = styled(LinkButton)`
9495

9596
const VideoCarousel = ({ carousel_items }) => {
9697
const [show, setShow] = useState(false)
98+
const [video_src, setVideoSrc] = useState('')
9799
const [is_mobile] = useBrowserResize()
100+
98101
const handleCloseVideo = () => setShow(false)
99-
const handleOpenVideo = (event) => {
102+
const handleOpenVideo = (event, url) => {
100103
if (event.defaultPrevented) return
104+
setVideoSrc(url)
101105
setShow(true)
102106
}
103107

@@ -146,14 +150,23 @@ const VideoCarousel = ({ carousel_items }) => {
146150
<Flex height="auto">
147151
<CustomCarousel {...settings} custom_blog_video_nav>
148152
{carousel_items.map((item, index) => {
153+
const {
154+
published_date,
155+
thumbnail_img,
156+
thumbnail_img_alt,
157+
video_title,
158+
video_url,
159+
video_duration,
160+
} = getVideoObject(item)
161+
149162
return (
150163
<ItemsMainWrapper
151164
jc="flex-start"
152165
key={index}
153-
onClick={handleOpenVideo}
166+
onClick={(e) => handleOpenVideo(e, video_url)}
154167
>
155168
<ImgWrapper width="139px">
156-
<ImgDiv src={item.img_url} alt={item.image} />
169+
<ImgDiv src={thumbnail_img} alt={thumbnail_img_alt} />
157170
<PlayerIconWrapper absolute ai="center">
158171
<IconDiv>
159172
<PlayerIcon src={PlayIcon} />
@@ -162,7 +175,7 @@ const VideoCarousel = ({ carousel_items }) => {
162175
</ImgWrapper>
163176
<Flex direction="column" ml="8px" width="180px">
164177
<Header as="p" type="paragraph-1" color="white" mb="4px">
165-
{item.title}
178+
{video_title}
166179
</Header>
167180
<SmallDetailsWrapper
168181
height="24px"
@@ -176,7 +189,7 @@ const VideoCarousel = ({ carousel_items }) => {
176189
color="grey-17"
177190
width="auto"
178191
>
179-
{item.date}
192+
{convertDate(published_date)}
180193
</Header>
181194
<StyledDot />
182195
<Header
@@ -186,7 +199,7 @@ const VideoCarousel = ({ carousel_items }) => {
186199
color="grey-17"
187200
width="auto"
188201
>
189-
{item.duration}
202+
{video_duration}
190203
</Header>
191204
</SmallDetailsWrapper>
192205
</Flex>
@@ -203,12 +216,7 @@ const VideoCarousel = ({ carousel_items }) => {
203216
</SeeMoreBtnMobile>
204217
)}
205218
</Flex>
206-
{show && (
207-
<VideoPlayer
208-
video_src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"
209-
closeVideo={handleCloseVideo}
210-
/>
211-
)}
219+
{show && <VideoPlayer video_src={video_src} closeVideo={handleCloseVideo} />}
212220
</>
213221
)
214222
}

0 commit comments

Comments
 (0)