Task #0000 fix: Created Sunbird scrollable video

.gitignore

@@ -0,0 +1,5 @@
+# .gitignore
+node_modules/
+dist/
+*.log
+yarn.lock

README.md

@@ -1 +1,62 @@
-# sunbird-videoreel
+# Installation
+
+npm install sunbird-video-reel-pckg
+
+# OR
+
+yarn add sunbird-video-reel-pckg
+
+# Usage Example
+
+import React from "react";
+import { VideoReel } from "sunbird-video-reel-pckg";
+
+const App = () => {
+const items = [
+{
+"name": "",
+"courseId": "",
+"contentId": "",
+"lesson_questionset": "",
+},
+// Additional lesson objects...
+];
+
+
+return (
+<SunbirdScrollableVideo
+      playerLink="https://"
+      baseUrl="https://"
+      contentSource=""
+      items={items}
+      telemetryURL="https://"
+      telemetryEndpoint="/"
+      getTelemetry={getTelemetry}
+    />
+);
+};
+
+export default App;
+
+### Props Table
+
+| Prop               | Type       | Description                                 |
+|--------------------|-----------|---------------------------------------------|
+| `playerLink`      | `string`   | URL of the video player                     |
+| `baseUrl`        | `string`   | API base URL for video content              |
+| `contentSource`  | `string`   | Source of the content (e.g., sunbird)       |
+| `items`          | `array`    | Array of lesson objects                     |
+| `telemetryURL`   | `string`   | URL for telemetry events                    |
+| `telemetryEndpoint` | `string` | API endpoint for telemetry data             |
+| `getTelemetry`   | `function` | Callback function for telemetry events      |
+
+
+# API Reference
+
+Sunbird Scrollable Video Component:
+
+    Displays a sequence of video lessons based on the provided items array.
+
+    Sends telemetry events using the getTelemetry function.
+
+    Uses an external video player hosted at playerLink.

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ]
+};

jest.config.js

@@ -0,0 +1,73 @@
+// /** @type {import('ts-jest').JestConfigWithTsJest} **/
+// export default {
+//   preset: "ts-jest",
+//   testEnvironment: "jsdom",
+//   rootDir: './', // Ensure root directory is correct
+//   // transform: {
+//   //   "^.+\\.tsx?$": ["ts-jest", {}],
+//   // },
+//   // transform: {
+//   //   "^.+\\.(js|jsx|ts|tsx)$": "babel-jest",
+//   // },
+//   // moduleNameMapper: {
+//   //   "^react/jsx-runtime$": "react/jsx-runtime",
+//   // },
+//   // setupFilesAfterEnv: [
+//   //   '@testing-library/jest-dom', // This should be enough to add custom matchers
+//   // ],
+
+//   transform: {
+//     "^.+\\.(js|jsx|ts|tsx)$": "babel-jest",
+//   },
+//   moduleNameMapper: {
+//     "^react/jsx-runtime$": "react/jsx-runtime",
+//   },
+//   transformIgnorePatterns: ["/node_modules/(?!some-es6-package)"],
+// };
+
+
+// /** @type {import('ts-jest').JestConfigWithTsJest} **/
+// module.exports = {
+//   preset: "ts-jest",
+//   testEnvironment: "jsdom",
+//   rootDir: './', // Ensure root directory is correct
+
+//   transform: {
+//     "^.+\\.(js|jsx|ts|tsx)$": "babel-jest",
+//   },
+//   moduleNameMapper: {
+//     "^react/jsx-runtime$": "react/jsx-runtime",
+//   },
+//   transformIgnorePatterns: ["/node_modules/(?!some-es6-package)"],
+// };
+
+
+// module.exports = {
+//   preset: "ts-jest",
+//   testEnvironment: "jsdom",
+//   rootDir: './',
+//   transform: {
+//     "^.+\\.(js|jsx|ts|tsx)$": "babel-jest",
+//   },
+//   moduleDirectories: ["node_modules", "src"], // Ensure Jest can find React
+//   moduleNameMapper: {
+//     "^react/jsx-runtime$": "react/jsx-runtime",
+//   },
+//   transformIgnorePatterns: ["/node_modules/(?!some-es6-package)"],
+// };
+
+
+module.exports = {
+  preset: "ts-jest",
+  testEnvironment: "jsdom",
+  rootDir: "./",
+  transform: {
+    "^.+\\.(js|jsx|ts|tsx)$": "babel-jest",
+  },
+  moduleDirectories: ["node_modules", "/src"], // Ensure Jest can find React
+  moduleNameMapper: {
+    "^react$": "<rootDir>/node_modules/react",
+    "^react/jsx-runtime$": "react/jsx-runtime",
+  },
+  transformIgnorePatterns: ["/node_modules/(?!some-es6-package)"],
+};

jest.setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package.json

@@ -0,0 +1,52 @@
+{
+  "name": "sunbird-scrollable-videos",
+  "version": "1.1.0",
+  "description": "A description of my new package",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "rollup -c",
+    "start": "rollup -c --watch",
+    "test": "jest"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "13.4.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^17.0.0 || ^18.0.0",
+    "@types/react-dom": "^17.0.0 || ^18.0.0",
+    "@types/react-virtualized": "^9.22.0",
+    "is-mobile": "^5.0.0",
+    "jest": "^29.7.0",
+    "jwt-decode": "^4.0.0",
+    "lodash": "4.17.21",
+    "react-window": "^1.8.11",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.0.1"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@types/is-mobile": "^2.1.4",
+    "@types/jwt-decode": "^3.1.0",
+    "@types/lodash": "^4.17.15",
+    "@types/node": "^22.13.1",
+    "@types/react-window": "^1.8.8",
+    "babel-jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "rollup": "^4.34.6",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "ts-jest": "^29.2.5"
+  }
+}

rollup.config.mjs

@@ -0,0 +1,29 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from 'rollup-plugin-typescript2';
+import { terser } from 'rollup-plugin-terser';
+
+export default {
+  input: 'src/index.ts',
+  output: [
+    {
+      file: 'dist/index.js',
+      format: 'cjs',
+      sourcemap: true,
+    },
+    {
+      file: 'dist/index.esm.js',
+      format: 'esm',
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    resolve(),
+    commonjs(),
+    typescript({
+      tsconfig: './tsconfig.json',
+    }),
+    terser(),
+  ],
+  external: ['react', 'react-dom'],
+};

src/common/TopIcon.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+export const TopIcon = React.memo<{
+  onClick: () => void;
+  icon: string;
+  right?: string;
+  left?: string;
+  zIndex?: string;
+  top?: string;
+  bottom?: string;
+  transition?: string;
+  rounded?: string;
+  roundedLeft?: string;
+  size?: string;
+  bg?: string;
+  p?: string;
+}>(({ onClick, left, icon, right, bottom, top, transition, bg, size, p }) => {
+  return (
+    <button
+      onClick={onClick}
+      aria-label="Go back"
+      style={{
+        position: "absolute",
+        top: top || "16px",
+        left: left,
+        right: right,
+        bottom: bottom,
+        zIndex: "20",
+        background: bg || "#FFFFFF26",
+        borderRadius: "50%",
+        border: "none",
+        cursor: "pointer",
+        padding: p || "8px",
+        transition: transition || "right 0.5s, bottom 0.5s",
+      }}
+    >
+      <img
+        src={`/icons/${icon}.svg`}
+        alt={icon}
+        style={{ width: size, height: size }}
+      />
+    </button>
+  );
+});

src/common/useDeviceSize.tsx

@@ -0,0 +1,22 @@
+import { useState, useEffect } from "react";
+
+export const useDeviceSize = () => {
+  const [size, setSize] = useState({
+    height: window.innerHeight,
+    width: window.innerWidth,
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      setSize({
+        height: window.innerHeight,
+        width: window.innerWidth,
+      });
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return size;
+};

src/index.ts

@@ -0,0 +1 @@
+export { default as VideoReel } from "../src/video-reel-component/VideoReel";

src/services/content.service.ts

@@ -0,0 +1,49 @@
+interface IGetOneParams {
+  id: string;
+  contentSource: string;
+  type: string;
+  header?: Record<string, string>;
+  baseUrl: string;
+}
+
+const URL = {
+  CONTENT_ID: "/hierarchy/contentid",
+};
+
+export const getOne = async ({
+  id,
+  contentSource,
+  type,
+  header,
+  baseUrl
+}: IGetOneParams) => {
+  const headers = new Headers({
+    ...header,
+    Authorization: `Bearer ${localStorage.getItem("token")}`,
+  });
+
+  try {
+    const response = await fetch(
+      `${baseUrl}/course/${contentSource}${URL.CONTENT_ID}?courseId=${id}&type=${type}`,
+      {
+        method: "GET",
+        headers,
+      }
+    );
+
+    if (response.ok) {
+      const result = await response.json();
+      return result?.data || {};
+    } else {
+      console.log("Failed to fetch data");
+      return {};
+    }
+  } catch (e: unknown) {
+    if (e instanceof Error) {
+      console.log("course/hierarchy/contentid", e.message);
+    } else {
+      console.log("course/hierarchy/contentid", String(e));
+    }
+    return {};
+  }
+};

src/services/telemetry.ts

@@ -0,0 +1,22 @@
+
+export const commonFetchCall = async (dataString: string , telemetryURL :any, telemetryEndpoint:any) => {
+  return await fetch(`${telemetryURL}${telemetryEndpoint}`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${localStorage.getItem("token")}`,
+    },
+    body: dataString,
+  });
+};
+
+export const callBatch = async (dataString: Array<any> , telemetryURL :any, telemetryEndpoint:any  ) => {
+  return await commonFetchCall(
+    JSON.stringify({
+      id: "palooza.telemetry",
+      ver: "3.0",
+      ets: Date.now(),
+      events: dataString,
+    }),telemetryURL ,telemetryEndpoint 
+  );
+};