RubyGems - animate_it - Versions diffs - 0.1.0 - Mend

animate_it 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

checksums.yaml +7 -0
data/CHANGELOG.md +24 -0
data/MIT-LICENSE +21 -0
data/README.md +166 -0
data/app/controllers/animate_it/application_controller.rb +73 -0
data/app/controllers/animate_it/audio_controller.rb +31 -0
data/app/controllers/animate_it/frames_controller.rb +22 -0
data/app/controllers/animate_it/props_controller.rb +10 -0
data/app/controllers/animate_it/renders_controller.rb +82 -0
data/app/controllers/animate_it/studio_controller.rb +17 -0
data/app/jobs/animate_it/application_job.rb +6 -0
data/app/jobs/animate_it/render_job.rb +28 -0
data/app/views/animate_it/frames/filmstrip.html.haml +65 -0
data/app/views/animate_it/frames/fragment.html.haml +6 -0
data/app/views/animate_it/frames/show.html.haml +54 -0
data/app/views/animate_it/props/_form.html.haml +3 -0
data/app/views/animate_it/props/update.html.haml +8 -0
data/app/views/animate_it/renders/create.html.haml +9 -0
data/app/views/animate_it/renders/show.html.haml +10 -0
data/app/views/animate_it/studio/_composition_list.html.haml +7 -0
data/app/views/animate_it/studio/_preview_pane.html.haml +35 -0
data/app/views/animate_it/studio/_props_pane.html.haml +14 -0
data/app/views/animate_it/studio/_studio_script.html.haml +273 -0
data/app/views/animate_it/studio/_studio_styles.html.haml +284 -0
data/app/views/animate_it/studio/_timeline_lanes.html.haml +34 -0
data/app/views/animate_it/studio/index.html.haml +8 -0
data/app/views/animate_it/studio/show.html.haml +23 -0
data/app/views/layouts/animate_it/application.html.haml +17 -0
data/config/routes.rb +12 -0
data/exe/render_animate_it_video +53 -0
data/lib/animate_it/animation.rb +189 -0
data/lib/animate_it/animation_helpers.rb +86 -0
data/lib/animate_it/asset_renderer.rb +49 -0
data/lib/animate_it/beats.rb +61 -0
data/lib/animate_it/composition.rb +354 -0
data/lib/animate_it/configuration.rb +27 -0
data/lib/animate_it/easing.rb +40 -0
data/lib/animate_it/engine.rb +31 -0
data/lib/animate_it/errors.rb +4 -0
data/lib/animate_it/frame_context.rb +28 -0
data/lib/animate_it/frame_duration.rb +13 -0
data/lib/animate_it/output.rb +57 -0
data/lib/animate_it/props_schema.rb +49 -0
data/lib/animate_it/registry.rb +30 -0
data/lib/animate_it/render_store.rb +189 -0
data/lib/animate_it/scene.rb +237 -0
data/lib/animate_it/style.rb +23 -0
data/lib/animate_it/timeline.rb +81 -0
data/lib/animate_it/timing.rb +63 -0
data/lib/animate_it/units.rb +38 -0
data/lib/animate_it/version.rb +3 -0
data/lib/animate_it/video_renderer.rb +219 -0
data/lib/animate_it/view_helpers.rb +84 -0
data/lib/animate_it.rb +93 -0
data/lib/generators/animate_it/install/install_generator.rb +40 -0
data/lib/generators/animate_it/install/templates/animate_it.rb +8 -0
data/lib/tasks/animate_it_tasks.rake +83 -0
metadata +120 -0

data/app/views/animate_it/studio/_preview_pane.html.haml ADDED Viewed

@@ -0,0 +1,35 @@
+%section.animate-it-preview-pane
+  %header.animate-it-header
+    %div
+      %h2= composition.id
+      %p= "#{composition.width}x#{composition.height}, #{composition.fps}fps, #{composition.duration_in_frames} frames"
+    .animate-it-frame-readout
+      %strong#animate_it_frame_label 0
+      %span= "/ #{last_frame}"
+  %turbo-frame#animate_it_preview.animate-it-preview
+    %iframe#animate_it_frame{
+      title: "#{composition.id} frame preview",
+      src: "#{frame_base_url}/0?pp=disable",
+      style: "width: min(100%, #{composition.width}px); aspect-ratio: #{composition.width} / #{composition.height};"
+    }
+  %section.animate-it-timeline{ aria: { label: "Frame controls" } }
+    %input#animate_it_scrubber{ type: "range", min: 0, max: last_frame, value: 0, step: 1 }
+    .animate-it-controls
+      %button{ type: "button", data: { motion_step: "-1" } } Previous Frame
+      %button#animate_it_play{ type: "button" } Play
+      %button{ type: "button", data: { motion_step: "1" } } Next Frame
+      %label
+        Frame
+        %input#animate_it_frame_input{ type: "number", min: 0, max: last_frame, value: 0 }
+      %label
+        Speed
+        %select#animate_it_speed
+          %option{ value: "0.25" } 0.25x
+          %option{ value: "0.5" } 0.5x
+          %option{ value: "1", selected: true } 1x
+          %option{ value: "2" } 2x
+  = render "timeline_lanes", composition: composition

data/app/views/animate_it/studio/_props_pane.html.haml ADDED Viewed

@@ -0,0 +1,14 @@
+%aside.animate-it-props
+  %h2 Props
+  %turbo-frame#animate_it_props
+    = render "animate_it/props/form", composition:, props_json:
+  %turbo-frame#animate_it_render_result
+    = form_with url: animate_it_path("/compositions/#{composition.id}/renders"), method: :post, html: { style: "margin-top: 1rem;" }, data: { turbo_frame: "animate_it_render_result" } do
+      = button_tag "Render Video", type: "submit", data: { turbo_submits_with: "Rendering..." }
+  %section.animate-it-renders
+    %h3 Rendering jobs
+    = turbo_stream_from AnimateIt::RenderStore::CHANNEL
+    %p.animate-it-stream-status Turbo Stream connected for render progress.
+    = AnimateIt::RenderStore.html.html_safe

data/app/views/animate_it/studio/_studio_script.html.haml ADDED Viewed

@@ -0,0 +1,273 @@
+:javascript
+  (() => {
+    const studio = document.querySelector(".animate-it-studio");
+    if (!studio) return;
+    const frameBaseUrl = studio.dataset.frameBaseUrl;
+    const duration = Number(studio.dataset.duration);
+    const fps = Number(studio.dataset.fps);
+    const lastFrame = duration - 1;
+    const iframe = document.getElementById("animate_it_frame");
+    const scrubber = document.getElementById("animate_it_scrubber");
+    const frameInput = document.getElementById("animate_it_frame_input");
+    const frameLabel = document.getElementById("animate_it_frame_label");
+    const playButton = document.getElementById("animate_it_play");
+    const speedInput = document.getElementById("animate_it_speed");
+    const propsInput = document.getElementById("animate_it_props_json");
+    const clampFrame = (value) => Math.max(0, Math.min(lastFrame, Number(value) || 0));
+    const initialParams = new URLSearchParams(window.location.search);
+    let frame = clampFrame(initialParams.get("frame"));
+    let timer = null;
+    const syncFrameUrl = () => {
+      const url = new URL(window.location.href);
+      url.searchParams.set("frame", frame);
+      window.history.replaceState(window.history.state, "", url);
+    };
+    const propsQuery = () => {
+      const params = new URLSearchParams({ pp: "disable" });
+      if (propsInput && propsInput.value.trim() !== "") {
+        params.set("props_json", propsInput.value);
+      }
+      return `?${params.toString()}`;
+    };
+    // --- Persistent-document rendering ------------------------------------
+    // The first frame loads the full styled document into the iframe once, so
+    // its <head>/stylesheets are parsed a single time. Every later frame is
+    // applied by fetching the lightweight `?only=body` fragment and swapping
+    // it into the live DOM — no document teardown, so no reload flash.
+    let docReady = false;
+    iframe.addEventListener("load", () => { docReady = true; });
+    const fragmentUrl = (n) => `${frameBaseUrl}/${n}${propsQuery()}&only=body`;
+    const fullReload = (n) => {
+      docReady = false;
+      iframe.src = `${frameBaseUrl}/${n}${propsQuery()}`;
+    };
+    // Fragment cache (url -> html) plus in-flight de-duplication, so a frame is
+    // fetched at most once. A cached frame applies synchronously — no network
+    // wait, no first-visit hitch. Keyed by url, which includes the props, so a
+    // props change naturally misses; we also clear it on props edits below.
+    const PREFETCH_AHEAD = 16;
+    const fragmentCache = new Map();
+    const pending = new Map();
+    const requestFragment = (url) => {
+      if (fragmentCache.has(url)) return Promise.resolve(fragmentCache.get(url));
+      if (pending.has(url)) return pending.get(url);
+      const p = fetch(url)
+        .then((res) => { if (!res.ok) throw new Error(`fragment ${res.status}`); return res.text(); })
+        .then((html) => { fragmentCache.set(url, html); pending.delete(url); return html; })
+        .catch((err) => { pending.delete(url); throw err; });
+      pending.set(url, p);
+      return p;
+    };
+    const prefetchAhead = (n) => {
+      for (let i = 1; i <= PREFETCH_AHEAD; i++) {
+        const f = n + i;
+        if (f > lastFrame) break;
+        requestFragment(fragmentUrl(f)).catch(() => {}); // fire-and-forget warm-up
+      }
+    };
+    const applyFragment = (html) => {
+      const target = iframe.contentDocument && iframe.contentDocument.querySelector(".animate-it-frame");
+      if (!target) return false;
+      target.outerHTML = html;
+      return true;
+    };
+    // Latest-wins: a slow fetch for an earlier frame must not overwrite a
+    // newer one that already painted.
+    let paintToken = 0;
+    const paintFragment = (n) => {
+      const token = ++paintToken;
+      const url = fragmentUrl(n);
+      if (fragmentCache.has(url)) {
+        if (!applyFragment(fragmentCache.get(url))) fullReload(n);
+        prefetchAhead(n);
+        return;
+      }
+      requestFragment(url)
+        .then((html) => {
+          if (token !== paintToken) return; // superseded by a newer frame
+          if (!applyFragment(html)) fullReload(n);
+          prefetchAhead(n);
+        })
+        .catch(() => { if (token === paintToken) fullReload(n); });
+    };
+    const renderFrame = (n) => {
+      if (docReady) paintFragment(n);
+      else fullReload(n); // bootstrap (or recover) with the full document
+    };
+    const playheads = document.querySelectorAll("[data-animate-it-playhead]");
+    const audios = Array.from(document.querySelectorAll("audio[data-from-frame]"));
+    // Resolve each segment's window once. A non-positive duration means "active
+    // to the end" — matches Timeline::Segment#active_at? on the Ruby side.
+    const audioWindow = (el) => {
+      const start = Number(el.dataset.fromFrame) || 0;
+      const rawLen = Number(el.dataset.durationFrames);
+      const len = rawLen > 0 ? rawLen : duration - start;
+      return { start, len };
+    };
+    // Background beds loop to cover their (possibly file-shorter) window;
+    // one-shot SFX self-limit so a long file can't bleed past its few frames
+    // even when the frame loop lurches behind real time.
+    audios.forEach((el) => {
+      const { len } = audioWindow(el);
+      const isBed = el.dataset.track === "background";
+      el.loop = isBed;
+      el.volume = Math.min(1, Math.max(0, Number(el.dataset.gain ?? 1)));
+      // currentTime is seeked to (frame - start)/fps, so it reads 0 at the
+      // window start; the clip is done once it passes the window length.
+      el.addEventListener("timeupdate", () => {
+        if (isBed) return;
+        if (el.currentTime >= len / fps && !el.paused) el.pause();
+      });
+    });
+    const updatePlayheads = (currentFrame) => {
+      const pct = duration <= 1 ? 0 : (currentFrame / (duration - 1)) * 100;
+      playheads.forEach((el) => { el.style.left = `${pct}%`; });
+    };
+    // Audio is audible only while actually playing — seeking/scrubbing is
+    // silent. Each element plays only inside its own window, seeked to the
+    // matching offset, so you hear exactly what belongs at the current frame.
+    const syncAudio = (currentFrame, isPlaying) => {
+      for (const el of audios) {
+        const { start, len } = audioWindow(el);
+        const within = currentFrame >= start && currentFrame < start + len;
+        if (within && isPlaying) {
+          // Seek only on (re)start — when the clip is paused. Once it's
+          // playing, leave it on its own real-time clock: re-seeking every
+          // frame to chase the setInterval-driven frame counter (which lags
+          // real time) is what chops the audio.
+          if (el.paused) {
+            el.currentTime = (currentFrame - start) / fps;
+            el.play().catch(() => {});
+          }
+        } else if (!el.paused) {
+          el.pause();
+        }
+      }
+    };
+    const setFrame = (nextFrame, { keepAudioState = false } = {}) => {
+      frame = clampFrame(nextFrame);
+      scrubber.value = frame;
+      frameInput.value = frame;
+      frameLabel.textContent = frame;
+      renderFrame(frame);
+      syncFrameUrl();
+      updatePlayheads(frame);
+      syncAudio(frame, keepAudioState && timer !== null);
+    };
+    const stop = () => {
+      if (timer) window.cancelAnimationFrame(timer);
+      timer = null;
+      playButton.textContent = "Play";
+      audios.forEach((el) => { if (!el.paused) el.pause(); });
+    };
+    // Wall-clock playback. The frame is derived from elapsed real time, so the
+    // picture skips frames it can't keep up with rather than the clock slipping
+    // behind — and audio (on its own real clock) stays in sync. Morphing the
+    // body in place is fast and needs no load-gating, so the loop stays simple.
+    const play = () => {
+      stop();
+      playButton.textContent = "Pause";
+      const speed = Number(speedInput.value) || 1;
+      const startFrame = frame >= lastFrame ? 0 : frame;
+      const startWall = performance.now();
+      const tick = () => {
+        if (timer === null) return;
+        const next = clampFrame(Math.floor(startFrame + ((performance.now() - startWall) / 1000) * fps * speed));
+        if (next !== frame) setFrame(next, { keepAudioState: true });
+        if (next >= lastFrame) { stop(); return; }
+        timer = window.requestAnimationFrame(tick);
+      };
+      timer = window.requestAnimationFrame(tick);
+      syncAudio(frame, true);
+    };
+    scrubber.addEventListener("input", (event) => setFrame(event.target.value));
+    frameInput.addEventListener("change", (event) => setFrame(event.target.value));
+    propsInput?.addEventListener("change", () => {
+      fragmentCache.clear();
+      pending.clear();
+      setFrame(frame);
+    });
+    document.querySelectorAll("[data-motion-step]").forEach((button) => {
+      button.addEventListener("click", () => {
+        stop();
+        setFrame(frame + Number(button.dataset.motionStep));
+      });
+    });
+    document.querySelectorAll("[data-motion-seek]").forEach((el) => {
+      el.addEventListener("click", () => {
+        stop();
+        setFrame(Number(el.dataset.motionSeek));
+      });
+    });
+    playButton.addEventListener("click", () => {
+      if (timer) {
+        stop();
+      } else {
+        play();
+      }
+    });
+    window.addEventListener("keydown", (event) => {
+      // Only the props textarea is real text entry — let it keep every key.
+      // The scrubber/number/select shouldn't swallow the transport shortcuts.
+      if (event.target.matches("textarea")) return;
+      if (event.key === " ") {
+        // Toggle directly and drop focus first: calling playButton.click()
+        // while the button (or scrubber) is focused lets the browser also
+        // natively activate it on Space, double-toggling to a no-op.
+        event.preventDefault();
+        if (document.activeElement && document.activeElement.blur) document.activeElement.blur();
+        timer === null ? play() : stop();
+        return;
+      }
+      // Arrows: defer to native behavior when a control is focused (range /
+      // number / select all move on their own), step frames otherwise.
+      if (event.target.matches("input, select")) return;
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        stop();
+        setFrame(frame - 1);
+      }
+      if (event.key === "ArrowRight") {
+        event.preventDefault();
+        stop();
+        setFrame(frame + 1);
+      }
+    });
+    window.AnimateItStudio = {
+      setFrame,
+      currentFrame: () => frame
+    };
+    setFrame(frame);
+  })();

data/app/views/animate_it/studio/_studio_styles.html.haml ADDED Viewed

@@ -0,0 +1,284 @@
+:css
+  .animate-it-studio {
+    min-height: 100vh;
+    display: grid;
+    grid-template-columns: 17rem minmax(30rem, 1fr) 24rem;
+    gap: 1rem;
+    padding: 1rem;
+    font-family: system-ui, sans-serif;
+    background: #f8fafc;
+    color: #111827;
+  }
+  .animate-it-sidebar,
+  .animate-it-preview-pane,
+  .animate-it-props {
+    background: #fff;
+    border: 1px solid #e5e7eb;
+    border-radius: 1rem;
+    padding: 1rem;
+  }
+  .animate-it-sidebar h1,
+  .animate-it-props h2,
+  .animate-it-header h2 {
+    margin-top: 0;
+  }
+  .animate-it-header {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+    align-items: start;
+    margin-bottom: 1rem;
+  }
+  .animate-it-header p {
+    margin: 0.25rem 0 0;
+    color: #6b7280;
+  }
+  .animate-it-frame-readout {
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+    color: #6b7280;
+  }
+  .animate-it-frame-readout strong {
+    display: block;
+    font-size: 2rem;
+    color: #111827;
+  }
+  .animate-it-preview {
+    position: relative;
+    display: block;
+    border-radius: 0.75rem;
+    overflow: visible;
+    background:
+      linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
+      linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
+      linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
+    background-color: #f8fafc;
+    background-position: 0 0, 0 12px, 12px -12px, -12px 0;
+    background-size: 24px 24px;
+    border: 1px solid #d1d5db;
+    padding: 12px;
+  }
+  .animate-it-preview::before {
+    content: "video frame boundary";
+    position: absolute;
+    top: -0.75rem;
+    left: 1.25rem;
+    z-index: 2;
+    padding: 0 0.4rem;
+    background: #fff;
+    color: #dc2626;
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+  .animate-it-preview iframe {
+    display: block;
+    border: 3px dashed #ef4444;
+    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.25), 0 18px 40px rgba(15, 23, 42, 0.16);
+    background: transparent;
+  }
+  .animate-it-timeline {
+    margin-top: 1rem;
+    display: grid;
+    gap: 0.75rem;
+  }
+  #animate_it_scrubber {
+    width: 100%;
+  }
+  .animate-it-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+  .animate-it-controls button,
+  .animate-it-controls input,
+  .animate-it-controls select,
+  .animate-it-props button {
+    font: inherit;
+    border: 1px solid #d1d5db;
+    border-radius: 0.5rem;
+    padding: 0.45rem 0.65rem;
+    background: #fff;
+  }
+  .animate-it-controls button:hover,
+  .animate-it-props button:hover {
+    background: #f3f4f6;
+  }
+  .animate-it-controls label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    color: #4b5563;
+  }
+  #animate_it_frame_input {
+    width: 5rem;
+  }
+  #animate_it_props_json {
+    width: 100%;
+    min-height: 19rem;
+    box-sizing: border-box;
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 0.875rem;
+    border: 1px solid #d1d5db;
+    border-radius: 0.75rem;
+    padding: 0.75rem;
+  }
+  .animate-it-renders {
+    margin-top: 1.25rem;
+    min-width: 0;
+  }
+  .animate-it-renders h3 {
+    margin: 0 0 0.5rem;
+    font-size: 1rem;
+  }
+  .animate-it-stream-status {
+    margin: 0 0 0.75rem;
+    color: #059669;
+    font-size: 0.85rem;
+  }
+  .animate-it-render-row {
+    display: grid;
+    gap: 0.35rem;
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    padding: 0.75rem;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.75rem;
+    background: #f9fafb;
+    font-size: 0.9rem;
+  }
+  .animate-it-render-row + .animate-it-render-row {
+    margin-top: 0.5rem;
+  }
+  .animate-it-render-row progress {
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    display: block;
+  }
+  .animate-it-render-row code,
+  .animate-it-render-path {
+    display: block;
+    max-width: 100%;
+    min-width: 0;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+    white-space: normal;
+  }
+  .animate-it-timeline-lanes {
+    margin-top: 1.25rem;
+    border-top: 1px solid #e5e7eb;
+    padding-top: 1rem;
+  }
+  .animate-it-timeline-lanes h3 {
+    margin: 0;
+    font-size: 0.95rem;
+  }
+  .animate-it-timeline-lanes__header {
+    display: grid;
+    grid-template-columns: 7rem 1fr;
+    align-items: center;
+    margin-bottom: 0.5rem;
+  }
+  .animate-it-timeline-lanes__ruler {
+    position: relative;
+    height: 1.25rem;
+    color: #6b7280;
+    font-size: 0.7rem;
+    font-variant-numeric: tabular-nums;
+  }
+  .animate-it-timeline-lanes__tick {
+    position: absolute;
+    top: 0;
+    transform: translateX(-50%);
+    border-left: 1px solid #d1d5db;
+    padding-left: 0.25rem;
+    line-height: 1.25rem;
+  }
+  .animate-it-timeline-lanes__tick:first-child { transform: none; padding-left: 0.15rem; }
+  .animate-it-timeline-lanes__tick:last-child { transform: translateX(-100%); padding-left: 0; padding-right: 0.15rem; }
+  .animate-it-timeline-lanes__row {
+    display: grid;
+    grid-template-columns: 7rem 1fr;
+    gap: 0.5rem;
+    margin: 0.4rem 0;
+  }
+  .animate-it-timeline-lanes__label {
+    color: #4b5563;
+    font-weight: 600;
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    line-height: 2.5rem;
+  }
+  .animate-it-timeline-lanes__lane {
+    position: relative;
+    height: 2.5rem;
+    background: #f3f4f6;
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+  .animate-it-timeline-lanes__playhead {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background: #ef4444;
+    pointer-events: none;
+    transform: translateX(-1px);
+    z-index: 2;
+  }
+  .animate-it-timeline-lanes__chip {
+    position: absolute;
+    top: 0.25rem;
+    bottom: 0.25rem;
+    border: 1px solid transparent;
+    border-radius: 0.4rem;
+    padding: 0 0.6rem;
+    font: inherit;
+    font-size: 0.75rem;
+    text-align: left;
+    color: #fff;
+    cursor: pointer;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
+  }
+  .animate-it-timeline-lanes__chip:hover { filter: brightness(1.05); }
+  .animate-it-timeline-lanes__chip--scene { background: linear-gradient(135deg, #6366f1, #4338ca); }
+  .animate-it-timeline-lanes__chip--audio { background: linear-gradient(135deg, #10b981, #047857); }
+  .animate-it-timeline-lanes__chip--transition { background: linear-gradient(135deg, #f59e0b, #b45309); }
+  .animate-it-timeline-lanes__chip-name { font-weight: 700; }
+  .animate-it-timeline-lanes__chip-time { opacity: 0.85; font-variant-numeric: tabular-nums; }

data/app/views/animate_it/studio/_timeline_lanes.html.haml ADDED Viewed

@@ -0,0 +1,34 @@
+-# Visual timeline beneath the preview/scrubber. One row per track, chips
+-# positioned by from_frame / duration_in_frames. Clicking a chip seeks the
+-# scrubber via the data-motion-seek hook in _studio_script.
+- total_frames = composition.duration_in_frames
+- format_time = ->(frame) { secs = frame.to_f / composition.fps; sprintf("%d:%02d.%02d", (secs / 60).to_i, secs.to_i % 60, ((secs % 1) * 100).to_i) }
+%section.animate-it-timeline-lanes{ aria: { label: "Track timeline" } }
+  %header.animate-it-timeline-lanes__header
+    %h3 Tracks
+    .animate-it-timeline-lanes__ruler
+      - 5.times do |i|
+        - tick_frame = (total_frames * i / 4.0).round
+        %span.animate-it-timeline-lanes__tick{ style: "left: #{(i / 4.0 * 100).round(2)}%;" }
+          = format_time.call(tick_frame)
+  - composition.timeline.tracks.each do |track|
+    .animate-it-timeline-lanes__row{ data: { track: track } }
+      .animate-it-timeline-lanes__label= track.to_s
+      .animate-it-timeline-lanes__lane
+        %span.animate-it-timeline-lanes__playhead{ data: { animate_it_playhead: true } }
+        - composition.timeline.segments_for_track(track).each do |seg|
+          - dur = seg.duration_frames || (total_frames - seg.from_frame)
+          - left_pct = (seg.from_frame.to_f / total_frames * 100).round(3)
+          - width_pct = (dur.to_f / total_frames * 100).round(3)
+          - chip_label = seg.name.to_s.split("::").last
+          - chip_class = ["animate-it-timeline-lanes__chip", "animate-it-timeline-lanes__chip--#{seg.kind}"]
+          %button{ type: "button",
+                   class: chip_class,
+                   data: { motion_seek: seg.from_frame, kind: seg.kind, from: seg.from_frame, duration: dur },
+                   style: "left: #{left_pct}%; width: #{width_pct}%;",
+                   title: "#{chip_label} · #{format_time.call(seg.from_frame)} → #{format_time.call(seg.from_frame + dur)}" }
+            %span.animate-it-timeline-lanes__chip-name= chip_label
+            %span.animate-it-timeline-lanes__chip-time
+              = "#{format_time.call(seg.from_frame)} → #{format_time.call(seg.from_frame + dur)}"

data/app/views/animate_it/studio/index.html.haml ADDED Viewed

@@ -0,0 +1,8 @@
+- content_for :title, "Animate It Studio"
+%main{ style: "padding: 2rem; font-family: system-ui, sans-serif;" }
+  %h1 Animate It Studio
+  %p Registered compositions
+  %turbo-frame#animate_it_compositions
+    = render "composition_list", compositions: @compositions

data/app/views/animate_it/studio/show.html.haml ADDED Viewed

@@ -0,0 +1,23 @@
+- content_for :title, @composition.id
+= render "studio_styles"
+%main.animate-it-studio{ data: { frame_base_url: @frame_base_url, duration: @composition.duration_in_frames, fps: @composition.fps } }
+  %aside.animate-it-sidebar
+    %h1 Animate It
+    = render "composition_list", compositions: @compositions
+  = render "preview_pane", composition: @composition, frame_base_url: @frame_base_url, last_frame: @last_frame
+  = render "props_pane", composition: @composition, props_json: @props_json
+- @composition.timeline.segments.select { |seg| seg.kind == :audio }.each_with_index do |seg, idx|
+  %audio{ data: {
+            from_frame: seg.from_frame,
+            duration_frames: seg.duration_frames || 0,
+            track: seg.track,
+            gain: seg.source[:gain]
+          },
+          src: animate_it_path("/compositions/#{@composition.id}/audio/#{idx}"),
+          preload: "auto" }
+= render "studio_script"

data/app/views/layouts/animate_it/application.html.haml ADDED Viewed

@@ -0,0 +1,17 @@
+!!!
+%html{ lang: "en" }
+  %head
+    %title= content_for?(:title) ? yield(:title) : "Animate It Studio"
+    %meta{ name: "viewport", content: "width=device-width, initial-scale=1" }
+    %meta{ name: "turbo-cache-control", content: "no-cache" }
+    = csrf_meta_tags
+    -# Studio JS/CSS come from the host app's asset pipeline. Emit each tag only
+    -# when the host provides it, so the gem still renders in apps that don't run
+    -# importmap/turbo/propshaft. (The video renderer captures the filmstrip
+    -# endpoint directly and doesn't depend on this layout's assets.)
+    - if respond_to?(:javascript_importmap_tags)
+      = javascript_importmap_tags
+      = javascript_import_module_tag "@hotwired/turbo-rails"
+      = stylesheet_link_tag "application", "data-turbo-track": "reload"
+  %body
+    = yield