customvidplayer 0.0.1

package/.babelrc

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

package/dist/CVPlayer.js

@@ -0,0 +1,69 @@
+"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

@@ -0,0 +1,20 @@
+"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

@@ -0,0 +1,20 @@
+"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/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "customvidplayer",
+  "version": "0.0.1",
+  "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"
+  },
+  "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-loader": "^8.4.1"
+  }
+}

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+declare module 'cvplayerv2' {
+    export const CVPlayer: any;
+    export const ThemeProvider: any;
+}

package/src/CVPlayer.jsx

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,16 @@
+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/src/index.js

@@ -0,0 +1,4 @@
+import CVPlayer from './CVPlayer';
+import ThemeProvider from './ThemeProvider';
+
+export { CVPlayer, ThemeProvider };

package/webpack.config.js

@@ -0,0 +1,34 @@
+// 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$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+        },
+      },
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-react']
+          }
+        }
+      }
+    ],
+  },
+  resolve: {
+    extensions: ['.js', '.jsx'] // Ensure .jsx is resolved
+  }
+};