prx / play-angular

Embed player

⚠️ Legacy Project
This project has been replaced by Play-Next.js, and is no longer in development.

PRX Embed Player

Embeddable audio playback!

Developing

TODO: hot-reloading not working yet via docker-compose, so you probably want to just develop locally for now.

Generally, you'll want to look at the /demo page for various usages of this project. Or copy the iframes from that page, and open them separately.

Docker

TODO: port prx-ng-serve to this project, to make the dev-server work.

cp env-example .env

# build a docker image
docker-compose build

# run docker PROD server (no reloading)
docker-compose up
open "http://play.prx.docker/demo"

# run the tests (ci command uses phantomjs)
docker-compose run play ci

To develop locally:

cp env-example .env
yarn

# run the dev server
yarn start
open "http://localhost:4300/demo"

# run the tests
yarn test

License

MIT License

play-angular's Issues

Automatically fill in Builder form from podcast feed

Long-term URL

Presumably we'll be living with the URL for these embeds for a while. Any thoughts on what form they should take, @kookster @cavis ?

Help / usage docs

Need some help docs for users to know how to use the builder and player.
Some features may not be obvious, like hotkeys, and will need explanation.
Probably start with docs in the builder, maybe also a link to a help page on the player somewhere

TAL

Ad file durations

To correctly calculate the duration of an episode before audio files are all retrieved and their length detected, need to provide the duration of each file, including the ad files coming from adzerk.

We need a strategy for getting this info, perhaps an AWS API endpoint with a cache and lambda that downloads these files, checks meta data, caches the result, and can return it to the player

google analytics events

Basic events, listen events

RSS proxy option

We have an RSS proxy, others may wish to use their own, make this a configurable part of player

Display play count on the player

podcast feed should be remembered

Provide design assets from new rodrigo work

@driki using invision and zeppelin to export, provide to @farski

Player landing page

The player can link to another page, such as to the show as a whole, or to an episode url for the audio.

Sometimes shows/feeds will have a reasonable landing page already that we can take them to, but other times not.

We could provide a landing page(s) for shows which lack an acceptable/preferred url for the show or episode.

This would also help in the case where a landing page is needed to embed the open graph or other sharing tags needed for social network sharing.

CNAME for adzerk to prevent ad blocking

Use the remix "heart" play button?

What do folks think about using the remix "heart" play button?
Thinking about subtle ways to make the player distinct without being overtly branded
@farski?

Published date

Timeliness matters for podcasts, sometimes having the date for an episode helps.
Display the pubdate for an episode. Like many things, this can be a general date for theplayer, and the builder can prefill with the feed item pubDate

Timed Transcript / Closed captioning

After completion view

What do we show after playback is concluded?

More prominent share or subscribe seem obvious - if we had a notion of 'next audio' that would be good as well.

Share embed player

not to be confused with sharing via an integration with a social network, is sharing the player itself with embed code

Log Impressions for ad playback

What to display if there is no image?

Social Sharing buttons

need to figure out landing page issues for this to work well

Use explicit mode rather than strictly size/scale to determine layout

Update the player's responsive media rules to instead use an explicit indication of horizontal vs. vertical layout.

Player is currently responsive, and changes to a different 'vertical' layout when the height is past a certain point. The new design includes a larger text component at the bottom of the player controls which would lead to a size that would 'trip' this different layout, but should not.

Player request data from url, instead of from iframe url

Enhance the player to be able to accept a url to pull data from on each load, rather than only have data provided at iframe build time as part of the src url.

The url it pulls from should provide the data in json format, with a scheme TBD, but likely a super set of the attributes currently passed in the iframe src url

Optional logo on the page

keep the identity subtle - small greyscale image in the lower right, for example.
consider making this removable for specific partners

variable playback speed in UI

Set the feed/itunes subscription button

The player will support an action button, to enable the listener to subscribe to the podcast associated with the episode being played.

The builder will support providing filling this with a subscribe button, which will link to the feed or itunes.

In this initial version, use the URL provided for the podcast feed itself, but allow override to the itunes url.

Update player to new design styles

for single episode, get the basic design implemented enough to be used as is; design and implied animations and improvements not implemented

Volume controls

A volume control, such as a slider, and / or a mute button.
Nothing for now - mute makes little sense on audio - just pause, and there are other ways to control volume.

Update player to latest ng2 and webpack

HLS playback support?

2016-10-21

Use the latest rodrigo design to update the episode player and get it ready to use for embedding on other sites such as Medium

Hot key controls

Based on youtube hotkeys: j, k , l, etc.

How do listeners learn we support these, see what are available?

CNAME for adzerk to prevent ad blocking

Playlist player

Have a player able to play multiple audio files / podcast episodes.

Start with an RSS Feed to create the playlist player.

Player could be generic as to playlist src, and builder could provide the list via reading rss and passing playlist data on to player.

Future versions could also support selecting specific episodes only, perhaps across feeds?

CNAME for adzerk to prevent ad blocking

Referencing playlist player

There is a different ticket #20 to support a playlist all from a single feed, this is to also support that single feed having reference elements in the items to indicate that the items come from different rss feeds.

This will cause visual changes, such as displaying the source podcast for an episode and the image, as well as functional changes such as navigating to this referenced podcast (TBD)

Skip +30

Skip buttons are useful, but space is always a concern.

We agreed a skip back 10 secs button makes sense to start, as the most likely to be used for the "I missed that" scenario with spoken word podcasts.

Also have to consider that a skip ahead button may encourage skipping ads.
We don't want to prevent that at this point, but we also don't have to make it as easy as possible.

What should player look like to encourage hitting play?

Consider the appearance of the player before play as been hit.

For example, can it seem like a pull quote with a play button - some way to use text and font to create interest and draw the eye and hopefully user actions.

Do we need all the controls available before started?

Timecode in ad-free audio link to chapter in audio with ads?

Indicate an Ad is playing back

initial behavior is to act like it is all a single file.

In the future, experiment with this - perhaps a text or color change to indicate ad is playing.

Text info on the player

The player should support two text fields, a "title" and "subtitle", though they can be used however.

The builder should default these, using the title of the episode, and perhaps the podcast name for the subtitle.

Here the player should support whatever, but the builder provides good defaults / options based on the feed.

Player builder

Provide a web app for getting embed code for podcast episodes.

Start with an RSS feed, lost episodes, then for a given episode provide embed code for the player based on data from the feed and provided or overridden in the builder.

Design of text over the image background?

If we do a design where text goes over an image background, need to determine how to keep the text readable, such as a translucent text background providing higher contrast.

Metadata Text Track

Vertical player design

• AK - provide examples and explore how much this is in use
• MM - work with Rodrigo on possible design

Waveform or other visualization

Display a waveform for the audio file.
Could be incorporated with the progress bar.
Need to figure out how to get this for novel audio files

Download audio

How/should we provide a means to download the audio file.

I am not a huge fan of this:

• not useful on mobile
• on desktop, if you want it offline -> subscribe

Responsive player design

rather than design two different player "skins", have one that is responsive, and does things like display the image above the player when the height is high enough, or small and has image as thumbnail on left when the player is wide and short.

Consider how this interacts with the builder - can it provide breakpoint values to the player?

Play/pause button

toggles, should be prominent

Additional text below the player controls

New design calls for additional text below the controls that can be used for curation or other purposes, with a title (e.g. "why you should care"), and then paragraph text below that.

This will need to be configurable, passed in the iframe url, but could be defaulted in a builder to pull from a specific tag.

Action button for subscribe

The player should support a button with a text (image?) label and url to be used by the builder to set a subscription button.

One option is to have this be a generic button, which is used for subscribe.

That may be a good idea, but as this is a podcast player, and subscriptions, or opening in an app is such a fundamental affordance, we may wish to specialize a button just for this.

Some further nuance then possible - so it can have subscribe send to multiple destinations, qualified by os detected e.g. send to feed url or radiopublic, but on ios also display the podcasts/itunes link.

The builder could allow someone to choose which podcast apps / urls to enable for subscribe.

It may also make some sense for this send to an app function to be separate from subscribe, or genericise subscribe to be some kind of 'open' elsewhere button.