customvidplayer 0.0.14 → 0.0.16

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];
@@ -70,14 +73,29 @@ var VideoPlayer = function VideoPlayer(_a) {
     }
   };
   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);
+    if (videoRef.current) {
+      var currentTime_1 = videoRef.current.currentTime;
+      var currentSection = sections.find(function (section, index) {
+        return currentTime_1 >= section.timestamp && (index === sections.length - 1 || currentTime_1 < sections[index + 1].timestamp);
+      });
+      if (currentSection && sections[currentSectionIndex] !== currentSection) {
+        var newIndex = sections.indexOf(currentSection);
+        setCurrentSectionIndex(newIndex);
+        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() {
+    if (videoRef.current) {
+      videoRef.current.currentTime += 10;
     }
   };
   return react_1["default"].createElement("div", {
@@ -85,20 +103,41 @@ var VideoPlayer = function VideoPlayer(_a) {
     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: videoRef.current ? "".concat(section.timestamp / videoRef.current.duration * 100, "%") : '0%',
+        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.14",
+    "version": "0.0.16",
     "description": "Customizable video player with section navigation and theming.",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",

package/src/components/VideoPlayer.js

@@ -1,10 +1,11 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } 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 [isPlaying, setIsPlaying] = useState(false);
 
   const skipToNextSection = () => {
     if (currentSectionIndex < sections.length - 1) {
@@ -16,17 +17,35 @@ const VideoPlayer = ({ videoSrc, sections, onSectionChange, theme }) => {
   };
 
   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 (videoRef.current) {
+      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);
+      if (currentSection && sections[currentSectionIndex] !== currentSection) {
+        const newIndex = sections.indexOf(currentSection);
+        setCurrentSectionIndex(newIndex);
+        if (onSectionChange) onSectionChange(currentSection);
+      }
+    }
+  };
+
+  const playVideo = () => {
+    videoRef.current.play();
+    setIsPlaying(true);
+  };
+
+  const pauseVideo = () => {
+    videoRef.current.pause();
+    setIsPlaying(false);
+  };
+
+  const skipForward = () => {
+    if (videoRef.current) {
+      videoRef.current.currentTime += 10;
     }
   };
 
@@ -34,14 +53,34 @@ const VideoPlayer = ({ videoSrc, sections, onSectionChange, theme }) => {
     <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: videoRef.current ? `${(section.timestamp / videoRef.current.duration) * 100}%` : '0%',
+              backgroundColor: section.color || '#007bff',
+            }}
+          >
+            {section.name}
+          </div>
+        ))}
+      </div>
     </div>
   );
 };
@@ -52,6 +91,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 */
+  }