practisemaster 1.0.14 → 1.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +17 -2
  2. package/dist/PMbundle.js +4 -5
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -1,8 +1,18 @@
1
1
  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)
2
2
 
3
3
 
4
- # CI pathways
4
+ # CI pathways, take care each build triggers a github action!
5
5
 
6
+ 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.
7
+
8
+
9
+ - see actions [readme.md](https://github.com/StephanLuis/PractiseMaster/tree/dev-(NPM-DEV-TAG)/.github/workflows) which explains the purpose of each 'work flow'
10
+ - remeber that if the actions are wrong and triggered automatically ... it can be BAD!
11
+ - these PM actions trigger actions on [BS tests repository](https://github.com/StephanLuis/BrowserStackSelenium/tree/main/.github/workflows)
12
+ - tips on [disabling and skipping actions](https://docs.github.com/en/actions/managing-workflow-runs/skipping-workflow-runs)
13
+
14
+
15
+ see actions [readme.md](https://github.com/StephanLuis/PractiseMaster/tree/dev-(NPM-DEV-TAG)/.github/workflows) which explains the purpose of each 'work flow'
6
16
 
7
17
  | Dev Stage | Pub Trigger | NPM Endpoint|
8
18
  | ----------- | ------------- |------------ |
@@ -13,5 +23,10 @@ This is the PractiseMaster repo, treat it with respect! [![Gitpod ready-to-code]
13
23
 
14
24
 
15
25
  # End To End Test URLs
26
+ PM: Debugging on gitpod 8000, dev test on NPM and code sandbox, release on PM website.
27
+ See https://github.com/StephanLuis/BrowserStackSelenium/blob/main/TestURLs/PMtestURLs.mjs
28
+ (on BSSelenium Repository)
29
+
30
+ # Display Flowchart
16
31
 
17
- See https://github.com/StephanLuis/BrowserStackSelenium/blob/main/TestURLs/PMtestURLs.js
32
+ https://drive.google.com/drive/folders/1KXWqXpzDOVReIaBMAkTHVmr0r4kKMGL6?usp=sharing
package/dist/PMbundle.js CHANGED
@@ -5,7 +5,6 @@
5
5
  * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
6
6
  * or disable the default devtool with "devtool: false".
7
7
  * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
8
- * trigger publish and test 1x
9
8
  */
10
9
  /******/ (() => { // webpackBootstrap
11
10
  /******/ var __webpack_modules__ = ({
@@ -103,7 +102,7 @@ eval("var __WEBPACK_AMD_DEFINE_RESULT__;////////////////////////////////////////
103
102
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
104
103
 
105
104
  "use strict";
106
- 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?");
105
+ 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?");
107
106
 
108
107
  /***/ }),
109
108
 
@@ -191,7 +190,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
191
190
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
192
191
 
193
192
  "use strict";
194
- 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/* harmony import */ var plyr__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! plyr */ \"./node_modules/plyr/dist/plyr.min.js\");\n/* harmony import */ var plyr__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(plyr__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var plyr_dist_plyr_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! plyr/dist/plyr.css */ \"./node_modules/plyr/dist/plyr.css\");\n/* harmony import */ var _loop_pm__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./loop-pm */ \"./src/modules/loop-pm.js\");\n/* harmony import */ var _chapter_pm__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./chapter-pm */ \"./src/modules/chapter-pm.js\");\n/* harmony import */ var _UIprep_pm__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./UIprep-pm */ \"./src/modules/UIprep-pm.js\");\n/**\n * an instance of Player is used for each video on the DOM\n * the Player class manages Plyr, Loop, Chapter, HTML and events.\n * the plyr ready event listener instantiats a global window[\"PMinstance_\" + id] that is used by loop and chapter CSS classes\n * that are injected later\n * @module Player Module\n * @requires Plyr Module\n * @requires Plyr CSS\n * @requires Loop Module\n * @requires Chapter Module\n * @requires UIprep Module\n */\n\n\n\n\n\n\n\n\n\n\n\n\n\n/**\n * adds PractiseMaster looping and chapter controls to Plyr\n * @class Player\n * @property {string} id from element\n * @property {class} plyrInstance from plyr module\n * @property {boolean} isStatic as marked by user\n * @property {obsolete} CSSclasses refactor to classList if possible and remove (used once)\n * @property {classlist} classList\n * @property {declaration} code block sets isStatic for given conditions\n * @property {declaration} code block creates audio or video plyr for given properties\n * @property {class} uiPrep a new uiPrep class\n * @property {class} loop a Loop class instance\n * @property {class} chapter a Chapter class instance\n * @property {method} addPMReadyListeners adds any listeners required (ex PMready)\n * \n * \n */\nclass Player {\n\n /**\n * class constructor\n * @param {element} el div with pm class and plyr data requirements \n */\n constructor(el) {\n\n this.id = el.id;\n\n // site (ex WordPress css) goes on page once with PageSupport\n\n \n\n this.plyrInstance;\n\n // note static is set when Plyr is instantiated\n // otherwise this would be in UIprep\n // can toggleControls vis/no vis while playing but not set property\n\n this.isStatic;\n\n // class list for element, CSSclasses added back after player created\n\n this.CSSclasses = el.className.split(' ');\n\n this.classList = el.classList;\n\n // classlist check for static (user implemented)\n\n if (el.classList.contains('static') || el.classList.contains('offScreen') || window.PMpageSupport.isSafari || el.classList.contains('links')) {\n\n this.isStatic = true; // create plyr with static controls\n\n } else {\n // create plyr with hover controls\n this.isStatic = false;\n }\n\n\n if (el.tagName === 'AUDIO') {\n\n this.newPlyrAudio(el);\n\n }\n else {\n\n this.newPlyrVideo(el);\n\n }\n\n\n this.uiPrep = new _UIprep_pm__WEBPACK_IMPORTED_MODULE_4__[\"default\"](el);\n\n this.loop;\n\n this.chapter;\n\n // this will fire after everything to set any universal style\n\n this.addPMReadyListeners();\n\n\n\n }\n\n\n\n /**\n * creates a new video Plyr with the pm element\n * @param {element} el - div with pm class \n */\n\n newPlyrVideo(el) {\n\n this.plyrInstance = new (plyr__WEBPACK_IMPORTED_MODULE_0___default())('#' + el.id, {\n controls: [\n 'play', // Play/pause playback\n 'progress', // The progress bar and scrubber for playback and buffering\n 'current-time', // The current time of playback\n 'duration', // The full duration of the media\n 'mute', // Toggle mute\n 'volume', // Volume control\n 'settings', // Settings menu\n 'fullscreen', // Toggle fullscreen\n ],\n\n hideControls: !this.isStatic\n\n });\n\n this.setVideoListeners(el.id);\n\n this.eventListeners();\n\n }\n\n\n\n /**\n * creates a new audio Plyr with the pm element\n * @param {element} el - div with pm class \n */\n\n newPlyrAudio(el) {\n\n this.plyrInstance = new (plyr__WEBPACK_IMPORTED_MODULE_0___default())('audio#' + el.id, {});\n\n this.setAudioListeners(el.id)\n\n this.eventListeners();\n\n }\n\n\n\n /**\n * called from the plyr ready event listener, this method places the HTML controls on the video player\n * @param {string} id player/plyr/div id\n * @emits {event} called 'pmControlsReady'\n */\n\n HTMLControls(id) {\n\n var loopDivsLiteral = `\n <div style=\"flex-basis: 100%; height: 0;\"></div>\n <div style=\"flex-grow: 0.25;\"></div>\n <button id=\"${this.id}_info\" class=\"infoButton plyr__controls__item plyr__control\" type=\"button\">\n <svg id=\"infoSVG\" class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\" >\n <path xmlns=\"http://www.w3.org/2000/svg\" d=\"m9.0598 0.42333c-4.9453 0-8.9522 3.8514-8.9522 8.6049 0 4.7535 4.0068 8.6049 8.9522 8.6049 4.9453 0 8.9522-3.8514 8.9522-8.6049 0-4.7535-4.0068-8.6049-8.9522-8.6049zm0 15.544c-3.9924 0-7.2195-3.1019-7.2195-6.9394 0-3.8306 3.2271-6.9394 7.2195-6.9394 3.9852 0 7.2195 3.1019 7.2195 6.9394 0 3.8375-3.2271 6.9394-7.2195 6.9394zm0-11.728c0.83746 0 1.5161 0.65231 1.5161 1.4573 0 0.80498-0.67863 1.4573-1.5161 1.4573-0.83746 0-1.5161-0.65231-1.5161-1.4573 0-0.80498 0.67863-1.4573 1.5161-1.4573zm2.0215 8.8131c0 0.229-0.19493 0.41637-0.43317 0.41637h-3.1766c-0.23824 0-0.43317-0.18736-0.43317-0.41637v-0.83273c0-0.229 0.19493-0.41637 0.43317-0.41637h0.43317v-2.2206h-0.43317c-0.23824 0-0.43317-0.18736-0.43317-0.41637v-0.83273c0-0.229 0.19493-0.41637 0.43317-0.41637h2.3102c0.23824 0 0.43317 0.18737 0.43317 0.41637v3.4697h0.43317c0.23824 0 0.43317 0.18736 0.43317 0.41637z\"/>\n </svg>\n <span class=\"label--not-pressed plyr__sr-only\">Info</span>\n </button>\n <span class=\"PMlogo\" style=\"font-style: italic; font-size: smaller; line-height: 12px;\">Practise<br>Master</span>\n <div style=\"flex-grow: 1;\"></div>\n <button id=\"${this.id}_nowTimeStart\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg id=\"nowSVG\" class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\" style=\"transform: scaleY(-1)\" >\n <path xmlns=\"http://www.w3.org/2000/svg\" d=\"m13.83 0.12947c-0.60243 0.001022-0.93199 0.76661-1.3344 1.2481-0.42034 0.6401-0.18152 1.5806 0.28874 2.0369 0.40781 0.38221 0.08162 0.35863-0.24583 0.33434-3.3737 0.011276-6.7487-0.022766-10.121 0.017257-1.3482 0.13812-2.4025 1.9022-2.2584 3.6894 0.006509 2.7641-0.011751 4.6472 0.01577 7.4105 0.10198 1.8037 1.4251 3.1952 2.7541 3.0023 2.1542-0.01129 3.1065 0.02276 5.26-0.01727 1.3476-0.13717 2.3846-1.9108 2.2409-3.6895-0.01218-1.3917 0.02481-2.7875-0.01954-4.1765-0.096853-0.79696-0.72647-1.1446-1.2687-1.0422-0.527-0.049194-1.1834 0.011045-1.4058 0.78294-0.16627 0.81285-0.048406 1.6792-0.083807 2.5159v1.9074h-4.7123c0.0021-2.5223-0.00462-4.1591-0.00294-6.6814h10.095c-0.3871 0.56351-1.025 1.085-0.87246 1.9767 0.12204 0.66517 0.59476 1.0425 0.92175 1.5235 0.48086 0.55576 1.1804 0.23938 1.5247-0.38686 1.0531-1.4245 2.1432-2.8048 3.1729-4.2573 0.34907-0.65253 0.093278-1.5004-0.34614-1.9384-1.0264-1.3413-2.0186-2.7349-3.0667-4.0431-0.15772-0.13891-0.34622-0.21302-0.53492-0.21263z\" style=\"stroke-width:.014514\"/>\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <button id=\"${this.id}_subtrTimeStart\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg id=\"cheveronSVG\" class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\" style=\"transform: scaleX(-1)\" >\n <g xmlns=\"http://www.w3.org/2000/svg\" transform=\"matrix(.036353 0 0 .036621 -3.4195 .1145)\" style=\"stroke-width:7.2515\"><g style=\"stroke-width:7.2515\"><g style=\"stroke-width:7.2515\"><path d=\"m382.68 226.8c-73.671-73.548-147.1-147.35-220.92-220.74-12.991-11.358-32.333-5.3965-41.748 7.4512-10.355 9.4864-22.632 21.691-17.227 37.166 6.041 14.425 20.131 23.247 30.207 34.805 53.47 53.47 106.94 106.94 160.41 160.41-61.919 62.042-124.09 123.84-185.85 186.04-11.359 12.99-5.3968 32.335 7.4522 41.748 9.5221 10.409 21.812 22.708 37.35 17.168 14.308-6.1241 23.115-20.108 34.623-30.154 65.802-65.925 131.86-131.6 197.5-197.68 8.6934-10.271 7.9092-26.86-1.7952-36.212z\" style=\"stroke-width:7.2515\"/></g></g></g>\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <input-duration id=\"${this.id}_timeStart\"></input-duration>\n <button id=\"${this.id}_addTimeStart\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg id=\"cheveronRevSVG\" class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\">\n <use xlink:href=\"#cheveronSVG\" />\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <div style=\"flex-grow: 1;\"></div>\n <button id=\"${this.id}_nowTimeEnd\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg id=\"pointSVG\" class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\" style=\"transform: scale(-1, -1)\" >\n <path xmlns=\"http://www.w3.org/2000/svg\" d=\"m13.83 0.12947c-0.60243 0.001022-0.93199 0.76661-1.3344 1.2481-0.42034 0.6401-0.18152 1.5806 0.28874 2.0369 0.40781 0.38221 0.08162 0.35863-0.24583 0.33434-3.3737 0.011276-6.7487-0.022766-10.121 0.017257-1.3482 0.13812-2.4025 1.9022-2.2584 3.6894 0.006509 2.7641-0.011751 4.6472 0.01577 7.4105 0.10198 1.8037 1.4251 3.1952 2.7541 3.0023 2.1542-0.01129 3.1065 0.02276 5.26-0.01727 1.3476-0.13717 2.3846-1.9108 2.2409-3.6895-0.01218-1.3917 0.02481-2.7875-0.01954-4.1765-0.096853-0.79696-0.72647-1.1446-1.2687-1.0422-0.527-0.049194-1.1834 0.011045-1.4058 0.78294-0.16627 0.81285-0.048406 1.6792-0.083807 2.5159v1.9074h-4.7123c0.0021-2.5223-0.00462-4.1591-0.00294-6.6814h10.095c-0.3871 0.56351-1.025 1.085-0.87246 1.9767 0.12204 0.66517 0.59476 1.0425 0.92175 1.5235 0.48086 0.55576 1.1804 0.23938 1.5247-0.38686 1.0531-1.4245 2.1432-2.8048 3.1729-4.2573 0.34907-0.65253 0.093278-1.5004-0.34614-1.9384-1.0264-1.3413-2.0186-2.7349-3.0667-4.0431-0.15772-0.13891-0.34622-0.21302-0.53492-0.21263z\" style=\"stroke-width:.014514\"/>\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <button id=\"${this.id}_subtrTimeEnd\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\" style=\"transform: scaleX(-1)\" >\n <use xlink:href=\"#cheveronSVG\" />\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <input-duration id=\"${this.id}_timeEnd\"></input-duration>\n <button id=\"${this.id}_addTimeEnd\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\">\n <use xlink:href=\"#cheveronSVG\" />\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <div style=\"flex-grow: 2;\"></div>\n <div id=\"${this.id}_onOff\" class=\"onoffswitch onoffDiv\">\n <input type=\"checkbox\" name=\"onoffswitch\" class=\"onoffswitch-checkbox\" tabindex=\"0\">\n <label class=\"onoffswitch-label\" for=\"myonoffswitch\">\n <span class=\"onoffswitch-inner\"></span>\n <span class=\"onoffswitch-switch\"></span>\n </label>\n </div>\n <div style=\"flex-grow: 0.5;\"> &nbsp;</div>\n `;\n\n\n document.querySelector(\"#\" + id + \" > div.plyr__controls\").insertAdjacentHTML('beforeend', loopDivsLiteral);\n\n\n window.dispatchEvent(new CustomEvent('pmControlsReady', { detail: id }));\n\n }\n\n\n\n /**\n * this method places event listeners on page for PM controls buttons through a delegate in Helpers module \n */\n\n eventListeners() {\n\n // events these events need delegates to encapsulate id data as closures\n // https://stackoverflow.com/questions/46101024/add-event-listener-to-future-item-without-jquery\n\n // start time events \n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_nowTimeStart', this.setTimeStart));\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_subtrTimeStart', this.subtrTimeStart));\n\n // event for input-duration \n document.addEventListener('keyup', window.PMpageSupport.helpers.delegate('#' + this.id + '_timeStart', this.timeStart));\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_addTimeStart', this.addTimeStart));\n\n\n // end time events (add return key for starting loop)\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_nowTimeEnd', this.setTimeEnd));\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_subtrTimeEnd', this.subtrTimeEnd));\n\n // event for input-duration\n document.addEventListener('keyup', window.PMpageSupport.helpers.delegate('#' + this.id + '_timeEnd', this.timeEnd));\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_addTimeEnd', this.addTimeEnd));\n\n // loop on / off button event\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_onOff', this.offToggle));\n\n\n // Loop and Chapter Link button event\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_links', this.linkLoopOrChapter));\n\n\n \n }\n\n\n // actual event listeners\n\n /**\n * event listener sets start time\n * @listens click event of *_nowTimeStart \n * @param {event} e unused\n */\n\n setTimeStart(e) {\n\n // 'this' is button so\n\n\n const id = this.id.replace('_nowTimeStart', '');\n\n\n\n console.log(\"Hey, I'll set the start time for player: \" + id);\n\n\n // Does: \n // set loop start\n\n const currentTime = window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime;\n window.PractiseMaster[\"PM_\" + id].loop.startTimeSeconds = currentTime;\n\n\n // trims string for mobile devices, where input time is updated to input string\n\n document.querySelector(\"#\" + id + \"_timeStart\").value = window.PMpageSupport.helpers.toStringTime(currentTime);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n\n /**\n * event listener reduces start time\n * @listens click event of *_subtrTimeStart \n * @param {event} e unused\n */\n\n subtrTimeStart(e) {\n\n // 'this' is button so\n const id = this.id.replace('_subtrTimeStart', '');\n\n\n console.log(\"Hey, I'll subtract time start for player: \" + id);\n\n\n /// update loop object\n\n var inputTimeFloat = window.PractiseMaster[\"PM_\" + id].loop.startTimeSeconds / 10000 - 0.25 > 0 ? window.PractiseMaster[\"PM_\" + id].loop.startTimeSeconds / 10000 - 0.25 : 0;\n\n window.PractiseMaster[\"PM_\" + id].loop.startTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.pause();\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime = inputTimeFloat;\n\n\n\n document.querySelector(\"#\" + id + \"_timeStart\").value = window.PMpageSupport.helpers.toStringTime(inputTimeFloat);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n /**\n * event listener increases start time\n * @listens click event of *_addTimeStart \n * @param {event} e unused\n */\n\n addTimeStart(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_addTimeStart', '');\n\n\n console.log(\"Hey, I'll add time end for player: \" + id);\n\n\n /// update loop object\n\n var inputTimeFloat = window.PractiseMaster[\"PM_\" + id].loop.startTimeSeconds / 10000 + 0.25;\n\n\n window.PractiseMaster[\"PM_\" + id].loop.startTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.pause();\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime = inputTimeFloat;\n\n\n document.querySelector(\"#\" + id + \"_timeStart\").value = window.PMpageSupport.helpers.toStringTime(inputTimeFloat);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n\n /**\n * event listener for <input type=\"time\"> or chronlyHMS updating start time\n * @listens keyup event of *_timeStart\n * @param {e} event \n */\n\n timeStart(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_timeStart', '');\n\n console.log(\"Hey, I'll digit adjust the start time for player: \" + id);\n\n\n // update loop instance\n\n var startTimeString = this.value;\n\n\n // was toFloatSecs x2\n\n window.PractiseMaster[\"PM_\" + id].loop.startTimeSeconds = window.PMpageSupport.helpers.secondsNumber(startTimeString);\n\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime = window.PMpageSupport.helpers.secondsNumber(startTimeString);\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n\n }\n\n\n\n /**\n * event listener sets end time\n * @listens click event of *_nowTimeEnd \n * @param {event} e unused\n */\n\n setTimeEnd(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_nowTimeEnd', '');\n\n\n console.log(\"Hey, I'll set the end time for player: \" + id);\n\n\n // get current time of plyr\n\n // set loop end\n\n var currentTime = window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime;\n\n\n window.PractiseMaster[\"PM_\" + id].loop.endTimeSeconds = currentTime;\n\n\n // trims string for mobile devices, where input time is updated to input string\n\n document.querySelector(\"#\" + id + \"_timeEnd\").value = window.PMpageSupport.helpers.toStringTime(currentTime);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n\n /**\n * event listener reduces end time\n * @listens click event of *_subtrTimeEnd\n * @param {event} e unused\n */\n\n subtrTimeEnd(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_subtrTimeEnd', '');\n\n\n console.log(\"Hey, I'll subtract time end for player: \" + id);\n\n\n /// update loop object\n\n var inputTimeFloat = window.PractiseMaster[\"PM_\" + id].loop.endTimeSeconds / 10000 - 0.25 > 0 ? window.PractiseMaster[\"PM_\" + id].loop.endTimeSeconds / 10000 - 0.25 : 0;\n\n window.PractiseMaster[\"PM_\" + id].loop.endTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.pause();\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime = inputTimeFloat;\n\n\n // trims string for mobile devices, where input time is updated to input string\n document.querySelector(\"#\" + id + \"_timeEnd\").value = window.PMpageSupport.helpers.toStringTime(inputTimeFloat);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n /**\n * event listener increases end time\n * @listens click event of *_addTimeEnd \n * @param {event} e unused\n */\n\n addTimeEnd(event) {\n\n // 'this' is button so\n\n const id = this.id.replace('_addTimeEnd', '');\n\n\n console.log(\"Hey, I'll add time end for player: \" + id);\n\n\n /// update loop object\n\n var inputTimeFloat = window.PractiseMaster[\"PM_\" + id].loop.endTimeSeconds / 10000 + 0.25;\n\n\n window.PractiseMaster[\"PM_\" + id].loop.endTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.pause();\n\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime = inputTimeFloat;\n\n\n document.querySelector(\"#\" + id + \"_timeEnd\").value = window.PMpageSupport.helpers.toStringTime(inputTimeFloat);\n\n\n //run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n /**\n * event listener for <input type=\"time\"> or chronlyHMS updating end time\n * @listens keyup event of *_timeEnd\n * @param {event} e unused \n */\n\n timeEnd(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_timeEnd', '');\n\n\n console.log(\"Hey, I'll digit adjust the end time for player: \" + id);\n\n\n var endTimeString = this.value;\n\n\n window.PractiseMaster[\"PM_\" + id].loop.endTimeSeconds = window.PMpageSupport.helpers.secondsNumber(endTimeString);\n\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime = window.PMpageSupport.helpers.secondsNumber(endTimeString);\n\n\n //run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n /**\n * event listener toggles on/off looping\n * @listens click event of *_onOff \n * @param {event} e unused\n */\n\n offToggle(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_onOff', '');\n\n\n console.log(\"Hey, I'll toggle off/on player: \" + id);\n\n\n // toggle the ui switch\n\n document.querySelector('#' + id + '_onOff > input').checked = !document.querySelector('#' + id + '_onOff > input').checked;\n\n // Get loop instance\n\n const loop = window.PractiseMaster[\"PM_\" + id].loop;\n\n\n // toggle the loop object instance \n\n loop.off = !loop.off;\n\n console.log(\"The loop is now switched off: \" + loop.off);\n\n\n\n // warning and invalid states check\n // and further in own method \n\n if (!loop.off) {\n\n // run validation \n\n console.log('asking to run validation for' + id);\n\n if (window.PMpageSupport.helpers.redWarningValidation(id)) {\n\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.pause();\n\n // turn looping off\n loop.off = !loop.off;\n\n // toggle switch back to off\n\n setTimeout(() => {\n document.querySelector('#' + id + '_onOff > input').checked = !document.querySelector('#' + id + '_onOff > input').checked;\n }, 500);\n\n }\n\n\n else {\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.play();\n }\n\n }\n }\n\n\n\n /**\n * event listener for loopbuilder links\n * @listens click event of *_links \n * @param {event} e unused\n * @todo refactor this (and other button events and listeners) to the UIprep class\n */\n\n linkLoopOrChapter(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_links', '');\n\n\n console.log(\"Hey, I'll toggle off/on player: \" + id);\n\n\n // need helpers to convert seconds to time before sending to UI\n window.PractiseMaster[\"PM_\" + id].uiPrep.addHTMLlink();\n\n }\n\n\n\n /**\n * time validation for start and end\n * @returns {boolean} returns true if invalid, false if valid\n */\n\n redWarningValidation() {\n\n\n const startTimeControl = document.querySelector(\"#\" + this.id.split(\"_\")[0] + \"_timeStart\");\n\n\n const endTimeControl = document.querySelector(\"#\" + this.id.split(\"_\")[0] + \"_timeEnd\");\n\n\n const loop = window[\"PMinstance_\" + this.id.split(\"_\")[0]].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\n ];\n\n\n // remove any invalid css class\n startTimeControl.classList.remove(\"invalid\");\n\n endTimeControl.classList.remove(\"invalid\");\n\n\n if (conditionsArray.includes(true)) {\n\n // ex device check\n\n if (true) {\n\n\n\n var cEa = document.querySelector(\"#\" + this.id).querySelectorAll(\".plyr__control\");\n\n\n Array.from(cEa).forEach(function (item) { item.classList.add(\"plyr__controlError\") });\n\n\n }\n else {}\n\n // since invalid\n return true;\n }\n\n // since valid\n return false;\n }\n\n\n\n /**\n * statements that run after plyr 'ready' event for audio \n * @listens plyr ready\n * @param {string} id player/plyr/div id\n */\n\n setAudioListeners(id) {\n\n var closure = this;\n\n // Audio ready listener (PM will be slightly different)\n // window[\"PlyrAudio_\" + id].on('ready', event => {\n this.plyrInstance.on('ready', event => {\n\n console.log(\"Plyr audio says it's ready!\");\n\n // need to 'add back' user's id to div because it's removed by plyr \n event.target.id = id;\n\n // also need to add back pm class because it is removed by plyr was: event.target.classList.add('pm');\n closure.CSSclasses.forEach(singleClass => event.target.classList.add(singleClass));\n\n\n // replaces old new PractiseMaster(), as that is already done:\n closure.HTMLControls(closure.id);\n closure.loop = new _loop_pm__WEBPACK_IMPORTED_MODULE_2__[\"default\"](closure.id);\n closure.chapter = new _chapter_pm__WEBPACK_IMPORTED_MODULE_3__[\"default\"](closure.id, 0, 0);\n\n console.log('duration at plyr ready: ' + closure.plyrInstance.duration);\n\n\n // set duration of loop \n\n // for html audio and video there can be lags between plyr ready and the video duration value being 'ready'\n // this promise on interval is based on https://stackoverflow.com/questions/17217736/while-loop-with-promises\n // and https://codepen.io/anon/pen/jzpZMa?editors=0011 \n\n\n const doSomething = value =>\n new Promise(resolve =>\n setTimeout(() => resolve(value >= 5 ? 'ok' : 'no'), 1000))\n\n const loop = async value => {\n let result = null\n while (result != 'ok') {\n console.log(value)\n result = await doSomething(value)\n value = closure.plyrInstance.duration\n }\n console.log('yay audio duration set')\n }\n\n loop(closure.plyrInstance.duration)\n .then(() => {\n window[\"PMinstance_\" + id].loop.videoDuration = closure.plyrInstance.duration;\n console.log('audio duration all done!');\n });\n\n\n\n\n\n\n\n // needs to be initialised first for duration promise in new Loop()\n window[\"PMinstance_\" + id];\n\n // make instance available as Global, needed for Loop and Chapter CSSclasses\n window[\"PMinstance_\" + id] = closure;\n\n this.uiPrep.addAudioStyle(id);\n\n });\n\n }\n\n\n\n /**\n * statements that run after plyr 'ready' event for audio \n * @listens plyr ready\n * @param {string} id player/plyr/div id\n */\n\n setVideoListeners(id) {\n\n\n var closure = this;\n\n\n this.plyrInstance.on('ready', event => {\n\n // need to be above the conditional duration blocks\n // needs to be initialised first for duration promise in new Loop()\n window[\"PMinstance_\" + id];\n\n // make instance available as Global, needed for Loop and Chapter CSSclasses\n window[\"PMinstance_\" + id] = closure;\n\n // need to 'add back' user's id to div because it's removed by plyr \n\n event.target.id = id;\n\n // also need to add back pm class because it is removed by plyr\n\n // event.target.classList.add('pm');\n\n closure.CSSclasses.forEach(singleClass => event.target.classList.add(singleClass));\n\n\n console.log(\"Plyr says it's ready!\");\n\n console.log(\"Player source is : \" + closure.plyrInstance.source);\n\n console.log(\"Player duration is : \" + closure.plyrInstance.duration);\n\n // replaces old new PractiseMaster(), as that is already done:\n closure.HTMLControls(id);\n closure.loop = new _loop_pm__WEBPACK_IMPORTED_MODULE_2__[\"default\"](closure.id);\n closure.chapter = new _chapter_pm__WEBPACK_IMPORTED_MODULE_3__[\"default\"](closure.id, 0, 0);\n\n\n\n // methods to set duration and css are different depending on Video type\n\n if (closure.plyrInstance.isVimeo) {\n\n\n closure.plyrInstance.embed.getDuration().then(function (duration) {\n // the player is ready\n\n console.log(\"This Vimeo getDuration: \" + duration + \" seconds long.\");\n\n closure.loop.videoDuration = duration;\n console.log('Vimeo player duration is ' + duration);\n\n // looks like this needs to go inside promise!\n\n console.log(\"going to call css FH w/in promise! \");\n\n });\n\n }\n\n else if (closure.plyrInstance.isHTML5) {\n\n\n // for html audio and video there can be lags between plyr ready and the video duration value being 'ready'\n // this promise on interval is based on https://stackoverflow.com/questions/17217736/while-loop-with-promises\n // and https://codepen.io/anon/pen/jzpZMa?editors=0011 \n\n\n const doSomething = value =>\n new Promise(resolve =>\n setTimeout(() => resolve(value >= 5 ? 'ok' : 'no'), 1000))\n\n const loop = async value => {\n let result = null\n while (result != 'ok') {\n console.log(value)\n result = await doSomething(value)\n value = closure.plyrInstance.duration\n }\n console.log('yay html video duration set')\n }\n\n loop(closure.plyrInstance.duration)\n .then(() => {\n window[\"PMinstance_\" + id].loop.videoDuration = closure.plyrInstance.duration;\n console.log('video duration all done!');\n });\n\n\n\n\n\n\n\n }\n else {\n\n // for YouTube \n\n closure.loop.videoDuration = closure.plyrInstance.duration;\n\n console.log('Youtube player duration is ' + closure.plyrInstance.duration);\n\n }\n\n // ///\n // /// This event listener drives the looping, on timeupdate event from plyr\n // /// \n\n\n // document.addEventListener('timeupdate', window.PractiseMaster.PageSupport.helpers.delegateByIDparams(window[\"PMinstance_\" + closure.id].loop.id, window[\"PMinstance_\" + closure.id].loop.startTimeSeconds, window[\"PMinstance_\" + closure.id].loop.endTimeSeconds, window[\"PMinstance_\" + closure.id].loop.playSegment));\n\n\n // document.addEventListener('timeupdate', window.PractiseMaster.PageSupport.helpers.delegateByIDparams(window[\"PMinstance_\" + closure.id].chapter.id, window[\"PMinstance_\" + closure.id].chapter.startTimeSeconds, window[\"PMinstance_\" + closure.id].chapter.endTimeSeconds, window[\"PMinstance_\" + closure.id].chapter.playSegment));\n\n\n\n });\n\n };\n\n\n\n /**\n * statments to run after PM fires ready and controls are in place\n * @listens PM ready event \n */\n\n addPMReadyListeners() {\n\n // closure\n var player = this;\n\n window.addEventListener('pmControlsReady', function (e) {\n\n console.log('custom event fired, process(detail): ' + e.detail + ' and listened !!!!');\n\n player.uiPrep.applyPMReadyCssHTMLSettings(player.id);\n\n\n\n // ChronlyHMS added to all players, inactive unless linkbuilder\n // the input-duration will be added in the HTML string literal\n\n\n // input-duration update\n\n player.uiPrep.styleInputDuration(player.id);\n\n\n // set up ChronlyHMS and link builder\n if (player.classList.contains('links')) {\n\n // this updates to LinkBuilder method\n player.uiPrep.addLinkButton(player.id);\n\n\n // audio links doesn't need off player controls\n // the rest of player types do\n\n if (player.plyrInstance.type === 'video') {\n\n player.uiPrep.offPlayerControls(player.id);\n\n }\n\n\n\n }\n else {\n\n // userChronly method in UIprep ChronlyHMS.disableInputs()\n\n // input-duration update, comment out:\n player.uiPrep.diableDurationInputs(player.id);\n\n }\n\n if (player.classList.contains('offScreen')) {\n\n // this updates to LinkBuilder method\n player.uiPrep.offPlayerControls(player.id);\n\n\n }\n\n console.log('plyr duration at PM ready: ' + player.plyrInstance.duration);\n // console.log('loop duration at e: ' + player.loop);\n\n // player.loop.videoDuration = player.plyrInstance.duration\n\n\n //\n // window[\"PMinstance_\" + player.id].loop.videoDuration = player.plyrInstance.duration;\n\n // assign methods to windows variables\n // so user can easily access\n\n window.PMloop = window.PMpageSupport.PMloop;\n\n window.PMchapter = window.PMpageSupport.PMchapter;\n\n\n\n\n\n\n\n },\n\n false);\n }\n\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Player);\n\n//# sourceURL=webpack://practisemaster/./src/modules/player-pm.js?");
193
+ 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/* harmony import */ var plyr__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! plyr */ \"./node_modules/plyr/dist/plyr.min.js\");\n/* harmony import */ var plyr__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(plyr__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var plyr_dist_plyr_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! plyr/dist/plyr.css */ \"./node_modules/plyr/dist/plyr.css\");\n/* harmony import */ var _loop_pm__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./loop-pm */ \"./src/modules/loop-pm.js\");\n/* harmony import */ var _chapter_pm__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./chapter-pm */ \"./src/modules/chapter-pm.js\");\n/* harmony import */ var _UIprep_pm__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./UIprep-pm */ \"./src/modules/UIprep-pm.js\");\n/**\n * an instance of Player is used for each video on the DOM\n * the Player class manages Plyr, Loop, Chapter, HTML and events.\n * the plyr ready event listener instantiats a global window[\"PMinstance_\" + id] that is used by loop and chapter CSS classes\n * that are injected later\n * @module Player Module\n * @requires Plyr Module\n * @requires Plyr CSS\n * @requires Loop Module\n * @requires Chapter Module\n * @requires UIprep Module\n */\n\n\n\n\n\n\n\n\n\n\n\n\n\n/**\n * adds PractiseMaster looping and chapter controls to Plyr\n * @class Player\n * @property {string} id from element\n * @property {class} plyrInstance from plyr module\n * @property {boolean} isStatic as marked by user\n * @property {obsolete} CSSclasses refactor to classList if possible and remove (used once)\n * @property {classlist} classList\n * @property {declaration} code block sets isStatic for given conditions\n * @property {declaration} code block creates audio or video plyr for given properties\n * @property {class} uiPrep a new uiPrep class\n * @property {class} loop a Loop class instance\n * @property {class} chapter a Chapter class instance\n * @property {method} addPMReadyListeners adds any listeners required (ex PMready)\n * \n * \n */\nclass Player {\n\n /**\n * class constructor\n * @param {element} el div with pm class and plyr data requirements \n */\n constructor(el) {\n\n this.id = el.id;\n\n // site (ex WordPress css) goes on page once with PageSupport\n\n \n\n this.plyrInstance;\n\n // note static is set when Plyr is instantiated\n // otherwise this would be in UIprep\n // can toggleControls vis/no vis while playing but not set property\n\n this.isStatic;\n\n // class list for element, CSSclasses added back after player created\n\n this.CSSclasses = el.className.split(' ');\n\n this.classList = el.classList;\n\n // classlist check for static (user implemented)\n\n if (el.classList.contains('static') || el.classList.contains('offScreen') || window.PMpageSupport.isSafari || el.classList.contains('links')) {\n\n this.isStatic = true; // create plyr with static controls\n\n } else {\n // create plyr with hover controls\n this.isStatic = false;\n }\n\n\n if (el.tagName === 'AUDIO') {\n\n this.newPlyrAudio(el);\n\n }\n else {\n\n this.newPlyrVideo(el);\n\n }\n\n\n this.uiPrep = new _UIprep_pm__WEBPACK_IMPORTED_MODULE_4__[\"default\"](el);\n\n this.loop;\n\n this.chapter;\n\n // this will fire after everything to set any universal style\n\n this.addPMReadyListeners();\n\n\n\n }\n\n\n\n /**\n * creates a new video Plyr with the pm element\n * @param {element} el - div with pm class \n */\n\n newPlyrVideo(el) {\n\n this.plyrInstance = new (plyr__WEBPACK_IMPORTED_MODULE_0___default())('#' + el.id, {\n controls: [\n 'play', // Play/pause playback\n 'progress', // The progress bar and scrubber for playback and buffering\n 'current-time', // The current time of playback\n 'duration', // The full duration of the media\n 'mute', // Toggle mute\n 'volume', // Volume control\n 'settings', // Settings menu\n 'fullscreen', // Toggle fullscreen\n ],\n\n hideControls: !this.isStatic\n\n });\n\n this.setVideoListeners(el.id);\n\n this.eventListeners();\n\n }\n\n\n\n /**\n * creates a new audio Plyr with the pm element\n * @param {element} el - div with pm class \n */\n\n newPlyrAudio(el) {\n\n this.plyrInstance = new (plyr__WEBPACK_IMPORTED_MODULE_0___default())('audio#' + el.id, {});\n\n this.setAudioListeners(el.id)\n\n this.eventListeners();\n\n }\n\n\n\n /**\n * called from the plyr ready event listener, this method places the HTML controls on the video player\n * @param {string} id player/plyr/div id\n * @emits {event} called 'pmControlsReady'\n */\n\n HTMLControls(id) {\n\n var loopDivsLiteral = `\n <div style=\"flex-basis: 100%; height: 0;\"></div>\n <div style=\"flex-grow: 0.25;\"></div>\n <button id=\"${this.id}_info\" class=\"infoButton plyr__controls__item plyr__control\" type=\"button\">\n <svg id=\"infoSVG\" class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\" >\n <path xmlns=\"http://www.w3.org/2000/svg\" d=\"m9.0598 0.42333c-4.9453 0-8.9522 3.8514-8.9522 8.6049 0 4.7535 4.0068 8.6049 8.9522 8.6049 4.9453 0 8.9522-3.8514 8.9522-8.6049 0-4.7535-4.0068-8.6049-8.9522-8.6049zm0 15.544c-3.9924 0-7.2195-3.1019-7.2195-6.9394 0-3.8306 3.2271-6.9394 7.2195-6.9394 3.9852 0 7.2195 3.1019 7.2195 6.9394 0 3.8375-3.2271 6.9394-7.2195 6.9394zm0-11.728c0.83746 0 1.5161 0.65231 1.5161 1.4573 0 0.80498-0.67863 1.4573-1.5161 1.4573-0.83746 0-1.5161-0.65231-1.5161-1.4573 0-0.80498 0.67863-1.4573 1.5161-1.4573zm2.0215 8.8131c0 0.229-0.19493 0.41637-0.43317 0.41637h-3.1766c-0.23824 0-0.43317-0.18736-0.43317-0.41637v-0.83273c0-0.229 0.19493-0.41637 0.43317-0.41637h0.43317v-2.2206h-0.43317c-0.23824 0-0.43317-0.18736-0.43317-0.41637v-0.83273c0-0.229 0.19493-0.41637 0.43317-0.41637h2.3102c0.23824 0 0.43317 0.18737 0.43317 0.41637v3.4697h0.43317c0.23824 0 0.43317 0.18736 0.43317 0.41637z\"/>\n </svg>\n <span class=\"label--not-pressed plyr__sr-only\">Info</span>\n </button>\n <span class=\"PMlogo\" style=\"font-style: italic; font-size: smaller; line-height: 12px;\">Practise<br>Master</span>\n <div style=\"flex-grow: 1;\"></div>\n <button id=\"${this.id}_nowTimeStart\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg id=\"nowSVG\" class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\" style=\"transform: scaleY(-1)\" >\n <path xmlns=\"http://www.w3.org/2000/svg\" d=\"m13.83 0.12947c-0.60243 0.001022-0.93199 0.76661-1.3344 1.2481-0.42034 0.6401-0.18152 1.5806 0.28874 2.0369 0.40781 0.38221 0.08162 0.35863-0.24583 0.33434-3.3737 0.011276-6.7487-0.022766-10.121 0.017257-1.3482 0.13812-2.4025 1.9022-2.2584 3.6894 0.006509 2.7641-0.011751 4.6472 0.01577 7.4105 0.10198 1.8037 1.4251 3.1952 2.7541 3.0023 2.1542-0.01129 3.1065 0.02276 5.26-0.01727 1.3476-0.13717 2.3846-1.9108 2.2409-3.6895-0.01218-1.3917 0.02481-2.7875-0.01954-4.1765-0.096853-0.79696-0.72647-1.1446-1.2687-1.0422-0.527-0.049194-1.1834 0.011045-1.4058 0.78294-0.16627 0.81285-0.048406 1.6792-0.083807 2.5159v1.9074h-4.7123c0.0021-2.5223-0.00462-4.1591-0.00294-6.6814h10.095c-0.3871 0.56351-1.025 1.085-0.87246 1.9767 0.12204 0.66517 0.59476 1.0425 0.92175 1.5235 0.48086 0.55576 1.1804 0.23938 1.5247-0.38686 1.0531-1.4245 2.1432-2.8048 3.1729-4.2573 0.34907-0.65253 0.093278-1.5004-0.34614-1.9384-1.0264-1.3413-2.0186-2.7349-3.0667-4.0431-0.15772-0.13891-0.34622-0.21302-0.53492-0.21263z\" style=\"stroke-width:.014514\"/>\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <button id=\"${this.id}_subtrTimeStart\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg id=\"cheveronSVG\" class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\" style=\"transform: scaleX(-1)\" >\n <g xmlns=\"http://www.w3.org/2000/svg\" transform=\"matrix(.036353 0 0 .036621 -3.4195 .1145)\" style=\"stroke-width:7.2515\"><g style=\"stroke-width:7.2515\"><g style=\"stroke-width:7.2515\"><path d=\"m382.68 226.8c-73.671-73.548-147.1-147.35-220.92-220.74-12.991-11.358-32.333-5.3965-41.748 7.4512-10.355 9.4864-22.632 21.691-17.227 37.166 6.041 14.425 20.131 23.247 30.207 34.805 53.47 53.47 106.94 106.94 160.41 160.41-61.919 62.042-124.09 123.84-185.85 186.04-11.359 12.99-5.3968 32.335 7.4522 41.748 9.5221 10.409 21.812 22.708 37.35 17.168 14.308-6.1241 23.115-20.108 34.623-30.154 65.802-65.925 131.86-131.6 197.5-197.68 8.6934-10.271 7.9092-26.86-1.7952-36.212z\" style=\"stroke-width:7.2515\"/></g></g></g>\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <input-duration id=\"${this.id}_timeStart\"></input-duration>\n <button id=\"${this.id}_addTimeStart\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg id=\"cheveronRevSVG\" class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\">\n <use xlink:href=\"#cheveronSVG\" />\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <div style=\"flex-grow: 1;\"></div>\n <button id=\"${this.id}_nowTimeEnd\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg id=\"pointSVG\" class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\" style=\"transform: scale(-1, -1)\" >\n <path xmlns=\"http://www.w3.org/2000/svg\" d=\"m13.83 0.12947c-0.60243 0.001022-0.93199 0.76661-1.3344 1.2481-0.42034 0.6401-0.18152 1.5806 0.28874 2.0369 0.40781 0.38221 0.08162 0.35863-0.24583 0.33434-3.3737 0.011276-6.7487-0.022766-10.121 0.017257-1.3482 0.13812-2.4025 1.9022-2.2584 3.6894 0.006509 2.7641-0.011751 4.6472 0.01577 7.4105 0.10198 1.8037 1.4251 3.1952 2.7541 3.0023 2.1542-0.01129 3.1065 0.02276 5.26-0.01727 1.3476-0.13717 2.3846-1.9108 2.2409-3.6895-0.01218-1.3917 0.02481-2.7875-0.01954-4.1765-0.096853-0.79696-0.72647-1.1446-1.2687-1.0422-0.527-0.049194-1.1834 0.011045-1.4058 0.78294-0.16627 0.81285-0.048406 1.6792-0.083807 2.5159v1.9074h-4.7123c0.0021-2.5223-0.00462-4.1591-0.00294-6.6814h10.095c-0.3871 0.56351-1.025 1.085-0.87246 1.9767 0.12204 0.66517 0.59476 1.0425 0.92175 1.5235 0.48086 0.55576 1.1804 0.23938 1.5247-0.38686 1.0531-1.4245 2.1432-2.8048 3.1729-4.2573 0.34907-0.65253 0.093278-1.5004-0.34614-1.9384-1.0264-1.3413-2.0186-2.7349-3.0667-4.0431-0.15772-0.13891-0.34622-0.21302-0.53492-0.21263z\" style=\"stroke-width:.014514\"/>\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <button id=\"${this.id}_subtrTimeEnd\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\" style=\"transform: scaleX(-1)\" >\n <use xlink:href=\"#cheveronSVG\" />\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <input-duration id=\"${this.id}_timeEnd\"></input-duration>\n <button id=\"${this.id}_addTimeEnd\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\">\n <use xlink:href=\"#cheveronSVG\" />\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <div style=\"flex-grow: 2;\"></div>\n <div id=\"${this.id}_onOff\" class=\"onoffswitch onoffDiv\">\n <input type=\"checkbox\" name=\"onoffswitch\" class=\"onoffswitch-checkbox\" tabindex=\"0\">\n <label class=\"onoffswitch-label\" for=\"myonoffswitch\">\n <span class=\"onoffswitch-inner\"></span>\n <span class=\"onoffswitch-switch\"></span>\n </label>\n </div>\n <div style=\"flex-grow: 0.5;\"> &nbsp;</div>\n `;\n\n\n document.querySelector(\"#\" + id + \" > div.plyr__controls\").insertAdjacentHTML('beforeend', loopDivsLiteral);\n\n\n window.dispatchEvent(new CustomEvent('pmControlsReady', { detail: id }));\n\n }\n\n\n\n /**\n * this method places event listeners on page for PM controls buttons through a delegate in Helpers module \n */\n\n eventListeners() {\n\n // events these events need delegates to encapsulate id data as closures\n // https://stackoverflow.com/questions/46101024/add-event-listener-to-future-item-without-jquery\n\n // start time events \n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_nowTimeStart', this.setTimeStart));\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_subtrTimeStart', this.subtrTimeStart));\n\n // event for input-duration \n document.addEventListener('keyup', window.PMpageSupport.helpers.delegate('#' + this.id + '_timeStart', this.timeStart));\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_addTimeStart', this.addTimeStart));\n\n\n // end time events (add return key for starting loop)\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_nowTimeEnd', this.setTimeEnd));\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_subtrTimeEnd', this.subtrTimeEnd));\n\n // event for input-duration\n document.addEventListener('keyup', window.PMpageSupport.helpers.delegate('#' + this.id + '_timeEnd', this.timeEnd));\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_addTimeEnd', this.addTimeEnd));\n\n // loop on / off button event\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_onOff', this.offToggle));\n\n\n // Loop and Chapter Link button event\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_links', this.linkLoopOrChapter));\n\n\n \n }\n\n\n // actual event listeners\n\n /**\n * event listener sets start time\n * @listens click event of *_nowTimeStart \n * @param {event} e unused\n */\n\n setTimeStart(e) {\n\n // 'this' is button so\n\n\n const id = this.id.replace('_nowTimeStart', '');\n\n\n\n console.log(\"Hey, I'll set the start time for player: \" + id);\n\n\n // Does: \n // set loop start\n\n const currentTime = window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime;\n window.PractiseMaster[\"PM_\" + id].loop.startTimeSeconds = currentTime;\n\n\n // trims string for mobile devices, where input time is updated to input string\n\n document.querySelector(\"#\" + id + \"_timeStart\").value = window.PMpageSupport.helpers.toStringTime(currentTime);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n\n /**\n * event listener reduces start time\n * @listens click event of *_subtrTimeStart \n * @param {event} e unused\n */\n\n subtrTimeStart(e) {\n\n // 'this' is button so\n const id = this.id.replace('_subtrTimeStart', '');\n\n\n console.log(\"Hey, I'll subtract time start for player: \" + id);\n\n\n /// update loop object\n\n var inputTimeFloat = window.PractiseMaster[\"PM_\" + id].loop.startTimeSeconds / 10000 - 0.25 > 0 ? window.PractiseMaster[\"PM_\" + id].loop.startTimeSeconds / 10000 - 0.25 : 0;\n\n window.PractiseMaster[\"PM_\" + id].loop.startTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.pause();\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime = inputTimeFloat;\n\n\n\n document.querySelector(\"#\" + id + \"_timeStart\").value = window.PMpageSupport.helpers.toStringTime(inputTimeFloat);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n /**\n * event listener increases start time\n * @listens click event of *_addTimeStart \n * @param {event} e unused\n */\n\n addTimeStart(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_addTimeStart', '');\n\n\n console.log(\"Hey, I'll add time end for player: \" + id);\n\n\n /// update loop object\n\n var inputTimeFloat = window.PractiseMaster[\"PM_\" + id].loop.startTimeSeconds / 10000 + 0.25;\n\n\n window.PractiseMaster[\"PM_\" + id].loop.startTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.pause();\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime = inputTimeFloat;\n\n\n document.querySelector(\"#\" + id + \"_timeStart\").value = window.PMpageSupport.helpers.toStringTime(inputTimeFloat);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n\n /**\n * event listener for <input type=\"time\"> or chronlyHMS updating start time\n * @listens keyup event of *_timeStart\n * @param {e} event \n */\n\n timeStart(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_timeStart', '');\n\n console.log(\"Hey, I'll digit adjust the start time for player: \" + id);\n\n\n // update loop instance\n\n var startTimeString = this.value;\n\n\n // was toFloatSecs x2\n\n window.PractiseMaster[\"PM_\" + id].loop.startTimeSeconds = window.PMpageSupport.helpers.secondsNumber(startTimeString);\n\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime = window.PMpageSupport.helpers.secondsNumber(startTimeString);\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n\n }\n\n\n\n /**\n * event listener sets end time\n * @listens click event of *_nowTimeEnd \n * @param {event} e unused\n */\n\n setTimeEnd(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_nowTimeEnd', '');\n\n\n console.log(\"Hey, I'll set the end time for player: \" + id);\n\n\n // get current time of plyr\n\n // set loop end\n\n var currentTime = window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime;\n\n\n window.PractiseMaster[\"PM_\" + id].loop.endTimeSeconds = currentTime;\n\n\n // trims string for mobile devices, where input time is updated to input string\n\n document.querySelector(\"#\" + id + \"_timeEnd\").value = window.PMpageSupport.helpers.toStringTime(currentTime);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n\n /**\n * event listener reduces end time\n * @listens click event of *_subtrTimeEnd\n * @param {event} e unused\n */\n\n subtrTimeEnd(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_subtrTimeEnd', '');\n\n\n console.log(\"Hey, I'll subtract time end for player: \" + id);\n\n\n /// update loop object\n\n var inputTimeFloat = window.PractiseMaster[\"PM_\" + id].loop.endTimeSeconds / 10000 - 0.25 > 0 ? window.PractiseMaster[\"PM_\" + id].loop.endTimeSeconds / 10000 - 0.25 : 0;\n\n window.PractiseMaster[\"PM_\" + id].loop.endTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.pause();\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime = inputTimeFloat;\n\n\n // trims string for mobile devices, where input time is updated to input string\n document.querySelector(\"#\" + id + \"_timeEnd\").value = window.PMpageSupport.helpers.toStringTime(inputTimeFloat);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n /**\n * event listener increases end time\n * @listens click event of *_addTimeEnd \n * @param {event} e unused\n */\n\n addTimeEnd(event) {\n\n // 'this' is button so\n\n const id = this.id.replace('_addTimeEnd', '');\n\n\n console.log(\"Hey, I'll add time end for player: \" + id);\n\n\n /// update loop object\n\n var inputTimeFloat = window.PractiseMaster[\"PM_\" + id].loop.endTimeSeconds / 10000 + 0.25;\n\n\n window.PractiseMaster[\"PM_\" + id].loop.endTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.pause();\n\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime = inputTimeFloat;\n\n\n document.querySelector(\"#\" + id + \"_timeEnd\").value = window.PMpageSupport.helpers.toStringTime(inputTimeFloat);\n\n\n //run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n /**\n * event listener for <input type=\"time\"> or chronlyHMS updating end time\n * @listens keyup event of *_timeEnd\n * @param {event} e unused \n */\n\n timeEnd(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_timeEnd', '');\n\n\n console.log(\"Hey, I'll digit adjust the end time for player: \" + id);\n\n\n var endTimeString = this.value;\n\n\n window.PractiseMaster[\"PM_\" + id].loop.endTimeSeconds = window.PMpageSupport.helpers.secondsNumber(endTimeString);\n\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime = window.PMpageSupport.helpers.secondsNumber(endTimeString);\n\n\n //run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n /**\n * event listener toggles on/off looping\n * @listens click event of *_onOff \n * @param {event} e unused\n */\n\n offToggle(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_onOff', '');\n\n\n console.log(\"Hey, I'll toggle off/on player: \" + id);\n\n\n // toggle the ui switch\n\n document.querySelector('#' + id + '_onOff > input').checked = !document.querySelector('#' + id + '_onOff > input').checked;\n\n // Get loop instance\n\n const loop = window.PractiseMaster[\"PM_\" + id].loop;\n\n\n // toggle the loop object instance \n\n loop.off = !loop.off;\n\n console.log(\"The loop is now switched off: \" + loop.off);\n\n\n\n // warning and invalid states check\n // and further in own method \n\n if (!loop.off) {\n\n // run validation \n\n console.log('asking to run validation for' + id);\n\n if (window.PMpageSupport.helpers.redWarningValidation(id)) {\n\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.pause();\n\n // turn looping off\n loop.off = !loop.off;\n\n // toggle switch back to off\n\n setTimeout(() => {\n document.querySelector('#' + id + '_onOff > input').checked = !document.querySelector('#' + id + '_onOff > input').checked;\n }, 500);\n\n }\n\n\n else {\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.play();\n }\n\n }\n }\n\n\n\n /**\n * event listener for loopbuilder links\n * @listens click event of *_links \n * @param {event} e unused\n * @todo refactor this (and other button events and listeners) to the UIprep class\n */\n\n linkLoopOrChapter(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_links', '');\n\n\n console.log(\"Hey, I'll toggle off/on player: \" + id);\n\n\n // need helpers to convert seconds to time before sending to UI\n window.PractiseMaster[\"PM_\" + id].uiPrep.addHTMLlink();\n\n }\n\n\n \n /**\n * statements that run after plyr 'ready' event for audio \n * @listens plyr ready\n * @param {string} id player/plyr/div id\n */\n\n setAudioListeners(id) {\n\n var closure = this;\n\n // Audio ready listener (PM will be slightly different)\n // window[\"PlyrAudio_\" + id].on('ready', event => {\n this.plyrInstance.on('ready', event => {\n\n console.log(\"Plyr audio says it's ready!\");\n\n // need to 'add back' user's id to div because it's removed by plyr \n event.target.id = id;\n\n // also need to add back pm class because it is removed by plyr was: event.target.classList.add('pm');\n closure.CSSclasses.forEach(singleClass => event.target.classList.add(singleClass));\n\n\n // replaces old new PractiseMaster(), as that is already done:\n closure.HTMLControls(closure.id);\n closure.loop = new _loop_pm__WEBPACK_IMPORTED_MODULE_2__[\"default\"](closure.id);\n closure.chapter = new _chapter_pm__WEBPACK_IMPORTED_MODULE_3__[\"default\"](closure.id, 0, 0);\n\n console.log('duration at plyr ready: ' + closure.plyrInstance.duration);\n\n\n // set duration of loop \n\n // for html audio and video there can be lags between plyr ready and the video duration value being 'ready'\n // this promise on interval is based on https://stackoverflow.com/questions/17217736/while-loop-with-promises\n // and https://codepen.io/anon/pen/jzpZMa?editors=0011 \n\n\n const doSomething = value =>\n new Promise(resolve =>\n setTimeout(() => resolve(value >= 5 ? 'ok' : 'no'), 1000))\n\n const loop = async value => {\n let result = null\n while (result != 'ok') {\n console.log(value)\n result = await doSomething(value)\n value = closure.plyrInstance.duration\n }\n console.log('yay audio duration set')\n }\n\n loop(closure.plyrInstance.duration)\n .then(() => {\n window[\"PMinstance_\" + id].loop.videoDuration = closure.plyrInstance.duration;\n console.log('audio duration all done!');\n });\n\n\n\n\n\n\n\n // needs to be initialised first for duration promise in new Loop()\n window[\"PMinstance_\" + id];\n\n // make instance available as Global, needed for Loop and Chapter CSSclasses\n window[\"PMinstance_\" + id] = closure;\n\n this.uiPrep.addAudioStyle(id);\n\n });\n\n }\n\n\n\n /**\n * statements that run after plyr 'ready' event for audio \n * @listens plyr ready\n * @param {string} id player/plyr/div id\n */\n\n setVideoListeners(id) {\n\n\n var closure = this;\n\n\n this.plyrInstance.on('ready', event => {\n\n // need to be above the conditional duration blocks\n // needs to be initialised first for duration promise in new Loop()\n window[\"PMinstance_\" + id];\n\n // make instance available as Global, needed for Loop and Chapter CSSclasses\n window[\"PMinstance_\" + id] = closure;\n\n // need to 'add back' user's id to div because it's removed by plyr \n\n event.target.id = id;\n\n // also need to add back pm class because it is removed by plyr\n\n // event.target.classList.add('pm');\n\n closure.CSSclasses.forEach(singleClass => event.target.classList.add(singleClass));\n\n\n console.log(\"Plyr says it's ready!\");\n\n console.log(\"Player source is : \" + closure.plyrInstance.source);\n\n console.log(\"Player duration is : \" + closure.plyrInstance.duration);\n\n // replaces old new PractiseMaster(), as that is already done:\n closure.HTMLControls(id);\n closure.loop = new _loop_pm__WEBPACK_IMPORTED_MODULE_2__[\"default\"](closure.id);\n closure.chapter = new _chapter_pm__WEBPACK_IMPORTED_MODULE_3__[\"default\"](closure.id, 0, 0);\n\n\n\n // methods to set duration and css are different depending on Video type\n\n if (closure.plyrInstance.isVimeo) {\n\n\n closure.plyrInstance.embed.getDuration().then(function (duration) {\n // the player is ready\n\n console.log(\"This Vimeo getDuration: \" + duration + \" seconds long.\");\n\n closure.loop.videoDuration = duration;\n console.log('Vimeo player duration is ' + duration);\n\n // looks like this needs to go inside promise!\n\n console.log(\"going to call css FH w/in promise! \");\n\n });\n\n }\n\n else if (closure.plyrInstance.isHTML5) {\n\n\n // for html audio and video there can be lags between plyr ready and the video duration value being 'ready'\n // this promise on interval is based on https://stackoverflow.com/questions/17217736/while-loop-with-promises\n // and https://codepen.io/anon/pen/jzpZMa?editors=0011 \n\n\n const doSomething = value =>\n new Promise(resolve =>\n setTimeout(() => resolve(value >= 5 ? 'ok' : 'no'), 1000))\n\n const loop = async value => {\n let result = null\n while (result != 'ok') {\n console.log(value)\n result = await doSomething(value)\n value = closure.plyrInstance.duration\n }\n console.log('yay html video duration set')\n }\n\n loop(closure.plyrInstance.duration)\n .then(() => {\n window[\"PMinstance_\" + id].loop.videoDuration = closure.plyrInstance.duration;\n console.log('video duration all done!');\n });\n\n\n\n\n\n\n\n }\n else {\n\n // for YouTube \n\n closure.loop.videoDuration = closure.plyrInstance.duration;\n\n console.log('Youtube player duration is ' + closure.plyrInstance.duration);\n\n }\n\n // ///\n // /// This event listener drives the looping, on timeupdate event from plyr\n // /// \n\n\n // document.addEventListener('timeupdate', window.PractiseMaster.PageSupport.helpers.delegateByIDparams(window[\"PMinstance_\" + closure.id].loop.id, window[\"PMinstance_\" + closure.id].loop.startTimeSeconds, window[\"PMinstance_\" + closure.id].loop.endTimeSeconds, window[\"PMinstance_\" + closure.id].loop.playSegment));\n\n\n // document.addEventListener('timeupdate', window.PractiseMaster.PageSupport.helpers.delegateByIDparams(window[\"PMinstance_\" + closure.id].chapter.id, window[\"PMinstance_\" + closure.id].chapter.startTimeSeconds, window[\"PMinstance_\" + closure.id].chapter.endTimeSeconds, window[\"PMinstance_\" + closure.id].chapter.playSegment));\n\n\n\n });\n\n };\n\n\n\n /**\n * statments to run after PM fires ready and controls are in place\n * @listens PM ready event \n */\n\n addPMReadyListeners() {\n\n // closure\n var player = this;\n\n window.addEventListener('pmControlsReady', function (e) {\n\n console.log('custom event fired, process(detail): ' + e.detail + ' and listened !!!!');\n\n player.uiPrep.applyPMReadyCssHTMLSettings(player.id);\n\n\n\n // ChronlyHMS added to all players, inactive unless linkbuilder\n // the input-duration will be added in the HTML string literal\n\n\n // input-duration update\n\n player.uiPrep.styleInputDuration(player.id);\n\n\n // set up ChronlyHMS and link builder\n if (player.classList.contains('links')) {\n\n // this updates to LinkBuilder method\n player.uiPrep.addLinkButton(player.id);\n\n\n // audio links doesn't need off player controls\n // the rest of player types do\n\n if (player.plyrInstance.type === 'video') {\n\n player.uiPrep.offPlayerControls(player.id);\n\n }\n\n\n\n }\n else {\n\n // userChronly method in UIprep ChronlyHMS.disableInputs()\n\n // input-duration update, comment out:\n player.uiPrep.diableDurationInputs(player.id);\n\n }\n\n if (player.classList.contains('offScreen')) {\n\n // this updates to LinkBuilder method\n player.uiPrep.offPlayerControls(player.id);\n\n\n }\n\n console.log('plyr duration at PM ready: ' + player.plyrInstance.duration);\n // console.log('loop duration at e: ' + player.loop);\n\n // player.loop.videoDuration = player.plyrInstance.duration\n\n\n //\n // window[\"PMinstance_\" + player.id].loop.videoDuration = player.plyrInstance.duration;\n\n // assign methods to windows variables\n // so user can easily access\n\n window.PMloop = window.PMpageSupport.PMloop;\n\n window.PMchapter = window.PMpageSupport.PMchapter;\n\n\n\n\n\n\n\n },\n\n false);\n }\n\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Player);\n\n//# sourceURL=webpack://practisemaster/./src/modules/player-pm.js?");
195
194
 
196
195
  /***/ }),
197
196
 
@@ -202,7 +201,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
202
201
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
203
202
 
204
203
  "use strict";
205
- 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/* harmony import */ var _player_pm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./player-pm */ \"./src/modules/player-pm.js\");\n/**\n * module allows for the newing of a PractiseMaster class \n * a global window.PractiseMaster is created\n * \n * @module PractiseMaster Module\n * @requires Player Module\n * @requires PageSupport Module\n */\n\n\n\n\n\n\n/**\n * entry point for PractiseMaster js plugin: new PractiseMaster();\n * @class PractiseMaster\n * @property {mehtod} globals() - returns window.PractiseMaster\n * @property {method} player() - news up a Player class for each pm class element\n * @property {declaration} getElementsByClassName(\"pm\") - Elements to update with a player \n * @property {declaration} getElementsByClassName(\"pmlinkbuilder\") - Elements to update with a player \n * @property {class} PageSupport(siteCSS) - news this up with any site specific css\n * @property {object} siteCSS - an object for css specific to the host site (ex WordPress)\n */\n\nclass PractiseMaster {\n\n constructor() {\n\n\n\n\n\n\n\n\n\n // will try with pm-linkediter to override this setter with \n // document.querySelector('div.pm') or if can \n // document.querySelector('pm-linkeditor > div.pm')\n\n this.pmElements = document.querySelectorAll(\"practise-master > *.pm\");\n\n this.PMchapter;\n\n this.PMloop;\n\n\n this.player();\n\n this.globals();\n\n\n }\n\n\n\n /**\n * instantiates any global variables from the PractiseMaster class\n * @method\n */\n\n\n globals() {\n\n // window.PractiseMaster.PMloop = function (id, startTime, endTime) { return window.PractiseMaster.PageSupport.PMloop(id, startTime, endTime) };\n // window.PractiseMaster.PMchapter = function (id, startTime, endTime) { return window.PractiseMaster.PageSupport.PMloop(id, startTime, endTime) };\n\n }\n\n\n\n /**\n * news-up a Player class for each of [PMelements]\n * @method\n */\n\n\n player() {\n\n console.log(this.pmElements.length + \" 'pm' video or audio players created\");\n\n // this.pmElements.forEach((el) => {\n\n Array.from(this.pmElements).forEach((el) => {\n // Do stuff here\n console.log(el.tagName);\n\n this[\"PM_\" + el.id] = new _player_pm__WEBPACK_IMPORTED_MODULE_0__[\"default\"](el);\n\n });\n\n }\n\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PractiseMaster);\n\n//# sourceURL=webpack://practisemaster/./src/modules/practiseMaster.js?");
204
+ 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/* harmony import */ var _player_pm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./player-pm */ \"./src/modules/player-pm.js\");\n/**\n * module allows for the newing of a PractiseMaster class \n * a global window.PractiseMaster is created\n * \n * @module PractiseMaster Module\n * @requires Player Module\n * @requires PageSupport Module\n */\n\n\n\n\n\n\n/**\n * entry point for PractiseMaster js plugin: new PractiseMaster();\n * @class PractiseMaster\n * @property {mehtod} globals() - returns window.PractiseMaster\n * @property {method} player() - news up a Player class for each pm class element\n * @property {declaration} getElementsByClassName(\"pm\") - Elements to update with a player \n * @property {declaration} getElementsByClassName(\"pmlinkbuilder\") - Elements to update with a player \n * @property {class} PageSupport(siteCSS) - news this up with any site specific css\n * @property {object} siteCSS - an object for css specific to the host site (ex WordPress)\n * @property {string} version - semver for PractiseMaster\n */\n\nclass PractiseMaster {\n\n constructor() {\n\n\n\n\n\n this.version = '1.0.14';\n\n\n\n // will try with pm-linkediter to override this setter with \n // document.querySelector('div.pm') or if can \n // document.querySelector('pm-linkeditor > div.pm')\n\n this.pmElements = document.querySelectorAll(\"practise-master > *.pm\");\n\n this.PMchapter;\n\n this.PMloop;\n\n\n this.player();\n\n this.globals();\n\n\n }\n\n\n\n /**\n * instantiates any global variables from the PractiseMaster class\n * @method\n */\n\n\n globals() {\n\n // window.PractiseMaster.PMloop = function (id, startTime, endTime) { return window.PractiseMaster.PageSupport.PMloop(id, startTime, endTime) };\n // window.PractiseMaster.PMchapter = function (id, startTime, endTime) { return window.PractiseMaster.PageSupport.PMloop(id, startTime, endTime) };\n\n }\n\n\n\n /**\n * news-up a Player class for each of [PMelements]\n * @method\n */\n\n\n player() {\n\n console.log(this.pmElements.length + \" 'pm' video or audio players created\");\n\n // this.pmElements.forEach((el) => {\n\n Array.from(this.pmElements).forEach((el) => {\n // Do stuff here\n console.log(el.tagName);\n\n this[\"PM_\" + el.id] = new _player_pm__WEBPACK_IMPORTED_MODULE_0__[\"default\"](el);\n\n });\n\n }\n\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PractiseMaster);\n\n//# sourceURL=webpack://practisemaster/./src/modules/practiseMaster.js?");
206
205
 
207
206
  /***/ }),
208
207
 
@@ -358,4 +357,4 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
358
357
  /******/ var __webpack_exports__ = __webpack_require__("./src/PM.js");
359
358
  /******/
360
359
  /******/ })()
361
- ;
360
+ ;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "practisemaster",
3
- "version": "1.0.14",
3
+ "version": "1.0.16",
4
4
  "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)",
5
5
  "dependencies": {
6
6
  "input-duration": "^2.2.3",