@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/Asset/VideoPlayer.vue

@@ -1,226 +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>
+<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

@@ -1,102 +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>
+<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>