Hugging Face's logo

Spaces:
Ivan000
/
ytdl
Paused

App Files Community
ytdl
File size: 5,699 Bytes 
11b4853
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTube Audio Downloader</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen">
    <div class="container mx-auto px-4 py-8">
        <div class="max-w-2xl mx-auto">
            <h1 class="text-3xl font-bold text-center mb-8 text-gray-800">YouTube Audio Downloader</h1>
            
            <!-- Input Form -->
            <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                <div class="mb-4">
                    <input type="text" id="youtubeUrl" placeholder="Paste YouTube URL here" 
                           class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <button onclick="getVideoInfo()" 
                        class="w-full bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition duration-200">
                    Get Video Info
                </button>
            </div>

            <!-- Video Info Section -->
            <div id="videoInfo" class="hidden bg-white rounded-lg shadow-md p-6 mb-6">
                <div id="videoDetails" class="mb-4">
                    <div id="thumbnailContainer" class="mb-4"></div>
                    <h2 id="videoTitle" class="text-xl font-semibold mb-2"></h2>
                    <p id="channelName" class="text-gray-600"></p>
                    <p id="duration" class="text-gray-600"></p>
                </div>
                <button onclick="downloadAudio()" 
                        class="w-full bg-green-500 text-white py-2 px-4 rounded-lg hover:bg-green-600 transition duration-200">
                    Download Audio
                </button>
            </div>

            <!-- Loading Indicator -->
            <div id="loading" class="hidden">
                <div class="flex justify-center items-center">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
                </div>
            </div>

            <!-- Error Message -->
            <div id="errorMessage" class="hidden bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4">
            </div>
        </div>
    </div>

    <script>
        function showLoading() {
            $('#loading').removeClass('hidden');
        }

        function hideLoading() {
            $('#loading').addClass('hidden');
        }

        function showError(message) {
            $('#errorMessage').text(message).removeClass('hidden');
            setTimeout(() => {
                $('#errorMessage').addClass('hidden');
            }, 5000);
        }

        function formatDuration(seconds) {
            const minutes = Math.floor(seconds / 60);
            const remainingSeconds = seconds % 60;
            return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
        }

        function getVideoInfo() {
            const url = $('#youtubeUrl').val().trim();
            if (!url) {
                showError('Please enter a YouTube URL');
                return;
            }

            showLoading();
            $('#videoInfo').addClass('hidden');

            $.ajax({
                url: '/get-info',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ url: url }),
                success: function(response) {
                    $('#thumbnailContainer').html(`
                        <img src="${response.thumbnail}" alt="Video thumbnail" class="w-full rounded-lg">
                    `);
                    $('#videoTitle').text(response.title);
                    $('#channelName').text(`Channel: ${response.channel}`);
                    $('#duration').text(`Duration: ${formatDuration(response.duration)}`);
                    $('#videoInfo').removeClass('hidden');
                    hideLoading();
                },
                error: function(xhr) {
                    showError(xhr.responseJSON?.error || 'Failed to get video information');
                    hideLoading();
                }
            });
        }

        function downloadAudio() {
            const url = $('#youtubeUrl').val().trim();
            if (!url) {
                showError('Please enter a YouTube URL');
                return;
            }

            showLoading();

            $.ajax({
                url: '/download',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ url: url }),
                xhrFields: {
                    responseType: 'blob'
                },
                success: function(response) {
                    const blob = new Blob([response], { type: 'audio/mp3' });
                    const downloadUrl = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.style.display = 'none';
                    a.href = downloadUrl;
                    a.download = $('#videoTitle').text() + '.mp3';
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(downloadUrl);
                    hideLoading();
                },
                error: function(xhr) {
                    showError('Failed to download audio');
                    hideLoading();
                }
            });
        }
    </script>
</body>
</html>