From 5ec81ff931511fbd07e7f408ba579780d9946e45 Mon Sep 17 00:00:00 2001
From: Lera24 <bedulinavalera21@gmail.com>
Date: Tue, 13 Oct 2026 18:02:22 +0300
Subject: [PATCH 1/4] refactor: media page migrated to pinia
 [WTEL-10653](https://webitel.atlassian.net/browse/WTEL-10653)

---
 package-lock.json                             |  16 -
 package.json                                  |   1 -
 .../components/utils/download-files-btn.vue   |  55 --
 src/app/css/_reusable.scss                    |   1 -
 .../objects/lib-custom-styling/dropzone.scss  |  40 --
 src/app/router/router.ts                      |   2 +-
 src/main.ts                                   |   2 -
 .../__tests__/media-play-action.spec.js       |  10 +
 .../table-media-audio-preview-action.spec.js  |  10 -
 .../table-media-file-preview-action.spec.js   |  14 -
 .../__tests__/text-to-speech-popup.spec.js    |   2 +-
 .../media-download-files-action.vue           |  53 ++
 .../media/components/media-play-action.vue    |  55 ++
 .../table-media-audio-preview-action.vue      |  48 --
 .../table-media-file-preview-action.vue       |  48 --
 .../media/components/text-to-speech-popup.vue | 262 +++++++++
 .../modules/media/components/the-media.vue    | 555 ++++++++----------
 .../__tests__/useMediaPlayer.spec.ts          |  46 ++
 .../__tests__/useMediaUpload.spec.ts          |  87 +++
 .../media/composables/useMediaPlayer.ts       |  36 ++
 .../media/composables/useMediaUpload.ts       |  44 ++
 .../text-to-speech/api/TextToSpeechAPI.js     |  47 --
 .../components/text-to-speech-popup.vue       | 309 ----------
 .../enums/TtsGoogleVoice.enum.js              |  36 --
 .../enums/TtsMicrosoftVoice.enum.js           |   6 -
 .../text-to-speech/enums/TtsTextType.enum.js  |   6 -
 .../lookups/TtsTextType.lookup.js             |  14 -
 .../media/router/{media.js => media.ts}       |   3 +-
 .../lookups/modules/media/store/media.js      |  12 -
 .../datalist/_internals/headers.ts}           |   7 +-
 .../stores/datalist/mediaDatalistStore.ts     |  13 +
 .../lookups/modules/media/stores/namespace.ts |   3 +
 src/modules/lookups/store/lookups.js          |   2 -
 33 files changed, 880 insertions(+), 965 deletions(-)
 delete mode 100644 src/app/components/utils/download-files-btn.vue
 delete mode 100644 src/app/css/objects/lib-custom-styling/dropzone.scss
 create mode 100644 src/modules/lookups/modules/media/components/__tests__/media-play-action.spec.js
 delete mode 100644 src/modules/lookups/modules/media/components/__tests__/table-media-audio-preview-action.spec.js
 delete mode 100644 src/modules/lookups/modules/media/components/__tests__/table-media-file-preview-action.spec.js
 rename src/modules/lookups/modules/media/{modules/text-to-speech => }/components/__tests__/text-to-speech-popup.spec.js (85%)
 create mode 100644 src/modules/lookups/modules/media/components/media-download-files-action.vue
 create mode 100644 src/modules/lookups/modules/media/components/media-play-action.vue
 delete mode 100644 src/modules/lookups/modules/media/components/table-media-audio-preview-action.vue
 delete mode 100644 src/modules/lookups/modules/media/components/table-media-file-preview-action.vue
 create mode 100644 src/modules/lookups/modules/media/components/text-to-speech-popup.vue
 create mode 100644 src/modules/lookups/modules/media/composables/__tests__/useMediaPlayer.spec.ts
 create mode 100644 src/modules/lookups/modules/media/composables/__tests__/useMediaUpload.spec.ts
 create mode 100644 src/modules/lookups/modules/media/composables/useMediaPlayer.ts
 create mode 100644 src/modules/lookups/modules/media/composables/useMediaUpload.ts
 delete mode 100644 src/modules/lookups/modules/media/modules/text-to-speech/api/TextToSpeechAPI.js
 delete mode 100644 src/modules/lookups/modules/media/modules/text-to-speech/components/text-to-speech-popup.vue
 delete mode 100644 src/modules/lookups/modules/media/modules/text-to-speech/enums/TtsGoogleVoice.enum.js
 delete mode 100644 src/modules/lookups/modules/media/modules/text-to-speech/enums/TtsMicrosoftVoice.enum.js
 delete mode 100644 src/modules/lookups/modules/media/modules/text-to-speech/enums/TtsTextType.enum.js
 delete mode 100644 src/modules/lookups/modules/media/modules/text-to-speech/lookups/TtsTextType.lookup.js
 rename src/modules/lookups/modules/media/router/{media.js => media.ts} (95%)
 delete mode 100644 src/modules/lookups/modules/media/store/media.js
 rename src/modules/lookups/modules/media/{store/_internals/headers.js => stores/datalist/_internals/headers.ts} (75%)
 create mode 100644 src/modules/lookups/modules/media/stores/datalist/mediaDatalistStore.ts
 create mode 100644 src/modules/lookups/modules/media/stores/namespace.ts

diff --git a/package-lock.json b/package-lock.json
index 01dd55427..917132ea9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,7 +40,6 @@
 				"vue": "^3.5.x",
 				"vue-i18n": "~11.x",
 				"vue-router": "^4.4.3",
-				"vue2-dropzone": "^3.6.0",
 				"vuex": "^4.1.0",
 				"webitel-sdk": "^26.4.29",
 				"zod": "^4.x"
@@ -5611,12 +5610,6 @@
 				"url": "https://dotenvx.com"
 			}
 		},
-		"node_modules/dropzone": {
-			"version": "5.9.3",
-			"resolved": "https://registry.npmjs.org/dropzone/-/dropzone-5.9.3.tgz",
-			"integrity": "sha512-Azk8kD/2/nJIuVPK+zQ9sjKMRIpRvNyqn9XwbBHNq+iNuSccbJS6hwm1Woy0pMST0erSo0u4j+KJaodndDk4vA==",
-			"license": "MIT"
-		},
 		"node_modules/dunder-proto": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -11671,15 +11664,6 @@
 				"url": "https://github.com/fb55/entities?sponsor=1"
 			}
 		},
-		"node_modules/vue2-dropzone": {
-			"version": "3.6.0",
-			"resolved": "https://registry.npmjs.org/vue2-dropzone/-/vue2-dropzone-3.6.0.tgz",
-			"integrity": "sha512-YXC1nCWIZvfa98e/i6h+EshZCkFSxFEh0Sxr9ODfThAPPDVhAzLLlz/4XIx0NGO1QeSy6htwSstte47R7vVhLQ==",
-			"license": "MIT",
-			"dependencies": {
-				"dropzone": "^5.5.1"
-			}
-		},
 		"node_modules/vuex": {
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
diff --git a/package.json b/package.json
index 760f9e44a..d7f410800 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,6 @@
 		"vue": "^3.5.x",
 		"vue-i18n": "~11.x",
 		"vue-router": "^4.4.3",
-		"vue2-dropzone": "^3.6.0",
 		"vuex": "^4.1.0",
 		"webitel-sdk": "^26.4.29",
 		"zod": "^4.x"
diff --git a/src/app/components/utils/download-files-btn.vue b/src/app/components/utils/download-files-btn.vue
deleted file mode 100644
index 56ca315ed..000000000
--- a/src/app/components/utils/download-files-btn.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <div>
-    <wt-button :loading="isFilesLoading" @click="exportFiles">
-      {{ $t('utils.downloadFilesBtn.downloadFiles') }}
-    </wt-button>
-    <div v-show="isFilesLoading" class="files-counter typo-caption">
-      <div>
-        {{ $t('utils.downloadFilesBtn.filesLoaded') }}
-        <span class="files-counter__count typo-caption">
-          {{ filesDownloadProgress }}
-        </span>
-      </div>
-      <div v-show="filesZippingProgress">
-        {{ $t('utils.downloadFilesBtn.zippingProgress') }}
-        <span class="files-counter__count typo-caption">{{ filesZippingProgress }}%</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-	name: 'DownloadFilesBtn',
-	props: {
-		isFilesLoading: {
-			type: Boolean,
-		},
-		filesDownloadProgress: {
-			type: Number,
-		},
-		filesZippingProgress: {
-			type: Number,
-		},
-	},
-	methods: {
-		exportFiles() {
-			this.$emit('export-files');
-		},
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-
-.files-counter {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  margin-top: 10px;
-  padding: 10px 15px;
-  border-radius: var(--border-radius);
-  background: var(--main-color);
-  box-shadow: var(--box-shadow);
-}
-</style>
diff --git a/src/app/css/_reusable.scss b/src/app/css/_reusable.scss
index 74aca39d0..2c0ef0cbb 100644
--- a/src/app/css/_reusable.scss
+++ b/src/app/css/_reusable.scss
@@ -1,5 +1,4 @@
 @forward '@webitel/ui-sdk/src/css/main';
-@forward './objects/lib-custom-styling/dropzone';
 @forward './objects/history-popup';
 // @forward './objects/table-page';
 
diff --git a/src/app/css/objects/lib-custom-styling/dropzone.scss b/src/app/css/objects/lib-custom-styling/dropzone.scss
deleted file mode 100644
index b859a1e06..000000000
--- a/src/app/css/objects/lib-custom-styling/dropzone.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-#dropzone {
-  min-height: 57px;
-  margin-bottom: 36px;
-  border: 2px dashed var(--primary-color);
-  border-radius: var(--border-radius);
-
-  &:hover {
-    background: #fff;
-  }
-
-  .dz-message {
-    margin: 0;
-
-    .dz-custom-message {
-      display: flex;
-      align-items: center;
-      width: fit-content;
-      width: -moz-fit-content;
-      margin: auto;
-
-      .dz-message-text {
-        margin-left: 18px;
-      }
-
-      i, .dz-message-text__accent {
-        color: var(--primary-color);
-      }
-    }
-  }
-
-  &.dz-started {
-    .dz-message {
-      display: block;
-    }
-  }
-
-  .dz-preview {
-    display: none;
-  }
-}
diff --git a/src/app/router/router.ts b/src/app/router/router.ts
index 5cbb6f4b8..b9273434f 100755
--- a/src/app/router/router.ts
+++ b/src/app/router/router.ts
@@ -23,7 +23,7 @@ import BlacklistsRoutes from '../../modules/lookups/modules/blacklists/router/bl
 import BucketsRoutes from '../../modules/lookups/modules/buckets/router/buckets.js';
 import CalendarsRoutes from '../../modules/lookups/modules/calendars/router/calendars';
 import CommunicationsRoutes from '../../modules/lookups/modules/communications/router/communications.js';
-import MediaRoutes from '../../modules/lookups/modules/media/router/media.js';
+import MediaRoutes from '../../modules/lookups/modules/media/router/media';
 import QuickRepliesRoutes from '../../modules/lookups/modules/quick-replies/router/quickReplies.js';
 import RegionsRoutes from '../../modules/lookups/modules/regions/router/regions.js';
 import ObjectsRoutes from '../../modules/permissions/modules/objects/router/objects.js';
diff --git a/src/main.ts b/src/main.ts
index 976deea3e..9c5ea6c73 100755
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,3 @@
-// dont know why but when i import dropzone css is css files, it brakes build on firefox (only build!)
-import 'vue2-dropzone/dist/vue2Dropzone.min.css';
 import './app/assets/icons/sprite/_index';
 import { setConfig as setApiServicesConfig } from '@webitel/api-services';
 import { setDefaultAxiosInstance } from '@webitel/api-services/api/axios';
diff --git a/src/modules/lookups/modules/media/components/__tests__/media-play-action.spec.js b/src/modules/lookups/modules/media/components/__tests__/media-play-action.spec.js
new file mode 100644
index 000000000..ea5b23882
--- /dev/null
+++ b/src/modules/lookups/modules/media/components/__tests__/media-play-action.spec.js
@@ -0,0 +1,10 @@
+import { shallowMount } from '@vue/test-utils';
+
+import MediaPlayAction from '../media-play-action.vue';
+
+describe('MediaPlayAction', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(MediaPlayAction);
+		expect(wrapper.isVisible()).toBe(true);
+	});
+});
diff --git a/src/modules/lookups/modules/media/components/__tests__/table-media-audio-preview-action.spec.js b/src/modules/lookups/modules/media/components/__tests__/table-media-audio-preview-action.spec.js
deleted file mode 100644
index 1dbd2ede2..000000000
--- a/src/modules/lookups/modules/media/components/__tests__/table-media-audio-preview-action.spec.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-
-import TableMediaAudioPreviewAction from '../table-media-audio-preview-action.vue';
-
-describe('TableMediaAudioPreviewAction', () => {
-	it('renders a component', () => {
-		const wrapper = shallowMount(TableMediaAudioPreviewAction);
-		expect(wrapper.isVisible()).toBe(true);
-	});
-});
diff --git a/src/modules/lookups/modules/media/components/__tests__/table-media-file-preview-action.spec.js b/src/modules/lookups/modules/media/components/__tests__/table-media-file-preview-action.spec.js
deleted file mode 100644
index a701f358c..000000000
--- a/src/modules/lookups/modules/media/components/__tests__/table-media-file-preview-action.spec.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-
-import TableMediaFilePreviewAction from '../table-media-file-preview-action.vue';
-
-describe('TableMediaFilePreviewAction', () => {
-	it('renders a component', () => {
-		const wrapper = shallowMount(TableMediaFilePreviewAction, {
-			props: {
-				type: '',
-			},
-		});
-		expect(wrapper.isVisible()).toBe(true);
-	});
-});
diff --git a/src/modules/lookups/modules/media/modules/text-to-speech/components/__tests__/text-to-speech-popup.spec.js b/src/modules/lookups/modules/media/components/__tests__/text-to-speech-popup.spec.js
similarity index 85%
rename from src/modules/lookups/modules/media/modules/text-to-speech/components/__tests__/text-to-speech-popup.spec.js
rename to src/modules/lookups/modules/media/components/__tests__/text-to-speech-popup.spec.js
index 912adcd24..6a60eb218 100644
--- a/src/modules/lookups/modules/media/modules/text-to-speech/components/__tests__/text-to-speech-popup.spec.js
+++ b/src/modules/lookups/modules/media/components/__tests__/text-to-speech-popup.spec.js
@@ -5,6 +5,6 @@ import TextToSpeechPopup from '../text-to-speech-popup.vue';
 describe('TextToSpeechPopup', () => {
 	it('renders a component', () => {
 		const wrapper = shallowMount(TextToSpeechPopup);
-		expect(wrapper.isVisible()).toBe(true);
+		expect(wrapper.exists()).toBe(true);
 	});
 });
diff --git a/src/modules/lookups/modules/media/components/media-download-files-action.vue b/src/modules/lookups/modules/media/components/media-download-files-action.vue
new file mode 100644
index 000000000..817e1d0fd
--- /dev/null
+++ b/src/modules/lookups/modules/media/components/media-download-files-action.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="media-download-files-action">
+    <wt-button
+      :loading="loading"
+      @click="emit('click')"
+    >
+      {{ t('utils.downloadFilesBtn.downloadFiles') }}
+    </wt-button>
+    <div
+      v-show="loading"
+      class="media-download-files-action__progress typo-caption"
+    >
+      <p>{{ t('utils.downloadFilesBtn.filesLoaded') }} {{ downloadedCount }}</p>
+      <p v-show="zippingPercent">
+        {{ t('utils.downloadFilesBtn.zippingProgress') }} {{ zippingPercent }}%
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
+defineProps<{
+	loading?: boolean;
+	downloadedCount?: number;
+	zippingPercent?: number;
+}>();
+
+const emit = defineEmits<{
+	click: [];
+}>();
+
+const { t } = useI18n();
+</script>
+
+<style scoped>
+.media-download-files-action {
+  position: relative;
+}
+
+.media-download-files-action__progress {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: var(--spacing-xs);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border-radius: var(--border-radius);
+  background: var(--content-wrapper-color);
+  box-shadow: var(--elevation-10);
+  white-space: nowrap;
+}
+</style>
diff --git a/src/modules/lookups/modules/media/components/media-play-action.vue b/src/modules/lookups/modules/media/components/media-play-action.vue
new file mode 100644
index 000000000..55f438821
--- /dev/null
+++ b/src/modules/lookups/modules/media/components/media-play-action.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="media-play-action">
+    <wt-icon-btn
+      v-show="!playing"
+      v-tooltip="t('iconHints.play')"
+      icon="play"
+      @click="emit('play')"
+    />
+
+    <iframe
+      v-show="playing"
+      class="media-play-action__equalizer"
+      :src="`${baseUrl}animations/equalizer/eq.html`"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
+withDefaults(
+	defineProps<{
+		playing?: boolean;
+	}>(),
+	{
+		playing: false,
+	},
+);
+
+const emit = defineEmits<{
+	play: [];
+}>();
+
+const { t } = useI18n();
+
+const baseUrl = import.meta.env.BASE_URL; // to resolve iframe equalizer path after build
+</script>
+
+<style scoped>
+.media-play-action {
+  overflow: hidden;
+  width: var(--icon-md-size);
+  height: var(--icon-md-size);
+}
+
+/**
+  @author @rzaritskyi
+  Vidstack player rewrites iframe`s width and height in vidstack/player/styles/base.css.
+  So here we need to write sizes explicitly.
+**/
+.media-play-action__equalizer {
+  width: inherit;
+  height: inherit;
+}
+</style>
diff --git a/src/modules/lookups/modules/media/components/table-media-audio-preview-action.vue b/src/modules/lookups/modules/media/components/table-media-audio-preview-action.vue
deleted file mode 100644
index 62d9b02ec..000000000
--- a/src/modules/lookups/modules/media/components/table-media-audio-preview-action.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-  <div class="iframe-wrap">
-    <wt-icon-btn
-      v-show="!playing"
-      v-tooltip="$t('iconHints.play')"
-      icon="play"
-      @click="$emit('play')"
-    />
-
-    <iframe
-      v-show="playing"
-      :src="`${baseUrl}animations/equalizer/eq.html`"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-	name: 'MediaAudioPreviewTableAction',
-	props: {
-		playing: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	data: () => ({
-		baseUrl: import.meta.env.BASE_URL, // to resolve iframe equalizer path after build
-	}),
-};
-</script>
-
-<style lang="scss" scoped>
-.iframe-wrap {
-  overflow: hidden;
-  width: var(--icon-md-size);
-  height: var(--icon-md-size);
-
-  /**
-    @author @rzaritskyi
-    Vidstack player rewrites iframe`s width and height in vidstack/player/styles/base.css.
-    So here we need to write sizes explicitly.
-  **/
-  iframe {
-    width: inherit;
-    height: inherit;
-  }
-}
-</style>
diff --git a/src/modules/lookups/modules/media/components/table-media-file-preview-action.vue b/src/modules/lookups/modules/media/components/table-media-file-preview-action.vue
deleted file mode 100644
index df7234d75..000000000
--- a/src/modules/lookups/modules/media/components/table-media-file-preview-action.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-  <div>
-    <audio-preview
-      v-if="isAudio"
-      :playing="playing"
-      @play="$emit('play')"
-    />
-    <wt-icon-btn
-      v-else
-      :icon="typeIcon"
-      @click="$emit('open')"
-    />
-  </div>
-</template>
-
-<script>
-import AudioPreview from './table-media-audio-preview-action.vue';
-
-export default {
-	name: 'TableMediaFilePreviewAction',
-	components: {
-		AudioPreview,
-	},
-	props: {
-		type: {
-			type: String,
-		},
-		playing: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	computed: {
-		isAudio() {
-			return this.type.includes('audio');
-		},
-		typeIcon() {
-			if (this.type.includes('image')) return 'preview-tag-image';
-			if (this.type.includes('application')) return 'preview-tag-application';
-			if (this.type.includes('video')) return 'preview-tag-video';
-			return 'docs';
-		},
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/src/modules/lookups/modules/media/components/text-to-speech-popup.vue b/src/modules/lookups/modules/media/components/text-to-speech-popup.vue
new file mode 100644
index 000000000..d11fd08c7
--- /dev/null
+++ b/src/modules/lookups/modules/media/components/text-to-speech-popup.vue
@@ -0,0 +1,262 @@
+<template>
+  <wt-popup
+    size="sm"
+    @close="close"
+  >
+    <template #title>
+      {{ t('reusable.tts') }}
+    </template>
+    <template #main>
+      <form
+        class="opened-card-input-grid opened-card-input-grid--1-col"
+        @submit.prevent
+      >
+        <wt-input-text
+          v-model:model-value="draft.name"
+          :label="t('reusable.name')"
+          :regle-validation="r$.$fields.name"
+        />
+        <wt-single-select
+          v-model:model-value="draft.profile"
+          :show-clear="false"
+          :label="t('objects.integrations.cognitiveProfiles.cognitiveProfiles', 1)"
+          :search-method="searchProfiles"
+          :regle-validation="r$.$fields.profile"
+        />
+        <wt-single-select
+          v-model:model-value="draft.textType"
+          :show-clear="false"
+          :label="t('objects.lookups.media.tts.textType.textType')"
+          :options="textTypeOptions"
+          option-value="value"
+        />
+        <wt-single-select
+          v-model:model-value="draft.language"
+          :show-clear="false"
+          :label="t('vocabulary.language')"
+          :options="Object.values(MicrosoftLanguage)"
+          :data-key="null"
+        />
+        <wt-single-select
+          :key="`${draft.profile?.provider}-${draft.language}`"
+          v-model:model-value="draft.voice"
+          :show-clear="false"
+          :label="t('vocabulary.voice')"
+          :options="voiceOptions"
+          :data-key="null"
+        />
+        <wt-single-select
+          v-model:model-value="draft.format"
+          :show-clear="false"
+          :label="t('vocabulary.format')"
+          :data-key="null"
+          disabled
+        />
+        <wt-textarea
+          v-model:model-value="draft.text"
+          :label="t('vocabulary.text')"
+          :regle-validation="r$.$fields.text"
+        />
+      </form>
+    </template>
+    <template #actions>
+      <div class="text-to-speech-popup__footer">
+        <wt-player
+          v-if="audio"
+          :src="{
+            src: audio,
+            type: 'audio/object',
+          }"
+          :autoplay="false"
+          :closable="false"
+          :download="false"
+          position="static"
+        />
+        <div class="text-to-speech-popup__actions">
+          <wt-button
+            v-if="audio"
+            :disabled="r$.$invalid"
+            :loading="isSaving"
+            wide
+            @click="save"
+          >
+            {{ t('reusable.save') }}
+          </wt-button>
+          <wt-button
+            :color="audio ? ButtonColor.SECONDARY : ButtonColor.PRIMARY"
+            :disabled="r$.$invalid"
+            :loading="isGenerating"
+            wide
+            @click="generate"
+          >
+            {{ t('reusable.generate') }}
+          </wt-button>
+          <wt-button
+            :color="ButtonColor.SECONDARY"
+            wide
+            @click="close"
+          >
+            {{ t('reusable.close') }}
+          </wt-button>
+        </div>
+      </div>
+    </template>
+  </wt-popup>
+</template>
+
+<script setup lang="ts">
+import { useRegleSchema } from '@regle/schemas';
+import { MediaAPI } from '@webitel/api-services/api';
+import {
+	type TtsGoogleVoice,
+	TtsGoogleVoiceList,
+	TtsMicrosoftVoice,
+	TtsTextType,
+} from '@webitel/api-services/enums';
+import {
+	StorageProviderType,
+	StorageServiceType,
+} from '@webitel/api-services/gen/models';
+import { textToSpeechSchema } from '@webitel/api-services/validations';
+import { WtPlayer } from '@webitel/ui-sdk/components';
+import { ButtonColor } from '@webitel/ui-sdk/enums';
+import { computed, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { MicrosoftLanguage } from 'webitel-sdk/enums';
+
+import CognitiveProfilesAPI from '../../../../integrations/modules/cognitive-profiles/api/cognitiveProfiles';
+
+const emit = defineEmits<{
+	close: [];
+	saved: [];
+}>();
+
+const { t } = useI18n();
+
+const textTypeOptions = [
+	{
+		locale: 'vocabulary.text',
+		value: TtsTextType.Text,
+	},
+	{
+		locale: 'objects.lookups.media.tts.textType.ssml',
+		value: TtsTextType.Ssml,
+	},
+];
+
+type TextToSpeechDraft = {
+	name: string;
+	profile: {
+		id?: string;
+		name?: string;
+		provider?: string;
+	};
+	textType: TtsTextType;
+	language: string;
+	voice: TtsMicrosoftVoice | TtsGoogleVoice;
+	text: string;
+	format: string;
+};
+
+const draft = ref<TextToSpeechDraft>({
+	name: '',
+	profile: {},
+	textType: TtsTextType.Text,
+	language: MicrosoftLanguage['en-US'],
+	voice: TtsMicrosoftVoice.Male,
+	text: '',
+	format: 'wav',
+});
+const audio = ref<Blob | null>(null);
+const isGenerating = ref(false);
+const isSaving = ref(false);
+
+const { r$ } = useRegleSchema(draft, textToSpeechSchema, {
+	autoDirty: true,
+});
+
+const voiceOptions = computed<TextToSpeechDraft['voice'][]>(() => {
+	const { language, profile } = draft.value;
+	if (profile?.provider === StorageProviderType.Google && language) {
+		const googleVoices = TtsGoogleVoiceList.filter((voice) =>
+			voice.toLowerCase().includes(language.toLowerCase()),
+		);
+		if (googleVoices.length) return googleVoices;
+	}
+	return Object.values(TtsMicrosoftVoice);
+});
+
+const close = () => emit('close');
+
+const generate = async () => {
+	try {
+		isGenerating.value = true;
+		const { profile, textType, language, voice, format, text } = draft.value;
+		audio.value = await MediaAPI.generateTts({
+			profileId: profile.id ?? '',
+			textType,
+			language,
+			voice,
+			format,
+			text,
+		});
+	} finally {
+		isGenerating.value = false;
+	}
+};
+
+const save = async () => {
+	if (!audio.value) return;
+
+	try {
+		isSaving.value = true;
+		const file = new File(
+			[
+				audio.value,
+			],
+			`${draft.value.name}.wav`,
+			{
+				type: 'audio/wav',
+			},
+		);
+		await MediaAPI.upload([
+			file,
+		]);
+		emit('saved');
+		close();
+	} finally {
+		isSaving.value = false;
+	}
+};
+
+const searchProfiles = (params: Record<string, unknown>) =>
+	CognitiveProfilesAPI.getLookup({
+		...params,
+		fields: [
+			'id',
+			'name',
+			'provider',
+		],
+		service: StorageServiceType.Tts,
+	});
+
+watch(voiceOptions, (options) => {
+	if (!options.includes(draft.value.voice)) {
+		draft.value.voice = options[0];
+	}
+});
+</script>
+
+<style scoped>
+.text-to-speech-popup__footer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: var(--popup-actions-padding);
+}
+
+.text-to-speech-popup__actions {
+  display: flex;
+  gap: var(--popup-actions-padding);
+}
+</style>
diff --git a/src/modules/lookups/modules/media/components/the-media.vue b/src/modules/lookups/modules/media/components/the-media.vue
index 9d186bdeb..e1c9fdee3 100644
--- a/src/modules/lookups/modules/media/components/the-media.vue
+++ b/src/modules/lookups/modules/media/components/the-media.vue
@@ -1,23 +1,29 @@
 <template>
   <wt-page-wrapper
     :actions-panel="false"
-    class="table-page"
+    class="the-media table-page"
   >
     <template #header>
       <wt-page-header hide-primary>
         <wt-breadcrumb :path="path" />
         <template #actions>
-          <download-files-btn
-            :files-download-progress="filesDownloadProgress.count"
-            :files-zipping-progress="filesZippingProgress.percent"
-            :is-files-loading="isFilesLoading"
-            @export-files="exportFiles"
+          <media-download-files-action
+            :loading="isFilesLoading"
+            :downloaded-count="filesDownloadProgress.count"
+            :zipping-percent="filesZippingProgress.percent"
+            @click="exportFiles"
           />
         </template>
       </wt-page-header>
     </template>
 
     <template #main>
+      <text-to-speech-popup
+        v-if="isTextToSpeechOpened"
+        @close="closeTextToSpeech"
+        @saved="loadDataList"
+      />
+
       <delete-confirmation-popup
         :shown="isDeleteConfirmationPopup"
         :delete-count="deleteCount"
@@ -28,380 +34,341 @@
       <section class="table-section">
         <header class="table-title">
           <h3 class="table-title__title">
-            {{ $t('objects.lookups.media.allMediaFiles') }}
+            {{ t('objects.lookups.media.allMediaFiles') }}
           </h3>
-          <div class="table-title__actions-wrap">
-            <wt-search-bar
-              :value="search"
-              debounce
-              @enter="loadList"
-              @input="setSearch"
-              @search="loadList"
-            />
-            <wt-table-actions
-              :icons="['refresh']"
-              @input="tableActionsHandler"
-            >
-              <delete-all-action
-                v-if="hasDeleteAccess"
-                v-show="!anySelected"
-                :selected-count="selectedRows.length"
-                @click="askDeleteConfirmation({
-                  deleted: selectedRows,
-                  callback: () => deleteData(selectedRows),
-                })"
+          <wt-action-bar
+            :include="[
+              IconAction.REFRESH,
+              IconAction.DELETE,
+              IconAction.COLUMNS,
+            ]"
+            :disabled:delete="!hasDeleteAccess || !selected.length"
+            @click:refresh="loadDataList"
+            @click:delete="
+              askDeleteConfirmation({
+                deleted: selected,
+                callback: () => deleteEls(selected),
+              })
+            "
+          >
+            <template #search-bar>
+              <dynamic-filter-search
+                :filters-manager="filtersManager"
+                :is-filters-restoring="isFiltersRestoring"
+                @filter:add="addFilter"
+                @filter:update="updateFilter"
+                @filter:delete="deleteFilter"
               />
-              <text-to-speech-popup
-                :disabled="!hasCreateAccess"
-                @opened="closePlayer"
+            </template>
+            <wt-icon-btn
+              v-tooltip="t('objects.lookups.media.tts.hint')"
+              :disabled="!hasCreateAccess"
+              icon="tts-download"
+              @click="openTextToSpeech"
+            />
+            <template #columns>
+              <wt-table-column-select
+                :headers="headers"
+                @change="updateShownHeaders"
               />
-            </wt-table-actions>
-          </div>
+            </template>
+          </wt-action-bar>
         </header>
-        <vue-dropzone
+
+        <div
           v-if="hasCreateAccess"
-          id="dropzone"
-          :destroy-dropzone="false"
-          :options="dropzoneOptions"
-          duplicate-check
-          use-custom-slot
-          @vdropzone-files-added="onFilesAdded"
-          @vdropzone-success="onFileSuccess"
-          @vdropzone-error="onFileError"
-          @vdropzone-queue-complete="onComplete"
+          ref="dropZone"
+          :class="{ 'the-media__dropzone--over': isOverDropZone }"
+          :title="t('iconHints.upload')"
+          class="the-media__dropzone"
+          @click="openFileDialog"
         >
-          <div v-show="isLoadingFiles">
-            <div class="progress-count">
-              <wt-loader size="sm" />
-              <p>{{ loadedCount }}/{{ allLoadingCount }}</p>
-            </div>
-          </div>
-          <div
-            v-show="!isLoadingFiles"
-            :title="$t('iconHints.upload')"
-            class="dz-custom-message"
-          >
+          <wt-loader
+            v-if="isUploading"
+            size="sm"
+          />
+          <template v-else>
             <wt-icon
               color="primary"
               icon="upload"
             />
-            <div class="dz-message-text">
-              <span class="dz-message-text__accent">
-                {{ $t('objects.lookups.media.dragPlaceholder') }}
+            <span>
+              <span class="the-media__dropzone-accent">
+                {{ t('objects.lookups.media.dragPlaceholder') }}
               </span>
-              {{ $t('objects.lookups.media.dragPlaceholderHere') }}
-            </div>
-          </div>
-        </vue-dropzone>
+              {{ t('objects.lookups.media.dragPlaceholderHere') }}
+            </span>
+          </template>
+        </div>
+
+        <div class="table-section__table-wrapper">
+          <wt-empty
+            v-show="showEmpty"
+            :image="imageEmpty"
+            :text="textEmpty"
+          />
+
+          <wt-loader v-show="isLoading" />
 
-        <wt-loader v-show="!isLoaded" />
-        <wt-dummy
-          v-if="dummy && isLoaded"
-          :src="dummy.src"
-          :dark-mode="darkMode"
-          :text="dummy.text && $t(dummy.text)"
-        />
-        <div
-          v-show="dataList.length && isLoaded"
-          class="table-section__table-wrapper"
-        >
           <wt-table
+            v-show="dataList.length && !isLoading"
             :data="dataList"
-            :headers="headers"
+            :headers="shownHeaders"
+            :selected="selected"
+            reorderable-columns
+            resizable-columns
             sortable
-            @sort="sort"
+            @column-reorder="columnReorder"
+            @column-resize="columnResize"
+            @sort="updateSort"
+            @update:selected="updateSelected"
           >
             <template #name="{ item }">
               {{ item.name }}
             </template>
             <template #createdAt="{ item }">
-              {{ prettifyDate(item.createdAt) }}
+              {{ formatDate(Number(item.createdAt), FormatDateMode.DATE) }}
             </template>
             <template #format="{ item }">
-              {{ displayFormatFile(item) }}
+              {{ getMediaFileFormat(item) }}
             </template>
             <template #size="{ item }">
               {{ prettifyFileSize(item.size) }}
             </template>
-            <template #actions="{ item, index }">
-              <table-media-file-preview-action
-                :playing="index === playingIndex && currentlyPlaying"
-                :type="item.mimeType"
-                @open="openFile(item)"
-                @play="play(index)"
+            <template #actions="{ item }">
+              <media-play-action
+                v-if="item.mimeType?.includes('audio')"
+                :playing="isPlaying(item)"
+                @play="play(item)"
+              />
+              <wt-icon-btn
+                v-else
+                :icon="getFileTypeIcon(item.mimeType, { fallback: 'docs' })"
+                @click="openFile(item)"
               />
               <wt-icon-action
                 action="download"
-                @click="downloadFile(item)"
+                @click="
+                  downloadStorageFile({
+                    url: getMediaDownloadUrl(item.id),
+                    name: item.name,
+                  })
+                "
               />
               <wt-icon-action
-                v-if="hasDeleteAccess"
+                :disabled="!hasDeleteAccess"
                 action="delete"
-                @click="askDeleteConfirmation({
-                  deleted: [item],
-                  callback: () => deleteData(item),
-                })"
+                @click="
+                  askDeleteConfirmation({
+                    deleted: [item],
+                    callback: () => deleteEls([item]),
+                  })
+                "
               />
             </template>
           </wt-table>
+
           <wt-pagination
-            :next="isNext"
+            :next="next"
             :prev="page > 1"
             :size="size"
             debounce
-            @change="loadList"
-            @input="setSize"
-            @next="nextPage"
-            @prev="prevPage"
+            @change="updateSize"
+            @next="updatePage(page + 1)"
+            @prev="updatePage(page - 1)"
           />
         </div>
 
         <wt-player
-          v-if="audioPreviewSrc"
-          :src="audioPreviewSrc"
+          v-if="playerSrc"
+          :src="playerSrc"
           @close="closePlayer"
-          @pause="currentlyPlaying = false"
-          @play="currentlyPlaying = true"
+          @pause="isPaused = true"
+          @play="isPaused = false"
         />
       </section>
     </template>
   </wt-page-wrapper>
 </template>
 
-<script>
-import { MediaAPI } from '@webitel/api-services/api';
+<script setup lang="ts">
+import {
+	getMediaDownloadUrl,
+	getMediaStreamUrl,
+	MediaAPI,
+} from '@webitel/api-services/api';
+import type { StorageMediaFile } from '@webitel/api-services/gen/models';
+import { DynamicFilterSearchComponent as DynamicFilterSearch } from '@webitel/ui-datalist/filters';
 import { WtPlayer } from '@webitel/ui-sdk/components';
-import { FormatDateMode } from '@webitel/ui-sdk/enums';
+import { FormatDateMode, IconAction } from '@webitel/ui-sdk/enums';
 import { useFilesExport } from '@webitel/ui-sdk/modules/FilesExport';
+import {
+	downloadStorageFile,
+	getFileTypeIcon,
+} from '@webitel/ui-sdk/scripts/file';
 import DeleteConfirmationPopup from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/components/delete-confirmation-popup.vue';
 import { useDeleteConfirmationPopup } from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/composables/useDeleteConfirmationPopup';
+import { useTableEmpty } from '@webitel/ui-sdk/src/modules/TableComponentModule/composables/useTableEmpty';
 import prettifyFileSize from '@webitel/ui-sdk/src/scripts/prettifyFileSize';
-import getNamespacedState from '@webitel/ui-sdk/src/store/helpers/getNamespacedState';
 import { formatDate } from '@webitel/ui-sdk/utils';
+import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
-import vueDropzone from 'vue2-dropzone';
-import { useStore } from 'vuex';
-import DownloadFilesBtn from '../../../../../app/components/utils/download-files-btn.vue';
-import { useDummy } from '../../../../../app/composables/useDummy';
-import { useUserAccessControl } from '../../../../../app/composables/useUserAccessControl';
-import tableComponentMixin from '../../../../../app/mixins/objectPagesMixins/objectTableMixin/tableComponentMixin';
-import { download } from '../../../../../app/utils/download';
-import TextToSpeechPopup from '../modules/text-to-speech/components/text-to-speech-popup.vue';
-import TableMediaFilePreviewAction from './table-media-file-preview-action.vue';
-
-const token = localStorage.getItem('access-token');
-const API_URL = import.meta.env.VITE_API_URL;
-const namespace = 'lookups/media';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
 
-export default {
-	name: 'TheMedia',
-	components: {
-		DownloadFilesBtn,
-		vueDropzone,
-		TextToSpeechPopup,
-		TableMediaFilePreviewAction,
-		DeleteConfirmationPopup,
-		WtPlayer,
-	},
-	mixins: [
-		tableComponentMixin,
-	],
-	inject: [
-		'$eventBus',
-	],
-	setup() {
-		const { dummy } = useDummy({
-			namespace,
-			hiddenText: true,
-		});
-		const {
-			isVisible: isDeleteConfirmationPopup,
-			deleteCount,
-			deleteCallback,
+import { useUserAccessControl } from '../../../../../app/composables/useUserAccessControl';
+import RouteNames from '../../../../../app/router/_internals/RouteNames.enum';
+import { useMediaPlayer } from '../composables/useMediaPlayer';
+import { useMediaUpload } from '../composables/useMediaUpload';
+import { useMediaDatalistStore } from '../stores/datalist/mediaDatalistStore';
+import MediaDownloadFilesAction from './media-download-files-action.vue';
+import MediaPlayAction from './media-play-action.vue';
+import TextToSpeechPopup from './text-to-speech-popup.vue';
 
-			askDeleteConfirmation,
-			closeDelete,
-		} = useDeleteConfirmationPopup();
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const { hasCreateAccess, hasDeleteAccess } = useUserAccessControl();
 
-		const { hasCreateAccess, hasUpdateAccess, hasDeleteAccess } =
-			useUserAccessControl();
+const mediaDatalistStore = useMediaDatalistStore();
 
-		const store = useStore();
-		const dataList = computed(
-			() => getNamespacedState(store.state, namespace).dataList,
-		);
-		const selected = computed(() =>
-			dataList.value.filter((item) => item._isSelected),
-		);
+const {
+	dataList,
+	selected,
+	error,
+	isLoading,
+	page,
+	size,
+	next,
+	headers,
+	shownHeaders,
+	filtersManager,
+	isFiltersRestoring,
+} = storeToRefs(mediaDatalistStore);
 
-		const {
-			exportFiles,
-			isLoading: isFilesLoading,
-			downloadStatus: filesDownloadProgress,
-			zippingStatus: filesZippingProgress,
-		} = useFilesExport({
-			getFileURL: (item) =>
-				`${API_URL}/storage/media/${item.id}/download?access_token=${token}`,
-			fetch: (params) => {
-				if (selected.value.length)
-					return {
-						items: selected.value,
-					};
-				return MediaAPI.getList(params);
-			},
-			filename: 'media',
-			skipFilesWithError: true,
-		});
+const {
+	initialize,
+	loadDataList,
+	updateSelected,
+	updatePage,
+	updateSize,
+	updateSort,
+	columnResize,
+	columnReorder,
+	updateShownHeaders,
+	deleteEls,
+	addFilter,
+	updateFilter,
+	deleteFilter,
+} = mediaDatalistStore;
 
-		return {
-			dummy,
-			isDeleteConfirmationPopup,
-			deleteCount,
-			deleteCallback,
+initialize();
 
-			askDeleteConfirmation,
-			closeDelete,
-			hasCreateAccess,
-			hasUpdateAccess,
-			hasDeleteAccess,
+const {
+	isVisible: isDeleteConfirmationPopup,
+	deleteCount,
+	deleteCallback,
+	askDeleteConfirmation,
+	closeDelete,
+} = useDeleteConfirmationPopup();
 
-			exportFiles,
-			isFilesLoading,
-			filesDownloadProgress,
-			filesZippingProgress,
-		};
+const {
+	exportFiles,
+	isLoading: isFilesLoading,
+	downloadStatus: filesDownloadProgress,
+	zippingStatus: filesZippingProgress,
+} = useFilesExport({
+	getFileURL: (item) => getMediaDownloadUrl(String(item.id)),
+	fetch: async (params) => {
+		if (selected.value.length)
+			return {
+				items: selected.value,
+				next: false,
+			};
+		return MediaAPI.getList(params);
 	},
-	data() {
-		return {
-			namespace,
+	filename: 'media',
+	skipFilesWithError: true,
+});
 
-			isLoadingFiles: false,
-			loadedCount: 0,
-			allLoadingCount: 0,
-			audioPreviewSrc: null,
-			playingIndex: null,
-			currentlyPlaying: true,
-
-			dropzoneOptions: {
-				url: `${API_URL}/storage/media?access_token=${token}`,
-				thumbnailWidth: 150,
-				// maxFilesize: 0.5,
-				// acceptedFiles: '.mp3, .wav, .mpeg',
-				uploadMultiple: true,
-			},
-		};
+const path = computed(() => [
+	{
+		name: t('objects.lookups.lookups'),
 	},
-	computed: {
-		path() {
-			return [
-				{
-					name: this.$t('objects.lookups.lookups'),
-				},
-				{
-					name: this.$t('objects.lookups.media.mediaFiles', 2),
-					route: '/lookups/media',
-				},
-			];
-		},
+	{
+		name: t('objects.lookups.media.mediaFiles', 2),
+		route: '/lookups/media',
 	},
+]);
 
-	methods: {
-		openFile({ id }) {
-			const url = `${API_URL}/storage/media/${id}/stream?access_token=${token}`;
-			window.open(url, '_blank');
-		},
-		async downloadFile({ id, name }) {
-			const url = `${API_URL}/storage/media/${id}/download?access_token=${token}`;
-			download(url, name);
-		},
-
-		getSelectedFiles() {
-			const selected = this.dataList.filter((item) => item._isSelected);
-			return selected.length ? selected : null;
-		},
+const {
+	showEmpty,
+	image: imageEmpty,
+	text: textEmpty,
+} = useTableEmpty({
+	dataList,
+	error,
+	filters: computed(() => filtersManager.value.getAllValues()),
+	isLoading,
+});
 
-		// dropzone event on loading start
-		// used for computing files number for UI and animation start
-		onFilesAdded(files) {
-			this.isLoadingFiles = true;
-			this.loadedCount = 0;
-			this.allLoadingCount = files.length;
-		},
+const { dropZone, isOverDropZone, isUploading, openFileDialog } =
+	useMediaUpload({
+		onUploaded: loadDataList,
+	});
 
-		// dropzone event firing on ech file loaded successfully
-		// used for updating loaded files number on UI
+const { playerSrc, isPaused, play, closePlayer, isPlaying } = useMediaPlayer();
 
-		onFileSuccess(file, res) {
-			this.loadedCount += 1;
-		},
+/** [Claude] the popup lives on `/lookups/media/new`, so it survives a reload and can be linked */
+const isTextToSpeechOpened = computed(() => route.params.mediaId === 'new');
 
-		// dropzone event firing on ech file load
-		// used for updating loaded files number on UI
-		onFileError(file, message) {
-			this.loadedCount += 1;
-			this.$eventBus.$emit('notification', {
-				type: 'error',
-				text: message.message || message,
-			});
+const openTextToSpeech = () => {
+	closePlayer();
+	router.push({
+		name: RouteNames.MEDIA,
+		params: {
+			mediaId: 'new',
 		},
+		query: route.query,
+	});
+};
 
-		// dropzone event firing on all files loaded and sent
-		// used for animation end and list update
-		onComplete() {
-			this.isLoadingFiles = false;
-			this.loadList();
-		},
+const closeTextToSpeech = () =>
+	router.replace({
+		name: RouteNames.MEDIA,
+		query: route.query,
+	});
 
-		play(rowId) {
-			const { id, mimeType } = this.dataList[rowId];
-			this.playingIndex = rowId;
-			this.audioPreviewSrc = {
-				src: `${API_URL}/storage/media/${id}/stream?access_token=${token}`,
-				type: mimeType,
-			};
-		},
+const getMediaFileFormat = ({ name = '', mimeType = '' }: StorageMediaFile) => {
+	const parts = name.split('.');
+	const format = parts.length > 1 ? parts.at(-1) : null;
+	return format || mimeType.split('/').pop() || 'N/A';
+};
 
-		closePlayer() {
-			this.playingIndex = null;
-			this.audioPreviewSrc = null;
-		},
-		getMediaList: MediaAPI.getList,
-		prettifyDate(date) {
-			return formatDate(+date, FormatDateMode.DATE);
-		},
-		prettifyFormat(format) {
-			return format.split('/').pop();
-		},
-		prettifyFileSize,
-		displayFormatFile(item) {
-			const array = item.name.split('.');
-			const format = array.length > 1 ? array.at(-1) : null;
-			return format || this.prettifyFormat(item.mimeType) || 'N/A';
-		},
-	},
+const openFile = ({ id = '' }: StorageMediaFile) => {
+	window.open(getMediaStreamUrl(id), '_blank');
 };
 </script>
 
-<style
-  lang="scss"
-  scoped
->
-.progress-count {
+<style scoped>
+.the-media__dropzone {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-sm);
+  margin-bottom: var(--spacing-xl);
+  border: 2px dashed var(--primary-color);
+  border-radius: var(--border-radius);
+  background: var(--content-wrapper-color);
+  cursor: pointer;
+}
 
-  .wt-loader {
-    display: inline-block;
-    margin-right: var(--spacing-xs);
-    margin-bottom: 3px;
-  }
+.the-media__dropzone--over {
+  border-style: solid;
 }
 
-#dropzone {
-  background: var(--content-wrapper-color);
-  align-items: center;
-  display: flex;
-  justify-content: center;
+.the-media__dropzone-accent {
+  color: var(--primary-color);
 }
 </style>
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..d719f3d0a
--- /dev/null
+++ b/src/modules/lookups/modules/media/composables/__tests__/useMediaPlayer.spec.ts
@@ -0,0 +1,46 @@
+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('does not mark a paused file as playing', () => {
+		const player = useMediaPlayer();
+
+		player.play(first);
+		player.isPaused.value = 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<void>;
+		pick?: (files: FileList | null) => Promise<void>;
+	},
+}));
+
+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..9b9d2152e
--- /dev/null
+++ b/src/modules/lookups/modules/media/composables/useMediaPlayer.ts
@@ -0,0 +1,36 @@
+import { getMediaStreamUrl } from '@webitel/api-services/api';
+import type { StorageMediaFile } from '@webitel/api-services/gen/models';
+import { computed, ref } from 'vue';
+
+/** [Claude] the bottom player: which file it plays and whether it's paused */
+export function useMediaPlayer() {
+	const playingFile = ref<StorageMediaFile | null>(null);
+	const isPaused = ref(false);
+
+	const playerSrc = computed(
+		() =>
+			playingFile.value && {
+				src: getMediaStreamUrl(playingFile.value.id ?? ''),
+				type: playingFile.value.mimeType ?? '',
+			},
+	);
+
+	const play = (file: StorageMediaFile) => {
+		playingFile.value = file;
+	};
+
+	const closePlayer = () => {
+		playingFile.value = null;
+	};
+
+	const isPlaying = (file: StorageMediaFile) =>
+		file.id === playingFile.value?.id && !isPaused.value;
+
+	return {
+		playerSrc,
+		isPaused,
+		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<HTMLElement>();
+	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 @@
-<template>
-	<div class="tts">
-		<wt-icon-btn
-			v-show="!isOpened"
-			v-tooltip="$t('objects.lookups.media.tts.hint')"
-			icon="tts-download"
-			:disabled="disabled"
-			@click="openPopup"
-		/>
-
-		<wt-popup
-			:shown="isOpened"
-			size="sm"
-			@close="closePopup"
-		>
-			<template #title>
-				{{ $t('reusable.tts') }}
-			</template>
-			<template #main>
-				<form class="opened-card-input-grid opened-card-input-grid--1-col">
-					<wt-input-text
-						v-model:model-value="draft.name"
-						:label="$t('reusable.name')"
-						:v="v$.draft.name"
-					/>
-					<wt-single-select
-						v-model:model-value="draft.profile"
-						:show-clear="false"
-						:label="$t('objects.integrations.cognitiveProfiles.cognitiveProfiles', 1)"
-						:search-method="searchProfiles"
-						:v="v$.draft.profile"
-					/>
-					<wt-single-select
-						v-model:model-value="draft.textType"
-						:show-clear="false"
-						:label="$t('objects.lookups.media.tts.textType.textType')"
-						:options="textTypeOptions"
-						data-key="value"
-					/>
-					<wt-single-select
-						v-model:model-value="draft.language"
-						:show-clear="false"
-						:label="$t('vocabulary.language')"
-						:options="TtsMicrosoftLanguage"
-						:data-key="null"
-					/>
-					<wt-single-select
-						:key="`${draft.profile?.provider}-${draft.language}`"
-						v-model:model-value="draft.voice"
-						:show-clear="false"
-						:label="$t('vocabulary.voice')"
-						:options="voiceOptions"
-						:data-key="null"
-					/>
-					<wt-single-select
-						v-model:model-value="draft.format"
-						:show-clear="false"
-						:label="$t('vocabulary.format')"
-						:data-key="null"
-						disabled
-					/>
-					<wt-textarea
-						v-model:model-value="draft.text"
-						:label="$t('vocabulary.text')"
-						:v="v$.draft.text"
-					/>
-				</form>
-			</template>
-			<template #actions>
-				<div class="tts__footer-wrapper">
-					<wt-player
-						v-if="audio"
-						:src="{
-							src: audio,
-							type: 'audio/object',
-						}"
-						:autoplay="false"
-						:closable="false"
-						:download="false"
-						position="static"
-					/>
-					<div class="tts__footer-actions-wrapper">
-						<wt-button
-							v-if="audio"
-							:disabled="disabledActions"
-							:loading="isSaving"
-							wide
-							@click="save"
-						>
-							{{ $t('reusable.save') }}
-						</wt-button>
-						<wt-button
-							:color="audio ? 'secondary' : 'primary'"
-							:disabled="disabledActions"
-							:loading="isGenerating"
-							wide
-							@click="generate"
-						>
-							{{ $t('reusable.generate') }}
-						</wt-button>
-						<wt-button
-							color="secondary"
-							wide
-							@click="closePopup"
-						>
-							{{ $t('reusable.close') }}
-						</wt-button>
-					</div>
-				</div>
-			</template>
-		</wt-popup>
-	</div>
-</template>
-
-<script lang="ts">
-import { useVuelidate } from '@vuelidate/core';
-import { required } from '@vuelidate/validators';
-import { MediaAPI } from '@webitel/api-services/api';
-import { StorageServiceType } from '@webitel/api-services/gen/models';
-import { WtPlayer } from '@webitel/ui-sdk/components';
-import { MicrosoftLanguage as TtsMicrosoftLanguage } from 'webitel-sdk/enums';
-import validationMixin from '../../../../../../../app/mixins/baseMixins/openedObjectValidationMixin/openedObjectValidationMixin';
-import CognitiveProfilesAPI from '../../../../../../integrations/modules/cognitive-profiles/api/cognitiveProfiles';
-import TextToSpeechAPI from '../api/TextToSpeechAPI';
-import TtsGoogleVoice from '../enums/TtsGoogleVoice.enum';
-import TtsMicrosoftVoice from '../enums/TtsMicrosoftVoice.enum';
-import TtsTextType from '../lookups/TtsTextType.lookup';
-
-const getModel = () => ({
-	name: '',
-	profile: {},
-	textType: TtsTextType[0],
-	language: TtsMicrosoftLanguage['en-US'],
-	voice: TtsMicrosoftVoice[0],
-	text: '',
-	format: 'wav',
-});
-
-export default {
-	name: 'TextToSpeechPopup',
-	components: {
-		WtPlayer,
-	},
-	mixins: [
-		validationMixin,
-	],
-	props: {
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	setup: () => ({
-		// Reasons for use $stopPropagation
-		// https://webitel.atlassian.net/browse/WTEL-4559?focusedCommentId=621761
-		v$: useVuelidate({
-			$stopPropagation: true,
-		}),
-	}),
-	data: () => ({
-		isOpened: false,
-		draft: {},
-		textTypeOptions: TtsTextType,
-		TtsMicrosoftLanguage: Object.values(TtsMicrosoftLanguage),
-		TtsMicrosoftVoice,
-		TtsGoogleVoice,
-		audio: null,
-		isGenerating: false,
-		isSaving: false,
-	}),
-	validations: {
-		draft: {
-			name: {
-				required,
-			},
-			profile: {
-				required,
-			},
-			text: {
-				required,
-			},
-		},
-	},
-	computed: {
-		disabledActions() {
-			return this.checkValidations('draft') || this.disabled;
-		},
-		mediaId() {
-			return this.$route.params.mediaId;
-		},
-		voiceOptions() {
-			const language = this.draft.language;
-			if (this.draft.profile?.provider === 'Google' && language) {
-				const googleVoices = this.TtsGoogleVoice.filter((voice) =>
-					voice.toLowerCase().includes(language.toLowerCase()),
-				);
-				if (googleVoices.length) return googleVoices;
-			}
-			return this.TtsMicrosoftVoice;
-		},
-	},
-	watch: {
-		mediaId: {
-			handler(value) {
-				if (value === 'new') this.openPopup();
-			},
-			immediate: true,
-		},
-		isOpened: {
-			handler() {
-				this.draft = getModel();
-			},
-			immediate: true,
-		},
-		voiceOptions(options) {
-			if (!options.includes(this.draft.voice)) {
-				this.draft.voice = options[0];
-			}
-		},
-	},
-	methods: {
-		openPopup() {
-			this.$emit('opened');
-			this.$router.push({
-				...this.$route,
-				params: {
-					mediaId: 'new',
-				},
-			});
-			this.isOpened = true;
-		},
-		closePopup() {
-			this.$router.go(-1);
-			this.isOpened = false;
-			this.audio = null;
-		},
-		async generate() {
-			try {
-				this.isGenerating = true;
-				const params = {
-					profileId: this.draft.profile.id,
-					textType: this.draft.textType.value,
-					language: this.draft.language,
-					voice: this.draft.voice,
-					format: this.draft.format,
-					text: this.draft.text,
-				};
-				this.audio = await TextToSpeechAPI.getTts(params);
-			} finally {
-				this.isGenerating = false;
-			}
-		},
-		async save() {
-			try {
-				this.isSaving = true;
-				const file = new File(
-					[
-						this.audio,
-					],
-					`${this.draft.name}.wav`,
-					{
-						type: 'audio/wav',
-					},
-				);
-				await MediaAPI.add({
-					itemInstance: file,
-				});
-				this.closePopup();
-			} finally {
-				this.isSaving = false;
-			}
-		},
-		searchProfiles(params) {
-			const fields = [
-				'id',
-				'name',
-				'provider',
-			];
-			const service = StorageServiceType.Tts;
-			return CognitiveProfilesAPI.getLookup({
-				...params,
-				fields,
-				service,
-			});
-		},
-	},
-};
-</script>
-
-<style
-	lang="scss"
-	scoped
->
-.tts {
-	line-height: 0;
-}
-
-.tts__footer-wrapper {
-	display: flex;
-	flex-direction: column;
-	width: 100%;
-	gap: var(--popup-actions-padding);
-}
-
-.tts__footer-actions-wrapper {
-	display: flex;
-	gap: var(--popup-actions-padding);
-}
-</style>
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/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,
 };
 

From 9761807e9f2bebe88e88ac74b3d96d6361b46e29 Mon Sep 17 00:00:00 2001
From: Lera24 <bedulinavalera21@gmail.com>
Date: Wed, 14 Oct 2026 12:53:53 +0300
Subject: [PATCH 2/4] fix: media play action, tts validation and table columns
 fixed [WTEL-10653](https://webitel.atlassian.net/browse/WTEL-10653)

---
 .../__tests__/media-play-action.spec.js       | 10 -------
 .../__tests__/play-media-action.spec.js       | 10 +++++++
 ...on.vue => download-media-files-action.vue} |  8 ++---
 ...-play-action.vue => play-media-action.vue} |  8 ++---
 .../media/components/text-to-speech-popup.vue | 17 ++++++++---
 .../modules/media/components/the-media.vue    | 30 ++++---------------
 6 files changed, 37 insertions(+), 46 deletions(-)
 delete mode 100644 src/modules/lookups/modules/media/components/__tests__/media-play-action.spec.js
 create mode 100644 src/modules/lookups/modules/media/components/__tests__/play-media-action.spec.js
 rename src/modules/lookups/modules/media/components/{media-download-files-action.vue => download-media-files-action.vue} (84%)
 rename src/modules/lookups/modules/media/components/{media-play-action.vue => play-media-action.vue} (87%)

diff --git a/src/modules/lookups/modules/media/components/__tests__/media-play-action.spec.js b/src/modules/lookups/modules/media/components/__tests__/media-play-action.spec.js
deleted file mode 100644
index ea5b23882..000000000
--- a/src/modules/lookups/modules/media/components/__tests__/media-play-action.spec.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-
-import MediaPlayAction from '../media-play-action.vue';
-
-describe('MediaPlayAction', () => {
-	it('renders a component', () => {
-		const wrapper = shallowMount(MediaPlayAction);
-		expect(wrapper.isVisible()).toBe(true);
-	});
-});
diff --git a/src/modules/lookups/modules/media/components/__tests__/play-media-action.spec.js b/src/modules/lookups/modules/media/components/__tests__/play-media-action.spec.js
new file mode 100644
index 000000000..56db75171
--- /dev/null
+++ b/src/modules/lookups/modules/media/components/__tests__/play-media-action.spec.js
@@ -0,0 +1,10 @@
+import { shallowMount } from '@vue/test-utils';
+
+import PlayMediaAction from '../play-media-action.vue';
+
+describe('PlayMediaAction', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(PlayMediaAction);
+		expect(wrapper.isVisible()).toBe(true);
+	});
+});
diff --git a/src/modules/lookups/modules/media/components/media-download-files-action.vue b/src/modules/lookups/modules/media/components/download-media-files-action.vue
similarity index 84%
rename from src/modules/lookups/modules/media/components/media-download-files-action.vue
rename to src/modules/lookups/modules/media/components/download-media-files-action.vue
index 817e1d0fd..3c1dd4b19 100644
--- a/src/modules/lookups/modules/media/components/media-download-files-action.vue
+++ b/src/modules/lookups/modules/media/components/download-media-files-action.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="media-download-files-action">
+  <div class="download-media-files-action">
     <wt-button
       :loading="loading"
       @click="emit('click')"
@@ -8,7 +8,7 @@
     </wt-button>
     <div
       v-show="loading"
-      class="media-download-files-action__progress typo-caption"
+      class="download-media-files-action__progress typo-caption"
     >
       <p>{{ t('utils.downloadFilesBtn.filesLoaded') }} {{ downloadedCount }}</p>
       <p v-show="zippingPercent">
@@ -35,11 +35,11 @@ const { t } = useI18n();
 </script>
 
 <style scoped>
-.media-download-files-action {
+.download-media-files-action {
   position: relative;
 }
 
-.media-download-files-action__progress {
+.download-media-files-action__progress {
   position: absolute;
   top: 100%;
   right: 0;
diff --git a/src/modules/lookups/modules/media/components/media-play-action.vue b/src/modules/lookups/modules/media/components/play-media-action.vue
similarity index 87%
rename from src/modules/lookups/modules/media/components/media-play-action.vue
rename to src/modules/lookups/modules/media/components/play-media-action.vue
index 55f438821..0b968d6f7 100644
--- a/src/modules/lookups/modules/media/components/media-play-action.vue
+++ b/src/modules/lookups/modules/media/components/play-media-action.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="media-play-action">
+  <div class="play-media-action">
     <wt-icon-btn
       v-show="!playing"
       v-tooltip="t('iconHints.play')"
@@ -9,7 +9,7 @@
 
     <iframe
       v-show="playing"
-      class="media-play-action__equalizer"
+      class="play-media-action__equalizer"
       :src="`${baseUrl}animations/equalizer/eq.html`"
     />
   </div>
@@ -37,7 +37,7 @@ const baseUrl = import.meta.env.BASE_URL; // to resolve iframe equalizer path af
 </script>
 
 <style scoped>
-.media-play-action {
+.play-media-action {
   overflow: hidden;
   width: var(--icon-md-size);
   height: var(--icon-md-size);
@@ -48,7 +48,7 @@ const baseUrl = import.meta.env.BASE_URL; // to resolve iframe equalizer path af
   Vidstack player rewrites iframe`s width and height in vidstack/player/styles/base.css.
   So here we need to write sizes explicitly.
 **/
-.media-play-action__equalizer {
+.play-media-action__equalizer {
   width: inherit;
   height: inherit;
 }
diff --git a/src/modules/lookups/modules/media/components/text-to-speech-popup.vue b/src/modules/lookups/modules/media/components/text-to-speech-popup.vue
index d11fd08c7..d45926a4f 100644
--- a/src/modules/lookups/modules/media/components/text-to-speech-popup.vue
+++ b/src/modules/lookups/modules/media/components/text-to-speech-popup.vue
@@ -15,6 +15,7 @@
           v-model:model-value="draft.name"
           :label="t('reusable.name')"
           :regle-validation="r$.$fields.name"
+          required
         />
         <wt-single-select
           v-model:model-value="draft.profile"
@@ -22,6 +23,7 @@
           :label="t('objects.integrations.cognitiveProfiles.cognitiveProfiles', 1)"
           :search-method="searchProfiles"
           :regle-validation="r$.$fields.profile"
+          required
         />
         <wt-single-select
           v-model:model-value="draft.textType"
@@ -56,6 +58,7 @@
           v-model:model-value="draft.text"
           :label="t('vocabulary.text')"
           :regle-validation="r$.$fields.text"
+          required
         />
       </form>
     </template>
@@ -120,7 +123,7 @@ import {
 import { textToSpeechSchema } from '@webitel/api-services/validations';
 import { WtPlayer } from '@webitel/ui-sdk/components';
 import { ButtonColor } from '@webitel/ui-sdk/enums';
-import { computed, ref, watch } from 'vue';
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { MicrosoftLanguage } from 'webitel-sdk/enums';
 
@@ -146,7 +149,7 @@ const textTypeOptions = [
 
 type TextToSpeechDraft = {
 	name: string;
-	profile: {
+	profile?: {
 		id?: string;
 		name?: string;
 		provider?: string;
@@ -160,7 +163,8 @@ type TextToSpeechDraft = {
 
 const draft = ref<TextToSpeechDraft>({
 	name: '',
-	profile: {},
+	// [Claude] `undefined`, not `{}`: for an empty object regle files the error under `id`, which the select doesn't read
+	profile: undefined,
 	textType: TtsTextType.Text,
 	language: MicrosoftLanguage['en-US'],
 	voice: TtsMicrosoftVoice.Male,
@@ -175,6 +179,11 @@ const { r$ } = useRegleSchema(draft, textToSpeechSchema, {
 	autoDirty: true,
 });
 
+onMounted(async () => {
+	await nextTick();
+	r$.$touch();
+});
+
 const voiceOptions = computed<TextToSpeechDraft['voice'][]>(() => {
 	const { language, profile } = draft.value;
 	if (profile?.provider === StorageProviderType.Google && language) {
@@ -193,7 +202,7 @@ const generate = async () => {
 		isGenerating.value = true;
 		const { profile, textType, language, voice, format, text } = draft.value;
 		audio.value = await MediaAPI.generateTts({
-			profileId: profile.id ?? '',
+			profileId: profile?.id ?? '',
 			textType,
 			language,
 			voice,
diff --git a/src/modules/lookups/modules/media/components/the-media.vue b/src/modules/lookups/modules/media/components/the-media.vue
index e1c9fdee3..e503b2c0b 100644
--- a/src/modules/lookups/modules/media/components/the-media.vue
+++ b/src/modules/lookups/modules/media/components/the-media.vue
@@ -7,7 +7,7 @@
       <wt-page-header hide-primary>
         <wt-breadcrumb :path="path" />
         <template #actions>
-          <media-download-files-action
+          <download-media-files-action
             :loading="isFilesLoading"
             :downloaded-count="filesDownloadProgress.count"
             :zipping-percent="filesZippingProgress.percent"
@@ -37,11 +37,7 @@
             {{ t('objects.lookups.media.allMediaFiles') }}
           </h3>
           <wt-action-bar
-            :include="[
-              IconAction.REFRESH,
-              IconAction.DELETE,
-              IconAction.COLUMNS,
-            ]"
+            :include="[IconAction.REFRESH, IconAction.DELETE]"
             :disabled:delete="!hasDeleteAccess || !selected.length"
             @click:refresh="loadDataList"
             @click:delete="
@@ -66,12 +62,6 @@
               icon="tts-download"
               @click="openTextToSpeech"
             />
-            <template #columns>
-              <wt-table-column-select
-                :headers="headers"
-                @change="updateShownHeaders"
-              />
-            </template>
           </wt-action-bar>
         </header>
 
@@ -113,13 +103,9 @@
           <wt-table
             v-show="dataList.length && !isLoading"
             :data="dataList"
-            :headers="shownHeaders"
+            :headers="headers"
             :selected="selected"
-            reorderable-columns
-            resizable-columns
             sortable
-            @column-reorder="columnReorder"
-            @column-resize="columnResize"
             @sort="updateSort"
             @update:selected="updateSelected"
           >
@@ -136,7 +122,7 @@
               {{ prettifyFileSize(item.size) }}
             </template>
             <template #actions="{ item }">
-              <media-play-action
+              <play-media-action
                 v-if="item.mimeType?.includes('audio')"
                 :playing="isPlaying(item)"
                 @play="play(item)"
@@ -221,8 +207,8 @@ import RouteNames from '../../../../../app/router/_internals/RouteNames.enum';
 import { useMediaPlayer } from '../composables/useMediaPlayer';
 import { useMediaUpload } from '../composables/useMediaUpload';
 import { useMediaDatalistStore } from '../stores/datalist/mediaDatalistStore';
-import MediaDownloadFilesAction from './media-download-files-action.vue';
-import MediaPlayAction from './media-play-action.vue';
+import DownloadMediaFilesAction from './download-media-files-action.vue';
+import PlayMediaAction from './play-media-action.vue';
 import TextToSpeechPopup from './text-to-speech-popup.vue';
 
 const { t } = useI18n();
@@ -241,7 +227,6 @@ const {
 	size,
 	next,
 	headers,
-	shownHeaders,
 	filtersManager,
 	isFiltersRestoring,
 } = storeToRefs(mediaDatalistStore);
@@ -253,9 +238,6 @@ const {
 	updatePage,
 	updateSize,
 	updateSort,
-	columnResize,
-	columnReorder,
-	updateShownHeaders,
 	deleteEls,
 	addFilter,
 	updateFilter,

From 6b2595f988a67187e6b9b54984d5b02fddd3d5f7 Mon Sep 17 00:00:00 2001
From: Lera24 <bedulinavalera21@gmail.com>
Date: Thu, 15 Oct 2026 17:18:24 +0300
Subject: [PATCH 3/4] refactor: media table play toggle, column resize and
 reorder, media urls with app auth
 [WTEL-10653](https://webitel.atlassian.net/browse/WTEL-10653)

---
 public/animations/equalizer/eq.html           |  68 ----
 public/animations/equalizer/eq.js             | 358 ------------------
 .../animations/equalizer/images/eq_atlas_.png | Bin 178 -> 0 bytes
 .../__tests__/play-media-action.spec.js       |  10 -
 .../media/components/play-media-action.vue    |  55 ---
 .../modules/media/components/the-media.vue    |  41 +-
 .../__tests__/useMediaPlayer.spec.ts          |   9 -
 .../media/composables/useMediaPlayer.ts       |  10 +-
 8 files changed, 35 insertions(+), 516 deletions(-)
 delete mode 100644 public/animations/equalizer/eq.html
 delete mode 100644 public/animations/equalizer/eq.js
 delete mode 100644 public/animations/equalizer/images/eq_atlas_.png
 delete mode 100644 src/modules/lookups/modules/media/components/__tests__/play-media-action.spec.js
 delete mode 100644 src/modules/lookups/modules/media/components/play-media-action.vue

diff --git a/public/animations/equalizer/eq.html b/public/animations/equalizer/eq.html
deleted file mode 100644
index 79f97e221..000000000
--- a/public/animations/equalizer/eq.html
+++ /dev/null
@@ -1,68 +0,0 @@
-<!DOCTYPE html>
-<!--
-	NOTES:
-	1. All tokens are represented by '$' sign in the template.
-	2. You can write your code only wherever mentioned.
-	3. All occurrences of existing tokens will be replaced by their appropriate values.
-	4. Blank lines will be removed automatically.
-	5. Remove unnecessary comments before creating your template.
--->
-<html>
-<head>
-<meta charset="UTF-8">
-<meta name="authoring-tool" content="Adobe_Animate_CC">
-<title>eq</title>
-<!-- write your code here -->
-<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
-<script src="eq.js"></script>
-<script>
-var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
-function init() {
-	canvas = document.getElementById("canvas");
-	anim_container = document.getElementById("animation_container");
-	dom_overlay_container = document.getElementById("dom_overlay_container");
-	var comp=AdobeAn.getComposition("AED6681D7DEBBB48AE4A6EEB506702CC");
-	var lib=comp.getLibrary();
-	var loader = new createjs.LoadQueue(false);
-	loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});
-	loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
-	var lib=comp.getLibrary();
-	loader.loadManifest(lib.properties.manifest);
-}
-function handleFileLoad(evt, comp) {
-	var images=comp.getImages();	
-	if (evt && (evt.item.type == "image")) { images[evt.item.id] = evt.result; }	
-}
-function handleComplete(evt,comp) {
-	//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
-	var lib=comp.getLibrary();
-	var ss=comp.getSpriteSheet();
-	var queue = evt.target;
-	var ssMetadata = lib.ssMetadata;
-	for(i=0; i<ssMetadata.length; i++) {
-		ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
-	}
-	exportRoot = new lib.eq();
-	stage = new lib.Stage(canvas);	
-	//Registers the "tick" event listener.
-	fnStartAnimation = function() {
-		stage.addChild(exportRoot);
-		createjs.Ticker.setFPS(lib.properties.fps);
-		createjs.Ticker.addEventListener("tick", stage);
-	}	    
-	//Code to support hidpi screens and responsive scaling.
-	AdobeAn.makeResponsive(false,'both',false,1,[canvas,anim_container,dom_overlay_container]);	
-	AdobeAn.compositionLoaded(lib.properties.id);
-	fnStartAnimation();
-}
-</script>
-<!-- write your code here -->
-</head>
-<body onload="init();" style="margin:0px;">
-	<div id="animation_container" style="background-color:rgba(255, 255, 255, 0.00); width:24px; height:24px">
-		<canvas id="canvas" width="24" height="24" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 0.00);"></canvas>
-		<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:24px; height:24px; position: absolute; left: 0px; top: 0px; display: block;">
-		</div>
-	</div>
-</body>
-</html>
\ No newline at end of file
diff --git a/public/animations/equalizer/eq.js b/public/animations/equalizer/eq.js
deleted file mode 100644
index 49d691c85..000000000
--- a/public/animations/equalizer/eq.js
+++ /dev/null
@@ -1,358 +0,0 @@
-(function (cjs, an) {
-
-var p; // shortcut to reference prototypes
-var lib={};var ss={};var img={};
-lib.ssMetadata = [
-		{name:"eq_atlas_", frames: [[11,33,4,24],[11,0,7,31],[20,0,4,36],[17,38,4,20],[0,33,9,31],[23,38,4,13],[0,0,9,31]]}
-];
-
-
-// symbols:
-
-
-
-(lib.CachedTexturedBitmap_1 = function() {
-	this.initialize(ss["eq_atlas_"]);
-	this.gotoAndStop(0);
-}).prototype = p = new cjs.Sprite();
-
-
-
-(lib.CachedTexturedBitmap_2 = function() {
-	this.initialize(ss["eq_atlas_"]);
-	this.gotoAndStop(1);
-}).prototype = p = new cjs.Sprite();
-
-
-
-(lib.CachedTexturedBitmap_3 = function() {
-	this.initialize(ss["eq_atlas_"]);
-	this.gotoAndStop(2);
-}).prototype = p = new cjs.Sprite();
-
-
-
-(lib.CachedTexturedBitmap_6 = function() {
-	this.initialize(ss["eq_atlas_"]);
-	this.gotoAndStop(3);
-}).prototype = p = new cjs.Sprite();
-
-
-
-(lib.CachedTexturedBitmap_7 = function() {
-	this.initialize(ss["eq_atlas_"]);
-	this.gotoAndStop(4);
-}).prototype = p = new cjs.Sprite();
-
-
-
-(lib.CachedTexturedBitmap_8 = function() {
-	this.initialize(ss["eq_atlas_"]);
-	this.gotoAndStop(5);
-}).prototype = p = new cjs.Sprite();
-
-
-
-(lib.CachedTexturedBitmap_9 = function() {
-	this.initialize(ss["eq_atlas_"]);
-	this.gotoAndStop(6);
-}).prototype = p = new cjs.Sprite();
-
-
-
-(lib.Анимация15 = function(mode,startPosition,loop) {
-	this.initialize(mode,startPosition,loop,{});
-
-	// Слой_1
-	this.instance = new lib.CachedTexturedBitmap_9();
-	this.instance.parent = this;
-	this.instance.setTransform(-0.9,-3.2,0.2092,0.2092);
-
-	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));
-
-}).prototype = p = new cjs.MovieClip();
-p.nominalBounds = new cjs.Rectangle(-0.9,-3.2,1.9,6.5);
-
-
-(lib.Анимация14 = function(mode,startPosition,loop) {
-	this.initialize(mode,startPosition,loop,{});
-
-	// Слой_1
-	this.instance = new lib.CachedTexturedBitmap_8();
-	this.instance.parent = this;
-	this.instance.setTransform(-0.95,-3.25,0.5,0.5);
-
-	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));
-
-}).prototype = p = new cjs.MovieClip();
-p.nominalBounds = new cjs.Rectangle(-0.9,-3.2,2,6.5);
-
-
-(lib.Анимация13 = function(mode,startPosition,loop) {
-	this.initialize(mode,startPosition,loop,{});
-
-	// Слой_1
-	this.instance = new lib.CachedTexturedBitmap_7();
-	this.instance.parent = this;
-	this.instance.setTransform(-0.9,-3.2,0.211,0.211);
-
-	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));
-
-}).prototype = p = new cjs.MovieClip();
-p.nominalBounds = new cjs.Rectangle(-0.9,-3.2,1.9,6.6);
-
-
-(lib.Анимация12 = function(mode,startPosition,loop) {
-	this.initialize(mode,startPosition,loop,{});
-
-	// Слой_1
-	this.instance = new lib.CachedTexturedBitmap_6();
-	this.instance.parent = this;
-	this.instance.setTransform(-0.95,-5,0.5,0.5);
-
-	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));
-
-}).prototype = p = new cjs.MovieClip();
-p.nominalBounds = new cjs.Rectangle(-0.9,-5,2,10);
-
-
-(lib.Анимация11 = function(mode,startPosition,loop) {
-	this.initialize(mode,startPosition,loop,{});
-
-	// Слой_1
-	this.instance = new lib.CachedTexturedBitmap_6();
-	this.instance.parent = this;
-	this.instance.setTransform(-0.95,-5,0.5,0.5);
-
-	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));
-
-}).prototype = p = new cjs.MovieClip();
-p.nominalBounds = new cjs.Rectangle(-0.9,-5,2,10);
-
-
-(lib.Анимация10 = function(mode,startPosition,loop) {
-	this.initialize(mode,startPosition,loop,{});
-
-	// Слой_1
-	this.instance = new lib.CachedTexturedBitmap_6();
-	this.instance.parent = this;
-	this.instance.setTransform(-0.95,-5,0.5,0.5);
-
-	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));
-
-}).prototype = p = new cjs.MovieClip();
-p.nominalBounds = new cjs.Rectangle(-0.9,-5,2,10);
-
-
-(lib.Анимация7 = function(mode,startPosition,loop) {
-	this.initialize(mode,startPosition,loop,{});
-
-	// Слой_1
-	this.instance = new lib.CachedTexturedBitmap_3();
-	this.instance.parent = this;
-	this.instance.setTransform(-0.95,-9,0.5,0.5);
-
-	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));
-
-}).prototype = p = new cjs.MovieClip();
-p.nominalBounds = new cjs.Rectangle(-0.9,-9,2,18);
-
-
-(lib.Анимация4 = function(mode,startPosition,loop) {
-	this.initialize(mode,startPosition,loop,{});
-
-	// Слой_1
-	this.instance = new lib.CachedTexturedBitmap_2();
-	this.instance.parent = this;
-	this.instance.setTransform(-0.9,-4.45,0.289,0.289);
-
-	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));
-
-}).prototype = p = new cjs.MovieClip();
-p.nominalBounds = new cjs.Rectangle(-0.9,-4.4,2,8.9);
-
-
-(lib.Анимация2 = function(mode,startPosition,loop) {
-	this.initialize(mode,startPosition,loop,{});
-
-	// Слой_1
-	this.instance = new lib.CachedTexturedBitmap_1();
-	this.instance.parent = this;
-	this.instance.setTransform(-0.95,-6,0.5,0.5);
-
-	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));
-
-}).prototype = p = new cjs.MovieClip();
-p.nominalBounds = new cjs.Rectangle(-0.9,-6,2,12);
-
-
-// stage content:
-(lib.eq = function(mode,startPosition,loop) {
-	this.initialize(mode,startPosition,loop,{});
-
-	// e
-	this.instance = new lib.Анимация2("synched",0);
-	this.instance.parent = this;
-	this.instance.setTransform(5.95,21.05,1,1,0,0,0,0,6);
-
-	this.timeline.addTween(cjs.Tween.get(this.instance).to({scaleY:0.083,y:21.1},29).to({scaleY:1,y:21.05},30).wait(1));
-
-	// d
-	this.instance_1 = new lib.Анимация4("synched",0);
-	this.instance_1.parent = this;
-	this.instance_1.setTransform(8.9,21.1,1,0.3611,0,0,0,0,4.5);
-
-	this.timeline.addTween(cjs.Tween.get(this.instance_1).to({regY:4.7,scaleY:1.7302,y:21.35},29).to({regY:4.5,scaleY:0.3611,y:21.1},30).wait(1));
-
-	// c
-	this.instance_2 = new lib.Анимация7("synched",0);
-	this.instance_2.parent = this;
-	this.instance_2.setTransform(11.85,21.1,1,1,0,0,0,0,9);
-
-	this.timeline.addTween(cjs.Tween.get(this.instance_2).to({regX:0.1,regY:9.1,scaleY:0.2417,x:11.95,y:21.15},29).to({regX:0,regY:9,scaleY:1,x:11.85,y:21.1},30).wait(1));
-
-	// b
-	this.instance_3 = new lib.Анимация10("synched",0);
-	this.instance_3.parent = this;
-	this.instance_3.setTransform(14.8,21.15,1,0.625,0,0,0,0,5);
-
-	this.instance_4 = new lib.Анимация11("synched",0);
-	this.instance_4.parent = this;
-	this.instance_4.setTransform(14.8,21.1,1,1,0,0,0,0,5);
-	this.instance_4._off = true;
-
-	this.instance_5 = new lib.Анимация12("synched",0);
-	this.instance_5.parent = this;
-	this.instance_5.setTransform(14.8,21.15,1,0.62,0,0,0,0,5);
-
-	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_3}]}).to({state:[{t:this.instance_4}]},29).to({state:[{t:this.instance_5}]},30).wait(1));
-	this.timeline.addTween(cjs.Tween.get(this.instance_3).to({_off:true,scaleY:1,y:21.1},29).wait(31));
-	this.timeline.addTween(cjs.Tween.get(this.instance_4).to({_off:false},29).to({_off:true,scaleY:0.62,y:21.15},30).wait(1));
-
-	// a
-	this.instance_6 = new lib.Анимация13("synched",0);
-	this.instance_6.parent = this;
-	this.instance_6.setTransform(17.75,21.2,1,2.3692,0,0,0,0,3.3);
-
-	this.instance_7 = new lib.Анимация14("synched",0);
-	this.instance_7.parent = this;
-	this.instance_7.setTransform(17.75,21.15,1,1,0,0,0,0,3.3);
-	this.instance_7._off = true;
-
-	this.instance_8 = new lib.Анимация15("synched",0);
-	this.instance_8.parent = this;
-	this.instance_8.setTransform(17.75,21.3,1,2.3897,0,0,0,0,3.3);
-
-	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_6}]}).to({state:[{t:this.instance_7}]},29).to({state:[{t:this.instance_8}]},30).wait(1));
-	this.timeline.addTween(cjs.Tween.get(this.instance_6).to({_off:true,scaleY:1,y:21.15},29).wait(31));
-	this.timeline.addTween(cjs.Tween.get(this.instance_7).to({_off:false},29).to({_off:true,scaleY:2.3897,y:21.3},30).wait(1));
-
-}).prototype = p = new cjs.MovieClip();
-p.nominalBounds = new cjs.Rectangle(17,15.1,1.8000000000000007,6.299999999999999);
-// library properties:
-lib.properties = {
-	id: 'AED6681D7DEBBB48AE4A6EEB506702CC',
-	width: 24,
-	height: 24,
-	fps: 60,
-	color: "#FFFFFF",
-	opacity: 0.00,
-	manifest: [
-		{src:"images/eq_atlas_.png", id:"eq_atlas_"}
-	],
-	preloads: []
-};
-
-
-
-// bootstrap callback support:
-
-(lib.Stage = function(canvas) {
-	createjs.Stage.call(this, canvas);
-}).prototype = p = new createjs.Stage();
-
-p.setAutoPlay = function(autoPlay) {
-	this.tickEnabled = autoPlay;
-}
-p.play = function() { this.tickEnabled = true; this.getChildAt(0).gotoAndPlay(this.getTimelinePosition()) }
-p.stop = function(ms) { if(ms) this.seek(ms); this.tickEnabled = false; }
-p.seek = function(ms) { this.tickEnabled = true; this.getChildAt(0).gotoAndStop(lib.properties.fps * ms / 1000); }
-p.getDuration = function() { return this.getChildAt(0).totalFrames / lib.properties.fps * 1000; }
-
-p.getTimelinePosition = function() { return this.getChildAt(0).currentFrame / lib.properties.fps * 1000; }
-
-an.bootcompsLoaded = an.bootcompsLoaded || [];
-if(!an.bootstrapListeners) {
-	an.bootstrapListeners=[];
-}
-
-an.bootstrapCallback=function(fnCallback) {
-	an.bootstrapListeners.push(fnCallback);
-	if(an.bootcompsLoaded.length > 0) {
-		for(var i=0; i<an.bootcompsLoaded.length; ++i) {
-			fnCallback(an.bootcompsLoaded[i]);
-		}
-	}
-};
-
-an.compositions = an.compositions || {};
-an.compositions['AED6681D7DEBBB48AE4A6EEB506702CC'] = {
-	getStage: function() { return exportRoot.getStage(); },
-	getLibrary: function() { return lib; },
-	getSpriteSheet: function() { return ss; },
-	getImages: function() { return img; }
-};
-
-an.compositionLoaded = function(id) {
-	an.bootcompsLoaded.push(id);
-	for(var j=0; j<an.bootstrapListeners.length; j++) {
-		an.bootstrapListeners[j](id);
-	}
-}
-
-an.getComposition = function(id) {
-	return an.compositions[id];
-}
-
-
-an.makeResponsive = function(isResp, respDim, isScale, scaleType, domContainers) {
-	var lastW, lastH, lastS=1;
-	window.addEventListener('resize', resizeCanvas);
-	resizeCanvas();
-	function resizeCanvas() {
-		var w = lib.properties.width, h = lib.properties.height;
-		var iw = window.innerWidth, ih=window.innerHeight;
-		var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;
-		if(isResp) {
-			if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {
-				sRatio = lastS;
-			}
-			else if(!isScale) {
-				if(iw<w || ih<h)
-					sRatio = Math.min(xRatio, yRatio);
-			}
-			else if(scaleType==1) {
-				sRatio = Math.min(xRatio, yRatio);
-			}
-			else if(scaleType==2) {
-				sRatio = Math.max(xRatio, yRatio);
-			}
-		}
-		domContainers[0].width = w * pRatio * sRatio;
-		domContainers[0].height = h * pRatio * sRatio;
-		domContainers.forEach(function(container) {
-			container.style.width = w * sRatio + 'px';
-			container.style.height = h * sRatio + 'px';
-		});
-		stage.scaleX = pRatio*sRatio;
-		stage.scaleY = pRatio*sRatio;
-		lastW = iw; lastH = ih; lastS = sRatio;
-		stage.tickOnUpdate = false;
-		stage.update();
-		stage.tickOnUpdate = true;
-	}
-}
-
-
-})(createjs = createjs||{}, AdobeAn = AdobeAn||{});
-var createjs, AdobeAn;
diff --git a/public/animations/equalizer/images/eq_atlas_.png b/public/animations/equalizer/images/eq_atlas_.png
deleted file mode 100644
index d6282bf9e433e8bbd363cd7c6f9eb35ac8a1ff4f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 178
zcmeAS@N?(olHy`uVBq!ia0vp^3P9|@!3-pQ0$S$)DV_kI5LX~Q0|s`;Hk$+aEG0pH
z!3_QT|BEk8zYF9Cdb&7<cyzwK;>g9Iz`^3M_W%E#dfG~<6`IW7RV-TsJY^LxxhgMl
zXk?n-)aH?SK+CW}@XJ~823ZXb9lZ&1GVz~9XYB8aRbaQ<aFStzeZ^(@W*?rLw&}vA
QK*Je4UHx3vIVCg!067RY)c^nh

diff --git a/src/modules/lookups/modules/media/components/__tests__/play-media-action.spec.js b/src/modules/lookups/modules/media/components/__tests__/play-media-action.spec.js
deleted file mode 100644
index 56db75171..000000000
--- a/src/modules/lookups/modules/media/components/__tests__/play-media-action.spec.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-
-import PlayMediaAction from '../play-media-action.vue';
-
-describe('PlayMediaAction', () => {
-	it('renders a component', () => {
-		const wrapper = shallowMount(PlayMediaAction);
-		expect(wrapper.isVisible()).toBe(true);
-	});
-});
diff --git a/src/modules/lookups/modules/media/components/play-media-action.vue b/src/modules/lookups/modules/media/components/play-media-action.vue
deleted file mode 100644
index 0b968d6f7..000000000
--- a/src/modules/lookups/modules/media/components/play-media-action.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <div class="play-media-action">
-    <wt-icon-btn
-      v-show="!playing"
-      v-tooltip="t('iconHints.play')"
-      icon="play"
-      @click="emit('play')"
-    />
-
-    <iframe
-      v-show="playing"
-      class="play-media-action__equalizer"
-      :src="`${baseUrl}animations/equalizer/eq.html`"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useI18n } from 'vue-i18n';
-
-withDefaults(
-	defineProps<{
-		playing?: boolean;
-	}>(),
-	{
-		playing: false,
-	},
-);
-
-const emit = defineEmits<{
-	play: [];
-}>();
-
-const { t } = useI18n();
-
-const baseUrl = import.meta.env.BASE_URL; // to resolve iframe equalizer path after build
-</script>
-
-<style scoped>
-.play-media-action {
-  overflow: hidden;
-  width: var(--icon-md-size);
-  height: var(--icon-md-size);
-}
-
-/**
-  @author @rzaritskyi
-  Vidstack player rewrites iframe`s width and height in vidstack/player/styles/base.css.
-  So here we need to write sizes explicitly.
-**/
-.play-media-action__equalizer {
-  width: inherit;
-  height: inherit;
-}
-</style>
diff --git a/src/modules/lookups/modules/media/components/the-media.vue b/src/modules/lookups/modules/media/components/the-media.vue
index e503b2c0b..122b1b68b 100644
--- a/src/modules/lookups/modules/media/components/the-media.vue
+++ b/src/modules/lookups/modules/media/components/the-media.vue
@@ -105,7 +105,11 @@
             :data="dataList"
             :headers="headers"
             :selected="selected"
+            reorderable-columns
+            resizable-columns
             sortable
+            @column-reorder="columnReorder"
+            @column-resize="columnResize"
             @sort="updateSort"
             @update:selected="updateSelected"
           >
@@ -122,10 +126,10 @@
               {{ prettifyFileSize(item.size) }}
             </template>
             <template #actions="{ item }">
-              <play-media-action
+              <wt-icon-btn
                 v-if="item.mimeType?.includes('audio')"
-                :playing="isPlaying(item)"
-                @play="play(item)"
+                v-tooltip="getPlayAction(item).hint"
+                v-bind="getPlayAction(item).attrs"
               />
               <wt-icon-btn
                 v-else
@@ -136,7 +140,7 @@
                 action="download"
                 @click="
                   downloadStorageFile({
-                    url: getMediaDownloadUrl(item.id),
+                    url: getDownloadUrl(item),
                     name: item.name,
                   })
                 "
@@ -169,8 +173,6 @@
           v-if="playerSrc"
           :src="playerSrc"
           @close="closePlayer"
-          @pause="isPaused = true"
-          @play="isPaused = false"
         />
       </section>
     </template>
@@ -188,6 +190,7 @@ import { DynamicFilterSearchComponent as DynamicFilterSearch } from '@webitel/ui
 import { WtPlayer } from '@webitel/ui-sdk/components';
 import { FormatDateMode, IconAction } from '@webitel/ui-sdk/enums';
 import { useFilesExport } from '@webitel/ui-sdk/modules/FilesExport';
+import { getMediaUrlAuth } from '@webitel/ui-sdk/scripts';
 import {
 	downloadStorageFile,
 	getFileTypeIcon,
@@ -201,14 +204,12 @@ import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
-
 import { useUserAccessControl } from '../../../../../app/composables/useUserAccessControl';
 import RouteNames from '../../../../../app/router/_internals/RouteNames.enum';
 import { useMediaPlayer } from '../composables/useMediaPlayer';
 import { useMediaUpload } from '../composables/useMediaUpload';
 import { useMediaDatalistStore } from '../stores/datalist/mediaDatalistStore';
 import DownloadMediaFilesAction from './download-media-files-action.vue';
-import PlayMediaAction from './play-media-action.vue';
 import TextToSpeechPopup from './text-to-speech-popup.vue';
 
 const { t } = useI18n();
@@ -238,6 +239,8 @@ const {
 	updatePage,
 	updateSize,
 	updateSort,
+	columnResize,
+	columnReorder,
 	deleteEls,
 	addFilter,
 	updateFilter,
@@ -254,13 +257,17 @@ const {
 	closeDelete,
 } = useDeleteConfirmationPopup();
 
+/** [Claude] for both the row download and the zip export: the table row and the export item both carry `id` */
+const getDownloadUrl = ({ id }: { id?: unknown }) =>
+	getMediaDownloadUrl(String(id), getMediaUrlAuth());
+
 const {
 	exportFiles,
 	isLoading: isFilesLoading,
 	downloadStatus: filesDownloadProgress,
 	zippingStatus: filesZippingProgress,
 } = useFilesExport({
-	getFileURL: (item) => getMediaDownloadUrl(String(item.id)),
+	getFileURL: getDownloadUrl,
 	fetch: async (params) => {
 		if (selected.value.length)
 			return {
@@ -299,7 +306,19 @@ const { dropZone, isOverDropZone, isUploading, openFileDialog } =
 		onUploaded: loadDataList,
 	});
 
-const { playerSrc, isPaused, play, closePlayer, isPlaying } = useMediaPlayer();
+const { playerSrc, play, closePlayer, isPlaying } = useMediaPlayer();
+
+/** [Claude] play/stop toggle of an audio row: a playing file shows stop, which closes the player */
+const getPlayAction = computed(() => (item: StorageMediaFile) => {
+	const playing = isPlaying(item);
+	return {
+		hint: t(playing ? 'iconHints.stop' : 'iconHints.play'),
+		attrs: {
+			icon: playing ? 'stop' : 'play',
+			onClick: () => (playing ? closePlayer() : play(item)),
+		},
+	};
+});
 
 /** [Claude] the popup lives on `/lookups/media/new`, so it survives a reload and can be linked */
 const isTextToSpeechOpened = computed(() => route.params.mediaId === 'new');
@@ -328,7 +347,7 @@ const getMediaFileFormat = ({ name = '', mimeType = '' }: StorageMediaFile) => {
 };
 
 const openFile = ({ id = '' }: StorageMediaFile) => {
-	window.open(getMediaStreamUrl(id), '_blank');
+	window.open(getMediaStreamUrl(id, getMediaUrlAuth()), '_blank');
 };
 </script>
 
diff --git a/src/modules/lookups/modules/media/composables/__tests__/useMediaPlayer.spec.ts b/src/modules/lookups/modules/media/composables/__tests__/useMediaPlayer.spec.ts
index d719f3d0a..1b1504f02 100644
--- a/src/modules/lookups/modules/media/composables/__tests__/useMediaPlayer.spec.ts
+++ b/src/modules/lookups/modules/media/composables/__tests__/useMediaPlayer.spec.ts
@@ -25,15 +25,6 @@ describe('useMediaPlayer', () => {
 		expect(player.isPlaying(first)).toBe(false);
 	});
 
-	it('does not mark a paused file as playing', () => {
-		const player = useMediaPlayer();
-
-		player.play(first);
-		player.isPaused.value = true;
-
-		expect(player.isPlaying(first)).toBe(false);
-	});
-
 	it('forgets the file on close', () => {
 		const player = useMediaPlayer();
 
diff --git a/src/modules/lookups/modules/media/composables/useMediaPlayer.ts b/src/modules/lookups/modules/media/composables/useMediaPlayer.ts
index 9b9d2152e..36415dcc4 100644
--- a/src/modules/lookups/modules/media/composables/useMediaPlayer.ts
+++ b/src/modules/lookups/modules/media/composables/useMediaPlayer.ts
@@ -1,16 +1,16 @@
 import { getMediaStreamUrl } from '@webitel/api-services/api';
 import type { StorageMediaFile } from '@webitel/api-services/gen/models';
+import { getMediaUrlAuth } from '@webitel/ui-sdk/scripts';
 import { computed, ref } from 'vue';
 
-/** [Claude] the bottom player: which file it plays and whether it's paused */
+/** [Claude] the bottom player: which file it plays */
 export function useMediaPlayer() {
 	const playingFile = ref<StorageMediaFile | null>(null);
-	const isPaused = ref(false);
 
 	const playerSrc = computed(
 		() =>
 			playingFile.value && {
-				src: getMediaStreamUrl(playingFile.value.id ?? ''),
+				src: getMediaStreamUrl(playingFile.value.id ?? '', getMediaUrlAuth()),
 				type: playingFile.value.mimeType ?? '',
 			},
 	);
@@ -23,12 +23,12 @@ export function useMediaPlayer() {
 		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 && !isPaused.value;
+		file.id === playingFile.value?.id;
 
 	return {
 		playerSrc,
-		isPaused,
 		play,
 		closePlayer,
 		isPlaying,

From 4d5b23b1b0ec6c5bccd373fd54580d9beeaf8680 Mon Sep 17 00:00:00 2001
From: Lera24 <bedulinavalera21@gmail.com>
Date: Thu, 15 Oct 2026 18:31:00 +0300
Subject: [PATCH 4/4] refactor: media url helpers take auth option, apps supply
 api url and token
 [WTEL-10653](https://webitel.atlassian.net/browse/WTEL-10653)

---
 .../lookups/modules/media/components/the-media.vue  | 13 ++++++++++---
 .../modules/media/composables/useMediaPlayer.ts     |  6 ++++--
 .../modules/media/scripts/getMediaUrlAuth.ts        |  7 +++++++
 3 files changed, 21 insertions(+), 5 deletions(-)
 create mode 100644 src/modules/lookups/modules/media/scripts/getMediaUrlAuth.ts

diff --git a/src/modules/lookups/modules/media/components/the-media.vue b/src/modules/lookups/modules/media/components/the-media.vue
index 122b1b68b..a0646face 100644
--- a/src/modules/lookups/modules/media/components/the-media.vue
+++ b/src/modules/lookups/modules/media/components/the-media.vue
@@ -190,7 +190,6 @@ import { DynamicFilterSearchComponent as DynamicFilterSearch } from '@webitel/ui
 import { WtPlayer } from '@webitel/ui-sdk/components';
 import { FormatDateMode, IconAction } from '@webitel/ui-sdk/enums';
 import { useFilesExport } from '@webitel/ui-sdk/modules/FilesExport';
-import { getMediaUrlAuth } from '@webitel/ui-sdk/scripts';
 import {
 	downloadStorageFile,
 	getFileTypeIcon,
@@ -208,6 +207,7 @@ import { useUserAccessControl } from '../../../../../app/composables/useUserAcce
 import RouteNames from '../../../../../app/router/_internals/RouteNames.enum';
 import { useMediaPlayer } from '../composables/useMediaPlayer';
 import { useMediaUpload } from '../composables/useMediaUpload';
+import { getMediaUrlAuth } from '../scripts/getMediaUrlAuth';
 import { useMediaDatalistStore } from '../stores/datalist/mediaDatalistStore';
 import DownloadMediaFilesAction from './download-media-files-action.vue';
 import TextToSpeechPopup from './text-to-speech-popup.vue';
@@ -259,7 +259,9 @@ const {
 
 /** [Claude] for both the row download and the zip export: the table row and the export item both carry `id` */
 const getDownloadUrl = ({ id }: { id?: unknown }) =>
-	getMediaDownloadUrl(String(id), getMediaUrlAuth());
+	getMediaDownloadUrl(String(id), {
+		auth: getMediaUrlAuth(),
+	});
 
 const {
 	exportFiles,
@@ -347,7 +349,12 @@ const getMediaFileFormat = ({ name = '', mimeType = '' }: StorageMediaFile) => {
 };
 
 const openFile = ({ id = '' }: StorageMediaFile) => {
-	window.open(getMediaStreamUrl(id, getMediaUrlAuth()), '_blank');
+	window.open(
+		getMediaStreamUrl(id, {
+			auth: getMediaUrlAuth(),
+		}),
+		'_blank',
+	);
 };
 </script>
 
diff --git a/src/modules/lookups/modules/media/composables/useMediaPlayer.ts b/src/modules/lookups/modules/media/composables/useMediaPlayer.ts
index 36415dcc4..cacd4287a 100644
--- a/src/modules/lookups/modules/media/composables/useMediaPlayer.ts
+++ b/src/modules/lookups/modules/media/composables/useMediaPlayer.ts
@@ -1,7 +1,7 @@
 import { getMediaStreamUrl } from '@webitel/api-services/api';
 import type { StorageMediaFile } from '@webitel/api-services/gen/models';
-import { getMediaUrlAuth } from '@webitel/ui-sdk/scripts';
 import { computed, ref } from 'vue';
+import { getMediaUrlAuth } from '../scripts/getMediaUrlAuth';
 
 /** [Claude] the bottom player: which file it plays */
 export function useMediaPlayer() {
@@ -10,7 +10,9 @@ export function useMediaPlayer() {
 	const playerSrc = computed(
 		() =>
 			playingFile.value && {
-				src: getMediaStreamUrl(playingFile.value.id ?? '', getMediaUrlAuth()),
+				src: getMediaStreamUrl(playingFile.value.id ?? '', {
+					auth: getMediaUrlAuth(),
+				}),
 				type: playingFile.value.mimeType ?? '',
 			},
 	);
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') || '',
+});