From 73f7a5d6e90e4e1feaf4443ecf8384cae4a76f85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nu=C5=A1a=20Puk=C5=A1i=C4=8D?= <nusa.puksic@gmail.com>
Date: Mon, 6 Oct 2025 17:15:03 +0200
Subject: [PATCH] Styles

---
 assets/app.js                               |   1 +
 assets/styles/03-components/video-event.css | 145 ++++++++++++++++++++
 assets/styles/04-pages/admin.css            |   4 -
 templates/event/_kind22_video.html.twig     |  12 +-
 templates/event/index.html.twig             |   3 +-
 5 files changed, 154 insertions(+), 11 deletions(-)
 create mode 100644 assets/styles/03-components/video-event.css

diff --git a/assets/app.js b/assets/app.js
index 09a520f..bd6291b 100644
--- a/assets/app.js
+++ b/assets/app.js
@@ -31,6 +31,7 @@ import './styles/03-components/og.css';
 import './styles/03-components/nostr-previews.css';
 import './styles/03-components/nip05-badge.css';
 import './styles/03-components/picture-event.css';
+import './styles/03-components/video-event.css';
 import './styles/03-components/search.css';
 import './styles/03-components/image-upload.css';
 
diff --git a/assets/styles/03-components/video-event.css b/assets/styles/03-components/video-event.css
new file mode 100644
index 0000000..dc7cf4c
--- /dev/null
+++ b/assets/styles/03-components/video-event.css
@@ -0,0 +1,145 @@
+/**
+ * Video Event Component (NIP-71)
+ * Responsive video player for kind 22 events
+ */
+
+.video-event {
+    width: 100%;
+    overflow: hidden;
+    margin-bottom: var(--spacing-2);
+}
+
+.video-gallery {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-3);
+}
+
+.video-gallery.hidden {
+    display: none;
+}
+
+.video-item {
+    width: 100%;
+    position: relative;
+}
+
+.video-player {
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+    display: block;
+    background-color: #000;
+}
+
+.video-alt {
+    margin-top: var(--spacing-2);
+    font-size: 0.9em;
+    color: var(--color-text-secondary, #666);
+    font-style: italic;
+}
+
+.content-warning {
+    padding: var(--spacing-3);
+    background-color: var(--color-warning-bg, #fff3cd);
+    border: 1px solid var(--color-warning-border, #ffc107);
+    border-radius: 4px;
+    margin-bottom: var(--spacing-3);
+}
+
+.content-warning strong {
+    display: block;
+    margin-bottom: var(--spacing-2);
+    color: var(--color-warning-text, #856404);
+}
+
+.btn-show-nsfw {
+    margin-top: var(--spacing-2);
+    padding: var(--spacing-2) var(--spacing-3);
+    background-color: var(--color-primary, #007bff);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.9em;
+}
+
+.btn-show-nsfw:hover {
+    background-color: var(--color-primary-hover, #0056b3);
+}
+
+.video-description {
+    margin-top: var(--spacing-3);
+    padding: 0 var(--spacing-2);
+}
+
+.video-duration,
+.video-published {
+    margin-top: var(--spacing-2);
+    font-size: 0.9em;
+    color: var(--color-text-secondary, #666);
+    padding: 0 var(--spacing-2);
+}
+
+.duration-icon {
+    margin-right: var(--spacing-1);
+}
+
+.video-hashtags {
+    margin-top: var(--spacing-3);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-2);
+    padding: 0 var(--spacing-2);
+}
+
+.video-hashtags .hashtag {
+    display: inline-block;
+    padding: var(--spacing-1) var(--spacing-2);
+    background-color: var(--color-bg-light, #f8f9fa);
+    border-radius: 12px;
+    font-size: 0.85em;
+    color: var(--color-primary, #007bff);
+}
+
+.video-participants {
+    margin-top: var(--spacing-3);
+    padding-top: var(--spacing-3);
+    border-top: 1px solid var(--color-border, #dee2e6);
+}
+
+.video-participants h4 {
+    margin-bottom: var(--spacing-2);
+    font-size: 1em;
+    font-weight: 600;
+}
+
+.participants-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-2);
+}
+
+/* Ensure videos don't overflow their container */
+.card .video-event,
+.article .video-event {
+    max-width: 100%;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .video-player {
+        border-radius: 2px;
+    }
+
+    .video-hashtags {
+        gap: var(--spacing-1);
+    }
+
+    .video-hashtags .hashtag {
+        font-size: 0.8em;
+        padding: 4px 8px;
+    }
+}
+
diff --git a/assets/styles/04-pages/admin.css b/assets/styles/04-pages/admin.css
index cb678d3..7705c2b 100644
--- a/assets/styles/04-pages/admin.css
+++ b/assets/styles/04-pages/admin.css
@@ -122,10 +122,6 @@
     white-space: nowrap;
 }
 /* NIP-68 Picture Event Styles */
-.picture-event {
-    margin: 1rem 0;
-}
-
 .picture-title {
     font-size: 1.5rem;
     margin-bottom: 1rem;
diff --git a/templates/event/_kind22_video.html.twig b/templates/event/_kind22_video.html.twig
index 1465aa2..e0746b2 100644
--- a/templates/event/_kind22_video.html.twig
+++ b/templates/event/_kind22_video.html.twig
@@ -8,10 +8,6 @@
         {% endif %}
     {% endfor %}
 
-    {% if title %}
-        <h2 class="video-title">{{ title }}</h2>
-    {% endif %}
-
     {# Content warning #}
     {% set contentWarning = null %}
     {% for tag in event.tags %}
@@ -38,6 +34,7 @@
             {% set dimensions = null %}
             {% set altText = null %}
             {% set previewImage = null %}
+            {% set blurhash = null %}
             {% set fallbacks = [] %}
 
             {# Parse imeta tag parameters #}
@@ -51,6 +48,8 @@
                     {% endif %}
                 {% elseif param starts with 'image ' %}
                     {% set previewImage = param[6:] %}
+                {% elseif param starts with 'blurhash ' %}
+                    {% set blurhash = param[9:] %}
                 {% elseif param starts with 'm ' %}
                     {% set mimeType = param[2:] %}
                 {% elseif param starts with 'dim ' %}
@@ -71,6 +70,9 @@
                     <video controls
                            {% if previewImage %}poster="{{ previewImage }}"{% endif %}
                            {% if dimensions %}data-dimensions="{{ dimensions }}"{% endif %}
+                           {% if blurhash %}data-blurhash="{{ blurhash }}"{% endif %}
+                           {% if title %}title="{{ title }}"{% endif %}
+                           aria-label="{{ altText|default(title)|default('Video') }}"
                            class="video-player"
                            preload="metadata">
                         <source src="{{ videoUrl }}" {% if mimeType %}type="{{ mimeType }}"{% endif %} />
@@ -91,7 +93,7 @@
 
     {# Description from content #}
     {% if event.content %}
-        <div class="video-description mt-1">
+        <div class="video-description">
             <twig:Atoms:Content :content="event.content" />
         </div>
     {% endif %}
diff --git a/templates/event/index.html.twig b/templates/event/index.html.twig
index 8532645..4df8f36 100644
--- a/templates/event/index.html.twig
+++ b/templates/event/index.html.twig
@@ -101,8 +101,7 @@
     .event-header {
         display: flex;
         justify-content: space-between;
-        align-items: flex-start;
-        margin-bottom: 1.5rem;
+        align-items: center;
         border-bottom: 1px solid #eee;
         padding: 1rem;
     }