releasebird-javascript-sdk 1.0.2

package/src/RbirdScreenshotManager.js

@@ -0,0 +1,80 @@
+import RbirdWebsiteWidget from "./RbirdWebsiteWidget";
+import SVGEditor from "./SVGEditor";
+import html2canvas from "html2canvas";
+
+export default class RbirdScreenshotManager {
+
+    static instance;
+
+    boundary;
+
+    static getInstance() {
+        if (!this.instance) {
+            this.instance = new RbirdScreenshotManager();
+        }
+        return this.instance;
+    }
+
+    activateMarker(allowPointerEvents) {
+        document.body.style.overflow = 'hidden';
+        RbirdWebsiteWidget.getInstance().closeWebsiteWidget();
+        this.boundary = document.createElement('div');
+        this.boundary.id = "markerBoundary";
+        this.boundary.className = "markerBoundary";
+        this.boundary.style.display = 'block';
+        this.boundary.style.height = '100%';
+
+        if (!allowPointerEvents) {
+            this.boundary.style.pointerEvents = 'none';
+        }
+
+        const closeButton = document.createElement('div');
+        closeButton.id = "screenshotCloseButton";
+        closeButton.className = "screenshotCloseButton"
+        closeButton.innerText = "Close";
+        closeButton.onclick = () => {
+            document.body.removeChild(this.boundary);
+        }
+
+        this.boundary.appendChild(closeButton);
+        document.body.appendChild(this.boundary);
+        // @ts-ignore
+        new SVGEditor({
+            element: this.boundary,
+            dimension: {
+                width: "100%",
+                height: "100%"
+            }
+        })
+    }
+
+    deactivateMarker() {
+        document.body.style.overflow = 'auto';
+        document.body.removeChild(this.boundary);
+        RbirdWebsiteWidget.getInstance().openWebsiteWidget();
+    }
+
+    screenshot() {
+        let that = this;
+        html2canvas(document.body, {
+            allowTaint: false,
+            useCORS: false,
+            logging: false,
+            foreignObjectRendering: false
+        }).then(function (canvas) {
+            if (RbirdWebsiteWidget.getInstance().iframe) {
+                RbirdWebsiteWidget.getInstance().iframe.contentWindow?.postMessage({
+                    type: 'screenshot',
+                    screenshot: canvas.toDataURL("image/jpeg")
+                }, '*');
+            }
+
+            that.deactivateMarker();
+
+            //document.body.appendChild(canvas);
+        }).catch((e) => {
+            document.body.appendChild(e.toString());
+        });
+    }
+
+}

package/src/RbirdSessionManager.js

@@ -0,0 +1,138 @@
+import RbirdWebsiteWidget from "./RbirdWebsiteWidget";
+import Rbird from "./index";
+
+export default class RbirdSessionManager {
+
+    static instance;
+
+    widgetSettings;
+
+    apiKey;
+
+    anonymousIdentifier;
+
+    identify;
+
+    static getInstance() {
+        if (!this.instance) {
+            this.instance = new RbirdSessionManager();
+        }
+        return this.instance;
+    }
+
+    generateRandomString() {
+        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        let result = '';
+        for (let i = 0; i < 60; i++) {
+            result += characters.charAt(Math.floor(Math.random() * characters.length));
+        }
+        return result;
+    };
+
+    init(apiKey) {
+        this.apiKey = apiKey;
+        this.identify = this.getState()?.identify;
+        const http = new XMLHttpRequest();
+        http.open("GET", `${API}/ewidget`);
+        http.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+        http.setRequestHeader("apiKey", apiKey);
+        http.onerror = function () {
+            //handle error
+        };
+        const self = this;
+        http.onreadystatechange = function (e) {
+            if (http.readyState === XMLHttpRequest.DONE) {
+                if (http.status === 200 || http.status === 201) {
+                    try {
+                        self.widgetSettings = JSON.parse(http.responseText);
+                        Rbird.setStyles(
+                            self.widgetSettings.backgroundColor,
+                            self.widgetSettings.textColor,
+                            self.widgetSettings.launcherColor,
+                            self.widgetSettings.launcherPosition,
+                            self.widgetSettings.spaceLeftRight,
+                            self.widgetSettings.spaceBottom
+                        );
+                        RbirdWebsiteWidget.getInstance().renderWebsiteWidget();
+                        RbirdWebsiteWidget.getInstance().styleWidget();
+                    } catch (e) {
+                    }
+                }
+                //reject();
+            }
+        };
+        http.send();
+        let anonymous = window.localStorage.getItem("Rbird_I");
+        if (!anonymous) {
+            const i = this.generateRandomString();
+            window.localStorage.setItem('Rbird_I', i);
+            this.anonymousIdentifier = i;
+        } else {
+            this.anonymousIdentifier = anonymous;
+        }
+        this.anonymousIdentifier = this.anonymousIdentifier.replace("\"", "");
+        setInterval(() => {
+            let state = this.getState();
+            if (state?.identify && state?.identify?.properties['external_user_id']) {
+                const http = new XMLHttpRequest();
+                http.open("POST", `${API}/ewidget/ping`);
+                http.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+                http.setRequestHeader("apiKey", apiKey);
+                http.send(JSON.stringify(state.identify));
+            }
+        }, 30000);
+    }
+
+    getState() {
+        let state = window.localStorage.getItem('rbird_state');
+        if (state) {
+            return JSON.parse(state);
+        } else if (!state) {
+            state = {};
+            state.identify = {};
+            state.identify['properties'] = {};
+            window.localStorage.setItem('rbird_state', JSON.stringify(state));
+        }
+        return JSON.parse(state);
+    }
+
+    identifyUser(identify, hash) {
+        let state = this.getState();
+        state.identify.properties = identify;
+        state.identify.hash = identify.hash;
+        const http = new XMLHttpRequest();
+        http.open("POST", `${API}/ewidget/identify`);
+        http.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+        http.setRequestHeader("timezone", Intl.DateTimeFormat().resolvedOptions().timeZone);
+        http.setRequestHeader("apiKey", this.apiKey);
+        http.onerror = (error) => {
+            //handle error
+        };
+        let self = this;
+        http.onreadystatechange = function (e) {
+            if (http.readyState === 4) {
+                if (http.status === 200 || http.status === 201) {
+                    try {
+                        //handle success
+                        let response = JSON.parse(http.responseText);
+                        if (response.valid) {
+                            state.identify.people = response.peopleId;
+                            if (hash) {
+                                state.identify.hash = hash;
+                            }
+                            window.localStorage.setItem("rbird_state", JSON.stringify(state));
+                            console.log(`${CONTENT_URL}/widget?apiKey=${RbirdSessionManager.getInstance().apiKey}&tab=HOME&people=${response.peopleId}&hash=${hash}&ai=${self.anonymousIdentifier}`);
+                            RbirdWebsiteWidget.getInstance().updateIframe(`${CONTENT_URL}/widget?apiKey=${RbirdSessionManager.getInstance().apiKey}&tab=HOME&people=${response.peopleId}&hash=${hash}&ai=${self.anonymousIdentifier}`);
+                        }
+                    } catch (exp) {
+                        //handle error
+                    }
+                } else {
+                    //handle error
+                }
+            }
+        };
+        http.send(JSON.stringify(state.identify));
+
+    }
+}

package/src/RbirdUtils.js

@@ -0,0 +1,25 @@
+export default class RbirdUtils {
+
+    static hasClass(el, className) {
+        if (el.classList)
+            return el.classList.contains(className);
+        return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
+    }
+
+    static addClass(el, className) {
+        if (el.classList)
+            el.classList.add(className)
+        else if (!hasClass(el, className))
+            el.className += " " + className;
+    }
+
+    static removeClass(el, className) {
+        if (el.classList)
+            el.classList.remove(className)
+        else if (hasClass(el, className)) {
+            var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
+            el.className = el.className.replace(reg, ' ');
+        }
+    }
+
+}

package/src/RbirdVideoRecorder.js

@@ -0,0 +1,266 @@
+import RbirdWebsiteWidget from "./RbirdWebsiteWidget";
+
+export default class RbirdVideoRecorder {
+    static instance;
+
+    mediaRecorder = null;
+
+    static getInstance() {
+        if (!this.instance) {
+            this.instance = new RbirdVideoRecorder();
+        }
+        return this.instance;
+    }
+
+    onTimer(countdownElement, countDown, countdownTimer, mediaRecorder) {
+        countdownElement.innerHTML = '<div style="margin-top: 5px;margin-left: 10px">' + countDown + '</div>'
+        countDown--;
+        // If the count down is finished
+        if (countDown < 0) {
+            mediaRecorder.stop();
+            clearInterval(countdownTimer);
+        }
+    }
+
+    startTimer(countdownElement) {
+        let countDown = 60;
+        let countdownTimer = setInterval(() => {
+            countDown--;
+            this.onTimer(countdownElement, countDown, countdownTimer, this.mediaRecorder)
+        }, 1000);
+    }
+
+    async startRecording(allowPointerEvents) {
+
+        let stream;
+
+        const that = this;
+
+        try {
+            stream = await navigator.mediaDevices.getDisplayMedia({
+                audio: true,
+                // @ts-ignore
+                video: {mediaSource: "screen"}
+            });
+        } catch (e) {
+            alert('Screensharing not allowed by user');
+            return;
+        }
+
+        let element = document.createElement('div');
+        let countdownElement = this.addCountDownElement(element);
+
+        if (stream && stream.active) {
+
+            const boundary
+                = document?.getElementById('test')?.getElementsByTagName('rbird-box')[0]?.shadowRoot?.getElementById('markerBoundary');
+            if (boundary) {
+                boundary.style.display = 'block';
+                if (!allowPointerEvents) {
+                    boundary.style.pointerEvents = 'none';
+                }
+                if (boundary.querySelector('#screenshotCloseButton') !== null) {
+                    // @ts-ignore
+                    boundary.removeChild(boundary.querySelector('#screenshotCloseButton'))
+                }
+            }
+            RbirdWebsiteWidget.getInstance().closeWebsiteWidget();
+
+            let recordedChunks = [];
+
+            const options = {mimeType: 'video/webm;codecs=vp9'};
+            this.mediaRecorder = new MediaRecorder(stream, options);
+
+            this.mediaRecorder.ondataavailable = function (e) {
+                if (e.data.size > 0) {
+                    recordedChunks.push(e.data);
+                }
+            };
+
+            this.startTimer(countdownElement);
+
+            this.mediaRecorder.onstop = function () {
+                document.body.removeChild(element);
+                const modal = document.createElement('div');
+                modal.style.width = '100%';
+                modal.style.height = '100%';
+                modal.style.backgroundColor = 'rgba(0,0,0,0.8)';
+                modal.style.overflow = 'auto';
+                modal.style.position = 'fixed';
+                modal.style.zIndex = '90000000000';
+                modal.style.top = '0';
+                modal.style.left = '0';
+
+                const modalContent = document.createElement('div');
+                modalContent.style.margin = '15% auto';
+                modalContent.style.padding = '20px';
+                modalContent.style.border = '1px solid #888';
+                modalContent.style.backgroundColor = 'white';
+                modalContent.style.borderRadius = '8px';
+                modalContent.style.height = '525px';
+                modalContent.style.width = '700px';
+
+                const buttonFooter = document.createElement('div');
+
+                buttonFooter.style.display = 'flex';
+                buttonFooter.style.display = 'block';
+                buttonFooter.style.height = '30px';
+                buttonFooter.style.marginTop = '20px';
+
+
+                const retryButton = document.createElement('div');
+                retryButton.style.backgroundColor = 'orange';
+                retryButton.style.color = 'white';
+                retryButton.style.fontWeight = '500';
+                retryButton.innerHTML = "Retry";
+                retryButton.style.float = "left";
+                retryButton.style.padding = "13px";
+                retryButton.style.paddingTop = "8px";
+                retryButton.style.paddingBottom = "8px";
+                retryButton.style.fontFamily = "Arial";
+                retryButton.style.fontSize = "16px";
+                retryButton.style.borderRadius = "8px";
+                retryButton.style.marginLeft = "10px";
+                retryButton.style.cursor = "pointer";
+                retryButton.addEventListener('click', () => {
+                    URL.revokeObjectURL(blob);
+                    recordedChunks = [];
+                    document.body.removeChild(modal);
+                    element = document.createElement('div');
+                    countdownElement = that.addCountDownElement(element);
+                    that.startTimer(countdownElement);
+                    that.restartRecording();
+
+                });
+
+
+                const cancelButton = document.createElement('div');
+                cancelButton.innerHTML = 'Cancel';
+                cancelButton.style.backgroundColor = 'red';
+                cancelButton.style.color = 'white';
+                cancelButton.style.fontWeight = '500';
+                cancelButton.style.float = "left";
+                cancelButton.style.padding = "13px";
+                cancelButton.style.paddingTop = "8px";
+                cancelButton.style.paddingBottom = "8px";
+                cancelButton.style.fontFamily = "Arial";
+                cancelButton.style.fontSize = "16px";
+                cancelButton.style.borderRadius = "8px";
+                cancelButton.style.cursor = "pointer";
+
+                cancelButton.addEventListener('click', () => {
+                    // stop screen sharing
+                    stream.getTracks()
+                        .forEach(track => track.stop());
+                    // @ts-ignore
+                    URL.revokeObjectURL(blob);
+                    recordedChunks = [];
+                    document.body.removeChild(modal);
+                    if (boundary) {
+                        boundary.style.display = 'none';
+                    }
+                    RbirdWebsiteWidget.getInstance().openWebsiteWidget();
+                });
+                buttonFooter.appendChild(cancelButton);
+                buttonFooter.appendChild(retryButton);
+
+                const submitVideo = document.createElement('div');
+                submitVideo.innerHTML = 'Continue';
+                submitVideo.style.backgroundColor = 'green';
+                submitVideo.style.color = 'white';
+                submitVideo.style.fontWeight = '500';
+                submitVideo.innerHTML = "Submit";
+                submitVideo.style.float = "right";
+                submitVideo.style.padding = "13px";
+                submitVideo.style.paddingTop = "8px";
+                submitVideo.style.paddingBottom = "8px";
+                submitVideo.style.fontFamily = "Arial";
+                submitVideo.style.fontSize = "16px";
+                submitVideo.style.borderRadius = "8px";
+                submitVideo.style.marginLeft = "10px";
+                submitVideo.style.cursor = "pointer";
+                submitVideo.addEventListener('click', () => {
+                    // stop screen sharing
+                    stream.getTracks()
+                        .forEach(track => track.stop());
+
+
+                    if (RbirdWebsiteWidget.getInstance().iframe) {
+                        RbirdWebsiteWidget.getInstance().iframe.contentWindow?.postMessage({
+                            type: 'video',
+                            video: blob
+                        }, '*');
+                    }
+
+
+                    // @ts-ignore
+                    URL.revokeObjectURL(blob);
+                    recordedChunks = [];
+                    document.body.removeChild(modal);
+                    if (boundary) {
+                        boundary.style.display = 'none';
+                    }
+                    RbirdWebsiteWidget.getInstance().openWebsiteWidget();
+                });
+                buttonFooter.appendChild(submitVideo);
+
+                const blob = new Blob(recordedChunks, {
+                    //video/webm;codecs=H264
+                    type: 'video/webm;codecs=vp9'
+                });
+
+                const video = document.createElement('video');
+                video.controls = true;
+                video.style.width = '650px';
+                video.style.height = '400px';
+                const source = document.createElement('source');
+                source.type = 'video/webm;codecs=vp9';
+                source.src = URL.createObjectURL(blob);
+                video.appendChild(source);
+
+                modalContent.appendChild(video);
+                modalContent.appendChild(buttonFooter);
+                modal.appendChild(modalContent);
+                document.body.appendChild(modal);
+            };
+            this.mediaRecorder.start(200);
+        }
+    }
+
+
+
+    addCountDownElement(element) {
+        element.id = 'rbirdRecorderMenu'
+        element.style.position = 'absolute';
+        element.style.top = '10px';
+        element.style.left = '50%';
+        element.style.zIndex = '900000000';
+        element.style.backgroundColor = 'white';
+        element.style.border = '1px solid lightgrey';
+        element.style.padding = '10px';
+        element.style.borderRadius = '8px';
+        element.style.transform = 'translateX(-50%)';
+
+        const stopButton = document.createElement('div');
+        stopButton.innerHTML = "<svg viewBox=\"0 0 512 512\" width='20pt' height='20pt' xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"><linearGradient id=\"linear-gradient\" gradientUnits=\"userSpaceOnUse\" x1=\"67.69\" x2=\"441.35\" y1=\"67.69\" y2=\"441.35\"><stop offset=\"0\" stop-color=\"#fd7f60\"/><stop offset=\"1\" stop-color=\"#fa262a\"/></linearGradient><g id=\"Layer_2\" data-name=\"Layer 2\"><g id=\"Layer_2_copy_7\" data-name=\"Layer 2 copy 7\"><g id=\"_137\" fill=\"url(#linear-gradient)\" data-name=\"137\"><path id=\"background\" d=\"m256 20c130.34 0 236 105.66 236 236s-105.66 236-236 236-236-105.66-236-236 105.66-236 236-236m0-20a255.93 255.93 0 0 0 -181 437 256 256 0 1 0 280.65-416.87 254.3 254.3 0 0 0 -99.65-20.13z\"/><rect height=\"247.06\" rx=\"38.38\" width=\"247.06\" x=\"132.47\" y=\"132.47\"/></g></g></g></svg>"
+        stopButton.style.cursor = 'pointer';
+        stopButton.style.float = 'left';
+        stopButton.addEventListener("click", () => this.stopRecording())
+        element.appendChild(stopButton);
+        const countdownElement = document.createElement('div');
+        countdownElement.innerHTML = '<div style="margin-top: 5px;margin-left: 10px">60</div>';
+        countdownElement.id = "rbirdCountdown";
+        countdownElement.style.float = 'left';
+        element.appendChild(countdownElement);
+        document.body.appendChild(element);
+        return countdownElement;
+    }
+
+    async stopRecording() {
+        this.mediaRecorder.stop();
+    }
+
+    async restartRecording() {
+        this.mediaRecorder.start();
+    }
+}