@tongue-core/ui 0.1.0-rc.2 → 0.1.0-rc.3

package/README.md

@@ -38,6 +38,10 @@ player.fit(canvas.clientWidth);                                      // render a
 const bitmap = await player.preview(900, 160);                       // a thumbnail, when the workers are free
 ```
 
+The picture keeps the film's shape in whatever box the page gives the canvas: unless the page
+sets its own `object-fit`, the player sets `contain`, so a box of another shape letterboxes the
+frame instead of stretching it.
+
 A build is static files: `build.json`, `film.json`, `scenes/*.js`, `assets/…` (`tongue build`
 writes one). The player fetches the manifests and bundles, then the asset files frames need, nearest
 the playhead first, each checked against its hash. **A frame is drawn only once every file it needs

package/dist/player/player.js

@@ -31,6 +31,10 @@ const SETTLE_MS = 90;
 export function createPlayer(options) {
     const canvas = options.canvas;
     const ctx = canvas.getContext("2d");
+    // The picture keeps the film's shape in whatever box the page gives the canvas: letterboxed,
+    // never stretched. A page that sets its own object-fit keeps it.
+    if (canvas.style.objectFit === "")
+        canvas.style.objectFit = "contain";
     if (!ctx)
         throw new Error("The player needs a canvas with a 2D context.");
     const pool = new WorkerPool({ workerUrl: options.workerUrl, workers: options.workers ?? defaultWorkers() });

package/dist/react/timeline.d.ts

@@ -46,6 +46,7 @@ export declare const Clip: import("react").NamedExoticComponent<Styled & {
 /** A transition: the stretch where two clips overlap. */
 export declare const Transition: import("react").NamedExoticComponent<Styled & {
     readonly transition: TimelineTransition;
+    readonly title?: string;
     readonly children?: ReactNode;
 }>;
 /** The playhead. It moves without React: its frame is a CSS variable on itself, set as reports
@@ -88,6 +89,7 @@ export declare const Timeline: {
     }>;
     Transition: import("react").NamedExoticComponent<Styled & {
         readonly transition: TimelineTransition;
+        readonly title?: string;
         readonly children?: ReactNode;
     }>;
     Playhead: typeof Playhead;

package/dist/react/timeline.js

@@ -169,7 +169,7 @@ export const Clip = memo(function Clip(props) {
 /** A transition: the stretch where two clips overlap. */
 export const Transition = memo(function Transition(props) {
     const t = props.transition;
-    return (_jsx("div", { "data-tl-transition": "", "data-style": t.style, className: props.className, style: { position: "absolute", top: 0, bottom: 0, left: px("--t-start"), width: px("--t-frames"), contain: "strict", "--t-start": t.start, "--t-frames": t.end - t.start, pointerEvents: "none", ...props.style }, children: props.children }));
+    return (_jsx("div", { "data-tl-transition": "", "data-style": t.style, title: props.title, className: props.className, style: { position: "absolute", top: 0, bottom: 0, left: px("--t-start"), width: px("--t-frames"), contain: "strict", "--t-start": t.start, "--t-frames": t.end - t.start, pointerEvents: "none", ...props.style }, children: props.children }));
 });
 /** The playhead. It moves without React: its frame is a CSS variable on itself, set as reports
  *  come in. When it moves out of view (playing on, a jump) the view follows it (`follow`, on by

package/dist/timeline/model.d.ts

@@ -15,6 +15,8 @@ export interface TimelineClip {
 export interface TimelineTransition {
     readonly row: string;
     readonly style: TransitionDoc["style"];
+    /** Everything film.json says about it: a dissolve's noise and edge, a wipe's direction. */
+    readonly doc: TransitionDoc;
     readonly from: string;
     readonly to: string;
     /** Film frames [start, end). */

package/dist/timeline/model.js

@@ -31,7 +31,7 @@ export function timelineModel(doc) {
         const transitions = track.transitions.map((t) => {
             edges.add(t.start);
             edges.add(t.end);
-            return { row: track.id, style: t.style, from: t.from, to: t.to, start: t.start, end: t.end };
+            return { row: track.id, style: t.style, doc: t, from: t.from, to: t.to, start: t.start, end: t.end };
         });
         return { id: track.id, kind: track.kind, clips: rowClips, transitions };
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tongue-core/ui",
-  "version": "0.1.0-rc.2",
+  "version": "0.1.0-rc.3",
   "description": "The pieces of a film's interface: the player, the timeline's state and geometry, and unstyled React primitives. Build your own studio from them.",
   "type": "module",
   "license": "MIT",
@@ -36,9 +36,9 @@
     "README.md"
   ],
   "dependencies": {
-    "@tongue-core/engine": "0.1.0-rc.2",
-    "@tongue-core/film": "0.1.0-rc.2",
-    "@tongue-core/project": "0.1.0-rc.2"
+    "@tongue-core/engine": "0.1.0-rc.3",
+    "@tongue-core/film": "0.1.0-rc.3",
+    "@tongue-core/project": "0.1.0-rc.3"
   },
   "peerDependencies": {
     "@effect/atom-react": "^4.0.6",