@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/Channel/TargetDrm.vue

@@ -1,518 +1,518 @@
-<script setup lang="ts">
-import type { FormRules } from 'element-plus'
-import { get, set, unset } from 'lodash-unified'
-import isUUID from 'validator/es/lib/isUUID'
-import { v4 as uuidv4 } from 'uuid'
-import { QueryKeys } from '@/enums'
-
-const { prop, format } = definePropsRefs<{
-  prop: string
-  format?: string
-}>()
-const { t } = useI18n()
-
-function getProp(key: string) {
-  return () => `${prop.value}.${key}`
-}
-
-const isPlayout = ref(inject('isPlayout'))
-const drmDtoFilterEnum = [
-  'static',
-  'sigma-drm-v1',
-  'sigma-drm',
-  'sigma-multi-drm',
-  'drmtoday',
-  'cpix',
-]
-const rules = reactive<FormRules>({
-  enable: [
-    {
-      required: true,
-      trigger: ['blur', 'change'],
-    },
-  ],
-  keyProvider: [
-    {
-      required: true,
-      trigger: ['blur', 'change'],
-    },
-  ],
-  drmManagementId: [
-    {
-      required: true,
-      message: t('SSConfig.form.validate.requrieDrm'),
-      trigger: ['blur', 'change'],
-    },
-  ],
-  assetId: [
-    {
-      required: true,
-      message: t('SSConfig.assetId'),
-      trigger: ['blur', 'change'],
-    },
-  ],
-  key: [],
-  keyId: [],
-  keyUri: [],
-  keyRotationTime: [
-    {
-      required: true,
-      message: t('SSConfig.form.validate.require'),
-      trigger: ['blur', 'change'],
-    },
-  ],
-})
-const { schemaObj } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'DrmDto')
-
-const [enableValue, enableAttrs] = useElField<boolean>(getProp('enable'), [])
-const [multiKeyValue, multiKeyAttrs] = useElField<boolean>(getProp('multiKey'), [], { enabled: enableValue })
-const [keyProviderValue, keyProviderAttrs] = useElField<string>(getProp('keyProvider'), rules.keyProviderValue, { enabled: enableValue })
-const [drmManagementIdValue, drmManagementIdAttrs] = useElField<string>(getProp('drmManagementId'), rules.drmManagementId, { enabled: enableValue })
-const [assetIdValue, assetIdAttrs] = useElField<string>(getProp('assetId'), rules.assetId, { enabled: enableValue })
-const [keyValue, keyAttrs] = useElField<string>(getProp('key'), [
-  {
-    required: true,
-    trigger: ['blur'],
-    validator: (rule, value, callback) => {
-      if (!value || value?.length === 0)
-        callback(new Error(t('SSConfig.form.validate.requiredKey')))
-      else
-        callback()
-    },
-  },
-], { enabled: enableValue })
-const [keyIdValue, keyIdAttrs] = useElField<string>(getProp('keyId'), [
-  {
-    required: true,
-    trigger: ['blur', 'change'],
-    validator: (rule, value, callback) => {
-      if (!value)
-        callback(new Error(t('SSConfig.form.validate.requiredKeyId')))
-      else if (!isUUID(value, 4))
-        callback(new Error(t('SSConfig.form.validate.formatUUID', { field: 'KeyId' })))
-      else
-        callback()
-    },
-  },
-], { enabled: enableValue })
-const [keyUriValue, keyUriAttrs] = useElField<string>(getProp('keyUri'), [
-  {
-    required: true,
-    trigger: ['blur'],
-    validator: (rule, value, callback) => {
-      if (!value)
-        callback(new Error(t('SSConfig.form.validate.requiredKeyUri')))
-      else
-        callback()
-    },
-  },
-], { enabled: enableValue })
-const [keyRotationTimeValue, keyRotationTimeAttrs] = useElField<number>(getProp('keyRotationTime'), [], { enabled: enableValue })
-const [filterValue, filterAttrs] = useElField<string>(getProp('filter'), [], { enabled: enableValue })
-const [endpointValue, endpointAttrs] = useElField<string>(getProp('endpoint'), [
-  {
-    required: true,
-    trigger: ['blur', 'change'],
-    validator: (rule, value, callback) => {
-      if (!value)
-        callback(new Error(t('SSConfig.form.validate.requiredEndpoint')))
-      else if (!isProtocolURLValid(value, 'http(s)'))
-        callback(new Error($t('SSConfig.form.validate.requiredUriKeyIdTranscode')))
-      else
-        callback()
-    },
-  },
-], { enabled: enableValue })
-const [contentIdValue, contentIdAttrs] = useElField<string>(getProp('contentId'), [
-  {
-    required: true,
-    trigger: ['blur', 'change'],
-    validator: (rule, value, callback) => {
-      if (!value)
-        callback(new Error(t('SSConfig.form.validate.requiredContentId')))
-      else if (!/^[\w-]*$/.test(value))
-        callback(new Error(t('SSConfig.form.validate.formatContentId')))
-      else
-        callback()
-    },
-  },
-], { enabled: enableValue })
-const [drmSystemValue, drmSystemIdAttrs] = useElField<string[]>(getProp('systems'), [
-  {
-    required: true,
-    trigger: ['blur', 'change'],
-    validator: (rule, value, callback) => {
-      if (!value.length)
-        callback(new Error(t('SSConfig.form.validate.requiredDrmSystem')))
-      else
-        callback()
-    },
-  },
-], { enabled: enableValue })
-const [headersValue, headersAttrs, { remove, add }] = useElFieldArray<Array<{ key: string, value: string }>>(getProp('headers'), [], { enabled: enableValue })
-const [environmentValue, environmentAttrs] = useElField<string>(getProp('environment'), [
-  {
-    required: true,
-    trigger: ['blur', 'change'],
-    validator: (rule, value, callback) => {
-      if (!value)
-        callback(new Error(t('SSConfig.form.validate.requiredEnvironment')))
-      else
-        callback()
-    },
-  },
-], { enabled: enableValue })
-
-watch(() => keyProviderValue.value, () => {
-  if (keyProviderValue.value === 'cpix') {
-    drmSystemValue.value = ['widevine', 'playready', 'fairplay']
-    if (!headersValue.value?.length)
-      add()
-  }
-})
-
-function handleDeleteHeader(id: any) {
-  remove(id)
-}
-
-const isStaticKeyProvider = computed(() => {
-  return keyProviderValue.value === 'static'
-})
-const isSigmaDrmMultlProvider = computed(() => {
-  return keyProviderValue.value === 'sigma-multi-drm'
-})
-const isDrmToday = computed(() => {
-  return keyProviderValue.value === 'drmtoday'
-})
-const isSigmaDrm = computed(() => {
-  return keyProviderValue.value === 'sigma-drm'
-})
-const isDrmCpix = computed(() => {
-  return keyProviderValue.value === 'cpix'
-})
-const optionKeyProviders = computed(() => {
-  return format.value === 'udp'
-    ? ['sigma-drm']
-    : ['static', 'sigma-drm-v1', 'sigma-drm', 'sigma-multi-drm', 'drmtoday', 'cpix']
-})
-const params = reactive({
-  page: 1,
-  perPage: 10,
-  q: '',
-  sort: '',
-})
-const qFilter = useQueryParams(toRef(params, 'q'), {
-  $and: [{}, { provider: keyProviderValue.value === 'drmtoday' ? 'DRM_TODAY' : 'SIGMA' }],
-})
-
-const keyPlayout = computed(() => {
-  return isPlayout.value ? 'playout' : 'transcode'
-})
-
-const { data: drmOptions, refetch, isFetching } = useQuery({
-  queryKey: [`/api/${keyPlayout.value}/drm-credentials`, params, qFilter],
-  queryFn: () => isPlayout.value
-    ? $playoutApi('/api/playout/drm-credentials', params, { params: { provider: qFilter.value.$and[1].provider } })
-    : $transcodeApi('/api/transcode/drm-credentials', params, { params: { provider: qFilter.value.$and[1].provider } }),
-  enabled: computed(() => !!qFilter.value.$and[1].provider),
-  refetchOnWindowFocus: false,
-  onSuccess: (data) => {
-    if (drmManagementIdValue.value && !data?.data?.find(item => item.id === drmManagementIdValue.value))
-      drmManagementIdValue.value = ''
-  },
-})
-
-const { formErrors } = useElFormContext()
-
-watch(() => isDrmToday.value, (val) => {
-  qFilter.value.$and[1].provider = val ? 'DRM_TODAY' : 'SIGMA'
-  if (drmManagementIdValue.value)
-    drmManagementIdValue.value = ''
-})
-const { microProps } = useMicroProps()
-function addDRM() {
-  microProps.value.openMicroApp('product/transcode', 'transcode', `/templates/drm?mode=create&type=${qFilter.value.$and[1].provider}`)
-}
-
-watch(keyProviderValue, () => {
-  set(formErrors.value, prop.value, {})
-})
-
-function remoteMethod(query: string) {
-  const newQ = klona({ ...qFilter.value })
-  if (query)
-    newQ.$and[0].name = { $regex: query, $options: 'i' }
-
-  else
-    newQ.$and[0].name = undefined
-
-  qFilter.value = newQ
-}
-function genUuidAuto() {
-  keyIdValue.value = uuidv4()
-}
-</script>
-
-<template>
-  <div>
-    <el-row :gutter="5">
-      <el-col :span="12">
-        <el-form-item :label="t('SSConfig.form.label.enable')" v-bind="enableAttrs" :required="enableValue">
-          <template #label>
-            <SSInformationLabel :label="t('SSConfig.form.label.enable')" :info="schemaObj.enable" />
-          </template>
-          <el-switch v-model="enableValue" :active-value="true" :inactive-value="false" />
-        </el-form-item>
-      </el-col>
-
-      <el-col :span="12">
-        <el-form-item label="Key provider" v-bind="keyProviderAttrs">
-          <template #label>
-            <SSInformationLabel label="Key provider" :info="schemaObj.keyProvider" />
-          </template>
-          <el-select v-model="keyProviderValue" default-first-option :disabled="!enableValue">
-            <el-option v-for="(item, idx) in optionKeyProviders" :key="idx" :value="item" :label="item" />
-          </el-select>
-        </el-form-item>
-      </el-col>
-    </el-row>
-
-    <el-row v-if="isStaticKeyProvider" :gutter="5">
-      <el-col :span="8">
-        <el-form-item :label="t('SSConfig.form.label.key')" v-bind="keyAttrs">
-          <template #label>
-            <SSInformationLabel :label="t('SSConfig.form.label.key')" :info="schemaObj.key" />
-          </template>
-          <el-input
-            v-model="keyValue" :placeholder="t('SSConfig.form.label.key')" maxlength="1000" show-word-limit
-            :disabled="!enableValue"
-          />
-        </el-form-item>
-      </el-col>
-      <el-col :span="8">
-        <el-form-item :label="`${t('SSConfig.form.label.key')} ID`" v-bind="keyIdAttrs">
-          <template #label>
-            <SSInformationLabel :label="`${t('SSConfig.form.label.key')} ID`" :info="schemaObj.keyId" />
-          </template>
-          <div class="w-full flex gap-1">
-            <el-input
-              v-model="keyIdValue" :placeholder="t('SSConfig.form.label.key_placeholder')"
-              :disabled="!enableValue"
-            />
-            <el-button @click="genUuidAuto">
-              <template #icon>
-                <div class="i-carbon:arrows-horizontal" />
-              </template>
-            </el-button>
-          </div>
-        </el-form-item>
-      </el-col>
-      <el-col :span="8">
-        <el-form-item :label="`${t('SSConfig.form.label.key')} URI`" v-bind="keyUriAttrs">
-          <template #label>
-            <SSInformationLabel :label="`${t('SSConfig.form.label.key')} URI`" :info="schemaObj.keyUri" />
-          </template>
-          <el-input
-            v-model="keyUriValue" :placeholder="`${t('SSConfig.form.label.key')} URI`" maxlength="2048"
-            show-word-limit :disabled="!enableValue"
-          />
-        </el-form-item>
-      </el-col>
-    </el-row>
-
-    <el-row v-if="!isStaticKeyProvider && !isDrmCpix" :gutter="5">
-      <el-col :span="(isSigmaDrm || isDrmToday) ? 6 : 12">
-        <el-form-item label="Asset ID" v-bind="assetIdAttrs">
-          <template #label>
-            <SSInformationLabel label="Asset ID" :info="schemaObj.assetId" />
-          </template>
-          <el-input
-            v-model="assetIdValue" placeholder="Asset ID" :minlength="1" maxlength="100" show-word-limit
-            :disabled="!enableValue"
-          />
-        </el-form-item>
-      </el-col>
-      <el-col v-if="isSigmaDrm || isDrmToday || isSigmaDrmMultlProvider" :span="isSigmaDrmMultlProvider ? 12 : 6">
-        <el-form-item label="Environment" v-bind="environmentAttrs">
-          <template #label>
-            <SSInformationLabel label="Environment" :info="schemaObj.environment" />
-          </template>
-          <el-select v-model="environmentValue" class="w-full" default-first-option :disabled="!enableValue">
-            <el-option
-              v-for="(item, idx) in ['test', 'staging', 'production']" :key="idx" :value="item"
-              :label="uppercaseFirst(item)"
-            />
-          </el-select>
-        </el-form-item>
-      </el-col>
-
-      <el-col v-if="!isDrmCpix" :span="12">
-        <el-form-item :label="t('SSconfig.drm.title')" v-bind="drmManagementIdAttrs">
-          <template #label>
-            <SSInformationLabel :label="t('SSconfig.drm.title')" :info="schemaObj.drmManagementId" />
-          </template>
-          <div class="w-full flex gap-1">
-            <el-select
-              v-model="drmManagementIdValue" :placeholder="t('SSConfig.placeholder.selectDrm')"
-              class="w-full" :disabled="!enableValue" filterable remote reserve-keyword remote-show-suffix
-              :remote-method="remoteMethod" :loading="isFetching" :clearable="true"
-              popper-class="[&_.el-select-group\_\_title]:(font-bold text-base text-truncate)"
-            >
-              <el-option-group v-for="group in drmOptions?.data || []" :key="group.name" :label="group.name">
-                <el-option :key="group.id" :value="group.id" :label="group.name" class="h-auto">
-                  <div>
-                    <div class="leading-normal">
-                      MerchantID: {{ group?.data?.merchantId }}
-                    </div>
-                    <div v-if="!isDrmToday" class="leading-normal">
-                      AppID: {{ group?.data?.appId }}
-                    </div>
-                    <div v-if="!isDrmToday" class="leading-normal">
-                      Email: {{ group?.data?.email }}
-                    </div>
-                    <div v-if="isDrmToday" class="leading-normal">
-                      {{ t('SSConfig.label.username') }}: {{ group?.data?.username }}
-                    </div>
-                  </div>
-                </el-option>
-              </el-option-group>
-              <template #empty>
-                <div class="m-2 flex items-center justify-between gap-2">
-                  <div class="text-sm">
-                    {{ t('SSConfig.message.noData') }}
-                  </div>
-                  <el-button @click="addDRM()">
-                    <template #icon>
-                      <div class="i-ep:plus" />
-                    </template>
-                    {{ t('Actions.add') }}
-                  </el-button>
-                </div>
-              </template>
-            </el-select>
-
-            <el-button @click="refetch()">
-              <div class="i-carbon:renew" :class="{ 'animate-spin': isFetching }" />
-            </el-button>
-          </div>
-        </el-form-item>
-      </el-col>
-      <el-col v-if="isSigmaDrmMultlProvider && !isDrmToday" :span="12">
-        <el-form-item label="Filter" v-bind="filterAttrs">
-          <template #label>
-            <SSInformationLabel :label="t('SSConfig.form.label.filter')" :info="schemaObj.filter" />
-          </template>
-          <el-select
-            v-model="filterValue" class="w-full" default-first-option clearable multiple
-            :disabled="!enableValue"
-          >
-            <el-option v-for="(item, idx) in drmDtoFilterEnum" :key="idx" :value="item" :label="item" />
-          </el-select>
-        </el-form-item>
-      </el-col>
-    </el-row>
-    <el-row :gutter="10">
-      <!-- <el-col v-if="isSigmaDrmMultlProvider || isDrmToday" :span="12">
-        <el-form-item
-          label="Key Rotation Time"
-          v-bind="keyRotationTimeAttrs"
-          class="w-full"
-        >
-          <template #label>
-            <SSInformationLabel label="Key Rotation Time" :info="schemaObj.keyRotationTime" />
-          </template>
-          <el-input-number
-            v-model="keyRotationTimeValue"
-            placeholder="Key Rotation Time"
-            :min="1"
-            :max="43200"
-            :step="0.1"
-            :precision="1"
-            class="w-full"
-          />
-        </el-form-item>
-      </el-col> -->
-    </el-row>
-    <el-row v-if="isDrmCpix" :gutter="5">
-      <el-col :span="24">
-        <el-form-item :label="t('SSConfig.form.label.endpoint')" v-bind="endpointAttrs">
-          <template #label>
-            <SSInformationLabel :label="t('SSConfig.form.label.endpoint')" :info="schemaObj.endpoint" />
-          </template>
-          <el-input
-            v-model="endpointValue" :placeholder="t('SSConfig.form.label.placeholder_endpoint')" maxlength="2048"
-            show-word-limit :disabled="!enableValue"
-          />
-        </el-form-item>
-      </el-col>
-      <el-col :span="24">
-        <div class="flex gap-8">
-          <div class="flex-1">
-            <el-form-item :label="`${t('SSConfig.form.label.key')} ID`" v-bind="keyIdAttrs">
-              <template #label>
-                <SSInformationLabel :label="`${t('SSConfig.form.label.key')} ID`" :info="schemaObj.keyId" />
-              </template>
-              <div class="w-full flex gap-1">
-                <el-input
-                  v-model="keyIdValue" :placeholder="t('SSConfig.form.label.key_placeholder')"
-                  :disabled="!enableValue"
-                />
-                <el-button @click="genUuidAuto">
-                  <template #icon>
-                    <div class="i-carbon:arrows-horizontal" />
-                  </template>
-                </el-button>
-              </div>
-            </el-form-item>
-            <el-form-item :label="`${t('SSConfig.form.label.content')} ID`" v-bind="contentIdAttrs">
-              <template #label>
-                <SSInformationLabel :label="`${t('SSConfig.form.label.content')} ID`" :info="schemaObj.contentId" />
-              </template>
-              <el-input
-                v-model="contentIdValue" :placeholder="`${t('SSConfig.form.label.content')} ID`" :maxlength="64"
-                show-word-limit :disabled="!enableValue"
-              />
-            </el-form-item>
-            <el-form-item :label="t('SSConfig.form.label.DrmSystem')" v-bind="drmSystemIdAttrs">
-              <template #label>
-                <SSInformationLabel :label="t('SSConfig.form.label.DrmSystem')" :info="schemaObj.systems" />
-              </template>
-              <el-select
-                v-model="drmSystemValue" class="w-full" default-first-option clearable multiple
-                :disabled="!enableValue" :placeholder="t('SSConfig.form.label.DrmSystem')"
-              >
-                <el-option v-for="(item, idx) in drmDtoFilterEnum" :key="idx" :value="item" :label="item" />
-              </el-select>
-            </el-form-item>
-          </div>
-          <div class="flex-1">
-            <el-form-item :label="t('SSConfig.form.label.Header')" v-bind="headersAttrs">
-              <template #label>
-                <SSInformationLabel :label="t('SSConfig.form.label.Header')" :info="schemaObj.headers" />
-                <el-button v-if="headersValue?.length < 10" class="ml-4" type="primary" size="small" @click="add">
-                  {{ t('Actions.add') }}
-                </el-button>
-              </template>
-              <div class="w-full">
-                <div v-if="headersValue?.length > 0" class="flex gap-8">
-                  <div class="w-40%">
-                    Key <span class="text-error">*</span>
-                  </div>
-                  <div class="w-60%">
-                    Value <span class="text-error">*</span>
-                  </div>
-                </div>
-                <div v-for="(item, idx) in (headersValue || [])" :key="item?._id" class="flex gap-8 pb-2">
-                  <SSChannelHeaderItem
-                    v-model:disabled="enableValue" :prop="prop" :index="idx"
-                    @delete="handleDeleteHeader(item?._id)"
-                  />
-                </div>
-              </div>
-            </el-form-item>
-          </div>
-        </div>
-      </el-col>
-    </el-row>
-  </div>
-</template>
+<script setup lang="ts">
+import type { FormRules } from 'element-plus'
+import { get, set, unset } from 'lodash-unified'
+import isUUID from 'validator/es/lib/isUUID'
+import { v4 as uuidv4 } from 'uuid'
+import { QueryKeys } from '@/enums'
+
+const { prop, format } = definePropsRefs<{
+  prop: string
+  format?: string
+}>()
+const { t } = useI18n()
+
+function getProp(key: string) {
+  return () => `${prop.value}.${key}`
+}
+
+const isPlayout = ref(inject('isPlayout'))
+const drmDtoFilterEnum = [
+  'static',
+  'sigma-drm-v1',
+  'sigma-drm',
+  'sigma-multi-drm',
+  'drmtoday',
+  'cpix',
+]
+const rules = reactive<FormRules>({
+  enable: [
+    {
+      required: true,
+      trigger: ['blur', 'change'],
+    },
+  ],
+  keyProvider: [
+    {
+      required: true,
+      trigger: ['blur', 'change'],
+    },
+  ],
+  drmManagementId: [
+    {
+      required: true,
+      message: t('SSConfig.form.validate.requrieDrm'),
+      trigger: ['blur', 'change'],
+    },
+  ],
+  assetId: [
+    {
+      required: true,
+      message: t('SSConfig.assetId'),
+      trigger: ['blur', 'change'],
+    },
+  ],
+  key: [],
+  keyId: [],
+  keyUri: [],
+  keyRotationTime: [
+    {
+      required: true,
+      message: t('SSConfig.form.validate.require'),
+      trigger: ['blur', 'change'],
+    },
+  ],
+})
+const { schemaObj } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'DrmDto')
+
+const [enableValue, enableAttrs] = useElField<boolean>(getProp('enable'), [])
+const [multiKeyValue, multiKeyAttrs] = useElField<boolean>(getProp('multiKey'), [], { enabled: enableValue })
+const [keyProviderValue, keyProviderAttrs] = useElField<string>(getProp('keyProvider'), rules.keyProviderValue, { enabled: enableValue })
+const [drmManagementIdValue, drmManagementIdAttrs] = useElField<string>(getProp('drmManagementId'), rules.drmManagementId, { enabled: enableValue })
+const [assetIdValue, assetIdAttrs] = useElField<string>(getProp('assetId'), rules.assetId, { enabled: enableValue })
+const [keyValue, keyAttrs] = useElField<string>(getProp('key'), [
+  {
+    required: true,
+    trigger: ['blur'],
+    validator: (rule, value, callback) => {
+      if (!value || value?.length === 0)
+        callback(new Error(t('SSConfig.form.validate.requiredKey')))
+      else
+        callback()
+    },
+  },
+], { enabled: enableValue })
+const [keyIdValue, keyIdAttrs] = useElField<string>(getProp('keyId'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (!value)
+        callback(new Error(t('SSConfig.form.validate.requiredKeyId')))
+      else if (!isUUID(value, 4))
+        callback(new Error(t('SSConfig.form.validate.formatUUID', { field: 'KeyId' })))
+      else
+        callback()
+    },
+  },
+], { enabled: enableValue })
+const [keyUriValue, keyUriAttrs] = useElField<string>(getProp('keyUri'), [
+  {
+    required: true,
+    trigger: ['blur'],
+    validator: (rule, value, callback) => {
+      if (!value)
+        callback(new Error(t('SSConfig.form.validate.requiredKeyUri')))
+      else
+        callback()
+    },
+  },
+], { enabled: enableValue })
+const [keyRotationTimeValue, keyRotationTimeAttrs] = useElField<number>(getProp('keyRotationTime'), [], { enabled: enableValue })
+const [filterValue, filterAttrs] = useElField<string>(getProp('filter'), [], { enabled: enableValue })
+const [endpointValue, endpointAttrs] = useElField<string>(getProp('endpoint'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (!value)
+        callback(new Error(t('SSConfig.form.validate.requiredEndpoint')))
+      else if (!isProtocolURLValid(value, 'http(s)'))
+        callback(new Error($t('SSConfig.form.validate.requiredUriKeyIdTranscode')))
+      else
+        callback()
+    },
+  },
+], { enabled: enableValue })
+const [contentIdValue, contentIdAttrs] = useElField<string>(getProp('contentId'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (!value)
+        callback(new Error(t('SSConfig.form.validate.requiredContentId')))
+      else if (!/^[\w-]*$/.test(value))
+        callback(new Error(t('SSConfig.form.validate.formatContentId')))
+      else
+        callback()
+    },
+  },
+], { enabled: enableValue })
+const [drmSystemValue, drmSystemIdAttrs] = useElField<string[]>(getProp('systems'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (!value.length)
+        callback(new Error(t('SSConfig.form.validate.requiredDrmSystem')))
+      else
+        callback()
+    },
+  },
+], { enabled: enableValue })
+const [headersValue, headersAttrs, { remove, add }] = useElFieldArray<Array<{ key: string, value: string }>>(getProp('headers'), [], { enabled: enableValue })
+const [environmentValue, environmentAttrs] = useElField<string>(getProp('environment'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (!value)
+        callback(new Error(t('SSConfig.form.validate.requiredEnvironment')))
+      else
+        callback()
+    },
+  },
+], { enabled: enableValue })
+
+watch(() => keyProviderValue.value, () => {
+  if (keyProviderValue.value === 'cpix') {
+    drmSystemValue.value = ['widevine', 'playready', 'fairplay']
+    if (!headersValue.value?.length)
+      add()
+  }
+})
+
+function handleDeleteHeader(id: any) {
+  remove(id)
+}
+
+const isStaticKeyProvider = computed(() => {
+  return keyProviderValue.value === 'static'
+})
+const isSigmaDrmMultlProvider = computed(() => {
+  return keyProviderValue.value === 'sigma-multi-drm'
+})
+const isDrmToday = computed(() => {
+  return keyProviderValue.value === 'drmtoday'
+})
+const isSigmaDrm = computed(() => {
+  return keyProviderValue.value === 'sigma-drm'
+})
+const isDrmCpix = computed(() => {
+  return keyProviderValue.value === 'cpix'
+})
+const optionKeyProviders = computed(() => {
+  return format.value === 'udp'
+    ? ['sigma-drm']
+    : ['static', 'sigma-drm-v1', 'sigma-drm', 'sigma-multi-drm', 'drmtoday', 'cpix']
+})
+const params = reactive({
+  page: 1,
+  perPage: 10,
+  q: '',
+  sort: '',
+})
+const qFilter = useQueryParams(toRef(params, 'q'), {
+  $and: [{}, { provider: keyProviderValue.value === 'drmtoday' ? 'DRM_TODAY' : 'SIGMA' }],
+})
+
+const keyPlayout = computed(() => {
+  return isPlayout.value ? 'playout' : 'transcode'
+})
+
+const { data: drmOptions, refetch, isFetching } = useQuery({
+  queryKey: [`/api/${keyPlayout.value}/drm-credentials`, params, qFilter],
+  queryFn: () => isPlayout.value
+    ? $playoutApi('/api/playout/drm-credentials', params, { params: { provider: qFilter.value.$and[1].provider } })
+    : $transcodeApi('/api/transcode/drm-credentials', params, { params: { provider: qFilter.value.$and[1].provider } }),
+  enabled: computed(() => !!qFilter.value.$and[1].provider),
+  refetchOnWindowFocus: false,
+  onSuccess: (data) => {
+    if (drmManagementIdValue.value && !data?.data?.find(item => item.id === drmManagementIdValue.value))
+      drmManagementIdValue.value = ''
+  },
+})
+
+const { formErrors } = useElFormContext()
+
+watch(() => isDrmToday.value, (val) => {
+  qFilter.value.$and[1].provider = val ? 'DRM_TODAY' : 'SIGMA'
+  if (drmManagementIdValue.value)
+    drmManagementIdValue.value = ''
+})
+const { microProps } = useMicroProps()
+function addDRM() {
+  microProps.value.openMicroApp('product/transcode', 'transcode', `/templates/drm?mode=create&type=${qFilter.value.$and[1].provider}`)
+}
+
+watch(keyProviderValue, () => {
+  set(formErrors.value, prop.value, {})
+})
+
+function remoteMethod(query: string) {
+  const newQ = klona({ ...qFilter.value })
+  if (query)
+    newQ.$and[0].name = { $regex: query, $options: 'i' }
+
+  else
+    newQ.$and[0].name = undefined
+
+  qFilter.value = newQ
+}
+function genUuidAuto() {
+  keyIdValue.value = uuidv4()
+}
+</script>
+
+<template>
+  <div>
+    <el-row :gutter="5">
+      <el-col :span="12">
+        <el-form-item :label="t('SSConfig.form.label.enable')" v-bind="enableAttrs" :required="enableValue">
+          <template #label>
+            <SSInformationLabel :label="t('SSConfig.form.label.enable')" :info="schemaObj.enable" />
+          </template>
+          <el-switch v-model="enableValue" :active-value="true" :inactive-value="false" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item label="Key provider" v-bind="keyProviderAttrs">
+          <template #label>
+            <SSInformationLabel label="Key provider" :info="schemaObj.keyProvider" />
+          </template>
+          <el-select v-model="keyProviderValue" default-first-option :disabled="!enableValue">
+            <el-option v-for="(item, idx) in optionKeyProviders" :key="idx" :value="item" :label="item" />
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row v-if="isStaticKeyProvider" :gutter="5">
+      <el-col :span="8">
+        <el-form-item :label="t('SSConfig.form.label.key')" v-bind="keyAttrs">
+          <template #label>
+            <SSInformationLabel :label="t('SSConfig.form.label.key')" :info="schemaObj.key" />
+          </template>
+          <el-input
+            v-model="keyValue" :placeholder="t('SSConfig.form.label.key')" maxlength="1000" show-word-limit
+            :disabled="!enableValue"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="8">
+        <el-form-item :label="`${t('SSConfig.form.label.key')} ID`" v-bind="keyIdAttrs">
+          <template #label>
+            <SSInformationLabel :label="`${t('SSConfig.form.label.key')} ID`" :info="schemaObj.keyId" />
+          </template>
+          <div class="w-full flex gap-1">
+            <el-input
+              v-model="keyIdValue" :placeholder="t('SSConfig.form.label.key_placeholder')"
+              :disabled="!enableValue"
+            />
+            <el-button @click="genUuidAuto">
+              <template #icon>
+                <div class="i-carbon:arrows-horizontal" />
+              </template>
+            </el-button>
+          </div>
+        </el-form-item>
+      </el-col>
+      <el-col :span="8">
+        <el-form-item :label="`${t('SSConfig.form.label.key')} URI`" v-bind="keyUriAttrs">
+          <template #label>
+            <SSInformationLabel :label="`${t('SSConfig.form.label.key')} URI`" :info="schemaObj.keyUri" />
+          </template>
+          <el-input
+            v-model="keyUriValue" :placeholder="`${t('SSConfig.form.label.key')} URI`" maxlength="2048"
+            show-word-limit :disabled="!enableValue"
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row v-if="!isStaticKeyProvider && !isDrmCpix" :gutter="5">
+      <el-col :span="(isSigmaDrm || isDrmToday) ? 6 : 12">
+        <el-form-item label="Asset ID" v-bind="assetIdAttrs">
+          <template #label>
+            <SSInformationLabel label="Asset ID" :info="schemaObj.assetId" />
+          </template>
+          <el-input
+            v-model="assetIdValue" placeholder="Asset ID" :minlength="1" maxlength="100" show-word-limit
+            :disabled="!enableValue"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col v-if="isSigmaDrm || isDrmToday || isSigmaDrmMultlProvider" :span="isSigmaDrmMultlProvider ? 12 : 6">
+        <el-form-item label="Environment" v-bind="environmentAttrs">
+          <template #label>
+            <SSInformationLabel label="Environment" :info="schemaObj.environment" />
+          </template>
+          <el-select v-model="environmentValue" class="w-full" default-first-option :disabled="!enableValue">
+            <el-option
+              v-for="(item, idx) in ['test', 'staging', 'production']" :key="idx" :value="item"
+              :label="uppercaseFirst(item)"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+
+      <el-col v-if="!isDrmCpix" :span="12">
+        <el-form-item :label="t('SSconfig.drm.title')" v-bind="drmManagementIdAttrs">
+          <template #label>
+            <SSInformationLabel :label="t('SSconfig.drm.title')" :info="schemaObj.drmManagementId" />
+          </template>
+          <div class="w-full flex gap-1">
+            <el-select
+              v-model="drmManagementIdValue" :placeholder="t('SSConfig.placeholder.selectDrm')"
+              class="w-full" :disabled="!enableValue" filterable remote reserve-keyword remote-show-suffix
+              :remote-method="remoteMethod" :loading="isFetching" :clearable="true"
+              popper-class="[&_.el-select-group\_\_title]:(font-bold text-base text-truncate)"
+            >
+              <el-option-group v-for="group in drmOptions?.data || []" :key="group.name" :label="group.name">
+                <el-option :key="group.id" :value="group.id" :label="group.name" class="h-auto">
+                  <div>
+                    <div class="leading-normal">
+                      MerchantID: {{ group?.data?.merchantId }}
+                    </div>
+                    <div v-if="!isDrmToday" class="leading-normal">
+                      AppID: {{ group?.data?.appId }}
+                    </div>
+                    <div v-if="!isDrmToday" class="leading-normal">
+                      Email: {{ group?.data?.email }}
+                    </div>
+                    <div v-if="isDrmToday" class="leading-normal">
+                      {{ t('SSConfig.label.username') }}: {{ group?.data?.username }}
+                    </div>
+                  </div>
+                </el-option>
+              </el-option-group>
+              <template #empty>
+                <div class="m-2 flex items-center justify-between gap-2">
+                  <div class="text-sm">
+                    {{ t('SSConfig.message.noData') }}
+                  </div>
+                  <el-button @click="addDRM()">
+                    <template #icon>
+                      <div class="i-ep:plus" />
+                    </template>
+                    {{ t('Actions.add') }}
+                  </el-button>
+                </div>
+              </template>
+            </el-select>
+
+            <el-button @click="refetch()">
+              <div class="i-carbon:renew" :class="{ 'animate-spin': isFetching }" />
+            </el-button>
+          </div>
+        </el-form-item>
+      </el-col>
+      <el-col v-if="isSigmaDrmMultlProvider && !isDrmToday" :span="12">
+        <el-form-item label="Filter" v-bind="filterAttrs">
+          <template #label>
+            <SSInformationLabel :label="t('SSConfig.form.label.filter')" :info="schemaObj.filter" />
+          </template>
+          <el-select
+            v-model="filterValue" class="w-full" default-first-option clearable multiple
+            :disabled="!enableValue"
+          >
+            <el-option v-for="(item, idx) in drmDtoFilterEnum" :key="idx" :value="item" :label="item" />
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row :gutter="10">
+      <!-- <el-col v-if="isSigmaDrmMultlProvider || isDrmToday" :span="12">
+        <el-form-item
+          label="Key Rotation Time"
+          v-bind="keyRotationTimeAttrs"
+          class="w-full"
+        >
+          <template #label>
+            <SSInformationLabel label="Key Rotation Time" :info="schemaObj.keyRotationTime" />
+          </template>
+          <el-input-number
+            v-model="keyRotationTimeValue"
+            placeholder="Key Rotation Time"
+            :min="1"
+            :max="43200"
+            :step="0.1"
+            :precision="1"
+            class="w-full"
+          />
+        </el-form-item>
+      </el-col> -->
+    </el-row>
+    <el-row v-if="isDrmCpix" :gutter="5">
+      <el-col :span="24">
+        <el-form-item :label="t('SSConfig.form.label.endpoint')" v-bind="endpointAttrs">
+          <template #label>
+            <SSInformationLabel :label="t('SSConfig.form.label.endpoint')" :info="schemaObj.endpoint" />
+          </template>
+          <el-input
+            v-model="endpointValue" :placeholder="t('SSConfig.form.label.placeholder_endpoint')" maxlength="2048"
+            show-word-limit :disabled="!enableValue"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <div class="flex gap-8">
+          <div class="flex-1">
+            <el-form-item :label="`${t('SSConfig.form.label.key')} ID`" v-bind="keyIdAttrs">
+              <template #label>
+                <SSInformationLabel :label="`${t('SSConfig.form.label.key')} ID`" :info="schemaObj.keyId" />
+              </template>
+              <div class="w-full flex gap-1">
+                <el-input
+                  v-model="keyIdValue" :placeholder="t('SSConfig.form.label.key_placeholder')"
+                  :disabled="!enableValue"
+                />
+                <el-button @click="genUuidAuto">
+                  <template #icon>
+                    <div class="i-carbon:arrows-horizontal" />
+                  </template>
+                </el-button>
+              </div>
+            </el-form-item>
+            <el-form-item :label="`${t('SSConfig.form.label.content')} ID`" v-bind="contentIdAttrs">
+              <template #label>
+                <SSInformationLabel :label="`${t('SSConfig.form.label.content')} ID`" :info="schemaObj.contentId" />
+              </template>
+              <el-input
+                v-model="contentIdValue" :placeholder="`${t('SSConfig.form.label.content')} ID`" :maxlength="64"
+                show-word-limit :disabled="!enableValue"
+              />
+            </el-form-item>
+            <el-form-item :label="t('SSConfig.form.label.DrmSystem')" v-bind="drmSystemIdAttrs">
+              <template #label>
+                <SSInformationLabel :label="t('SSConfig.form.label.DrmSystem')" :info="schemaObj.systems" />
+              </template>
+              <el-select
+                v-model="drmSystemValue" class="w-full" default-first-option clearable multiple
+                :disabled="!enableValue" :placeholder="t('SSConfig.form.label.DrmSystem')"
+              >
+                <el-option v-for="(item, idx) in drmDtoFilterEnum" :key="idx" :value="item" :label="item" />
+              </el-select>
+            </el-form-item>
+          </div>
+          <div class="flex-1">
+            <el-form-item :label="t('SSConfig.form.label.Header')" v-bind="headersAttrs">
+              <template #label>
+                <SSInformationLabel :label="t('SSConfig.form.label.Header')" :info="schemaObj.headers" />
+                <el-button v-if="headersValue?.length < 10" class="ml-4" type="primary" size="small" @click="add">
+                  {{ t('Actions.add') }}
+                </el-button>
+              </template>
+              <div class="w-full">
+                <div v-if="headersValue?.length > 0" class="flex gap-8">
+                  <div class="w-40%">
+                    Key <span class="text-error">*</span>
+                  </div>
+                  <div class="w-60%">
+                    Value <span class="text-error">*</span>
+                  </div>
+                </div>
+                <div v-for="(item, idx) in (headersValue || [])" :key="item?._id" class="flex gap-8 pb-2">
+                  <SSChannelHeaderItem
+                    v-model:disabled="enableValue" :prop="prop" :index="idx"
+                    @delete="handleDeleteHeader(item?._id)"
+                  />
+                </div>
+              </div>
+            </el-form-item>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>