Feature/issue 229 191 player enhancements

[barneyjeffries]

Description of the Change

New features added to the player.

Closes #191 and #229

Alternate Designs

Possible Drawbacks

Verification Process

Checklist:

• I have read the CONTRIBUTING document.
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my change.
• All new and existing tests passed.

Changelog Entry

Added - Additional features: Player Enhancements

Credits

Props @barneyjeffries @Firestorm980 @mehidi258 @Sidsector9

[github-actions]

@barneyjeffries thanks for the PR! Could you please fill out the PR template with description, changelog, and credits information so that we can properly review and merge this?

[faisal-alvi]

@barneyjeffries thank you for working on this. The player enhancement looks good.

BE:

FE:

---

However, the following checks are failing, can you please look into this?

• Unit Tests / PHP 7.4 (pull_request)
• Unit Tests / PHP 8.1 (pull_request)
• E2E Test / cypress (WP minimum, WordPress/WordPress#5.7) (pull_request)

[peterwilsoncc]

I've added a few notes inline.

I noticed the display can be missing data if the checkboxes are enabled but the data is not populated.

In the case of episode type and explicit, the default isn't reflected unless the settings a modified.

[peterwilsoncc]

It would be good to subscribe to the post data so the block is updated when the post title is edited https://gutenberg.10up.com/guides/data-api/#examples

[mehidi258]

@peterwilsoncc Could you please add some example snippet here? I was trying to use data-api example from above link but getting error called Invalid hook call since it's a class component. Tried in componentDidMount lifecycle hook as well got same error. Thanks in advance :)

[peterwilsoncc]

I think you'll need to do it for the post title and show ID separately. Here's an example for the title:

// Top of file
const { select, subscribe } = wp.data;

// Around here for the post title
const { getCurrentPost, getEditedPostAttribute } = select('core/editor');

let postTitle = getEditedPostAttribute( 'title' );
subscribe( () => {
	const newPostTitle = getEditedPostAttribute( 'title' );

	if ( postTitle !== newPostTitle ) {
		postTitle = newPostTitle;
	}
});

// Below
{ postTitle } // instead of { postDetails.title }

From the notes in the block editor handbook, you'll want to use functions that refer to the edited data rather than the current data.

[peterwilsoncc]

I noticed this defaults to a blank value unless the user modifies the dropdown, it needs to default to the attributes default value

[peterwilsoncc]

I'm still seeing this.

[peterwilsoncc]

I've added a few note and provided the requested code example.

[peterwilsoncc]

I think you'll need to do it for the post title and show ID separately. Here's an example for the title:

// Top of file
const { select, subscribe } = wp.data;

// Around here for the post title
const { getCurrentPost, getEditedPostAttribute } = select('core/editor');

let postTitle = getEditedPostAttribute( 'title' );
subscribe( () => {
	const newPostTitle = getEditedPostAttribute( 'title' );

	if ( postTitle !== newPostTitle ) {
		postTitle = newPostTitle;
	}
});

// Below
{ postTitle } // instead of { postDetails.title }

From the notes in the block editor handbook, you'll want to use functions that refer to the edited data rather than the current data.

[peterwilsoncc]

This causes either no/turning off the episode number to display to also hide the title. I think what you want here is a check for the episode title display.

The eposide number check should be part of line 463

[peterwilsoncc]

I'm still seeing this.

[faisal-alvi]

@Firestorm980 Could you please resolve the conflicts? Thanks!

[jeffpaul]

@gusaus do you want to give this a test to see how it aligns to what you had in mind and whether there are any tweaks/iterations you'd recommend?

[gusaus]

@jeffpaul Thanks for keeping me looped in! Good timing as I was just circling back to this feature request https://github.com/OpenProducer/newspack-radio-pro/issues/3 for the Newspack radio branch we maintain (https://github.com/OpenProducer/newspack-platform/tree/radio).

With regards to testing, is there a particular branch we should evaluate? I tried installing the following (to a clean install of Newspack and core)
https://github.com/10up/simple-podcasting/tree/feature/issue-229-191-player-enhancements
https://github.com/10up/simple-podcasting/tree/develop

and got the same message when I tried to activate:

As a non-coder (and still relatively new to WordPress), I could well be testing the wrong thing (and the wrong way).

That said, I'm very interested in testing, providing feedback, and potentially including in our Newspack platform!

[jeffpaul]

@gusaus youll want to use the Zip action in the repo to build a plugin zip file from this PRs branch to get a good install option for testing.

[jeffpaul]

@gusaus you can use this ZIP file for testing: simple-podcasting.zip

[gusaus]

@jeffpaul Thank you so much for providing the ZIP! That said, I actually researched the Zip action workflow (thanks to my friend ChatGPT) and managed to create a zip on my fork yesterday. Comparing them today, it looks like they're almost identical. I'm amazed!

With regards to testing, I've installed on a Newspack sandbox and created a few podcasts and episodes (using the Podcast block) and it seems like all the enhancements outlined in this PR are working!

Would love to see some of the other enhancements you listed in #191 go in.

• Player bar alternate colors, likely inherited from theme
• Ability to have player docked to header or footer location on site (some prior art with 10up's work on WAMU's site and bottom docked player experience).
• Ability to have a playlist of all episodes in a season (or a custom list of episodes)

Considering so many publishers are podcasting, I'm wondering if there's an opportunity to work with Newspack/Automattic on integrating and including in Newspack.

[dkotter]

Would love to see some of the other enhancements you listed in #191 go in.

Player bar alternate colors, likely inherited from theme
Ability to have player docked to header or footer location on site (some prior art with 10up's work on WAMU's site and bottom docked player experience).
Ability to have a playlist of all episodes in a season (or a custom list of episodes)

Thanks for testing @gusaus! After discussing internally, we're going to pull these three items out to separate issues so we can proceed with getting this PR finalized and merged.

[gusaus]

@dkotter Great to know and really appreciate all the work y'all are doing!

We've set up new branch on our Newspack platform (https://github.com/OpenProducer/newspack-platform/tree/podcast) and will continue to test provide feedback in the corresponding issues.