@sigmaott/base-library-next 2.1.9

package/src/components/profile/TableColumns.vue

@@ -0,0 +1,137 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <el-table-column :label="$t('profile.name')" prop="name" width="250" show-overflow-tooltip sortable>
+    <template #default="scope">
+      {{ scope.row.name }}
+    </template>
+  </el-table-column>
+  <el-table-column label="Video" prop="video" width="515">
+    <template #default="scope">
+      <el-scrollbar max-height="135px" class="pr-4px">
+        <SharedMediaInfoViewer
+          v-for="(item, idx) in scope.row.video || []" :key="idx" :media="item"
+          class="w-96% justify-center"
+        />
+      </el-scrollbar>
+      <!-- <SharedPopoverProfile :media="scope.row.video" /> -->
+    </template>
+  </el-table-column>
+  <el-table-column label="Audio" prop="audio" min-width="350">
+    <template #default="scope">
+      <div v-if="scope.row?.audio?.length === 0" class="text-center" style="color: #97a8be; margin-left: 8px">
+        No Item
+      </div>
+
+      <div v-else class="flex gap-2px">
+        <template v-for="(item) in scope.row.audio?.slice(0, 2) || []" :key="item.id">
+          <div v-if="scope.row.audio?.length > 2" class="item-list-row max-w-150px flex items-center gap-1">
+            <div class="i-ep:headset min-w-14px text-primary" />
+            <SSTooltipEllipsis :content="item.name" :line-clamp="1" />
+          </div>
+          <el-popover
+            v-else
+            placement="bottom"
+            trigger="hover"
+            :width="500"
+          >
+            <template #reference>
+              <div class="item-list-row max-w-150px flex items-center gap-1">
+                <div class="i-ep:headset min-w-14px text-primary" />
+                <SSTooltipEllipsis :content="item.name" :line-clamp="1" />
+              </div>
+            </template>
+            <el-scrollbar>
+              <SharedMediaInfoViewer
+                v-for="(i, idx) in scope.row.audio || []" :key="idx" class="w-96% justify-center"
+                :media="i"
+              />
+            </el-scrollbar>
+          </el-popover>
+        </template>
+        <el-popover
+          v-if="scope.row.audio?.length > 2"
+          placement="bottom"
+          trigger="hover"
+          :width="500"
+        >
+          <template #reference>
+            <span class="item-list-row">
+              ...
+            </span>
+          </template>
+          <el-scrollbar height="200px">
+            <SharedMediaInfoViewer
+              v-for="(i, idx) in scope.row.audio || []" :key="idx" class="w-96% justify-center"
+              :media="i"
+            />
+          </el-scrollbar>
+        </el-popover>
+        <!-- <SharedPopoverProfile :media="scope.row.audio" /> -->
+      </div>
+    </template>
+  </el-table-column>
+  <el-table-column label="Data" prop="data" min-width="350">
+    <template #default="scope">
+      <div v-if="scope.row?.data?.length === 0" class="text-center" style="color: #97a8be; margin-left: 8px">
+        No Item
+      </div>
+      <div v-else class="flex gap-2px">
+        <template v-for="(item) in scope.row.data?.slice(0, 2) || []" :key="item.id">
+          <div v-if="scope.row.data?.length > 2" class="item-list-row max-w-150px flex items-center gap-1">
+            <div class="i-ep:menu min-w-14px text-primary" />
+            <SSTooltipEllipsis :content="item.name" :line-clamp="1" />
+          </div>
+          <el-popover
+            v-else
+            placement="bottom"
+            trigger="hover"
+            :width="500"
+          >
+            <template #reference>
+              <div class="item-list-row max-w-150px flex items-center gap-1">
+                <div class="i-ep:menu min-w-14px text-primary" />
+                <SSTooltipEllipsis :content="item.name" :line-clamp="1" />
+              </div>
+            </template>
+            <el-scrollbar>
+              <SharedMediaInfoViewer
+                v-for="(i, idx) in scope.row.data || []" :key="idx" class="w-96% justify-center"
+                :media="i"
+              />
+            </el-scrollbar>
+          </el-popover>
+        </template>
+        <el-popover
+          v-if="scope.row.data?.length > 2"
+          placement="bottom"
+          trigger="hover"
+          :width="500"
+        >
+          <template #reference>
+            <span class="item-list-row">
+              ...
+            </span>
+          </template>
+          <el-scrollbar height="200px">
+            <SharedMediaInfoViewer
+              v-for="(i, idx) in scope.row.data || []" :key="idx" class="w-96% justify-center"
+              :media="i"
+            />
+          </el-scrollbar>
+        </el-popover>
+      </div>
+    </template>
+  </el-table-column>
+</template>
+
+<style scoped>
+.item-list-row {
+  padding: 5px;
+  position: relative;
+  border: 1px solid rgba(64, 158, 255, 0.4);
+  border-radius: 4px;
+}
+</style>

package/src/components/shared/AudioInfoViewer.vue

@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import { fileSizeFilter } from './fileSizeFilter'
+
+defineProps<{
+  audio: any
+}>()
+</script>
+
+<template>
+  <div class="item-list-row flex justify-center">
+    <ul class="flex flex-wrap justify-center">
+      <li>
+        <el-icon>
+          <div class="i-ep:headset text-primary" />
+        </el-icon>
+        <el-icon v-if="audio.codec === 'copy'" class="text-indigo-500" name="document-copy">
+          <div class="i-ep:document-copy text-indigo-500" />
+        </el-icon>&nbsp;
+        <span class="item__name" :title="audio.name">{{
+          (audio && audio.name) || '-'
+        }}</span>
+      </li>
+      <span class="text-gray-400">&nbsp;|&nbsp;</span>
+      <li title="Codec">
+        <el-icon>
+          <div class="i-ep:grid text-indigo-500" />
+        </el-icon>&nbsp;
+        <span class="item__name">{{ audio.codec }}</span>
+      </li>
+      <span class="text-gray-400">&nbsp;|&nbsp;</span>
+      <li title="Bitrate">
+        <el-icon>
+          <div class="i-ep:scale-to-original text-teal-600" />
+        </el-icon>&nbsp;
+        <span>{{ audio.bitrate ? fileSizeFilter(audio.bitrate) : fileSizeFilter(audio.audioBitrate) }}/s</span>
+      </li>
+      <span class="text-gray-400">&nbsp;|&nbsp;</span>
+      <li title="Sample rate">
+        <el-icon>
+          <div class="i-ep:message-box text-indigo-500" />
+        </el-icon>&nbsp;
+        <span>{{ audio.sampleRate || '-' }}</span>
+      </li>
+      <span class="text-gray-400">&nbsp;|&nbsp;</span>
+      <li title="Profile">
+        <el-icon>
+          <div class="i-ep:credit-card" :class="!audio.profile || 'text-teal-600'" />
+        </el-icon>&nbsp;
+        <span>{{ audio.profile || '-' }}</span>
+      </li>
+      <span class="text-gray-400">&nbsp;|&nbsp;</span>
+      <li title="Channel">
+        <el-icon>
+          <div class="i-ep:scale-to-original text-teal-600" />
+        </el-icon>&nbsp;
+        <span>{{ audio.channel || '-' }}</span>
+      </li>
+    </ul>
+
+    <div v-if="$slots && $slots.anchor" class="anchor">
+      <slot name="anchor" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.item-list-row {
+  margin: 5px;
+  padding: 5px;
+  position: relative;
+  border: 1px solid rgba(230, 162, 60, 0.4);
+  border-radius: 4px;
+
+  ul {
+    li {
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+    }
+
+    .item__name {
+      max-width: 85px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .anchor {
+    padding: 5px;
+    margin: -5px -5px -5px 5px;
+    display: flex;
+    flex-direction: column;
+    border-left: 1px solid;
+    border-color: inherit;
+    background-color: rgba(230, 162, 60, 0.2);
+    border-top-right-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+}
+</style>

package/src/components/shared/MediaInfoViewer.vue

@@ -0,0 +1,249 @@
+<script setup lang="ts">
+// import { fileSizeFilter } from './fileSizeFilter'
+
+const props = defineProps<{ media: any }>()
+
+const hasInterlaced = computed(() => {
+  return (
+    (props.media && props.media.interlaced)
+    || (props.media
+    && !props.media.interlaced
+    && typeof props.media.interlaced === 'boolean')
+  )
+})
+
+const hasCbr = computed(() => {
+  return (
+    (props.media && props.media.cbr)
+    || (props.media && !props.media.cbr && typeof props.media.cbr === 'boolean')
+  )
+})
+
+function fileSizeFilter(size: number) {
+  if (Number.isNaN(size))
+    size = 0
+
+  return `${(size / 1024).toFixed(2)} KB`
+}
+</script>
+
+<template>
+  <div class="item-list-row inline-flex">
+    <ul class="flex flex-wrap items-center justify-center">
+      <template v-if="media && media.name && media.type !== 'video'">
+        <li title="Name">
+          <el-icon>
+            <div class="i-ep:camera-filled text-primary" :class="media.type === 'audio' ? 'i-ep:headset' : 'i-ep:menu'" />
+          </el-icon>&nbsp;
+          <span v-if="media.codec === 'copy'">&nbsp;</span>
+          <span class="item__name" :title="media.name">{{
+            (media && media.name) || '-'
+          }}</span>
+        </li>
+      </template>
+      <template v-if="media && media.codec">
+        <li title="Codec">
+          <el-icon>
+            <div class="i-ep:grid text-indigo-500" />
+          </el-icon>&nbsp;
+          <span>{{ media.codec }}</span>
+        </li>
+      </template>
+      <template v-if="media && (media.height || media.width) && media.type !== 'data'">
+        <li title="Resolution">
+          <el-icon name="crop">
+            <div class="i-ep:crop text-pink-600" />
+          </el-icon>&nbsp;
+          <span>{{ media.width }}x{{ media.height }}</span>
+        </li>
+      </template>
+      <template v-if="(media?.videoBitrate || media?.audioBitrate) && media.type !== 'data'">
+        <li title="Bitrate">
+          <el-icon>
+            <div class="i-ep:scale-to-original text-teal-600" />
+          </el-icon>&nbsp;
+          <span>{{ media.audioBitrate ? fileSizeFilter(media.audioBitrate || media.bitrate) : fileSizeFilter(media.videoBitrate || media.bitrate) }}/s</span>
+        </li>
+      </template>
+      <template v-if="media?.fps && media?.fps !== 0 && media.type !== 'data'">
+        <li title="FPS">
+          <el-icon>
+            <div class="i-ep:sort text-green-600" />
+          </el-icon>&nbsp;
+          <span>{{ media.fps }} fps</span>
+        </li>
+      </template>
+      <template v-if="media && media?.sampleRate && media.type !== 'data' && media.type !== 'video'">
+        <li title="Sample rate">
+          <el-icon>
+            <div class="i-ep:message-box text-indigo-500" />
+          </el-icon>&nbsp;
+          <span>{{ media.sampleRate || '-' }}</span>
+        </li>
+      </template>
+      <!-- <template v-if="media.type === 'video'">
+        <li title="CBR">
+          <el-icon>
+            <div class="i-ep:switch-button" :class="media.cbr ? 'text-success' : 'text-gray-400'" />
+          </el-icon>
+          &nbsp;
+          <span> cbr </span>
+        </li>
+      </template>
+      <template v-if="media.type === 'video'">
+        <li title="Pixel format">
+          <el-icon>
+            <div class="i-ep:picture" :class="!media.pixelFormat || 'text-indigo-500'" />
+          </el-icon>&nbsp;
+          <span>{{ media.pixelFormat || '-' }}</span>
+        </li>
+      </template>
+      <template v-if="media.type === 'video'">
+        <li title="Scale type">
+          <el-icon>
+            <div class="i-ep:scale-to-original" :class="!media.scaleType || 'text-pink-600'" />
+          </el-icon>&nbsp;
+          <span>{{ media.scaleType || '-' }}</span>
+        </li>
+      </template>
+
+      <template v-if="media.type === 'video'">
+        <li title="Constant quality">
+          <el-icon>
+            <div class="i-ep:star-filled" :class="!media.cq || 'text-teal-600'" />
+          </el-icon>&nbsp;
+          <span>{{ media.cq || '-' }}</span>
+        </li>
+      </template>
+
+      <template v-if="media.type === 'video'">
+        <li title="Interlaced mode">
+          <el-icon>
+            <div class="i-ep:switch-button" :class="media.interlaced ? 'text-success' : 'text-gray-400'" />
+          </el-icon>
+          &nbsp;
+          <span> interlaced </span>
+        </li>
+      </template> -->
+      <template v-if="media && media.channel && media.type === 'audio'">
+        <li title="Channel">
+          <el-icon>
+            <div class="i-ep:platform text-pink-600" />
+          </el-icon>&nbsp;
+          <span>{{ media.channel || '-' }}</span>
+        </li>
+      </template>
+      <template v-if="media && media.bframe && media.type !== 'video' && media.type !== 'data'">
+        <li title="Bframe">
+          <el-icon>
+            <div class="i-ep:full-screen text-indigo-500" />
+          </el-icon>&nbsp;
+          <span>{{ media.bframe || '-' }}</span>
+        </li>
+      </template>
+      <template v-if="media && media.profile && media.type !== 'data'">
+        <li title="Profile">
+          <el-icon>
+            <div class="i-ep:credit-card text-gray-400" />
+          </el-icon>&nbsp;
+          <span>{{ media.profile || '-' }}</span>
+        </li>
+      </template>
+      <template v-if="media && media.level">
+        <li title="Level">
+          <el-icon>
+            <div class="i-ep:star text-indigo-500" />
+          </el-icon>&nbsp;
+          <span>{{ media.level || '-' }}</span>
+        </li>
+      </template>
+      <template v-if="media && media.colorRange">
+        <li title="Color range">
+          <el-icon>
+            <div class="i-ep:brush text-green-600" />
+          </el-icon>&nbsp;
+          <span>Range:
+            <span class="font-medium">{{ media.colorRange || '-' }}</span></span>
+        </li>
+      </template>
+      <template v-if="media && media.colorTransfer">
+        <li title="Color transfer">
+          <el-icon>
+            <div class="i-ep:brush text-green-600" />
+          </el-icon>&nbsp;
+          <span>Transfer:
+            <span class="font-medium">{{
+              media.colorTransfer || '-'
+            }}</span></span>
+        </li>
+      </template>
+      <template v-if="media && media.colorPrimaries">
+        <li title="Color primaries">
+          <el-icon>
+            <div class="i-ep:brush text-green-600" />
+          </el-icon>&nbsp;
+          <span>Primary:
+            <span class="font-medium">{{
+              media.colorPrimaries || '-'
+            }}</span></span>
+        </li>
+      </template>
+      <template v-if="media && media.colorSpace">
+        <li title="Color space">
+          <el-icon>
+            <div class="i-ep:brush text-green-600" />
+          </el-icon>&nbsp;
+          <span>Space:
+            <span class="font-medium">{{ media.colorSpace || '-' }}</span></span>
+        </li>
+      </template>
+    </ul>
+    <div v-if="$slots && $slots.anchor" class="anchor">
+      <slot name="anchor" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.item-list-row {
+  margin: 5px;
+  padding: 5px;
+  position: relative;
+  border: 1px solid rgba(64, 158, 255, 0.4);
+  border-radius: 4px;
+
+  ul {
+    li {
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+
+      &:not(:last-child):after {
+        content: '|';
+        display: inline-block;
+        color: #9ca3af;
+        padding: 0 0.3rem;
+      }
+    }
+
+    .item__name {
+      max-width: 85px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .anchor {
+    padding: 5px;
+    margin: -5px -5px -5px 5px;
+    display: flex;
+    flex-direction: column;
+    border-left: 1px solid;
+    border-color: inherit;
+    background-color: rgba(64, 158, 255, 0.2);
+    border-top-right-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+}
+</style>

package/src/components/shared/MediaInfoViewerSmall.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+// import { fileSizeFilter } from './fileSizeFilter'
+
+defineProps<{ media: any; encoding?: boolean }>()
+
+function fileSizeFilter(size: number) {
+  if (Number.isNaN(size))
+    size = 0
+
+  return `${(size / 1024).toFixed(2)} KB`
+}
+</script>
+
+<template>
+  <div class="item-list-row relative inline-flex border-1px border-primary rounded-4px border-solid p-5px">
+    <ul class="flex flex-wrap items-center justify-center">
+      <template v-if="media?.name && media?.type !== 'video'">
+        <el-tooltip :content="$t('profile.name')" placement="top">
+          <li>
+            <el-icon>
+              <div class="i-ep:camera-filled text-primary" />
+            </el-icon>&nbsp;
+            <el-icon v-if="media.codec === 'copy'" class="">
+              <div class="i-ep:document-copy text-indigo-500" />
+            </el-icon>
+            <span v-if="media.codec === 'copy'">&nbsp;</span>
+            <span class="item__name">{{ (media.name) || '-' }}</span>
+          </li>
+        </el-tooltip>
+      </template>
+      <template v-if="media?.codec">
+        <el-tooltip content="Codec" placement="top">
+          <li>
+            <el-icon>
+              <div class="i-ep:grid text-indigo-500" />
+            </el-icon>&nbsp;
+            <span>{{ media.codec }}</span>
+          </li>
+        </el-tooltip>
+      </template>
+      <template v-if="media && (media.height || media.width)">
+        <el-tooltip content="Resolution" placement="top">
+          <li>
+            <el-icon name="crop">
+              <div class="i-ep:crop text-pink-600" />
+            </el-icon>&nbsp;
+            <span>{{ media.width }}x{{ media.height }}</span>
+          </li>
+        </el-tooltip>
+      </template>
+      <template v-if="media.bitrate">
+        <el-tooltip content="Bitrate" placement="top">
+          <li>
+            <el-icon>
+              <div class="i-ep:scale-to-original text-teal-600" />
+            </el-icon>&nbsp;
+            <span v-if="!encoding">{{ fileSizeFilter(media.bitrate) }}/s</span>
+            <span v-else>optimized</span>
+          </li>
+        </el-tooltip>
+      </template>
+      <template v-if="media.fps && media.fps !== 0">
+        <el-tooltip content="FPS" placement="top">
+          <li>
+            <el-icon>
+              <div class="i-ep:sort text-green-600" />
+            </el-icon>&nbsp;
+            <span>{{ media.fps }} fps</span>
+          </li>
+        </el-tooltip>
+      </template>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.item-list-row {
+  padding: 5px;
+  position: relative;
+  border: 1px solid rgba(64, 158, 255, 0.4);
+  border-radius: 4px;
+
+  ul {
+    li {
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+
+      &:not(:last-child):after {
+        content: '|';
+        display: inline-block;
+        color: #9ca3af;
+        padding: 0 0.3rem;
+      }
+    }
+
+    .item__name {
+      max-width: 85px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}
+</style>

package/src/components/shared/PopoverProfile.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const props = defineProps<{ media: any }>()
+</script>
+
+<template>
+    <el-popover placement="bottom" trigger="hover" width="auto">
+        <template #reference>
+            <el-tag type="info" class="mx-1 my-1">
+                {{ props?.media?.length ?? 0 }}
+            </el-tag>
+        </template>
+        <SharedMediaInfoViewer 
+            v-for="(item, idx) in props.media || []" :key="idx" :media="item"
+            class="w-96% justify-center" 
+        />
+    </el-popover>
+</template>