@sigmaott/base-next 1.0.6

package/src/components/Asset/AssetPreview.vue

@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+
+const props = withDefaults(defineProps<{
+  src: string
+  type: AssetTypeEnum
+  border?: boolean
+}>(), {
+  border: true,
+})
+const { t } = useI18n()
+const _src = toRef(props, 'src')
+const _type = toRef(props, 'type')
+
+const audio = ref()
+const { playing } = useMediaControls(audio, { src: _src })
+
+function toggleAudio() {
+  playing.value = !playing.value
+}
+const { assetDomain } = usePickerStore()
+const src = computed(() => _src.value ? getAssetURI(_src.value, assetDomain.value) : '')
+const isNotImage = computed(() => !/\.(jpg|jpeg|png|webp|avif|gif|svg)$/.test(src.value))
+</script>
+
+<template>
+  <template v-if="!src">
+    <div class="h-full text-center text-gray-400 text-14px justify-center flex flex-col gap-2 items-center">
+      <el-icon :size="24" class>
+        <div class="i-ep:refresh-right" />
+      </el-icon>
+      <div v-if="!src">
+        {{ t('AssetNoExist') }}
+      </div>
+    </div>
+  </template>
+  <template v-else-if="_type === 'audio'">
+    <audio ref="audio" preload="auto" :src="src" />
+    <el-button v-bind="$attrs" @click="toggleAudio">
+      <div v-if="!playing" class="i-carbon:volume-up-filled" />
+      <div v-else class="i-carbon:pause" />
+    </el-button>
+  </template>
+  <div v-else-if="_type === 'image'" v-bind="$attrs" class="h-90px w-160px">
+    <el-image class="rounded-sm w-full h-full" :class="[border ? 'border-1px border-solid border-gray-200' : '']"
+      :src="src" fit="contain">
+      <template #error>
+        <slot name="error">
+          <div class="h-full text-center text-gray-400 text-14px justify-center flex flex-col gap-2 items-center">
+            <el-icon :size="24" class>
+              <div class="i-ep:refresh-right" />
+            </el-icon>
+            <div class="text-12px">
+              {{ t('AssetNoAvailable') }}
+            </div>
+          </div>
+        </slot>
+      </template>
+    </el-image>
+  </div>
+  <div v-else-if="_type === 'video'" v-bind="$attrs" class="h-90px w-160px flex-center">
+    <el-image class="rounded-sm w-full h-full" :class="[border ? 'border-1px border-solid border-gray-200' : '']"
+      :src="src" fit="contain">
+      <template #error>
+        <slot name="error">
+          <div class="h-full text-center text-gray-400 text-14px justify-center flex flex-col gap-2 items-center">
+            <el-icon :size="24" class>
+              <div class="i-ep:refresh-right" />
+            </el-icon>
+            <div class="text-12px">
+              {{ t('AssetNoAvailable') }}
+            </div>
+          </div>
+        </slot>
+      </template>
+    </el-image>
+  </div>
+  <div v-else v-bind="$attrs" class="flex items-center justify-center rounded-10px border-1px border-border">
+    <div class="i-carbon:document-unknown text-16px" />
+  </div>
+</template>
+
+<i18n lang="yaml">
+en:
+  AssetNoAvailable: Preview is not available
+  AssetNoExist: Asset does not exist
+vi:
+  AssetNoAvailable: Xem trước chưa có sẵn
+  AssetNoExist: Nội dung không tồn tại
+</i18n>

package/src/components/Asset/AssetShareModal.vue

@@ -0,0 +1,131 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  asset: any
+}>()
+
+const show = ref(false)
+const showEmbed = ref(false)
+
+const href = computed(() => withQuery('https://sigma.video/play/', {
+  source: props.asset.uri,
+  name: props.asset.name,
+  tags: props.asset.tags,
+  category: props.asset.category,
+}))
+
+const hrefEmbed = computed(() => withQuery('https://sigma.video/play-embed/', {
+  source: props.asset.uri,
+  name: props.asset.name,
+  tags: props.asset.tags,
+  category: props.asset.category,
+}))
+
+const iframeCode = computed(() => `<iframe src="${hrefEmbed.value}" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"  allowfullscreen />`)
+
+const twitterUrl = computed(() => withQuery('https://twitter.com/intent/tweet', {
+  url: href.value,
+  text: props.asset.name,
+}))
+
+const facebookUrl = computed(() => withQuery('https://www.facebook.com/sharer/sharer.php', {
+  u: href.value,
+  quote: props.asset.name,
+}))
+
+const whatsappUrl = computed(() => withQuery('https://api.whatsapp.com/send', {
+  text: href.value,
+  type: 'custom_url',
+  app_absent: 0,
+}))
+
+const emailUrl = computed(() => `mailto:?body=${href.value}`)
+</script>
+
+<template>
+  <el-button type="primary" @click="show = true">
+    <template #icon>
+      <div i-ri:share-fill />
+    </template>
+    Share
+  </el-button>
+  <el-dialog v-model="show" title="Share" width="500px">
+    <div class="grid grid-cols-5 justify-items-center gap-5">
+      <div class="flex flex-col items-center gap-2">
+        <button class="size-15 flex-center rounded-full bg-secondary hover:(outline-1px outline-muted outline-solid)" @click="showEmbed = true">
+          <div class="i-ri:code-s-slash-fill size-6" />
+        </button>
+        <div class="text-sm font-bold">
+          Embed
+        </div>
+      </div>
+
+      <div class="flex flex-col items-center gap-2">
+        <a class="size-15 flex-center rounded-full bg-black hover:(outline-1px outline-muted outline-solid)" :href="twitterUrl" target="_blank">
+          <div class="i-ri:twitter-x-fill size-6 text-white" />
+        </a>
+        <div class="text-sm font-bold">
+          Twitter
+        </div>
+      </div>
+
+      <div class="flex flex-col items-center gap-2">
+        <a class="size-15 flex-center rounded-full bg-#3B5998 hover:(outline-1px outline-muted outline-solid)" :href="facebookUrl" target="_blank">
+          <div class="i-ri:facebook-fill size-6 text-white" />
+        </a>
+        <div class="text-sm font-bold">
+          Facebook
+        </div>
+      </div>
+
+      <div class="flex flex-col items-center gap-2">
+        <a class="size-15 flex-center rounded-full bg-#25D366 hover:(outline-1px outline-muted outline-solid)" :href="whatsappUrl" target="_blank">
+          <div class="i-ri:whatsapp-fill size-6 text-white" />
+        </a>
+        <div class="text-sm font-bold">
+          Whatsapp
+        </div>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <a class="size-15 flex-center rounded-full bg-muted hover:(outline-1px outline-muted outline-solid)" :href="emailUrl">
+          <div class="i-ri:mail-line size-6 text-white" />
+        </a>
+        <div class="text-sm font-bold">
+          Email
+        </div>
+      </div>
+    </div>
+    <div class="my-4 flex gap-1">
+      <el-input :model-value="href" readonly />
+      <div>
+        <SSCopyButton :value="href" no-text />
+      </div>
+
+      <div>
+        <el-button circle tag="a" :href="href" target="_blank">
+          <div i-ri:external-link-fill />
+        </el-button>
+      </div>
+    </div>
+  </el-dialog>
+
+  <el-dialog v-model="showEmbed" width="1000px">
+    <div class="grid grid-cols-[3fr_2fr] w-full">
+      <iframe :src="hrefEmbed" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />
+      <div>
+        <div class="text-sm font-bold">
+          Embed
+        </div>
+        <div
+          class="w-full break-all rounded bg-secondary p-2 font-mono"
+        >
+          {{ iframeCode }}
+        </div>
+        <div class="mt-2 flex justify-end">
+          <SSCopyButton :value="iframeCode" no-text>
+            Copy
+          </SSCopyButton>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>

package/src/components/Asset/AssetTable.vue

@@ -0,0 +1,365 @@
+<script lang="ts" setup>
+import type { Ref } from 'vue'
+import CollapseTagsTooltip from '../CollapseTagsTooltip/CollapseTagsTooltip.vue'
+import AssetMeta from './AssetMeta.vue'
+import AssetItemPreview from './AssetItemPreview.vue'
+import { useSharedAssetFilters } from '~/components/Asset/asset-context'
+
+const props = withDefaults(defineProps<{
+  assetIdSelected?: string
+  data: Array<any>
+  isFetching: boolean
+  tableRef: Ref<HTMLElement | undefined>
+  isHiddenPlaylist?: boolean
+  selectable?: boolean
+  navigate?: boolean
+}>(), {
+  navigate: false,
+})
+const emit = defineEmits(['delete', 'select', 'preview', 'upload', 'remove', 'importLink', 'recheckFile'])
+
+const multipleSelection = defineModel<any[]>('multipleSelection')
+
+const { t } = useI18n()
+const _tableRef = useVModel(props, 'tableRef')
+function tableRowClassName({ row }: { row: any }) {
+  if (row.id === props.assetIdSelected || multipleSelection.value?.some(item => item.id === row.id))
+    return 'bg-[oklch(0.950_0.023_270.7)]! dark:bg-[oklch(0.198_0.128_270.7)]!'
+  return ''
+}
+
+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 isFullPermission = inject('isFullPermission') as Ref<boolean> | undefined
+const disabled = computed(() => isFullPermission && !isFullPermission?.value)
+
+const { searchPlayListId } = useSharedAssetFilters()
+
+const { navigateWithHistory } = useRouterHistory()
+function handleNavigate(id: string) {
+  if (!props.isHiddenPlaylist) {
+    navigateWithHistory({
+      path: `/asset/${id}`,
+    })
+  }
+}
+
+function calculateExpirationDate(createdAt: string, expiryTime?: number) {
+  if (!expiryTime)
+    return t('label.noExpiry')
+
+  const createdDate = new Date(createdAt)
+  const expirationDate = new Date(createdDate.getTime() + expiryTime * 1000)
+  return formatDateTime(expirationDate)
+}
+
+const optionValidStatus = [
+  { label: 'Not Check', value: 'not_check' },
+  { label: 'Error', value: 'error' },
+  { label: 'Ready', value: 'ready' },
+  { label: 'Checking', value: 'checking' },
+]
+
+// function Returns the label corresponding to the status enum
+function getLabel(status: string) {
+  return optionValidStatus.find(option => option.value === status)?.label ?? 'Unknown'
+}
+
+const isCheckFile = inject<Ref<boolean>>('isCheckFile')
+
+// Selectable
+
+function handleSelectionChange(val: any[]) {
+  multipleSelection.value = val
+}
+
+whenever(_tableRef, () => {
+  props.data.forEach((row) => {
+    const isSelected = multipleSelection.value?.some(item => item.id === row.id)
+    _tableRef.value?.toggleRowSelection(row, isSelected)
+  })
+})
+
+watch(multipleSelection, () => {
+  if (multipleSelection.value?.length === 0) {
+    _tableRef.value?.clearSelection()
+  }
+})
+
+function handleDelete(row: any) {
+  ElMessageBox.confirm(t('message.delete'), {
+    confirmButtonText: t('actions.confirm'),
+    cancelButtonText: t('actions.cancel'),
+    type: 'warning',
+  }).then(() => {
+    emit('delete', row)
+  })
+}
+</script>
+
+<template>
+  <el-table
+    ref="_tableRef"
+    v-loading="props.isFetching"
+    :data="data"
+    row-key="id"
+    :row-class-name="tableRowClassName"
+    @selection-change="handleSelectionChange"
+  >
+    <template #empty>
+      <slot name="empty" :disabled="disabled">
+        <div class="w-full flex flex-col items-center justify-center pt-4">
+          <p>{{ $t('base.no_data') }}</p>
+          <p class="mb-4 text-pretty text-sm">
+            {{ $t('base_library.upload_multimedia_content_for_use_with_in-app_products') }}
+          </p>
+          <el-dropdown trigger="click">
+            <el-button :disabled="disabled">
+              {{ $t('base_library.upload_asset') }}
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item @click="$emit('upload')">
+                  <div class="i-ri:file-2-line mr-2 size-4" />
+                  <div>
+                    {{ $t('upload_files') }}
+                  </div>
+                </el-dropdown-item>
+                <el-dropdown-item @click="$emit('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>
+      </slot>
+    </template>
+    <el-table-column v-if="navigate" type="selection" width="55" />
+    <el-table-column
+      prop="id"
+      label="ID"
+      width="80"
+      fixed
+      align="center"
+    >
+      <template #default="{ row }">
+        <SSCopyButton :value="row.id" />
+      </template>
+    </el-table-column>
+    <el-table-column
+      :label="t('label.name')"
+      min-width="180"
+      :show-overflow-tooltip="{ effect: 'dark', placement: 'top', offset: 0 }"
+    >
+      <template #default="{ row }">
+        <span
+          v-if="!selectable && navigate"
+          :class="{ 'cursor-pointer': !isHiddenPlaylist }"
+          class="text-primary hover:underline"
+          @click="handleNavigate(row.id)"
+        >{{
+          row.name }}</span>
+        <span v-else>{{ row.name }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      prop="url"
+      :label="t('label.preview')"
+      min-width="100"
+      align="center"
+    >
+      <template #default="{ row }">
+        <AssetItemPreview mini :item="row" @on-preview="emit('preview', row)" />
+      </template>
+    </el-table-column>
+    <el-table-column prop="source" :label="t('label.source')" width="80" />
+    <el-table-column prop="meta" :label="t('label.meta')" width="220">
+      <template #default="{ row }">
+        <div class="flex flex-wrap items-center gap-1">
+          <AssetMeta :item="row" />
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column prop="type" :label="t('label.type')" width="100">
+      <template #default="{ row }">
+        <span>{{ t(`AssetType.${row.type}`) }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="type" :label="t('label.state')" width="100">
+      <template #default="{ row }">
+        <span>{{ row.state }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="type" label="Category" width="120">
+      <template #default="{ row }">
+        <span>{{ row.category }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="tags" :label="t('label.tags')" width="150">
+      <template #default="{ row }">
+        <CollapseTagsTooltip :tags="row.tags" :limit-text="10" :limit="2" />
+      </template>
+    </el-table-column>
+    <el-table-column prop="validStatus" label="Valid file" width="130">
+      <template #default="{ row }">
+        <div class="flex items-center gap-1">
+          <span>{{ getLabel(row.validStatus) }} <span v-if="row.validStatus === 'checking'">({{ Math.round(row.validProgress) }}%)</span></span>
+          <el-tooltip
+            effect="dark"
+            :content="row.validError"
+            placement="top-start"
+          >
+            <div v-if="row.validStatus === 'error'" class="i-ep:info-filled text-danger" />
+          </el-tooltip>
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column prop="createdAt" :label="t('label.createdAt')" width="140">
+      <template #default="{ row }">
+        <span style="word-break: break-word"> {{ formatDateTime(row.createdAt) }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column :label="t('label.expirationDate')" width="140">
+      <template #default="{ row }">
+        <span style="word-break: break-word">
+          {{ calculateExpirationDate(row.createdAt, row.expire) }}
+        </span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      fixed="right"
+      :label="t('label.actions')"
+      align="center"
+      width="100"
+    >
+      <template #default="{ row }">
+        <el-button-group size="small">
+          <el-tooltip
+            v-if="selectable"
+            effect="dark"
+            :content="t('actions.select')"
+            placement="top"
+          >
+            <el-button
+              :disabled="disabled"
+              type="primary"
+              @click="emit('select', row)"
+            >
+              <div class="i-carbon:checkmark" />
+            </el-button>
+          </el-tooltip>
+          <el-dropdown>
+            <el-button :class="{ 'border-group': !(selectable && row.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(row)">
+                  <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(row.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 && row.state === 'completed'" :disabled="disabled" @click="!disabled && $emit('recheckFile', row)">
+                <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', row)">
+                <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>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<style>
+.border-group {
+  border-top-left-radius: 4px !important;
+  border-bottom-left-radius: 4px !important;
+  border-left-color: var(--el-border-color) !important;
+}
+</style>
+
+<i18n lang="yaml">
+en:
+  label:
+    name: Name
+    preview: Preview
+    meta: Meta
+    type: Type
+    state: State
+    tags: Tags
+    createdAt: Created At
+    actions: Actions
+    expirationDate: Expiration Date
+    noExpiry: No Expiry
+  actions:
+    confirm: Confirm
+    delete: Delete
+    select: Select
+    cancel: Cancel
+  message:
+    delete: Are you sure to delete this asset?
+  AssetType:
+    image: Image
+    video: Video
+    audio: Audio
+    unknown: Unknown
+    all: All
+vi:
+  label:
+    name: Tên
+    preview: Xem trước
+    meta: Meta
+    type: Loại
+    state: Trạng thái
+    tags: Thẻ
+    createdAt: Thời gian tạo
+    actions: Hành động
+    expirationDate: Ngày hết hạn
+    noExpiry: Không Hết Hạn
+  actions:
+    confirm: Xác nhận
+    delete: Xóa
+    select: Chọn
+    cancel: Hủy
+  message:
+    delete: Bạn có chắc muốn xóa nội dung này?
+  AssetType:
+    image: Hình ảnh
+    video: Video
+    audio: Âm thanh
+    unknown: Không xác định
+    all: Tất cả
+</i18n>