From 296bbf24778c32f3c98df8ce5dcf3b4a90d83d04 Mon Sep 17 00:00:00 2001 From: yashimwong Date: Tue, 24 Aug 2021 20:25:15 +0800 Subject: [PATCH 01/12] Initial Commit --- src/pages/blog/_recent-featured-posts.js | 341 +++++++++--------- src/pages/blog/_video-player.js | 2 +- src/pages/blog/articles/index.js | 2 +- src/pages/blog/components/_markets-news.js | 3 +- src/pages/blog/index.js | 18 +- .../blog/template/_side-cta/_side-cta.js | 2 +- src/pages/blog/video-banner/_VideoCarousel.js | 32 +- src/pages/blog/video-banner/index.js | 68 +--- 8 files changed, 223 insertions(+), 245 deletions(-) diff --git a/src/pages/blog/_recent-featured-posts.js b/src/pages/blog/_recent-featured-posts.js index 589b2a5c9a6..ed24b8105f0 100644 --- a/src/pages/blog/_recent-featured-posts.js +++ b/src/pages/blog/_recent-featured-posts.js @@ -1,7 +1,12 @@ import React from 'react' import Clock from './recent-featured-posts/images/clock.svg' import Dot from './recent-featured-posts/images/dot.svg' -import { recent_article_data, featured_article_data, article_data, article_data_2 } from './recent-featured-posts/_data' +import { + recent_article_data, + featured_article_data, + article_data, + article_data_2, +} from './recent-featured-posts/_data' import { StyledContainer, StyledTabs, @@ -57,175 +62,175 @@ const RecentFeaturedPosts = () => { const articles_2 = article_data_2 return ( - - - - - - - - - - - - {recent.category} - - - -

- {recent.title} -

- {recent.description} -

- - - {recent.date} - - {recent.reading_time} min read - - - - - - - {articles.map((article) => { - return ( - - - - - - - - - - - {article.category} - - - {article.date} - - {article.reading_time} min - -

- {article.title} -

- - + + + + + + + + + + + + {recent.category} + + + +

+ {recent.title} +

+ {recent.description} +

+ + + {recent.date} + + {recent.reading_time} min read + + + + + + + {articles.map((article) => { + return ( + + + + + + + + + + + {article.category} + + + {article.date} + + {article.reading_time} min + +

{article.title} - - - {article.date} - {article.reading_time} min read - - - - - ) - })} - - - - - - - - - - - - - - {featured.category} - - - -

- {featured.title} -

- {featured.description} -

- - - {featured.date} - {featured.reading_time} min read - - - - - - - {articles_2.map((article) => { - return ( - - - - - - - - - - - {article.category} - - - {article.date} - - {article.reading_time} min - -

- {article.title} -

- - +

+ + + {article.title} + + + {article.date} + {article.reading_time} min read + + + + + ) + })} + + + + + + + + + + + + + + {featured.category} + + + +

+ {featured.title} +

+ {featured.description} +

+ + + {featured.date} + {featured.reading_time} min read + + + + + + + {articles_2.map((article) => { + return ( + + + + + + + + + + + {article.category} + + + {article.date} + + {article.reading_time} min + +

{article.title} - - - {article.date} - {article.reading_time} min read - - - - - ) - })} - - - - - - - See all blog articles - - +

+ + + {article.title} + + + {article.date} + {article.reading_time} min read + + + + + ) + })} + + + + + + + See all blog articles + + ) } diff --git a/src/pages/blog/_video-player.js b/src/pages/blog/_video-player.js index 749e86fedee..277e37d1836 100644 --- a/src/pages/blog/_video-player.js +++ b/src/pages/blog/_video-player.js @@ -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 diff --git a/src/pages/blog/articles/index.js b/src/pages/blog/articles/index.js index 7260e0372e3..c0d1a6604d4 100644 --- a/src/pages/blog/articles/index.js +++ b/src/pages/blog/articles/index.js @@ -86,7 +86,7 @@ ArticlesPage.propTypes = { export default WithIntl()(ArticlesPage) export const query = graphql` - query MyQuery { + query Articles { directus { blog(filter: { status: { _eq: "published" } }, sort: "-published_date") { id diff --git a/src/pages/blog/components/_markets-news.js b/src/pages/blog/components/_markets-news.js index 6d7d6910791..876cfd2beab 100644 --- a/src/pages/blog/components/_markets-news.js +++ b/src/pages/blog/components/_markets-news.js @@ -68,6 +68,7 @@ const MarketNews = ({ data }) => { data={data.main_image.imageFile} width="104px" height="78px" + alt={data.main_image.alt || ''} />

@@ -109,5 +110,5 @@ const MarketNews = ({ data }) => { export default MarketNews MarketNews.propTypes = { - data: PropTypes.object, + data: PropTypes.array, } diff --git a/src/pages/blog/index.js b/src/pages/blog/index.js index b858bcdcfdc..67c3eb0eb6b 100644 --- a/src/pages/blog/index.js +++ b/src/pages/blog/index.js @@ -18,7 +18,7 @@ const MainWrapper = styled(Flex)` overflow: hidden; ` export const query = graphql` - query MyQuery { + query Blog { directus { homepage_banners(filter: { status: { _eq: "published" } }) { id @@ -55,6 +55,18 @@ export const query = graphql` id } } + videos { + video_title + published_date + video_description + video_thumbnail { + id + description + } + video_file { + id + } + } } } ` @@ -78,6 +90,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 ( { - + diff --git a/src/pages/blog/template/_side-cta/_side-cta.js b/src/pages/blog/template/_side-cta/_side-cta.js index 07ad11790ef..98fd57a7e2f 100644 --- a/src/pages/blog/template/_side-cta/_side-cta.js +++ b/src/pages/blog/template/_side-cta/_side-cta.js @@ -33,7 +33,7 @@ const SideCta = () => {

- + Claim free ebook diff --git a/src/pages/blog/video-banner/_VideoCarousel.js b/src/pages/blog/video-banner/_VideoCarousel.js index dad927e455c..c83557aaca7 100644 --- a/src/pages/blog/video-banner/_VideoCarousel.js +++ b/src/pages/blog/video-banner/_VideoCarousel.js @@ -94,12 +94,16 @@ const SeeMoreBtnMobile = styled(LinkButton)` const VideoCarousel = ({ carousel_items }) => { const [show, setShow] = useState(false) + const [video_url, setVideoUrl] = useState('') const [is_mobile] = useBrowserResize() + const handleCloseVideo = () => setShow(false) - const handleOpenVideo = (event) => { + const handleOpenVideo = (event, video_id) => { if (event.defaultPrevented) return + setVideoUrl(getAssetUrl(video_id)) setShow(true) } + const getAssetUrl = (id) => `https://cms.deriv.cloud/assets/${id}` useEffect(() => { show ? (document.body.style.overflow = 'hidden') : (document.body.style.overflow = 'unset') @@ -146,14 +150,23 @@ const VideoCarousel = ({ carousel_items }) => { {carousel_items.map((item, index) => { + const { published_date, video_file, video_thumbnail, video_title } = + item + + const { id: video_id, duration } = video_file + const { id: thumbnail_id, description: thumbnail_alt } = video_thumbnail + return ( handleOpenVideo(e, video_id)} > - + @@ -162,7 +175,7 @@ const VideoCarousel = ({ carousel_items }) => {

- {item.title} + {video_title}

{ color="grey-17" width="auto" > - {item.date} + {published_date}

{ color="grey-17" width="auto" > - {item.duration} + {duration}

@@ -203,12 +216,7 @@ const VideoCarousel = ({ carousel_items }) => { )} - {show && ( - - )} + {show && } ) } diff --git a/src/pages/blog/video-banner/index.js b/src/pages/blog/video-banner/index.js index bfab6cdf655..73c63ce5d15 100644 --- a/src/pages/blog/video-banner/index.js +++ b/src/pages/blog/video-banner/index.js @@ -1,4 +1,5 @@ import React from 'react' +import PropTypes from 'prop-types' import Dbanner from './_DBanner' // import Layout from 'components/layout/layout' import { Flex } from 'components/containers' @@ -17,69 +18,18 @@ const MainVidDetails = [ }, ] -const carouselItem = [ - { - image: 'video_banner_1', - title: 'The weekly market report, 07.06.2021 - 13.06.2021', - date: 'April 7, 2021', - duration: '14:09', - img_url: - 'https://blog.deriv.com/content/images/size/w1000/2021/06/shutterstock_1220527444.jpg', - }, - { - image: 'video_banner_2', - title: 'Open a new DMT5 Real Synthetic account on our new servers', - date: 'April 7, 2021', - duration: '14:09', - img_url: - 'https://blog.deriv.com/content/images/size/w1000/2021/05/Weekly-market-report-with-Deriv.jpg', - }, - { - image: 'video_banner_3', - title: '7 traits of successful financial traders', - date: 'April 7, 2021', - duration: '14:09', - img_url: - 'https://blog.deriv.com/content/images/size/w1000/2021/05/Market-report-with-Deriv.jpg', - }, - { - image: 'video_banner_4', - title: 'How To Trade Forex', - date: 'April 7, 2021', - duration: '14:09', - img_url: - 'https://blog.deriv.com/content/images/size/w1000/2021/05/Deriv-weekly-market-report.jpg', - }, - { - image: 'video_banner_5', - title: '5 Golden Rules to Follow When Trading Stock CFDs', - date: 'April 7, 2021', - duration: '14:09', - img_url: - 'https://blog.deriv.com/content/images/size/w1000/2021/05/Deriv-weekly-market-report.jpg', - }, - { - image: 'video_banner_1', - title: 'Strategies to Trade Synthetic Indices', - date: 'April 7, 2021', - duration: '14:09', - img_url: 'https://blog.deriv.com/content/images/size/w1000/2021/05/BeSquare-by-Deriv.png', - }, - { - image: 'video_banner_3', - title: 'Multipliers: Leverage without losing your shirt', - date: 'April 7, 2021', - duration: '14:09', - img_url: 'https://blog.deriv.com/content/images/size/w1000/2021/04/Changelly2-1.jpg', - }, -] - -const DVideoBanner = () => { +const DVideoBanner = ({ video_details, video_list_data }) => { + const details = video_details || MainVidDetails return ( - + ) } +DVideoBanner.propTypes = { + video_details: PropTypes.array, + video_list_data: PropTypes.array, +} + export default DVideoBanner From cc5855a9fe20ecfdd4543cc52db4528e2e47e159 Mon Sep 17 00:00:00 2001 From: yashim-deriv Date: Wed, 25 Aug 2021 11:55:23 +0800 Subject: [PATCH 02/12] feat: add object parser --- src/pages/blog/index.js | 2 +- src/pages/blog/utils/utils.js | 21 +++++++++++++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 src/pages/blog/utils/utils.js diff --git a/src/pages/blog/index.js b/src/pages/blog/index.js index 157ef754927..7fa900520a3 100644 --- a/src/pages/blog/index.js +++ b/src/pages/blog/index.js @@ -127,7 +127,7 @@ const DerivBlog = ({ data }) => { - + diff --git a/src/pages/blog/utils/utils.js b/src/pages/blog/utils/utils.js new file mode 100644 index 00000000000..e43186fdfe1 --- /dev/null +++ b/src/pages/blog/utils/utils.js @@ -0,0 +1,21 @@ +const getAssetUrl = (id) => `https://cms.deriv.cloud/assets/${id}` + +export const getVideoObject = (video_data) => { + // eslint-disable-next-line + console.log(video_data) + const { published_date, video_file, video_thumbnail, video_title, tags } = video_data + + const { id: video_id, duration } = video_file + const { id: thumbnail_id, description } = video_thumbnail + const types = tags.map((t) => t.tags_id.tag_name) + + return { + published_date, + thumbnail_img: getAssetUrl(thumbnail_id), + thumbnail_img_alt: description, + video_title, + video_url: getAssetUrl(video_id), + video_duration: duration, + types, + } +} From a49694a6a82ae0fdc76e1cdd94d525bbe0814678 Mon Sep 17 00:00:00 2001 From: yashimwong Date: Wed, 25 Aug 2021 13:52:31 +0800 Subject: [PATCH 03/12] fix/feat: refactor repetitive functions + updated query --- src/common/constants.js | 1 + src/common/utility.js | 22 +++++++++++ src/pages/blog/index.js | 5 +++ src/pages/blog/utils/utils.js | 21 ---------- src/pages/blog/video-banner/_DBanner.js | 39 +++++++++++-------- src/pages/blog/video-banner/_VideoCarousel.js | 31 +++++++-------- src/pages/blog/video-banner/index.js | 19 +-------- 7 files changed, 68 insertions(+), 70 deletions(-) delete mode 100644 src/pages/blog/utils/utils.js diff --git a/src/common/constants.js b/src/common/constants.js index 1d3f66b5d13..5e3c8a8042f 100644 --- a/src/common/constants.js +++ b/src/common/constants.js @@ -95,3 +95,4 @@ export const linkedin_url_career = 'https://www.linkedin.com/company/derivdotcom export const twitter_non_eu_url = 'https://twitter.com/derivdotcom/' export const twitter_uk_url = 'https://www.twitter.com/deriv_uk/' export const twitter_eu_url = 'https://www.twitter.com/deriv_eu/' +export const cms_endpoint = 'https://cms.deriv.cloud/' diff --git a/src/common/utility.js b/src/common/utility.js index b72b559eb7f..b286776e225 100644 --- a/src/common/utility.js +++ b/src/common/utility.js @@ -2,6 +2,7 @@ import { navigate } from 'gatsby' import Cookies from 'js-cookie' import extend from 'extend' import { + cms_endpoint, deriv_cookie_domain, deriv_app_languages, live_chat_redirection_link, @@ -244,3 +245,24 @@ export const redirectOpenLiveChatBox = (is_redirect) => { navigate(live_chat_redirection_link, { replace: true }) } } + +// Blog Related Utilities +// Get Assets +export const getAssetUrl = (id) => `${cms_endpoint}/assets/${id}` + +export const getVideoObject = (video_data) => { + const { published_date, video_file, video_thumbnail, video_title, tags } = video_data + + const { id: video_id, duration } = video_file + const { id: thumbnail_id, description } = video_thumbnail + + return { + published_date, + thumbnail_img: getAssetUrl(thumbnail_id), + thumbnail_img_alt: description, + video_title, + video_url: getAssetUrl(video_id), + video_duration: duration, + types: tags.map((t) => t.tags_id.tag_name), + } +} diff --git a/src/pages/blog/index.js b/src/pages/blog/index.js index 7fa900520a3..fc58557b41b 100644 --- a/src/pages/blog/index.js +++ b/src/pages/blog/index.js @@ -68,6 +68,11 @@ export const query = graphql` video_file { id } + tags { + tags_id { + tag_name + } + } } } } diff --git a/src/pages/blog/utils/utils.js b/src/pages/blog/utils/utils.js deleted file mode 100644 index e43186fdfe1..00000000000 --- a/src/pages/blog/utils/utils.js +++ /dev/null @@ -1,21 +0,0 @@ -const getAssetUrl = (id) => `https://cms.deriv.cloud/assets/${id}` - -export const getVideoObject = (video_data) => { - // eslint-disable-next-line - console.log(video_data) - const { published_date, video_file, video_thumbnail, video_title, tags } = video_data - - const { id: video_id, duration } = video_file - const { id: thumbnail_id, description } = video_thumbnail - const types = tags.map((t) => t.tags_id.tag_name) - - return { - published_date, - thumbnail_img: getAssetUrl(thumbnail_id), - thumbnail_img_alt: description, - video_title, - video_url: getAssetUrl(video_id), - video_duration: duration, - types, - } -} diff --git a/src/pages/blog/video-banner/_DBanner.js b/src/pages/blog/video-banner/_DBanner.js index 370c9143c21..c32d10971bf 100644 --- a/src/pages/blog/video-banner/_DBanner.js +++ b/src/pages/blog/video-banner/_DBanner.js @@ -3,6 +3,7 @@ import styled from 'styled-components' import PropTypes from 'prop-types' import VideoPlayer from '../_video-player' import VideoCarousel from './_VideoCarousel' +import { getVideoObject } from 'common/utility' import { Flex, Container } from 'components/containers' import { Header } from 'components/elements' import device from 'themes/device' @@ -63,18 +64,28 @@ 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 { + published_date, + thumbnail_img, + thumbnail_img_alt, + video_title, + video_url, + video_duration, + types, + } = getVideoObject(video_list[0]) + useEffect(() => { show ? (document.body.style.overflow = 'hidden') : (document.body.style.overflow = 'unset') }, [show]) return ( <> - + { -

- {video_details[0].type} -

+ {types.map((t) => ( +

+ {t} +

+ ))}

- {video_details[0].title} + {video_title}

{ max_width="894px" mobile_max_width="100%" > - {video_details[0].description} + {thumbnail_img_alt}

{ color="grey-17" width="auto" > - {video_details[0].published_date} + {published_date}

{ color="grey-17" width="auto" > - {video_details[0].duration} + {video_duration}

- {show && ( - - )} + {show && } ) } Dbanner.propTypes = { - video_details: PropTypes.array, video_list: PropTypes.array, } diff --git a/src/pages/blog/video-banner/_VideoCarousel.js b/src/pages/blog/video-banner/_VideoCarousel.js index c83557aaca7..f6a95b0b55f 100644 --- a/src/pages/blog/video-banner/_VideoCarousel.js +++ b/src/pages/blog/video-banner/_VideoCarousel.js @@ -94,16 +94,15 @@ const SeeMoreBtnMobile = styled(LinkButton)` const VideoCarousel = ({ carousel_items }) => { const [show, setShow] = useState(false) - const [video_url, setVideoUrl] = useState('') + const [video_src, setVideoSrc] = useState('') const [is_mobile] = useBrowserResize() const handleCloseVideo = () => setShow(false) - const handleOpenVideo = (event, video_id) => { + const handleOpenVideo = (event, url) => { if (event.defaultPrevented) return - setVideoUrl(getAssetUrl(video_id)) + setVideoSrc(url) setShow(true) } - const getAssetUrl = (id) => `https://cms.deriv.cloud/assets/${id}` useEffect(() => { show ? (document.body.style.overflow = 'hidden') : (document.body.style.overflow = 'unset') @@ -150,23 +149,23 @@ const VideoCarousel = ({ carousel_items }) => { {carousel_items.map((item, index) => { - const { published_date, video_file, video_thumbnail, video_title } = - item - - const { id: video_id, duration } = video_file - const { id: thumbnail_id, description: thumbnail_alt } = video_thumbnail + const { + published_date, + thumbnail_img, + thumbnail_img_alt, + video_title, + video_url, + video_duration, + } = item return ( handleOpenVideo(e, video_id)} + onClick={(e) => handleOpenVideo(e, video_url)} > - + @@ -199,7 +198,7 @@ const VideoCarousel = ({ carousel_items }) => { color="grey-17" width="auto" > - {duration} + {video_duration} @@ -216,7 +215,7 @@ const VideoCarousel = ({ carousel_items }) => { )} - {show && } + {show && } ) } diff --git a/src/pages/blog/video-banner/index.js b/src/pages/blog/video-banner/index.js index 73c63ce5d15..56ca7641c64 100644 --- a/src/pages/blog/video-banner/index.js +++ b/src/pages/blog/video-banner/index.js @@ -5,30 +5,15 @@ import Dbanner from './_DBanner' import { Flex } from 'components/containers' // import { WithIntl } from 'components/localization' -const MainVidDetails = [ - { - type: 'Trade types', - title: 'What’s multipliers', - description: - 'Combine the higher returns of margin trading with the simplicity of options. With multipliers, you can leverage your trades to maximise returns for correctly predicting market movements, without risking more than your initial stake.', - published_date: '21 Apr 2021', - duration: '2:40', - bg_img_url: - 'https://blog.deriv.com/content/images/size/w1000/2021/04/deriv-weekly-market-report-06042021.jpg', - }, -] - -const DVideoBanner = ({ video_details, video_list_data }) => { - const details = video_details || MainVidDetails +const DVideoBanner = ({ video_list_data }) => { return ( - + ) } DVideoBanner.propTypes = { - video_details: PropTypes.array, video_list_data: PropTypes.array, } From 07ea509a685afc5c4442e420edb9621be758bb8d Mon Sep 17 00:00:00 2001 From: yashim-deriv Date: Wed, 25 Aug 2021 14:54:08 +0800 Subject: [PATCH 04/12] fix: corrected logic + data fetching --- src/common/utility.js | 9 +++++---- src/pages/blog/video-banner/_DBanner.js | 4 ++-- src/pages/blog/video-banner/_VideoCarousel.js | 3 ++- src/pages/blog/video-banner/index.js | 4 +++- 4 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/common/utility.js b/src/common/utility.js index b286776e225..204c9c3bedc 100644 --- a/src/common/utility.js +++ b/src/common/utility.js @@ -248,19 +248,20 @@ export const redirectOpenLiveChatBox = (is_redirect) => { // Blog Related Utilities // Get Assets -export const getAssetUrl = (id) => `${cms_endpoint}/assets/${id}` +export const getAssetUrl = (id) => `${cms_endpoint}assets/${id}` export const getVideoObject = (video_data) => { const { published_date, video_file, video_thumbnail, video_title, tags } = video_data - const { id: video_id, duration } = video_file - const { id: thumbnail_id, description } = video_thumbnail + const { id: video_id, description: video_description, duration } = video_file + const { id: thumbnail_id, description: alt } = video_thumbnail return { published_date, thumbnail_img: getAssetUrl(thumbnail_id), - thumbnail_img_alt: description, + thumbnail_img_alt: alt, video_title, + video_description, video_url: getAssetUrl(video_id), video_duration: duration, types: tags.map((t) => t.tags_id.tag_name), diff --git a/src/pages/blog/video-banner/_DBanner.js b/src/pages/blog/video-banner/_DBanner.js index c32d10971bf..c6e158d8b54 100644 --- a/src/pages/blog/video-banner/_DBanner.js +++ b/src/pages/blog/video-banner/_DBanner.js @@ -72,8 +72,8 @@ const Dbanner = ({ video_list }) => { const { published_date, thumbnail_img, - thumbnail_img_alt, video_title, + video_description, video_url, video_duration, types, @@ -119,7 +119,7 @@ const Dbanner = ({ video_list }) => { max_width="894px" mobile_max_width="100%" > - {thumbnail_img_alt} + {video_description}

{ video_title, video_url, video_duration, - } = item + } = getVideoObject(item) return ( { return ( - + {(video_list_data || video_list_data.length) && ( + + )} ) } From 7c7264e3af633640b34c449e285a4a0f052d1c00 Mon Sep 17 00:00:00 2001 From: yashim-deriv Date: Wed, 25 Aug 2021 15:03:43 +0800 Subject: [PATCH 05/12] fix: conditional rendering --- src/pages/blog/video-banner/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/pages/blog/video-banner/index.js b/src/pages/blog/video-banner/index.js index 47716e27203..a456c76f9cd 100644 --- a/src/pages/blog/video-banner/index.js +++ b/src/pages/blog/video-banner/index.js @@ -8,9 +8,7 @@ import { Flex } from 'components/containers' const DVideoBanner = ({ video_list_data }) => { return ( - {(video_list_data || video_list_data.length) && ( - - )} + {video_list_data && video_list_data.length && } ) } From 808052cc3ab7feba608715fb4da8d2a7799db002 Mon Sep 17 00:00:00 2001 From: yashim-deriv Date: Wed, 25 Aug 2021 16:02:23 +0800 Subject: [PATCH 06/12] fix: misc updates --- src/common/utility.js | 3 +-- src/pages/blog/index.js | 2 +- src/pages/blog/video-banner/_DBanner.js | 7 ++++++- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/common/utility.js b/src/common/utility.js index 204c9c3bedc..3117dfef146 100644 --- a/src/common/utility.js +++ b/src/common/utility.js @@ -246,8 +246,7 @@ export const redirectOpenLiveChatBox = (is_redirect) => { } } -// Blog Related Utilities -// Get Assets +// CMS Related Utilities export const getAssetUrl = (id) => `${cms_endpoint}assets/${id}` export const getVideoObject = (video_data) => { diff --git a/src/pages/blog/index.js b/src/pages/blog/index.js index fc58557b41b..e5fb67d4547 100644 --- a/src/pages/blog/index.js +++ b/src/pages/blog/index.js @@ -57,7 +57,7 @@ export const query = graphql` id } } - videos { + videos(limit: 6, sort: "-published_date") { video_title published_date video_description diff --git a/src/pages/blog/video-banner/_DBanner.js b/src/pages/blog/video-banner/_DBanner.js index c6e158d8b54..79aec2789d7 100644 --- a/src/pages/blog/video-banner/_DBanner.js +++ b/src/pages/blog/video-banner/_DBanner.js @@ -99,11 +99,16 @@ const Dbanner = ({ video_list }) => { - {types.map((t) => ( + {types.slice(0, 2).map((t) => (

{t}

))} + {types.length > 2 && ( +

+ +2 +

+ )} From 0bf7681a10782a31f2957cffda0872864377b2d1 Mon Sep 17 00:00:00 2001 From: yashimwong Date: Fri, 27 Aug 2021 12:19:54 +0800 Subject: [PATCH 07/12] fetch newest From 83dcf009111c2bd21a36bc3fa1b6bbfa27a6fb08 Mon Sep 17 00:00:00 2001 From: yashimwong Date: Fri, 27 Aug 2021 16:10:32 +0800 Subject: [PATCH 08/12] fix: structure fixes --- src/common/utility.js | 16 ++++++++++++---- src/pages/blog/index.js | 3 ++- src/pages/blog/video-banner/_DBanner.js | 16 +++++++++------- src/pages/blog/video-banner/_VideoCarousel.js | 2 +- 4 files changed, 24 insertions(+), 13 deletions(-) diff --git a/src/common/utility.js b/src/common/utility.js index 8818f64ee48..e24cf2ccb20 100644 --- a/src/common/utility.js +++ b/src/common/utility.js @@ -261,10 +261,18 @@ export const convertDate = (date) => { export const getAssetUrl = (id) => `${cms_endpoint}assets/${id}` export const getVideoObject = (video_data) => { - const { published_date, video_file, video_thumbnail, video_title, tags } = video_data + const { + published_date, + video_file, + video_thumbnail, + video_title, + video_duration, + video_description, + tags, + } = video_data - const { id: video_id, description: video_description, duration } = video_file - const { id: thumbnail_id, description: alt } = video_thumbnail + const { id: video_id } = video_file + const { id: thumbnail_id, title: alt } = video_thumbnail return { published_date, @@ -273,7 +281,7 @@ export const getVideoObject = (video_data) => { video_title, video_description, video_url: getAssetUrl(video_id), - video_duration: duration, + video_duration, types: tags.map((t) => t.tags_id.tag_name), } } diff --git a/src/pages/blog/index.js b/src/pages/blog/index.js index f60be00d4f8..53dcea250c1 100644 --- a/src/pages/blog/index.js +++ b/src/pages/blog/index.js @@ -61,9 +61,10 @@ export const query = graphql` video_title published_date video_description + video_duration video_thumbnail { id - description + title } video_file { id diff --git a/src/pages/blog/video-banner/_DBanner.js b/src/pages/blog/video-banner/_DBanner.js index 79aec2789d7..45d8e2affb1 100644 --- a/src/pages/blog/video-banner/_DBanner.js +++ b/src/pages/blog/video-banner/_DBanner.js @@ -98,18 +98,20 @@ const Dbanner = ({ video_list }) => { - - {types.slice(0, 2).map((t) => ( -

+ {types.slice(0, 2).map((t) => ( + +

{t}

- ))} - {types.length > 2 && ( + + ))} + {types.length > 2 && ( +

- )} - + + )}

diff --git a/src/pages/blog/video-banner/_VideoCarousel.js b/src/pages/blog/video-banner/_VideoCarousel.js index e700c75e66c..96381e7f448 100644 --- a/src/pages/blog/video-banner/_VideoCarousel.js +++ b/src/pages/blog/video-banner/_VideoCarousel.js @@ -149,7 +149,7 @@ const VideoCarousel = ({ carousel_items }) => { - {carousel_items.map((item, index) => { + {carousel_items.slice(1).map((item, index) => { const { published_date, thumbnail_img, From f19b2eac45b3a86f51b6d93a1ab15ac217b4dd7b Mon Sep 17 00:00:00 2001 From: yashimwong Date: Fri, 27 Aug 2021 16:15:30 +0800 Subject: [PATCH 09/12] fix: merge conflicts --- src/common/utility.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/common/utility.js b/src/common/utility.js index e24cf2ccb20..a1ecccb22df 100644 --- a/src/common/utility.js +++ b/src/common/utility.js @@ -2,7 +2,7 @@ import { navigate } from 'gatsby' import Cookies from 'js-cookie' import extend from 'extend' import { - cms_endpoint, + cms_assets_end_point, deriv_cookie_domain, deriv_app_languages, live_chat_redirection_link, @@ -258,7 +258,7 @@ export const convertDate = (date) => { } // CMS Related Utilities -export const getAssetUrl = (id) => `${cms_endpoint}assets/${id}` +export const getAssetUrl = (id) => `${cms_assets_end_point}${id}` export const getVideoObject = (video_data) => { const { From 2b6f8c083dc4d1e65338384dd61ba225cef01514 Mon Sep 17 00:00:00 2001 From: yashim-deriv Date: Fri, 27 Aug 2021 16:28:52 +0800 Subject: [PATCH 10/12] refactor: whitespace redeploy --- src/common/utility.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/common/utility.js b/src/common/utility.js index a1ecccb22df..a26dcb056bd 100644 --- a/src/common/utility.js +++ b/src/common/utility.js @@ -270,7 +270,6 @@ export const getVideoObject = (video_data) => { video_description, tags, } = video_data - const { id: video_id } = video_file const { id: thumbnail_id, title: alt } = video_thumbnail From f0e166239899461ecb454eea5dbf2a3bb6b9bcbc Mon Sep 17 00:00:00 2001 From: yashim-deriv Date: Fri, 27 Aug 2021 16:37:42 +0800 Subject: [PATCH 11/12] fix: date --- src/pages/blog/video-banner/_DBanner.js | 4 ++-- src/pages/blog/video-banner/_VideoCarousel.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/blog/video-banner/_DBanner.js b/src/pages/blog/video-banner/_DBanner.js index 45d8e2affb1..3e78e9d3ef1 100644 --- a/src/pages/blog/video-banner/_DBanner.js +++ b/src/pages/blog/video-banner/_DBanner.js @@ -3,7 +3,7 @@ import styled from 'styled-components' import PropTypes from 'prop-types' import VideoPlayer from '../_video-player' import VideoCarousel from './_VideoCarousel' -import { getVideoObject } from 'common/utility' +import { convertDate, getVideoObject } from 'common/utility' import { Flex, Container } from 'components/containers' import { Header } from 'components/elements' import device from 'themes/device' @@ -136,7 +136,7 @@ const Dbanner = ({ video_list }) => { color="grey-17" width="auto" > - {published_date} + {convertDate(published_date)}

{ color="grey-17" width="auto" > - {published_date} + {convertDate(published_date)}

Date: Fri, 27 Aug 2021 17:02:06 +0800 Subject: [PATCH 12/12] fix: add featured check --- src/common/utility.js | 2 ++ src/pages/blog/index.js | 1 + src/pages/blog/video-banner/_DBanner.js | 6 ++++-- src/pages/blog/video-banner/_VideoCarousel.js | 2 +- 4 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/common/utility.js b/src/common/utility.js index a26dcb056bd..c540081f508 100644 --- a/src/common/utility.js +++ b/src/common/utility.js @@ -268,6 +268,7 @@ export const getVideoObject = (video_data) => { video_title, video_duration, video_description, + featured, tags, } = video_data const { id: video_id } = video_file @@ -281,6 +282,7 @@ export const getVideoObject = (video_data) => { video_description, video_url: getAssetUrl(video_id), video_duration, + featured, types: tags.map((t) => t.tags_id.tag_name), } } diff --git a/src/pages/blog/index.js b/src/pages/blog/index.js index 53dcea250c1..a724a53ed40 100644 --- a/src/pages/blog/index.js +++ b/src/pages/blog/index.js @@ -62,6 +62,7 @@ export const query = graphql` published_date video_description video_duration + featured video_thumbnail { id title diff --git a/src/pages/blog/video-banner/_DBanner.js b/src/pages/blog/video-banner/_DBanner.js index 3e78e9d3ef1..925ed2bc036 100644 --- a/src/pages/blog/video-banner/_DBanner.js +++ b/src/pages/blog/video-banner/_DBanner.js @@ -68,6 +68,8 @@ 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, @@ -77,7 +79,7 @@ const Dbanner = ({ video_list }) => { video_url, video_duration, types, - } = getVideoObject(video_list[0]) + } = getVideoObject(featured_video) useEffect(() => { show ? (document.body.style.overflow = 'hidden') : (document.body.style.overflow = 'unset') @@ -150,7 +152,7 @@ const Dbanner = ({ video_list }) => {

- + {show && } diff --git a/src/pages/blog/video-banner/_VideoCarousel.js b/src/pages/blog/video-banner/_VideoCarousel.js index 4695f1693a9..362ccbb97ea 100644 --- a/src/pages/blog/video-banner/_VideoCarousel.js +++ b/src/pages/blog/video-banner/_VideoCarousel.js @@ -149,7 +149,7 @@ const VideoCarousel = ({ carousel_items }) => { - {carousel_items.slice(1).map((item, index) => { + {carousel_items.map((item, index) => { const { published_date, thumbnail_img,