customvidplayer 0.0.13 → 0.0.15

package/dist/components/VideoPlayer.d.ts

@@ -11,6 +11,7 @@ declare namespace VideoPlayer {
         const sections: PropTypes.Validator<(PropTypes.InferProps<{
             name: PropTypes.Validator<string>;
             timestamp: PropTypes.Validator<number>;
+            color: PropTypes.Requireable<string>;
         }> | null | undefined)[]>;
         const onSectionChange: PropTypes.Requireable<(...args: any[]) => any>;
         const theme: PropTypes.Requireable<object>;

package/dist/components/VideoPlayer.js

@@ -61,6 +61,9 @@ var VideoPlayer = function VideoPlayer(_a) {
   var _b = (0, react_1.useState)(0),
     currentSectionIndex = _b[0],
     setCurrentSectionIndex = _b[1];
+  var _c = (0, react_1.useState)(false),
+    isPlaying = _c[0],
+    setIsPlaying = _c[1];
   var skipToNextSection = function skipToNextSection() {
     if (currentSectionIndex < sections.length - 1) {
       var nextSection = sections[currentSectionIndex + 1];
@@ -80,25 +83,57 @@ var VideoPlayer = function VideoPlayer(_a) {
       if (onSectionChange) onSectionChange(currentSection);
     }
   };
+  var playVideo = function playVideo() {
+    videoRef.current.play();
+    setIsPlaying(true);
+  };
+  var pauseVideo = function pauseVideo() {
+    videoRef.current.pause();
+    setIsPlaying(false);
+  };
+  var skipForward = function skipForward() {
+    videoRef.current.currentTime += 10;
+  };
   return react_1["default"].createElement("div", {
     className: "video-player",
     style: __assign({}, theme)
   }, react_1["default"].createElement("video", {
     src: videoSrc,
-    controls: true,
+    controls: false,
     ref: videoRef,
     onTimeUpdate: handleTimeUpdate,
     className: "video-element"
-  }), react_1["default"].createElement("button", {
+  }), react_1["default"].createElement("div", {
+    className: "bottom-bar",
+    style: {
+      backgroundColor: theme.bottomBarColor || '#000'
+    }
+  }, react_1["default"].createElement("button", {
+    onClick: isPlaying ? pauseVideo : playVideo
+  }, isPlaying ? 'Pause' : 'Play'), react_1["default"].createElement("button", {
+    onClick: skipForward
+  }, "Skip 10s"), react_1["default"].createElement("button", {
     onClick: skipToNextSection,
     className: "skip-button"
-  }, "Skip"));
+  }, "Skip")), react_1["default"].createElement("div", {
+    className: "progress-bar"
+  }, sections.map(function (section, index) {
+    return react_1["default"].createElement("div", {
+      key: index,
+      className: "section-indicator",
+      style: {
+        left: "".concat(section.timestamp / videoRef.current.duration * 100, "%"),
+        backgroundColor: section.color || '#007bff'
+      }
+    }, section.name);
+  })));
 };
 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
+    timestamp: prop_types_1["default"].number.isRequired,
+    color: prop_types_1["default"].string
   })).isRequired,
   onSectionChange: prop_types_1["default"].func,
   theme: prop_types_1["default"].object

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "customvidplayer",
-    "version": "0.0.13",
+    "version": "0.0.15",
     "description": "Customizable video player with section navigation and theming.",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",

package/src/components/VideoPlayer.js

@@ -5,6 +5,7 @@ import "./../styles/defaultTheme.css";
 const VideoPlayer = ({ videoSrc, sections, onSectionChange, theme }) => {
   const videoRef = useRef(null);
   const [currentSectionIndex, setCurrentSectionIndex] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
 
   const skipToNextSection = () => {
     if (currentSectionIndex < sections.length - 1) {
@@ -30,18 +31,52 @@ const VideoPlayer = ({ videoSrc, sections, onSectionChange, theme }) => {
     }
   };
 
+  const playVideo = () => {
+    videoRef.current.play();
+    setIsPlaying(true);
+  };
+
+  const pauseVideo = () => {
+    videoRef.current.pause();
+    setIsPlaying(false);
+  };
+
+  const skipForward = () => {
+    videoRef.current.currentTime += 10;
+  };
+
   return (
     <div className="video-player" style={{ ...theme }}>
       <video
         src={videoSrc}
-        controls
+        controls={false}
         ref={videoRef}
         onTimeUpdate={handleTimeUpdate}
         className="video-element"
       />
-      <button onClick={skipToNextSection} className="skip-button">
-        Skip
-      </button>
+      <div className="bottom-bar" style={{ backgroundColor: theme.bottomBarColor || '#000' }}>
+        <button onClick={isPlaying ? pauseVideo : playVideo}>
+          {isPlaying ? 'Pause' : 'Play'}
+        </button>
+        <button onClick={skipForward}>Skip 10s</button>
+        <button onClick={skipToNextSection} className="skip-button">
+          Skip
+        </button>
+      </div>
+      <div className="progress-bar">
+        {sections.map((section, index) => (
+          <div
+            key={index}
+            className="section-indicator"
+            style={{
+              left: `${(section.timestamp / videoRef.current.duration) * 100}%`,
+              backgroundColor: section.color || '#007bff',
+            }}
+          >
+            {section.name}
+          </div>
+        ))}
+      </div>
     </div>
   );
 };
@@ -52,6 +87,7 @@ VideoPlayer.propTypes = {
     PropTypes.shape({
       name: PropTypes.string.isRequired,
       timestamp: PropTypes.number.isRequired,
+      color: PropTypes.string,
     })
   ).isRequired,
   onSectionChange: PropTypes.func,

package/src/styles/defaultTheme.css

@@ -27,4 +27,24 @@
     margin: 5px 0;
     color: #007bff;
   }
+  
+  .bottom-bar {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px;
+  }
+  
+  .progress-bar {
+    position: relative;
+    height: 5px;
+    background: #ccc;
+    margin-top: 5px;
+  }
+  
+  .section-indicator {
+    position: absolute;
+    width: 5px;
+    height: 100%;
+    background: #007bff; /* Default color */
+  }