The podlove-ui from podlove

[SB] - As a User i want to see feedback, when i subscribed via app or web link

Show a different view to the user, with the following information:

which app/link did the user try
in case of an error, the same link again for another try
back button, if it was the wrong app or link

Podlove player has an configuration option which allows to initialize the player with an opened tab, e.g. the chapter or info tab.
Currently, the tabs do not open, even if they are configured to do so. I created a minimal html file with a embedded player using the parts of the configuration examples from the docs:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example</title>
  <script src="https://cdn.podlove.org/web-player/embed.js"></script>
</head>
<body>
  <div id="example"></div>
  <script>
      podlovePlayer('#example', {
          title: 'FS171 Invasion!',
          subtitle: 'LAN Planung - Kalender - Bingo - Wikipedia - Akkukalibration - Alte iPads und iPods - Find My Friends - iPhone Music Player - Apple Watch - Kommandozeile - Star Wars - Dante - Internet of Things Security - VPN',
          summary: 'Wir haben eine wie wir finden abwechslungsreiche Sendung produziert, die wir Euch wie immer mit Freude bereitstellen. Während die Live-Hörer Freak-Show-Bingo spielen, greifen wir das Wikipedia-Thema der letzten Sendung auf und liefern auch noch weitere Aspekte des optimalen Star-Wars-Medienkonsums frei Haus. Dazu viel Nerderei rund um die Kommandozeile, eine Einschätzung der Perspektive der Apple Watch, ein Rant über die mangelhafte Security  im Internet of Things (and Buildings) und allerlei anderer Kram.  Roddi setzt dieses Mal aus, sonst Vollbesetzung.',
          publicationDate: '2016-02-11T03:13:55+00:00',
          poster: 'https://freakshow.fm/wp-content/cache/podlove/04/662a9d4edcf77ea2abe3c74681f509/freak-show_400x400.jpg',
          show: {
              title: 'Freak Show',
              subtitle: 'Menschen! Technik! Sensationen!',
              summary: 'Die muntere Talk Show um Leben mit Technik, das Netz und Technikkultur. Bisweilen Apple-lastig aber selten einseitig. Wir leben und lieben Technologie und reden darüber. Mit Tim, hukl, roddi, Clemens und Denis. Freak Show hieß irgendwann mal mobileMacs.',
              poster: 'https://freakshow.fm/wp-content/cache/podlove/04/662a9d4edcf77ea2abe3c74681f509/freak-show_200x200.jpg',
              url: 'https://freakshow.fm'
          },
          duration: '04:15:32',
          chapters: [
              { start:"00:00:00", title: 'Intro'},
              { start:"04:10:00", title: 'Ausklang'}
          ],
          audio: [{
            url: 'http://freakshow.fm/podlove/file/4468/s/download/c/select-show/fs171-invasion.mp3',
            mimeType: 'audio/mpeg',
            size: 93260000,
            title: 'Audio MP3'
          }],
          tabs: {
              info: true
          }
      });
  </script>
</body>
</html>

This configuration should be correct (according to the documentation) and create a player with an opened info tab, but the player is initialized without any opened tabs.
I hope this file helps to reproduce (and fix) the problem.

Thanks for your awesome work for the podcast universe!

[SB] - Theme / Style

Main color for header
Main color is a gradient (nice to have)
Switch the font color so that everything is readable (web player)
Text align and justify needs to be improved
Tabs background color white and font color back / dark grey

Player shows network issue when started with chapter location.

Steps:

go to https://freakshow.fm/fs237-nicht-genug-eierstoecke-im-team
go to chapter tab
alt click a chapter in the middle to start playing (e.g. ios13 in this specific one)

Results:

Player shows network error.

Expected results:

Player should play at this point.

Notes

This is with yandex on macOS

[SB] - As a User i want to see feedback, when using copy feed button

Web Player Analytics

Post endpoint to publisher (tbd)
Transmit data:
- Quantile
- Stop/Pause
- Timestamp
- Audiosettings
- Chapters Jump
- Sharing

Cannot dispatch PLAYER_INIT with URL as payload instead of config object

When programmatically dispatching PLAYER_INIT, I would have expected to be able to pass an URL instead of a configuration object, just like when using podlovePlayer().

{
  "type": "PLAYER_INIT",
  "payload": "https://freakshow.fm/?podlove_player4=1465"
}

But instead, I end up with the player showing "Fehlende Medien Dateien | Die zur Verfügung gestellte Konfiguration ist fehlerhaft. Ohne Mediendateien kann der Player nichts abspielen.".

It seems kind of counter-intuitive that I have to fetch the config myself and pass it to the player, when the player already has the built-in functionality to do so.

[SB] - As a User i want to switch between apps and web via tabs

(is implemented, but not visible)

Podlove Player Embeds not working anymore

The sharing is now broken again! Our partner using the iFrame embed is not seeing the player anymore! The version we have is Podlove Podcast Publisher 2.8.7 and the CDN Podlove Web Player. It now doesn't suddently render anymore.

See (right sidebar and error logs on that page):
https://integration.dosb.de/

Error logs are vast on the partner page… works on our page. We haven't changed anything?

Live Mode

Add Live Mode and consider the following

Consider Live and Relive
~~Dash & mpg-dash, Mp3 stream data on the fly~~
Show Bitrate
Start with placeholder info & rewrite from stream data
Optional: date + exact time with notification
AutoPlay on start
Feature: Queueing

Todos:

Discuss with @sreimers about stream meta data from Studiolink

Documentation: Theming

Fix Transcript Search

Search result stepper is one off.

Sharing a link to a chapter leads to start on previous chapter

Summary

I found a small issue with the sharing functionality.
Sharing a chapter via link leads to the player showing the previous chapter as selected one with -00:00 time left.

Example

The following link should lead to a webplayer showing "EDRi sucht hEad of Plicy -2:55" as selected. Right now it shows "Rezo-Video -00:00".

Example sharing link (chapter)

Enhance Contributors by reusing existing Metadata

See https://github.com/podlove/podlove-web-player/issues/902

Contributors' role and group use.

Hey all,

Just found out about this project and I think it's a really great web player, currently working on implementing it into my own site. In doing so though, I noticed the role and group fields, neither of which seem to be getting used, as far as I can tell.

Using an example from the documentation...

{
      "name": "Tim Pritlove",
      "avatar": "https://freakshow.fm/wp-content/cache/podlove/47/08928e3c26dcb1141d67ad75869619/tim-pritlove_150x150.jpg",
      "role": {
        "id": "9",
        "slug": "team",
        "title": "Team"
      },
      "group": {
        "id": "1",
        "slug": "onair",
        "title": "On Air"
      },
      "comment": null,
      "id": "tim-pritlove"
    },
    {
      "name": "Rainer",
      "avatar": "https://freakshow.fm/wp-content/cache/podlove/e3/0e1625d65c32720b76624262bfdc59/rainer_150x150.jpg",
      "role": {
        "id": "7",
        "slug": "composition",
        "title": "Komposition"
      },
      "group": {
        "id": "3",
        "slug": "support",
        "title": "Support"
      },
      "comment": null,
      "id": null
    },
}

this data gives me this result:

However, from that data, I would expect something more like this:

Am I misunderstanding the inteintion here? Or are these fields (as well as comment and id and slug) unused?

Documentation: Templating

Podlove Web Player - Standalone Plugin

See https://sendegate.de/t/webplayer-4-standalone/6489

/cc @markusvoelter

[SB] - Refactor tab store

rename cloud tab into web
remove platform tab
if info is not a tab -> remove property
check wording -> App and Web should be visible as names in tab

Player does not jump to given playback position when third party cookies are disabled.

If you embed the podlove player with the generated iframe code, the player does not jump to a given playback position when third party cookies are disabled.

For the sake of completeness: It does not matter whether the player is loaded from the podcast website of from the podlove CDN.

Wordpress 5.2.3
Podlove Publisher 2.9.3 with Podlove Web Player v4.5.10

Tested with:

Chromium 76.0.3809.132 (Linux)
Chrome 76.0.3809.132 (Windows)
Firefox 69 (Linux, Windows)

If you need further infos, please let me know. Thanks!

Sharing Concept

Current Implementation

User Story:

As a User I want to post an podcast episode across different networks in order to share it with other people.
As a publisher I want to be able to select different share options in oder to select only those networks my users may want to use.

Acceptance Criteria:

A scaleable design that allows to use more than 7 share channels
A configuration that enables the publisher to select between different share channels
A dynamic loading that doesn't bloat the bundle when selecting multiple networks
A design that is also useful on mobile viewports

Bring back changelog process with lerna

Playlist

As a publisher I would like to have the option to embed a version of the player with a playlist of the previous episodes (e.g. the last 10 episodes) in an online article.

examples:
https://castbox.fm/app/castbox/player/id2032683?v=4.1.1&autoplay=0

Subscriptions for download and share events

As I look into the subscriptions for the web player, I see a bunch of things I can do with the switching of tabs and streaming of audio. but there's no subscriptions on anything inside of either the Download or Share buttons.

I'm tracking play actions like this....

podlovePlayer('#PodLovePlayer', options).then(function (store) {
      store.subscribe(() => {
        const { lastAction } = store.getState()
        if (lastAction.type == "PLAY") {
          trackEvent("listen", "play", window.location.pathname);
        }
      });
    });

...and I'd love to be able to extend that out with something like this...

podlovePlayer('#PodLovePlayer', options).then(function (store) {
      store.subscribe(() => {
        const { lastAction } = store.getState()
        if (lastAction.type == "PLAY") {
          trackEvent("listen", "play", window.location.pathname);
        } else if (lastAction.type == "DOWNLOAD") {
          trackEvent("download", lastAction.payload.src, window.location.pathname);
        } else if (lastAction.type == "SHARE") {
          trackEvent("download", lastAction.payload.network, window.location.pathname);
        }
      });
    });

does that make sense?

As a User i want a help icon

Classic ? icon as a icon component

Introduce lastAction to new player

Subscribe Tab

User Story:

As a user I want to be able to directly subscribe to the podcast from the layer in order to keep the context and also be able to subscribe in embed mode.

Acceptance Criteria

Subscribe method is embedded within the player
Maybe direct integration with subscribe button or reuse the subscription flow

New Features? (with templates for suggestion)

Hi @alexander-heimbuch and @timpritlove!

I'm new here. First, I'd like to congratulate you: you really did a fantastic job with the Podlove Web Player!

I came across Podlove because I was looking an audio player that could handle dynamic transcript.

I'd love to use it on my future website where I'll teach French.

If you are open to suggestions of new features, I have some but as I've not yet had the opportunity to install your player, I apologize in advance if some of my suggested features are already available.

Here are my suggestions :

--

FOR THE PODCAST LISTENER

The most significant improvement would be to have the option to put the player in fullscreen for not being distracted by anything else on the page.

I spent some time creating every template (INFOS, CHAPTERS, TRANSCRIPT...) to show you how it could look like (I tried to stay as close as possible of the current design).

Podlove_fullscreen_on_a_computer.pdf

.

Podlove_fullscreen_on_a_mobile_phone.pdf

--

FOR THE PODCAST CREATOR

In the Player Controls area:

P1. to customize the number of seconds to play backward and forward (by default 15 and 30).

P2. to remove the name of the chapter below the PLAY button.

In the Transcript window:

T1. to add transcripts in other languages (= subtitles) than the one used for the audio (also VTT synched) and to switch from one to another with just one click (see my templates in the PDFs above).

T2. to customize the text "Chapter 1", "Chapter 2"... (unless it is already possible).

T3. to have a text editor to be able to:
- change the size, font and color of the text,
- put the text in bold, italic...
- change the line space,
- make line breaks,
- skip lines,
- add bullet points
- ...
Reading would be more appealing.

T4. to remove the "Search" and "FOLLOW" components.

T5. to display text without having to (always) precede it with someone's name (such as Tim Pritlove). In my case, I'd like to use Podlove to tell a story with dialogues AND narration.
A typical snippet of text would be:

[Narration]

CHARACTER 1
{blah blah blah}

CHARACTER 2
{blah blah blah}

[Narration]

T6. to remove the left and right arrows used to switch from one chapter to another.

T7. to add "hotspots" in the text that would pause the audio and open a picture or an embedded video in fullscreen mode.

In the Chapters window:

C1. to customize the word "CHAPTERS" (unless it is already possible).

C2. to name the chapters in different languages and easily switch from one language to another (> see T1 above).

Bug:

When I use your demo player on my computer with Chrome, the cursor of the scroll bar ends up disappearing at the bottom right of the window when I scroll a lot (even if there is still a lot of text to display).

I hope you will share my enthusiasm for these improvements and long life to Podlove!

Laurent

Web player doesn't trigger download but displays mp3 links inline (at least in safari)

see http://www.fanboys.fm/373-2/n

maybe we should consider to set the disposition to download to prevent this weird behavior where the browser player is displayed inline and replaces the web-player.

issue: the download link does not lead to a page with a content-disposition: attachment like this

Content-Disposition: attachment; filename=fs237-nicht-genug-eierstoecke-im-team.mp3

but just is a regular audio/mpeg that intentionally should be able to displayed directly in a browser otherwise. (headers:

< HTTP/1.1 200 OK
< Date: Fri, 05 Jul 2019 10:39:30 GMT
< Server: nginx/1.10.3
< Content-Type: audio/mpeg
< Content-Length: 90836608
< Last-Modified: Fri, 05 Jul 2019 08:26:43 GMT
< ETag: "5d1f09c3-56a0e80"
< Accept-Ranges: bytes

Full freakshow headers that cause immediate download in safari:

< HTTP/1.1 200 OK
< Server: nginx/1.14.2
< Date: Fri, 05 Jul 2019 10:40:17 GMT
< Content-Type: audio/mpeg
< Content-Length: 180571471
< Last-Modified: Sun, 23 Jun 2019 20:35:20 GMT
< Connection: keep-alive
< ETag: "5d0fe288-ac34d4f"
< Expires: Fri, 05 Jul 2019 16:40:17 GMT
< Cache-Control: max-age=21600
< Content-Disposition: attachment; filename=fs237-nicht-genug-eierstoecke-im-team.mp3
< X-Dedicated-To: The Prettiest One
< Access-Control-Allow-Origin: *
< Accept-Ranges: bytes

Video Player

Refine audio to "assets" with title
Video player in header
Switch between video/audio files
Controls visible on hover

[SB] As a User i want icons for each podcatcher

Web player doesn't show chapters at all if an href with " " or " " is encountered

I think it should be more lenient and just ignore that href.

This turned up when using metalove to generate the chapter json. Will remove the construction of this both in chapters and metalove.

Corresponding breaking json fragment can be found it: podlove/metalove#8

As a Developer i want to have a podcatcher package

Find a good separation between pod catcher and button. As a maintainer as well as a contributor, i want minimal effort to change existing pod catcher and add new one.
The following information is needed for the list:

[SB] - As a User i want to get information about this subscribing thing

SomeoneTM needs to check the current text.

multiple, different subscribe buttons on a page

I'd like use the subscribe button in a project that displays a list of feeds to subscribe. How to I set different podcast data per button? Is there a programmatic way to render a button by chance?

Thanks!

[SB] - iFrame height is bigger then window height

The iFrame should never be bigger then window size and allow scrolling

Min height CSS attribute causing white bar below player

When the web player loads on my sites it has a min-height attribute set to 250px which is resulting in a large white box below the player itself. If I manually disable that rule the box goes away and the site looks better. This started happening approximately a month ago when loading from the Podlove CDN. You can view this on my sites dataengineeringpodcast.com and pythonpodcast.com

Documentation: Store

Edge/IE11: Unable to get property 'dispatch' of undefined or null reference

Standalone version, embed manually/locally: I get three lines of error message in IE11 and older Edge versions (before the Chromium switch), when the player gets initialized. The player does not load. Firefox, Safari and Chrome is working fine. Latest release 4.1.6. Live URL:

https://lu-web.de/lu-web-videos/lu-audio/audio-lu-umfrage-fas/

[SB] - As a User i want understandable text paragraphs, phrases and wording

check if all language snippets are part of translation
is everything correct translated?
is the text meaningful / expressive ?

Too much whitespace below emedded player (on .wrapper)

As you can see in the image below, there's a white area of roughly 20px below the embedded player. It is whitespace that is part of the iframe's content - not from the surrounding template. It often goes unnoticed when the website's background is white itself.