gator/paytolaugh
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Gather pictures and footage before the script is written

Browse source 
The owner's pictures could only be attached after the script existed, so the
writer planned a piece in ignorance and the pictures were fitted to finished
words afterwards. That is backwards.

Making a video is now two steps. The project is created on hold, collateral is
attached, and only then does the writer run — knowing it has a photograph of
the actual product and eleven seconds of pool footage to write toward.

Footage is a link plus an in and out point, set by scrubbing the video itself.
The renderer already trimmed arbitrary sources with in/out, so this needed no
change to the cut at all, only somewhere to put the information.
This commit is contained in:
gator 2026-09-07 21:15:34 +00:00
parent 99e2e7ce85
commit 28b98f8326
1 changed files with 45 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
create.html
View file

@ -75,13 +75,55 @@
<div class="sub">You direct and approve before anything is filmed.</div>
</div>
<button class="btn" id="go" type="submit" style="margin-top:26px">Write the script</button>
<button class="btn" id="go" type="submit" style="margin-top:26px">Next &middot; add pictures and footage</button>
</form>
</div>
<div class="card" id="colcard" style="display:none;margin-top:22px">
<h2 class="sec">5 &middot; What you want shown on screen <span style="color:var(--muted);font-weight:400;font-size:15px">(optional)</span></h2>
<p class="hint" style="margin-bottom:16px">Anything here is given to the writer <em>before</em> it starts, so the script gets written around what you actually have rather than having pictures fitted to it afterwards. Leave it empty and the cutaways are generated.</p>
<div class="drop" id="drop" tabindex="0">Paste a picture, drop one here, or click to choose</div>
<input type="file" id="picker" accept="image/*" multiple style="display:none">
<div class="field" style="margin-top:18px">
<label for="vurl">Or a link to a video file</label>
<span class="hint">It has to be the video file itself &mdash; a link ending .mp4 or similar. A link to a <em>page</em> containing a video is a web page, and there is nothing there for us to cut.</span>
<div style="display:flex;gap:10px;flex-wrap:wrap">
<input type="text" id="vurl" placeholder="https://example.com/pool-robot.mp4" style="flex:1 1 320px">
<button type="button" class="btn ghost" id="vload">Load it</button>
</div>
</div>
<div id="vedit" style="display:none;margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:12px">
<video id="vprev" controls playsinline preload="metadata" style="width:100%;max-width:420px;border-radius:10px;background:#000;display:block"></video>
<div style="margin-top:14px">
<label class="mini" style="font-size:13px;font-weight:600;display:block;margin-bottom:5px">Start <span id="inlab" style="color:var(--muted);font-weight:400">0.0s</span></label>
<input type="range" id="vin" min="0" max="100" step="0.1" value="0" style="width:100%">
<label class="mini" style="font-size:13px;font-weight:600;display:block;margin:12px 0 5px">End <span id="outlab" style="color:var(--muted);font-weight:400">0.0s</span></label>
<input type="range" id="vout" min="0" max="100" step="0.1" value="5" style="width:100%">
<p class="hint" id="vlen" style="margin:10px 0 0"></p>
</div>
<div class="field" style="margin-top:12px">
<label for="vdesc">What is in it</label>
<input type="text" id="vdesc" placeholder="the pool robot climbing the wall and falling off">
</div>
<button type="button" class="btn ghost" id="vplay">Play just that bit</button>
<button type="button" class="btn" id="vadd" style="margin-left:8px">Use this clip</button>
</div>
<div class="pics" id="pics" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:18px"></div>
<div style="margin-top:24px;padding-top:20px;border-top:1px solid var(--line)">
<button type="button" class="btn" id="write">Write the script</button>
<span class="hint" style="margin-left:12px">Nothing is charged and nothing is filmed yet.</span>
</div>
</div>
<p class="note" style="margin-top:22px">
<strong>What happens next.</strong> The writer starts straight away. You will be able to
read it, change the setting and camera on every shot, ask for rewrites, and approve it.
<strong>What happens next.</strong> You add anything you want shown on screen, then the
writer runs knowing what it has to work with. You will be able to read it, change the
setting and camera on every shot, ask for rewrites, and approve it.
Nothing is charged and nothing is filmed yet.
</p>
</section>