@tongue-core/studio 0.0.0-stage → 0.1.0-rc.1
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.
- package/README.md +38 -2
- package/assets/fonts/Inter.woff2 +0 -0
- package/assets/fonts/OFL-Inter.txt +93 -0
- package/assets/studio.css +170 -0
- package/dist/automation.d.ts +28 -0
- package/dist/automation.js +26 -0
- package/dist/config.d.ts +16 -0
- package/dist/config.js +18 -0
- package/dist/events.d.ts +12 -0
- package/dist/events.js +31 -0
- package/dist/icons.d.ts +11 -0
- package/dist/icons.js +14 -0
- package/dist/main.d.ts +1 -0
- package/dist/main.js +10 -0
- package/dist/page.d.ts +11 -0
- package/dist/page.js +14 -0
- package/dist/studio.d.ts +4 -0
- package/dist/studio.js +145 -0
- package/package.json +38 -4
package/README.md
CHANGED
|
@@ -1,3 +1,39 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @tongue-core/studio
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Tongue's studio: one film in the browser, with its player, its timeline and an inspector. Built from
|
|
4
|
+
[@tongue-core/ui](../ui) and nothing else, styled in Tongue's brand. `tongue studio` serves it.
|
|
5
|
+
|
|
6
|
+
```sh
|
|
7
|
+
tongue studio my-film # a project: built, served, rebuilt on every edit
|
|
8
|
+
tongue studio --remote https://cdn.example/films/promo/ # a build served anywhere
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
- **A project** is built (`.tongue/builds/<id>`) and served at `/build/`, in the same shape a static
|
|
12
|
+
host serves a build. Every edit rebuilds it; the studio reloads it in place (the playhead stays,
|
|
13
|
+
unchanged files aren't fetched again). A build that fails says so in the top bar, and the last
|
|
14
|
+
film stays up.
|
|
15
|
+
- **A remote build** is any folder with `build.json` (what `tongue build` writes to `dist/`), served
|
|
16
|
+
with CORS. The studio loads it exactly as it loads a local one. `?build=<url>` in the address bar
|
|
17
|
+
opens another.
|
|
18
|
+
|
|
19
|
+
What it shows: the film on a stage (a quiet "drawing…" while the frame on screen isn't the
|
|
20
|
+
playhead's, sharp); play, step, jump to edits, zoom; the timeline with a ruler you scrub, filmstrips
|
|
21
|
+
of each clip, what is loaded (the green line under the ruler) and the playhead; an inspector for the
|
|
22
|
+
selected clip (its timing, source, props and where it is written) or the film. Keys: Space plays,
|
|
23
|
+
←/→ step (Shift: a second), ↑/↓ jump between edits, Home/End, = and − zoom, 0 fits.
|
|
24
|
+
|
|
25
|
+
`window.tongueStudio` drives it from outside (an agent, a check): the frame, the state, seek, play,
|
|
26
|
+
select, whether it has settled, and a hash of any frame's pixels.
|
|
27
|
+
|
|
28
|
+
## Files
|
|
29
|
+
|
|
30
|
+
| | |
|
|
31
|
+
|---|---|
|
|
32
|
+
| `src/main.tsx` | the entry `tongue studio` bundles (with `@tongue-core/ui/player/worker`) |
|
|
33
|
+
| `src/studio.tsx` | the app: top bar, stage, transport, inspector, timeline |
|
|
34
|
+
| `src/page.ts` | the HTML that serves it, with its config (where the build is) |
|
|
35
|
+
| `src/automation.ts` | `window.tongueStudio` |
|
|
36
|
+
| `assets/` | the stylesheet and Inter (OFL) |
|
|
37
|
+
|
|
38
|
+
Checked end to end by `tools/ui-bench/studio-check.ts`: a project opened, inspected, played and
|
|
39
|
+
edited live; the same project's build opened from another origin; every frame compared with Bun's.
|
|
Binary file
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
|
|
2
|
+
|
|
3
|
+
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
|
4
|
+
This license is copied below, and is also available with a FAQ at:
|
|
5
|
+
https://scripts.sil.org/OFL
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
-----------------------------------------------------------
|
|
9
|
+
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
|
10
|
+
-----------------------------------------------------------
|
|
11
|
+
|
|
12
|
+
PREAMBLE
|
|
13
|
+
The goals of the Open Font License (OFL) are to stimulate worldwide
|
|
14
|
+
development of collaborative font projects, to support the font creation
|
|
15
|
+
efforts of academic and linguistic communities, and to provide a free and
|
|
16
|
+
open framework in which fonts may be shared and improved in partnership
|
|
17
|
+
with others.
|
|
18
|
+
|
|
19
|
+
The OFL allows the licensed fonts to be used, studied, modified and
|
|
20
|
+
redistributed freely as long as they are not sold by themselves. The
|
|
21
|
+
fonts, including any derivative works, can be bundled, embedded,
|
|
22
|
+
redistributed and/or sold with any software provided that any reserved
|
|
23
|
+
names are not used by derivative works. The fonts and derivatives,
|
|
24
|
+
however, cannot be released under any other type of license. The
|
|
25
|
+
requirement for fonts to remain under this license does not apply
|
|
26
|
+
to any document created using the fonts or their derivatives.
|
|
27
|
+
|
|
28
|
+
DEFINITIONS
|
|
29
|
+
"Font Software" refers to the set of files released by the Copyright
|
|
30
|
+
Holder(s) under this license and clearly marked as such. This may
|
|
31
|
+
include source files, build scripts and documentation.
|
|
32
|
+
|
|
33
|
+
"Reserved Font Name" refers to any names specified as such after the
|
|
34
|
+
copyright statement(s).
|
|
35
|
+
|
|
36
|
+
"Original Version" refers to the collection of Font Software components as
|
|
37
|
+
distributed by the Copyright Holder(s).
|
|
38
|
+
|
|
39
|
+
"Modified Version" refers to any derivative made by adding to, deleting,
|
|
40
|
+
or substituting -- in part or in whole -- any of the components of the
|
|
41
|
+
Original Version, by changing formats or by porting the Font Software to a
|
|
42
|
+
new environment.
|
|
43
|
+
|
|
44
|
+
"Author" refers to any designer, engineer, programmer, technical
|
|
45
|
+
writer or other person who contributed to the Font Software.
|
|
46
|
+
|
|
47
|
+
PERMISSION & CONDITIONS
|
|
48
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
|
49
|
+
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
|
50
|
+
redistribute, and sell modified and unmodified copies of the Font
|
|
51
|
+
Software, subject to the following conditions:
|
|
52
|
+
|
|
53
|
+
1) Neither the Font Software nor any of its individual components,
|
|
54
|
+
in Original or Modified Versions, may be sold by itself.
|
|
55
|
+
|
|
56
|
+
2) Original or Modified Versions of the Font Software may be bundled,
|
|
57
|
+
redistributed and/or sold with any software, provided that each copy
|
|
58
|
+
contains the above copyright notice and this license. These can be
|
|
59
|
+
included either as stand-alone text files, human-readable headers or
|
|
60
|
+
in the appropriate machine-readable metadata fields within text or
|
|
61
|
+
binary files as long as those fields can be easily viewed by the user.
|
|
62
|
+
|
|
63
|
+
3) No Modified Version of the Font Software may use the Reserved Font
|
|
64
|
+
Name(s) unless explicit written permission is granted by the corresponding
|
|
65
|
+
Copyright Holder. This restriction only applies to the primary font name as
|
|
66
|
+
presented to the users.
|
|
67
|
+
|
|
68
|
+
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
|
69
|
+
Software shall not be used to promote, endorse or advertise any
|
|
70
|
+
Modified Version, except to acknowledge the contribution(s) of the
|
|
71
|
+
Copyright Holder(s) and the Author(s) or with their explicit written
|
|
72
|
+
permission.
|
|
73
|
+
|
|
74
|
+
5) The Font Software, modified or unmodified, in part or in whole,
|
|
75
|
+
must be distributed entirely under this license, and must not be
|
|
76
|
+
distributed under any other license. The requirement for fonts to
|
|
77
|
+
remain under this license does not apply to any document created
|
|
78
|
+
using the Font Software.
|
|
79
|
+
|
|
80
|
+
TERMINATION
|
|
81
|
+
This license becomes null and void if any of the above conditions are
|
|
82
|
+
not met.
|
|
83
|
+
|
|
84
|
+
DISCLAIMER
|
|
85
|
+
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
86
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
|
87
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
|
88
|
+
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
|
89
|
+
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
|
90
|
+
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
|
91
|
+
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
92
|
+
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
|
93
|
+
OTHER DEALINGS IN THE FONT SOFTWARE.
|
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
/* Tongue Studio. Matte black: flat surfaces a few steps apart, hairline rules, no gloss. One
|
|
2
|
+
accent, tongue pink, for what is live: the playhead, the selection, the play range, play. Clips
|
|
3
|
+
are quiet so the pink and the film carry the colour. Inter with tabular figures, so times never
|
|
4
|
+
jiggle. */
|
|
5
|
+
|
|
6
|
+
@font-face {
|
|
7
|
+
font-family: "Inter";
|
|
8
|
+
src: url("./fonts/Inter.woff2") format("woff2");
|
|
9
|
+
font-weight: 100 900;
|
|
10
|
+
font-display: block;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
:root {
|
|
14
|
+
color-scheme: dark;
|
|
15
|
+
--bg: #0a0a0a;
|
|
16
|
+
--panel: #0f0f0f;
|
|
17
|
+
--raised: #181818;
|
|
18
|
+
--hover: #202020;
|
|
19
|
+
--sunk: #060606;
|
|
20
|
+
--line: #232323;
|
|
21
|
+
--line-soft: #171717;
|
|
22
|
+
--text: #ededeb;
|
|
23
|
+
--soft: #bdbdba;
|
|
24
|
+
--muted: #8b8b89;
|
|
25
|
+
--faint: #5a5a59;
|
|
26
|
+
--accent: #f4739b;
|
|
27
|
+
--accent-bright: #ff8eb1;
|
|
28
|
+
--accent-soft: rgba(244, 115, 155, 0.14);
|
|
29
|
+
--good: #5fbf8b;
|
|
30
|
+
--busy: #e2ad4e;
|
|
31
|
+
--bad: #ff6a45;
|
|
32
|
+
--scene: #222226;
|
|
33
|
+
--scene-edge: #34343b;
|
|
34
|
+
--video: #1c2523;
|
|
35
|
+
--video-edge: #2f3f3a;
|
|
36
|
+
--image: #27231d;
|
|
37
|
+
--image-edge: #403a2f;
|
|
38
|
+
--audio: #261f25;
|
|
39
|
+
--audio-edge: #3f333d;
|
|
40
|
+
--row-picture: 64px;
|
|
41
|
+
--row-sound: 40px;
|
|
42
|
+
--ruler: 28px;
|
|
43
|
+
--headers: 132px;
|
|
44
|
+
--radius: 6px;
|
|
45
|
+
font-family: "Inter", system-ui, sans-serif;
|
|
46
|
+
font-size: 13px;
|
|
47
|
+
font-feature-settings: "cv11", "ss01";
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
* { box-sizing: border-box; }
|
|
51
|
+
html, body, #studio { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; }
|
|
52
|
+
button { font: inherit; color: inherit; }
|
|
53
|
+
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
54
|
+
::selection { background: var(--accent-soft); }
|
|
55
|
+
|
|
56
|
+
.studio { display: grid; grid-template-rows: 48px minmax(0, 1fr) 52px minmax(220px, 34vh); height: 100%; }
|
|
57
|
+
|
|
58
|
+
/* ------------------------------------------------------------ top bar */
|
|
59
|
+
|
|
60
|
+
.topbar { display: flex; align-items: center; gap: 20px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--panel); }
|
|
61
|
+
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; letter-spacing: -0.02em; }
|
|
62
|
+
.brand-mark { width: 20px; height: 20px; }
|
|
63
|
+
.brand-mark rect { fill: var(--accent); }
|
|
64
|
+
.brand-mark path { stroke: var(--bg); stroke-width: 3.2; stroke-linecap: round; fill: none; }
|
|
65
|
+
.brand-studio { font-weight: 500; color: var(--muted); }
|
|
66
|
+
.topbar-title { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex: 1; }
|
|
67
|
+
.topbar-title .title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
68
|
+
.topbar-title .facts { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
|
|
69
|
+
.topbar-status { display: flex; align-items: center; gap: 10px; }
|
|
70
|
+
.chip { color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
|
|
71
|
+
.status { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); white-space: nowrap; font-variant-numeric: tabular-nums; }
|
|
72
|
+
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
|
|
73
|
+
.status[data-tone="good"] .status-dot { background: var(--good); }
|
|
74
|
+
.status[data-tone="busy"] .status-dot { background: var(--busy); animation: pulse 1.2s ease-in-out infinite; }
|
|
75
|
+
.status[data-tone="bad"] { color: var(--bad); }
|
|
76
|
+
.status[data-tone="bad"] .status-dot { background: var(--bad); }
|
|
77
|
+
@keyframes pulse { 50% { opacity: 0.35; } }
|
|
78
|
+
|
|
79
|
+
/* ------------------------------------------------------------ stage and inspector */
|
|
80
|
+
|
|
81
|
+
.studio-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 0; }
|
|
82
|
+
.stage { position: relative; display: grid; place-items: center; padding: 20px; min-height: 0; min-width: 0; background: var(--bg); }
|
|
83
|
+
.stage-frame { position: relative; max-width: 100%; max-height: 100%; height: 100%; background: #000; border-radius: 3px; box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
|
|
84
|
+
.stage-canvas { display: block; width: 100%; height: 100%; }
|
|
85
|
+
.stage-note { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); padding: 24px; text-align: center; }
|
|
86
|
+
.stage-note.bad { color: var(--bad); }
|
|
87
|
+
.stage-drafting { position: absolute; right: 28px; bottom: 26px; color: var(--muted); font-size: 11px; letter-spacing: 0.04em; opacity: 0; transition: opacity 120ms; }
|
|
88
|
+
.stage[data-exact="no"] .stage-drafting { opacity: 1; transition-delay: 250ms; }
|
|
89
|
+
|
|
90
|
+
.inspector { border-left: 1px solid var(--line); background: var(--panel); overflow-y: auto; }
|
|
91
|
+
.panel { padding: 16px; border-bottom: 1px solid var(--line-soft); }
|
|
92
|
+
.panel h2 { margin: 0 0 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; }
|
|
93
|
+
.panel h2.clip-title { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--text); }
|
|
94
|
+
.panel dl { margin: 0; display: grid; gap: 7px; }
|
|
95
|
+
.field { display: grid; grid-template-columns: 82px 1fr; gap: 8px; align-items: baseline; }
|
|
96
|
+
.field dt { color: var(--muted); }
|
|
97
|
+
.field dd { margin: 0; font-variant-numeric: tabular-nums; word-break: break-word; }
|
|
98
|
+
.kind { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 6px; border-radius: 4px; color: var(--soft); background: var(--scene); box-shadow: inset 0 0 0 1px var(--scene-edge); }
|
|
99
|
+
.kind[data-kind="video"] { background: var(--video); box-shadow: inset 0 0 0 1px var(--video-edge); }
|
|
100
|
+
.kind[data-kind="image"] { background: var(--image); box-shadow: inset 0 0 0 1px var(--image-edge); }
|
|
101
|
+
.kind[data-kind="audio"] { background: var(--audio); box-shadow: inset 0 0 0 1px var(--audio-edge); }
|
|
102
|
+
.props { margin: 12px 0 0; padding: 10px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--sunk); color: var(--soft); font: 11.5px/1.5 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre-wrap; max-height: 220px; overflow: auto; }
|
|
103
|
+
.panel-actions { display: flex; gap: 8px; margin-top: 12px; }
|
|
104
|
+
button.text { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 5px 10px; cursor: pointer; }
|
|
105
|
+
button.text:hover { border-color: var(--accent); color: var(--accent-bright); }
|
|
106
|
+
.hint { color: var(--faint); margin: 14px 0 0; line-height: 1.5; }
|
|
107
|
+
.warnings, .errors { margin: 10px 0 0; padding-left: 16px; color: var(--busy); line-height: 1.5; }
|
|
108
|
+
.errors { color: var(--bad); }
|
|
109
|
+
.meter { height: 4px; border-radius: 2px; background: var(--sunk); overflow: hidden; margin-bottom: 12px; }
|
|
110
|
+
.meter-fill { height: 100%; background: var(--good); transition: width 200ms; }
|
|
111
|
+
|
|
112
|
+
/* ------------------------------------------------------------ transport */
|
|
113
|
+
|
|
114
|
+
.transport { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 0 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel); }
|
|
115
|
+
.transport-buttons { display: flex; gap: 2px; }
|
|
116
|
+
.transport-time { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
|
|
117
|
+
.time-now { font-size: 18px; font-weight: 600; letter-spacing: 0.01em; }
|
|
118
|
+
.time-total { color: var(--muted); }
|
|
119
|
+
.buffering { color: var(--busy); font-size: 11px; }
|
|
120
|
+
.transport-zoom { display: flex; justify-content: flex-end; gap: 2px; }
|
|
121
|
+
button.icon { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: var(--radius); background: transparent; color: var(--muted); cursor: pointer; }
|
|
122
|
+
button.icon:hover { background: var(--hover); color: var(--text); }
|
|
123
|
+
button.icon.play { color: var(--bg); background: var(--accent); margin: 0 4px; }
|
|
124
|
+
button.icon.play:hover { background: var(--accent-bright); color: var(--bg); }
|
|
125
|
+
button.icon.play[data-playing] { color: var(--accent); background: var(--accent-soft); }
|
|
126
|
+
|
|
127
|
+
/* ------------------------------------------------------------ timeline */
|
|
128
|
+
|
|
129
|
+
.timeline { display: grid; grid-template-columns: var(--headers) minmax(0, 1fr); min-height: 0; overflow-y: auto; background: var(--bg); }
|
|
130
|
+
.timeline-headers { border-right: 1px solid var(--line); background: var(--panel); }
|
|
131
|
+
.ruler-spacer { height: calc(var(--ruler) + 4px); border-bottom: 1px solid var(--line); }
|
|
132
|
+
.row-header { display: flex; align-items: center; gap: 8px; height: var(--row-picture); padding: 0 12px; color: var(--muted); border-bottom: 1px solid var(--line-soft); white-space: nowrap; overflow: hidden; }
|
|
133
|
+
.row-header[data-kind="audio"] { height: var(--row-sound); }
|
|
134
|
+
.row-header svg { flex: none; width: 16px; height: 16px; }
|
|
135
|
+
.timeline-body { min-width: 0; }
|
|
136
|
+
.timeline-scroller { height: 100%; scrollbar-color: var(--line) transparent; }
|
|
137
|
+
|
|
138
|
+
.ruler { height: var(--ruler); border-bottom: 1px solid var(--line); cursor: ew-resize; user-select: none; }
|
|
139
|
+
[data-tl-tick] { border-left: 1px solid var(--line); }
|
|
140
|
+
[data-tl-tick]:not([data-major]) { top: calc(var(--ruler) - 6px) !important; border-color: var(--line-soft); }
|
|
141
|
+
[data-tl-tick][data-major] { top: 9px !important; border-color: var(--faint); }
|
|
142
|
+
.tick-label { position: absolute; top: -8px; left: 7px; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
|
|
143
|
+
|
|
144
|
+
.ready { height: 4px; background: repeating-linear-gradient(90deg, var(--line-soft) 0 4px, transparent 4px 8px); border-bottom: 1px solid var(--line-soft); }
|
|
145
|
+
[data-tl-ready-range] { background: var(--good); opacity: 0.55; }
|
|
146
|
+
.range { background: var(--accent-soft); border-left: 1px solid var(--accent); border-right: 1px solid var(--accent); }
|
|
147
|
+
|
|
148
|
+
.row { height: var(--row-picture); border-bottom: 1px solid var(--line-soft); }
|
|
149
|
+
.row[data-kind="audio"] { height: var(--row-sound); }
|
|
150
|
+
|
|
151
|
+
.clip { top: 5px !important; bottom: 5px !important; border-radius: 4px; background: var(--scene); box-shadow: inset 0 0 0 1px var(--scene-edge); cursor: pointer; overflow: hidden; }
|
|
152
|
+
.clip[data-kind="video"] { background: var(--video); box-shadow: inset 0 0 0 1px var(--video-edge); }
|
|
153
|
+
.clip[data-kind="image"] { background: var(--image); box-shadow: inset 0 0 0 1px var(--image-edge); }
|
|
154
|
+
.clip[data-kind="audio"] { background: var(--audio); box-shadow: inset 0 0 0 1px var(--audio-edge); }
|
|
155
|
+
.clip:hover { filter: brightness(1.25); }
|
|
156
|
+
/* Above the filmstrip and the label, so the pink stays pink. */
|
|
157
|
+
.clip[data-selected]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--accent); pointer-events: none; }
|
|
158
|
+
.clip-strip { opacity: 0.6; }
|
|
159
|
+
.clip-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 7px 4px; display: flex; flex-direction: column; gap: 1px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); pointer-events: none; }
|
|
160
|
+
.clip-name { font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
161
|
+
.clip-sub { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
162
|
+
.row[data-kind="audio"] .clip-label { background: none; justify-content: center; top: 0; padding-bottom: 0; }
|
|
163
|
+
|
|
164
|
+
[data-tl-run] { top: 5px !important; bottom: 5px !important; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--scene) 0 3px, var(--scene-edge) 3px 4px); opacity: 0.8; cursor: pointer; }
|
|
165
|
+
.row[data-kind="audio"] [data-tl-run] { background: repeating-linear-gradient(90deg, var(--audio) 0 3px, var(--audio-edge) 3px 4px); }
|
|
166
|
+
[data-tl-transition] { top: 5px !important; bottom: 5px !important; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); border-radius: 4px; }
|
|
167
|
+
|
|
168
|
+
.playhead { width: 0; z-index: 3; }
|
|
169
|
+
.playhead::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--accent); }
|
|
170
|
+
.playhead-handle { position: absolute; top: 0; left: -6px; width: 12px; height: 12px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type * as AtomRegistry from "effect/reactivity/AtomRegistry";
|
|
2
|
+
import type { Player } from "@tongue-core/ui/player";
|
|
3
|
+
import type { PlayState, Timeline } from "@tongue-core/ui/timeline";
|
|
4
|
+
export interface StudioHandle {
|
|
5
|
+
readonly frame: () => number;
|
|
6
|
+
readonly state: () => PlayState;
|
|
7
|
+
readonly film: () => {
|
|
8
|
+
readonly project: string;
|
|
9
|
+
readonly length: number;
|
|
10
|
+
readonly fps: number;
|
|
11
|
+
readonly clips: number;
|
|
12
|
+
} | null;
|
|
13
|
+
/** Every file loaded, and the frame on screen exact. */
|
|
14
|
+
readonly settled: () => boolean;
|
|
15
|
+
readonly seek: (frame: number) => void;
|
|
16
|
+
readonly play: () => void;
|
|
17
|
+
readonly pause: () => void;
|
|
18
|
+
readonly select: (id: string) => void;
|
|
19
|
+
readonly selection: () => ReadonlyArray<string>;
|
|
20
|
+
/** SHA-256 of a frame's RGBA at a scale, drawn by the player. */
|
|
21
|
+
readonly hash: (frame: number, scale: number) => Promise<string>;
|
|
22
|
+
}
|
|
23
|
+
declare global {
|
|
24
|
+
interface Window {
|
|
25
|
+
tongueStudio?: StudioHandle;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
export declare function studioHandle(registry: AtomRegistry.AtomRegistry, timeline: Timeline, player: Player): StudioHandle;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
export function studioHandle(registry, timeline, player) {
|
|
2
|
+
return {
|
|
3
|
+
frame: () => registry.get(timeline.playhead),
|
|
4
|
+
state: () => registry.get(timeline.playState),
|
|
5
|
+
film: () => {
|
|
6
|
+
const f = player.film;
|
|
7
|
+
return f ? { project: f.build.project, length: f.doc.film.length, fps: f.doc.film.fps, clips: registry.get(timeline.model)?.clips.size ?? 0 } : null;
|
|
8
|
+
},
|
|
9
|
+
settled: () => {
|
|
10
|
+
const r = registry.get(timeline.readiness), shown = registry.get(timeline.shown);
|
|
11
|
+
return r !== null && r.ready + r.failed === r.files && shown !== null && shown.exact && shown.frame === registry.get(timeline.playhead);
|
|
12
|
+
},
|
|
13
|
+
seek: (frame) => registry.set(timeline.commands, { type: "seek", frame }),
|
|
14
|
+
play: () => registry.set(timeline.commands, { type: "play" }),
|
|
15
|
+
pause: () => registry.set(timeline.commands, { type: "pause" }),
|
|
16
|
+
select: (id) => registry.set(timeline.selection, { type: "select", id }),
|
|
17
|
+
selection: () => [...registry.get(timeline.selection).ids],
|
|
18
|
+
hash: async (frame, scale) => {
|
|
19
|
+
const { rgba } = await player.pixels(frame, scale);
|
|
20
|
+
const copy = new Uint8Array(rgba.length);
|
|
21
|
+
copy.set(rgba);
|
|
22
|
+
const digest = await crypto.subtle.digest("SHA-256", copy);
|
|
23
|
+
return Array.from(new Uint8Array(digest), (b) => b.toString(16).padStart(2, "0")).join("");
|
|
24
|
+
},
|
|
25
|
+
};
|
|
26
|
+
}
|
package/dist/config.d.ts
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export interface StudioConfig {
|
|
2
|
+
/** The build's folder: "/build/" from `tongue studio`, or any URL of a build served elsewhere. */
|
|
3
|
+
readonly build: string;
|
|
4
|
+
readonly worker: string;
|
|
5
|
+
/** Server-sent events about rebuilds (a local project being watched), or null. */
|
|
6
|
+
readonly events: string | null;
|
|
7
|
+
readonly title: string;
|
|
8
|
+
/** "local": a project on this machine, rebuilt as it changes; "remote": a build from a URL. */
|
|
9
|
+
readonly mode: "local" | "remote";
|
|
10
|
+
}
|
|
11
|
+
declare global {
|
|
12
|
+
interface Window {
|
|
13
|
+
TONGUE_STUDIO?: unknown;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
export declare function studioConfig(value: unknown, search: string): StudioConfig;
|
package/dist/config.js
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
// What the page that serves the studio tells it: where the build is (the same URL shape locally
|
|
2
|
+
// and remotely), where the worker script is, where build events come from (a local project), and
|
|
3
|
+
// what to call the film. Parsed from `unknown`: the page wrote it, but nothing is trusted.
|
|
4
|
+
const isRecord = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
|
|
5
|
+
const text = (v, fallback) => (typeof v === "string" && v.length > 0 ? v : fallback);
|
|
6
|
+
export function studioConfig(value, search) {
|
|
7
|
+
const c = isRecord(value) ? value : {};
|
|
8
|
+
// ?build=<url> opens another build in the same studio (a remote one, say).
|
|
9
|
+
const fromQuery = new URLSearchParams(search).get("build");
|
|
10
|
+
const build = fromQuery ?? text(c["build"], "/build/");
|
|
11
|
+
return {
|
|
12
|
+
build,
|
|
13
|
+
worker: text(c["worker"], "/worker.js"),
|
|
14
|
+
events: fromQuery ? null : typeof c["events"] === "string" ? c["events"] : null,
|
|
15
|
+
title: text(c["title"], "Untitled film"),
|
|
16
|
+
mode: fromQuery || c["mode"] === "remote" ? "remote" : "local",
|
|
17
|
+
};
|
|
18
|
+
}
|
package/dist/events.d.ts
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export type BuildEvent = {
|
|
2
|
+
readonly kind: "building";
|
|
3
|
+
} | {
|
|
4
|
+
readonly kind: "built";
|
|
5
|
+
readonly ms: number;
|
|
6
|
+
} | {
|
|
7
|
+
readonly kind: "failed";
|
|
8
|
+
readonly message: string;
|
|
9
|
+
};
|
|
10
|
+
export declare function parseBuildEvent(data: string): BuildEvent | null;
|
|
11
|
+
/** Listens for build events; returns a function that stops. */
|
|
12
|
+
export declare function onBuildEvents(url: string, listener: (event: BuildEvent) => void): () => void;
|
package/dist/events.js
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
// What `tongue studio` says about a local project while it watches it: a rebuild started, one
|
|
2
|
+
// finished (and the build to reload), one failed (and why). Over server-sent events, each a JSON
|
|
3
|
+
// message, parsed from `unknown`.
|
|
4
|
+
const isRecord = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
|
|
5
|
+
export function parseBuildEvent(data) {
|
|
6
|
+
let value;
|
|
7
|
+
try {
|
|
8
|
+
value = JSON.parse(data);
|
|
9
|
+
}
|
|
10
|
+
catch {
|
|
11
|
+
return null;
|
|
12
|
+
}
|
|
13
|
+
if (!isRecord(value))
|
|
14
|
+
return null;
|
|
15
|
+
switch (value["kind"]) {
|
|
16
|
+
case "building": return { kind: "building" };
|
|
17
|
+
case "built": return typeof value["ms"] === "number" ? { kind: "built", ms: value["ms"] } : null;
|
|
18
|
+
case "failed": return typeof value["message"] === "string" ? { kind: "failed", message: value["message"] } : null;
|
|
19
|
+
default: return null;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
/** Listens for build events; returns a function that stops. */
|
|
23
|
+
export function onBuildEvents(url, listener) {
|
|
24
|
+
const source = new EventSource(url);
|
|
25
|
+
source.onmessage = (e) => {
|
|
26
|
+
const parsed = typeof e.data === "string" ? parseBuildEvent(e.data) : null;
|
|
27
|
+
if (parsed)
|
|
28
|
+
listener(parsed);
|
|
29
|
+
};
|
|
30
|
+
return () => source.close();
|
|
31
|
+
}
|
package/dist/icons.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export declare const PlayIcon: () => import("react").JSX.Element;
|
|
2
|
+
export declare const PauseIcon: () => import("react").JSX.Element;
|
|
3
|
+
export declare const StartIcon: () => import("react").JSX.Element;
|
|
4
|
+
export declare const EndIcon: () => import("react").JSX.Element;
|
|
5
|
+
export declare const BackIcon: () => import("react").JSX.Element;
|
|
6
|
+
export declare const ForwardIcon: () => import("react").JSX.Element;
|
|
7
|
+
export declare const ZoomInIcon: () => import("react").JSX.Element;
|
|
8
|
+
export declare const ZoomOutIcon: () => import("react").JSX.Element;
|
|
9
|
+
export declare const FitIcon: () => import("react").JSX.Element;
|
|
10
|
+
export declare const PictureIcon: () => import("react").JSX.Element;
|
|
11
|
+
export declare const SoundIcon: () => import("react").JSX.Element;
|
package/dist/icons.js
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
// The studio's icons: 20-unit strokes, drawn in currentColor.
|
|
3
|
+
const Svg = (props) => (_jsx("svg", { viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", role: "img", "aria-label": props.label, children: props.children }));
|
|
4
|
+
export const PlayIcon = () => _jsx(Svg, { label: "Play", children: _jsx("path", { d: "M6.5 4.5v11l9-5.5z", fill: "currentColor", stroke: "none" }) });
|
|
5
|
+
export const PauseIcon = () => _jsx(Svg, { label: "Pause", children: _jsx("path", { d: "M7 4.5v11M13 4.5v11", strokeWidth: "2.6" }) });
|
|
6
|
+
export const StartIcon = () => _jsx(Svg, { label: "To the start", children: _jsx("path", { d: "M5 4.5v11M15 5l-7 5 7 5z" }) });
|
|
7
|
+
export const EndIcon = () => _jsx(Svg, { label: "To the end", children: _jsx("path", { d: "M15 4.5v11M5 5l7 5-7 5z" }) });
|
|
8
|
+
export const BackIcon = () => _jsx(Svg, { label: "A frame back", children: _jsx("path", { d: "M12.5 5 7.5 10l5 5" }) });
|
|
9
|
+
export const ForwardIcon = () => _jsx(Svg, { label: "A frame on", children: _jsx("path", { d: "M7.5 5l5 5-5 5" }) });
|
|
10
|
+
export const ZoomInIcon = () => _jsx(Svg, { label: "Zoom in", children: _jsx("path", { d: "M10 5v10M5 10h10" }) });
|
|
11
|
+
export const ZoomOutIcon = () => _jsx(Svg, { label: "Zoom out", children: _jsx("path", { d: "M5 10h10" }) });
|
|
12
|
+
export const FitIcon = () => _jsx(Svg, { label: "Fit the film", children: _jsx("path", { d: "M3.5 7V4.5H6M14 4.5h2.5V7M16.5 13v2.5H14M6 15.5H3.5V13" }) });
|
|
13
|
+
export const PictureIcon = () => _jsxs(Svg, { label: "Pictures", children: [_jsx("rect", { x: "3.5", y: "5", width: "13", height: "10", rx: "2" }), _jsx("path", { d: "m3.5 13 4-3.5 3 2.5 2-1.5 4 3" })] });
|
|
14
|
+
export const SoundIcon = () => _jsx(Svg, { label: "Sound", children: _jsx("path", { d: "M4 8v4M7 6v8M10 4v12M13 7v6M16 9v2" }) });
|
package/dist/main.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/main.js
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
/** @jsxImportSource react */
|
|
3
|
+
import { createRoot } from "react-dom/client";
|
|
4
|
+
import { studioConfig } from "./config.js";
|
|
5
|
+
import { Studio } from "./studio.js";
|
|
6
|
+
// The studio's entry: the page's config, and the app in #studio.
|
|
7
|
+
const host = document.getElementById("studio");
|
|
8
|
+
if (!host)
|
|
9
|
+
throw new Error("The studio's page needs a #studio element.");
|
|
10
|
+
createRoot(host).render(_jsx(Studio, { config: studioConfig(window.TONGUE_STUDIO, location.search) }));
|
package/dist/page.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export interface PageOptions {
|
|
2
|
+
readonly title: string;
|
|
3
|
+
readonly build: string;
|
|
4
|
+
readonly worker: string;
|
|
5
|
+
readonly events: string | null;
|
|
6
|
+
readonly mode: "local" | "remote";
|
|
7
|
+
/** The bundled app and its stylesheet. */
|
|
8
|
+
readonly script: string;
|
|
9
|
+
readonly stylesheet: string;
|
|
10
|
+
}
|
|
11
|
+
export declare function studioPage(o: PageOptions): string;
|
package/dist/page.js
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
// The studio's page: what `tongue studio` (or any static host) serves at its root. The config is
|
|
2
|
+
// inlined as JSON, with "<" escaped so nothing in a title can end the script.
|
|
3
|
+
const escapeHtml = (s) => s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """);
|
|
4
|
+
export function studioPage(o) {
|
|
5
|
+
const config = JSON.stringify({ title: o.title, build: o.build, worker: o.worker, events: o.events, mode: o.mode }).replace(/</g, "\\u003c");
|
|
6
|
+
return `<!doctype html>
|
|
7
|
+
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
|
8
|
+
<title>${escapeHtml(o.title)} · Tongue Studio</title>
|
|
9
|
+
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%23ff6b4a'/%3E%3Cpath d='M9 12h14M16 12v11' stroke='%230b0c0f' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E">
|
|
10
|
+
<link rel="stylesheet" href="${escapeHtml(o.stylesheet)}">
|
|
11
|
+
</head><body><div id="studio"></div>
|
|
12
|
+
<script>window.TONGUE_STUDIO = ${config};</script>
|
|
13
|
+
<script type="module" src="${escapeHtml(o.script)}"></script></body></html>`;
|
|
14
|
+
}
|
package/dist/studio.d.ts
ADDED
package/dist/studio.js
ADDED
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
/** @jsxImportSource react */
|
|
3
|
+
import { useAtomValue } from "@effect/atom-react";
|
|
4
|
+
import * as AtomRegistry from "effect/reactivity/AtomRegistry";
|
|
5
|
+
import { memo, useEffect, useMemo, useRef, useState } from "react";
|
|
6
|
+
import { Filmstrip, Timeline, TimelineProvider, useAtomEffect, useTimelineContext, useTimelineKeys, usePlayer, useTransport } from "@tongue-core/ui/react";
|
|
7
|
+
import { connectPlayer, frameToX, makeTimeline, timecode } from "@tongue-core/ui/timeline";
|
|
8
|
+
import { studioHandle } from "./automation.js";
|
|
9
|
+
import { onBuildEvents } from "./events.js";
|
|
10
|
+
import { BackIcon, EndIcon, FitIcon, ForwardIcon, PauseIcon, PictureIcon, PlayIcon, SoundIcon, StartIcon, ZoomInIcon, ZoomOutIcon } from "./icons.js";
|
|
11
|
+
const seconds = (frames, fps) => `${(frames / fps).toFixed(2)} s`;
|
|
12
|
+
export function Studio(props) {
|
|
13
|
+
const { config } = props;
|
|
14
|
+
const [registry] = useState(() => AtomRegistry.make());
|
|
15
|
+
const [timeline] = useState(makeTimeline);
|
|
16
|
+
const canvas = useRef(null);
|
|
17
|
+
const player = usePlayer(canvas, { workerUrl: config.worker });
|
|
18
|
+
const [film, setFilm] = useState(null);
|
|
19
|
+
const [loadError, setLoadError] = useState(null);
|
|
20
|
+
const [build, setBuild] = useState({ kind: "idle" });
|
|
21
|
+
const [errors, setErrors] = useState([]);
|
|
22
|
+
/** Counts films loaded: a reload after a rebuild makes the filmstrips' pictures out of date. */
|
|
23
|
+
const [loads, setLoads] = useState(0);
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
if (!player)
|
|
26
|
+
return;
|
|
27
|
+
const part = connectPlayer(registry, timeline, player);
|
|
28
|
+
const offs = [
|
|
29
|
+
player.on("load", (f) => { setFilm(f); setLoadError(null); setLoads((n) => n + 1); }),
|
|
30
|
+
player.on("error", (e) => setErrors((list) => [e.message, ...list.filter((m) => m !== e.message)].slice(0, 5))),
|
|
31
|
+
];
|
|
32
|
+
player.load({ build: config.build }).catch((e) => setLoadError(e instanceof Error ? e.message : String(e)));
|
|
33
|
+
window.tongueStudio = studioHandle(registry, timeline, player);
|
|
34
|
+
return () => {
|
|
35
|
+
part();
|
|
36
|
+
for (const off of offs)
|
|
37
|
+
off();
|
|
38
|
+
window.tongueStudio = undefined;
|
|
39
|
+
};
|
|
40
|
+
}, [player, registry, timeline, config.build]);
|
|
41
|
+
useEffect(() => {
|
|
42
|
+
if (!config.events || !player)
|
|
43
|
+
return;
|
|
44
|
+
return onBuildEvents(config.events, (event) => {
|
|
45
|
+
setBuild(event);
|
|
46
|
+
if (event.kind === "built")
|
|
47
|
+
player.reload().catch((e) => setLoadError(e instanceof Error ? e.message : String(e)));
|
|
48
|
+
});
|
|
49
|
+
}, [config.events, player]);
|
|
50
|
+
return (_jsxs(TimelineProvider, { timeline: timeline, registry: registry, previews: player, previewsVersion: loads, children: [_jsx(Keys, {}), _jsxs("div", { className: "studio", children: [_jsx(TopBar, { config: config, film: film, build: build, loadError: loadError }), _jsxs("div", { className: "studio-main", children: [_jsx(Stage, { canvas: canvas, film: film, loadError: loadError }), _jsx(Inspector, { film: film, errors: errors })] }), _jsx(TransportBar, { film: film }), _jsx(TimelinePanel, {})] })] }));
|
|
51
|
+
}
|
|
52
|
+
function Keys() {
|
|
53
|
+
useTimelineKeys();
|
|
54
|
+
return null;
|
|
55
|
+
}
|
|
56
|
+
// ---------------------------------------------------------------- top bar
|
|
57
|
+
function TopBar(props) {
|
|
58
|
+
const { config, film } = props;
|
|
59
|
+
return (_jsxs("header", { className: "topbar", children: [_jsxs("div", { className: "brand", children: [_jsxs("svg", { className: "brand-mark", viewBox: "0 0 32 32", "aria-hidden": "true", children: [_jsx("rect", { width: "32", height: "32", rx: "8" }), _jsx("path", { d: "M9 12h14M16 12v11" })] }), "tongue", _jsx("span", { className: "brand-studio", children: "studio" })] }), _jsxs("div", { className: "topbar-title", children: [_jsx("span", { className: "title", children: film?.build.project ?? config.title }), film ? _jsxs("span", { className: "facts", children: [film.doc.film.width, "\u00D7", film.doc.film.height, " \u00B7 ", film.doc.film.fps, " fps \u00B7 ", timecode(film.doc.film.length, film.doc.film.fps)] }) : null] }), _jsxs("div", { className: "topbar-status", children: [_jsx("span", { className: "chip", "data-mode": config.mode, children: config.mode === "remote" ? `Remote · ${hostOf(config.build)}` : config.events ? "Local · watching" : "Local" }), _jsx(Status, { build: props.build, loadError: props.loadError })] })] }));
|
|
60
|
+
}
|
|
61
|
+
const hostOf = (url) => {
|
|
62
|
+
try {
|
|
63
|
+
return new URL(url, location.href).host;
|
|
64
|
+
}
|
|
65
|
+
catch {
|
|
66
|
+
return url;
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
function Status(props) {
|
|
70
|
+
const { timeline } = useTimelineContext();
|
|
71
|
+
const readiness = useAtomValue(timeline.readiness);
|
|
72
|
+
const [label, tone, title] = (() => {
|
|
73
|
+
if (props.build.kind === "building")
|
|
74
|
+
return ["Building…", "busy", "The project changed; building it again."];
|
|
75
|
+
if (props.build.kind === "failed")
|
|
76
|
+
return ["Build failed", "bad", props.build.message];
|
|
77
|
+
if (props.loadError)
|
|
78
|
+
return ["Couldn't load", "bad", props.loadError];
|
|
79
|
+
if (!readiness)
|
|
80
|
+
return ["Opening…", "busy", "Opening the build."];
|
|
81
|
+
if (readiness.failed > 0)
|
|
82
|
+
return [`${readiness.failed} file${readiness.failed === 1 ? "" : "s"} failed`, "bad", "Some assets couldn't be loaded; frames that need them aren't drawn."];
|
|
83
|
+
if (readiness.ready < readiness.files)
|
|
84
|
+
return [`Loading ${Math.floor((readiness.bytesReady / Math.max(1, readiness.bytes)) * 100)}%`, "busy", `${readiness.ready} of ${readiness.files} files`];
|
|
85
|
+
return ["Ready", "good", `${readiness.files} files, all loaded`];
|
|
86
|
+
})();
|
|
87
|
+
return _jsxs("span", { className: "status", "data-tone": tone, title: title, children: [_jsx("span", { className: "status-dot" }), label] });
|
|
88
|
+
}
|
|
89
|
+
// ---------------------------------------------------------------- stage
|
|
90
|
+
function Stage(props) {
|
|
91
|
+
const { timeline } = useTimelineContext();
|
|
92
|
+
const stage = useRef(null);
|
|
93
|
+
// Whether what is on screen is the playhead's frame, sharp: written to the element, not rendered.
|
|
94
|
+
useAtomEffect(timeline.shown, (s) => { if (stage.current)
|
|
95
|
+
stage.current.dataset["exact"] = s?.exact ? "yes" : "no"; });
|
|
96
|
+
const aspect = props.film ? `${props.film.doc.film.width} / ${props.film.doc.film.height}` : "16 / 9";
|
|
97
|
+
return (_jsxs("section", { className: "stage", ref: stage, children: [_jsxs("div", { className: "stage-frame", style: { aspectRatio: aspect }, children: [_jsx("canvas", { ref: props.canvas, className: "stage-canvas" }), !props.film && !props.loadError ? _jsx("div", { className: "stage-note", children: "Opening the film\u2026" }) : null, props.loadError ? _jsx("div", { className: "stage-note bad", children: props.loadError }) : null] }), _jsx("div", { className: "stage-drafting", "aria-hidden": "true", children: "drawing\u2026" })] }));
|
|
98
|
+
}
|
|
99
|
+
// ---------------------------------------------------------------- transport
|
|
100
|
+
function TransportBar(props) {
|
|
101
|
+
const { timeline, registry } = useTimelineContext();
|
|
102
|
+
const transport = useTransport();
|
|
103
|
+
const state = useAtomValue(timeline.playState);
|
|
104
|
+
const fps = props.film?.doc.film.fps ?? 30;
|
|
105
|
+
const zoom = (factor) => {
|
|
106
|
+
const v = registry.get(timeline.view);
|
|
107
|
+
const anchor = Math.max(0, Math.min(v.width, frameToX(v, registry.get(timeline.playhead))));
|
|
108
|
+
registry.set(timeline.view, { type: "zoom", factor, anchor });
|
|
109
|
+
};
|
|
110
|
+
return (_jsxs("div", { className: "transport", children: [_jsxs("div", { className: "transport-buttons", children: [_jsx("button", { type: "button", className: "icon", title: "To the start (Home)", onClick: () => transport.send({ type: "start" }), children: _jsx(StartIcon, {}) }), _jsx("button", { type: "button", className: "icon", title: "A frame back (\u2190)", onClick: () => transport.step(-1), children: _jsx(BackIcon, {}) }), _jsx("button", { type: "button", className: "icon play", title: "Play or pause (Space)", "data-playing": state !== "paused" ? "" : undefined, onClick: () => transport.toggle(), children: state === "paused" ? _jsx(PlayIcon, {}) : _jsx(PauseIcon, {}) }), _jsx("button", { type: "button", className: "icon", title: "A frame on (\u2192)", onClick: () => transport.step(1), children: _jsx(ForwardIcon, {}) }), _jsx("button", { type: "button", className: "icon", title: "To the end (End)", onClick: () => transport.send({ type: "end" }), children: _jsx(EndIcon, {}) })] }), _jsxs("div", { className: "transport-time", children: [_jsx(Timeline.Timecode, { className: "time-now" }), _jsxs("span", { className: "time-total", children: ["/ ", props.film ? timecode(props.film.doc.film.length, fps) : "--:--:--:--"] }), state === "buffering" ? _jsx("span", { className: "buffering", children: "buffering" }) : null] }), _jsxs("div", { className: "transport-zoom", children: [_jsx("button", { type: "button", className: "icon", title: "Zoom out (\u2212)", onClick: () => zoom(1 / 1.5), children: _jsx(ZoomOutIcon, {}) }), _jsx("button", { type: "button", className: "icon", title: "Fit the film (0)", onClick: () => registry.set(timeline.view, { type: "fit" }), children: _jsx(FitIcon, {}) }), _jsx("button", { type: "button", className: "icon", title: "Zoom in (=)", onClick: () => zoom(1.5), children: _jsx(ZoomInIcon, {}) })] })] }));
|
|
111
|
+
}
|
|
112
|
+
// ---------------------------------------------------------------- inspector
|
|
113
|
+
function Field(props) {
|
|
114
|
+
return _jsxs("div", { className: "field", children: [_jsx("dt", { children: props.name }), _jsx("dd", { children: props.children })] });
|
|
115
|
+
}
|
|
116
|
+
function Inspector(props) {
|
|
117
|
+
const { timeline } = useTimelineContext();
|
|
118
|
+
const model = useAtomValue(timeline.model);
|
|
119
|
+
const selection = useAtomValue(timeline.selection);
|
|
120
|
+
const selected = useMemo(() => [...selection.ids].flatMap((id) => { const c = model?.clips.get(id); return c ? [c] : []; }), [selection, model]);
|
|
121
|
+
const readiness = useAtomValue(timeline.readiness);
|
|
122
|
+
const fps = model?.fps ?? 30;
|
|
123
|
+
return (_jsxs("aside", { className: "inspector", children: [selected.length === 1 && selected[0] ? _jsx(ClipDetails, { clip: selected[0], fps: fps }) : selected.length > 1 ? (_jsxs("section", { className: "panel", children: [_jsxs("h2", { children: [selected.length, " clips"] }), _jsxs("dl", { children: [_jsx(Field, { name: "From", children: timecode(Math.min(...selected.map((c) => c.start)), fps) }), _jsx(Field, { name: "To", children: timecode(Math.max(...selected.map((c) => c.end)), fps) })] })] })) : model && props.film ? (_jsxs("section", { className: "panel", children: [_jsx("h2", { children: "Film" }), _jsxs("dl", { children: [_jsxs(Field, { name: "Size", children: [model.width, " \u00D7 ", model.height] }), _jsxs(Field, { name: "Rate", children: [model.fps, " fps"] }), _jsx(Field, { name: "Length", children: timecode(model.length, fps) }), _jsx(Field, { name: "Frames", children: model.length.toLocaleString() }), _jsx(Field, { name: "Tracks", children: model.rows.length }), _jsx(Field, { name: "Clips", children: model.clips.size.toLocaleString() }), _jsx(Field, { name: "Scenes", children: props.film.doc.scenes.length }), _jsx(Field, { name: "Assets", children: props.film.doc.assets.length }), _jsxs(Field, { name: "Built by", children: ["tongue ", props.film.build.tongue] })] }), props.film.doc.warnings.length > 0 ? _jsx("ul", { className: "warnings", children: props.film.doc.warnings.map((w) => _jsx("li", { children: w }, w)) }) : null, _jsx("p", { className: "hint", children: "Select a clip to see it here. Space plays; \u2190 \u2192 step; \u2191 \u2193 jump between edits." })] })) : null, readiness ? (_jsxs("section", { className: "panel", children: [_jsx("h2", { children: "Loading" }), _jsx("div", { className: "meter", children: _jsx("div", { className: "meter-fill", style: { width: `${(readiness.bytesReady / Math.max(1, readiness.bytes)) * 100}%` } }) }), _jsxs("dl", { children: [_jsxs(Field, { name: "Files", children: [readiness.ready, " of ", readiness.files, readiness.failed ? `, ${readiness.failed} failed` : ""] }), _jsxs(Field, { name: "Bytes", children: [mb(readiness.bytesReady), " of ", mb(readiness.bytes)] })] })] })) : null, props.errors.length > 0 ? (_jsxs("section", { className: "panel", children: [_jsx("h2", { children: "Problems" }), _jsx("ul", { className: "errors", children: props.errors.map((e) => _jsx("li", { children: e }, e)) })] })) : null] }));
|
|
124
|
+
}
|
|
125
|
+
const mb = (bytes) => (bytes >= 1024 * 1024 ? `${(bytes / 1024 / 1024).toFixed(1)} MB` : `${Math.ceil(bytes / 1024)} KB`);
|
|
126
|
+
const KIND_NAMES = { scene: "Scene", video: "Video", image: "Image", audio: "Audio" };
|
|
127
|
+
function ClipDetails(props) {
|
|
128
|
+
const { clip, fps } = props;
|
|
129
|
+
const doc = clip.doc;
|
|
130
|
+
const transport = useTransport();
|
|
131
|
+
return (_jsxs("section", { className: "panel", children: [_jsxs("h2", { className: "clip-title", children: [_jsx("span", { className: "kind", "data-kind": clip.kind, children: KIND_NAMES[clip.kind] }), " ", clip.id] }), _jsxs("dl", { children: [_jsx(Field, { name: doc.kind === "scene" ? "Scene" : "File", children: clip.label }), _jsx(Field, { name: "Track", children: clip.row }), _jsx(Field, { name: "Starts", children: timecode(clip.start, fps) }), _jsx(Field, { name: "Ends", children: timecode(clip.end, fps) }), _jsxs(Field, { name: "Length", children: [seconds(clip.end - clip.start, fps), " \u00B7 ", clip.end - clip.start, " frames"] }), doc.kind === "video" || doc.kind === "audio" ? _jsxs(Field, { name: "Source", children: [doc.in.toFixed(2), " s \u2192 ", doc.out.toFixed(2), " s", doc.speed !== 1 ? ` at ${doc.speed}×` : ""] }) : null, doc.kind === "audio" ? _jsxs(Field, { name: "Gain", children: [doc.gain, " dB \u00B7 fades ", doc.fadeIn, "/", doc.fadeOut, " frames"] }) : null, doc.kind === "video" && (doc.reverse || doc.freeze) ? _jsx(Field, { name: "Plays", children: doc.freeze ? "frozen" : "reversed" }) : null, doc.origin ? _jsxs(Field, { name: "Written at", children: [doc.origin.file, ":", doc.origin.line] }) : null] }), doc.kind === "scene" ? _jsx("pre", { className: "props", children: JSON.stringify(doc.props, null, 2) }) : null, _jsxs("div", { className: "panel-actions", children: [_jsx("button", { type: "button", className: "text", onClick: () => transport.seek(clip.start), children: "Go to its start" }), _jsx("button", { type: "button", className: "text", onClick: () => transport.send({ type: "range", from: clip.start, to: clip.end - 1 }), children: "Play just this" })] })] }));
|
|
132
|
+
}
|
|
133
|
+
// ---------------------------------------------------------------- timeline
|
|
134
|
+
const StudioClip = memo(function StudioClip(props) {
|
|
135
|
+
const { clip } = props;
|
|
136
|
+
return (_jsxs(Timeline.Clip, { clip: clip, className: "clip", children: [props.picture && clip.kind !== "audio" ? _jsx(Filmstrip, { clip: clip, className: "clip-strip" }) : null, _jsxs("span", { className: "clip-label", children: [_jsx("span", { className: "clip-name", children: clip.detail ?? clip.label }), clip.detail ? _jsx("span", { className: "clip-sub", children: clip.label }) : null] })] }));
|
|
137
|
+
});
|
|
138
|
+
function RowHeader(props) {
|
|
139
|
+
return (_jsxs("div", { className: "row-header", "data-kind": props.row.kind, children: [props.row.kind === "audio" ? _jsx(SoundIcon, {}) : _jsx(PictureIcon, {}), _jsx("span", { children: props.row.id })] }));
|
|
140
|
+
}
|
|
141
|
+
function TimelinePanel() {
|
|
142
|
+
const { timeline } = useTimelineContext();
|
|
143
|
+
const rows = useAtomValue(timeline.rows);
|
|
144
|
+
return (_jsxs("section", { className: "timeline", children: [_jsxs("div", { className: "timeline-headers", children: [_jsx("div", { className: "ruler-spacer" }), rows.map((row) => _jsx(RowHeader, { row: row }, row.id))] }), _jsx(Timeline.Root, { className: "timeline-body", children: _jsxs(Timeline.Scroller, { className: "timeline-scroller", children: [_jsx(Timeline.Ruler, { className: "ruler", renderTick: (tick) => (tick.label ? _jsx("span", { className: "tick-label", children: tick.label }) : null) }), _jsx(Timeline.Ready, { className: "ready" }), _jsx(Timeline.PlayRange, { className: "range" }), _jsx(Timeline.Rows, { children: (row) => (_jsx(Timeline.Row, { row: row, className: "row", renderClip: (clip) => _jsx(StudioClip, { clip: clip, picture: row.kind === "visual" }, clip.id) }, row.id)) }), _jsx(Timeline.Playhead, { className: "playhead", children: _jsx("span", { className: "playhead-handle" }) })] }) })] }));
|
|
145
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,40 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tongue-core/studio",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
|
|
3
|
+
"version": "0.1.0-rc.1",
|
|
4
|
+
"description": "Tongue's studio: a film's player, timeline and inspector in the browser, built only from @tongue-core/ui. Served by `tongue studio`, for a project on this machine or a build anywhere.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"license": "UNLICENSED",
|
|
7
|
+
"author": "Backpine",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "git+https://github.com/backpine/tongue-core.git",
|
|
11
|
+
"directory": "packages/studio"
|
|
12
|
+
},
|
|
13
|
+
"exports": {
|
|
14
|
+
"./app": {
|
|
15
|
+
"types": "./dist/main.d.ts",
|
|
16
|
+
"default": "./dist/main.js"
|
|
17
|
+
},
|
|
18
|
+
"./page": {
|
|
19
|
+
"types": "./dist/page.d.ts",
|
|
20
|
+
"default": "./dist/page.js"
|
|
21
|
+
},
|
|
22
|
+
"./package.json": "./package.json"
|
|
23
|
+
},
|
|
24
|
+
"files": [
|
|
25
|
+
"dist",
|
|
26
|
+
"assets",
|
|
27
|
+
"README.md"
|
|
28
|
+
],
|
|
29
|
+
"dependencies": {
|
|
30
|
+
"@effect/atom-react": "4.0.6",
|
|
31
|
+
"@tongue-core/project": "0.1.0-rc.1",
|
|
32
|
+
"@tongue-core/ui": "0.1.0-rc.1",
|
|
33
|
+
"effect": "4.0.6",
|
|
34
|
+
"react": "19.3.0",
|
|
35
|
+
"react-dom": "19.3.0"
|
|
36
|
+
},
|
|
37
|
+
"publishConfig": {
|
|
38
|
+
"access": "public"
|
|
39
|
+
}
|
|
40
|
+
}
|