|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
|
<title>Facebook Video & Audio Downloader</title> |
|
|
<style> |
|
|
:root { |
|
|
--primary-color: #1877f2; |
|
|
--primary-hover: #166fe5; |
|
|
--background-color: #f0f2f5; |
|
|
--container-bg: #ffffff; |
|
|
--text-color: #1c1e21; |
|
|
--subtle-text: #606770; |
|
|
--border-color: #dddfe2; |
|
|
--error-bg: #fff0f0; |
|
|
--error-text: #d8000c; |
|
|
--progress-bg: #e4e6ea; |
|
|
--progress-fill: var(--primary-color); |
|
|
} |
|
|
body { |
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, |
|
|
Helvetica, Arial, sans-serif; |
|
|
background-color: var(--background-color); |
|
|
color: var(--text-color); |
|
|
margin: 0; |
|
|
padding: 20px; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: flex-start; |
|
|
min-height: 100vh; |
|
|
} |
|
|
.container { |
|
|
background: var(--container-bg); |
|
|
padding: 2rem; |
|
|
border-radius: 8px; |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|
|
width: 100%; |
|
|
max-width: 600px; |
|
|
transition: all 0.3s ease-in-out; |
|
|
} |
|
|
h1 { |
|
|
text-align: center; |
|
|
color: var(--primary-color); |
|
|
margin-bottom: 1.5rem; |
|
|
font-size: 1.8rem; |
|
|
} |
|
|
.tabs { |
|
|
display: flex; |
|
|
border-bottom: 1px solid var(--border-color); |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
.tab-button { |
|
|
background: none; |
|
|
color: var(--subtle-text); |
|
|
padding: 1rem; |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
font-size: 1rem; |
|
|
font-weight: 600; |
|
|
transition: color 0.2s, border-bottom 0.2s; |
|
|
border-bottom: 3px solid transparent; |
|
|
flex-grow: 1; |
|
|
} |
|
|
.tab-button.active { |
|
|
color: var(--primary-color); |
|
|
border-bottom-color: var(--primary-color); |
|
|
} |
|
|
.tab-content { |
|
|
display: none; |
|
|
} |
|
|
.tab-content.active { |
|
|
display: block; |
|
|
} |
|
|
form { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
} |
|
|
input[type="text"], |
|
|
select { |
|
|
padding: 1rem; |
|
|
margin-bottom: 1rem; |
|
|
border: 1px solid var(--border-color); |
|
|
border-radius: 6px; |
|
|
font-size: 1rem; |
|
|
width: 100%; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
button { |
|
|
background-color: var(--primary-color); |
|
|
color: white; |
|
|
padding: 1rem; |
|
|
border: none; |
|
|
border-radius: 6px; |
|
|
cursor: pointer; |
|
|
font-size: 1.1rem; |
|
|
font-weight: 600; |
|
|
transition: background-color 0.3s; |
|
|
} |
|
|
button:hover:not(:disabled) { |
|
|
background-color: var(--primary-hover); |
|
|
} |
|
|
button:disabled { |
|
|
background-color: #a0bdf5; |
|
|
cursor: not-allowed; |
|
|
} |
|
|
#status-container { |
|
|
margin-top: 1.5rem; |
|
|
text-align: center; |
|
|
font-weight: 500; |
|
|
} |
|
|
#status.error { |
|
|
color: var(--error-text); |
|
|
background-color: var(--error-bg); |
|
|
padding: 0.8rem; |
|
|
border-radius: 6px; |
|
|
} |
|
|
.spinner { |
|
|
border: 4px solid rgba(0, 0, 0, 0.1); |
|
|
width: 36px; |
|
|
height: 36px; |
|
|
border-radius: 50%; |
|
|
border-left-color: var(--primary-color); |
|
|
animation: spin 1s linear infinite; |
|
|
display: none; |
|
|
margin: 20px auto; |
|
|
} |
|
|
@keyframes spin { |
|
|
to { |
|
|
transform: rotate(360deg); |
|
|
} |
|
|
} |
|
|
.note { |
|
|
font-size: 0.9rem; |
|
|
color: var(--subtle-text); |
|
|
margin-top: 1rem; |
|
|
background-color: #f7f8fa; |
|
|
padding: 0.8rem; |
|
|
border-radius: 6px; |
|
|
text-align: center; |
|
|
} |
|
|
.important-note { |
|
|
font-size: 0.9rem; |
|
|
color: #946c00; |
|
|
margin-bottom: 1.5rem; |
|
|
background-color: #fffbe6; |
|
|
padding: 0.8rem; |
|
|
border-radius: 6px; |
|
|
text-align: center; |
|
|
} |
|
|
#progress-container { |
|
|
display: none; |
|
|
margin-top: 1rem; |
|
|
text-align: center; |
|
|
} |
|
|
#progress-bar { |
|
|
width: 100%; |
|
|
height: 20px; |
|
|
background-color: var(--progress-bg); |
|
|
border-radius: 10px; |
|
|
overflow: hidden; |
|
|
display: block; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
#progress-bar::-webkit-progress-bar { |
|
|
background-color: var(--progress-bg); |
|
|
border-radius: 10px; |
|
|
} |
|
|
#progress-bar::-webkit-progress-value { |
|
|
background-color: var(--progress-fill); |
|
|
border-radius: 10px; |
|
|
} |
|
|
#progress-bar::-moz-progress-bar { |
|
|
background-color: var(--progress-fill); |
|
|
border-radius: 10px; |
|
|
} |
|
|
#progress-text { |
|
|
font-weight: 600; |
|
|
color: var(--subtle-text); |
|
|
} |
|
|
#control-buttons { |
|
|
display: none; |
|
|
margin-top: 1rem; |
|
|
} |
|
|
#pause-btn, |
|
|
#cancel-btn { |
|
|
margin: 0 0.5rem; |
|
|
padding: 0.5rem 1rem; |
|
|
font-size: 1rem; |
|
|
} |
|
|
#pause-btn.paused { |
|
|
background-color: #28a745; |
|
|
} |
|
|
#pause-btn.paused:hover { |
|
|
background-color: #218838; |
|
|
} |
|
|
#stories-results { |
|
|
display: none; |
|
|
margin-top: 1.5rem; |
|
|
} |
|
|
.story { |
|
|
margin-bottom: 1.5rem; |
|
|
border: 1px solid var(--border-color); |
|
|
padding: 1rem; |
|
|
border-radius: 8px; |
|
|
background: #fafbfc; |
|
|
} |
|
|
.story h3 { |
|
|
margin: 0 0 0.5rem 0; |
|
|
color: var(--primary-color); |
|
|
font-size: 1.1rem; |
|
|
} |
|
|
.preview-container { |
|
|
text-align: center; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
.preview-container video, |
|
|
.preview-container img, |
|
|
.preview-container audio { |
|
|
width: 150px; |
|
|
height: 150px; |
|
|
object-fit: cover; |
|
|
border-radius: 6px; |
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
|
display: block; |
|
|
margin: 0 auto; |
|
|
} |
|
|
.preview-container audio { |
|
|
height: auto; |
|
|
width: 150px; |
|
|
} |
|
|
.story ul { |
|
|
list-style: none; |
|
|
padding: 0; |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
.story li { |
|
|
flex: 1; |
|
|
min-width: 120px; |
|
|
} |
|
|
.story a { |
|
|
display: block; |
|
|
padding: 0.5rem; |
|
|
background: var(--primary-color); |
|
|
color: white; |
|
|
text-decoration: none; |
|
|
border-radius: 4px; |
|
|
text-align: center; |
|
|
font-size: 0.9rem; |
|
|
transition: background-color 0.2s; |
|
|
} |
|
|
.story a:hover { |
|
|
background-color: var(--primary-hover); |
|
|
} |
|
|
#back-to-form { |
|
|
background-color: var(--subtle-text); |
|
|
margin-top: 1rem; |
|
|
} |
|
|
#back-to-form:hover { |
|
|
background-color: #525b69; |
|
|
} |
|
|
#stories-loader { |
|
|
display: none; |
|
|
text-align: center; |
|
|
margin: 1rem 0; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<h1>Facebook Video & Audio Downloader</h1> |
|
|
|
|
|
<div class="tabs"> |
|
|
<button class="tab-button active" onclick="openTab(event, 'video')"> |
|
|
Video |
|
|
</button> |
|
|
<button class="tab-button" onclick="openTab(event, 'audio')"> |
|
|
Audio |
|
|
</button> |
|
|
<button class="tab-button" onclick="openTab(event, 'stories')"> |
|
|
Stories |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="video" class="tab-content active"> |
|
|
<form id="videoForm"> |
|
|
<input |
|
|
type="text" |
|
|
name="url" |
|
|
placeholder="Enter Facebook Video URL" |
|
|
required |
|
|
/> |
|
|
<select name="format"> |
|
|
<option value="mp4">MP4</option> |
|
|
<option value="webm">WebM</option> |
|
|
</select> |
|
|
<button type="submit">Download Video</button> |
|
|
</form> |
|
|
<p class="note"> |
|
|
Download Facebook videos in MP4 or WebM format. The download will |
|
|
appear in your browser's download manager. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div id="audio" class="tab-content"> |
|
|
<form id="audioForm"> |
|
|
<input |
|
|
type="text" |
|
|
name="url" |
|
|
placeholder="Enter Facebook Video URL" |
|
|
required |
|
|
/> |
|
|
<select name="format"> |
|
|
<option value="mp3">MP3</option> |
|
|
<option value="m4a">M4A</option> |
|
|
<option value="wav">WAV</option> |
|
|
</select> |
|
|
<button type="submit">Download Audio</button> |
|
|
</form> |
|
|
<p class="note"> |
|
|
Extract audio from Facebook videos in various formats. The download |
|
|
will appear in your browser's download manager. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div id="stories" class="tab-content"> |
|
|
<form id="storiesForm"> |
|
|
<input |
|
|
type="text" |
|
|
name="url" |
|
|
placeholder="Enter Facebook Stories URL" |
|
|
required |
|
|
/> |
|
|
<button type="submit">Fetch Stories</button> |
|
|
</form> |
|
|
<div id="stories-loader" class="spinner"></div> |
|
|
<p class="note"> |
|
|
Fetch and download Facebook stories. Previews and multiple format |
|
|
options will be displayed. |
|
|
</p> |
|
|
<div id="stories-results"> |
|
|
<h2 style="text-align: center; margin-bottom: 1rem">Stories</h2> |
|
|
<div id="stories-container"></div> |
|
|
<button id="back-to-form" onclick="backToStoriesForm()"> |
|
|
Back to Form |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="status-container"> |
|
|
<div id="spinner" class="spinner"></div> |
|
|
<div id="progress-container"> |
|
|
<progress id="progress-bar" value="0" max="100"></progress> |
|
|
<div id="progress-text">0%</div> |
|
|
</div> |
|
|
<div id="control-buttons"> |
|
|
<button id="pause-btn">Pause</button> |
|
|
<button id="cancel-btn" style="background-color: #dc3545"> |
|
|
Cancel |
|
|
</button> |
|
|
</div> |
|
|
<div id="status"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
let isDownloading = false; |
|
|
let paused = false; |
|
|
let currentReader = null; |
|
|
let currentChunks = []; |
|
|
let currentReceived = 0; |
|
|
let currentTotal = 0; |
|
|
let currentResponse = null; |
|
|
const proxy = "https://corsproxy.io/?"; |
|
|
const targetUrl = "https://getvidfb.com/"; |
|
|
|
|
|
function openTab(evt, tabName) { |
|
|
document |
|
|
.querySelectorAll(".tab-content") |
|
|
.forEach((tc) => tc.classList.remove("active")); |
|
|
document |
|
|
.querySelectorAll(".tab-button") |
|
|
.forEach((tb) => tb.classList.remove("active")); |
|
|
document.getElementById(tabName).classList.add("active"); |
|
|
evt.currentTarget.classList.add("active"); |
|
|
if (tabName === "stories") { |
|
|
document.getElementById("stories-results").style.display = "none"; |
|
|
} |
|
|
} |
|
|
|
|
|
async function handleSubmit(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
if (isDownloading) { |
|
|
document.getElementById("status").textContent = |
|
|
"A download is already in progress. Please wait or pause/cancel the current one."; |
|
|
document.getElementById("status").classList.add("error"); |
|
|
return; |
|
|
} |
|
|
|
|
|
const form = e.target; |
|
|
const submitButton = form.querySelector('button[type="submit"]'); |
|
|
const status = document.getElementById("status"); |
|
|
const spinner = document.getElementById("spinner"); |
|
|
const progressContainer = document.getElementById("progress-container"); |
|
|
const progressBar = document.getElementById("progress-bar"); |
|
|
const progressText = document.getElementById("progress-text"); |
|
|
const controlButtons = document.getElementById("control-buttons"); |
|
|
|
|
|
|
|
|
document |
|
|
.querySelectorAll('button[type="submit"]') |
|
|
.forEach((btn) => (btn.disabled = true)); |
|
|
isDownloading = true; |
|
|
paused = false; |
|
|
|
|
|
spinner.style.display = "block"; |
|
|
submitButton.disabled = true; |
|
|
status.textContent = |
|
|
"Initializing... Please wait, this may take a moment."; |
|
|
status.classList.remove("error"); |
|
|
progressContainer.style.display = "none"; |
|
|
progressBar.value = 0; |
|
|
progressText.textContent = "0%"; |
|
|
controlButtons.style.display = "none"; |
|
|
|
|
|
try { |
|
|
const formData = new FormData(form); |
|
|
const response = await fetch("/download", { |
|
|
method: "POST", |
|
|
body: formData, |
|
|
}); |
|
|
|
|
|
if (!response.ok) { |
|
|
const data = await response.json(); |
|
|
throw new Error(data.error || "An unknown server error occurred."); |
|
|
} |
|
|
|
|
|
status.textContent = "Streaming download..."; |
|
|
spinner.style.display = "none"; |
|
|
progressContainer.style.display = "block"; |
|
|
controlButtons.style.display = "block"; |
|
|
|
|
|
currentTotal = parseInt( |
|
|
response.headers.get("Content-Length") || "0" |
|
|
); |
|
|
currentReceived = 0; |
|
|
currentChunks = []; |
|
|
currentReader = response.body.getReader(); |
|
|
currentResponse = response; |
|
|
|
|
|
|
|
|
const pauseBtn = document.getElementById("pause-btn"); |
|
|
pauseBtn.onclick = togglePause; |
|
|
pauseBtn.textContent = "Pause"; |
|
|
pauseBtn.classList.remove("paused"); |
|
|
|
|
|
|
|
|
const cancelBtn = document.getElementById("cancel-btn"); |
|
|
cancelBtn.onclick = cancelDownload; |
|
|
|
|
|
readChunk(); |
|
|
} catch (error) { |
|
|
status.textContent = `Error: ${error.message}`; |
|
|
status.classList.add("error"); |
|
|
resetDownloadState(); |
|
|
} |
|
|
} |
|
|
|
|
|
async function handleStoriesSubmit(e) { |
|
|
e.preventDefault(); |
|
|
const form = e.target; |
|
|
const urlInput = form.querySelector('input[name="url"]'); |
|
|
const fbUrl = urlInput.value; |
|
|
const loader = document.getElementById("stories-loader"); |
|
|
const results = document.getElementById("stories-results"); |
|
|
const container = document.getElementById("stories-container"); |
|
|
const status = document.getElementById("status"); |
|
|
|
|
|
if (!fbUrl) return; |
|
|
|
|
|
form.querySelector('button[type="submit"]').disabled = true; |
|
|
loader.style.display = "block"; |
|
|
status.textContent = "Fetching stories..."; |
|
|
status.classList.remove("error"); |
|
|
results.style.display = "none"; |
|
|
container.innerHTML = ""; |
|
|
|
|
|
try { |
|
|
const proxiedUrl = proxy + encodeURIComponent(targetUrl); |
|
|
const formData = new URLSearchParams(); |
|
|
formData.append("url", fbUrl); |
|
|
formData.append("lang", "en"); |
|
|
formData.append("type", "redirect"); |
|
|
|
|
|
const response = await fetch(proxiedUrl, { |
|
|
method: "POST", |
|
|
headers: { "Content-Type": "application/x-www-form-urlencoded" }, |
|
|
body: formData, |
|
|
}); |
|
|
|
|
|
if (!response.ok) throw new Error("Failed to fetch stories"); |
|
|
|
|
|
const html = await response.text(); |
|
|
const parser = new DOMParser(); |
|
|
const doc = parser.parseFromString(html, "text/html"); |
|
|
const storyBlocks = doc.querySelectorAll(".snaptikvid"); |
|
|
|
|
|
if (storyBlocks.length === 0) { |
|
|
|
|
|
const links = doc.querySelectorAll("#snaptik-video a.abutton"); |
|
|
const storyDiv = document.createElement("div"); |
|
|
storyDiv.className = "story"; |
|
|
storyDiv.innerHTML = "<h3>Story #0</h3>"; |
|
|
const previewContainer = document.createElement("div"); |
|
|
previewContainer.className = "preview-container"; |
|
|
let previewAdded = false; |
|
|
const ul = document.createElement("ul"); |
|
|
links.forEach((link) => { |
|
|
const title = |
|
|
link.querySelector("span")?.textContent.trim() || "Download"; |
|
|
const href = link.getAttribute("href"); |
|
|
const li = document.createElement("li"); |
|
|
let preview; |
|
|
if (!previewAdded && title.includes("Video/Mp4")) { |
|
|
preview = document.createElement("video"); |
|
|
preview.controls = true; |
|
|
preview.src = href; |
|
|
previewContainer.appendChild(preview); |
|
|
previewAdded = true; |
|
|
} else if (!previewAdded && title.includes("Photo/Jpg")) { |
|
|
preview = document.createElement("img"); |
|
|
preview.src = href; |
|
|
previewContainer.appendChild(preview); |
|
|
previewAdded = true; |
|
|
} else if (!previewAdded && title.includes("Audio/Mp3")) { |
|
|
preview = document.createElement("audio"); |
|
|
preview.controls = true; |
|
|
preview.src = href; |
|
|
previewContainer.appendChild(preview); |
|
|
previewAdded = true; |
|
|
} |
|
|
const a = document.createElement("a"); |
|
|
a.href = href; |
|
|
a.textContent = title; |
|
|
a.download = ""; |
|
|
li.appendChild(a); |
|
|
ul.appendChild(li); |
|
|
}); |
|
|
if (!previewAdded && links.length > 0) { |
|
|
const firstHref = links[0].getAttribute("href"); |
|
|
if (firstHref) { |
|
|
const preview = document.createElement("img"); |
|
|
preview.src = firstHref; |
|
|
previewContainer.appendChild(preview); |
|
|
} |
|
|
} |
|
|
storyDiv.appendChild(previewContainer); |
|
|
storyDiv.appendChild(ul); |
|
|
container.appendChild(storyDiv); |
|
|
} else { |
|
|
storyBlocks.forEach((storyBlock, index) => { |
|
|
const storyDiv = document.createElement("div"); |
|
|
storyDiv.className = "story"; |
|
|
storyDiv.innerHTML = `<h3>Story #${index}</h3>`; |
|
|
const previewContainer = document.createElement("div"); |
|
|
previewContainer.className = "preview-container"; |
|
|
const links = storyBlock.querySelectorAll("a.abutton"); |
|
|
let previewAdded = false; |
|
|
const ul = document.createElement("ul"); |
|
|
links.forEach((link) => { |
|
|
const title = |
|
|
link.querySelector("span")?.textContent.trim() || "Download"; |
|
|
const href = link.getAttribute("href"); |
|
|
const li = document.createElement("li"); |
|
|
let preview; |
|
|
if (!previewAdded && title.includes("Video/Mp4")) { |
|
|
preview = document.createElement("video"); |
|
|
preview.controls = true; |
|
|
preview.src = href; |
|
|
previewContainer.appendChild(preview); |
|
|
previewAdded = true; |
|
|
} else if (!previewAdded && title.includes("Photo/Jpg")) { |
|
|
preview = document.createElement("img"); |
|
|
preview.src = href; |
|
|
previewContainer.appendChild(preview); |
|
|
previewAdded = true; |
|
|
} else if (!previewAdded && title.includes("Audio/Mp3")) { |
|
|
preview = document.createElement("audio"); |
|
|
preview.controls = true; |
|
|
preview.src = href; |
|
|
previewContainer.appendChild(preview); |
|
|
previewAdded = true; |
|
|
} |
|
|
const a = document.createElement("a"); |
|
|
a.href = href; |
|
|
a.textContent = title; |
|
|
a.download = ""; |
|
|
li.appendChild(a); |
|
|
ul.appendChild(li); |
|
|
}); |
|
|
if (!previewAdded) { |
|
|
const thumbImg = storyBlock.querySelector(".snaptik-left img"); |
|
|
if (thumbImg) { |
|
|
const preview = document.createElement("img"); |
|
|
preview.src = thumbImg.src; |
|
|
previewContainer.appendChild(preview); |
|
|
} |
|
|
} |
|
|
storyDiv.appendChild(previewContainer); |
|
|
storyDiv.appendChild(ul); |
|
|
container.appendChild(storyDiv); |
|
|
}); |
|
|
} |
|
|
|
|
|
results.style.display = "block"; |
|
|
status.textContent = "Stories fetched successfully!"; |
|
|
urlInput.value = ""; |
|
|
} catch (error) { |
|
|
status.textContent = `Error: ${error.message}`; |
|
|
status.classList.add("error"); |
|
|
} finally { |
|
|
loader.style.display = "none"; |
|
|
form.querySelector('button[type="submit"]').disabled = false; |
|
|
} |
|
|
} |
|
|
|
|
|
function backToStoriesForm() { |
|
|
document.getElementById("stories-results").style.display = "none"; |
|
|
document.getElementById("storiesForm").reset(); |
|
|
document.getElementById("status").textContent = ""; |
|
|
} |
|
|
|
|
|
async function readChunk() { |
|
|
if (!currentReader || !isDownloading) return; |
|
|
|
|
|
try { |
|
|
|
|
|
while (paused && isDownloading) { |
|
|
await new Promise((resolve) => setTimeout(resolve, 100)); |
|
|
} |
|
|
|
|
|
if (!isDownloading) return; |
|
|
|
|
|
const { done, value } = await currentReader.read(); |
|
|
if (done) { |
|
|
|
|
|
await completeDownload(); |
|
|
return; |
|
|
} |
|
|
|
|
|
currentChunks.push(value); |
|
|
currentReceived += value.length; |
|
|
|
|
|
if (currentTotal > 0) { |
|
|
const percent = Math.min( |
|
|
(currentReceived / currentTotal) * 100, |
|
|
100 |
|
|
).toFixed(2); |
|
|
document.getElementById("progress-bar").value = percent; |
|
|
document.getElementById( |
|
|
"progress-text" |
|
|
).textContent = `${percent}%`; |
|
|
} else { |
|
|
document.getElementById("progress-text").textContent = `${( |
|
|
currentReceived / |
|
|
1024 / |
|
|
1024 |
|
|
).toFixed(1)} MB`; |
|
|
} |
|
|
|
|
|
if (isDownloading) { |
|
|
readChunk(); |
|
|
} |
|
|
} catch (err) { |
|
|
if (isDownloading) { |
|
|
throw err; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
function togglePause() { |
|
|
paused = !paused; |
|
|
const pauseBtn = document.getElementById("pause-btn"); |
|
|
if (paused) { |
|
|
pauseBtn.textContent = "Resume"; |
|
|
pauseBtn.classList.add("paused"); |
|
|
document.getElementById("status").textContent = "Download paused."; |
|
|
} else { |
|
|
pauseBtn.textContent = "Pause"; |
|
|
pauseBtn.classList.remove("paused"); |
|
|
document.getElementById("status").textContent = |
|
|
"Streaming download..."; |
|
|
readChunk(); |
|
|
} |
|
|
} |
|
|
|
|
|
async function cancelDownload() { |
|
|
isDownloading = false; |
|
|
paused = false; |
|
|
if (currentReader) { |
|
|
await currentReader.cancel(); |
|
|
} |
|
|
document.getElementById("status").textContent = "Download cancelled."; |
|
|
document.getElementById("status").classList.add("error"); |
|
|
resetDownloadState(); |
|
|
} |
|
|
|
|
|
async function completeDownload() { |
|
|
isDownloading = false; |
|
|
paused = false; |
|
|
|
|
|
const blob = new Blob(currentChunks); |
|
|
let downloadName = "facebook_content"; |
|
|
const contentDisposition = currentResponse.headers.get( |
|
|
"Content-Disposition" |
|
|
); |
|
|
if (contentDisposition && contentDisposition.includes("attachment")) { |
|
|
const filenameRegex = /filename[^;=\n]*="?([^";\n]*)"?/; |
|
|
const matches = filenameRegex.exec(contentDisposition); |
|
|
if (matches != null && matches[1]) { |
|
|
downloadName = decodeURIComponent(matches[1]); |
|
|
} |
|
|
} |
|
|
|
|
|
const url = window.URL.createObjectURL(blob); |
|
|
const a = document.createElement("a"); |
|
|
a.style.display = "none"; |
|
|
a.href = url; |
|
|
a.download = downloadName; |
|
|
document.body.appendChild(a); |
|
|
a.click(); |
|
|
window.URL.revokeObjectURL(url); |
|
|
a.remove(); |
|
|
|
|
|
document.getElementById("status").textContent = |
|
|
"Download complete! Check your browser's downloads."; |
|
|
document.getElementById("progress-container").style.display = "none"; |
|
|
document.getElementById("control-buttons").style.display = "none"; |
|
|
resetDownloadState(); |
|
|
} |
|
|
|
|
|
function resetDownloadState() { |
|
|
document |
|
|
.querySelectorAll('button[type="submit"]') |
|
|
.forEach((btn) => (btn.disabled = false)); |
|
|
document.getElementById("spinner").style.display = "none"; |
|
|
document.getElementById("progress-container").style.display = "none"; |
|
|
document.getElementById("control-buttons").style.display = "none"; |
|
|
isDownloading = false; |
|
|
paused = false; |
|
|
currentReader = null; |
|
|
currentChunks = []; |
|
|
currentReceived = 0; |
|
|
currentResponse = null; |
|
|
} |
|
|
|
|
|
document |
|
|
.getElementById("videoForm") |
|
|
.addEventListener("submit", handleSubmit); |
|
|
document |
|
|
.getElementById("audioForm") |
|
|
.addEventListener("submit", handleSubmit); |
|
|
document |
|
|
.getElementById("storiesForm") |
|
|
.addEventListener("submit", handleStoriesSubmit); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
