customvidplayer 0.0.11 → 0.0.13

package/babel.config.js

@@ -0,0 +1,4 @@
+presets: [
+  // ... other presets ...
+  "@babel/preset-react"
+] 

package/dist/components/Section.js

@@ -1,19 +1,29 @@
-"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;
+"use strict";
+
+var __importDefault = void 0 && (void 0).__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 Section(_a) {
+  var name = _a.name,
+    timestamp = _a.timestamp,
+    _onClick = _a.onClick;
+  return react_1["default"].createElement("div", {
+    className: "section",
+    onClick: function onClick() {
+      return _onClick(timestamp);
+    }
+  }, name);
+};
+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.js

@@ -1,30 +1,37 @@
-"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;
+"use strict";
+
+var __assign = void 0 && (void 0).__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 = void 0 && (void 0).__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 ThemeProvider(_a) {
+  var theme = _a.theme,
+    children = _a.children;
+  return react_1["default"].createElement("div", {
+    style: __assign({}, theme)
+  }, children);
+};
+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.js

@@ -1,89 +1,110 @@
-"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;
+"use strict";
+
+var __assign = void 0 && (void 0).__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 = void 0 && (void 0).__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 get() {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __setModuleDefault = void 0 && (void 0).__setModuleDefault || (Object.create ? function (o, v) {
+  Object.defineProperty(o, "default", {
+    enumerable: true,
+    value: v
+  });
+} : function (o, v) {
+  o["default"] = v;
+});
+var __importStar = void 0 && (void 0).__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 = void 0 && (void 0).__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 VideoPlayer(_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 skipToNextSection() {
+    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 handleTimeUpdate() {
+    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 react_1["default"].createElement("div", {
+    className: "video-player",
+    style: __assign({}, theme)
+  }, react_1["default"].createElement("video", {
+    src: videoSrc,
+    controls: true,
+    ref: videoRef,
+    onTimeUpdate: handleTimeUpdate,
+    className: "video-element"
+  }), react_1["default"].createElement("button", {
+    onClick: skipToNextSection,
+    className: "skip-button"
+  }, "Skip"));
+};
+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.js

@@ -1,12 +1,32 @@
-"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; } });
+"use strict";
+
+var __importDefault = void 0 && (void 0).__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 get() {
+    return __importDefault(VideoPlayer_1)["default"];
+  }
+});
+var Section_1 = require("./components/Section");
+Object.defineProperty(exports, "Section", {
+  enumerable: true,
+  get: function get() {
+    return __importDefault(Section_1)["default"];
+  }
+});
+var ThemeProvider_1 = require("./components/ThemeProvider");
+Object.defineProperty(exports, "ThemeProvider", {
+  enumerable: true,
+  get: function get() {
+    return __importDefault(ThemeProvider_1)["default"];
+  }
+});

package/dist/styles/defaultTheme.css

@@ -0,0 +1,30 @@
+.video-player {
+    position: relative;
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+  }
+  
+  .video-element {
+    width: 100%;
+    border-radius: 5px;
+  }
+  
+  .skip-button {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    padding: 8px 12px;
+    background: #ff5722;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  
+  .section {
+    cursor: pointer;
+    margin: 5px 0;
+    color: #007bff;
+  }
+  

package/package.json

@@ -1,11 +1,11 @@
 {
     "name": "customvidplayer",
-    "version": "0.0.11",
+    "version": "0.0.13",
     "description": "Customizable video player with section navigation and theming.",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "scripts": {
-        "build": "tsc",
+        "build": "tsc && babel dist --out-dir dist --presets=@babel/preset-env,@babel/preset-react",
         "start": "webpack serve",
         "test": "jest"
     },
@@ -14,6 +14,10 @@
         "react": "^18.0.0"
     },
     "devDependencies": {
+        "@babel/cli": "^7.25.9",
+        "@babel/core": "^7.26.0",
+        "@babel/preset-env": "^7.26.0",
+        "@babel/preset-react": "^7.25.9",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",
         "jest": "^29.0.0",

package/tsconfig.json

@@ -6,6 +6,7 @@
       "module": "CommonJS",
       "target": "ES5",
       "strict": true,
+      "jsx": "react",
       "esModuleInterop": true,
       "skipLibCheck": true,
       "allowJs": true