paytolaugh/create.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>New video — PayToLaugh</title>
<meta name="description" content="Pick your pet, paste a link, tell the director what you think.">
<link rel="stylesheet" href="/assets/app.css">
</head>
<body>
<div class="wrap">

  <header class="page">
    <h1>Make a new video</h1>
    <p>Pick the pet, paste whatever you want them to react to, and tell the director what you actually think. The opinion is yours; the delivery is theirs.</p>
  </header>

  <section>
    <div class="card">
      <div class="msg" id="msg"></div>
      <form id="form">

        <h2 class="sec">1 &middot; Who is talking</h2>
        <div class="field">
          <label for="pet">Pet</label>
          <select id="pet"><option value="__new">Add a new pet…</option></select>
        </div>

        <div id="newpet">
          <div class="row">
            <div class="field">
              <label for="pname">Name</label>
              <input type="text" id="pname" placeholder="Astro">
            </div>
            <div class="field">
              <label for="pbreed">Breed</label>
              <input type="text" id="pbreed" placeholder="Labrador Retriever">
            </div>
          </div>
          <div class="field">
            <label for="pappear">What do they look like</label>
            <span class="hint">Colour and markings matter more than you would think. Naming them plainly is what keeps the likeness.</span>
            <input type="text" id="pappear" placeholder="a yellow Labrador with a broad head, dark eyes and a black nose">
          </div>
          <div class="field">
            <label for="pperson">What are they like</label>
            <span class="hint">This is what makes it sound like your pet and not a generic one.</span>
            <input type="text" id="pperson" placeholder="convinced he runs the household, suspicious of anything with wheels">
          </div>
        </div>

        <h2 class="sec" style="margin-top:34px">2 &middot; What they are reacting to</h2>
        <div class="field">
          <label for="url">Link to an article, post or story</label>
          <span class="hint">Anything with a claim in it. News piece, a thread, a video.</span>
          <input type="url" id="url" placeholder="https://…">
        </div>
        <div class="field">
          <label for="notes">Your opinion, and notes for the director</label>
          <span class="hint">Say what you think and how you want it played. Two sentences is plenty.</span>
          <textarea id="notes" placeholder="Astro has hated our robot vacuum since day one and barks at it every time it docks. Play it like he is filing a formal grievance with management."></textarea>
        </div>
        <div class="field">
          <label>Do they agree or disagree?</label>
          <div class="chips" id="stance">
            <span class="chip on" data-v="auto">Let the writer decide</span>
            <span class="chip" data-v="agree">Agree</span>
            <span class="chip" data-v="disagree">Disagree</span>
            <span class="chip" data-v="mixed">A bit of both</span>
          </div>
        </div>

        <h2 class="sec" style="margin-top:34px">3 &middot; How long</h2>
        <div class="field">
          <div class="chips" id="len">
            <span class="chip" data-v="2">16 seconds</span>
            <span class="chip on" data-v="4">32 seconds</span>
            <span class="chip" data-v="6">48 seconds</span>
          </div>
        </div>
        <div class="quote">
          <div><div class="big" id="price">$8.85</div><div class="sub" id="plen">32 seconds &middot; 4 shots</div></div>
          <div class="sub">You approve the script before anything is filmed.</div>
        </div>

        <button class="btn" id="go" type="submit" style="margin-top:26px">Submit for scripting</button>
      </form>
    </div>

    <p class="note" style="margin-top:22px">
      <strong>What happens next.</strong> Submitting records your request and puts it in the
      queue. Nothing is charged and nothing is filmed yet. Payment and automatic
      production get switched on once proper sign-in is in place.
    </p>
  </section>

  <footer>PayToLaugh &middot; your pet has opinions.</footer>
</div>

<script src="/assets/app.js"></script>
<script>
navBar("create");
var email = requireSession();

var stance = "auto", segments = 4;

function chipGroup(id, cb) {
  var g = document.getElementById(id);
  g.addEventListener("click", function (e) {
    var c = e.target.closest(".chip");
    if (!c) return;
    [].forEach.call(g.querySelectorAll(".chip"), function (x) { x.classList.remove("on"); });
    c.classList.add("on");
    cb(c.getAttribute("data-v"));
  });
}
chipGroup("stance", function (v) { stance = v; });
chipGroup("len", function (v) { segments = parseInt(v, 10); paint(); });

function paint() {
  var p = priceFor(segments);
  document.getElementById("price").textContent = "$" + p.price.toFixed(2);
  document.getElementById("plen").textContent = p.seconds + " seconds · " + segments + " shots";
}
paint();

var petSel = document.getElementById("pet");
var newPet = document.getElementById("newpet");
function togglePet() { newPet.style.display = petSel.value === "__new" ? "" : "none"; }
petSel.addEventListener("change", togglePet);

(async function loadPets() {
  if (!email) return;
  var r = await api("list_pets", { email: email });
  if (r.ok && r.pets && r.pets.length) {
    r.pets.forEach(function (p) {
      var o = document.createElement("option");
      o.value = p.id || p.name;
      o.textContent = p.name + (p.breed ? " · " + p.breed : "");
      o.dataset.name = p.name;
      petSel.insertBefore(o, petSel.firstChild);
    });
    petSel.selectedIndex = 0;
  }
  togglePet();
})();

document.getElementById("form").addEventListener("submit", async function (e) {
  e.preventDefault();
  hideMsg("msg");
  var btn = document.getElementById("go");
  var url = document.getElementById("url").value.trim();
  var notes = document.getElementById("notes").value.trim();

  var petId = "", petName = "";
  if (petSel.value === "__new") {
    petName = document.getElementById("pname").value.trim();
    if (!petName) { showMsg("msg", "Your pet needs a name."); return; }
  } else {
    petId = petSel.value;
    petName = petSel.options[petSel.selectedIndex].dataset.name || "";
  }
  if (!url) { showMsg("msg", "Paste a link to whatever you want them to react to."); return; }
  if (notes.length < 10) { showMsg("msg", "Tell the director what you think, in a sentence or two."); return; }

  btn.disabled = true; btn.textContent = "Submitting…";

  if (petSel.value === "__new") {
    var pr = await api("save_pet", { email: email, pet: {
      name: petName,
      breed: document.getElementById("pbreed").value.trim(),
      appearance: document.getElementById("pappear").value.trim(),
      personality: document.getElementById("pperson").value.trim(),
      species: "dog"
    }});
    if (!pr.ok) { btn.disabled = false; btn.textContent = "Submit for scripting"; showMsg("msg", pr.error || "Could not save that pet."); return; }
    petId = pr.pet.id || "";
  }

  var r = await api("create_project", {
    email: email, pet_id: petId, pet_name: petName,
    source_url: url, owner_notes: notes, stance: stance, segments: segments
  });
  btn.disabled = false; btn.textContent = "Submit for scripting";
  if (!r.ok) { showMsg("msg", r.error || "That did not go through. Please try again."); return; }
  showMsg("msg", "Submitted. Taking you to your videos…", "ok");
  setTimeout(function () { location.href = "/videos.html"; }, 650);
});
</script>
</body>
</html>