binary-com · Sep 8, 2021 · Sep 6, 2021 · Sep 8, 2021 · Sep 8, 2021 · Sep 8, 2021
@@ -287,5 +287,13 @@ export const getVideoObject = (video_data) => {
     }
 }
 
+// remove spaces before appending "..." on truncated strings
+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
@@ -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
@@ -70,12 +70,18 @@ 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]
+        non_featured_video_list.shift()
+    }
 
     const {
         published_date,
@@ -158,7 +164,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 +173,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
@@ -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