@mjhls/mjh-framework 1.0.244 → 1.0.246

package/README.md

@@ -1,6 +1,5 @@
 
-# mjh-framework v. 1.0.244
-
+# mjh-framework v. 1.0.246
 
 > Foundation Framework
 

package/dist/cjs/{Normal-0f06cc52.js → Normal-18cef899.js}

@@ -1126,10 +1126,10 @@ var NavFooter = function NavFooter(props) {
   return React__default.createElement(
     'div',
     { className: 'nav-footer' },
-    website && website.sideFooterContent && website.sideFooterContent.length && React__default.createElement(
+    website && React__default.createElement(
       'ul',
       null,
-      website && website.sideFooterContent.map(function (content, index) {
+      website && website.sideFooterContent && website.sideFooterContent.length && website.sideFooterContent.map(function (content, index) {
         if (content.url && content.title) {
           return content.blank ? React__default.createElement(
             'li',

package/dist/cjs/TemplateNormal.js

@@ -20,7 +20,7 @@ require('./get-1f91592f.js');
 require('react-bootstrap');
 require('./index.esm-340d3792.js');
 require('react-bootstrap/Button');
-var TemplateNormal = require('./Normal-0f06cc52.js');
+var TemplateNormal = require('./Normal-18cef899.js');
 require('react-bootstrap/ListGroup');
 require('next/head');
 require('react-bootstrap/Nav');

package/dist/cjs/index.js

@@ -52,7 +52,7 @@ var IssueDeck = require('./IssueDeck.js');
 require('react-bootstrap/Badge');
 var IssueContentDeck = require('./IssueContentDeck.js');
 var Spinner = _interopDefault(require('react-bootstrap/Spinner'));
-var TemplateNormal = require('./Normal-0f06cc52.js');
+var TemplateNormal = require('./Normal-18cef899.js');
 require('react-bootstrap/ListGroup');
 var Head = _interopDefault(require('next/head'));
 var Accordion = _interopDefault(require('react-bootstrap/Accordion'));
@@ -12614,27 +12614,50 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
   }
 
   var router = Router.useRouter();
-  //state
 
-  var _useState = React.useState(''),
+  var _useState = React.useState(false),
       _useState2 = slicedToArray._slicedToArray(_useState, 2),
-      vidUrl = _useState2[0],
-      setVidUrl = _useState2[1];
+      playReported = _useState2[0],
+      setPlayReported = _useState2[1];
 
-  var _useState3 = React.useState('youtube'),
+  var _useState3 = React.useState(false),
       _useState4 = slicedToArray._slicedToArray(_useState3, 2),
-      vidType = _useState4[0],
-      setVidType = _useState4[1];
+      endReported = _useState4[0],
+      setEndReported = _useState4[1];
 
-  var _useState5 = React.useState(''),
+  var _useState5 = React.useState(null),
       _useState6 = slicedToArray._slicedToArray(_useState5, 2),
-      series = _useState6[0],
-      setSeries = _useState6[1];
+      intervalID = _useState6[0],
+      setIntervalID = _useState6[1];
 
-  var _useState7 = React.useState([]),
+  var _useState7 = React.useState(null),
       _useState8 = slicedToArray._slicedToArray(_useState7, 2),
-      seriesData = _useState8[0],
-      setData = _useState8[1];
+      segmentData = _useState8[0],
+      setSegemntData = _useState8[1];
+
+  var queueProgress = [];
+
+  //state
+
+  var _useState9 = React.useState(''),
+      _useState10 = slicedToArray._slicedToArray(_useState9, 2),
+      vidUrl = _useState10[0],
+      setVidUrl = _useState10[1];
+
+  var _useState11 = React.useState('youtube'),
+      _useState12 = slicedToArray._slicedToArray(_useState11, 2),
+      vidType = _useState12[0],
+      setVidType = _useState12[1];
+
+  var _useState13 = React.useState(''),
+      _useState14 = slicedToArray._slicedToArray(_useState13, 2),
+      series = _useState14[0],
+      setSeries = _useState14[1];
+
+  var _useState15 = React.useState([]),
+      _useState16 = slicedToArray._slicedToArray(_useState15, 2),
+      seriesData = _useState16[0],
+      setData = _useState16[1];
   //variables
 
 
@@ -12679,6 +12702,13 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     setData(data);
   }, []);
 
+  React.useEffect(function () {
+    if (segmentData) {
+      console.log('Video Segment', segmentData);
+      AdSlot.Beam.report_beam_video('Segment', main.main_16, segmentData.duration, segmentData.current, segmentData.segment);
+    }
+  }, [segmentData]);
+
   function toggleSeries() {
     var series = document.querySelector('.vid-series');
     if (series.classList.contains('active')) {
@@ -12688,6 +12718,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     }
     series.classList.toggle('active');
   }
+
   // This function is passed to the GroupDeck to change the youtube iframe src
   function setState(url, vidIndex) {
     setVidUrl(url);
@@ -12701,6 +12732,19 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
 
   // Handle video end
   function handleOnEnd(e) {
+    if (!endReported) {
+      console.log('Video End', e);
+      var player = e.target;
+      var current = player.getCurrentTime();
+      var duration = player.getDuration();
+      var queue = Math.floor(duration / 10);
+      var segment = Math.floor(current / queue);
+
+      AdSlot.Beam.report_beam_video('End', main.main_16, duration, current, segment);
+      setEndReported(true);
+      clearInterval(intervalID);
+    }
+
     var currentVid = void 0;
     var nextVid = void 0;
     //Find index of video currently playing
@@ -12730,6 +12774,55 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
       toggleSeries();
     }, 1000);
   }
+
+  var handlePlayPercent = function handlePlayPercent(player) {
+    var current = player.getCurrentTime();
+    var duration = player.getDuration();
+    var queue = Math.floor(duration / 10);
+    var segment = Math.floor(current / queue);
+
+    if (!queueProgress.includes(segment)) {
+      setSegemntData({
+        current: current,
+        duration: duration,
+        queue: queue,
+        segment: segment
+      });
+      queueProgress.push(segment);
+    }
+  };
+
+  var handleOnPlay = function handleOnPlay(event) {
+    // report play 
+    if (!playReported) {
+      console.log('Video Play', event);
+
+      var player = event.target;
+      var current = player.getCurrentTime();
+      var duration = player.getDuration();
+      var queue = Math.floor(duration / 10);
+      var segment = Math.floor(current / queue);
+
+      AdSlot.Beam.report_beam_video('Play', main.main_16, duration, current, segment);
+      setPlayReported(true);
+      var _intervalID = setInterval(function () {
+        handlePlayPercent(event.target);
+      }, 1000);
+      setIntervalID(_intervalID);
+    }
+  };
+
+  var handleOnPause = function handleOnPause(event) {
+    console.log('Video Pause');
+    var player = event.target;
+    var current = player.getCurrentTime();
+    var duration = player.getDuration();
+    var queue = Math.floor(duration / 10);
+    var segment = Math.floor(current / queue);
+
+    AdSlot.Beam.report_beam_video('Pause', main.main_16, duration, current, segment);
+  };
+
   // Youtube Options
   var opts = {
     width: '100%',
@@ -12744,7 +12837,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     React__default.createElement(
       'div',
       { className: 'video-block', style: { position: 'relative', overflow: 'hidden' } },
-      vidUrl && vidType == 'youtube' ? React__default.createElement(YouTube, { videoId: YoutubeGroup.getYoutubeId(vidUrl), opts: opts, onEnd: function onEnd(e) {
+      vidUrl && vidType == 'youtube' ? React__default.createElement(YouTube, { videoId: YoutubeGroup.getYoutubeId(vidUrl), opts: opts, onPlay: handleOnPlay, onPause: handleOnPause, onEnd: function onEnd(e) {
           return handleOnEnd(e);
         } }) : React__default.createElement(
         'video',

package/dist/esm/{Normal-aa76b53c.js → Normal-4c82c9c2.js}

@@ -1121,10 +1121,10 @@ var NavFooter = function NavFooter(props) {
   return React__default.createElement(
     'div',
     { className: 'nav-footer' },
-    website && website.sideFooterContent && website.sideFooterContent.length && React__default.createElement(
+    website && React__default.createElement(
       'ul',
       null,
-      website && website.sideFooterContent.map(function (content, index) {
+      website && website.sideFooterContent && website.sideFooterContent.length && website.sideFooterContent.map(function (content, index) {
         if (content.url && content.title) {
           return content.blank ? React__default.createElement(
             'li',

package/dist/esm/TemplateNormal.js

@@ -18,7 +18,7 @@ import './get-b2201dc8.js';
 import 'react-bootstrap';
 import './index.esm-536609db.js';
 import 'react-bootstrap/Button';
-export { T as default } from './Normal-aa76b53c.js';
+export { T as default } from './Normal-4c82c9c2.js';
 import 'react-bootstrap/ListGroup';
 import 'next/head';
 import 'react-bootstrap/Nav';

package/dist/esm/index.js

@@ -48,8 +48,8 @@ export { default as IssueDeck } from './IssueDeck.js';
 import 'react-bootstrap/Badge';
 export { default as IssueContentDeck } from './IssueContentDeck.js';
 import Spinner from 'react-bootstrap/Spinner';
-import { M as MdPictureAsPdf, T as TemplateNormal } from './Normal-aa76b53c.js';
-export { A as AD728x90, C as Column1, a as Column2, b as Column3, f as HamMagazine, H as Header, L as LeftNav, e as NavDvm, c as NavMagazine, N as NavNative, d as NavNormal, P as PageFilter, S as Search, g as SideFooter, T as TemplateNormal } from './Normal-aa76b53c.js';
+import { M as MdPictureAsPdf, T as TemplateNormal } from './Normal-4c82c9c2.js';
+export { A as AD728x90, C as Column1, a as Column2, b as Column3, f as HamMagazine, H as Header, L as LeftNav, e as NavDvm, c as NavMagazine, N as NavNative, d as NavNormal, P as PageFilter, S as Search, g as SideFooter, T as TemplateNormal } from './Normal-4c82c9c2.js';
 import 'react-bootstrap/ListGroup';
 import Head from 'next/head';
 import Accordion from 'react-bootstrap/Accordion';
@@ -12612,27 +12612,50 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
   }
 
   var router = useRouter();
-  //state
 
-  var _useState = useState(''),
+  var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      vidUrl = _useState2[0],
-      setVidUrl = _useState2[1];
+      playReported = _useState2[0],
+      setPlayReported = _useState2[1];
 
-  var _useState3 = useState('youtube'),
+  var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      vidType = _useState4[0],
-      setVidType = _useState4[1];
+      endReported = _useState4[0],
+      setEndReported = _useState4[1];
 
-  var _useState5 = useState(''),
+  var _useState5 = useState(null),
       _useState6 = _slicedToArray(_useState5, 2),
-      series = _useState6[0],
-      setSeries = _useState6[1];
+      intervalID = _useState6[0],
+      setIntervalID = _useState6[1];
 
-  var _useState7 = useState([]),
+  var _useState7 = useState(null),
       _useState8 = _slicedToArray(_useState7, 2),
-      seriesData = _useState8[0],
-      setData = _useState8[1];
+      segmentData = _useState8[0],
+      setSegemntData = _useState8[1];
+
+  var queueProgress = [];
+
+  //state
+
+  var _useState9 = useState(''),
+      _useState10 = _slicedToArray(_useState9, 2),
+      vidUrl = _useState10[0],
+      setVidUrl = _useState10[1];
+
+  var _useState11 = useState('youtube'),
+      _useState12 = _slicedToArray(_useState11, 2),
+      vidType = _useState12[0],
+      setVidType = _useState12[1];
+
+  var _useState13 = useState(''),
+      _useState14 = _slicedToArray(_useState13, 2),
+      series = _useState14[0],
+      setSeries = _useState14[1];
+
+  var _useState15 = useState([]),
+      _useState16 = _slicedToArray(_useState15, 2),
+      seriesData = _useState16[0],
+      setData = _useState16[1];
   //variables
 
 
@@ -12677,6 +12700,13 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     setData(data);
   }, []);
 
+  useEffect(function () {
+    if (segmentData) {
+      console.log('Video Segment', segmentData);
+      Beam.report_beam_video('Segment', main_16, segmentData.duration, segmentData.current, segmentData.segment);
+    }
+  }, [segmentData]);
+
   function toggleSeries() {
     var series = document.querySelector('.vid-series');
     if (series.classList.contains('active')) {
@@ -12686,6 +12716,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     }
     series.classList.toggle('active');
   }
+
   // This function is passed to the GroupDeck to change the youtube iframe src
   function setState(url, vidIndex) {
     setVidUrl(url);
@@ -12699,6 +12730,19 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
 
   // Handle video end
   function handleOnEnd(e) {
+    if (!endReported) {
+      console.log('Video End', e);
+      var player = e.target;
+      var current = player.getCurrentTime();
+      var duration = player.getDuration();
+      var queue = Math.floor(duration / 10);
+      var segment = Math.floor(current / queue);
+
+      Beam.report_beam_video('End', main_16, duration, current, segment);
+      setEndReported(true);
+      clearInterval(intervalID);
+    }
+
     var currentVid = void 0;
     var nextVid = void 0;
     //Find index of video currently playing
@@ -12728,6 +12772,55 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
       toggleSeries();
     }, 1000);
   }
+
+  var handlePlayPercent = function handlePlayPercent(player) {
+    var current = player.getCurrentTime();
+    var duration = player.getDuration();
+    var queue = Math.floor(duration / 10);
+    var segment = Math.floor(current / queue);
+
+    if (!queueProgress.includes(segment)) {
+      setSegemntData({
+        current: current,
+        duration: duration,
+        queue: queue,
+        segment: segment
+      });
+      queueProgress.push(segment);
+    }
+  };
+
+  var handleOnPlay = function handleOnPlay(event) {
+    // report play 
+    if (!playReported) {
+      console.log('Video Play', event);
+
+      var player = event.target;
+      var current = player.getCurrentTime();
+      var duration = player.getDuration();
+      var queue = Math.floor(duration / 10);
+      var segment = Math.floor(current / queue);
+
+      Beam.report_beam_video('Play', main_16, duration, current, segment);
+      setPlayReported(true);
+      var _intervalID = setInterval(function () {
+        handlePlayPercent(event.target);
+      }, 1000);
+      setIntervalID(_intervalID);
+    }
+  };
+
+  var handleOnPause = function handleOnPause(event) {
+    console.log('Video Pause');
+    var player = event.target;
+    var current = player.getCurrentTime();
+    var duration = player.getDuration();
+    var queue = Math.floor(duration / 10);
+    var segment = Math.floor(current / queue);
+
+    Beam.report_beam_video('Pause', main_16, duration, current, segment);
+  };
+
   // Youtube Options
   var opts = {
     width: '100%',
@@ -12742,7 +12835,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     React__default.createElement(
       'div',
       { className: 'video-block', style: { position: 'relative', overflow: 'hidden' } },
-      vidUrl && vidType == 'youtube' ? React__default.createElement(YouTube, { videoId: getYoutubeId(vidUrl), opts: opts, onEnd: function onEnd(e) {
+      vidUrl && vidType == 'youtube' ? React__default.createElement(YouTube, { videoId: getYoutubeId(vidUrl), opts: opts, onPlay: handleOnPlay, onPause: handleOnPause, onEnd: function onEnd(e) {
           return handleOnEnd(e);
         } }) : React__default.createElement(
         'video',

package/package.json

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