cuoral-ionic 0.0.1

package/dist/web.js

@@ -0,0 +1,107 @@
+import { WebPlugin } from '@capacitor/core';
+/**
+ * Web implementation (for testing in browser)
+ */
+export class CuoralPluginWeb extends WebPlugin {
+    constructor() {
+        super(...arguments);
+        this.isRecording = false;
+    }
+    async startRecording(options) {
+        console.log('[Cuoral Web] Start recording', options);
+        // Check if Screen Capture API is available
+        if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
+            throw new Error('Screen recording is not supported in this browser');
+        }
+        try {
+            // Request screen capture
+            const stream = await navigator.mediaDevices.getDisplayMedia({
+                video: true,
+                audio: options?.includeAudio || false,
+            });
+            this.isRecording = true;
+            this.recordingStartTime = Date.now();
+            // Store stream for later stopping
+            window.__cuoralRecordingStream = stream;
+            return { success: true };
+        }
+        catch (error) {
+            console.error('[Cuoral Web] Failed to start recording:', error);
+            return { success: false };
+        }
+    }
+    async stopRecording() {
+        console.log('[Cuoral Web] Stop recording');
+        if (!this.isRecording) {
+            return { success: false };
+        }
+        const stream = window.__cuoralRecordingStream;
+        if (stream) {
+            stream.getTracks().forEach(track => track.stop());
+            delete window.__cuoralRecordingStream;
+        }
+        const duration = this.recordingStartTime
+            ? Math.floor((Date.now() - this.recordingStartTime) / 1000)
+            : 0;
+        this.isRecording = false;
+        this.recordingStartTime = undefined;
+        return {
+            success: true,
+            duration,
+            filePath: 'web-recording-not-saved',
+        };
+    }
+    async getRecordingState() {
+        return {
+            isRecording: this.isRecording,
+            duration: this.recordingStartTime
+                ? Math.floor((Date.now() - this.recordingStartTime) / 1000)
+                : undefined,
+        };
+    }
+    async takeScreenshot(options) {
+        console.log('[Cuoral Web] Take screenshot', options);
+        try {
+            // Use Screen Capture API
+            const stream = await navigator.mediaDevices.getDisplayMedia({
+                video: { width: 1920, height: 1080 },
+            });
+            // Capture frame from video stream
+            const video = document.createElement('video');
+            video.srcObject = stream;
+            video.play();
+            await new Promise(resolve => {
+                video.onloadedmetadata = resolve;
+            });
+            const canvas = document.createElement('canvas');
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            const ctx = canvas.getContext('2d');
+            ctx?.drawImage(video, 0, 0);
+            // Stop stream
+            stream.getTracks().forEach(track => track.stop());
+            // Convert to base64
+            const format = options?.format || 'png';
+            const quality = options?.quality || 0.92;
+            const base64 = canvas.toDataURL(`image/${format}`, quality);
+            return {
+                base64: base64.split(',')[1],
+                mimeType: `image/${format}`,
+                width: canvas.width,
+                height: canvas.height,
+            };
+        }
+        catch (error) {
+            console.error('[Cuoral Web] Failed to take screenshot:', error);
+            throw error;
+        }
+    }
+    async isRecordingSupported() {
+        const supported = !!(navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia);
+        return { supported };
+    }
+    async requestPermissions() {
+        // Web doesn't require explicit permissions - they're requested on demand
+        return { granted: true };
+    }
+}

package/ios/Plugin/CuoralPlugin.m

@@ -0,0 +1,11 @@
+#import <Foundation/Foundation.h>
+#import <Capacitor/Capacitor.h>
+
+CAP_PLUGIN(CuoralPlugin, "CuoralPlugin",
+    CAP_PLUGIN_METHOD(startRecording, CAPPluginReturnPromise);
+    CAP_PLUGIN_METHOD(stopRecording, CAPPluginReturnPromise);
+    CAP_PLUGIN_METHOD(getRecordingState, CAPPluginReturnPromise);
+    CAP_PLUGIN_METHOD(takeScreenshot, CAPPluginReturnPromise);
+    CAP_PLUGIN_METHOD(isRecordingSupported, CAPPluginReturnPromise);
+    CAP_PLUGIN_METHOD(requestPermissions, CAPPluginReturnPromise);
+)

package/ios/Plugin/CuoralPlugin.swift

@@ -0,0 +1,246 @@
+import Foundation
+import Capacitor
+import ReplayKit
+import AVFoundation
+
+/**
+ * Cuoral Plugin for iOS
+ * Handles screen recording and screenshot capture
+ */
+@objc(CuoralPlugin)
+public class CuoralPlugin: CAPPlugin {
+    private var isRecording = false
+    private var recordingStartTime: Date?
+    private var videoOutputURL: URL?
+    private let recorder = RPScreenRecorder.shared()
+    private var assetWriter: AVAssetWriter?
+    private var videoInput: AVAssetWriterInput?
+    private var firstFrameTime: CMTime?
+    
+    @objc public func startRecording(_ call: CAPPluginCall) {
+        // Force cleanup any stale state first
+        if isRecording {
+            recorder.stopCapture { _ in }
+            isRecording = false
+            assetWriter?.cancelWriting()
+            assetWriter = nil
+            videoInput = nil
+            videoOutputURL = nil
+            recordingStartTime = nil
+            firstFrameTime = nil
+        }
+        
+        guard !isRecording else {
+            call.resolve(["success": false, "error": "Already recording"])
+            return
+        }
+        
+        // Check if recording is available
+        guard recorder.isAvailable else {
+            call.reject("Screen recording is not available")
+            return
+        }
+        
+        // Get options
+        let includeAudio = call.getBool("includeAudio") ?? false
+        
+        // Setup output URL
+        let documentsPath = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask)[0]
+        let timestamp = Int(Date().timeIntervalSince1970)
+        videoOutputURL = documentsPath.appendingPathComponent("cuoral_recording_\(timestamp).mp4")
+        
+        guard let outputURL = videoOutputURL else {
+            call.reject("Failed to create output URL")
+            return
+        }
+        
+        // Setup asset writer
+        do {
+            assetWriter = try AVAssetWriter(url: outputURL, fileType: .mp4)
+            
+            let videoSettings: [String: Any] = [
+                AVVideoCodecKey: AVVideoCodecType.h264,
+                AVVideoWidthKey: UIScreen.main.bounds.width * UIScreen.main.scale,
+                AVVideoHeightKey: UIScreen.main.bounds.height * UIScreen.main.scale
+            ]
+            
+            videoInput = AVAssetWriterInput(mediaType: .video, outputSettings: videoSettings)
+            videoInput?.expectsMediaDataInRealTime = true
+            
+            if let videoInput = videoInput, assetWriter?.canAdd(videoInput) == true {
+                assetWriter?.add(videoInput)
+            }
+            
+            // Don't start session yet - wait for first frame
+            assetWriter?.startWriting()
+            firstFrameTime = nil  // Reset first frame time
+            
+        } catch {
+            call.reject("Failed to setup video writer: \(error.localizedDescription)")
+            return
+        }
+        
+        // Start recording
+        recorder.isMicrophoneEnabled = includeAudio
+        
+        recorder.startCapture(handler: { [weak self] sampleBuffer, bufferType, error in
+            guard let self = self, self.isRecording else { return }
+            
+            if let error = error {
+                return
+            }
+            
+            if bufferType == .video, let videoInput = self.videoInput, videoInput.isReadyForMoreMediaData {
+                // Start session on first frame
+                if self.firstFrameTime == nil {
+                    let presentationTime = CMSampleBufferGetPresentationTimeStamp(sampleBuffer)
+                    self.firstFrameTime = presentationTime
+                    self.assetWriter?.startSession(atSourceTime: presentationTime)
+                }
+                videoInput.append(sampleBuffer)
+            }
+            
+        }) { [weak self] error in
+            guard let self = self else { return }
+            
+            if let error = error {
+                call.reject("Failed to start recording: \(error.localizedDescription)")
+                return
+            }
+            
+            self.isRecording = true
+            self.recordingStartTime = Date()
+            
+            call.resolve(["success": true])
+        }
+    }
+    
+    @objc public func stopRecording(_ call: CAPPluginCall) {
+        guard isRecording else {
+            // Try to cleanup any stale state
+            recorder.stopCapture { _ in }
+            assetWriter?.cancelWriting()
+            assetWriter = nil
+            videoInput = nil
+            videoOutputURL = nil
+            recordingStartTime = nil
+            firstFrameTime = nil
+            
+            call.resolve(["success": false, "error": "Not recording"])
+            return
+        }
+        
+        isRecording = false
+        
+        recorder.stopCapture { [weak self] error in
+            guard let self = self else { return }
+            
+            if let error = error {
+                // Cleanup even on error
+                self.assetWriter?.cancelWriting()
+                self.assetWriter = nil
+                self.videoInput = nil
+                self.videoOutputURL = nil
+                self.recordingStartTime = nil
+                self.firstFrameTime = nil
+                
+                call.reject("Failed to stop recording: \(error.localizedDescription)")
+                return
+            }
+            
+            // Finalize the video file
+            self.videoInput?.markAsFinished()
+            self.assetWriter?.finishWriting { [weak self] in
+                guard let self = self else { return }
+                
+                let duration = self.recordingStartTime.map { Date().timeIntervalSince($0) } ?? 0
+                let filePath = self.videoOutputURL?.path ?? ""
+                
+                call.resolve([
+                    "success": true,
+                    "filePath": filePath,
+                    "duration": Int(duration)
+                ])
+                
+                // Clean up
+                self.assetWriter = nil
+                self.videoInput = nil
+                self.videoOutputURL = nil
+                self.recordingStartTime = nil
+                self.firstFrameTime = nil
+            }
+        }
+    }
+    
+    @objc func getRecordingState(_ call: CAPPluginCall) {
+        let duration = recordingStartTime.map { Date().timeIntervalSince($0) } ?? 0
+        
+        call.resolve([
+            "isRecording": isRecording,
+            "duration": Int(duration),
+            "filePath": videoOutputURL?.path ?? ""
+        ])
+    }
+    
+    @objc public func takeScreenshot(_ call: CAPPluginCall) {
+        guard let window = UIApplication.shared.windows.first(where: { $0.isKeyWindow }) else {
+            call.reject("Failed to get window")
+            return
+        }
+        
+        let quality = call.getFloat("quality") ?? 0.92
+        let format = call.getString("format") ?? "png"
+        
+        // Capture screenshot
+        let renderer = UIGraphicsImageRenderer(bounds: window.bounds)
+        let image = renderer.image { context in
+            window.layer.render(in: context.cgContext)
+        }
+        
+        // Convert to data
+        var imageData: Data?
+        var mimeType = "image/png"
+        
+        if format == "jpeg" {
+            imageData = image.jpegData(compressionQuality: CGFloat(quality))
+            mimeType = "image/jpeg"
+        } else {
+            imageData = image.pngData()
+        }
+        
+        guard let data = imageData else {
+            call.reject("Failed to convert image to data")
+            return
+        }
+        
+        let base64 = data.base64EncodedString()
+        
+        call.resolve([
+            "base64": base64,
+            "mimeType": mimeType,
+            "width": Int(image.size.width),
+            "height": Int(image.size.height)
+        ])
+    }
+    
+    @objc public func isRecordingSupported(_ call: CAPPluginCall) {
+        call.resolve([
+            "supported": recorder.isAvailable
+        ])
+    }
+    
+    @objc override public func requestPermissions(_ call: CAPPluginCall) {
+        // iOS doesn't require explicit permissions for screen recording
+        // The system will show a prompt when recording starts
+        call.resolve([
+            "granted": true
+        ])
+    }
+}
+
+// MARK: - RPPreviewViewControllerDelegate
+extension CuoralPlugin: RPPreviewViewControllerDelegate {
+    public func previewControllerDidFinish(_ previewController: RPPreviewViewController) {
+        previewController.dismiss(animated: true, completion: nil)
+    }
+}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "cuoral-ionic",
+  "version": "0.0.1",
+  "description": "Cuoral Ionic Framework Library - Proactive customer success platform with support ticketing, customer intelligence, screen recording, and engagement tools",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "assets",
+    "ios",
+    "android",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc && rollup -c",
+    "dev": "tsc --watch",
+    "prepare": "npm run build",
+    "test": "jest"
+  },
+  "keywords": [
+    "cuoral",
+    "ionic",
+    "capacitor",
+    "screen-recording",
+    "support",
+    "widget",
+    "bridge"
+  ],
+  "author": "Cuoral",
+  "license": "MIT",
+  "capacitor": {
+    "ios": {
+      "src": "ios"
+    },
+    "android": {
+      "src": "android"
+    }
+  },
+  "peerDependencies": {
+    "@capacitor/core": "^5.0.0 || ^6.0.0",
+    "@ionic/angular": "^7.0.0 || ^8.0.0"
+  },
+  "devDependencies": {
+    "@capacitor/core": "^6.0.0",
+    "@ionic/angular": "^8.0.0",
+    "@types/node": "^20.0.0",
+    "rollup": "^4.0.0",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "typescript": "^5.0.0"
+  },
+  "dependencies": {},
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cuoral/cuoral-ionic.git"
+  }
+}

package/src/bridge.ts

@@ -0,0 +1,195 @@
+import { CuoralMessage, CuoralMessageType, CuoralConfig } from './types';
+
+/**
+ * Bridge for bidirectional communication between WebView and Native code
+ */
+export class CuoralBridge {
+  private config: CuoralConfig;
+  private messageHandlers: Map<CuoralMessageType, Array<(payload: any) => void>> = new Map();
+  private isInitialized: boolean = false;
+  private widgetIframe: HTMLIFrameElement | null = null;
+
+  constructor(config: CuoralConfig) {
+    this.config = config;
+    this.setupMessageListener();
+  }
+
+  /**
+   * Initialize the bridge
+   */
+  public initialize(): void {
+    if (this.isInitialized) {
+      this.log('Bridge already initialized');
+      return;
+    }
+
+    this.isInitialized = true;
+    this.log('Bridge initialized');
+    
+    // Notify widget that bridge is ready
+    this.sendToWidget({
+      type: CuoralMessageType.WIDGET_READY,
+      timestamp: Date.now(),
+    });
+  }
+
+  /**
+   * Send message to native code
+   */
+  public sendToNative(message: CuoralMessage): void {
+    if (!message.timestamp) {
+      message.timestamp = Date.now();
+    }
+
+    this.log('Sending to native:', message);
+
+    // For Capacitor - use window.postMessage
+    if (window.webkit?.messageHandlers?.cuoral) {
+      // iOS WKWebView
+      window.webkit.messageHandlers.cuoral.postMessage(message);
+    } else if ((window as any).CuoralAndroid) {
+      // Android JavascriptInterface
+      (window as any).CuoralAndroid.postMessage(JSON.stringify(message));
+    } else {
+      // Fallback - use postMessage for any other WebView
+      window.postMessage(message, '*');
+    }
+  }
+
+  /**
+   * Send message to widget iframe
+   */
+  public sendToWidget(message: CuoralMessage): void {
+    if (!message.timestamp) {
+      message.timestamp = Date.now();
+    }
+
+    this.log('Sending to widget:', message);
+
+    // Find the iframe element
+    const iframe = document.getElementById('cuoral-widget-iframe') as HTMLIFrameElement;
+    
+    if (iframe?.contentWindow) {
+      try {
+        // Use postMessage for cross-origin communication
+        iframe.contentWindow.postMessage(message, '*');
+        this.log('Message sent via postMessage');
+        return;
+      } catch (error) {
+        this.log('Error using postMessage:', error);
+      }
+    } else {
+      this.log('Iframe not found or not ready');
+    }
+
+    // Fallback: Use localStorage for same-origin
+    try {
+      const storageKey = `cuoral_message_${Date.now()}`;
+      localStorage.setItem(storageKey, JSON.stringify(message));
+      
+      // Clean up after 5 seconds
+      setTimeout(() => {
+        localStorage.removeItem(storageKey);
+      }, 5000);
+      
+      // Trigger a storage event by updating a counter
+      const counter = parseInt(localStorage.getItem('cuoral_message_counter') || '0');
+      localStorage.setItem('cuoral_message_counter', (counter + 1).toString());
+    } catch (error) {
+      this.log('Error using localStorage:', error);
+    }
+  }
+
+  /**
+   * Register message handler
+   */
+  public on(type: CuoralMessageType, handler: (payload: any) => void): () => void {
+    if (!this.messageHandlers.has(type)) {
+      this.messageHandlers.set(type, []);
+    }
+    
+    const handlers = this.messageHandlers.get(type)!;
+    handlers.push(handler);
+
+    this.log(`Registered handler for ${type}`);
+
+    // Return unsubscribe function
+    return () => {
+      const index = handlers.indexOf(handler);
+      if (index > -1) {
+        handlers.splice(index, 1);
+      }
+    };
+  }
+
+  /**
+   * Setup window message listener
+   */
+  private setupMessageListener(): void {
+    window.addEventListener('message', (event: MessageEvent) => {
+      // Only process messages FROM the iframe
+      const widgetFrame = document.querySelector('iframe[src*="mobile.html"]') as HTMLIFrameElement;
+      if (widgetFrame && event.source === widgetFrame.contentWindow) {
+        this.widgetIframe = widgetFrame;
+      } else if (widgetFrame) {
+        return;
+      }
+      
+      // Validate message structure
+      if (!event.data || !event.data.type) {
+        return;
+      }
+
+      const message = event.data as CuoralMessage;
+      
+      // Check if it's a Cuoral message
+      if (!Object.values(CuoralMessageType).includes(message.type)) {
+        return;
+      }
+
+      this.log('Cuoral message received:', message);
+
+      // Call custom handler if provided
+      if (this.config.onMessage) {
+        this.config.onMessage(message);
+      }
+
+      // Call registered handlers
+      const handlers = this.messageHandlers.get(message.type);
+      if (handlers) {
+        handlers.forEach(handler => handler(message.payload));
+      }
+    });
+  }
+
+  /**
+   * Debug logging
+   */
+  private log(...args: any[]): void {
+    if (this.config.debug) {
+      console.log('[CuoralBridge]', ...args);
+    }
+  }
+
+  /**
+   * Destroy the bridge
+   */
+  public destroy(): void {
+    this.messageHandlers.clear();
+    this.isInitialized = false;
+    this.log('Bridge destroyed');
+  }
+}
+
+// Extend Window interface for TypeScript
+declare global {
+  interface Window {
+    webkit?: {
+      messageHandlers?: {
+        cuoral?: {
+          postMessage: (message: any) => void;
+        };
+      };
+    };
+  }
+}