added analytics for audio plays

website/src/components/Entry.tsx

@@ -25,7 +25,7 @@ function Entry({
     e: React.MouseEvent<HTMLElement, MouseEvent>
   ) {
     e.stopPropagation();
-    playStorageAudio(entry.ts, () => null);
+    playStorageAudio(entry.ts, entry.p, () => null);
   }
   return (
     <div

website/src/components/EntryAudioDisplay.tsx

@@ -1,16 +1,29 @@
 import { Types as T, InlinePs } from "@lingdocs/ps-react";
 import { getAudioPath } from "./PlayStorageAudio";
+import { LingdocsUser } from "../types/account-types";
+import ReactGA from "react-ga4";
 
 export function EntryAudioDisplay({
   entry,
   opts,
+  user,
 }: {
   entry: T.DictionaryEntry;
   opts: T.TextOptions;
+  user: LingdocsUser | undefined;
 }) {
   if (!entry.a) {
     return null;
   }
+  function handlePlay() {
+    if (user && user.admin) {
+      return;
+    }
+    ReactGA.event({
+      category: "sounds",
+      action: `play ${entry.ts} - ${entry.p}`,
+    });
+  }
   return (
     <figure>
       <figcaption className="mb-2 pl-2">
@@ -21,6 +34,7 @@ export function EntryAudioDisplay({
         controlsList="nofullscreen"
         src={getAudioPath(entry.ts)}
         preload="auto"
+        onPlay={handlePlay}
       >
         <a href={getAudioPath(entry.ts)}>
           Download audio for{" "}

website/src/components/PlayStorageAudio.tsx

@@ -1,9 +1,19 @@
+import ReactGA from "react-ga4";
+
 export function getAudioPath(ts: number): string {
   return `https://storage.lingdocs.com/audio/${ts}.mp3`;
 }
 
-export default function playStorageAudio(ts: number, callback: () => void) {
+export default function playStorageAudio(
+  ts: number,
+  p: string,
+  callback: () => void
+) {
   if (!ts) return;
+  ReactGA.event({
+    category: "sounds",
+    action: `play ${ts} - ${p}`,
+  });
   let audio = new Audio(getAudioPath(ts));
   audio.addEventListener("ended", () => {
     callback();

website/src/screens/IsolatedEntry.tsx

@@ -227,7 +227,7 @@ function IsolatedEntry({
           </div>
         </div>
       </dl>
-      <EntryAudioDisplay entry={entry} opts={textOptions} />
+      <EntryAudioDisplay entry={entry} opts={textOptions} user={state.user} />
       {wordlistWord && (
         <>
           {hasAttachment(wordlistWord, "audio") && (