Nueva version

Dockerfile.txt

@@ -0,0 +1,13 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+RUN npm install
+
+COPY . .
+
+EXPOSE 7860
+
+CMD ["npm", "start"]
+

app/actions.ts

@@ -0,0 +1,49 @@
+"use server"
+
+import ytdl from "ytdl-core"
+
+async function fetchYouTubeInfo(url: string) {
+  const info = await ytdl.getInfo(url)
+  return {
+    platform: "YouTube",
+    title: info.videoDetails.title,
+    formats: [
+      {
+        quality: "Alta calidad (720p)",
+        extension: "mp4",
+        url: `/api/download?url=${encodeURIComponent(url)}&format=mp4`,
+      },
+      { quality: "Audio (MP3)", extension: "mp3", url: `/api/download?url=${encodeURIComponent(url)}&format=mp3` },
+    ],
+  }
+}
+
+async function fetchGenericInfo(url: string, platform: string) {
+  return {
+    platform,
+    title: "Video",
+    formats: [{ quality: "Original", extension: "mp4", url: `/api/download?url=${encodeURIComponent(url)}` }],
+  }
+}
+
+export async function processUrl(url: string) {
+  try {
+    const cleanUrl = url.trim()
+    if (!cleanUrl) {
+      return { error: "Por favor, ingrese una URL válida." }
+    }
+
+    if (cleanUrl.includes("youtube.com") || cleanUrl.includes("youtu.be")) {
+      return await fetchYouTubeInfo(cleanUrl)
+    } else if (cleanUrl.includes("facebook.com")) {
+      return await fetchGenericInfo(cleanUrl, "Facebook")
+    } else if (cleanUrl.includes("twitter.com")) {
+      return await fetchGenericInfo(cleanUrl, "Twitter")
+    } else {
+      throw new Error("Plataforma no soportada")
+    }
+  } catch (error) {
+    return { error: "No se pudo procesar la URL. Asegúrese de que sea una URL de video válida." }
+  }
+}
+

app/api/download/route.ts

@@ -0,0 +1,46 @@
+import { type NextRequest, NextResponse } from "next/server"
+import ytdl from "ytdl-core"
+import axios from "axios"
+
+export async function GET(req: NextRequest) {
+  const url = req.nextUrl.searchParams.get("url")
+  const format = req.nextUrl.searchParams.get("format")
+
+  if (!url) {
+    return NextResponse.json({ error: "URL no proporcionada" }, { status: 400 })
+  }
+
+  try {
+    if (url.includes("youtube.com") || url.includes("youtu.be")) {
+      const info = await ytdl.getInfo(url)
+      const format_id = format === "mp3" ? "audioonly" : "highest"
+      const format_info = ytdl.chooseFormat(info.formats, { quality: format_id })
+
+      const stream = ytdl(url, { format: format_info })
+      const filename = `${info.videoDetails.title}.${format === "mp3" ? "mp3" : "mp4"}`
+
+      return new NextResponse(stream as any, {
+        headers: {
+          "Content-Disposition": `attachment; filename="${filename}"`,
+          "Content-Type": format === "mp3" ? "audio/mpeg" : "video/mp4",
+        },
+      })
+    } else {
+      // For other platforms, we'll use a more generic approach
+      const response = await axios.get(url, { responseType: "stream" })
+      const contentType = response.headers["content-type"]
+      const contentDisposition = response.headers["content-disposition"]
+
+      return new NextResponse(response.data, {
+        headers: {
+          "Content-Type": contentType,
+          "Content-Disposition": contentDisposition || "attachment",
+        },
+      })
+    }
+  } catch (error) {
+    console.error("Error downloading video:", error)
+    return NextResponse.json({ error: "Error al descargar el video" }, { status: 500 })
+  }
+}
+

app/page.tsx

@@ -0,0 +1,10 @@
+import VideoDownloader from "../components/VideoDownloader"
+
+export default function Home() {
+  return (
+    <main className="min-h-screen bg-gradient-to-br from-purple-400 to-indigo-600 flex items-center justify-center p-4">
+      <VideoDownloader />
+    </main>
+  )
+}
+

components/VideoDownloader.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import { useState } from "react"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { AlertCircle, Download } from "lucide-react"
+import { processUrl } from "../app/actions"
+
+interface VideoInfo {
+  platform: string
+  title: string
+  formats: Array<{
+    quality: string
+    extension: string
+    url: string
+  }>
+}
+
+export default function VideoDownloader() {
+  const [url, setUrl] = useState("")
+  const [result, setResult] = useState<VideoInfo | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError(null)
+    setResult(null)
+    try {
+      const data = await processUrl(url)
+      if ("error" in data) {
+        setError(data.error)
+      } else {
+        setResult(data as VideoInfo)
+      }
+    } catch (err) {
+      setError("Ocurrió un error al procesar la URL.")
+    }
+  }
+
+  return (
+    <Card className="w-full max-w-md">
+      <CardHeader>
+        <CardTitle className="text-2xl font-bold text-center">Descargador de Videos</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <Input
+            type="url"
+            placeholder="Ingrese la URL del video"
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+            required
+          />
+          <Button type="submit" className="w-full">
+            Analizar URL
+          </Button>
+        </form>
+
+        {error && (
+          <div className="mt-4 p-4 bg-red-100 text-red-700 rounded-md flex items-center">
+            <AlertCircle className="mr-2" />
+            <p>{error}</p>
+          </div>
+        )}
+
+        {result && (
+          <div className="mt-4 space-y-4">
+            <h3 className="font-semibold">Opciones de descarga para {result.title}:</h3>
+            {result.formats.map((format, index) => (
+              <Button
+                key={index}
+                variant="outline"
+                className="w-full justify-between"
+                onClick={() => window.open(format.url, "_blank")}
+              >
+                <span>
+                  {format.quality} - {format.extension}
+                </span>
+                <Download size={20} />
+              </Button>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+

package.json

@@ -0,0 +1,14 @@
+{
+  "name": "video-downloader",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "axios": "^1.4.0",
+    "express": "^4.18.2",
+    "ytdl-core": "^4.11.5"
+  }
+}
+

public/index.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Descargador de Videos</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gradient-to-br from-purple-400 to-indigo-600 min-h-screen flex items-center justify-center p-4">
+    <div class="bg-white rounded-lg shadow-md w-full max-w-md p-6">
+        <h1 class="text-2xl font-bold text-center mb-6">Descargador de Videos</h1>
+        <form id="downloadForm" class="space-y-4">
+            <input type="url" id="videoUrl" placeholder="Ingrese la URL del video" required
+                   class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
+            <button type="submit" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                Analizar URL
+            </button>
+        </form>
+        <div id="result" class="mt-4 space-y-4 hidden">
+            <h3 class="font-semibold">Opciones de descarga:</h3>
+            <div id="downloadOptions"></div>
+        </div>
+        <div id="error" class="mt-4 p-4 bg-red-100 text-red-700 rounded-md hidden"></div>
+    </div>
+    <script>
+        document.getElementById('downloadForm').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const url = document.getElementById('videoUrl').value;
+            const resultDiv = document.getElementById('result');
+            const errorDiv = document.getElementById('error');
+            const downloadOptions = document.getElementById('downloadOptions');
+
+            resultDiv.classList.add('hidden');
+            errorDiv.classList.add('hidden');
+            downloadOptions.innerHTML = '';
+
+            try {
+                const response = await fetch(`/api/info?url=${encodeURIComponent(url)}`);
+                const data = await response.json();
+
+                if (data.error) {
+                    throw new Error(data.error);
+                }
+
+                resultDiv.classList.remove('hidden');
+                data.formats.forEach(format => {
+                    const button = document.createElement('button');
+                    button.className = 'w-full bg-gray-200 text-gray-800 py-2 px-4 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 mb-2 flex justify-between items-center';
+                    button.innerHTML = `
+                        <span>${format.quality} - ${format.extension}</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
+                        </svg>
+                    `;
+                    button.onclick = () => window.open(format.url, '_blank');
+                    downloadOptions.appendChild(button);
+                });
+            } catch (error) {
+                errorDiv.classList.remove('hidden');
+                errorDiv.textContent = error.message;
+            }
+        });
+    </script>
+</body>
+</html>
+

server.js

@@ -0,0 +1,89 @@
+const express = require("express")
+const path = require("path")
+const ytdl = require("ytdl-core")
+const axios = require("axios")
+
+const app = express()
+const port = process.env.PORT || 7860 // Hugging Face uses port 7860 by default
+
+app.use(express.static(path.join(__dirname, "public")))
+
+app.get("/api/info", async (req, res) => {
+  const { url } = req.query
+
+  if (!url) {
+    return res.status(400).json({ error: "URL no proporcionada" })
+  }
+
+  try {
+    if (url.includes("youtube.com") || url.includes("youtu.be")) {
+      const info = await ytdl.getInfo(url)
+      res.json({
+        platform: "YouTube",
+        title: info.videoDetails.title,
+        formats: [
+          {
+            quality: "Alta calidad (720p)",
+            extension: "mp4",
+            url: `/api/download?url=${encodeURIComponent(url)}&format=mp4`,
+          },
+          { quality: "Audio (MP3)", extension: "mp3", url: `/api/download?url=${encodeURIComponent(url)}&format=mp3` },
+        ],
+      })
+    } else if (url.includes("facebook.com")) {
+      res.json({
+        platform: "Facebook",
+        title: "Video de Facebook",
+        formats: [{ quality: "Original", extension: "mp4", url: `/api/download?url=${encodeURIComponent(url)}` }],
+      })
+    } else if (url.includes("twitter.com")) {
+      res.json({
+        platform: "Twitter",
+        title: "Video de Twitter",
+        formats: [{ quality: "Original", extension: "mp4", url: `/api/download?url=${encodeURIComponent(url)}` }],
+      })
+    } else {
+      res.status(400).json({ error: "Plataforma no soportada" })
+    }
+  } catch (error) {
+    console.error("Error processing URL:", error)
+    res.status(500).json({ error: "Error al procesar la URL" })
+  }
+})
+
+app.get("/api/download", async (req, res) => {
+  const { url, format } = req.query
+
+  if (!url) {
+    return res.status(400).json({ error: "URL no proporcionada" })
+  }
+
+  try {
+    if (url.includes("youtube.com") || url.includes("youtu.be")) {
+      const info = await ytdl.getInfo(url)
+      const format_id = format === "mp3" ? "audioonly" : "highest"
+      const format_info = ytdl.chooseFormat(info.formats, { quality: format_id })
+
+      res.header(
+        "Content-Disposition",
+        `attachment; filename="${info.videoDetails.title}.${format === "mp3" ? "mp3" : "mp4"}"`,
+      )
+      res.header("Content-Type", format === "mp3" ? "audio/mpeg" : "video/mp4")
+
+      ytdl(url, { format: format_info }).pipe(res)
+    } else {
+      const response = await axios.get(url, { responseType: "stream" })
+      res.header("Content-Type", response.headers["content-type"])
+      res.header("Content-Disposition", response.headers["content-disposition"] || "attachment")
+      response.data.pipe(res)
+    }
+  } catch (error) {
+    console.error("Error downloading video:", error)
+    res.status(500).json({ error: "Error al descargar el video" })
+  }
+})
+
+app.listen(port, () => {
+  console.log(`Server is running on port ${port}`)
+})
+

tailwind.config.js

@@ -0,0 +1,72 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}
+