From 0a612cd9603dc72b01252a537f72ed74b0baf40e Mon Sep 17 00:00:00 2001
From: amowu <amo260@gmail.com>
Date: Thu, 11 Jan 2024 03:13:35 +0000
Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20@=20hahow/jw?=
 =?UTF-8?q?player-plugins@5cf2ad5fd32ca2b3ebd2d6e6f79f7345cc510761=20?=
 =?UTF-8?q?=F0=9F=9A=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 iframe.html                                                 | 2 +-
 main.612d2790.iframe.bundle.js.map                          | 1 -
 ...d2790.iframe.bundle.js => main.dfe60d44.iframe.bundle.js | 6 +++---
 ...ICENSE.txt => main.dfe60d44.iframe.bundle.js.LICENSE.txt | 0
 main.dfe60d44.iframe.bundle.js.map                          | 1 +
 project.json                                                | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)
 delete mode 100644 main.612d2790.iframe.bundle.js.map
 rename main.612d2790.iframe.bundle.js => main.dfe60d44.iframe.bundle.js (70%)
 rename main.612d2790.iframe.bundle.js.LICENSE.txt => main.dfe60d44.iframe.bundle.js.LICENSE.txt (100%)
 create mode 100644 main.dfe60d44.iframe.bundle.js.map

diff --git a/iframe.html b/iframe.html
index 3c6d44f..1da4fef 100644
--- a/iframe.html
+++ b/iframe.html
@@ -361,4 +361,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./stories","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./stories","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.9568f0b3.iframe.bundle.js"></script><script src="vendors~main.584a3f04.iframe.bundle.js"></script><script src="main.612d2790.iframe.bundle.js"></script></body></html>
\ No newline at end of file
+            window['STORIES'] = [{"titlePrefix":"","directory":"./stories","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./stories","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.9568f0b3.iframe.bundle.js"></script><script src="vendors~main.584a3f04.iframe.bundle.js"></script><script src="main.dfe60d44.iframe.bundle.js"></script></body></html>
\ No newline at end of file
diff --git a/main.612d2790.iframe.bundle.js.map b/main.612d2790.iframe.bundle.js.map
deleted file mode 100644
index ebd83e6..0000000
--- a/main.612d2790.iframe.bundle.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"main.612d2790.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/main.612d2790.iframe.bundle.js b/main.dfe60d44.iframe.bundle.js
similarity index 70%
rename from main.612d2790.iframe.bundle.js
rename to main.dfe60d44.iframe.bundle.js
index 76e4dec..15120de 100644
--- a/main.612d2790.iframe.bundle.js
+++ b/main.dfe60d44.iframe.bundle.js
@@ -1,3 +1,3 @@
-/*! For license information please see main.612d2790.iframe.bundle.js.LICENSE.txt */
-(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{"./.storybook/preview.js-generated-config-entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var preview_namespaceObject={};__webpack_require__.r(preview_namespaceObject),__webpack_require__.d(preview_namespaceObject,"parameters",(function(){return parameters})),__webpack_require__.d(preview_namespaceObject,"decorators",(function(){return decorators}));__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.get-own-property-descriptor.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.get-own-property-descriptors.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-properties.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var ClientApi=__webpack_require__("../../node_modules/@storybook/client-api/dist/esm/ClientApi.js"),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js"),GitHubCorner_GitHubCorner=function GitHubCorner(_ref){var url=_ref.url;return Object(jsx_runtime.jsx)(jsx_runtime.Fragment,{children:Object(jsx_runtime.jsx)("a",{href:url,"aria-label":"View source on GitHub",children:Object(jsx_runtime.jsxs)("svg",{width:"80",height:"80",viewBox:"0 0 250 250",style:{fill:"#151513",color:"#fff",position:"absolute",top:0,border:0,right:0},"aria-hidden":"true",children:[Object(jsx_runtime.jsx)("path",{d:"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"}),Object(jsx_runtime.jsx)("path",{d:"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2",fill:"currentColor",style:{transformOrigin:"130px 106px"}}),Object(jsx_runtime.jsx)("path",{d:"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z",fill:"currentColor"})]})})})},components_GitHubCorner=GitHubCorner_GitHubCorner;try{GitHubCorner_GitHubCorner.displayName="GitHubCorner",GitHubCorner_GitHubCorner.__docgenInfo={description:"https://tholman.com/github-corners/",displayName:"GitHubCorner",props:{url:{defaultValue:null,description:"",name:"url",required:!0,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["components/GitHubCorner.tsx#GitHubCorner"]={docgenInfo:GitHubCorner_GitHubCorner.__docgenInfo,name:"GitHubCorner",path:"components/GitHubCorner.tsx#GitHubCorner"})}catch(__react_docgen_typescript_loader_error){}var parameters={actions:{argTypesRegex:"^on[A-Z].*"},controls:{matchers:{color:/(background|color)$/i,date:/Date$/}}},decorators=[function(Story){return Object(jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[Object(jsx_runtime.jsx)(Story,{}),Object(jsx_runtime.jsx)(components_GitHubCorner,{url:"https://github.com/hahow/jwplayer-plugins"})]})}];function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Object.keys(preview_namespaceObject).forEach((function(key){var value=preview_namespaceObject[key];switch(key){case"args":return Object(ClientApi.d)(value);case"argTypes":return Object(ClientApi.b)(value);case"decorators":return value.forEach((function(decorator){return Object(ClientApi.f)(decorator,!1)}));case"loaders":return value.forEach((function(loader){return Object(ClientApi.g)(loader,!1)}));case"parameters":return Object(ClientApi.h)(function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach((function(key){_defineProperty(target,key,source[key])})):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach((function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))}))}return target}({},value),!1);case"argTypesEnhancers":return value.forEach((function(enhancer){return Object(ClientApi.c)(enhancer)}));case"argsEnhancers":return value.forEach((function(enhancer){return Object(ClientApi.e)(enhancer)}));case"render":return Object(ClientApi.i)(value);case"globals":case"globalTypes":var v={};return v[key]=value,Object(ClientApi.h)(v,!1);case"__namedExportsOrder":case"decorateStory":case"renderToDOM":return null;default:return console.log(key+" was not supported :( !")}}))},"./generated-stories-entry.js":function(module,exports,__webpack_require__){"use strict";(function(module){(0,__webpack_require__("../../node_modules/@storybook/react/dist/esm/client/index.js").configure)([__webpack_require__("./stories sync recursive ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"),__webpack_require__("./stories sync recursive ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$")],module,!1)}).call(this,__webpack_require__("../../node_modules/webpack/buildin/module.js")(module))},"./stories sync recursive ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$":function(module,exports,__webpack_require__){var map={"./FullViewport.stories.tsx":"./stories/FullViewport.stories.tsx","./Screenshot.stories.tsx":"./stories/Screenshot.stories.tsx","./TrackNotes.stories.tsx":"./stories/TrackNotes.stories.tsx","./Watermark.stories.tsx":"./stories/Watermark.stories.tsx"};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id="./stories sync recursive ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"},"./stories sync recursive ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$":function(module,exports){function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=function(){return[]},webpackEmptyContext.resolve=webpackEmptyContext,module.exports=webpackEmptyContext,webpackEmptyContext.id="./stories sync recursive ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},"./stories/FullViewport.stories.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"FullViewport",(function(){return FullViewport}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js");var jwplayer_react=__webpack_require__("../../node_modules/@jwplayer/jwplayer-react/lib/jwplayer-react.js"),jwplayer_react_default=__webpack_require__.n(jwplayer_react);__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.set-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.get-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.reflect.construct.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.create.js");function _setPrototypeOf(o,p){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function _setPrototypeOf(o,p){return o.__proto__=p,o},_setPrototypeOf(o,p)}function _createSuper(Derived){var hasNativeReflectConstruct=function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function _createSuperInternal(){var result,Super=_getPrototypeOf(Derived);if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else result=Super.apply(this,arguments);return _possibleConstructorReturn(this,result)}}function _possibleConstructorReturn(self,call){if(call&&("object"==typeof call||"function"==typeof call))return call;if(void 0!==call)throw new TypeError("Derived constructors may only return object or undefined");return function _assertThisInitialized(self){if(void 0===self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return self}(self)}function _getPrototypeOf(o){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)},_getPrototypeOf(o)}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Object.defineProperty(Constructor,"prototype",{writable:!1}),Constructor}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var r=function(_n){!function _inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function");subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:!0,configurable:!0}}),Object.defineProperty(subClass,"prototype",{writable:!1}),superClass&&_setPrototypeOf(subClass,superClass)}(r,_n);var _super=_createSuper(r);function r(e,i,s){var _this;_classCallCheck(this,r),_this=_super.call(this,e,i,s);var l=document.createElement("style");return l.type="text/css",l.innerHTML="\n      .jwplayer.jw-fullscreen-web {\n        bottom: 0;\n        height: 100% !important;\n        left: 0;\n        position: fixed;\n        right: 0;\n        top: 0;\n        width: 100% !important;\n        z-index: 9999;\n      }\n    ",document.getElementsByTagName("head")[0].appendChild(l),e.on("ready",(function(){var a=e.getContainer();e.addButton('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1152 1024" class="jw-svg-icon"><path fill="currentColor" d="M1075.2 0H76.8A76.8 76.8 0 0 0 0 76.8v870.4A76.8 76.8 0 0 0 76.8 1024h998.4a76.8 76.8 0 0 0 76.8-76.8V76.8A76.8 76.8 0 0 0 1075.2 0zM1024 128v768H128V128h896zM448 192a64 64 0 0 1 7.488 127.552L448 320H320v128a64 64 0 0 1-56.512 63.552L256 512a64 64 0 0 1-63.552-56.512L192 448V262.592c0-34.432 25.024-66.112 61.632-70.144L261.632 192H448zM704 832a64 64 0 0 1-7.488-127.552L704 704h128V576a64 64 0 0 1 56.512-63.552L896 512a64 64 0 0 1 63.552 56.512L960 576v185.408c0 34.496-25.024 66.112-61.632 70.208l-8 0.384H704z"></path></svg>',"劇院模式",(function w(){!function m(t,e){return t.classList.contains(e)}(a,"jw-fullscreen-web")?function g(t,e){return t.classList.add(e)}(a,"jw-fullscreen-web"):function u(t,e){return t.classList.remove(e)}(a,"jw-fullscreen-web")}),"jw-plugin-full-viewport")})),_this}return _createClass(r)}(_createClass((function n(e,i,s){_classCallCheck(this,n),this.playerInstance=e,this.pluginConfig=i,this.pluginDiv=s})));r.pluginName="fullViewport",r.playerMinimumVersion="8.0.0";var createPluginStory=__webpack_require__("./utils/createPluginStory.tsx"),esm=(__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js")),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),_excluded=["components"];function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,_excluded);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)("h1",{id:"jwplayer-plugin-full-viewport"},"jwplayer-plugin-full-viewport"),Object(esm.b)("p",null,Object(esm.b)("a",{parentName:"p",href:"https://badge.fury.io/js/@hahow%2Fjwplayer-plugin-full-viewport",target:"_blank",rel:"nofollow noopener noreferrer"},Object(esm.b)("img",{parentName:"a",src:"https://badge.fury.io/js/@hahow%2Fjwplayer-plugin-full-viewport.svg",alt:"npm version"}))),Object(esm.b)("p",null,"劇院模式，又稱作「視窗全螢幕」。可以將播放器放大至整個瀏覽器（viewport），相較於全螢幕（full-screen）模式，操作上更為方便。"),Object(esm.b)("h2",{id:"table-of-contents"},"Table of Contents"),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"#demo"},"Demo")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"#external-plugin"},"External Plugin")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"#internal-plugin-not-recommended"},"Internal Plugin"))),Object(esm.b)("h2",{id:"demo"},"Demo"),Object(esm.b)(dist_esm.a,{id:"full-viewport--full-viewport",mdxType:"Story"}),Object(esm.b)("h2",{id:"external-plugin"},"External Plugin"),Object(esm.b)("p",null,"IIFE 格式，JW Player 預設使用 plugin 的方式："),Object(esm.b)("h3",{id:"vanilla-js"},"Vanilla JS"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<html>\n  <head>\n    <script src="{your_cloud_hosted_player_library_url}"><\/script>\n  </head>\n  <body>\n    <div id="myElement"></div>\n\n    <script type="text/JavaScript">\n      jwplayer("myElement").setup({\n        "playlist": "{your_playlist_url}",\n        "plugins": {\n          "//unpkg.com/@hahow/jwplayer-plugin-full-viewport@latest/dist/iife/fullViewport.js": {}\n        }\n      });\n    <\/script>\n  </body>\n</html>\n')),Object(esm.b)("h3",{id:"react-js"},"React JS"),Object(esm.b)("p",null,"以 ",Object(esm.b)("a",{parentName:"p",href:"https://github.com/jwplayer/jwplayer-react",target:"_blank",rel:"nofollow noopener noreferrer"},"@jwplayer/jwplayer-react")," 為例，其它 framework 大同小異："),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-jsx"},"import JWPlayer from '@jwplayer/jwplayer-react';\n\nconst App = () => (\n  return (\n    <JWPlayer\n      library='{your_cloud_hosted_player_library_url}'\n      playlist='{your_playlist_url}'\n      config={{\n        plugins: {\n          \"//unpkg.com/@hahow/jwplayer-plugin-full-viewport@latest/dist/iife/fullViewport.js\": {},\n        },\n      }}\n    />\n  );\n);\n")),Object(esm.b)("h2",{id:"internal-plugin-not-recommended"},"Internal Plugin (not recommended)"),Object(esm.b)("p",null,"CJS & EMS 格式，非官方使用 plugin 的方式，不建議使用："),Object(esm.b)("ol",null,Object(esm.b)("li",{parentName:"ol"},Object(esm.b)("inlineCode",{parentName:"li"},"npm install @hahow/jwplayer-plugin-full-viewport")),Object(esm.b)("li",{parentName:"ol"},"載入 plugin module ",Object(esm.b)("inlineCode",{parentName:"li"},"FullViewportPlugin")),Object(esm.b)("li",{parentName:"ol"},"建立一份空的 ",Object(esm.b)("inlineCode",{parentName:"li"},"fullViewport.js"),"，放在 application 可以讀取的位置（例如 ",Object(esm.b)("inlineCode",{parentName:"li"},"/"),"）"),Object(esm.b)("li",{parentName:"ol"},"使用 JWP 的 ",Object(esm.b)("inlineCode",{parentName:"li"},"registerPlugin()")," API 註冊 plugin")),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-jsx"},"import JWPlayer from '@jwplayer/jwplayer-react';\n\nimport { FullViewportPlugin } from \"@hahow/jwplayer-plugin-full-viewport\";\n\nconst App = () => (\n  return (\n    <JWPlayer\n      library='{your_cloud_hosted_player_library_url}'\n      playlist='{your_playlist_url}'\n      config={{\n        plugins: {\n          \"/fullViewport.js\": {},\n        },\n      }}\n      didMountCallback={({ player }) => {\n        player.registerPlugin(\n          FullViewportPlugin.pluginName,\n          FullViewportPlugin.playerMinimumVersion,\n          FullViewportPlugin\n        );\n      }}\n    />\n  );\n);\n")))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;__webpack_exports__.default={title:"Full Viewport",component:jwplayer_react_default.a,parameters:{docs:{page:MDXContent}}};var FullViewport=Object(createPluginStory.a)({pluginName:"fullViewport",playerMinimumVersion:"8.0.0",pluginClassOrFunction:r,pluginScriptUrl:"//unpkg.com/@hahow/jwplayer-plugin-full-viewport@latest/dist/iife/fullViewport.js",pluginConfig:{},storyArgs:{config:{height:360,width:640},file:"https://cdn.jwplayer.com/manifests/GXbUbwm0.m3u8",library:"https://cdn.jwplayer.com/libraries/5vuW2BEP.js"}});FullViewport.parameters=Object.assign({storySource:{source:'createPluginStory({\n  pluginName: "fullViewport",\n  playerMinimumVersion: "8.0.0",\n  pluginClassOrFunction: FullViewportPlugin,\n  pluginScriptUrl:\n    "//unpkg.com/@hahow/jwplayer-plugin-full-viewport@latest/dist/iife/fullViewport.js",\n  pluginConfig: {},\n  storyArgs: {\n    config: {\n      height: 360,\n      width: 640,\n    },\n    file: "https://cdn.jwplayer.com/manifests/GXbUbwm0.m3u8",\n    library: "https://cdn.jwplayer.com/libraries/5vuW2BEP.js",\n  },\n})'}},FullViewport.parameters)},"./stories/Screenshot.stories.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Screenshot",(function(){return Screenshot}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js");var jwplayer_react=__webpack_require__("../../node_modules/@jwplayer/jwplayer-react/lib/jwplayer-react.js"),jwplayer_react_default=__webpack_require__.n(jwplayer_react);__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/web.url.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.set-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.get-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.reflect.construct.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.create.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.async-iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.to-string-tag.js"),__webpack_require__("../../node_modules/core-js/modules/es.math.to-string-tag.js"),__webpack_require__("../../node_modules/core-js/modules/es.json.to-string-tag.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.reverse.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js");function _regeneratorRuntime(){_regeneratorRuntime=function _regeneratorRuntime(){return exports};var exports={},Op=Object.prototype,hasOwn=Op.hasOwnProperty,$Symbol="function"==typeof Symbol?Symbol:{},iteratorSymbol=$Symbol.iterator||"@@iterator",asyncIteratorSymbol=$Symbol.asyncIterator||"@@asyncIterator",toStringTagSymbol=$Symbol.toStringTag||"@@toStringTag";function define(obj,key,value){return Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}),obj[key]}try{define({},"")}catch(err){define=function define(obj,key,value){return obj[key]=value}}function wrap(innerFn,outerFn,self,tryLocsList){var protoGenerator=outerFn&&outerFn.prototype instanceof Generator?outerFn:Generator,generator=Object.create(protoGenerator.prototype),context=new Context(tryLocsList||[]);return generator._invoke=function(innerFn,self,context){var state="suspendedStart";return function(method,arg){if("executing"===state)throw new Error("Generator is already running");if("completed"===state){if("throw"===method)throw arg;return doneResult()}for(context.method=method,context.arg=arg;;){var delegate=context.delegate;if(delegate){var delegateResult=maybeInvokeDelegate(delegate,context);if(delegateResult){if(delegateResult===ContinueSentinel)continue;return delegateResult}}if("next"===context.method)context.sent=context._sent=context.arg;else if("throw"===context.method){if("suspendedStart"===state)throw state="completed",context.arg;context.dispatchException(context.arg)}else"return"===context.method&&context.abrupt("return",context.arg);state="executing";var record=tryCatch(innerFn,self,context);if("normal"===record.type){if(state=context.done?"completed":"suspendedYield",record.arg===ContinueSentinel)continue;return{value:record.arg,done:context.done}}"throw"===record.type&&(state="completed",context.method="throw",context.arg=record.arg)}}}(innerFn,self,context),generator}function tryCatch(fn,obj,arg){try{return{type:"normal",arg:fn.call(obj,arg)}}catch(err){return{type:"throw",arg:err}}}exports.wrap=wrap;var ContinueSentinel={};function Generator(){}function GeneratorFunction(){}function GeneratorFunctionPrototype(){}var IteratorPrototype={};define(IteratorPrototype,iteratorSymbol,(function(){return this}));var getProto=Object.getPrototypeOf,NativeIteratorPrototype=getProto&&getProto(getProto(values([])));NativeIteratorPrototype&&NativeIteratorPrototype!==Op&&hasOwn.call(NativeIteratorPrototype,iteratorSymbol)&&(IteratorPrototype=NativeIteratorPrototype);var Gp=GeneratorFunctionPrototype.prototype=Generator.prototype=Object.create(IteratorPrototype);function defineIteratorMethods(prototype){["next","throw","return"].forEach((function(method){define(prototype,method,(function(arg){return this._invoke(method,arg)}))}))}function AsyncIterator(generator,PromiseImpl){function invoke(method,arg,resolve,reject){var record=tryCatch(generator[method],generator,arg);if("throw"!==record.type){var result=record.arg,value=result.value;return value&&"object"==typeof value&&hasOwn.call(value,"__await")?PromiseImpl.resolve(value.__await).then((function(value){invoke("next",value,resolve,reject)}),(function(err){invoke("throw",err,resolve,reject)})):PromiseImpl.resolve(value).then((function(unwrapped){result.value=unwrapped,resolve(result)}),(function(error){return invoke("throw",error,resolve,reject)}))}reject(record.arg)}var previousPromise;this._invoke=function(method,arg){function callInvokeWithMethodAndArg(){return new PromiseImpl((function(resolve,reject){invoke(method,arg,resolve,reject)}))}return previousPromise=previousPromise?previousPromise.then(callInvokeWithMethodAndArg,callInvokeWithMethodAndArg):callInvokeWithMethodAndArg()}}function maybeInvokeDelegate(delegate,context){var method=delegate.iterator[context.method];if(void 0===method){if(context.delegate=null,"throw"===context.method){if(delegate.iterator.return&&(context.method="return",context.arg=void 0,maybeInvokeDelegate(delegate,context),"throw"===context.method))return ContinueSentinel;context.method="throw",context.arg=new TypeError("The iterator does not provide a 'throw' method")}return ContinueSentinel}var record=tryCatch(method,delegate.iterator,context.arg);if("throw"===record.type)return context.method="throw",context.arg=record.arg,context.delegate=null,ContinueSentinel;var info=record.arg;return info?info.done?(context[delegate.resultName]=info.value,context.next=delegate.nextLoc,"return"!==context.method&&(context.method="next",context.arg=void 0),context.delegate=null,ContinueSentinel):info:(context.method="throw",context.arg=new TypeError("iterator result is not an object"),context.delegate=null,ContinueSentinel)}function pushTryEntry(locs){var entry={tryLoc:locs[0]};1 in locs&&(entry.catchLoc=locs[1]),2 in locs&&(entry.finallyLoc=locs[2],entry.afterLoc=locs[3]),this.tryEntries.push(entry)}function resetTryEntry(entry){var record=entry.completion||{};record.type="normal",delete record.arg,entry.completion=record}function Context(tryLocsList){this.tryEntries=[{tryLoc:"root"}],tryLocsList.forEach(pushTryEntry,this),this.reset(!0)}function values(iterable){if(iterable){var iteratorMethod=iterable[iteratorSymbol];if(iteratorMethod)return iteratorMethod.call(iterable);if("function"==typeof iterable.next)return iterable;if(!isNaN(iterable.length)){var i=-1,next=function next(){for(;++i<iterable.length;)if(hasOwn.call(iterable,i))return next.value=iterable[i],next.done=!1,next;return next.value=void 0,next.done=!0,next};return next.next=next}}return{next:doneResult}}function doneResult(){return{value:void 0,done:!0}}return GeneratorFunction.prototype=GeneratorFunctionPrototype,define(Gp,"constructor",GeneratorFunctionPrototype),define(GeneratorFunctionPrototype,"constructor",GeneratorFunction),GeneratorFunction.displayName=define(GeneratorFunctionPrototype,toStringTagSymbol,"GeneratorFunction"),exports.isGeneratorFunction=function(genFun){var ctor="function"==typeof genFun&&genFun.constructor;return!!ctor&&(ctor===GeneratorFunction||"GeneratorFunction"===(ctor.displayName||ctor.name))},exports.mark=function(genFun){return Object.setPrototypeOf?Object.setPrototypeOf(genFun,GeneratorFunctionPrototype):(genFun.__proto__=GeneratorFunctionPrototype,define(genFun,toStringTagSymbol,"GeneratorFunction")),genFun.prototype=Object.create(Gp),genFun},exports.awrap=function(arg){return{__await:arg}},defineIteratorMethods(AsyncIterator.prototype),define(AsyncIterator.prototype,asyncIteratorSymbol,(function(){return this})),exports.AsyncIterator=AsyncIterator,exports.async=function(innerFn,outerFn,self,tryLocsList,PromiseImpl){void 0===PromiseImpl&&(PromiseImpl=Promise);var iter=new AsyncIterator(wrap(innerFn,outerFn,self,tryLocsList),PromiseImpl);return exports.isGeneratorFunction(outerFn)?iter:iter.next().then((function(result){return result.done?result.value:iter.next()}))},defineIteratorMethods(Gp),define(Gp,toStringTagSymbol,"Generator"),define(Gp,iteratorSymbol,(function(){return this})),define(Gp,"toString",(function(){return"[object Generator]"})),exports.keys=function(object){var keys=[];for(var key in object)keys.push(key);return keys.reverse(),function next(){for(;keys.length;){var key=keys.pop();if(key in object)return next.value=key,next.done=!1,next}return next.done=!0,next}},exports.values=values,Context.prototype={constructor:Context,reset:function reset(skipTempReset){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(resetTryEntry),!skipTempReset)for(var name in this)"t"===name.charAt(0)&&hasOwn.call(this,name)&&!isNaN(+name.slice(1))&&(this[name]=void 0)},stop:function stop(){this.done=!0;var rootRecord=this.tryEntries[0].completion;if("throw"===rootRecord.type)throw rootRecord.arg;return this.rval},dispatchException:function dispatchException(exception){if(this.done)throw exception;var context=this;function handle(loc,caught){return record.type="throw",record.arg=exception,context.next=loc,caught&&(context.method="next",context.arg=void 0),!!caught}for(var i=this.tryEntries.length-1;i>=0;--i){var entry=this.tryEntries[i],record=entry.completion;if("root"===entry.tryLoc)return handle("end");if(entry.tryLoc<=this.prev){var hasCatch=hasOwn.call(entry,"catchLoc"),hasFinally=hasOwn.call(entry,"finallyLoc");if(hasCatch&&hasFinally){if(this.prev<entry.catchLoc)return handle(entry.catchLoc,!0);if(this.prev<entry.finallyLoc)return handle(entry.finallyLoc)}else if(hasCatch){if(this.prev<entry.catchLoc)return handle(entry.catchLoc,!0)}else{if(!hasFinally)throw new Error("try statement without catch or finally");if(this.prev<entry.finallyLoc)return handle(entry.finallyLoc)}}}},abrupt:function abrupt(type,arg){for(var i=this.tryEntries.length-1;i>=0;--i){var entry=this.tryEntries[i];if(entry.tryLoc<=this.prev&&hasOwn.call(entry,"finallyLoc")&&this.prev<entry.finallyLoc){var finallyEntry=entry;break}}finallyEntry&&("break"===type||"continue"===type)&&finallyEntry.tryLoc<=arg&&arg<=finallyEntry.finallyLoc&&(finallyEntry=null);var record=finallyEntry?finallyEntry.completion:{};return record.type=type,record.arg=arg,finallyEntry?(this.method="next",this.next=finallyEntry.finallyLoc,ContinueSentinel):this.complete(record)},complete:function complete(record,afterLoc){if("throw"===record.type)throw record.arg;return"break"===record.type||"continue"===record.type?this.next=record.arg:"return"===record.type?(this.rval=this.arg=record.arg,this.method="return",this.next="end"):"normal"===record.type&&afterLoc&&(this.next=afterLoc),ContinueSentinel},finish:function finish(finallyLoc){for(var i=this.tryEntries.length-1;i>=0;--i){var entry=this.tryEntries[i];if(entry.finallyLoc===finallyLoc)return this.complete(entry.completion,entry.afterLoc),resetTryEntry(entry),ContinueSentinel}},catch:function _catch(tryLoc){for(var i=this.tryEntries.length-1;i>=0;--i){var entry=this.tryEntries[i];if(entry.tryLoc===tryLoc){var record=entry.completion;if("throw"===record.type){var thrown=record.arg;resetTryEntry(entry)}return thrown}}throw new Error("illegal catch attempt")},delegateYield:function delegateYield(iterable,resultName,nextLoc){return this.delegate={iterator:values(iterable),resultName:resultName,nextLoc:nextLoc},"next"===this.method&&(this.arg=void 0),ContinueSentinel}},exports}function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _setPrototypeOf(o,p){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function _setPrototypeOf(o,p){return o.__proto__=p,o},_setPrototypeOf(o,p)}function _createSuper(Derived){var hasNativeReflectConstruct=function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function _createSuperInternal(){var result,Super=_getPrototypeOf(Derived);if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else result=Super.apply(this,arguments);return _possibleConstructorReturn(this,result)}}function _possibleConstructorReturn(self,call){if(call&&("object"==typeof call||"function"==typeof call))return call;if(void 0!==call)throw new TypeError("Derived constructors may only return object or undefined");return function _assertThisInitialized(self){if(void 0===self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return self}(self)}function _getPrototypeOf(o){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)},_getPrototypeOf(o)}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Object.defineProperty(Constructor,"prototype",{writable:!1}),Constructor}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}function p(o){return new Promise((function(t,e){var i;try{var n=document.createElement("canvas");n.width=o.videoWidth,n.height=o.videoHeight,null==(i=null==n?void 0:n.getContext("2d"))||i.drawImage(o,0,0),n.toBlob((function(a){a&&t(URL.createObjectURL(a))}))}catch(n){e(n)}}))}function u(o,t){var e=document.createElement("a");e.style.display="none",e.href=o,e.download=t,document.body.appendChild(e),e.click(),document.body.removeChild(e)}var s=function(_l){!function _inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function");subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:!0,configurable:!0}}),Object.defineProperty(subClass,"prototype",{writable:!1}),superClass&&_setPrototypeOf(subClass,superClass)}(s,_l);var _super=_createSuper(s);function s(t,e,i){var _this;_classCallCheck(this,s),_this=_super.call(this,t,e,i);var _e$enabled=e.enabled,n=void 0===_e$enabled||_e$enabled,_e$name=e.name,a=void 0===_e$name?"screenshot":_e$name;return!1!==n&&t.on("ready",(function(){var r=document.querySelector(".jw-video");null==r||r.setAttribute("crossOrigin","anonymous");var m=function(){var _ref=function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}(_regeneratorRuntime().mark((function _callee(){return _regeneratorRuntime().wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:if(!r){_context.next=5;break}return _context.next=3,p(r);case 3:u(_context.sent,a);case 5:case"end":return _context.stop()}}),_callee)})));return function m(){return _ref.apply(this,arguments)}}();t.addButton('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" class="jw-svg-icon"><path d="M 19.402344 6 C 17.019531 6 14.96875 7.679688 14.5 10.011719 L 14.097656 12 L 9 12 C 6.238281 12 4 14.238281 4 17 L 4 38 C 4 40.761719 6.238281 43 9 43 L 41 43 C 43.761719 43 46 40.761719 46 38 L 46 17 C 46 14.238281 43.761719 12 41 12 L 35.902344 12 L 35.5 10.011719 C 35.03125 7.679688 32.980469 6 30.597656 6 Z M 25 17 C 30.519531 17 35 21.480469 35 27 C 35 32.519531 30.519531 37 25 37 C 19.480469 37 15 32.519531 15 27 C 15 21.480469 19.480469 17 25 17 Z M 25 19 C 20.589844 19 17 22.589844 17 27 C 17 31.410156 20.589844 35 25 35 C 29.410156 35 33 31.410156 33 27 C 33 22.589844 29.410156 19 25 19 Z "></path></svg>',"截圖",m,"jw-plugin-screenshot")})),_this}return _createClass(s)}(_createClass((function l(t,e,i){_classCallCheck(this,l),this.playerInstance=t,this.pluginConfig=e,this.pluginDiv=i})));s.pluginName="screenshot",s.playerMinimumVersion="8.0.0";var createPluginStory=__webpack_require__("./utils/createPluginStory.tsx"),esm=(__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js")),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),_excluded=["components"];function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,_excluded);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)("h1",{id:"jwplayer-plugin-screenshot"},"jwplayer-plugin-screenshot"),Object(esm.b)("p",null,Object(esm.b)("a",{parentName:"p",href:"https://badge.fury.io/js/@hahow%2Fjwplayer-plugin-screenshot",target:"_blank",rel:"nofollow noopener noreferrer"},Object(esm.b)("img",{parentName:"a",src:"https://badge.fury.io/js/@hahow%2Fjwplayer-plugin-screenshot.svg",alt:"npm version"}))),Object(esm.b)("p",null,"這是一個 JW Player 的截圖 plugin，允許使用者擷取當前影格的畫面，並且下載儲存 PNG 圖檔。"),Object(esm.b)("p",null,Object(esm.b)("strong",{parentName:"p"},"注意："),"如果你的 JW Player 有啟用 DRM，這個 plugin 會無法截圖。"),Object(esm.b)("h2",{id:"table-of-contents"},"Table of Contents"),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"#demo"},"Demo")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"#external-plugin"},"External Plugin")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"#internal-plugin-not-recommended"},"Internal Plugin")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"#configuration"},"Configuration"))),Object(esm.b)("h2",{id:"demo"},"Demo"),Object(esm.b)(dist_esm.a,{id:"screenshot--screenshot",mdxType:"Story"}),Object(esm.b)("h2",{id:"external-plugin"},"External Plugin"),Object(esm.b)("p",null,"IIFE 格式，JW Player 預設使用 plugin 的方式："),Object(esm.b)("h3",{id:"vanilla-js"},"Vanilla JS"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<html>\n  <head>\n    <script src="{your_cloud_hosted_player_library_url}"><\/script>\n  </head>\n  <body>\n    <div id="myElement"></div>\n\n    <script type="text/JavaScript">\n      jwplayer("myElement").setup({\n        "playlist": "{your_playlist_url}",\n        "plugins": {\n          "//unpkg.com/@hahow/jwplayer-plugin-screenshot@latest/dist/iife/screenshot.js": {\n            enabled: true,\n            name: "screenshot"\n          }\n        }\n      });\n    <\/script>\n  </body>\n</html>\n')),Object(esm.b)("h3",{id:"react-js"},"React JS"),Object(esm.b)("p",null,"以 ",Object(esm.b)("a",{parentName:"p",href:"https://github.com/jwplayer/jwplayer-react",target:"_blank",rel:"nofollow noopener noreferrer"},"@jwplayer/jwplayer-react")," 為例，其它 framework 大同小異："),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-jsx"},"import JWPlayer from '@jwplayer/jwplayer-react';\n\nconst App = () => (\n  return (\n    <JWPlayer\n      library='{your_cloud_hosted_player_library_url}'\n      playlist='{your_playlist_url}'\n      config={{\n        plugins: {\n          \"//unpkg.com/@hahow/jwplayer-plugin-screenshot@latest/dist/iife/screenshot.js\": {\n            enabled: true,\n            name: \"screenshot\"\n          }\n        },\n      }}\n    />\n  );\n);\n")),Object(esm.b)("h2",{id:"internal-plugin-not-recommended"},"Internal Plugin (not recommended)"),Object(esm.b)("p",null,"CJS & EMS 格式，非官方使用 plugin 的方式，不建議使用："),Object(esm.b)("ol",null,Object(esm.b)("li",{parentName:"ol"},Object(esm.b)("inlineCode",{parentName:"li"},"npm install @hahow/jwplayer-plugin-screenshot")),Object(esm.b)("li",{parentName:"ol"},"載入 plugin module ",Object(esm.b)("inlineCode",{parentName:"li"},"ScreenshotPlugin")),Object(esm.b)("li",{parentName:"ol"},"建立一份空的 ",Object(esm.b)("inlineCode",{parentName:"li"},"screenshot.js"),"，放在 application 可以讀取的位置（例如 ",Object(esm.b)("inlineCode",{parentName:"li"},"/"),"）"),Object(esm.b)("li",{parentName:"ol"},"使用 JWP 的 ",Object(esm.b)("inlineCode",{parentName:"li"},"registerPlugin()")," API 註冊 plugin")),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-jsx"},"import JWPlayer from '@jwplayer/jwplayer-react';\n\nimport { ScreenshotPlugin } from \"@hahow/jwplayer-plugin-screenshot\";\n\nconst App = () => (\n  return (\n    <JWPlayer\n      library='{your_cloud_hosted_player_library_url}'\n      playlist='{your_playlist_url}'\n      config={{\n        plugins: {\n          \"/screenshot.js\": {\n            enabled: true,\n            name: \"screenshot\"\n          }\n        },\n      }}\n      didMountCallback={({ player }) => {\n        player.registerPlugin(\n          ScreenshotPlugin.pluginName,\n          ScreenshotPlugin.playerMinimumVersion,\n          ScreenshotPlugin\n        );\n      }}\n    />\n  );\n);\n")),Object(esm.b)("h2",{id:"configuration"},"Configuration"),Object(esm.b)("table",null,Object(esm.b)("thead",{parentName:"table"},Object(esm.b)("tr",{parentName:"thead"},Object(esm.b)("th",{parentName:"tr",align:null},"config"),Object(esm.b)("th",{parentName:"tr",align:null},"type"),Object(esm.b)("th",{parentName:"tr",align:null},"default"),Object(esm.b)("th",{parentName:"tr",align:null},"description"))),Object(esm.b)("tbody",{parentName:"table"},Object(esm.b)("tr",{parentName:"tbody"},Object(esm.b)("td",{parentName:"tr",align:null},Object(esm.b)("inlineCode",{parentName:"td"},"enabled")),Object(esm.b)("td",{parentName:"tr",align:null},Object(esm.b)("inlineCode",{parentName:"td"},"boolean")),Object(esm.b)("td",{parentName:"tr",align:null},Object(esm.b)("inlineCode",{parentName:"td"},"true")),Object(esm.b)("td",{parentName:"tr",align:null},"是否開啟截圖功能")),Object(esm.b)("tr",{parentName:"tbody"},Object(esm.b)("td",{parentName:"tr",align:null},Object(esm.b)("inlineCode",{parentName:"td"},"name")),Object(esm.b)("td",{parentName:"tr",align:null},Object(esm.b)("inlineCode",{parentName:"td"},"string")),Object(esm.b)("td",{parentName:"tr",align:null},Object(esm.b)("inlineCode",{parentName:"td"},"screenshot")),Object(esm.b)("td",{parentName:"tr",align:null},"截圖檔名")))))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;__webpack_exports__.default={title:"Screenshot",component:jwplayer_react_default.a,parameters:{docs:{page:MDXContent}}};var Screenshot=Object(createPluginStory.a)({pluginName:"screenshot",playerMinimumVersion:"8.0.0",pluginClassOrFunction:s,pluginScriptUrl:"//unpkg.com/@hahow/jwplayer-plugin-screenshot@latest/dist/iife/screenshot.js",pluginConfig:{enabled:!0,name:"screenshot"},storyArgs:{config:{height:360,width:640},file:"https://cdn.jwplayer.com/manifests/GXbUbwm0.m3u8",library:"https://cdn.jwplayer.com/libraries/5vuW2BEP.js"}});Screenshot.parameters=Object.assign({storySource:{source:'createPluginStory({\n  pluginName: "screenshot",\n  playerMinimumVersion: "8.0.0",\n  pluginClassOrFunction: ScreenshotPlugin,\n  pluginScriptUrl:\n    "//unpkg.com/@hahow/jwplayer-plugin-screenshot@latest/dist/iife/screenshot.js",\n  pluginConfig: {\n    enabled: true,\n    name: "screenshot",\n  },\n  storyArgs: {\n    config: {\n      height: 360,\n      width: 640,\n    },\n    file: "https://cdn.jwplayer.com/manifests/GXbUbwm0.m3u8",\n    library: "https://cdn.jwplayer.com/libraries/5vuW2BEP.js",\n  },\n})'}},Screenshot.parameters)},"./stories/TrackNotes.stories.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"TrackNotes",(function(){return TrackNotes}));var esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js"),jwplayer_react=__webpack_require__("../../node_modules/@jwplayer/jwplayer-react/lib/jwplayer-react.js"),jwplayer_react_default=__webpack_require__.n(jwplayer_react);__webpack_require__("../../node_modules/core-js/modules/es.weak-set.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/web.timers.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.set-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.get-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.reflect.construct.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.create.js");function _setPrototypeOf(o,p){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function _setPrototypeOf(o,p){return o.__proto__=p,o},_setPrototypeOf(o,p)}function _createSuper(Derived){var hasNativeReflectConstruct=function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function _createSuperInternal(){var result,Super=_getPrototypeOf(Derived);if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else result=Super.apply(this,arguments);return _possibleConstructorReturn(this,result)}}function _possibleConstructorReturn(self,call){if(call&&("object"==typeof call||"function"==typeof call))return call;if(void 0!==call)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(self)}function _assertThisInitialized(self){if(void 0===self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return self}function _getPrototypeOf(o){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)},_getPrototypeOf(o)}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Object.defineProperty(Constructor,"prototype",{writable:!1}),Constructor}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var p,f,d,C,h=function h(n,r,t){if(r.has(n))throw TypeError("Cannot add the same private member more than once");r instanceof WeakSet?r.add(n):r.set(n,t)},m=function m(n,r,t){return function _(n,r,t){if(!r.has(n))throw TypeError("Cannot "+t)}(n,r,"access private method"),t},l=function(_s){!function _inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function");subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:!0,configurable:!0}}),Object.defineProperty(subClass,"prototype",{writable:!1}),superClass&&_setPrototypeOf(subClass,superClass)}(l,_s);var _super=_createSuper(l);function l(t,e,a){var _this;return _classCallCheck(this,l),_this=_super.call(this,t,e,a),h(_assertThisInitialized(_this),p),h(_assertThisInitialized(_this),d),function T(){var n=document.createElement("style");n.innerHTML="\n    .jw-overlays .jw-track-note {}\n    .jw-overlays .jw-track-note__content-container {\n      align-items: center;\n      background-color: #fff;\n      border-radius: 5px;\n      box-shadow: 0 0 0 rgba(0, 0, 0, .67);\n      padding: 2px 4px 2px 2px;\n    }\n    .jw-overlays .jw-track-note__content-container svg {\n      color: #000;\n      height: 18px;\n      width: 18px;\n    }\n    .jw-overlays .jw-track-note__content-textarea {\n      border: none 0;\n      color: #000;\n      min-width: 160px;\n      outline: none;\n      overflow: hidden;\n      resize: none;\n    }\n  ",document.getElementsByTagName("head")[0].appendChild(n)}(),t.on("ready",(function(){var o=e.trackNotes.map((function(_ref){var c=_ref.note;return{begin:_ref.time,cueType:"trackNote",text:c}}));t.addCues(o),t.addButton('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="jw-svg-icon"><path xmlns="http://www.w3.org/2000/svg" fill="currentColor" d="M448 75.2v361.7c0 24.3-19 43.2-43.2 43.2H43.2C19.3 480 0 461.4 0 436.8V75.2C0 51.1 18.8 32 43.2 32h361.7c24 0 43.1 18.8 43.1 43.2zm-37.3 361.6V75.2c0-3-2.6-5.8-5.8-5.8h-9.3L285.3 144 224 94.1 162.8 144 52.5 69.3h-9.3c-3.2 0-5.8 2.8-5.8 5.8v361.7c0 3 2.6 5.8 5.8 5.8h361.7c3.2.1 5.8-2.7 5.8-5.8zM150.2 186v37H76.7v-37h73.5zm0 74.4v37.3H76.7v-37.3h73.5zm11.1-147.3l54-43.7H96.8l64.5 43.7zm210 72.9v37h-196v-37h196zm0 74.4v37.3h-196v-37.3h196zm-84.6-147.3l64.5-43.7H232.8l53.9 43.7zM371.3 335v37.3h-99.4V335h99.4z"/></svg>',"筆記標註",(function(){m(_assertThisInitialized(_this),p,f).call(_assertThisInitialized(_this))}),"jw-plugin-track-notes")})),_this}return _createClass(l,[{key:"completeAddTrackNote",value:function completeAddTrackNote(t){m(this,d,C).call(this,t)}}]),l}(_createClass((function s(r,t,e){_classCallCheck(this,s),this.playerInstance=r,this.pluginConfig=t,this.pluginDiv=e})));p=new WeakSet,f=function f(){var e,a;this.playerInstance.pause();var t=Math.round(this.playerInstance.getPosition());null==(a=(e=this.pluginConfig).onTrackNoteCreate)||a.call(e,t)},d=new WeakSet,C=function C(t){var _this2=this,e=document.createElement("div");e.setAttribute("class","jw-track-note");var a=document.createElement("div");a.setAttribute("class","jw-track-note__content-container jw-track-note__content-container--edit"),e.appendChild(a);var o=document.createElement("textarea");o.setAttribute("class","jw-track-note__content-textarea"),o.setAttribute("placeholder","新增筆記 (限 50 字)"),o.setAttribute("maxLength","50"),o.setAttribute("rows","1"),a.appendChild(o);var c=document.createElement("span");c.setAttribute("class","jw-track-note__trash-icon-wrapper"),c.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M192 188v216c0 6.627-5.373 12-12 12h-24c-6.627 0-12-5.373-12-12V188c0-6.627 5.373-12 12-12h24c6.627 0 12 5.373 12 12zm100-12h-24c-6.627 0-12 5.373-12 12v216c0 6.627 5.373 12 12 12h24c6.627 0 12-5.373 12-12V188c0-6.627-5.373-12-12-12zm132-96c13.255 0 24 10.745 24 24v12c0 6.627-5.373 12-12 12h-20v336c0 26.51-21.49 48-48 48H80c-26.51 0-48-21.49-48-48V128H12c-6.627 0-12-5.373-12-12v-12c0-13.255 10.745-24 24-24h74.411l34.018-56.696A48 48 0 0 1 173.589 0h100.823a48 48 0 0 1 41.16 23.304L349.589 80H424zm-269.611 0h139.223L276.16 50.913A6 6 0 0 0 271.015 48h-94.028a6 6 0 0 0-5.145 2.913L154.389 80zM368 128H80v330a6 6 0 0 0 6 6h276a6 6 0 0 0 6-6V128z"/></svg>',a.appendChild(c),setTimeout((function(){o.focus()}),50),o.addEventListener("keydown",(function(i){var v,k;if(i.stopPropagation(),"Enter"===i.key){var g={note:o.value,time:t};_this2.playerInstance.addCues([{begin:g.time,text:g.note,cueType:"trackNote"}]),null==(k=(v=_this2.pluginConfig).onTrackNoteUpdate)||k.call(v,g),e.setAttribute("hidden","true"),_this2.playerInstance.play(),i.preventDefault()}})),o.addEventListener("keyup",(function(i){i.preventDefault(),"Escape"===i.key&&(e.setAttribute("hidden","true"),_this2.playerInstance.play())}));var b=this.playerInstance.getPosition()/this.playerInstance.getDuration()*100||0;this.pluginDiv.style.left="calc("+b+"%)",this.pluginDiv.appendChild(e)},l.pluginName="trackNotes",l.playerMinimumVersion="8.14.0";var createPluginStory=__webpack_require__("./utils/createPluginStory.tsx"),dist_esm=(__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js")),addon_docs_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),_excluded=["components"];function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,_excluded);return Object(dist_esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(dist_esm.b)("h1",{id:"jwplayer-plugin-track-notes"},"jwplayer-plugin-track-notes"),Object(dist_esm.b)("p",null,Object(dist_esm.b)("a",{parentName:"p",href:"https://badge.fury.io/js/@hahow%2Fjwplayer-plugin-track-notes",target:"_blank",rel:"nofollow noopener noreferrer"},Object(dist_esm.b)("img",{parentName:"a",src:"https://badge.fury.io/js/@hahow%2Fjwplayer-plugin-track-notes.svg",alt:"npm version"}))),Object(dist_esm.b)("p",null,"🚧 ",Object(dist_esm.b)("strong",{parentName:"p"},"此功能尚未完成")," 🚧"),Object(dist_esm.b)("p",null,"這是一個 JW Player 外掛，允許使用者在播放器的時間軸上標註筆記。"),Object(dist_esm.b)("h2",{id:"table-of-contents"},"Table of Contents"),Object(dist_esm.b)("ul",null,Object(dist_esm.b)("li",{parentName:"ul"},Object(dist_esm.b)("a",{parentName:"li",href:"#demo"},"Demo")),Object(dist_esm.b)("li",{parentName:"ul"},Object(dist_esm.b)("a",{parentName:"li",href:"#external-plugin"},"External Plugin")),Object(dist_esm.b)("li",{parentName:"ul"},Object(dist_esm.b)("a",{parentName:"li",href:"#internal-plugin-not-recommended"},"Internal Plugin")),Object(dist_esm.b)("li",{parentName:"ul"},Object(dist_esm.b)("a",{parentName:"li",href:"#configuration"},"Configuration")),Object(dist_esm.b)("li",{parentName:"ul"},Object(dist_esm.b)("a",{parentName:"li",href:"#instance"},"Instance"))),Object(dist_esm.b)("h2",{id:"demo"},"Demo"),Object(dist_esm.b)(addon_docs_dist_esm.a,{id:"track-notes--track-notes",mdxType:"Story"}),Object(dist_esm.b)("h2",{id:"external-plugin"},"External Plugin"),Object(dist_esm.b)("p",null,"IIFE 格式，JW Player 預設使用 plugin 的方式："),Object(dist_esm.b)("h3",{id:"vanilla-js"},"Vanilla JS"),Object(dist_esm.b)("pre",null,Object(dist_esm.b)("code",{parentName:"pre",className:"language-html"},'<html>\n  <head>\n    <script src="{your_cloud_hosted_player_library_url}"><\/script>\n  </head>\n  <body>\n    <div id="myElement"></div>\n\n    <script type="text/JavaScript">\n      jwplayer("myElement").setup({\n        "playlist": "{your_playlist_url}",\n        "plugins": {\n          "//unpkg.com/@hahow/jwplayer-plugin-watermark@latest/dist/iife/trackNotes.js": {\n            trackNotes: [\n              {\n                note: "Hello Track Notes!",\n                time: 10,\n              },\n              {\n                note: "The Second Note",\n                time: 30,\n              },\n            ],\n            onTrackNoteCreate: (time: number) => {\n              // Do something, e.g., call the backend API.\n            },\n            onTrackNoteUpdate: (trackNote: TrackNoteType) => {\n              // Do something, e.g., call the backend API.\n            },\n          }\n        }\n      });\n    <\/script>\n  </body>\n</html>\n')),Object(dist_esm.b)("h3",{id:"react-js"},"React JS"),Object(dist_esm.b)("p",null,"以 ",Object(dist_esm.b)("a",{parentName:"p",href:"https://github.com/jwplayer/jwplayer-react",target:"_blank",rel:"nofollow noopener noreferrer"},"@jwplayer/jwplayer-react")," 為例，其它 framework 大同小異："),Object(dist_esm.b)("pre",null,Object(dist_esm.b)("code",{parentName:"pre",className:"language-jsx"},"import JWPlayer from '@jwplayer/jwplayer-react';\n\nconst App = () => (\n  return (\n    <JWPlayer\n      library='{your_cloud_hosted_player_library_url}'\n      playlist='{your_playlist_url}'\n      config={{\n        plugins: {\n          \"//unpkg.com/@hahow/jwplayer-plugin-track-notes@latest/dist/iife/trackNotes.js\": {\n            trackNotes: [\n              {\n                note: \"Hello Track Notes!\",\n                time: 10,\n              },\n              {\n                note: \"The Second Note\",\n                time: 30,\n              },\n            ],\n            onTrackNoteCreate: (time: number) => {\n              // Do something, e.g., call the backend API.\n            },\n            onTrackNoteUpdate: (trackNote: TrackNoteType) => {\n              // Do something, e.g., call the backend API.\n            },\n          }\n        },\n      }}\n    />\n  );\n);\n")),Object(dist_esm.b)("h2",{id:"internal-plugin-not-recommended"},"Internal Plugin (not recommended)"),Object(dist_esm.b)("p",null,"CJS & EMS 格式，非官方使用 plugin 的方式，不建議使用："),Object(dist_esm.b)("ol",null,Object(dist_esm.b)("li",{parentName:"ol"},Object(dist_esm.b)("inlineCode",{parentName:"li"},"npm install @hahow/jwplayer-plugin-track-notes")),Object(dist_esm.b)("li",{parentName:"ol"},"載入 plugin module ",Object(dist_esm.b)("inlineCode",{parentName:"li"},"TrackNotesPlugin")),Object(dist_esm.b)("li",{parentName:"ol"},"建立一份空的 ",Object(dist_esm.b)("inlineCode",{parentName:"li"},"trackNotes.js"),"，放在 application 可以讀取的位置（例如 ",Object(dist_esm.b)("inlineCode",{parentName:"li"},"/"),"）"),Object(dist_esm.b)("li",{parentName:"ol"},"使用 JWP 的 ",Object(dist_esm.b)("inlineCode",{parentName:"li"},"registerPlugin()")," API 註冊 plugin")),Object(dist_esm.b)("pre",null,Object(dist_esm.b)("code",{parentName:"pre",className:"language-jsx"},'import JWPlayer from \'@jwplayer/jwplayer-react\';\n\nimport { TrackNotesPlugin } from "@hahow/jwplayer-plugin-track-notes";\n\nconst App = () => (\n  return (\n    <JWPlayer\n      library=\'{your_cloud_hosted_player_library_url}\'\n      playlist=\'{your_playlist_url}\'\n      config={{\n        plugins: {\n          "/trackNotes.js": {\n            trackNotes: [\n              {\n                note: "Hello Track Notes!",\n                time: 10,\n              },\n              {\n                note: "The Second Note",\n                time: 30,\n              },\n            ],\n            onTrackNoteCreate: (time: number) => {\n              // Do something, e.g., call the backend API.\n            },\n            onTrackNoteUpdate: (trackNote: TrackNoteType) => {\n              // Do something, e.g., call the backend API.\n            },\n          }\n        },\n      }}\n      didMountCallback={({ player }) => {\n        player.registerPlugin(\n          TrackNotesPlugin.pluginName,\n          TrackNotesPlugin.playerMinimumVersion,\n          TrackNotesPlugin\n        );\n      }}\n    />\n  );\n);\n')),Object(dist_esm.b)("h2",{id:"configuration"},"Configuration"),Object(dist_esm.b)("table",null,Object(dist_esm.b)("thead",{parentName:"table"},Object(dist_esm.b)("tr",{parentName:"thead"},Object(dist_esm.b)("th",{parentName:"tr",align:null},"config"),Object(dist_esm.b)("th",{parentName:"tr",align:null},"type"),Object(dist_esm.b)("th",{parentName:"tr",align:null},"default"),Object(dist_esm.b)("th",{parentName:"tr",align:null},"description"))),Object(dist_esm.b)("tbody",{parentName:"table"},Object(dist_esm.b)("tr",{parentName:"tbody"},Object(dist_esm.b)("td",{parentName:"tr",align:null},Object(dist_esm.b)("inlineCode",{parentName:"td"},"onTrackNoteCreate")),Object(dist_esm.b)("td",{parentName:"tr",align:null},Object(dist_esm.b)("inlineCode",{parentName:"td"},"(time: number) => void")),Object(dist_esm.b)("td",{parentName:"tr",align:null},Object(dist_esm.b)("inlineCode",{parentName:"td"},"undefined")),Object(dist_esm.b)("td",{parentName:"tr",align:null},"新增筆記標註的 callback")),Object(dist_esm.b)("tr",{parentName:"tbody"},Object(dist_esm.b)("td",{parentName:"tr",align:null},Object(dist_esm.b)("inlineCode",{parentName:"td"},"onTrackNoteUpdate")),Object(dist_esm.b)("td",{parentName:"tr",align:null},Object(dist_esm.b)("inlineCode",{parentName:"td"},"(trackNote: { note: string; time: number; }) => void")),Object(dist_esm.b)("td",{parentName:"tr",align:null},Object(dist_esm.b)("inlineCode",{parentName:"td"},"undefined")),Object(dist_esm.b)("td",{parentName:"tr",align:null},"更新筆記標註的 callback")),Object(dist_esm.b)("tr",{parentName:"tbody"},Object(dist_esm.b)("td",{parentName:"tr",align:null},Object(dist_esm.b)("inlineCode",{parentName:"td"},"trackNotes")),Object(dist_esm.b)("td",{parentName:"tr",align:null},Object(dist_esm.b)("inlineCode",{parentName:"td"},"Array<{ note: string; time: number; }>")),Object(dist_esm.b)("td",{parentName:"tr",align:null},Object(dist_esm.b)("inlineCode",{parentName:"td"},"undefined")),Object(dist_esm.b)("td",{parentName:"tr",align:null},"筆記標註內容")))),Object(dist_esm.b)("h2",{id:"instance"},"Instance"),Object(dist_esm.b)("p",null,"可以透過 JW Player 的 ",Object(dist_esm.b)("inlineCode",{parentName:"p"},"getPlugin()")," API 取得 plugin 的 instance："),Object(dist_esm.b)("pre",null,Object(dist_esm.b)("code",{parentName:"pre",className:"language-js"},'const trackNotesPluginInstance = jwplayer().getPlugin("trackNotes");\n\n// 透過 instance 就可以呼叫相關 methods\ntrackNotesPluginInstance.completeAddTrackNote(...);\n')),Object(dist_esm.b)("table",null,Object(dist_esm.b)("thead",{parentName:"table"},Object(dist_esm.b)("tr",{parentName:"thead"},Object(dist_esm.b)("th",{parentName:"tr",align:null},"method"),Object(dist_esm.b)("th",{parentName:"tr",align:null},"type"),Object(dist_esm.b)("th",{parentName:"tr",align:null},"description"))),Object(dist_esm.b)("tbody",{parentName:"table"},Object(dist_esm.b)("tr",{parentName:"tbody"},Object(dist_esm.b)("td",{parentName:"tr",align:null},"🧪 ",Object(dist_esm.b)("inlineCode",{parentName:"td"},"completeAddTrackNote")),Object(dist_esm.b)("td",{parentName:"tr",align:null},Object(dist_esm.b)("inlineCode",{parentName:"td"},"(time: number) => void")),Object(dist_esm.b)("td",{parentName:"tr",align:null},"Demo 用，",Object(dist_esm.b)("inlineCode",{parentName:"td"},"1.0.0")," 之後可能會移除")))))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;__webpack_exports__.default={title:"Track Notes",component:jwplayer_react_default.a,argTypes:{onTrackNoteUpdate:{action:"clicked"}},parameters:{docs:{page:MDXContent}}};var TrackNotes=Object(createPluginStory.a)({pluginName:"trackNotes",playerMinimumVersion:"8.14.0",pluginClassOrFunction:l,pluginScriptUrl:"//unpkg.com/@hahow/jwplayer-plugin-track-notes@latest/dist/iife/trackNotes.js",pluginConfig:{trackNotes:[{time:10,note:"Hello Track Notes!"},{time:30,note:"The Second Note"}],onTrackNoteCreate:function onTrackNoteCreate(time){Object(esm.action)("onTrackNoteCreate")(time),jwplayer().getPlugin("trackNotes").completeAddTrackNote(time)},onTrackNoteUpdate:function onTrackNoteUpdate(trackNote){Object(esm.action)("onTrackNoteUpdate")(trackNote)}},storyArgs:{config:{height:360,width:640,timeSlider:{legacy:!0}},file:"https://cdn.jwplayer.com/manifests/GXbUbwm0.m3u8",library:"https://cdn.jwplayer.com/libraries/5vuW2BEP.js"}})},"./stories/Watermark.stories.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Watermark",(function(){return Watermark}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js");var jwplayer_react=__webpack_require__("../../node_modules/@jwplayer/jwplayer-react/lib/jwplayer-react.js"),jwplayer_react_default=__webpack_require__.n(jwplayer_react);__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.set-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.get-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.reflect.construct.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.create.js");function _setPrototypeOf(o,p){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function _setPrototypeOf(o,p){return o.__proto__=p,o},_setPrototypeOf(o,p)}function _createSuper(Derived){var hasNativeReflectConstruct=function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function _createSuperInternal(){var result,Super=_getPrototypeOf(Derived);if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else result=Super.apply(this,arguments);return _possibleConstructorReturn(this,result)}}function _possibleConstructorReturn(self,call){if(call&&("object"==typeof call||"function"==typeof call))return call;if(void 0!==call)throw new TypeError("Derived constructors may only return object or undefined");return function _assertThisInitialized(self){if(void 0===self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return self}(self)}function _getPrototypeOf(o){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)},_getPrototypeOf(o)}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Object.defineProperty(Constructor,"prototype",{writable:!1}),Constructor}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var l=function(_r){!function _inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function");subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:!0,configurable:!0}}),Object.defineProperty(subClass,"prototype",{writable:!1}),superClass&&_setPrototypeOf(subClass,superClass)}(l,_r);var _super=_createSuper(l);function l(n,t,e){var _this;return _classCallCheck(this,l),_this=_super.call(this,n,t,e),n.on("ready",(function(p){var i,o;e.style.top="0",e.style.bottom="0",e.style.left="0",e.style.right="0",e.style.display="flex",e.style.justifyContent="center",e.style.alignItems="center",e.style.pointerEvents="none";var a=document.createElement("div");Object.assign(a.style,null!=(i=t.style)?i:{}),a.innerHTML=null!=(o=t.html)?o:"",e.appendChild(a)})),_this}return _createClass(l)}(_createClass((function r(n,t,e){_classCallCheck(this,r),this.playerInstance=n,this.pluginConfig=t,this.pluginDiv=e})));l.pluginName="watermark",l.playerMinimumVersion="8.0.0";var createPluginStory=__webpack_require__("./utils/createPluginStory.tsx"),esm=(__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js")),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),_excluded=["components"];function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,_excluded);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)("h1",{id:"jwplayer-plugin-watermark"},"jwplayer-plugin-watermark"),Object(esm.b)("p",null,Object(esm.b)("a",{parentName:"p",href:"https://badge.fury.io/js/@hahow%2Fjwplayer-plugin-watermark",target:"_blank",rel:"nofollow noopener noreferrer"},Object(esm.b)("img",{parentName:"a",src:"https://badge.fury.io/js/@hahow%2Fjwplayer-plugin-watermark.svg",alt:"npm version"}))),Object(esm.b)("p",null,"這是一個 JW Player plugin，允許在播放器上面顯示浮水印。"),Object(esm.b)("h2",{id:"table-of-contents"},"Table of Contents"),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"#demo"},"Demo")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"#external-plugin"},"External Plugin")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"#internal-plugin-not-recommended"},"Internal Plugin")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"#configuration"},"Configuration"))),Object(esm.b)("h2",{id:"demo"},"Demo"),Object(esm.b)(dist_esm.a,{id:"watermark--watermark",mdxType:"Story"}),Object(esm.b)("h2",{id:"external-plugin"},"External Plugin"),Object(esm.b)("p",null,"IIFE 格式，JW Player 預設使用 plugin 的方式："),Object(esm.b)("h3",{id:"vanilla-js"},"Vanilla JS"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<html>\n  <head>\n    <script src="{your_cloud_hosted_player_library_url}"><\/script>\n  </head>\n  <body>\n    <div id="myElement"></div>\n\n    <script type="text/JavaScript">\n      jwplayer("myElement").setup({\n        "playlist": "{your_playlist_url}",\n        "plugins": {\n          "//unpkg.com/@hahow/jwplayer-plugin-watermark@latest/dist/iife/watermark.js": {\n            html: "影片資源請勿外流",\n            style: {\n              color: "rgba(179, 179, 179, 0.3)",\n              transform: "rotate(20deg)",\n            }\n          }\n        }\n      });\n    <\/script>\n  </body>\n</html>\n')),Object(esm.b)("h3",{id:"react-js"},"React JS"),Object(esm.b)("p",null,"以 ",Object(esm.b)("a",{parentName:"p",href:"https://github.com/jwplayer/jwplayer-react",target:"_blank",rel:"nofollow noopener noreferrer"},"@jwplayer/jwplayer-react")," 為例，其它 framework 大同小異："),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-jsx"},'import JWPlayer from \'@jwplayer/jwplayer-react\';\n\nconst App = () => (\n  return (\n    <JWPlayer\n      library=\'{your_cloud_hosted_player_library_url}\'\n      playlist=\'{your_playlist_url}\'\n      config={{\n        plugins: {\n          "//unpkg.com/@hahow/jwplayer-plugin-watermark@latest/dist/iife/watermark.js": {\n            html: "影片資源請勿外流",\n            style: {\n              color: "rgba(179, 179, 179, 0.3)",\n              transform: "rotate(20deg)",\n            }\n          }\n        },\n      }}\n    />\n  );\n);\n')),Object(esm.b)("h2",{id:"internal-plugin-not-recommended"},"Internal Plugin (not recommended)"),Object(esm.b)("p",null,"CJS & EMS 格式，非官方使用 plugin 的方式，不建議使用："),Object(esm.b)("ol",null,Object(esm.b)("li",{parentName:"ol"},Object(esm.b)("inlineCode",{parentName:"li"},"npm install @hahow/jwplayer-plugin-watermark")),Object(esm.b)("li",{parentName:"ol"},"載入 plugin module ",Object(esm.b)("inlineCode",{parentName:"li"},"WatermarkPlugin")),Object(esm.b)("li",{parentName:"ol"},"建立一份空的 ",Object(esm.b)("inlineCode",{parentName:"li"},"watermark.js"),"，放在 application 可以讀取的位置（例如 ",Object(esm.b)("inlineCode",{parentName:"li"},"/"),"）"),Object(esm.b)("li",{parentName:"ol"},"使用 JWP 的 ",Object(esm.b)("inlineCode",{parentName:"li"},"registerPlugin()")," API 註冊 plugin")),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-jsx"},'import JWPlayer from \'@jwplayer/jwplayer-react\';\n\nimport { WatermarkPlugin } from "@hahow/jwplayer-plugin-watermark";\n\nconst App = () => (\n  return (\n    <JWPlayer\n      library=\'{your_cloud_hosted_player_library_url}\'\n      playlist=\'{your_playlist_url}\'\n      config={{\n        plugins: {\n          "/watermark.js": {\n            html: "影片資源請勿外流",\n            style: {\n              color: "rgba(179, 179, 179, 0.3)",\n              transform: "rotate(20deg)",\n            }\n          }\n        },\n      }}\n      didMountCallback={({ player }) => {\n        player.registerPlugin(\n          WatermarkPlugin.pluginName,\n          WatermarkPlugin.playerMinimumVersion,\n          WatermarkPlugin\n        );\n      }}\n    />\n  );\n);\n')),Object(esm.b)("h2",{id:"configuration"},"Configuration"),Object(esm.b)("table",null,Object(esm.b)("thead",{parentName:"table"},Object(esm.b)("tr",{parentName:"thead"},Object(esm.b)("th",{parentName:"tr",align:null},"config"),Object(esm.b)("th",{parentName:"tr",align:null},"type"),Object(esm.b)("th",{parentName:"tr",align:null},"default"),Object(esm.b)("th",{parentName:"tr",align:null},"description"))),Object(esm.b)("tbody",{parentName:"table"},Object(esm.b)("tr",{parentName:"tbody"},Object(esm.b)("td",{parentName:"tr",align:null},Object(esm.b)("inlineCode",{parentName:"td"},"html")),Object(esm.b)("td",{parentName:"tr",align:null},Object(esm.b)("inlineCode",{parentName:"td"},"string")),Object(esm.b)("td",{parentName:"tr",align:null},Object(esm.b)("inlineCode",{parentName:"td"},'""')),Object(esm.b)("td",{parentName:"tr",align:null},"浮水印內容，HTML 格式")),Object(esm.b)("tr",{parentName:"tbody"},Object(esm.b)("td",{parentName:"tr",align:null},Object(esm.b)("inlineCode",{parentName:"td"},"style")),Object(esm.b)("td",{parentName:"tr",align:null},Object(esm.b)("inlineCode",{parentName:"td"},"Partial<CSSStyleDeclaration>")),Object(esm.b)("td",{parentName:"tr",align:null},Object(esm.b)("inlineCode",{parentName:"td"},"{}")),Object(esm.b)("td",{parentName:"tr",align:null},"自訂浮水印樣式")))))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;__webpack_exports__.default={title:"Watermark",component:jwplayer_react_default.a,parameters:{docs:{page:MDXContent}}};var Watermark=Object(createPluginStory.a)({pluginName:"watermark",playerMinimumVersion:"8.0.0",pluginClassOrFunction:l,pluginScriptUrl:"//unpkg.com/@hahow/jwplayer-plugin-watermark@latest/dist/iife/watermark.js",pluginConfig:{html:"影片資源請勿外流 影片資源請勿外流 影片資源請勿外流",style:{color:"rgba(179, 179, 179, 0.3)",fontSize:"16px",fontWeight:"600",lineHeight:"26px",transform:"rotate(20deg)",whiteSpace:"nowrap"}},storyArgs:{config:{height:360,width:640},file:"https://cdn.jwplayer.com/manifests/GXbUbwm0.m3u8",library:"https://cdn.jwplayer.com/libraries/5vuW2BEP.js"}});Watermark.parameters=Object.assign({storySource:{source:'createPluginStory({\n  pluginName: "watermark",\n  playerMinimumVersion: "8.0.0",\n  pluginClassOrFunction: WatermarkPlugin,\n  pluginScriptUrl:\n    "//unpkg.com/@hahow/jwplayer-plugin-watermark@latest/dist/iife/watermark.js",\n  pluginConfig: {\n    html: "影片資源請勿外流 影片資源請勿外流 影片資源請勿外流",\n    style: {\n      color: "rgba(179, 179, 179, 0.3)",\n      fontSize: "16px",\n      fontWeight: "600",\n      lineHeight: "26px",\n      transform: "rotate(20deg)",\n      whiteSpace: "nowrap",\n    },\n  },\n  storyArgs: {\n    config: {\n      height: 360,\n      width: 640,\n    },\n    file: "https://cdn.jwplayer.com/manifests/GXbUbwm0.m3u8",\n    library: "https://cdn.jwplayer.com/libraries/5vuW2BEP.js",\n  },\n})'}},Watermark.parameters)},"./storybook-init-framework-entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);__webpack_require__("../../node_modules/@storybook/react/dist/esm/client/index.js")},"./utils/createPluginStory.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js");var _jwplayer_jwplayer_react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/@jwplayer/jwplayer-react/lib/jwplayer-react.js"),_jwplayer_jwplayer_react__WEBPACK_IMPORTED_MODULE_2___default=__webpack_require__.n(_jwplayer_jwplayer_react__WEBPACK_IMPORTED_MODULE_2__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/react/jsx-runtime.js"),createPluginStory=function createPluginStory(_ref){_ref.playerMinimumVersion,_ref.pluginClassOrFunction;var _storyArgs$config,_ref4,pluginConfig=_ref.pluginConfig,pluginScriptUrl=(_ref.pluginName,_ref.pluginScriptUrl),storyArgs=_ref.storyArgs,Story=function Template(args){return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_jwplayer_jwplayer_react__WEBPACK_IMPORTED_MODULE_2___default.a,Object.assign({didMountCallback:function didMountCallback(_ref2){_ref2.player}},args))}.bind({});return Story.args=Object.assign({},storyArgs,{config:Object.assign({},storyArgs.config,{plugins:Object.assign({},null===(_storyArgs$config=storyArgs.config)||void 0===_storyArgs$config?void 0:_storyArgs$config.plugins,(_ref4={},_ref4[pluginScriptUrl]=Object.assign({},pluginConfig),_ref4))})}),Story};__webpack_exports__.a=createPluginStory;try{createPluginStory.displayName="createPluginStory",createPluginStory.__docgenInfo={description:"",displayName:"createPluginStory",props:{playerMinimumVersion:{defaultValue:null,description:"Minimum player version required the plugin",name:"playerMinimumVersion",required:!0,type:{name:"string"}},pluginClassOrFunction:{defaultValue:null,description:"Plugin function of class to instantiate with new player instances",name:"pluginClassOrFunction",required:!0,type:{name:"Function"}},pluginConfig:{defaultValue:null,description:"TODO:",name:"pluginConfig",required:!0,type:{name:"any"}},pluginName:{defaultValue:null,description:"Name of the plugin matching the name referenced in the `plugins` object of the player\nThe `pluginName` must match the name referenced in the `plugins` object of the player.",name:"pluginName",required:!0,type:{name:"string"}},pluginScriptUrl:{defaultValue:null,description:"the URL of the plugin script that will be added to the `plugins`. When the player is instantiated, the plugin script is downloaded and initialized.",name:"pluginScriptUrl",required:!0,type:{name:"string"}},storyArgs:{defaultValue:null,description:"TODO:",name:"storyArgs",required:!0,type:{name:"JWPlayerProps"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["utils/createPluginStory.tsx#createPluginStory"]={docgenInfo:createPluginStory.__docgenInfo,name:"createPluginStory",path:"utils/createPluginStory.tsx#createPluginStory"})}catch(__react_docgen_typescript_loader_error){}},0:function(module,exports,__webpack_require__){__webpack_require__("../../node_modules/@storybook/core-client/dist/esm/globals/polyfills.js"),__webpack_require__("../../node_modules/@storybook/core-client/dist/esm/globals/globals.js"),__webpack_require__("./storybook-init-framework-entry.js"),__webpack_require__("../../node_modules/@storybook/react/dist/esm/client/docs/config-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-links/preview.js-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-interactions/preview.js-generated-config-entry.js"),__webpack_require__("./.storybook/preview.js-generated-config-entry.js"),module.exports=__webpack_require__("./generated-stories-entry.js")},1:function(module,exports){}},[[0,4,5]]]);
-//# sourceMappingURL=main.612d2790.iframe.bundle.js.map
\ No newline at end of file
+/*! For license information please see main.dfe60d44.iframe.bundle.js.LICENSE.txt */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{"./.storybook/preview.js-generated-config-entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var preview_namespaceObject={};__webpack_require__.r(preview_namespaceObject),__webpack_require__.d(preview_namespaceObject,"parameters",(function(){return parameters})),__webpack_require__.d(preview_namespaceObject,"decorators",(function(){return decorators}));__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.get-own-property-descriptor.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.get-own-property-descriptors.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-properties.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js");var ClientApi=__webpack_require__("../../node_modules/@storybook/client-api/dist/esm/ClientApi.js"),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js"),GitHubCorner_GitHubCorner=function GitHubCorner(_ref){var url=_ref.url;return Object(jsx_runtime.jsx)(jsx_runtime.Fragment,{children:Object(jsx_runtime.jsx)("a",{href:url,"aria-label":"View source on GitHub",children:Object(jsx_runtime.jsxs)("svg",{width:"80",height:"80",viewBox:"0 0 250 250",style:{fill:"#151513",color:"#fff",position:"absolute",top:0,border:0,right:0},"aria-hidden":"true",children:[Object(jsx_runtime.jsx)("path",{d:"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"}),Object(jsx_runtime.jsx)("path",{d:"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2",fill:"currentColor",style:{transformOrigin:"130px 106px"}}),Object(jsx_runtime.jsx)("path",{d:"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z",fill:"currentColor"})]})})})},components_GitHubCorner=GitHubCorner_GitHubCorner;try{GitHubCorner_GitHubCorner.displayName="GitHubCorner",GitHubCorner_GitHubCorner.__docgenInfo={description:"https://tholman.com/github-corners/",displayName:"GitHubCorner",props:{url:{defaultValue:null,description:"",name:"url",required:!0,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["components/GitHubCorner.tsx#GitHubCorner"]={docgenInfo:GitHubCorner_GitHubCorner.__docgenInfo,name:"GitHubCorner",path:"components/GitHubCorner.tsx#GitHubCorner"})}catch(__react_docgen_typescript_loader_error){}var parameters={actions:{argTypesRegex:"^on[A-Z].*"},controls:{matchers:{color:/(background|color)$/i,date:/Date$/}}},decorators=[function(Story){return Object(jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[Object(jsx_runtime.jsx)(Story,{}),Object(jsx_runtime.jsx)(components_GitHubCorner,{url:"https://github.com/hahow/jwplayer-plugins"})]})}];function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Object.keys(preview_namespaceObject).forEach((function(key){var value=preview_namespaceObject[key];switch(key){case"args":return Object(ClientApi.d)(value);case"argTypes":return Object(ClientApi.b)(value);case"decorators":return value.forEach((function(decorator){return Object(ClientApi.f)(decorator,!1)}));case"loaders":return value.forEach((function(loader){return Object(ClientApi.g)(loader,!1)}));case"parameters":return Object(ClientApi.h)(function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach((function(key){_defineProperty(target,key,source[key])})):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach((function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))}))}return target}({},value),!1);case"argTypesEnhancers":return value.forEach((function(enhancer){return Object(ClientApi.c)(enhancer)}));case"argsEnhancers":return value.forEach((function(enhancer){return Object(ClientApi.e)(enhancer)}));case"render":return Object(ClientApi.i)(value);case"globals":case"globalTypes":var v={};return v[key]=value,Object(ClientApi.h)(v,!1);case"__namedExportsOrder":case"decorateStory":case"renderToDOM":return null;default:return console.log(key+" was not supported :( !")}}))},"./generated-stories-entry.js":function(module,exports,__webpack_require__){"use strict";(function(module){(0,__webpack_require__("../../node_modules/@storybook/react/dist/esm/client/index.js").configure)([__webpack_require__("./stories sync recursive ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"),__webpack_require__("./stories sync recursive ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$")],module,!1)}).call(this,__webpack_require__("../../node_modules/webpack/buildin/module.js")(module))},"./stories sync recursive ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$":function(module,exports,__webpack_require__){var map={"./FullViewport.stories.tsx":"./stories/FullViewport.stories.tsx","./Screenshot.stories.tsx":"./stories/Screenshot.stories.tsx","./TrackNotes.stories.tsx":"./stories/TrackNotes.stories.tsx","./Watermark.stories.tsx":"./stories/Watermark.stories.tsx"};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id="./stories sync recursive ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"},"./stories sync recursive ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$":function(module,exports){function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=function(){return[]},webpackEmptyContext.resolve=webpackEmptyContext,module.exports=webpackEmptyContext,webpackEmptyContext.id="./stories sync recursive ^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},"./stories/FullViewport.stories.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"FullViewport",(function(){return FullViewport}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js");var jwplayer_react=__webpack_require__("../../node_modules/@jwplayer/jwplayer-react/lib/jwplayer-react.js"),jwplayer_react_default=__webpack_require__.n(jwplayer_react);__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.set-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.get-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.reflect.construct.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.create.js");function _setPrototypeOf(o,p){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function _setPrototypeOf(o,p){return o.__proto__=p,o},_setPrototypeOf(o,p)}function _createSuper(Derived){var hasNativeReflectConstruct=function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function _createSuperInternal(){var result,Super=_getPrototypeOf(Derived);if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else result=Super.apply(this,arguments);return _possibleConstructorReturn(this,result)}}function _possibleConstructorReturn(self,call){if(call&&("object"==typeof call||"function"==typeof call))return call;if(void 0!==call)throw new TypeError("Derived constructors may only return object or undefined");return function _assertThisInitialized(self){if(void 0===self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return self}(self)}function _getPrototypeOf(o){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)},_getPrototypeOf(o)}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Object.defineProperty(Constructor,"prototype",{writable:!1}),Constructor}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var r=function(_n){!function _inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function");subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:!0,configurable:!0}}),Object.defineProperty(subClass,"prototype",{writable:!1}),superClass&&_setPrototypeOf(subClass,superClass)}(r,_n);var _super=_createSuper(r);function r(e,i,s){var _this;_classCallCheck(this,r),_this=_super.call(this,e,i,s);var l=document.createElement("style");return l.type="text/css",l.innerHTML="\n      .jwplayer.jw-fullscreen-web {\n        bottom: 0;\n        height: 100% !important;\n        left: 0;\n        position: fixed;\n        right: 0;\n        top: 0;\n        width: 100% !important;\n        z-index: 9999;\n      }\n    ",document.getElementsByTagName("head")[0].appendChild(l),e.on("ready",(function(){var a=e.getContainer();e.addButton('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1152 1024" class="jw-svg-icon"><path fill="currentColor" d="M1075.2 0H76.8A76.8 76.8 0 0 0 0 76.8v870.4A76.8 76.8 0 0 0 76.8 1024h998.4a76.8 76.8 0 0 0 76.8-76.8V76.8A76.8 76.8 0 0 0 1075.2 0zM1024 128v768H128V128h896zM448 192a64 64 0 0 1 7.488 127.552L448 320H320v128a64 64 0 0 1-56.512 63.552L256 512a64 64 0 0 1-63.552-56.512L192 448V262.592c0-34.432 25.024-66.112 61.632-70.144L261.632 192H448zM704 832a64 64 0 0 1-7.488-127.552L704 704h128V576a64 64 0 0 1 56.512-63.552L896 512a64 64 0 0 1 63.552 56.512L960 576v185.408c0 34.496-25.024 66.112-61.632 70.208l-8 0.384H704z"></path></svg>',"劇院模式",(function w(){!function m(t,e){return t.classList.contains(e)}(a,"jw-fullscreen-web")?function g(t,e){return t.classList.add(e)}(a,"jw-fullscreen-web"):function u(t,e){return t.classList.remove(e)}(a,"jw-fullscreen-web")}),"jw-plugin-full-viewport")})),_this}return _createClass(r)}(_createClass((function n(e,i,s){_classCallCheck(this,n),this.playerInstance=e,this.pluginConfig=i,this.pluginDiv=s})));r.pluginName="fullViewport",r.playerMinimumVersion="8.0.0";var createPluginStory=__webpack_require__("./utils/createPluginStory.tsx"),esm=(__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js")),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),_excluded=["components"];function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,_excluded);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)("h1",{id:"jwplayer-plugin-full-viewport"},"jwplayer-plugin-full-viewport"),Object(esm.b)("p",null,Object(esm.b)("a",{parentName:"p",href:"https://badge.fury.io/js/@hahow%2Fjwplayer-plugin-full-viewport",target:"_blank",rel:"nofollow noopener noreferrer"},Object(esm.b)("img",{parentName:"a",src:"https://badge.fury.io/js/@hahow%2Fjwplayer-plugin-full-viewport.svg",alt:"npm version"}))),Object(esm.b)("p",null,"劇院模式，又稱作「視窗全螢幕」。可以將播放器放大至整個瀏覽器（viewport），相較於全螢幕（full-screen）模式，操作上更為方便。"),Object(esm.b)("h2",{id:"table-of-contents"},"Table of Contents"),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"#demo"},"Demo")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"#external-plugin"},"External Plugin")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"#internal-plugin-not-recommended"},"Internal Plugin"))),Object(esm.b)("h2",{id:"demo"},"Demo"),Object(esm.b)(dist_esm.a,{id:"full-viewport--full-viewport",mdxType:"Story"}),Object(esm.b)("h2",{id:"external-plugin"},"External Plugin"),Object(esm.b)("p",null,"IIFE 格式，JW Player 預設使用 plugin 的方式："),Object(esm.b)("h3",{id:"vanilla-js"},"Vanilla JS"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<html>\n  <head>\n    <script src="{your_cloud_hosted_player_library_url}"><\/script>\n  </head>\n  <body>\n    <div id="myElement"></div>\n\n    <script type="text/JavaScript">\n      jwplayer("myElement").setup({\n        "playlist": "{your_playlist_url}",\n        "plugins": {\n          "//unpkg.com/@hahow/jwplayer-plugin-full-viewport@latest/dist/iife/fullViewport.js": {}\n        }\n      });\n    <\/script>\n  </body>\n</html>\n')),Object(esm.b)("h3",{id:"react-js"},"React JS"),Object(esm.b)("p",null,"以 ",Object(esm.b)("a",{parentName:"p",href:"https://github.com/jwplayer/jwplayer-react",target:"_blank",rel:"nofollow noopener noreferrer"},"@jwplayer/jwplayer-react")," 為例，其它 framework 大同小異："),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-jsx"},"import JWPlayer from '@jwplayer/jwplayer-react';\n\nconst App = () => (\n  return (\n    <JWPlayer\n      library='{your_cloud_hosted_player_library_url}'\n      playlist='{your_playlist_url}'\n      config={{\n        plugins: {\n          \"//unpkg.com/@hahow/jwplayer-plugin-full-viewport@latest/dist/iife/fullViewport.js\": {},\n        },\n      }}\n    />\n  );\n);\n")),Object(esm.b)("h2",{id:"internal-plugin-not-recommended"},"Internal Plugin (not recommended)"),Object(esm.b)("p",null,"CJS & EMS 格式，非官方使用 plugin 的方式，不建議使用："),Object(esm.b)("ol",null,Object(esm.b)("li",{parentName:"ol"},Object(esm.b)("inlineCode",{parentName:"li"},"npm install @hahow/jwplayer-plugin-full-viewport")),Object(esm.b)("li",{parentName:"ol"},"載入 plugin module ",Object(esm.b)("inlineCode",{parentName:"li"},"FullViewportPlugin")),Object(esm.b)("li",{parentName:"ol"},"建立一份空的 ",Object(esm.b)("inlineCode",{parentName:"li"},"fullViewport.js"),"，放在 application 可以讀取的位置（例如 ",Object(esm.b)("inlineCode",{parentName:"li"},"/"),"）"),Object(esm.b)("li",{parentName:"ol"},"使用 JWP 的 ",Object(esm.b)("inlineCode",{parentName:"li"},"registerPlugin()")," API 註冊 plugin")),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-jsx"},"import JWPlayer from '@jwplayer/jwplayer-react';\n\nimport { FullViewportPlugin } from \"@hahow/jwplayer-plugin-full-viewport\";\n\nconst App = () => (\n  return (\n    <JWPlayer\n      library='{your_cloud_hosted_player_library_url}'\n      playlist='{your_playlist_url}'\n      config={{\n        plugins: {\n          \"/fullViewport.js\": {},\n        },\n      }}\n      didMountCallback={({ player }) => {\n        player.registerPlugin(\n          FullViewportPlugin.pluginName,\n          FullViewportPlugin.playerMinimumVersion,\n          FullViewportPlugin\n        );\n      }}\n    />\n  );\n);\n")))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;__webpack_exports__.default={title:"Full Viewport",component:jwplayer_react_default.a,parameters:{docs:{page:MDXContent}}};var FullViewport=Object(createPluginStory.a)({pluginName:"fullViewport",playerMinimumVersion:"8.0.0",pluginClassOrFunction:r,pluginScriptUrl:"//unpkg.com/@hahow/jwplayer-plugin-full-viewport@latest/dist/iife/fullViewport.js",pluginConfig:{},storyArgs:{config:{height:360,width:640},file:"https://cdn.jwplayer.com/manifests/GXbUbwm0.m3u8",library:"https://cdn.jwplayer.com/libraries/5vuW2BEP.js"}});FullViewport.parameters=Object.assign({storySource:{source:'createPluginStory({\n  pluginName: "fullViewport",\n  playerMinimumVersion: "8.0.0",\n  pluginClassOrFunction: FullViewportPlugin,\n  pluginScriptUrl:\n    "//unpkg.com/@hahow/jwplayer-plugin-full-viewport@latest/dist/iife/fullViewport.js",\n  pluginConfig: {},\n  storyArgs: {\n    config: {\n      height: 360,\n      width: 640,\n    },\n    file: "https://cdn.jwplayer.com/manifests/GXbUbwm0.m3u8",\n    library: "https://cdn.jwplayer.com/libraries/5vuW2BEP.js",\n  },\n})'}},FullViewport.parameters)},"./stories/Screenshot.stories.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Screenshot",(function(){return Screenshot}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js");var jwplayer_react=__webpack_require__("../../node_modules/@jwplayer/jwplayer-react/lib/jwplayer-react.js"),jwplayer_react_default=__webpack_require__.n(jwplayer_react);__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/web.url.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.set-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.get-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.reflect.construct.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.create.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.async-iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.to-string-tag.js"),__webpack_require__("../../node_modules/core-js/modules/es.math.to-string-tag.js"),__webpack_require__("../../node_modules/core-js/modules/es.json.to-string-tag.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.reverse.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js");function _regeneratorRuntime(){_regeneratorRuntime=function _regeneratorRuntime(){return exports};var exports={},Op=Object.prototype,hasOwn=Op.hasOwnProperty,$Symbol="function"==typeof Symbol?Symbol:{},iteratorSymbol=$Symbol.iterator||"@@iterator",asyncIteratorSymbol=$Symbol.asyncIterator||"@@asyncIterator",toStringTagSymbol=$Symbol.toStringTag||"@@toStringTag";function define(obj,key,value){return Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}),obj[key]}try{define({},"")}catch(err){define=function define(obj,key,value){return obj[key]=value}}function wrap(innerFn,outerFn,self,tryLocsList){var protoGenerator=outerFn&&outerFn.prototype instanceof Generator?outerFn:Generator,generator=Object.create(protoGenerator.prototype),context=new Context(tryLocsList||[]);return generator._invoke=function(innerFn,self,context){var state="suspendedStart";return function(method,arg){if("executing"===state)throw new Error("Generator is already running");if("completed"===state){if("throw"===method)throw arg;return doneResult()}for(context.method=method,context.arg=arg;;){var delegate=context.delegate;if(delegate){var delegateResult=maybeInvokeDelegate(delegate,context);if(delegateResult){if(delegateResult===ContinueSentinel)continue;return delegateResult}}if("next"===context.method)context.sent=context._sent=context.arg;else if("throw"===context.method){if("suspendedStart"===state)throw state="completed",context.arg;context.dispatchException(context.arg)}else"return"===context.method&&context.abrupt("return",context.arg);state="executing";var record=tryCatch(innerFn,self,context);if("normal"===record.type){if(state=context.done?"completed":"suspendedYield",record.arg===ContinueSentinel)continue;return{value:record.arg,done:context.done}}"throw"===record.type&&(state="completed",context.method="throw",context.arg=record.arg)}}}(innerFn,self,context),generator}function tryCatch(fn,obj,arg){try{return{type:"normal",arg:fn.call(obj,arg)}}catch(err){return{type:"throw",arg:err}}}exports.wrap=wrap;var ContinueSentinel={};function Generator(){}function GeneratorFunction(){}function GeneratorFunctionPrototype(){}var IteratorPrototype={};define(IteratorPrototype,iteratorSymbol,(function(){return this}));var getProto=Object.getPrototypeOf,NativeIteratorPrototype=getProto&&getProto(getProto(values([])));NativeIteratorPrototype&&NativeIteratorPrototype!==Op&&hasOwn.call(NativeIteratorPrototype,iteratorSymbol)&&(IteratorPrototype=NativeIteratorPrototype);var Gp=GeneratorFunctionPrototype.prototype=Generator.prototype=Object.create(IteratorPrototype);function defineIteratorMethods(prototype){["next","throw","return"].forEach((function(method){define(prototype,method,(function(arg){return this._invoke(method,arg)}))}))}function AsyncIterator(generator,PromiseImpl){function invoke(method,arg,resolve,reject){var record=tryCatch(generator[method],generator,arg);if("throw"!==record.type){var result=record.arg,value=result.value;return value&&"object"==typeof value&&hasOwn.call(value,"__await")?PromiseImpl.resolve(value.__await).then((function(value){invoke("next",value,resolve,reject)}),(function(err){invoke("throw",err,resolve,reject)})):PromiseImpl.resolve(value).then((function(unwrapped){result.value=unwrapped,resolve(result)}),(function(error){return invoke("throw",error,resolve,reject)}))}reject(record.arg)}var previousPromise;this._invoke=function(method,arg){function callInvokeWithMethodAndArg(){return new PromiseImpl((function(resolve,reject){invoke(method,arg,resolve,reject)}))}return previousPromise=previousPromise?previousPromise.then(callInvokeWithMethodAndArg,callInvokeWithMethodAndArg):callInvokeWithMethodAndArg()}}function maybeInvokeDelegate(delegate,context){var method=delegate.iterator[context.method];if(void 0===method){if(context.delegate=null,"throw"===context.method){if(delegate.iterator.return&&(context.method="return",context.arg=void 0,maybeInvokeDelegate(delegate,context),"throw"===context.method))return ContinueSentinel;context.method="throw",context.arg=new TypeError("The iterator does not provide a 'throw' method")}return ContinueSentinel}var record=tryCatch(method,delegate.iterator,context.arg);if("throw"===record.type)return context.method="throw",context.arg=record.arg,context.delegate=null,ContinueSentinel;var info=record.arg;return info?info.done?(context[delegate.resultName]=info.value,context.next=delegate.nextLoc,"return"!==context.method&&(context.method="next",context.arg=void 0),context.delegate=null,ContinueSentinel):info:(context.method="throw",context.arg=new TypeError("iterator result is not an object"),context.delegate=null,ContinueSentinel)}function pushTryEntry(locs){var entry={tryLoc:locs[0]};1 in locs&&(entry.catchLoc=locs[1]),2 in locs&&(entry.finallyLoc=locs[2],entry.afterLoc=locs[3]),this.tryEntries.push(entry)}function resetTryEntry(entry){var record=entry.completion||{};record.type="normal",delete record.arg,entry.completion=record}function Context(tryLocsList){this.tryEntries=[{tryLoc:"root"}],tryLocsList.forEach(pushTryEntry,this),this.reset(!0)}function values(iterable){if(iterable){var iteratorMethod=iterable[iteratorSymbol];if(iteratorMethod)return iteratorMethod.call(iterable);if("function"==typeof iterable.next)return iterable;if(!isNaN(iterable.length)){var i=-1,next=function next(){for(;++i<iterable.length;)if(hasOwn.call(iterable,i))return next.value=iterable[i],next.done=!1,next;return next.value=void 0,next.done=!0,next};return next.next=next}}return{next:doneResult}}function doneResult(){return{value:void 0,done:!0}}return GeneratorFunction.prototype=GeneratorFunctionPrototype,define(Gp,"constructor",GeneratorFunctionPrototype),define(GeneratorFunctionPrototype,"constructor",GeneratorFunction),GeneratorFunction.displayName=define(GeneratorFunctionPrototype,toStringTagSymbol,"GeneratorFunction"),exports.isGeneratorFunction=function(genFun){var ctor="function"==typeof genFun&&genFun.constructor;return!!ctor&&(ctor===GeneratorFunction||"GeneratorFunction"===(ctor.displayName||ctor.name))},exports.mark=function(genFun){return Object.setPrototypeOf?Object.setPrototypeOf(genFun,GeneratorFunctionPrototype):(genFun.__proto__=GeneratorFunctionPrototype,define(genFun,toStringTagSymbol,"GeneratorFunction")),genFun.prototype=Object.create(Gp),genFun},exports.awrap=function(arg){return{__await:arg}},defineIteratorMethods(AsyncIterator.prototype),define(AsyncIterator.prototype,asyncIteratorSymbol,(function(){return this})),exports.AsyncIterator=AsyncIterator,exports.async=function(innerFn,outerFn,self,tryLocsList,PromiseImpl){void 0===PromiseImpl&&(PromiseImpl=Promise);var iter=new AsyncIterator(wrap(innerFn,outerFn,self,tryLocsList),PromiseImpl);return exports.isGeneratorFunction(outerFn)?iter:iter.next().then((function(result){return result.done?result.value:iter.next()}))},defineIteratorMethods(Gp),define(Gp,toStringTagSymbol,"Generator"),define(Gp,iteratorSymbol,(function(){return this})),define(Gp,"toString",(function(){return"[object Generator]"})),exports.keys=function(object){var keys=[];for(var key in object)keys.push(key);return keys.reverse(),function next(){for(;keys.length;){var key=keys.pop();if(key in object)return next.value=key,next.done=!1,next}return next.done=!0,next}},exports.values=values,Context.prototype={constructor:Context,reset:function reset(skipTempReset){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(resetTryEntry),!skipTempReset)for(var name in this)"t"===name.charAt(0)&&hasOwn.call(this,name)&&!isNaN(+name.slice(1))&&(this[name]=void 0)},stop:function stop(){this.done=!0;var rootRecord=this.tryEntries[0].completion;if("throw"===rootRecord.type)throw rootRecord.arg;return this.rval},dispatchException:function dispatchException(exception){if(this.done)throw exception;var context=this;function handle(loc,caught){return record.type="throw",record.arg=exception,context.next=loc,caught&&(context.method="next",context.arg=void 0),!!caught}for(var i=this.tryEntries.length-1;i>=0;--i){var entry=this.tryEntries[i],record=entry.completion;if("root"===entry.tryLoc)return handle("end");if(entry.tryLoc<=this.prev){var hasCatch=hasOwn.call(entry,"catchLoc"),hasFinally=hasOwn.call(entry,"finallyLoc");if(hasCatch&&hasFinally){if(this.prev<entry.catchLoc)return handle(entry.catchLoc,!0);if(this.prev<entry.finallyLoc)return handle(entry.finallyLoc)}else if(hasCatch){if(this.prev<entry.catchLoc)return handle(entry.catchLoc,!0)}else{if(!hasFinally)throw new Error("try statement without catch or finally");if(this.prev<entry.finallyLoc)return handle(entry.finallyLoc)}}}},abrupt:function abrupt(type,arg){for(var i=this.tryEntries.length-1;i>=0;--i){var entry=this.tryEntries[i];if(entry.tryLoc<=this.prev&&hasOwn.call(entry,"finallyLoc")&&this.prev<entry.finallyLoc){var finallyEntry=entry;break}}finallyEntry&&("break"===type||"continue"===type)&&finallyEntry.tryLoc<=arg&&arg<=finallyEntry.finallyLoc&&(finallyEntry=null);var record=finallyEntry?finallyEntry.completion:{};return record.type=type,record.arg=arg,finallyEntry?(this.method="next",this.next=finallyEntry.finallyLoc,ContinueSentinel):this.complete(record)},complete:function complete(record,afterLoc){if("throw"===record.type)throw record.arg;return"break"===record.type||"continue"===record.type?this.next=record.arg:"return"===record.type?(this.rval=this.arg=record.arg,this.method="return",this.next="end"):"normal"===record.type&&afterLoc&&(this.next=afterLoc),ContinueSentinel},finish:function finish(finallyLoc){for(var i=this.tryEntries.length-1;i>=0;--i){var entry=this.tryEntries[i];if(entry.finallyLoc===finallyLoc)return this.complete(entry.completion,entry.afterLoc),resetTryEntry(entry),ContinueSentinel}},catch:function _catch(tryLoc){for(var i=this.tryEntries.length-1;i>=0;--i){var entry=this.tryEntries[i];if(entry.tryLoc===tryLoc){var record=entry.completion;if("throw"===record.type){var thrown=record.arg;resetTryEntry(entry)}return thrown}}throw new Error("illegal catch attempt")},delegateYield:function delegateYield(iterable,resultName,nextLoc){return this.delegate={iterator:values(iterable),resultName:resultName,nextLoc:nextLoc},"next"===this.method&&(this.arg=void 0),ContinueSentinel}},exports}function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _setPrototypeOf(o,p){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function _setPrototypeOf(o,p){return o.__proto__=p,o},_setPrototypeOf(o,p)}function _createSuper(Derived){var hasNativeReflectConstruct=function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function _createSuperInternal(){var result,Super=_getPrototypeOf(Derived);if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else result=Super.apply(this,arguments);return _possibleConstructorReturn(this,result)}}function _possibleConstructorReturn(self,call){if(call&&("object"==typeof call||"function"==typeof call))return call;if(void 0!==call)throw new TypeError("Derived constructors may only return object or undefined");return function _assertThisInitialized(self){if(void 0===self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return self}(self)}function _getPrototypeOf(o){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)},_getPrototypeOf(o)}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Object.defineProperty(Constructor,"prototype",{writable:!1}),Constructor}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}function p(o){return new Promise((function(t,e){var i;try{var n=document.createElement("canvas");n.width=o.videoWidth,n.height=o.videoHeight,null==(i=null==n?void 0:n.getContext("2d"))||i.drawImage(o,0,0),n.toBlob((function(a){a&&t(URL.createObjectURL(a))}))}catch(n){e(n)}}))}function u(o,t){var e=document.createElement("a");e.style.display="none",e.href=o,e.download=t,document.body.appendChild(e),e.click(),document.body.removeChild(e)}var s=function(_l){!function _inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function");subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:!0,configurable:!0}}),Object.defineProperty(subClass,"prototype",{writable:!1}),superClass&&_setPrototypeOf(subClass,superClass)}(s,_l);var _super=_createSuper(s);function s(t,e,i){var _this;_classCallCheck(this,s),_this=_super.call(this,t,e,i);var _e$enabled=e.enabled,n=void 0===_e$enabled||_e$enabled,_e$name=e.name,a=void 0===_e$name?"screenshot":_e$name;return!1!==n&&t.on("ready",(function(){var r=document.querySelector(".jw-video");null==r||r.setAttribute("crossOrigin","anonymous");var m=function(){var _ref=function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}(_regeneratorRuntime().mark((function _callee(){return _regeneratorRuntime().wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:if(!r){_context.next=5;break}return _context.next=3,p(r);case 3:u(_context.sent,a);case 5:case"end":return _context.stop()}}),_callee)})));return function m(){return _ref.apply(this,arguments)}}();t.addButton('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" class="jw-svg-icon"><path d="M 19.402344 6 C 17.019531 6 14.96875 7.679688 14.5 10.011719 L 14.097656 12 L 9 12 C 6.238281 12 4 14.238281 4 17 L 4 38 C 4 40.761719 6.238281 43 9 43 L 41 43 C 43.761719 43 46 40.761719 46 38 L 46 17 C 46 14.238281 43.761719 12 41 12 L 35.902344 12 L 35.5 10.011719 C 35.03125 7.679688 32.980469 6 30.597656 6 Z M 25 17 C 30.519531 17 35 21.480469 35 27 C 35 32.519531 30.519531 37 25 37 C 19.480469 37 15 32.519531 15 27 C 15 21.480469 19.480469 17 25 17 Z M 25 19 C 20.589844 19 17 22.589844 17 27 C 17 31.410156 20.589844 35 25 35 C 29.410156 35 33 31.410156 33 27 C 33 22.589844 29.410156 19 25 19 Z "></path></svg>',"截圖",m,"jw-plugin-screenshot")})),_this}return _createClass(s)}(_createClass((function l(t,e,i){_classCallCheck(this,l),this.playerInstance=t,this.pluginConfig=e,this.pluginDiv=i})));s.pluginName="screenshot",s.playerMinimumVersion="8.0.0";var createPluginStory=__webpack_require__("./utils/createPluginStory.tsx"),esm=(__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js")),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),_excluded=["components"];function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,_excluded);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)("h1",{id:"jwplayer-plugin-screenshot"},"jwplayer-plugin-screenshot"),Object(esm.b)("p",null,Object(esm.b)("a",{parentName:"p",href:"https://badge.fury.io/js/@hahow%2Fjwplayer-plugin-screenshot",target:"_blank",rel:"nofollow noopener noreferrer"},Object(esm.b)("img",{parentName:"a",src:"https://badge.fury.io/js/@hahow%2Fjwplayer-plugin-screenshot.svg",alt:"npm version"}))),Object(esm.b)("p",null,"這是一個 JW Player 的截圖 plugin，允許使用者擷取當前影格的畫面，並且下載儲存 PNG 圖檔。"),Object(esm.b)("p",null,Object(esm.b)("strong",{parentName:"p"},"注意："),"如果你的 JW Player 有啟用 DRM，這個 plugin 會無法截圖。"),Object(esm.b)("h2",{id:"table-of-contents"},"Table of Contents"),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"#demo"},"Demo")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"#external-plugin"},"External Plugin")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"#internal-plugin-not-recommended"},"Internal Plugin")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"#configuration"},"Configuration"))),Object(esm.b)("h2",{id:"demo"},"Demo"),Object(esm.b)(dist_esm.a,{id:"screenshot--screenshot",mdxType:"Story"}),Object(esm.b)("h2",{id:"external-plugin"},"External Plugin"),Object(esm.b)("p",null,"IIFE 格式，JW Player 預設使用 plugin 的方式："),Object(esm.b)("h3",{id:"vanilla-js"},"Vanilla JS"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<html>\n  <head>\n    <script src="{your_cloud_hosted_player_library_url}"><\/script>\n  </head>\n  <body>\n    <div id="myElement"></div>\n\n    <script type="text/JavaScript">\n      jwplayer("myElement").setup({\n        "playlist": "{your_playlist_url}",\n        "plugins": {\n          "//unpkg.com/@hahow/jwplayer-plugin-screenshot@latest/dist/iife/screenshot.js": {\n            enabled: true,\n            name: "screenshot"\n          }\n        }\n      });\n    <\/script>\n  </body>\n</html>\n')),Object(esm.b)("h3",{id:"react-js"},"React JS"),Object(esm.b)("p",null,"以 ",Object(esm.b)("a",{parentName:"p",href:"https://github.com/jwplayer/jwplayer-react",target:"_blank",rel:"nofollow noopener noreferrer"},"@jwplayer/jwplayer-react")," 為例，其它 framework 大同小異："),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-jsx"},"import JWPlayer from '@jwplayer/jwplayer-react';\n\nconst App = () => (\n  return (\n    <JWPlayer\n      library='{your_cloud_hosted_player_library_url}'\n      playlist='{your_playlist_url}'\n      config={{\n        plugins: {\n          \"//unpkg.com/@hahow/jwplayer-plugin-screenshot@latest/dist/iife/screenshot.js\": {\n            enabled: true,\n            name: \"screenshot\"\n          }\n        },\n      }}\n    />\n  );\n);\n")),Object(esm.b)("h2",{id:"internal-plugin-not-recommended"},"Internal Plugin (not recommended)"),Object(esm.b)("p",null,"CJS & EMS 格式，非官方使用 plugin 的方式，不建議使用："),Object(esm.b)("ol",null,Object(esm.b)("li",{parentName:"ol"},Object(esm.b)("inlineCode",{parentName:"li"},"npm install @hahow/jwplayer-plugin-screenshot")),Object(esm.b)("li",{parentName:"ol"},"載入 plugin module ",Object(esm.b)("inlineCode",{parentName:"li"},"ScreenshotPlugin")),Object(esm.b)("li",{parentName:"ol"},"建立一份空的 ",Object(esm.b)("inlineCode",{parentName:"li"},"screenshot.js"),"，放在 application 可以讀取的位置（例如 ",Object(esm.b)("inlineCode",{parentName:"li"},"/"),"）"),Object(esm.b)("li",{parentName:"ol"},"使用 JWP 的 ",Object(esm.b)("inlineCode",{parentName:"li"},"registerPlugin()")," API 註冊 plugin")),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-jsx"},"import JWPlayer from '@jwplayer/jwplayer-react';\n\nimport { ScreenshotPlugin } from \"@hahow/jwplayer-plugin-screenshot\";\n\nconst App = () => (\n  return (\n    <JWPlayer\n      library='{your_cloud_hosted_player_library_url}'\n      playlist='{your_playlist_url}'\n      config={{\n        plugins: {\n          \"/screenshot.js\": {\n            enabled: true,\n            name: \"screenshot\"\n          }\n        },\n      }}\n      didMountCallback={({ player }) => {\n        player.registerPlugin(\n          ScreenshotPlugin.pluginName,\n          ScreenshotPlugin.playerMinimumVersion,\n          ScreenshotPlugin\n        );\n      }}\n    />\n  );\n);\n")),Object(esm.b)("h2",{id:"configuration"},"Configuration"),Object(esm.b)("table",null,Object(esm.b)("thead",{parentName:"table"},Object(esm.b)("tr",{parentName:"thead"},Object(esm.b)("th",{parentName:"tr",align:null},"config"),Object(esm.b)("th",{parentName:"tr",align:null},"type"),Object(esm.b)("th",{parentName:"tr",align:null},"default"),Object(esm.b)("th",{parentName:"tr",align:null},"description"))),Object(esm.b)("tbody",{parentName:"table"},Object(esm.b)("tr",{parentName:"tbody"},Object(esm.b)("td",{parentName:"tr",align:null},Object(esm.b)("inlineCode",{parentName:"td"},"enabled")),Object(esm.b)("td",{parentName:"tr",align:null},Object(esm.b)("inlineCode",{parentName:"td"},"boolean")),Object(esm.b)("td",{parentName:"tr",align:null},Object(esm.b)("inlineCode",{parentName:"td"},"true")),Object(esm.b)("td",{parentName:"tr",align:null},"是否開啟截圖功能")),Object(esm.b)("tr",{parentName:"tbody"},Object(esm.b)("td",{parentName:"tr",align:null},Object(esm.b)("inlineCode",{parentName:"td"},"name")),Object(esm.b)("td",{parentName:"tr",align:null},Object(esm.b)("inlineCode",{parentName:"td"},"string")),Object(esm.b)("td",{parentName:"tr",align:null},Object(esm.b)("inlineCode",{parentName:"td"},"screenshot")),Object(esm.b)("td",{parentName:"tr",align:null},"截圖檔名")))))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;__webpack_exports__.default={title:"Screenshot",component:jwplayer_react_default.a,parameters:{docs:{page:MDXContent}}};var Screenshot=Object(createPluginStory.a)({pluginName:"screenshot",playerMinimumVersion:"8.0.0",pluginClassOrFunction:s,pluginScriptUrl:"//unpkg.com/@hahow/jwplayer-plugin-screenshot@latest/dist/iife/screenshot.js",pluginConfig:{enabled:!0,name:"screenshot"},storyArgs:{config:{height:360,width:640},file:"https://cdn.jwplayer.com/manifests/GXbUbwm0.m3u8",library:"https://cdn.jwplayer.com/libraries/5vuW2BEP.js"}});Screenshot.parameters=Object.assign({storySource:{source:'createPluginStory({\n  pluginName: "screenshot",\n  playerMinimumVersion: "8.0.0",\n  pluginClassOrFunction: ScreenshotPlugin,\n  pluginScriptUrl:\n    "//unpkg.com/@hahow/jwplayer-plugin-screenshot@latest/dist/iife/screenshot.js",\n  pluginConfig: {\n    enabled: true,\n    name: "screenshot",\n  },\n  storyArgs: {\n    config: {\n      height: 360,\n      width: 640,\n    },\n    file: "https://cdn.jwplayer.com/manifests/GXbUbwm0.m3u8",\n    library: "https://cdn.jwplayer.com/libraries/5vuW2BEP.js",\n  },\n})'}},Screenshot.parameters)},"./stories/TrackNotes.stories.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"TrackNotes",(function(){return TrackNotes}));var esm=__webpack_require__("../../node_modules/@storybook/addon-actions/dist/esm/index.js"),jwplayer_react=__webpack_require__("../../node_modules/@jwplayer/jwplayer-react/lib/jwplayer-react.js"),jwplayer_react_default=__webpack_require__.n(jwplayer_react);__webpack_require__("../../node_modules/core-js/modules/es.weak-set.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/web.timers.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.set-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.get-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.reflect.construct.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.create.js");function _setPrototypeOf(o,p){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function _setPrototypeOf(o,p){return o.__proto__=p,o},_setPrototypeOf(o,p)}function _createSuper(Derived){var hasNativeReflectConstruct=function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function _createSuperInternal(){var result,Super=_getPrototypeOf(Derived);if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else result=Super.apply(this,arguments);return _possibleConstructorReturn(this,result)}}function _possibleConstructorReturn(self,call){if(call&&("object"==typeof call||"function"==typeof call))return call;if(void 0!==call)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(self)}function _assertThisInitialized(self){if(void 0===self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return self}function _getPrototypeOf(o){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)},_getPrototypeOf(o)}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Object.defineProperty(Constructor,"prototype",{writable:!1}),Constructor}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var p,f,d,C,h=function h(n,r,t){if(r.has(n))throw TypeError("Cannot add the same private member more than once");r instanceof WeakSet?r.add(n):r.set(n,t)},m=function m(n,r,t){return function _(n,r,t){if(!r.has(n))throw TypeError("Cannot "+t)}(n,r,"access private method"),t},l=function(_s){!function _inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function");subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:!0,configurable:!0}}),Object.defineProperty(subClass,"prototype",{writable:!1}),superClass&&_setPrototypeOf(subClass,superClass)}(l,_s);var _super=_createSuper(l);function l(t,e,a){var _this;return _classCallCheck(this,l),_this=_super.call(this,t,e,a),h(_assertThisInitialized(_this),p),h(_assertThisInitialized(_this),d),function T(){var n=document.createElement("style");n.innerHTML="\n    .jw-overlays .jw-track-note {}\n    .jw-overlays .jw-track-note__content-container {\n      align-items: center;\n      background-color: #fff;\n      border-radius: 5px;\n      box-shadow: 0 0 0 rgba(0, 0, 0, .67);\n      padding: 2px 4px 2px 2px;\n    }\n    .jw-overlays .jw-track-note__content-container svg {\n      color: #000;\n      height: 18px;\n      width: 18px;\n    }\n    .jw-overlays .jw-track-note__content-textarea {\n      border: none 0;\n      color: #000;\n      min-width: 160px;\n      outline: none;\n      overflow: hidden;\n      resize: none;\n    }\n  ",document.getElementsByTagName("head")[0].appendChild(n)}(),t.on("ready",(function(){var o=e.trackNotes.map((function(_ref){var c=_ref.note;return{begin:_ref.time,cueType:"trackNote",text:c}}));t.addCues(o),t.addButton('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="jw-svg-icon"><path xmlns="http://www.w3.org/2000/svg" fill="currentColor" d="M448 75.2v361.7c0 24.3-19 43.2-43.2 43.2H43.2C19.3 480 0 461.4 0 436.8V75.2C0 51.1 18.8 32 43.2 32h361.7c24 0 43.1 18.8 43.1 43.2zm-37.3 361.6V75.2c0-3-2.6-5.8-5.8-5.8h-9.3L285.3 144 224 94.1 162.8 144 52.5 69.3h-9.3c-3.2 0-5.8 2.8-5.8 5.8v361.7c0 3 2.6 5.8 5.8 5.8h361.7c3.2.1 5.8-2.7 5.8-5.8zM150.2 186v37H76.7v-37h73.5zm0 74.4v37.3H76.7v-37.3h73.5zm11.1-147.3l54-43.7H96.8l64.5 43.7zm210 72.9v37h-196v-37h196zm0 74.4v37.3h-196v-37.3h196zm-84.6-147.3l64.5-43.7H232.8l53.9 43.7zM371.3 335v37.3h-99.4V335h99.4z"/></svg>',"筆記標註",(function(){m(_assertThisInitialized(_this),p,f).call(_assertThisInitialized(_this))}),"jw-plugin-track-notes")})),_this}return _createClass(l,[{key:"completeAddTrackNote",value:function completeAddTrackNote(t){m(this,d,C).call(this,t)}}]),l}(_createClass((function s(r,t,e){_classCallCheck(this,s),this.playerInstance=r,this.pluginConfig=t,this.pluginDiv=e})));p=new WeakSet,f=function f(){var e,a;this.playerInstance.pause();var t=Math.round(this.playerInstance.getPosition());null==(a=(e=this.pluginConfig).onTrackNoteCreate)||a.call(e,t)},d=new WeakSet,C=function C(t){var _this2=this,e=document.createElement("div");e.setAttribute("class","jw-track-note");var a=document.createElement("div");a.setAttribute("class","jw-track-note__content-container jw-track-note__content-container--edit"),e.appendChild(a);var o=document.createElement("textarea");o.setAttribute("class","jw-track-note__content-textarea"),o.setAttribute("placeholder","新增筆記 (限 50 字)"),o.setAttribute("maxLength","50"),o.setAttribute("rows","1"),a.appendChild(o);var c=document.createElement("span");c.setAttribute("class","jw-track-note__trash-icon-wrapper"),c.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M192 188v216c0 6.627-5.373 12-12 12h-24c-6.627 0-12-5.373-12-12V188c0-6.627 5.373-12 12-12h24c6.627 0 12 5.373 12 12zm100-12h-24c-6.627 0-12 5.373-12 12v216c0 6.627 5.373 12 12 12h24c6.627 0 12-5.373 12-12V188c0-6.627-5.373-12-12-12zm132-96c13.255 0 24 10.745 24 24v12c0 6.627-5.373 12-12 12h-20v336c0 26.51-21.49 48-48 48H80c-26.51 0-48-21.49-48-48V128H12c-6.627 0-12-5.373-12-12v-12c0-13.255 10.745-24 24-24h74.411l34.018-56.696A48 48 0 0 1 173.589 0h100.823a48 48 0 0 1 41.16 23.304L349.589 80H424zm-269.611 0h139.223L276.16 50.913A6 6 0 0 0 271.015 48h-94.028a6 6 0 0 0-5.145 2.913L154.389 80zM368 128H80v330a6 6 0 0 0 6 6h276a6 6 0 0 0 6-6V128z"/></svg>',a.appendChild(c),setTimeout((function(){o.focus()}),50),o.addEventListener("keydown",(function(i){var v,k;if(i.stopPropagation(),"Enter"===i.key){var g={note:o.value,time:t};_this2.playerInstance.addCues([{begin:g.time,text:g.note,cueType:"trackNote"}]),null==(k=(v=_this2.pluginConfig).onTrackNoteUpdate)||k.call(v,g),e.setAttribute("hidden","true"),_this2.playerInstance.play(),i.preventDefault()}})),o.addEventListener("keyup",(function(i){i.preventDefault(),"Escape"===i.key&&(e.setAttribute("hidden","true"),_this2.playerInstance.play())}));var b=this.playerInstance.getPosition()/this.playerInstance.getDuration()*100||0;this.pluginDiv.style.left="calc("+b+"%)",this.pluginDiv.appendChild(e)},l.pluginName="trackNotes",l.playerMinimumVersion="8.14.0";var createPluginStory=__webpack_require__("./utils/createPluginStory.tsx"),dist_esm=(__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js")),addon_docs_dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),_excluded=["components"];function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,_excluded);return Object(dist_esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(dist_esm.b)("h1",{id:"jwplayer-plugin-track-notes"},"jwplayer-plugin-track-notes"),Object(dist_esm.b)("p",null,Object(dist_esm.b)("a",{parentName:"p",href:"https://badge.fury.io/js/@hahow%2Fjwplayer-plugin-track-notes",target:"_blank",rel:"nofollow noopener noreferrer"},Object(dist_esm.b)("img",{parentName:"a",src:"https://badge.fury.io/js/@hahow%2Fjwplayer-plugin-track-notes.svg",alt:"npm version"}))),Object(dist_esm.b)("p",null,"🚧 ",Object(dist_esm.b)("strong",{parentName:"p"},"此功能尚未完成")," 🚧"),Object(dist_esm.b)("p",null,"這是一個 JW Player 外掛，允許使用者在播放器的時間軸上標註筆記。"),Object(dist_esm.b)("h2",{id:"table-of-contents"},"Table of Contents"),Object(dist_esm.b)("ul",null,Object(dist_esm.b)("li",{parentName:"ul"},Object(dist_esm.b)("a",{parentName:"li",href:"#demo"},"Demo")),Object(dist_esm.b)("li",{parentName:"ul"},Object(dist_esm.b)("a",{parentName:"li",href:"#external-plugin"},"External Plugin")),Object(dist_esm.b)("li",{parentName:"ul"},Object(dist_esm.b)("a",{parentName:"li",href:"#internal-plugin-not-recommended"},"Internal Plugin")),Object(dist_esm.b)("li",{parentName:"ul"},Object(dist_esm.b)("a",{parentName:"li",href:"#configuration"},"Configuration")),Object(dist_esm.b)("li",{parentName:"ul"},Object(dist_esm.b)("a",{parentName:"li",href:"#instance"},"Instance"))),Object(dist_esm.b)("h2",{id:"demo"},"Demo"),Object(dist_esm.b)(addon_docs_dist_esm.a,{id:"track-notes--track-notes",mdxType:"Story"}),Object(dist_esm.b)("h2",{id:"external-plugin"},"External Plugin"),Object(dist_esm.b)("p",null,"IIFE 格式，JW Player 預設使用 plugin 的方式："),Object(dist_esm.b)("h3",{id:"vanilla-js"},"Vanilla JS"),Object(dist_esm.b)("pre",null,Object(dist_esm.b)("code",{parentName:"pre",className:"language-html"},'<html>\n  <head>\n    <script src="{your_cloud_hosted_player_library_url}"><\/script>\n  </head>\n  <body>\n    <div id="myElement"></div>\n\n    <script type="text/JavaScript">\n      jwplayer("myElement").setup({\n        "timeSlider": {\n          "legacy": true,\n        },\n        "playlist": "{your_playlist_url}",\n        "plugins": {\n          "//unpkg.com/@hahow/jwplayer-plugin-watermark@latest/dist/iife/trackNotes.js": {\n            trackNotes: [\n              {\n                note: "Hello Track Notes!",\n                time: 10,\n              },\n              {\n                note: "The Second Note",\n                time: 30,\n              },\n            ],\n            onTrackNoteCreate: (time: number) => {\n              // Do something, e.g., call the backend API.\n            },\n            onTrackNoteUpdate: (trackNote: TrackNoteType) => {\n              // Do something, e.g., call the backend API.\n            },\n          }\n        }\n      });\n    <\/script>\n  </body>\n</html>\n')),Object(dist_esm.b)("h3",{id:"react-js"},"React JS"),Object(dist_esm.b)("p",null,"以 ",Object(dist_esm.b)("a",{parentName:"p",href:"https://github.com/jwplayer/jwplayer-react",target:"_blank",rel:"nofollow noopener noreferrer"},"@jwplayer/jwplayer-react")," 為例，其它 framework 大同小異："),Object(dist_esm.b)("pre",null,Object(dist_esm.b)("code",{parentName:"pre",className:"language-jsx"},"import JWPlayer from '@jwplayer/jwplayer-react';\n\nconst App = () => (\n  return (\n    <JWPlayer\n      library='{your_cloud_hosted_player_library_url}'\n      playlist='{your_playlist_url}'\n      config={{\n        // 新版本的播放器不支援 custom cueType 了，需要加這個設定才行\n        timeSlider: {\n          legacy: true,\n        },\n        plugins: {\n          \"//unpkg.com/@hahow/jwplayer-plugin-track-notes@latest/dist/iife/trackNotes.js\": {\n            trackNotes: [\n              {\n                note: \"Hello Track Notes!\",\n                time: 10,\n              },\n              {\n                note: \"The Second Note\",\n                time: 30,\n              },\n            ],\n            onTrackNoteCreate: (time: number) => {\n              // Do something, e.g., call the backend API.\n            },\n            onTrackNoteUpdate: (trackNote: TrackNoteType) => {\n              // Do something, e.g., call the backend API.\n            },\n          }\n        },\n      }}\n    />\n  );\n);\n")),Object(dist_esm.b)("h2",{id:"internal-plugin-not-recommended"},"Internal Plugin (not recommended)"),Object(dist_esm.b)("p",null,"CJS & EMS 格式，非官方使用 plugin 的方式，不建議使用："),Object(dist_esm.b)("ol",null,Object(dist_esm.b)("li",{parentName:"ol"},Object(dist_esm.b)("inlineCode",{parentName:"li"},"npm install @hahow/jwplayer-plugin-track-notes")),Object(dist_esm.b)("li",{parentName:"ol"},"載入 plugin module ",Object(dist_esm.b)("inlineCode",{parentName:"li"},"TrackNotesPlugin")),Object(dist_esm.b)("li",{parentName:"ol"},"建立一份空的 ",Object(dist_esm.b)("inlineCode",{parentName:"li"},"trackNotes.js"),"，放在 application 可以讀取的位置（例如 ",Object(dist_esm.b)("inlineCode",{parentName:"li"},"/"),"）"),Object(dist_esm.b)("li",{parentName:"ol"},"使用 JWP 的 ",Object(dist_esm.b)("inlineCode",{parentName:"li"},"registerPlugin()")," API 註冊 plugin")),Object(dist_esm.b)("pre",null,Object(dist_esm.b)("code",{parentName:"pre",className:"language-jsx"},'import JWPlayer from \'@jwplayer/jwplayer-react\';\n\nimport { TrackNotesPlugin } from "@hahow/jwplayer-plugin-track-notes";\n\nconst App = () => (\n  return (\n    <JWPlayer\n      library=\'{your_cloud_hosted_player_library_url}\'\n      playlist=\'{your_playlist_url}\'\n      config={{\n        timeSlider: {\n          legacy: true,\n        },\n        plugins: {\n          "/trackNotes.js": {\n            trackNotes: [\n              {\n                note: "Hello Track Notes!",\n                time: 10,\n              },\n              {\n                note: "The Second Note",\n                time: 30,\n              },\n            ],\n            onTrackNoteCreate: (time: number) => {\n              // Do something, e.g., call the backend API.\n            },\n            onTrackNoteUpdate: (trackNote: TrackNoteType) => {\n              // Do something, e.g., call the backend API.\n            },\n          }\n        },\n      }}\n      didMountCallback={({ player }) => {\n        player.registerPlugin(\n          TrackNotesPlugin.pluginName,\n          TrackNotesPlugin.playerMinimumVersion,\n          TrackNotesPlugin\n        );\n      }}\n    />\n  );\n);\n')),Object(dist_esm.b)("h2",{id:"configuration"},"Configuration"),Object(dist_esm.b)("table",null,Object(dist_esm.b)("thead",{parentName:"table"},Object(dist_esm.b)("tr",{parentName:"thead"},Object(dist_esm.b)("th",{parentName:"tr",align:null},"config"),Object(dist_esm.b)("th",{parentName:"tr",align:null},"type"),Object(dist_esm.b)("th",{parentName:"tr",align:null},"default"),Object(dist_esm.b)("th",{parentName:"tr",align:null},"description"))),Object(dist_esm.b)("tbody",{parentName:"table"},Object(dist_esm.b)("tr",{parentName:"tbody"},Object(dist_esm.b)("td",{parentName:"tr",align:null},Object(dist_esm.b)("inlineCode",{parentName:"td"},"onTrackNoteCreate")),Object(dist_esm.b)("td",{parentName:"tr",align:null},Object(dist_esm.b)("inlineCode",{parentName:"td"},"(time: number) => void")),Object(dist_esm.b)("td",{parentName:"tr",align:null},Object(dist_esm.b)("inlineCode",{parentName:"td"},"undefined")),Object(dist_esm.b)("td",{parentName:"tr",align:null},"新增筆記標註的 callback")),Object(dist_esm.b)("tr",{parentName:"tbody"},Object(dist_esm.b)("td",{parentName:"tr",align:null},Object(dist_esm.b)("inlineCode",{parentName:"td"},"onTrackNoteUpdate")),Object(dist_esm.b)("td",{parentName:"tr",align:null},Object(dist_esm.b)("inlineCode",{parentName:"td"},"(trackNote: { note: string; time: number; }) => void")),Object(dist_esm.b)("td",{parentName:"tr",align:null},Object(dist_esm.b)("inlineCode",{parentName:"td"},"undefined")),Object(dist_esm.b)("td",{parentName:"tr",align:null},"更新筆記標註的 callback")),Object(dist_esm.b)("tr",{parentName:"tbody"},Object(dist_esm.b)("td",{parentName:"tr",align:null},Object(dist_esm.b)("inlineCode",{parentName:"td"},"trackNotes")),Object(dist_esm.b)("td",{parentName:"tr",align:null},Object(dist_esm.b)("inlineCode",{parentName:"td"},"Array<{ note: string; time: number; }>")),Object(dist_esm.b)("td",{parentName:"tr",align:null},Object(dist_esm.b)("inlineCode",{parentName:"td"},"undefined")),Object(dist_esm.b)("td",{parentName:"tr",align:null},"筆記標註內容")))),Object(dist_esm.b)("h2",{id:"instance"},"Instance"),Object(dist_esm.b)("p",null,"可以透過 JW Player 的 ",Object(dist_esm.b)("inlineCode",{parentName:"p"},"getPlugin()")," API 取得 plugin 的 instance："),Object(dist_esm.b)("pre",null,Object(dist_esm.b)("code",{parentName:"pre",className:"language-js"},'const trackNotesPluginInstance = jwplayer().getPlugin("trackNotes");\n\n// 透過 instance 就可以呼叫相關 methods\ntrackNotesPluginInstance.completeAddTrackNote(...);\n')),Object(dist_esm.b)("table",null,Object(dist_esm.b)("thead",{parentName:"table"},Object(dist_esm.b)("tr",{parentName:"thead"},Object(dist_esm.b)("th",{parentName:"tr",align:null},"method"),Object(dist_esm.b)("th",{parentName:"tr",align:null},"type"),Object(dist_esm.b)("th",{parentName:"tr",align:null},"description"))),Object(dist_esm.b)("tbody",{parentName:"table"},Object(dist_esm.b)("tr",{parentName:"tbody"},Object(dist_esm.b)("td",{parentName:"tr",align:null},"🧪 ",Object(dist_esm.b)("inlineCode",{parentName:"td"},"completeAddTrackNote")),Object(dist_esm.b)("td",{parentName:"tr",align:null},Object(dist_esm.b)("inlineCode",{parentName:"td"},"(time: number) => void")),Object(dist_esm.b)("td",{parentName:"tr",align:null},"Demo 用，",Object(dist_esm.b)("inlineCode",{parentName:"td"},"1.0.0")," 之後可能會移除")))))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;__webpack_exports__.default={title:"Track Notes",component:jwplayer_react_default.a,argTypes:{onTrackNoteUpdate:{action:"clicked"}},parameters:{docs:{page:MDXContent}}};var TrackNotes=Object(createPluginStory.a)({pluginName:"trackNotes",playerMinimumVersion:"8.14.0",pluginClassOrFunction:l,pluginScriptUrl:"//unpkg.com/@hahow/jwplayer-plugin-track-notes@latest/dist/iife/trackNotes.js",pluginConfig:{trackNotes:[{time:10,note:"Hello Track Notes!"},{time:30,note:"The Second Note"}],onTrackNoteCreate:function onTrackNoteCreate(time){Object(esm.action)("onTrackNoteCreate")(time),jwplayer().getPlugin("trackNotes").completeAddTrackNote(time)},onTrackNoteUpdate:function onTrackNoteUpdate(trackNote){Object(esm.action)("onTrackNoteUpdate")(trackNote)}},storyArgs:{config:{height:360,width:640,timeSlider:{legacy:!0}},file:"https://cdn.jwplayer.com/manifests/GXbUbwm0.m3u8",library:"https://cdn.jwplayer.com/libraries/5vuW2BEP.js"}})},"./stories/Watermark.stories.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Watermark",(function(){return Watermark}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js");var jwplayer_react=__webpack_require__("../../node_modules/@jwplayer/jwplayer-react/lib/jwplayer-react.js"),jwplayer_react_default=__webpack_require__.n(jwplayer_react);__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.set-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.get-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.reflect.construct.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.create.js");function _setPrototypeOf(o,p){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function _setPrototypeOf(o,p){return o.__proto__=p,o},_setPrototypeOf(o,p)}function _createSuper(Derived){var hasNativeReflectConstruct=function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function _createSuperInternal(){var result,Super=_getPrototypeOf(Derived);if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else result=Super.apply(this,arguments);return _possibleConstructorReturn(this,result)}}function _possibleConstructorReturn(self,call){if(call&&("object"==typeof call||"function"==typeof call))return call;if(void 0!==call)throw new TypeError("Derived constructors may only return object or undefined");return function _assertThisInitialized(self){if(void 0===self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return self}(self)}function _getPrototypeOf(o){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o)},_getPrototypeOf(o)}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Object.defineProperty(Constructor,"prototype",{writable:!1}),Constructor}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var l=function(_r){!function _inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function");subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:!0,configurable:!0}}),Object.defineProperty(subClass,"prototype",{writable:!1}),superClass&&_setPrototypeOf(subClass,superClass)}(l,_r);var _super=_createSuper(l);function l(n,t,e){var _this;return _classCallCheck(this,l),_this=_super.call(this,n,t,e),n.on("ready",(function(p){var i,o;e.style.top="0",e.style.bottom="0",e.style.left="0",e.style.right="0",e.style.display="flex",e.style.justifyContent="center",e.style.alignItems="center",e.style.pointerEvents="none";var a=document.createElement("div");Object.assign(a.style,null!=(i=t.style)?i:{}),a.innerHTML=null!=(o=t.html)?o:"",e.appendChild(a)})),_this}return _createClass(l)}(_createClass((function r(n,t,e){_classCallCheck(this,r),this.playerInstance=n,this.pluginConfig=t,this.pluginDiv=e})));l.pluginName="watermark",l.playerMinimumVersion="8.0.0";var createPluginStory=__webpack_require__("./utils/createPluginStory.tsx"),esm=(__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js")),dist_esm=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),_excluded=["components"];function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,_excluded);return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)("h1",{id:"jwplayer-plugin-watermark"},"jwplayer-plugin-watermark"),Object(esm.b)("p",null,Object(esm.b)("a",{parentName:"p",href:"https://badge.fury.io/js/@hahow%2Fjwplayer-plugin-watermark",target:"_blank",rel:"nofollow noopener noreferrer"},Object(esm.b)("img",{parentName:"a",src:"https://badge.fury.io/js/@hahow%2Fjwplayer-plugin-watermark.svg",alt:"npm version"}))),Object(esm.b)("p",null,"這是一個 JW Player plugin，允許在播放器上面顯示浮水印。"),Object(esm.b)("h2",{id:"table-of-contents"},"Table of Contents"),Object(esm.b)("ul",null,Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"#demo"},"Demo")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"#external-plugin"},"External Plugin")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"#internal-plugin-not-recommended"},"Internal Plugin")),Object(esm.b)("li",{parentName:"ul"},Object(esm.b)("a",{parentName:"li",href:"#configuration"},"Configuration"))),Object(esm.b)("h2",{id:"demo"},"Demo"),Object(esm.b)(dist_esm.a,{id:"watermark--watermark",mdxType:"Story"}),Object(esm.b)("h2",{id:"external-plugin"},"External Plugin"),Object(esm.b)("p",null,"IIFE 格式，JW Player 預設使用 plugin 的方式："),Object(esm.b)("h3",{id:"vanilla-js"},"Vanilla JS"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-html"},'<html>\n  <head>\n    <script src="{your_cloud_hosted_player_library_url}"><\/script>\n  </head>\n  <body>\n    <div id="myElement"></div>\n\n    <script type="text/JavaScript">\n      jwplayer("myElement").setup({\n        "playlist": "{your_playlist_url}",\n        "plugins": {\n          "//unpkg.com/@hahow/jwplayer-plugin-watermark@latest/dist/iife/watermark.js": {\n            html: "影片資源請勿外流",\n            style: {\n              color: "rgba(179, 179, 179, 0.3)",\n              transform: "rotate(20deg)",\n            }\n          }\n        }\n      });\n    <\/script>\n  </body>\n</html>\n')),Object(esm.b)("h3",{id:"react-js"},"React JS"),Object(esm.b)("p",null,"以 ",Object(esm.b)("a",{parentName:"p",href:"https://github.com/jwplayer/jwplayer-react",target:"_blank",rel:"nofollow noopener noreferrer"},"@jwplayer/jwplayer-react")," 為例，其它 framework 大同小異："),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-jsx"},'import JWPlayer from \'@jwplayer/jwplayer-react\';\n\nconst App = () => (\n  return (\n    <JWPlayer\n      library=\'{your_cloud_hosted_player_library_url}\'\n      playlist=\'{your_playlist_url}\'\n      config={{\n        plugins: {\n          "//unpkg.com/@hahow/jwplayer-plugin-watermark@latest/dist/iife/watermark.js": {\n            html: "影片資源請勿外流",\n            style: {\n              color: "rgba(179, 179, 179, 0.3)",\n              transform: "rotate(20deg)",\n            }\n          }\n        },\n      }}\n    />\n  );\n);\n')),Object(esm.b)("h2",{id:"internal-plugin-not-recommended"},"Internal Plugin (not recommended)"),Object(esm.b)("p",null,"CJS & EMS 格式，非官方使用 plugin 的方式，不建議使用："),Object(esm.b)("ol",null,Object(esm.b)("li",{parentName:"ol"},Object(esm.b)("inlineCode",{parentName:"li"},"npm install @hahow/jwplayer-plugin-watermark")),Object(esm.b)("li",{parentName:"ol"},"載入 plugin module ",Object(esm.b)("inlineCode",{parentName:"li"},"WatermarkPlugin")),Object(esm.b)("li",{parentName:"ol"},"建立一份空的 ",Object(esm.b)("inlineCode",{parentName:"li"},"watermark.js"),"，放在 application 可以讀取的位置（例如 ",Object(esm.b)("inlineCode",{parentName:"li"},"/"),"）"),Object(esm.b)("li",{parentName:"ol"},"使用 JWP 的 ",Object(esm.b)("inlineCode",{parentName:"li"},"registerPlugin()")," API 註冊 plugin")),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-jsx"},'import JWPlayer from \'@jwplayer/jwplayer-react\';\n\nimport { WatermarkPlugin } from "@hahow/jwplayer-plugin-watermark";\n\nconst App = () => (\n  return (\n    <JWPlayer\n      library=\'{your_cloud_hosted_player_library_url}\'\n      playlist=\'{your_playlist_url}\'\n      config={{\n        plugins: {\n          "/watermark.js": {\n            html: "影片資源請勿外流",\n            style: {\n              color: "rgba(179, 179, 179, 0.3)",\n              transform: "rotate(20deg)",\n            }\n          }\n        },\n      }}\n      didMountCallback={({ player }) => {\n        player.registerPlugin(\n          WatermarkPlugin.pluginName,\n          WatermarkPlugin.playerMinimumVersion,\n          WatermarkPlugin\n        );\n      }}\n    />\n  );\n);\n')),Object(esm.b)("h2",{id:"configuration"},"Configuration"),Object(esm.b)("table",null,Object(esm.b)("thead",{parentName:"table"},Object(esm.b)("tr",{parentName:"thead"},Object(esm.b)("th",{parentName:"tr",align:null},"config"),Object(esm.b)("th",{parentName:"tr",align:null},"type"),Object(esm.b)("th",{parentName:"tr",align:null},"default"),Object(esm.b)("th",{parentName:"tr",align:null},"description"))),Object(esm.b)("tbody",{parentName:"table"},Object(esm.b)("tr",{parentName:"tbody"},Object(esm.b)("td",{parentName:"tr",align:null},Object(esm.b)("inlineCode",{parentName:"td"},"html")),Object(esm.b)("td",{parentName:"tr",align:null},Object(esm.b)("inlineCode",{parentName:"td"},"string")),Object(esm.b)("td",{parentName:"tr",align:null},Object(esm.b)("inlineCode",{parentName:"td"},'""')),Object(esm.b)("td",{parentName:"tr",align:null},"浮水印內容，HTML 格式")),Object(esm.b)("tr",{parentName:"tbody"},Object(esm.b)("td",{parentName:"tr",align:null},Object(esm.b)("inlineCode",{parentName:"td"},"style")),Object(esm.b)("td",{parentName:"tr",align:null},Object(esm.b)("inlineCode",{parentName:"td"},"Partial<CSSStyleDeclaration>")),Object(esm.b)("td",{parentName:"tr",align:null},Object(esm.b)("inlineCode",{parentName:"td"},"{}")),Object(esm.b)("td",{parentName:"tr",align:null},"自訂浮水印樣式")))))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;__webpack_exports__.default={title:"Watermark",component:jwplayer_react_default.a,parameters:{docs:{page:MDXContent}}};var Watermark=Object(createPluginStory.a)({pluginName:"watermark",playerMinimumVersion:"8.0.0",pluginClassOrFunction:l,pluginScriptUrl:"//unpkg.com/@hahow/jwplayer-plugin-watermark@latest/dist/iife/watermark.js",pluginConfig:{html:"影片資源請勿外流 影片資源請勿外流 影片資源請勿外流",style:{color:"rgba(179, 179, 179, 0.3)",fontSize:"16px",fontWeight:"600",lineHeight:"26px",transform:"rotate(20deg)",whiteSpace:"nowrap"}},storyArgs:{config:{height:360,width:640},file:"https://cdn.jwplayer.com/manifests/GXbUbwm0.m3u8",library:"https://cdn.jwplayer.com/libraries/5vuW2BEP.js"}});Watermark.parameters=Object.assign({storySource:{source:'createPluginStory({\n  pluginName: "watermark",\n  playerMinimumVersion: "8.0.0",\n  pluginClassOrFunction: WatermarkPlugin,\n  pluginScriptUrl:\n    "//unpkg.com/@hahow/jwplayer-plugin-watermark@latest/dist/iife/watermark.js",\n  pluginConfig: {\n    html: "影片資源請勿外流 影片資源請勿外流 影片資源請勿外流",\n    style: {\n      color: "rgba(179, 179, 179, 0.3)",\n      fontSize: "16px",\n      fontWeight: "600",\n      lineHeight: "26px",\n      transform: "rotate(20deg)",\n      whiteSpace: "nowrap",\n    },\n  },\n  storyArgs: {\n    config: {\n      height: 360,\n      width: 640,\n    },\n    file: "https://cdn.jwplayer.com/manifests/GXbUbwm0.m3u8",\n    library: "https://cdn.jwplayer.com/libraries/5vuW2BEP.js",\n  },\n})'}},Watermark.parameters)},"./storybook-init-framework-entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);__webpack_require__("../../node_modules/@storybook/react/dist/esm/client/index.js")},"./utils/createPluginStory.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js");var _jwplayer_jwplayer_react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/@jwplayer/jwplayer-react/lib/jwplayer-react.js"),_jwplayer_jwplayer_react__WEBPACK_IMPORTED_MODULE_2___default=__webpack_require__.n(_jwplayer_jwplayer_react__WEBPACK_IMPORTED_MODULE_2__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/react/jsx-runtime.js"),createPluginStory=function createPluginStory(_ref){_ref.playerMinimumVersion,_ref.pluginClassOrFunction;var _storyArgs$config,_ref4,pluginConfig=_ref.pluginConfig,pluginScriptUrl=(_ref.pluginName,_ref.pluginScriptUrl),storyArgs=_ref.storyArgs,Story=function Template(args){return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_jwplayer_jwplayer_react__WEBPACK_IMPORTED_MODULE_2___default.a,Object.assign({didMountCallback:function didMountCallback(_ref2){_ref2.player}},args))}.bind({});return Story.args=Object.assign({},storyArgs,{config:Object.assign({},storyArgs.config,{plugins:Object.assign({},null===(_storyArgs$config=storyArgs.config)||void 0===_storyArgs$config?void 0:_storyArgs$config.plugins,(_ref4={},_ref4[pluginScriptUrl]=Object.assign({},pluginConfig),_ref4))})}),Story};__webpack_exports__.a=createPluginStory;try{createPluginStory.displayName="createPluginStory",createPluginStory.__docgenInfo={description:"",displayName:"createPluginStory",props:{playerMinimumVersion:{defaultValue:null,description:"Minimum player version required the plugin",name:"playerMinimumVersion",required:!0,type:{name:"string"}},pluginClassOrFunction:{defaultValue:null,description:"Plugin function of class to instantiate with new player instances",name:"pluginClassOrFunction",required:!0,type:{name:"Function"}},pluginConfig:{defaultValue:null,description:"TODO:",name:"pluginConfig",required:!0,type:{name:"any"}},pluginName:{defaultValue:null,description:"Name of the plugin matching the name referenced in the `plugins` object of the player\nThe `pluginName` must match the name referenced in the `plugins` object of the player.",name:"pluginName",required:!0,type:{name:"string"}},pluginScriptUrl:{defaultValue:null,description:"the URL of the plugin script that will be added to the `plugins`. When the player is instantiated, the plugin script is downloaded and initialized.",name:"pluginScriptUrl",required:!0,type:{name:"string"}},storyArgs:{defaultValue:null,description:"TODO:",name:"storyArgs",required:!0,type:{name:"JWPlayerProps"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["utils/createPluginStory.tsx#createPluginStory"]={docgenInfo:createPluginStory.__docgenInfo,name:"createPluginStory",path:"utils/createPluginStory.tsx#createPluginStory"})}catch(__react_docgen_typescript_loader_error){}},0:function(module,exports,__webpack_require__){__webpack_require__("../../node_modules/@storybook/core-client/dist/esm/globals/polyfills.js"),__webpack_require__("../../node_modules/@storybook/core-client/dist/esm/globals/globals.js"),__webpack_require__("./storybook-init-framework-entry.js"),__webpack_require__("../../node_modules/@storybook/react/dist/esm/client/docs/config-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-links/preview.js-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-interactions/preview.js-generated-config-entry.js"),__webpack_require__("./.storybook/preview.js-generated-config-entry.js"),module.exports=__webpack_require__("./generated-stories-entry.js")},1:function(module,exports){}},[[0,4,5]]]);
+//# sourceMappingURL=main.dfe60d44.iframe.bundle.js.map
\ No newline at end of file
diff --git a/main.612d2790.iframe.bundle.js.LICENSE.txt b/main.dfe60d44.iframe.bundle.js.LICENSE.txt
similarity index 100%
rename from main.612d2790.iframe.bundle.js.LICENSE.txt
rename to main.dfe60d44.iframe.bundle.js.LICENSE.txt
diff --git a/main.dfe60d44.iframe.bundle.js.map b/main.dfe60d44.iframe.bundle.js.map
new file mode 100644
index 0000000..8db9dd1
--- /dev/null
+++ b/main.dfe60d44.iframe.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"main.dfe60d44.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file
diff --git a/project.json b/project.json
index ab70451..68a4a19 100644
--- a/project.json
+++ b/project.json
@@ -1 +1 @@
-{"generatedAt":1704942467666,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"monorepo":"Turborepo","packageManager":{"type":"npm","version":"8.19.4"},"storybookVersion":"6.5.10","language":"typescript","storybookPackages":{"@storybook/addon-actions":{"version":"6.5.10"},"@storybook/addons":{"version":"6.5.10"},"@storybook/builder-webpack4":{"version":"6.5.10"},"@storybook/manager-webpack4":{"version":"6.5.10"},"@storybook/react":{"version":"6.5.10"},"@storybook/testing-library":{"version":"0.0.13"},"@storybook/theming":{"version":"6.5.10"},"eslint-plugin-storybook":{"version":"0.6.4"}},"framework":{"name":"react"},"addons":{"@storybook/addon-links":{"version":"6.5.10"},"@storybook/addon-essentials":{"version":"6.5.10"},"@storybook/addon-interactions":{"version":"6.5.10"}}}
+{"generatedAt":1704942784737,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"monorepo":"Turborepo","packageManager":{"type":"npm","version":"8.19.4"},"storybookVersion":"6.5.10","language":"typescript","storybookPackages":{"@storybook/addon-actions":{"version":"6.5.10"},"@storybook/addons":{"version":"6.5.10"},"@storybook/builder-webpack4":{"version":"6.5.10"},"@storybook/manager-webpack4":{"version":"6.5.10"},"@storybook/react":{"version":"6.5.10"},"@storybook/testing-library":{"version":"0.0.13"},"@storybook/theming":{"version":"6.5.10"},"eslint-plugin-storybook":{"version":"0.6.4"}},"framework":{"name":"react"},"addons":{"@storybook/addon-links":{"version":"6.5.10"},"@storybook/addon-essentials":{"version":"6.5.10"},"@storybook/addon-interactions":{"version":"6.5.10"}}}