fix: added tintColor and updated readme

Author: techbyvj

.github/workflows/ci.yml

@@ -62,3 +62,24 @@ jobs:
       - name: Build example for Web
         run: |
           yarn example expo export --platform web
+
+  publish-npm:
+    needs: [build-library, test]
+    runs-on: ubuntu-latest
+    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup
+        uses: ./.github/actions/setup
+
+      - name: Build package
+        run: yarn prepare
+
+      - name: Publish to npm
+        run: |
+          npm config set //registry.npmjs.org/:_authToken=${NPM_TOKEN}
+          npm publish --access public
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

README.md

@@ -1,6 +1,6 @@
 # react-native-video-trimmer-ui
 
-React Native Video Trimmer is a powerful and easy-to-use component that adds video trimming functionality to your React Native applications. Perfect for video editing apps, social media platforms, or any application requiring video manipulation.
+React Native Video Trimmer UI is a powerful and easy-to-use UI component that adds video trimming functionality to your React Native applications. It's perfect for video editing apps, social media platforms, or any application requiring video manipulation.
 
 ## Key Features
 
@@ -10,9 +10,7 @@ React Native Video Trimmer is a powerful and easy-to-use component that adds vid
 - Support for various video formats
 - Efficient trimming process with optimized performance
 - Cross-platform compatibility (iOS and Android)
-- Easy integration with existing React Native projects
-
-This library leverages native video processing capabilities to ensure smooth performance and high-quality output.
+- Easy integration with existing React Native projects (Expo and bare React Native)
 
 ## Installation
 
@@ -22,30 +20,74 @@ npm install react-native-video react-native-video-trimmer-ui
 
 ## Usage
 
+Import the VideoTrimmerUI component in your React Native application:
+
 ```javascript
-import VideoTrimmer from 'react-native-video-trimmer';
+import VideoTrimmerUI from 'react-native-video-trimmer-ui';
+```
 
-// ...
+Then, use the VideoTrimmerUI component in your JSX:
 
-<VideoTrimmer source={videoSource}  />
+```javascript
+<VideoTrimmerUI
+  source={{ uri: 'https://example.com/video.mp4' }}
+  onSelected={(start, end) => console.log(`Selected trim range: ${start} to ${end}`)}
+  loop={true}
+  containerStyle={{ height: 300 }}
+  sliderContainerStyle={{ marginHorizontal: 20 }}
+  tintColor="#007AFF"
+/>
 ```
 
-## Props
+### Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | source | ReactVideoSource | required | The source of the video (e.g., `{ uri: 'https://example.com/video.mp4' }`) |
+| onSelected | function | - | Callback function that receives the selected start and end times (in seconds) when the user finishes trimming |
 | loop | boolean | true | Whether the video should loop after reaching the end |
-| containerStyle | ViewStyle | - | Custom styles for the container of the VideoWithSlider component |
+| containerStyle | ViewStyle | - | Custom styles for the container of the VideoTrimmerUI component |
 | sliderContainerStyle | ViewStyle | - | Custom styles for the slider container |
-| tintColor | string | '#24a0ed' | Color of the slider and its components |
+| tintColor | string | '#24A0ED' | Color of the slider and its components |
+
+### Methods
+
+You can access the VideoTrimmerUI methods using a ref:
+
+```javascript
+const trimmerRef = useRef(null);
+
+// Later in your component
+const [start, end] = trimmerRef.current.getSelection();
+console.log(`Current trim range: ${start} to ${end}`);
+
+// In your JSX
+<VideoTrimmerUI
+  ref={trimmerRef}
+  // ... other props
+/>
+```
+
+Available methods:
+- `getSelection()`: Returns an array with the current start and end times of the trim range.
+
+
+## Trimming the Video
+
+After selecting the trim range using the VideoTrimmerUI component, you can use the `react-native-video-trimmer-core` library to perform the actual video trimming. For more information on how to use this library, please refer to the [react-native-video-trimmer-core npm package](https://www.npmjs.com/package/react-native-video-trimmer-core).
 
 ## Features
 
 - Video trimming functionality for React Native applications
 - Customizable slider for selecting trim range
 - Supports looping video playback
 
+## Upcoming Features
+
+- Additional customization options for the trimmer UI
+    - Fully customizable Video
+    - Fully customizable slider
+
 ## License
 
 MIT

example/src/App.tsx

@@ -1,10 +1,10 @@
 import { StyleSheet, View } from 'react-native';
-import VideoTrimmer from 'react-native-video-trimmer-ui';
+import VideoTrimmerUI from 'react-native-video-trimmer-ui';
 
 export default function App() {
   return (
     <View style={styles.container}>
-      <VideoTrimmer
+      <VideoTrimmerUI
         source={require('../assets/sample.mp4')}
         onSelected={console.info}
       />

src/components/ProgressBar.tsx

@@ -4,15 +4,16 @@ import { progressBarStyles } from './styles';
 interface ProgressBarProps {
   value: number;
   style?: StyleProp<ViewStyle>;
+  tintColor: string | undefined;
 }
 
-function ProgressBar({ value, style }: ProgressBarProps) {
+function ProgressBar({ value, style, tintColor }: ProgressBarProps) {
   return (
     <View style={[progressBarStyles.container, style]}>
       <View
         style={[
           progressBarStyles.progress,
-          { width: `${Math.ceil(100 * value)}%` },
+          { width: `${Math.ceil(100 * value)}%`, backgroundColor: tintColor },
         ]}
       />
     </View>

src/components/Slider.tsx

@@ -35,7 +35,7 @@ function Slider({
         ])}
         minimumTrackTintColor={tintColor}
         renderMinimumTrackComponent={() => (
-          <ProgressBar value={playbackTime / thumbs[1]} />
+          <ProgressBar value={playbackTime / thumbs[1]} tintColor={tintColor} />
         )}
         onSlidingComplete={onSlidingComplete}
         renderThumbComponent={() => (

src/components/VideoTrimmer.tsx

@@ -19,10 +19,10 @@ export interface VideoTrimmerProps {
 }
 
 export interface VideoTrimmerRef {
-  getThumbs: () => [number, number];
+  getSelection: () => [number, number];
 }
 
-function VideoTrimmer(props: VideoTrimmerProps, ref: Ref<unknown>) {
+function VideoTrimmerUI(props: VideoTrimmerProps, ref: Ref<unknown>) {
   const {
     containerStyle,
     source,
@@ -36,9 +36,9 @@ function VideoTrimmer(props: VideoTrimmerProps, ref: Ref<unknown>) {
   const [thumbs, setThumbs] = useState<[number, number]>([0, 0]);
   const videoRef = React.useRef<VideoRef | null>(null);
 
-  const getThumbs = () => thumbs;
+  const getSelection = () => thumbs;
   React.useImperativeHandle(ref, () => ({
-    getThumbs,
+    getSelection,
   }));
 
   const seek = (time: number | undefined) => {
@@ -113,4 +113,4 @@ function VideoTrimmer(props: VideoTrimmerProps, ref: Ref<unknown>) {
   );
 }
 
-export default forwardRef(VideoTrimmer);
+export default forwardRef(VideoTrimmerUI);

src/components/styles.ts

@@ -40,10 +40,8 @@ export const sliderStyles = StyleSheet.create({
 });
 
 export const progressBarStyles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: 'transparent' },
+  container: { flex: 1, backgroundColor: '#00000050' },
   progress: {
     flex: 1,
-    opacity: 0.5,
-    backgroundColor: 'black',
   },
 });

src/index.tsx

@@ -1,3 +1,3 @@
-import VideoTrimmer from './components/VideoTrimmer';
+import VideoTrimmerUI from './components/VideoTrimmer';
 
-export default VideoTrimmer;
+export default VideoTrimmerUI;