Preview Thumbnail Cepat Area Aman 2025

// Menggunakan face-api.js untuk crop otomatis
async function smartCrop(imageUrl, targetWidth, targetHeight) {
  const detection = await faceapi.detectAllFaces(imageUrl)
  
  if (detection.length > 0) {
    // Pusatkan pada wajah utama
    const face = detection[0]
    const centerX = face.box.x + face.box.width / 2
    const centerY = face.box.y + face.box.height / 2
    
    return calculateCropArea(centerX, centerY, targetWidth, targetHeight)
  }
  
  // Fallback ke rule of thirds
  return ruleOfThirdsCrop(imageUrl, targetWidth, targetHeight)
}

class ThumbnailCache {
  constructor() {
    this.memoryCache = new Map() // 50MB limit
    this.indexedDBCache = new LocalForage({ name: 'thumbnails' })
    this.serviceWorkerCache = 'thumbnails-v1'
  }
  
  async getThumbnail(imageId, size) {
    // Level 1: Memory cache (instant)
    const memKey = `${imageId}_${size}`
    if (this.memoryCache.has(memKey)) {
      return this.memoryCache.get(memKey)
    }
    
    // Level 2: IndexedDB (very fast)
    let cached = await this.indexedDBCache.getItem(memKey)
    if (cached) {
      this.memoryCache.set(memKey, cached)
      return cached
    }
    
    // Level 3: Service Worker cache (fast)
    cached = await this.getFromServiceWorker(memKey)
    if (cached) {
      await this.indexedDBCache.setItem(memKey, cached)
      this.memoryCache.set(memKey, cached)
      return cached
    }
    
    // Level 4: Network request
    return this.fetchFromNetwork(imageId, size)
  }
}

// Generate micro-image untuk blur placeholder
function generateBlurPlaceholder(imageUrl) {
  const canvas = document.createElement('canvas')
  canvas.width = 20
  canvas.height = 20
  const ctx = canvas.getContext('2d')
  
  const img = new Image()
  img.onload = () => {
    ctx.drawImage(img, 0, 0, 20, 20)
    const blurData = canvas.toDataURL('image/jpeg', 0.1)
    return blurData
  }
  img.src = imageUrl
}

// Progressive enhancement
function loadThumbnailProgressive(container, imageUrl) {
  // Step 1: Show blur placeholder immediately
  container.innerHTML = `
    <div class="blur-placeholder" 
         style="background-image: url('${blurPlaceholder}');
                filter: blur(10px);
                transform: scale(1.1);">
    </div>`
  
  // Step 2: Load low quality
  const lowQualityImg = new Image()
  lowQualityImg.onload = () => {
    container.innerHTML = `<img src="${lowQualityImg.src}" class="fade-in low-quality">`
    
    // Step 3: Load high quality
    const highQualityImg = new Image()
    highQualityImg.onload = () => {
      const finalImg = container.querySelector('img')
      finalImg.src = highQualityImg.src
      finalImg.classList.remove('low-quality')
      finalImg.classList.add('high-quality')
    }
    highQualityImg.src = imageUrl.replace('quality=30', 'quality=80')
  }
  lowQualityImg.src = imageUrl + '?quality=30&blur=1'
}

.thumbnail-container {
  position: relative;
  overflow: hidden;
  background-color: #f0f0f0;
}

.blur-placeholder {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: opacity 0.3s ease;
}

.low-quality {
  filter: blur(0.5px);
  opacity: 0.9;
  transition: all 0.4s ease;
}

.high-quality {
  filter: none;
  opacity: 1;
}

.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

const thumbnailObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target
      const priority = img.dataset.priority || 'normal'
      
      // Prioritas gambar above-the-fold
      const loadDelay = priority === 'high' ? 0 : 100
      
      setTimeout(() => {
        loadThumbnailProgressive(img, img.dataset.src)
        thumbnailObserver.unobserve(img)
      }, loadDelay)
    }
  })
}, {
  rootMargin: '50px 0px', // Load 50px sebelum masuk viewport
  threshold: 0.1
})

class ThumbnailBatcher {
  constructor() {
    this.queue = []
    this.processing = false
    this.batchSize = 6 // Jangan overload network
  }
  
  async addToQueue(thumbnailRequest) {
    this.queue.push(thumbnailRequest)
    
    if (!this.processing) {
      this.processing = true
      await this.processBatch()
      this.processing = false
    }
  }
  
  async processBatch() {
    while (this.queue.length > 0) {
      const batch = this.queue.splice(0, this.batchSize)
      
      // Process parallel tapi limited
      await Promise.all(
        batch.map(request => this.processThumbnail(request))
      )
      
      // Small pause untuk tidak block UI
      await new Promise(resolve => setTimeout(resolve, 10))
    }
  }
}

// Ukur impact nyata pada LCP
function measureThumbnailLCP() {
  const observer = new PerformanceObserver((list) => {
    const entries = list.getEntries()
    entries.forEach((entry) => {
      if (entry.element && entry.element.classList.contains('thumbnail')) {
        console.log('Thumbnail LCP:', entry.startTime)
        // Send ke analytics
        gtag('event', 'thumbnail_lcp', {
          value: Math.round(entry.startTime),
          custom_parameter_1: entry.element.dataset.imageId
        })
      }
    })
  })
  observer.observe({ entryTypes: ['largest-contentful-paint'] })
}