Add a Director section to save and reload multi-shot video scripts.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-29 17:25:57 -05:00
parent 334bbba8af
commit 852b07bb97
11 changed files with 779 additions and 2 deletions
@@ -0,0 +1,80 @@
+<template>
+  <div class="flex min-w-0 flex-wrap items-end gap-2">
+    <label class="min-w-[10rem] flex-1 text-xs">
+      <span class="mb-1 block text-zinc-500">Saved script</span>
+      <select
+        :value="selectedId"
+        class="w-full rounded-xl border border-white/10 bg-zinc-950 px-2 py-1 text-xs outline-none ring-amber-300/40 focus:ring-2"
+        :disabled="disabled"
+        @change="onPick"
+      >
+        <option value="">Load…</option>
+        <option
+          v-for="script in scripts"
+          :key="script.id"
+          :value="script.id"
+        >{{ script.name }}</option>
+      </select>
+    </label>
+    <label class="w-36 text-xs">
+      <span class="mb-1 block text-zinc-500">Name</span>
+      <input
+        :value="name"
+        class="w-full rounded-xl border border-white/10 bg-zinc-950 px-2 py-1 text-xs outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
+        placeholder="Save as…"
+        maxlength="80"
+        :disabled="disabled"
+        @input="emit('update:name', ($event.target as HTMLInputElement).value)"
+        @keydown.enter.prevent="emit('save')"
+      >
+    </label>
+    <button
+      type="button"
+      class="rounded-xl border border-white/10 px-2 py-1 text-xs text-zinc-300 hover:border-amber-300/50 hover:text-white disabled:opacity-50"
+      :disabled="disabled || !name.trim()"
+      @click="emit('save')"
+    >
+      Save
+    </button>
+    <button
+      v-if="selectedId"
+      type="button"
+      class="rounded-xl border border-white/10 px-2 py-1 text-xs text-zinc-500 hover:border-red-400/40 hover:text-red-300 disabled:opacity-50"
+      :disabled="disabled"
+      @click="emit('remove')"
+    >
+      Delete
+    </button>
+    <NuxtLink
+      to="/director"
+      class="rounded-xl border border-white/10 px-2 py-1 text-xs text-zinc-400 hover:border-amber-300/40 hover:text-white"
+    >
+      Director
+    </NuxtLink>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { DirectorScript } from '~/utils/directorScripts'
+
+defineProps<{
+  scripts: DirectorScript[]
+  selectedId: string
+  name: string
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  load: [id: string]
+  save: []
+  remove: []
+  'update:name': [value: string]
+  'update:selectedId': [value: string]
+}>()
+
+function onPick(event: Event) {
+  const id = (event.target as HTMLSelectElement).value
+  emit('update:selectedId', id)
+  if (id) emit('load', id)
+}
+</script>