Skip to content

Implementing Storyteller List and Clips Player Delegate Callbacks#

StorytellerStoriesRowView, StorytellerStoriesGridView, StorytellerClipsRowView, and StorytellerClipsGridView use the StorytellerListViewDelegate for per-list callbacks.

StorytellerClipsPlayerView uses StorytellerClipsPlayerDelegate, exposed through the same delegate property on the player instance.

To define delegate methods, set the delegate property on the Storyteller view you want to observe.

const storyRow = new Storyteller.StorytellerStoriesRowView('row-id');
storyRow.delegate = {
    ...
};

const clipPlayer = new Storyteller.StorytellerClipsPlayerView(
  'clips-player-id',
  { externalId: 'clip-external-id' }
);
clipPlayer.topLevelBackButtonEnabled = true;
clipPlayer.delegate = {
  onTopLevelBackTapped: () => {
    window.history.back();
  },
};

Delegate Methods#

You can implement these optional methods when responding to the StorytellerListViewDelegate protocol:

  • onDataLoadStarted: () => void - called when the network request to load data for all Stories/Clips has started
  • onDataLoadComplete: (success: boolean, error: Error | null, dataCount: number) => void - called when the data loading network request is complete
  • success: whether or not the request was successful
  • error: the HTTPRequestError if the request was not successful
  • dataCount: the number of Stories loaded
  • onPlayerDismissed: () => void - called when a Story/Clip has been dismissed

StorytellerClipsPlayerDelegate supports those same callbacks and adds:

  • onTopLevelBackTapped?: () => void - called when the top-level back button is tapped on an embedded StorytellerClipsPlayerView after topLevelBackButtonEnabled = true
interface IListViewDelegate {
  onDataLoadStarted: () => void;

  onDataLoadComplete: (
    success: boolean,
    error: Error | null,
    dataCount: number
  ) => void;

  onPlayerDismissed: () => void;
}

interface IStorytellerClipsPlayerDelegate extends IListViewDelegate {
  onTopLevelBackTapped?: () => void;
}

onPlayerDismissed still means the player was actually dismissed. A top-level back tap uses onTopLevelBackTapped instead, and only falls back to window.history.back() when no callback is provided. When topLevelBackButtonEnabled is false or omitted, the embedded top-level back button is not shown and onTopLevelBackTapped is not called from that button.

See the React sample's StorytellerStoriesRow component for a concrete StorytellerListViewDelegate that hides the row when no data is returned.