managarten/maerchenzauber/apps/mobile/test-blurhash.tsx

import React, { useState } from 'react';
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
import { Image } from 'expo-image';
import { Blurhash } from 'react-native-blurhash';

/**
 * BlurHash Demo Component
 *
 * Zeigt den Unterschied zwischen:
 * 1. Bild MIT BlurHash-Placeholder
 * 2. Bild OHNE BlurHash-Placeholder
 *
 * Usage: Importiere diese Component in eine Test-Screen
 */
export default function BlurHashDemo() {
  const [imageLoaded1, setImageLoaded1] = useState(false);
  const [imageLoaded2, setImageLoaded2] = useState(false);

  // Beispiel-Bild URL (ändere zu deinem eigenen)
  const testImageUrl = 'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?w=800';

  // BlurHash für das Test-Bild (generiert mit blurhash.dev)
  const testBlurHash = 'LGF5]+Yk^6#M@-5c,1J5@[or[Q6.';

  const resetTest = () => {
    setImageLoaded1(false);
    setImageLoaded2(false);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>BlurHash Test</Text>
      <Text style={styles.subtitle}>Vergleiche Loading-Experience:</Text>

      <View style={styles.row}>
        {/* MIT BlurHash */}
        <View style={styles.testBox}>
          <Text style={styles.label}>MIT BlurHash ✨</Text>
          <View style={styles.imageContainer}>
            {/* BlurHash Placeholder */}
            {!imageLoaded1 && (
              <Blurhash
                blurhash={testBlurHash}
                style={styles.blurHash}
                resizeMode="cover"
              />
            )}

            {/* Actual Image */}
            <Image
              source={{ uri: `${testImageUrl}&t=${Date.now()}` }}
              style={[styles.image, !imageLoaded1 && styles.hiddenImage]}
              contentFit="cover"
              transition={300}
              cachePolicy="none"
              onLoad={() => setImageLoaded1(true)}
            />
          </View>
        </View>

        {/* OHNE BlurHash */}
        <View style={styles.testBox}>
          <Text style={styles.label}>OHNE BlurHash 😐</Text>
          <View style={styles.imageContainer}>
            {/* Nur graues Placeholder */}
            {!imageLoaded2 && (
              <View style={styles.grayPlaceholder}>
                <Text style={styles.loadingText}>Loading...</Text>
              </View>
            )}

            {/* Actual Image */}
            <Image
              source={{ uri: `${testImageUrl}&t=${Date.now() + 1}` }}
              style={[styles.image, !imageLoaded2 && styles.hiddenImage]}
              contentFit="cover"
              transition={300}
              cachePolicy="none"
              onLoad={() => setImageLoaded2(true)}
            />
          </View>
        </View>
      </View>

      <TouchableOpacity style={styles.resetButton} onPress={resetTest}>
        <Text style={styles.resetButtonText}>🔄 Reset & Reload</Text>
      </TouchableOpacity>

      <View style={styles.infoBox}>
        <Text style={styles.infoTitle}>💡 Tipp:</Text>
        <Text style={styles.infoText}>
          Aktiviere "Slow 3G" in Chrome DevTools (Network Tab)
          oder verwende Network Link Conditioner auf iOS
          um den Effekt besser zu sehen!
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#181818',
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#ffffff',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    color: '#999999',
    marginBottom: 24,
  },
  row: {
    flexDirection: 'row',
    gap: 16,
    marginBottom: 24,
  },
  testBox: {
    flex: 1,
  },
  label: {
    fontSize: 14,
    fontWeight: '600',
    color: '#ffffff',
    marginBottom: 8,
  },
  imageContainer: {
    width: '100%',
    aspectRatio: 1,
    backgroundColor: '#222222',
    borderRadius: 12,
    overflow: 'hidden',
  },
  image: {
    width: '100%',
    height: '100%',
  },
  blurHash: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    zIndex: 1,
  },
  grayPlaceholder: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    backgroundColor: '#333333',
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 1,
  },
  loadingText: {
    color: '#666666',
    fontSize: 14,
  },
  hiddenImage: {
    opacity: 0,
  },
  resetButton: {
    backgroundColor: '#FFD700',
    paddingVertical: 16,
    paddingHorizontal: 24,
    borderRadius: 12,
    alignItems: 'center',
    marginBottom: 24,
  },
  resetButtonText: {
    fontSize: 16,
    fontWeight: '600',
    color: '#000000',
  },
  infoBox: {
    backgroundColor: 'rgba(255, 215, 0, 0.1)',
    padding: 16,
    borderRadius: 12,
    borderLeftWidth: 4,
    borderLeftColor: '#FFD700',
  },
  infoTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#FFD700',
    marginBottom: 8,
  },
  infoText: {
    fontSize: 14,
    color: '#CCCCCC',
    lineHeight: 20,
  },
});