Feature/#74657/after gold 3 (#148)

* feature #74657 after gold 3 features.

* feature #74657 security fix

* feature #74657 animation support

* feature #74657 fixes prettyBps

* feature #74657 vue search input warning fix.

* feature #74657 vue search input warning fix.

---------

Co-authored-by: Tomas Hermanek <[email protected]>

src/components/coreDam/FileUpload.vue

@@ -291,6 +291,11 @@ watch(selectedFiles, (newValue, oldValue) => {
       :height="height"
       @click.stop="clickDropzone"
     >
+      <template #prepend>
+        <VIcon
+          icon="mdi-upload"
+        />
+      </template>
       {{ buttonText }}
     </VBtn>
   </div>

src/components/wrappers/MainWrapper.vue

@@ -13,7 +13,6 @@ import AssetToolbarIntegrations from '@/views/coreDam/asset/components/toolbar/A
 import { ACL } from '@/types/Permission'
 import { AAdminSwitcher, ASystemBar } from '@anzusystems/common-admin'
 import { envConfig } from '@/services/EnvConfigService'
-import AssetToolbarExtSystemLicence from '@/views/coreDam/asset/components/toolbar/AssetToolbarExtSystemLicence.vue'
 
 const { t } = useI18n()
 
@@ -51,14 +50,18 @@ const { sidebarLeft, sidebarRight, customFooterHeight, customDialog } = useMainW
               >
             </RouterLink>
           </div>
+          <slot name="main-bar-left" />
+        </div>
+
+        <div class="d-flex align-center">
           <Acl :permission="ACL.DAM_ASSET_EXTERNAL_PROVIDER_ACCESS">
             <AssetToolbarIntegrations />
           </Acl>
-          <slot name="main-bar-left" />
+          <slot name="main-bar-middle" />
         </div>
+
         <div class="d-flex align-center">
           <slot name="main-bar-right" />
-          <AssetToolbarExtSystemLicence />
           <AssetToolbarOptions variant="main" />
           <AAdminSwitcher
             :config-url="envConfig.adminSwitcherConfigUrl"
@@ -100,6 +103,7 @@ const { sidebarLeft, sidebarRight, customFooterHeight, customDialog } = useMainW
               </VBtn>
               <slot name="second-bar-left" />
             </div>
+
             <div class="d-flex align-center">
               <slot name="second-bar-right" />
               <VBtn

src/locales/en.ts

@@ -10,6 +10,8 @@ import distributionCategorySelect from '@/locales/en/coreDam/distributionCategor
 import jwDistribution from '@/locales/en/coreDam/jwDistribution.json'
 import customDistribution from '@/locales/en/coreDam/customDistribution.json'
 import youtubeDistribution from '@/locales/en/coreDam/youtubeDistribution.json'
+import audioFile from '@/locales/en/coreDam/audioFile.json'
+import videoFile from '@/locales/en/coreDam/videoFile.json'
 import extSystem from '@/locales/en/coreDam/extSystem.json'
 import job from '@/locales/en/coreDam/job.json'
 import keyword from '@/locales/en/coreDam/keyword.json'
@@ -45,6 +47,8 @@ export default {
     user,
     videoShow,
     videoShowEpisode,
+    audioFile,
+    videoFile,
   },
   auth,
   sidebar,

src/locales/en/coreDam/asset.json

@@ -9,6 +9,7 @@
     "text": "Text",
     "type": "Type",
     "inPodcast": "In podcast",
+    "keywordIds": "Keyword ids",
     "fromRss": "From RSS",
     "distributedInServices": "Distributed in services",
     "slotNames": "Slot names",
@@ -147,7 +148,8 @@
         "dominantColor": "Color",
         "width": "Width",
         "height": "Height",
-        "ratio": "Ratio"
+        "ratio": "Ratio",
+        "animated": "Animated"
       }
     },
     "roi": {

src/locales/en/coreDam/audioFile.json

@@ -0,0 +1,8 @@
+{
+  "model": {
+    "audioAttributes": {
+      "codecName": "Codec",
+      "duration": "Duration"
+    }
+  }
+}

src/locales/en/coreDam/videoFile.json

@@ -0,0 +1,9 @@
+{
+  "model": {
+    "videoAttributes": {
+      "codecName": "Codec",
+      "duration": "Duration",
+      "bitrate": "Bitrate"
+    }
+  }
+}

src/locales/en/system.json

@@ -49,6 +49,7 @@
       "assets": "Assets"
     },
     "podcasts": "Podcasts",
+    "videoShows": "Video shows",
     "extSystemLicenceSwitch": {
       "filters": "Filters",
       "filter": {
@@ -64,7 +65,8 @@
       "title": "Switch DAM ext system and asset licence",
       "description": "Important: Please finish all work first, any progress will be lost!",
       "confirm": "Confirm and reload admin",
-      "changeToLicenceId": "Change to licence ID"
+      "changeToLicenceId": "Change to licence ID",
+      "changeLicence": "Change licence: {currentLicence}"
     }
   },
   "settings": {

src/locales/sk.ts

@@ -23,6 +23,8 @@ import apiValidation from '@/locales/sk/error/apiValidation.json'
 import apiForbiddenOperation from '@/locales/sk/error/apiForbiddenOperation.json'
 import jsValidation from '@/locales/sk/error/jsValidation.json'
 import breadcrumb from '@/locales/sk/breadcrumb.json'
+import audioFile from '@/locales/sk/coreDam/audioFile.json'
+import videoFile from '@/locales/sk/coreDam/videoFile.json'
 
 export default {
   common: messagesSk.common,
@@ -45,6 +47,8 @@ export default {
     user,
     videoShow,
     videoShowEpisode,
+    audioFile,
+    videoFile,
   },
   auth,
   sidebar,

src/locales/sk/coreDam/asset.json

@@ -9,6 +9,7 @@
     "text": "Text",
     "type": "Typ",
     "inPodcast": "V podcastoch",
+    "keywordIds": "Klúčové slová",
     "fromRss": "Z RSS",
     "distributedInServices": "Distribuované v službách",
     "slotNames": "Mená slotov",
@@ -148,7 +149,8 @@
         "dominantColor": "Farba",
         "width": "Šírka",
         "height": "Výška",
-        "ratio": "Pomer strán"
+        "ratio": "Pomer strán",
+        "animated": "Animované"
       }
     },
     "roi": {

src/locales/sk/coreDam/audioFile.json

@@ -0,0 +1,8 @@
+{
+  "model": {
+    "audioAttributes": {
+      "codecName": "Kodek",
+      "duration": "Dĺžka"
+    }
+  }
+}

src/locales/sk/coreDam/videoFile.json

@@ -0,0 +1,9 @@
+{
+  "model": {
+    "videoAttributes": {
+      "codecName": "Kodek",
+      "duration": "Dĺžka",
+      "bitrate": "Bitrate"
+    }
+  }
+}

src/locales/sk/system.json

@@ -49,6 +49,7 @@
       "assets": "Assety"
     },
     "podcasts": "Podcasty",
+    "videoShows": "Video relácie",
     "extSystemLicenceSwitch": {
       "filters": "filtre",
       "filter": {
@@ -64,7 +65,8 @@
       "title": "Prepnutie externého systému a licencie",
       "description": "Dôležité: Najprv ukončite prácu, všetka neukončená práca bude stratená!",
       "confirm": "Potvrdiť a znovu načítať ADAM",
-      "changeToLicenceId": "Zmena na ID licencie"
+      "changeToLicenceId": "Zmena na ID licencie",
+      "changeLicence": "Zmeniť licenciu: {currentLicence}"
     }
   },
   "settings": {

src/main.ts

@@ -21,10 +21,14 @@ import { useCurrentUser } from '@/composables/system/currentUser'
 import type { AclValue } from '@/types/Permission'
 import '@anzusystems/common-admin/styles'
 import { damClient } from '@/services/api/clients/damClient'
+import dayjs from 'dayjs'
+import Duration from 'dayjs/plugin/duration'
 
 export const DEFAULT_LANGUAGE: LanguageCode = 'sk'
 export const AVAILABLE_LANGUAGES: Array<LanguageCode> = ['en', 'sk']
 
+dayjs.extend(Duration)
+
 const { currentUser } = useCurrentUser()
 
 loadCommonFonts()

src/model/coreDam/filter/AssetFilter.ts

@@ -19,6 +19,9 @@ const filter = reactive({
   status: {
     ...makeFilter({ name: 'status', default: [AssetStatus.WithFile] }),
   },
+  keywordIds: {
+    ...makeFilter({ name: 'keywordIds', default: [], multiple: true }),
+  },
   mostDominantColor: {
     ...makeFilter({ name: 'mostDominantColor', default: [] }),
   },

src/styles/components/image-detail.scss

@@ -1,3 +1,5 @@
+@use 'vuetify/lib/styles/settings/_variables.scss' as vars;
+
 $class-name-root: 'dam-image-detail';
 $sidebar-width: 600px;
 $toolbar-height: 50px;
@@ -28,7 +30,14 @@ $bg-sidebar-color-dark: #1a1a1a;
     position: absolute;
     top: 0;
     right: 0;
-    width: $sidebar-width;
+
+    @media #{map-get(vars.$display-breakpoints, 'sm-and-down')} {
+      width: 100%;
+    }
+
+    @media #{map-get(vars.$display-breakpoints, 'md-and-up')} {
+      width: $sidebar-width;
+    }
   }
 
   &__left {
@@ -51,7 +60,13 @@ $bg-sidebar-color-dark: #1a1a1a;
     }
 
     .#{$class-name-root}__left {
-      padding-right: $sidebar-width;
+      @media #{map-get(vars.$display-breakpoints, 'sm-and-down')} {
+        width: 100%;
+      }
+
+      @media #{map-get(vars.$display-breakpoints, 'md-and-up')} {
+        padding-right: $sidebar-width;
+      }
     }
   }
 }

src/types/coreDam/File.ts

@@ -18,6 +18,7 @@ interface ImageAttributes {
   height: number
   rotation: number
   mostDominantColor: string
+  animated: boolean
 }
 
 interface AudioAttributes {

src/utils/file.ts

@@ -0,0 +1,21 @@
+import dayjs from 'dayjs'
+
+export const prettyBps = (bytes: number, decimals = 2): string => {
+  const sizes = ['bps', 'kbps', 'Mbps', 'Gbps']
+
+  if (bytes === 0) {
+    return '0 ' + sizes[0]
+  }
+
+  const k = 1024
+  const dm = decimals < 0 ? 0 : decimals
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
+}
+
+export const prettyDuration = (seconds: number): string => {
+  const duration = dayjs.duration(seconds * 1000)
+
+  return duration.format('HH:mm:ss')
+}

src/views/coreDam/asset/components/AssetMetadata.vue

@@ -14,6 +14,9 @@ import { useKeywordAssetTypeConfig } from '@/views/coreDam/keyword/composables/k
 import { useAuthorAssetTypeConfig } from '@/views/coreDam/author/composables/authorConfig'
 import { AssetMetadataValidationScopeSymbol } from '@/components/validationScopes'
 import AssetMetadataImageAttributes from '@/views/coreDam/asset/components/AssetMetadataImageAttributes.vue'
+import { isVideoFile, isAudioFile } from '@/types/coreDam/File'
+import AssetMetadataVideoAttributes from '@/views/coreDam/asset/components/AssetMetadataVideoAttributes.vue'
+import AssetMetadataAudioAttributes from '@/views/coreDam/asset/components/AssetMetadataAudioAttributes.vue'
 
 const { t } = useI18n()
 
@@ -29,6 +32,14 @@ const isTypeImage = computed(() => {
   return assetType.value === AssetType.Image
 })
 
+const isTypeAudio = computed(() => {
+  return assetType.value === AssetType.Audio
+})
+
+const isTypeVideo = computed(() => {
+  return assetType.value === AssetType.Video
+})
+
 const assetMainFile = computed<null | ImageFile | AudioFile | DocumentFile | VideoFile>(() => {
   return asset.value && asset.value.mainFile ? asset.value.mainFile : null
 })
@@ -176,12 +187,22 @@ const onAnyMetadataChange = () => {
               {{ prettyBytes(assetMainFile.fileAttributes.size) }}
             </VCol>
           </VRow>
+          <!-- image -->
+          <AssetMetadataImageAttributes
+            v-if="isTypeImage && isImageFile(assetMainFile)"
+            :file="assetMainFile"
+          />
+          <!-- video -->
+          <AssetMetadataVideoAttributes
+            v-if="isTypeVideo && isVideoFile(assetMainFile)"
+            :file="assetMainFile"
+          />
+          <!-- audio -->
+          <AssetMetadataAudioAttributes
+            v-if="isTypeAudio && isAudioFile(assetMainFile)"
+            :file="assetMainFile"
+          />
         </div>
-        <!-- image -->
-        <AssetMetadataImageAttributes
-          v-if="assetMainFile && isTypeImage && isImageFile(assetMainFile)"
-          :file="assetMainFile"
-        />
       </VExpansionPanelText>
     </VExpansionPanel>
   </VExpansionPanels>

src/views/coreDam/asset/components/AssetMetadataAudioAttributes.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+import type { AudioFile } from '@/types/coreDam/File'
+import { prettyDuration } from '@/utils/file'
+
+withDefaults(
+  defineProps<{
+    file: AudioFile
+  }>(),
+  {}
+)
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <VRow>
+    <VCol>{{ t('coreDam.audioFile.model.audioAttributes.duration') }}</VCol>
+    <VCol cols="9">
+      {{ prettyDuration(file.audioAttributes.duration) }}
+    </VCol>
+  </VRow>
+  <VRow>
+    <VCol>{{ t('coreDam.audioFile.model.audioAttributes.codecName') }}</VCol>
+    <VCol cols="9">
+      {{ file.audioAttributes.codecName }}
+    </VCol>
+  </VRow>
+</template>

src/views/coreDam/asset/components/AssetMetadataImageAttributes.vue

@@ -2,6 +2,7 @@
 import ColorBox from '@/components/coreDam/ColorBox.vue'
 import { useI18n } from 'vue-i18n'
 import type { ImageFile } from '@/types/coreDam/File'
+import { ABooleanValue } from '@anzusystems/common-admin'
 
 withDefaults(
   defineProps<{
@@ -38,4 +39,10 @@ const { t } = useI18n()
       {{ file.imageAttributes.ratioWidth }} / {{ file.imageAttributes.ratioHeight }}
     </VCol>
   </VRow>
+  <VRow>
+    <VCol>{{ t('coreDam.asset.detail.info.field.animated') }}</VCol>
+    <VCol cols="9">
+      <ABooleanValue :value="file.imageAttributes.animated" />
+    </VCol>
+  </VRow>
 </template>