Merge pull request #53 from LottieFiles/dotlottie

Add option to switch to dotlottie for the json editor

.github/workflows/pages.yml

@@ -6,7 +6,7 @@ on:
     workflow_dispatch:
 jobs:
   publish:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     steps:
       -
         name: Checkout

.github/workflows/release.yml

@@ -10,7 +10,7 @@ on:
 jobs:
   build:
     name: Publish Schema
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     steps:
         -
             uses: actions/checkout@v2

.github/workflows/test.yml

@@ -1,8 +1,8 @@
 name: Test
 on: pull_request
 jobs:
-  publish:
-    runs-on: ubuntu-20.04
+  test:
+    runs-on: ubuntu-22.04
     steps:
       -
         name: Checkout
@@ -11,7 +11,7 @@ jobs:
         name: Setup
         run: |
             sudo apt update -q
-            sudo apt install -yy python python3-pip python3-virtualenv make
+            sudo apt install -yy python3 python3-pip python3-virtualenv make
             make install_dependencies
       -
         name: Docs

docs/playground/json_editor.md

@@ -5,6 +5,10 @@ disable_toc: 1
 <script src="../../scripts/json_editor.js"></script>
 <script src="../../scripts/lottie_explain.js"></script>
 <link rel="stylesheet" href="../../style/editor.css" />
+<script type="module">
+   import { DotLottie } from "https://unpkg.com/@lottiefiles/[email protected]/dist/index.js"
+   window.DotLottie = DotLottie;
+</script>
 
 <div class="alert alert-danger" role="alert" style="display: none" id="error_alert"></div>
 <div class="alert alert-primary" role="alert" style="display: none" id="loading_alert">
@@ -117,6 +121,26 @@ disable_toc: 1
                     </li>
                 </ul>
             </div>
+            <div class="dropdown">
+                <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="btn_menu_renderer"
+                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    Renderer
+                </button>
+                <ul class="dropdown-menu" aria-labelledby="btn_menu_renderer">
+                    <li><a class="dropdown-item" onclick="switch_renderer('svg')">
+                        lottie-web SVG
+                    </a></li>
+                    <li><a class="dropdown-item" onclick="switch_renderer('canvas')">
+                        lottie-web Canvas
+                    </a></li>
+                    <!--<li><a class="dropdown-item" onclick="switch_renderer('html')">
+                        lottie-web HTML
+                    </a></li>-->
+                    <li><a class="dropdown-item" onclick="switch_renderer('dotlottie')">
+                        DotLottie
+                    </a></li>
+                </ul>
+            </div>
             <div class="dropdown">
                 <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="btn_menu_help" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     Help
@@ -301,6 +325,19 @@ disable_toc: 1
         lottie_string_input(JSON.stringify(data, undefined, 4));
     }
 
+    function attach_listener()
+    {
+        lottie_player.anim.addEventListener("enterFrame", (ev) => {
+            frame_slider.value = frame_edit.value = Math.round(lottie_player.anim.currentFrame);
+        });
+    }
+
+    function switch_renderer(renderer)
+    {
+        lottie_player.switch_renderer(renderer);
+        attach_listener();
+    }
+
     function on_lottie_update(lottie)
     {
         worker.update(lottie);
@@ -309,9 +346,7 @@ disable_toc: 1
         frame_slider.max = frame_edit.max = lottie.op;
         lottie_player.reload();
         frame_slider.value = frame_edit.value = Math.round(lottie_player.anim.currentFrame);
-        lottie_player.anim.addEventListener("enterFrame", (ev) => {
-            frame_slider.value = frame_edit.value = Math.round(lottie_player.anim.currentFrame);
-        });
+        attach_listener();
     }
 
     function update_frame(value)

docs/scripts/lottie_raw_utils.js

@@ -1,13 +1,14 @@
 class LottiePlayer
 {
-    constructor(container, lottie, auto_load=true, custom_options={})
+    constructor(container, lottie, auto_load=true, custom_options={}, renderer="svg")
     {
         if ( typeof container == "string" )
             this.container = document.getElementById(container);
         else
             this.container = container;
 
         this.lottie = lottie;
+        this.renderer = renderer;
 
         this.anim = null;
 
@@ -24,7 +25,7 @@ class LottiePlayer
     {
         var options = {
             container: this.container,
-            renderer: 'svg',
+            renderer: this.renderer,
             loop: true,
             autoplay: this.autoplay,
             ...this.custom_options,
@@ -50,7 +51,10 @@ class LottiePlayer
 
         if ( this.load_ok )
         {
-            this.anim = bodymovin.loadAnimation(options);
+            if ( options.renderer == "dotlottie" )
+                this.anim = new DotLottieWrapper(options);
+            else
+                this.anim = bodymovin.loadAnimation(options);
             if ( frame != undefined )
                 this.go_to_frame(frame);
         }
@@ -90,6 +94,79 @@ class LottiePlayer
         else
             this.anim.goToAndStop(frame, true);
     }
+
+    switch_renderer(renderer)
+    {
+        this.renderer = renderer;
+        this.reload();
+    }
+}
+
+// Wrapper to dotlottie that makes it compatible with lottie-web
+class DotLottieWrapper
+{
+    constructor(options)
+    {
+        this.container = options.container;
+        this.canvas = document.createElement("canvas");
+        this.container.appendChild(this.canvas);
+        var dl_options = {
+            autoplay: options.autoplay,
+            loop: options.loop,
+            canvas: this.canvas,
+        };
+        if ( options.animationData !== undefined )
+        {
+            dl_options.data = JSON.stringify(options.animationData);
+            this.canvas.style.width = `${options.animationData.w}px`;
+            this.canvas.style.height = `${options.animationData.h}px`;
+        }
+        else
+        {
+            dl_options.src = options.path;
+        }
+        this.wrapped = new DotLottie(dl_options);
+    }
+
+    play()
+    {
+        this.wrapped.play();
+    }
+
+    pause()
+    {
+        this.wrapped.pause();
+    }
+
+    get currentFrame()
+    {
+        return this.wrapped.currentFrame;
+    }
+
+    destroy()
+    {
+        this.wrapped.destroy();
+        this.container.removeChild(this.canvas);
+        this.canvas = null;
+    }
+
+    goToAndPlay(frame, ignored)
+    {
+        this.wrapped.setFrame(frame);
+    }
+
+    goToAndStop(frame, ignored)
+    {
+        this.wrapped.setFrame(frame);
+        this.wrapped.pause();
+    }
+
+    addEventListener(event, listener)
+    {
+        if ( event == "enterFrame" )
+            event = "frame";
+        this.wrapped.addEventListener(event, listener);
+    }
 }
 
 class PlaygroundPlayer extends LottiePlayer

tools/md_extensions.py

@@ -12,6 +12,7 @@
 from markdown.preprocessors import Preprocessor
 from markdown.extensions import Extension
 from markdown.util import HTML_PLACEHOLDER_RE, AtomicString
+from mkdocs.structure.pages import _RelativePathTreeprocessor
 from lottie_docs.schema import Schema
 
 
@@ -166,7 +167,7 @@ def add_button(self, *, text=None, icon=None, **attrib):
 
 def get_url(md, path):
     # Mkdocs adds a tree processor to adjust urls, but it won't work with lottie js so we do the same here
-    processor = next(proc for proc in md.treeprocessors if proc.__class__.__module__ == 'mkdocs.structure.pages')
+    processor = next(proc for proc in md.treeprocessors if proc.__class__ is _RelativePathTreeprocessor)
     return processor.files.get_file_from_path(path).url_relative_to(processor.file)