Video Feed

Currently, there are five source types of video feed:

• Discover Feed

• Channel Feed

• Playlist Feed

• Playlist Group Feed

• Dynamic Content

Integration

import 'package:fw_flutter_sdk/fw_flutter_sdk.dart';

/// discover
VideoFeed(
  height: 200,
  source: VideoFeedSource.discover,
);

/// channel
VideoFeed(
  height: 200,
  source: VideoFeedSource.channel,
  channel: "your encoded channel id",
);

/// playlist
VideoFeed(
  height: 200,
  source: VideoFeedSource.playlist,
  playlist: "your encoded playlist id",
  channel: "your encoded channel id",
);


/// playlist group
VideoFeed(
  height: 200,
  source: VideoFeedSource.playlistGroup,
  playlistGroup: "your encoded playlist group id",
);

/// dynamic content
VideoFeed(
  height: 200,
  source: VideoFeedSource.dynamicContent,
  dynamicContentParameters: const {
    '<cohort key>': ['<cohort value1>', '<cohort value2>']
  },
);

Please refer to the Encoded IDs help article to learn about how to find your encoded channel ID, playlist ID, playlist Group ID

Mode

VideoFeed widget supports three modes: row, column, and grid.

Use grid mode:

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Expanded(
      child: VideoFeed(
        source: VideoFeedSource.discover,
        mode: VideoFeedMode.grid,
      ),
    )
  ],
);

Video feed configuration

VideoFeed widget provides videoFeedConfiguration property for configuring Video Feed. The current configurable are backgroundColor, cornerRadius, and titlePosition etc. Please refer to VideoFeedConfiguration for more details.

final videoFeedConfiguration = VideoFeedConfiguration();
videoFeedConfiguration.title = VideoFeedTitleConfiguration();
videoFeedConfiguration.title?.hidden = false;
videoFeedConfiguration.titlePosition = VideoFeedTitlePosition.nested;
VideoFeed(
  source: VideoFeedSource.discover,
  videoFeedConfiguration: videoFeedConfiguration,
);

Video player configuration

VideoFeed widget provides videoPlayerConfiguration property for configuring Video Player. The current configurable are playerStyle, videoCompleteAction, and ctaButtonStyle etc. Please refer to VideoPlayerConfiguration for more details.

final videoPlayerConfiguration = VideoPlayerConfiguration();
videoPlayerConfiguration.playerStyle = VideoPlayerStyle.full;
videoPlayerConfiguration.videoCompleteAction = VideoPlayerCompleteAction.advanceToNext;
videoPlayerConfiguration.showShareButton = true;
videoPlayerConfiguration.showMuteButton = true;
videoPlayerConfiguration.showPlaybackButton = true;

VideoFeed(
  source: VideoFeedSource.discover,
  videoPlayerConfiguration: videoPlayerConfiguration,
);

Video feed loading result callback

VideoFeed component provides onVideoFeedLoadFinished property for setting video feed loading result callback.

VideoFeed(
  source: VideoFeedSource.discover,
  onVideoFeedLoadFinished: (error) {},
);

Force refreshing video feed

VideoFeedController? _feedController;

VideoFeed(
  source: VideoFeedSource.discover,
  onVideoFeedCreated: (controller) {
    _feedController = controller;
  },
);

IconButton(
  onPressed: () {
    //force refreshing video feed
    _feedController?.refresh();
  },
  icon: const Icon(
    Icons.refresh,
  ),
);

Picture in Picture(Only supported on iOS)

This feature allows the user to watch media while the application is in a background state. While in background mode a video will display in a floating, resizable window.

To enable PiP functionality, you also need to add Background Modes capability via Signing & Capabilities in your iOS project settings. More information about this can be found here: Apple Documentation

Once the background mode is enabled, moving from an active state to a background state will immediately trigger the Picture In Picture functionality. In addition to enabling the background mode, you also need to set enablePictureInPicture to true.

final videoFeedConfiguration = VideoFeedConfiguration();
videoFeedConfiguration.enablePictureInPicture = true;
VideoFeed(
  source: VideoFeedSource.discover,
  videoFeedConfiguration: videoFeedConfiguration,
);

Reference

VideoFeed