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)


# CI pathways,  take care each commit triggers a github action!

CI pathway strategy: the idea is to automate many of the steps that are involved in testing.  Publishing to NPM can be automated, triggering Browserstack tests can also be automated.  Browserstack badges also can be added to display test results without manual intervention. 


- see actions [readme.md](https://github.com/StephanLuis/PractiseMaster/tree/dev-(NPM-DEV-TAG)/.github/workflows) which explains the purpose of each 'work flow'
- remeber that if the actions are wrong and triggered automatically ... it can be BAD!
- these PM actions trigger actions on [BS tests repository](https://github.com/StephanLuis/BrowserStackSelenium/tree/main/.github/workflows)
- tips on [disabling and skipping actions](https://docs.github.com/en/actions/managing-workflow-runs/skipping-workflow-runs)


see actions [readme.md](https://github.com/StephanLuis/PractiseMaster/tree/dev-(NPM-DEV-TAG)/.github/workflows) which explains the purpose of each 'work flow'

| Dev Stage         | Pub Trigger | NPM Endpoint|
| ----------- | ------------- |------------ |
| Local Debug/ Manual Tests | local devbuild| gitpod ./dist/bundle on 8000  ([skip ci] or [other](https://docs.github.com/en/actions/managing-workflow-runs/skipping-workflow-runs) in commit message)
| BS tests    | Git Commit Bundle.js | https://cdn.jsdelivr.net/npm/practisemaster@dev/dist/PMbundle.js |
| Release   | Manual Build and Release (no tag)     | https://cdn.jsdelivr.net/npm/practisemaster@latest/dist/PMbundle.js|
| Homepage w/ Style | None | https://cdn.jsdelivr.net/gh/StephanLuis/PractiseMasterJSplugin@latest/nonobfs/PMbundle.js|

## NPM  

stephanluis  
J!  
stephan@learnsense.org

manual dev publish: npm publish --tag dev


# End To End Test URLs

CodeSandbox (Sign In with Github)

PM: Debugging on gitpod 8000, dev test on NPM and code sandbox, release on PM website.
See https://github.com/StephanLuis/BrowserStackSelenium/blob/main/TestURLs/PMtestURLs.mjs
(on BSSelenium Repository)


# Display Flowchart [(Edit Flowchart)](https://www.mermaidchart.com/app/projects/483c18fa-2653-4745-b930-79379ef18df8/diagrams/5f4e294a-c441-4f38-9dcd-55abffb63a8b/version/v0.1/edit)
--mermaid: stephan@learnsense.org J!--

```mermaid
---
title: PM Device And Browser Response
---
flowchart TD
    A["Problems: Phone Screen size, Safari mouse hover, book mode"] -- "ua-parser-js" --> C@{ label: ".getDevice()<br>.type === 'mobile'" }
    C -- Yes --> D["Display Full Screen Button Only fa:fa-up-right-and-down-left-from-center (burger on full screen)"]
    D --> E["pageSupport"]
    C -- No --> G["Link Editor Desktop            (no burger)"]
    E --> F["show burger"]
    G -- No --> E
    G -- Yes --> n2["OffScreen Mode"]
    C@{ shape: diamond}
    G@{ shape: diam}
    F@{ shape: rect}
    
```



# Class Diagram  [(Edit Diagram)](https://www.mermaidchart.com/raw/64fb96ef-ce96-4acb-a36e-ee34ff79799d?theme=light&version=v0.1&format=svg)

```mermaid
---
title: Class Diagram (CD) PractiseMaster
---
classDiagram
note "define element for PractiseMasterWebComp <- PM.js "
LoopEditorWebComp"1"..|>"*"DocumentObject: Realisation PM.js
PractiseMasterWebComp"1"..|>"*"DocumentObject
LoopEditorWebComp<|--PractiseMasterWebComp: Inheritance
PractiseMasterWebComp <|-- HTMLElement
PractiseMasterWebComp*--PractiseMaster: Composition
PageSupport*--HostSite
PageSupport*--Helpers
PageSupport*--UserRequest
PractiseMasterWebComp"1"*--"1"PageSupport
PractiseMaster"1"*--"*"Player
Player*--Plyr
Player*--Loop
Loop<|--Chapter: Inheritance
Player*--UIprep
UserRequest<..UAParser: Dependancy
UIprep<..input-duration: Dependancy


class LoopEditorWebComp{
    +constructor()
}
class PractiseMasterWebComp {
+constructor(+super())
+connectedCallback(+initialiseContainers())
+initialiseContainers()
    ++replaceWithDiv(node)
    ++replaceWithVideo(node)
    ++replaceWithAudio(node)
+globals()
}    
class PageSupport {
        +constructor()

}
class PractiseMaster {
+constructor()
}
class HostSite{
    +constructor()
    +checkURL()
    +formatIndependantCSS()
    +cssForFiddleHedVimeo()

}
class Helpers{
    +constructor()
    +delegate(selector, handler)
    +delegateByID(selector, handler)
    +delegateByIDparams(selector, start, end, handler)
    +toStringTime(numberSeconds)
    +secondsNumber(param)
    +hmsuToSecondsOnly(str)
    +redWarningValidation(id)
    +getPMid(childElement)

}
class Player{
    +constructor()
    +setVideoListeners(id) object PMinstance_id
}
class Plyr{
    +constructor()
}
class Loop{
    +constructor()
}
class Chapter{
    +constructor()
}
class UIprep{
    +constructor()
    +addAudioStyle(id)
    +addHTMLlink()
    +addHTMLchapter()
    +disableDurationInputs(id)
    +addLinkButton(id)
    +styleInputDuration(id)
    +applyPlyrReadyCssHTMLSettings()like static
    +applyPMReadyCssHTMLSettings()
    +setOffPlayerControls(player)
    +offPlayerControls(id)


}
class UserRequest{
    +constructor()
}
class UAParser{
    +contructor();
}
class input-duration{
    +constructor();
}

class DocumentObject{
    +PMbundle.js
 +HTMLElement practise-master
 +HTMLElement loop-editor
    +constructor();
}
```
=======

# Display Flowchart

https://drive.google.com/drive/folders/1KXWqXpzDOVReIaBMAkTHVmr0r4kKMGL6?usp=sharing