practisemaster 1.0.31 → 1.0.32
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 +4 -4
- 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// __ __ ___ ___ __ ___ __ ___ \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
|
|
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\n\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
|
|
|
@@ -157,7 +157,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
157
157
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
158
158
|
|
|
159
159
|
"use strict";
|
|
160
|
-
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 _practiseMaster__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./practiseMaster */ \"./src/modules/practiseMaster.js\");\n\n\nconst template = document.createElement(\"template\");\ntemplate.innerHTML = /*html*/`\n<style>\n\n\ninput,\n textarea,\n select {\n all: revert;\n }\n</style>\n<div id =\"lbContainerIn\">\n<div id=\"pmHeader\">\n <h1 >PractiseMaster Precision Loop Editor</h1>\n <br>\n <br>\n <br>\n </div>\n \n <h3> Step 0 (Optional): Install Link Builder</h3>\n <br>\n <div>See instruction to install PM (link), simplified copy the script tag to webpage (or its masterpage)</div>\n <br><br>\n <label for=\"jsURLdisplay\">Script Tag</label>\n <input style=\"width: -webkit-fill-available;\" id=\"jsURLdisplay\" disabled value=\"<script type='module' src='https://cdn.jsdelivr.net/npm/practisemaster@latest/dist/PMbundle.js'></script>\">\n <input type=\"button\" value=\"Copy\" onclick= \"navigator.clipboard.writeText(this.previousElementSibling.value)\">\n <br><br>\n and add a pm-linkediter element to the webpage\n <br><br>\n <label for=\"linkBuilderDisplay\">Video Embed</label>\n <input style=\"width: -webkit-fill-available;\" id=\"linkBuilderDisplay\" disabled value=\"<pm-linkediter></pm-linkediter>\" >\n <input type=\"button\" value=\"Copy\" onclick= \"navigator.clipboard.writeText(this.previousElementSibling.value)\">\n <br><br>\n\n <div> or try non dom locked videos here.</div>\n <br><br>\n <h3> Step 1: Select Source</h3>\n \n <fieldset>\n <legend>Please select your preferred video/audio source:</legend>\n <div>\n <input type=\"radio\" id=\"source1\" name=\"source\" value=\"vimeo\" />\n <label for=\"source1\">Vimeo</label>\n <input type=\"radio\" id=\"source2\" name=\"source\" value=\"youtube\" />\n <label for=\"source2\">YouTube</label>\n \n </div>\n <label for=\"providerVidID\">YouTube or Vimeo ID</label>\n <input id=\"providerVidID\" type=\"text\">\n <div>\n <br> \n <div>\n <input type=\"radio\" id=\"source3\" name=\"source\" value=\"MP4\" />\n <label for=\"source3\">MP4</label>\n <input type=\"radio\" id=\"source4\" name=\"source\" value=\"MP3\" />\n <label for=\"source4\">MP3</label>\n <input type=\"radio\" id=\"source3\" name=\"source\" value=\"OGG\" />\n <label for=\"source3\">OGG</label>\n </div>\n <label for=\"sourceURL\">Hosted Source</label>\n <input id=\"sourceURL\" type=\"text\"> (Public URL)\n <div>\n <br>\n <button id=\"doMine\">Start Video</button> <button id=\"refresh\" onclick=\"location.reload();\">Clear Player & Start Again</button>\n </div>\n <br>\n <br>\n <fieldset>\n <div>\n If you need sources to try:\n <ul>\n <li>Vimeo: 650483703 <button class=\"demoButton\" id=\"demoVimeoB\">Start Vimeo</button>\n <li>YouTube: Ve_iBdF9mF0 <button class=\"demoButton\" id=\"demoYTB\">Start YouTube</button>\n <li>MP4 Video: https://cdnpmvideoaudioendpoint-h3efathnece6dngs.z01.azurefd.net/pmcontainer/diyPopFullSize.mp4 <button class=\"demoButton\" id=\"demoMP4B\">Start MP4</button>\n <li>MP3 Audio: https://cdnpmvideoaudioendpoint-h3efathnece6dngs.z01.azurefd.net/pmcontainer/diyPop.mp3 <button class=\"demoButton\" id=\"demoMP3B\">Start MP3</button>\n </ul>\n </div>\n </fieldset>\n </fieldset>\n \n\n\n <div id=\"copyInputDiv\"style=\"display: none;\" >\n\n <br>\n <br>\n <br>\n\n <h3 id=\"step2\"> Step 2: Copy video embed </h3>\n <label for=\"vidDivDisplay\">Video Embed</label>\n <input style=\"width: -webkit-fill-available;\" id=\"vidDivDisplay\" disabled >\n <br>\n <br>\n <br>\n <h3>Step 3: Code Loops (<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>).</h1>\n <p>Set loop times and click link button</p>\n <br>\n <br>\n <br>\n </div>\n </div>\n `\n\nclass linkEditorWebComponent extends HTMLElement {\n constructor() {\n\n // Always call super first in constructor\n super();\n\n\n // 19 Jan\n // this.pmElements = [];\n\n this.myElement = this.attachShadow({ mode: 'open' });\n\n \n this.initialiseContainers();\n\n }\n\n initialiseContainers() {\n\n // add a wrapper div to <pm-linkediter>\n\n // element that will be wrapped\n var el = document.querySelector('pm-linkediter');\n\n // create wrapper container\n var wrapper = document.createElement('div');\n\n wrapper.id = 'lbContainerOut';\n\n // insert wrapper before el in the DOM tree\n el.parentNode.insertBefore(wrapper, el);\n\n // move el into wrapper\n wrapper.appendChild(el);\n\n }\n\n // end constructor\n\n\n connectedCallback() {\n\n\n\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n\n this.startLinkBuilder();\n\n\n // initialiseContainers should have popluated\n\n \n\n }\n\n\n startLinkBuilder() {\n\n this.addDoMineButtonListener();\n\n this.addDoDemosButtonListener();\n\n }\n\n\n addDoMineButtonListener() {\n\n // 'submit' from the LoopBuilder form\n\n const button = this.myElement.querySelector(\"#doMine\");\n\n button.addEventListener(\n \"click\",\n (event) => {\n\n\n //create new div to replicate \n // and place it after .container\n\n // radio button for source type ex MP4, MP3\n\n const radioButtons = this.myElement.querySelectorAll('input[name=\"source\"]');\n\n\n // text box value for youtube / vimeo id\n\n const vidID = this.myElement.querySelector('#providerVidID').value.trim();\n\n\n // text box for source url (mp4/mp3)\n\n const sourceURL = this.myElement.querySelector('#sourceURL').value.trim();\n\n\n let choice;\n\n for (const radioButton of radioButtons) {\n if (radioButton.checked) {\n choice = radioButton.value;\n break;\n }\n }\n\n\n // html for player and for user to copy\n\n var htmlLitPage;\n\n if (choice === 'MP4') {\n\n htmlLitPage = `<video id=\"myMP4\" class=\"pm links\" controls crossorigin playsinline> <source src=\"${sourceURL}\" type=\"video/mp4\"> <!-- Fallback for browsers that don't support the <video> element -->\n <a href=\"${sourceURL}\" download>Download</a> </video>`;\n\n }\n\n else if (choice === 'MP3') {\n\n htmlLitPage = `<audio id=\"myMP3\" class=\"pm links\" crossorigin playsinline> <source src=\"${sourceURL}\" type=\"audio/mp3\"> </audio> `;\n\n }\n\n else if (choice === 'OGG') {\n\n htmlLitPage = `<audio id=\"myOGG\" class=\"pm links\" crossorigin playsinline> <source src=\"${sourceURL}\" type=\"audio/ogg\"> </audio> `;\n\n }\n\n else {\n\n htmlLitPage = `\n <div id=\"${choice}_${vidID}\" class=\"pm links\" data-plyr-provider=\"${choice}\" data-plyr-embed-id=\"${vidID}\"></div>\n `;\n\n }\n\n\n this.postOnPage(htmlLitPage);\n\n\n event.preventDefault();\n\n\n this.startAndShow();\n\n },\n\n false\n );\n }\n\n\n\n\n addDoDemosButtonListener() {\n\n // 'submit' from the LoopBuilder form\n\n const buttons = this.myElement.querySelectorAll(\"button.demoButton\");\n\n buttons.forEach(button =>\n\n button.addEventListener(\n \"click\",\n (event) => {\n //create new div to replicate \n // and place it after .container\n\n const vimeoID = '650483703';\n const YTubeID = 'Ve_iBdF9mF0';\n const MP3url = 'https://cdnpmvideoaudioendpoint-h3efathnece6dngs.z01.azurefd.net/pmcontainer/diyPop.mp3';\n const MP4url = 'https://cdnpmvideoaudioendpoint-h3efathnece6dngs.z01.azurefd.net/pmcontainer/diyPopFullSize.mp4';\n\n\n var htmlLitPage;\n\n if (button.id === 'demoMP4B') {\n\n htmlLitPage = `<video id=\"demoMP4\" class=\"pm links\" controls crossorigin playsinline> <source src=\"${MP4url}\" type=\"video/mp4\"> <!-- Fallback for browsers that don't support the <video> element --> <a href=\"${MP4url}\" download>Download</a> </video>\n\n `;\n\n }\n\n else if (button.id === 'demoMP3B') {\n\n htmlLitPage = `<audio id=\"demoMP3\" class=\"pm links\" crossorigin playsinline> <source src=\"${MP3url}\" type=\"audio/mp3\"> </audio> `;\n\n }\n\n\n else if (button.id === 'demoVimeoB') {\n\n htmlLitPage = `<div id=\"Vimeo_650483703\" class=\"pm links\" data-plyr-provider=\"vimeo\" data-plyr-embed-id=\"650483703\"></div>`;\n\n\n }\n\n else if (button.id === 'demoYTB') {\n\n htmlLitPage = ` <div id=\"YouTube_Ve_iBdF9mF0\" class=\"pm links\" data-plyr-provider=\"youtube\" data-plyr-embed-id=\"Ve_iBdF9mF0\"></div> `;\n\n\n }\n\n\n this.postOnPage(htmlLitPage);\n\n\n this.startAndShow();\n\n\n event.preventDefault();\n\n },\n\n\n false\n\n )\n );\n }\n\n postOnPage(litHTML) {\n\n // should refactor from here! to end\n\n // for the textbox (user's code) need to remove the links class\n\n var htmlLitTextBox = litHTML.replace(' links', '');\n\n\n // add video player to page\n\n document.querySelector('#lbContainerOut').insertAdjacentHTML('beforeend', litHTML);\n\n \n\n // this is the container for step 2\n this.myElement.querySelector('#copyInputDiv').style.display = \"block\";\n\n\n // add disabled text box to display link code\n var vidDivDisplay = this.myElement.querySelector(\"#vidDivDisplay\");\n\n\n vidDivDisplay.value = htmlLitTextBox;\n\n\n // add button to copy loop link code \n\n var vidDivCopyButtonLit = `<input id=\"copyVidDiv\" type=\"button\" onclick=\"((event) => {navigator.clipboard.writeText(document.querySelector('pm-linkediter').shadowRoot.querySelector('#vidDivDisplay').value);})()\" value=\"Copy Video Div\">`;\n\n vidDivDisplay.insertAdjacentHTML('afterend', vidDivCopyButtonLit);\n\n }\n\n\n startAndShow() {\n\n\n // override Class property\n\n window.PractiseMaster.pmElements = document.querySelectorAll('div.pm');\n \n // start practisemaster\n window.PractiseMaster.player();\n\n // scroll to step 2 for the user\n\n document.querySelector(\"pm-linkediter\").shadowRoot.querySelector(\"#step2\").scrollIntoView({ behavior: 'smooth' });\n\n\n }\n\n}\n// end class\n\n\n//export default customElements.define('PM-LinkEditer', PMLinkEditerWebComp);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (linkEditorWebComponent);\n\n\n\n//# sourceURL=webpack://practisemaster/./src/modules/linkEditorWebComponent.js?");
|
|
160
|
+
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 _practiseMaster__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./practiseMaster */ \"./src/modules/practiseMaster.js\");\n/* harmony import */ var _pageSupport_pm__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./pageSupport-pm */ \"./src/modules/pageSupport-pm.js\");\n\n\n\nconst template = document.createElement(\"template\");\ntemplate.innerHTML = /*html*/`\n<style>\n\n\ninput,\n textarea,\n select {\n all: revert;\n }\n</style>\n<div id =\"lbContainerIn\">\n<div id=\"pmHeader\">\n <h1 >PractiseMaster Precision Loop Editor</h1>\n <br>\n <br>\n <br>\n </div>\n \n <h3> Step 0 (Optional): Install Link Builder</h3>\n <br>\n <div>See instruction to install PM (link), simplified copy the script tag to webpage (or its masterpage)</div>\n <br><br>\n <label for=\"jsURLdisplay\">Script Tag</label>\n <input style=\"width: -webkit-fill-available;\" id=\"jsURLdisplay\" disabled value=\"<script type='module' src='https://cdn.jsdelivr.net/npm/practisemaster@latest/dist/PMbundle.js'></script>\">\n <input type=\"button\" value=\"Copy\" onclick= \"navigator.clipboard.writeText(this.previousElementSibling.value)\">\n <br><br>\n and add a pm-linkediter element to the webpage\n <br><br>\n <label for=\"linkBuilderDisplay\">Video Embed</label>\n <input style=\"width: -webkit-fill-available;\" id=\"linkBuilderDisplay\" disabled value=\"<pm-linkediter></pm-linkediter>\" >\n <input type=\"button\" value=\"Copy\" onclick= \"navigator.clipboard.writeText(this.previousElementSibling.value)\">\n <br><br>\n\n <div> or try non dom locked videos here.</div>\n <br><br>\n <h3> Step 1: Select Source</h3>\n \n <fieldset>\n <legend>Please select your preferred video/audio source:</legend>\n <div>\n <input type=\"radio\" id=\"source1\" name=\"source\" value=\"vimeo\" />\n <label for=\"source1\">Vimeo</label>\n <input type=\"radio\" id=\"source2\" name=\"source\" value=\"youtube\" />\n <label for=\"source2\">YouTube</label>\n \n </div>\n <label for=\"providerVidID\">YouTube or Vimeo ID</label>\n <input id=\"providerVidID\" type=\"text\">\n <div>\n <br> \n <div>\n <input type=\"radio\" id=\"source3\" name=\"source\" value=\"MP4\" />\n <label for=\"source3\">MP4</label>\n <input type=\"radio\" id=\"source4\" name=\"source\" value=\"MP3\" />\n <label for=\"source4\">MP3</label>\n <input type=\"radio\" id=\"source3\" name=\"source\" value=\"OGG\" />\n <label for=\"source3\">OGG</label>\n </div>\n <label for=\"sourceURL\">Hosted Source</label>\n <input id=\"sourceURL\" type=\"text\"> (Public URL)\n <div>\n <br>\n <button id=\"doMine\">Start Video</button> <button id=\"refresh\" onclick=\"location.reload();\">Clear Player & Start Again</button>\n </div>\n <br>\n <br>\n <fieldset>\n <div>\n If you need sources to try:\n <ul>\n <li>Vimeo: 650483703 <button class=\"demoButton\" id=\"demoVimeoB\">Start Vimeo</button>\n <li>YouTube: Ve_iBdF9mF0 <button class=\"demoButton\" id=\"demoYTB\">Start YouTube</button>\n <li>MP4 Video: https://cdnpmvideoaudioendpoint-h3efathnece6dngs.z01.azurefd.net/pmcontainer/diyPopFullSize.mp4 <button class=\"demoButton\" id=\"demoMP4B\">Start MP4</button>\n <li>MP3 Audio: https://cdnpmvideoaudioendpoint-h3efathnece6dngs.z01.azurefd.net/pmcontainer/diyPop.mp3 <button class=\"demoButton\" id=\"demoMP3B\">Start MP3</button>\n </ul>\n </div>\n </fieldset>\n </fieldset>\n \n\n\n <div id=\"copyInputDiv\"style=\"display: none;\" >\n\n <br>\n <br>\n <br>\n\n <h3 id=\"step2\"> Step 2: Copy video embed </h3>\n <label for=\"vidDivDisplay\">Video Embed</label>\n <input style=\"width: -webkit-fill-available;\" id=\"vidDivDisplay\" disabled >\n <br>\n <br>\n <br>\n <h3>Step 3: Code Loops (<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>).</h1>\n <p>Set loop times and click link button</p>\n <br>\n <br>\n <br>\n </div>\n </div>\n `\n\nclass linkEditorWebComponent extends HTMLElement {\n constructor() {\n\n // Always call super first in constructor\n super();\n\n\n // 19 Jan\n // this.pmElements = [];\n\n this.myElement = this.attachShadow({ mode: 'open' });\n\n \n this.initialiseContainers();\n\n }\n\n initialiseContainers() {\n\n // add a wrapper div to <pm-linkediter>\n\n // element that will be wrapped\n var el = document.querySelector('pm-linkediter');\n\n // create wrapper container\n var wrapper = document.createElement('div');\n\n wrapper.id = 'lbContainerOut';\n\n // insert wrapper before el in the DOM tree\n el.parentNode.insertBefore(wrapper, el);\n\n // move el into wrapper\n wrapper.appendChild(el);\n\n window.PMpageSupport = new _pageSupport_pm__WEBPACK_IMPORTED_MODULE_1__[\"default\"]();\n window.PractiseMaster = new _practiseMaster__WEBPACK_IMPORTED_MODULE_0__[\"default\"](this);\n\n\n \n }\n\n // end constructor\n\n\n connectedCallback() {\n\n\n\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n\n this.startLinkBuilder();\n\n\n // initialiseContainers should have popluated\n\n \n\n }\n\n\n startLinkBuilder() {\n\n this.addDoMineButtonListener();\n\n this.addDoDemosButtonListener();\n\n }\n\n\n addDoMineButtonListener() {\n\n // 'submit' from the LoopBuilder form\n\n const button = this.myElement.querySelector(\"#doMine\");\n\n button.addEventListener(\n \"click\",\n (event) => {\n\n\n //create new div to replicate \n // and place it after .container\n\n // radio button for source type ex MP4, MP3\n\n const radioButtons = this.myElement.querySelectorAll('input[name=\"source\"]');\n\n\n // text box value for youtube / vimeo id\n\n const vidID = this.myElement.querySelector('#providerVidID').value.trim();\n\n\n // text box for source url (mp4/mp3)\n\n const sourceURL = this.myElement.querySelector('#sourceURL').value.trim();\n\n\n let choice;\n\n for (const radioButton of radioButtons) {\n if (radioButton.checked) {\n choice = radioButton.value;\n break;\n }\n }\n\n\n // html for player and for user to copy\n\n var htmlLitPage;\n\n if (choice === 'MP4') {\n\n htmlLitPage = `<video id=\"myMP4\" class=\"pm links\" controls crossorigin playsinline> <source src=\"${sourceURL}\" type=\"video/mp4\"> <!-- Fallback for browsers that don't support the <video> element -->\n <a href=\"${sourceURL}\" download>Download</a> </video>`;\n\n }\n\n else if (choice === 'MP3') {\n\n htmlLitPage = `<audio id=\"myMP3\" class=\"pm links\" crossorigin playsinline> <source src=\"${sourceURL}\" type=\"audio/mp3\"> </audio> `;\n\n }\n\n else if (choice === 'OGG') {\n\n htmlLitPage = `<audio id=\"myOGG\" class=\"pm links\" crossorigin playsinline> <source src=\"${sourceURL}\" type=\"audio/ogg\"> </audio> `;\n\n }\n\n else {\n\n htmlLitPage = `\n <div id=\"${choice}_${vidID}\" class=\"pm links\" data-plyr-provider=\"${choice}\" data-plyr-embed-id=\"${vidID}\"></div>\n `;\n\n }\n\n\n this.postOnPage(htmlLitPage);\n\n\n event.preventDefault();\n\n\n this.startAndShow();\n\n },\n\n false\n );\n }\n\n\n\n\n addDoDemosButtonListener() {\n\n // 'submit' from the LoopBuilder form\n\n const buttons = this.myElement.querySelectorAll(\"button.demoButton\");\n\n buttons.forEach(button =>\n\n button.addEventListener(\n \"click\",\n (event) => {\n //create new div to replicate \n // and place it after .container\n\n const vimeoID = '650483703';\n const YTubeID = 'Ve_iBdF9mF0';\n const MP3url = 'https://cdnpmvideoaudioendpoint-h3efathnece6dngs.z01.azurefd.net/pmcontainer/diyPop.mp3';\n const MP4url = 'https://cdnpmvideoaudioendpoint-h3efathnece6dngs.z01.azurefd.net/pmcontainer/diyPopFullSize.mp4';\n\n\n var htmlLitPage;\n\n if (button.id === 'demoMP4B') {\n\n htmlLitPage = `<video id=\"demoMP4\" class=\"pm links\" controls crossorigin playsinline> <source src=\"${MP4url}\" type=\"video/mp4\"> <!-- Fallback for browsers that don't support the <video> element --> <a href=\"${MP4url}\" download>Download</a> </video>\n\n `;\n\n }\n\n else if (button.id === 'demoMP3B') {\n\n htmlLitPage = `<audio id=\"demoMP3\" class=\"pm links\" crossorigin playsinline> <source src=\"${MP3url}\" type=\"audio/mp3\"> </audio> `;\n\n }\n\n\n else if (button.id === 'demoVimeoB') {\n\n htmlLitPage = `<div id=\"Vimeo_650483703\" class=\"pm links\" data-plyr-provider=\"vimeo\" data-plyr-embed-id=\"650483703\"></div>`;\n\n\n }\n\n else if (button.id === 'demoYTB') {\n\n htmlLitPage = ` <div id=\"YouTube_Ve_iBdF9mF0\" class=\"pm links\" data-plyr-provider=\"youtube\" data-plyr-embed-id=\"Ve_iBdF9mF0\"></div> `;\n\n\n }\n\n\n this.postOnPage(htmlLitPage);\n\n\n this.startAndShow();\n\n\n event.preventDefault();\n\n },\n\n\n false\n\n )\n );\n }\n\n postOnPage(litHTML) {\n\n // should refactor from here! to end\n\n // for the textbox (user's code) need to remove the links class\n\n var htmlLitTextBox = litHTML.replace(' links', '');\n\n\n // add video player to page\n\n document.querySelector('#lbContainerOut').insertAdjacentHTML('beforeend', litHTML);\n\n \n\n // this is the container for step 2\n this.myElement.querySelector('#copyInputDiv').style.display = \"block\";\n\n\n // add disabled text box to display link code\n var vidDivDisplay = this.myElement.querySelector(\"#vidDivDisplay\");\n\n\n vidDivDisplay.value = htmlLitTextBox;\n\n\n // add button to copy loop link code \n\n var vidDivCopyButtonLit = `<input id=\"copyVidDiv\" type=\"button\" onclick=\"((event) => {navigator.clipboard.writeText(document.querySelector('pm-linkediter').shadowRoot.querySelector('#vidDivDisplay').value);})()\" value=\"Copy Video Div\">`;\n\n vidDivDisplay.insertAdjacentHTML('afterend', vidDivCopyButtonLit);\n\n }\n\n\n startAndShow() {\n\n\n // override Class property\n\n window.PractiseMaster.pmElements = document.querySelectorAll('div.pm');\n \n // start practisemaster\n window.PractiseMaster.player();\n\n // scroll to step 2 for the user\n\n document.querySelector(\"pm-linkediter\").shadowRoot.querySelector(\"#step2\").scrollIntoView({ behavior: 'smooth' });\n\n\n }\n\n}\n// end class\n\n\n//export default customElements.define('PM-LinkEditer', PMLinkEditerWebComp);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (linkEditorWebComponent);\n\n\n\n//# sourceURL=webpack://practisemaster/./src/modules/linkEditorWebComponent.js?");
|
|
161
161
|
|
|
162
162
|
/***/ }),
|
|
163
163
|
|
|
@@ -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 // window['PMinstance_Hplayer']\n\n\n const currentTime = window[\"PMinstance_\" + id].plyrInstance.currentTime;\n window[\"PMinstance_\" + id].loop.startTimeSeconds = currentTime;\n\n\n // trims string for mobile devices, where input time is updated to input string\n\n document.querySelector(\"#\" + id + \"_timeStart\").value = window.PMpageSupport.helpers.toStringTime(currentTime);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n\n /**\n * event listener reduces start time\n * @listens click event of *_subtrTimeStart \n * @param {event} e unused\n */\n\n subtrTimeStart(e) {\n\n // 'this' is button so\n const id = this.id.replace('_subtrTimeStart', '');\n\n\n console.log(\"Hey, I'll subtract time start for player: \" + id);\n\n\n /// update loop object\n\n var inputTimeFloat = window[\"PMinstance_\" + id].loop.startTimeSeconds / 10000 - 0.25 > 0 ? window[\"PMinstance_\" + id].loop.startTimeSeconds / 10000 - 0.25 : 0;\n\n window[\"PMinstance_\" + id].loop.startTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window[\"PMinstance_\" + id].plyrInstance.pause();\n\n window[\"PMinstance_\" + id].plyrInstance.currentTime = inputTimeFloat;\n\n\n\n document.querySelector(\"#\" + id + \"_timeStart\").value = window.PMpageSupport.helpers.toStringTime(inputTimeFloat);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n /**\n * event listener increases start time\n * @listens click event of *_addTimeStart \n * @param {event} e unused\n */\n\n addTimeStart(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_addTimeStart', '');\n\n\n console.log(\"Hey, I'll add time end for player: \" + id);\n\n\n /// update loop object\n\n var inputTimeFloat = window[\"PMinstance_\" + id].loop.startTimeSeconds / 10000 + 0.25;\n\n\n window[\"PMinstance_\" + id].loop.startTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window[\"PMinstance_\" + id].plyrInstance.pause();\n\n window[\"PMinstance_\" + id].plyrInstance.currentTime = inputTimeFloat;\n\n\n document.querySelector(\"#\" + id + \"_timeStart\").value = window.PMpageSupport.helpers.toStringTime(inputTimeFloat);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n\n /**\n * event listener for <input type=\"time\"> or chronlyHMS updating start time\n * @listens keyup event of *_timeStart\n * @param {e} event \n */\n\n timeStart(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_timeStart', '');\n\n console.log(\"Hey, I'll digit adjust the start time for player: \" + id);\n\n\n // update loop instance\n\n var startTimeString = this.value;\n\n\n // was toFloatSecs x2\n\n window[\"PMinstance_\" + id].loop.startTimeSeconds = window.PMpageSupport.helpers.secondsNumber(startTimeString);\n\n\n window[\"PMinstance_\" + id].plyrInstance.currentTime = window.PMpageSupport.helpers.secondsNumber(startTimeString);\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n\n }\n\n\n\n /**\n * event listener sets end time\n * @listens click event of *_nowTimeEnd \n * @param {event} e unused\n */\n\n setTimeEnd(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_nowTimeEnd', '');\n\n\n console.log(\"Hey, I'll set the end time for player: \" + id);\n\n\n // get current time of plyr\n\n // set loop end\n\n var currentTime = window[\"PMinstance_\" + id].plyrInstance.currentTime;\n\n\n window[\"PMinstance_\" + id].loop.endTimeSeconds = currentTime;\n\n\n // trims string for mobile devices, where input time is updated to input string\n\n document.querySelector(\"#\" + id + \"_timeEnd\").value = window.PMpageSupport.helpers.toStringTime(currentTime);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n\n /**\n * event listener reduces end time\n * @listens click event of *_subtrTimeEnd\n * @param {event} e unused\n */\n\n subtrTimeEnd(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_subtrTimeEnd', '');\n\n\n console.log(\"Hey, I'll subtract time end for player: \" + id);\n\n\n /// update loop object\n\n var inputTimeFloat = window[\"PMinstance_\" + id].loop.endTimeSeconds / 10000 - 0.25 > 0 ? window[\"PMinstance_\" + id].loop.endTimeSeconds / 10000 - 0.25 : 0;\n\n window[\"PMinstance_\" + id].loop.endTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window[\"PMinstance_\" + id].plyrInstance.pause();\n\n window[\"PMinstance_\" + id].plyrInstance.currentTime = inputTimeFloat;\n\n\n // trims string for mobile devices, where input time is updated to input string\n document.querySelector(\"#\" + id + \"_timeEnd\").value = window.PMpageSupport.helpers.toStringTime(inputTimeFloat);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n /**\n * event listener increases end time\n * @listens click event of *_addTimeEnd \n * @param {event} e unused\n */\n\n addTimeEnd(event) {\n\n // 'this' is button so\n\n const id = this.id.replace('_addTimeEnd', '');\n\n\n console.log(\"Hey, I'll add time end for player: \" + id);\n\n\n /// update loop object\n\n var inputTimeFloat = window[\"PMinstance_\" + id].loop.endTimeSeconds / 10000 + 0.25;\n\n\n window[\"PMinstance_\" + id].loop.endTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window[\"PMinstance_\" + id].plyrInstance.pause();\n\n\n window[\"PMinstance_\" + id].plyrInstance.currentTime = inputTimeFloat;\n\n\n document.querySelector(\"#\" + id + \"_timeEnd\").value = window.PMpageSupport.helpers.toStringTime(inputTimeFloat);\n\n\n //run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n /**\n * event listener for <input type=\"time\"> or chronlyHMS updating end time\n * @listens keyup event of *_timeEnd\n * @param {event} e unused \n */\n\n timeEnd(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_timeEnd', '');\n\n\n console.log(\"Hey, I'll digit adjust the end time for player: \" + id);\n\n\n var endTimeString = this.value;\n\n\n window[\"PMinstance_\" + id].loop.endTimeSeconds = window.PMpageSupport.helpers.secondsNumber(endTimeString);\n\n\n window[\"PMinstance_\" + id].plyrInstance.currentTime = window.PMpageSupport.helpers.secondsNumber(endTimeString);\n\n\n //run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n /**\n * event listener toggles on/off looping\n * @listens click event of *_onOff \n * @param {event} e unused\n */\n\n offToggle(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_onOff', '');\n\n\n console.log(\"Hey, I'll toggle off/on player: \" + id);\n\n\n // toggle the ui switch\n\n document.querySelector('#' + id + '_onOff > input').checked = !document.querySelector('#' + id + '_onOff > input').checked;\n\n // Get loop instance\n\n const loop = window[\"PMinstance_\" + id].loop;\n\n\n // toggle the loop object instance \n\n loop.off = !loop.off;\n\n console.log(\"The loop is now switched off: \" + loop.off);\n\n\n\n // warning and invalid states check\n // and further in own method \n\n if (!loop.off) {\n\n // run validation \n\n console.log('asking to run validation for' + id);\n\n if (window.PMpageSupport.helpers.redWarningValidation(id)) {\n\n\n window[\"PMinstance_\" + id].plyrInstance.pause();\n\n // turn looping off\n loop.off = !loop.off;\n\n // toggle switch back to off\n\n setTimeout(() => {\n document.querySelector('#' + id + '_onOff > input').checked = !document.querySelector('#' + id + '_onOff > input').checked;\n }, 500);\n\n }\n\n\n else {\n\n window[\"PMinstance_\" + id].plyrInstance.play();\n }\n\n }\n }\n\n\n\n /**\n * event listener for loopbuilder links\n * @listens click event of *_links \n * @param {event} e unused\n * @todo refactor this (and other button events and listeners) to the UIprep class\n */\n\n linkLoopOrChapter(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_links', '');\n\n\n console.log(\"Hey, I'll toggle off/on player: \" + id);\n\n\n // need helpers to convert seconds to time before sending to UI\n window[\"PMinstance_\" + id].uiPrep.addHTMLlink();\n\n }\n\n\n\n /**\n * statements that run after plyr 'ready' event for audio \n * @listens plyr ready\n * @param {string} id player/plyr/div id\n */\n\n setAudioListeners(id) {\n\n var closure = this;\n\n // Audio ready listener (PM will be slightly different)\n // window[\"PlyrAudio_\" + id].on('ready', event => {\n this.plyrInstance.on('ready', event => {\n\n console.log(\"Plyr audio says it's ready! id: \" + id);\n\n // need to 'add back' user's id to div because it's removed by plyr \n event.target.id = id;\n\n // also need to add back pm class because it is removed by plyr was: event.target.classList.add('pm');\n closure.CSSclasses.forEach(singleClass => event.target.classList.add(singleClass));\n\n\n // replaces old new PractiseMaster(), as that is already done:\n closure.HTMLControls(closure.id);\n closure.loop = new _loop_pm__WEBPACK_IMPORTED_MODULE_2__[\"default\"](closure.id);\n closure.chapter = new _chapter_pm__WEBPACK_IMPORTED_MODULE_3__[\"default\"](closure.id, 0, 0);\n\n console.log('duration at plyr ready: ' + closure.plyrInstance.duration);\n\n\n // set duration of loop \n\n // for html audio and video there can be lags between plyr ready and the video duration value being 'ready'\n // this promise on interval is based on https://stackoverflow.com/questions/17217736/while-loop-with-promises\n // and https://codepen.io/anon/pen/jzpZMa?editors=0011 \n\n\n const doSomething = value =>\n new Promise(resolve =>\n setTimeout(() => resolve(value >= 5 ? 'ok' : 'no'), 1000))\n\n const loop = async value => {\n let result = null\n while (result != 'ok') {\n console.log(value)\n result = await doSomething(value)\n value = closure.plyrInstance.duration\n }\n console.log('yay audio duration set')\n }\n\n loop(closure.plyrInstance.duration)\n .then(() => {\n window[\"PMinstance_\" + id].loop.videoDuration = closure.plyrInstance.duration;\n console.log('audio duration all done!');\n });\n\n\n\n\n\n\n\n // needs to be initialised first for duration promise in new Loop()\n window[\"PMinstance_\" + id];\n\n // make instance available as Global, needed for Loop and Chapter CSSclasses\n window[\"PMinstance_\" + id] = closure;\n\n this.uiPrep.addAudioStyle(id);\n\n });\n\n }\n\n\n\n /**\n * statements that run after plyr 'ready' event for audio \n * @listens plyr ready\n * @param {string} id player/plyr/div id\n */\n\n setVideoListeners(id) {\n\n\n var closure = this;\n\n\n this.plyrInstance.on('ready', event => {\n\n // need to be above the conditional duration blocks\n // needs to be initialised first for duration promise in new Loop()\n window[\"PMinstance_\" + id];\n\n // make instance available as Global, needed for Loop and Chapter CSSclasses\n window[\"PMinstance_\" + id] = closure;\n\n // need to 'add back' user's id to div because it's removed by plyr \n\n event.target.id = id;\n\n // also need to add back pm class because it is removed by plyr\n\n // event.target.classList.add('pm');\n\n closure.CSSclasses.forEach(singleClass => event.target.classList.add(singleClass));\n\n\n console.log(\"Plyr video says it's ready! id: \" + id);\n\n console.log(\"Player source is : \" + closure.plyrInstance.source);\n\n console.log(\"Player duration is : \" + closure.plyrInstance.duration);\n\n // replaces old new PractiseMaster(), as that is already done:\n closure.HTMLControls(id);\n closure.loop = new _loop_pm__WEBPACK_IMPORTED_MODULE_2__[\"default\"](closure.id);\n closure.chapter = new _chapter_pm__WEBPACK_IMPORTED_MODULE_3__[\"default\"](closure.id, 0, 0);\n\n\n\n // methods to set duration and css are different depending on Video type\n\n if (closure.plyrInstance.isVimeo) {\n\n\n closure.plyrInstance.embed.getDuration().then(function (duration) {\n // the player is ready\n\n console.log(\"This Vimeo getDuration: \" + duration + \" seconds long.\");\n\n closure.loop.videoDuration = duration;\n console.log('Vimeo player duration is ' + duration);\n\n // looks like this needs to go inside promise!\n\n console.log(\"going to call css FH w/in promise! \");\n\n });\n\n }\n\n else if (closure.plyrInstance.isHTML5) {\n\n\n // for html audio and video there can be lags between plyr ready and the video duration value being 'ready'\n // this promise on interval is based on https://stackoverflow.com/questions/17217736/while-loop-with-promises\n // and https://codepen.io/anon/pen/jzpZMa?editors=0011 \n\n\n const doSomething = value =>\n new Promise(resolve =>\n setTimeout(() => resolve(value >= 5 ? 'ok' : 'no'), 1000))\n\n const loop = async value => {\n let result = null\n while (result != 'ok') {\n console.log(value)\n result = await doSomething(value)\n value = closure.plyrInstance.duration\n }\n console.log('yay html video duration set')\n }\n\n loop(closure.plyrInstance.duration)\n .then(() => {\n window[\"PMinstance_\" + id].loop.videoDuration = closure.plyrInstance.duration;\n console.log('html video duration all done!');\n });\n\n\n\n }\n else {\n\n // for YouTube \n\n closure.loop.videoDuration = closure.plyrInstance.duration;\n\n console.log('Youtube player duration is ' + closure.plyrInstance.duration);\n\n }\n\n\n });\n\n };\n\n\n\n /**\n * statments to run after PM fires ready and controls are in place\n * @listens PM ready event \n */\n\n addPMReadyListeners() {\n\n // closure\n var player = this;\n\n window.addEventListener('pmControlsReady', function (e) {\n\n console.log('custom event received outside if, process(detail): ' + e.detail);\n\n\n if (e.detail === player.id) {\n\n\n console.log('custom event received INSIDE , process(detail): ' + e.detail);\n\n player.uiPrep.applyPMReadyCssHTMLSettings(player.id);\n\n\n\n // ChronlyHMS added to all players, inactive unless linkbuilder\n // the input-duration will be added in the HTML string literal\n\n\n // input-duration update\n\n player.uiPrep.styleInputDuration(player.id);\n\n\n\n // detect mobile devices and add callback to new fullScreen event\n // player.addMobileListeners(e.detail);\n\n\n // set up ChronlyHMS and link builder\n if (player.classList.contains('links')) {\n\n // this updates to LinkBuilder method\n player.uiPrep.addLinkButton(player.id);\n\n\n // audio links doesn't need off player controls\n // the rest of player types do\n\n if (player.plyrInstance.type === 'video') {\n\n player.uiPrep.offPlayerControls(player.id);\n\n }\n\n\n\n }\n else {\n\n // userChronly method in UIprep ChronlyHMS.disableInputs()\n\n // input-duration update, comment out:\n player.uiPrep.diableDurationInputs(player.id);\n\n }\n\n if (player.classList.contains('offScreen')) {\n\n // this updates to LinkBuilder method\n player.uiPrep.offPlayerControls(player.id);\n\n\n }\n\n console.log('plyr duration at PM ready: ' + player.plyrInstance.duration);\n // 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 && !this.plyrInstance.isAudio) {\n\n // if (true && !this.plyrInstance.isAudio) {\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 // *** 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 var fullScreenButton = document.querySelector('#' + id).querySelector(\"[data-plyr='fullscreen']\");\n\n\n fullScreenButton.addEventListener('click', () => {\n\n\n\n Array.from(fullScreenButton.parentElement.children).filter(function (child) {\n return !(child.dataset.plyr === \"fullscreen\")\n }).forEach(function (child) {\n\n var closeChild = child;\n\n if (closeChild.style.display === 'none') {\n\n closeChild.style.display = 'block';\n\n } else {\n\n closeChild.style.display = \"none\";\n }\n\n });\n\n });\n\n }\n }\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Player);\n\n//# sourceURL=webpack://practisemaster/./src/modules/player-pm.js?");
|
|
193
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var plyr__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! plyr */ \"./node_modules/plyr/dist/plyr.min.js\");\n/* harmony import */ var plyr__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(plyr__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var plyr_dist_plyr_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! plyr/dist/plyr.css */ \"./node_modules/plyr/dist/plyr.css\");\n/* harmony import */ var _loop_pm__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./loop-pm */ \"./src/modules/loop-pm.js\");\n/* harmony import */ var _chapter_pm__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./chapter-pm */ \"./src/modules/chapter-pm.js\");\n/* harmony import */ var _UIprep_pm__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./UIprep-pm */ \"./src/modules/UIprep-pm.js\");\n/**\n * an instance of Player is used for each video on the DOM\n * the Player class manages Plyr, Loop, Chapter, HTML and events.\n * the plyr ready event listener instantiats a global window[\"PMinstance_\" + id] that is used by loop and chapter CSS classes\n * that are injected later\n * @module Player Module\n * @requires Plyr Module\n * @requires Plyr CSS\n * @requires Loop Module\n * @requires Chapter Module\n * @requires UIprep Module\n */\n\n\n\n\n\n\n\n\n\n\n\n\n\n/**\n * adds PractiseMaster looping and chapter controls to Plyr\n * @class Player\n * @property {string} id from element\n * @property {class} plyrInstance from plyr module\n * @property {boolean} isStatic as marked by user\n * @property {obsolete} CSSclasses refactor to classList if possible and remove (used once)\n * @property {classlist} classList\n * @property {declaration} code block sets isStatic for given conditions\n * @property {declaration} code block creates audio or video plyr for given properties\n * @property {class} uiPrep a new uiPrep class\n * @property {class} loop a Loop class instance\n * @property {class} chapter a Chapter class instance\n * @property {method} addPMReadyListeners adds any listeners required (ex PMready)\n * \n * \n */\nclass Player {\n\n /**\n * class constructor\n * @param {element} el div with pm class and plyr data requirements \n */\n constructor(el) {\n\n this.id = el.id;\n\n // site (ex WordPress css) goes on page once with PageSupport\n\n\n\n this.plyrInstance;\n\n // note static is set when Plyr is instantiated\n // otherwise this would be in UIprep\n // can toggleControls vis/no vis while playing but not set property\n\n this.isStatic;\n\n // class list for element, CSSclasses added back after player created\n\n this.CSSclasses = el.className.split(' ');\n\n this.classList = el.classList;\n\n // classlist check for static (user implemented)\n\n if (el.classList.contains('static') || el.classList.contains('offScreen') || window.PMpageSupport.isSafari || el.classList.contains('links')) {\n\n this.isStatic = true; // create plyr with static controls\n\n } else {\n // create plyr with hover controls\n this.isStatic = false;\n }\n\n\n if (el.tagName === 'AUDIO') {\n\n this.newPlyrAudio(el);\n\n }\n else {\n\n this.newPlyrVideo(el);\n\n }\n\n\n this.uiPrep = new _UIprep_pm__WEBPACK_IMPORTED_MODULE_4__[\"default\"](el);\n\n this.loop;\n\n this.chapter;\n\n // this will fire after everything to set any universal style\n\n this.addPMReadyListeners();\n\n\n // this.addMobileListeners();\n\n\n }\n\n\n\n /**\n * creates a new video Plyr with the pm element\n * @param {element} el - div with pm class \n */\n\n newPlyrVideo(el) {\n\n this.plyrInstance = new (plyr__WEBPACK_IMPORTED_MODULE_0___default())('#' + el.id, {\n controls: [\n 'play', // Play/pause playback\n 'progress', // The progress bar and scrubber for playback and buffering\n 'current-time', // The current time of playback\n 'duration', // The full duration of the media\n 'mute', // Toggle mute\n 'volume', // Volume control\n 'settings', // Settings menu\n 'fullscreen', // Toggle fullscreen\n ],\n\n hideControls: !this.isStatic\n\n });\n\n this.setVideoListeners(el.id);\n\n this.eventListeners();\n\n }\n\n\n\n /**\n * creates a new audio Plyr with the pm element\n * @param {element} el - div with pm class \n */\n\n newPlyrAudio(el) {\n\n this.plyrInstance = new (plyr__WEBPACK_IMPORTED_MODULE_0___default())('audio#' + el.id, {});\n\n this.setAudioListeners(el.id)\n\n this.eventListeners();\n\n }\n\n\n\n /**\n * called from the plyr ready event listener, this method places the HTML controls on the video player\n * @param {string} id player/plyr/div id\n * @emits {event} called 'pmControlsReady'\n */\n\n HTMLControls(id) {\n\n var loopDivsLiteral = `\n <div style=\"flex-basis: 100%; height: 0;\"></div>\n <div style=\"flex-grow: 0.25;\"></div>\n <button id=\"${this.id}_info\" class=\"infoButton plyr__controls__item plyr__control\" type=\"button\">\n <svg id=\"infoSVG\" class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\" >\n <path xmlns=\"http://www.w3.org/2000/svg\" d=\"m9.0598 0.42333c-4.9453 0-8.9522 3.8514-8.9522 8.6049 0 4.7535 4.0068 8.6049 8.9522 8.6049 4.9453 0 8.9522-3.8514 8.9522-8.6049 0-4.7535-4.0068-8.6049-8.9522-8.6049zm0 15.544c-3.9924 0-7.2195-3.1019-7.2195-6.9394 0-3.8306 3.2271-6.9394 7.2195-6.9394 3.9852 0 7.2195 3.1019 7.2195 6.9394 0 3.8375-3.2271 6.9394-7.2195 6.9394zm0-11.728c0.83746 0 1.5161 0.65231 1.5161 1.4573 0 0.80498-0.67863 1.4573-1.5161 1.4573-0.83746 0-1.5161-0.65231-1.5161-1.4573 0-0.80498 0.67863-1.4573 1.5161-1.4573zm2.0215 8.8131c0 0.229-0.19493 0.41637-0.43317 0.41637h-3.1766c-0.23824 0-0.43317-0.18736-0.43317-0.41637v-0.83273c0-0.229 0.19493-0.41637 0.43317-0.41637h0.43317v-2.2206h-0.43317c-0.23824 0-0.43317-0.18736-0.43317-0.41637v-0.83273c0-0.229 0.19493-0.41637 0.43317-0.41637h2.3102c0.23824 0 0.43317 0.18737 0.43317 0.41637v3.4697h0.43317c0.23824 0 0.43317 0.18736 0.43317 0.41637z\"/>\n </svg>\n <span class=\"label--not-pressed plyr__sr-only\">Info</span>\n </button>\n <span class=\"PMlogo\" style=\"font-style: italic; font-size: smaller; line-height: 12px;\">Practise<br>Master</span>\n <div style=\"flex-grow: 1;\"></div>\n <button id=\"${this.id}_nowTimeStart\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg id=\"nowSVG\" class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\" style=\"transform: scaleY(-1)\" >\n <path xmlns=\"http://www.w3.org/2000/svg\" d=\"m13.83 0.12947c-0.60243 0.001022-0.93199 0.76661-1.3344 1.2481-0.42034 0.6401-0.18152 1.5806 0.28874 2.0369 0.40781 0.38221 0.08162 0.35863-0.24583 0.33434-3.3737 0.011276-6.7487-0.022766-10.121 0.017257-1.3482 0.13812-2.4025 1.9022-2.2584 3.6894 0.006509 2.7641-0.011751 4.6472 0.01577 7.4105 0.10198 1.8037 1.4251 3.1952 2.7541 3.0023 2.1542-0.01129 3.1065 0.02276 5.26-0.01727 1.3476-0.13717 2.3846-1.9108 2.2409-3.6895-0.01218-1.3917 0.02481-2.7875-0.01954-4.1765-0.096853-0.79696-0.72647-1.1446-1.2687-1.0422-0.527-0.049194-1.1834 0.011045-1.4058 0.78294-0.16627 0.81285-0.048406 1.6792-0.083807 2.5159v1.9074h-4.7123c0.0021-2.5223-0.00462-4.1591-0.00294-6.6814h10.095c-0.3871 0.56351-1.025 1.085-0.87246 1.9767 0.12204 0.66517 0.59476 1.0425 0.92175 1.5235 0.48086 0.55576 1.1804 0.23938 1.5247-0.38686 1.0531-1.4245 2.1432-2.8048 3.1729-4.2573 0.34907-0.65253 0.093278-1.5004-0.34614-1.9384-1.0264-1.3413-2.0186-2.7349-3.0667-4.0431-0.15772-0.13891-0.34622-0.21302-0.53492-0.21263z\" style=\"stroke-width:.014514\"/>\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <button id=\"${this.id}_subtrTimeStart\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg id=\"cheveronSVG\" class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\" style=\"transform: scaleX(-1)\" >\n <g xmlns=\"http://www.w3.org/2000/svg\" transform=\"matrix(.036353 0 0 .036621 -3.4195 .1145)\" style=\"stroke-width:7.2515\"><g style=\"stroke-width:7.2515\"><g style=\"stroke-width:7.2515\"><path d=\"m382.68 226.8c-73.671-73.548-147.1-147.35-220.92-220.74-12.991-11.358-32.333-5.3965-41.748 7.4512-10.355 9.4864-22.632 21.691-17.227 37.166 6.041 14.425 20.131 23.247 30.207 34.805 53.47 53.47 106.94 106.94 160.41 160.41-61.919 62.042-124.09 123.84-185.85 186.04-11.359 12.99-5.3968 32.335 7.4522 41.748 9.5221 10.409 21.812 22.708 37.35 17.168 14.308-6.1241 23.115-20.108 34.623-30.154 65.802-65.925 131.86-131.6 197.5-197.68 8.6934-10.271 7.9092-26.86-1.7952-36.212z\" style=\"stroke-width:7.2515\"/></g></g></g>\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <input-duration id=\"${this.id}_timeStart\"></input-duration>\n <button id=\"${this.id}_addTimeStart\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg id=\"cheveronRevSVG\" class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\">\n <use xlink:href=\"#cheveronSVG\" />\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <div style=\"flex-grow: 1;\"></div>\n <button id=\"${this.id}_nowTimeEnd\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg id=\"pointSVG\" class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\" style=\"transform: scale(-1, -1)\" >\n <path xmlns=\"http://www.w3.org/2000/svg\" d=\"m13.83 0.12947c-0.60243 0.001022-0.93199 0.76661-1.3344 1.2481-0.42034 0.6401-0.18152 1.5806 0.28874 2.0369 0.40781 0.38221 0.08162 0.35863-0.24583 0.33434-3.3737 0.011276-6.7487-0.022766-10.121 0.017257-1.3482 0.13812-2.4025 1.9022-2.2584 3.6894 0.006509 2.7641-0.011751 4.6472 0.01577 7.4105 0.10198 1.8037 1.4251 3.1952 2.7541 3.0023 2.1542-0.01129 3.1065 0.02276 5.26-0.01727 1.3476-0.13717 2.3846-1.9108 2.2409-3.6895-0.01218-1.3917 0.02481-2.7875-0.01954-4.1765-0.096853-0.79696-0.72647-1.1446-1.2687-1.0422-0.527-0.049194-1.1834 0.011045-1.4058 0.78294-0.16627 0.81285-0.048406 1.6792-0.083807 2.5159v1.9074h-4.7123c0.0021-2.5223-0.00462-4.1591-0.00294-6.6814h10.095c-0.3871 0.56351-1.025 1.085-0.87246 1.9767 0.12204 0.66517 0.59476 1.0425 0.92175 1.5235 0.48086 0.55576 1.1804 0.23938 1.5247-0.38686 1.0531-1.4245 2.1432-2.8048 3.1729-4.2573 0.34907-0.65253 0.093278-1.5004-0.34614-1.9384-1.0264-1.3413-2.0186-2.7349-3.0667-4.0431-0.15772-0.13891-0.34622-0.21302-0.53492-0.21263z\" style=\"stroke-width:.014514\"/>\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <button id=\"${this.id}_subtrTimeEnd\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\" style=\"transform: scaleX(-1)\" >\n <use xlink:href=\"#cheveronSVG\" />\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <input-duration id=\"${this.id}_timeEnd\"></input-duration>\n <button id=\"${this.id}_addTimeEnd\" class=\"plyr__controls__item plyr__control\" type=\"button\">\n <svg class=\"icon--not-pressed\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 18 18\">\n <use xlink:href=\"#cheveronSVG\" />\n </svg>\n <span class=\"label--pressed plyr__sr-only\">Text for Label</span>\n <span class=\"label--not-pressed plyr__sr-only\">Text for Label</span>\n </button>\n <div style=\"flex-grow: 2;\"></div>\n <div id=\"${this.id}_onOff\" class=\"onoffswitch onoffDiv\">\n <input type=\"checkbox\" name=\"onoffswitch\" class=\"onoffswitch-checkbox\" tabindex=\"0\">\n <label class=\"onoffswitch-label\" for=\"myonoffswitch\">\n <span class=\"onoffswitch-inner\"></span>\n <span class=\"onoffswitch-switch\"></span>\n </label>\n </div>\n <div style=\"flex-grow: 0.5;\"> </div>\n `;\n\n\n document.querySelector(\"#\" + id + \" > div.plyr__controls\").insertAdjacentHTML('beforeend', loopDivsLiteral);\n\n console.log('dispatching pmControlsReady event: ' + id);\n\n window.dispatchEvent(new CustomEvent('pmControlsReady', { detail: id }));\n\n\n }\n\n\n\n /**\n * this method places event listeners on page for PM controls buttons through a delegate in Helpers module \n */\n\n eventListeners() {\n\n // events these events need delegates to encapsulate id data as closures\n // https://stackoverflow.com/questions/46101024/add-event-listener-to-future-item-without-jquery\n\n // start time events \n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_nowTimeStart', this.setTimeStart));\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_subtrTimeStart', this.subtrTimeStart));\n\n // event for input-duration \n document.addEventListener('keyup', window.PMpageSupport.helpers.delegate('#' + this.id + '_timeStart', this.timeStart));\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_addTimeStart', this.addTimeStart));\n\n\n // end time events (add return key for starting loop)\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_nowTimeEnd', this.setTimeEnd));\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_subtrTimeEnd', this.subtrTimeEnd));\n\n // event for input-duration\n document.addEventListener('keyup', window.PMpageSupport.helpers.delegate('#' + this.id + '_timeEnd', this.timeEnd));\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_addTimeEnd', this.addTimeEnd));\n\n // loop on / off button event\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_onOff', this.offToggle));\n\n\n // Loop and Chapter Link button event\n\n document.addEventListener('click', window.PMpageSupport.helpers.delegate('#' + this.id + '_links', this.linkLoopOrChapter));\n\n\n\n }\n\n\n // actual event listeners\n\n /**\n * event listener sets start time\n * @listens click event of *_nowTimeStart \n * @param {event} e unused\n */\n\n setTimeStart(e) {\n\n // 'this' is button so\n\n\n const id = this.id.replace('_nowTimeStart', '');\n\n\n\n console.log(\"Hey, I'll set the start time for player: \" + id);\n\n\n // Does: \n // set loop start\n\n // window['PMinstance_Hplayer']\n\n\n const currentTime = window[\"PMinstance_\" + id].plyrInstance.currentTime;\n window[\"PMinstance_\" + id].loop.startTimeSeconds = currentTime;\n\n\n // trims string for mobile devices, where input time is updated to input string\n\n document.querySelector(\"#\" + id + \"_timeStart\").value = window.PMpageSupport.helpers.toStringTime(currentTime);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n\n /**\n * event listener reduces start time\n * @listens click event of *_subtrTimeStart \n * @param {event} e unused\n */\n\n subtrTimeStart(e) {\n\n // 'this' is button so\n const id = this.id.replace('_subtrTimeStart', '');\n\n\n console.log(\"Hey, I'll subtract time start for player: \" + id);\n\n\n /// update loop object\n\n var inputTimeFloat = window[\"PMinstance_\" + id].loop.startTimeSeconds / 10000 - 0.25 > 0 ? window[\"PMinstance_\" + id].loop.startTimeSeconds / 10000 - 0.25 : 0;\n\n window[\"PMinstance_\" + id].loop.startTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window[\"PMinstance_\" + id].plyrInstance.pause();\n\n window[\"PMinstance_\" + id].plyrInstance.currentTime = inputTimeFloat;\n\n\n\n document.querySelector(\"#\" + id + \"_timeStart\").value = window.PMpageSupport.helpers.toStringTime(inputTimeFloat);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n /**\n * event listener increases start time\n * @listens click event of *_addTimeStart \n * @param {event} e unused\n */\n\n addTimeStart(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_addTimeStart', '');\n\n\n console.log(\"Hey, I'll add time end for player: \" + id);\n\n\n /// update loop object\n\n var inputTimeFloat = window[\"PMinstance_\" + id].loop.startTimeSeconds / 10000 + 0.25;\n\n\n window[\"PMinstance_\" + id].loop.startTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window[\"PMinstance_\" + id].plyrInstance.pause();\n\n window[\"PMinstance_\" + id].plyrInstance.currentTime = inputTimeFloat;\n\n\n document.querySelector(\"#\" + id + \"_timeStart\").value = window.PMpageSupport.helpers.toStringTime(inputTimeFloat);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n\n /**\n * event listener for <input type=\"time\"> or chronlyHMS updating start time\n * @listens keyup event of *_timeStart\n * @param {e} event \n */\n\n timeStart(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_timeStart', '');\n\n console.log(\"Hey, I'll digit adjust the start time for player: \" + id);\n\n\n // update loop instance\n\n var startTimeString = this.value;\n\n\n // was toFloatSecs x2\n\n window[\"PMinstance_\" + id].loop.startTimeSeconds = window.PMpageSupport.helpers.secondsNumber(startTimeString);\n\n\n window[\"PMinstance_\" + id].plyrInstance.currentTime = window.PMpageSupport.helpers.secondsNumber(startTimeString);\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n\n }\n\n\n\n /**\n * event listener sets end time\n * @listens click event of *_nowTimeEnd \n * @param {event} e unused\n */\n\n setTimeEnd(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_nowTimeEnd', '');\n\n\n console.log(\"Hey, I'll set the end time for player: \" + id);\n\n\n // get current time of plyr\n\n // set loop end\n\n var currentTime = window[\"PMinstance_\" + id].plyrInstance.currentTime;\n\n\n window[\"PMinstance_\" + id].loop.endTimeSeconds = currentTime;\n\n\n // trims string for mobile devices, where input time is updated to input string\n\n document.querySelector(\"#\" + id + \"_timeEnd\").value = window.PMpageSupport.helpers.toStringTime(currentTime);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n\n /**\n * event listener reduces end time\n * @listens click event of *_subtrTimeEnd\n * @param {event} e unused\n */\n\n subtrTimeEnd(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_subtrTimeEnd', '');\n\n\n console.log(\"Hey, I'll subtract time end for player: \" + id);\n\n\n /// update loop object\n\n var inputTimeFloat = window[\"PMinstance_\" + id].loop.endTimeSeconds / 10000 - 0.25 > 0 ? window[\"PMinstance_\" + id].loop.endTimeSeconds / 10000 - 0.25 : 0;\n\n window[\"PMinstance_\" + id].loop.endTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window[\"PMinstance_\" + id].plyrInstance.pause();\n\n window[\"PMinstance_\" + id].plyrInstance.currentTime = inputTimeFloat;\n\n\n // trims string for mobile devices, where input time is updated to input string\n document.querySelector(\"#\" + id + \"_timeEnd\").value = window.PMpageSupport.helpers.toStringTime(inputTimeFloat);\n\n\n // run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n /**\n * event listener increases end time\n * @listens click event of *_addTimeEnd \n * @param {event} e unused\n */\n\n addTimeEnd(event) {\n\n // 'this' is button so\n\n const id = this.id.replace('_addTimeEnd', '');\n\n\n console.log(\"Hey, I'll add time end for player: \" + id);\n\n\n /// update loop object\n\n var inputTimeFloat = window[\"PMinstance_\" + id].loop.endTimeSeconds / 10000 + 0.25;\n\n\n window[\"PMinstance_\" + id].loop.endTimeSeconds = inputTimeFloat;\n\n\n /// video\n\n window[\"PMinstance_\" + id].plyrInstance.pause();\n\n\n window[\"PMinstance_\" + id].plyrInstance.currentTime = inputTimeFloat;\n\n\n document.querySelector(\"#\" + id + \"_timeEnd\").value = window.PMpageSupport.helpers.toStringTime(inputTimeFloat);\n\n\n //run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n /**\n * event listener for <input type=\"time\"> or chronlyHMS updating end time\n * @listens keyup event of *_timeEnd\n * @param {event} e unused \n */\n\n timeEnd(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_timeEnd', '');\n\n\n console.log(\"Hey, I'll digit adjust the end time for player: \" + id);\n\n\n var endTimeString = this.value;\n\n\n window[\"PMinstance_\" + id].loop.endTimeSeconds = window.PMpageSupport.helpers.secondsNumber(endTimeString);\n\n\n window[\"PMinstance_\" + id].plyrInstance.currentTime = window.PMpageSupport.helpers.secondsNumber(endTimeString);\n\n\n //run warning validation\n\n window.PMpageSupport.helpers.redWarningValidation(id);\n\n }\n\n\n\n /**\n * event listener toggles on/off looping\n * @listens click event of *_onOff \n * @param {event} e unused\n */\n\n offToggle(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_onOff', '');\n\n\n console.log(\"Hey, I'll toggle off/on player: \" + id);\n\n\n // toggle the ui switch\n\n document.querySelector('#' + id + '_onOff > input').checked = !document.querySelector('#' + id + '_onOff > input').checked;\n\n // Get loop instance\n\n const loop = window[\"PMinstance_\" + id].loop;\n\n\n // toggle the loop object instance \n\n loop.off = !loop.off;\n\n console.log(\"The loop is now switched off: \" + loop.off);\n\n\n\n // warning and invalid states check\n // and further in own method \n\n if (!loop.off) {\n\n // run validation \n\n console.log('asking to run validation for' + id);\n\n if (window.PMpageSupport.helpers.redWarningValidation(id)) {\n\n\n window[\"PMinstance_\" + id].plyrInstance.pause();\n\n // turn looping off\n loop.off = !loop.off;\n\n // toggle switch back to off\n\n setTimeout(() => {\n document.querySelector('#' + id + '_onOff > input').checked = !document.querySelector('#' + id + '_onOff > input').checked;\n }, 500);\n\n }\n\n\n else {\n\n window[\"PMinstance_\" + id].plyrInstance.play();\n }\n\n }\n }\n\n\n\n /**\n * event listener for loopbuilder links\n * @listens click event of *_links \n * @param {event} e unused\n * @todo refactor this (and other button events and listeners) to the UIprep class\n */\n\n linkLoopOrChapter(e) {\n\n // 'this' is button so\n\n const id = this.id.replace('_links', '');\n\n\n console.log(\"Hey, I'll toggle off/on player: \" + id);\n\n\n // need helpers to convert seconds to time before sending to UI\n window[\"PMinstance_\" + id].uiPrep.addHTMLlink();\n\n }\n\n\n\n /**\n * statements that run after plyr 'ready' event for audio \n * @listens plyr ready\n * @param {string} id player/plyr/div id\n */\n\n setAudioListeners(id) {\n\n var closure = this;\n\n // Audio ready listener (PM will be slightly different)\n // window[\"PlyrAudio_\" + id].on('ready', event => {\n this.plyrInstance.on('ready', event => {\n\n console.log(\"Plyr audio says it's ready! id: \" + id);\n\n // need to 'add back' user's id to div because it's removed by plyr \n event.target.id = id;\n\n // also need to add back pm class because it is removed by plyr was: event.target.classList.add('pm');\n closure.CSSclasses.forEach(singleClass => event.target.classList.add(singleClass));\n\n\n // replaces old new PractiseMaster(), as that is already done:\n closure.HTMLControls(closure.id);\n closure.loop = new _loop_pm__WEBPACK_IMPORTED_MODULE_2__[\"default\"](closure.id);\n closure.chapter = new _chapter_pm__WEBPACK_IMPORTED_MODULE_3__[\"default\"](closure.id, 0, 0);\n\n console.log('duration at plyr ready: ' + closure.plyrInstance.duration);\n\n\n // set duration of loop \n\n // for html audio and video there can be lags between plyr ready and the video duration value being 'ready'\n // this promise on interval is based on https://stackoverflow.com/questions/17217736/while-loop-with-promises\n // and https://codepen.io/anon/pen/jzpZMa?editors=0011 \n\n\n const doSomething = value =>\n new Promise(resolve =>\n setTimeout(() => resolve(value >= 5 ? 'ok' : 'no'), 1000))\n\n const loop = async value => {\n let result = null\n while (result != 'ok') {\n console.log(value)\n result = await doSomething(value)\n value = closure.plyrInstance.duration\n }\n console.log('yay audio duration set')\n }\n\n loop(closure.plyrInstance.duration)\n .then(() => {\n window[\"PMinstance_\" + id].loop.videoDuration = closure.plyrInstance.duration;\n console.log('audio duration all done!');\n });\n\n\n\n\n\n\n\n // needs to be initialised first for duration promise in new Loop()\n window[\"PMinstance_\" + id];\n\n // make instance available as Global, needed for Loop and Chapter CSSclasses\n window[\"PMinstance_\" + id] = closure;\n\n this.uiPrep.addAudioStyle(id);\n\n });\n\n }\n\n\n\n /**\n * statements that run after plyr 'ready' event for audio \n * @listens plyr ready\n * @param {string} id player/plyr/div id\n */\n\n setVideoListeners(id) {\n\n\n var closure = this;\n\n\n this.plyrInstance.on('ready', event => {\n\n // need to be above the conditional duration blocks\n // needs to be initialised first for duration promise in new Loop()\n window[\"PMinstance_\" + id];\n\n // make instance available as Global, needed for Loop and Chapter CSSclasses\n window[\"PMinstance_\" + id] = closure;\n\n // need to 'add back' user's id to div because it's removed by plyr \n\n event.target.id = id;\n\n // also need to add back pm class because it is removed by plyr\n\n // event.target.classList.add('pm');\n\n closure.CSSclasses.forEach(singleClass => event.target.classList.add(singleClass));\n\n\n console.log(\"Plyr video says it's ready! id: \" + id);\n\n console.log(\"Player source is : \" + closure.plyrInstance.source);\n\n console.log(\"Player duration is : \" + closure.plyrInstance.duration);\n\n // replaces old new PractiseMaster(), as that is already done:\n closure.HTMLControls(id);\n closure.loop = new _loop_pm__WEBPACK_IMPORTED_MODULE_2__[\"default\"](closure.id);\n closure.chapter = new _chapter_pm__WEBPACK_IMPORTED_MODULE_3__[\"default\"](closure.id, 0, 0);\n\n\n\n // methods to set duration and css are different depending on Video type\n\n if (closure.plyrInstance.isVimeo) {\n\n\n closure.plyrInstance.embed.getDuration().then(function (duration) {\n // the player is ready\n\n console.log(\"This Vimeo getDuration: \" + duration + \" seconds long.\");\n\n closure.loop.videoDuration = duration;\n console.log('Vimeo player duration is ' + duration);\n\n // looks like this needs to go inside promise!\n\n console.log(\"going to call css FH w/in promise! \");\n\n });\n\n }\n\n else if (closure.plyrInstance.isHTML5) {\n\n\n // for html audio and video there can be lags between plyr ready and the video duration value being 'ready'\n // this promise on interval is based on https://stackoverflow.com/questions/17217736/while-loop-with-promises\n // and https://codepen.io/anon/pen/jzpZMa?editors=0011 \n\n\n const doSomething = value =>\n new Promise(resolve =>\n setTimeout(() => resolve(value >= 5 ? 'ok' : 'no'), 1000))\n\n const loop = async value => {\n let result = null\n while (result != 'ok') {\n console.log(value)\n result = await doSomething(value)\n value = closure.plyrInstance.duration\n }\n console.log('yay html video duration set')\n }\n\n loop(closure.plyrInstance.duration)\n .then(() => {\n window[\"PMinstance_\" + id].loop.videoDuration = closure.plyrInstance.duration;\n console.log('html video duration all done!');\n });\n\n\n\n }\n else {\n\n // for YouTube \n\n closure.loop.videoDuration = closure.plyrInstance.duration;\n\n console.log('Youtube player duration is ' + closure.plyrInstance.duration);\n\n }\n\n\n });\n\n };\n\n\n\n /**\n * statments to run after PM fires ready and controls are in place\n * @listens PM ready event \n */\n\n addPMReadyListeners() {\n\n // closure\n var player = this;\n\n window.addEventListener('pmControlsReady', function (e) {\n\n console.log('custom event received outside if, process(detail): ' + e.detail);\n\n\n if (e.detail === player.id) {\n\n\n console.log('custom event received INSIDE , process(detail): ' + e.detail);\n\n player.uiPrep.applyPMReadyCssHTMLSettings(player.id);\n\n\n\n // ChronlyHMS added to all players, inactive unless linkbuilder\n // the input-duration will be added in the HTML string literal\n\n\n // input-duration update\n\n player.uiPrep.styleInputDuration(player.id);\n\n\n\n // detect mobile devices and add callback to new fullScreen event\n // player.addMobileListeners(e.detail);\n\n\n // set up ChronlyHMS and link builder\n if (player.classList.contains('links')) {\n\n // this updates to LinkBuilder method\n player.uiPrep.addLinkButton(player.id);\n\n\n // audio links doesn't need off player controls\n // the rest of player types do\n\n if (player.plyrInstance.type === 'video') {\n\n player.uiPrep.offPlayerControls(player.id);\n\n }\n\n\n\n }\n else {\n\n // userChronly method in UIprep ChronlyHMS.disableInputs()\n\n // input-duration update, comment out:\n player.uiPrep.diableDurationInputs(player.id);\n\n }\n\n if (player.classList.contains('offScreen')) {\n\n // this updates to LinkBuilder method\n player.uiPrep.offPlayerControls(player.id);\n\n\n }\n\n console.log('plyr duration at PM ready: ' + player.plyrInstance.duration);\n // 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 player.updateFSmobile(e.detail);\n\n }\n\n },\n\n false);\n\n }\n\n updateFSmobile(id) {\n\n if (window.PMpageSupport.isMobile && !this.plyrInstance.isAudio) {\n\n // if (true && !this.plyrInstance.isAudio) {\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 // then add full screen button listener to click that toggles visibility of the buttons\n // for displaying buttons for full screen display (and removing for small screen) \n\n var fullScreenButton = document.querySelector('#' + id).querySelector(\"[data-plyr='fullscreen']\");\n\n\n fullScreenButton.addEventListener('click', () => {\n\n\n\n Array.from(fullScreenButton.parentElement.children).filter(function (child) {\n return !(child.dataset.plyr === \"fullscreen\")\n }).forEach(function (child) {\n\n var closeChild = child;\n\n if (closeChild.style.display === 'none') {\n\n closeChild.style.display = 'block';\n\n } else {\n\n closeChild.style.display = \"none\";\n }\n\n });\n\n });\n\n }\n }\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Player);\n\n//# sourceURL=webpack://practisemaster/./src/modules/player-pm.js?");
|
|
194
194
|
|
|
195
195
|
/***/ }),
|
|
196
196
|
|
|
@@ -201,7 +201,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
201
201
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
202
202
|
|
|
203
203
|
"use strict";
|
|
204
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _player_pm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./player-pm */ \"./src/modules/player-pm.js\");\n/**\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 //
|
|
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\n window.PractiseMaster.Loop = (x, y, z) => { return window.PMpageSupport.PMloop(x, y, z); };\n\n\n window.PractiseMaster.Chapter = (x, y, z) => { return window.PMpageSupport.PMchapter(x, y, z); };\n\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 // window.PractiseMaster[\"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
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "practisemaster",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.32",
|
|
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",
|