# Schnappix

Schnappix is a tablet-optimized Photobooth application built with React Native and Expo. It provides a full-featured, interactive photo capturing experience, complete with external hardware support, image editing, and an administrative interface.

## Features

- **Photobooth Experience**: Intuitive flow from start screen to countdown, photo capture, and final preview.
- **Multiple Photos & Collages**: Capture single or multiple photos and review them in a generated collage.
- **Sticker / Emoji Editor**: Add emojis, date/time stamps, and event text as draggable, resizable, rotatable stickers on your photos — just like on social media.
- **Photo Frames**: Overlay transparent PNG frames on photos. Admin can set frames to off, always-on, or user-selectable.
- **Continuous Shooting (Burst Mode)**: Automatically capture multiple photos in sequence (1–5 shots, configurable interval) for collage printing.
- **Date/Time Overlay**: Optionally stamp the date and/or time on every photo, with configurable position.
- **Camera Flash Effect**: Full-screen white flash animation on every capture for an authentic photo booth feel.
- **Direct Printing**: Built-in support for IPP (Internet Printing Protocol) network printers to instantly print captured moments.
- **Kiosk Mode**: Custom native Android implementation to lock the tablet down to the Schnappix app, preventing users from exiting the photobooth.
- **USB & Front Camera Support**: Extends standard camera capabilities to support external USB cameras or standard device front/rear cameras, toggleable in settings.
- **Admin Dashboard**: Secure administrative screen (protected by an admin password) to configure all settings on the fly.
- **Offline Storage (MediaStore API)**: Saves captured photos directly to the device's local gallery (`Schnappix - <EventName> - Collagen` and `Schnappix - <EventName> - Originale`).

## Tech Stack

- **Framework**: [React Native](https://reactnative.dev/) (v0.81.5) & [Expo](https://expo.dev/) (SDK 54)
- **Language**: TypeScript
- **Key Libraries**:
  - `expo-camera`: Camera interface
  - `expo-media-library` & `expo-file-system`: Photo storage
  - `ipp-encoder`: Network printing integration
  - `react-native-view-shot`: Capturing collages as images
  - `react-native-gesture-handler`: Sticker drag, pinch, and rotate gestures
  - `@fortawesome/react-native-fontawesome`: All in-app icons via Font Awesome
  - `react-native-svg`: SVG rendering for icon support
  - Custom native Expo plugins (`withKioskAdmin`, `withUsbCamera`, `withLocalAars`) for extended Android capabilities.

## Getting Started

### Prerequisites

- Node.js (v18+)
- npm or yarn
- Expo CLI
- Android Studio / Android SDK (for building the native Android app, as it uses custom native modules)

### Installation

1. Clone the repository:
   ```bash
   git clone <repository-url>
   cd Schnappix
   ```

2. Install dependencies:
   ```bash
   npm install
   ```

3. Prebuild the native Android project (required due to custom native plugins):
   ```bash
   npx expo prebuild --clean --platform android
   ```

4. Run the app on an Android device or emulator:
   ```bash
   npm run android
   ```

## Development & Build Rules

Schnappix follows strict architecture and workflow rules:

1. **Versioning**: Versioning format is `23.01.X`, where `X` matches the `versionCode` in `app.json`.
2. **Build Outputs**: Apps must always be built as BOTH `.apk` and `.aab`. Naming syntax is `Schnappix_v23.01.X.apk` and `Schnappix_v23.01.X.aab`.
3. **Package Name**: Must strictly remain `de.orfel.schnappix`.
4. **Git Workflow**: Always commit and push at the end of interactions (`git add .`, `git commit`, `git push`). Retry `git push` if it fails due to authentication errors.

## Configuration

When the app is first launched, you can access the **Admin Dashboard** by tapping the settings icon (⚙️) on the Home screen and entering the admin password (default: `1234`).

### Admin Settings Overview

| Setting | Description | Default |
|---|---|---|
| **Drucker IP-Adresse** | Local IP of the IPP printer (e.g., Canon CP1300) | `192.168.1.100` |
| **Countdown-Dauer** | Seconds before photo capture | `3` |
| **Admin-Passwort** | PIN to access admin panel | `1234` |
| **Begrüßungstext** | Welcome text on the home screen | `Zeit für ein Erinnerungsfoto!` |
| **Footer-Text** | Footer text on the home screen | `Display tippen! • Lächeln! • Foto schnappen!` |
| **Event-Name** | Event text for the date sticker & generated folder names | _(empty)_ |
| **Serienbild-Anzahl** | Number of photos per burst (1 = single shot, 2-5 = burst) | `1` |
| **Serienbild-Abstand** | Seconds between burst shots | `5` |
| **Fotorahmen-Modus** | `Aus` / `Immer an` / `Verfügbar` | `Verfügbar` |
| **Datum-Einblendung** | `Aus` / `Nur Datum` / `Datum + Uhrzeit` | `Aus` |
| **Kiosk-Modus** | Lock the tablet to the Schnappix app | `Aus` |
| **Frontkamera nutzen** | Toggles between front and rear/USB camera | `Aus` |
| **Logs aktivieren** | Enables detailed app logging | `An` |

---

## Kiosk Mode (Device Owner) Setup

To use the **true Kiosk Mode** (Lock Task Mode) without system confirmation prompts, the Schnappix app must be set as the Android "Device Owner". It does NOT use external MDM software.

**Prerequisites:**
1. The Android tablet must have no other accounts (like a Google Account) configured. It is highly recommended to start with a factory-reset device.
2. Developer Options and USB Debugging must be enabled on the tablet.
3. The Schnappix APK must be installed on the tablet.

**Setup Command:**
Run the following command in your terminal/command prompt while the tablet is connected:

```bash
adb shell dpm set-device-owner de.orfel.schnappix/expo.modules.kioskmode.AdminReceiver
```

If successful, the terminal will output `Success: Device owner set to package de.orfel.schnappix`. You can now safely disconnect the tablet and toggle the Kiosk Mode in the app's Admin Dashboard.

*Note: Once set as Device Owner, the app cannot be uninstalled normally. You must either factory reset the device or implement a programmatic way to remove the active admin status.*

---

## Photo Saving (MediaStore API)

Schnappix uses modern Android MediaStore API (`writeOnly = true` via `expo-media-library`) to save photos directly to the gallery, avoiding legacy file permission prompts.
Photos are neatly organized into two directories based on your configured `Event-Name`:
- `Schnappix - <EventName> - Collagen`
- `Schnappix - <EventName> - Originale`

*Note: Do NOT attempt to force legacy `WRITE_EXTERNAL_STORAGE` or `READ_EXTERNAL_STORAGE` on Android 13+, as it will fail.*

---

## Photo Frames — Setup Guide

Schnappix supports custom photo frame overlays. Frames are transparent PNG images that are layered on top of photos before saving or printing.

### Frame Requirements

| Property | Requirement |
|---|---|
| **Format** | PNG with **alpha channel** (transparency) |
| **Resolution** | **1500 × 1000 px** (3:2 landscape ratio, matches tablet display and print output) |
| **Transparency** | The photo area **must be fully transparent** (alpha = 0) |
| **File size** | Keep each file under **500 KB** for fast rendering |
| **Naming** | `frame_<name>.png` (e.g. `frame_balloons.png`) |

### How to Add Frames

1. **Place the file** in the `assets/frames/` directory.
2. **Register the frame** in `src/data/frames.ts`:
   ```typescript
   export const FRAMES: FrameDefinition[] = [
     { id: 'balloons', name: 'Luftballons', asset: require('../../assets/frames/frame_balloons.png') },
   ];
   ```
3. **Rebuild the app** (`npx expo prebuild --clean --platform android` & `npm run android`).
4. **Select the frame mode** in the Admin Dashboard.

---

## Sticker Editing

The preview screen includes a social-media-style sticker editor. Guests can:

- **Add emojis**: Tap the "Sticker" button to open the emoji tray with curated party emojis.
- **Transform**: Drag stickers anywhere, pinch to resize, and two-finger rotate.
- **Delete**: Tap to select, then press × to delete.
- **Dynamic Stickers**: Date, Time, and Event text automatically generate based on your Admin settings.

All stickers are rendered inside the capture area, so they appear in the saved and printed output.

---

## Design Theme

The app uses a **neon synthwave** aesthetic matching the app icon:

- **Primary**: Electric magenta `#ff2bd6`
- **Accent**: Cyan blue `#28dfff`
- **Background**: Deep navy/black `#050510`
- **Effects**: Neon glow shadows, glassmorphism overlays
- **Icons**: Font Awesome (solid) with neon coloring

## License

See the [LICENSE](LICENSE) file for more information.