@sigmaott/base-next 1.0.6

package/src/components/Asset/AssetMeta.vue

@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+import { addMilliseconds } from 'date-fns'
+import { formatDateTime, formatSecondsToHm } from '../../utils/format'
+
+const props = defineProps<{
+  item: Asset
+  startTime?: string
+}>()
+
+const type = computed(() => props.item.type!)
+
+const size = computed(() => {
+  if (!props.item.metadata?.size)
+    return null
+  const size = (props.item.metadata?.size || 0) / 1024 / 1024
+  return size >= 1024 ? `${(size / 1024).toFixed(2)} GB` : `${size.toFixed(2)} MB`
+})
+
+const WxH = computed(() => {
+  const sizeWxH = `${props.item.metadata?.width} x ${props.item.metadata?.height}`
+  return sizeWxH
+})
+
+const duration = computed(() => {
+  const duration = props.item.metadata?.duration
+  return duration
+})
+
+const fps = computed(() => {
+  const fps = props.item.metadata?.fps
+  return fps ? fps.toFixed(2) : null
+})
+
+const progressPercent = computed(() => {
+  const _progressPercent = props.item.metadata?.progressPercent
+  return _progressPercent
+})
+
+const startTime = computed(() => {
+  const _startTime = formatDateTime(props.startTime)
+  return _startTime
+})
+
+const stopTime = computed(() => {
+  const _stopTime = formatDateTime(addMilliseconds(new Date(startTime.value), 1000 * duration.value || 0).toISOString())
+  return _stopTime
+})
+</script>
+
+<template>
+  <el-tag v-if="progressPercent">
+    <div class="flex items-center gap-1">
+      <div class="i-carbon:percentage text-blue-600" />
+      <span class="ml-1">{{ progressPercent }}</span>
+    </div>
+  </el-tag>
+  <el-tag v-if="type === 'image'" type="danger">
+    <div class="flex items-center gap-1">
+      <div class="i-ep:crop text-pink-600" />
+      <span>{{ WxH }}</span>
+    </div>
+  </el-tag>
+  <el-tag v-if="duration" type="info">
+    <div class="flex items-center gap-1">
+      <div class="i-ep:video-camera text-blue-600" />
+      <span class="ml-1">{{ formatSecondsToHm(duration) }}</span>
+    </div>
+  </el-tag>
+  <el-tag v-if="size" type="success">
+    <div class="flex items-center gap-1">
+      <div class="i-ep:scale-to-original text-teal-600" />
+      <span>{{ size }}</span>
+    </div>
+  </el-tag>
+  <el-tag v-if="fps" type="success">
+    <div class="flex items-center gap-1">
+      <div class="i-ep:sort text-green-600" />
+      <span>{{ fps }}</span>
+    </div>
+  </el-tag>
+  <div v-if="props.startTime">
+    <el-tag>
+      <div class="flex items-center gap-1">
+        <div class="i-carbon:play text-green-600" />
+        <span class="ml-1">{{ startTime }}
+        </span>
+      </div>
+    </el-tag>
+    <el-tag>
+      <div class="flex items-center gap-1">
+        <div class="i-carbon:stop text-red-600" />
+        <span class="ml-1">{{ stopTime }}
+        </span>
+      </div>
+    </el-tag>
+  </div>
+</template>

package/src/components/Asset/AssetPicker.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import type { AxiosInstance } from 'axios'
+import { formContextKey, formItemContextKey } from 'element-plus'
+
+import AssetList from './AssetList.vue'
+
+const props = withDefaults(defineProps<{
+  /** ID of the selected asset, used for tracking the currently selected asset */
+  modelValue?: string | null | undefined
+  /** URL/URI of the selected asset, used for displaying the asset preview */
+  assetSrc?: string | null
+  /** Base domain for asset URLs, used to construct complete asset URIs */
+  assetDomain?: string
+  /** Array of allowed asset types to filter the asset list */
+  limit?: AssetTypeEnum[]
+  /** Custom axios instance for making API requests */
+  axiosInstance?: AxiosInstance
+  /** Whether the asset picker is disabled */
+  disabled?: boolean
+  /** Whether to close the picker dialog after upload is selected */
+  isUploadSelected?: boolean
+  /** Custom label for the picker button */
+  label?: string
+  /** Whether to skip form validation when asset changes */
+  noValidate?: boolean
+  /** Controls the visibility of the asset picker dialog */
+  visible?: boolean
+  /** Whether assets can be selected in the picker */
+  selectable?: boolean
+  /** Whether to enable navigation in the asset list */
+  navigate?: boolean
+}>(), {
+  selectable: true,
+})
+
+const emit = defineEmits<{
+  (e: 'selectAsset', file: any): void
+  (e: 'deleteAsset', id: string): void
+  (e: 'update:visible', visible: boolean): void
+  (e: 'close'): void
+}>()
+
+useProvidePickerStore({
+  assetDomain: props.assetDomain,
+  axiosInstance: props.axiosInstance,
+})
+
+const visible = useVModel(props, 'visible', emit, {
+  passive: true,
+  defaultValue: false,
+})
+
+function toggle() {
+  visible.value = !visible.value
+}
+
+defineExpose({
+  toggle,
+})
+
+const assetId = useVModel(props, 'modelValue', emit, { passive: true, defaultValue: '' })
+const assetSrc = useVModel(props, 'assetSrc', emit, { passive: true, defaultValue: '' })
+provide('isUploadSelected', props.isUploadSelected)
+
+const context = inject(formContextKey)
+const itemCtx = inject(formItemContextKey)
+
+watch(() => assetId.value, () => {
+  if (props.noValidate)
+    return
+
+  nextTick(() => {
+    context?.validateField?.(itemCtx?.prop)
+  })
+}, { flush: 'post' })
+
+function selectImage(file: Asset) {
+  assetId.value = file.id
+  toggle()
+}
+const isDisabled = computed(() => {
+  return !!props?.disabled
+})
+
+const { data, isSuccess } = useAssetDetail(assetId, [], isDisabled)
+
+whenever(data, () => {
+  const src = data.value?.thumbUri || data.value?.uri || ''
+  assetSrc.value = getAssetURI(src, props.assetDomain)
+  emit('selectAsset', data.value)
+}, { deep: true, immediate: true })
+
+const { t } = useI18n()
+
+function uploadAssetSuccess(assetIdUpload: string) {
+  assetId.value = assetIdUpload
+  if (props.isUploadSelected)
+    toggle()
+}
+
+function onDeleteAsset(asset: Asset) {
+  if (asset.id === assetId.value) {
+    assetId.value = ''
+    assetSrc.value = ''
+  }
+  emit('deleteAsset', asset.id!)
+}
+
+const { data: dataCheck, suspense } = useQuery({
+  queryKey: ['api/library/settings/app/check'],
+  queryFn: () => $libraryApi('api/library/settings/app/check', {
+    method: 'GET',
+  }),
+})
+
+const { data: configCheckFile } = useQuery({
+  queryKey: ['/api/library/settings/app/config-machine'],
+  queryFn: () => $libraryApi('/api/library/settings/app/config-machine', {
+    method: 'GET',
+  }),
+})
+
+const isCheckFile = computed(() => {
+  return configCheckFile.value?.enable
+})
+await suspense()
+const { microProps } = useMicroProps()
+provide('isCheckFile', isCheckFile)
+
+const { t: $t } = useI18n()
+function openConfig() {
+  ElMessageBox.confirm(
+    $t('utilize_feature_you_must_first_complete'),
+    $t('library_profile.warning'),
+    {
+      confirmButtonText: $t('general.ok'),
+      cancelButtonText: $t('base.cancel'),
+      type: 'warning',
+    },
+  )
+    .then(() => {
+      microProps.value.openMicroApp('library', 'library', '/asset?config=true')
+    })
+}
+
+function handleClose(done: () => void) {
+  if (!assetId.value) {
+    emit('close')
+  }
+
+  done()
+}
+</script>
+
+<template>
+  <el-dialog
+    v-if="visible"
+    v-model="visible"
+    class="upload-asset"
+    :title="t('title')"
+    width="85%"
+    top="5vh"
+    :append-to-body="true"
+    :before-close="handleClose"
+  >
+    <AssetList
+      :is-setting="dataCheck!.isSetting"
+      :asset-id-selected="assetId"
+      :enabled="visible"
+      :limit="[...props.limit, 'unknown']"
+      :selectable="selectable"
+      :is-hidden-playlist="true"
+      :navigate="navigate"
+      is-picker
+      disable-sync-routes
+      @config="openConfig"
+      @select="selectImage"
+      @upload-success="uploadAssetSuccess"
+      @delete="onDeleteAsset"
+    />
+  </el-dialog>
+  <slot :toggle="() => toggle()">
+    <el-button
+      type="primary"
+      plain
+      :disabled="disabled"
+      @click="() => toggle()"
+    >
+      <template #icon>
+        <div class="i-ep:upload-filled" />
+      </template>
+      {{ label || t('chooseAsset') }}
+    </el-button>
+  </slot>
+</template>
+
+<i18n lang="yaml">
+en:
+  title: List of multimedia content
+  chooseAsset: Choose asset
+vi:
+  title: Danh sách nội dung đa phương tiện
+  chooseAsset: Chọn nội dung
+</i18n>