├── .babelrc ├── .gitignore ├── .jshintrc ├── .nvmrc ├── .travis.yml ├── Gruntfile.js ├── LICENSE ├── README.md ├── css └── videojs-icons.css ├── custom-icons ├── audio-description.svg ├── fontawesome │ ├── facebook.svg │ ├── linkedin.svg │ ├── pinterest.svg │ ├── tumblr.svg │ └── twitter.svg ├── mdi-v4 │ ├── downloading.svg │ ├── file_download.svg │ ├── file_download_done.svg │ └── file_download_off.svg ├── picture-in-picture-exit.svg ├── skip-forward-backward │ ├── forward-10.svg │ ├── forward-30.svg │ ├── forward-5.svg │ ├── replay-10.svg │ ├── replay-30.svg │ └── replay-5.svg └── twitterx.svg ├── fonts ├── VideoJS.svg ├── VideoJS.ttf └── VideoJS.woff ├── icons.json ├── index.html ├── lib ├── custom.json ├── custom2.json └── grunt.js ├── package-lock.json ├── package.json ├── scss ├── _icons.scss └── videojs-icons.scss └── templates ├── html.hbs └── scss.hbs /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "targets": { 7 | "node": "16" 8 | } 9 | } 10 | ] 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | 29 | *.DS_Store 30 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "evil" : true, 3 | "validthis": true, 4 | "node" : true, 5 | "debug" : true, 6 | "boss" : true, 7 | "expr" : true, 8 | "eqnull" : true, 9 | "quotmark" : "single", 10 | "sub" : true, 11 | "trailing" : true, 12 | "undef" : true, 13 | "laxbreak" : true, 14 | "esnext" : true, 15 | "eqeqeq" : true, 16 | "predef" : [ 17 | "_V_", 18 | "goog", 19 | "console", 20 | 21 | "require", 22 | "define", 23 | "module", 24 | "exports", 25 | "process", 26 | 27 | "q", 28 | "asyncTest", 29 | "deepEqual", 30 | "equal", 31 | "expect", 32 | "module", 33 | "notDeepEqual", 34 | "notEqual", 35 | "notStrictEqual", 36 | "ok", 37 | "QUnit", 38 | "raises", 39 | "start", 40 | "stop", 41 | "strictEqual", 42 | "test", 43 | "sinon" 44 | ] 45 | } 46 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 16 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | dist: xenial 2 | 3 | language: node_js 4 | node_js: 5 | - lts/* 6 | 7 | install: 8 | - npm install -g grunt 9 | - npm install 10 | 11 | script: 12 | - grunt 13 | 14 | cache: npm 15 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | require('@babel/register'); 2 | 3 | module.exports = function(grunt) { 4 | require('time-grunt')(grunt); 5 | require('load-grunt-tasks')(grunt); 6 | 7 | require('./lib/grunt.js')(grunt); 8 | }; 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "{}" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright Brightcove, Inc. 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | 203 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Video.js Icon Font 2 | 3 | This project contains all of the tooling necessary to generate a new icon font for Video.js. The icons themselves are from 4 | Google's [Material Design Icons](https://github.com/google/material-design-icons) (from the commonly available version 3 of the set, with version 4 symbols supplemented as custom SVGs) and [Font Awesome](https://fontawesome.com/). 5 | 6 | You can see an overview of the icons used in the default Video.js font here: https://videojs.github.io/font/ 7 | 8 | ## Usage 9 | 10 | ```sh 11 | $ npm install grunt-cli # only if you don't already have grunt installed 12 | $ npm install 13 | $ grunt 14 | ``` 15 | 16 | ### Custom icons 17 | 18 | You can add custom icons by calling grunt with the `--custom-json` option. It takes a comma delimited list of paths to JSON files of the same format as below and merges it with the default icons file. 19 | 20 | Example: 21 | ```sh 22 | $ grunt --custom-json=./lib/custom.json,./lib/custom2.json 23 | ``` 24 | 25 | ## Making changes to the font 26 | 27 | To make changes to the default Video.js font, simply edit the `icons.json` file. You can add or remove icons, either by just selecting new 28 | SVGs from the [Material Design set](https://www.google.com/design/icons/), or pulling in new SVGs altogether. 29 | 30 | ```json 31 | { 32 | "font-name": "VideoJS", 33 | "root-dir": "./node_modules/material-design-icons/", 34 | "icons": [ 35 | { 36 | "name": "play", 37 | "svg": "av/svg/production/ic_play_arrow_48px.svg" 38 | }, 39 | { 40 | "name": "pause", 41 | "svg": "av/svg/production/ic_pause_48px.svg" 42 | }, 43 | { 44 | "name": "cool-custom-icon", 45 | "svg": "neato-icon.svg", 46 | "root-dir": "./custom-icons/neato-icon.svg" 47 | } 48 | ] 49 | } 50 | ``` 51 | 52 | Once you're done, simply run `grunt` again to regenerate the fonts and scss partial. To edit the `_icons.scss` partial, 53 | update `templates/scss.hbs`. 54 | 55 | ## Creating your own font 56 | 57 | If you are developing a Video.js plugin that uses custom icons, you can also create a new font instead of modifying the 58 | default font. Simply specify a new `font-name` and define the icons you want to include: 59 | 60 | ```json 61 | { 62 | "font-name": "MyPluginFont", 63 | "root-dir": "./node_modules/material-design-icons/", 64 | "icons": [ 65 | { 66 | "name": "av-perm", 67 | "svg": "action/svg/production/ic_perm_camera_mic_48px.svg" 68 | }, 69 | { 70 | "name": "video-perm", 71 | "svg": "av/svg/production/ic_videocam_48px.svg" 72 | }, 73 | { 74 | "name": "audio-perm", 75 | "svg": "av/svg/production/ic_mic_48px.svg" 76 | } 77 | ] 78 | } 79 | ``` 80 | Generate the `MyPluginFont` font files using the `--custom-json` option: 81 | 82 | ```sh 83 | $ grunt --custom-json=MyPluginFont.json 84 | ``` 85 | 86 | ### Exclude default icons 87 | 88 | By default, the regular Video.js icons are also included in the font. If you want to exclude these icons, when you're creating a Video.js plugin font for example, use the `--exclude-default` option. 89 | 90 | Example: 91 | ```sh 92 | $ grunt --custom-json=MyPluginFont.json --exclude-default 93 | ``` 94 | 95 | ## Icon unicode strings 96 | 97 | Videojs-font generates unicode strings for default and custom icons which are used as css pseudo-element content values by the videojs-icons.css file. 98 | 99 | ### Version 4 default unicode values 100 | | Icon Name | Unicode | 101 | | ---------- | ------- | 102 | | play | 'f101' | 103 | | play-circle | 'f102' | 104 | | pause | 'f103' | 105 | | volume-mute | 'f104' | 106 | | volume-low | 'f105' | 107 | | volume-mid | 'f106' | 108 | | volume-high | 'f107' | 109 | | fullscreen-enter | 'f108' | 110 | | fullscreen-exit | 'f109' | 111 | | spinner | 'f10a' | 112 | | subtitles | 'f10b' | 113 | | captions | 'f10c' | 114 | | hd | 'f10d' | 115 | | chapters | 'f10e' | 116 | | downloading | 'f10f' | 117 | | file-download | 'f110' | 118 | | file-download-done | 'f111' | 119 | | file-download-off | 'f112' | 120 | | share | 'f113' | 121 | | cog | 'f114' | 122 | | square | 'f115' | 123 | | circle | 'f116' | 124 | | circle-outline | 'f117' | 125 | | circle-inner-circle | 'f118' | 126 | | cancel | 'f119' | 127 | | repeat | 'f11a' | 128 | | replay | 'f11b' | 129 | | replay-5 | 'f11c' | 130 | | replay-10 | 'f11d' | 131 | | replay-30 | 'f11e' | 132 | | forward-5 | 'f11f' | 133 | | forward-10 | 'f120' | 134 | | forward-30 | 'f121' | 135 | | audio | 'f122' | 136 | | next-item | 'f123' | 137 | | previous-item | 'f124' | 138 | | shuffle | 'f125' | 139 | | cast | 'f126' | 140 | | picture-in-picture-enter | 'f127' | 141 | | picture-in-picture-exit | 'f128' | 142 | | facebook | 'f129' | 143 | | linkedin | 'f12a' | 144 | | twitter | 'f12b' | 145 | | tumblr | 'f12c' | 146 | | pinterest | 'f12d' | 147 | | audio-description | 'f12e' | 148 | -------------------------------------------------------------------------------- /css/videojs-icons.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: VideoJS; 3 | src: url(data:application/font-woff;charset=utf-8;base64,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) format("woff"); 4 | font-weight: normal; 5 | font-style: normal; } 6 | 7 | .vjs-icon-play { 8 | font-family: VideoJS; 9 | font-weight: normal; 10 | font-style: normal; } 11 | .vjs-icon-play:before { 12 | content: "\f101"; } 13 | 14 | .vjs-icon-play-circle { 15 | font-family: VideoJS; 16 | font-weight: normal; 17 | font-style: normal; } 18 | .vjs-icon-play-circle:before { 19 | content: "\f102"; } 20 | 21 | .vjs-icon-pause { 22 | font-family: VideoJS; 23 | font-weight: normal; 24 | font-style: normal; } 25 | .vjs-icon-pause:before { 26 | content: "\f103"; } 27 | 28 | .vjs-icon-volume-mute { 29 | font-family: VideoJS; 30 | font-weight: normal; 31 | font-style: normal; } 32 | .vjs-icon-volume-mute:before { 33 | content: "\f104"; } 34 | 35 | .vjs-icon-volume-low { 36 | font-family: VideoJS; 37 | font-weight: normal; 38 | font-style: normal; } 39 | .vjs-icon-volume-low:before { 40 | content: "\f105"; } 41 | 42 | .vjs-icon-volume-mid { 43 | font-family: VideoJS; 44 | font-weight: normal; 45 | font-style: normal; } 46 | .vjs-icon-volume-mid:before { 47 | content: "\f106"; } 48 | 49 | .vjs-icon-volume-high { 50 | font-family: VideoJS; 51 | font-weight: normal; 52 | font-style: normal; } 53 | .vjs-icon-volume-high:before { 54 | content: "\f107"; } 55 | 56 | .vjs-icon-fullscreen-enter { 57 | font-family: VideoJS; 58 | font-weight: normal; 59 | font-style: normal; } 60 | .vjs-icon-fullscreen-enter:before { 61 | content: "\f108"; } 62 | 63 | .vjs-icon-fullscreen-exit { 64 | font-family: VideoJS; 65 | font-weight: normal; 66 | font-style: normal; } 67 | .vjs-icon-fullscreen-exit:before { 68 | content: "\f109"; } 69 | 70 | .vjs-icon-spinner { 71 | font-family: VideoJS; 72 | font-weight: normal; 73 | font-style: normal; } 74 | .vjs-icon-spinner:before { 75 | content: "\f10a"; } 76 | 77 | .vjs-icon-subtitles { 78 | font-family: VideoJS; 79 | font-weight: normal; 80 | font-style: normal; } 81 | .vjs-icon-subtitles:before { 82 | content: "\f10b"; } 83 | 84 | .vjs-icon-captions { 85 | font-family: VideoJS; 86 | font-weight: normal; 87 | font-style: normal; } 88 | .vjs-icon-captions:before { 89 | content: "\f10c"; } 90 | 91 | .vjs-icon-hd { 92 | font-family: VideoJS; 93 | font-weight: normal; 94 | font-style: normal; } 95 | .vjs-icon-hd:before { 96 | content: "\f10d"; } 97 | 98 | .vjs-icon-chapters { 99 | font-family: VideoJS; 100 | font-weight: normal; 101 | font-style: normal; } 102 | .vjs-icon-chapters:before { 103 | content: "\f10e"; } 104 | 105 | .vjs-icon-downloading { 106 | font-family: VideoJS; 107 | font-weight: normal; 108 | font-style: normal; } 109 | .vjs-icon-downloading:before { 110 | content: "\f10f"; } 111 | 112 | .vjs-icon-file-download { 113 | font-family: VideoJS; 114 | font-weight: normal; 115 | font-style: normal; } 116 | .vjs-icon-file-download:before { 117 | content: "\f110"; } 118 | 119 | .vjs-icon-file-download-done { 120 | font-family: VideoJS; 121 | font-weight: normal; 122 | font-style: normal; } 123 | .vjs-icon-file-download-done:before { 124 | content: "\f111"; } 125 | 126 | .vjs-icon-file-download-off { 127 | font-family: VideoJS; 128 | font-weight: normal; 129 | font-style: normal; } 130 | .vjs-icon-file-download-off:before { 131 | content: "\f112"; } 132 | 133 | .vjs-icon-share { 134 | font-family: VideoJS; 135 | font-weight: normal; 136 | font-style: normal; } 137 | .vjs-icon-share:before { 138 | content: "\f113"; } 139 | 140 | .vjs-icon-cog { 141 | font-family: VideoJS; 142 | font-weight: normal; 143 | font-style: normal; } 144 | .vjs-icon-cog:before { 145 | content: "\f114"; } 146 | 147 | .vjs-icon-square { 148 | font-family: VideoJS; 149 | font-weight: normal; 150 | font-style: normal; } 151 | .vjs-icon-square:before { 152 | content: "\f115"; } 153 | 154 | .vjs-icon-circle { 155 | font-family: VideoJS; 156 | font-weight: normal; 157 | font-style: normal; } 158 | .vjs-icon-circle:before { 159 | content: "\f116"; } 160 | 161 | .vjs-icon-circle-outline { 162 | font-family: VideoJS; 163 | font-weight: normal; 164 | font-style: normal; } 165 | .vjs-icon-circle-outline:before { 166 | content: "\f117"; } 167 | 168 | .vjs-icon-circle-inner-circle { 169 | font-family: VideoJS; 170 | font-weight: normal; 171 | font-style: normal; } 172 | .vjs-icon-circle-inner-circle:before { 173 | content: "\f118"; } 174 | 175 | .vjs-icon-cancel { 176 | font-family: VideoJS; 177 | font-weight: normal; 178 | font-style: normal; } 179 | .vjs-icon-cancel:before { 180 | content: "\f119"; } 181 | 182 | .vjs-icon-repeat { 183 | font-family: VideoJS; 184 | font-weight: normal; 185 | font-style: normal; } 186 | .vjs-icon-repeat:before { 187 | content: "\f11a"; } 188 | 189 | .vjs-icon-replay { 190 | font-family: VideoJS; 191 | font-weight: normal; 192 | font-style: normal; } 193 | .vjs-icon-replay:before { 194 | content: "\f11b"; } 195 | 196 | .vjs-icon-replay-5 { 197 | font-family: VideoJS; 198 | font-weight: normal; 199 | font-style: normal; } 200 | .vjs-icon-replay-5:before { 201 | content: "\f11c"; } 202 | 203 | .vjs-icon-replay-10 { 204 | font-family: VideoJS; 205 | font-weight: normal; 206 | font-style: normal; } 207 | .vjs-icon-replay-10:before { 208 | content: "\f11d"; } 209 | 210 | .vjs-icon-replay-30 { 211 | font-family: VideoJS; 212 | font-weight: normal; 213 | font-style: normal; } 214 | .vjs-icon-replay-30:before { 215 | content: "\f11e"; } 216 | 217 | .vjs-icon-forward-5 { 218 | font-family: VideoJS; 219 | font-weight: normal; 220 | font-style: normal; } 221 | .vjs-icon-forward-5:before { 222 | content: "\f11f"; } 223 | 224 | .vjs-icon-forward-10 { 225 | font-family: VideoJS; 226 | font-weight: normal; 227 | font-style: normal; } 228 | .vjs-icon-forward-10:before { 229 | content: "\f120"; } 230 | 231 | .vjs-icon-forward-30 { 232 | font-family: VideoJS; 233 | font-weight: normal; 234 | font-style: normal; } 235 | .vjs-icon-forward-30:before { 236 | content: "\f121"; } 237 | 238 | .vjs-icon-audio { 239 | font-family: VideoJS; 240 | font-weight: normal; 241 | font-style: normal; } 242 | .vjs-icon-audio:before { 243 | content: "\f122"; } 244 | 245 | .vjs-icon-next-item { 246 | font-family: VideoJS; 247 | font-weight: normal; 248 | font-style: normal; } 249 | .vjs-icon-next-item:before { 250 | content: "\f123"; } 251 | 252 | .vjs-icon-previous-item { 253 | font-family: VideoJS; 254 | font-weight: normal; 255 | font-style: normal; } 256 | .vjs-icon-previous-item:before { 257 | content: "\f124"; } 258 | 259 | .vjs-icon-shuffle { 260 | font-family: VideoJS; 261 | font-weight: normal; 262 | font-style: normal; } 263 | .vjs-icon-shuffle:before { 264 | content: "\f125"; } 265 | 266 | .vjs-icon-cast { 267 | font-family: VideoJS; 268 | font-weight: normal; 269 | font-style: normal; } 270 | .vjs-icon-cast:before { 271 | content: "\f126"; } 272 | 273 | .vjs-icon-picture-in-picture-enter { 274 | font-family: VideoJS; 275 | font-weight: normal; 276 | font-style: normal; } 277 | .vjs-icon-picture-in-picture-enter:before { 278 | content: "\f127"; } 279 | 280 | .vjs-icon-picture-in-picture-exit { 281 | font-family: VideoJS; 282 | font-weight: normal; 283 | font-style: normal; } 284 | .vjs-icon-picture-in-picture-exit:before { 285 | content: "\f128"; } 286 | 287 | .vjs-icon-facebook { 288 | font-family: VideoJS; 289 | font-weight: normal; 290 | font-style: normal; } 291 | .vjs-icon-facebook:before { 292 | content: "\f129"; } 293 | 294 | .vjs-icon-linkedin { 295 | font-family: VideoJS; 296 | font-weight: normal; 297 | font-style: normal; } 298 | .vjs-icon-linkedin:before { 299 | content: "\f12a"; } 300 | 301 | .vjs-icon-twitter { 302 | font-family: VideoJS; 303 | font-weight: normal; 304 | font-style: normal; } 305 | .vjs-icon-twitter:before { 306 | content: "\f12b"; } 307 | 308 | .vjs-icon-tumblr { 309 | font-family: VideoJS; 310 | font-weight: normal; 311 | font-style: normal; } 312 | .vjs-icon-tumblr:before { 313 | content: "\f12c"; } 314 | 315 | .vjs-icon-pinterest { 316 | font-family: VideoJS; 317 | font-weight: normal; 318 | font-style: normal; } 319 | .vjs-icon-pinterest:before { 320 | content: "\f12d"; } 321 | 322 | .vjs-icon-audio-description { 323 | font-family: VideoJS; 324 | font-weight: normal; 325 | font-style: normal; } 326 | .vjs-icon-audio-description:before { 327 | content: "\f12e"; } 328 | -------------------------------------------------------------------------------- /custom-icons/audio-description.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | AD 5 | Created with Sketch. 6 | 7 | 8 | 23 | 24 | -------------------------------------------------------------------------------- /custom-icons/fontawesome/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /custom-icons/fontawesome/linkedin.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /custom-icons/fontawesome/pinterest.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /custom-icons/fontawesome/tumblr.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /custom-icons/fontawesome/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /custom-icons/mdi-v4/downloading.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /custom-icons/mdi-v4/file_download.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /custom-icons/mdi-v4/file_download_done.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /custom-icons/mdi-v4/file_download_off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /custom-icons/picture-in-picture-exit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /custom-icons/skip-forward-backward/forward-10.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /custom-icons/skip-forward-backward/forward-30.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /custom-icons/skip-forward-backward/forward-5.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /custom-icons/skip-forward-backward/replay-10.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /custom-icons/skip-forward-backward/replay-30.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /custom-icons/skip-forward-backward/replay-5.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /custom-icons/twitterx.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /fonts/VideoJS.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 13 | 16 | 19 | 22 | 25 | 28 | 31 | 34 | 37 | 40 | 43 | 46 | 49 | 52 | 55 | 58 | 61 | 64 | 67 | 70 | 73 | 76 | 79 | 82 | 85 | 88 | 91 | 94 | 97 | 100 | 103 | 106 | 109 | 112 | 115 | 118 | 121 | 124 | 127 | 130 | 133 | 136 | 139 | 142 | 145 | 148 | 149 | 150 | 151 | -------------------------------------------------------------------------------- /fonts/VideoJS.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/videojs/font/67659888023e38b55ef395b893f4e65786b9469c/fonts/VideoJS.ttf -------------------------------------------------------------------------------- /fonts/VideoJS.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/videojs/font/67659888023e38b55ef395b893f4e65786b9469c/fonts/VideoJS.woff -------------------------------------------------------------------------------- /icons.json: -------------------------------------------------------------------------------- 1 | { 2 | "font-name": "VideoJS", 3 | "root-dir": "./node_modules/material-design-icons/", 4 | "icons": [{ 5 | "name": "play", 6 | "svg": "av/svg/production/ic_play_arrow_48px.svg" 7 | }, { 8 | "name": "play-circle", 9 | "svg": "av/svg/production/ic_play_circle_outline_48px.svg" 10 | }, { 11 | "name": "pause", 12 | "svg": "av/svg/production/ic_pause_48px.svg" 13 | }, { 14 | "name": "volume-mute", 15 | "svg": "av/svg/production/ic_volume_off_48px.svg" 16 | }, { 17 | "name": "volume-low", 18 | "svg": "av/svg/production/ic_volume_mute_48px.svg" 19 | }, { 20 | "name": "volume-mid", 21 | "svg": "av/svg/production/ic_volume_down_48px.svg" 22 | }, { 23 | "name": "volume-high", 24 | "svg": "av/svg/production/ic_volume_up_48px.svg" 25 | }, { 26 | "name": "fullscreen-enter", 27 | "svg": "navigation/svg/production/ic_fullscreen_48px.svg" 28 | }, { 29 | "name": "fullscreen-exit", 30 | "svg": "navigation/svg/production/ic_fullscreen_exit_48px.svg" 31 | }, { 32 | "name": "spinner", 33 | "svg": "image/svg/production/ic_camera_48px.svg" 34 | }, { 35 | "name": "subtitles", 36 | "svg": "av/svg/production/ic_subtitles_48px.svg" 37 | }, { 38 | "name": "captions", 39 | "svg": "av/svg/production/ic_closed_caption_48px.svg" 40 | }, { 41 | "name": "hd", 42 | "svg": "av/svg/production/ic_hd_24px.svg" 43 | }, { 44 | "name": "chapters", 45 | "svg": "action/svg/production/ic_list_48px.svg" 46 | }, { 47 | "name": "downloading", 48 | "svg": "downloading.svg", 49 | "root-dir": "./custom-icons/mdi-v4/" 50 | }, { 51 | "name": "file-download", 52 | "svg": "file_download.svg", 53 | "root-dir": "./custom-icons/mdi-v4/" 54 | }, { 55 | "name": "file-download-done", 56 | "svg": "file_download_done.svg", 57 | "root-dir": "./custom-icons/mdi-v4/" 58 | }, { 59 | "name": "file-download-off", 60 | "svg": "file_download_off.svg", 61 | "root-dir": "./custom-icons/mdi-v4/" 62 | }, { 63 | "name": "share", 64 | "svg": "social/svg/production/ic_share_48px.svg" 65 | }, { 66 | "name": "cog", 67 | "svg": "action/svg/production/ic_settings_48px.svg" 68 | }, { 69 | "name": "square", 70 | "svg": "image/svg/production/ic_crop_square_48px.svg" 71 | }, { 72 | "name": "circle", 73 | "svg": "image/svg/production/ic_brightness_1_48px.svg" 74 | }, { 75 | "name": "circle-outline", 76 | "svg": "image/svg/production/ic_panorama_fish_eye_48px.svg" 77 | }, { 78 | "name": "circle-inner-circle", 79 | "svg": "image/svg/production/ic_adjust_48px.svg" 80 | }, { 81 | "name": "cancel", 82 | "svg": "navigation/svg/production/ic_cancel_48px.svg" 83 | }, { 84 | "name": "repeat", 85 | "svg": "av/svg/production/ic_repeat_48px.svg" 86 | }, { 87 | "name": "replay", 88 | "svg": "av/svg/production/ic_replay_48px.svg" 89 | }, { 90 | "name": "replay-5", 91 | "svg": "replay-5.svg", 92 | "root-dir": "./custom-icons/skip-forward-backward/" 93 | }, { 94 | "name": "replay-10", 95 | "svg": "replay-10.svg", 96 | "root-dir": "./custom-icons/skip-forward-backward/" 97 | }, { 98 | "name": "replay-30", 99 | "svg": "replay-30.svg", 100 | "root-dir": "./custom-icons/skip-forward-backward/" 101 | }, { 102 | "name": "forward-5", 103 | "svg": "forward-5.svg", 104 | "root-dir": "./custom-icons/skip-forward-backward/" 105 | }, { 106 | "name": "forward-10", 107 | "svg": "forward-10.svg", 108 | "root-dir": "./custom-icons/skip-forward-backward/" 109 | }, { 110 | "name": "forward-30", 111 | "svg": "forward-30.svg", 112 | "root-dir": "./custom-icons/skip-forward-backward/" 113 | }, { 114 | "name": "audio", 115 | "svg": "hardware/svg/production/ic_headset_48px.svg" 116 | }, { 117 | "name": "next-item", 118 | "svg": "av/svg/production/ic_skip_next_48px.svg" 119 | }, { 120 | "name": "previous-item", 121 | "svg": "av/svg/production/ic_skip_previous_48px.svg" 122 | }, { 123 | "name": "shuffle", 124 | "svg": "av/svg/production/ic_shuffle_48px.svg" 125 | }, { 126 | "name": "cast", 127 | "svg": "hardware/svg/production/ic_cast_48px.svg" 128 | }, { 129 | "name": "picture-in-picture-enter", 130 | "svg": "action/svg/production/ic_picture_in_picture_alt_48px.svg" 131 | }, { 132 | "name": "picture-in-picture-exit", 133 | "svg": "picture-in-picture-exit.svg", 134 | "root-dir": "./custom-icons/" 135 | }, { 136 | "name": "facebook", 137 | "svg": "facebook.svg", 138 | "root-dir": "./custom-icons/fontawesome/" 139 | }, { 140 | "name": "linkedin", 141 | "svg": "linkedin.svg", 142 | "root-dir": "./custom-icons/fontawesome/" 143 | }, { 144 | "name": "twitter", 145 | "svg": "twitterx.svg", 146 | "root-dir": "./custom-icons/" 147 | }, { 148 | "name": "tumblr", 149 | "svg": "tumblr.svg", 150 | "root-dir": "./custom-icons/fontawesome/" 151 | }, { 152 | "name": "pinterest", 153 | "svg": "pinterest.svg", 154 | "root-dir": "./custom-icons/fontawesome/" 155 | }, { 156 | "name": "audio-description", 157 | "svg": "audio-description.svg", 158 | "root-dir": "./custom-icons/" 159 | }] 160 | } 161 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | VideoJS 6 | 7 | 30 | 31 | 32 |

VideoJS Icons

33 |

All icons prefixed by vjs-icon-

34 |
35 | 36 | play 37 |
38 |
39 | 40 | play-circle 41 |
42 |
43 | 44 | pause 45 |
46 |
47 | 48 | volume-mute 49 |
50 |
51 | 52 | volume-low 53 |
54 |
55 | 56 | volume-mid 57 |
58 |
59 | 60 | volume-high 61 |
62 |
63 | 64 | fullscreen-enter 65 |
66 |
67 | 68 | fullscreen-exit 69 |
70 |
71 | 72 | spinner 73 |
74 |
75 | 76 | subtitles 77 |
78 |
79 | 80 | captions 81 |
82 |
83 | 84 | hd 85 |
86 |
87 | 88 | chapters 89 |
90 |
91 | 92 | downloading 93 |
94 |
95 | 96 | file-download 97 |
98 |
99 | 100 | file-download-done 101 |
102 |
103 | 104 | file-download-off 105 |
106 |
107 | 108 | share 109 |
110 |
111 | 112 | cog 113 |
114 |
115 | 116 | square 117 |
118 |
119 | 120 | circle 121 |
122 |
123 | 124 | circle-outline 125 |
126 |
127 | 128 | circle-inner-circle 129 |
130 |
131 | 132 | cancel 133 |
134 |
135 | 136 | repeat 137 |
138 |
139 | 140 | replay 141 |
142 |
143 | 144 | replay-5 145 |
146 |
147 | 148 | replay-10 149 |
150 |
151 | 152 | replay-30 153 |
154 |
155 | 156 | forward-5 157 |
158 |
159 | 160 | forward-10 161 |
162 |
163 | 164 | forward-30 165 |
166 |
167 | 168 | audio 169 |
170 |
171 | 172 | next-item 173 |
174 |
175 | 176 | previous-item 177 |
178 |
179 | 180 | shuffle 181 |
182 |
183 | 184 | cast 185 |
186 |
187 | 188 | picture-in-picture-enter 189 |
190 |
191 | 192 | picture-in-picture-exit 193 |
194 |
195 | 196 | facebook 197 |
198 |
199 | 200 | linkedin 201 |
202 |
203 | 204 | twitter 205 |
206 |
207 | 208 | tumblr 209 |
210 |
211 | 212 | pinterest 213 |
214 |
215 | 216 | audio-description 217 |
218 | 219 | 220 | -------------------------------------------------------------------------------- /lib/custom.json: -------------------------------------------------------------------------------- 1 | { 2 | "icons": [{ 3 | "name": "visibility", 4 | "svg": "image/svg/production/ic_remove_red_eye_48px.svg" 5 | }] 6 | } 7 | -------------------------------------------------------------------------------- /lib/custom2.json: -------------------------------------------------------------------------------- 1 | { 2 | "icons": [{ 3 | "name": "sunny", 4 | "svg": "image/svg/production/ic_wb_sunny_48px.svg" 5 | }] 6 | } 7 | -------------------------------------------------------------------------------- /lib/grunt.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | const sass = require('node-sass'); 4 | 5 | let iconsIndex = []; 6 | 7 | // Merge a `source` object to a `target` recursively 8 | const merge = (target, source) => { 9 | // Check if font name is changed 10 | if (source['font-name']) { 11 | target['font-name'] = source['font-name']; 12 | } 13 | 14 | // Check if root dir is changed 15 | if (source['root-dir']) { 16 | target['root-dir'] = source['root-dir']; 17 | } 18 | 19 | // Check for icon changes 20 | if (source.icons) { 21 | for (let icon of source['icons']) { 22 | let index = iconsIndex.indexOf(icon.name); 23 | 24 | // Icon is replaced 25 | if (index !== -1) { 26 | target.icons[index] = icon; 27 | } 28 | // New icon is added 29 | else { 30 | target.icons.push(icon); 31 | iconsIndex.push(icon.name); 32 | } 33 | } 34 | } 35 | 36 | return target; 37 | } 38 | 39 | module.exports = function(grunt) { 40 | grunt.initConfig({ 41 | sass: { 42 | options: { 43 | implementation: sass 44 | }, 45 | dist: { 46 | files: { 47 | 'css/videojs-icons.css': 'scss/videojs-icons.scss' 48 | } 49 | } 50 | }, 51 | watch: { 52 | all: { 53 | files: ['**/*.hbs', '**/*.js', './icons.json'], 54 | tasks: ['default'] 55 | } 56 | } 57 | }); 58 | 59 | grunt.registerTask('generate-font', function() { 60 | const done = this.async(); 61 | let webfontsGenerator = require('webfonts-generator'); 62 | let iconConfig = grunt.file.readJSON(path.join(__dirname, '..', 'icons.json')); 63 | let svgRootDir = iconConfig['root-dir']; 64 | 65 | if (grunt.option('exclude-default')) { 66 | // Exclude default video.js icons 67 | iconConfig.icons = []; 68 | } 69 | 70 | let icons = iconConfig.icons; 71 | 72 | // Index default icons 73 | icons.forEach(icon => iconsIndex.push(icon.name)); 74 | 75 | // Merge custom icons 76 | const customPaths = (grunt.option('custom-json') || '').split(',').filter(Boolean); 77 | customPaths.forEach(customPath => { 78 | const customConfig = grunt.file.readJSON(path.resolve(process.cwd(), customPath)); 79 | iconConfig = merge(iconConfig, customConfig); 80 | }); 81 | 82 | icons = iconConfig.icons; 83 | 84 | let iconFiles = icons.map(icon => { 85 | // If root-dir is specified for a specific icon, use that. 86 | if (icon['root-dir']) { 87 | return icon['root-dir'] + icon.svg; 88 | } 89 | 90 | // Otherwise, use the default root-dir. 91 | return svgRootDir + icon.svg; 92 | }); 93 | 94 | webfontsGenerator({ 95 | files: iconFiles, 96 | dest: 'fonts/', 97 | fontName: iconConfig['font-name'], 98 | cssDest: 'scss/_icons.scss', 99 | cssTemplate: './templates/scss.hbs', 100 | htmlDest: 'index.html', 101 | htmlTemplate: './templates/html.hbs', 102 | html: true, 103 | rename: iconPath => { 104 | const fileName = path.basename(iconPath); 105 | const iconName = icons.find(icon => path.basename(icon.svg) === fileName).name; 106 | 107 | return iconName; 108 | }, 109 | types: ['svg', 'woff', 'ttf'] 110 | }, error => { 111 | if (error) { 112 | console.error(error); 113 | done(false); 114 | } 115 | 116 | done(); 117 | }); 118 | }); 119 | 120 | grunt.registerTask('update-base64', function() { 121 | const iconScssFile = './scss/_icons.scss'; 122 | const iconConfig = grunt.option('custom-json') ? 123 | grunt.file.readJSON(path.resolve(process.cwd(), grunt.option('custom-json'))) : 124 | grunt.file.readJSON(path.join(__dirname, '..', 'icons.json')); 125 | const fontName = iconConfig['font-name']; 126 | const fontFiles = { 127 | woff: './fonts/' + fontName + '.woff' 128 | }; 129 | 130 | let scssContents = fs.readFileSync(iconScssFile).toString(); 131 | 132 | Object.keys(fontFiles).forEach(font => { 133 | const fontFile = fontFiles[font]; 134 | const fontContent = fs.readFileSync(fontFile); 135 | const regex = new RegExp(`(url.*font-${font}.*base64,)([^\\s]+)(\\).*)`); 136 | 137 | scssContents = scssContents.replace(regex, `$1${fontContent.toString('base64')}$3`); 138 | }); 139 | 140 | fs.writeFileSync(iconScssFile, scssContents); 141 | }); 142 | 143 | grunt.registerTask('default', ['generate-font', 'update-base64', 'sass']); 144 | }; 145 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "videojs-font", 3 | "version": "4.2.0", 4 | "description": "Video.js icon font", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/videojs/font.git" 8 | }, 9 | "scripts": { 10 | "version": "grunt && git add ." 11 | }, 12 | "keywords": [ 13 | "videojs" 14 | ], 15 | "author": "Matthew McClure ", 16 | "license": "Apache-2.0", 17 | "bugs": { 18 | "url": "https://github.com/videojs/font/issues" 19 | }, 20 | "homepage": "https://github.com/videojs/font", 21 | "devDependencies": { 22 | "@babel/core": "^7.19.3", 23 | "@babel/preset-env": "^7.19.3", 24 | "@babel/register": "^7.18.9", 25 | "evil-icons": "^1.10.1", 26 | "grunt": "^1.5.3", 27 | "grunt-contrib-watch": "^1.1.0", 28 | "grunt-sass": "^3.1.0", 29 | "load-grunt-tasks": "^5.1.0", 30 | "material-design-icons": "^3.0.1", 31 | "node-sass": "^9.0.0", 32 | "time-grunt": "^2.0.0", 33 | "webfonts-generator": "^0.4.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /scss/_icons.scss: -------------------------------------------------------------------------------- 1 | // https://github.com/sass/sass/issues/659#issuecomment-64819075 2 | @function char($character-code) { 3 | @if function-exists("selector-append") { 4 | @return unquote("\"\\#{$character-code}\""); 5 | } 6 | 7 | @return str-slice("\x", 1, 1) + $character-code; 8 | } 9 | 10 | $icon-font-family: VideoJS; 11 | 12 | @font-face { 13 | font-family: $icon-font-family; 14 | src: url(data:application/font-woff;charset=utf-8;base64,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) format('woff'); 15 | font-weight: normal; 16 | font-style: normal; 17 | } 18 | 19 | // https://sass-lang.com/documentation/values/maps 20 | $icons: ( 21 | play: 'f101', 22 | play-circle: 'f102', 23 | pause: 'f103', 24 | volume-mute: 'f104', 25 | volume-low: 'f105', 26 | volume-mid: 'f106', 27 | volume-high: 'f107', 28 | fullscreen-enter: 'f108', 29 | fullscreen-exit: 'f109', 30 | spinner: 'f10a', 31 | subtitles: 'f10b', 32 | captions: 'f10c', 33 | hd: 'f10d', 34 | chapters: 'f10e', 35 | downloading: 'f10f', 36 | file-download: 'f110', 37 | file-download-done: 'f111', 38 | file-download-off: 'f112', 39 | share: 'f113', 40 | cog: 'f114', 41 | square: 'f115', 42 | circle: 'f116', 43 | circle-outline: 'f117', 44 | circle-inner-circle: 'f118', 45 | cancel: 'f119', 46 | repeat: 'f11a', 47 | replay: 'f11b', 48 | replay-5: 'f11c', 49 | replay-10: 'f11d', 50 | replay-30: 'f11e', 51 | forward-5: 'f11f', 52 | forward-10: 'f120', 53 | forward-30: 'f121', 54 | audio: 'f122', 55 | next-item: 'f123', 56 | previous-item: 'f124', 57 | shuffle: 'f125', 58 | cast: 'f126', 59 | picture-in-picture-enter: 'f127', 60 | picture-in-picture-exit: 'f128', 61 | facebook: 'f129', 62 | linkedin: 'f12a', 63 | twitter: 'f12b', 64 | tumblr: 'f12c', 65 | pinterest: 'f12d', 66 | audio-description: 'f12e', 67 | ); 68 | 69 | // NOTE: This is as complex as we want to get with SCSS functionality. 70 | // 71 | // Now that we have a map of icons above, we can iterate over that map and create an icon class 72 | // for each icon in that list. The iterator below produces CSS classes like this: 73 | // 74 | // .vjs-icon-play { 75 | // font-family: VideoJS; 76 | // font-weight: normal; 77 | // font-style: normal; 78 | // } 79 | // .vjs-icon-play:before { content: "\f101"; } 80 | // 81 | // We can then use @extend in the codebase when we need to add an icon to a class. @extend builds up 82 | // the selectors for you so you can avoid duplication. This is generally a bad idea, but since each 83 | // icon should only be extended one or two other places, we'll roll with it. 84 | @each $name, $content in $icons { 85 | .vjs-icon-#{$name} { 86 | font-family: $icon-font-family; 87 | font-weight: normal; 88 | font-style: normal; 89 | 90 | &:before { 91 | content: char($content); 92 | } 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /scss/videojs-icons.scss: -------------------------------------------------------------------------------- 1 | @import "icons"; 2 | -------------------------------------------------------------------------------- /templates/html.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{fontName}} 6 | 7 | 30 | 31 | 32 |

{{fontName}} Icons

33 |

All icons prefixed by vjs-icon-

34 | {{#each names}} 35 |
36 | 37 | {{this}} 38 |
39 | {{/each}} 40 | 41 | 42 | -------------------------------------------------------------------------------- /templates/scss.hbs: -------------------------------------------------------------------------------- 1 | // https://github.com/sass/sass/issues/659#issuecomment-64819075 2 | @function char($character-code) { 3 | @if function-exists("selector-append") { 4 | @return unquote("\"\\#{$character-code}\""); 5 | } 6 | 7 | @return str-slice("\x", 1, 1) + $character-code; 8 | } 9 | 10 | $icon-font-family: {{fontName}}; 11 | 12 | @font-face { 13 | font-family: $icon-font-family; 14 | src: url(data:application/font-woff;charset=utf-8;base64,BASE64_WOFF_FONT) format('woff'); 15 | font-weight: normal; 16 | font-style: normal; 17 | } 18 | 19 | // https://sass-lang.com/documentation/values/maps 20 | $icons: ( 21 | {{#each codepoints}} 22 | {{@key}}: '{{this}}', 23 | {{/each}} 24 | ); 25 | 26 | // NOTE: This is as complex as we want to get with SCSS functionality. 27 | // 28 | // Now that we have a map of icons above, we can iterate over that map and create an icon class 29 | // for each icon in that list. The iterator below produces CSS classes like this: 30 | // 31 | // .vjs-icon-play { 32 | // font-family: VideoJS; 33 | // font-weight: normal; 34 | // font-style: normal; 35 | // } 36 | // .vjs-icon-play:before { content: "\f101"; } 37 | // 38 | // We can then use @extend in the codebase when we need to add an icon to a class. @extend builds up 39 | // the selectors for you so you can avoid duplication. This is generally a bad idea, but since each 40 | // icon should only be extended one or two other places, we'll roll with it. 41 | @each $name, $content in $icons { 42 | .vjs-icon-#{$name} { 43 | font-family: $icon-font-family; 44 | font-weight: normal; 45 | font-style: normal; 46 | 47 | &:before { 48 | content: char($content); 49 | } 50 | } 51 | } 52 | --------------------------------------------------------------------------------