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.

yashim/feat: updated blog carousel #2043

Merged
15 commits merged into from
Aug 27, 2021
Merged

yashim/feat: updated blog carousel #2043

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
296bbf2
Initial Commit
yashimwong Aug 24, 2021
dce96c0
Merge branch 'blog' of https://github.com/binary-com/deriv-com into u…
yashim-deriv Aug 25, 2021
cc5855a
feat: add object parser
yashim-deriv Aug 25, 2021
a49694a
fix/feat: refactor repetitive functions + updated query
yashimwong Aug 25, 2021
07ea509
fix: corrected logic + data fetching
yashim-deriv Aug 25, 2021
7c7264e
fix: conditional rendering
yashim-deriv Aug 25, 2021
808052c
fix: misc updates
yashim-deriv Aug 25, 2021
0bf7681
fetch newest
yashimwong Aug 27, 2021
930e472
Merge branch 'blog' of github.com:binary-com/deriv-com into update_bl…
yashimwong Aug 27, 2021
83dcf00
fix: structure fixes
yashimwong Aug 27, 2021
0fd6704
Merge branch 'blog' of github.com:binary-com/deriv-com into update_bl…
yashimwong Aug 27, 2021
f19b2ea
fix: merge conflicts
yashimwong Aug 27, 2021
2b6f8c0
refactor: whitespace redeploy
yashim-deriv Aug 27, 2021
f0e1662
fix: date
yashim-deriv Aug 27, 2021
3351481
fix: add featured check
yashimwong Aug 27, 2021
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
31 changes: 31 additions & 0 deletions src/common/utility.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { navigate } from 'gatsby'
import Cookies from 'js-cookie'
import extend from 'extend'
import {
cms_assets_end_point,
deriv_cookie_domain,
deriv_app_languages,
live_chat_redirection_link,
Expand Down Expand Up @@ -255,3 +256,33 @@ export const convertDate = (date) => {
newdate.toLocaleString('en', { year: 'numeric' })
)
}

// CMS Related Utilities
export const getAssetUrl = (id) => `${cms_assets_end_point}${id}`

export const getVideoObject = (video_data) => {
const {
published_date,
video_file,
video_thumbnail,
video_title,
video_duration,
video_description,
featured,
tags,
} = video_data
const { id: video_id } = video_file
const { id: thumbnail_id, title: alt } = video_thumbnail

return {
published_date,
thumbnail_img: getAssetUrl(thumbnail_id),
thumbnail_img_alt: alt,
video_title,
video_description,
video_url: getAssetUrl(video_id),
video_duration,
featured,
types: tags.map((t) => t.tags_id.tag_name),
}
}
2 changes: 1 addition & 1 deletion src/pages/blog/_recent-featured-posts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,7 @@ const RecentFeaturedPosts = () => {
</ArticleContentWrapper>
</Tabs.Panel>
</StyledTabs>
<AllArticleButton tertiary to="/blog/articles/">
<AllArticleButton tertiary="true" to="/blog/articles/">
See all blog articles
</AllArticleButton>
</StyledContainer>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/blog/_video-player.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ const VideoPlayer = ({ video_src, closeVideo }) => {

VideoPlayer.propTypes = {
closeVideo: PropTypes.func,
video_src: PropTypes.object,
video_src: PropTypes.string,
}

export default VideoPlayer
3 changes: 2 additions & 1 deletion src/pages/blog/components/_markets-news.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ const MarketNews = ({ data }) => {
data={data.main_image.imageFile}
width="104px"
height="78px"
alt={data.main_image.alt || ''}
/>
<Flex ml="8px" fd="column">
<Header type="paragraph-2" color="blue-9">
Expand Down Expand Up @@ -109,5 +110,5 @@ const MarketNews = ({ data }) => {
export default MarketNews

MarketNews.propTypes = {
data: PropTypes.object,
data: PropTypes.array,
}
23 changes: 22 additions & 1 deletion src/pages/blog/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,25 @@ export const query = graphql`
id
}
}
videos(limit: 6, sort: "-published_date") {
video_title
published_date
video_description
video_duration
featured
video_thumbnail {
id
title
}
video_file {
id
}
tags {
tags_id {
tag_name
}
}
}
}
}
`
Expand All @@ -80,6 +99,8 @@ const DerivBlog = ({ data }) => {
}
const homepage_banner_data = data.directus.homepage_banners
const market_news_data = data.directus.blog
const video_list_data = data.directus.videos

return (
<Layout type="academy" is_ppc_redirect={true}>
<SEO
Expand Down Expand Up @@ -113,7 +134,7 @@ const DerivBlog = ({ data }) => {
</Carousel>
</MainWrapper>
<RecentFeaturedPosts />
<DVideoBanner />
<DVideoBanner video_list_data={video_list_data} />
<MarketNews data={market_news_data} />
<Container>
<Flex direction="column" ai="flex-start" jc="space-between">
Expand Down
2 changes: 1 addition & 1 deletion src/pages/blog/template/_side-cta/_side-cta.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const SideCta = () => {
</Header>

<LinkButtonWrapper>
<StyledLinkButton tertiary to="/landing/ebooks/stocks/">
<StyledLinkButton tertiary="true" to="/landing/ebooks/stocks/">
Claim free ebook
</StyledLinkButton>
</LinkButtonWrapper>
Expand Down
54 changes: 35 additions & 19 deletions src/pages/blog/video-banner/_DBanner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import styled from 'styled-components'
import PropTypes from 'prop-types'
import VideoPlayer from '../_video-player'
import VideoCarousel from './_VideoCarousel'
import { convertDate, getVideoObject } from 'common/utility'
import { Flex, Container } from 'components/containers'
import { Header } from 'components/elements'
import device from 'themes/device'
Expand Down Expand Up @@ -63,18 +64,30 @@ const StyledDot = styled.img`
margin: 0 10px 4px;
`

const Dbanner = ({ video_details, video_list }) => {
const Dbanner = ({ video_list }) => {
const [show, setShow] = useState(false)
const handleCloseVideo = () => setShow(false)
const handleOpenVideo = () => setShow(true)
const featured_video = video_list.find((v) => v.featured)
const filtered_video = video_list.filter((v) => v !== featured_video)

const {
published_date,
thumbnail_img,
video_title,
video_description,
video_url,
video_duration,
types,
} = getVideoObject(featured_video)

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

return (
<>
<ParentWrapper direction="column" bg_image={video_details[0].bg_img_url}>
<ParentWrapper direction="column" bg_image={thumbnail_img}>
<Container direction="column" jc="flex-start">
<Flex direction="column" jc="flex-start" height="auto">
<PlayerIconWrapper
Expand All @@ -87,15 +100,24 @@ const Dbanner = ({ video_details, video_list }) => {
<PlayerIcon width="20px" height="20px" src={PlayIcon} />
</PlayerIconWrapper>
<TagParentWrapper height="22px" jc="flex-start">
<TagWrapper ai="center" width="auto" p="1px 8px">
<Header type="paragraph-2" color="orange-2">
{video_details[0].type}
</Header>
</TagWrapper>
{types.slice(0, 2).map((t) => (
<TagWrapper key={t} ai="center" width="auto" p="1px 8px" mr="8px">
<Header type="paragraph-2" color="orange-2">
{t}
</Header>
</TagWrapper>
))}
{types.length > 2 && (
<TagWrapper ai="center" width="auto" p="1px 8px">
<Header type="paragraph-2" color="orange-2">
+2
</Header>
</TagWrapper>
)}
</TagParentWrapper>

<Header as="h2" type="heading-2" color="white" mb="8px">
{video_details[0].title}
{video_title}
</Header>
<Header
as="p"
Expand All @@ -106,7 +128,7 @@ const Dbanner = ({ video_details, video_list }) => {
max_width="894px"
mobile_max_width="100%"
>
{video_details[0].description}
{video_description}
</Header>
<Flex ai="center" jc="flex-start" height="24px">
<Header
Expand All @@ -116,7 +138,7 @@ const Dbanner = ({ video_details, video_list }) => {
color="grey-17"
width="auto"
>
{video_details[0].published_date}
{convertDate(published_date)}
</Header>
<StyledDot />
<Header
Expand All @@ -126,25 +148,19 @@ const Dbanner = ({ video_details, video_list }) => {
color="grey-17"
width="auto"
>
{video_details[0].duration}
{video_duration}
</Header>
</Flex>
</Flex>
<VideoCarousel carousel_items={video_list} />
<VideoCarousel carousel_items={filtered_video} />
</Container>
</ParentWrapper>
{show && (
<VideoPlayer
video_src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"
closeVideo={handleCloseVideo}
/>
)}
{show && <VideoPlayer video_src={video_url} closeVideo={handleCloseVideo} />}
</>
)
}

Dbanner.propTypes = {
video_details: PropTypes.array,
video_list: PropTypes.array,
}

Expand Down
32 changes: 20 additions & 12 deletions src/pages/blog/video-banner/_VideoCarousel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { CustomCarousel } from './carousel/_custom-carousel'
import { Flex } from 'components/containers'
import { Header } from 'components/elements'
import { LinkButton } from 'components/form'
import { convertDate, getVideoObject } from 'common/utility'
import device from 'themes/device'
import { useBrowserResize } from 'components/hooks/use-browser-resize'
import PlayIcon from 'images/svg/blog/video/Triangle.svg'
Expand Down Expand Up @@ -94,10 +95,13 @@ const SeeMoreBtnMobile = styled(LinkButton)`

const VideoCarousel = ({ carousel_items }) => {
const [show, setShow] = useState(false)
const [video_src, setVideoSrc] = useState('')
const [is_mobile] = useBrowserResize()

const handleCloseVideo = () => setShow(false)
const handleOpenVideo = (event) => {
const handleOpenVideo = (event, url) => {
if (event.defaultPrevented) return
setVideoSrc(url)
setShow(true)
}

Expand Down Expand Up @@ -146,14 +150,23 @@ const VideoCarousel = ({ carousel_items }) => {
<Flex height="auto">
<CustomCarousel {...settings} custom_blog_video_nav>
{carousel_items.map((item, index) => {
const {
published_date,
thumbnail_img,
thumbnail_img_alt,
video_title,
video_url,
video_duration,
} = getVideoObject(item)

return (
<ItemsMainWrapper
jc="flex-start"
key={index}
onClick={handleOpenVideo}
onClick={(e) => handleOpenVideo(e, video_url)}
>
<ImgWrapper width="139px">
<ImgDiv src={item.img_url} alt={item.image} />
<ImgDiv src={thumbnail_img} alt={thumbnail_img_alt} />
<PlayerIconWrapper absolute ai="center">
<IconDiv>
<PlayerIcon src={PlayIcon} />
Expand All @@ -162,7 +175,7 @@ const VideoCarousel = ({ carousel_items }) => {
</ImgWrapper>
<Flex direction="column" ml="8px" width="180px">
<Header as="p" type="paragraph-1" color="white" mb="4px">
{item.title}
{video_title}
</Header>
<SmallDetailsWrapper
height="24px"
Expand All @@ -176,7 +189,7 @@ const VideoCarousel = ({ carousel_items }) => {
color="grey-17"
width="auto"
>
{item.date}
{convertDate(published_date)}
</Header>
<StyledDot />
<Header
Expand All @@ -186,7 +199,7 @@ const VideoCarousel = ({ carousel_items }) => {
color="grey-17"
width="auto"
>
{item.duration}
{video_duration}
</Header>
</SmallDetailsWrapper>
</Flex>
Expand All @@ -203,12 +216,7 @@ const VideoCarousel = ({ carousel_items }) => {
</SeeMoreBtnMobile>
)}
</Flex>
{show && (
<VideoPlayer
video_src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"
closeVideo={handleCloseVideo}
/>
)}
{show && <VideoPlayer video_src={video_src} closeVideo={handleCloseVideo} />}
</>
)
}
Expand Down
Loading