added markers support

airbnb · Mar 21, 2021 · 9d0965f · 9d0965f
1 parent 339cef1
commit 9d0965f
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 3 deletions.
diff --git a/player/index.html b/player/index.html
@@ -75,6 +75,7 @@
     <script src="js/utils/pooling/shapeCollection_pool.js"></script>
     <script src="js/utils/pooling/segments_length_pool.js"></script>
     <script src="js/utils/pooling/bezier_length_pool.js"></script>
+    <script src="js/utils/markers/markerParser.js"></script>
     <script src="js/renderers/BaseRenderer.js"></script>
     <script src="js/renderers/SVGRenderer.js"></script>
     <script src="js/renderers/CanvasRenderer.js" data-builds="full,canvas,canvas_light,canvas_worker"></script>

diff --git a/player/js/animation/AnimationItem.js b/player/js/animation/AnimationItem.js
@@ -1,7 +1,7 @@
 /* global createElementID, subframeEnabled, ProjectInterface, ImagePreloader, audioControllerFactory, extendPrototype, BaseEvent,
 CanvasRenderer, SVGRenderer, HybridRenderer, assetLoader, dataManager, expressionsPlugin, BMEnterFrameEvent, BMCompleteLoopEvent,
 BMCompleteEvent, BMSegmentStartEvent, BMDestroyEvent, BMEnterFrameEvent, BMCompleteLoopEvent, BMCompleteEvent, BMSegmentStartEvent,
-BMDestroyEvent, BMRenderFrameErrorEvent, BMConfigErrorEvent */
+BMDestroyEvent, BMRenderFrameErrorEvent, BMConfigErrorEvent, markerParser */
 
 var AnimationItem = function () {
   this._cbs = [];
@@ -34,6 +34,7 @@ var AnimationItem = function () {
   this.projectInterface = ProjectInterface();
   this.imagePreloader = new ImagePreloader();
   this.audioController = audioControllerFactory();
+  this.markers = [];
 };
 
 extendPrototype([BaseEvent], AnimationItem);
@@ -270,6 +271,7 @@ AnimationItem.prototype.configAnimation = function (animData) {
     this.frameRate = this.animationData.fr;
     this.frameMult = this.animationData.fr / 1000;
     this.renderer.searchExtraCompositions(animData.assets);
+    this.markers = markerParser(animData.markers || []);
     this.trigger('config_ready');
     this.preloadImages();
     this.loadSegments();
@@ -391,11 +393,28 @@ AnimationItem.prototype.stop = function (name) {
   this.setCurrentRawFrameValue(0);
 };
 
+AnimationItem.prototype.getMarkerData = function (markerName) {
+  var marker;
+  for (var i = 0; i < this.markers.length; i += 1) {
+    marker = this.markers[i];
+    if (marker.payload && marker.payload.name === markerName) {
+      return marker;
+    }
+  }
+  return null;
+};
+
 AnimationItem.prototype.goToAndStop = function (value, isFrame, name) {
   if (name && this.name !== name) {
     return;
   }
-  if (isFrame) {
+  var numValue = Number(value);
+  if (isNaN(numValue)) {
+    var marker = this.getMarkerData(value);
+    if (marker) {
+      this.goToAndStop(marker.time, true);
+    }
+  } else if (isFrame) {
     this.setCurrentRawFrameValue(value);
   } else {
     this.setCurrentRawFrameValue(value * this.frameModifier);
@@ -404,7 +423,22 @@ AnimationItem.prototype.goToAndStop = function (value, isFrame, name) {
 };
 
 AnimationItem.prototype.goToAndPlay = function (value, isFrame, name) {
-  this.goToAndStop(value, isFrame, name);
+  if (name && this.name !== name) {
+    return;
+  }
+  var numValue = Number(value);
+  if (isNaN(numValue)) {
+    var marker = this.getMarkerData(value);
+    if (marker) {
+      if (!marker.duration) {
+        this.goToAndStop(marker.time, true);
+      } else {
+        this.playSegments([marker.time, marker.time + marker.duration], true);
+      }
+    }
+  } else {
+    this.goToAndStop(numValue, isFrame, name);
+  }
   this.play();
 };
 

diff --git a/player/js/utils/markers/markerParser.js b/player/js/utils/markers/markerParser.js
@@ -0,0 +1,47 @@
+/* exported markerParser */
+
+var markerParser = (
+
+  function () {
+    function parsePayloadLines(payload) {
+      var lines = payload.split('\r\n');
+      var keys = {};
+      var line;
+      var keysCount = 0;
+      for (var i = 0; i < lines.length; i += 1) {
+        line = lines[i].split(':');
+        if (line.length === 2) {
+          keys[line[0]] = line[1].trim();
+          keysCount += 1;
+        }
+      }
+      if (keysCount === 0) {
+        throw new Error();
+      }
+      return keys;
+    }
+
+    return function (_markers) {
+      var markers = [];
+      for (var i = 0; i < _markers.length; i += 1) {
+        var _marker = _markers[i];
+        var markerData = {
+          time: _marker.tm,
+          duration: _marker.dr,
+        };
+        try {
+          markerData.payload = JSON.parse(_markers[i].cm);
+        } catch (_) {
+          try {
+            markerData.payload = parsePayloadLines(_markers[i].cm);
+          } catch (__) {
+            markerData.payload = {
+              name: _markers[i],
+            };
+          }
+        }
+        markers.push(markerData);
+      }
+      return markers;
+    };
+  }());
diff --git a/tasks/build.js b/tasks/build.js
@@ -211,6 +211,10 @@ const scripts = [
 		src: 'js/utils/pooling/bezier_length_pool.js',
 		builds: defaultBuilds
 	},
+	{
+		src: 'js/utils/markers/markerParser.js',
+		builds: defaultBuilds
+	},
 	{
 		src: 'js/renderers/BaseRenderer.js',
 		builds: defaultBuilds