feat: added video detail page (#1115)

Co-authored-by: Maham Akif <[email protected]>

package.json

@@ -56,6 +56,7 @@
     "universal-cookie": "4.0.4",
     "uuid": "9.0.0",
     "video.js": "8.3.0",
+    "videojs-vjstranscribe": "^1.0.3",
     "videojs-youtube": "3.0.1"
   },
   "devDependencies": {

src/components/app/data/hooks/index.js

@@ -43,3 +43,4 @@ export { default as useAcademyDetails } from './useAcademyDetails';
 export { default as usePassLearnerCsodParams } from './usePassLearnerCsodParams';
 export { default as useCanUpgradeWithLearnerCredit } from './useCanUpgradeWithLearnerCredit';
 export { default as useCourseRunMetadata } from './useCourseRunMetadata';
+export { default as useVideoDetails } from './useVideoDetails';

src/components/app/data/hooks/useVideoDetails.js

@@ -0,0 +1,12 @@
+import { useParams } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import { queryVideoDetail } from '../queries';
+import useEnterpriseCustomer from './useEnterpriseCustomer';
+
+export default function useVideoDetails() {
+  const { videoUUID } = useParams();
+  const { data: enterpriseCustomer } = useEnterpriseCustomer();
+  return useQuery({
+    ...queryVideoDetail(videoUUID, enterpriseCustomer.uuid),
+  });
+}

src/components/app/data/hooks/useVideoDetails.test.jsx

@@ -0,0 +1,90 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { AppContext } from '@edx/frontend-platform/react';
+import { useParams } from 'react-router-dom';
+import { queryClient } from '../../../../utils/tests';
+import { queryVideoDetail } from '../queries';
+import useVideoDetails from './useVideoDetails';
+import useEnterpriseCustomer from './useEnterpriseCustomer';
+import { authenticatedUserFactory, enterpriseCustomerFactory } from '../services/data/__factories__';
+
+jest.mock('../queries', () => ({
+  ...jest.requireActual('../queries'),
+  queryVideoDetail: jest.fn(),
+}));
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: jest.fn(),
+}));
+jest.mock('./useEnterpriseCustomer');
+
+const mockEnterpriseCustomer = enterpriseCustomerFactory();
+const mockAuthenticatedUser = authenticatedUserFactory();
+
+const mockVideoDetailsData = {
+  uuid: 'video-uuid',
+  title: 'My Awesome Video',
+  description: 'This is a great video.',
+  duration: 120,
+  thumbnail: 'example.com/videos/images/awesome-video.png',
+};
+
+describe('useVideoDetails', () => {
+  const Wrapper = ({ children }) => (
+    <QueryClientProvider client={queryClient()}>
+      <AppContext.Provider value={{ authenticatedUser: mockAuthenticatedUser }}>
+        {children}
+      </AppContext.Provider>
+    </QueryClientProvider>
+  );
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    useEnterpriseCustomer.mockReturnValue({ data: mockEnterpriseCustomer });
+    useParams.mockReturnValue({ videoUUID: 'video-uuid' });
+    queryVideoDetail.mockImplementation((videoUUID, enterpriseUUID) => ({
+      queryKey: ['videoDetail', videoUUID, enterpriseUUID, mockVideoDetailsData],
+      queryFn: () => Promise.resolve(mockVideoDetailsData),
+    }));
+  });
+
+  it('should handle resolved value correctly', async () => {
+    const { result, waitForNextUpdate } = renderHook(() => useVideoDetails(), { wrapper: Wrapper });
+    await waitForNextUpdate();
+
+    expect(result.current).toEqual(
+      expect.objectContaining({
+        data: mockVideoDetailsData,
+        isLoading: false,
+        isFetching: false,
+      }),
+    );
+  });
+
+  it('should handle loading state correctly', () => {
+    queryVideoDetail.mockImplementation(() => ({
+      queryKey: ['videoDetail'],
+      queryFn: () => new Promise(() => {}), // Simulate loading
+    }));
+
+    const { result } = renderHook(() => useVideoDetails(), { wrapper: Wrapper });
+
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.isFetching).toBe(true);
+  });
+
+  it('should handle error state correctly', async () => {
+    const mockError = new Error('Failed to fetch video details');
+    queryVideoDetail.mockImplementation(() => ({
+      queryKey: ['videoDetail', mockError],
+      queryFn: () => Promise.reject(mockError),
+    }));
+
+    const { result, waitForNextUpdate } = renderHook(() => useVideoDetails(), { wrapper: Wrapper });
+    await waitForNextUpdate();
+
+    expect(result.current.error).toEqual(mockError);
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.isFetching).toBe(false);
+  });
+});

src/components/app/data/queries/queries.js

@@ -501,3 +501,20 @@ export function queryLearnerPathwayProgressData(pathwayUUID) {
     .pathway(pathwayUUID)
     ._ctx.progress;
 }
+
+/**
+ * Helper function to assist querying video detail data with the React Query package.
+ *
+ * This function constructs a query to fetch the details of a video for a specific enterprise customer.
+ *
+ * @param {string} videoUUID - The edx video ID of the video to query.
+ * @param {string} enterpriseUUID - The UUID of the enterprise customer.
+ * @returns {Types.QueryOptions} The query options for fetching video detail data.
+ */
+export function queryVideoDetail(videoUUID, enterpriseUUID) {
+  return queries
+    .enterprise
+    .enterpriseCustomer(enterpriseUUID)
+    ._ctx.video
+    ._ctx.detail(videoUUID);
+}

src/components/app/data/queries/queryKeyFactory.js

@@ -29,6 +29,7 @@ import {
   fetchRedeemablePolicies,
   fetchSubscriptions,
   fetchUserEntitlements,
+  fetchVideoDetail,
 } from '../services';
 
 import { SUBSIDY_REQUEST_STATE } from '../../../../constants';
@@ -180,6 +181,16 @@ const enterprise = createQueryKeys('enterprise', {
           },
         },
       },
+      video: {
+        queryKey: null,
+        contextQueries: {
+          // queryVideoDetail
+          detail: (videoUUID) => ({
+            queryKey: [videoUUID],
+            queryFn: async ({ queryKey }) => fetchVideoDetail(videoUUID, queryKey[2]),
+          }),
+        },
+      },
     },
   }),
   enterpriseLearner: (username, enterpriseSlug) => ({

src/components/app/data/services/index.js

@@ -8,3 +8,4 @@ export * from './programs';
 export * from './subsidies';
 export * from './user';
 export * from './utils';
+export * from './videos';

src/components/app/data/services/videos.js

@@ -0,0 +1,18 @@
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { camelCaseObject } from '@edx/frontend-platform/utils';
+import { getConfig } from '@edx/frontend-platform/config';
+import { logError } from '@edx/frontend-platform/logging';
+import { transformVideoData } from '../../../microlearning/data/utils';
+
+export const fetchVideoDetail = async (edxVideoID) => {
+  const { ENTERPRISE_CATALOG_API_BASE_URL } = getConfig();
+  const url = `${ENTERPRISE_CATALOG_API_BASE_URL}/api/v1/videos/${edxVideoID}`;
+
+  try {
+    const result = await getAuthenticatedHttpClient().get(url);
+    return camelCaseObject(transformVideoData(result?.data || {}));
+  } catch (error) {
+    logError(error);
+    return null;
+  }
+};