add html iframe webcam support

Author: softmarshmallow

packages/builder-web-core/widgets-native/html-iframe-webcam/index.ts

@@ -0,0 +1,29 @@
+import { HtmlIframe } from "../html-iframe";
+import type { IIframeProps } from "../html-iframe";
+import type { IWHStyleWidget } from "@reflect-ui/core";
+import type { WidgetKey } from "../../widget-key";
+
+const webcamurl = "https://frames-appbox.vercel.app/webcam";
+
+type WebcamProps = Omit<IIframeProps, "src" | "srcDoc"> & {};
+
+export class HtmlIframeWebcam extends HtmlIframe {
+  constructor({
+    key,
+    allow = "camera",
+    loading = "lazy",
+    referrerpolicy = "no-referrer-when-downgrade",
+    sandbox = ["allow-scripts", "allow-same-origin"],
+    ...rest
+  }: { key: WidgetKey } & WebcamProps & IWHStyleWidget) {
+    super({
+      key,
+      ...rest,
+      allow,
+      loading,
+      sandbox,
+      referrerpolicy,
+      src: webcamurl,
+    });
+  }
+}

packages/builder-web-core/widgets-native/index.ts

@@ -14,6 +14,7 @@ export { HtmlIframeGoogleMaps as GoogleMaps } from "./html-iframe-googlemaps";
 export { HtmlIframeOpenStreetMap as OpenStreetMap } from "./html-iframe-osm";
 export { HtmlIframeYoutube as Youtube } from "./html-iframe-youtube";
 export { HtmlIframeFigma as EmbedFigma } from "./html-iframe-figma";
+export { HtmlIframeWebcam as Webcam } from "./html-iframe-webcam";
 export * from "./error-widget";
 
 export * from "@web-builder/core/widget-tree/widget";

packages/designto-token/support-flags/index.ts

@@ -19,8 +19,8 @@ import { tokenize_flagged_slider } from "./token-slider";
 import { tokenize_flagged_progress } from "./token-progress";
 
 import { tokenize_flagged_google_maps_view } from "./token-x-google-maps-view";
-import { tokenize_gradient_direction_from_angle } from "../token-gradient";
 import { tokenize_flagged_youtube_view } from "./token-x-youtube-view";
+import { tokenize_flagged_camera_view } from "./token-x-camera-display";
 
 export default function handleWithFlags(node: ReflectSceneNode) {
   const flags = parse(node.name);
@@ -81,6 +81,11 @@ function _handle_with_flags(node, flags: FlagsParseResult) {
       flags[keys.flag_key__x_youtube_view]
     );
   }
+
+  if (flags.__meta?.contains_camera_flag) {
+    return tokenize_flagged_camera_view(node, flags[keys.flag_key__camera]);
+  }
+
   // #end exetnded views
 
   // #region element altering flags

packages/designto-token/support-flags/token-x-camera-display/index.ts

@@ -0,0 +1,59 @@
+import type {
+  ReflectFrameNode,
+  ReflectGroupNode,
+  ReflectRectangleNode,
+  ReflectSceneNode,
+} from "@design-sdk/figma-node";
+import type { Container } from "@reflect-ui/core";
+import { tokenizeLayout } from "../../token-layout";
+import { tokenizeContainer } from "../../token-container";
+import { unwrappedChild } from "../../wrappings";
+import type { CameraDisplayFlag } from "@code-features/flags";
+import { WrappingContainer, XCameraDisplayView } from "../../tokens";
+import assert from "assert";
+import { keyFromNode } from "../../key";
+
+export function tokenize_flagged_camera_view(
+  node: ReflectSceneNode,
+  flag: CameraDisplayFlag
+) {
+  if (!flag.value) {
+    return;
+  }
+
+  try {
+    node = validate_input(node);
+    const _key = keyFromNode(node);
+
+    const container = unwrappedChild(
+      node.type === "RECTANGLE"
+        ? tokenizeContainer.fromRectangle(node)
+        : tokenizeLayout.fromFrameOrGroup(node, [], { is_root: false }, {})
+    ) as Container;
+
+    return new WrappingContainer({
+      ...container,
+      key: keyFromNode(node),
+      child: new XCameraDisplayView({
+        key: _key,
+        ...container,
+      }),
+    });
+  } catch (e) {
+    throw new Error(`failed to tokenize camera display view: ${e.message}`);
+  }
+}
+
+type CameraDisplayCompatNodeType =
+  | ReflectFrameNode
+  | ReflectGroupNode
+  | ReflectRectangleNode;
+
+function validate_input(node: ReflectSceneNode): CameraDisplayCompatNodeType {
+  assert(
+    node.type === "FRAME" || node.type === "GROUP" || node.type === "RECTANGLE",
+    `camera display view target input must be a frame, group or rectangle, but "${node.type}" was given`
+  );
+
+  return node;
+}

packages/designto-token/tokens/index.ts

@@ -1,6 +1,7 @@
 export * from "./stretched";
 export * from "./wrapping-container";
 
+export * from "./x-camera-display-view";
 export * from "./x-figma-embed-view";
 export * from "./x-google-maps-view";
 export * from "./x-osm-view";

packages/designto-token/tokens/x-camera-display-view/index.ts

@@ -0,0 +1,8 @@
+import { Container, WidgetKey } from "@reflect-ui/core";
+
+export class XCameraDisplayView extends Container {
+  readonly _type = "x/camera-display-view";
+  constructor({ key }: { key: WidgetKey } & {}) {
+    super({ key });
+  }
+}

packages/designto-token/tokens/x-youtube-view/index.ts

@@ -1,6 +1,6 @@
-import { Container, WidgetKey } from "@reflect-ui/core";
+import { Widget, WidgetKey } from "@reflect-ui/core";
 
-export class XYoutubeView extends Container {
+export class XYoutubeView extends Widget {
   readonly _type = "x/youtube-view";
   readonly video: string;
   constructor({

packages/designto-web/tokens-to-web-widget/compose-xtended-views.ts

@@ -8,23 +8,40 @@ export function compose_xtended_views(
     | special.XFigmaEmbedView
     | special.XGoogleMapsView
     | special.XOSMView
-    | special.XYoutubeView,
+    | special.XYoutubeView
+    | special.XCameraDisplayView,
   container?: core.Container
 ) {
   if (widget instanceof special.XFigmaEmbedView) {
     throw new Error("not implemented");
   }
 
   if (widget instanceof special.XGoogleMapsView) {
-    return new web.GoogleMaps({ ...(container ?? {}), ...widget, key });
+    return new web.GoogleMaps({
+      ...(container ?? ({} as core.Container)),
+      ...widget,
+      key,
+    });
   }
 
   if (widget instanceof special.XOSMView) {
     throw new Error("not implemented");
   }
 
   if (widget instanceof special.XYoutubeView) {
-    return new web.Youtube({ ...(container ?? {}), ...widget, key });
+    return new web.Youtube({
+      ...(container ?? ({} as core.Container)),
+      ...widget,
+      key,
+    });
+  }
+
+  if (widget instanceof special.XCameraDisplayView) {
+    return new web.Webcam({
+      ...(container ?? ({} as core.Container)),
+      ...widget,
+      key,
+    });
   }
 
   throw new Error("not implemented");

packages/support-flags/--camera-display/index.ts

@@ -0,0 +1,8 @@
+export const flag_key__camera = "camera";
+
+export const flag_key_alias__camera = [flag_key__camera];
+
+export interface CameraDisplayFlag {
+  flag: typeof flag_key__camera;
+  value: boolean;
+}

packages/support-flags/keys.ts

@@ -30,6 +30,8 @@ import { flag_key_alias__fix_height, flag_key__fix_height } from "./--fix-height
 
 import { flag_key_alias__declare, flag_key__declare } from "./--declare";
 
+// prettier-ignore
+import { flag_key_alias__camera, flag_key__camera } from "./--camera-display";
 import { flag_key_alias__video, flag_key__video } from "./--video";
 import { flag_key_alias__webview, flag_key__webview } from "./--webview";
 // prettier-ignore
@@ -79,6 +81,7 @@ export { flag_key__fix_width, flag_key__fix_height };
 export { flag_key__declare };
 
 export {
+  flag_key__camera,
   flag_key__video,
   flag_key__webview,
   flag_key__x_figma_embed_view,
@@ -110,6 +113,7 @@ export const alias = {
   fix_width: flag_key_alias__fix_width,
   fix_height: flag_key_alias__fix_height,
   declare: flag_key_alias__declare,
+  camera: flag_key_alias__camera,
   video: flag_key_alias__video,
   webview: flag_key_alias__webview,
   x_figma_embed_view: flag_key_alias__x_figma_embed_view,