@mjhls/mjh-framework 1.0.259 → 1.0.260

package/README.md

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

package/dist/cjs/index.js

@@ -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/index.js

@@ -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.259",
+  "version": "1.0.260",
   "description": "Foundation Framework",
   "author": "mjh-framework",
   "license": "MIT",