practisemaster 1.0.40 → 1.0.42

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 +129 -22
  2. package/dist/PMbundle.js +5 -5
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -1,7 +1,7 @@
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, take care each build triggers a github action!
4
+ # CI pathways, take care each commit triggers a github action!
5
5
 
6
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
7
 
@@ -27,27 +27,134 @@ PM: Debugging on gitpod 8000, dev test on NPM and code sandbox, release on PM we
27
27
  See https://github.com/StephanLuis/BrowserStackSelenium/blob/main/TestURLs/PMtestURLs.mjs
28
28
  (on BSSelenium Repository)
29
29
 
30
- # Display Flowchart
31
30
 
32
- https://drive.google.com/drive/folders/1KXWqXpzDOVReIaBMAkTHVmr0r4kKMGL6?usp=sharing
31
+ # Display Flowchart [(Edit Flowchart)](https://www.mermaidchart.com/app/projects/483c18fa-2653-4745-b930-79379ef18df8/diagrams/5f4e294a-c441-4f38-9dcd-55abffb63a8b/version/v0.1/edit)
32
+ ```mermaid
33
+ ---
34
+ title: PM Device And Browser Response
35
+ ---
36
+ flowchart TD
37
+ A[Problems: Phone Screen size, Safari mouse hover]
38
+ A --> |ua-parser-js| C{".getDevice()<br>.type === 'mobile'"}
39
+ C -->|Yes| D[Display Full Screen Button Only fa:fa-up-right-and-down-left-from-center]
40
+ C -->|No| E[pageSupport]
41
+ E --> F{checkUserBrowser<br>Safari}
42
+ F-->|Yes| G[Static Controls]
43
+ F-->|No| H[Unmod PM controls]
44
+
45
+ ```
46
+
47
+
48
+
49
+ # Class Diagram [(Edit Diagram)](https://www.mermaidchart.com/raw/64fb96ef-ce96-4acb-a36e-ee34ff79799d?theme=light&version=v0.1&format=svg)
50
+
51
+ ```mermaid
52
+ ---
53
+ title: Class Diagram (CD) PractiseMaster
54
+ ---
55
+ classDiagram
56
+ LoopEditorWebComp"1"..|>"*"DocumentObject: Realisation PM.js
57
+ PractiseMasterWebComp"1"..|>"*"DocumentObject
58
+ LoopEditorWebComp<|--PractiseMasterWebComp: Inheritance
59
+ PractiseMasterWebComp <|-- HTMLElement
60
+ PractiseMasterWebComp*--PageSupport
61
+ PractiseMasterWebComp*--PractiseMaster: Composition
62
+ PageSupport*--HostSite
63
+ PageSupport*--Helpers
64
+ PageSupport*--UserRequest
65
+ PractiseMaster"1"*--"*"Player
66
+ Player*--Plyr
67
+ Player*--Loop
68
+ Loop<|--Chapter: Inheritance
69
+ Player*--UIprep
70
+ UserRequest<..UAParser: Dependancy
71
+ UIprep<..input-duration: Dependancy
72
+
73
+
74
+ class LoopEditorWebComp{
75
+ +constructor()
76
+ }
77
+ class PractiseMasterWebComp {
78
+ +constructor(+super())
79
+ +connectedCallback(+initialiseContainers())
80
+ +initialiseContainers()
81
+ ++replaceWithDiv(node)
82
+ ++replaceWithVideo(node)
83
+ ++replaceWithAudio(node)
84
+ +globals()
85
+ }
86
+ class PageSupport {
87
+ +constructor()
33
88
 
34
- # Simplified Class Diagram [(Full Class Diagram)](https://www.mermaidchart.com/raw/64fb96ef-ce96-4acb-a36e-ee34ff79799d?theme=light&version=v0.1&format=svg)
35
-
36
- ```mermaid
37
- graph TD;
38
- PractiseMasterWebComp-->LoopEditorWebComp;
39
- HTMLElement-->PractiseMasterWebComp;
40
- PageSupport-->PractiseMasterWebComp;
41
- PractiseMaster-->PractiseMasterWebComp;
42
- HostSite-->PageSupport;
43
- Helpers-->PageSupport;
44
- UserRequest-->PageSupport;
45
- Player-->PractiseMaster;
46
- Plyr-->Player;
47
- Loop-->Player;
48
- Chapter-->Loop;
49
- UIPrep-->Player;
50
- UAParser-->UserRequest
51
- input-duration-->UIPrep
52
-
89
+ }
90
+ class PractiseMaster {
91
+ +constructor()
92
+ }
93
+ class HostSite{
94
+ +constructor()
95
+ +checkURL()
96
+ +formatIndependantCSS()
97
+ +cssForFiddleHedVimeo()
98
+
99
+ }
100
+ class Helpers{
101
+ +constructor()
102
+ +delegate(selector, handler)
103
+ +delegateByID(selector, handler)
104
+ +delegateByIDparams(selector, start, end, handler)
105
+ +toStringTime(numberSeconds)
106
+ +secondsNumber(param)
107
+ +hmsuToSecondsOnly(str)
108
+ +redWarningValidation(id)
109
+
110
+ }
111
+ class Player{
112
+ +constructor()
113
+ +setVideoListeners(id) object PMinstance_id
114
+ }
115
+ class Plyr{
116
+ +constructor()
117
+ }
118
+ class Loop{
119
+ +constructor()
120
+ }
121
+ class Chapter{
122
+ +constructor()
123
+ }
124
+ class UIprep{
125
+ +constructor()
126
+ +addAudioStyle(id)
127
+ +addHTMLlink()
128
+ +addHTMLchapter()
129
+ +disableDurationInputs(id)
130
+ +addLinkButton(id)
131
+ +styleInputDuration(id)
132
+ +applyPlyrReadyCssHTMLSettings()like static
133
+ +applyPMReadyCssHTMLSettings()
134
+ +setOffPlayerControls(player)
135
+ +offPlayerControls(id)
136
+
137
+
138
+ }
139
+ class UserRequest{
140
+ +constructor()
141
+ }
142
+ class UAParser{
143
+ +contructor();
144
+ }
145
+ class input-duration{
146
+ +constructor();
147
+ }
148
+
149
+ class DocumentObject{
150
+ +PMbundle.js
151
+ +HTMLElement practise-master
152
+ +HTMLElement loop-editor
153
+ +constructor();
154
+ }
53
155
  ```
156
+ =======
157
+
158
+ # Display Flowchart
159
+
160
+ https://drive.google.com/drive/folders/1KXWqXpzDOVReIaBMAkTHVmr0r4kKMGL6?usp=sharing
package/dist/PMbundle.js CHANGED
@@ -113,7 +113,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _mod
113
113
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
114
114
 
115
115
  "use strict";
116
- 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 input_duration__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! input-duration */ \"./node_modules/input-duration/index.js\");\n/**\n * module provides UIprep class\n * @module UIprep Module\n * @requires InputDuration Module\n */\n\n// chronly self boots / news it self up so here the import is needed but the module is show as not used\n// import ChronlyHMS from 'chronlyhms';\n// import 'chronlyhms/src/chrono.css';\n\n\n\n\n\n\n/**\n * class is for assets that appear once on each page, independant from the number of videos\n * @class UIprep\n * @property {number} id player/plyr/div id\n * @property {boolean} isOnScreen ex. always yes, Safari\n */\n\nclass UIprep {\n\n /**\n * class construlctor\n * @param {element} el PM element\n */\n\n constructor(el) {\n\n this.id = el.id;\n\n this.isOnScreen;\n\n if (window.PMpageSupport.isSafari) {\n this.isOnScreen = false;\n }\n\n }\n\n // Class methods\n\n addAudioStyle(id) {\n\n // this is the same as off player control so may be good to refactor and keep the \n // two together\n\n\n // update control div with buttons\n\n var controls = document.querySelector('#' + id + ' > div.plyr__controls');\n\n // var did = document.querySelectorAll('#' + id + ' input-duration');\n\n // did.forEach(x => x.shadowRoot.querySelectorAll(\".ts_digit\").forEach(x => { x.style.background = \"#BFBFBF\"; }))\n\n controls.style.position = 'inherit';\n\n controls.style.paddingTop = '5px';\n\n controls.style.paddingBottom = '5px';\n\n controls.style.background = '#BFBFBF';\n\n\n document.querySelectorAll('#' + id + ' input-duration').forEach(x => {\n\n x.shadowRoot.querySelectorAll(\".ts_digit\").forEach(x => { x.style.color = \"#ebebeb\"; x.style.fontSize = \" initial\"; });\n\n });\n\n // update player container\n\n document.querySelector('#' + id).style.background = '#BFBFBF';\n\n document.querySelector('#' + id).style.borderRadius = '5px';\n\n // end of duplicate code\n\n var controlsRest = document.querySelector('.plyr--audio .plyr__controls');\n\n controlsRest.style.color = 'white';\n\n\n }\n\n /**\n * sets up loop builder links\n */\n\n addHTMLlink() {\n\n\n // method call\n // window.PMpageSupport.PMloop('HplayerLinks', 5, 6)\n\n var startTime = document.querySelector('#' + this.id + '_timeStart').value.substring(3)\n var endTime = document.querySelector('#' + this.id + '_timeEnd').value.substring(3)\n\n\n var loopLinkLiteral = `\n <br>\n <a href=\"#${this.id}\" onclick=\"window.PMpageSupport.PMloop(\\'${this.id}\\', \\'${startTime}\\', \\'${endTime}\\')\">Loop from ${startTime} to ${endTime}</a>\n <input id='${this.id}_loopbox' type=\"text\" value=\"<a href='#${this.id}' onclick='window.PMpageSupport.PMloop(&quot;${this.id}&quot;, &quot;${startTime}&quot;, &quot;${endTime}&quot;)'>Loop from ${startTime} to ${endTime}</a>\" style=\"width: -webkit-fill-available;\" disabled>\n <input type=\"button\" value=\"Copy Link\" onclick= \"navigator.clipboard.writeText(this.previousElementSibling.value)\">\n </div>\n <br>\n `\n\n\n\n var chapterLinkLiteral = `\n <br>\n <a href=\"#${this.id}\" onclick=\"window.PMpageSupport.PMchapter(\\'${this.id}\\', \\'${startTime}\\', \\'${endTime}\\')\">Chapter from ${startTime} to ${endTime}</a>\n <input type=\"text\" value=\"<a href='#${this.id}' onclick='window.PMpageSupport.PMchapter(&quot;${this.id}&quot;, &quot;${startTime}&quot;, &quot;${endTime}&quot;)'>Chapter from ${startTime} to ${endTime}</a>\" style=\"width: -webkit-fill-available;\" disabled>\n <input type=\"button\" value=\"Copy Link\" onclick= \"navigator.clipboard.writeText(this.previousElementSibling.value)\">\n </div>\n <br>\n `\n\n\n // get player div, add new div as sibling\n\n var broOfLinks = document.querySelector('#' + this.id);\n\n broOfLinks.insertAdjacentHTML('afterend', `<div id='linksShadow'> </div>`);\n\n var broOfLinksShad = document.querySelector('#linksShadow');\n\n\n\n var chosenLiteral = window[\"PMinstance_\" + this.id].loop.off ? chapterLinkLiteral : loopLinkLiteral;\n\n const element = (tag, props) => Object.assign(document.createElement(tag), props);\n\n broOfLinksShad.attachShadow({ mode: 'open' }) // sets and returns this.shadowRoot\n .append(\n element(\"DIV\", {\n innerHTML: chosenLiteral,\n id: this.id\n }),\n element(\"STYLE\", {\n innerHTML : `input,\n textarea,\n select {\n all: revert;\n }`\n })\n );\n\n\n\n\n document.querySelector('#linksShadow').scrollIntoView();\n\n }\n\n\n\n /**\n * sets up chapter builder button and links\n */\n\n addHTMLchapter(start, end) {\n\n alert('The Loop is <a> start: ' + start + ' and end :' + end);\n }\n\n\n\n /**\n * disables ChronlyHMS inputs (for end user)\n */\n\n diableDurationInputs(id) {\n\n\n\n var did = document.querySelectorAll('#' + id + ' input-duration');\n\n did.forEach(one => one.disable());\n\n did.forEach(x => x.shadowRoot.querySelectorAll(\".ts_digit\").forEach(x => { x.style.color = \"lightgray\"; x.style.background = \"none\"; x.style.border = \"none\" }))\n\n }\n\n\n\n /**\n * sets up loop builder button\n * @param {string} id player/plyr/div id\n */\n\n addLinkButton(id) {\n\n var linkButtonLiteral = `\n \n \n <button id=\"${id}_links\" class=\"plyr__controls__item plyr__control\" type=\"button\" style=\"padding-top: 3px; padding-bottom: 6px;\">\n <svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fak\" data-icon=\"light-link-circle-arrow-down\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 610 510\" class=\"uploaded-icon-preview svg-inline--fa fa-light-link-circle-arrow-down\" style=\"width: 31px;height: 22px;\"><path fill=\"currentColor\" d=\"M173 131.4c49.1-49.9 130.9-49.9 180.8 0c26.2 26.2 38.5 61 37 95.5c-28 20.9-49.6 50-61.2 83.7c-4.2-5.8-4-14 .9-19.8c1.8-2.1 3.6-4.1 5.4-6.2c32.9-38 30.9-95-4.7-130.5c-37.4-37.5-98.1-37.5-135.5 0c-41.5 41.5-83.1 83-124.6 124.5c-37.5 37.5-37.5 98.3 0 135.8c37.5 37.5 98.3 37.5 135.8 0c7.5-7.5 15.1-15.1 22.6-22.6c6.2-6.3 16.4-6.3 22.6 0c6.3 6.2 6.3 16.3 0 22.6c-7.5 7.5-15.1 15.1-22.6 22.6c-50 50-131 50-181 0s-50-131.9 0-181c41.5-41.5 83-83.1 124.5-124.6zM286.2 380.6c-47.5-47.5-50.2-123.5-7.1-174.2c2.1-2 4.1-4.1 6.2-6.1c5.8-6.7 15.9-7.4 22.6-1.6c6.6 5.7 7.4 15.8 1.6 22.5c-1.8 2.1-3.6 4.1-5.4 6.2c-32.9 38-30.9 95 4.7 130.5c3.5 3.5 7.3 6.8 11.2 9.6c0 .2 0 .3 0 .5c0 13.4 1.5 26.4 4.3 38.9c-13.8-6.2-26.8-15-38.1-26.3zm282.7-283c-37.5-37.5-98.3-37.5-135.8 0c-7.5 7.5-15.1 15.1-22.6 22.6c-6.2 6.3-16.4 6.3-22.6 0c-6.3-7.1-6.3-16.3 0-22.6c7.5-7.5 15.1-15.1 22.6-22.6c50-50 131-50 181 0c43.2 42.4 49.1 109.2 17.7 158.3c-8.1-6.8-16.8-12.9-26-18.1c22.3-36.9 17.6-85.7-14.3-117.5zM496 480c40 0 77-21.3 97-56s20-77.3 0-112s-57-56-97-56s-77 21.3-97 56s-20 77.3 0 112s57 56 97 56zm0-256c51.4 0 99 27.4 124.7 72s25.7 99.4 0 144S547.4 512 496 512s-99-27.4-124.7-72s-25.7-99.4 0-144s73.3-72 124.7-72zm67.3 163.3l-56 56c-6.2 6.3-16.4 6.3-22.6 0c-18.7-18.7-37.3-37.3-56-56c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0c9.6 9.6 19.1 19.1 28.7 28.7c0-29.8 0-59.6 0-89.4c0-8.8 7.2-16 16-16s16 7.2 16 16c0 29.8 0 59.6 0 89.4c9.6-9.6 19.1-19.1 28.7-28.7c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z\" class=\"\"></path></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 `\n\n // append lbl\n\n document.querySelector(\"#\" + id + \" > div.plyr__controls\").insertAdjacentHTML('beforeend', linkButtonLiteral);\n }\n\n\n\n /**\n * adds chronlyHMS to page and styles\n * @param {string} id player/plyr/div id\n */\n\n styleInputDuration(id) {\n\n // general style for 'active' time selector\n\n document.querySelectorAll('#' + id + ' input-duration').forEach(x => {\n\n // removes hours from input duration\n\n x.noHours();\n\n // style timecase\n\n x.shadowRoot.querySelector('.timeCase').style.maxWidth = 'none' // style max width of total control\n x.shadowRoot.querySelector('.timeCase').style.width = \"130px\";\n\n\n\n // style width of inputs\n\n x.shadowRoot.querySelectorAll(\"input.ts_digit\").forEach(y => y.style.width = \"25px\");\n\n x.shadowRoot.querySelectorAll(\"input.sMS.ts_digit\").forEach(y => y.style.width = \"35px\");\n\n\n // style svg\n\n // x.shadowRoot.querySelector(\"#svgContainer\").style.padding = '5px';\n\n x.shadowRoot.querySelector(\"#svgContainer\").style.color = 'white';\n\n });\n\n }\n\n\n\n /**\n * currently unused\n */\n\n applyPlyrReadyCssHTMLSettings() {\n\n // change plyr to static if neccessary \n // early host specific css\n\n }\n\n\n\n /**\n * The player's id for CSS update\n * @param {string} id playerID\n */\n\n applyPMReadyCssHTMLSettings(id) {\n\n\n // PM Controls Style\n\n\n // should this be id based, incase user page has time input on it?\n\n // Array.from(document.querySelectorAll(\"input[type=time]\")).forEach(element => {\n // element.disabled = true;\n\n // element.type = \"text\";\n\n // element.style.minWidth = \"70px\";\n // element.style.maxWidth = \"80px\";\n\n // element.value = \"00:00.00\";\n\n // });\n\n\n \n console.log('UI prep is for: ' + id);\n\n\n // turn off the practise master logo\n\n\n // Array.from(document.querySelectorAll(\".PMlogo\")).forEach(element => {\n // element.style.display = \"none\";\n // });\n\n \n document.querySelector(\"#\" + id + \" span.PMlogo\").style.display = 'none';\n \n\n\n\n document.querySelector(\"#\" + id + \" div.plyr__controls\").style.flexWrap = \"wrap\";\n \n \n // I think this is the play button display\n // document.querySelector(\"#\" + id + \" div.plyr__controls > button:nth-child(5)\").style.display = \"none\";\n\n\n // late host site specific css \n\n // quick test mode\n\n\n // debug 10 Oct 2022 style at bottom of PM\n // this.hostSite.formatIndependantCSS(id);\n\n // this.hostSite.cssForFiddleHedVimeo(id);\n\n }\n\n\n\n /**\n * @param {object} player \n */\n\n setOffPlayerControls(player) {\n\n if (player.CSSclasses.includes('offScreen') || window.PMpageSupport.isSafari) {\n\n this.offPlayerControls(player.id);\n }\n\n }\n\n\n\n /**\n * see setOffPlayerControls()\n * @param {string} id player/plyr/div id\n */\n\n offPlayerControls(id) {\n\n\n // update control div with buttons\n\n var controls = document.querySelector('#' + id + ' > div.plyr__controls');\n\n controls.style.position = 'inherit';\n\n controls.style.paddingTop = '5px';\n\n controls.style.paddingBottom = '5px';\n\n controls.style.background = '#BFBFBF';\n\n\n // update player container\n\n document.querySelector('#' + id).style.background = '#BFBFBF';\n\n document.querySelector('#' + id).style.borderRadius = '5px';\n\n\n // place controls after wrapper\n\n var wrapper = document.querySelector('#' + id + ' > div.plyr__video-wrapper');\n\n wrapper.after(controls);\n\n }\n\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (UIprep);\n\n//# sourceURL=webpack://practisemaster/./src/modules/UIprep-pm.js?");
116
+ 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 input_duration__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! input-duration */ \"./node_modules/input-duration/index.js\");\n/**\n * module provides UIprep class\n * @module UIprep Module\n * @requires InputDuration Module\n */\n\n// input-duration self boots / news it self up so here the import is needed but the module is show as not used\n\n\n\n\n/**\n * class is for assets that appear once on each page, independant from the number of videos\n * @class UIprep\n * @property {number} id player/plyr/div id\n * @property {boolean} isOnScreen ex. always yes, Safari\n */\n\nclass UIprep {\n\n /**\n * class construlctor\n * @param {element} el PM element\n */\n\n constructor(el) {\n\n this.id = el.id;\n\n this.isOnScreen;\n\n if (window.PMpageSupport.isSafari) {\n this.isOnScreen = false;\n }\n\n }\n\n // Class methods\n\n addAudioStyle(id) {\n\n // this is the same as off player control so may be good to refactor and keep the \n // two together\n\n\n // update control div with buttons\n\n var controls = document.querySelector('#' + id + ' > div.plyr__controls');\n\n // var did = document.querySelectorAll('#' + id + ' input-duration');\n\n // did.forEach(x => x.shadowRoot.querySelectorAll(\".ts_digit\").forEach(x => { x.style.background = \"#BFBFBF\"; }))\n\n controls.style.position = 'inherit';\n\n controls.style.paddingTop = '5px';\n\n controls.style.paddingBottom = '5px';\n\n controls.style.background = '#BFBFBF';\n\n\n document.querySelectorAll('#' + id + ' input-duration').forEach(x => {\n\n x.shadowRoot.querySelectorAll(\".ts_digit\").forEach(x => { x.style.color = \"#ebebeb\"; x.style.fontSize = \" initial\"; });\n\n });\n\n // update player container\n\n document.querySelector('#' + id).style.background = '#BFBFBF';\n\n document.querySelector('#' + id).style.borderRadius = '5px';\n\n // end of duplicate code\n\n var controlsRest = document.querySelector('.plyr--audio .plyr__controls');\n\n controlsRest.style.color = 'white';\n\n\n }\n\n /**\n * sets up pm-linkediter links\n */\n\n addHTMLlink() {\n\n\n // method call\n // window.PMpageSupport.PMloop('HplayerLinks', 5, 6)\n\n var startTime = document.querySelector('#' + this.id + '_timeStart').value.substring(3)\n var endTime = document.querySelector('#' + this.id + '_timeEnd').value.substring(3)\n\n\n var loopLinkLiteral = `\n <br>\n <a href=\"#${this.id}\" onclick=\"window.PMpageSupport.PMloop(\\'${this.id}\\', \\'${startTime}\\', \\'${endTime}\\')\">Loop from ${startTime} to ${endTime}</a>\n <input id='${this.id}_loopbox' type=\"text\" value=\"<a href='#${this.id}' onclick='window.PMpageSupport.PMloop(&quot;${this.id}&quot;, &quot;${startTime}&quot;, &quot;${endTime}&quot;)'>Loop from ${startTime} to ${endTime}</a>\" style=\"width: -webkit-fill-available;\" disabled>\n <input type=\"button\" value=\"Copy Link\" onclick= \"navigator.clipboard.writeText(this.previousElementSibling.value)\">\n </div>\n <br>\n `\n\n\n\n var chapterLinkLiteral = `\n <br>\n <a href=\"#${this.id}\" onclick=\"window.PMpageSupport.PMchapter(\\'${this.id}\\', \\'${startTime}\\', \\'${endTime}\\')\">Chapter from ${startTime} to ${endTime}</a>\n <input type=\"text\" value=\"<a href='#${this.id}' onclick='window.PMpageSupport.PMchapter(&quot;${this.id}&quot;, &quot;${startTime}&quot;, &quot;${endTime}&quot;)'>Chapter from ${startTime} to ${endTime}</a>\" style=\"width: -webkit-fill-available;\" disabled>\n <input type=\"button\" value=\"Copy Link\" onclick= \"navigator.clipboard.writeText(this.previousElementSibling.value)\">\n </div>\n <br>\n `\n\n\n // get player div, add new div as sibling\n\n var broOfLinks = document.querySelector('#' + this.id);\n\n broOfLinks.insertAdjacentHTML('afterend', `<div id='linksShadow'> </div>`);\n\n var broOfLinksShad = document.querySelector('#linksShadow');\n\n\n\n var chosenLiteral = window[\"PMinstance_\" + this.id].loop.off ? chapterLinkLiteral : loopLinkLiteral;\n\n const element = (tag, props) => Object.assign(document.createElement(tag), props);\n\n broOfLinksShad.attachShadow({ mode: 'open' }) // sets and returns this.shadowRoot\n .append(\n element(\"DIV\", {\n innerHTML: chosenLiteral,\n id: this.id\n }),\n element(\"STYLE\", {\n innerHTML : `input,\n textarea,\n select {\n all: revert;\n }`\n })\n );\n\n\n\n\n document.querySelector('#linksShadow').scrollIntoView();\n\n }\n\n\n\n /**\n * disables ChronlyHMS inputs (for end user)\n */\n\n diableDurationInputs(id) {\n\n\n\n var did = document.querySelectorAll('#' + id + ' input-duration');\n\n did.forEach(one => one.disable());\n\n did.forEach(x => x.shadowRoot.querySelectorAll(\".ts_digit\").forEach(x => { x.style.color = \"lightgray\"; x.style.background = \"none\"; x.style.border = \"none\" }))\n\n }\n\n\n\n /**\n * sets up loop builder button\n * @param {string} id player/plyr/div id\n */\n\n addLinkButton(id) {\n\n var linkButtonLiteral = `\n \n \n <button id=\"${id}_links\" class=\"plyr__controls__item plyr__control\" type=\"button\" style=\"padding-top: 3px; padding-bottom: 6px;\">\n <svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fak\" data-icon=\"light-link-circle-arrow-down\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 610 510\" class=\"uploaded-icon-preview svg-inline--fa fa-light-link-circle-arrow-down\" style=\"width: 31px;height: 22px;\"><path fill=\"currentColor\" d=\"M173 131.4c49.1-49.9 130.9-49.9 180.8 0c26.2 26.2 38.5 61 37 95.5c-28 20.9-49.6 50-61.2 83.7c-4.2-5.8-4-14 .9-19.8c1.8-2.1 3.6-4.1 5.4-6.2c32.9-38 30.9-95-4.7-130.5c-37.4-37.5-98.1-37.5-135.5 0c-41.5 41.5-83.1 83-124.6 124.5c-37.5 37.5-37.5 98.3 0 135.8c37.5 37.5 98.3 37.5 135.8 0c7.5-7.5 15.1-15.1 22.6-22.6c6.2-6.3 16.4-6.3 22.6 0c6.3 6.2 6.3 16.3 0 22.6c-7.5 7.5-15.1 15.1-22.6 22.6c-50 50-131 50-181 0s-50-131.9 0-181c41.5-41.5 83-83.1 124.5-124.6zM286.2 380.6c-47.5-47.5-50.2-123.5-7.1-174.2c2.1-2 4.1-4.1 6.2-6.1c5.8-6.7 15.9-7.4 22.6-1.6c6.6 5.7 7.4 15.8 1.6 22.5c-1.8 2.1-3.6 4.1-5.4 6.2c-32.9 38-30.9 95 4.7 130.5c3.5 3.5 7.3 6.8 11.2 9.6c0 .2 0 .3 0 .5c0 13.4 1.5 26.4 4.3 38.9c-13.8-6.2-26.8-15-38.1-26.3zm282.7-283c-37.5-37.5-98.3-37.5-135.8 0c-7.5 7.5-15.1 15.1-22.6 22.6c-6.2 6.3-16.4 6.3-22.6 0c-6.3-7.1-6.3-16.3 0-22.6c7.5-7.5 15.1-15.1 22.6-22.6c50-50 131-50 181 0c43.2 42.4 49.1 109.2 17.7 158.3c-8.1-6.8-16.8-12.9-26-18.1c22.3-36.9 17.6-85.7-14.3-117.5zM496 480c40 0 77-21.3 97-56s20-77.3 0-112s-57-56-97-56s-77 21.3-97 56s-20 77.3 0 112s57 56 97 56zm0-256c51.4 0 99 27.4 124.7 72s25.7 99.4 0 144S547.4 512 496 512s-99-27.4-124.7-72s-25.7-99.4 0-144s73.3-72 124.7-72zm67.3 163.3l-56 56c-6.2 6.3-16.4 6.3-22.6 0c-18.7-18.7-37.3-37.3-56-56c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0c9.6 9.6 19.1 19.1 28.7 28.7c0-29.8 0-59.6 0-89.4c0-8.8 7.2-16 16-16s16 7.2 16 16c0 29.8 0 59.6 0 89.4c9.6-9.6 19.1-19.1 28.7-28.7c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z\" class=\"\"></path></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 `\n\n // append lbl\n\n document.querySelector(\"#\" + id + \" > div.plyr__controls\").insertAdjacentHTML('beforeend', linkButtonLiteral);\n }\n\n\n\n /**\n * adds chronlyHMS to page and styles\n * @param {string} id player/plyr/div id\n */\n\n styleInputDuration(id) {\n\n // general style for 'active' time selector\n\n document.querySelectorAll('#' + id + ' input-duration').forEach(x => {\n\n // removes hours from input duration\n\n x.noHours();\n\n // style timecase\n\n x.shadowRoot.querySelector('.timeCase').style.maxWidth = 'none' // style max width of total control\n x.shadowRoot.querySelector('.timeCase').style.width = \"130px\";\n\n\n\n // style width of inputs\n\n x.shadowRoot.querySelectorAll(\"input.ts_digit\").forEach(y => y.style.width = \"25px\");\n\n x.shadowRoot.querySelectorAll(\"input.sMS.ts_digit\").forEach(y => y.style.width = \"35px\");\n\n\n // style svg\n\n // x.shadowRoot.querySelector(\"#svgContainer\").style.padding = '5px';\n\n x.shadowRoot.querySelector(\"#svgContainer\").style.color = 'white';\n\n });\n\n }\n\n\n\n /**\n * currently unused\n */\n\n applyPlyrReadyCssHTMLSettings() {\n\n // change plyr to static if neccessary \n // early host specific css\n\n }\n\n\n\n /**\n * The player's id for CSS update\n * @param {string} id playerID\n */\n\n applyPMReadyCssHTMLSettings(id) {\n\n\n // PM Controls Style\n\n\n // should this be id based, incase user page has time input on it?\n\n // Array.from(document.querySelectorAll(\"input[type=time]\")).forEach(element => {\n // element.disabled = true;\n\n // element.type = \"text\";\n\n // element.style.minWidth = \"70px\";\n // element.style.maxWidth = \"80px\";\n\n // element.value = \"00:00.00\";\n\n // });\n\n\n \n console.log('UI prep is for: ' + id);\n\n\n // turn off the practise master logo\n\n\n // Array.from(document.querySelectorAll(\".PMlogo\")).forEach(element => {\n // element.style.display = \"none\";\n // });\n\n \n document.querySelector(\"#\" + id + \" span.PMlogo\").style.display = 'none';\n \n\n\n\n document.querySelector(\"#\" + id + \" div.plyr__controls\").style.flexWrap = \"wrap\";\n \n \n // I think this is the play button display\n // document.querySelector(\"#\" + id + \" div.plyr__controls > button:nth-child(5)\").style.display = \"none\";\n\n\n // late host site specific css \n\n // quick test mode\n\n\n // debug 10 Oct 2022 style at bottom of PM\n // this.hostSite.formatIndependantCSS(id);\n\n // this.hostSite.cssForFiddleHedVimeo(id);\n\n }\n\n\n\n /**\n * @param {object} player \n */\n\n setOffPlayerControls(player) {\n\n if (player.CSSclasses.includes('offScreen') || window.PMpageSupport.isSafari) {\n\n this.offPlayerControls(player.id);\n }\n\n }\n\n\n\n /**\n * see setOffPlayerControls()\n * @param {string} id player/plyr/div id\n */\n\n offPlayerControls(id) {\n\n\n // update control div with buttons\n\n var controls = document.querySelector('#' + id + ' > div.plyr__controls');\n\n controls.style.position = 'inherit';\n\n controls.style.paddingTop = '5px';\n\n controls.style.paddingBottom = '5px';\n\n controls.style.background = '#BFBFBF';\n\n\n // update player container\n\n document.querySelector('#' + id).style.background = '#BFBFBF';\n\n document.querySelector('#' + id).style.borderRadius = '5px';\n\n\n // place controls after wrapper\n\n var wrapper = document.querySelector('#' + id + ' > div.plyr__video-wrapper');\n\n wrapper.after(controls);\n\n }\n\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (UIprep);\n\n//# sourceURL=webpack://practisemaster/./src/modules/UIprep-pm.js?");
117
117
 
118
118
  /***/ }),
119
119
 
@@ -179,7 +179,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
179
179
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
180
180
 
181
181
  "use strict";
182
- 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 _help1_0digit7_png__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../help1.0digit7.png */ \"./src/help1.0digit7.png\");\n/* harmony import */ var _red_png__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../red.png */ \"./src/red.png\");\n/* harmony import */ var _PM_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../PM.css */ \"./src/PM.css\");\n/* harmony import */ var _helpers_pm__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./helpers-pm */ \"./src/modules/helpers-pm.js\");\n/* harmony import */ var _hostSite_pm__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./hostSite-pm */ \"./src/modules/hostSite-pm.js\");\n/* harmony import */ var _userRequest_pm__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./userRequest-pm */ \"./src/modules/userRequest-pm.js\");\n/**\n * module that provides the PageSupport Class\n * @module PageSupport Module\n * @requires HelpImage png\n * @requires RedImage png\n * @requires CSS PM.css\n * @requires Helpers Module\n * @requires HostSite Module\n * @requires UserRequest Module\n * \n */\n\n\n\n\n\n\n\n\n\n\n\n\n\n/**\n * This class is for assets that appear once on each page, independant from the number of videos\n * @class PageSupport\n * @property {object} cssOpts object passed in PM constructor\n * @property {HostSite} HostSite Module\n * @property {Helpers} Helpers Module\n * @property {PlyrInstance} that should be paused for modal\n * @property {UserRequest} UserRequest Module\n * \n */\n\nclass PageSupport {\n\n /**\n * class constructor\n * @param {object} cssOpts passed in from PM\n */\n\n constructor() {\n\n // css options ex. for WordPress\n // this.cssOpts = cssOpts;\n\n // injected properties\n this.hostSite = new _hostSite_pm__WEBPACK_IMPORTED_MODULE_4__[\"default\"]();\n this.helpers = new _helpers_pm__WEBPACK_IMPORTED_MODULE_3__[\"default\"]();\n\n // properties\n this.PMvideoToPauseModal;\n\n // init methods\n\n // first help host site and check that all pm class elements\n // have an id if not, create one for them\n\n this.pmClassElements = document.getElementsByClassName(\"pm\");\n\n this.checkIds();\n\n this.placeInfoModal();\n\n this.pageEventsModal();\n\n\n this.userRequest = new _userRequest_pm__WEBPACK_IMPORTED_MODULE_5__[\"default\"]();\n\n // isSafari will be the same for all players on page\n // with multiple players\n\n this.isSafari = this.checkUserBrowserSafari();\n\n this.isMobile = this.userRequest.mobileDetected;\n\n\n }\n\n\n\n // Class methods\n\n // these three checks will eventually need some type of validation\n // so a user doesn't add ex. static and button to pm div.\n\n /**\n * @returns boolean\n */\n checkUserBrowserSafari() {\n if (this.userRequest.browserDetected == 'Safari') {\n return true;\n } else {\n return false;\n }\n }\n\n\n\n\n /**\n * currently unused\n */\n applyPageLoadCssHTMLSettings() {\n // wait for PM ready event then ...\n // user request / browser specific \n\n\n }\n\n\n\n /**\n * used (for links) to play loops, where the play starts and ends at a specific time\n * @param {string} id player/plyr/div id\n * @param {string|number} startTime \n * @param {string|number} endTime \n */\n\n PMloop(id, startTime, endTime) {\n\n\n // from the top\n // 0) prep a) turn chapter off\n\n window[\"PMinstance_\" + id].chapter.off = true;\n\n //1) convert user time into PM time == (decimal seconds*1000) a) string i) \"hh:mm:ss.uuu\" and truncations b) number i) seconds w & w/o decimal\n\n var startSeconds = this.helpers.secondsNumber(startTime);\n var endSeconds = this.helpers.secondsNumber(endTime);\n\n\n // 2) get loop for id in param and set the new loop values, turn loop on \n\n window[\"PMinstance_\" + id].loop.startTimeSeconds = startSeconds;\n window[\"PMinstance_\" + id].loop.endTimeSeconds = endSeconds;\n\n window[\"PMinstance_\" + id].loop.off = false;\n\n\n // 3) set up UI a) loop switch b) time inputs\n\n document.querySelector(\"#\" + id + \"_timeStart\").value = this.helpers.toStringTime(startSeconds);\n document.querySelector(\"#\" + id + \"_timeEnd\").value = this.helpers.toStringTime(endSeconds);\n\n document.querySelector(\"#\" + id + \"_onOff > input\").checked = true;\n\n // 4) get plyr playing (at correct time) so that it will loop\n\n window[\"PMinstance_\" + id].plyrInstance.play();\n\n window[\"PMinstance_\" + id].plyrInstance.currentTime = startSeconds;\n\n // report state\n console.log('Looping :' + id + ' from ' + startSeconds + ' to ' + endSeconds);\n\n }\n\n\n\n /**\n * used (for links) to create Chapters, where the play starts and ends at a specific time\n * a loop is also set up so that when a user wants to loop the chapter all they have to do is toggle on the \n * looper switch\n * @param {string} id \n * @param {string|number} startTime \n * @param {string|number} endTime \n */\n\n PMchapter(id, startTime, endTime) {\n\n\n\n // update loop, turn it off and gui switch\n window[\"PMinstance_\" + id].loop.off = true;\n\n\n document.querySelector(\"#\" + id + \"_onOff > input\").checked = false;\n\n\n\n let st = this.helpers.secondsNumber(startTime);\n\n\n let et = this.helpers.secondsNumber(endTime);\n\n\n // update the instance chapter\n window[\"PMinstance_\" + id].chapter.off = false;\n\n\n window[\"PMinstance_\" + id].chapter.startTimeSeconds = st;\n\n\n window[\"PMinstance_\" + id].chapter.endTimeSeconds = et;\n\n\n // update UI\n\n document.querySelector(\"#\" + id + \"_timeStart\").value = this.helpers.toStringTime(st);\n\n\n document.querySelector(\"#\" + id + \"_timeEnd\").value = this.helpers.toStringTime(et);\n\n\n // must play bfore setting current time !!\n window[\"PMinstance_\" + id].plyrInstance.play();\n\n\n window[\"PMinstance_\" + id].plyrInstance.currentTime = st;\n\n }\n\n\n\n /**\n * adds an ID to PM class element, if id is not there.\n */\n\n checkIds() {\n\n // tidy up of video divs and container divs for user\n Array.from(this.pmClassElements).forEach(function (item) {\n\n // IDs: for each of the pm class videos, check for id and add if not present\n\n // generate 'random' name for .pm elements without ids\n const genRanHex = size => [...Array(size)].map(() => Math.floor(Math.random() * 16).toString(16)).join('');\n\n // check each for an id if element doesn't have an id then add a hex id\n item.id ? item.id : item.id = \"pm\" + genRanHex(3);\n\n });\n\n }\n\n \n\n /**\n * places help modal on page and it's button listeners\n */\n\n placeInfoModal() {\n\n // Modal pauses and plays video\n // reference to video is a global called window.PMvideoToPauseModal \n\n // modal div\n\n var divModal = document.createElement(\"div\");\n divModal.id = \"myModal\";\n divModal.classList.add(\"modal\");\n\n\n // modal test content => put photo on js cdn!\n\n\n // Modal Content\n divModal.innerHTML = `<div class=\"modal-content\" style= \"max-width: 700px;\">\n <span id=\"closeModal\" class=\"close\">&times;</span>\n <div style=\"float: left;\"> &#9612; &#9612; Video Paused</div> <br><br>\n <h2>PractiseMaster&trade; Looper</h2>\n <div>Allows you to continuously repeat any section of lesson material.\n <br>\n <br>\n <div> To set your own loops:</div>\n <ol><li>Hit the play button </li><li> Set start time on the left time field, set the end time on the right field </li><li>Turn on PractiseMaster using switch in the lower right corner.</li></div>\n <br>\n <div>Time is displayed \"minutes: seconds. fraction of second\".</div>\n <br><br>\n <div> Or use the pre-set loops if given on the lesson, below the video.\n <br>\n <div id=\"howTo\"></div>\n <br>\n <br>\n <!-- <div id=\"yellow\">Yellow Warning! Start Time > End Time</div>\n <br> \n <br> -->\n <div id=\"red\">The PractiseMaster won't function and will turn red when the start time is later than the end time.</div>\n \n <br><br>\n <div id=\"modalFinePrint\"><a href=\"http://practisemaster.com\" target=\"_blank\">Practice Master</a> is developed by Learnsense LTD.</div>`;\n\n\n var divModalContent = document.createElement(\"p\");\n\n divModalContent.id = \"modalContent\";\n\n divModalContent.innerHTML = '<p>';\n\n\n divModal.appendChild(divModalContent);\n\n\n document.querySelector(\"body\").appendChild(divModal);\n\n\n // Modal Image Help\n\n const helpImage = new Image();\n helpImage.src = _help1_0digit7_png__WEBPACK_IMPORTED_MODULE_0__;\n helpImage.style.width = \"100%\";\n\n document.querySelector(\"#howTo\").appendChild(helpImage);\n\n\n\n\n // Modal Image Red Warning\n\n const redImage = new Image();\n redImage.src = _red_png__WEBPACK_IMPORTED_MODULE_1__;\n redImage.style.width = \"100%\";\n\n document.querySelector(\"#red\").appendChild(redImage);\n\n\n console.log(\"modal should be on dom!\");\n\n }\n\n\n\n /**\n * modal close event listener\n * @listens document click\n */\n\n pageEventsModal() {\n\n // modal close event on 'document' because of injected element\n\n document.addEventListener('click', function (e) {\n\n if (e.target && e.target.id === 'closeModal') {\n\n console.log('time to close modal');\n\n document.querySelector(\"#myModal\").style.display = \"none\";\n\n // Jason says not to play video after modal close\n // window.PMvideoToPauseModal.play();\n }\n\n });\n\n\n //add event listener: click outside modal, close modal\n\n window.onclick = function (event) {\n\n if (event.target.id === 'myModal') {\n document.querySelector(\"#myModal\").style.display = \"none\";\n\n // Jason says not to play video after modal close\n // window.PMvideoToPauseModal.play();\n }\n\n }\n\n document.addEventListener('click', function (e) {\n\n if (e.target && e.target.classList.contains('infoButton')) {\n // pause video play\n\n // global so that it can be called without an id when closing modal\n window.PMvideoToPauseModal = window[\"PMinstance_\" + e.target.id.split(\"_\")[0]].plyrInstance;\n // pause video when modal opens\n window.PMvideoToPauseModal.pause();\n\n document.querySelector(\"#myModal\").style.display = \"block\";\n\n }\n\n });\n\n }\n\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PageSupport);\n\n//# sourceURL=webpack://practisemaster/./src/modules/pageSupport-pm.js?");
182
+ 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 _help1_0digit7_png__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../help1.0digit7.png */ \"./src/help1.0digit7.png\");\n/* harmony import */ var _red_png__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../red.png */ \"./src/red.png\");\n/* harmony import */ var _PM_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../PM.css */ \"./src/PM.css\");\n/* harmony import */ var _helpers_pm__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./helpers-pm */ \"./src/modules/helpers-pm.js\");\n/* harmony import */ var _hostSite_pm__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./hostSite-pm */ \"./src/modules/hostSite-pm.js\");\n/* harmony import */ var _userRequest_pm__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./userRequest-pm */ \"./src/modules/userRequest-pm.js\");\n/**\n * module that provides the PageSupport Class\n * @module PageSupport Module\n * @requires HelpImage png\n * @requires RedImage png\n * @requires CSS PM.css\n * @requires Helpers Module\n * @requires HostSite Module\n * @requires UserRequest Module\n * \n */\n\n\n\n\n\n\n\n\n\n\n\n\n\n/**\n * This class is for assets that appear once on each page, independant from the number of videos\n * @class PageSupport\n * @property {object} cssOpts object passed in PM constructor\n * @property {HostSite} HostSite Module\n * @property {Helpers} Helpers Module\n * @property {PlyrInstance} that should be paused for modal\n * @property {UserRequest} UserRequest Module\n * \n */\n\nclass PageSupport {\n\n /**\n * class constructor\n * @param {object} cssOpts passed in from PM\n */\n\n constructor() {\n\n // css options ex. for WordPress\n // this.cssOpts = cssOpts;\n\n // injected properties\n this.hostSite = new _hostSite_pm__WEBPACK_IMPORTED_MODULE_4__[\"default\"]();\n this.helpers = new _helpers_pm__WEBPACK_IMPORTED_MODULE_3__[\"default\"]();\n\n // properties\n this.PMvideoToPauseModal;\n\n // init methods\n\n // first help host site and check that all pm class elements\n // have an id if not, create one for them\n\n this.pmClassElements = document.getElementsByClassName(\"pm\");\n\n this.checkIds();\n\n this.placeInfoModal();\n\n this.pageEventsModal();\n\n\n this.userRequest = new _userRequest_pm__WEBPACK_IMPORTED_MODULE_5__[\"default\"]();\n\n // isSafari will be the same for all players on page\n // with multiple players\n\n this.isSafari = this.checkUserBrowserSafari();\n\n this.isMobile = this.userRequest.mobileDetected;\n\n\n }\n\n\n\n // Class methods\n\n // these three checks will eventually need some type of validation\n // so a user doesn't add ex. static and button to pm div.\n\n /**\n * @returns boolean\n */\n checkUserBrowserSafari() {\n if (this.userRequest.browserDetected == 'Safari') {\n return true;\n } else {\n return false;\n }\n }\n\n\n /**\n * currently unused\n */\n applyPageLoadCssHTMLSettings() {\n // wait for PM ready event then ...\n // user request / browser specific \n\n\n }\n\n\n\n /**\n * used (for links) to play loops, where the play starts and ends at a specific time\n * @param {string} id player/plyr/div id\n * @param {string|number} startTime \n * @param {string|number} endTime \n */\n\n PMloop(id, startTime, endTime) {\n\n\n // from the top\n // 0) prep a) turn chapter off\n\n window[\"PMinstance_\" + id].chapter.off = true;\n\n //1) convert user time into PM time == (decimal seconds*1000) a) string i) \"hh:mm:ss.uuu\" and truncations b) number i) seconds w & w/o decimal\n\n var startSeconds = this.helpers.secondsNumber(startTime);\n var endSeconds = this.helpers.secondsNumber(endTime);\n\n\n // 2) get loop for id in param and set the new loop values, turn loop on \n\n window[\"PMinstance_\" + id].loop.startTimeSeconds = startSeconds;\n window[\"PMinstance_\" + id].loop.endTimeSeconds = endSeconds;\n\n window[\"PMinstance_\" + id].loop.off = false;\n\n\n // 3) set up UI a) loop switch b) time inputs\n\n document.querySelector(\"#\" + id + \"_timeStart\").value = this.helpers.toStringTime(startSeconds);\n document.querySelector(\"#\" + id + \"_timeEnd\").value = this.helpers.toStringTime(endSeconds);\n\n document.querySelector(\"#\" + id + \"_onOff > input\").checked = true;\n\n // 4) get plyr playing (at correct time) so that it will loop\n\n window[\"PMinstance_\" + id].plyrInstance.play();\n\n window[\"PMinstance_\" + id].plyrInstance.currentTime = startSeconds;\n\n // report state\n console.log('Looping :' + id + ' from ' + startSeconds + ' to ' + endSeconds);\n\n }\n\n\n\n /**\n * used (for links) to create Chapters, where the play starts and ends at a specific time\n * a loop is also set up so that when a user wants to loop the chapter all they have to do is toggle on the \n * looper switch\n * @param {string} id \n * @param {string|number} startTime \n * @param {string|number} endTime \n */\n\n PMchapter(id, startTime, endTime) {\n\n\n\n // update loop, turn it off and gui switch\n window[\"PMinstance_\" + id].loop.off = true;\n\n\n document.querySelector(\"#\" + id + \"_onOff > input\").checked = false;\n\n\n\n let st = this.helpers.secondsNumber(startTime);\n\n\n let et = this.helpers.secondsNumber(endTime);\n\n\n // update the instance chapter\n window[\"PMinstance_\" + id].chapter.off = false;\n\n\n window[\"PMinstance_\" + id].chapter.startTimeSeconds = st;\n\n\n window[\"PMinstance_\" + id].chapter.endTimeSeconds = et;\n\n\n // update UI\n\n document.querySelector(\"#\" + id + \"_timeStart\").value = this.helpers.toStringTime(st);\n\n\n document.querySelector(\"#\" + id + \"_timeEnd\").value = this.helpers.toStringTime(et);\n\n\n // must play bfore setting current time !!\n window[\"PMinstance_\" + id].plyrInstance.play();\n\n\n window[\"PMinstance_\" + id].plyrInstance.currentTime = st;\n\n }\n\n\n\n /**\n * adds an ID to PM class element, if id is not there.\n */\n\n checkIds() {\n\n // tidy up of video divs and container divs for user\n Array.from(this.pmClassElements).forEach(function (item) {\n\n // IDs: for each of the pm class videos, check for id and add if not present\n\n // generate 'random' name for .pm elements without ids\n const genRanHex = size => [...Array(size)].map(() => Math.floor(Math.random() * 16).toString(16)).join('');\n\n // check each for an id if element doesn't have an id then add a hex id\n item.id ? item.id : item.id = \"pm\" + genRanHex(3);\n\n });\n\n }\n\n \n\n /**\n * places help modal on page and it's button listeners\n */\n\n placeInfoModal() {\n\n // Modal pauses and plays video\n // reference to video is a global called window.PMvideoToPauseModal \n\n // modal div\n\n var divModal = document.createElement(\"div\");\n divModal.id = \"myModal\";\n divModal.classList.add(\"modal\");\n\n\n // modal test content => put photo on js cdn!\n\n\n // Modal Content\n divModal.innerHTML = `<div class=\"modal-content\" style= \"max-width: 700px;\">\n <span id=\"closeModal\" class=\"close\">&times;</span>\n <div style=\"float: left;\"> &#9612; &#9612; Video Paused</div> <br><br>\n <h2>PractiseMaster&trade; Looper</h2>\n <div>Allows you to continuously repeat any section of lesson material.\n <br>\n <br>\n <div> To set your own loops:</div>\n <ol><li>Hit the play button </li><li> Set start time on the left time field, set the end time on the right field </li><li>Turn on PractiseMaster using switch in the lower right corner.</li></div>\n <br>\n <div>Time is displayed \"minutes: seconds. fraction of second\".</div>\n <br><br>\n <div> Or use the pre-set loops if given on the lesson, below the video.\n <br>\n <div id=\"howTo\"></div>\n <br>\n <br>\n <!-- <div id=\"yellow\">Yellow Warning! Start Time > End Time</div>\n <br> \n <br> -->\n <div id=\"red\">The PractiseMaster won't function and will turn red when the start time is later than the end time.</div>\n \n <br><br>\n <div id=\"modalFinePrint\"><a href=\"http://practisemaster.com\" target=\"_blank\">Practice Master</a> is developed by Learnsense LTD.</div>`;\n\n\n var divModalContent = document.createElement(\"p\");\n\n divModalContent.id = \"modalContent\";\n\n divModalContent.innerHTML = '<p>';\n\n\n divModal.appendChild(divModalContent);\n\n\n document.querySelector(\"body\").appendChild(divModal);\n\n\n // Modal Image Help\n\n const helpImage = new Image();\n helpImage.src = _help1_0digit7_png__WEBPACK_IMPORTED_MODULE_0__;\n helpImage.style.width = \"100%\";\n\n document.querySelector(\"#howTo\").appendChild(helpImage);\n\n\n\n\n // Modal Image Red Warning\n\n const redImage = new Image();\n redImage.src = _red_png__WEBPACK_IMPORTED_MODULE_1__;\n redImage.style.width = \"100%\";\n\n document.querySelector(\"#red\").appendChild(redImage);\n\n\n console.log(\"modal should be on dom!\");\n\n }\n\n\n\n /**\n * modal close event listener\n * @listens document click\n */\n\n pageEventsModal() {\n\n // modal close event on 'document' because of injected element\n\n document.addEventListener('click', function (e) {\n\n if (e.target && e.target.id === 'closeModal') {\n\n console.log('time to close modal');\n\n document.querySelector(\"#myModal\").style.display = \"none\";\n\n // Jason says not to play video after modal close\n // window.PMvideoToPauseModal.play();\n }\n\n });\n\n\n //add event listener: click outside modal, close modal\n\n window.onclick = function (event) {\n\n if (event.target.id === 'myModal') {\n document.querySelector(\"#myModal\").style.display = \"none\";\n\n // Jason says not to play video after modal close\n // window.PMvideoToPauseModal.play();\n }\n\n }\n\n document.addEventListener('click', function (e) {\n\n if (e.target && e.target.classList.contains('infoButton')) {\n // pause video play\n\n // global so that it can be called without an id when closing modal\n window.PMvideoToPauseModal = window[\"PMinstance_\" + e.target.id.split(\"_\")[0]].plyrInstance;\n // pause video when modal opens\n window.PMvideoToPauseModal.pause();\n\n document.querySelector(\"#myModal\").style.display = \"block\";\n\n }\n\n });\n\n }\n\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PageSupport);\n\n//# sourceURL=webpack://practisemaster/./src/modules/pageSupport-pm.js?");
183
183
 
184
184
  /***/ }),
185
185
 
@@ -190,7 +190,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
190
190
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
191
191
 
192
192
  "use strict";
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 // this.addMobileListeners();\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 console.log('dispatching pmControlsReady event: ' + id);\n\n window.dispatchEvent(new CustomEvent('pmControlsReady', { detail: id }));\n\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 // window['PMinstance_Hplayer']\n\n\n const currentTime = window[\"PMinstance_\" + id].plyrInstance.currentTime;\n window[\"PMinstance_\" + 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[\"PMinstance_\" + id].loop.startTimeSeconds / 10000 - 0.25 > 0 ? window[\"PMinstance_\" + id].loop.startTimeSeconds / 10000 - 0.25 : 0;\n\n window[\"PMinstance_\" + id].loop.startTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window[\"PMinstance_\" + id].plyrInstance.pause();\n\n window[\"PMinstance_\" + 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[\"PMinstance_\" + id].loop.startTimeSeconds / 10000 + 0.25;\n\n\n window[\"PMinstance_\" + id].loop.startTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window[\"PMinstance_\" + id].plyrInstance.pause();\n\n window[\"PMinstance_\" + 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[\"PMinstance_\" + id].loop.startTimeSeconds = window.PMpageSupport.helpers.secondsNumber(startTimeString);\n\n\n window[\"PMinstance_\" + 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[\"PMinstance_\" + id].plyrInstance.currentTime;\n\n\n window[\"PMinstance_\" + 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[\"PMinstance_\" + id].loop.endTimeSeconds / 10000 - 0.25 > 0 ? window[\"PMinstance_\" + id].loop.endTimeSeconds / 10000 - 0.25 : 0;\n\n window[\"PMinstance_\" + id].loop.endTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window[\"PMinstance_\" + id].plyrInstance.pause();\n\n window[\"PMinstance_\" + 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[\"PMinstance_\" + id].loop.endTimeSeconds / 10000 + 0.25;\n\n\n window[\"PMinstance_\" + id].loop.endTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window[\"PMinstance_\" + id].plyrInstance.pause();\n\n\n window[\"PMinstance_\" + 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[\"PMinstance_\" + id].loop.endTimeSeconds = window.PMpageSupport.helpers.secondsNumber(endTimeString);\n\n\n window[\"PMinstance_\" + 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[\"PMinstance_\" + 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[\"PMinstance_\" + 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[\"PMinstance_\" + id].plyrInstance.play();\n }\n\n }\n }\n\n\n\n /**\n * event listener for loopbuilder links button\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[\"PMinstance_\" + 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! id: \" + id);\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 video says it's ready! id: \" + id);\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('html video duration all done!');\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 });\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 received outside if, process(detail): ' + e.detail);\n\n\n if (e.detail === player.id) {\n\n\n console.log('custom event received INSIDE , process(detail): ' + e.detail);\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\n // detect mobile devices and add callback to new fullScreen event\n // player.addMobileListeners(e.detail);\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 \n\n player.updateFSmobile(e.detail);\n\n }\n\n },\n\n false);\n\n }\n\n updateFSmobile(id) {\n\n if (window.PMpageSupport.isMobile && !this.plyrInstance.isAudio) {\n\n\n console.log('mobile fullscreen for :' + id);\n\n\n var contr = document.querySelector('#' + id + ' > div.plyr__controls');\n\n Array.from(contr.children).filter(function (child) {\n return !(child.dataset.plyr === \"fullscreen\")\n }).forEach(function (child) {\n\n\n if (child.style.display === 'none') {\n\n child.style.display = 'block';\n\n } else {\n\n child.style.display = \"none\";\n }\n\n });\n\n\n // then add full screen button listener to click that toggles visibility of the buttons\n // for displaying buttons for full screen display (and removing for small screen) \n\n var fullScreenButton = document.querySelector('#' + id).querySelector(\"[data-plyr='fullscreen']\");\n\n\n fullScreenButton.addEventListener('click', () => {\n\n\n\n Array.from(fullScreenButton.parentElement.children).filter(function (child) {\n return !(child.dataset.plyr === \"fullscreen\")\n }).forEach(function (child) {\n\n var closeChild = child;\n\n if (closeChild.style.display === 'none') {\n\n closeChild.style.display = 'block';\n\n } else {\n\n closeChild.style.display = \"none\";\n }\n\n });\n\n });\n\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 // this.addMobileListeners();\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 console.log('dispatching pmControlsReady event: ' + id);\n\n window.dispatchEvent(new CustomEvent('pmControlsReady', { detail: id }));\n\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 (on the <pm-linkediter>)\n // difficult to refactor but could \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 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[\"PMinstance_\" + id].plyrInstance.currentTime;\n window[\"PMinstance_\" + id].loop.startTimeSeconds = currentTime;\n\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 * 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[\"PMinstance_\" + id].loop.startTimeSeconds / 10000 - 0.25 > 0 ? window[\"PMinstance_\" + id].loop.startTimeSeconds / 10000 - 0.25 : 0;\n\n window[\"PMinstance_\" + id].loop.startTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window[\"PMinstance_\" + id].plyrInstance.pause();\n\n window[\"PMinstance_\" + 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[\"PMinstance_\" + id].loop.startTimeSeconds / 10000 + 0.25;\n\n\n window[\"PMinstance_\" + id].loop.startTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window[\"PMinstance_\" + id].plyrInstance.pause();\n\n window[\"PMinstance_\" + 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[\"PMinstance_\" + id].loop.startTimeSeconds = window.PMpageSupport.helpers.secondsNumber(startTimeString);\n\n\n window[\"PMinstance_\" + 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[\"PMinstance_\" + id].plyrInstance.currentTime;\n\n\n window[\"PMinstance_\" + 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 * 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[\"PMinstance_\" + id].loop.endTimeSeconds / 10000 - 0.25 > 0 ? window[\"PMinstance_\" + id].loop.endTimeSeconds / 10000 - 0.25 : 0;\n\n window[\"PMinstance_\" + id].loop.endTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window[\"PMinstance_\" + id].plyrInstance.pause();\n\n window[\"PMinstance_\" + 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[\"PMinstance_\" + id].loop.endTimeSeconds / 10000 + 0.25;\n\n\n window[\"PMinstance_\" + id].loop.endTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window[\"PMinstance_\" + id].plyrInstance.pause();\n\n\n window[\"PMinstance_\" + 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[\"PMinstance_\" + id].loop.endTimeSeconds = window.PMpageSupport.helpers.secondsNumber(endTimeString);\n\n\n window[\"PMinstance_\" + 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[\"PMinstance_\" + 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[\"PMinstance_\" + 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[\"PMinstance_\" + id].plyrInstance.play();\n }\n\n }\n }\n\n\n\n /**\n * event listener for loopbuilder links button\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[\"PMinstance_\" + 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! id: \" + id);\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 // 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 video says it's ready! id: \" + id);\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('html video duration all done!');\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 });\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 received outside if, process(detail): ' + e.detail);\n\n\n if (e.detail === player.id) {\n\n\n console.log('custom event received INSIDE , process(detail): ' + e.detail);\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\n // detect mobile devices and add callback to new fullScreen event\n // player.addMobileListeners(e.detail);\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 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 console.log('plyr duration at PM ready: ' + player.plyrInstance.duration);\n \n\n player.updateFSmobile(e.detail);\n\n }\n\n },\n\n false);\n\n }\n\n updateFSmobile(id) {\n\n if (window.PMpageSupport.isMobile && !this.plyrInstance.isAudio) {\n\n\n console.log('mobile fullscreen for :' + id);\n\n\n var contr = document.querySelector('#' + id + ' > div.plyr__controls');\n\n Array.from(contr.children).filter(function (child) {\n return !(child.dataset.plyr === \"fullscreen\")\n }).forEach(function (child) {\n\n\n if (child.style.display === 'none') {\n\n child.style.display = 'block';\n\n } else {\n\n child.style.display = \"none\";\n }\n\n });\n\n\n // then add full screen button listener to click that toggles visibility of the buttons\n // for displaying buttons for full screen display (and removing for small screen) \n\n var fullScreenButton = document.querySelector('#' + id).querySelector(\"[data-plyr='fullscreen']\");\n\n\n fullScreenButton.addEventListener('click', () => {\n\n\n\n Array.from(fullScreenButton.parentElement.children).filter(function (child) {\n return !(child.dataset.plyr === \"fullscreen\")\n }).forEach(function (child) {\n\n var closeChild = child;\n\n if (closeChild.style.display === 'none') {\n\n closeChild.style.display = 'block';\n\n } else {\n\n closeChild.style.display = \"none\";\n }\n\n });\n\n });\n\n }\n }\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Player);\n\n//# sourceURL=webpack://practisemaster/./src/modules/player-pm.js?");
194
194
 
195
195
  /***/ }),
196
196
 
@@ -201,7 +201,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
201
201
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
202
202
 
203
203
  "use strict";
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/* harmony import */ var _pageSupport_pm__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./pageSupport-pm */ \"./src/modules/pageSupport-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/**\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(pmWC) {\n\n this.version = '1.0.39';\n\n // the div, audio or video container inside <practise-master> is used\n // to new up Plyr\n\n this.pmElement = pmWC.querySelector('*.pm');\n\n this.PMchapter;\n\n this.PMloop;\n\n this.player(this.pmElement);\n\n\n }\n\n\n\n /**\n * news-up a Player class for each of [PMelements]\n * @method\n */\n\n player(el) {\n\n console.log(\"+\" + this.pmElement.id + \" 'pm' video or audio players created\");\n\n \n new _player_pm__WEBPACK_IMPORTED_MODULE_0__[\"default\"](el);\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/* harmony import */ var _pageSupport_pm__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./pageSupport-pm */ \"./src/modules/pageSupport-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/**\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(pmWC) {\n\n this.version = '1.0.39';\n\n // the div, audio or video container inside <practise-master> is used\n // to new up Plyr\n\n this.pmElement = pmWC.querySelector('*.pm');\n\n this.PMchapter;\n\n this.PMloop;\n\n this.player(this.pmElement);\n\n }\n\n\n\n /**\n * news-up a Player class for each of [PMelements]\n * @method\n */\n\n player(el) {\n\n console.log(\"+\" + this.pmElement.id + \" 'pm' video or audio players created\");\n\n \n new _player_pm__WEBPACK_IMPORTED_MODULE_0__[\"default\"](el);\n }\n\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PractiseMaster);\n\n//# sourceURL=webpack://practisemaster/./src/modules/practiseMaster.js?");
205
205
 
206
206
  /***/ }),
207
207
 
@@ -223,7 +223,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
223
223
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
224
224
 
225
225
  "use strict";
226
- 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 ua_parser_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ua-parser-js */ \"./node_modules/ua-parser-js/src/ua-parser.js\");\n/* harmony import */ var ua_parser_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(ua_parser_js__WEBPACK_IMPORTED_MODULE_0__);\n\n\nclass UserRequest {\n\n constructor (){\n\n this.uaparser = new (ua_parser_js__WEBPACK_IMPORTED_MODULE_0___default())();\n\n this.browserDetected = this.uaparser.getBrowser().name;\n\n this.mobileDetected = this.uaparser.getDevice().type === 'mobile';\n\n console.log('Browser detected:' + this.browserDetected);\n\n }\n\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (UserRequest);\n\n//# sourceURL=webpack://practisemaster/./src/modules/userRequest-pm.js?");
226
+ 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 ua_parser_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ua-parser-js */ \"./node_modules/ua-parser-js/src/ua-parser.js\");\n/* harmony import */ var ua_parser_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(ua_parser_js__WEBPACK_IMPORTED_MODULE_0__);\n\n\nclass UserRequest {\n\n constructor (){\n\n\n this.uaparser = new (ua_parser_js__WEBPACK_IMPORTED_MODULE_0___default())();\n\n this.browserDetected = this.uaparser.getBrowser().name;\n\n this.mobileDetected = this.uaparser.getDevice().type === 'mobile';\n\n console.log('Browser detected:' + this.browserDetected);\n\n\n }\n\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (UserRequest);\n\n//# sourceURL=webpack://practisemaster/./src/modules/userRequest-pm.js?");
227
227
 
228
228
  /***/ }),
229
229
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "practisemaster",
3
- "version": "1.0.40",
3
+ "version": "1.0.42",
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",