customvidplayer 0.0.17 → 0.0.18

package/dist/components/VideoPlayer.js

@@ -127,9 +127,9 @@ var VideoPlayer = function VideoPlayer(_a) {
       className: "section-indicator",
       style: {
         left: videoRef.current ? "".concat(section.timestamp / videoRef.current.duration * 100, "%") : '0%',
-        backgroundColor: section.color || '#007bff'
+        backgroundColor: section.color || '#ff5722'
       }
-    }, section.name);
+    });
   })));
 };
 VideoPlayer.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "customvidplayer",
-    "version": "0.0.17",
+    "version": "0.0.18",
     "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, useEffect } from "react";
+import React, { useState, useRef } from "react";
 import PropTypes from "prop-types";
 import "./../styles/defaultTheme.css";
 
@@ -74,11 +74,9 @@ const VideoPlayer = ({ videoSrc, sections, onSectionChange, theme }) => {
             className="section-indicator"
             style={{
               left: videoRef.current ? `${(section.timestamp / videoRef.current.duration) * 100}%` : '0%',
-              backgroundColor: section.color || '#007bff',
+              backgroundColor: section.color || '#ff5722',
             }}
-          >
-            {section.name}
-          </div>
+          />
         ))}
       </div>
     </div>

package/src/styles/defaultTheme.css

@@ -3,17 +3,17 @@
     width: 100%;
     max-width: 800px;
     margin: 0 auto;
+    background: #f0f0f0;
+    border-radius: 10px;
+    overflow: hidden;
   }
   
   .video-element {
     width: 100%;
-    border-radius: 5px;
+    border-radius: 10px 10px 0 0;
   }
   
-  .skip-button {
-    position: absolute;
-    bottom: 10px;
-    right: 10px;
+  .skip-button, button {
     padding: 8px 12px;
     background: #ff5722;
     color: white;
@@ -22,6 +22,10 @@
     cursor: pointer;
   }
   
+  .skip-button:hover, button:hover {
+    background: #e64a19;
+  }
+  
   .section {
     cursor: pointer;
     margin: 5px 0;
@@ -31,7 +35,10 @@
   .bottom-bar {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     padding: 10px;
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
   }
   
   .progress-bar {
@@ -43,8 +50,7 @@
   
   .section-indicator {
     position: absolute;
-    width: 5px;
     height: 100%;
-    background: #007bff; /* Default color */
+    background: #ff5722;
   }