@zap-wunschlachen/wl-shared-components 1.0.34 → 1.0.37

package/src/components/Audio/Audio.vue

@@ -1,188 +1,188 @@
-<template>
-    <div class="audio-container" data-testid="root">
-        <div class="audio-controls">
-            <template v-if="useWaveformComponent">
-                <div class="playback-button">
-                    <IconPauseAudio v-if="isPlaying" @click="togglePlay" />
-                    <IconPlayAudio v-else @click="togglePlay" />
-                </div>
-
-                <div class="time">{{ currentTimeText }}</div>
-
-                <div v-if="useWaveformComponent" class="waveform-container">
-                    <WLWaveform ref="audioFile" :src="props.src" :blob="props.blob" @timeupdate="updateTime" @finish="onFinish"
-                        @ready="onLoaded" />
-                </div>
-            </template>
-            <audio v-else controls ref="audioFile" :src="props.src" @timeupdate="updateTime"
-                @loadedmetadata="onLoaded"></audio>
-
-            <template v-if="props.showCloudStatus">
-                <div class="cloud-status">
-                    <IconCloudSaved v-if=" props.cloudStatus" />
-                    <IconCloudFailed v-else />
-                </div>
-            </template>
-        </div>
-        <template v-if="props.showDeleteButton">
-            <div class="delete-button">
-                    <IconDeleteAudio @click="deleteAudio" />
-            </div>
-        </template>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import type { PropType } from 'vue'
-import IconPlayAudio from '../Icons/Audio/Play.vue'
-import IconCloudSaved from '../Icons/Audio/CloudSaved.vue'
-import IconCloudFailed from '../Icons/Audio/CloudFailed.vue'
-import IconPauseAudio from '../Icons/Audio/Pause.vue'
-import IconDeleteAudio from '../Icons/Audio/Delete.vue'
-import WLWaveform from '../Audio/Waveform.vue'
-
-enum ViewType {
-    OVERVIEW = "OVERVIEW",
-    RECORDER = "RECORDER"
-}
-
-const props = defineProps({
-    id: {
-        type: Number,
-        required: true
-    },
-    src: {
-        type: String,
-    },
-    blob: {
-        type: Blob,
-    },
-    cloudStatus: {
-        type: Boolean,
-        default: false
-    },
-    viewType: {
-        type: String as PropType<ViewType>,
-        default: ViewType.OVERVIEW
-    },
-    showDeleteButton: {
-        type: Boolean,
-        default: true
-    },
-    showCloudStatus: {
-        type: Boolean,
-        default: true
-    },
-});
-const emit = defineEmits<{ (e: 'remove', id: number): void }>();
-
-const currentTimeText = ref('00:00');
-const totalDuration = ref('00:00');
-const isPlaying = ref<boolean>(false);
-const audioFile = ref(null);
-const useWaveformComponent = ref(true);
-
-const formatTime = (seconds: number): string =>
-    [seconds / 60, seconds % 60]
-        .map((v) => `0${Math.floor(v)}`.slice(-2))
-        .join(':');
-
-function togglePlay() {
-    if (audioFile.value) {
-        isPlaying.value ? audioFile.value.pause() : audioFile.value.play();
-        isPlaying.value = !isPlaying.value;
-    }
-}
-
-function deleteAudio() {
-    ;
-    emit('remove', props.id);
-}
-
-function updateTime(currentTime: number) {
-    currentTimeText.value = formatTime(currentTime);
-}
-
-function onLoaded(duration: number) {
-    totalDuration.value = formatTime(duration);
-    currentTimeText.value = totalDuration.value;
-}
-
-function onFinish() {
-    isPlaying.value = false;
-}
-
-onMounted(() => {
-});
-</script>
-
-<style scoped>
-.audio-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    min-width: 0;
-    flex: 1 1 0%;
-    gap: 10px;
-}
-
-.audio-controls {
-    display: flex;
-    align-items: center;
-    border: 1px solid var(--Dental-Light-Blue-2);
-    border-radius: 8px;
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-top: 8px;
-    padding-bottom: 8px;
-    gap: 10px;
-    background: var(--Dental-Light-Blue--3);
-    width: 100%;
-}
-
-.cloud-status {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-}
-
-.delete-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    cursor: pointer;
-}
-
-.playback-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    cursor: pointer;
-}
-
-.time {
-    color: var(--Dental-Light-Blue-2);
-    font-family: outfit;
-    font-weight: 300;
-    font-size: 13px;
-    text-align: left;
-    min-width: 5ch;
-}
-
-.waveform-container {
-    display: flex;
-    flex: 1;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-}
+<template>
+    <div class="audio-container" data-testid="root">
+        <div class="audio-controls">
+            <template v-if="useWaveformComponent">
+                <div class="playback-button">
+                    <IconPauseAudio v-if="isPlaying" @click="togglePlay" />
+                    <IconPlayAudio v-else @click="togglePlay" />
+                </div>
+
+                <div class="time">{{ currentTimeText }}</div>
+
+                <div v-if="useWaveformComponent" class="waveform-container">
+                    <WLWaveform ref="audioFile" :src="props.src" :blob="props.blob" @timeupdate="updateTime" @finish="onFinish"
+                        @ready="onLoaded" />
+                </div>
+            </template>
+            <audio v-else controls ref="audioFile" :src="props.src" @timeupdate="updateTime"
+                @loadedmetadata="onLoaded"></audio>
+
+            <template v-if="props.showCloudStatus">
+                <div class="cloud-status">
+                    <IconCloudSaved v-if=" props.cloudStatus" />
+                    <IconCloudFailed v-else />
+                </div>
+            </template>
+        </div>
+        <template v-if="props.showDeleteButton">
+            <div class="delete-button">
+                    <IconDeleteAudio @click="deleteAudio" />
+            </div>
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import type { PropType } from 'vue'
+import IconPlayAudio from '../Icons/Audio/Play.vue'
+import IconCloudSaved from '../Icons/Audio/CloudSaved.vue'
+import IconCloudFailed from '../Icons/Audio/CloudFailed.vue'
+import IconPauseAudio from '../Icons/Audio/Pause.vue'
+import IconDeleteAudio from '../Icons/Audio/Delete.vue'
+import WLWaveform from '../Audio/Waveform.vue'
+
+enum ViewType {
+    OVERVIEW = "OVERVIEW",
+    RECORDER = "RECORDER"
+}
+
+const props = defineProps({
+    id: {
+        type: Number,
+        required: true
+    },
+    src: {
+        type: String,
+    },
+    blob: {
+        type: Blob,
+    },
+    cloudStatus: {
+        type: Boolean,
+        default: false
+    },
+    viewType: {
+        type: String as PropType<ViewType>,
+        default: ViewType.OVERVIEW
+    },
+    showDeleteButton: {
+        type: Boolean,
+        default: true
+    },
+    showCloudStatus: {
+        type: Boolean,
+        default: true
+    },
+});
+const emit = defineEmits<{ (e: 'remove', id: number): void }>();
+
+const currentTimeText = ref('00:00');
+const totalDuration = ref('00:00');
+const isPlaying = ref<boolean>(false);
+const audioFile = ref(null);
+const useWaveformComponent = ref(true);
+
+const formatTime = (seconds: number): string =>
+    [seconds / 60, seconds % 60]
+        .map((v) => `0${Math.floor(v)}`.slice(-2))
+        .join(':');
+
+function togglePlay() {
+    if (audioFile.value) {
+        isPlaying.value ? audioFile.value.pause() : audioFile.value.play();
+        isPlaying.value = !isPlaying.value;
+    }
+}
+
+function deleteAudio() {
+    ;
+    emit('remove', props.id);
+}
+
+function updateTime(currentTime: number) {
+    currentTimeText.value = formatTime(currentTime);
+}
+
+function onLoaded(duration: number) {
+    totalDuration.value = formatTime(duration);
+    currentTimeText.value = totalDuration.value;
+}
+
+function onFinish() {
+    isPlaying.value = false;
+}
+
+onMounted(() => {
+});
+</script>
+
+<style scoped>
+.audio-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+    flex: 1 1 0%;
+    gap: 10px;
+}
+
+.audio-controls {
+    display: flex;
+    align-items: center;
+    border: 1px solid var(--Dental-Light-Blue-2);
+    border-radius: 8px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    gap: 10px;
+    background: var(--Dental-Light-Blue--3);
+    width: 100%;
+}
+
+.cloud-status {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+}
+
+.delete-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+}
+
+.playback-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+}
+
+.time {
+    color: var(--Dental-Light-Blue-2);
+    font-family: outfit;
+    font-weight: 300;
+    font-size: 13px;
+    text-align: left;
+    min-width: 5ch;
+}
+
+.waveform-container {
+    display: flex;
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+}
 </style>

package/src/components/Audio/Waveform.vue

@@ -1,118 +1,119 @@
-<template>
-  <div ref="waveform" class="waveform"></div>
-</template>
-
-<script setup>
-import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
-import WaveSurfer from 'wavesurfer.js'
-
-const props = defineProps({
-  src: { type: String },
-  blob: { type: Blob }
-})
-
-const emit = defineEmits(['timeupdate', 'finish', 'ready'])
-
-const waveform = ref(null)
-let waveColor = '#93B1CF'
-let progressColor = '#172774'
-let ws = null
-
-onMounted(() => {
-  const styles = getComputedStyle(document.documentElement)
-  waveColor   = styles.getPropertyValue('--Dental-Light-Blue-2').trim()
-  progressColor   = styles.getPropertyValue('--Dental-Blue-0').trim()
-
-  nextTick(() => {
-    try {
-      createWaveform()
-    } catch (error) {
-      console.error('Error initializing WaveSurfer:', error);
-    }
-  })
-})
-
-function createWaveform() {
-  try {
-    // Check if the waveform element is available
-    if (!waveform.value) {
-      throw new Error('Waveform container element not found');
-    }
-
-    const containerWidth = waveform.value.clientWidth;
-    const containerHeight = waveform.value.clientHeight;
-
-    ws = WaveSurfer.create({
-      container: waveform.value,
-      waveColor: waveColor,
-      progressColor: progressColor,
-      barWidth: 2,
-      barGap: 2,
-      barRadius: 4,
-      cursorWidth: 0,
-      height: containerHeight,
-      width: containerWidth,
-    })
-
-    ws.on('audioprocess', (currentTime) => {
-      emit('timeupdate', currentTime);
-    })
-    ws.on('finish', () => {
-      emit('finish');
-    })
-    ws.on('ready', (totalDuration) => {
-      emit('ready', totalDuration);
-    })
-
-    ws.on('error', e => console.error(e))
-
-    if (props.blob) {
-      ws.loadBlob(props.blob)
-    } else if (props.src) {
-      ws.load(props.src)
-    } else {
-      throw new Error('No audio source provided')
-    }
-  } catch (error) {
-    console.error('Error initializing WaveSurfer:', error);
-  }
-}
-
-function play() {
-  if (ws) {
-    ws.play()
-  } else {
-    console.warn('WaveSurfer instance not ready')
-  }
-}
-
-function pause() {
-  if (ws) {
-    ws.pause()
-  } else {
-    console.warn('WaveSurfer instance not ready')
-  }
-}
-
-function getCurrentTime() {
-  return ws ? ws.getCurrentTime() : 0
-}
-
-defineExpose({ play, pause, getCurrentTime })
-
-onBeforeUnmount(() => {
-  if (ws) ws.destroy()
-})
-</script>
-
-<style scoped>
-.waveform {
-  display: flex;
-  flex-grow: 1;
-  flex-shrink: 1;
-  width: 100%;
-  height: 100%;
-  min-height: 16px;
-  min-width: 0px;
-}
+<template>
+  <div ref="waveform" class="waveform"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import WaveSurfer from 'wavesurfer.js'
+
+const props = defineProps({
+  src: { type: String },
+  blob: { type: Blob }
+})
+
+const emit = defineEmits(['timeupdate', 'finish', 'ready'])
+
+const waveform = ref(null)
+let waveColor = '#93B1CF'
+let progressColor = '#172774'
+let ws = null
+
+onMounted(() => {
+  const styles = getComputedStyle(document.documentElement)
+  waveColor   = styles.getPropertyValue('--Dental-Light-Blue-2').trim()
+  progressColor   = styles.getPropertyValue('--Dental-Blue-0').trim()
+
+  nextTick(() => {
+    try {
+      createWaveform()
+    } catch (error) {
+      console.error('Error initializing WaveSurfer:', error);
+    }
+  })
+})
+
+function createWaveform() {
+  try {
+    // Check if the waveform element is available
+    if (!waveform.value) {
+      throw new Error('Waveform container element not found');
+    }
+
+    const containerWidth = waveform.value.clientWidth;
+    const containerHeight = waveform.value.clientHeight;
+
+    ws = WaveSurfer.create({
+      container: waveform.value,
+      waveColor: waveColor,
+      progressColor: progressColor,
+      barWidth: 2,
+      barGap: 2,
+      barRadius: 4,
+      cursorWidth: 0,
+      height: containerHeight,
+      width: containerWidth,
+      backend: 'WebAudio',
+    })
+
+    ws.on('audioprocess', (currentTime) => {
+      emit('timeupdate', currentTime);
+    })
+    ws.on('finish', () => {
+      emit('finish');
+    })
+    ws.on('ready', (totalDuration) => {
+      emit('ready', totalDuration);
+    })
+
+    ws.on('error', e => console.error(e))
+
+    if (props.blob) {
+      ws.loadBlob(props.blob)
+    } else if (props.src) {
+      ws.load(props.src)
+    } else {
+      throw new Error('No audio source provided')
+    }
+  } catch (error) {
+    console.error('Error initializing WaveSurfer:', error);
+  }
+}
+
+function play() {
+  if (ws) {
+    ws.play()
+  } else {
+    console.warn('WaveSurfer instance not ready')
+  }
+}
+
+function pause() {
+  if (ws) {
+    ws.pause()
+  } else {
+    console.warn('WaveSurfer instance not ready')
+  }
+}
+
+function getCurrentTime() {
+  return ws ? ws.getCurrentTime() : 0
+}
+
+defineExpose({ play, pause, getCurrentTime })
+
+onBeforeUnmount(() => {
+  if (ws) ws.destroy()
+})
+</script>
+
+<style scoped>
+.waveform {
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 1;
+  width: 100%;
+  height: 100%;
+  min-height: 16px;
+  min-width: 0px;
+}
 </style>