Browse Source

Add YouTube RSS feed retrieval

Implement YouTube RSS feed retrieval using the channel link.
gpt-engineer-app[bot] 5 months ago
parent
commit
d5e9564b70
1 changed files with 81 additions and 1 deletions
  1. 81 1
      src/components/AddFeedModal.tsx

+ 81 - 1
src/components/AddFeedModal.tsx

@@ -51,6 +51,53 @@ const feedTypeOptions = [
   { value: 'steam', label: "D'un Jeu présent sur Steam", icon: Gamepad2, color: 'bg-gray-700' },
 ];
 
+// Function to extract YouTube channel ID from various URL formats
+const extractYouTubeChannelId = (url: string): string | null => {
+  const patterns = [
+    // Channel ID format: https://www.youtube.com/channel/UCxxxxxx
+    /youtube\.com\/channel\/([a-zA-Z0-9_-]+)/,
+    // Handle format: https://www.youtube.com/c/ChannelName
+    /youtube\.com\/c\/([a-zA-Z0-9_-]+)/,
+    // User format: https://www.youtube.com/user/username
+    /youtube\.com\/user\/([a-zA-Z0-9_-]+)/,
+    // Custom URL format: https://www.youtube.com/@channelname
+    /youtube\.com\/@([a-zA-Z0-9_-]+)/,
+  ];
+
+  for (const pattern of patterns) {
+    const match = url.match(pattern);
+    if (match) {
+      return match[1];
+    }
+  }
+  return null;
+};
+
+// Function to convert YouTube channel URL to RSS feed URL
+const convertYouTubeToRSS = (url: string): string => {
+  // If it's already an RSS feed URL, return as is
+  if (url.includes('feeds/videos.xml')) {
+    return url;
+  }
+
+  const channelId = extractYouTubeChannelId(url);
+  
+  if (channelId) {
+    // For channel ID format, we can directly create the RSS URL
+    if (url.includes('/channel/')) {
+      return `https://www.youtube.com/feeds/videos.xml?channel_id=${channelId}`;
+    }
+    
+    // For other formats (@username, /c/, /user/), we need to note that
+    // the RSS conversion might need the actual channel ID
+    // For now, we'll try with the extracted identifier
+    return `https://www.youtube.com/feeds/videos.xml?channel_id=${channelId}`;
+  }
+  
+  // If we can't extract the channel ID, return the original URL
+  return url;
+};
+
 const AddFeedModal = ({ isOpen, onClose, onAddFeed, categories }: AddFeedModalProps) => {
   const [selectedType, setSelectedType] = useState<string>('');
   
@@ -64,8 +111,17 @@ const AddFeedModal = ({ isOpen, onClose, onAddFeed, categories }: AddFeedModalPr
   });
 
   const handleSubmit = (data: FeedFormData) => {
+    let processedUrl = data.url;
+    
+    // If it's a YouTube feed, convert the URL to RSS format
+    if (selectedType === 'youtube') {
+      processedUrl = convertYouTubeToRSS(data.url);
+      console.log('YouTube URL converted:', { original: data.url, converted: processedUrl });
+    }
+    
     const feedData = {
       ...data,
+      url: processedUrl,
       type: selectedType,
       id: Date.now().toString(), // Simple ID generation
     };
@@ -88,6 +144,25 @@ const AddFeedModal = ({ isOpen, onClose, onAddFeed, categories }: AddFeedModalPr
 
   const selectedTypeOption = feedTypeOptions.find(option => option.value === selectedType);
 
+  const getUrlPlaceholder = () => {
+    switch (selectedType) {
+      case 'youtube':
+        return 'https://www.youtube.com/@channelname ou https://www.youtube.com/channel/UCxxxxx';
+      case 'rss-auto':
+      case 'rss-manual':
+        return 'https://example.com/feed.xml';
+      default:
+        return 'https://...';
+    }
+  };
+
+  const getUrlHelperText = () => {
+    if (selectedType === 'youtube') {
+      return 'Collez le lien de la chaîne YouTube (sera automatiquement converti en flux RSS)';
+    }
+    return null;
+  };
+
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent className="sm:max-w-md">
@@ -160,12 +235,17 @@ const AddFeedModal = ({ isOpen, onClose, onAddFeed, categories }: AddFeedModalPr
                     <FormLabel>URL</FormLabel>
                     <FormControl>
                       <Input 
-                        placeholder="https://..." 
+                        placeholder={getUrlPlaceholder()}
                         type="url"
                         {...field} 
                         required
                       />
                     </FormControl>
+                    {getUrlHelperText() && (
+                      <p className="text-xs text-muted-foreground mt-1">
+                        {getUrlHelperText()}
+                      </p>
+                    )}
                     <FormMessage />
                   </FormItem>
                 )}