feat(strapi-implementation): add new types

apps/trackflix/.gitignore

@@ -28,3 +28,7 @@ amplifytools.xcconfig
 .secret-*
 **.sample
 #amplify-do-not-edit-end
+
+.env
+.env.development
+.env.production

apps/trackflix/src/api/IApi.ts

@@ -1,4 +1,4 @@
-import { VideoOnDemand } from '../models'
+import { VideoOnDemand } from './api.interface'
 
 export interface IApi {
     fetchHighlightedVideos(): Promise<VideoOnDemand[]>

apps/trackflix/src/api/StrapiApi.ts

@@ -1,17 +1,41 @@
-import { VideoOnDemand } from '../models'
+import { VideoOnDemand } from './api.interface'
 import { IApi } from './IApi'
+import { StrapiMedia } from './strapi.interface'
 
 export class StrapiApi implements IApi {
-    private readonly endpoint: string
+    private readonly baseUrl: string
 
     private readonly token: string
 
-    constructor(endpoint: string, token: string) {
-        this.endpoint = endpoint
+    constructor({ baseUrl, token }: { baseUrl?: string; token?: string }) {
+        if (!baseUrl || !token)
+            throw new Error('StrapiApi: baseUrl and token are required')
+
+        this.baseUrl = baseUrl
         this.token = token
     }
 
     async fetchHighlightedVideos(): Promise<VideoOnDemand[]> {
-        return []
+        const response = await fetch(
+            `${this.baseUrl}/api/vods?filters[highlighted][$eq]=true`,
+            {
+                headers: {
+                    Authorization: `Bearer ${this.token}`,
+                },
+            }
+        )
+
+        const videos: StrapiMedia[] = await response
+            .json()
+            .then((res) => res.data)
+        return videos.map((video: StrapiMedia) => ({
+            id: video.id,
+            title: video.attributes.Name,
+            description: video.attributes.description,
+            highlighted: video.attributes.highlighted,
+            createdAt: video.attributes.createdAt,
+            updatedAt: video.attributes.updatedAt,
+            src: video.attributes.media_url,
+        }))
     }
 }

apps/trackflix/src/api/api.interface.ts

@@ -0,0 +1,14 @@
+export interface Thumbnail {
+    src: string
+}
+
+export interface VideoOnDemand {
+    id: string
+    title: string
+    description: string
+    highlighted: boolean
+    thumbnail?: Thumbnail
+    createdAt: string
+    updatedAt: string
+    src: string
+}

apps/trackflix/src/api/strapi.interface.ts

@@ -0,0 +1,14 @@
+export interface StrapiMedia {
+    id: string
+    attributes: {
+        Name: string
+        createdAt: string
+        updatedAt: string
+        rotation_start?: number
+        rotation_end?: number
+        description: string
+        type?: string
+        media_url: string
+        highlighted: boolean
+    }
+}

apps/trackflix/src/context/CMSContext.tsx

@@ -0,0 +1,12 @@
+import { IApi } from '../api/IApi'
+import { StrapiApi } from '../api/StrapiApi'
+import { createContext } from 'react'
+
+export const CMSContext = createContext<{
+    api: IApi
+}>({
+    api: new StrapiApi({
+        baseUrl: process.env.REACT_APP_CMS_BASE_URL,
+        token: process.env.REACT_APP_CMS_TOKEN,
+    }),
+})

apps/trackflix/src/pages/index.tsx

@@ -1,8 +1,9 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 import Layout from '../shared/components/Layout'
 import Landing from '../shared/home/Landing'
 import Videos from '../shared/videos'
 import defaultTheme, { NavbarTheme, defaultNavbar } from '../shared/theme'
+import { CMSContext } from '../context/CMSContext'
 
 const noScrollNavBarTheme: NavbarTheme = {
     type: 'noScroll',
@@ -27,6 +28,8 @@ const HomePage = () => {
             navbar: noScrollNavBarTheme,
         },
     })
+    const apiContext = useContext(CMSContext)
+
     const handleScroll = () => {
         if (window.pageYOffset > 20 && theme.palette.navbar.type !== 'scroll') {
             setTheme({
@@ -61,8 +64,10 @@ const HomePage = () => {
 
     return (
         <Layout overrideTheme={theme} removePaddingTop>
-            <Landing />
-            <Videos />
+            <CMSContext.Provider value={apiContext}>
+                <Landing />
+                <Videos />
+            </CMSContext.Provider>
         </Layout>
     )
 }

apps/trackflix/src/shared/home/Landing.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { fetchHighlightedVideos } from '../api'
 import ReactPlayer from 'react-player'
@@ -7,6 +7,8 @@ import intro from '../../videos/introduction-video.mp4'
 import PlayLogo from '../../assets/logo/logo-play-without-circle.svg'
 import { screenSizes } from '../constants'
 import { useWindowDimensions } from '../hooks'
+import { CMSContext } from '../../context/CMSContext'
+import { VideoOnDemand } from '../../api/api.interface'
 
 const LandingContainer = styled.div`
     width: 100%;
@@ -95,29 +97,19 @@ const StyledPlayLogo = styled(PlayLogo)`
 
 const Landing = () => {
     const [source, setSource] = useState<string | null>(null)
-    const [video, setVideo] = useState(null)
+    const [video, setVideo] = useState<VideoOnDemand | null>(null)
     const { width } = useWindowDimensions()
+    const { api } = useContext(CMSContext)
 
     useEffect(() => {
         const fetchHighlited = async () => {
-            const highlightedVideos = await fetchHighlightedVideos()
-            if (
-                highlightedVideos &&
-                highlightedVideos.data &&
-                highlightedVideos.data.listMedia &&
-                highlightedVideos.data.listMedia.items &&
-                highlightedVideos.data.listMedia.items.length > 0
-            ) {
-                const media = highlightedVideos.data.listMedia.items[0]
+            const highlightedVideos = await api.fetchHighlightedVideos()
+            if (highlightedVideos && highlightedVideos.length > 0) {
+                const media = highlightedVideos[0]
                 setVideo(media)
-                setSource(media.source)
+                setSource(media.src)
             } else {
-                // test purpose, to replace later
-                setSource(
-                    'https://dzmkyt5xmjxxq.cloudfront.net/public/fdcbf258-ee64-466e-aa08-4ac06cf69117/fdcbf258-ee64-466e-aa08-4ac06cf69117.m3u8'
-                )
-                //
-                // setSource(intro)
+                setSource(intro)
             }
         }
         fetchHighlited()