search

international-labour-organization / designsystem

A design system for the International Labour Organization
Apache License 2.0
1 stars 3 forks source link

Video: add option to display closed captions #1044

Open inesdgomes opened 4 months ago

inesdgomes commented 4 months ago

Users need to be able to:

beatrizmartinmartins commented 3 months ago

Added those options within the Media-Video Component. Check the options below:

What do you think? I followed Youtube's guidelines loosely for this. @inesdgomes

inesdgomes commented 3 months ago

Thanks @beatrizmartinmartins How does it work on mobile? Should it cover the whole screen? And do the languages always show in two columns on mobile? Can we see how that looks on a portrait mode as well?

@justintemps Any comments on the designs? See links in the comment above.

beatrizmartinmartins commented 3 months ago

@inesdgomes we don't really have portrait mode for videos do we? I haven't seen any and that's not even an option on the component. You mean Mobile and Desktop? You can check the template with the Closed Captions here

inesdgomes commented 3 months ago

Hi @beatrizmartinmartins Even if we don't have portrait mode, I'm not sure how the CC modal should behave/be displayed on mobile. Does the CC button move to the left side? The languages text is overlapping here: https://www.figma.com/design/RRxsfLNxjoypKrfJg1EwJf/ILO-Components-Library?node-id=3859-10247&t=TCuUmQ6uP9E4FZzN-0

We can look at this together this pm.

beatrizmartinmartins commented 3 months ago

Hey @inesdgomes So the CC on mobile would expand to the size of the video, so the width would be the same as the video just as shown here From what I have seen on the web, even if we have portrait mode videos, they always have a fixed height within the media component just like this option so there wouldn't be a problem with the CC. I used youtube as a reference. If we click on the CC, it just opens up the languages

inesdgomes commented 3 months ago

Thanks @beatrizmartinmartins All good with me. Could you finalize the documentation of the component? This kind of seems to be disconnected from the rest?

Screenshot 2024-07-09 at 16 01 43
beatrizmartinmartins commented 3 months ago

@inesdgomes Just did. Check it here please. The Closed Captions options is disabled as default but we have a component property for it.

inesdgomes commented 1 month ago

@justintemps Beatriz added a 'cc' button to the video component, as well as a pop-up to select the language. Please review the designs and let us know if it's ready for development: https://www.figma.com/design/RRxsfLNxjoypKrfJg1EwJf/ILO-Components-Library?node-id=6295-11148&t=08ldGpDJGZAAsTYn-0