chore: send analytics on Flowplayer component mounts

Author: maximzavadskiy

src/flowplayer.tsx

@@ -3,6 +3,7 @@ import type { Config, ConfigWith } from "@flowplayer/player";
 
 import React, { useEffect, forwardRef, useRef, useImperativeHandle } from "react";
 import flowplayer from "@flowplayer/player";
+import { trackBehaviorUsage } from "./usage";
 
 type KeyValue = Record<string, any>;
 
@@ -29,6 +30,8 @@ const Flowplayer = (props: Props, receivedRef: ForwardedRef<HTMLDivElement>) =>
     if (!ref.current) return;
     if (!token) return;
     const api = flowplayer(ref?.current, { token, ...opts });
+    trackBehaviorUsage(api, "flowplayer-component-mounted");
+
     return () => {
       api.destroy();
       if (ref?.current) ref.current.innerHTML = "";

src/usage.ts

@@ -0,0 +1,30 @@
+import type { Player, PlayerWith } from "@flowplayer/player";
+
+type SampleRate = 1.0 | 0.1 | 0.001;
+
+const PACKAGE_NAME = "react-flowplayer";
+
+type Behavior = "flowplayer-component-mounted";
+
+type UsageEventDetail = {
+  feature_name: typeof PACKAGE_NAME;
+  behavior: Behavior;
+  sample_rate: SampleRate;
+};
+
+type PlayerWithUsage = PlayerWith<{
+  emit(event: "flowplayer:feature", detail: UsageEventDetail): void;
+}>;
+
+// Adopted from https://github.com/flowplayer/spins/pull/37/files#diff-d534c1d78c3c3b042c010d7f84feb943c03ae27bc8d7e774e19ecd96c79fbdd5R3
+export function trackBehaviorUsage(
+  player: PlayerWithUsage,
+  behavior: Behavior,
+  sample_rate: SampleRate = 1.0
+) {
+  player.emit("flowplayer:feature", {
+    feature_name: PACKAGE_NAME,
+    behavior,
+    sample_rate,
+  });
+}