animate_it 0.4.0 → 0.5.0

data/lib/animate_it/embed_styles.rb

@@ -0,0 +1,126 @@
+module AnimateIt
+  module EmbedStyles
+    module_function
+
+    def chapter_source
+      @chapter_source ||= <<~CSS.freeze
+        .animate-it-chapters {
+          --animate-it-progress-color: #28d2bc;
+          --animate-it-progress-width: 2.5px;
+          --animate-it-active-glow: 0 0 10px 2px rgb(40 210 188 / 42%);
+          --animate-it-chapter-color: #414b57;
+          --animate-it-chapter-background: #fff;
+          --animate-it-chapter-shadow: 0 4px 12px rgb(39 47 57 / 8%);
+          --animate-it-chapter-font: 700 14px/1 system-ui, sans-serif;
+          --animate-it-chapter-gap: 14px;
+          --animate-it-chapter-height: 44px;
+          --animate-it-carousel-distance: 108%;
+          --animate-it-carousel-scale: .84;
+          --animate-it-carousel-opacity: .68;
+          --animate-it-carousel-duration: 180ms;
+          display: grid;
+          grid-template-columns: repeat(var(--animate-it-chapter-count, 4), minmax(0, 1fr));
+          gap: var(--animate-it-chapter-gap);
+        }
+        .animate-it-chapter--pills {
+          --animate-it-chapter-progress: 0;
+          --animate-it-chapter-active: 0;
+          --animate-it-chapter-complete: 0;
+          position: relative;
+          min-width: 0;
+          min-height: 44px;
+          height: var(--animate-it-chapter-height);
+          padding: 2px;
+          border: 0;
+          border-radius: 999px;
+          appearance: none;
+          color: var(--animate-it-chapter-color);
+          background: var(--animate-it-chapter-background);
+          box-shadow: var(--animate-it-chapter-shadow);
+          cursor: pointer;
+        }
+        .animate-it-chapter--pills[data-chapter-state="current"] { box-shadow: var(--animate-it-active-glow); }
+        .animate-it-chapter--pills:focus-visible { outline: 3px solid var(--animate-it-progress-color); outline-offset: 3px; }
+        .animate-it-chapter__progress { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
+        .animate-it-chapter__progress rect {
+          fill: none;
+          stroke: var(--animate-it-progress-color);
+          stroke-width: var(--animate-it-progress-width);
+          stroke-dasharray: var(--animate-it-chapter-progress) 1;
+          stroke-opacity: clamp(0, calc(var(--animate-it-chapter-progress) * 1000), 1);
+          stroke-linecap: round;
+          vector-effect: non-scaling-stroke;
+        }
+        .animate-it-chapter__label {
+          position: relative;
+          display: flex;
+          height: 100%;
+          align-items: center;
+          justify-content: center;
+          opacity: calc(.58 + (var(--animate-it-chapter-active) * .42));
+          font: var(--animate-it-chapter-font);
+        }
+        @media (max-width: 767px) {
+          .animate-it-chapters--mobile-carousel { position: relative; display: block; height: var(--animate-it-chapter-height); overflow: clip; }
+          .animate-it-chapters--mobile-carousel .animate-it-chapter--pills {
+            position: absolute;
+            left: 50%;
+            width: min(31.25%, 122px);
+            transition: transform var(--animate-it-carousel-duration) ease, opacity var(--animate-it-carousel-duration) ease;
+          }
+          .animate-it-chapters--mobile-carousel .animate-it-chapter--pills[data-chapter-position="previous"] { transform: translateX(calc(-50% - var(--animate-it-carousel-distance))) scale(var(--animate-it-carousel-scale)); opacity: var(--animate-it-carousel-opacity); }
+          .animate-it-chapters--mobile-carousel .animate-it-chapter--pills[data-chapter-position="current"] { transform: translateX(-50%); opacity: 1; }
+          .animate-it-chapters--mobile-carousel .animate-it-chapter--pills[data-chapter-position="next"] { transform: translateX(calc(-50% + var(--animate-it-carousel-distance))) scale(var(--animate-it-carousel-scale)); opacity: var(--animate-it-carousel-opacity); }
+          .animate-it-chapters--mobile-carousel .animate-it-chapter--pills[data-chapter-position="hidden"] { visibility: hidden; pointer-events: none; opacity: 0; }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .animate-it-chapter--pills { transition: none !important; }
+        }
+      CSS
+    end
+
+    def source
+      @source ||= <<~CSS.freeze
+        #{chapter_source}
+        animate-it-embed {
+          --animate-it-crossfade-duration: 120ms;
+          position: relative;
+          display: block;
+          width: 100%;
+          background: transparent;
+        }
+        .animate-it-embed__navigation { margin-bottom: 14px; }
+        .animate-it-embed__viewport { position: relative; width: 100%; background: transparent; }
+        .animate-it-embed__poster, .animate-it-embed__shell { position: absolute; inset: 0; width: 100%; height: 100%; }
+        .animate-it-embed__poster { z-index: 2; margin: 0; opacity: 1; transition: opacity var(--animate-it-crossfade-duration) ease; pointer-events: none; }
+        .animate-it-embed__poster img { display: block; width: 100%; height: 100%; object-fit: contain; }
+        .animate-it-embed__shell { z-index: 1; overflow: hidden; opacity: 0; transition: opacity var(--animate-it-crossfade-duration) ease; background: transparent; }
+        .animate-it-embed__frame { position: absolute; top: 0; left: 0; transform-origin: top left; background: transparent; }
+        .animate-it-embed__frame iframe { display: block; border: 0; background: transparent; pointer-events: none; }
+        animate-it-embed[data-player-ready="true"] .animate-it-embed__poster { opacity: 0; }
+        animate-it-embed[data-player-ready="true"] .animate-it-embed__shell { opacity: 1; }
+        .animate-it-embed__control {
+          position: absolute;
+          z-index: 4;
+          right: 12px;
+          bottom: 12px;
+          width: 44px;
+          height: 44px;
+          padding: 0;
+          border: 0;
+          border-radius: 999px;
+          color: #fff;
+          background: rgb(18 24 29 / 84%);
+          font: 700 13px/1 system-ui, sans-serif;
+          cursor: pointer;
+        }
+        .animate-it-embed__control:focus-visible { outline: 3px solid var(--animate-it-progress-color, #28d2bc); outline-offset: 3px; }
+        animate-it-embed[data-reduced-motion="true"] .animate-it-embed__navigation,
+        animate-it-embed[data-reduced-motion="true"] .animate-it-embed__control { display: none; }
+        @media (prefers-reduced-motion: reduce) {
+          .animate-it-embed__poster, .animate-it-embed__shell { transition: none; }
+        }
+      CSS
+    end
+  end
+end

data/lib/animate_it/engine.rb

@@ -29,7 +29,10 @@ module AnimateIt
     end
 
     initializer "animate_it.embed_helper" do
-      ActiveSupport.on_load(:action_view) { include AnimateIt::EmbedHelper }
+      ActiveSupport.on_load(:action_view) do
+        include AnimateIt::EmbedHelper
+        include AnimateIt::ChapterNavigationHelper
+      end
     end
   end
 end

data/lib/animate_it/player_manifest.rb

@@ -0,0 +1,29 @@
+module AnimateIt
+  class PlayerManifest
+    VERSION = 1
+
+    def initialize(composition)
+      @composition = composition
+    end
+
+    def as_json(*)
+      @composition.chapters.validate!
+      {
+        "version" => VERSION,
+        "id" => @composition.id,
+        "width" => @composition.width,
+        "height" => @composition.height,
+        "fps" => @composition.fps,
+        "duration" => @composition.duration_in_frames,
+        "chapters" => @composition.chapters.as_json,
+        "playback" => @composition.public_player_options.transform_keys { |key| camelize(key) }
+      }
+    end
+
+    private
+
+    def camelize(key)
+      key.to_s.gsub(/_([a-z])/) { Regexp.last_match(1).upcase }
+    end
+  end
+end

data/lib/animate_it/runtime/runtime.js

@@ -74,6 +74,51 @@
     };
   }
 
+  function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+  }
+
+  function createChapterState(manifest, root) {
+    var chapters = (manifest && manifest.chapters) || [];
+    var elements = chapters.length ? Array.prototype.slice.call(root.querySelectorAll("[data-animate-it-chapter]")) : [];
+    var lastName = null;
+
+    function setElementState(el, chapter, index, currentIndex, progress) {
+      var state = currentIndex < 0 || index > currentIndex ? "upcoming" : (index < currentIndex ? "completed" : "current");
+      var position = currentIndex < 0 ? "hidden" :
+        (index === currentIndex ? "current" : (index === currentIndex - 1 ? "previous" : (index === currentIndex + 1 ? "next" : "hidden")));
+      var chapterProgress = state === "completed" ? 1 : (state === "current" ? progress : 0);
+      el.dataset.chapterState = state;
+      el.dataset.chapterPosition = position;
+      el.style.setProperty("--animate-it-chapter-progress", String(chapterProgress));
+      el.style.setProperty("--animate-it-chapter-active", state === "current" ? "1" : "0");
+      el.style.setProperty("--animate-it-chapter-complete", state === "completed" ? "1" : "0");
+      if (el.tagName === "BUTTON") {
+        if (state === "current") el.setAttribute("aria-current", "step");
+        else el.removeAttribute("aria-current");
+      }
+    }
+
+    function update(frame) {
+      var currentIndex = -1;
+      for (var i = chapters.length - 1; i >= 0; i -= 1) {
+        if (frame >= chapters[i].startFrame) { currentIndex = i; break; }
+      }
+      var current = currentIndex >= 0 ? chapters[currentIndex] : null;
+      var progress = current ? (current.durationFrames === 1 ? 1 :
+        clamp((frame - current.startFrame) / (current.durationFrames - 1), 0, 1)) : 0;
+      elements.forEach(function (el) {
+        var index = chapters.findIndex(function (chapter) { return chapter.name === el.dataset.animateItChapter; });
+        if (index >= 0) setElementState(el, chapters[index], index, currentIndex, progress);
+      });
+      var changed = (current && current.name) !== lastName;
+      lastName = current && current.name;
+      return { chapter: current, index: currentIndex, progress: progress, changed: changed };
+    }
+
+    return { update: update, chapters: chapters };
+  }
+
   // Pause native CSS/Web Animations and seek them to deterministic frame
   // time. Layers use scene-local time so delayed scenes start at zero.
   var animationCache = typeof WeakMap === "undefined" ? null : new WeakMap();
@@ -100,7 +145,8 @@
     return animations;
   }
 
-  function createPlayer(doc, root) {
+  function createPlayer(doc, root, options) {
+    var settings = options || {};
     var duration = doc.duration;
     var varBindings = [];
     var group;
@@ -140,9 +186,12 @@
     });
 
     var current = -1;
+    var chapterState = createChapterState(settings.manifest, root);
+    var currentChapter = null;
 
     function setFrame(n) {
       var frame = Math.max(0, Math.min(duration - 1, Math.round(Number(n) || 0)));
+      var frameChanged = frame !== current;
       current = frame;
 
       layers.forEach(function (layer) {
@@ -180,6 +229,8 @@
       } else {
         seekAnimations(root, frame, doc.fps);
       }
+      currentChapter = chapterState.update(frame);
+      if (frameChanged && typeof settings.onFrame === "function") settings.onFrame(frame, currentChapter);
       return frame;
     }
 
@@ -187,7 +238,8 @@
       duration: duration,
       fps: doc.fps,
       setFrame: setFrame,
-      currentFrame: function () { return current; }
+      currentFrame: function () { return current; },
+      currentChapter: function () { return currentChapter; }
     };
   }
 
@@ -204,6 +256,7 @@
     var animationFrame = null;
     var startedAt = 0;
     var startedFrame = frame;
+    var emit = typeof settings.onEvent === "function" ? settings.onEvent : function () {};
 
     audios.forEach(function (el) {
       var gain = Number(el.dataset.gain);
@@ -269,10 +322,12 @@
     }
 
     function pause() {
+      var wasPlaying = animationFrame !== null;
       if (animationFrame !== null) global.cancelAnimationFrame(animationFrame);
       animationFrame = null;
       syncAudio(frame, false);
       updateButton(false);
+      if (wasPlaying) emit("pause", { frame: frame });
     }
 
     function seek(nextFrame) {
@@ -294,6 +349,7 @@
       if (next >= duration) {
         if (!shouldLoop) {
           frame = player.setFrame(duration - 1);
+          emit("ended", { frame: frame });
           pause();
           return;
         }
@@ -316,8 +372,10 @@
       startedFrame = frame;
       updateButton(true);
       animationFrame = global.requestAnimationFrame(tick);
+      emit("play", { frame: frame });
       return syncAudio(frame, true).catch(function (error) {
         pause();
+        emit("error", { message: error && error.message ? error.message : "AnimateIt playback failed" });
         throw error;
       });
     }
@@ -339,10 +397,56 @@
     };
   }
 
+  function waitForReady(root) {
+    var fonts = root.fonts && root.fonts.ready ? root.fonts.ready.catch(function () {}) : Promise.resolve();
+    var images = Array.prototype.slice.call(root.images || []).filter(function (image) {
+      if (image.hidden) return false;
+      if (typeof image.getBoundingClientRect !== "function") return true;
+      var rect = image.getBoundingClientRect();
+      return rect.width > 0 && rect.height > 0;
+    }).map(function (image) {
+      if (image.complete) {
+        if (image.naturalWidth === 0) return Promise.reject(new Error("AnimateIt visible image failed to load"));
+        return typeof image.decode === "function" ? image.decode() : Promise.resolve();
+      }
+      return new Promise(function (resolve, reject) {
+        image.addEventListener("load", resolve, { once: true });
+        image.addEventListener("error", function () {
+          reject(new Error("AnimateIt visible image failed to load"));
+        }, { once: true });
+      });
+    });
+    return Promise.all([fonts, Promise.all(images)]).then(function () {
+      return new Promise(function (resolve) {
+        global.requestAnimationFrame(function () { global.requestAnimationFrame(resolve); });
+      });
+    });
+  }
+
   function boot() {
     var script = document.querySelector("script[data-animate-it-tracks]");
     if (!script) return;
-    var player = createPlayer(JSON.parse(script.textContent), document);
+    var manifestScript = document.querySelector("script[data-animate-it-manifest]");
+    var manifest = manifestScript ? JSON.parse(manifestScript.textContent) : { chapters: [] };
+    var currentChapterName = null;
+    function emit(name, detail) {
+      var payload = Object.assign({ frame: player ? player.currentFrame() : 0 }, detail || {});
+      if (typeof global.CustomEvent === "function") global.dispatchEvent(new CustomEvent("animateit:" + name, { detail: payload }));
+      if (global.parent && global.parent !== global && global.location) {
+        global.parent.postMessage({ namespace: "animate-it", event: name, detail: payload }, global.location.origin);
+      }
+    }
+    var player = createPlayer(JSON.parse(script.textContent), document, {
+      manifest: manifest,
+      onFrame: function (frame, chapterState) {
+        var chapter = chapterState.chapter;
+        emit("framechange", { frame: frame, chapter: chapter && chapter.name, progress: chapterState.progress });
+        if (chapterState.changed) {
+          currentChapterName = chapter && chapter.name;
+          emit("chapterchange", { frame: frame, chapter: currentChapterName, progress: chapterState.progress });
+        }
+      }
+    });
     player.setFrame(0);
     global.__animateIt = { totalFrames: player.duration, setFrame: player.setFrame };
     global.AnimateItRuntime = player;
@@ -352,13 +456,41 @@
         Array.prototype.slice.call(document.querySelectorAll("audio[data-from-frame]")),
         {
           loop: script.dataset.animateItLoop === "true",
-          button: document.querySelector("[data-animate-it-play]")
+          button: document.querySelector("[data-animate-it-play]"),
+          onEvent: emit
         }
       );
+      transport.seekChapter = function (name) {
+        var chapter = (manifest.chapters || []).find(function (item) { return item.name === String(name); });
+        if (!chapter) throw new Error("Unknown AnimateIt chapter: " + name);
+        return transport.seek(chapter.startFrame);
+      };
       global.AnimateItTransport = transport;
+      global.AnimateItPlayer = transport;
+      global.addEventListener("message", function (event) {
+        if (event.source !== global.parent || !global.location || event.origin !== global.location.origin) return;
+        var data = event.data || {};
+        if (data.namespace !== "animate-it" || data.command === undefined) return;
+        try {
+          if (data.command === "play") transport.play().catch(function () {});
+          else if (data.command === "pause") transport.pause();
+          else if (data.command === "toggle") transport.toggle().catch(function () {});
+          else if (data.command === "seek") transport.seek(data.frame);
+          else if (data.command === "seekChapter") transport.seekChapter(data.chapter);
+        } catch (error) {
+          emit("error", { message: error.message });
+        }
+      });
       if (script.dataset.animateItAutoplay === "true") transport.play().catch(function () {});
     }
-    document.documentElement.dataset.animateItReady = "1";
+    waitForReady(document)
+      .then(function () {
+        document.documentElement.dataset.animateItReady = "1";
+        emit("ready", { manifest: manifest, chapter: currentChapterName });
+      })
+      .catch(function (error) {
+        emit("error", { message: error && error.message ? error.message : "AnimateIt player failed readiness" });
+      });
   }
 
   var api = {
@@ -367,6 +499,7 @@
     formatComputed: formatComputed,
     interpolate: interpolate,
     compileTrack: compileTrack,
+    createChapterState: createChapterState,
     seekAnimations: seekAnimations,
     createPlayer: createPlayer,
     createTransport: createTransport

data/lib/animate_it/version.rb

@@ -1,3 +1,3 @@
 module AnimateIt
-  VERSION = "0.4.0".freeze
+  VERSION = "0.5.0".freeze
 end

data/lib/animate_it.rb

@@ -1,3 +1,6 @@
+require "active_support"
+require "active_support/core_ext"
+
 require_relative "animate_it/version"
 require_relative "animate_it/errors"
 require_relative "animate_it/frame_duration"
@@ -13,6 +16,7 @@ require_relative "animate_it/timeline"
 require_relative "animate_it/registry"
 require_relative "animate_it/render_store"
 require_relative "animate_it/beats"
+require_relative "animate_it/chapters"
 require_relative "animate_it/animation"
 require_relative "animate_it/text_effects"
 require_relative "animate_it/scene"
@@ -22,6 +26,10 @@ require_relative "animate_it/tracks/layer"
 require_relative "animate_it/tracks/document"
 require_relative "animate_it/tracks/recorder"
 require_relative "animate_it/track_document_schema"
+require_relative "animate_it/player_manifest"
+require_relative "animate_it/embed_styles"
+require_relative "animate_it/chapter_navigation"
+require_relative "animate_it/embed_runtime"
 require_relative "animate_it/runtime"
 require_relative "animate_it/embed_helper"
 require_relative "animate_it/output"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: animate_it
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.5.0
 platform: ruby
 authors:
 - growth-constant
@@ -58,6 +58,7 @@ files:
 - README.md
 - app/controllers/animate_it/application_controller.rb
 - app/controllers/animate_it/audio_controller.rb
+- app/controllers/animate_it/embed_assets_controller.rb
 - app/controllers/animate_it/frames_controller.rb
 - app/controllers/animate_it/props_controller.rb
 - app/controllers/animate_it/public_players_controller.rb
@@ -90,15 +91,21 @@ files:
 - lib/animate_it/asset_manifest.rb
 - lib/animate_it/asset_renderer.rb
 - lib/animate_it/beats.rb
+- lib/animate_it/chapter_navigation.rb
+- lib/animate_it/chapters.rb
 - lib/animate_it/composition.rb
 - lib/animate_it/configuration.rb
 - lib/animate_it/easing.rb
 - lib/animate_it/embed_helper.rb
+- lib/animate_it/embed_runtime.rb
+- lib/animate_it/embed_runtime/embed.js
+- lib/animate_it/embed_styles.rb
 - lib/animate_it/engine.rb
 - lib/animate_it/errors.rb
 - lib/animate_it/frame_context.rb
 - lib/animate_it/frame_duration.rb
 - lib/animate_it/output.rb
+- lib/animate_it/player_manifest.rb
 - lib/animate_it/props_schema.rb
 - lib/animate_it/registry.rb
 - lib/animate_it/render_store.rb
@@ -121,14 +128,14 @@ files:
 - lib/generators/animate_it/install/install_generator.rb
 - lib/generators/animate_it/install/templates/animate_it.rb
 - lib/tasks/animate_it_tasks.rake
-homepage: https://github.com/growth-constant/animate_it
+homepage: https://github.com/joinbuildit/animate_it
 licenses:
 - MIT
 metadata:
-  homepage_uri: https://github.com/growth-constant/animate_it
-  source_code_uri: https://github.com/growth-constant/animate_it
-  changelog_uri: https://github.com/growth-constant/animate_it/blob/main/CHANGELOG.md
-  bug_tracker_uri: https://github.com/growth-constant/animate_it/issues
+  homepage_uri: https://github.com/joinbuildit/animate_it
+  source_code_uri: https://github.com/joinbuildit/animate_it
+  changelog_uri: https://github.com/joinbuildit/animate_it/blob/main/CHANGELOG.md
+  bug_tracker_uri: https://github.com/joinbuildit/animate_it/issues
   rubygems_mfa_required: 'true'
 rdoc_options: []
 require_paths: