make it easier to set up

Author: mmcc

contentful-uploader/.env.example

@@ -0,0 +1,2 @@
+MUX_ACCESS_TOKEN_ID=your-access-token-id
+MUX_ACCESS_TOKEN_SECRET=your-access-token-secret

contentful-uploader/README.md

@@ -4,6 +4,8 @@
 
 A Contentful UI extension that makes it simple to add beautiful streaming via [Mux](https://https://mux.com) to your [Contentful](https://contentful.com) project. Just install the extension, add the component to your content model, and you're good to go! 🙌🏾
 
+Before getting started, make sure to generate a new [Access Token](https://dashboard.mux.com/settings/access-tokens). To make installation a little easier later, you can save the generated environment file as `.env` in this directory. If you're going to install the plugin [via the interface](#install-via-the-contentful-interface), just keep the token ID and secret handy.
+
 ## Install via the CLI
 
 Make sure you have the Contentful CLI installed:
@@ -27,7 +29,7 @@ contentful space use
 To install the UI Extension:
 
 ```
-contentful extension create
+npm run install-extension
 ```
 
 To update the UI Extension:
@@ -37,3 +39,40 @@ contentful extension update --force
 ```
 
 Note: by default this installs the hosted version of our extension. If you'd like to self-host this extension, you may update `extension.json` to use your own `src`, but keep in mind you'll need to have your own solution for handling CORS requests.
+
+## Install via the Contentful interface
+
+Navigation to Space settings > Extensions, then click "Add new".
+
+Make sure `src` is checked, then set the value to `https://contentful.mux.dev/extension`.
+
+## Setting up your content model
+
+Create a new JSON field in the model you'd like to add Video to. Name the field something useful and descriptive like, for example "Mux Asset".
+
+Click on the "Appearance" tab.
+
+Select "Mux Contentful Uploader"
+
+![Uploader Appearance](screenshots/contentful-appearance.png)
+
+Congratulations, now you've got your very own best-in-class video platform! 🤘🏻
+
+## Using your new Video field in clients
+
+The Mux Asset JSON object you'll get in your clients will look like this:
+
+```
+{
+  "uploadId": "some-upload-id",
+  "assetId": "some-asset-id",
+  "playbackId": "a-public-playback-id"
+  "ready": true
+}
+```
+
+Both `uploadId` and `assetId` are things we need to manage the asset in the Mux API. `playbackId` is what you'll use in your player. If you want help setting up a player, we have a set of [guides](https://docs.mux.com/docs/playback) to help you get started.
+
+## Talk to us!
+
+This extension was made with 💖 by the folks from [Mux](https://mux.com). If you have any questions or feedback, [let us know](mailto:[email protected])!

contentful-uploader/extension.json

@@ -1,7 +1,7 @@
 {
   "id": "mux-contentful-uploader",
   "name": "Mux Contentful Uploader",
-  "src": "https://contentful.mux.dev",
+  "src": "https://contentful.mux.dev/extension",
   "fieldTypes": ["Object"],
   "parameters": {
     "installation": [

contentful-uploader/now.json

@@ -2,10 +2,6 @@
   "version": 2,
   "alias": "contentful.mux.dev",
   "builds": [
-    {
-      "src": "/static-styles/*.css",
-      "use": "@now/static"
-    },
     {
       "src": "*.md",
       "use": "@now/md",
@@ -18,7 +14,7 @@
             "content": "Add beautiful video streaming to your Contentful dashboard! Mux Video extension that's installed in minutes"
           }
         ],
-        "css": ["/static-styles/base.css", "/static-styles/mux.css"]
+        "css": ["https://static.mux.com/css/mux-markdown.css"]
       }
     },
     {

contentful-uploader/package.json

@@ -37,7 +37,8 @@
     "login": "contentful login",
     "logout": "contentful logout",
     "help": "contentful-extension-scripts help",
-    "now-build": "npm run build"
+    "now-build": "npm run build",
+    "install-extension": "eval `cat .env` && contentful extension create --installation-parameters '{\"muxAccessTokenId\": \"'$MUX_TOKEN_ID'\", \"muxAccessTokenSecret\": \"'$MUX_TOKEN_SECRET'\"}'"
   },
   "browserslist": [
     "last 5 Chrome version",

contentful-uploader/screenshots/contentful-appearance.png

@@ -28,7 +28,7 @@ interface MuxContentfulObject {
 interface AppState {
   value?: MuxContentfulObject;
   uploadProgress?: number;
-  uploadError?: string;
+  error: string | false;
 }
 
 class App extends React.Component<AppProps, AppState> {
@@ -37,8 +37,6 @@ class App extends React.Component<AppProps, AppState> {
     headers: Headers;
   };
 
-  configured: boolean;
-
   constructor(props: AppProps) {
     super(props);
 
@@ -48,15 +46,16 @@ class App extends React.Component<AppProps, AppState> {
       muxAccessTokenSecret: string;
     };
 
-    this.configured = (!!muxAccessTokenId && !!muxAccessTokenSecret);
-
     this.muxBaseReqOptions = {
       mode: 'cors',
       headers: this.requestHeaders(muxAccessTokenId, muxAccessTokenSecret),
     };
 
     this.state = {
       value: props.sdk.field.getValue(),
+      error:
+        (!muxAccessTokenId || !muxAccessTokenSecret) &&
+        "It doesn't look like you've specified your Mux Access Token ID or Secret in the extension configuration.",
     };
   }
 
@@ -93,10 +92,7 @@ class App extends React.Component<AppProps, AppState> {
 
   requestHeaders = (tokenId: string, tokenSecret: string) => {
     let headers = new Headers();
-    headers.set(
-      'Authorization',
-      'Basic ' + btoa(`${tokenId}:${tokenSecret}`)
-    );
+    headers.set('Authorization', 'Basic ' + btoa(`${tokenId}:${tokenSecret}`));
     headers.set('Content-Type', 'application/json');
 
     return headers;
@@ -117,6 +113,12 @@ class App extends React.Component<AppProps, AppState> {
       method: 'POST',
     });
 
+    if (res.status === 401) {
+      throw Error(
+        'Looks like something is wrong with the Mux Access Token specified in the config. Are you sure the token ID and secret in the extension settings match the access token you created?'
+      );
+    }
+
     const { data: muxUpload } = await res.json();
 
     await this.props.sdk.field.setValue({
@@ -126,27 +128,33 @@ class App extends React.Component<AppProps, AppState> {
     return muxUpload.url;
   };
 
-  onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  onChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.currentTarget.files && e.currentTarget.files[0];
     this.setState({ uploadProgress: 1 });
 
     if (!file) {
       throw Error("Looks like a file wasn't selected");
     }
 
-    const upload = createUpload({
-      file,
-      endpoint: this.getUploadUrl,
-      chunkSize: 5120, // Uploads the file in ~5mb chunks
-    });
+    try {
+      const endpoint = await this.getUploadUrl();
 
-    upload.on('error', this.onUploadError);
-    upload.on('progress', this.onUploadProgress);
-    upload.on('success', this.onUploadSuccess);
+      const upload = createUpload({
+        file,
+        endpoint,
+        chunkSize: 5120, // Uploads the file in ~5mb chunks
+      });
+
+      upload.on('error', this.onUploadError);
+      upload.on('progress', this.onUploadProgress);
+      upload.on('success', this.onUploadSuccess);
+    } catch (error) {
+      this.setState({ error: error.message });
+    }
   };
 
   onUploadError = (progress: CustomEvent) => {
-    this.setState({ uploadError: progress.detail });
+    this.setState({ error: progress.detail });
   };
 
   onUploadProgress = (progress: CustomEvent) => {
@@ -216,15 +224,8 @@ class App extends React.Component<AppProps, AppState> {
   };
 
   render = () => {
-    if (!this.configured) {
-      return (
-        <Note noteType={Note.Type.NEGATIVE}>It doesn't look like you've specified your Mux Access Token ID or Secret in the extension configuration.</Note>
-      );
-    }
-    if (this.state.uploadError) {
-      return (
-        <Note noteType={Note.Type.NEGATIVE}>{this.state.uploadError}</Note>
-      );
+    if (this.state.error) {
+      return <Note noteType={Note.Type.NEGATIVE}>{this.state.error}</Note>;
     }
 
     if (this.state.value) {