feat: add long press mixin

packages/@lightningjs/ui-components-test-utils/src/lightning-test-renderer.js

@@ -53,6 +53,7 @@ function keyPress(elm, key) {
       [`_handle${keyEvt.key}`, '_handleKey'],
       {
         ...pressEvent,
+        timeStamp: Date.now(),
         type: 'keydown',
         ...keyEvt
       }
@@ -71,7 +72,12 @@ function keyRelease(elm, key) {
   ) {
     elm.stage.application.focusBottomUpEvent(
       [`_handle${keyEvt.key}Release`, '_handleKeyRelease'],
-      { ...pressEvent, type: 'keyup', ...keyEvt }
+      {
+        ...pressEvent,
+        timeStamp: Date.now(),
+        type: 'keyup',
+        ...keyEvt
+      }
     );
   }
 }

packages/@lightningjs/ui-components/src/mixins/withLongPress/__snapshots__/withLongPress.test.js.snap

@@ -0,0 +1,197 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`withLongPress renders 1`] = `
+{
+  "Component": {
+    "Background": {
+      "active": false,
+      "alpha": 1,
+      "attached": true,
+      "boundsMargin": null,
+      "clipping": false,
+      "color": 4294967295,
+      "enabled": true,
+      "flex": false,
+      "flexItem": false,
+      "h": 0,
+      "isComponent": undefined,
+      "mount": 0,
+      "mountX": 0,
+      "mountY": 0,
+      "pivot": 0.5,
+      "pivotX": 0.5,
+      "pivotY": 0.5,
+      "ref": "Background",
+      "renderOfScreen": undefined,
+      "renderToTexture": false,
+      "scale": 1,
+      "scaleX": 1,
+      "scaleY": 1,
+      "state": undefined,
+      "tag": [Function],
+      "tags": [
+        "Background",
+      ],
+      "texture": {
+        "type": "StaticCanvasTexture",
+      },
+      "visible": true,
+      "w": 0,
+      "x": 0,
+      "y": 0,
+      "zIndex": 0,
+    },
+    "Tile": {
+      "active": false,
+      "alpha": 1,
+      "attached": true,
+      "boundsMargin": null,
+      "children": {
+        "Artwork": {
+          "active": false,
+          "alpha": 0.001,
+          "attached": true,
+          "boundsMargin": null,
+          "children": {
+            "Image": {
+              "active": false,
+              "alpha": 1,
+              "attached": true,
+              "boundsMargin": null,
+              "clipping": false,
+              "color": 4294967295,
+              "enabled": true,
+              "flex": false,
+              "flexItem": false,
+              "h": 180,
+              "isComponent": undefined,
+              "mount": 0,
+              "mountX": 0,
+              "mountY": 0,
+              "pivot": 0.5,
+              "pivotX": 0.5,
+              "pivotY": 0.5,
+              "ref": "Image",
+              "renderOfScreen": undefined,
+              "renderToTexture": false,
+              "scale": 1,
+              "scaleX": 1,
+              "scaleY": 1,
+              "state": undefined,
+              "tag": [Function],
+              "tags": [
+                "Image",
+              ],
+              "texture": {
+                "src": "https://image.tmdb.org/t/p/w500/zHdQ6yaqDf3OQO5uhr0auAgwK6O.jpg",
+                "type": "CustomImageTexture",
+              },
+              "visible": true,
+              "w": 320,
+              "x": 0,
+              "y": 0,
+              "zIndex": 1,
+            },
+          },
+          "clipping": false,
+          "color": 4294967295,
+          "enabled": true,
+          "flex": false,
+          "flexItem": false,
+          "h": 180,
+          "hasFinalFocus": false,
+          "hasFocus": false,
+          "isComponent": true,
+          "mount": 0.5,
+          "mountX": 0.5,
+          "mountY": 0.5,
+          "pivot": 0.5,
+          "pivotX": 0.5,
+          "pivotY": 0.5,
+          "ref": "Artwork",
+          "renderOfScreen": undefined,
+          "renderToTexture": true,
+          "scale": 1,
+          "scaleX": 1,
+          "scaleY": 1,
+          "state": "",
+          "tag": [Function],
+          "tags": [
+            "Artwork",
+          ],
+          "type": "Artwork",
+          "visible": true,
+          "w": 320,
+          "x": 160,
+          "y": 90,
+          "zIndex": 0,
+        },
+        "Content": {
+          "active": false,
+          "alpha": 1,
+          "attached": true,
+          "boundsMargin": null,
+          "clipping": false,
+          "color": 4294967295,
+          "enabled": true,
+          "flex": false,
+          "flexItem": false,
+          "h": 180,
+          "isComponent": undefined,
+          "mount": 0.5,
+          "mountX": 0.5,
+          "mountY": 0.5,
+          "pivot": 0.5,
+          "pivotX": 0.5,
+          "pivotY": 0.5,
+          "ref": "Content",
+          "renderOfScreen": undefined,
+          "renderToTexture": false,
+          "scale": 1,
+          "scaleX": 1,
+          "scaleY": 1,
+          "state": undefined,
+          "tag": [Function],
+          "tags": [
+            "Content",
+          ],
+          "visible": true,
+          "w": 320,
+          "x": 160,
+          "y": 90,
+          "zIndex": 0,
+        },
+      },
+      "clipping": false,
+      "color": 4294967295,
+      "enabled": true,
+      "flex": false,
+      "flexItem": false,
+      "h": 0,
+      "isComponent": undefined,
+      "mount": 0,
+      "mountX": 0,
+      "mountY": 0,
+      "pivot": 0.5,
+      "pivotX": 0.5,
+      "pivotY": 0.5,
+      "ref": "Tile",
+      "renderOfScreen": undefined,
+      "renderToTexture": false,
+      "scale": 1,
+      "scaleX": 1,
+      "scaleY": 1,
+      "state": undefined,
+      "tag": [Function],
+      "tags": [
+        "Tile",
+      ],
+      "visible": true,
+      "w": 0,
+      "x": 0,
+      "y": 0,
+      "zIndex": 0,
+    },
+  },
+}
+`;

packages/@lightningjs/ui-components/src/mixins/withLongPress/index.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import lng from '@lightningjs/core';
+
+export type WithLongPressConstructor<BaseType extends typeof lng.Component> =
+  BaseType & {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    new (...args: any[]): BaseType;
+  };
+
+export default function withLongPress<BaseType extends typeof lng.Component>(
+  base: BaseType
+): WithLongPressConstructor<BaseType>;

packages/@lightningjs/ui-components/src/mixins/withLongPress/index.js

@@ -0,0 +1,89 @@
+/**
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export default function withLongPress(Base) {
+  return class extends Base {
+    static get name() {
+      return Base.name;
+    }
+
+    set threshold(value) {
+      this._threshold = value;
+    }
+
+    get threshold() {
+      return this._threshold;
+    }
+
+    set continuousExecution(val) {
+      this._continuousExecution = val;
+    }
+
+    _construct() {
+      this._pressedTimeStart = null;
+      this._hasExecuted = false;
+      this._threshold = 2000;
+      super._construct();
+    }
+
+    /**
+     * this will handle only key down events
+     * it will grab a reference start time stamp and compare it to any subsequent key down events' timestamp values
+     * when we meet the set threshold time in seconds, we will execute a supplied callback method
+     * */
+    _handleKey(keyEvent) {
+      // capture the key event time stamp the first time through to use as a reference.
+      if (!this._firstPressed) {
+        this._firstPressed = this._pressedTimeStart = keyEvent.timeStamp;
+        super._handleKey(keyEvent);
+      }
+      // check latest keyEvent time stamp against the start time stamp and see if the difference
+      // is greater than the threshold
+      if (
+        // eslint-disable-next-line no-constant-condition
+        this._pressedTimeStart &&
+        keyEvent.timeStamp - this._pressedTimeStart >= this.threshold
+      ) {
+        // short circuit here if we only want to execute once before a key up event
+        if (!this._continuousExecution && this._hasExecuted) {
+          return;
+        }
+        this.fireAncestors('$longPressHit', keyEvent.key);
+        if (this._continuousExecution) {
+          this._pressedTimeStart += this.threshold;
+        } else {
+          this._hasExecuted = true;
+          this._pressedTimeStart = null;
+        }
+      }
+    }
+
+    /**
+     * this will handle only key up events
+     * */
+    _handleKeyRelease(keyEvent) {
+      if (keyEvent.timeStamp - this._firstPressed >= this.threshold) {
+        this.fireAncestors('$longPressEnd', keyEvent.key);
+      }
+      this._firstPressed = null;
+      this._pressedTimeStart = null;
+      this._hasExecuted = false;
+      super._handleKeyRelease(keyEvent);
+    }
+  };
+}