BC-8795 Add possibility to play audio in folder

config/webpack/webpack.common.js

@@ -173,6 +173,7 @@ module.exports = {
 			"@feature-folder": getDir("src/modules/feature/folder"),
 			"@icons": getDir("src/components/icons"),
 			"@ui-alert": getDir("src/modules/ui/alert"),
+			"@ui-audio-player": getDir("src/modules/ui/audio-player"),
 			"@ui-board": getDir("src/modules/ui/board"),
 			"@ui-breadcrumbs": getDir("src/modules/ui/breadcrumbs"),
 			"@ui-chip": getDir("src/modules/ui/chip"),

src/locales/de.ts

@@ -211,12 +211,6 @@ export default {
 	"common.words.topic": "Thema",
 	"common.words.topics": "Themen",
 	"common.words.yes": "Ja",
-	"component.cardElement.fileElement.audioPlayer.pause": "Anhalten",
-	"component.cardElement.fileElement.audioPlayer.play": "Abspielen",
-	"component.cardElement.fileElement.audioPlayer.slider":
-		"Audio Schieberegler für Fortschritt",
-	"component.cardElement.fileElement.audioPlayer.speed.normal": "Normal",
-	"component.cardElement.fileElement.audioPlayer.speed": "Geschwindigkeitsmenü",
 	"components.administration.adminMigrationSection.description.firstPart":
 		"Bei der Migration wird das Anmeldesystem der Schüler:innen und Lehrkräfte zu moin.schule gewechselt. Die zu den betroffenen Accounts gehörenden Daten bleiben erhalten.",
 	"components.administration.adminMigrationSection.description.secondPart":
@@ -428,6 +422,11 @@ export default {
 	"components.atoms.VCustomChipTimeRemaining.hintHoursShort": "h",
 	"components.atoms.VCustomChipTimeRemaining.hintMinShort": "min",
 	"components.atoms.VCustomChipTimeRemaining.hintMinutes": "Minute | Minuten",
+	"components.audioPlayer.pause": "Anhalten",
+	"components.audioPlayer.play": "Abspielen",
+	"components.audioPlayer.slider": "Audio Schieberegler für Fortschritt",
+	"components.audioPlayer.speed": "Geschwindigkeitsmenü",
+	"components.audioPlayer.speed.normal": "Normal",
 	"components.base.BaseIcon.error":
 		"Das Icon aus dieser Quelle konnte leider nicht geladen werden. Falls Sie Microsoft Edge verwenden, stellen Sie bitte sicher, dass Sie die neuste Version verwenden.",
 	"components.base.showPassword": "Passwort anzeigen",

src/locales/en.ts

@@ -211,11 +211,6 @@ export default {
 	"common.words.topics": "Topics",
 	"common.words.yes": "Yes",
 	"common.words.export": "Course export is downloading",
-	"component.cardElement.fileElement.audioPlayer.pause": "Pause",
-	"component.cardElement.fileElement.audioPlayer.play": "Play",
-	"component.cardElement.fileElement.audioPlayer.slider": "Audio slider",
-	"component.cardElement.fileElement.audioPlayer.speed.normal": "Normal",
-	"component.cardElement.fileElement.audioPlayer.speed": "Speed Menu",
 	"components.administration.adminMigrationSection.description.firstPart":
 		"During the migration, the registration system for students and teachers is changed to moin.schule. The data belonging to the affected accounts will be preserved.",
 	"components.administration.adminMigrationSection.description.secondPart":
@@ -426,6 +421,11 @@ export default {
 	"components.atoms.VCustomChipTimeRemaining.hintHoursShort": "h",
 	"components.atoms.VCustomChipTimeRemaining.hintMinShort": "min",
 	"components.atoms.VCustomChipTimeRemaining.hintMinutes": "minute | minutes",
+	"components.audioPlayer.pause": "Pause",
+	"components.audioPlayer.play": "Play",
+	"components.audioPlayer.slider": "Audio slider",
+	"components.audioPlayer.speed": "Speed Menu",
+	"components.audioPlayer.speed.normal": "Normal",
 	"components.base.BaseIcon.error":
 		"error loading icon {icon} from {source}. It might be not available or you are using the legacy Edge browser.",
 	"components.base.showPassword": "Show password",

src/locales/es.ts

@@ -213,11 +213,6 @@ export default {
 	"common.words.topics": "Temas",
 	"common.words.yes": "Sí",
 	"common.words.export": "La exportación del curso se está descargando",
-	"component.cardElement.fileElement.audioPlayer.pause": "Pausa",
-	"component.cardElement.fileElement.audioPlayer.play": "Reproducir",
-	"component.cardElement.fileElement.audioPlayer.slider": "Control deslizante",
-	"component.cardElement.fileElement.audioPlayer.speed.normal": "Normal",
-	"component.cardElement.fileElement.audioPlayer.speed": "Menú de velocidad",
 	"components.administration.adminMigrationSection.description.firstPart":
 		"Durante la migración se cambia el sistema de registro de alumnos y profesores a moin.schule. Los datos pertenecientes a las cuentas afectadas se conservarán.",
 	"components.administration.adminMigrationSection.description.secondPart":
@@ -432,6 +427,11 @@ export default {
 	"components.atoms.VCustomChipTimeRemaining.hintHoursShort": "h",
 	"components.atoms.VCustomChipTimeRemaining.hintMinShort": "min",
 	"components.atoms.VCustomChipTimeRemaining.hintMinutes": "minuto | minutos",
+	"components.audioPlayer.pause": "Pausa",
+	"components.audioPlayer.play": "Reproducir",
+	"components.audioPlayer.slider": "Control deslizante",
+	"components.audioPlayer.speed": "Menú de velocidad",
+	"components.audioPlayer.speed.normal": "Normal",
 	"components.base.BaseIcon.error":
 		"Error al cargar el icono {icon} de {source}. Es posible que no esté disponible o que estés utilizando el navegador Edge heredado.",
 	"components.base.showPassword": "Mostrar contraseña",

src/locales/uk.ts

@@ -215,11 +215,6 @@ export default {
 	"common.words.topics": "теми",
 	"common.words.yes": "Так",
 	"common.words.export": "Завантажується експорт курсу",
-	"component.cardElement.fileElement.audioPlayer.pause": "пауза",
-	"component.cardElement.fileElement.audioPlayer.play": "грати",
-	"component.cardElement.fileElement.audioPlayer.slider": "повзунок",
-	"component.cardElement.fileElement.audioPlayer.speed.normal": "нормальний",
-	"component.cardElement.fileElement.audioPlayer.speed": "швидке меню",
 	"components.administration.adminMigrationSection.description.firstPart":
 		"Під час міграції система реєстрації студентів і викладачів змінена на moin.schule. Дані відповідних облікових записів буде збережено.",
 	"components.administration.adminMigrationSection.description.secondPart":
@@ -436,6 +431,11 @@ export default {
 	"components.atoms.VCustomChipTimeRemaining.hintMinShort": "хв",
 	"components.atoms.VCustomChipTimeRemaining.hintMinutes":
 		"хвилина | хвилини (хвилин)",
+	"components.audioPlayer.pause": "пауза",
+	"components.audioPlayer.play": "грати",
+	"components.audioPlayer.slider": "повзунок",
+	"components.audioPlayer.speed": "швидке меню",
+	"components.audioPlayer.speed.normal": "нормальний",
 	"components.base.BaseIcon.error":
 		"помилка завантаження значка {icon} з {source}. Можливо, він недоступний або ви використовуєте застарілий браузер Edge.",
 	"components.base.showPassword": "Показати пароль",

src/modules/feature/board-file-element/FileContentElement.unit.ts

@@ -5,6 +5,7 @@ import {
 } from "@/fileStorageApi/v3";
 import { FileElementResponse } from "@/serverApi/v3";
 import NotifierModule from "@/store/notifier";
+import { FileAlert } from "@/types/file/FileAlert.enum";
 import { convertDownloadToPreviewUrl } from "@/utils/fileHelper";
 import { NOTIFIER_MODULE_KEY } from "@/utils/inject";
 import { fileElementResponseFactory } from "@@/tests/test-utils/factory/fileElementResponseFactory";
@@ -21,7 +22,6 @@ import { computed, nextTick } from "vue";
 import FileContentElement from "./FileContentElement.vue";
 import FileContent from "./content/FileContent.vue";
 import { useFileAlerts } from "./content/alert/useFileAlerts.composable";
-import { FileAlert } from "./shared/types/FileAlert.enum";
 import { FileProperties } from "./shared/types/file-properties";
 import FileUpload from "./upload/FileUpload.vue";
 

src/modules/feature/board-file-element/FileContentElement.vue

@@ -57,6 +57,7 @@
 <script lang="ts">
 import { FileRecordParentType, PreviewWidth } from "@/fileStorageApi/v3";
 import { FileElementResponse } from "@/serverApi/v3";
+import { FileAlert } from "@/types/file/FileAlert.enum";
 import {
 	convertDownloadToPreviewUrl,
 	isDownloadAllowed,
@@ -81,7 +82,6 @@ import {
 } from "vue";
 import { useFileAlerts } from "./content/alert/useFileAlerts.composable";
 import FileContent from "./content/FileContent.vue";
-import { FileAlert } from "./shared/types/FileAlert.enum";
 import FileUpload from "./upload/FileUpload.vue";
 
 export default defineComponent({

src/modules/feature/board-file-element/content/FileContent.unit.ts

@@ -1,15 +1,15 @@
 import { PreviewStatus } from "@/fileStorageApi/v3";
+import { FileAlert } from "@/types/file/FileAlert.enum";
 import { fileElementResponseFactory } from "@@/tests/test-utils";
 import { createTestingVuetify } from "@@/tests/test-utils/setup";
+import { BOARD_IS_LIST_LAYOUT } from "@util-board";
 import { shallowMount } from "@vue/test-utils";
-import { FileAlert } from "../shared/types/FileAlert.enum";
 import FileContent from "./FileContent.vue";
 import FileAlerts from "./alert/FileAlerts.vue";
 import FileDisplay from "./display/FileDisplay.vue";
 import FileDescription from "./display/file-description/FileDescription.vue";
 import ContentElementFooter from "./footer/ContentElementFooter.vue";
 import FileInputs from "./inputs/FileInputs.vue";
-import { BOARD_IS_LIST_LAYOUT } from "@util-board";
 
 describe("FileContent", () => {
 	beforeEach(() => {

src/modules/feature/board-file-element/content/FileContent.vue

@@ -47,23 +47,23 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType, ref } from "vue";
-import FileAlerts from "./alert/FileAlerts.vue";
-import FileDisplay from "../content/display/FileDisplay.vue";
-import FileDescription from "./display/file-description/FileDescription.vue";
-import { FileProperties } from "../shared/types/file-properties";
-import FileInputs from "././inputs/FileInputs.vue";
-import ContentElementFooter from "./footer/ContentElementFooter.vue";
-import { FileAlert } from "../shared/types/FileAlert.enum";
-import { useDebounceFn } from "@vueuse/core";
-import { injectStrict } from "@/utils/inject";
-import { BOARD_IS_LIST_LAYOUT } from "@util-board";
-import { useDisplay } from "vuetify";
+import { FileAlert } from "@/types/file/FileAlert.enum";
 import {
 	isAudioMimeType,
 	isPdfMimeType,
 	isVideoMimeType,
 } from "@/utils/fileHelper";
+import { injectStrict } from "@/utils/inject";
+import { BOARD_IS_LIST_LAYOUT } from "@util-board";
+import { useDebounceFn } from "@vueuse/core";
+import { computed, PropType, ref } from "vue";
+import { useDisplay } from "vuetify";
+import FileDisplay from "../content/display/FileDisplay.vue";
+import { FileProperties } from "../shared/types/file-properties";
+import FileInputs from "././inputs/FileInputs.vue";
+import FileAlerts from "./alert/FileAlerts.vue";
+import FileDescription from "./display/file-description/FileDescription.vue";
+import ContentElementFooter from "./footer/ContentElementFooter.vue";
 
 const props = defineProps({
 	fileProperties: {

src/modules/feature/board-file-element/content/alert/FileAlerts.unit.ts

@@ -1,10 +1,10 @@
+import { FileAlert } from "@/types/file/FileAlert.enum";
 import {
 	createTestingI18n,
 	createTestingVuetify,
 } from "@@/tests/test-utils/setup";
 import { ErrorAlert, InfoAlert, WarningAlert } from "@ui-alert";
 import { shallowMount } from "@vue/test-utils";
-import { FileAlert } from "../../shared/types/FileAlert.enum";
 import FileAlerts from "./FileAlerts.vue";
 
 describe("FileAlerts", () => {

src/modules/feature/board-file-element/content/alert/FileAlerts.vue

@@ -32,9 +32,9 @@
 </template>
 
 <script lang="ts">
+import { FileAlert } from "@/types/file/FileAlert.enum";
+import { ErrorAlert, InfoAlert, WarningAlert } from "@ui-alert";
 import { defineComponent, PropType } from "vue";
-import { FileAlert } from "../../shared/types/FileAlert.enum";
-import { InfoAlert, ErrorAlert, WarningAlert } from "@ui-alert";
 import { useI18n } from "vue-i18n";
 
 export default defineComponent({

src/modules/feature/board-file-element/content/alert/useFileAlerts.composable.ts

@@ -1,6 +1,6 @@
 import { FileRecordResponse, PreviewStatus } from "@/fileStorageApi/v3";
+import { FileAlert } from "@/types/file/FileAlert.enum";
 import { computed, Ref, ref } from "vue";
-import { FileAlert } from "../../shared/types/FileAlert.enum";
 
 export const useFileAlerts = (
 	fileRecord: Ref<FileRecordResponse | undefined>

src/modules/feature/board-file-element/content/alert/useFileAlerts.composable.unit.ts

@@ -1,7 +1,7 @@
 import { PreviewStatus } from "@/fileStorageApi/v3";
+import { FileAlert } from "@/types/file/FileAlert.enum";
 import { fileRecordFactory, mountComposable } from "@@/tests/test-utils";
 import { ref } from "vue";
-import { FileAlert } from "../../shared/types/FileAlert.enum";
 import { useFileAlerts } from "./useFileAlerts.composable";
 
 describe("useFileAlerts", () => {

src/modules/feature/board-file-element/content/display/FileDisplay.vue

@@ -41,18 +41,18 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType } from "vue";
-import { FileProperties } from "../../shared/types/file-properties";
-import { FileAlert } from "../../shared/types/FileAlert.enum";
-import AudioDisplay from "./audio-display/AudioDisplay.vue";
-import ImageDisplay from "./image-display/ImageDisplay.vue";
-import VideoDisplay from "./video-display/VideoDisplay.vue";
-import PdfDisplay from "./pdf-display/PdfDisplay.vue";
+import { FileAlert } from "@/types/file/FileAlert.enum";
 import {
 	isAudioMimeType,
 	isPdfMimeType,
 	isVideoMimeType,
 } from "@/utils/fileHelper";
+import { computed, PropType } from "vue";
+import { FileProperties } from "../../shared/types/file-properties";
+import AudioDisplay from "./audio-display/AudioDisplay.vue";
+import ImageDisplay from "./image-display/ImageDisplay.vue";
+import PdfDisplay from "./pdf-display/PdfDisplay.vue";
+import VideoDisplay from "./video-display/VideoDisplay.vue";
 
 const props = defineProps({
 	fileProperties: {