bot
129 lines
4.4 KiB
HTML
129 lines
4.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="color-scheme" content="dark">
|
|
<meta name="theme-color" content="#0a0b0d">
|
|
<title>Media Ingest</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', path='/styles.css') }}">
|
|
<script src="{{ url_for('static', path='/app.js') }}" defer></script>
|
|
</head>
|
|
<body>
|
|
<header class="site-header">
|
|
<a class="brand" href="/" aria-label="Media Ingest home">
|
|
<span class="brand-mark" aria-hidden="true"></span>
|
|
<span>Media Ingest</span>
|
|
</a>
|
|
<span class="environment">Local</span>
|
|
</header>
|
|
|
|
<main class="page-shell">
|
|
<section class="hero" aria-labelledby="page-title">
|
|
<p class="eyebrow">Source inspection</p>
|
|
<h1 id="page-title">Bring the source.<br>See what is available.</h1>
|
|
<p class="intro">
|
|
Inspect public video sources before choosing what enters your workflow.
|
|
Nothing is downloaded at this stage.
|
|
</p>
|
|
|
|
<form class="inspect-form" id="inspect-form">
|
|
<label class="sr-only" for="source-url">Public video URL</label>
|
|
<div class="input-shell">
|
|
<input
|
|
id="source-url"
|
|
name="url"
|
|
type="url"
|
|
inputmode="url"
|
|
autocomplete="url"
|
|
maxlength="2048"
|
|
placeholder="Paste a public video URL"
|
|
required
|
|
>
|
|
<button id="inspect-button" type="submit">
|
|
<span class="button-label">Inspect source</span>
|
|
<span class="button-progress" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
<p class="form-note">HTTP and HTTPS sources only. Playlists are not supported.</p>
|
|
</form>
|
|
|
|
<div class="notice error-notice" id="error-notice" role="alert" hidden>
|
|
<span class="notice-label">Inspection failed</span>
|
|
<span id="error-message"></span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="result" id="result" aria-live="polite" hidden>
|
|
<div class="result-heading">
|
|
<div>
|
|
<p class="eyebrow">Source found</p>
|
|
<h2 id="result-title"></h2>
|
|
</div>
|
|
<div class="result-actions">
|
|
<button class="text-button" id="new-source" type="button">New source</button>
|
|
<a id="source-link" class="source-link" target="_blank" rel="noreferrer">Open source</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="source-card">
|
|
<div class="thumbnail-shell" id="thumbnail-shell">
|
|
<img id="thumbnail" alt="" referrerpolicy="no-referrer">
|
|
<span class="duration" id="duration"></span>
|
|
</div>
|
|
<dl class="metadata">
|
|
<div>
|
|
<dt>Platform</dt>
|
|
<dd id="extractor"></dd>
|
|
</div>
|
|
<div>
|
|
<dt>Publisher</dt>
|
|
<dd id="uploader"></dd>
|
|
</div>
|
|
<div>
|
|
<dt>Published</dt>
|
|
<dd id="upload-date"></dd>
|
|
</div>
|
|
<div>
|
|
<dt>Top quality</dt>
|
|
<dd id="top-quality"></dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="formats-heading">
|
|
<div>
|
|
<p class="eyebrow">Output choices</p>
|
|
<h3>Choose the outcome</h3>
|
|
</div>
|
|
<p>Technical stream selection happens automatically.</p>
|
|
</div>
|
|
|
|
<div class="output-options" id="output-options">
|
|
<article class="output-option" id="best-option">
|
|
<div class="option-index">01</div>
|
|
<div class="option-copy">
|
|
<h4>Best available</h4>
|
|
<p>Keep the highest source quality. Container and codec may vary.</p>
|
|
</div>
|
|
<dl class="option-specs" id="best-specs"></dl>
|
|
</article>
|
|
<article class="output-option" id="compatible-option">
|
|
<div class="option-index">02</div>
|
|
<div class="option-copy">
|
|
<h4>Compatible MP4</h4>
|
|
<p>Prefer H.264 video and AAC audio for editing and playback.</p>
|
|
</div>
|
|
<dl class="option-specs" id="compatible-specs"></dl>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<span>Private media workflow</span>
|
|
<span>Inspection only</span>
|
|
</footer>
|
|
</body>
|
|
</html>
|