mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 07:52:24 +00:00
google-labs-jules[bot]
6e21247505
- Adds --z-modal-always-top: 200 token in css/tokens.css - Adds .modal-always-on-top utility class in css/tailwind.source.css - Applies class to EventDetailsModal, EmbedVideoModal, and ShareNostrModal
126 lines
4.1 KiB
HTML
126 lines
4.1 KiB
HTML
<!-- components/embed-video-modal.html -->
|
|
<div
|
|
id="embedVideoModal"
|
|
class="bv-modal modal-always-on-top hidden items-start justify-center md:items-center"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="embedVideoModalTitle"
|
|
aria-describedby="embedVideoModalDescription"
|
|
data-ds="new"
|
|
>
|
|
<div class="bv-modal-backdrop" data-dismiss></div>
|
|
|
|
<div class="modal-sheet max-h-modal-shell overflow-hidden flex flex-col w-full max-w-2xl" tabindex="-1">
|
|
<div class="modal-header">
|
|
<h2 id="embedVideoModalTitle" class="text-xl font-bold text-text">Embed Video</h2>
|
|
<button
|
|
id="closeEmbedVideoModal"
|
|
class="modal-close"
|
|
type="button"
|
|
aria-label="Close embed modal"
|
|
>
|
|
<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 overflow-y-auto flex-1 min-h-0 custom-scrollbar p-6">
|
|
<p id="embedVideoModalDescription" class="text-sm text-muted">
|
|
Generate an embed snippet to share this video on other sites.
|
|
</p>
|
|
|
|
<fieldset class="space-y-3">
|
|
<legend class="text-sm font-semibold text-text">Playback source</legend>
|
|
<div class="form-control" role="radiogroup" aria-labelledby="embedVideoModalTitle">
|
|
<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="embedVideoSourceCdn">
|
|
<input
|
|
type="radio"
|
|
name="embedVideoSource"
|
|
id="embedVideoSourceCdn"
|
|
value="url"
|
|
class="h-4 w-4 border-border bg-panel text-accent focus:ring-accent"
|
|
/>
|
|
<span class="text-sm text-text">CDN (URL first)</span>
|
|
</label>
|
|
<label class="menu__item gap-3 px-0 py-0" for="embedVideoSourceP2p">
|
|
<input
|
|
type="radio"
|
|
name="embedVideoSource"
|
|
id="embedVideoSourceP2p"
|
|
value="torrent"
|
|
class="h-4 w-4 border-border bg-panel text-accent focus:ring-accent"
|
|
/>
|
|
<span class="text-sm text-text">P2P (Magnet)</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<div class="grid gap-4 sm:grid-cols-2">
|
|
<div class="space-y-2">
|
|
<label for="embedVideoWidth" class="block text-sm font-medium text-text">Width</label>
|
|
<input
|
|
id="embedVideoWidth"
|
|
type="number"
|
|
class="input"
|
|
min="200"
|
|
step="1"
|
|
value="640"
|
|
/>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label for="embedVideoHeight" class="block text-sm font-medium text-text">Height</label>
|
|
<input
|
|
id="embedVideoHeight"
|
|
type="number"
|
|
class="input"
|
|
min="200"
|
|
step="1"
|
|
value="360"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<label for="embedVideoSnippet" class="block text-sm font-medium text-text">
|
|
Embed snippet
|
|
</label>
|
|
<textarea
|
|
id="embedVideoSnippet"
|
|
rows="5"
|
|
class="textarea"
|
|
readonly
|
|
></textarea>
|
|
<p class="text-xs text-muted">
|
|
Paste this HTML into your page. Adjust the size to fit your layout.
|
|
</p>
|
|
<p id="embedVideoStatus" class="text-xs text-muted" role="status" aria-live="polite">
|
|
Embed snippet ready.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer flex flex-col gap-3 border-t border-border bg-panel/30 p-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<button id="cancelEmbedVideo" type="button" class="btn-ghost">
|
|
Close
|
|
</button>
|
|
<button id="copyEmbedVideo" type="button" class="btn-primary">
|
|
Copy
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|