Screenshotbase - New Action (#18752)

* new component

* pnpm-lock.yaml

* update

* updates

Author: michelle0927

components/screenshotbase/actions/take-screenshot/take-screenshot.mjs

@@ -0,0 +1,100 @@
+import screenshotbase from "../../screenshotbase.app.mjs";
+import { ConfigurationError } from "@pipedream/platform";
+import fs from "fs";
+
+export default {
+  key: "screenshotbase-take-screenshot",
+  name: "Take a Screenshot",
+  description: "Take a screenshot with ScreenshotBase. [See the documentation](https://screenshotbase.com/docs/take)",
+  version: "0.0.1",
+  type: "action",
+  annotations: {
+    destructiveHint: false,
+    openWorldHint: true,
+    readOnlyHint: false,
+  },
+  props: {
+    screenshotbase,
+    url: {
+      propDefinition: [
+        screenshotbase,
+        "url",
+      ],
+    },
+    format: {
+      propDefinition: [
+        screenshotbase,
+        "format",
+      ],
+    },
+    filename: {
+      propDefinition: [
+        screenshotbase,
+        "filename",
+      ],
+    },
+    quality: {
+      propDefinition: [
+        screenshotbase,
+        "quality",
+      ],
+    },
+    fullPage: {
+      propDefinition: [
+        screenshotbase,
+        "fullPage",
+      ],
+    },
+    viewportWidth: {
+      propDefinition: [
+        screenshotbase,
+        "viewportWidth",
+      ],
+    },
+    viewportHeight: {
+      propDefinition: [
+        screenshotbase,
+        "viewportHeight",
+      ],
+    },
+    syncDir: {
+      type: "dir",
+      accessMode: "write",
+      sync: true,
+    },
+  },
+  async run({ $ }) {
+    if (this.quality && this.format !== "jpg" && this.format !== "jpeg") {
+      throw new ConfigurationError("**Quality** is only supported when the format is `jpg` or `jpeg`");
+    }
+
+    try {
+      const response = await this.screenshotbase.takeScreenshot({
+        $,
+        params: {
+          url: this.url,
+          format: this.format,
+          quality: this.quality,
+          full_page: this.fullPage
+            ? 1
+            : undefined,
+          viewport_width: this.viewportWidth,
+          viewport_height: this.viewportHeight,
+        },
+      });
+
+      const downloadedFilepath = `/tmp/${this.filename}`;
+      fs.writeFileSync(downloadedFilepath, response);
+
+      const filedata = [
+        this.filename,
+        downloadedFilepath,
+      ];
+
+      $.export("$summary", `Successfully took the screenshot from ${this.url}`);
+      return filedata;
+    } catch (error) {
+      throw new Error(`Unable to take screenshot from ${this.url}: ${error.name}`);
+    }
+  },
+};

components/screenshotbase/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pipedream/screenshotbase",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Pipedream screenshotbase Components",
   "main": "screenshotbase.app.mjs",
   "keywords": [
@@ -11,5 +11,8 @@
   "author": "Pipedream <[email protected]> (https://pipedream.com/)",
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "@pipedream/platform": "^3.1.0"
   }
-}
+}

components/screenshotbase/screenshotbase.app.mjs

@@ -1,11 +1,75 @@
+import { axios } from "@pipedream/platform";
+
 export default {
   type: "app",
   app: "screenshotbase",
-  propDefinitions: {},
+  propDefinitions: {
+    url: {
+      label: "URL",
+      type: "string",
+      description: "Website to render",
+    },
+    filename: {
+      type: "string",
+      label: "Target Filename",
+      description: "The filename (including extension) that will be used to save the file in /tmp",
+    },
+    format: {
+      type: "string",
+      label: "Format",
+      description: "The format of the image returned",
+      options: [
+        "jpg",
+        "png",
+        "webp",
+      ],
+    },
+    quality: {
+      type: "integer",
+      label: "Quality",
+      description: "The quality of the image returned. Only supported when the format is `jpg` or `jpeg`",
+      optional: true,
+    },
+    fullPage: {
+      type: "boolean",
+      label: "Full Page",
+      description: "Whether to take a screenshot of the full page",
+      optional: true,
+    },
+    viewportWidth: {
+      type: "integer",
+      label: "Viewport Width",
+      description: "The width of the browser viewport in pixels. The browser's viewport is the window area where you can see the website. Default value is 1280.",
+      optional: true,
+    },
+    viewportHeight: {
+      type: "integer",
+      label: "Viewport Height",
+      description: "The height of the browser viewport in pixels. The browser's viewport is the window area where you can see the website. Default value is 800.",
+      optional: true,
+    },
+  },
   methods: {
-    // this.$auth contains connected account data
-    authKeys() {
-      console.log(Object.keys(this.$auth));
+    _baseUrl() {
+      return "https://api.screenshotbase.com/v1";
+    },
+    _makeRequest({
+      $ = this, path, ...opts
+    }) {
+      return axios($, {
+        url: `${this._baseUrl()}${path}`,
+        headers: {
+          "apikey": `${this.$auth.api_key}`,
+        },
+        ...opts,
+      });
+    },
+    takeScreenshot(opts = {}) {
+      return this._makeRequest({
+        path: "/take",
+        responseType: "arraybuffer",
+        ...opts,
+      });
     },
   },
 };