Merge pull request #54 from thuoe/feature/font-styling

Override font-family ussing CSS variables

Author: thuoe

README.md

@@ -111,6 +111,7 @@ Custom property | Description | Default Value
 `--video-menu-item-icon-hover-color`      | Menu icon hover color                   | `white`
 `--video-tooltip-background-color`        | Tooltip background color                | `rgba(255,255,255,.9)`
 `--video-pulse-icon-color`                | Pulse icon background color              | `#d32f2f`
+`--video-font-family`                     | Font-family used throughout video player | `Arial`, `Helvetica`, `sans-serif`
 
 
 ### HTML Example:

player-styles.js

@@ -5,6 +5,7 @@ const playerStyles = html`
     :host {
       display: block;
       user-select: none;
+      font-family: var(--video-font-family), Arial, Helvetica, sans-serif;
     }
 
     :host(:-webkit-full-screen) {

test/mp4-video-player_test.html

@@ -360,6 +360,7 @@
       suite('player styling', () => {
         test('CSS properties are being applied..', () => {
           player.updateStyles({
+            '--video-font-family': 'Times New Roman',
             '--video-title-color': 'red',
             '--video-track-bar-color': 'blue',
             '--video-track-fill-color': 'green',
@@ -373,6 +374,9 @@
             '--video-pulse-icon-color': 'LightSteelBlue'
           });
 
+          const timeElapsed = player.shadowRoot.querySelector('.time-elapsed');
+          assertComputed(timeElapsed, 'Times New Roman', '--video-font-family');
+
           const title = player.shadowRoot.querySelector('.title');
           assertComputed(title, 'red', '--video-title-color');