@sigmaott/base-next 1.0.6

package/src/components/Asset/AssetInfiniteSelect.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+const modelValue = defineModel<any[]>()
+
+const params = ref({
+  page: 1,
+  perPage: 10,
+  q: { $and: [{ name: undefined as any }] },
+})
+
+const { data, isInitialLoading, isFetching, hasNextPage, fetchNextPage, isLoading } = useInfiniteQuery({
+  queryKey: ['/api/library/assets_infinite', params],
+  queryFn: async ({ pageParam }) => {
+    return $libraryApi('/api/library/assets', {
+      method: 'GET',
+      query: {
+        ...params.value,
+        ...pageParam,
+      },
+    })
+  },
+  getNextPageParam: (lastPage) => {
+    const maxPage = Math.ceil(lastPage.total / lastPage.perPage)
+    if (lastPage.page < maxPage) {
+      return {
+        page: lastPage.page + 1,
+      }
+    }
+    return null
+  },
+  refetchOnWindowFocus: false,
+})
+
+const assetsData = computed(() => {
+  return data?.value?.pages?.flatMap(item => item.data) || []
+})
+
+function remoteMethod(query: string) {
+  const newParams = { ...params.value }
+  if (query)
+    newParams.q.$and[0].name = { $regex: query, $options: 'i' }
+
+  else
+    newParams.q.$and[0].name = undefined
+
+  params.value = newParams
+}
+
+function load() {
+  if (!isFetching.value && hasNextPage?.value)
+    fetchNextPage()
+}
+</script>
+
+<template>
+  <el-select
+    v-model="modelValue" v-loading="isInitialLoading" :max-collapse-tags="4" :placeholder="$t('base_library.select_assets')"
+    clearable collapse-tags collapse-tags-tooltip multiple class="w-full!" filterable remote reserve-keyword
+    remote-show-suffix :remote-method="remoteMethod" :loading="isLoading"
+  >
+    <el-option v-for="item in assetsData" :key="item.id" v-infinite-scroll="load" :label="item.name" :value="item.id" />
+  </el-select>
+</template>

package/src/components/Asset/AssetItem.vue

@@ -0,0 +1,194 @@
+<script lang="ts" setup>
+import AssetItemPreview from './AssetItemPreview.vue'
+import AssetMeta from './AssetMeta.vue'
+import { useSharedAssetFilters } from '~/components/Asset/asset-context'
+
+const props = defineProps<{
+  item: any
+  isHiddenPlaylist: boolean
+  selectable?: boolean
+  checkable?: boolean
+  checked?: boolean
+}>()
+
+const emit = defineEmits(['delete', 'select', 'preview', 'remove', 'update:checked', 'recheckFile'])
+const { t } = useI18n()
+const isCheckFile = inject<Ref<boolean>>('isCheckFile')
+
+function downloadAsset(url: string) {
+  const link = document.createElement('a')
+  link.href = url
+  link.download = 'downloaded_asset'
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}
+
+const statusMap = {
+  complete: {
+    text: 'Completed',
+    icon: 'i-carbon:checkmark-outline',
+    class: 'text-success',
+  },
+  failed: {
+    text: 'Failed',
+    icon: 'i-carbon:close-outline',
+    class: 'text-danger',
+  },
+  invalid: {
+    text: 'Invalid',
+    icon: 'i-carbon:close-outline',
+    class: 'text-danger',
+  },
+  progress: {
+    text: 'Progress',
+    icon: 'i-carbon:in-progress',
+    class: 'text-primary',
+  },
+  incomplete: {
+    text: 'Incomplete',
+    icon: 'i-carbon:time',
+    class: '',
+  },
+}
+
+const isFullPermission = inject('isFullPermission') as Ref<boolean> | undefined
+const disabled = computed(() => isFullPermission && !isFullPermission?.value)
+const { searchPlayListId } = useSharedAssetFilters()
+
+function handleNavigate(id: string) {
+  if (!props.isHiddenPlaylist)
+    navigateTo(`/asset/${id}`)
+}
+
+function handleDelete(item: any) {
+  ElMessageBox.confirm(t('library.are_you_sure_to_delete_this_asset'), {
+    confirmButtonText: t('actions.confirm'),
+    cancelButtonText: t('actions.cancel'),
+    type: 'warning',
+  }).then(() => {
+    emit('delete', item)
+  })
+}
+
+const { mouseEnter, disabledTooltip } = useTooltipEllipsis()
+</script>
+
+<template>
+  <div
+    class="el-card is-always-shadow relative grid grid-row-[span_3] grid-rows-subgrid"
+    :class="[checked ? 'bg-[oklch(0.950_0.023_270.7)]!' : '']"
+  >
+    <div class="min-w-0 flex items-center gap-2 px-3 pt-3">
+      <el-checkbox
+        v-if="checkable"
+        :model-value="checked"
+
+        @update:model-value="() => emit('update:checked')"
+      />
+
+      <el-tooltip :disabled="disabledTooltip" placement="top">
+        <div
+          :class="[{ 'cursor-pointer': !selectable && !isHiddenPlaylist }, { 'text-primary hover:underline': !selectable }]"
+          class="w-full flex-1 overflow-hidden truncate"
+          @click="!selectable && handleNavigate(item.id)"
+          @mouseenter="mouseEnter"
+        >
+          {{ item.name }}
+        </div>
+        <template #content>
+          <div class="max-h-200px max-w-240px overflow-auto">
+            {{ item.name }}
+          </div>
+        </template>
+      </el-tooltip>
+
+      <el-button-group size="small" class="ml-auto">
+        <el-tooltip
+          v-if="selectable && item.state === 'completed'"
+          effect="dark"
+          :content="t('actions.select')"
+          placement="top"
+        >
+          <el-button
+            :disabled="disabled"
+            type="primary"
+            @click="emit('select', item)"
+          >
+            <div class="i-carbon:checkmark" />
+          </el-button>
+        </el-tooltip>
+        <el-dropdown>
+          <el-button :class="{ 'border-group': !(selectable && item.state === 'completed') }">
+            <template #icon>
+              <div class="i-ep:more" />
+            </template>
+          </el-button>
+
+          <template #dropdown>
+            <el-dropdown-menu :show-timeout="100">
+              <el-dropdown-item :disabled="disabled" @click="!disabled && handleDelete(item)">
+                <div class="flex items-center gap-2">
+                  <div class="i-ep:delete" />
+                  {{ t('actions.delete') }}
+                </div>
+              </el-dropdown-item>
+
+              <el-dropdown-item :disabled="disabled" @click="!disabled && downloadAsset(item.uri)">
+                <div class="flex items-center gap-2">
+                  <div class="i-carbon:download" />
+                  {{ t('actions.download') }}
+                </div>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+
+            <el-dropdown-item v-if="isCheckFile && item.state === 'completed'" :disabled="disabled" @click="!disabled && $emit('recheckFile', item)">
+              <div class="flex items-center gap-2">
+                <div class="i-ep:refresh-right" />
+                {{ t('base_library.recheck') }}
+              </div>
+            </el-dropdown-item>
+
+            <el-dropdown-item v-if="searchPlayListId" :disabled="disabled" @click="$emit('remove', item)">
+              <div class="flex items-center gap-2">
+                <div class="i-carbon:close" />
+                {{ $t('base_library.remove_asset_from_playlist') }}
+              </div>
+            </el-dropdown-item>
+          </template>
+        </el-dropdown>
+      </el-button-group>
+    </div>
+
+    <AssetItemPreview :item="item" @on-preview="emit('preview', item)" />
+
+    <div class="w-full flex flex-col justify-end p-3">
+      <div class="mb-1 flex items-center gap-1" :class="statusMap[item.state]?.class">
+        <div :class="statusMap[item.state]?.icon" />
+        {{ statusMap[item.state]?.text }}
+      </div>
+      <div class="flex items-end justify-between gap-1">
+        <div class="w-full flex flex-col gap-1">
+          <div class="flex flex-wrap items-center gap-1">
+            <AssetMeta :item="item" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<i18n lang="yaml">
+en:
+  message: Are you sure you want to delete this asset?
+  actions:
+    confirm: Confirm
+    cancel: Cancel
+    delete: Delete
+vi:
+  message: Bạn có chắc muốn xóa nội dung này?
+  actions:
+    delete: Xóa
+    confirm: Xác nhận
+    cancel: Huỷ
+</i18n>

package/src/components/Asset/AssetItemPreview.vue

@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  item: any
+  mini?: boolean
+}>()
+defineEmits(['onPreview'])
+const type = computed(() => props.item.type!)
+const failed = computed(() => props?.item?.state === 'failed')
+
+const audio = ref()
+const { playing, muted } = useMediaControls(audio, {
+  src: props.item.uri,
+})
+
+function onPlay() {
+  playing.value = !playing.value
+}
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div v-if="mini" class="w-full flex justify-center" v-bind="$attrs">
+    <el-button v-if="type === 'video'" @click="$emit('onPreview')">
+      <el-icon class="i-carbon:play" />
+    </el-button>
+    <el-image
+      v-else-if="type === 'image'" :src="item.thumbUri"
+      class="w-46px" fit="cover"
+      :preview-src-list="[item.thumbUri!]"
+      preview-teleported
+    />
+    <div v-else-if="type === 'audio'" class="flex items-center justify-center">
+      <audio ref="audio" preload="auto" :src="item.uri" />
+      <el-tooltip
+        class="box-item"
+        effect="dark"
+        :content=" playing ? t('pause') : t('play') "
+        placement="top"
+      >
+        <div
+          class="h-46px w-46px text-[var(--el-color-primary,var(--ep-color-primary))]"
+          :class="playing ? 'i-carbon:pause-outline' : 'i-carbon:play-outline'"
+          @click.prevent.stop="onPlay()"
+        />
+      </el-tooltip>
+    </div>
+    <div v-else-if="type === 'unknown'" class="flex flex-col items-center justify-center">
+      <div class="h-32px w-46px flex-center border-1px border-border rounded">
+        <el-icon class="i-carbon:document-blank size-14px" />
+      </div>
+      <div v-if="failed" class="mt-8px">
+        <p class="text-$el-color-danger">
+          <SSTooltipEllipsis :content="item.errorMsg" class="line-clamp-2" />
+        </p>
+      </div>
+    </div>
+  </div>
+  <div v-else class="h-90px w-full flex justify-center" v-bind="$attrs">
+    <el-image
+      v-if="type === 'video'"
+      preview-teleported
+      :src="item.thumbUri"
+      class="max-w-160px cursor-pointer"
+      fit="cover"
+      @click="$emit('onPreview')"
+    >
+      <template #error>
+        <div class="h-full w-full flex items-center justify-center">
+          <el-icon class="i-carbon:image" :size="50" />
+        </div>
+      </template>
+    </el-image>
+    <el-image
+      v-else-if="type === 'image'" :src="item.thumbUri"
+      class="max-w-160px" fit="cover"
+      :preview-src-list="[item.thumbUri!]"
+      preview-teleported
+    />
+    <div v-else-if="type === 'audio'" class="flex items-center justify-center">
+      <audio ref="audio" preload="auto" :src="item.uri" />
+      <el-tooltip
+        class="box-item"
+        effect="dark"
+        :content=" playing ? t('pause') : t('play') "
+        placement="top"
+      >
+        <div
+          class="h-60px w-60px text-[var(--el-color-primary,var(--ep-color-primary))]"
+          :class="playing ? 'i-carbon:pause-outline' : 'i-carbon:play-outline'"
+          @click.prevent.stop="onPlay()"
+        />
+      </el-tooltip>
+    </div>
+    <div v-else-if="type === 'unknown'" class="flex flex-col items-center justify-center">
+      <div class="h-32px w-46px flex-center border-1px border-border rounded">
+        <el-icon class="i-carbon:document-blank size-14px" />
+      </div>
+      <div v-if="failed" class="mt-8px">
+        <p class="text-$el-color-danger">
+          <SSTooltipEllipsis :content="item.errorMsg" class="line-clamp-2" />
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<i18n lang="yaml">
+en:
+  select: Select
+  play: Play
+  pause: Pause
+vi:
+  select: Chọn
+  play: Bật
+  pause: Dừng
+  </i18n>