Upload 20 files

js/align.js

@@ -0,0 +1,371 @@
+// Center line reference
+function initLines() {
+  if (canvas.getItemById('center_h')) {
+    canvas.remove(canvas.getItemById('center_h'));
+    canvas.remove(canvas.getItemById('center_v'));
+  }
+  if (canvas.getItemById('line_h')) {
+    canvas.remove(canvas.getItemById('line_h'));
+    canvas.remove(canvas.getItemById('line_v'));
+  }
+
+  // Canvas center reference
+  canvas.add(
+    new fabric.Line(
+      [
+        canvas.get('width') / 2,
+        0,
+        canvas.get('width') / 2,
+        canvas.get('height'),
+      ],
+      {
+        opacity: 0,
+        selectable: false,
+        evented: false,
+        id: 'center_h',
+      }
+    )
+  );
+  canvas.add(
+    new fabric.Line(
+      [
+        0,
+        canvas.get('height') / 2,
+        canvas.get('width'),
+        canvas.get('height') / 2,
+      ],
+      {
+        opacity: 0,
+        selectable: false,
+        evented: false,
+        id: 'center_v',
+      }
+    )
+  );
+
+  // Canvas alignemnt guides
+  line_h = new fabric.Line(
+    [
+      canvas.get('width') / 2,
+      artboard.get('top'),
+      canvas.get('width') / 2,
+      artboard.get('height') + artboard.get('top'),
+    ],
+    {
+      stroke: 'red',
+      opacity: 0,
+      selectable: false,
+      evented: false,
+      id: 'line_h',
+    }
+  );
+  line_v = new fabric.Line(
+    [
+      artboard.get('left'),
+      canvas.get('height') / 2,
+      artboard.get('width') + artboard.get('left'),
+      canvas.get('height') / 2,
+    ],
+    {
+      stroke: 'red',
+      opacity: 0,
+      selectable: false,
+      evented: false,
+      id: 'line_v',
+    }
+  );
+  canvas.add(line_h);
+  canvas.add(line_v);
+}
+
+function alignControls(object, type) {
+  if (type == 'align-top') {
+    object.set(
+      'top',
+      artboard.get('top') +
+        (object.get('height') * object.get('scaleY')) / 2
+    );
+  } else if (type == 'align-center-v') {
+    object.set(
+      'top',
+      artboard.get('top') + artboard.get('height') / 2
+    );
+  } else if (type == 'align-bottom') {
+    object.set(
+      'top',
+      artboard.get('top') +
+        artboard.get('height') -
+        (object.get('height') * object.get('scaleY')) / 2
+    );
+  } else if (type == 'align-left') {
+    object.set(
+      'left',
+      artboard.get('left') +
+        (object.get('width') * object.get('scaleX')) / 2
+    );
+  } else if (type == 'align-center-h') {
+    object.set(
+      'left',
+      artboard.get('left') + artboard.get('width') / 2
+    );
+  } else {
+    object.set(
+      'left',
+      artboard.get('left') +
+        artboard.get('width') -
+        (object.get('width') * object.get('scaleX')) / 2
+    );
+  }
+}
+
+// Align object
+function alignObject() {
+  const type = $(this).attr('id');
+  const object = canvas.getActiveObject();
+  console.log(canvas.getActiveObject().type);
+  if (canvas.getActiveObject().type == 'activeSelection') {
+    const tempselection = canvas.getActiveObject();
+    canvas.discardActiveObject();
+    tempselection._objects.forEach(function (object) {
+      alignControls(object, type);
+      canvas.renderAll();
+      newKeyframe(
+        'left',
+        object,
+        currenttime,
+        object.get('left'),
+        true
+      );
+      newKeyframe(
+        'top',
+        object,
+        currenttime,
+        object.get('top'),
+        true
+      );
+    });
+    reselect(tempselection);
+  } else {
+    alignControls(object, type);
+    canvas.renderAll();
+    newKeyframe(
+      'left',
+      object,
+      currenttime,
+      object.get('left'),
+      true
+    );
+    newKeyframe('top', object, currenttime, object.get('top'), true);
+  }
+}
+$(document).on('click', '.align', alignObject);
+
+// Alignment guides
+function centerLines(e) {
+  if (!cropping) {
+    line_h.opacity = 0;
+    line_v.opacity = 0;
+    canvas.renderAll();
+    const snapZone = 5;
+    const obj_left = e.target.left;
+    const obj_top = e.target.top;
+    const obj_width = e.target.get('width') * e.target.get('scaleX');
+    const obj_height =
+      e.target.get('height') * e.target.get('scaleY');
+    canvas.forEachObject(function (obj, index, array) {
+      // Check for horizontal snapping
+      function checkHSnap(a, b, snapZone, e, type) {
+        if (a > b - snapZone && a < b + snapZone) {
+          line_h.opacity = 1;
+          line_h.bringToFront();
+          var value = b;
+          if (type == 1) {
+            value = b;
+          } else if (type == 2) {
+            value =
+              b -
+              (e.target.get('width') * e.target.get('scaleX')) / 2;
+          } else if (type == 3) {
+            value =
+              b +
+              (e.target.get('width') * e.target.get('scaleX')) / 2;
+          }
+          e.target
+            .set({
+              left: value,
+            })
+            .setCoords();
+          line_h
+            .set({
+              x1: b,
+              y1: artboard.get('top'),
+              x2: b,
+              y2: artboard.get('height') + artboard.get('top'),
+            })
+            .setCoords();
+          canvas.renderAll();
+        }
+      }
+
+      // Check for vertical snapping
+      function checkVSnap(a, b, snapZone, e, type) {
+        if (a > b - snapZone && a < b + snapZone) {
+          line_v.opacity = 1;
+          line_v.bringToFront();
+          var value = b;
+          if (type == 1) {
+            value = b;
+          } else if (type == 2) {
+            value =
+              b -
+              (e.target.get('height') * e.target.get('scaleY')) / 2;
+          } else if (type == 3) {
+            value =
+              b +
+              (e.target.get('height') * e.target.get('scaleY')) / 2;
+          }
+          e.target
+            .set({
+              top: value,
+            })
+            .setCoords();
+          line_v
+            .set({
+              y1: b,
+              x1: artboard.get('left'),
+              y2: b,
+              x2: artboard.get('width') + artboard.get('left'),
+            })
+            .setCoords();
+          canvas.renderAll();
+        }
+      }
+      if (obj != e.target && obj != line_h && obj != line_v) {
+        if (
+          obj.get('id') == 'center_h' ||
+          obj.get('id') == 'center_v'
+        ) {
+          var check1 = [[obj_left, obj.get('left'), 1]];
+          var check2 = [[obj_top, obj.get('top'), 1]];
+
+          for (var i = 0; i < check1.length; i++) {
+            checkHSnap(
+              check1[i][0],
+              check1[i][1],
+              snapZone,
+              e,
+              check1[i][2]
+            );
+            checkVSnap(
+              check2[i][0],
+              check2[i][1],
+              snapZone,
+              e,
+              check2[i][2]
+            );
+          }
+        } else {
+          var check1 = [
+            [obj_left, obj.get('left'), 1],
+            [
+              obj_left,
+              obj.get('left') +
+                (obj.get('width') * obj.get('scaleX')) / 2,
+              1,
+            ],
+            [
+              obj_left,
+              obj.get('left') -
+                (obj.get('width') * obj.get('scaleX')) / 2,
+              1,
+            ],
+            [obj_left + obj_width / 2, obj.get('left'), 2],
+            [
+              obj_left + obj_width / 2,
+              obj.get('left') +
+                (obj.get('width') * obj.get('scaleX')) / 2,
+              2,
+            ],
+            [
+              obj_left + obj_width / 2,
+              obj.get('left') -
+                (obj.get('width') * obj.get('scaleX')) / 2,
+              2,
+            ],
+            [obj_left - obj_width / 2, obj.get('left'), 3],
+            [
+              obj_left - obj_width / 2,
+              obj.get('left') +
+                (obj.get('width') * obj.get('scaleX')) / 2,
+              3,
+            ],
+            [
+              obj_left - obj_width / 2,
+              obj.get('left') -
+                (obj.get('width') * obj.get('scaleX')) / 2,
+              3,
+            ],
+          ];
+          var check2 = [
+            [obj_top, obj.get('top'), 1],
+            [
+              obj_top,
+              obj.get('top') +
+                (obj.get('height') * obj.get('scaleY')) / 2,
+              1,
+            ],
+            [
+              obj_top,
+              obj.get('top') -
+                (obj.get('height') * obj.get('scaleY')) / 2,
+              1,
+            ],
+            [obj_top + obj_height / 2, obj.get('top'), 2],
+            [
+              obj_top + obj_height / 2,
+              obj.get('top') +
+                (obj.get('height') * obj.get('scaleY')) / 2,
+              2,
+            ],
+            [
+              obj_top + obj_height / 2,
+              obj.get('top') -
+                (obj.get('height') * obj.get('scaleY')) / 2,
+              2,
+            ],
+            [obj_top - obj_height / 2, obj.get('top'), 3],
+            [
+              obj_top - obj_height / 2,
+              obj.get('top') +
+                (obj.get('height') * obj.get('scaleY')) / 2,
+              3,
+            ],
+            [
+              obj_top - obj_height / 2,
+              obj.get('top') -
+                (obj.get('height') * obj.get('scaleY')) / 2,
+              3,
+            ],
+          ];
+
+          for (var i = 0; i < check1.length; i++) {
+            checkHSnap(
+              check1[i][0],
+              check1[i][1],
+              snapZone,
+              e,
+              check1[i][2]
+            );
+            checkVSnap(
+              check2[i][0],
+              check2[i][1],
+              snapZone,
+              e,
+              check2[i][2]
+            );
+          }
+        }
+      }
+    });
+  }
+}

js/converter.js

@@ -0,0 +1,118 @@
+var workerPath =
+  'https://archive.org/download/ffmpeg_asm/ffmpeg_asm.js';
+
+function processInWebWorker() {
+  var blob = URL.createObjectURL(
+    new Blob(
+      [
+        'importScripts("' +
+          workerPath +
+          '");var now = Date.now;function print(text) {postMessage({"type" : "stdout","data" : text});};onmessage = function(event) {var message = event.data;if (message.type === "command") {var Module = {print: print,printErr: print,files: message.files || [],arguments: message.arguments || [],TOTAL_MEMORY: message.TOTAL_MEMORY||536870912  || false};postMessage({"type" : "start","data" : Module.arguments.join(" ")});postMessage({"type" : "stdout","data" : "Received command: " +Module.arguments.join(" ") +((Module.TOTAL_MEMORY ) ? ".  Processing with " + Module.TOTAL_MEMORY + " bits." : "")});var time = now();var result = ffmpeg_run(Module);var totalTime = now() - time;postMessage({"type" : "stdout","data" : "Finished processing (took " + totalTime + "ms)"});postMessage({"type" : "done","data" : result,"time" : totalTime});}};postMessage({"type" : "ready"});',
+      ],
+      {
+        type: 'application/javascript',
+      }
+    )
+  );
+
+  var worker = new Worker(blob);
+  URL.revokeObjectURL(blob);
+  return worker;
+}
+
+var worker;
+
+function convertStreams(videoBlob, setting) {
+  var aab;
+  var buffersReady;
+  var workerReady;
+  var posted;
+
+  var fileReader = new FileReader();
+  fileReader.onload = function () {
+    aab = this.result;
+    postMessage();
+  };
+  fileReader.readAsArrayBuffer(videoBlob);
+
+  if (!worker) {
+    worker = processInWebWorker();
+  }
+  worker.onmessage = function (event) {
+    var message = event.data;
+    if (message.type == 'ready') {
+      workerReady = true;
+      if (buffersReady) postMessage();
+    } else if (message.type == 'done') {
+      var result = message.data[0];
+      if (setting == 'gif') {
+        var blob = new File([result.data], 'test.gif', {
+          type: 'image/gif',
+        });
+        PostBlob(blob);
+      } else if (setting == 'mp4') {
+        var blob = new File([result.data], 'test.mp4', {
+          type: 'video/mp4',
+        });
+        PostBlob(blob);
+      }
+    }
+  };
+  var postMessage = function () {
+    posted = true;
+    if (setting == 'gif') {
+      worker.postMessage({
+        type: 'command',
+        arguments: '-i video.webm -r 24 output-10.gif'.split(' '),
+        files: [
+          {
+            data: new Uint8Array(aab),
+            name: 'video.webm',
+          },
+        ],
+      });
+    } else if (setting == 'mp4') {
+      worker.postMessage({
+        type: 'command',
+        arguments:
+          '-i video.webm -c:v mpeg4 -b:v 6400k -strict experimental output.mp4'.split(
+            ' '
+          ),
+        files: [
+          {
+            data: new Uint8Array(aab),
+            name: 'video.webm',
+          },
+        ],
+      });
+    }
+  };
+}
+
+function PostBlob(blob) {
+  var url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.style.display = 'none';
+  a.href = url;
+  a.download = name;
+  document.body.appendChild(a);
+  a.click();
+  recording = false;
+  currenttime = 0;
+  animate(false, 0);
+  $('#seekbar').offset({
+    left:
+      offset_left +
+      $('#inner-timeline').offset().left +
+      currenttime / timelinetime,
+  });
+  canvas.renderAll();
+  resizeCanvas();
+  if (background_audio != false) {
+    background_audio.pause();
+    background_audio = new Audio(background_audio.src);
+  }
+  $('#download-real').html('Download');
+  $('#download-real').removeClass('downloading');
+  updateRecordCanvas();
+}

js/database.js

@@ -0,0 +1,660 @@
+// For debugging purposes
+db.config.debug = false;
+
+// Check if a project exists
+function checkDB() {
+  db.collection('projects')
+    .get()
+    .then((project) => {
+      if (project.length == 0) {
+        canvas.clipPath = null;
+        const inst = canvas.toDatalessJSON([
+          'volume',
+          'audioSrc',
+          'defaultLeft',
+          'defaultTop',
+          'defaultScaleX',
+          'defaultScaleY',
+          'notnew',
+          'starttime',
+          'top',
+          'left',
+          'width',
+          'height',
+          'scaleX',
+          'scaleY',
+          'flipX',
+          'flipY',
+          'originX',
+          'originY',
+          'transformMatrix',
+          'stroke',
+          'strokeWidth',
+          'strokeDashArray',
+          'strokeLineCap',
+          'strokeDashOffset',
+          'strokeLineJoin',
+          'strokeMiterLimit',
+          'angle',
+          'opacity',
+          'fill',
+          'globalCompositeOperation',
+          'shadow',
+          'clipTo',
+          'visible',
+          'backgroundColor',
+          'skewX',
+          'skewY',
+          'fillRule',
+          'paintFirst',
+          'strokeUniform',
+          'rx',
+          'ry',
+          'selectable',
+          'hasControls',
+          'subTargetCheck',
+          'id',
+          'hoverCursor',
+          'defaultCursor',
+          'filesrc',
+          'isEditing',
+          'source',
+          'assetType',
+          'duration',
+          'inGroup',
+          'filters',
+        ]);
+        canvas.clipPath = artboard;
+        db.collection('projects').add({
+          id: 1,
+          canvas: JSON.stringify(inst),
+          keyframes: JSON.stringify(keyframes.slice()),
+          p_keyframes: JSON.stringify(p_keyframes.slice()),
+          objects: JSON.stringify(objects.slice()),
+          colormode: colormode,
+          speed: speed,
+          duration: duration,
+          currenttime: currenttime,
+          layercount: layer_count,
+          width: artboard.width,
+          height: artboard.height,
+          animatedtext: JSON.stringify(animatedtext),
+          groups: JSON.stringify(groups),
+          files: JSON.stringify(files),
+          activepreset: activepreset,
+        });
+        checkstatus = true;
+        getAssets();
+      } else {
+        loadProject();
+      }
+    });
+}
+
+// Automatically save project (locally)
+function autoSave() {
+  if (checkstatus) {
+    canvas.clipPath = null;
+    objects.forEach(async function (object) {
+      var obj = canvas.getItemById(object.id);
+      if (obj.filters) {
+        if (obj.filters.length > 0) {
+          object.filters = [];
+          obj.filters.forEach(function (filter) {
+            if (
+              filter.type == 'BlackWhite' ||
+              filter.type == 'Invert' ||
+              filter.type == 'Sepia' ||
+              filter.type == 'Kodachrome' ||
+              filter.type == 'Polaroid' ||
+              filter.type == 'Technicolor' ||
+              filter.type == 'Brownie' ||
+              filter.type == 'Vintage'
+            ) {
+              object.filters.push({ type: filter.type });
+            } else if (filter.type == 'Brightness') {
+              object.filters.push({
+                type: filter.type,
+                value: filter.brightness,
+              });
+            } else if (filter.type == 'Contrast') {
+              object.filters.push({
+                type: filter.type,
+                value: filter.contrast,
+              });
+            } else if (filter.type == 'Vibrance') {
+              object.filters.push({
+                type: filter.type,
+                value: filter.vibrance,
+              });
+            } else if (filter.type == 'Saturation') {
+              object.filters.push({
+                type: filter.type,
+                value: filter.saturation,
+              });
+            } else if (filter.type == 'HueRotation') {
+              object.filters.push({
+                type: filter.type,
+                value: filter.rotation,
+              });
+            } else if (filter.type == 'Blur') {
+              object.filters.push({
+                type: filter.type,
+                value: filter.blur,
+              });
+            } else if (filter.type == 'Noise') {
+              object.filters.push({
+                type: filter.type,
+                value: filter.noise,
+              });
+            } else if (filter.type == 'RemoveColor') {
+              object.filters.push({
+                type: filter.type,
+                distance: filter.distance,
+                color: filter.color,
+              });
+            }
+          });
+          obj.filters = [];
+          obj.applyFilters();
+          var backend = fabric.filterBackend;
+          if (backend && backend.evictCachesForKey) {
+            backend.evictCachesForKey(obj.cacheKey);
+            backend.evictCachesForKey(obj.cacheKey + '_filtered');
+          }
+          if (
+            obj.filters.length > 0 &&
+            obj.get('id').indexOf('Video') >= 0
+          ) {
+            await obj.setElement(obj.saveElem);
+          }
+        } else {
+          object.filters = [];
+        }
+      } else {
+        object.filters = [];
+      }
+    });
+    const inst = canvas.toDatalessJSON([
+      'volume',
+      'audioSrc',
+      'defaultLeft',
+      'defaultTop',
+      'defaultScaleX',
+      'defaultScaleY',
+      'notnew',
+      'starttime',
+      'top',
+      'left',
+      'width',
+      'height',
+      'scaleX',
+      'scaleY',
+      'flipX',
+      'flipY',
+      'originX',
+      'originY',
+      'transformMatrix',
+      'stroke',
+      'strokeWidth',
+      'strokeDashArray',
+      'strokeLineCap',
+      'strokeDashOffset',
+      'strokeLineJoin',
+      'strokeMiterLimit',
+      'angle',
+      'opacity',
+      'fill',
+      'globalCompositeOperation',
+      'shadow',
+      'clipTo',
+      'visible',
+      'backgroundColor',
+      'skewX',
+      'skewY',
+      'fillRule',
+      'paintFirst',
+      'strokeUniform',
+      'rx',
+      'ry',
+      'selectable',
+      'hasControls',
+      'subTargetCheck',
+      'id',
+      'hoverCursor',
+      'defaultCursor',
+      'filesrc',
+      'isEditing',
+      'source',
+      'assetType',
+      'duration',
+      'inGroup',
+    ]);
+    canvas.clipPath = artboard;
+    db.collection('projects')
+      .doc({ id: 1 })
+      .update({
+        canvas: JSON.stringify(inst),
+        keyframes: JSON.stringify(keyframes.slice()),
+        p_keyframes: JSON.stringify(p_keyframes.slice()),
+        objects: JSON.stringify(objects.slice()),
+        colormode: colormode,
+        duration: duration,
+        currenttime: currenttime,
+        layercount: layer_count,
+        speed: speed,
+        audiosrc: background_key,
+        animatedtext: JSON.stringify(animatedtext),
+        files: JSON.stringify(files),
+        groups: JSON.stringify(groups),
+        activepreset: activepreset,
+        width: artboard.width,
+        height: artboard.height,
+      });
+    objects.forEach(function (object) {
+      replaceSource(canvas.getItemById(object.id), canvas);
+    });
+  }
+}
+
+var isSameSet = function (arr1, arr2) {
+  return (
+    $(arr1).not(arr2).length === 0 && $(arr2).not(arr1).length === 0
+  );
+};
+
+function loadProject() {
+  db.collection('projects')
+    .doc({ id: 1 })
+    .get()
+    .then((document) => {
+      var project = document;
+      keyframes = JSON.parse(project.keyframes);
+      p_keyframes = JSON.parse(project.p_keyframes);
+      objects = JSON.parse(project.objects);
+      files = JSON.parse(project.files);
+      colormode = project.colormode;
+      duration = project.duration;
+      layer_count = project.layercount;
+      speed = project.speed;
+      animatedtext = JSON.parse(project.animatedtext);
+      animatedtext.forEach(function (text, index) {
+        var temp = new AnimatedText(text.text, text.props);
+        temp.assignTo(text.id);
+        animatedtext[index] = temp;
+      });
+      $('#speed span').html(speed.toFixed(1) + 'x');
+      groups = JSON.parse(project.groups);
+      activepreset = project.activepreset;
+      currenttime = 0;
+      canvas.clipPath = null;
+      canvas.clear();
+      fabric.filterBackend = webglBackend;
+      f = fabric.Image.filters;
+      canvas.loadFromJSON(JSON.parse(project.canvas), function () {
+        canvas.clipPath = artboard;
+        canvas.getItemById('line_h').set({ opacity: 0 });
+        canvas.getItemById('line_v').set({ opacity: 0 });
+        canvas.renderAll();
+        $('.object-props').remove();
+        $('.layer').remove();
+        objects.forEach(function (object) {
+          var animatethis = false;
+          if (object.animate.length > 5) {
+            if (isSameSet(object.animate, props)) {
+              animatethis = true;
+            }
+          }
+          renderLayer(canvas.getItemById(object.id), animatethis);
+          if (
+            !canvas.getItemById(object.id).get('assetType') ||
+            canvas.getItemById(object.id).get('assetType') != 'audio'
+          ) {
+            props.forEach(function (prop) {
+              if (
+                prop != 'top' &&
+                prop != 'scaleY' &&
+                prop != 'width' &&
+                prop != 'height' &&
+                prop != 'shadow.offsetX' &&
+                prop != 'shadow.offsetY' &&
+                prop != 'shadow.opacity' &&
+                prop != 'shadow.blur' &&
+                prop != 'lineHeight'
+              ) {
+                renderProp(prop, canvas.getItemById(object.id));
+              }
+            });
+            replaceSource(canvas.getItemById(object.id), canvas);
+          } else {
+            renderProp('volume', canvas.getItemById(object.id));
+          }
+        });
+        keyframes.forEach(function (keyframe) {
+          if (
+            keyframe.name != 'top' &&
+            keyframe.name != 'scaleY' &&
+            keyframe.name != 'width' &&
+            keyframe.name != 'height' &&
+            keyframe.name != 'shadow.offsetX' &&
+            keyframe.name != 'shadow.offsetY' &&
+            keyframe.name != 'shadow.opacity' &&
+            keyframe.name != 'shadow.blur' &&
+            keyframe.name != 'lineHeight'
+          ) {
+            renderKeyframe(
+              canvas.getItemById(keyframe.id),
+              keyframe.name,
+              keyframe.t
+            );
+          }
+        });
+        artboard.set({
+          width: project.width,
+          height: project.height,
+        });
+        canvas.renderAll();
+        resizeCanvas();
+        updatePanel();
+
+        animatedtext.forEach(function (text, index) {
+          text.reset(text.text, text.props, canvas);
+          canvas.renderAll();
+        });
+
+        // Set defaults
+        setDuration(duration);
+        setTimelineZoom(5);
+        checkstatus = true;
+
+        getAssets();
+
+        canvas.renderAll();
+
+        animate(false, 0);
+
+        //newLottieAnimation(100,100);
+      });
+    });
+}
+
+function blobToBase64(blob) {
+  return new Promise((resolve, _) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result);
+    reader.readAsDataURL(blob);
+  });
+}
+
+async function saveFile(thumbnail, file, type, name, place, hidden) {
+  file = await blobToBase64(file);
+  thumbnail = await blobToBase64(thumbnail);
+  uploading = false;
+  var key = Math.random().toString(36).substr(2, 9);
+  db.collection('assets').add({
+    key: key,
+    src: file,
+    thumb: thumbnail,
+    name: name,
+    type: type,
+    hidden: hidden,
+  });
+  if (type === 'image') {
+    uploaded_images.push({
+      src: file,
+      thumb: thumbnail,
+      key: key,
+      type: 'image',
+      hidden: false,
+    });
+    populateGrid('images-tab');
+  } else if (type === 'video') {
+    uploaded_videos.push({
+      src: file,
+      thumb: thumbnail,
+      key: key,
+      type: 'video',
+      hidden: false,
+    });
+    populateGrid('videos-tab');
+  }
+  $('#upload-button').html(
+    "<img src='assets/upload.svg'> Upload media"
+  );
+  $('#upload-button').removeClass('uploading');
+  if (place) {
+    loadImage(
+      file,
+      artboard.get('left') + artboard.get('width') / 2,
+      artboard.get('top') + artboard.get('height') / 2,
+      200
+    );
+  }
+  save();
+}
+
+async function savePixabayImage(url, xpos, ypos, width) {
+  $('#load-image').addClass('loading-active');
+  fetch(url)
+    .then((res) => res.blob())
+    .then((blob) => {
+      url = blob;
+      var reader = new FileReader();
+      reader.readAsDataURL(blob);
+      reader.onloadend = function () {
+        url = reader.result;
+        var key = Math.random().toString(36).substr(2, 9);
+        db.collection('assets').add({
+          key: key,
+          src: url,
+          thumb: url,
+          name: 'test',
+          type: 'image',
+          hidden: true,
+        });
+        loadImage(url, xpos, ypos, width, false);
+      };
+    });
+}
+
+async function saveAudio(url) {
+  var reader = new FileReader();
+  reader.readAsDataURL(url);
+  reader.onloadend = function () {
+    var key = Math.random().toString(36).substr(2, 9);
+    db.collection('assets').add({
+      key: key,
+      src: reader.result,
+      name: 'test',
+      type: 'audio',
+      hidden: true,
+    });
+    newAudioLayer(reader.result);
+  };
+}
+
+async function savePixabayVideo(url, thumb, x, y) {
+  $('#load-video').addClass('loading-active');
+  fetch(url)
+    .then((res) => res.blob())
+    .then((blob) => {
+      var reader = new FileReader();
+      reader.readAsDataURL(blob);
+      reader.onloadend = function () {
+        fetch(thumb)
+          .then((res) => res.blob())
+          .then((blob2) => {
+            var reader2 = new FileReader();
+            reader2.readAsDataURL(blob2);
+            reader2.onloadend = function () {
+              url = reader.result;
+              thumb = reader2.result;
+              var key = Math.random().toString(36).substr(2, 9);
+              db.collection('assets').add({
+                key: key,
+                src: url,
+                thumb: thumb,
+                name: 'test',
+                type: 'video',
+                hidden: true,
+              });
+              loadVideo(url, x, y, false);
+            };
+          });
+      };
+    });
+}
+
+function deleteAsset(key) {
+  db.collection('assets')
+    .doc({ key: key })
+    .get()
+    .then((asset) => {
+      var temp = files.filter((x) => x.file == asset.src);
+      if (temp.length > 0) {
+        temp.forEach(function (file) {
+          deleteObject(canvas.getItemById(file.name));
+          files = $.grep(files, function (a) {
+            return a != file;
+          });
+        });
+      }
+      db.collection('assets').doc({ key: key }).delete();
+      if (asset.type == 'image') {
+        uploaded_images = uploaded_images.filter(function (obj) {
+          return obj.key !== key;
+        });
+        populateGrid('images-tab');
+      } else {
+        uploaded_videos = uploaded_videos.filter(function (obj) {
+          return obj.key !== key;
+        });
+        populateGrid('videos-tab');
+      }
+    });
+}
+
+function getAssets() {
+  db.collection('assets')
+    .get()
+    .then((assets) => {
+      // Sometimes the assets aren't ready when importing, really annoying
+      if (assets === undefined) {
+        getAssets();
+      } else if (assets.length > 0) {
+        assets.forEach(function (asset) {
+          if (asset.type == 'image') {
+            uploaded_images.push({
+              src: asset.src,
+              thumb: asset.thumb,
+              key: asset.key,
+              type: 'image',
+              hidden: asset.hidden,
+            });
+          } else if (asset.type == 'video') {
+            uploaded_videos.push({
+              src: asset.src,
+              thumb: asset.thumb,
+              key: asset.key,
+              type: 'video',
+              hidden: asset.hidden,
+            });
+          }
+        });
+      }
+    });
+}
+
+function readTextFile(file, callback) {
+  var rawFile = new XMLHttpRequest();
+  rawFile.overrideMimeType('application/json');
+  rawFile.open('GET', file, true);
+  rawFile.onreadystatechange = function () {
+    if (rawFile.readyState === 4 && rawFile.status == '200') {
+      callback(rawFile.responseText);
+    }
+  };
+  rawFile.send(null);
+}
+
+async function importProject(e) {
+  $('#import-project span').html('Importing...');
+  var file = e.target.files[0];
+  var path = (window.URL || window.webkitURL).createObjectURL(file);
+  readTextFile(path, function (text) {
+    var data = JSON.parse(text);
+    delete data.project[0].id;
+    if (data.project.length > 0) {
+      if (data.assets.length > 0) {
+        data.assets.forEach(function (asset) {
+          delete asset.id;
+          db.collection('assets').add(asset);
+        });
+      }
+      db.collection('projects')
+        .doc({ id: 1 })
+        .update(data.project[0])
+        .then((response) => {
+          $('#import-project span').html('Import');
+          hideModals();
+          loadProject();
+        });
+    } else {
+      alert('Wrong file type');
+    }
+  });
+}
+
+function importHandle() {
+  $('#import').click();
+}
+
+function exportProject() {
+  $('#export-project span').html('Exporting...');
+  db.collection('projects')
+    .get()
+    .then((project) => {
+      if (project.length > 0) {
+        db.collection('assets')
+          .get()
+          .then((assets) => {
+            var exportarr = { project: project, assets: assets };
+            $('<a />', {
+              download: 'data.json',
+              href:
+                'data:application/json,' +
+                encodeURIComponent(JSON.stringify(exportarr)),
+            })
+              .appendTo('body')
+              .click(function () {
+                $(this).remove();
+                $('#export-project span').html('Export');
+              })[0]
+              .click();
+          });
+      } else {
+        alert('Empty project');
+        $('#export-project span').html('Export');
+      }
+    });
+}
+
+$(document).on('click', '#import-project', importHandle);
+$(document).on('click', '#export-project', exportProject);
+$(document).on('change', '#import', importProject);
+
+function clearProject() {
+  if (
+    window.confirm(
+      'Are you sure you want to clear this project? This action cannot be undone.'
+    )
+  ) {
+    db.collection('projects').delete();
+    db.collection('assets').delete();
+    window.setTimeout(function () {
+      location.reload();
+    }, 1000);
+  }
+  hideMore();
+}
+$(document).on('click', '#clear-project', clearProject);

js/encode-worker.js

@@ -0,0 +1,96 @@
+importScripts('./webm-writer2.js');
+
+let webmWriter = null;
+let fileWritableStream = null;
+let frameReader = null;
+
+async function startRecording(
+  fileHandle,
+  frameStream,
+  trackSettings
+) {
+  let frameCounter = 0;
+
+  fileWritableStream = await fileHandle.createWritable();
+
+  webmWriter = new WebMWriter({
+    fileWriter: fileWritableStream,
+    codec: 'VP9',
+    width: trackSettings.width,
+    height: trackSettings.height,
+  });
+
+  frameReader = frameStream.getReader();
+
+  const init = {
+    output: (chunk) => {
+      webmWriter.addFrame(chunk);
+    },
+    error: (e) => {
+      console.log(e.message);
+      stopRecording();
+    },
+  };
+
+  const config = {
+    codec: 'vp09.00.10.08',
+    width: trackSettings.width,
+    height: trackSettings.height,
+    bitrate: 10e6,
+  };
+
+  let encoder = new VideoEncoder(init);
+  let support = await VideoEncoder.isConfigSupported(config);
+  console.assert(support.supported);
+  encoder.configure(config);
+
+  frameReader
+    .read()
+    .then(async function processFrame({ done, value }) {
+      let frame = value;
+
+      if (done) {
+        await encoder.flush();
+        encoder.close();
+        return;
+      }
+
+      if (encoder.encodeQueueSize <= 30) {
+        if (++frameCounter % 20 == 0) {
+          console.log(frameCounter + ' frames processed');
+        }
+
+        const insert_keyframe = frameCounter % 150 == 0;
+        encoder.encode(frame, { keyFrame: insert_keyframe });
+      } else {
+        console.log('dropping frame, encoder falling behind');
+      }
+
+      frame.close();
+      frameReader.read().then(processFrame);
+    });
+}
+
+async function stopRecording() {
+  await frameReader.cancel();
+  await webmWriter.complete();
+  fileWritableStream.close();
+  frameReader = null;
+  webmWriter = null;
+  fileWritableStream = null;
+}
+
+self.addEventListener('message', function (e) {
+  switch (e.data.type) {
+    case 'start':
+      startRecording(
+        e.data.fileHandle,
+        e.data.frameStream,
+        e.data.trackSettings
+      );
+      break;
+    case 'stop':
+      stopRecording();
+      break;
+  }
+});

js/events.js

@@ -0,0 +1,1022 @@
+$(document).ready(function () {
+  // An object is being moved in the canvas
+  canvas.on('object:moving', function (e) {
+    e.target.hasControls = false;
+    centerLines(e);
+    if (cropping) {
+      if (
+        canvas.getItemById('crop').isContainedWithinObject(cropobj)
+      ) {
+        cropleft = canvas.getItemById('crop').get('left');
+        croptop = canvas.getItemById('crop').get('top');
+        cropscalex = canvas.getItemById('crop').get('scaleX');
+        cropscaley = canvas.getItemById('crop').get('scaleY');
+      }
+      crop(canvas.getItemById('cropped'));
+    } else if (
+      lockmovement &&
+      e.e.shiftKey &&
+      canvas.getActiveObject()
+    ) {
+      if (canvasx < shiftx + 30 && canvasx > shiftx - 30) {
+        canvas.getActiveObject().set({ left: shiftx });
+        canvas.getActiveObject().lockMovementX = true;
+        canvas.getActiveObject().lockMovementY = false;
+      } else {
+        canvas.getActiveObject().set({ top: shifty });
+        canvas.getActiveObject().lockMovementX = false;
+        canvas.getActiveObject().lockMovementY = true;
+      }
+    } else if (canvas.getActiveObject() && !e.e.shiftKey) {
+      lockmovement = false;
+      canvas.getActiveObject().lockMovementX = false;
+      canvas.getActiveObject().lockMovementY = false;
+    }
+  });
+
+  // An object is being scaled in the canvas
+  canvas.on('object:scaling', function (e) {
+    e.target.hasControls = false;
+    centerLines(e);
+    if (cropping) {
+      if (
+        canvas.getItemById('crop').isContainedWithinObject(cropobj)
+      ) {
+        cropleft = canvas.getItemById('crop').get('left');
+        croptop = canvas.getItemById('crop').get('top');
+        cropscalex = canvas.getItemById('crop').get('scaleX');
+        cropscaley = canvas.getItemById('crop').get('scaleY');
+      }
+      crop(canvas.getItemById('cropped'));
+    }
+  });
+
+  // An object is being resized in the canvas
+  canvas.on('object:resizing', function (e) {
+    e.target.hasControls = false;
+    centerLines(e);
+    if (cropping) {
+      if (
+        canvas.getItemById('crop').isContainedWithinObject(cropobj)
+      ) {
+        cropleft = canvas.getItemById('crop').get('left');
+        croptop = canvas.getItemById('crop').get('top');
+        cropscalex = canvas.getItemById('crop').get('scaleX');
+        cropscaley = canvas.getItemById('crop').get('scaleY');
+      }
+      crop(canvas.getItemById('cropped'));
+    }
+  });
+
+  // An object is being rotated in the canvas
+  canvas.on('object:rotating', function (e) {
+    if (e.e.shiftKey) {
+      canvas.getActiveObject().snapAngle = 15;
+    } else {
+      canvas.getActiveObject().snapAngle = 0;
+    }
+    e.target.hasControls = false;
+  });
+
+  // An object has been modified in the canvas
+  canvas.on('object:modified', function (e) {
+    e.target.hasControls = true;
+    if (!editinggroup && !cropping) {
+      canvas.getActiveObject().lockMovementX = false;
+      canvas.getActiveObject().lockMovementY = false;
+      canvas.renderAll();
+      if (e.target.type == 'activeSelection') {
+        const tempselection = canvas.getActiveObject();
+        canvas.discardActiveObject();
+        e.target._objects.forEach(function (object) {
+          autoKeyframe(object, e, true);
+        });
+        reselect(tempselection);
+      } else {
+        autoKeyframe(e.target, e, false);
+      }
+      updatePanelValues();
+      save();
+    }
+    if (cropping) {
+      var obj = e.target;
+      checkCrop(obj);
+    }
+  });
+
+  // A selection has been updated in the canvas
+  canvas.on('selection:updated', function (e) {
+    updatePanel(true);
+    updatePanelValues();
+    updateSelection(e);
+    closeFilters();
+  });
+
+  // A selection has been made in the canvas
+  canvas.on('selection:created', function (e) {
+    shiftx = canvas.getActiveObject().get('left');
+    shifty = canvas.getActiveObject().get('top');
+    if (!editingpanel) {
+      updatePanel(true);
+    }
+    updateSelection(e);
+    canvas.renderAll();
+    closeFilters();
+  });
+
+  // A selection has been cleared in the canvas
+  canvas.on('selection:cleared', function (e) {
+    if (!editingpanel && !setting) {
+      updatePanel(false);
+    }
+    $('.layer-selected').removeClass('layer-selected');
+    if (cropping) {
+      crop(cropobj);
+    }
+    closeFilters();
+  });
+
+  function kFormatter(num) {
+    return Math.abs(num) > 999
+      ? Math.sign(num) * (Math.abs(num) / 1000).toFixed(1) + 'k'
+      : Math.sign(num) * Math.abs(num);
+  }
+
+  // Zoom in/out of the canvas
+  canvas.on('mouse:wheel', function (opt) {
+    var delta = opt.e.deltaY;
+    var zoom = canvas.getZoom();
+    zoom *= 0.999 ** delta;
+    $('#zoom-level span').html(
+      kFormatter((zoom * 100).toFixed(0)) + '%'
+    );
+    if (zoom > 20) zoom = 20;
+    if (zoom < 0.01) zoom = 0.01;
+    canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
+    opt.e.preventDefault();
+    opt.e.stopPropagation();
+  });
+
+  // Start panning if space is down or hand tool is enabled
+  canvas.on('mouse:down', function (opt) {
+    var e = opt.e;
+    if (spaceDown || handtool) {
+      this.isDragging = true;
+      this.selection = false;
+      this.lastPosX = e.clientX;
+      this.lastPosY = e.clientY;
+    }
+    if (opt.target) {
+      opt.target.hasControls = true;
+      wip = false;
+    }
+  });
+
+  // Pan while dragging mouse
+  canvas.on('mouse:move', function (opt) {
+    var pointer = canvas.getPointer(opt.e);
+    canvasx = pointer.x;
+    canvasy = pointer.y;
+    if (this.isDragging) {
+      var e = opt.e;
+      var vpt = this.viewportTransform;
+      vpt[4] += e.clientX - this.lastPosX;
+      vpt[5] += e.clientY - this.lastPosY;
+      this.requestRenderAll();
+      this.lastPosX = e.clientX;
+      this.lastPosY = e.clientY;
+    }
+  });
+
+  // Stop panning
+  canvas.on('mouse:up', function (opt) {
+    this.setViewportTransform(this.viewportTransform);
+    this.isDragging = false;
+    this.selection = true;
+    line_h.opacity = 0;
+    line_v.opacity = 0;
+  });
+
+  // Detect mouse over canvas (for dragging objects from the library)
+  canvas.on('mouse:move', function (e) {
+    overCanvas = true;
+    if (
+      e.target &&
+      !canvas.getActiveObject() &&
+      draggingPanel &&
+      e.target.type == 'image'
+    ) {
+      wip = true;
+      e.target.hasControls = false;
+      canvas.setActiveObject(e.target);
+    }
+  });
+  canvas.on('mouse:out', function (e) {
+    overCanvas = false;
+    if (wip) {
+      e.target.hasControls = true;
+      canvas.discardActiveObject();
+      wip = false;
+      canvas.renderAll();
+    }
+  });
+
+  // Double click on image to get into cropping mode
+  fabric.util.addListener(
+    canvas.upperCanvasEl,
+    'dblclick',
+    function (e) {
+      var target = canvas.findTarget(e);
+      if (target) {
+        if (target.type == 'image') {
+          cropImage(target);
+        }
+      }
+    }
+  );
+
+  // Key event handling
+  $(document)
+    .keyup(function (e) {
+      // Space bar (panning and playback)
+      if (
+        e.keyCode == 32 &&
+        !editinglayer &&
+        !editingproject &&
+        $(e.target)[0].tagName != 'INPUT'
+      ) {
+        spacerelease = true;
+        spaceDown = false;
+        canvas.defaultCursor = 'default';
+        canvas.renderAll();
+        if (!spacehold) {
+          if (
+            !(
+              canvas.getActiveObject() &&
+              canvas.getActiveObject().isEditing
+            )
+          ) {
+            if (paused) {
+              play();
+            } else {
+              pause();
+            }
+          }
+        } else {
+          if (!handtool) {
+            $('#hand-tool').removeClass('hand-active');
+            $('#hand-tool')
+              .find('img')
+              .attr('src', 'assets/hand-tool.svg');
+          }
+        }
+        spacehold = false;
+      }
+      // Delete object/keyframe
+      if (
+        (e.keyCode == 46 ||
+          e.key == 'Delete' ||
+          e.code == 'Delete' ||
+          e.key == 'Backspace') &&
+        !focus &&
+        !editinglayer
+      ) {
+        if (
+          $('.show-properties').length > 0 ||
+          shiftkeys.length > 0
+        ) {
+          deleteKeyframe();
+        } else {
+          deleteSelection();
+        }
+      }
+      // Shift key is up (stop locking horizontal/vertical object movement)
+      if (e.keyCode == 16) {
+        lockmovement = false;
+        shiftdown = false;
+      }
+    })
+    .keydown(function (e) {
+      // Space bar (panning and playback)
+      if (
+        e.keyCode == 32 &&
+        !editinglayer &&
+        !editingproject &&
+        $(e.target)[0].tagName != 'INPUT'
+      ) {
+        spacerelease = false;
+        spaceDown = true;
+        canvas.defaultCursor = 'grab';
+        canvas.renderAll();
+        window.setTimeout(function () {
+          if (!spacerelease) {
+            spacehold = true;
+            if (!handtool) {
+              $('#hand-tool').addClass('hand-active');
+              $('#hand-tool')
+                .find('img')
+                .attr('src', 'assets/hand-tool-active.svg');
+            }
+          }
+        }, 1000);
+      }
+      // Redo
+      if (e.which === 90 && (e.ctrlKey || e.metaKey) && e.shiftKey) {
+        undoRedo(redo, undo, redoarr, undoarr);
+      }
+      // Undo
+      if (e.which === 90 && (e.ctrlKey || e.metaKey)) {
+        undoRedo(undo, redo, undoarr, redoarr);
+      }
+      // Duplicate object
+      if (e.which === 68 && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        if (canvas.getActiveObject()) {
+          clipboard = canvas.getActiveObject();
+          copyObject();
+        }
+      }
+      // Shift key (Lock horizontal/vertical movement for objects)
+      if (e.shiftKey) {
+        shiftdown = true;
+        lockmovement = true;
+        if (canvas.getActiveObject()) {
+          shiftx = canvas.getActiveObject().get('left');
+          shifty = canvas.getActiveObject().get('top');
+        }
+      }
+      // Return (save layer name)
+      if (e.keyCode === 13 && editinglayer) {
+        saveLayerName();
+      }
+      // Return (save project name)
+      if (e.keyCode === 13 && editingproject) {
+        saveProjectName();
+      }
+      // Left arrow key (move object to the left)
+      if (e.keyCode === 37 && canvas.getActiveObject()) {
+        var obj = canvas.getActiveObject();
+        var step = 2;
+        // Bigger step if shift is down
+        if (e.shiftKey) {
+          step = 7;
+        }
+        obj.left = obj.left - step;
+        canvas.renderAll();
+        autoKeyframe(obj, { action: 'drag' }, false);
+      }
+      // Up arrow key (move object up)
+      if (e.keyCode === 38 && canvas.getActiveObject()) {
+        var obj = canvas.getActiveObject();
+        var step = 2;
+        // Bigger step if shift is down
+        if (e.shiftKey) {
+          step = 7;
+        }
+        obj.top = obj.top - step;
+        canvas.renderAll();
+        autoKeyframe(obj, { action: 'drag' }, false);
+      }
+      // Right arrow key  (move object to the right)
+      if (e.keyCode === 39 && canvas.getActiveObject()) {
+        var obj = canvas.getActiveObject();
+        var step = 2;
+        // Bigger step if shift is down
+        if (e.shiftKey) {
+          step = 7;
+        }
+        obj.left = obj.left + step;
+        canvas.renderAll();
+        autoKeyframe(obj, { action: 'drag' }, false);
+      }
+      // Down arrow key   (move object down)
+      if (e.keyCode === 40 && canvas.getActiveObject()) {
+        var obj = canvas.getActiveObject();
+        var step = 2;
+        // Bigger step if shift is down
+        if (e.shiftKey) {
+          step = 7;
+        }
+        obj.top = obj.top + step;
+        canvas.renderAll();
+        autoKeyframe(obj, { action: 'drag' }, false);
+      }
+
+      // Move object up layer list
+      if (
+        e.keyCode === 221 &&
+        canvas.getActiveObjects() &&
+        e.metaKey
+      ) {
+        if (canvas.getActiveObjects().length == 1) {
+          var obj = canvas.getActiveObject();
+          $(".layer[data-object='" + obj.id + "']")
+            .prev()
+            .insertAfter($(".layer[data-object='" + obj.id + "']"));
+          $('#' + obj.id)
+            .prev()
+            .insertAfter($('#' + obj.id));
+          orderLayers();
+        } else {
+          canvas.getActiveObjects().forEach(function (obj) {
+            $(".layer[data-object='" + obj.id + "']")
+              .prev()
+              .insertAfter($(".layer[data-object='" + obj.id + "']"));
+            $('#' + obj.id)
+              .prev()
+              .insertAfter($('#' + obj.id));
+            orderLayers();
+          });
+        }
+      }
+
+      // Move object down layer list
+      if (
+        e.keyCode === 219 &&
+        canvas.getActiveObjects() &&
+        e.metaKey
+      ) {
+        if (canvas.getActiveObjects().length == 1) {
+          var obj = canvas.getActiveObject();
+          $(".layer[data-object='" + obj.id + "']")
+            .next()
+            .insertBefore($(".layer[data-object='" + obj.id + "']"));
+          $('#' + obj.id)
+            .next()
+            .insertBefore($('#' + obj.id));
+          orderLayers();
+        } else {
+          canvas.getActiveObjects().forEach(function (obj) {
+            $(".layer[data-object='" + obj.id + "']")
+              .next()
+              .insertBefore(
+                $(".layer[data-object='" + obj.id + "']")
+              );
+            $('#' + obj.id)
+              .next()
+              .insertBefore($('#' + obj.id));
+            orderLayers();
+          });
+        }
+      }
+
+      // Move object top of layer list
+      if (
+        e.keyCode === 221 &&
+        canvas.getActiveObjects() &&
+        e.altKey
+      ) {
+        if (canvas.getActiveObjects().length == 1) {
+          var obj = canvas.getActiveObject();
+          $('#layer-inner-list').prepend(
+            $(".layer[data-object='" + obj.id + "']")
+          );
+          $('#inner-timeline').prepend($('#' + obj.id));
+          orderLayers();
+        } else {
+          canvas.getActiveObjects().forEach(function (obj) {
+            $('#layer-inner-list').prepend(
+              $(".layer[data-object='" + obj.id + "']")
+            );
+            $('#inner-timeline').prepend($('#' + obj.id));
+            orderLayers();
+          });
+        }
+      }
+
+      // Move object bottom of layer list
+      if (e.keyCode === 219 && canvas.getActiveObject() && e.altKey) {
+        if (canvas.getActiveObjects().length == 1) {
+          var obj = canvas.getActiveObject();
+          $('#layer-inner-list').append(
+            $(".layer[data-object='" + obj.id + "']")
+          );
+          $('#inner-timeline').append($('#' + obj.id));
+          orderLayers();
+        } else {
+          canvas.getActiveObjects().forEach(function (obj) {
+            $('#layer-inner-list').append(
+              $(".layer[data-object='" + obj.id + "']")
+            );
+            $('#inner-timeline').append($('#' + obj.id));
+            orderLayers();
+          });
+        }
+      }
+
+      // Zoom in
+      if (e.keyCode === 187 && e.shiftKey) {
+        var zoom = canvas.getZoom() + 0.2;
+        if (zoom > 20) zoom = 20;
+        if (zoom < 0.01) zoom = 0.01;
+        canvas.setZoom(1);
+        canvas.renderAll();
+        var vpw = canvas.width / zoom;
+        var vph = canvas.height / zoom;
+        var x = artboard.left + artboard.width / 2 - vpw / 2;
+        var y = artboard.top + artboard.height / 2 - vph / 2;
+        canvas.absolutePan({ x: x, y: y });
+        canvas.setZoom(zoom);
+        canvas.renderAll();
+        $('#zoom-level span').html(
+          (canvas.getZoom() * 100).toFixed(0) + '%'
+        );
+      }
+
+      // Zoom out
+      if (e.keyCode === 189 && e.shiftKey) {
+        var zoom = canvas.getZoom() - 0.2;
+        if (zoom > 20) zoom = 20;
+        if (zoom < 0.01) zoom = 0.01;
+        canvas.setZoom(1);
+        canvas.renderAll();
+        var vpw = canvas.width / zoom;
+        var vph = canvas.height / zoom;
+        var x = artboard.left + artboard.width / 2 - vpw / 2;
+        var y = artboard.top + artboard.height / 2 - vph / 2;
+        canvas.absolutePan({ x: x, y: y });
+        canvas.setZoom(zoom);
+        canvas.renderAll();
+        $('#zoom-level span').html(
+          (canvas.getZoom() * 100).toFixed(0) + '%'
+        );
+      }
+    });
+
+  // Copy event
+  window.addEventListener('copy', function (e) {
+    // Copy selected object
+    if (
+      canvas.getActiveObject() &&
+      shiftkeys.length == 0 &&
+      !canvas.getActiveObject().isEditing
+    ) {
+      var emptyInp = document.getElementById('emptyInput');
+      emptyInp.select();
+      emptyInp.focus();
+      setTimeout(function () {
+        document.execCommand('copy');
+      }, 0);
+      clipboard = canvas.getActiveObject();
+      cliptype = 'object';
+      // Copy selected keyframe(s)
+    } else if (
+      shiftkeys.length > 0 &&
+      !canvas.getActiveObject().isEditing
+    ) {
+      var emptyInp = document.getElementById('emptyInput');
+      emptyInp.select();
+      emptyInp.focus();
+      setTimeout(function () {
+        document.execCommand('copy');
+      }, 0);
+      clipboard = [];
+      shiftkeys.forEach(function (keyframe) {
+        var drag = $(keyframe.keyframe);
+        var keyarr = $.grep(keyframes, function (e) {
+          return (
+            e.t == drag.attr('data-time') &&
+            e.id == drag.attr('data-object') &&
+            e.name == drag.attr('data-property')
+          );
+        });
+        clipboard.push(keyarr[0]);
+      });
+      cliptype = 'keyframe';
+    }
+  });
+
+  // Paste event
+  window.addEventListener('paste', function (e) {
+    var imgs = e.clipboardData.items;
+    if (imgs == undefined) return false;
+
+    // Paste object or keyframe(s)
+    if (imgs.length == 1 && e.clipboardData.getData('text') == ' ') {
+      copyObject();
+      // Paste external image (by uploading it)
+    } else {
+      for (var i = 0; i < imgs.length; i++) {
+        if (imgs[i].type.indexOf('image') == -1) continue;
+        var imgObj = imgs[i].getAsFile();
+        if (imgObj.size / 1024 / 1024 <= 10) {
+          createThumbnail(imgObj, 250).then(function (data) {
+            saveFile(
+              dataURItoBlob(data),
+              imgObj,
+              imgObj['type'].split('/')[0],
+              'temp',
+              true,
+              true
+            );
+          });
+        } else {
+          alert('Image is too big');
+        }
+      }
+    }
+  });
+
+  // Stop cropping when clicking on the blacked out properties panel
+  $(document).on('click', '#properties-overlay', function () {
+    if (cropping) {
+      canvas.discardActiveObject();
+    }
+  });
+
+  // Scroll horizontally through assets in the library
+  $(document).on('click', '.right-arrow', function () {
+    $(this).parent().animate({ scrollLeft: '+=1000' }, 500);
+  });
+  $(document).on('click', '.left-arrow', function () {
+    $(this).parent().animate({ scrollLeft: '-=1000' }, 500);
+  });
+
+  // Playback
+  $(document).on('click', '#play-button', function () {
+    if (paused) {
+      play();
+    } else {
+      pause();
+    }
+  });
+
+  // Detect when not clicking on certain elements
+  $(document).on('mousedown', function (e) {
+    // De-select keyframes
+    if (
+      !$('#keyframe-properties').is(e.target) &&
+      $('#keyframe-properties').has(e.target).length === 0 &&
+      !$('.keyframe').is(e.target) &&
+      $('.keyframe').has(e.target).length === 0
+    ) {
+      $('#keyframe-properties').removeClass('show-properties');
+      $('.keyframe-selected').removeClass('keyframe-selected');
+      shiftkeys = [];
+    }
+
+    // Hide color picker
+    if (
+      !$('.object-color').is(e.target) &&
+      $('.object-color').has(e.target).length === 0 &&
+      !$('.pcr-app').is(e.target) &&
+      $('.prc-app').has(e.target).length === 0 &&
+      !$('.pcr-selection').is(e.target) &&
+      $('.pcr-selection').has(e.target).length === 0 &&
+      !$('.pcr-swatches').is(e.target) &&
+      $('.pcr-swatches').has(e.target).length === 0 &&
+      !$('.pcr-interaction').is(e.target) &&
+      $('.pcr-interaction').has(e.target).length === 0
+    ) {
+      o_fill.hide();
+    }
+
+    // Hide zoom controls
+    if (
+      !$('#other-controls').is(e.target) &&
+      $('#other-controls').has(e.target).length === 0
+    ) {
+      $('#zoom-options').addClass('zoom-hidden');
+      $('#zoom-level img').removeClass('zoom-open');
+    }
+
+    // Hide speed settings
+    if (
+      !$('#speed').is(e.target) &&
+      $('#speed').has(e.target).length === 0
+    ) {
+      $('#speed-settings').removeClass('show-speed');
+      $('#speed-arrow').removeClass('arrow-on');
+    }
+
+    // Hide more menu
+    if (
+      !$('#more-tool').is(e.target) &&
+      $('#more-tool').has(e.target).length === 0 &&
+      !$('#more-over').is(e.target) &&
+      $('#more-over').has(e.target).length === 0
+    ) {
+      hideMore();
+    }
+  });
+
+  // Detect focus on an input in the properties
+  $(document)
+    .on('focus', '.property-input', function () {
+      focus = true;
+    })
+    .on('focusout', function () {
+      focus = false;
+    });
+
+  // Toggle zoom dropdown
+  $(document).on('click', '#zoom-level', function () {
+    $('#zoom-options').toggleClass('zoom-hidden');
+    $('#zoom-level img').toggleClass('zoom-open');
+  });
+
+  // Skip to the beginning or end
+  $(document).on('click', '#skip-backward', function () {
+    animate(false, 0);
+    $('#seekbar').offset({
+      left:
+        offset_left +
+        $('#inner-timeline').offset().left +
+        currenttime / timelinetime,
+    });
+  });
+  $(document).on('click', '#skip-forward', function () {
+    animate(false, duration);
+    $('#seekbar').offset({
+      left:
+        offset_left +
+        $('#inner-timeline').offset().left +
+        currenttime / timelinetime,
+    });
+  });
+
+  // Change layer name
+  $(document).on('dblclick', '.layer-custom-name', function () {
+    $(this).prop('readonly', false);
+    $(this).addClass('name-active');
+    $(this).focus();
+    document.execCommand('selectAll', false, null);
+    editinglayer = true;
+  });
+
+  // Trigger file picker when clicking the upload button
+  $(document).on('click', '#upload-button', function () {
+    $('#upload-popup').addClass('upload-show');
+  });
+
+  $(document).on('click', '#upload-overlay', function () {
+    $('.upload-show').removeClass('upload-show');
+  });
+
+  $(document).on('click', '#upload-popup-close', function () {
+    $('.upload-show').removeClass('upload-show');
+  });
+
+  $(document).on('click', '#upload-drop-area', function () {
+    $('#filepick').click();
+  });
+
+  $(document).on('dragover', function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+  });
+
+  $(document).on('dragover', '#upload-drop-area', function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    $('#upload-drop-area').addClass('dropping');
+  });
+
+  $(document).on('dragenter', '#upload-drop-area', function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    $('#upload-drop-area').addClass('dropping');
+  });
+
+  $(document).on('drop', function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    $('#upload-drop-area').removeClass('dropping');
+    handleUpload(e);
+  });
+
+  $(document).on('dragleave', function () {
+    $('#upload-drop-area').removeClass('dropping');
+  });
+
+  $(document).on('dragend', function () {
+    $('#upload-drop-area').removeClass('dropping');
+  });
+
+  // Upload or remove background audio
+  $(document).on('click', '#audio-upload-button', function () {
+    $('#filepick2').click();
+  });
+
+  // Sync scrolling for the timeline
+  syncScroll($('#layer-inner-list'), $('#timeline'));
+  syncScrollHoz($('#timeline'), $('#seekarea'));
+
+  // Initialize layer sorting
+  sortable('#layer-inner-list', {
+    customDragImage: (draggedElement, elementOffset, event) => {
+      return {
+        element: document.getElementById('nothing'),
+        posX: event.pageX - elementOffset.left,
+        posY: event.pageY - elementOffset.top,
+      };
+    },
+  })[0].addEventListener('sortstop', function (e) {
+    const id = $(e.detail.item).attr('data-object');
+    const previd = $(e.detail.item).prev().attr('data-object');
+    if ($('.sortable-dragging').length == 1) {
+      $('.sortable-dragging').remove();
+      if (previd == undefined) {
+        $('#inner-timeline').prepend($('#' + id));
+      } else {
+        $('#' + id).insertAfter($('#' + previd));
+      }
+      orderLayers();
+    }
+  });
+
+  // Initialize dropdown for keyframe easing
+  $('#easing select').niceSelect();
+
+  // Initialize properties panel
+  updatePanel(false);
+
+  // Initialize library
+  updateBrowser('shape-tool');
+
+  function initFilterSliders() {
+    var filters = [
+      'filter-brightness',
+      'filter-contrast',
+      'filter-saturation',
+      'filter-hue',
+      'filter-vibrance',
+    ];
+    filters.forEach(function (filter) {
+      var selectme = document.getElementById(filter);
+      var slider = new RangeSlider(selectme, {
+        design: '2d',
+        theme: 'default',
+        handle: 'round',
+        popup: null,
+        showMinMaxLabels: false,
+        unit: '%',
+        min: -100,
+        max: 100,
+        value: 0,
+        step: 1,
+        onmove: function (x) {
+          if (canvas.getActiveObject()) {
+            var obj = canvas.getActiveObject();
+            if (filter == 'filter-brightness') {
+              if (obj.filters.find((i) => i.type == 'Brightness')) {
+                obj.filters.find(
+                  (i) => i.type == 'Brightness'
+                ).brightness = x / 100;
+              } else {
+                obj.filters.push(
+                  new f.Brightness({ brightness: x / 100 })
+                );
+              }
+            } else if (filter == 'filter-contrast') {
+              if (obj.filters.find((i) => i.type == 'Contrast')) {
+                obj.filters.find(
+                  (i) => i.type == 'Contrast'
+                ).contrast = x / 100;
+              } else {
+                obj.filters.push(
+                  new f.Contrast({ contrast: x / 100 })
+                );
+              }
+            } else if (filter == 'filter-saturation') {
+              if (obj.filters.find((i) => i.type == 'Saturation')) {
+                obj.filters.find(
+                  (i) => i.type == 'Saturation'
+                ).saturation = x / 100;
+              } else {
+                obj.filters.push(
+                  new f.Saturation({ saturation: x / 100 })
+                );
+              }
+            } else if (filter == 'filter-vibrance') {
+              if (obj.filters.find((i) => i.type == 'Vibrance')) {
+                obj.filters.find(
+                  (i) => i.type == 'Vibrance'
+                ).vibrance = x / 100;
+              } else {
+                obj.filters.push(
+                  new f.Vibrance({ vibrance: x / 100 })
+                );
+              }
+            } else if (filter == 'filter-hue') {
+              if (obj.filters.find((i) => i.type == 'HueRotation')) {
+                obj.filters.find(
+                  (i) => i.type == 'HueRotation'
+                ).rotation = x / 100;
+              } else {
+                obj.filters.push(
+                  new f.HueRotation({ rotation: x / 100 })
+                );
+              }
+            }
+            obj.applyFilters();
+            canvas.renderAll();
+          }
+        },
+        onfinish: function (x) {
+          save();
+        },
+      });
+      sliders.push({ name: filter, slider: slider });
+    });
+  }
+
+  var selectchroma = document.getElementById('chroma-distance');
+  chromaslider = new RangeSlider(selectchroma, {
+    design: '2d',
+    theme: 'default',
+    handle: 'round',
+    popup: null,
+    showMinMaxLabels: false,
+    unit: '%',
+    min: 1,
+    max: 100,
+    value: 1,
+    step: 1,
+    onmove: function (x) {
+      if (canvas.getActiveObject()) {
+        var obj = canvas.getActiveObject();
+        if (obj.filters.find((x) => x.type == 'RemoveColor')) {
+          obj.filters.find((x) => x.type == 'RemoveColor').distance =
+            x / 100;
+        }
+        obj.applyFilters();
+        canvas.renderAll();
+      }
+    },
+    onfinish: function (x) {
+      save();
+    },
+  });
+
+  var selectnoise = document.getElementById('filter-noise');
+  noiseslider = new RangeSlider(selectnoise, {
+    design: '2d',
+    theme: 'default',
+    handle: 'round',
+    popup: null,
+    showMinMaxLabels: false,
+    unit: '%',
+    min: 0,
+    max: 1000,
+    value: 0,
+    step: 1,
+    onmove: function (x) {
+      if (canvas.getActiveObject()) {
+        var obj = canvas.getActiveObject();
+        if (obj.filters.find((x) => x.type == 'Noise')) {
+          obj.filters.find((x) => x.type == 'Noise').noise = x;
+        } else {
+          obj.filters.push(
+            new f.Noise({
+              noise: x,
+            })
+          );
+        }
+        obj.applyFilters();
+        canvas.renderAll();
+      }
+    },
+    onfinish: function (x) {
+      save();
+    },
+  });
+
+  var selectblur = document.getElementById('filter-blur');
+  blurslider = new RangeSlider(selectblur, {
+    design: '2d',
+    theme: 'default',
+    handle: 'round',
+    popup: null,
+    showMinMaxLabels: false,
+    unit: '%',
+    min: 0,
+    max: 100,
+    value: 0,
+    step: 1,
+    onmove: function (x) {
+      if (canvas.getActiveObject()) {
+        var obj = canvas.getActiveObject();
+        if (obj.filters.find((x) => x.type == 'Blur')) {
+          obj.filters.find((x) => x.type == 'Blur').blur = x / 100;
+        } else {
+          obj.filters.push(
+            new f.Blur({
+              blur: x / 100,
+            })
+          );
+        }
+      }
+      obj.applyFilters();
+      canvas.renderAll();
+    },
+    onfinish: function (x) {
+      save();
+    },
+  });
+
+  $('#filters-list').val('none');
+  $('#filters-list').niceSelect();
+
+  initFilterSliders();
+});

js/init.js

@@ -0,0 +1,1075 @@
+var API_KEY = 'PIXABAY_API';
+var GOOGLE_FONTS_API_KEY = 'GOOGLE_FONTS_API_KEY';
+
+// for legacy browsers
+const AudioContext = window.AudioContext || window.webkitAudioContext;
+const audioContext = new AudioContext();
+var oldsrc, oldobj;
+var oldtimelinepos;
+var speed = 1;
+var page = 1;
+var checkstatus = false;
+let db = new Localbase('db');
+var wip = false;
+var paused = true;
+var currenttime = 0;
+var timelinetime = 5;
+const offset_left = 20;
+var duration = 30000;
+var keyframes = [];
+var p_keyframes = [];
+var props = [
+  'left',
+  'top',
+  'scaleX',
+  'scaleY',
+  'width',
+  'height',
+  'angle',
+  'opacity',
+  'fill',
+  'strokeWidth',
+  'stroke',
+  'shadow.color',
+  'shadow.opacity',
+  'shadow.offsetX',
+  'shadow.offsetY',
+  'shadow.blur',
+  'charSpacing',
+  'lineHeight',
+];
+var objects = [];
+var o_slider, o_letter_slider, o_line_slider;
+var colormode = 'fill';
+var spaceDown = false;
+var selectedkeyframe;
+var undo = [];
+var undoarr = [];
+var redo = [];
+var groups = [];
+var redoarr = [];
+var state;
+var statearr = [];
+var recording = false;
+var canvasrecord;
+var clipboard;
+var focus = false;
+var editingpanel = false;
+var files = [];
+var re = /(?:\.([^.]+))?$/;
+var filelist = [];
+var timeout;
+var spacehold = false;
+var spacerelease = false;
+var tempselection;
+var line_h, line_v;
+var tempgroup = [];
+var editinggroup = false;
+var tempgroupid;
+var fontPicker;
+var fonts = [];
+var seeking = false;
+var setting = false;
+var handtool = false;
+var canvasx = 0;
+var canvasy = 0;
+var overCanvas = false;
+var draggingPanel = false;
+var cropping = false;
+var cropobj;
+var cropscalex;
+var cropscaley;
+var croptop;
+var cropleft;
+var layer_count = 1;
+var lockmovement = false;
+var shiftx = 0;
+var shifty = 0;
+var editinglayer = false;
+var editingproject = false;
+var shiftkeys = [];
+var shiftdown = false;
+var cliptype = 'object';
+var chromaslider, noiseslider, blurslider;
+var isChrome =
+  window.chrome && Object.values(window.chrome).length !== 0;
+var eyeDropper;
+if (isChrome) {
+  eyeDropper = new EyeDropper();
+}
+var presets = [
+  {
+    name: 'Dribbble shot',
+    id: 'dribbble',
+    width: 1600,
+    height: 1200,
+  },
+  { name: 'Facebook post', id: 'facebook', width: 1280, height: 720 },
+  {
+    name: 'Facebook ad',
+    id: 'facebook-ad',
+    width: 1080,
+    height: 1080,
+  },
+  { name: 'Youtube video', id: 'youtube', width: 1920, height: 1080 },
+  {
+    name: 'Instagram video',
+    id: 'instagram-id',
+    width: 1080,
+    height: 1920,
+  },
+  {
+    name: 'Instagram stories',
+    id: 'instagram-stories',
+    width: 1080,
+    height: 1920,
+  },
+  { name: 'Twitter video', id: 'twitter', width: 1280, height: 720 },
+  { name: 'Snapchat ad', id: 'snapchat', width: 1080, height: 1920 },
+  {
+    name: 'LinkedIn video',
+    id: 'linkedin',
+    width: 1920,
+    height: 1080,
+  },
+  {
+    name: 'Product Hunt thumbnail',
+    id: 'product-hunt',
+    width: 600,
+    height: 600,
+  },
+  {
+    name: 'Pinterest ad',
+    id: 'pinterest',
+    width: 1080,
+    height: 1920,
+  },
+];
+var activepreset = 'custom';
+var uploaded_images = [];
+var uploaded_videos = [];
+var uploading = false;
+var background_audio = false;
+var temp_audio = false;
+var background_key;
+var sliders = [];
+var hovertime = 0;
+var animatedtext = [];
+
+// Get list of fonts
+$.ajax({
+  url:
+    'https://www.googleapis.com/webfonts/v1/webfonts?key=' +
+    GOOGLE_FONTS_API_KEY +
+    '&sort=alpha',
+  type: 'GET',
+  dataType: 'json', // added data type
+  success: function (response) {
+    response.items.forEach(function (item) {
+      fonts.push(item.family);
+    });
+  },
+});
+
+// Panel variants
+const canvas_panel =
+  '<div id="canvas-properties" class="panel-section"><p class="property-title">Canvas settings</p><table><tr><th class="name-col">Preset</th><th class="value-col"><select id="preset"></select></th></tr><tr><th class="name-col">Size</th><th class="value-col"><div id="canvas-w" class="property-input" data-label="W"><input type="number" min=1 value=1000></div><div id="canvas-h" class="property-input" data-label="H"><input type="number" value=1000 min=1></div></th></tr><tr><th class="name-col">Color</th><th class="value-col"><div id="canvas-color" class="object-color"><div id="color-side" class="color-picker"></div><input value="#FFFFFF" disabled="disabled"></div><div id="canvas-color-opacity" class="property-input" data-label="%"><input type="number" value=100></div></th></tr><tr><th class="name-col">Duration</th><th class="value-col" id="duration-cell"><div id="canvas-duration" class="property-input" data-label="s"><input type="number" value=15.00></div></th></tr></table></div>';
+const object_panel =
+  '<div id="layout-properties" class="panel-section"><p class="property-title">Layout</p><table><tr><th class="name-col">Position</th><th class="value-col"><div id="object-x" class="property-input" data-label="X"><input type="number" value=1000></div><div id="object-y" class="property-input" data-label="Y"><input value=1000 type="number"></div></th></tr><tr><th class="name-col">Size</th><th class="value-col"><div id="object-w" class="property-input" data-label="W"><input type="number" min=1 value=1000></div><div id="object-h" class="property-input" data-label="H"><input type="number" value=1000 min=1></div></th></tr><tr><th class="name-col">Rotation</th><th class="value-col" id="duration-cell"><div id="object-r" class="property-input" data-label="&#176;"><input type="number" min=0 max=360 value=0></div></th></tr></table></div>';
+const back_panel =
+  '<hr><div id="back-properties" class="panel-section"><p class="property-title">Layer</p><table><tr><th class="name-col">Opacity</th><th class="value-col"><div id="select-opacity"></div><div id="object-o" class="property-input" data-label="%"><input type="number" value=100></div></th></tr><tr><th class="name-col">Mask</th><th class="value-col"><select id="masks"><option value="none">None</option></select></th></tr></table></div>';
+const image_panel =
+  '<hr><div id="back-properties" class="panel-section"><p class="property-title">Layer</p><table><tr><th class="name-col">Opacity</th><th class="value-col"><div id="select-opacity"></div><div id="object-o" class="property-input" data-label="%"><input type="number" value=100></div></th></tr><tr><th class="name-col">Mask</th><th class="value-col"><select id="masks"><option value="none">None</option></select></th></tr></table></div>';
+const selection_panel =
+  '<hr><div id="back-properties" class="panel-section"><p class="property-title">Layer</p><table><tr><th class="name-col">Opacity</th><th class="value-col"><div id="select-opacity"></div><div id="object-o" class="property-input" data-label="%"><input type="number" value=100></div></th></tr><tr><th class="name-col">Group</th><th class="value-col"><div id="group-objects">Group selection</div></th></tr></table></div>';
+const group_panel =
+  '<hr><div id="back-properties" class="panel-section"><p class="property-title">Layer</p><table><tr><th class="name-col">Opacity</th><th class="value-col"><div id="select-opacity"></div><div id="object-o" class="property-input" data-label="%"><input type="number" value=100></div></th></tr><tr><th class="name-col">Mask</th><th class="value-col"><select id="masks"><option value="none">None</option></select></th></tr><tr><th class="name-col">Group</th><th class="value-col"><div id="ungroup-objects">Ungroup selection</div></th></tr></table></div>';
+const other_panel =
+  '<hr><div id="back-properties" class="panel-section"><p class="property-title">Layer</p><table><tr><th class="name-col">Opacity</th><th class="value-col"><div id="select-opacity"></div><div id="object-o" class="property-input" data-label="%"><input type="number" value=100></div></th></tr><tr><th class="name-col">Mask</th><th class="value-col"><select id="masks"><option value="none">None</option></select></th></tr></table></div>';
+const shape_panel =
+  '<hr><div id="back-properties" class="panel-section"><p class="property-title">Rectangle</p><table><tr><th class="name-col">Color</th><th class="value-col"><div id="object-color-fill" class="object-color"><div id="color-fill-side" class="color-picker"></div><input value="#FFFFFF" disabled="disabled"></div><div id="object-color-fill-opacity" class="property-input" data-label="%"><input type="number" value=100></div></th></tr><tr><th class="name-col">Radius</th><th class="value-col" id="duration-cell"><div id="object-corners" class="property-input" data-label="px"><input type="number" value=0 min=0></div></th></tr></table></div>';
+const path_panel =
+  '<hr><div id="back-properties" class="panel-section"><p class="property-title">Shape</p><table><tr><th class="name-col">Color</th><th class="value-col"><div id="object-color-fill" class="object-color"><div id="color-fill-side" class="color-picker"></div><input value="#FFFFFF" disabled="disabled"></div><div id="object-color-fill-opacity" class="property-input" data-label="%"><input type="number" value=100></div></th></tr></table></div>';
+const text_panel =
+  '<hr><div id="back-properties" class="panel-section"><p class="property-title">Text</p><table><tr><th class="name-col">Font</th><th class="value-col"><select id="font-picker"></select></th></tr><tr><th class="name-col">Align</th><th class="value-col"><div class="align-text" id="align-text-left"><img src="assets/align-text-left.svg"></div><div class="align-text" id="align-text-center"><img src="assets/align-text-center.svg"></div><div class="align-text" id="align-text-right"><img src="assets/align-text-right.svg"></div><div class="align-text" id="align-text-justify"><img src="assets/align-text-justify.svg"></div></th></tr><tr><th class="name-col">Format</th><th class="value-col"><div class="format-text" id="format-bold"><img src="assets/bold.svg"></div><div class="format-text" id="format-italic"><img src="assets/italic.svg"></div><div class="format-text" id="format-underline"><img src="assets/underline.svg"></div><div class="format-text" id="format-strike"><img src="assets/strike.svg"></div></th></tr><tr><th class="name-col">Color</th><th class="value-col"><div id="object-color-fill" class="object-color"><div id="color-fill-side" class="color-picker"></div><input value="#FFFFFF" disabled="disabled"></div><div id="object-color-fill-opacity" class="property-input" data-label="%"><input type="number" value=100></div></th></tr><tr><th class="name-col">Letter</th><th class="value-col"><div id="select-letter"></div><div id="text-h" class="property-input" data-label="%"><input type="number" value=1></div></th></tr><tr><th class="name-col">Line</th><th class="value-col"><div id="select-line"></div><div id="text-v" class="property-input" data-label="%"><input type="number" value=1></div></th></tr></table></div>';
+const stroke_panel =
+  '<hr><div id="back-properties" class="panel-section"><p class="property-title">Stroke</p><table><tr><th class="name-col">Type</th><th class="value-col left-col"><div class="line-join" id="miter"><img src="assets/miter.svg"></div><div class="line-join" id="bevel"><img src="assets/bevel.svg"></div><div class="line-join" id="round"><img src="assets/round.svg"></div><div class="line-join" id="small-dash"><img src="assets/dash2.svg"></div></th></tr><tr><th class="name-col">Color</th><th class="value-col"><div id="object-color-stroke" class="object-color"><div id="color-stroke-side" class="color-picker"></div><input value="#FFFFFF" disabled="disabled"></div><div id="object-color-stroke-opacity" class="property-input" data-label="%"><input type="number" value=100></div></th></tr><tr><th class="name-col">Width</th><th class="value-col" id="duration-cell"><div id="object-stroke" class="property-input" data-label="px"><input type="number" min=0 value=0></div></th></tr></table></div>';
+const shadow_panel =
+  '<hr><div id="back-properties" class="panel-section"><p class="property-title">Shadow</p><table><tr><th class="name-col">Offset</th><th class="value-col"><div id="object-shadow-x" class="property-input" data-label="X"><input type="number" value=0></div><div id="object-shadow-y" class="property-input" data-label="Y"><input value=0 type="number"></div></th></tr><tr><th class="name-col">Color</th><th class="value-col"><div id="object-color-shadow" class="object-color"><div id="color-shadow-side" class="color-picker"></div><input value="#FFFFFF" disabled="disabled"></div><div id="object-color-shadow-opacity" class="property-input" data-label="%"><input type="number" value=100></div></th></tr><tr><th class="name-col">Blur</th><th class="value-col" id="duration-cell"><div id="object-blur" class="property-input" data-label="px"><input type="number" value=0 min=0></div></th></tr></table></div>';
+const image_more_panel =
+  '<hr><div id="back-properties" class="panel-section"><p class="property-title">Image</p><div id="image-buttons"><div id="filters-button"><img src="assets/filters.svg"> Edit filters</div><div id="crop-image"><img src="assets/crop-icon.svg">Crop image</div></div></div></hr>';
+const video_more_panel =
+  '<hr><div id="back-properties" class="panel-section"><p class="property-title">Video</p><div id="image-buttons"><div id="filters-button" class="filters-video"><img src="assets/filters.svg"> Edit filters</div></div></div></hr>';
+const animated_text_panel =
+  '<hr><div id="back-properties" class="panel-section"><p class="property-title">Text</p><table><tr><th class="name-col">Content</th><th class="value-col" id="duration-cell"><div id="animated-text" class="property-input" data-label=""><input id="animatedinput" type="text" value="text"><div id="animatedset">Set</div></div></th></tr><tr><th class="name-col">Font</th><th class="value-col"><select id="font-picker"></select></th></tr><tr><th class="name-col">Color</th><th class="value-col"><div id="text-color" class="object-color"><div id="color-text-side" class="color-picker"></div><input value="#FFFFFF" disabled="disabled"></div><div id="color-text-opacity" class="property-input" data-label="%"><input type="number" value=100></div></th></tr></table></div>';
+const start_animation_panel =
+  '<hr><div id="back-properties" class="panel-section"><p class="property-title">Start animation</p><table><tr><th class="name-col">Preset</th><th class="value-col"><select id="preset-picker"></select></th></tr><tr><th class="name-col">Easing</th><th class="value-col"><select id="easing-picker"><option value="linear">Linear</option><option value="easeInQuad">Ease in</option><option value="easeOutQuad">Ease out</option><option value="easeinOutQuad">Ease in-out</option><option value="easeOutInQuad">Ease out-in</option><option value="easeInBounce">Ease in bounce</option><option value="easeOutBounce">Ease out bounce</option><option value="easeinOutBounce">Ease in-out bounce</option><option value="easeOutInBouce">Ease out-in bounce</option><option value="easeOutInBouce">Ease out-in bounce</option><option value="easeInSine">Ease in sine</option><option value="easeOutSine">Ease out sine</option><option value="easeinOutSine">Ease in-out sine</option><option value="easeOutInSine">Ease out-in sine</option><option value="easeOutInSine">Ease out-in sine</option><option value="easeInCubic">Ease in cubic</option><option value="easeOutCubic">Ease out cubic</option><option value="easeinOutCubic">Ease in-out cubic</option><option value="easeOutInCubic">Ease out-in cubic</option><option value="easeOutInCubic">Ease out-in cubic</option></select></th></tr><tr><th class="name-col">Order</th><th class="value-col"><div id="order-toggle"><div id="order-backward" class="order-toggle-item">Backward</div><div id="order-forward" class="order-toggle-item order-toggle-item-active">Forward</div></div></th></tr><tr><th class="name-col">Order</th><th class="value-col"><div id="order-toggle"><div id="type-letters" class="order-toggle-item-2">Letters</div><div id="type-words" class="order-toggle-item-2 order-toggle-item-active-2">Words</div></div></th></tr><tr><th class="name-col">Duration</th><th class="value-col" id="duration-cell"><div id="animated-text-duration" class="property-input" data-label="s"><input id="durationinput" type="number" value="0"></div></th></tr></table></div>';
+const audio_panel =
+  '<div id="layout-properties" class="panel-section"><p class="property-title">Audio</p><table><tr><th class="name-col">Volume</th><th class="value-col" id="duration-cell"><div id="object-volume" class="property-input" data-label="%"><input type="number" value=0></div></th></tr></table></div>';
+
+// Browser variants
+const shape_browser =
+  '<div id="search-fixed"><p class="property-title">Objects</p><img id="collapse" src="assets/collapse.svg"><div id="browser-search"><input placeholder="Search..."><img src="assets/search.svg" id="search-icon"><img src="assets/delete.svg" id="delete-search"><div id="search-button">Go</div></div></div><div id="shapes-cont"><p class="row-title">Shapes</p><div class="gallery-row" id="shapes-row"></div><p class="row-title">Emojis</p><div class="gallery-row" id="emojis-row"></div></div>';
+const image_browser =
+  '<div id="search-fixed"><p class="property-title">Images</p><img id="collapse" src="assets/collapse.svg"><div id="browser-search"><input placeholder="Search..."><a href="https://pixabay.com" target="_blank" id="pixabay"><img src="assets/pixabay.svg"></a><img src="assets/search.svg" id="search-icon"><img src="assets/delete.svg" id="delete-search"><div id="search-button">Go</div></div></div><div id="shapes-cont"><div id="landing"><div id="landing-text">Browse millions of high quality images from Pixabay. Use the search bar above or choose from popular categories below.</div><div id="categories"></div></div><div id="images-grid"></div></div>';
+const text_browser =
+  '<div id="search-fixed"><p class="property-title">Text</p><img id="collapse" src="assets/collapse.svg"><div id="browser-search"><input placeholder="Search..."><img src="assets/search.svg" id="search-icon"><img src="assets/delete.svg" id="delete-search"><div id="search-button">Go</div></div></div><div id="shapes-cont"><p class="row-title">Basic text</p><div id="heading-text" data-font="Inter" class="add-text noselect">Add a heading</div><div id="subheading-text" data-font="Inter" class="add-text noselect">Add a subheading</div><div id="body-text" data-font="Inter" class="add-text noselect">Add body text</div></div>';
+const video_browser =
+  '<div id="search-fixed"><p class="property-title">Videos</p><img id="collapse" src="assets/collapse.svg"><div id="browser-search"><input placeholder="Search..."><a href="https://pixabay.com" target="_blank" id="pixabay"><img src="assets/pixabay.svg"></a><img src="assets/search.svg" id="search-icon"><img src="assets/delete.svg" id="delete-search"><div id="search-button">Go</div></div></div><div id="shapes-cont"><div id="landing"><div id="landing-text">Browse millions of high quality images from Pixabay. Use the search bar above or choose from popular categories below.</div><div id="categories"></div></div><div id="images-grid"></div></div>';
+const upload_browser =
+  '<div id="search-fixed"><p class="property-title">Uploads</p><div id="upload-button"><img src="assets/upload.svg"> Upload media</div><img id="collapse" src="assets/collapse.svg"><div id="upload-tabs"><div id="images-tab" class="upload-tab upload-tab-active">Images</div><div id="videos-tab" class="upload-tab">Videos</div></div></div><div id="images-grid"></div>';
+const audio_browser =
+  '<div id="search-fixed" class="audio-browser"><p class="property-title">Audio</p><div id="audio-upload-button"><img src="assets/upload.svg"> Upload audio</div><img id="collapse" src="assets/collapse.svg"></div><div id="audio-list-parent"><div id="landing-text" class="audio-landing-text">Audio provided by Pixabay. Browse millions of assets from Pixabay by <a href="https://pixabay.com/music/" target="_blank">clicking here.</a></div><div id="audio-list"></div></div>';
+
+// Text animation list
+var text_animation_list = [
+  { name: 'fade in', label: 'Fade in', src: 'assets/fade-in.svg' },
+  {
+    name: 'typewriter',
+    label: 'Typewriter',
+    src: 'assets/typewriter.svg',
+  },
+  {
+    name: 'slide top',
+    label: 'Slide top',
+    src: 'assets/slide-top.svg',
+  },
+  {
+    name: 'slide bottom',
+    label: 'Slide bottom',
+    src: 'assets/slide-bottom.svg',
+  },
+  {
+    name: 'slide left',
+    label: 'Slide left',
+    src: 'assets/slide-left.svg',
+  },
+  {
+    name: 'slide right',
+    label: 'Slide right',
+    src: 'assets/slide-right.svg',
+  },
+  { name: 'scale', label: 'Scale', src: 'assets/scale.svg' },
+  { name: 'shrink', label: 'Shrink', src: 'assets/shrink.svg' },
+];
+
+// Shapes list
+var shape_grid_items = [
+  'assets/shapes/rectangle.svg',
+  'assets/shapes/circle.svg',
+  'assets/shapes/triangle.svg',
+  'assets/shapes/polygon.svg',
+  'assets/shapes/star.svg',
+  'assets/thingy.svg',
+  'assets/shapes/heart.svg',
+  'assets/shapes/arrow.svg',
+];
+var emoji_items = [
+  'assets/twemojis/laughing-emoji.png',
+  'assets/twemojis/crying-emoji.png',
+  'assets/twemojis/surprised-emoji.png',
+  'assets/twemojis/smiling-emoji.png',
+  'assets/twemojis/tongue-emoji.png',
+  'assets/twemojis/heart-eyes-emoji.png',
+  'assets/twemojis/heart-kiss-emoji.png',
+  'assets/twemojis/sunglasses-cool-emoji.png',
+  'assets/twemojis/ghost-emoji.png',
+  'assets/twemojis/skull-emoji.png',
+  'assets/twemojis/mindblown-emoji.png',
+  'assets/twemojis/bomb-emoji.png',
+  'assets/twemojis/hundred-100-points-emoji.png',
+  'assets/twemojis/thought-balloon-emoji.png',
+  'assets/twemojis/wave-emoji.png',
+  'assets/twemojis/point-emoji.png',
+  'assets/twemojis/thumbs-up-emoji.png',
+  'assets/twemojis/clap-emoji.png',
+  'assets/twemojis/raising-hands-emoji.png',
+  'assets/twemojis/praying-hands-emoji.png',
+  'assets/twemojis/nail-polish-emoji.png',
+  'assets/twemojis/eyes-emoji.png',
+  'assets/twemojis/cat-face-emoji.png',
+  'assets/twemojis/dog-face-emoji.png',
+  'assets/twemojis/rose-emoji.png',
+  'assets/twemojis/tulip-emoji.png',
+  'assets/twemojis/pizza-emoji.png',
+  'assets/twemojis/construction-emoji.png',
+  'assets/twemojis/plane-emoji.png',
+  'assets/twemojis/rocket-emoji.png',
+  'assets/twemojis/clock-emoji.png',
+  'assets/twemojis/star-emoji.png',
+  'assets/twemojis/sun-emoji.png',
+  'assets/twemojis/moon-emoji.png',
+  'assets/twemojis/fire-emoji.png',
+  'assets/twemojis/sparkles-emoji.png',
+  'assets/twemojis/party-popper-emoji.png',
+  'assets/twemojis/gift-emoji.png',
+  'assets/twemojis/trophy-emoji.png',
+  'assets/twemojis/target-emoji.png',
+  'assets/twemojis/gem-emoji.png',
+  'assets/twemojis/money-emoji.png',
+  'assets/twemojis/pencil-emoji.png',
+  'assets/twemojis/graph-emoji.png',
+  'assets/twemojis/wip-emoji.png',
+  'assets/twemojis/winking-face-emoji.png',
+  'assets/twemojis/pleading-face-emoji.png',
+  'assets/twemojis/thinking-face-emoji.png',
+];
+
+// Image list
+var image_grid_items = [
+  'https://images.unsplash.com/photo-1609153259378-a8b23c766aec?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1866&q=80',
+  'https://images.unsplash.com/photo-1614435082296-ef0cbdb16b70?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80',
+  'https://images.unsplash.com/photo-1614432254115-7e756705e910?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60',
+  'https://images.unsplash.com/photo-1614423234685-544477464e15?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4fHx8ZW58MHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60',
+  'https://images.unsplash.com/photo-1614357235247-99fabbee67f9?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60',
+  'https://images.unsplash.com/photo-1614373371549-c7d2e4885f17?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOXx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60',
+];
+var image_categories = [
+  { name: 'background', image: 'assets/background.png' },
+  { name: 'wallpaper', image: 'assets/wallpaper.png' },
+  { name: 'nature', image: 'assets/nature.png' },
+  { name: 'summer', image: 'assets/summer.png' },
+  { name: 'beach', image: 'assets/beach.png' },
+  { name: 'space', image: 'assets/space.png' },
+  { name: 'office', image: 'assets/office.png' },
+  { name: 'food', image: 'assets/food.png' },
+];
+
+// Video list
+var video_categories = [
+  { name: 'rain', image: 'assets/rain.png' },
+  { name: 'cars', image: 'assets/cars.png' },
+  { name: 'meditation', image: 'assets/meditation.png' },
+  { name: 'forest', image: 'assets/forest.png' },
+  { name: 'animals', image: 'assets/animals.png' },
+  { name: 'street', image: 'assets/street.png' },
+  { name: 'travel', image: 'assets/travel.png' },
+  { name: 'work', image: 'assets/work.png' },
+];
+
+// Audio list
+var audio_items = [
+  {
+    name: 'Lofi Study',
+    desc: 'FASSounds',
+    duration: '2:27',
+    thumb: 'assets/audio/lofi-thumb.png',
+    src: 'assets/audio/lofi.mp3',
+    link: 'https://pixabay.com/users/fassounds-3433550/',
+  },
+  {
+    name: 'Stomping Rock (Four Shots)',
+    desc: 'AlexGrohl',
+    duration: '1:59',
+    thumb: 'assets/audio/stomping-rock-thumb.png',
+    src: 'assets/audio/stomping-rock.mp3',
+    link: 'https://pixabay.com/users/alexgrohl-25289918/',
+  },
+  {
+    name: 'Everything Feels New',
+    desc: 'EvgenyBardyuzha',
+    duration: '1:06',
+    thumb: 'assets/audio/everything-feels-new-thumb.png',
+    src: 'assets/audio/everything-feels-new.mp3',
+    link: 'https://pixabay.com/users/evgenybardyuzha-25235210/',
+  },
+  {
+    name: 'Both of Us',
+    desc: 'madiRFAN',
+    duration: '2:48',
+    thumb: 'assets/audio/both-of-us-thumb.png',
+    src: 'assets/audio/both-of-us.mp3',
+    link: 'https://pixabay.com/users/madirfan-50411/',
+  },
+  {
+    name: 'The Podcast Intro',
+    desc: 'Music Unlimited',
+    duration: '1:51',
+    thumb: 'assets/audio/the-podcast-intro-thumb.png',
+    src: 'assets/audio/the-podcast-intro.mp3',
+    link: 'https://pixabay.com/users/music_unlimited-27600023/',
+  },
+  {
+    name: 'Epic Cinematic Trailer',
+    desc: 'PavelYudin',
+    duration: '2:27',
+    thumb: 'assets/audio/epic-cinematic-trailer-thumb.png',
+    src: 'assets/audio/epic-cinematic-trailer.mp3',
+    link: 'https://pixabay.com/users/pavelyudin-27739282/',
+  },
+  {
+    name: 'Inspirational Background',
+    desc: 'AudioCoffee',
+    duration: '2:19',
+    thumb: 'assets/audio/inspirational-background-thumb.png',
+    src: 'assets/audio/inspirational-background.mp3',
+    link: 'https://pixabay.com/users/audiocoffee-27005420/',
+  },
+  {
+    name: 'Tropical Summer Music',
+    desc: 'Music Unlimited',
+    duration: '2:35',
+    thumb: 'assets/audio/tropical-summer-music-thumb.png',
+    src: 'assets/audio/tropical-summer-music.mp3',
+    link: 'https://pixabay.com/users/music_unlimited-27600023/',
+  },
+];
+
+// Text list
+var text_items = {
+  sansserif: [
+    { name: 'Roboto', fontname: 'Roboto' },
+    { name: 'Montserrat', fontname: 'Montserrat' },
+    { name: 'Poppins', fontname: 'Poppins' },
+  ],
+  serif: [
+    { name: 'Playfair Display', fontname: 'Playfair Display' },
+    { name: 'Merriweather', fontname: 'Merriweather' },
+    { name: 'IBM Plex Serif', fontname: 'IBM Plex Serif' },
+  ],
+  monospace: [
+    { name: 'Roboto Mono', fontname: 'Roboto Mono' },
+    { name: 'Inconsolata', fontname: 'Inconsolata' },
+    { name: 'Source Code Pro', fontname: 'Source Code Pro' },
+  ],
+  handwriting: [
+    { name: 'Dancing Script', fontname: 'Dancing Script' },
+    { name: 'Pacifico', fontname: 'Pacifico' },
+    { name: 'Indie Flower', fontname: 'Indie Flower' },
+  ],
+  display: [
+    { name: 'Lobster', fontname: 'Lobster' },
+    { name: 'Bebas Neue', fontname: 'Bebas Neue' },
+    { name: 'Titan One', fontname: 'Titan One' },
+  ],
+};
+
+WebFont.load({
+  google: {
+    families: ['Syne'],
+  },
+  active: () => {},
+});
+
+var webglBackend;
+try {
+  webglBackend = new fabric.WebglFilterBackend();
+} catch (e) {
+  console.log(e);
+}
+var canvas2dBackend = new fabric.Canvas2dFilterBackend();
+
+fabric.filterBackend = fabric.initFilterBackend();
+fabric.filterBackend = webglBackend;
+
+// Lottie support
+fabric.Lottie = fabric.util.createClass(fabric.Image, {
+  type: 'lottie',
+  lockRotation: true,
+  lockSkewingX: true,
+  lockSkewingY: true,
+  srcFromAttribute: false,
+
+  initialize: function (path, options) {
+    if (!options.width) options.width = 480;
+    if (!options.height) options.height = 480;
+
+    this.path = path;
+    this.tmpCanvasEl = fabric.util.createCanvasElement();
+    this.tmpCanvasEl.width = options.width;
+    this.tmpCanvasEl.height = options.height;
+
+    this.lottieItem = bodymovin.loadAnimation({
+      renderer: 'canvas',
+      loop: false,
+      autoplay: false,
+      path: path,
+      rendererSettings: {
+        context: this.tmpCanvasEl.getContext('2d'),
+        preserveAspectRatio: 'xMidYMid meet',
+      },
+    });
+
+    this.lottieItem.addEventListener('enterFrame', (e) => {
+      this.canvas.requestRenderAll();
+    });
+
+    this.lottieItem.addEventListener('DOMLoaded', () => {
+      this.lottieItem.goToAndStop(currenttime, false);
+      this.lottieItem.duration =
+        this.lottieItem.getDuration(false) * 1000;
+      this.canvas.requestRenderAll();
+      canvas.renderAll();
+      canvas.fire('lottie:loaded', { any: 'payload' });
+    });
+
+    this.callSuper('initialize', this.tmpCanvasEl, options);
+  },
+
+  goToSeconds: function (seconds) {
+    this.lottieItem.goToAndStop(seconds, false);
+    this.canvas.requestRenderAll();
+  },
+  goToFrame: function (frame) {
+    this.lottieItem.goToAndStop(frame, true);
+  },
+  getDuration: function () {
+    return this.lottieItem.getDuration(false);
+  },
+  play: function () {
+    this.lottieItem.play();
+  },
+  pause: function () {
+    this.lottieItem.pause();
+  },
+  getSrc: function () {
+    return this.path;
+  },
+});
+
+fabric.Lottie.fromObject = function (_object, callback) {
+  const object = fabric.util.object.clone(_object);
+  fabric.Image.prototype._initFilters.call(
+    object,
+    object.filters,
+    function (filters) {
+      object.filters = filters || [];
+      fabric.Image.prototype._initFilters.call(
+        object,
+        [object.resizeFilter],
+        function (resizeFilters) {
+          object.resizeFilter = resizeFilters[0];
+          fabric.util.enlivenObjects(
+            [object.clipPath],
+            function (enlivedProps) {
+              object.clipPath = enlivedProps[0];
+              const fabricLottie = new fabric.Lottie(
+                object.src,
+                object
+              );
+              callback(fabricLottie, false);
+            }
+          );
+        }
+      );
+    }
+  );
+};
+
+// Initialize canvas
+var canvas = new fabric.Canvas('canvas', {
+  preserveObjectStacking: true,
+  backgroundColor: '#FFF',
+  stateful: true,
+});
+canvas.selection = false;
+canvas.controlsAboveOverlay = true;
+
+// Customize controls
+fabric.Object.prototype.set({
+  transparentCorners: false,
+  borderColor: '#51B9F9',
+  cornerColor: '#FFF',
+  borderScaleFactor: 2.5,
+  cornerStyle: 'circle',
+  cornerStrokeColor: '#0E98FC',
+  borderOpacityWhenMoving: 1,
+});
+
+canvas.selectionColor = 'rgba(46, 115, 252, 0.11)';
+canvas.selectionBorderColor = 'rgba(98, 155, 255, 0.81)';
+canvas.selectionLineWidth = 1.5;
+
+var img = document.createElement('img');
+img.src = 'assets/middlecontrol.svg';
+
+var img2 = document.createElement('img');
+img2.src = 'assets/middlecontrolhoz.svg';
+
+var img3 = document.createElement('img');
+img3.src = 'assets/edgecontrol.svg';
+
+var img4 = document.createElement('img');
+img4.src = 'assets/rotateicon.svg';
+
+function renderIcon(ctx, left, top, styleOverride, fabricObject) {
+  const wsize = 20;
+  const hsize = 25;
+  ctx.save();
+  ctx.translate(left, top);
+  ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
+  ctx.drawImage(img, -wsize / 2, -hsize / 2, wsize, hsize);
+  ctx.restore();
+}
+function renderIconHoz(ctx, left, top, styleOverride, fabricObject) {
+  const wsize = 25;
+  const hsize = 20;
+  ctx.save();
+  ctx.translate(left, top);
+  ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
+  ctx.drawImage(img2, -wsize / 2, -hsize / 2, wsize, hsize);
+  ctx.restore();
+}
+function renderIconEdge(ctx, left, top, styleOverride, fabricObject) {
+  const wsize = 25;
+  const hsize = 25;
+  ctx.save();
+  ctx.translate(left, top);
+  ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
+  ctx.drawImage(img3, -wsize / 2, -hsize / 2, wsize, hsize);
+  ctx.restore();
+}
+
+function renderIconRotate(
+  ctx,
+  left,
+  top,
+  styleOverride,
+  fabricObject
+) {
+  const wsize = 40;
+  const hsize = 40;
+  ctx.save();
+  ctx.translate(left, top);
+  ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
+  ctx.drawImage(img4, -wsize / 2, -hsize / 2, wsize, hsize);
+  ctx.restore();
+}
+function resetControls() {
+  fabric.Object.prototype.controls.ml = new fabric.Control({
+    x: -0.5,
+    y: 0,
+    offsetX: -1,
+    cursorStyleHandler:
+      fabric.controlsUtils.scaleSkewCursorStyleHandler,
+    actionHandler: fabric.controlsUtils.scalingXOrSkewingY,
+    getActionName: fabric.controlsUtils.scaleOrSkewActionName,
+    render: renderIcon,
+  });
+
+  fabric.Object.prototype.controls.mr = new fabric.Control({
+    x: 0.5,
+    y: 0,
+    offsetX: 1,
+    cursorStyleHandler:
+      fabric.controlsUtils.scaleSkewCursorStyleHandler,
+    actionHandler: fabric.controlsUtils.scalingXOrSkewingY,
+    getActionName: fabric.controlsUtils.scaleOrSkewActionName,
+    render: renderIcon,
+  });
+
+  fabric.Object.prototype.controls.mb = new fabric.Control({
+    x: 0,
+    y: 0.5,
+    offsetY: 1,
+    cursorStyleHandler:
+      fabric.controlsUtils.scaleSkewCursorStyleHandler,
+    actionHandler: fabric.controlsUtils.scalingYOrSkewingX,
+    getActionName: fabric.controlsUtils.scaleOrSkewActionName,
+    render: renderIconHoz,
+  });
+
+  fabric.Object.prototype.controls.mt = new fabric.Control({
+    x: 0,
+    y: -0.5,
+    offsetY: -1,
+    cursorStyleHandler:
+      fabric.controlsUtils.scaleSkewCursorStyleHandler,
+    actionHandler: fabric.controlsUtils.scalingYOrSkewingX,
+    getActionName: fabric.controlsUtils.scaleOrSkewActionName,
+    render: renderIconHoz,
+  });
+
+  fabric.Object.prototype.controls.tl = new fabric.Control({
+    x: -0.5,
+    y: -0.5,
+    cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,
+    actionHandler: fabric.controlsUtils.scalingEqually,
+    render: renderIconEdge,
+  });
+
+  fabric.Object.prototype.controls.tr = new fabric.Control({
+    x: 0.5,
+    y: -0.5,
+    cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,
+    actionHandler: fabric.controlsUtils.scalingEqually,
+    render: renderIconEdge,
+  });
+
+  fabric.Object.prototype.controls.bl = new fabric.Control({
+    x: -0.5,
+    y: 0.5,
+    cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,
+    actionHandler: fabric.controlsUtils.scalingEqually,
+    render: renderIconEdge,
+  });
+
+  fabric.Object.prototype.controls.br = new fabric.Control({
+    x: 0.5,
+    y: 0.5,
+    cursorStyleHandler: fabric.controlsUtils.scaleCursorStyleHandler,
+    actionHandler: fabric.controlsUtils.scalingEqually,
+    render: renderIconEdge,
+  });
+
+  fabric.Object.prototype.controls.mtr = new fabric.Control({
+    x: 0,
+    y: 0.5,
+    cursorStyleHandler: fabric.controlsUtils.rotationStyleHandler,
+    actionHandler: fabric.controlsUtils.rotationWithSnapping,
+    offsetY: 30,
+    withConnecton: false,
+    actionName: 'rotate',
+    render: renderIconRotate,
+  });
+}
+resetControls();
+var textBoxControls = (fabric.Textbox.prototype.controls = {});
+
+textBoxControls.mtr = fabric.Object.prototype.controls.mtr;
+textBoxControls.tr = fabric.Object.prototype.controls.tr;
+textBoxControls.br = fabric.Object.prototype.controls.br;
+textBoxControls.tl = fabric.Object.prototype.controls.tl;
+textBoxControls.bl = fabric.Object.prototype.controls.bl;
+textBoxControls.mt = fabric.Object.prototype.controls.mt;
+textBoxControls.mb = fabric.Object.prototype.controls.mb;
+
+textBoxControls.ml = new fabric.Control({
+  x: -0.5,
+  y: 0,
+  offsetX: -1,
+  cursorStyleHandler:
+    fabric.controlsUtils.scaleSkewCursorStyleHandler,
+  actionHandler: fabric.controlsUtils.changeWidth,
+  actionName: 'resizing',
+  render: renderIcon,
+});
+
+textBoxControls.mr = new fabric.Control({
+  x: 0.5,
+  y: 0,
+  offsetX: 1,
+  cursorStyleHandler:
+    fabric.controlsUtils.scaleSkewCursorStyleHandler,
+  actionHandler: fabric.controlsUtils.changeWidth,
+  actionName: 'resizing',
+  render: renderIcon,
+});
+
+// Get any object by ID
+fabric.Canvas.prototype.getItemById = function (name) {
+  var object = null,
+    objects = this.getObjects();
+  for (var i = 0, len = this.size(); i < len; i++) {
+    if (objects[i].get('type') == 'group') {
+      if (objects[i].get('id') && objects[i].get('id') === name) {
+        object = objects[i];
+        break;
+      }
+      var wip = i;
+      for (var o = 0; o < objects[i]._objects.length; o++) {
+        if (
+          objects[wip]._objects[o].id &&
+          objects[wip]._objects[o].id === name
+        ) {
+          object = objects[wip]._objects[o];
+          break;
+        }
+      }
+    } else if (objects[i].id && objects[i].id === name) {
+      object = objects[i];
+      break;
+    }
+  }
+  return object;
+};
+
+// Create the artboard
+var a_width = 600;
+var a_height = 500;
+var artboard = new fabric.Rect({
+  left: canvas.get('width') / 2 - a_width / 2,
+  top: canvas.get('height') / 2 - a_height / 2,
+  width: a_width,
+  height: a_height,
+  absolutePositioned: true,
+  rx: 0,
+  ry: 0,
+  fill: '#FFF',
+  hasControls: true,
+  transparentCorners: false,
+  borderColor: '#0E98FC',
+  cornerColor: '#0E98FC',
+  cursorWidth: 1,
+  cursorDuration: 1,
+  cursorDelay: 250,
+  id: 'overlay',
+});
+canvas.renderAll();
+
+// Clip canvas to the artboard
+canvas.clipPath = artboard;
+canvas.renderAll();
+
+// Initialize color picker (fill)
+var o_fill = Pickr.create({
+  el: '#color-picker-fill',
+  theme: 'nano',
+  inline: true,
+  useAsButton: true,
+  swatches: null,
+  default: '#FFFFFF',
+  showAlways: true,
+  components: {
+    preview: true,
+    opacity: true,
+    hue: true,
+    interaction: {
+      hex: true,
+      rgba: true,
+      hsla: false,
+      hsva: false,
+      cmyk: false,
+      input: true,
+      clear: false,
+      save: false,
+    },
+  },
+});
+
+// Color picker events
+o_fill
+  .on('init', (instance) => {
+    o_fill.hide();
+  })
+  .on('change', (instance) => {
+    if (canvas.getActiveObject()) {
+      const object = canvas.getActiveObject();
+      if (colormode == 'fill') {
+        $('#object-color-fill input').val(
+          o_fill.getColor().toHEXA().toString().substring(0, 7)
+        );
+        $('#object-color-fill-opacity input').val(
+          Math.round(o_fill.getColor().toRGBA()[3] * 100 * 100) / 100
+        );
+        $('#color-fill-side').css(
+          'background-color',
+          o_fill.getColor().toHEXA().toString().substring(0, 7)
+        );
+        object.set('fill', o_fill.getColor().toRGBA().toString());
+        if (!seeking && !setting) {
+          newKeyframe(
+            'fill',
+            object,
+            currenttime,
+            object.get('fill'),
+            true
+          );
+        }
+      } else if (colormode == 'stroke') {
+        $('#object-color-stroke input').val(
+          o_fill.getColor().toHEXA().toString().substring(0, 7)
+        );
+        $('#object-color-stroke-opacity input').val(
+          Math.round(o_fill.getColor().toRGBA()[3] * 100 * 100) / 100
+        );
+        $('#color-stroke-side').css(
+          'background-color',
+          o_fill.getColor().toHEXA().toString().substring(0, 7)
+        );
+        object.set('stroke', o_fill.getColor().toRGBA().toString());
+        if (!seeking && !setting) {
+          newKeyframe(
+            'stroke',
+            object,
+            currenttime,
+            object.get('stroke'),
+            true
+          );
+          newKeyframe(
+            'strokeWidth',
+            object,
+            currenttime,
+            object.get('strokeWidth'),
+            true
+          );
+        }
+      } else if (colormode == 'shadow') {
+        $('#object-color-shadow input').val(
+          o_fill.getColor().toHEXA().toString().substring(0, 7)
+        );
+        $('#object-color-shadow-opacity input').val(
+          Math.round(o_fill.getColor().toRGBA()[3] * 100 * 100) / 100
+        );
+        $('#color-shadow-side').css(
+          'background-color',
+          o_fill.getColor().toHEXA().toString().substring(0, 7)
+        );
+        object.set(
+          'shadow',
+          new fabric.Shadow({
+            color: o_fill.getColor().toRGBA().toString(),
+            offsetX: object.shadow.offsetX,
+            offsetY: object.shadow.offsetY,
+            blur: object.shadow.blur,
+            opacity: object.shadow.opacity,
+          })
+        );
+        if (!seeking && !setting) {
+          newKeyframe(
+            'shadow.color',
+            object,
+            currenttime,
+            object.shadow.color,
+            true
+          );
+        }
+      } else if (colormode == 'chroma') {
+        var obj = canvas.getActiveObject();
+        $('#chroma-color input').val(
+          o_fill.getColor().toHEXA().toString().substring(0, 7)
+        );
+        $('#color-chroma-side').css(
+          'background-color',
+          o_fill.getColor().toHEXA().toString().substring(0, 7)
+        );
+        if (obj.filters.find((x) => x.type == 'RemoveColor')) {
+          obj.filters.find((x) => x.type == 'RemoveColor').color =
+            o_fill.getColor().toRGBA().toString();
+        }
+        updateChromaValues();
+      } else if (colormode == 'text') {
+        var obj = canvas.getActiveObject();
+        $('#text-color input').val(
+          o_fill.getColor().toHEXA().toString().substring(0, 7)
+        );
+        $('#color-text-side').css(
+          'background-color',
+          o_fill.getColor().toHEXA().toString().substring(0, 7)
+        );
+        animatedtext
+          .find((x) => x.id == obj.id)
+          .setProps(
+            { fill: o_fill.getColor().toRGBA().toString() },
+            canvas
+          );
+      }
+      canvas.renderAll();
+    } else {
+      if (colormode == 'back') {
+        $('#canvas-color input').val(
+          o_fill.getColor().toHEXA().toString().substring(0, 7)
+        );
+        $('#canvas-color-opacity input').val(
+          Math.round(o_fill.getColor().toRGBA()[3] * 100 * 100) / 100
+        );
+        $('#color-side').css(
+          'background-color',
+          o_fill.getColor().toHEXA().toString().substring(0, 7)
+        );
+        canvas.setBackgroundColor(
+          o_fill.getColor().toRGBA().toString()
+        );
+        canvas.renderAll();
+      }
+    }
+  })
+  .on('show', (instance) => {
+    $('.pcr-current-color').html(
+      "<img id='eyedropper' src='assets/eyedropper.svg'>"
+    );
+  });
+
+var f = fabric.Image.filters;
+
+// Canvas recorder initialization
+var canvasrecord = new fabric.Canvas('canvasrecord', {
+  preserveObjectStacking: true,
+  backgroundColor: '#FFF',
+  width: artboard.width,
+  height: artboard.height,
+});
+
+var timelineslider = document.getElementById('timeline-zoom');
+var t_slider = new RangeSlider(timelineslider, {
+  design: '2d',
+  theme: 'default',
+  handle: 'round',
+  popup: null,
+  showMinMaxLabels: false,
+  unit: '%',
+  min: 5,
+  max: 47,
+  value: 47,
+  onmove: function (x) {
+    setTimelineZoom(-1 * (x - 51));
+  },
+  onfinish: function (x) {
+    setTimelineZoom(-1 * (x - 51));
+  },
+  onstart: function (x) {},
+});
+
+const selectbox = new SelectionArea({
+  class: 'selection-area',
+  selectables: ['.keyframe'],
+  container: '#timeline',
+  // Query selectors for elements from where a selection can be started from.
+  startareas: ['html'],
+
+  // Query selectors for elements which will be used as boundaries for the selection.
+  boundaries: ['#timeline'],
+
+  startThreshold: 10,
+
+  allowTouch: true,
+
+  intersect: 'touch',
+
+  overlap: 'invert',
+
+  // Configuration in case a selectable gets just clicked.
+  singleTap: {
+    allow: false,
+    intersect: 'native',
+  },
+
+  // Scroll configuration.
+  scrolling: {
+    speedDivider: 10,
+    manualSpeed: 750,
+  },
+});
+
+selectbox
+  .on('beforestart', (evt) => {
+    if (
+      $(evt.event.target).hasClass('keyframe') ||
+      $(evt.event.target).attr('id') == 'seekbar' ||
+      $(evt.event.target).parent().hasClass('main-row') ||
+      $(evt.event.target).hasClass('main-row') ||
+      $(evt.event.target).hasClass('trim-row') ||
+      evt.event.which === 3
+    ) {
+      return false;
+    }
+  })
+  .on('start', (evt) => {})
+  .on('move', (evt) => {})
+  .on('stop', (evt) => {
+    $('.keyframe-selected').removeClass('keyframe-selected');
+    shiftkeys = [];
+    if (evt.store.selected.length == 0) {
+      $('.keyframe-selected').removeClass('keyframe-selected');
+    } else {
+      canvas.discardActiveObject();
+      canvas.renderAll();
+      evt.store.selected.forEach(function (key) {
+        shiftkeys.push({
+          keyframe: key,
+          offset: $(key).offset().left,
+        });
+        $(key).addClass('keyframe-selected');
+      });
+    }
+  });

js/libraries/anime.min.js

@@ -0,0 +1,8 @@
+/*
+ * anime.js v3.2.1
+ * (c) 2020 Julian Garnier
+ * Released under the MIT license
+ * animejs.com
+ */
+
+!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):n.anime=e()}(this,function(){"use strict";var n={update:null,begin:null,loopBegin:null,changeBegin:null,change:null,changeComplete:null,loopComplete:null,complete:null,loop:1,direction:"normal",autoplay:!0,timelineOffset:0},e={duration:1e3,delay:0,endDelay:0,easing:"easeOutElastic(1, .5)",round:0},t=["translateX","translateY","translateZ","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","skew","skewX","skewY","perspective","matrix","matrix3d"],r={CSS:{},springs:{}};function a(n,e,t){return Math.min(Math.max(n,e),t)}function o(n,e){return n.indexOf(e)>-1}function u(n,e){return n.apply(null,e)}var i={arr:function(n){return Array.isArray(n)},obj:function(n){return o(Object.prototype.toString.call(n),"Object")},pth:function(n){return i.obj(n)&&n.hasOwnProperty("totalLength")},svg:function(n){return n instanceof SVGElement},inp:function(n){return n instanceof HTMLInputElement},dom:function(n){return n.nodeType||i.svg(n)},str:function(n){return"string"==typeof n},fnc:function(n){return"function"==typeof n},und:function(n){return void 0===n},nil:function(n){return i.und(n)||null===n},hex:function(n){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(n)},rgb:function(n){return/^rgb/.test(n)},hsl:function(n){return/^hsl/.test(n)},col:function(n){return i.hex(n)||i.rgb(n)||i.hsl(n)},key:function(t){return!n.hasOwnProperty(t)&&!e.hasOwnProperty(t)&&"targets"!==t&&"keyframes"!==t}};function c(n){var e=/\(([^)]+)\)/.exec(n);return e?e[1].split(",").map(function(n){return parseFloat(n)}):[]}function s(n,e){var t=c(n),o=a(i.und(t[0])?1:t[0],.1,100),u=a(i.und(t[1])?100:t[1],.1,100),s=a(i.und(t[2])?10:t[2],.1,100),f=a(i.und(t[3])?0:t[3],.1,100),l=Math.sqrt(u/o),d=s/(2*Math.sqrt(u*o)),p=d<1?l*Math.sqrt(1-d*d):0,v=1,h=d<1?(d*l-f)/p:-f+l;function g(n){var t=e?e*n/1e3:n;return t=d<1?Math.exp(-t*d*l)*(v*Math.cos(p*t)+h*Math.sin(p*t)):(v+h*t)*Math.exp(-t*l),0===n||1===n?n:1-t}return e?g:function(){var e=r.springs[n];if(e)return e;for(var t=0,a=0;;)if(1===g(t+=1/6)){if(++a>=16)break}else a=0;var o=t*(1/6)*1e3;return r.springs[n]=o,o}}function f(n){return void 0===n&&(n=10),function(e){return Math.ceil(a(e,1e-6,1)*n)*(1/n)}}var l,d,p=function(){var n=11,e=1/(n-1);function t(n,e){return 1-3*e+3*n}function r(n,e){return 3*e-6*n}function a(n){return 3*n}function o(n,e,o){return((t(e,o)*n+r(e,o))*n+a(e))*n}function u(n,e,o){return 3*t(e,o)*n*n+2*r(e,o)*n+a(e)}return function(t,r,a,i){if(0<=t&&t<=1&&0<=a&&a<=1){var c=new Float32Array(n);if(t!==r||a!==i)for(var s=0;s<n;++s)c[s]=o(s*e,t,a);return function(n){return t===r&&a===i?n:0===n||1===n?n:o(f(n),r,i)}}function f(r){for(var i=0,s=1,f=n-1;s!==f&&c[s]<=r;++s)i+=e;var l=i+(r-c[--s])/(c[s+1]-c[s])*e,d=u(l,t,a);return d>=.001?function(n,e,t,r){for(var a=0;a<4;++a){var i=u(e,t,r);if(0===i)return e;e-=(o(e,t,r)-n)/i}return e}(r,l,t,a):0===d?l:function(n,e,t,r,a){for(var u,i,c=0;(u=o(i=e+(t-e)/2,r,a)-n)>0?t=i:e=i,Math.abs(u)>1e-7&&++c<10;);return i}(r,i,i+e,t,a)}}}(),v=(l={linear:function(){return function(n){return n}}},d={Sine:function(){return function(n){return 1-Math.cos(n*Math.PI/2)}},Circ:function(){return function(n){return 1-Math.sqrt(1-n*n)}},Back:function(){return function(n){return n*n*(3*n-2)}},Bounce:function(){return function(n){for(var e,t=4;n<((e=Math.pow(2,--t))-1)/11;);return 1/Math.pow(4,3-t)-7.5625*Math.pow((3*e-2)/22-n,2)}},Elastic:function(n,e){void 0===n&&(n=1),void 0===e&&(e=.5);var t=a(n,1,10),r=a(e,.1,2);return function(n){return 0===n||1===n?n:-t*Math.pow(2,10*(n-1))*Math.sin((n-1-r/(2*Math.PI)*Math.asin(1/t))*(2*Math.PI)/r)}}},["Quad","Cubic","Quart","Quint","Expo"].forEach(function(n,e){d[n]=function(){return function(n){return Math.pow(n,e+2)}}}),Object.keys(d).forEach(function(n){var e=d[n];l["easeIn"+n]=e,l["easeOut"+n]=function(n,t){return function(r){return 1-e(n,t)(1-r)}},l["easeInOut"+n]=function(n,t){return function(r){return r<.5?e(n,t)(2*r)/2:1-e(n,t)(-2*r+2)/2}},l["easeOutIn"+n]=function(n,t){return function(r){return r<.5?(1-e(n,t)(1-2*r))/2:(e(n,t)(2*r-1)+1)/2}}}),l);function h(n,e){if(i.fnc(n))return n;var t=n.split("(")[0],r=v[t],a=c(n);switch(t){case"spring":return s(n,e);case"cubicBezier":return u(p,a);case"steps":return u(f,a);default:return u(r,a)}}function g(n){try{return document.querySelectorAll(n)}catch(n){return}}function m(n,e){for(var t=n.length,r=arguments.length>=2?arguments[1]:void 0,a=[],o=0;o<t;o++)if(o in n){var u=n[o];e.call(r,u,o,n)&&a.push(u)}return a}function y(n){return n.reduce(function(n,e){return n.concat(i.arr(e)?y(e):e)},[])}function b(n){return i.arr(n)?n:(i.str(n)&&(n=g(n)||n),n instanceof NodeList||n instanceof HTMLCollection?[].slice.call(n):[n])}function M(n,e){return n.some(function(n){return n===e})}function x(n){var e={};for(var t in n)e[t]=n[t];return e}function w(n,e){var t=x(n);for(var r in n)t[r]=e.hasOwnProperty(r)?e[r]:n[r];return t}function k(n,e){var t=x(n);for(var r in e)t[r]=i.und(n[r])?e[r]:n[r];return t}function O(n){return i.rgb(n)?(t=/rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(e=n))?"rgba("+t[1]+",1)":e:i.hex(n)?(r=n.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(n,e,t,r){return e+e+t+t+r+r}),a=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(r),"rgba("+parseInt(a[1],16)+","+parseInt(a[2],16)+","+parseInt(a[3],16)+",1)"):i.hsl(n)?function(n){var e,t,r,a=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(n)||/hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(n),o=parseInt(a[1],10)/360,u=parseInt(a[2],10)/100,i=parseInt(a[3],10)/100,c=a[4]||1;function s(n,e,t){return t<0&&(t+=1),t>1&&(t-=1),t<1/6?n+6*(e-n)*t:t<.5?e:t<2/3?n+(e-n)*(2/3-t)*6:n}if(0==u)e=t=r=i;else{var f=i<.5?i*(1+u):i+u-i*u,l=2*i-f;e=s(l,f,o+1/3),t=s(l,f,o),r=s(l,f,o-1/3)}return"rgba("+255*e+","+255*t+","+255*r+","+c+")"}(n):void 0;var e,t,r,a}function C(n){var e=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(n);if(e)return e[1]}function P(n,e){return i.fnc(n)?n(e.target,e.id,e.total):n}function I(n,e){return n.getAttribute(e)}function D(n,e,t){if(M([t,"deg","rad","turn"],C(e)))return e;var a=r.CSS[e+t];if(!i.und(a))return a;var o=document.createElement(n.tagName),u=n.parentNode&&n.parentNode!==document?n.parentNode:document.body;u.appendChild(o),o.style.position="absolute",o.style.width=100+t;var c=100/o.offsetWidth;u.removeChild(o);var s=c*parseFloat(e);return r.CSS[e+t]=s,s}function B(n,e,t){if(e in n.style){var r=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),a=n.style[e]||getComputedStyle(n).getPropertyValue(r)||"0";return t?D(n,a,t):a}}function T(n,e){return i.dom(n)&&!i.inp(n)&&(!i.nil(I(n,e))||i.svg(n)&&n[e])?"attribute":i.dom(n)&&M(t,e)?"transform":i.dom(n)&&"transform"!==e&&B(n,e)?"css":null!=n[e]?"object":void 0}function E(n){if(i.dom(n)){for(var e,t=n.style.transform||"",r=/(\w+)\(([^)]*)\)/g,a=new Map;e=r.exec(t);)a.set(e[1],e[2]);return a}}function F(n,e,t,r){var a,u=o(e,"scale")?1:0+(o(a=e,"translate")||"perspective"===a?"px":o(a,"rotate")||o(a,"skew")?"deg":void 0),i=E(n).get(e)||u;return t&&(t.transforms.list.set(e,i),t.transforms.last=e),r?D(n,i,r):i}function A(n,e,t,r){switch(T(n,e)){case"transform":return F(n,e,r,t);case"css":return B(n,e,t);case"attribute":return I(n,e);default:return n[e]||0}}function N(n,e){var t=/^(\*=|\+=|-=)/.exec(n);if(!t)return n;var r=C(n)||0,a=parseFloat(e),o=parseFloat(n.replace(t[0],""));switch(t[0][0]){case"+":return a+o+r;case"-":return a-o+r;case"*":return a*o+r}}function S(n,e){if(i.col(n))return O(n);if(/\s/g.test(n))return n;var t=C(n),r=t?n.substr(0,n.length-t.length):n;return e?r+e:r}function L(n,e){return Math.sqrt(Math.pow(e.x-n.x,2)+Math.pow(e.y-n.y,2))}function j(n){for(var e,t=n.points,r=0,a=0;a<t.numberOfItems;a++){var o=t.getItem(a);a>0&&(r+=L(e,o)),e=o}return r}function q(n){if(n.getTotalLength)return n.getTotalLength();switch(n.tagName.toLowerCase()){case"circle":return o=n,2*Math.PI*I(o,"r");case"rect":return 2*I(a=n,"width")+2*I(a,"height");case"line":return L({x:I(r=n,"x1"),y:I(r,"y1")},{x:I(r,"x2"),y:I(r,"y2")});case"polyline":return j(n);case"polygon":return t=(e=n).points,j(e)+L(t.getItem(t.numberOfItems-1),t.getItem(0))}var e,t,r,a,o}function H(n,e){var t=e||{},r=t.el||function(n){for(var e=n.parentNode;i.svg(e)&&i.svg(e.parentNode);)e=e.parentNode;return e}(n),a=r.getBoundingClientRect(),o=I(r,"viewBox"),u=a.width,c=a.height,s=t.viewBox||(o?o.split(" "):[0,0,u,c]);return{el:r,viewBox:s,x:s[0]/1,y:s[1]/1,w:u,h:c,vW:s[2],vH:s[3]}}function V(n,e,t){function r(t){void 0===t&&(t=0);var r=e+t>=1?e+t:0;return n.el.getPointAtLength(r)}var a=H(n.el,n.svg),o=r(),u=r(-1),i=r(1),c=t?1:a.w/a.vW,s=t?1:a.h/a.vH;switch(n.property){case"x":return(o.x-a.x)*c;case"y":return(o.y-a.y)*s;case"angle":return 180*Math.atan2(i.y-u.y,i.x-u.x)/Math.PI}}function $(n,e){var t=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g,r=S(i.pth(n)?n.totalLength:n,e)+"";return{original:r,numbers:r.match(t)?r.match(t).map(Number):[0],strings:i.str(n)||e?r.split(t):[]}}function W(n){return m(n?y(i.arr(n)?n.map(b):b(n)):[],function(n,e,t){return t.indexOf(n)===e})}function X(n){var e=W(n);return e.map(function(n,t){return{target:n,id:t,total:e.length,transforms:{list:E(n)}}})}function Y(n,e){var t=x(e);if(/^spring/.test(t.easing)&&(t.duration=s(t.easing)),i.arr(n)){var r=n.length;2===r&&!i.obj(n[0])?n={value:n}:i.fnc(e.duration)||(t.duration=e.duration/r)}var a=i.arr(n)?n:[n];return a.map(function(n,t){var r=i.obj(n)&&!i.pth(n)?n:{value:n};return i.und(r.delay)&&(r.delay=t?0:e.delay),i.und(r.endDelay)&&(r.endDelay=t===a.length-1?e.endDelay:0),r}).map(function(n){return k(n,t)})}function Z(n,e){var t=[],r=e.keyframes;for(var a in r&&(e=k(function(n){for(var e=m(y(n.map(function(n){return Object.keys(n)})),function(n){return i.key(n)}).reduce(function(n,e){return n.indexOf(e)<0&&n.push(e),n},[]),t={},r=function(r){var a=e[r];t[a]=n.map(function(n){var e={};for(var t in n)i.key(t)?t==a&&(e.value=n[t]):e[t]=n[t];return e})},a=0;a<e.length;a++)r(a);return t}(r),e)),e)i.key(a)&&t.push({name:a,tweens:Y(e[a],n)});return t}function G(n,e){var t;return n.tweens.map(function(r){var a=function(n,e){var t={};for(var r in n){var a=P(n[r],e);i.arr(a)&&1===(a=a.map(function(n){return P(n,e)})).length&&(a=a[0]),t[r]=a}return t.duration=parseFloat(t.duration),t.delay=parseFloat(t.delay),t}(r,e),o=a.value,u=i.arr(o)?o[1]:o,c=C(u),s=A(e.target,n.name,c,e),f=t?t.to.original:s,l=i.arr(o)?o[0]:f,d=C(l)||C(s),p=c||d;return i.und(u)&&(u=f),a.from=$(l,p),a.to=$(N(u,l),p),a.start=t?t.end:0,a.end=a.start+a.delay+a.duration+a.endDelay,a.easing=h(a.easing,a.duration),a.isPath=i.pth(o),a.isPathTargetInsideSVG=a.isPath&&i.svg(e.target),a.isColor=i.col(a.from.original),a.isColor&&(a.round=1),t=a,a})}var Q={css:function(n,e,t){return n.style[e]=t},attribute:function(n,e,t){return n.setAttribute(e,t)},object:function(n,e,t){return n[e]=t},transform:function(n,e,t,r,a){if(r.list.set(e,t),e===r.last||a){var o="";r.list.forEach(function(n,e){o+=e+"("+n+") "}),n.style.transform=o}}};function z(n,e){X(n).forEach(function(n){for(var t in e){var r=P(e[t],n),a=n.target,o=C(r),u=A(a,t,o,n),i=N(S(r,o||C(u)),u),c=T(a,t);Q[c](a,t,i,n.transforms,!0)}})}function _(n,e){return m(y(n.map(function(n){return e.map(function(e){return function(n,e){var t=T(n.target,e.name);if(t){var r=G(e,n),a=r[r.length-1];return{type:t,property:e.name,animatable:n,tweens:r,duration:a.end,delay:r[0].delay,endDelay:a.endDelay}}}(n,e)})})),function(n){return!i.und(n)})}function R(n,e){var t=n.length,r=function(n){return n.timelineOffset?n.timelineOffset:0},a={};return a.duration=t?Math.max.apply(Math,n.map(function(n){return r(n)+n.duration})):e.duration,a.delay=t?Math.min.apply(Math,n.map(function(n){return r(n)+n.delay})):e.delay,a.endDelay=t?a.duration-Math.max.apply(Math,n.map(function(n){return r(n)+n.duration-n.endDelay})):e.endDelay,a}var J=0;var K=[],U=function(){var n;function e(t){for(var r=K.length,a=0;a<r;){var o=K[a];o.paused?(K.splice(a,1),r--):(o.tick(t),a++)}n=a>0?requestAnimationFrame(e):void 0}return"undefined"!=typeof document&&document.addEventListener("visibilitychange",function(){en.suspendWhenDocumentHidden&&(nn()?n=cancelAnimationFrame(n):(K.forEach(function(n){return n._onDocumentVisibility()}),U()))}),function(){n||nn()&&en.suspendWhenDocumentHidden||!(K.length>0)||(n=requestAnimationFrame(e))}}();function nn(){return!!document&&document.hidden}function en(t){void 0===t&&(t={});var r,o=0,u=0,i=0,c=0,s=null;function f(n){var e=window.Promise&&new Promise(function(n){return s=n});return n.finished=e,e}var l,d,p,v,h,g,y,b,M=(d=w(n,l=t),p=w(e,l),v=Z(p,l),h=X(l.targets),g=_(h,v),y=R(g,p),b=J,J++,k(d,{id:b,children:[],animatables:h,animations:g,duration:y.duration,delay:y.delay,endDelay:y.endDelay}));f(M);function x(){var n=M.direction;"alternate"!==n&&(M.direction="normal"!==n?"normal":"reverse"),M.reversed=!M.reversed,r.forEach(function(n){return n.reversed=M.reversed})}function O(n){return M.reversed?M.duration-n:n}function C(){o=0,u=O(M.currentTime)*(1/en.speed)}function P(n,e){e&&e.seek(n-e.timelineOffset)}function I(n){for(var e=0,t=M.animations,r=t.length;e<r;){var o=t[e],u=o.animatable,i=o.tweens,c=i.length-1,s=i[c];c&&(s=m(i,function(e){return n<e.end})[0]||s);for(var f=a(n-s.start-s.delay,0,s.duration)/s.duration,l=isNaN(f)?1:s.easing(f),d=s.to.strings,p=s.round,v=[],h=s.to.numbers.length,g=void 0,y=0;y<h;y++){var b=void 0,x=s.to.numbers[y],w=s.from.numbers[y]||0;b=s.isPath?V(s.value,l*x,s.isPathTargetInsideSVG):w+l*(x-w),p&&(s.isColor&&y>2||(b=Math.round(b*p)/p)),v.push(b)}var k=d.length;if(k){g=d[0];for(var O=0;O<k;O++){d[O];var C=d[O+1],P=v[O];isNaN(P)||(g+=C?P+C:P+" ")}}else g=v[0];Q[o.type](u.target,o.property,g,u.transforms),o.currentValue=g,e++}}function D(n){M[n]&&!M.passThrough&&M[n](M)}function B(n){var e=M.duration,t=M.delay,l=e-M.endDelay,d=O(n);M.progress=a(d/e*100,0,100),M.reversePlayback=d<M.currentTime,r&&function(n){if(M.reversePlayback)for(var e=c;e--;)P(n,r[e]);else for(var t=0;t<c;t++)P(n,r[t])}(d),!M.began&&M.currentTime>0&&(M.began=!0,D("begin")),!M.loopBegan&&M.currentTime>0&&(M.loopBegan=!0,D("loopBegin")),d<=t&&0!==M.currentTime&&I(0),(d>=l&&M.currentTime!==e||!e)&&I(e),d>t&&d<l?(M.changeBegan||(M.changeBegan=!0,M.changeCompleted=!1,D("changeBegin")),D("change"),I(d)):M.changeBegan&&(M.changeCompleted=!0,M.changeBegan=!1,D("changeComplete")),M.currentTime=a(d,0,e),M.began&&D("update"),n>=e&&(u=0,M.remaining&&!0!==M.remaining&&M.remaining--,M.remaining?(o=i,D("loopComplete"),M.loopBegan=!1,"alternate"===M.direction&&x()):(M.paused=!0,M.completed||(M.completed=!0,D("loopComplete"),D("complete"),!M.passThrough&&"Promise"in window&&(s(),f(M)))))}return M.reset=function(){var n=M.direction;M.passThrough=!1,M.currentTime=0,M.progress=0,M.paused=!0,M.began=!1,M.loopBegan=!1,M.changeBegan=!1,M.completed=!1,M.changeCompleted=!1,M.reversePlayback=!1,M.reversed="reverse"===n,M.remaining=M.loop,r=M.children;for(var e=c=r.length;e--;)M.children[e].reset();(M.reversed&&!0!==M.loop||"alternate"===n&&1===M.loop)&&M.remaining++,I(M.reversed?M.duration:0)},M._onDocumentVisibility=C,M.set=function(n,e){return z(n,e),M},M.tick=function(n){i=n,o||(o=i),B((i+(u-o))*en.speed)},M.seek=function(n){B(O(n))},M.pause=function(){M.paused=!0,C()},M.play=function(){M.paused&&(M.completed&&M.reset(),M.paused=!1,K.push(M),C(),U())},M.reverse=function(){x(),M.completed=!M.reversed,C()},M.restart=function(){M.reset(),M.play()},M.remove=function(n){rn(W(n),M)},M.reset(),M.autoplay&&M.play(),M}function tn(n,e){for(var t=e.length;t--;)M(n,e[t].animatable.target)&&e.splice(t,1)}function rn(n,e){var t=e.animations,r=e.children;tn(n,t);for(var a=r.length;a--;){var o=r[a],u=o.animations;tn(n,u),u.length||o.children.length||r.splice(a,1)}t.length||r.length||e.pause()}return en.version="3.2.1",en.speed=1,en.suspendWhenDocumentHidden=!0,en.running=K,en.remove=function(n){for(var e=W(n),t=K.length;t--;)rn(e,K[t])},en.get=A,en.set=z,en.convertPx=D,en.path=function(n,e){var t=i.str(n)?g(n)[0]:n,r=e||100;return function(n){return{property:n,el:t,svg:H(t),totalLength:q(t)*(r/100)}}},en.setDashoffset=function(n){var e=q(n);return n.setAttribute("stroke-dasharray",e),e},en.stagger=function(n,e){void 0===e&&(e={});var t=e.direction||"normal",r=e.easing?h(e.easing):null,a=e.grid,o=e.axis,u=e.from||0,c="first"===u,s="center"===u,f="last"===u,l=i.arr(n),d=l?parseFloat(n[0]):parseFloat(n),p=l?parseFloat(n[1]):0,v=C(l?n[1]:n)||0,g=e.start||0+(l?d:0),m=[],y=0;return function(n,e,i){if(c&&(u=0),s&&(u=(i-1)/2),f&&(u=i-1),!m.length){for(var h=0;h<i;h++){if(a){var b=s?(a[0]-1)/2:u%a[0],M=s?(a[1]-1)/2:Math.floor(u/a[0]),x=b-h%a[0],w=M-Math.floor(h/a[0]),k=Math.sqrt(x*x+w*w);"x"===o&&(k=-x),"y"===o&&(k=-w),m.push(k)}else m.push(Math.abs(u-h));y=Math.max.apply(Math,m)}r&&(m=m.map(function(n){return r(n/y)*y})),"reverse"===t&&(m=m.map(function(n){return o?n<0?-1*n:-n:Math.abs(y-n)}))}return g+(l?(p-d)/y:d)*(Math.round(100*m[e])/100)+v}},en.timeline=function(n){void 0===n&&(n={});var t=en(n);return t.duration=0,t.add=function(r,a){var o=K.indexOf(t),u=t.children;function c(n){n.passThrough=!0}o>-1&&K.splice(o,1);for(var s=0;s<u.length;s++)c(u[s]);var f=k(r,w(e,n));f.targets=f.targets||n.targets;var l=t.duration;f.autoplay=!1,f.direction=t.direction,f.timelineOffset=i.und(a)?l:N(a,l),c(t),t.seek(f.timelineOffset);var d=en(f);c(d),u.push(d);var p=R(u,n);return t.delay=p.delay,t.endDelay=p.endDelay,t.duration=p.duration,t.seek(0),t.reset(),t.autoplay&&t.play(),t},t},en.easing=h,en.penner=v,en.random=function(n,e){return Math.floor(Math.random()*(e-n+1))+n},en});

js/libraries/ffmpeg.min.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.FFmpeg=t():e.FFmpeg=t()}(self,(function(){return e={497:(e,t,r)=>{r(72);var n=r(306).devDependencies;e.exports={corePath:"https://unpkg.com/@ffmpeg/core@".concat(n["@ffmpeg/core"].substring(1),"/dist/ffmpeg-core.js")}},663:(e,t,r)=>{function n(e,t,r,n,o,i,a){try{var c=e[i](a),s=c.value}catch(e){return void r(e)}c.done?t(s):Promise.resolve(s).then(n,o)}var o=r(72),i=function(e){return new Promise((function(t,r){var n=new FileReader;n.onload=function(){t(n.result)},n.onerror=function(e){var t=e.target.error.code;r(Error("File could not be read! Code=".concat(t)))},n.readAsArrayBuffer(e)}))};e.exports=function(){var e,t=(e=regeneratorRuntime.mark((function e(t){var r,n;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(r=t,void 0!==t){e.next=3;break}return e.abrupt("return",new Uint8Array);case 3:if("string"!=typeof t){e.next=16;break}if(!/data:_data\/([a-zA-Z]*);base64,([^"]*)/.test(t)){e.next=8;break}r=atob(t.split(",")[1]).split("").map((function(e){return e.charCodeAt(0)})),e.next=14;break;case 8:return e.next=10,fetch(o(t));case 10:return n=e.sent,e.next=13,n.arrayBuffer();case 13:r=e.sent;case 14:e.next=20;break;case 16:if(!(t instanceof File||t instanceof Blob)){e.next=20;break}return e.next=19,i(t);case 19:r=e.sent;case 20:return e.abrupt("return",new Uint8Array(r));case 21:case"end":return e.stop()}}),e)})),function(){var t=this,r=arguments;return new Promise((function(o,i){var a=e.apply(t,r);function c(e){n(a,o,i,c,s,"next",e)}function s(e){n(a,o,i,c,s,"throw",e)}c(void 0)}))});return function(e){return t.apply(this,arguments)}}()},452:(e,t,r)=>{function n(e,t,r,n,o,i,a){try{var c=e[i](a),s=c.value}catch(e){return void r(e)}c.done?t(s):Promise.resolve(s).then(n,o)}function o(e){return function(){var t=this,r=arguments;return new Promise((function(o,i){var a=e.apply(t,r);function c(e){n(a,o,i,c,s,"next",e)}function s(e){n(a,o,i,c,s,"throw",e)}c(void 0)}))}}var i=r(72),a=r(185).log,c=function(){var e=o(regeneratorRuntime.mark((function e(t,r){var n,o,i;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return a("info","fetch ".concat(t)),e.next=3,fetch(t);case 3:return e.next=5,e.sent.arrayBuffer();case 5:return n=e.sent,a("info","".concat(t," file size = ").concat(n.byteLength," bytes")),o=new Blob([n],{type:r}),i=URL.createObjectURL(o),a("info","".concat(t," blob URL = ").concat(i)),e.abrupt("return",i);case 11:case"end":return e.stop()}}),e)})));return function(t,r){return e.apply(this,arguments)}}();e.exports=function(){var e=o(regeneratorRuntime.mark((function e(t){var r,n,o,s,u;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if("string"==typeof(r=t.corePath)){e.next=3;break}throw Error("corePath should be a string!");case 3:return n=i(r),e.next=6,c(n,"application/javascript");case 6:return o=e.sent,e.next=9,c(n.replace("ffmpeg-core.js","ffmpeg-core.wasm"),"application/wasm");case 9:return s=e.sent,e.next=12,c(n.replace("ffmpeg-core.js","ffmpeg-core.worker.js"),"application/javascript");case 12:if(u=e.sent,"undefined"!=typeof createFFmpegCore){e.next=15;break}return e.abrupt("return",new Promise((function(e){var t=document.createElement("script");t.src=o,t.type="text/javascript",t.addEventListener("load",(function r(){t.removeEventListener("load",r),a("info","ffmpeg-core.js script loaded"),e({createFFmpegCore,corePath:o,wasmPath:s,workerPath:u})})),document.getElementsByTagName("head")[0].appendChild(t)})));case 15:return a("info","ffmpeg-core.js script is loaded already"),e.abrupt("return",Promise.resolve({createFFmpegCore,corePath:o,wasmPath:s,workerPath:u}));case 17:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}()},698:(e,t,r)=>{var n=r(497),o=r(452),i=r(663);e.exports={defaultOptions:n,getCreateFFmpegCore:o,fetchFile:i}},500:e=>{e.exports={defaultArgs:["./ffmpeg","-nostdin","-y"],baseOptions:{log:!1,logger:function(){},progress:function(){},corePath:""}}},906:(e,t,r)=>{function n(e){return function(e){if(Array.isArray(e))return o(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return o(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?o(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function i(e,t,r,n,o,i,a){try{var c=e[i](a),s=c.value}catch(e){return void r(e)}c.done?t(s):Promise.resolve(s).then(n,o)}function a(e){return function(){var t=this,r=arguments;return new Promise((function(n,o){var a=e.apply(t,r);function c(e){i(a,n,o,c,s,"next",e)}function s(e){i(a,n,o,c,s,"throw",e)}c(void 0)}))}}function c(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function s(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){u(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function u(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function f(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var l=r(500),p=l.defaultArgs,h=l.baseOptions,m=r(185),g=m.setLogging,d=m.setCustomLogger,y=m.log,v=r(583),b=r(319),w=r(698),x=w.defaultOptions,j=w.getCreateFFmpegCore,E=r(306).version,O=Error("ffmpeg.wasm is not ready, make sure you have completed load().");e.exports=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=s(s(s({},h),x),e),r=t.log,o=t.logger,i=t.progress,c=f(t,["log","logger","progress"]),u=null,l=null,m=null,w=!1,F=i,L=function(e){"FFMPEG_END"===e&&null!==m&&(m(),m=null,w=!1)},P=function(e){var t=e.type,r=e.message;y(t,r),v(r,F),L(r)},k=function(){var e=a(regeneratorRuntime.mark((function e(){var t,r,n,o,i;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(y("info","load ffmpeg-core"),null!==u){e.next=17;break}return y("info","loading ffmpeg-core"),e.next=5,j(c);case 5:return t=e.sent,r=t.createFFmpegCore,n=t.corePath,o=t.workerPath,i=t.wasmPath,e.next=12,r({mainScriptUrlOrBlob:n,printErr:function(e){return P({type:"fferr",message:e})},print:function(e){return P({type:"ffout",message:e})},locateFile:function(e,t){if("undefined"!=typeof window){if(void 0!==i&&e.endsWith("ffmpeg-core.wasm"))return i;if(void 0!==o&&e.endsWith("ffmpeg-core.worker.js"))return o}return t+e}});case 12:u=e.sent,l=u.cwrap("proxy_main","number",["number","number"]),y("info","ffmpeg-core loaded"),e.next=18;break;case 17:throw Error("ffmpeg.wasm was loaded, you should not load it again, use ffmpeg.isLoaded() to check next time.");case 18:case"end":return e.stop()}}),e)})));return function(){return e.apply(this,arguments)}}(),S=function(){return null!==u},A=function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];if(y("info","run ffmpeg command: ".concat(t.join(" "))),null===u)throw O;if(w)throw Error("ffmpeg.wasm can only run one command at a time");return w=!0,new Promise((function(e){var r=[].concat(n(p),t).filter((function(e){return 0!==e.length}));m=e,l.apply(void 0,n(b(u,r)))}))},_=function(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];if(y("info","run FS.".concat(e," ").concat(r.map((function(e){return"string"==typeof e?e:"<".concat(e.length," bytes binary file>")})).join(" "))),null===u)throw O;var o=null;try{var i;o=(i=u.FS)[e].apply(i,r)}catch(t){throw"readdir"===e?Error("ffmpeg.FS('readdir', '".concat(r[0],"') error. Check if the path exists, ex: ffmpeg.FS('readdir', '/')")):"readFile"===e?Error("ffmpeg.FS('readFile', '".concat(r[0],"') error. Check if the path exists")):Error("Oops, something went wrong in FS operation.")}return o},C=function(){if(null===u)throw O;w=!1,u.exit(1),u=null,l=null,m=null},R=function(e){F=e},T=function(e){d(e)};return g(r),d(o),y("info","use ffmpeg.wasm v".concat(E)),{setProgress:R,setLogger:T,setLogging:g,load:k,isLoaded:S,run:A,exit:C,FS:_}}},352:(e,t,r)=>{r(666);var n=r(906),o=r(698).fetchFile;e.exports={createFFmpeg:n,fetchFile:o}},185:e=>{var t=!1,r=function(){};e.exports={logging:t,setLogging:function(e){t=e},setCustomLogger:function(e){r=e},log:function(e,n){r({type:e,message:n}),t&&console.log("[".concat(e,"] ").concat(n))}}},319:e=>{e.exports=function(e,t){var r=e._malloc(t.length*Uint32Array.BYTES_PER_ELEMENT);return t.forEach((function(t,n){var o=e._malloc(t.length+1);e.writeAsciiToMemory(t,o),e.setValue(r+Uint32Array.BYTES_PER_ELEMENT*n,o,"i32")})),[t.length,r]}},583:e=>{function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var r=0,n=0,o=function(e){var r,n,o=(r=e.split(":"),n=3,function(e){if(Array.isArray(e))return e}(r)||function(e,t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e)){var r=[],n=!0,o=!1,i=void 0;try{for(var a,c=e[Symbol.iterator]();!(n=(a=c.next()).done)&&(r.push(a.value),!t||r.length!==t);n=!0);}catch(e){o=!0,i=e}finally{try{n||null==c.return||c.return()}finally{if(o)throw i}}return r}}(r,n)||function(e,r){if(e){if("string"==typeof e)return t(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?t(e,r):void 0}}(r,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),i=o[0],a=o[1],c=o[2];return 60*parseFloat(i)*60+60*parseFloat(a)+parseFloat(c)};e.exports=function(e,t){if("string"==typeof e)if(e.startsWith("  Duration")){var i=e.split(", ")[0].split(": ")[1],a=o(i);t({duration:a,ratio:n}),(0===r||r>a)&&(r=a)}else if(e.startsWith("frame")||e.startsWith("size")){var c=e.split("time=")[1].split(" ")[0],s=o(c);t({ratio:n=s/r,time:s})}else e.startsWith("video:")&&(t({ratio:1}),r=0)}},666:e=>{var t=function(e){"use strict";var t,r=Object.prototype,n=r.hasOwnProperty,o="function"==typeof Symbol?Symbol:{},i=o.iterator||"@@iterator",a=o.asyncIterator||"@@asyncIterator",c=o.toStringTag||"@@toStringTag";function s(e,t,r){return Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}),e[t]}try{s({},"")}catch(e){s=function(e,t,r){return e[t]=r}}function u(e,t,r,n){var o=t&&t.prototype instanceof d?t:d,i=Object.create(o.prototype),a=new k(n||[]);return i._invoke=function(e,t,r){var n=l;return function(o,i){if(n===h)throw new Error("Generator is already running");if(n===m){if("throw"===o)throw i;return A()}for(r.method=o,r.arg=i;;){var a=r.delegate;if(a){var c=F(a,r);if(c){if(c===g)continue;return c}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if(n===l)throw n=m,r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);n=h;var s=f(e,t,r);if("normal"===s.type){if(n=r.done?m:p,s.arg===g)continue;return{value:s.arg,done:r.done}}"throw"===s.type&&(n=m,r.method="throw",r.arg=s.arg)}}}(e,r,a),i}function f(e,t,r){try{return{type:"normal",arg:e.call(t,r)}}catch(e){return{type:"throw",arg:e}}}e.wrap=u;var l="suspendedStart",p="suspendedYield",h="executing",m="completed",g={};function d(){}function y(){}function v(){}var b={};b[i]=function(){return this};var w=Object.getPrototypeOf,x=w&&w(w(S([])));x&&x!==r&&n.call(x,i)&&(b=x);var j=v.prototype=d.prototype=Object.create(b);function E(e){["next","throw","return"].forEach((function(t){s(e,t,(function(e){return this._invoke(t,e)}))}))}function O(e,t){function r(o,i,a,c){var s=f(e[o],e,i);if("throw"!==s.type){var u=s.arg,l=u.value;return l&&"object"==typeof l&&n.call(l,"__await")?t.resolve(l.__await).then((function(e){r("next",e,a,c)}),(function(e){r("throw",e,a,c)})):t.resolve(l).then((function(e){u.value=e,a(u)}),(function(e){return r("throw",e,a,c)}))}c(s.arg)}var o;this._invoke=function(e,n){function i(){return new t((function(t,o){r(e,n,t,o)}))}return o=o?o.then(i,i):i()}}function F(e,r){var n=e.iterator[r.method];if(n===t){if(r.delegate=null,"throw"===r.method){if(e.iterator.return&&(r.method="return",r.arg=t,F(e,r),"throw"===r.method))return g;r.method="throw",r.arg=new TypeError("The iterator does not provide a 'throw' method")}return g}var o=f(n,e.iterator,r.arg);if("throw"===o.type)return r.method="throw",r.arg=o.arg,r.delegate=null,g;var i=o.arg;return i?i.done?(r[e.resultName]=i.value,r.next=e.nextLoc,"return"!==r.method&&(r.method="next",r.arg=t),r.delegate=null,g):i:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,g)}function L(e){var t={tryLoc:e[0]};1 in e&&(t.catchLoc=e[1]),2 in e&&(t.finallyLoc=e[2],t.afterLoc=e[3]),this.tryEntries.push(t)}function P(e){var t=e.completion||{};t.type="normal",delete t.arg,e.completion=t}function k(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(L,this),this.reset(!0)}function S(e){if(e){var r=e[i];if(r)return r.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var o=-1,a=function r(){for(;++o<e.length;)if(n.call(e,o))return r.value=e[o],r.done=!1,r;return r.value=t,r.done=!0,r};return a.next=a}}return{next:A}}function A(){return{value:t,done:!0}}return y.prototype=j.constructor=v,v.constructor=y,y.displayName=s(v,c,"GeneratorFunction"),e.isGeneratorFunction=function(e){var t="function"==typeof e&&e.constructor;return!!t&&(t===y||"GeneratorFunction"===(t.displayName||t.name))},e.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,v):(e.__proto__=v,s(e,c,"GeneratorFunction")),e.prototype=Object.create(j),e},e.awrap=function(e){return{__await:e}},E(O.prototype),O.prototype[a]=function(){return this},e.AsyncIterator=O,e.async=function(t,r,n,o,i){void 0===i&&(i=Promise);var a=new O(u(t,r,n,o),i);return e.isGeneratorFunction(r)?a:a.next().then((function(e){return e.done?e.value:a.next()}))},E(j),s(j,c,"Generator"),j[i]=function(){return this},j.toString=function(){return"[object Generator]"},e.keys=function(e){var t=[];for(var r in e)t.push(r);return t.reverse(),function r(){for(;t.length;){var n=t.pop();if(n in e)return r.value=n,r.done=!1,r}return r.done=!0,r}},e.values=S,k.prototype={constructor:k,reset:function(e){if(this.prev=0,this.next=0,this.sent=this._sent=t,this.done=!1,this.delegate=null,this.method="next",this.arg=t,this.tryEntries.forEach(P),!e)for(var r in this)"t"===r.charAt(0)&&n.call(this,r)&&!isNaN(+r.slice(1))&&(this[r]=t)},stop:function(){this.done=!0;var e=this.tryEntries[0].completion;if("throw"===e.type)throw e.arg;return this.rval},dispatchException:function(e){if(this.done)throw e;var r=this;function o(n,o){return c.type="throw",c.arg=e,r.next=n,o&&(r.method="next",r.arg=t),!!o}for(var i=this.tryEntries.length-1;i>=0;--i){var a=this.tryEntries[i],c=a.completion;if("root"===a.tryLoc)return o("end");if(a.tryLoc<=this.prev){var s=n.call(a,"catchLoc"),u=n.call(a,"finallyLoc");if(s&&u){if(this.prev<a.catchLoc)return o(a.catchLoc,!0);if(this.prev<a.finallyLoc)return o(a.finallyLoc)}else if(s){if(this.prev<a.catchLoc)return o(a.catchLoc,!0)}else{if(!u)throw new Error("try statement without catch or finally");if(this.prev<a.finallyLoc)return o(a.finallyLoc)}}}},abrupt:function(e,t){for(var r=this.tryEntries.length-1;r>=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===e||"continue"===e)&&i.tryLoc<=t&&t<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=e,a.arg=t,i?(this.method="next",this.next=i.finallyLoc,g):this.complete(a)},complete:function(e,t){if("throw"===e.type)throw e.arg;return"break"===e.type||"continue"===e.type?this.next=e.arg:"return"===e.type?(this.rval=this.arg=e.arg,this.method="return",this.next="end"):"normal"===e.type&&t&&(this.next=t),g},finish:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var r=this.tryEntries[t];if(r.finallyLoc===e)return this.complete(r.completion,r.afterLoc),P(r),g}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var r=this.tryEntries[t];if(r.tryLoc===e){var n=r.completion;if("throw"===n.type){var o=n.arg;P(r)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(e,r,n){return this.delegate={iterator:S(e),resultName:r,nextLoc:n},"next"===this.method&&(this.arg=t),g}},e}(e.exports);try{regeneratorRuntime=t}catch(e){Function("r","regeneratorRuntime = r")(t)}},72:function(e,t,r){var n,o;void 0===(o="function"==typeof(n=function(){return function(){var e=arguments.length;if(0===e)throw new Error("resolveUrl requires at least one argument; got none.");var t=document.createElement("base");if(t.href=arguments[0],1===e)return t.href;var r=document.getElementsByTagName("head")[0];r.insertBefore(t,r.firstChild);for(var n,o=document.createElement("a"),i=1;i<e;i++)o.href=arguments[i],n=o.href,t.href=n;return r.removeChild(t),n}})?n.call(t,r,t,e):n)||(e.exports=o)},306:e=>{"use strict";e.exports=JSON.parse('{"name":"@ffmpeg/ffmpeg","version":"0.10.1","description":"FFmpeg WebAssembly version","main":"src/index.js","types":"src/index.d.ts","directories":{"example":"examples"},"scripts":{"start":"node scripts/server.js","build":"rimraf dist && webpack --config scripts/webpack.config.prod.js","prepublishOnly":"npm run build","lint":"eslint src","wait":"rimraf dist && wait-on http://localhost:3000/dist/ffmpeg.dev.js","test":"npm-run-all -p -r start test:all","test:all":"npm-run-all wait test:browser:ffmpeg test:node:all","test:node":"node --experimental-wasm-threads --experimental-wasm-bulk-memory node_modules/.bin/_mocha --exit --bail --require ./scripts/test-helper.js","test:node:all":"npm run test:node -- ./tests/*.test.js","test:browser":"mocha-headless-chrome -a allow-file-access-from-files -a incognito -a no-sandbox -a disable-setuid-sandbox -a disable-logging -t 300000","test:browser:ffmpeg":"npm run test:browser -- -f ./tests/ffmpeg.test.html"},"browser":{"./src/node/index.js":"./src/browser/index.js"},"repository":{"type":"git","url":"git+https://github.com/ffmpegwasm/ffmpeg.wasm.git"},"keywords":["ffmpeg","WebAssembly","video"],"author":"Jerome Wu <[email protected]>","license":"MIT","bugs":{"url":"https://github.com/ffmpegwasm/ffmpeg.wasm/issues"},"engines":{"node":">=12.16.1"},"homepage":"https://github.com/ffmpegwasm/ffmpeg.wasm#readme","dependencies":{"is-url":"^1.2.4","node-fetch":"^2.6.1","regenerator-runtime":"^0.13.7","resolve-url":"^0.2.1"},"devDependencies":{"@babel/core":"^7.12.3","@babel/preset-env":"^7.12.1","@ffmpeg/core":"^0.10.0","@types/emscripten":"^1.39.4","babel-loader":"^8.1.0","chai":"^4.2.0","cors":"^2.8.5","eslint":"^7.12.1","eslint-config-airbnb-base":"^14.1.0","eslint-plugin-import":"^2.22.1","express":"^4.17.1","mocha":"^8.2.1","mocha-headless-chrome":"^2.0.3","npm-run-all":"^4.1.5","wait-on":"^5.3.0","webpack":"^5.3.2","webpack-cli":"^4.1.0","webpack-dev-middleware":"^4.0.0"}}')}},t={},function r(n){if(t[n])return t[n].exports;var o=t[n]={exports:{}};return e[n].call(o.exports,o,o.exports,r),o.exports}(352);var e,t}));
+//# sourceMappingURL=ffmpeg.min.js.map

js/libraries/jquery.nice-select.min.js

@@ -0,0 +1,4 @@
+/*  jQuery Nice Select - v1.0
+    https://github.com/hernansartorio/jquery-nice-select
+    Made by Hernán Sartorio  */
+!function(e){e.fn.niceSelect=function(t){function s(t){t.after(e("<div></div>").addClass("nice-select").addClass(t.attr("class")||"").addClass(t.attr("disabled")?"disabled":"").attr("tabindex",t.attr("disabled")?null:"0").html('<span class="current"></span><ul class="list"></ul>'));var s=t.next(),n=t.find("option"),i=t.find("option:selected");s.find(".current").html(i.data("display")||i.text()),n.each(function(t){var n=e(this),i=n.data("display");s.find("ul").append(e("<li></li>").attr("data-value",n.val()).attr("data-display",i||null).addClass("option"+(n.is(":selected")?" selected":"")+(n.is(":disabled")?" disabled":"")).html(n.text()))})}if("string"==typeof t)return"update"==t?this.each(function(){var t=e(this),n=e(this).next(".nice-select"),i=n.hasClass("open");n.length&&(n.remove(),s(t),i&&t.next().trigger("click"))}):"destroy"==t?(this.each(function(){var t=e(this),s=e(this).next(".nice-select");s.length&&(s.remove(),t.css("display",""))}),0==e(".nice-select").length&&e(document).off(".nice_select")):console.log('Method "'+t+'" does not exist.'),this;this.hide(),this.each(function(){var t=e(this);t.next().hasClass("nice-select")||s(t)}),e(document).off(".nice_select"),e(document).on("click.nice_select",".nice-select",function(t){var s=e(this);e(".nice-select").not(s).removeClass("open"),s.toggleClass("open"),s.hasClass("open")?(s.find(".option"),s.find(".focus").removeClass("focus"),s.find(".selected").addClass("focus")):s.focus()}),e(document).on("click.nice_select",function(t){0===e(t.target).closest(".nice-select").length&&e(".nice-select").removeClass("open").find(".option")}),e(document).on("click.nice_select",".nice-select .option:not(.disabled)",function(t){var s=e(this),n=s.closest(".nice-select");n.find(".selected").removeClass("selected"),s.addClass("selected");var i=s.data("display")||s.text();n.find(".current").text(i),n.prev("select").val(s.data("value")).trigger("change")}),e(document).on("keydown.nice_select",".nice-select",function(t){var s=e(this),n=e(s.find(".focus")||s.find(".list .option.selected"));if(32==t.keyCode||13==t.keyCode)return s.hasClass("open")?n.trigger("click"):s.trigger("click"),!1;if(40==t.keyCode){if(s.hasClass("open")){var i=n.nextAll(".option:not(.disabled)").first();i.length>0&&(s.find(".focus").removeClass("focus"),i.addClass("focus"))}else s.trigger("click");return!1}if(38==t.keyCode){if(s.hasClass("open")){var l=n.prevAll(".option:not(.disabled)").first();l.length>0&&(s.find(".focus").removeClass("focus"),l.addClass("focus"))}else s.trigger("click");return!1}if(27==t.keyCode)s.hasClass("open")&&s.trigger("click");else if(9==t.keyCode&&s.hasClass("open"))return!1});var n=document.createElement("a").style;return n.cssText="pointer-events:auto","auto"!==n.pointerEvents&&e("html").addClass("no-csspointerevents"),this}}(jQuery);

js/libraries/pickr.min.js

@@ -0,0 +1,5 @@
+/*! Pickr 1.7.2 MIT | https://github.com/Simonwep/pickr */
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Pickr=e():t.Pickr=e()}(window,(function(){return function(t){var e={};function o(n){if(e[n])return e[n].exports;var i=e[n]={i:n,l:!1,exports:{}};return t[n].call(i.exports,i,i.exports,o),i.l=!0,i.exports}return o.m=t,o.c=e,o.d=function(t,e,n){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)o.d(n,i,function(e){return t[e]}.bind(null,i));return n},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="",o(o.s=1)}([function(t){t.exports=JSON.parse('{"a":"1.7.2"}')},function(t,e,o){"use strict";o.r(e);var n={};function i(t,e,o,n,i={}){e instanceof HTMLCollection||e instanceof NodeList?e=Array.from(e):Array.isArray(e)||(e=[e]),Array.isArray(o)||(o=[o]);for(const r of e)for(const e of o)r[t](e,n,{capture:!1,...i});return Array.prototype.slice.call(arguments,1)}o.r(n),o.d(n,"on",(function(){return r})),o.d(n,"off",(function(){return s})),o.d(n,"createElementFromString",(function(){return a})),o.d(n,"createFromTemplate",(function(){return c})),o.d(n,"eventPath",(function(){return l})),o.d(n,"resolveElement",(function(){return p})),o.d(n,"adjustableInputNumbers",(function(){return u}));const r=i.bind(null,"addEventListener"),s=i.bind(null,"removeEventListener");function a(t){const e=document.createElement("div");return e.innerHTML=t.trim(),e.firstElementChild}function c(t){const e=(t,e)=>{const o=t.getAttribute(e);return t.removeAttribute(e),o},o=(t,n={})=>{const i=e(t,":obj"),r=e(t,":ref"),s=i?n[i]={}:n;r&&(n[r]=t);for(const n of Array.from(t.children)){const t=e(n,":arr"),i=o(n,t?{}:s);t&&(s[t]||(s[t]=[])).push(Object.keys(i).length?i:n)}return n};return o(a(t))}function l(t){let e=t.path||t.composedPath&&t.composedPath();if(e)return e;let o=t.target.parentElement;for(e=[t.target,o];o=o.parentElement;)e.push(o);return e.push(document,window),e}function p(t){return t instanceof Element?t:"string"==typeof t?t.split(/>>/g).reduce((t,e,o,n)=>(t=t.querySelector(e),o<n.length-1?t.shadowRoot:t),document):null}function u(t,e=(t=>t)){function o(o){const n=[.001,.01,.1][Number(o.shiftKey||2*o.ctrlKey)]*(o.deltaY<0?1:-1);let i=0,r=t.selectionStart;t.value=t.value.replace(/[\d.]+/g,(t,o)=>o<=r&&o+t.length>=r?(r=o,e(Number(t),n,i)):(i++,t)),t.focus(),t.setSelectionRange(r,r),o.preventDefault(),t.dispatchEvent(new Event("input"))}r(t,"focus",()=>r(window,"wheel",o,{passive:!1})),r(t,"blur",()=>s(window,"wheel",o))}var h=o(0);const{min:d,max:f,floor:m,round:v}=Math;function b(t,e,o){e/=100,o/=100;const n=m(t=t/360*6),i=t-n,r=o*(1-e),s=o*(1-i*e),a=o*(1-(1-i)*e),c=n%6;return[255*[o,s,r,r,a,o][c],255*[a,o,o,s,r,r][c],255*[r,r,a,o,o,s][c]]}function g(t,e,o){const n=(2-(e/=100))*(o/=100)/2;return 0!==n&&(e=1===n?0:n<.5?e*o/(2*n):e*o/(2-2*n)),[t,100*e,100*n]}function y(t,e,o){const n=d(t/=255,e/=255,o/=255),i=f(t,e,o),r=i-n;let s,a;if(0===r)s=a=0;else{a=r/i;const n=((i-t)/6+r/2)/r,c=((i-e)/6+r/2)/r,l=((i-o)/6+r/2)/r;t===i?s=l-c:e===i?s=1/3+n-l:o===i&&(s=2/3+c-n),s<0?s+=1:s>1&&(s-=1)}return[360*s,100*a,100*i]}function _(t,e,o,n){return e/=100,o/=100,[...y(255*(1-d(1,(t/=100)*(1-(n/=100))+n)),255*(1-d(1,e*(1-n)+n)),255*(1-d(1,o*(1-n)+n)))]}function w(t,e,o){e/=100;const n=2*(e*=(o/=100)<.5?o:1-o)/(o+e)*100,i=100*(o+e);return[t,isNaN(n)?0:n,i]}function A(t){return y(...t.match(/.{2}/g).map(t=>parseInt(t,16)))}function C(t){t=t.match(/^[a-zA-Z]+$/)?function(t){if("black"===t.toLowerCase())return"#000";const e=document.createElement("canvas").getContext("2d");return e.fillStyle=t,"#000"===e.fillStyle?null:e.fillStyle}(t):t;const e={cmyk:/^cmyk[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)/i,rgba:/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i,hsla:/^((hsla)|hsl)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i,hsva:/^((hsva)|hsv)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i,hexa:/^#?(([\dA-Fa-f]{3,4})|([\dA-Fa-f]{6})|([\dA-Fa-f]{8}))$/i},o=t=>t.map(t=>/^(|\d+)\.\d+|\d+$/.test(t)?Number(t):void 0);let n;t:for(const i in e){if(!(n=e[i].exec(t)))continue;const r=t=>!!n[2]==("number"==typeof t);switch(i){case"cmyk":{const[,t,e,r,s]=o(n);if(t>100||e>100||r>100||s>100)break t;return{values:_(t,e,r,s),type:i}}case"rgba":{const[,,,t,e,s,a]=o(n);if(t>255||e>255||s>255||a<0||a>1||!r(a))break t;return{values:[...y(t,e,s),a],a:a,type:i}}case"hexa":{let[,t]=n;4!==t.length&&3!==t.length||(t=t.split("").map(t=>t+t).join(""));const e=t.substring(0,6);let o=t.substring(6);return o=o?parseInt(o,16)/255:void 0,{values:[...A(e),o],a:o,type:i}}case"hsla":{const[,,,t,e,s,a]=o(n);if(t>360||e>100||s>100||a<0||a>1||!r(a))break t;return{values:[...w(t,e,s),a],a:a,type:i}}case"hsva":{const[,,,t,e,s,a]=o(n);if(t>360||e>100||s>100||a<0||a>1||!r(a))break t;return{values:[t,e,s,a],a:a,type:i}}}}return{values:null,type:null}}function k(t=0,e=0,o=0,n=1){const i=(t,e)=>(o=-1)=>e(~o?t.map(t=>Number(t.toFixed(o))):t),r={h:t,s:e,v:o,a:n,toHSVA(){const t=[r.h,r.s,r.v,r.a];return t.toString=i(t,t=>"hsva(".concat(t[0],", ").concat(t[1],"%, ").concat(t[2],"%, ").concat(r.a,")")),t},toHSLA(){const t=[...g(r.h,r.s,r.v),r.a];return t.toString=i(t,t=>"hsla(".concat(t[0],", ").concat(t[1],"%, ").concat(t[2],"%, ").concat(r.a,")")),t},toRGBA(){const t=[...b(r.h,r.s,r.v),r.a];return t.toString=i(t,t=>"rgba(".concat(t[0],", ").concat(t[1],", ").concat(t[2],", ").concat(r.a,")")),t},toCMYK(){const t=function(t,e,o){const n=b(t,e,o),i=n[0]/255,r=n[1]/255,s=n[2]/255,a=d(1-i,1-r,1-s);return[100*(1===a?0:(1-i-a)/(1-a)),100*(1===a?0:(1-r-a)/(1-a)),100*(1===a?0:(1-s-a)/(1-a)),100*a]}(r.h,r.s,r.v);return t.toString=i(t,t=>"cmyk(".concat(t[0],"%, ").concat(t[1],"%, ").concat(t[2],"%, ").concat(t[3],"%)")),t},toHEXA(){const t=function(t,e,o){return b(t,e,o).map(t=>v(t).toString(16).padStart(2,"0"))}(r.h,r.s,r.v),e=r.a>=1?"":Number((255*r.a).toFixed(0)).toString(16).toUpperCase().padStart(2,"0");return e&&t.push(e),t.toString=()=>"#".concat(t.join("").toUpperCase()),t},clone:()=>k(r.h,r.s,r.v,r.a)};return r}const S=t=>Math.max(Math.min(t,1),0);function O(t){const e={options:Object.assign({lock:null,onchange:()=>0,onstop:()=>0},t),_keyboard(t){const{options:o}=e,{type:n,key:i}=t;if(document.activeElement===o.wrapper){const{lock:o}=e.options,r="ArrowUp"===i,s="ArrowRight"===i,a="ArrowDown"===i,c="ArrowLeft"===i;if("keydown"===n&&(r||s||a||c)){let n=0,i=0;"v"===o?n=r||s?1:-1:"h"===o?n=r||s?-1:1:(i=r?-1:a?1:0,n=c?-1:s?1:0),e.update(S(e.cache.x+.01*n),S(e.cache.y+.01*i)),t.preventDefault()}else i.startsWith("Arrow")&&(e.options.onstop(),t.preventDefault())}},_tapstart(t){r(document,["mouseup","touchend","touchcancel"],e._tapstop),r(document,["mousemove","touchmove"],e._tapmove),t.cancelable&&t.preventDefault(),e._tapmove(t)},_tapmove(t){const{options:o,cache:n}=e,{lock:i,element:r,wrapper:s}=o,a=s.getBoundingClientRect();let c=0,l=0;if(t){const e=t&&t.touches&&t.touches[0];c=t?(e||t).clientX:0,l=t?(e||t).clientY:0,c<a.left?c=a.left:c>a.left+a.width&&(c=a.left+a.width),l<a.top?l=a.top:l>a.top+a.height&&(l=a.top+a.height),c-=a.left,l-=a.top}else n&&(c=n.x*a.width,l=n.y*a.height);"h"!==i&&(r.style.left="calc(".concat(c/a.width*100,"% - ").concat(r.offsetWidth/2,"px)")),"v"!==i&&(r.style.top="calc(".concat(l/a.height*100,"% - ").concat(r.offsetHeight/2,"px)")),e.cache={x:c/a.width,y:l/a.height};const p=S(c/a.width),u=S(l/a.height);switch(i){case"v":return o.onchange(p);case"h":return o.onchange(u);default:return o.onchange(p,u)}},_tapstop(){e.options.onstop(),s(document,["mouseup","touchend","touchcancel"],e._tapstop),s(document,["mousemove","touchmove"],e._tapmove)},trigger(){e._tapmove()},update(t=0,o=0){const{left:n,top:i,width:r,height:s}=e.options.wrapper.getBoundingClientRect();"h"===e.options.lock&&(o=t),e._tapmove({clientX:n+r*t,clientY:i+s*o})},destroy(){const{options:t,_tapstart:o,_keyboard:n}=e;s(document,["keydown","keyup"],n),s([t.wrapper,t.element],"mousedown",o),s([t.wrapper,t.element],"touchstart",o,{passive:!1})}},{options:o,_tapstart:n,_keyboard:i}=e;return r([o.wrapper,o.element],"mousedown",n),r([o.wrapper,o.element],"touchstart",n,{passive:!1}),r(document,["keydown","keyup"],i),e}function E(t={}){t=Object.assign({onchange:()=>0,className:"",elements:[]},t);const e=r(t.elements,"click",e=>{t.elements.forEach(o=>o.classList[e.target===o?"add":"remove"](t.className)),t.onchange(e)});return{destroy:()=>s(...e)}}
+/*! NanoPop 1.3.0 MIT | https://github.com/Simonwep/nanopop */
+let x=(()=>{class t{constructor(e,o,{positionFlipOrder:n=t.defaultPositionFlipOrder,variantFlipOrder:i=t.defaultVariantFlipOrder,container:r=document.documentElement.getBoundingClientRect(),forceApplyOnFailure:s=!1,margin:a=8,position:c="bottom-start"}={}){this.o={positionFlipOrder:n,variantFlipOrder:i,reference:e,popper:o,position:c,container:r,forceApplyOnFailure:s,margin:a}}update(t=this.o,e=!1){const{container:o,reference:n,popper:i,margin:r,position:s,forceApplyOnFailure:a,variantFlipOrder:c,positionFlipOrder:l}=this.o={...this.o,...t};i.style.left="0",i.style.top="0";const p=n.getBoundingClientRect(),u=i.getBoundingClientRect(),h={t:p.top-u.height-r,b:p.bottom+r,r:p.right+r,l:p.left-u.width-r},d={vm:-u.width/2+(p.left+p.width/2),vs:p.left,ve:p.left+p.width-u.width,hs:p.bottom-p.height,he:p.bottom-u.height,hm:p.bottom-p.height/2-u.height/2},[f,m="middle"]=s.split("-"),v=l[f],b=c[m],{top:g,left:y,bottom:_,right:w}=o;for(const t of v){const o="t"===t||"b"===t,n=h[t],[r,s]=o?["top","left"]:["left","top"],[a,c]=o?[u.height,u.width]:[u.width,u.height],[l,p]=o?[_,w]:[w,_],[f,m]=o?[g,y]:[y,g];if(e||!(n<f||n+a>l))for(const a of b){const l=d[(o?"v":"h")+a];if(e||!(l<m||l+c>p))return i.style[s]=l-u[s]+"px",i.style[r]=n-u[r]+"px",t+a}}return a?this.update(void 0,!0):null}}return t.version="1.3.0",t.defaultVariantFlipOrder={start:"sme",middle:"mse",end:"ems"},t.defaultPositionFlipOrder={top:"tbrl",right:"rltb",bottom:"btrl",left:"lrbt"},t})();function L(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}class B{constructor(t){L(this,"_initializingActive",!0),L(this,"_recalc",!0),L(this,"_nanopop",null),L(this,"_root",null),L(this,"_color",k()),L(this,"_lastColor",k()),L(this,"_swatchColors",[]),L(this,"_eventListener",{init:[],save:[],hide:[],show:[],clear:[],change:[],changestop:[],cancel:[],swatchselect:[]}),this.options=t=Object.assign({...B.DEFAULT_OPTIONS},t);const{swatches:e,components:o,theme:n,sliders:i,lockOpacity:r,padding:s}=t;["nano","monolith"].includes(n)&&!i&&(t.sliders="h"),o.interaction||(o.interaction={});const{preview:a,opacity:c,hue:l,palette:p}=o;o.opacity=!r&&c,o.palette=p||a||c||l,this._preBuild(),this._buildComponents(),this._bindEvents(),this._finalBuild(),e&&e.length&&e.forEach(t=>this.addSwatch(t));const{button:u,app:h}=this._root;this._nanopop=new x(u,h,{margin:s}),u.setAttribute("role","button"),u.setAttribute("aria-label",this._t("btn:toggle"));const d=this;requestAnimationFrame((function e(){if(!h.offsetWidth)return requestAnimationFrame(e);d.setColor(t.default),d._rePositioningPicker(),t.defaultRepresentation&&(d._representation=t.defaultRepresentation,d.setColorRepresentation(d._representation)),t.showAlways&&d.show(),d._initializingActive=!1,d._emit("init")}))}_preBuild(){const{options:t}=this;for(const e of["el","container"])t[e]=p(t[e]);this._root=(t=>{const{components:e,useAsButton:o,inline:n,appClass:i,theme:r,lockOpacity:s}=t.options,a=t=>t?"":'style="display:none" hidden',l=e=>t._t(e),p=c('\n      <div :ref="root" class="pickr">\n\n        '.concat(o?"":'<button type="button" :ref="button" class="pcr-button"></button>','\n\n        <div :ref="app" class="pcr-app ').concat(i||"",'" data-theme="').concat(r,'" ').concat(n?'style="position: unset"':"",' aria-label="').concat(l("ui:dialog"),'" role="window">\n          <div class="pcr-selection" ').concat(a(e.palette),'>\n            <div :obj="preview" class="pcr-color-preview" ').concat(a(e.preview),'>\n              <button type="button" :ref="lastColor" class="pcr-last-color" aria-label="').concat(l("btn:last-color"),'"></button>\n              <div :ref="currentColor" class="pcr-current-color"></div>\n            </div>\n\n            <div :obj="palette" class="pcr-color-palette">\n              <div :ref="picker" class="pcr-picker"></div>\n              <div :ref="palette" class="pcr-palette" tabindex="0" aria-label="').concat(l("aria:palette"),'" role="listbox"></div>\n            </div>\n\n            <div :obj="hue" class="pcr-color-chooser" ').concat(a(e.hue),'>\n              <div :ref="picker" class="pcr-picker"></div>\n              <div :ref="slider" class="pcr-hue pcr-slider" tabindex="0" aria-label="').concat(l("aria:hue"),'" role="slider"></div>\n            </div>\n\n            <div :obj="opacity" class="pcr-color-opacity" ').concat(a(e.opacity),'>\n              <div :ref="picker" class="pcr-picker"></div>\n              <div :ref="slider" class="pcr-opacity pcr-slider" tabindex="0" aria-label="').concat(l("aria:opacity"),'" role="slider"></div>\n            </div>\n          </div>\n\n          <div class="pcr-swatches ').concat(e.palette?"":"pcr-last",'" :ref="swatches"></div>\n\n          <div :obj="interaction" class="pcr-interaction" ').concat(a(Object.keys(e.interaction).length),'>\n            <input :ref="result" class="pcr-result" type="text" spellcheck="false" ').concat(a(e.interaction.input),' aria-label="').concat(l("aria:input"),'">\n\n            <input :arr="options" class="pcr-type" data-type="HEXA" value="').concat(s?"HEX":"HEXA",'" type="button" ').concat(a(e.interaction.hex),'>\n            <input :arr="options" class="pcr-type" data-type="RGBA" value="').concat(s?"RGB":"RGBA",'" type="button" ').concat(a(e.interaction.rgba),'>\n            <input :arr="options" class="pcr-type" data-type="HSLA" value="').concat(s?"HSL":"HSLA",'" type="button" ').concat(a(e.interaction.hsla),'>\n            <input :arr="options" class="pcr-type" data-type="HSVA" value="').concat(s?"HSV":"HSVA",'" type="button" ').concat(a(e.interaction.hsva),'>\n            <input :arr="options" class="pcr-type" data-type="CMYK" value="CMYK" type="button" ').concat(a(e.interaction.cmyk),'>\n\n            <input :ref="save" class="pcr-save" value="').concat(l("btn:save"),'" type="button" ').concat(a(e.interaction.save),' aria-label="').concat(l("aria:btn:save"),'">\n            <input :ref="cancel" class="pcr-cancel" value="').concat(l("btn:cancel"),'" type="button" ').concat(a(e.interaction.cancel),' aria-label="').concat(l("aria:btn:cancel"),'">\n            <input :ref="clear" class="pcr-clear" value="').concat(l("btn:clear"),'" type="button" ').concat(a(e.interaction.clear),' aria-label="').concat(l("aria:btn:clear"),'">\n          </div>\n        </div>\n      </div>\n    ')),u=p.interaction;return u.options.find(t=>!t.hidden&&!t.classList.add("active")),u.type=()=>u.options.find(t=>t.classList.contains("active")),p})(this),t.useAsButton&&(this._root.button=t.el),t.container.appendChild(this._root.root)}_finalBuild(){const t=this.options,e=this._root;if(t.container.removeChild(e.root),t.inline){const o=t.el.parentElement;t.el.nextSibling?o.insertBefore(e.app,t.el.nextSibling):o.appendChild(e.app)}else t.container.appendChild(e.app);t.useAsButton?t.inline&&t.el.remove():t.el.parentNode.replaceChild(e.root,t.el),t.disabled&&this.disable(),t.comparison||(e.button.style.transition="none",t.useAsButton||(e.preview.lastColor.style.transition="none")),this.hide()}_buildComponents(){const t=this,e=this.options.components,o=(t.options.sliders||"v").repeat(2),[n,i]=o.match(/^[vh]+$/g)?o:[],r=()=>this._color||(this._color=this._lastColor.clone()),s={palette:O({element:t._root.palette.picker,wrapper:t._root.palette.palette,onstop:()=>t._emit("changestop",t),onchange(o,n){if(!e.palette)return;const i=r(),{_root:s,options:a}=t,{lastColor:c,currentColor:l}=s.preview;t._recalc&&(i.s=100*o,i.v=100-100*n,i.v<0&&(i.v=0),t._updateOutput());const p=i.toRGBA().toString(0);this.element.style.background=p,this.wrapper.style.background="\n                        linear-gradient(to top, rgba(0, 0, 0, ".concat(i.a,"), transparent),\n                        linear-gradient(to left, hsla(").concat(i.h,", 100%, 50%, ").concat(i.a,"), rgba(255, 255, 255, ").concat(i.a,"))\n                    "),a.comparison?a.useAsButton||t._lastColor||(c.style.color=p):(s.button.style.color=p,s.button.classList.remove("clear"));const u=i.toHEXA().toString();for(const{el:e,color:o}of t._swatchColors)e.classList[u===o.toHEXA().toString()?"add":"remove"]("pcr-active");l.style.color=p}}),hue:O({lock:"v"===i?"h":"v",element:t._root.hue.picker,wrapper:t._root.hue.slider,onstop:()=>t._emit("changestop",t),onchange(o){if(!e.hue||!e.palette)return;const n=r();t._recalc&&(n.h=360*o),this.element.style.backgroundColor="hsl(".concat(n.h,", 100%, 50%)"),s.palette.trigger()}}),opacity:O({lock:"v"===n?"h":"v",element:t._root.opacity.picker,wrapper:t._root.opacity.slider,onstop:()=>t._emit("changestop",t),onchange(o){if(!e.opacity||!e.palette)return;const n=r();t._recalc&&(n.a=Math.round(100*o)/100),this.element.style.background="rgba(0, 0, 0, ".concat(n.a,")"),s.palette.trigger()}}),selectable:E({elements:t._root.interaction.options,className:"active",onchange(e){t._representation=e.target.getAttribute("data-type").toUpperCase(),t._recalc&&t._updateOutput()}})};this._components=s}_bindEvents(){const{_root:t,options:e}=this,o=[r(t.interaction.clear,"click",()=>this._clearColor()),r([t.interaction.cancel,t.preview.lastColor],"click",()=>{this._emit("cancel",this),this.setHSVA(...(this._lastColor||this._color).toHSVA(),!0)}),r(t.interaction.save,"click",()=>{!this.applyColor()&&!e.showAlways&&this.hide()}),r(t.interaction.result,["keyup","input"],t=>{this.setColor(t.target.value,!0)&&!this._initializingActive&&this._emit("change",this._color),t.stopImmediatePropagation()}),r(t.interaction.result,["focus","blur"],t=>{this._recalc="blur"===t.type,this._recalc&&this._updateOutput()}),r([t.palette.palette,t.palette.picker,t.hue.slider,t.hue.picker,t.opacity.slider,t.opacity.picker],["mousedown","touchstart"],()=>this._recalc=!0,{passive:!0})];if(!e.showAlways){const n=e.closeWithKey;o.push(r(t.button,"click",()=>this.isOpen()?this.hide():this.show()),r(document,"keyup",t=>this.isOpen()&&(t.key===n||t.code===n)&&this.hide()),r(document,["touchstart","mousedown"],e=>{this.isOpen()&&!l(e).some(e=>e===t.app||e===t.button)&&this.hide()},{capture:!0}))}if(e.adjustableNumbers){const e={rgba:[255,255,255,1],hsva:[360,100,100,1],hsla:[360,100,100,1],cmyk:[100,100,100,100]};u(t.interaction.result,(t,o,n)=>{const i=e[this.getColorRepresentation().toLowerCase()];if(i){const e=i[n],r=t+(e>=100?1e3*o:o);return r<=0?0:Number((r<e?r:e).toPrecision(3))}return t})}if(e.autoReposition&&!e.inline){let t=null;const n=this;o.push(r(window,["scroll","resize"],()=>{n.isOpen()&&(e.closeOnScroll&&n.hide(),null===t?(t=setTimeout(()=>t=null,100),requestAnimationFrame((function e(){null!==t&&requestAnimationFrame(e)}))):(clearTimeout(t),t=setTimeout(()=>t=null,100)))},{capture:!0}))}this._eventBindings=o}_rePositioningPicker(){const{options:t}=this;if(!t.inline){if(!this._nanopop.update({container:document.body.getBoundingClientRect(),position:t.position,forceApplyOnFailure:!this._recalc})){const t=this._root.app,e=t.getBoundingClientRect();t.style.top="".concat((window.innerHeight-e.height)/2,"px"),t.style.left="".concat((window.innerWidth-e.width)/2,"px")}}}_updateOutput(){const{_root:t,_color:e,options:o}=this;if(t.interaction.type()){const n="to".concat(t.interaction.type().getAttribute("data-type"));t.interaction.result.value="function"==typeof e[n]?e[n]().toString(o.outputPrecision):""}!this._initializingActive&&this._recalc&&this._emit("change",e)}_clearColor(t=!1){const{_root:e,options:o}=this;o.useAsButton||(e.button.style.color="rgba(0, 0, 0, 0.15)"),e.button.classList.add("clear"),o.showAlways||this.hide(),this._lastColor=null,this._initializingActive||t||(this._emit("save",null),this._emit("clear",this))}_parseLocalColor(t){const{values:e,type:o,a:n}=C(t),{lockOpacity:i}=this.options,r=void 0!==n&&1!==n;return e&&3===e.length&&(e[3]=void 0),{values:!e||i&&r?null:e,type:o}}_t(t){return this.options.i18n[t]||B.I18N_DEFAULTS[t]}_emit(t,...e){this._eventListener[t].forEach(t=>t(...e,this))}on(t,e){return this._eventListener[t].push(e),this}off(t,e){const o=this._eventListener[t]||[],n=o.indexOf(e);return~n&&o.splice(n,1),this}addSwatch(t){const{values:e}=this._parseLocalColor(t);if(e){const{_swatchColors:t,_root:o}=this,n=k(...e),i=a('<button type="button" style="color: '.concat(n.toRGBA().toString(0),'" aria-label="').concat(this._t("btn:swatch"),'"/>'));return o.swatches.appendChild(i),t.push({el:i,color:n}),this._eventBindings.push(r(i,"click",()=>{this.setHSVA(...n.toHSVA(),!0),this._emit("swatchselect",n),this._emit("change",n)})),!0}return!1}removeSwatch(t){const e=this._swatchColors[t];if(e){const{el:o}=e;return this._root.swatches.removeChild(o),this._swatchColors.splice(t,1),!0}return!1}applyColor(t=!1){const{preview:e,button:o}=this._root,n=this._color.toRGBA().toString(0);return e.lastColor.style.color=n,this.options.useAsButton||(o.style.color=n),o.classList.remove("clear"),this._lastColor=this._color.clone(),this._initializingActive||t||this._emit("save",this._color),this}destroy(){this._eventBindings.forEach(t=>s(...t)),Object.keys(this._components).forEach(t=>this._components[t].destroy())}destroyAndRemove(){this.destroy();const{root:t,app:e}=this._root;t.parentElement&&t.parentElement.removeChild(t),e.parentElement.removeChild(e),Object.keys(this).forEach(t=>this[t]=null)}hide(){return this._root.app.classList.remove("visible"),this._emit("hide",this),this}show(){return this.options.disabled||(this._root.app.classList.add("visible"),this._emit("show",this)),this}isOpen(){return this._root.app.classList.contains("visible")}setHSVA(t=360,e=0,o=0,n=1,i=!1){const r=this._recalc;if(this._recalc=!1,t<0||t>360||e<0||e>100||o<0||o>100||n<0||n>1)return!1;this._color=k(t,e,o,n);const{hue:s,opacity:a,palette:c}=this._components;return s.update(t/360),a.update(n),c.update(e/100,1-o/100),i||this.applyColor(),r&&this._updateOutput(),this._recalc=r,!0}setColor(t,e=!1){if(null===t)return this._clearColor(e),!0;const{values:o,type:n}=this._parseLocalColor(t);if(o){const t=n.toUpperCase(),{options:i}=this._root.interaction,r=i.find(e=>e.getAttribute("data-type")===t);if(r&&!r.hidden)for(const t of i)t.classList[t===r?"add":"remove"]("active");return!!this.setHSVA(...o,e)&&this.setColorRepresentation(t)}return!1}setColorRepresentation(t){return t=t.toUpperCase(),!!this._root.interaction.options.find(e=>e.getAttribute("data-type").startsWith(t)&&!e.click())}getColorRepresentation(){return this._representation}getColor(){return this._color}getSelectedColor(){return this._lastColor}getRoot(){return this._root}disable(){return this.hide(),this.options.disabled=!0,this._root.button.classList.add("disabled"),this}enable(){return this.options.disabled=!1,this._root.button.classList.remove("disabled"),this}}L(B,"utils",n),L(B,"version",h.a),L(B,"I18N_DEFAULTS",{"ui:dialog":"color picker dialog","btn:toggle":"toggle color picker dialog","btn:swatch":"color swatch","btn:last-color":"use previous color","btn:save":"Save","btn:cancel":"Cancel","btn:clear":"Clear","aria:btn:save":"save and close","aria:btn:cancel":"cancel and close","aria:btn:clear":"clear and close","aria:input":"color input field","aria:palette":"color selection area","aria:hue":"hue selection slider","aria:opacity":"selection slider"}),L(B,"DEFAULT_OPTIONS",{appClass:null,theme:"classic",useAsButton:!1,padding:8,disabled:!1,comparison:!0,closeOnScroll:!1,outputPrecision:0,lockOpacity:!1,autoReposition:!0,container:"body",components:{interaction:{}},i18n:{},swatches:null,inline:!1,sliders:null,default:"#42445a",defaultRepresentation:null,position:"bottom-middle",adjustableNumbers:!0,showAlways:!1,closeWithKey:"Escape"}),L(B,"create",t=>new B(t));e.default=B}]).default}));
+//# sourceMappingURL=pickr.min.js.map

js/libraries/range-slider.min.js

@@ -0,0 +1,10 @@
+!function(e,t){"use strict";function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var i=function(){function e(e,t){for(var s=0;s<t.length;s++){var i=t[s];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,s,i){return s&&e(t.prototype,s),i&&e(t,i),t}}();/*!
+ * Range-slider 1.0.0
+ * Customizable slider (range) component for JavaScript.
+ *
+ * Copyright: Alexey Grinko, 2017
+ * Git repository: https://github.com/agrinko/range-slider.git
+ *
+ * @license MIT - https://opensource.org/licenses/MIT
+ */
+!function(e){var t={value:0,min:0,max:100,step:1,unit:null,width:null,design:"3d",theme:"default",size:"medium",handle:"square",popup:"top",showMinMaxLabels:!0,showCurrentValueLabel:!1,labelsPosition:"top",onstart:function(){},onmove:function(){},onfinish:function(){}},n=function(){function e(i,n){s(this,e),i instanceof HTMLElement||(i=e._el(),n||(n=i)),this.el=i,this.s=a({},t,n),this._validateSettings(),this._buildDOM(),this._bindEvents(),this.initialValue=this.s.value,this.value=null,this.setValue(this.s.value)}return i(e,[{key:"getValue",value:function(){return this.value}},{key:"getElement",value:function(){return this.el}},{key:"labelValue",value:function(){return(arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.value)+" "+(this.s.unit||"")}},{key:"setValue",value:function(e){(e=this._normalize(e))<this.s.min||e>this.s.max||(null===this.value||e!=this.value&&this.s.onmove.call(this,e)!==!1)&&(this.value=e,this._updatePopup(),this._updateLabel(),this._moveToValue(e))}},{key:"setWidth",value:function(e){arguments.length&&("number"==typeof e&&(e+="px"),this.el.style.width=e)}},{key:"_validateSettings",value:function(){this.s.value=e.toNumber(this.s.value,t.value),this.s.min=e.toNumber(this.s.min,t.min),this.s.max=e.toNumber(this.s.max,t.max),this.s.step=e.toNumber(this.s.step,t.step)}},{key:"_buildDOM",value:function(){this._setClasses(),this._createBar(),this.setWidth(this.s.width),(this.s.showMinMaxLabels||this.s.showCurrentValueLabel)&&this._createLabels(),this.s.popup&&this._createPopup()}},{key:"_setClasses",value:function(){var e=this;["range-slider","rs-theme-"+this.s.theme,"rs-size-"+this.s.size,"rs-design-"+this.s.design,"rs-handle-"+this.s.handle,this.s.showMinMaxLabels||this.s.showCurrentValueLabel?"rs-labels-"+this.s.labelsPosition:null].forEach(function(t){t&&(e.el.className+=" "+t)})}},{key:"_createBar",value:function(){var t=e._el(),s=e._el(),i=e._el(),n=e._el();t.className="rs-bar",s.className="rs-progress",i.className="rs-wrap",n.className="rs-handle",t.appendChild(i),i.appendChild(s),i.appendChild(n),this.el.appendChild(t),this.bar=t,this.progressBar=s,this.range=i,this.handle=n}},{key:"_createLabels",value:function(){var t=e._el(),s=e._el(),i=e._el(),n=e._el(),a=e._el();t.className="rs-labels",s.className="rs-wrap",i.className="rs-label-left",n.className="rs-label-middle",a.className="rs-label-right",t.appendChild(i),t.appendChild(a),t.appendChild(s),s.appendChild(n),this.el.appendChild(t),this.labels={left:i,right:a,middle:n},this._updateLabels()}},{key:"_updateLabels",value:function(){this.s.showMinMaxLabels&&(this.labels.left.innerText=this.labelValue(this.s.min),this.labels.right.innerText=this.labelValue(this.s.max))}},{key:"_updateLabel",value:function(){this.s.showCurrentValueLabel&&(this.labels.middle.innerText=this.labelValue(this.value))}},{key:"_createPopup",value:function(){var t=e._el();t.className="rs-popup rs-hidden rs-popup-"+this.s.popup,this.handle.appendChild(t),this.popup=t}},{key:"_updatePopup",value:function(){this.s.popup&&(this.popup.innerText=this.labelValue(this.value))}},{key:"_togglePopup",value:function(e){this.s.popup&&(e?(this.popup.className=this.popup.className.replace("rs-hidden",""),this.s.showCurrentValueLabel&&(this.labels.middle.className+=" rs-hidden")):(this.popup.className+=" rs-hidden",this.s.showCurrentValueLabel&&(this.labels.middle.className=this.labels.middle.className.replace("rs-hidden",""))))}},{key:"_bindEvents",value:function(){var e=this;this.bar.addEventListener("mousedown",function(t){0==t.button&&(t.preventDefault(),e._begin(t.clientX,t.target))}),this.bar.addEventListener("touchstart",function(t){t.changedTouches&&t.changedTouches[0]&&(t.preventDefault(),e._begin(t.changedTouches[0].clientX,t.target))})}},{key:"_begin",value:function(e,t){this.s.onstart.call(this,this.value)!==!1&&(this.prevValue=this.value,this.el.className+=" rs-active",this._togglePopup(!0),t!=this.handle?this._move(e):this._ensureNoElementsIntersection(),this._initHandle(e))}},{key:"_initHandle",value:function(e){var t=this,s=this.handle.getBoundingClientRect(),i=e-(s.left+s.width/2),n=function(e){var s=e.changedTouches?e.changedTouches[0].clientX:e.clientX;t._move(s-i),e.preventDefault()},a=function e(){document.removeEventListener("mousemove",n),document.removeEventListener("touchmove",n),document.removeEventListener("mouseup",e),document.removeEventListener("touchend",e),document.removeEventListener("touchcancel",e),t._end()};document.addEventListener("mousemove",n),document.addEventListener("touchmove",n),document.addEventListener("mouseup",a),document.addEventListener("touchend",a),document.addEventListener("touchcancel",a)}},{key:"_end",value:function(){this.value!=this.prevValue&&this.s.onfinish.call(this,this.value),this.el.className=this.el.className.replace("rs-active",""),this._togglePopup(!1),this._ensureNoElementsIntersection()}},{key:"_move",value:function(e){var t=this._getRelX(e),s=this._toValue(t);this.setValue(s)}},{key:"_moveToValue",value:function(e){e=100*this._toFraction(e),this.progressBar.style.width=this.handle.style.left=e+"%",this._moveLabel(e)}},{key:"_moveLabel",value:function(e){this.s.showCurrentValueLabel&&(this.labels.middle.style.left=e+"%"),this._ensureNoElementsIntersection()}},{key:"_ensureNoElementsIntersection",value:function(){this.s.showMinMaxLabels&&(this.s.popup&&this.popup.className.indexOf("rs-hidden")==-1&&(e.ensureNoIntersection(this.popup,this.labels.left),e.ensureNoIntersection(this.popup,this.labels.right)),this.s.showCurrentValueLabel&&this.labels.middle.className.indexOf("rs-hidden")==-1&&(e.ensureNoIntersection(this.labels.middle,this.labels.left),e.ensureNoIntersection(this.labels.middle,this.labels.right)))}},{key:"_normalize",value:function(e){e=Math.round(Math.min(Math.max(e,this.s.min),this.s.max));var t=(e-this.initialValue)%this.s.step;return t>=this.s.step/2&&(e+=this.s.step),e-=t}},{key:"_getRelX",value:function(e){var t=this.range.getBoundingClientRect(),s=(e-t.left)/t.width;return Math.min(Math.max(s,0),1)}},{key:"_toValue",value:function(e){return this.s.min+(this.s.max-this.s.min)*e}},{key:"_toFraction",value:function(e){return(e-this.s.min)/(this.s.max-this.s.min)}}],[{key:"_el",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"DIV";return document.createElement(e)}},{key:"ensureNoIntersection",value:function(t,s){s.className=s.className.replace("rs-hidden",""),t.className.indexOf("rs-hidden")==-1&&e.intersects(t,s)&&(s.className+=" rs-hidden")}},{key:"toNumber",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return e=+e,e||0===e||(e=t),e}},{key:"intersects",value:function(e,t){var s=e.getBoundingClientRect(),i=t.getBoundingClientRect();return(this._intersectsRectH(s,i)||this._intersectsRectH(i,s))&&(this._intersectsRectV(s,i)||this._intersectsRectV(i,s))}},{key:"_intersectsRectH",value:function(e,t){return e.left<=t.right&&(e.left>=t.left||e.right>=t.left)}},{key:"_intersectsRectV",value:function(e,t){return e.top<=t.bottom&&(e.top>=t.top||e.bottom>=t.top)}}]),e}(),a=Object.assign||function(e){for(var t=1;t<arguments.length;t++)for(var s in arguments[t])arguments[t].hasOwnProperty(s)&&(e[s]=arguments[t][s]);return e};"function"==typeof define&&define.amd?define(function(){return n}):"undefined"!=typeof module&&module.exports?module.exports=n:e.RangeSlider=n}(window),t.true=e}({},function(){return this}());

js/libraries/sortable.min.js

@@ -0,0 +1,2 @@
+var sortable=function(){"use strict";function c(e,t,n){if(void 0===n)return e&&e.h5s&&e.h5s.data&&e.h5s.data[t];e.h5s=e.h5s||{},e.h5s.data=e.h5s.data||{},e.h5s.data[t]=n}var v=function(e,t){if(!(e instanceof NodeList||e instanceof HTMLCollection||e instanceof Array))throw new Error("You must provide a nodeList/HTMLCollection/Array of elements to be filtered.");return"string"!=typeof t?Array.from(e):Array.from(e).filter(function(e){return 1===e.nodeType&&e.matches(t)})},y=new Map,t=function(){function e(){this._config=new Map,this._placeholder=void 0,this._data=new Map}return Object.defineProperty(e.prototype,"config",{get:function(){var n={};return this._config.forEach(function(e,t){n[t]=e}),n},set:function(e){if("object"!=typeof e)throw new Error("You must provide a valid configuration object to the config setter.");var t=Object.assign({},e);this._config=new Map(Object.entries(t))},enumerable:!1,configurable:!0}),e.prototype.setConfig=function(e,t){if(!this._config.has(e))throw new Error("Trying to set invalid configuration item: "+e);this._config.set(e,t)},e.prototype.getConfig=function(e){if(!this._config.has(e))throw new Error("Invalid configuration item requested: "+e);return this._config.get(e)},Object.defineProperty(e.prototype,"placeholder",{get:function(){return this._placeholder},set:function(e){if(!(e instanceof HTMLElement)&&null!==e)throw new Error("A placeholder must be an html element or null.");this._placeholder=e},enumerable:!1,configurable:!0}),e.prototype.setData=function(e,t){if("string"!=typeof e)throw new Error("The key must be a string.");this._data.set(e,t)},e.prototype.getData=function(e){if("string"!=typeof e)throw new Error("The key must be a string.");return this._data.get(e)},e.prototype.deleteData=function(e){if("string"!=typeof e)throw new Error("The key must be a string.");return this._data.delete(e)},e}(),E=function(e){if(!(e instanceof HTMLElement))throw new Error("Please provide a sortable to the store function.");return y.has(e)||y.set(e,new t),y.get(e)};function i(e,t,n){if(e instanceof Array)for(var r=0;r<e.length;++r)i(e[r],t,n);else e.addEventListener(t,n),E(e).setData("event"+t,n)}function a(e,t){if(e instanceof Array)for(var n=0;n<e.length;++n)a(e[n],t);else e.removeEventListener(t,E(e).getData("event"+t)),E(e).deleteData("event"+t)}function l(e,t,n){if(e instanceof Array)for(var r=0;r<e.length;++r)l(e[r],t,n);else e.setAttribute(t,n)}function r(e,t){if(e instanceof Array)for(var n=0;n<e.length;++n)r(e[n],t);else e.removeAttribute(t)}var w=function(e){if(!e.parentElement||0===e.getClientRects().length)throw new Error("target element must be part of the dom");var t=e.getClientRects()[0];return{left:t.left+window.pageXOffset,right:t.right+window.pageXOffset,top:t.top+window.pageYOffset,bottom:t.bottom+window.pageYOffset}},d=function(n,r){var o;return void 0===r&&(r=0),function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];clearTimeout(o),o=setTimeout(function(){n.apply(void 0,e)},r)}},b=function(e,t){if(!(e instanceof HTMLElement&&(t instanceof NodeList||t instanceof HTMLCollection||t instanceof Array)))throw new Error("You must provide an element and a list of elements.");return Array.from(t).indexOf(e)},f=function(e){if(!(e instanceof HTMLElement))throw new Error("Element is not a node element.");return null!==e.parentNode},n=function(e,t,n){if(!(e instanceof HTMLElement&&e.parentElement instanceof HTMLElement))throw new Error("target and element must be a node");e.parentElement.insertBefore(t,"before"===n?e:e.nextElementSibling)},T=function(e,t){return n(e,t,"before")},C=function(e,t){return n(e,t,"after")},o=function(t,n,e){if(void 0===n&&(n=function(e,t){return e}),void 0===e&&(e=function(e){return e}),!(t instanceof HTMLElement)||!0==!t.isSortable)throw new Error("You need to provide a sortableContainer to be serialized.");if("function"!=typeof n||"function"!=typeof e)throw new Error("You need to provide a valid serializer for items and the container.");var r=c(t,"opts").items,o=v(t.children,r),a=o.map(function(e){return{parent:t,node:e,html:e.outerHTML,index:b(e,o)}});return{container:e({node:t,itemCount:a.length}),items:a.map(function(e){return n(e,t)})}},u=function(e,t,n){var r;if(void 0===n&&(n="sortable-placeholder"),!(e instanceof HTMLElement))throw new Error("You must provide a valid element as a sortable.");if(!(t instanceof HTMLElement)&&void 0!==t)throw new Error("You must provide a valid element as a placeholder or set ot to undefined.");return void 0===t&&(["UL","OL"].includes(e.tagName)?t=document.createElement("li"):["TABLE","TBODY"].includes(e.tagName)?(t=document.createElement("tr")).innerHTML='<td colspan="100"></td>':t=document.createElement("div")),"string"==typeof n&&(r=t.classList).add.apply(r,n.split(" ")),t},L=function(e){if(!(e instanceof HTMLElement))throw new Error("You must provide a valid dom element");var n=window.getComputedStyle(e);return"border-box"===n.getPropertyValue("box-sizing")?parseInt(n.getPropertyValue("height"),10):["height","padding-top","padding-bottom"].map(function(e){var t=parseInt(n.getPropertyValue(e),10);return isNaN(t)?0:t}).reduce(function(e,t){return e+t})},x=function(e){if(!(e instanceof HTMLElement))throw new Error("You must provide a valid dom element");var n=window.getComputedStyle(e);return["width","padding-left","padding-right"].map(function(e){var t=parseInt(n.getPropertyValue(e),10);return isNaN(t)?0:t}).reduce(function(e,t){return e+t})},s=function(e,t){if(!(e instanceof Array))throw new Error("You must provide a Array of HTMLElements to be filtered.");return"string"!=typeof t?e:e.filter(function(e){return e.querySelector(t)instanceof HTMLElement||e.shadowRoot&&e.shadowRoot.querySelector(t)instanceof HTMLElement}).map(function(e){return e.querySelector(t)||e.shadowRoot&&e.shadowRoot.querySelector(t)})},p=function(e){return e.composedPath&&e.composedPath()[0]||e.target},m=function(e,t,n){return{element:e,posX:n.pageX-t.left,posY:n.pageY-t.top}},g=function(e,t,n){if(!(e instanceof Event))throw new Error("setDragImage requires a DragEvent as the first argument.");if(!(t instanceof HTMLElement))throw new Error("setDragImage requires the dragged element as the second argument.");if(n||(n=m),e.dataTransfer&&e.dataTransfer.setDragImage){var r=n(t,w(t),e);if(!(r.element instanceof HTMLElement)||"number"!=typeof r.posX||"number"!=typeof r.posY)throw new Error("The customDragImage function you provided must return and object with the properties element[string], posX[integer], posY[integer].");e.dataTransfer.effectAllowed="copyMove",e.dataTransfer.setData("text/plain",p(e).id),e.dataTransfer.setDragImage(r.element,r.posX,r.posY)}},M=function(e,t){if(!0===e.isSortable){var n=E(e).getConfig("acceptFrom");if(null!==n&&!1!==n&&"string"!=typeof n)throw new Error('HTML5Sortable: Wrong argument, "acceptFrom" must be "null", "false", or a valid selector string.');if(null!==n)return!1!==n&&0<n.split(",").filter(function(e){return 0<e.length&&t.matches(e)}).length;if(e===t)return!0;if(void 0!==E(e).getConfig("connectWith")&&null!==E(e).getConfig("connectWith"))return E(e).getConfig("connectWith")===E(t).getConfig("connectWith")}return!1},D={items:null,connectWith:null,disableIEFix:null,acceptFrom:null,copy:!1,placeholder:null,placeholderClass:"sortable-placeholder",draggingClass:"sortable-dragging",hoverClass:!1,dropTargetContainerClass:!1,debounce:0,throttleTime:100,maxItems:0,itemSerializer:void 0,containerSerializer:void 0,customDragImage:null,orientation:"vertical"};var H,I,A,S,_,Y,O,P,z,N=function(e,t){if("string"==typeof E(e).getConfig("hoverClass")){var o=E(e).getConfig("hoverClass").split(" ");!0===t?(i(e,"mousemove",function(r,o){var a=this;if(void 0===o&&(o=250),"function"!=typeof r)throw new Error("You must provide a function as the first argument for throttle.");if("number"!=typeof o)throw new Error("You must provide a number as the second argument for throttle.");var i=null;return function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];var n=Date.now();(null===i||o<=n-i)&&(i=n,r.apply(a,e))}}(function(r){0===r.buttons&&v(e.children,E(e).getConfig("items")).forEach(function(e){var t,n;e!==r.target?(t=e.classList).remove.apply(t,o):(n=e.classList).add.apply(n,o)})},E(e).getConfig("throttleTime"))),i(e,"mouseleave",function(){v(e.children,E(e).getConfig("items")).forEach(function(e){var t;(t=e.classList).remove.apply(t,o)})})):(a(e,"mousemove"),a(e,"mouseleave"))}},h=function(e){a(e,"dragstart"),a(e,"dragend"),a(e,"dragover"),a(e,"dragenter"),a(e,"drop"),a(e,"mouseenter"),a(e,"mouseleave")},W=function(e,t){e&&a(e,"dragleave"),t&&t!==e&&a(t,"dragleave")},j=function(e,t){var n=e;return!0===E(t).getConfig("copy")&&(l(n=e.cloneNode(!0),"aria-copied","true"),e.parentElement.appendChild(n),n.style.display="none",n.oldDisplay=e.style.display),n},F=function(e){var t;(t=e).h5s&&delete t.h5s.data,r(e,"aria-dropeffect")},q=function(e){r(e,"aria-grabbed"),r(e,"aria-copied"),r(e,"draggable"),r(e,"role")};function R(e,t){if(t.composedPath)return t.composedPath().find(function(e){return e.isSortable});for(;!0!==e.isSortable;)e=e.parentElement;return e}function X(e,t){var n=c(e,"opts"),r=v(e.children,n.items).filter(function(e){return e.contains(t)||e.shadowRoot&&e.shadowRoot.contains(t)});return 0<r.length?r[0]:t}var B=function(e){var t=c(e,"opts"),n=v(e.children,t.items),r=s(n,t.handle);(l(e,"aria-dropeffect","move"),c(e,"_disabled","false"),l(r,"draggable","true"),!1===t.disableIEFix)&&("function"==typeof(document||window.document).createElement("span").dragDrop&&i(r,"mousedown",function(){if(-1!==n.indexOf(this))this.dragDrop();else{for(var e=this.parentElement;-1===n.indexOf(e);)e=e.parentElement;e.dragDrop()}}))},k=function(e){var t=c(e,"opts"),n=v(e.children,t.items),r=s(n,t.handle);c(e,"_disabled","false"),h(n),W(),a(r,"mousedown"),a(e,"dragover"),a(e,"dragenter"),a(e,"drop")};function U(e,h){var a=String(h);return h=h||{},"string"==typeof e&&(e=document.querySelectorAll(e)),e instanceof HTMLElement&&(e=[e]),e=Array.prototype.slice.call(e),/serialize/.test(a)?e.map(function(e){var t=c(e,"opts");return o(e,t.itemSerializer,t.containerSerializer)}):(e.forEach(function(s){if(/enable|disable|destroy/.test(a))return U[a](s);["connectWith","disableIEFix"].forEach(function(e){Object.prototype.hasOwnProperty.call(h,e)&&null!==h[e]&&console.warn('HTML5Sortable: You are using the deprecated configuration "'+e+'". This will be removed in an upcoming version, make sure to migrate to the new options when updating.')}),h=Object.assign({},D,E(s).config,h),E(s).config=h,c(s,"opts",h),s.isSortable=!0,k(s);var e,t=v(s.children,h.items);if(null!==h.placeholder&&void 0!==h.placeholder){var n=document.createElement(s.tagName);h.placeholder instanceof HTMLElement?n.appendChild(h.placeholder):n.innerHTML=h.placeholder,e=n.children[0]}E(s).placeholder=u(s,e,h.placeholderClass),c(s,"items",h.items),h.acceptFrom?c(s,"acceptFrom",h.acceptFrom):h.connectWith&&c(s,"connectWith",h.connectWith),B(s),l(t,"role","option"),l(t,"aria-grabbed","false"),N(s,!0),i(s,"dragstart",function(e){var t=p(e);if(!0!==t.isSortable&&(e.stopImmediatePropagation(),(!h.handle||t.matches(h.handle))&&"false"!==t.getAttribute("draggable"))){var n=R(t,e),r=X(n,t);O=v(n.children,h.items),_=O.indexOf(r),Y=b(r,n.children),S=n,g(e,r,h.customDragImage),I=L(r),A=x(r),r.classList.add(h.draggingClass),l(H=j(r,n),"aria-grabbed","true"),n.dispatchEvent(new CustomEvent("sortstart",{detail:{origin:{elementIndex:Y,index:_,container:S},item:H,originalTarget:t}}))}}),i(s,"dragenter",function(e){var n=p(e),r=R(n,e);r&&r!==P&&(z=v(r.children,c(r,"items")).filter(function(e){return e!==E(s).placeholder}),h.dropTargetContainerClass&&r.classList.add(h.dropTargetContainerClass),r.dispatchEvent(new CustomEvent("sortenter",{detail:{origin:{elementIndex:Y,index:_,container:S},destination:{container:r,itemsBeforeUpdate:z},item:H,originalTarget:n}})),i(r,"dragleave",function(e){var t=e.relatedTarget||e.fromElement;e.currentTarget.contains(t)||(h.dropTargetContainerClass&&r.classList.remove(h.dropTargetContainerClass),r.dispatchEvent(new CustomEvent("sortleave",{detail:{origin:{elementIndex:Y,index:_,container:r},item:H,originalTarget:n}})))})),P=r}),i(s,"dragend",function(e){if(H){H.classList.remove(h.draggingClass),l(H,"aria-grabbed","false"),"true"===H.getAttribute("aria-copied")&&"true"!==c(H,"dropped")&&H.remove(),H.style.display=H.oldDisplay,delete H.oldDisplay;var t=Array.from(y.values()).map(function(e){return e.placeholder}).filter(function(e){return e instanceof HTMLElement}).filter(f)[0];t&&t.remove(),s.dispatchEvent(new CustomEvent("sortstop",{detail:{origin:{elementIndex:Y,index:_,container:S},item:H}})),A=I=H=P=null}}),i(s,"drop",function(e){if(M(s,H.parentElement)){e.preventDefault(),e.stopPropagation(),c(H,"dropped","true");var t=Array.from(y.values()).map(function(e){return e.placeholder}).filter(function(e){return e instanceof HTMLElement}).filter(f)[0];C(t,H),t.remove(),s.dispatchEvent(new CustomEvent("sortstop",{detail:{origin:{elementIndex:Y,index:_,container:S},item:H}}));var n=E(s).placeholder,r=v(S.children,h.items).filter(function(e){return e!==n}),o=!0===this.isSortable?this:this.parentElement,a=v(o.children,c(o,"items")).filter(function(e){return e!==n}),i=b(H,Array.from(H.parentElement.children).filter(function(e){return e!==n})),l=b(H,a);h.dropTargetContainerClass&&o.classList.remove(h.dropTargetContainerClass),Y===i&&S===o||s.dispatchEvent(new CustomEvent("sortupdate",{detail:{origin:{elementIndex:Y,index:_,container:S,itemsBeforeUpdate:O,items:r},destination:{index:l,elementIndex:i,container:o,itemsBeforeUpdate:z,items:a},item:H}}))}});var o=d(function(t,e,n,r){if(H)if(h.forcePlaceholderSize&&(E(t).placeholder.style.height=I+"px",E(t).placeholder.style.width=A+"px"),-1<Array.from(t.children).indexOf(e)){var o=L(e),a=x(e),i=b(E(t).placeholder,e.parentElement.children),l=b(e,e.parentElement.children);if(I<o||A<a){var s=o-I,c=a-A,d=w(e).top,f=w(e).left;if(i<l&&("vertical"===h.orientation&&r<d||"horizontal"===h.orientation&&n<f))return;if(l<i&&("vertical"===h.orientation&&d+o-s<r||"horizontal"===h.orientation&&f+a-c<n))return}void 0===H.oldDisplay&&(H.oldDisplay=H.style.display),"none"!==H.style.display&&(H.style.display="none");var u=!1;try{var p=w(e).top+e.offsetHeight/2,m=w(e).left+e.offsetWidth/2;u="vertical"===h.orientation&&p<=r||"horizontal"===h.orientation&&m<=n}catch(e){u=i<l}u?C(e,E(t).placeholder):T(e,E(t).placeholder),Array.from(y.values()).filter(function(e){return void 0!==e.placeholder}).forEach(function(e){e.placeholder!==E(t).placeholder&&e.placeholder.remove()})}else{var g=Array.from(y.values()).filter(function(e){return void 0!==e.placeholder}).map(function(e){return e.placeholder});-1!==g.indexOf(e)||t!==e||v(e.children,h.items).length||(g.forEach(function(e){return e.remove()}),e.appendChild(E(t).placeholder))}},h.debounce),r=function(e){var t=e.target,n=!0===t.isSortable?t:R(t,e);if(t=X(n,t),H&&M(n,H.parentElement)&&"true"!==c(n,"_disabled")){var r=c(n,"opts");parseInt(r.maxItems)&&v(n.children,c(n,"items")).length>=parseInt(r.maxItems)&&H.parentElement!==n||(e.preventDefault(),e.stopPropagation(),e.dataTransfer.dropEffect=!0===E(n).getConfig("copy")?"copy":"move",o(n,t,e.pageX,e.pageY))}};i(t.concat(s),"dragover",r),i(t.concat(s),"dragenter",r)}),e)}return U.destroy=function(e){var t,n,r,o;n=c(t=e,"opts")||{},r=v(t.children,n.items),o=s(r,n.handle),a(t,"dragover"),a(t,"dragenter"),a(t,"dragstart"),a(t,"dragend"),a(t,"drop"),F(t),a(o,"mousedown"),h(r),q(r),W(S,P),t.isSortable=!1},U.enable=function(e){B(e)},U.disable=function(e){var t,n,r,o;n=c(t=e,"opts"),r=v(t.children,n.items),o=s(r,n.handle),l(t,"aria-dropeffect","none"),c(t,"_disabled","true"),l(o,"draggable","false"),a(o,"mousedown")},U.__testing={_data:c,_removeItemEvents:h,_removeItemData:q,_removeSortableData:F,_removeContainerEvents:W},U}();
+//# sourceMappingURL=html5sortable.min.js.map

js/lottie.js

@@ -0,0 +1,39 @@
+async function newLottieAnimation(x, y, json) {
+  const newlottie = new fabric.Lottie(json, {
+    left: x,
+    top: y,
+    width: 500,
+    height: 500,
+    originX: 'center',
+    originY: 'center',
+    backgroundColor: 'rgba(255,255,255,0)',
+    cursorWidth: 1,
+    stroke: '#000',
+    strokeUniform: true,
+    paintFirst: 'stroke',
+    strokeWidth: 0,
+    cursorDuration: 1,
+    cursorDelay: 250,
+    duration: duration * 1000,
+    assetType: 'sprite',
+    id: 'Sprite' + layer_count,
+    objectCaching: false,
+    strokeDashArray: false,
+    inGroup: false,
+    shadow: {
+      color: '#000',
+      offsetX: 0,
+      offsetY: 0,
+      blur: 0,
+      opacity: 0,
+    },
+  });
+  canvas.add(newlottie);
+  canvas.requestRenderAll();
+  newlottie.duration = newlottie.getDuration() * 1000;
+  newlottie.goToSeconds(0);
+  canvas.renderAll();
+  newLayer(newlottie);
+  canvas.setActiveObject(newlottie);
+  canvas.bringToFront(newlottie);
+}

js/recorder.js

@@ -0,0 +1,362 @@
+const FPS = 30;
+let frame = 0;
+var chunks = [];
+var stream;
+var rec;
+var track;
+
+function timeout(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function initRecorder() {
+  stream = document.getElementById('canvasrecord').captureStream(0);
+  track = stream.getVideoTracks()[0];
+
+  if (!track.requestFrame) {
+    track.requestFrame = () => stream.requestFrame();
+  }
+
+  rec = new MediaRecorder(stream, {
+    bitsPerSecond: 3200000,
+  });
+
+  rec.ondataavailable = function (evt) {
+    console.log('chunky');
+    chunks.push(evt.data);
+  };
+
+  rec.start();
+
+  console.log('Recorder has been started');
+
+  rec.onstart = function () {
+    rec.pause();
+    console.log('start!');
+  };
+}
+
+async function recordFrame() {
+  console.log(frame);
+
+  waitForEvent(rec, 'pause');
+
+  //rec.onpause = async function(e) {
+
+  // wake up the recorder
+  rec.resume();
+  recordAnimate(false, (frame / FPS) * 1000);
+  //animate(false, (frame/FPS)*1000)
+  // force write the frame
+  track.requestFrame();
+
+  // wait until our frame-time elapsed
+  await timeout(1000 / FPS);
+
+  // sleep recorder
+  rec.pause();
+  //}
+}
+
+async function exportRecording() {
+  rec.stop();
+  stream.getTracks().forEach((track) => track.stop());
+  await waitForEvent(rec, 'stop');
+  return new Blob(chunks);
+}
+
+// Record canvas
+async function record() {
+  updateRecordCanvas();
+  if ($('input[name=radio]:checked').val() == 'image') {
+    recording = true;
+    paused = true;
+    animate(false, currenttime);
+    const dataURL = canvasrecord.toDataURL({
+      format: 'png',
+    });
+    const link = document.createElement('a');
+    link.download = 'image.png';
+    link.href = dataURL;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    recording = false;
+  } else {
+    if (!recording) {
+      recording = true;
+      paused = true;
+      recordAnimate(false, (frame / FPS) * 1000);
+      recording = true;
+      $('#download-real').html('Rendering...');
+      $('#download-real').addClass('downloading');
+      var fps = 60;
+      var aCtx = new AudioContext();
+      function audioTimerLoop(callback, frequency) {
+        var freq = frequency / 1000;
+        var silence = aCtx.createGain();
+        silence.gain.value = 0;
+        silence.connect(aCtx.destination);
+        onOSCend();
+        var stopped = false;
+        function onOSCend() {
+          osc = aCtx.createOscillator();
+          osc.onended = onOSCend;
+          osc.connect(silence);
+          osc.start(0);
+          osc.stop(aCtx.currentTime + freq);
+          callback(aCtx.currentTime);
+          if (stopped) {
+            osc.onended = function () {
+              return;
+            };
+          }
+        }
+        return function () {
+          stopped = true;
+        };
+      }
+      var stopAnim = audioTimerLoop(renderAnim, 1000 / fps);
+      var stream = document
+        .getElementById('canvasrecord')
+        .captureStream(fps);
+      objects.forEach(function (object) {
+        if (
+          canvasrecord.getItemById(object.id).get('assetType') &&
+          canvasrecord.getItemById(object.id).get('assetType') ==
+            'video'
+        ) {
+          var audio = $(
+            canvasrecord.getItemById(object.id).getElement()
+          )[0];
+          var audioContext = new AudioContext();
+          var audioSource =
+            audioContext.createMediaElementSource(audio);
+          var audioDestination =
+            audioContext.createMediaStreamDestination();
+          audioSource.connect(audioDestination);
+          stream.addTrack(
+            audioDestination.stream.getAudioTracks()[0]
+          );
+        }
+      });
+      if (background_audio != false) {
+        var audioContext = new AudioContext();
+        var audioSource =
+          audioContext.createMediaElementSource(background_audio);
+        var audioDestination =
+          audioContext.createMediaStreamDestination();
+        audioSource.connect(audioDestination);
+        stream.addTrack(audioDestination.stream.getAudioTracks()[0]);
+        background_audio.currentTime = 0;
+        background_audio.play();
+      }
+      let chunks = [];
+      var recorder = new MediaRecorder(stream, {
+        bitsPerSecond: 3200000,
+      });
+      recorder.ondataavailable = (e) => chunks.push(e.data);
+      recorder.onstop = (e) => {
+        stopAnim();
+        downloadRecording(chunks);
+        animate(false, 0);
+        $('#seekbar').offset({
+          left:
+            offset_left +
+            $('#inner-timeline').offset().left +
+            currenttime / timelinetime,
+        });
+        canvas.renderAll();
+        console.log('Finished rendering');
+      };
+      recorder.start();
+
+      setTimeout(function () {
+        recorder.stop();
+      }, duration);
+
+      async function renderAnim(time) {
+        await recordAnimate(time * 1000);
+      }
+    }
+  }
+}
+
+/*
+
+			initRecorder();
+
+			//await timeout(2000)
+		
+			// draw one frame at a time
+			while (frame++ < FPS * (duration/1000)) {
+				await longDraw(); // do the long drawing
+				await recordFrame(); // record at constant FPS 
+			}
+			// now all the frames have been drawn
+			const recorded = await exportRecording(); // we can get our final video file
+			const a = document.createElement('a');
+			a.style.display = 'none';
+			a.href =  URL.createObjectURL(recorded);
+			a.download = "test.webm";
+			document.body.appendChild(a);
+			a.click();
+			recording = false;
+			currenttime = 0;
+			animate(false, 0);
+			$("#seekbar").offset({left:offset_left+$("#inner-timeline").offset().left+(currenttime/timelinetime)});
+			canvas.renderAll();
+				resizeCanvas();
+				if (background_audio != false) {
+						background_audio.pause();
+						background_audio = new Audio(background_audio.src)
+				}
+			$("#download-real").html("Download");
+			$("#download-real").removeClass("downloading");
+			updateRecordCanvas();
+		
+			// Fake long drawing operations that make real-time recording impossible
+			function longDraw() {
+				recordAnimate((frame/FPS)*1000)
+				return wait(Math.random() * 300)
+					.then(recordAnimate((frame/FPS)*1000));
+			}*/
+
+/*
+paused = true;
+			recording = true;
+			$("#download-real").html("Rendering...");
+			$("#download-real").addClass("downloading");
+			var fps = 60;
+			var aCtx = new AudioContext();
+			function audioTimerLoop(callback, frequency) {
+					var freq = frequency / 1000;
+					var silence = aCtx.createGain();
+					silence.gain.value = 0;
+					silence.connect(aCtx.destination);
+					onOSCend();
+					var stopped = false;
+					function onOSCend() {
+							osc = aCtx.createOscillator();
+							osc.onended = onOSCend;
+							osc.connect(silence);
+							osc.start(0);
+							osc.stop(aCtx.currentTime + freq);
+							callback(aCtx.currentTime);
+							if (stopped) {
+									osc.onended = function() {
+											return;
+									};
+							}
+					};
+					return function() {
+					stopped = true;
+					};
+			}
+			var stopAnim = audioTimerLoop(renderAnim, 1000/(fps));
+			var stream = document.getElementById("canvasrecord").captureStream(fps);
+			objects.forEach(function(object){
+					if (canvasrecord.getItemById(object.id).get("assetType") && canvasrecord.getItemById(object.id).get("assetType") == "video") {
+							var audio = $(canvasrecord.getItemById(object.id).getElement())[0];
+							var audioContext = new AudioContext();
+							var audioSource = audioContext.createMediaElementSource(audio);
+							var audioDestination = audioContext.createMediaStreamDestination();
+							audioSource.connect(audioDestination);
+							stream.addTrack(audioDestination.stream.getAudioTracks()[0]);
+					}
+			})
+			if (background_audio != false) {
+					var audioContext = new AudioContext();
+					var audioSource = audioContext.createMediaElementSource(background_audio);
+					var audioDestination = audioContext.createMediaStreamDestination();
+					audioSource.connect(audioDestination);
+					stream.addTrack(audioDestination.stream.getAudioTracks()[0]);
+					background_audio.currentTime = 0;
+					background_audio.play();
+			}
+			let chunks = [];
+			var recorder = new MediaRecorder(stream, {
+				bitsPerSecond : 3200000,
+			});
+			recorder.ondataavailable = e => chunks.push(e.data);
+			recorder.onstop = e => {
+					stopAnim();
+					downloadRecording(chunks);
+					animate(false, 0);
+					$("#seekbar").offset({left:offset_left+$("#inner-timeline").offset().left+(currenttime/timelinetime)});
+					canvas.renderAll();
+					console.log("Finished rendering")
+			}
+			recorder.start();
+
+			setTimeout(function() {
+					recorder.stop();
+			}, duration)
+
+			async function renderAnim(time) {
+					await animate(false, time*1000);
+			} 
+
+*/
+
+/*
+$("#download-real").html("Rendering...");
+			$("#download-real").addClass("downloading");
+		
+			// browser check
+			if (typeof MediaStreamTrackGenerator === undefined || typeof MediaStream === undefined || typeof VideoFrame === undefined) {
+				console.log('Your browser does not support the web APIs used in this demo');
+				return;
+			}
+		
+			// recording setup
+			const fps = 60;
+			const generator = new MediaStreamTrackGenerator({ kind: "video" });
+			const writer = generator.writable.getWriter();
+			const stream = new MediaStream();
+			stream.addTrack(generator);
+			const recorder = new MediaRecorder(stream, { mimeType: "video/webm" });
+			recorder.start();
+
+			function timeout(ms) {
+				return new Promise(resolve => setTimeout(resolve, ms));
+		}
+		
+			// animate stuff
+			console.log('rendering...')
+			console.log(duration);
+			for (let i = 0; i < (duration/1000)*fps; i++) {
+				animate(false, (i/fps)*1000);
+				const frame = new VideoFrame(document.getElementById("canvasrecord"), { 
+					timestamp: (i / fps)*1000
+				});
+				await writer.write(frame);
+				await timeout(100)
+				console.log("frame "+(i/fps)*1000);
+			}
+			console.log('rendering done');
+		
+			// stop recording and 
+			recorder.addEventListener("dataavailable", (evt) => {
+				const a = document.createElement('a');
+				a.style.display = 'none';
+				a.href =  URL.createObjectURL(evt.data);
+				a.download = "test.webm";
+				document.body.appendChild(a);
+				a.click();
+				recording = false;
+				currenttime = 0;
+				animate(false, 0);
+				$("#seekbar").offset({left:offset_left+$("#inner-timeline").offset().left+(currenttime/timelinetime)});
+				canvas.renderAll();
+					resizeCanvas();
+					if (background_audio != false) {
+							background_audio.pause();
+							background_audio = new Audio(background_audio.src)
+					}
+				$("#download-real").html("Download");
+				$("#download-real").removeClass("downloading");
+				updateRecordCanvas();
+			});
+			recorder.stop();
+			*/

js/text.js

@@ -0,0 +1,269 @@
+function animateText(group, ms, play, props, cv, id) {
+  var starttime = p_keyframes.find((x) => x.id == id).start;
+  ms -= starttime;
+  var length = group._objects.length;
+  var globaldelay = 0;
+  for (var i = 0; i < length; i++) {
+    var index = i;
+    if (props.order == 'backward') {
+      index = length - i - 1;
+    }
+    let left = group.item(index).defaultLeft;
+    let top = group.item(index).defaultTop;
+    let scaleX = group.item(index).defaultScaleX;
+    let scaleY = group.item(index).defaultScaleY;
+    var delay = i * duration;
+    var duration = props.duration / length;
+    var animation = {
+      opacity: 0,
+      top: top,
+      left: left,
+      scaleX: scaleX,
+      scaleY: scaleY,
+    };
+    if (props.typeAnim == 'letter') {
+      delay = i * duration - 100;
+    } else if (props.typeAnim == 'word') {
+      if (group.item(index).text == ' ') {
+        globaldelay += 500;
+      }
+      delay = globaldelay;
+    }
+    if (props.preset == 'typewriter') {
+      delay = i * duration;
+      duration = 20;
+    } else if (props.preset == 'fade in') {
+    } else if (props.preset == 'slide top') {
+      animation.top += 20;
+    } else if (props.preset == 'slide bottom') {
+      animation.top -= 20;
+    } else if (props.preset == 'slide left') {
+      animation.left += 20;
+    } else if (props.preset == 'slide right') {
+      animation.left -= 20;
+    } else if (props.preset == 'scale') {
+      animation.scaleX = 0;
+      animation.scaleY = 0;
+    } else if (props.preset == 'shrink') {
+      animation.scaleX = 1.5;
+      animation.scaleY = 1.5;
+    }
+    if (delay < 0) {
+      delay = 0;
+    }
+    if (duration < 20) {
+      duration = 20;
+    }
+    var start = false;
+    var instance = anime({
+      targets: animation,
+      delay: delay,
+      opacity: 1,
+      left: left,
+      top: top,
+      scaleX: scaleX,
+      scaleY: scaleY,
+      duration: duration,
+      easing: props.easing,
+      autoplay: play,
+      update: function () {
+        if (start && play) {
+          group.item(index).set({
+            opacity: animation.opacity,
+            left: animation.left,
+            top: animation.top,
+            scaleX: animation.scaleX,
+            scaleY: animation.scaleY,
+          });
+          cv.renderAll();
+        }
+      },
+      changeBegin: function () {
+        start = true;
+      },
+    });
+    instance.seek(ms);
+    if (!play) {
+      group.item(index).set({
+        opacity: animation.opacity,
+        left: animation.left,
+        top: animation.top,
+        scaleX: animation.scaleX,
+        scaleY: animation.scaleY,
+      });
+      cv.renderAll();
+    }
+  }
+}
+
+function setText(group, props, cv) {
+  var length = group._objects.length;
+  for (var i = 0; i < length; i++) {
+    group.item(i).set({
+      fill: props.fill,
+      fontFamily: props.fontFamily,
+    });
+    cv.renderAll();
+  }
+}
+
+function renderText(string, props, x, y, cv, id, isnew, start) {
+  var textOffset = 0;
+  var group = [];
+  function renderLetter(letter) {
+    var text = new fabric.Text(letter, {
+      left: textOffset,
+      top: 0,
+      fill: props.fill,
+      fontFamily: props.fontFamily,
+      opacity: 1,
+    });
+    text.set({
+      defaultLeft: text.left,
+      defaultTop: text.top,
+      defaultScaleX: 1,
+      defaultScaleY: 1,
+    });
+    textOffset += text.get('width');
+    return text;
+  }
+  for (var i = 0; i < string.length; i++) {
+    group.push(renderLetter(string.charAt(i)));
+  }
+  var result = new fabric.Group(group, {
+    cursorWidth: 1,
+    stroke: '#000',
+    strokeUniform: true,
+    paintFirst: 'stroke',
+    strokeWidth: 0,
+    originX: 'center',
+    originY: 'center',
+    left: x - artboard.left,
+    top: y - artboard.top,
+    cursorDuration: 1,
+    cursorDelay: 250,
+    assetType: 'animatedText',
+    id: id,
+    strokeDashArray: false,
+    inGroup: false,
+  });
+  if (isnew) {
+    result.set({
+      notnew: true,
+      starttime: start,
+    });
+  }
+  result.objectCaching = false;
+  cv.add(result);
+  cv.renderAll();
+  newLayer(result);
+  result._objects.forEach(function (object, index) {
+    result.item(index).set({
+      defaultLeft: result.item(index).defaultLeft - result.width / 2,
+      defaultTop: result.item(index).defaultTop - result.height / 2,
+    });
+  });
+  cv.setActiveObject(result);
+  cv.bringToFront(result);
+  return result.id;
+}
+
+class AnimatedText {
+  constructor(text, props) {
+    this.text = text;
+    this.props = props;
+    this.id = 'Text' + layer_count;
+  }
+  render(cv) {
+    this.id = renderText(
+      this.text,
+      this.props,
+      this.props.left,
+      this.props.top,
+      cv,
+      this.id,
+      false,
+      0
+    );
+    animateText(
+      cv.getItemById(this.id),
+      currenttime,
+      false,
+      this.props,
+      cv,
+      this.id
+    );
+  }
+  seek(ms, cv) {
+    animateText(
+      cv.getItemById(this.id),
+      ms,
+      false,
+      this.props,
+      cv,
+      this.id
+    );
+  }
+  play(cv) {
+    animateText(
+      cv.getItemById(this.id),
+      0,
+      true,
+      this.props,
+      cv,
+      this.id
+    );
+  }
+  getObject(cv) {
+    return cv.getItemById(this.id);
+  }
+  setProps(newprops, cv) {
+    this.props = $.extend(this.props, newprops);
+    setText(cv.getItemById(this.id), this.props, cv);
+  }
+  setProp(newprop) {
+    $.extend(this.props, newprop);
+  }
+  reset(text, newprops, cv) {
+    var obj = cv.getItemById(this.id);
+    var left = obj.left;
+    var top = obj.top;
+    var scaleX = obj,
+      scaleX;
+    var scaleY = obj.scaleY;
+    var angle = obj.angle;
+    var start = p_keyframes.find((x) => x.id == this.id).start;
+    deleteObject(obj, false);
+    this.text = text;
+    this.props = newprops;
+    this.inst = renderText(
+      text,
+      this.props,
+      left,
+      top,
+      cv,
+      this.id,
+      true,
+      start
+    );
+    cv.getItemById(this.id).set({
+      angle: angle,
+      scaleX: scaleX,
+      scaleY: scaleY,
+    });
+    cv.renderAll();
+    animateText(
+      cv.getItemById(this.id),
+      currenttime,
+      false,
+      this.props,
+      cv,
+      this.id
+    );
+    animate(currenttime, false);
+    save();
+  }
+  assignTo(id, text, props) {
+    this.id = id;
+  }
+}

js/ui.js

@@ -0,0 +1,2369 @@
+// Update panel (when selecting / de-selecting objects)
+function updatePanel(selection) {
+  if (!selection) {
+    $('#align').addClass('align-off');
+    $('#object-specific').html(canvas_panel);
+    $('#preset').append("<option value='custom'>Custom</option>");
+    presets.forEach(function (preset) {
+      $('#preset').append(
+        "<option value='" +
+          preset.id +
+          "'>" +
+          preset.name +
+          '</option>'
+      );
+    });
+    $('#preset').val(activepreset);
+    $('#canvas-duration input').val(duration / 1000);
+    $('#preset').niceSelect();
+    updatePanelValues();
+    colormode = 'back';
+    o_fill.setColor(canvas.backgroundColor);
+  } else if (
+    selection &&
+    canvas.getActiveObjects().length == 1 &&
+    canvas.getActiveObject().get('assetType') == 'audio'
+  ) {
+    $('#object-specific').html(audio_panel);
+    $('#object-volume input').val(
+      canvas.getActiveObject().get('volume') * 200
+    );
+  } else if (
+    selection &&
+    canvas.getActiveObjects().length == 1 &&
+    canvas.getActiveObject().get('type') != 'group'
+  ) {
+    if (!cropping) {
+      updateChromaUI();
+      checkFilter();
+    }
+    $('#align').removeClass('align-off');
+    $('#object-specific').html(object_panel);
+    if (
+      canvas.getActiveObject().get('type') == 'image' &&
+      !canvas.getActiveObject().get('assetType')
+    ) {
+      $('#object-specific').append(image_panel);
+      $('#object-specific').append(image_more_panel);
+    } else if (
+      canvas.getActiveObject().get('id').indexOf('Video') >= 0
+    ) {
+      $('#object-specific').append(image_panel);
+      $('#object-specific').append(video_more_panel);
+    } else {
+      $('#object-specific').append(back_panel);
+    }
+    objects.forEach(function (object) {
+      if (object.id != canvas.getActiveObject().get('id')) {
+        $('#masks').append(
+          "<option value='" +
+            object.id +
+            "'>" +
+            object.id +
+            '</option>'
+        );
+      }
+    });
+    $('#masks').niceSelect();
+    var selectme = document.getElementById('select-opacity');
+    o_slider = new RangeSlider(selectme, {
+      design: '2d',
+      theme: 'default',
+      handle: 'round',
+      popup: null,
+      showMinMaxLabels: false,
+      unit: '%',
+      min: 0,
+      max: 100,
+      value: 100,
+      onmove: function (x) {
+        document
+          .getElementById('object-o')
+          .getElementsByTagName('input')[0].value = x;
+        canvas.getActiveObject().set({
+          opacity: x / 100,
+        });
+        canvas.renderAll();
+      },
+      onfinish: function (x) {
+        document
+          .getElementById('object-o')
+          .getElementsByTagName('input')[0].value = x;
+        updateObjectValues('opacity');
+      },
+      onstart: function (x) {
+        document
+          .getElementById('object-o')
+          .getElementsByTagName('input')[0].value = x;
+      },
+    });
+    if (canvas.getActiveObject().get('type') == 'rect') {
+      $('#object-specific').append(shape_panel);
+    } else if (
+      canvas.getActiveObject().get('type') == 'path' ||
+      canvas.getActiveObject().get('type') == 'circle'
+    ) {
+      $('#object-specific').append(path_panel);
+    } else if (canvas.getActiveObject().get('type') == 'textbox') {
+      $('#object-specific').append(text_panel);
+      selectme = document.getElementById('select-letter');
+      o_letter_slider = new RangeSlider(selectme, {
+        design: '2d',
+        theme: 'default',
+        handle: 'round',
+        popup: null,
+        showMinMaxLabels: false,
+        unit: '%',
+        min: -200,
+        max: 200,
+        value: parseFloat(
+          (canvas.getActiveObject().get('charSpacing') / 10).toFixed(
+            2
+          )
+        ),
+        onmove: function (x) {
+          document
+            .getElementById('text-h')
+            .getElementsByTagName('input')[0].value = x;
+          canvas.getActiveObject().set({ charSpacing: x * 10 });
+          canvas.renderAll();
+          updatePanelValues();
+        },
+        onfinish: function (x) {
+          document
+            .getElementById('text-h')
+            .getElementsByTagName('input')[0].value = x;
+          updateObjectValues('opacity3');
+        },
+        onstart: function (x) {
+          document
+            .getElementById('text-h')
+            .getElementsByTagName('input')[0].value = x;
+        },
+      });
+      selectme = document.getElementById('select-line');
+      o_line_slider = new RangeSlider(selectme, {
+        design: '2d',
+        theme: 'default',
+        handle: 'round',
+        popup: null,
+        showMinMaxLabels: false,
+        unit: '%',
+        min: 1,
+        max: 500,
+        value: parseFloat(
+          (canvas.getActiveObject().get('lineHeight') * 100).toFixed(
+            2
+          )
+        ),
+        onmove: function (x) {
+          document
+            .getElementById('text-v')
+            .getElementsByTagName('input')[0].value = x;
+          canvas
+            .getActiveObject()
+            .set({ lineHeight: parseFloat(x / 100) });
+          canvas.renderAll();
+        },
+        onfinish: function (x) {
+          document
+            .getElementById('text-v')
+            .getElementsByTagName('input')[0].value = x;
+          updateObjectValues('opacity3');
+        },
+        onstart: function (x) {
+          document
+            .getElementById('text-v')
+            .getElementsByTagName('input')[0].value = x;
+        },
+      });
+      updateTextValues();
+    }
+    $('#object-specific').append(stroke_panel);
+    $('#object-specific').append(shadow_panel);
+    $('#line-cap').niceSelect();
+    updatePanelValues();
+  } else if (
+    canvas.getActiveObjects().length > 1 ||
+    canvas.getActiveObject().get('type') == 'group'
+  ) {
+    $('#align').removeClass('align-off');
+    $('#object-specific').html(object_panel);
+    if (canvas.getActiveObject().get('type') == 'group') {
+      if (
+        canvas.getActiveObject().get('assetType') == 'animatedText'
+      ) {
+        $('#object-specific').append(other_panel);
+        $('#object-specific').append(animated_text_panel);
+        $('#object-specific').append(start_animation_panel);
+        fonts.forEach(function (font) {
+          $('#font-picker').append(
+            "<option value='" + font + "'>" + font + '</option>'
+          );
+        });
+        $('#font-picker').val(
+          animatedtext.find(
+            (x) => x.id == canvas.getActiveObject().id
+          ).props.fontFamily
+        );
+        $('#font-picker').niceSelect();
+        $('#text-color input').val(
+          convertToHex(
+            animatedtext.find(
+              (x) => x.id == canvas.getActiveObject().id
+            ).props.fill
+          )
+        );
+        $('#color-text-side').css(
+          'background-color',
+          animatedtext.find(
+            (x) => x.id == canvas.getActiveObject().id
+          ).props.fill
+        );
+        text_animation_list.forEach(function (preset) {
+          $('#preset-picker').append(
+            "<option value='" +
+              preset.name +
+              "'>" +
+              preset.label +
+              '</option>'
+          );
+        });
+        $('#preset-picker').val(
+          animatedtext.find(
+            (x) => x.id == canvas.getActiveObject().id
+          ).props.preset
+        );
+        $('#preset-picker').niceSelect();
+        $('.order-toggle-item-active').removeClass(
+          'order-toggle-item-active'
+        );
+        $('.order-toggle-item-active-2').removeClass(
+          'order-toggle-item-active-2'
+        );
+        if (
+          animatedtext.find(
+            (x) => x.id == canvas.getActiveObject().id
+          ).props.order == 'backward'
+        ) {
+          $('#order-backward').addClass('order-toggle-item-active');
+        } else {
+          $('#order-forward').addClass('order-toggle-item-active');
+        }
+        if (
+          animatedtext.find(
+            (x) => x.id == canvas.getActiveObject().id
+          ).props.typeAnim == 'letter'
+        ) {
+          $('#type-letters').addClass('order-toggle-item-active-2');
+        } else {
+          $('#type-words').addClass('order-toggle-item-active-2');
+        }
+        $('#easing-picker').val(
+          animatedtext.find(
+            (x) => x.id == canvas.getActiveObject().id
+          ).props.easing
+        );
+        $('#easing-picker').niceSelect();
+        $('#durationinput').val(
+          animatedtext.find(
+            (x) => x.id == canvas.getActiveObject().id
+          ).props.duration / 1000
+        );
+        $('#masks').niceSelect();
+      }
+      /*
+            if (canvas.getActiveObject().isGroup) {
+                $("#object-specific").append(group_panel);
+            } else {
+                $("#object-specific").append(other_panel);
+            }
+            objects.forEach(function(object){
+                if (object.id != canvas.getActiveObject().get("id")) {
+                    $("#masks").append("<option value='"+object.id+"'>"+object.id+"</option>");
+                }
+            });
+            $("#masks").niceSelect();
+						*/
+    } else {
+      $('#object-specific').append(selection_panel);
+    }
+    var selectme = document.getElementById('select-opacity');
+    o_slider = new RangeSlider(selectme, {
+      design: '2d',
+      theme: 'default',
+      handle: 'round',
+      popup: null,
+      showMinMaxLabels: false,
+      unit: '%',
+      min: 0,
+      max: 100,
+      value: 100,
+      onmove: function (x) {
+        document
+          .getElementById('object-o')
+          .getElementsByTagName('input')[0].value = x;
+        canvas.getActiveObject().set({ opacity: x / 100 });
+        canvas.renderAll();
+      },
+      onfinish: function (x) {
+        document
+          .getElementById('object-o')
+          .getElementsByTagName('input')[0].value = x;
+        updateObjectValues('opacity');
+      },
+      onstart: function (x) {
+        document
+          .getElementById('object-o')
+          .getElementsByTagName('input')[0].value = x;
+      },
+    });
+    updatePanelValues();
+  }
+}
+
+function convertToHex(nonHexColorString) {
+  var ctx = document.createElement('canvas').getContext('2d');
+  ctx.fillStyle = nonHexColorString;
+  return ctx.fillStyle.toUpperCase();
+}
+
+function updateStrokeValues() {
+  const object = canvas.getActiveObject();
+  $('.line-join-active').removeClass('line-join-active');
+  if (
+    object.get('strokeDashArray') == false &&
+    object.get('strokeWidth') == 0
+  ) {
+    $('#miter').addClass('line-join-active');
+    $('#miter img').attr('src', 'assets/miter-active.svg');
+  } else if (object.get('strokeDashArray') == false) {
+    $('#bevel').addClass('line-join-active');
+    $('#bevel img').attr('src', 'assets/bevel-active.svg');
+  } else if (object.get('strokeDashArray') == [10, 5]) {
+    $('#round').addClass('line-join-active');
+    $('#round img').attr('src', 'assets/round-active.svg');
+  } else {
+    $('#small-dash').addClass('line-join-active');
+    $('#small-dash img').attr('src', 'assets/dash2-active.svg');
+  }
+}
+
+function toggleAnimationOrder() {
+  var object = canvas.getActiveObject();
+  $('.order-toggle-item-active').removeClass(
+    'order-toggle-item-active'
+  );
+  if ($(this).attr('id') == 'order-backward') {
+    animatedtext
+      .find((x) => x.id == object.id)
+      .setProp({ order: 'backward' }, canvas);
+  } else if ($(this).attr('id') == 'order-forward') {
+    animatedtext
+      .find((x) => x.id == object.id)
+      .setProp({ order: 'forward' }, canvas);
+  }
+  $(this).addClass('order-toggle-item-active');
+  animate(currenttime, false);
+  save();
+}
+function toggleAnimationType() {
+  var object = canvas.getActiveObject();
+  $('.order-toggle-item-active-2').removeClass(
+    'order-toggle-item-active-2'
+  );
+  if ($(this).attr('id') == 'type-words') {
+    animatedtext
+      .find((x) => x.id == object.id)
+      .setProp({ typeAnim: 'word' }, canvas);
+  } else if ($(this).attr('id') == 'type-letters') {
+    animatedtext
+      .find((x) => x.id == object.id)
+      .setProp({ typeAnim: 'letter' }, canvas);
+  }
+  $(this).addClass('order-toggle-item-active-2');
+  animate(currenttime, false);
+  save();
+}
+$(document).on(
+  'click',
+  '.order-toggle-item:not(.order-toggle-item-active)',
+  toggleAnimationOrder
+);
+$(document).on(
+  'click',
+  '.order-toggle-item-2:not(.order-toggle-item-active-2)',
+  toggleAnimationType
+);
+
+function updateTextValues() {
+  const object = canvas.getActiveObject();
+  fonts.forEach(function (font) {
+    $('#font-picker').append(
+      "<option value='" + font + "'>" + font + '</option>'
+    );
+  });
+  $('#font-picker').val(object.get('fontFamily'));
+  $('#font-picker').niceSelect();
+  $('#text-h input').val(
+    parseFloat((object.get('charSpacing') / 10).toFixed(2))
+  );
+  $('#text-v input').val(
+    parseFloat((object.get('lineHeight') * 100).toFixed(2))
+  );
+  if (object.get('textAlign') == 'left') {
+    $('#align-text-left').addClass('align-text-active');
+    $('#align-text-left img').attr(
+      'src',
+      'assets/align-text-left-active.svg'
+    );
+  } else if (object.get('textAlign') == 'center') {
+    $('#align-text-center').addClass('align-text-active');
+    $('#align-text-center img').attr(
+      'src',
+      'assets/align-text-center-active.svg'
+    );
+  } else if (object.get('textAlign') == 'right') {
+    $('#align-text-right').addClass('align-text-right-active');
+    $('#align-text-right img').attr(
+      'src',
+      'assets/align-text-right-active.svg'
+    );
+  } else {
+    $('#align-text-justify').addClass('align-text-justify-active');
+    $('#align-text-justify img').attr(
+      'src',
+      'assets/align-text-justify-active.svg'
+    );
+  }
+  if (
+    object.get('fontWeight') == 'bold' ||
+    object.get('fontWeight') == 700
+  ) {
+    $('#format-bold').addClass('format-text-active');
+    $('#format-bold img').attr('src', 'assets/bold-active.svg');
+  }
+  if (object.get('fontStyle') == 'italic') {
+    $('#format-italic').addClass('format-text-active');
+    $('#format-italic img').attr('src', 'assets/italic-active.svg');
+  }
+  if (object.get('underline') == true) {
+    $('#format-underline').addClass('format-text-active');
+    $('#format-underline img').attr(
+      'src',
+      'assets/underline-active.svg'
+    );
+  }
+  if (object.get('linethrough') == true) {
+    $('#format-strike').addClass('format-text-active');
+    $('#format-strike img').attr('src', 'assets/strike-active.svg');
+  }
+}
+
+// Update panel inputs based on object values
+function updatePanelValues() {
+  if (canvas.getActiveObject()) {
+    if (canvas.getActiveObject().get('assetType') == 'audio') {
+      $('#object-volume input').val(
+        canvas.getActiveObject().get('volume') * 200
+      );
+      return false;
+    }
+    setting = true;
+    var tempstore = false;
+    var object = canvas.getActiveObject();
+    if (
+      canvas.getActiveObjects.length > 1 ||
+      object.get('type') == 'activeSelection'
+    ) {
+      object = object.toGroup();
+      object.set({
+        shadow: {
+          blur: 0,
+          color: 'black',
+          offsetX: 0,
+          offsetY: 0,
+          opacity: 0,
+        },
+      });
+      tempstore = true;
+    }
+    if (object.get('assetType') == 'animatedText') {
+      $('#animated-text input').val(
+        animatedtext.find((x) => x.id == object.id).text
+      );
+    }
+    if (objects.find((x) => x.id == object.get('id'))) {
+      if (
+        $(
+          "#masks option[value='" +
+            objects.find((x) => x.id == object.get('id')).mask +
+            "']"
+        ).length == 0
+      ) {
+        $('#masks').val('none');
+        objects.find((x) => x.id == object.get('id')).mask = 'none';
+        object.clipPath = null;
+        canvas.renderAll();
+      } else {
+        $('#masks').val(
+          objects.find((x) => x.id == object.get('id')).mask
+        );
+      }
+      $('#masks').niceSelect('update');
+    }
+    updateStrokeValues();
+    $('#object-x input').val(
+      parseFloat(
+        (
+          object.get('left') -
+          artboard.get('left') -
+          (object.get('width') * object.get('scaleX')) / 2
+        ).toFixed(2)
+      )
+    );
+    $('#object-y input').val(
+      parseFloat(
+        (
+          object.get('top') -
+          artboard.get('top') -
+          (object.get('height') * object.get('scaleY')) / 2
+        ).toFixed(2)
+      )
+    );
+    $('#object-w input').val(
+      parseFloat(
+        (object.get('width') * object.get('scaleX')).toFixed(2)
+      )
+    );
+    $('#object-h input').val(
+      parseFloat(
+        (object.get('height') * object.get('scaleY')).toFixed(2)
+      )
+    );
+    $('#object-r input').val(
+      parseFloat(object.get('angle').toFixed(2))
+    );
+    $('#object-stroke input').val(
+      parseFloat(object.get('strokeWidth').toFixed(2))
+    );
+    if (object.get('type') != 'group') {
+      $('#object-shadow-x input').val(
+        parseFloat(object.shadow.offsetX.toFixed(2))
+      );
+      $('#object-shadow-y input').val(
+        parseFloat(object.shadow.offsetY.toFixed(2))
+      );
+      $('#object-blur input').val(
+        parseFloat(object.shadow.blur.toFixed(2))
+      );
+      colormode = 'stroke';
+      o_fill.setColor(object.get('stroke'));
+      colormode = 'shadow';
+      o_fill.setColor(object.shadow.color);
+    }
+    o_slider.setValue(object.get('opacity') * 100);
+    if (object.get('type') == 'rect') {
+      $('#object-corners input').val(
+        parseFloat(object.get('rx').toFixed(2))
+      );
+      colormode = 'fill';
+      o_fill.setColor(object.get('fill'));
+    } else if (
+      object.get('type') == 'path' ||
+      object.get('type') == 'circle' ||
+      object.get('type') == 'textbox'
+    ) {
+      colormode = 'fill';
+      o_fill.setColor(object.get('fill'));
+    }
+    if (tempstore) {
+      object.toActiveSelection();
+      canvas.renderAll();
+    }
+    setting = false;
+  } else {
+    $('#canvas-w input').val(artboard.get('width'));
+    $('#canvas-h input').val(artboard.get('height'));
+  }
+}
+
+// Update opacity input
+function updateInputs(id) {
+  if (canvas.getActiveObject().get('assetType') == 'audio') {
+    return false;
+  }
+  if ($('#object-o input').val() > 100) {
+    $('#object-o input').val(100);
+  } else if ($('#object-o input').val() < 0) {
+    $('#object-o input').val(0);
+  }
+  o_slider.setValue($('#object-o input').val());
+  if (
+    !isNaN(parseFloat($('#object-color-fill-opacity input').val())) &&
+    id == 'object-color-fill-opacity'
+  ) {
+    if ($('#object-color-fill-opacity input').val() > 100) {
+      $('#object-color-fill-opacity').val(100);
+    } else if ($('#object-color-fill-opacity input').val() < 0) {
+      $('#object-color-fill-opacity input').val(0);
+    }
+    colormode = 'fill';
+    o_fill.setColor(
+      'rgba(' +
+        o_fill.getColor().toRGBA()[0] +
+        ',' +
+        o_fill.getColor().toRGBA()[1] +
+        ',' +
+        o_fill.getColor().toRGBA()[2] +
+        ',' +
+        $('#object-color-fill-opacity input').val() / 100 +
+        ')'
+    );
+  }
+  if (
+    !isNaN(
+      parseFloat($('#object-color-stroke-opacity input').val())
+    ) &&
+    id == 'object-color-stroke-opacity'
+  ) {
+    if ($('#object-color-stroke-opacity input').val() > 100) {
+      $('#object-color-stroke-opacity').val(100);
+    } else if ($('#object-color-stroke-opacity input').val() < 0) {
+      $('#object-color-stroke-opacity input').val(0);
+    }
+    colormode = 'stroke';
+    o_fill.setColor(
+      'rgba(' +
+        o_fill.getColor().toRGBA()[0] +
+        ',' +
+        o_fill.getColor().toRGBA()[1] +
+        ',' +
+        o_fill.getColor().toRGBA()[2] +
+        ',' +
+        $('#object-color-stroke-opacity input').val() / 100 +
+        ')'
+    );
+  }
+  if (
+    !isNaN(
+      parseFloat($('#object-color-shadow-opacity input').val())
+    ) &&
+    id == 'object-color-shadow-opacity'
+  ) {
+    if ($('#object-color-shadow-opacity input').val() > 100) {
+      $('#object-color-shadow-opacity').val(100);
+    } else if ($('#object-color-shadow-opacity input').val() < 0) {
+      $('#object-color-shadow-opacity input').val(0);
+    }
+    colormode = 'shadow';
+    o_fill.setColor(
+      'rgba(' +
+        o_fill.getColor().toRGBA()[0] +
+        ',' +
+        o_fill.getColor().toRGBA()[1] +
+        ',' +
+        o_fill.getColor().toRGBA()[2] +
+        ',' +
+        $('#object-color-shadow-opacity input').val() / 100 +
+        ')'
+    );
+  }
+}
+
+// Update object position based on panel input values
+function updateObjectValues(type) {
+  autoSave();
+  if (canvas.getActiveObjects().length > 0) {
+    if ($(this).find('input').val() || type) {
+      var object = canvas.getActiveObject();
+      if ($(this).attr('id') == 'animated-text') {
+        return false;
+      }
+      if ($(this).attr('id') == 'animated-text-duration') {
+        var obj = p_keyframes.find((x) => x.id == object.id);
+        var length = obj.end - obj.start;
+        if ($(this).find('input').val() * 1000 > length) {
+          $(this)
+            .find('input')
+            .val(length / 1000);
+        }
+        animatedtext
+          .find((x) => x.id == object.id)
+          .setProp(
+            { duration: $(this).find('input').val() * 1000 },
+            canvas
+          );
+        save();
+        return false;
+      }
+      if ($(this).attr('id') == 'object-volume') {
+        newKeyframe(
+          'volume',
+          canvas.getActiveObject(),
+          currenttime,
+          parseFloat($(this).find('input').val()) / 200,
+          true
+        );
+        canvas
+          .getActiveObject()
+          .set(
+            'volume',
+            parseFloat($(this).find('input').val()) / 200
+          );
+      }
+      editingpanel = true;
+      var selection = false;
+      const tempselection = canvas.getActiveObjects();
+      const id = $(this).attr('id');
+      updateInputs(id);
+      if (tempselection.length > 1) {
+        object = object.toGroup();
+        selection = true;
+      }
+      if (objects.find((x) => x.id == object.get('id'))) {
+        objects.find((x) => x.id == object.get('id')).mask =
+          $('#masks').val();
+        if ($('#masks').val() == 'none') {
+          object.clipPath = null;
+          canvas.renderAll();
+        } else {
+          object.clipPath = canvas.getItemById($('#masks').val());
+          canvas.renderAll();
+        }
+      }
+      object.set({
+        left:
+          parseFloat($('#object-x input').val()) +
+          artboard.get('left') +
+          (object.get('width') * object.get('scaleX')) / 2,
+        top:
+          parseFloat($('#object-y input').val()) +
+          artboard.get('top') +
+          (object.get('height') * object.get('scaleY')) / 2,
+        scaleX: parseFloat(
+          $('#object-w input').val() / object.get('width')
+        ),
+        scaleY: parseFloat(
+          $('#object-h input').val() / object.get('height')
+        ),
+        angle: parseFloat($('#object-r input').val()),
+        opacity: parseFloat($('#object-o input').val() / 100),
+        strokeWidth: parseFloat($('#object-stroke input').val()),
+      });
+      if (object.get('type') != 'group') {
+        object.set({
+          shadow: {
+            color: object.shadow.color,
+            offsetX: parseFloat($('#object-shadow-x input').val()),
+            offsetY: parseFloat($('#object-shadow-y input').val()),
+            opacity: 1,
+            blur: parseFloat($('#object-blur input').val()),
+          },
+        });
+      }
+      canvas.renderAll();
+      if (tempselection.length > 1) {
+        object.toActiveSelection();
+        object = canvas.getActiveObject();
+      }
+      canvas.discardActiveObject();
+      tempselection.forEach(function (obj) {
+        keyframeChanges(obj, type, id, selection);
+      });
+      if (object) {
+        reselect(object);
+        editingpanel = false;
+      }
+      $('#' + id + ' input').focus();
+      save();
+      if (type) {
+        updatePanelValues();
+      } else if ($(this).find('input').val().length > 0) {
+        updatePanelValues();
+      }
+    }
+  } else {
+    if (
+      $(this).attr('id') == 'canvas-w' ||
+      $(this).attr('id') == 'canvas-h'
+    ) {
+      artboard.set({
+        width: parseFloat($('#canvas-w input').val()),
+        height: parseFloat($('#canvas-h input').val()),
+      });
+      canvas.renderAll();
+      resizeCanvas();
+      if (activepreset != 'custom') {
+        if (
+          presets.find((x) => x.id == activepreset).width !=
+            $('#canvas-w input').val() ||
+          presets.find((x) => x.id == activepreset).height !=
+            $('#canvas-h input').val()
+        ) {
+          activepreset = 'custom';
+          updatePanel();
+        }
+      }
+    } else if ($(this).attr('id') == 'canvas-duration') {
+      if (!isNaN(parseFloat($(this).find('input').val()))) {
+        setDuration(parseFloat($(this).find('input').val()) * 1000);
+      }
+    }
+    if (!isNaN(parseFloat($('#canvas-color-opacity input').val()))) {
+      if ($('#canvas-color-opacity input').val() > 100) {
+        $('#canvas-color-opacity input').val(100);
+      } else if ($('#canvas-color-opacity input').val() < 0) {
+        $('#canvas-color-opacity input').val(0);
+      }
+      colormode = 'back';
+      o_fill.setColor(
+        'rgba(' +
+          o_fill.getColor().toRGBA()[0] +
+          ',' +
+          o_fill.getColor().toRGBA()[1] +
+          ',' +
+          o_fill.getColor().toRGBA()[2] +
+          ',' +
+          $('#canvas-color-opacity input').val() / 100 +
+          ')'
+      );
+    }
+  }
+}
+function setTextAnimation() {
+  var object = canvas.getActiveObject();
+  animatedtext
+    .find((x) => x.id == object.id)
+    .reset(
+      $(this).parent().find('input').val(),
+      animatedtext.find((x) => x.id == object.id).props,
+      canvas
+    );
+}
+
+$(document).on('input', '.property-input', updateObjectValues);
+$(document).on('change', '.property-input', updateObjectValues);
+$(document).on('change', '#masks', updateObjectValues);
+$(document).on('click', '#animatedset', setTextAnimation);
+
+// Toggle picker (maybe it could be condensed?)
+function togglePicker() {
+  const object = canvas.getActiveObject();
+  if (!o_fill.isOpen()) {
+    newcolorkeyframe = true;
+    if ($(this).attr('id') == 'object-color-fill') {
+      colormode = 'fill';
+      o_fill.setColor(object.get('fill'));
+    } else if ($(this).attr('id') == 'object-color-stroke') {
+      colormode = 'stroke';
+      o_fill.setColor(object.get('stroke'));
+    } else if ($(this).attr('id') == 'canvas-color') {
+      colormode = 'back';
+      o_fill.setColor(canvas.backgroundColor);
+    } else if ($(this).attr('id') == 'chroma-color') {
+      colormode = 'chroma';
+      if (object.filters.find((x) => x.type == 'RemoveColor')) {
+        o_fill.setColor(
+          object.filters.find((x) => x.type == 'RemoveColor').color
+        );
+      } else {
+        o_fill.setColor('#FFF');
+      }
+    } else if ($(this).attr('id') == 'text-color') {
+      colormode = 'text';
+      o_fill.setColor(
+        animatedtext.find((x) => x.id == object.id).props.fill
+      );
+    } else {
+      colormode = 'shadow';
+      o_fill.setColor(object.shadow.color);
+    }
+    newcolorkeyframe = false;
+    o_fill.show();
+  } else {
+    o_fill.hide();
+  }
+}
+$(document).on('click', '#canvas-color', togglePicker);
+$(document).on('click', '#object-color-fill', togglePicker);
+$(document).on('click', '#object-color-stroke', togglePicker);
+$(document).on('click', '#object-color-shadow', togglePicker);
+$(document).on('click', '#chroma-color', togglePicker);
+$(document).on('click', '#text-color', togglePicker);
+
+window.onLoadImage = function (temp) {
+  $(temp).css('background-image', 'none');
+};
+
+// Populate shape grid on left panel
+function populateGrid(type) {
+  if (type == 'shape-tool') {
+    $('#shapes-row').html('');
+    $('#emojis-row').html('');
+    shape_grid_items.forEach(function (item) {
+      $('#shapes-row').append(
+        "<div class='grid-item'><img onload='onLoadImage(this)' draggable=false src='" +
+          item +
+          "'></div>"
+      );
+    });
+    emoji_items.forEach(function (item) {
+      $('#emojis-row').append(
+        "<div class='grid-emoji-item'><img  onload='onLoadImage(this)' draggable=false src='" +
+          item +
+          "'></div>"
+      );
+    });
+  } else if (type == 'image-tool') {
+    $('#images-grid').html('');
+    image_categories.forEach(function (category) {
+      $('#categories').append(
+        "<div class='category' data-name='" +
+          category.name +
+          "'><img onload='onLoadImage(this)' src='" +
+          category.image +
+          "'>" +
+          category.name +
+          '</div>'
+      );
+    });
+  } else if (type == 'video-tool') {
+    $('#images-grid').html('');
+    video_categories.forEach(function (category) {
+      $('#categories').append(
+        "<div class='category' data-name='" +
+          category.name +
+          "'><img onload='onLoadImage(this)' src='" +
+          category.image +
+          "'>" +
+          category.name +
+          '</div>'
+      );
+    });
+  } else if (type == 'images-tab') {
+    $('#images-grid').html('');
+    var flag = false;
+    uploaded_images
+      .slice()
+      .reverse()
+      .forEach(function (item) {
+        if (!item.hidden) {
+          flag = true;
+          $('#images-grid').append(
+            "<div class='image-grid-item' data-src='" +
+              item.src +
+              "' data-type='" +
+              item.type +
+              "' data-key='" +
+              item.key +
+              "'><img class='delete-media' draggable=false src='assets/more-options.svg'><img draggable=false onload='onLoadImage(this)' class='image-thing' src='" +
+              item.thumb +
+              "'</div>"
+          );
+        }
+      });
+    $('#landing').remove();
+    if (!flag) {
+      $('#upload-tabs').after(
+        '<div id="landing" class="upload-landing"><div id="landing-text">Your uploaded images will show up here for easy access.</div></div>'
+      );
+    }
+  } else if (type == 'videos-tab') {
+    $('#images-grid').html('');
+    var flag = false;
+    uploaded_videos
+      .slice()
+      .reverse()
+      .forEach(function (item) {
+        if (!item.hidden) {
+          flag = true;
+          $('#images-grid').append(
+            "<div class='video-grid-item' data-src='" +
+              item.src +
+              "' data-type='" +
+              item.type +
+              "' data-key='" +
+              item.key +
+              "'><img class='delete-media' draggable=false src='assets/more-options.svg'><img draggable=false onload='onLoadImage(this)' class='image-thing' src='" +
+              item.thumb +
+              "'></div>"
+          );
+        }
+      });
+    $('#landing').remove();
+    if (!flag) {
+      $('#upload-tabs').after(
+        '<div id="landing" class="upload-landing"><div id="landing-text">Your uploaded videos will show up here for easy access.</div></div>'
+      );
+    }
+  } else if (type == 'audio-tool') {
+    var flag = false;
+    audio_items.forEach(function (item) {
+      if (item.src == background_key) {
+        flag = true;
+        $('#audio-list').append(
+          "<div class='audio-item audio-item-active' data-src='" +
+            item.src +
+            "'><div class='audio-preview'><img src='assets/play-button.svg'></div><img class='audio-thumb' src='" +
+            item.thumb +
+            "'><div class='audio-info'><div class='audio-info-title'>" +
+            item.name +
+            "</div><a href='" +
+            item.link +
+            "' target='_blank' class='audio-info-desc'>" +
+            item.desc +
+            "</a><div class='audio-info-duration'>" +
+            item.duration +
+            '</div></div></div></div>'
+        );
+      } else {
+        $('#audio-list').append(
+          "<div class='audio-item' data-src='" +
+            item.src +
+            "'><div class='audio-preview'><img src='assets/play-button.svg'></div><img class='audio-thumb' src='" +
+            item.thumb +
+            "'><div class='audio-info'><div class='audio-info-title'>" +
+            item.name +
+            "</div><a href='" +
+            item.link +
+            "' target='_blank' class='audio-info-desc'>" +
+            item.desc +
+            "</a><div class='audio-info-duration'>" +
+            item.duration +
+            '</div></div></div></div>'
+        );
+      }
+    });
+  } else if (type == 'text-tool') {
+    $('#shapes-cont').append("<p class='row-title'>Animated</p>");
+    $('#shapes-cont').append(
+      "<div class='animated-text-grid'></div>"
+    );
+    text_animation_list.forEach(function (text) {
+      $('.animated-text-grid').append(
+        "<div class='animated-text-item noselect' data-id='" +
+          text.name +
+          "'><img draggable='false' class='noselect' src='" +
+          text.src +
+          "'></div>"
+      );
+    });
+    $('#shapes-cont').append("<p class='row-title'>Sans Serif</p>");
+    text_items.sansserif.forEach(function (text) {
+      WebFont.load({
+        google: {
+          families: [text.fontname],
+        },
+      });
+      $('#shapes-cont').append(
+        "<div id='item-text' class='add-text noselect' data-font='" +
+          text.fontname +
+          "' style='font-family: " +
+          text.fontname +
+          ", sans-serif'>" +
+          text.name +
+          '</div>'
+      );
+    });
+    $('#shapes-cont').append("<p class='row-title'>Serif</p>");
+    text_items.serif.forEach(function (text) {
+      WebFont.load({
+        google: {
+          families: [text.fontname],
+        },
+      });
+      $('#shapes-cont').append(
+        "<div id='item-text' class='add-text noselect' data-font='" +
+          text.fontname +
+          "' style='font-family: " +
+          text.fontname +
+          "'>" +
+          text.name +
+          '</div>'
+      );
+    });
+    $('#shapes-cont').append("<p class='row-title'>Monospace</p>");
+    text_items.monospace.forEach(function (text) {
+      WebFont.load({
+        google: {
+          families: [text.fontname],
+        },
+      });
+      $('#shapes-cont').append(
+        "<div id='item-text' class='add-text noselect' data-font='" +
+          text.fontname +
+          "' style='font-family: " +
+          text.fontname +
+          "'>" +
+          text.name +
+          '</div>'
+      );
+    });
+    $('#shapes-cont').append("<p class='row-title'>Handwriting</p>");
+    text_items.handwriting.forEach(function (text) {
+      WebFont.load({
+        google: {
+          families: [text.fontname],
+        },
+      });
+      $('#shapes-cont').append(
+        "<div id='item-text' class='add-text noselect' data-font='" +
+          text.fontname +
+          "' style='font-family: " +
+          text.fontname +
+          "'>" +
+          text.name +
+          '</div>'
+      );
+    });
+    $('#shapes-cont').append("<p class='row-title'>Display</p>");
+    text_items.display.forEach(function (text) {
+      WebFont.load({
+        google: {
+          families: [text.fontname],
+        },
+      });
+      $('#shapes-cont').append(
+        "<div id='item-text' class='add-text noselect' data-font='" +
+          text.fontname +
+          "' style='font-family: " +
+          text.fontname +
+          "'>" +
+          text.name +
+          '</div>'
+      );
+    });
+  }
+}
+
+function scrollBottom() {
+  if (
+    $(this).scrollTop() + $(this).innerHeight() >=
+    $(this)[0].scrollHeight - 50
+  ) {
+    loadMoreMedia();
+  }
+  if ($(this).scrollTop() > 0) {
+    $('#search-fixed').addClass('search-scrolling');
+  } else {
+    $('.search-scrolling').removeClass('search-scrolling');
+  }
+}
+
+function addAnimatedText() {
+  var newtext = new AnimatedText('Your text', {
+    left: artboard.get('left') + artboard.get('width') / 2,
+    top: artboard.get('top') + artboard.get('height') / 2,
+    preset: $(this).attr('data-id'),
+    typeAnim: 'letter',
+    order: 'forward',
+    fontFamily: 'Syne',
+    duration: 1000,
+    easing: 'easeInQuad',
+    fill: '#FFFFFF',
+  });
+  animatedtext.push(newtext);
+  newtext.render(canvas);
+}
+
+$(document).on('click', '.animated-text-item', addAnimatedText);
+
+// Switch active panel in the library
+function updateBrowser(type) {
+  $('#browser').scrollTop(0);
+  if (type == 'image-tool') {
+    $('#browser-container').html(image_browser);
+    populateGrid(type);
+    $('#browser').on('scroll', scrollBottom);
+  } else if (type == 'shape-tool') {
+    $('#browser-container').html(shape_browser);
+    populateGrid(type);
+    $('#browser').on('scroll', scrollBottom);
+  } else if (type == 'video-tool') {
+    $('#browser-container').html(video_browser);
+    populateGrid(type);
+    $('#browser').on('scroll', scrollBottom);
+  } else if (type == 'text-tool') {
+    $('#browser-container').html(text_browser);
+    populateGrid(type);
+    $('#browser').on('scroll', scrollBottom);
+  } else if (type == 'upload-tool') {
+    $('#browser-container').html(upload_browser);
+    populateGrid('images-tab');
+    $('#browser').on('scroll', scrollBottom);
+  } else if (type == 'audio-tool') {
+    $('#browser-container').html(audio_browser);
+    populateGrid(type);
+    $('#browser').on('scroll', scrollBottom);
+  }
+}
+
+// Switch tab in the uploads depending on item being uploaded
+function updateUploadType() {
+  $('.upload-tab-active').removeClass('upload-tab-active');
+  $(this).addClass('upload-tab-active');
+  populateGrid($(this).attr('id'));
+}
+$(document).on(
+  'click',
+  '.upload-tab:not(.upload-tab-active)',
+  updateUploadType
+);
+
+// Switch tool
+function switchTool(e) {
+  $('#browser').removeClass('collapsed');
+  $('#canvas-area').removeClass('canvas-full');
+  if ($(this).attr('id') == 'more-tool') {
+    showMore();
+    return false;
+  }
+  resizeCanvas();
+  var act = $('.tool-active');
+  if (act.attr('id') == 'image-tool') {
+    act.find('img').attr('src', 'assets/image.svg');
+  } else if (act.attr('id') == 'text-tool') {
+    act.find('img').attr('src', 'assets/text.svg');
+  } else if (act.attr('id') == 'mockup-tool') {
+    act.find('img').attr('src', 'assets/mockup.svg');
+  } else if (act.attr('id') == 'video-tool') {
+    act.find('img').attr('src', 'assets/video.svg');
+  } else if (act.attr('id') == 'shape-tool') {
+    act.find('img').attr('src', 'assets/shape.svg');
+  } else if (act.attr('id') == 'upload-tool') {
+    act.find('img').attr('src', 'assets/uploads.svg');
+  } else if (act.attr('id') == 'audio-tool') {
+    act.find('img').attr('src', 'assets/audio.svg');
+  }
+  $('.tool-active').removeClass('tool-active');
+  $(this).addClass('tool-active');
+  if ($(this).attr('id') == 'image-tool') {
+    $(this).find('img').attr('src', 'assets/image-active.svg');
+  } else if ($(this).attr('id') == 'text-tool') {
+    $(this).find('img').attr('src', 'assets/text-active.svg');
+  } else if ($(this).attr('id') == 'mockup-tool') {
+    $(this).find('img').attr('src', 'assets/mockup-active.svg');
+  } else if ($(this).attr('id') == 'video-tool') {
+    $(this).find('img').attr('src', 'assets/video-active.svg');
+  } else if ($(this).attr('id') == 'shape-tool') {
+    $(this).find('img').attr('src', 'assets/shape-active.svg');
+  } else if ($(this).attr('id') == 'upload-tool') {
+    $(this).find('img').attr('src', 'assets/uploads-active.svg');
+  } else if ($(this).attr('id') == 'audio-tool') {
+    $(this).find('img').attr('src', 'assets/audio-active.svg');
+  }
+  updateBrowser($(this).attr('id'));
+  resetHeight();
+}
+$(document).on('click', '.tool:not(.tool-active)', switchTool);
+
+// Replace image or video by dragging on top and holding a key
+function replaceObject(src, object) {
+  var img = new Image();
+  var width = object.width;
+  var height = object.height;
+  oldsrc = object._originalElement.currentSrc;
+  oldobj = object;
+  img.onload = function () {
+    object.setElement(img);
+    object.set('width', width);
+    object.set('height', height);
+    canvas.renderAll();
+  };
+  img.src = src;
+}
+
+// Drag object from the panel
+function dragObject(e) {
+  if (e.which == 3) {
+    return false;
+  }
+  var drag = $(this).clone();
+  drag.css({
+    background: 'transparent',
+    boxShadow: 'none',
+    color: '#000',
+  });
+  drag.appendTo('body');
+  drag.css({
+    position: 'absolute',
+    zIndex: 9999999,
+    left: $(this).offset().left,
+    top: $(this).offset().top,
+    width: canvas.getZoom() * drag.width(),
+    pointerEvents: 'none',
+    opacity: 0,
+  });
+  var pageX = e.pageX;
+  var pageY = e.pageY;
+  var offset = drag.offset();
+  var offsetx = drag.offset().left + drag.width() / 2 - e.pageX;
+  var offsety = drag.offset().top + drag.height() / 2 - e.pageY;
+  var replacing = false;
+  draggingPanel = true;
+  var move = false;
+  canvas.discardActiveObject();
+  canvas.renderAll();
+  function dragging(e) {
+    $('#bottom-area').addClass('noselect');
+    $('#toolbar').addClass('noselect');
+    $('#browser').addClass('noselect');
+    $('#properties').addClass('noselect');
+    $('#controls').addClass('noselect');
+    move = true;
+    var left = offset.left + (e.pageX - pageX);
+    var top = offset.top + (e.pageY - pageY);
+    drag.offset({ left: left, top: top });
+
+    if (
+      overCanvas &&
+      canvas.getActiveObject() &&
+      !replacing &&
+      canvas.getActiveObject().type == 'image' &&
+      (drag.hasClass('image-grid-item') ||
+        drag.hasClass('video-grid-item'))
+    ) {
+      if (e.ctrlKey) {
+        drag.css('visibility', 'hidden');
+        replaceObject(
+          drag.attr('data-src'),
+          canvas.getActiveObject()
+        );
+        replacing = true;
+      } else {
+        $('#replace-image').addClass('replace-active');
+      }
+    } else if (
+      (replacing && !canvas.getActiveObject()) ||
+      (replacing && !e.ctrlKey)
+    ) {
+      drag.css('visibility', 'visible');
+      replaceObject(oldsrc, oldobj);
+      replacing = false;
+      canvas.discardActiveObject();
+      $('#replace-image').removeClass('replace-active');
+    } else {
+      $('#replace-image').removeClass('replace-active');
+    }
+
+    if (overCanvas) {
+      drag.css({ opacity: 1 });
+    } else {
+      drag.css({ opacity: 0.5 });
+    }
+  }
+  function released(e) {
+    $('#replace-image').removeClass('replace-active');
+    $('#bottom-area').removeClass('noselect');
+    $('#toolbar').removeClass('noselect');
+    $('#browser').removeClass('noselect');
+    $('#properties').removeClass('noselect');
+    $('#controls').removeClass('noselect');
+    draggingPanel = false;
+    $('body').off('mousemove', dragging).off('mouseup', released);
+    canvasx = canvas.getPointer(e).x;
+    canvasy = canvas.getPointer(e).y;
+    var xpos = canvasx + offsetx - artboard.get('left');
+    var ypos = canvasy + offsety - artboard.get('top');
+    if (!overCanvas && move) {
+      drag.remove();
+      return false;
+    }
+    if (move && !replacing) {
+      if (drag.hasClass('grid-item')) {
+        newSVG(
+          drag.find('img').attr('src'),
+          xpos,
+          ypos,
+          drag.width(),
+          false
+        );
+      } else if (drag.hasClass('image-external-grid-item')) {
+        $('#load-image').addClass('loading-active');
+        savePixabayImage(
+          drag.attr('data-src'),
+          xpos,
+          ypos,
+          drag.width()
+        );
+      } else if (drag.hasClass('video-external-grid-item')) {
+        savePixabayVideo(
+          drag.attr('data-src'),
+          drag.find('img').attr('src'),
+          xpos,
+          ypos
+        );
+      } else if (drag.hasClass('image-grid-item')) {
+        $('#load-image').addClass('loading-active');
+        loadImage(
+          drag.attr('data-src'),
+          xpos,
+          ypos,
+          drag.width(),
+          false
+        );
+      } else if (drag.hasClass('grid-emoji-item')) {
+        $('#load-image').addClass('loading-active');
+        loadImage(
+          drag.find('img').attr('src'),
+          xpos,
+          ypos,
+          drag.width(),
+          false
+        );
+      } else if (drag.hasClass('add-text')) {
+        if (drag.attr('id') == 'heading-text') {
+          newTextbox(
+            50,
+            700,
+            'Add a heading',
+            canvasx - artboard.get('left'),
+            canvasy - artboard.get('top'),
+            drag.width(),
+            false,
+            drag.attr('data-font')
+          );
+        } else if (drag.attr('id') == 'subheading-text') {
+          newTextbox(
+            22,
+            500,
+            'Add a subheading',
+            canvasx - artboard.get('left'),
+            canvasy - artboard.get('top'),
+            drag.width(),
+            false,
+            drag.attr('data-font')
+          );
+        } else if (drag.attr('id') == 'body-text') {
+          newTextbox(
+            18,
+            400,
+            'Add body text',
+            canvasx - artboard.get('left'),
+            canvasy - artboard.get('top'),
+            drag.width(),
+            false,
+            drag.attr('data-font')
+          );
+        } else {
+          newTextbox(
+            18,
+            400,
+            'Your text',
+            canvasx - artboard.get('left'),
+            canvasy - artboard.get('top'),
+            drag.width(),
+            false,
+            drag.attr('data-font')
+          );
+        }
+      } else if (drag.hasClass('video-grid-item')) {
+        $('#load-video').addClass('loading-active');
+        loadVideo(drag.attr('data-src'), canvasx, canvasy);
+      }
+    } else if (!move && !replacing) {
+      if (drag.hasClass('grid-item')) {
+        newSVG(
+          drag.find('img').attr('src'),
+          artboard.get('left') + artboard.get('width') / 2,
+          artboard.get('top') + artboard.get('height') / 2,
+          100,
+          true
+        );
+      } else if (drag.hasClass('image-external-grid-item')) {
+        savePixabayImage(
+          drag.attr('data-src'),
+          artboard.get('left') + artboard.get('width') / 2,
+          artboard.get('top') + artboard.get('height') / 2,
+          150
+        );
+      } else if (drag.hasClass('video-external-grid-item')) {
+        savePixabayVideo(
+          drag.attr('data-src'),
+          drag.find('img').attr('src'),
+          artboard.get('left') + artboard.get('width') / 2,
+          artboard.get('top') + artboard.get('height') / 2
+        );
+      } else if (drag.hasClass('image-grid-item')) {
+        $('#load-image').addClass('loading-active');
+        loadImage(
+          drag.attr('data-src'),
+          artboard.get('left') + artboard.get('width') / 2,
+          artboard.get('top') + artboard.get('height') / 2,
+          150,
+          true
+        );
+      } else if (drag.hasClass('grid-emoji-item')) {
+        $('#load-image').addClass('loading-active');
+        loadImage(
+          drag.find('img').attr('src'),
+          artboard.get('left') + artboard.get('width') / 2,
+          artboard.get('top') + artboard.get('height') / 2,
+          50,
+          true
+        );
+      } else if (drag.hasClass('add-text')) {
+        if (drag.attr('id') == 'heading-text') {
+          newTextbox(
+            50,
+            700,
+            'Add a heading',
+            artboard.get('left') + artboard.get('width') / 2,
+            artboard.get('top') + artboard.get('height') / 2,
+            drag.width(),
+            true,
+            drag.attr('data-font')
+          );
+        } else if (drag.attr('id') == 'subheading-text') {
+          newTextbox(
+            22,
+            500,
+            'Add a subheading',
+            artboard.get('left') + artboard.get('width') / 2,
+            artboard.get('top') + artboard.get('height') / 2,
+            drag.width(),
+            true,
+            drag.attr('data-font')
+          );
+        } else if (drag.attr('id') == 'body-text') {
+          newTextbox(
+            18,
+            400,
+            'Add body text',
+            artboard.get('left') + artboard.get('width') / 2,
+            artboard.get('top') + artboard.get('height') / 2,
+            drag.width(),
+            true,
+            drag.attr('data-font')
+          );
+        } else {
+          newTextbox(
+            18,
+            400,
+            'Your text',
+            artboard.get('left') + artboard.get('width') / 2,
+            artboard.get('top') + artboard.get('height') / 2,
+            drag.width(),
+            true,
+            drag.attr('data-font')
+          );
+        }
+      } else if (drag.hasClass('video-grid-item')) {
+        $('#load-video').addClass('loading-active');
+        loadVideo(
+          drag.attr('data-src'),
+          artboard.get('left') + artboard.get('width') / 2,
+          artboard.get('top') + artboard.get('height') / 2,
+          true
+        );
+      }
+    }
+    drag.remove();
+  }
+  $('body').on('mouseup', released).on('mousemove', dragging);
+}
+$(document).on('mousedown', '.image-grid-item', dragObject);
+$(document).on('mousedown', '.video-grid-item', dragObject);
+$(document).on('mousedown', '.grid-item', dragObject);
+$(document).on('mousedown', '.grid-emoji-item', dragObject);
+$(document).on('mousedown', '.add-text', dragObject);
+$(document).on('mousedown click mouseup', '.credit', function (e) {
+  e.stopPropagation();
+});
+
+// Collapse library
+function collapsePanel() {
+  $('#browser').addClass('collapsed');
+  $('#behind-browser').addClass('collapsed');
+  $('#canvas-area').addClass('canvas-full');
+  var act = $('.tool-active');
+  if (act.attr('id') == 'image-tool') {
+    act.find('img').attr('src', 'assets/image.svg');
+  } else if (act.attr('id') == 'text-tool') {
+    act.find('img').attr('src', 'assets/text.svg');
+  } else if (act.attr('id') == 'mockup-tool') {
+    act.find('img').attr('src', 'assets/mockup.svg');
+  } else if (act.attr('id') == 'video-tool') {
+    act.find('img').attr('src', 'assets/video.svg');
+  } else if (act.attr('id') == 'shape-tool') {
+    act.find('img').attr('src', 'assets/shape.svg');
+  } else if (act.attr('id') == 'upload-tool') {
+    act.find('img').attr('src', 'assets/uploads.svg');
+  }
+  $('.tool-active').removeClass('tool-active');
+  resizeCanvas();
+}
+$(document).on('click', '#collapse', collapsePanel);
+$(document).on('click', '.tool-active', collapsePanel);
+
+// Change canvas dimensions to selected preset
+function setPreset() {
+  if ($(this).val() != 'custom') {
+    artboard.set({
+      width: presets.find((x) => x.id == $(this).val()).width,
+      height: presets.find((x) => x.id == $(this).val()).height,
+    });
+    canvas.renderAll();
+    resizeCanvas();
+  }
+  activepreset = $(this).val();
+  updatePanel();
+  save();
+}
+$(document).on('change', '#preset', setPreset);
+
+function setTextPreset() {
+  var object = canvas.getActiveObject();
+  animatedtext
+    .find((x) => x.id == object.id)
+    .setProp({ preset: $(this).val() }, canvas);
+  save();
+}
+function setTextEasing() {
+  var object = canvas.getActiveObject();
+  animatedtext
+    .find((x) => x.id == object.id)
+    .setProp({ easing: $(this).val() }, canvas);
+  save();
+}
+$(document).on('change', '#preset-picker', setTextPreset);
+$(document).on('change', '#easing-picker', setTextEasing);
+
+// Delete media from the panel
+function deleteMedia(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  var key = $(this).parent().attr('data-key');
+  if (
+    window.confirm(
+      'Are you sure you want to permanently delete this asset? It will also remove any instances of it in the canvas.'
+    )
+  ) {
+    deleteAsset(key);
+  }
+}
+$(document).on('mousedown', '.delete-media', deleteMedia);
+
+// Save layer name
+function saveLayerName() {
+  $('.name-active').prop('readonly', true);
+  if ($('.name-active').val() == '') {
+    $('.name-active').val('Untitled layer');
+  }
+  objects.find(
+    (x) =>
+      x.id == $('.name-active').parent().parent().attr('data-object')
+  ).label = $('.name-active').val();
+  save();
+  $('.name-active').removeClass('name-active');
+  if (window.getSelection) {
+    if (window.getSelection().empty) {
+      window.getSelection().empty();
+    } else if (window.getSelection().removeAllRanges) {
+      window.getSelection().removeAllRanges();
+    }
+  } else if (document.selection) {
+    document.selection.empty();
+  }
+  editinglayer = false;
+}
+$(document).on('focusout', '.layer-custom-name', saveLayerName);
+
+// Zoom to specific level
+function zoomTo() {
+  var zoom;
+  if ($(this).attr('data-zoom') == 'in') {
+    zoom = canvas.getZoom() + 0.2;
+  } else if ($(this).attr('data-zoom') == 'out') {
+    zoom = canvas.getZoom() - 0.2;
+  } else {
+    zoom = parseInt($(this).attr('data-zoom')) / 100;
+  }
+  if (zoom > 20) zoom = 20;
+  if (zoom < 0.01) zoom = 0.01;
+  canvas.setZoom(1);
+  canvas.renderAll();
+  var vpw = canvas.width / zoom;
+  var vph = canvas.height / zoom;
+  var x = artboard.left + artboard.width / 2 - vpw / 2;
+  var y = artboard.top + artboard.height / 2 - vph / 2;
+  canvas.absolutePan({ x: x, y: y });
+  canvas.setZoom(zoom);
+  canvas.renderAll();
+  $('#zoom-level span').html(
+    (canvas.getZoom() * 100).toFixed(0) + '%'
+  );
+}
+$(document).on('click', '.zoom-options-item', zoomTo);
+
+// Add background audio (temporary)
+function addBackgroundAudio() {
+  background_audio = new Audio('assets/audio.wav');
+}
+
+// Hide all modals
+function hideModals() {
+  $('.modal-open').removeClass('modal-open');
+}
+$('#background-overlay').on('click', hideModals);
+
+// Open download modal
+function downloadModal() {
+  if (!recording) {
+    hideModals();
+    $('#download-modal').addClass('modal-open');
+    $('#background-overlay').addClass('modal-open');
+  }
+}
+$('#download').on('click', downloadModal);
+
+// Open import/export modal
+function importExportModal() {
+  hideModals();
+  $('#import-export-modal').toggleClass('modal-open');
+  $('#background-overlay').toggleClass('modal-open');
+}
+$('#share').on('click', importExportModal);
+
+function searchInput() {
+  var value = $(this).val().toLowerCase();
+  if (value == '') {
+    $('#delete-search').removeClass('show-delete');
+  } else {
+    $('#delete-search').addClass('show-delete');
+  }
+}
+
+function fancyTimeFormat(duration) {
+  var hrs = ~~(duration / 3600);
+  var mins = ~~((duration % 3600) / 60);
+  var secs = ~~duration % 60;
+  var ret = '';
+  if (hrs > 0) {
+    ret += '' + hrs + ':' + (mins < 10 ? '0' : '');
+  }
+  ret += '' + mins + ':' + (secs < 10 ? '0' : '');
+  ret += '' + secs;
+  return ret;
+}
+
+function loadMoreMedia() {
+  var value = $('#browser-search input').val();
+  if (value != '' && page != false) {
+    page += 1;
+    if ($('#image-tool').hasClass('tool-active')) {
+      var URL =
+        'https://pixabay.com/api/?key=' +
+        API_KEY +
+        '&q=' +
+        encodeURIComponent(value) +
+        '&page=' +
+        page;
+      $.getJSON(URL, function (data) {
+        if (parseInt(data.totalHits) > 0) {
+          $.each(data.hits, function (i, hit) {
+            $('#images-grid').append(
+              "<div class='image-grid-item image-external-grid-item' data-src='" +
+                hit.webformatURL +
+                "'><a class='credit' href='" +
+                hit.pageURL +
+                "' target='_blank'>" +
+                hit.user +
+                "</a><img draggable=false onload='onLoadImage(this)' src='" +
+                hit.webformatURL +
+                "'</div>"
+            );
+          });
+        } else {
+          page = false;
+        }
+      });
+    } else if ($('#video-tool').hasClass('tool-active')) {
+      var URL =
+        'https://pixabay.com/api/videos/?key=' +
+        API_KEY +
+        '&q=' +
+        encodeURIComponent(value) +
+        '&page=' +
+        page;
+      $.getJSON(URL, function (data) {
+        if (parseInt(data.totalHits) > 0) {
+          $.each(data.hits, function (i, hit) {
+            var video = hit.videos.medium.url;
+            $('#images-grid').append(
+              "<div class='image-grid-item video-external-grid-item' data-src='" +
+                video +
+                "'><a class='credit' href='" +
+                hit.pageURL +
+                "' target='_blank'>" +
+                hit.user +
+                "</a><div id='time-video'>" +
+                fancyTimeFormat(hit.duration) +
+                "</div><img draggable=false onload='onLoadImage(this)' src='assets/transparent.png'</div>"
+            );
+            createVideoThumbnail(video, 250, 0, true).then(function (
+              data
+            ) {
+              $(".image-grid-item[data-src='" + video + "']")
+                .find('img')
+                .attr('src', data);
+            });
+          });
+        } else {
+          page = false;
+        }
+      });
+    }
+  }
+}
+
+function search() {
+  page = 1;
+  var value = $('#browser-search input').val();
+  if ($('#image-tool').hasClass('tool-active')) {
+    var URL =
+      'https://pixabay.com/api/?key=' +
+      API_KEY +
+      '&q=' +
+      encodeURIComponent(value) +
+      '&page=' +
+      page;
+    $('#images-grid').html('');
+    if (value != '') {
+      $('#pixabay').addClass('hide-pixabay');
+      $('#landing').addClass('hide-landing');
+      $.getJSON(URL, function (data) {
+        if (parseInt(data.totalHits) > 0) {
+          $.each(data.hits, function (i, hit) {
+            $('#images-grid').append(
+              "<div class='image-grid-item image-external-grid-item' data-src='" +
+                hit.webformatURL +
+                "'><a class='credit' href='" +
+                hit.pageURL +
+                "' target='_blank'>" +
+                hit.user +
+                "</a><img draggable=false onload='onLoadImage(this)' src='" +
+                hit.webformatURL +
+                "'</div>"
+            );
+          });
+        } else {
+          $('#shapes-cont').html(
+            "<div id='no-results'>Sorry, we couldn't find any results for &#x22;" +
+              encodeURIComponent(value) +
+              '&#x22;. Please try a different query.</div>'
+          );
+        }
+      });
+    } else {
+      $('#pixabay').removeClass('hide-pixabay');
+      $('#landing').removeClass('hide-landing');
+    }
+  } else if ($('#video-tool').hasClass('tool-active')) {
+    var URL =
+      'https://pixabay.com/api/videos/?key=' +
+      API_KEY +
+      '&q=' +
+      encodeURIComponent(value);
+    $('#images-grid').html('');
+    if (value != '') {
+      $('#landing').addClass('hide-landing');
+      $('#pixabay').addClass('hide-pixabay');
+      $.getJSON(URL, function (data) {
+        if (parseInt(data.totalHits) > 0) {
+          $.each(data.hits, function (i, hit) {
+            var video = hit.videos.medium.url;
+            $('#images-grid').append(
+              "<div class='image-grid-item video-external-grid-item' data-src='" +
+                video +
+                "'><a class='credit' href='" +
+                hit.pageURL +
+                "' target='_blank'>" +
+                hit.user +
+                "</a><div id='time-video'>" +
+                fancyTimeFormat(hit.duration) +
+                "</div><img draggable=false onload='onLoadImage(this)' src='assets/transparent.png'</div>"
+            );
+            //createVideoThumbnail(video, 250, 0, true).then(function(data){
+            $(".image-grid-item[data-src='" + video + "']")
+              .find('img')
+              .attr(
+                'src',
+                'https://i.vimeocdn.com/video/' +
+                  hit.picture_id +
+                  '_640x360.jpg'
+              );
+            //});
+          });
+        } else {
+          $('#shapes-cont').html(
+            "<div id='no-results'>Sorry, we couldn't find any results for &#x22;" +
+              encodeURIComponent(value) +
+              '&#x22;. Please try a different query.</div>'
+          );
+        }
+      });
+    } else {
+      $('#pixabay').removeClass('hide-pixabay');
+      $('#landing').removeClass('hide-landing');
+    }
+  } else if ($('#shape-tool').hasClass('tool-active')) {
+    if (value == '') {
+      $('#shapes-cont').html(
+        '<p class="row-title">Shapes</p><div class="gallery-row" id="shapes-row"></div><p class="row-title">Emojis</p><div class="gallery-row" id="emojis-row"></div>'
+      );
+      populateGrid('shape-tool');
+    } else {
+      $('.row-title').remove();
+      $('.gallery-row').remove();
+      $('#shapes-cont').html("<div class='gallery-row'></div>");
+      var combined = shape_grid_items.concat(emoji_items);
+      var flag = false;
+      combined.forEach(function (item) {
+        if (item.indexOf(value) > -1) {
+          flag = true;
+          if (item.indexOf('emoji') > -1) {
+            $('.gallery-row').append(
+              "<div class='grid-emoji-item'><img draggable=false src='" +
+                item +
+                "'></div>"
+            );
+          } else {
+            $('.gallery-row').append(
+              "<div class='grid-item'><img draggable=false src='" +
+                item +
+                "'></div>"
+            );
+          }
+        }
+      });
+      if (!flag) {
+        $('#shapes-cont').html(
+          "<div id='no-results'>Sorry, we couldn't find any results for &#x22;" +
+            encodeURIComponent(value) +
+            '&#x22;. Please try a different query.</div>'
+        );
+      }
+    }
+  } else if ($('#text-tool').hasClass('tool-active')) {
+    if (value == '') {
+      $('#browser-container').html(text_browser);
+      populateGrid('text-tool');
+    } else {
+      $('#shapes-cont').html('');
+      $('.row-title').remove();
+      var flag = false;
+      fonts.forEach(function (font) {
+        if (font.toLowerCase().indexOf(value) > -1) {
+          flag = true;
+          WebFont.load({
+            google: {
+              families: [font],
+            },
+          });
+          $('#shapes-cont').append(
+            "<div id='item-text' class='add-text noselect' data-font='" +
+              font +
+              "' style='font-family: " +
+              font +
+              "'>" +
+              font +
+              '</div>'
+          );
+        }
+      });
+      if (!flag) {
+        $('#shapes-cont').html(
+          "<div id='no-results'>Sorry, we couldn't find any results for &#x22;" +
+            encodeURIComponent(value) +
+            '&#x22;. Please try a different query.</div>'
+        );
+      }
+    }
+  }
+}
+
+function searchCategory() {
+  $('#browser-search input').val($(this).attr('data-name'));
+  $('#delete-search').addClass('show-delete');
+  search();
+  $('#pixabay').addClass('hide-pixabay');
+}
+
+function deleteSearch() {
+  $('#browser-search input').val('');
+  $('#delete-search').removeClass('show-delete');
+  if ($('#shape-tool').hasClass('tool-active')) {
+    $('#shapes-cont').html(
+      '<p class="row-title">Shapes</p><div class="gallery-row" id="shapes-row"></div><p class="row-title">Emojis</p><div class="gallery-row" id="emojis-row"></div>'
+    );
+    populateGrid('shape-tool');
+  } else if ($('#image-tool').hasClass('tool-active')) {
+    $('#images-grid').html('');
+    $('#landing').removeClass('hide-landing');
+    $('#pixabay').removeClass('hide-pixabay');
+  } else if ($('#video-tool').hasClass('tool-active')) {
+    $('#images-grid').html('');
+    $('#landing').removeClass('hide-landing');
+    $('#pixabay').removeClass('hide-pixabay');
+  } else if ($('#text-tool').hasClass('tool-active')) {
+    $('#browser-container').html(text_browser);
+    populateGrid('text-tool');
+  }
+}
+$(document).on('click', '#delete-search', deleteSearch);
+$(document).on('input', '#browser-search input', searchInput);
+$(document).on('click', '#search-button', search);
+$(document).on('click', '.category', searchCategory);
+
+function replaceAudioBackground() {
+  var src = $(this).attr('data-src');
+  newAudioLayer(src);
+  /*
+	if ($(this).hasClass("audio-item-active")) {
+		background_audio = false;
+		background_key = false;
+		$(this).removeClass("audio-item-active");
+		save();
+	} else {
+		var src = $(this).attr("data-src");
+		if (background_audio != false) {
+			$("#audio-upload-button").removeClass("remove-audio");
+			$("#audio-upload-button").html('<img src="assets/upload.svg"> Upload audio');
+		}
+		db.collection("projects").doc({id: 1}).update({
+			audiosrc: src,
+		});
+		background_audio = new Audio(src);
+		background_audio.crossOrigin = "anonymous";
+		background_key = src;
+		save();
+		$(this).addClass("audio-item-active");
+	}		
+	*/
+}
+$(document).on('click', '.audio-item', replaceAudioBackground);
+
+function previewAudioBackground(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  var src = $(this).parent().attr('data-src');
+  if ($(this).find('img').attr('src') == 'assets/play-button.svg') {
+    temp_audio = new Audio(src);
+    temp_audio.crossOrigin = 'anonymous';
+    temp_audio.currentTime = 0;
+    temp_audio.play();
+    $(this).find('img').attr('src', 'assets/pause-button.svg');
+  } else {
+    if (temp_audio != false) {
+      temp_audio.pause();
+    }
+    $(this).find('img').attr('src', 'assets/play-button.svg');
+  }
+}
+$(document).on('click', '.audio-preview', previewAudioBackground);
+
+/* Filters options */
+function checkFilter() {
+  resetFilters();
+  if (canvas.getActiveObject()) {
+    var obj = canvas.getActiveObject();
+    if (
+      canvas.getActiveObjects().length == 1 &&
+      (obj.type == 'image' || obj.type == 'video')
+    ) {
+      var value = 'none';
+      if (obj.filters.length > 0) {
+        obj.filters.forEach(function (filter) {
+          if (
+            filter.type == 'BlackWhite' ||
+            filter.type == 'Invert' ||
+            filter.type == 'Sepia' ||
+            filter.type == 'Kodachrome' ||
+            filter.type == 'Polaroid' ||
+            filter.type == 'Technicolor' ||
+            filter.type == 'Brownie' ||
+            filter.type == 'Vintage'
+          ) {
+            value = filter.type;
+          } else if (filter.type == 'Brightness') {
+            sliders
+              .find((x) => x.name == 'filter-brightness')
+              .slider.setValue(filter.brightness * 100);
+          } else if (filter.type == 'Contrast') {
+            sliders
+              .find((x) => x.name == 'filter-contrast')
+              .slider.setValue(filter.contrast * 100);
+          } else if (filter.type == 'Vibrance') {
+            sliders
+              .find((x) => x.name == 'filter-vibrance')
+              .slider.setValue(filter.vibrance * 100);
+          } else if (filter.type == 'Saturation') {
+            sliders
+              .find((x) => x.name == 'filter-saturation')
+              .slider.setValue(filter.saturation * 100);
+          } else if (filter.type == 'HueRotation') {
+            sliders
+              .find((x) => x.name == 'filter-hue')
+              .slider.setValue(filter.rotation * 100);
+          } else if (filter.type == 'Blur') {
+            blurslider.setValue(filter.blur * 100);
+          } else if (filter.type == 'Noise') {
+            noiseslider.setValue(filter.noise);
+          }
+          $('#filters-list').val(value);
+          $('#filters-list').niceSelect('update');
+        });
+      } else {
+        $('#filters-list').val(value);
+        $('#filters-list').niceSelect('update');
+      }
+    }
+  }
+}
+function clearFilters() {
+  if (canvas.getActiveObject()) {
+    var obj = canvas.getActiveObject();
+    obj.filters = $.grep(obj.filters, function (i) {
+      return (
+        i.type != 'BlackWhite' &&
+        i.type != 'Invert' &&
+        i.type != 'Sepia' &&
+        i.type != 'Kodachrome' &&
+        i.type != 'Polaroid' &&
+        i.type != 'Technicolor' &&
+        i.type != 'Brownie' &&
+        i.type != 'Vintage'
+      );
+    });
+    canvas.renderAll();
+  }
+}
+function applyFilter(name) {
+  if (canvas.getActiveObject()) {
+    var obj = canvas.getActiveObject();
+    if (name == 'Sepia') {
+      obj.filters.push(new f.Sepia());
+    } else if (name == 'Invert') {
+      obj.filters.push(new f.Invert());
+    } else if (name == 'BlackWhite') {
+      obj.filters.push(new f.BlackWhite());
+    } else if (name == 'Kodachrome') {
+      obj.filters.push(new f.Kodachrome());
+    } else if (name == 'Polaroid') {
+      obj.filters.push(new f.Polaroid());
+    } else if (name == 'Technicolor') {
+      obj.filters.push(new f.Technicolor());
+    } else if (name == 'Vintage') {
+      obj.filters.push(new f.Vintage());
+    } else if (name == 'Brownie') {
+      obj.filters.push(new f.Brownie());
+    }
+    obj.applyFilters();
+    canvas.renderAll();
+    save();
+  }
+}
+function updateMediaFilters() {
+  var value = $(this).val();
+  if (canvas.getActiveObject()) {
+    clearFilters();
+    applyFilter(value);
+  }
+}
+$(document).on('change', '#filters select', updateMediaFilters);
+
+function resetFilters() {
+  if (canvas.getActiveObject()) {
+    var object = canvas.getActiveObject();
+    if (object.filters) {
+      if (!object.filters.find((x) => x.type == 'Blur')) {
+        blurslider.setValue(0);
+      }
+      if (!object.filters.find((x) => x.type == 'Noise')) {
+        noiseslider.setValue(0);
+      }
+      if (object.filters.length > 0) {
+        sliders.forEach(function (slider) {
+          var name = '';
+          if (slider.name == 'filter-hue') {
+            name = 'HueRotation';
+          } else if (slider.name == 'filter-brightness') {
+            name = 'Brightness';
+          } else if (slider.name == 'filter-vibrance') {
+            name = 'Vibrance';
+          } else if (slider.name == 'filter-contrast') {
+            name = 'Contrast';
+          } else if (slider.name == 'filter-saturation') {
+            name = 'Saturation';
+          }
+          if (!object.filters.find((x) => x.type == name)) {
+            slider.slider.setValue(0);
+          }
+        });
+      } else {
+        sliders.forEach(function (slider) {
+          slider.slider.setValue(0);
+        });
+      }
+    } else {
+      sliders.forEach(function (slider) {
+        slider.slider.setValue(0);
+      });
+    }
+  }
+}
+function removeFilters() {
+  sliders.forEach(function (slider) {
+    slider.slider.setValue(0);
+  });
+}
+$(document).on('click', '#reset-filters', removeFilters);
+
+function updateChromaValues() {
+  if (canvas.getActiveObject()) {
+    var obj = canvas.getActiveObject();
+    if ($('.status-active').attr('id') == 'status-on') {
+      if (obj.filters.find((x) => x.type == 'RemoveColor')) {
+        obj.filters.find((x) => x.type == 'RemoveColor').distance =
+          chromaslider.getValue() / 100;
+        obj.filters.find((x) => x.type == 'RemoveColor').color = $(
+          '#chroma-color input'
+        ).val();
+      } else {
+        obj.filters.push(
+          new f.RemoveColor({
+            distance: chromaslider.getValue() / 100,
+            color: $('#chroma-color input').val(),
+          })
+        );
+      }
+      obj.applyFilters();
+      canvas.renderAll();
+      save();
+    } else {
+      if (obj.filters.find((x) => x.type == 'RemoveColor')) {
+        obj.filters = $.grep(obj.filters, function (i) {
+          return i.type != 'RemoveColor';
+        });
+        obj.applyFilters();
+        canvas.renderAll();
+        save();
+      }
+    }
+  }
+}
+
+function updateChromaUI() {
+  if (canvas.getActiveObject()) {
+    var obj = canvas.getActiveObject();
+    if (obj.filters) {
+      if (obj.filters.length > 0) {
+        if (obj.filters.find((x) => x.type == 'RemoveColor')) {
+          $('.status-active').removeClass('status-active');
+          $('#status-on').addClass('status-active');
+          chromaslider.setValue(
+            obj.filters.find((x) => x.type == 'RemoveColor').distance
+          );
+          $('#chroma-color input').val(
+            obj.filters.find((x) => x.type == 'RemoveColor').color
+          );
+          $('#color-chroma-side').css(
+            'background-color',
+            obj.filters.find((x) => x.type == 'RemoveColor').color
+          );
+        } else {
+          $('.status-active').removeClass('status-active');
+          $('#status-off').addClass('status-active');
+          chromaslider.setValue(1);
+          $('#chroma-color input').val('#FFFFFF');
+          $('#color-chroma-side').css('background-color', '#FFFFF');
+        }
+      }
+    }
+  }
+}
+
+function toggleChroma() {
+  if (canvas.getActiveObject()) {
+    $('.status-active').removeClass('status-active');
+    $(this).addClass('status-active');
+    updateChromaValues();
+  }
+}
+
+$(document).on(
+  'click',
+  '.status-trigger:not(.status-active)',
+  toggleChroma
+);
+
+async function getColor() {
+  try {
+    const selectedColor = await eyeDropper.open();
+    colormode = 'chroma';
+    o_fill.setColor(selectedColor.sRGBHex);
+  } catch (err) {}
+}
+$(document).on('click', '.pcr-current-color', getColor);
+
+function closeFilters() {
+  $('.show-filters').removeClass('show-filters');
+}
+
+function openFilters() {
+  $('#filters-parent').addClass('show-filters');
+}
+
+$(document).on('click', '#filters-button', openFilters);
+$(document).on('click', '#filters-close', closeFilters);
+
+function toggleSpeed(e) {
+  e.stopPropagation();
+  e.preventDefault();
+  $('#speed-settings').toggleClass('show-speed');
+  $('#speed-arrow').toggleClass('arrow-on');
+}
+function setSpeed(e) {
+  e.stopPropagation();
+  e.preventDefault();
+  speed = parseFloat($(this).attr('data-speed'));
+  $('#speed span').html($(this).html());
+  toggleSpeed(e);
+  save();
+}
+
+$(document).on('click', '.speed', setSpeed);
+$(document).on('click', '#speed', toggleSpeed);
+
+function showMore() {
+  $('#more-over').css(
+    'top',
+    $('#more-tool').offset().top + 5 - $('#more-over').height() / 4
+  );
+  $('#more-over').addClass('more-show');
+}
+function hideMore() {
+  $('#more-over').removeClass('more-show');
+}
+
+function handleLottieUpload() {
+  var filething = $('#filepick3').get(0).files;
+  var reader = new FileReader();
+  reader.onload = function (event) {
+    newLottieAnimation(
+      artboard.get('left') + artboard.get('width') / 2,
+      artboard.get('top') + artboard.get('height') / 2,
+      event.target.result
+    );
+  };
+  reader.readAsDataURL(filething.item(0));
+}
+
+$(document).on('change', '#filepick3', handleLottieUpload);
+
+function uploadLottie() {
+  $('#filepick3').click();
+}
+$(document).on('click', '#upload-lottie', uploadLottie);

js/webm-writer2.js

@@ -0,0 +1,1165 @@
+/**
+ * A tool for presenting an ArrayBuffer as a stream for writing some simple data
+ * types.
+ *
+ * By Nicholas Sherlock, with updates from jimbankoski
+ *
+ * - make it work off frames with timestamps from webcodecs
+ * - make it write via Native File IO apis instead of FileWriter
+ * - remove alpha and transparency
+ * -
+ *
+ * Released under the WTFPLv2 https://en.wikipedia.org/wiki/WTFPL
+ */
+
+'use strict';
+
+(function() {
+/*
+ * Create an ArrayBuffer of the given length and present it as a writable stream
+ * with methods for writing data in different formats.
+ */
+let ArrayBufferDataStream = function(length) {
+  this.data = new Uint8Array(length);
+  this.pos = 0;
+};
+
+ArrayBufferDataStream.prototype.seek = function(toOffset) {
+  this.pos = toOffset;
+};
+
+ArrayBufferDataStream.prototype.writeBytes = function(arr) {
+  for (let i = 0; i < arr.length; i++) {
+    this.data[this.pos++] = arr[i];
+  }
+};
+
+ArrayBufferDataStream.prototype.writeByte = function(b) {
+  this.data[this.pos++] = b;
+};
+
+// Synonym:
+ArrayBufferDataStream.prototype.writeU8 =
+    ArrayBufferDataStream.prototype.writeByte;
+
+ArrayBufferDataStream.prototype.writeU16BE = function(u) {
+  this.data[this.pos++] = u >> 8;
+  this.data[this.pos++] = u;
+};
+
+ArrayBufferDataStream.prototype.writeDoubleBE = function(d) {
+  let bytes = new Uint8Array(new Float64Array([d]).buffer);
+
+  for (let i = bytes.length - 1; i >= 0; i--) {
+    this.writeByte(bytes[i]);
+  }
+};
+
+ArrayBufferDataStream.prototype.writeFloatBE = function(d) {
+  let bytes = new Uint8Array(new Float32Array([d]).buffer);
+
+  for (let i = bytes.length - 1; i >= 0; i--) {
+    this.writeByte(bytes[i]);
+  }
+};
+
+/**
+ * Write an ASCII string to the stream
+ */
+ArrayBufferDataStream.prototype.writeString = function(s) {
+  for (let i = 0; i < s.length; i++) {
+    this.data[this.pos++] = s.charCodeAt(i);
+  }
+};
+
+/**
+ * Write the given 32-bit integer to the stream as an EBML variable-length
+ * integer using the given byte width (use measureEBMLVarInt).
+ *
+ * No error checking is performed to ensure that the supplied width is correct
+ * for the integer.
+ *
+ * @param i Integer to be written
+ * @param width Number of bytes to write to the stream
+ */
+ArrayBufferDataStream.prototype.writeEBMLVarIntWidth = function(i, width) {
+  switch (width) {
+    case 1:
+      this.writeU8((1 << 7) | i);
+      break;
+    case 2:
+      this.writeU8((1 << 6) | (i >> 8));
+      this.writeU8(i);
+      break;
+    case 3:
+      this.writeU8((1 << 5) | (i >> 16));
+      this.writeU8(i >> 8);
+      this.writeU8(i);
+      break;
+    case 4:
+      this.writeU8((1 << 4) | (i >> 24));
+      this.writeU8(i >> 16);
+      this.writeU8(i >> 8);
+      this.writeU8(i);
+      break;
+    case 5:
+      /*
+       * JavaScript converts its doubles to 32-bit integers for bitwise
+       * operations, so we need to do a division by 2^32 instead of a
+       * right-shift of 32 to retain those top 3 bits
+       */
+      this.writeU8((1 << 3) | ((i / 4294967296) & 0x7));
+      this.writeU8(i >> 24);
+      this.writeU8(i >> 16);
+      this.writeU8(i >> 8);
+      this.writeU8(i);
+      break;
+    default:
+      throw new Error('Bad EBML VINT size ' + width);
+  }
+};
+
+/**
+ * Return the number of bytes needed to encode the given integer as an EBML
+ * VINT.
+ */
+ArrayBufferDataStream.prototype.measureEBMLVarInt = function(val) {
+  if (val < (1 << 7) - 1) {
+    /* Top bit is set, leaving 7 bits to hold the integer, but we can't store
+     * 127 because "all bits set to one" is a reserved value. Same thing for the
+     * other cases below:
+     */
+    return 1;
+  } else if (val < (1 << 14) - 1) {
+    return 2;
+  } else if (val < (1 << 21) - 1) {
+    return 3;
+  } else if (val < (1 << 28) - 1) {
+    return 4;
+  } else if (val < 34359738367) {  // 2 ^ 35 - 1 (can address 32GB)
+    return 5;
+  } else {
+    throw new Error('EBML VINT size not supported ' + val);
+  }
+};
+
+ArrayBufferDataStream.prototype.writeEBMLVarInt = function(i) {
+  this.writeEBMLVarIntWidth(i, this.measureEBMLVarInt(i));
+};
+
+/**
+ * Write the given unsigned 32-bit integer to the stream in big-endian order
+ * using the given byte width. No error checking is performed to ensure that the
+ * supplied width is correct for the integer.
+ *
+ * Omit the width parameter to have it determined automatically for you.
+ *
+ * @param u Unsigned integer to be written
+ * @param width Number of bytes to write to the stream
+ */
+ArrayBufferDataStream.prototype.writeUnsignedIntBE = function(u, width) {
+  if (width === undefined) {
+    width = this.measureUnsignedInt(u);
+  }
+
+  // Each case falls through:
+  switch (width) {
+    case 5:
+      this.writeU8(
+          Math.floor(u / 4294967296));  // Need to use division to access >32
+                                        // bits of floating point var
+    case 4:
+      this.writeU8(u >> 24);
+    case 3:
+      this.writeU8(u >> 16);
+    case 2:
+      this.writeU8(u >> 8);
+    case 1:
+      this.writeU8(u);
+      break;
+    default:
+      throw new Error('Bad UINT size ' + width);
+  }
+};
+
+/**
+ * Return the number of bytes needed to hold the non-zero bits of the given
+ * unsigned integer.
+ */
+ArrayBufferDataStream.prototype.measureUnsignedInt = function(val) {
+  // Force to 32-bit unsigned integer
+  if (val < (1 << 8)) {
+    return 1;
+  } else if (val < (1 << 16)) {
+    return 2;
+  } else if (val < (1 << 24)) {
+    return 3;
+  } else if (val < 4294967296) {
+    return 4;
+  } else {
+    return 5;
+  }
+};
+
+/**
+ * Return a view on the portion of the buffer from the beginning to the current
+ * seek position as a Uint8Array.
+ */
+ArrayBufferDataStream.prototype.getAsDataArray = function() {
+  if (this.pos < this.data.byteLength) {
+    return this.data.subarray(0, this.pos);
+  } else if (this.pos == this.data.byteLength) {
+    return this.data;
+  } else {
+    throw new Error('ArrayBufferDataStream\'s pos lies beyond end of buffer');
+  }
+};
+
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+  module.exports = ArrayBufferDataStream;
+} else {
+  self.ArrayBufferDataStream = ArrayBufferDataStream;
+}
+}());
+'use strict';
+
+/**
+ * Allows a series of Blob-convertible objects (ArrayBuffer, Blob, String, etc)
+ * to be added to a buffer. Seeking and overwriting of blobs is allowed.
+ *
+ * You can supply a FileWriter, in which case the BlobBuffer is just used as
+ * temporary storage before it writes it through to the disk.
+ *
+ * By Nicholas Sherlock
+ *
+ * Released under the WTFPLv2 https://en.wikipedia.org/wiki/WTFPL
+ */
+(function() {
+let BlobBuffer = function(fs) {
+  return function(destination) {
+    let buffer = [], writePromise = Promise.resolve(), fileWriter = null,
+        fd = null;
+
+    if (destination &&
+        destination.constructor.name === 'FileSystemWritableFileStream') {
+      fileWriter = destination;
+    } else if (fs && destination) {
+      fd = destination;
+    }
+
+    // Current seek offset
+    this.pos = 0;
+
+    // One more than the index of the highest byte ever written
+    this.length = 0;
+
+    // Returns a promise that converts the blob to an ArrayBuffer
+    function readBlobAsBuffer(blob) {
+      return new Promise(function(resolve, reject) {
+        let reader = new FileReader();
+
+        reader.addEventListener('loadend', function() {
+          resolve(reader.result);
+        });
+
+        reader.readAsArrayBuffer(blob);
+      });
+    }
+
+    function convertToUint8Array(thing) {
+      return new Promise(function(resolve, reject) {
+        if (thing instanceof Uint8Array) {
+          resolve(thing);
+        } else if (thing instanceof ArrayBuffer || ArrayBuffer.isView(thing)) {
+          resolve(new Uint8Array(thing));
+        } else if (thing instanceof Blob) {
+          resolve(readBlobAsBuffer(thing).then(function(buffer) {
+            return new Uint8Array(buffer);
+          }));
+        } else {
+          // Assume that Blob will know how to read this thing
+          resolve(readBlobAsBuffer(new Blob([thing])).then(function(buffer) {
+            return new Uint8Array(buffer);
+          }));
+        }
+      });
+    }
+
+    function measureData(data) {
+      let result = data.byteLength || data.length || data.size;
+
+      if (!Number.isInteger(result)) {
+        throw new Error('Failed to determine size of element');
+      }
+
+      return result;
+    }
+
+    /**
+     * Seek to the given absolute offset.
+     *
+     * You may not seek beyond the end of the file (this would create a hole
+     * and/or allow blocks to be written in non- sequential order, which isn't
+     * currently supported by the memory buffer backend).
+     */
+    this.seek = function(offset) {
+      if (offset < 0) {
+        throw new Error('Offset may not be negative');
+      }
+
+      if (isNaN(offset)) {
+        throw new Error('Offset may not be NaN');
+      }
+
+      if (offset > this.length) {
+        throw new Error('Seeking beyond the end of file is not allowed');
+      }
+
+      this.pos = offset;
+    };
+
+    /**
+     * Write the Blob-convertible data to the buffer at the current seek
+     * position.
+     *
+     * Note: If overwriting existing data, the write must not cross preexisting
+     * block boundaries (written data must be fully contained by the extent of a
+     * previous write).
+     */
+    this.write = function(data) {
+      let newEntry = {offset: this.pos, data: data, length: measureData(data)},
+          isAppend = newEntry.offset >= this.length;
+
+      this.pos += newEntry.length;
+      this.length = Math.max(this.length, this.pos);
+
+      // After previous writes complete, perform our write
+      writePromise = writePromise.then(async function() {
+        if (fd) {
+          return new Promise(function(resolve, reject) {
+            convertToUint8Array(newEntry.data).then(function(dataArray) {
+              let totalWritten = 0, buffer = Buffer.from(dataArray.buffer),
+
+                  handleWriteComplete = function(err, written, buffer) {
+                    totalWritten += written;
+
+                    if (totalWritten >= buffer.length) {
+                      resolve();
+                    } else {
+                      // We still have more to write...
+                      fs.write(
+                          fd, buffer, totalWritten,
+                          buffer.length - totalWritten,
+                          newEntry.offset + totalWritten, handleWriteComplete);
+                    }
+                  };
+
+              fs.write(
+                  fd, buffer, 0, buffer.length, newEntry.offset,
+                  handleWriteComplete);
+            });
+          });
+        } else if (fileWriter) {
+          return new Promise(function(resolve, reject) {
+            fileWriter.seek(newEntry.offset)
+                .then(() => {fileWriter.write(new Blob([newEntry.data]))})
+                .then(() => {resolve();
+                })
+          });
+        } else if (!isAppend) {
+          // We might be modifying a write that was already buffered in memory.
+
+          // Slow linear search to find a block we might be overwriting
+          for (let i = 0; i < buffer.length; i++) {
+            let entry = buffer[i];
+
+            // If our new entry overlaps the old one in any way...
+            if (!(newEntry.offset + newEntry.length <= entry.offset ||
+                  newEntry.offset >= entry.offset + entry.length)) {
+              if (newEntry.offset < entry.offset ||
+                  newEntry.offset + newEntry.length >
+                      entry.offset + entry.length) {
+                throw new Error('Overwrite crosses blob boundaries');
+              }
+
+              if (newEntry.offset == entry.offset &&
+                  newEntry.length == entry.length) {
+                // We overwrote the entire block
+                entry.data = newEntry.data;
+
+                // We're done
+                return;
+              } else {
+                return convertToUint8Array(entry.data)
+                    .then(function(entryArray) {
+                      entry.data = entryArray;
+
+                      return convertToUint8Array(newEntry.data);
+                    })
+                    .then(function(newEntryArray) {
+                      newEntry.data = newEntryArray;
+
+                      entry.data.set(
+                          newEntry.data, newEntry.offset - entry.offset);
+                    });
+              }
+            }
+          }
+          // Else fall through to do a simple append, as we didn't overwrite any
+          // pre-existing blocks
+        }
+
+        buffer.push(newEntry);
+      });
+    };
+
+    /**
+     * Finish all writes to the buffer, returning a promise that signals when
+     * that is complete.
+     *
+     * If a FileWriter was not provided, the promise is resolved with a Blob
+     * that represents the completed BlobBuffer contents. You can optionally
+     * pass in a mimeType to be used for this blob.
+     *
+     * If a FileWriter was provided, the promise is resolved with null as the
+     * first argument.
+     */
+    this.complete = function(mimeType) {
+      if (fd || fileWriter) {
+        writePromise = writePromise.then(function() {
+          return null;
+        });
+      } else {
+        // After writes complete we need to merge the buffer to give to the
+        // caller
+        writePromise = writePromise.then(function() {
+          let result = [];
+
+          for (let i = 0; i < buffer.length; i++) {
+            result.push(buffer[i].data);
+          }
+
+          return new Blob(result, {type: mimeType});
+        });
+      }
+
+      return writePromise;
+    };
+  };
+};
+
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+  module.exports = BlobBuffer(require('fs'));
+} else {
+  self.BlobBuffer = BlobBuffer(null);
+}
+})();
+/**
+ * WebM video encoder for Google Chrome. This implementation is suitable for
+ * creating very large video files, because it can stream Blobs directly to a
+ * FileWriter without buffering the entire video in memory.
+ *
+ * When FileWriter is not available or not desired, it can buffer the video in
+ * memory as a series of Blobs which are eventually returned as one composite
+ * Blob.
+ *
+ * By Nicholas Sherlock.
+ *
+ * Based on the ideas from Whammy: https://github.com/antimatter15/whammy
+ *
+ * Released under the WTFPLv2 https://en.wikipedia.org/wiki/WTFPL
+ */
+
+'use strict';
+
+(function() {
+function extend(base, top) {
+  let target = {};
+
+  [base, top].forEach(function(obj) {
+    for (let prop in obj) {
+      if (Object.prototype.hasOwnProperty.call(obj, prop)) {
+        target[prop] = obj[prop];
+      }
+    }
+  });
+
+  return target;
+}
+
+/**
+ * @param {String} string
+ * @returns {number}
+ */
+function byteStringToUint32LE(string) {
+  let a = string.charCodeAt(0), b = string.charCodeAt(1),
+      c = string.charCodeAt(2), d = string.charCodeAt(3);
+
+  return (a | (b << 8) | (c << 16) | (d << 24)) >>> 0;
+}
+
+
+// Just a little utility so we can tag values as floats for the EBML encoder's
+// benefit
+function EBMLFloat32(value) {
+  this.value = value;
+}
+
+function EBMLFloat64(value) {
+  this.value = value;
+}
+
+/**
+ * Write the given EBML object to the provided ArrayBufferStream.
+ *
+ * @param buffer
+ * @param {Number} bufferFileOffset - The buffer's first byte is at this
+ *     position inside the video file.
+ *                                    This is used to complete offset and
+ * dataOffset fields in each EBML structure, indicating the file offset of the
+ * first byte of the EBML element and its data payload.
+ * @param {*} ebml
+ */
+function writeEBML(buffer, bufferFileOffset, ebml) {
+  // Is the ebml an array of sibling elements?
+  if (Array.isArray(ebml)) {
+    for (let i = 0; i < ebml.length; i++) {
+      writeEBML(buffer, bufferFileOffset, ebml[i]);
+    }
+    // Is this some sort of raw data that we want to write directly?
+  } else if (typeof ebml === 'string') {
+    buffer.writeString(ebml);
+  } else if (ebml instanceof Uint8Array) {
+    buffer.writeBytes(ebml);
+  } else if (ebml.id) {
+    // We're writing an EBML element
+    ebml.offset = buffer.pos + bufferFileOffset;
+
+    buffer.writeUnsignedIntBE(ebml.id);  // ID field
+
+    // Now we need to write the size field, so we must know the payload size:
+
+    if (Array.isArray(ebml.data)) {
+      // Writing an array of child elements. We won't try to measure the size of
+      // the children up-front
+
+      let sizePos, dataBegin, dataEnd;
+
+      if (ebml.size === -1) {
+        // Write the reserved all-one-bits marker to note that the size of this
+        // element is unknown/unbounded
+        buffer.writeByte(0xFF);
+      } else {
+        sizePos = buffer.pos;
+
+        /* Write a dummy size field to overwrite later. 4 bytes allows an
+         * element maximum size of 256MB, which should be plenty (we don't want
+         * to have to buffer that much data in memory at one time anyway!)
+         */
+        buffer.writeBytes([0, 0, 0, 0]);
+      }
+
+      dataBegin = buffer.pos;
+
+      ebml.dataOffset = dataBegin + bufferFileOffset;
+      writeEBML(buffer, bufferFileOffset, ebml.data);
+
+      if (ebml.size !== -1) {
+        dataEnd = buffer.pos;
+
+        ebml.size = dataEnd - dataBegin;
+
+        buffer.seek(sizePos);
+        buffer.writeEBMLVarIntWidth(ebml.size, 4);  // Size field
+
+        buffer.seek(dataEnd);
+      }
+    } else if (typeof ebml.data === 'string') {
+      buffer.writeEBMLVarInt(ebml.data.length);  // Size field
+      ebml.dataOffset = buffer.pos + bufferFileOffset;
+      buffer.writeString(ebml.data);
+    } else if (typeof ebml.data === 'number') {
+      // Allow the caller to explicitly choose the size if they wish by
+      // supplying a size field
+      if (!ebml.size) {
+        ebml.size = buffer.measureUnsignedInt(ebml.data);
+      }
+
+      buffer.writeEBMLVarInt(ebml.size);  // Size field
+      ebml.dataOffset = buffer.pos + bufferFileOffset;
+      buffer.writeUnsignedIntBE(ebml.data, ebml.size);
+    } else if (ebml.data instanceof EBMLFloat64) {
+      buffer.writeEBMLVarInt(8);  // Size field
+      ebml.dataOffset = buffer.pos + bufferFileOffset;
+      buffer.writeDoubleBE(ebml.data.value);
+    } else if (ebml.data instanceof EBMLFloat32) {
+      buffer.writeEBMLVarInt(4);  // Size field
+      ebml.dataOffset = buffer.pos + bufferFileOffset;
+      buffer.writeFloatBE(ebml.data.value);
+    } else if (ebml.data instanceof Uint8Array) {
+      buffer.writeEBMLVarInt(ebml.data.byteLength);  // Size field
+      ebml.dataOffset = buffer.pos + bufferFileOffset;
+      buffer.writeBytes(ebml.data);
+    } else {
+      throw new Error('Bad EBML datatype ' + typeof ebml.data);
+    }
+  } else {
+    throw new Error('Bad EBML datatype ' + typeof ebml.data);
+  }
+}
+
+/**
+ * @typedef {Object} Frame
+ * @property {string} frame - Raw VP8 frame data
+ * @property {Number} trackNumber - From 1 to 126 (inclusive)
+ * @property {Number} timecode
+ */
+
+/**
+ * @typedef {Object} Cluster
+ * @property {Number} timecode - Start time for the cluster
+ */
+
+/**
+ * @param ArrayBufferDataStream - Imported library
+ * @param BlobBuffer - Imported library
+ *
+ * @returns WebMWriter
+ *
+ * @constructor
+ */
+let WebMWriter = function(ArrayBufferDataStream, BlobBuffer) {
+  return function(options) {
+    let MAX_CLUSTER_DURATION_MSEC = 5000000, DEFAULT_TRACK_NUMBER = 1,
+        writtenHeader = false, videoWidth = 0, videoHeight = 0,
+        firstTimestampEver = true, earliestTimestamp = 0,
+
+
+    /**
+     *
+     * @type {Frame[]}
+     */
+    clusterFrameBuffer = [], clusterStartTime = 0, clusterDuration = 0,
+    lastTimeCode = 0,
+
+    optionDefaults = {
+      fileWriter: null,  // Chrome FileWriter in order to stream to a file
+                         // instead of buffering to memory (optional)
+      fd: null,      // Node.JS file descriptor to write to instead of buffering
+                     // (optional)
+      codec: 'VP8',  // Codec to write to webm file
+
+    },
+
+    seekPoints = {
+      Cues: {id: new Uint8Array([0x1C, 0x53, 0xBB, 0x6B]), positionEBML: null},
+      SegmentInfo:
+          {id: new Uint8Array([0x15, 0x49, 0xA9, 0x66]), positionEBML: null},
+      Tracks:
+          {id: new Uint8Array([0x16, 0x54, 0xAE, 0x6B]), positionEBML: null},
+    },
+
+    ebmlSegment,  // Root element of the EBML document
+
+        segmentDuration = {
+          'id': 0x4489,  // Duration
+          'data': new EBMLFloat64(0)
+        },
+
+    seekHead,
+
+    cues = [],
+
+    blobBuffer = new BlobBuffer(options.fileWriter || options.fd);
+
+    function fileOffsetToSegmentRelative(fileOffset) {
+      return fileOffset - ebmlSegment.dataOffset;
+    }
+
+
+    /**
+     * Create a SeekHead element with descriptors for the points in the global
+     * seekPoints array.
+     *
+     * 5 bytes of position values are reserved for each node, which lie at the
+     * offset point.positionEBML.dataOffset, to be overwritten later.
+     */
+    function createSeekHead() {
+      let seekPositionEBMLTemplate = {
+        'id': 0x53AC,  // SeekPosition
+        'size': 5,     // Allows for 32GB video files
+        'data': 0      // We'll overwrite this when the file is complete
+      },
+
+          result = {
+            'id': 0x114D9B74,  // SeekHead
+            'data': []
+          };
+
+      for (let name in seekPoints) {
+        let seekPoint = seekPoints[name];
+
+        seekPoint.positionEBML = Object.create(seekPositionEBMLTemplate);
+
+        result.data.push({
+          'id': 0x4DBB,  // Seek
+          'data': [
+            {
+              'id': 0x53AB,  // SeekID
+              'data': seekPoint.id
+            },
+            seekPoint.positionEBML
+          ]
+        });
+      }
+
+      return result;
+    }
+
+    /**
+     * Write the WebM file header to the stream.
+     */
+    function writeHeader() {
+      seekHead = createSeekHead();
+
+      let ebmlHeader = {
+        'id': 0x1a45dfa3,  // EBML
+        'data': [
+          {
+            'id': 0x4286,  // EBMLVersion
+            'data': 1
+          },
+          {
+            'id': 0x42f7,  // EBMLReadVersion
+            'data': 1
+          },
+          {
+            'id': 0x42f2,  // EBMLMaxIDLength
+            'data': 4
+          },
+          {
+            'id': 0x42f3,  // EBMLMaxSizeLength
+            'data': 8
+          },
+          {
+            'id': 0x4282,  // DocType
+            'data': 'webm'
+          },
+          {
+            'id': 0x4287,  // DocTypeVersion
+            'data': 2
+          },
+          {
+            'id': 0x4285,  // DocTypeReadVersion
+            'data': 2
+          }
+        ]
+      },
+
+          segmentInfo = {
+            'id': 0x1549a966,  // Info
+            'data': [
+              {
+                'id': 0x2ad7b1,  // TimecodeScale
+                'data': 1e6  // Times will be in microseconds (1e6 nanoseconds
+                             // per step = 1ms)
+              },
+              {
+                'id': 0x4d80,  // MuxingApp
+                'data': 'webm-writer-js',
+              },
+              {
+                'id': 0x5741,  // WritingApp
+                'data': 'webm-writer-js'
+              },
+              segmentDuration  // To be filled in later
+            ]
+          },
+
+          videoProperties = [
+            {
+              'id': 0xb0,  // PixelWidth
+              'data': videoWidth
+            },
+            {
+              'id': 0xba,  // PixelHeight
+              'data': videoHeight
+            }
+          ];
+
+      let tracks = {
+        'id': 0x1654ae6b,  // Tracks
+        'data': [{
+          'id': 0xae,  // TrackEntry
+          'data': [
+            {
+              'id': 0xd7,  // TrackNumber
+              'data': DEFAULT_TRACK_NUMBER
+            },
+            {
+              'id': 0x73c5,  // TrackUID
+              'data': DEFAULT_TRACK_NUMBER
+            },
+            {
+              'id': 0x83,  // TrackType
+              'data': 1
+            },
+            {
+              'id': 0xe0,  // Video
+              'data': videoProperties
+            },
+            {
+              'id': 0x9c,  // FlagLacing
+              'data': 0
+            },
+            {
+              'id': 0x22b59c,  // Language
+              'data': 'und'
+            },
+            {
+              'id': 0xb9,  // FlagEnabled
+              'data': 1
+            },
+            {
+              'id': 0x88,  // FlagDefault
+              'data': 1
+            },
+            {
+              'id': 0x55aa,  // FlagForced
+              'data': 0
+            },
+
+            {
+              'id': 0x86,  // CodecID
+              'data': 'V_' + options.codec
+            }, /*
+             (options.codec == 'VP8' ?
+                  {
+                    'id': 0x63A2,  // Codec private data
+                    'data': []
+                  } :
+                  {
+                    'id': 0x63A2,  // Codec private data for vp9
+                    'data': [
+                      {
+                        'id': 1,  // vp9 Profile
+                        'size': 1,
+                        'data': 0
+                      },
+                      {
+                        'id': 2,  // Feature level
+                        'size': 1,
+                        'data': 10
+                      },
+                      {
+                        'id': 3,  // bitdepth level
+                        'size': 1,
+                        'data': 8
+                      },
+                      {
+                        'id': 4,  // color sampling
+                        'size': 1,
+                        'data': 0
+                      }
+                    ]
+                  }),
+             {
+               'id': 0x258688,  // CodecName
+               'data': options.codec
+             },*/
+          ]
+        }]
+      };
+
+      ebmlSegment = {
+        'id': 0x18538067,  // Segment
+        'size': -1,        // Unbounded size
+        'data': [
+          seekHead,
+          segmentInfo,
+          tracks,
+        ]
+      };
+
+      let bufferStream = new ArrayBufferDataStream(256);
+
+      writeEBML(bufferStream, blobBuffer.pos, [ebmlHeader, ebmlSegment]);
+      blobBuffer.write(bufferStream.getAsDataArray());
+
+      // Now we know where these top-level elements lie in the file:
+      seekPoints.SegmentInfo.positionEBML.data =
+          fileOffsetToSegmentRelative(segmentInfo.offset);
+      seekPoints.Tracks.positionEBML.data =
+          fileOffsetToSegmentRelative(tracks.offset);
+
+      writtenHeader = true;
+    }
+
+    /**
+     * Create a SimpleBlock element to hold the given frame.
+     *
+     * @param {Frame} frame
+     *
+     * @return A SimpleBlock EBML element.
+     */
+    function createSimpleBlockForframe(frame) {
+      let bufferStream = new ArrayBufferDataStream(1 + 2 + 1);
+
+      if (!(frame.trackNumber > 0 && frame.trackNumber < 127)) {
+        throw new Error('TrackNumber must be > 0 and < 127');
+      }
+
+      bufferStream.writeEBMLVarInt(
+          frame.trackNumber);  // Always 1 byte since we limit the range of
+                                  // trackNumber
+      bufferStream.writeU16BE(frame.timecode);
+
+      // Flags byte
+      bufferStream.writeByte(
+          (frame.type == "key" ? 1 : 0) << 7  // frame
+      );
+
+      return {
+        'id': 0xA3,  // SimpleBlock
+        'data': [bufferStream.getAsDataArray(), frame.frame]
+      };
+    }
+
+    /**
+     * Create a Cluster EBML node.
+     *
+     * @param {Cluster} cluster
+     *
+     * Returns an EBML element.
+     */
+    function createCluster(cluster) {
+      return {
+        'id': 0x1f43b675,
+        'data': [{
+          'id': 0xe7,  // Timecode
+          'data': Math.round(cluster.timecode)
+        }]
+      };
+    }
+
+    function addCuePoint(trackIndex, clusterTime, clusterFileOffset) {
+      cues.push({
+        'id': 0xBB,  // Cue
+        'data': [
+          {
+            'id': 0xB3,  // CueTime
+            'data': clusterTime
+          },
+          {
+            'id': 0xB7,  // CueTrackPositions
+            'data': [
+              {
+                'id': 0xF7,  // CueTrack
+                'data': trackIndex
+              },
+              {
+                'id': 0xF1,  // CueClusterPosition
+                'data': fileOffsetToSegmentRelative(clusterFileOffset)
+              }
+            ]
+          }
+        ]
+      });
+    }
+
+    /**
+     * Write a Cues element to the blobStream using the global `cues` array of
+     * CuePoints (use addCuePoint()). The seek entry for the Cues in the
+     * SeekHead is updated.
+     */
+    function writeCues() {
+      let ebml = {'id': 0x1C53BB6B, 'data': cues},
+
+          cuesBuffer = new ArrayBufferDataStream(
+              16 +
+              cues.length *
+                  32);  // Pretty crude estimate of the buffer size we'll need
+
+      writeEBML(cuesBuffer, blobBuffer.pos, ebml);
+      blobBuffer.write(cuesBuffer.getAsDataArray());
+
+      // Now we know where the Cues element has ended up, we can update the
+      // SeekHead
+      seekPoints.Cues.positionEBML.data =
+          fileOffsetToSegmentRelative(ebml.offset);
+    }
+
+    /**
+     * Flush the frames in the current clusterFrameBuffer out to the stream as a
+     * Cluster.
+     */
+    function flushClusterFrameBuffer() {
+      if (clusterFrameBuffer.length === 0) {
+        return;
+      }
+
+      // First work out how large of a buffer we need to hold the cluster data
+      let rawImageSize = 0;
+
+      for (let i = 0; i < clusterFrameBuffer.length; i++) {
+        rawImageSize += clusterFrameBuffer[i].frame.byteLength;
+      }
+
+      let buffer = new ArrayBufferDataStream(
+              rawImageSize +
+              clusterFrameBuffer.length *
+                  64),  // Estimate 64 bytes per block header
+
+          cluster = createCluster({
+            timecode: Math.round(clusterStartTime),
+          });
+
+      for (let i = 0; i < clusterFrameBuffer.length; i++) {
+        cluster.data.push(createSimpleBlockForframe(clusterFrameBuffer[i]));
+      }
+
+      writeEBML(buffer, blobBuffer.pos, cluster);
+      blobBuffer.write(buffer.getAsDataArray());
+
+      addCuePoint(
+          DEFAULT_TRACK_NUMBER, Math.round(clusterStartTime), cluster.offset);
+
+      clusterFrameBuffer = [];
+      clusterDuration = 0;
+    }
+
+    function validateOptions() {
+    }
+
+    /**
+     *
+     * @param {Frame} frame
+     */
+    function addFrameToCluster(frame) {
+        frame.trackNumber = DEFAULT_TRACK_NUMBER;
+        var time = frame.intime / 1000;
+        if (firstTimestampEver) {
+          earliestTimestamp = time;
+          time = 0;
+          firstTimestampEver = false;
+        } else {
+          time = time - earliestTimestamp;
+        }
+        lastTimeCode = time;
+        if (clusterDuration == 0) clusterStartTime = time;
+
+        // Frame timecodes are relative to the start of their cluster:
+        // frame.timecode = Math.round(clusterDuration);
+        frame.timecode = Math.round(time - clusterStartTime);
+
+        clusterFrameBuffer.push(frame);
+        clusterDuration = frame.timecode + 1;
+
+        if (clusterDuration >= MAX_CLUSTER_DURATION_MSEC) {
+          flushClusterFrameBuffer();
+        }
+      }
+
+      /**
+       * Rewrites the SeekHead element that was initially written to the stream
+       * with the offsets of top level elements.
+       *
+       * Call once writing is complete (so the offset of all top level elements
+       * is known).
+       */
+      function rewriteSeekHead() {
+        let seekHeadBuffer = new ArrayBufferDataStream(seekHead.size),
+            oldPos = blobBuffer.pos;
+
+        // Write the rewritten SeekHead element's data payload to the stream
+        // (don't need to update the id or size)
+        writeEBML(seekHeadBuffer, seekHead.dataOffset, seekHead.data);
+
+        // And write that through to the file
+        blobBuffer.seek(seekHead.dataOffset);
+        blobBuffer.write(seekHeadBuffer.getAsDataArray());
+        blobBuffer.seek(oldPos);
+      }
+
+      /**
+       * Rewrite the Duration field of the Segment with the newly-discovered
+       * video duration.
+       */
+      function rewriteDuration() {
+        let buffer = new ArrayBufferDataStream(8), oldPos = blobBuffer.pos;
+
+        // Rewrite the data payload (don't need to update the id or size)
+        buffer.writeDoubleBE(lastTimeCode);
+
+        // And write that through to the file
+        blobBuffer.seek(segmentDuration.dataOffset);
+        blobBuffer.write(buffer.getAsDataArray());
+
+        blobBuffer.seek(oldPos);
+      }
+
+      /**
+       * Add a frame to the video.
+       *
+       * @param {HTMLCanvasElement|String} frame - A Canvas element that
+       *     contains the frame, or a WebP string you obtained by calling
+       * toDataUrl() on an image yourself.
+       *
+       */
+      this.addFrame = function(frame) {
+        if (!writtenHeader) {
+          videoWidth = options.width;
+          videoHeight = options.height;
+          writeHeader();
+        }
+        if (frame.constructor.name == 'EncodedVideoChunk') {
+          let frameData = new Uint8Array(frame.byteLength);
+          frame.copyTo(frameData);
+          addFrameToCluster({
+            frame: frameData,
+            intime: frame.timestamp,
+            type: frame.type,
+          });
+          return;
+        }
+      };
+
+      /**
+       * Finish writing the video and return a Promise to signal completion.
+       *
+       * If the destination device was memory (i.e. options.fileWriter was not
+       * supplied), the Promise is resolved with a Blob with the contents of the
+       * entire video.
+       */
+      this.complete = function() {
+        if (!writtenHeader) {
+          writeHeader();
+        }
+        firstTimestampEver = true;
+
+        flushClusterFrameBuffer();
+
+        writeCues();
+        rewriteSeekHead();
+        rewriteDuration();
+
+        return blobBuffer.complete('video/webm');
+      };
+
+      this.getWrittenSize = function() {
+        return blobBuffer.length;
+      };
+
+      options = extend(optionDefaults, options || {});
+      validateOptions();
+    };
+  };
+
+  if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports =
+        WebMWriter(require('./ArrayBufferDataStream'), require('./BlobBuffer'));
+} else {
+  self.WebMWriter =
+      WebMWriter(self.ArrayBufferDataStream, self.BlobBuffer);
+}
+})();