@mjhls/mjh-framework 1.0.258 → 1.0.260

package/README.md

@@ -1,5 +1,5 @@
 
-# mjh-framework v. 1.0.258
+# mjh-framework v. 1.0.260
 
 > Foundation Framework
 

package/dist/cjs/{AdSlot-9f3af35d.js → AdSlot-3877c8c0.js}

@@ -1085,7 +1085,8 @@ var DFPAdSlot = function DFPAdSlot(_ref) {
       _ref$targeting = _ref.targeting,
       targeting = _ref$targeting === undefined ? {} : _ref$targeting,
       _ref$refreshFlag = _ref.refreshFlag,
-      refreshFlag = _ref$refreshFlag === undefined ? true : _ref$refreshFlag;
+      refreshFlag = _ref$refreshFlag === undefined ? true : _ref$refreshFlag,
+      setShowAd = _ref.setShowAd;
 
   var _useState = React.useState(false),
       _useState2 = slicedToArray._slicedToArray(_useState, 2),
@@ -1122,6 +1123,9 @@ var DFPAdSlot = function DFPAdSlot(_ref) {
       sizeMapping: sizeMapping,
       targetingArguments: targeting,
       onSlotRender: function onSlotRender(eventData) {
+        if (slotId === 'floating-ad' && eventData && eventData.event && eventData.event.creativeId == null) {
+          setShowAd(false);
+        }
         setAdRendered(true);
         if (eventData && eventData.event) {
           var cID = eventData.event.creativeId;

package/dist/cjs/DeckContent.js

@@ -28,7 +28,7 @@ var index$1 = require('./index-be0c82be.js');
 var index$2 = require('./index-fa0fb52c.js');
 var entities = require('./entities-310b46ee.js');
 require('./slicedToArray-e38fb29d.js');
-var AdSlot = require('./AdSlot-9f3af35d.js');
+var AdSlot = require('./AdSlot-3877c8c0.js');
 require('./promise-b96c61f8.js');
 
 var DeckContent = function (_React$Component) {

package/dist/cjs/{GridContent-c7d7ebe4.js → GridContent-32ad136e.js}

@@ -21,7 +21,7 @@ var Router__default = _interopDefault(Router);
 var index$1 = require('./index-be0c82be.js');
 var index$2 = require('./index-fa0fb52c.js');
 var entities = require('./entities-310b46ee.js');
-var AdSlot = require('./AdSlot-9f3af35d.js');
+var AdSlot = require('./AdSlot-3877c8c0.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-be0c82be.js');
 require('./index-fa0fb52c.js');
 require('./entities-310b46ee.js');
 require('./slicedToArray-e38fb29d.js');
-require('./AdSlot-9f3af35d.js');
+require('./AdSlot-3877c8c0.js');
 require('./promise-b96c61f8.js');
 require('./get-1f91592f.js');
-var GridContent = require('./GridContent-c7d7ebe4.js');
+var GridContent = require('./GridContent-32ad136e.js');
 
 
 

package/dist/cjs/{Normal-2ef3e500.js → Normal-83b88703.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-9f3af35d.js');
+var AdSlot = require('./AdSlot-3877c8c0.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-9f3af35d.js');
+require('./AdSlot-3877c8c0.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-2ef3e500.js');
+var TemplateNormal = require('./Normal-83b88703.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-be0c82be.js');
 require('./index-fa0fb52c.js');
 var entities = require('./entities-310b46ee.js');
 var slicedToArray = require('./slicedToArray-e38fb29d.js');
-var AdSlot = require('./AdSlot-9f3af35d.js');
+var AdSlot = require('./AdSlot-3877c8c0.js');
 require('./promise-b96c61f8.js');
 var DeckContent = require('./DeckContent.js');
 require('./get-1f91592f.js');
-var GridContent = require('./GridContent-c7d7ebe4.js');
+var GridContent = require('./GridContent-32ad136e.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-2ef3e500.js');
+var TemplateNormal = require('./Normal-83b88703.js');
 require('react-bootstrap/ListGroup');
 var Head = _interopDefault(require('next/head'));
 var Accordion = _interopDefault(require('react-bootstrap/Accordion'));
@@ -2879,7 +2879,7 @@ var ADFloatingFooter = function ADFloatingFooter(_ref) {
     showAd && React__default.createElement(
       'div',
       { className: 'floating-ad-wrapper ' + title },
-      React__default.createElement(AdSlot.DFPAdSlot, { className: className, slotId: slotId, networkID: networkID, sizes: sizes, adUnit: adUnit, targeting: adTargeting, refreshFlag: false }),
+      React__default.createElement(AdSlot.DFPAdSlot, { className: className, slotId: slotId, networkID: networkID, sizes: sizes, adUnit: adUnit, targeting: adTargeting, refreshFlag: false, setShowAd: setShowAd }),
       React__default.createElement(
         'div',
         { className: 'closeButton', onClick: function onClick() {
@@ -12799,6 +12799,115 @@ var Audio = function Audio(_ref) {
   return null;
 };
 
+var VideoMp4 = function VideoMp4(_ref) {
+  var url = _ref.url,
+      vidLoaded = _ref.vidLoaded;
+
+  var _useState = React.useState(false),
+      _useState2 = slicedToArray._slicedToArray(_useState, 2),
+      playReported = _useState2[0],
+      setPlayReported = _useState2[1];
+
+  var _useState3 = React.useState(false),
+      _useState4 = slicedToArray._slicedToArray(_useState3, 2),
+      endReported = _useState4[0],
+      setEndReported = _useState4[1];
+
+  var _useState5 = React.useState(null),
+      _useState6 = slicedToArray._slicedToArray(_useState5, 2),
+      intervalID = _useState6[0],
+      setIntervalID = _useState6[1];
+
+  var queueProgress = [];
+
+  var handleOnReady = function handleOnReady(event) {
+    var player = event.target;
+    var current = player.currentTime;
+    var duration = player.duration;
+    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.currentTime;
+    var duration = player.duration;
+    var queue = Math.floor(duration / 10);
+    var segment = Math.floor(current / queue);
+    if (!queueProgress.includes(segment)) {
+      AdSlot.Beam.report_beam_video('Segment', main.main_16, duration, current, segment);
+      queueProgress.push(segment);
+    }
+  };
+
+  var handleOnPlay = function handleOnPlay(event) {
+    // report play
+    var player = event.target;
+    var current = player.currentTime;
+    var duration = player.duration;
+    var queue = Math.floor(duration / 10);
+    var segment = Math.floor(current / queue);
+    AdSlot.Beam.report_beam_video('Play', main.main_16, duration, current, segment);
+
+    if (!playReported) {
+      event.persist();
+      setPlayReported(true);
+      var _intervalID = setInterval(function () {
+        handlePlayPercent(event.target);
+      }, 1000);
+      setIntervalID(_intervalID);
+    }
+  };
+
+  var handleOnEnd = function handleOnEnd(event) {
+    if (!endReported) {
+      var player = event.target;
+      var current = player.currentTime;
+      var duration = player.duration;
+      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 handleOnPause = function handleOnPause(event) {
+    var player = event.target;
+    var current = player.currentTime;
+    var duration = player.duration - current;
+    var queue = Math.floor(duration / 10);
+    var segment = Math.floor(current / queue);
+    AdSlot.Beam.report_beam_video('Pause', main.main_16, duration, current, segment);
+  };
+
+  return React__default.createElement(
+    'div',
+    null,
+    vidLoaded && React__default.createElement(
+      'video',
+      {
+        style: { width: '100%' },
+        controls: true,
+        onCanPlay: function onCanPlay(e) {
+          return handleOnReady(e);
+        },
+        onPause: function onPause(e) {
+          return handleOnPause(e);
+        },
+        onEnded: function onEnded(e) {
+          return handleOnEnd(e);
+        },
+        onPlay: function onPlay(e) {
+          return handleOnPlay(e);
+        } },
+      React__default.createElement('source', { src: url, type: 'video/mp4' }),
+      'Your browser does not support the video tag.'
+    )
+  );
+};
+
 var YouTubeGallery = function YouTubeGallery(_ref) {
   var nodes = _ref.nodes,
       client = _ref.client,
@@ -12835,20 +12944,25 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
       vidUrl = _useState8[0],
       setVidUrl = _useState8[1];
 
-  var _useState9 = React.useState('youtube'),
+  var _useState9 = React.useState(false),
       _useState10 = slicedToArray._slicedToArray(_useState9, 2),
-      vidType = _useState10[0],
-      setVidType = _useState10[1];
+      vidLoaded = _useState10[0],
+      setVidLoaded = _useState10[1];
 
-  var _useState11 = React.useState(''),
+  var _useState11 = React.useState('youtube'),
       _useState12 = slicedToArray._slicedToArray(_useState11, 2),
-      series = _useState12[0],
-      setSeries = _useState12[1];
+      vidType = _useState12[0],
+      setVidType = _useState12[1];
 
-  var _useState13 = React.useState([]),
+  var _useState13 = React.useState(''),
       _useState14 = slicedToArray._slicedToArray(_useState13, 2),
-      seriesData = _useState14[0],
-      setData = _useState14[1];
+      series = _useState14[0],
+      setSeries = _useState14[1];
+
+  var _useState15 = React.useState([]),
+      _useState16 = slicedToArray._slicedToArray(_useState15, 2),
+      seriesData = _useState16[0],
+      setData = _useState16[1];
   //variables
 
 
@@ -12886,9 +13000,11 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     } else {
       setSeries(seriesVid);
       setVidUrl(nodes.videos[seriesVid - 1].url);
+
       if (nodes.videos[0].type) {
         setVidType(nodes.videos[seriesVid - 1].type);
       }
+      setVidLoaded(true);
     }
     setData(data);
   }, []);
@@ -12905,13 +13021,17 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
 
   // This function is passed to the GroupDeck to change the youtube iframe src
   function setState(url, vidIndex) {
-    setVidUrl(url);
-    toggleSeries();
-    index.lib_3.refresh();
-    var newPath = '/' + get2 + '/' + get3 + ('?seriesVid=' + vidIndex);
-    var vidState = { vid_id: vidIndex };
-    window.history.pushState(vidState, '', newPath);
-    setSeries(vidIndex);
+    setVidLoaded(false);
+    setTimeout(function () {
+      setVidUrl(url);
+      toggleSeries();
+      index.lib_3.refresh();
+      var newPath = '/' + get2 + '/' + get3 + ('?seriesVid=' + vidIndex);
+      var vidState = { vid_id: vidIndex };
+      window.history.pushState(vidState, '', newPath);
+      setSeries(vidIndex);
+      setVidLoaded(true);
+    }, 100);
   }
 
   var handleOnReady = function handleOnReady(event) {
@@ -12972,7 +13092,6 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     var duration = player.getDuration();
     var queue = Math.floor(duration / 10);
     var segment = Math.floor(current / queue);
-
     if (!queueProgress.includes(segment)) {
       AdSlot.Beam.report_beam_video('Segment', main.main_16, duration, current, segment);
       queueProgress.push(segment);
@@ -12980,7 +13099,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
   };
 
   var handleOnPlay = function handleOnPlay(event) {
-    // report play 
+    // report play
     var player = event.target;
     var current = player.getCurrentTime();
     var duration = player.getDuration();
@@ -13024,12 +13143,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
       { className: 'video-block', style: { position: 'relative', overflow: 'hidden' } },
       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',
-        { style: { width: '100%' }, controls: true },
-        React__default.createElement('source', { src: vidUrl, type: 'video/mp4' }),
-        'Your browser does not support the video tag.'
-      ),
+        } }) : React__default.createElement(VideoMp4, { url: vidUrl, vidLoaded: vidLoaded }),
       React__default.createElement(
         'div',
         {

package/dist/esm/{AdSlot-0f82b407.js → AdSlot-dd75e467.js}

@@ -1080,7 +1080,8 @@ var DFPAdSlot = function DFPAdSlot(_ref) {
       _ref$targeting = _ref.targeting,
       targeting = _ref$targeting === undefined ? {} : _ref$targeting,
       _ref$refreshFlag = _ref.refreshFlag,
-      refreshFlag = _ref$refreshFlag === undefined ? true : _ref$refreshFlag;
+      refreshFlag = _ref$refreshFlag === undefined ? true : _ref$refreshFlag,
+      setShowAd = _ref.setShowAd;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -1117,6 +1118,9 @@ var DFPAdSlot = function DFPAdSlot(_ref) {
       sizeMapping: sizeMapping,
       targetingArguments: targeting,
       onSlotRender: function onSlotRender(eventData) {
+        if (slotId === 'floating-ad' && eventData && eventData.event && eventData.event.creativeId == null) {
+          setShowAd(false);
+        }
         setAdRendered(true);
         if (eventData && eventData.event) {
           var cID = eventData.event.creativeId;

package/dist/esm/DeckContent.js

@@ -22,7 +22,7 @@ import { i as imageUrlBuilder } from './index-73819142.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-0f82b407.js';
+import { D as DFPAdSlot } from './AdSlot-dd75e467.js';
 import './promise-683a9c54.js';
 
 var DeckContent = function (_React$Component) {

package/dist/esm/{GridContent-bb694d2c.js → GridContent-423f1e21.js}

@@ -15,7 +15,7 @@ import { withRouter } from 'next/router';
 import { i as imageUrlBuilder } from './index-73819142.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-0f82b407.js';
+import { D as DFPAdSlot } from './AdSlot-dd75e467.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-73819142.js';
 import './index-5f9f807a.js';
 import './entities-7cc3bf45.js';
 import './slicedToArray-d0a9593a.js';
-import './AdSlot-0f82b407.js';
+import './AdSlot-dd75e467.js';
 import './promise-683a9c54.js';
 import './get-b2201dc8.js';
-export { G as default } from './GridContent-bb694d2c.js';
+export { G as default } from './GridContent-423f1e21.js';

package/dist/esm/{Normal-e37f2efa.js → Normal-171a973b.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-0f82b407.js';
+import { D as DFPAdSlot } from './AdSlot-dd75e467.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-0f82b407.js';
+import './AdSlot-dd75e467.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-e37f2efa.js';
+export { T as default } from './Normal-171a973b.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-73819142.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-0f82b407.js';
-export { D as AdSlot, B as Beam } from './AdSlot-0f82b407.js';
+import { _ as _JSON$stringify, a as _asyncToGenerator, r as regenerator, D as DFPAdSlot, B as Beam } from './AdSlot-dd75e467.js';
+export { D as AdSlot, B as Beam } from './AdSlot-dd75e467.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-bb694d2c.js';
+export { A as AD, G as GridContent } from './GridContent-423f1e21.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-e37f2efa.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-e37f2efa.js';
+import { M as MdPictureAsPdf, T as TemplateNormal } from './Normal-171a973b.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-171a973b.js';
 import 'react-bootstrap/ListGroup';
 import Head from 'next/head';
 import Accordion from 'react-bootstrap/Accordion';
@@ -2877,7 +2877,7 @@ var ADFloatingFooter = function ADFloatingFooter(_ref) {
     showAd && React__default.createElement(
       'div',
       { className: 'floating-ad-wrapper ' + title },
-      React__default.createElement(DFPAdSlot, { className: className, slotId: slotId, networkID: networkID, sizes: sizes, adUnit: adUnit, targeting: adTargeting, refreshFlag: false }),
+      React__default.createElement(DFPAdSlot, { className: className, slotId: slotId, networkID: networkID, sizes: sizes, adUnit: adUnit, targeting: adTargeting, refreshFlag: false, setShowAd: setShowAd }),
       React__default.createElement(
         'div',
         { className: 'closeButton', onClick: function onClick() {
@@ -12797,6 +12797,115 @@ var Audio = function Audio(_ref) {
   return null;
 };
 
+var VideoMp4 = function VideoMp4(_ref) {
+  var url = _ref.url,
+      vidLoaded = _ref.vidLoaded;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      playReported = _useState2[0],
+      setPlayReported = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      endReported = _useState4[0],
+      setEndReported = _useState4[1];
+
+  var _useState5 = useState(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      intervalID = _useState6[0],
+      setIntervalID = _useState6[1];
+
+  var queueProgress = [];
+
+  var handleOnReady = function handleOnReady(event) {
+    var player = event.target;
+    var current = player.currentTime;
+    var duration = player.duration;
+    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.currentTime;
+    var duration = player.duration;
+    var queue = Math.floor(duration / 10);
+    var segment = Math.floor(current / queue);
+    if (!queueProgress.includes(segment)) {
+      Beam.report_beam_video('Segment', main_16, duration, current, segment);
+      queueProgress.push(segment);
+    }
+  };
+
+  var handleOnPlay = function handleOnPlay(event) {
+    // report play
+    var player = event.target;
+    var current = player.currentTime;
+    var duration = player.duration;
+    var queue = Math.floor(duration / 10);
+    var segment = Math.floor(current / queue);
+    Beam.report_beam_video('Play', main_16, duration, current, segment);
+
+    if (!playReported) {
+      event.persist();
+      setPlayReported(true);
+      var _intervalID = setInterval(function () {
+        handlePlayPercent(event.target);
+      }, 1000);
+      setIntervalID(_intervalID);
+    }
+  };
+
+  var handleOnEnd = function handleOnEnd(event) {
+    if (!endReported) {
+      var player = event.target;
+      var current = player.currentTime;
+      var duration = player.duration;
+      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 handleOnPause = function handleOnPause(event) {
+    var player = event.target;
+    var current = player.currentTime;
+    var duration = player.duration - current;
+    var queue = Math.floor(duration / 10);
+    var segment = Math.floor(current / queue);
+    Beam.report_beam_video('Pause', main_16, duration, current, segment);
+  };
+
+  return React__default.createElement(
+    'div',
+    null,
+    vidLoaded && React__default.createElement(
+      'video',
+      {
+        style: { width: '100%' },
+        controls: true,
+        onCanPlay: function onCanPlay(e) {
+          return handleOnReady(e);
+        },
+        onPause: function onPause(e) {
+          return handleOnPause(e);
+        },
+        onEnded: function onEnded(e) {
+          return handleOnEnd(e);
+        },
+        onPlay: function onPlay(e) {
+          return handleOnPlay(e);
+        } },
+      React__default.createElement('source', { src: url, type: 'video/mp4' }),
+      'Your browser does not support the video tag.'
+    )
+  );
+};
+
 var YouTubeGallery = function YouTubeGallery(_ref) {
   var nodes = _ref.nodes,
       client = _ref.client,
@@ -12833,20 +12942,25 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
       vidUrl = _useState8[0],
       setVidUrl = _useState8[1];
 
-  var _useState9 = useState('youtube'),
+  var _useState9 = useState(false),
       _useState10 = _slicedToArray(_useState9, 2),
-      vidType = _useState10[0],
-      setVidType = _useState10[1];
+      vidLoaded = _useState10[0],
+      setVidLoaded = _useState10[1];
 
-  var _useState11 = useState(''),
+  var _useState11 = useState('youtube'),
       _useState12 = _slicedToArray(_useState11, 2),
-      series = _useState12[0],
-      setSeries = _useState12[1];
+      vidType = _useState12[0],
+      setVidType = _useState12[1];
 
-  var _useState13 = useState([]),
+  var _useState13 = useState(''),
       _useState14 = _slicedToArray(_useState13, 2),
-      seriesData = _useState14[0],
-      setData = _useState14[1];
+      series = _useState14[0],
+      setSeries = _useState14[1];
+
+  var _useState15 = useState([]),
+      _useState16 = _slicedToArray(_useState15, 2),
+      seriesData = _useState16[0],
+      setData = _useState16[1];
   //variables
 
 
@@ -12884,9 +12998,11 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     } else {
       setSeries(seriesVid);
       setVidUrl(nodes.videos[seriesVid - 1].url);
+
       if (nodes.videos[0].type) {
         setVidType(nodes.videos[seriesVid - 1].type);
       }
+      setVidLoaded(true);
     }
     setData(data);
   }, []);
@@ -12903,13 +13019,17 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
 
   // This function is passed to the GroupDeck to change the youtube iframe src
   function setState(url, vidIndex) {
-    setVidUrl(url);
-    toggleSeries();
-    lib_3.refresh();
-    var newPath = '/' + get2 + '/' + get3 + ('?seriesVid=' + vidIndex);
-    var vidState = { vid_id: vidIndex };
-    window.history.pushState(vidState, '', newPath);
-    setSeries(vidIndex);
+    setVidLoaded(false);
+    setTimeout(function () {
+      setVidUrl(url);
+      toggleSeries();
+      lib_3.refresh();
+      var newPath = '/' + get2 + '/' + get3 + ('?seriesVid=' + vidIndex);
+      var vidState = { vid_id: vidIndex };
+      window.history.pushState(vidState, '', newPath);
+      setSeries(vidIndex);
+      setVidLoaded(true);
+    }, 100);
   }
 
   var handleOnReady = function handleOnReady(event) {
@@ -12970,7 +13090,6 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     var duration = player.getDuration();
     var queue = Math.floor(duration / 10);
     var segment = Math.floor(current / queue);
-
     if (!queueProgress.includes(segment)) {
       Beam.report_beam_video('Segment', main_16, duration, current, segment);
       queueProgress.push(segment);
@@ -12978,7 +13097,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
   };
 
   var handleOnPlay = function handleOnPlay(event) {
-    // report play 
+    // report play
     var player = event.target;
     var current = player.getCurrentTime();
     var duration = player.getDuration();
@@ -13022,12 +13141,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
       { className: 'video-block', style: { position: 'relative', overflow: 'hidden' } },
       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',
-        { style: { width: '100%' }, controls: true },
-        React__default.createElement('source', { src: vidUrl, type: 'video/mp4' }),
-        'Your browser does not support the video tag.'
-      ),
+        } }) : React__default.createElement(VideoMp4, { url: vidUrl, vidLoaded: vidLoaded }),
       React__default.createElement(
         'div',
         {

package/package.json

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