first commit

resources/client/videos/requests/use-log-video-play.ts

@@ -0,0 +1,33 @@
+import {PlayerActions} from '@common/player/hooks/use-player-actions';
+import {MediaItem} from '@common/player/media-item';
+import {Video} from '@app/titles/models/video';
+import {MutableRefObject, useCallback} from 'react';
+import {getCookie} from 'react-use-cookie';
+
+interface Options {
+  enabled?: boolean;
+}
+
+export function useLogVideoPlay(
+  playerRef: MutableRefObject<PlayerActions>,
+  {enabled = true}: Options = {}
+) {
+  return useCallback((): boolean => {
+    const player = playerRef.current;
+    if (!player || !enabled) {
+      return false;
+    }
+    const media = player.getState().cuedMedia as MediaItem<Video> | undefined;
+    if (!media?.meta?.id || player.getCurrentTime() === 0) {
+      return false;
+    }
+    return navigator.sendBeacon(
+      `/api/v1/videos/${media.meta.id}/log-play`,
+      JSON.stringify({
+        currentTime: player.getCurrentTime(),
+        duration: player.getState().mediaDuration,
+        _token: getCookie('XSRF-TOKEN'),
+      })
+    );
+  }, [playerRef, enabled]);
+}