Added pre-commit hook

- Using husky, execute pretty-quick on files staged for commit
- Updated the README_INTERNAL.md with dev environment set up steps
- Ran initial prettier (was surpised how few file were updated 😍)

Author: erikpena

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx pretty-quick --staged

.prettierignore

@@ -0,0 +1,5 @@
+coverage
+dist
+node_modules
+*.vscode*
+*.md

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "printWidth": 120,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": false,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "arrowParens": "always"
+}

README.md

@@ -37,7 +37,7 @@ yarn add [email protected]
 - A [Mux](https://mux.com) account
 - You will need both the **Access Token** and **Secret Key** scoped with "Full Access" permissions which can be created in the [Mux Dashboard](https://dashboard.mux.com/settings/access-tokens)
 - The **Webhook Signing Secret** which can be created in the [Mux Dashboard](https://dashboard.mux.com/settings/webhooks) (See the [Webhooks](#Webhooks) section for more info)
-- Tested with [Strapi](https://strapi.io/) v4.2.0 Community Edition
+- Tested with [Strapi](https://strapi.io/) v4.5.1 Community Edition
 
 ## ⚙️ Configuration
 
@@ -61,12 +61,16 @@ Where `{STRAPI_BASE_URL}` is the publicly accessible hostname of your [Strapi](h
 
 ## 🧑‍⚖️ Permissions
 
-Currently, anyone with "Super Admin" access to your [Strapi](https://strapi.io/) instance will be able to utilize the plugin for uploading and managing content.
+Currently, anyone with "Super Admin" access to your [Strapi](https://strapi.io/) instance will be able to utilize the plugin for uploading and managing content within the [Strapi](https://strapi.io/) CE version.  More sophisticated permissions can be defined for [Strapi](https://strapi.io/) Enterprise users using [RBAC](https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/optional/rbac.html#declaring-new-conditions).
+
+**Please note**: End Users can only have read operation permissions (`find`, `findOne` and `count`).  Write operations are not supported due to potential security reasons. 
 
 ## 🤝 Contributing
 
 Contributions, issues and feature requests are welcome!
 
+Developers for this plugin should take a look at the `README_INTERNAL.md` document for details on setting up dev environments. 
+
 If you encounter an error or have questions, please feel free to file inquiries on the [Issues](https://github.com/muxinc/strapi-plugin-mux-video-uploader/issues) page for `strapi-plugin-mux-video-uploader`.
 
 ## 🗣 FAQ

README_INTERNAL.md

@@ -1,10 +1,29 @@
+# Setting up your dev environment
+
+Start by installing the (dev) dependencies—
+
+```
+% yarn install
+```
+
+Initialize [Husky](https://www.npmjs.com/package/husky) to get the pre-commit hook binary installed on your local development workstation— 
+
+```
+% yarn prepare
+```
+
+When testing your builds with Strapi, it is best to compile the Typescript and use the JavaScript output in the `./dist` directory as your candidate (this is ultimately what is published to NPM).  Generating a build can be done by running the following command—
+
+```
+% yarn build
+```
+
 # Releasing
 
 1. Merge feature branches, bug fixes, and whatever changes into `master` after CI passes and PRs are approved
 1. Create a new branch off `master` when you're ready to release a new version
 1. On this branch run `npm version [...]` (see `npm-version` [docs](https://docs.npmjs.com/cli/v7/commands/npm-version) for more info) which will bump the version in `package.json` and make a tag (for example `npm version patch -m "Bump for 3.1.2"`). Follow [SemVer rules](https://semver.org/) for patch/minor/major.
 1. Push the version commit and the tag `git push && git push --tags origin`
 1. Open Pull Request, "Rebase and merge" after approved
-1. Create a new release in the Github UI, give the release a name and add release notes (creating the release will kick off npm publish)
+1. Create a new release in the Github UI, give the release a name and add release notes (creating the release will kick off npm publish using Github Actions)
 1. Checkout the `master` branch and pull the latest by running `git checkout master && git pull`
-1. Publish the new version to npmjs.com using the `npm publish` command

admin/src/components/preview-player/index.tsx

@@ -14,11 +14,11 @@ const MuxPlayerStyled = styled(MuxPlayer)`
   width: 100%;
 `;
 
-const PreviewPlayer = (props:Props) => {
+const PreviewPlayer = (props: Props) => {
   const { muxAsset } = props;
 
-  if(muxAsset === undefined || !muxAsset.playback_id) return null;
-  
+  if (muxAsset === undefined || !muxAsset.playback_id) return null;
+
   const posterUrl = getThumbnail(muxAsset.playback_id);
 
   return (
@@ -30,7 +30,7 @@ const PreviewPlayer = (props:Props) => {
         video_title: muxAsset.title,
         player_name: 'Strapi Admin Dashboard',
         player_version: pluginPkg.version,
-        page_type: 'Preview Player'
+        page_type: 'Preview Player',
       }}
       streamType="on-demand"
     />

package.json

@@ -26,7 +26,8 @@
     "build": "yarn clean && tsc && yarn copy-files",
     "clean": "rimraf dist/",
     "copy-files": "copyfiles README.md yarn.lock dist/",
-    "dev": "tsc --watch"
+    "dev": "tsc --watch",
+    "prepare": "husky install"
   },
   "dependencies": {
     "@mux/mux-node": "^6.4.0",
@@ -55,6 +56,9 @@
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.25",
     "copyfiles": "^2.4.1",
+    "husky": "^8.0.2",
+    "prettier": "^2.7.1",
+    "pretty-quick": "^3.1.3",
     "rimraf": "^3.0.2",
     "typescript": "^4.7.4"
   },

server/controllers/mux.ts

@@ -14,20 +14,19 @@ const { Webhooks } = Mux;
 
 const model = `plugin::${pluginId}.mux-asset`;
 
-const resolveMuxAssets = async (filters:MuxAssetFilter) => {
+const resolveMuxAssets = async (filters: MuxAssetFilter) => {
   const params = { filters };
-  
+
   const muxAssets = await strapi.entityService.findMany(model, params);
 
   if (muxAssets.length === 1) {
     return muxAssets[0];
-  }
-  else {
+  } else {
     throw new Error('Unable to resolve mux-asset');
   }
 };
 
-const processWebhookEvent = async (webhookEvent:any) => {
+const processWebhookEvent = async (webhookEvent: any) => {
   const { type, data } = webhookEvent;
 
   switch (type) {
@@ -36,8 +35,8 @@ const processWebhookEvent = async (webhookEvent:any) => {
       return [
         muxAsset.id,
         {
-          data: { asset_id: data.asset_id }
-        }
+          data: { asset_id: data.asset_id },
+        },
       ];
     }
     case 'video.asset.ready': {
@@ -49,9 +48,9 @@ const processWebhookEvent = async (webhookEvent:any) => {
             playback_id: data.playback_ids[0].id,
             duration: data.duration,
             aspect_ratio: data.aspect_ratio,
-            isReady: true
-          }
-        }
+            isReady: true,
+          },
+        },
       ];
     }
     case 'video.asset.errored': {
@@ -60,56 +59,54 @@ const processWebhookEvent = async (webhookEvent:any) => {
         muxAsset.id,
         {
           data: {
-            error_message: `${data.errors.type}: ${data.errors.messages[0] || ''}`
-          }
-        }
+            error_message: `${data.errors.type}: ${data.errors.messages[0] || ''}`,
+          },
+        },
       ];
     }
-    default: return undefined;
+    default:
+      return undefined;
   }
-}
+};
 
 // Do not go gentle into that good night,
 // Old age should burn and rave at close of day;
 // Rage, rage against the dying of the light.
 const thumbnail = async (ctx: Context) => {
   const { playbackId } = ctx.params;
 
-  const response = await axios.get(
-    `https://image.mux.com/${playbackId}/thumbnail.png`,
-    {
-      params: ctx.query,
-      responseType: 'stream'
-    }
-  );
+  const response = await axios.get(`https://image.mux.com/${playbackId}/thumbnail.png`, {
+    params: ctx.query,
+    responseType: 'stream',
+  });
 
   ctx.response.set('content-type', response.headers['content-type']);
   ctx.body = response.data;
 };
 
-const submitDirectUpload = async (ctx:Context) => {
+const submitDirectUpload = async (ctx: Context) => {
   const { title, origin } = ctx.request.body;
 
-  const cors = origin || ctx.request.header.origin
+  const cors = origin || ctx.request.header.origin;
 
   const result = await getService('mux').getDirectUploadUrl(cors);
 
   const data = {
     title,
-    upload_id: result.id
+    upload_id: result.id,
   };
 
   await strapi.entityService.create(model, { data });
 
   ctx.send(result);
 };
 
-const submitRemoteUpload = async (ctx:Context) => {
+const submitRemoteUpload = async (ctx: Context) => {
   const { body } = ctx.request;
 
-  if(!body.url) {
-    ctx.badRequest("ValidationError", { errors: { "url": ["url cannot be empty"]}});
-    
+  if (!body.url) {
+    ctx.badRequest('ValidationError', { errors: { url: ['url cannot be empty'] } });
+
     return;
   }
 
@@ -118,7 +115,7 @@ const submitRemoteUpload = async (ctx:Context) => {
   const data = {
     asset_id: result.id,
     title: body.title,
-    url: body.url
+    url: body.url,
   };
 
   const response = await strapi.entityService.create(model, { data });
@@ -129,8 +126,8 @@ const submitRemoteUpload = async (ctx:Context) => {
 const deleteMuxAsset = async (ctx: Context) => {
   const { id, delete_on_mux } = ctx.request.body;
 
-  if(!id) {
-    ctx.badRequest("ValidationError", { errors: { "id": ["id needs to be defined"]}});
+  if (!id) {
+    ctx.badRequest('ValidationError', { errors: { id: ['id needs to be defined'] } });
 
     return;
   }
@@ -165,26 +162,29 @@ const deleteMuxAsset = async (ctx: Context) => {
   ctx.send(result);
 };
 
-const muxWebhookHandler = async (ctx:Context) => {
+const muxWebhookHandler = async (ctx: Context) => {
   const body = ctx.request.body;
   const sigHttpHeader = ctx.request.headers['mux-signature'];
 
   const config = await Config.getConfig('general');
 
-  if(sigHttpHeader === undefined || sigHttpHeader === '' || (Array.isArray(sigHttpHeader) && sigHttpHeader.length < 0)) {
+  if (
+    sigHttpHeader === undefined ||
+    sigHttpHeader === '' ||
+    (Array.isArray(sigHttpHeader) && sigHttpHeader.length < 0)
+  ) {
     ctx.throw(401, 'Webhook signature is missing');
   }
-  
-  if(Array.isArray(sigHttpHeader) && sigHttpHeader.length > 1) {
+
+  if (Array.isArray(sigHttpHeader) && sigHttpHeader.length > 1) {
     ctx.throw(401, 'we have an unexpected amount of signatures');
   }
 
   let sig;
 
-  if(Array.isArray(sigHttpHeader)){
+  if (Array.isArray(sigHttpHeader)) {
     sig = sigHttpHeader[0];
-  }
-  else{
+  } else {
     sig = sigHttpHeader;
   }
 
@@ -193,7 +193,7 @@ const muxWebhookHandler = async (ctx:Context) => {
   // Koa.js request (the middleware used for parsing requests).
 
   // let isSigValid;
-  
+
   // try {
   //   isSigValid = Webhooks.verifyHeader(JSON.stringify(body), sig, config.webhook_signing_secret);
   // } catch(err) {
@@ -219,5 +219,5 @@ export = {
   submitRemoteUpload,
   deleteMuxAsset,
   muxWebhookHandler,
-  thumbnail
+  thumbnail,
 };

server/services/mux.ts

@@ -3,7 +3,7 @@ import { RequestOptions } from '@mux/mux-node/dist/RequestOptions';
 import { Asset, Upload } from '@mux/mux-node/dist/video/domain';
 
 import pluginPkg from './../../package.json';
-import { Config } from "./../utils";
+import { Config } from './../utils';
 
 export interface MuxService {
   getAssetById: (assetId: string) => Promise<Asset>;
@@ -15,47 +15,47 @@ export interface MuxService {
 
 const getMuxClient = async () => {
   const { access_token, secret_key } = await Config.getConfig('general');
-  const options:RequestOptions = { platform: { name: 'Strapi CMS', version: pluginPkg.version } };
+  const options: RequestOptions = { platform: { name: 'Strapi CMS', version: pluginPkg.version } };
 
   return new Mux(access_token, secret_key, options);
-}
+};
 
 export default ({ strapi }: { strapi: any }) => ({
   async getAssetById(assetId: string): Promise<Asset> {
     const { Video } = await getMuxClient();
 
     return await Video.Assets.get(assetId);
   },
-  async getAssetByUploadId(uploadId:string): Promise<Asset> {
+  async getAssetByUploadId(uploadId: string): Promise<Asset> {
     const { Video } = await getMuxClient();
 
     const assets = await Video.Assets.list({ upload_id: uploadId });
 
     return assets[0];
   },
-  async getDirectUploadUrl(corsOrigin:string = "*"): Promise<Upload> {
+  async getDirectUploadUrl(corsOrigin: string = '*'): Promise<Upload> {
     const { Video } = await getMuxClient();
 
     return Video.Uploads.create({
       cors_origin: corsOrigin,
       new_asset_settings: {
-        playback_policy: ['public']
-      }
+        playback_policy: ['public'],
+      },
     });
   },
-  async createAsset(url:string): Promise<Asset> {
+  async createAsset(url: string): Promise<Asset> {
     const { Video } = await getMuxClient();
 
     return Video.Assets.create({
       input: url,
-      playback_policy: ['public']
+      playback_policy: ['public'],
     });
   },
-  async deleteAsset(assetId:string): Promise<boolean> {
+  async deleteAsset(assetId: string): Promise<boolean> {
     const { Video } = await getMuxClient();
 
     await Video.Assets.del(assetId);
-    
+
     return true;
-  }
+  },
 });