Working youtube

webstudio-is · Jan 8, 2025 · 07eb4ee · 07eb4ee
1 parent ba8cccf
commit 07eb4ee
Show file tree

Hide file tree

Showing 9 changed files with 146 additions and 3 deletions.
diff --git a/packages/sdk-components-react/src/components.ts b/packages/sdk-components-react/src/components.ts
@@ -29,6 +29,7 @@ export { Textarea } from "./textarea";
 export { RadioButton } from "./radio-button";
 export { Checkbox } from "./checkbox";
 export { Vimeo } from "./vimeo";
+export { YouTube } from "./youtube";
 export { VimeoPreviewImage } from "./vimeo-preview-image";
 export { VimeoPlayButton } from "./vimeo-play-button";
 export { VimeoSpinner } from "./vimeo-spinner";

diff --git a/packages/sdk-components-react/src/metas.ts b/packages/sdk-components-react/src/metas.ts
@@ -29,6 +29,7 @@ export { meta as Textarea } from "./textarea.ws";
 export { meta as RadioButton } from "./radio-button.ws";
 export { meta as Checkbox } from "./checkbox.ws";
 export { meta as Vimeo } from "./vimeo.ws";
+export { meta as YouTube } from "./youtube.ws";
 export { meta as VimeoPreviewImage } from "./vimeo-preview-image.ws";
 export { meta as VimeoPlayButton } from "./vimeo-play-button.ws";
 export { meta as VimeoSpinner } from "./vimeo-spinner.ws";

diff --git a/packages/sdk-components-react/src/props.ts b/packages/sdk-components-react/src/props.ts
@@ -29,6 +29,7 @@ export { propsMeta as Textarea } from "./textarea.ws";
 export { propsMeta as RadioButton } from "./radio-button.ws";
 export { propsMeta as Checkbox } from "./checkbox.ws";
 export { propsMeta as Vimeo } from "./vimeo.ws";
+export { propsMeta as YouTube } from "./youtube.ws";
 export { propsMeta as VimeoPreviewImage } from "./vimeo-preview-image.ws";
 export { propsMeta as VimeoPlayButton } from "./vimeo-play-button.ws";
 export { propsMeta as VimeoSpinner } from "./vimeo-spinner.ws";

diff --git a/packages/sdk-components-react/src/templates.ts b/packages/sdk-components-react/src/templates.ts
@@ -12,4 +12,5 @@ export { meta as Label } from "./label.template";
 export { meta as RadioButton } from "./radio-button.template";
 export { meta as Checkbox } from "./checkbox.template";
 export { meta as Vimeo } from "./vimeo.template";
+export { meta as YouTube } from "./youtube.template";
 export { meta as Select } from "./select.template";
diff --git a/packages/sdk-components-react/src/vimeo-play-button.ws.ts b/packages/sdk-components-react/src/vimeo-play-button.ws.ts
@@ -19,7 +19,7 @@ export const meta: WsComponentMeta = {
   constraints: [
     {
       relation: "ancestor",
-      component: { $eq: "Vimeo" },
+      component: { $in: ["Vimeo", "YouTube"] },
     },
     {
       relation: "ancestor",

diff --git a/packages/sdk-components-react/src/vimeo-preview-image.ws.ts b/packages/sdk-components-react/src/vimeo-preview-image.ws.ts
@@ -8,7 +8,7 @@ export const meta: WsComponentMeta = {
   label: "Preview Image",
   constraints: {
     relation: "ancestor",
-    component: { $eq: "Vimeo" },
+    component: { $in: ["Vimeo", "YouTube"] },
   },
 };
 

diff --git a/packages/sdk-components-react/src/vimeo-spinner.ws.ts b/packages/sdk-components-react/src/vimeo-spinner.ws.ts
@@ -16,7 +16,7 @@ export const meta: WsComponentMeta = {
   type: "container",
   constraints: {
     relation: "ancestor",
-    component: { $eq: "Vimeo" },
+    component: { $in: ["Vimeo", "YouTube"] },
   },
   icon: BoxIcon,
   states: defaultStates,

diff --git a/packages/sdk-components-react/src/youtube.template.tsx b/packages/sdk-components-react/src/youtube.template.tsx
@@ -0,0 +1,81 @@
+import { PlayIcon, SpinnerIcon } from "@webstudio-is/icons/svg";
+import { type TemplateMeta, $, css } from "@webstudio-is/template";
+
+export const meta: TemplateMeta = {
+  category: "media",
+  order: 1,
+  description:
+    "Add a video to your page that is hosted on Vimeo. Paste a Vimeo URL and configure the video in the Settings tab.",
+  template: (
+    <$.YouTube
+      ws:style={css`
+        position: relative;
+        aspect-ratio: 640/360;
+        width: 100%;
+      `}
+    >
+      <$.VimeoPreviewImage
+        ws:label="Preview Image"
+        ws:style={css`
+          position: absolute;
+          object-fit: cover;
+          object-position: cover;
+          width: 100%;
+          height: 100%;
+          border-radius: 20px;
+        `}
+        alt="Vimeo video preview image"
+        sizes="100vw"
+      />
+      <$.VimeoSpinner
+        ws:label="Spinner"
+        ws:style={css`
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          width: 70px;
+          height: 70px;
+          margin-top: -35px;
+          margin-left: -35px;
+        `}
+      >
+        <$.HtmlEmbed ws:label="Spinner SVG" code={SpinnerIcon} />
+      </$.VimeoSpinner>
+      <$.VimeoPlayButton
+        ws:label="Play Button"
+        ws:style={css`
+          position: absolute;
+          width: 140px;
+          height: 80px;
+          top: 50%;
+          left: 50%;
+          margin-top: -40px;
+          margin-left: -70px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-style: none;
+          border-radius: 5px;
+          cursor: pointer;
+          background-color: rgb(18, 18, 18);
+          color: rgb(255, 255, 255);
+          &:hover {
+            background-color: rgb(0, 173, 239);
+          }
+        `}
+        aria-label="Play button"
+      >
+        <$.Box
+          ws:label="Play Icon"
+          ws:style={css`
+            width: 60px;
+            height: 60px;
+          `}
+          aria-hidden={true}
+        >
+          <$.HtmlEmbed ws:label="Play SVG" code={PlayIcon} />
+        </$.Box>
+      </$.VimeoPlayButton>
+    </$.YouTube>
+  ),
+};
diff --git a/packages/sdk-components-react/src/youtube.ws.ts b/packages/sdk-components-react/src/youtube.ws.ts
@@ -0,0 +1,58 @@
+import type { ComponentProps } from "react";
+import { Youtube1cIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/sdk";
+import { div } from "@webstudio-is/sdk/normalize.css";
+import { props } from "./__generated__/youtube.props";
+import type { YouTube } from "./youtube";
+
+const presetStyle = {
+  div,
+} satisfies PresetStyle<"div">;
+
+export const meta: WsComponentMeta = {
+  type: "container",
+  icon: Youtube1cIcon,
+  states: defaultStates,
+  presetStyle,
+  constraints: {
+    relation: "ancestor",
+    component: { $nin: ["Button", "Link", "Heading"] },
+  },
+};
+
+const initialProps: Array<keyof ComponentProps<typeof YouTube>> = [
+  "id",
+  "className",
+  "url",
+  "loading",
+  "showPreview",
+  "autoplay",
+  "showControls",
+  "showRelatedVideos",
+  "keyboard",
+  "loop",
+  "playsinline",
+  "allowFullscreen",
+  "showCaptions",
+  "showAnnotations",
+  "startTime",
+  "endTime",
+  "disableKeyboard",
+  "referrer",
+  "listType",
+  "listId",
+  "origin",
+  "captionLanguage",
+  "language",
+  "color",
+];
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+  initialProps,
+};