add support video embed

Author: williamstein

src/packages/next/components/support/create.tsx

@@ -26,6 +26,7 @@ import getBrowserInfo from "./browser-info";
 import RecentFiles from "./recent-files";
 import { Type } from "./tickets";
 import { NoZendesk } from "./util";
+import { VideoItem } from "components/videos";
 
 const CHATGPT_DISABLED = true;
 const MIN_BODY_LENGTH = 16;
@@ -140,23 +141,30 @@ export default function Create() {
         </Title>
         {showExtra && (
           <>
-            <p style={{ fontSize: "12pt" }}>
-              Create a new support ticket below or{" "}
-              <A href="/support/tickets">
-                check the status of your support tickets
-              </A>
-              .{" "}
-              {helpEmail ? (
-                <>
-                  You can also email us directly at{" "}
-                  <A href={`mailto:${helpEmail}`}>{helpEmail}</A> or{" "}
-                  <A href="https://calendly.com/cocalc/discovery">
-                    book a demo or discovery call
-                  </A>
-                  .
-                </>
-              ) : undefined}
-            </p>
+            <Space>
+              <p style={{ fontSize: "12pt" }}>
+                Create a new support ticket below or{" "}
+                <A href="/support/tickets">
+                  check the status of your support tickets
+                </A>
+                .{" "}
+                {helpEmail ? (
+                  <>
+                    You can also email us directly at{" "}
+                    <A href={`mailto:${helpEmail}`}>{helpEmail}</A> or{" "}
+                    <A href="https://calendly.com/cocalc/discovery">
+                      book a demo or discovery call
+                    </A>
+                    .
+                  </>
+                ) : undefined}
+              </p>
+              <VideoItem
+                width={600}
+                style={{ margin: "15px 0", width: "600px" }}
+                id={"4Ef9sxX59XM"}
+              />
+            </Space>
             {openaiEnabled && onCoCalcCom && !CHATGPT_DISABLED ? (
               <ChatGPT siteName={siteName} />
             ) : undefined}

src/packages/next/components/videos.tsx

@@ -34,39 +34,47 @@ export default function Videos({ videos }: { videos: Readonly<Video[]> }) {
   );
 }
 
-function VideoItem({
+export function VideoItem({
   id,
   title,
-  number,
-  current,
+  number = 0,
+  current = 0,
+  style,
+  width = 672,
 }: {
   id: string;
-  title: string;
+  title?: string;
   number: number;
   current: number;
+  style?;
+  width?: number;
 }) {
   return (
-    <div>
+    <div style={style}>
       <div
         style={{
           background: "black",
           paddingBottom: "30px",
           paddingTop: "5px",
         }}
       >
-        <A style={{ color: "white" }} href={`https://youtu.be/${id}`}>
-          <Icon name="youtube" style={{ color: "red" }} /> {title}
-        </A>
-        <iframe
-          style={{ marginTop: "30px", maxWidth: "100%" }}
-          width="672"
-          height="378"
-          src={`https://www.youtube.com/embed/${current == number ? id : ""}`}
-          title="YouTube video player"
-          frameBorder={0}
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          allowFullScreen
-        ></iframe>
+        {title && (
+          <A style={{ color: "white" }} href={`https://youtu.be/${id}`}>
+            <Icon name="youtube" style={{ color: "red" }} /> {title}
+          </A>
+        )}
+        <div style={{ textAlign: "center" }}>
+          <iframe
+            style={{ marginTop: "30px", maxWidth: "100%" }}
+            width={width}
+            height={(width * 9) / 16}
+            src={`https://www.youtube.com/embed/${current == number ? id : ""}`}
+            title="YouTube video player"
+            frameBorder={0}
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+          ></iframe>
+        </div>
         <A
           style={{ color: "white", float: "right", marginRight: "10px" }}
           href="https://www.youtube.com/@cocalc-cloud"

src/packages/next/pages/support/index.tsx

@@ -7,7 +7,7 @@ import A from "components/misc/A";
 import ChatGPTHelp from "components/openai/chatgpt-help";
 import { Customize } from "lib/customize";
 import withCustomize from "lib/with-customize";
-
+import { VideoItem } from "components/videos";
 import IndexList, { DataSource } from "components/landing/index-list";
 import { Title } from "components/misc";
 import SanitizedMarkdown from "components/misc/sanitized-markdown";
@@ -26,6 +26,11 @@ const dataSource = [
         </A>
         . You do NOT have to be a paying customer to open a ticket, though we
         prioritize customer requests.
+        <VideoItem
+          width={800}
+          style={{ margin: "15px 0" }}
+          id={"4Ef9sxX59XM"}
+        />
       </>
     ),
   },