binary-com · Aug 27, 2021 · Aug 25, 2021 · Aug 25, 2021 · Aug 25, 2021 · Aug 25, 2021
@@ -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
@@ -69,6 +69,8 @@ const ArticleCard = ({ item }) => {
                     <QueryImage
                         data={getImage(item.main_image.imageFile)}
                         alt={item.main_image.description || ''}
+                        height="200px"
+                        weight="384px"
                     />
                 </ImageWrapper>
 

@@ -9,11 +9,23 @@ import RightArrow from 'images/svg/black-right-arrow.svg'
 
 const AllVideos = ({ video_data }) => {
     const [show, setShow] = useState(false)
+    const [play_video_id, setPlayVideoId] = useState('')
 
     useEffect(() => {
         show ? (document.body.style.overflow = 'hidden') : (document.body.style.overflow = 'unset')
     }, [show])
 
+    const play_video_src = `http://cms.deriv.cloud/assets/${play_video_id}`
+
+    const openVideo = (video_id) => {
+        setPlayVideoId(video_id)
+        setShow(true)
+    }
+
+    const closeVideo = () => {
+        setShow(false)
+        setPlayVideoId('')
+    }
     return (
         <Container m="0 auto" fd="column">
             <Flex jc="flex-start" ai="center" mt="4rem">
@@ -25,15 +37,16 @@ const AllVideos = ({ video_data }) => {
             </Flex>
             <VideoGrid m="8rem 0">
                 {video_data.map((item) => {
-                    return <VideoCard key={item.id} item={item} openVideo={() => setShow(true)} />
+                    return (
+                        <VideoCard
+                            key={item.video_id}
+                            item={item}
+                            openVideo={() => openVideo(item.video_file.id)}
+                        />
+                    )
                 })}
             </VideoGrid>
-            {show && (
-                <VideoPlayer
-                    video_src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"
-                    closeVideo={() => setShow(false)}
-                />
-            )}
+            {show && <VideoPlayer video_src={play_video_src} closeVideo={closeVideo} />}
         </Container>
     )
 }

@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import { ContainedImg } from '../common/_styles'
-import { Header } from 'components/elements'
+import { Header, QueryImage } from 'components/elements'
+import { convertDate } from 'common/utility'
 import { Flex } from 'components/containers'
 import device from 'themes/device'
 import Triangle from 'images/svg/triangle.svg'
@@ -37,7 +37,6 @@ const ImageWrapper = styled.div`
     width: 384px;
     position: relative;
     z-index: 1;
-    overflow: hidden;
 
     @media ${device.mobileL} {
         width: 100%;
@@ -110,6 +109,9 @@ const ContentWrapper = styled.div`
 `
 
 const VideoCard = ({ item, openVideo }) => {
+    const first_2_tags = item.tags?.slice(0, 2)
+    const another_tags_number = item.tags.length > 2 ? `+${item.tags.length - 2}` : ''
+    const converted_date = convertDate(item.published_date)
     return (
         // the extra div surrounding the videocard is to get around Safari's different
         // interpretation of height: 100%
@@ -118,14 +120,15 @@ const VideoCard = ({ item, openVideo }) => {
                 <ImageWrapper>
                     <ImageOverlay />
                     <CategoriesContainer jc="flex-start" fw="wrap">
-                        {item.category.slice(0, 2).map((item_category) => (
-                            <StyledCategories as="h4" type="paragraph-2" key={item_category}>
-                                {item_category}
-                            </StyledCategories>
-                        ))}
-                        {item.category.length > 2 && (
+                        {item.tags &&
+                            first_2_tags.map((tag) => (
+                                <StyledCategories as="h4" type="paragraph-2" key={tag.tags_id.id}>
+                                    {tag.tags_id.tag_name}
+                                </StyledCategories>
+                            ))}
+                        {another_tags_number && (
                             <StyledCategories as="h4" type="paragraph-2">
-                                {`+${item.category.slice(2).length.toString()}`}
+                                {another_tags_number}
                             </StyledCategories>
                         )}
                     </CategoriesContainer>
@@ -134,14 +137,19 @@ const VideoCard = ({ item, openVideo }) => {
                     <VideoDuration as="h5" type="paragraph-2" weight="bold">
                         {item.video_duration}
                     </VideoDuration>
-                    <ContainedImg src={item.image} alt="Video card" width="100%" />
+                    <QueryImage
+                        data={item.video_thumbnail.imageFile}
+                        alt={item.video_description}
+                        height="200px"
+                        weight="384px"
+                    />
                 </ImageWrapper>
                 <ContentWrapper>
                     <Header as="h3" type="subtitle-2">
-                        {item.title}
+                        {item.video_title}
                     </Header>
                     <Header as="h4" type="paragraph-2" weight="normal" mt="8px" color="grey-40">
-                        {item.date}
+                        {converted_date}
                     </Header>
                 </ContentWrapper>
             </VideoCardWrapper>
@@ -150,7 +158,7 @@ const VideoCard = ({ item, openVideo }) => {
 }
 
 VideoCard.propTypes = {
-    item: PropTypes.Object,
+    item: PropTypes.object,
     openVideo: PropTypes.func,
 }
 

@@ -1,8 +1,9 @@
 import React from 'react'
 import styled from 'styled-components'
+import PropTypes from 'prop-types'
+import { graphql } from 'gatsby'
 import Subscribe from '../components/_subscribe'
 import AllVideos from './_all-videos'
-import { video_data } from './_data'
 import Layout from 'components/layout/layout'
 import { SEO, Container, Flex } from 'components/containers'
 import { Header } from 'components/elements'
@@ -49,31 +50,71 @@ const StyledHeader = styled(Header)`
     }
 `
 
-const VideosPage = () => (
-    <Layout>
-        <SEO
-            title={localize('Latest videos, tutorials, webinars for trading | Deriv')}
-            description={localize(
-                "Learn how to trade using our trading videos and tutorials at Deriv's online trading academy.",
-            )}
-        />
-        <Hero jc="center" ai="center">
-            <SmallContainer>
-                <Header as="h2" type="heading-3" color="white" weight="400" align="left">
-                    Video tutorials
-                </Header>
-                <StyledHeader as="h2" type="heading-2" color="white" align="left">
-                    Our latest videos and webinars
-                </StyledHeader>
-            </SmallContainer>
-        </Hero>
-        <AllVideos video_data={video_data} />
-        <Container>
-            <Flex direction="column" ai="flex-start" jc="space-between">
-                <Subscribe />
-            </Flex>
-        </Container>
-    </Layout>
-)
+const VideosPage = ({ data }) => {
+    const video_data = data.directus.videos
 
+    return (
+        <Layout>
+            <SEO
+                title={localize('Latest videos, tutorials, webinars for trading | Deriv')}
+                description={localize(
+                    "Learn how to trade using our trading videos and tutorials at Deriv's online trading academy.",
+                )}
+            />
+            <Hero jc="center" ai="center">
+                <SmallContainer>
+                    <Header as="h2" type="heading-3" color="white" weight="400" align="left">
+                        Video tutorials
+                    </Header>
+                    <StyledHeader as="h2" type="heading-2" color="white" align="left">
+                        Our latest videos and webinars
+                    </StyledHeader>
+                </SmallContainer>
+            </Hero>
+            {video_data && <AllVideos video_data={video_data} />}
+            <Container>
+                <Flex direction="column" ai="flex-start" jc="space-between">
+                    <Subscribe />
+                </Flex>
+            </Container>
+        </Layout>
+    )
+}
+
+VideosPage.propTypes = {
+    data: PropTypes.object,
+}
 export default WithIntl()(VideosPage)
+
+export const query = graphql`
+    query AllVideosQuery {
+        directus {
+            videos(filter: { status: { _eq: "published" } }, sort: "- published_date") {
+                video_id
+                video_slug
+                video_title
+                published_date
+                video_description
+                video_duration
+                tags {
+                    tags_id {
+                        tag_name
+                        id
+                    }
+                }
+                video_file {
+                    id
+                }
+                video_thumbnail {
+                    id
+                    imageFile {
+                        id
+                        childImageSharp {
+                            gatsbyImageData
+                        }
+                    }
+                }
+            }
+        }
+    }
+`