v8.5.10

Author: boehlerlukas

demo/main.js

@@ -14,15 +14,15 @@ Gleap.attachCustomData({
   },
 });
 
-Gleap.identify("123456789", {
+/*Gleap.identify("123456789", {
   name: "John Doe",
   email: "lukas@gleap.io",
   value: 1234,
   phone: "+49123456789",
   "penis": "true",
   testing: { "fun": 1123 },
   luki: 19283
-});
+});*/
 
 Gleap.log("Test log");
 Gleap.log("Test log info", "INFO");

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gleap",
-  "version": "8.5.9",
+  "version": "8.5.10",
   "main": "build/index.js",
   "scripts": {
     "start": "webpack serve",

src/GleapNotificationManager.js

@@ -137,19 +137,41 @@ export default class GleapNotificationManager {
           Gleap.open();
         }
       };
-      elem.className = "gleap-notification-item";
-      elem.innerHTML = `
+
+      if (notification.data.news) {
+        // News preview
+        elem.className = "gleap-notification-item-news";
+        elem.innerHTML = `
+        <div class="gleap-notification-item-news-container">
+          ${notification.data.coverImageUrl ? `<img class="gleap-notification-item-news-image" src="${notification.data.coverImageUrl}" />` : ''}
+          <div class="gleap-notification-item-news-content">
+          <div class="gleap-notification-item-news-content-title">${content}</div>
+            ${notification.data.sender ? `
+            <div  class="gleap-notification-item-news-sender">
+              ${notification.data.sender.profileImageUrl &&
+            `<img src="${notification.data.sender.profileImageUrl}" />`
+            } ${notification.data.sender.name}</div>`
+            : ""
+          }
+          </div>
+        </div>`;
+      } else {
+        // Notification item.
+        elem.className = "gleap-notification-item";
+        elem.innerHTML = `
             ${notification.data.sender &&
-        notification.data.sender.profileImageUrl &&
-        `<img src="${notification.data.sender.profileImageUrl}" />`
-        }
+          notification.data.sender.profileImageUrl &&
+          `<img src="${notification.data.sender.profileImageUrl}" />`
+          }
             <div class="gleap-notification-item-container">
                 ${notification.data.sender
-          ? `<div  class="gleap-notification-item-sender">${notification.data.sender.name}</div>`
-          : ""
-        }
+            ? `<div  class="gleap-notification-item-sender">${notification.data.sender.name}</div>`
+            : ""
+          }
                 <div class="gleap-notification-item-content">${content}</div>
             </div>`;
+      }
+
       this.notificationContainer.appendChild(elem);
     }
   }

src/GleapStreamedEvent.js

@@ -6,6 +6,7 @@ export default class GleapStreamedEvent {
   streamedEventArray = [];
   eventMaxLength = 500;
   errorCount = 0;
+  skippedCount = 1;
   streamingEvents = false;
   lastUrl = undefined;
   stopped = false;
@@ -106,6 +107,11 @@ export default class GleapStreamedEvent {
       return;
     }
 
+    if ((!this.streamedEventArray || this.streamedEventArray.length === 0) && this.skippedCount < 1) {
+      this.skippedCount++;
+      return;
+    }
+    
     const self = this;
     this.streamingEvents = true;
 
@@ -123,6 +129,7 @@ export default class GleapStreamedEvent {
       if (http.readyState === 4) {
         if (http.status === 200 || http.status === 201) {
           self.errorCount = 0;
+          self.skippedCount = 0;
 
           // Only perform actions if gleapId was not changed.
           if (GleapSession.getInstance().getGleapId() === preGleapId) {

src/UI.js

@@ -257,7 +257,8 @@ export const injectStyledCSS = (
       display: flex;
       flex-direction: column;
       align-items: flex-end;
-      max-width: min(300px, 80vw);
+      width: 100%;
+      max-width: min(340px, 80vw);
     }
 
     .gleap-notification-container--left {
@@ -314,9 +315,76 @@ export const injectStyledCSS = (
       fill: ${backgroundColor};
     }
 
+    .gleap-notification-item-news {
+      width: 100%;
+      cursor: pointer;
+    }
+
+    .gleap-notification-item-news-content {
+      align-items: flex-start;
+      display: flex;
+      flex-direction: column;
+      padding: 15px;
+    }
+
+    .gleap-notification-item-news-sender {
+      display: flex;
+      align-items: center;
+      color: ${subTextColor};
+      font-size: 14px;
+      font-weight: 400;
+    }
+
+    .gleap-notification-item-news-content-title {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 18px;
+      margin-bottom: 6px;
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: ${contrastBackgroundColor};
+    }
+
+    .gleap-notification-item-news-sender img {
+      border-radius: 100%;
+      height: 20px;
+      margin-right: 8px;
+      object-fit: cover;
+      width: 20px;
+    }
+
+    .gleap-notification-item-news-container {
+      display: flex;
+      animation: fadeIn;
+      animation-duration: .45s;
+      background-color: ${backgroundColor};
+      border-radius: ${subTextColor};
+      box-sizing: border-box;
+      cursor: pointer;
+      flex-direction: column;
+      overflow: hidden;
+      box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.2);
+      border-radius: ${chatRadius}px;
+      margin-bottom: 12px;
+    }
+
+    .gleap-notification-item-news-image {
+      background-color: ${subTextColor};
+      height: 170px;
+      object-fit: cover;
+      width: 100%;
+    }
+
+    .gleap-notification-item-news:hover .gleap-notification-item-news-content-title {
+      color: ${primaryColor};
+    }
+
     .gleap-notification-item {
       display: flex;
       align-items: flex-end;
+      cursor: pointer;
     }
 
     .gleap-notification-item img {
@@ -353,7 +421,7 @@ export const injectStyledCSS = (
       left: -6px;
       border-style: solid;
       border-width: 0px 0px 10px 6px;
-      border-color: transparent transparent white;
+      border-color: transparent transparent ${backgroundColor};
     }
 
     .gleap-notification-item-sender {