practisemaster 1.0.26 → 1.0.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/PMbundle.js +5 -5
- package/package.json +1 -1
package/dist/PMbundle.js
CHANGED
|
@@ -102,7 +102,7 @@ eval("var __WEBPACK_AMD_DEFINE_RESULT__;////////////////////////////////////////
|
|
|
102
102
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
103
103
|
|
|
104
104
|
"use strict";
|
|
105
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _modules_practisemasterWebComponent__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./modules/practisemasterWebComponent */ \"./src/modules/practisemasterWebComponent.js\");\n/* harmony import */ var _modules_linkEditorWebComponent__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modules/linkEditorWebComponent */ \"./src/modules/linkEditorWebComponent.js\");\n
|
|
105
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _modules_practisemasterWebComponent__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./modules/practisemasterWebComponent */ \"./src/modules/practisemasterWebComponent.js\");\n/* harmony import */ var _modules_linkEditorWebComponent__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modules/linkEditorWebComponent */ \"./src/modules/linkEditorWebComponent.js\");\n// __ __ ___ ___ __ ___ __ ___ \n// /\\ |__) / ` |__| | | |__ / ` | | | |__) |__ \n// /~~\\ | \\ \\__, | | | | |___ \\__, | \\__/ | \\ |___ \n// \n// \n// read https://github.com/StephanLuis/PractiseMaster/blob/1.0Architecture/src/README.md\n\n\n\n\n\n\n/**\n * this kicks off the webcomponents (entry point)\n */\n\ncustomElements.define(\"practise-master\", _modules_practisemasterWebComponent__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n \n\n\n// export default customElements.define('PM-LinkEditer', PMLinkEditerWebComp);\n\ncustomElements.define('pm-linkediter', _modules_linkEditorWebComponent__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n\n\n\n\n\n// question remains of how to pass css into PM? A: use pagesupport above!\n\n// window.PractiseMaster = new PractiseMaster();\n\n\nwindow.PractiseMaster.Loop = (x, y, z) => { return window.PMpageSupport.PMloop(x, y, z);};\n\n\nwindow.PractiseMaster.Chapter = (x, y, z) => { return window.PMpageSupport.PMchapter(x, y, z);};\n\n\n// would like a delete here will have to use await or listen for a final listener\n// window.addEventListener('pmControlsReady', function (e) {\n// delete window.PMpageSupport;\n// });\n\n// trigger build comment (can remove)\n\n\n//# sourceURL=webpack://practisemaster/./src/PM.js?");
|
|
106
106
|
|
|
107
107
|
/***/ }),
|
|
108
108
|
|
|
@@ -113,7 +113,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _mod
|
|
|
113
113
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
114
114
|
|
|
115
115
|
"use strict";
|
|
116
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var input_duration__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! input-duration */ \"./node_modules/input-duration/index.js\");\n/**\n * module provides UIprep class\n * @module UIprep Module\n * @requires InputDuration Module\n */\n\n// chronly self boots / news it self up so here the import is needed but the module is show as not used\n// import ChronlyHMS from 'chronlyhms';\n// import 'chronlyhms/src/chrono.css';\n\n\n\n\n\n\n/**\n * class is for assets that appear once on each page, independant from the number of videos\n * @class UIprep\n * @property {number} id player/plyr/div id\n * @property {boolean} isOnScreen ex. always yes, Safari\n */\n\nclass UIprep {\n\n /**\n * class construlctor\n * @param {element} el PM element\n */\n\n constructor(el) {\n\n this.id = el.id;\n\n this.isOnScreen;\n\n if (window.PMpageSupport.isSafari) {\n this.isOnScreen = false;\n }\n\n }\n\n // Class methods\n\n addAudioStyle(id) {\n\n // this is the same as off player control so may be good to refactor and keep the \n // two together\n\n\n // update control div with buttons\n\n var controls = document.querySelector('#' + id + ' > div.plyr__controls');\n\n // var did = document.querySelectorAll('#' + id + ' input-duration');\n\n // did.forEach(x => x.shadowRoot.querySelectorAll(\".ts_digit\").forEach(x => { x.style.background = \"#BFBFBF\"; }))\n\n controls.style.position = 'inherit';\n\n controls.style.paddingTop = '5px';\n\n controls.style.paddingBottom = '5px';\n\n controls.style.background = '#BFBFBF';\n\n\n document.querySelectorAll('#' + id + ' input-duration').forEach(x => {\n\n x.shadowRoot.querySelectorAll(\".ts_digit\").forEach(x => { x.style.color = \"#ebebeb\"; x.style.fontSize = \" initial\"; });\n\n });\n\n // update player container\n\n document.querySelector('#' + id).style.background = '#BFBFBF';\n\n document.querySelector('#' + id).style.borderRadius = '5px';\n\n // end of duplicate code\n\n var controlsRest = document.querySelector('.plyr--audio .plyr__controls');\n\n controlsRest.style.color = 'white';\n\n\n }\n\n /**\n * sets up loop builder links\n */\n\n addHTMLlink() {\n\n\n // method call\n // window.PMpageSupport.PMloop('HplayerLinks', 5, 6)\n\n var startTime = document.querySelector('#' + this.id + '_timeStart').value.substring(3)\n var endTime = document.querySelector('#' + this.id + '_timeEnd').value.substring(3)\n\n\n var loopLinkLiteral = `\n <br>\n <a href=\"#${this.id}\" onclick=\"window.PMpageSupport.PMloop(\\'${this.id}\\', \\'${startTime}\\', \\'${endTime}\\')\">Loop from ${startTime} to ${endTime}</a>\n <input id='${this.id}_loopbox' type=\"text\" value=\"<a href='#${this.id}' onclick='window.PMpageSupport.PMloop("${this.id}", "${startTime}", "${endTime}")'>Loop from ${startTime} to ${endTime}</a>\" style=\"width: -webkit-fill-available;\" disabled>\n <input type=\"button\" value=\"Copy Link\" onclick= \"navigator.clipboard.writeText(this.previousElementSibling.value)\">\n </div>\n <br>\n `\n\n\n\n var chapterLinkLiteral = `\n <br>\n <a href=\"#${this.id}\" onclick=\"window.PMpageSupport.PMchapter(\\'${this.id}\\', \\'${startTime}\\', \\'${endTime}\\')\">Chapter from ${startTime} to ${endTime}</a>\n <input type=\"text\" value=\"<a href='#${this.id}' onclick='window.PMpageSupport.PMchapter("${this.id}", "${startTime}", "${endTime}")'>Chapter from ${startTime} to ${endTime}</a>\" style=\"width: -webkit-fill-available;\" disabled>\n <input type=\"button\" value=\"Copy Link\" onclick= \"navigator.clipboard.writeText(this.previousElementSibling.value)\">\n </div>\n <br>\n `\n\n\n // get player div, add new div as sibling\n\n var broOfLinks = document.querySelector('#' + this.id);\n\n broOfLinks.insertAdjacentHTML('afterend', `<div id='linksShadow'> </div>`);\n\n var broOfLinksShad = document.querySelector('#linksShadow');\n\n\n\n var chosenLiteral = window[\"PMinstance_\" + this.id].loop.off ? chapterLinkLiteral : loopLinkLiteral;\n\n const element = (tag, props) => Object.assign(document.createElement(tag), props);\n\n broOfLinksShad.attachShadow({ mode: 'open' }) // sets and returns this.shadowRoot\n .append(\n element(\"DIV\", {\n innerHTML: chosenLiteral,\n id: this.id\n }),\n element(\"STYLE\", {\n innerHTML : `input,\n textarea,\n select {\n all: revert;\n }`\n })\n );\n\n\n\n\n document.querySelector('#linksShadow').scrollIntoView();\n\n }\n\n\n\n /**\n * sets up chapter builder button and links\n */\n\n addHTMLchapter(start, end) {\n\n alert('The Loop is <a> start: ' + start + ' and end :' + end);\n }\n\n\n\n /**\n * disables ChronlyHMS inputs (for end user)\n */\n\n diableDurationInputs(id) {\n\n\n\n var did = document.querySelectorAll('#' + id + ' input-duration');\n\n did.forEach(one => one.disable());\n\n did.forEach(x => x.shadowRoot.querySelectorAll(\".ts_digit\").forEach(x => { x.style.color = \"lightgray\"; x.style.background = \"none\"; x.style.border = \"none\" }))\n\n }\n\n\n\n /**\n * sets up loop builder button\n * @param {string} id player/plyr/div id\n */\n\n addLinkButton(id) {\n\n var linkButtonLiteral = `\n \n \n <button id=\"${id}_links\" class=\"plyr__controls__item plyr__control\" type=\"button\" style=\"padding-top: 3px; padding-bottom: 6px;\">\n <svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fak\" data-icon=\"light-link-circle-arrow-down\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 610 510\" class=\"uploaded-icon-preview svg-inline--fa fa-light-link-circle-arrow-down\" style=\"width: 31px;height: 22px;\"><path fill=\"currentColor\" d=\"M173 131.4c49.1-49.9 130.9-49.9 180.8 0c26.2 26.2 38.5 61 37 95.5c-28 20.9-49.6 50-61.2 83.7c-4.2-5.8-4-14 .9-19.8c1.8-2.1 3.6-4.1 5.4-6.2c32.9-38 30.9-95-4.7-130.5c-37.4-37.5-98.1-37.5-135.5 0c-41.5 41.5-83.1 83-124.6 124.5c-37.5 37.5-37.5 98.3 0 135.8c37.5 37.5 98.3 37.5 135.8 0c7.5-7.5 15.1-15.1 22.6-22.6c6.2-6.3 16.4-6.3 22.6 0c6.3 6.2 6.3 16.3 0 22.6c-7.5 7.5-15.1 15.1-22.6 22.6c-50 50-131 50-181 0s-50-131.9 0-181c41.5-41.5 83-83.1 124.5-124.6zM286.2 380.6c-47.5-47.5-50.2-123.5-7.1-174.2c2.1-2 4.1-4.1 6.2-6.1c5.8-6.7 15.9-7.4 22.6-1.6c6.6 5.7 7.4 15.8 1.6 22.5c-1.8 2.1-3.6 4.1-5.4 6.2c-32.9 38-30.9 95 4.7 130.5c3.5 3.5 7.3 6.8 11.2 9.6c0 .2 0 .3 0 .5c0 13.4 1.5 26.4 4.3 38.9c-13.8-6.2-26.8-15-38.1-26.3zm282.7-283c-37.5-37.5-98.3-37.5-135.8 0c-7.5 7.5-15.1 15.1-22.6 22.6c-6.2 6.3-16.4 6.3-22.6 0c-6.3-7.1-6.3-16.3 0-22.6c7.5-7.5 15.1-15.1 22.6-22.6c50-50 131-50 181 0c43.2 42.4 49.1 109.2 17.7 158.3c-8.1-6.8-16.8-12.9-26-18.1c22.3-36.9 17.6-85.7-14.3-117.5zM496 480c40 0 77-21.3 97-56s20-77.3 0-112s-57-56-97-56s-77 21.3-97 56s-20 77.3 0 112s57 56 97 56zm0-256c51.4 0 99 27.4 124.7 72s25.7 99.4 0 144S547.4 512 496 512s-99-27.4-124.7-72s-25.7-99.4 0-144s73.3-72 124.7-72zm67.3 163.3l-56 56c-6.2 6.3-16.4 6.3-22.6 0c-18.7-18.7-37.3-37.3-56-56c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0c9.6 9.6 19.1 19.1 28.7 28.7c0-29.8 0-59.6 0-89.4c0-8.8 7.2-16 16-16s16 7.2 16 16c0 29.8 0 59.6 0 89.4c9.6-9.6 19.1-19.1 28.7-28.7c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z\" class=\"\"></path></svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <div style=\"flex-grow: 1;\"></div>\n `\n\n // append lbl\n\n document.querySelector(\"#\" + id + \" > div.plyr__controls\").insertAdjacentHTML('beforeend', linkButtonLiteral);\n }\n\n\n\n /**\n * adds chronlyHMS to page and styles\n * @param {string} id player/plyr/div id\n */\n\n styleInputDuration(id) {\n\n // general style for 'active' time selector\n\n document.querySelectorAll('#' + id + ' input-duration').forEach(x => {\n\n // removes hours from input duration\n\n x.noHours();\n\n // style timecase\n\n x.shadowRoot.querySelector('.timeCase').style.maxWidth = 'none' // style max width of total control\n x.shadowRoot.querySelector('.timeCase').style.width = \"130px\";\n\n\n\n // style width of inputs\n\n x.shadowRoot.querySelectorAll(\"input.ts_digit\").forEach(y => y.style.width = \"25px\");\n\n x.shadowRoot.querySelectorAll(\"input.sMS.ts_digit\").forEach(y => y.style.width = \"35px\");\n\n\n // style svg\n\n // x.shadowRoot.querySelector(\"#svgContainer\").style.padding = '5px';\n\n x.shadowRoot.querySelector(\"#svgContainer\").style.color = 'white';\n\n });\n\n }\n\n\n\n /**\n * currently unused\n */\n\n applyPlyrReadyCssHTMLSettings() {\n\n // change plyr to static if neccessary \n // early host specific css\n\n }\n\n\n\n /**\n * The player's id for CSS update\n * @param {string} id playerID\n */\n\n applyPMReadyCssHTMLSettings(id) {\n\n\n // PM Controls Style\n\n\n // should this be id based, incase user page has time input on it?\n\n // Array.from(document.querySelectorAll(\"input[type=time]\")).forEach(element => {\n // element.disabled = true;\n\n // element.type = \"text\";\n\n // element.style.minWidth = \"70px\";\n // element.style.maxWidth = \"80px\";\n\n // element.value = \"00:00.00\";\n\n // });\n\n\n // turn off the practise master logo\n\n console.log('UI prep is for: ' + id);\n\n Array.from(document.querySelectorAll(\".PMlogo\")).forEach(element => {\n element.style.display = \"none\";\n });\n\n\n // document.querySelector(\"#\" + id + \" div.plyr__controls\").style.flexWrap = \"wrap\";\n \n \n // I think this is the play button display\n // document.querySelector(\"#\" + id + \" div.plyr__controls > button:nth-child(5)\").style.display = \"none\";\n\n\n // late host site specific css \n\n // quick test mode\n\n\n // debug 10 Oct 2022 style at bottom of PM\n // this.hostSite.formatIndependantCSS(id);\n\n // this.hostSite.cssForFiddleHedVimeo(id);\n\n }\n\n\n\n /**\n * @param {object} player \n */\n\n setOffPlayerControls(player) {\n\n if (player.CSSclasses.includes('offScreen') || window.PMpageSupport.isSafari) {\n\n this.offPlayerControls(player.id);\n }\n\n }\n\n\n\n /**\n * see setOffPlayerControls()\n * @param {string} id player/plyr/div id\n */\n\n offPlayerControls(id) {\n\n\n // update control div with buttons\n\n var controls = document.querySelector('#' + id + ' > div.plyr__controls');\n\n controls.style.position = 'inherit';\n\n controls.style.paddingTop = '5px';\n\n controls.style.paddingBottom = '5px';\n\n controls.style.background = '#BFBFBF';\n\n\n // update player container\n\n document.querySelector('#' + id).style.background = '#BFBFBF';\n\n document.querySelector('#' + id).style.borderRadius = '5px';\n\n\n // place controls after wrapper\n\n var wrapper = document.querySelector('#' + id + ' > div.plyr__video-wrapper');\n\n wrapper.after(controls);\n\n }\n\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (UIprep);\n\n//# sourceURL=webpack://practisemaster/./src/modules/UIprep-pm.js?");
|
|
116
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var input_duration__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! input-duration */ \"./node_modules/input-duration/index.js\");\n/**\n * module provides UIprep class\n * @module UIprep Module\n * @requires InputDuration Module\n */\n\n// chronly self boots / news it self up so here the import is needed but the module is show as not used\n// import ChronlyHMS from 'chronlyhms';\n// import 'chronlyhms/src/chrono.css';\n\n\n\n\n\n\n/**\n * class is for assets that appear once on each page, independant from the number of videos\n * @class UIprep\n * @property {number} id player/plyr/div id\n * @property {boolean} isOnScreen ex. always yes, Safari\n */\n\nclass UIprep {\n\n /**\n * class construlctor\n * @param {element} el PM element\n */\n\n constructor(el) {\n\n this.id = el.id;\n\n this.isOnScreen;\n\n if (window.PMpageSupport.isSafari) {\n this.isOnScreen = false;\n }\n\n }\n\n // Class methods\n\n addAudioStyle(id) {\n\n // this is the same as off player control so may be good to refactor and keep the \n // two together\n\n\n // update control div with buttons\n\n var controls = document.querySelector('#' + id + ' > div.plyr__controls');\n\n // var did = document.querySelectorAll('#' + id + ' input-duration');\n\n // did.forEach(x => x.shadowRoot.querySelectorAll(\".ts_digit\").forEach(x => { x.style.background = \"#BFBFBF\"; }))\n\n controls.style.position = 'inherit';\n\n controls.style.paddingTop = '5px';\n\n controls.style.paddingBottom = '5px';\n\n controls.style.background = '#BFBFBF';\n\n\n document.querySelectorAll('#' + id + ' input-duration').forEach(x => {\n\n x.shadowRoot.querySelectorAll(\".ts_digit\").forEach(x => { x.style.color = \"#ebebeb\"; x.style.fontSize = \" initial\"; });\n\n });\n\n // update player container\n\n document.querySelector('#' + id).style.background = '#BFBFBF';\n\n document.querySelector('#' + id).style.borderRadius = '5px';\n\n // end of duplicate code\n\n var controlsRest = document.querySelector('.plyr--audio .plyr__controls');\n\n controlsRest.style.color = 'white';\n\n\n }\n\n /**\n * sets up loop builder links\n */\n\n addHTMLlink() {\n\n\n // method call\n // window.PMpageSupport.PMloop('HplayerLinks', 5, 6)\n\n var startTime = document.querySelector('#' + this.id + '_timeStart').value.substring(3)\n var endTime = document.querySelector('#' + this.id + '_timeEnd').value.substring(3)\n\n\n var loopLinkLiteral = `\n <br>\n <a href=\"#${this.id}\" onclick=\"window.PMpageSupport.PMloop(\\'${this.id}\\', \\'${startTime}\\', \\'${endTime}\\')\">Loop from ${startTime} to ${endTime}</a>\n <input id='${this.id}_loopbox' type=\"text\" value=\"<a href='#${this.id}' onclick='window.PMpageSupport.PMloop("${this.id}", "${startTime}", "${endTime}")'>Loop from ${startTime} to ${endTime}</a>\" style=\"width: -webkit-fill-available;\" disabled>\n <input type=\"button\" value=\"Copy Link\" onclick= \"navigator.clipboard.writeText(this.previousElementSibling.value)\">\n </div>\n <br>\n `\n\n\n\n var chapterLinkLiteral = `\n <br>\n <a href=\"#${this.id}\" onclick=\"window.PMpageSupport.PMchapter(\\'${this.id}\\', \\'${startTime}\\', \\'${endTime}\\')\">Chapter from ${startTime} to ${endTime}</a>\n <input type=\"text\" value=\"<a href='#${this.id}' onclick='window.PMpageSupport.PMchapter("${this.id}", "${startTime}", "${endTime}")'>Chapter from ${startTime} to ${endTime}</a>\" style=\"width: -webkit-fill-available;\" disabled>\n <input type=\"button\" value=\"Copy Link\" onclick= \"navigator.clipboard.writeText(this.previousElementSibling.value)\">\n </div>\n <br>\n `\n\n\n // get player div, add new div as sibling\n\n var broOfLinks = document.querySelector('#' + this.id);\n\n broOfLinks.insertAdjacentHTML('afterend', `<div id='linksShadow'> </div>`);\n\n var broOfLinksShad = document.querySelector('#linksShadow');\n\n\n\n var chosenLiteral = window[\"PMinstance_\" + this.id].loop.off ? chapterLinkLiteral : loopLinkLiteral;\n\n const element = (tag, props) => Object.assign(document.createElement(tag), props);\n\n broOfLinksShad.attachShadow({ mode: 'open' }) // sets and returns this.shadowRoot\n .append(\n element(\"DIV\", {\n innerHTML: chosenLiteral,\n id: this.id\n }),\n element(\"STYLE\", {\n innerHTML : `input,\n textarea,\n select {\n all: revert;\n }`\n })\n );\n\n\n\n\n document.querySelector('#linksShadow').scrollIntoView();\n\n }\n\n\n\n /**\n * sets up chapter builder button and links\n */\n\n addHTMLchapter(start, end) {\n\n alert('The Loop is <a> start: ' + start + ' and end :' + end);\n }\n\n\n\n /**\n * disables ChronlyHMS inputs (for end user)\n */\n\n diableDurationInputs(id) {\n\n\n\n var did = document.querySelectorAll('#' + id + ' input-duration');\n\n did.forEach(one => one.disable());\n\n did.forEach(x => x.shadowRoot.querySelectorAll(\".ts_digit\").forEach(x => { x.style.color = \"lightgray\"; x.style.background = \"none\"; x.style.border = \"none\" }))\n\n }\n\n\n\n /**\n * sets up loop builder button\n * @param {string} id player/plyr/div id\n */\n\n addLinkButton(id) {\n\n var linkButtonLiteral = `\n \n \n <button id=\"${id}_links\" class=\"plyr__controls__item plyr__control\" type=\"button\" style=\"padding-top: 3px; padding-bottom: 6px;\">\n <svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fak\" data-icon=\"light-link-circle-arrow-down\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 610 510\" class=\"uploaded-icon-preview svg-inline--fa fa-light-link-circle-arrow-down\" style=\"width: 31px;height: 22px;\"><path fill=\"currentColor\" d=\"M173 131.4c49.1-49.9 130.9-49.9 180.8 0c26.2 26.2 38.5 61 37 95.5c-28 20.9-49.6 50-61.2 83.7c-4.2-5.8-4-14 .9-19.8c1.8-2.1 3.6-4.1 5.4-6.2c32.9-38 30.9-95-4.7-130.5c-37.4-37.5-98.1-37.5-135.5 0c-41.5 41.5-83.1 83-124.6 124.5c-37.5 37.5-37.5 98.3 0 135.8c37.5 37.5 98.3 37.5 135.8 0c7.5-7.5 15.1-15.1 22.6-22.6c6.2-6.3 16.4-6.3 22.6 0c6.3 6.2 6.3 16.3 0 22.6c-7.5 7.5-15.1 15.1-22.6 22.6c-50 50-131 50-181 0s-50-131.9 0-181c41.5-41.5 83-83.1 124.5-124.6zM286.2 380.6c-47.5-47.5-50.2-123.5-7.1-174.2c2.1-2 4.1-4.1 6.2-6.1c5.8-6.7 15.9-7.4 22.6-1.6c6.6 5.7 7.4 15.8 1.6 22.5c-1.8 2.1-3.6 4.1-5.4 6.2c-32.9 38-30.9 95 4.7 130.5c3.5 3.5 7.3 6.8 11.2 9.6c0 .2 0 .3 0 .5c0 13.4 1.5 26.4 4.3 38.9c-13.8-6.2-26.8-15-38.1-26.3zm282.7-283c-37.5-37.5-98.3-37.5-135.8 0c-7.5 7.5-15.1 15.1-22.6 22.6c-6.2 6.3-16.4 6.3-22.6 0c-6.3-7.1-6.3-16.3 0-22.6c7.5-7.5 15.1-15.1 22.6-22.6c50-50 131-50 181 0c43.2 42.4 49.1 109.2 17.7 158.3c-8.1-6.8-16.8-12.9-26-18.1c22.3-36.9 17.6-85.7-14.3-117.5zM496 480c40 0 77-21.3 97-56s20-77.3 0-112s-57-56-97-56s-77 21.3-97 56s-20 77.3 0 112s57 56 97 56zm0-256c51.4 0 99 27.4 124.7 72s25.7 99.4 0 144S547.4 512 496 512s-99-27.4-124.7-72s-25.7-99.4 0-144s73.3-72 124.7-72zm67.3 163.3l-56 56c-6.2 6.3-16.4 6.3-22.6 0c-18.7-18.7-37.3-37.3-56-56c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0c9.6 9.6 19.1 19.1 28.7 28.7c0-29.8 0-59.6 0-89.4c0-8.8 7.2-16 16-16s16 7.2 16 16c0 29.8 0 59.6 0 89.4c9.6-9.6 19.1-19.1 28.7-28.7c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z\" class=\"\"></path></svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <div style=\"flex-grow: 1;\"></div>\n `\n\n // append lbl\n\n document.querySelector(\"#\" + id + \" > div.plyr__controls\").insertAdjacentHTML('beforeend', linkButtonLiteral);\n }\n\n\n\n /**\n * adds chronlyHMS to page and styles\n * @param {string} id player/plyr/div id\n */\n\n styleInputDuration(id) {\n\n // general style for 'active' time selector\n\n document.querySelectorAll('#' + id + ' input-duration').forEach(x => {\n\n // removes hours from input duration\n\n x.noHours();\n\n // style timecase\n\n x.shadowRoot.querySelector('.timeCase').style.maxWidth = 'none' // style max width of total control\n x.shadowRoot.querySelector('.timeCase').style.width = \"130px\";\n\n\n\n // style width of inputs\n\n x.shadowRoot.querySelectorAll(\"input.ts_digit\").forEach(y => y.style.width = \"25px\");\n\n x.shadowRoot.querySelectorAll(\"input.sMS.ts_digit\").forEach(y => y.style.width = \"35px\");\n\n\n // style svg\n\n // x.shadowRoot.querySelector(\"#svgContainer\").style.padding = '5px';\n\n x.shadowRoot.querySelector(\"#svgContainer\").style.color = 'white';\n\n });\n\n }\n\n\n\n /**\n * currently unused\n */\n\n applyPlyrReadyCssHTMLSettings() {\n\n // change plyr to static if neccessary \n // early host specific css\n\n }\n\n\n\n /**\n * The player's id for CSS update\n * @param {string} id playerID\n */\n\n applyPMReadyCssHTMLSettings(id) {\n\n\n // PM Controls Style\n\n\n // should this be id based, incase user page has time input on it?\n\n // Array.from(document.querySelectorAll(\"input[type=time]\")).forEach(element => {\n // element.disabled = true;\n\n // element.type = \"text\";\n\n // element.style.minWidth = \"70px\";\n // element.style.maxWidth = \"80px\";\n\n // element.value = \"00:00.00\";\n\n // });\n\n\n // turn off the practise master logo\n\n console.log('UI prep is for: ' + id);\n\n Array.from(document.querySelectorAll(\".PMlogo\")).forEach(element => {\n element.style.display = \"none\";\n });\n\n\n document.querySelector(\"#\" + id + \" div.plyr__controls\").style.flexWrap = \"wrap\";\n \n \n // I think this is the play button display\n // document.querySelector(\"#\" + id + \" div.plyr__controls > button:nth-child(5)\").style.display = \"none\";\n\n\n // late host site specific css \n\n // quick test mode\n\n\n // debug 10 Oct 2022 style at bottom of PM\n // this.hostSite.formatIndependantCSS(id);\n\n // this.hostSite.cssForFiddleHedVimeo(id);\n\n }\n\n\n\n /**\n * @param {object} player \n */\n\n setOffPlayerControls(player) {\n\n if (player.CSSclasses.includes('offScreen') || window.PMpageSupport.isSafari) {\n\n this.offPlayerControls(player.id);\n }\n\n }\n\n\n\n /**\n * see setOffPlayerControls()\n * @param {string} id player/plyr/div id\n */\n\n offPlayerControls(id) {\n\n\n // update control div with buttons\n\n var controls = document.querySelector('#' + id + ' > div.plyr__controls');\n\n controls.style.position = 'inherit';\n\n controls.style.paddingTop = '5px';\n\n controls.style.paddingBottom = '5px';\n\n controls.style.background = '#BFBFBF';\n\n\n // update player container\n\n document.querySelector('#' + id).style.background = '#BFBFBF';\n\n document.querySelector('#' + id).style.borderRadius = '5px';\n\n\n // place controls after wrapper\n\n var wrapper = document.querySelector('#' + id + ' > div.plyr__video-wrapper');\n\n wrapper.after(controls);\n\n }\n\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (UIprep);\n\n//# sourceURL=webpack://practisemaster/./src/modules/UIprep-pm.js?");
|
|
117
117
|
|
|
118
118
|
/***/ }),
|
|
119
119
|
|
|
@@ -190,7 +190,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
190
190
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
191
191
|
|
|
192
192
|
"use strict";
|
|
193
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var plyr__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! plyr */ \"./node_modules/plyr/dist/plyr.min.js\");\n/* harmony import */ var plyr__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(plyr__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var plyr_dist_plyr_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! plyr/dist/plyr.css */ \"./node_modules/plyr/dist/plyr.css\");\n/* harmony import */ var _loop_pm__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./loop-pm */ \"./src/modules/loop-pm.js\");\n/* harmony import */ var _chapter_pm__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./chapter-pm */ \"./src/modules/chapter-pm.js\");\n/* harmony import */ var _UIprep_pm__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./UIprep-pm */ \"./src/modules/UIprep-pm.js\");\n/**\n * an instance of Player is used for each video on the DOM\n * the Player class manages Plyr, Loop, Chapter, HTML and events.\n * the plyr ready event listener instantiats a global window[\"PMinstance_\" + id] that is used by loop and chapter CSS classes\n * that are injected later\n * @module Player Module\n * @requires Plyr Module\n * @requires Plyr CSS\n * @requires Loop Module\n * @requires Chapter Module\n * @requires UIprep Module\n */\n\n\n\n\n\n\n\n\n\n\n\n\n\n/**\n * adds PractiseMaster looping and chapter controls to Plyr\n * @class Player\n * @property {string} id from element\n * @property {class} plyrInstance from plyr module\n * @property {boolean} isStatic as marked by user\n * @property {obsolete} CSSclasses refactor to classList if possible and remove (used once)\n * @property {classlist} classList\n * @property {declaration} code block sets isStatic for given conditions\n * @property {declaration} code block creates audio or video plyr for given properties\n * @property {class} uiPrep a new uiPrep class\n * @property {class} loop a Loop class instance\n * @property {class} chapter a Chapter class instance\n * @property {method} addPMReadyListeners adds any listeners required (ex PMready)\n * \n * \n */\nclass Player {\n\n /**\n * class constructor\n * @param {element} el div with pm class and plyr data requirements \n */\n constructor(el) {\n\n this.id = el.id;\n\n // site (ex WordPress css) goes on page once with PageSupport\n\n\n\n this.plyrInstance;\n\n // note static is set when Plyr is instantiated\n // otherwise this would be in UIprep\n // can toggleControls vis/no vis while playing but not set property\n\n this.isStatic;\n\n // class list for element, CSSclasses added back after player created\n\n this.CSSclasses = el.className.split(' ');\n\n this.classList = el.classList;\n\n // classlist check for static (user implemented)\n\n if (el.classList.contains('static') || el.classList.contains('offScreen') || window.PMpageSupport.isSafari || el.classList.contains('links')) {\n\n this.isStatic = true; // create plyr with static controls\n\n } else {\n // create plyr with hover controls\n this.isStatic = false;\n }\n\n\n if (el.tagName === 'AUDIO') {\n\n this.newPlyrAudio(el);\n\n }\n else {\n\n this.newPlyrVideo(el);\n\n }\n\n\n this.uiPrep = new _UIprep_pm__WEBPACK_IMPORTED_MODULE_4__[\"default\"](el);\n\n this.loop;\n\n this.chapter;\n\n // this will fire after everything to set any universal style\n\n this.addPMReadyListeners();\n\n\n // this.addMobileListeners();\n\n\n }\n\n\n\n /**\n * creates a new video Plyr with the pm element\n * @param {element} el - div with pm class \n */\n\n newPlyrVideo(el) {\n\n this.plyrInstance = new (plyr__WEBPACK_IMPORTED_MODULE_0___default())('#' + el.id, {\n controls: [\n 'play', // Play/pause playback\n 'progress', // The progress bar and scrubber for playback and buffering\n 'current-time', // The current time of playback\n 'duration', // The full duration of the media\n 'mute', // Toggle mute\n 'volume', // Volume control\n 'settings', // Settings menu\n 'fullscreen', // Toggle fullscreen\n ],\n\n hideControls: !this.isStatic\n\n });\n\n this.setVideoListeners(el.id);\n\n this.eventListeners();\n\n }\n\n\n\n /**\n * creates a new audio Plyr with the pm element\n * @param {element} el - div with pm class \n */\n\n newPlyrAudio(el) {\n\n this.plyrInstance = new (plyr__WEBPACK_IMPORTED_MODULE_0___default())('audio#' + el.id, {});\n\n this.setAudioListeners(el.id)\n\n this.eventListeners();\n\n }\n\n\n\n /**\n * called from the plyr ready event listener, this method places the HTML controls on the video player\n * @param {string} id player/plyr/div id\n * @emits {event} called 'pmControlsReady'\n */\n\n HTMLControls(id) {\n\n var loopDivsLiteral = `\n <div style=\"flex-basis: 100%; height: 0;\"></div>\n <div style=\"flex-grow: 0.25;\"></div>\n <button id=\"${this.id}_info\" class=\"infoButton plyr__controls__item plyr__control\" type=\"button\">\n <svg id=\"infoSVG\" class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\" >\n <path xmlns=\"http://www.w3.org/2000/svg\" d=\"m9.0598 0.42333c-4.9453 0-8.9522 3.8514-8.9522 8.6049 0 4.7535 4.0068 8.6049 8.9522 8.6049 4.9453 0 8.9522-3.8514 8.9522-8.6049 0-4.7535-4.0068-8.6049-8.9522-8.6049zm0 15.544c-3.9924 0-7.2195-3.1019-7.2195-6.9394 0-3.8306 3.2271-6.9394 7.2195-6.9394 3.9852 0 7.2195 3.1019 7.2195 6.9394 0 3.8375-3.2271 6.9394-7.2195 6.9394zm0-11.728c0.83746 0 1.5161 0.65231 1.5161 1.4573 0 0.80498-0.67863 1.4573-1.5161 1.4573-0.83746 0-1.5161-0.65231-1.5161-1.4573 0-0.80498 0.67863-1.4573 1.5161-1.4573zm2.0215 8.8131c0 0.229-0.19493 0.41637-0.43317 0.41637h-3.1766c-0.23824 0-0.43317-0.18736-0.43317-0.41637v-0.83273c0-0.229 0.19493-0.41637 0.43317-0.41637h0.43317v-2.2206h-0.43317c-0.23824 0-0.43317-0.18736-0.43317-0.41637v-0.83273c0-0.229 0.19493-0.41637 0.43317-0.41637h2.3102c0.23824 0 0.43317 0.18737 0.43317 0.41637v3.4697h0.43317c0.23824 0 0.43317 0.18736 0.43317 0.41637z\"/>\n </svg>\n <span class=\"label--not-pressed plyr__sr-only\">Info</span>\n </button>\n <span class=\"PMlogo\" style=\"font-style: italic; font-size: smaller; line-height: 12px;\">Practise<br>Master</span>\n <div style=\"flex-grow: 1;\"></div>\n <button id=\"${this.id}_nowTimeStart\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg id=\"nowSVG\" class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\" style=\"transform: scaleY(-1)\" >\n <path xmlns=\"http://www.w3.org/2000/svg\" d=\"m13.83 0.12947c-0.60243 0.001022-0.93199 0.76661-1.3344 1.2481-0.42034 0.6401-0.18152 1.5806 0.28874 2.0369 0.40781 0.38221 0.08162 0.35863-0.24583 0.33434-3.3737 0.011276-6.7487-0.022766-10.121 0.017257-1.3482 0.13812-2.4025 1.9022-2.2584 3.6894 0.006509 2.7641-0.011751 4.6472 0.01577 7.4105 0.10198 1.8037 1.4251 3.1952 2.7541 3.0023 2.1542-0.01129 3.1065 0.02276 5.26-0.01727 1.3476-0.13717 2.3846-1.9108 2.2409-3.6895-0.01218-1.3917 0.02481-2.7875-0.01954-4.1765-0.096853-0.79696-0.72647-1.1446-1.2687-1.0422-0.527-0.049194-1.1834 0.011045-1.4058 0.78294-0.16627 0.81285-0.048406 1.6792-0.083807 2.5159v1.9074h-4.7123c0.0021-2.5223-0.00462-4.1591-0.00294-6.6814h10.095c-0.3871 0.56351-1.025 1.085-0.87246 1.9767 0.12204 0.66517 0.59476 1.0425 0.92175 1.5235 0.48086 0.55576 1.1804 0.23938 1.5247-0.38686 1.0531-1.4245 2.1432-2.8048 3.1729-4.2573 0.34907-0.65253 0.093278-1.5004-0.34614-1.9384-1.0264-1.3413-2.0186-2.7349-3.0667-4.0431-0.15772-0.13891-0.34622-0.21302-0.53492-0.21263z\" style=\"stroke-width:.014514\"/>\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <button id=\"${this.id}_subtrTimeStart\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg id=\"cheveronSVG\" class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\" style=\"transform: scaleX(-1)\" >\n <g xmlns=\"http://www.w3.org/2000/svg\" transform=\"matrix(.036353 0 0 .036621 -3.4195 .1145)\" style=\"stroke-width:7.2515\"><g style=\"stroke-width:7.2515\"><g style=\"stroke-width:7.2515\"><path d=\"m382.68 226.8c-73.671-73.548-147.1-147.35-220.92-220.74-12.991-11.358-32.333-5.3965-41.748 7.4512-10.355 9.4864-22.632 21.691-17.227 37.166 6.041 14.425 20.131 23.247 30.207 34.805 53.47 53.47 106.94 106.94 160.41 160.41-61.919 62.042-124.09 123.84-185.85 186.04-11.359 12.99-5.3968 32.335 7.4522 41.748 9.5221 10.409 21.812 22.708 37.35 17.168 14.308-6.1241 23.115-20.108 34.623-30.154 65.802-65.925 131.86-131.6 197.5-197.68 8.6934-10.271 7.9092-26.86-1.7952-36.212z\" style=\"stroke-width:7.2515\"/></g></g></g>\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <input-duration id=\"${this.id}_timeStart\"></input-duration>\n <button id=\"${this.id}_addTimeStart\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg id=\"cheveronRevSVG\" class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\">\n <use xlink:href=\"#cheveronSVG\" />\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <div style=\"flex-grow: 1;\"></div>\n <button id=\"${this.id}_nowTimeEnd\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg id=\"pointSVG\" class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\" style=\"transform: scale(-1, -1)\" >\n <path xmlns=\"http://www.w3.org/2000/svg\" d=\"m13.83 0.12947c-0.60243 0.001022-0.93199 0.76661-1.3344 1.2481-0.42034 0.6401-0.18152 1.5806 0.28874 2.0369 0.40781 0.38221 0.08162 0.35863-0.24583 0.33434-3.3737 0.011276-6.7487-0.022766-10.121 0.017257-1.3482 0.13812-2.4025 1.9022-2.2584 3.6894 0.006509 2.7641-0.011751 4.6472 0.01577 7.4105 0.10198 1.8037 1.4251 3.1952 2.7541 3.0023 2.1542-0.01129 3.1065 0.02276 5.26-0.01727 1.3476-0.13717 2.3846-1.9108 2.2409-3.6895-0.01218-1.3917 0.02481-2.7875-0.01954-4.1765-0.096853-0.79696-0.72647-1.1446-1.2687-1.0422-0.527-0.049194-1.1834 0.011045-1.4058 0.78294-0.16627 0.81285-0.048406 1.6792-0.083807 2.5159v1.9074h-4.7123c0.0021-2.5223-0.00462-4.1591-0.00294-6.6814h10.095c-0.3871 0.56351-1.025 1.085-0.87246 1.9767 0.12204 0.66517 0.59476 1.0425 0.92175 1.5235 0.48086 0.55576 1.1804 0.23938 1.5247-0.38686 1.0531-1.4245 2.1432-2.8048 3.1729-4.2573 0.34907-0.65253 0.093278-1.5004-0.34614-1.9384-1.0264-1.3413-2.0186-2.7349-3.0667-4.0431-0.15772-0.13891-0.34622-0.21302-0.53492-0.21263z\" style=\"stroke-width:.014514\"/>\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <button id=\"${this.id}_subtrTimeEnd\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\" style=\"transform: scaleX(-1)\" >\n <use xlink:href=\"#cheveronSVG\" />\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <input-duration id=\"${this.id}_timeEnd\"></input-duration>\n <button id=\"${this.id}_addTimeEnd\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\">\n <use xlink:href=\"#cheveronSVG\" />\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <div style=\"flex-grow: 2;\"></div>\n <div id=\"${this.id}_onOff\" class=\"onoffswitch onoffDiv\">\n <input type=\"checkbox\" name=\"onoffswitch\" class=\"onoffswitch-checkbox\" tabindex=\"0\">\n <label class=\"onoffswitch-label\" for=\"myonoffswitch\">\n <span class=\"onoffswitch-inner\"></span>\n <span class=\"onoffswitch-switch\"></span>\n </label>\n </div>\n <div style=\"flex-grow: 0.5;\"> </div>\n `;\n\n\n document.querySelector(\"#\" + id + \" > div.plyr__controls\").insertAdjacentHTML('beforeend', loopDivsLiteral);\n\n console.log('dispatching pmControlsReady event: ' + id);\n\n window.dispatchEvent(new CustomEvent('pmControlsReady', { detail: id }));\n\n \n }\n\n\n\n /**\n * this method places event listeners on page for PM controls buttons through a delegate in Helpers module \n */\n\n eventListeners() {\n\n // events these events need delegates to encapsulate id data as closures\n // https://stackoverflow.com/questions/46101024/add-event-listener-to-future-item-without-jquery\n\n // start time events \n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_nowTimeStart', this.setTimeStart));\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_subtrTimeStart', this.subtrTimeStart));\n\n // event for input-duration \n document.addEventListener('keyup', window.PMpageSupport.helpers.delegate('#' + this.id + '_timeStart', this.timeStart));\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_addTimeStart', this.addTimeStart));\n\n\n // end time events (add return key for starting loop)\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_nowTimeEnd', this.setTimeEnd));\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_subtrTimeEnd', this.subtrTimeEnd));\n\n // event for input-duration\n document.addEventListener('keyup', window.PMpageSupport.helpers.delegate('#' + this.id + '_timeEnd', this.timeEnd));\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_addTimeEnd', this.addTimeEnd));\n\n // loop on / off button event\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_onOff', this.offToggle));\n\n\n // Loop and Chapter Link button event\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_links', this.linkLoopOrChapter));\n\n\n\n }\n\n\n // actual event listeners\n\n /**\n * event listener sets start time\n * @listens click event of *_nowTimeStart \n * @param {event} e unused\n */\n\n setTimeStart(e) {\n\n // 'this' is button so\n\n\n const id = this.id.replace('_nowTimeStart', '');\n\n\n\n console.log(\"Hey, I'll set the start time for player: \" + id);\n\n\n // Does: \n // set loop start\n\n const currentTime = window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime;\n window.PractiseMaster[\"PM_\" + id].loop.startTimeSeconds = currentTime;\n\n\n // trims string for mobile devices, where input time is updated to input string\n\n document.querySelector(\"#\" + id + \"_timeStart\").value = window.PMpageSupport.helpers.toStringTime(currentTime);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n\n /**\n * event listener reduces start time\n * @listens click event of *_subtrTimeStart \n * @param {event} e unused\n */\n\n subtrTimeStart(e) {\n\n // 'this' is button so\n const id = this.id.replace('_subtrTimeStart', '');\n\n\n console.log(\"Hey, I'll subtract time start for player: \" + id);\n\n\n /// update loop object\n\n var inputTimeFloat = window.PractiseMaster[\"PM_\" + id].loop.startTimeSeconds / 10000 - 0.25 > 0 ? window.PractiseMaster[\"PM_\" + id].loop.startTimeSeconds / 10000 - 0.25 : 0;\n\n window.PractiseMaster[\"PM_\" + id].loop.startTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.pause();\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime = inputTimeFloat;\n\n\n\n document.querySelector(\"#\" + id + \"_timeStart\").value = window.PMpageSupport.helpers.toStringTime(inputTimeFloat);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n /**\n * event listener increases start time\n * @listens click event of *_addTimeStart \n * @param {event} e unused\n */\n\n addTimeStart(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_addTimeStart', '');\n\n\n console.log(\"Hey, I'll add time end for player: \" + id);\n\n\n /// update loop object\n\n var inputTimeFloat = window.PractiseMaster[\"PM_\" + id].loop.startTimeSeconds / 10000 + 0.25;\n\n\n window.PractiseMaster[\"PM_\" + id].loop.startTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.pause();\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime = inputTimeFloat;\n\n\n document.querySelector(\"#\" + id + \"_timeStart\").value = window.PMpageSupport.helpers.toStringTime(inputTimeFloat);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n\n /**\n * event listener for <input type=\"time\"> or chronlyHMS updating start time\n * @listens keyup event of *_timeStart\n * @param {e} event \n */\n\n timeStart(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_timeStart', '');\n\n console.log(\"Hey, I'll digit adjust the start time for player: \" + id);\n\n\n // update loop instance\n\n var startTimeString = this.value;\n\n\n // was toFloatSecs x2\n\n window.PractiseMaster[\"PM_\" + id].loop.startTimeSeconds = window.PMpageSupport.helpers.secondsNumber(startTimeString);\n\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime = window.PMpageSupport.helpers.secondsNumber(startTimeString);\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n\n }\n\n\n\n /**\n * event listener sets end time\n * @listens click event of *_nowTimeEnd \n * @param {event} e unused\n */\n\n setTimeEnd(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_nowTimeEnd', '');\n\n\n console.log(\"Hey, I'll set the end time for player: \" + id);\n\n\n // get current time of plyr\n\n // set loop end\n\n var currentTime = window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime;\n\n\n window.PractiseMaster[\"PM_\" + id].loop.endTimeSeconds = currentTime;\n\n\n // trims string for mobile devices, where input time is updated to input string\n\n document.querySelector(\"#\" + id + \"_timeEnd\").value = window.PMpageSupport.helpers.toStringTime(currentTime);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n\n /**\n * event listener reduces end time\n * @listens click event of *_subtrTimeEnd\n * @param {event} e unused\n */\n\n subtrTimeEnd(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_subtrTimeEnd', '');\n\n\n console.log(\"Hey, I'll subtract time end for player: \" + id);\n\n\n /// update loop object\n\n var inputTimeFloat = window.PractiseMaster[\"PM_\" + id].loop.endTimeSeconds / 10000 - 0.25 > 0 ? window.PractiseMaster[\"PM_\" + id].loop.endTimeSeconds / 10000 - 0.25 : 0;\n\n window.PractiseMaster[\"PM_\" + id].loop.endTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.pause();\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime = inputTimeFloat;\n\n\n // trims string for mobile devices, where input time is updated to input string\n document.querySelector(\"#\" + id + \"_timeEnd\").value = window.PMpageSupport.helpers.toStringTime(inputTimeFloat);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n /**\n * event listener increases end time\n * @listens click event of *_addTimeEnd \n * @param {event} e unused\n */\n\n addTimeEnd(event) {\n\n // 'this' is button so\n\n const id = this.id.replace('_addTimeEnd', '');\n\n\n console.log(\"Hey, I'll add time end for player: \" + id);\n\n\n /// update loop object\n\n var inputTimeFloat = window.PractiseMaster[\"PM_\" + id].loop.endTimeSeconds / 10000 + 0.25;\n\n\n window.PractiseMaster[\"PM_\" + id].loop.endTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.pause();\n\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime = inputTimeFloat;\n\n\n document.querySelector(\"#\" + id + \"_timeEnd\").value = window.PMpageSupport.helpers.toStringTime(inputTimeFloat);\n\n\n //run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n /**\n * event listener for <input type=\"time\"> or chronlyHMS updating end time\n * @listens keyup event of *_timeEnd\n * @param {event} e unused \n */\n\n timeEnd(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_timeEnd', '');\n\n\n console.log(\"Hey, I'll digit adjust the end time for player: \" + id);\n\n\n var endTimeString = this.value;\n\n\n window.PractiseMaster[\"PM_\" + id].loop.endTimeSeconds = window.PMpageSupport.helpers.secondsNumber(endTimeString);\n\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime = window.PMpageSupport.helpers.secondsNumber(endTimeString);\n\n\n //run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n /**\n * event listener toggles on/off looping\n * @listens click event of *_onOff \n * @param {event} e unused\n */\n\n offToggle(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_onOff', '');\n\n\n console.log(\"Hey, I'll toggle off/on player: \" + id);\n\n\n // toggle the ui switch\n\n document.querySelector('#' + id + '_onOff > input').checked = !document.querySelector('#' + id + '_onOff > input').checked;\n\n // Get loop instance\n\n const loop = window.PractiseMaster[\"PM_\" + id].loop;\n\n\n // toggle the loop object instance \n\n loop.off = !loop.off;\n\n console.log(\"The loop is now switched off: \" + loop.off);\n\n\n\n // warning and invalid states check\n // and further in own method \n\n if (!loop.off) {\n\n // run validation \n\n console.log('asking to run validation for' + id);\n\n if (window.PMpageSupport.helpers.redWarningValidation(id)) {\n\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.pause();\n\n // turn looping off\n loop.off = !loop.off;\n\n // toggle switch back to off\n\n setTimeout(() => {\n document.querySelector('#' + id + '_onOff > input').checked = !document.querySelector('#' + id + '_onOff > input').checked;\n }, 500);\n\n }\n\n\n else {\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.play();\n }\n\n }\n }\n\n\n\n /**\n * event listener for loopbuilder links\n * @listens click event of *_links \n * @param {event} e unused\n * @todo refactor this (and other button events and listeners) to the UIprep class\n */\n\n linkLoopOrChapter(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_links', '');\n\n\n console.log(\"Hey, I'll toggle off/on player: \" + id);\n\n\n // need helpers to convert seconds to time before sending to UI\n window.PractiseMaster[\"PM_\" + id].uiPrep.addHTMLlink();\n\n }\n\n\n\n /**\n * statements that run after plyr 'ready' event for audio \n * @listens plyr ready\n * @param {string} id player/plyr/div id\n */\n\n setAudioListeners(id) {\n\n var closure = this;\n\n // Audio ready listener (PM will be slightly different)\n // window[\"PlyrAudio_\" + id].on('ready', event => {\n this.plyrInstance.on('ready', event => {\n\n console.log(\"Plyr audio says it's ready! id: \" + id);\n\n // need to 'add back' user's id to div because it's removed by plyr \n event.target.id = id;\n\n // also need to add back pm class because it is removed by plyr was: event.target.classList.add('pm');\n closure.CSSclasses.forEach(singleClass => event.target.classList.add(singleClass));\n\n\n // replaces old new PractiseMaster(), as that is already done:\n closure.HTMLControls(closure.id);\n closure.loop = new _loop_pm__WEBPACK_IMPORTED_MODULE_2__[\"default\"](closure.id);\n closure.chapter = new _chapter_pm__WEBPACK_IMPORTED_MODULE_3__[\"default\"](closure.id, 0, 0);\n\n console.log('duration at plyr ready: ' + closure.plyrInstance.duration);\n\n\n // set duration of loop \n\n // for html audio and video there can be lags between plyr ready and the video duration value being 'ready'\n // this promise on interval is based on https://stackoverflow.com/questions/17217736/while-loop-with-promises\n // and https://codepen.io/anon/pen/jzpZMa?editors=0011 \n\n\n const doSomething = value =>\n new Promise(resolve =>\n setTimeout(() => resolve(value >= 5 ? 'ok' : 'no'), 1000))\n\n const loop = async value => {\n let result = null\n while (result != 'ok') {\n console.log(value)\n result = await doSomething(value)\n value = closure.plyrInstance.duration\n }\n console.log('yay audio duration set')\n }\n\n loop(closure.plyrInstance.duration)\n .then(() => {\n window[\"PMinstance_\" + id].loop.videoDuration = closure.plyrInstance.duration;\n console.log('audio duration all done!');\n });\n\n\n\n\n\n\n\n // needs to be initialised first for duration promise in new Loop()\n window[\"PMinstance_\" + id];\n\n // make instance available as Global, needed for Loop and Chapter CSSclasses\n window[\"PMinstance_\" + id] = closure;\n\n this.uiPrep.addAudioStyle(id);\n\n });\n\n }\n\n\n\n /**\n * statements that run after plyr 'ready' event for audio \n * @listens plyr ready\n * @param {string} id player/plyr/div id\n */\n\n setVideoListeners(id) {\n\n\n var closure = this;\n\n\n this.plyrInstance.on('ready', event => {\n\n // need to be above the conditional duration blocks\n // needs to be initialised first for duration promise in new Loop()\n window[\"PMinstance_\" + id];\n\n // make instance available as Global, needed for Loop and Chapter CSSclasses\n window[\"PMinstance_\" + id] = closure;\n\n // need to 'add back' user's id to div because it's removed by plyr \n\n event.target.id = id;\n\n // also need to add back pm class because it is removed by plyr\n\n // event.target.classList.add('pm');\n\n closure.CSSclasses.forEach(singleClass => event.target.classList.add(singleClass));\n\n\n console.log(\"Plyr video says it's ready! id: \" + id);\n\n console.log(\"Player source is : \" + closure.plyrInstance.source);\n\n console.log(\"Player duration is : \" + closure.plyrInstance.duration);\n\n // replaces old new PractiseMaster(), as that is already done:\n closure.HTMLControls(id);\n closure.loop = new _loop_pm__WEBPACK_IMPORTED_MODULE_2__[\"default\"](closure.id);\n closure.chapter = new _chapter_pm__WEBPACK_IMPORTED_MODULE_3__[\"default\"](closure.id, 0, 0);\n\n\n\n // methods to set duration and css are different depending on Video type\n\n if (closure.plyrInstance.isVimeo) {\n\n\n closure.plyrInstance.embed.getDuration().then(function (duration) {\n // the player is ready\n\n console.log(\"This Vimeo getDuration: \" + duration + \" seconds long.\");\n\n closure.loop.videoDuration = duration;\n console.log('Vimeo player duration is ' + duration);\n\n // looks like this needs to go inside promise!\n\n console.log(\"going to call css FH w/in promise! \");\n\n });\n\n }\n\n else if (closure.plyrInstance.isHTML5) {\n\n\n // for html audio and video there can be lags between plyr ready and the video duration value being 'ready'\n // this promise on interval is based on https://stackoverflow.com/questions/17217736/while-loop-with-promises\n // and https://codepen.io/anon/pen/jzpZMa?editors=0011 \n\n\n const doSomething = value =>\n new Promise(resolve =>\n setTimeout(() => resolve(value >= 5 ? 'ok' : 'no'), 1000))\n\n const loop = async value => {\n let result = null\n while (result != 'ok') {\n console.log(value)\n result = await doSomething(value)\n value = closure.plyrInstance.duration\n }\n console.log('yay html video duration set')\n }\n\n loop(closure.plyrInstance.duration)\n .then(() => {\n window[\"PMinstance_\" + id].loop.videoDuration = closure.plyrInstance.duration;\n console.log('video duration all done!');\n });\n\n\n\n\n\n\n\n }\n else {\n\n // for YouTube \n\n closure.loop.videoDuration = closure.plyrInstance.duration;\n\n console.log('Youtube player duration is ' + closure.plyrInstance.duration);\n\n }\n\n\n });\n\n };\n\n\n\n /**\n * statments to run after PM fires ready and controls are in place\n * @listens PM ready event \n */\n\n addPMReadyListeners() {\n\n // closure\n var player = this;\n\n window.addEventListener('pmControlsReady', function (e) {\n\n console.log('custom event received outside if, process(detail): ' + e.detail);\n\n\n // if (e.detail === player.id) {\n\n\n console.log('custom event received INSIDE , process(detail): ' + e.detail);\n\n player.uiPrep.applyPMReadyCssHTMLSettings(player.id);\n\n\n\n // ChronlyHMS added to all players, inactive unless linkbuilder\n // the input-duration will be added in the HTML string literal\n\n\n // input-duration update\n\n player.uiPrep.styleInputDuration(player.id);\n\n\n\n // detect mobile devices and add callback to new fullScreen event\n // player.addMobileListeners(e.detail);\n\n\n // set up ChronlyHMS and link builder\n if (player.classList.contains('links')) {\n\n // this updates to LinkBuilder method\n player.uiPrep.addLinkButton(player.id);\n\n\n // audio links doesn't need off player controls\n // the rest of player types do\n\n if (player.plyrInstance.type === 'video') {\n\n player.uiPrep.offPlayerControls(player.id);\n\n }\n\n\n\n }\n else {\n\n // userChronly method in UIprep ChronlyHMS.disableInputs()\n\n // input-duration update, comment out:\n player.uiPrep.diableDurationInputs(player.id);\n\n }\n\n if (player.classList.contains('offScreen')) {\n\n // this updates to LinkBuilder method\n player.uiPrep.offPlayerControls(player.id);\n\n\n }\n\n console.log('plyr duration at PM ready: ' + player.plyrInstance.duration);\n // console.log('loop duration at e: ' + player.loop);\n\n // player.loop.videoDuration = player.plyrInstance.duration\n\n\n //\n // window[\"PMinstance_\" + player.id].loop.videoDuration = player.plyrInstance.duration;\n\n // assign methods to windows variables\n // so user can easily access\n\n window.PMloop = window.PMpageSupport.PMloop;\n\n window.PMchapter = window.PMpageSupport.PMchapter;\n\n\n\n player.updateFSmobile(e.detail);\n\n // }\n\n },\n\n\n\n false);\n\n\n\n\n\n }\n\n // addMobileListeners() {\n // // if is Mobile toggle css display for elements except the fullscreen button \n // // toggle will display the PM logo\n\n\n\n // // if (window.PMpageSupport.isMobile) {\n\n // if (true) {\n\n // console.log('this is mobile');\n\n // // on pm ready\n\n // window.addEventListener('pmControlsReady', (e) => {\n\n // console.log('pm ready event from: ' + e.detail + 'in addMobileListener');\n\n // if (e.detail === this.id) {\n\n\n\n // // will need to update this selector ? for ID specific?\n\n // var contr = document.querySelector('#' + e.detail + ' > 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 // // *** start here ***\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 // Array.from(contr.children).filter(function (child) {\n // return (child.dataset.plyr === \"fullscreen\")\n // }).forEach(function (child) {\n\n\n // child.addEventListener('click', (contrIn) => {\n\n // var contrIn = document.querySelector(\"div.plyr__controls\");\n\n // Array.from(contrIn.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\n\n // });\n\n // };\n\n // });\n\n // }\n // else {\n\n // console.log('this is not mobile');\n // }\n\n\n // modify its size \n // }\n\n\n\n\n\n\n updateFSmobile(id) {\n\n // if (window.PMpageSupport.isMobile) {\n\n if (true) {\n\n console.log('mobile fullscreen for :' + id);\n\n // will need to update this selector ? for ID specific?\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 // *** start here ***\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 Array.from(contr.children).filter(function (child) {\n return (child.dataset.plyr === \"fullscreen\")\n }).forEach(function (child) {\n\n\n child.addEventListener('click', (contrIn) => {\n\n var contrIn = document.querySelector(\"div.plyr__controls\");\n\n Array.from(contrIn.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\n\n });\n\n\n\n\n }\n }\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Player);\n\n//# sourceURL=webpack://practisemaster/./src/modules/player-pm.js?");
|
|
193
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var plyr__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! plyr */ \"./node_modules/plyr/dist/plyr.min.js\");\n/* harmony import */ var plyr__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(plyr__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var plyr_dist_plyr_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! plyr/dist/plyr.css */ \"./node_modules/plyr/dist/plyr.css\");\n/* harmony import */ var _loop_pm__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./loop-pm */ \"./src/modules/loop-pm.js\");\n/* harmony import */ var _chapter_pm__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./chapter-pm */ \"./src/modules/chapter-pm.js\");\n/* harmony import */ var _UIprep_pm__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./UIprep-pm */ \"./src/modules/UIprep-pm.js\");\n/**\n * an instance of Player is used for each video on the DOM\n * the Player class manages Plyr, Loop, Chapter, HTML and events.\n * the plyr ready event listener instantiats a global window[\"PMinstance_\" + id] that is used by loop and chapter CSS classes\n * that are injected later\n * @module Player Module\n * @requires Plyr Module\n * @requires Plyr CSS\n * @requires Loop Module\n * @requires Chapter Module\n * @requires UIprep Module\n */\n\n\n\n\n\n\n\n\n\n\n\n\n\n/**\n * adds PractiseMaster looping and chapter controls to Plyr\n * @class Player\n * @property {string} id from element\n * @property {class} plyrInstance from plyr module\n * @property {boolean} isStatic as marked by user\n * @property {obsolete} CSSclasses refactor to classList if possible and remove (used once)\n * @property {classlist} classList\n * @property {declaration} code block sets isStatic for given conditions\n * @property {declaration} code block creates audio or video plyr for given properties\n * @property {class} uiPrep a new uiPrep class\n * @property {class} loop a Loop class instance\n * @property {class} chapter a Chapter class instance\n * @property {method} addPMReadyListeners adds any listeners required (ex PMready)\n * \n * \n */\nclass Player {\n\n /**\n * class constructor\n * @param {element} el div with pm class and plyr data requirements \n */\n constructor(el) {\n\n this.id = el.id;\n\n // site (ex WordPress css) goes on page once with PageSupport\n\n\n\n this.plyrInstance;\n\n // note static is set when Plyr is instantiated\n // otherwise this would be in UIprep\n // can toggleControls vis/no vis while playing but not set property\n\n this.isStatic;\n\n // class list for element, CSSclasses added back after player created\n\n this.CSSclasses = el.className.split(' ');\n\n this.classList = el.classList;\n\n // classlist check for static (user implemented)\n\n if (el.classList.contains('static') || el.classList.contains('offScreen') || window.PMpageSupport.isSafari || el.classList.contains('links')) {\n\n this.isStatic = true; // create plyr with static controls\n\n } else {\n // create plyr with hover controls\n this.isStatic = false;\n }\n\n\n if (el.tagName === 'AUDIO') {\n\n this.newPlyrAudio(el);\n\n }\n else {\n\n this.newPlyrVideo(el);\n\n }\n\n\n this.uiPrep = new _UIprep_pm__WEBPACK_IMPORTED_MODULE_4__[\"default\"](el);\n\n this.loop;\n\n this.chapter;\n\n // this will fire after everything to set any universal style\n\n this.addPMReadyListeners();\n\n\n // this.addMobileListeners();\n\n\n }\n\n\n\n /**\n * creates a new video Plyr with the pm element\n * @param {element} el - div with pm class \n */\n\n newPlyrVideo(el) {\n\n this.plyrInstance = new (plyr__WEBPACK_IMPORTED_MODULE_0___default())('#' + el.id, {\n controls: [\n 'play', // Play/pause playback\n 'progress', // The progress bar and scrubber for playback and buffering\n 'current-time', // The current time of playback\n 'duration', // The full duration of the media\n 'mute', // Toggle mute\n 'volume', // Volume control\n 'settings', // Settings menu\n 'fullscreen', // Toggle fullscreen\n ],\n\n hideControls: !this.isStatic\n\n });\n\n this.setVideoListeners(el.id);\n\n this.eventListeners();\n\n }\n\n\n\n /**\n * creates a new audio Plyr with the pm element\n * @param {element} el - div with pm class \n */\n\n newPlyrAudio(el) {\n\n this.plyrInstance = new (plyr__WEBPACK_IMPORTED_MODULE_0___default())('audio#' + el.id, {});\n\n this.setAudioListeners(el.id)\n\n this.eventListeners();\n\n }\n\n\n\n /**\n * called from the plyr ready event listener, this method places the HTML controls on the video player\n * @param {string} id player/plyr/div id\n * @emits {event} called 'pmControlsReady'\n */\n\n HTMLControls(id) {\n\n var loopDivsLiteral = `\n <div style=\"flex-basis: 100%; height: 0;\"></div>\n <div style=\"flex-grow: 0.25;\"></div>\n <button id=\"${this.id}_info\" class=\"infoButton plyr__controls__item plyr__control\" type=\"button\">\n <svg id=\"infoSVG\" class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\" >\n <path xmlns=\"http://www.w3.org/2000/svg\" d=\"m9.0598 0.42333c-4.9453 0-8.9522 3.8514-8.9522 8.6049 0 4.7535 4.0068 8.6049 8.9522 8.6049 4.9453 0 8.9522-3.8514 8.9522-8.6049 0-4.7535-4.0068-8.6049-8.9522-8.6049zm0 15.544c-3.9924 0-7.2195-3.1019-7.2195-6.9394 0-3.8306 3.2271-6.9394 7.2195-6.9394 3.9852 0 7.2195 3.1019 7.2195 6.9394 0 3.8375-3.2271 6.9394-7.2195 6.9394zm0-11.728c0.83746 0 1.5161 0.65231 1.5161 1.4573 0 0.80498-0.67863 1.4573-1.5161 1.4573-0.83746 0-1.5161-0.65231-1.5161-1.4573 0-0.80498 0.67863-1.4573 1.5161-1.4573zm2.0215 8.8131c0 0.229-0.19493 0.41637-0.43317 0.41637h-3.1766c-0.23824 0-0.43317-0.18736-0.43317-0.41637v-0.83273c0-0.229 0.19493-0.41637 0.43317-0.41637h0.43317v-2.2206h-0.43317c-0.23824 0-0.43317-0.18736-0.43317-0.41637v-0.83273c0-0.229 0.19493-0.41637 0.43317-0.41637h2.3102c0.23824 0 0.43317 0.18737 0.43317 0.41637v3.4697h0.43317c0.23824 0 0.43317 0.18736 0.43317 0.41637z\"/>\n </svg>\n <span class=\"label--not-pressed plyr__sr-only\">Info</span>\n </button>\n <span class=\"PMlogo\" style=\"font-style: italic; font-size: smaller; line-height: 12px;\">Practise<br>Master</span>\n <div style=\"flex-grow: 1;\"></div>\n <button id=\"${this.id}_nowTimeStart\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg id=\"nowSVG\" class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\" style=\"transform: scaleY(-1)\" >\n <path xmlns=\"http://www.w3.org/2000/svg\" d=\"m13.83 0.12947c-0.60243 0.001022-0.93199 0.76661-1.3344 1.2481-0.42034 0.6401-0.18152 1.5806 0.28874 2.0369 0.40781 0.38221 0.08162 0.35863-0.24583 0.33434-3.3737 0.011276-6.7487-0.022766-10.121 0.017257-1.3482 0.13812-2.4025 1.9022-2.2584 3.6894 0.006509 2.7641-0.011751 4.6472 0.01577 7.4105 0.10198 1.8037 1.4251 3.1952 2.7541 3.0023 2.1542-0.01129 3.1065 0.02276 5.26-0.01727 1.3476-0.13717 2.3846-1.9108 2.2409-3.6895-0.01218-1.3917 0.02481-2.7875-0.01954-4.1765-0.096853-0.79696-0.72647-1.1446-1.2687-1.0422-0.527-0.049194-1.1834 0.011045-1.4058 0.78294-0.16627 0.81285-0.048406 1.6792-0.083807 2.5159v1.9074h-4.7123c0.0021-2.5223-0.00462-4.1591-0.00294-6.6814h10.095c-0.3871 0.56351-1.025 1.085-0.87246 1.9767 0.12204 0.66517 0.59476 1.0425 0.92175 1.5235 0.48086 0.55576 1.1804 0.23938 1.5247-0.38686 1.0531-1.4245 2.1432-2.8048 3.1729-4.2573 0.34907-0.65253 0.093278-1.5004-0.34614-1.9384-1.0264-1.3413-2.0186-2.7349-3.0667-4.0431-0.15772-0.13891-0.34622-0.21302-0.53492-0.21263z\" style=\"stroke-width:.014514\"/>\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <button id=\"${this.id}_subtrTimeStart\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg id=\"cheveronSVG\" class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\" style=\"transform: scaleX(-1)\" >\n <g xmlns=\"http://www.w3.org/2000/svg\" transform=\"matrix(.036353 0 0 .036621 -3.4195 .1145)\" style=\"stroke-width:7.2515\"><g style=\"stroke-width:7.2515\"><g style=\"stroke-width:7.2515\"><path d=\"m382.68 226.8c-73.671-73.548-147.1-147.35-220.92-220.74-12.991-11.358-32.333-5.3965-41.748 7.4512-10.355 9.4864-22.632 21.691-17.227 37.166 6.041 14.425 20.131 23.247 30.207 34.805 53.47 53.47 106.94 106.94 160.41 160.41-61.919 62.042-124.09 123.84-185.85 186.04-11.359 12.99-5.3968 32.335 7.4522 41.748 9.5221 10.409 21.812 22.708 37.35 17.168 14.308-6.1241 23.115-20.108 34.623-30.154 65.802-65.925 131.86-131.6 197.5-197.68 8.6934-10.271 7.9092-26.86-1.7952-36.212z\" style=\"stroke-width:7.2515\"/></g></g></g>\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <input-duration id=\"${this.id}_timeStart\"></input-duration>\n <button id=\"${this.id}_addTimeStart\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg id=\"cheveronRevSVG\" class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\">\n <use xlink:href=\"#cheveronSVG\" />\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <div style=\"flex-grow: 1;\"></div>\n <button id=\"${this.id}_nowTimeEnd\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg id=\"pointSVG\" class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\" style=\"transform: scale(-1, -1)\" >\n <path xmlns=\"http://www.w3.org/2000/svg\" d=\"m13.83 0.12947c-0.60243 0.001022-0.93199 0.76661-1.3344 1.2481-0.42034 0.6401-0.18152 1.5806 0.28874 2.0369 0.40781 0.38221 0.08162 0.35863-0.24583 0.33434-3.3737 0.011276-6.7487-0.022766-10.121 0.017257-1.3482 0.13812-2.4025 1.9022-2.2584 3.6894 0.006509 2.7641-0.011751 4.6472 0.01577 7.4105 0.10198 1.8037 1.4251 3.1952 2.7541 3.0023 2.1542-0.01129 3.1065 0.02276 5.26-0.01727 1.3476-0.13717 2.3846-1.9108 2.2409-3.6895-0.01218-1.3917 0.02481-2.7875-0.01954-4.1765-0.096853-0.79696-0.72647-1.1446-1.2687-1.0422-0.527-0.049194-1.1834 0.011045-1.4058 0.78294-0.16627 0.81285-0.048406 1.6792-0.083807 2.5159v1.9074h-4.7123c0.0021-2.5223-0.00462-4.1591-0.00294-6.6814h10.095c-0.3871 0.56351-1.025 1.085-0.87246 1.9767 0.12204 0.66517 0.59476 1.0425 0.92175 1.5235 0.48086 0.55576 1.1804 0.23938 1.5247-0.38686 1.0531-1.4245 2.1432-2.8048 3.1729-4.2573 0.34907-0.65253 0.093278-1.5004-0.34614-1.9384-1.0264-1.3413-2.0186-2.7349-3.0667-4.0431-0.15772-0.13891-0.34622-0.21302-0.53492-0.21263z\" style=\"stroke-width:.014514\"/>\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <button id=\"${this.id}_subtrTimeEnd\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\" style=\"transform: scaleX(-1)\" >\n <use xlink:href=\"#cheveronSVG\" />\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <input-duration id=\"${this.id}_timeEnd\"></input-duration>\n <button id=\"${this.id}_addTimeEnd\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\">\n <use xlink:href=\"#cheveronSVG\" />\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <div style=\"flex-grow: 2;\"></div>\n <div id=\"${this.id}_onOff\" class=\"onoffswitch onoffDiv\">\n <input type=\"checkbox\" name=\"onoffswitch\" class=\"onoffswitch-checkbox\" tabindex=\"0\">\n <label class=\"onoffswitch-label\" for=\"myonoffswitch\">\n <span class=\"onoffswitch-inner\"></span>\n <span class=\"onoffswitch-switch\"></span>\n </label>\n </div>\n <div style=\"flex-grow: 0.5;\"> </div>\n `;\n\n\n document.querySelector(\"#\" + id + \" > div.plyr__controls\").insertAdjacentHTML('beforeend', loopDivsLiteral);\n\n console.log('dispatching pmControlsReady event: ' + id);\n\n window.dispatchEvent(new CustomEvent('pmControlsReady', { detail: id }));\n\n \n }\n\n\n\n /**\n * this method places event listeners on page for PM controls buttons through a delegate in Helpers module \n */\n\n eventListeners() {\n\n // events these events need delegates to encapsulate id data as closures\n // https://stackoverflow.com/questions/46101024/add-event-listener-to-future-item-without-jquery\n\n // start time events \n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_nowTimeStart', this.setTimeStart));\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_subtrTimeStart', this.subtrTimeStart));\n\n // event for input-duration \n document.addEventListener('keyup', window.PMpageSupport.helpers.delegate('#' + this.id + '_timeStart', this.timeStart));\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_addTimeStart', this.addTimeStart));\n\n\n // end time events (add return key for starting loop)\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_nowTimeEnd', this.setTimeEnd));\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_subtrTimeEnd', this.subtrTimeEnd));\n\n // event for input-duration\n document.addEventListener('keyup', window.PMpageSupport.helpers.delegate('#' + this.id + '_timeEnd', this.timeEnd));\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_addTimeEnd', this.addTimeEnd));\n\n // loop on / off button event\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_onOff', this.offToggle));\n\n\n // Loop and Chapter Link button event\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_links', this.linkLoopOrChapter));\n\n\n\n }\n\n\n // actual event listeners\n\n /**\n * event listener sets start time\n * @listens click event of *_nowTimeStart \n * @param {event} e unused\n */\n\n setTimeStart(e) {\n\n // 'this' is button so\n\n\n const id = this.id.replace('_nowTimeStart', '');\n\n\n\n console.log(\"Hey, I'll set the start time for player: \" + id);\n\n\n // Does: \n // set loop start\n\n const currentTime = window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime;\n window.PractiseMaster[\"PM_\" + id].loop.startTimeSeconds = currentTime;\n\n\n // trims string for mobile devices, where input time is updated to input string\n\n document.querySelector(\"#\" + id + \"_timeStart\").value = window.PMpageSupport.helpers.toStringTime(currentTime);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n\n /**\n * event listener reduces start time\n * @listens click event of *_subtrTimeStart \n * @param {event} e unused\n */\n\n subtrTimeStart(e) {\n\n // 'this' is button so\n const id = this.id.replace('_subtrTimeStart', '');\n\n\n console.log(\"Hey, I'll subtract time start for player: \" + id);\n\n\n /// update loop object\n\n var inputTimeFloat = window.PractiseMaster[\"PM_\" + id].loop.startTimeSeconds / 10000 - 0.25 > 0 ? window.PractiseMaster[\"PM_\" + id].loop.startTimeSeconds / 10000 - 0.25 : 0;\n\n window.PractiseMaster[\"PM_\" + id].loop.startTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.pause();\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime = inputTimeFloat;\n\n\n\n document.querySelector(\"#\" + id + \"_timeStart\").value = window.PMpageSupport.helpers.toStringTime(inputTimeFloat);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n /**\n * event listener increases start time\n * @listens click event of *_addTimeStart \n * @param {event} e unused\n */\n\n addTimeStart(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_addTimeStart', '');\n\n\n console.log(\"Hey, I'll add time end for player: \" + id);\n\n\n /// update loop object\n\n var inputTimeFloat = window.PractiseMaster[\"PM_\" + id].loop.startTimeSeconds / 10000 + 0.25;\n\n\n window.PractiseMaster[\"PM_\" + id].loop.startTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.pause();\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime = inputTimeFloat;\n\n\n document.querySelector(\"#\" + id + \"_timeStart\").value = window.PMpageSupport.helpers.toStringTime(inputTimeFloat);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n\n /**\n * event listener for <input type=\"time\"> or chronlyHMS updating start time\n * @listens keyup event of *_timeStart\n * @param {e} event \n */\n\n timeStart(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_timeStart', '');\n\n console.log(\"Hey, I'll digit adjust the start time for player: \" + id);\n\n\n // update loop instance\n\n var startTimeString = this.value;\n\n\n // was toFloatSecs x2\n\n window.PractiseMaster[\"PM_\" + id].loop.startTimeSeconds = window.PMpageSupport.helpers.secondsNumber(startTimeString);\n\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime = window.PMpageSupport.helpers.secondsNumber(startTimeString);\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n\n }\n\n\n\n /**\n * event listener sets end time\n * @listens click event of *_nowTimeEnd \n * @param {event} e unused\n */\n\n setTimeEnd(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_nowTimeEnd', '');\n\n\n console.log(\"Hey, I'll set the end time for player: \" + id);\n\n\n // get current time of plyr\n\n // set loop end\n\n var currentTime = window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime;\n\n\n window.PractiseMaster[\"PM_\" + id].loop.endTimeSeconds = currentTime;\n\n\n // trims string for mobile devices, where input time is updated to input string\n\n document.querySelector(\"#\" + id + \"_timeEnd\").value = window.PMpageSupport.helpers.toStringTime(currentTime);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n\n /**\n * event listener reduces end time\n * @listens click event of *_subtrTimeEnd\n * @param {event} e unused\n */\n\n subtrTimeEnd(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_subtrTimeEnd', '');\n\n\n console.log(\"Hey, I'll subtract time end for player: \" + id);\n\n\n /// update loop object\n\n var inputTimeFloat = window.PractiseMaster[\"PM_\" + id].loop.endTimeSeconds / 10000 - 0.25 > 0 ? window.PractiseMaster[\"PM_\" + id].loop.endTimeSeconds / 10000 - 0.25 : 0;\n\n window.PractiseMaster[\"PM_\" + id].loop.endTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.pause();\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime = inputTimeFloat;\n\n\n // trims string for mobile devices, where input time is updated to input string\n document.querySelector(\"#\" + id + \"_timeEnd\").value = window.PMpageSupport.helpers.toStringTime(inputTimeFloat);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n /**\n * event listener increases end time\n * @listens click event of *_addTimeEnd \n * @param {event} e unused\n */\n\n addTimeEnd(event) {\n\n // 'this' is button so\n\n const id = this.id.replace('_addTimeEnd', '');\n\n\n console.log(\"Hey, I'll add time end for player: \" + id);\n\n\n /// update loop object\n\n var inputTimeFloat = window.PractiseMaster[\"PM_\" + id].loop.endTimeSeconds / 10000 + 0.25;\n\n\n window.PractiseMaster[\"PM_\" + id].loop.endTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.pause();\n\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime = inputTimeFloat;\n\n\n document.querySelector(\"#\" + id + \"_timeEnd\").value = window.PMpageSupport.helpers.toStringTime(inputTimeFloat);\n\n\n //run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n /**\n * event listener for <input type=\"time\"> or chronlyHMS updating end time\n * @listens keyup event of *_timeEnd\n * @param {event} e unused \n */\n\n timeEnd(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_timeEnd', '');\n\n\n console.log(\"Hey, I'll digit adjust the end time for player: \" + id);\n\n\n var endTimeString = this.value;\n\n\n window.PractiseMaster[\"PM_\" + id].loop.endTimeSeconds = window.PMpageSupport.helpers.secondsNumber(endTimeString);\n\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.currentTime = window.PMpageSupport.helpers.secondsNumber(endTimeString);\n\n\n //run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n /**\n * event listener toggles on/off looping\n * @listens click event of *_onOff \n * @param {event} e unused\n */\n\n offToggle(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_onOff', '');\n\n\n console.log(\"Hey, I'll toggle off/on player: \" + id);\n\n\n // toggle the ui switch\n\n document.querySelector('#' + id + '_onOff > input').checked = !document.querySelector('#' + id + '_onOff > input').checked;\n\n // Get loop instance\n\n const loop = window.PractiseMaster[\"PM_\" + id].loop;\n\n\n // toggle the loop object instance \n\n loop.off = !loop.off;\n\n console.log(\"The loop is now switched off: \" + loop.off);\n\n\n\n // warning and invalid states check\n // and further in own method \n\n if (!loop.off) {\n\n // run validation \n\n console.log('asking to run validation for' + id);\n\n if (window.PMpageSupport.helpers.redWarningValidation(id)) {\n\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.pause();\n\n // turn looping off\n loop.off = !loop.off;\n\n // toggle switch back to off\n\n setTimeout(() => {\n document.querySelector('#' + id + '_onOff > input').checked = !document.querySelector('#' + id + '_onOff > input').checked;\n }, 500);\n\n }\n\n\n else {\n\n window.PractiseMaster[\"PM_\" + id].plyrInstance.play();\n }\n\n }\n }\n\n\n\n /**\n * event listener for loopbuilder links\n * @listens click event of *_links \n * @param {event} e unused\n * @todo refactor this (and other button events and listeners) to the UIprep class\n */\n\n linkLoopOrChapter(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_links', '');\n\n\n console.log(\"Hey, I'll toggle off/on player: \" + id);\n\n\n // need helpers to convert seconds to time before sending to UI\n window.PractiseMaster[\"PM_\" + id].uiPrep.addHTMLlink();\n\n }\n\n\n\n /**\n * statements that run after plyr 'ready' event for audio \n * @listens plyr ready\n * @param {string} id player/plyr/div id\n */\n\n setAudioListeners(id) {\n\n var closure = this;\n\n // Audio ready listener (PM will be slightly different)\n // window[\"PlyrAudio_\" + id].on('ready', event => {\n this.plyrInstance.on('ready', event => {\n\n console.log(\"Plyr audio says it's ready! id: \" + id);\n\n // need to 'add back' user's id to div because it's removed by plyr \n event.target.id = id;\n\n // also need to add back pm class because it is removed by plyr was: event.target.classList.add('pm');\n closure.CSSclasses.forEach(singleClass => event.target.classList.add(singleClass));\n\n\n // replaces old new PractiseMaster(), as that is already done:\n closure.HTMLControls(closure.id);\n closure.loop = new _loop_pm__WEBPACK_IMPORTED_MODULE_2__[\"default\"](closure.id);\n closure.chapter = new _chapter_pm__WEBPACK_IMPORTED_MODULE_3__[\"default\"](closure.id, 0, 0);\n\n console.log('duration at plyr ready: ' + closure.plyrInstance.duration);\n\n\n // set duration of loop \n\n // for html audio and video there can be lags between plyr ready and the video duration value being 'ready'\n // this promise on interval is based on https://stackoverflow.com/questions/17217736/while-loop-with-promises\n // and https://codepen.io/anon/pen/jzpZMa?editors=0011 \n\n\n const doSomething = value =>\n new Promise(resolve =>\n setTimeout(() => resolve(value >= 5 ? 'ok' : 'no'), 1000))\n\n const loop = async value => {\n let result = null\n while (result != 'ok') {\n console.log(value)\n result = await doSomething(value)\n value = closure.plyrInstance.duration\n }\n console.log('yay audio duration set')\n }\n\n loop(closure.plyrInstance.duration)\n .then(() => {\n window[\"PMinstance_\" + id].loop.videoDuration = closure.plyrInstance.duration;\n console.log('audio duration all done!');\n });\n\n\n\n\n\n\n\n // needs to be initialised first for duration promise in new Loop()\n window[\"PMinstance_\" + id];\n\n // make instance available as Global, needed for Loop and Chapter CSSclasses\n window[\"PMinstance_\" + id] = closure;\n\n this.uiPrep.addAudioStyle(id);\n\n });\n\n }\n\n\n\n /**\n * statements that run after plyr 'ready' event for audio \n * @listens plyr ready\n * @param {string} id player/plyr/div id\n */\n\n setVideoListeners(id) {\n\n\n var closure = this;\n\n\n this.plyrInstance.on('ready', event => {\n\n // need to be above the conditional duration blocks\n // needs to be initialised first for duration promise in new Loop()\n window[\"PMinstance_\" + id];\n\n // make instance available as Global, needed for Loop and Chapter CSSclasses\n window[\"PMinstance_\" + id] = closure;\n\n // need to 'add back' user's id to div because it's removed by plyr \n\n event.target.id = id;\n\n // also need to add back pm class because it is removed by plyr\n\n // event.target.classList.add('pm');\n\n closure.CSSclasses.forEach(singleClass => event.target.classList.add(singleClass));\n\n\n console.log(\"Plyr video says it's ready! id: \" + id);\n\n console.log(\"Player source is : \" + closure.plyrInstance.source);\n\n console.log(\"Player duration is : \" + closure.plyrInstance.duration);\n\n // replaces old new PractiseMaster(), as that is already done:\n closure.HTMLControls(id);\n closure.loop = new _loop_pm__WEBPACK_IMPORTED_MODULE_2__[\"default\"](closure.id);\n closure.chapter = new _chapter_pm__WEBPACK_IMPORTED_MODULE_3__[\"default\"](closure.id, 0, 0);\n\n\n\n // methods to set duration and css are different depending on Video type\n\n if (closure.plyrInstance.isVimeo) {\n\n\n closure.plyrInstance.embed.getDuration().then(function (duration) {\n // the player is ready\n\n console.log(\"This Vimeo getDuration: \" + duration + \" seconds long.\");\n\n closure.loop.videoDuration = duration;\n console.log('Vimeo player duration is ' + duration);\n\n // looks like this needs to go inside promise!\n\n console.log(\"going to call css FH w/in promise! \");\n\n });\n\n }\n\n else if (closure.plyrInstance.isHTML5) {\n\n\n // for html audio and video there can be lags between plyr ready and the video duration value being 'ready'\n // this promise on interval is based on https://stackoverflow.com/questions/17217736/while-loop-with-promises\n // and https://codepen.io/anon/pen/jzpZMa?editors=0011 \n\n\n const doSomething = value =>\n new Promise(resolve =>\n setTimeout(() => resolve(value >= 5 ? 'ok' : 'no'), 1000))\n\n const loop = async value => {\n let result = null\n while (result != 'ok') {\n console.log(value)\n result = await doSomething(value)\n value = closure.plyrInstance.duration\n }\n console.log('yay html video duration set')\n }\n\n loop(closure.plyrInstance.duration)\n .then(() => {\n window[\"PMinstance_\" + id].loop.videoDuration = closure.plyrInstance.duration;\n console.log('html video duration all done!');\n });\n\n\n\n }\n else {\n\n // for YouTube \n\n closure.loop.videoDuration = closure.plyrInstance.duration;\n\n console.log('Youtube player duration is ' + closure.plyrInstance.duration);\n\n }\n\n\n });\n\n };\n\n\n\n /**\n * statments to run after PM fires ready and controls are in place\n * @listens PM ready event \n */\n\n addPMReadyListeners() {\n\n // closure\n var player = this;\n\n window.addEventListener('pmControlsReady', function (e) {\n\n console.log('custom event received outside if, process(detail): ' + e.detail);\n\n\n if (e.detail === player.id) {\n\n\n console.log('custom event received INSIDE , process(detail): ' + e.detail);\n\n player.uiPrep.applyPMReadyCssHTMLSettings(player.id);\n\n\n\n // ChronlyHMS added to all players, inactive unless linkbuilder\n // the input-duration will be added in the HTML string literal\n\n\n // input-duration update\n\n player.uiPrep.styleInputDuration(player.id);\n\n\n\n // detect mobile devices and add callback to new fullScreen event\n // player.addMobileListeners(e.detail);\n\n\n // set up ChronlyHMS and link builder\n if (player.classList.contains('links')) {\n\n // this updates to LinkBuilder method\n player.uiPrep.addLinkButton(player.id);\n\n\n // audio links doesn't need off player controls\n // the rest of player types do\n\n if (player.plyrInstance.type === 'video') {\n\n player.uiPrep.offPlayerControls(player.id);\n\n }\n\n\n\n }\n else {\n\n // userChronly method in UIprep ChronlyHMS.disableInputs()\n\n // input-duration update, comment out:\n player.uiPrep.diableDurationInputs(player.id);\n\n }\n\n if (player.classList.contains('offScreen')) {\n\n // this updates to LinkBuilder method\n player.uiPrep.offPlayerControls(player.id);\n\n\n }\n\n console.log('plyr duration at PM ready: ' + player.plyrInstance.duration);\n // console.log('loop duration at e: ' + player.loop);\n\n // player.loop.videoDuration = player.plyrInstance.duration\n\n\n //\n // window[\"PMinstance_\" + player.id].loop.videoDuration = player.plyrInstance.duration;\n\n // assign methods to windows variables\n // so user can easily access\n\n window.PMloop = window.PMpageSupport.PMloop;\n\n window.PMchapter = window.PMpageSupport.PMchapter;\n\n\n\n player.updateFSmobile(e.detail);\n\n }\n\n },\n\n\n\n false);\n\n\n\n\n\n }\n\n // addMobileListeners() {\n // // if is Mobile toggle css display for elements except the fullscreen button \n // // toggle will display the PM logo\n\n\n\n // // if (window.PMpageSupport.isMobile) {\n\n // if (true) {\n\n // console.log('this is mobile');\n\n // // on pm ready\n\n // window.addEventListener('pmControlsReady', (e) => {\n\n // console.log('pm ready event from: ' + e.detail + 'in addMobileListener');\n\n // if (e.detail === this.id) {\n\n\n\n // // will need to update this selector ? for ID specific?\n\n // var contr = document.querySelector('#' + e.detail + ' > 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 // // *** start here ***\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 // Array.from(contr.children).filter(function (child) {\n // return (child.dataset.plyr === \"fullscreen\")\n // }).forEach(function (child) {\n\n\n // child.addEventListener('click', (contrIn) => {\n\n // var contrIn = document.querySelector(\"div.plyr__controls\");\n\n // Array.from(contrIn.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\n\n // });\n\n // };\n\n // });\n\n // }\n // else {\n\n // console.log('this is not mobile');\n // }\n\n\n // modify its size \n // }\n\n\n\n\n\n\n updateFSmobile(id) {\n\n // if (window.PMpageSupport.isMobile) {\n\n if (true) {\n\n console.log('mobile fullscreen for :' + id);\n\n // will need to update this selector ? for ID specific?\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 // *** start here ***\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 Array.from(contr.children).filter(function (child) {\n return (child.dataset.plyr === \"fullscreen\")\n }).forEach(function (child) {\n\n\n child.addEventListener('click', (contrIn) => {\n\n var contrIn = document.querySelector(\"div.plyr__controls\");\n\n Array.from(contrIn.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\n\n });\n\n\n\n\n }\n }\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Player);\n\n//# sourceURL=webpack://practisemaster/./src/modules/player-pm.js?");
|
|
194
194
|
|
|
195
195
|
/***/ }),
|
|
196
196
|
|
|
@@ -201,7 +201,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
201
201
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
202
202
|
|
|
203
203
|
"use strict";
|
|
204
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _player_pm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./player-pm */ \"./src/modules/player-pm.js\");\n/**\n * module allows for the newing of a PractiseMaster class \n * a global window.PractiseMaster is created\n * \n * @module PractiseMaster Module\n * @requires Player Module\n * @requires PageSupport Module\n */\n\n\n\n\n\n\n/**\n * entry point for PractiseMaster js plugin: new PractiseMaster();\n * @class PractiseMaster\n * @property {mehtod} globals() - returns window.PractiseMaster\n * @property {method} player() - news up a Player class for each pm class element\n * @property {declaration} getElementsByClassName(\"pm\") - Elements to update with a player \n * @property {declaration} getElementsByClassName(\"pmlinkbuilder\") - Elements to update with a player \n * @property {class} PageSupport(siteCSS) - news this up with any site specific css\n * @property {object} siteCSS - an object for css specific to the host site (ex WordPress)\n * @property {string} version - semver for PractiseMaster\n */\n\nclass PractiseMaster {\n\n constructor() {\n\n\n\n\n\n this.version = '1.0.14';\n\n\n\n // will try with pm-linkediter to override this setter with \n // document.querySelector('div.pm') or if can \n // document.querySelector('pm-linkeditor > div.pm')\n\n this.
|
|
204
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _player_pm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./player-pm */ \"./src/modules/player-pm.js\");\n/**\n * module allows for the newing of a PractiseMaster class \n * a global window.PractiseMaster is created\n * \n * @module PractiseMaster Module\n * @requires Player Module\n * @requires PageSupport Module\n */\n\n\n\n\n\n\n/**\n * entry point for PractiseMaster js plugin: new PractiseMaster();\n * @class PractiseMaster\n * @property {mehtod} globals() - returns window.PractiseMaster\n * @property {method} player() - news up a Player class for each pm class element\n * @property {declaration} getElementsByClassName(\"pm\") - Elements to update with a player \n * @property {declaration} getElementsByClassName(\"pmlinkbuilder\") - Elements to update with a player \n * @property {class} PageSupport(siteCSS) - news this up with any site specific css\n * @property {object} siteCSS - an object for css specific to the host site (ex WordPress)\n * @property {string} version - semver for PractiseMaster\n */\n\nclass PractiseMaster {\n\n constructor(pmWC) {\n\n\n\n\n\n this.version = '1.0.14';\n\n\n\n // will try with pm-linkediter to override this setter with \n // document.querySelector('div.pm') or if can \n // document.querySelector('pm-linkeditor > div.pm')\n\n this.pmElement = pmWC.querySelector('*.pm');\n\n this.PMchapter;\n\n this.PMloop;\n\n\n this.player(this.pmElement);\n\n this.globals();\n\n\n }\n\n\n\n /**\n * instantiates any global variables from the PractiseMaster class\n * @method\n */\n\n\n globals() {\n\n // window.PractiseMaster.PMloop = function (id, startTime, endTime) { return window.PractiseMaster.PageSupport.PMloop(id, startTime, endTime) };\n // window.PractiseMaster.PMchapter = function (id, startTime, endTime) { return window.PractiseMaster.PageSupport.PMloop(id, startTime, endTime) };\n\n }\n\n\n\n /**\n * news-up a Player class for each of [PMelements]\n * @method\n */\n\n\n player(el) {\n\n console.log(\"+\" + this.pmElement.id + \" 'pm' video or audio players created\");\n\n // this.pmElements.forEach((el) => {\n\n // Array.from(this.pmElements).forEach((el) => {\n // // Do stuff here\n // console.log(el.tagName);\n\n // this[\"PM_\" + el.id] = new Player(el);\n\n // });\n\n // this[\"PM_\" + el.id] = new Player(el);\n\n new _player_pm__WEBPACK_IMPORTED_MODULE_0__[\"default\"](el);\n }\n\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PractiseMaster);\n\n//# sourceURL=webpack://practisemaster/./src/modules/practiseMaster.js?");
|
|
205
205
|
|
|
206
206
|
/***/ }),
|
|
207
207
|
|
|
@@ -212,7 +212,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
212
212
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
213
213
|
|
|
214
214
|
"use strict";
|
|
215
|
-
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
|
|
215
|
+
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 _pageSupport_pm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./pageSupport-pm */ \"./src/modules/pageSupport-pm.js\");\n/* harmony import */ var _practiseMaster__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./practiseMaster */ \"./src/modules/practiseMaster.js\");\n/**\n * module allows for the newing of a PractiseMaster class \n * a global window.PractiseMaster is created\n * \n * @module PractiseMaster Module\n * @requires Player Module\n * @requires PageSupport Module\n */\n\n\n\n\n\n\n/**\n * entry point for PractiseMaster js plugin: new PractiseMaster();\n * @class PractiseMaster\n * @property {mehtod} globals() - returns window.PractiseMaster\n * @property {method} player() - news up a Player class for each pm class element\n * @property {declaration} getElementsByClassName(\"pm\") - Elements to update with a player \n * @property {declaration} getElementsByClassName(\"pmlinkbuilder\") - Elements to update with a player \n * @property {class} PageSupport(siteCSS) - news this up with any site specific css\n * @property {object} siteCSS - an object for css specific to the host site (ex WordPress)\n */\n\nclass PractiseMasterWebComp extends HTMLElement {\n\n // static observedAttributes = [\"color\", \"size\"];\n\n\n constructor() {\n\n // Always call super first in constructor\n super();\n\n // to hold elements for player()\n // with WebComponenet will only be one (no longer array)\n\n this.pmElement;\n\n }\n\n\n connectedCallback() {\n\n this.initialiseContainers();\n\n }\n\n\n\n /**\n * As a temp solution to Plyr not taking P-M custom elements\n * @method\n */\n\n initialiseContainers() {\n\n\n // const PMwebcomp = document.querySelectorAll(\"practise-master\");\n\n\n // // check user has added data attributes\n\n\n if (this.dataset.plyrProvider !== 'mp3' && this.dataset.plyrProvider !== 'mp4') {\n if ((!this.hasAttribute(\"data-plyr-embed-id\") || !this.hasAttribute(\"data-plyr-provider\"))) {\n // data attribute doesn't exist\n\n\n const errorText = `Error: each <practise-master> needs both 'data-plyr-embed-id' and 'data-plyr-provider' `;\n\n this.textContent = errorText;\n\n throw new Error(errorText);\n\n }\n }\n\n\n function cloneRemoveAttributes(target, source) {\n\n [...source.attributes].forEach(attr => { target.setAttribute(attr.nodeName, attr.nodeValue); source.removeAttribute(attr.name) });\n\n }\n\n\n function replaceWithDiv(node) {\n\n var pmdiv = document.createElement('div');\n\n cloneRemoveAttributes(pmdiv, node);\n\n node.classList.add('container');\n\n pmdiv.classList.add('pm');\n\n node.appendChild(pmdiv);\n\n }\n\n\n function replaceWithVideo(node) {\n\n\n var pmdiv = document.createElement('video');\n\n cloneRemoveAttributes(pmdiv, node);\n\n node.classList.add('container');\n\n pmdiv.classList.add('pm');\n\n // also need to copy all children to the new node\n // https://stackoverflow.com/a/56307130/2455159\n\n pmdiv.append(...node.childNodes);\n\n node.appendChild(pmdiv);\n\n }\n\n\n function replaceWithAudio(node) {\n\n\n var pmdiv = document.createElement('audio');\n\n cloneRemoveAttributes(pmdiv, node);\n\n node.classList.add('container');\n\n pmdiv.classList.add('pm');\n\n // also need to copy all children to the new node\n // https://stackoverflow.com/a/56307130/2455159\n\n pmdiv.append(...node.childNodes);\n\n node.appendChild(pmdiv);\n\n }\n\n\n\n\n\n if (this.dataset.plyrProvider === 'vimeo' || this.dataset.plyrProvider === 'youtube') {\n\n replaceWithDiv(this);\n\n } else if (this.dataset.plyrProvider === 'mp4') {\n\n replaceWithVideo(this);\n\n } else if (this.dataset.plyrProvider === 'mp3') {\n\n replaceWithAudio(this);\n\n }\n\n\n\n\n // then need to new up a PractiseMaster class\n // only want one of these (per page) once init'd then pass array of elements then call PM.player()\n\n window.PMpageSupport = new _pageSupport_pm__WEBPACK_IMPORTED_MODULE_0__[\"default\"]();\n window.PractiseMaster = new _practiseMaster__WEBPACK_IMPORTED_MODULE_1__[\"default\"](this);\n\n\n }\n\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PractiseMasterWebComp);\n\n//# sourceURL=webpack://practisemaster/./src/modules/practisemasterWebComponent.js?");
|
|
216
216
|
|
|
217
217
|
/***/ }),
|
|
218
218
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "practisemaster",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.27",
|
|
4
4
|
"description": "This is the PractiseMaster repo, treat it with respect! [](https://gitpod.io/#https://github.com/StephanLuis/PractiseMaster)",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"input-duration": "^2.2.3",
|