practisemaster 1.1.18 → 1.1.19
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 +1 -1
- package/package.json +1 -1
package/dist/PMbundle.js
CHANGED
|
@@ -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 _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?");
|
|
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 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
161
|
|
|
162
162
|
/***/ }),
|
|
163
163
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "practisemaster",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.19",
|
|
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",
|