Plyr: Setup issue: SVG sprite buttons not display in Firefox

[buszmen201]

Expected behaviour

Like in Edge:

Actual behaviour

Environment

• Browser: Firefox
• Version: 60.0b16 (64 bit)
• Operating System: MS Windows 10 x64
• Version: 1709 (16299.371)

Steps to reproduce

File is builded using Python with module yattag
scripts: jQuery, Bootstrap, and plyr

File structure:

│  
├── html
|   ├── vtt
|   ├── jpg
|   ├── mp4
│   └── html
└── media
    ├── js
    |   ├── bootrap.js
    |   ├── jquery.js
    |   ├── font-awesome,js
    |   └── data.js (here is script intilalizing plyr)
    ├── css
    |   ├── bootrap.css 
    |   ├── my css
    |   ├── font-awesome,js
    |   └── data.js (here is script intilalizing plyr)
    ├── img
    |   └── jpg's
    ├── blank.mp4
    ├── plyr.min.js
    ├── plyr.css
    ├── plyr.css.map
    └── plyr.svg

<video controls crossorigin playsinline id=player poster="local path to poster">
    <source src="local path to file" type="video/mp4" />
    <track kind="captions" label="English" srclang="en" src="local path to vtt file" default="" \>
</video>

<script src="../media/plyr.min.js"></script>

```js
document.addEventListener('DOMContentLoaded', () => {
const player = new Plyr('#player', {
iconUrl: '../media/plyr.svg'
});
});

[sampotts]

Any errors in the console? What’s the HTML for a button look like?

[sampotts]

Are you seeing this on https://plyr.io? It was a checkbox in the template you removed :)

[buszmen201]

In console is no errors.
After schich on debug: true

{
  "enabled": true,
  "title": "",
  "debug": true,
  "autoplay": false,
  "autopause": true,
  "seekTime": 10,
  "volume": 1,
  "muted": false,
  "duration": null,
  "displayDuration": true,
  "invertTime": true,
  "toggleInvert": true,
  "ratio": "16:9",
  "clickToPlay": true,
  "hideControls": true,
  "showPosterOnEnd": false,
  "disableContextMenu": true,
  "loadSprite": false,
  "iconPrefix": "plyr",
  "iconUrl": "../media/plyr.svg",
  "blankVideo": "https://cdn.plyr.io/static/blank.mp4",
  "quality": {
    "default": 576,
    "options": [
      4320,
      2880,
      2160,
      1440,
      1080,
      720,
      576,
      480,
      360,
      240,
      "default"
    ]
  },
  "loop": {
    "active": false
  },
  "speed": {
    "selected": 1,
    "options": [
      0.5,
      0.75,
      1,
      1.25,
      1.5,
      1.75,
      2
    ]
  },
  "keyboard": {
    "focused": true,
    "global": false
  },
  "tooltips": {
    "controls": false,
    "seek": true
  },
  "captions": {
    "active": false,
    "language": "pl"
  },
  "fullscreen": {
    "enabled": true,
    "fallback": true,
    "iosNative": false
  },
  "storage": {
    "enabled": true,
    "key": "plyr"
  },
  "controls": [
    "play-large",
    "play",
    "progress",
    "current-time",
    "mute",
    "volume",
    "captions",
    "settings",
    "pip",
    "airplay",
    "fullscreen"
  ],
  "settings": [
    "captions",
    "quality",
    "speed"
  ],
  "i18n": {
    "restart": "Restart",
    "rewind": "Rewind {seektime} secs",
    "play": "Play",
    "pause": "Pause",
    "fastForward": "Forward {seektime} secs",
    "seek": "Seek",
    "played": "Played",
    "buffered": "Buffered",
    "currentTime": "Current time",
    "duration": "Duration",
    "volume": "Volume",
    "mute": "Mute",
    "unmute": "Unmute",
    "enableCaptions": "Enable captions",
    "disableCaptions": "Disable captions",
    "enterFullscreen": "Enter fullscreen",
    "exitFullscreen": "Exit fullscreen",
    "frameTitle": "Player for {title}",
    "captions": "Captions",
    "settings": "Settings",
    "speed": "Speed",
    "normal": "Normal",
    "quality": "Quality",
    "loop": "Loop",
    "start": "Start",
    "end": "End",
    "all": "All",
    "reset": "Reset",
    "disabled": "Disabled",
    "enabled": "Enabled",
    "advertisement": "Ad"
  },
  "urls": {
    "vimeo": {
      "api": "https://player.vimeo.com/api/player.js"
    },
    "youtube": {
      "api": "https://www.youtube.com/iframe_api"
    },
    "googleIMA": {
      "api": "https://imasdk.googleapis.com/js/sdkloader/ima3.js"
    }
  },
  "listeners": {
    "seek": null,
    "play": null,
    "pause": null,
    "restart": null,
    "rewind": null,
    "fastForward": null,
    "mute": null,
    "volume": null,
    "captions": null,
    "fullscreen": null,
    "pip": null,
    "airplay": null,
    "speed": null,
    "quality": null,
    "loop": null,
    "language": null
  },
  "events": [
    "ended",
    "progress",
    "stalled",
    "playing",
    "waiting",
    "canplay",
    "canplaythrough",
    "loadstart",
    "loadeddata",
    "loadedmetadata",
    "timeupdate",
    "volumechange",
    "play",
    "pause",
    "error",
    "seeking",
    "seeked",
    "emptied",
    "ratechange",
    "cuechange",
    "enterfullscreen",
    "exitfullscreen",
    "captionsenabled",
    "captionsdisabled",
    "languagechange",
    "controlshidden",
    "controlsshown",
    "ready",
    "statechange",
    "qualitychange",
    "qualityrequested",
    "adsloaded",
    "adscontentpause",
    "adscontentresume",
    "adstarted",
    "adsmidpoint",
    "adscomplete",
    "adsallcomplete",
    "adsimpression",
    "adsclick"
  ],
  "selectors": {
    "editable": "input, textarea, select, [contenteditable]",
    "container": ".plyr",
    "controls": {
      "container": null,
      "wrapper": ".plyr__controls"
    },
    "labels": "[data-plyr]",
    "buttons": {
      "play": "[data-plyr=\"play\"]",
      "pause": "[data-plyr=\"pause\"]",
      "restart": "[data-plyr=\"restart\"]",
      "rewind": "[data-plyr=\"rewind\"]",
      "fastForward": "[data-plyr=\"fast-forward\"]",
      "mute": "[data-plyr=\"mute\"]",
      "captions": "[data-plyr=\"captions\"]",
      "fullscreen": "[data-plyr=\"fullscreen\"]",
      "pip": "[data-plyr=\"pip\"]",
      "airplay": "[data-plyr=\"airplay\"]",
      "settings": "[data-plyr=\"settings\"]",
      "loop": "[data-plyr=\"loop\"]"
    },
    "inputs": {
      "seek": "[data-plyr=\"seek\"]",
      "volume": "[data-plyr=\"volume\"]",
      "speed": "[data-plyr=\"speed\"]",
      "language": "[data-plyr=\"language\"]",
      "quality": "[data-plyr=\"quality\"]"
    },
    "display": {
      "currentTime": ".plyr__time--current",
      "duration": ".plyr__time--duration",
      "buffer": ".plyr__progress--buffer",
      "played": ".plyr__progress--played",
      "loop": ".plyr__progress--loop",
      "volume": ".plyr__volume--display"
    },
    "progress": ".plyr__progress",
    "captions": ".plyr__captions",
    "menu": {
      "quality": ".js-plyr__menu__list--quality"
    }
  },
  "classNames": {
    "video": "plyr__video-wrapper",
    "embed": "plyr__video-embed",
    "ads": "plyr__ads",
    "control": "plyr__control",
    "type": "plyr--{0}",
    "provider": "plyr--{0}",
    "stopped": "plyr--stopped",
    "playing": "plyr--playing",
    "loading": "plyr--loading",
    "error": "plyr--has-error",
    "hover": "plyr--hover",
    "tooltip": "plyr__tooltip",
    "cues": "plyr__cues",
    "hidden": "plyr__sr-only",
    "hideControls": "plyr--hide-controls",
    "isIos": "plyr--is-ios",
    "isTouch": "plyr--is-touch",
    "uiSupported": "plyr--full-ui",
    "noTransition": "plyr--no-transition",
    "menu": {
      "value": "plyr__menu__value",
      "badge": "plyr__badge",
      "open": "plyr--menu-open"
    },
    "captions": {
      "enabled": "plyr--captions-enabled",
      "active": "plyr--captions-active"
    },
    "fullscreen": {
      "enabled": "plyr--fullscreen-enabled",
      "fallback": "plyr--fullscreen-fallback"
    },
    "pip": {
      "supported": "plyr--pip-supported",
      "active": "plyr--pip-active"
    },
    "airplay": {
      "supported": "plyr--airplay-supported",
      "active": "plyr--airplay-active"
    },
    "tabFocus": "plyr__tab-focus"
  },
  "attributes": {
    "embed": {
      "provider": "data-plyr-provider",
      "id": "data-plyr-embed-id"
    }
  },
  "keys": {
    "google": null
  },
  "ads": {
    "enabled": false,
    "publisherId": ""
  },
  "crossorigin": true,
  "playsinline": true
}

And here is whole rendered player:

```html

Play

Pause Play

Seek % buffered 00:00

1:00:17

Unmute Mute

Volume

Disable captions Enable captions

Settings

• Captions English
• Speed Normal

Captions

• Disabled
• English EN

Speed

• 0.5×
• 0.75×
• Normal
• 1.25×
• 1.5×
• 1.75×
• 2×

Exit fullscreen Enter fullscreen

````

[buszmen201]

Anyway, when I don't provide iconUrl (and it's is downloaded from CDN) it's working. But I wanna have it locally.

[friday]

Have you checked that the response mimetype is the same with your local server as the cdn?

[sampotts]

I think this is down to either the mimetype as above or the path to the SVG not being correct. Remember it'll be relative to the _page_ and not the _JavaScript_. Any errors in the console?

Otherwise try setting loadSprite to true - this _should_ force it to AJAX it in IIRC.

[friday]

I had a related (perhaps a variant of the same) issue just now in Firefox, missing some of the SVG icons on one specific domain.

I had 11/14 icons. One of the missing ones was the settings icon. Not sure about the other 2.

Tested with:

document.querySelectorAll('#sprite-plyr svg symbol').length

It turned out to be because I had an outdated svg cache in localStorage. Clearing localStorage fixed it, so it wasn't really a Firefox issue. I just got it in Firefox since I hadn't been using Firefox with that server for a while I guess.

Personally I'd rather avoid using localStorage like this since it never expires. The regular browser cache should handle xhr requests as well, unless I'm missing something? Alternatively we could also store the Plyr version and invalidate the cache when the version doesn't match. Otherwise this would happen every time we add or rename an icon (which isn't very often though).

I used Plyr v3 pre-beta though, so this might be an issue more patient user wouldn't have gotten.

[sampotts]

Using localstorage is so we don't get a flash of no icons. Localstorage is faster than relying on browser cache. The way it works though, the localstorage is updated every load anyway.

[friday]

I see. That makes a lot more sense than just using it for caching. But in that case the invalidator must not work in Firefox, as reloading the page should have solved it?

[sampotts]

Yep should have. I’ll double check the logic later.

On 1 Jun 2018, at 12:05 pm, friday [e-mail] wrote:

I see. That makes a lot more sense than just using it for caching. But in that case the invalidator must not work in Firefox, as reloading the page should have solved it?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[friday]

Seems like the Storage object works like that, but utils.loadSprite() is using localStorage directly to get and set. localStorage.setItem('cache-sprite-plyr', '{}') (deliberate attempt to break the cache) will remove all icons until you remove cache-sprite-plyr. This could be the issue the author is having. Not {} obviously, but perhaps the localStorage key matches but the svg names doesn't, the build was cached before gulp had completed or something like that.

[friday]

I'll try to fix the localStorage issue soon, if no one beats me to it. Will then consider this issue fixed, unless someone shows the opposite.

[sampotts]

I think I've found the issue. It's meant to work like this:

• Check local storage has a sprite and it if does load from there
• Make the XHR request
• Update local storage for next page view as well as update sprite in DOM

The problem is if the sprite already exists, it doesn't inject again as there's a check to see if it exists and return. I'll get this one fixed today.

[friday]

This should be fixed by now. If not, let us know.