diff --git a/src/lib/hooks/useFavorites.ts b/src/lib/hooks/useFavorites.ts index 6dc0732b..b7ae8eba 100644 --- a/src/lib/hooks/useFavorites.ts +++ b/src/lib/hooks/useFavorites.ts @@ -1,11 +1,30 @@ import { useContext } from "react"; +import { event } from "@/lib/utils"; import { FavoritesContext } from "@/lib/context/favorites"; export function useFavorites() { const { favs, setFavs } = useContext(FavoritesContext); - const add = (id: string) => setFavs([...favs, id]); - const remove = (id: string) => setFavs(favs.filter((f) => id !== f)); + const add = (id: string) => { + setFavs([...favs, id]); + event({ + action: "fav", + label: "Radio faved", + category: "favorites", + value: id, + }); + }; + + const remove = (id: string) => { + setFavs(favs.filter((f) => id !== f)); + event({ + action: "unfav", + label: "Radio unfaved", + category: "favorites", + value: id, + }); + }; + const isFaved = (id: string) => favs.includes(id); return { favs, add, remove, isFaved }; diff --git a/src/lib/hooks/usePlayer.ts b/src/lib/hooks/usePlayer.ts index 99eb77aa..1c1c5035 100644 --- a/src/lib/hooks/usePlayer.ts +++ b/src/lib/hooks/usePlayer.ts @@ -1,4 +1,5 @@ import { useEffect, useContext } from "react"; +import { event } from "@/lib/utils"; import { PlayerContext } from "@/lib/context/player"; import { AudioElementContext } from "@/lib/context/audio"; import { Station } from "@/lib/graphql/gqless/generated"; @@ -16,6 +17,14 @@ export function usePlayer() { const load = (station: Station) => { if (audio.current.src !== station.url) { audio.current.src = station.url; + + event({ + action: "load", + label: "Radio load", + category: "player", + value: station.stationuuid, + }); + setState((state) => ({ ...state, error: false, @@ -29,6 +38,7 @@ export function usePlayer() { const stop = () => { audio.current.src = EMPTY_AUDIO; + setState({ error: false, paused: false, @@ -39,13 +49,22 @@ export function usePlayer() { }; const onPlaying = () => - setState((state) => ({ - ...state, - error: false, - paused: false, - loading: false, - playing: true, - })); + setState((state) => { + event({ + action: "play", + label: "Radio playing", + category: "player", + value: state?.station?.stationuuid, + }); + + return { + ...state, + error: false, + paused: false, + loading: false, + playing: true, + }; + }); const onPause = () => setState((state) => ({ @@ -75,26 +94,25 @@ export function usePlayer() { })); const onError = () => - setState((state) => ({ - ...state, - error: true, - paused: false, - loading: false, - playing: false, - })); + setState((state) => { + event({ + action: "error", + label: "Player error", + category: "player", + value: state?.station?.stationuuid, + }); - const onEnded = () => - setState((state) => ({ - ...state, - error: false, - paused: false, - playing: false, - station: null, - })); + return { + ...state, + error: true, + paused: false, + loading: false, + playing: false, + }; + }); useEffect(() => { audio.current.addEventListener("error", onError); - audio.current.addEventListener("ended", onEnded); audio.current.addEventListener("pause", onPause); audio.current.addEventListener("playing", onPlaying); audio.current.addEventListener("loadstart", onLoadStart); diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 1757805a..47d2460b 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -14,18 +14,18 @@ export function mapValueToRange( return ((n - a) * (y - x)) / (b - a) + x; } -export const pageview = (url) => { +export const pageview = (page_path: string) => { // @ts-expect-error window.gtag("config", process.env.NEXT_PUBLIC_GA_TRACKING_ID, { - page_path: url, + page_path, }); }; export const event = ({ action, category, label, value }) => { // @ts-expect-error window.gtag("event", action, { - event_category: category, + value, event_label: label, - value: value, + event_category: category, }); };