@mjhls/mjh-framework 1.0.430 → 1.0.431

package/README.md

@@ -1,7 +1,5 @@
 
-
-# mjh-framework v. 1.0.430
-
+# mjh-framework v. 1.0.431
 
 > Foundation Framework 
 

package/dist/cjs/index.js

@@ -8114,7 +8114,9 @@ var Video = function Video(_ref) {
   var node = _ref.node,
       accountIDs = _ref.accountIDs,
       _ref$autoplay = _ref.autoplay,
-      autoplay = _ref$autoplay === undefined ? false : _ref$autoplay;
+      autoplay = _ref$autoplay === undefined ? false : _ref$autoplay,
+      _ref$autoplayNextVide = _ref.autoplayNextVideo,
+      autoplayNextVideo = _ref$autoplayNextVide === undefined ? function () {} : _ref$autoplayNextVide;
   var source = node.source,
       videoID = node.videoID,
       playlistID = node.playlistID,
@@ -8125,10 +8127,10 @@ var Video = function Video(_ref) {
     //console.log('success:', success.ref)
     var player = success.ref;
 
-    // this is video ready 
+    // this is video ready
     player.on('loadedmetadata', function (evt) {
       //console.log('loadedmetadata:', evt)
-      console.log('mediainfo:', player.mediainfo); // get the duration from here 
+      console.log('mediainfo:', player.mediainfo); // get the duration from here
       var duration = player.mediainfo.duration;
       var current = player.currentTime();
       var queue = Math.floor(duration / 10);
@@ -8159,7 +8161,7 @@ var Video = function Video(_ref) {
       AdSlot.Beam.report_beam_video('Play', main.main_16, duration, current, segment, 'BrightCove', accountIDs.brightcove.playerId, accountIDs.brightcove.accountId, videoID);
     });
 
-    // pause 
+    // pause
     player.on('pause', function (evt) {
       var duration = player.mediainfo.duration;
       var current = player.currentTime();
@@ -8175,6 +8177,7 @@ var Video = function Video(_ref) {
       var queue = Math.floor(duration / 10);
       var segment = Math.floor(current / queue);
       AdSlot.Beam.report_beam_video('End', main.main_16, duration, current, segment, 'BrightCove', accountIDs.brightcove.playerId, accountIDs.brightcove.accountId, videoID);
+      autoplayNextVideo(evt);
     });
 
     var queueProgress = [];
@@ -8189,7 +8192,7 @@ var Video = function Video(_ref) {
       }
     });
 
-    // ad impression 
+    // ad impression
     player.on('ads-ad-started', function (evt) {
       var duration = player.ads.ad.duration;
       var id = player.ads.ad.id;
@@ -8198,7 +8201,7 @@ var Video = function Video(_ref) {
       AdSlot.Beam.report_beam_ad('AD Started', main.main_16, '', '', '', '', '', adType, duration, id);
     });
 
-    // ad ended 
+    // ad ended
     player.on('ads-ad-ended', function (evt) {
       var duration = player.ads.ad.duration;
       var id = player.ads.ad.id;
@@ -8209,15 +8212,39 @@ var Video = function Video(_ref) {
 
   if (source === 'brightcove' && accountIDs.brightcove) {
     if (videoID) {
-      return React__default.createElement(ReactPlayerLoader, { onSuccess: onVideoSuccess, accountId: accountIDs.brightcove.accountId, videoId: videoID, playerId: accountIDs.brightcove.playerId, attrs: { className: 'brightcove', autoplay: 'muted' } });
+      return React__default.createElement(
+        'div',
+        null,
+        React__default.createElement(ReactPlayerLoader, {
+          onSuccess: onVideoSuccess,
+          accountId: accountIDs.brightcove.accountId,
+          videoId: videoID,
+          playerId: accountIDs.brightcove.playerId,
+          attrs: { className: 'brightcove', autoplay: 'muted' }
+        }),
+        React__default.createElement(
+          'style',
+          { jsx: 'true' },
+          '\n              .brightcove {\n                position: relative;\n                padding-bottom: 56.25%; /* 16:9 */\n                height: 0;\n                width: 100%;\n              }\n              .brightcove .video-js {\n                height: 100%;\n                width: 100%;\n                position: absolute;\n                top: 0;\n                left: 0;\n                right: 0;\n                bottom: 0;\n              }\n            '
+        )
+      );
     } else if (playlistID) {
-      return React__default.createElement(ReactPlayerLoader, {
-        accountId: accountIDs.brightcove.accountId,
-        playlistId: playlistID,
-        playerId: accountIDs.brightcove.playerId,
-        onSuccess: onVideoSuccess,
-        attrs: { className: 'brightcove brightcove-playlist', autoplay: 'muted' }
-      });
+      return React__default.createElement(
+        'div',
+        null,
+        React__default.createElement(ReactPlayerLoader, {
+          accountId: accountIDs.brightcove.accountId,
+          playlistId: playlistID,
+          playerId: accountIDs.brightcove.playerId,
+          onSuccess: onVideoSuccess,
+          attrs: { className: 'brightcove brightcove-playlist', autoplay: 'muted' }
+        }),
+        React__default.createElement(
+          'style',
+          { jsx: 'true' },
+          '\n              .brightcove {\n                position: relative;\n                padding-bottom: 56.25%; /* 16:9 */\n                height: 0;\n                width: 100%;\n              }\n              .brightcove .video-js {\n                height: 100%;\n                width: 100%;\n                position: absolute;\n                top: 0;\n                left: 0;\n                right: 0;\n                bottom: 0;\n              }\n            '
+        )
+      );
     } else if (experienceID) {
       return React__default.createElement(
         'div',
@@ -13044,6 +13071,27 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     setState(nodes.videos[nextVid].url, '', nextVid + 1);
   }
 
+  var autoplayNextVideo = function autoplayNextVideo(e) {
+    //for brightcove videos
+
+    var currentVid = void 0;
+    var nextVid = void 0;
+    //Find index of video currently playing
+    seriesData.forEach(function (vid, index) {
+      if (vid.url === vidUrl) {
+        currentVid = index;
+      }
+    });
+    //increment +1, or if at the end of the series list, go back to the beginning
+    if (currentVid + 1 >= seriesData.length) {
+      nextVid = 0;
+    } else {
+      nextVid = currentVid + 1;
+    }
+    // set the new Video URL
+    setState(nodes.videos[nextVid].url, '', nextVid + 1);
+  };
+
   var handlePlayPercent = function handlePlayPercent(player) {
     var current = player.getCurrentTime();
     var duration = player.getDuration();
@@ -13110,7 +13158,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
         }
       }),
       vidUrl && vidType == 'mp4' && React__default.createElement(VideoMp4, { url: vidUrl, thumbnail: vidThumbnail, vidLoaded: vidLoaded }),
-      vidUrl && vidType == 'brightcove' && React__default.createElement(Video, { node: { videoID: vidUrl, source: 'brightcove' }, accountIDs: accountIDs }),
+      vidUrl && vidType == 'brightcove' && React__default.createElement(Video, { autoplay: true, node: { videoID: vidUrl, source: 'brightcove' }, accountIDs: accountIDs, autoplayNextVideo: autoplayNextVideo }),
       React__default.createElement(
         'div',
         {
@@ -13162,7 +13210,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n     \n        #fluid-video-container > div {\n          position: relative;\n          padding-bottom: 56.25%; /* 16:9 */\n          height: 0;\n        }\n        #fluid-video-container .fluid-iframe {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100% !important;\n        }\n\n        span.btn {\n          margin: 0 1rem;\n        }\n        .brightcove .video-js {\n          float: none;\n          width: 100%;\n          height: 385px;\n        }\n        @media screen and (max-width: 1399px) {\n          .brightcove .video-js {\n            height: 360px;\n          }\n        }\n        @media screen and (max-width: 495px) {\n          .brightcove .video-js {\n            height: 255px;\n          }\n        }\n      '
+      '\n     \n        #fluid-video-container > div {\n          position: relative;\n          padding-bottom: 56.25%; /* 16:9 */\n          height: 0;\n        }\n        #fluid-video-container .fluid-iframe {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100% !important;\n        }\n\n        span.btn {\n          margin: 0 1rem;\n        }\n       \n       \n      '
     )
   );
 };

package/dist/esm/index.js

@@ -8111,7 +8111,9 @@ var Video = function Video(_ref) {
   var node = _ref.node,
       accountIDs = _ref.accountIDs,
       _ref$autoplay = _ref.autoplay,
-      autoplay = _ref$autoplay === undefined ? false : _ref$autoplay;
+      autoplay = _ref$autoplay === undefined ? false : _ref$autoplay,
+      _ref$autoplayNextVide = _ref.autoplayNextVideo,
+      autoplayNextVideo = _ref$autoplayNextVide === undefined ? function () {} : _ref$autoplayNextVide;
   var source = node.source,
       videoID = node.videoID,
       playlistID = node.playlistID,
@@ -8122,10 +8124,10 @@ var Video = function Video(_ref) {
     //console.log('success:', success.ref)
     var player = success.ref;
 
-    // this is video ready 
+    // this is video ready
     player.on('loadedmetadata', function (evt) {
       //console.log('loadedmetadata:', evt)
-      console.log('mediainfo:', player.mediainfo); // get the duration from here 
+      console.log('mediainfo:', player.mediainfo); // get the duration from here
       var duration = player.mediainfo.duration;
       var current = player.currentTime();
       var queue = Math.floor(duration / 10);
@@ -8156,7 +8158,7 @@ var Video = function Video(_ref) {
       Beam.report_beam_video('Play', main_16, duration, current, segment, 'BrightCove', accountIDs.brightcove.playerId, accountIDs.brightcove.accountId, videoID);
     });
 
-    // pause 
+    // pause
     player.on('pause', function (evt) {
       var duration = player.mediainfo.duration;
       var current = player.currentTime();
@@ -8172,6 +8174,7 @@ var Video = function Video(_ref) {
       var queue = Math.floor(duration / 10);
       var segment = Math.floor(current / queue);
       Beam.report_beam_video('End', main_16, duration, current, segment, 'BrightCove', accountIDs.brightcove.playerId, accountIDs.brightcove.accountId, videoID);
+      autoplayNextVideo(evt);
     });
 
     var queueProgress = [];
@@ -8186,7 +8189,7 @@ var Video = function Video(_ref) {
       }
     });
 
-    // ad impression 
+    // ad impression
     player.on('ads-ad-started', function (evt) {
       var duration = player.ads.ad.duration;
       var id = player.ads.ad.id;
@@ -8195,7 +8198,7 @@ var Video = function Video(_ref) {
       Beam.report_beam_ad('AD Started', main_16, '', '', '', '', '', adType, duration, id);
     });
 
-    // ad ended 
+    // ad ended
     player.on('ads-ad-ended', function (evt) {
       var duration = player.ads.ad.duration;
       var id = player.ads.ad.id;
@@ -8206,15 +8209,39 @@ var Video = function Video(_ref) {
 
   if (source === 'brightcove' && accountIDs.brightcove) {
     if (videoID) {
-      return React__default.createElement(ReactPlayerLoader, { onSuccess: onVideoSuccess, accountId: accountIDs.brightcove.accountId, videoId: videoID, playerId: accountIDs.brightcove.playerId, attrs: { className: 'brightcove', autoplay: 'muted' } });
+      return React__default.createElement(
+        'div',
+        null,
+        React__default.createElement(ReactPlayerLoader, {
+          onSuccess: onVideoSuccess,
+          accountId: accountIDs.brightcove.accountId,
+          videoId: videoID,
+          playerId: accountIDs.brightcove.playerId,
+          attrs: { className: 'brightcove', autoplay: 'muted' }
+        }),
+        React__default.createElement(
+          'style',
+          { jsx: 'true' },
+          '\n              .brightcove {\n                position: relative;\n                padding-bottom: 56.25%; /* 16:9 */\n                height: 0;\n                width: 100%;\n              }\n              .brightcove .video-js {\n                height: 100%;\n                width: 100%;\n                position: absolute;\n                top: 0;\n                left: 0;\n                right: 0;\n                bottom: 0;\n              }\n            '
+        )
+      );
     } else if (playlistID) {
-      return React__default.createElement(ReactPlayerLoader, {
-        accountId: accountIDs.brightcove.accountId,
-        playlistId: playlistID,
-        playerId: accountIDs.brightcove.playerId,
-        onSuccess: onVideoSuccess,
-        attrs: { className: 'brightcove brightcove-playlist', autoplay: 'muted' }
-      });
+      return React__default.createElement(
+        'div',
+        null,
+        React__default.createElement(ReactPlayerLoader, {
+          accountId: accountIDs.brightcove.accountId,
+          playlistId: playlistID,
+          playerId: accountIDs.brightcove.playerId,
+          onSuccess: onVideoSuccess,
+          attrs: { className: 'brightcove brightcove-playlist', autoplay: 'muted' }
+        }),
+        React__default.createElement(
+          'style',
+          { jsx: 'true' },
+          '\n              .brightcove {\n                position: relative;\n                padding-bottom: 56.25%; /* 16:9 */\n                height: 0;\n                width: 100%;\n              }\n              .brightcove .video-js {\n                height: 100%;\n                width: 100%;\n                position: absolute;\n                top: 0;\n                left: 0;\n                right: 0;\n                bottom: 0;\n              }\n            '
+        )
+      );
     } else if (experienceID) {
       return React__default.createElement(
         'div',
@@ -13041,6 +13068,27 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     setState(nodes.videos[nextVid].url, '', nextVid + 1);
   }
 
+  var autoplayNextVideo = function autoplayNextVideo(e) {
+    //for brightcove videos
+
+    var currentVid = void 0;
+    var nextVid = void 0;
+    //Find index of video currently playing
+    seriesData.forEach(function (vid, index) {
+      if (vid.url === vidUrl) {
+        currentVid = index;
+      }
+    });
+    //increment +1, or if at the end of the series list, go back to the beginning
+    if (currentVid + 1 >= seriesData.length) {
+      nextVid = 0;
+    } else {
+      nextVid = currentVid + 1;
+    }
+    // set the new Video URL
+    setState(nodes.videos[nextVid].url, '', nextVid + 1);
+  };
+
   var handlePlayPercent = function handlePlayPercent(player) {
     var current = player.getCurrentTime();
     var duration = player.getDuration();
@@ -13107,7 +13155,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
         }
       }),
       vidUrl && vidType == 'mp4' && React__default.createElement(VideoMp4, { url: vidUrl, thumbnail: vidThumbnail, vidLoaded: vidLoaded }),
-      vidUrl && vidType == 'brightcove' && React__default.createElement(Video, { node: { videoID: vidUrl, source: 'brightcove' }, accountIDs: accountIDs }),
+      vidUrl && vidType == 'brightcove' && React__default.createElement(Video, { autoplay: true, node: { videoID: vidUrl, source: 'brightcove' }, accountIDs: accountIDs, autoplayNextVideo: autoplayNextVideo }),
       React__default.createElement(
         'div',
         {
@@ -13159,7 +13207,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n     \n        #fluid-video-container > div {\n          position: relative;\n          padding-bottom: 56.25%; /* 16:9 */\n          height: 0;\n        }\n        #fluid-video-container .fluid-iframe {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100% !important;\n        }\n\n        span.btn {\n          margin: 0 1rem;\n        }\n        .brightcove .video-js {\n          float: none;\n          width: 100%;\n          height: 385px;\n        }\n        @media screen and (max-width: 1399px) {\n          .brightcove .video-js {\n            height: 360px;\n          }\n        }\n        @media screen and (max-width: 495px) {\n          .brightcove .video-js {\n            height: 255px;\n          }\n        }\n      '
+      '\n     \n        #fluid-video-container > div {\n          position: relative;\n          padding-bottom: 56.25%; /* 16:9 */\n          height: 0;\n        }\n        #fluid-video-container .fluid-iframe {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100% !important;\n        }\n\n        span.btn {\n          margin: 0 1rem;\n        }\n       \n       \n      '
     )
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mjhls/mjh-framework",
-  "version": "1.0.430",
+  "version": "1.0.431",
   "description": "Foundation Framework",
   "author": "mjh-framework",
   "license": "MIT",