@mjhls/mjh-framework 1.0.918 → 1.0.919-TEST-V2

package/dist/esm/{index-4d8a8743.js → index-47a80fcc.js}

@@ -1,7 +1,7 @@
 import { _ as _extends, b as _extends$1 } from './extends-6d8e3924.js';
 import React__default, { useState, useEffect, useRef, useLayoutEffect, useCallback } from 'react';
 import { _ as _slicedToArray, a as _getIterator } from './slicedToArray-6ebcbfea.js';
-import { Carousel, Table, Figure as Figure$1, Card, Row, Col, Button, ProgressBar } from 'react-bootstrap';
+import { Carousel, Table, Figure as Figure$1, Card, Row, Col, Button as Button$1, ProgressBar } from 'react-bootstrap';
 import urlFor from './urlFor.js';
 import { l as lib_3 } from './index-f0fc23eb.js';
 import Router, { useRouter } from 'next/router';
@@ -18,6 +18,10 @@ import { L as LazyLoad } from './index-755f2cc2.js';
 import { a as _asyncToGenerator, r as regenerator } from './asyncToGenerator-5ef104a7.js';
 import { _ as _typeof$1 } from './typeof-e9fc0c5d.js';
 import { R as ReactPlayerLoader } from './brightcove-react-player-loader.es-57a70a56.js';
+import { _ as _JSON$stringify } from './stringify-2b084bee.js';
+import Modal from 'react-bootstrap/Modal';
+import Button from 'react-bootstrap/Button';
+import Form from 'react-bootstrap/Form';
 import GroupDeck from './GroupDeck.js';
 import { m as moment } from './moment-bc12cb97.js';
 import SocialShare from './SocialShare.js';
@@ -25,7 +29,6 @@ import { _ as _export, a as _core } from './core.get-iterator-method-ea258bb1.js
 import { _ as _objectToArray } from './_object-to-array-2300e51b.js';
 import { a as _Array$from, _ as _toConsumableArray } from './toConsumableArray-f7074d7c.js';
 import Pagination from 'react-bootstrap/Pagination';
-import Button$1 from 'react-bootstrap/Button';
 import { h as html_decode_1 } from './entities-6d9154b4.js';
 import DFPAdSlot from './AdSlot.js';
 import Row$1 from 'react-bootstrap/Row';
@@ -2224,7 +2227,7 @@ var VideoMp4 = function VideoMp4(_ref) {
     var duration = player.duration;
     var queue = Math.floor(duration / 10);
     var segment = Math.floor(current / queue);
-    //Beam.report_beam_video('Ready', deviceType, duration, current, segment, 'MP4')
+    // Beam.report_beam_video('Ready', deviceType, duration, current, segment, 'MP4')
     Segment.report_video_event('Video Ready', main_18, duration, current, segment, 'MP4');
   };
 
@@ -2234,7 +2237,7 @@ var VideoMp4 = function VideoMp4(_ref) {
     var queue = Math.floor(duration / 10);
     var segment = Math.floor(current / queue);
     if (!queueProgress.includes(segment)) {
-      //Beam.report_beam_video('Segment', deviceType, duration, current, segment, 'MP4')
+      // Beam.report_beam_video('Segment', deviceType, duration, current, segment, 'MP4')
       Segment.report_video_event('Video Segment', main_18, duration, current, segment, 'MP4');
       queueProgress.push(segment);
     }
@@ -2247,7 +2250,7 @@ var VideoMp4 = function VideoMp4(_ref) {
     var duration = player.duration;
     var queue = Math.floor(duration / 10);
     var segment = Math.floor(current / queue);
-    //Beam.report_beam_video('Play', deviceType, duration, current, segment, 'MP4')
+    // Beam.report_beam_video('Play', deviceType, duration, current, segment, 'MP4')
     Segment.report_video_event('Video Play', main_18, duration, current, segment, 'MP4');
 
     if (!playReported) {
@@ -2268,7 +2271,7 @@ var VideoMp4 = function VideoMp4(_ref) {
       var queue = Math.floor(duration / 10);
       var segment = Math.floor(current / queue);
 
-      //Beam.report_beam_video('End', deviceType, duration, current, segment, 'MP4')
+      // Beam.report_beam_video('End', deviceType, duration, current, segment, 'MP4')
       Segment.report_video_event('Video End', main_18, duration, current, segment, 'MP4');
       setEndReported(true);
       clearInterval(intervalID);
@@ -2281,7 +2284,7 @@ var VideoMp4 = function VideoMp4(_ref) {
     var duration = player.duration - current;
     var queue = Math.floor(duration / 10);
     var segment = Math.floor(current / queue);
-    //Beam.report_beam_video('Pause', deviceType, duration, current, segment, 'MP4')
+    // Beam.report_beam_video('Pause', deviceType, duration, current, segment, 'MP4')
     Segment.report_video_event('Video Pause', main_18, duration, current, segment, 'MP4');
   };
 
@@ -2312,6 +2315,220 @@ var VideoMp4 = function VideoMp4(_ref) {
   );
 };
 
+var PopupMultiChoice = function PopupMultiChoice(_ref) {
+  var question = _ref.question,
+      choices = _ref.choices,
+      handlePollAnswer = _ref.handlePollAnswer;
+
+  var choiceArray = choices.map(function (choice) {
+    return React__default.createElement(Form.Check, {
+      inline: true,
+      label: choice.choiceText,
+      value: choice.choiceText,
+      name: 'radioButton',
+      type: 'radio',
+      className: 'radioButton',
+      onClick: handlePollAnswer
+    });
+  });
+  return React__default.createElement(
+    'div',
+    {
+      key: 'inline-radio',
+      className: 'mb-3' },
+    React__default.createElement(
+      'h2',
+      {
+        className: 'radioLabelText'
+      },
+      question
+    ),
+    React__default.createElement(
+      'div',
+      {
+        className: 'multiChoiceDiv'
+      },
+      choiceArray
+    )
+  );
+};
+
+var PopupPollTextInput = function PopupPollTextInput(_ref) {
+  var textInputQuestion = _ref.textInputQuestion,
+      textAnswer = _ref.textAnswer,
+      handleTextAnswer = _ref.handleTextAnswer;
+
+  return React__default.createElement(
+    'div',
+    {
+      className: 'textInputDiv'
+    },
+    React__default.createElement(
+      'h2',
+      {
+        className: 'textInputQuestion'
+      },
+      textInputQuestion
+    ),
+    React__default.createElement(Form.Control, {
+      type: 'text',
+      className: 'textInput',
+      value: textAnswer,
+      placeholder: 'Your response',
+      onChange: handleTextAnswer
+    })
+  );
+};
+
+var _this = undefined;
+var fetch = require('node-fetch');
+
+var PopupPollModal = function PopupPollModal(props) {
+  var pollItems = props.pollItems,
+      pollUrl = props.pollUrl,
+      restartPlayer = props.restartPlayer,
+      multiChoiceRender = props.multiChoiceRender,
+      textInputRender = props.textInputRender;
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      pollAnswer = _useState2[0],
+      setPollAnswer = _useState2[1];
+
+  var _useState3 = useState(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      textAnswer = _useState4[0],
+      setTextAnswer = _useState4[1];
+
+  useEffect(function () {
+    var modal = document.getElementById('modalDiv');
+    modal.style.visibility = 'visible';
+  }, []);
+
+  var handleTextAnswer = function handleTextAnswer(e) {
+    setTextAnswer(e.target.value);
+  };
+
+  var handlePollAnswer = function handlePollAnswer(e) {
+    setPollAnswer(e.target.value);
+  };
+
+  var handleSubmit = function handleSubmit(e) {
+    var currentDate = new Date(Date.now()).toUTCString();
+    // eslint-disable-next-line no-undef
+    var anonymousID = typeof analytics !== 'undefined' && typeof analytics.user === 'function' && analytics.user() && analytics.user().anonymousId();
+    pollItems.forEach(function (item) {
+      var submitAnswer = void 0;
+      if (item.format === 'multiChoice') submitAnswer = pollAnswer;
+      if (item.format === 'textInput') submitAnswer = textAnswer;
+      var formData = {
+        uuid: anonymousID,
+        url: pollUrl,
+        date: currentDate,
+        question: item.question,
+        answer: submitAnswer
+      };
+      var requestOptions = {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: _JSON$stringify({ data: formData })
+      };
+      var insertData = function () {
+        var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
+          return regenerator.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  _context.next = 2;
+                  return fetch('/api/popup_polls', requestOptions).then(function (res) {
+                    return res.json();
+                  }).then(function (res) {
+                    return console.log(res);
+                  });
+
+                case 2:
+                case 'end':
+                  return _context.stop();
+              }
+            }
+          }, _callee, _this);
+        }));
+
+        return function insertData() {
+          return _ref.apply(this, arguments);
+        };
+      }();
+      console.log('formData', formData);
+      insertData();
+    });
+    restartPlayer();
+    e.preventDefault();
+  };
+
+  var pollArray = [];
+  pollItems.forEach(function (item, ind) {
+    if (item.format === 'multiChoice') {
+      pollArray.push(React__default.createElement(PopupMultiChoice, {
+        question: item.question,
+        choices: item.choices,
+        handlePollAnswer: handlePollAnswer,
+        key: ind
+      }));
+    }
+    if (item.format === 'textInput') {
+      pollArray.push(React__default.createElement(PopupPollTextInput, {
+        textInputQuestion: item.question,
+        textanswer: textAnswer,
+        handleTextAnswer: handleTextAnswer,
+        key: ind
+      }));
+    }
+  });
+
+  return React__default.createElement(
+    'div',
+    {
+      className: 'modalDiv',
+      id: 'modalDiv'
+    },
+    React__default.createElement(
+      Modal.Dialog,
+      null,
+      React__default.createElement(
+        Modal.Body,
+        null,
+        React__default.createElement(
+          Form,
+          {
+            onSubmit: handleSubmit,
+            className: 'modalForm'
+          },
+          pollArray,
+          textInputRender && !multiChoiceRender ? React__default.createElement(
+            Button,
+            {
+              className: 'submitButton',
+              type: 'submit',
+              variant: 'success',
+              disabled: !textAnswer
+            },
+            'Submit'
+          ) : React__default.createElement(
+            Button,
+            {
+              className: 'submitButton',
+              type: 'submit',
+              variant: 'success',
+              disabled: !pollAnswer
+            },
+            'Submit'
+          )
+        )
+      )
+    )
+  );
+};
+
 var Video = function Video(_ref) {
   var node = _ref.node,
       accountIDs = _ref.accountIDs,
@@ -2328,14 +2545,52 @@ var Video = function Video(_ref) {
       playlistID = node.playlistID,
       experienceID = node.experienceID;
 
+  var polls = void 0;
+  if (node.polls) polls = node.polls;
+
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       videoLoaded = _useState2[0],
       setVideoLoaded = _useState2[1];
 
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isPollingTime = _useState4[0],
+      setIsPollingTime = _useState4[1];
+
+  var _useState5 = useState([]),
+      _useState6 = _slicedToArray(_useState5, 2),
+      pollItems = _useState6[0],
+      setPollItems = _useState6[1];
+
+  var _useState7 = useState(''),
+      _useState8 = _slicedToArray(_useState7, 2),
+      pollUrl = _useState8[0],
+      setPollUrl = _useState8[1];
+
+  var _useState9 = useState(),
+      _useState10 = _slicedToArray(_useState9, 2),
+      videoPlayer = _useState10[0],
+      setVideoPlayer = _useState10[1];
+
+  var _useState11 = useState(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      multiChoiceRender = _useState12[0],
+      setMultiChoiceRender = _useState12[1];
+
+  var _useState13 = useState(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      textInputRender = _useState14[0],
+      setTextInputRender = _useState14[1];
+
+  var restartPlayer = function restartPlayer() {
+    setIsPollingTime(false);
+    videoPlayer.play();
+  };
+
   useEffect(function () {
     if (!videoLoaded && experienceID) {
-      //To load Experience Player JS
+      // To load Experience Player JS
       var experiencePlayerScript = document.createElement('script');
       experiencePlayerScript.src = 'https://players.brightcove.net/' + accountIDs.brightcove.accountId + '/experience_' + experienceID + '/live.js';
       document.body.appendChild(experiencePlayerScript);
@@ -2348,8 +2603,9 @@ var Video = function Video(_ref) {
   };
 
   var onVideoSuccess = function onVideoSuccess(success) {
-    //console.log('success:', success.ref)
+    // console.log('success:', success)
     var player = success.ref;
+    setVideoPlayer(player);
     if (_typeof$1(player.ima3) === 'object' && player.ima3.settings && player.ima3.settings.serverUrl && targeting !== null) {
       player.ima3.settings.debug = true;
       if (targeting.content_placement && targeting.document_url) {
@@ -2360,7 +2616,7 @@ var Video = function Video(_ref) {
     player.on('loadedmetadata', function (evt) {
       var _this = this;
 
-      //console.log('loadedmetadata:', evt)
+      // console.log('loadedmetadata:', evt)
       console.log('mediainfo:', player.mediainfo); // get the duration from here
       var duration = player.mediainfo.duration;
       var current = player.currentTime();
@@ -2404,17 +2660,46 @@ var Video = function Video(_ref) {
         autoPlayVideo();
       }
 
-      //Beam.report_beam_video('Ready', deviceType, duration, current, segment, 'BrightCove', accountIDs.brightcove.playerId, accountIDs.brightcove.accountId, videoID)
+      // Beam.report_beam_video('Ready', deviceType, duration, current, segment, 'BrightCove', accountIDs.brightcove.playerId, accountIDs.brightcove.accountId, videoID)
       Segment.report_video_event('Video Ready', main_18, duration, current, segment, 'BrightCove', accountIDs.brightcove.playerId, accountIDs.brightcove.accountId, videoID);
     });
-
-    // play
+    var intId = void 0;
+    var convertTime = function convertTime(timeStr) {
+      var minutes = parseInt(timeStr.slice(0, 2));
+      var seconds = parseInt(timeStr.slice(3));
+      return minutes * 60 + seconds;
+    };
+    var modalTimes = [];
+    polls.forEach(function (pollObj) {
+      return modalTimes.push(convertTime(pollObj.timestamp));
+    });
+    // console.log('last poll time', modalTimes[modalTimes.length - 1])
     player.on('play', function (evt) {
       var duration = player.mediainfo.duration;
       var current = player.currentTime();
       var queue = Math.floor(duration / 10);
       var segment = Math.floor(current / queue);
-      //Beam.report_beam_video('Play', deviceType, duration, current, segment, 'BrightCove', accountIDs.brightcove.playerId, accountIDs.brightcove.accountId, videoID)
+      if (polls) {
+        var vidPlayer = this;
+        intId = setInterval(function () {
+          var ct = player.currentTime();
+          // if (intId) console.log(`interval ID is ${intId}`)
+          // console.log('isPollingTime', isPollingTime)
+          modalTimes.forEach(function (modalTime, ind) {
+            if (Math.floor(ct) === modalTime) {
+              setPollItems(polls[ind].pollItems);
+              setPollUrl(targeting.document_url[0]);
+              setIsPollingTime(true);
+              polls[ind].pollItems.forEach(function (item) {
+                if (item.format === 'multiChoice') setMultiChoiceRender(true);
+                if (item.format === 'textInput') setTextInputRender(true);
+              });
+              vidPlayer.pause();
+            }
+          });
+        }, 1000);
+      }
+      // Beam.report_beam_video('Play', deviceType, duration, current, segment, 'BrightCove', accountIDs.brightcove.playerId, accountIDs.brightcove.accountId, videoID)
       Segment.report_video_event('Video Play', main_18, duration, current, segment, 'BrightCove', accountIDs.brightcove.playerId, accountIDs.brightcove.accountId, videoID);
     });
 
@@ -2424,7 +2709,9 @@ var Video = function Video(_ref) {
       var current = player.currentTime();
       var queue = Math.floor(duration / 10);
       var segment = Math.floor(current / queue);
-      //Beam.report_beam_video('Pause', deviceType, duration, current, segment, 'BrightCove', accountIDs.brightcove.playerId, accountIDs.brightcove.accountId, videoID)
+      clearInterval(intId);
+      console.log('clearing interval ' + intId + ' in pause');
+      // Beam.report_beam_video('Pause', deviceType, duration, current, segment, 'BrightCove', accountIDs.brightcove.playerId, accountIDs.brightcove.accountId, videoID)
       Segment.report_video_event('Video Pause', main_18, duration, current, segment, 'BrightCove', accountIDs.brightcove.playerId, accountIDs.brightcove.accountId, videoID);
     });
 
@@ -2434,9 +2721,10 @@ var Video = function Video(_ref) {
       var current = player.currentTime();
       var queue = Math.floor(duration / 10);
       var segment = Math.floor(current / queue);
-      //Beam.report_beam_video('End', deviceType, duration, current, segment, 'BrightCove', accountIDs.brightcove.playerId, accountIDs.brightcove.accountId, videoID)
+      clearInterval(intId);
+      // Beam.report_beam_video('End', deviceType, duration, current, segment, 'BrightCove', accountIDs.brightcove.playerId, accountIDs.brightcove.accountId, videoID)
       Segment.report_video_event('Video End', main_18, duration, current, segment, 'BrightCove', accountIDs.brightcove.playerId, accountIDs.brightcove.accountId, videoID);
-      //This is for old series format
+      // This is for old series format
       autoplayNextVideo(evt);
       if (nextVideo) {
         window.location.href = '/view/' + nextVideo;
@@ -2450,7 +2738,7 @@ var Video = function Video(_ref) {
       var queue = Math.floor(duration / 10);
       var segment = Math.floor(current / queue);
       if (!queueProgress.includes(segment)) {
-        //Beam.report_beam_video('Segment', deviceType, duration, current, segment, 'BrightCove', accountIDs.brightcove.playerId, accountIDs.brightcove.accountId, videoID)
+        // Beam.report_beam_video('Segment', deviceType, duration, current, segment, 'BrightCove', accountIDs.brightcove.playerId, accountIDs.brightcove.accountId, videoID)
         Segment.report_video_event('Video Segment', main_18, duration, current, segment, 'BrightCove', accountIDs.brightcove.playerId, accountIDs.brightcove.accountId, videoID);
         queueProgress.push(segment);
       }
@@ -2459,19 +2747,19 @@ var Video = function Video(_ref) {
     // ad impression
     player.on('ads-ad-started', function (evt) {
       var duration = player.ads.ad.duration;
-      player.ads.ad.id;
+      // const id = player.ads.ad.id
       var adType = 'Bright Cove: ' + player.ads.ad.type;
 
-      //Beam.report_beam_ad('AD Started', deviceType, '', '', '', '', '', adType, duration, id)
+      // Beam.report_beam_ad('AD Started', deviceType, '', '', '', '', '', adType, duration, id)
       Segment.report_ad_event('Video Ad Started', main_18, duration, adType, accountIDs.brightcove.playerId, accountIDs.brightcove.accountId);
     });
 
     // ad ended
     player.on('ads-ad-ended', function (evt) {
       var duration = player.ads.ad.duration;
-      player.ads.ad.id;
+      // const id = player.ads.ad.id
       var adType = 'Bright Cove: ' + player.ads.ad.type;
-      //Beam.report_beam_ad('AD Ended', deviceType, '', '', '', '', '', adType, duration, id)
+      // Beam.report_beam_ad('AD Ended', deviceType, '', '', '', '', '', adType, duration, id)
       Segment.report_ad_event('Video Ad Ended', main_18, duration, adType, accountIDs.brightcove.playerId, accountIDs.brightcove.accountId);
     });
   };
@@ -2481,6 +2769,20 @@ var Video = function Video(_ref) {
       return React__default.createElement(
         'div',
         null,
+        isPollingTime ? React__default.createElement(PopupPollModal
+        // eslint-disable-next-line react/jsx-indent-props
+        , { pollItems: pollItems
+          // eslint-disable-next-line react/jsx-indent-props
+          , pollUrl: pollUrl
+          // eslint-disable-next-line react/jsx-indent-props
+          , isPollingTime: isPollingTime
+          // eslint-disable-next-line react/jsx-indent-props
+          , restartPlayer: restartPlayer
+          // eslint-disable-next-line react/jsx-indent-props
+          , textInputRender: textInputRender
+          // eslint-disable-next-line react/jsx-indent-props
+          , multiChoiceRender: multiChoiceRender
+        }) : null,
         React__default.createElement(ReactPlayerLoader, {
           onSuccess: onVideoSuccess,
           onFailure: onVideoFailure,
@@ -2522,6 +2824,7 @@ var Video = function Video(_ref) {
     }
     return null;
   }
+
   if (source === 'mp4') {
     return React__default.createElement(
       'div',
@@ -7629,7 +7932,7 @@ var Poll$1 = function Poll(_ref) {
         );
       }),
       React__default.createElement(
-        Button,
+        Button$1,
         { disabled: !selectedChoice, type: 'submit' },
         'Vote'
       )
@@ -7806,7 +8109,7 @@ var Poll = function Poll(_ref) {
         );
       }),
       React__default.createElement(
-        Button,
+        Button$1,
         { disabled: !selectedChoice, type: 'submit' },
         'Vote'
       )
@@ -8119,7 +8422,7 @@ var Quiz = function Quiz(_ref) {
       )
     ),
     !showAnswer && React__default.createElement(
-      Button$1,
+      Button,
       { onClick: function onClick() {
           return checkAnswers();
         }, variant: 'info', block: true },

package/dist/esm/index.js

@@ -79,7 +79,7 @@ export { default as VerticalHero } from './VerticalHero.js';
 export { default as YahooHero } from './YahooHero.js';
 export { default as GridHero } from './GridHero.js';
 export { default as ConferenceArticleCard } from './ConferenceArticleCard.js';
-export { g as getSerializers } from './index-4d8a8743.js';
+export { g as getSerializers } from './index-47a80fcc.js';
 export { default as Beam } from './Beam.js';
 export { default as Segment } from './Segment.js';
 export { default as KMTracker } from './KMTracker.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mjhls/mjh-framework",
-  "version": "1.0.918",
+  "version": "1.0.919-TEST-V2",
   "description": "Foundation Framework",
   "author": "mjh-framework",
   "license": "MIT",
@@ -99,6 +99,7 @@
     "js-cookie": "^2.2.1",
     "next-auth": "^3.2.0",
     "next-cookies": "^2.0.3",
+    "node-fetch": "^2.6.1",
     "nookies": "^2.4.0",
     "react-cookies": "^0.1.1",
     "react-facebook": "^8.1.4",