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 9839d3e

Browse files
nikolaiberestevich-derivNikolai Berestevich
nikolaiberestevich-deriv
and
Nikolai Berestevich
authored
Nikolai.berestevich/feat/blog : all videos from cms (#2044)
* nikolai.berestevich/feat/blog-all-videos-from-cms * nikolai.berestevich/feat/blog-all-videos-from-cms * nikolai.berestevich/feat/blog-all-videos-from-cms * nikolai.berestevich/feat/blog-all-videos-from-cms * nikolai.berestevich/feat/empty blog -all videos from cms * nikolai.berestevich/feat/empty blog -all videos from cms * nikolai.berestevich/feat/empty blog -all videos from cms * nikolai.berestevich/feat/empty blog -all videos from cms Co-authored-by: Nikolai Berestevich <[email protected]>
1 parent 94ecd8b commit 9839d3e

File tree

6 files changed

+113
-141
lines changed

6 files changed

+113
-141
lines changed

‎src/pages/blog/_video-player.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ const VideoPlayer = ({ video_src, closeVideo }) => {
138138

139139
VideoPlayer.propTypes = {
140140
closeVideo: PropTypes.func,
141-
video_src: PropTypes.object,
141+
video_src: PropTypes.string,
142142
}
143143

144144
export default VideoPlayer

‎src/pages/blog/articles/_article-card.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,8 @@ const ArticleCard = ({ item }) => {
6969
<QueryImage
7070
data={getImage(item.main_image.imageFile)}
7171
alt={item.main_image.description || ''}
72+
height="200px"
73+
weight="384px"
7274
/>
7375
</ImageWrapper>
7476

‎src/pages/blog/videos/_all-videos.js

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,23 @@ import RightArrow from 'images/svg/black-right-arrow.svg'
99

1010
const AllVideos = ({ video_data }) => {
1111
const [show, setShow] = useState(false)
12+
const [play_video_id, setPlayVideoId] = useState('')
1213

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

18+
const play_video_src = `http://cms.deriv.cloud/assets/${play_video_id}`
19+
20+
const openVideo = (video_id) => {
21+
setPlayVideoId(video_id)
22+
setShow(true)
23+
}
24+
25+
const closeVideo = () => {
26+
setShow(false)
27+
setPlayVideoId('')
28+
}
1729
return (
1830
<Container m="0 auto" fd="column">
1931
<Flex jc="flex-start" ai="center" mt="4rem">
@@ -25,15 +37,16 @@ const AllVideos = ({ video_data }) => {
2537
</Flex>
2638
<VideoGrid m="8rem 0">
2739
{video_data.map((item) => {
28-
return <VideoCard key={item.id} item={item} openVideo={() => setShow(true)} />
40+
return (
41+
<VideoCard
42+
key={item.video_id}
43+
item={item}
44+
openVideo={() => openVideo(item.video_file.id)}
45+
/>
46+
)
2947
})}
3048
</VideoGrid>
31-
{show && (
32-
<VideoPlayer
33-
video_src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"
34-
closeVideo={() => setShow(false)}
35-
/>
36-
)}
49+
{show && <VideoPlayer video_src={play_video_src} closeVideo={closeVideo} />}
3750
</Container>
3851
)
3952
}

‎src/pages/blog/videos/_data.js

Lines changed: 0 additions & 92 deletions
This file was deleted.

‎src/pages/blog/videos/_video-card.js

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react'
22
import PropTypes from 'prop-types'
33
import styled from 'styled-components'
4-
import { ContainedImg } from '../common/_styles'
5-
import { Header } from 'components/elements'
4+
import { Header, QueryImage } from 'components/elements'
5+
import { convertDate } from 'common/utility'
66
import { Flex } from 'components/containers'
77
import device from 'themes/device'
88
import Triangle from 'images/svg/triangle.svg'
@@ -37,7 +37,6 @@ const ImageWrapper = styled.div`
3737
width: 384px;
3838
position: relative;
3939
z-index: 1;
40-
overflow: hidden;
4140
4241
@media ${device.mobileL} {
4342
width: 100%;
@@ -110,6 +109,9 @@ const ContentWrapper = styled.div`
110109
`
111110

112111
const VideoCard = ({ item, openVideo }) => {
112+
const first_2_tags = item.tags?.slice(0, 2)
113+
const another_tags_number = item.tags.length > 2 ? `+${item.tags.length - 2}` : ''
114+
const converted_date = convertDate(item.published_date)
113115
return (
114116
// the extra div surrounding the videocard is to get around Safari's different
115117
// interpretation of height: 100%
@@ -118,14 +120,15 @@ const VideoCard = ({ item, openVideo }) => {
118120
<ImageWrapper>
119121
<ImageOverlay />
120122
<CategoriesContainer jc="flex-start" fw="wrap">
121-
{item.category.slice(0, 2).map((item_category) => (
122-
<StyledCategories as="h4" type="paragraph-2" key={item_category}>
123-
{item_category}
124-
</StyledCategories>
125-
))}
126-
{item.category.length > 2 && (
123+
{item.tags &&
124+
first_2_tags.map((tag) => (
125+
<StyledCategories as="h4" type="paragraph-2" key={tag.tags_id.id}>
126+
{tag.tags_id.tag_name}
127+
</StyledCategories>
128+
))}
129+
{another_tags_number && (
127130
<StyledCategories as="h4" type="paragraph-2">
128-
{`+${item.category.slice(2).length.toString()}`}
131+
{another_tags_number}
129132
</StyledCategories>
130133
)}
131134
</CategoriesContainer>
@@ -134,14 +137,19 @@ const VideoCard = ({ item, openVideo }) => {
134137
<VideoDuration as="h5" type="paragraph-2" weight="bold">
135138
{item.video_duration}
136139
</VideoDuration>
137-
<ContainedImg src={item.image} alt="Video card" width="100%" />
140+
<QueryImage
141+
data={item.video_thumbnail.imageFile}
142+
alt={item.video_description}
143+
height="200px"
144+
weight="384px"
145+
/>
138146
</ImageWrapper>
139147
<ContentWrapper>
140148
<Header as="h3" type="subtitle-2">
141-
{item.title}
149+
{item.video_title}
142150
</Header>
143151
<Header as="h4" type="paragraph-2" weight="normal" mt="8px" color="grey-40">
144-
{item.date}
152+
{converted_date}
145153
</Header>
146154
</ContentWrapper>
147155
</VideoCardWrapper>
@@ -150,7 +158,7 @@ const VideoCard = ({ item, openVideo }) => {
150158
}
151159

152160
VideoCard.propTypes = {
153-
item: PropTypes.Object,
161+
item: PropTypes.object,
154162
openVideo: PropTypes.func,
155163
}
156164

‎src/pages/blog/videos/index.js

Lines changed: 68 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React from 'react'
22
import styled from 'styled-components'
3+
import PropTypes from 'prop-types'
4+
import { graphql } from 'gatsby'
35
import Subscribe from '../components/_subscribe'
46
import AllVideos from './_all-videos'
5-
import { video_data } from './_data'
67
import Layout from 'components/layout/layout'
78
import { SEO, Container, Flex } from 'components/containers'
89
import { Header } from 'components/elements'
@@ -49,31 +50,71 @@ const StyledHeader = styled(Header)`
4950
}
5051
`
5152

52-
const VideosPage = () => (
53-
<Layout>
54-
<SEO
55-
title={localize('Latest videos, tutorials, webinars for trading | Deriv')}
56-
description={localize(
57-
"Learn how to trade using our trading videos and tutorials at Deriv's online trading academy.",
58-
)}
59-
/>
60-
<Hero jc="center" ai="center">
61-
<SmallContainer>
62-
<Header as="h2" type="heading-3" color="white" weight="400" align="left">
63-
Video tutorials
64-
</Header>
65-
<StyledHeader as="h2" type="heading-2" color="white" align="left">
66-
Our latest videos and webinars
67-
</StyledHeader>
68-
</SmallContainer>
69-
</Hero>
70-
<AllVideos video_data={video_data} />
71-
<Container>
72-
<Flex direction="column" ai="flex-start" jc="space-between">
73-
<Subscribe />
74-
</Flex>
75-
</Container>
76-
</Layout>
77-
)
53+
const VideosPage = ({ data }) => {
54+
const video_data = data.directus.videos
7855

56+
return (
57+
<Layout>
58+
<SEO
59+
title={localize('Latest videos, tutorials, webinars for trading | Deriv')}
60+
description={localize(
61+
"Learn how to trade using our trading videos and tutorials at Deriv's online trading academy.",
62+
)}
63+
/>
64+
<Hero jc="center" ai="center">
65+
<SmallContainer>
66+
<Header as="h2" type="heading-3" color="white" weight="400" align="left">
67+
Video tutorials
68+
</Header>
69+
<StyledHeader as="h2" type="heading-2" color="white" align="left">
70+
Our latest videos and webinars
71+
</StyledHeader>
72+
</SmallContainer>
73+
</Hero>
74+
{video_data && <AllVideos video_data={video_data} />}
75+
<Container>
76+
<Flex direction="column" ai="flex-start" jc="space-between">
77+
<Subscribe />
78+
</Flex>
79+
</Container>
80+
</Layout>
81+
)
82+
}
83+
84+
VideosPage.propTypes = {
85+
data: PropTypes.object,
86+
}
7987
export default WithIntl()(VideosPage)
88+
89+
export const query = graphql`
90+
query AllVideosQuery {
91+
directus {
92+
videos(filter: { status: { _eq: "published" } }, sort: "- published_date") {
93+
video_id
94+
video_slug
95+
video_title
96+
published_date
97+
video_description
98+
video_duration
99+
tags {
100+
tags_id {
101+
tag_name
102+
id
103+
}
104+
}
105+
video_file {
106+
id
107+
}
108+
video_thumbnail {
109+
id
110+
imageFile {
111+
id
112+
childImageSharp {
113+
gatsbyImageData
114+
}
115+
}
116+
}
117+
}
118+
}
119+
}
120+
`

0 commit comments

Comments
 (0)