@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/Asset/VideoPreviewWrapper.vue

@@ -1,208 +1,208 @@
-<script setup lang="ts">
-const props = defineProps<{
-  show: boolean
-}>()
-
-const {
-  vttLink,
-  playVisible,
-  isHls1,
-  isDash1,
-  isHls2,
-  isDash2,
-  serverId,
-  isSigmaMediaServer,
-  handleChangeSrc,
-  srcPreview1,
-  srcPreview2,
-  playMode1,
-  playMode2,
-  catchupTime1,
-  catchupTime2,
-  delayTime1,
-  delayTime2,
-  timeshiftTime1,
-  timeshiftTime2,
-  videoType1,
-  videoType2,
-  nameOutput,
-  typeOutput,
-  drm1,
-  drm2,
-} = useInjectJobPreview()
-
-const src1 = ref(srcPreview1.value)
-const src2 = ref(srcPreview2.value)
-
-const _playMode1 = ref(playMode1.value)
-const _playMode2 = ref(playMode2.value)
-
-const _catchupTime1 = ref(catchupTime1.value)
-const _catchupTime2 = ref(catchupTime2.value)
-
-const _delayTime1 = ref(delayTime1.value)
-const _delayTime2 = ref(delayTime2.value)
-
-const _timeshiftTime1 = ref(timeshiftTime1.value)
-const _timeshiftTime2 = ref(timeshiftTime2.value)
-
-const _videoType1 = ref(videoType1.value)
-const _videoType2 = ref(videoType2.value)
-
-const _drm1 = ref(drm1.value)
-const _drm2 = ref(drm2.value)
-
-function handleReload1() {
-  playMode1.value = _playMode1.value
-  catchupTime1.value = _catchupTime1.value
-  delayTime1.value = _delayTime1.value || 30
-  timeshiftTime1.value = _timeshiftTime1.value || 30
-  videoType1.value = _videoType1.value
-  drm1.value = _drm1.value
-  playVisible.value = false
-
-  srcPreview1.value = handleChangeSrc({
-    srcStr: src1.value,
-    playMode: _playMode1.value,
-    catchupTime: _catchupTime1.value,
-    delayTime: _delayTime1.value,
-    timeshiftTime: _timeshiftTime1.value,
-    videoType: _videoType1.value,
-  })
-  nextTick(() => {
-    playVisible.value = true
-  })
-}
-
-function handleReload2() {
-  playMode2.value = _playMode2.value
-  catchupTime2.value = _catchupTime2.value
-  delayTime2.value = _delayTime2.value || 30
-  timeshiftTime2.value = _timeshiftTime2.value || 30
-  videoType2.value = _videoType2.value
-  drm2.value = _drm2.value
-  playVisible.value = false
-
-  srcPreview2.value = handleChangeSrc({
-    srcStr: src2.value,
-    playMode: _playMode2.value,
-    catchupTime: _catchupTime2.value,
-    delayTime: _delayTime2.value,
-    timeshiftTime: _timeshiftTime2.value,
-    videoType: _videoType2.value,
-  })
-
-  nextTick(() => {
-    playVisible.value = true
-  })
-}
-
-const delayShow = ref(false)
-const loadingShow = ref(false)
-
-watchImmediate(() => props.show, async (val) => {
-  if (val) {
-    loadingShow.value = true
-    await nextTick()
-    setTimeout(() => {
-      delayShow.value = true
-      loadingShow.value = false
-    }, 1500)
-  }
-})
-</script>
-
-<template>
-  <div class="grid gap-2 divide-x" :class="{ 'grid-cols-2': show }">
-    <SSAssetVideoPreviewNew
-      v-if="playVisible"
-      v-model:src="src1"
-      :vtt="vttLink"
-      :is-hls="isHls1"
-      :is-dash="isDash1"
-      :play-mode="playMode1"
-      :drm="drm1"
-      @config-route="() => isSigmaMediaServer
-        ? props.openMicroApp('machine', 'machine', `/server/list?config_id=${serverId}`)
-        : props.openMicroApp('machine', 'machine', `/server/cluster?config_id=${serverId}`)"
-    >
-      <SSAssetVideoPreviewConfig
-        v-model:src="src1"
-        v-model:drm="_drm1"
-        v-model:play-mode="_playMode1"
-        v-model:catchup-time="_catchupTime1"
-        v-model:delay-time="_delayTime1"
-        v-model:timeshift-time="_timeshiftTime1"
-        v-model:video-type="_videoType1"
-        :name-output="nameOutput"
-        :type-output="typeOutput"
-        @reload="handleReload1"
-      >
-        <div class="flex items-center justify-center">
-          <div class="text-sm font-semibold">
-            <div v-if="playMode1 === 'catchup'">
-              {{ $t('base.you_are_currently_viewing_the_preview_with_the_mode_being') }} <span class="text-primary font-bold">catchup mode</span>,{{ $t('base.with_the_select_time_being') }} <span class="text-primary font-bold">{{ catchupTime1?.[0] }} - {{ catchupTime1?.[1] }} </span>
-            </div>
-            <div v-if="playMode1 === 'live'">
-              {{ $t('base.you_are_currently_viewing_the_preview_with_the_mode_being') }} <span class="text-primary font-bold">live mode</span>
-            </div>
-            <div v-if="playMode1 === 'delay'">
-              {{ $t('base.you_are_currently_viewing_the_preview_with_the_mode_being') }} <span class="text-primary font-bold">delay mode</span>,{{ $t('base.with_the_delay_time_being') }} <span class="text-primary font-bold">{{ delayTime1 }} {{ $t('base.seconds') }}</span>
-            </div>
-            <div v-if="playMode1 === 'timeshift'">
-              {{ $t('base.you_are_currently_viewing_the_preview_with_the_mode_being') }} <span class="text-primary font-bold">timeshift mode</span>, {{ $t('base.with_the_timeshift_time_being') }} <span class="text-primary font-bold">{{ timeshiftTime1 }} {{ $t('base.seconds') }}</span>
-            </div>
-          </div>
-        </div>
-      </SSAssetVideoPreviewConfig>
-    </SSAssetVideoPreviewNew>
-
-    <div v-if="loadingShow" class="flex flex-col items-center justify-center">
-      <el-skeleton class="h-full w-full" />
-      <el-skeleton class="h-full w-full" />
-    </div>
-    <SSAssetVideoPreviewNew
-      v-else-if="playVisible && delayShow && show"
-      v-model:src="src2"
-      class="pl-2"
-      :vtt="vttLink"
-      :is-hls="isHls2"
-      :is-dash="isDash2"
-      :play-mode="playMode2"
-      :drm="drm2"
-      @config-route="() => isSigmaMediaServer
-        ? props.openMicroApp('machine', 'machine', `/server/list?config_id=${serverId}`)
-        : props.openMicroApp('machine', 'machine', `/server/cluster?config_id=${serverId}`)"
-    >
-      <SSAssetVideoPreviewConfig
-        v-model:src="src2"
-        v-model:drm="_drm2"
-        v-model:play-mode="_playMode2"
-        v-model:catchup-time="_catchupTime2"
-        v-model:delay-time="_delayTime2"
-        v-model:timeshift-time="_timeshiftTime2"
-        v-model:video-type="_videoType2"
-        :name-output="nameOutput"
-        :type-output="typeOutput"
-        @reload="handleReload2"
-      >
-        <div class="flex items-center justify-center">
-          <div class="text-sm font-semibold">
-            <div v-if="playMode2 === 'catchup'">
-              {{ $t('base.you_are_currently_viewing_the_preview_with_the_mode_being') }} <span class="text-primary font-bold">catchup mode</span>,{{ $t('base.with_the_select_time_being') }} <span class="text-primary font-bold">{{ _catchupTime2?.[0] }} - {{ _catchupTime2?.[1] }} </span>
-            </div>
-            <div v-if="playMode2 === 'live'">
-              {{ $t('base.you_are_currently_viewing_the_preview_with_the_mode_being') }} <span class="text-primary font-bold">live mode</span>
-            </div>
-            <div v-if="playMode2 === 'delay'">
-              {{ $t('base.you_are_currently_viewing_the_preview_with_the_mode_being') }} <span class="text-primary font-bold">delay mode</span>,{{ $t('base.with_the_delay_time_being') }} <span class="text-primary font-bold">{{ delayTime2 }} {{ $t('base.seconds') }}</span>
-            </div>
-            <div v-if="playMode2 === 'timeshift'">
-              {{ $t('base.you_are_currently_viewing_the_preview_with_the_mode_being') }} <span class="text-primary font-bold">timeshift mode</span>, {{ $t('base.with_the_timeshift_time_being') }} <span class="text-primary font-bold">{{ timeshiftTime2 }} {{ $t('base.seconds') }}</span>
-            </div>
-          </div>
-        </div>
-      </SSAssetVideoPreviewConfig>
-    </SSAssetVideoPreviewNew>
-  </div>
-</template>
+<script setup lang="ts">
+const props = defineProps<{
+  show: boolean
+}>()
+
+const {
+  vttLink,
+  playVisible,
+  isHls1,
+  isDash1,
+  isHls2,
+  isDash2,
+  serverId,
+  isSigmaMediaServer,
+  handleChangeSrc,
+  srcPreview1,
+  srcPreview2,
+  playMode1,
+  playMode2,
+  catchupTime1,
+  catchupTime2,
+  delayTime1,
+  delayTime2,
+  timeshiftTime1,
+  timeshiftTime2,
+  videoType1,
+  videoType2,
+  nameOutput,
+  typeOutput,
+  drm1,
+  drm2,
+} = useInjectJobPreview()
+
+const src1 = ref(srcPreview1.value)
+const src2 = ref(srcPreview2.value)
+
+const _playMode1 = ref(playMode1.value)
+const _playMode2 = ref(playMode2.value)
+
+const _catchupTime1 = ref(catchupTime1.value)
+const _catchupTime2 = ref(catchupTime2.value)
+
+const _delayTime1 = ref(delayTime1.value)
+const _delayTime2 = ref(delayTime2.value)
+
+const _timeshiftTime1 = ref(timeshiftTime1.value)
+const _timeshiftTime2 = ref(timeshiftTime2.value)
+
+const _videoType1 = ref(videoType1.value)
+const _videoType2 = ref(videoType2.value)
+
+const _drm1 = ref(drm1.value)
+const _drm2 = ref(drm2.value)
+
+function handleReload1() {
+  playMode1.value = _playMode1.value
+  catchupTime1.value = _catchupTime1.value
+  delayTime1.value = _delayTime1.value || 30
+  timeshiftTime1.value = _timeshiftTime1.value || 30
+  videoType1.value = _videoType1.value
+  drm1.value = _drm1.value
+  playVisible.value = false
+
+  srcPreview1.value = handleChangeSrc({
+    srcStr: src1.value,
+    playMode: _playMode1.value,
+    catchupTime: _catchupTime1.value,
+    delayTime: _delayTime1.value,
+    timeshiftTime: _timeshiftTime1.value,
+    videoType: _videoType1.value,
+  })
+  nextTick(() => {
+    playVisible.value = true
+  })
+}
+
+function handleReload2() {
+  playMode2.value = _playMode2.value
+  catchupTime2.value = _catchupTime2.value
+  delayTime2.value = _delayTime2.value || 30
+  timeshiftTime2.value = _timeshiftTime2.value || 30
+  videoType2.value = _videoType2.value
+  drm2.value = _drm2.value
+  playVisible.value = false
+
+  srcPreview2.value = handleChangeSrc({
+    srcStr: src2.value,
+    playMode: _playMode2.value,
+    catchupTime: _catchupTime2.value,
+    delayTime: _delayTime2.value,
+    timeshiftTime: _timeshiftTime2.value,
+    videoType: _videoType2.value,
+  })
+
+  nextTick(() => {
+    playVisible.value = true
+  })
+}
+
+const delayShow = ref(false)
+const loadingShow = ref(false)
+
+watchImmediate(() => props.show, async (val) => {
+  if (val) {
+    loadingShow.value = true
+    await nextTick()
+    setTimeout(() => {
+      delayShow.value = true
+      loadingShow.value = false
+    }, 1500)
+  }
+})
+</script>
+
+<template>
+  <div class="grid gap-2 divide-x" :class="{ 'grid-cols-2': show }">
+    <SSAssetVideoPreviewNew
+      v-if="playVisible"
+      v-model:src="src1"
+      :vtt="vttLink"
+      :is-hls="isHls1"
+      :is-dash="isDash1"
+      :play-mode="playMode1"
+      :drm="drm1"
+      @config-route="() => isSigmaMediaServer
+        ? props.openMicroApp('machine', 'machine', `/server/list?config_id=${serverId}`)
+        : props.openMicroApp('machine', 'machine', `/server/cluster?config_id=${serverId}`)"
+    >
+      <SSAssetVideoPreviewConfig
+        v-model:src="src1"
+        v-model:drm="_drm1"
+        v-model:play-mode="_playMode1"
+        v-model:catchup-time="_catchupTime1"
+        v-model:delay-time="_delayTime1"
+        v-model:timeshift-time="_timeshiftTime1"
+        v-model:video-type="_videoType1"
+        :name-output="nameOutput"
+        :type-output="typeOutput"
+        @reload="handleReload1"
+      >
+        <div class="flex items-center justify-center">
+          <div class="text-sm font-semibold">
+            <div v-if="playMode1 === 'catchup'">
+              {{ $t('base.you_are_currently_viewing_the_preview_with_the_mode_being') }} <span class="text-primary font-bold">catchup mode</span>,{{ $t('base.with_the_select_time_being') }} <span class="text-primary font-bold">{{ catchupTime1?.[0] }} - {{ catchupTime1?.[1] }} </span>
+            </div>
+            <div v-if="playMode1 === 'live'">
+              {{ $t('base.you_are_currently_viewing_the_preview_with_the_mode_being') }} <span class="text-primary font-bold">live mode</span>
+            </div>
+            <div v-if="playMode1 === 'delay'">
+              {{ $t('base.you_are_currently_viewing_the_preview_with_the_mode_being') }} <span class="text-primary font-bold">delay mode</span>,{{ $t('base.with_the_delay_time_being') }} <span class="text-primary font-bold">{{ delayTime1 }} {{ $t('base.seconds') }}</span>
+            </div>
+            <div v-if="playMode1 === 'timeshift'">
+              {{ $t('base.you_are_currently_viewing_the_preview_with_the_mode_being') }} <span class="text-primary font-bold">timeshift mode</span>, {{ $t('base.with_the_timeshift_time_being') }} <span class="text-primary font-bold">{{ timeshiftTime1 }} {{ $t('base.seconds') }}</span>
+            </div>
+          </div>
+        </div>
+      </SSAssetVideoPreviewConfig>
+    </SSAssetVideoPreviewNew>
+
+    <div v-if="loadingShow" class="flex flex-col items-center justify-center">
+      <el-skeleton class="h-full w-full" />
+      <el-skeleton class="h-full w-full" />
+    </div>
+    <SSAssetVideoPreviewNew
+      v-else-if="playVisible && delayShow && show"
+      v-model:src="src2"
+      class="pl-2"
+      :vtt="vttLink"
+      :is-hls="isHls2"
+      :is-dash="isDash2"
+      :play-mode="playMode2"
+      :drm="drm2"
+      @config-route="() => isSigmaMediaServer
+        ? props.openMicroApp('machine', 'machine', `/server/list?config_id=${serverId}`)
+        : props.openMicroApp('machine', 'machine', `/server/cluster?config_id=${serverId}`)"
+    >
+      <SSAssetVideoPreviewConfig
+        v-model:src="src2"
+        v-model:drm="_drm2"
+        v-model:play-mode="_playMode2"
+        v-model:catchup-time="_catchupTime2"
+        v-model:delay-time="_delayTime2"
+        v-model:timeshift-time="_timeshiftTime2"
+        v-model:video-type="_videoType2"
+        :name-output="nameOutput"
+        :type-output="typeOutput"
+        @reload="handleReload2"
+      >
+        <div class="flex items-center justify-center">
+          <div class="text-sm font-semibold">
+            <div v-if="playMode2 === 'catchup'">
+              {{ $t('base.you_are_currently_viewing_the_preview_with_the_mode_being') }} <span class="text-primary font-bold">catchup mode</span>,{{ $t('base.with_the_select_time_being') }} <span class="text-primary font-bold">{{ _catchupTime2?.[0] }} - {{ _catchupTime2?.[1] }} </span>
+            </div>
+            <div v-if="playMode2 === 'live'">
+              {{ $t('base.you_are_currently_viewing_the_preview_with_the_mode_being') }} <span class="text-primary font-bold">live mode</span>
+            </div>
+            <div v-if="playMode2 === 'delay'">
+              {{ $t('base.you_are_currently_viewing_the_preview_with_the_mode_being') }} <span class="text-primary font-bold">delay mode</span>,{{ $t('base.with_the_delay_time_being') }} <span class="text-primary font-bold">{{ delayTime2 }} {{ $t('base.seconds') }}</span>
+            </div>
+            <div v-if="playMode2 === 'timeshift'">
+              {{ $t('base.you_are_currently_viewing_the_preview_with_the_mode_being') }} <span class="text-primary font-bold">timeshift mode</span>, {{ $t('base.with_the_timeshift_time_being') }} <span class="text-primary font-bold">{{ timeshiftTime2 }} {{ $t('base.seconds') }}</span>
+            </div>
+          </div>
+        </div>
+      </SSAssetVideoPreviewConfig>
+    </SSAssetVideoPreviewNew>
+  </div>
+</template>

package/src/components/Asset/asset-context.ts

@@ -1,24 +1,24 @@
-export const useSharedAssetFilters = createSharedComposable(() => {
-  const params = reactive({
-    page: 1,
-    perPage: 10,
-  })
-  const searchState = ref<string>()
-  const searchType = ref('image')
-  const searchCategory = ref<string | undefined>()
-
-  const paramQ = reactive({
-    q: { $and: [{ name: undefined }, {}] },
-  })
-
-  const searchPlayListId = ref<string >()
-
-  return {
-    searchState,
-    params,
-    searchType,
-    searchCategory,
-    paramQ,
-    searchPlayListId,
-  }
-})
+export const useSharedAssetFilters = createSharedComposable(() => {
+  const params = reactive({
+    page: 1,
+    perPage: 10,
+  })
+  const searchState = ref<string>()
+  const searchType = ref('image')
+  const searchCategory = ref<string | undefined>()
+
+  const paramQ = reactive({
+    q: { $and: [{ name: undefined }, {}] },
+  })
+
+  const searchPlayListId = ref<string >()
+
+  return {
+    searchState,
+    params,
+    searchType,
+    searchCategory,
+    paramQ,
+    searchPlayListId,
+  }
+})

package/src/components/Asset/usePickerStore.ts

@@ -1,55 +1,55 @@
-import { createInjectionState } from '@vueuse/core'
-import type { AxiosInstance } from 'axios'
-
-interface Options {
-  assetDomain?: string
-  axiosInstance: AxiosInstance
-}
-
-const [useProvidePickerStore, useStore] = createInjectionState((options: Options) => {
-  // state
-  const assetDomain = ref(options.assetDomain || '')
-  // getters
-
-  // actions
-
-  return {
-    assetDomain,
-    axiosInstance: options.axiosInstance,
-  }
-})
-
-export { useProvidePickerStore }
-
-export function usePickerStore() {
-  const store = useStore()
-  if (store == null)
-    throw new Error('Please call `useProvidePickerStore` on the appropriate parent component')
-  return store
-}
-
-// List
-interface AssetOptions {
-  selectable?: boolean
-}
-
-const [useProvideAssetStore, useStoreAsset] = createInjectionState((options: AssetOptions) => {
-  // state
-  const selectable = ref(options.selectable || false)
-  // getters
-
-  // actions
-
-  return {
-    selectable,
-  }
-})
-
-export { useProvideAssetStore }
-
-export function useAssetStore() {
-  const store = useStoreAsset()
-  if (store == null)
-    throw new Error('Please call `useProvideAssetStore` on the appropriate parent component')
-  return store
-}
+import { createInjectionState } from '@vueuse/core'
+import type { AxiosInstance } from 'axios'
+
+interface Options {
+  assetDomain?: string
+  axiosInstance: AxiosInstance
+}
+
+const [useProvidePickerStore, useStore] = createInjectionState((options: Options) => {
+  // state
+  const assetDomain = ref(options.assetDomain || '')
+  // getters
+
+  // actions
+
+  return {
+    assetDomain,
+    axiosInstance: options.axiosInstance,
+  }
+})
+
+export { useProvidePickerStore }
+
+export function usePickerStore() {
+  const store = useStore()
+  if (store == null)
+    throw new Error('Please call `useProvidePickerStore` on the appropriate parent component')
+  return store
+}
+
+// List
+interface AssetOptions {
+  selectable?: boolean
+}
+
+const [useProvideAssetStore, useStoreAsset] = createInjectionState((options: AssetOptions) => {
+  // state
+  const selectable = ref(options.selectable || false)
+  // getters
+
+  // actions
+
+  return {
+    selectable,
+  }
+})
+
+export { useProvideAssetStore }
+
+export function useAssetStore() {
+  const store = useStoreAsset()
+  if (store == null)
+    throw new Error('Please call `useProvideAssetStore` on the appropriate parent component')
+  return store
+}