practisemaster v1.1.17

This is the PractiseMaster repo, treat it with respect!

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 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
• tips on disabling and skipping actions

see actions readme.md which explains the purpose of each 'work flow'

NPM

stephanluis
J!
stephan@learnsense.org

manual dev publish: npm publish --tag dev

End To End Test URLs

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)

---
title: PM Device And Browser Response
---
flowchart TD
    A[Problems: Phone Screen size, Safari mouse hover] 
    A --> |ua-parser-js| C{".getDevice()<br>.type === 'mobile'"}
    C -->|Yes| D[Display Full Screen Button Only fa:fa-up-right-and-down-left-from-center]
    C -->|No| E[pageSupport]
    E --> F{checkUserBrowser<br>Safari}
    F-->|Yes| G[Static Controls]
    F-->|No| H[Unmod PM controls]
    

Class Diagram (Edit Diagram)

---
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