Share & Video Deeplinking (React Native)

Set shared base URL

If your website integrates our Web component, we suggest setting the website link (without query) as the shared base URL. For instance, if the link for the website integrating our Web component is https://example.com, you could set the share base URL using the following code snippets.

FireworkSDK.getInstance().shareBaseURL="https://example.com"

Once the share URL is configured as demonstrated in the code snippets above, the sample video shared URL will become https://example.com?fw_video={video_encoded_id}&fw_channel={channel_name}&fw_playlist={playlist_encoded_id}. Users can share the video by clicking the share button.

Enable the share link to launch the app

For instance, if you set the shared base URL as https://example.com, you must ensure that links beginning with https://example.com function as universal links for iOS and app links for Android. This way, the user clicking the shared URL will trigger your app (if installed) to open. Please consult the following docs for more details:

1. https://developer.apple.com/documentation/xcode/supporting-universal-links-in-your-app

2. https://developer.android.com/training/app-links

Open video player

When a user clicks the share link, your app (if installed) will be opened. Then you can get the the shared link and use openVideoPlayer of FireworkSDK instance to open the video player.

FireworkSDK.getInstance().openVideoPlayer(sharedLink);

Manually construct the shared URL

For instance, you might want to open the video player directly, bypassing the need for users to click a share link outside the app. Instead, you could trigger the video player to open when users click a button within the app. In this case, you could manually construct the shared URL and use openVideoPlayer API to open the video player.

When constructing the shared URL, fw_channel must be the channel name (e.g. my_channel), not the channel ID. This is the only place where the channel name is used. All other SDK APIs (video feed, story block, player deck, etc.) take the encoded channel ID.

Open single content player

As illustrated in the following code snippets, you can launch the video player to present a single video or livestream.

const videoId = "encoded_video_id";
// Use the channel name (e.g. "my_channel"), not the encoded channel ID
const channelName = "channel_name";
// openVideoPlayer API does not verify the shared base URL
// You could use https://fw.tv
// or a customized shared base URL(such as https://example.com)
const sharedLink = `https://fw.tv?fw_video=${videoId}&fw_channel=${channelName}`;
FireworkSDK.getInstance().openVideoPlayer(sharedLink);

Open playlist player

As illustrated in the following code snippets, you can launch the video player to present all videos/livestreams within a playlist. The specified video will be positioned first.

// The video/livestream corresponding to this video id will be placed first.
const videoId = "encoded_video_id";
// Use the channel name (e.g. "my_channel"), not the encoded channel ID
const channelName = "channel_name";
const playlistId = "encoded_playlist_id";
// openVideoPlayer API does not verify the shared base URL
// You could use https://fw.tv
// or a customized shared base URL(such as https://example.com)
let sharedLink =
    `https://fw.tv?fw_video=${videoId}&fw_channel=${channelName}&fw_playlist=${playlistId}`;
FireworkSDK.getInstance().openVideoPlayer(sharedLink);

Open floating player (only supported on iOS)

By default, openVideoPlayer launches a fullscreen player. However, you can append fw_mode=pinned to the query parameters to open a floating player instead. For more details, please refer to the code snippets below.

// The video/livestream corresponding to this video id will be placed first.
const videoId = "encoded_video_id";
// Use the channel name (e.g. "my_channel"), not the encoded channel ID
const channelName = "channel_name";
const playlistId = "encoded_playlist_id";
// openVideoPlayer API does not verify the shared base URL
// You could use https://fw.tv
// or a customized shared base URL(such as https://example.com)
let sharedLink =
    `https://fw.tv?fw_video=${videoId}&fw_channel=${channelName}&fw_playlist=${playlistId}&fw_mode=pinned`;
FireworkSDK.getInstance().openVideoPlayer(sharedLink);

Configuration for opening video player

Please refer to Player configurations (React Native).