App Codex Version: 1.0.0

Class

LessonSingleScreenHooksApi

LessonSingleScreenHooksApi()

Lesson Screen Hooks. Instance name: lessonSingleScreenApi

You can use this hook to customize the lesson screen such as by adding a custom call to action button and other actions.

Constructor

# new LessonSingleScreenHooksApi()

Example
externalCodeSetup.lessonSingleScreenApi.METHOD_NAME

Members

# setTopicNavigationFilter

Deprecated:
  • Yes

# topicNavigationFilter

Deprecated:
  • Filters navigation onPress function that is used to navigate to Topic

Methods

# setAfterMaterialsComponent(AfterMaterialsComponent)

You can use this hook to add a component at the bottom of the lesson single screen just after the component that displays the materials.

Parameters:
Name Type Description
AfterMaterialsComponent React.ComponentType.<AfterMaterialsComponentProps>
Example
//In custom_code/components/LessonBottomComponent.js...

import React from "react";
import { View, Text, TouchableOpacity } from "react-native";
const LessonBottomComponent = props => {

    const {
        colors,
        course,
        navigation
    } = props;

    const back = () => {
        navigation.navigate({
            routeName: "CoursesSingleScreen",
            params: {
                id: course.id,
                course
            },
            key: course.id.toString()
        })
    }
    return <View style={{
        backgroundColor: colors.bodyFrontBg,
        paddingHorizontal: 20,
        paddingBottom: 20,
        minHeight: 100,
    }}>
        <Text>This lesson is part of the {course.title.rendered} course </Text>
        <TouchableOpacity onPress={back}>
            <Text>
                Back To Course
            </Text>
        </TouchableOpacity>
    </View>
}

 export default LessonBottomComponent;

 //In custom_code/index.js...

 ...

import LessonBottomComponent from "./components/LessonBottomComponent";
export const applyCustomCode = externalCodeSetup => {
  externalCodeSetup.lessonSingleScreenApi.setAfterMaterialsComponent(props => <LessonBottomComponent {...props}/>)
}

# setAssignmentItemComment(AssignmentItemComment)

You can use this to customize the AssignmentItemComment button.

Parameters:
Name Type Description
AssignmentItemComment React.ComponentType.<AssignmentItemCommentProps>
Example
...

import AssignmentCommentButton from "@src/components/Course/Assignment/AssignmentCommentButton";
export const applyCustomCode = (externalCodeSetup) => {
    externalCodeSetup.lessonSingleScreenApi.setAssignmentItemComment(
        ({
            pressHandler,
            tintColor,
            containerStyle,
            count,
            size,
            global,
            lightMode
        }) => (
            <AssignmentCommentButton
                {...{
                    pressHandler,
                    tintColor,
                    containerStyle,
                    count,
                    size,
                    global,
                    lightMode
                }}
            />
        )
    );
}

# setAssignmentItemDownload(AssignmentItemDownload)

You can use this to customize the AssignmentItemDownload button. For example, you can change the icon and add a confirmation modal before allowing the user to download the assignment file.

Parameters:
Name Type Description
AssignmentItemDownload React.ComponentType.<AssignmentItemDownloadProps>
Example
...

import AssignmentDownloadButton from "@src/components/Course/Assignment/AssignmentDownloadButton";
export const applyCustomCode = (externalCodeSetup) => {
    externalCodeSetup.lessonSingleScreenApi.setAssignmentItemDownload(
        ({pressHandler, tintColor, containerStyle, size, global, lightMode}) => (
            <AssignmentDownloadButton
                {...{
                    pressHandler,
                    tintColor,
                    containerStyle,
                    size,
                    global,
                    lightMode
                }}
            />
        )
    );
}

# setAssignmentItemDownloadProgress(AssignmentItemDownloadProgress)

You can use this to customize the progress indicator which is showed when the assignment item is being downloaded.

Parameters:
Name Type Description
AssignmentItemDownloadProgress React.ComponentType.<AssignmentItemDownloadProgressProps>
Example
...

import AssignmentDownloadProgress from "@src/components/Course/Assignment/AssignmentDownloadProgress";
export const applyCustomCode = (externalCodeSetup) => {
    externalCodeSetup.lessonSingleScreenApi.setAssignmentItemDownloadProgress(
        ({progress, unfilledColor, tintColor}) => (
            <AssignmentDownloadProgress
                {...{
                    progress,
                    unfilledColor,
                    tintColor
                }}
            />
        )
    );
}

# setAssignmentItemIcon(AssignmentItemIcon)

You can use this to change the icon beside the assignment title. For example, you can use this to remove or modify the default icon.

Parameters:
Name Type Description
AssignmentItemIcon React.ComponentType.<AssignmentItemIconProps>
Example
...

import Icon from "@src/components/Icon";
export const applyCustomCode = (externalCodeSetup) => {
    externalCodeSetup.lessonSingleScreenApi.setAssignmentItemIcon(
        ({icon, styles}) => <Icon icon={icon} styles={styles} />
    );
}

# setAssignmentItemStatus(AssignmentItemStatus)

You can use this to customize the AssignmentItemStatus component.

Parameters:
Name Type Description
AssignmentItemStatus React.ComponentType.<AssignmentItemStatusProps>
Example
...

import {BubbleIcon} from "@src/components/BubbleIcon";
export const applyCustomCode = (externalCodeSetup) => {
    externalCodeSetup.lessonSingleScreenApi.setAssignmentItemStatus(
        ({global, text, containerStyle, textStyle}) => (
            <BubbleIcon
                {...{
                    global,
                    text,
                    containerStyle,
                    textStyle
                }}
            />
        )
    );
}

# setAssignmentItemTitle(AssignmentItemTitle)

You can use this to customize the AssignmentItemTitle component. For example, you can use this to change the font color or size of the title.

Parameters:
Name Type Description
AssignmentItemTitle React.ComponentType.<AssignmentItemTitleProps>
Example
...

export const applyCustomCode = (externalCodeSetup) => {
    externalCodeSetup.lessonSingleScreenApi.setAssignmentItemTitle(({
        title,
        style
    }) => <Text style={style}>{title}</Text>)
}

# setAssignmentsHeader(AssignmentsHeader)

You can use this hook to customize the assignments title and the component that displays the total approved assignments.

Parameters:
Name Type Description
AssignmentsHeader React.ComponentType.<AssignmentsHeaderProps>
Example
...

export const applyCustomCode = (externalCodeSetup) => {
    externalCodeSetup.lessonSingleScreenApi.setAssignmentsHeader(
        ({global, t, totalAssignments, approved}) => (
            <View style={{...global.row, flex: 1, marginBottom: 15}}>
                <Text style={[global.assignmentHeading, {flex: 1}]}>
                    {t("assignment:heading")}
                </Text>
                {totalAssignments !== 0 && (
                    <Text style={[global.assignmentDesc]}>
                        {t("assignment:approvedOutOfTotal", {
                            total: totalAssignments,
                            approved
                        })}
                    </Text>
                )}
            </View>
        )
    );
}

# setLessonActionComponent(LessonActionComponent)

You can use this hook to customize the "Mark Complete" / "Completed" button. For example, you can add your own loading animation when the "Mark Complete" button is pressed.

Parameters:
Name Type Description
LessonActionComponent React.ComponentType.<LessonActionComponentProps>
Example

Add a "Completing..." text when marking the lesson complete 

//In custom_code/components/LessonActionComponent.js...
import React from "react";
import { View, Text, ActivityIndicator } from "react-native";

import AuthWrapper from "@src/components/AuthWrapper";
import AppTouchableOpacity from "@src/components/AppTouchableOpacity";
import Icon from "@src/components/Icon";
import { isColorDark } from "@src/utils";

const LessonActionComponent = ({
    showComplete,
    global,
    colors,
    t,
    lesson,
    onCompleteButtonClick,
    completing,
    completeDisabled,
    labels
}) => (<AuthWrapper actionOnGuestLogin={"hide"}>
    {showComplete && (
        <View
            style={[
                global.row,
                {
                    backgroundColor: colors.bodyFrontBg,
                    borderTopColor: colors.borderColor
                },
                global.lessonActionButtonContainer
            ]}
        >
            <AppTouchableOpacity
                style={[
                    { flex: 1 },
                    {
                        opacity: !lesson.completed && completeDisabled ? 0.5 : 1,
                        backgroundColor: !lesson.completed
                            ? colors.primaryButtonBg
                            : colors.bodyFrontBg
                    },
                    global.completeLessonButtonW
                ]}
                disabled={lesson.completed || completeDisabled}
                onPress={onCompleteButtonClick}
            >
                <View style={global.row}>
                    <View style={global.linkWithArrow}>
                        {!lesson.completed ? (
                            completing && (
                                <>
                                    <Text style={{color: "#fff"}}>Completing...</Text>
                                    <ActivityIndicator
                                        animating={true}
                                        color={colors.primaryButtonColor}
                                        size="small"
                                        style={global.lessonButtonLoadingIcon}
                                    />
                                </>
                            )
                        ) : (
                            <Icon
                                webIcon={""}
                                icon={{fontIconName: "check", weight: 200}}
                                styles={global.lessonActionCompleteIcon}
                            />
                        )}
                        <Text
                            style={[
                                {
                                    marginLeft: 10,
                                    color: !lesson.completed
                                        ? colors.primaryButtonColor
                                        : isColorDark(colors.bodyFrontBg)
                                            ? "white"
                                            : "black"
                                },
                                !lesson.completed
                                    ? global.completeLessonButton
                                    : global.completeButton
                            ]}
                        >
                            {t(
                                lesson.completed
                                    ? "lesson:completed"
                                    : "lesson:completeLesson",
                                { label: labels.lesson.toLowerCase() }
                            )}
                        </Text>
                    </View>
                </View>
            </AppTouchableOpacity>
        </View>
    )}
</AuthWrapper>)

export default LessonActionComponent;

//In custom_code/index.js...

...

import LessonActionComponent from "./components/LessonActionComponent";
export const applyCustomCode = (externalCodeSetup: any) => {
    externalCodeSetup.lessonSingleScreenApi.setLessonActionComponent(props => <LessonActionComponent {...props} />)
}

# setLessonMaterialsSectionTitle(LessonMaterialsSectionTitle)

You can use this hook to customize the component that displays the "Materials" text.

Parameters:
Name Type Description
LessonMaterialsSectionTitle React.ComponentType.<LessonMaterialsSectionTitleProps>
Example
...

export const applyCustomCode = (externalCodeSetup) => {
  externalCodeSetup.lessonSingleScreenApi.setLessonMaterialsSectionTitle(
      ({global, t}) => (
          <Text
              style={{
                  ...global.courseRoundBoxTitleAbove,
                  marginBottom: 20
              }}
          >
              {t("lesson:materials")}
           </Text>
      )
  );
}

# setLessonScreenHeader(LessonScreenHeader)

You can use this hook to customize the header of the Lesson Single Screen which by default, contains the back-to-course button and the previous/next buttons.

Parameters:
Name Type Description
LessonScreenHeader React.ComponentType.<LessonScreenHeaderProps>
Example
//In custom_code/components/LessonScreenHeader.js...

import React from "react";
import {View} from "react-native";
import Animated from "react-native-reanimated";
import {DEVICE_WIDTH} from "@src/styles/global";
import AuthWrapper from "@src/components/AuthWrapper";

const Header = ({
    headerLeftStyle,
    style,
    global,
    backToCourse,
    renderTimer,
    headerRightAuthWrapperProps,
    prevNext
}) => {
  return (
    <Animated.View
      style={[
        global.row,
        global.fakeHeader,
        {
          backgroundColor: "transparent",
          paddingHorizontal: 10,
          overflow: "hidden"
        },
        {
          width: DEVICE_WIDTH
        },
        style
      ]}
    >
      <View
        style={[
          {
            alignItems: "center",
            justifyContent: "center",
            flexDirection: "row",
            flex: 1,
            height: "100%"
          }
        ]}
      >
        <View style={[global.headerButtonLeft, headerLeftStyle]}>
          {backToCourse}
        </View>
        <View style={[global.headerCustomTitle]}>
          {renderTimer}
        </View>
        <View style={[global.headerButtonRight]}>
          <AuthWrapper
            actionOnGuestLogin={"hide"}
            {...headerRightAuthWrapperProps}
          >
            {prevNext}
          </AuthWrapper>
        </View>
      </View>
    </Animated.View>
  );
};

export default Header;

//In custom_code/index.js...

import LessonScreenHeader from "./components/LessonScreenHeader";
export const applyCustomCode = externalCodeSetup => {
 externalCodeSetup.lessonSingleScreenApi.setLessonScreenHeader(props => <LessonScreenHeader {...props}/>)
}

# setLessonTitleComponent(LessonTitleComponent)

You can use this to replace the lesson's title component. For example, you can use this to change the title's background or add an ellipsis feature to it.

Parameters:
Name Type Description
LessonTitleComponent React.ComponentType.<LessonHeaderProps>
Examples

Change component's background and add ellipsis to text 

//In custom_code/components/LessonTitle.js...

import React from "react";
import {View, Text} from "react-native";
import Animated from "react-native-reanimated";

const LessonTitle = (props) => {

 const {
   global,
   colors,
   paddingTop,
   lesson,
   t,
   labels
 } = props;

 const paddingBottom = 14;

 let backgroundColor = colors.bodyFrontBg;
 if (lesson.title.includes("Android")){
   backgroundColor = "red"
 }

 return (
   <Animated.View
     style={[
       {
         backgroundColor: backgroundColor,
         width: "100%",
         shadowOffset: {width: 0, height: 1},
         shadowRadius: 1,
         shadowColor: "#000",
         shadowOpacity: 0.05
       }
    ]}
   >
   <View
     style={[
       global.row,
       {
         justifyContent: "space-between",
         alignItems: "flex-start",
         paddingTop,
         paddingBottom
       }
     ]}
   >
     <Animated.View
       style={{
         flex: 1,
         paddingHorizontal: 20
       }}
     >
       <Animated.Text
         style={[
           global.courseHeaderTitle,
           {marginBottom: 5}
         ]}
         numberOfLines={1} //Adds ellipsis to lesson title
       >
         {lesson.title}
       </Animated.Text>
       <Text style={global.courseHeaderSubTitle}>
         {t("lesson:count", {
           label: labels.lesson,
           current: lesson.order,
           total: lesson.total
         })}
       </Text>
     </Animated.View>
   </View>
   </Animated.View>
 );
};

export default LessonTitle;

//In custom_code/index.js...

...
import LessonTitle from "./components/LessonTitle"
export const applyCustomCode = externalCodeSetup => {
 externalCodeSetup.lessonSingleScreenApi.setLessonTitleComponent(props => <LessonTitle {...props} />)
}

Add screen header components to lesson title 

// In custom_code/components/LessonTitle.js...
import React from "react";
import { useSelector } from "react-redux";
import { View, Text, StyleSheet } from "react-native";
import Animated from "react-native-reanimated";
import PrevNext from "@src/components/Course/PrevNext";
import Icon from "@src/components/Icon";
import TimeCounter from "@src/components/TimeCounterAutoPause";

const LessonTitle = (props) => {

  const {
    title,
    global,
    colors,
    paddingTop,
    lesson,
    t,
    labels,
    onQuizClick,
    onLessonClick,
    onTopicClick,
    prevObject,
    nextObject,
    courseId,
    nextLockedAlert,
    backToCourse,
    course,
    loading,
    renderTimer,
    onTimePassed,
    navigation
  } = props;

  const paddingBottom = 14;

  const renderDefaultTimer = false

  const isLessonCompleting = useSelector(state => state.singleLesson.completing == lesson.id);

  const CustomTimer = () => {

    if (loading || !lesson.requireTimer || isLessonCompleting)
      return null;

    return <View
      style={{
        flexDirection: "row",
        alignItems: "center"
      }}
    >
      <Text>My Custom Timer</Text>
      <Icon
        icon={{fontIconName: "stopwatch", weight: 400}}
        webIcon={"IconArrowBack"}
        tintColor={colors.textIconColor}
        styles={{
          marginRight: 6,
          height: 20,
          width: 20
        }}
      />
      <TimeCounter
        paused={!navigation.isActive}
        onTimePassed={onTimePassed}
        initialSeconds={0}
        textProps={{ style: global.timer }}
      />
    </View>
  }

  return (
    <Animated.View
      style={[
        {
          backgroundColor: colors.bodyFrontBg,
          width: "100%",
          shadowOffset: { width: 0, height: 1 },
          shadowRadius: 1,
          shadowColor: "#000",
          shadowOpacity: 0.05,
          marginTop: 50
        }
      ]}
    >
      <View
        style={[
          global.row,
          {
            justifyContent: "space-between",
            alignItems: "flex-start",
            paddingTop,
            paddingBottom
          }
        ]}
      >
        <Animated.View
          style={{
            flex: 1,
            paddingHorizontal: 20
          }}
        >
         //ScreenHeader components
          <View style={{ flexDirection: "row", marginLeft: -20 }}>
            {backToCourse}

            <PrevNext
              {...{ onQuizClick, onLessonClick, onTopicClick }}
              global={global}
              colors={colors}
              t={t}
              prevObject={prevObject}
              nextObject={nextObject}
              courseId={courseId}
              nextLockedAlert={nextLockedAlert}
            />

            {renderDefaultTimer ? renderTimer : <CustomTimer />}

          </View>
          //End ScreenHeader components

          <Animated.Text
            style={[
              global.courseHeaderTitle,
              { marginBottom: 5 }
            ]}
            numberOfLines={1} //Adds ellipsis to lesson title
          >
            {lesson.title}
          </Animated.Text>

          <Text style={global.courseHeaderSubTitle}>
            {t("lesson:count", {
              label: labels.lesson,
              current: lesson.order,
              total: lesson.total
            })}
          </Text>
        </Animated.View>
      </View>
    </Animated.View>
  );
};

export default LessonTitle;

//In custom_code/index.js...

...
import LessonTitle from "./components/LessonTitle"
export const applyCustomCode = externalCodeSetup => {
 externalCodeSetup.lessonSingleScreenApi.setLessonTitleComponent(props => <LessonTitle {...props} />)
}

# setLessonViewModelFilter(lessonViewModelFilter)

Sets the callback function that can change an existing lesson view model object.

Parameters:
Name Type Description
lessonViewModelFilter TransformLessonViewModelCallback
Example

Remove the native blocks in a lesson

externalCodeSetup.lessonSingleScreenApi.setLessonViewModelFilter((viewModel, lesson) => {
    return {
        ...viewModel,
        contentNative: []
    }
})

# setMaterialsComponent(MaterialsComponent)

You can use this to customize the component that displays the materials of the lesson.

Parameters:
Name Type Description
MaterialsComponent React.ComponentType.<MaterialsComponentProps>
Example
...

import {
  Dimensions,
} from "react-native";
import HTML from "react-native-render-html";
import {RenderListPrefix} from "@src/components/Course/CourseMaterials"
const ent = require("ent");
const DEVICE_WIDTH = Dimensions.get("window").width;

export const applyCustomCode = (externalCodeSetup) => {

    externalCodeSetup.lessonSingleScreenApi.setMaterialsComponent((props) => {

        const {
            tagsStyles,
            materialsStyles,
            baseFontStyle,
            materials,
            onLinkPress,
            global,
            colors
        } = props;

        return (
                <HTML
                    tagsStyles={{...tagsStyles, ...materialsStyles}}
                    baseFontStyle={baseFontStyle(15)}
                    html={ent.decode(materials)}
                    imagesMaxWidth={DEVICE_WIDTH - 32}
                    onLinkPress={onLinkPress}
                    listsPrefixesRenderers={{
                        ul: (attrib, children, styles, passProps) => (
                            <RenderListPrefix
                                parent={"ul"}
                                colors={colors}
                                global={global}
                                passProps={passProps}
                            />
                        ),
                        ol: (attrib, children, styles, passProps) => (
                            <RenderListPrefix
                                parent={"ol"}
                                colors={colors}
                                global={global}
                                passProps={passProps}
                            />
                        )
                    }}
                />
            )
    });
}

# setOfflineComponent(OfflineComponent)

You can use this hook to customize the component that displays a "This content is not available offline" message if a webview is used for rendering the lesson content while the device is offline.

Parameters:
Name Type Description
OfflineComponent React.ComponentType.<OfflineComponentProps>
Example
...

import EmptyList from "@src/components/EmptyList";

export const applyCustomCode = (externalCodeSetup) => {
    externalCodeSetup.lessonSingleScreenApi.setOfflineComponent(
        ({containerStyle, t, global, emptyListStyle}) => (
            <View style={containerStyle}>
                <EmptyList
                    emptyText={{
                        title: t("common:contentOfflineMessage"),
                        icon: {fontIconName: "wifi-slash", weight: 400}
                    }}
                    global={global}
                    style={emptyListStyle}
                />
            </View>
        )
    );
}

# setPrevNextComponent(PrevNextComponent)

You can use this to replace the previous and next buttons on the lessons single screen if you want to change the default option which always displays the prev/next buttons.

Parameters:
Name Type Description
PrevNextComponent React.ComponentType.<PrevNextComponentProps>
Examples

Hide the previous and next buttons if you're only using one lesson in a course 

//In custom_code/components/PrevNext.js

import React from "react";
import PrevNext from "@src/components/Course/PrevNext";

 const PrevNextComponent = props => {

   const { onQuizClick,
           onLessonClick,
           onTopicClick,
           global,
           colors,
           t,
           prevObject,
           nextObject,
           courseId,
           nextLockedAlert } = props;

   if (! nextObject && ! prevObject){
       return null;
   }

   return (
       <PrevNext
           {...{ onQuizClick, onLessonClick, onTopicClick }}
           global={global}
           colors={colors}
           t={t}
           prevObject={prevObject}
           nextObject={nextObject}
           courseId={courseId}
           nextLockedAlert={nextLockedAlert}
       />
   );
};
export default PrevNextComponent;

//In custom_code/index.js...

...

import PrevNextComponent from './components/PrevNext';
export const applyCustomCode = externalCodeSetup => {
 externalCodeSetup.lessonSingleScreenApi.setPrevNextComponent(props => <PrevNextComponent {...props} />)
}

Hide previous and next buttons 

...

export const applyCustomCode = externalCodeSetup => {
 externalCodeSetup.lessonSingleScreenApi.setPrevNextComponent(() => null)
}

# setPrevNextPlaceholder(PrevNextPlaceholder)

You can use this to replace the previous and next buttons' placeholders on the lessons single screen. The previous and next buttons' placeholders appear while the app is still loading the lesson.

Parameters:
Name Type Description
PrevNextPlaceholder React.ComponentType.<PrevNextPlaceholderProps>
Examples

Change placeholder color 

externalCodeSetup.lessonSingleScreenApi.setPrevNextPlaceholder((props) => {

   const {global} = props;

   return <>
     <View
       style={[
         global.wrappedButton,
         global.wrappedTextButton,
         { marginRight: 4, width: 64, backgroundColor: "blue" }
       ]}
     />
     <View
       style={[
         global.wrappedButton,
         global.wrappedTextButton,
         { width: 65 , backgroundColor: "red"}
       ]}
     />
   </>
})

Hide the placeholder even while the screen is still loading 

externalCodeSetup.lessonSingleScreenApi.setPrevNextPlaceholder(() => null)

# setTopicNavigationFilter()

Deprecated:
  • Yes

# setTransformLessonActionButtons(transformLessonActionButtons)

You can transform the default lesson action button by replacing it with your preferred action buttons.

Parameters:
Name Type Description
transformLessonActionButtons TransformLessonActionButtonsCallback
Example

Add more components for lesson action 

externalCodeSetup.lessonSingleScreenApi.setTransformLessonActionButtons((
 LessonButton,
 showComplete,
 global,
 colors,
 lesson,
 completing,
 labels) => {

   const Buttons =
     <View style={[global.row, {backgroundColor: "#fff"}]}>

       <View style={{ width:"45%", backgroundColor: "#fff", paddingHorizontal: 20, paddingVertical: 15 }}>
         <AppTouchableOpacity
           style={[
             global.completeLessonButtonW,
             { flex: 1, backgroundColor: colors.primaryButtonBg }
           ]}
           onPress={() => {
             //Do function...
           }}
         >
           <View style={global.row}>
             <View style={global.linkWithArrow}>
               <Text
                 style={{color: "#fff", fontWeight: "bold"}}
               >
                 Questions?
               </Text>
             </View>
           </View>
         </AppTouchableOpacity>
       </View>
       <View style={{ width: "45%", marginLeft: "auto" }}>
         {LessonButton}
       </View>
     </View>

   return Buttons;
})

# setVideoProgressionComponent(VideoProgressionComponent)

You can use this hook to customize the Video Progression component in the single lesson screen. For example, you can use this to change the size of the video player or add a custom function when the video finishes playing on a lesson.

Parameters:
Name Type Description
VideoProgressionComponent React.ComponentType.<VideoProgressionComponentProps>
Example

Execute a custom callback when video has finished playing 

...
import AppVideo from "@src/components/Video/AppVideo";

export const applyCustomCode = externalCodeSetup => {

  externalCodeSetup.lessonSingleScreenApi.setVideoProgressionComponent(props => {
    const {
      lessonVideoStyle,
      controls,
      autoPlay,
      videoCallback,
      url,
      width,
      height,
      global,
      isNavActive,
      lesson,
      videoWatched,
      setVideoWatched,
      onCompleteButtonClick
    } = props;

    const customCallback = settings => event => {

      if (event.nativeEvent.data === "ENDED") {

        if (!videoWatched)
          setVideoWatched();

        Alert.alert(
          "Video Complete",
          "You have finished watching the video. Do you want to mark the lesson as complete?",
          [
            {
              text: "Cancel",
              onPress: () => console.log("Cancel Pressed"),
              style: "cancel"
            },
            { text: "OK", onPress: () => onCompleteButtonClick() }
          ]
        );
      }

    }

    return <View style={lessonVideoStyle}>
      <Text>Please finish watching the video below to proceed...</Text>
      <AppVideo
        controls={controls}
        autoPlay={autoPlay}
        // videoCallback={videoCallback()}
        videoCallback={customCallback(lesson.settings)}
        url={url}
        width={width}
        height={height}
        global={global}
        isNavActive={isNavActive}
      />
    </View>
  })
}

# setWebViewContentComponent(WebViewContentComponent)

You can use this hook to replace the webview being used in the lesson content. For example, you can choose to replace it with the default react-native webview.

Parameters:
Name Type Description
WebViewContentComponent React.ComponentType.<WebViewContentComponentProps>
Example
...

import WebViewWithMore from "@src/components/WebViewWithMore";
export const applyCustomCode = (externalCodeSetup) => {
    externalCodeSetup.lessonSingleScreenApi.setWebViewContentComponent(
        ({
            online,
            t,
            onShouldStartLoadWithRequest,
            height,
            source,
            global,
            colors,
            ModalHeaderComponent
        }) => (
            <WebViewWithMore
                online={online}
                t={t}
                onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
                height={height}
                source={source}
                global={global}
                colors={colors}
                ModalHeaderComponent={ModalHeaderComponent}
            />
        )
    );
}

# topicNavigationFilter()

Deprecated:
  • Filters navigation onPress function that is used to navigate to Topic