patch: clean up code, update README

README.md

@@ -1,70 +1,64 @@
-# Lottie Player Application (WIP)
+# Lottie Player Tauri - README.md
 
 ## Overview
-The Lottie Player Application is a dynamic Tauri-based platform currently under development. It is designed for animators and developers who wish to interact with Lottie animations. The application enables users to select, view, and control Lottie animations embedded in `.json` or `.html` files, and will be available as a compiled multi-platform application .
+
+Lottie Player Tauri is a desktop application developed using Tauri and React, designed for playing and interacting with Lottie animations. It provides a rich interface with advanced features and controls for Lottie animations, making it a versatile tool for designers and developers. This project is actively developed, and new features are continually being added.
 
 ## Features
-- **File Selection:** Choose individual or multiple files or folders containing Lottie animations.
-- **Animation Playback:** Play, pause, rewind, or loop animations. Access playback for specific segments.
-- **Custom Controls:** Modify the appearance of animation elements in real-time.
-- **Lottie-API Integration:** Apply Lottie-API for asynchronous animation customization and advanced interaction.
 
-## Getting Started
-Clone the repository to your local environment to get started:
+### Current Features
 
-```bash
-git clone https://github.com/your-repository/lottie-player.git
-```
+- **Animation Playback**: Users can load and play Lottie animations.
+- **Play/Pause Control**: Integrated play and pause functionality with UI feedback.
+- **Progress Tracking**: Ability to see and control the progress of the animation.
+- **Color Customization**: The application includes a color picker for customizing the background.
+- **Animation Information**: Display detailed information about the Lottie file, such as frame rate, duration, and size.
+- **TreeView for File Selection**: Browse and select files using a TreeView structure.
+- **File Selection**: Select Lottie files using both a file picker and the TreeView.
 
-### Prerequisites
-- Node.js
-- npm or Yarn
-- Tauri
-- A modern web browser
+### Planned Features
 
-### Installation
-Install the required dependencies within the cloned repository:
+- **Marker Playback**: Jump to and play specific markers within Lottie animations.
+- **Segment Playback**: Ability to play specific segments of an animation.
+- **Style Updates to Lottie Elements**: Update styles (color, stroke, etc.) of Lottie elements within the application.
+- **Class Addition to Lottie Elements**: Ability to add classes to Lottie elements and save the modified Lottie file.
+- **Interactivity Processing**: Add interactive elements to Lottie animations and generate code snippets for integration.
 
-```bash
-cd lottie-player
-npm install
-```
+## Installation and Usage
 
-### Running the Application
-To launch the application, execute:
+To set up and use Lottie Player Tauri, follow these steps:
 
-```bash
-npm run tauri dev
-```
+1. **Clone the Repository**: Clone the repository from [GitHub](https://github.com/ivg-design/LottiePlayerTauri).
+2. **Install Dependencies**:
+   - Install [Rust](https://www.rust-lang.org/tools/install) and [Cargo](https://doc.rust-lang.org/cargo/getting-started/installation.html).
+   - Ensure [Node.js](https://nodejs.org/en/) is installed.
+   - Install Tauri CLI globally using `npm install -g @tauri-apps/cli` or `yarn global add @tauri-apps/cli`.
+   - Run `npm install` or `yarn install` in the project directory to install necessary JavaScript dependencies.
+3. **Build and Run the Application**:
+   - Use `cargo tauri dev` to start the application in development mode.
+   - Use `cargo tauri build` to build the application for production.
 
-This command will start the application in development mode.
+## Development
 
-## Usage
-When you start the application, you'll be presented with an interface to select Lottie animation files. The application allows for comprehensive file navigation and manipulation of animations.
+The application's entry point is `App.js`, which sets up the React components and integrates the Tauri functionalities. Key components include:
 
-### File Navigation
-- Browse folders using the sidebar.
-- Select an animation file to view it.
+- `App.js`: Application entrypoint contains the main app and treeNode components.
+- `PlayerUI.js`: The main interface for the Lottie player, containing playback controls and display elements.
+- `LottiePlayer.js`: Renders the Lottie animation.
+- `LottieInfoParser.js`: Parses Lottie file data and displays animation details.
 
-### Animation Controls
-Controls available in the application include:
-- **Play/Pause:** Toggle animation playback.
-- **Segments:** Isolate and play defined segments of the animation.
-- **Modify Elements:** Adjust properties such as color and opacity of animation elements.
-- **Lottie-API Controls:** Use custom JavaScript code for interacting with animations programmatically.
+## Contribution
 
-## Contributing
-We encourage contributions to the Lottie Player Application. Please make sure to update tests as appropriate.
+We welcome contributions! If you're interested in contributing, feel free to submit pull requests or open issues for bugs and feature requests.
 
 ## License
-This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
 
-## Acknowledgments
-- Thanks to LottieFiles for providing the Lottie-web library.
-- Appreciation to all contributors who are helping to enhance this tool.
+This project is licensed under the [MIT License](LICENSE.md).
+
+## Note
+
+This project is in a development phase, and the features listed are subject to change. The repository is regularly updated, and we aim to bring more functionality and improvements to the Lottie Player Tauri application.
 
-## Contact
-For any inquiries, please reach out to [IVG Design](mailto:ilyav@gusinski.us)
+---
 
-## Changelog
-For a comprehensive list of changes made to the application, refer to the [CHANGELOG.md](CHANGELOG.md) file.
+*This README.md provides a comprehensive guide to the Lottie Player Tauri project. For the most current information, please refer to the project's [GitHub repository](https://github.com/ivg-design/LottiePlayerTauri).*

src/App.js

@@ -8,7 +8,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faFolderTree, faFileImport } from '@fortawesome/free-solid-svg-icons';
 import './NeumorphicButton.css';
 import './App.css';
+
 const isLoggingEnabled = true; // Set to false to disable logging
+
 // ERROR LOGGING
 function log(...messages) {
 	if (isLoggingEnabled) {
@@ -42,7 +44,6 @@ const sortItems = (items) => {
 /**
  * TreeNode component represents each node in a file tree structure.
  * It is responsible for rendering individual tree nodes, handling node expansion/collapse, and node selection.
- *
  */
 const TreeNode = React.forwardRef(({
 		item,
@@ -53,7 +54,6 @@ const TreeNode = React.forwardRef(({
 		onCollapse,
 		expandedPaths,
 		onFileSelected,
-		onHeightChange // This is a new prop to be passed from the App component
 	}, ref) => {
 		const [children, setChildren] = useState([]);
 		const isExpanded = expandedPaths.includes(item.path);
@@ -190,10 +190,12 @@ const TreeNode = React.forwardRef(({
 });
 
 
-// App component
+/** 
+ * App component represents the main application. 
+ * It is responsible for rendering the file tree and the animation player.
+ */
 const App = () => {
 	const [folderStructure, setFolderStructure] = useState([]);
-	const rootRef = useRef(null); // Create a ref for the root TreeNode if not already done
 	const [sidebarWidth, setSidebarWidth] = useState(200);
 	const [collapsed, setCollapsed] = useState(true);
 	const [isResizing, setIsResizing] = useState(false);
@@ -202,13 +204,10 @@ const App = () => {
 	const selectedRef = useRef(null);
 	const [isTreeToggled, setIsTreeToggled] = useState(false);
 	const [animationData, setAnimationData] = useState(null);
-	const [isPlaying, setIsPlaying] = useState(false);
 	const [fileSize, setFileSize] = useState(null);
 	const [isFilePickerOpen, setIsFilePickerOpen] = useState(false);
 
-
-
-
+	// This effect is called when the component mounts and it fetches the root directory of the file system
 	useEffect(() => {
 		const fetchDir = async () => {
 			const rootPath = '/'; // Use your desired initial path
@@ -223,42 +222,79 @@ const App = () => {
 		fetchDir();
 	}, []);
 
+	// This effect is called when the selectedPath state changes and scrolls the selected item into view
 	useEffect(() => {
 		if (selectedRef.current) {
 			selectedRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
 		}
 	}, [selectedPath]); // Only re-run if selectedPath changes
-
+
+	// This function is called when the user clicks and drags the resize handle
 	const startResizing = useCallback((e) => {
-		e.preventDefault();
+		e.preventDefault(); // Prevent default behavior of the mouse down event
 		setIsResizing(true);
 	}, []);
-
+
+	// This function is called when the user releases the mouse button after resizing
 	const stopResizing = useCallback(() => {
 		setIsResizing(false);
 	}, []);
 
+	//This function is called when  the user moves the mouse after clicking and dragging the resize handle
 	const resize = useCallback((e) => {
-		if (isResizing) {
+		if (isResizing) { 
 			setSidebarWidth(e.clientX);
 		}
 	}, [isResizing]);
-
+
+	// This effect is called when the component mounts and adds event listeners for resizing
 	useEffect(() => {
-		window.addEventListener('mousemove', resize);
-		window.addEventListener('mouseup', stopResizing);
+		window.addEventListener('mousemove', resize); // Add event listeners for resizing
+		window.addEventListener('mouseup', stopResizing); // Add event listeners for stopping resizing
 
 		return () => {
-			window.removeEventListener('mousemove', resize);
+			window.removeEventListener('mousemove', resize); 
 			window.removeEventListener('mouseup', stopResizing);
 		};
 	}, [resize, stopResizing]);
 
+	// This function is called when the user clicks on a file in the file tree and returns true if the file is selected
 	const isSelected = (path) => {
-		return selectedPath === path;
+		return selectedPath === path;// Return true if the selectedPath state matches the path
+	};
+
+	//This function is called when a file is selected in the file tree for the purpose of navigation the tree
+	const handleSelect = (path) => {
+		setSelectedPath(path);
+		const pathSegments = path.split('/');
+		const pathsToExpand = pathSegments.reduce((acc, segment, index) => {
+			const path = index === 0 ? segment : `${acc[index - 1]}/${segment}`;
+			acc.push(path);
+			return acc;
+		}, []);
+
+		setExpandedPaths(pathsToExpand);
 	};
+
+	// This function is called when a file is selected in the file tree for the purpose of expanding the tree
+	const handleExpand = (path) => {
+	setExpandedPaths(prevPaths => {
+		if (!prevPaths.includes(path)) {
+			return [...prevPaths, path];
+		}
+		return prevPaths;
+	});
+	};
+
+	// This function is called when a file is selected in the file tree for the purpose of collapsing the tree
+	const handleCollapse = (path) => {
+		setExpandedPaths(prevPaths => {
+			return prevPaths.filter(p => p !== path);
+		});
+	};
+
 	// This function is called when the user clicks the "Choose File" button
-		const handleChooseFile = async () => {
+	const handleChooseFile = async () => {
 		// Prevent opening multiple file pickers
 		if (isFilePickerOpen) return;
 
@@ -289,34 +325,8 @@ const App = () => {
 			setIsFilePickerOpen(false); // Reset state regardless of success or failure
 		}
 	};
-	const handleSelect = (path) => {
-		setSelectedPath(path);
-		const pathSegments = path.split('/');
-		const pathsToExpand = pathSegments.reduce((acc, segment, index) => {
-			const path = index === 0 ? segment : `${acc[index - 1]}/${segment}`;
-			acc.push(path);
-			return acc;
-		}, []);
-
-		setExpandedPaths(pathsToExpand);
-	};
-
-
-	const handleExpand = (path) => {
-		setExpandedPaths(prevPaths => {
-			if (!prevPaths.includes(path)) {
-				return [...prevPaths, path];
-			}
-			return prevPaths;
-		});
-	};
-
-	const handleCollapse = (path) => {
-		setExpandedPaths(prevPaths => {
-			return prevPaths.filter(p => p !== path);
-		});
-	};
-
+
+	// This function is called when a file is selected in the file tree for the purpose of loading and playing the animation
 	const handleFileSelected = async (filePath) => {
 		try {
 			// Check if the file has a .json extension
@@ -334,6 +344,8 @@ const App = () => {
 		}
 	};
 
+
+	// Render the App component
 	return (
 		<div className="App">
 			<div className="sidebar" style={{ width: `${sidebarWidth}px` }}>