# new BlocksApi()

Example

externalCodeSetup.blocksApi.METHOD_NAME

# addCustomBlockRender(blockType, renderer)

Parameters:

Example

User would like to customize the component when Video block is used

externalCodeSetup.blocksApi.addCustomBlockRender("core/video", (props) => {
  const { block } = props;
  const VideoComponent =
  <>
      <WebView
          source={{
              html: `<video width="980" playsinline controls autoplay src="${block.content}" ></video>`
          }}
          useWebKit={true}
          originWhitelist={['*']}
          allowsInlineMediaPlayback={true}
          style={{
              height: 250,
              width: "auto",
          }}/>

     <View>
          <Text> Watch our awesome video! </Text>
     </View>
  </>
  return VideoComponent;
});

# setAddedBlockAssetsToDownload(addedBlockAssetsToDownload)

Parameters:

Example

import React, {useEffect} from "react";
import {Text, View, StyleSheet} from "react-native";
import Video from "react-native-video";

// Use BuddyBoss HOC to fetch local assets.
// Alternatively, you can create your own function by utilizing RNFetchBlob.fs.exists(path) and fetching the downloaded asset like:
// const {
//         fs: {dirs}
// } = RNFetchBlob;
// const DIR_PATH = dirs.DocumentDir;
import withLocalAssets from "@src/components/hocs/withLocalAssets";

const LocalVideoPlayer = withLocalAssets(props => {
    const {block} = props;

    const downloadVideo =
        block.data.data_source.request_params.download_media.download_video;

    const downloadAudio =
        block.data.data_source.request_params.download_media.download_audio;

    const downloadSubtitles =
        block.data.data_source.request_params.download_media.download_subtitles;


    useEffect(
        () => {
            props.fetchLocalAsset(downloadVideo);
        },
        [downloadVideo]
    );

    const customVideoUri = props.localAsset;

    return (
        <>
            <View style={{flex: 1}}>
                {!props.localAsset ? (
                    <Text>Streaming video...</Text>
                ) : (
                    <Text>Local video</Text>
                )}

                <View style={styles.container}>
                    <Video
                        source={{uri: customVideoUri}}
                        style={styles.video}
                        controls={true}
                        resizeMode="contain"
                    />
                </View>
            </View>
        </>
    );
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#000"
    },
    video: {
        width: "100%",
        height: 300
    }
});

export const applyCustomCode = externalCodeSetup => {


    // Add custom block renderer hook
    externalCodeSetup.blocksApi.addCustomBlockRender(
        "ari/ari-video-player",
        props => <LocalVideoPlayer {...props} />
    );


    externalCodeSetup.blocksApi.setAddedBlockAssetsToDownload(() => {
        return [
            {
                blockType: "ari/ari-video-player", // blockNamespace

                // Add the different paths to the download urls
                // For example, if the block has a "data" object with a "data_source" property, then we can access it here
                // This accepts an array of strings, where each string is the path to the asset we want to download
                // If the object being accessed contains a string, then that string will be downloaded
                // If the object being accessed contains an array of download urls, then all of them will be downloaded
                downloadableAssets: [
                    "data.data_source.request_params.download_media.download_video",
                    "data.data_source.request_params.media_content"
                ]
            }
        ];
    });
 };

# setBlockProps(blockType, props)

Parameters:

Example

Extend the width of video blocks used in lesson single screen

import { Platform } from 'react-native'
import {DEVICE_WIDTH} from "@src/styles/global";
export const applyCustomCode = externalCodeSetup => {

  if (! Platform.isPad){
     externalCodeSetup.cssApi.addGlobalStyle("lessonSingleScreenBlockContainer", { paddingHorizontal: 0 }, true);
     externalCodeSetup.cssApi.addGlobalStyle("videoBlockContainer", { paddingHorizontal: 0 });

     externalCodeSetup.blocksApi.setBlockProps("core/embed", (props) => {

        const {block} = props;

        if (block.data.provider === "vimeo" || block.data.provider === "youtube"){
           return {
              ...props,
              viewWidth: DEVICE_WIDTH
           }
        }

        return props;
     });

  }
}

# setProfileBlockBgImage(image)

Parameters:

Deprecated:

• Changes the Profile Block cover image