video field ui

sparkboard · Dec 19, 2023 · 94fbbd1 · 94fbbd1
1 parent 2f91722
commit 94fbbd1
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 35 deletions.
diff --git a/src/sb/app/field/ui.cljc b/src/sb/app/field/ui.cljc
@@ -185,14 +185,14 @@
   )
 
 (ui/defview show-video [url]
-  [:a.bg-black.w-full.aspect-video.flex.items-center.justify-center.group.relative
+  [:a.bg-black.w-full.aspect-video.flex.items-center.justify-center.relative
    {:href   url
     :target "_blank"
     :style  {:background-image    (asset.ui/css-url (:video/thumbnail (parse-video-url url)))
              :background-size     "cover"
              :background-position "center"}}
-   [icons/external-link "absolute text-white top-2 right-2 icon-sm drop-shadow"]
-   [icons/play-circle "icon-xl text-white drop-shadow-2xl transition-all group-hover:scale-110 "]])
+   [:div.rounded.p-1.absolute.top-1.right-1.text-white {:class "hover:bg-black/20"} [icons/external-link " icon-lg drop-shadow"]]
+   [icons/play-circle "icon-xl w-20 h-20 text-white drop-shadow-2xl transition-all hover:scale-110 "]])
 
 (ui/defview video-field
   {:key (fn [?field] #?(:cljs (goog/getUid ?field)))}
@@ -202,18 +202,17 @@
      ;; preview shows persisted value?
      [:div.flex.items-center
       [:div.flex-auto (form.ui/show-label ?field (:label props))]
-      (when can-edit?
-        [:div.place-self-end [:a {:on-click #(swap! !editing? not)}
-                              [(if @!editing? icons/dash icons/chevron-down) "icon-gray"]]])]
-
-     (when (and can-edit? @!editing?)
+      #_(when can-edit?
+          [:div.place-self-end [:a {:on-click #(swap! !editing? not)}
+                                [(if @!editing? icons/chevron-up icons/chevron-down) "icon-gray"]]])]
+     (when-let [url (:video/url @?field)]
+       [show-video url])
+     (when can-edit?
        (text-field ?field (merge props
-                                 {:label       nil
+                                 {:label       false
                                   :placeholder "YouTube or Vimeo url"
                                   :wrap        (partial hash-map :video/url)
-                                  :unwrap      :video/url})))
-     (when-let [url (:video/url @?field)]
-       [show-video url])]))
+                                  :unwrap      :video/url})))]))
 
 (ui/defview select-field [?field {:as props :keys [label options]}]
   [:div.field-wrapper

diff --git a/src/sb/app/form/ui.cljc b/src/sb/app/form/ui.cljc
@@ -31,7 +31,7 @@
 
 (defn show-label [?field & [label]]
   (when-let [label (u/some-or label (:label ?field))]
-    [:label.field-label {:for   (field-id ?field)} label]))
+    [:label.field-label {:for (field-id ?field)} label]))
 
 (defn ?field-props [?field
                     get-value

diff --git a/src/sb/app/project/ui.cljc b/src/sb/app/project/ui.cljc
@@ -122,7 +122,6 @@
         entries (->> project :entity/field-entries)]
     [:<>
      dev-panel
-     (str roles)
      [:div.flex-v.gap-6.pb-6
       ;; title row
       [:div.flex
@@ -156,14 +155,13 @@
              :when (or can-edit?
                        (field.data/entry-value field entry))]
          (field.ui/show-entry {:parent    project
-                            :can-edit? can-edit?
-                            :field     field
-                            :entry     entry}))
+                               :can-edit? can-edit?
+                               :field     field
+                               :entry     entry}))
        [:section.flex-v.gap-2.items-start
         [manage-community-actions project (:project/community-actions project)]]
        (when video
-         [:section [:h3 (tr :tr/video)]
-          [field.ui/show-video video]])]]]))
+         [field.ui/show-video video])]]]))
 
 (ui/defview new
   {:route       "/new/p/:board-id"

diff --git a/src/sparkboard.css b/src/sparkboard.css
@@ -154,22 +154,6 @@
         @apply cursor-grab active:cursor-grabbing
     }
 
-    .icon-sm {
-        @apply w-[15px] h-[15px]
-    }
-
-    .icon-md {
-        @apply w-[18.75px] h-[18.75px]
-    }
-
-    .icon-lg {
-        @apply w-[22.5px] h-[22.5px]
-    }
-
-    .icon-xl {
-        @apply w-[30px] h-[30px]
-    }
-
     .icon-gray {
         @apply text-gray-500 hover:text-black focus-ring
     }
@@ -256,6 +240,23 @@
 
 @layer components {
 
+    .icon-sm {
+        @apply w-[15px] h-[15px]
+    }
+
+    .icon-md {
+        @apply w-[18.75px] h-[18.75px]
+    }
+
+    .icon-lg {
+        @apply w-[22.5px] h-[22.5px]
+    }
+
+    .icon-xl {
+        @apply w-[30px] h-[30px]
+    }
+
+
     .menu-darken {
         @apply hover:bg-black/5 data-[state=open]:bg-black/5
     }