);
}
function StudioView() {
const u = useUser();
const enabledPlatforms = u.platforms.filter(p => p.enabled);
const [brief, setBrief] = useState("");
const [tone, setTone] = useState("calm");
const [targets, setTargets] = useState(() => enabledPlatforms.slice(0, 2).map(p => p.channelId));
const [variantsByCh, setVariantsByCh] = useState({}); // channelId → [string]
const [picked, setPicked] = useState({}); // channelId → string
// Media is per-channel; channel "_default" is the fallback used when a
// specific channel has no override. Each entry: { url, kind: 'image'|'video' }.
const [media, setMedia] = useState({});
// Crop overrides per (channelId + formatId): { x: 0–100, y: 0–100 }.
// Defaults to {50, 50} if unset (centred — matches object-position default).
const [crops, setCrops] = useState({});
const [generating, setGenerating] = useState(false);
// Active marks. (x, y) here is just the seed position — once you drag a
// mark inside a specific format, that format gets its own override.
// scale stays shared across formats for now (one slider per mark).
const [stagedMarks, setStagedMarks] = useState([]); // [{ id, mid, x, y, scale }]
// Per-format mark positions: { `${chId}__${formatId}__${markId}`: { x, y } }
const [markPositions, setMarkPositions] = useState({});
const [savedAt, setSavedAt] = useState(null);
const mediaForCh = (chId) => media[chId] || media._default || null;
const cropKey = (chId, fid) => `${chId}__${fid}`;
const getCrop = (chId, fid) => crops[cropKey(chId, fid)] || { x: 50, y: 50 };
const setCrop = (chId, fid, next) => setCrops(c => ({ ...c, [cropKey(chId, fid)]: next }));
const resetCrop = (chId, fid) => setCrops(c => { const n = { ...c }; delete n[cropKey(chId, fid)]; return n; });
const toggleTarget = (chId) => {
setTargets(t => t.includes(chId) ? t.filter(x => x !== chId) : [...t, chId]);
};
const isMarkStaged = (mid) => stagedMarks.some(m => m.mid === mid);
const toggleMark = (mid) => {
if (stagedMarks.some(m => m.mid === mid)) {
setStagedMarks(list => list.filter(m => m.mid !== mid));
// Drop any per-format overrides pointing at this mark.
setMarkPositions(p => {
const next = { ...p };
for (const k of Object.keys(next)) if (k.endsWith("__" + mid)) delete next[k];
return next;
});
} else {
setStagedMarks(list => [...list, { id: mid, mid, x: 12, y: 88, scale: 1 }]);
}
};
const scaleMark = (id, scale) => setStagedMarks(list => list.map(m => m.id === id ? { ...m, scale } : m));
const markKey = (chId, fid, mid) => `${chId}__${fid}__${mid}`;
const markPosFor = (chId, fid, m) => markPositions[markKey(chId, fid, m.id)] ?? { x: m.x, y: m.y };
const setMarkPos = (chId, fid, mid, pos) => setMarkPositions(p => ({ ...p, [markKey(chId, fid, mid)]: pos }));
// Has this mark been moved away from the seed in any format?
const markHasOverrides = (mid) => Object.keys(markPositions).some(k => k.endsWith("__" + mid));
// Wipe all per-format overrides for a mark so every format reverts to the seed.
const resetMarkPositions = (mid) => setMarkPositions(p => {
const next = { ...p };
for (const k of Object.keys(next)) if (k.endsWith("__" + mid)) delete next[k];
return next;
});
const generate = () => {
setGenerating(true);
setTimeout(() => {
const next = {};
for (const ch of targets) next[ch] = generateCopyMock(brief, ch, tone);
setVariantsByCh(next);
// Auto-pick first variant per channel.
const auto = {};
for (const ch of targets) auto[ch] = next[ch][0];
setPicked(auto);
setGenerating(false);
setSavedAt(null);
}, 700);
};
// Upload media for a target — channelId = "_default" or a specific channel.
// Detects image vs video and revokes the previous Blob URL.
const uploadMedia = (target, file) => {
if (!file) return;
const url = URL.createObjectURL(file);
const kind = file.type.startsWith("video/") ? "video" : "image";
setMedia(prev => {
const old = prev[target];
if (old?.url?.startsWith("blob:")) URL.revokeObjectURL(old.url);
return { ...prev, [target]: { url, kind, name: file.name } };
});
};
// Pick from the imagery library — the URL is served from disk so we
// don't need to revoke anything; just swap the entry.
const pickMediaFromLib = (target, photo) => {
setMedia(prev => {
const old = prev[target];
if (old?.url?.startsWith("blob:")) URL.revokeObjectURL(old.url);
return { ...prev, [target]: { url: photo.url, kind: "image", name: photo.name } };
});
};
const clearMedia = (target) => {
setMedia(prev => {
const old = prev[target];
if (old?.url?.startsWith("blob:")) URL.revokeObjectURL(old.url);
const n = { ...prev }; delete n[target]; return n;
});
};
// Group formats by channel — one row per channel.
const formatsByChannel = useMemo(() => {
const out = [];
for (const ch of targets) {
const p = enabledPlatforms.find(p => p.channelId === ch);
if (!p) continue;
out.push({ platform: p, formats: p.formats.filter(f => !f.disabled) });
}
return out;
}, [enabledPlatforms, targets]);
const canPublish = targets.length > 0
&& targets.every(ch => picked[ch] && picked[ch].trim());
const pushToPlan = async () => {
if (!canPublish) return;
const today = new Date();
const iso = `${today.getFullYear()}-${String(today.getMonth()+1).padStart(2,"0")}-${String(today.getDate()).padStart(2,"0")}`;
const copy = {};
for (const ch of targets) copy[ch] = picked[ch];
const payload = {
date: iso,
time: "09:00",
topic: brief.trim().slice(0, 60) || "Nytt utkast från Studio",
type: targets.includes("newsletter") ? "Nyhetsbrev" : "Feed",
sponsoring: "Organiskt",
channels: targets,
owners: [u.user.id],
status: "draft",
copy,
sokvag: "/Studio/utkast/draft",
notering: brief.trim(),
flowId: u.flows.find(f => f.isDefault)?.id || u.flows[0]?.id,
previewImage: (media[targets[0]]?.kind === "image" ? media[targets[0]]?.url : null)
?? (media._default?.kind === "image" ? media._default?.url : null)
?? null,
};
try {
const created = await u.createPost(payload);
setSavedAt(Date.now());
navigate("/content/post/" + created.id);
} catch (e) {
console.error(e);
alert("Kunde inte spara — försök igen.");
}
};
return (
Studio
Skapa nytt material.
Skriv en kort idé — Studio föreslår copy per plattform, anpassar bilden till alla format och tar med dina varumärkesmärken. Klart? Lägg det i Content Plan.
{isSel && }