@sigmaott/base-next 1.0.6

package/src/components/Channel/SignalLoss.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+const { schemaObj } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'SignalLossConfigDto')
+
+const [enableValue, enableAttrs] = useElField<boolean>('channelConfig.signalLossConfig.enable')
+const [typeValue, typeAttrs] = useElField<boolean>('channelConfig.signalLossConfig.type')
+const [timeoutValue, timeoutAttrs] = useElField<string>('channelConfig.signalLossConfig.signalLossTimeout', [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (!value && enableValue.value) {
+        callback(new Error($t('base_library.please_input_timeout')))
+      }
+      else if (convertStringToNumber(value) < 5 || convertStringToNumber(value) > 10080) {
+        callback(new Error($t('base_library.signal_losss_timeout_no')))
+      }
+      else {
+        callback()
+      }
+    },
+  },
+], { enabled: enableValue })
+
+const optionType = [
+  {
+    label: 'Auto Stop On Signal Loss',
+    value: 'auto_stop_on_signal_loss',
+  },
+  {
+    label: 'Keep Last Frame',
+    value: 'keep_last_frame',
+  },
+]
+
+function formatter(value: string) {
+  return value.replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, '.')
+}
+
+function parser(value: string) {
+  return Number.parseInt(value.replace(/\D/g, '').replace(/\$\s?|(\.*)/g, ''))
+}
+function handleChange() {
+  timeoutValue.value = 60
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-48px">
+    <el-form-item v-bind="enableAttrs">
+      <template #label>
+        <SSInformationLabel label="Enable" :info="schemaObj.enable" />
+      </template>
+      <el-switch v-model="enableValue" :active-value="true" :inactive-value="false" />
+    </el-form-item>
+    <el-form-item label="Type" v-bind="typeAttrs">
+      <template #label>
+        <SSInformationLabel label="Type" :info="schemaObj.type" />
+      </template>
+      <el-select
+        v-model="typeValue"
+        placeholder="Select"
+        :disabled="!enableValue"
+        class="!w-230px"
+        @change="handleChange"
+      >
+        <el-option
+          v-for="item in optionType"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      v-if="typeValue !== 'keep_last_frame'"
+      class="[&_.el-form-item\_\_content]:!block"
+      label="SignalLossTimeout (minutes)"
+      v-bind="timeoutAttrs"
+    >
+      <template #label>
+        <SSInformationLabel label="SignalLossTimeout (minutes)" :info="schemaObj.signalLossTimeout" />
+      </template>
+      <el-input
+        v-model="timeoutValue"
+        class="flex-1"
+        :disabled="!enableValue "
+        :formatter="formatter"
+        :parser="parser"
+      />
+    </el-form-item>
+  </div>
+</template>

package/src/components/Channel/SwitchInputButton.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const { id, type, disable } = defineProps<{
+  id: string
+  type: string
+  disable: boolean
+}>()
+
+const emit = defineEmits(['switchInput'])
+
+const { data: transcodeInput, isFetching: isFetchingTranscodeInput, refetch: refetchTranscodeInput } = useQuery(
+  [QueryKeys.TRANSCODE_INPUT_DETAIL, id],
+  () => $transcodeApi('/api/transcode/transcode-inputs/{inputId}', { method: 'GET', pathParams: { inputId: id } }),
+  {
+    enabled: computed(() => type === 'transcode' && !!id),
+  },
+)
+
+const { data: packageInput, suspense: packageSuspense, isFetching: isFetchingPackageInput, refetch: refetchPackageInput } = useQuery(
+  [QueryKeys.TRANSCODE_INPUT_DETAIL, id],
+  () => $transcodeApi('/api/transcode/package-inputs/{inputId}', { method: 'GET', pathParams: { inputId: id } }),
+  {
+    enabled: computed(() => type === 'package' && !!id),
+  },
+)
+
+const inputDetail = computed(() => {
+  return type === 'transcode' ? transcodeInput.value : packageInput.value
+})
+</script>
+
+<template>
+  <el-dropdown-item :disabled="inputDetail?.class === 'single' || disable" class="flex justify-around" @click="emit('switchInput')">
+    <div class="w-full flex items-center gap-2">
+      <div class="i-ep:switch" />
+      {{ $t('Actions.switchInput') }}
+    </div>
+  </el-dropdown-item>
+</template>

package/src/components/Channel/TargetCatchup.vue

@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+const { prop, idx } = definePropsRefs<{
+  prop: string
+  idx: number
+}>()
+
+function getProp(key: string) {
+  return () => `${prop.value}.${key}`
+}
+
+const { schemaObj } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'CatchupDto')
+const { schemaItem: schemaObjTrick } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'TrickPlayDto')
+
+const [enableValue, enableAttrs] = useElField<boolean>(getProp('enable'), [])
+const [cacheTimeValue, cacheTimeAttrs] = useElField<number>(getProp('timeCache'), [])
+const [enableTrickPlayValue, enableTrickPlayAttrs] = useElField<boolean>(getProp('trickPlay.enable'), [])
+const [widthValue, widthAttrs] = useElField<number>(getProp('trickPlay.width'), [])
+const [delayValue, delayAttrs] = useElField<number>(getProp('trickPlay.delay'), [])
+const [colValue, colAttrs] = useElField<number>(getProp('trickPlay.col'), [])
+const [rowValue, rowAttrs] = useElField<number>(getProp('trickPlay.row'), [])
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-x-5">
+    <el-form-item :label="$t('EventChannel.form.label.enable')" v-bind="enableAttrs">
+      <template #label>
+        <SSInformationLabel :label="$t('EventChannel.form.label.enable')" :info="schemaObj.enable" />
+      </template>
+      <el-switch v-model="enableValue" :active-value="true" :inactive-value="false" />
+    </el-form-item>
+    <el-form-item label="Cache time" v-bind="cacheTimeAttrs">
+      <template #label>
+        <SSInformationLabel label="Cache time" :info="schemaObj.timeCache" />
+      </template>
+      <el-input-number v-model="cacheTimeValue" :disabled="!enableValue" :min="6" :max="2880" step-strictly placeholder="Cache time" />
+    </el-form-item>
+  </div>
+  <ChannelTargetDestination :prop="getProp('destination')()" :enabled="enableValue" />
+
+  <el-text tag="strong" class="">
+    Trick play
+  </el-text>
+  <div class="mt-2 flex flex-wrap gap-x-5">
+    <el-form-item :label="$t('EventChannel.form.label.enable')" v-bind="enableTrickPlayAttrs">
+      <template #label>
+        <SSInformationLabel :label="$t('EventChannel.form.label.enable')" :info="schemaObjTrick.enable" />
+      </template>
+      <el-switch v-model="enableTrickPlayValue" :disabled="!enableValue" />
+    </el-form-item>
+    <el-form-item label="Width" v-bind="widthAttrs">
+      <template #label>
+        <SSInformationLabel label="Width" :info="schemaObjTrick.width" />
+      </template>
+      <el-input-number v-model="widthValue" :min="50" :max="1920" step-strictly :disabled="!enableTrickPlayValue || !enableValue" />
+    </el-form-item>
+    <el-form-item label="Delay" v-bind="delayAttrs">
+      <template #label>
+        <SSInformationLabel label="Delay" :info="schemaObjTrick.delay" />
+      </template>
+      <el-input-number v-model="delayValue" :min="2" :max="30" step-strictly :disabled="!enableTrickPlayValue || !enableValue" />
+    </el-form-item>
+    <el-form-item label="Col" v-bind="colAttrs">
+      <template #label>
+        <SSInformationLabel label="Col" :info="schemaObjTrick.col" />
+      </template>
+      <el-input-number v-model="colValue" step-strictly :min="2" :max="50" :disabled="!enableTrickPlayValue || !enableValue" />
+    </el-form-item>
+    <el-form-item label="Row" v-bind="rowAttrs">
+      <template #label>
+        <SSInformationLabel label="Row" :info="schemaObjTrick.row" />
+      </template>
+      <el-input-number v-model="rowValue" step-strictly :min="2" :max="50" :disabled="!enableTrickPlayValue || !enableValue" />
+    </el-form-item>
+  </div>
+</template>

package/src/components/Channel/TargetDataInfo.vue

@@ -0,0 +1,100 @@
+<script lang="ts" setup>
+import isURL from 'validator/lib/isURL'
+
+const { prop } = definePropsRefs<{
+  prop: string
+}>()
+
+const { t } = useI18n()
+
+function getProp(target: string) {
+  return () => `${prop.value}.${target}`
+}
+
+const { schemaObj } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'TargetDataDto')
+const [nameValue, nameAttrs] = useElField<string>(getProp('name'), [
+  {
+    required: true,
+    message: t('SSConfig.message.require-name-target'),
+    trigger: ['blur', 'change'],
+  },
+  { min: 1, max: 200, message: t('SSConfig.form.validate.length', { min: 1, max: 200 }), trigger: ['blur', 'change'] },
+  {
+    validator: (rule, value, callback) => {
+      if (!/^[\w-]*$/.test(value))
+        callback(new Error(t('SSConfig.form.validate.formatName')))
+      else
+        callback()
+    },
+    trigger: ['blur', 'change'],
+  },
+])
+const [nameModifierValue, nameModifierAttrs] = useElField<string>(getProp('nameModifier'), [
+  {
+    validator: (rule, value, callback) => {
+      if (!/^[\w-]*$/.test(value))
+        callback(new Error(t('SSConfig.form.validate.formatName')))
+      else
+        callback()
+    },
+    trigger: ['blur', 'change'],
+  },
+])
+const [format, formatAttrs] = useElField<string>(getProp('format'))
+const [urlValue, urlAttrs] = useElField<string>(getProp('url'), [
+  {
+    required: true,
+    message: t('SSConfig.form.validate.require'),
+    trigger: ['blur', 'change'],
+  },
+  {
+    validator: (rule, value, callback) => {
+      if (!isURL(value, {
+        protocols: ['udp'],
+      })) {
+        callback(new Error(t('SSConfig.form.validate.formatUri')))
+      }
+      else {
+        callback()
+      }
+    },
+    trigger: ['blur', 'change'],
+  },
+])
+
+const isUDPMultiplex = computed(() => format.value === 'multiplex')
+</script>
+
+<template>
+  <div class="grid gap-2" :class="isUDPMultiplex ? 'grid-cols-2' : 'grid-cols-3'">
+    <el-form-item :label="$t('SSConfig.label.name')" v-bind="nameAttrs">
+      <template #label>
+        <SSInformationLabel :label="$t('SSConfig.label.name')" :info="schemaObj?.name" />
+      </template>
+      <el-input
+        v-model="nameValue" :placeholder="$t('SSConfig.placeholder.enterName')" maxlength="200"
+        show-word-limit
+      />
+    </el-form-item>
+    <el-form-item v-if="!isUDPMultiplex" :label="$t('SSConfig.label.name-modifier')" v-bind="nameModifierAttrs">
+      <template #label>
+        <SSInformationLabel :label="$t('SSConfig.label.name-modifier')" :info="schemaObj?.nameModifier" />
+      </template>
+      <el-input
+        v-model="nameModifierValue" :placeholder="$t('SSConfig.placeholder.enterName')" maxlength="50"
+        show-word-limit
+      />
+    </el-form-item>
+    <el-form-item label="Format" prop="format">
+      <template #label>
+        <SSInformationLabel label="Format" :info="schemaObj?.format" />
+      </template>
+      <el-select v-model="format" class="w-full" clearable disabled default-first-option>
+        <el-option
+          v-for="(_format, idx) in ['hls', 'dash', 'udp', 'rtmp', 'mss', 'hds']" :key="_format + idx"
+          :value="_format" :label="_format"
+        />
+      </el-select>
+    </el-form-item>
+  </div>
+</template>

package/src/components/Channel/TargetDestination.vue

@@ -0,0 +1,375 @@
+<script lang="ts" setup>
+import type { FormRules } from 'element-plus'
+import isIP from 'validator/lib/isIP'
+import isURL from 'validator/lib/isURL'
+import { set } from 'lodash-unified'
+import type { components } from '#nuxt-api-party/apiChannel'
+
+const { prop, enabled: enabledProp } = defineProps<{ prop: string; enabled: boolean }>()
+// const { enabled } = definePropsRefs<{
+//   enabled: boolean
+// }>()
+const enabled = computed(() => enabledProp)
+
+function getProp(path: string) {
+  return () => `${prop}.${path}`
+}
+
+const { formErrors } = useElFormContext()
+
+const { t } = useI18n()
+const [destinationValue] = useElField(prop, [], {
+  defaultValue: {
+    type: 'local',
+  },
+})
+const [bucketValue, bucketAttrs] = useElField<string>(getProp('s3.bucket'), [
+  {
+    required: true,
+    message: t('Vod.validate.require'),
+    trigger: ['blur', 'change'],
+  },
+  {
+    validator: (rule, value, callback) => {
+      if (value.length < 3 || value.length > 63)
+        callback(new Error(t('Vod.bucket_name.valid_length')))
+      if (!value.match(/^[a-z0-9]/) || !value.match(/[a-z0-9]$/))
+        callback(new Error(t('Vod.bucket_name.bucket_names_must_begin_and_end_with_a_letter_or_number')))
+      if (!value.match(/^[a-z0-9][a-z0-9.-]{1,61}[a-z0-9]$/))
+        callback(new Error(t('Vod.bucket_name.bucket_names_can_consist_only_of_lowercase_letters_numbers_dots_and_hyphens_-')))
+      if (!value.match(/^(?!.*\.(\.))/))
+        callback(new Error(t('Vod.bucket_name.bucket_names_must_not_contain_two_adjacent_periods')))
+      if (isIP(value))
+        callback(new Error(t('Vod.bucket_name.bucket_names_must_not_be_formatted_as_an_ip_address')))
+      if (!value.match(/^(?!xn--)(?!sthree-)(?!sthree-configurator-)/))
+        callback(new Error(t('Vod.bucket_name.bucket_names_must_not_start_with_the_prefix_xn--_and_sthree-_and_the_prefix_sthree-configurator')))
+      if (!value.match(/^(?!.*--ol-s3$)/))
+        callback(new Error(t('Vod.bucket_name.bucket_names_must_not_end_with_the_suffix_--ol-s3')))
+      else
+        callback()
+    },
+    trigger: ['blur', 'change'],
+  },
+], {
+  enabled,
+})
+
+const [endpointValue, endpointAttrs] = useElField<string>(getProp('s3.endpoint'), [
+  {
+    required: true,
+    message: t('Vod.validate.require'),
+    trigger: ['blur', 'change'],
+  },
+  {
+    validator: (rule, value, callback) => {
+      if (!isURL(value, { protocols: ['http', 'https'], require_protocol: true }))
+        callback(new Error(t('Vod.validate.format_uri')))
+      else
+        callback()
+    },
+    trigger: ['blur', 'change'],
+  },
+], {
+  enabled,
+})
+const [accessKeyValue, accessKeyAttrs] = useElField<string>(getProp('s3.accessKey'), [
+  {
+    required: true,
+    message: t('Vod.validate.require'),
+  },
+], {
+  enabled,
+})
+const [typeValue, typeAttrs] = useElField<string>(getProp('type'), [
+  {
+    required: true,
+    message: t('Vod.validate.require'),
+  },
+], {
+  enabled,
+})
+const [regionValue, regionAttrs] = useElField<string>(getProp('s3.region'), [], {
+  enabled,
+})
+const [secretKeyValue, secretKeyAttrs] = useElField<string>(getProp('s3.secretKey'), [
+  {
+    required: true,
+    message: t('Vod.validate.require'),
+    trigger: ['blur', 'change'],
+  },
+  {
+    min: 1,
+    max: 1000,
+    message: t('Vod.validate.length', { min: 1, max: 1000 }),
+    trigger: ['blur', 'change'],
+  },
+], {
+  enabled,
+})
+const [s3SegmentPrefixValue, s3SegmentPrefixAttrs] = useElField(getProp('s3.segmentPrefix'), [{
+  validator: (rule, value, callback) => {
+    if (value && !isURL(value, { protocols: ['http', 'https'], require_protocol: true }))
+      callback(new Error(t('Vod.validate.format_uri')))
+    else
+      callback()
+  },
+  trigger: ['blur', 'change'],
+}], {
+  enabled,
+})
+const [ftpHostValue, ftpHostAttrs] = useElField<string>(getProp('ftp.host'), [
+  {
+    required: true,
+    message: t('Vod.validate.require'),
+    trigger: ['blur', 'change'],
+  },
+  {
+    validator: (rule, value, callback) => {
+      if (!isIP(value))
+        callback(new Error(t('Vod.validate.format_ip')))
+      else
+        callback()
+    },
+    trigger: ['blur', 'change'],
+  },
+], {
+  enabled,
+})
+const [ftpPortValue, ftpPortAttrs] = useElField<number>(getProp('ftp.port'), [{
+  required: true,
+  message: t('Vod.validate.require'),
+  trigger: ['blur', 'change'],
+}], {
+  enabled,
+})
+
+const [ftpPasswordValue, ftpPasswordAttrs] = useElField<string>(getProp('ftp.password'), [{
+  required: true,
+  message: t('Vod.validate.require'),
+  trigger: ['blur', 'change'],
+}, {
+  min: 1,
+  max: 1000,
+  message: t('Vod.validate.length', { min: 1, max: 1000 }),
+  trigger: ['blur', 'change'],
+}], {
+  enabled,
+})
+const [ftpUsernameValue, ftpUsernameAttrs] = useElField<string>(getProp('ftp.username'), [{
+  required: true,
+  message: t('Vod.validate.require'),
+  trigger: ['blur', 'change'],
+}], {
+  enabled,
+})
+
+const [ftpSegmentPrefixValue, ftpSegmentPrefixAttrs] = useElField(getProp('ftp.segmentPrefix'), [{
+  validator: (rule, value, callback) => {
+    if (value && !isURL(value, { protocols: ['http', 'https'], require_protocol: true }))
+      callback(new Error(t('Vod.validate.format_uri')))
+    else
+      callback()
+  },
+  trigger: ['blur', 'change'],
+}], {
+  enabled,
+})
+
+function handleChangeType(type: 'ftp' | 's3' | 'local') {
+  if (type === 's3') {
+    destinationValue.value = {
+      type: 's3',
+      s3: {
+        accessKey: '',
+        bucket: '',
+        endpoint: '',
+        secretKey: '',
+        region: '',
+        segmentPrefix: '',
+      },
+    }
+  }
+  else if (type === 'ftp') {
+    destinationValue.value = {
+      type: 'ftp',
+      ftp: {
+        host: '',
+        port: 20,
+        password: '',
+        username: '',
+        segmentPrefix: '',
+      },
+    }
+  }
+  else {
+    destinationValue.value = {
+      type: 'local',
+    }
+  }
+  set(formErrors.value, prop, {})
+}
+const optionsType = [
+  {
+    value: 'local',
+    label: 'Server',
+  },
+  {
+    value: 'ftp',
+    label: 'FTP (S)',
+  },
+  {
+    value: 's3',
+    label: 'Generic S3',
+  },
+]
+</script>
+
+<template>
+  <div>
+    <el-form-item :label="t('Vod.destination')" v-bind="typeAttrs">
+      <el-radio-group v-model="typeValue" :disabled="!enabled" @change="handleChangeType">
+        <el-radio v-for="item in optionsType" :key="item.value" :label="item.value">
+          {{ item.label }}
+        </el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <Transition mode="out-in" name="slide-left">
+      <div v-if="typeValue === 's3' && destinationValue.s3" class="pl-3">
+        <div class="grid grid-cols-3 items-start gap-x-4 2xl:grid-cols-4">
+          <el-form-item label="Bucket Name" v-bind="bucketAttrs">
+            <el-input
+              v-model="bucketValue"
+              maxlength="63"
+              :placeholder="t('Vod.bucket_name.placeholder')"
+              show-word-limit
+              :disabled="!enabled"
+            />
+          </el-form-item>
+          <el-form-item label="Endpoint" v-bind="endpointAttrs">
+            <el-input
+              v-model="endpointValue"
+              maxlength="2048"
+              placeholder="http(s)://minio.dev:9000"
+              show-word-limit
+              :disabled="!enabled"
+            />
+          </el-form-item>
+          <el-form-item :label="t('Vod.access_key_id.label')" v-bind="accessKeyAttrs">
+            <el-input
+              v-model="accessKeyValue"
+              maxlength="1000"
+              :placeholder="t('Vod.access_key_id.placeholder')"
+              show-word-limit
+              :disabled="!enabled"
+            />
+          </el-form-item>
+          <el-form-item :label="t('Vod.secret_access_key.label')" v-bind="secretKeyAttrs">
+            <el-input
+              v-model="secretKeyValue"
+              maxlength="1000"
+              :placeholder="t('Vod.secret_access_key.placeholder')"
+              show-word-limit
+              type="password"
+              show-password
+              :disabled="!enabled"
+            />
+          </el-form-item>
+          <el-form-item label="Region" v-bind="regionAttrs">
+            <el-input
+              v-model="regionValue"
+              maxlength="50"
+              placeholder="Region"
+              show-word-limit
+              :disabled="!enabled"
+            />
+          </el-form-item>
+          <el-form-item label="Segment prefix" v-bind="s3SegmentPrefixAttrs">
+            <el-input
+              v-model="s3SegmentPrefixValue"
+              maxlength="2048"
+              placeholder="http(s)://example.com"
+              show-word-limit
+              :disabled="!enabled"
+            />
+          </el-form-item>
+        </div>
+      </div>
+      <div v-else-if="typeValue === 'ftp' && destinationValue.ftp" class="pl-3">
+        <div class="grid grid-cols-3 items-start gap-x-4 2xl:grid-cols-4">
+          <el-form-item label="Host" v-bind="ftpHostAttrs">
+            <el-input
+              v-model="ftpHostValue"
+              :placeholder="$t('Vod.host.description')"
+              show-word-limit
+              :disabled="!enabled"
+            />
+          </el-form-item>
+          <el-form-item label="Port" v-bind="ftpPortAttrs">
+            <el-input-number
+              v-model="ftpPortValue"
+              :min="1"
+              :max="65535"
+              :step="1"
+              :precision="0"
+              class="!w-full"
+              :disabled="!enabled"
+            />
+          </el-form-item>
+          <el-form-item :label="t('Vod.username.label')" v-bind="ftpUsernameAttrs">
+            <el-input
+              v-model="ftpUsernameValue"
+              maxlength="100"
+              :placeholder="$t('Vod.username.placeholder')"
+              show-word-limit
+              :disabled="!enabled"
+            />
+          </el-form-item><el-form-item :label="t('Vod.password.label')" v-bind="ftpPasswordAttrs">
+            <el-input
+              v-model="ftpPasswordValue"
+              maxlength="1000"
+              :placeholder="t('Vod.password.placeholder')"
+              show-word-limit
+              type="password"
+              show-password
+              :disabled="!enabled"
+            />
+          </el-form-item>
+          <el-form-item label="Segment prefix" v-bind="ftpSegmentPrefixAttrs">
+            <el-input
+              v-model="ftpSegmentPrefixValue"
+              maxlength="2048"
+              placeholder="http(s)://example.com"
+              show-word-limit
+              :disabled="!enabled"
+            />
+          </el-form-item>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.slide-left-enter-active,
+.slide-left-leave-active,
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 0.2s;
+}
+.slide-left-enter-from {
+  opacity: 0;
+  transform: translate(50px, 0);
+}
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translate(-50px, 0);
+}
+.slide-right-enter-from {
+  opacity: 0;
+  transform: translate(-50px, 0);
+}
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translate(50px, 0);
+}
+</style>