109 lines
17 KiB
HTML
109 lines
17 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>YouTubeDL</title><script src="theme-init.js"></script><link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<main class="app">
|
||
<header class="header">
|
||
<div class="brand"><span class="brand-icon">↓</span><div><strong>YouTubeDL</strong><span>Видео. Звук. Ваш выбор.</span></div></div>
|
||
<div class="header-tools"><button id="open-setup" class="icon-button help-button" title="Настройка и подсказки" aria-label="Открыть мастер настройки">?</button><button id="theme" class="icon-button" title="Тема: автоматически" aria-label="Сменить тему">◐</button><button id="close" class="icon-button embedded-only" title="Закрыть меню" aria-label="Закрыть">×</button></div>
|
||
</header>
|
||
<details id="helper-panel" class="helper-panel" data-state="checking">
|
||
<summary><span class="helper-indicator"><span class="status-dot"></span><span id="helper-status" role="status" aria-live="polite">Проверяем помощник…</span></span><span class="helper-chevron">⌄</span></summary>
|
||
<div class="helper-body">
|
||
<p id="helper-message">Проверяю связь с локальным помощником.</p>
|
||
<p id="helper-versions" class="version-status" role="status"></p>
|
||
<div class="helper-actions"><button id="helper-start" type="button" class="small-button">Запустить</button><button id="helper-update" type="button" class="small-button" hidden>Обновить компоненты</button><a id="helper-install" class="small-button" href="https://git.lonarpgproxy.space/OwnerLink/YouTubeDL/releases/latest" target="_blank" rel="noopener noreferrer">Скачать помощник</a><button id="helper-remove" type="button" class="small-button danger-button" disabled>Удалить</button></div>
|
||
<label class="auto-update" id="auto-update-row" hidden><input id="auto-update" type="checkbox"><span>Обновлять компоненты автоматически</span></label>
|
||
<p id="update-note" class="hint" hidden>Проверка раз в сутки, пока помощник работает. Обновления устанавливаются между загрузками.</p>
|
||
<p id="helper-install-note" class="hint" hidden>На странице релизов проекта скачайте YouTubeDL-Helper-Setup.exe и запустите его. Все компоненты уже внутри. Затем вернитесь сюда и нажмите «Запустить».</p>
|
||
<details class="dependencies"><summary class="dependency-heading">Состав комплекта <span id="dependencies-status">Ещё не проверен</span></summary><div id="dependencies"></div></details>
|
||
</div>
|
||
</details>
|
||
<section id="session-panel" class="session-panel" data-state="checking" aria-label="Вход в YouTube">
|
||
<div class="session-heading"><span class="session-dot"></span><span id="session-status" role="status" aria-live="polite">Проверяем вход в YouTube…</span></div>
|
||
<p id="session-message" class="hint">Используется вход из этого профиля браузера.</p>
|
||
<div class="session-actions"><button id="session-enable" type="button" class="small-button">Использовать вход в YouTube</button><button id="session-disable" type="button" class="text-button" hidden>Отключить</button></div>
|
||
</section>
|
||
<section class="source">
|
||
<span class="eyebrow">СЕЙЧАС НА YOUTUBE</span>
|
||
<h1 id="video-title">Подключаюсь к помощнику…</h1>
|
||
<p id="video-meta" class="muted">Выберите качество и сохраните ролик в один клик.</p>
|
||
<div id="manual-url" hidden><label for="url-input">Ссылка на ролик</label><div class="url-row"><input id="url-input" type="url" placeholder="https://www.youtube.com/watch?v=…"><button id="load-url" class="small-button">Открыть</button></div></div>
|
||
</section>
|
||
<div id="alert" class="alert" role="alert" hidden></div>
|
||
<div id="error-actions" class="error-actions" hidden><button id="retry-video" type="button" class="small-button">Повторить запрос качества</button></div>
|
||
<div id="loading" class="loading"><span class="spinner"></span><span id="loading-text">Проверяю подключение…</span></div>
|
||
<form id="download-form" hidden>
|
||
<fieldset class="mode-switch" aria-label="Что скачать">
|
||
<label><input type="radio" name="mode" value="video" checked><span>Видео + звук</span></label>
|
||
<label><input type="radio" name="mode" value="video_only"><span>Видео</span></label>
|
||
<label><input type="radio" name="mode" value="audio"><span>Аудио</span></label>
|
||
</fieldset>
|
||
<div id="video-options" class="field"><label for="quality">Качество видео <button id="refresh" type="button" class="text-button" title="Обновить дорожки">Обновить</button></label><select id="quality"></select></div>
|
||
<div id="audio-options" class="field"><label for="audio-quality">Звуковая дорожка</label><select id="audio-quality"></select><p id="audio-note" class="hint">Звук автоматически добавится к видео.</p></div>
|
||
<div class="two-columns">
|
||
<div class="field"><label for="container">Формат файла</label><select id="container"></select></div>
|
||
<div class="field" id="codec-field"><label for="codec">Видеокодек</label><select id="codec"><option value="auto">Авто · быстрее всего</option><option value="copy">Сохранить исходный</option><option value="h264">H.264 · совместимость</option><option value="hevc">HEVC · компактнее</option><option value="av1">AV1 · современный</option><option value="vp9">VP9 · WebM</option></select></div>
|
||
<div class="field" id="bitrate-field" hidden><label for="bitrate">Битрейт аудио</label><select id="bitrate"><option value="128">128 кбит/с</option><option value="192">192 кбит/с</option><option value="256" selected>256 кбит/с</option><option value="320">320 кбит/с</option></select></div>
|
||
</div>
|
||
<details class="advanced"><summary>Ускорение и имя файла <span>⌄</span></summary><div class="advanced-body">
|
||
<div class="two-columns"><div class="field"><label for="engine">Обработка</label><select id="engine"><option value="auto">Авто · GPU при конвертации</option><option value="nvenc">Только NVIDIA NVENC</option><option value="amf">Только AMD AMF</option><option value="cpu">CPU</option></select></div><div class="field"><label for="preset">Приоритет</label><select id="preset"><option value="fast">Скорость</option><option value="balanced" selected>Баланс</option><option value="quality">Качество</option></select></div></div>
|
||
<div class="field"><label for="filename">Имя файла <span class="optional">необязательно</span></label><input id="filename" maxlength="150" placeholder="Название ролика"></div>
|
||
</div></details>
|
||
<div class="field folder-field"><label for="folder">Сохранить в</label><div class="folder-row"><input id="folder" placeholder="Выберите папку" aria-label="Папка сохранения"><button id="pick-folder" type="button" class="small-button" title="Выбрать папку">Выбрать…</button></div></div>
|
||
<div class="field folder-field"><label for="work-folder">Рабочая папка для загрузки и обработки</label><div class="folder-row"><input id="work-folder" placeholder="Та же папка, что и для сохранения" aria-label="Рабочая папка"><button id="pick-work-folder" type="button" class="small-button" title="Выбрать диск и рабочую папку">Выбрать…</button></div><p class="hint">Можно выбрать другой диск. Здесь будут дорожки и временные файлы обработки; готовый файл попадёт в папку «Сохранить в». Изменение применяется к следующим загрузкам.</p></div>
|
||
<div id="processing-hint" class="processing-hint"></div>
|
||
<div class="form-actions"><button id="save-settings" type="button" class="small-button">Сохранить настройки</button><button id="download" type="submit" class="download-button">Скачать <span id="estimate" class="estimate"></span></button></div>
|
||
</form>
|
||
<section id="active-jobs-section" class="jobs-section" hidden><div class="section-label">ТЕКУЩИЕ ОПЕРАЦИИ</div><div id="active-jobs"></div></section>
|
||
<section class="history-link"><button id="open-history" type="button" class="small-button">История загрузок и ошибок <span aria-hidden="true">↗</span></button><p class="hint">Откроется в новой вкладке.</p></section>
|
||
<footer><span id="hardware">Видеокарта ещё не проверена</span></footer>
|
||
</main>
|
||
<dialog id="setup" class="setup" aria-labelledby="setup-title">
|
||
<div class="setup-header"><span class="eyebrow">ПЕРВЫЙ ЗАПУСК</span><button id="setup-close" type="button" class="icon-button" aria-label="Пропустить настройку" title="Продолжить позже">×</button></div>
|
||
<ol class="setup-progress" aria-label="Этапы настройки"><li>Знакомство</li><li>Помощник</li><li>Настройки</li><li>Готово</li></ol>
|
||
<div class="setup-body">
|
||
<h2 id="setup-title" tabindex="-1">Сохраняйте ролики в один клик</h2>
|
||
<section data-setup-step="0">
|
||
<p>Сначала подключим помощник и выберем, как сохранять видео. Это займёт несколько шагов.</p>
|
||
<div class="setup-preview" aria-hidden="true"><span class="setup-example-download">↓ Скачать</span><span class="setup-example-settings">⚙</span></div>
|
||
<p><strong>Загрузчик</strong> использует сохранённые настройки. <strong>«Скачать»</strong> запускает загрузку, а <strong>⚙ рядом</strong> открывает выбор качества, формата и папки.</p>
|
||
<div class="setup-tip">Кнопки появятся рядом с «Подписаться», на превью роликов и в Shorts.</div>
|
||
</section>
|
||
<section data-setup-step="1" hidden>
|
||
<p>Помощник скачивает дорожки, соединяет видео со звуком и конвертирует файл на вашем компьютере.</p>
|
||
<div id="setup-helper" class="setup-helper" data-state="checking"><span class="status-dot"></span><strong id="setup-helper-status" role="status" aria-live="polite">Проверяем помощник…</strong></div>
|
||
<p id="setup-helper-message" class="hint"></p>
|
||
<p id="setup-versions" class="version-status" role="status"></p>
|
||
<div class="setup-helper-actions"><a id="setup-install" class="small-button" href="https://git.lonarpgproxy.space/OwnerLink/YouTubeDL/releases/latest" target="_blank" rel="noopener noreferrer">Скачать в релизах</a><button id="setup-check" type="button" class="small-button">Проверить подключение</button></div>
|
||
<ol id="setup-install-steps" class="setup-instructions"><li>На странице релизов проекта скачайте YouTubeDL-Helper-Setup.exe и откройте его из загрузок браузера.</li><li>Дождитесь окончания установки — все компоненты уже внутри.</li><li>Вернитесь сюда и нажмите «Проверить подключение».</li></ol>
|
||
<p id="setup-gpu" class="setup-tip" hidden></p>
|
||
<label id="setup-updates-row" class="setup-checkbox" hidden><input id="setup-updates" type="checkbox"><span>Обновлять компоненты автоматически</span></label>
|
||
<p id="setup-updates-note" class="hint" hidden>Раз в сутки, пока помощник работает, между загрузками. Нужен интернет.</p>
|
||
</section>
|
||
<section data-setup-step="2" hidden>
|
||
<p>Эти настройки будут использоваться кнопками «Скачать» на YouTube. Позже их можно изменить через ⚙.</p>
|
||
<div class="field"><label for="setup-folder">Куда сохранять файлы</label><div class="folder-row"><input id="setup-folder" placeholder="Выберите папку"><button id="setup-pick-folder" type="button" class="small-button">Выбрать…</button></div></div>
|
||
<div class="field"><label for="setup-work-folder">Где скачивать и обрабатывать</label><div class="folder-row"><input id="setup-work-folder" placeholder="Та же папка, что и для сохранения"><button id="setup-pick-work-folder" type="button" class="small-button">Выбрать…</button></div><p class="hint">Необязательно: можно выбрать рабочую папку на другом диске.</p></div>
|
||
<div class="field"><label for="setup-mode">Что скачивать</label><select id="setup-mode"><option value="video">Видео + звук</option><option value="video_only">Только видео</option><option value="audio">Только звук</option></select></div>
|
||
<div class="two-columns"><div class="field" id="setup-quality-field"><label for="setup-quality">Качество видео</label><select id="setup-quality"><option value="best">Лучшее доступное</option><option value="2160">До 2160p · 4K</option><option value="1440">До 1440p</option><option value="1080">До 1080p · Full HD</option><option value="720">До 720p</option></select></div><div class="field"><label for="setup-format">Формат файла</label><select id="setup-format"></select></div></div>
|
||
<div class="setup-tip" id="setup-format-hint">Отдельный звук автоматически добавится к видео. Если выбранного качества нет, используем ближайшее доступное.</div>
|
||
<p class="hint">Обработка — «Авто»: подходящая видеокарта при конвертации, CPU при необходимости. Совместимые дорожки сохраняются без перекодирования.</p>
|
||
</section>
|
||
<section data-setup-step="3" hidden>
|
||
<p id="setup-saved" class="setup-saved"></p>
|
||
<ol class="setup-instructions"><li><strong>Откройте YouTube.</strong> Если страница была открыта при установке расширения, обновите её.</li><li><strong>Нажмите «Скачать» или ↓ на превью.</strong> Загрузка начнётся по вашим настройкам.</li><li><strong>Следите за уведомлением.</strong> Оно покажет скачивание, объединение дорожек и конвертацию. «Показать файл» откроет результат.</li></ol>
|
||
<div class="setup-tip">Вход в YouTube необязателен. Если YouTube попросит авторизацию, откройте ⚙ → «Использовать вход в YouTube» и разрешите доступ.</div>
|
||
<p class="hint">Этот мастер всегда доступен по кнопке ? вверху меню. Кнопка «История загрузок и ошибок» под настройками открывает отдельную вкладку с результатами и сообщениями об ошибках.</p>
|
||
</section>
|
||
<p id="setup-error" class="alert" role="alert" hidden></p>
|
||
</div>
|
||
<div class="setup-footer"><button id="setup-skip" type="button" class="text-button">Позже</button><div class="setup-navigation"><button id="setup-back" type="button" class="small-button" hidden>Назад</button><button id="setup-next" type="button" class="download-button">Начать настройку</button></div></div>
|
||
</dialog>
|
||
<script type="module" src="downloader.js"></script>
|
||
</body>
|
||
</html>
|