lichen-community-systems · duhrer · Jan 26, 2023 · Jan 26, 2023 · Jan 26, 2023 · Jan 30, 2023
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,7 +1,8 @@
 {
     "extends": "eslint-config-fluid",
     "env": {
-        "browser": true
+        "browser": true,
+        "es6": true
     },
     "parserOptions": {
         "ecmaVersion": 8

diff --git a/.fluidlintallrc.json b/.fluidlintallrc.json
@@ -35,6 +35,10 @@
                 "./tests/**/*",
                 "./*",
                 "!./audit-resolve.json"
+            ],
+            "excludes": [
+                "./tests/midi/**/*.mid",
+                "./tests/midi/**/*.syx"
             ]
         }
     }

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -19,21 +19,28 @@ jobs:
       HEADLESS: true
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3.3.0
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3.6.0
         with:
           node-version: ${{ matrix.node-version }}
 
       - name: Install Node.js dependencies
         run: npm install
 
-      - name: Node Tests
+      - name: Browser Tests
         run: xvfb-run --auto-servernum npm test
 
+      - name: Archive Code Coverage Report
+        continue-on-error: true
+        uses: actions/[email protected]
+        with:
+          name: Code Coverage Report
+          path: reports/
+
       - name: Cleanup after xvfb
-        uses: bcomnes/cleanup-xvfb@v1
+        uses: bcomnes/cleanup-xvfb@v1.0.8
 
       - name: Security Audit
         run: npm audit --omit dev

diff --git a/demos/css/sendQuarterFrame.css b/demos/css/sendQuarterFrame.css
@@ -0,0 +1,10 @@
+/*
+ * Copyright 2023, Tony Atkins
+ *
+ *  Licensed under the MIT license, see LICENSE for details.
+ */
+.start-button,
+.stop-button {
+    border-radius: 0.25rem;
+    padding: 1rem;
+}
diff --git a/demos/css/smfMetadata.css b/demos/css/smfMetadata.css
@@ -0,0 +1,37 @@
+/*
+ * Copyright 2023, Tony Atkins
+ *
+ *  Licensed under the MIT license, see LICENSE for details.
+ */
+.smf-metadata {
+    margin-top: 1rem;
+    padding-left: 2rem;
+}
+
+.smf-metadata-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.metadata-header {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.metadata-header > .name {
+    align-content: flex-start;
+    font-weight: bold;
+    width: 100%;
+}
+
+.metadata-header > .copyright {
+    align-content: flex-end;
+    width: 100%;
+}
+
+.text {
+    font-style: italic;
+    margin-top: 1rem;
+}
diff --git a/demos/css/smfPlayer.css b/demos/css/smfPlayer.css
@@ -0,0 +1,23 @@
+/*
+ * Copyright 2023, Tony Atkins
+ *
+ *  Licensed under the MIT license, see LICENSE for details.
+ */
+
+.main-panel {
+    display: none;
+}
+
+.controls {
+    column-gap: 1rem;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+
+.controls button {
+    border-radius: 1rem;
+    font-size: 1.5rem;
+    padding: 1rem;
+    width: 50%;
+}
diff --git a/demos/css/smfViewer.css b/demos/css/smfViewer.css
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2023, Tony Atkins
+ *
+ *  Licensed under the MIT license, see LICENSE for details.
+ */
+
+.smf-demo-output {
+    font-family: monospace;
+    font-size: 1.25rem;
+    padding-left: 2rem;
+}
+
+.smf-demo-error {
+    background-color: #fcc;
+    border: 1px solid red;
+    border-radius: 0.33rem;
+    color: black;
+    display: none;
+    font-size: 1.5rem;
+    padding: 2rem;
+}
+
+.smf-demo-error.has-error {
+    display: inherit;
+}
diff --git a/demos/css/timestamp.css b/demos/css/timestamp.css
@@ -0,0 +1,23 @@
+/*
+ * Copyright 2023, Tony Atkins
+ *
+ *  Licensed under the MIT license, see LICENSE for details.
+ */
+
+.timestamp {
+    align-items: stretch;
+    column-gap: 2rem;
+    display: flex;
+    flex-direction: row;
+    font-size: 10rem;
+    padding: 1rem;
+}
+
+.timestamp > * {
+    align-content: center;
+    border: 1px solid #969696;
+    border-radius: 0.5rem;
+    font-family: monospace;
+    text-align: center;
+    width: 100%;
+}
diff --git a/demos/index.html b/demos/index.html
@@ -12,23 +12,29 @@
     <link type="text/css" rel="stylesheet" href="../src/css/youme.css"/>
 </head>
 <body>
-<h3>"Youme" Demos</h3>
+    <h3>"Youme" Demos</h3>
 
-<p>The pages below demonstrate various components provided by this package.</p>
+    <p>The pages below demonstrate various components provided by this package.</p>
 
-<ul>
-    <li>
-        <a href="./passthrough.html">"Passthrough": Relay messages from a single input to a single output.</a>
-    </li>
-    <li>
-        <a href="./multi-passthrough.html">"Multi-Passthrough": Relay messages from one or more inputs to one or more outputs.</a>
-    </li>
-    <li>
-        <a href="./message-monitor.html">"Message Monitor": Display MIDI messages received from one or more inputs.</a>
-    </li>
-    <li>
-        <a href="./midi-console.html">"MIDI Console": Convert MIDI messages between hex and JSON, send them to an output.</a>
-    </li>
-</ul>
+    <ul>
+        <li>
+            <a href="./passthrough.html">"Passthrough": Relay messages from a single input to a single output.</a>
+        </li>
+        <li>
+            <a href="./multi-passthrough.html">"Multi-Passthrough": Relay messages from one or more inputs to one or more outputs.</a>
+        </li>
+        <li>
+            <a href="./message-monitor.html">"Message Monitor": Display MIDI messages received from one or more inputs.</a>
+        </li>
+        <li>
+            <a href="./midi-console.html">"MIDI Console": Convert MIDI messages between hex and JSON, send them to an output.</a>
+        </li>
+        <li>
+            <a href="./receive-quarter-frame.html">"Quarter Frame Receiver": Update a local clock based on external quarter frame MTC messages.</a>
+        </li>
+        <li>
+            <a href="./receive-quarter-frame.html">"Quarter Frame Sender": Send quarter frame MTC messages to an external receiver to control its clock.</a>
+        </li>
+    </ul>
 </body>
 </html>
diff --git a/demos/js/receiveQuarterFrame.js b/demos/js/receiveQuarterFrame.js
@@ -0,0 +1,103 @@
+/*
+ * Copyright 2023, Tony Atkins
+ *
+ *  Licensed under the MIT license, see LICENSE for details.
+ */
+(function (fluid) {
+    "use strict";
+    var youme = fluid.registerNamespace("youme");
+    fluid.defaults("youme.demos.quarterFrame.receive", {
+        gradeNames: ["youme.templateRenderer"],
+        markup: {
+            container: "<div class='quarter-frame'><div class='timestamp'></div><div class='input'></div></div>"
+        },
+        selectors: {
+            input: ".input",
+            timestamp: ".timestamp"
+        },
+        model: {
+            rate: 3,
+            hour: 0,
+            minute: 0,
+            second: 0,
+            frame: 0
+        },
+
+        components: {
+            timestamp: {
+                type: "youme.demos.timestamp",
+                container: "{that}.dom.timestamp",
+                options: {
+                    model: {
+                        hour: "{youme.demos.quarterFrame.receive}.model.hour",
+                        minute: "{youme.demos.quarterFrame.receive}.model.minute",
+                        second: "{youme.demos.quarterFrame.receive}.model.second"
+                    }
+                }
+            },
+            input: {
+                type: "youme.portSelectorView.input",
+                container: "{that}.dom.input",
+                options: {
+                    desiredPortSpec: { name: "IAC Driver Bus.+" },
+                    listeners: {
+                        "onMessage.handleMessage": {
+                            funcName: "youme.demos.quarterFrame.receive.handleMessage",
+                            args: ["{youme.demos.quarterFrame.receive}", "{arguments}.0"] // message
+                        }
+                    }
+                }
+            }
+        }
+    });
+
+    youme.demos.quarterFrame.receive.handleMessage = function (that, message) {
+        if (message.type === "quarterFrameMTC") {
+            switch (message.piece) {
+                case 0:
+                    var oldHighFrameNibble = that.model.frame & 16;
+                    var frameValueWithNewLowNibble = oldHighFrameNibble + (message.frame & 15);
+                    that.applier.change("frame", frameValueWithNewLowNibble);
+                    break;
+                case 1:
+                    var oldLowFrameNibble = that.model.frame & 15;
+                    var frameValueWithNewHighNibble = (message.frame & 16) + oldLowFrameNibble;
+                    that.applier.change("frame", frameValueWithNewHighNibble);
+                    break;
+                case 2:
+                    var oldHighSecondNibble = that.model.second & 48;
+                    var secondValueWithNewLowNibble = oldHighSecondNibble + (message.second & 15);
+                    that.applier.change("second", secondValueWithNewLowNibble);
+                    break;
+                case 3:
+                    var oldLowSecondNibble = that.model.second & 15;
+                    var secondValueWithNewHighNibble = (message.second & 48) + oldLowSecondNibble;
+                    that.applier.change("second", secondValueWithNewHighNibble);
+                    break;
+                case 4:
+                    var oldHighMinuteNibble = that.model.minute & 48;
+                    var minuteValueWithNewLowNibble = oldHighMinuteNibble + (message.minute & 15);
+                    that.applier.change("minute", minuteValueWithNewLowNibble);
+                    break;
+                case 5:
+                    var oldLowMinuteNibble = that.model.minute & 15;
+                    var minuteValueWithNewHighNibble = (message.minute & 48) + oldLowMinuteNibble;
+                    that.applier.change("minute", minuteValueWithNewHighNibble);
+                    break;
+                case 6:
+                    var oldHighHourNibble = that.model.hour & 16;
+                    var hourValueWithNewLowNibble = oldHighHourNibble + (message.hour & 15);
+                    that.applier.change("hour", hourValueWithNewLowNibble);
+                    break;
+                case 7:
+                    var oldLowHourNibble = that.model.hour & 15;
+                    var hourValueWithNewHighNibble = (message.hour & 16) + oldLowHourNibble;
+                    that.applier.change("hour", hourValueWithNewHighNibble);
+                    that.applier.change("rate", message.rate);
+                default:
+                    fluid.log(fluid.logLevel.ERROR, "Invalid piece number: " + message.piece);
+            }
+
+        }
+    };
+})(fluid);