Merge pull request #316 from bnookala/removing-uri-js

Removing URI.js

package.json

@@ -31,8 +31,7 @@
     "redux": "^3.6.0",
     "redux-observable": "^0.13.0",
     "rxjs": "^5.0.3",
-    "tslib": "^1.5.0",
-    "urijs": "^1.18.4"
+    "tslib": "^1.5.0"
   },
   "devDependencies": {
     "@types/chai": "^3.4.34",

src/Attachment.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as URI from 'urijs';
 
 import { Attachment, Button } from 'botframework-directlinejs';
 import { renderIfNonempty, konsole } from './Chat';
@@ -8,8 +7,50 @@ import { FormatState } from './Store';
 const regExpCard = /\^application\/vnd\.microsoft\.card\./i;
 
 const YOUTUBE_DOMAIN = "youtube.com";
+const YOUTUBE_WWW_DOMAIN = "www.youtube.com";
 const YOUTUBE_SHORT_DOMAIN = "youtu.be";
+const YOUTUBE_WWW_SHORT_DOMAIN = "www.youtu.be";
 const VIMEO_DOMAIN = "vimeo.com";
+const VIMEO_WWW_DOMAIN = "www.vimeo.com";
+
+interface VideoEmbedQuery {
+    loop?: number;
+    autoplay?: number;
+    modestbranding?: number;
+    title?: number;
+    byline?: number;
+    portait?: number;
+    badge?: number;
+    [propName: string]: number;
+}
+
+export const queryParams = (
+    src: string
+) => {
+    const queryObject = {};
+
+    src.substr(1)
+        .split('&')
+        .forEach(field => {
+            const keyValue = field.split('=');
+            queryObject[decodeURIComponent(keyValue[0])] = decodeURIComponent(keyValue[1]);
+        });
+
+    return queryObject;
+}
+
+const buildUrl = (
+    src: string,
+    query: VideoEmbedQuery,
+) => {
+    return [
+        src,
+        '?',
+        Object.keys(query)
+            .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(query[key].toString()))
+            .join('&')
+    ].join('');
+}
 
 const buttons = (
     buttons: Button[],
@@ -26,17 +67,15 @@ const Youtube = (props: {
 }) =>
     <iframe
         type="text/html"
-        src={ new URI()
-            .domain(YOUTUBE_DOMAIN)
-            .subdomain("")
-            .port("")
-            .segment(["embed", props.embedId])
-            .search({
-                "modestbranding": 1,
-                "loop": props.loop ? 1 : 0,
-                "autoplay": props.autoPlay ? 1 : 0
-            })
-            .toString()
+        src={
+            buildUrl(
+                `https://${YOUTUBE_DOMAIN}/embed/${props.embedId}`,
+                {
+                    modestbranding: 1,
+                    loop: props.loop ? 1 : 0,
+                    autoplay: props.autoPlay ? 1 : 0
+                }
+            )
         }
     />;
 
@@ -47,20 +86,18 @@ const Vimeo = (props: {
 }) =>
     <iframe
         type="text/html"
-        src={ new URI()
-            .domain(VIMEO_DOMAIN)
-            .subdomain("player")
-            .port("")
-            .segment(["video", props.embedId])
-            .search({
-                "title": 0,
-                "byline": 0,
-                "portrait": 0,
-                "badge": 0,
-                "autoplay": props.autoPlay ? 1 : 0,
-                "loop": props.loop ? 1 : 0
-            })
-            .toString()
+        src={
+            buildUrl(
+                `https://player.${VIMEO_DOMAIN}/video/${props.embedId}`,
+                {
+                    title: 0,
+                    byline: 0,
+                    portrait: 0,
+                    badge: 0,
+                    autoplay: props.autoPlay ? 1 : 0,
+                    loop: props.loop ? 1 : 0
+                }
+            )
         }
     />;
 
@@ -72,19 +109,25 @@ const Video = (props: {
     onLoad?: () => void,
     onClick?: () => void,
 }) => {
-    const src = new URI(props.src);
-    const domain = src.domain();
+    const url = document.createElement('a');
+    url.href = props.src;
+
+    const urlQueryParams = queryParams(url.search);
+    const pathSegments = url.pathname.substr(1).split('/');
 
-    switch (domain) {
+    switch (url.hostname) {
         case YOUTUBE_DOMAIN:
         case YOUTUBE_SHORT_DOMAIN:
+        case YOUTUBE_WWW_DOMAIN:
+        case YOUTUBE_WWW_SHORT_DOMAIN:
             return <Youtube
-                embedId={ domain === YOUTUBE_DOMAIN ? src.search(true).v : src.filename() }
+                embedId={ url.hostname === YOUTUBE_DOMAIN || url.hostname === YOUTUBE_WWW_DOMAIN ? urlQueryParams['v'] : pathSegments[pathSegments.length-1] }
                 { ... props }
             />;
 
+        case VIMEO_WWW_DOMAIN:
         case VIMEO_DOMAIN:
-            return <Vimeo embedId={ src.filename() } { ...props } />
+            return <Vimeo embedId={ pathSegments[pathSegments.length-1] } { ... props } />
 
         default:
             return <video controls { ... props } />