@stellartech/voice-widget-directus 1.0.6 → 1.0.8
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 +73 -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);
|
|
@@ -1131,6 +1131,12 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
1131
1131
|
if (pendingVariant?.audio_file_id) {
|
|
1132
1132
|
console.log("[Voice Widget] Pending variant completed with audio:", pendingVariant.audio_file_id);
|
|
1133
1133
|
isNewVariantComplete = true;
|
|
1134
|
+
} else if (pendingVariant?.status === "failed") {
|
|
1135
|
+
console.log("[Voice Widget] Pending variant failed, stopping poll");
|
|
1136
|
+
stopVoiceoverPolling();
|
|
1137
|
+
pendingVariantId.value = null;
|
|
1138
|
+
errorMessage.value = "Voice generation failed. Please try again.";
|
|
1139
|
+
return;
|
|
1134
1140
|
} else {
|
|
1135
1141
|
console.log(`[Voice Widget] Poll #${voiceoverPollCount} - pending variant not yet complete`);
|
|
1136
1142
|
}
|
|
@@ -1139,6 +1145,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
1139
1145
|
if (processingThatCompleted) {
|
|
1140
1146
|
console.log("[Voice Widget] Found completed processing variant:", processingThatCompleted.id);
|
|
1141
1147
|
isNewVariantComplete = true;
|
|
1148
|
+
} else if (allVariantsNow.length > 0 && allVariantsNow.every((v) => v.status === "failed")) {
|
|
1149
|
+
console.log("[Voice Widget] All variants failed, stopping poll");
|
|
1150
|
+
stopVoiceoverPolling();
|
|
1151
|
+
errorMessage.value = "Voice generation failed. Please try again.";
|
|
1152
|
+
return;
|
|
1142
1153
|
}
|
|
1143
1154
|
}
|
|
1144
1155
|
if (isNewVariantComplete) {
|
|
@@ -1237,6 +1248,20 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
1237
1248
|
);
|
|
1238
1249
|
await refreshVariants();
|
|
1239
1250
|
currentMode.value = "result";
|
|
1251
|
+
} else if (result.job_id) {
|
|
1252
|
+
stopVoiceoverPolling();
|
|
1253
|
+
if (pendingVariantId.value) {
|
|
1254
|
+
try {
|
|
1255
|
+
await api.patch(`/items/VoiceVariants/${pendingVariantId.value}`, {
|
|
1256
|
+
callback_data: result.job_id
|
|
1257
|
+
});
|
|
1258
|
+
console.log("[Voice Widget] Saved job_id to pending variant:", pendingVariantId.value);
|
|
1259
|
+
} catch (e) {
|
|
1260
|
+
console.warn("[Voice Widget] Failed to save job_id to variant:", e);
|
|
1261
|
+
}
|
|
1262
|
+
}
|
|
1263
|
+
startProgressPolling(result.job_id, voiceConfig);
|
|
1264
|
+
console.log("[Voice Widget] Async generation started with job tracking:", result.job_id);
|
|
1240
1265
|
} else {
|
|
1241
1266
|
processingMessage.value = "Generating voiceover...";
|
|
1242
1267
|
console.log("[Voice Widget] Async generation started, polling for completion...");
|
|
@@ -1279,6 +1304,37 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
1279
1304
|
console.error("Failed to delete variant:", error);
|
|
1280
1305
|
}
|
|
1281
1306
|
}
|
|
1307
|
+
async function startProgressPolling(jobId, voiceConfig) {
|
|
1308
|
+
currentJobId.value = jobId;
|
|
1309
|
+
isPollingProgress.value = true;
|
|
1310
|
+
while (isPollingProgress.value) {
|
|
1311
|
+
const job = await pollVoicingJob(jobId);
|
|
1312
|
+
if (job) {
|
|
1313
|
+
progressPercent.value = job.progress;
|
|
1314
|
+
processingMessage.value = job.message;
|
|
1315
|
+
progressStatus.value = job.status;
|
|
1316
|
+
if (job.status === "completed") {
|
|
1317
|
+
isPollingProgress.value = false;
|
|
1318
|
+
if (job.audio_file_id) {
|
|
1319
|
+
await createVoiceVariant(
|
|
1320
|
+
props.primaryKey,
|
|
1321
|
+
job.audio_file_id,
|
|
1322
|
+
voiceConfig
|
|
1323
|
+
);
|
|
1324
|
+
}
|
|
1325
|
+
await refreshVariants();
|
|
1326
|
+
currentMode.value = "result";
|
|
1327
|
+
return;
|
|
1328
|
+
}
|
|
1329
|
+
if (job.status.startsWith("failed")) {
|
|
1330
|
+
isPollingProgress.value = false;
|
|
1331
|
+
errorMessage.value = job.message || "Generation failed";
|
|
1332
|
+
return;
|
|
1333
|
+
}
|
|
1334
|
+
}
|
|
1335
|
+
await new Promise((r) => setTimeout(r, 2e3));
|
|
1336
|
+
}
|
|
1337
|
+
}
|
|
1282
1338
|
async function refreshVariants() {
|
|
1283
1339
|
const variants = await fetchVoiceVariants(props.primaryKey);
|
|
1284
1340
|
allVariants.value = variants;
|
|
@@ -1440,9 +1496,18 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
1440
1496
|
if (processingVariants.length > 0) {
|
|
1441
1497
|
console.log("[Voice Widget] Found", processingVariants.length, "processing voiceovers, showing progress");
|
|
1442
1498
|
currentMode.value = "progress";
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1499
|
+
pendingVariantId.value = processingVariants[0].id;
|
|
1500
|
+
const savedJobId = processingVariants[0].callback_data;
|
|
1501
|
+
if (savedJobId) {
|
|
1502
|
+
console.log("[Voice Widget] Resuming progress polling with job_id:", savedJobId);
|
|
1503
|
+
processingMessage.value = "Resuming progress...";
|
|
1504
|
+
progressPercent.value = 0;
|
|
1505
|
+
startProgressPolling(savedJobId, processingVariants[0].voice_config || {});
|
|
1506
|
+
} else {
|
|
1507
|
+
processingMessage.value = "Generating voiceover...";
|
|
1508
|
+
progressPercent.value = 50;
|
|
1509
|
+
startVoiceoverPolling();
|
|
1510
|
+
}
|
|
1446
1511
|
} else {
|
|
1447
1512
|
const completedVariants = variants.filter((v) => v.audio_file_id);
|
|
1448
1513
|
hasExistingVoices.value = completedVariants.length > 0;
|
|
@@ -1988,10 +2053,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
1988
2053
|
}
|
|
1989
2054
|
});
|
|
1990
2055
|
|
|
1991
|
-
var css = "\n.voice-widget[data-v-
|
|
2056
|
+
var css = "\n.voice-widget[data-v-dbe97361] {\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-dbe97361] {\n margin-bottom: 20px;\n}\n.widget__header-row[data-v-dbe97361] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 16px;\n}\n.widget__header-text[data-v-dbe97361] {\n flex: 1;\n}\n.widget__title[data-v-dbe97361] {\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-dbe97361] {\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-dbe97361]:hover {\n background: var(--theme--background-accent);\n}\n.widget__subtitle[data-v-dbe97361] {\n margin: 0;\n font-size: 14px;\n color: var(--theme--foreground-subdued);\n}\n.widget__header-controls[data-v-dbe97361] {\n display: flex;\n gap: 16px;\n align-items: center;\n}\n.widget__url-input[data-v-dbe97361] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.widget__url-label[data-v-dbe97361] {\n font-size: 12px;\n color: var(--theme--foreground-subdued);\n white-space: nowrap;\n}\n.widget__url-field[data-v-dbe97361] {\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-dbe97361] {\n margin-bottom: 20px;\n}\n.widget__section-label[data-v-dbe97361] {\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-dbe97361] {\n display: flex;\n gap: 8px;\n}\n.widget__model-btn[data-v-dbe97361] {\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-dbe97361]:hover {\n border-color: var(--theme--primary);\n}\n.widget__model-btn--active[data-v-dbe97361] {\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-dbe97361] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.widget__section--toggle[data-v-dbe97361] {\n padding: 12px;\n background: var(--theme--background-subdued);\n border-radius: var(--theme--border-radius);\n}\n.widget__toggle[data-v-dbe97361] {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n}\n.widget__toggle input[data-v-dbe97361] {\n width: 16px;\n height: 16px;\n cursor: pointer;\n}\n.widget__toggle-label[data-v-dbe97361] {\n font-size: 14px;\n font-weight: 500;\n color: var(--theme--foreground);\n}\n.widget__toggle-note[data-v-dbe97361] {\n margin: 4px 0 0 24px;\n font-size: 12px;\n color: var(--theme--foreground-subdued);\n}\n.widget__footer[data-v-dbe97361] {\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-dbe97361],\n.widget__footer-right[data-v-dbe97361] {\n display: flex;\n gap: 8px;\n}\n.widget__variant-nav[data-v-dbe97361] {\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-dbe97361] {\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-dbe97361] {\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-dbe97361] {\n margin-top: 8px;\n font-size: 12px;\n color: var(--theme--foreground-subdued);\n}\n.widget__btn[data-v-dbe97361] {\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-dbe97361]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.widget__btn--primary[data-v-dbe97361] {\n background: var(--theme--primary);\n color: var(--theme--primary-foreground, #fff);\n}\n.widget__btn--primary[data-v-dbe97361]:hover:not(:disabled) {\n background: var(--theme--primary-accent);\n}\n.widget__btn--secondary[data-v-dbe97361] {\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-dbe97361]:hover:not(:disabled) {\n background: var(--theme--background-normal);\n}\n\n/* Processing State */\n.widget__processing[data-v-dbe97361] {\n padding: 40px 20px;\n text-align: center;\n}\n.widget__progress[data-v-dbe97361] {\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-dbe97361] {\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-dbe97361] {\n height: 100%;\n background: var(--theme--primary);\n transition: width 0.3s ease;\n}\n\n/* Error State */\n.widget__error[data-v-dbe97361] {\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-dbe97361] {\n display: flex;\n gap: 8px;\n margin-top: 8px;\n}\n.widget__retry[data-v-dbe97361] {\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-dbe97361] {\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-dbe97361] {\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-dbe97361] {\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-dbe97361] {\n margin: 4px 0;\n font-size: 14px;\n color: var(--theme--foreground-subdued);\n}\n.widget__result-info strong[data-v-dbe97361] {\n color: var(--theme--foreground);\n}\n\n/* Variants List View */\n.widget__variants-list[data-v-dbe97361] {\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-dbe97361] {\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-dbe97361]:hover {\n border-color: var(--theme--primary);\n}\n.widget__variant-item--selected[data-v-dbe97361] {\n border-color: var(--theme--primary);\n background: var(--theme--primary-background);\n}\n.widget__variant-radio[data-v-dbe97361] {\n flex-shrink: 0;\n}\n.widget__variant-radio input[data-v-dbe97361] {\n width: 16px;\n height: 16px;\n cursor: pointer;\n}\n.widget__variant-player[data-v-dbe97361] {\n flex: 1;\n min-width: 200px;\n}\n.widget__variant-meta[data-v-dbe97361] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 120px;\n}\n.widget__variant-voice[data-v-dbe97361] {\n font-size: 13px;\n font-weight: 500;\n color: var(--theme--foreground);\n}\n.widget__variant-date[data-v-dbe97361] {\n font-size: 11px;\n color: var(--theme--foreground-subdued);\n}\n.widget__btn--danger[data-v-dbe97361] {\n color: var(--theme--danger);\n background: transparent;\n border: none;\n}\n.widget__btn--danger[data-v-dbe97361]:hover {\n background: var(--theme--danger-background);\n}\n.widget__selected-info[data-v-dbe97361] {\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-dbe97361] {\n margin: 4px 0;\n font-size: 14px;\n color: var(--theme--foreground-subdued);\n}\n.widget__selected-info strong[data-v-dbe97361] {\n color: var(--theme--foreground);\n}\n.widget__progress-status[data-v-dbe97361] {\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-dbe97361] {\n animation: spin-dbe97361 1s linear infinite;\n}\n@keyframes spin-dbe97361 {\nfrom { transform: rotate(0deg);\n}\nto { transform: rotate(360deg);\n}\n}\n";
|
|
1992
2057
|
n(css,{});
|
|
1993
2058
|
|
|
1994
|
-
var InterfaceComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
2059
|
+
var InterfaceComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-dbe97361"], ["__file", "interface.vue"]]);
|
|
1995
2060
|
|
|
1996
2061
|
var index = defineInterface({
|
|
1997
2062
|
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.8",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"readme": "README.md",
|
|
8
8
|
"repository": {
|