parent fa81bda

author jean rodriguez <[email protected]> 1551980917 -0500 committer jean rodriguez <[email protected]> 1552514592 -0400 feedbacks
clay · Mar 13, 2019 · 02d55f9 · 02d55f9
1 parent fa81bda
commit 02d55f9
Show file tree

Hide file tree

Showing 11 changed files with 101 additions and 116 deletions.
diff --git 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"]
diff --git 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/client.js b/app/components/youtube/client.js
@@ -1,11 +1,11 @@
 'use strict';
 
 const youtubeVideoPlayer = require('../../services/universal/youtube-video-player'),
-  $visibility = require('../../services/client/visibility'),
-  $gtm = require('../../services/client/gtm');
+  { Visible, isElementNotHidden } = require('../../services/client/visibility'),
+  { 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(),
@@ -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);
@@ -62,8 +62,8 @@ 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 () {
-    $gtm.reportNow(Object.assign({
+  document.addEventListener('player-ready-' + videoConfig.videoContainerId, () => {
+    reportNow(Object.assign({
       youtubeAction: 'player ready'
     }, analytics));
   });
@@ -75,14 +75,14 @@ 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);
       // 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'

diff --git a/app/components/youtube/model.js b/app/components/youtube/model.js
@@ -1,11 +1,12 @@
 'use strict';
+
 const _get = require('lodash/get'),
   { getVideoDetails } = require('../../services/universal/youtube'),
   defaultPlayerBorderTopCTA = 'Watch';
 
 /**
  * Override various settings by type of video
- * @param {object} data
+ * @param {Object} data
  */
 function updateSettingsByType(data) {
   switch (data.videoType) {
@@ -19,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;
@@ -34,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;
@@ -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/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}}
diff --git a/app/services/client/visibility.js b/app/services/client/visibility.js
@@ -37,42 +37,42 @@ 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);
   }
 }
 
 /**
  * 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
@@ -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) {
Original file line number	Diff line number	Diff line change
		@@ -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"]