thePR0M3TH3AN/bitvid
1
0 Fork 0
mirror of https://github.com/PR0M3TH3AN/bitvid.git synced 2026-10-27 07:52:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: apply shared form control classes

Browse Source
This commit is contained in:
thePR0M3TH3AN committed 2025-10-10 16:22:39 -04:00
1 parent 76264dd22b
commit d3da77a869
3 files changed
+99 -99
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

components/upload-modal.html
+59 -59
View File
@@ -91,7 +91,7 @@
type="text"
id="uploadTitle"
required
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
/>
</div>
@@ -136,7 +136,7 @@
type="datetime-local"
id="nip71PublishedAt"
data-nip71-input="published_at"
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
/>
<p class="mt-1 text-xs text-gray-400">Set the canonical publish time for cross-client ordering.</p>
</div>
@@ -147,7 +147,7 @@
id="nip71AltText"
data-nip71-input="alt"
placeholder="Describe the visuals for screen readers"
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
/>
<p class="mt-1 text-xs text-gray-400">Plain-language fallback shown when the media cannot load.</p>
</div>
@@ -159,7 +159,7 @@
min="0"
step="1"
data-nip71-input="duration"
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
/>
<p class="mt-1 text-xs text-gray-400">Provide the runtime in whole seconds for timeline scrubbing.</p>
</div>
@@ -170,7 +170,7 @@
id="nip71ContentWarning"
data-nip71-input="content-warning"
placeholder="e.g., Flashing lights"
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
/>
<p class="mt-1 text-xs text-gray-400">Leave blank if the video is safe for all audiences.</p>
</div>
@@ -182,7 +182,7 @@
id="nip71Summary"
rows="3"
data-nip71-input="summary"
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 textarea"
placeholder="Short synopsis used as the Nostr content field"
></textarea>
<p class="mt-1 text-xs text-gray-400">This becomes the event content. Keep it concise for Nostr readers.</p>
@@ -199,7 +199,7 @@
<input
id="uploadUrl"
type="url"
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
placeholder="https://cdn.example.com/video.mp4"
/>
<small class="mt-1 block text-xs text-gray-400"
@@ -234,7 +234,7 @@
type="text"
id="uploadMagnet"
placeholder="magnet:?xt=urn:btih:..."
class="mt-1 block w-full rounded-md border border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
/>
<p class="mt-1 text-xs text-gray-400">
Provide a hosted URL for instant playback. Add a magnet for P2P
@@ -250,7 +250,7 @@
<input
type="url"
id="uploadThumbnail"
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
/>
</div>
@@ -263,7 +263,7 @@
<textarea
id="uploadDescription"
rows="3"
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 textarea"
></textarea>
<p class="mt-1 text-xs text-gray-400">Kept for older clients that rely on the legacy description tag.</p>
</div>
@@ -308,7 +308,7 @@
type="text"
data-nip71-field="m"
placeholder="video/mp4"
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
/>
<p class="mt-1 text-[11px] text-gray-500">RFC 2046 media type for this encoding.</p>
</div>
@@ -320,7 +320,7 @@
type="text"
data-nip71-field="dim"
placeholder="1920x1080"
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
/>
<p class="mt-1 text-[11px] text-gray-500">Formatted as widthxheight.</p>
</div>
@@ -332,7 +332,7 @@
type="url"
data-nip71-field="url"
placeholder="https://cdn.example.com/variant.m3u8"
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
/>
<p class="mt-1 text-[11px] text-gray-500">HTTPS variant URL shared across clients.</p>
</div>
@@ -344,7 +344,7 @@
type="text"
data-nip71-field="x"
placeholder="magnet:?xt=urn:btih:..."
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
/>
<p class="mt-1 text-[11px] text-gray-500">Optional magnet pointer if the variant is seeded via P2P.</p>
</div>
@@ -368,7 +368,7 @@
type="url"
placeholder="https://cdn.example.com/poster.jpg"
data-nip71-nested-field="image"
class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="flex-1 input"
/>
<button
type="button"
@@ -400,7 +400,7 @@
type="url"
placeholder="https://cdn.backup.net/video.mp4"
data-nip71-nested-field="fallback"
class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="flex-1 input"
/>
<button
type="button"
@@ -432,7 +432,7 @@
type="text"
placeholder="streaming-provider-id"
data-nip71-nested-field="service"
class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="flex-1 input"
/>
<button
type="button"
@@ -482,7 +482,7 @@
type="url"
data-nip71-field="url"
placeholder="https://cdn.example.com/captions.en.vtt"
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
/>
<p class="mt-1 text-[11px] text-gray-500">Direct link to the caption file.</p>
</div>
@@ -492,7 +492,7 @@
type="text"
data-nip71-field="type"
placeholder="subtitles"
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
/>
<p class="mt-1 text-[11px] text-gray-500">Use values like captions, subtitles, or descriptions.</p>
</div>
@@ -502,7 +502,7 @@
type="text"
data-nip71-field="language"
placeholder="en-US"
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
/>
<p class="mt-1 text-[11px] text-gray-500">BCP-47 locale code.</p>
</div>
@@ -543,7 +543,7 @@
type="text"
data-nip71-field="start"
placeholder="00:00:00"
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
/>
<p class="mt-1 text-[11px] text-gray-500">HH:MM:SS</p>
</div>
@@ -553,7 +553,7 @@
type="text"
data-nip71-field="end"
placeholder="00:03:30"
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
/>
<p class="mt-1 text-[11px] text-gray-500">Leave blank for open-ended segments.</p>
</div>
@@ -563,7 +563,7 @@
type="text"
data-nip71-field="title"
placeholder="Introduction"
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
/>
</div>
<div class="md:col-span-2">
@@ -572,7 +572,7 @@
type="url"
data-nip71-field="thumbnail"
placeholder="https://cdn.example.com/segment.jpg"
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
/>
<p class="mt-1 text-[11px] text-gray-500">Optional still image for this moment.</p>
</div>
@@ -609,7 +609,7 @@
type="text"
data-nip71-field="value"
placeholder="#nostr"
class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="flex-1 input"
/>
<button
type="button"
@@ -645,7 +645,7 @@
type="text"
data-nip71-field="pubkey"
placeholder="npub1..."
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
/>
<p class="mt-1 text-[11px] text-gray-500">Accepts npub or hex.</p>
</div>
@@ -655,7 +655,7 @@
type="url"
data-nip71-field="relay"
placeholder="wss://relay.example.com"
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
/>
<p class="mt-1 text-[11px] text-gray-500">Relay hint for discovering the participant.</p>
</div>
@@ -690,7 +690,7 @@
type="url"
data-nip71-field="url"
placeholder="https://example.com/article"
class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="flex-1 input"
/>
<button
type="button"
@@ -709,7 +709,7 @@
<input
type="checkbox"
id="uploadEnableComments"
class="mt-1 h-5 w-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
class="mt-1 checkbox"
checked
data-default-checked="true"
/>
@@ -727,7 +727,7 @@
<input
type="checkbox"
id="uploadIsNsfw"
class="mt-1 h-5 w-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
class="mt-1 checkbox"
data-default-checked="false"
/>
<div>
@@ -743,7 +743,7 @@
<input
type="checkbox"
id="uploadIsForKids"
class="mt-1 h-5 w-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
class="mt-1 checkbox"
data-default-checked="false"
/>
<div>
@@ -805,7 +805,7 @@
id="r2AccountId"
type="text"
autocomplete="off"
class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
class="mt-1 input"
placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
required
/>
@@ -818,7 +818,7 @@
id="r2AccessKeyId"
type="text"
autocomplete="off"
class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
class="mt-1 input"
placeholder="AKIA..."
required
/>
@@ -832,7 +832,7 @@
id="r2SecretAccessKey"
type="password"
autocomplete="off"
class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
class="mt-1 input"
required
/>
</div>
@@ -869,7 +869,7 @@
id="r2ApiToken"
type="password"
autocomplete="off"
class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
class="mt-1 input"
placeholder="Token with Workers R2 Storage Write"
/>
<p class="mt-1 text-xs text-gray-500">
@@ -885,7 +885,7 @@
id="r2ZoneId"
type="text"
autocomplete="off"
class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
class="mt-1 input"
placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
/>
<p class="mt-1 text-xs text-gray-500">
@@ -900,7 +900,7 @@
id="r2BaseDomain"
type="text"
autocomplete="off"
class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
class="mt-1 input"
placeholder="cdn.example.com"
/>
<p class="mt-1 text-xs text-gray-500">
@@ -953,7 +953,7 @@
id="cloudflareTitle"
type="text"
required
class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
class="mt-1 input"
/>
</div>
<div
@@ -1013,7 +1013,7 @@
type="datetime-local"
id="cloudflareNip71PublishedAt"
data-nip71-input="published_at"
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
/>
<p class="mt-1 text-xs text-gray-400">Set the canonical publish time for cross-client ordering.</p>
</div>
@@ -1024,7 +1024,7 @@
id="cloudflareNip71AltText"
data-nip71-input="alt"
placeholder="Describe the visuals for screen readers"
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
/>
<p class="mt-1 text-xs text-gray-400">Plain-language fallback shown when the media cannot load.</p>
</div>
@@ -1038,7 +1038,7 @@
min="0"
step="1"
data-nip71-input="duration"
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
/>
<p class="mt-1 text-xs text-gray-400">Provide the runtime in whole seconds for timeline scrubbing.</p>
</div>
@@ -1051,7 +1051,7 @@
id="cloudflareNip71ContentWarning"
data-nip71-input="content-warning"
placeholder="e.g., Flashing lights"
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
/>
<p class="mt-1 text-xs text-gray-400">Leave blank if the video is safe for all audiences.</p>
</div>
@@ -1063,7 +1063,7 @@
id="cloudflareNip71Summary"
rows="3"
data-nip71-input="summary"
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 textarea"
placeholder="Short synopsis used as the Nostr content field"
></textarea>
<p class="mt-1 text-xs text-gray-400">This becomes the event content. Keep it concise for Nostr readers.</p>
@@ -1076,7 +1076,7 @@
<textarea
id="cloudflareDescription"
rows="3"
class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
class="mt-1 input"
></textarea>
</div>
<div class="grid gap-3 md:grid-cols-2">
@@ -1087,7 +1087,7 @@
<input
id="cloudflareThumbnail"
type="url"
class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
class="mt-1 input"
/>
</div>
<div>
@@ -1098,7 +1098,7 @@
id="cloudflareMagnet"
type="text"
placeholder="magnet:?xt=urn:btih:..."
class="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
class="mt-1 input"
/>
</div>
</div>
@@ -1107,13 +1107,13 @@
id="cloudflareWs"
type="url"
placeholder="Web seed (ws=)"
class="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
class="input"
/>
<input
id="cloudflareXs"
type="url"
placeholder=".torrent URL (xs=)"
class="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
class="input"
/>
</div>
<fieldset
@@ -1163,7 +1163,7 @@
type="text"
data-nip71-field="m"
placeholder="Auto-filled after upload (e.g., video/mp4)"
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
/>
<p class="mt-1 text-[11px] text-gray-500">RFC 2046 media type for this encoding.</p>
</div>
@@ -1175,7 +1175,7 @@
type="text"
data-nip71-field="dim"
placeholder="Auto-filled if detected (e.g., 1920x1080)"
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
/>
<p class="mt-1 text-[11px] text-gray-500">Formatted as widthxheight.</p>
</div>
@@ -1187,7 +1187,7 @@
type="url"
data-nip71-field="url"
placeholder="Auto-filled after upload with the public HTTPS URL"
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
/>
<p class="mt-1 text-[11px] text-gray-500">HTTPS variant URL shared across clients.</p>
</div>
@@ -1199,7 +1199,7 @@
type="text"
data-nip71-field="x"
placeholder="Optional magnet pointer if seeding via P2P"
class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="mt-1 input"
/>
<p class="mt-1 text-[11px] text-gray-500">Optional magnet pointer if the variant is seeded via P2P.</p>
</div>
@@ -1223,7 +1223,7 @@
type="url"
placeholder="https://cdn.example.com/poster.jpg"
data-nip71-nested-field="image"
class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="flex-1 input"
/>
<button
type="button"
@@ -1255,7 +1255,7 @@
type="url"
placeholder="https://cdn.backup.net/video.mp4"
data-nip71-nested-field="fallback"
class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="flex-1 input"
/>
<button
type="button"
@@ -1287,7 +1287,7 @@
type="text"
placeholder="streaming-provider-id"
data-nip71-nested-field="service"
class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
class="flex-1 input"
/>
<button
type="button"
@@ -1418,7 +1418,7 @@
<input
type="checkbox"
id="cloudflareEnableComments"
class="mt-1 h-5 w-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
class="mt-1 checkbox"
checked
data-default-checked="true"
/>
@@ -1436,7 +1436,7 @@
<input
type="checkbox"
id="cloudflareIsNsfw"
class="mt-1 h-5 w-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
class="mt-1 checkbox"
data-default-checked="false"
/>
<div>
@@ -1452,7 +1452,7 @@
<input
type="checkbox"
id="cloudflareIsForKids"
class="mt-1 h-5 w-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
class="mt-1 checkbox"
data-default-checked="false"
/>
<div>
@@ -1473,7 +1473,7 @@
id="cloudflareFile"
type="file"
accept="video/*,.m3u8,.ts,.mp4,.webm,.mov,.mkv,.mpg,.mpeg"
class="mt-1 w-full rounded-md border border-dashed border-gray-600 bg-gray-900 px-3 py-4 text-sm text-gray-300 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
class="mt-1 input border-dashed bg-gray-900 px-3 py-4 text-gray-300"
required
/>
<p class="mt-1 text-xs text-gray-500">