practisemaster 1.1.14 → 1.1.15

package/README.md

@@ -61,15 +61,16 @@ flowchart TD
 title: Class Diagram (CD) PractiseMaster
 ---
 classDiagram
+note "define element for PractiseMasterWebComp <- PM.js "
 LoopEditorWebComp"1"..|>"*"DocumentObject: Realisation PM.js
 PractiseMasterWebComp"1"..|>"*"DocumentObject
 LoopEditorWebComp<|--PractiseMasterWebComp: Inheritance
 PractiseMasterWebComp <|-- HTMLElement
-PractiseMasterWebComp*--PageSupport
 PractiseMasterWebComp*--PractiseMaster: Composition
 PageSupport*--HostSite
 PageSupport*--Helpers
 PageSupport*--UserRequest
+PractiseMasterWebComp"1"*--"1"PageSupport
 PractiseMaster"1"*--"*"Player
 Player*--Plyr
 Player*--Loop
@@ -114,6 +115,7 @@ class Helpers{
     +secondsNumber(param)
     +hmsuToSecondsOnly(str)
     +redWarningValidation(id)
+    +getPMid(childElement)
 
 }
 class Player{

package/dist/PMbundle.js

@@ -179,7 +179,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* 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?");
+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.replace('_info', '')].plyrInstance;\n               \n               \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?");
 
 /***/ }),
 
@@ -190,7 +190,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* 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 with guards\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       \n\n        console.log('endtime: ' + window[\"PMinstance_\" + id].loop.endTimeSeconds);\n\n        console.log('minused endtime: ' + (window[\"PMinstance_\" + id].loop.endTimeSeconds - 7500 ));\n\n        console.log(' desired currentTime: ' + ((window[\"PMinstance_\" + id].loop.endTimeSeconds - 7500) / 10000));\n\n\n\n\n        // video 'scrub'\n\n        window[\"PMinstance_\" + id].plyrInstance.currentTime = ((window[\"PMinstance_\" + id].loop.endTimeSeconds - 7500) / 10000);\n\n\n        // update UI\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        window[\"PMinstance_\" + id].loop.startTimeSeconds = inputTimeFloat;\n\n\n        // video scrub\n\n        window[\"PMinstance_\" + id].plyrInstance.currentTime = ((window[\"PMinstance_\" + id].loop.endTimeSeconds - 7500) / 10000);\n\n       // update UI\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.currentTime = ((window[\"PMinstance_\" + id].loop.endTimeSeconds - 7500) / 10000);\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 {e} e unused\n     */\n\n    addTimeEnd(e) {\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.currentTime = ((window[\"PMinstance_\" + id].loop.endTimeSeconds - 7500) / 10000);\n\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?");
+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/* harmony import */ var _pageSupport_pm__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./pageSupport-pm */ \"./src/modules/pageSupport-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/**\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 with guards\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\n\n        console.log('endtime: ' + window[\"PMinstance_\" + id].loop.endTimeSeconds);\n\n        console.log('minused endtime: ' + (window[\"PMinstance_\" + id].loop.endTimeSeconds - 7500));\n\n        console.log(' desired currentTime: ' + ((window[\"PMinstance_\" + id].loop.endTimeSeconds - 7500) / 10000));\n\n\n\n\n        // video 'scrub'\n\n        window[\"PMinstance_\" + id].plyrInstance.currentTime = ((window[\"PMinstance_\" + id].loop.endTimeSeconds - 7500) / 10000);\n\n\n        // update UI\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        window[\"PMinstance_\" + id].loop.startTimeSeconds = inputTimeFloat;\n\n\n        // video scrub\n\n        window[\"PMinstance_\" + id].plyrInstance.currentTime = ((window[\"PMinstance_\" + id].loop.endTimeSeconds - 7500) / 10000);\n\n        // update UI\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.currentTime = ((window[\"PMinstance_\" + id].loop.endTimeSeconds - 7500) / 10000);\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 {e} e unused\n     */\n\n    addTimeEnd(e) {\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.currentTime = ((window[\"PMinstance_\" + id].loop.endTimeSeconds - 7500) / 10000);\n\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?");
 
 /***/ }),
 
@@ -201,7 +201,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* 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.1.1';\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?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _player_pm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./player-pm */ \"./src/modules/player-pm.js\");\n/**\n * module allows for the newing of a PractiseMaster class \n * a global window.PractiseMaster is created\n * \n * @module PractiseMaster Module\n * @requires Player Module\n * @requires PageSupport Module\n */\n\n\n\n\n\n\n/**\n * entry point for PractiseMaster js plugin: new PractiseMaster();\n * @class PractiseMaster\n * @property {mehtod} globals() - returns window.PractiseMaster\n * @property {method} player() - news up a Player class for each pm class element\n * @property {declaration} getElementsByClassName(\"pm\") -  Elements to update with a player \n * @property {declaration} getElementsByClassName(\"pmlinkbuilder\") -  Elements to update with a player \n * @property {class} PageSupport(siteCSS) - news this up with any site specific css\n * @property {object} siteCSS - an object for css specific to the host site (ex WordPress)\n * @property {string} version - semver for PractiseMaster\n */\n\nclass PractiseMaster {\n\n    constructor(pmWC) {\n\n        this.version = '1.1.1';\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?");
 
 /***/ }),
 

package/package.json

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