Skip to content

Commit

Permalink
Updated series management documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
dowen-jwplayer authored Nov 6, 2024
1 parent ecff731 commit 588b723
Showing 1 changed file with 32 additions and 49 deletions.
81 changes: 32 additions & 49 deletions series.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ parent: Screens
## Introduction
This page describes how to define and show series, with seasons and episodes.

## Define a series in JW (Using Series Management, note that this is currently not working with Applicaster, please use the playlist based method from below)
## Define a series in JW (Using JWP Series Management)
> :information_source: note that this is ONLY works when using an interstitial screen between episodes and playback.
### Create Series in JWP
Create a series media asset in JW Player [JWP Add a Series](https://docs.jwplayer.com/platform/docs/add-a-series)
Expand All @@ -29,6 +30,11 @@ If you do not use seasons here is the feed format for all episodes:
- episodes within a series: `zapp-dsp-base-url/jw/series/[seriesId]/episodes`
- seriesId= `id`

### :information_source: Interstitial screen:
Currently the JWP deliery API does not add the video URLs to the episode list endpoint. Due to this playback will not work directly from the episode list and you need to create an interstitial screen before playback that shows the selected media asset using the media endpoint:
- single media asset: `zapp-dsp-base-url/jw/media/{{matchId}}`


### Zapp setup
For the zapp set up of a series without tabs use a playlist with a series item that uses series management
Type mapping: `series` to connect to your series screen in zapp
Expand All @@ -37,54 +43,31 @@ For the zapp set up of a series with tabs use a playlist with a series item that
Type mapping: `series` to connect to your tabs season screen in zapp
Type mapping: `season` to connect to the screen to display the episode list within a season tab

Add an interstitial episode screen:
Type mapping: `episode` to connect to your episode screen

## Define a series in JW (Playlist based method)
You need:
- A media item (a.k.a. card) that links to the series playlist using `seriesId`
- A 'series' playlist that includes episodes based on a tag
- Episodes with fields `episodeNumber` and `seasonNumber` and a tag, that includes the epsidoe in the in the series playlist

<div style="display:flex; justify-content: center;">
<img src="./img/series-jw-card.png" width="600">
</div>
<br>
<div style="display:flex; justify-content: center;">
<img src="./img/series-jw-playlist.png" width="600">
</div>
<br>
<div style="display:flex; justify-content: center;">
<img src="./img/series-jw-episode.png" width="600">
</div>

## Create an all-series playlist in JW
Create a playlist in JW Player, containing all the series. There are no special requirements.

## Create an all series screen
1. Create a all-series/shows feed using the middleware endpoint `/jw/all-series-playlists/`. This endpoint will ensure the type to `series`
1. Create a series/shows screen pointing to the newly created feed
1. Do the type mapping to the [series target screen](https://jwplayer.github.io/applicaster-docs/target-screens.html)

<div style="display:flex; justify-content: center;">
<img src="./img/series-all-feed.png" width="600">
</div>
<br>
<div style="display:flex; justify-content: center;">
<img src="./img/series-all-screen.png" width="600">
</div>
<br>
<div style="display:flex; justify-content: center;">
<img src="./img/series-type-mapping.png" width="600">
</div>

## Create an series screen
1. Create a feed for all possible seasons in your environment. E.g season 4 looks like this: `/jw/playlists/{{playlistId}}?media_filtering=seasonNumber:4&feedTitle=Season%204`
1. Create a series/show screen containing all possible seasons
1. Ensure to enable 'Hide Component if data is empty'

<div style="display:flex; justify-content: center;">
<img src="./img/series-season-feeds.png" width="600">
</div>
<br>
<div style="display:flex; justify-content: center;">
<img src="./img/series-show-screen.png" width="600">
</div>
- A 'series' playlist for each season that includes episodes for that season
- A contentType for new series that are NOT using series management.
- This contentType needs a set of custom parameters that let a user select the season playlists using: `"field_type": "playlist_select"` with the number of params equal to the maximum number of seasons being managed.
- A media item for each series with the contentType defined above
- A playlist that contains all of the Series to be shown in a rail in tha app

The setup above will allow customers to create a new series as a media asset, name it, add a description, upload an image and then select the season playlists against the custom parameters.

## Setup series in Zapp
Add a series of Feeds in Zapp
- One feed for the list of series: `zapp-dsp-base-url/jw/seriplaylistses/[playlistid]`
- One dynamic feed to load the list of episodes from the playlists: `zapp-dsp-base-url/jw/seriplaylistses/{{seasonplaylistID}}`

In Zapp studio you then need the following rails/screens:
- A rail to show all series covers using the list of series playlist above.
- A new **Series screen** to show the list of seasons and episodes.
- This screen has a large number of rails equal to the maximum amount of seasons that may need to be shown
- Each rail is associated with the dynamic episode list feed above
- {{seasonplaylistID}} can be set to the custom parameters defined in the new series contentType for example:
- `extensions.season1`
- `extensions.season2`
- `extensions.season3`

0 comments on commit 588b723

Please sign in to comment.