From f69111ece45e8a0479647a876220640ec8d4c28d Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Mon, 28 Apr 2025 09:45:55 +0100 Subject: [PATCH 1/2] build: Release 28-04-2025 From f355c84bd8e59b939edf2ecf3dab633fdcb92b5f Mon Sep 17 00:00:00 2001 From: Bogdan Chadkin Date: Thu, 1 May 2025 19:36:16 +0400 Subject: [PATCH 2/2] fix: remove invalid properties from Vimeo component (#5176) We accidentally added wrong properties by exporting a function with iframe type. --- .../src/__generated__/vimeo.props.ts | 531 ++++++++---------- .../sdk-components-react/src/shared/video.ts | 21 + .../src/vimeo-play-button.tsx | 12 +- .../src/vimeo-preview-image.tsx | 6 +- .../src/vimeo-spinner.tsx | 6 +- packages/sdk-components-react/src/vimeo.tsx | 36 +- packages/sdk-components-react/src/youtube.tsx | 6 +- 7 files changed, 275 insertions(+), 343 deletions(-) create mode 100644 packages/sdk-components-react/src/shared/video.ts diff --git a/packages/sdk-components-react/src/__generated__/vimeo.props.ts b/packages/sdk-components-react/src/__generated__/vimeo.props.ts index 56adcce4620f..a750d7b75044 100644 --- a/packages/sdk-components-react/src/__generated__/vimeo.props.ts +++ b/packages/sdk-components-react/src/__generated__/vimeo.props.ts @@ -1,447 +1,374 @@ import type { PropMeta } from "@webstudio-is/sdk"; export const props: Record = { + about: { required: false, control: "text", type: "string" }, accessKey: { - description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/accessKey)", - required: true, + required: false, control: "text", type: "string", + description: "Keyboard shortcut to activate or add focus to the element.", }, - accessKeyLabel: { - description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/accessKeyLabel)", - required: true, + autoCapitalize: { + required: false, control: "text", type: "string", - }, - align: { description: - "Sets or retrieves how the object is aligned with adjacent text.", - required: true, - control: "text", - type: "string", + "Sets whether input is automatically capitalized when entered by user.", }, - allow: { + autoCorrect: { required: false, control: "text", type: "string" }, + autoFocus: { + required: false, + control: "boolean", + type: "boolean", description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLIFrameElement/allow)", - required: true, - control: "text", - type: "string", + "Indicates that an element should be focused on page load, or when its parent dialog is displayed.", }, - allowFullscreen: { + autopause: { description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLIFrameElement/allowFullscreen)", - required: true, + "Whether to pause the current video when another Vimeo video on the same page starts to play. Set this value to false to permit simultaneous playback of all the videos on the page. This option has no effect if you've disabled cookies in your browser, either through browser settings or with an extension or plugin.", + required: false, control: "boolean", type: "boolean", + defaultValue: true, }, - autocapitalize: { + autopip: { description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/autocapitalize)", - required: true, - control: "text", - type: "string", + "Whether to enable the browser to enter picture-in-picture mode automatically when switching tabs or windows, where supported.", + required: false, + control: "boolean", + type: "boolean", }, - autofocus: { + autoplay: { description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/autofocus)", - required: true, + "Whether to start playback of the video automatically. This feature might not work on all devices.\nSome browsers require the `muted` parameter to be set to `true` for autoplay to work.", + required: false, control: "boolean", type: "boolean", + defaultValue: false, }, - baseURI: { + autoSave: { required: false, control: "text", type: "string" }, + backgroundMode: { description: - "Returns node's node document's document base URL.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/baseURI)", - required: true, - control: "text", - type: "string", + "Whether the player is in background mode, which hides the playback controls, enables autoplay, and loops the video.", + required: false, + control: "boolean", + type: "boolean", }, - childElementCount: { + className: { required: false, control: "text", type: "string" }, + color: { + required: false, + control: "color", + type: "string", description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/childElementCount)", - required: true, - control: "number", - type: "number", + "This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format. Note: This is a legacy attribute. Please use the CSS color property instead.", }, - className: { - description: - "Returns the value of element's class content attribute. Can be set to change it.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/className)", - required: true, + content: { + required: false, control: "text", type: "string", - }, - clientHeight: { - description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/clientHeight)", - required: true, - control: "number", - type: "number", - }, - clientLeft: { description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/clientLeft)", - required: true, - control: "number", - type: "number", + "A value associated with http-equiv orname depending on the context.", }, - clientTop: { - description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/clientTop)", - required: true, - control: "number", - type: "number", - }, - clientWidth: { - description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/clientWidth)", - required: true, - control: "number", - type: "number", - }, - contentEditable: { - description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/contentEditable)", - required: true, + contextMenu: { + required: false, control: "text", type: "string", + description: + "Defines the ID of a menu element which willserve as the element's context menu.", }, - currentCSSZoom: { + controlsColor: { description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/currentCSSZoom)", - required: true, - control: "number", - type: "number", + "A color value of the playback controls, which is normally #00ADEF. The embed settings of the video might override this value.", + required: false, + control: "color", + type: "string", }, + datatype: { required: false, control: "text", type: "string" }, + defaultChecked: { required: false, control: "boolean", type: "boolean" }, + defaultValue: { required: false, control: "text", type: "string" }, dir: { - description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/dir)", - required: true, + required: false, control: "text", type: "string", + description: + "Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)", }, - draggable: { + doNotTrack: { description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/draggable)", - required: true, + "Whether to prevent the player from tracking session data, including cookies. Keep in mind that setting this argument to true also blocks video stats.", + required: false, control: "boolean", type: "boolean", + defaultValue: false, }, - enterKeyHint: { - description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/enterKeyHint)", - required: true, - control: "text", - type: "string", - }, - frameBorder: { - description: "Sets or retrieves whether to display a border for the frame.", - required: true, - control: "text", - type: "string", - }, - height: { - description: - "Sets or retrieves the height of the object.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLIFrameElement/height)", - required: true, - control: "text", - type: "string", + draggable: { + required: false, + control: "boolean", + type: "boolean", + description: "Defines whether the element can be dragged.", }, hidden: { - description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/hidden)", - required: true, + required: false, control: "boolean", type: "boolean", + description: + "Prevents rendering of given element, while keeping child elements, e.g. script elements, active.", }, id: { - description: - "Returns the value of element's id content attribute. Can be set to change it.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/id)", - required: true, + required: false, control: "text", type: "string", - }, - inert: { description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/inert)", - required: true, - control: "boolean", - type: "boolean", + "Often used with CSS to style a specific element. The value of this attribute must be unique.", }, - innerHTML: { + inputMode: { description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/innerHTML)", - required: true, - control: "text", + "Hints at the type of data that might be entered by the user while editing the element or its contents", + required: false, + control: "select", type: "string", + options: [ + "search", + "text", + "url", + "none", + "tel", + "email", + "numeric", + "decimal", + ], }, - innerText: { + interactiveParams: { description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/innerText)", - required: true, + "Key-value pairs representing dynamic parameters that are utilized on interactive videos with live elements, such as title=my-video,subtitle=interactive.", + required: false, control: "text", type: "string", }, - inputMode: { + is: { description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/inputMode)", - required: true, + "Specify that a standard HTML element should behave like a defined custom built-in element", + required: false, control: "text", type: "string", }, - isConnected: { - description: - "Returns true if node is connected and false otherwise.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/isConnected)", - required: true, - control: "boolean", - type: "boolean", - }, - isContentEditable: { + itemID: { required: false, control: "text", type: "string" }, + itemProp: { required: false, control: "text", type: "string" }, + itemRef: { required: false, control: "text", type: "string" }, + itemScope: { required: false, control: "boolean", type: "boolean" }, + itemType: { required: false, control: "text", type: "string" }, + keyboard: { description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/isContentEditable)", - required: true, + "Whether to enable keyboard input to trigger player events. This setting doesn't affect tab control.", + required: false, control: "boolean", type: "boolean", + defaultValue: true, }, lang: { - description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/lang)", - required: true, + required: false, control: "text", type: "string", + description: "Defines the language used in the element.", }, loading: { description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLIFrameElement/loading)", + "Not a Vimeo attribute: Loading attribute for the iframe allows to eager or lazy load the source", required: false, - control: "text", + control: "radio", type: "string", defaultValue: "lazy", + options: ["eager", "lazy"], }, - localName: { + loop: { description: - "Returns the local name.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/localName)", - required: true, - control: "text", - type: "string", - }, - longDesc: { - description: "Sets or retrieves a URI to a long description of the object.", - required: true, - control: "text", - type: "string", - }, - marginHeight: { - description: - "Sets or retrieves the top and bottom margin heights before displaying the text in a frame.", - required: true, - control: "text", - type: "string", - }, - marginWidth: { - description: - "Sets or retrieves the left and right margin widths before displaying the text in a frame.", - required: true, - control: "text", - type: "string", + "Whether to restart the video automatically after reaching the end.", + required: false, + control: "boolean", + type: "boolean", + defaultValue: false, }, - name: { + muted: { description: - "Sets or retrieves the frame name.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLIFrameElement/name)", - required: true, - control: "text", - type: "string", + "Whether the video is muted upon loading. The true value is required for the autoplay behavior in some browsers.", + required: false, + control: "boolean", + type: "boolean", + defaultValue: false, }, - nodeName: { + nonce: { required: false, control: "text", type: "string" }, + pip: { description: - "Returns a string appropriate for the type of node.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/nodeName)", - required: true, - control: "text", - type: "string", + "Whether to include the picture-in-picture button among the player controls and enable the picture-in-picture API.", + required: false, + control: "boolean", + type: "boolean", + defaultValue: false, }, - nodeType: { + playsinline: { description: - "Returns the type of node.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/nodeType)", - required: true, - control: "number", - type: "number", + "Whether the video plays inline on supported mobile devices. To force the device to play the video in fullscreen mode instead, set this value to false.", + required: false, + control: "boolean", + type: "boolean", + defaultValue: false, }, - nonce: { + prefix: { required: false, control: "text", type: "string" }, + property: { required: false, control: "text", type: "string" }, + quality: { description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/nonce)", + "For videos on a Vimeo Plus account or higher: the playback quality of the video. Use auto for the best possible quality given available bandwidth and other factors. You can also specify 360p, 540p, 720p, 1080p, 2k, and 4k.", required: false, - control: "text", + control: "select", type: "string", + defaultValue: "auto", + options: ["auto", "360p", "540p", "720p", "1080p", "2k", "4k"], }, - offsetHeight: { - description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/offsetHeight)", - required: true, - control: "number", - type: "number", - }, - offsetLeft: { - description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/offsetLeft)", - required: true, - control: "number", - type: "number", - }, - offsetTop: { - description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/offsetTop)", - required: true, - control: "number", - type: "number", - }, - offsetWidth: { - description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/offsetWidth)", - required: true, - control: "number", - type: "number", - }, - outerHTML: { - description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/outerHTML)", - required: true, + radioGroup: { required: false, control: "text", type: "string" }, + rel: { + required: false, control: "text", type: "string", - }, - outerText: { description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/outerText)", - required: true, - control: "text", - type: "string", + "Specifies the relationship of the target object to the link object.", }, - referrerPolicy: { + resource: { required: false, control: "text", type: "string" }, + responsive: { description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLIFrameElement/referrerPolicy)", - required: true, - control: "select", - type: "string", - options: [ - "", - "no-referrer", - "no-referrer-when-downgrade", - "origin", - "origin-when-cross-origin", - "same-origin", - "strict-origin", - "strict-origin-when-cross-origin", - "unsafe-url", - ], + "Whether to return a responsive embed code, or one that provides intelligent adjustments based on viewing conditions. We recommend this option for mobile-optimized sites.", + required: false, + control: "boolean", + type: "boolean", + defaultValue: true, }, + results: { required: false, control: "number", type: "number" }, + rev: { required: false, control: "text", type: "string" }, role: { - required: true, + required: false, control: "text", type: "string", description: "Defines an explicit role for an element for use by assistive technologies.", }, - scrollHeight: { - description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollHeight)", - required: true, - control: "number", - type: "number", - }, - scrolling: { - description: "Sets or retrieves whether the frame can be scrolled.", - required: true, - control: "text", - type: "string", + security: { required: false, control: "text", type: "string" }, + showByline: { + description: "Whether to display the video owner's name.", + required: false, + control: "boolean", + type: "boolean", + defaultValue: false, }, - scrollLeft: { + showControls: { description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollLeft)", - required: true, - control: "number", - type: "number", + "Whether to display the player's interactive elements, including the play bar and sharing buttons. Set this option to false for a chromeless experience. To control playback when the play/pause button is hidden, set autoplay to true, use keyboard controls (which remain active), or implement our player SDK.", + required: false, + control: "boolean", + type: "boolean", + defaultValue: true, }, - scrollTop: { + showPortrait: { description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollTop)", - required: true, - control: "number", - type: "number", + "Whether to display the video owner's portrait. Only works if either title or byline are also enabled", + required: false, + control: "boolean", + type: "boolean", + defaultValue: true, }, - scrollWidth: { + showPreview: { description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/scrollWidth)", - required: true, - control: "number", - type: "number", + "Not a Vimeo attribute: Whether the preview image should be loaded from Vimeo API. Ideally don't use it, because it will show up with some delay and will make your project feel slower.", + required: false, + control: "boolean", + type: "boolean", + defaultValue: false, + }, + showTitle: { + description: "Whether the player displays the title overlay.", + required: false, + control: "boolean", + type: "boolean", + defaultValue: false, }, slot: { - description: - "Returns the value of element's slot content attribute. Can be set to change it.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/slot)", - required: true, + required: false, control: "text", type: "string", + description: "Assigns a slot in a shadow DOM shadow tree to an element.", }, - spellcheck: { + speed: { description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/spellcheck)", - required: true, + "Whether the player displays speed controls in the preferences menu and enables the playback rate API.", + required: false, control: "boolean", type: "boolean", + defaultValue: false, }, - src: { - description: - "Sets or retrieves a URL to be loaded by the object.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLIFrameElement/src)", - required: true, - control: "text", - type: "string", + spellCheck: { + required: false, + control: "boolean", + type: "boolean", + description: "Indicates whether spell checking is allowed for the element.", }, - srcdoc: { - description: - "Sets or retrives the content of the page that is to contain.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLIFrameElement/srcdoc)", - required: true, - control: "text", - type: "string", + suppressContentEditableWarning: { + required: false, + control: "boolean", + type: "boolean", + }, + suppressHydrationWarning: { + required: false, + control: "boolean", + type: "boolean", }, tabIndex: { - description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/tabIndex)", - required: true, + required: false, control: "number", type: "number", + description: + "Overrides the browser's default tab order and follows the one specified instead.", }, - tagName: { + texttrack: { description: - "Returns the HTML-uppercased qualified name.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/tagName)", - required: true, + "The text track to display with the video. Specify the text track by its language code (en), the language code and locale (en-US), or the language code and kind (en.captions). For this argument to work, the video must already have a text track of the given type; see our Help Center or Working with Text Track Uploads for more information.\nTo enable automatically generated closed captions instead, provide the value en-x-autogen. Please note that, at the present time, automatic captions are always in English.", + required: false, control: "text", type: "string", }, title: { description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/title)", - required: true, + 'The `title` attribute for the iframe.\nImproves accessibility by providing a brief description of the video content for screen readers.\nExample: "Video about web development tips".', + required: false, control: "text", type: "string", }, translate: { + required: false, + control: "radio", + type: "string", + options: ["yes", "no"], description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/translate)", - required: true, + "Specify whether an element's attribute values and the values of its text node children are to be translated when the page is localized, or whether to leave them unchanged.", + }, + transparent: { + description: + "Whether the responsive player and transparent background are enabled.", + required: false, control: "boolean", type: "boolean", + defaultValue: true, }, - width: { - description: - "Sets or retrieves the width of the object.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLIFrameElement/width)", - required: true, - control: "text", + typeof: { required: false, control: "text", type: "string" }, + unselectable: { + required: false, + control: "radio", type: "string", + options: ["on", "off"], }, - writingSuggestions: { + url: { description: - "[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/writingSuggestions)", - required: true, + "The ID or the URL of the video on Vimeo. You must supply one of these values to identify the video. When the video's privacy setting is Private, you must use the URL, and the URL must include the h parameter. For more information, see Vimeo’s introductory guide.", + required: false, control: "text", type: "string", }, + vocab: { required: false, control: "text", type: "string" }, }; diff --git a/packages/sdk-components-react/src/shared/video.ts b/packages/sdk-components-react/src/shared/video.ts new file mode 100644 index 000000000000..78a8551d8dcb --- /dev/null +++ b/packages/sdk-components-react/src/shared/video.ts @@ -0,0 +1,21 @@ +import { createContext } from "react"; + +export const requestFullscreen = (element: HTMLIFrameElement) => { + const isTouchDevice = "ontouchstart" in window; + // Allows it to work on small screens on desktop too and makes it easy to test. + const isMobileResolution = window.matchMedia("(max-width: 1024px)").matches; + if (isMobileResolution || isTouchDevice) { + element.requestFullscreen(); + } +}; + +export type PlayerStatus = "initial" | "loading" | "ready"; + +export const VideoContext = createContext<{ + previewImageUrl?: URL; + onInitPlayer: () => void; + status: PlayerStatus; +}>({ + onInitPlayer: () => {}, + status: "initial", +}); diff --git a/packages/sdk-components-react/src/vimeo-play-button.tsx b/packages/sdk-components-react/src/vimeo-play-button.tsx index 0567d6eb7249..f17be1841db5 100644 --- a/packages/sdk-components-react/src/vimeo-play-button.tsx +++ b/packages/sdk-components-react/src/vimeo-play-button.tsx @@ -5,9 +5,9 @@ import { useContext, useCallback, } from "react"; -import { VimeoContext } from "./vimeo"; -import { Button, defaultTag } from "./button"; import interactionResponse from "await-interaction-response"; +import { Button, defaultTag } from "./button"; +import { VideoContext } from "./shared/video"; export { defaultTag }; @@ -15,14 +15,14 @@ type Props = ComponentProps; export const VimeoPlayButton = forwardRef, Props>( (props, ref) => { - const vimeoContext = useContext(VimeoContext); + const videoContext = useContext(VideoContext); const handleClick = useCallback(async () => { await interactionResponse(); - vimeoContext.onInitPlayer(); - }, [vimeoContext]); + videoContext.onInitPlayer(); + }, [videoContext]); - if (vimeoContext.status !== "initial") { + if (videoContext.status !== "initial") { return; } diff --git a/packages/sdk-components-react/src/vimeo-preview-image.tsx b/packages/sdk-components-react/src/vimeo-preview-image.tsx index 22bf5c60e668..0ea210cdea78 100644 --- a/packages/sdk-components-react/src/vimeo-preview-image.tsx +++ b/packages/sdk-components-react/src/vimeo-preview-image.tsx @@ -5,7 +5,7 @@ import { useContext, } from "react"; import { Image, defaultTag } from "./image"; -import { VimeoContext } from "./vimeo"; +import { VideoContext } from "./shared/video"; // Generated using https://png-pixel.com/ const base64Preview = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkOAMAANIAzr59FiYAAAAASUVORK5CYII=`; @@ -16,12 +16,12 @@ export const VimeoPreviewImage = forwardRef< ElementRef, Props >(({ src, ...rest }, ref) => { - const vimeoContext = useContext(VimeoContext); + const videoContext = useContext(VideoContext); return ( ); diff --git a/packages/sdk-components-react/src/vimeo-spinner.tsx b/packages/sdk-components-react/src/vimeo-spinner.tsx index 28d470573f66..5746018fc9dd 100644 --- a/packages/sdk-components-react/src/vimeo-spinner.tsx +++ b/packages/sdk-components-react/src/vimeo-spinner.tsx @@ -4,7 +4,7 @@ import { type ComponentProps, useContext, } from "react"; -import { VimeoContext } from "./vimeo"; +import { VideoContext } from "./shared/video"; const defaultTag = "div"; @@ -12,9 +12,9 @@ type Props = ComponentProps; export const VimeoSpinner = forwardRef, Props>( (props, ref) => { - const vimeoContext = useContext(VimeoContext); + const videoContext = useContext(VideoContext); - if (vimeoContext.status !== "loading") { + if (videoContext.status !== "loading") { return; } diff --git a/packages/sdk-components-react/src/vimeo.tsx b/packages/sdk-components-react/src/vimeo.tsx index 161c043eda9d..bac64c6f8cc5 100644 --- a/packages/sdk-components-react/src/vimeo.tsx +++ b/packages/sdk-components-react/src/vimeo.tsx @@ -6,17 +6,21 @@ import { colord } from "colord"; import { + type ElementRef, + type ComponentProps, + type ContextType, forwardRef, useState, useEffect, - type ElementRef, - type ComponentProps, useContext, - createContext, - type ContextType, useRef, } from "react"; import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime"; +import { + requestFullscreen, + VideoContext, + type PlayerStatus, +} from "./shared/video"; // https://developer.vimeo.com/player/sdk/embed type VimeoPlayerOptions = { @@ -247,17 +251,6 @@ const EmptyState = () => { ); }; -export const requestFullscreen = (element: HTMLIFrameElement) => { - const isTouchDevice = "ontouchstart" in window; - // Allows it to work on small screens on desktop too and makes it easy to test. - const isMobileResolution = window.matchMedia("(max-width: 1024px)").matches; - if (isMobileResolution || isTouchDevice) { - element.requestFullscreen(); - } -}; - -type PlayerStatus = "initial" | "loading" | "ready"; - type PlayerProps = Pick< VimeoOptions, "loading" | "autoplay" | "showPreview" | "playsinline" @@ -349,15 +342,6 @@ const Player = ({ ); }; -export const VimeoContext = createContext<{ - previewImageUrl?: URL; - onInitPlayer: () => void; - status: PlayerStatus; -}>({ - onInitPlayer: () => {}, - status: "initial", -}); - const defaultTag = "div"; type Props = Omit, keyof VimeoOptions> & @@ -429,7 +413,7 @@ export const Vimeo = forwardRef( }); return ( - ( )} - + ); } ); diff --git a/packages/sdk-components-react/src/youtube.tsx b/packages/sdk-components-react/src/youtube.tsx index 65ae5e3537df..1c6e5d58a934 100644 --- a/packages/sdk-components-react/src/youtube.tsx +++ b/packages/sdk-components-react/src/youtube.tsx @@ -9,7 +9,7 @@ import { useRef, } from "react"; import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime"; -import { VimeoContext, requestFullscreen } from "./vimeo"; +import { VideoContext, requestFullscreen } from "./shared/video"; /** * Options for configuring the YouTube player parameters. @@ -518,7 +518,7 @@ export const YouTube = forwardRef( ); return ( - ( )} - + ); } );