const handleLogin = async (e: React.FormEvent) => {
  e.preventDefault();
  setLoading(true);
  setError('');

  const formattedUrl = normalizeServerUrl(serverUrl);
  const folderServiceSecret = isFolderServerMode ? selectedFolderServiceId : password;

  try {
    const config = await ClientFactory.authenticate(
      serverType, 
      formattedUrl, 
      username, 
      folderServiceSecret
    );
    onLogin(config);
  } catch (err: any) {
    console.error(err);
    setError('Connection failed. Please check your server details.');
  } finally {
    setLoading(false);
  }
};

private filterItems(items: EmbyItem[], mode: OrientationMode): EmbyItem[] {
  if (mode === 'both') return items;
  
  return items.filter(item => {
    const w = item.Width || 0;
    const h = item.Height || 0;
    if (w === 0) return true; // Keep items with no metadata
    
    if (mode === 'vertical') {
      return h >= w * 0.8; // Allow slightly wide videos (4:5 ratio)
    } else if (mode === 'horizontal') {
      return w > h;
    }
    return true;
  });
}

const PREFETCH_AHEAD = 5;
const SAFARI_PREFETCH_AHEAD = 2;

const userAgent = navigator.userAgent;
const isSafari = /Safari/i.test(userAgent) && 
  !/Chrome|CriOS|Edg|OPR|FxiOS|Chromium/i.test(userAgent);

const prefetchAhead = isSafari ? SAFARI_PREFETCH_AHEAD : PREFETCH_AHEAD;
const prefetchVideoMode = isSafari ? 'metadata' : 'auto';

for (let index = activeIndex + 1; index < end; index += 1) {
  const item = videos[index];
  const url = client.getVideoUrl(item);
  
  const prefetchVideo = document.createElement('video');
  prefetchVideo.preload = prefetchVideoMode;
  prefetchVideo.muted = true;
  prefetchVideo.src = url;
  prefetchVideo.load();
}