+
+
+
-
-
-
{{ item.name }}
- {{ prettifyDate(item.createdAt) }}
+ {{ formatDate(Number(item.createdAt), FormatDateMode.DATE) }}
- {{ displayFormatFile(item) }}
+ {{ getMediaFileFormat(item) }}
{{ prettifyFileSize(item.size) }}
-
-
+
+
+
-
-
diff --git a/src/modules/lookups/modules/media/composables/__tests__/useMediaPlayer.spec.ts b/src/modules/lookups/modules/media/composables/__tests__/useMediaPlayer.spec.ts
new file mode 100644
index 000000000..1b1504f02
--- /dev/null
+++ b/src/modules/lookups/modules/media/composables/__tests__/useMediaPlayer.spec.ts
@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest';
+
+import { useMediaPlayer } from '../useMediaPlayer';
+
+const first = {
+ id: '1',
+ mimeType: 'audio/wav',
+};
+const second = {
+ id: '2',
+ mimeType: 'audio/mpeg',
+};
+
+describe('useMediaPlayer', () => {
+ it('streams the chosen file and marks it as playing', () => {
+ const player = useMediaPlayer();
+
+ player.play(second);
+
+ expect(player.playerSrc.value).toEqual({
+ src: expect.stringContaining('/storage/media/2/stream'),
+ type: 'audio/mpeg',
+ });
+ expect(player.isPlaying(second)).toBe(true);
+ expect(player.isPlaying(first)).toBe(false);
+ });
+
+ it('forgets the file on close', () => {
+ const player = useMediaPlayer();
+
+ player.play(first);
+ player.closePlayer();
+
+ expect(player.playerSrc.value).toBeNull();
+ expect(player.isPlaying(first)).toBe(false);
+ });
+});
diff --git a/src/modules/lookups/modules/media/composables/__tests__/useMediaUpload.spec.ts b/src/modules/lookups/modules/media/composables/__tests__/useMediaUpload.spec.ts
new file mode 100644
index 000000000..6ea204ba4
--- /dev/null
+++ b/src/modules/lookups/modules/media/composables/__tests__/useMediaUpload.spec.ts
@@ -0,0 +1,87 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useMediaUpload } from '../useMediaUpload';
+
+const { uploadMedia, handlers } = vi.hoisted(() => ({
+ uploadMedia: vi.fn(),
+ handlers: {} as {
+ drop?: (files: File[] | null) => Promise
;
+ pick?: (files: FileList | null) => Promise;
+ },
+}));
+
+vi.mock('@webitel/api-services/api', () => ({
+ MediaAPI: {
+ upload: uploadMedia,
+ },
+}));
+
+vi.mock('@vueuse/core', async () => {
+ const { shallowRef } = await import('vue');
+ return {
+ useDropZone: (_target: unknown, { onDrop }) => {
+ handlers.drop = onDrop;
+ return {
+ isOverDropZone: shallowRef(false),
+ };
+ },
+ useFileDialog: () => ({
+ open: vi.fn(),
+ onChange: (callback) => {
+ handlers.pick = callback;
+ },
+ }),
+ };
+});
+
+const files = [
+ new File([], 'a.wav'),
+ new File([], 'b.wav'),
+];
+
+describe('useMediaUpload', () => {
+ beforeEach(() => {
+ uploadMedia.mockReset();
+ });
+
+ it('uploads dropped files in one request and reloads the list', async () => {
+ uploadMedia.mockResolvedValue({});
+ const onUploaded = vi.fn();
+ const upload = useMediaUpload({
+ onUploaded,
+ });
+
+ const pending = handlers.drop?.(files);
+ expect(upload.isUploading.value).toBe(true);
+ await pending;
+
+ expect(uploadMedia).toHaveBeenCalledWith(files);
+ expect(upload.isUploading.value).toBe(false);
+ expect(onUploaded).toHaveBeenCalledOnce();
+ });
+
+ it('reloads the list even when the upload fails', async () => {
+ uploadMedia.mockRejectedValue(new Error('Too big'));
+ const onUploaded = vi.fn();
+ const upload = useMediaUpload({
+ onUploaded,
+ });
+
+ await handlers.pick?.(files as unknown as FileList);
+
+ expect(upload.isUploading.value).toBe(false);
+ expect(onUploaded).toHaveBeenCalledOnce();
+ });
+
+ it('ignores an empty pick', async () => {
+ const onUploaded = vi.fn();
+ useMediaUpload({
+ onUploaded,
+ });
+
+ await handlers.pick?.(null);
+
+ expect(uploadMedia).not.toHaveBeenCalled();
+ expect(onUploaded).not.toHaveBeenCalled();
+ });
+});
diff --git a/src/modules/lookups/modules/media/composables/useMediaPlayer.ts b/src/modules/lookups/modules/media/composables/useMediaPlayer.ts
new file mode 100644
index 000000000..cacd4287a
--- /dev/null
+++ b/src/modules/lookups/modules/media/composables/useMediaPlayer.ts
@@ -0,0 +1,38 @@
+import { getMediaStreamUrl } from '@webitel/api-services/api';
+import type { StorageMediaFile } from '@webitel/api-services/gen/models';
+import { computed, ref } from 'vue';
+import { getMediaUrlAuth } from '../scripts/getMediaUrlAuth';
+
+/** [Claude] the bottom player: which file it plays */
+export function useMediaPlayer() {
+ const playingFile = ref(null);
+
+ const playerSrc = computed(
+ () =>
+ playingFile.value && {
+ src: getMediaStreamUrl(playingFile.value.id ?? '', {
+ auth: getMediaUrlAuth(),
+ }),
+ type: playingFile.value.mimeType ?? '',
+ },
+ );
+
+ const play = (file: StorageMediaFile) => {
+ playingFile.value = file;
+ };
+
+ const closePlayer = () => {
+ playingFile.value = null;
+ };
+
+ /** [Claude] true while the file is in the player, paused or not — its row shows stop, as in history */
+ const isPlaying = (file: StorageMediaFile) =>
+ file.id === playingFile.value?.id;
+
+ return {
+ playerSrc,
+ play,
+ closePlayer,
+ isPlaying,
+ };
+}
diff --git a/src/modules/lookups/modules/media/composables/useMediaUpload.ts b/src/modules/lookups/modules/media/composables/useMediaUpload.ts
new file mode 100644
index 000000000..2587d8e40
--- /dev/null
+++ b/src/modules/lookups/modules/media/composables/useMediaUpload.ts
@@ -0,0 +1,44 @@
+import { useDropZone, useFileDialog } from '@vueuse/core';
+import { MediaAPI } from '@webitel/api-services/api';
+import { ref } from 'vue';
+
+/** [Claude] drop or pick files into `dropZone`; `onUploaded` fires after the request, failed or not */
+export function useMediaUpload({ onUploaded }: { onUploaded: () => void }) {
+ const dropZone = ref();
+ const isUploading = ref(false);
+
+ const upload = async (files: File[] | FileList | null) => {
+ if (!files?.length || isUploading.value) return;
+
+ isUploading.value = true;
+ try {
+ await MediaAPI.upload(Array.from(files));
+ } catch {
+ // [Claude] MediaAPI has already notified; drop/dialog callers don't await, so don't rethrow
+ } finally {
+ isUploading.value = false;
+ onUploaded();
+ }
+ };
+
+ const { isOverDropZone } = useDropZone(dropZone, {
+ onDrop: upload,
+ });
+
+ const { open, onChange } = useFileDialog({
+ multiple: true,
+ reset: true,
+ });
+ onChange(upload);
+
+ const openFileDialog = () => {
+ if (!isUploading.value) open();
+ };
+
+ return {
+ dropZone,
+ isOverDropZone,
+ isUploading,
+ openFileDialog,
+ };
+}
diff --git a/src/modules/lookups/modules/media/modules/text-to-speech/api/TextToSpeechAPI.js b/src/modules/lookups/modules/media/modules/text-to-speech/api/TextToSpeechAPI.js
deleted file mode 100644
index ca9981bd3..000000000
--- a/src/modules/lookups/modules/media/modules/text-to-speech/api/TextToSpeechAPI.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import applyTransform, {
- camelToSnake,
- generateUrl,
- notify,
-} from '@webitel/ui-sdk/src/api/transformers/index.js';
-
-import instance from '../../../../../../../app/api/instance';
-
-const getTtsStreamUrl = (params, apiUrl = false) => {
- const baseUrl = '/storage/tts/stream';
- let url = applyTransform(params, [
- (params) => ({
- ...params,
- access_token: instance.defaults.headers['X-Webitel-Access'],
- }),
- camelToSnake(),
- generateUrl(baseUrl),
- ]);
- if (apiUrl) url = `${import.meta.env.VITE_API_URL}${url}`;
- return url;
-};
-
-const getTts = async (params) => {
- const url = getTtsStreamUrl(params, true);
-
- try {
- const response = await fetch(url);
- if (!response.ok) throw new Error(response.status);
- return response.blob();
- } catch (err) {
- throw applyTransform(err, [
- notify(({ callback }) =>
- callback({
- type: 'error',
- text: `Failed to process Text-to-Speech: ${err}`,
- }),
- ),
- ]);
- }
-};
-
-const TextToSpeechAPI = {
- getTtsStreamUrl,
- getTts,
-};
-
-export default TextToSpeechAPI;
diff --git a/src/modules/lookups/modules/media/modules/text-to-speech/components/text-to-speech-popup.vue b/src/modules/lookups/modules/media/modules/text-to-speech/components/text-to-speech-popup.vue
deleted file mode 100644
index e362f5e35..000000000
--- a/src/modules/lookups/modules/media/modules/text-to-speech/components/text-to-speech-popup.vue
+++ /dev/null
@@ -1,309 +0,0 @@
-
-
-
-
-
-
- {{ $t('reusable.tts') }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/modules/lookups/modules/media/modules/text-to-speech/enums/TtsGoogleVoice.enum.js b/src/modules/lookups/modules/media/modules/text-to-speech/enums/TtsGoogleVoice.enum.js
deleted file mode 100644
index baccf7393..000000000
--- a/src/modules/lookups/modules/media/modules/text-to-speech/enums/TtsGoogleVoice.enum.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- *@author r.zaritskyi
- *
- * Task WTEL-9674 states that this task is intended to update only
- * Google Text-to-Speech voice profiles for the Ukrainian language.
- * If necessary, voices for other languages can be added
- */
-const TtsGoogleVoice = Object.freeze([
- 'uk-UA-Chirp3-HD-Achernar',
- 'uk-UA-Chirp3-HD-Achird',
- 'uk-UA-Chirp3-HD-Algenib',
- 'uk-UA-Chirp3-HD-Algieba',
- 'uk-UA-Chirp3-HD-Alnilam',
- 'uk-UA-Chirp3-HD-Autonoe',
- 'uk-UA-Chirp3-HD-Callirrhoe',
- 'uk-UA-Chirp3-HD-Despina',
- 'uk-UA-Chirp3-HD-Enceladus',
- 'uk-UA-Chirp3-HD-Erinome',
- 'uk-UA-Chirp3-HD-Gacrux',
- 'uk-UA-Chirp3-HD-Iapetus',
- 'uk-UA-Chirp3-HD-Laomedeia',
- 'uk-UA-Chirp3-HD-Pulcherrima',
- 'uk-UA-Chirp3-HD-Rasalgethi',
- 'uk-UA-Chirp3-HD-Sadachbia',
- 'uk-UA-Chirp3-HD-Sadaltager',
- 'uk-UA-Chirp3-HD-Schedar',
- 'uk-UA-Chirp3-HD-Sulafat',
- 'uk-UA-Chirp3-HD-Umbriel',
- 'uk-UA-Chirp3-HD-Vindemiatrix',
- 'uk-UA-Chirp3-HD-Zubenelgenubi',
- 'uk-UA-Standard-B',
- 'uk-UA-Wavenet-B',
- 'uk-UA-Wavenet-A',
-]);
-
-export default TtsGoogleVoice;
diff --git a/src/modules/lookups/modules/media/modules/text-to-speech/enums/TtsMicrosoftVoice.enum.js b/src/modules/lookups/modules/media/modules/text-to-speech/enums/TtsMicrosoftVoice.enum.js
deleted file mode 100644
index 312f38e48..000000000
--- a/src/modules/lookups/modules/media/modules/text-to-speech/enums/TtsMicrosoftVoice.enum.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const TtsMicrosoftVoice = Object.freeze([
- 'Male',
- 'Female',
-]);
-
-export default TtsMicrosoftVoice;
diff --git a/src/modules/lookups/modules/media/modules/text-to-speech/enums/TtsTextType.enum.js b/src/modules/lookups/modules/media/modules/text-to-speech/enums/TtsTextType.enum.js
deleted file mode 100644
index efee7744c..000000000
--- a/src/modules/lookups/modules/media/modules/text-to-speech/enums/TtsTextType.enum.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const TtsTextType = Object.freeze({
- SSML: 'ssml',
- TEXT: 'text',
-});
-
-export default TtsTextType;
diff --git a/src/modules/lookups/modules/media/modules/text-to-speech/lookups/TtsTextType.lookup.js b/src/modules/lookups/modules/media/modules/text-to-speech/lookups/TtsTextType.lookup.js
deleted file mode 100644
index 4c734b932..000000000
--- a/src/modules/lookups/modules/media/modules/text-to-speech/lookups/TtsTextType.lookup.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import TtsTextTypeEnum from '../enums/TtsTextType.enum';
-
-const TtsTextType = Object.freeze([
- {
- locale: 'vocabulary.text',
- value: TtsTextTypeEnum.TEXT,
- },
- {
- locale: 'objects.lookups.media.tts.textType.ssml',
- value: TtsTextTypeEnum.SSML,
- },
-]);
-
-export default TtsTextType;
diff --git a/src/modules/lookups/modules/media/router/media.js b/src/modules/lookups/modules/media/router/media.ts
similarity index 95%
rename from src/modules/lookups/modules/media/router/media.js
rename to src/modules/lookups/modules/media/router/media.ts
index f7d6834e8..3bdb90a1d 100644
--- a/src/modules/lookups/modules/media/router/media.js
+++ b/src/modules/lookups/modules/media/router/media.ts
@@ -1,6 +1,6 @@
import { AdminSections, WtObject } from '@webitel/ui-sdk/enums';
-import RouteNames from '../../../../../app/router/_internals/RouteNames.enum.js';
+import RouteNames from '../../../../../app/router/_internals/RouteNames.enum';
const Media = () => import('../components/the-media.vue');
@@ -15,4 +15,5 @@ const MediaRoutes = [
},
},
];
+
export default MediaRoutes;
diff --git a/src/modules/lookups/modules/media/scripts/getMediaUrlAuth.ts b/src/modules/lookups/modules/media/scripts/getMediaUrlAuth.ts
new file mode 100644
index 000000000..414dbb72a
--- /dev/null
+++ b/src/modules/lookups/modules/media/scripts/getMediaUrlAuth.ts
@@ -0,0 +1,7 @@
+import type { MediaUrlAuth } from '@webitel/api-services/api';
+
+/** [Claude] api-services media URL helpers take the API url and token from the app; read on every call, as the token changes after login */
+export const getMediaUrlAuth = (): MediaUrlAuth => ({
+ baseUrl: import.meta.env.VITE_API_URL,
+ accessToken: localStorage.getItem('access-token') || '',
+});
diff --git a/src/modules/lookups/modules/media/store/media.js b/src/modules/lookups/modules/media/store/media.js
deleted file mode 100644
index 68f74535e..000000000
--- a/src/modules/lookups/modules/media/store/media.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { MediaAPI } from '@webitel/api-services/api';
-import ObjectStoreModule from '../../../../../app/store/BaseStoreModules/StoreModules/ObjectStoreModule';
-import headers from './_internals/headers';
-
-const media = new ObjectStoreModule({
- headers,
-})
- .attachAPIModule(MediaAPI)
- .generateAPIActions()
- .getModule();
-
-export default media;
diff --git a/src/modules/lookups/modules/media/store/_internals/headers.js b/src/modules/lookups/modules/media/stores/datalist/_internals/headers.ts
similarity index 75%
rename from src/modules/lookups/modules/media/store/_internals/headers.js
rename to src/modules/lookups/modules/media/stores/datalist/_internals/headers.ts
index 435974426..57e492101 100644
--- a/src/modules/lookups/modules/media/store/_internals/headers.js
+++ b/src/modules/lookups/modules/media/stores/datalist/_internals/headers.ts
@@ -1,28 +1,33 @@
+import type { DatalistTableHeader } from '@webitel/ui-datalist';
import { SortSymbols } from '@webitel/ui-sdk/src/scripts/sortQueryAdapters';
-export default [
+export const headers: DatalistTableHeader[] = [
{
value: 'name',
locale: 'objects.name',
field: 'name',
+ show: true,
sort: SortSymbols.NONE,
},
{
value: 'createdAt',
locale: 'objects.lookups.media.createdAt',
field: 'created_at',
+ show: true,
sort: SortSymbols.NONE,
},
{
value: 'format',
locale: 'objects.lookups.media.format',
field: 'mime_type',
+ show: true,
sort: SortSymbols.NONE,
},
{
value: 'size',
locale: 'objects.lookups.media.size',
field: 'size',
+ show: true,
sort: SortSymbols.NONE,
},
];
diff --git a/src/modules/lookups/modules/media/stores/datalist/mediaDatalistStore.ts b/src/modules/lookups/modules/media/stores/datalist/mediaDatalistStore.ts
new file mode 100644
index 000000000..ffaba996f
--- /dev/null
+++ b/src/modules/lookups/modules/media/stores/datalist/mediaDatalistStore.ts
@@ -0,0 +1,13 @@
+import { MediaAPI } from '@webitel/api-services/api';
+import { createTableStore } from '@webitel/ui-datalist';
+
+import { MediaNamespace } from '../namespace';
+import { headers } from './_internals/headers';
+
+export const useMediaDatalistStore = createTableStore(
+ `${MediaNamespace}/datalist`,
+ {
+ apiModule: MediaAPI,
+ headers,
+ },
+);
diff --git a/src/modules/lookups/modules/media/stores/namespace.ts b/src/modules/lookups/modules/media/stores/namespace.ts
new file mode 100644
index 000000000..6d00f1155
--- /dev/null
+++ b/src/modules/lookups/modules/media/stores/namespace.ts
@@ -0,0 +1,3 @@
+import { AdminNamespace } from '../../../../../app/namespace';
+
+export const MediaNamespace = `${AdminNamespace}/lookups/media`;
diff --git a/src/modules/lookups/store/lookups.js b/src/modules/lookups/store/lookups.js
index a445db348..4f9be13a3 100644
--- a/src/modules/lookups/store/lookups.js
+++ b/src/modules/lookups/store/lookups.js
@@ -1,7 +1,6 @@
import skills from '../modules/agent-skills/store/agent-skills';
import blacklists from '../modules/blacklists/store/blacklists';
import communications from '../modules/communications/store/communications';
-import media from '../modules/media/store/media';
import quickReplies from '../modules/quick-replies/store/quick-replies.js';
import regions from '../modules/regions/store/regions';
@@ -10,7 +9,6 @@ const modules = {
blacklists,
regions,
communications,
- media,
quickReplies,
};