Fix files that get published to npm, fix custom element constructor a…

…nd fix some missing server safe globals (#38)

* fix places where unsafe document global was being used

* move this._updateRange() to connectedCallback

According to the spec:

https://html.spec.whatwg.org/multipage/scripting.html#custom-element-conformance

> In general, work should be deferred to connectedCallback as much as possible—especially work involving fetching resources or rendering. However, note that connectedCallback can be called more than once, so any initialization work that is truly one-time will need a guard to prevent it from running twice.

In a react application, I was seeing this error:

react-dom.development.js?61bb:5895 Uncaught DOMException: Failed to construct 'CustomElement': The result must not have attributes
    at createElement (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:5895:34)
    at createInstance (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:7490:20)
    at completeWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:18970:28)
    at completeUnitOfWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22192:16)
    at performUnitOfWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22165:12)
    at workLoopSync (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22130:22)
    at performSyncWorkOnRoot (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21756:9)
    at eval (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:11089:24)
    at unstable_runWithPriority (webpack-internal:///./node_modules/scheduler/cjs/scheduler.development.js:653:12)
    at runWithPriority$1 (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:11039:10)
    at flushSyncCallbackQueueImpl (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:11084:7)
    at flushSyncCallbackQueue (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:11072:3)
    at scheduleUpdateOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21199:9)
    at updateContainer (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24373:3)
    at legacyRenderSubtreeIntoContainer (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24774:5)
    at Object.render (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24840:10)
    at renderReactElement (webpack-internal:///./node_modules/next/dist/client/index.js:590:28)

* fix files: [] array to include everything in dist/ (dont need examples/)

* add examples/ back in to files: [] array

* move comment back to constructor

package.json

@@ -4,9 +4,9 @@
   "description": "Custom elements (web components) for making audio and video player controls that look great in your website or app.",
   "main": "dist/index.js",
   "files": [
-    "./dist/*",
+    "dist/*",
     "README.md",
-    "./examples/*"
+    "examples/*"
   ],
   "scripts": {
     "clean": "rimraf dist",

src/js/media-mute-button.js

@@ -1,5 +1,6 @@
 import MediaChromeButton from './media-chrome-button.js';
 import { defineCustomElement } from './utils/defineCustomElement.js';
+import { Document as document } from './utils/server-safe-globals.js';
 import { mediaUIEvents } from './media-chrome-html-element.js';
 
 const offIcon =
@@ -63,4 +64,4 @@ class MediaMuteButton extends MediaChromeButton {
 
 defineCustomElement('media-mute-button', MediaMuteButton);
 
-export default MediaMuteButton;
+export default MediaMuteButton;

src/js/media-pip-button.js

@@ -1,5 +1,6 @@
 import MediaChromeButton from './media-chrome-button.js';
 import { defineCustomElement } from './utils/defineCustomElement.js';
+import { Document as document } from './utils/server-safe-globals.js';
 import { mediaUIEvents } from './media-chrome-html-element.js';
 
 const pipIcon =

src/js/media-play-button.js

@@ -1,4 +1,5 @@
 import MediaChromeButton from './media-chrome-button.js';
+import { Document as document } from './utils/server-safe-globals.js';
 import { defineCustomElement } from './utils/defineCustomElement.js';
 import { mediaUIEvents } from './media-chrome-html-element.js';
 
@@ -44,4 +45,4 @@ class MediaPlayButton extends MediaChromeButton {
 
 defineCustomElement('media-play-button', MediaPlayButton);
 
-export default MediaPlayButton;
+export default MediaPlayButton;

src/js/media-seek-backward-button.js

@@ -1,6 +1,7 @@
 import MediaChromeButton from './media-chrome-button.js';
 import { defineCustomElement } from './utils/defineCustomElement.js';
 import { mediaUIEvents } from './media-chrome-html-element.js';
+import { Document as document } from './utils/server-safe-globals.js';
 
 const backwardIcon =
   '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs><path class="icon" id="a" d="M0 0h24v24H0V0z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path class="icon" d="M12 5V1L7 6l5 5V7c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6H4c0 4.4 3.6 8 8 8s8-3.6 8-8-3.6-8-8-8zm-2.4 8.5h.4c.2 0 .4-.1.5-.2s.2-.2.2-.4v-.2s-.1-.1-.1-.2-.1-.1-.2-.1h-.5s-.1.1-.2.1-.1.1-.1.2v.2h-1c0-.2 0-.3.1-.5s.2-.3.3-.4.3-.2.4-.2.4-.1.5-.1c.2 0 .4 0 .6.1s.3.1.5.2.2.2.3.4.1.3.1.5v.3s-.1.2-.1.3-.1.2-.2.2-.2.1-.3.2c.2.1.4.2.5.4s.2.4.2.6c0 .2 0 .4-.1.5s-.2.3-.3.4-.3.2-.5.2-.4.1-.6.1c-.2 0-.4 0-.5-.1s-.3-.1-.5-.2-.2-.2-.3-.4-.1-.4-.1-.6h.8v.2s.1.1.1.2.1.1.2.1h.5s.1-.1.2-.1.1-.1.1-.2v-.5s-.1-.1-.1-.2-.1-.1-.2-.1h-.6v-.7zm5.7.7c0 .3 0 .6-.1.8l-.3.6s-.3.3-.5.3-.4.1-.6.1-.4 0-.6-.1-.3-.2-.5-.3-.2-.3-.3-.6-.1-.5-.1-.8v-.7c0-.3 0-.6.1-.8l.3-.6s.3-.3.5-.3.4-.1.6-.1.4 0 .6.1.3.2.5.3.2.3.3.6.1.5.1.8v.7zm-.8-.8v-.5c0-.1-.1-.2-.1-.3s-.1-.1-.2-.2-.2-.1-.3-.1-.2 0-.3.1l-.2.2s-.1.2-.1.3v2s.1.2.1.3.1.1.2.2.2.1.3.1.2 0 .3-.1l.2-.2s.1-.2.1-.3v-1.5z" clip-path="url(#b)"/></svg>';

src/js/media-seek-forward-button.js

@@ -1,5 +1,6 @@
 import MediaChromeButton from './media-chrome-button.js';
 import { defineCustomElement } from './utils/defineCustomElement.js';
+import { Document as document } from './utils/server-safe-globals.js';
 import { mediaUIEvents } from './media-chrome-html-element.js';
 
 const forwardIcon =

src/js/media-volume-range.js

@@ -15,8 +15,6 @@ class MediaVolumeRange extends MediaChromeRange {
       });
     });
 
-    this._updateRange();
-
     // Store the last set positive volume before a drag
     // so we have it when unmuting
     // this.range.addEventListener('mousedown', () => {
@@ -39,6 +37,10 @@ class MediaVolumeRange extends MediaChromeRange {
     // });
   }
 
+  connectedCallback () {
+    this._updateRange();
+  }
+
   mediaVolumeSet(volume) {
     this._updateRange();
   }