The Podlove Webplayer 4 (alpha) was introduced in 2.6.0. First of all: Thanks for that!
The developer asked for feedback. It might be helpful to gather our feedback in this topic.
My positives and negatives after a short bit of testing:
+ primary & secondary color individually changeable
+ download option integrated in the player itself
+ embedding
+ speed adjustments
+ preview
- No sharing to social media. This was cut? At least a "copy linkt to podcast episode page" option would be nice.
- "Preview" applies after saving. Not on the fly beforehand.
- If secondary color is white, you cant read the tabs after clicking on them, because they are white as well. (Not chosing a secondary color does help here: Then the text on the tabs becomes dark.)
- Summary text is not affected by secondary color. This is intentional, but sometimes hard to read. A third optional color could help here.
If secondary color is white, you cant read the tabs after clicking on them, because they are white as well. (Not chosing a secondary color does help here: Then the text on the tabs becomes dark.)
Summary text is not affected by secondary color. This is intentional, but sometimes hard to read. A third optional color could help here.
There are edge cases where dynamic color calculation will have problems. In general we recommend only to use the primary color. The secondary color can be used but may cause defects in visualisation. Also the summary is calculated based on the primary hsa value and adapted accordingly. In general we have options available to adapt all of players colors in the configuration and we will may figure out a way to make this also available for the publisher. Until then feel free to play around with the v4 documentation: http://podlove-player.surge.sh/
The “multiple player bug” is tracked in Github Issues and we will investigate on that.
I am a new Podlove user and am really impressed with your Plugin.
My question concerns how to style the player in a little more detail. For example; for the player to sit perfectly in our site layout I need to style as follows, so that it aligns centred in the parent container. This is unfortunately not possible due to cross-site iframe/html barriers, adding this styling to my site CSS does not work.
div.podlove.native.desktop {
align-content: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
Is it possible for you to add a custom CSS field to the player configuration page to allow these styles to be embedded in the iframe/html content of the player?
Secondary to this, there are times I would like to possibly remove the episode picture and potentially reduce the size of the episode title font, mainly to work around different screen sizes.
Regarding your first issue I would suggest to style the embedding container accordingly. The player will take as much space as he gets. Maybe you could post a link to the affected site, so I’m able to give you a possible solution.
There is no CSS customisation planned yet. We are trying to keep the player as consistent as possible, while adding custom CSS we can’t ensure that those changes won’t break functionality with future updates. Also the player embedding would be affected.
The player will consume 100% width in this layout up to a browser viewport width of ~1300px. Beyond this, the player does not expand further. I accept the player not expanding further, but if that is the case I would like the player to be centred in the div. As a workaround for now I can increase the left and right padding to ensure it “appears” to be central.
I understand your concerns regarding custom CSS. A little adjusting of the title font size and possibly a choice of boldness would be nice for longer title lengths.
Ok I see the problem, we didn’t tested such large viewports yet. The maximum width of the player is 768px, I think we will discuss the centering behaviour in our next call. Anyways to center the player without injecting CSS you could easily style the container as follows:
#player {
max-width: 768px;
margin: 0 auto;
}
Also in upcoming releases we may give you more control about embedding parameters including control about UI components (e.g. hide the player poster).
First off, thanks for the great work, I am super impressed and exited to be able to embed Podlove Webplayer 4 into Panoptikum !
I have a question on embedding. I am using Elixir + Phoenix, that itself uses brunch for asset management. So I was very pleased to see you releasing the player as an npm module. Installing and embedding seemed straight forward.
I was a bit puzzled to see the function podloveWebplayer to be required from within a fileembed.js within the dist directory. But what really got me intro trouble is that further requests to embed two more js and a css file with links relative to the original request are performed.
To make it work I basically now put the dist directory into a vendor asset directory and dismissed the node module all together. It absolutely works this way, but obviously, this is a hack.
My question now is, is this hack necessary? Am I doing the embedding of the node module wrong?
Or have there any config options to be set to prevent the other .js and the .css file to be loaded so that the modules/functions can just be used directly, as they are already required beforehand?
nice to see that Panoptikum uses the new web player We had to split the code for a better loading performance. You have different options to embed the player. To configure the base path for requiring window and vendor assets you simply can provide the base configuration: https://docs.podlove.org/podlove-web-player/config.html
Because in Panoptikum you are able to control your environment you could think about a direct integration using window.js in case you are interested in a more detailed explanation how to do this please reach me out
