chore(plugin-v2): move test assets to dedicated folder and clean the …

…dist folder
kaltura · May 7, 2019 · 7d70e9d · 7d70e9d
1 parent 26f5dac
commit 7d70e9d
Show file tree

Hide file tree

Showing 9 changed files with 110 additions and 21 deletions.
diff --git a/packages/plugin-v2/README.md b/packages/plugin-v2/README.md
@@ -1,14 +1,14 @@
 # Hotspots plugin - Kaltura Player V2
 
 ### Test locally
-1. copy file `src/test.template.ejs` to `src/player-v2/test.ejs`
-2. optional, update the entry id, partner id and ks. You can keep the existing values to see an entry with hotspots defined.
+1. clone file `test/index.template.ejs` as `test/test.ejs`.
+2. in the cloned file replace all `TODO` comments with actual configuration.
 3. run `npm run start`
 
 ### Deploy plugin to production
 Hotspots plugin is deployed to production as part of [mwEmbed repo](https://github.com/kaltura/mwEmbed). To deploy it do the following:
 1. run `npm run build`
-2. copy `dist/bundle.min.js` into `modules/hotspots/resources/hotspots.js` in [mwEmbed repo](https://github.com/kaltura/mwEmbed).
+2. copy files from `dist` folder into `modules/hotspots/resources` in [mwEmbed repo](https://github.com/kaltura/mwEmbed).
 3. test it with the test page `modules/hotspots/tests/hotspots.test.html` (using xamp or mamp). for example `http://localhost:8888/html5.kaltura/mwEmbed/modules/hotspots/tests/hotspots.test.html` 
 
 	* if needed you can enable debug logs in console by using a query string `?debugKalturaPlayer` and filtering messages with `[hotspots]` in the console.

diff --git a/packages/plugin-v2/package.json b/packages/plugin-v2/package.json
@@ -1,5 +1,6 @@
 {
   "name": "hotspots",
+  "main": "dist/playkit-js-hotspots.js",
   "private": true,
   "version": "0.0.0",
   "description": "",
@@ -8,6 +9,8 @@
     "url": "https://github.com/kaltura/playkit-js-hotspots"
   },
   "scripts": {
+    "clean": "rm -rf dist",
+    "prebuild": "npm run clean",
     "build": "webpack --mode production",
     "start": "webpack-dev-server --mode development",
     "analyze": "npm run build && npx source-map-explorer dist/bundle.min.js"
@@ -35,5 +38,8 @@
   },
   "dependencies": {
     "preact": "^8.2.5"
-  }
+  },
+  "files": [
+    "dist"
+  ]
 }
diff --git a/packages/plugin-v2/src/.gitignore b/packages/plugin-v2/src/.gitignore
diff --git a/packages/plugin-v2/test/.gitignore b/packages/plugin-v2/test/.gitignore
@@ -0,0 +1 @@
+index.ejs
diff --git a/packages/plugin-v2/test/index.ejs b/packages/plugin-v2/test/index.ejs
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Hotspots - Player V2</title>
+
+  <script src="https://cdnapisec.kaltura.com/p/2052371/sp/205237100/embedIframeJs/uiconf_id/39149581/partner_id/2052371"></script>
+
+  <link rel="stylesheet" href="resize.css">
+  <script src="resize.js"></script>
+
+  <style>
+    #kaltura_player_1545049605 {
+      display: inline;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+</head>
+
+<body>
+<h1>Hotspots - Player V2</h1>
+<button onclick="changeMedia()">test change media</button>
+<div style="position:relative;margin-top:10px">
+  <div class='resizable'>
+    <div id="kaltura_player_1545049605"></div>
+    <div class='resizers'>
+      <div class='resizer top-left'></div>
+      <div class='resizer top-right'></div>
+      <div class='resizer bottom-left'></div>
+      <div class='resizer bottom-right'></div>
+    </div>
+  </div>
+</div>
+
+<script>
+
+  function changeMedia() {
+    kdp.sendNotification("changeMedia", { "entryId" : "1_4gs7ozgq" });
+  }
+  var kdp;
+
+  kWidget.addReadyCallback(function( playerId ){
+    kdp = document.getElementById( playerId );
+  });
+
+  kWidget.embed({
+    "targetId": "kaltura_player_1545049605",
+    "wid": "_2052371",
+    "uiconf_id": 39149581,
+    "flashvars": {
+      "autoPlay": false,
+      ks: 'djJ8MjA1MjM3MXxZneMV32mCt5J0lYPunbK7BtEFhLZUyiQii7dbU1h_HuxqYYS_rzYrphnRxrE5aQxFzV59MVmVtrnGWUiKr0kQ0z1FlwWa-so-8Tv6hYsB404qfDgFLcGDeTj5WzQZi61Ro6Af7VvREPVtRD2DfeCm',
+      hotspots: {
+        plugin: true,
+  <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>iframeHTML5Js: "<%= htmlWebpackPlugin.files.chunks[chunk].entry %>",<% } %>
+      },
+    },
+    "cache_st": 1545049605,
+    "entry_id": "1_qlrg9edk" // omri "1_4gs7ozgq"
+  });
+
+  makeResizableDiv('.resizable');
+</script>
+</body>
+</html>
diff --git a/packages/plugin-v2/src/test.template.ejs → packages/plugin-v2/test/index.template.ejs b/packages/plugin-v2/src/test.template.ejs → packages/plugin-v2/test/index.template.ejs
diff --git a/packages/plugin-v2/src/public/resize.css → packages/plugin-v2/test/resize.css b/packages/plugin-v2/src/public/resize.css → packages/plugin-v2/test/resize.css
diff --git a/packages/plugin-v2/src/public/resize.js → packages/plugin-v2/test/resize.js b/packages/plugin-v2/src/public/resize.js → packages/plugin-v2/test/resize.js
diff --git a/packages/plugin-v2/webpack.config.js b/packages/plugin-v2/webpack.config.js
@@ -3,11 +3,34 @@ const HtmlWebpackPlugin = require("html-webpack-plugin");
 const CopyPlugin = require("copy-webpack-plugin");
 
 const packageJson = require('./package.json');
+
+const isDevServer = process.argv.find(v => v.indexOf('webpack-dev-server') !== -1);
+const testFolder = path.join(__dirname, "/test");
 const distFolder = path.join(__dirname, "/dist");
+const pluginName = 'hotspots';
+
+const plugins = [];
+
+if (isDevServer) {
+  plugins.push(
+    new HtmlWebpackPlugin({
+      alwaysWriteToDisk: true,
+      filename: path.resolve(distFolder, "index.html"),
+      template: path.resolve(testFolder, "index.ejs"),
+      inject: false,
+      hash: true
+    }),
+    new CopyPlugin([
+      { from: testFolder, to: distFolder }
+    ])
+  );
+}
 
 module.exports = (env, options) => {
   return {
-    entry: "./src/index.ts",
+    entry: {
+      [`playkit-js-${pluginName}`]: "./src/index.ts"
+    },
     resolve: {
       extensions: [".ts", ".tsx", ".js"],
       alias: { "@plugin/shared": path.resolve(__dirname, "../shared/") },
@@ -16,7 +39,11 @@ module.exports = (env, options) => {
     },
     output: {
       path: distFolder,
-      filename: `playkit-js-hotspots.min.js`
+      filename: '[name].js',
+      library: ['KalturaPlayer', 'plugins', pluginName],
+      libraryTarget: 'umd',
+      umdNamedDefine: true,
+      devtoolModuleFilenameTemplate: `./${pluginName}/[resource-path]`
     },
     devtool: options.mode == "development" ? "eval-source-map" : "source-map",
     module: {
@@ -27,26 +54,13 @@ module.exports = (env, options) => {
         }
       ]
     },
-    plugins: [
-      new HtmlWebpackPlugin({
-        filename: path.resolve(distFolder, "index.html"),
-        template: path.resolve("src", "test.ejs"),
-        inject: false,
-        hash: true
-      }),
-      new CopyPlugin([
-        { from: "src/public", to: distFolder }
-      ])
-    ],
+    plugins,
     devServer: {
-      contentBase: distFolder,
       historyApiFallback: true,
       hot: false,
       inline: true,
-      publicPath: "/",
       index: "index.html",
       port: 8002
     }
-
   };
 }