Add replicant with last events to streamelement service (#494)

hlxid · web-flow · commit 8899bc29261c · 2022-07-15T22:49:33.000+02:00
* Add replicant with last events to streamelement service

* Fix lintern warning due to empty object in se-events graphic

* Fix vue import in streamelements-events

* Fix lockfile

* Remove streamelements sample vue path alias

* Address review comments
diff --git a/package-lock.json b/package-lock.json
diff --git a/samples/streamelements-events/extension/index.ts b/samples/streamelements-events/extension/index.ts
@@ -1,11 +1,12 @@
 import { NodeCG } from "nodecg-types/types/server";
-import { StreamElementsServiceClient } from "nodecg-io-streamelements";
+import { StreamElementsReplicant, StreamElementsServiceClient } from "nodecg-io-streamelements";
 import { requireService } from "nodecg-io-core";
 
 module.exports = function (nodecg: NodeCG) {
     nodecg.log.info("Sample bundle for StreamElements started");
 
     const streamElements = requireService<StreamElementsServiceClient>(nodecg, "streamelements");
+    const streamElementsReplicant = nodecg.Replicant<StreamElementsReplicant>("streamelements");
 
     streamElements?.onAvailable((client) => {
         nodecg.log.info("SE client has been updated, registering handlers now.");
@@ -30,6 +31,10 @@ module.exports = function (nodecg: NodeCG) {
 
         client.onGift((data) => {
             if (data.data.tier) {
+                // We want to display the tier as 1, 2, 3
+                // However StreamElements stores the sub tiers as 1000, 2000 and 3000.
+                // So we divide the tier by 1000 to get the tier in our expected format.
+                // We don't need to care about prime subs here because they cannot be gifted.
                 const tier = (Number.parseInt(data.data.tier) / 1000).toString();
                 if (data.data.sender) {
                     nodecg.log.info(
@@ -62,6 +67,8 @@ module.exports = function (nodecg: NodeCG) {
         client.onTest((data) => {
             nodecg.log.info(JSON.stringify(data));
         });
+
+        client.setupReplicant(streamElementsReplicant);
     });
 
     streamElements?.onUnavailable(() => nodecg.log.info("SE client has been unset."));
diff --git a/samples/streamelements-events/extension/tsconfig.json b/samples/streamelements-events/extension/tsconfig.json
@@ -0,0 +1,11 @@
+{
+    "extends": "nodecg-io-tsconfig",
+    "references": [
+        {
+            "path": "../../../nodecg-io-core"
+        },
+        {
+            "path": "../../../services/nodecg-io-streamelements"
+        }
+    ]
+}
diff --git a/samples/streamelements-events/graphics/esbuild.config.js b/samples/streamelements-events/graphics/esbuild.config.js
@@ -0,0 +1,55 @@
+// @ts-check
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+/* eslint-disable no-console */
+
+const esbuild = require("esbuild");
+const esbuildAlias = require("esbuild-plugin-alias");
+const path = require("path");
+const process = require("process");
+const fs = require("fs");
+
+const args = new Set(process.argv.slice(2));
+const prod = process.env.NODE_ENV === "production";
+
+if (args.has("--clean") || args.has("--rebuild")) {
+    // Remove dist folder
+    try {
+        fs.rmSync(path.join(__dirname, "index.js"));
+    } catch (error) {
+        console.log(error);
+    }
+
+    if (!args.has("--rebuild")) {
+        process.exit(0);
+    }
+}
+
+/** @type {import('esbuild').BuildOptions} */
+const BuildOptions = {
+    bundle: true,
+    entryPoints: [path.join(__dirname, "index.ts")],
+    minify: prod,
+    outfile: path.join(__dirname, "index.js"),
+    platform: "browser",
+    sourcemap: true,
+    watch: args.has("--watch"),
+    plugins: [
+        esbuildAlias({
+            "vue": require.resolve("vue/dist/vue.esm-bundler.js"),
+        })
+    ]
+};
+
+esbuild
+    .build(BuildOptions)
+    .catch(() => process.exit(1))
+    .then((result) => {
+        if (result.errors.length > 0) {
+            console.error(result.errors);
+        }
+
+        if (result.warnings.length > 0) {
+            console.error(result.warnings);
+        }
+    });
diff --git a/samples/streamelements-events/graphics/index.html b/samples/streamelements-events/graphics/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charstreamElementsReplicantt="UTF-8" />
+        <title>streamelements-events sample bundle</title>
+        <style>
+            body {
+                font-family: sans-streamElementsReplicantrif;
+            }
+            /* don't show container until vue has compiled all templates */
+            [v-cloak] {
+                display: none;
+            }
+        </style>
+    </head>
+
+    <body>
+        <h1>streamelements-events sample bundle</h1>
+        <div id="app" v-cloak>
+            <p>Newest events of configured streamelements instance:</p>
+            <p>
+                Last subscriber:
+                <span v-if="streamElementsReplicant?.lastSubscriber">
+                    {{ streamElementsReplicant?.lastSubscriber?.data.displayName }} subscribed for {{
+                    streamElementsReplicant?.lastSubscriber?.data.amount }} months ({{ subTier }}).
+                </span>
+                <span v-else>none</span>
+            </p>
+            <p>
+                Last tip:
+                <span v-if="streamElementsReplicant?.lastTip">
+                    {{ streamElementsReplicant?.lastSubscriber?.data.displayName }} subscribed for {{
+                    streamElementsReplicant?.lastSubscriber?.data.amount }} months.
+                </span>
+                <span v-else>none</span>
+            </p>
+            <p>
+                Last cheer:
+                <span v-if="streamElementsReplicant?.lastCheer">
+                    {{ streamElementsReplicant?.lastCheer?.data.amount }} bits by {{
+                    streamElementsReplicant?.lastCheer?.data.displayName }}
+                </span>
+                <span v-else>none</span>
+            </p>
+            <p>
+                Last follow:
+                <span v-if="streamElementsReplicant?.lastFollow">
+                    {{ streamElementsReplicant?.lastFollow?.data.displayName }}
+                </span>
+                <span v-else>none</span>
+            </p>
+            <p>
+                Last raid:
+                <span v-if="streamElementsReplicant?.lastRaid">
+                    {{ streamElementsReplicant?.lastRaid?.data.displayName }} raided with {{
+                    streamElementsReplicant?.lastRaid?.data.amount }} viewers
+                </span>
+                <span v-else>none</span>
+            </p>
+            <p>
+                Last host:
+                <span v-if="streamElementsReplicant?.lastHost">
+                    {{ streamElementsReplicant?.lastHost?.data.displayName }} hosted with {{
+                    streamElementsReplicant?.lastHost?.data.viewers }} viewers
+                </span>
+                <span v-else>none</span>
+            </p>
+        </div>
+
+        <script src="index.js"></script>
+    </body>
+</html>
diff --git a/samples/streamelements-events/graphics/index.ts b/samples/streamelements-events/graphics/index.ts
@@ -0,0 +1,36 @@
+/// <reference types="nodecg-types/types/browser" />
+import { createApp, defineComponent } from "vue";
+import type { StreamElementsReplicant } from "nodecg-io-streamelements";
+
+const replicant = nodecg.Replicant<StreamElementsReplicant>("streamelements");
+
+const mainComponent = defineComponent<unknown, unknown, { streamElementsReplicant: StreamElementsReplicant }>({
+    data() {
+        return {
+            streamElementsReplicant: {},
+        };
+    },
+    created() {
+        replicant.on("change", (newVal) => {
+            this.streamElementsReplicant = newVal;
+        });
+    },
+    computed: {
+        subTier() {
+            const sub = this.streamElementsReplicant.lastSubscriber;
+            if (!sub || !sub.data.tier) return undefined;
+
+            if (sub.data.tier === "prime") {
+                return "Twitch Prime";
+            }
+
+            // We want to display the tier as 1, 2, 3
+            // However StreamElements stores the sub tiers as 1000, 2000 and 3000.
+            // So we divide the tier by 1000 to get the tier in our expected format.
+            const tierLevel = Number.parseInt(sub.data.tier) / 1000;
+            return `Tier ${tierLevel}`;
+        },
+    },
+});
+
+createApp(mainComponent).mount("#app");
diff --git a/samples/streamelements-events/graphics/tsconfig.json b/samples/streamelements-events/graphics/tsconfig.json
@@ -0,0 +1,17 @@
+{
+    "extends": "nodecg-io-tsconfig",
+    "compilerOptions": {
+        "target": "ES2015",
+        "lib": ["ES2015", "dom"],
+        "module": "ES2015",
+        "noEmit": true
+    },
+    "references": [
+        {
+            "path": "../../../nodecg-io-core"
+        },
+        {
+            "path": "../../../services/nodecg-io-streamelements"
+        }
+    ]
+}
diff --git a/samples/streamelements-events/package.json b/samples/streamelements-events/package.json
@@ -2,19 +2,33 @@
     "name": "streamelements-events",
     "version": "0.3.0",
     "private": true,
+    "scripts": {
+        "build": "node graphics/esbuild.config.js",
+        "watch": "npm run build -- --watch"
+    },
     "nodecg": {
         "compatibleRange": "^1.1.1",
         "bundleDependencies": {
             "nodecg-io-streamelements": "^0.3.0"
-        }
+        },
+        "graphics": [
+            {
+                "file": "index.html",
+                "width": "1920",
+                "height": "1080"
+            }
+        ]
     },
     "license": "MIT",
     "dependencies": {
         "@types/node": "^18.0.3",
-        "nodecg-types": "^1.8.3",
+        "esbuild": "^0.14.23",
+        "esbuild-plugin-alias": "^0.2.1",
         "nodecg-io-core": "^0.3.0",
         "nodecg-io-streamelements": "^0.3.0",
+        "nodecg-io-tsconfig": "^1.0.0",
+        "nodecg-types": "^1.8.3",
         "typescript": "^4.7.4",
-        "nodecg-io-tsconfig": "^1.0.0"
+        "vue": "^3.2.31"
     }
 }
diff --git a/samples/streamelements-events/tsconfig.json b/samples/streamelements-events/tsconfig.json
@@ -1,11 +1,14 @@
 {
-    "extends": "nodecg-io-tsconfig",
+    "files": [],
+    "compilerOptions": {
+        "composite": true
+    },
     "references": [
         {
-            "path": "../../nodecg-io-core"
+            "path": "./extension"
         },
         {
-            "path": "../../services/nodecg-io-streamelements"
+            "path": "./graphics"
         }
     ]
 }
diff --git a/services/nodecg-io-serial/extension/SerialClient.ts b/services/nodecg-io-serial/extension/SerialClient.ts
@@ -23,11 +23,7 @@ export interface SerialServiceConfig {
 
 export class SerialServiceClient extends SerialPort {
     private parser: ReadlineParser;
-    constructor(
-        options: SerialPortOpenOptions<AutoDetectTypes>,
-        protocol?: ReadlineOptions, // TODO: maybe rename this to parseOptions or something
-        callback?: ErrorCallback,
-    ) {
+    constructor(options: SerialPortOpenOptions<AutoDetectTypes>, protocol?: ReadlineOptions, callback?: ErrorCallback) {
         super(options, callback);
         this.parser = this.pipe(new ReadlineParser(protocol));
     }
diff --git a/services/nodecg-io-streamelements/extension/StreamElements.ts b/services/nodecg-io-streamelements/extension/StreamElements.ts
@@ -2,6 +2,17 @@ import io = require("socket.io-client");
 import { Result, emptySuccess, error } from "nodecg-io-core";
 import { StreamElementsEvent } from "./StreamElementsEvent";
 import { EventEmitter } from "events";
+import { Replicant } from "nodecg-types/types/server";
+
+export interface StreamElementsReplicant {
+    lastSubscriber?: StreamElementsEvent;
+    lastTip?: StreamElementsEvent;
+    lastCheer?: StreamElementsEvent;
+    lastGift?: StreamElementsEvent;
+    lastFollow?: StreamElementsEvent;
+    lastRaid?: StreamElementsEvent;
+    lastHost?: StreamElementsEvent;
+}
 
 export class StreamElementsServiceClient extends EventEmitter {
     private socket: SocketIOClient.Socket;
@@ -131,4 +142,18 @@ export class StreamElementsServiceClient extends EventEmitter {
     public onTest(handler: (data: StreamElementsEvent) => void): void {
         this.on("test", handler);
     }
+
+    public setupReplicant(rep: Replicant<StreamElementsReplicant>): void {
+        if (rep.value === undefined) {
+            rep.value = {};
+        }
+
+        this.on("subscriber", (data) => (rep.value.lastSubscriber = data));
+        this.on("tip", (data) => (rep.value.lastTip = data));
+        this.on("cheer", (data) => (rep.value.lastCheer = data));
+        this.on("gift", (data) => (rep.value.lastGift = data));
+        this.on("follow", (data) => (rep.value.lastFollow = data));
+        this.on("raid", (data) => (rep.value.lastRaid = data));
+        this.on("host", (data) => (rep.value.lastHost = data));
+    }
 }
diff --git a/services/nodecg-io-streamelements/extension/index.ts b/services/nodecg-io-streamelements/extension/index.ts
@@ -7,7 +7,7 @@ interface StreamElementsServiceConfig {
     handleTestEvents: boolean;
 }
 
-export { StreamElementsServiceClient } from "./StreamElements";
+export { StreamElementsServiceClient, StreamElementsReplicant } from "./StreamElements";
 
 module.exports = (nodecg: NodeCG) => {
     const schemaPath = [__dirname, "../streamelements-schema.json"];

Original file line number	Diff line number	Diff line change
`@@ -1,11 +1,14 @@`
`1`	`1`	`{`
`2`		`- "extends": "nodecg-io-tsconfig",`
	`2`	`+ "files": [],`
	`3`	`+ "compilerOptions": {`
	`4`	`+ "composite": true`
	`5`	`+ },`
`3`	`6`	`"references": [`
`4`	`7`	`{`
`5`		`- "path": "../../nodecg-io-core"`
	`8`	`+ "path": "./extension"`
`6`	`9`	`},`
`7`	`10`	`{`
`8`		`- "path": "../../services/nodecg-io-streamelements"`
	`11`	`+ "path": "./graphics"`
`9`	`12`	`}`
`10`	`13`	`]`
`11`	`14`	`}`