@sigmaott/base-next 1.0.6

package/src/components/Asset/AssetList.vue

@@ -0,0 +1,869 @@
+<script lang="ts" setup>
+import AssetItem from './AssetItem.vue'
+import AssetTable from './AssetTable.vue'
+import { useSharedAssetFilters } from '~/components/Asset/asset-context'
+
+type Asset = any
+
+const props = withDefaults(
+  defineProps<{
+    assetIdSelected?: string
+    // Asset picker
+    selectable?: boolean
+    enabled?: boolean
+    type: 'card' | 'image'
+    limit?: string[]
+    isHiddenPlaylist?: boolean
+    isSetting?: boolean
+    navigate?: boolean
+    disableSyncRoutes?: boolean
+    isPicker?: boolean
+  }>(),
+  {
+    enabled: true,
+    type: 'card',
+    limit: () => ['image', 'video', 'audio', 'unknown'],
+    isSetting: true,
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'select', image: Asset): void
+  (e: 'delete', image: Asset): void
+  (e: 'uploadSuccess', assetId: string): void
+  (e: 'config'): void
+  (e: 'total', total: number): void
+}>()
+
+const { t } = useI18n()
+const _limit = useVModel(props, 'limit')
+const disableType = computed(() => _limit.value.length === 1)
+const optionAsset = computed(() => {
+  const ASSET_LABEL = {
+    image: t('assetType.Image'),
+    video: t('assetType.Video'),
+    audio: t('assetType.Audio'),
+    unknown: t('assetType.Unknown'),
+  }
+
+  const _optionAsset = _limit.value.map((item) => {
+    return {
+      label: ASSET_LABEL[item],
+      value: item,
+    }
+  })
+
+  // push back ALL option
+  // if (_optionAsset.length > 1)
+  //   _optionAsset.unshift({ label: t('base_library.all_media_type'), value: _limit.value.join(',') })
+  return _optionAsset
+})
+
+const optionStateAsset = [
+  { label: 'Uploading', value: 'uploading' },
+  { label: 'Analyzing', value: 'analyzing' },
+  { label: 'Completed', value: 'completed' },
+  { label: 'Progress', value: 'progress' },
+  { label: 'Failed', value: 'failed' },
+  { label: 'Invalid', value: 'invalid' },
+]
+
+const optionValidStatus = [
+  { label: 'Not Check', value: 'not_check' },
+  { label: 'Error', value: 'error' },
+  { label: 'Ready', value: 'ready' },
+  { label: 'Checking', value: 'checking' },
+]
+
+useProvideAssetStore({
+  selectable: props.selectable,
+})
+
+const { searchPlayListId } = useSharedAssetFilters()
+
+function initValueQuery() {
+  const _value = {
+    page: 1,
+    perPage: 10,
+    q: JSON.stringify({ $and: [{}, {}] }),
+  }
+  if (_limit.value.length > 0 && _limit.value.length < 4) {
+    _value.q = JSON.stringify({ $and: [{ $and: [{ type: { $in: _limit.value } }] }, {}] })
+  }
+  return _value
+}
+
+const { params, qAnd0, qAnd1, qAnd1Search, isChange: hasFilter, sortChange, clearQ0, clearQ1 } = useTableSearch(initValueQuery(), { sort: 'createdAt|desc' }, props.disableSyncRoutes)
+
+const { filterForm, resetFilter } = useQuickFilter(qAnd0, () => params.value.page = 1, [
+  { key: 'name', type: 'regex' },
+  { key: 'id', type: 'exact' },
+  { key: 'category', type: 'exact' },
+  { key: 'type', type: 'in', defaultValue: [] },
+  { key: 'state', type: 'exact' },
+])
+
+// onMounted(() => {
+//   if (_limit.value.length < 4) {
+//     filterForm.value = {
+//       ...filterForm.value,
+//       type: _limit.value,
+//     }
+//   }
+// })
+
+const searchText = ref<string>('')
+const searchId = ref<string>('')
+
+watch(_limit, (val) => {
+  // searchType.value = val.join(',') || 'image'
+}, { immediate: true })
+
+const showPlaylist = ref(false)
+
+const { data, isFetching, isError, dataUpdatedAt, refetch, isInitialLoading, errorUpdatedAt } = useQuery(
+  ['api/library/assets', params, searchPlayListId],
+  async () => {
+    const query = {
+      ...params.value,
+    }
+
+    if (searchPlayListId.value) {
+      const _queryPlaylist = { ...params.value }
+      delete _queryPlaylist.sort
+      const res = await $libraryApi('/api/library/playlist-items', {
+        method: 'GET',
+        query: {
+          ..._queryPlaylist,
+          playlistId: searchPlayListId.value || undefined,
+        },
+      })
+      return {
+        ...res,
+        data: res.data.map(item => item.asset).filter(Boolean),
+      }
+    }
+    return $libraryApi('api/library/assets', {
+      query,
+    })
+  },
+  {
+    enabled: computed(() => props.enabled),
+    keepPreviousData: true,
+    select: (res) => {
+      emit('total', res.total)
+      return {
+        ...res,
+        data: res.data.map(item => ({
+          ...item,
+          thumbUri: getAssetURI(item.thumbUri, ASSET_DEV_URL),
+          uri: getAssetURI(item.uri, ASSET_DEV_URL),
+        })) || [],
+      }
+    },
+  },
+)
+
+const queryClient = useQueryClient()
+const deleteMutation = useMutation(
+  (id: string) => $libraryApi('api/library/assets/{id}', { pathParams: { id }, method: 'DELETE' }),
+  {
+    onSuccess: () => {
+      queryClient.invalidateQueries(['api/library/assets'])
+      queryClient.invalidateQueries(['/api/library/playlists'])
+      refreshPlayList()
+    },
+  },
+)
+const recheckMutation = useMutation(
+  (id: string) => $libraryApi('/api/library/assets/{id}/deep-check', { pathParams: { id }, method: 'PATCH' }),
+  {
+    onSuccess: () => {
+      queryClient.invalidateQueries(['api/library/assets'])
+      queryClient.invalidateQueries(['/api/library/playlists'])
+      queryClient.invalidateQueries(['/api/library/settings/app/config-machine'])
+      refreshPlayList()
+    },
+  },
+)
+
+async function deleteAsset(asset: Asset) {
+  await deleteMutation.mutateAsync(asset.id!)
+  emit('delete', asset)
+  ElNotification.success(t('message.success'))
+}
+
+async function recheckFile(asset: Asset) {
+  await recheckMutation.mutateAsync(asset.id!)
+  // emit('delete', asset)
+  ElNotification.success(t('message.recheck_success'))
+}
+
+const listType = ref<'table' | 'card'>('table')
+const [showVideoPreview, toggleVideoPreview] = useToggle(false)
+const assetPreview = ref<Asset>()
+function handleChooseAssetPreview(asset: Asset) {
+  assetPreview.value = asset
+  toggleVideoPreview()
+}
+
+watch(showVideoPreview, (val) => {
+  if (!val)
+    assetPreview.value = undefined
+})
+const tableRef = ref(null)
+
+const visible = ref(false)
+
+const categories = computed(() => [
+  'Promo Video',
+  'Film',
+  'Video Short',
+  'Podcast',
+  'Series',
+  'Sport Clip',
+  'Song',
+  'Voice Over',
+  'Graphics File',
+  'Presentation',
+])
+
+const isFullPermission = inject('isFullPermission') as Ref<boolean> | undefined
+const disabled = computed(() => isFullPermission && !isFullPermission?.value)
+
+// playlist
+const isHiddenPlaylist = computed(() => props.isHiddenPlaylist || unref(inject('isHiddenPlaylist')))
+const playListRef = ref(null)
+
+async function removeAssetFromPlaylist(asset: Asset) {
+  await playListRef.value?.removeAsset({
+    assetId: asset.id,
+    playlistId: searchPlayListId.value,
+  })
+}
+
+async function refreshPlayList() {
+  await playListRef.value?.updatePlayListItems()
+}
+
+async function refreshPlaylistList() {
+  await queryClient.invalidateQueries({ queryKey: ['/api/library/playlists'] })
+  await queryClient.invalidateQueries({ queryKey: ['/api/library/playlists_infinite'] })
+}
+
+const key = ref(genUUID())
+function openPlayList() {
+  showPlaylist.value = true
+  nextTick(() => {
+    key.value = genUUID()
+  })
+}
+
+const isSetting = computed(() => {
+  return props.isSetting as boolean
+})
+// NEW upload files
+function uploadFiles() {
+  if (isSetting.value) {
+    visible.value = true
+  }
+  else {
+    emit('config')
+  }
+}
+
+const visibleImportLink = ref(false)
+function importLink() {
+  visibleImportLink.value = true
+}
+
+const fieldMap = computed<FieldConfigMap>(() => {
+  return {
+    'id': {
+      label: 'ID',
+      value: 'id',
+      input: 'text',
+      validation: { required: true },
+    },
+    'name': {
+      label: t('base_library.name'),
+      value: 'name',
+      input: 'text',
+      validation: { required: true },
+    },
+    'category': {
+      label: t('base_library.category'),
+      value: 'category',
+      input: 'select',
+      options: categories.value.map(item => ({ label: uppercaseFirst(item), value: item })),
+      validation: { required: true },
+    },
+    'state': {
+      label: t('general.state'),
+      value: 'state',
+      input: 'select',
+      options: optionStateAsset.filter(item => item.value).map(item => ({ label: item.label, value: item.value })),
+      validation: { required: true },
+    },
+
+    'validStatus': {
+      label: t('general.valid_file'),
+      value: 'validStatus',
+      input: 'select',
+      options: optionValidStatus.filter(item => item.value).map(item => ({ label: item.label, value: item.value })),
+      validation: { required: true },
+    },
+
+    'type': {
+      label: 'Media Type',
+      value: 'type',
+      input: 'select',
+      options: optionAsset.value.map(item => ({ label: item.label, value: item.value })),
+      validation: { required: true },
+    },
+
+    'tags': {
+      label: 'Tags',
+      value: 'tags',
+      input: 'multiselect',
+      options: [],
+      validation: { required: true },
+    },
+    'metadata.size': {
+      label: 'File Size',
+      value: 'metadata.size',
+      input: 'number',
+      options: [],
+      validation: { required: true, min: 0 },
+    },
+
+    'metadata.duration': {
+      label: 'Duration',
+      value: 'metadata.duration',
+      input: 'number',
+      options: [],
+      validation: { required: true, min: 0 },
+    },
+
+    'metadata.fps': {
+      label: 'FPS',
+      value: 'metadata.fps',
+      input: 'number',
+      options: [],
+      validation: { required: true, min: 0 },
+    },
+    'createdAt': {
+      label: t('base.created_at'),
+      value: 'createdAt',
+      input: 'datetime',
+      options: [],
+      validation: { required: true },
+    },
+  }
+})
+
+function fileSizeFilter(size: number) {
+  if (Number.isNaN(size))
+    size = 0
+
+  return `${(size / 1024).toFixed(2)} KB`
+}
+
+function handleChangeState(newValue: string) {
+  if (!newValue)
+    searchState.value = undefined
+}
+
+// SECTION: Add to playlist
+const multipleSelection = ref<any[]>([])
+
+function handleSelectCheckbox(newVal: any) {
+  if (multipleSelection.value.map(item => item.id).includes(newVal.id)) {
+    multipleSelection.value = multipleSelection.value.filter(item => item.id !== newVal.id)
+  }
+  else {
+    multipleSelection.value.push(newVal)
+  }
+}
+
+const visibleAddToPlaylist = ref(false)
+function handleAddToPlaylist() {
+  visibleAddToPlaylist.value = true
+}
+
+function handleAddToPlaylistSuccess() {
+  visibleAddToPlaylist.value = false
+  multipleSelection.value = []
+  refreshPlayList()
+  refreshPlaylistList()
+}
+
+// SECTION: Delete asset
+
+const deleteAssetMutation = useMutation({
+  mutationFn: (ids: string[]) => $libraryApi('api/library/assets', {
+    method: 'DELETE',
+    body: {
+      ids,
+    },
+  }),
+
+})
+
+function handleDeleteAsset(asset: Asset) {
+  const length = multipleSelection.value.length
+  ElMessageBox.confirm(t('library.are_you_sure_you_want_to_delete_0_assets', [length]), t('general.warning'), {
+    confirmButtonText: t('Actions.yes'),
+    cancelButtonText: t('Actions.no'),
+    type: 'error',
+  }).then(async () => {
+    await deleteAssetMutation.mutateAsync(multipleSelection.value.map(item => item.id))
+    ElNotification.success(t('message.success'))
+    multipleSelection.value = []
+    queryClient.invalidateQueries(['api/library/assets'])
+    refreshPlayList()
+    refreshPlaylistList()
+  })
+}
+
+function handleSelectAll(val: boolean) {
+  if (val) {
+    multipleSelection.value = data.value?.data || []
+  }
+  else {
+    multipleSelection.value = []
+  }
+}
+
+watch(() => data.value?.data, (val) => {
+  if (val) {
+    multipleSelection.value = []
+  }
+})
+</script>
+
+<template>
+  <div
+    class="absolute h-[calc(100%-20px-20px)] w-240px pr-3 pt-[calc(32px+16px+8px)]"
+    :class="[showPlaylist && 'z-10']"
+  >
+    <SSAssetPlaylist
+      v-if="showPlaylist"
+      ref="playListRef"
+      v-model:show="showPlaylist"
+      @preview="handleChooseAssetPreview"
+      @refetch="refetch"
+      @delete="deleteAsset"
+    />
+  </div>
+
+  <div class="w-full" :class="[showPlaylist && 'pl-240px']">
+    <div class="flex gap-2">
+      <div v-if="!isPicker" class="min-w-172px w-22%">
+        <el-button
+          v-if="!showPlaylist && !isHiddenPlaylist"
+          class="relative z-11 mr-2"
+          plain
+          @click="openPlayList"
+        >
+          <div class="i-ri:arrow-right-double-fill size-6" />
+          Playlist
+        </el-button>
+      </div>
+      <div class="w-full flex items-start justify-end [&_.el-input\_\_validateIcon]:hidden">
+        <SSFilterQuerySchemaForm
+          v-model="qAnd1"
+          :field-configs="fieldMap"
+          :has-filter
+          @clear-filter="clearQ0(), resetFilter()"
+        >
+          <el-input
+            v-model="filterForm.id"
+            placeholder="ID"
+            clearable
+          />
+          <el-input
+            v-model="filterForm.name"
+            :placeholder="$t('general.name')"
+            clearable
+          />
+          <el-select
+            v-model="filterForm.category"
+            placeholder="Category"
+            clearable
+          >
+            <el-option
+              v-for="item in categories"
+              :key="item"
+              :label="item"
+              :value="item"
+            />
+          </el-select>
+
+          <el-select
+            v-model="filterForm.state"
+            :placeholder="t('general.state')"
+            clearable
+            @change="handleChangeState"
+          >
+            <el-option
+              v-for="item in optionStateAsset"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+
+          <el-select
+            v-model="filterForm.type"
+            class="min-w-170px"
+            multiple
+            collapse-tags
+            collapse-tags-tooltip
+            :max-collapse-tags="1"
+            :clearable="!props.isPicker"
+            :placeholder="t('label.type')"
+            :disabled="disableType"
+          >
+            <el-option
+              v-for="item in optionAsset"
+              :key="item.value"
+              :disabled="props.isPicker && filterForm?.type?.length === 1 && filterForm?.type?.includes(item.value)"
+              :label="item.label"
+              :value="item.value!"
+            />
+          </el-select>
+        </SSFilterQuerySchemaForm>
+        <SSAssetFormUploadAsset
+          v-model="visible"
+          :limit="limit"
+          @upload-success="emit('uploadSuccess', $event); refreshPlayList(); refreshPlaylistList()"
+        />
+
+        <el-dropdown trigger="click" class="ml-2">
+          <el-button :disabled="disabled" type="primary">
+            <template #icon>
+              <div class="i-ri:upload-line" />
+            </template>
+            {{ $t('base.upload') }}
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="uploadFiles">
+                <div class="i-ri:file-2-line mr-2 size-4" />
+                <div>
+                  {{ $t('upload_files') }}
+                </div>
+              </el-dropdown-item>
+              <el-dropdown-item @click="importLink">
+                <div class="i-ri:links-fill mr-2 size-4" />
+                <div>
+                  {{ $t('import_from_links') }}
+                </div>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-[auto_1fr_auto] mb-2 items-center gap-4">
+      <el-button-group class="mt-1">
+        <el-button :type="listType === 'table' ? 'primary' : 'default'" @click="listType = 'table'">
+          <template #icon>
+            <div class="i-ep:calendar" />
+          </template>
+          {{ t('label.table') }}
+        </el-button>
+
+        <el-button :type="listType === 'card' ? 'primary' : 'default'" @click="listType = 'card'">
+          <template #icon>
+            <div class="i-ep:postcard" />
+          </template>
+          {{ t('label.card') }}
+        </el-button>
+      </el-button-group>
+
+      <template v-if="!isPicker ">
+        <div v-if="listType === 'table' && multipleSelection.length > 0" class="h-32px flex items-center text-sm text-text-regular font-medium">
+          {{ $t('library.selected_0_assets', [multipleSelection.length]) }}
+        </div>
+        <div v-else-if="listType === 'card'" class="flex items-center gap-4">
+          <el-checkbox
+            :model-value="multipleSelection.length === data.data.length"
+            :label="$t('library.select_all')"
+            @update:model-value="handleSelectAll"
+          />
+          <div v-if="multipleSelection.length > 0" class="flex-1 text-sm text-text-regular font-medium">
+            {{ $t('library.selected_0_assets', [multipleSelection.length]) }}
+          </div>
+        </div>
+      </template>
+
+      <div v-if="multipleSelection.length > 0" class="ml-2">
+        <el-button
+          :disabled="disabled"
+          type="primary"
+          plain
+          @click="handleAddToPlaylist"
+        >
+          <template #icon>
+            <div class="i-lucide:plus" />
+          </template>
+          {{ $t('library.add_to_playlist') }}
+        </el-button>
+        <el-button
+          :disabled="disabled"
+          type="danger"
+          plain
+          @click="handleDeleteAsset"
+        >
+          <template #icon>
+            <div class="i-ri:delete-bin-line" />
+          </template>
+          {{ $t('general.delete') }}
+        </el-button>
+      </div>
+    </div>
+  </div>
+
+  <div :class="[showPlaylist && 'pl-240px']" class="flex flex-1 flex-col of-hidden">
+    <el-scrollbar v-if="listType === 'card'">
+      <div id="tableRef" ref="tableRef" v-loading="isInitialLoading">
+        <div
+          v-if="data.data.length > 0"
+          class="grid gap-4 overflow-y-auto lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 xl:grid-cols-5"
+        >
+          <AssetItem
+            v-for="(image, index) in data.data"
+            :key="`${image.id}-${index}`"
+            :selectable="selectable"
+            :item="image"
+            :class="assetIdSelected === image.id ? 'border-3 border-primary' : ''"
+            :checked="multipleSelection.map(item => item.id).includes(image.id)"
+            :checkable="navigate"
+            @delete="deleteAsset"
+            @select="(item) => emit('select', item)"
+            @preview="handleChooseAssetPreview"
+            @remove="removeAssetFromPlaylist"
+            @update:checked="handleSelectCheckbox(image)"
+            @recheck-file="recheckFile"
+          />
+        </div>
+        <div v-else class="el-table__empty-block">
+          <div class="el-table__empty-text w-full flex flex-col items-center justify-center pt-4 text-14px">
+            <p>{{ $t('base.no_data') }}</p>
+
+            <p class="mb-4 text-pretty text-sm">
+              {{ $t('base.upload_multimedia_content_for_use_with_in-app_products') }}
+            </p>
+
+            <el-dropdown trigger="click" class="ml-2">
+              <el-button :disabled="disabled" type="primary">
+                <template #icon>
+                  <div class="i-ri:upload-line" />
+                </template>
+                {{ $t('base.upload') }}
+              </el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item @click="uploadFiles">
+                    <div class="i-ri:file-2-line mr-2 size-4" />
+                    <div>
+                      {{ $t('upload_files') }}
+                    </div>
+                  </el-dropdown-item>
+                  <el-dropdown-item @click="importLink">
+                    <div class="i-ri:links-fill mr-2 size-4" />
+                    <div>
+                      {{ $t('import_from_links') }}
+                    </div>
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
+        </div>
+      </div>
+    </el-scrollbar>
+
+    <AssetTable
+      v-if="listType === 'table'"
+      :key="key"
+      v-model:table-ref="tableRef"
+      v-model:multiple-selection="multipleSelection"
+      :selectable="selectable"
+      :is-fetching
+      class="flex-1"
+      :asset-id-selected="assetIdSelected"
+      :data="data?.data || []"
+      :navigate="navigate"
+      @delete="deleteAsset"
+      @select="(item) => emit('select', item)"
+      @preview="handleChooseAssetPreview"
+      @upload="uploadFiles"
+      @import-link="importLink"
+      @remove="removeAssetFromPlaylist"
+      @recheck-file="recheckFile"
+    >
+      <template #empty="{ disabled: disabledUpload }">
+        <SSTableEmpty
+          :is-fetching
+          :is-error
+          :has-filter
+          @refetch="refetch"
+          @clear-filter="clearQ0(), clearQ1(), resetFilter()"
+        >
+          <template #add>
+            <div class="w-full flex flex-col items-center justify-center pt-4">
+              <el-dropdown trigger="click">
+                <el-button :disabled="disabledUpload" type="primary">
+                  <template #icon>
+                    <div class="i-ri:upload-line" />
+                  </template>
+                  {{ $t('base.upload') }}
+                </el-button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item @click="uploadFiles">
+                      <div class="i-ri:file-2-line mr-2 size-4" />
+                      <div>
+                        {{ $t('upload_files') }}
+                      </div>
+                    </el-dropdown-item>
+                    <el-dropdown-item @click="importLink">
+                      <div class="i-ri:links-fill mr-2 size-4" />
+                      <div>
+                        {{ $t('import_from_links') }}
+                      </div>
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </div>
+          </template>
+        </SSTableEmpty>
+      </template>
+
+      <template #action>
+        <div v-if="multipleSelection.length > 0" class="ml-2">
+          <el-button
+            :disabled="disabled"
+            type="primary"
+            plain
+            @click="handleAddToPlaylist"
+          >
+            <template #icon>
+              <div class="i-lucide:plus" />
+            </template>
+            {{ $t('library.add_to_playlist') }}
+          </el-button>
+          <el-button
+            :disabled="disabled"
+            type="danger"
+            plain
+            @click="handleDeleteAsset"
+          >
+            <template #icon>
+              <div class="i-ri:delete-bin-line" />
+            </template>
+            {{ $t('general.delete') }}
+          </el-button>
+        </div>
+      </template>
+    </AssetTable>
+    <SSPagination v-model:params="params" class="mt-2" :total="data?.total || 0">
+      <SSAutoRefresh
+        :updated-at="dataUpdatedAt || errorUpdatedAt"
+        :is-loading="isFetching"
+        :is-error
+        :duration="10"
+        enabled
+        @on-refresh="refetch"
+      />
+    </SSPagination>
+  </div>
+
+  <SSAssetVideoPreview v-if="assetPreview" v-model="showVideoPreview" :src="assetPreview.uri!">
+    <template #header>
+      <div class="mx-auto max-w-80% flex justify-end">
+        <SSAssetShareModal :asset="assetPreview" />
+      </div>
+    </template>
+    <template #footer>
+      <div class="mx-auto max-w-80%">
+        <p class="mb-2 text-base font-600">
+          File information
+        </p>
+        <div class="grid grid-cols-2 ml-4">
+          <SSField label="Name" :value="assetPreview.name" />
+          <SSField label="File size" :value="formatFileSize(assetPreview.metadata.size || 0)" />
+          <SSField label="Tag" :value="assetPreview.tags" type="tags" />
+          <SSField label="Duration" :value="formatSecondsToHm(assetPreview.metadata.duration)" />
+          <SSField label="Resolution" :value="`${assetPreview.metadata?.width}x${assetPreview.metadata?.height}`" />
+          <SSField label="Category" :value="assetPreview.category" />
+          <SSField label="Bitrate" :value="`${fileSizeFilter(assetPreview.metadata?.bitrate)}/s`" />
+          <SSField label="Link origin" :value="assetPreview.uri" copy />
+        </div>
+      </div>
+    </template>
+  </SSAssetVideoPreview>
+  <SSAssetImportLinks v-if="visibleImportLink" v-model:visible="visibleImportLink" />
+  <SSAssetAddPlaylist
+    v-if="visibleAddToPlaylist"
+    v-model:visible="visibleAddToPlaylist"
+    :data="multipleSelection"
+    @success="handleAddToPlaylistSuccess"
+  />
+</template>
+
+<i18n lang="yaml">
+en:
+  label:
+    upload: Choose file
+    id: ID
+    search: Search
+    type: Type
+    card: Card
+    table: Table
+    state: State
+  placeholder:
+    id: Enter asset ID
+    search: Enter the asset name
+    type: Select type asset
+    state: Select State
+    noAssetFound: No asset found
+    uploadDataFail: Upload data fail
+  assetType:
+    Unknown: Unknown
+    Image: Image
+    Video: Video
+    Audio: Audio
+    All: All
+  message:
+    success: Delete asset success!
+vi:
+  label:
+    upload: Tải lên
+    id: ID
+    search: Tìm kiếm
+    type: Loại
+    card: Thẻ
+    table: Bảng
+    state: Trạng thái
+  placeholder:
+    id: Nhập ID
+    search: Nhập tên nội dung
+    type: Chọn loại ảnh
+    state: Chọn trạng thái
+    noAssetFound: Không tìm thấy ảnh
+    uploadDataFail: Upload dữ liệu thất bại
+  assetType:
+    Unknown: Không xác định
+    Image: Ảnh
+    Video: Video
+    Audio: Âm thanh
+    All: Tất cả
+  message:
+    success: Xóa nội dung thành công!
+</i18n>