@sigmaott/base-next 1.0.6

package/src/components/Asset/VideoPreviewConfigVod.vue

@@ -0,0 +1,287 @@
+<script lang="ts" setup>
+defineProps<{
+  typeOutput: string
+  nameOutput: string
+}>()
+
+const emit = defineEmits<{
+  reload: []
+}>()
+
+const { src, videoType, drm } = defineModels<{
+  src: string
+  drm: any
+  videoType: string
+}>()
+
+const params = reactive({
+  page: 1,
+  perPage: 10,
+  q: '',
+  sort: '',
+})
+
+const keyProviderValue = computed(() => drm.value?.keyProvider)
+
+const qFilter = useQueryParams(toRef(params, 'q'), {
+  $and: [{}, { provider: keyProviderValue.value === 'drmtoday' ? 'DRM_TODAY' : 'SIGMA' }],
+})
+
+const { data: drmOptions } = useQuery({
+  queryKey: ['/api/vod/drm-credentials', params, qFilter],
+  queryFn: () => $vodApi('/api/vod/drm-credentials', {
+    query: params,
+    method: 'GET',
+  }),
+  enabled: computed(() => !!qFilter.value.$and[1].provider),
+  refetchOnWindowFocus: false,
+})
+
+const drmCredentials = computed(() => {
+  return drmOptions.value?.data.find(item => item.id === drm.value.drmManagementId)?.name || ''
+})
+
+const { t: $t } = useI18n()
+
+function getInitialValues() {
+  return { ...drm.value }
+}
+
+const { formRef, formValue, handleSubmit, handleValidate, register } = useElForm({
+  initialValues: getInitialValues(),
+  async onSubmit(values) {
+    drm.value = values
+    nextTick(() => {
+      emit('reload')
+    })
+  },
+})
+
+function getProp(key: string) {
+  return key
+}
+const [merchantIdValue, merchantIdAttrs] = register<string>(getProp('merchantId'), [{
+  required: true,
+  message: $t('base.please_input_merchant_id'),
+}])
+
+const [appIdValue, appIdAttrs] = register<string>(getProp('appId'), [{
+  required: true,
+  message: $t('base.please_input_app_id'),
+}])
+
+const [sessionIdValue, sessionIdAttrs] = register<string>(getProp('sessionId'), [{
+  required: true,
+  message: $t('base.please_input_session_id'),
+}])
+
+const [userIdValue, userIdAttrs] = register<string>(getProp('userId'), [{
+  required: true,
+  message: $t('base.please_input_user_id'),
+}])
+</script>
+
+<template>
+  <div class="pb-4 pt-2">
+    <div v-if="typeOutput === 'hls-dash'" class="mx-auto w-80%">
+      <el-radio-group v-model="videoType" class="mb-2">
+        <el-radio-button label="hls">
+          Output: Hls
+        </el-radio-button>
+        <el-radio-button label="dash">
+          Output: Dash
+        </el-radio-button>
+      </el-radio-group>
+    </div>
+    <div class="flex items-center justify-center pt-2 text-base">
+      <div class="w-80% flex items-center gap-1">
+        <div class="i-ep:info-filled text-primary" />
+        <div class="font-semibold">
+          <div>
+            {{ $t('base.after_you_change_the_default_information_you_should_click_the_reload_to_reload_the_video') }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex items-start justify-center pt-4">
+      <div class="w-80% flex items-start gap-4">
+        <div class="flex flex-1 flex-col gap-2">
+          <div class="w-full flex items-center gap-1">
+            <label class="min-w-90px flex font-semibold">Link:</label>
+            <div class="w-full flex items-center gap-1">
+              <el-input
+                v-model="src"
+                :rows="2"
+                type="textarea"
+              />
+              <SSCopyButton :value="src" />
+            </div>
+          </div>
+        </div>
+        <el-button type="primary" @click="() => drm?.enable ? handleSubmit() : emit('reload')">
+          <template #icon>
+            <i class="i-ep:refresh" />
+          </template>
+          {{ $t('base.reload') }}
+        </el-button>
+      </div>
+    </div>
+
+    <div class="pt-4">
+      <div class="mx-auto w-80%">
+        <div class="grid grid-cols-3 items-center gap-6">
+          <div class="flex items-center gap-2">
+            <label class="font-semibold">Type output: </label>
+            <el-tag type="info" size="small">
+              {{ videoType }}
+            </el-tag>
+          </div>
+          <div class="flex items-center gap-2">
+            <label class="font-semibold">Name output: </label>
+            <span>
+              {{ nameOutput }}
+            </span>
+          </div>
+
+          <div class="flex items-center gap-2">
+            <label class="font-semibold">DRM: </label>
+            <span>
+              {{ drm?.enable ? 'on' : 'off' }}
+            </span>
+          </div>
+        </div>
+        <el-form
+          v-if="drm?.enable"
+          ref="formRef"
+          class="mt-4"
+          label-position="top"
+          label-width="80px"
+          :model="formValue"
+          :validate-on-rule-change="true"
+          @validate="handleValidate"
+        >
+          <div class="gap-2">
+            <label class="font-semibold">DRM Information</label>
+            <div v-if="drm.keyProvider === 'sigma-multi-drm' || drm.keyProvider === 'sigma-drm'" class="grid grid-cols-3 ml-4 mt-2 gap-2">
+              <SSField
+                label="Key provider:"
+                :value="drm.keyProvider"
+                type="text"
+                label-position="left"
+              />
+              <SSField
+                label="Asset ID:"
+                :value="drm.assetId"
+                type="text"
+                label-position="left"
+              />
+              <SSField
+                label="DRM Credentials:"
+                :value="drmCredentials"
+                type="text"
+                label-position="left"
+              />
+              <SSField
+                label="Environment:"
+                :value="drm.environment"
+                type="text"
+                label-position="left"
+              />
+
+              <el-form-item v-bind="merchantIdAttrs">
+                <template #label>
+                  <SSInformationLabel label="Merchant ID:" />
+                </template>
+                <el-input v-model="merchantIdValue" :placeholder="$t('base.enter_your_merchant_id')" />
+              </el-form-item>
+
+              <el-form-item v-bind="appIdAttrs">
+                <template #label>
+                  <SSInformationLabel label="App ID:" />
+                </template>
+                <el-input v-model="appIdValue" :placeholder="$t('base.enter_your_app_id')" />
+              </el-form-item>
+
+              <el-form-item v-bind="userIdAttrs">
+                <template #label>
+                  <SSInformationLabel label="User ID:" />
+                </template>
+                <el-input v-model="userIdValue" :placeholder="$t('base.enter_your_user_id')" />
+              </el-form-item>
+
+              <el-form-item v-bind="sessionIdAttrs">
+                <template #label>
+                  <SSInformationLabel label="Session ID:" />
+                </template>
+                <el-input v-model="sessionIdValue" :placeholder="$t('base.enter_your_session_id')" />
+              </el-form-item>
+            </div>
+
+            <div v-else-if="drm.keyProvider === 'static'" class="grid grid-cols-3 ml-4 mt-2 gap-2">
+              <SSField
+                label="Key provider:"
+                :value="drm.keyProvider"
+                type="text"
+                label-position="left"
+              />
+              <SSField
+                label="Key Uri:"
+                :value="drm.keyUri"
+                type="text"
+                label-position="left"
+              />
+            </div>
+
+            <div v-else-if="drm.keyProvider === 'drmtoday'" class="grid grid-cols-3 ml-4 mt-2 gap-2">
+              <SSField
+                label="Key provider:"
+                :value="drm.keyProvider"
+                type="text"
+                label-position="left"
+              />
+              <SSField
+                label="Asset ID:"
+                :value="drm.assetId"
+                type="text"
+                label-position="left"
+              />
+              <SSField
+                label="DRM Credentials:"
+                :value="drmCredentials"
+                type="text"
+                label-position="left"
+              />
+              <SSField
+                label="Environment:"
+                :value="drm.environment"
+                type="text"
+                label-position="left"
+              />
+            </div>
+
+            <div v-else-if="drm.keyProvider === 'cpix'" class="grid grid-cols-3 ml-4 mt-2 gap-2">
+              <SSField
+                label="Key provider:"
+                :value="drm.keyProvider"
+                type="text"
+                label-position="left"
+              />
+              <SSField
+                label="Endpoint:"
+                :value="drm.endpoint"
+                type="text"
+                label-position="left"
+              />
+              <SSField
+                label="Content ID:"
+                :value="drm.contentId"
+                type="text"
+                label-position="left"
+              />
+            </div>
+          </div>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/Asset/VideoPreviewNew.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue?: boolean
+  thumbnail?: string
+  vtt?: string
+  isHls?: boolean
+  isDash?: boolean
+  noHttps?: boolean
+  playMode?: string
+}>()
+
+const emits = defineEmits(['configRoute'])
+
+const src = defineModel<string>('src')
+const drm = defineModel<any>('drm')
+
+const errorLinkType = ref<string>('')
+function handleError(err: { src: string }) {
+  if (err.src?.startsWith('http://'))
+    errorLinkType.value = 'http'
+  else if (err.src?.startsWith('https://') && !props.noHttps)
+    errorLinkType.value = 'https'
+}
+
+function handleConfigRoute() {
+  emits('configRoute')
+}
+</script>
+
+<template>
+  <div>
+    <div class="relative mx-auto aspect-ratio-16/9 max-h-500px flex items-center justify-center py-4">
+      <SSAssetVideoPlayer
+        :key="src"
+        :src="src"
+        :is-dash="isDash"
+        :is-hls="isHls"
+        :drm="drm"
+        :no-progress="playMode !== 'catchup'"
+        @error="handleError"
+      />
+      <SSAssetVideoPreviewConfigMessage :error-link-type="errorLinkType" @click="handleConfigRoute" />
+    </div>
+    <slot />
+  </div>
+</template>
+
+<style>
+.plyr {
+  @apply w-full ! h-full ! inset-0 ! absolute !;
+}
+</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>

package/src/components/Asset/VideoPreviewNewLoader.vue

@@ -0,0 +1,144 @@
+<script lang="ts" setup>
+import { Edit, View as IconView } from '@element-plus/icons-vue'
+
+const props = defineProps<{
+  openMicroApp: (appId: string, micro: string, subPath: string) => void
+}>()
+
+const {
+  playVisible,
+  handlePlayback,
+  isLoaded,
+  isLoaded2,
+  channelId,
+  channelType,
+  channelName,
+  blackoutActive,
+  actions,
+  enableForensicWatermarkAB,
+  handleUpdateBlackoutMode,
+} = useJobPreview()
+
+// const { resetChannel, stopChannel, startChannel, switchBlackout } = useChannelActions()
+
+const isPlaying = ref(false)
+
+function onPlaying() {
+  if (!isPlaying.value)
+    isPlaying.value = true
+}
+
+const showPreview = ref(false)
+
+function handleShowPreview() {
+  showPreview.value = !showPreview.value
+}
+
+function handleClose(done: () => void) {
+  showPreview.value = false
+  if (isPlaying.value) {
+    ElMessageBox.confirm(t('message.close'), t('message.confirm'))
+      .then(() => {
+        done()
+      })
+      .catch(() => {
+        // catch error
+      })
+  }
+  else { done() }
+}
+</script>
+
+<template>
+  <el-dialog
+    v-if="playVisible && isLoaded && isLoaded2"
+    v-model="playVisible"
+    :width="showPreview ? '1600px' : '800px'"
+    :before-close="handleClose"
+    destroy-on-close
+    append-to-body
+    align-center
+    class=""
+    :close-on-click-modal="false"
+    :z-index="2000"
+  >
+    <template #header>
+      Playback video
+      <el-tag v-if="channelType === 'transcode' || channelType === 'event'" class="ml-2" :type="blackoutActive ? 'success' : 'danger'">
+        {{ blackoutActive ? 'Blackout ON' : 'Blackout OFF' }}
+      </el-tag>
+    </template>
+    <div class="flex items-end justify-between gap-2 pb-2">
+      <div class="flex items-center gap-2">
+        <div>
+          <el-dropdown>
+            <el-button type="default">
+              <template #icon>
+                <div class="i-ep:more" />
+              </template>
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu :show-timeout="100">
+                <el-dropdown-item
+                  class="flex justify-center"
+                  @click="actions.handleChannel({ id: channelId, name: channelName }, 'start')"
+                >
+                  <div class="w-full flex items-center gap-2">
+                    <div class="i-ep:switch-button" />
+                    {{ $t('Channel.start_channel') }}
+                  </div>
+                </el-dropdown-item>
+                <el-dropdown-item
+                  class="flex justify-around"
+                  @click="actions.handleChannel({ id: channelId, name: channelName }, 'stop')"
+                >
+                  <div class="w-full flex items-center gap-2">
+                    <div class="i-ep:video-pause" />
+                    {{ $t('Channel.stop_channel') }}
+                  </div>
+                </el-dropdown-item>
+                <el-dropdown-item
+                  class="flex justify-around"
+                  @click="actions.handleChannel({ id: channelId, name: channelName }, 'restart')"
+                >
+                  <div class="w-full flex items-center gap-2">
+                    <div class="i-ep:refresh" />
+                    {{ $t('Channel.restart_channel') }}
+                  </div>
+                </el-dropdown-item>
+                <el-dropdown-item
+                  v-if="channelType === 'transcode' || channelType === 'event'"
+                  class="flex justify-around"
+                  @click="actions.switchBlackout({ channelId, blackoutActive, channelName })"
+                >
+                  <div class="w-full flex items-center gap-2">
+                    <div class="i-ep:refresh" />
+                    {{ blackoutActive ? $t('Channel.turn_off_blackout') : $t('Channel.turn_on_blackout') }}
+                  </div>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+
+        <el-button type="default" @click="handleShowPreview">
+          <el-tooltip :content="showPreview ? 'Hide compare' : 'Compare'">
+            <div v-if="!showPreview" class="i-lucide:eye" />
+            <div v-else class="i-lucide:eye-off" />
+          </el-tooltip>
+        </el-button>
+      </div>
+      <el-link
+        v-if="enableForensicWatermarkAB"
+        type="primary"
+        href="https://techdocs.akamai.com/adaptive-media-delivery/docs/source-content-preprocessing#the-directory-prefix-ab-naming-method"
+        target="_blank"
+      >
+        A/B Forensic Watermark Output Integration <div class="i-carbon:launch mb-0.5 ml-1" />
+      </el-link>
+    </div>
+
+    <SSAssetVideoPreviewWrapper v-model:show="showPreview" />
+  </el-dialog>
+  <slot :playback="handlePlayback" :handle-update-blackout-mode />
+</template>