@sigmaott/base-next 1.0.6

package/src/components/Tool/FormRecord.vue

@@ -0,0 +1,162 @@
+<script lang="ts" setup>
+import type { UploadFile } from 'element-plus'
+import { main } from './record'
+
+const { modelValue } = defineModels<{
+  modelValue: UploadFile
+}>()
+
+const currentAudio = ref<string>()
+const { counter, reset: resetCount, pause: pauseCount, resume: resumeCount } = useInterval(1000, { controls: true })
+pauseCount()
+
+const {
+  audioInputs: microphones,
+  permissionGranted,
+  ensurePermissions,
+} = useDevicesList({
+  constraints: {
+    audio: true,
+    video: false,
+  },
+  onUpdated() {
+    if (!microphones.value.find(i => i.deviceId === currentAudio.value))
+      currentAudio.value = microphones.value[0]?.deviceId
+  },
+})
+
+const { stop, start, stream, enabled: enabledRecord } = useUserMedia({
+  constraints: {
+    audio: { deviceId: currentAudio.value },
+  },
+})
+
+const audio = ref<HTMLAudioElement>()
+let mediaRecorder
+const chucks = ref([])
+
+const { isFetching: isCheckingPermission, refetch: startStream } = useQuery(
+  ['MediaRecorder'],
+  async () => await start(),
+  {
+    enabled: false,
+    refetchOnWindowFocus: false,
+  },
+)
+
+const { state: permissionMic } = usePermission('microphone', { controls: true })
+
+const deniedMic = computed(() => permissionMic.value === 'denied')
+
+async function record() {
+  modelValue.value = undefined
+  resetCount()
+  await startStream()
+  await ensurePermissions()
+  mediaRecorder = new MediaRecorder(stream.value)
+  mediaRecorder.start()
+  const { startRecordMain, stopRecordMain } = await main(stream.value)
+  startRecordMain()
+  resumeCount()
+  mediaRecorder.onstop = () => {
+    chucks.value = []
+    const { url, file } = stopRecordMain()
+    modelValue.value = file
+    nextTick(() => {
+      audio.value.controls = true
+      audio.value.src = url
+      audio.value?.play()
+    })
+  }
+
+  mediaRecorder.ondataavailable = function (e) {
+    chucks.value.push(e.data)
+  }
+}
+function stopRecord() {
+  stop()
+  resetCount()
+  mediaRecorder.stop()
+}
+
+function convertToMMSS(seconds: number) {
+  const minutes = Math.floor(seconds / 60)
+  const remainingSeconds = Math.floor(seconds % 60)
+
+  return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`
+}
+
+watchEffect(() => {
+  console.log('🚀 ~ file: FormRecord.vue:23 ~ stream:', permissionGranted)
+})
+
+watch(counter, (val) => {
+  if (val === 20)
+    stopRecord()
+})
+
+onDeactivated(() => {
+  resetCount()
+  pauseCount()
+  stopRecord()
+})
+</script>
+
+<template>
+  <div class="">
+    <div class="mt-4 h-192px border border-[--el-border-color] rounded-md border-dashed px-5 py-8">
+      <template v-if="!modelValue">
+        <div v-if="!enabledRecord" class="h-full flex flex-col items-center justify-center gap-4">
+          <div
+            class="i-carbon:microphone cursor-pointer text-5xl text-red-500 duration-300 ease-in-out hover:scale-125"
+            :class="[{ 'i-carbon:microphone-off': isCheckingPermission || deniedMic }, { 'text-gray-500!': isCheckingPermission || deniedMic }]"
+            @click="record"
+          />
+          <template v-if="!deniedMic">
+            <el-text v-if="!isCheckingPermission" tag="b" size="large">
+              {{ $t('watermark.press_the_button_to_start_recording') }}
+            </el-text>
+            <el-text v-else tag="b" size="large">
+              {{ $t('watermark.please_allow_access_to_your_microphone_to_continue') }}
+            </el-text>
+          </template>
+          <template v-else>
+            <el-text tag="b" size="large">
+              {{ $t('watermark.please_grant_permission_to_use_the_microphone_for_the_tool') }}
+            </el-text>
+            <el-text tag="i" class="text-helper! break-normal!">
+              {{ $t('watermark.check_your_system_settings_to_make_sure_sigma_streaming_has_permission_to_access_your_microphone_and_try_again') }}
+            </el-text>
+          </template>
+        </div>
+        <div v-else class="h-full flex flex-col items-center justify-center gap-4">
+          <div class="flex items-center justify-center gap-2">
+            <span class="relative h-3 w-3 flex">
+              <span class="absolute h-full w-full inline-flex animate-ping rounded-full bg-red-400 opacity-75" />
+              <span class="relative h-3 w-3 inline-flex rounded-full bg-red-500" />
+            </span>
+            <el-text tag="b" class="text-3xl!">
+              {{ convertToMMSS(counter) }}
+            </el-text>
+            <el-text>/</el-text>
+            <el-text>{{ convertToMMSS(20) }}</el-text>
+          </div>
+          <el-button type="danger" size="large" @click="stopRecord">
+            <div class="i-carbon:pause-outline-filled mr-2 text-xl" />
+            {{ $t('watermark.stop') }}
+          </el-button>
+        </div>
+      </template>
+      <div v-else class="flex flex-col items-center justify-center gap-4 py-4">
+        <audio ref="audio" />
+        <el-button size="large" type="success" @click="record">
+          {{ $t('watermark.new_recording') }}
+        </el-button>
+      </div>
+    </div>
+
+    <div class="el-upload__tip">
+      {{ $t('watermark.the_system_automatically_stops_because_the_recording_duration_reaches_the_limit_of_20_seconds') }}
+    </div>
+  </div>
+</template>

package/src/components/Tool/FormUpload.vue

@@ -0,0 +1,118 @@
+<script lang="ts" setup>
+import type { UploadFile } from 'element-plus'
+import MediaInfo from 'mediainfo.js'
+
+const { modelValue } = defineModels<{
+  modelValue: UploadFile
+}>()
+
+const { t } = useI18n()
+const analyzing = ref(false)
+
+async function onChangeUpload(file: UploadFile) {
+  console.log('🚀 ~ file: FormRecord.vue:9 ~ onChangeUpload ~ _file:', file)
+  analyzing.value = true
+  const mediaInfo = await MediaInfo({
+    locateFile: () => {
+      // HARD Code media info wasm path
+      return 'https://resource-ott.gviet.vn/sdk/assets/MediaInfoModule.wasm'
+    },
+  })
+
+  const readChunk = file => (chunkSize, offset) =>
+    new Promise((resolve, reject) => {
+      const reader = new FileReader()
+      reader.onload = (event) => {
+        if (event.target.error)
+          reject(event.target.error)
+
+        resolve(new Uint8Array(event.target.result))
+      }
+      reader.readAsArrayBuffer(file.slice(offset, offset + chunkSize))
+    })
+
+  const result = await mediaInfo.analyzeData(() => file.raw?.size, readChunk(file.raw))
+  console.log('🚀 ~ file: FormUpload.vue:31 ~ onChangeUpload ~ result:', result)
+  analyzing.value = false
+
+  const type = result.media.track.find(track => track['@type'] !== 'General')
+
+  if (type?.['@type']?.toLowerCase() !== 'audio') {
+    ElMessage.error(t('watermark.file_type_is_not_supported'))
+    return false
+  }
+  const fileSize = file.size! / (1024 * 1024) // MB
+  if (fileSize > 50) {
+    ElMessage.error(t('watermark.audio_file_size_cannot_exceed_50mb'))
+    return false
+  }
+
+  modelValue.value = file.raw
+  console.log('🚀 ~ file: FormUpload.vue:50 ~ onChangeUpload ~ modelValue:', modelValue)
+}
+
+function handleDeleteFile(e) {
+  modelValue.value = undefined
+}
+
+const dropZoneRef = ref<HTMLElement>()
+function onDrop(files: File[] | null) {
+  console.log('🚀 ~ onDrop ~ files:', files)
+  const file = files?.[0]
+  const fileUpload: UploadFile = {
+    name: file?.name,
+    raw: file,
+    size: file?.size,
+  }
+  onChangeUpload(fileUpload)
+}
+const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
+</script>
+
+<template>
+  <div>
+    <el-upload
+      class="upload-watermark m-auto mt-4 p-0!"
+      drag
+      accept="audio/*"
+      :auto-upload="false"
+      :show-file-list="false"
+      :on-change="onChangeUpload"
+    >
+      <div ref="dropZoneRef" class="px-10px py-40px">
+        <div class="h-110px">
+          <div v-if="modelValue">
+            <el-icon class="el-icon--upload">
+              <div class="i-carbon:document-audio" />
+            </el-icon>
+            <div class="el-upload__text flex items-center justify-center gap-2">
+              <div> {{ modelValue.name }} </div>
+              <el-button text type="danger" size="small" circle @click.stop="handleDeleteFile">
+                <div class="i-carbon:close text-xl" />
+              </el-button>
+            </div>
+          </div>
+          <div v-else v-loading="analyzing">
+            <el-icon class="el-icon--upload">
+              <div class="i-ep:upload-filled" />
+            </el-icon>
+            <div class="el-upload__text font-bold text-16px!">
+              {{ $t('watermark.drop_file_here_or') }} <em>{{ $t('watermark.click_to_upload') }}</em>
+            </div>
+          </div>
+        </div>
+      </div>
+      <template #tip>
+        <div class="el-upload__tip">
+          {{ $t('watermark.valid_file') }}
+        </div>
+      </template>
+    </el-upload>
+  </div>
+</template>
+
+<style>
+.upload-watermark .el-upload-dragger {
+  padding: 0px !important;
+}
+</style>

package/src/components/Tool/ResultChecking.vue

@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import { isNil } from 'remeda'
+
+const { result } = defineProps<{
+  result: any
+}>()
+const emit = defineEmits(['recheck', 'close'])
+
+watchEffect(() => {
+  console.log('🚀 ~ file: ResultChecking.vue:3 ~ result:', result?.data?.value)
+})
+
+const watermarkId = computed(() => result?.data?.value?.watermarkId)
+const channels = computed(() => result?.data?.value?.data)
+
+function goToDetailChannel(id: string) {
+  emit('close', id)
+}
+</script>
+
+<template>
+  <div class="max-h-600px border border-[--el-border-color] rounded-md border-dashed p-4">
+    <!-- Loading -->
+    <div v-if="result.isLoading.value" class="h-200px flex flex-col items-center justify-center gap-4">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-60px w-60px" width="32" height="32" viewBox="0 0 24 24">
+        <g>
+          <circle cx="12" cy="3" r="1" fill="currentColor"><animate id="svgSpinners12DotsScaleRotate0" attributeName="r" begin="0;svgSpinners12DotsScaleRotate2.end-0.5s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1" /></circle>
+          <circle cx="16.5" cy="4.21" r="1" fill="currentColor"><animate id="svgSpinners12DotsScaleRotate1" attributeName="r" begin="svgSpinners12DotsScaleRotate0.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1" /></circle>
+          <circle cx="7.5" cy="4.21" r="1" fill="currentColor"><animate id="svgSpinners12DotsScaleRotate2" attributeName="r" begin="svgSpinners12DotsScaleRotate4.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1" /></circle>
+          <circle cx="19.79" cy="7.5" r="1" fill="currentColor"><animate id="svgSpinners12DotsScaleRotate3" attributeName="r" begin="svgSpinners12DotsScaleRotate1.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1" /></circle>
+          <circle cx="4.21" cy="7.5" r="1" fill="currentColor"><animate id="svgSpinners12DotsScaleRotate4" attributeName="r" begin="svgSpinners12DotsScaleRotate6.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1" /></circle>
+          <circle cx="21" cy="12" r="1" fill="currentColor"><animate id="svgSpinners12DotsScaleRotate5" attributeName="r" begin="svgSpinners12DotsScaleRotate3.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1" /></circle>
+          <circle cx="3" cy="12" r="1" fill="currentColor"><animate id="svgSpinners12DotsScaleRotate6" attributeName="r" begin="svgSpinners12DotsScaleRotate8.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1" /></circle>
+          <circle cx="19.79" cy="16.5" r="1" fill="currentColor"><animate id="svgSpinners12DotsScaleRotate7" attributeName="r" begin="svgSpinners12DotsScaleRotate5.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1" /></circle>
+          <circle cx="4.21" cy="16.5" r="1" fill="currentColor"><animate id="svgSpinners12DotsScaleRotate8" attributeName="r" begin="svgSpinners12DotsScaleRotatea.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1" /></circle>
+          <circle cx="16.5" cy="19.79" r="1" fill="currentColor"><animate id="svgSpinners12DotsScaleRotate9" attributeName="r" begin="svgSpinners12DotsScaleRotate7.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1" /></circle>
+          <circle cx="7.5" cy="19.79" r="1" fill="currentColor"><animate id="svgSpinners12DotsScaleRotatea" attributeName="r" begin="svgSpinners12DotsScaleRotateb.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1" /></circle>
+          <circle cx="12" cy="21" r="1" fill="currentColor"><animate id="svgSpinners12DotsScaleRotateb" attributeName="r" begin="svgSpinners12DotsScaleRotate9.begin+0.1s" calcMode="spline" dur="0.6s" keySplines=".27,.42,.37,.99;.53,0,.61,.73" values="1;2;1" /></circle>
+          <animateTransform attributeName="transform" dur="6s" repeatCount="indefinite" type="rotate" values="360 12 12;0 12 12" />
+        </g>
+      </svg>
+      <el-text tag="b">
+        {{ $t('watermark.checking_please_wait') }}
+      </el-text>
+    </div>
+
+    <!-- Error -->
+    <div v-else-if="result.isError.value" class="h-200px flex flex-col items-center justify-center gap-4">
+      <div class="i-carbon:warning text-5xl text-red-500" />
+      <el-text tag="b">
+        {{ $t('watermark.an_error_occurred_during_the_process_please_try_again') }}
+      </el-text>
+    </div>
+
+    <!-- Not found watermark -->
+    <div v-else-if="isNil(watermarkId)" class="h-200px flex flex-col items-center justify-center gap-4">
+      <div class="i-carbon:warning text-5xl text-red-500" />
+      <el-text tag="b">
+        {{ $t('watermark.no_watermark_found') }}
+      </el-text>
+      <el-text tag="b">
+        {{ $t('watermark.result_watermark_not_found_in_your_record_please_try_another_record') }}
+      </el-text>
+    </div>
+
+    <div v-else class="h-full flex flex-col gap-4 px-4">
+      <el-text tag="b" size="large">
+        {{ channels.length ? $t('watermark.found_count_channels_with_watermarking', { count: channels.length, channel: channels.length === 1 ? $t('watermark.channel') : $t('watermark.channels') }) : $t('watermark.no_channels_found_with_watermarking') }}
+      </el-text>
+      <el-table :data="channels" max-height="400">
+        <el-table-column prop="id" label="ID" min-width="150" align="center" fixed="left">
+          <template #default="{ row }">
+            <div class="flex items-center justify-center gap-2 text-center">
+              <div class="truncate">
+                {{ row.id }}
+              </div>
+              <SSIconCopyButton :value="row.id" :content-hover="row.id" />
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" :label="$t('channel.name')" align="center" min-width="150" :show-overflow-tooltip="{ effect: 'dark', placement: 'top', offset: 0 }">
+          <template #default="{ row }">
+            <span class="cursor-pointer text-primary underline" @click="goToDetailChannel(row.id)">{{ row.name }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="flex gap-2">
+        <el-text tag="b">
+          Watermark ID:
+        </el-text>
+        <el-text>
+          {{ watermarkId }}
+        </el-text>
+        <SSIconCopyButton :value="`${watermarkId}`" />
+      </div>
+    </div>
+  </div>
+  <div class="mt-4 flex justify-end">
+    <el-button type="primary" @click="emit('recheck')">
+      {{ $t('watermark.check_other_watermarking') }}
+    </el-button>
+  </div>
+</template>

package/src/components/Tool/Watermarking.vue

@@ -0,0 +1,159 @@
+<script lang="ts" setup>
+import type { UploadFile } from 'element-plus'
+import { isNil } from 'remeda'
+import FormUpload from './FormUpload.vue'
+import FormRecord from './FormRecord.vue'
+import ResultChecking from './ResultChecking.vue'
+import axiosInstance from '@/api/axios'
+
+const emit = defineEmits<{
+  goToChannel: [id: string]
+}>()
+
+definePageMeta({
+  title: 'Watermarking',
+  requiresAuth: false,
+  keepAlive: true,
+  order: 1,
+  show: false,
+  notAsMenu: true,
+})
+
+// const { visible } = defineModels<{
+//   visible: boolean
+// }>()
+// const dialogVisible = ref(true)
+function handleGoToChannel(id: string) {
+  emit('goToChannel', id)
+}
+const tabs = ['Upload', 'Record', 'Watermark Id']
+const activeTab = ref('Upload')
+const isCheck = ref(false)
+
+const isUploadFile = computed(() => activeTab.value === 'Upload')
+
+const API_URL = ensureSuffix('/', useRuntimeConfig().public.apiBase)
+
+const form = ref<{
+  file?: UploadFile
+  watermarkId?: number
+}>({
+  file: undefined,
+  watermarkId: undefined,
+})
+const checkMutation = useMutation(
+  async () => {
+    let watermarkId = form.value.watermarkId
+    if (form.value.file) {
+      const formData = new FormData()
+      formData.append('file', form.value.file)
+
+      const { data } = await axiosInstance.post(`${API_URL}api/transcode/watermarks/check`, formData, {
+        headers: {
+          noLoading: true,
+          noNotify: true,
+        },
+        timeout: 20000,
+      })
+      // const watermarkId = '61ff6dbc-8426-4194-b27a-ea4a165eb787'
+      watermarkId = data.watermarkId
+      if (!watermarkId)
+        return data
+    }
+    return await $transcodeApi('api/transcode/channels', {
+      method: 'get',
+      query: {
+        page: 1,
+        perPage: 200,
+        q: {
+          'channelConfig.audioWatermark.value': watermarkId,
+        },
+      },
+    }).then(res => ({ ...res, watermarkId }))
+  },
+  {
+    cacheTime: 0,
+  },
+)
+async function checkWatermarks() {
+  isCheck.value = true
+  await checkMutation.mutateAsync()
+}
+
+function recheck(tab: string) {
+  isCheck.value = false
+  form.value = {
+    file: undefined,
+    watermarkId: undefined,
+  }
+  activeTab.value = tab
+}
+
+// function closeResult(id: string) {
+//   emit('')
+// }
+</script>
+
+<template>
+  <div v-if="!isCheck" class="h-full">
+    <el-text class="text-helper break-normal!">
+      {{ $t('watermark.description_watermark_detect') }}
+    </el-text>
+    <div class="relative m-auto my-5 w-420px flex items-center justify-center gap-2 rounded-full bg-gray-200 p-1 px-2 dark:bg-gray-600">
+      <div
+        v-for="tab in tabs"
+        :key="tab"
+        class="z-10 w-1/3 flex-auto cursor-pointer rounded-full px-1 text-center transition-all ease-in-out"
+        @click="recheck(tab)"
+      >
+        {{ tab }}
+      </div>
+      <div
+        class="absolute h-85% w-138px flex-auto rounded-full bg-white transition-all duration-300 ease-in-out dark:bg-[--el-dialog-bg-color]"
+        :class="[
+          { '-translate-x-3/3': activeTab === 'Upload' },
+          { 'translate-x-3/3': activeTab === 'Watermark Id' },
+        ]"
+      />
+    </div>
+    <transition name="slide-fade" mode="out-in">
+      <FormUpload v-if="isUploadFile" :key="isUploadFile" v-model="form.file" />
+      <FormRecord v-else-if="activeTab === 'Record'" :key="!isUploadFile" v-model="form.file" />
+      <div v-else class="mt-4 h-full flex flex-col items-start justify-start gap-2 border border-[--el-border-color] rounded-md border-dashed px-4 px-5 py-8">
+        <el-input-number
+          v-model="form.watermarkId"
+          class="w-full"
+          :placeholder="`${$t('EventChannel.placeholder.enter')} Watermark ID`"
+          :controls="false"
+          size="large"
+        />
+      </div>
+    </transition>
+
+    <div class="my-4 flex justify-end">
+      <el-button type="primary" :disabled="!form.file && isNil(form.watermarkId)" size="large" @click="checkWatermarks">
+        {{ $t('watermark.check') }}
+      </el-button>
+    </div>
+  </div>
+  <div v-else>
+    <transition name="slide-fade">
+      <ResultChecking :result="checkMutation" @recheck="recheck('Upload')" @close="handleGoToChannel" />
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+.slide-fade-enter-active {
+  transition: all 0.3s ease;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.0s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-fade-enter-from {
+  transform: translateX(20px);
+  opacity: 0;
+}
+</style>

package/src/components/Tool/record.js

@@ -0,0 +1,92 @@
+function encodeAudio(buffers, settings) {
+  const sampleCount = buffers.reduce((memo, buffer) => {
+    return memo + buffer.length
+  }, 0)
+
+  const bytesPerSample = settings.sampleSize / 8
+  const bitsPerByte = 8
+  const dataLength = sampleCount * bytesPerSample
+  const sampleRate = settings.sampleRate
+
+  const arrayBuffer = new ArrayBuffer(44 + dataLength)
+  const dataView = new DataView(arrayBuffer)
+
+  dataView.setUint8(0, 'R'.charCodeAt(0)) // <10>
+  dataView.setUint8(1, 'I'.charCodeAt(0))
+  dataView.setUint8(2, 'F'.charCodeAt(0))
+  dataView.setUint8(3, 'F'.charCodeAt(0))
+  dataView.setUint32(4, 36 + dataLength, true)
+  dataView.setUint8(8, 'W'.charCodeAt(0))
+  dataView.setUint8(9, 'A'.charCodeAt(0))
+  dataView.setUint8(10, 'V'.charCodeAt(0))
+  dataView.setUint8(11, 'E'.charCodeAt(0))
+  dataView.setUint8(12, 'f'.charCodeAt(0))
+  dataView.setUint8(13, 'm'.charCodeAt(0))
+  dataView.setUint8(14, 't'.charCodeAt(0))
+  dataView.setUint8(15, ' '.charCodeAt(0))
+  dataView.setUint32(16, 16, true)
+  dataView.setUint16(20, 1, true)
+  dataView.setUint16(22, 1, true)
+  dataView.setUint32(24, sampleRate, true)
+  dataView.setUint32(28, sampleRate * 2, true)
+  dataView.setUint16(32, bytesPerSample, true)
+  dataView.setUint16(34, bitsPerByte * bytesPerSample, true)
+  dataView.setUint8(36, 'd'.charCodeAt(0))
+  dataView.setUint8(37, 'a'.charCodeAt(0))
+  dataView.setUint8(38, 't'.charCodeAt(0))
+  dataView.setUint8(39, 'a'.charCodeAt(0))
+  dataView.setUint32(40, dataLength, true)
+
+  let index = 44
+
+  for (const buffer of buffers) {
+    for (const value of buffer) {
+      dataView.setInt16(index, value * 0x7FFF, true)
+      index += 2
+    }
+  }
+
+  return new Blob([dataView], { type: 'audio/ogg' })
+}
+
+export async function main(stream) {
+  const [track] = stream.getAudioTracks()
+  const settings = track.getSettings() // <2>
+
+  const audioContext = new AudioContext()
+  await audioContext.audioWorklet.addModule(joinURL(useRuntimeConfig().app.baseURL, '/audio-recorder.js')) // <3>
+
+  const mediaStreamSource = audioContext.createMediaStreamSource(stream) // <4>
+  const audioRecorder = new AudioWorkletNode(audioContext, 'audio-recorder') // <5>
+  const buffers = []
+
+  audioRecorder.port.addEventListener('message', (event) => { // <6>
+    buffers.push(event.data.buffer)
+  })
+  audioRecorder.port.start() // <7>
+
+  mediaStreamSource.connect(audioRecorder) // <8>
+  audioRecorder.connect(audioContext.destination)
+
+  function startRecordMain() {
+    const parameter = audioRecorder.parameters.get('isRecording')
+    parameter.setValueAtTime(1, audioContext.currentTime) // <9>
+
+    buffers.splice(0, buffers.length)
+  }
+
+  function stopRecordMain() {
+    const parameter = audioRecorder.parameters.get('isRecording')
+    parameter.setValueAtTime(0, audioContext.currentTime) // <10>
+
+    const blob = encodeAudio(buffers, settings) // <11>
+    const file = new File([blob], 'audio.ogg', { type: 'audio/ogg' })
+    const url = URL.createObjectURL(blob)
+    return { file, url }
+  }
+
+  return {
+    startRecordMain,
+    stopRecordMain,
+  }
+}

package/src/components/Tooltip/Ellipsis.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  content: string
+  type?: 'text' | 'tags'
+  placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'
+  | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
+  maxWidth?: number
+  lineClamp?: number
+}>(), {
+  type: 'text',
+  maxWidth: 150,
+  lineClamp: 1,
+  placement: 'top-start',
+})
+
+const disabledTooltip = ref(true)
+
+const lineClampContent = ref(`line-clamp-${props.lineClamp}`)
+function mouseEnter(event) {
+  if (event.target.offsetWidth < event.target.scrollWidth)
+    disabledTooltip.value = false
+
+  else if (event.target.offsetHeight < event.target.scrollHeight)
+    disabledTooltip.value = false
+  else disabledTooltip.value = true
+}
+</script>
+
+<template>
+  <el-tooltip
+    :disabled="disabledTooltip"
+    :placement="placement"
+  >
+    <el-tag
+      v-if="type === 'tags'"
+      style="margin: 0 3px 5px 3px"
+      v-bind="$attrs"
+    >
+      <div class="max-w-120px truncate" @mouseenter="mouseEnter">
+        {{ content }}
+      </div>
+    </el-tag>
+    <div v-else v-bind="$attrs" :class="lineClampContent" @mouseenter="mouseEnter">
+      {{ content }}
+    </div>
+    <template #content>
+      <div class="scroll-custom-app max-h-200px max-w-240px overflow-auto">
+        {{ content }}
+      </div>
+    </template>
+  </el-tooltip>
+</template>