added analytics for audio plays
This commit is contained in:
parent
adde83eda6
commit
ea21348c5c
|
@ -25,7 +25,7 @@ function Entry({
|
||||||
e: React.MouseEvent<HTMLElement, MouseEvent>
|
e: React.MouseEvent<HTMLElement, MouseEvent>
|
||||||
) {
|
) {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
playStorageAudio(entry.ts, () => null);
|
playStorageAudio(entry.ts, entry.p, () => null);
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -1,16 +1,29 @@
|
||||||
import { Types as T, InlinePs } from "@lingdocs/ps-react";
|
import { Types as T, InlinePs } from "@lingdocs/ps-react";
|
||||||
import { getAudioPath } from "./PlayStorageAudio";
|
import { getAudioPath } from "./PlayStorageAudio";
|
||||||
|
import { LingdocsUser } from "../types/account-types";
|
||||||
|
import ReactGA from "react-ga4";
|
||||||
|
|
||||||
export function EntryAudioDisplay({
|
export function EntryAudioDisplay({
|
||||||
entry,
|
entry,
|
||||||
opts,
|
opts,
|
||||||
|
user,
|
||||||
}: {
|
}: {
|
||||||
entry: T.DictionaryEntry;
|
entry: T.DictionaryEntry;
|
||||||
opts: T.TextOptions;
|
opts: T.TextOptions;
|
||||||
|
user: LingdocsUser | undefined;
|
||||||
}) {
|
}) {
|
||||||
if (!entry.a) {
|
if (!entry.a) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
function handlePlay() {
|
||||||
|
if (user && user.admin) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
ReactGA.event({
|
||||||
|
category: "sounds",
|
||||||
|
action: `play ${entry.ts} - ${entry.p}`,
|
||||||
|
});
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<figure>
|
<figure>
|
||||||
<figcaption className="mb-2 pl-2">
|
<figcaption className="mb-2 pl-2">
|
||||||
|
@ -21,6 +34,7 @@ export function EntryAudioDisplay({
|
||||||
controlsList="nofullscreen"
|
controlsList="nofullscreen"
|
||||||
src={getAudioPath(entry.ts)}
|
src={getAudioPath(entry.ts)}
|
||||||
preload="auto"
|
preload="auto"
|
||||||
|
onPlay={handlePlay}
|
||||||
>
|
>
|
||||||
<a href={getAudioPath(entry.ts)}>
|
<a href={getAudioPath(entry.ts)}>
|
||||||
Download audio for{" "}
|
Download audio for{" "}
|
||||||
|
|
|
@ -1,9 +1,19 @@
|
||||||
|
import ReactGA from "react-ga4";
|
||||||
|
|
||||||
export function getAudioPath(ts: number): string {
|
export function getAudioPath(ts: number): string {
|
||||||
return `https://storage.lingdocs.com/audio/${ts}.mp3`;
|
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;
|
if (!ts) return;
|
||||||
|
ReactGA.event({
|
||||||
|
category: "sounds",
|
||||||
|
action: `play ${ts} - ${p}`,
|
||||||
|
});
|
||||||
let audio = new Audio(getAudioPath(ts));
|
let audio = new Audio(getAudioPath(ts));
|
||||||
audio.addEventListener("ended", () => {
|
audio.addEventListener("ended", () => {
|
||||||
callback();
|
callback();
|
||||||
|
|
|
@ -227,7 +227,7 @@ function IsolatedEntry({
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</dl>
|
</dl>
|
||||||
<EntryAudioDisplay entry={entry} opts={textOptions} />
|
<EntryAudioDisplay entry={entry} opts={textOptions} user={state.user} />
|
||||||
{wordlistWord && (
|
{wordlistWord && (
|
||||||
<>
|
<>
|
||||||
{hasAttachment(wordlistWord, "audio") && (
|
{hasAttachment(wordlistWord, "audio") && (
|
||||||
|
|
Loading…
Reference in New Issue