practisemaster 1.0.32 → 1.0.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/PMbundle.js +13 -2
  2. 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\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?");
105
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _modules_practisemasterWebComponent__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./modules/practisemasterWebComponent */ \"./src/modules/practisemasterWebComponent.js\");\n/* harmony import */ var _modules_linkEditorWebComponent__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modules/linkEditorWebComponent */ \"./src/modules/linkEditorWebComponent.js\");\n/* harmony import */ var _modules_linkEditTrialInherit__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./modules/linkEditTrialInherit */ \"./src/modules/linkEditTrialInherit.js\");\n// __ __ ___ ___ __ ___ __ ___ \n// /\\ |__) / ` |__| | | |__ / ` | | | |__) |__ \n// /~~\\ | \\ \\__, | | | | |___ \\__, | \\__/ | \\ |___ \n// \n// \n// read https://github.com/StephanLuis/PractiseMaster/blob/1.0Architecture/src/README.md\n\n\n\n\n\n\n\n\n/**\n * 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_linkEditTrialInherit__WEBPACK_IMPORTED_MODULE_2__[\"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
 
@@ -150,6 +150,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
150
150
 
151
151
  /***/ }),
152
152
 
153
+ /***/ "./src/modules/linkEditTrialInherit.js":
154
+ /*!*********************************************!*\
155
+ !*** ./src/modules/linkEditTrialInherit.js ***!
156
+ \*********************************************/
157
+ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
158
+
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 _practisemasterWebComponent__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./practisemasterWebComponent */ \"./src/modules/practisemasterWebComponent.js\");\n\n\nconst template = document.createElement(\"template\");\ntemplate.innerHTML = /*html*/`\n<p>Vimeo: 650483703 <button class=\"demoButton\" id=\"demoVimeoB\">Start Vimeo</button></p>\n`;\n\nclass linkEditorTrialInherit extends _practisemasterWebComponent__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\n constructor() {\n\n // // Always call super first in constructor\n super();\n\n\n this.myElement = this.attachShadow({ mode: 'open' });\n\n\n this.initialiseContainers();\n\n\n }\n\n initialiseContainers() {\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 this.parentNode.insertBefore(wrapper, this);\n \n // move el into wrapper\n wrapper.appendChild(this);\n \n\n }\n\n connectedCallback() {\n\n\n\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n\n this.addDoDemosButtonListener();\n\n // initialiseContainers should have popluated\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 = `<practise-master id=\"Vimeo_650483703\" class=\"pm links\" data-plyr-provider=\"vimeo\" data-plyr-embed-id=\"650483703\"></practise-master>`;\n\n\n }\n\n else if (button.id === 'demoYTB') {\n\n htmlLitPage = ` <practise-master id=\"YouTube_Ve_iBdF9mF0\" class=\"pm links\" data-plyr-provider=\"youtube\" data-plyr-embed-id=\"Ve_iBdF9mF0\"></practise-master> `;\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\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (linkEditorTrialInherit);\n\n//# sourceURL=webpack://practisemaster/./src/modules/linkEditTrialInherit.js?");
161
+
162
+ /***/ }),
163
+
153
164
  /***/ "./src/modules/linkEditorWebComponent.js":
154
165
  /*!***********************************************!*\
155
166
  !*** ./src/modules/linkEditorWebComponent.js ***!
@@ -157,7 +168,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
157
168
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
158
169
 
159
170
  "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/* 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?");
171
+ eval("__webpack_require__.r(__webpack_exports__);\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 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\n\n// temporarily using linkEditTrialInherit.js\n// export default linkEditorWebComponent;\n\n\n\n//# sourceURL=webpack://practisemaster/./src/modules/linkEditorWebComponent.js?");
161
172
 
162
173
  /***/ }),
163
174
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "practisemaster",
3
- "version": "1.0.32",
3
+ "version": "1.0.34",
4
4
  "description": "This is the PractiseMaster repo, treat it with respect! [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/StephanLuis/PractiseMaster)",
5
5
  "dependencies": {
6
6
  "input-duration": "^2.2.3",