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

Make inline vtt.js styles optional #38

Open
evanfarina opened this issue Apr 26, 2019 · 0 comments
Open

Make inline vtt.js styles optional #38

evanfarina opened this issue Apr 26, 2019 · 0 comments

Comments

@evanfarina
Copy link
Contributor

Desired behavior
Rather than have the cue styles applied as inline styles, they should be applied as a list of styles within a stylesheet. This would allow for clients to easily override cue styles where necessary.

Concerns
It’s paramount that vtt.js continues to provide a way for consumers to get cue styles out of the box as, without them, the cues would not be accessible. Rather than changing the default behavior, we should look to provide new behavior behind an option.
We should make sure that this doesn’t prevent the implementation of the two currently in-flight PRs #35 and #27.

Proposed solution

  1. Modify the processCues method’s signature such that it accepts an options object. The object will accept the following options:
  • window
  • cues
  • overlay
  • inlineStyles: true // default value. When true, styles will be applied to cues inline.
  • [inlineStyles=true] - When true, styles will be applied to cues inline. [onapplystyles=null] - A callback function that is called when styles are applied to the cue. The callback is called with two arguments:
  • styleObj - a hash containing a mapping of style names to their respective values.
  • displayState - The element to which the styles should be applied
  1. By default, cue styles will be applied directly to cue elements.
  2. Pass the options object to CueStyleBox, and set the options hash on the CueStyleBox instance (e.g this._processorOptions = options);
  3. The consumer is responsible for handling, and implementing, the styles that are sent in the onapplystyle callback.
  4. Stretch: Update cues elements to have a class depending on their ids. Style customizations mozilla/vtt.js#350 can be used for inspiration.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant