softbuilders-react-video-player 1.0.0

package/dist/types.d.ts

@@ -0,0 +1,33 @@
+export type SoftBuildersVideoPlayerSource = {
+    src: string;
+    type?: string;
+    label: string;
+};
+export type SoftBuildersVideoPlayerTrack = {
+    kind: "captions";
+    src: string;
+    srclang: string;
+    label: string;
+    memeType: "text/vtt" | "text/srt";
+    default?: boolean;
+};
+export type SoftBuildersVideoPlayerOptions = {
+    autoplay?: boolean;
+    controls?: boolean;
+    fluid?: boolean;
+    muted?: boolean;
+    poster?: string;
+    sources: SoftBuildersVideoPlayerSource[];
+    tracks: SoftBuildersVideoPlayerTrack[];
+    width?: number;
+    height?: number;
+};
+export interface SoftBuildersVideoPlayerNote {
+    time: number;
+    label: string;
+}
+export interface SoftBuildersVideoPlayerChapter {
+    startTime: number;
+    endTime: number;
+    title: string;
+}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export declare const durationFormater: (seconds: number) => string;
+export declare const convertSRTtoVTT: (srtLink: string) => Promise<string>;

package/dist/utils/index.js

@@ -0,0 +1,51 @@
+export const durationFormater = (seconds) => {
+    seconds = Math.floor(seconds);
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secs = seconds % 60;
+    if (hours > 0) {
+        return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+    }
+    else {
+        return `${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+    }
+};
+const SRTtoVTT = (srt) => {
+    // Normalize line breaks and split into lines
+    const lines = srt.split(/\r?\n/).filter((line) => line.trim() !== "");
+    // Prepare VTT content
+    let vttContent = "WEBVTT\n\n";
+    let currentEntry = "";
+    lines.forEach((line) => {
+        if (/^\d+$/.test(line)) {
+            // Ignore index lines
+            return;
+        }
+        const timestampMatch = line.match(/(\d{2}:\d{2}:\d{2}),(\d{3}) --> (\d{2}:\d{2}:\d{2}),(\d{3})/);
+        if (timestampMatch) {
+            if (currentEntry) {
+                vttContent += currentEntry.trim() + "\n\n"; // Add previous entry
+            }
+            // Replace commas with dots in timestamps and concatenate the groups
+            currentEntry = `${timestampMatch[1]}.${timestampMatch[2]} --> ${timestampMatch[3]}.${timestampMatch[4]}\n`;
+        }
+        else if (currentEntry) {
+            // Add subtitle line to the current entry
+            currentEntry += line + "\n";
+        }
+    });
+    if (currentEntry) {
+        vttContent += currentEntry.trim(); // Add last entry
+    }
+    return vttContent.trim();
+};
+export const convertSRTtoVTT = async (srtLink) => {
+    const response = await fetch(srtLink);
+    const srtText = await response.text();
+    const vttText = SRTtoVTT(srtText);
+    // Create a Blob URL for the VTT
+    const blob = new Blob([vttText], { type: "text/vtt" });
+    const vttUrl = URL.createObjectURL(blob);
+    return vttUrl;
+};
+//# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "softbuilders-react-video-player",
+  "description": "Standalone video player component",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "dist/styles/tailwind.css"
+  ],
+  "scripts": {
+    "build:css": "npx postcss src/styles/tailwind.css -o dist/styles/tailwind.css && npx postcss src/components/Slider/style.css -o dist/components/Slider/style.css && npx postcss src/components/VideoPlayerComponent/style/style.css -o dist/components/VideoPlayerComponent/style/style.css",
+    "build:css:watch": "npx postcss src/styles/tailwind.css -o dist/styles/tailwind.css --watch && npx postcss src/components/Slider/style.css -o dist/components/Slider/style.css --watch && npx postcss src/components/VideoPlayerComponent/style/style.css -o dist/components/VideoPlayerComponent/style/style.css --watch",
+    "build": "npm run build:css && tsc",
+    "build:watch": "tsc --watch",
+    "start": "concurrently \"npm run build:css:watch\" \"npm run build:watch\""
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "video.js": "^8.18.0"
+  },
+  "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.20",
+    "concurrently": "^9.0.1",
+    "postcss": "^8.4.45",
+    "postcss-cli": "^11.0.0",
+    "tailwindcss": "^3.4.11",
+    "typescript": "^5.6.2"
+  }
+}