@sigmaott/base-next 1.0.6

package/src/components/Asset/VideoPreviewConfig.vue

@@ -0,0 +1,329 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  nameOutput: string
+  typeOutput: string
+}>()
+
+const emit = defineEmits<{
+  reload: []
+}>()
+const src = defineModel<string>('src')
+const playMode = defineModel<string>('playMode')
+const catchupTime = defineModel<string>('catchupTime')
+const delayTime = defineModel<number>('delayTime')
+const timeshiftTime = defineModel<number>('timeshiftTime')
+const videoType = defineModel<string>('videoType')
+const drm = defineModel<any>('drm')
+
+const { catchupEnabled, drmCredentials } = useInjectJobPreview()
+
+function handleReload() {
+  emit('reload')
+}
+
+function getInitialValues() {
+  return { ...drm.value }
+}
+
+const { formRef, formValue, handleSubmit, handleValidate, register } = useElForm({
+  initialValues: getInitialValues(),
+  async onSubmit(values) {
+    drm.value = values
+    nextTick(() => {
+      handleReload()
+    })
+  },
+})
+
+function getProp(key: string) {
+  return key
+}
+const { t: $t } = useI18n()
+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="mx-auto my-2 w-88%">
+    <slot />
+
+    <div class="flex items-center gap-1 pt-4 text-sm">
+      <div class="i-ep:info-filled text-primary" />
+      <div class="font-semibold">
+        {{ $t('base.after_you_change_the_default_information_you_should_click_the_reload_to_reload_the_video') }}
+      </div>
+    </div>
+
+    <!--  -->
+    <div class="w-full flex items-start gap-4 pb-2 pt-4">
+      <div class="flex flex-1 flex-col gap-2">
+        <div v-if="typeOutput === 'hls-dash'" class="w-full flex items-center gap-1">
+          <label class="min-w-90px flex font-semibold">Output:</label>
+          <el-radio-group v-model="videoType" class="mb-2">
+            <el-radio-button label="hls">
+              Hls
+            </el-radio-button>
+            <el-radio-button label="dash">
+              Dash
+            </el-radio-button>
+          </el-radio-group>
+        </div>
+        <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 class="w-full flex items-center gap-1">
+          <label class="min-w-90px flex font-semibold">Mode:</label>
+          <el-radio-group v-model="playMode" class="mb-2">
+            <el-radio label="live">
+              Live
+            </el-radio>
+            <el-radio v-if="catchupEnabled" label="catchup">
+              Catchup
+            </el-radio>
+            <el-radio v-if="catchupEnabled" label="delay">
+              Delay
+            </el-radio>
+            <el-radio v-if="catchupEnabled" label="timeshift">
+              Timeshift
+            </el-radio>
+          </el-radio-group>
+        </div>
+        <div v-if="playMode === 'catchup'" class="flex items-center justify-start gap-1">
+          <label class="min-w-90px flex font-semibold">{{ $t('base.select_time') }}:</label>
+          <div>
+            <el-time-picker
+              v-model="catchupTime"
+              is-range
+              range-separator="-"
+              start-placeholder="Start time"
+              end-placeholder="Stop time"
+              value-format="HH:mm:ss"
+              :clearable="false"
+            />
+          </div>
+        </div>
+        <div v-if="playMode === 'delay'" class="flex items-center justify-start gap-1">
+          <label class="min-w-90px flex font-semibold">Delay (s):</label>
+          <div>
+            <el-input-number
+              v-model="delayTime"
+              :min="30"
+              :max="600"
+              step-strictly
+              @blur="() => {
+                if (!delayTime) {
+                  delayTime = 30
+                }
+              }"
+            />
+          </div>
+        </div>
+        <div v-if="playMode === 'timeshift'" class="flex items-center justify-start gap-1">
+          <label class="min-w-90px flex font-semibold">Timeshift (s):</label>
+          <div>
+            <el-input-number
+              v-model="timeshiftTime"
+              :min="10"
+              :max="21600"
+              step-strictly
+              @blur="() => {
+                if (!timeshiftTime) {
+                  timeshiftTime = 30
+                }
+              }"
+            />
+          </div>
+        </div>
+      </div>
+      <el-button type="primary" @click="() => drm?.enable ? handleSubmit() : handleReload()">
+        <template #icon>
+          <i class="i-ep:refresh" />
+        </template>
+        {{ $t('base.reload') }}
+      </el-button>
+    </div>
+
+    <div class="border-t pb-4 pt-2">
+      <div class="">
+        <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/VideoPreviewConfigMessage.vue

@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import { joinURL } from 'ufo'
+
+const props = defineProps<{
+  errorLinkType: 'http' | 'https'
+  variantClass?: string
+  fullWidth?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'click'): void
+}>()
+
+const showLearnMore = ref(false)
+
+const { errorLinkType } = toRefs(props)
+const baseUrl = useRuntimeConfig().app.baseURL
+// Update carousel items to use images
+const carouselRef = ref<InstanceType<any> | null>(null)
+const activeIndex = ref(1)
+const carouselItems = [
+  {
+    title: 'Step 1',
+    description: 'Click the lock (caution) icon, then click Site settings.',
+    image: joinURL(baseUrl, '/preview/step-1.png'),
+  },
+  {
+    title: 'Step 2',
+    description: 'Scroll to Insecure content, then use the drop-down list to change “Block (default)” to “Allow.”',
+    image: joinURL(baseUrl, '/preview/step-2.png'),
+  },
+  {
+    title: 'Step 3',
+    description: 'Reload the page',
+    image: joinURL(baseUrl, '/preview/step-3.png'),
+  },
+]
+</script>
+
+<template>
+  <div
+    v-if="errorLinkType"
+    :class="[variantClass ?? 'bg-overlay text-white px-8 py-8']"
+    class="absolute left-0 top-0 size-full flex flex-col items-center justify-center rounded-t"
+  >
+    <div v-if="errorLinkType === 'http'" :class="fullWidth ? 'max-w-full' : 'max-w-5/6'">
+      <div class="mb-4 flex items-start gap-2 text-pretty">
+        <div class="i-lucide:circle-alert mt-2 flex-shrink-0 text-7 text-primary" />
+        This link cannot run on a secure (HTTPS) website. Please check your browser settings to allow insecure content.
+        You can follow these steps:
+      </div>
+
+      <div class="mt-4 flex justify-center">
+        <el-button @click="showLearnMore = true">
+          Learn More
+        </el-button>
+      </div>
+      <el-dialog v-model="showLearnMore" width="900px" class="min-w-1040px [&_.el-dialog\_\_body]:h-[calc(100%-55px)]">
+        <el-carousel
+          ref="carouselRef" height="630px" arrow="never" indicator-position="none" :autoplay="false"
+          class="w-full"
+          @change="activeIndex = $event + 1"
+        >
+          <el-carousel-item v-for="item in carouselItems" :key="item.title" class="">
+            <div class="h-full flex flex-col">
+              <div class="p-4">
+                <h3 class="mb-2 text-lg font-semibold">
+                  {{ item.title }}
+                </h3>
+                <p class="text-sm">
+                  {{ item.description }}
+                </p>
+              </div>
+              <div class="relative flex-1">
+                <img :src="item.image" :alt="item.title" class="absolute inset-0 h-full w-full object-contain">
+              </div>
+              <div class="flex items-center justify-between px-5">
+                <div class="flex-1">
+                  Step {{ activeIndex }} / {{ carouselItems.length }}
+                </div>
+                <div class="mt-4 flex justify-center">
+                  <el-button v-if="activeIndex > 1" text @click="carouselRef?.prev()">
+                    Previous
+                  </el-button>
+                  <el-button v-if="activeIndex < carouselItems.length" @click="carouselRef?.next()">
+                    Next
+                  </el-button>
+                </div>
+              </div>
+            </div>
+          </el-carousel-item>
+        </el-carousel>
+      </el-dialog>
+    </div>
+
+    <!-- Rest of the template remains unchanged -->
+    <div v-else-if="errorLinkType === 'https'" :class="fullWidth ? 'max-w-full' : 'max-w-5/6'">
+      <div class="flex items-start gap-2">
+        <div class="i-lucide:circle-alert mt-2 flex-shrink-0 text-7 text-primary" />
+        <div>
+          <p class="text-pretty">
+            The preview may not be displayed because the current configuration uses a local URI (accessible only within
+            a private network) or due to network connectivity issues.
+          </p>
+          <p>
+            Please check the connection or the configuration here.
+          </p>
+        </div>
+      </div>
+      <div class="mt-4 flex justify-center">
+        <el-button @click="emit('click')">
+          <template #icon>
+            <div class="i-lucide:settings flex-shrink-0" />
+          </template>
+          Config Route
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>