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]);
+}

resources/client/videos/requests/use-watch-page-video.ts

@@ -0,0 +1,37 @@
+import {keepPreviousData, useQuery} from '@tanstack/react-query';
+import {apiClient} from '@common/http/query-client';
+import {BackendResponse} from '@common/http/backend-response/backend-response';
+import {useParams} from 'react-router-dom';
+import {Title} from '@app/titles/models/title';
+import {Video} from '@app/titles/models/video';
+import {Episode} from '@app/titles/models/episode';
+import {getBootstrapData} from '@common/core/bootstrap-data/use-backend-bootstrap-data';
+
+export interface UseWatchPageVideoResponse extends BackendResponse {
+  title: Title;
+  episode?: Episode;
+  video: Video;
+  related_videos: Video[];
+  alternative_videos: Video[];
+}
+
+export function useWatchPageVideo() {
+  const {videoId} = useParams();
+  return useQuery<UseWatchPageVideoResponse>({
+    queryKey: ['video', 'watch-page', videoId],
+    queryFn: () => fetchVideo(videoId),
+    placeholderData: keepPreviousData,
+    initialData: () => {
+      const data = getBootstrapData().loaders?.watchPage;
+      if (data && `${data.video.id}` === videoId) {
+        return data;
+      }
+    },
+  });
+}
+
+function fetchVideo(videoId?: string) {
+  return apiClient
+    .get<UseWatchPageVideoResponse>(`watch/${videoId}`)
+    .then(response => response.data);
+}