@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/Asset/VideoPreviewConfigVod.vue

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