Skip to content

Dialogue: media control player integration#18390

Merged
retrofox merged 82 commits intomasterfrom
update/connect-media-source-with-dialogue-dropdown
Jan 21, 2021
Merged

Dialogue: media control player integration#18390
retrofox merged 82 commits intomasterfrom
update/connect-media-source-with-dialogue-dropdown

Conversation

@retrofox
Copy link
Copy Markdown
Contributor

@retrofox retrofox commented Jan 18, 2021

Integrate with the Dialogue block with podcast player. Add MediaPlayerControl.

Fixes #18344

Changes proposed in this Pull Request:

  • Dialogue: media control player integration

Jetpack product discussion

Does this pull request change what data or activity we track or use?

No

Testing instructions:

  • Create/edit a post from the block editor.
  • Add a podcast player.
  • Add a transcription block.

From block Toolbar

  • Confirm you see the media player control in the block toolbar

Screen Shot 2021-01-21 at 12 25 38 PM

  • Confirm play/pause work as expected.
  • Confirm jump back/skip forward buttons work as expected (five seconds), changing the audio player time.
  • Confirm player display is consistent with the podcast player

Screen Shot 2021-01-21 at 12 49 25 PM

  • Confirm the Keep in-sync mode works as expected:
    • When it's activated, the timestamp value changes according to the current time of the player
    • When it's activated, the TimestampControl gets disabled in order to avoid out of sync and/or race conditions

From Editor Canvas / Sidebar

Editor Canvas (TimestampDropdown) Sidebar (TimestampControl)
image image
  • Confirm that the play button always playback to the timestamp
  • Confirm the play button gets disabled when the timestamp and the media current-time are almost the same value
  • Confirm the TimestampControl / TimestampDropdown gets disabled when Keep in-sync is enabled.

Proposed changelog entry for your changes:

  • n/a

@jetpackbot
Copy link
Copy Markdown
Collaborator

jetpackbot commented Jan 18, 2021

Scheduled Jetpack release: February 2, 2021.
Scheduled code freeze: January 25, 2021

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Generated by 🚫 dangerJS against dcfc380

@retrofox retrofox force-pushed the update/connect-media-source-with-dialogue-dropdown branch from 2a4818b to a9bce7b Compare January 18, 2021 11:28
@retrofox retrofox force-pushed the update/connect-media-source-with-dialogue branch 2 times, most recently from 76db182 to e7a7183 Compare January 18, 2021 16:03
@retrofox retrofox force-pushed the update/connect-media-source-with-dialogue-dropdown branch from a9bce7b to af0f517 Compare January 18, 2021 22:46
@retrofox retrofox changed the title Update/connect media source with dialogue dropdown Dialogue: add full media control player. Jan 18, 2021
@ghost
Copy link
Copy Markdown

ghost commented Jan 19, 2021

image
I like the idea of being able to play from the time displayed in the Dialogue block timestamp, but I think adding an extra icon that appears very similar to 'play' is confusing.

image
I agree this is a visually cleaner approach in regard to the toolbar, but my worry is that it makes these controls a little hard to find. This also duplicates some of the elements from the block toolbar.

I think we should either proceed with one of the following options:

  • Maintain the controls and functionality as defined in the designs, and explore this idea in a later iteration.
  • Keep the toolbar as is in the design, remove the duplicative UI elements within the timestamp dropdown, and keep the timestamp dropdown actions focused on manual timestamp editing and the ability to play from that time (see screenshot below)

Screen Shot 2021-01-19 at 10 35 39 AM

@retrofox retrofox force-pushed the update/connect-media-source-with-dialogue-dropdown branch from 3c37972 to ed661db Compare January 19, 2021 15:53
@retrofox retrofox marked this pull request as ready for review January 19, 2021 15:54
@retrofox retrofox requested review from a user January 19, 2021 15:55
@retrofox retrofox self-assigned this Jan 19, 2021
@retrofox
Copy link
Copy Markdown
Contributor Author

retrofox commented Jan 19, 2021

I like the idea of being able to play from the time displayed in the Dialogue block timestamp, but I think adding an extra icon that appears very similar to 'play' is confusing.

I've been using this feature continually, and not being able to play the podcast in the desired position could be an annoying issue for the users, imo.

Can/should we always play in the time defined by timestamp?

I agree this is a visually cleaner approach in regard to the toolbar, but my worry is that it makes these controls a little hard to find.

Probably, yes. But also keep in mind we'd like to add podcast links in other areas, not only in the Dialogue timestamp section. For instance, a simple example of a transcription:

Screen Shot 2021-01-19 at 1 00 49 PM

This feature won't be part of v1, but we may like to keep working on this after v1, maybe we should consider adding podcast audio links to other part f the content

Could add a hint that the link (the timestamp in this case) is tied to the media source? Maybe adding a play icon just close to the timestamp label?

image

This also duplicates some of the elements from the block toolbar.

Correct. Fair enough.

I think we should either proceed with one of the following options:

  • Maintain the controls and functionality as defined in the designs, and explore this idea in a later iteration.
  • Keep the toolbar as is in the design, remove the duplicative UI elements within the timestamp dropdown, and keep the timestamp dropdown actions focused on manual timestamp editing and the ability to play from that time (see screenshot below)

I prefer choosing the second. All controls suggested in this PR are focused on the timestamp edition. Range control is awesome and makes the difference. Could you consider to keep it?
Similar to the keep-in-sync option too.

Going to update the PR according to some of this feedback.

Question:

image

Is participant dropdown something that we'd like to add in the block toolbar too?

@retrofox
Copy link
Copy Markdown
Contributor Author

retrofox commented Jan 19, 2021

should we remove duplicated controls also when there the media player control is shown in the block settings sidebar?

@ghost
Copy link
Copy Markdown

ghost commented Jan 19, 2021

Is participant dropdown something that we'd like to add in the block toolbar too?

I believe so - that tweak was in response to #18283

should we remove duplicated controls also when there the media player control is shown in the block settings sidebar?

Yes

@retrofox retrofox changed the title Dialogue: add full media control player. Dialogue: media control player Jan 19, 2021
@retrofox retrofox changed the title Dialogue: media control player Dialogue: media control player integration Jan 19, 2021
@retrofox retrofox added [Status] Needs Team Review Obsolete. Use Needs Review instead. and removed [Status] In Progress labels Jan 19, 2021
@retrofox retrofox linked an issue Jan 19, 2021 that may be closed by this pull request
@retrofox retrofox linked an issue Jan 19, 2021 that may be closed by this pull request
@retrofox retrofox changed the base branch from update/connect-media-source-with-dialogue to master January 19, 2021 21:38
@retrofox retrofox force-pushed the update/connect-media-source-with-dialogue-dropdown branch from 9035fe0 to dcfc380 Compare January 21, 2021 17:25
@creativecoder
Copy link
Copy Markdown
Contributor

Just reviewed the latest version, looking better. Feature-wise, there are still 2 changes I would make:

  1. Change the sync button from a toggle to a one time action per click. I think the point is to set the time stamp from the player at the point the player head is at the beginning of that section of dialog. I don't see how continually syncing the timestamp from the player head is helpful. I see the timestamp as something you set once per block, not something you'd want to continually change.

  2. Remove or hide the sync button in the toolbar when timestamps are hidden, since it isn't relevant.

@retrofox
Copy link
Copy Markdown
Contributor Author

Just reviewed the latest version, looking better. Feature-wise, there are still 2 changes I would make:

  1. Change the sync button from a toggle to a one time action per click. I think the point is to set the time stamp from the player at the point the player head is at the beginning of that section of dialog. I don't see how continually syncing the timestamp from the player head is helpful. I see the timestamp as something you set once per block, not something you'd want to continually change.
  2. Remove or hide the sync button in the toolbar when timestamps are hidden, since it isn't relevant.

Sounds good to me, but let's tackle in a follow-up PR. I do really think we should to try to get this one before to keep adding enhancements.

Copy link
Copy Markdown
Member

@jeherve jeherve left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is neat, nice work! I'd only have a few questions. I don't think any of this is blocking though, so I approved the PR.


At first, I had added the podcast within the conversation block, above the first dialogue block, and things didn't work there. I had to take the block outside of the parent conversation block.


When the audio is paused, it seems that syncing the timestamp is not possible; I had to play again so I could hit the sync timestamp button.


I was a bit confused when I got back to a previous dialogue to make a fix, and the timestamp got updated as soon as I clicked in, because the player was still going; I consequently had to select the right timestamp again.

@jeherve jeherve added this to the 9.4 milestone Jan 21, 2021
@jeherve jeherve added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] Needs Review This PR is ready for review. labels Jan 21, 2021
@retrofox
Copy link
Copy Markdown
Contributor Author

This is neat, nice work! I'd only have a few questions. I don't think any of this is blocking though, so I approved the PR.

At first, I had added the podcast within the conversation block, above the first dialogue block, and things didn't work there. I had to take the block outside of the parent conversation block.

When the audio is paused, it seems that syncing the timestamp is not possible; I had to play again so I could hit the sync timestamp button.

I was a bit confused when I got back to a previous dialogue to make a fix, and the timestamp got updated as soon as I clicked in, because the player was still going; I consequently had to select the right timestamp again.

Let us analyze this feedback and try to improve it immediately after this erge.
Thanks for your review.
r219830-wpcom

@retrofox retrofox merged commit 8856bf1 into master Jan 21, 2021
@retrofox retrofox deleted the update/connect-media-source-with-dialogue-dropdown branch January 21, 2021 19:27
@matticbot matticbot added [Status] Needs Changelog and removed [Status] Ready to Merge Go ahead, you can push that green button! labels Jan 21, 2021
retrofox added a commit that referenced this pull request Jan 21, 2021
@retrofox
Copy link
Copy Markdown
Contributor Author

At first, I had added the podcast within the conversation block, above the first dialogue block, and things didn't work there. I had to take the block outside of the parent conversation block.

I can't reproduce this issue. In theory, it doesn't matter where the podcast block is inserted since it's registered globally by the store. I tried to do/undo to get it to get out-of-sync.

@retrofox
Copy link
Copy Markdown
Contributor Author

When the audio is paused, it seems that syncing the timestamp is not possible; I had to play again so I could hit the sync timestamp button.

Initially, the audio file is not loaded locally. For this reason, is why we disable the sync button.

image

Once the user clicks on the play button, it starts to download and get ready to work with it. So it happens just once. Maybe we can implement something smarter.

@retrofox
Copy link
Copy Markdown
Contributor Author

I was a bit confused when I got back to a previous dialogue to make a fix, and the timestamp got updated as soon as I clicked in, because the player was still going; I consequently had to select the right timestamp again.

I'm not sure I follow but probably it was because the sync button was activated. Instead of toggle the sync state, we may just sync once, when the user clicks on the button.

retrofox added a commit that referenced this pull request Jan 22, 2021
retrofox added a commit that referenced this pull request Jan 22, 2021
* dialogue: add i18n context for label
Props to @jeherve #18390 (comment)

* media-player-control: tabs > spaces

* media-player-control: switich diplay and sync

* media-source: rename filename using kebab

* media-souce: minor doc improvement

reba

* media-source: rename players by sources

* media-source: set default when removing it

* dialogue: disable timestamp play when no media

* dialogue: fix timestamp dropdown close issue

* dialogue: remove stuff

* dialogue: minor janitorial
matticbot pushed a commit to Automattic/jetpack-production that referenced this pull request Jan 22, 2021
* dialogue: add i18n context for label
Props to @jeherve Automattic/jetpack#18390 (comment)

* media-player-control: tabs > spaces

* media-player-control: switich diplay and sync

* media-source: rename filename using kebab

* media-souce: minor doc improvement

reba

* media-source: rename players by sources

* media-source: set default when removing it

* dialogue: disable timestamp play when no media

* dialogue: fix timestamp dropdown close issue

* dialogue: remove stuff

* dialogue: minor janitorial\n\nCommitted via a GitHub action: https://github.com/automattic/jetpack/runs/504473312
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dialogue: connect with MediaSource state Conversation/Dialog blocks: add audio player controls to toolbar

6 participants