fix: Vimeo and youtube inline option fix (#5017)

Closes #5016

## Description

Since we are lazily initializing the player and using autoplay, players
won't request full screen, so we need to request the fullscreen
ourselves.

1. inline is now false by default 
2. only for mobile/touch, custom logic checks if the device has touch or
has resolution lower than 1024px



## Steps for reproduction

1. add vimeo component
2. put a video url, e.g. https://vimeo.com/1062544169
3. publish
4. play on a touch device or just a resolution smaller than 1024
5. see it goes full screen
6. repeaat the same with youtube
 

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: kof

packages/sdk-components-react/src/vimeo.tsx

@@ -14,6 +14,7 @@ import {
   useContext,
   createContext,
   type ContextType,
+  useRef,
 } from "react";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
 
@@ -246,11 +247,20 @@ 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"
+  "loading" | "autoplay" | "showPreview" | "playsinline"
 > & {
   videoUrl: string;
   title: string | undefined;
@@ -270,10 +280,12 @@ const Player = ({
   autoplay,
   renderer,
   showPreview,
+  playsinline,
   onStatusChange,
   onPreviewImageUrlChange,
 }: PlayerProps) => {
   const [opacity, setOpacity] = useState(0);
+  const ref = useRef<HTMLIFrameElement>(null);
 
   useEffect(() => {
     if (autoplay && renderer !== "canvas" && status === "initial") {
@@ -312,6 +324,7 @@ const Player = ({
 
   return (
     <iframe
+      ref={ref}
       title={title}
       src={videoUrl}
       loading={loading}
@@ -328,6 +341,9 @@ const Player = ({
       onLoad={() => {
         onStatusChange("ready");
         setOpacity(1);
+        if (ref.current && !playsinline && !autoplay) {
+          requestFullscreen(ref.current);
+        }
       }}
     />
   );
@@ -369,7 +385,7 @@ export const Vimeo = forwardRef<Ref, Props>(
       loop = false,
       muted = false,
       pip = false,
-      playsinline = true,
+      playsinline = false,
       showPortrait = true,
       quality = "auto",
       responsive = true,
@@ -440,6 +456,7 @@ export const Vimeo = forwardRef<Ref, Props>(
               <Player
                 title={rest.title}
                 autoplay={autoplay}
+                playsinline={playsinline}
                 videoUrl={videoUrl}
                 previewImageUrl={previewImageUrl}
                 loading={loading}

packages/sdk-components-react/src/vimeo.ws.ts

@@ -42,6 +42,7 @@ const initialProps: Array<keyof ComponentProps<typeof Vimeo>> = [
   "showTitle",
   "showControls",
   "controlsColor",
+  "playsinline",
 ];
 
 export const propsMeta: WsComponentPropsMeta = {

packages/sdk-components-react/src/youtube.tsx

@@ -6,9 +6,10 @@ import {
   type ComponentProps,
   useContext,
   type ContextType,
+  useRef,
 } from "react";
 import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
-import { VimeoContext } from "./vimeo";
+import { VimeoContext, requestFullscreen } from "./vimeo";
 
 /**
  * Options for configuring the YouTube player parameters.
@@ -362,7 +363,7 @@ const EmptyState = () => {
 
 type PlayerProps = Pick<
   YouTubePlayerOptions,
-  "loading" | "autoplay" | "showPreview"
+  "loading" | "autoplay" | "showPreview" | "inline"
 > & {
   videoUrl: string;
   title: string | undefined;
@@ -380,12 +381,14 @@ const Player = ({
   videoUrl,
   previewImageUrl,
   autoplay,
+  inline,
   renderer,
   showPreview,
   onStatusChange,
   onPreviewImageUrlChange,
 }: PlayerProps) => {
   const [opacity, setOpacity] = useState(0);
+  const ref = useRef<HTMLIFrameElement>(null);
 
   useEffect(() => {
     if (autoplay && renderer !== "canvas" && status === "initial") {
@@ -417,6 +420,7 @@ const Player = ({
 
   return (
     <iframe
+      ref={ref}
       title={title}
       src={videoUrl}
       loading={loading}
@@ -433,6 +437,9 @@ const Player = ({
       onLoad={() => {
         onStatusChange("ready");
         setOpacity(1);
+        if (!inline && !autoplay && ref.current) {
+          requestFullscreen(ref.current);
+        }
       }}
     />
   );
@@ -463,6 +470,7 @@ export const YouTube = forwardRef<Ref, Props>(
       showPreview,
       children,
       privacyEnhancedMode,
+      inline = false,
       ...rest
     },
     ref
@@ -478,6 +486,7 @@ export const YouTube = forwardRef<Ref, Props>(
     const videoUrl = getVideoUrl(
       {
         ...rest,
+        inline,
         url,
         autoplay: true,
       },
@@ -508,6 +517,7 @@ export const YouTube = forwardRef<Ref, Props>(
                 videoUrl={videoUrl}
                 previewImageUrl={previewImageUrl}
                 loading={loading}
+                inline={inline}
                 showPreview={showPreview}
                 renderer={renderer}
                 status={status}