videojs / font Goto Github PK

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

I using videojs 5.3.0 on a webview of android 4.2.
Pause icon dose not display, but play icon, volume mute icon is display.
I changed css file, using volume icon instead pause icon and it is displayed.
Please check thi problem.

In similar spirit to videojs/video.js#1880.

@each $name, $content in $icons {
  .vjs-icon-#{$name} {
    font-family: $icon-font-family;
    font-weight: normal;
    font-style: normal;

    &:before {
      content: char($content);
    }
  }
}

https://github.com/videojs/font/blob/master/scss/_icons.scss#L74

The code above specifies the font-family for every icon—making overriding difficult. My recommendation would be to separate that out and have a mixin be created to include the font-family and associated props only when needed.

For controls such as play/pause or volume-0/volume-1/volume-2/volume-3, it really only requires the inclusion of the font-family on the control button. However, due to specificity rules I need to override everyone of them.

/// @name VideoJS Volume

:global(.vjs-volume-menu-button)
{
  :global(.video-js) &
  {
    @include icon-font;

    &::before
    {
      content: $icon-volume-3;
    }

    &:global(.vjs-vol-0)
    {
      @include icon-font;

      &::before
      {
        content: $icon-volume-off;
      }
    }

    &:global(.vjs-vol-1)
    {
      @include icon-font;

      &::before
      {
        content: $icon-volume-1;
      }
    }

    &:global(.vjs-vol-2)
    {
      @include icon-font;

      &::before
      {
        content: $icon-volume-2;
      }
    }
  }
}

Definitely not a 1:1 translation, but this is the way I manage custom icons.

/// Icon Font: <%= font_name %>

/// Font-face styles

@mixin icon-font-face {
<%= font_face(path: @font_path_alt) %>
}

/// Font styles

@mixin icon-font {
<%= glyph_properties %>
}

/// Font glyph

@mixin icon-glyph {
<%= glyphs %>
}

/// Font variables

<% @glyphs.each do |name, value| %>
$icon-<%= name.to_s %>: "\<%= value[:codepoint].to_s(16) %>";<% end %>

I then have the flexibility to only include icon-font when necessary. Additionally, I need to add the appropriate content: $icon-{name}.

Please add Next Previous icons
Like |◄ ►|

Plugin authors can add buttons and other elements that contain custom icons. Currently I've copied most of the code in this repository in order to produce a custom font. Is it possible to make a reusable plugin that is also compatible with non-ES6 code? I'm willing to help with a PR but some guidance would be useful.

hi

Please correct your LICENSE.
https://github.com/videojs/font/blob/master/LICENSE#L189

thank you :)

It should be documented that new icons should be added to the end of the list in icons.json. If not, it'll shift codepoints for existing icons, which we want to avoid.

need a close button without background. can you please add the close button font for video js?

With the --custom-json option I get all video.js + my custom icons, although I don't need the default video.js icons since they're already loaded by video.js itself.

I would like to limit it to the icons defined in the custom json file.

cc @199911

Although the existing audio description icon is the standard one (and the one I suggested!), it's in the same style as the more conventional CC button. There isn't a suitable audio description icon in the Material Design library, but I'm sure someone could make one. The obvious thing would be to just do the letters 'AD' like the 'CC' icon, but it would be very close to the 'HD' icon.

So I'm opening this issue for suggestions/ideas?

Hi,

Please add the download icon from Material Design.

Thanks,
Robert

The audio description icon used to be \f114 and now it's \f11d. What's the best way to build an external plugin using an icon from this package without relying on these mappings?

Babel version 6.1.18 causes GRUNT to fail build. Changing in package.json
"babel": "5.4.7",resolves issue.

Hi, Could you add Loop icon to the font?
I created a button plugin to allow disable/enable loop

repeat and repeat_on icons

/* eslint-disable */
import videojs from 'video.js';

const Button = videojs.getComponent('Button');
const Component = videojs.getComponent('Component');

export default class LoopToggle extends Button {
  constructor(player, options = {}) {
    super(player, options);
  }

  ready() {
    this.onIcon = this.$('.vjs-loop-on-icon');
    this.offIcon = this.$('.vjs-loop-off-icon');
    this.toggleIcon();
  }

  toggleIcon() {
    const isOn = this.player_.loop();
    this.onIcon.style.display = isOn ? '' : 'none';
    this.offIcon.style.display = isOn ? 'none' : '';
  }

  buildCSSClass() {
    return `vjs-loop-control ${super.buildCSSClass()}`;
  }

  handleClick(event) {
    this.player_.loop(!this.player_.loop());
    this.toggleIcon();
  }

  createEl(tag, props = {}, attributes = {}) {
    tag = 'button';

    props.innerHTML = `
    <span aria-hidden="true" class="vjs-icon-placeholder">
      <i class="material-icons-round vjs-loop-off-icon" style="display: none;">repeat</i>
      <i class="material-icons-round vjs-loop-on-icon" style="display: none;">repeat_on</i>
    </span>`;
    props.className = this.buildCSSClass();

    attributes = {
      type: 'button',
      ...attributes,
    };

    const el = Component.prototype.createEl.call(this, tag, props, attributes);

    this.createControlTextEl(el);

    return el;
  }
}

LoopToggle.prototype.controlText_ = 'Toggle Loop';
Component.registerComponent('LoopToggle', LoopToggle);