search

videojs / video.js

Video.js - open source HTML5 video player
https://videojs.com
Other
38.03k stars 7.45k forks source link

Add an Audio Description icon to the V5 icon font #2165

Closed OwenEdwards closed 9 years ago

OwenEdwards commented 9 years ago

Since support for text tracks is already present in V4.12, including partial support for 'description' tracks, at some point in V5 we'll be adding support for Audio Description (through a text track, and potentially through other means).

To prepare for this, can we add an audio description icon to the font, similar to the CC icon, based on the one here:

http://www.ryerson.ca/accessibility/tools/access_symbols.html

and:

http://www.acb.org/adp/ad.html#symbols

I don't know how to create the fonts, otherwise I'd do a PR myself. @mmcc?

mmcc commented 9 years ago

@OwenEdwards this seems reasonable to me! Our current font is a subset of the Material UI font along with at least one custom icon of ours.

Basically the work flow right now would be upload the current SVG icon font to Icomoon, pull in the new icon, and re-export. I started to try and do some work around just having an automated build process with a folder of SVGs, but as it turns out, fonts are hard.

OwenEdwards commented 9 years ago

Thanks @mmcc! I can get the basic AD icon in there (see my plugin to support switching a video with description already added, which addressed #1875. But the icon doesn't seem to be the same size as the ones in the main font, so combining it into the main font doesn't work. Any suggestions? Like you say, fonts are hard!

mmcc commented 9 years ago

Hrm...this might get a little tricky... Best case scenario is that we can get an SVG and upload that to Icomoon, because then they'll at least do most of the work around resizing for us. Unfortunately, I don't see an SVG version of those icons anywhere, so we might have to do it ourselves :(

I can take a wack at it with Sketch. I'm not a pro, but I've at least got some basic icon guides that I can use.

OwenEdwards commented 9 years ago

I can get you an SVG of the icon! I'll email it...

(EDIT): For the purposes of this Issue thread, the highest quality icon for Audio Description seems to be: Adobe Illustrator (AI) Black on White from the ACB Audio Description Project page. This can be converted to SVG, but needs some editing to make it a square icon.

mmcc commented 9 years ago

Looks like the SVG you gave me isn't playing nice with our build tool icon :(

mmcc commented 9 years ago

I'll see if I can fix it and let you know

OwenEdwards commented 9 years ago

Yikes! Can you use the original ad.ai from Adobe Illustrator (AI) Black on White, and export as SVG from Adobe Illustrator, or convert it at https://cloudconvert.com/ai-to-svg?

mmcc commented 9 years ago

I had to fix it manually in Sketch, but it's been added to the new videojs-font project! It looks a tiny bit pixelated, so if someone else with more SVG-foo than me wants to take a stab, feel free.

mmcc commented 9 years ago

@OwenEdwards There's a pull request open if you want to take a look: videojs/font#1

mmcc commented 9 years ago

This has been pulled in, so an npm install followed by grunt should do the trick.