Player Deck (Flutter)

The PlayerDeck widget displays a horizontally scrollable row of video thumbnails with inline playback and product cards. Currently, there are seven source types of the player deck:

Discover
Channel
Playlist
Dynamic Content
Hashtag Playlist
SKU
Single Content

Integration

import 'package:fw_flutter_sdk/fw_flutter_sdk.dart';

/// discover
PlayerDeck(
  height: 481,
  source: VideoFeedSource.discover,
);

/// channel
PlayerDeck(
  height: 481,
  source: VideoFeedSource.channel,
  channel: "your encoded channel id",
);

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

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

/// hashtag playlist
PlayerDeck(
  height: 481,
  source: VideoFeedSource.hashtagPlaylist,
  channel: "your encoded channel id",
  hashtagFilterExpression: "<hashtag filter expression>",
);

/// sku playlist
PlayerDeck(
  height: 481,
  source: VideoFeedSource.sku,
  channel: "your encoded channel id",
  productIds: ["product_id_1", "product_id_2"],
);

/// single content
PlayerDeck(
  height: 481,
  source: VideoFeedSource.singleContent,
  contentId: "your encoded video or live stream id",
);

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

Player deck loading result callback

PlayerDeck widget provides onPlayerDeckLoadFinished property for setting player deck loading result callback.

PlayerDeck(
  height: 481,
  source: VideoFeedSource.discover,
  onPlayerDeckLoadFinished: (error) {
    if (error != null) {
      // Handle the loading error
    }
  },
);

Empty callback

PlayerDeck widget provides onPlayerDeckEmpty property for setting player deck empty callback. The callback is triggered when there are no items in the player deck. For example, you could hide the widget when the callback is triggered. The callback is triggered in the following scenarios:

Load successfully but the back end returns an empty list
The load failed and the list is empty

PlayerDeck(
  height: 481,
  source: VideoFeedSource.discover,
  onPlayerDeckEmpty: (error) {
    // Hide the widget
  },
);

Force refreshing player deck

PlayerDeckController? _playerDeckController;

PlayerDeck(
  height: 481,
  source: VideoFeedSource.discover,
  onPlayerDeckCreated: (controller) {
    _playerDeckController = controller;
  },
);

// Force refreshing player deck
_playerDeckController?.refresh();

Get feed id

PlayerDeck widget provides onPlayerDeckGetFeedId property for getting the feed id.

PlayerDeck(
  height: 481,
  source: VideoFeedSource.discover,
  onPlayerDeckGetFeedId: (feedId) {
    // Use feedId
  },
);

Enable PiP(Picture in Picture)

Set up the iOS project

To enable PiP outside the iOS app, you also need to add "Audio, Airplay, and Picture in Picture" background mode via Signing & Capabilities in your iOS project settings. More information about this can be found here: Apple Documentation

Set enablePictureInPicture to true on Dart side

PlayerDeck(
  height: 481,
  source: VideoFeedSource.discover,
  enablePictureInPicture: true,
  onPlayerDeckDidStartPictureInPicture: (error) {
    // Handle PiP start result
  },
  onPlayerDeckDidStopPictureInPicture: (error) {
    // Handle PiP stop result
  },
);

Generally, if you put the player deck widget as the child of ListView, it will be rebuilt when scrolling the widget out of the view box. You could set wantKeepAlive as true to make the player deck widget keep alive when scrolling the widget out of the view box.

PlayerDeck(
  height: 481,
  source: VideoFeedSource.discover,
  // Keep the widget alive when scrolling the widget out of the view box
  wantKeepAlive: true,
);