customvidplayer 0.0.8 → 0.0.9

package/dist/components/Section.d.ts

@@ -0,0 +1,15 @@
+export default Section;
+declare function Section({ name, timestamp, onClick }: {
+    name: any;
+    timestamp: any;
+    onClick: any;
+}): React.JSX.Element;
+declare namespace Section {
+    namespace propTypes {
+        const name: PropTypes.Validator<string>;
+        const timestamp: PropTypes.Validator<number>;
+        const onClick: PropTypes.Validator<(...args: any[]) => any>;
+    }
+}
+import React from "react";
+import PropTypes from "prop-types";

package/dist/components/Section.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var Section = function (_a) {
+    var name = _a.name, timestamp = _a.timestamp, onClick = _a.onClick;
+    return (<div className="section" onClick={function () { return onClick(timestamp); }}>
+    {name}
+  </div>);
+};
+Section.propTypes = {
+    name: prop_types_1.default.string.isRequired,
+    timestamp: prop_types_1.default.number.isRequired,
+    onClick: prop_types_1.default.func.isRequired,
+};
+exports.default = Section;

package/dist/components/ThemeProvider.d.ts

@@ -0,0 +1,17 @@
+export default ThemeProvider;
+declare function ThemeProvider({ theme, children }: {
+    theme: any;
+    children: any;
+}): React.JSX.Element;
+declare namespace ThemeProvider {
+    namespace propTypes {
+        const theme: PropTypes.Requireable<object>;
+        const children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+    }
+    namespace defaultProps {
+        const theme_1: {};
+        export { theme_1 as theme };
+    }
+}
+import React from "react";
+import PropTypes from "prop-types";

package/dist/components/ThemeProvider.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var ThemeProvider = function (_a) {
+    var theme = _a.theme, children = _a.children;
+    return (<div style={__assign({}, theme)}>{children}</div>);
+};
+ThemeProvider.propTypes = {
+    theme: prop_types_1.default.object,
+    children: prop_types_1.default.node.isRequired,
+};
+ThemeProvider.defaultProps = {
+    theme: {},
+};
+exports.default = ThemeProvider;

package/dist/components/VideoPlayer.d.ts

@@ -0,0 +1,26 @@
+export default VideoPlayer;
+declare function VideoPlayer({ videoSrc, sections, onSectionChange, theme }: {
+    videoSrc: any;
+    sections: any;
+    onSectionChange: any;
+    theme: any;
+}): React.JSX.Element;
+declare namespace VideoPlayer {
+    namespace propTypes {
+        const videoSrc: PropTypes.Validator<string>;
+        const sections: PropTypes.Validator<(PropTypes.InferProps<{
+            name: PropTypes.Validator<string>;
+            timestamp: PropTypes.Validator<number>;
+        }> | null | undefined)[]>;
+        const onSectionChange: PropTypes.Requireable<(...args: any[]) => any>;
+        const theme: PropTypes.Requireable<object>;
+    }
+    namespace defaultProps {
+        const theme_1: {};
+        export { theme_1 as theme };
+        const onSectionChange_1: null;
+        export { onSectionChange_1 as onSectionChange };
+    }
+}
+import React from "react";
+import PropTypes from "prop-types";

package/dist/components/VideoPlayer.js

@@ -0,0 +1,89 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+require("./../styles/defaultTheme.css");
+var VideoPlayer = function (_a) {
+    var videoSrc = _a.videoSrc, sections = _a.sections, onSectionChange = _a.onSectionChange, theme = _a.theme;
+    var videoRef = (0, react_1.useRef)(null);
+    var _b = (0, react_1.useState)(0), currentSectionIndex = _b[0], setCurrentSectionIndex = _b[1];
+    var skipToNextSection = function () {
+        if (currentSectionIndex < sections.length - 1) {
+            var nextSection = sections[currentSectionIndex + 1];
+            videoRef.current.currentTime = nextSection.timestamp;
+            setCurrentSectionIndex(currentSectionIndex + 1);
+            if (onSectionChange)
+                onSectionChange(nextSection);
+        }
+    };
+    var handleTimeUpdate = function () {
+        var currentTime = videoRef.current.currentTime;
+        var currentSection = sections.find(function (section, index) {
+            return currentTime >= section.timestamp &&
+                (index === sections.length - 1 || currentTime < sections[index + 1].timestamp);
+        });
+        if (currentSection && sections[currentSectionIndex] !== currentSection) {
+            var newIndex = sections.indexOf(currentSection);
+            setCurrentSectionIndex(newIndex);
+            if (onSectionChange)
+                onSectionChange(currentSection);
+        }
+    };
+    return (<div className="video-player" style={__assign({}, theme)}>
+      <video src={videoSrc} controls ref={videoRef} onTimeUpdate={handleTimeUpdate} className="video-element"/>
+      <button onClick={skipToNextSection} className="skip-button">
+        Skip
+      </button>
+    </div>);
+};
+VideoPlayer.propTypes = {
+    videoSrc: prop_types_1.default.string.isRequired,
+    sections: prop_types_1.default.arrayOf(prop_types_1.default.shape({
+        name: prop_types_1.default.string.isRequired,
+        timestamp: prop_types_1.default.number.isRequired,
+    })).isRequired,
+    onSectionChange: prop_types_1.default.func,
+    theme: prop_types_1.default.object,
+};
+VideoPlayer.defaultProps = {
+    theme: {},
+    onSectionChange: null,
+};
+exports.default = VideoPlayer;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as VideoPlayer } from "./components/VideoPlayer";
+export { default as Section } from "./components/Section";
+export { default as ThemeProvider } from "./components/ThemeProvider";

package/dist/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeProvider = exports.Section = exports.VideoPlayer = void 0;
+var VideoPlayer_1 = require("./components/VideoPlayer");
+Object.defineProperty(exports, "VideoPlayer", { enumerable: true, get: function () { return __importDefault(VideoPlayer_1).default; } });
+var Section_1 = require("./components/Section");
+Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return __importDefault(Section_1).default; } });
+var ThemeProvider_1 = require("./components/ThemeProvider");
+Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return __importDefault(ThemeProvider_1).default; } });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "customvidplayer",
-    "version": "0.0.8",
+    "version": "0.0.9",
     "description": "Customizable video player with section navigation and theming.",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
@@ -10,11 +10,12 @@
         "test": "jest"
     },
     "dependencies": {
-        "@types/react": "^18.3.12",
         "prop-types": "^15.8.1",
         "react": "^18.0.0"
     },
     "devDependencies": {
+        "@types/react": "^18.3.12",
+        "@types/react-dom": "^18.3.1",
         "jest": "^29.0.0",
         "typescript": "^4.9.5",
         "webpack": "^5.75.0"

package/tsconfig.json

@@ -1,14 +1,16 @@
 {
     "compilerOptions": {
-      "target": "es5",
-      "module": "commonjs",
-      "jsx": "react-jsx",
+      "outDir": "./dist",
+      "rootDir": "./src",
+      "declaration": true,
+      "module": "CommonJS",
+      "target": "ES5",
       "strict": true,
       "esModuleInterop": true,
-      "forceConsistentCasingInFileNames": true,
-      "declaration": true,
-      "outDir": "./dist"
+      "skipLibCheck": true,
+      "allowJs": true
     },
-    "include": ["src/**/*"]
+    "include": ["src/**/*"],
+    "exclude": ["node_modules", "dist"]
   }