fix(mux-uploader): Refactor so that drop can only be done with mux-up…

…loader-drop.
muxinc · Jul 8, 2022 · 59ddb56 · 59ddb56
1 parent dfe24c3
commit 59ddb56
Show file tree

Hide file tree

Showing 10 changed files with 55 additions and 110 deletions.
diff --git a/examples/create-react-app-with-typescript/src/pages/MuxUploader.tsx b/examples/create-react-app-with-typescript/src/pages/MuxUploader.tsx
@@ -27,7 +27,6 @@ function MuxUploaderPage() {
         <MuxUploader
           url={url}
           type="bar"
-          disableDrop
           status
         />
       </div>

diff --git a/examples/nextjs-with-typescript/pages/MuxUploader.tsx b/examples/nextjs-with-typescript/pages/MuxUploader.tsx
@@ -11,35 +11,25 @@ function MuxUploaderPage() {
   }
 
   return (
-    <div
-      style={{
-        display: "flex",
-        flexFlow: "column",
-        height: "100vh",
-        width: "100vw",
-      }}
-    >
+    <MuxUploaderDrop style={{ display: "flex", flexFlow: "column", height: "100vh", width: "100vw",backgroundColor: "pink" }} mux-uploader="uploader">
       <h1>MuxUploader with MuxUploaderDrop Demo</h1>
       <h2>Enter your upload GCS url:</h2>
       <input type="text" style={{ padding: "8px 12px", marginBottom: "20px", width: "400px" }} placeholder="https://storage.googleapis.com/..." onChange={handleChange} />
 
       <div style={{ flexGrow: 1, flexShrink: 1, height: "400px" }}>
-        <MuxUploader
-          url={url}
-          type="bar"
-          disableDrop
-          status
-        >
-          /** @todo Re-implement after refactor. */
-          {/* <MuxUploaderDrop slot="dropzone" text="Upload to the interwebs" fullscreen overlay /> */}
-        </MuxUploader>
+          <MuxUploader
+            id="uploader"
+            url={url}
+            type="bar"
+            status
+          />
       </div>
       <h3 className="title">
         <Link href="/">
           <a>Browse Elements</a>
         </Link>
       </h3>
-    </div>
+    </MuxUploaderDrop>
   );
 }
 

diff --git a/examples/vanilla-ts-esm/public/mux-uploader-full.html b/examples/vanilla-ts-esm/public/mux-uploader-full.html
@@ -72,10 +72,15 @@
       mux-uploader[upload-in-progress] {
         min-width: 250px;
       }
+
+      mux-uploader-drop {
+        height: 100vh;
+        width: 100vw;
+      }
     </style>
   </head>
   <body>
-    <mux-uploader-drop mux-uploader="uploader"class="container">
+    <mux-uploader-drop mux-uploader="uploader" class="container">
         <main>
           <section class="info">
             <header>

diff --git a/examples/vanilla-ts-esm/public/mux-uploader-widget.html b/examples/vanilla-ts-esm/public/mux-uploader-widget.html
@@ -33,19 +33,12 @@
 
       .widget {
         margin-bottom: 30px;
-        padding: 20px;
         height: 250px;
         width: 500px;
         border-radius: 20px;
         background-color: #f9f9f9;
         box-sizing: border-box;
         box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        position: relative;
       }
 
       header {
@@ -85,6 +78,17 @@
       mux-uploader[upload-in-progress] {
         width: inherit;
       }
+
+      mux-uploader-drop {
+        box-sizing: border-box;
+        padding: 20px;
+        height: 100%;
+        width: 100%;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
     </style>
   </head>
   <body>
@@ -96,8 +100,10 @@ <h2>Enter your upload GCS url:</h1>
       <div class="dashboard">
         <div class="widget"></div>
         <div class="widget">
-          <mux-uploader type="bar" disable-drop status>
+        <mux-uploader-drop mux-uploader="uploader">
+          <mux-uploader type="bar" id="uploader" status>
           </mux-uploader>
+        </mux-uploader-drop>
         </div>
         <div class="widget"></div>
         <div class="widget"></div>

diff --git a/packages/mux-uploader-react/README.md b/packages/mux-uploader-react/README.md
@@ -48,16 +48,16 @@ const MuxUploaderWithMuxUploaderDropExample = () => {
   return (
     <div>
       <h1>Simple MuxUploader and Mux Uploader Drop Examples</h1>
-      {/* Upload button by itself with default drag an drop scoped to the space it takes up. Displays upload progress in text as percentage. */}
+      {/* Upload button by itself. Displays upload progress in text as percentage. */}
       <MuxUploader url="authenticated-url" type="bar" status></MuxUploader>
 
-      {/* Upload button by itself with drag an drop disabled. Does not display text percentage. */}
-      <MuxUploader url="authenticated-url" type="bar" disableDrop></MuxUploader>
+      {/* Upload button by itself. Does not display text percentage. */}
+      <MuxUploader url="authenticated-url" type="bar"></MuxUploader>
 
-      {/* Upload button with access to additional drag and drop features via slots i.e. fullscreen drag and drop with text overlay (work-in-progress). */}
-      <MuxUploader url="authenticated-url">
-        <MuxUploaderDrop slot="dropzone" text="Upload to stream.new" fullscreen overlay></MuxUploaderDrop>
-      </MuxUploader>
+      {/* Upload button with access to optional supplentary drag and drop features. */}
+      <MuxUploaderDrop mux-uploader="uploader">
+        <MuxUploader url="authenticated-url" id="uploader"></MuxUploader>
+      </MuxUploaderDrop>
     </div>
   );
 };
@@ -70,19 +70,19 @@ const MuxUploaderWithMuxUploaderDropExample = () => {
 | 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 `MuxUploaderDrop` to locate `MuxUploader`. Not necessary unless the unlikely scenario you need to nest `MuxUploader` inside `MuxUploaderDrop`.                                                          | N/A         |
+| `id`               | `string`  | An ID that allows `MuxUploaderDrop` to locate `MuxUploader`. Required if you use `MuxUploaderDrop.                                                                                                                        | N/A         |
 | `type`             | `"bar"`   | Specifies the visual type of progress bar. A radial type is in-progress.                                                                                                                                                  | "bar"       |
 | `uploadInProgress` | `boolean` | Toggles visual status of progress bar while upload is in progress.                                                                                                                                                        | false       |
 | `uploadError`      | `boolean` | Toggles visual status of progress bar when upload encounters an 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       |
 
 #### `MuxUploaderDrop`
 
-| Attribute      | Type      | Description                                            | Default |
-| -------------- | --------- | ------------------------------------------------------ | ------- |
-| `fullscreen`   | `boolean` | Toggles fullscreen drag and drop (work-in-progress).   | false   |
-| `overlay`      | `boolean` | Toggles fullscreen overlay on dragover.                | false   |
-| `disableDrop ` | `boolean` | Toggles off drag and drop which is enabled by default. | false   |
+| Attribute      | Type      | Description                                          | Default |
+| -------------- | --------- | ---------------------------------------------------- | ------- |
+| `fullscreen`   | `boolean` | Toggles fullscreen drag and drop (work-in-progress). | false   |
+| `overlay`      | `boolean` | Toggles fullscreen overlay on dragover.              | false   |
+| `mux-uploader` | `string ` | Must match the `id` on `MuxUploader`. Required.      | N/A     |
 
 ### Methods
 

diff --git a/packages/mux-uploader-react/src/index.tsx b/packages/mux-uploader-react/src/index.tsx
@@ -14,7 +14,6 @@ export type MuxUploaderProps = {
   id?: string;
   type?: string;
   status?: boolean;
-  disableDrop?: boolean;
   style?: CSSProperties;
   children?: React.ReactNode;
 };
@@ -30,13 +29,13 @@ const useUploader = (
   React.MutableRefObject<MuxUploaderElement | null> | null | undefined,
   props: MuxUploaderProps
 ) => {
-  const { url, id, type, status, disableDrop, ...remainingProps } = props;
+  const { url, id, type, status, ...remainingProps } = props;
 
   return [remainingProps];
 };
 
 const MuxUploader = React.forwardRef<MuxUploaderRefAttributes, MuxUploaderProps>((props, ref) => {
-  const { url, id, type, status, disableDrop } = props;
+  const { url, id, type, status } = props;
 
   const innerUploaderRef = useRef<MuxUploaderElement>(null);
   const uploaderRef = useCombinedRefs(innerUploaderRef, ref);
@@ -49,7 +48,6 @@ const MuxUploader = React.forwardRef<MuxUploaderRefAttributes, MuxUploaderProps>
       id={id}
       type={type}
       status={status}
-      disableDrop={disableDrop}
       {...remainingProps}
     />
   );

diff --git a/packages/mux-uploader-react/src/mux-uploader-drop.tsx b/packages/mux-uploader-react/src/mux-uploader-drop.tsx
@@ -13,8 +13,8 @@ export type MuxUploaderDropProps = {
   fullscreen?: boolean;
   overlay?: boolean;
   text?: string;
-  disableDrop?: boolean;
   style?: CSSProperties;
+  children?: React.ReactNode;
 };
 
 const MuxUploaderDropInternal = React.forwardRef<MuxUploaderDropRefAttributes, MuxUploaderDropProps>(
@@ -28,13 +28,13 @@ const useUploaderDrop = (
   React.MutableRefObject<MuxUploaderDropElement | null> | null | undefined,
   props: MuxUploaderDropProps
 ) => {
-  const { fullscreen, overlay, text, disableDrop, ...remainingProps } = props;
+  const { fullscreen, overlay, text, ...remainingProps } = props;
 
   return [remainingProps];
 };
 
 const MuxUploaderDrop = React.forwardRef<MuxUploaderDropRefAttributes, MuxUploaderDropProps>((props, ref) => {
-  const { fullscreen, overlay, text, disableDrop } = props;
+  const { fullscreen, overlay, text } = props;
 
   const innerUploaderDropRef = useRef<MuxUploaderDropElement>(null);
   const uploaderDropRef = useCombinedRefs(innerUploaderDropRef, ref);
@@ -46,7 +46,6 @@ const MuxUploaderDrop = React.forwardRef<MuxUploaderDropRefAttributes, MuxUpload
       fullscreen={fullscreen}
       overlay={overlay}
       text={text}
-      disableDrop={disableDrop}
       {...remainingProps}
     />
   );

diff --git a/packages/mux-uploader/README.md b/packages/mux-uploader/README.md
@@ -98,22 +98,24 @@ The `mux-uploader`, whether you use `mux-uploader-drop` and its additional featu
 | 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`. Not necessary unless the unlikely scenario you need to nest `mux-uploader` inside `mux-uploader-drop`.                                                    | N/A         |
+| `id`                 | `string`  | An ID that allows `MuxUploaderDrop` to locate `MuxUploader`. Required if you use `MuxUploaderDrop.                                                                                                                        | N/A         |
 | `type`               | `"bar"`   | Specifies the visual type of progress bar. A radial type is in-progress.                                                                                                                                                  | "bar"       |
 | `upload-in-progress` | `boolean` | 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` | 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       |
 
 #### `mux-uploader-drop`
 
-| Attribute       | Type      | Description                                            | Default |
-| --------------- | --------- | ------------------------------------------------------ | ------- |
-| `fullscreen`    | `boolean` | Toggles fullscreen drag and drop (work-in-progress).   | false   |
-| `overlay`       | `boolean` | Toggles fullscreen overlay on dragover.                | false   |
-| `disable-drop ` | `boolean` | Toggles off drag and drop which is enabled by default. | false   |
+| Attribute      | Type      | Description                                          | Default |
+| -------------- | --------- | ---------------------------------------------------- | ------- |
+| `fullscreen`   | `boolean` | Toggles fullscreen drag and drop (work-in-progress). | false   |
+| `overlay`      | `boolean` | Toggles fullscreen overlay on dragover.              | false   |
+| `mux-uploader` | `string ` | Must match the `id` on `MuxUploader`. Required.      | N/A     |
 
 ### Methods
 
+#### `mux-uploader`
+
 | Method           | Description                 |
 | ---------------- | --------------------------- |
 | `handleUpload()` | Begins upload of the media. |

diff --git a/packages/mux-uploader/src/index.ts b/packages/mux-uploader/src/index.ts
@@ -206,10 +206,6 @@ template.innerHTML = `
     />
   <svg>
 </div>
-
-<slot name="dropzone">
-  <mux-uploader-drop></mux-uploader-drop>
-</slot>
 `;
 
 // Note: Use "bar" for now since the CSS for radial is WIP. (TD).
@@ -260,16 +256,6 @@ class MuxUploaderElement extends HTMLElement {
     this.setupFilePickerButton();
     this.setupRetry();
     this.setupDropHandler();
-
-    // TO-DO: Might want to standardize if we prefer to have users disable or enable things. (TD).
-    // Edge case: User wants to use the uploader without drag.
-    // Because we slot a default mux-uploader-drop if they don't slot one,
-    // in order to disable drop, the user has to pass disable-drop to mux-uploader and mux-uploader-drop
-    // must apply it in order to disable the drop. It currently requires you to explicit pass "true".
-    if (this.hasAttribute('disable-drop')) {
-      const muxUploaderDrop = this.shadowRoot?.querySelector('mux-uploader-drop');
-      muxUploaderDrop?.setAttribute('disable-drop', '');
-    }
   }
 
   disconnectedCallback() {

diff --git a/packages/mux-uploader/src/mux-uploader-drop.ts b/packages/mux-uploader/src/mux-uploader-drop.ts
@@ -4,25 +4,9 @@ const template = document.createElement('template');
 /** @todo: If any styling is here for the mux-uploader descendant use case, move those styles to mux-uploader def (CJP) */
 template.innerHTML = `
 <style>
-  /* These styles simulate a user passing these via props. Until
-     that's implemented, we just hardcode it for non-full-screen demo purposes. (TD).
-  */
-  /* .dropzone {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 100%;
-    width: 100%;
-  }
 
   /* TO-DO: Make default dropzone hover more apparent. (TD).*/
 
-  :host([disable-drop]) .dropzone {
-    display: none;
-  }
-
   .overlay {
     display: none;
   }
@@ -69,7 +53,7 @@ template.innerHTML = `
   */
 </style>
 
-<div class="dropzone" id="dropzone">
+<div id="dropzone">
   <slot></slot>
   <div class="overlay" id="overlay">
     <h1 id="overlay-text"></h1>
@@ -108,30 +92,6 @@ class MuxUploaderDropElement extends HTMLElement {
     return uploaderId ? document.getElementById(uploaderId) : null;
   }
 
-  /* TO-DO: Maybe use something like this from player so allow users to fully customize the dropzone
-     without having to make a ton of CSS variables available i.e. position absolute. (TD).
-
-  kebabCase(string: String) {
-    return string.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
-  }
-
-  stylePropsToString(props: any) {
-    let style = '';
-    Object.entries(props).forEach(([key, value]) => {
-      style += `${this.kebabCase(key)}: ${value}; `;
-    });
-    return style ? style.trim() : undefined;
-  }
-  
-
-  customizeDropzone() {
-    if(this.getAttribute('props')) {
-      // change .dropzone to use styles returned from stylePropsToString;
-      // this.setClass('dropzone', this.stylePropsToString(this.getAttribute('props')));
-    }
-  }
-  */
-
   setupDragEvents() {
     this.addEventListener('dragenter', (evt) => {
       evt.preventDefault();