Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Video Block: Subtitles #7673

Open
Soean opened this issue Jul 2, 2018 · 28 comments
Open

Video Block: Subtitles #7673

Soean opened this issue Jul 2, 2018 · 28 comments

Comments

@Soean
Copy link
Member

@Soean Soean commented Jul 2, 2018

Description

To add, edit and delete subtitles in the video block, we need an UI.

Current Classic Editor:
bildschirmfoto 2018-07-03 um 00 07 22

A video tag can have multiple tracks elements.
A track element has 4 Attributes.

  • srclang (Valid BCP 47 language tag)
  • label (Title for player UI)
  • kind (Captions, Chapters, Descriptions, Metadata or Subtitles)
  • src (URL of the text file)

Related: #7501

@karmatosed

This comment has been minimized.

Copy link
Member

@karmatosed karmatosed commented Jul 15, 2018

Can I ask how you get to this from the existing editor without a plugin? It would be great for steps so people can replicate and explore.

@Soean

This comment has been minimized.

Copy link
Member Author

@Soean Soean commented Jul 15, 2018

  1. Add Video via 'Add Media'

  2. Click on the edit button on top of the video
    bildschirmfoto 2018-07-15 um 11 51 06

  3. Add a Subtitle file

  4. You see the Subtitle details
    bildschirmfoto 2018-07-15 um 11 52 38

Here you can download example .mp4 and .srt files: https://github.com/mediaelement/mediaelement-files

@karmatosed

This comment has been minimized.

Copy link
Member

@karmatosed karmatosed commented Jul 18, 2018

artboard

This is a really rough mock but I am thinking something similar? That or using a pattern like playlist does could work?

@melchoyce

This comment has been minimized.

Copy link
Contributor

@melchoyce melchoyce commented Nov 16, 2018

An idea for adding subtitles:

video block - subtitles

The flag emoji would change based on the language detected in the subtitle file, since seems to be functionality we already have?

image

@Soean

This comment has been minimized.

Copy link
Member Author

@Soean Soean commented Dec 8, 2018

Hey @melchoyce
thanks for your design. I have a few comments on this.

  • Flags are not ideal for this, because they represent states not languages, see http://www.flagsarenotlanguages.com/blog/why-flags-do-not-represent-language/
  • There is no language detection, the default is english in the classic editor
  • The user should be able to set these attributes for the track file:
    srclang (Valid BCP 47 language tag)
    label (Title for player UI)
    kind (Captions, Chapters, Descriptions, Metadata or Subtitles)
  • I added the Accessibility label because it's new UI. Maybe we have to change the button labels? See #11991 (comment)
@Ipstenu

This comment has been minimized.

Copy link
Contributor

@Ipstenu Ipstenu commented Jan 10, 2019

Is there any movement on this at all?

As it stands I cannot add subtitles at all, let alone per language, to videos, which is not a good experience for my users :(

@paaljoachim

This comment has been minimized.

Copy link

@paaljoachim paaljoachim commented Jan 10, 2019

What about something like this?

video-block-with-settings-icon

I just added a settings icon. Click the icon and it opens something to add the subtiles.

(I am working on keeping options outside of the sidebar.)

@afercia

This comment has been minimized.

Copy link
Contributor

@afercia afercia commented Jan 14, 2019

As commented on a similar issue, not sure the sidebar is the best place for tracks. Anything content related should be within the block.

And yes, flags are not languages 🙂Also, prefer plain text when possible instead of icons.

@Soean Soean self-assigned this Jan 23, 2019
@gziolo gziolo added this to the WordPress 5.x milestone Mar 20, 2019
@anevins12

This comment has been minimized.

Copy link
Contributor

@anevins12 anevins12 commented Mar 20, 2019

@afercia In the most ideal scenario, where would you expect the tracks to appear? I think that's a really tough question to answer but should help drive this ticket forward

@afercia

This comment has been minimized.

Copy link
Contributor

@afercia afercia commented Mar 20, 2019

@anevins12 tough question. I don't even understand why clicking the "Edit" button (the pencil) switches back the editor to the "placeholder". Instead, in the Classic Editor it opens the details modal, where there's plenty of space for all the settings:

Screenshot 2019-03-20 at 17 07 04

In Gutenberg the available space is way more limited. The sidebar is only 300 pixels wide. Also, we know it's very hard to use for persons with accessibility needs.

I'd like to see more settings in the "placeholder":

Screenshot 2019-03-20 at 17 11 46

According to the Gutenberg design principles, the primary actions / settings should be in the block UI. I'd say alternate sources and tracks are directly related to content and as such are "primary".

@joedolson

This comment has been minimized.

Copy link

@joedolson joedolson commented Mar 22, 2019

It would be great to be able to upload and assign subtitle/caption tracks directly in the placeholder. In addition to making an easier interface, it would also greatly increase people's awareness of the feature and improve the likelihood it gets used.

@melchoyce

This comment has been minimized.

Copy link
Contributor

@melchoyce melchoyce commented Mar 22, 2019

I'll try an updated version with the fields in the placeholder!

Any thoughts on whether the sidebar would feel like an appropriate place for changing or updating subtitles after the fact? My inclination still leans towards the sidebar as a good place to house subtitles, but I want to get y'alls a11y opinions first.

@joedolson

This comment has been minimized.

Copy link

@joedolson joedolson commented Mar 26, 2019

You mean fields for switching out already-added subtitles for a different set of subtitles?

Sidebar might be OK as a place to change subtitles - while I think adding subtitles in the first place is a first-tier activity, I can see changing them as a secondary activity. It should be a considerably less frequent task.

That said, I do agree with @afercia that content changes should generally take place within the block itself - and captions & subtitles are definitely content. It seems like there should be ample space in the placeholder container or some other in-block interface to manage these.

@melchoyce

This comment has been minimized.

Copy link
Contributor

@melchoyce melchoyce commented Mar 26, 2019

We can probably take inspiration from the image change flow in #14142 for changing or adding new subtitles.

@afercia

This comment has been minimized.

Copy link
Contributor

@afercia afercia commented May 8, 2019

Noting that this issue was reported in the WPCampus accessibility reports, see #15281, and as such should be moved to the related project in the "To do".

@melchoyce melchoyce added this to To do in Accessibility Audit May 8, 2019
@youknowriad

This comment has been minimized.

Copy link
Contributor

@youknowriad youknowriad commented May 13, 2019

This was discussed today in the #core-editor triage session (link requires registration):

https://wordpress.slack.com/archives/C02QB2JS7/p1557753241107800

Based on the reading and the discussions, it seems that this issues still needs design proposals and thoughts as it's not really clear what should be implemented as a v1. I'd encourage everything to also think pragmatic here and come up with a version that can be iterated on. Since this feature is not available entirely, having something even if not perfect design-wise would be appreciated.

@gziolo gziolo moved this from To do to In progress in Accessibility Audit Jun 20, 2019
@afercia

This comment has been minimized.

Copy link
Contributor

@afercia afercia commented Jul 22, 2019

Related: https://core.trac.wordpress.org/ticket/47559

It appears the srclang and label attributes in the media views are hardcoded to English 😞

@enriquesanchez

This comment has been minimized.

Copy link
Contributor

@enriquesanchez enriquesanchez commented Jul 26, 2019

I'm not sure if the option to add subtitles should appear in the block placeholder, or at least not until a video has been uploaded/selected.

The way I see it, you first need to upload/select a video in order to then add subtitles. Please correct me if I'm wrong, but once you've uploaded/selected a video, the placeholder is replaced by the video itself.

I'm wondering if, once a video has been uploaded/selected and the block is focused, we can instead show an option that takes you to the attachment details modal:

Screen Shot 2019-07-26 at 4 14 45 PM

Once on the details modal, the user can then edit/add title, caption, description, subtitles, etc:

Screen Shot 2019-07-26 at 4 33 38 PM

This should also cover the case where more than one subtitle track needs to be added. We would enough space in the UI to accomodate all of these settings and fields.

Screen Shot 2019-07-26 at 4 33 46 PM

@afercia

This comment has been minimized.

Copy link
Contributor

@afercia afercia commented Jul 30, 2019

In the Classic Editor the UI to add subtitles isn't in the "select" media modal. Instead, it's in the Edit Video details modal:

Screenshot 2019-07-30 at 16 27 48

That means users have to add a video to the post content first, then edit the details of the video they just added. I guess this is one of the reasons why this UI isn't very discoverable.

For Gutenberg, I can think of a few options:

  • Enhance the "select" media modal, adding a second step for additional settings including the UI for subtitles. This could work much like the existing Gallery or Playlist modals, where the second step allows to edit the details before inserting media in the post
  • The above would require a decent amount of work in the media views
  • Or: once a video has been inserted in a block, give access to the existing "Video Details" modal: the subtitles UI is there
  • Or: move away from the media modal and provide a new UI within the Block to edit the video details

Existing issues:

once you've uploaded/selected a video, the placeholder is replaced by the video itself.

Correct. Also, when clicking the "Edit video" button within the block toolbar:

Screenshot 2019-07-30 at 16 34 28

  • the button disappears: this is a problem because technically it's a focus loss
  • there's no way to switch back from the placeholder to the preview other than:
    • click on "Insert from URL" (which is totally counterintuitive)
    • accept the current URL value and press the "Apply" button

Personally, amongst the various options I'd recommend one that helps in making the subtitles UI discoverable. Having it only in the "Edit" mode after the video has been already added isn't that great for discoverability. Instead, given the importance subtitles have for accessibility and internationalization, the subtitles UI should have the same prominence as the Caption one.

@melchoyce

This comment has been minimized.

Copy link
Contributor

@melchoyce melchoyce commented Jul 30, 2019

Improvement on the "Edit" menu item:

image

Agree we need to improve discoverability, and maybe explore what it could look like to try a multi-step video uploading process.

@enriquesanchez

This comment has been minimized.

Copy link
Contributor

@enriquesanchez enriquesanchez commented Jul 30, 2019

Instead, given the importance subtitles have for accessibility and internationalization, the subtitles UI should have the same prominence as the Caption one.

@afercia do you think that the first mockup on my comment above (or an iteration of a similar idea) could help us with this?

61981854-80bd9300-afc0-11e9-9c68-412ffb2d5777

I also really like @melchoyce's explorations on the Edit menu item above 👍

@Ipstenu

This comment has been minimized.

Copy link
Contributor

@Ipstenu Ipstenu commented Jul 30, 2019

If we go with Mel's Edit Menu, that should also include the ability to edit the poster image.

That said, we can edit/add poster images on the block edit sidebar. Would that not also be a proper place to have a 'customize subtitles and language' option, or even a button to click to GET to the old screen?

@afercia

This comment has been minimized.

Copy link
Contributor

@afercia afercia commented Jul 30, 2019

do you think that the first mockup on my comment above (or an iteration of a similar idea) could help us with this?

Well this is more up to the design and Gutenberg teams. I have the impression one of the goals is to move away from the media modals and build new UI within Gutenberg. Personally, I don't have any problem in keeping the media modals. They're also a focus for the accessibility team in the 5.3 release cycle so they will see some accessibility improvements. I'd tend to think that if they're going to be replaced, the new UI should be better and provide clear advantages compared to what WP has now.

If we go with Mel's Edit Menu, that should also include the ability to edit the poster image.

Yep, good point!

Re: the sidebar: it's one of the most inaccessible parts of the Gutenberg UI, both in an a11y and literal sense. Jumping to the sidebar while keeping the block selected is very hard for keyboard and assistive technology users. For this reason, the sidebar should contain only secondary settings, while anything related to content production should live within the block (which is also one of the Gutenberg design principles).

@audrasjb

This comment has been minimized.

Copy link
Contributor

@audrasjb audrasjb commented Aug 10, 2019

Hi there,

I'm not convinced we should handle that in the Editor, since there is other places where subtitles can be added: widgets first, but also in plugin’s custom media modals.

Then, I worked on a patch for the Core media modal. I need some design feedback on the shared screenshot before generating the full patch.

For reference: https://core.trac.wordpress.org/ticket/47559#comment:9 (and screenshot provided just below that comment)

Cheers,
Jb

@mapk

This comment has been minimized.

Copy link
Contributor

@mapk mapk commented Dec 4, 2019

If we worked in the Media flow component here, would that help?

replace-media

The "Open Media Library" option should probably still open the Media Library, but if we added an option here to "Open Video Details" that took the user to that particular modal, how's that sound?

@Soean

This comment has been minimized.

Copy link
Member Author

@Soean Soean commented Dec 4, 2019

Yes, we can try this approach. I am waiting for the merge of this PR and then I'll continue working on the ticket.

@mapk

This comment has been minimized.

Copy link
Contributor

@mapk mapk commented Dec 16, 2019

@Soean, it's been merged! 🎉 Can you resume work here?

@Soean

This comment has been minimized.

Copy link
Member Author

@Soean Soean commented Dec 17, 2019

Yes I will resume in the next days.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.