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

Author: vid277

clients/ts-sdk/src/types.gen.ts

@@ -2082,6 +2082,7 @@ export type PublicPageParameters = {
     type?: (string) | null;
     useGroupSearch?: (boolean) | null;
     zIndex?: (number) | null;
+    videoLink?: (string) | null;
 };
 
 export type PublicPageSearchOptions = {

frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx

@@ -625,6 +625,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">

server/src/data/models.rs

@@ -3198,6 +3198,9 @@ impl DatasetConfigurationDTO {
                     z_index: page_parameters_self
                         .z_index
                         .or(page_parameters_curr.z_index),
+                    video_link: page_parameters_self
+                        .video_link
+                        .or(page_parameters_curr.video_link),
                 }),
             },
             DISABLE_ANALYTICS: self

server/src/handlers/page_handler.rs

@@ -246,6 +246,8 @@ pub struct PublicPageParameters {
     pub brand_font_family: Option<String>,
     #[serde(skip_serializing_if = "Option::is_none")]
     pub z_index: Option<i32>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub video_link: Option<String>,
 }
 
 #[utoipa::path(

server/src/public/page.html

@@ -401,7 +401,7 @@
         strokeWidth: 2,
         roughness: 3,
         bowing: 3,
-      }
+      },
     );
 
     const arrowSize = 10;
@@ -413,7 +413,7 @@
       {
         stroke: window.paramsData.brandColor || "black",
         strokeWidth: 2,
-      }
+      },
     );
     rc.line(
       startOpenX - 5,
@@ -423,7 +423,7 @@
       {
         stroke: window.paramsData.brandColor || "black",
         strokeWidth: 2,
-      }
+      },
     );
 
     let endRecX = 0;
@@ -444,7 +444,7 @@
           strokeWidth: 2,
           roughness: 3,
           bowing: 3,
-        }
+        },
       );
 
       rc.line(
@@ -455,7 +455,7 @@
         {
           stroke: window.paramsData.brandColor || "black",
           strokeWidth: 2,
-        }
+        },
       );
       rc.line(
         startRecX - 5,
@@ -465,7 +465,7 @@
         {
           stroke: window.paramsData.brandColor || "black",
           strokeWidth: 2,
-        }
+        },
       );
     }
 

server/static/output.css

@@ -571,6 +571,11 @@ video {
   margin-bottom: -1rem;
 }
 
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -580,10 +585,6 @@ video {
   margin-top: -0.5rem;
 }
 
-.mr-4 {
-  margin-right: 1rem;
-}
-
 .mt-0\.5 {
   margin-top: 0.125rem;
 }
@@ -604,10 +605,6 @@ video {
   margin-top: 1rem;
 }
 
-.mt-40 {
-  margin-top: 10rem;
-}
-
 .mt-6 {
   margin-top: 1.5rem;
 }
@@ -616,13 +613,25 @@ video {
   margin-top: 2rem;
 }
 
+.mr-4 {
+  margin-right: 1rem;
+}
+
+.mt-40 {
+  margin-top: 10rem;
+}
+
 .line-clamp-1 {
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
 }
 
+.block {
+  display: block;
+}
+
 .flex {
   display: flex;
 }
@@ -707,6 +716,10 @@ video {
   cursor: not-allowed;
 }
 
+.resize {
+  resize: both;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -858,6 +871,14 @@ video {
   padding-left: 0.125rem;
 }
 
+.pt-16 {
+  padding-top: 4rem;
+}
+
+.pr-4 {
+  padding-right: 1rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -934,7 +955,8 @@ video {
 }
 
 @media (min-width: 640px) {
-  .sm\:mr-6 {
+  .sm\:mx-6 {
+    margin-left: 1.5rem;
     margin-right: 1.5rem;
   }
 
@@ -946,6 +968,10 @@ video {
     margin-top: 1.5rem;
   }
 
+  .sm\:mr-6 {
+    margin-right: 1.5rem;
+  }
+
   .sm\:max-h-\[30rem\] {
     max-height: 30rem;
   }
@@ -967,6 +993,11 @@ video {
          column-gap: 1.5rem;
   }
 
+  .sm\:px-0 {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
   .sm\:px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -977,6 +1008,14 @@ video {
     padding-bottom: 6rem;
   }
 
+  .sm\:pt-24 {
+    padding-top: 6rem;
+  }
+
+  .sm\:pr-0 {
+    padding-right: 0px;
+  }
+
   .sm\:text-3xl {
     font-size: 1.875rem;
     line-height: 2.25rem;
@@ -990,14 +1029,19 @@ video {
 }
 
 @media (min-width: 1024px) {
-  .lg\:mr-8 {
+  .lg\:mx-8 {
+    margin-left: 2rem;
     margin-right: 2rem;
   }
 
   .lg\:mt-0 {
     margin-top: 0px;
   }
 
+  .lg\:mr-8 {
+    margin-right: 2rem;
+  }
+
   .lg\:flex {
     display: flex;
   }