extracted asset url

client/coral-embed/src/index.js

@@ -2,22 +2,47 @@ import URLSearchParams from 'url-search-params';
 import Stream from './Stream';
 import StreamInterface from './StreamInterface';
 
+function parseAssetURL(config) {
+
+  if (config.asset_url) {
+
+    // Extract the asset url from the configuration.
+    return config.asset_url;
+  } else {
+
+    // The asset url was not provided so we need to infer the asset url from // details on the page.
+    try {
+      return document.querySelector('link[rel="canonical"]').href;
+    } catch (e) {
+      console.warn(
+        'This page does not include a canonical link tag. Talk has inferred this asset_url from the window object. Query params have been stripped, which may cause a single thread to be present across multiple pages.'
+      );
+
+      if (!window.location.origin) {
+        window.location.origin = `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ''}`;
+      }
+
+      return window.location.origin + window.location.pathname;
+    }
+  }
+}
+
 export class Talk {
 
   /**
    * Render a Talk stream
-   * @param {HTMLElement} el - Element to render the stream in
-   * @param {Object} opts - Configuration options for talk
-   * @param {String} opts.talk - Talk base URL
-   * @param {String} [opts.title] - Title of Stream (rendered in iframe)
-   * @param {String} [opts.asset_url] - Asset URL
-   * @param {String} [opts.asset_id] - Asset ID
-   * @param {String} [opts.auth_token] - (optional) A jwt representing the session
+   * @param {HTMLElement} element - Element to render the stream in
+   * @param {Object} config - Configuration options for talk
+   * @param {String} config.talk - Talk base URL
+   * @param {String} [config.title] - Title of Stream (rendered in iframe)
+   * @param {String} [config.asset_url] - Asset URL
+   * @param {String} [config.asset_id] - Asset ID
+   * @param {String} [config.auth_token] - (optional) A jwt representing the session
    * @return {Object}
    *
    * Example:
    * ```
-   *   const embed = Talk.render(document.getElementById('talkStreamEmbed'), opts);
+   *   const embed = Talk.render(document.getElementById('talkStreamEmbed'), config);
    *
    *   // trigger a login with optional token.
    *   embed.login(token);
@@ -31,26 +56,20 @@ export class Talk {
    *   });
    * ```
    */
-  static render(el, opts) {
-    if (!el) {
+  static render(element, config) {
+    if (!element) {
       throw new Error('Please provide Coral.Talk.render() the HTMLElement you want to render Talk in.');
     }
-    if (typeof el !== 'object') {
-      throw new Error(`Coral.Talk.render() expected HTMLElement but got ${el} (${typeof el})`);
+    if (typeof element !== 'object') {
+      throw new Error(`Coral.Talk.render() expected HTMLElement but got ${element} (${typeof element})`);
     }
-
-    opts = opts || {};
-
-    // TODO: infer this URL without explicit user input (if possible, may have to be added at build/render time of this script)
-    if (!opts.talk) {
-      throw new Error(
-        'Coral.Talk.render() expects opts.talk as the Talk Base URL'
-      );
+    if (!config || typeof config !== 'object' || !config.talk) {
+      throw new Error('Coral.Talk.render() expected configuration with at least opts.talk as the Talk Base URL, none found');
     }
 
     // Ensure el has an id, as pym can't directly accept the HTMLElement.
-    if (!el.id) {
-      el.id = `_${Math.random()}`;
+    if (!element.id) {
+      element.id = `_${Math.random()}`;
     }
 
     // Compose the query to send down to the Talk API so it knows what to load.
@@ -63,34 +82,15 @@ export class Talk {
     }
 
     // Extract the asset id from the options.
-    if (opts.asset_id) {
-      query.asset_id = opts.asset_id;
+    if (config.asset_id) {
+      query.asset_id = config.asset_id;
     }
 
-    // Extract the asset url.
-    if (opts.asset_url) {
-      query.asset_url = opts.asset_url;
-    } else {
-
-      // The asset url was not provided so we need to infer the asset url from // details on the page.
-
-      try {
-        query.asset_url = document.querySelector('link[rel="canonical"]').href;
-      } catch (e) {
-        console.warn(
-          'This page does not include a canonical link tag. Talk has inferred this asset_url from the window object. Query params have been stripped, which may cause a single thread to be present across multiple pages.'
-        );
-
-        if (!window.location.origin) {
-          window.location.origin = `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ''}`;
-        }
-
-        query.asset_url = window.location.origin + window.location.pathname;
-      }
-    }
+    // Parse the Asset URL.
+    query.asset_url = parseAssetURL(config);
 
     // Create the new Stream.
-    const stream = new Stream(el, opts.talk, query, opts);
+    const stream = new Stream(element, config.talk, query, config);
 
     // Return the public interface for the stream.
     return new StreamInterface(stream);