customvidplayer 0.0.5 → 0.0.7

package/package.json

@@ -1,36 +1,31 @@
-{
-  "name": "customvidplayer",
-  "version": "0.0.5",
-  "description": "A customizable video player with section skipping functionality.",
-  "main": "src/index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "npx babel src --out-dir dist",
-    "tsc": "tsc"
-  },
-  "keywords": [
-    "video",
-    "player",
-    "custom",
-    "react"
-  ],
-  "author": "Prewcioo",
-  "license": "MIT",
-  "dependencies": {
-    "@types/react": "^18.3.12",
-    "react": "^18.3.1",
-    "react-icons": "^5.3.0"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.25.9",
-    "@babel/core": "^7.26.0",
-    "@babel/preset-env": "^7.26.0",
-    "@babel/preset-react": "^7.25.9",
-    "@babel/preset-typescript": "^7.26.0",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.0.0",
-    "babel-loader": "^8.4.1",
-    "ts-loader": "^9.5.1",
-    "typescript": "^4.5.4"
-  }
-}
+{
+    "name": "customvidplayer",
+    "version": "0.0.7",
+    "description": "Customizable video player with section navigation and theming.",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "scripts": {
+        "build": "tsc",
+        "start": "webpack serve",
+        "test": "jest"
+    },
+    "dependencies": {
+        "@types/react": "^18.3.12",
+        "prop-types": "^15.8.1",
+        "react": "^18.0.0"
+    },
+    "devDependencies": {
+        "jest": "^29.0.0",
+        "typescript": "^4.9.5",
+        "webpack": "^5.75.0"
+    },
+    "keywords": [
+        "video",
+        "player",
+        "react",
+        "typescript",
+        "customizable"
+    ],
+    "license": "MIT",
+    "author": "Prewcioo"
+}

package/src/components/Section.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const Section = ({ name, timestamp, onClick }) => (
+  <div className="section" onClick={() => onClick(timestamp)}>
+    {name}
+  </div>
+);
+
+Section.propTypes = {
+  name: PropTypes.string.isRequired,
+  timestamp: PropTypes.number.isRequired,
+  onClick: PropTypes.func.isRequired,
+};
+
+export default Section;

package/src/components/ThemeProvider.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const ThemeProvider = ({ theme, children }) => (
+  <div style={{ ...theme }}>{children}</div>
+);
+
+ThemeProvider.propTypes = {
+  theme: PropTypes.object,
+  children: PropTypes.node.isRequired,
+};
+
+ThemeProvider.defaultProps = {
+  theme: {},
+};
+
+export default ThemeProvider;

package/src/components/VideoPlayer.jsx

@@ -0,0 +1,66 @@
+import React, { useState, useRef } from "react";
+import PropTypes from "prop-types";
+import "./../styles/defaultTheme.css";
+
+const VideoPlayer = ({ videoSrc, sections, onSectionChange, theme }) => {
+  const videoRef = useRef(null);
+  const [currentSectionIndex, setCurrentSectionIndex] = useState(0);
+
+  const skipToNextSection = () => {
+    if (currentSectionIndex < sections.length - 1) {
+      const nextSection = sections[currentSectionIndex + 1];
+      videoRef.current.currentTime = nextSection.timestamp;
+      setCurrentSectionIndex(currentSectionIndex + 1);
+      if (onSectionChange) onSectionChange(nextSection);
+    }
+  };
+
+  const handleTimeUpdate = () => {
+    const currentTime = videoRef.current.currentTime;
+    const currentSection = sections.find(
+      (section, index) =>
+        currentTime >= section.timestamp &&
+        (index === sections.length - 1 || currentTime < sections[index + 1].timestamp)
+    );
+
+    if (currentSection && sections[currentSectionIndex] !== currentSection) {
+      const newIndex = sections.indexOf(currentSection);
+      setCurrentSectionIndex(newIndex);
+      if (onSectionChange) onSectionChange(currentSection);
+    }
+  };
+
+  return (
+    <div className="video-player" style={{ ...theme }}>
+      <video
+        src={videoSrc}
+        controls
+        ref={videoRef}
+        onTimeUpdate={handleTimeUpdate}
+        className="video-element"
+      />
+      <button onClick={skipToNextSection} className="skip-button">
+        Skip
+      </button>
+    </div>
+  );
+};
+
+VideoPlayer.propTypes = {
+  videoSrc: PropTypes.string.isRequired,
+  sections: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      timestamp: PropTypes.number.isRequired,
+    })
+  ).isRequired,
+  onSectionChange: PropTypes.func,
+  theme: PropTypes.object,
+};
+
+VideoPlayer.defaultProps = {
+  theme: {},
+  onSectionChange: null,
+};
+
+export default VideoPlayer;

package/src/index.js

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

package/src/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/src/types/index.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+
+export interface Section {
+  name: string;
+  timestamp: number;
+}
+
+export interface VideoPlayerProps {
+  videoSrc: string;
+  sections: Section[];
+  onSectionChange?: (section: Section) => void;
+  theme?: Record<string, string | number>;
+}
+
+declare const VideoPlayer: (props: VideoPlayerProps) => ReactNode;
+
+export default VideoPlayer;

package/tsconfig.json

@@ -1,21 +1,14 @@
 {
     "compilerOptions": {
-        "target": "es6",
-        "module": "commonjs",
-        "jsx": "react",
-        "strict": true,
-        "esModuleInterop": true,
-        "skipLibCheck": true,
-        "forceConsistentCasingInFileNames": true,
-        "outDir": "./dist",
-        "declaration": true
+      "target": "es5",
+      "module": "commonjs",
+      "jsx": "react-jsx",
+      "strict": true,
+      "esModuleInterop": true,
+      "forceConsistentCasingInFileNames": true,
+      "declaration": true,
+      "outDir": "./dist"
     },
-    "include": [
-        "src/**/*",
-        "src/@types/**/*"
-    ],
-    "exclude": [
-        "node_modules",
-        "**/*.spec.ts"
-    ]
-}
+    "include": ["src/**/*"]
+  }
+  

package/.babelrc

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

package/dist/@types/customvidplayer.d.ts

@@ -1,6 +0,0 @@
-declare module 'customvidplayer' {
-    import { FC } from 'react';
-
-    export const CVPlayer: FC<{ videoSrc: string; sections: Array<{ timestamp: number; name: string }> }>;
-    export const ThemeProvider: FC<{ children: React.ReactNode }>;
-}

package/dist/CVPlayer.js

@@ -1,69 +0,0 @@
-"use strict";
-
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _fa = require("react-icons/fa");
-require("./CVPlayer.css");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-// Add your CSS for styling
-
-/**
- * Custom Video Player Component
- * @param {Object} props - Component properties
- * @param {string} props.videoSrc - Source URL of the video
- * @param {Array} props.sections - Array of section objects with timestamps
- */
-var CVPlayer = function CVPlayer(_ref) {
-  var videoSrc = _ref.videoSrc,
-    sections = _ref.sections;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isPlaying = _useState2[0],
-    setIsPlaying = _useState2[1];
-  var videoRef = (0, _react.useRef)(null);
-  var togglePlayPause = function togglePlayPause() {
-    if (isPlaying) {
-      videoRef.current.pause();
-    } else {
-      videoRef.current.play();
-    }
-    setIsPlaying(!isPlaying);
-  };
-  var skipToSection = function skipToSection(timestamp) {
-    videoRef.current.currentTime = timestamp;
-    videoRef.current.play(); // Optionally play after skipping
-  };
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "cv-player"
-  }, /*#__PURE__*/_react["default"].createElement("video", {
-    ref: videoRef,
-    src: videoSrc,
-    onTimeUpdate: function onTimeUpdate() {
-      return setCurrentTime(videoRef.current.currentTime);
-    },
-    controls: true // Optional: adds default video controls
-  }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "controls"
-  }, /*#__PURE__*/_react["default"].createElement("button", {
-    onClick: togglePlayPause
-  }, isPlaying ? /*#__PURE__*/_react["default"].createElement(_fa.FaPause, null) : /*#__PURE__*/_react["default"].createElement(_fa.FaPlay, null)), sections.map(function (section, index) {
-    return /*#__PURE__*/_react["default"].createElement("button", {
-      key: index,
-      onClick: function onClick() {
-        return skipToSection(section.timestamp);
-      }
-    }, "Skip to ", section.name);
-  })));
-};
-var _default = exports["default"] = CVPlayer;

package/dist/ThemeProvider.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-/**
- * Theme Provider for Custom Video Player
- * @param {Object} props - Component properties
- * @returns {JSX.Element}
- */
-var ThemeProvider = function ThemeProvider(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "theme-provider"
-  }, children);
-};
-var _default = exports["default"] = ThemeProvider;

package/dist/index.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "CVPlayer", {
-  enumerable: true,
-  get: function get() {
-    return _CVPlayer["default"];
-  }
-});
-Object.defineProperty(exports, "ThemeProvider", {
-  enumerable: true,
-  get: function get() {
-    return _ThemeProvider["default"];
-  }
-});
-var _CVPlayer = _interopRequireDefault(require("./CVPlayer"));
-var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }

package/src/@types/customvidplayer.d.ts

@@ -1,6 +0,0 @@
-declare module 'customvidplayer' {
-    import { FC } from 'react';
-
-    export const CVPlayer: FC<{ videoSrc: string; sections: Array<{ timestamp: number; name: string }> }>;
-    export const ThemeProvider: FC<{ children: React.ReactNode }>;
-}

package/src/CVPlayer.jsx

@@ -1,51 +0,0 @@
-import React, { useState, useRef } from 'react';
-import { FaPlay, FaPause } from 'react-icons/fa';
-import './CVPlayer.css'; // Add your CSS for styling
-
-/**
- * Custom Video Player Component
- * @param {Object} props - Component properties
- * @param {string} props.videoSrc - Source URL of the video
- * @param {Array} props.sections - Array of section objects with timestamps
- */
-const CVPlayer = ({ videoSrc, sections }) => {
-    const [isPlaying, setIsPlaying] = useState(false);
-    const videoRef = useRef(null);
-
-    const togglePlayPause = () => {
-        if (isPlaying) {
-            videoRef.current.pause();
-        } else {
-            videoRef.current.play();
-        }
-        setIsPlaying(!isPlaying);
-    };
-
-    const skipToSection = (timestamp) => {
-        videoRef.current.currentTime = timestamp;
-        videoRef.current.play(); // Optionally play after skipping
-    };
-
-    return (
-        <div className="cv-player">
-            <video 
-                ref={videoRef} 
-                src={videoSrc} 
-                onTimeUpdate={() => setCurrentTime(videoRef.current.currentTime)} 
-                controls // Optional: adds default video controls
-            />
-            <div className="controls">
-                <button onClick={togglePlayPause}>
-                    {isPlaying ? <FaPause /> : <FaPlay />}
-                </button>
-                {sections.map((section, index) => (
-                    <button key={index} onClick={() => skipToSection(section.timestamp)}>
-                        Skip to {section.name}
-                    </button>
-                ))}
-            </div>
-        </div>
-    );
-};
-
-export default CVPlayer;

package/src/ThemeProvider.jsx

@@ -1,16 +0,0 @@
-import React from 'react';
-
-/**
- * Theme Provider for Custom Video Player
- * @param {Object} props - Component properties
- * @returns {JSX.Element}
- */
-const ThemeProvider = ({ children }) => {
-    return (
-        <div className="theme-provider">
-            {children}
-        </div>
-    );
-};
-
-export default ThemeProvider;

package/webpack.config.js

@@ -1,32 +0,0 @@
-// webpack.config.js
-const path = require('path');
-
-module.exports = {
-  entry: './src/index.js', // Your main JavaScript file
-  output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: 'bundle.js',
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx)$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: ['@babel/preset-env', '@babel/preset-react']
-          }
-        }
-      },
-      {
-        test: /\.tsx?$/,
-        exclude: /node_modules/,
-        use: 'ts-loader'
-      }
-    ],
-  },
-  resolve: {
-    extensions: ['.js', '.jsx', '.ts', '.tsx']
-  }
-};