Adding visualization support for visibility signal (#81)

* Adding visualization support for visibility signal

* Bumping version to 0.6.2

* Adding support for Travis

.travis.yml

@@ -0,0 +1,12 @@
+sudo: false
+language: node_js
+node_js:
+  - "14.1"
+install:
+  - yarn
+cache:
+  yarn: true
+
+script:
+  - yarn build
+  - yarn test

lerna.json

@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.6.1",
+  "version": "0.6.2",
   "npmClient": "yarn",
   "useWorkspaces": true
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "clarity",
   "private": true,
-  "version": "0.6.1",
+  "version": "0.6.2",
   "repository": "https://github.com/microsoft/clarity.git",
   "author": "Sarvesh Nagpal <sarveshn@microsoft.com>",
   "license": "MIT",

packages/clarity-decode/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-decode",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",
@@ -26,7 +26,7 @@
     "url": "https://github.com/Microsoft/clarity/issues"
   },
   "dependencies": {
-    "clarity-js": "^0.6.1"
+    "clarity-js": "^0.6.2"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.1.0",

packages/clarity-devtools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-devtools",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "private": true,
   "description": "Adds Clarity debugging support to browser devtools",
   "author": "Microsoft Corp.",
@@ -24,9 +24,9 @@
     "url": "https://github.com/Microsoft/clarity/issues"
   },
   "dependencies": {
-    "clarity-decode": "^0.6.1",
-    "clarity-js": "^0.6.1",
-    "clarity-visualize": "^0.6.1"
+    "clarity-decode": "^0.6.2",
+    "clarity-js": "^0.6.2",
+    "clarity-visualize": "^0.6.2"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^7.1.3",

packages/clarity-devtools/static/manifest.json

@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "Clarity Developer Tools",
   "description": "Get insights about how customers use your website.",
-  "version": "0.6.1",
-  "version_name": "0.6.1",
+  "version": "0.6.2",
+  "version_name": "0.6.2",
   "minimum_chrome_version": "50",
   "devtools_page": "devtools.html",
   "icons": {

packages/clarity-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-js",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",

packages/clarity-js/src/core/version.ts

@@ -1,2 +1,2 @@
-let version = "0.6.1";
+let version = "0.6.2";
 export default version;

packages/clarity-js/src/data/upgrade.ts

@@ -1,4 +1,5 @@
 import { Constant, Event, UpgradeData } from "@clarity-types/data";
+import * as core from "@src/core";
 import config from "@src/core/config";
 import encode from "@src/data/encode";
 import * as metadata from "@src/data/metadata";
@@ -15,7 +16,8 @@ export function start(): void {
 // However, if there's a need for full fidelity playback, calling this function will disable lean mode
 // and send all backed up layout events to the server.
 export function upgrade(key: string): void {
-    if (config.lean) {
+    // Upgrade only if Clarity was successfully activated on the page
+    if (core.active() && config.lean) {
         config.lean = false;
         data = { key };
 

packages/clarity-visualize/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-visualize",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",
@@ -27,7 +27,7 @@
     "url": "https://github.com/Microsoft/clarity/issues"
   },
   "dependencies": {
-    "clarity-decode": "^0.6.1"
+    "clarity-decode": "^0.6.2"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.1.0",

packages/clarity-visualize/src/clarity.ts

@@ -101,6 +101,9 @@ export function render(events: Data.DecodedEvent[]): void {
             case Data.Event.TouchMove:
                 interaction.pointer(entry as Interaction.PointerEvent);
                 break;
+            case Data.Event.Visibility:
+                interaction.visibility(entry as Interaction.VisibilityEvent);
+                break;
             case Data.Event.Input:
                 interaction.input(entry as Interaction.InputEvent);
                 break;

packages/clarity-visualize/src/interaction.ts

@@ -60,6 +60,16 @@ export function resize(event: Interaction.ResizeEvent): void {
     }
 }
 
+export function visibility(event: Interaction.VisibilityEvent): void {
+    if (state.player && event.data.visible !== Constant.Visible) {
+        state.player.style.backgroundColor = Constant.Black;
+        state.player.style.opacity = Constant.HiddenOpacity;
+    } else {
+        state.player.style.backgroundColor = Constant.Transparent;
+        state.player.style.opacity = Constant.VisibleOpacity;
+    }
+}
+
 export function input(event: Interaction.InputEvent): void {
     let data = event.data;
     let el = element(data.target as number) as HTMLInputElement;

packages/clarity-visualize/types/visualize.d.ts

@@ -73,7 +73,10 @@ export const enum Constant {
     Pixel = "px",    
     Separator = "X",
     Absolute = "absolute",
-    Black = "black"
+    Black = "black",
+    Transparent = "transparent",
+    HiddenOpacity = "0.4",
+    VisibleOpacity = "1",
 }
 
 export const enum Setting {