practisemaster 1.0.15 → 1.0.17

package/README.md

@@ -5,13 +5,14 @@ This is the PractiseMaster repo, treat it with respect! [![Gitpod ready-to-code]
 
 CI pathway strategy: the idea is to automate many of the steps that are involved in testing.  Publishing to NPM can be automated, triggering Browserstack tests can also be automated.  Browserstack badges also can be added to display test results without manual intervention. 
 
-<ul>
-<li>see actions [readme.md](https://github.com/StephanLuis/PractiseMaster/tree/dev-(NPM-DEV-TAG)/.github/workflows) which explains the purpose of each 'work flow'/li>
-<li>remeber that if the actions are wrong and triggered automatically ... it can be BAD!</li>
-<li>these PM actions trigger actions on [BS tests repository](https://github.com/StephanLuis/BrowserStackSelenium/tree/main/.github/workflows)</li>
-<li>tips on [disabling and skipping actions](https://docs.github.com/en/actions/managing-workflow-runs/skipping-workflow-runs)</li>
-</ul>
 
+- see actions [readme.md](https://github.com/StephanLuis/PractiseMaster/tree/dev-(NPM-DEV-TAG)/.github/workflows) which explains the purpose of each 'work flow'
+- remeber that if the actions are wrong and triggered automatically ... it can be BAD!
+- these PM actions trigger actions on [BS tests repository](https://github.com/StephanLuis/BrowserStackSelenium/tree/main/.github/workflows)
+- tips on [disabling and skipping actions](https://docs.github.com/en/actions/managing-workflow-runs/skipping-workflow-runs)
+
+
+see actions [readme.md](https://github.com/StephanLuis/PractiseMaster/tree/dev-(NPM-DEV-TAG)/.github/workflows) which explains the purpose of each 'work flow'
 
 | Dev Stage         | Pub Trigger | NPM Endpoint|
 | ----------- | ------------- |------------ |

package/dist/PMbundle.js

@@ -102,7 +102,7 @@ eval("var __WEBPACK_AMD_DEFINE_RESULT__;////////////////////////////////////////
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _modules_practisemasterWebComponent__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./modules/practisemasterWebComponent */ \"./src/modules/practisemasterWebComponent.js\");\n/* harmony import */ var _modules_linkEditorWebComponent__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modules/linkEditorWebComponent */ \"./src/modules/linkEditorWebComponent.js\");\n/* harmony import */ var _modules_pageSupport_pm__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./modules/pageSupport-pm */ \"./src/modules/pageSupport-pm.js\");\n/* harmony import */ var _modules_practiseMaster__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./modules/practiseMaster */ \"./src/modules/practiseMaster.js\");\n//        __   __         ___  ___  __  ___       __   ___ \n//   /\\  |__) /  ` |__| |  |  |__  /  `  |  |  | |__) |__  \n//  /~~\\ |  \\ \\__, |  | |  |  |___ \\__,  |  \\__/ |  \\ |___ \n//    \n//                                                    \n// read https://github.com/StephanLuis/PractiseMaster/blob/1.0Architecture/src/README.md\n\n\n\n\n\n\n\n\n\n\n/**\n * this kicks off the webcomponents (entry point)\n */\n\ncustomElements.define(\"practise-master\", _modules_practisemasterWebComponent__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n \n\n\n// export default customElements.define('PM-LinkEditer', PMLinkEditerWebComp);\n\ncustomElements.define('pm-linkediter', _modules_linkEditorWebComponent__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n\n\n\n// then need to new up a PractiseMaster class\n// only want one of these (per page) once init'd then pass array of elements then call PM.player()\n\nwindow.PMpageSupport = new _modules_pageSupport_pm__WEBPACK_IMPORTED_MODULE_2__[\"default\"]();\n\n// question remains of how to pass css into PM? A: use pagesupport above!\n\nwindow.PractiseMaster = new _modules_practiseMaster__WEBPACK_IMPORTED_MODULE_3__[\"default\"]();\n\n\nwindow.PractiseMaster.Loop = (x, y, z) => { return window.PMpageSupport.PMloop(x, y, z);};\n\n\nwindow.PractiseMaster.Chapter = (x, y, z) => { return window.PMpageSupport.PMchapter(x, y, z);};\n\n\n// would like a delete here will have to use await or listen for a final listener\n// window.addEventListener('pmControlsReady', function (e) {\n// delete window.PMpageSupport;\n// });\n\n\n//# sourceURL=webpack://practisemaster/./src/PM.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _modules_practisemasterWebComponent__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./modules/practisemasterWebComponent */ \"./src/modules/practisemasterWebComponent.js\");\n/* harmony import */ var _modules_linkEditorWebComponent__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modules/linkEditorWebComponent */ \"./src/modules/linkEditorWebComponent.js\");\n/* harmony import */ var _modules_pageSupport_pm__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./modules/pageSupport-pm */ \"./src/modules/pageSupport-pm.js\");\n/* harmony import */ var _modules_practiseMaster__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./modules/practiseMaster */ \"./src/modules/practiseMaster.js\");\n//        __   __         ___  ___  __  ___       __   ___ \n//   /\\  |__) /  ` |__| |  |  |__  /  `  |  |  | |__) |__  \n//  /~~\\ |  \\ \\__, |  | |  |  |___ \\__,  |  \\__/ |  \\ |___ \n//    \n//                                                    \n// read https://github.com/StephanLuis/PractiseMaster/blob/1.0Architecture/src/README.md\n\n\n\n\n\n\n\n\n\n\n/**\n * this kicks off the webcomponents (entry point)\n */\n\ncustomElements.define(\"practise-master\", _modules_practisemasterWebComponent__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n \n\n\n// export default customElements.define('PM-LinkEditer', PMLinkEditerWebComp);\n\ncustomElements.define('pm-linkediter', _modules_linkEditorWebComponent__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n\n\n\n// then need to new up a PractiseMaster class\n// only want one of these (per page) once init'd then pass array of elements then call PM.player()\n\nwindow.PMpageSupport = new _modules_pageSupport_pm__WEBPACK_IMPORTED_MODULE_2__[\"default\"]();\n\n// question remains of how to pass css into PM? A: use pagesupport above!\n\nwindow.PractiseMaster = new _modules_practiseMaster__WEBPACK_IMPORTED_MODULE_3__[\"default\"]();\n\n\nwindow.PractiseMaster.Loop = (x, y, z) => { return window.PMpageSupport.PMloop(x, y, z);};\n\n\nwindow.PractiseMaster.Chapter = (x, y, z) => { return window.PMpageSupport.PMchapter(x, y, z);};\n\n\n// would like a delete here will have to use await or listen for a final listener\n// window.addEventListener('pmControlsReady', function (e) {\n// delete window.PMpageSupport;\n// });\n\n// trigger build comment (can remove)\n\n\n//# sourceURL=webpack://practisemaster/./src/PM.js?");
 
 /***/ }),
 
@@ -135,7 +135,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/**\n * the module for the Helpers class\n * @module Helpers Module \n */\n\n\n\n/**\n * cross class methods used through out the application ex. time formats and closure delegates\n */\n\nclass Helpers {\n    constructor() {\n\n    }\n\n    /**\n     * Degelate technique from https://stackoverflow.com/a/46101063/2455159\n     * causes each event to be fired 2x\n     * for more about event delegation see https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation\n     */\n\n    /**\n     * \n     * this delegates are called when creating event listeners to encapsulate the player Id or other control data and the intended target code\n     * @param {string} selector CSS type selector for element\n     * @param {method} handler method to be called\n     * @returns a closure for the event listener \n     */\n\n    \n    delegate(selector, handler) {\n        return function (event) {\n            var targ = event.target;\n            do {\n                if (targ.matches(selector)) {\n                    handler.call(targ, event);\n                }\n            } while ((targ = targ.parentNode) && targ != event.currentTarget);\n        }\n    }\n\n\n\n    /**\n     * this delegates are called when creating event listeners to encapsulate the player Id or other control data and the intended target code by creating a closure\n     * @param {string} selector CSS type selector for element\n     * @param {method} handler method to be called\n     * @returns a closure for the event listener \n     */\n\n    delegateByID(selector, handler) {\n        return function (event) {\n            var targ = event.target;\n            var targID = event.target.id;\n            do {\n                if (targID == selector) {\n                    handler.call(targ, event);\n                }\n            } while ((targ = targ.parentNode) && targ != event.currentTarget);\n        }\n    }\n\n\n\n    /**\n     * this delegates are called when creating event listeners to encapsulate the player Id or other control data and the intended target code by creating a closure with additional parameters\n     * @param {string} selector CSS type selector for element\n     * @param {number} start time to start video / audio\n     * @param {number} end time to end video / audio\n     * @param {method} handler method to be called\n     * @returns a closure for the event listener \n     */\n\n    delegateByIDparams(selector, start, end, handler) {\n        return function (event) {\n            var targ = event.target;\n            var targID = event.target.id;\n\n            handler.call(targ, start, end, event);\n            // do {\n            //     if (targID == selector) {\n            //         handler.call(targ, start, end, event);\n            //     }\n            // } while ((targ = targ.parentNode) && targ != event.currentTarget);\n        }\n    }\n\n    // this converts a float to a string for <input type=\"time\"> \n\n    /**\n     * converts a number of seconds incl decimal to a hh:mm:ss.uuu format\n     * @param {number} numberSeconds \n     * @returns string\n     */\n\n    toStringTime(numberSeconds) {\n\n        var date = new Date(null);\n        // subtraction requires 'decimal guarding'\n\n        var numberSecondsMultip = numberSeconds * 10000;\n        var numberIntegerMultip = Math.floor(numberSeconds) * 10000;\n\n\n        var numberDecimalMultip = numberSecondsMultip - numberIntegerMultip;\n\n\n        date.setSeconds(numberIntegerMultip / 10000);\n        date.setMilliseconds(numberDecimalMultip / 10);\n\n        return date.toISOString().substring(11, 23);\n    }\n\n\n    // type checking for hmsuToSecondsOnly\n    // universal input for time\n    // \"1:01\", \"1:01.000\", \"61\", 61 all accepted \n    // and converted seconds of the type Number \n\n    /**\n     * type checking for hmsuToSecondsOnly universal input for time\n     *  \"1:01\", \"1:01.000\", \"61\", 61 all accepted \n     * and converted seconds of the type Number \n     * @param {string | number} param  time in various formats\n     * @returns {number} time in number of seconds \n     */\n\n    secondsNumber(param) {\n        if (typeof param === 'string' || param instanceof String)\n\n            return this.hmsuToSecondsOnly(param);\n\n        else if (typeof param === 'number') {\n\n            return param;\n\n        } else {\n\n            console.log('The parmater for PMloop is not in one of the two allowed formats.');\n        }\n        // it's something else\n    }\n\n\n\n    /**\n     * converts various string representations of time into a number of seconds\n     * @param {string} str time in string format hh:mm:ss.uuu\n     * @returns {number} number of seconds\n     */\n\n    hmsuToSecondsOnly(str) {\n\n\n        var p = str.split(':'),\n            s = 0, m = 1;\n\n        while (p.length > 0) {\n\n            // number is a bit quicker than parsefloat\n            s += m * Number(p.pop(), 10);\n            m *= 60;\n        }\n\n        // decimal guarding not required\n\n        return s;\n\n    }\n\n\n\n    /**\n     * validates input times on player returns true if invalid, false if valid\n     * @param {string} id id player/plyr/div id\n     * @returns {boolean} whether the input times on player are valid\n     */\n\n    redWarningValidation(id) {\n\n        \n        const loop = window[\"PMinstance_\" + id].loop;\n\n\n        const conditionsArray = [\n            (loop.startTimeSeconds < 0),\n            (loop.endTimeSeconds < 0),\n            (loop.startTimeSeconds > loop.videoDuration),\n            (loop.endTimeSeconds > loop.videoDuration),\n            (loop.startTimeSeconds + 0.25 > loop.endTimeSeconds)\n\n\n        ];\n\n        if (!loop.off) {\n\n            if (conditionsArray.includes(true)) {\n\n\n                var elErr = document.querySelector(\"#\" + id).querySelectorAll(\"input-duration\")\n\n                Array.from(elErr).forEach(item => { item.classList.add(\"plyr__controlError\") });\n\n\n                // since invalid\n                return true;\n            }\n        }\n\n        // clear error states \n        if (!conditionsArray.includes(true)) {\n\n            var cEa = document.querySelector(\"#\" + id).querySelectorAll(\".plyr__control\");\n\n            Array.from(cEa).forEach(function (item) { item.classList.remove(\"plyr__controlError\") });\n\n            // since valid\n            return false;\n        }\n    }\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Helpers);\n\n//# sourceURL=webpack://practisemaster/./src/modules/helpers-pm.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/**\n * the module for the Helpers class\n * @module Helpers Module \n */\n\n\n\n/**\n * cross class methods used through out the application ex. time formats and closure delegates\n */\n\nclass Helpers {\n    constructor() {\n\n    }\n\n    /**\n     * Degelate technique from https://stackoverflow.com/a/46101063/2455159\n     * causes each event to be fired 2x\n     * for more about event delegation see https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation\n     */\n\n    /**\n     * \n     * this delegates are called when creating event listeners to encapsulate the player Id or other control data and the intended target code\n     * @param {string} selector CSS type selector for element\n     * @param {method} handler method to be called\n     * @returns a closure for the event listener \n     */\n\n    \n    delegate(selector, handler) {\n        return function (event) {\n            var targ = event.target;\n            do {\n                if (targ.matches(selector)) {\n                    handler.call(targ, event);\n                }\n            } while ((targ = targ.parentNode) && targ != event.currentTarget);\n        }\n    }\n\n\n\n    /**\n     * this delegates are called when creating event listeners to encapsulate the player Id or other control data and the intended target code by creating a closure\n     * @param {string} selector CSS type selector for element\n     * @param {method} handler method to be called\n     * @returns a closure for the event listener \n     */\n\n    delegateByID(selector, handler) {\n        return function (event) {\n            var targ = event.target;\n            var targID = event.target.id;\n            do {\n                if (targID == selector) {\n                    handler.call(targ, event);\n                }\n            } while ((targ = targ.parentNode) && targ != event.currentTarget);\n        }\n    }\n\n\n\n    /**\n     * this delegates are called when creating event listeners to encapsulate the player Id or other control data and the intended target code by creating a closure with additional parameters\n     * @param {string} selector CSS type selector for element\n     * @param {number} start time to start video / audio\n     * @param {number} end time to end video / audio\n     * @param {method} handler method to be called\n     * @returns a closure for the event listener \n     */\n\n    delegateByIDparams(selector, start, end, handler) {\n        return function (event) {\n            var targ = event.target;\n            var targID = event.target.id;\n\n            handler.call(targ, start, end, event);\n            // do {\n            //     if (targID == selector) {\n            //         handler.call(targ, start, end, event);\n            //     }\n            // } while ((targ = targ.parentNode) && targ != event.currentTarget);\n        }\n    }\n\n    // this converts a float to a string for <input type=\"time\"> \n\n    /**\n     * converts a number of seconds incl decimal to a hh:mm:ss.uuu format\n     * @param {number} numberSeconds \n     * @returns string\n     */\n\n    toStringTime(numberSeconds) {\n\n        var date = new Date(null);\n        // subtraction requires 'decimal guarding'\n\n        var numberSecondsMultip = numberSeconds * 10000;\n        var numberIntegerMultip = Math.floor(numberSeconds) * 10000;\n\n\n        var numberDecimalMultip = numberSecondsMultip - numberIntegerMultip;\n\n\n        date.setSeconds(numberIntegerMultip / 10000);\n        date.setMilliseconds(numberDecimalMultip / 10);\n\n        return date.toISOString().substring(11, 23);\n    }\n\n\n    // type checking for hmsuToSecondsOnly\n    // universal input for time\n    // \"1:01\", \"1:01.000\", \"61\", 61 all accepted \n    // and converted seconds of the type Number \n\n    /**\n     * type checking for hmsuToSecondsOnly universal input for time\n     *  \"1:01\", \"1:01.000\", \"61\", 61 all accepted \n     * and converted seconds of the type Number \n     * @param {string | number} param  time in various formats\n     * @returns {number} time in number of seconds \n     */\n\n    secondsNumber(param) {\n        if (typeof param === 'string' || param instanceof String)\n\n            return this.hmsuToSecondsOnly(param);\n\n        else if (typeof param === 'number') {\n\n            return param;\n\n        } else {\n\n            console.log('The parmater for PMloop is not in one of the two allowed formats.');\n        }\n        // it's something else\n    }\n\n\n\n    /**\n     * converts various string representations of time into a number of seconds\n     * @param {string} str time in string format hh:mm:ss.uuu\n     * @returns {number} number of seconds\n     */\n\n    hmsuToSecondsOnly(str) {\n\n\n        var p = str.split(':'),\n            s = 0, m = 1;\n\n        while (p.length > 0) {\n\n            // number is a bit quicker than parsefloat\n            s += m * Number(p.pop(), 10);\n            m *= 60;\n        }\n\n        // decimal guarding not required\n\n        return s;\n\n    }\n\n\n\n    /**\n     * validates input times on player returns true if invalid, false if valid\n     * @param {string} id id player/plyr/div id\n     * @returns {boolean} whether the input times on player are valid\n     */\n\n    redWarningValidation(id) {\n\n        \n        const loop = window[\"PMinstance_\" + id].loop;\n\n\n        const conditionsArray = [\n            (loop.startTimeSeconds < 0),\n            (loop.endTimeSeconds < 0),\n            (loop.startTimeSeconds > loop.videoDuration),\n            (loop.endTimeSeconds > loop.videoDuration),\n            (loop.startTimeSeconds + 0.25 > loop.endTimeSeconds)\n\n\n        ];\n\n        if (!loop.off) {\n\n            if (conditionsArray.includes(true)) {\n\n\n                var elErr = document.querySelector(\"#\" + id).querySelectorAll(\"input-duration\")\n\n                Array.from(elErr).forEach(item => { item.classList.add(\"plyr__controlError\") });\n\n\n                // since invalid\n                return true;\n            }\n        }\n\n        // clear error states \n        if (!conditionsArray.includes(true)) {\n\n            var cEa = document.querySelector(\"#\" + id).querySelectorAll(\"input-duration\");\n\n            Array.from(cEa).forEach(function (item) { item.classList.remove(\"plyr__controlError\") });\n\n            // since valid\n            return false;\n        }\n    }\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Helpers);\n\n//# sourceURL=webpack://practisemaster/./src/modules/helpers-pm.js?");
 
 /***/ }),
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "practisemaster",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "This is the PractiseMaster repo, treat it with respect! [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/StephanLuis/PractiseMaster)",
   "dependencies": {
     "input-duration": "^2.2.3",