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

feat(svg-icons): handle custom svg icons #8488

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

amtins
Copy link
Contributor

@amtins amtins commented Nov 12, 2023

Description

Replace the player's default icons with custom icons.

The experimentalSvgIcons option accepts a boolean or a string. If the string represents a valid svg, it will replace the default icons.

Usage

import playerIcons from './asset/vjs-sprite-icons.svg';

const player = videojs('my-player', {
  experimentalSvgIcons: playerIcons,
  // ...
});

Or:

const player = videojs('my-player', {
  experimentalSvgIcons: `
  <svg>
  ...
  </svg>
  `,
  // ...
});

Specific Changes proposed

  • extract a initSvgIcons_ function to activate svg icons
  • add test cases

Requirements Checklist

  • Feature implemented / Bug fixed
  • If necessary, more likely in a feature request than a bug fix
    • Change has been verified in an actual browser (Chrome, Firefox, IE)
    • Unit Tests updated or fixed
    • Docs/guides updated
    • Example created (starter template on JSBin)
  • Reviewed by Two Core Contributors

Replace the player's default icons with custom icons.

The `experimentalSvgIcons` option accepts a `boolean` or a `string`.
If the string represents a valid svg, it will replace the default icons.

**Usage**

```javascript
import playerIcons from './asset/vjs-sprite-icons.svg';

const player = videojs('my-player', {
  experimentalSvgIcons: playerIcons,
  // ...
});
```

Or:

```javascript
const player = videojs('my-player', {
  experimentalSvgIcons: `
  <svg>
  ...
  </svg>
  `,
  // ...
});
```

- extract a `initSvgIcons_` function to activate svg icons
- add test cases
Copy link

codecov bot commented Nov 12, 2023

Codecov Report

Merging #8488 (0c9ae3c) into main (d535e16) will increase coverage by 0.01%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             main    #8488      +/-   ##
==========================================
+ Coverage   82.71%   82.72%   +0.01%     
==========================================
  Files         113      113              
  Lines        7589     7594       +5     
  Branches     1826     1827       +1     
==========================================
+ Hits         6277     6282       +5     
  Misses       1312     1312              
Files Coverage Δ
src/js/player.js 90.93% <100.00%> (+0.02%) ⬆️

📣 Codecov offers a browser extension for seamless coverage viewing on GitHub. Try it in Chrome or Firefox today!

Copy link
Contributor

@wseymour15 wseymour15 left a comment

Choose a reason for hiding this comment

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

I think this is a great idea @amtins!

My only real concern is that this leaves the door open for human error. If the ids in the sprite string do not match the ones in our default sprite, we will be missing icons. I don't really view this as a problem, but I think we need to ensure that it is well documented.

On that note, I think we could add to the options guide with this change in functionality, as well as describing (and maybe linking) to the current sprite.

@amtins
Copy link
Contributor Author

amtins commented Nov 20, 2023

Thanks for your feedback and for taking the time to review this PR.

My only real concern is that this leaves the door open for human error

I couldn't agree more. That's why I created a project to reduce potential human errors (wip). However, I think this project deserves a few improvements in order to enhance the developer experience and have something more like videojs/font, icons.json and material icons

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

Successfully merging this pull request may close these issues.

None yet

2 participants