# Drone Footage Manager

A web application for browsing and viewing drone footage organized by location and date.

## Features

- 📁 **Hierarchical Navigation**: Browse footage by location → date → files
- 🎥 **Video Streaming**: Built-in HTML5 video player with seeking support
- 🖼️ **Image Viewer**: View drone photos directly in the browser
- 🐳 **Dockerized**: Fully containerized application with docker-compose
- 🔒 **Read-only Access**: Footage directory mounted as read-only for safety

## Architecture

- **Backend**: Python FastAPI server for file browsing and media streaming
- **Frontend**: React application with Tailwind CSS
- **Deployment**: Docker containers with nginx for frontend static files

## Quick Start

### Prerequisites

- Docker
- Docker Compose

### Running the Application

1. **Start the containers:**
   ```bash
   docker-compose up -d
   ```

2. **Access the application:**
   - **From the host machine**: `http://localhost` or `http://127.0.0.1`
   - **From local network**: `http://<SERVER_IP>` (e.g., `http://192.168.1.100`)
   - The backend API is available at port 8000

   To find your server's IP address:
   ```bash
   # Linux/Mac
   hostname -I | awk '{print $1}'
   # or
   ip addr show | grep "inet " | grep -v 127.0.0.1
   ```

3. **Stop the containers:**
   ```bash
   docker-compose down
   ```

### Rebuilding After Changes

If you make changes to the code, rebuild the containers:

```bash
docker-compose up -d --build
```

## Project Structure

```
drone-footage-manager/
├── backend/
│   ├── main.py              # FastAPI application
│   ├── requirements.txt     # Python dependencies
│   ├── Dockerfile           # Backend container definition
│   └── .dockerignore
├── frontend/
│   ├── src/
│   │   ├── App.jsx          # Main React component
│   │   ├── main.jsx         # React entry point
│   │   └── index.css        # Tailwind styles
│   ├── index.html
│   ├── package.json         # Node dependencies
│   ├── vite.config.js       # Vite configuration
│   ├── tailwind.config.js   # Tailwind configuration
│   ├── nginx.conf           # Nginx configuration
│   ├── Dockerfile           # Frontend container definition
│   └── .dockerignore
├── docker-compose.yml       # Docker Compose configuration
└── README.md
```

## Configuration

### Volume Mount

The footage directory is mounted in `docker-compose.yml`:

```yaml
volumes:
  - /home/uad/nextcloud/footages:/footages:ro
```

To use a different directory, edit the `docker-compose.yml` file and update the path before the colon.

### Ports

- **Frontend**: Port 80 (accessible from local network)
- **Backend**: Port 8000 (accessible from local network)

The application binds to `0.0.0.0`, making it accessible from:
- The host machine (localhost)
- Other devices on the local network (using server's IP)

To change ports, edit the `ports` section in `docker-compose.yml`.

### Network Access

By default, the application is accessible from any device on your local network. If you cannot access it from other devices, check your firewall:

```bash
# Allow ports 80 and 8000 through firewall (Ubuntu/Debian)
sudo ufw allow 80/tcp
sudo ufw allow 8000/tcp
```

## API Endpoints

- `GET /api/locations` - List all location folders
- `GET /api/locations/{location}/dates` - List dates for a location
- `GET /api/files/{location}/{date}` - List files with metadata
- `GET /api/stream/{location}/{date}/{filename}` - Stream video files
- `GET /api/image/{location}/{date}/{filename}` - Serve image files

## Development

### Backend Development

```bash
cd backend
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate
pip install -r requirements.txt
uvicorn main:app --reload
```

### Frontend Development

```bash
cd frontend
npm install
npm run dev
```

## Supported File Types

**Videos**: `.mp4`, `.MP4`, `.mov`, `.MOV`, `.avi`, `.AVI`

**Images**: `.jpg`, `.JPG`, `.jpeg`, `.JPEG`, `.png`, `.PNG`

## Logs

View container logs:

```bash
# All services
docker-compose logs -f

# Backend only
docker-compose logs -f backend

# Frontend only
docker-compose logs -f frontend
```

## Troubleshooting

### Videos not playing

- Ensure the video codec is supported by your browser (H.264 recommended)
- Check browser console for errors
- Verify file permissions on the footage directory

### Cannot access the application

- Verify containers are running: `docker-compose ps`
- Check logs: `docker-compose logs`
- Ensure ports 80 and 8000 are not in use by other applications
- Check firewall settings: `sudo ufw status`
- Verify you're using the correct IP address: `hostname -I`

### Changes not reflected

- Rebuild containers: `docker-compose up -d --build`
- Clear browser cache

## License

MIT