@stellartech/voice-widget-directus 1.0.6 → 1.0.7
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/dist/index.js +62 -8
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -649,8 +649,8 @@ function useVoicingApi(api) {
|
|
|
649
649
|
const response = await api.post(`/flows/trigger/${effectiveFlowId}`, voicingPayload);
|
|
650
650
|
const flowResponse = response.data;
|
|
651
651
|
const data = flowResponse?.data || flowResponse;
|
|
652
|
-
let jobId = null;
|
|
653
|
-
if (data?.callback_data) {
|
|
652
|
+
let jobId = data?.job_id || null;
|
|
653
|
+
if (!jobId && data?.callback_data) {
|
|
654
654
|
try {
|
|
655
655
|
const callbackData = JSON.parse(data.callback_data);
|
|
656
656
|
jobId = callbackData.job_id || null;
|
|
@@ -993,7 +993,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
993
993
|
const hasExistingVoices = ref(false);
|
|
994
994
|
const allVariants = ref([]);
|
|
995
995
|
const currentVariantIndex = ref(0);
|
|
996
|
-
ref(null);
|
|
996
|
+
const currentJobId = ref(null);
|
|
997
997
|
const isPollingProgress = ref(false);
|
|
998
998
|
const progressStatus = ref("");
|
|
999
999
|
const pendingVariantId = ref(null);
|
|
@@ -1237,6 +1237,20 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
1237
1237
|
);
|
|
1238
1238
|
await refreshVariants();
|
|
1239
1239
|
currentMode.value = "result";
|
|
1240
|
+
} else if (result.job_id) {
|
|
1241
|
+
stopVoiceoverPolling();
|
|
1242
|
+
if (pendingVariantId.value) {
|
|
1243
|
+
try {
|
|
1244
|
+
await api.patch(`/items/VoiceVariants/${pendingVariantId.value}`, {
|
|
1245
|
+
callback_data: result.job_id
|
|
1246
|
+
});
|
|
1247
|
+
console.log("[Voice Widget] Saved job_id to pending variant:", pendingVariantId.value);
|
|
1248
|
+
} catch (e) {
|
|
1249
|
+
console.warn("[Voice Widget] Failed to save job_id to variant:", e);
|
|
1250
|
+
}
|
|
1251
|
+
}
|
|
1252
|
+
startProgressPolling(result.job_id, voiceConfig);
|
|
1253
|
+
console.log("[Voice Widget] Async generation started with job tracking:", result.job_id);
|
|
1240
1254
|
} else {
|
|
1241
1255
|
processingMessage.value = "Generating voiceover...";
|
|
1242
1256
|
console.log("[Voice Widget] Async generation started, polling for completion...");
|
|
@@ -1279,6 +1293,37 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
1279
1293
|
console.error("Failed to delete variant:", error);
|
|
1280
1294
|
}
|
|
1281
1295
|
}
|
|
1296
|
+
async function startProgressPolling(jobId, voiceConfig) {
|
|
1297
|
+
currentJobId.value = jobId;
|
|
1298
|
+
isPollingProgress.value = true;
|
|
1299
|
+
while (isPollingProgress.value) {
|
|
1300
|
+
const job = await pollVoicingJob(jobId);
|
|
1301
|
+
if (job) {
|
|
1302
|
+
progressPercent.value = job.progress;
|
|
1303
|
+
processingMessage.value = job.message;
|
|
1304
|
+
progressStatus.value = job.status;
|
|
1305
|
+
if (job.status === "completed") {
|
|
1306
|
+
isPollingProgress.value = false;
|
|
1307
|
+
if (job.audio_file_id) {
|
|
1308
|
+
await createVoiceVariant(
|
|
1309
|
+
props.primaryKey,
|
|
1310
|
+
job.audio_file_id,
|
|
1311
|
+
voiceConfig
|
|
1312
|
+
);
|
|
1313
|
+
}
|
|
1314
|
+
await refreshVariants();
|
|
1315
|
+
currentMode.value = "result";
|
|
1316
|
+
return;
|
|
1317
|
+
}
|
|
1318
|
+
if (job.status.startsWith("failed")) {
|
|
1319
|
+
isPollingProgress.value = false;
|
|
1320
|
+
errorMessage.value = job.message || "Generation failed";
|
|
1321
|
+
return;
|
|
1322
|
+
}
|
|
1323
|
+
}
|
|
1324
|
+
await new Promise((r) => setTimeout(r, 2e3));
|
|
1325
|
+
}
|
|
1326
|
+
}
|
|
1282
1327
|
async function refreshVariants() {
|
|
1283
1328
|
const variants = await fetchVoiceVariants(props.primaryKey);
|
|
1284
1329
|
allVariants.value = variants;
|
|
@@ -1440,9 +1485,18 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
1440
1485
|
if (processingVariants.length > 0) {
|
|
1441
1486
|
console.log("[Voice Widget] Found", processingVariants.length, "processing voiceovers, showing progress");
|
|
1442
1487
|
currentMode.value = "progress";
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1488
|
+
pendingVariantId.value = processingVariants[0].id;
|
|
1489
|
+
const savedJobId = processingVariants[0].callback_data;
|
|
1490
|
+
if (savedJobId) {
|
|
1491
|
+
console.log("[Voice Widget] Resuming progress polling with job_id:", savedJobId);
|
|
1492
|
+
processingMessage.value = "Resuming progress...";
|
|
1493
|
+
progressPercent.value = 0;
|
|
1494
|
+
startProgressPolling(savedJobId, processingVariants[0].voice_config || {});
|
|
1495
|
+
} else {
|
|
1496
|
+
processingMessage.value = "Generating voiceover...";
|
|
1497
|
+
progressPercent.value = 50;
|
|
1498
|
+
startVoiceoverPolling();
|
|
1499
|
+
}
|
|
1446
1500
|
} else {
|
|
1447
1501
|
const completedVariants = variants.filter((v) => v.audio_file_id);
|
|
1448
1502
|
hasExistingVoices.value = completedVariants.length > 0;
|
|
@@ -1988,10 +2042,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
1988
2042
|
}
|
|
1989
2043
|
});
|
|
1990
2044
|
|
|
1991
|
-
var css = "\n.voice-widget[data-v-
|
|
2045
|
+
var css = "\n.voice-widget[data-v-6e30b86e] {\n font-family: var(--theme--fonts--sans--font-family);\n padding: 16px;\n border: 1px solid var(--theme--form--field--input--border-color);\n border-radius: var(--theme--border-radius);\n background: var(--theme--background);\n}\n.widget__header[data-v-6e30b86e] {\n margin-bottom: 20px;\n}\n.widget__header-row[data-v-6e30b86e] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 16px;\n}\n.widget__header-text[data-v-6e30b86e] {\n flex: 1;\n}\n.widget__title[data-v-6e30b86e] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0 0 4px 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--theme--foreground);\n}\n.widget__collapse-btn[data-v-6e30b86e] {\n background: none;\n border: none;\n padding: 4px;\n cursor: pointer;\n color: var(--theme--foreground-subdued);\n border-radius: 4px;\n}\n.widget__collapse-btn[data-v-6e30b86e]:hover {\n background: var(--theme--background-accent);\n}\n.widget__subtitle[data-v-6e30b86e] {\n margin: 0;\n font-size: 14px;\n color: var(--theme--foreground-subdued);\n}\n.widget__header-controls[data-v-6e30b86e] {\n display: flex;\n gap: 16px;\n align-items: center;\n}\n.widget__url-input[data-v-6e30b86e] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.widget__url-label[data-v-6e30b86e] {\n font-size: 12px;\n color: var(--theme--foreground-subdued);\n white-space: nowrap;\n}\n.widget__url-field[data-v-6e30b86e] {\n padding: 6px 10px;\n border: 1px solid var(--theme--form--field--input--border-color);\n border-radius: var(--theme--border-radius);\n font-size: 12px;\n width: 280px;\n background: var(--theme--form--field--input--background);\n color: var(--theme--foreground);\n}\n.widget__section[data-v-6e30b86e] {\n margin-bottom: 20px;\n}\n.widget__section-label[data-v-6e30b86e] {\n display: block;\n margin-bottom: 8px;\n font-size: 14px;\n font-weight: 500;\n color: var(--theme--foreground);\n}\n.widget__model-buttons[data-v-6e30b86e] {\n display: flex;\n gap: 8px;\n}\n.widget__model-btn[data-v-6e30b86e] {\n padding: 8px 16px;\n border: 1px solid var(--theme--form--field--input--border-color);\n border-radius: var(--theme--border-radius);\n background: var(--theme--background);\n color: var(--theme--foreground);\n cursor: pointer;\n font-size: 14px;\n transition: all 0.15s ease;\n}\n.widget__model-btn[data-v-6e30b86e]:hover {\n border-color: var(--theme--primary);\n}\n.widget__model-btn--active[data-v-6e30b86e] {\n background: var(--theme--primary);\n border-color: var(--theme--primary);\n color: var(--theme--primary-foreground, #fff);\n}\n.widget__voice-list[data-v-6e30b86e] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.widget__section--toggle[data-v-6e30b86e] {\n padding: 12px;\n background: var(--theme--background-subdued);\n border-radius: var(--theme--border-radius);\n}\n.widget__toggle[data-v-6e30b86e] {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n}\n.widget__toggle input[data-v-6e30b86e] {\n width: 16px;\n height: 16px;\n cursor: pointer;\n}\n.widget__toggle-label[data-v-6e30b86e] {\n font-size: 14px;\n font-weight: 500;\n color: var(--theme--foreground);\n}\n.widget__toggle-note[data-v-6e30b86e] {\n margin: 4px 0 0 24px;\n font-size: 12px;\n color: var(--theme--foreground-subdued);\n}\n.widget__footer[data-v-6e30b86e] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 16px;\n border-top: 1px solid var(--theme--border-color-subdued);\n margin-top: 20px;\n}\n.widget__footer-left[data-v-6e30b86e],\n.widget__footer-right[data-v-6e30b86e] {\n display: flex;\n gap: 8px;\n}\n.widget__variant-nav[data-v-6e30b86e] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n margin-bottom: 16px;\n padding: 8px 0;\n}\n.widget__variant-counter[data-v-6e30b86e] {\n font-size: 14px;\n font-weight: 500;\n color: var(--theme--foreground-subdued);\n min-width: 60px;\n text-align: center;\n}\n.widget__btn--icon[data-v-6e30b86e] {\n padding: 6px;\n min-width: 32px;\n min-height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.widget__result-date[data-v-6e30b86e] {\n margin-top: 8px;\n font-size: 12px;\n color: var(--theme--foreground-subdued);\n}\n.widget__btn[data-v-6e30b86e] {\n padding: 8px 16px;\n border: none;\n border-radius: var(--theme--border-radius);\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n.widget__btn[data-v-6e30b86e]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.widget__btn--primary[data-v-6e30b86e] {\n background: var(--theme--primary);\n color: var(--theme--primary-foreground, #fff);\n}\n.widget__btn--primary[data-v-6e30b86e]:hover:not(:disabled) {\n background: var(--theme--primary-accent);\n}\n.widget__btn--secondary[data-v-6e30b86e] {\n background: var(--theme--background-accent);\n color: var(--theme--foreground);\n border: 1px solid var(--theme--form--field--input--border-color);\n}\n.widget__btn--secondary[data-v-6e30b86e]:hover:not(:disabled) {\n background: var(--theme--background-normal);\n}\n\n/* Processing State */\n.widget__processing[data-v-6e30b86e] {\n padding: 40px 20px;\n text-align: center;\n}\n.widget__progress[data-v-6e30b86e] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n margin-bottom: 16px;\n font-size: 16px;\n color: var(--theme--foreground);\n}\n.widget__progress-bar[data-v-6e30b86e] {\n height: 8px;\n background: var(--theme--background-accent);\n border-radius: 4px;\n overflow: hidden;\n max-width: 400px;\n margin: 0 auto;\n}\n.widget__progress-fill[data-v-6e30b86e] {\n height: 100%;\n background: var(--theme--primary);\n transition: width 0.3s ease;\n}\n\n/* Error State */\n.widget__error[data-v-6e30b86e] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n padding: 20px;\n color: var(--theme--danger);\n text-align: center;\n}\n.widget__error-actions[data-v-6e30b86e] {\n display: flex;\n gap: 8px;\n margin-top: 8px;\n}\n.widget__retry[data-v-6e30b86e] {\n padding: 6px 12px;\n background: var(--theme--danger);\n color: #fff;\n border: none;\n border-radius: var(--theme--border-radius);\n cursor: pointer;\n}\n\n/* Loading State */\n.widget__loading[data-v-6e30b86e] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 40px 20px;\n color: var(--theme--foreground-subdued);\n}\n\n/* Result State */\n.widget__result[data-v-6e30b86e] {\n padding: 20px;\n background: var(--theme--background-subdued);\n border-radius: var(--theme--border-radius);\n margin-bottom: 20px;\n}\n.widget__result-info[data-v-6e30b86e] {\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid var(--theme--border-color-subdued);\n}\n.widget__result-info p[data-v-6e30b86e] {\n margin: 4px 0;\n font-size: 14px;\n color: var(--theme--foreground-subdued);\n}\n.widget__result-info strong[data-v-6e30b86e] {\n color: var(--theme--foreground);\n}\n\n/* Variants List View */\n.widget__variants-list[data-v-6e30b86e] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n max-height: 400px;\n overflow-y: auto;\n margin-bottom: 16px;\n}\n.widget__variant-item[data-v-6e30b86e] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px;\n border: 1px solid var(--theme--border-color-subdued);\n border-radius: var(--theme--border-radius);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n.widget__variant-item[data-v-6e30b86e]:hover {\n border-color: var(--theme--primary);\n}\n.widget__variant-item--selected[data-v-6e30b86e] {\n border-color: var(--theme--primary);\n background: var(--theme--primary-background);\n}\n.widget__variant-radio[data-v-6e30b86e] {\n flex-shrink: 0;\n}\n.widget__variant-radio input[data-v-6e30b86e] {\n width: 16px;\n height: 16px;\n cursor: pointer;\n}\n.widget__variant-player[data-v-6e30b86e] {\n flex: 1;\n min-width: 200px;\n}\n.widget__variant-meta[data-v-6e30b86e] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 120px;\n}\n.widget__variant-voice[data-v-6e30b86e] {\n font-size: 13px;\n font-weight: 500;\n color: var(--theme--foreground);\n}\n.widget__variant-date[data-v-6e30b86e] {\n font-size: 11px;\n color: var(--theme--foreground-subdued);\n}\n.widget__btn--danger[data-v-6e30b86e] {\n color: var(--theme--danger);\n background: transparent;\n border: none;\n}\n.widget__btn--danger[data-v-6e30b86e]:hover {\n background: var(--theme--danger-background);\n}\n.widget__selected-info[data-v-6e30b86e] {\n padding: 12px;\n background: var(--theme--background-subdued);\n border-radius: var(--theme--border-radius);\n margin-bottom: 16px;\n}\n.widget__selected-info p[data-v-6e30b86e] {\n margin: 4px 0;\n font-size: 14px;\n color: var(--theme--foreground-subdued);\n}\n.widget__selected-info strong[data-v-6e30b86e] {\n color: var(--theme--foreground);\n}\n.widget__progress-status[data-v-6e30b86e] {\n text-align: center;\n font-size: 12px;\n color: var(--theme--foreground-subdued);\n margin-top: 8px;\n}\n\n/* Animations */\n.spinning[data-v-6e30b86e] {\n animation: spin-6e30b86e 1s linear infinite;\n}\n@keyframes spin-6e30b86e {\nfrom { transform: rotate(0deg);\n}\nto { transform: rotate(360deg);\n}\n}\n";
|
|
1992
2046
|
n(css,{});
|
|
1993
2047
|
|
|
1994
|
-
var InterfaceComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
2048
|
+
var InterfaceComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6e30b86e"], ["__file", "interface.vue"]]);
|
|
1995
2049
|
|
|
1996
2050
|
var index = defineInterface({
|
|
1997
2051
|
id: "voice-widget",
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@stellartech/voice-widget-directus",
|
|
3
3
|
"description": "Voice generation widget with model/voice selection and audio preview for Directus",
|
|
4
4
|
"icon": "mic",
|
|
5
|
-
"version": "1.0.
|
|
5
|
+
"version": "1.0.7",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"readme": "README.md",
|
|
8
8
|
"repository": {
|