practisemaster 1.1.18 → 1.1.20

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/**\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_conductorWebComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./modules/conductorWebComponent */ \"./src/modules/conductorWebComponent.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/**\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\ncustomElements.define('practise-conductor', _modules_conductorWebComponent__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
 
@@ -128,6 +128,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
128
128
 
129
129
  /***/ }),
130
130
 
131
+ /***/ "./src/modules/conductorWebComponent.js":
132
+ /*!**********************************************!*\
133
+ !*** ./src/modules/conductorWebComponent.js ***!
134
+ \**********************************************/
135
+ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
136
+
137
+ "use strict";
138
+ 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/**\n * Web Component from QSshadTable and PopFilter demo on PM website\n * as a webcomponent more than one table and player can be on one web page\n * what was passed to the query string will now be pass as an object to an attribute\n * \n * \n * the lesson r\n */\n\n\n\n\nconst template = document.createElement(\"template\");\ntemplate.innerHTML = /*html*/`\n\n<div id=\"tableHere\" class=\"container col-span-1 max-w-5xl\"></div>\n\n<div class=\"col-span-1 justify-center max-w-4xl lg:mt-20\">\n<h1 id=\"videoLabel\" \">Practise Master</h1>\n\n\n <div\n id=\"videoHere\"\n class=\"aspect-video bg-gray-500 \"\n >\n </div>\n </div>\n\n\n</div>\n<style>\n body {\n margin: 0;\n min-width: 250px;\n }\n\n /* Include the padding and border in an element's total width and height */\n * {\n box-sizing: border-box;\n }\n\n /* Remove margins and padding from the list */\n ul {\n margin: 0;\n padding: 0;\n height:30vh;\n overflow:auto;\n }\n\n /* Style the list items */\n ul li {\n cursor: pointer;\n position: relative;\n padding: 12px 8px 12px 40px;\n list-style-type: none;\n background: #eee;\n font-size: 18px;\n transition: 0.2s;\n\n /* make the list items unselectable */\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n\n min-height:60px;\n }\n\n /* Set all odd list items to a different color (zebra-stripes) */\n ul li:nth-child(odd) {\n background: #f9f9f9;\n }\n\n /* Darker background-color on hover */\n ul li:hover {\n background: #ddd;\n }\n\n /* When clicked on, add a background color and strike out text */\n ul li.checked {\n background: #888;\n color: #fff;\n text-decoration: line-through;\n }\n\n /* Add a \"checked\" mark when clicked on */\n ul li.checked::before {\n content: '';\n position: absolute;\n border-color: #fff;\n border-style: solid;\n border-width: 0 2px 2px 0;\n top: 30%;\n left: 16px;\n transform: rotate(45deg);\n height: 15px;\n width: 7px;\n }\n\n /* Style the close button */\n .stop {\n color: #aaaaaa;\n top: 0;\n padding: 12px 16px 12px 16px;\n } \n .slow {\n color: #aaaaaa;\n top: 0;\n padding: 12px 16px 12px 16px;\n }\n .fast {\n color: #aaaaaa;\n top: 0;\n padding: 12px 16px 12px 16px;\n }\n \n \n .close {\n position: absolute;\n right: 0;\n top: 10%;\n padding: 12px 16px 12px 16px;\n }\n\n a:hover, .stop:hover, .slow:hover, .fast:hover, .close:hover {\n background-color: rgb(255, 102, 0);\n color: white;\n }\n\n /* Style the header */\n .header {\n background-color: rgb(255, 102, 0, 0.90);\n padding: 30px 40px;\n color: white;\n text-align: center;\n \n }\n\n /* Clear floats after the header */\n .header:after {\n content: \"\";\n display: table;\n clear: both;\n }\n\n /* Style the input */\n input {\n margin: 0;\n border: none;\n border-radius: 0;\n width: 75%;\n padding: 10px;\n float: left;\n font-size: 16px;\n }\n\n /* Style the \"Add\" button */\n .addBtn {\n padding: 10px;\n width: 25%;\n background: #d9d9d9;\n color: #555;\n float: left;\n text-align: center;\n font-size: 16px;\n cursor: pointer;\n transition: 0.3s;\n border-radius: 0;\n }\n\n .addBtn:hover {\n background-color: #bbb;\n }\n\n a::after {\ncontent: '${\"\\u25B7\"}';\npadding-left:5px;\ncolor: orange;\n\n}\na:link, a:visited {\n\ncolor: black;\npadding: 14px 25px;\ntext-align: center;\ntext-decoration: none;\ndisplay: inline-block;\n}\n\n </style>\n<span id='listSpan'></span>\n\n\n`;\n\n\n\n class ConductorWebComponent extends HTMLElement {\n constructor() {\n super();\n\n // need to check for table object on page or throw error\n this.checkPMlessonTable();\n\n this.table = window.PMlessonTable;\n\n this.attachShadow({ mode: \"open\" });\n }\n\n checkPMlessonTable() {\n\n if (window.PMlessonTable) {\n \n console.error('PMlessonTable is not on page please add window.PMlessonTable!')\n \n }\n }\n\n connectedCallback() {\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n\n this.do();\n }\n\n do() {\n // create table and append to page\n const toDoTableHolder = document.createElement(\"div\");\n toDoTableHolder.id = \"tableholder\";\n\n toDoTableHolder.innerHTML = ` <div id=\"devToDoList\" class=\"header\">\n <h2 style=\"margin:5px\">${this.qsParseParams.table.title}</h2>\n <p>Watch the full video, then ...focus on form, do the sets you need.</p> \n \n </div>\n <ul id=\"toDoUL\">\n <li class=\"checked\" id=\"iRow\"> Tick each item when you're done mastering each skill</li>\n \n </ul>\n</div>`;\n\n this.shadowRoot\n .querySelector(\"#listSpan\")\n .insertAdjacentElement(\"afterbegin\", toDoTableHolder);\n\n // increment with map[key] = (map[key] ?? 0) + 1;\n // <a href='#PM${this.qsParseParams.videoID}' onclick=\"{PMinstance_PM${this.qsParseParams.videoID}.plyrInstance.speed = (PMinstance_PM${this.qsParseParams.videoID}.plyrInstance.speed ?? 0 ) - 0.125}\"> Slower</a>\n\n this.qsParseParams.table.rows.forEach((row) =>\n this.shadowRoot.querySelector(\"#iRow\").insertAdjacentHTML(\n \"afterend\",\n\n `<li><a href='javascript:void(0)' onclick=\"PractiseMaster.Loop('PM${this.qsParseParams.videoID}', '${row.startTime}' , '${row.endTime}'); document.querySelector('#videoLabel').innerText = '${row.goal} Practise Loop';\">${row.goal}</a>\n \n <span class=\"stop\" onclick=\"PMinstance_PM${this.qsParseParams.videoID}.plyrInstance.pause()\"> (Stop)</span>\n <span class=\"slow\" onclick=\"{PMinstance_PM${this.qsParseParams.videoID}.plyrInstance.speed = (PMinstance_PM${this.qsParseParams.videoID}.plyrInstance.speed ?? 0 ) - 0.125}\"> &lt; Slower &gt;</span>\n <span class=\"fast\" onclick=\"{PMinstance_PM${this.qsParseParams.videoID}.plyrInstance.speed = (PMinstance_PM${this.qsParseParams.videoID}.plyrInstance.speed ?? 0 ) + 0.125}\"> &lt;&lt;Faster&gt;&gt;</span>\n </li>\n `\n )\n );\n\n // Create a \"close\" button and append it to each list item\n var myNodelist = this.shadowRoot.querySelectorAll(\"li\");\n var i;\n for (i = 0; i < myNodelist.length; i++) {\n var span = document.createElement(\"SPAN\");\n var txt = document.createTextNode(\"\\u00D7\");\n span.className = \"close\";\n span.appendChild(txt);\n myNodelist[i].appendChild(span);\n }\n\n // Click on a close button to hide the current list item\n var close = this.shadowRoot.querySelectorAll(\".close\");\n var i;\n for (i = 0; i < close.length; i++) {\n close[i].onclick = function () {\n var div = this.parentElement;\n div.style.display = \"none\";\n };\n }\n\n // Add a \"checked\" symbol when clicking on a list item\n var list = this.shadowRoot.querySelector(\"ul\");\n list.addEventListener(\n \"click\",\n function (ev) {\n if (ev.target.tagName === \"LI\") {\n ev.target.classList.toggle(\"checked\");\n }\n },\n false\n );\n\n const demoTitle = document.createElement(\"h1\");\n demoTitle.innerText = this.qsParseParams.companyBrand + \" Demo\";\n\n this.shadowRoot\n .querySelector(\"#listSpan\")\n .insertAdjacentElement(\"afterbegin\", demoTitle);\n }\n }\n\n /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ConductorWebComponent);\n\n//# sourceURL=webpack://practisemaster/./src/modules/conductorWebComponent.js?");
139
+
140
+ /***/ }),
141
+
131
142
  /***/ "./src/modules/helpers-pm.js":
132
143
  /*!***********************************!*\
133
144
  !*** ./src/modules/helpers-pm.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 _practisemasterWebComponent__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./practisemasterWebComponent */ \"./src/modules/practisemasterWebComponent.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 Editor</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://2x.azureedge.net/pmcontainer/diyPopFullSize.mp4 <button class=\"demoButton\" id=\"demoMP4B\">Start MP4</button>\n <li>MP3 Audio: https://2x.azureedge.net/pmcontainer/diyPop.mp3 <button class=\"demoButton\" id=\"demoMP3B\">Start MP3</button>\n <li>OGG Audio: https://2x.azureedge.net/pmcontainer/diyPop.ogg \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 LinkEditerWebComp 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\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.addDoMineButtonListener();\n \n this.addDoDemosButtonListener();\n\n // initialiseContainers should have popluated\n\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 --><a href=\"${sourceURL}\" download>Download</a> </video>`;\n\n }\n\n else if (choice === 'MP3') {\n\n\n htmlLitPage = `<practise-master id=\"myMP3\" class=\"links\" data-plyr-provider=\"mp3\" crossorigin playsinline> <source src=\"${sourceURL}\" type=\"audio/mp3\"> </practise-master>`;\n\n\n }\n\n else if (choice === 'OGG') {\n\n\n htmlLitPage = `<practise-master id=\"myOGG\" class=\"links\" data-plyr-provider=\"mp3\" crossorigin playsinline> <source src=\"${sourceURL}\" type=\"audio/ogg\"\"> </practise-master>`;\n\n \n\n }\n\n else {\n\n htmlLitPage = `<practise-master id=\"${choice}_${vidID}\" class=\"links\" data-plyr-provider=\"${choice}\" data-plyr-embed-id=\"${vidID}\"></practise-master>`;\n\n }\n\n\n this.postOnPage(htmlLitPage);\n\n\n // document.querySelector('practise-master').scrollIntoView({block: \"start\", behavior: \"smooth\"});\n\n\n document.querySelector('practise-master').scrollIntoViewIfNeeded(); \n\n\n event.preventDefault();\n\n\n // this.startAndShow();\n\n },\n\n false\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://2x.azureedge.net/pmcontainer/diyPop.mp3';\n const MP4url = 'https://2x.azureedge.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 htmlLitPage = `<practise-master id=\"Hplayer\" class=\"links\" data-plyr-provider=\"mp4\" controls crossorigin playsinline\n poster=\"https://2x.azureedge.net/pmcontainer/diyPopCover.jpeg\">\n <source src=\"https://2x.azureedge.net/pmcontainer/diyPopFullSize.mp4\"\n type=\"video/mp4\" size=\"1080\">\n </practise-master>`\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 htmlLitPage = `<practise-master id=\"demoMP3\" class=\"links\" data-plyr-provider=\"mp3\" crossorigin playsinline>\n <source src=\"https://2x.azureedge.net/pmcontainer/diyPop.mp3\" type=\"audio/mp3\">\n </practise-master>`\n\n }\n\n\n else if (button.id === 'demoVimeoB') {\n\n htmlLitPage = `<practise-master id=\"Vimeo_650483703\" class=\"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=\"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 document.querySelector('practise-master').scrollIntoView({block: \"start\", behavior: \"smooth\"});\n\n \n event.preventDefault();\n\n },\n\n\n false\n\n )\n );\n }\n\n postOnPage(litHTML) {\n\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__ = (LinkEditerWebComp);\n\n//# sourceURL=webpack://practisemaster/./src/modules/linkEditorWebComponent.js?");
171
+ 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/* 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 Editor</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://2x.azureedge.net/pmcontainer/diyPopFullSize.mp4 <button class=\"demoButton\" id=\"demoMP4B\">Start MP4</button>\n <li>MP3 Audio: https://2x.azureedge.net/pmcontainer/diyPop.mp3 <button class=\"demoButton\" id=\"demoMP3B\">Start MP3</button>\n <li>OGG Audio: https://2x.azureedge.net/pmcontainer/diyPop.ogg \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 LinkEditerWebComp 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\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.addDoMineButtonListener();\n \n this.addDoDemosButtonListener();\n\n // initialiseContainers should have popluated\n\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 --><a href=\"${sourceURL}\" download>Download</a> </video>`;\n\n htmlLitPage = `<practise-master id=\"myMP4\" class=\"links\" data-plyr-provider=\"mp4\" controls crossorigin playsinline>\n <source src=\"${sourceURL}\"\n type=\"video/mp4\" size=\"1080\">\n </practise-master>`\n }\n\n else if (choice === 'MP3') {\n\n\n htmlLitPage = `<practise-master id=\"myMP3\" class=\"links\" data-plyr-provider=\"mp3\" crossorigin playsinline> <source src=\"${sourceURL}\" type=\"audio/mp3\"> </practise-master>`;\n\n\n }\n\n else if (choice === 'OGG') {\n\n\n htmlLitPage = `<practise-master id=\"myOGG\" class=\"links\" data-plyr-provider=\"mp3\" crossorigin playsinline> <source src=\"${sourceURL}\" type=\"audio/ogg\"\"> </practise-master>`;\n\n \n\n }\n\n else {\n\n htmlLitPage = `<practise-master id=\"${choice}_${vidID}\" class=\"links\" data-plyr-provider=\"${choice}\" data-plyr-embed-id=\"${vidID}\"></practise-master>`;\n\n }\n\n\n this.postOnPage(htmlLitPage);\n\n\n // document.querySelector('practise-master').scrollIntoView({block: \"start\", behavior: \"smooth\"});\n\n\n document.querySelector('practise-master').scrollIntoViewIfNeeded(); \n\n\n event.preventDefault();\n\n\n // this.startAndShow();\n\n },\n\n false\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://2x.azureedge.net/pmcontainer/diyPop.mp3';\n const MP4url = 'https://2x.azureedge.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 htmlLitPage = `<practise-master id=\"Hplayer\" class=\"links\" data-plyr-provider=\"mp4\" controls crossorigin playsinline\n poster=\"https://2x.azureedge.net/pmcontainer/diyPopCover.jpeg\">\n <source src=\"https://2x.azureedge.net/pmcontainer/diyPopFullSize.mp4\"\n type=\"video/mp4\" size=\"1080\">\n </practise-master>`\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 htmlLitPage = `<practise-master id=\"demoMP3\" class=\"links\" data-plyr-provider=\"mp3\" crossorigin playsinline>\n <source src=\"https://2x.azureedge.net/pmcontainer/diyPop.mp3\" type=\"audio/mp3\">\n </practise-master>`\n\n }\n\n\n else if (button.id === 'demoVimeoB') {\n\n htmlLitPage = `<practise-master id=\"Vimeo_650483703\" class=\"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=\"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 document.querySelector('practise-master').scrollIntoView({block: \"start\", behavior: \"smooth\"});\n\n \n event.preventDefault();\n\n },\n\n\n false\n\n )\n );\n }\n\n postOnPage(litHTML) {\n\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__ = (LinkEditerWebComp);\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.1.18",
3
+ "version": "1.1.20",
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",