feature: add video link field to public page settings + ts sdk

devflowinc · Dec 21, 2024 · 1b97741 · 1b97741
1 parent a55ff0a
commit 1b97741
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 3 deletions.
diff --git a/clients/ts-sdk/src/types.gen.ts b/clients/ts-sdk/src/types.gen.ts
@@ -2102,6 +2102,7 @@ export type PublicPageParameters = {
     useGroupSearch?: (boolean) | null;
     usePagefind?: (boolean) | null;
     zIndex?: (number) | null;
+    videoLink?: (string) | null;
 };
 
 export type PublicPageSearchOptions = {

diff --git a/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx b/frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx
@@ -663,6 +663,23 @@ const PublicPageControls = () => {
               options={Object.keys(HeroPatterns)}
             />
           </div>
+          <div class="grow">
+            <div class="flex items-center gap-1">
+              <label class="block">Video Link</label>
+              <Tooltip
+                tooltipText="Text shown in the search box before user input"
+                body={<FaRegularCircleQuestion class="h-3 w-3 text-black" />}
+              />
+            </div>
+            <input
+              placeholder="Insert video link..."
+              value={extraParams.videoLink || ""}
+              onInput={(e) => {
+                setExtraParams("videoLink", e.currentTarget.value);
+              }}
+              class="block w-full rounded border border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
+            />
+          </div>
         </div>
         <Show when={extraParams["heroPattern"]?.heroPatternName !== "Blank"}>
           <div class="flex flex-row items-center justify-start gap-4 pt-4">

diff --git a/server/src/data/models.rs b/server/src/data/models.rs
@@ -3257,6 +3257,9 @@ impl DatasetConfigurationDTO {
                     use_pagefind: page_parameters_self
                         .use_pagefind
                         .or(page_parameters_curr.use_pagefind),
+                    video_link: page_parameters_self
+                        .video_link
+                        .or(page_parameters_curr.video_link),
                 }),
             },
             DISABLE_ANALYTICS: self

diff --git a/server/src/handlers/page_handler.rs b/server/src/handlers/page_handler.rs
@@ -256,6 +256,8 @@ pub struct PublicPageParameters {
     pub hide_drawn_text: Option<bool>,
     #[serde(skip_serializing_if = "Option::is_none")]
     pub use_pagefind: Option<bool>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub video_link: Option<String>,
 }
 
 #[utoipa::path(

diff --git a/server/src/public/page.html b/server/src/public/page.html
@@ -372,6 +372,48 @@
           brackets: ["left"],
         });
       }
+    const openTrieveRect = openTrieveModalElement.getBoundingClientRect();
+    let endOpenX = openTrieveRect.right + 138;
+    let endOpenY = openTrieveRect.bottom + 45;
+    if (endOpenX > window.innerWidth) {
+      endOpenX = window.innerWidth - 125;
+      endOpenY += 15;
+    }
+    const startOpenX = openTrieveRect.right + 60;
+    const startOpenY = openTrieveRect.bottom - 15;
+
+    rc.path(
+      `M ${startOpenX} ${startOpenY}
+         Q ${startOpenX + 85} ${endOpenY - 85} ${endOpenX} ${endOpenY}`,
+      {
+        stroke: window.paramsData.brandColor || "black",
+        strokeWidth: 2,
+        roughness: 3,
+        bowing: 3,
+      },
+    );
+
+    const arrowSize = 10;
+    rc.line(
+      startOpenX - 5,
+      startOpenY,
+      startOpenX + arrowSize,
+      startOpenY + arrowSize,
+      {
+        stroke: window.paramsData.brandColor || "black",
+        strokeWidth: 2,
+      },
+    );
+    rc.line(
+      startOpenX - 5,
+      startOpenY,
+      startOpenX + arrowSize,
+      startOpenY - arrowSize,
+      {
+        stroke: window.paramsData.brandColor || "black",
+        strokeWidth: 2,
+      },
+    );
 
       const circleSearchAnimation = annotate(openTrieveModalElement, {
         type: "circle",
@@ -414,7 +456,7 @@
           strokeWidth: 2,
           roughness: 3,
           bowing: 3,
-        }
+        },
       );
 
       const arrowSize = 10;
@@ -426,7 +468,7 @@
         {
           stroke: window.paramsData.brandColor || "black",
           strokeWidth: 2,
-        }
+        },
       );
       rc.line(
         startOpenX - 5,
@@ -436,7 +478,7 @@
         {
           stroke: window.paramsData.brandColor || "black",
           strokeWidth: 2,
-        }
+        },
       );
 
       let endRecX = 0;

diff --git a/server/static/output.css b/server/static/output.css
@@ -612,6 +612,10 @@ video {
   margin-top: 2rem;
 }
 
+.mt-0\.5 {
+  margin-top: 0.125rem;
+}
+
 .line-clamp-1 {
   overflow: hidden;
   display: -webkit-box;
@@ -796,6 +800,11 @@ video {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -904,6 +913,16 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }