@adminide-stack/yantra-mobile 12.0.121 → 12.0.123-alpha.0

package/lib/features/canvas/NativeCanvasViewer.js

@@ -1,4 +1,4 @@
-import {jsxs,jsx,Fragment}from'react/jsx-runtime';import React__default,{useState,useEffect,useRef,useMemo,useCallback}from'react';import {StyleSheet,useWindowDimensions,View,Text,Share,TextInput}from'react-native';import {Gesture,GestureHandlerRootView,Pressable,GestureDetector}from'react-native-gesture-handler';import Animated,{useSharedValue,useAnimatedReaction,runOnJS,useAnimatedStyle}from'react-native-reanimated';import {Image}from'expo-image';import {MaterialCommunityIcons}from'@expo/vector-icons';import {getVideoItemRenderer}from'./videoRenderer.js';import {spreadStackedItems,coerceUploadSizedItem,paintOrder,applyItemFrame,MAX_ZOOM,MIN_ZOOM,removeItem,boardBounds,resizeFrame}from'./canvasCore.js';import {CanvasAgentChatPane}from'./CanvasAgentChatPane.js';var __defProp = Object.defineProperty;
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import React__default,{createContext,useState,useEffect,useRef,useMemo,useCallback,useContext}from'react';import {StyleSheet,useWindowDimensions,Alert,Clipboard,Share,View,Text,TextInput}from'react-native';import {Gesture,GestureHandlerRootView,Pressable,GestureDetector}from'react-native-gesture-handler';import Animated,{useSharedValue,useAnimatedReaction,runOnJS,useAnimatedStyle}from'react-native-reanimated';import {Image}from'expo-image';import {MaterialCommunityIcons}from'@expo/vector-icons';import {getVideoItemRenderer}from'./videoRenderer.js';import {spreadStackedItems,coerceUploadSizedItem,paintOrder,applyItemFrame,MAX_ZOOM,MIN_ZOOM,removeItem,boardBounds,resizeFrame}from'./canvasCore.js';import {CanvasAgentChatPane}from'./CanvasAgentChatPane.js';import {ensureItemShareLink,shareableMediaUrl}from'./linksRpc.js';import {renewMediaUrl,useMediaSource,mediaPhaseLabel}from'./useMediaSource.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -18,6 +18,7 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __publicField = (obj, key, value) => __defNormalProp(obj, key + "" , value);
+const MediaRenewContext = createContext(void 0);
 const HANDLE_SLOP = 12;
 const SELECTION_COLOR = "#3b82f6";
 function MediaGlyph({
@@ -52,18 +53,27 @@ class VideoRenderIsland extends React__default.Component {
 function ItemContent({
   item
 }) {
-  var _a;
-  if (item.type === "image") {
-    return /* @__PURE__ */ jsx(Image, { source: {
-      uri: item.src
-    }, style: [StyleSheet.absoluteFill, styles.itemImage], contentFit: "cover", transition: 120, accessibilityLabel: (_a = item.generatedAssetName) != null ? _a : "Canvas image" });
-  }
+  if (item.type === "image") return /* @__PURE__ */ jsx(ImageItemContent, { item });
   const VideoRenderer = item.type === "video" ? getVideoItemRenderer() : null;
   if (VideoRenderer) {
     return /* @__PURE__ */ jsx(VideoRenderIsland, { fallback: /* @__PURE__ */ jsx(MediaGlyph, { item }), children: /* @__PURE__ */ jsx(VideoRenderer, { item }) });
   }
   return /* @__PURE__ */ jsx(MediaGlyph, { item });
 }
+function ImageItemContent({
+  item
+}) {
+  var _a;
+  const renew = useContext(MediaRenewContext);
+  const media = useMediaSource(item.src, "image", renew);
+  const status = mediaPhaseLabel(media.phase);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    media.phase === "broken" ? /* @__PURE__ */ jsx(View, { style: [StyleSheet.absoluteFill, styles.mediaTile], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "image-off-outline", size: 28, color: "#94a3b8" }) }) : /* @__PURE__ */ jsx(Image, { source: {
+      uri: media.src
+    }, style: [StyleSheet.absoluteFill, styles.itemImage], contentFit: "cover", transition: 120, onError: media.onError, accessibilityLabel: (_a = item.generatedAssetName) != null ? _a : "Canvas image" }, media.key),
+    status ? /* @__PURE__ */ jsx(View, { style: styles.mediaStatus, pointerEvents: "none", children: /* @__PURE__ */ jsx(Text, { style: styles.mediaStatusLabel, children: status }) }) : null
+  ] });
+}
 function StaticItem({
   item,
   onTap
@@ -85,6 +95,7 @@ function ItemHoverToolbar({
   item,
   onAction,
   onRemove,
+  onShareLink,
   onChromeTouch
 }) {
   const [moreOpen, setMoreOpen] = useState(false);
@@ -195,7 +206,14 @@ function ItemHoverToolbar({
           /* @__PURE__ */ jsxs(Pressable, { onPress: download, style: styles.moreRow, accessibilityRole: "button", children: [
             /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "download-outline", size: 20, color: "#64748b" }),
             /* @__PURE__ */ jsx(Text, { style: styles.moreLabel, children: "Download" })
-          ] })
+          ] }),
+          onShareLink ? /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
+            setMoreOpen(false);
+            onShareLink();
+          }, style: styles.moreRow, accessibilityRole: "button", children: [
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "link-variant", size: 20, color: "#64748b" }),
+            /* @__PURE__ */ jsx(Text, { style: styles.moreLabel, children: item.share ? "Copy share link" : "Create share link" })
+          ] }) : null
         ] }) : null
       ] })
     ] }),
@@ -217,6 +235,7 @@ function SelectedItem({
   showToolbar,
   onAction,
   onRemove,
+  onShareLink,
   onChromeTouch
 }) {
   const fx = useSharedValue(item.x);
@@ -325,7 +344,7 @@ function SelectedItem({
       /* @__PURE__ */ jsx(View, { style: styles.videoDragGrip })
     ] }) }),
     CORNERS.map((corner, i) => /* @__PURE__ */ jsx(GestureDetector, { gesture: cornerGestures[i], children: /* @__PURE__ */ jsx(View, { style: [styles.handleAnchor, cornerPlacement[corner]], hitSlop: HANDLE_SLOP, children: /* @__PURE__ */ jsx(View, { style: handleStyle }) }) }, corner)),
-    showToolbar ? /* @__PURE__ */ jsx(ItemHoverToolbar, { item, onAction, onRemove, onChromeTouch }) : null
+    showToolbar ? /* @__PURE__ */ jsx(ItemHoverToolbar, { item, onAction, onRemove, onShareLink, onChromeTouch }) : null
   ] });
 }
 function NativeCanvasViewer({
@@ -342,6 +361,7 @@ function NativeCanvasViewer({
   onAgentReplace,
   onSelectionChange,
   onUseTemplate,
+  shareLinks,
   testID
 }) {
   var _a;
@@ -458,6 +478,50 @@ function NativeCanvasViewer({
       items: [...next]
     }));
   }, [board, onBoardChange]);
+  const renewMedia = useMemo(() => renewMediaUrl(runAction), [runAction]);
+  const sharingRef = useRef(false);
+  const handleShareLink = useCallback(async (id) => {
+    const item = items.find((it) => it.id === id);
+    if (!item || !shareLinks || sharingRef.current) return;
+    sharingRef.current = true;
+    let shortUrl;
+    try {
+      const result = await ensureItemShareLink(item, {
+        links: shareLinks,
+        run: runAction
+      });
+      shortUrl = result.share.shortUrl;
+      if (result.changed) {
+        setItems((prev) => {
+          const next = prev.map((it) => it.id === id ? __spreadProps(__spreadValues({}, it), {
+            src: result.src,
+            share: result.share
+          }) : it);
+          const snapshot = __spreadProps(__spreadValues({}, board), {
+            items: next
+          });
+          queueMicrotask(() => onBoardChange == null ? void 0 : onBoardChange(snapshot));
+          return next;
+        });
+      }
+    } catch (err) {
+      Alert.alert("Could not create share link", err instanceof Error ? err.message : void 0);
+      return;
+    } finally {
+      sharingRef.current = false;
+    }
+    Clipboard.setString(shortUrl);
+    Alert.alert("Share link copied", shortUrl, [{
+      text: "Share\u2026",
+      onPress: () => void Share.share({
+        message: shortUrl,
+        url: shortUrl
+      }).catch(() => void 0)
+    }, {
+      text: "OK",
+      style: "cancel"
+    }]);
+  }, [items, shareLinks, runAction, board, onBoardChange]);
   const pan = Gesture.Pan().minDistance(10).averageTouches(true).onStart(() => {
     startTx.value = tx.value;
     startTy.value = ty.value;
@@ -539,12 +603,12 @@ function NativeCanvasViewer({
         });
       }, children: [
         /* @__PURE__ */ jsx(DotGrid, {}),
-        /* @__PURE__ */ jsx(GestureDetector, { gesture, children: /* @__PURE__ */ jsx(View, { style: StyleSheet.absoluteFill, collapsable: false, children: /* @__PURE__ */ jsx(Animated.View, { style: [styles.plane, planeStyle, {
+        /* @__PURE__ */ jsx(GestureDetector, { gesture, children: /* @__PURE__ */ jsx(View, { style: StyleSheet.absoluteFill, collapsable: false, children: /* @__PURE__ */ jsx(MediaRenewContext.Provider, { value: renewMedia, children: /* @__PURE__ */ jsx(Animated.View, { style: [styles.plane, planeStyle, {
           transformOrigin: "0 0"
         }], pointerEvents: "box-none", children: ordered.map((item) => item.id === selectedId ? /* @__PURE__ */ jsx(SelectedItem, { item, cameraScale: scale, onCommit: handleCommit, onTap: onItemPress, showToolbar: controls, onAction: onItemAction, onRemove: () => {
           commitItems(removeItem(items, item.id));
           setSelectedId(null);
-        }, onChromeTouch: armChromeTouch }, item.id) : /* @__PURE__ */ jsx(StaticItem, { item, onTap: handleSelect }, item.id)) }) }) }),
+        }, onShareLink: shareLinks && shareableMediaUrl(item.src) ? () => void handleShareLink(item.id) : void 0, onChromeTouch: armChromeTouch }, item.id) : /* @__PURE__ */ jsx(StaticItem, { item, onTap: handleSelect }, item.id)) }) }) }) }),
         items.length === 0 ? /* @__PURE__ */ jsxs(View, { style: styles.emptyHint, pointerEvents: "none", children: [
           /* @__PURE__ */ jsx(Text, { style: styles.emptyHintTitle, children: "Your canvas is empty" }),
           /* @__PURE__ */ jsx(Text, { style: styles.emptyHintDetail, children: "Tap Generate below for an image, video, audio, slides, clips or a promo." })
@@ -665,6 +729,20 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     backgroundColor: "#e2e8f0"
   },
+  mediaStatus: {
+    position: "absolute",
+    left: 8,
+    bottom: 8,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 6,
+    backgroundColor: "rgba(15,23,42,0.7)"
+  },
+  mediaStatusLabel: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: "#f8fafc"
+  },
   zoomHud: {
     position: "absolute",
     top: 12,