Support for Stickers, GIFs, Locations, and Rich Link Previews.

Author: pardeep-kumar-bs

live-stream/CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+## v2.1.0 (27/07/2020)
+
+#### Description
+- Support for Stickers, GIFs, Locations, and Rich Link Previews.
+
+---
+
+## v2.0.0 (16/06/2020)
+
+#### Description
+- Initial release.

live-stream/README.md

@@ -24,15 +24,15 @@ Add the Channelize live stream div in the body tag of your website.
 Import the `liveStream.Channelize.js` file after body tag in your website.
 
 ```javascript
-<script src="https://cdn.channelize.io/apps/live-stream/2.0.0/liveStream.Channelize.js"></script>
+<script src="https://cdn.channelize.io/apps/live-stream/2.1.0/liveStream.Channelize.js"></script>
 ```
 
 ##### Step 3: Import Channelize JS-SDK #####
 
 Import the [`Channelize JS-SDK`](https://docs.channelize.io/javascript-sdk-introduction-overview) after body tag in your website.
 
 ```javascript
-<script src="https://cdn.channelize.io/sdk/4.2.0/browser.js"></script>
+<script src="https://cdn.channelize.io/sdk/4.3.0/browser.js"></script>
 ```
 
 ##### Step 4: Create live stream object #####

live-stream/index.html

@@ -29,8 +29,8 @@
     </div>
   </body>
 
-  <script src="https://cdn.channelize.io/sdk/4.2.0/browser.js"></script>
-  <script src="https://cdn.channelize.io/apps/live-stream/2.0.0/liveStream.Channelize.js"></script>
+  <script src="https://cdn.channelize.io/sdk/4.3.0/browser.js"></script>
+  <script src="https://cdn.channelize.io/apps/live-stream/2.1.0/liveStream.Channelize.js"></script>
 
   <script>
     const channelizeLiveStream = new ChannelizeLiveStream('qHvonVEyIxDLa6zh');

live-stream/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-web-live-stream",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Channelize Web Live Stream Sample App",
   "main": "index.js",
   "scripts": {
@@ -23,6 +23,9 @@
     "webpack-cli": "^3.3.10"
   },
   "dependencies": {
+    "@giphy/js-fetch-api": "^1.6.0",
+    "@joeattardi/emoji-button": "^3.1.1",
+    "google-maps": "^4.3.2",
     "moment": "^2.26.0"
   }
 }

live-stream/src/js/adapter.js

@@ -319,6 +319,14 @@ class ChannelizeAdapter {
 			return cb(null, res);
 		});
 	}
+
+	getUrlMetaData(message, cb) {
+		message.getUrlMetaData(function (err, res) {
+			if(err) return cb(err);
+
+			return cb(null, res);
+		});
+	}
 }
 
 export { ChannelizeAdapter as default };

live-stream/src/js/components/conversation.js

@@ -10,6 +10,7 @@ export const LANGUAGE_PHRASES = {
 	GIF : "GIF",
 	DOCUMENT : "Document",
 	ATTACHMENT : "Attachment",
+	SHARE_EMOJIS : "Share Emojis",
 	SEND_ATTACHMENTS : "Send Attachments",
 	FILE_SIZE_WARNING : "File size should be less then 25mb",
 	LOGIN : "Login",
@@ -37,7 +38,14 @@ export const LANGUAGE_PHRASES = {
 	TODAY : "Today",
 	YESTERDAY : "Yesterday",
 	MORE_OPTIONS : "More options",
-	REACT_TO_THIS_MESSAGE : "React to this message"
+	REACT_TO_THIS_MESSAGE : "React to this message",
+	SEARCH : "Search",
+	SEARCH_STICKERS : "Search Sticker",
+	SEARCH_GIFS : "Search Gifs",
+	CLEAR : "Clear",
+	CUREENT_LOCATION : "Cureent Location",
+	SHARE_LOCATION : "Share Location",
+	SEARCH_LOCATION : "Search Location"
 }
 
 export const IMAGES = {
@@ -51,15 +59,17 @@ export const IMAGES = {
 	LOCATION_ICON : "https://cdn.channelize.io/apps/live-stream/2.0.0/images/location.svg",
 	STICKER_ICON : "https://cdn.channelize.io/apps/live-stream/2.0.0/images/sticker.png",
 	GIF_ICON : "https://cdn.channelize.io/apps/live-stream/2.0.0/images/gif.png",
+	LOADING_IMAGE : "https://cdn.channelize.io/apps/live-stream/2.0.0/images/loading-image.gif",
 	AVTAR : "https://cdn.channelize.io/apps/live-stream/2.0.0/images/avtar.png",
 	GROUP : "https://cdn.channelize.io/apps/live-stream/2.0.0/images/group.png",
-	MESSAGE_LOADER : "https://cdn.channelize.io/apps/live-stream/2.0.0/images/image-loader.gif"
+	MESSAGE_LOADER : "https://cdn.channelize.io/apps/live-stream/2.0.0/images/message-loader.gif"
 }
 
 export const SETTINGS = {
 	LOCATION_API_KEY : "AIzaSyBzrL8FaUvmYPIxEUd_VTPpqcACtPdniik",
 	LOCATION_IMG_URL : "https://maps.googleapis.com/maps/api/staticmap",
 	CONVERSATION_ID : "b30976a2-abdf-11ea-8b53-e9b8792622de",
+	GIPHY_API_KEY : "sXpGFDGZs0Dv1mmNFvYaGUvYwKX0PWIh",
 	ALLOW_MESSAGE_THREADING: true,
 	REACTION_SETTINGS : {
 		enable: true,

live-stream/src/js/components/threads.js

@@ -5,6 +5,7 @@ import Login from "./components/login.js";
 import Conversation from "./components/conversation.js";
 import Threads from "./components/threads.js";
 import { LANGUAGE_PHRASES, SETTINGS, IMAGES } from "./constants.js";
+import { Loader } from 'google-maps';
 
 class ChannelizeLiveStream {
 	constructor(publicKey) {
@@ -22,6 +23,7 @@ class ChannelizeLiveStream {
 		this.chAdapter = new ChannelizeAdapter(publicKey);
 		this.conversations = {};
 		this.threads = {};
+		this.initGoggleMapLibraries();
 	}
 
 	// Load channelize
@@ -43,6 +45,13 @@ class ChannelizeLiveStream {
 		}
 	}
 
+	initGoggleMapLibraries() {
+		const loader = new Loader(SETTINGS.LOCATION_API_KEY, {"&libraries":"places"});
+		loader.load().then((google) => {
+			this.google = google;
+		});
+	}
+
 	connect(userId, accessToken, cb) {
 	  	this.chAdapter.connect(userId, accessToken, (err, res) => {
 			if (err) return cb(err);
@@ -71,9 +80,7 @@ class ChannelizeLiveStream {
 			this.renderLogin();
 		}
 	}
-
 
-
 	loadConversation(conversationId) {
 		// Destory the login screen
 		this.destroyLogin();

live-stream/src/js/constants.js

@@ -1,5 +1,6 @@
 import moment from 'moment';
-import { LANGUAGE_PHRASES } from "./constants.js";
+import { LANGUAGE_PHRASES, SETTINGS } from "./constants.js";
+import { GiphyFetch } from '@giphy/js-fetch-api'
 
 class Utility {
 	constructor() {}
@@ -101,6 +102,27 @@ class Utility {
     updatedDuration = ((Math.floor(actualDuration / 60) + (actualDuration % 60) / 100).toFixed(2)).toString().replace('.',':');
     return updatedDuration;
   }
+
+  async getStickersGifs(contentType = 'stickers', offset = 0, limit = 15, searchTerm = null, language = 'en') {
+    const giphy = new GiphyFetch(SETTINGS.GIPHY_API_KEY);
+    try {
+      if (searchTerm) {
+        const { data: gifs } = await giphy.search(searchTerm, { type: contentType, offset, limit, lang: language })
+        return gifs;
+      }
+      const { data: gifs } = await giphy.trending({ type: contentType, offset, limit, lang: language })
+      return gifs;
+    } catch (error) {
+      return [];
+    }
+  }
+
+  getUrls(text) {
+    if (text) {
+      return text.match(/(?:(?:https?|ftp|file):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9])/igm) || [];
+    }
+    return [];
+  }
 }
 
 export { Utility as default };