practisemaster 1.0.36 → 1.0.38
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/README.md +30 -0
- package/dist/PMbundle.js +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -30,3 +30,33 @@ See https://github.com/StephanLuis/BrowserStackSelenium/blob/main/TestURLs/PMtes
|
|
|
30
30
|
# Display Flowchart
|
|
31
31
|
|
|
32
32
|
https://drive.google.com/drive/folders/1KXWqXpzDOVReIaBMAkTHVmr0r4kKMGL6?usp=sharing
|
|
33
|
+
|
|
34
|
+
# Class Diagram
|
|
35
|
+
|
|
36
|
+
```Mermaid
|
|
37
|
+
graph TD;
|
|
38
|
+
LoopEditorWebComp<..PractiseMasterWebComp;
|
|
39
|
+
PractiseMasterWebComp ..> HTMLElement;
|
|
40
|
+
PractiseMasterWebComp*..PageSupport;
|
|
41
|
+
PractiseMasterWebComp*..PractiseMaster;
|
|
42
|
+
PageSupport*..HostSite;
|
|
43
|
+
PageSupport*..Helpers;
|
|
44
|
+
PageSupport*..UserRequest;
|
|
45
|
+
PractiseMaster*..Player;
|
|
46
|
+
Player*..Plyr;
|
|
47
|
+
Player*..Loop;
|
|
48
|
+
Loop<..Chapter;
|
|
49
|
+
Player*..UIprep;
|
|
50
|
+
UserRequest*..UAParser;
|
|
51
|
+
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
# Mermaid Demo
|
|
55
|
+
|
|
56
|
+
```mermaid
|
|
57
|
+
graph TD;
|
|
58
|
+
A-->B;
|
|
59
|
+
A-->C;
|
|
60
|
+
B-->D;
|
|
61
|
+
C-->D;
|
|
62
|
+
```
|
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 </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 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\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.ddDoMineButtonListener();\n \n this.addDoDemosButtonListener();\n\n // initialiseContainers should have popluated\n\n\n\n }\n\n ddDoMineButtonListener() {\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\n htmlLitPage = `<practise-master id=\"myMP3\" class=\"links\" data-plyr-provider=\"mp3\" crossorigin playsinline>\n <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=\"\" crossorigin playsinline>\n // <source src=\"${sourceURL}\" type=\"audio/ogg\"\"> </practise-master>`;\n\n htmlLitPage = `<practise-master id=\"myMP3\" class=\"links\" data-plyr-provider=\"mp3\" crossorigin playsinline>\n <source src=\"${sourceURL}\" type=\"audio/mp3\"> </practise-master>`;\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 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 // 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?");
|
|
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 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\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.ddDoMineButtonListener();\n \n this.addDoDemosButtonListener();\n\n // initialiseContainers should have popluated\n\n\n\n }\n\n ddDoMineButtonListener() {\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 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 // 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
161
|
|
|
162
162
|
/***/ }),
|
|
163
163
|
|
|
@@ -223,7 +223,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
223
223
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
224
224
|
|
|
225
225
|
"use strict";
|
|
226
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _pageSupport_pm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./pageSupport-pm */ \"./src/modules/pageSupport-pm.js\");\n/* harmony import */ var _practiseMaster__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./practiseMaster */ \"./src/modules/practiseMaster.js\");\n/**\n * module allows for the newing of a PractiseMaster class \n * a global window.PractiseMaster is created\n * \n * @module PractiseMaster Module\n * @requires Player Module\n * @requires PageSupport Module\n */\n\n\n\n\n\n\n/**\n * entry point for PractiseMaster js plugin: new PractiseMaster();\n * @class PractiseMaster\n * @property {mehtod} globals() - returns window.PractiseMaster\n * @property {method} player() - news up a Player class for each pm class element\n * @property {declaration} getElementsByClassName(\"pm\") - Elements to update with a player \n * @property {declaration} getElementsByClassName(\"pmlinkbuilder\") - Elements to update with a player \n * @property {class} PageSupport(siteCSS) - news this up with any site specific css\n * @property {object} siteCSS - an object for css specific to the host site (ex WordPress)\n */\n\nclass PractiseMasterWebComp extends HTMLElement {\n\n // static observedAttributes = [\"color\", \"size\"];\n\n\n constructor() {\n\n // Always call super first in constructor\n super();\n\n // to hold elements for player()\n // with WebComponenet will only be one (no longer array)\n\n
|
|
226
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _pageSupport_pm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./pageSupport-pm */ \"./src/modules/pageSupport-pm.js\");\n/* harmony import */ var _practiseMaster__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./practiseMaster */ \"./src/modules/practiseMaster.js\");\n/**\n * module allows for the newing of a PractiseMaster class \n * a global window.PractiseMaster is created\n * \n * @module PractiseMaster Module\n * @requires Player Module\n * @requires PageSupport Module\n */\n\n\n\n\n\n\n/**\n * entry point for PractiseMaster js plugin: new PractiseMaster();\n * @class PractiseMaster\n * @property {mehtod} globals() - returns window.PractiseMaster\n * @property {method} player() - news up a Player class for each pm class element\n * @property {declaration} getElementsByClassName(\"pm\") - Elements to update with a player \n * @property {declaration} getElementsByClassName(\"pmlinkbuilder\") - Elements to update with a player \n * @property {class} PageSupport(siteCSS) - news this up with any site specific css\n * @property {object} siteCSS - an object for css specific to the host site (ex WordPress)\n */\n\nclass PractiseMasterWebComp extends HTMLElement {\n\n // static observedAttributes = [\"color\", \"size\"];\n\n\n constructor() {\n\n // Always call super first in constructor\n super();\n\n // to hold elements for player()\n // with WebComponenet will only be one (no longer array)\n\n // this.pmElement;\n\n }\n\n\n connectedCallback() {\n\n this.initialiseContainers();\n\n }\n\n\n\n /**\n * As a temp solution to Plyr not taking P-M custom elements\n * @method\n */\n\n initialiseContainers() {\n\n\n // const PMwebcomp = document.querySelectorAll(\"practise-master\");\n\n\n // // check user has added data attributes\n\n\n // if (this.dataset.plyrProvider !== 'mp3' && this.dataset.plyrProvider !== 'mp4' && this.dataset.plyrProvider !== 'ogg' ) {\n // if ((!this.hasAttribute(\"data-plyr-embed-id\") || !this.hasAttribute(\"data-plyr-provider\"))) {\n // // data attribute doesn't exist\n\n\n // const errorText = `Error: each <practise-master> needs both 'data-plyr-embed-id' and 'data-plyr-provider' `;\n\n // this.textContent = errorText;\n\n // throw new Error(errorText);\n\n // }\n // }\n\n\n function cloneRemoveAttributes(target, source) {\n\n [...source.attributes].forEach(attr => { target.setAttribute(attr.nodeName, attr.nodeValue); source.removeAttribute(attr.name) });\n\n }\n\n\n function replaceWithDiv(node) {\n\n var pmdiv = document.createElement('div');\n\n cloneRemoveAttributes(pmdiv, node);\n\n node.classList.add('container');\n\n pmdiv.classList.add('pm');\n\n node.appendChild(pmdiv);\n\n }\n\n\n function replaceWithVideo(node) {\n\n\n var pmdiv = document.createElement('video');\n\n cloneRemoveAttributes(pmdiv, node);\n\n node.classList.add('container');\n\n pmdiv.classList.add('pm');\n\n // also need to copy all children to the new node\n // https://stackoverflow.com/a/56307130/2455159\n\n pmdiv.append(...node.childNodes);\n\n node.appendChild(pmdiv);\n\n }\n\n\n function replaceWithAudio(node) {\n\n\n var pmdiv = document.createElement('audio');\n\n cloneRemoveAttributes(pmdiv, node);\n\n node.classList.add('container');\n\n pmdiv.classList.add('pm');\n\n // also need to copy all children to the new node\n // https://stackoverflow.com/a/56307130/2455159\n\n pmdiv.append(...node.childNodes);\n\n node.appendChild(pmdiv);\n\n }\n\n\n\n\n\n if (this.dataset.plyrProvider === 'vimeo' || this.dataset.plyrProvider === 'youtube') {\n\n replaceWithDiv(this);\n\n } else if (this.dataset.plyrProvider === 'mp4') {\n\n replaceWithVideo(this);\n\n } else if (this.dataset.plyrProvider === 'mp3') {\n\n replaceWithAudio(this);\n\n }\n\n\n\n\n // then need to new up a PractiseMaster class\n // only want one of these (per page) once init'd then pass array of elements then call PM.player()\n\n window.PMpageSupport = new _pageSupport_pm__WEBPACK_IMPORTED_MODULE_0__[\"default\"]();\n window.PractiseMaster = new _practiseMaster__WEBPACK_IMPORTED_MODULE_1__[\"default\"](this);\n\n this.globals();\n\n\n }\n\n\n \n /**\n * instantiates any global variables from the PractiseMaster class\n * @method\n */\n\n globals() {\n\n\n window.PractiseMaster.Loop = (x, y, z) => { return window.PMpageSupport.PMloop(x, y, z); };\n\n\n window.PractiseMaster.Chapter = (x, y, z) => { return window.PMpageSupport.PMchapter(x, y, z); };\n\n\n // window.PractiseMaster.PMloop = function (id, startTime, endTime) { return window.PractiseMaster.PageSupport.PMloop(id, startTime, endTime) };\n // window.PractiseMaster.PMchapter = function (id, startTime, endTime) { return window.PractiseMaster.PageSupport.PMloop(id, startTime, endTime) };\n\n }\n\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PractiseMasterWebComp);\n\n//# sourceURL=webpack://practisemaster/./src/modules/practisemasterWebComponent.js?");
|
|
227
227
|
|
|
228
228
|
/***/ }),
|
|
229
229
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "practisemaster",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.38",
|
|
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",
|