@sigmaott/base-next 1.0.6

package/src/components/Asset/FormUploadAssetItem.vue

@@ -0,0 +1,115 @@
+<script lang="ts" setup>
+const emit = defineEmits<{
+  remove: []
+}>()
+
+const { prop, item } = definePropsRefs<{
+  item: any
+  prop: string
+}>()
+
+const { t: $t } = useI18n()
+
+function getProp(path: string) {
+  return () => `${prop.value}.${path}`
+}
+const originalName = item.value.name
+
+const [nameValue, nameAttrs] = useElField<string>(getProp('name'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (_rule, value: string, callback: any) => {
+      if (!value || value.trim().length === 0)
+        callback(new Error($t('base.please_input_name', { name: $t('base.name') })))
+      else if (!/^.{1,200}$/.test(value))
+        callback(new Error($t('base.the_name_should_not_exceed_200_characters', { name: uppercaseFirst($t('base.name')) })))
+      else
+        callback()
+      callback()
+    },
+  },
+])
+
+const isEdit = ref(false)
+
+function handleClose() {
+  nameValue.value = originalName
+  nextTick(() => {
+    isEdit.value = false
+  })
+}
+</script>
+
+<template>
+  <div class="grid grid-cols-[1fr_auto] items-center gap-1">
+    <div class="flex gap-2 border border-border rounded px-2 py-2" :class="{ 'border-danger': !!item.error }">
+      <div class="i-ri:file-2-line mt-1 size-5 flex-shrink-0" />
+      <el-form-item label-width="0px" v-bind="nameAttrs" class="flex-grow-1 mb-0! mr-0!">
+        <div class="min-w-0 w-full flex gap-2">
+          <template v-if="isEdit">
+            <el-input v-model="nameValue" maxlength="200" show-word-limit />
+            <div>
+              <el-button
+                size="small"
+                circle
+                @click="handleClose"
+              >
+                <i class="i-ri:close-line size-4" />
+              </el-button>
+            </div>
+            <div>
+              <el-button
+                size="small"
+                circle
+                @click="isEdit = false"
+              >
+                <i class="i-ri:check-line size-4" />
+              </el-button>
+            </div>
+          </template>
+
+          <template v-else>
+            <p class="mt-1 flex-grow-1 break-all text-sm">
+              <span class="line-clamp-1">
+                {{ nameValue }}
+              </span>
+            </p>
+            <div class="line-clamp-1 flex-shrink-0">
+              {{ formatFileSize(item.file.size) }}
+            </div>
+            <div>
+              <el-button
+                size="small"
+                :disabled="!!item.error"
+                circle
+                @click="isEdit = true"
+              >
+                <i class="i-ri:edit-line size-4" />
+              </el-button>
+            </div>
+            <div>
+              <el-button
+                size="small"
+                circle
+                @click="$emit('remove')"
+              >
+                <i class="i-ri:delete-bin-2-line size-4" />
+              </el-button>
+            </div>
+          </template>
+        </div>
+        <el-text
+          v-if="!!item.error"
+          size="small"
+          type="danger"
+          class="leading-1px"
+        >
+          {{ item.error }}
+        </el-text>
+      </el-form-item>
+    </div>
+
+    <i v-if="item.error" class="i-ri:close-circle-line size-6 text-danger" />
+  </div>
+</template>

package/src/components/Asset/FormUploadAssetProgress.vue

@@ -0,0 +1,161 @@
+<script lang="ts" setup>
+interface FileUpload {
+  file: File
+  error: string | false
+  name: string
+  percentage: number
+  controller: AbortController
+  aborted: boolean
+  assetId: string
+}
+
+const props = defineProps<{
+  files: FileUpload[]
+}>()
+
+const isMinimized = ref(true)
+
+function toggleMinimize() {
+  isMinimized.value = !isMinimized.value
+}
+
+function getStatus(item: FileUpload) {
+  if (item.percentage === 100) {
+    return 'Completed'
+  }
+
+  if (item.aborted) {
+    return 'Canceled'
+  }
+
+  if (item.error) {
+    return 'Failed'
+  }
+
+  return 'Uploading'
+}
+const completedNum = computed(() => props.files.filter(item => item.percentage === 100).length)
+const fileNumber = computed(() => props.files.length)
+const totalSize = computed(() => props.files.reduce((acc, item) => acc + item.file.size, 0))
+
+const shortedFiles = computed(() => {
+  const files = [...props.files]
+
+  return files.sort((a, b) => {
+    if (a.error && !b.error) {
+      return -1
+    }
+    if (!a.error && b.error) {
+      return 1
+    }
+    return 0
+  })
+})
+
+const qc = useQueryClient()
+const deleteMutation = useMutation({
+  mutationFn: (id: string) => $libraryApi('api/library/assets/{id}', { pathParams: { id }, method: 'DELETE' }),
+  onSuccess: () => {
+    qc.invalidateQueries(['api/library/assets'])
+    qc.invalidateQueries(['/api/library/playlists'])
+  },
+})
+
+async function handleCancel(item: FileUpload) {
+  item.controller.abort()
+  item.aborted = true
+  await deleteMutation.mutateAsync(item.assetId)
+}
+</script>
+
+<template>
+  <div class="w-[calc(600px-13px-26px-13px-13px)]">
+    <div
+      class="flex items-center gap-2 px-2 py-3 text-sm"
+      :class="[
+        !isMinimized ? 'border-b-1px border-border' : '',
+      ]"
+    >
+      <button class="flex items-center" @click="toggleMinimize">
+        <div
+          class="size-5"
+          :class="[
+            isMinimized ? 'i-ri:arrow-up-s-line' : 'i-ri:arrow-down-s-line',
+          ]"
+        />
+      </button>
+
+      <div class="flex gap-4 font-bold">
+        <div>
+          {{ completedNum }} {{ $t('base_library.uploads_completed') }}
+        </div>
+        <div>
+          {{ fileNumber }} files, {{ formatFileSize(totalSize) }}
+        </div>
+      </div>
+    </div>
+
+    <div v-show="!isMinimized" class="max-h-500px of-x-hidden of-y-auto">
+      <template v-for="(item, index) in shortedFiles" :key="item.id">
+        <div class="grid grid-cols-5 items-center gap-4 border-b-1px border-border px-2 py-2">
+          <div class="col-span-2 min-w-0 flex items-center gap-2">
+            <div class="i-ri:file-2-line mt-1 size-5 flex-shrink-0" />
+
+            <p class="mt-1 flex-grow-1 truncate text-sm">
+              {{ item.name }}
+            </p>
+          </div>
+          <div class="justify-self-end">
+            {{ formatFileSize(item.file.size) }}
+          </div>
+
+          <div class="justify-self-center">
+            {{ getStatus(item) }}
+          </div>
+
+          <div class="flex items-center justify-self-end">
+            <template v-if="getStatus(item) === 'Uploading'">
+              <el-progress
+                :width="28"
+                :stroke-width="4"
+                type="circle"
+                :percentage="item.percentage"
+                status="success"
+              >
+                <div class="absolute inset-0 w-28px flex-center cursor-pointer" @click="handleCancel(item)">
+                  <div class="i-ri:close-line size-5" />
+                </div>
+              </el-progress>
+            </template>
+            <template v-else-if="getStatus(item) === 'Completed'">
+              <el-progress
+                :width="28"
+                :stroke-width="4"
+                type="circle"
+                :percentage="100"
+                status="success"
+              >
+                <div class="absolute inset-0 w-28px flex-center">
+                  <div class="i-ri:check-line size-5" />
+                </div>
+              </el-progress>
+            </template>
+            <template v-if="getStatus(item) === 'Canceled'">
+              <el-progress
+                :width="28"
+                :stroke-width="4"
+                type="circle"
+                :percentage="item.percentage"
+                status=""
+              >
+                <div class="absolute inset-0 w-28px flex-center">
+                  <div class="i-ri:close-line size-5" />
+                </div>
+              </el-progress>
+            </template>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>

package/src/components/Asset/Scrubber.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+const props = defineProps({
+  min: { type: Number, default: 0 },
+  max: { type: Number, default: 100 },
+  secondary: { type: Number, default: 0 },
+  modelValue: { type: Number, required: true },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const scrubber = ref()
+const scrubbing = ref(false)
+const pendingValue = ref(0)
+
+useEventListener('mouseup', () => (scrubbing.value = false))
+
+const value = useVModel(props, 'modelValue', emit)
+const { elementX, elementWidth } = useMouseInElement(scrubber)
+
+watch([scrubbing, elementX], () => {
+  const progress = Math.max(0, Math.min(1, elementX.value / elementWidth.value))
+  pendingValue.value = progress * props.max
+  if (scrubbing.value)
+    value.value = pendingValue.value
+})
+</script>
+
+<template>
+  <div
+    ref="scrubber"
+    class="relative h-2 cursor-pointer select-none rounded bg-black bg-opacity-20 dark:bg-white dark:bg-opacity-10"
+    @mousedown="scrubbing = true"
+  >
+    <div class="relative h-full w-full overflow-hidden rounded">
+      <div
+        class="absolute left-0 top-0 h-full w-full rounded bg-[#67c23a] opacity-30"
+        :style="{ transform: `translateX(${(secondary / max) * 100 - 100}%)` }"
+      />
+      <div
+        class="relative h-full w-full rounded bg-[#67c23a]"
+        :style="{
+          transform: `translateX(${(value / max) * 100 - 100}%)`,
+          backgroundColor: '#67c23a',
+        }"
+      />
+    </div>
+    <div
+      class="absolute inset-0 opacity-0 hover:opacity-100"
+      :class="{ '!opacity-100': scrubbing }"
+    >
+      <slot
+        :pending-value="pendingValue"
+        :position="`${Math.max(0, Math.min(elementX, elementWidth))}px`"
+      />
+    </div>
+  </div>
+</template>

package/src/components/Asset/VideoPlayer.vue

@@ -0,0 +1,226 @@
+<script lang="ts" setup>
+import Plyr from 'plyr'
+import 'plyr/dist/plyr.css'
+import { joinURL } from 'ufo'
+
+const props = defineProps<{
+  src: string
+  isHls?: boolean
+  isDash?: boolean
+  appId?: string
+  merchantId?: string
+  drm?: any
+  noProgress?: boolean
+
+  fullscreen?: boolean
+}>()
+
+const emits = defineEmits(['error'])
+const { src, isHls, isDash, drm, noProgress, fullscreen } = toRefs(props)
+
+const videoRef = ref()
+
+const config = useRuntimeConfig()
+
+const playerInstance = ref(null)
+
+function shakaOnError(error) {
+  console.error('Error code', error.code, 'object', error)
+  emits('error', { src: src.value })
+  if (playerInstance.value) {
+    playerInstance.value.detach()
+  }
+}
+
+onMounted(async () => {
+  function initPlyrPlayer() {
+    return new Plyr(videoRef.value, {
+      keyboard: { focused: false, global: false },
+      fullscreen: { enabled: fullscreen.value },
+      hideControls: false,
+      // 'captions',
+      controls: ['play-large', 'play', noProgress.value ? '' : 'progress', 'current-time', 'mute', 'volume', 'airplay', 'fullscreen'].filter(item => item),
+    })
+  }
+
+  function initSigmaPlayer() {
+    const sigmaPlayer = new window.SigmaManager()
+
+    sigmaPlayer.config = {
+      enableWorker: true,
+    }
+
+    sigmaPlayer.mediaElm = videoRef.value
+    sigmaPlayer.nativeClient = {
+      module: 'sigma_drm.js',
+      wasmBaseUrl: joinURL(`${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ''}`, config.app.baseURL, '/drm/'), // path to static file
+    }
+
+    sigmaPlayer.appInfo = {
+      browser: 'Google-Chrome',
+      merchantId: drm.value.enable ? drm.value?.merchantId : '',
+      appId: drm.value.enable ? drm.value?.appId : '',
+      sessionId: drm.value.enable ? drm.value?.sessionId : '',
+      userId: drm.value.enable ? drm.value?.userId : '',
+    }
+
+    sigmaPlayer.on('hlsError', (event) => {
+      console.log('[LOG] ~ event:', event)
+      console.log('[LOG] ~ hlsError:')
+
+      const ignoreErrors = ['bufferNudgeOnStall', 'bufferStalledError']
+      if (ignoreErrors.includes(event[1]?.details)) {
+        console.log('[LOG] ~ ignoreErrors:', event[1]?.details)
+      }
+      else {
+        emits('error', { src: src.value })
+      }
+    })
+
+    sigmaPlayer.loadSource(src.value, {
+      method: 'sigma',
+    })
+  }
+
+  const isMultiDrm = Boolean(drm.value?.enable && drm.value?.keyProvider === 'sigma-multi-drm')
+
+  if (isHls.value && !isMultiDrm) {
+    initPlyrPlayer()
+    const validDrm = Boolean(drm.value?.merchantId && drm.value?.appId && drm.value?.sessionId && drm.value?.userId)
+    if (!drm.value.enable) {
+      initSigmaPlayer()
+    }
+    else if (validDrm) {
+      console.log('[LOG] ~ validDrm:', validDrm)
+      initSigmaPlayer()
+    }
+  }
+  else if (isDash.value || isMultiDrm) {
+    initApp()
+    initPlyrPlayer()
+    function initApp() {
+    // Install built-in polyfills to patch browser incompatibilities.
+      window.shaka.polyfill.installAll()
+
+      // Check to see if the browser supports the basic APIs Shaka needs.
+      // This is an asynchronous check.
+      initPlayer()
+    }
+
+    function initPlayer() {
+    // Create a Player instance.
+      const video = videoRef.value
+      const player = new window.shaka.Player(video)
+
+      // Attach player to the window to make it easy to access in the JS console.
+      playerInstance.value = player
+
+      // Listen for error events.
+      player.addEventListener('error', onErrorEvent)
+
+      const servers = drm.value?.environment === 'production'
+        ? {
+            'com.widevine.alpha': 'https://license.sigmadrm.com/license/verify/widevine',
+            'com.microsoft.playready': 'https://license.sigmadrm.com/license/verify/playready',
+          }
+        : drm.value?.environment === 'staging'
+          ? {
+              'com.widevine.alpha': 'https://license-staging.sigmadrm.com/license/verify/widevine',
+              'com.microsoft.playready': 'https://license-staging.sigmadrm.com/license/verify/playready',
+            }
+          : {
+              'com.widevine.alpha': 'https://api-dev.sigmadrm.com/license/verify/widevine',
+              'com.microsoft.playready': 'https://api-dev.sigmadrm.com/license/verify/playready',
+            }
+
+      player.configure({
+        drm: { servers },
+      })
+
+      player.getNetworkingEngine().registerRequestFilter((type, request) => {
+        if (type == window.shaka.net.NetworkingEngine.RequestType.LICENSE) {
+          //   request.allowCrossSiteCredentials = true;
+          request.headers['Content-type'] = 'application/octet-stream'
+          request.headers['custom-data'] = btoa(
+            JSON.stringify({
+              userId: drm.value?.userId ?? '',
+              sessionId: drm.value?.sessionId ?? '',
+              merchantId: drm.value?.merchantId ?? '',
+              appId: drm.value?.appId ?? '',
+            }),
+          )
+        }
+      })
+      player
+        .getNetworkingEngine()
+        .registerResponseFilter((type, response) => {
+          // Alias some utilities provided by the library.
+          const StringUtils = window.shaka.util.StringUtils
+          const Uint8ArrayUtils = window.shaka.util.Uint8ArrayUtils
+
+          // Only manipulate license responses:
+          if (type == window.shaka.net.NetworkingEngine.RequestType.LICENSE) {
+            // This is the wrapped license, which is a JSON string.
+            try {
+              const wrappedString = StringUtils.fromUTF8(response.data)
+              // Parse the JSON string into an object.
+              const wrapped = JSON.parse(wrappedString)
+
+              // This is a base64-encoded version of the raw license.
+              const rawLicenseBase64 = wrapped.license
+              // Decode that base64 string into a Uint8Array and replace the response
+              // data.  The raw license will be fed to the Widevine CDM.
+              response.data = Uint8ArrayUtils.fromBase64(rawLicenseBase64)
+
+              console.log(wrapped)
+            }
+            catch (err) { }
+          }
+        })
+
+      // Try to load a manifest.
+      // This is an asynchronous process.
+      player.load(src.value).then(() => {
+      // This runs if the asynchronous load is successful.
+        console.log('The video has now been loaded!')
+      }).catch(onError) // onError is executed if the asynchronous load fails.
+    }
+
+    function onErrorEvent(event) {
+    // Extract the shaka.util.Error object from the event.
+      onError(event.detail)
+      console.error('Error code', error.code, 'object', error)
+      emits('error', { src: src.value })
+      if (playerInstance.value) {
+        playerInstance.value.detach()
+      }
+    }
+
+    function onError(error) {
+    // Log the error.
+      console.error('Error code', error.code, 'object', error)
+    }
+  }
+  else {
+    const player = initPlyrPlayer()
+    player.on('error', (event) => {
+      console.log('[LOG] ~ event:', event)
+      emits('error', { src: src.value })
+    })
+    videoRef.value.src = src.value
+  }
+})
+
+const loaded = ref(false)
+function onLoad() {
+  loaded.value = true
+}
+</script>
+
+<template>
+  <video
+    ref="videoRef"
+    controls
+    @load="onLoad"
+  />
+</template>

package/src/components/Asset/VideoPreview.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { VideoPlayer } from '@videojs-player/vue'
+import 'video.js/dist/video-js.css'
+import '@/utils/videojs'
+
+const props = defineProps<{
+  modelValue?: boolean
+  src: string
+  thumbnail?: string
+  vtt?: string
+}>()
+
+const { t } = useI18n()
+const visible = useVModel(props, 'modelValue')
+const _src = useVModel(props, 'src')
+
+const isPlaying = ref(false)
+function onPlaying() {
+  if (!isPlaying.value)
+    isPlaying.value = true
+}
+
+function handleClose(done: () => void) {
+  if (isPlaying.value) {
+    ElMessageBox.confirm(t('message.close'), t('message.confirm'))
+      .then(() => {
+        done()
+      })
+      .catch(() => {
+        // catch error
+      })
+  }
+  else { done() }
+}
+</script>
+
+<template>
+  <div>
+    <slot :on-click="() => (visible = true)" />
+    <el-dialog
+      v-if="visible" v-bind="$attrs" v-model="visible" width="80%"
+      :before-close="handleClose" destroy-on-close append-to-body align-center
+      class="min-w-1040px [&_.el-dialog\_\_body]:h-[calc(100%-55px)]"
+    >
+      <slot name="header" />
+      <div
+        class="mx-auto aspect-ratio-16/9 max-h-full flex items-center justify-center py-4"
+
+        :class="[$slots.footer ? 'max-w-80%' : 'max-w-full']"
+      >
+        <VideoPlayer
+          class="video-player h-full w-full rounded" :src="_src"
+          controls :not-supported-message="t('message.notSupportedMedia')" :plugins="{
+            vttThumbnails: {
+              src: vtt,
+            },
+          }" @playing="onPlaying"
+        />
+      </div>
+      <slot name="footer" />
+    </el-dialog>
+  </div>
+</template>
+
+<style lang="scss">
+.video-js .vjs-big-play-button {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.video-js {
+  // This class is added to the video.js element by the plugin by default.
+  &.vjs-vtt-thumbnails {
+    display: block;
+  }
+
+  .vjs-vtt-thumbnail-display {
+    position: absolute;
+    transition:
+      transform 0.1s,
+      opacity 0.2s;
+    bottom: 85%;
+    pointer-events: none;
+    box-shadow: 0 0 7px rgba(0, 0, 0, 0.6);
+  }
+}
+</style>
+
+<i18n lang="yaml">
+en:
+  message:
+    close: Are you sure you want to close this?
+    notSupportedMedia: No compatible source was found for this media
+    confirm: Confirm
+
+vi:
+  message:
+    close: Bạn có chắc chắn muốn đóng?
+    notSupportedMedia: Không có nguồn tương thích nào được tìm thấy cho phương tiện này
+    confirm: Xác nhận
+</i18n>