From 209c8cc632426be87e3e3484c38901eab3f32f0d Mon Sep 17 00:00:00 2001
From: Suthesan <suthesan@Suthesans-MacBook-Pro.local>
Date: Mon, 6 Sep 2021 23:01:05 +0800
Subject: [PATCH 1/4] fix dots

---
 src/common/utility.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/common/utility.js b/src/common/utility.js
index c9c71429786..fc145c1c089 100644
--- a/src/common/utility.js
+++ b/src/common/utility.js
@@ -287,5 +287,12 @@ export const getVideoObject = (video_data) => {
     }
 }
 
+const getLimit = (input, limit) => {
+    if (input[limit - 1] === ' ') {
+        return limit - 1
+    }
+    return limit
+}
+
 export const truncateString = (input, limit) =>
-    input.length > limit ? `${input.substring(0, limit)}...` : input
+    input.length > limit ? `${input.substring(0, getLimit(input, limit))}...` : input

From f5752925eb1f7d717d529adb286d80911c65b831 Mon Sep 17 00:00:00 2001
From: Suthesan <suthesan@Suthesans-MacBook-Pro.local>
Date: Wed, 8 Sep 2021 10:25:02 +0800
Subject: [PATCH 2/4] added comment

---
 src/common/utility.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/common/utility.js b/src/common/utility.js
index fc145c1c089..4223e632ea6 100644
--- a/src/common/utility.js
+++ b/src/common/utility.js
@@ -287,6 +287,7 @@ export const getVideoObject = (video_data) => {
     }
 }
 
+// remove spaces before appending "..." on truncated strings
 const getLimit = (input, limit) => {
     if (input[limit - 1] === ' ') {
         return limit - 1

From 3a31e4a3e51a3a51d6c057e5119ec8b7e23d0f8d Mon Sep 17 00:00:00 2001
From: Suthesan <suthesan@Suthesans-MacBook-Pro.local>
Date: Wed, 8 Sep 2021 14:48:56 +0800
Subject: [PATCH 3/4] split featured and non featured video query

---
 src/pages/academy/_video-banner.js            | 12 +++++--
 .../components/video-banner/_DBanner.js       | 16 +++++++---
 src/pages/academy/index.js                    | 31 +++++++++++++++++--
 3 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/src/pages/academy/_video-banner.js b/src/pages/academy/_video-banner.js
index bb21da96396..80f904d9eaa 100644
--- a/src/pages/academy/_video-banner.js
+++ b/src/pages/academy/_video-banner.js
@@ -3,16 +3,22 @@ import PropTypes from 'prop-types'
 import Dbanner from './components/video-banner/_DBanner'
 import { Flex } from 'components/containers'
 
-const DVideoBanner = ({ video_list_data }) => {
+const DVideoBanner = ({ featured_video_list_data, non_featured_video_list_data }) => {
     return (
         <Flex>
-            {video_list_data && video_list_data.length && <Dbanner video_list={video_list_data} />}
+            {non_featured_video_list_data && non_featured_video_list_data.length && (
+                <Dbanner
+                    featured_video_list={featured_video_list_data}
+                    non_featured_video_list={non_featured_video_list_data}
+                />
+            )}
         </Flex>
     )
 }
 
 DVideoBanner.propTypes = {
-    video_list_data: PropTypes.array,
+    featured_video_list_data: PropTypes.array,
+    non_featured_video_list_data: PropTypes.array,
 }
 
 export default DVideoBanner
diff --git a/src/pages/academy/components/video-banner/_DBanner.js b/src/pages/academy/components/video-banner/_DBanner.js
index 2963df76c2f..f27ee25e699 100644
--- a/src/pages/academy/components/video-banner/_DBanner.js
+++ b/src/pages/academy/components/video-banner/_DBanner.js
@@ -70,12 +70,17 @@ const StyledDot = styled.img`
     margin: 0 10px 4px;
 `
 
-const Dbanner = ({ video_list }) => {
+const Dbanner = ({ featured_video_list, non_featured_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)
+
+    let featured_video
+    if (featured_video_list && featured_video_list.length) {
+        featured_video = featured_video_list[0]
+    } else {
+        featured_video = non_featured_video_list[0]
+    }
 
     const {
         published_date,
@@ -158,7 +163,7 @@ const Dbanner = ({ video_list }) => {
                             </Header>
                         </Flex>
                     </Flex>
-                    <VideoCarousel carousel_items={filtered_video} />
+                    <VideoCarousel carousel_items={non_featured_video_list} />
                 </Container>
             </ParentWrapper>
             {show && <VideoPlayer video_src={video_url} closeVideo={handleCloseVideo} />}
@@ -167,7 +172,8 @@ const Dbanner = ({ video_list }) => {
 }
 
 Dbanner.propTypes = {
-    video_list: PropTypes.array,
+    featured_video_list: PropTypes.array,
+    non_featured_video_list: PropTypes.array,
 }
 
 export default Dbanner
diff --git a/src/pages/academy/index.js b/src/pages/academy/index.js
index 89473263b0c..12a969d7e40 100644
--- a/src/pages/academy/index.js
+++ b/src/pages/academy/index.js
@@ -79,6 +79,29 @@ export const query = graphql`
                     }
                 }
             }
+            featured_video: videos(
+                filter: { status: { _eq: "published" }, featured: { _eq: true } }
+                sort: "-published_date"
+                limit: 1
+            ) {
+                video_title
+                published_date
+                video_description
+                video_duration
+                featured
+                video_thumbnail {
+                    id
+                    title
+                }
+                video_file {
+                    id
+                }
+                tags {
+                    tags_id {
+                        tag_name
+                    }
+                }
+            }
             recent: blog(
                 filter: { status: { _eq: "published" } }
                 sort: "-published_date"
@@ -161,7 +184,8 @@ const DerivBlog = ({ data }) => {
 
     const recent_data = data.directus.recent
     const featured_data = data.directus.featured
-    const video_list_data = data.directus.videos
+    const non_featured_video_list_data = data.directus.videos
+    const featured_video_list_data = data.directus.featured_video
 
     return (
         <Layout type="academy" is_ppc_redirect={true}>
@@ -196,7 +220,10 @@ const DerivBlog = ({ data }) => {
                 </Carousel>
             </MainWrapper>
             <RecentFeaturedPosts recent_data={recent_data} featured_data={featured_data} />
-            <DVideoBanner video_list_data={video_list_data} />
+            <DVideoBanner
+                featured_video_list_data={featured_video_list_data}
+                non_featured_video_list_data={non_featured_video_list_data}
+            />
             <MarketNews data={market_news_data} />
             <Container>
                 <Flex

From 23dd7aaceed23997b5497d822491bc6b8060d9ca Mon Sep 17 00:00:00 2001
From: Suthesan Kanagasabai <45410833+suthesan-deriv@users.noreply.github.com>
Date: Wed, 8 Sep 2021 15:12:40 +0800
Subject: [PATCH 4/4] Update
 src/pages/academy/components/video-banner/_DBanner.js

Co-authored-by: Sean Ho <72253841+sean-binary@users.noreply.github.com>
---
 src/pages/academy/components/video-banner/_DBanner.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/academy/components/video-banner/_DBanner.js b/src/pages/academy/components/video-banner/_DBanner.js
index f27ee25e699..7dfa957f62a 100644
--- a/src/pages/academy/components/video-banner/_DBanner.js
+++ b/src/pages/academy/components/video-banner/_DBanner.js
@@ -80,6 +80,7 @@ const Dbanner = ({ featured_video_list, non_featured_video_list }) => {
         featured_video = featured_video_list[0]
     } else {
         featured_video = non_featured_video_list[0]
+        non_featured_video_list.shift()
     }
 
     const {