Merge pull request #32 from hahow/feature/screenshot-add-config-filename

feat(@hahow/jwplayer-plugin-screenshot): 新增 config.name 自訂截圖檔名
hahow · Sep 16, 2022 · acbcba4 · acbcba4
2 parents 75f3844 + 1a82e85
commit acbcba4
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 9 deletions.
diff --git a/.changeset/tidy-carpets-boil.md b/.changeset/tidy-carpets-boil.md
@@ -0,0 +1,5 @@
+---
+"@hahow/jwplayer-plugin-screenshot": patch
+---
+
+新增 `config.name` 自訂截圖檔名
diff --git a/apps/docs/stories/Screenshot.mdx b/apps/docs/stories/Screenshot.mdx
@@ -36,7 +36,8 @@ IIFE 格式，JW Player 預設使用 plugin 的方式：
         "playlist": "{your_playlist_url}",
         "plugins": {
           "//unpkg.com/@hahow/jwplayer-plugin-screenshot@latest/dist/iife/screenshot.js": {
-            enabled: true
+            enabled: true,
+            name: "screenshot"
           }
         }
       });
@@ -60,7 +61,8 @@ const App = () => (
       config={{
         plugins: {
           "//unpkg.com/@hahow/jwplayer-plugin-screenshot@latest/dist/iife/screenshot.js": {
-            enabled: true
+            enabled: true,
+            name: "screenshot"
           }
         },
       }}
@@ -91,7 +93,8 @@ const App = () => (
       config={{
         plugins: {
           "/screenshot.js": {
-            enabled: true
+            enabled: true,
+            name: "screenshot"
           }
         },
       }}
@@ -105,6 +108,7 @@ const App = () => (
 
 ## Configuration
 
-| config    | type      | default | description      |
-| --------- | --------- | ------- | ---------------- |
-| `enabled` | `boolean` | `true`  | 是否開啟截圖功能 |
+| config    | type      | default      | description      |
+| --------- | --------- | ------------ | ---------------- |
+| `enabled` | `boolean` | `true`       | 是否開啟截圖功能 |
+| `name`    | `string`  | `screenshot` | 截圖檔名         |
diff --git a/apps/docs/stories/Screenshot.stories.tsx b/apps/docs/stories/Screenshot.stories.tsx
@@ -23,6 +23,7 @@ export const Screenshot = createPluginStory({
     "//unpkg.com/@hahow/jwplayer-plugin-screenshot@latest/dist/iife/screenshot.js",
   pluginConfig: {
     enabled: true,
+    name: "screenshot",
   },
   storyArgs: {
     config: {

diff --git a/packages/jwplayer-plugin-screenshot/src/index.ts b/packages/jwplayer-plugin-screenshot/src/index.ts
@@ -4,13 +4,17 @@ import { download, getBlobUrl } from "./utils";
 interface ScreenshotPluginConfig {
   /** 是否開啟截圖功能，預設 true */
   enabled?: boolean;
+  /** 截圖檔名，預設 "screenshot" */
+  name?: string;
 }
 
 export function initPlugin(
   playerInstance: jwplayer.JWPlayer,
-  pluginConfig: ScreenshotPluginConfig = { enabled: true }
+  pluginConfig: ScreenshotPluginConfig
 ) {
-  if (pluginConfig.enabled === false) return;
+  const { enabled = true, name = "screenshot" } = pluginConfig;
+
+  if (enabled === false) return;
 
   playerInstance.on("ready", () => {
     const video = document.querySelector<HTMLVideoElement>(".jw-video");
@@ -21,7 +25,7 @@ export function initPlugin(
     const handleClick = async () => {
       if (video) {
         const dataUri = await getBlobUrl(video);
-        download(dataUri, "screenshot");
+        download(dataUri, name);
       }
     };