@mux/mux-uploader - npm Package Compare versions

Comparing version 0.1.0-canary.10-958b850 to 0.1.0-canary.10-96691c3

CHANGELOG.md

@@ -6,2 +6,41 @@ # Change Log
 
+# [0.1.0-beta.7](https://github.com/muxinc/elements/compare/@mux/mux-uploader@0.1.0-beta.6...@mux/mux-uploader@0.1.0-beta.7) (2022-08-04)
+
+### Bug Fixes
+
+- **mux-uploader:** use narrower type def for uploadstart to avoid type mismatches in dist. ([a56cc06](https://github.com/muxinc/elements/commit/a56cc0609b1051513f5df3eb7e9cb21410fc7bb5))
+
+# [0.1.0-beta.6](https://github.com/muxinc/elements/compare/@mux/mux-uploader@0.1.0-beta.5...@mux/mux-uploader@0.1.0-beta.6) (2022-08-03)
+
+### Features
+
+- **mux-uploader:** Upchunk event type defs. ([248e0e1](https://github.com/muxinc/elements/commit/248e0e1a9edf648113fd6bc7bdf6505c7df8cc4b))
+
+# [0.1.0-beta.5](https://github.com/muxinc/elements/compare/@mux/mux-uploader@0.1.0-beta.4...@mux/mux-uploader@0.1.0-beta.5) (2022-08-02)
+
+### Bug Fixes
+
+- **mux-uploader:** Fix attempt and chunkSuccess event details not being passed. Also make the data passed consistent by using event for all params. ([09d4cf8](https://github.com/muxinc/elements/commit/09d4cf8e22d8de919e175d039c5f0eb9a42b2591))
+- **mux-uploader:** Update event and event handler typedefs for greater accuracy of types. ([92f28a5](https://github.com/muxinc/elements/commit/92f28a5828ea3c046fa5a1aa711a038a7444f0dc))
+
+### Features
+
+- **mux-uploader:** Add CSS variables for button border and padding. ([359cd89](https://github.com/muxinc/elements/commit/359cd89472781fc41e33e95574c0d9c845b1d081))
+- **mux-uploader:** Add custom event for when upload starts. ([9fd1efc](https://github.com/muxinc/elements/commit/9fd1efc943bcb60efdb51b455d5b9642af86b920))
+- **mux-uploader:** Support Upchunk's attempt and chunkSuccess events. ([739a88e](https://github.com/muxinc/elements/commit/739a88e5eda697b8344ef14e3a20b1bef19e1a41))
+
+# [0.1.0-beta.4](https://github.com/muxinc/elements/compare/@mux/mux-uploader@0.1.0-beta.3...@mux/mux-uploader@0.1.0-beta.4) (2022-07-21)
+
+### Bug Fixes
+
+- **mux-uploader, mux-uploader-react:** Add support for endpoint to react version. Clean up type defs, including css vars (drop component only). Remove unnecessary capture for DandD events. ([c12ded5](https://github.com/muxinc/elements/commit/c12ded5188a3d97d48dc335a98d8537b6fa57443))
+
+### Features
+
+- add defaultMuted, defaultPlaybackRate props ([#252](https://github.com/muxinc/elements/issues/252)) ([1a72165](https://github.com/muxinc/elements/commit/1a7216545cba27b34bc743cf5dd6225d4dcae738))
+- **mux-uploader, mux-uploader-react:** Reset state to allow users to re-select same file when retrying a failed upload. Add error messaging for when url is unset. ([94d000a](https://github.com/muxinc/elements/commit/94d000a396f9a10406bd6959e8aec3cb96c7e775))
+- **mux-uploader:** Add endpoint support for promise callback. ([fc7b381](https://github.com/muxinc/elements/commit/fc7b38171337401f6c0ef8be2fa4e741a0e7a3fd))
+- **mux-uploader:** Clean up mux-uploader-drop + overlay and active logic now that we support descendants. ([83777d2](https://github.com/muxinc/elements/commit/83777d24f1b024b7eba83c98c7a8eb20f9db59e6))
+- **mux-uploader:** Support endoing. ([86ae488](https://github.com/muxinc/elements/commit/86ae488dd22dbd1b7c773d3e13ce9cb99605d0f5))
+
 # [0.1.0-beta.3](https://github.com/muxinc/elements/compare/@mux/mux-uploader@0.1.0-beta.2...@mux/mux-uploader@0.1.0-beta.3) (2022-07-11)
@@ -8,0 +47,0 @@

package.json

 {
   "name": "@mux/mux-uploader",
-  "version": "0.1.0-canary.10-958b850",
+  "version": "0.1.0-canary.10-96691c3",
   "description": "An uploader elements to be used with Mux Direct Uploads",
@@ -31,3 +31,3 @@ "main": "./dist/index.cjs",
     "clean": "shx rm -rf dist/",
-    "test": "web-test-runner **/*test.js --port 8002 --coverage --config test/web-test-runner.config.mjs --root-dir ../..",
+    "test": "web-test-runner **/*test.js --port 8005 --coverage --config test/web-test-runner.config.mjs --root-dir ../..",
     "posttest": "replace 'SF:src/' 'SF:packages/mux-uploader/src/' coverage/lcov.info --silent",
@@ -34,0 +34,0 @@ "dev:iife": "open-process | yarn build:iife --watch",

README.md

@@ -100,10 +100,10 @@ <p align="center">
 
-| Attribute            | Type      | Description                                                                                                                                                                                                               | Default     |
-| -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `url`                | `string`  | The authenticated URL that your file will be uploaded to. Check out the [direct uploads docs](https://docs.mux.com/guides/video/upload-files-directly#1-create-an-authenticated-mux-url) for how to create one. Required. | `undefined` |
-| `id`                 | `string`  | An ID that allows `mux-uploader-drop` to locate `mux-uploader`. Required if you use `mux-uploader-drop`.                                                                                                                  | N/A         |
-| `type`               | `"bar"`   | Specifies the visual type of progress bar. A radial type is in-progress.                                                                                                                                                  | "bar"       |
-| `upload-in-progress` | `boolean` | (Read-only) Toggles visual status of progress bar while upload is in progress. Can be targeted with CSS if you want to control styles while in progress i.e. mux-uploader[upload-in-progress].                            | false       |
-| `upload-error`       | `boolean` | (Read-only) Toggles visual status of progress bar when upload encounters an error. Can be targeted with CSS if you want to control styles when an error occurs i.e. mux-uploader[upload-error].                           | false       |
-| `status`             | `boolean` | Toggles text status visibility of progress bar. The text that is displayed is a percentage by default. If you prefer just the progress bar with no text upload status, don't include this attribute.                      | false       |
+| Attribute            | Type                | Description                                                                                                                                                                                                                                                                           | Default     |
+| -------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `endpoint`           | `string \| Promise` | Either a) the authenticated URL that your file will be uploaded to or b) an async function that yields a promise that resolves to that url. Check out the [direct uploads docs](https://docs.mux.com/guides/video/upload-files-directly#1-create-an-authenticated-mux-url). Required. | `undefined` |
+| `id`                 | `string`            | An ID that allows `mux-uploader-drop` to locate `mux-uploader`. Required if you use `mux-uploader-drop`.                                                                                                                                                                              | N/A         |
+| `type`               | `"bar"`             | Specifies the visual type of progress bar. A radial type is in-progress.                                                                                                                                                                                                              | "bar"       |
+| `upload-in-progress` | `boolean`           | (Read-only) Toggles visual status of progress bar while upload is in progress. Can be targeted with CSS if you want to control styles while in progress i.e. mux-uploader[upload-in-progress].                                                                                        | false       |
+| `upload-error`       | `boolean`           | (Read-only) Toggles visual status of progress bar when upload encounters an error. Can be targeted with CSS if you want to control styles when an error occurs i.e. mux-uploader[upload-error].                                                                                       | false       |
+| `status`             | `boolean`           | Toggles text status visibility of progress bar. The text that is displayed is a percentage by default. If you prefer just the progress bar with no text upload status, don't include this attribute.                                                                                  | false       |
 
@@ -115,3 +115,3 @@ #### `<mux-uploader-drop>`
 | `overlay`      | `boolean` | Toggles showing an overlay on dragover.                    | `false` |
-| `overlay-text` | `boolean` | Optional text to display on dragover when `overlay` is on. | `''`    |
+| `overlay-text` | `string`  | Optional text to display on dragover when `overlay` is on. | `''`    |
 | `mux-uploader` | `string ` | Must match the `id` on `MuxUploader`. Required.            | N/A     |
@@ -123,5 +123,5 @@
 
-| Attribute        | Type       | Description                                                                                                                             | Default                                         |
-| ---------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
-| `formatProgress` | `function` | A function that accepts numeric percent and is expected to return a string. Allows for customizing how the progress should be rendered. | A function the yields a percent progress string |
+| Property         | Type       | Description                                                                                                                                                                                                                                                                                        | Default                                                          |
+| ---------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
+| `formatProgress` | `function` | A function that accepts numeric percent and is expected to return a string. Allows for customizing how the progress should be rendered - whether you want to display only the number or a sentence with the number etc. i.e. `formatProgress={(percent: number) => `${percent} percent uploaded`}` | A function that yields only the percent as a string i.e. `"60%"` |
 
@@ -132,9 +132,12 @@ ### Events
 
-`<mux-uploader>` has a handful of events to monitor uploading state.
+`<mux-uploader>` has a handful of events - using [Upchunk](https://github.com/muxinc/upchunk/blob/master/README.md) under the hood - to monitor uploading state.
 
-| Event      | Description                                                              |
-| ---------- | ------------------------------------------------------------------------ |
-| `error`    | Fired when an error occurs in the chunked upload process.                |
-| `progress` | Fired whenever a chunk of the file has successfully completed uploading. |
-| `success`  | Fired when the entire file has successfully completed uploading.         |
+| Event          | Description                                                                                                                                                        |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `uploadstart`  | Fired when the upload begins.                                                                                                                                      |
+| `chunkattempt` | Fired immediately before a chunk upload is attempted.                                                                                                              |
+| `chunksuccess` | Fired when an indvidual chunk is successfully uploaded. Sample response: `{ detail: { chunk: Integer, attempts: Integer, response: XhrResponse } }`                |
+| `error`        | Fired when an error occurs in the chunked upload process.                                                                                                          |
+| `progress`     | Fired continuously with incremental upload progress. This returns the current percentage of the file that's been uploaded. Sample response: `{ detail: [0..100] }` |
+| `success`      | Fired when the entire file has successfully completed uploading.                                                                                                   |
 
@@ -147,15 +150,17 @@ ### Styling
 
-| Name                           | CSS Property       | Default Value | Description                                             | Notes                                                                                             |
-| ------------------------------ | ------------------ | ------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
-| `--uploader-font-family`       | `font-family`      | `Arial`       | font family of the component                            | Applies to other elements as well: upload status and error status                                 |
-| `--uploader-font-size`         | `font-size`        | `16px`        | font size for text within the component                 | Also applies to `<mux-uploader-drop>` i.e. overlay text                                           |
-| `--uploader-background-color`  | `background-color` | `inherit`     | background color of area surrounding the upload         |                                                                                                   |
-| `--button-background-color`    | `background`       | `#fff`        | background color of upload button                       |                                                                                                   |
-| `--button-border-radius`       | `border-radius`    | `4px`         | border ardius of the upload button                      |                                                                                                   |
-| `--button-hover-text`          | `color`            | `#fff`        | text color of upload button on button hover             |                                                                                                   |
-| `--button-hover-background`    | `background`       | `#404040`     | background color of upload button on button hover       |                                                                                                   |
-| `--button-active-text`         | `color`            | `#fff`        | color of upload button text when button is active       |                                                                                                   |
-| `--button-active-background`   | `background`       | `#000000`     | background color of upload button when button is active | Applied via `:active` [pseudo selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:active) |
-| `--progress-bar-fill-color`    | `background`       | `#000000`     | background color for progress bar div                   |                                                                                                   |
-| `--progress-radial-fill-color` | `stroke`           | `black`       | stroke color for circle SVG (wip)                       |                                                                                                   |
+| Name                           | CSS Property       | Default Value       | Description                                             | Notes                                                                                             |
+| ------------------------------ | ------------------ | ------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
+| `--uploader-font-family`       | `font-family`      | `Arial`             | font family of the component                            | Applies to other elements as well: upload status and error status                                 |
+| `--uploader-font-size`         | `font-size`        | `16px`              | font size for text within the component                 | Also applies to `<mux-uploader-drop>` i.e. overlay text                                           |
+| `--uploader-background-color`  | `background-color` | `inherit`           | background color of area surrounding the upload         |                                                                                                   |
+| `--button-background-color`    | `background`       | `#fff`              | background color of upload button                       |                                                                                                   |
+| `--button-border-radius`       | `border-radius`    | `4px`               | border radius of the upload button                      |                                                                                                   |
+| `--button-border`              | `border`           | `1px solid #000000` | border of the upload button                             |                                                                                                   |
+| `--button-padding`             | `padding`          | `16px 24px`         | padding of the upload button                            |                                                                                                   |
+| `--button-hover-text`          | `color`            | `#fff`              | text color of upload button on button hover             |                                                                                                   |
+| `--button-hover-background`    | `background`       | `#404040`           | background color of upload button on button hover       |                                                                                                   |
+| `--button-active-text`         | `color`            | `#fff`              | color of upload button text when button is active       |                                                                                                   |
+| `--button-active-background`   | `background`       | `#000000`           | background color of upload button when button is active | Applied via `:active` [pseudo selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:active) |
+| `--progress-bar-fill-color`    | `background`       | `#000000`           | background color for progress bar div                   |                                                                                                   |
+| `--progress-radial-fill-color` | `stroke`           | `black`             | stroke color for circle SVG (wip)                       |                                                                                                   |
 
@@ -162,0 +167,0 @@ - `<mux-uploader-drop/>`

src/index.ts

@@ -35,5 +35,5 @@ import '@mux/polyfills';
   background: var(--button-background-color, #fff);
-  border: 1px solid #000000;
+  border: var(--button-border, 1px solid #000000);
   color: #000000;
-  padding: 16px 24px;
+  padding: var(--button-padding, 16px 24px);
   border-radius: var(--button-border-radius, 4px);
@@ -225,5 +225,55 @@ -webkit-transition: all 0.2s ease;
 
-class MuxUploaderElement extends HTMLElement {
+type Endpoint = UpChunk.UpChunk['endpoint'] | undefined | null;
+
+type ErrorDetail = {
+  message: string;
+  chunkNumber?: number;
+  attempts?: number;
+};
+
+// NOTE: error and progress events are already determined on HTMLElement but have inconsistent types. Should consider renaming events (CJP)
+export interface MuxUploaderElementEventMap extends Omit<HTMLElementEventMap, 'error' | 'progress'> {
+  uploadstart: CustomEvent<{ file: File; chunkSize: number }>;
+  chunkattempt: CustomEvent<{
+    chunkNumber: number;
+    chunkSize: number;
+  }>;
+  chunksuccess: CustomEvent<{
+    chunk: number;
+    attempts: number;
+    // Note: This should be more explicitly typed in Upchunk. (TD).
+    response: any;
+  }>;
+  error: CustomEvent<ErrorDetail>;
+  progress: CustomEvent<number>;
+  success: CustomEvent<undefined | null>;
+}
+
+interface MuxUploaderElement extends HTMLElement {
+  addEventListener<K extends keyof MuxUploaderElementEventMap>(
+    type: K,
+    listener: (this: HTMLMediaElement, ev: MuxUploaderElementEventMap[K]) => any,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+  addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+  removeEventListener<K extends keyof MuxUploaderElementEventMap>(
+    type: K,
+    listener: (this: HTMLMediaElement, ev: MuxUploaderElementEventMap[K]) => any,
+    options?: boolean | EventListenerOptions
+  ): void;
+  removeEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | EventListenerOptions
+  ): void;
+}
+
+class MuxUploaderElement extends HTMLElement implements MuxUploaderElement {
   protected _formatProgress: ((percent: number) => string) | null | undefined;
   protected _filePickerButton: HTMLElement | null | undefined;
+  protected _endpoint: Endpoint;
   svgCircle: SVGCircleElement | null | undefined;
@@ -318,8 +368,14 @@ progressBar: HTMLElement | null | undefined;
 
-  get url() {
-    return this.getAttribute('url') as string;
+  get endpoint(): Endpoint {
+    return this.getAttribute('endpoint') ?? this._endpoint;
   }
 
-  set url(value: string) {
-    this.setAttribute('url', value);
+  set endpoint(value: Endpoint) {
+    if (value === this.endpoint) return;
+    if (typeof value === 'string') {
+      this.setAttribute('endpoint', value);
+    } else if (value == undefined) {
+      this.removeAttribute('endpoint');
+    }
+    this._endpoint = value;
   }
@@ -414,6 +470,6 @@
   handleUpload(evt: CustomEvent) {
-    const url = this.url;
+    const endpoint = this.endpoint;
 
-    if (!url) {
-      const invalidUrlMessage = 'No url attribute specified -- cannot handleUpload';
+    if (!endpoint) {
+      const invalidUrlMessage = 'No url or endpoint specified -- cannot handleUpload';
       if (this.statusMessage) {
@@ -424,3 +480,4 @@ this.statusMessage.innerHTML = invalidUrlMessage;
       console.error(invalidUrlMessage);
-      // Bail early if no url.
+      this.dispatchEvent(new CustomEvent('error', { detail: { message: invalidUrlMessage } }));
+      // Bail early if no endpoint.
       return;
@@ -438,7 +495,17 @@ } else {
     const upload = UpChunk.createUpload({
-      endpoint: url,
+      endpoint,
       file: evt.detail,
     });
 
-    upload.on('error', (err) => {
+    this.dispatchEvent(new CustomEvent('uploadstart', { detail: { file: upload.file, chunkSize: upload.chunkSize } }));
+
+    upload.on('attempt', (event) => {
+      this.dispatchEvent(new CustomEvent('chunkattempt', event));
+    });
+
+    upload.on('chunkSuccess', (event) => {
+      this.dispatchEvent(new CustomEvent('chunksuccess', event));
+    });
+
+    upload.on('error', (event) => {
       const errorMessage = 'An error has occurred';
@@ -452,9 +519,9 @@
 
-      console.error(err.detail.message);
-      this.dispatchEvent(new CustomEvent('error', err));
+      console.error(event.detail.message);
+      this.dispatchEvent(new CustomEvent('error', event));
     });
 
-    upload.on('progress', (progress) => {
-      this.setProgress(progress.detail);
-      this.dispatchEvent(new CustomEvent('progress', progress));
+    upload.on('progress', (event) => {
+      this.setProgress(event.detail);
+      this.dispatchEvent(new CustomEvent('progress', event));
     });
@@ -461,0 +528,0 @@

src/mux-uploader-drop.ts

@@ -60,2 +60,6 @@ import '@mux/polyfills';
       this.overlayText.innerHTML = newValue ?? '';
+    } else if (attributeName === 'active') {
+      if (this.getAttribute('overlay') && newValue != null) {
+        this._currentDragTarget = this;
+      }
     }
@@ -65,3 +69,3 @@ }
   static get observedAttributes() {
-    return [Attributes.OVERLAY_TEXT, Attributes.MUX_UPLOADER];
+    return [Attributes.OVERLAY_TEXT, Attributes.MUX_UPLOADER, 'active'];
   }
@@ -74,4 +78,7 @@
 
+  protected _currentDragTarget?: Node;
+
   setupDragEvents() {
     this.addEventListener('dragenter', (evt) => {
+      this._currentDragTarget = evt.target as Node;
       evt.preventDefault();
@@ -83,3 +90,6 @@ evt.stopPropagation();
     this.addEventListener('dragleave', (evt) => {
-      this.removeAttribute('active');
+      if (this._currentDragTarget === evt.target) {
+        this._currentDragTarget = undefined;
+        this.removeAttribute('active');
+      }
     });
@@ -86,0 +96,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

167

increased by3.09%

Worsened metrics

Total package byte prevSize

44231

decreased by-89.65%

Number of package files

8

decreased by-61.9%

Lines of code

614

decreased by-63.39%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes