youtube component

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"

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) {

app/components/article/schema.yaml

@@ -60,6 +60,7 @@ content:
       - divider
       - image
       - code-sample
+      - youtube
 
 ledeUrl:
   _label: Lede Image URL

app/components/youtube-player-head/bootstrap.yml

@@ -0,0 +1,3 @@
+_components:
+  youtube-player-head:
+    allowed: true

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.

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}}

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

app/components/youtube/client.js

@@ -0,0 +1,118 @@
+'use strict';
+
+const youtubeVideoPlayer = require('../../services/universal/youtube-video-player'),
+  { Visible, isElementNotHidden } = require('../../services/client/visibility'),
+  { reportNow } = 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 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
+    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 () {
+    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
+      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')
+  };
+}

app/components/youtube/model.js

@@ -0,0 +1,91 @@
+'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(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) => {
+  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));
+  }
+
+  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;
+};
+