mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 16:02:26 +00:00
936 lines
37 KiB
HTML
936 lines
37 KiB
HTML
<!-- components/edit-video-modal.html -->
|
|
<div
|
|
id="editVideoModal"
|
|
class="bv-modal hidden items-start md:items-center"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
tabindex="-1"
|
|
data-ds="legacy"
|
|
>
|
|
<div id="editVideoModalOverlay" class="bv-modal-backdrop"></div>
|
|
|
|
<div class="modal-sheet modal-content max-h-[90vh] overflow-y-auto lg:max-w-4xl" tabindex="-1">
|
|
<div class="modal-header">
|
|
<h2 class="text-xl font-bold text-text">Edit Video Note</h2>
|
|
<button id="closeEditVideoModal" class="modal-close">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-6 w-6"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="modal-body space-y-6">
|
|
<p class="text-sm text-muted">
|
|
Fields that already have values are locked. Click <strong>Edit field</strong> to make changes.
|
|
</p>
|
|
|
|
<form id="editVideoForm" class="space-y-5">
|
|
<div class="space-y-1">
|
|
<label for="editVideoTitle" class="block text-sm font-medium text-text">
|
|
Title
|
|
</label>
|
|
<div class="flex flex-col gap-2 sm:flex-row">
|
|
<input
|
|
type="text"
|
|
id="editVideoTitle"
|
|
class="flex-1 input"
|
|
placeholder="Video title"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
|
|
data-edit-target="editVideoTitle"
|
|
>
|
|
Edit field
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- NOTE: Keep this NIP-71 markup in sync with the upload and revert modals. -->
|
|
<div
|
|
class="space-y-4 rounded-lg border border-border/70 bg-overlay-black/30 p-4"
|
|
id="editNip71EventDetails"
|
|
data-nip71-section="event-details"
|
|
>
|
|
<fieldset
|
|
id="editNip71KindFieldset"
|
|
class="space-y-2"
|
|
data-nip71-fieldset="kind"
|
|
>
|
|
<legend class="text-sm font-semibold text-text">
|
|
NIP-71 event type
|
|
</legend>
|
|
<p class="text-xs text-muted">
|
|
Choose the video format. <span class="font-medium text-muted-strong">Kind 21</span> is a full video, while
|
|
<span class="font-medium text-muted-strong">Kind 22</span> is a short.
|
|
</p>
|
|
<div
|
|
class="form-control"
|
|
role="radiogroup"
|
|
aria-labelledby="editNip71KindFieldset"
|
|
>
|
|
<div class="menu sm:flex-row sm:flex-wrap sm:py-0" role="presentation">
|
|
<label class="menu__item gap-3 px-0 py-0" for="editNip71KindLong">
|
|
<input
|
|
type="radio"
|
|
name="editNip71Kind"
|
|
id="editNip71KindLong"
|
|
value="21"
|
|
checked
|
|
data-nip71-input="kind"
|
|
class="h-4 w-4 border-border bg-panel text-info focus:ring-info"
|
|
/>
|
|
<span class="text-sm text-text">Normal video (kind 21)</span>
|
|
</label>
|
|
<label class="menu__item gap-3 px-0 py-0" for="editNip71KindShort">
|
|
<input
|
|
type="radio"
|
|
name="editNip71Kind"
|
|
id="editNip71KindShort"
|
|
value="22"
|
|
data-nip71-input="kind"
|
|
class="h-4 w-4 border-border bg-panel text-info focus:ring-info"
|
|
/>
|
|
<span class="text-sm text-text">Short video (kind 22)</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<div class="grid gap-4 md:grid-cols-2" data-nip71-grid="metadata">
|
|
<div class="space-y-2">
|
|
<label for="editNip71PublishedAt" class="block text-sm font-medium text-text">
|
|
Published at
|
|
</label>
|
|
<input
|
|
type="datetime-local"
|
|
id="editNip71PublishedAt"
|
|
data-nip71-input="published_at"
|
|
class="input"
|
|
/>
|
|
<p class="text-xs text-muted">
|
|
Set the canonical publish time for cross-client ordering.
|
|
</p>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label for="editNip71AltText" class="block text-sm font-medium text-text">
|
|
Alt text
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="editNip71AltText"
|
|
data-nip71-input="alt"
|
|
placeholder="Describe the visuals for screen readers"
|
|
class="input"
|
|
/>
|
|
<p class="text-xs text-muted">
|
|
Plain-language fallback shown when the media cannot load.
|
|
</p>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label for="editNip71Duration" class="block text-sm font-medium text-text">
|
|
Duration (seconds)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
id="editNip71Duration"
|
|
min="0"
|
|
step="1"
|
|
data-nip71-input="duration"
|
|
class="input"
|
|
/>
|
|
<p class="text-xs text-muted">
|
|
Provide the runtime in whole seconds for timeline scrubbing.
|
|
</p>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label for="editNip71ContentWarning" class="block text-sm font-medium text-text">
|
|
Content warning
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="editNip71ContentWarning"
|
|
data-nip71-input="content-warning"
|
|
placeholder="e.g., Flashing lights"
|
|
class="input"
|
|
/>
|
|
<p class="text-xs text-muted">
|
|
Leave blank if the video is safe for all audiences.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<label for="editNip71Summary" class="block text-sm font-medium text-text">
|
|
Summary
|
|
</label>
|
|
<textarea
|
|
id="editNip71Summary"
|
|
rows="3"
|
|
data-nip71-input="summary"
|
|
class="textarea"
|
|
placeholder="Short synopsis used as the Nostr content field"
|
|
></textarea>
|
|
<p class="text-xs text-muted">
|
|
This becomes the event content. Keep it concise for Nostr readers.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<fieldset
|
|
id="editNip71TagsFieldset"
|
|
class="space-y-6 rounded-lg border border-border/70 bg-overlay-black/30 p-4"
|
|
data-nip71-section="tags"
|
|
>
|
|
<legend class="relative text-sm font-semibold text-text">
|
|
<span class="inline-block -ml-2 rounded px-2 bg-overlay-black/30">NIP-71 tags</span>
|
|
</legend>
|
|
<p class="text-xs text-muted">
|
|
Use the controls below to describe media variants, captions, chapters, participants, and references.
|
|
</p>
|
|
|
|
<section class="space-y-4" aria-labelledby="editNip71ImetaLabel" data-nip71-repeater="imeta">
|
|
<div class="flex items-center justify-between">
|
|
<h3 id="editNip71ImetaLabel" class="text-sm font-medium text-text">Image metadata (imeta)</h3>
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring text-xs font-semibold"
|
|
data-nip71-add="imeta"
|
|
aria-describedby="editNip71ImetaHelp"
|
|
>
|
|
Add variant
|
|
</button>
|
|
</div>
|
|
<p id="editNip71ImetaHelp" class="text-xs text-muted">
|
|
Provide dimensions, MIME type, and resource links for each variant. Nested repeaters let you attach multiple
|
|
<code>image</code>, <code>fallback</code>, or <code>service</code> values.
|
|
</p>
|
|
<div id="editNip71ImetaList" class="space-y-4" data-nip71-list="imeta"></div>
|
|
<template id="editNip71ImetaTemplate" data-nip71-template="imeta">
|
|
<article class="card space-y-3 bg-surface/60 p-4" data-nip71-entry="imeta">
|
|
<div class="grid gap-3 md:grid-cols-2">
|
|
<div class="space-y-2">
|
|
<label class="block text-xs font-medium text-muted-strong">
|
|
MIME type (<code>m</code>)
|
|
</label>
|
|
<input
|
|
type="text"
|
|
data-nip71-field="m"
|
|
placeholder="video/mp4"
|
|
class="input"
|
|
/>
|
|
<p class="text-[11px] text-muted">RFC 2046 media type for this encoding.</p>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="block text-xs font-medium text-muted-strong">
|
|
Pixel dimensions (<code>dim</code>)
|
|
</label>
|
|
<input
|
|
type="text"
|
|
data-nip71-field="dim"
|
|
placeholder="1920x1080"
|
|
class="input"
|
|
/>
|
|
<p class="text-[11px] text-muted">Formatted as widthxheight.</p>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="block text-xs font-medium text-muted-strong">
|
|
Streaming URL (<code>url</code>)
|
|
</label>
|
|
<input
|
|
type="url"
|
|
data-nip71-field="url"
|
|
placeholder="https://cdn.example.com/variant.m3u8"
|
|
class="input"
|
|
/>
|
|
<p class="text-[11px] text-muted">HTTPS variant URL shared across clients.</p>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="block text-xs font-medium text-muted-strong">
|
|
Magnet (<code>x</code>)
|
|
</label>
|
|
<input
|
|
type="text"
|
|
data-nip71-field="x"
|
|
placeholder="magnet:?xt=urn:btih:..."
|
|
class="input"
|
|
/>
|
|
<p class="text-[11px] text-muted">Optional magnet pointer if the variant is seeded via P2P.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-3" data-nip71-nested="image">
|
|
<div class="flex items-center justify-between">
|
|
<h4 class="text-xs font-semibold uppercase tracking-wide text-muted">Image values</h4>
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring text-[11px] font-medium"
|
|
data-nip71-nested-add="image"
|
|
>
|
|
Add image URL
|
|
</button>
|
|
</div>
|
|
<div class="space-y-2" data-nip71-nested-list="image"></div>
|
|
<template data-nip71-nested-template="image">
|
|
<div class="flex items-center gap-2" data-nip71-nested-entry="image">
|
|
<input
|
|
type="url"
|
|
placeholder="https://cdn.example.com/poster.jpg"
|
|
data-nip71-nested-field="image"
|
|
class="flex-1 input"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring text-[11px] font-medium"
|
|
data-nip71-remove="nested"
|
|
aria-label="Remove image URL"
|
|
>
|
|
Remove
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="space-y-3" data-nip71-nested="fallback">
|
|
<div class="flex items-center justify-between">
|
|
<h4 class="text-xs font-semibold uppercase tracking-wide text-muted">Fallback URLs</h4>
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring text-[11px] font-medium"
|
|
data-nip71-nested-add="fallback"
|
|
>
|
|
Add fallback
|
|
</button>
|
|
</div>
|
|
<div class="space-y-2" data-nip71-nested-list="fallback"></div>
|
|
<template data-nip71-nested-template="fallback">
|
|
<div class="flex items-center gap-2" data-nip71-nested-entry="fallback">
|
|
<input
|
|
type="url"
|
|
placeholder="https://cdn.backup.net/video.mp4"
|
|
data-nip71-nested-field="fallback"
|
|
class="flex-1 input"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring text-[11px] font-medium"
|
|
data-nip71-remove="nested"
|
|
aria-label="Remove fallback URL"
|
|
>
|
|
Remove
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="space-y-3" data-nip71-nested="service">
|
|
<div class="flex items-center justify-between">
|
|
<h4 class="text-xs font-semibold uppercase tracking-wide text-muted">Services</h4>
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring text-[11px] font-medium"
|
|
data-nip71-nested-add="service"
|
|
>
|
|
Add service
|
|
</button>
|
|
</div>
|
|
<div class="space-y-2" data-nip71-nested-list="service"></div>
|
|
<template data-nip71-nested-template="service">
|
|
<div class="flex items-center gap-2" data-nip71-nested-entry="service">
|
|
<input
|
|
type="text"
|
|
placeholder="https://api.example.com"
|
|
data-nip71-nested-field="service"
|
|
class="flex-1 input"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring text-[11px] font-medium"
|
|
data-nip71-remove="nested"
|
|
aria-label="Remove service entry"
|
|
>
|
|
Remove
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="flex justify-end">
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring text-[11px] font-medium"
|
|
data-nip71-remove="imeta"
|
|
>
|
|
Remove variant
|
|
</button>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
</section>
|
|
|
|
<section class="space-y-4" aria-labelledby="editNip71TextTracksLabel" data-nip71-repeater="text-track">
|
|
<div class="flex items-center justify-between">
|
|
<h3 id="editNip71TextTracksLabel" class="text-sm font-medium text-text">
|
|
Caption & subtitle tracks (text-track)
|
|
</h3>
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring text-xs font-semibold"
|
|
data-nip71-add="text-track"
|
|
aria-describedby="editNip71TextTracksHelp"
|
|
>
|
|
Add track
|
|
</button>
|
|
</div>
|
|
<p id="editNip71TextTracksHelp" class="text-xs text-muted">
|
|
Supply caption or subtitle URLs along with file type and language so players can surface accessibility features.
|
|
</p>
|
|
<div id="editNip71TextTrackList" class="space-y-4" data-nip71-list="text-track"></div>
|
|
<template id="editNip71TextTrackTemplate" data-nip71-template="text-track">
|
|
<article class="card space-y-3 bg-surface/60 p-4" data-nip71-entry="text-track">
|
|
<div class="grid gap-3 md:grid-cols-3">
|
|
<div class="space-y-2">
|
|
<label class="block text-xs font-medium text-muted-strong">Track URL</label>
|
|
<input
|
|
type="url"
|
|
data-nip71-field="url"
|
|
placeholder="https://cdn.example.com/subs.vtt"
|
|
class="input"
|
|
/>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="block text-xs font-medium text-muted-strong">Type</label>
|
|
<input
|
|
type="text"
|
|
data-nip71-field="type"
|
|
placeholder="text/vtt"
|
|
class="input"
|
|
/>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="block text-xs font-medium text-muted-strong">Language</label>
|
|
<input
|
|
type="text"
|
|
data-nip71-field="language"
|
|
placeholder="en"
|
|
class="input"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end">
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring text-[11px] font-medium"
|
|
data-nip71-remove="text-track"
|
|
>
|
|
Remove track
|
|
</button>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
</section>
|
|
|
|
<section class="space-y-4" aria-labelledby="editNip71SegmentsLabel" data-nip71-repeater="segment">
|
|
<div class="flex items-center justify-between">
|
|
<h3 id="editNip71SegmentsLabel" class="text-sm font-medium text-text">Chapters & segments (segment)</h3>
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring text-xs font-semibold"
|
|
data-nip71-add="segment"
|
|
aria-describedby="editNip71SegmentsHelp"
|
|
>
|
|
Add segment
|
|
</button>
|
|
</div>
|
|
<p id="editNip71SegmentsHelp" class="text-xs text-muted">
|
|
Outline chapters with start and end times, titles, and optional thumbnails.
|
|
</p>
|
|
<div id="editNip71SegmentList" class="space-y-4" data-nip71-list="segment"></div>
|
|
<template id="editNip71SegmentTemplate" data-nip71-template="segment">
|
|
<article class="card space-y-3 bg-surface/60 p-4" data-nip71-entry="segment">
|
|
<div class="grid gap-3 md:grid-cols-2">
|
|
<div class="space-y-2">
|
|
<label class="block text-xs font-medium text-muted-strong">Start (seconds)</label>
|
|
<input
|
|
type="number"
|
|
data-nip71-field="start"
|
|
min="0"
|
|
step="1"
|
|
class="input"
|
|
/>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="block text-xs font-medium text-muted-strong">End (seconds)</label>
|
|
<input
|
|
type="number"
|
|
data-nip71-field="end"
|
|
min="0"
|
|
step="1"
|
|
class="input"
|
|
/>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="block text-xs font-medium text-muted-strong">Title</label>
|
|
<input
|
|
type="text"
|
|
data-nip71-field="title"
|
|
placeholder="Chapter title"
|
|
class="input"
|
|
/>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="block text-xs font-medium text-muted-strong">Thumbnail URL</label>
|
|
<input
|
|
type="url"
|
|
data-nip71-field="thumbnail"
|
|
placeholder="https://cdn.example.com/frame.jpg"
|
|
class="input"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end">
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring text-[11px] font-medium"
|
|
data-nip71-remove="segment"
|
|
>
|
|
Remove segment
|
|
</button>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
</section>
|
|
|
|
<section class="space-y-4" aria-labelledby="editNip71HashtagsLabel" data-nip71-repeater="t">
|
|
<div class="flex items-center justify-between">
|
|
<h3 id="editNip71HashtagsLabel" class="text-sm font-medium text-text">Hashtags (<code>t</code>)</h3>
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring text-xs font-semibold"
|
|
data-nip71-add="t"
|
|
>
|
|
Add hashtag
|
|
</button>
|
|
</div>
|
|
<p class="text-xs text-muted">
|
|
Enter keywords; leading <code>#</code> characters are stripped automatically when saving.
|
|
</p>
|
|
<div id="editNip71HashtagList" class="space-y-2" data-nip71-list="t"></div>
|
|
<template id="editNip71HashtagTemplate" data-nip71-template="t">
|
|
<div class="flex items-center gap-2" data-nip71-entry="t">
|
|
<input
|
|
type="text"
|
|
data-nip71-field="value"
|
|
placeholder="#nostr"
|
|
class="flex-1 input"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring text-[11px] font-medium"
|
|
data-nip71-remove="t"
|
|
>
|
|
Remove
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</section>
|
|
|
|
<section class="space-y-4" aria-labelledby="editNip71ParticipantsLabel" data-nip71-repeater="p">
|
|
<div class="flex items-center justify-between">
|
|
<h3 id="editNip71ParticipantsLabel" class="text-sm font-medium text-text">Participants (<code>p</code>)</h3>
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring text-xs font-semibold"
|
|
data-nip71-add="p"
|
|
>
|
|
Add participant
|
|
</button>
|
|
</div>
|
|
<div id="editNip71ParticipantList" class="space-y-3" data-nip71-list="p"></div>
|
|
<template id="editNip71ParticipantTemplate" data-nip71-template="p">
|
|
<article class="card space-y-3 bg-surface/60 p-4" data-nip71-entry="p">
|
|
<div class="grid gap-3 md:grid-cols-2">
|
|
<div class="space-y-2">
|
|
<label class="block text-xs font-medium text-muted-strong">Participant pubkey</label>
|
|
<input
|
|
type="text"
|
|
data-nip71-field="pubkey"
|
|
placeholder="npub1... or hex"
|
|
class="input"
|
|
/>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="block text-xs font-medium text-muted-strong">Relay hint</label>
|
|
<input
|
|
type="text"
|
|
data-nip71-field="relay"
|
|
placeholder="wss://relay.example.com"
|
|
class="input"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end">
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring text-[11px] font-medium"
|
|
data-nip71-remove="p"
|
|
>
|
|
Remove participant
|
|
</button>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
</section>
|
|
|
|
<section class="space-y-4" aria-labelledby="editNip71ReferencesLabel" data-nip71-repeater="r">
|
|
<div class="flex items-center justify-between">
|
|
<h3 id="editNip71ReferencesLabel" class="text-sm font-medium text-text">Reference links (<code>r</code>)</h3>
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring text-xs font-semibold"
|
|
data-nip71-add="r"
|
|
>
|
|
Add reference
|
|
</button>
|
|
</div>
|
|
<div id="editNip71ReferenceList" class="space-y-2" data-nip71-list="r"></div>
|
|
<template id="editNip71ReferenceTemplate" data-nip71-template="r">
|
|
<div class="flex items-center gap-2" data-nip71-entry="r">
|
|
<input
|
|
type="url"
|
|
data-nip71-field="url"
|
|
placeholder="https://example.com/context"
|
|
class="flex-1 input"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring text-[11px] font-medium"
|
|
data-nip71-remove="r"
|
|
>
|
|
Remove
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</section>
|
|
</fieldset>
|
|
|
|
<div class="space-y-1">
|
|
<label for="editVideoUrl" class="block text-sm font-medium text-text">
|
|
Hosted video URL (https)
|
|
</label>
|
|
<div class="flex flex-col gap-2 sm:flex-row">
|
|
<input
|
|
type="url"
|
|
id="editVideoUrl"
|
|
class="flex-1 input"
|
|
placeholder="https://cdn.example.com/video.mp4"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
|
|
data-edit-target="editVideoUrl"
|
|
>
|
|
Edit field
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-1">
|
|
<label for="editVideoWs" class="block text-sm font-medium text-text">
|
|
Web seed (ws=)
|
|
</label>
|
|
<div class="flex flex-col gap-2 sm:flex-row">
|
|
<input
|
|
type="url"
|
|
id="editVideoWs"
|
|
class="flex-1 input"
|
|
placeholder="https://cdn.example.com/video.mp4"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
|
|
data-edit-target="editVideoWs"
|
|
>
|
|
Edit field
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-1">
|
|
<label for="editVideoXs" class="block text-sm font-medium text-text">
|
|
.torrent URL (xs=)
|
|
</label>
|
|
<div class="flex flex-col gap-2 sm:flex-row">
|
|
<input
|
|
type="url"
|
|
id="editVideoXs"
|
|
class="flex-1 input"
|
|
placeholder="https://cdn.example.com/video.torrent"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
|
|
data-edit-target="editVideoXs"
|
|
>
|
|
Edit field
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-1">
|
|
<label for="editVideoMagnet" class="block text-sm font-medium text-text">
|
|
Magnet link
|
|
</label>
|
|
<div class="flex flex-col gap-2 sm:flex-row">
|
|
<input
|
|
type="text"
|
|
id="editVideoMagnet"
|
|
class="flex-1 input"
|
|
placeholder="magnet:?xt=urn:btih:..."
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
|
|
data-edit-target="editVideoMagnet"
|
|
>
|
|
Edit field
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-1">
|
|
<label for="editVideoThumbnail" class="block text-sm font-medium text-text">
|
|
Thumbnail URL
|
|
</label>
|
|
<div class="flex flex-col gap-2 sm:flex-row">
|
|
<input
|
|
type="url"
|
|
id="editVideoThumbnail"
|
|
class="flex-1 input"
|
|
placeholder="https://cdn.example.com/preview.jpg"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
|
|
data-edit-target="editVideoThumbnail"
|
|
>
|
|
Edit field
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-1">
|
|
<label for="editVideoDescription" class="block text-sm font-medium text-text">
|
|
Description
|
|
</label>
|
|
<div class="flex flex-col gap-2">
|
|
<textarea
|
|
id="editVideoDescription"
|
|
rows="4"
|
|
class="textarea"
|
|
placeholder="What is this video about?"
|
|
></textarea>
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring hidden self-start text-xs font-semibold uppercase tracking-wide"
|
|
data-edit-target="editVideoDescription"
|
|
>
|
|
Edit field
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-1">
|
|
<span id="editVideoVisibilityLabel" class="block text-sm font-medium text-text">
|
|
Visibility
|
|
</span>
|
|
<div
|
|
class="space-y-3 rounded-md border border-border/70 bg-overlay-black/30 p-3"
|
|
role="group"
|
|
aria-labelledby="editVideoVisibilityLabel"
|
|
data-visibility-toggle
|
|
>
|
|
<div class="flex flex-wrap items-center gap-2 sm:justify-between">
|
|
<div
|
|
class="video-visibility-toggle"
|
|
data-visibility-options
|
|
>
|
|
<button
|
|
type="button"
|
|
class="video-visibility-toggle__option focus-ring"
|
|
data-visibility-option="public"
|
|
aria-pressed="false"
|
|
>
|
|
Public
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="video-visibility-toggle__option focus-ring"
|
|
data-visibility-option="private"
|
|
aria-pressed="false"
|
|
>
|
|
Private
|
|
</button>
|
|
</div>
|
|
<input
|
|
type="checkbox"
|
|
id="editVideoIsPrivate"
|
|
class="hidden"
|
|
data-default-checked="false"
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
<p class="text-xs text-muted" data-visibility-helper>
|
|
Private notes stay visible only to you. Switch back to public when you're ready to share.
|
|
</p>
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
|
|
data-edit-target="editVideoIsPrivate"
|
|
>
|
|
Edit field
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<label
|
|
for="editVideoIsNsfw"
|
|
id="editVideoIsNsfwLabel"
|
|
class="block text-sm font-medium text-text"
|
|
>
|
|
NSFW content
|
|
</label>
|
|
<div
|
|
class="form-control"
|
|
role="group"
|
|
aria-labelledby="editVideoIsNsfwLabel"
|
|
>
|
|
<label class="menu__item gap-3 px-0 py-0 text-left" for="editVideoIsNsfw">
|
|
<input
|
|
type="checkbox"
|
|
id="editVideoIsNsfw"
|
|
class="checkbox"
|
|
data-default-checked="false"
|
|
/>
|
|
<span class="text-sm text-muted-strong">
|
|
Mark as sensitive to blur previews and gate playback.
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div class="flex justify-end">
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
|
|
data-edit-target="editVideoIsNsfw"
|
|
>
|
|
Edit field
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<label
|
|
for="editVideoIsForKids"
|
|
id="editVideoIsForKidsLabel"
|
|
class="block text-sm font-medium text-text"
|
|
>
|
|
Made for kids
|
|
</label>
|
|
<div
|
|
class="form-control"
|
|
role="group"
|
|
aria-labelledby="editVideoIsForKidsLabel"
|
|
>
|
|
<label class="menu__item gap-3 px-0 py-0 text-left" for="editVideoIsForKids">
|
|
<input
|
|
type="checkbox"
|
|
id="editVideoIsForKids"
|
|
class="checkbox"
|
|
data-default-checked="false"
|
|
/>
|
|
<span class="text-sm text-muted-strong">
|
|
Flag kid-friendly videos to adjust recommendations and controls.
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div class="flex justify-end">
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
|
|
data-edit-target="editVideoIsForKids"
|
|
>
|
|
Edit field
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<label
|
|
for="editEnableComments"
|
|
id="editEnableCommentsLabel"
|
|
class="block text-sm font-medium text-text"
|
|
>
|
|
Enable comments
|
|
</label>
|
|
<div
|
|
class="form-control"
|
|
role="group"
|
|
aria-labelledby="editEnableCommentsLabel"
|
|
>
|
|
<label class="menu__item gap-3 px-0 py-0 text-left" for="editEnableComments">
|
|
<input
|
|
type="checkbox"
|
|
id="editEnableComments"
|
|
class="checkbox"
|
|
data-default-checked="true"
|
|
checked
|
|
/>
|
|
<span class="text-sm text-muted-strong">
|
|
Allow replies once comment threads are available.
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div class="flex justify-end">
|
|
<button
|
|
type="button"
|
|
class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
|
|
data-edit-target="editEnableComments"
|
|
>
|
|
Edit field
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-3 sm:flex-row sm:justify-end">
|
|
<button
|
|
type="button"
|
|
id="cancelEditVideo"
|
|
class="btn-ghost focus-ring w-full sm:w-auto"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
id="submitEditVideo"
|
|
class="btn focus-ring w-full sm:w-auto"
|
|
>
|
|
Save changes
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|