customvidplayer 0.0.15 → 0.0.17

package/dist/components/VideoPlayer.js

@@ -73,14 +73,16 @@ 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() {
@@ -92,7 +94,9 @@ var VideoPlayer = function VideoPlayer(_a) {
     setIsPlaying(false);
   };
   var skipForward = function skipForward() {
-    videoRef.current.currentTime += 10;
+    if (videoRef.current) {
+      videoRef.current.currentTime += 10;
+    }
   };
   return react_1["default"].createElement("div", {
     className: "video-player",
@@ -122,7 +126,7 @@ var VideoPlayer = function VideoPlayer(_a) {
       key: index,
       className: "section-indicator",
       style: {
-        left: "".concat(section.timestamp / videoRef.current.duration * 100, "%"),
+        left: videoRef.current ? "".concat(section.timestamp / videoRef.current.duration * 100, "%") : '0%',
         backgroundColor: section.color || '#007bff'
       }
     }, section.name);

package/package.json

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

package/src/components/VideoPlayer.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import PropTypes from "prop-types";
 import "./../styles/defaultTheme.css";
 
@@ -17,17 +17,19 @@ 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);
+      }
     }
   };
 
@@ -42,7 +44,9 @@ const VideoPlayer = ({ videoSrc, sections, onSectionChange, theme }) => {
   };
 
   const skipForward = () => {
-    videoRef.current.currentTime += 10;
+    if (videoRef.current) {
+      videoRef.current.currentTime += 10;
+    }
   };
 
   return (
@@ -69,7 +73,7 @@ const VideoPlayer = ({ videoSrc, sections, onSectionChange, theme }) => {
             key={index}
             className="section-indicator"
             style={{
-              left: `${(section.timestamp / videoRef.current.duration) * 100}%`,
+              left: videoRef.current ? `${(section.timestamp / videoRef.current.duration) * 100}%` : '0%',
               backgroundColor: section.color || '#007bff',
             }}
           >