opentok-textchat - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

demo/tests/e2e/scenarios.js

@@ -75,4 +75,34 @@ /* global describe, it, browser, beforeAll, element, by, expect */
       });
+
+      it('updates image when clicked', () => {
+        const browser1ChatMessage = element(by.css('#otTextChatMessages .message'));
+        let browser1ImageSrc;
+        const browser1Image = browser1ChatMessage.element(by.css('img'));
+        browser1Image.getAttribute('src')
+        .then((src) => {
+          browser1ImageSrc = src;
+        }).then(() => switchWindow())
+        .then(() => {
+          const browser2ChatMessage = element(by.css('#otTextChatMessages .message'));
+          let browser2ImageSrc;
+          const browser2Image = browser2ChatMessage.element(by.css('img'));
+          browser2Image.getAttribute('src')
+          .then((src) => {
+            browser2ImageSrc = src;
+          });
+          browser2Image.click();
+          // Expect the image to update for both participants
+          browser2Image.getAttribute('src').then((src) => {
+            expect(src).not.toEqual(browser2ImageSrc);
+          });
+          return switchWindow();
+        })
+        .then(() => {
+          browser1Image.getAttribute('src').then((src) => {
+            expect(src).not.toEqual(browser1ImageSrc);
+          });
+        });
+      });
     });
   });
 });

opentok-textchat.js

@@ -9,2 +9,16 @@ /* global localStorage OT */
 
+const reloadImage = `<?xml version="1.0" encoding="utf-8"?>
+<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
+<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
+<g><path fill="white" stroke="red" d="M885.8,234.7h-20.9H760.7l-63.3-89.1c-14.9-20.6-31.8-36-54.4-36H357.1c-22.6,0-39.3,15.6-53.5,36l-64.3,89.1H114.3C46.6,234.7,10,283.6,10,358.6v396.1c0,75,54.9,135.8,122.5,135.8h735c67.7,0,122.5-60.8,122.5-135.8V358.6C990,283.6,953.4,234.7,885.8,234.7L885.8,234.7z M948.3,754.6c0,51.9-36.2,94.1-80.8,94.1h-735c-44.5,0-80.8-42.2-80.8-94.1V358.6c0-54.6,21-82.2,62.6-82.2h125.1c13.4,0,26-6.4,33.8-17.3l64.7-89.7c7.9-11.4,15.1-18.1,19.2-18.1h285.8c4.5,0,12,6.8,20.4,18.5l63.3,89.1c7.8,11,20.5,17.5,34,17.5h104.3h20.9c20.3,0,35,6,45.2,18.5c11.4,14,17.4,36,17.4,63.7L948.3,754.6L948.3,754.6z"/>
+<path fill="white" stroke="red" d="M489.6,303.5c-137.4,0-249.3,111.8-249.3,249.3c0,137.4,111.8,249.3,249.3,249.3c137.4,0,249.3-111.8,249.3-249.3C738.9,415.3,627,303.5,489.6,303.5z M489.6,761.5c-115.1,0-208.7-93.6-208.7-208.7c0-115.1,93.6-208.7,208.7-208.7c115.1,0,208.7,93.6,208.7,208.7C698.3,667.9,604.7,761.5,489.6,761.5z"/>
+<path fill="white" stroke="red" d="M489.6,777"/>
+<path fill="white" stroke="red" d="M294.5,171.9H131c-5,0-9.1,4.1-9.1,9.1v22.3c0,5,4.1,9.1,9.1,9.1h163.4c5,0,9.1-4.1,9.1-9.1V181C303.6,175.9,299.5,171.9,294.5,171.9L294.5,171.9z"/>
+<path fill="white" stroke="red" d="M162,256.8v-74.7c0-5-4.1-9.1-9.1-9.1h-22.3c-5,0-9.1,4.1-9.1,9.1v74.7c0,5,4.1,9.1,9.1,9.1h22.3C157.9,266,162,261.9,162,256.8L162,256.8z"/>
+<path fill="white" stroke="red" d="M492.8,389.3c-88.4,0-160.3,71.9-160.3,160.3c0,88.4,71.9,160.3,160.3,160.3c88.4,0,160.3-71.9,160.3-160.3C653.1,461.2,581.2,389.3,492.8,389.3z M492.8,683.8c-74,0-134.2-60.2-134.2-134.2c0-74,60.2-134.2,134.2-134.2c74,0,134.2,60.2,134.2,134.2C627,623.6,566.8,683.8,492.8,683.8z"/>
+<path fill="white" stroke="red" d="M826,326.7c20.6,0,37.1,16.9,37.1,38c0,20.6-16.5,37.1-37.1,37.1c-21.1,0-38-16.6-38-37.1C788.1,343.6,804.9,326.7,826,326.7L826,326.7z"/></g>
+</svg>`;
+
 class Message {
@@ -33,4 +47,7 @@ constructor(from, date, body) {
         '<div class="message" ng-repeat="message in messages">' +
+          '<div class="imageContainer"  ng-click="updateImage(message.from)" ng-class=' +
+          '"{\'myImage\': message.from.connectionId === session.connection.connectionId}">' +
           '<img ng-src="{{getImageData(message.from)}}" ng-if="getImageData(message.from)">' +
-          '<div class="messageText">' +
+          `<div class="reloadOverlay">${reloadImage}</div>` +
+          '</div><div class="messageText">' +
           '<span class="from">{{getName(message.from)}}</span> ' +
@@ -47,2 +64,3 @@ '<span class="time" am-time-ago="message.date | amFromUnix"></span>' +
         scope.messages = [];
+        scope.session = OTSession.session;
         const connections = [];
@@ -117,11 +135,15 @@ OTSession.session.on('signal:message', (event) => {
 
+        const getNewImage = (from) => {
+          const ps = OT.subscribers.find(
+            sub => sub.stream.connection.connectionId === from.connectionId) ||
+            OT.publishers.find(pub => pub.stream.connection.connectionId === from.connectionId);
+          if (ps) {
+            imagesByConnectionId[from.connectionId] =
+              `data:image/png;base64,${ps.getImgData()}`;
+          }
+        };
+
         scope.getImageData = (from) => {
           if (!imagesByConnectionId[from.connectionId]) {
-            const ps = OT.subscribers.find(
-              sub => sub.stream.connection.connectionId === from.connectionId) ||
-              OT.publishers.find(pub => pub.stream.connection.connectionId === from.connectionId);
-            if (ps) {
-              imagesByConnectionId[from.connectionId] =
-                `data:image/png;base64,${ps.getImgData()}`;
-            }
+            getNewImage(from);
           }
@@ -131,2 +153,15 @@ return imagesByConnectionId[from.connectionId];
 
+        scope.updateImage = (from) => {
+          if (from.connectionId === OTSession.session.connection.connectionId) {
+            OTSession.session.signal({
+              type: 'updateImage',
+            });
+          }
+        };
+
+        OTSession.session.on('signal:updateImage', (event) => {
+          getNewImage(event.from);
+          scope.$apply();
+        });
+
         OTSession.session.on('signal:name', (event) => {
@@ -133,0 +168,0 @@ namesByConnectionId[event.from.connectionId] = event.data;

package.json

 {
   "name": "opentok-textchat",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Text chat component using Angular for opentok",
@@ -16,2 +16,6 @@ "main": "opentok-textchat.js",
   "author": "Adam Ullman",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/aullman/opentok-textchat.git"
+  },
   "license": "MIT",
@@ -18,0 +22,0 @@ "devDependencies": {

Fixed alerts

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26532

increased by21.48%

Lines of code

403

increased by25.94%

Number of low maintenance alerts

1

decreased by-50%

Number of low quality alerts

0

decreased by-100%

Number of low supply chain risk alerts

7

decreased by-12.5%

No dependency changes