@sigmaott/base-library-next 2.1.9

package/src/components/channel/ConfigWatermarkItem.vue

@@ -0,0 +1,239 @@
+<script lang="ts" setup>
+import service from '@/api/axios'
+
+const { prop, isHiddenPlaylist } = definePropsRefs<{
+  prop: string
+  isHiddenPlaylist?: boolean
+}>()
+
+const { schemaObj } = useAsyncSchema('/api/transcode/api-docs-json', 'WatermarkDto')
+provide('isHiddenPlaylist', isHiddenPlaylist.value)
+
+function getProp(key: string) {
+  return () => prop.value ? `${prop.value}.${key}` : ''
+}
+const { t } = useI18n()
+
+const [enableValue, enableAttrs] = useElField<boolean>(getProp('enable'), [])
+
+const [delayValue, delayAttrs] = useElField<number>(getProp('delay'), [
+  {
+    required: true,
+    message: $t('Watermark.delay_is_required'),
+    trigger: ['blur', 'change'],
+  },
+], { enabled: enableValue })
+
+const [xValue, xAttrs] = useElField<number>(getProp('x'), [
+  {
+    required: true,
+    message: $t('Watermark.x_is_required'),
+    trigger: ['blur', 'change'],
+  },
+], {
+  enabled: enableValue,
+})
+
+const [yValue, yAttrs] = useElField<number>(getProp('y'), [
+  {
+    required: true,
+    message: $t('Watermark.y_is_required'),
+    trigger: ['blur', 'change'],
+  },
+], {
+  enabled: enableValue,
+})
+
+const [assetIdValue, assetIdAttrs] = useElField<string>(getProp('assetId'), [
+  {
+    required: true,
+    trigger: ['change'],
+    asyncValidator: (rule, value) => {
+      return new Promise((resolve, reject) => {
+        if (!value) {
+          reject(new Error(t('watermark.please_select_the_watermark')))
+        }
+        else {
+          $libraryApi('api/library/assets/{id}', { pathParams: { id: value } })
+            .then(resolve).catch(() => {
+              reject(new Error(t('asset_not_found')))
+            })
+        }
+      })
+    },
+  },
+], {
+  enabled: enableValue,
+})
+
+const [widthValue] = useElField<number>(getProp('width'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+  },
+], { enabled: enableValue })
+
+const [heightValue] = useElField<number>(getProp('height'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+  },
+], {
+  enabled: enableValue,
+})
+
+const [mediaScaleValue, mediaScaleAttr] = useElField<number>(getProp('mediaScale'), [
+  {
+
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (rule, value, callback) => {
+      if (value > 10 || value < 0.1)
+        callback(new Error(t('library.the_media_scale_must_be_between')))
+      return callback()
+    },
+  },
+], {
+  enabled: enableValue,
+})
+
+const assetSrc = ref('https://i.ibb.co/0QvpcB3/on-fast.png')
+const limit = ref(['image'])
+const { data } = useAssetDetail(() => assetIdValue.value)
+
+function handleRemove() {
+  ElMessageBox.confirm(t('base_library.are_you_sure_to_remove_watermark_asset'), t('general.warning'), {
+    confirmButtonText: t('Actions.confirm'),
+    cancelButtonText: t('Actions.cancel'),
+    type: 'warning',
+  })
+    .then(() => {
+      assetIdValue.value = ''
+      assetSrc.value = ''
+    })
+}
+
+const yRevert = computed({
+  get: () => {
+    return 1080 - yValue.value
+  },
+  set: (value: number) => {
+    yValue.value = 1080 - value
+  },
+})
+
+watch(mediaScaleValue, () => {
+  if (!data.value || !mediaScaleValue.value)
+    return
+  // update width and height
+  widthValue.value = data.value?.metadata?.width * mediaScaleValue.value
+  heightValue.value = data.value?.metadata?.height * mediaScaleValue.value
+})
+
+watchImmediate(data, () => {
+  if (!data.value)
+    return
+  const w = data.value?.metadata?.width
+  const h = data.value?.metadata?.height
+  const defaultScale = h > 1080 || w > 1920 ? 0.1 : 1
+  mediaScaleValue.value = mediaScaleValue.value || defaultScale
+  widthValue.value = w * mediaScaleValue.value
+  heightValue.value = h * mediaScaleValue.value
+})
+
+const imageStyles = computed(() => {
+  return {
+    top: `${yValue.value / 3}px`,
+    left: `${xValue.value / 3}px`,
+    height: `${heightValue.value / 3}px`,
+    width: `${widthValue.value / 3}px`,
+  }
+})
+
+function handleChangeEnable(newValue: boolean) {
+  if (newValue && !xValue.value) {
+    xValue.value = 0,
+    yValue.value = 0
+    mediaScaleValue.value = 1
+    delayValue.value = 0
+    widthValue.value = 120
+    heightValue.value = 88
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div class="flex flex-wrap gap-x-48px">
+      <el-form-item v-bind="enableAttrs">
+        <template #label>
+          <SSInformationLabel :label="$t('watermark.enable_label')" :info="schemaObj.enable" />
+        </template>
+        <el-switch v-model="enableValue" @change="handleChangeEnable" />
+      </el-form-item>
+      <el-form-item v-bind="delayAttrs">
+        <template #label>
+          <SSInformationLabel :label="`${$t('watermark.delay')} (s)`" :info="schemaObj.delay" />
+        </template>
+        <el-input-number v-model="delayValue" :disabled="!enableValue" :min="0" :max="120" :step="1" step-strictly />
+      </el-form-item>
+      <el-form-item v-bind="xAttrs">
+        <template #label>
+          <SSInformationLabel label="X" :info="schemaObj.x" />
+        </template>
+        <el-input-number v-model="xValue" :disabled="!enableValue" :min="0" :max="1920" />
+      </el-form-item>
+      <el-form-item v-bind="yAttrs">
+        <template #label>
+          <SSInformationLabel label="Y" :info="schemaObj.y" />
+        </template>
+        <el-input-number v-model="yValue" :disabled="!enableValue" :min="0" :max="1080" />
+      </el-form-item>
+
+      <el-form-item label="Media scale" v-bind="mediaScaleAttr" class="w-400px">
+        <template #label>
+          <SSInformationLabel label="Media scale" :info="schemaObj.mediaScale" />
+        </template>
+        <el-slider v-model="mediaScaleValue" :step="0.01" :disabled="!enableValue" :min="0.1" :max="10"
+          class="[&_.el-slider\_\_bar]:!bg-transparent" show-input />
+      </el-form-item>
+    </div>
+    <el-form-item v-bind="assetIdAttrs" class="block [&_.el-form-item\_\_error]:(ml-2)">
+      <template #label>
+        <SSInformationLabel label="Asset" :info="schemaObj.assetId" />
+      </template>
+
+      <SSAssetPicker v-model="assetIdValue" :asset-src="assetSrc" :disabled="!enableValue" :axios-instance="service"
+        :limit="limit" :asset-domain="ASSET_DEV_URL" />
+      <div class="relative">
+        <el-image v-if="data?.uri" fit="scale-down" class="ml-4 h-50px w-50px" :src="data.uri" />
+        <el-button v-if="assetIdValue && enableValue" size="small" class="absolute right-[-8px] top-0" type="danger"
+          circle plain @click="handleRemove">
+          <template #icon>
+            <div class="i-carbon:close" />
+          </template>
+        </el-button>
+      </div>
+    </el-form-item>
+    <div v-if="enableValue" class="grid grid-cols-[1fr_auto_1fr] grid-rows-[1fr_auto_1fr] mt-6">
+      <div class="col-start-2 pb-18px">
+        <el-slider v-model="xValue" :disabled="!enableValue" class="[&_.el-slider\_\_bar]:!bg-transparent" :min="0"
+          :max="1920" />
+      </div>
+      <div class="col-start-1 flex justify-end pr-18px">
+        <el-slider v-model="yRevert" vertical :min="0" :max="1080" :format-tooltip="(value) => `${1080 - value}`"
+          class="[&_.el-slider\_\_bar]:!bg-transparent" :disabled="!enableValue" />
+      </div>
+      <div class="relative col-start-2 mx-auto h-360px w-640px of-hidden rounded-10px ring-18px ring-gray-300">
+        <div class="absolute right-0 top-0 text-9px font-bold leading-12px -translate-y-full">
+          <el-text>
+            Full HD: <span>1920 x 1080</span>
+          </el-text>
+        </div>
+        <div class="absolute h-full w-full bg-#000">
+          <el-image v-if="data?.uri" :src="data.uri" :style="imageStyles" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/channel/WatermarkPreview.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+const { prop } = definePropsRefs<{
+  prop: string
+}>()
+const [watermarkValue] = useElField<boolean>(prop.value)
+</script>
+
+<template>
+  <div class="relative mx-auto mb-12px h-396px w-676px border-18px border-gray-300 rounded-10px border-solid">
+    <div class="absolute right-0 top-0 text-9px font-bold leading-12px -translate-y-full">
+      <el-text>
+        Full HD: <span>1920 x 1080</span>
+      </el-text>
+    </div>
+    <div class="absolute h-full w-full bg-#000">
+      <WatermarkDraggableItem v-if="watermarkValue" v-model="watermarkValue" />
+    </div>
+  </div>
+</template>

package/src/components/common/Vue3DraggableResizable/Container.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { computed, provide, ref } from 'vue'
+
+const props = defineProps({
+  grid: {
+    type: Array,
+    default: () => [1, 1],
+    validator: val =>
+      Array.isArray(val)
+      && typeof val[0] === 'number'
+      && typeof val[1] === 'number',
+  },
+  showGrid: {
+    type: [Boolean, String],
+    default: false,
+    validator: val => [true, false, 'x', 'y', 'both'].includes(val),
+  },
+  gridColor: {
+    type: String,
+    default: 'rgba(0, 0, 0, 0.1)',
+  },
+  className: {
+    type: String,
+    default: 'drv-container',
+  },
+})
+
+const grid = computed(() => {
+  return props.grid
+})
+
+const className = computed(() => {
+  return props.className
+})
+
+provide('drvContainerClass', className)
+provide('drvContainerGrid', grid)
+
+// const emit = defineEmits(['dragging', 'dragstop', 'activated', 'deactivated'])
+
+const el = ref(null)
+
+const gridBackgroundStyle = computed(() => {
+  const axisBg = {
+    x: `linear-gradient(-90deg, ${props.gridColor} 1px, transparent 1px) 0px 0px / ${props.grid[0]}px ${props.grid[0]}px`,
+    y: `linear-gradient(0deg, ${props.gridColor} 1px, transparent 1px) 0px 0px / ${props.grid[1]}px ${props.grid[1]}px`,
+  }
+
+  if (props.showGrid === 'x' || props.showGrid === 'y')
+    return axisBg[props.showGrid]
+
+  return props.showGrid ? `${axisBg.x}, ${axisBg.y}` : null
+})
+
+const style = computed(() => {
+  const style = {
+    position: 'relative',
+  }
+
+  if (props.showGrid)
+    style.background = gridBackgroundStyle.value
+
+  return style
+})
+</script>
+
+<template>
+  <div ref="el" :style="style" :class="[className]">
+    <slot />
+  </div>
+</template>