diff --git a/client/coral-embed/src/index.js b/client/coral-embed/src/index.js index 935972795..1694de565 100644 --- a/client/coral-embed/src/index.js +++ b/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);