@mjhls/mjh-framework 1.0.249 → 1.0.250

package/README.md

@@ -1,5 +1,5 @@
 
-# mjh-framework v. 1.0.249
+# mjh-framework v. 1.0.250
 
 > Foundation Framework
 

package/dist/cjs/{AdSlot-a79ba074.js → AdSlot-58638d45.js}

@@ -924,7 +924,11 @@ var Beam = {
           switch (_context.prev = _context.next) {
             case 0:
               beam = _this.get_beam(deviceType);
-              _context.next = 3;
+
+
+              console.log('Call Beam', action, beam);
+
+              _context.next = 4;
               return fetch(beam_domain + '/api/beam/event', {
                 headers: {
                   'Content-Type': 'application/json',
@@ -939,19 +943,19 @@ var Beam = {
                 })
               });
 
-            case 3:
+            case 4:
               response = _context.sent;
-              _context.next = 6;
+              _context.next = 7;
               return response.json();
 
-            case 6:
+            case 7:
               res = _context.sent;
 
               if (res.error) {
                 console.error('Beam reporting error:', res.error);
               }
 
-            case 8:
+            case 9:
             case 'end':
               return _context.stop();
           }
@@ -977,7 +981,9 @@ var Beam = {
               data.size = adSize;
               data.slotId = slotId;
 
-              _context2.next = 9;
+              console.log('Call DFP', action, data);
+
+              _context2.next = 10;
               return fetch(beam_domain + '/api/beam/ad', {
                 headers: {
                   'Content-Type': 'application/json',
@@ -993,19 +999,19 @@ var Beam = {
                 })
               });
 
-            case 9:
+            case 10:
               response = _context2.sent;
-              _context2.next = 12;
+              _context2.next = 13;
               return response.json();
 
-            case 12:
+            case 13:
               res = _context2.sent;
 
               if (res.error) {
-                console.error('Beam AD reporting error:', res.error);
+                console.error('DFP reporting error:', res.error);
               }
 
-            case 14:
+            case 15:
             case 'end':
               return _context2.stop();
           }
@@ -1030,7 +1036,9 @@ var Beam = {
               data.segment = segment;
               data.current = current;
 
-              _context3.next = 8;
+              console.log('Call YouTube', action, data);
+
+              _context3.next = 9;
               return fetch(beam_domain + '/api/beam/video', {
                 headers: {
                   'Content-Type': 'application/json',
@@ -1039,26 +1047,26 @@ var Beam = {
                 method: 'post',
                 credentials: "include",
                 body: _JSON$stringify({
-                  event: 'DFP',
+                  event: 'Video',
                   action: action,
                   beam: _JSON$stringify(beam),
                   data: _JSON$stringify(data)
                 })
               });
 
-            case 8:
+            case 9:
               response = _context3.sent;
-              _context3.next = 11;
+              _context3.next = 12;
               return response.json();
 
-            case 11:
+            case 12:
               res = _context3.sent;
 
               if (res.error) {
-                console.error('Beam AD reporting error:', res.error);
+                console.error('Video reporting error:', res.error);
               }
 
-            case 13:
+            case 14:
             case 'end':
               return _context3.stop();
           }
@@ -1144,7 +1152,6 @@ var DFPAdSlot = function DFPAdSlot(_ref) {
 
               var hasFocus = slot_div.getAttribute('hasFocus');
               if (hasFocus == 'yes' && document.hidden) {
-                console.log('AD Clicked:', eventData.slotId);
                 slot_div.setAttribute('hasFocus', 'no');
                 Beam.report_beam_ad('Click', main.main_16, cID, lID, campID, adSize, slotId);
               }

package/dist/cjs/DeckContent.js

@@ -28,7 +28,7 @@ var index$1 = require('./index-39beccb3.js');
 var index$2 = require('./index-fa0fb52c.js');
 var entities = require('./entities-310b46ee.js');
 require('./slicedToArray-e38fb29d.js');
-var AdSlot = require('./AdSlot-a79ba074.js');
+var AdSlot = require('./AdSlot-58638d45.js');
 require('./promise-b96c61f8.js');
 
 var DeckContent = function (_React$Component) {

package/dist/cjs/{GridContent-e6c8fb75.js → GridContent-85c7b623.js}

@@ -21,7 +21,7 @@ var Router__default = _interopDefault(Router);
 var index$1 = require('./index-39beccb3.js');
 var index$2 = require('./index-fa0fb52c.js');
 var entities = require('./entities-310b46ee.js');
-var AdSlot = require('./AdSlot-a79ba074.js');
+var AdSlot = require('./AdSlot-58638d45.js');
 var get$1 = require('./get-1f91592f.js');
 
 var Dfp = React__default.lazy(function () {

package/dist/cjs/GridContent.js

@@ -24,10 +24,10 @@ require('./index-39beccb3.js');
 require('./index-fa0fb52c.js');
 require('./entities-310b46ee.js');
 require('./slicedToArray-e38fb29d.js');
-require('./AdSlot-a79ba074.js');
+require('./AdSlot-58638d45.js');
 require('./promise-b96c61f8.js');
 require('./get-1f91592f.js');
-var GridContent = require('./GridContent-e6c8fb75.js');
+var GridContent = require('./GridContent-85c7b623.js');
 
 
 

package/dist/cjs/{Normal-2ee1925d.js → Normal-77dfd44a.js}

@@ -12,7 +12,7 @@ var Row = _interopDefault(require('react-bootstrap/Row'));
 var Col = _interopDefault(require('react-bootstrap/Col'));
 var Link = _interopDefault(require('next/link'));
 var slicedToArray = require('./slicedToArray-e38fb29d.js');
-var AdSlot = require('./AdSlot-a79ba074.js');
+var AdSlot = require('./AdSlot-58638d45.js');
 var get$1 = require('./get-1f91592f.js');
 var reactBootstrap = require('react-bootstrap');
 var index_esm = require('./index.esm-340d3792.js');

package/dist/cjs/TemplateNormal.js

@@ -14,13 +14,13 @@ require('react-bootstrap/Row');
 require('react-bootstrap/Col');
 require('next/link');
 require('./slicedToArray-e38fb29d.js');
-require('./AdSlot-a79ba074.js');
+require('./AdSlot-58638d45.js');
 require('./promise-b96c61f8.js');
 require('./get-1f91592f.js');
 require('react-bootstrap');
 require('./index.esm-340d3792.js');
 require('react-bootstrap/Button');
-var TemplateNormal = require('./Normal-2ee1925d.js');
+var TemplateNormal = require('./Normal-77dfd44a.js');
 require('react-bootstrap/ListGroup');
 require('next/head');
 require('react-bootstrap/Nav');

package/dist/cjs/index.js

@@ -30,11 +30,11 @@ var index$1 = require('./index-39beccb3.js');
 require('./index-fa0fb52c.js');
 var entities = require('./entities-310b46ee.js');
 var slicedToArray = require('./slicedToArray-e38fb29d.js');
-var AdSlot = require('./AdSlot-a79ba074.js');
+var AdSlot = require('./AdSlot-58638d45.js');
 require('./promise-b96c61f8.js');
 var DeckContent = require('./DeckContent.js');
 require('./get-1f91592f.js');
-var GridContent = require('./GridContent-e6c8fb75.js');
+var GridContent = require('./GridContent-85c7b623.js');
 var DeckQueue = require('./DeckQueue.js');
 require('react-bootstrap/Media');
 var ThumbnailCard = require('./ThumbnailCard.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-2ee1925d.js');
+var TemplateNormal = require('./Normal-77dfd44a.js');
 require('react-bootstrap/ListGroup');
 var Head = _interopDefault(require('next/head'));
 var Accordion = _interopDefault(require('react-bootstrap/Accordion'));
@@ -5426,11 +5426,6 @@ var YouTubePlayer = function YouTubePlayer(_ref) {
       intervalID = _useState6[0],
       setIntervalID = _useState6[1];
 
-  var _useState7 = React.useState(null),
-      _useState8 = slicedToArray._slicedToArray(_useState7, 2),
-      segmentData = _useState8[0],
-      setSegemntData = _useState8[1];
-
   var queueProgress = [];
 
   var opts = {
@@ -5440,12 +5435,14 @@ var YouTubePlayer = function YouTubePlayer(_ref) {
     }
   };
 
-  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]);
+  var handleOnReady = function handleOnReady(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('Ready', main.main_16, duration, current, segment);
+  };
 
   var handlePlayPercent = function handlePlayPercent(player) {
     var current = player.getCurrentTime();
@@ -5454,28 +5451,22 @@ var YouTubePlayer = function YouTubePlayer(_ref) {
     var segment = Math.floor(current / queue);
 
     if (!queueProgress.includes(segment)) {
-      setSegemntData({
-        current: current,
-        duration: duration,
-        queue: queue,
-        segment: segment
-      });
+      AdSlot.Beam.report_beam_video('Segment', main.main_16, duration, current, 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);
 
-      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);
 
-      AdSlot.Beam.report_beam_video('Play', main.main_16, duration, current, segment);
+    if (!playReported) {
       setPlayReported(true);
       var _intervalID = setInterval(function () {
         handlePlayPercent(event.target);
@@ -5486,7 +5477,6 @@ var YouTubePlayer = function YouTubePlayer(_ref) {
 
   var handleOnEnd = function handleOnEnd(event) {
     if (!endReported) {
-      console.log('Video End', event);
       var player = event.target;
       var current = player.getCurrentTime();
       var duration = player.getDuration();
@@ -5500,7 +5490,6 @@ var YouTubePlayer = function YouTubePlayer(_ref) {
   };
 
   var handleOnPause = function handleOnPause(event) {
-    console.log('Video Pause');
     var player = event.target;
     var current = player.getCurrentTime();
     var duration = player.getDuration();
@@ -5510,7 +5499,7 @@ var YouTubePlayer = function YouTubePlayer(_ref) {
     AdSlot.Beam.report_beam_video('Pause', main.main_16, duration, current, segment);
   };
 
-  return React__default.createElement(YouTube, { videoId: id, opts: opts, onPlay: handleOnPlay, onPause: handleOnPause, onEnd: handleOnEnd });
+  return React__default.createElement(YouTube, { videoId: id, opts: opts, onReady: handleOnReady, onPlay: handleOnPlay, onPause: handleOnPause, onEnd: handleOnEnd });
 };
 
 var Sidebar = function Sidebar(_ref) {
@@ -12644,34 +12633,29 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
       intervalID = _useState6[0],
       setIntervalID = _useState6[1];
 
-  var _useState7 = React.useState(null),
-      _useState8 = slicedToArray._slicedToArray(_useState7, 2),
-      segmentData = _useState8[0],
-      setSegemntData = _useState8[1];
-
   var queueProgress = [];
 
   //state
 
-  var _useState9 = React.useState(''),
+  var _useState7 = React.useState(''),
+      _useState8 = slicedToArray._slicedToArray(_useState7, 2),
+      vidUrl = _useState8[0],
+      setVidUrl = _useState8[1];
+
+  var _useState9 = React.useState('youtube'),
       _useState10 = slicedToArray._slicedToArray(_useState9, 2),
-      vidUrl = _useState10[0],
-      setVidUrl = _useState10[1];
+      vidType = _useState10[0],
+      setVidType = _useState10[1];
 
-  var _useState11 = React.useState('youtube'),
+  var _useState11 = React.useState(''),
       _useState12 = slicedToArray._slicedToArray(_useState11, 2),
-      vidType = _useState12[0],
-      setVidType = _useState12[1];
+      series = _useState12[0],
+      setSeries = _useState12[1];
 
-  var _useState13 = React.useState(''),
+  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];
+      seriesData = _useState14[0],
+      setData = _useState14[1];
   //variables
 
 
@@ -12716,13 +12700,6 @@ 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')) {
@@ -12744,10 +12721,18 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     setSeries(vidIndex);
   }
 
+  var handleOnReady = function handleOnReady(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('Ready', main.main_16, duration, current, segment);
+  };
+
   // 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();
@@ -12796,28 +12781,22 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     var segment = Math.floor(current / queue);
 
     if (!queueProgress.includes(segment)) {
-      setSegemntData({
-        current: current,
-        duration: duration,
-        queue: queue,
-        segment: segment
-      });
+      AdSlot.Beam.report_beam_video('Segment', main.main_16, duration, current, 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);
 
-      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);
 
-      AdSlot.Beam.report_beam_video('Play', main.main_16, duration, current, segment);
+    if (!playReported) {
       setPlayReported(true);
       var _intervalID = setInterval(function () {
         handlePlayPercent(event.target);
@@ -12827,7 +12806,6 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
   };
 
   var handleOnPause = function handleOnPause(event) {
-    console.log('Video Pause');
     var player = event.target;
     var current = player.getCurrentTime();
     var duration = player.getDuration();
@@ -12851,7 +12829,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, onPlay: handleOnPlay, onPause: handleOnPause, onEnd: function onEnd(e) {
+      vidUrl && vidType == 'youtube' ? React__default.createElement(YouTube, { videoId: YoutubeGroup.getYoutubeId(vidUrl), opts: opts, onReady: handleOnReady, onPlay: handleOnPlay, onPause: handleOnPause, onEnd: function onEnd(e) {
           return handleOnEnd(e);
         } }) : React__default.createElement(
         'video',

package/dist/esm/{AdSlot-fb853576.js → AdSlot-1e5a6a2f.js}

@@ -919,7 +919,11 @@ var Beam = {
           switch (_context.prev = _context.next) {
             case 0:
               beam = _this.get_beam(deviceType);
-              _context.next = 3;
+
+
+              console.log('Call Beam', action, beam);
+
+              _context.next = 4;
               return fetch(beam_domain + '/api/beam/event', {
                 headers: {
                   'Content-Type': 'application/json',
@@ -934,19 +938,19 @@ var Beam = {
                 })
               });
 
-            case 3:
+            case 4:
               response = _context.sent;
-              _context.next = 6;
+              _context.next = 7;
               return response.json();
 
-            case 6:
+            case 7:
               res = _context.sent;
 
               if (res.error) {
                 console.error('Beam reporting error:', res.error);
               }
 
-            case 8:
+            case 9:
             case 'end':
               return _context.stop();
           }
@@ -972,7 +976,9 @@ var Beam = {
               data.size = adSize;
               data.slotId = slotId;
 
-              _context2.next = 9;
+              console.log('Call DFP', action, data);
+
+              _context2.next = 10;
               return fetch(beam_domain + '/api/beam/ad', {
                 headers: {
                   'Content-Type': 'application/json',
@@ -988,19 +994,19 @@ var Beam = {
                 })
               });
 
-            case 9:
+            case 10:
               response = _context2.sent;
-              _context2.next = 12;
+              _context2.next = 13;
               return response.json();
 
-            case 12:
+            case 13:
               res = _context2.sent;
 
               if (res.error) {
-                console.error('Beam AD reporting error:', res.error);
+                console.error('DFP reporting error:', res.error);
               }
 
-            case 14:
+            case 15:
             case 'end':
               return _context2.stop();
           }
@@ -1025,7 +1031,9 @@ var Beam = {
               data.segment = segment;
               data.current = current;
 
-              _context3.next = 8;
+              console.log('Call YouTube', action, data);
+
+              _context3.next = 9;
               return fetch(beam_domain + '/api/beam/video', {
                 headers: {
                   'Content-Type': 'application/json',
@@ -1034,26 +1042,26 @@ var Beam = {
                 method: 'post',
                 credentials: "include",
                 body: _JSON$stringify({
-                  event: 'DFP',
+                  event: 'Video',
                   action: action,
                   beam: _JSON$stringify(beam),
                   data: _JSON$stringify(data)
                 })
               });
 
-            case 8:
+            case 9:
               response = _context3.sent;
-              _context3.next = 11;
+              _context3.next = 12;
               return response.json();
 
-            case 11:
+            case 12:
               res = _context3.sent;
 
               if (res.error) {
-                console.error('Beam AD reporting error:', res.error);
+                console.error('Video reporting error:', res.error);
               }
 
-            case 13:
+            case 14:
             case 'end':
               return _context3.stop();
           }
@@ -1139,7 +1147,6 @@ var DFPAdSlot = function DFPAdSlot(_ref) {
 
               var hasFocus = slot_div.getAttribute('hasFocus');
               if (hasFocus == 'yes' && document.hidden) {
-                console.log('AD Clicked:', eventData.slotId);
                 slot_div.setAttribute('hasFocus', 'no');
                 Beam.report_beam_ad('Click', main_16, cID, lID, campID, adSize, slotId);
               }

package/dist/esm/DeckContent.js

@@ -22,7 +22,7 @@ import { i as imageUrlBuilder } from './index-3849e3fe.js';
 import { L as LazyLoad } from './index-5f9f807a.js';
 import { c as clean_html_1 } from './entities-7cc3bf45.js';
 import './slicedToArray-d0a9593a.js';
-import { D as DFPAdSlot } from './AdSlot-fb853576.js';
+import { D as DFPAdSlot } from './AdSlot-1e5a6a2f.js';
 import './promise-683a9c54.js';
 
 var DeckContent = function (_React$Component) {

package/dist/esm/{GridContent-3711b837.js → GridContent-0ee59a38.js}

@@ -15,7 +15,7 @@ import { withRouter } from 'next/router';
 import { i as imageUrlBuilder } from './index-3849e3fe.js';
 import { L as LazyLoad } from './index-5f9f807a.js';
 import { c as clean_html_1 } from './entities-7cc3bf45.js';
-import { D as DFPAdSlot } from './AdSlot-fb853576.js';
+import { D as DFPAdSlot } from './AdSlot-1e5a6a2f.js';
 import { g as get_1 } from './get-b2201dc8.js';
 
 var Dfp = React__default.lazy(function () {

package/dist/esm/GridContent.js

@@ -22,7 +22,7 @@ import './index-3849e3fe.js';
 import './index-5f9f807a.js';
 import './entities-7cc3bf45.js';
 import './slicedToArray-d0a9593a.js';
-import './AdSlot-fb853576.js';
+import './AdSlot-1e5a6a2f.js';
 import './promise-683a9c54.js';
 import './get-b2201dc8.js';
-export { G as default } from './GridContent-3711b837.js';
+export { G as default } from './GridContent-0ee59a38.js';

package/dist/esm/{Normal-b0b212a3.js → Normal-48ff37c3.js}

@@ -7,7 +7,7 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Link from 'next/link';
 import { _ as _slicedToArray } from './slicedToArray-d0a9593a.js';
-import { D as DFPAdSlot } from './AdSlot-fb853576.js';
+import { D as DFPAdSlot } from './AdSlot-1e5a6a2f.js';
 import { g as get_1 } from './get-b2201dc8.js';
 import { Dropdown } from 'react-bootstrap';
 import { G as GenIcon, b as IoMdLogIn, c as IoIosHome } from './index.esm-536609db.js';

package/dist/esm/TemplateNormal.js

@@ -12,13 +12,13 @@ import 'react-bootstrap/Row';
 import 'react-bootstrap/Col';
 import 'next/link';
 import './slicedToArray-d0a9593a.js';
-import './AdSlot-fb853576.js';
+import './AdSlot-1e5a6a2f.js';
 import './promise-683a9c54.js';
 import './get-b2201dc8.js';
 import 'react-bootstrap';
 import './index.esm-536609db.js';
 import 'react-bootstrap/Button';
-export { T as default } from './Normal-b0b212a3.js';
+export { T as default } from './Normal-48ff37c3.js';
 import 'react-bootstrap/ListGroup';
 import 'next/head';
 import 'react-bootstrap/Nav';

package/dist/esm/index.js

@@ -22,12 +22,12 @@ import { i as imageUrlBuilder } from './index-3849e3fe.js';
 import './index-5f9f807a.js';
 import { h as html_decode_1, c as clean_html_1 } from './entities-7cc3bf45.js';
 import { _ as _slicedToArray } from './slicedToArray-d0a9593a.js';
-import { _ as _JSON$stringify, a as _asyncToGenerator, r as regenerator, D as DFPAdSlot, B as Beam } from './AdSlot-fb853576.js';
-export { D as AdSlot, B as Beam } from './AdSlot-fb853576.js';
+import { _ as _JSON$stringify, a as _asyncToGenerator, r as regenerator, D as DFPAdSlot, B as Beam } from './AdSlot-1e5a6a2f.js';
+export { D as AdSlot, B as Beam } from './AdSlot-1e5a6a2f.js';
 import './promise-683a9c54.js';
 export { default as DeckContent } from './DeckContent.js';
 import './get-b2201dc8.js';
-export { A as AD, G as GridContent } from './GridContent-3711b837.js';
+export { A as AD, G as GridContent } from './GridContent-0ee59a38.js';
 export { default as DeckQueue } from './DeckQueue.js';
 import 'react-bootstrap/Media';
 export { default as ThumbnailCard } from './ThumbnailCard.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-b0b212a3.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-b0b212a3.js';
+import { M as MdPictureAsPdf, T as TemplateNormal } from './Normal-48ff37c3.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-48ff37c3.js';
 import 'react-bootstrap/ListGroup';
 import Head from 'next/head';
 import Accordion from 'react-bootstrap/Accordion';
@@ -5424,11 +5424,6 @@ var YouTubePlayer = function YouTubePlayer(_ref) {
       intervalID = _useState6[0],
       setIntervalID = _useState6[1];
 
-  var _useState7 = useState(null),
-      _useState8 = _slicedToArray(_useState7, 2),
-      segmentData = _useState8[0],
-      setSegemntData = _useState8[1];
-
   var queueProgress = [];
 
   var opts = {
@@ -5438,12 +5433,14 @@ var YouTubePlayer = function YouTubePlayer(_ref) {
     }
   };
 
-  useEffect(function () {
-    if (segmentData) {
-      console.log('Video Segment', segmentData);
-      Beam.report_beam_video('Segment', main_16, segmentData.duration, segmentData.current, segmentData.segment);
-    }
-  }, [segmentData]);
+  var handleOnReady = function handleOnReady(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('Ready', main_16, duration, current, segment);
+  };
 
   var handlePlayPercent = function handlePlayPercent(player) {
     var current = player.getCurrentTime();
@@ -5452,28 +5449,22 @@ var YouTubePlayer = function YouTubePlayer(_ref) {
     var segment = Math.floor(current / queue);
 
     if (!queueProgress.includes(segment)) {
-      setSegemntData({
-        current: current,
-        duration: duration,
-        queue: queue,
-        segment: segment
-      });
+      Beam.report_beam_video('Segment', main_16, duration, current, 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);
 
-      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);
 
-      Beam.report_beam_video('Play', main_16, duration, current, segment);
+    if (!playReported) {
       setPlayReported(true);
       var _intervalID = setInterval(function () {
         handlePlayPercent(event.target);
@@ -5484,7 +5475,6 @@ var YouTubePlayer = function YouTubePlayer(_ref) {
 
   var handleOnEnd = function handleOnEnd(event) {
     if (!endReported) {
-      console.log('Video End', event);
       var player = event.target;
       var current = player.getCurrentTime();
       var duration = player.getDuration();
@@ -5498,7 +5488,6 @@ var YouTubePlayer = function YouTubePlayer(_ref) {
   };
 
   var handleOnPause = function handleOnPause(event) {
-    console.log('Video Pause');
     var player = event.target;
     var current = player.getCurrentTime();
     var duration = player.getDuration();
@@ -5508,7 +5497,7 @@ var YouTubePlayer = function YouTubePlayer(_ref) {
     Beam.report_beam_video('Pause', main_16, duration, current, segment);
   };
 
-  return React__default.createElement(YouTube, { videoId: id, opts: opts, onPlay: handleOnPlay, onPause: handleOnPause, onEnd: handleOnEnd });
+  return React__default.createElement(YouTube, { videoId: id, opts: opts, onReady: handleOnReady, onPlay: handleOnPlay, onPause: handleOnPause, onEnd: handleOnEnd });
 };
 
 var Sidebar = function Sidebar(_ref) {
@@ -12642,34 +12631,29 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
       intervalID = _useState6[0],
       setIntervalID = _useState6[1];
 
-  var _useState7 = useState(null),
-      _useState8 = _slicedToArray(_useState7, 2),
-      segmentData = _useState8[0],
-      setSegemntData = _useState8[1];
-
   var queueProgress = [];
 
   //state
 
-  var _useState9 = useState(''),
+  var _useState7 = useState(''),
+      _useState8 = _slicedToArray(_useState7, 2),
+      vidUrl = _useState8[0],
+      setVidUrl = _useState8[1];
+
+  var _useState9 = useState('youtube'),
       _useState10 = _slicedToArray(_useState9, 2),
-      vidUrl = _useState10[0],
-      setVidUrl = _useState10[1];
+      vidType = _useState10[0],
+      setVidType = _useState10[1];
 
-  var _useState11 = useState('youtube'),
+  var _useState11 = useState(''),
       _useState12 = _slicedToArray(_useState11, 2),
-      vidType = _useState12[0],
-      setVidType = _useState12[1];
+      series = _useState12[0],
+      setSeries = _useState12[1];
 
-  var _useState13 = useState(''),
+  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];
+      seriesData = _useState14[0],
+      setData = _useState14[1];
   //variables
 
 
@@ -12714,13 +12698,6 @@ 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')) {
@@ -12742,10 +12719,18 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     setSeries(vidIndex);
   }
 
+  var handleOnReady = function handleOnReady(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('Ready', main_16, duration, current, segment);
+  };
+
   // 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();
@@ -12794,28 +12779,22 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     var segment = Math.floor(current / queue);
 
     if (!queueProgress.includes(segment)) {
-      setSegemntData({
-        current: current,
-        duration: duration,
-        queue: queue,
-        segment: segment
-      });
+      Beam.report_beam_video('Segment', main_16, duration, current, 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);
 
-      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);
 
-      Beam.report_beam_video('Play', main_16, duration, current, segment);
+    if (!playReported) {
       setPlayReported(true);
       var _intervalID = setInterval(function () {
         handlePlayPercent(event.target);
@@ -12825,7 +12804,6 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
   };
 
   var handleOnPause = function handleOnPause(event) {
-    console.log('Video Pause');
     var player = event.target;
     var current = player.getCurrentTime();
     var duration = player.getDuration();
@@ -12849,7 +12827,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, onPlay: handleOnPlay, onPause: handleOnPause, onEnd: function onEnd(e) {
+      vidUrl && vidType == 'youtube' ? React__default.createElement(YouTube, { videoId: getYoutubeId(vidUrl), opts: opts, onReady: handleOnReady, 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.249",
+  "version": "1.0.250",
   "description": "Foundation Framework",
   "author": "mjh-framework",
   "license": "MIT",