metadata selector added

src/components/metadata/MetadataDetails.tsx

@@ -4,36 +4,72 @@ import {
   Text,
   StyleSheet,
   TouchableOpacity,
+  ActivityIndicator,
 } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
 import { Image } from 'expo-image';
 import Animated, {
-  Layout,
-  Easing,
   FadeIn,
 } from 'react-native-reanimated';
 import { useTheme } from '../../contexts/ThemeContext';
+import MetadataSourceSelector from './MetadataSourceSelector';
 
 interface MetadataDetailsProps {
   metadata: any;
   imdbId: string | null;
   type: 'movie' | 'series';
   renderRatings?: () => React.ReactNode;
+  contentId: string;
+  currentMetadataSource?: string;
+  onMetadataSourceChange?: (sourceId: string, sourceType: 'addon' | 'tmdb') => void;
+  loadingMetadata?: boolean;
 }
 
 const MetadataDetails: React.FC<MetadataDetailsProps> = ({
   metadata,
-  imdbId,
+  imdbId: _imdbId,
   type,
   renderRatings,
+  contentId,
+  currentMetadataSource,
+  onMetadataSourceChange,
+  loadingMetadata = false,
 }) => {
   const { currentTheme } = useTheme();
   const [isFullDescriptionOpen, setIsFullDescriptionOpen] = useState(false);
 
   return (
     <>
+      {/* Metadata Source Selector */}
+      {onMetadataSourceChange && (
+        <View style={styles.sourceSelectorContainer}>
+          <MetadataSourceSelector
+            currentSource={currentMetadataSource}
+            contentId={contentId}
+            contentType={type}
+            onSourceChange={onMetadataSourceChange}
+            disabled={loadingMetadata}
+          />
+          {currentMetadataSource && currentMetadataSource !== 'auto' && (
+            <Text style={[styles.sourceIndicator, { color: currentTheme.colors.textMuted }]}>
+              Currently showing metadata from: {currentMetadataSource === 'tmdb' ? 'TMDB' : currentMetadataSource}
+            </Text>
+          )}
+        </View>
+      )}
+
+      {/* Loading indicator when switching sources */}
+      {loadingMetadata && (
+        <View style={styles.loadingContainer}>
+          <ActivityIndicator size="small" color={currentTheme.colors.primary} />
+          <Text style={[styles.loadingText, { color: currentTheme.colors.textMuted }]}>
+            Loading metadata...
+          </Text>
+        </View>
+      )}
+
       {/* Meta Info */}
-      <View style={styles.metaInfo}>
+      <View style={[styles.metaInfo, loadingMetadata && styles.dimmed]}>
         {metadata.year && (
           <Text style={[styles.metaText, { color: currentTheme.colors.text }]}>{metadata.year}</Text>
         )}
@@ -45,7 +81,7 @@ const MetadataDetails: React.FC<MetadataDetailsProps> = ({
         )}
         {metadata.imdbRating && (
           <View style={styles.ratingContainer}>
-            <Image 
+            <Image
               source={{ uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/IMDB_Logo_2016.svg/575px-IMDB_Logo_2016.svg.png' }}
               style={styles.imdbLogo}
               contentFit="contain"
@@ -61,7 +97,7 @@ const MetadataDetails: React.FC<MetadataDetailsProps> = ({
       {/* Creator/Director Info */}
       <Animated.View
         entering={FadeIn.duration(300).delay(100)}
-        style={styles.creatorContainer}
+        style={[styles.creatorContainer, loadingMetadata && styles.dimmed]}
       >
         {metadata.directors && metadata.directors.length > 0 && (
           <View style={styles.creatorSection}>
@@ -79,11 +115,11 @@ const MetadataDetails: React.FC<MetadataDetailsProps> = ({
 
       {/* Description */}
       {metadata.description && (
-        <Animated.View 
+        <Animated.View
-          style={styles.descriptionContainer}
+          style={[styles.descriptionContainer, loadingMetadata && styles.dimmed]}
           entering={FadeIn.duration(300)}
         >
-          <TouchableOpacity 
+          <TouchableOpacity
             onPress={() => setIsFullDescriptionOpen(!isFullDescriptionOpen)}
             activeOpacity={0.7}
           >
@@ -94,10 +130,10 @@ const MetadataDetails: React.FC<MetadataDetailsProps> = ({
               <Text style={[styles.showMoreText, { color: currentTheme.colors.textMuted }]}>
                 {isFullDescriptionOpen ? 'Show Less' : 'Show More'}
               </Text>
-              <MaterialIcons 
+              <MaterialIcons
-                name={isFullDescriptionOpen ? "keyboard-arrow-up" : "keyboard-arrow-down"} 
+                name={isFullDescriptionOpen ? "keyboard-arrow-up" : "keyboard-arrow-down"}
-                size={18} 
+                size={18}
-                color={currentTheme.colors.textMuted} 
+                color={currentTheme.colors.textMuted}
               />
             </View>
           </TouchableOpacity>
@@ -108,6 +144,29 @@ const MetadataDetails: React.FC<MetadataDetailsProps> = ({
 };
 
 const styles = StyleSheet.create({
+  sourceSelectorContainer: {
+    paddingHorizontal: 16,
+    marginBottom: 16,
+  },
+  sourceIndicator: {
+    fontSize: 12,
+    marginTop: 4,
+    fontStyle: 'italic',
+  },
+  loadingContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 12,
+    marginBottom: 8,
+  },
+  loadingText: {
+    marginLeft: 8,
+    fontSize: 14,
+  },
+  dimmed: {
+    opacity: 0.6,
+  },
   metaInfo: {
     flexDirection: 'row',
     alignItems: 'center',

src/components/metadata/MetadataSourceSelector.tsx

@@ -0,0 +1,410 @@
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Modal,
+  ScrollView,
+  ActivityIndicator,
+} from 'react-native';
+import { MaterialIcons } from '@expo/vector-icons';
+import { useTheme } from '../../contexts/ThemeContext';
+import { stremioService } from '../../services/stremioService';
+import { tmdbService } from '../../services/tmdbService';
+import { catalogService } from '../../services/catalogService';
+import { logger } from '../../utils/logger';
+
+interface MetadataSource {
+  id: string;
+  name: string;
+  type: 'addon' | 'tmdb';
+  hasMetaSupport?: boolean;
+  icon?: string;
+}
+
+interface MetadataSourceSelectorProps {
+  currentSource?: string;
+  contentId: string;
+  contentType: string;
+  onSourceChange: (sourceId: string, sourceType: 'addon' | 'tmdb') => void;
+  disabled?: boolean;
+}
+
+const MetadataSourceSelector: React.FC<MetadataSourceSelectorProps> = ({
+  currentSource,
+  contentId,
+  contentType,
+  onSourceChange,
+  disabled = false,
+}) => {
+  const { currentTheme } = useTheme();
+  const [isVisible, setIsVisible] = useState(false);
+  const [sources, setSources] = useState<MetadataSource[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedSource, setSelectedSource] = useState<string>(currentSource || 'auto');
+
+  // Load available metadata sources
+  const loadMetadataSources = useCallback(async () => {
+    setLoading(true);
+    try {
+      const sources: MetadataSource[] = [];
+
+      // Add auto-select option
+      sources.push({
+        id: 'auto',
+        name: 'Auto (Best Available)',
+        type: 'addon',
+        icon: 'auto-fix-high',
+      });
+
+      // Add TMDB as a source
+      sources.push({
+        id: 'tmdb',
+        name: 'The Movie Database (TMDB)',
+        type: 'tmdb',
+        icon: 'movie',
+      });
+
+      // Get installed addons with meta support
+      const addons = await stremioService.getInstalledAddonsAsync();
+      logger.log(`[MetadataSourceSelector] Checking ${addons.length} installed addons for meta support`);
+      
+      for (const addon of addons) {
+        logger.log(`[MetadataSourceSelector] Checking addon: ${addon.name} (${addon.id})`);
+        logger.log(`[MetadataSourceSelector] Addon resources:`, addon.resources);
+        
+        // Check if addon supports meta resource
+        let hasMetaSupport = false;
+        
+        if (addon.resources) {
+          // Handle both array of strings and array of objects
+          hasMetaSupport = addon.resources.some((resource: any) => {
+            if (typeof resource === 'string') {
+              // Simple string format like ["catalog", "meta"]
+              return resource === 'meta';
+            } else if (resource && typeof resource === 'object') {
+              // Object format like { name: 'meta', types: ['movie', 'series'] }
+              const supportsType = !resource.types || resource.types.includes(contentType);
+              logger.log(`[MetadataSourceSelector] Resource ${resource.name}: types=${resource.types}, supportsType=${supportsType}`);
+              return resource.name === 'meta' && supportsType;
+            }
+            return false;
+          });
+        }
+
+        logger.log(`[MetadataSourceSelector] Addon ${addon.name} has meta support: ${hasMetaSupport}`);
+
+        if (hasMetaSupport) {
+          sources.push({
+            id: addon.id,
+            name: addon.name,
+            type: 'addon',
+            hasMetaSupport: true,
+            icon: 'extension',
+          });
+          logger.log(`[MetadataSourceSelector] Added addon ${addon.name} as metadata source`);
+        }
+      }
+
+      // Sort sources: auto first, then TMDB, then addons alphabetically
+      sources.sort((a, b) => {
+        if (a.id === 'auto') return -1;
+        if (b.id === 'auto') return 1;
+        if (a.id === 'tmdb') return -1;
+        if (b.id === 'tmdb') return 1;
+        return a.name.localeCompare(b.name);
+      });
+
+      // Always include at least auto and TMDB for comparison
+      if (sources.length < 2) {
+        logger.warn('[MetadataSourceSelector] Less than 2 sources found, this should not happen');
+      }
+
+      setSources(sources);
+      logger.log(`[MetadataSourceSelector] Found ${sources.length} metadata sources:`, sources.map(s => s.name));
+    } catch (error) {
+      logger.error('[MetadataSourceSelector] Failed to load metadata sources:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, [contentType]);
+
+  // Load sources on mount
+  useEffect(() => {
+    loadMetadataSources();
+  }, [loadMetadataSources]);
+
+  // Update selected source when currentSource prop changes
+  useEffect(() => {
+    if (currentSource) {
+      setSelectedSource(currentSource);
+    }
+  }, [currentSource]);
+
+  const handleSourceSelect = useCallback((source: MetadataSource) => {
+    setSelectedSource(source.id);
+    setIsVisible(false);
+    onSourceChange(source.id, source.type);
+  }, [onSourceChange]);
+
+  const currentSourceName = useMemo(() => {
+    const source = sources.find(s => s.id === selectedSource);
+    return source?.name || 'Auto (Best Available)';
+  }, [sources, selectedSource]);
+
+  const getSourceIcon = useCallback((source: MetadataSource) => {
+    switch (source.icon) {
+      case 'auto-fix-high':
+        return 'auto-fix-high';
+      case 'movie':
+        return 'movie';
+      case 'extension':
+        return 'extension';
+      default:
+        return 'info';
+    }
+  }, []);
+
+  // Always show if we have sources and onSourceChange callback
+  if (sources.length === 0 || !onSourceChange) {
+    console.log('[MetadataSourceSelector] Not showing selector:', { sourcesLength: sources.length, hasCallback: !!onSourceChange });
+    return null;
+  }
+
+  console.log('[MetadataSourceSelector] Showing selector with sources:', sources.map(s => s.name));
+
+  return (
+    <>
+      <View style={styles.container}>
+        <Text style={[styles.label, { color: currentTheme.colors.textMuted }]}>
+          Metadata Source
+        </Text>
+        <TouchableOpacity
+          style={[
+            styles.selector,
+            { 
+              backgroundColor: currentTheme.colors.elevation1,
+              borderColor: currentTheme.colors.border,
+            },
+            disabled && styles.disabled
+          ]}
+          onPress={() => !disabled && setIsVisible(true)}
+          disabled={disabled}
+        >
+          <View style={styles.selectorContent}>
+            <MaterialIcons 
+              name={getSourceIcon(sources.find(s => s.id === selectedSource) || sources[0])} 
+              size={20} 
+              color={currentTheme.colors.text} 
+            />
+            <Text 
+              style={[styles.selectorText, { color: currentTheme.colors.text }]}
+              numberOfLines={1}
+            >
+              {currentSourceName}
+            </Text>
+          </View>
+          <MaterialIcons 
+            name="expand-more" 
+            size={20} 
+            color={currentTheme.colors.textMuted} 
+          />
+        </TouchableOpacity>
+      </View>
+
+      <Modal
+        visible={isVisible}
+        transparent
+        animationType="fade"
+        onRequestClose={() => setIsVisible(false)}
+      >
+        <View style={styles.modalOverlay}>
+          <View style={[styles.modalContent, { backgroundColor: currentTheme.colors.elevation2 }]}>
+            <View style={styles.modalHeader}>
+              <Text style={[styles.modalTitle, { color: currentTheme.colors.text }]}>
+                Select Metadata Source
+              </Text>
+              <TouchableOpacity
+                onPress={() => setIsVisible(false)}
+                style={styles.closeButton}
+              >
+                <MaterialIcons name="close" size={24} color={currentTheme.colors.textMuted} />
+              </TouchableOpacity>
+            </View>
+
+            {loading ? (
+              <View style={styles.loadingContainer}>
+                <ActivityIndicator size="small" color={currentTheme.colors.primary} />
+                <Text style={[styles.loadingText, { color: currentTheme.colors.textMuted }]}>
+                  Loading sources...
+                </Text>
+              </View>
+            ) : (
+              <ScrollView style={styles.sourcesList}>
+                {sources.map((source) => (
+                  <TouchableOpacity
+                    key={source.id}
+                    style={[
+                      styles.sourceItem,
+                      { borderBottomColor: currentTheme.colors.border },
+                      selectedSource === source.id && {
+                        backgroundColor: currentTheme.colors.primary + '20',
+                      }
+                    ]}
+                    onPress={() => handleSourceSelect(source)}
+                  >
+                    <View style={styles.sourceContent}>
+                      <MaterialIcons 
+                        name={getSourceIcon(source)} 
+                        size={24} 
+                        color={selectedSource === source.id ? currentTheme.colors.primary : currentTheme.colors.text} 
+                      />
+                      <View style={styles.sourceInfo}>
+                        <Text 
+                          style={[
+                            styles.sourceName, 
+                            { 
+                              color: selectedSource === source.id ? currentTheme.colors.primary : currentTheme.colors.text 
+                            }
+                          ]}
+                        >
+                          {source.name}
+                        </Text>
+                        {source.type === 'addon' && source.hasMetaSupport && (
+                          <Text style={[styles.sourceDescription, { color: currentTheme.colors.textMuted }]}>
+                            Stremio Addon with metadata support
+                          </Text>
+                        )}
+                        {source.type === 'tmdb' && (
+                          <Text style={[styles.sourceDescription, { color: currentTheme.colors.textMuted }]}>
+                            Comprehensive movie and TV database
+                          </Text>
+                        )}
+                        {source.id === 'auto' && (
+                          <Text style={[styles.sourceDescription, { color: currentTheme.colors.textMuted }]}>
+                            Automatically selects the best available source
+                          </Text>
+                        )}
+                      </View>
+                    </View>
+                    {selectedSource === source.id && (
+                      <MaterialIcons 
+                        name="check" 
+                        size={20} 
+                        color={currentTheme.colors.primary} 
+                      />
+                    )}
+                  </TouchableOpacity>
+                ))}
+              </ScrollView>
+            )}
+          </View>
+        </View>
+      </Modal>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 16,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '600',
+    marginBottom: 8,
+  },
+  selector: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderRadius: 8,
+    borderWidth: 1,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  selectorContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  selectorText: {
+    fontSize: 14,
+    fontWeight: '500',
+    marginLeft: 8,
+    flex: 1,
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  modalContent: {
+    width: '100%',
+    maxWidth: 400,
+    maxHeight: '80%',
+    borderRadius: 12,
+    overflow: 'hidden',
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: 'rgba(255, 255, 255, 0.1)',
+  },
+  modalTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  closeButton: {
+    padding: 4,
+  },
+  loadingContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 32,
+  },
+  loadingText: {
+    marginLeft: 8,
+    fontSize: 14,
+  },
+  sourcesList: {
+    maxHeight: 400,
+  },
+  sourceItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: 16,
+    borderBottomWidth: 1,
+  },
+  sourceContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  sourceInfo: {
+    marginLeft: 12,
+    flex: 1,
+  },
+  sourceName: {
+    fontSize: 16,
+    fontWeight: '500',
+    marginBottom: 2,
+  },
+  sourceDescription: {
+    fontSize: 12,
+    lineHeight: 16,
+  },
+});
+
+export default MetadataSourceSelector;

src/screens/MetadataScreen.tsx

@@ -49,6 +49,8 @@ import { useMetadataAnimations } from '../hooks/useMetadataAnimations';
 import { useMetadataAssets } from '../hooks/useMetadataAssets';
 import { useWatchProgress } from '../hooks/useWatchProgress';
 import { TraktService, TraktPlaybackItem } from '../services/traktService';
+import { tmdbService } from '../services/tmdbService';
+import { catalogService } from '../services/catalogService';
 
 const { height } = Dimensions.get('window');
 
@@ -76,6 +78,8 @@ const MetadataScreen: React.FC = () => {
   const [selectedCastMember, setSelectedCastMember] = useState<any>(null);
   const [shouldLoadSecondaryData, setShouldLoadSecondaryData] = useState(false);
   const [isScreenFocused, setIsScreenFocused] = useState(true);
+  const [currentMetadataSource, setCurrentMetadataSource] = useState<string>(addonId || 'auto');
+  const [loadingMetadataSource, setLoadingMetadataSource] = useState(false);
   const transitionOpacity = useSharedValue(1);
   const interactionComplete = useRef(false);
 
@@ -463,6 +467,71 @@ const MetadataScreen: React.FC = () => {
     setShowCastModal(true);
   }, [isScreenFocused]);
 
+  const handleMetadataSourceChange = useCallback(async (sourceId: string, sourceType: 'addon' | 'tmdb') => {
+    if (!isScreenFocused) return;
+    
+    setCurrentMetadataSource(sourceId);
+    setLoadingMetadataSource(true);
+    
+    // Reload metadata with the new source
+    try {
+      let newMetadata = null;
+      
+      if (sourceType === 'tmdb') {
+        // Load from TMDB
+        if (id.startsWith('tt')) {
+          // Convert IMDB ID to TMDB ID first
+          const tmdbId = await tmdbService.findTMDBIdByIMDB(id);
+          if (tmdbId) {
+            if (type === 'movie') {
+              const movieDetails = await tmdbService.getMovieDetails(tmdbId.toString());
+              if (movieDetails) {
+                newMetadata = {
+                  id: id,
+                  type: 'movie',
+                  name: movieDetails.title,
+                  poster: tmdbService.getImageUrl(movieDetails.poster_path) || '',
+                  banner: tmdbService.getImageUrl(movieDetails.backdrop_path) || '',
+                  description: movieDetails.overview || '',
+                  year: movieDetails.release_date ? parseInt(movieDetails.release_date.substring(0, 4)) : undefined,
+                  genres: movieDetails.genres?.map((g: { name: string }) => g.name) || [],
+                  inLibrary: metadata?.inLibrary || false,
+                };
+              }
+            } else if (type === 'series') {
+              const showDetails = await tmdbService.getTVShowDetails(tmdbId);
+              if (showDetails) {
+                newMetadata = {
+                  id: id,
+                  type: 'series',
+                  name: showDetails.name,
+                  poster: tmdbService.getImageUrl(showDetails.poster_path) || '',
+                  banner: tmdbService.getImageUrl(showDetails.backdrop_path) || '',
+                  description: showDetails.overview || '',
+                  year: showDetails.first_air_date ? parseInt(showDetails.first_air_date.substring(0, 4)) : undefined,
+                  genres: showDetails.genres?.map((g: { name: string }) => g.name) || [],
+                  inLibrary: metadata?.inLibrary || false,
+                };
+              }
+            }
+          }
+        }
+      } else {
+        // Load from addon or auto
+        const addonIdToUse = sourceId === 'auto' ? undefined : sourceId;
+        newMetadata = await catalogService.getEnhancedContentDetails(type, id, addonIdToUse);
+      }
+      
+      if (newMetadata) {
+        setMetadata(newMetadata);
+      }
+    } catch (error) {
+      console.error('[MetadataScreen] Failed to reload metadata with new source:', error);
+    } finally {
+      setLoadingMetadataSource(false);
+    }
+  }, [isScreenFocused, id, type, metadata, tmdbService, catalogService, setMetadata]);
+
   // Ultra-optimized animated styles - minimal calculations with conditional updates
   const containerStyle = useAnimatedStyle(() => ({
     opacity: isScreenFocused ? animations.screenOpacity.value : 0.8,
@@ -589,6 +658,10 @@ const MetadataScreen: React.FC = () => {
                 metadata={metadata}
                 imdbId={imdbId}
                 type={type as 'movie' | 'series'}
+                contentId={id}
+                currentMetadataSource={currentMetadataSource}
+                onMetadataSourceChange={handleMetadataSourceChange}
+                loadingMetadata={loadingMetadataSource}
                 renderRatings={() => imdbId && shouldLoadSecondaryData ? (
                   <MemoizedRatingsSection imdbId={imdbId} type={type === 'series' ? 'show' : 'movie'} />
                 ) : null}