From 9a021dfd4f3eb230757a82eaf53e39d06c0795b9 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Thu, 28 Feb 2019 15:52:24 -0500
Subject: [PATCH 01/45] component youtube

---
 app/components/youtube/bootstrap.yml |  14 +++
 app/components/youtube/client.js     | 118 ++++++++++++++++++++++
 app/components/youtube/model.js      |  95 +++++++++++++++++
 app/components/youtube/schema.yml    | 146 +++++++++++++++++++++++++++
 app/components/youtube/template.hbs  |  53 ++++++++++
 5 files changed, 426 insertions(+)
 create mode 100644 app/components/youtube/bootstrap.yml
 create mode 100644 app/components/youtube/client.js
 create mode 100644 app/components/youtube/model.js
 create mode 100644 app/components/youtube/schema.yml
 create mode 100644 app/components/youtube/template.hbs

diff --git a/app/components/youtube/bootstrap.yml b/app/components/youtube/bootstrap.yml
new file mode 100644
index 0000000..fb72cf0
--- /dev/null
+++ b/app/components/youtube/bootstrap.yml
@@ -0,0 +1,14 @@
+_components:
+  youtube:
+    videoId: ''
+    videoType: 'editorial'
+    videoLocation: 'article'
+    playerCaption: ''
+    autoPlay: false
+    autoPlayNextVideo: true
+    videoPlaylist: ''
+    playerBorderTopCTA: 'Watch'
+    playerBorderTop: false
+    playerBorderBottom: false
+    previousTypeRelated: false
+    customPlay: false
diff --git a/app/components/youtube/client.js b/app/components/youtube/client.js
new file mode 100644
index 0000000..037b3b3
--- /dev/null
+++ b/app/components/youtube/client.js
@@ -0,0 +1,118 @@
+'use strict';
+
+const youtubeVideoPlayer = require('../../services/universal/youtube-video-player'),
+  $visibility = require('../../services/client/visibility');
+
+DS.controller('youtube', ['$gtm', function ($gtm) {
+  function Constructor(el) {
+    var videoConfig = {
+        videoContainerId: el.getAttribute('data-element-id').trim(),
+        videoId: el.getAttribute('data-video-id').trim(),
+        // player variables and settings
+        playerParams: {
+          loop: 1,
+          listType: 'playlist',
+          list: el.getAttribute('data-playlist').trim(),
+          autoplay: el.getAttribute('data-autoplay-video') === 'true' ? 1 : 0,
+          controls: 1,
+          enablejsapi: 1,
+          modestbranding: 1,
+          rel: 0,
+          showinfo: 0,
+          wmode: 'transparent'
+        },
+        customParams: {
+          autoPlayNextVideo: el.getAttribute('data-autoplay-next-video').trim(),
+          trackVideoType: el.getAttribute('data-track-video-type').trim(),
+          customPlayer: el.getAttribute('data-custom-play').trim(),
+          templateid: el.getAttribute('data-element-id').trim()
+        }
+      },
+      analytics = getAnalyticsCustomDimensions(el);
+
+    if (videoConfig.customParams.trackVideoType === 'Sponsored') {
+      videoConfig.playerParams.list = '';
+    }
+    this.el = el;
+    this.visible = new $visibility.Visible(this.el, { preloadThreshold: 800 });
+
+    // when the video player element enters the viewport, load the video(s)
+    if (this.visible.preload && $visibility.isElementNotHidden(el)) {
+      // if the YouTube api is ready the videos(s) can be loaded
+      if (window.nymYTApiReady === true) {
+        youtubeVideoPlayer.init(videoConfig);
+      } else {
+        // wait and listen for the YouTube api to be ready before loading the video(s)
+        document.addEventListener('nym-youtube-event:youtube-api-ready', function () {
+          youtubeVideoPlayer.init(videoConfig);
+        });
+      }
+    } else {
+      this.visible.on('preload', function () {
+        youtubeVideoPlayer.init(videoConfig);
+      });
+    }
+
+    /**
+     * Player ready event
+     * this fires when the player is initially loaded and pushes variables specific to the
+     * component into the data layer. Information about the video itself is captured from the
+     * native gtm.video trigger on play and finish
+     */
+    document.addEventListener('player-ready-' + videoConfig.videoContainerId, function () {
+      $gtm.reportNow(Object.assign({
+        youtubeAction: 'player ready'
+      }, analytics));
+    });
+
+    /**
+     * Player start event
+     *
+     * we don't need to send an event here, updating the video id for posterity
+     * also might be nice to send an event if we see the video id changed?
+     */
+    document.addEventListener('player-start-' + videoConfig.videoContainerId, function (evt) {
+      var hasChanged = el.getAttribute('data-video-id') !== evt.player.videoId;
+
+      if (hasChanged) {
+        updateElementAttributes(el, evt.player);
+        // this will tell the gtm.video trigger to stop ignoring gtm.video events
+        // in the case that an external video was played initially then switched to
+        // an internal playlist
+        $gtm.reportNow(Object.assign({
+          event: 'youtubeVideoReset',
+          youtubeVideoId: evt.player.videoId,
+          youtubeChannelName: 'New York Magazine'
+        }));
+      }
+    });
+  }
+
+  /**
+   * Updates Element attributes
+   * @param {Object} el - DOM node element
+   * @param {Object} config - Attributes values from player
+   */
+  function updateElementAttributes(el, config) {
+    el.setAttribute('data-video-id', config.videoId);
+  }
+
+  /**
+   * Gets analytics custom dimensions for video player
+   * @param {Object} el
+   * @returns {Object} analytics
+   */
+  function getAnalyticsCustomDimensions(el) {
+    return {
+      event: 'youtubeVideo',
+      youtubeVideoId: el.getAttribute('data-video-id'),
+      youtubeVideoLocation: el.getAttribute('data-track-video-location'),
+      youtubeVideoType: el.getAttribute('data-track-video-type'),
+      youtubeVideoTitle: el.getAttribute('data-track-video-title'),
+      youtubeChannelName: el.getAttribute('data-track-channel-name'),
+      youtubeVideoDuration: el.getAttribute('data-track-video-duration')
+    };
+  }
+
+  return Constructor;
+}]);
diff --git a/app/components/youtube/model.js b/app/components/youtube/model.js
new file mode 100644
index 0000000..477d54a
--- /dev/null
+++ b/app/components/youtube/model.js
@@ -0,0 +1,95 @@
+'use strict';
+const _get = require('lodash/get'),
+  { getVideoDetails } = require('../../services/universal/youtube'),
+  defaultPlayerBorderTopCTA = 'Watch';
+
+/**
+ * Override various settings by type of video
+ * @param {object} data
+ */
+function updateSettingsByType(data) {
+  switch (data.videoType) {
+    case 'related':
+      // By default, display borders and CTA when `related` type is first selected, afterwards accept user's selection
+      data.playerBorderTopCTA = !data.previousTypeRelated && !data.playerBorderTopCTA ? defaultPlayerBorderTopCTA : data.playerBorderTopCTA;
+      data.playerBorderTop = !data.previousTypeRelated ? true : data.playerBorderTop;
+      data.playerBorderBottom = !data.previousTypeRelated ? true : data.playerBorderBottom;
+      data.previousTypeRelated = true;
+      break;
+    case 'sponsored':
+      data.autoPlay = false;
+      data.autoPlayNextVideo = false;
+    default:
+      // Toggle borders off if user previously selected `related` type. `sponsored` and `editorial` types share defaults
+      data.playerBorderTop = data.previousTypeRelated ? false : data.playerBorderTop;
+      data.playerBorderBottom = data.previousTypeRelated ? false : data.playerBorderBottom;
+      data.previousTypeRelated = false;
+  }
+}
+
+function clearVideoId(data) {
+  data.videoId = (data.videoId || '').split('&')[0];
+
+  return data;
+}
+
+function setVideoDetails(data, videoDetails) {
+  var maxResThumb;
+
+  if (!videoDetails.title) {
+    data.videoValid = false;
+
+    return data;
+  }
+
+  maxResThumb = _get(videoDetails, 'thumbnails.maxres.url');
+
+  data.videoValid = true;
+  data.channelName = videoDetails.channelTitle;
+  data.videoTitle = videoDetails.title;
+  data.videoThumbnail = maxResThumb ? maxResThumb : _get(videoDetails, 'thumbnails.high.url'); // get the maxres if available, otherwise get the high res which we know will be there
+  data.videoDuration = videoDetails.duration;
+
+  return data;
+}
+
+function getDefaultPlaylistBySite(data, locals) {
+  switch (locals.site.slug) {
+    case 'wwwthecut':
+      return 'PL4B448958847DA6FB';
+      break;
+    case 'vulture':
+      return 'PLZQfnFyelTBOQ15kmHSgEbdjzLMWzZpL7';
+      break;
+    case 'grubstreet':
+      return 'PLtmzdzCeRsyG_td56GV9JtS3yif177lfK';
+      break;
+    case 'di':
+      return 'PLtmzdzCeRsyHbGTxOX4BZvSgXBh20n-_4';
+      break;
+    case 'selectall':
+      return 'PLtmzdzCeRsyHh67c-VlEj8Nqpj5nL8pf6';
+      break;
+    default:
+      return 'PLtmzdzCeRsyFQ64kOTZS7eBLQ1fH2feu7'; // if its a site without a default playlist, use the 'latest from new york' playlist
+      break;
+  }
+}
+
+module.exports.save = (uri, data, locals) => {
+  clearVideoId(data);
+  updateSettingsByType(data);
+
+  if (data.videoId && !data.videoPlaylist) {
+    data.videoPlaylist = getDefaultPlaylistBySite(data, locals);
+  }
+
+  if (data.videoId) {
+    return getVideoDetails(data.videoId)
+      .then(videoDetails => setVideoDetails(data, videoDetails));
+  }
+
+  data.videoValid = true; // technically not an invalid video because no videoId so we don't want to show an error message in edit mode
+
+  return data;
+};
diff --git a/app/components/youtube/schema.yml b/app/components/youtube/schema.yml
new file mode 100644
index 0000000..2aca8f1
--- /dev/null
+++ b/app/components/youtube/schema.yml
@@ -0,0 +1,146 @@
+_version: 1.1
+
+_description: |
+  Youtube video embed for Clay. Can only be used for Youtube videos hosted by NYMag or Vulture. For externally hosted videos, use the Video component.
+  For technical reasons, YouTube embeds don't display a preview in edit mode. Preview the video by previewing the full page (from the Clay toolbar). Embeds can display a specific video ID.
+videoId:
+  _label: YouTube Video ID
+  _publish: videoPlayerId
+  _has:
+    input: text
+  _subscribe: articleVideoId
+
+videoType:
+  _label: Type
+  _has:
+    input: radio
+    options:
+      -
+        name: Editorial (Original)
+        value: editorial
+      -
+        name: Editorial (External)
+        value: embedded
+      -
+        name: Related
+        value: related
+      -
+        name: Sponsored
+        value: sponsored
+    validate:
+      required: true
+      requiredMessage: Please select a video type
+
+videoSize:
+  _label: Size
+  _has:
+    input: radio
+    options:
+        -
+          name: Column Width
+          value: column-width
+        -
+          name: Break-out
+          value: break-out
+  _reveal:
+    field: videoType
+    operator: ===
+    values:
+      - sponsored
+      - editorial
+
+playerHeadline:
+  _label: Video Headline
+  _has:
+    input: text
+  _reveal:
+    field: videoType
+    value: related
+
+playerCaption:
+  _label: Video Caption
+  _has: text
+
+autoPlay:
+  _label: Autoplay on Page Load
+  _has: checkbox
+
+autoPlayNextVideo:
+  _label: Automatically start next video
+  _has: checkbox
+  _reveal:
+    field: videoType
+    operator: '!=='
+    value: sponsored
+
+videoPlaylist:
+  _label: Youtube Playlist (defaults to current site)
+  _reveal:
+    field: autoPlayNextVideo
+    operator: truthy
+  _has:
+    input: text
+    validate:
+      required:
+        field: autoPlayNextVideo
+        operator: truthy
+      requiredMessage: Video Player should contain video playlist
+    help: Playlists are used for auto playing additional videos in the YouTube component after the assigned video is finished. Only required for videos that are selected to automatically start next video above
+
+playerBorderTopCTA:
+  _label: Top Border Title
+  _has: text
+
+playerBorderTop:
+  _label: Show Top Border
+  _has: checkbox
+
+playerBorderBottom:
+  _label: Show Bottom Border
+  _has: checkbox
+
+customPlay:
+  _subscribe: customPlay
+
+_groups:
+  settings:
+    fields:
+      - autoPlay (Autoplay)
+      - autoPlayNextVideo (Autoplay)
+      - videoPlaylist (Autoplay)
+      - playerBorderTopCTA (Borders and Border Title)
+      - playerBorderTop (Borders and Border Title)
+      - playerBorderBottom (Borders and Border Title)
+  inline:
+    fields:
+      - videoId
+      - videoType
+      - videoSize
+      - playerHeadline
+      - playerCaption
+    _label: Youtube Video Player
+    _placeholder:
+      text: Youtube Video Player
+      height: 100px
+      ifEmpty: videoId
+
+# set by bootstrap or first-run
+videoLocation:
+  help: For analytics, to tell what kind of page the video is on
+
+# non-user-editable fields, set by model.js
+previousTypeRelated:
+  help: Toggle for displaying convenience-based changes to player borders based on previously selected video type. Set by model.js
+videoValid:
+  help: Used to decide whether or not to display a video in the template
+  _placeholder:
+    text: Invalid video id ${videoId}. This video will not display.
+    permanent: true
+channelName:
+  help: Name of the channel the video comes from. Used to decide whether or not to listen to GTM triggers for this video
+videoTitle:
+  help: Title of the video
+videoThumbnail:
+  help: maxres video thumbnail
+videoDuration:
+  help: video duration in seconds
diff --git a/app/components/youtube/template.hbs b/app/components/youtube/template.hbs
new file mode 100644
index 0000000..61467b9
--- /dev/null
+++ b/app/components/youtube/template.hbs
@@ -0,0 +1,53 @@
+{{ set 'uniquePlayerID' (randomString 'youtube-player-') }}
+{{#ifAny @root.locals.edit videoValid}}
+<div data-uri="{{ default _ref _self }}"
+     class="youtube{{if @root.locals.edit ' edit-mode'}}{{ if playerBorderTop ' border-top' }} {{ videoSize }} {{ videoType }}"
+     data-element-id="{{ uniquePlayerID }}"
+     data-video-id="{{ videoId }}"
+     data-autoplay-next-video="{{ autoPlayNextVideo }}"
+     data-autoplay-video="{{ autoPlay }}"
+     data-playlist="{{ videoPlaylist }}"
+     data-track-video-type="{{ videoType }}"
+     data-track-video-location="{{ videoLocation }}"
+     data-track-video-title="{{ videoTitle }}"
+     data-track-video-duration="{{ videoDuration }}"
+     data-track-channel-name="{{ channelName }}"
+     data-editable="inline"
+     data-custom-play="{{ customPlay }}"
+     data-origsrc="https://www.youtube.com/watch?v={{ videoId }}">
+  {{#if playerBorderTopCTA }}
+    <style>
+      .youtube[data-uri="{{ default _ref _self }}"].border-top:before {
+        content: '{{ playerBorderTopCTA }}';
+      }
+    </style>
+  {{/if}}
+
+  <div class="player-wrapper">
+    {{#unless @root.locals.edit}}
+      <div class="player">
+        {{!-- The <iframe> (and video player) will replace this <div> tag. --}}
+        <div id="{{ uniquePlayerID }}"></div>
+      </div>
+    {{else}}
+      {{#unless videoValid}}
+        <div data-placeholder="videoValid"></div>
+      {{else}}
+        {{#if videoThumbnail}}
+          <img class="youtube-video-preview" src="{{ videoThumbnail }}" alt="">
+        {{/if}}
+      {{/unless}}
+    {{/unless}}
+  </div>
+
+  {{#ifAll playerHeadline (compare videoType 'related')}}
+    <h2 class="youtube-headline">{{ playerHeadline }}</h2>
+  {{/ifAll}}
+
+  {{#if playerCaption}}
+    <div class="attribution youtube-caption">
+      <span class="caption">{{ playerCaption }}</span>
+    </div>
+  {{/if}}
+</div>
+{{/ifAny}}

From 732019b7a7c4e6d04fc0f0b3b0c8e5efe7b8a94b Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Thu, 28 Feb 2019 16:16:12 -0500
Subject: [PATCH 02/45] added new files for twitter component

---
 app/components/article/schema.yaml            |   2 +
 app/services/client/visibility.js             | 354 ++++++++++++++++++
 .../universal/youtube-video-player.js         | 148 ++++++++
 app/services/universal/youtube.js             |  31 ++
 4 files changed, 535 insertions(+)
 create mode 100644 app/services/client/visibility.js
 create mode 100644 app/services/universal/youtube-video-player.js
 create mode 100644 app/services/universal/youtube.js

diff --git a/app/components/article/schema.yaml b/app/components/article/schema.yaml
index 5a6ef66..e465783 100644
--- a/app/components/article/schema.yaml
+++ b/app/components/article/schema.yaml
@@ -60,6 +60,8 @@ content:
       - divider
       - image
       - code-sample
+      # - twitter
+      - youtube
 
 ledeUrl:
   _label: Lede Image URL
diff --git a/app/services/client/visibility.js b/app/services/client/visibility.js
new file mode 100644
index 0000000..67e18e6
--- /dev/null
+++ b/app/services/client/visibility.js
@@ -0,0 +1,354 @@
+'use strict';
+
+const $window = window,
+  $document = document,
+  _filter = require('lodash/filter'),
+  _map = require('lodash/map'),
+  _invokeMap = require('lodash/invokeMap'),
+  _assign = require('lodash/assign'),
+  _throttle = require('lodash/throttle'),
+  Eventify = require('eventify');
+var list = [],
+  Visible, VisibleEvent,
+  primaryContentEl; // need to hold on to this in case the page layout changes
+
+/**
+ * the purpose of the primaryContentEl is to calculate if other elements are above or below it
+ * this helps product determine if a module is doing well in a certain position
+ * there can only be one primary content element on a page
+ * @param {Element} [el]
+ */
+function setPrimaryContent(el) {
+  if (el) {
+    primaryContentEl = el;
+  }
+}
+
+/**
+ * for position we only care if it is below the content or not
+ * @param {Element} el - element to measure position relative to primary content
+ * @returns {boolean}
+ */
+function isBelowPrimaryContent(el) {
+  // calculating position lazily as this function is not called frequently and the position can change
+  // alternative would be to cache primaryContentBottom and update on load and resize events
+  var primaryContentRect = primaryContentEl && primaryContentEl.getBoundingClientRect(),
+    elRect = el && el.getBoundingClientRect();
+
+  return !!(primaryContentRect && elRect && primaryContentRect.bottom < elRect.top);
+}
+
+/**
+ * @param {number} a
+ * @param {number} b
+ * @returns {*}
+ * @see http://jsperf.com/math-min-vs-if-condition-vs/8
+ */
+function min(a, b) {
+  return a < b ? a : b;
+}
+
+/**
+ * @param {number} a
+ * @param {number} b
+ * @returns {*}
+ * @see http://jsperf.com/math-min-vs-if-condition-vs/8
+ */
+function max(a, b) {
+  return a > b ? a : b;
+}
+
+/**
+ * Fast loop through watched elements
+ */
+function updateVisibility() {
+  list.forEach(updateVisibilityForItem);
+}
+
+/**
+ * updates seen property
+ * @param  {Visble} item
+ * @param  {{}} evt
+ * @fires Visible#shown
+ * @fires Visible#hidden
+ */
+function updateSeen(item, evt) {
+  var px = evt.visiblePx,
+    percent = evt.visiblePercent;
+
+  // if some pixels are visible and we're greater/equal to threshold
+  if (px && percent >= item.shownThreshold && !item.seen) {
+    item.seen = true;
+    setTimeout(function () {
+      item.trigger('shown', new VisibleEvent('shown', evt));
+    }, 15);
+
+    // if no pixels or percent is less than threshold
+  } else if ((!px || percent < item.hiddenThreshold) && item.seen) {
+    item.seen = false;
+    setTimeout(function () {
+      item.trigger('hidden', new VisibleEvent('hidden', evt));
+    }, 15);
+  }
+}
+
+/**
+ * sets preload property
+ * @param  {Visible} item
+ * @param  {{}} evt
+ * @param  {Number} innerHeight
+ * @fires Visible#preload
+ */
+function updatePreload(item, evt, innerHeight) {
+  if (!item.preload && item.preloadThreshold && shouldBePreloaded(evt.target, evt.rect, item.preloadThreshold, innerHeight)) {
+    item.preload = true;
+    setTimeout(function () {
+      item.trigger('preload', new VisibleEvent('preload', evt));
+    }, 15);
+  }
+}
+
+/**
+ * Trigger events
+ * @param {Visible} item
+ */
+function updateVisibilityForItem(item) {
+  var rect = item.el.getBoundingClientRect(),
+    innerHeight = $window.innerHeight || $document.documentElement.clientHeight,
+    px = getVerticallyVisiblePixels(rect, innerHeight),
+    percent = px / (rect.height || innerHeight),
+    evt = {
+      target: item.el,
+      rect: rect,
+      visiblePx: px,
+      visiblePercent: percent
+    };
+
+  updateSeen(item, evt);
+  updatePreload(item, evt, innerHeight);
+}
+
+/**
+ * Return normalized viewport height
+ * @return {number}
+ */
+function getViewportHeight() {
+  return $window.innerHeight || $document.documentElement.clientHeight || $document.body.clientHeight;
+}
+
+/**
+ * Return normalized viewport width
+ * @return {number}
+ */
+function getViewportWidth() {
+  return $window.innerWidth || $document.documentElement.clientWidth || $document.body.clientWidth;
+}
+
+/**
+ * make sure an element isn't hidden by styles or etc
+ * @param  {Element}  el
+ * @return {Boolean}
+ */
+function isElementNotHidden(el) {
+  return el && el.offsetParent !== null && !el.getAttribute('hidden') && getComputedStyle(el).display !== 'none' && getComputedStyle(el).visibility !== 'hidden';
+}
+
+/**
+ * Apparently the fastest way...
+ * @param {Element} el
+ * @returns {boolean}
+ * @example if (!$visibility.isElementInViewport(el)) { ... }
+ */
+function isElementInViewport(el) {
+  var rect = el.getBoundingClientRect();
+
+  return rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= ($window.innerHeight || $document.documentElement.clientHeight) &&
+    rect.right <= ($window.innerWidth || $document.documentElement.clientWidth);
+}
+
+/**
+ * Simple 2D box collision detection
+ * @param {Element} element
+ * @param {Element} possibleContainingElement
+ * @returns {boolean}
+ * @example if ($visibility.isElementVisibleInsideAnother(el, el.parent)) { ... }
+ */
+function isElementInsideAnother(element, possibleContainingElement) {
+  var elementRect = element.getBoundingClientRect(),
+    possibleContainingElementRect = possibleContainingElement.getBoundingClientRect();
+
+  return elementRect.top >= possibleContainingElementRect.top &&
+    elementRect.left >= possibleContainingElementRect.left &&
+    elementRect.bottom <= possibleContainingElementRect.bottom &&
+    elementRect.right <= possibleContainingElementRect.right;
+}
+
+/**
+ * @param {Element} el
+ * @param  {ClientRect} rect
+ * @param {Number} preloadThreshold
+ * @param {Number} innerHeight
+ * @return {Boolean}
+ */
+function shouldBePreloaded(el, rect, preloadThreshold, innerHeight) {
+  return rect.bottom > preloadThreshold * -1 && rect.top <= innerHeight + preloadThreshold && isElementNotHidden(el);
+}
+
+/**
+ * Create a one-dimensional spacial hash of x
+ * @param {number} x
+ * @param {number} stepSize
+ * @param {number} optimalK
+ * @param {number} base
+ * @return {number}
+ */
+function getLinearSpacialHash(x, stepSize, optimalK, base) {
+  var index = Math.floor(x / (stepSize || 1)),
+    remainder = x % stepSize,
+    result = index.toString(base);
+
+  if (optimalK > 1) {
+    result += getLinearSpacialHash(remainder, Math.floor(stepSize / base), optimalK - 1, base);
+  }
+  return result;
+}
+
+/**
+ * @param {ClientRect} rect
+ * @param {number} innerHeight
+ * @returns {number}
+ */
+function getVerticallyVisiblePixels(rect, innerHeight) {
+  return min(innerHeight, max(rect.bottom, 0)) - min(max(rect.top, 0), innerHeight);
+}
+
+/**
+ * Get offset of element relative to entire page
+ *
+ * @param {Element} el
+ * @returns {{left: number, top: number}}
+ * @see http://jsperf.com/offset-vs-getboundingclientrect/7
+ */
+function getPageOffset(el) {
+  var offsetLeft = el.offsetLeft,
+    offsetTop = el.offsetTop;
+
+  while (el = el.offsetParent) {
+    offsetLeft += el.offsetLeft;
+    offsetTop += el.offsetTop;
+  }
+
+  return {
+    left: offsetLeft,
+    top: offsetTop
+  };
+}
+
+/**
+ * Execute function when any of the selectors become visible
+ *
+ * Safely stops watching all selectors after first 'shown' event.
+ *
+ * @param {string} selector
+ * @param {function} fn
+ * @returns {[Visible]}  Array of elements that we're watching for visibility
+ */
+function watchForAny(selector, fn) {
+  var el,
+    visibleList;
+
+  selector = selector.split(',');
+
+  visibleList = _filter(_map(selector, function (selector) {
+    el = $document.querySelector(selector);
+
+    return el && new Visible(el).on('shown', function () {
+      // stop watching for visibility
+      _invokeMap(visibleList, 'destroy');
+
+      // let them proceed
+      fn();
+    });
+  }));
+
+  return visibleList;
+}
+
+/**
+ * Create a new Visible class to observe when elements enter and leave the viewport
+ *
+ * Call destroy function to stop listening (this is until we have better support for watching for Node Removal)
+ * @param {Element} el
+ * @param {Object} [options]
+ * @param {number} [options.preloadThreshold]
+ * @param {number} [options.shownThreshold] Percentage of element that must be visible to trigger a "shown" event
+ * @param {number} [options.hiddenThreshold] Percentage of element that must be visible to trigger a "hidden" event
+ * @class
+ * @example  this.visible = new $visibility.Visible(el);
+ */
+Visible = function (el, options) {
+  options = options || {};
+  this.el = el;
+  this.seen = false;
+  this.preload = false;
+  this.preloadThreshold = options && options.preloadThreshold || 0;
+  this.shownThreshold = options && options.shownThreshold || 0;
+  this.hiddenThreshold = options && min(options.shownThreshold, options.hiddenThreshold) || 0;
+
+  // protect against adding undefined elements which cause the entire service to error on scroll if theyre added to the list
+  if (this.el) {
+    list.push(this);
+    updateVisibilityForItem(this); // set immediately to visible or not
+  }
+};
+Visible.prototype = {
+  /**
+   * Stop triggering.
+   */
+  destroy: function () {
+    // remove from list
+    var index = list.indexOf(this);
+
+    if (index > -1) {
+      list.splice(index, 1);
+    }
+  }
+  /**
+   * @name Visible#on
+   * @function
+   * @param {'shown'|'hidden'} e  EventName
+   * @param {function} cb  Callback
+   */
+  /**
+   * @name Visible#trigger
+   * @function
+   * @param {'shown'|'hidden'} e
+   * @param {{}}
+   */
+};
+Eventify.enable(Visible.prototype);
+
+VisibleEvent = function (type, options) {
+  this.type = type;
+  _assign(this, options);
+};
+
+// listen for scroll events (throttled)
+$document.addEventListener('scroll', _throttle(updateVisibility, 200));
+
+// public
+module.exports.getPageOffset = getPageOffset;
+module.exports.getLinearSpacialHash = getLinearSpacialHash;
+module.exports.getVerticallyVisiblePixels = getVerticallyVisiblePixels;
+module.exports.getViewportHeight = getViewportHeight;
+module.exports.getViewportWidth = getViewportWidth;
+module.exports.isElementNotHidden = isElementNotHidden;
+module.exports.isElementInViewport = isElementInViewport;
+module.exports.isElementInsideAnother = isElementInsideAnother;
+module.exports.watchForAny = watchForAny;
+module.exports.Visible = Visible;
+module.exports.setPrimaryContent = setPrimaryContent;
+module.exports.isBelowPrimaryContent = isBelowPrimaryContent;
+module.exports.updateVisibility = updateVisibility;
diff --git a/app/services/universal/youtube-video-player.js b/app/services/universal/youtube-video-player.js
new file mode 100644
index 0000000..99956c2
--- /dev/null
+++ b/app/services/universal/youtube-video-player.js
@@ -0,0 +1,148 @@
+/* global YT:false */
+'use strict';
+
+const _assign = require('lodash/assign'),
+  VIDEO_ID_RE = /v=([\w-]+)/,
+  videoQueue = [],
+  state = 'initializing';
+
+// Global client service for the YouTube player as primary video content playback.
+
+
+/**
+ * Adds a video configuration to the video queue
+ * @param {Object} videoConfig
+ * @param {string} videoConfig.videoContainerId
+ * @param {string} videoConfig.videoId
+ */
+function addVideo(videoConfig) {
+  if (videoConfig.videoContainerId && videoConfig.videoId) {
+    videoQueue.push(videoConfig);
+  } else {
+    console.warn('Video is missing Id or container Id to be render');
+  }
+}
+
+/**
+ * Extract video id from YT url
+ * @param {string} str
+ * @returns {string} video Id
+ */
+function extractVideoIdFromUrl(str) {
+  return VIDEO_ID_RE.test(str) ? VIDEO_ID_RE.exec(str)[1] : '';
+}
+
+/**
+ * create the YouTube / YT player
+ * @param {Object} videoConfig
+ * @param {string} videoConfig.videoContainerId
+ * @param {string} videoConfig.videoId
+ * @param {object} videoConfig.playerParams
+ */
+function createPlayer(videoConfig) {
+  var elementId = videoConfig.videoContainerId || '',
+    videoId = videoConfig.videoId || '',
+    player = null, // eslint-disable-line no-unused-vars
+    playerParams = videoConfig.playerParams || {},
+    customParams = videoConfig.customParams || {},
+    playerEvents = {
+      ready: new Event('player-ready-' + elementId),
+      start: new Event('player-start-' + elementId),
+      finish: new Event('player-finish-' + elementId)
+    };
+
+  if (elementId && videoId) {
+    player = new YT.Player(elementId, { // eslint-disable-line no-unused-vars
+      videoId: videoId,
+      height: 'auto',
+      width: '100%',
+      playerVars: playerParams,
+      events: {
+        onReady: handleVideoReady(playerEvents.ready, customParams),
+        onStateChange: videoStateChangeWrapper(customParams, playerEvents)
+      }
+    });
+  }
+}
+
+/**
+ * handleVideoReady
+ * @param {Object} event
+ * @param {string} customParams
+ * @returns {Function}
+ */
+function handleVideoReady(event, customParams) {
+  return function (e) {
+    document.dispatchEvent(event);
+    consumeNextVideoInQueue();
+
+    if (customParams && customParams.customPlayer && customParams.templateid) {
+      document.addEventListener(`customPlayer-${customParams.templateid}`, function () {
+        e.target.playVideo();
+      });
+    }
+
+    if (customParams && customParams.muted) {
+      e.target.mute();
+    }
+  };
+}
+
+/**
+ * Loads next video
+ * @param {Object} evt - video event
+ * @param {Boolean} shouldAutoplayNextVideo
+ */
+function loadNextVideo(evt, shouldAutoplayNextVideo) {
+  if (shouldAutoplayNextVideo !== 'true') {
+    evt.target.stopVideo();
+  }
+}
+
+/**
+ * Video state change wrapper
+ * @param {Object} customParams - custom configuration object
+ * @param {Object} playerEvents - YT player custom events
+ * @return {Function} handles when the video state changes
+ */
+function videoStateChangeWrapper(customParams, playerEvents) {
+  var hasVideoStarted = false;
+
+  return function handleVideoStateChange(playerEvt) {
+    if (playerEvt.data === YT.PlayerState.PLAYING && !hasVideoStarted) {
+      document.dispatchEvent(_assign(playerEvents.start,
+        {player: {videoId: extractVideoIdFromUrl(playerEvt.target.getVideoUrl()), videoDuration: Math.ceil(playerEvt.target.getDuration())}}
+      ));
+      hasVideoStarted = true;
+    }
+
+    if (playerEvt.data === YT.PlayerState.ENDED) {
+      document.dispatchEvent(playerEvents.finish);
+      loadNextVideo(playerEvt, customParams.autoPlayNextVideo);
+      hasVideoStarted = false;
+    }
+  };
+}
+
+/**
+ * Consumes Next video in the queue
+ */
+function consumeNextVideoInQueue() {
+  if (videoQueue.length) {
+    createPlayer(videoQueue.shift());
+  }
+}
+
+/**
+ * Inits video player process
+ * @param  {Object} videoConfig
+ */
+module.exports.init = function (videoConfig) {
+  if (videoConfig) {
+    addVideo(videoConfig);
+
+    if (state === 'initializing') {
+      consumeNextVideoInQueue();
+    }
+  }
+};
diff --git a/app/services/universal/youtube.js b/app/services/universal/youtube.js
new file mode 100644
index 0000000..e466d85
--- /dev/null
+++ b/app/services/universal/youtube.js
@@ -0,0 +1,31 @@
+'use strict';
+
+const rest = require('./rest'),
+  querystring = require('query-string'),
+  _get = require('lodash/get'),
+  moment = require('moment'),
+  YT_API = 'https://www.googleapis.com/youtube/v3',
+  log = require('./log').setup({ file: __filename });
+
+
+function getDurationInSeconds(duration) {
+  return moment.duration(duration, moment.ISO_8601).asSeconds();
+}
+
+function getVideoDetails(videoId) {
+  const videoSearchUrl = `${YT_API}/videos`,
+    qs = querystring.stringify({
+      part: 'snippet,contentDetails',
+      id: videoId,
+      key: process.env.YOUTUBE_API_KEY
+    });
+
+  return rest.get(`${videoSearchUrl}?${qs}`)
+    .then(res => Object.assign(
+      _get(res, 'items[0].snippet', {}),
+      { duration: getDurationInSeconds(_get(res, 'items[0].contentDetails.duration', 0)) }
+    ))
+    .catch(err => log('error', `Error fetching video details for video id ${videoId}: ${err.message}`));
+}
+
+module.exports.getVideoDetails = getVideoDetails;

From b6b99f1223a74827722a22ebbc33a302846fa36a Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Thu, 28 Feb 2019 17:58:14 -0500
Subject: [PATCH 03/45] youtube component

---
 app/components/youtube/bootstrap.yml          |   2 +-
 app/components/youtube/client.js              | 118 ------
 app/components/youtube/model.js               |  11 +-
 app/components/youtube/schema.yml             |   5 +-
 app/services/client/visibility.js             | 354 ------------------
 .../universal/youtube-video-player.js         | 148 --------
 6 files changed, 9 insertions(+), 629 deletions(-)
 delete mode 100644 app/components/youtube/client.js
 delete mode 100644 app/services/client/visibility.js
 delete mode 100644 app/services/universal/youtube-video-player.js

diff --git a/app/components/youtube/bootstrap.yml b/app/components/youtube/bootstrap.yml
index fb72cf0..753cebd 100644
--- a/app/components/youtube/bootstrap.yml
+++ b/app/components/youtube/bootstrap.yml
@@ -4,7 +4,7 @@ _components:
     videoType: 'editorial'
     videoLocation: 'article'
     playerCaption: ''
-    autoPlay: false
+    autoPlay: true
     autoPlayNextVideo: true
     videoPlaylist: ''
     playerBorderTopCTA: 'Watch'
diff --git a/app/components/youtube/client.js b/app/components/youtube/client.js
deleted file mode 100644
index 037b3b3..0000000
--- a/app/components/youtube/client.js
+++ /dev/null
@@ -1,118 +0,0 @@
-'use strict';
-
-const youtubeVideoPlayer = require('../../services/universal/youtube-video-player'),
-  $visibility = require('../../services/client/visibility');
-
-DS.controller('youtube', ['$gtm', function ($gtm) {
-  function Constructor(el) {
-    var videoConfig = {
-        videoContainerId: el.getAttribute('data-element-id').trim(),
-        videoId: el.getAttribute('data-video-id').trim(),
-        // player variables and settings
-        playerParams: {
-          loop: 1,
-          listType: 'playlist',
-          list: el.getAttribute('data-playlist').trim(),
-          autoplay: el.getAttribute('data-autoplay-video') === 'true' ? 1 : 0,
-          controls: 1,
-          enablejsapi: 1,
-          modestbranding: 1,
-          rel: 0,
-          showinfo: 0,
-          wmode: 'transparent'
-        },
-        customParams: {
-          autoPlayNextVideo: el.getAttribute('data-autoplay-next-video').trim(),
-          trackVideoType: el.getAttribute('data-track-video-type').trim(),
-          customPlayer: el.getAttribute('data-custom-play').trim(),
-          templateid: el.getAttribute('data-element-id').trim()
-        }
-      },
-      analytics = getAnalyticsCustomDimensions(el);
-
-    if (videoConfig.customParams.trackVideoType === 'Sponsored') {
-      videoConfig.playerParams.list = '';
-    }
-    this.el = el;
-    this.visible = new $visibility.Visible(this.el, { preloadThreshold: 800 });
-
-    // when the video player element enters the viewport, load the video(s)
-    if (this.visible.preload && $visibility.isElementNotHidden(el)) {
-      // if the YouTube api is ready the videos(s) can be loaded
-      if (window.nymYTApiReady === true) {
-        youtubeVideoPlayer.init(videoConfig);
-      } else {
-        // wait and listen for the YouTube api to be ready before loading the video(s)
-        document.addEventListener('nym-youtube-event:youtube-api-ready', function () {
-          youtubeVideoPlayer.init(videoConfig);
-        });
-      }
-    } else {
-      this.visible.on('preload', function () {
-        youtubeVideoPlayer.init(videoConfig);
-      });
-    }
-
-    /**
-     * Player ready event
-     * this fires when the player is initially loaded and pushes variables specific to the
-     * component into the data layer. Information about the video itself is captured from the
-     * native gtm.video trigger on play and finish
-     */
-    document.addEventListener('player-ready-' + videoConfig.videoContainerId, function () {
-      $gtm.reportNow(Object.assign({
-        youtubeAction: 'player ready'
-      }, analytics));
-    });
-
-    /**
-     * Player start event
-     *
-     * we don't need to send an event here, updating the video id for posterity
-     * also might be nice to send an event if we see the video id changed?
-     */
-    document.addEventListener('player-start-' + videoConfig.videoContainerId, function (evt) {
-      var hasChanged = el.getAttribute('data-video-id') !== evt.player.videoId;
-
-      if (hasChanged) {
-        updateElementAttributes(el, evt.player);
-        // this will tell the gtm.video trigger to stop ignoring gtm.video events
-        // in the case that an external video was played initially then switched to
-        // an internal playlist
-        $gtm.reportNow(Object.assign({
-          event: 'youtubeVideoReset',
-          youtubeVideoId: evt.player.videoId,
-          youtubeChannelName: 'New York Magazine'
-        }));
-      }
-    });
-  }
-
-  /**
-   * Updates Element attributes
-   * @param {Object} el - DOM node element
-   * @param {Object} config - Attributes values from player
-   */
-  function updateElementAttributes(el, config) {
-    el.setAttribute('data-video-id', config.videoId);
-  }
-
-  /**
-   * Gets analytics custom dimensions for video player
-   * @param {Object} el
-   * @returns {Object} analytics
-   */
-  function getAnalyticsCustomDimensions(el) {
-    return {
-      event: 'youtubeVideo',
-      youtubeVideoId: el.getAttribute('data-video-id'),
-      youtubeVideoLocation: el.getAttribute('data-track-video-location'),
-      youtubeVideoType: el.getAttribute('data-track-video-type'),
-      youtubeVideoTitle: el.getAttribute('data-track-video-title'),
-      youtubeChannelName: el.getAttribute('data-track-channel-name'),
-      youtubeVideoDuration: el.getAttribute('data-track-video-duration')
-    };
-  }
-
-  return Constructor;
-}]);
diff --git a/app/components/youtube/model.js b/app/components/youtube/model.js
index 477d54a..858067d 100644
--- a/app/components/youtube/model.js
+++ b/app/components/youtube/model.js
@@ -1,6 +1,6 @@
 'use strict';
 const _get = require('lodash/get'),
-  { getVideoDetails } = require('../../services/universal/youtube'),
+   { getVideoDetails } = require('../../services/universal/youtube'),
   defaultPlayerBorderTopCTA = 'Watch';
 
 /**
@@ -84,12 +84,13 @@ module.exports.save = (uri, data, locals) => {
     data.videoPlaylist = getDefaultPlaylistBySite(data, locals);
   }
 
-  if (data.videoId) {
-    return getVideoDetails(data.videoId)
-      .then(videoDetails => setVideoDetails(data, videoDetails));
-  }
+  //   if (data.videoId) {
+  //     return getVideoDetails(data.videoId)
+  //       .then(videoDetails => setVideoDetails(data, videoDetails));
+  //   }
 
   data.videoValid = true; // technically not an invalid video because no videoId so we don't want to show an error message in edit mode
 
   return data;
 };
+
diff --git a/app/components/youtube/schema.yml b/app/components/youtube/schema.yml
index 2aca8f1..50d21aa 100644
--- a/app/components/youtube/schema.yml
+++ b/app/components/youtube/schema.yml
@@ -1,4 +1,4 @@
-_version: 1.1
+_version: 1.3
 
 _description: |
   Youtube video embed for Clay. Can only be used for Youtube videos hosted by NYMag or Vulture. For externally hosted videos, use the Video component.
@@ -8,7 +8,6 @@ videoId:
   _publish: videoPlayerId
   _has:
     input: text
-  _subscribe: articleVideoId
 
 videoType:
   _label: Type
@@ -62,7 +61,7 @@ playerCaption:
   _has: text
 
 autoPlay:
-  _label: Autoplay on Page Load
+  _label: Autoplay with muted audio on Page Load
   _has: checkbox
 
 autoPlayNextVideo:
diff --git a/app/services/client/visibility.js b/app/services/client/visibility.js
deleted file mode 100644
index 67e18e6..0000000
--- a/app/services/client/visibility.js
+++ /dev/null
@@ -1,354 +0,0 @@
-'use strict';
-
-const $window = window,
-  $document = document,
-  _filter = require('lodash/filter'),
-  _map = require('lodash/map'),
-  _invokeMap = require('lodash/invokeMap'),
-  _assign = require('lodash/assign'),
-  _throttle = require('lodash/throttle'),
-  Eventify = require('eventify');
-var list = [],
-  Visible, VisibleEvent,
-  primaryContentEl; // need to hold on to this in case the page layout changes
-
-/**
- * the purpose of the primaryContentEl is to calculate if other elements are above or below it
- * this helps product determine if a module is doing well in a certain position
- * there can only be one primary content element on a page
- * @param {Element} [el]
- */
-function setPrimaryContent(el) {
-  if (el) {
-    primaryContentEl = el;
-  }
-}
-
-/**
- * for position we only care if it is below the content or not
- * @param {Element} el - element to measure position relative to primary content
- * @returns {boolean}
- */
-function isBelowPrimaryContent(el) {
-  // calculating position lazily as this function is not called frequently and the position can change
-  // alternative would be to cache primaryContentBottom and update on load and resize events
-  var primaryContentRect = primaryContentEl && primaryContentEl.getBoundingClientRect(),
-    elRect = el && el.getBoundingClientRect();
-
-  return !!(primaryContentRect && elRect && primaryContentRect.bottom < elRect.top);
-}
-
-/**
- * @param {number} a
- * @param {number} b
- * @returns {*}
- * @see http://jsperf.com/math-min-vs-if-condition-vs/8
- */
-function min(a, b) {
-  return a < b ? a : b;
-}
-
-/**
- * @param {number} a
- * @param {number} b
- * @returns {*}
- * @see http://jsperf.com/math-min-vs-if-condition-vs/8
- */
-function max(a, b) {
-  return a > b ? a : b;
-}
-
-/**
- * Fast loop through watched elements
- */
-function updateVisibility() {
-  list.forEach(updateVisibilityForItem);
-}
-
-/**
- * updates seen property
- * @param  {Visble} item
- * @param  {{}} evt
- * @fires Visible#shown
- * @fires Visible#hidden
- */
-function updateSeen(item, evt) {
-  var px = evt.visiblePx,
-    percent = evt.visiblePercent;
-
-  // if some pixels are visible and we're greater/equal to threshold
-  if (px && percent >= item.shownThreshold && !item.seen) {
-    item.seen = true;
-    setTimeout(function () {
-      item.trigger('shown', new VisibleEvent('shown', evt));
-    }, 15);
-
-    // if no pixels or percent is less than threshold
-  } else if ((!px || percent < item.hiddenThreshold) && item.seen) {
-    item.seen = false;
-    setTimeout(function () {
-      item.trigger('hidden', new VisibleEvent('hidden', evt));
-    }, 15);
-  }
-}
-
-/**
- * sets preload property
- * @param  {Visible} item
- * @param  {{}} evt
- * @param  {Number} innerHeight
- * @fires Visible#preload
- */
-function updatePreload(item, evt, innerHeight) {
-  if (!item.preload && item.preloadThreshold && shouldBePreloaded(evt.target, evt.rect, item.preloadThreshold, innerHeight)) {
-    item.preload = true;
-    setTimeout(function () {
-      item.trigger('preload', new VisibleEvent('preload', evt));
-    }, 15);
-  }
-}
-
-/**
- * Trigger events
- * @param {Visible} item
- */
-function updateVisibilityForItem(item) {
-  var rect = item.el.getBoundingClientRect(),
-    innerHeight = $window.innerHeight || $document.documentElement.clientHeight,
-    px = getVerticallyVisiblePixels(rect, innerHeight),
-    percent = px / (rect.height || innerHeight),
-    evt = {
-      target: item.el,
-      rect: rect,
-      visiblePx: px,
-      visiblePercent: percent
-    };
-
-  updateSeen(item, evt);
-  updatePreload(item, evt, innerHeight);
-}
-
-/**
- * Return normalized viewport height
- * @return {number}
- */
-function getViewportHeight() {
-  return $window.innerHeight || $document.documentElement.clientHeight || $document.body.clientHeight;
-}
-
-/**
- * Return normalized viewport width
- * @return {number}
- */
-function getViewportWidth() {
-  return $window.innerWidth || $document.documentElement.clientWidth || $document.body.clientWidth;
-}
-
-/**
- * make sure an element isn't hidden by styles or etc
- * @param  {Element}  el
- * @return {Boolean}
- */
-function isElementNotHidden(el) {
-  return el && el.offsetParent !== null && !el.getAttribute('hidden') && getComputedStyle(el).display !== 'none' && getComputedStyle(el).visibility !== 'hidden';
-}
-
-/**
- * Apparently the fastest way...
- * @param {Element} el
- * @returns {boolean}
- * @example if (!$visibility.isElementInViewport(el)) { ... }
- */
-function isElementInViewport(el) {
-  var rect = el.getBoundingClientRect();
-
-  return rect.top >= 0 &&
-    rect.left >= 0 &&
-    rect.bottom <= ($window.innerHeight || $document.documentElement.clientHeight) &&
-    rect.right <= ($window.innerWidth || $document.documentElement.clientWidth);
-}
-
-/**
- * Simple 2D box collision detection
- * @param {Element} element
- * @param {Element} possibleContainingElement
- * @returns {boolean}
- * @example if ($visibility.isElementVisibleInsideAnother(el, el.parent)) { ... }
- */
-function isElementInsideAnother(element, possibleContainingElement) {
-  var elementRect = element.getBoundingClientRect(),
-    possibleContainingElementRect = possibleContainingElement.getBoundingClientRect();
-
-  return elementRect.top >= possibleContainingElementRect.top &&
-    elementRect.left >= possibleContainingElementRect.left &&
-    elementRect.bottom <= possibleContainingElementRect.bottom &&
-    elementRect.right <= possibleContainingElementRect.right;
-}
-
-/**
- * @param {Element} el
- * @param  {ClientRect} rect
- * @param {Number} preloadThreshold
- * @param {Number} innerHeight
- * @return {Boolean}
- */
-function shouldBePreloaded(el, rect, preloadThreshold, innerHeight) {
-  return rect.bottom > preloadThreshold * -1 && rect.top <= innerHeight + preloadThreshold && isElementNotHidden(el);
-}
-
-/**
- * Create a one-dimensional spacial hash of x
- * @param {number} x
- * @param {number} stepSize
- * @param {number} optimalK
- * @param {number} base
- * @return {number}
- */
-function getLinearSpacialHash(x, stepSize, optimalK, base) {
-  var index = Math.floor(x / (stepSize || 1)),
-    remainder = x % stepSize,
-    result = index.toString(base);
-
-  if (optimalK > 1) {
-    result += getLinearSpacialHash(remainder, Math.floor(stepSize / base), optimalK - 1, base);
-  }
-  return result;
-}
-
-/**
- * @param {ClientRect} rect
- * @param {number} innerHeight
- * @returns {number}
- */
-function getVerticallyVisiblePixels(rect, innerHeight) {
-  return min(innerHeight, max(rect.bottom, 0)) - min(max(rect.top, 0), innerHeight);
-}
-
-/**
- * Get offset of element relative to entire page
- *
- * @param {Element} el
- * @returns {{left: number, top: number}}
- * @see http://jsperf.com/offset-vs-getboundingclientrect/7
- */
-function getPageOffset(el) {
-  var offsetLeft = el.offsetLeft,
-    offsetTop = el.offsetTop;
-
-  while (el = el.offsetParent) {
-    offsetLeft += el.offsetLeft;
-    offsetTop += el.offsetTop;
-  }
-
-  return {
-    left: offsetLeft,
-    top: offsetTop
-  };
-}
-
-/**
- * Execute function when any of the selectors become visible
- *
- * Safely stops watching all selectors after first 'shown' event.
- *
- * @param {string} selector
- * @param {function} fn
- * @returns {[Visible]}  Array of elements that we're watching for visibility
- */
-function watchForAny(selector, fn) {
-  var el,
-    visibleList;
-
-  selector = selector.split(',');
-
-  visibleList = _filter(_map(selector, function (selector) {
-    el = $document.querySelector(selector);
-
-    return el && new Visible(el).on('shown', function () {
-      // stop watching for visibility
-      _invokeMap(visibleList, 'destroy');
-
-      // let them proceed
-      fn();
-    });
-  }));
-
-  return visibleList;
-}
-
-/**
- * Create a new Visible class to observe when elements enter and leave the viewport
- *
- * Call destroy function to stop listening (this is until we have better support for watching for Node Removal)
- * @param {Element} el
- * @param {Object} [options]
- * @param {number} [options.preloadThreshold]
- * @param {number} [options.shownThreshold] Percentage of element that must be visible to trigger a "shown" event
- * @param {number} [options.hiddenThreshold] Percentage of element that must be visible to trigger a "hidden" event
- * @class
- * @example  this.visible = new $visibility.Visible(el);
- */
-Visible = function (el, options) {
-  options = options || {};
-  this.el = el;
-  this.seen = false;
-  this.preload = false;
-  this.preloadThreshold = options && options.preloadThreshold || 0;
-  this.shownThreshold = options && options.shownThreshold || 0;
-  this.hiddenThreshold = options && min(options.shownThreshold, options.hiddenThreshold) || 0;
-
-  // protect against adding undefined elements which cause the entire service to error on scroll if theyre added to the list
-  if (this.el) {
-    list.push(this);
-    updateVisibilityForItem(this); // set immediately to visible or not
-  }
-};
-Visible.prototype = {
-  /**
-   * Stop triggering.
-   */
-  destroy: function () {
-    // remove from list
-    var index = list.indexOf(this);
-
-    if (index > -1) {
-      list.splice(index, 1);
-    }
-  }
-  /**
-   * @name Visible#on
-   * @function
-   * @param {'shown'|'hidden'} e  EventName
-   * @param {function} cb  Callback
-   */
-  /**
-   * @name Visible#trigger
-   * @function
-   * @param {'shown'|'hidden'} e
-   * @param {{}}
-   */
-};
-Eventify.enable(Visible.prototype);
-
-VisibleEvent = function (type, options) {
-  this.type = type;
-  _assign(this, options);
-};
-
-// listen for scroll events (throttled)
-$document.addEventListener('scroll', _throttle(updateVisibility, 200));
-
-// public
-module.exports.getPageOffset = getPageOffset;
-module.exports.getLinearSpacialHash = getLinearSpacialHash;
-module.exports.getVerticallyVisiblePixels = getVerticallyVisiblePixels;
-module.exports.getViewportHeight = getViewportHeight;
-module.exports.getViewportWidth = getViewportWidth;
-module.exports.isElementNotHidden = isElementNotHidden;
-module.exports.isElementInViewport = isElementInViewport;
-module.exports.isElementInsideAnother = isElementInsideAnother;
-module.exports.watchForAny = watchForAny;
-module.exports.Visible = Visible;
-module.exports.setPrimaryContent = setPrimaryContent;
-module.exports.isBelowPrimaryContent = isBelowPrimaryContent;
-module.exports.updateVisibility = updateVisibility;
diff --git a/app/services/universal/youtube-video-player.js b/app/services/universal/youtube-video-player.js
deleted file mode 100644
index 99956c2..0000000
--- a/app/services/universal/youtube-video-player.js
+++ /dev/null
@@ -1,148 +0,0 @@
-/* global YT:false */
-'use strict';
-
-const _assign = require('lodash/assign'),
-  VIDEO_ID_RE = /v=([\w-]+)/,
-  videoQueue = [],
-  state = 'initializing';
-
-// Global client service for the YouTube player as primary video content playback.
-
-
-/**
- * Adds a video configuration to the video queue
- * @param {Object} videoConfig
- * @param {string} videoConfig.videoContainerId
- * @param {string} videoConfig.videoId
- */
-function addVideo(videoConfig) {
-  if (videoConfig.videoContainerId && videoConfig.videoId) {
-    videoQueue.push(videoConfig);
-  } else {
-    console.warn('Video is missing Id or container Id to be render');
-  }
-}
-
-/**
- * Extract video id from YT url
- * @param {string} str
- * @returns {string} video Id
- */
-function extractVideoIdFromUrl(str) {
-  return VIDEO_ID_RE.test(str) ? VIDEO_ID_RE.exec(str)[1] : '';
-}
-
-/**
- * create the YouTube / YT player
- * @param {Object} videoConfig
- * @param {string} videoConfig.videoContainerId
- * @param {string} videoConfig.videoId
- * @param {object} videoConfig.playerParams
- */
-function createPlayer(videoConfig) {
-  var elementId = videoConfig.videoContainerId || '',
-    videoId = videoConfig.videoId || '',
-    player = null, // eslint-disable-line no-unused-vars
-    playerParams = videoConfig.playerParams || {},
-    customParams = videoConfig.customParams || {},
-    playerEvents = {
-      ready: new Event('player-ready-' + elementId),
-      start: new Event('player-start-' + elementId),
-      finish: new Event('player-finish-' + elementId)
-    };
-
-  if (elementId && videoId) {
-    player = new YT.Player(elementId, { // eslint-disable-line no-unused-vars
-      videoId: videoId,
-      height: 'auto',
-      width: '100%',
-      playerVars: playerParams,
-      events: {
-        onReady: handleVideoReady(playerEvents.ready, customParams),
-        onStateChange: videoStateChangeWrapper(customParams, playerEvents)
-      }
-    });
-  }
-}
-
-/**
- * handleVideoReady
- * @param {Object} event
- * @param {string} customParams
- * @returns {Function}
- */
-function handleVideoReady(event, customParams) {
-  return function (e) {
-    document.dispatchEvent(event);
-    consumeNextVideoInQueue();
-
-    if (customParams && customParams.customPlayer && customParams.templateid) {
-      document.addEventListener(`customPlayer-${customParams.templateid}`, function () {
-        e.target.playVideo();
-      });
-    }
-
-    if (customParams && customParams.muted) {
-      e.target.mute();
-    }
-  };
-}
-
-/**
- * Loads next video
- * @param {Object} evt - video event
- * @param {Boolean} shouldAutoplayNextVideo
- */
-function loadNextVideo(evt, shouldAutoplayNextVideo) {
-  if (shouldAutoplayNextVideo !== 'true') {
-    evt.target.stopVideo();
-  }
-}
-
-/**
- * Video state change wrapper
- * @param {Object} customParams - custom configuration object
- * @param {Object} playerEvents - YT player custom events
- * @return {Function} handles when the video state changes
- */
-function videoStateChangeWrapper(customParams, playerEvents) {
-  var hasVideoStarted = false;
-
-  return function handleVideoStateChange(playerEvt) {
-    if (playerEvt.data === YT.PlayerState.PLAYING && !hasVideoStarted) {
-      document.dispatchEvent(_assign(playerEvents.start,
-        {player: {videoId: extractVideoIdFromUrl(playerEvt.target.getVideoUrl()), videoDuration: Math.ceil(playerEvt.target.getDuration())}}
-      ));
-      hasVideoStarted = true;
-    }
-
-    if (playerEvt.data === YT.PlayerState.ENDED) {
-      document.dispatchEvent(playerEvents.finish);
-      loadNextVideo(playerEvt, customParams.autoPlayNextVideo);
-      hasVideoStarted = false;
-    }
-  };
-}
-
-/**
- * Consumes Next video in the queue
- */
-function consumeNextVideoInQueue() {
-  if (videoQueue.length) {
-    createPlayer(videoQueue.shift());
-  }
-}
-
-/**
- * Inits video player process
- * @param  {Object} videoConfig
- */
-module.exports.init = function (videoConfig) {
-  if (videoConfig) {
-    addVideo(videoConfig);
-
-    if (state === 'initializing') {
-      consumeNextVideoInQueue();
-    }
-  }
-};

From 03770ca9ab6205ece7f8062ec376b3a25ac035c6 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Thu, 28 Feb 2019 18:12:16 -0500
Subject: [PATCH 04/45] Create youtube.css

---
 .../_default/components/youtube.css           | 102 ++++++++++++++++++
 1 file changed, 102 insertions(+)
 create mode 100644 app/styleguides/_default/components/youtube.css

diff --git a/app/styleguides/_default/components/youtube.css b/app/styleguides/_default/components/youtube.css
new file mode 100644
index 0000000..3f32ea1
--- /dev/null
+++ b/app/styleguides/_default/components/youtube.css
@@ -0,0 +1,102 @@
+$text-stack: 'MillerText', Georgia, serif;
+
+.lede-video .youtube,
+.lede-video .youtube.edit-mode {
+  margin: 0;
+}
+
+.youtube {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 0 24px;
+
+  &-headline {
+    color: #000;
+    font: 21px / 25px $text-stack;
+    letter-spacing: -.01em;
+    margin: 0 0 6px;
+  }
+
+  &-caption {
+    color: #000;
+  }
+
+  &-headerline,
+  &-caption,
+  & .player-wrapper {
+    flex: 0 0 100%;
+  }
+
+  &.edit-mode {
+    height: auto;
+    margin: 0 0 40px -100px;
+
+    .youtube-video-preview {
+      width: 100%;
+    }
+  }
+
+  &.border-top {
+    border-top: 1px solid #000;
+  }
+
+  &.border-top:before {
+    color: #000;
+    font: 15px Egyptienne, Georgia, serif;
+    letter-spacing: 2px;
+    padding: 8px 0 16px;
+    text-transform: uppercase;
+  }
+
+  & .player-wrapper {
+    margin: 0 0 10px;
+  }
+
+  & .player {
+    padding-top: calc((9/16) * 100%);
+    position: relative;
+  }
+
+  & .player iframe {
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  & + & {
+    margin-top: -5px;
+  }
+
+  @media screen and (min-width: 768px) {
+    margin: 0 0 40px -60px;
+
+    & + & {
+      margin-top: 0;
+    }
+
+    &.sponsored.break-out,
+    &.editorial.break-out {
+      width: 700px;
+    }
+  }
+
+  @media screen and (min-width: 1180px) {
+    margin: 0 0 40px -100px;
+
+    &.embedded {
+      margin: 0 0 40px;
+      width: 600px;
+    }
+
+    &.sponsored.break-out,
+    &.editorial.break-out {
+      width: 1100px;
+    }
+  }
+}
+
+.article .youtube .attribution {
+  margin: 0;
+}

From aa83fc3b21aedfab5973d7687a3b974d3014cbb9 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Thu, 28 Feb 2019 22:01:06 -0500
Subject: [PATCH 05/45] added youtube video player js

---
 app/components/youtube/client.js              | 118 +++
 app/services/client/gtm.js                    | 691 ++++++++++++++++++
 app/services/client/visibility.js             | 354 +++++++++
 .../universal/youtube-video-player.js         | 148 ++++
 4 files changed, 1311 insertions(+)
 create mode 100644 app/components/youtube/client.js
 create mode 100644 app/services/client/gtm.js
 create mode 100644 app/services/client/visibility.js
 create mode 100644 app/services/universal/youtube-video-player.js

diff --git a/app/components/youtube/client.js b/app/components/youtube/client.js
new file mode 100644
index 0000000..bea530a
--- /dev/null
+++ b/app/components/youtube/client.js
@@ -0,0 +1,118 @@
+'use strict';
+
+const youtubeVideoPlayer = require('../../services/universal/youtube-video-player'),
+  $visibility = require('../../services/client/visibility'),
+  $gtm = require('../../services/client/gtm');
+
+module.exports = (el) => {
+  var autoplay = el.getAttribute('data-autoplay-video') === 'true',
+    videoConfig = {
+      videoContainerId: el.getAttribute('data-element-id').trim(),
+      videoId: el.getAttribute('data-video-id').trim(),
+      // player variables and settings
+      playerParams: {
+        loop: 1,
+        listType: 'playlist',
+        list: el.getAttribute('data-playlist').trim(),
+        autoplay: autoplay ? 1 : 0,
+        controls: 1,
+        enablejsapi: 1,
+        modestbranding: 1,
+        rel: 0,
+        showinfo: 0,
+        wmode: 'transparent'
+      },
+      customParams: {
+        autoPlayNextVideo: el.getAttribute('data-autoplay-next-video').trim(),
+        trackVideoType: el.getAttribute('data-track-video-type').trim(),
+        customPlayer: el.getAttribute('data-custom-play').trim(),
+        templateid: el.getAttribute('data-element-id').trim(),
+        muted: autoplay // always mute autplaying videos
+      }
+    },
+    analytics = getAnalyticsCustomDimensions(el),
+    visible;
+
+  if (videoConfig.customParams.trackVideoType === 'Sponsored') {
+    videoConfig.playerParams.list = '';
+  }
+
+  visible = new $visibility.Visible(el, { preloadThreshold: 800 });
+
+  // when the video player element enters the viewport, load the video(s)
+  if (visible.preload && $visibility.isElementNotHidden(el)) {
+    // if the YouTube api is ready the videos(s) can be loaded
+    if (window.nymYTApiReady === true) {
+      youtubeVideoPlayer.init(videoConfig);
+    } else {
+      // wait and listen for the YouTube api to be ready before loading the video(s)
+      document.addEventListener('nym-youtube-event:youtube-api-ready', function () {
+        youtubeVideoPlayer.init(videoConfig);
+      });
+    }
+  } else {
+    visible.on('preload', function () {
+      youtubeVideoPlayer.init(videoConfig);
+    });
+  }
+
+  /**
+   * Player ready event
+   * this fires when the player is initially loaded and pushes variables specific to the
+   * component into the data layer. Information about the video itself is captured from the
+   * native gtm.video trigger on play and finish
+   */
+  document.addEventListener('player-ready-' + videoConfig.videoContainerId, function () {
+    $gtm.reportNow(Object.assign({
+      youtubeAction: 'player ready'
+    }, analytics));
+  });
+
+  /**
+   * Player start event
+   *
+   * we don't need to send an event here, updating the video id for posterity
+   * also might be nice to send an event if we see the video id changed?
+   */
+  document.addEventListener('player-start-' + videoConfig.videoContainerId, function (evt) {
+    var hasChanged = el.getAttribute('data-video-id') !== evt.player.videoId;
+
+    if (hasChanged) {
+      updateElementAttributes(el, evt.player);
+      // this will tell the gtm.video trigger to stop ignoring gtm.video events
+      // in the case that an external video was played initially then switched to
+      // an internal playlist
+      $gtm.reportNow(Object.assign({
+        event: 'youtubeVideoReset',
+        youtubeVideoId: evt.player.videoId,
+        youtubeChannelName: 'New York Magazine'
+      }));
+    }
+  });
+};
+
+/**
+ * Updates Element attributes
+ * @param {Object} el - DOM node element
+ * @param {Object} config - Attributes values from player
+ */
+function updateElementAttributes(el, config) {
+  el.setAttribute('data-video-id', config.videoId);
+}
+
+/**
+ * Gets analytics custom dimensions for video player
+ * @param {Object} el
+ * @returns {Object} analytics
+ */
+function getAnalyticsCustomDimensions(el) {
+  return {
+    event: 'youtubeVideo',
+    youtubeVideoId: el.getAttribute('data-video-id'),
+    youtubeVideoLocation: el.getAttribute('data-track-video-location'),
+    youtubeVideoType: el.getAttribute('data-track-video-type'),
+    youtubeVideoTitle: el.getAttribute('data-track-video-title'),
+    youtubeChannelName: el.getAttribute('data-track-channel-name'),
+    youtubeVideoDuration: el.getAttribute('data-track-video-duration')
+  };
+}
diff --git a/app/services/client/gtm.js b/app/services/client/gtm.js
new file mode 100644
index 0000000..2ccfa4f
--- /dev/null
+++ b/app/services/client/gtm.js
@@ -0,0 +1,691 @@
+'use strict';
+
+/**
+ * ========
+ * Overview
+ * ========
+ *
+ * This `$gtm` service is a hub for Google Tag Manager (GTM) and does the following:
+ *
+ * 1. Loads GTM if the `gtm` component is on the page and `head-gtm` is not in the head
+ *
+ * 2. Reports events from client.js of components:
+ *    - `$gtm.reportNow` reports immediately,
+ *    - whereas `$gtm.reportSoon` will send the event in the next batch.
+ *    - example components: `clay-share` and `share-button`
+ *
+ * 3. Reports events based on data-attributes as defined in component templates.
+ *    - see the `config` below for details on specific data-attributes
+ *
+ * 4. Pushed events to the dataLayer in batches, which are then sent to GTM and GA
+ *    - `eventsQueue` array is the queue
+ *    - `processQueueDelay` defines the frequency of reporting batches
+ *    - the queue is also reported when the mouse exits the top of the window
+ *    - there could be more optimizations here in the future
+ *
+ */
+
+var page = require('./page'),
+  initializedOnLoad = false,
+  vertical = page.getVertical(),
+  pageType = page.getPageType(),
+  author = page.getAuthor(),
+  eventsQueue = [], // enables us to send multiple events with one dataLayer push  and pixel fire to google
+  isCurrentlyReporting = false,
+  processQueueDelay = 1000 * 30,// wait 30 seconds before reporting in case more events happen
+  typeAttr = 'data-track-type',
+  zoneAttr = 'data-track-zone',
+  pageZoneAttr = 'data-page-zone',
+  verticalPositionAttr = 'data-vertical-position',
+  gtmPageZoneKey = 'pageZone',
+  gtmVerticalPositionKey = 'verticalPosition',
+  publicVisitState;
+const dom = require('@nymag/dom'),
+  _assign = require('lodash/assign'),
+  _find = require('lodash/find'),
+  _debounce = require('lodash/debounce'),
+  _each = require('lodash/each'),
+  productLinks = require('./product-links'),
+  $visibility = require('./visibility'),
+  visit = require('./visit'),
+
+  /**
+   * the `config`
+   *
+   * anything unique to an event type should be added to the config below
+   * changes made here may require a corresponding change in component templates
+   * `data-track-type` is used as keys below
+   * the `init` function is run on load and can be used to add event listeners
+   * the `getDataOnView` function is optional and can add data at the time of the view or event
+   */
+  config = {
+    /**
+     *
+     * An `article-detail` is for the full article
+     *
+     * - Add `data-track-type="article-detail"` to the article element
+     * - Add data-track variables used in the `init` function below
+     * - Example: https://github.com/nymag/sites/blob/master/components/article/template.handlebars#L1
+     *
+     */
+    'article-detail': {
+      init: function (el) {
+        var crosspostString = el.getAttribute('data-crosspost') ? 'cross-posted' : '',
+          syndicationString = getSyndicationString(el),
+          dataOnLoad = {
+            id: el.getAttribute('data-uri'),
+            name: el.getAttribute('data-headline'),
+            brand: vertical,
+            category: el.getAttribute('data-content-channel'),
+            variant: el.getAttribute('data-type'),
+            dimension1: el.getAttribute('data-authors'),
+            dimension2: el.getAttribute('data-headline'),
+            dimension3: el.getAttribute('data-publish-date'),
+            dimension19: el.getAttribute('data-tags'),
+            dimension45: crosspostString && syndicationString ? crosspostString + ', ' + syndicationString : crosspostString || syndicationString
+          };
+
+        if (window.fbq) {
+          window.fbq('track', 'ViewContent', {content_name: dataOnLoad.brand, content_category: dataOnLoad.category, content_type: 'product', content_ids: [dataOnLoad.variant]});
+        }
+
+        module.exports.reportSoon({
+          // We support both `articleDetail` and `productDetail` as GTM triggers;
+          // the latter is used on legacy pages, whereas the former is used here
+          event: 'articleDetail',
+          ecommerce: {
+            detail: {
+              products: [dataOnLoad]
+            }
+          }
+        });
+      }
+    },
+    /**
+     * An article-list is any group of one or more articles that are used to recirculate
+     *
+     * - Add `data-track-type="article-list"` to the element containing article(s)
+     * - Add data-track variables used in the `init` function below
+     *
+     * example: https://github.com/nymag/sites/blob/master/components/most-popular/template.handlebars#L1
+     */
+    'article-list': {
+      init: function (el, dataTrackType) {
+        var dataUri = el.getAttribute('data-uri'),
+          childTrackEl = el.querySelector('[' + typeAttr + ']'),
+          dataOnLoad = {
+            id: dataUri,
+            name: el.getAttribute('data-track-name') ||
+              (dataUri || '').split('/_components/').pop().split('/')[0],
+            list: page.getPageUri(),
+            // uses data-track-type of child:
+            // could hard-code this in the template if it does not work in future cases
+            variant: childTrackEl && childTrackEl.getAttribute(typeAttr),
+            brand: vertical,
+            category: page.getChannel(),
+            dimension23: dataTrackType,
+            // This is for the `ooyala-recirc-lede` component tracking video source
+            dimension39: el.getAttribute('data-track-video-source') || 'undefined'
+          };
+
+        addEcommProductEvents(el, dataTrackType, dataOnLoad, {
+          impressionName: 'componentImpressions',
+          clickName: 'componentClick'
+        });
+      },
+      getDataOnView: getPosition
+    },
+    /**
+     * An article-link is a link to another article, normally within an article-list
+     *
+     * - Add `data-track-type="article-link"` to the element containing the link
+     * - Add data-track variables used in the `init` function below
+     *
+     * example: https://github.com/nymag/sites/blob/master/components/most-popular/template.handlebars#L21-L23
+     */
+    'article-link': {
+      init: function (el, dataTrackType) {
+        var authorsOnIndexPages = el.getAttribute('data-track-authors'),
+          paginationOnIndexPages = el.getAttribute('data-track-pagination'),
+          dataOnLoad = {
+            id: el.getAttribute('data-track-page-uri'),
+            name: el.getAttribute('data-track-headline'),
+            position: el.getAttribute('data-track-index'),
+            // useful to distinguish between multiple instances of the
+            // components, like section components (homepage-section component)
+            list: el.getAttribute('data-track-component-name'),
+            dimension23: dataTrackType,
+            dimension38: getNearestComponentTitle(el)
+          };
+
+        // authors and pagination are only required on "index" pages, e.g. homepage or section page
+        if (authorsOnIndexPages) {
+          dataOnLoad.dimension1 = authorsOnIndexPages;
+        }
+        if (paginationOnIndexPages) {
+          dataOnLoad.dimension35 = paginationOnIndexPages;
+        }
+
+        addEcommProductEvents(el, dataTrackType, dataOnLoad, {
+          impressionName: 'articleImpressions',
+          clickName: 'articleClick'
+        });
+      }
+    },
+    /**
+     * A product-list is any group of one or more products
+     *
+     * - If a `product-link` is not within a `product-list` then the pageUri is used as the list id
+     * - Add `data-track-type="product-list"` to the element containing product(s)
+     * - Add data-track variables used in the `init` function below
+     * - The element should have data-uri
+     *
+     * example: https://github.com/nymag/sites/blob/master/components/product-hits/template.handlebars#L1
+     */
+    'product-list': {
+      init: function (el, dataTrackType) {
+        var dataUri = el.getAttribute('data-uri'),
+          childTrackEl = el.querySelector('[' + typeAttr + ']'),
+          dataOnLoad = {
+            id: dataUri,
+            name: el.getAttribute('data-track-name') ||
+              (dataUri || '').split('/_components/').pop().split('/')[0],
+            list: page.getPageUri(),
+            // uses data-track-type of child:
+            // could hard-code this in the template if it does not work in future cases
+            variant: childTrackEl && childTrackEl.getAttribute(typeAttr),
+            brand: vertical,
+            category: page.getChannel(),
+            dimension23: dataTrackType
+          };
+
+        addEcommProductEvents(el, dataTrackType, dataOnLoad, {
+          impressionName: 'componentImpressions',
+          clickName: 'componentClick'
+        });
+      },
+      getDataOnView: getPosition
+    },
+    /**
+     * A product-link is a link to product
+     *
+     * - Add `data-track-type="product-link"` to the element containing the link
+     * - Add data-track variables used in the `init` function below
+     *
+     * example: https://github.com/nymag/sites/blob/master/components/product-hit/template.handlebars#L10
+     */
+    'product-link': {
+      init: function (el, dataTrackType, visitState) {
+        var inlineProductVariant = 'product - link',
+          dataOnLoad = {
+            id: el.getAttribute('data-track-id'),
+            name: el.getAttribute('data-track-name'),
+            brand: el.getAttribute('data-track-brand') || vertical,
+            // default to inline product variant so that we do not need to set another data-attribute for all inline product links
+            variant: el.getAttribute('data-track-variant') || inlineProductVariant,
+            dimension23: dataTrackType,
+            // default list id to the page uri (e.g. for links within paragraphs)
+            list: el.getAttribute('data-track-component-name') || page.getPageUri(),
+            dimension47: el.getAttribute('data-track-test-group')
+          };
+
+        // process product-link (e.g. add/extend amazon subtag)
+        // NOTE: not ideal to bundle product-link behavior into an analytics reporting service,
+        // but adding here has the performance benefit of avoiding duplicate dom querying to find product-links
+        productLinks.initLink(el, visitState);
+        addEcommProductEvents(el, dataTrackType, dataOnLoad, {
+          impressionName: 'productImpressions',
+          clickName: 'productClick'
+        });
+      }
+    },
+    /**
+     * A newsletter-signup is a form to subscribe to a newsletter
+     *
+     * - Add `data-track-type="newsletter-signup"` to the element containing the newsletter signup form
+     * - Add data-track variables used in the `init` function below
+     *
+     * example: https://github.com/nymag/sites/blob/master/components/newsletter-sign-up/template.handlebars#L1
+     */
+    'newsletter-signup': {
+      init: function (el, dataTrackType) {
+        var eventName = 'newsletter',
+          dataOnLoad = {
+            // `newsletter` value is different for impression and click
+            // `pageZone` and `verticalPosition` handled by `getPosition`
+            newsletterId: el.getAttribute('data-track-id'),
+            dimension23: dataTrackType
+          },
+          elForm = el.querySelector('form'),
+          newsletterPrefix = el.parentElement && el.parentElement.classList.contains('modal') ? 'nl modal ' : 'nl sub ';
+
+        queueOnceVisible(el, dataTrackType, dataOnLoad, function queueCustomEventImpression(el, dataTrackType, dataOnLoad) {
+          eventsQueue.push(_assign({
+            event: eventName,
+            newsletter: newsletterPrefix + 'display' // todo: move this into gtm with another event trigger name
+          }, addDataOnView(el, dataTrackType, dataOnLoad)));
+        });
+        if (elForm) {
+          elForm.addEventListener('submit', function (e) {
+            e.preventDefault();
+            module.exports.reportNow(_assign({
+              event: eventName,
+              newsletter: newsletterPrefix + 'submit',
+              dimension23: dataTrackType
+            }, addDataOnView(el, dataTrackType, dataOnLoad)));
+          });
+        }
+      },
+      getDataOnView: getPosition
+    },
+    /**
+     * A subscription is the promotion for a newsletter signup: what the user clicks on to get to the form
+     *
+     * - Add `data-track-type="subscription-item"` to the element containing the subscription promo
+     * - Add data-track variables used in the `init` function below
+     *
+     * example: https://github.com/nymag/sites/blob/15942970e53b04b5ac9d66aec0afd5dce5bd0399/_components/di-header/template.handlebars#L9
+     */
+    'subscription-item': {
+      init: function (el, type) {
+        var id = el.getAttribute('data-track-id'),
+          creative = el.getAttribute('data-track-creative'),
+          promoClick = {
+            ecommerce: {
+              promoClick: {
+                promotions: [{
+                  id: id,
+                  name: id,
+                  creative: creative
+                }]
+              }
+            }
+          };
+
+        if (el) {
+          el.addEventListener('click', function () {
+            module.exports.reportNow(_assign({
+              event: 'promotionClick'
+            }, addDataOnView(el, type, promoClick)));
+          });
+        }
+      }
+    },
+    /**
+     * A subscription view is the promotion for a newsletter signup: the module a user scrolls over before selecting a subscription type, e.g. gift subscription
+     *
+     * - Add `data-track-type="subscription-list"` to the element containing the subscription promotion module
+     * - Add data-track variables used in the `init` function below
+     *
+     * example: https://github.com/nymag/sites/blob/15942970e53b04b5ac9d66aec0afd5dce5bd0399/components/di-header/template.handlebars#L8
+     */
+    'subscription-list': {
+      init: function (el, type) {
+        var id = el.getAttribute('data-track-type'),
+          promoView = {
+            ecommerce: {
+              promoView: {
+                promotions: [{
+                  id: id,
+                  name: id
+                }]
+              }
+            }
+          };
+
+        queueOnceVisible(el, type, promoView, function queueCustomEventImpression(el, type, promoView) {
+          eventsQueue.push(_assign({
+            event: 'promoView'
+          }, addDataOnView(el, type, promoView)));
+        });
+      }
+    }
+  };
+
+function getSyndicationString(el) {
+  var syndicationAttr = el.getAttribute('data-syndication'),
+    syndicatedCopy = syndicationAttr === 'copy' ? 'syndicated copy' : '',
+    syndicatedOriginal = syndicationAttr === 'syndicated' ? 'syndicated original' : '';
+
+  return syndicatedCopy || syndicatedOriginal;
+}
+
+window.dataLayer = window.dataLayer || [];
+
+/**
+ * get the component title from itself or parent
+ * @param {Element} el
+ * @returns {*|string}
+ */
+function getNearestComponentTitle(el) {
+  var dataAttribute = 'data-track-component-title',
+    title = el && el.getAttribute(dataAttribute),
+    parentEl;
+
+  // in some cases data attribute is attached to the parent component
+  if (!title) {
+    parentEl = dom.closest(el, '[' + dataAttribute + ']');
+    title = parentEl && parentEl.getAttribute(dataAttribute);
+  }
+  return title;
+}
+
+/**
+ * adds standard click and impression tracking for e-commerce products
+ * @param {Element} el
+ * @param {string} type
+ * @param {object} dataOnLoad
+ * @param {object} eventNames
+ * @param {string} eventNames.impressionName
+ * @param {string} eventNames.clickName
+ */
+function addEcommProductEvents(el, type, dataOnLoad, eventNames) {
+  queueOnceVisible(el, type, dataOnLoad, queueEcommProductImpression(eventNames.impressionName));
+  addEcommProductClickHandler(el, type, dataOnLoad, eventNames.clickName);
+}
+
+/**
+ * push impression events to the events queue
+ * @param {string} eventName
+ * @returns {Function}
+ */
+function queueEcommProductImpression(eventName) {
+  return function (el, type, dataOnLoad) {
+    var impressionData = addDataOnView(el, type, dataOnLoad),
+      impressionsContainer = _find(eventsQueue, function (eventContainer) {
+        return eventContainer.event === eventName;
+      });
+
+    if (impressionsContainer) {
+      impressionsContainer.ecommerce.impressions.push(impressionData);
+    } else {
+      eventsQueue.push({
+        event: eventName,
+        ecommerce: {
+          impressions: [impressionData]
+        }
+      });
+    }
+  };
+}
+
+/**
+ * Adds zone attributes:
+ *  Vertical Position is a percentage based on how far the top of the component is from the top of the zone.
+ *  Page Zone is the name of the zone
+ *
+ * We wait as long as possible (i.e. until the element is visible) to calculate
+ * so that there is time for images to load/height of elements to be more stable.
+ *
+ * On subsequent calls, the value will be retrieved from the data-attribute on the element.
+ * @param {Element} el
+ * @returns {object}
+ */
+function getPosition(el) {
+  var zone, zoneRect, elRect,
+    // attempt to get zone previously found
+    pageZone = el.getAttribute(pageZoneAttr),
+    verticalPosition = el.getAttribute(verticalPositionAttr),
+    obj = {};
+
+  if (!pageZone || !verticalPosition) {
+    // get zone for the first time
+    zone = dom.closest(el, '[' + zoneAttr + ']');
+    if (zone) {
+      pageZone = zone.getAttribute(zoneAttr);
+      zoneRect = zone.getBoundingClientRect();
+      elRect = el.getBoundingClientRect();
+      verticalPosition = +((elRect.top - zoneRect.top) / zoneRect.height).toFixed(2);
+      // store value for subsequent requests
+      el.setAttribute(pageZoneAttr, pageZone);
+      el.setAttribute(verticalPositionAttr, verticalPosition);
+    }
+  }
+  obj[gtmPageZoneKey] = pageZone;
+  obj[gtmVerticalPositionKey] = parseInt(verticalPosition, 10); // ensure number in case from data-attr
+  return obj;
+}
+
+/**
+ * test if the element is likely an image
+ * @param {Element} el
+ * @returns {boolean}
+ */
+function isImage(el) {
+  var nodeName = (el && el.nodeName || '').toLowerCase();
+
+  switch (nodeName) {
+    case 'img':
+    case 'svg':
+    case 'path':
+    case 'canvas':
+      return true;
+    default:
+      return false;
+  }
+}
+
+/**
+ * report product click through the eventsQueue
+ * by adding to the eventsQueue, all other queued events will report with one pixel fire
+ * @param {Element} el
+ * @param {string} type
+ * @param {object} dataOnLoad
+ * @param {string} eventName
+ */
+function addEcommProductClickHandler(el, type, dataOnLoad, eventName) {
+  var optionFromEl = el.getAttribute('data-track-option');
+
+  el.addEventListener('click', function (e) {
+    var data = addDataOnView(el, type, dataOnLoad),
+      target = e.target;
+
+    module.exports.reportNow({
+      event: eventName,
+      ecommerce: {
+        click: {
+          actionField: {
+            list: data.list,
+            option: optionFromEl || target && target.getAttribute('data-track-option') || (isImage(target) ? 'Image' : 'Text')
+          },
+          products: [ data ]
+        }
+      }
+    });
+  });
+}
+
+/**
+ * this adds values that cannot be added on page load
+ * some data is only accurate at the time of the event, e.g. position
+ * NOTE: we assume that keys returned here are the same as in gtm
+ * this is set in the config with a `getDataOnView` function
+ * @param {Element} el
+ * @param {string} type
+ * @param {object} dataOnLoad
+ * @returns {Object}
+ */
+function addDataOnView(el, type, dataOnLoad) {
+  var fn = config[type].getDataOnView;
+
+  return fn ? _assign(dataOnLoad, fn(el)) : dataOnLoad;
+}
+
+/**
+ * once the element is visible, then add it to a queue to be reported in batches
+ * @param {Element} el
+ * @param {string} type
+ * @param {object} dataOnLoad -- data for the event available on page load
+ * @param {Function} addToQueueFn
+ */
+function queueOnceVisible(el, type, dataOnLoad, addToQueueFn) {
+  var visible = new $visibility.Visible(el, { shownThreshold: 0.5 });
+
+  visible.on('shown', function () {
+    if ($visibility.isElementNotHidden(el)) {
+      addToQueueFn(el, type, dataOnLoad);
+      module.exports.reportSoon();
+    }
+  });
+}
+
+/**
+ * queues any events given in the params and reports with the next batch of events
+ * @param {...object} optional event(s)
+ * @returns {Function}
+ */
+function debounceReportNow() {
+  var debouncedReportNow = _debounce(module.exports.reportNow, processQueueDelay);
+
+  return function () {
+    eventsQueue.push.apply(eventsQueue, arguments);
+    debouncedReportNow();
+  };
+}
+
+/**
+ * queues any events given in the params and reports the queue immediately
+ * @param {...object} optional event(s)
+ */
+function reportNow() {
+  eventsQueue.push.apply(eventsQueue, arguments);
+  if (!isCurrentlyReporting) {
+    isCurrentlyReporting = true;
+    if (eventsQueue.length > 0) {
+      window.dataLayer.push.apply(window.dataLayer, eventsQueue);
+      eventsQueue = [];
+    }
+    isCurrentlyReporting = false;
+  }
+}
+
+/**
+ * scrape all of the components on the page that have event attributes
+ * and run their init function
+ * @param {object} visitState
+ * @param {Element} element - optional parent element to query inside
+ */
+function initializeEventsFromDom(visitState, element) {
+  var elementContainer = element ? element : document.body,
+    eventElements = elementContainer.querySelectorAll('[' + typeAttr + ']');
+
+
+  _each(eventElements, function (el) {
+    var type = el.getAttribute(typeAttr),
+      typeConfig = config[type];
+
+    if (typeConfig && typeConfig.init) {
+      typeConfig.init(el, type, visitState);
+    }
+  });
+}
+
+/**
+ * Initialize all trackable elements in the provided container element
+ * useful for tracking elements added to the page after the initial load
+ *
+ * @param {Element} el
+ */
+function initializeElement(el) {
+  if (!initializedOnLoad) { return; }
+
+  initializeEventsFromDom(publicVisitState, el);
+}
+
+/**
+ * loads GTM and initializes the dataLayer
+ * @param {string} containerId
+ * @param {object} visitState
+ * @param {string} visitState.clientId
+ * @param {string} visitState.pageUri
+ */
+function initializeGtmAndDataLayer(containerId, visitState) {
+  //  dataLayer push prior to loading GTM
+  module.exports.reportNow({
+    event: 'dataLayer-initialized',
+    userDetails: {
+      newYorkMediaUserID: visitState.clientId,
+      loyaltyLevel: visitState.userLoyalty
+    },
+    pageDetails: {
+      pageUri: visitState.pageUri,
+      vertical: vertical,
+      pageType: pageType,
+      author: author
+    }
+  });
+
+  // Load GTM: https://developers.google.com/tag-manager/quickstart
+  /* eslint-disable */
+  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer',containerId);
+  /* eslint-enable */
+}
+
+/**
+ * loads gtm; called by `gtm` component which places gtm in the body
+ * @param {string} containerId  - GTM container id to load
+ */
+function initGtm(containerId) {
+  const isGtmLoadedByGtmHead = !!document.head.querySelector('.head-gtm');
+
+  if (initializedOnLoad) {
+    return; // run only once
+  }
+  initializedOnLoad = true;
+  visit.onceReady(function (visitState) {
+    publicVisitState = visitState;
+
+    if (!isGtmLoadedByGtmHead) {
+      // if page has `head-gtm` component, then gtm was already loaded inline in the head
+      initializeGtmAndDataLayer(containerId, visitState);
+    }
+    initializeEventsFromDom(visitState);
+
+    // report on load
+    module.exports.reportNow();
+
+    // report when user intends to exit
+    document.addEventListener('mouseleave', function (e) {
+      if (e.clientY < 0) {
+        module.exports.reportNow();
+      }
+    }, false);
+  });
+}
+
+/**
+ * report a custom event
+ * @param {object}  opts
+ * @param {string}  opts.category - event category (e.g. 'interactives')
+ * @param {string}  opts.action - event action (e.g. 'article end')
+ * @param {string}  opts.label - event label (e.g. 'on=[page-url]')
+ * @param {object}  [customDimensions] - optional argument for any numbered custom dimesions
+ */
+
+function reportCustomEvent(opts, customDimensions) {
+  var category = opts.category,
+    action = opts.action,
+    label = opts.label,
+    dimensions = {
+      event: 'universalCustomEvent',
+      customEventCategory: category && category.trim(),
+      customEventAction: action && action.trim(),
+      customEventLabel: label && label.trim()
+    };
+
+  if (!!customDimensions) {
+    dimensions = Object.assign(dimensions, customDimensions);
+  }
+
+  reportNow(dimensions);
+}
+
+module.exports.init = initGtm;
+module.exports.reportNow = reportNow;
+module.exports.reportSoon = debounceReportNow.call(this);
+module.exports.reportCustomEvent = reportCustomEvent;
+module.exports.initializeElement = initializeElement;
diff --git a/app/services/client/visibility.js b/app/services/client/visibility.js
new file mode 100644
index 0000000..67e18e6
--- /dev/null
+++ b/app/services/client/visibility.js
@@ -0,0 +1,354 @@
+'use strict';
+
+const $window = window,
+  $document = document,
+  _filter = require('lodash/filter'),
+  _map = require('lodash/map'),
+  _invokeMap = require('lodash/invokeMap'),
+  _assign = require('lodash/assign'),
+  _throttle = require('lodash/throttle'),
+  Eventify = require('eventify');
+var list = [],
+  Visible, VisibleEvent,
+  primaryContentEl; // need to hold on to this in case the page layout changes
+
+/**
+ * the purpose of the primaryContentEl is to calculate if other elements are above or below it
+ * this helps product determine if a module is doing well in a certain position
+ * there can only be one primary content element on a page
+ * @param {Element} [el]
+ */
+function setPrimaryContent(el) {
+  if (el) {
+    primaryContentEl = el;
+  }
+}
+
+/**
+ * for position we only care if it is below the content or not
+ * @param {Element} el - element to measure position relative to primary content
+ * @returns {boolean}
+ */
+function isBelowPrimaryContent(el) {
+  // calculating position lazily as this function is not called frequently and the position can change
+  // alternative would be to cache primaryContentBottom and update on load and resize events
+  var primaryContentRect = primaryContentEl && primaryContentEl.getBoundingClientRect(),
+    elRect = el && el.getBoundingClientRect();
+
+  return !!(primaryContentRect && elRect && primaryContentRect.bottom < elRect.top);
+}
+
+/**
+ * @param {number} a
+ * @param {number} b
+ * @returns {*}
+ * @see http://jsperf.com/math-min-vs-if-condition-vs/8
+ */
+function min(a, b) {
+  return a < b ? a : b;
+}
+
+/**
+ * @param {number} a
+ * @param {number} b
+ * @returns {*}
+ * @see http://jsperf.com/math-min-vs-if-condition-vs/8
+ */
+function max(a, b) {
+  return a > b ? a : b;
+}
+
+/**
+ * Fast loop through watched elements
+ */
+function updateVisibility() {
+  list.forEach(updateVisibilityForItem);
+}
+
+/**
+ * updates seen property
+ * @param  {Visble} item
+ * @param  {{}} evt
+ * @fires Visible#shown
+ * @fires Visible#hidden
+ */
+function updateSeen(item, evt) {
+  var px = evt.visiblePx,
+    percent = evt.visiblePercent;
+
+  // if some pixels are visible and we're greater/equal to threshold
+  if (px && percent >= item.shownThreshold && !item.seen) {
+    item.seen = true;
+    setTimeout(function () {
+      item.trigger('shown', new VisibleEvent('shown', evt));
+    }, 15);
+
+    // if no pixels or percent is less than threshold
+  } else if ((!px || percent < item.hiddenThreshold) && item.seen) {
+    item.seen = false;
+    setTimeout(function () {
+      item.trigger('hidden', new VisibleEvent('hidden', evt));
+    }, 15);
+  }
+}
+
+/**
+ * sets preload property
+ * @param  {Visible} item
+ * @param  {{}} evt
+ * @param  {Number} innerHeight
+ * @fires Visible#preload
+ */
+function updatePreload(item, evt, innerHeight) {
+  if (!item.preload && item.preloadThreshold && shouldBePreloaded(evt.target, evt.rect, item.preloadThreshold, innerHeight)) {
+    item.preload = true;
+    setTimeout(function () {
+      item.trigger('preload', new VisibleEvent('preload', evt));
+    }, 15);
+  }
+}
+
+/**
+ * Trigger events
+ * @param {Visible} item
+ */
+function updateVisibilityForItem(item) {
+  var rect = item.el.getBoundingClientRect(),
+    innerHeight = $window.innerHeight || $document.documentElement.clientHeight,
+    px = getVerticallyVisiblePixels(rect, innerHeight),
+    percent = px / (rect.height || innerHeight),
+    evt = {
+      target: item.el,
+      rect: rect,
+      visiblePx: px,
+      visiblePercent: percent
+    };
+
+  updateSeen(item, evt);
+  updatePreload(item, evt, innerHeight);
+}
+
+/**
+ * Return normalized viewport height
+ * @return {number}
+ */
+function getViewportHeight() {
+  return $window.innerHeight || $document.documentElement.clientHeight || $document.body.clientHeight;
+}
+
+/**
+ * Return normalized viewport width
+ * @return {number}
+ */
+function getViewportWidth() {
+  return $window.innerWidth || $document.documentElement.clientWidth || $document.body.clientWidth;
+}
+
+/**
+ * make sure an element isn't hidden by styles or etc
+ * @param  {Element}  el
+ * @return {Boolean}
+ */
+function isElementNotHidden(el) {
+  return el && el.offsetParent !== null && !el.getAttribute('hidden') && getComputedStyle(el).display !== 'none' && getComputedStyle(el).visibility !== 'hidden';
+}
+
+/**
+ * Apparently the fastest way...
+ * @param {Element} el
+ * @returns {boolean}
+ * @example if (!$visibility.isElementInViewport(el)) { ... }
+ */
+function isElementInViewport(el) {
+  var rect = el.getBoundingClientRect();
+
+  return rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= ($window.innerHeight || $document.documentElement.clientHeight) &&
+    rect.right <= ($window.innerWidth || $document.documentElement.clientWidth);
+}
+
+/**
+ * Simple 2D box collision detection
+ * @param {Element} element
+ * @param {Element} possibleContainingElement
+ * @returns {boolean}
+ * @example if ($visibility.isElementVisibleInsideAnother(el, el.parent)) { ... }
+ */
+function isElementInsideAnother(element, possibleContainingElement) {
+  var elementRect = element.getBoundingClientRect(),
+    possibleContainingElementRect = possibleContainingElement.getBoundingClientRect();
+
+  return elementRect.top >= possibleContainingElementRect.top &&
+    elementRect.left >= possibleContainingElementRect.left &&
+    elementRect.bottom <= possibleContainingElementRect.bottom &&
+    elementRect.right <= possibleContainingElementRect.right;
+}
+
+/**
+ * @param {Element} el
+ * @param  {ClientRect} rect
+ * @param {Number} preloadThreshold
+ * @param {Number} innerHeight
+ * @return {Boolean}
+ */
+function shouldBePreloaded(el, rect, preloadThreshold, innerHeight) {
+  return rect.bottom > preloadThreshold * -1 && rect.top <= innerHeight + preloadThreshold && isElementNotHidden(el);
+}
+
+/**
+ * Create a one-dimensional spacial hash of x
+ * @param {number} x
+ * @param {number} stepSize
+ * @param {number} optimalK
+ * @param {number} base
+ * @return {number}
+ */
+function getLinearSpacialHash(x, stepSize, optimalK, base) {
+  var index = Math.floor(x / (stepSize || 1)),
+    remainder = x % stepSize,
+    result = index.toString(base);
+
+  if (optimalK > 1) {
+    result += getLinearSpacialHash(remainder, Math.floor(stepSize / base), optimalK - 1, base);
+  }
+  return result;
+}
+
+/**
+ * @param {ClientRect} rect
+ * @param {number} innerHeight
+ * @returns {number}
+ */
+function getVerticallyVisiblePixels(rect, innerHeight) {
+  return min(innerHeight, max(rect.bottom, 0)) - min(max(rect.top, 0), innerHeight);
+}
+
+/**
+ * Get offset of element relative to entire page
+ *
+ * @param {Element} el
+ * @returns {{left: number, top: number}}
+ * @see http://jsperf.com/offset-vs-getboundingclientrect/7
+ */
+function getPageOffset(el) {
+  var offsetLeft = el.offsetLeft,
+    offsetTop = el.offsetTop;
+
+  while (el = el.offsetParent) {
+    offsetLeft += el.offsetLeft;
+    offsetTop += el.offsetTop;
+  }
+
+  return {
+    left: offsetLeft,
+    top: offsetTop
+  };
+}
+
+/**
+ * Execute function when any of the selectors become visible
+ *
+ * Safely stops watching all selectors after first 'shown' event.
+ *
+ * @param {string} selector
+ * @param {function} fn
+ * @returns {[Visible]}  Array of elements that we're watching for visibility
+ */
+function watchForAny(selector, fn) {
+  var el,
+    visibleList;
+
+  selector = selector.split(',');
+
+  visibleList = _filter(_map(selector, function (selector) {
+    el = $document.querySelector(selector);
+
+    return el && new Visible(el).on('shown', function () {
+      // stop watching for visibility
+      _invokeMap(visibleList, 'destroy');
+
+      // let them proceed
+      fn();
+    });
+  }));
+
+  return visibleList;
+}
+
+/**
+ * Create a new Visible class to observe when elements enter and leave the viewport
+ *
+ * Call destroy function to stop listening (this is until we have better support for watching for Node Removal)
+ * @param {Element} el
+ * @param {Object} [options]
+ * @param {number} [options.preloadThreshold]
+ * @param {number} [options.shownThreshold] Percentage of element that must be visible to trigger a "shown" event
+ * @param {number} [options.hiddenThreshold] Percentage of element that must be visible to trigger a "hidden" event
+ * @class
+ * @example  this.visible = new $visibility.Visible(el);
+ */
+Visible = function (el, options) {
+  options = options || {};
+  this.el = el;
+  this.seen = false;
+  this.preload = false;
+  this.preloadThreshold = options && options.preloadThreshold || 0;
+  this.shownThreshold = options && options.shownThreshold || 0;
+  this.hiddenThreshold = options && min(options.shownThreshold, options.hiddenThreshold) || 0;
+
+  // protect against adding undefined elements which cause the entire service to error on scroll if theyre added to the list
+  if (this.el) {
+    list.push(this);
+    updateVisibilityForItem(this); // set immediately to visible or not
+  }
+};
+Visible.prototype = {
+  /**
+   * Stop triggering.
+   */
+  destroy: function () {
+    // remove from list
+    var index = list.indexOf(this);
+
+    if (index > -1) {
+      list.splice(index, 1);
+    }
+  }
+  /**
+   * @name Visible#on
+   * @function
+   * @param {'shown'|'hidden'} e  EventName
+   * @param {function} cb  Callback
+   */
+  /**
+   * @name Visible#trigger
+   * @function
+   * @param {'shown'|'hidden'} e
+   * @param {{}}
+   */
+};
+Eventify.enable(Visible.prototype);
+
+VisibleEvent = function (type, options) {
+  this.type = type;
+  _assign(this, options);
+};
+
+// listen for scroll events (throttled)
+$document.addEventListener('scroll', _throttle(updateVisibility, 200));
+
+// public
+module.exports.getPageOffset = getPageOffset;
+module.exports.getLinearSpacialHash = getLinearSpacialHash;
+module.exports.getVerticallyVisiblePixels = getVerticallyVisiblePixels;
+module.exports.getViewportHeight = getViewportHeight;
+module.exports.getViewportWidth = getViewportWidth;
+module.exports.isElementNotHidden = isElementNotHidden;
+module.exports.isElementInViewport = isElementInViewport;
+module.exports.isElementInsideAnother = isElementInsideAnother;
+module.exports.watchForAny = watchForAny;
+module.exports.Visible = Visible;
+module.exports.setPrimaryContent = setPrimaryContent;
+module.exports.isBelowPrimaryContent = isBelowPrimaryContent;
+module.exports.updateVisibility = updateVisibility;
diff --git a/app/services/universal/youtube-video-player.js b/app/services/universal/youtube-video-player.js
new file mode 100644
index 0000000..caaf61e
--- /dev/null
+++ b/app/services/universal/youtube-video-player.js
@@ -0,0 +1,148 @@
+/* global YT:false */
+'use strict';
+
+const _assign = require('lodash/assign'),
+  VIDEO_ID_RE = /v=([\w-]+)/,
+  videoQueue = [],
+  state = 'initializing';
+
+// Global client service for the YouTube player as primary video content playback.
+
+
+/**
+ * Adds a video configuration to the video queue
+ * @param {Object} videoConfig
+ * @param {string} videoConfig.videoContainerId
+ * @param {string} videoConfig.videoId
+ */
+function addVideo(videoConfig) {
+  if (videoConfig.videoContainerId && videoConfig.videoId) {
+    videoQueue.push(videoConfig);
+  } else {
+    console.warn('Video is missing Id or container Id to be render');
+  }
+}
+
+/**
+ * Extract video id from YT url
+ * @param {string} str
+ * @returns {string} video Id
+ */
+function extractVideoIdFromUrl(str) {
+  return VIDEO_ID_RE.test(str) ? VIDEO_ID_RE.exec(str)[1] : '';
+}
+
+/**
+ * create the YouTube / YT player
+ * @param {Object} videoConfig
+ * @param {string} videoConfig.videoContainerId
+ * @param {string} videoConfig.videoId
+ * @param {object} videoConfig.playerParams
+ */
+function createPlayer(videoConfig) {
+  var elementId = videoConfig.videoContainerId || '',
+    videoId = videoConfig.videoId || '',
+    player = null, // eslint-disable-line no-unused-vars
+    playerParams = videoConfig.playerParams || {},
+    customParams = videoConfig.customParams || {},
+    playerEvents = {
+      ready: new Event('player-ready-' + elementId),
+      start: new Event('player-start-' + elementId),
+      finish: new Event('player-finish-' + elementId)
+    };
+
+  if (elementId && videoId) {
+    player = new YT.Player(elementId, { // eslint-disable-line no-unused-vars
+      videoId: videoId,
+      height: 'auto',
+      width: '100%',
+      playerVars: playerParams,
+      events: {
+        onReady: handleVideoReady(playerEvents.ready, customParams),
+        onStateChange: videoStateChangeWrapper(customParams, playerEvents)
+      }
+    });
+  }
+}
+
+/**
+ * handleVideoReady
+ * @param {Object} event
+ * @param {string} customParams
+ * @returns {Function}
+ */
+function handleVideoReady(event, customParams) {
+  return function (e) {
+    document.dispatchEvent(event);
+    consumeNextVideoInQueue();
+
+    if (customParams && customParams.customPlayer && customParams.templateid) {
+      document.addEventListener(`customPlayer-${customParams.templateid}`, function () {
+        e.target.playVideo();
+      });
+    }
+
+    if (customParams && customParams.muted) {
+      e.target.setVolume(0);
+    }
+  };
+}
+
+/**
+ * Loads next video
+ * @param {Object} evt - video event
+ * @param {Boolean} shouldAutoplayNextVideo
+ */
+function loadNextVideo(evt, shouldAutoplayNextVideo) {
+  if (shouldAutoplayNextVideo !== 'true') {
+    evt.target.stopVideo();
+  }
+}
+
+/**
+ * Video state change wrapper
+ * @param {Object} customParams - custom configuration object
+ * @param {Object} playerEvents - YT player custom events
+ * @return {Function} handles when the video state changes
+ */
+function videoStateChangeWrapper(customParams, playerEvents) {
+  var hasVideoStarted = false;
+
+  return function handleVideoStateChange(playerEvt) {
+    if (playerEvt.data === YT.PlayerState.PLAYING && !hasVideoStarted) {
+      document.dispatchEvent(_assign(playerEvents.start,
+        {player: {videoId: extractVideoIdFromUrl(playerEvt.target.getVideoUrl()), videoDuration: Math.ceil(playerEvt.target.getDuration())}}
+      ));
+      hasVideoStarted = true;
+    }
+
+    if (playerEvt.data === YT.PlayerState.ENDED) {
+      document.dispatchEvent(playerEvents.finish);
+      loadNextVideo(playerEvt, customParams.autoPlayNextVideo);
+      hasVideoStarted = false;
+    }
+  };
+}
+
+/**
+ * Consumes Next video in the queue
+ */
+function consumeNextVideoInQueue() {
+  if (videoQueue.length) {
+    createPlayer(videoQueue.shift());
+  }
+}
+
+/**
+ * Inits video player process
+ * @param  {Object} videoConfig
+ */
+module.exports.init = function (videoConfig) {
+  if (videoConfig) {
+    addVideo(videoConfig);
+
+    if (state === 'initializing') {
+      consumeNextVideoInQueue();
+    }
+  }
+};

From a20a5bb63a827028a8a4a1c78af96b63668c6d43 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Fri, 1 Mar 2019 20:00:06 -0500
Subject: [PATCH 06/45] yotube component

---
 .../youtube-player-head/bootstrap.yml         |   3 +
 app/components/youtube-player-head/schema.yml |   2 +
 .../youtube-player-head/template.hbs          |  19 +
 app/components/youtube/client.js              |   2 +
 app/components/youtube/model.js               |  10 +-
 app/layouts/layout-simple/schema.yml          |   1 +
 app/layouts/layout/schema.yml                 |   2 +
 app/package-lock.json                         |  24 +
 app/package.json                              |   3 +
 app/services/client/gtm.js                    |   2 +-
 app/services/client/page.js                   |  67 +++
 app/services/client/product-links.js          |  84 +++
 app/services/client/product-skimlinks.js      | 160 ++++++
 app/services/client/product-subtags.js        | 358 ++++++++++++
 app/services/client/third-party.js            |  71 +++
 app/services/client/visit.js                  | 534 ++++++++++++++++++
 app/services/universal/youtube.js             |   7 +-
 17 files changed, 1342 insertions(+), 7 deletions(-)
 create mode 100644 app/components/youtube-player-head/bootstrap.yml
 create mode 100644 app/components/youtube-player-head/schema.yml
 create mode 100644 app/components/youtube-player-head/template.hbs
 create mode 100644 app/services/client/page.js
 create mode 100644 app/services/client/product-links.js
 create mode 100644 app/services/client/product-skimlinks.js
 create mode 100644 app/services/client/product-subtags.js
 create mode 100644 app/services/client/third-party.js
 create mode 100644 app/services/client/visit.js

diff --git a/app/components/youtube-player-head/bootstrap.yml b/app/components/youtube-player-head/bootstrap.yml
new file mode 100644
index 0000000..c181c03
--- /dev/null
+++ b/app/components/youtube-player-head/bootstrap.yml
@@ -0,0 +1,3 @@
+_components:
+  youtube-player-head:
+    allowed: true
diff --git a/app/components/youtube-player-head/schema.yml b/app/components/youtube-player-head/schema.yml
new file mode 100644
index 0000000..1deb251
--- /dev/null
+++ b/app/components/youtube-player-head/schema.yml
@@ -0,0 +1,2 @@
+_description: |
+  Note: Required for `video-player` component. YouTube API scripts, add component to head for best YouTube player performance.
diff --git a/app/components/youtube-player-head/template.hbs b/app/components/youtube-player-head/template.hbs
new file mode 100644
index 0000000..6e242f1
--- /dev/null
+++ b/app/components/youtube-player-head/template.hbs
@@ -0,0 +1,19 @@
+<!-- data-uri="{{ default _ref _self }}" -->
+{{#unless @root.locals.edit}}
+  {{! NYM flags for `video-player` component instances
+    player instances will first look for `nymYTApiReady` to be `true`
+    if `false`, player instances will listen for the event `nym-youtube-event:youtube-api-ready` }}
+  <script>
+    var nymYTApiReady = false;
+    window.onYouTubeIframeAPIReady = function () {
+      {{! when the YouTube API script is ready, dispatch an `nym-youtube-event:youtube-api-ready` event }}
+      var nymEventYTApiReady = new Event('nym-youtube-event:youtube-api-ready');
+      document.dispatchEvent(nymEventYTApiReady);
+      {{! change this flag to 'true' when the YouTube api is ready }}
+      nymYTApiReady = true;
+    }
+  </script>
+
+  {{! add the YouTube API script to the head for fastest player creation }}
+  <script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
+{{/unless}}
diff --git a/app/components/youtube/client.js b/app/components/youtube/client.js
index bea530a..6d2e70a 100644
--- a/app/components/youtube/client.js
+++ b/app/components/youtube/client.js
@@ -116,3 +116,5 @@ function getAnalyticsCustomDimensions(el) {
     youtubeVideoDuration: el.getAttribute('data-track-video-duration')
   };
 }
+
+// module.exports = (el) =>{console.log(el);};
diff --git a/app/components/youtube/model.js b/app/components/youtube/model.js
index 858067d..c717d3a 100644
--- a/app/components/youtube/model.js
+++ b/app/components/youtube/model.js
@@ -1,6 +1,6 @@
 'use strict';
 const _get = require('lodash/get'),
-   { getVideoDetails } = require('../../services/universal/youtube'),
+  { getVideoDetails } = require('../../services/universal/youtube'),
   defaultPlayerBorderTopCTA = 'Watch';
 
 /**
@@ -84,10 +84,10 @@ module.exports.save = (uri, data, locals) => {
     data.videoPlaylist = getDefaultPlaylistBySite(data, locals);
   }
 
-  //   if (data.videoId) {
-  //     return getVideoDetails(data.videoId)
-  //       .then(videoDetails => setVideoDetails(data, videoDetails));
-  //   }
+  if (data.videoId) {
+    return getVideoDetails(data.videoId)
+      .then(videoDetails => setVideoDetails(data, videoDetails));
+  }
 
   data.videoValid = true; // technically not an invalid video because no videoId so we don't want to show an error message in edit mode
 
diff --git a/app/layouts/layout-simple/schema.yml b/app/layouts/layout-simple/schema.yml
index 350041c..6c70002 100644
--- a/app/layouts/layout-simple/schema.yml
+++ b/app/layouts/layout-simple/schema.yml
@@ -18,6 +18,7 @@ headLayout:
     include:
       - meta-site
       - meta-icons
+      - youtube-player-head
 top:
   _componentList:
     include:
diff --git a/app/layouts/layout/schema.yml b/app/layouts/layout/schema.yml
index 1b40f9a..3f9a243 100644
--- a/app/layouts/layout/schema.yml
+++ b/app/layouts/layout/schema.yml
@@ -12,12 +12,14 @@ head:
       - meta-keywords
       - meta-authors
       - meta-image
+      - youtube-player-head
 
 headLayout:
   _componentList:
     include:
       - meta-site
       - meta-icons
+      - youtube-player-head
 top:
   _componentList:
     include: []
diff --git a/app/package-lock.json b/app/package-lock.json
index 2daac14..fd12693 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -726,6 +726,15 @@
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
     },
+    "@nymag/dom": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@nymag/dom/-/dom-1.3.2.tgz",
+      "integrity": "sha1-fm74OzzETc8DNESZqsSeWqorsTI=",
+      "requires": {
+        "domify": "^1.4.0",
+        "lodash": "^4.8.2"
+      }
+    },
     "@nymag/vueify": {
       "version": "9.4.5",
       "resolved": "https://registry.npmjs.org/@nymag/vueify/-/vueify-9.4.5.tgz",
@@ -4067,6 +4076,11 @@
         "domelementtype": "1"
       }
     },
+    "domify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/domify/-/domify-1.4.0.tgz",
+      "integrity": "sha1-EUg2F/dk+GlZdbS9x5sU8IA7Yps="
+    },
     "domutils": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
@@ -5088,6 +5102,11 @@
         "parse-filepath": "^1.0.1"
       }
     },
+    "fingerprintjs2": {
+      "version": "1.8.6",
+      "resolved": "https://registry.npmjs.org/fingerprintjs2/-/fingerprintjs2-1.8.6.tgz",
+      "integrity": "sha512-uarmLgW2QXzu1Ljw3PDcQLJ69w8uT42odab//KOZ+NZsAyAudq5ZvlImEXYd/5sJbtBa5TSQ5OKZX1rkpK/t5w=="
+    },
     "flagged-respawn": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-1.0.1.tgz",
@@ -7534,6 +7553,11 @@
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
       "integrity": "sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw=="
     },
+    "js-cookie": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.0.tgz",
+      "integrity": "sha1-Gywnmm7s44ChIWi5JIUmWzWx7/s="
+    },
     "js-levenshtein": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
diff --git a/app/package.json b/app/package.json
index e87f505..b7145fe 100644
--- a/app/package.json
+++ b/app/package.json
@@ -16,6 +16,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "@nymag/dom": "^1.3.2",
     "@nymdev/health-check": "^0.1.3",
     "amphora": "7.2.0",
     "amphora-event-bus-redis": "0.0.1",
@@ -34,6 +35,7 @@
     "date-fns": "^1.29.0",
     "express": "^4.16.3",
     "express-session": "^1.15.6",
+    "fingerprintjs2": "^1.6.1",
     "fold-to-ascii": "^4.0.0",
     "glob": "^7.1.3",
     "he": "^1.1.1",
@@ -41,6 +43,7 @@
     "html-truncate": "^1.2.2",
     "html-word-count": "^2.0.0",
     "isomorphic-fetch": "^2.2.1",
+    "js-cookie": "^2.2.0",
     "jsonp-client": "^1.1.1",
     "lodash": "^4.17.5",
     "moment": "^2.24.0",
diff --git a/app/services/client/gtm.js b/app/services/client/gtm.js
index 2ccfa4f..caf7f33 100644
--- a/app/services/client/gtm.js
+++ b/app/services/client/gtm.js
@@ -47,7 +47,7 @@ const dom = require('@nymag/dom'),
   _each = require('lodash/each'),
   productLinks = require('./product-links'),
   $visibility = require('./visibility'),
-  visit = require('./visit'),
+  visit = require('./visit.js'),
 
   /**
    * the `config`
diff --git a/app/services/client/page.js b/app/services/client/page.js
new file mode 100644
index 0000000..db42e12
--- /dev/null
+++ b/app/services/client/page.js
@@ -0,0 +1,67 @@
+'use strict';
+
+const _get = require('lodash/get'),
+  _memoize = require('lodash/memoize');
+
+/**
+ * we store some page-level data in a "primary page" component
+ * most often this is the article component
+ * @returns {Element|null}
+ */
+function getPrimaryPageComponent() {
+  return document.querySelector('.article') || document.querySelector('.lede-video');
+}
+
+/**
+ * Get content channel
+ * @returns {string}
+ */
+function getPrimaryPageComponentChannel() {
+  const el = getPrimaryPageComponent();
+
+  return el && el.getAttribute('data-content-channel') || 'Undefined Channel';
+}
+
+/**
+ * @returns {string|null} e.g. `nymag.com/scienceofus/_pages/some-id@published`
+ */
+function getPageUri() {
+  return document.documentElement.getAttribute('data-uri');
+}
+
+/**
+ * @returns {string} e.g. `ciu7g35p10004fvy6m7188nan`
+ */
+function getPageId() {
+  return getPageUri().split('/_pages/')[1];
+}
+
+/**
+ * @returns {string} e.g. `nymag.com/scienceofus`
+ */
+function getSiteBase() {
+  return (getPageUri() || '').split('/_pages/')[0];
+}
+
+/**
+ * @param {string} key - meta key to query
+ * @returns {string} the content of the tag
+ */
+function getMetaContent(key) {
+  var meta = document.querySelector('meta[name="' + key + '"]') ||
+    document.querySelector('meta[property="' + key + '"]');
+
+  return _get(meta, 'content', '');
+}
+
+// assumes values do not change after page load
+module.exports.getMeta = _memoize(getMetaContent);
+module.exports.getVertical = module.exports.getMeta.bind(this, 'vertical');
+module.exports.getPageType = module.exports.getMeta.bind(this, 'type');
+module.exports.getAuthor = module.exports.getMeta.bind(this, 'author');
+module.exports.getSiteName = module.exports.getMeta.bind(this, 'og:site_name');
+module.exports.getSiteBase = _memoize(getSiteBase);
+module.exports.getPageUri = _memoize(getPageUri);
+module.exports.getPageId = _memoize(getPageId);
+module.exports.getChannel = _memoize(getPrimaryPageComponentChannel);
+module.exports.getPrimaryPageComponent = getPrimaryPageComponent;
diff --git a/app/services/client/product-links.js b/app/services/client/product-links.js
new file mode 100644
index 0000000..5921e1d
--- /dev/null
+++ b/app/services/client/product-links.js
@@ -0,0 +1,84 @@
+'use strict';
+
+const productSubtags = require('../../services/client/product-subtags'),
+  { processSkimlink } = require('./product-skimlinks'),
+  _includes = require('lodash/includes'),
+  thirdParty = require('../../services/client/third-party'),
+  bamxDomain = 'shop-links.co/';
+
+function isAmazonLink(url) {
+  return typeof url === 'string' && url.includes('amazon.com');
+}
+
+/**
+ * Handle product url clicks
+ * @param {string} productUrl
+ * @param {string} eventType
+ * @returns {function}
+ */
+function handleBuyClick(productUrl, eventType) {
+  return function () {
+    if (window.fbq) {
+      window.fbq('trackCustom', eventType, {domain: productUrl});
+    }
+  };
+}
+
+/**
+ * Append third-party ecomm scripts to the page
+ * @param {string} productUrl
+ * @param {boolean} includeNarrativ
+ */
+function attachThirdPartyScripts(productUrl, includeNarrativ = false) {
+  const isAmazon = isAmazonLink(productUrl),
+    amazonOnetagId = '74e5d3e9-e5c4-4fa2-85e4-0e43ae3f0f84',
+    amazonOnetagSrc = `z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=${amazonOnetagId}`,
+    bamxSrc = 'static.bam-x.com/tags/nymag.js';
+
+  if (isAmazon) {
+    thirdParty.includeScript(amazonOnetagSrc, 2500);
+  }
+
+  if (_includes(productUrl, bamxDomain) || includeNarrativ) {
+    thirdParty.includeScript(bamxSrc);
+  }
+}
+
+function shouldTrySkimlinks(el) {
+  const url = el.href,
+    isNarrativLink = _includes(url, bamxDomain),
+    isOtherAffiliate = !!productSubtags.getAffiliate(url);
+
+  return !isNarrativLink && !isOtherAffiliate;
+}
+
+/**
+ * Handle behavior universal to all product links
+ * @param {Element} buyLink
+ * @param {object} visitState
+ */
+function initLink(buyLink, visitState) {
+  var productUrl = buyLink && buyLink.href, // not `getAttribute`, because want resolved url
+    // dynamic narrativ links have the class 'narrativ-link'
+
+    isNarrativeSecondBuyButton = buyLink.classList.contains('narrativ-link');
+
+  if (productUrl) {
+    if (shouldTrySkimlinks(buyLink)) {
+      processSkimlink(buyLink);
+    }
+
+    // add click handler
+    buyLink.addEventListener('click', handleBuyClick(productUrl, 'Click-Out'));
+    // handle right clicks event
+    buyLink.addEventListener('contextmenu', handleBuyClick(productUrl, 'Click-Out-Right'));
+
+    // add/extend product link subtag with client-side params
+    productSubtags.ensureSubtag(buyLink, visitState);
+    productSubtags.ensureSiteTag(buyLink);
+
+    attachThirdPartyScripts(productUrl, isNarrativeSecondBuyButton);
+  }
+}
+
+module.exports.initLink = initLink;
diff --git a/app/services/client/product-skimlinks.js b/app/services/client/product-skimlinks.js
new file mode 100644
index 0000000..5320f6a
--- /dev/null
+++ b/app/services/client/product-skimlinks.js
@@ -0,0 +1,160 @@
+'use strict';
+
+const _includes = require('lodash/includes'),
+  _startsWith = require('lodash/startsWith');
+
+/**
+ * Skimlinks adds affiliate ids to links so that we gain revenue from links to Zappos, J.Crew, etc.
+ * We use the Amazon ID directly on Amazon links.
+ *
+ * Skimlinks should only be applied to external links.
+ *
+ * Note: `internalHostnames` in the site's config must be updated when a new host is added.
+ *
+ * Skimlinks API Documentation:
+ * http://go.redirectingat.com/doc/
+ */
+
+var excludedHostnames, skimlinksBaseUrl, amazonTag, skimlinksId,
+  ignoreDataAttribute = 'data-affiliate-links-ignore',
+  skimLinksHostname = 'go.redirectingat.com',
+  article;
+
+function isSponsored() {
+  article = article || window.document.querySelector('article');
+
+  return article && article.getAttribute('data-type') === 'Sponsor Story';
+}
+
+/**
+* Excluded hostnames: All links that match this list will not get affiliate id's added.
+* @param {Element} componentEl
+*/
+function setExcludedHostnames(componentEl) {
+  excludedHostnames = (componentEl.getAttribute('data-excluded-hostnames') || '').toLowerCase().split(',');
+}
+
+/**
+* Check for skimlinks
+* @param {Element} componentEl
+* @returns {boolean}
+*/
+function isSkimLink(componentEl) {
+  skimlinksId = componentEl.getAttribute('data-skimlinks');
+
+  return !!skimlinksId;
+}
+
+/**
+* Check for Amazon affiliate tag.
+* @param {Element} componentEl
+* @returns {boolean}
+*/
+function setAmazonTag(componentEl) {
+  componentEl = componentEl || document.querySelector('.affiliate-links');
+
+  if (componentEl) {
+    amazonTag = componentEl.getAttribute('data-amazon');
+  }
+
+  return !!amazonTag;
+}
+
+/**
+* Test if the link is an excluded hostname
+* @param {string} hostname ideally is the hostname, but can also be the URL.
+* @returns {boolean}
+*/
+function isExcluded(hostname) {
+  return _includes(excludedHostnames, hostname) ||
+    _startsWith(hostname, 'www.') && _includes(excludedHostnames, hostname.slice(4)) ||
+    isSponsored();
+}
+
+/**
+* Test if the link is a standard URL. e.g. not a mailto: or javascript:.
+* @param {string} url
+* @returns {boolean}
+*/
+function isUrlProtocol(url) {
+  return url.indexOf('mailto:') !== 0 && url.indexOf('javascript:') !== 0;
+}
+
+/**
+* Returns hostname from an HTML element.
+* @param {object} target
+* @returns {string}
+*/
+function getTargetHostname(target) {
+  return (target.hostname || target.host || target.href || '').toLowerCase();
+}
+
+/**
+ * Convert url to skimlinks
+ * @param {string} url
+ * @param {string} hostname
+ * @returns {string}
+ */
+function convertSkimlink(url, hostname) {
+  var urlIsSkimlink = hostname.indexOf(skimLinksHostname) === 0;
+
+  // construct the skimlinks url and try to create the base url or set the base url to undefined.
+  skimlinksBaseUrl = skimlinksBaseUrl || skimlinksId ? '//go.redirectingat.com/?xs=1&id=' + skimlinksId + '&sref=' + encodeURIComponent(window.location.href) + '&url=' : undefined;
+
+  return !urlIsSkimlink && skimlinksBaseUrl && skimlinksBaseUrl + encodeURIComponent(url);
+}
+
+/**
+ * For cases where we do not want affiliate-links to run and we do not know the hostname, then
+ * `data-affiliate-links-ignore` can be set to 'true'.
+ * This was created for bam-x, a third-party script that rewrites the href and we do not want it to go through skimlinks.
+ * `data-affiliate-links-ignore` is set by `components/product/client.js`
+ * TODO: consider server-side implemenation of bam-x, so that we do not have their script on our pages.
+ * @param {Element} target
+ * @returns {boolean}
+ */
+function hasIgnoreAttribute(target) {
+  return target.getAttribute(ignoreDataAttribute) === 'true';
+}
+
+/**
+* Convert external link to a skimlink
+* @param {element} el
+*/
+function processSkimlink(el) {
+  var url, hostname,
+    href = el && el.href;
+
+  hostname = getTargetHostname(el);
+
+  if (isUrlProtocol(href) && !isExcluded(hostname) && !hasIgnoreAttribute(el)) {
+    url = convertSkimlink(href, hostname);
+    if (url) {
+      el.href = url;
+    }
+  }
+}
+
+// set skimlink id
+function init() {
+  const el = document.querySelector('.affiliate-links');
+
+  if (el) {
+    setAmazonTag(el);
+    setExcludedHostnames(el);
+    isSkimLink(el);
+  }
+}
+
+function getSiteTag() {
+  return amazonTag
+    ? amazonTag
+    : setAmazonTag() && amazonTag;
+}
+
+init();
+
+module.exports = {
+  processSkimlink,
+  getSiteTag
+};
diff --git a/app/services/client/product-subtags.js b/app/services/client/product-subtags.js
new file mode 100644
index 0000000..c742d89
--- /dev/null
+++ b/app/services/client/product-subtags.js
@@ -0,0 +1,358 @@
+'use strict';
+
+/**
+ * ========
+ * Overview
+ * ========
+ *
+ * This service creates subtag query params for product links, for affiliates such as
+ * Amazon, Rakuten, and Shareasale
+ *
+ * At the time of its creation, this service is used by the product components and by the gtm service for inline links
+ *
+ */
+
+const dom = require('@nymag/dom'),
+  urlParse = require('url-parse'),
+  _memoize = require('lodash/memoize'),
+  _includes = require('lodash/includes'),
+  _map = require('lodash/map'),
+  _mapValues = require('lodash/mapValues'),
+  _reduce = require('lodash/reduce'),
+  _assign = require('lodash/assign'),
+  _get = require('lodash/get'),
+  _pickBy = require('lodash/pickBy'),
+  _find = require('lodash/find'),
+  page = require('./page'),
+  { getSiteTag } = require('./product-skimlinks'),
+
+  // this object determines the construction of subtag params for each affiliate sales partner
+  // note: the order in which fields are defined here determine the order they appear in the subtag string
+  affiliateSettings = {
+    amazon: {
+      domains: ['amazon.com'],
+      subtagKey: 'ascsubtag',
+      fields: ['siteShortKey', 'pageUri', 'productId', 'deviceAbbreviation', 'utmSource', 'utmMedium', 'utmCampaign', 'referrer', 'zone'],
+      maxLength: 99,
+      delimiter: 'standard'
+    },
+    rakuten: {
+      domains: ['click.linksynergy.com/deeplink'],
+      subtagKey: 'u1',
+      fields: ['siteShortKey', 'pageUri', 'productId', 'deviceAbbreviation', 'zone'],
+      maxLength: 72,
+      delimiter: 'standard'
+    },
+    shareasale: {
+      domains: ['shareasale.com'],
+      subtagKey: 'afftrack',
+      fields: ['siteShortKey', 'pageUri', 'productId', 'deviceAbbreviation', 'utmSource', 'utmMedium', 'utmCampaign', 'referrer', 'zone'],
+      maxLength: 99,
+      delimiter: 'standard'
+    },
+    skimlinks: {
+      domains: ['go.redirectingat.com'],
+      subtagKey: 'xcust',
+      fields: ['pageUri', 'productId', 'utmCampaign', 'utmSource', 'utmMedium', 'zone', 'deviceAbbreviation'],
+      maxLength: 50,
+      delimiter: 'alt'
+    }
+  },
+  // really wish we did not need to hard-code this here
+  internalHosts = [
+    'nymag.com',
+    'vulture.com',
+    'grubstreet.com',
+    'thecut.com'
+  ],
+  gtm = dom.find('.gtm'),
+  siteShortKey = gtm && gtm.getAttribute('data-site-short-key'),
+  shortenedPageUri = shortenUri(page.getPageUri()),
+  getters = {
+    siteShortKey: () => siteShortKey,
+    pageUri: () => shortenedPageUri,
+    productId: ({productLink}) => productLink && productLink.getAttribute('data-track-id'),
+    deviceAbbreviation: _memoize(({visitState}) => guessDeviceAbbreviation(visitState.os, visitState.screenWidth)),
+    utmSource: _memoize(({visitState}) => (visitState.utm_source || '').substr(0, 3)),
+    utmMedium: _memoize(({visitState}) => (visitState.utm_medium || '').substr(0, 2)),
+    utmCampaign: _memoize(({visitState}) => (visitState.utm_campaign || '').substr(0, 17)),
+    referrer: _memoize(({visitState}) => shortenReferrer(visitState.referrer)),
+    zone: ({productLink}) => getPageZone(productLink)
+  },
+  zoneAttr = 'data-track-zone',
+
+  // Mapping between subtag property and subtag key
+  // Any changes here should be documented in /_components/product/schema.yml description
+  subtagDictionary = {
+    siteShortKey: '',
+    pageUri: 'p',
+    productId: 'i',
+    zone: 'z',
+    deviceAbbreviation: 'd',
+    utmSource: 's',
+    utmMedium: 'm',
+    utmCampaign: 'c',
+    referrer: 'r' // referrer at the end in case need to truncate
+  },
+  delimiters = {
+    standard: ['[', ']'],
+    alt: ['__', '_']
+  };
+
+/**
+ *
+ * @param {string} os
+ * @param {number} width
+ * @returns {string} one letter string to indicate device
+ */
+function guessDeviceAbbreviation(os, width) {
+  /* eslint complexity: [2, 20] */
+  // yes, this is "complex", but is best effort.
+  switch (os) {
+    case 'Windows Phone':
+    case 'iOS':
+    case 'Android':
+    case 'BlackBerry':
+      return width < 728 ? 'M' : 'T';
+    case 'Linux':
+    case 'Windows':
+    case 'Mac OS X':
+      return 'D';
+    default:
+      if (width < 728) {
+        return 'M';
+      }
+      return width > 1024 ? 'D' : 'T';
+  }
+}
+
+/**
+ * retrieve page zone containing the product-link
+ * @param {string} el
+ * @returns {string} one letter string to indicate device
+ */
+function getPageZone(el) {
+  var zone = dom.closest(el, '[' + zoneAttr + ']'),
+    zoneStr = zone && zone.getAttribute(zoneAttr) || '';
+
+  return zoneStr.substr(0, 1);
+}
+
+/**
+ * removes the `www.` from host
+ * @param {string} host - lowercase string
+ * @returns {string}
+ */
+function shortenHost(host) {
+  return host.substr(0,4) === 'www.' ? host.substr(4) : host;
+}
+
+/**
+ * shortens referrer to shortest usable string:
+ *  removes www.
+ *  keeps rest of host
+ *  keeps first directory in path
+ *  removes query and hash
+ *  host and path are separated by `/`
+ * @param {string} [referrer]
+ * @returns {string} defaults to empty string if no referrer found
+ */
+function shortenReferrer(referrer) {
+  var parts = referrer && referrer.match(/\/\/([^\/]+)(\/[^\/#?]+)?/),
+    shortenedReferrer = '',
+    formattedHost, firstDirectory;
+
+  if (parts) {
+    formattedHost = shortenHost(parts[1] || '').toLowerCase();
+    firstDirectory = parts[2] || '';
+    shortenedReferrer = formattedHost + (_includes(internalHosts, formattedHost) ? firstDirectory : '');
+  }
+
+  return shortenedReferrer;
+}
+
+/**
+ * shortens uri to shortest usable string:
+ *  reduce to instance key
+ *  replace `ambrose-` with `a-`
+ *  removes `@published` version
+ * @param {string} [uri]
+ * @returns {string}
+ */
+function shortenUri(uri) {
+  return (uri || '').split('/').pop().replace('ambrose-', 'a-').replace('@published', '');
+}
+
+function parseValueFromSubtag(param, delimiter, subtagString) {
+  const subtagKey = delimiter[0] + param + delimiter[1],
+    startString = subtagString.split(subtagKey)[1] || '';
+
+  return startString
+    ? startString.split(delimiter[0])[0]
+    : null;
+}
+
+/**
+ * parses a product link subtag and returns data as an object
+ * @param {string} [subtag]
+ * @param {array} delimiter
+ * @returns {object}
+ */
+function parseSubtag(subtag, delimiter = delimiters['standard']) {
+  return _pickBy(_mapValues(subtagDictionary, (val) => {
+    return parseValueFromSubtag(val, delimiter, subtag);
+  }));
+}
+
+/**
+ * generate subtag string based on fixed property names
+ * @param {object} subtagData
+ * @param {object} affiliate
+ * @param {array} delimiter
+ * @returns {string}
+ */
+function generateSubtag(subtagData, affiliate, delimiter = delimiters['standard']) {
+  const wrap = (delimiter) => {
+      return (key) => `${delimiter[0]}${key}${delimiter[1]}`;
+    },
+    wrapKey = wrap(delimiter),
+    fields = _get (affiliateSettings[affiliate], 'fields');
+
+  return _reduce(fields, (acc, field) => {
+    const subtagKey = wrapKey(subtagDictionary[field]),
+      value = subtagData[field];
+
+    return acc += value ? subtagKey + value : '';
+  }, '');
+}
+
+/**
+ * return subtag string, truncated to length limit as needed
+ * @param {string} subtag
+ * @param {number} length
+ * @returns {string}
+ */
+function applySubtagMaxlength(subtag, length) {
+  var maxLength = length - 3 * (subtag.split(',').length - 1 + subtag.split('|').length - 1);
+
+  return subtag.substr(0, maxLength);
+}
+
+/**
+ * generate subtag data
+ * @param {array} fields
+ * @param {Object} obj
+ * @param {Object} obj.visitState
+ * @param {Element} obj.productLink
+ * @returns {Object}
+ */
+function getSubtagData({ fields = [], visitState, productLink }) {
+  let obj = {};
+
+  fields.forEach(field => {
+    obj[field] = getters[field] && getters[field]({visitState, productLink});
+  });
+
+  return obj;
+}
+
+/**
+ * parse query string into an object
+ * @param {string} str
+ * @returns {Object}
+ */
+function parseQuery(str = '') {
+  return str.split('&').reduce((acc, keyval) => {
+    const key = keyval.split('=')[0],
+      val = keyval.split('=')[1];
+
+    if (typeof val !== 'undefined') {
+      acc[key] = val;
+    }
+
+    return acc;
+  }, {});
+}
+
+/**
+ * append or extend product tracking subtag
+ * @param {Object} obj
+ * @param {string} obj.affiliate
+ * @param {Element} obj.productLink
+ * @param {Object} obj.visitState
+ */
+function processSubtag({ affiliate, productLink, visitState = {} }) {
+  const url = productLink.href || '',
+    fields = _get(affiliateSettings[affiliate], 'fields'),
+    subtagKey = _get(affiliateSettings[affiliate], 'subtagKey'),
+    maxLength = _get(affiliateSettings[affiliate], 'maxLength'),
+    delimiterName = _get(affiliateSettings[affiliate], 'delimiter'),
+    delimiter = delimiters[delimiterName];
+  let query = url.indexOf('?') >= 0 ? url.split('?').pop() : '',
+    queryData = parseQuery(query),
+    subtagData = getSubtagData({ fields, visitState, productLink }),
+    subtagString;
+
+  if (subtagKey) {
+    subtagString = queryData[subtagKey] || '';
+    subtagData = _assign(parseSubtag(subtagString, delimiter), _pickBy(subtagData));
+    subtagString = generateSubtag(subtagData, affiliate, delimiter);
+    queryData[subtagKey] = applySubtagMaxlength(subtagString, maxLength);
+    query = _map(queryData, (value, key) => `${key}=${value}`).join('&');
+    productLink.search = query ? `?${query}` : '';
+  }
+}
+
+/**
+ * Return affiliate matching product url
+ * @param {string} url
+ * @returns {string}
+ */
+function getAffiliate(url) {
+  const affiliates = Object.keys(affiliateSettings);
+
+  return _find(affiliates, affiliate => _find(affiliateSettings[affiliate].domains, domain => url.includes(domain.toLowerCase()))) || '';
+}
+
+/**
+ * add or extend subtag on amazon and narrativ links
+ * server-side subtag params will be augmented by client-side params
+ * @param {Element} [productLink]
+ * @param {object} [visitState]
+ */
+function ensureSubtag(productLink, visitState) {
+  const url = productLink.href,
+    affiliate = getAffiliate(url);
+
+  if (affiliate) {
+    processSubtag({productLink, visitState, affiliate});
+  }
+}
+
+function ensureSiteTag(el) {
+  const url = el.href,
+    key = 'tag=',
+    parsedUrl = urlParse(url),
+    q = parsedUrl.query,
+    affiliate = getAffiliate(url),
+    isAmazon = affiliate === 'amazon',
+    hasSiteTag = q.includes(key),
+    siteTag = getSiteTag();
+
+  if (isAmazon && !hasSiteTag) {
+    parsedUrl.set('query', q + (q.length ? '&' : '?') + `&${key}${siteTag}`);
+    el.href = parsedUrl.toString();
+  }
+}
+
+module.exports.guessDeviceAbbreviation = guessDeviceAbbreviation;
+module.exports.shortenUri = shortenUri;
+module.exports.getPageZone = getPageZone;
+module.exports.generateSubtag = generateSubtag;
+module.exports.ensureSubtag = ensureSubtag;
+module.exports.ensureSiteTag = ensureSiteTag;
+module.exports.getAffiliate = getAffiliate;
+
+// exports for testing
+module.exports.parseSubtag = parseSubtag;
+module.exports.processSubtag = processSubtag;
diff --git a/app/services/client/third-party.js b/app/services/client/third-party.js
new file mode 100644
index 0000000..974a651
--- /dev/null
+++ b/app/services/client/third-party.js
@@ -0,0 +1,71 @@
+'use strict';
+
+const _debounce = require('lodash/debounce');
+let body = document.body,
+  scriptTagsAdded = {},
+  debounceFns = {};
+
+/**
+ * Remove protocol if present, and return schemeless url
+ * @param {string} url
+ * @returns {boolean}
+ */
+function removeProtocol(url) {
+  var splitUrl = url.split('//');
+
+  return '//' + (splitUrl.length > 1 ? splitUrl[1] : splitUrl[0]);
+}
+
+/**
+ * Return boolean based on whether the script tag has already been added or not
+ * @param {string} url
+ * @returns {boolean}
+ */
+function shouldAppendScript(url) {
+  return !scriptTagsAdded[url];
+}
+
+/**
+ * Construct script element with given URL and append to body
+ * @param {string} url
+ */
+function appendScript(url) {
+  var scriptEl = document.createElement('script');
+
+  scriptEl.type = 'text/javascript';
+  scriptEl.src = url;
+  scriptEl.async = true;
+  body.appendChild(scriptEl);
+
+  scriptTagsAdded[url] = true;
+}
+
+/**
+ * Register URL for a third party library to be imported via script tag
+ * @param {string} url
+ */
+function includeScript(url) {
+  url = removeProtocol(url);
+  if (shouldAppendScript(url)) {
+    appendScript(url);
+  }
+}
+
+/**
+ * `includeScript` with debounce
+ * @param {string} url
+ * @param {number} time (in milliseconds)
+
+ */
+function debouncedIncludeScript(url, time) {
+  const debounceTime = time || 0;
+
+  if (url) {
+    if (!debounceFns[url]) {
+      debounceFns[url] = _debounce(includeScript.bind(null, url), debounceTime);
+    }
+    debounceFns[url]();
+  }
+}
+
+module.exports.includeScript = debouncedIncludeScript;
diff --git a/app/services/client/visit.js b/app/services/client/visit.js
new file mode 100644
index 0000000..46d4513
--- /dev/null
+++ b/app/services/client/visit.js
@@ -0,0 +1,534 @@
+'use strict';
+const _reduce = require('lodash/reduce'),
+  _get = require('lodash/get'),
+  _includes = require('lodash/includes'),
+  _assign = require('lodash/assign'),
+  _clone = require('lodash/clone'),
+  _remove = require('lodash/remove'),
+  Fingerprint2 = require('fingerprintjs2'),
+  cookie = require('js-cookie');
+
+var localStorage = window.localStorage,
+  uriAttr = 'data-uri',
+  visitCountKey = 'visitServiceCount', // set in the-factory
+  previousActionTimestampKey = 'visitServicePreviousTimestamp', // set in the-factory
+  firstVisitTimestampKey = 'visitServiceFirstVisitTimestamp',
+  visitStartTimestampKey = 'visitServiceVisitStartTimestamp',
+  initialReferrerKey = 'visitServiceInitialRefferer', // new to clay
+  clientIdCookieKey = 'nyma', // set on all non-clay pages
+  visitDatesKey = 'visitDates',
+  maxVisitDuration = 1000 * 60 * 60 * 24, // a visit can not last more than 24 hours
+  sessionTTL = 1000 * 60 * 30, // keep session open for 30 minutes after last event
+  visitDatesLimit = 30, // number of days over which to track dates of visits
+  publicState = {},
+  publicStateIsReady = false,
+  onceReadyQueue = [],
+  state = Object.create(Object.prototype, {
+    /**
+     * runs all callbacks in the queue with the current value of clientId
+     * @private
+     */
+    _processQ: {
+      value: function () {
+        var qClone = this._q.slice(0),
+          l = qClone.length,
+          i;
+
+        this._q = [];
+        for (i = 0; i < l; i++) {
+          qClone[i].call(null, this._clientId);
+        }
+      }
+    },
+    _q: {
+      writable: true,
+      value: []
+    },
+    _clientId: {
+      writable: true,
+      value: null
+    },
+    clientId: {
+      /**
+       * attempts to get clientId as stored in private `_clientId`
+       * @returns {state._clientId}
+       */
+      get: function () {
+        return this._clientId;
+      },
+      /**
+       * sets the clientId in state and cookie, then processes queue of callbacks
+       * @param {string} val
+       */
+      set: function (val) {
+        if (val) {
+          this._clientId = val;
+          cookie.set(clientIdCookieKey, val, { expires: 365 * 5 }); // cookie expires after 5 years
+          this._processQ();
+        }
+      }
+    },
+    /**
+     * the clientId may need to be retrieved through an async process
+     * this method will call the callback once the clientId is ready
+     * @param {Function} callback
+     */
+    onceClientIdIsReady: {
+      value: function (callback) {
+        this._clientId ? callback.call(null, this._clientId) : this._q.push(callback);
+      }
+    },
+    isNewVisit: {
+      writable: true,
+      value: false
+    }
+  });
+
+/**
+ * @param {string|number} [val]
+ * @returns {number} defaults to zero if number can not be parsed
+ */
+function toNumber(val) {
+  return parseInt(val, 10) || 0; // defaults to zero
+}
+/**
+ *
+ * @param {string} key
+ * @returns {number}
+ */
+function getNumberFromLocalStorage(key) {
+  return toNumber(localStorage.getItem(key)); // defaults to zero
+}
+
+/**
+ * get visit count from localStorage
+ * @returns {number}
+ */
+function getVisitCount() {
+  return getNumberFromLocalStorage(visitCountKey);
+}
+
+/**
+ * get visit count from localStorage
+ * @returns {number}
+ */
+function getFirstVisitTimestamp() {
+  return getNumberFromLocalStorage(firstVisitTimestampKey);
+}
+
+function incrementVisitCount() {
+  try {
+    localStorage.setItem(visitCountKey, getVisitCount() + 1);
+  } catch (e) {
+    // the browser failed to setItem, likely due to Private Browsing mode. We don't need to take any action
+  }
+}
+
+/**
+ * parse the clientId which contains the first visit timestamp
+ * @param {string} clientId
+ * @returns {number}
+ */
+function clientIdToFirstVisitTimestamp(clientId) {
+  return toNumber(clientId.substr(clientId.indexOf('.') + 1)); // assumes that timestamp is at end of clientId
+}
+
+/**
+ *
+ * @param {string} clientId
+ * @returns {number}
+ */
+function ensureFirstVisitTimestamp(clientId) {
+  var firstVisitTimestamp = getFirstVisitTimestamp();
+
+  if (!firstVisitTimestamp) {
+    firstVisitTimestamp = clientIdToFirstVisitTimestamp(clientId); // could be 0 if clientId is malformed
+    try {
+      localStorage.setItem(firstVisitTimestampKey, firstVisitTimestamp);
+    } catch (e) {
+      // the browser failed to setItem, likely due to Private Browsing mode. We don't need to take any action
+    }
+  }
+  return firstVisitTimestamp;
+}
+
+/**
+ *
+ * @param {number} timestamp
+ */
+function setPreviousActionTimestamp(timestamp) {
+  try {
+    localStorage.setItem(previousActionTimestampKey, timestamp);
+  } catch (e) {
+    // the browser failed to setItem, likely due to Private Browsing mode. We don't need to take any action
+  }
+}
+
+/**
+ * @param {number} timestamp
+ */
+function setVisitStartTimestamp(timestamp) {
+  try {
+    localStorage.setItem(visitStartTimestampKey, timestamp);
+  } catch (e) {
+    // the browser failed to setItem, likely due to Private Browsing mode. We don't need to take any action
+  }
+}
+
+/**
+ * Checks if more than the `sessionTTL` has elapsed since the previous action
+ * @param {number} currentTimestamp
+ * @returns {boolean}
+ */
+function isNewVisit(currentTimestamp) {
+  var sessionExpired = currentTimestamp - sessionTTL > getNumberFromLocalStorage(previousActionTimestampKey),
+    visitDurationExpired = currentTimestamp - maxVisitDuration > getNumberFromLocalStorage(visitStartTimestampKey);
+
+  return sessionExpired || visitDurationExpired;
+}
+
+/**
+ * @param {number} currentTimestamp
+ */
+function updateNewVisitState(currentTimestamp) {
+  state.isNewVisit = isNewVisit(currentTimestamp);
+}
+
+/**
+ * Extend visit whenever an "action" is taken to keep the session alive
+ * This should be triggered when any user action is detected
+ * Updates the previous action timestamp if the visit session has not timed out
+ */
+function extendVisit() {
+  var currentTimestamp = Date.now(),
+    currentVisitIsAlive = !isNewVisit(currentTimestamp);
+
+  if (currentVisitIsAlive) {
+    // update timestamp only if session still alive
+    setPreviousActionTimestamp(currentTimestamp);
+  }
+  // todo: in the future we may want to add a "visit" event that other components could listen for
+  // for simplicity we are only triggering a new visit/page view when a page is loaded
+}
+
+/**
+ * generates a clientId based on fingerprint and timestamp and stores in `state` object
+ * @param {number} currentTimestamp
+ */
+function createClientId(currentTimestamp) {
+  (new Fingerprint2({ // Fingerprint2 npm module added with gulp
+    excludeJsFonts: true,
+    excludeFlashFonts: true,
+    excludeCanvas: true,
+    excludeWebGL: true,
+    excludePixelRatio: true
+  })).get(function (fingerprint) {
+    state.clientId = fingerprint + '.' + currentTimestamp;
+  });
+}
+
+/**
+ * gets clientId from cookie or creates a new one
+ * @param {number} currentTimestamp
+ */
+function ensureClientId(currentTimestamp) {
+  state.clientId = cookie.get(clientIdCookieKey);
+  if (!state.clientId) {
+    createClientId(currentTimestamp);
+  }
+}
+
+/**
+ *
+ * @returns {string|null}
+ */
+function getPageUri() {
+  var el = document.querySelector('[' + uriAttr + '*="/_pages/"]');
+
+  return el && el.getAttribute(uriAttr);
+}
+
+/**
+ * returns an object with key value pairs parsed from query string
+ * @param {array} keys
+ * @returns {object}
+ */
+function getQueryParamsObject(keys) {
+  keys = Array.isArray(keys) ? keys : [];
+
+  return _reduce(
+    _get(window, 'location.search', '').substr(1).split('&'),
+    function (obj, str) {
+      var arr = str.split('='),
+        key = arr[0],
+        val = arr[1];
+
+      if (val && _includes(keys, key)) {
+        obj[key] = decodeURIComponent(val);
+      }
+      return obj;
+    },
+    {}
+  );
+}
+
+
+/**
+ * returns an object from utm query params
+ * @returns {object}
+ */
+function getUtmParams() {
+  var keys = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_content', 'utm_term'];
+
+  return getQueryParamsObject(keys);
+}
+
+/**
+ * derived from mixpanel so that our stats are consistent with page view props
+ * source: https://github.com/mixpanel/mixpanel-js/blob/f8fe5b29ea90ab89df21e8db53c5fbaf0ebf8174/src/utils.js#L1376
+ * @param {string} [userAgent]
+ * @param {string} [vendor]
+ * @param {object} [opera]
+ * @returns {string}
+ */
+function getBrowserName(userAgent, vendor, opera) {
+  // disabling linting to keep code in-line with mixpanel as closely as possible
+  /* eslint complexity: [2, 20] */
+  // order matters
+  if (opera || _includes(userAgent, ' OPR/')) {
+    if (_includes(userAgent, 'Mini')) {
+      return 'Opera Mini';
+    }
+    return 'Opera';
+  } else if (/(BlackBerry|PlayBook|BB10)/i.test(userAgent)) {
+    return 'BlackBerry';
+  } else if (_includes(userAgent, 'IEMobile') || _includes(userAgent, 'WPDesktop')) {
+    return 'Internet Explorer Mobile';
+  } else if (_includes(userAgent, 'Edge')) {
+    return 'Microsoft Edge';
+  } else if (_includes(userAgent, 'FBIOS')) {
+    return 'Facebook Mobile';
+  } else if (_includes(userAgent, 'Chrome')) {
+    return 'Chrome';
+  } else if (_includes(userAgent, 'CriOS')) {
+    return 'Chrome iOS';
+  } else if (_includes(userAgent, 'FxiOS')) {
+    return 'Firefox iOS';
+  } else if (_includes(vendor, 'Apple')) {
+    if (_includes(userAgent, 'Mobile')) {
+      return 'Mobile Safari';
+    }
+    return 'Safari';
+  } else if (_includes(userAgent, 'Android')) {
+    return 'Android Mobile';
+  } else if (_includes(userAgent, 'Konqueror')) {
+    return 'Konqueror';
+  } else if (_includes(userAgent, 'Firefox')) {
+    return 'Firefox';
+  } else if (_includes(userAgent, 'MSIE') || _includes(userAgent, 'Trident/')) {
+    return 'Internet Explorer';
+  } else if (_includes(userAgent, 'Gecko')) {
+    return 'Mozilla';
+  }
+  return '';
+}
+
+/**
+ * derived from mixpanel so that our stats are consistent with page view props
+ * source: https://github.com/mixpanel/mixpanel-js/blob/f8fe5b29ea90ab89df21e8db53c5fbaf0ebf8174/src/utils.js#L1442
+ * @param {string} browserName
+ * @param {string} userAgent
+ * @returns {Number|null}
+ */
+function browserNameToVersion(browserName, userAgent) {
+  var browserRegexMap = {
+      'Internet Explorer Mobile': /rv:(\d+(\.\d+)?)/,
+      'Microsoft Edge': /Edge\/(\d+(\.\d+)?)/,
+      Chrome: /Chrome\/(\d+(\.\d+)?)/,
+      'Chrome iOS': /CriOS\/(\d+(\.\d+)?)/,
+      Safari: /Version\/(\d+(\.\d+)?)/,
+      'Mobile Safari': /Version\/(\d+(\.\d+)?)/,
+      Opera: /(Opera|OPR)\/(\d+(\.\d+)?)/,
+      Firefox: /Firefox\/(\d+(\.\d+)?)/,
+      'Firefox iOS': /FxiOS\/(\d+(\.\d+)?)/,
+      Konqueror: /Konqueror:(\d+(\.\d+)?)/,
+      BlackBerry: /BlackBerry (\d+(\.\d+)?)/,
+      'Android Mobile': /android\s(\d+(\.\d+)?)/,
+      'Internet Explorer': /(rv:|MSIE )(\d+(\.\d+)?)/,
+      Mozilla: /rv:(\d+(\.\d+)?)/
+    },
+    regex = browserRegexMap[browserName],
+    matches = regex && userAgent.match(regex);
+
+  if (matches) {
+    return parseFloat(matches[matches.length - 2]);
+  }
+  return null;
+}
+
+/**
+ * derived from mixpanel so that our stats are consistent with page view props
+ * source: https://github.com/mixpanel/mixpanel-js/blob/f8fe5b29ea90ab89df21e8db53c5fbaf0ebf8174/src/utils.js#L1451
+ * @param {string} userAgent
+ * @returns {string}
+ */
+function userAgentToOs(userAgent) {
+  // disabling linting to keep code in-line with mixpanel as closely as possible
+  /* eslint complexity: [2, 20] */
+  if (/Windows/i.test(userAgent)) {
+    if (/Phone/.test(userAgent) || /WPDesktop/.test(userAgent)) {
+      return 'Windows Phone';
+    }
+    return 'Windows';
+  } else if (/(iPhone|iPad|iPod)/.test(userAgent)) {
+    return 'iOS';
+  } else if (/Android/.test(userAgent)) {
+    return 'Android';
+  } else if (/(BlackBerry|PlayBook|BB10)/i.test(userAgent)) {
+    return 'BlackBerry';
+  } else if (/Mac/i.test(userAgent)) {
+    return 'Mac OS X';
+  } else if (/Linux/.test(userAgent)) {
+    return 'Linux';
+  }
+  return '';
+}
+
+/**
+ * returns an object with information about the viewing environment
+ * @returns {object}
+ */
+function getBrowserInfo() {
+  var navigator = window.navigator,
+    userAgent = navigator.userAgent,
+    vendor = navigator.vendor,
+    browserName = getBrowserName(userAgent, vendor, window.opera);
+
+  return {
+    browser: browserName,
+    browserVersion: browserNameToVersion(browserName, userAgent),
+    os: userAgentToOs(userAgent)
+  };
+}
+
+/**
+ * These are the values accessible through `getPublicStateOnceReady`
+ * @param {string} clientId
+ * @param {number} currentTimestamp
+ */
+function setPublicState(clientId, currentTimestamp) {
+  publicState = _assign(
+    {
+      clientId: clientId,
+      currentUrl: window.location.href,
+      firstVisitTimestamp: getFirstVisitTimestamp(),
+      initialReferrer: localStorage.getItem(initialReferrerKey),
+      isNewVisit: state.isNewVisit,
+      pageUri: getPageUri(),
+      referrer: document.referrer,
+      screenHeight: window.screen.height,
+      screenWidth: window.screen.width,
+      timestamp: currentTimestamp,
+      visitCount: getVisitCount(),
+      userLoyalty: getUserLoyaltyLevel()
+    },
+    getBrowserInfo(),
+    getUtmParams() // could do server-side
+  );
+
+  publicStateIsReady = true;
+}
+
+/**
+ * check that publicState has been set before executing callbacks
+ * @param {Function} callback
+ */
+function getPublicStateOnceReady(callback) {
+  if (publicStateIsReady) {
+    callback(_clone(publicState));
+  } else {
+    onceReadyQueue.push(callback);
+  }
+}
+
+function executeOnceReadyQueue() {
+  onceReadyQueue.forEach(callback => callback(_clone(publicState)));
+  onceReadyQueue = [];
+}
+
+/**
+ * maintain array of dates of a user's visits
+ */
+function updateVisitDates() {
+  var visitDatesStr = localStorage.getItem(visitDatesKey) || '',
+    visitDates = visitDatesStr.split(','),
+    visitDatesLimitMilliseconds = visitDatesLimit * 24 * 60 * 60 * 1000, // visitDatesLimit in milliseconds
+    thresholdTimeSinceLastVisit = 24 * 60 * 60 * 1000, // 24 hours in milliseconds
+    currentTime = Date.now();
+
+  // remove dates older than threshold
+  _remove(visitDates, function (visitDate) {
+    return currentTime - visitDate > visitDatesLimitMilliseconds;
+  });
+
+  // add current time if at least 24 hours have elapsed since the visit
+  if (visitDates.length === 0 || currentTime - visitDates[0] >= thresholdTimeSinceLastVisit) {
+    visitDates.unshift(currentTime);
+  }
+
+  localStorage.setItem(visitDatesKey, visitDates.join(','));
+}
+
+/**
+ * return user loyalty level
+ * @returns {string}
+ */
+function getUserLoyaltyLevel() {
+  var visitDatesStr = localStorage.getItem(visitDatesKey) || '',
+    visitDates = visitDatesStr.split(',');
+
+  if (visitDates.length <= 1) {
+    return 'new';
+  } else if (visitDates.length < 4) {
+    return 'return';
+  } else {
+    return 'loyal';
+  }
+}
+
+/**
+ * This should be triggered only on load as that is when we track new visits.
+ */
+function init() {
+  var currentTimestamp = Date.now();
+
+  ensureClientId(currentTimestamp);
+  state.onceClientIdIsReady(function (clientId) {
+    ensureFirstVisitTimestamp(clientId);
+    updateNewVisitState(currentTimestamp);
+
+    if (state.isNewVisit) {
+      setVisitStartTimestamp(currentTimestamp);
+
+      incrementVisitCount();
+      updateVisitDates();
+      try {
+        localStorage.setItem(initialReferrerKey, document.referrer);
+      } catch (e) {
+        // the browser failed to setItem, likely due to Private Browsing mode. We don't need to take any action
+      }
+    }
+    setPreviousActionTimestamp(currentTimestamp);
+    setPublicState(clientId, currentTimestamp);
+    executeOnceReadyQueue();
+  });
+  window.document.addEventListener('click', extendVisit);
+  // todo: might want to extendVisit based on other actions in the future
+}
+
+// init on load
+init();
+
+module.exports.onceReady = getPublicStateOnceReady;
+module.exports.getQueryParamsObject = getQueryParamsObject;
+module.exports.getBrowserInfo = getBrowserInfo;
diff --git a/app/services/universal/youtube.js b/app/services/universal/youtube.js
index e466d85..1ba3c9d 100644
--- a/app/services/universal/youtube.js
+++ b/app/services/universal/youtube.js
@@ -13,13 +13,18 @@ function getDurationInSeconds(duration) {
 }
 
 function getVideoDetails(videoId) {
+  debugger;
   const videoSearchUrl = `${YT_API}/videos`,
     qs = querystring.stringify({
       part: 'snippet,contentDetails',
       id: videoId,
-      key: process.env.YOUTUBE_API_KEY
+      key: 'AIzaSyCtD1a3SWW3QFzyfkLi0NpwvHL9InosQi8'
     });
 
+  // key: process.env.YOUTUBE_API_KEY
+
+  console.log(qs);
+
   return rest.get(`${videoSearchUrl}?${qs}`)
     .then(res => Object.assign(
       _get(res, 'items[0].snippet', {}),

From 69379a62df24b47efd484629117fcee08071e3e9 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Sun, 3 Mar 2019 10:30:44 -0500
Subject: [PATCH 07/45] youtube component _layout and _component

---
 bootstrap-starter-data/_components.yml | 4 ++++
 bootstrap-starter-data/_layouts.yml    | 2 ++
 2 files changed, 6 insertions(+)

diff --git a/bootstrap-starter-data/_components.yml b/bootstrap-starter-data/_components.yml
index 628d7bd..5b9c72d 100644
--- a/bootstrap-starter-data/_components.yml
+++ b/bootstrap-starter-data/_components.yml
@@ -1,4 +1,8 @@
 _components:
+  youtube-player-head:
+    instances:
+      new:
+        allowed: true
   # meta components
   meta-title:
     instances:
diff --git a/bootstrap-starter-data/_layouts.yml b/bootstrap-starter-data/_layouts.yml
index 66f8263..dc08576 100644
--- a/bootstrap-starter-data/_layouts.yml
+++ b/bootstrap-starter-data/_layouts.yml
@@ -8,6 +8,8 @@ _layouts:
             _ref: /_components/meta-site/instances/article
           -
             _ref: /_components/meta-icons/instances/claydemo
+          -
+            _ref: /_components/youtube-player-head/instances/new
         top:
           -
             _ref: /_components/header/instances/claydemo

From c10b45e1bf0d805841b72162a5fed6957459e323 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Mon, 4 Mar 2019 09:29:01 -0500
Subject: [PATCH 08/45] fix css

---
 app/layouts/layout/schema.yml                   | 1 -
 app/styleguides/_default/components/youtube.css | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/layouts/layout/schema.yml b/app/layouts/layout/schema.yml
index 3f9a243..dd2376e 100644
--- a/app/layouts/layout/schema.yml
+++ b/app/layouts/layout/schema.yml
@@ -12,7 +12,6 @@ head:
       - meta-keywords
       - meta-authors
       - meta-image
-      - youtube-player-head
 
 headLayout:
   _componentList:
diff --git a/app/styleguides/_default/components/youtube.css b/app/styleguides/_default/components/youtube.css
index 3f32ea1..c4752ce 100644
--- a/app/styleguides/_default/components/youtube.css
+++ b/app/styleguides/_default/components/youtube.css
@@ -29,7 +29,7 @@ $text-stack: 'MillerText', Georgia, serif;
 
   &.edit-mode {
     height: auto;
-    margin: 0 0 40px -100px;
+    margin: 0 0 40px;
 
     .youtube-video-preview {
       width: 100%;

From 858397ebdd52c254b43377463967e3583cd28c61 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Mon, 4 Mar 2019 10:12:39 -0500
Subject: [PATCH 09/45] added YOUTUBE_API_KEY env variable, remove unuse css

---
 app/.env                                        | 1 +
 app/components/youtube/client.js                | 2 --
 app/services/universal/youtube.js               | 7 +------
 app/styleguides/_default/components/youtube.css | 7 +------
 4 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/app/.env b/app/.env
index dfd6899..ead98ff 100644
--- a/app/.env
+++ b/app/.env
@@ -26,6 +26,7 @@ CLAY_SCHEDULING_ENABLED=true
 GOOGLE_CONSUMER_KEY=646733424261-m084l8oaodaubngvpte7f2hufc62l0d6.apps.googleusercontent.com
 GOOGLE_CONSUMER_SECRET=KyWza3ugQbwEvn4J1nVA3RiA
 GOOGLE_PROFILE_URL=https://www.googleapis.com/oauth2/v3/userinfo
+YOUTUBE_API_KEY=AIzaSyCtD1a3SWW3QFzyfkLi0NpwvHL9InosQi8
 
 CLAY_SITE_NAME="Clay Demo"
 CLAY_SITE_HOST="localhost"
diff --git a/app/components/youtube/client.js b/app/components/youtube/client.js
index 6d2e70a..bea530a 100644
--- a/app/components/youtube/client.js
+++ b/app/components/youtube/client.js
@@ -116,5 +116,3 @@ function getAnalyticsCustomDimensions(el) {
     youtubeVideoDuration: el.getAttribute('data-track-video-duration')
   };
 }
-
-// module.exports = (el) =>{console.log(el);};
diff --git a/app/services/universal/youtube.js b/app/services/universal/youtube.js
index 1ba3c9d..e466d85 100644
--- a/app/services/universal/youtube.js
+++ b/app/services/universal/youtube.js
@@ -13,18 +13,13 @@ function getDurationInSeconds(duration) {
 }
 
 function getVideoDetails(videoId) {
-  debugger;
   const videoSearchUrl = `${YT_API}/videos`,
     qs = querystring.stringify({
       part: 'snippet,contentDetails',
       id: videoId,
-      key: 'AIzaSyCtD1a3SWW3QFzyfkLi0NpwvHL9InosQi8'
+      key: process.env.YOUTUBE_API_KEY
     });
 
-  // key: process.env.YOUTUBE_API_KEY
-
-  console.log(qs);
-
   return rest.get(`${videoSearchUrl}?${qs}`)
     .then(res => Object.assign(
       _get(res, 'items[0].snippet', {}),
diff --git a/app/styleguides/_default/components/youtube.css b/app/styleguides/_default/components/youtube.css
index c4752ce..e6c460d 100644
--- a/app/styleguides/_default/components/youtube.css
+++ b/app/styleguides/_default/components/youtube.css
@@ -29,7 +29,7 @@ $text-stack: 'MillerText', Georgia, serif;
 
   &.edit-mode {
     height: auto;
-    margin: 0 0 40px;
+    margin: 0 0 20px;
 
     .youtube-video-preview {
       width: 100%;
@@ -87,7 +87,6 @@ $text-stack: 'MillerText', Georgia, serif;
 
     &.embedded {
       margin: 0 0 40px;
-      width: 600px;
     }
 
     &.sponsored.break-out,
@@ -96,7 +95,3 @@ $text-stack: 'MillerText', Georgia, serif;
     }
   }
 }
-
-.article .youtube .attribution {
-  margin: 0;
-}

From f42ee11bb57f2dba786f90f4e5d2949ec1d60c4b Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Mon, 4 Mar 2019 10:14:20 -0500
Subject: [PATCH 10/45] Revert "added YOUTUBE_API_KEY env variable, remove
 unuse css"

This reverts commit 858397ebdd52c254b43377463967e3583cd28c61.
---
 app/.env                                        | 1 -
 app/components/youtube/client.js                | 2 ++
 app/services/universal/youtube.js               | 7 ++++++-
 app/styleguides/_default/components/youtube.css | 7 ++++++-
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/app/.env b/app/.env
index ead98ff..dfd6899 100644
--- a/app/.env
+++ b/app/.env
@@ -26,7 +26,6 @@ CLAY_SCHEDULING_ENABLED=true
 GOOGLE_CONSUMER_KEY=646733424261-m084l8oaodaubngvpte7f2hufc62l0d6.apps.googleusercontent.com
 GOOGLE_CONSUMER_SECRET=KyWza3ugQbwEvn4J1nVA3RiA
 GOOGLE_PROFILE_URL=https://www.googleapis.com/oauth2/v3/userinfo
-YOUTUBE_API_KEY=AIzaSyCtD1a3SWW3QFzyfkLi0NpwvHL9InosQi8
 
 CLAY_SITE_NAME="Clay Demo"
 CLAY_SITE_HOST="localhost"
diff --git a/app/components/youtube/client.js b/app/components/youtube/client.js
index bea530a..6d2e70a 100644
--- a/app/components/youtube/client.js
+++ b/app/components/youtube/client.js
@@ -116,3 +116,5 @@ function getAnalyticsCustomDimensions(el) {
     youtubeVideoDuration: el.getAttribute('data-track-video-duration')
   };
 }
+
+// module.exports = (el) =>{console.log(el);};
diff --git a/app/services/universal/youtube.js b/app/services/universal/youtube.js
index e466d85..1ba3c9d 100644
--- a/app/services/universal/youtube.js
+++ b/app/services/universal/youtube.js
@@ -13,13 +13,18 @@ function getDurationInSeconds(duration) {
 }
 
 function getVideoDetails(videoId) {
+  debugger;
   const videoSearchUrl = `${YT_API}/videos`,
     qs = querystring.stringify({
       part: 'snippet,contentDetails',
       id: videoId,
-      key: process.env.YOUTUBE_API_KEY
+      key: 'AIzaSyCtD1a3SWW3QFzyfkLi0NpwvHL9InosQi8'
     });
 
+  // key: process.env.YOUTUBE_API_KEY
+
+  console.log(qs);
+
   return rest.get(`${videoSearchUrl}?${qs}`)
     .then(res => Object.assign(
       _get(res, 'items[0].snippet', {}),
diff --git a/app/styleguides/_default/components/youtube.css b/app/styleguides/_default/components/youtube.css
index e6c460d..c4752ce 100644
--- a/app/styleguides/_default/components/youtube.css
+++ b/app/styleguides/_default/components/youtube.css
@@ -29,7 +29,7 @@ $text-stack: 'MillerText', Georgia, serif;
 
   &.edit-mode {
     height: auto;
-    margin: 0 0 20px;
+    margin: 0 0 40px;
 
     .youtube-video-preview {
       width: 100%;
@@ -87,6 +87,7 @@ $text-stack: 'MillerText', Georgia, serif;
 
     &.embedded {
       margin: 0 0 40px;
+      width: 600px;
     }
 
     &.sponsored.break-out,
@@ -95,3 +96,7 @@ $text-stack: 'MillerText', Georgia, serif;
     }
   }
 }
+
+.article .youtube .attribution {
+  margin: 0;
+}

From 5358dc631c2d834f16ac48ebd63f912d97390707 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Mon, 4 Mar 2019 10:19:57 -0500
Subject: [PATCH 11/45] fix css and add env variable

---
 app/client-env.json                             | 2 +-
 app/services/universal/youtube.js               | 6 +-----
 app/styleguides/_default/components/youtube.css | 9 ++-------
 3 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/app/client-env.json b/app/client-env.json
index c6b0639..544fcd0 100644
--- a/app/client-env.json
+++ b/app/client-env.json
@@ -1 +1 @@
-["ELASTIC_PREFIX","NODE_DEBUG"]
+["NODE_ENV","JSONP_CLIENT_ENABLE_LOCAL_SUPPORT","SUPERAGENT_MOCK","CLAY_LOG_PRETTY","LOG","NODE_DEBUG","CLAY_ACCESS_KEY","ELASTIC_PREFIX","YOUTUBE_API_KEY"]
diff --git a/app/services/universal/youtube.js b/app/services/universal/youtube.js
index 1ba3c9d..3ade7eb 100644
--- a/app/services/universal/youtube.js
+++ b/app/services/universal/youtube.js
@@ -18,13 +18,9 @@ function getVideoDetails(videoId) {
     qs = querystring.stringify({
       part: 'snippet,contentDetails',
       id: videoId,
-      key: 'AIzaSyCtD1a3SWW3QFzyfkLi0NpwvHL9InosQi8'
+      key: process.env.YOUTUBE_API_KEY
     });
 
-  // key: process.env.YOUTUBE_API_KEY
-
-  console.log(qs);
-
   return rest.get(`${videoSearchUrl}?${qs}`)
     .then(res => Object.assign(
       _get(res, 'items[0].snippet', {}),
diff --git a/app/styleguides/_default/components/youtube.css b/app/styleguides/_default/components/youtube.css
index c4752ce..00be4ad 100644
--- a/app/styleguides/_default/components/youtube.css
+++ b/app/styleguides/_default/components/youtube.css
@@ -29,7 +29,7 @@ $text-stack: 'MillerText', Georgia, serif;
 
   &.edit-mode {
     height: auto;
-    margin: 0 0 40px;
+    margin: 0 0 20px;
 
     .youtube-video-preview {
       width: 100%;
@@ -83,11 +83,10 @@ $text-stack: 'MillerText', Georgia, serif;
   }
 
   @media screen and (min-width: 1180px) {
-    margin: 0 0 40px -100px;
+    margin: 0 0 40px;
 
     &.embedded {
       margin: 0 0 40px;
-      width: 600px;
     }
 
     &.sponsored.break-out,
@@ -96,7 +95,3 @@ $text-stack: 'MillerText', Georgia, serif;
     }
   }
 }
-
-.article .youtube .attribution {
-  margin: 0;
-}

From 21b8185d2c01690a624bfab5e0ad344e125e82f3 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Mon, 4 Mar 2019 10:29:54 -0500
Subject: [PATCH 12/45] added YOUTUBE_API_KEY

---
 app/.env                          | 1 +
 app/client-env.json               | 2 +-
 app/services/universal/youtube.js | 1 -
 3 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/.env b/app/.env
index dfd6899..ead98ff 100644
--- a/app/.env
+++ b/app/.env
@@ -26,6 +26,7 @@ CLAY_SCHEDULING_ENABLED=true
 GOOGLE_CONSUMER_KEY=646733424261-m084l8oaodaubngvpte7f2hufc62l0d6.apps.googleusercontent.com
 GOOGLE_CONSUMER_SECRET=KyWza3ugQbwEvn4J1nVA3RiA
 GOOGLE_PROFILE_URL=https://www.googleapis.com/oauth2/v3/userinfo
+YOUTUBE_API_KEY=AIzaSyCtD1a3SWW3QFzyfkLi0NpwvHL9InosQi8
 
 CLAY_SITE_NAME="Clay Demo"
 CLAY_SITE_HOST="localhost"
diff --git a/app/client-env.json b/app/client-env.json
index 544fcd0..973e30e 100644
--- a/app/client-env.json
+++ b/app/client-env.json
@@ -1 +1 @@
-["NODE_ENV","JSONP_CLIENT_ENABLE_LOCAL_SUPPORT","SUPERAGENT_MOCK","CLAY_LOG_PRETTY","LOG","NODE_DEBUG","CLAY_ACCESS_KEY","ELASTIC_PREFIX","YOUTUBE_API_KEY"]
+["CLAY_LOG_PRETTY","LOG","NODE_DEBUG","NODE_ENV","JSONP_CLIENT_ENABLE_LOCAL_SUPPORT","SUPERAGENT_MOCK","CLAY_ACCESS_KEY","ELASTIC_PREFIX","YOUTUBE_API_KEY"]
diff --git a/app/services/universal/youtube.js b/app/services/universal/youtube.js
index 3ade7eb..e466d85 100644
--- a/app/services/universal/youtube.js
+++ b/app/services/universal/youtube.js
@@ -13,7 +13,6 @@ function getDurationInSeconds(duration) {
 }
 
 function getVideoDetails(videoId) {
-  debugger;
   const videoSearchUrl = `${YT_API}/videos`,
     qs = querystring.stringify({
       part: 'snippet,contentDetails',

From b36e19a03f6da2ade029ae1f6230599797db4490 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Mon, 4 Mar 2019 10:36:27 -0500
Subject: [PATCH 13/45] Update schema.yaml

---
 app/components/article/schema.yaml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/components/article/schema.yaml b/app/components/article/schema.yaml
index e465783..cfdb903 100644
--- a/app/components/article/schema.yaml
+++ b/app/components/article/schema.yaml
@@ -60,7 +60,6 @@ content:
       - divider
       - image
       - code-sample
-      # - twitter
       - youtube
 
 ledeUrl:

From ab1db28dff505c81897a77b3d08f2d422f1d741f Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Mon, 4 Mar 2019 16:46:18 -0500
Subject: [PATCH 14/45] remove unnecesary description. update youtube css

---
 app/components/youtube/schema.yml             |  6 ++----
 .../universal/youtube-video-player.js         |  1 -
 .../_default/components/youtube.css           | 20 ++++++++++---------
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/app/components/youtube/schema.yml b/app/components/youtube/schema.yml
index 50d21aa..bf2292d 100644
--- a/app/components/youtube/schema.yml
+++ b/app/components/youtube/schema.yml
@@ -1,8 +1,6 @@
-_version: 1.3
-
 _description: |
-  Youtube video embed for Clay. Can only be used for Youtube videos hosted by NYMag or Vulture. For externally hosted videos, use the Video component.
-  For technical reasons, YouTube embeds don't display a preview in edit mode. Preview the video by previewing the full page (from the Clay toolbar). Embeds can display a specific video ID.
+  Youtube video embed for Clay. For technical reasons, YouTube embeds don't display a preview in edit mode.
+  Preview the video by previewing the full page (from the Clay toolbar). Embeds can display a specific video ID.
 videoId:
   _label: YouTube Video ID
   _publish: videoPlayerId
diff --git a/app/services/universal/youtube-video-player.js b/app/services/universal/youtube-video-player.js
index caaf61e..1c2e0f6 100644
--- a/app/services/universal/youtube-video-player.js
+++ b/app/services/universal/youtube-video-player.js
@@ -8,7 +8,6 @@ const _assign = require('lodash/assign'),
 
 // Global client service for the YouTube player as primary video content playback.
 
-
 /**
  * Adds a video configuration to the video queue
  * @param {Object} videoConfig
diff --git a/app/styleguides/_default/components/youtube.css b/app/styleguides/_default/components/youtube.css
index 00be4ad..4e20814 100644
--- a/app/styleguides/_default/components/youtube.css
+++ b/app/styleguides/_default/components/youtube.css
@@ -1,24 +1,26 @@
-$text-stack: 'MillerText', Georgia, serif;
+@import '_default/common/_vars.css';
 
-.lede-video .youtube,
-.lede-video .youtube.edit-mode {
-  margin: 0;
-}
+$text-stack: 'MillerText', Georgia, serif;
 
 .youtube {
   display: flex;
   flex-wrap: wrap;
   margin: 0 0 24px;
 
+  .lede-video &,
+  .lede-video &.edit-mode {
+    margin: 0;
+  }
+
   &-headline {
-    color: #000;
+    color: $black;
     font: 21px / 25px $text-stack;
     letter-spacing: -.01em;
     margin: 0 0 6px;
   }
 
   &-caption {
-    color: #000;
+    color: $black;
   }
 
   &-headerline,
@@ -37,11 +39,11 @@ $text-stack: 'MillerText', Georgia, serif;
   }
 
   &.border-top {
-    border-top: 1px solid #000;
+    border-top: 1px solid $black;
   }
 
   &.border-top:before {
-    color: #000;
+    color: $black;
     font: 15px Egyptienne, Georgia, serif;
     letter-spacing: 2px;
     padding: 8px 0 16px;

From 8ddcc6f99e92cf7537021977f7480194f0861037 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Mon, 4 Mar 2019 16:47:37 -0500
Subject: [PATCH 15/45] Update client.js

---
 app/components/youtube/client.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/components/youtube/client.js b/app/components/youtube/client.js
index 6d2e70a..bea530a 100644
--- a/app/components/youtube/client.js
+++ b/app/components/youtube/client.js
@@ -116,5 +116,3 @@ function getAnalyticsCustomDimensions(el) {
     youtubeVideoDuration: el.getAttribute('data-track-video-duration')
   };
 }
-
-// module.exports = (el) =>{console.log(el);};

From 9f192f94e2239463055ed26158aa4fbdb7baa04a Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Tue, 5 Mar 2019 10:24:50 -0500
Subject: [PATCH 16/45] remove unused functions

---
 app/services/client/visibility.js             | 50 ++++---------------
 app/services/client/visit.js                  |  4 +-
 .../universal/youtube-video-player.js         |  5 +-
 3 files changed, 14 insertions(+), 45 deletions(-)

diff --git a/app/services/client/visibility.js b/app/services/client/visibility.js
index 67e18e6..d1440f3 100644
--- a/app/services/client/visibility.js
+++ b/app/services/client/visibility.js
@@ -246,36 +246,6 @@ function getPageOffset(el) {
   };
 }
 
-/**
- * Execute function when any of the selectors become visible
- *
- * Safely stops watching all selectors after first 'shown' event.
- *
- * @param {string} selector
- * @param {function} fn
- * @returns {[Visible]}  Array of elements that we're watching for visibility
- */
-function watchForAny(selector, fn) {
-  var el,
-    visibleList;
-
-  selector = selector.split(',');
-
-  visibleList = _filter(_map(selector, function (selector) {
-    el = $document.querySelector(selector);
-
-    return el && new Visible(el).on('shown', function () {
-      // stop watching for visibility
-      _invokeMap(visibleList, 'destroy');
-
-      // let them proceed
-      fn();
-    });
-  }));
-
-  return visibleList;
-}
-
 /**
  * Create a new Visible class to observe when elements enter and leave the viewport
  *
@@ -340,15 +310,15 @@ $document.addEventListener('scroll', _throttle(updateVisibility, 200));
 
 // public
 module.exports.getPageOffset = getPageOffset;
-module.exports.getLinearSpacialHash = getLinearSpacialHash;
-module.exports.getVerticallyVisiblePixels = getVerticallyVisiblePixels;
-module.exports.getViewportHeight = getViewportHeight;
-module.exports.getViewportWidth = getViewportWidth;
+// module.exports.getLinearSpacialHash = getLinearSpacialHash;
+// module.exports.getVerticallyVisiblePixels = getVerticallyVisiblePixels;
+// module.exports.getViewportHeight = getViewportHeight;
+// module.exports.getViewportWidth = getViewportWidth;
 module.exports.isElementNotHidden = isElementNotHidden;
-module.exports.isElementInViewport = isElementInViewport;
-module.exports.isElementInsideAnother = isElementInsideAnother;
-module.exports.watchForAny = watchForAny;
+// module.exports.isElementInViewport = isElementInViewport;
+// module.exports.isElementInsideAnother = isElementInsideAnother;
+// module.exports.watchForAny = watchForAny;
 module.exports.Visible = Visible;
-module.exports.setPrimaryContent = setPrimaryContent;
-module.exports.isBelowPrimaryContent = isBelowPrimaryContent;
-module.exports.updateVisibility = updateVisibility;
+// module.exports.setPrimaryContent = setPrimaryContent;
+// module.exports.isBelowPrimaryContent = isBelowPrimaryContent;
+// module.exports.updateVisibility = updateVisibility;
diff --git a/app/services/client/visit.js b/app/services/client/visit.js
index 46d4513..8a908e6 100644
--- a/app/services/client/visit.js
+++ b/app/services/client/visit.js
@@ -530,5 +530,5 @@ function init() {
 init();
 
 module.exports.onceReady = getPublicStateOnceReady;
-module.exports.getQueryParamsObject = getQueryParamsObject;
-module.exports.getBrowserInfo = getBrowserInfo;
+// module.exports.getQueryParamsObject = getQueryParamsObject;
+// module.exports.getBrowserInfo = getBrowserInfo;
diff --git a/app/services/universal/youtube-video-player.js b/app/services/universal/youtube-video-player.js
index 1c2e0f6..4fdf684 100644
--- a/app/services/universal/youtube-video-player.js
+++ b/app/services/universal/youtube-video-player.js
@@ -1,8 +1,7 @@
 /* global YT:false */
 'use strict';
 
-const _assign = require('lodash/assign'),
-  VIDEO_ID_RE = /v=([\w-]+)/,
+const VIDEO_ID_RE = /v=([\w-]+)/,
   videoQueue = [],
   state = 'initializing';
 
@@ -109,7 +108,7 @@ function videoStateChangeWrapper(customParams, playerEvents) {
 
   return function handleVideoStateChange(playerEvt) {
     if (playerEvt.data === YT.PlayerState.PLAYING && !hasVideoStarted) {
-      document.dispatchEvent(_assign(playerEvents.start,
+      document.dispatchEvent(Object.assign(playerEvents.start,
         {player: {videoId: extractVideoIdFromUrl(playerEvt.target.getVideoUrl()), videoDuration: Math.ceil(playerEvt.target.getDuration())}}
       ));
       hasVideoStarted = true;

From cf791100e63d14ba8e008b9cee9dbc3627d5acb9 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Tue, 5 Mar 2019 12:18:16 -0500
Subject: [PATCH 17/45] Update visibility.js

---
 app/services/client/visibility.js | 20 --------------------
 1 file changed, 20 deletions(-)

diff --git a/app/services/client/visibility.js b/app/services/client/visibility.js
index d1440f3..30a57d5 100644
--- a/app/services/client/visibility.js
+++ b/app/services/client/visibility.js
@@ -196,25 +196,6 @@ function shouldBePreloaded(el, rect, preloadThreshold, innerHeight) {
   return rect.bottom > preloadThreshold * -1 && rect.top <= innerHeight + preloadThreshold && isElementNotHidden(el);
 }
 
-/**
- * Create a one-dimensional spacial hash of x
- * @param {number} x
- * @param {number} stepSize
- * @param {number} optimalK
- * @param {number} base
- * @return {number}
- */
-function getLinearSpacialHash(x, stepSize, optimalK, base) {
-  var index = Math.floor(x / (stepSize || 1)),
-    remainder = x % stepSize,
-    result = index.toString(base);
-
-  if (optimalK > 1) {
-    result += getLinearSpacialHash(remainder, Math.floor(stepSize / base), optimalK - 1, base);
-  }
-  return result;
-}
-
 /**
  * @param {ClientRect} rect
  * @param {number} innerHeight
@@ -310,7 +291,6 @@ $document.addEventListener('scroll', _throttle(updateVisibility, 200));
 
 // public
 module.exports.getPageOffset = getPageOffset;
-// module.exports.getLinearSpacialHash = getLinearSpacialHash;
 // module.exports.getVerticallyVisiblePixels = getVerticallyVisiblePixels;
 // module.exports.getViewportHeight = getViewportHeight;
 // module.exports.getViewportWidth = getViewportWidth;

From 5abe5cef3bbb7446d403ead46b780f399c1a5816 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Tue, 5 Mar 2019 12:25:45 -0500
Subject: [PATCH 18/45] removed getViewportHeight

---
 app/services/client/visibility.js | 34 -------------------------------
 1 file changed, 34 deletions(-)

diff --git a/app/services/client/visibility.js b/app/services/client/visibility.js
index 30a57d5..362686d 100644
--- a/app/services/client/visibility.js
+++ b/app/services/client/visibility.js
@@ -128,22 +128,6 @@ function updateVisibilityForItem(item) {
   updatePreload(item, evt, innerHeight);
 }
 
-/**
- * Return normalized viewport height
- * @return {number}
- */
-function getViewportHeight() {
-  return $window.innerHeight || $document.documentElement.clientHeight || $document.body.clientHeight;
-}
-
-/**
- * Return normalized viewport width
- * @return {number}
- */
-function getViewportWidth() {
-  return $window.innerWidth || $document.documentElement.clientWidth || $document.body.clientWidth;
-}
-
 /**
  * make sure an element isn't hidden by styles or etc
  * @param  {Element}  el
@@ -153,21 +137,6 @@ function isElementNotHidden(el) {
   return el && el.offsetParent !== null && !el.getAttribute('hidden') && getComputedStyle(el).display !== 'none' && getComputedStyle(el).visibility !== 'hidden';
 }
 
-/**
- * Apparently the fastest way...
- * @param {Element} el
- * @returns {boolean}
- * @example if (!$visibility.isElementInViewport(el)) { ... }
- */
-function isElementInViewport(el) {
-  var rect = el.getBoundingClientRect();
-
-  return rect.top >= 0 &&
-    rect.left >= 0 &&
-    rect.bottom <= ($window.innerHeight || $document.documentElement.clientHeight) &&
-    rect.right <= ($window.innerWidth || $document.documentElement.clientWidth);
-}
-
 /**
  * Simple 2D box collision detection
  * @param {Element} element
@@ -292,10 +261,7 @@ $document.addEventListener('scroll', _throttle(updateVisibility, 200));
 // public
 module.exports.getPageOffset = getPageOffset;
 // module.exports.getVerticallyVisiblePixels = getVerticallyVisiblePixels;
-// module.exports.getViewportHeight = getViewportHeight;
-// module.exports.getViewportWidth = getViewportWidth;
 module.exports.isElementNotHidden = isElementNotHidden;
-// module.exports.isElementInViewport = isElementInViewport;
 // module.exports.isElementInsideAnother = isElementInsideAnother;
 // module.exports.watchForAny = watchForAny;
 module.exports.Visible = Visible;

From e468746bf0084fe02b12334c912dd3ce1fc685b7 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Tue, 5 Mar 2019 12:29:20 -0500
Subject: [PATCH 19/45] Update visibility.js

---
 app/services/client/visibility.js | 54 ++-----------------------------
 1 file changed, 3 insertions(+), 51 deletions(-)

diff --git a/app/services/client/visibility.js b/app/services/client/visibility.js
index 362686d..3eb56b2 100644
--- a/app/services/client/visibility.js
+++ b/app/services/client/visibility.js
@@ -9,34 +9,7 @@ const $window = window,
   _throttle = require('lodash/throttle'),
   Eventify = require('eventify');
 var list = [],
-  Visible, VisibleEvent,
-  primaryContentEl; // need to hold on to this in case the page layout changes
-
-/**
- * the purpose of the primaryContentEl is to calculate if other elements are above or below it
- * this helps product determine if a module is doing well in a certain position
- * there can only be one primary content element on a page
- * @param {Element} [el]
- */
-function setPrimaryContent(el) {
-  if (el) {
-    primaryContentEl = el;
-  }
-}
-
-/**
- * for position we only care if it is below the content or not
- * @param {Element} el - element to measure position relative to primary content
- * @returns {boolean}
- */
-function isBelowPrimaryContent(el) {
-  // calculating position lazily as this function is not called frequently and the position can change
-  // alternative would be to cache primaryContentBottom and update on load and resize events
-  var primaryContentRect = primaryContentEl && primaryContentEl.getBoundingClientRect(),
-    elRect = el && el.getBoundingClientRect();
-
-  return !!(primaryContentRect && elRect && primaryContentRect.bottom < elRect.top);
-}
+  Visible, VisibleEvent;
 
 /**
  * @param {number} a
@@ -137,23 +110,6 @@ function isElementNotHidden(el) {
   return el && el.offsetParent !== null && !el.getAttribute('hidden') && getComputedStyle(el).display !== 'none' && getComputedStyle(el).visibility !== 'hidden';
 }
 
-/**
- * Simple 2D box collision detection
- * @param {Element} element
- * @param {Element} possibleContainingElement
- * @returns {boolean}
- * @example if ($visibility.isElementVisibleInsideAnother(el, el.parent)) { ... }
- */
-function isElementInsideAnother(element, possibleContainingElement) {
-  var elementRect = element.getBoundingClientRect(),
-    possibleContainingElementRect = possibleContainingElement.getBoundingClientRect();
-
-  return elementRect.top >= possibleContainingElementRect.top &&
-    elementRect.left >= possibleContainingElementRect.left &&
-    elementRect.bottom <= possibleContainingElementRect.bottom &&
-    elementRect.right <= possibleContainingElementRect.right;
-}
-
 /**
  * @param {Element} el
  * @param  {ClientRect} rect
@@ -260,11 +216,7 @@ $document.addEventListener('scroll', _throttle(updateVisibility, 200));
 
 // public
 module.exports.getPageOffset = getPageOffset;
-// module.exports.getVerticallyVisiblePixels = getVerticallyVisiblePixels;
+module.exports.getVerticallyVisiblePixels = getVerticallyVisiblePixels;
 module.exports.isElementNotHidden = isElementNotHidden;
-// module.exports.isElementInsideAnother = isElementInsideAnother;
-// module.exports.watchForAny = watchForAny;
 module.exports.Visible = Visible;
-// module.exports.setPrimaryContent = setPrimaryContent;
-// module.exports.isBelowPrimaryContent = isBelowPrimaryContent;
-// module.exports.updateVisibility = updateVisibility;
+module.exports.updateVisibility = updateVisibility;

From 8dd8f1c7d26e291ee01bccd4a427bb7dd0415621 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Tue, 5 Mar 2019 13:40:16 -0500
Subject: [PATCH 20/45] removed _assign visbility.js

---
 app/services/client/visibility.js | 7 ++-----
 app/services/client/visit.js      | 4 ++--
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/app/services/client/visibility.js b/app/services/client/visibility.js
index 3eb56b2..45ceeb3 100644
--- a/app/services/client/visibility.js
+++ b/app/services/client/visibility.js
@@ -2,10 +2,6 @@
 
 const $window = window,
   $document = document,
-  _filter = require('lodash/filter'),
-  _map = require('lodash/map'),
-  _invokeMap = require('lodash/invokeMap'),
-  _assign = require('lodash/assign'),
   _throttle = require('lodash/throttle'),
   Eventify = require('eventify');
 var list = [],
@@ -207,8 +203,9 @@ Visible.prototype = {
 Eventify.enable(Visible.prototype);
 
 VisibleEvent = function (type, options) {
+  debugger;
   this.type = type;
-  _assign(this, options);
+  Object.assign({},this,options);
 };
 
 // listen for scroll events (throttled)
diff --git a/app/services/client/visit.js b/app/services/client/visit.js
index 8a908e6..46d4513 100644
--- a/app/services/client/visit.js
+++ b/app/services/client/visit.js
@@ -530,5 +530,5 @@ function init() {
 init();
 
 module.exports.onceReady = getPublicStateOnceReady;
-// module.exports.getQueryParamsObject = getQueryParamsObject;
-// module.exports.getBrowserInfo = getBrowserInfo;
+module.exports.getQueryParamsObject = getQueryParamsObject;
+module.exports.getBrowserInfo = getBrowserInfo;

From 52b9202bafe6e7233160ad255913dbc0ee6e7e4f Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Tue, 5 Mar 2019 13:56:05 -0500
Subject: [PATCH 21/45] Update gtm.js

---
 app/services/client/gtm.js | 62 ++------------------------------------
 1 file changed, 2 insertions(+), 60 deletions(-)

diff --git a/app/services/client/gtm.js b/app/services/client/gtm.js
index caf7f33..243491d 100644
--- a/app/services/client/gtm.js
+++ b/app/services/client/gtm.js
@@ -32,18 +32,15 @@ var page = require('./page'),
   author = page.getAuthor(),
   eventsQueue = [], // enables us to send multiple events with one dataLayer push  and pixel fire to google
   isCurrentlyReporting = false,
-  processQueueDelay = 1000 * 30,// wait 30 seconds before reporting in case more events happen
   typeAttr = 'data-track-type',
   zoneAttr = 'data-track-zone',
   pageZoneAttr = 'data-page-zone',
   verticalPositionAttr = 'data-vertical-position',
   gtmPageZoneKey = 'pageZone',
-  gtmVerticalPositionKey = 'verticalPosition',
-  publicVisitState;
+  gtmVerticalPositionKey = 'verticalPosition';
 const dom = require('@nymag/dom'),
   _assign = require('lodash/assign'),
   _find = require('lodash/find'),
-  _debounce = require('lodash/debounce'),
   _each = require('lodash/each'),
   productLinks = require('./product-links'),
   $visibility = require('./visibility'),
@@ -260,7 +257,7 @@ const dom = require('@nymag/dom'),
           newsletterPrefix = el.parentElement && el.parentElement.classList.contains('modal') ? 'nl modal ' : 'nl sub ';
 
         queueOnceVisible(el, dataTrackType, dataOnLoad, function queueCustomEventImpression(el, dataTrackType, dataOnLoad) {
-          eventsQueue.push(_assign({
+          eventsQueue.push(Object.assign({},{
             event: eventName,
             newsletter: newsletterPrefix + 'display' // todo: move this into gtm with another event trigger name
           }, addDataOnView(el, dataTrackType, dataOnLoad)));
@@ -529,20 +526,6 @@ function queueOnceVisible(el, type, dataOnLoad, addToQueueFn) {
   });
 }
 
-/**
- * queues any events given in the params and reports with the next batch of events
- * @param {...object} optional event(s)
- * @returns {Function}
- */
-function debounceReportNow() {
-  var debouncedReportNow = _debounce(module.exports.reportNow, processQueueDelay);
-
-  return function () {
-    eventsQueue.push.apply(eventsQueue, arguments);
-    debouncedReportNow();
-  };
-}
-
 /**
  * queues any events given in the params and reports the queue immediately
  * @param {...object} optional event(s)
@@ -580,18 +563,6 @@ function initializeEventsFromDom(visitState, element) {
   });
 }
 
-/**
- * Initialize all trackable elements in the provided container element
- * useful for tracking elements added to the page after the initial load
- *
- * @param {Element} el
- */
-function initializeElement(el) {
-  if (!initializedOnLoad) { return; }
-
-  initializeEventsFromDom(publicVisitState, el);
-}
-
 /**
  * loads GTM and initializes the dataLayer
  * @param {string} containerId
@@ -657,35 +628,6 @@ function initGtm(containerId) {
   });
 }
 
-/**
- * report a custom event
- * @param {object}  opts
- * @param {string}  opts.category - event category (e.g. 'interactives')
- * @param {string}  opts.action - event action (e.g. 'article end')
- * @param {string}  opts.label - event label (e.g. 'on=[page-url]')
- * @param {object}  [customDimensions] - optional argument for any numbered custom dimesions
- */
-
-function reportCustomEvent(opts, customDimensions) {
-  var category = opts.category,
-    action = opts.action,
-    label = opts.label,
-    dimensions = {
-      event: 'universalCustomEvent',
-      customEventCategory: category && category.trim(),
-      customEventAction: action && action.trim(),
-      customEventLabel: label && label.trim()
-    };
-
-  if (!!customDimensions) {
-    dimensions = Object.assign(dimensions, customDimensions);
-  }
-
-  reportNow(dimensions);
-}
 
 module.exports.init = initGtm;
 module.exports.reportNow = reportNow;
-module.exports.reportSoon = debounceReportNow.call(this);
-module.exports.reportCustomEvent = reportCustomEvent;
-module.exports.initializeElement = initializeElement;

From 3ec66f5b1a4ae11d10d60e57a24e6cfaa574c7f7 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Tue, 5 Mar 2019 14:35:49 -0500
Subject: [PATCH 22/45] remove unused code visibility and gtm js

---
 app/services/client/gtm.js        | 600 +-----------------------------
 app/services/client/visibility.js |  28 +-
 2 files changed, 4 insertions(+), 624 deletions(-)

diff --git a/app/services/client/gtm.js b/app/services/client/gtm.js
index 243491d..288c579 100644
--- a/app/services/client/gtm.js
+++ b/app/services/client/gtm.js
@@ -11,521 +11,13 @@
  *
  * 2. Reports events from client.js of components:
  *    - `$gtm.reportNow` reports immediately,
- *    - whereas `$gtm.reportSoon` will send the event in the next batch.
- *    - example components: `clay-share` and `share-button`
- *
- * 3. Reports events based on data-attributes as defined in component templates.
- *    - see the `config` below for details on specific data-attributes
- *
- * 4. Pushed events to the dataLayer in batches, which are then sent to GTM and GA
- *    - `eventsQueue` array is the queue
- *    - `processQueueDelay` defines the frequency of reporting batches
- *    - the queue is also reported when the mouse exits the top of the window
- *    - there could be more optimizations here in the future
- *
  */
 
-var page = require('./page'),
-  initializedOnLoad = false,
-  vertical = page.getVertical(),
-  pageType = page.getPageType(),
-  author = page.getAuthor(),
-  eventsQueue = [], // enables us to send multiple events with one dataLayer push  and pixel fire to google
-  isCurrentlyReporting = false,
-  typeAttr = 'data-track-type',
-  zoneAttr = 'data-track-zone',
-  pageZoneAttr = 'data-page-zone',
-  verticalPositionAttr = 'data-vertical-position',
-  gtmPageZoneKey = 'pageZone',
-  gtmVerticalPositionKey = 'verticalPosition';
-const dom = require('@nymag/dom'),
-  _assign = require('lodash/assign'),
-  _find = require('lodash/find'),
-  _each = require('lodash/each'),
-  productLinks = require('./product-links'),
-  $visibility = require('./visibility'),
-  visit = require('./visit.js'),
-
-  /**
-   * the `config`
-   *
-   * anything unique to an event type should be added to the config below
-   * changes made here may require a corresponding change in component templates
-   * `data-track-type` is used as keys below
-   * the `init` function is run on load and can be used to add event listeners
-   * the `getDataOnView` function is optional and can add data at the time of the view or event
-   */
-  config = {
-    /**
-     *
-     * An `article-detail` is for the full article
-     *
-     * - Add `data-track-type="article-detail"` to the article element
-     * - Add data-track variables used in the `init` function below
-     * - Example: https://github.com/nymag/sites/blob/master/components/article/template.handlebars#L1
-     *
-     */
-    'article-detail': {
-      init: function (el) {
-        var crosspostString = el.getAttribute('data-crosspost') ? 'cross-posted' : '',
-          syndicationString = getSyndicationString(el),
-          dataOnLoad = {
-            id: el.getAttribute('data-uri'),
-            name: el.getAttribute('data-headline'),
-            brand: vertical,
-            category: el.getAttribute('data-content-channel'),
-            variant: el.getAttribute('data-type'),
-            dimension1: el.getAttribute('data-authors'),
-            dimension2: el.getAttribute('data-headline'),
-            dimension3: el.getAttribute('data-publish-date'),
-            dimension19: el.getAttribute('data-tags'),
-            dimension45: crosspostString && syndicationString ? crosspostString + ', ' + syndicationString : crosspostString || syndicationString
-          };
-
-        if (window.fbq) {
-          window.fbq('track', 'ViewContent', {content_name: dataOnLoad.brand, content_category: dataOnLoad.category, content_type: 'product', content_ids: [dataOnLoad.variant]});
-        }
-
-        module.exports.reportSoon({
-          // We support both `articleDetail` and `productDetail` as GTM triggers;
-          // the latter is used on legacy pages, whereas the former is used here
-          event: 'articleDetail',
-          ecommerce: {
-            detail: {
-              products: [dataOnLoad]
-            }
-          }
-        });
-      }
-    },
-    /**
-     * An article-list is any group of one or more articles that are used to recirculate
-     *
-     * - Add `data-track-type="article-list"` to the element containing article(s)
-     * - Add data-track variables used in the `init` function below
-     *
-     * example: https://github.com/nymag/sites/blob/master/components/most-popular/template.handlebars#L1
-     */
-    'article-list': {
-      init: function (el, dataTrackType) {
-        var dataUri = el.getAttribute('data-uri'),
-          childTrackEl = el.querySelector('[' + typeAttr + ']'),
-          dataOnLoad = {
-            id: dataUri,
-            name: el.getAttribute('data-track-name') ||
-              (dataUri || '').split('/_components/').pop().split('/')[0],
-            list: page.getPageUri(),
-            // uses data-track-type of child:
-            // could hard-code this in the template if it does not work in future cases
-            variant: childTrackEl && childTrackEl.getAttribute(typeAttr),
-            brand: vertical,
-            category: page.getChannel(),
-            dimension23: dataTrackType,
-            // This is for the `ooyala-recirc-lede` component tracking video source
-            dimension39: el.getAttribute('data-track-video-source') || 'undefined'
-          };
-
-        addEcommProductEvents(el, dataTrackType, dataOnLoad, {
-          impressionName: 'componentImpressions',
-          clickName: 'componentClick'
-        });
-      },
-      getDataOnView: getPosition
-    },
-    /**
-     * An article-link is a link to another article, normally within an article-list
-     *
-     * - Add `data-track-type="article-link"` to the element containing the link
-     * - Add data-track variables used in the `init` function below
-     *
-     * example: https://github.com/nymag/sites/blob/master/components/most-popular/template.handlebars#L21-L23
-     */
-    'article-link': {
-      init: function (el, dataTrackType) {
-        var authorsOnIndexPages = el.getAttribute('data-track-authors'),
-          paginationOnIndexPages = el.getAttribute('data-track-pagination'),
-          dataOnLoad = {
-            id: el.getAttribute('data-track-page-uri'),
-            name: el.getAttribute('data-track-headline'),
-            position: el.getAttribute('data-track-index'),
-            // useful to distinguish between multiple instances of the
-            // components, like section components (homepage-section component)
-            list: el.getAttribute('data-track-component-name'),
-            dimension23: dataTrackType,
-            dimension38: getNearestComponentTitle(el)
-          };
-
-        // authors and pagination are only required on "index" pages, e.g. homepage or section page
-        if (authorsOnIndexPages) {
-          dataOnLoad.dimension1 = authorsOnIndexPages;
-        }
-        if (paginationOnIndexPages) {
-          dataOnLoad.dimension35 = paginationOnIndexPages;
-        }
-
-        addEcommProductEvents(el, dataTrackType, dataOnLoad, {
-          impressionName: 'articleImpressions',
-          clickName: 'articleClick'
-        });
-      }
-    },
-    /**
-     * A product-list is any group of one or more products
-     *
-     * - If a `product-link` is not within a `product-list` then the pageUri is used as the list id
-     * - Add `data-track-type="product-list"` to the element containing product(s)
-     * - Add data-track variables used in the `init` function below
-     * - The element should have data-uri
-     *
-     * example: https://github.com/nymag/sites/blob/master/components/product-hits/template.handlebars#L1
-     */
-    'product-list': {
-      init: function (el, dataTrackType) {
-        var dataUri = el.getAttribute('data-uri'),
-          childTrackEl = el.querySelector('[' + typeAttr + ']'),
-          dataOnLoad = {
-            id: dataUri,
-            name: el.getAttribute('data-track-name') ||
-              (dataUri || '').split('/_components/').pop().split('/')[0],
-            list: page.getPageUri(),
-            // uses data-track-type of child:
-            // could hard-code this in the template if it does not work in future cases
-            variant: childTrackEl && childTrackEl.getAttribute(typeAttr),
-            brand: vertical,
-            category: page.getChannel(),
-            dimension23: dataTrackType
-          };
-
-        addEcommProductEvents(el, dataTrackType, dataOnLoad, {
-          impressionName: 'componentImpressions',
-          clickName: 'componentClick'
-        });
-      },
-      getDataOnView: getPosition
-    },
-    /**
-     * A product-link is a link to product
-     *
-     * - Add `data-track-type="product-link"` to the element containing the link
-     * - Add data-track variables used in the `init` function below
-     *
-     * example: https://github.com/nymag/sites/blob/master/components/product-hit/template.handlebars#L10
-     */
-    'product-link': {
-      init: function (el, dataTrackType, visitState) {
-        var inlineProductVariant = 'product - link',
-          dataOnLoad = {
-            id: el.getAttribute('data-track-id'),
-            name: el.getAttribute('data-track-name'),
-            brand: el.getAttribute('data-track-brand') || vertical,
-            // default to inline product variant so that we do not need to set another data-attribute for all inline product links
-            variant: el.getAttribute('data-track-variant') || inlineProductVariant,
-            dimension23: dataTrackType,
-            // default list id to the page uri (e.g. for links within paragraphs)
-            list: el.getAttribute('data-track-component-name') || page.getPageUri(),
-            dimension47: el.getAttribute('data-track-test-group')
-          };
-
-        // process product-link (e.g. add/extend amazon subtag)
-        // NOTE: not ideal to bundle product-link behavior into an analytics reporting service,
-        // but adding here has the performance benefit of avoiding duplicate dom querying to find product-links
-        productLinks.initLink(el, visitState);
-        addEcommProductEvents(el, dataTrackType, dataOnLoad, {
-          impressionName: 'productImpressions',
-          clickName: 'productClick'
-        });
-      }
-    },
-    /**
-     * A newsletter-signup is a form to subscribe to a newsletter
-     *
-     * - Add `data-track-type="newsletter-signup"` to the element containing the newsletter signup form
-     * - Add data-track variables used in the `init` function below
-     *
-     * example: https://github.com/nymag/sites/blob/master/components/newsletter-sign-up/template.handlebars#L1
-     */
-    'newsletter-signup': {
-      init: function (el, dataTrackType) {
-        var eventName = 'newsletter',
-          dataOnLoad = {
-            // `newsletter` value is different for impression and click
-            // `pageZone` and `verticalPosition` handled by `getPosition`
-            newsletterId: el.getAttribute('data-track-id'),
-            dimension23: dataTrackType
-          },
-          elForm = el.querySelector('form'),
-          newsletterPrefix = el.parentElement && el.parentElement.classList.contains('modal') ? 'nl modal ' : 'nl sub ';
-
-        queueOnceVisible(el, dataTrackType, dataOnLoad, function queueCustomEventImpression(el, dataTrackType, dataOnLoad) {
-          eventsQueue.push(Object.assign({},{
-            event: eventName,
-            newsletter: newsletterPrefix + 'display' // todo: move this into gtm with another event trigger name
-          }, addDataOnView(el, dataTrackType, dataOnLoad)));
-        });
-        if (elForm) {
-          elForm.addEventListener('submit', function (e) {
-            e.preventDefault();
-            module.exports.reportNow(_assign({
-              event: eventName,
-              newsletter: newsletterPrefix + 'submit',
-              dimension23: dataTrackType
-            }, addDataOnView(el, dataTrackType, dataOnLoad)));
-          });
-        }
-      },
-      getDataOnView: getPosition
-    },
-    /**
-     * A subscription is the promotion for a newsletter signup: what the user clicks on to get to the form
-     *
-     * - Add `data-track-type="subscription-item"` to the element containing the subscription promo
-     * - Add data-track variables used in the `init` function below
-     *
-     * example: https://github.com/nymag/sites/blob/15942970e53b04b5ac9d66aec0afd5dce5bd0399/_components/di-header/template.handlebars#L9
-     */
-    'subscription-item': {
-      init: function (el, type) {
-        var id = el.getAttribute('data-track-id'),
-          creative = el.getAttribute('data-track-creative'),
-          promoClick = {
-            ecommerce: {
-              promoClick: {
-                promotions: [{
-                  id: id,
-                  name: id,
-                  creative: creative
-                }]
-              }
-            }
-          };
-
-        if (el) {
-          el.addEventListener('click', function () {
-            module.exports.reportNow(_assign({
-              event: 'promotionClick'
-            }, addDataOnView(el, type, promoClick)));
-          });
-        }
-      }
-    },
-    /**
-     * A subscription view is the promotion for a newsletter signup: the module a user scrolls over before selecting a subscription type, e.g. gift subscription
-     *
-     * - Add `data-track-type="subscription-list"` to the element containing the subscription promotion module
-     * - Add data-track variables used in the `init` function below
-     *
-     * example: https://github.com/nymag/sites/blob/15942970e53b04b5ac9d66aec0afd5dce5bd0399/components/di-header/template.handlebars#L8
-     */
-    'subscription-list': {
-      init: function (el, type) {
-        var id = el.getAttribute('data-track-type'),
-          promoView = {
-            ecommerce: {
-              promoView: {
-                promotions: [{
-                  id: id,
-                  name: id
-                }]
-              }
-            }
-          };
-
-        queueOnceVisible(el, type, promoView, function queueCustomEventImpression(el, type, promoView) {
-          eventsQueue.push(_assign({
-            event: 'promoView'
-          }, addDataOnView(el, type, promoView)));
-        });
-      }
-    }
-  };
-
-function getSyndicationString(el) {
-  var syndicationAttr = el.getAttribute('data-syndication'),
-    syndicatedCopy = syndicationAttr === 'copy' ? 'syndicated copy' : '',
-    syndicatedOriginal = syndicationAttr === 'syndicated' ? 'syndicated original' : '';
-
-  return syndicatedCopy || syndicatedOriginal;
-}
+var eventsQueue = [], // enables us to send multiple events with one dataLayer push  and pixel fire to google
+  isCurrentlyReporting = false;
 
 window.dataLayer = window.dataLayer || [];
 
-/**
- * get the component title from itself or parent
- * @param {Element} el
- * @returns {*|string}
- */
-function getNearestComponentTitle(el) {
-  var dataAttribute = 'data-track-component-title',
-    title = el && el.getAttribute(dataAttribute),
-    parentEl;
-
-  // in some cases data attribute is attached to the parent component
-  if (!title) {
-    parentEl = dom.closest(el, '[' + dataAttribute + ']');
-    title = parentEl && parentEl.getAttribute(dataAttribute);
-  }
-  return title;
-}
-
-/**
- * adds standard click and impression tracking for e-commerce products
- * @param {Element} el
- * @param {string} type
- * @param {object} dataOnLoad
- * @param {object} eventNames
- * @param {string} eventNames.impressionName
- * @param {string} eventNames.clickName
- */
-function addEcommProductEvents(el, type, dataOnLoad, eventNames) {
-  queueOnceVisible(el, type, dataOnLoad, queueEcommProductImpression(eventNames.impressionName));
-  addEcommProductClickHandler(el, type, dataOnLoad, eventNames.clickName);
-}
-
-/**
- * push impression events to the events queue
- * @param {string} eventName
- * @returns {Function}
- */
-function queueEcommProductImpression(eventName) {
-  return function (el, type, dataOnLoad) {
-    var impressionData = addDataOnView(el, type, dataOnLoad),
-      impressionsContainer = _find(eventsQueue, function (eventContainer) {
-        return eventContainer.event === eventName;
-      });
-
-    if (impressionsContainer) {
-      impressionsContainer.ecommerce.impressions.push(impressionData);
-    } else {
-      eventsQueue.push({
-        event: eventName,
-        ecommerce: {
-          impressions: [impressionData]
-        }
-      });
-    }
-  };
-}
-
-/**
- * Adds zone attributes:
- *  Vertical Position is a percentage based on how far the top of the component is from the top of the zone.
- *  Page Zone is the name of the zone
- *
- * We wait as long as possible (i.e. until the element is visible) to calculate
- * so that there is time for images to load/height of elements to be more stable.
- *
- * On subsequent calls, the value will be retrieved from the data-attribute on the element.
- * @param {Element} el
- * @returns {object}
- */
-function getPosition(el) {
-  var zone, zoneRect, elRect,
-    // attempt to get zone previously found
-    pageZone = el.getAttribute(pageZoneAttr),
-    verticalPosition = el.getAttribute(verticalPositionAttr),
-    obj = {};
-
-  if (!pageZone || !verticalPosition) {
-    // get zone for the first time
-    zone = dom.closest(el, '[' + zoneAttr + ']');
-    if (zone) {
-      pageZone = zone.getAttribute(zoneAttr);
-      zoneRect = zone.getBoundingClientRect();
-      elRect = el.getBoundingClientRect();
-      verticalPosition = +((elRect.top - zoneRect.top) / zoneRect.height).toFixed(2);
-      // store value for subsequent requests
-      el.setAttribute(pageZoneAttr, pageZone);
-      el.setAttribute(verticalPositionAttr, verticalPosition);
-    }
-  }
-  obj[gtmPageZoneKey] = pageZone;
-  obj[gtmVerticalPositionKey] = parseInt(verticalPosition, 10); // ensure number in case from data-attr
-  return obj;
-}
-
-/**
- * test if the element is likely an image
- * @param {Element} el
- * @returns {boolean}
- */
-function isImage(el) {
-  var nodeName = (el && el.nodeName || '').toLowerCase();
-
-  switch (nodeName) {
-    case 'img':
-    case 'svg':
-    case 'path':
-    case 'canvas':
-      return true;
-    default:
-      return false;
-  }
-}
-
-/**
- * report product click through the eventsQueue
- * by adding to the eventsQueue, all other queued events will report with one pixel fire
- * @param {Element} el
- * @param {string} type
- * @param {object} dataOnLoad
- * @param {string} eventName
- */
-function addEcommProductClickHandler(el, type, dataOnLoad, eventName) {
-  var optionFromEl = el.getAttribute('data-track-option');
-
-  el.addEventListener('click', function (e) {
-    var data = addDataOnView(el, type, dataOnLoad),
-      target = e.target;
-
-    module.exports.reportNow({
-      event: eventName,
-      ecommerce: {
-        click: {
-          actionField: {
-            list: data.list,
-            option: optionFromEl || target && target.getAttribute('data-track-option') || (isImage(target) ? 'Image' : 'Text')
-          },
-          products: [ data ]
-        }
-      }
-    });
-  });
-}
-
-/**
- * this adds values that cannot be added on page load
- * some data is only accurate at the time of the event, e.g. position
- * NOTE: we assume that keys returned here are the same as in gtm
- * this is set in the config with a `getDataOnView` function
- * @param {Element} el
- * @param {string} type
- * @param {object} dataOnLoad
- * @returns {Object}
- */
-function addDataOnView(el, type, dataOnLoad) {
-  var fn = config[type].getDataOnView;
-
-  return fn ? _assign(dataOnLoad, fn(el)) : dataOnLoad;
-}
-
-/**
- * once the element is visible, then add it to a queue to be reported in batches
- * @param {Element} el
- * @param {string} type
- * @param {object} dataOnLoad -- data for the event available on page load
- * @param {Function} addToQueueFn
- */
-function queueOnceVisible(el, type, dataOnLoad, addToQueueFn) {
-  var visible = new $visibility.Visible(el, { shownThreshold: 0.5 });
-
-  visible.on('shown', function () {
-    if ($visibility.isElementNotHidden(el)) {
-      addToQueueFn(el, type, dataOnLoad);
-      module.exports.reportSoon();
-    }
-  });
-}
-
 /**
  * queues any events given in the params and reports the queue immediately
  * @param {...object} optional event(s)
@@ -542,92 +34,4 @@ function reportNow() {
   }
 }
 
-/**
- * scrape all of the components on the page that have event attributes
- * and run their init function
- * @param {object} visitState
- * @param {Element} element - optional parent element to query inside
- */
-function initializeEventsFromDom(visitState, element) {
-  var elementContainer = element ? element : document.body,
-    eventElements = elementContainer.querySelectorAll('[' + typeAttr + ']');
-
-
-  _each(eventElements, function (el) {
-    var type = el.getAttribute(typeAttr),
-      typeConfig = config[type];
-
-    if (typeConfig && typeConfig.init) {
-      typeConfig.init(el, type, visitState);
-    }
-  });
-}
-
-/**
- * loads GTM and initializes the dataLayer
- * @param {string} containerId
- * @param {object} visitState
- * @param {string} visitState.clientId
- * @param {string} visitState.pageUri
- */
-function initializeGtmAndDataLayer(containerId, visitState) {
-  //  dataLayer push prior to loading GTM
-  module.exports.reportNow({
-    event: 'dataLayer-initialized',
-    userDetails: {
-      newYorkMediaUserID: visitState.clientId,
-      loyaltyLevel: visitState.userLoyalty
-    },
-    pageDetails: {
-      pageUri: visitState.pageUri,
-      vertical: vertical,
-      pageType: pageType,
-      author: author
-    }
-  });
-
-  // Load GTM: https://developers.google.com/tag-manager/quickstart
-  /* eslint-disable */
-  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-  })(window,document,'script','dataLayer',containerId);
-  /* eslint-enable */
-}
-
-/**
- * loads gtm; called by `gtm` component which places gtm in the body
- * @param {string} containerId  - GTM container id to load
- */
-function initGtm(containerId) {
-  const isGtmLoadedByGtmHead = !!document.head.querySelector('.head-gtm');
-
-  if (initializedOnLoad) {
-    return; // run only once
-  }
-  initializedOnLoad = true;
-  visit.onceReady(function (visitState) {
-    publicVisitState = visitState;
-
-    if (!isGtmLoadedByGtmHead) {
-      // if page has `head-gtm` component, then gtm was already loaded inline in the head
-      initializeGtmAndDataLayer(containerId, visitState);
-    }
-    initializeEventsFromDom(visitState);
-
-    // report on load
-    module.exports.reportNow();
-
-    // report when user intends to exit
-    document.addEventListener('mouseleave', function (e) {
-      if (e.clientY < 0) {
-        module.exports.reportNow();
-      }
-    }, false);
-  });
-}
-
-
-module.exports.init = initGtm;
 module.exports.reportNow = reportNow;
diff --git a/app/services/client/visibility.js b/app/services/client/visibility.js
index 45ceeb3..ab57398 100644
--- a/app/services/client/visibility.js
+++ b/app/services/client/visibility.js
@@ -64,7 +64,7 @@ function updateSeen(item, evt) {
 /**
  * sets preload property
  * @param  {Visible} item
- * @param  {{}} evt
+ * @param  {Object} evt
  * @param  {Number} innerHeight
  * @fires Visible#preload
  */
@@ -99,7 +99,7 @@ function updateVisibilityForItem(item) {
 
 /**
  * make sure an element isn't hidden by styles or etc
- * @param  {Element}  el
+ * @param  {Element} el
  * @return {Boolean}
  */
 function isElementNotHidden(el) {
@@ -126,28 +126,6 @@ function getVerticallyVisiblePixels(rect, innerHeight) {
   return min(innerHeight, max(rect.bottom, 0)) - min(max(rect.top, 0), innerHeight);
 }
 
-/**
- * Get offset of element relative to entire page
- *
- * @param {Element} el
- * @returns {{left: number, top: number}}
- * @see http://jsperf.com/offset-vs-getboundingclientrect/7
- */
-function getPageOffset(el) {
-  var offsetLeft = el.offsetLeft,
-    offsetTop = el.offsetTop;
-
-  while (el = el.offsetParent) {
-    offsetLeft += el.offsetLeft;
-    offsetTop += el.offsetTop;
-  }
-
-  return {
-    left: offsetLeft,
-    top: offsetTop
-  };
-}
-
 /**
  * Create a new Visible class to observe when elements enter and leave the viewport
  *
@@ -203,7 +181,6 @@ Visible.prototype = {
 Eventify.enable(Visible.prototype);
 
 VisibleEvent = function (type, options) {
-  debugger;
   this.type = type;
   Object.assign({},this,options);
 };
@@ -212,7 +189,6 @@ VisibleEvent = function (type, options) {
 $document.addEventListener('scroll', _throttle(updateVisibility, 200));
 
 // public
-module.exports.getPageOffset = getPageOffset;
 module.exports.getVerticallyVisiblePixels = getVerticallyVisiblePixels;
 module.exports.isElementNotHidden = isElementNotHidden;
 module.exports.Visible = Visible;

From d529ab6bff38af5edc421ed0c7fcd8711451334c Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Tue, 5 Mar 2019 15:38:55 -0500
Subject: [PATCH 23/45] remove unused files

---
 app/services/client/gtm.js                    |   1 -
 app/services/client/page.js                   |  67 ---
 app/services/client/product-links.js          |  84 ---
 app/services/client/product-skimlinks.js      | 160 ------
 app/services/client/product-subtags.js        | 358 ------------
 app/services/client/third-party.js            |  71 ---
 app/services/client/visibility.js             |   4 +-
 app/services/client/visit.js                  | 534 ------------------
 .../universal/youtube-video-player.js         |  16 +-
 9 files changed, 11 insertions(+), 1284 deletions(-)
 delete mode 100644 app/services/client/page.js
 delete mode 100644 app/services/client/product-links.js
 delete mode 100644 app/services/client/product-skimlinks.js
 delete mode 100644 app/services/client/product-subtags.js
 delete mode 100644 app/services/client/third-party.js
 delete mode 100644 app/services/client/visit.js

diff --git a/app/services/client/gtm.js b/app/services/client/gtm.js
index 288c579..645755c 100644
--- a/app/services/client/gtm.js
+++ b/app/services/client/gtm.js
@@ -20,7 +20,6 @@ window.dataLayer = window.dataLayer || [];
 
 /**
  * queues any events given in the params and reports the queue immediately
- * @param {...object} optional event(s)
  */
 function reportNow() {
   eventsQueue.push.apply(eventsQueue, arguments);
diff --git a/app/services/client/page.js b/app/services/client/page.js
deleted file mode 100644
index db42e12..0000000
--- a/app/services/client/page.js
+++ /dev/null
@@ -1,67 +0,0 @@
-'use strict';
-
-const _get = require('lodash/get'),
-  _memoize = require('lodash/memoize');
-
-/**
- * we store some page-level data in a "primary page" component
- * most often this is the article component
- * @returns {Element|null}
- */
-function getPrimaryPageComponent() {
-  return document.querySelector('.article') || document.querySelector('.lede-video');
-}
-
-/**
- * Get content channel
- * @returns {string}
- */
-function getPrimaryPageComponentChannel() {
-  const el = getPrimaryPageComponent();
-
-  return el && el.getAttribute('data-content-channel') || 'Undefined Channel';
-}
-
-/**
- * @returns {string|null} e.g. `nymag.com/scienceofus/_pages/some-id@published`
- */
-function getPageUri() {
-  return document.documentElement.getAttribute('data-uri');
-}
-
-/**
- * @returns {string} e.g. `ciu7g35p10004fvy6m7188nan`
- */
-function getPageId() {
-  return getPageUri().split('/_pages/')[1];
-}
-
-/**
- * @returns {string} e.g. `nymag.com/scienceofus`
- */
-function getSiteBase() {
-  return (getPageUri() || '').split('/_pages/')[0];
-}
-
-/**
- * @param {string} key - meta key to query
- * @returns {string} the content of the tag
- */
-function getMetaContent(key) {
-  var meta = document.querySelector('meta[name="' + key + '"]') ||
-    document.querySelector('meta[property="' + key + '"]');
-
-  return _get(meta, 'content', '');
-}
-
-// assumes values do not change after page load
-module.exports.getMeta = _memoize(getMetaContent);
-module.exports.getVertical = module.exports.getMeta.bind(this, 'vertical');
-module.exports.getPageType = module.exports.getMeta.bind(this, 'type');
-module.exports.getAuthor = module.exports.getMeta.bind(this, 'author');
-module.exports.getSiteName = module.exports.getMeta.bind(this, 'og:site_name');
-module.exports.getSiteBase = _memoize(getSiteBase);
-module.exports.getPageUri = _memoize(getPageUri);
-module.exports.getPageId = _memoize(getPageId);
-module.exports.getChannel = _memoize(getPrimaryPageComponentChannel);
-module.exports.getPrimaryPageComponent = getPrimaryPageComponent;
diff --git a/app/services/client/product-links.js b/app/services/client/product-links.js
deleted file mode 100644
index 5921e1d..0000000
--- a/app/services/client/product-links.js
+++ /dev/null
@@ -1,84 +0,0 @@
-'use strict';
-
-const productSubtags = require('../../services/client/product-subtags'),
-  { processSkimlink } = require('./product-skimlinks'),
-  _includes = require('lodash/includes'),
-  thirdParty = require('../../services/client/third-party'),
-  bamxDomain = 'shop-links.co/';
-
-function isAmazonLink(url) {
-  return typeof url === 'string' && url.includes('amazon.com');
-}
-
-/**
- * Handle product url clicks
- * @param {string} productUrl
- * @param {string} eventType
- * @returns {function}
- */
-function handleBuyClick(productUrl, eventType) {
-  return function () {
-    if (window.fbq) {
-      window.fbq('trackCustom', eventType, {domain: productUrl});
-    }
-  };
-}
-
-/**
- * Append third-party ecomm scripts to the page
- * @param {string} productUrl
- * @param {boolean} includeNarrativ
- */
-function attachThirdPartyScripts(productUrl, includeNarrativ = false) {
-  const isAmazon = isAmazonLink(productUrl),
-    amazonOnetagId = '74e5d3e9-e5c4-4fa2-85e4-0e43ae3f0f84',
-    amazonOnetagSrc = `z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=${amazonOnetagId}`,
-    bamxSrc = 'static.bam-x.com/tags/nymag.js';
-
-  if (isAmazon) {
-    thirdParty.includeScript(amazonOnetagSrc, 2500);
-  }
-
-  if (_includes(productUrl, bamxDomain) || includeNarrativ) {
-    thirdParty.includeScript(bamxSrc);
-  }
-}
-
-function shouldTrySkimlinks(el) {
-  const url = el.href,
-    isNarrativLink = _includes(url, bamxDomain),
-    isOtherAffiliate = !!productSubtags.getAffiliate(url);
-
-  return !isNarrativLink && !isOtherAffiliate;
-}
-
-/**
- * Handle behavior universal to all product links
- * @param {Element} buyLink
- * @param {object} visitState
- */
-function initLink(buyLink, visitState) {
-  var productUrl = buyLink && buyLink.href, // not `getAttribute`, because want resolved url
-    // dynamic narrativ links have the class 'narrativ-link'
-
-    isNarrativeSecondBuyButton = buyLink.classList.contains('narrativ-link');
-
-  if (productUrl) {
-    if (shouldTrySkimlinks(buyLink)) {
-      processSkimlink(buyLink);
-    }
-
-    // add click handler
-    buyLink.addEventListener('click', handleBuyClick(productUrl, 'Click-Out'));
-    // handle right clicks event
-    buyLink.addEventListener('contextmenu', handleBuyClick(productUrl, 'Click-Out-Right'));
-
-    // add/extend product link subtag with client-side params
-    productSubtags.ensureSubtag(buyLink, visitState);
-    productSubtags.ensureSiteTag(buyLink);
-
-    attachThirdPartyScripts(productUrl, isNarrativeSecondBuyButton);
-  }
-}
-
-module.exports.initLink = initLink;
diff --git a/app/services/client/product-skimlinks.js b/app/services/client/product-skimlinks.js
deleted file mode 100644
index 5320f6a..0000000
--- a/app/services/client/product-skimlinks.js
+++ /dev/null
@@ -1,160 +0,0 @@
-'use strict';
-
-const _includes = require('lodash/includes'),
-  _startsWith = require('lodash/startsWith');
-
-/**
- * Skimlinks adds affiliate ids to links so that we gain revenue from links to Zappos, J.Crew, etc.
- * We use the Amazon ID directly on Amazon links.
- *
- * Skimlinks should only be applied to external links.
- *
- * Note: `internalHostnames` in the site's config must be updated when a new host is added.
- *
- * Skimlinks API Documentation:
- * http://go.redirectingat.com/doc/
- */
-
-var excludedHostnames, skimlinksBaseUrl, amazonTag, skimlinksId,
-  ignoreDataAttribute = 'data-affiliate-links-ignore',
-  skimLinksHostname = 'go.redirectingat.com',
-  article;
-
-function isSponsored() {
-  article = article || window.document.querySelector('article');
-
-  return article && article.getAttribute('data-type') === 'Sponsor Story';
-}
-
-/**
-* Excluded hostnames: All links that match this list will not get affiliate id's added.
-* @param {Element} componentEl
-*/
-function setExcludedHostnames(componentEl) {
-  excludedHostnames = (componentEl.getAttribute('data-excluded-hostnames') || '').toLowerCase().split(',');
-}
-
-/**
-* Check for skimlinks
-* @param {Element} componentEl
-* @returns {boolean}
-*/
-function isSkimLink(componentEl) {
-  skimlinksId = componentEl.getAttribute('data-skimlinks');
-
-  return !!skimlinksId;
-}
-
-/**
-* Check for Amazon affiliate tag.
-* @param {Element} componentEl
-* @returns {boolean}
-*/
-function setAmazonTag(componentEl) {
-  componentEl = componentEl || document.querySelector('.affiliate-links');
-
-  if (componentEl) {
-    amazonTag = componentEl.getAttribute('data-amazon');
-  }
-
-  return !!amazonTag;
-}
-
-/**
-* Test if the link is an excluded hostname
-* @param {string} hostname ideally is the hostname, but can also be the URL.
-* @returns {boolean}
-*/
-function isExcluded(hostname) {
-  return _includes(excludedHostnames, hostname) ||
-    _startsWith(hostname, 'www.') && _includes(excludedHostnames, hostname.slice(4)) ||
-    isSponsored();
-}
-
-/**
-* Test if the link is a standard URL. e.g. not a mailto: or javascript:.
-* @param {string} url
-* @returns {boolean}
-*/
-function isUrlProtocol(url) {
-  return url.indexOf('mailto:') !== 0 && url.indexOf('javascript:') !== 0;
-}
-
-/**
-* Returns hostname from an HTML element.
-* @param {object} target
-* @returns {string}
-*/
-function getTargetHostname(target) {
-  return (target.hostname || target.host || target.href || '').toLowerCase();
-}
-
-/**
- * Convert url to skimlinks
- * @param {string} url
- * @param {string} hostname
- * @returns {string}
- */
-function convertSkimlink(url, hostname) {
-  var urlIsSkimlink = hostname.indexOf(skimLinksHostname) === 0;
-
-  // construct the skimlinks url and try to create the base url or set the base url to undefined.
-  skimlinksBaseUrl = skimlinksBaseUrl || skimlinksId ? '//go.redirectingat.com/?xs=1&id=' + skimlinksId + '&sref=' + encodeURIComponent(window.location.href) + '&url=' : undefined;
-
-  return !urlIsSkimlink && skimlinksBaseUrl && skimlinksBaseUrl + encodeURIComponent(url);
-}
-
-/**
- * For cases where we do not want affiliate-links to run and we do not know the hostname, then
- * `data-affiliate-links-ignore` can be set to 'true'.
- * This was created for bam-x, a third-party script that rewrites the href and we do not want it to go through skimlinks.
- * `data-affiliate-links-ignore` is set by `components/product/client.js`
- * TODO: consider server-side implemenation of bam-x, so that we do not have their script on our pages.
- * @param {Element} target
- * @returns {boolean}
- */
-function hasIgnoreAttribute(target) {
-  return target.getAttribute(ignoreDataAttribute) === 'true';
-}
-
-/**
-* Convert external link to a skimlink
-* @param {element} el
-*/
-function processSkimlink(el) {
-  var url, hostname,
-    href = el && el.href;
-
-  hostname = getTargetHostname(el);
-
-  if (isUrlProtocol(href) && !isExcluded(hostname) && !hasIgnoreAttribute(el)) {
-    url = convertSkimlink(href, hostname);
-    if (url) {
-      el.href = url;
-    }
-  }
-}
-
-// set skimlink id
-function init() {
-  const el = document.querySelector('.affiliate-links');
-
-  if (el) {
-    setAmazonTag(el);
-    setExcludedHostnames(el);
-    isSkimLink(el);
-  }
-}
-
-function getSiteTag() {
-  return amazonTag
-    ? amazonTag
-    : setAmazonTag() && amazonTag;
-}
-
-init();
-
-module.exports = {
-  processSkimlink,
-  getSiteTag
-};
diff --git a/app/services/client/product-subtags.js b/app/services/client/product-subtags.js
deleted file mode 100644
index c742d89..0000000
--- a/app/services/client/product-subtags.js
+++ /dev/null
@@ -1,358 +0,0 @@
-'use strict';
-
-/**
- * ========
- * Overview
- * ========
- *
- * This service creates subtag query params for product links, for affiliates such as
- * Amazon, Rakuten, and Shareasale
- *
- * At the time of its creation, this service is used by the product components and by the gtm service for inline links
- *
- */
-
-const dom = require('@nymag/dom'),
-  urlParse = require('url-parse'),
-  _memoize = require('lodash/memoize'),
-  _includes = require('lodash/includes'),
-  _map = require('lodash/map'),
-  _mapValues = require('lodash/mapValues'),
-  _reduce = require('lodash/reduce'),
-  _assign = require('lodash/assign'),
-  _get = require('lodash/get'),
-  _pickBy = require('lodash/pickBy'),
-  _find = require('lodash/find'),
-  page = require('./page'),
-  { getSiteTag } = require('./product-skimlinks'),
-
-  // this object determines the construction of subtag params for each affiliate sales partner
-  // note: the order in which fields are defined here determine the order they appear in the subtag string
-  affiliateSettings = {
-    amazon: {
-      domains: ['amazon.com'],
-      subtagKey: 'ascsubtag',
-      fields: ['siteShortKey', 'pageUri', 'productId', 'deviceAbbreviation', 'utmSource', 'utmMedium', 'utmCampaign', 'referrer', 'zone'],
-      maxLength: 99,
-      delimiter: 'standard'
-    },
-    rakuten: {
-      domains: ['click.linksynergy.com/deeplink'],
-      subtagKey: 'u1',
-      fields: ['siteShortKey', 'pageUri', 'productId', 'deviceAbbreviation', 'zone'],
-      maxLength: 72,
-      delimiter: 'standard'
-    },
-    shareasale: {
-      domains: ['shareasale.com'],
-      subtagKey: 'afftrack',
-      fields: ['siteShortKey', 'pageUri', 'productId', 'deviceAbbreviation', 'utmSource', 'utmMedium', 'utmCampaign', 'referrer', 'zone'],
-      maxLength: 99,
-      delimiter: 'standard'
-    },
-    skimlinks: {
-      domains: ['go.redirectingat.com'],
-      subtagKey: 'xcust',
-      fields: ['pageUri', 'productId', 'utmCampaign', 'utmSource', 'utmMedium', 'zone', 'deviceAbbreviation'],
-      maxLength: 50,
-      delimiter: 'alt'
-    }
-  },
-  // really wish we did not need to hard-code this here
-  internalHosts = [
-    'nymag.com',
-    'vulture.com',
-    'grubstreet.com',
-    'thecut.com'
-  ],
-  gtm = dom.find('.gtm'),
-  siteShortKey = gtm && gtm.getAttribute('data-site-short-key'),
-  shortenedPageUri = shortenUri(page.getPageUri()),
-  getters = {
-    siteShortKey: () => siteShortKey,
-    pageUri: () => shortenedPageUri,
-    productId: ({productLink}) => productLink && productLink.getAttribute('data-track-id'),
-    deviceAbbreviation: _memoize(({visitState}) => guessDeviceAbbreviation(visitState.os, visitState.screenWidth)),
-    utmSource: _memoize(({visitState}) => (visitState.utm_source || '').substr(0, 3)),
-    utmMedium: _memoize(({visitState}) => (visitState.utm_medium || '').substr(0, 2)),
-    utmCampaign: _memoize(({visitState}) => (visitState.utm_campaign || '').substr(0, 17)),
-    referrer: _memoize(({visitState}) => shortenReferrer(visitState.referrer)),
-    zone: ({productLink}) => getPageZone(productLink)
-  },
-  zoneAttr = 'data-track-zone',
-
-  // Mapping between subtag property and subtag key
-  // Any changes here should be documented in /_components/product/schema.yml description
-  subtagDictionary = {
-    siteShortKey: '',
-    pageUri: 'p',
-    productId: 'i',
-    zone: 'z',
-    deviceAbbreviation: 'd',
-    utmSource: 's',
-    utmMedium: 'm',
-    utmCampaign: 'c',
-    referrer: 'r' // referrer at the end in case need to truncate
-  },
-  delimiters = {
-    standard: ['[', ']'],
-    alt: ['__', '_']
-  };
-
-/**
- *
- * @param {string} os
- * @param {number} width
- * @returns {string} one letter string to indicate device
- */
-function guessDeviceAbbreviation(os, width) {
-  /* eslint complexity: [2, 20] */
-  // yes, this is "complex", but is best effort.
-  switch (os) {
-    case 'Windows Phone':
-    case 'iOS':
-    case 'Android':
-    case 'BlackBerry':
-      return width < 728 ? 'M' : 'T';
-    case 'Linux':
-    case 'Windows':
-    case 'Mac OS X':
-      return 'D';
-    default:
-      if (width < 728) {
-        return 'M';
-      }
-      return width > 1024 ? 'D' : 'T';
-  }
-}
-
-/**
- * retrieve page zone containing the product-link
- * @param {string} el
- * @returns {string} one letter string to indicate device
- */
-function getPageZone(el) {
-  var zone = dom.closest(el, '[' + zoneAttr + ']'),
-    zoneStr = zone && zone.getAttribute(zoneAttr) || '';
-
-  return zoneStr.substr(0, 1);
-}
-
-/**
- * removes the `www.` from host
- * @param {string} host - lowercase string
- * @returns {string}
- */
-function shortenHost(host) {
-  return host.substr(0,4) === 'www.' ? host.substr(4) : host;
-}
-
-/**
- * shortens referrer to shortest usable string:
- *  removes www.
- *  keeps rest of host
- *  keeps first directory in path
- *  removes query and hash
- *  host and path are separated by `/`
- * @param {string} [referrer]
- * @returns {string} defaults to empty string if no referrer found
- */
-function shortenReferrer(referrer) {
-  var parts = referrer && referrer.match(/\/\/([^\/]+)(\/[^\/#?]+)?/),
-    shortenedReferrer = '',
-    formattedHost, firstDirectory;
-
-  if (parts) {
-    formattedHost = shortenHost(parts[1] || '').toLowerCase();
-    firstDirectory = parts[2] || '';
-    shortenedReferrer = formattedHost + (_includes(internalHosts, formattedHost) ? firstDirectory : '');
-  }
-
-  return shortenedReferrer;
-}
-
-/**
- * shortens uri to shortest usable string:
- *  reduce to instance key
- *  replace `ambrose-` with `a-`
- *  removes `@published` version
- * @param {string} [uri]
- * @returns {string}
- */
-function shortenUri(uri) {
-  return (uri || '').split('/').pop().replace('ambrose-', 'a-').replace('@published', '');
-}
-
-function parseValueFromSubtag(param, delimiter, subtagString) {
-  const subtagKey = delimiter[0] + param + delimiter[1],
-    startString = subtagString.split(subtagKey)[1] || '';
-
-  return startString
-    ? startString.split(delimiter[0])[0]
-    : null;
-}
-
-/**
- * parses a product link subtag and returns data as an object
- * @param {string} [subtag]
- * @param {array} delimiter
- * @returns {object}
- */
-function parseSubtag(subtag, delimiter = delimiters['standard']) {
-  return _pickBy(_mapValues(subtagDictionary, (val) => {
-    return parseValueFromSubtag(val, delimiter, subtag);
-  }));
-}
-
-/**
- * generate subtag string based on fixed property names
- * @param {object} subtagData
- * @param {object} affiliate
- * @param {array} delimiter
- * @returns {string}
- */
-function generateSubtag(subtagData, affiliate, delimiter = delimiters['standard']) {
-  const wrap = (delimiter) => {
-      return (key) => `${delimiter[0]}${key}${delimiter[1]}`;
-    },
-    wrapKey = wrap(delimiter),
-    fields = _get (affiliateSettings[affiliate], 'fields');
-
-  return _reduce(fields, (acc, field) => {
-    const subtagKey = wrapKey(subtagDictionary[field]),
-      value = subtagData[field];
-
-    return acc += value ? subtagKey + value : '';
-  }, '');
-}
-
-/**
- * return subtag string, truncated to length limit as needed
- * @param {string} subtag
- * @param {number} length
- * @returns {string}
- */
-function applySubtagMaxlength(subtag, length) {
-  var maxLength = length - 3 * (subtag.split(',').length - 1 + subtag.split('|').length - 1);
-
-  return subtag.substr(0, maxLength);
-}
-
-/**
- * generate subtag data
- * @param {array} fields
- * @param {Object} obj
- * @param {Object} obj.visitState
- * @param {Element} obj.productLink
- * @returns {Object}
- */
-function getSubtagData({ fields = [], visitState, productLink }) {
-  let obj = {};
-
-  fields.forEach(field => {
-    obj[field] = getters[field] && getters[field]({visitState, productLink});
-  });
-
-  return obj;
-}
-
-/**
- * parse query string into an object
- * @param {string} str
- * @returns {Object}
- */
-function parseQuery(str = '') {
-  return str.split('&').reduce((acc, keyval) => {
-    const key = keyval.split('=')[0],
-      val = keyval.split('=')[1];
-
-    if (typeof val !== 'undefined') {
-      acc[key] = val;
-    }
-
-    return acc;
-  }, {});
-}
-
-/**
- * append or extend product tracking subtag
- * @param {Object} obj
- * @param {string} obj.affiliate
- * @param {Element} obj.productLink
- * @param {Object} obj.visitState
- */
-function processSubtag({ affiliate, productLink, visitState = {} }) {
-  const url = productLink.href || '',
-    fields = _get(affiliateSettings[affiliate], 'fields'),
-    subtagKey = _get(affiliateSettings[affiliate], 'subtagKey'),
-    maxLength = _get(affiliateSettings[affiliate], 'maxLength'),
-    delimiterName = _get(affiliateSettings[affiliate], 'delimiter'),
-    delimiter = delimiters[delimiterName];
-  let query = url.indexOf('?') >= 0 ? url.split('?').pop() : '',
-    queryData = parseQuery(query),
-    subtagData = getSubtagData({ fields, visitState, productLink }),
-    subtagString;
-
-  if (subtagKey) {
-    subtagString = queryData[subtagKey] || '';
-    subtagData = _assign(parseSubtag(subtagString, delimiter), _pickBy(subtagData));
-    subtagString = generateSubtag(subtagData, affiliate, delimiter);
-    queryData[subtagKey] = applySubtagMaxlength(subtagString, maxLength);
-    query = _map(queryData, (value, key) => `${key}=${value}`).join('&');
-    productLink.search = query ? `?${query}` : '';
-  }
-}
-
-/**
- * Return affiliate matching product url
- * @param {string} url
- * @returns {string}
- */
-function getAffiliate(url) {
-  const affiliates = Object.keys(affiliateSettings);
-
-  return _find(affiliates, affiliate => _find(affiliateSettings[affiliate].domains, domain => url.includes(domain.toLowerCase()))) || '';
-}
-
-/**
- * add or extend subtag on amazon and narrativ links
- * server-side subtag params will be augmented by client-side params
- * @param {Element} [productLink]
- * @param {object} [visitState]
- */
-function ensureSubtag(productLink, visitState) {
-  const url = productLink.href,
-    affiliate = getAffiliate(url);
-
-  if (affiliate) {
-    processSubtag({productLink, visitState, affiliate});
-  }
-}
-
-function ensureSiteTag(el) {
-  const url = el.href,
-    key = 'tag=',
-    parsedUrl = urlParse(url),
-    q = parsedUrl.query,
-    affiliate = getAffiliate(url),
-    isAmazon = affiliate === 'amazon',
-    hasSiteTag = q.includes(key),
-    siteTag = getSiteTag();
-
-  if (isAmazon && !hasSiteTag) {
-    parsedUrl.set('query', q + (q.length ? '&' : '?') + `&${key}${siteTag}`);
-    el.href = parsedUrl.toString();
-  }
-}
-
-module.exports.guessDeviceAbbreviation = guessDeviceAbbreviation;
-module.exports.shortenUri = shortenUri;
-module.exports.getPageZone = getPageZone;
-module.exports.generateSubtag = generateSubtag;
-module.exports.ensureSubtag = ensureSubtag;
-module.exports.ensureSiteTag = ensureSiteTag;
-module.exports.getAffiliate = getAffiliate;
-
-// exports for testing
-module.exports.parseSubtag = parseSubtag;
-module.exports.processSubtag = processSubtag;
diff --git a/app/services/client/third-party.js b/app/services/client/third-party.js
deleted file mode 100644
index 974a651..0000000
--- a/app/services/client/third-party.js
+++ /dev/null
@@ -1,71 +0,0 @@
-'use strict';
-
-const _debounce = require('lodash/debounce');
-let body = document.body,
-  scriptTagsAdded = {},
-  debounceFns = {};
-
-/**
- * Remove protocol if present, and return schemeless url
- * @param {string} url
- * @returns {boolean}
- */
-function removeProtocol(url) {
-  var splitUrl = url.split('//');
-
-  return '//' + (splitUrl.length > 1 ? splitUrl[1] : splitUrl[0]);
-}
-
-/**
- * Return boolean based on whether the script tag has already been added or not
- * @param {string} url
- * @returns {boolean}
- */
-function shouldAppendScript(url) {
-  return !scriptTagsAdded[url];
-}
-
-/**
- * Construct script element with given URL and append to body
- * @param {string} url
- */
-function appendScript(url) {
-  var scriptEl = document.createElement('script');
-
-  scriptEl.type = 'text/javascript';
-  scriptEl.src = url;
-  scriptEl.async = true;
-  body.appendChild(scriptEl);
-
-  scriptTagsAdded[url] = true;
-}
-
-/**
- * Register URL for a third party library to be imported via script tag
- * @param {string} url
- */
-function includeScript(url) {
-  url = removeProtocol(url);
-  if (shouldAppendScript(url)) {
-    appendScript(url);
-  }
-}
-
-/**
- * `includeScript` with debounce
- * @param {string} url
- * @param {number} time (in milliseconds)
-
- */
-function debouncedIncludeScript(url, time) {
-  const debounceTime = time || 0;
-
-  if (url) {
-    if (!debounceFns[url]) {
-      debounceFns[url] = _debounce(includeScript.bind(null, url), debounceTime);
-    }
-    debounceFns[url]();
-  }
-}
-
-module.exports.includeScript = debouncedIncludeScript;
diff --git a/app/services/client/visibility.js b/app/services/client/visibility.js
index ab57398..6545c1a 100644
--- a/app/services/client/visibility.js
+++ b/app/services/client/visibility.js
@@ -36,7 +36,7 @@ function updateVisibility() {
 
 /**
  * updates seen property
- * @param  {Visble} item
+ * @param  {Visible} item
  * @param  {{}} evt
  * @fires Visible#shown
  * @fires Visible#hidden
@@ -153,6 +153,7 @@ Visible = function (el, options) {
     updateVisibilityForItem(this); // set immediately to visible or not
   }
 };
+
 Visible.prototype = {
   /**
    * Stop triggering.
@@ -178,6 +179,7 @@ Visible.prototype = {
    * @param {{}}
    */
 };
+
 Eventify.enable(Visible.prototype);
 
 VisibleEvent = function (type, options) {
diff --git a/app/services/client/visit.js b/app/services/client/visit.js
deleted file mode 100644
index 46d4513..0000000
--- a/app/services/client/visit.js
+++ /dev/null
@@ -1,534 +0,0 @@
-'use strict';
-const _reduce = require('lodash/reduce'),
-  _get = require('lodash/get'),
-  _includes = require('lodash/includes'),
-  _assign = require('lodash/assign'),
-  _clone = require('lodash/clone'),
-  _remove = require('lodash/remove'),
-  Fingerprint2 = require('fingerprintjs2'),
-  cookie = require('js-cookie');
-
-var localStorage = window.localStorage,
-  uriAttr = 'data-uri',
-  visitCountKey = 'visitServiceCount', // set in the-factory
-  previousActionTimestampKey = 'visitServicePreviousTimestamp', // set in the-factory
-  firstVisitTimestampKey = 'visitServiceFirstVisitTimestamp',
-  visitStartTimestampKey = 'visitServiceVisitStartTimestamp',
-  initialReferrerKey = 'visitServiceInitialRefferer', // new to clay
-  clientIdCookieKey = 'nyma', // set on all non-clay pages
-  visitDatesKey = 'visitDates',
-  maxVisitDuration = 1000 * 60 * 60 * 24, // a visit can not last more than 24 hours
-  sessionTTL = 1000 * 60 * 30, // keep session open for 30 minutes after last event
-  visitDatesLimit = 30, // number of days over which to track dates of visits
-  publicState = {},
-  publicStateIsReady = false,
-  onceReadyQueue = [],
-  state = Object.create(Object.prototype, {
-    /**
-     * runs all callbacks in the queue with the current value of clientId
-     * @private
-     */
-    _processQ: {
-      value: function () {
-        var qClone = this._q.slice(0),
-          l = qClone.length,
-          i;
-
-        this._q = [];
-        for (i = 0; i < l; i++) {
-          qClone[i].call(null, this._clientId);
-        }
-      }
-    },
-    _q: {
-      writable: true,
-      value: []
-    },
-    _clientId: {
-      writable: true,
-      value: null
-    },
-    clientId: {
-      /**
-       * attempts to get clientId as stored in private `_clientId`
-       * @returns {state._clientId}
-       */
-      get: function () {
-        return this._clientId;
-      },
-      /**
-       * sets the clientId in state and cookie, then processes queue of callbacks
-       * @param {string} val
-       */
-      set: function (val) {
-        if (val) {
-          this._clientId = val;
-          cookie.set(clientIdCookieKey, val, { expires: 365 * 5 }); // cookie expires after 5 years
-          this._processQ();
-        }
-      }
-    },
-    /**
-     * the clientId may need to be retrieved through an async process
-     * this method will call the callback once the clientId is ready
-     * @param {Function} callback
-     */
-    onceClientIdIsReady: {
-      value: function (callback) {
-        this._clientId ? callback.call(null, this._clientId) : this._q.push(callback);
-      }
-    },
-    isNewVisit: {
-      writable: true,
-      value: false
-    }
-  });
-
-/**
- * @param {string|number} [val]
- * @returns {number} defaults to zero if number can not be parsed
- */
-function toNumber(val) {
-  return parseInt(val, 10) || 0; // defaults to zero
-}
-/**
- *
- * @param {string} key
- * @returns {number}
- */
-function getNumberFromLocalStorage(key) {
-  return toNumber(localStorage.getItem(key)); // defaults to zero
-}
-
-/**
- * get visit count from localStorage
- * @returns {number}
- */
-function getVisitCount() {
-  return getNumberFromLocalStorage(visitCountKey);
-}
-
-/**
- * get visit count from localStorage
- * @returns {number}
- */
-function getFirstVisitTimestamp() {
-  return getNumberFromLocalStorage(firstVisitTimestampKey);
-}
-
-function incrementVisitCount() {
-  try {
-    localStorage.setItem(visitCountKey, getVisitCount() + 1);
-  } catch (e) {
-    // the browser failed to setItem, likely due to Private Browsing mode. We don't need to take any action
-  }
-}
-
-/**
- * parse the clientId which contains the first visit timestamp
- * @param {string} clientId
- * @returns {number}
- */
-function clientIdToFirstVisitTimestamp(clientId) {
-  return toNumber(clientId.substr(clientId.indexOf('.') + 1)); // assumes that timestamp is at end of clientId
-}
-
-/**
- *
- * @param {string} clientId
- * @returns {number}
- */
-function ensureFirstVisitTimestamp(clientId) {
-  var firstVisitTimestamp = getFirstVisitTimestamp();
-
-  if (!firstVisitTimestamp) {
-    firstVisitTimestamp = clientIdToFirstVisitTimestamp(clientId); // could be 0 if clientId is malformed
-    try {
-      localStorage.setItem(firstVisitTimestampKey, firstVisitTimestamp);
-    } catch (e) {
-      // the browser failed to setItem, likely due to Private Browsing mode. We don't need to take any action
-    }
-  }
-  return firstVisitTimestamp;
-}
-
-/**
- *
- * @param {number} timestamp
- */
-function setPreviousActionTimestamp(timestamp) {
-  try {
-    localStorage.setItem(previousActionTimestampKey, timestamp);
-  } catch (e) {
-    // the browser failed to setItem, likely due to Private Browsing mode. We don't need to take any action
-  }
-}
-
-/**
- * @param {number} timestamp
- */
-function setVisitStartTimestamp(timestamp) {
-  try {
-    localStorage.setItem(visitStartTimestampKey, timestamp);
-  } catch (e) {
-    // the browser failed to setItem, likely due to Private Browsing mode. We don't need to take any action
-  }
-}
-
-/**
- * Checks if more than the `sessionTTL` has elapsed since the previous action
- * @param {number} currentTimestamp
- * @returns {boolean}
- */
-function isNewVisit(currentTimestamp) {
-  var sessionExpired = currentTimestamp - sessionTTL > getNumberFromLocalStorage(previousActionTimestampKey),
-    visitDurationExpired = currentTimestamp - maxVisitDuration > getNumberFromLocalStorage(visitStartTimestampKey);
-
-  return sessionExpired || visitDurationExpired;
-}
-
-/**
- * @param {number} currentTimestamp
- */
-function updateNewVisitState(currentTimestamp) {
-  state.isNewVisit = isNewVisit(currentTimestamp);
-}
-
-/**
- * Extend visit whenever an "action" is taken to keep the session alive
- * This should be triggered when any user action is detected
- * Updates the previous action timestamp if the visit session has not timed out
- */
-function extendVisit() {
-  var currentTimestamp = Date.now(),
-    currentVisitIsAlive = !isNewVisit(currentTimestamp);
-
-  if (currentVisitIsAlive) {
-    // update timestamp only if session still alive
-    setPreviousActionTimestamp(currentTimestamp);
-  }
-  // todo: in the future we may want to add a "visit" event that other components could listen for
-  // for simplicity we are only triggering a new visit/page view when a page is loaded
-}
-
-/**
- * generates a clientId based on fingerprint and timestamp and stores in `state` object
- * @param {number} currentTimestamp
- */
-function createClientId(currentTimestamp) {
-  (new Fingerprint2({ // Fingerprint2 npm module added with gulp
-    excludeJsFonts: true,
-    excludeFlashFonts: true,
-    excludeCanvas: true,
-    excludeWebGL: true,
-    excludePixelRatio: true
-  })).get(function (fingerprint) {
-    state.clientId = fingerprint + '.' + currentTimestamp;
-  });
-}
-
-/**
- * gets clientId from cookie or creates a new one
- * @param {number} currentTimestamp
- */
-function ensureClientId(currentTimestamp) {
-  state.clientId = cookie.get(clientIdCookieKey);
-  if (!state.clientId) {
-    createClientId(currentTimestamp);
-  }
-}
-
-/**
- *
- * @returns {string|null}
- */
-function getPageUri() {
-  var el = document.querySelector('[' + uriAttr + '*="/_pages/"]');
-
-  return el && el.getAttribute(uriAttr);
-}
-
-/**
- * returns an object with key value pairs parsed from query string
- * @param {array} keys
- * @returns {object}
- */
-function getQueryParamsObject(keys) {
-  keys = Array.isArray(keys) ? keys : [];
-
-  return _reduce(
-    _get(window, 'location.search', '').substr(1).split('&'),
-    function (obj, str) {
-      var arr = str.split('='),
-        key = arr[0],
-        val = arr[1];
-
-      if (val && _includes(keys, key)) {
-        obj[key] = decodeURIComponent(val);
-      }
-      return obj;
-    },
-    {}
-  );
-}
-
-
-/**
- * returns an object from utm query params
- * @returns {object}
- */
-function getUtmParams() {
-  var keys = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_content', 'utm_term'];
-
-  return getQueryParamsObject(keys);
-}
-
-/**
- * derived from mixpanel so that our stats are consistent with page view props
- * source: https://github.com/mixpanel/mixpanel-js/blob/f8fe5b29ea90ab89df21e8db53c5fbaf0ebf8174/src/utils.js#L1376
- * @param {string} [userAgent]
- * @param {string} [vendor]
- * @param {object} [opera]
- * @returns {string}
- */
-function getBrowserName(userAgent, vendor, opera) {
-  // disabling linting to keep code in-line with mixpanel as closely as possible
-  /* eslint complexity: [2, 20] */
-  // order matters
-  if (opera || _includes(userAgent, ' OPR/')) {
-    if (_includes(userAgent, 'Mini')) {
-      return 'Opera Mini';
-    }
-    return 'Opera';
-  } else if (/(BlackBerry|PlayBook|BB10)/i.test(userAgent)) {
-    return 'BlackBerry';
-  } else if (_includes(userAgent, 'IEMobile') || _includes(userAgent, 'WPDesktop')) {
-    return 'Internet Explorer Mobile';
-  } else if (_includes(userAgent, 'Edge')) {
-    return 'Microsoft Edge';
-  } else if (_includes(userAgent, 'FBIOS')) {
-    return 'Facebook Mobile';
-  } else if (_includes(userAgent, 'Chrome')) {
-    return 'Chrome';
-  } else if (_includes(userAgent, 'CriOS')) {
-    return 'Chrome iOS';
-  } else if (_includes(userAgent, 'FxiOS')) {
-    return 'Firefox iOS';
-  } else if (_includes(vendor, 'Apple')) {
-    if (_includes(userAgent, 'Mobile')) {
-      return 'Mobile Safari';
-    }
-    return 'Safari';
-  } else if (_includes(userAgent, 'Android')) {
-    return 'Android Mobile';
-  } else if (_includes(userAgent, 'Konqueror')) {
-    return 'Konqueror';
-  } else if (_includes(userAgent, 'Firefox')) {
-    return 'Firefox';
-  } else if (_includes(userAgent, 'MSIE') || _includes(userAgent, 'Trident/')) {
-    return 'Internet Explorer';
-  } else if (_includes(userAgent, 'Gecko')) {
-    return 'Mozilla';
-  }
-  return '';
-}
-
-/**
- * derived from mixpanel so that our stats are consistent with page view props
- * source: https://github.com/mixpanel/mixpanel-js/blob/f8fe5b29ea90ab89df21e8db53c5fbaf0ebf8174/src/utils.js#L1442
- * @param {string} browserName
- * @param {string} userAgent
- * @returns {Number|null}
- */
-function browserNameToVersion(browserName, userAgent) {
-  var browserRegexMap = {
-      'Internet Explorer Mobile': /rv:(\d+(\.\d+)?)/,
-      'Microsoft Edge': /Edge\/(\d+(\.\d+)?)/,
-      Chrome: /Chrome\/(\d+(\.\d+)?)/,
-      'Chrome iOS': /CriOS\/(\d+(\.\d+)?)/,
-      Safari: /Version\/(\d+(\.\d+)?)/,
-      'Mobile Safari': /Version\/(\d+(\.\d+)?)/,
-      Opera: /(Opera|OPR)\/(\d+(\.\d+)?)/,
-      Firefox: /Firefox\/(\d+(\.\d+)?)/,
-      'Firefox iOS': /FxiOS\/(\d+(\.\d+)?)/,
-      Konqueror: /Konqueror:(\d+(\.\d+)?)/,
-      BlackBerry: /BlackBerry (\d+(\.\d+)?)/,
-      'Android Mobile': /android\s(\d+(\.\d+)?)/,
-      'Internet Explorer': /(rv:|MSIE )(\d+(\.\d+)?)/,
-      Mozilla: /rv:(\d+(\.\d+)?)/
-    },
-    regex = browserRegexMap[browserName],
-    matches = regex && userAgent.match(regex);
-
-  if (matches) {
-    return parseFloat(matches[matches.length - 2]);
-  }
-  return null;
-}
-
-/**
- * derived from mixpanel so that our stats are consistent with page view props
- * source: https://github.com/mixpanel/mixpanel-js/blob/f8fe5b29ea90ab89df21e8db53c5fbaf0ebf8174/src/utils.js#L1451
- * @param {string} userAgent
- * @returns {string}
- */
-function userAgentToOs(userAgent) {
-  // disabling linting to keep code in-line with mixpanel as closely as possible
-  /* eslint complexity: [2, 20] */
-  if (/Windows/i.test(userAgent)) {
-    if (/Phone/.test(userAgent) || /WPDesktop/.test(userAgent)) {
-      return 'Windows Phone';
-    }
-    return 'Windows';
-  } else if (/(iPhone|iPad|iPod)/.test(userAgent)) {
-    return 'iOS';
-  } else if (/Android/.test(userAgent)) {
-    return 'Android';
-  } else if (/(BlackBerry|PlayBook|BB10)/i.test(userAgent)) {
-    return 'BlackBerry';
-  } else if (/Mac/i.test(userAgent)) {
-    return 'Mac OS X';
-  } else if (/Linux/.test(userAgent)) {
-    return 'Linux';
-  }
-  return '';
-}
-
-/**
- * returns an object with information about the viewing environment
- * @returns {object}
- */
-function getBrowserInfo() {
-  var navigator = window.navigator,
-    userAgent = navigator.userAgent,
-    vendor = navigator.vendor,
-    browserName = getBrowserName(userAgent, vendor, window.opera);
-
-  return {
-    browser: browserName,
-    browserVersion: browserNameToVersion(browserName, userAgent),
-    os: userAgentToOs(userAgent)
-  };
-}
-
-/**
- * These are the values accessible through `getPublicStateOnceReady`
- * @param {string} clientId
- * @param {number} currentTimestamp
- */
-function setPublicState(clientId, currentTimestamp) {
-  publicState = _assign(
-    {
-      clientId: clientId,
-      currentUrl: window.location.href,
-      firstVisitTimestamp: getFirstVisitTimestamp(),
-      initialReferrer: localStorage.getItem(initialReferrerKey),
-      isNewVisit: state.isNewVisit,
-      pageUri: getPageUri(),
-      referrer: document.referrer,
-      screenHeight: window.screen.height,
-      screenWidth: window.screen.width,
-      timestamp: currentTimestamp,
-      visitCount: getVisitCount(),
-      userLoyalty: getUserLoyaltyLevel()
-    },
-    getBrowserInfo(),
-    getUtmParams() // could do server-side
-  );
-
-  publicStateIsReady = true;
-}
-
-/**
- * check that publicState has been set before executing callbacks
- * @param {Function} callback
- */
-function getPublicStateOnceReady(callback) {
-  if (publicStateIsReady) {
-    callback(_clone(publicState));
-  } else {
-    onceReadyQueue.push(callback);
-  }
-}
-
-function executeOnceReadyQueue() {
-  onceReadyQueue.forEach(callback => callback(_clone(publicState)));
-  onceReadyQueue = [];
-}
-
-/**
- * maintain array of dates of a user's visits
- */
-function updateVisitDates() {
-  var visitDatesStr = localStorage.getItem(visitDatesKey) || '',
-    visitDates = visitDatesStr.split(','),
-    visitDatesLimitMilliseconds = visitDatesLimit * 24 * 60 * 60 * 1000, // visitDatesLimit in milliseconds
-    thresholdTimeSinceLastVisit = 24 * 60 * 60 * 1000, // 24 hours in milliseconds
-    currentTime = Date.now();
-
-  // remove dates older than threshold
-  _remove(visitDates, function (visitDate) {
-    return currentTime - visitDate > visitDatesLimitMilliseconds;
-  });
-
-  // add current time if at least 24 hours have elapsed since the visit
-  if (visitDates.length === 0 || currentTime - visitDates[0] >= thresholdTimeSinceLastVisit) {
-    visitDates.unshift(currentTime);
-  }
-
-  localStorage.setItem(visitDatesKey, visitDates.join(','));
-}
-
-/**
- * return user loyalty level
- * @returns {string}
- */
-function getUserLoyaltyLevel() {
-  var visitDatesStr = localStorage.getItem(visitDatesKey) || '',
-    visitDates = visitDatesStr.split(',');
-
-  if (visitDates.length <= 1) {
-    return 'new';
-  } else if (visitDates.length < 4) {
-    return 'return';
-  } else {
-    return 'loyal';
-  }
-}
-
-/**
- * This should be triggered only on load as that is when we track new visits.
- */
-function init() {
-  var currentTimestamp = Date.now();
-
-  ensureClientId(currentTimestamp);
-  state.onceClientIdIsReady(function (clientId) {
-    ensureFirstVisitTimestamp(clientId);
-    updateNewVisitState(currentTimestamp);
-
-    if (state.isNewVisit) {
-      setVisitStartTimestamp(currentTimestamp);
-
-      incrementVisitCount();
-      updateVisitDates();
-      try {
-        localStorage.setItem(initialReferrerKey, document.referrer);
-      } catch (e) {
-        // the browser failed to setItem, likely due to Private Browsing mode. We don't need to take any action
-      }
-    }
-    setPreviousActionTimestamp(currentTimestamp);
-    setPublicState(clientId, currentTimestamp);
-    executeOnceReadyQueue();
-  });
-  window.document.addEventListener('click', extendVisit);
-  // todo: might want to extendVisit based on other actions in the future
-}
-
-// init on load
-init();
-
-module.exports.onceReady = getPublicStateOnceReady;
-module.exports.getQueryParamsObject = getQueryParamsObject;
-module.exports.getBrowserInfo = getBrowserInfo;
diff --git a/app/services/universal/youtube-video-player.js b/app/services/universal/youtube-video-player.js
index 4fdf684..86c5b8f 100644
--- a/app/services/universal/youtube-video-player.js
+++ b/app/services/universal/youtube-video-player.js
@@ -32,7 +32,7 @@ function extractVideoIdFromUrl(str) {
 
 /**
  * create the YouTube / YT player
- * @param {Object} videoConfig
+ * @param {object} videoConfig
  * @param {string} videoConfig.videoContainerId
  * @param {string} videoConfig.videoId
  * @param {object} videoConfig.playerParams
@@ -65,9 +65,9 @@ function createPlayer(videoConfig) {
 
 /**
  * handleVideoReady
- * @param {Object} event
+ * @param {object} event
  * @param {string} customParams
- * @returns {Function}
+ * @returns {function}
  */
 function handleVideoReady(event, customParams) {
   return function (e) {
@@ -88,8 +88,8 @@ function handleVideoReady(event, customParams) {
 
 /**
  * Loads next video
- * @param {Object} evt - video event
- * @param {Boolean} shouldAutoplayNextVideo
+ * @param {object} evt - video event
+ * @param {boolean} shouldAutoplayNextVideo
  */
 function loadNextVideo(evt, shouldAutoplayNextVideo) {
   if (shouldAutoplayNextVideo !== 'true') {
@@ -99,9 +99,9 @@ function loadNextVideo(evt, shouldAutoplayNextVideo) {
 
 /**
  * Video state change wrapper
- * @param {Object} customParams - custom configuration object
- * @param {Object} playerEvents - YT player custom events
- * @return {Function} handles when the video state changes
+ * @param {object} customParams - custom configuration object
+ * @param {object} playerEvents - YT player custom events
+ * @return {function} handles when the video state changes
  */
 function videoStateChangeWrapper(customParams, playerEvents) {
   var hasVideoStarted = false;

From b587e7d0aa8b24248901631e26627925ccff8ddb Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Tue, 5 Mar 2019 15:41:21 -0500
Subject: [PATCH 24/45] Update youtube-video-player.js

---
 app/services/universal/youtube-video-player.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/services/universal/youtube-video-player.js b/app/services/universal/youtube-video-player.js
index 86c5b8f..fca16a4 100644
--- a/app/services/universal/youtube-video-player.js
+++ b/app/services/universal/youtube-video-player.js
@@ -9,7 +9,7 @@ const VIDEO_ID_RE = /v=([\w-]+)/,
 
 /**
  * Adds a video configuration to the video queue
- * @param {Object} videoConfig
+ * @param {object} videoConfig
  * @param {string} videoConfig.videoContainerId
  * @param {string} videoConfig.videoId
  */
@@ -88,12 +88,12 @@ function handleVideoReady(event, customParams) {
 
 /**
  * Loads next video
- * @param {object} evt - video event
+ * @param {object} event - video event
  * @param {boolean} shouldAutoplayNextVideo
  */
-function loadNextVideo(evt, shouldAutoplayNextVideo) {
+function loadNextVideo(event, shouldAutoplayNextVideo) {
   if (shouldAutoplayNextVideo !== 'true') {
-    evt.target.stopVideo();
+    event.target.stopVideo();
   }
 }
 
@@ -133,7 +133,7 @@ function consumeNextVideoInQueue() {
 
 /**
  * Inits video player process
- * @param  {Object} videoConfig
+ * @param  {object} videoConfig
  */
 module.exports.init = function (videoConfig) {
   if (videoConfig) {

From 86a4ac44ef01717d6ccd107dd9475b34f9857cec Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Tue, 5 Mar 2019 15:54:29 -0500
Subject: [PATCH 25/45] Update youtube.js

---
 app/services/universal/youtube.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/services/universal/youtube.js b/app/services/universal/youtube.js
index e466d85..d02ed7f 100644
--- a/app/services/universal/youtube.js
+++ b/app/services/universal/youtube.js
@@ -7,7 +7,6 @@ const rest = require('./rest'),
   YT_API = 'https://www.googleapis.com/youtube/v3',
   log = require('./log').setup({ file: __filename });
 
-
 function getDurationInSeconds(duration) {
   return moment.duration(duration, moment.ISO_8601).asSeconds();
 }

From fc5c953fc2d9d709ab046692cf0fb5b1d153bcae Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Tue, 5 Mar 2019 16:19:57 -0500
Subject: [PATCH 26/45] update byline removed join and map lodash

---
 app/services/universal/byline.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/app/services/universal/byline.js b/app/services/universal/byline.js
index 404765f..e2f002b 100644
--- a/app/services/universal/byline.js
+++ b/app/services/universal/byline.js
@@ -1,8 +1,6 @@
 'use strict';
 
 const _get = require('lodash/get'),
-  _join = require('lodash/join'),
-  _map = require('lodash/map'),
   _isObject = require('lodash/isObject');
 
 /**
@@ -13,21 +11,22 @@ const _get = require('lodash/get'),
  * @return {String}
  */
 function formatSimpleByline(opts = {}) {
+  debugger;
   const bylines = _get(opts.hash, 'bylines', []),
-    authors = _map(bylines, (author) => _isObject(author) ? author.text : author);
+    authors = bylines.map((author) => _isObject(author) ? author.text : author);
 
   if (authors.length === 1) {
     return '<span>' + authors[0] + '</span>';
   } else if (authors.length === 2) {
     return '<span>' + authors[0] + '</span><span class="and"> and </span><span>' + authors[1] + '</span>';
   } else {
-    return _join(_map(authors, function (author, idx) {
+    return authors.map((author, idx) => {
       if (idx < authors.length - 1) {
         return '<span>' + author + ', </span>';
       } else {
         return '<span class="and">and </span><span>' + author + '</span>';
       }
-    }), '');
+    }).join('');
   }
 }
 

From 0269a5c2bb811ef60f76428c0706368a6af30176 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Tue, 5 Mar 2019 16:28:05 -0500
Subject: [PATCH 27/45] Update byline.js

---
 app/services/universal/byline.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/services/universal/byline.js b/app/services/universal/byline.js
index e2f002b..30a2a83 100644
--- a/app/services/universal/byline.js
+++ b/app/services/universal/byline.js
@@ -11,7 +11,6 @@ const _get = require('lodash/get'),
  * @return {String}
  */
 function formatSimpleByline(opts = {}) {
-  debugger;
   const bylines = _get(opts.hash, 'bylines', []),
     authors = bylines.map((author) => _isObject(author) ? author.text : author);
 

From 69208b0b2f01709a696b4cc70f991fcff1ad5a80 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Thu, 28 Feb 2019 15:52:24 -0500
Subject: [PATCH 28/45] youtube component for clay-starter

---
 app/.env                                      |   1 +
 app/client-env.json                           |   2 +-
 app/components/article/schema.yaml            |   1 +
 .../youtube-player-head/bootstrap.yml         |   3 +
 app/components/youtube-player-head/schema.yml |   2 +
 .../youtube-player-head/template.hbs          |  19 ++
 app/components/youtube/bootstrap.yml          |  14 ++
 app/components/youtube/client.js              | 118 +++++++++++
 app/components/youtube/model.js               |  96 +++++++++
 app/components/youtube/schema.yml             | 143 +++++++++++++
 app/components/youtube/template.hbs           |  53 +++++
 app/layouts/layout-simple/schema.yml          |   1 +
 app/layouts/layout/schema.yml                 |   1 +
 app/package-lock.json                         |  24 +++
 app/package.json                              |   3 +
 app/services/client/gtm.js                    |  36 ++++
 app/services/client/visibility.js             | 197 ++++++++++++++++++
 app/services/universal/byline.js              |   8 +-
 .../universal/youtube-video-player.js         | 146 +++++++++++++
 app/services/universal/youtube.js             |  30 +++
 .../_default/components/youtube.css           |  99 +++++++++
 bootstrap-starter-data/_components.yml        |   4 +
 bootstrap-starter-data/_layouts.yml           |   2 +
 23 files changed, 997 insertions(+), 6 deletions(-)
 create mode 100644 app/components/youtube-player-head/bootstrap.yml
 create mode 100644 app/components/youtube-player-head/schema.yml
 create mode 100644 app/components/youtube-player-head/template.hbs
 create mode 100644 app/components/youtube/bootstrap.yml
 create mode 100644 app/components/youtube/client.js
 create mode 100644 app/components/youtube/model.js
 create mode 100644 app/components/youtube/schema.yml
 create mode 100644 app/components/youtube/template.hbs
 create mode 100644 app/services/client/gtm.js
 create mode 100644 app/services/client/visibility.js
 create mode 100644 app/services/universal/youtube-video-player.js
 create mode 100644 app/services/universal/youtube.js
 create mode 100644 app/styleguides/_default/components/youtube.css

diff --git a/app/.env b/app/.env
index 747a905..193110b 100644
--- a/app/.env
+++ b/app/.env
@@ -26,6 +26,7 @@ CLAY_SCHEDULING_ENABLED=true
 GOOGLE_CONSUMER_KEY=646733424261-m084l8oaodaubngvpte7f2hufc62l0d6.apps.googleusercontent.com
 GOOGLE_CONSUMER_SECRET=KyWza3ugQbwEvn4J1nVA3RiA
 GOOGLE_PROFILE_URL=https://www.googleapis.com/oauth2/v3/userinfo
+YOUTUBE_API_KEY=AIzaSyCtD1a3SWW3QFzyfkLi0NpwvHL9InosQi8
 
 CLAY_SITE_NAME="Clay Demo"
 CLAY_SITE_HOST="localhost"
diff --git a/app/client-env.json b/app/client-env.json
index c6b0639..973e30e 100644
--- a/app/client-env.json
+++ b/app/client-env.json
@@ -1 +1 @@
-["ELASTIC_PREFIX","NODE_DEBUG"]
+["CLAY_LOG_PRETTY","LOG","NODE_DEBUG","NODE_ENV","JSONP_CLIENT_ENABLE_LOCAL_SUPPORT","SUPERAGENT_MOCK","CLAY_ACCESS_KEY","ELASTIC_PREFIX","YOUTUBE_API_KEY"]
diff --git a/app/components/article/schema.yaml b/app/components/article/schema.yaml
index 5a6ef66..cfdb903 100644
--- a/app/components/article/schema.yaml
+++ b/app/components/article/schema.yaml
@@ -60,6 +60,7 @@ content:
       - divider
       - image
       - code-sample
+      - youtube
 
 ledeUrl:
   _label: Lede Image URL
diff --git a/app/components/youtube-player-head/bootstrap.yml b/app/components/youtube-player-head/bootstrap.yml
new file mode 100644
index 0000000..c181c03
--- /dev/null
+++ b/app/components/youtube-player-head/bootstrap.yml
@@ -0,0 +1,3 @@
+_components:
+  youtube-player-head:
+    allowed: true
diff --git a/app/components/youtube-player-head/schema.yml b/app/components/youtube-player-head/schema.yml
new file mode 100644
index 0000000..1deb251
--- /dev/null
+++ b/app/components/youtube-player-head/schema.yml
@@ -0,0 +1,2 @@
+_description: |
+  Note: Required for `video-player` component. YouTube API scripts, add component to head for best YouTube player performance.
diff --git a/app/components/youtube-player-head/template.hbs b/app/components/youtube-player-head/template.hbs
new file mode 100644
index 0000000..6e242f1
--- /dev/null
+++ b/app/components/youtube-player-head/template.hbs
@@ -0,0 +1,19 @@
+<!-- data-uri="{{ default _ref _self }}" -->
+{{#unless @root.locals.edit}}
+  {{! NYM flags for `video-player` component instances
+    player instances will first look for `nymYTApiReady` to be `true`
+    if `false`, player instances will listen for the event `nym-youtube-event:youtube-api-ready` }}
+  <script>
+    var nymYTApiReady = false;
+    window.onYouTubeIframeAPIReady = function () {
+      {{! when the YouTube API script is ready, dispatch an `nym-youtube-event:youtube-api-ready` event }}
+      var nymEventYTApiReady = new Event('nym-youtube-event:youtube-api-ready');
+      document.dispatchEvent(nymEventYTApiReady);
+      {{! change this flag to 'true' when the YouTube api is ready }}
+      nymYTApiReady = true;
+    }
+  </script>
+
+  {{! add the YouTube API script to the head for fastest player creation }}
+  <script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
+{{/unless}}
diff --git a/app/components/youtube/bootstrap.yml b/app/components/youtube/bootstrap.yml
new file mode 100644
index 0000000..753cebd
--- /dev/null
+++ b/app/components/youtube/bootstrap.yml
@@ -0,0 +1,14 @@
+_components:
+  youtube:
+    videoId: ''
+    videoType: 'editorial'
+    videoLocation: 'article'
+    playerCaption: ''
+    autoPlay: true
+    autoPlayNextVideo: true
+    videoPlaylist: ''
+    playerBorderTopCTA: 'Watch'
+    playerBorderTop: false
+    playerBorderBottom: false
+    previousTypeRelated: false
+    customPlay: false
diff --git a/app/components/youtube/client.js b/app/components/youtube/client.js
new file mode 100644
index 0000000..bea530a
--- /dev/null
+++ b/app/components/youtube/client.js
@@ -0,0 +1,118 @@
+'use strict';
+
+const youtubeVideoPlayer = require('../../services/universal/youtube-video-player'),
+  $visibility = require('../../services/client/visibility'),
+  $gtm = require('../../services/client/gtm');
+
+module.exports = (el) => {
+  var autoplay = el.getAttribute('data-autoplay-video') === 'true',
+    videoConfig = {
+      videoContainerId: el.getAttribute('data-element-id').trim(),
+      videoId: el.getAttribute('data-video-id').trim(),
+      // player variables and settings
+      playerParams: {
+        loop: 1,
+        listType: 'playlist',
+        list: el.getAttribute('data-playlist').trim(),
+        autoplay: autoplay ? 1 : 0,
+        controls: 1,
+        enablejsapi: 1,
+        modestbranding: 1,
+        rel: 0,
+        showinfo: 0,
+        wmode: 'transparent'
+      },
+      customParams: {
+        autoPlayNextVideo: el.getAttribute('data-autoplay-next-video').trim(),
+        trackVideoType: el.getAttribute('data-track-video-type').trim(),
+        customPlayer: el.getAttribute('data-custom-play').trim(),
+        templateid: el.getAttribute('data-element-id').trim(),
+        muted: autoplay // always mute autplaying videos
+      }
+    },
+    analytics = getAnalyticsCustomDimensions(el),
+    visible;
+
+  if (videoConfig.customParams.trackVideoType === 'Sponsored') {
+    videoConfig.playerParams.list = '';
+  }
+
+  visible = new $visibility.Visible(el, { preloadThreshold: 800 });
+
+  // when the video player element enters the viewport, load the video(s)
+  if (visible.preload && $visibility.isElementNotHidden(el)) {
+    // if the YouTube api is ready the videos(s) can be loaded
+    if (window.nymYTApiReady === true) {
+      youtubeVideoPlayer.init(videoConfig);
+    } else {
+      // wait and listen for the YouTube api to be ready before loading the video(s)
+      document.addEventListener('nym-youtube-event:youtube-api-ready', function () {
+        youtubeVideoPlayer.init(videoConfig);
+      });
+    }
+  } else {
+    visible.on('preload', function () {
+      youtubeVideoPlayer.init(videoConfig);
+    });
+  }
+
+  /**
+   * Player ready event
+   * this fires when the player is initially loaded and pushes variables specific to the
+   * component into the data layer. Information about the video itself is captured from the
+   * native gtm.video trigger on play and finish
+   */
+  document.addEventListener('player-ready-' + videoConfig.videoContainerId, function () {
+    $gtm.reportNow(Object.assign({
+      youtubeAction: 'player ready'
+    }, analytics));
+  });
+
+  /**
+   * Player start event
+   *
+   * we don't need to send an event here, updating the video id for posterity
+   * also might be nice to send an event if we see the video id changed?
+   */
+  document.addEventListener('player-start-' + videoConfig.videoContainerId, function (evt) {
+    var hasChanged = el.getAttribute('data-video-id') !== evt.player.videoId;
+
+    if (hasChanged) {
+      updateElementAttributes(el, evt.player);
+      // this will tell the gtm.video trigger to stop ignoring gtm.video events
+      // in the case that an external video was played initially then switched to
+      // an internal playlist
+      $gtm.reportNow(Object.assign({
+        event: 'youtubeVideoReset',
+        youtubeVideoId: evt.player.videoId,
+        youtubeChannelName: 'New York Magazine'
+      }));
+    }
+  });
+};
+
+/**
+ * Updates Element attributes
+ * @param {Object} el - DOM node element
+ * @param {Object} config - Attributes values from player
+ */
+function updateElementAttributes(el, config) {
+  el.setAttribute('data-video-id', config.videoId);
+}
+
+/**
+ * Gets analytics custom dimensions for video player
+ * @param {Object} el
+ * @returns {Object} analytics
+ */
+function getAnalyticsCustomDimensions(el) {
+  return {
+    event: 'youtubeVideo',
+    youtubeVideoId: el.getAttribute('data-video-id'),
+    youtubeVideoLocation: el.getAttribute('data-track-video-location'),
+    youtubeVideoType: el.getAttribute('data-track-video-type'),
+    youtubeVideoTitle: el.getAttribute('data-track-video-title'),
+    youtubeChannelName: el.getAttribute('data-track-channel-name'),
+    youtubeVideoDuration: el.getAttribute('data-track-video-duration')
+  };
+}
diff --git a/app/components/youtube/model.js b/app/components/youtube/model.js
new file mode 100644
index 0000000..c717d3a
--- /dev/null
+++ b/app/components/youtube/model.js
@@ -0,0 +1,96 @@
+'use strict';
+const _get = require('lodash/get'),
+  { getVideoDetails } = require('../../services/universal/youtube'),
+  defaultPlayerBorderTopCTA = 'Watch';
+
+/**
+ * Override various settings by type of video
+ * @param {object} data
+ */
+function updateSettingsByType(data) {
+  switch (data.videoType) {
+    case 'related':
+      // By default, display borders and CTA when `related` type is first selected, afterwards accept user's selection
+      data.playerBorderTopCTA = !data.previousTypeRelated && !data.playerBorderTopCTA ? defaultPlayerBorderTopCTA : data.playerBorderTopCTA;
+      data.playerBorderTop = !data.previousTypeRelated ? true : data.playerBorderTop;
+      data.playerBorderBottom = !data.previousTypeRelated ? true : data.playerBorderBottom;
+      data.previousTypeRelated = true;
+      break;
+    case 'sponsored':
+      data.autoPlay = false;
+      data.autoPlayNextVideo = false;
+    default:
+      // Toggle borders off if user previously selected `related` type. `sponsored` and `editorial` types share defaults
+      data.playerBorderTop = data.previousTypeRelated ? false : data.playerBorderTop;
+      data.playerBorderBottom = data.previousTypeRelated ? false : data.playerBorderBottom;
+      data.previousTypeRelated = false;
+  }
+}
+
+function clearVideoId(data) {
+  data.videoId = (data.videoId || '').split('&')[0];
+
+  return data;
+}
+
+function setVideoDetails(data, videoDetails) {
+  var maxResThumb;
+
+  if (!videoDetails.title) {
+    data.videoValid = false;
+
+    return data;
+  }
+
+  maxResThumb = _get(videoDetails, 'thumbnails.maxres.url');
+
+  data.videoValid = true;
+  data.channelName = videoDetails.channelTitle;
+  data.videoTitle = videoDetails.title;
+  data.videoThumbnail = maxResThumb ? maxResThumb : _get(videoDetails, 'thumbnails.high.url'); // get the maxres if available, otherwise get the high res which we know will be there
+  data.videoDuration = videoDetails.duration;
+
+  return data;
+}
+
+function getDefaultPlaylistBySite(data, locals) {
+  switch (locals.site.slug) {
+    case 'wwwthecut':
+      return 'PL4B448958847DA6FB';
+      break;
+    case 'vulture':
+      return 'PLZQfnFyelTBOQ15kmHSgEbdjzLMWzZpL7';
+      break;
+    case 'grubstreet':
+      return 'PLtmzdzCeRsyG_td56GV9JtS3yif177lfK';
+      break;
+    case 'di':
+      return 'PLtmzdzCeRsyHbGTxOX4BZvSgXBh20n-_4';
+      break;
+    case 'selectall':
+      return 'PLtmzdzCeRsyHh67c-VlEj8Nqpj5nL8pf6';
+      break;
+    default:
+      return 'PLtmzdzCeRsyFQ64kOTZS7eBLQ1fH2feu7'; // if its a site without a default playlist, use the 'latest from new york' playlist
+      break;
+  }
+}
+
+module.exports.save = (uri, data, locals) => {
+  clearVideoId(data);
+  updateSettingsByType(data);
+
+  if (data.videoId && !data.videoPlaylist) {
+    data.videoPlaylist = getDefaultPlaylistBySite(data, locals);
+  }
+
+  if (data.videoId) {
+    return getVideoDetails(data.videoId)
+      .then(videoDetails => setVideoDetails(data, videoDetails));
+  }
+
+  data.videoValid = true; // technically not an invalid video because no videoId so we don't want to show an error message in edit mode
+
+  return data;
+};
+
diff --git a/app/components/youtube/schema.yml b/app/components/youtube/schema.yml
new file mode 100644
index 0000000..bf2292d
--- /dev/null
+++ b/app/components/youtube/schema.yml
@@ -0,0 +1,143 @@
+_description: |
+  Youtube video embed for Clay. For technical reasons, YouTube embeds don't display a preview in edit mode.
+  Preview the video by previewing the full page (from the Clay toolbar). Embeds can display a specific video ID.
+videoId:
+  _label: YouTube Video ID
+  _publish: videoPlayerId
+  _has:
+    input: text
+
+videoType:
+  _label: Type
+  _has:
+    input: radio
+    options:
+      -
+        name: Editorial (Original)
+        value: editorial
+      -
+        name: Editorial (External)
+        value: embedded
+      -
+        name: Related
+        value: related
+      -
+        name: Sponsored
+        value: sponsored
+    validate:
+      required: true
+      requiredMessage: Please select a video type
+
+videoSize:
+  _label: Size
+  _has:
+    input: radio
+    options:
+        -
+          name: Column Width
+          value: column-width
+        -
+          name: Break-out
+          value: break-out
+  _reveal:
+    field: videoType
+    operator: ===
+    values:
+      - sponsored
+      - editorial
+
+playerHeadline:
+  _label: Video Headline
+  _has:
+    input: text
+  _reveal:
+    field: videoType
+    value: related
+
+playerCaption:
+  _label: Video Caption
+  _has: text
+
+autoPlay:
+  _label: Autoplay with muted audio on Page Load
+  _has: checkbox
+
+autoPlayNextVideo:
+  _label: Automatically start next video
+  _has: checkbox
+  _reveal:
+    field: videoType
+    operator: '!=='
+    value: sponsored
+
+videoPlaylist:
+  _label: Youtube Playlist (defaults to current site)
+  _reveal:
+    field: autoPlayNextVideo
+    operator: truthy
+  _has:
+    input: text
+    validate:
+      required:
+        field: autoPlayNextVideo
+        operator: truthy
+      requiredMessage: Video Player should contain video playlist
+    help: Playlists are used for auto playing additional videos in the YouTube component after the assigned video is finished. Only required for videos that are selected to automatically start next video above
+
+playerBorderTopCTA:
+  _label: Top Border Title
+  _has: text
+
+playerBorderTop:
+  _label: Show Top Border
+  _has: checkbox
+
+playerBorderBottom:
+  _label: Show Bottom Border
+  _has: checkbox
+
+customPlay:
+  _subscribe: customPlay
+
+_groups:
+  settings:
+    fields:
+      - autoPlay (Autoplay)
+      - autoPlayNextVideo (Autoplay)
+      - videoPlaylist (Autoplay)
+      - playerBorderTopCTA (Borders and Border Title)
+      - playerBorderTop (Borders and Border Title)
+      - playerBorderBottom (Borders and Border Title)
+  inline:
+    fields:
+      - videoId
+      - videoType
+      - videoSize
+      - playerHeadline
+      - playerCaption
+    _label: Youtube Video Player
+    _placeholder:
+      text: Youtube Video Player
+      height: 100px
+      ifEmpty: videoId
+
+# set by bootstrap or first-run
+videoLocation:
+  help: For analytics, to tell what kind of page the video is on
+
+# non-user-editable fields, set by model.js
+previousTypeRelated:
+  help: Toggle for displaying convenience-based changes to player borders based on previously selected video type. Set by model.js
+videoValid:
+  help: Used to decide whether or not to display a video in the template
+  _placeholder:
+    text: Invalid video id ${videoId}. This video will not display.
+    permanent: true
+channelName:
+  help: Name of the channel the video comes from. Used to decide whether or not to listen to GTM triggers for this video
+videoTitle:
+  help: Title of the video
+videoThumbnail:
+  help: maxres video thumbnail
+videoDuration:
+  help: video duration in seconds
diff --git a/app/components/youtube/template.hbs b/app/components/youtube/template.hbs
new file mode 100644
index 0000000..61467b9
--- /dev/null
+++ b/app/components/youtube/template.hbs
@@ -0,0 +1,53 @@
+{{ set 'uniquePlayerID' (randomString 'youtube-player-') }}
+{{#ifAny @root.locals.edit videoValid}}
+<div data-uri="{{ default _ref _self }}"
+     class="youtube{{if @root.locals.edit ' edit-mode'}}{{ if playerBorderTop ' border-top' }} {{ videoSize }} {{ videoType }}"
+     data-element-id="{{ uniquePlayerID }}"
+     data-video-id="{{ videoId }}"
+     data-autoplay-next-video="{{ autoPlayNextVideo }}"
+     data-autoplay-video="{{ autoPlay }}"
+     data-playlist="{{ videoPlaylist }}"
+     data-track-video-type="{{ videoType }}"
+     data-track-video-location="{{ videoLocation }}"
+     data-track-video-title="{{ videoTitle }}"
+     data-track-video-duration="{{ videoDuration }}"
+     data-track-channel-name="{{ channelName }}"
+     data-editable="inline"
+     data-custom-play="{{ customPlay }}"
+     data-origsrc="https://www.youtube.com/watch?v={{ videoId }}">
+  {{#if playerBorderTopCTA }}
+    <style>
+      .youtube[data-uri="{{ default _ref _self }}"].border-top:before {
+        content: '{{ playerBorderTopCTA }}';
+      }
+    </style>
+  {{/if}}
+
+  <div class="player-wrapper">
+    {{#unless @root.locals.edit}}
+      <div class="player">
+        {{!-- The <iframe> (and video player) will replace this <div> tag. --}}
+        <div id="{{ uniquePlayerID }}"></div>
+      </div>
+    {{else}}
+      {{#unless videoValid}}
+        <div data-placeholder="videoValid"></div>
+      {{else}}
+        {{#if videoThumbnail}}
+          <img class="youtube-video-preview" src="{{ videoThumbnail }}" alt="">
+        {{/if}}
+      {{/unless}}
+    {{/unless}}
+  </div>
+
+  {{#ifAll playerHeadline (compare videoType 'related')}}
+    <h2 class="youtube-headline">{{ playerHeadline }}</h2>
+  {{/ifAll}}
+
+  {{#if playerCaption}}
+    <div class="attribution youtube-caption">
+      <span class="caption">{{ playerCaption }}</span>
+    </div>
+  {{/if}}
+</div>
+{{/ifAny}}
diff --git a/app/layouts/layout-simple/schema.yml b/app/layouts/layout-simple/schema.yml
index 350041c..6c70002 100644
--- a/app/layouts/layout-simple/schema.yml
+++ b/app/layouts/layout-simple/schema.yml
@@ -18,6 +18,7 @@ headLayout:
     include:
       - meta-site
       - meta-icons
+      - youtube-player-head
 top:
   _componentList:
     include:
diff --git a/app/layouts/layout/schema.yml b/app/layouts/layout/schema.yml
index 1b40f9a..dd2376e 100644
--- a/app/layouts/layout/schema.yml
+++ b/app/layouts/layout/schema.yml
@@ -18,6 +18,7 @@ headLayout:
     include:
       - meta-site
       - meta-icons
+      - youtube-player-head
 top:
   _componentList:
     include: []
diff --git a/app/package-lock.json b/app/package-lock.json
index 2daac14..fd12693 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -726,6 +726,15 @@
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
     },
+    "@nymag/dom": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@nymag/dom/-/dom-1.3.2.tgz",
+      "integrity": "sha1-fm74OzzETc8DNESZqsSeWqorsTI=",
+      "requires": {
+        "domify": "^1.4.0",
+        "lodash": "^4.8.2"
+      }
+    },
     "@nymag/vueify": {
       "version": "9.4.5",
       "resolved": "https://registry.npmjs.org/@nymag/vueify/-/vueify-9.4.5.tgz",
@@ -4067,6 +4076,11 @@
         "domelementtype": "1"
       }
     },
+    "domify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/domify/-/domify-1.4.0.tgz",
+      "integrity": "sha1-EUg2F/dk+GlZdbS9x5sU8IA7Yps="
+    },
     "domutils": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
@@ -5088,6 +5102,11 @@
         "parse-filepath": "^1.0.1"
       }
     },
+    "fingerprintjs2": {
+      "version": "1.8.6",
+      "resolved": "https://registry.npmjs.org/fingerprintjs2/-/fingerprintjs2-1.8.6.tgz",
+      "integrity": "sha512-uarmLgW2QXzu1Ljw3PDcQLJ69w8uT42odab//KOZ+NZsAyAudq5ZvlImEXYd/5sJbtBa5TSQ5OKZX1rkpK/t5w=="
+    },
     "flagged-respawn": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-1.0.1.tgz",
@@ -7534,6 +7553,11 @@
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
       "integrity": "sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw=="
     },
+    "js-cookie": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.0.tgz",
+      "integrity": "sha1-Gywnmm7s44ChIWi5JIUmWzWx7/s="
+    },
     "js-levenshtein": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
diff --git a/app/package.json b/app/package.json
index e87f505..b7145fe 100644
--- a/app/package.json
+++ b/app/package.json
@@ -16,6 +16,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "@nymag/dom": "^1.3.2",
     "@nymdev/health-check": "^0.1.3",
     "amphora": "7.2.0",
     "amphora-event-bus-redis": "0.0.1",
@@ -34,6 +35,7 @@
     "date-fns": "^1.29.0",
     "express": "^4.16.3",
     "express-session": "^1.15.6",
+    "fingerprintjs2": "^1.6.1",
     "fold-to-ascii": "^4.0.0",
     "glob": "^7.1.3",
     "he": "^1.1.1",
@@ -41,6 +43,7 @@
     "html-truncate": "^1.2.2",
     "html-word-count": "^2.0.0",
     "isomorphic-fetch": "^2.2.1",
+    "js-cookie": "^2.2.0",
     "jsonp-client": "^1.1.1",
     "lodash": "^4.17.5",
     "moment": "^2.24.0",
diff --git a/app/services/client/gtm.js b/app/services/client/gtm.js
new file mode 100644
index 0000000..645755c
--- /dev/null
+++ b/app/services/client/gtm.js
@@ -0,0 +1,36 @@
+'use strict';
+
+/**
+ * ========
+ * Overview
+ * ========
+ *
+ * This `$gtm` service is a hub for Google Tag Manager (GTM) and does the following:
+ *
+ * 1. Loads GTM if the `gtm` component is on the page and `head-gtm` is not in the head
+ *
+ * 2. Reports events from client.js of components:
+ *    - `$gtm.reportNow` reports immediately,
+ */
+
+var eventsQueue = [], // enables us to send multiple events with one dataLayer push  and pixel fire to google
+  isCurrentlyReporting = false;
+
+window.dataLayer = window.dataLayer || [];
+
+/**
+ * queues any events given in the params and reports the queue immediately
+ */
+function reportNow() {
+  eventsQueue.push.apply(eventsQueue, arguments);
+  if (!isCurrentlyReporting) {
+    isCurrentlyReporting = true;
+    if (eventsQueue.length > 0) {
+      window.dataLayer.push.apply(window.dataLayer, eventsQueue);
+      eventsQueue = [];
+    }
+    isCurrentlyReporting = false;
+  }
+}
+
+module.exports.reportNow = reportNow;
diff --git a/app/services/client/visibility.js b/app/services/client/visibility.js
new file mode 100644
index 0000000..6545c1a
--- /dev/null
+++ b/app/services/client/visibility.js
@@ -0,0 +1,197 @@
+'use strict';
+
+const $window = window,
+  $document = document,
+  _throttle = require('lodash/throttle'),
+  Eventify = require('eventify');
+var list = [],
+  Visible, VisibleEvent;
+
+/**
+ * @param {number} a
+ * @param {number} b
+ * @returns {*}
+ * @see http://jsperf.com/math-min-vs-if-condition-vs/8
+ */
+function min(a, b) {
+  return a < b ? a : b;
+}
+
+/**
+ * @param {number} a
+ * @param {number} b
+ * @returns {*}
+ * @see http://jsperf.com/math-min-vs-if-condition-vs/8
+ */
+function max(a, b) {
+  return a > b ? a : b;
+}
+
+/**
+ * Fast loop through watched elements
+ */
+function updateVisibility() {
+  list.forEach(updateVisibilityForItem);
+}
+
+/**
+ * updates seen property
+ * @param  {Visible} item
+ * @param  {{}} evt
+ * @fires Visible#shown
+ * @fires Visible#hidden
+ */
+function updateSeen(item, evt) {
+  var px = evt.visiblePx,
+    percent = evt.visiblePercent;
+
+  // if some pixels are visible and we're greater/equal to threshold
+  if (px && percent >= item.shownThreshold && !item.seen) {
+    item.seen = true;
+    setTimeout(function () {
+      item.trigger('shown', new VisibleEvent('shown', evt));
+    }, 15);
+
+    // if no pixels or percent is less than threshold
+  } else if ((!px || percent < item.hiddenThreshold) && item.seen) {
+    item.seen = false;
+    setTimeout(function () {
+      item.trigger('hidden', new VisibleEvent('hidden', evt));
+    }, 15);
+  }
+}
+
+/**
+ * sets preload property
+ * @param  {Visible} item
+ * @param  {Object} evt
+ * @param  {Number} innerHeight
+ * @fires Visible#preload
+ */
+function updatePreload(item, evt, innerHeight) {
+  if (!item.preload && item.preloadThreshold && shouldBePreloaded(evt.target, evt.rect, item.preloadThreshold, innerHeight)) {
+    item.preload = true;
+    setTimeout(function () {
+      item.trigger('preload', new VisibleEvent('preload', evt));
+    }, 15);
+  }
+}
+
+/**
+ * Trigger events
+ * @param {Visible} item
+ */
+function updateVisibilityForItem(item) {
+  var rect = item.el.getBoundingClientRect(),
+    innerHeight = $window.innerHeight || $document.documentElement.clientHeight,
+    px = getVerticallyVisiblePixels(rect, innerHeight),
+    percent = px / (rect.height || innerHeight),
+    evt = {
+      target: item.el,
+      rect: rect,
+      visiblePx: px,
+      visiblePercent: percent
+    };
+
+  updateSeen(item, evt);
+  updatePreload(item, evt, innerHeight);
+}
+
+/**
+ * make sure an element isn't hidden by styles or etc
+ * @param  {Element} el
+ * @return {Boolean}
+ */
+function isElementNotHidden(el) {
+  return el && el.offsetParent !== null && !el.getAttribute('hidden') && getComputedStyle(el).display !== 'none' && getComputedStyle(el).visibility !== 'hidden';
+}
+
+/**
+ * @param {Element} el
+ * @param  {ClientRect} rect
+ * @param {Number} preloadThreshold
+ * @param {Number} innerHeight
+ * @return {Boolean}
+ */
+function shouldBePreloaded(el, rect, preloadThreshold, innerHeight) {
+  return rect.bottom > preloadThreshold * -1 && rect.top <= innerHeight + preloadThreshold && isElementNotHidden(el);
+}
+
+/**
+ * @param {ClientRect} rect
+ * @param {number} innerHeight
+ * @returns {number}
+ */
+function getVerticallyVisiblePixels(rect, innerHeight) {
+  return min(innerHeight, max(rect.bottom, 0)) - min(max(rect.top, 0), innerHeight);
+}
+
+/**
+ * Create a new Visible class to observe when elements enter and leave the viewport
+ *
+ * Call destroy function to stop listening (this is until we have better support for watching for Node Removal)
+ * @param {Element} el
+ * @param {Object} [options]
+ * @param {number} [options.preloadThreshold]
+ * @param {number} [options.shownThreshold] Percentage of element that must be visible to trigger a "shown" event
+ * @param {number} [options.hiddenThreshold] Percentage of element that must be visible to trigger a "hidden" event
+ * @class
+ * @example  this.visible = new $visibility.Visible(el);
+ */
+Visible = function (el, options) {
+  options = options || {};
+  this.el = el;
+  this.seen = false;
+  this.preload = false;
+  this.preloadThreshold = options && options.preloadThreshold || 0;
+  this.shownThreshold = options && options.shownThreshold || 0;
+  this.hiddenThreshold = options && min(options.shownThreshold, options.hiddenThreshold) || 0;
+
+  // protect against adding undefined elements which cause the entire service to error on scroll if theyre added to the list
+  if (this.el) {
+    list.push(this);
+    updateVisibilityForItem(this); // set immediately to visible or not
+  }
+};
+
+Visible.prototype = {
+  /**
+   * Stop triggering.
+   */
+  destroy: function () {
+    // remove from list
+    var index = list.indexOf(this);
+
+    if (index > -1) {
+      list.splice(index, 1);
+    }
+  }
+  /**
+   * @name Visible#on
+   * @function
+   * @param {'shown'|'hidden'} e  EventName
+   * @param {function} cb  Callback
+   */
+  /**
+   * @name Visible#trigger
+   * @function
+   * @param {'shown'|'hidden'} e
+   * @param {{}}
+   */
+};
+
+Eventify.enable(Visible.prototype);
+
+VisibleEvent = function (type, options) {
+  this.type = type;
+  Object.assign({},this,options);
+};
+
+// listen for scroll events (throttled)
+$document.addEventListener('scroll', _throttle(updateVisibility, 200));
+
+// public
+module.exports.getVerticallyVisiblePixels = getVerticallyVisiblePixels;
+module.exports.isElementNotHidden = isElementNotHidden;
+module.exports.Visible = Visible;
+module.exports.updateVisibility = updateVisibility;
diff --git a/app/services/universal/byline.js b/app/services/universal/byline.js
index 404765f..30a2a83 100644
--- a/app/services/universal/byline.js
+++ b/app/services/universal/byline.js
@@ -1,8 +1,6 @@
 'use strict';
 
 const _get = require('lodash/get'),
-  _join = require('lodash/join'),
-  _map = require('lodash/map'),
   _isObject = require('lodash/isObject');
 
 /**
@@ -14,20 +12,20 @@ const _get = require('lodash/get'),
  */
 function formatSimpleByline(opts = {}) {
   const bylines = _get(opts.hash, 'bylines', []),
-    authors = _map(bylines, (author) => _isObject(author) ? author.text : author);
+    authors = bylines.map((author) => _isObject(author) ? author.text : author);
 
   if (authors.length === 1) {
     return '<span>' + authors[0] + '</span>';
   } else if (authors.length === 2) {
     return '<span>' + authors[0] + '</span><span class="and"> and </span><span>' + authors[1] + '</span>';
   } else {
-    return _join(_map(authors, function (author, idx) {
+    return authors.map((author, idx) => {
       if (idx < authors.length - 1) {
         return '<span>' + author + ', </span>';
       } else {
         return '<span class="and">and </span><span>' + author + '</span>';
       }
-    }), '');
+    }).join('');
   }
 }
 
diff --git a/app/services/universal/youtube-video-player.js b/app/services/universal/youtube-video-player.js
new file mode 100644
index 0000000..fca16a4
--- /dev/null
+++ b/app/services/universal/youtube-video-player.js
@@ -0,0 +1,146 @@
+/* global YT:false */
+'use strict';
+
+const VIDEO_ID_RE = /v=([\w-]+)/,
+  videoQueue = [],
+  state = 'initializing';
+
+// Global client service for the YouTube player as primary video content playback.
+
+/**
+ * Adds a video configuration to the video queue
+ * @param {object} videoConfig
+ * @param {string} videoConfig.videoContainerId
+ * @param {string} videoConfig.videoId
+ */
+function addVideo(videoConfig) {
+  if (videoConfig.videoContainerId && videoConfig.videoId) {
+    videoQueue.push(videoConfig);
+  } else {
+    console.warn('Video is missing Id or container Id to be render');
+  }
+}
+
+/**
+ * Extract video id from YT url
+ * @param {string} str
+ * @returns {string} video Id
+ */
+function extractVideoIdFromUrl(str) {
+  return VIDEO_ID_RE.test(str) ? VIDEO_ID_RE.exec(str)[1] : '';
+}
+
+/**
+ * create the YouTube / YT player
+ * @param {object} videoConfig
+ * @param {string} videoConfig.videoContainerId
+ * @param {string} videoConfig.videoId
+ * @param {object} videoConfig.playerParams
+ */
+function createPlayer(videoConfig) {
+  var elementId = videoConfig.videoContainerId || '',
+    videoId = videoConfig.videoId || '',
+    player = null, // eslint-disable-line no-unused-vars
+    playerParams = videoConfig.playerParams || {},
+    customParams = videoConfig.customParams || {},
+    playerEvents = {
+      ready: new Event('player-ready-' + elementId),
+      start: new Event('player-start-' + elementId),
+      finish: new Event('player-finish-' + elementId)
+    };
+
+  if (elementId && videoId) {
+    player = new YT.Player(elementId, { // eslint-disable-line no-unused-vars
+      videoId: videoId,
+      height: 'auto',
+      width: '100%',
+      playerVars: playerParams,
+      events: {
+        onReady: handleVideoReady(playerEvents.ready, customParams),
+        onStateChange: videoStateChangeWrapper(customParams, playerEvents)
+      }
+    });
+  }
+}
+
+/**
+ * handleVideoReady
+ * @param {object} event
+ * @param {string} customParams
+ * @returns {function}
+ */
+function handleVideoReady(event, customParams) {
+  return function (e) {
+    document.dispatchEvent(event);
+    consumeNextVideoInQueue();
+
+    if (customParams && customParams.customPlayer && customParams.templateid) {
+      document.addEventListener(`customPlayer-${customParams.templateid}`, function () {
+        e.target.playVideo();
+      });
+    }
+
+    if (customParams && customParams.muted) {
+      e.target.setVolume(0);
+    }
+  };
+}
+
+/**
+ * Loads next video
+ * @param {object} event - video event
+ * @param {boolean} shouldAutoplayNextVideo
+ */
+function loadNextVideo(event, shouldAutoplayNextVideo) {
+  if (shouldAutoplayNextVideo !== 'true') {
+    event.target.stopVideo();
+  }
+}
+
+/**
+ * Video state change wrapper
+ * @param {object} customParams - custom configuration object
+ * @param {object} playerEvents - YT player custom events
+ * @return {function} handles when the video state changes
+ */
+function videoStateChangeWrapper(customParams, playerEvents) {
+  var hasVideoStarted = false;
+
+  return function handleVideoStateChange(playerEvt) {
+    if (playerEvt.data === YT.PlayerState.PLAYING && !hasVideoStarted) {
+      document.dispatchEvent(Object.assign(playerEvents.start,
+        {player: {videoId: extractVideoIdFromUrl(playerEvt.target.getVideoUrl()), videoDuration: Math.ceil(playerEvt.target.getDuration())}}
+      ));
+      hasVideoStarted = true;
+    }
+
+    if (playerEvt.data === YT.PlayerState.ENDED) {
+      document.dispatchEvent(playerEvents.finish);
+      loadNextVideo(playerEvt, customParams.autoPlayNextVideo);
+      hasVideoStarted = false;
+    }
+  };
+}
+
+/**
+ * Consumes Next video in the queue
+ */
+function consumeNextVideoInQueue() {
+  if (videoQueue.length) {
+    createPlayer(videoQueue.shift());
+  }
+}
+
+/**
+ * Inits video player process
+ * @param  {object} videoConfig
+ */
+module.exports.init = function (videoConfig) {
+  if (videoConfig) {
+    addVideo(videoConfig);
+
+    if (state === 'initializing') {
+      consumeNextVideoInQueue();
+    }
+  }
+};
diff --git a/app/services/universal/youtube.js b/app/services/universal/youtube.js
new file mode 100644
index 0000000..d02ed7f
--- /dev/null
+++ b/app/services/universal/youtube.js
@@ -0,0 +1,30 @@
+'use strict';
+
+const rest = require('./rest'),
+  querystring = require('query-string'),
+  _get = require('lodash/get'),
+  moment = require('moment'),
+  YT_API = 'https://www.googleapis.com/youtube/v3',
+  log = require('./log').setup({ file: __filename });
+
+function getDurationInSeconds(duration) {
+  return moment.duration(duration, moment.ISO_8601).asSeconds();
+}
+
+function getVideoDetails(videoId) {
+  const videoSearchUrl = `${YT_API}/videos`,
+    qs = querystring.stringify({
+      part: 'snippet,contentDetails',
+      id: videoId,
+      key: process.env.YOUTUBE_API_KEY
+    });
+
+  return rest.get(`${videoSearchUrl}?${qs}`)
+    .then(res => Object.assign(
+      _get(res, 'items[0].snippet', {}),
+      { duration: getDurationInSeconds(_get(res, 'items[0].contentDetails.duration', 0)) }
+    ))
+    .catch(err => log('error', `Error fetching video details for video id ${videoId}: ${err.message}`));
+}
+
+module.exports.getVideoDetails = getVideoDetails;
diff --git a/app/styleguides/_default/components/youtube.css b/app/styleguides/_default/components/youtube.css
new file mode 100644
index 0000000..4e20814
--- /dev/null
+++ b/app/styleguides/_default/components/youtube.css
@@ -0,0 +1,99 @@
+@import '_default/common/_vars.css';
+
+$text-stack: 'MillerText', Georgia, serif;
+
+.youtube {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 0 24px;
+
+  .lede-video &,
+  .lede-video &.edit-mode {
+    margin: 0;
+  }
+
+  &-headline {
+    color: $black;
+    font: 21px / 25px $text-stack;
+    letter-spacing: -.01em;
+    margin: 0 0 6px;
+  }
+
+  &-caption {
+    color: $black;
+  }
+
+  &-headerline,
+  &-caption,
+  & .player-wrapper {
+    flex: 0 0 100%;
+  }
+
+  &.edit-mode {
+    height: auto;
+    margin: 0 0 20px;
+
+    .youtube-video-preview {
+      width: 100%;
+    }
+  }
+
+  &.border-top {
+    border-top: 1px solid $black;
+  }
+
+  &.border-top:before {
+    color: $black;
+    font: 15px Egyptienne, Georgia, serif;
+    letter-spacing: 2px;
+    padding: 8px 0 16px;
+    text-transform: uppercase;
+  }
+
+  & .player-wrapper {
+    margin: 0 0 10px;
+  }
+
+  & .player {
+    padding-top: calc((9/16) * 100%);
+    position: relative;
+  }
+
+  & .player iframe {
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  & + & {
+    margin-top: -5px;
+  }
+
+  @media screen and (min-width: 768px) {
+    margin: 0 0 40px -60px;
+
+    & + & {
+      margin-top: 0;
+    }
+
+    &.sponsored.break-out,
+    &.editorial.break-out {
+      width: 700px;
+    }
+  }
+
+  @media screen and (min-width: 1180px) {
+    margin: 0 0 40px;
+
+    &.embedded {
+      margin: 0 0 40px;
+    }
+
+    &.sponsored.break-out,
+    &.editorial.break-out {
+      width: 1100px;
+    }
+  }
+}
diff --git a/bootstrap-starter-data/_components.yml b/bootstrap-starter-data/_components.yml
index 628d7bd..5b9c72d 100644
--- a/bootstrap-starter-data/_components.yml
+++ b/bootstrap-starter-data/_components.yml
@@ -1,4 +1,8 @@
 _components:
+  youtube-player-head:
+    instances:
+      new:
+        allowed: true
   # meta components
   meta-title:
     instances:
diff --git a/bootstrap-starter-data/_layouts.yml b/bootstrap-starter-data/_layouts.yml
index 66f8263..dc08576 100644
--- a/bootstrap-starter-data/_layouts.yml
+++ b/bootstrap-starter-data/_layouts.yml
@@ -8,6 +8,8 @@ _layouts:
             _ref: /_components/meta-site/instances/article
           -
             _ref: /_components/meta-icons/instances/claydemo
+          -
+            _ref: /_components/youtube-player-head/instances/new
         top:
           -
             _ref: /_components/header/instances/claydemo

From 44870bb45237f97b70ed7427076188227c8cb794 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Thu, 7 Mar 2019 12:48:37 -0500
Subject: [PATCH 29/45] js docs

---
 app/components/article/model.js               | 12 +++----
 app/components/youtube/model.js               | 12 ++-----
 app/services/client/visibility.js             | 36 +++++++++----------
 app/services/universal/rest.js                | 10 +++---
 app/services/universal/utils.js               |  4 +--
 .../universal/youtube-video-player.js         | 16 ++++-----
 6 files changed, 42 insertions(+), 48 deletions(-)

diff --git a/app/components/article/model.js b/app/components/article/model.js
index 640df04..6335249 100644
--- a/app/components/article/model.js
+++ b/app/components/article/model.js
@@ -22,7 +22,7 @@ function stripHeadlineTags(oldHeadline) {
 
 /**
  * sanitize headline
- * @param  {object} data
+ * @param  {Object} data
  */
 function sanitizeInputs(data) {
   if (has(data.headline)) {
@@ -33,8 +33,8 @@ function sanitizeInputs(data) {
 /**
  * set the publish date from the locals (even if it's already set),
  * and format it correctly
- * @param  {object} data
- * @param  {object} locals
+ * @param  {Object} data
+ * @param  {Object} locals
  */
 function formatDate(data, locals) {
   if (_get(locals, 'date')) {
@@ -51,8 +51,8 @@ function formatDate(data, locals) {
 
 /**
  * set the canonical url from the locals (even if it's already set)
- * @param {object} data
- * @param {object} locals
+ * @param {Object} data
+ * @param {Object} locals
  */
 function setCanonicalUrl(data, locals) {
   if (_get(locals, 'publishUrl')) {
@@ -62,7 +62,7 @@ function setCanonicalUrl(data, locals) {
 
 /**
  * Set the feed image to the lede url if it isn't already set
- * @param  {object} data
+ * @param  {Object} data
  */
 function generateFeedImage(data) {
   if (data.ledeUrl) {
diff --git a/app/components/youtube/model.js b/app/components/youtube/model.js
index c717d3a..7d9a2cb 100644
--- a/app/components/youtube/model.js
+++ b/app/components/youtube/model.js
@@ -5,7 +5,7 @@ const _get = require('lodash/get'),
 
 /**
  * Override various settings by type of video
- * @param {object} data
+ * @param {Object} data
  */
 function updateSettingsByType(data) {
   switch (data.videoType) {
@@ -53,26 +53,20 @@ function setVideoDetails(data, videoDetails) {
   return data;
 }
 
-function getDefaultPlaylistBySite(data, locals) {
+function getDefaultPlaylistBySite(locals) {
   switch (locals.site.slug) {
     case 'wwwthecut':
       return 'PL4B448958847DA6FB';
-      break;
     case 'vulture':
       return 'PLZQfnFyelTBOQ15kmHSgEbdjzLMWzZpL7';
-      break;
     case 'grubstreet':
       return 'PLtmzdzCeRsyG_td56GV9JtS3yif177lfK';
-      break;
     case 'di':
       return 'PLtmzdzCeRsyHbGTxOX4BZvSgXBh20n-_4';
-      break;
     case 'selectall':
       return 'PLtmzdzCeRsyHh67c-VlEj8Nqpj5nL8pf6';
-      break;
     default:
       return 'PLtmzdzCeRsyFQ64kOTZS7eBLQ1fH2feu7'; // if its a site without a default playlist, use the 'latest from new york' playlist
-      break;
   }
 }
 
@@ -81,7 +75,7 @@ module.exports.save = (uri, data, locals) => {
   updateSettingsByType(data);
 
   if (data.videoId && !data.videoPlaylist) {
-    data.videoPlaylist = getDefaultPlaylistBySite(data, locals);
+    data.videoPlaylist = getDefaultPlaylistBySite(locals);
   }
 
   if (data.videoId) {
diff --git a/app/services/client/visibility.js b/app/services/client/visibility.js
index 6545c1a..c0ca160 100644
--- a/app/services/client/visibility.js
+++ b/app/services/client/visibility.js
@@ -37,26 +37,26 @@ function updateVisibility() {
 /**
  * updates seen property
  * @param  {Visible} item
- * @param  {{}} evt
+ * @param  {{}} event
  * @fires Visible#shown
  * @fires Visible#hidden
  */
-function updateSeen(item, evt) {
-  var px = evt.visiblePx,
-    percent = evt.visiblePercent;
+function updateSeen(item, event) {
+  var px = event.visiblePx,
+    percent = event.visiblePercent;
 
   // if some pixels are visible and we're greater/equal to threshold
   if (px && percent >= item.shownThreshold && !item.seen) {
     item.seen = true;
     setTimeout(function () {
-      item.trigger('shown', new VisibleEvent('shown', evt));
+      item.trigger('shown', new VisibleEvent('shown', event));
     }, 15);
 
     // if no pixels or percent is less than threshold
   } else if ((!px || percent < item.hiddenThreshold) && item.seen) {
     item.seen = false;
     setTimeout(function () {
-      item.trigger('hidden', new VisibleEvent('hidden', evt));
+      item.trigger('hidden', new VisibleEvent('hidden', event));
     }, 15);
   }
 }
@@ -64,15 +64,15 @@ function updateSeen(item, evt) {
 /**
  * sets preload property
  * @param  {Visible} item
- * @param  {Object} evt
- * @param  {Number} innerHeight
+ * @param  {Object} event
+ * @param  {number} innerHeight
  * @fires Visible#preload
  */
-function updatePreload(item, evt, innerHeight) {
-  if (!item.preload && item.preloadThreshold && shouldBePreloaded(evt.target, evt.rect, item.preloadThreshold, innerHeight)) {
+function updatePreload(item, event, innerHeight) {
+  if (!item.preload && item.preloadThreshold && shouldBePreloaded(event.target, event.rect, item.preloadThreshold, innerHeight)) {
     item.preload = true;
     setTimeout(function () {
-      item.trigger('preload', new VisibleEvent('preload', evt));
+      item.trigger('preload', new VisibleEvent('preload', event));
     }, 15);
   }
 }
@@ -86,21 +86,21 @@ function updateVisibilityForItem(item) {
     innerHeight = $window.innerHeight || $document.documentElement.clientHeight,
     px = getVerticallyVisiblePixels(rect, innerHeight),
     percent = px / (rect.height || innerHeight),
-    evt = {
+    event = {
       target: item.el,
       rect: rect,
       visiblePx: px,
       visiblePercent: percent
     };
 
-  updateSeen(item, evt);
-  updatePreload(item, evt, innerHeight);
+  updateSeen(item, event);
+  updatePreload(item, event, innerHeight);
 }
 
 /**
  * make sure an element isn't hidden by styles or etc
  * @param  {Element} el
- * @return {Boolean}
+ * @return {boolean}
  */
 function isElementNotHidden(el) {
   return el && el.offsetParent !== null && !el.getAttribute('hidden') && getComputedStyle(el).display !== 'none' && getComputedStyle(el).visibility !== 'hidden';
@@ -109,9 +109,9 @@ function isElementNotHidden(el) {
 /**
  * @param {Element} el
  * @param  {ClientRect} rect
- * @param {Number} preloadThreshold
- * @param {Number} innerHeight
- * @return {Boolean}
+ * @param {number} preloadThreshold
+ * @param {number} innerHeight
+ * @return {boolean}
  */
 function shouldBePreloaded(el, rect, preloadThreshold, innerHeight) {
   return rect.bottom > preloadThreshold * -1 && rect.top <= innerHeight + preloadThreshold && isElementNotHidden(el);
diff --git a/app/services/universal/rest.js b/app/services/universal/rest.js
index 71281ea..254230c 100644
--- a/app/services/universal/rest.js
+++ b/app/services/universal/rest.js
@@ -7,8 +7,8 @@ require('isomorphic-fetch');
 
 /**
  * if you're doing api calls to Clay, authenticate on the server/client side
- * @param  {object} payload
- * @return {object}
+ * @param  {Object} payload
+ * @return {Object}
  */
 function authenticate(payload) {
   // the access key is stringified at runtime
@@ -29,8 +29,8 @@ function addFakeCallback() {
  * check status after doing http calls
  * note: this is necessary because fetch doesn't reject on errors,
  * only on network failure or incomplete requests
- * @param  {object} res
- * @return {object}
+ * @param  {Object} res
+ * @return {Object}
  * @throws {Error} on non-2xx status
  */
 function checkStatus(res) {
@@ -47,7 +47,7 @@ function checkStatus(res) {
 /**
  * GET
  * @param {string} url
- * @param {object} opts See https://github.github.io/fetch/#options
+ * @param {Object} opts See https://github.github.io/fetch/#options
  * @return {Promise}
  */
 module.exports.get = function (url, opts) {
diff --git a/app/services/universal/utils.js b/app/services/universal/utils.js
index 6219bcb..0bfec69 100644
--- a/app/services/universal/utils.js
+++ b/app/services/universal/utils.js
@@ -62,7 +62,7 @@ function replaceVersion(uri, version) {
 /**
  * generate a url from a uri (and some site data)
  * @param  {string} uri
- * @param  {object} locals
+ * @param  {Object} locals
  * @return {string}
  */
 function uriToUrl(uri, locals) {
@@ -106,7 +106,7 @@ function formatStart(n) {
 }
 /*
  *
- * @param {object} locals
+ * @param {Object} locals
  * @param {string} [locals.site.protocol]
  * @param {string} locals.site.host
  * @param {string} [locals.site.port]
diff --git a/app/services/universal/youtube-video-player.js b/app/services/universal/youtube-video-player.js
index fca16a4..ad520af 100644
--- a/app/services/universal/youtube-video-player.js
+++ b/app/services/universal/youtube-video-player.js
@@ -9,7 +9,7 @@ const VIDEO_ID_RE = /v=([\w-]+)/,
 
 /**
  * Adds a video configuration to the video queue
- * @param {object} videoConfig
+ * @param {Object} videoConfig
  * @param {string} videoConfig.videoContainerId
  * @param {string} videoConfig.videoId
  */
@@ -32,10 +32,10 @@ function extractVideoIdFromUrl(str) {
 
 /**
  * create the YouTube / YT player
- * @param {object} videoConfig
+ * @param {Object} videoConfig
  * @param {string} videoConfig.videoContainerId
  * @param {string} videoConfig.videoId
- * @param {object} videoConfig.playerParams
+ * @param {Object} videoConfig.playerParams
  */
 function createPlayer(videoConfig) {
   var elementId = videoConfig.videoContainerId || '',
@@ -65,7 +65,7 @@ function createPlayer(videoConfig) {
 
 /**
  * handleVideoReady
- * @param {object} event
+ * @param {Object} event
  * @param {string} customParams
  * @returns {function}
  */
@@ -88,7 +88,7 @@ function handleVideoReady(event, customParams) {
 
 /**
  * Loads next video
- * @param {object} event - video event
+ * @param {Object} event - video event
  * @param {boolean} shouldAutoplayNextVideo
  */
 function loadNextVideo(event, shouldAutoplayNextVideo) {
@@ -99,8 +99,8 @@ function loadNextVideo(event, shouldAutoplayNextVideo) {
 
 /**
  * Video state change wrapper
- * @param {object} customParams - custom configuration object
- * @param {object} playerEvents - YT player custom events
+ * @param {Object} customParams - custom configuration object
+ * @param {Object} playerEvents - YT player custom events
  * @return {function} handles when the video state changes
  */
 function videoStateChangeWrapper(customParams, playerEvents) {
@@ -133,7 +133,7 @@ function consumeNextVideoInQueue() {
 
 /**
  * Inits video player process
- * @param  {object} videoConfig
+ * @param  {Object} videoConfig
  */
 module.exports.init = function (videoConfig) {
   if (videoConfig) {

From 4b08edf6758e30f6f6dbaa41d6c837291b697a26 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Thu, 7 Mar 2019 12:50:08 -0500
Subject: [PATCH 30/45] Update subheader.css

---
 app/styleguides/_default/components/subheader.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/styleguides/_default/components/subheader.css b/app/styleguides/_default/components/subheader.css
index d9de6b4..4e29755 100644
--- a/app/styleguides/_default/components/subheader.css
+++ b/app/styleguides/_default/components/subheader.css
@@ -35,10 +35,10 @@ $helvetica-stack: Helvetica, sans-serif;
   }
 
   .link {
+    opacity: 0;
     padding: 2px 0 0 5px;
     position: absolute;
     transition: opacity 150ms ease;
-    opacity: 0;
     -moz-transition: opacity 150ms ease;
     -webkit-transition: opacity 150ms ease;
   }

From d496d0629b90ff8fddd6db8217460a0ee8e2cd30 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Fri, 8 Mar 2019 14:33:15 -0500
Subject: [PATCH 31/45] Update client.js

---
 app/components/youtube/client.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/youtube/client.js b/app/components/youtube/client.js
index bea530a..799bfb1 100644
--- a/app/components/youtube/client.js
+++ b/app/components/youtube/client.js
@@ -2,7 +2,7 @@
 
 const youtubeVideoPlayer = require('../../services/universal/youtube-video-player'),
   $visibility = require('../../services/client/visibility'),
-  $gtm = require('../../services/client/gtm');
+  { reportNow } = require('../../services/client/gtm');
 
 module.exports = (el) => {
   var autoplay = el.getAttribute('data-autoplay-video') === 'true',
@@ -63,7 +63,7 @@ module.exports = (el) => {
    * native gtm.video trigger on play and finish
    */
   document.addEventListener('player-ready-' + videoConfig.videoContainerId, function () {
-    $gtm.reportNow(Object.assign({
+    reportNow(Object.assign({
       youtubeAction: 'player ready'
     }, analytics));
   });
@@ -82,7 +82,7 @@ module.exports = (el) => {
       // this will tell the gtm.video trigger to stop ignoring gtm.video events
       // in the case that an external video was played initially then switched to
       // an internal playlist
-      $gtm.reportNow(Object.assign({
+      reportNow(Object.assign({
         event: 'youtubeVideoReset',
         youtubeVideoId: evt.player.videoId,
         youtubeChannelName: 'New York Magazine'

From 2bb136fabd7de747044db6c121b1baec77be6011 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Fri, 8 Mar 2019 14:38:02 -0500
Subject: [PATCH 32/45] destruct visible object

---
 app/components/youtube/client.js    |  6 +-
 app/components/youtube/model.js     |  1 +
 app/components/youtube/template.hbs | 90 ++++++++++++++---------------
 3 files changed, 49 insertions(+), 48 deletions(-)

diff --git a/app/components/youtube/client.js b/app/components/youtube/client.js
index 799bfb1..3a1bbd7 100644
--- a/app/components/youtube/client.js
+++ b/app/components/youtube/client.js
@@ -1,7 +1,7 @@
 'use strict';
 
 const youtubeVideoPlayer = require('../../services/universal/youtube-video-player'),
-  $visibility = require('../../services/client/visibility'),
+  { Visible, isElementNotHidden } = require('../../services/client/visibility'),
   { reportNow } = require('../../services/client/gtm');
 
 module.exports = (el) => {
@@ -37,10 +37,10 @@ module.exports = (el) => {
     videoConfig.playerParams.list = '';
   }
 
-  visible = new $visibility.Visible(el, { preloadThreshold: 800 });
+  visible = new Visible(el, { preloadThreshold: 800 });
 
   // when the video player element enters the viewport, load the video(s)
-  if (visible.preload && $visibility.isElementNotHidden(el)) {
+  if (visible.preload && isElementNotHidden(el)) {
     // if the YouTube api is ready the videos(s) can be loaded
     if (window.nymYTApiReady === true) {
       youtubeVideoPlayer.init(videoConfig);
diff --git a/app/components/youtube/model.js b/app/components/youtube/model.js
index 7d9a2cb..7be274d 100644
--- a/app/components/youtube/model.js
+++ b/app/components/youtube/model.js
@@ -1,4 +1,5 @@
 'use strict';
+
 const _get = require('lodash/get'),
   { getVideoDetails } = require('../../services/universal/youtube'),
   defaultPlayerBorderTopCTA = 'Watch';
diff --git a/app/components/youtube/template.hbs b/app/components/youtube/template.hbs
index 61467b9..e0e8553 100644
--- a/app/components/youtube/template.hbs
+++ b/app/components/youtube/template.hbs
@@ -1,53 +1,53 @@
 {{ set 'uniquePlayerID' (randomString 'youtube-player-') }}
 {{#ifAny @root.locals.edit videoValid}}
-<div data-uri="{{ default _ref _self }}"
-     class="youtube{{if @root.locals.edit ' edit-mode'}}{{ if playerBorderTop ' border-top' }} {{ videoSize }} {{ videoType }}"
-     data-element-id="{{ uniquePlayerID }}"
-     data-video-id="{{ videoId }}"
-     data-autoplay-next-video="{{ autoPlayNextVideo }}"
-     data-autoplay-video="{{ autoPlay }}"
-     data-playlist="{{ videoPlaylist }}"
-     data-track-video-type="{{ videoType }}"
-     data-track-video-location="{{ videoLocation }}"
-     data-track-video-title="{{ videoTitle }}"
-     data-track-video-duration="{{ videoDuration }}"
-     data-track-channel-name="{{ channelName }}"
-     data-editable="inline"
-     data-custom-play="{{ customPlay }}"
-     data-origsrc="https://www.youtube.com/watch?v={{ videoId }}">
-  {{#if playerBorderTopCTA }}
-    <style>
-      .youtube[data-uri="{{ default _ref _self }}"].border-top:before {
-        content: '{{ playerBorderTopCTA }}';
-      }
-    </style>
-  {{/if}}
+  <div data-uri="{{ default _ref _self }}"
+      class="youtube{{if @root.locals.edit ' edit-mode'}}{{ if playerBorderTop ' border-top' }} {{ videoSize }} {{ videoType }}"
+      data-element-id="{{ uniquePlayerID }}"
+      data-video-id="{{ videoId }}"
+      data-autoplay-next-video="{{ autoPlayNextVideo }}"
+      data-autoplay-video="{{ autoPlay }}"
+      data-playlist="{{ videoPlaylist }}"
+      data-track-video-type="{{ videoType }}"
+      data-track-video-location="{{ videoLocation }}"
+      data-track-video-title="{{ videoTitle }}"
+      data-track-video-duration="{{ videoDuration }}"
+      data-track-channel-name="{{ channelName }}"
+      data-editable="inline"
+      data-custom-play="{{ customPlay }}"
+      data-origsrc="https://www.youtube.com/watch?v={{ videoId }}">
+    {{#if playerBorderTopCTA }}
+      <style>
+        .youtube[data-uri="{{ default _ref _self }}"].border-top:before {
+          content: '{{ playerBorderTopCTA }}';
+        }
+      </style>
+    {{/if}}
 
-  <div class="player-wrapper">
-    {{#unless @root.locals.edit}}
-      <div class="player">
-        {{!-- The <iframe> (and video player) will replace this <div> tag. --}}
-        <div id="{{ uniquePlayerID }}"></div>
-      </div>
-    {{else}}
-      {{#unless videoValid}}
-        <div data-placeholder="videoValid"></div>
+    <div class="player-wrapper">
+      {{#unless @root.locals.edit}}
+        <div class="player">
+          {{!-- The <iframe> (and video player) will replace this <div> tag. --}}
+          <div id="{{ uniquePlayerID }}"></div>
+        </div>
       {{else}}
-        {{#if videoThumbnail}}
-          <img class="youtube-video-preview" src="{{ videoThumbnail }}" alt="">
-        {{/if}}
+        {{#unless videoValid}}
+          <div data-placeholder="videoValid"></div>
+        {{else}}
+          {{#if videoThumbnail}}
+            <img class="youtube-video-preview" src="{{ videoThumbnail }}" alt="">
+          {{/if}}
+        {{/unless}}
       {{/unless}}
-    {{/unless}}
-  </div>
+    </div>
 
-  {{#ifAll playerHeadline (compare videoType 'related')}}
-    <h2 class="youtube-headline">{{ playerHeadline }}</h2>
-  {{/ifAll}}
+    {{#ifAll playerHeadline (compare videoType 'related')}}
+      <h2 class="youtube-headline">{{ playerHeadline }}</h2>
+    {{/ifAll}}
 
-  {{#if playerCaption}}
-    <div class="attribution youtube-caption">
-      <span class="caption">{{ playerCaption }}</span>
-    </div>
-  {{/if}}
-</div>
+    {{#if playerCaption}}
+      <div class="attribution youtube-caption">
+        <span class="caption">{{ playerCaption }}</span>
+      </div>
+    {{/if}}
+  </div>
 {{/ifAny}}

From b1559d06f4c3eb1367da34ba7e3e08ef6c0b3580 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Fri, 8 Mar 2019 15:03:54 -0500
Subject: [PATCH 33/45] Update youtube.css

---
 app/styleguides/_default/components/youtube.css | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/app/styleguides/_default/components/youtube.css b/app/styleguides/_default/components/youtube.css
index 4e20814..7a51be3 100644
--- a/app/styleguides/_default/components/youtube.css
+++ b/app/styleguides/_default/components/youtube.css
@@ -67,16 +67,7 @@ $text-stack: 'MillerText', Georgia, serif;
     width: 100%;
   }
 
-  & + & {
-    margin-top: -5px;
-  }
-
   @media screen and (min-width: 768px) {
-    margin: 0 0 40px -60px;
-
-    & + & {
-      margin-top: 0;
-    }
 
     &.sponsored.break-out,
     &.editorial.break-out {

From c659775fb5f9f7a6a054c7cb8c4d8f724f7df6e1 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Fri, 8 Mar 2019 15:10:34 -0500
Subject: [PATCH 34/45] Update client-env.json

---
 app/client-env.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/client-env.json b/app/client-env.json
index 973e30e..c6b0639 100644
--- a/app/client-env.json
+++ b/app/client-env.json
@@ -1 +1 @@
-["CLAY_LOG_PRETTY","LOG","NODE_DEBUG","NODE_ENV","JSONP_CLIENT_ENABLE_LOCAL_SUPPORT","SUPERAGENT_MOCK","CLAY_ACCESS_KEY","ELASTIC_PREFIX","YOUTUBE_API_KEY"]
+["ELASTIC_PREFIX","NODE_DEBUG"]

From 632f53a94da6704438b7e6e398a3bad2169ea2af Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Tue, 12 Mar 2019 18:13:47 -0400
Subject: [PATCH 35/45] Update client.js

---
 app/components/youtube/client.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/youtube/client.js b/app/components/youtube/client.js
index 3a1bbd7..e3e3f3e 100644
--- a/app/components/youtube/client.js
+++ b/app/components/youtube/client.js
@@ -5,7 +5,7 @@ const youtubeVideoPlayer = require('../../services/universal/youtube-video-playe
   { reportNow } = require('../../services/client/gtm');
 
 module.exports = (el) => {
-  var autoplay = el.getAttribute('data-autoplay-video') === 'true',
+  let autoplay = el.getAttribute('data-autoplay-video') === 'true',
     videoConfig = {
       videoContainerId: el.getAttribute('data-element-id').trim(),
       videoId: el.getAttribute('data-video-id').trim(),
@@ -75,7 +75,7 @@ module.exports = (el) => {
    * also might be nice to send an event if we see the video id changed?
    */
   document.addEventListener('player-start-' + videoConfig.videoContainerId, function (evt) {
-    var hasChanged = el.getAttribute('data-video-id') !== evt.player.videoId;
+    const hasChanged = el.getAttribute('data-video-id') !== evt.player.videoId;
 
     if (hasChanged) {
       updateElementAttributes(el, evt.player);

From d82a6de0d45a73e7da0659063e8d33a7870e29b6 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Tue, 12 Mar 2019 18:31:45 -0400
Subject: [PATCH 36/45] feedbacks

---
 app/components/youtube/client.js | 2 +-
 app/components/youtube/model.js  | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/app/components/youtube/client.js b/app/components/youtube/client.js
index e3e3f3e..72f4b33 100644
--- a/app/components/youtube/client.js
+++ b/app/components/youtube/client.js
@@ -62,7 +62,7 @@ module.exports = (el) => {
    * component into the data layer. Information about the video itself is captured from the
    * native gtm.video trigger on play and finish
    */
-  document.addEventListener('player-ready-' + videoConfig.videoContainerId, function () {
+  document.addEventListener('player-ready-' + videoConfig.videoContainerId, () => {
     reportNow(Object.assign({
       youtubeAction: 'player ready'
     }, analytics));
diff --git a/app/components/youtube/model.js b/app/components/youtube/model.js
index 7be274d..8ba7ed6 100644
--- a/app/components/youtube/model.js
+++ b/app/components/youtube/model.js
@@ -20,6 +20,7 @@ function updateSettingsByType(data) {
     case 'sponsored':
       data.autoPlay = false;
       data.autoPlayNextVideo = false;
+      break;
     default:
       // Toggle borders off if user previously selected `related` type. `sponsored` and `editorial` types share defaults
       data.playerBorderTop = data.previousTypeRelated ? false : data.playerBorderTop;
@@ -35,15 +36,13 @@ function clearVideoId(data) {
 }
 
 function setVideoDetails(data, videoDetails) {
-  var maxResThumb;
-
   if (!videoDetails.title) {
     data.videoValid = false;
 
     return data;
   }
 
-  maxResThumb = _get(videoDetails, 'thumbnails.maxres.url');
+  const maxResThumb = _get(videoDetails, 'thumbnails.maxres.url');
 
   data.videoValid = true;
   data.channelName = videoDetails.channelTitle;

From 679f8bf73a62cd190bf74dcc5ea0f13fa69ecf28 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Wed, 13 Mar 2019 10:34:06 -0400
Subject: [PATCH 37/45] Update model.js

---
 app/components/youtube/model.js | 23 +----------------------
 1 file changed, 1 insertion(+), 22 deletions(-)

diff --git a/app/components/youtube/model.js b/app/components/youtube/model.js
index 8ba7ed6..fe18281 100644
--- a/app/components/youtube/model.js
+++ b/app/components/youtube/model.js
@@ -53,31 +53,10 @@ function setVideoDetails(data, videoDetails) {
   return data;
 }
 
-function getDefaultPlaylistBySite(locals) {
-  switch (locals.site.slug) {
-    case 'wwwthecut':
-      return 'PL4B448958847DA6FB';
-    case 'vulture':
-      return 'PLZQfnFyelTBOQ15kmHSgEbdjzLMWzZpL7';
-    case 'grubstreet':
-      return 'PLtmzdzCeRsyG_td56GV9JtS3yif177lfK';
-    case 'di':
-      return 'PLtmzdzCeRsyHbGTxOX4BZvSgXBh20n-_4';
-    case 'selectall':
-      return 'PLtmzdzCeRsyHh67c-VlEj8Nqpj5nL8pf6';
-    default:
-      return 'PLtmzdzCeRsyFQ64kOTZS7eBLQ1fH2feu7'; // if its a site without a default playlist, use the 'latest from new york' playlist
-  }
-}
-
-module.exports.save = (uri, data, locals) => {
+module.exports.save = (uri, data) => {
   clearVideoId(data);
   updateSettingsByType(data);
 
-  if (data.videoId && !data.videoPlaylist) {
-    data.videoPlaylist = getDefaultPlaylistBySite(locals);
-  }
-
   if (data.videoId) {
     return getVideoDetails(data.videoId)
       .then(videoDetails => setVideoDetails(data, videoDetails));

From daf48666e0dbdb33af77da954aa57608885fff48 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Wed, 13 Mar 2019 10:39:09 -0400
Subject: [PATCH 38/45] Update visibility.js

---
 app/services/client/visibility.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/services/client/visibility.js b/app/services/client/visibility.js
index c0ca160..f2e8692 100644
--- a/app/services/client/visibility.js
+++ b/app/services/client/visibility.js
@@ -4,7 +4,7 @@ const $window = window,
   $document = document,
   _throttle = require('lodash/throttle'),
   Eventify = require('eventify');
-var list = [],
+let list = [],
   Visible, VisibleEvent;
 
 /**

From 29d5468c50ebb5fae6fa593de62f81daa4e1d720 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Wed, 13 Mar 2019 11:36:56 -0400
Subject: [PATCH 39/45] removed analytics and added js docs

---
 app/components/youtube/client.js  | 20 +-------------------
 app/services/universal/youtube.js | 10 ++++++++++
 2 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/app/components/youtube/client.js b/app/components/youtube/client.js
index 72f4b33..0d1ccdd 100644
--- a/app/components/youtube/client.js
+++ b/app/components/youtube/client.js
@@ -30,7 +30,6 @@ module.exports = (el) => {
         muted: autoplay // always mute autplaying videos
       }
     },
-    analytics = getAnalyticsCustomDimensions(el),
     visible;
 
   if (videoConfig.customParams.trackVideoType === 'Sponsored') {
@@ -65,7 +64,7 @@ module.exports = (el) => {
   document.addEventListener('player-ready-' + videoConfig.videoContainerId, () => {
     reportNow(Object.assign({
       youtubeAction: 'player ready'
-    }, analytics));
+    }));
   });
 
   /**
@@ -99,20 +98,3 @@ module.exports = (el) => {
 function updateElementAttributes(el, config) {
   el.setAttribute('data-video-id', config.videoId);
 }
-
-/**
- * Gets analytics custom dimensions for video player
- * @param {Object} el
- * @returns {Object} analytics
- */
-function getAnalyticsCustomDimensions(el) {
-  return {
-    event: 'youtubeVideo',
-    youtubeVideoId: el.getAttribute('data-video-id'),
-    youtubeVideoLocation: el.getAttribute('data-track-video-location'),
-    youtubeVideoType: el.getAttribute('data-track-video-type'),
-    youtubeVideoTitle: el.getAttribute('data-track-video-title'),
-    youtubeChannelName: el.getAttribute('data-track-channel-name'),
-    youtubeVideoDuration: el.getAttribute('data-track-video-duration')
-  };
-}
diff --git a/app/services/universal/youtube.js b/app/services/universal/youtube.js
index d02ed7f..71e67bb 100644
--- a/app/services/universal/youtube.js
+++ b/app/services/universal/youtube.js
@@ -7,10 +7,20 @@ const rest = require('./rest'),
   YT_API = 'https://www.googleapis.com/youtube/v3',
   log = require('./log').setup({ file: __filename });
 
+/**
+ * Get duration as ISO 8601 and convert it to seconds
+ * @param {string} duration - The duration as ISO 8601
+ * @return {number} @duration in seconds
+ */
 function getDurationInSeconds(duration) {
   return moment.duration(duration, moment.ISO_8601).asSeconds();
 }
 
+/**
+ * Get youtube video details
+ * @param {string} videoId - Youtube videoId
+ * @return {Object} - The video details
+ */
 function getVideoDetails(videoId) {
   const videoSearchUrl = `${YT_API}/videos`,
     qs = querystring.stringify({

From b34d3f65c10816a23adb3b0e66ff0044c1584884 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Wed, 13 Mar 2019 14:24:38 -0400
Subject: [PATCH 40/45] removed gtm.js

---
 app/components/youtube/client.js | 25 +---------------------
 app/services/client/gtm.js       | 36 --------------------------------
 2 files changed, 1 insertion(+), 60 deletions(-)
 delete mode 100644 app/services/client/gtm.js

diff --git a/app/components/youtube/client.js b/app/components/youtube/client.js
index 0d1ccdd..a4c0318 100644
--- a/app/components/youtube/client.js
+++ b/app/components/youtube/client.js
@@ -1,8 +1,7 @@
 'use strict';
 
 const youtubeVideoPlayer = require('../../services/universal/youtube-video-player'),
-  { Visible, isElementNotHidden } = require('../../services/client/visibility'),
-  { reportNow } = require('../../services/client/gtm');
+  { Visible, isElementNotHidden } = require('../../services/client/visibility');
 
 module.exports = (el) => {
   let autoplay = el.getAttribute('data-autoplay-video') === 'true',
@@ -55,37 +54,15 @@ module.exports = (el) => {
     });
   }
 
-  /**
-   * Player ready event
-   * this fires when the player is initially loaded and pushes variables specific to the
-   * component into the data layer. Information about the video itself is captured from the
-   * native gtm.video trigger on play and finish
-   */
-  document.addEventListener('player-ready-' + videoConfig.videoContainerId, () => {
-    reportNow(Object.assign({
-      youtubeAction: 'player ready'
-    }));
-  });
-
   /**
    * Player start event
-   *
    * we don't need to send an event here, updating the video id for posterity
-   * also might be nice to send an event if we see the video id changed?
    */
   document.addEventListener('player-start-' + videoConfig.videoContainerId, function (evt) {
     const hasChanged = el.getAttribute('data-video-id') !== evt.player.videoId;
 
     if (hasChanged) {
       updateElementAttributes(el, evt.player);
-      // this will tell the gtm.video trigger to stop ignoring gtm.video events
-      // in the case that an external video was played initially then switched to
-      // an internal playlist
-      reportNow(Object.assign({
-        event: 'youtubeVideoReset',
-        youtubeVideoId: evt.player.videoId,
-        youtubeChannelName: 'New York Magazine'
-      }));
     }
   });
 };
diff --git a/app/services/client/gtm.js b/app/services/client/gtm.js
deleted file mode 100644
index 645755c..0000000
--- a/app/services/client/gtm.js
+++ /dev/null
@@ -1,36 +0,0 @@
-'use strict';
-
-/**
- * ========
- * Overview
- * ========
- *
- * This `$gtm` service is a hub for Google Tag Manager (GTM) and does the following:
- *
- * 1. Loads GTM if the `gtm` component is on the page and `head-gtm` is not in the head
- *
- * 2. Reports events from client.js of components:
- *    - `$gtm.reportNow` reports immediately,
- */
-
-var eventsQueue = [], // enables us to send multiple events with one dataLayer push  and pixel fire to google
-  isCurrentlyReporting = false;
-
-window.dataLayer = window.dataLayer || [];
-
-/**
- * queues any events given in the params and reports the queue immediately
- */
-function reportNow() {
-  eventsQueue.push.apply(eventsQueue, arguments);
-  if (!isCurrentlyReporting) {
-    isCurrentlyReporting = true;
-    if (eventsQueue.length > 0) {
-      window.dataLayer.push.apply(window.dataLayer, eventsQueue);
-      eventsQueue = [];
-    }
-    isCurrentlyReporting = false;
-  }
-}
-
-module.exports.reportNow = reportNow;

From 88538d89cb9fbee589211e97b88a985fc1854619 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Wed, 13 Mar 2019 14:50:15 -0400
Subject: [PATCH 41/45] remove nym reference

---
 app/components/youtube-player-head/template.hbs | 10 +++++-----
 app/components/youtube/client.js                |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/components/youtube-player-head/template.hbs b/app/components/youtube-player-head/template.hbs
index 6e242f1..5375243 100644
--- a/app/components/youtube-player-head/template.hbs
+++ b/app/components/youtube-player-head/template.hbs
@@ -2,15 +2,15 @@
 {{#unless @root.locals.edit}}
   {{! NYM flags for `video-player` component instances
     player instances will first look for `nymYTApiReady` to be `true`
-    if `false`, player instances will listen for the event `nym-youtube-event:youtube-api-ready` }}
+    if `false`, player instances will listen for the event `youtube-event:youtube-api-ready` }}
   <script>
-    var nymYTApiReady = false;
+    var youtubeApiReady = false;
     window.onYouTubeIframeAPIReady = function () {
-      {{! when the YouTube API script is ready, dispatch an `nym-youtube-event:youtube-api-ready` event }}
-      var nymEventYTApiReady = new Event('nym-youtube-event:youtube-api-ready');
+      {{! when the YouTube API script is ready, dispatch an `youtube-event:youtube-api-ready` event }}
+      var nymEventYTApiReady = new Event('youtube-event:youtube-api-ready');
       document.dispatchEvent(nymEventYTApiReady);
       {{! change this flag to 'true' when the YouTube api is ready }}
-      nymYTApiReady = true;
+      youtubeApiReady = true;
     }
   </script>
 
diff --git a/app/components/youtube/client.js b/app/components/youtube/client.js
index a4c0318..0f7184b 100644
--- a/app/components/youtube/client.js
+++ b/app/components/youtube/client.js
@@ -40,11 +40,11 @@ module.exports = (el) => {
   // when the video player element enters the viewport, load the video(s)
   if (visible.preload && isElementNotHidden(el)) {
     // if the YouTube api is ready the videos(s) can be loaded
-    if (window.nymYTApiReady === true) {
+    if (window.youtubeApiReady === true) {
       youtubeVideoPlayer.init(videoConfig);
     } else {
       // wait and listen for the YouTube api to be ready before loading the video(s)
-      document.addEventListener('nym-youtube-event:youtube-api-ready', function () {
+      document.addEventListener('youtube-event:youtube-api-ready', function () {
         youtubeVideoPlayer.init(videoConfig);
       });
     }

From fb0dd95b33ef117585357d472600b74dc7d947d3 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Wed, 13 Mar 2019 15:04:24 -0400
Subject: [PATCH 42/45] Update schema.yaml

---
 app/components/article/schema.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/article/schema.yaml b/app/components/article/schema.yaml
index 1039b58..5fe9fdd 100644
--- a/app/components/article/schema.yaml
+++ b/app/components/article/schema.yaml
@@ -60,8 +60,8 @@ content:
       - divider
       - image
       - code-sample
-      - youtube
       - list
+      - youtube
 
 ledeUrl:
   _label: Lede Image URL

From 8fc57398ee8f425ccf9377a84f662bdc8efa869a Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Wed, 13 Mar 2019 17:25:09 -0400
Subject: [PATCH 43/45] feedback

---
 app/components/youtube/client.js               |  6 ++----
 app/services/universal/byline.js               | 15 ++++++---------
 app/services/universal/youtube-video-player.js |  4 ++--
 3 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/app/components/youtube/client.js b/app/components/youtube/client.js
index 0f7184b..cee3a72 100644
--- a/app/components/youtube/client.js
+++ b/app/components/youtube/client.js
@@ -4,7 +4,7 @@ const youtubeVideoPlayer = require('../../services/universal/youtube-video-playe
   { Visible, isElementNotHidden } = require('../../services/client/visibility');
 
 module.exports = (el) => {
-  let autoplay = el.getAttribute('data-autoplay-video') === 'true',
+  const autoplay = el.getAttribute('data-autoplay-video') === 'true',
     videoConfig = {
       videoContainerId: el.getAttribute('data-element-id').trim(),
       videoId: el.getAttribute('data-video-id').trim(),
@@ -29,14 +29,12 @@ module.exports = (el) => {
         muted: autoplay // always mute autplaying videos
       }
     },
-    visible;
+    visible = new Visible(el, { preloadThreshold: 800 });
 
   if (videoConfig.customParams.trackVideoType === 'Sponsored') {
     videoConfig.playerParams.list = '';
   }
 
-  visible = new Visible(el, { preloadThreshold: 800 });
-
   // when the video player element enters the viewport, load the video(s)
   if (visible.preload && isElementNotHidden(el)) {
     // if the YouTube api is ready the videos(s) can be loaded
diff --git a/app/services/universal/byline.js b/app/services/universal/byline.js
index 30a2a83..f1a6eec 100644
--- a/app/services/universal/byline.js
+++ b/app/services/universal/byline.js
@@ -7,8 +7,8 @@ const _get = require('lodash/get'),
  * Comma separate a list of author strings
  * or simple-list objects
  *
- * @param  {String[]} opts
- * @return {String}
+ * @param  {string[]} opts
+ * @return {string}
  */
 function formatSimpleByline(opts = {}) {
   const bylines = _get(opts.hash, 'bylines', []),
@@ -19,13 +19,10 @@ function formatSimpleByline(opts = {}) {
   } else if (authors.length === 2) {
     return '<span>' + authors[0] + '</span><span class="and"> and </span><span>' + authors[1] + '</span>';
   } else {
-    return authors.map((author, idx) => {
-      if (idx < authors.length - 1) {
-        return '<span>' + author + ', </span>';
-      } else {
-        return '<span class="and">and </span><span>' + author + '</span>';
-      }
-    }).join('');
+    return authors.map((author, index) => index < authors.length - 1
+      ? `<span>${author}, </span>`
+      : `<span class="and">and </span><span>${author}</span>`
+    ).join('');
   }
 }
 
diff --git a/app/services/universal/youtube-video-player.js b/app/services/universal/youtube-video-player.js
index ad520af..b942add 100644
--- a/app/services/universal/youtube-video-player.js
+++ b/app/services/universal/youtube-video-player.js
@@ -38,7 +38,7 @@ function extractVideoIdFromUrl(str) {
  * @param {Object} videoConfig.playerParams
  */
 function createPlayer(videoConfig) {
-  var elementId = videoConfig.videoContainerId || '',
+  let elementId = videoConfig.videoContainerId || '',
     videoId = videoConfig.videoId || '',
     player = null, // eslint-disable-line no-unused-vars
     playerParams = videoConfig.playerParams || {},
@@ -104,7 +104,7 @@ function loadNextVideo(event, shouldAutoplayNextVideo) {
  * @return {function} handles when the video state changes
  */
 function videoStateChangeWrapper(customParams, playerEvents) {
-  var hasVideoStarted = false;
+  let hasVideoStarted = false;
 
   return function handleVideoStateChange(playerEvt) {
     if (playerEvt.data === YT.PlayerState.PLAYING && !hasVideoStarted) {

From da8a9e51cf2891b03fe9540ade07941de4bb2f08 Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Wed, 13 Mar 2019 17:33:58 -0400
Subject: [PATCH 44/45] Update template.hbs

---
 app/components/youtube-player-head/template.hbs | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/youtube-player-head/template.hbs b/app/components/youtube-player-head/template.hbs
index 5375243..b006ca0 100644
--- a/app/components/youtube-player-head/template.hbs
+++ b/app/components/youtube-player-head/template.hbs
@@ -1,14 +1,14 @@
 <!-- data-uri="{{ default _ref _self }}" -->
 {{#unless @root.locals.edit}}
-  {{! NYM flags for `video-player` component instances
-    player instances will first look for `nymYTApiReady` to be `true`
+  {{! flags for `video-player` component instances
+    player instances will first look for `youtubeApiReady` to be `true`
     if `false`, player instances will listen for the event `youtube-event:youtube-api-ready` }}
   <script>
     var youtubeApiReady = false;
     window.onYouTubeIframeAPIReady = function () {
       {{! when the YouTube API script is ready, dispatch an `youtube-event:youtube-api-ready` event }}
-      var nymEventYTApiReady = new Event('youtube-event:youtube-api-ready');
-      document.dispatchEvent(nymEventYTApiReady);
+      var eventYTApiReady = new Event('youtube-event:youtube-api-ready');
+      document.dispatchEvent(eventYTApiReady);
       {{! change this flag to 'true' when the YouTube api is ready }}
       youtubeApiReady = true;
     }

From dbac03e63664ed4c0c60bd33aaa1a5d13f150d8b Mon Sep 17 00:00:00 2001
From: jean rodriguez <jcrodriguez@intellisys.com.do>
Date: Wed, 13 Mar 2019 17:52:04 -0400
Subject: [PATCH 45/45] Update template.hbs

---
 app/components/youtube-player-head/template.hbs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/youtube-player-head/template.hbs b/app/components/youtube-player-head/template.hbs
index b006ca0..b98004c 100644
--- a/app/components/youtube-player-head/template.hbs
+++ b/app/components/youtube-player-head/template.hbs
@@ -1,6 +1,6 @@
 <!-- data-uri="{{ default _ref _self }}" -->
 {{#unless @root.locals.edit}}
-  {{! flags for `video-player` component instances
+  {{! youtube flags for `video-player` component instances
     player instances will first look for `youtubeApiReady` to be `true`
     if `false`, player instances will listen for the event `youtube-event:youtube-api-ready` }}
   <script>