refactor(bigscreen): use thumbnails only when the picture size exceeds 1M

src/api/asset.js

@@ -6,6 +6,7 @@ import {
   resolve,
   reject
 } from './base'
+import { AssetType } from '@/constant'
 
 export function getAssets (query) {
   const { pageNum: currentPage, pageSize: pageCount, ...params } = query
@@ -16,6 +17,19 @@ export function getAssets (query) {
       currentPage, pageCount,
       ...params
     }
+  }).then(({ data, totoalCount }) => {
+    data.forEach(item => {
+      if (item.type === AssetType.IMAGE) {
+        item.thumbnail = item.keyName
+      }
+      if (item.type === AssetType.VIDEO && item.screenshot) {
+        item.thumbnail = item.screenshot === 'analyzing' ? void 0 : `img/${item.screenshot}`
+      }
+    })
+    return {
+      data,
+      totoalCount
+    }
   })
 }
 
@@ -39,8 +53,18 @@ export function getAssetUrl (keyName) {
   return `${process.env.VUE_APP_MINIO}/${keyName}`
 }
 
-export function getThumbnailUrl (keyName, ratio = 'x0.2,q30') {
-  let url = getAssetUrl(keyName)
+const LIMIT_SIZE = 1024 * 1024
+export function getThumbnailUrl (item, ratio = 'x0.2,q30') {
+  let url
+  if (item && typeof item === 'object') {
+    const { size, keyName } = item
+    if (size <= LIMIT_SIZE) {
+      return getAssetUrl(keyName)
+    }
+    url = getAssetUrl(keyName)
+  } else {
+    url = getAssetUrl(item)
+  }
   if (url.charAt(0) === '/') {
     url = `${location.origin}${url}`
   }

src/views/bigscreen/ast/Designer.vue

@@ -268,7 +268,7 @@
           v-for="(source, index) in sources"
           :key="index"
           class="c-card u-pointer"
-          @click="onView(source.keyName)"
+          @click="onView(source)"
         >
           <div class="c-card__content">
             <i
@@ -278,16 +278,11 @@
               @click.stop="onDelAsset(index)"
             />
             <i
-              v-if="isImage"
+              v-if="source.thumbnailUrl"
               class="o-image"
-              :style="{ 'background-image': `url('${source.url}')` }"
+              :style="{ 'background-image': `url('${source.thumbnailUrl}')` }"
             />
-            <div
-              v-else
-              class="c-card__text u-ellipsis"
-            >
-              {{ source.name }}
-            </div>
+            <div class="c-card__text u-ellipsis">{{ source.name }}</div>
           </div>
         </div>
       </draggable>
@@ -332,7 +327,7 @@
                 >
                   <div
                     class="o-image"
-                    :style="{ 'background-image': `url('${item.url}')` }"
+                    :style="{ 'background-image': `url('${item.thumbnailUrl}')` }"
                   >
                     <span class="c-card__name u-ellipsis">{{ item.originalName }}</span>
                   </div>
@@ -409,6 +404,7 @@ export default {
         list: this.getAssets,
         transform: this.transformAsset,
         cols: [
+          { prop: 'file', label: '缩略图', type: 'asset' },
           { prop: 'originalName', label: '名称' },
           {
             type: 'invoke', render: [
@@ -592,12 +588,6 @@ export default {
         this.selectedWidgetIndex -= 1
       }
     },
-    transformImage (asset) {
-      return {
-        ...asset,
-        url: getThumbnailUrl(asset.keyName)
-      }
-    },
     onEditAssets (attr) {
       this.widgetAttr = attr
       if (attr.options && attr.options.solo) {
@@ -605,9 +595,17 @@ export default {
       } else {
         this.sources = this.widget[attr.key].map(
           this.isImage
-            ? this.transformImage
+            ? asset => {
+              return {
+                ...asset,
+                thumbnailUrl: getThumbnailUrl(asset.keyName)
+              }
+            }
             : asset => {
-              return { ...asset }
+              return {
+                ...asset,
+                thumbnailUrl: asset.thumbnail && getThumbnailUrl(asset.thumbnail)
+              }
             }
         )
         this.dialogVisibleAssets = true
@@ -626,9 +624,12 @@ export default {
       }
     },
     onSaveAssets () {
-      this.changeAttr(this.sources.map(({ name, keyName, duration, size, md5 }) => {
+      this.changeAttr(this.sources.map(({ name, keyName, thumbnail, duration, size, md5 }) => {
         const source = { name, keyName, size, md5 }
         if (!this.isImage) {
+          if (thumbnail) {
+            source.thumbnail = thumbnail
+          }
           source.duration = duration
         }
         return source
@@ -649,10 +650,13 @@ export default {
       if (asset.type === AssetType.IMAGE) {
         return {
           ...asset,
-          url: getThumbnailUrl(asset.keyName)
+          thumbnailUrl: getThumbnailUrl(asset.thumbnail)
         }
       }
-      return asset
+      return {
+        ...asset,
+        file: { thumbnail: asset.thumbnail }
+      }
     },
     onView (keyName) {
       this.onViewAsset({ type: this.widgetAttr.options.type, keyName })
@@ -660,7 +664,7 @@ export default {
     onViewAsset ({ type, keyName }) {
       this.$refs.previewDialog.show({ type, url: keyName })
     },
-    onChoosenAsset ({ originalName, keyName, url, duration, size, md5 }) {
+    onChoosenAsset ({ originalName, keyName, thumbnail, thumbnailUrl, duration, size, md5 }) {
       const source = {
         name: originalName,
         keyName,
@@ -669,8 +673,12 @@ export default {
       }
       if (this.dialogVisibleAssets) {
         if (this.isImage) {
-          source.url = url
+          source.thumbnailUrl = thumbnailUrl
         } else {
+          if (thumbnail) {
+            source.thumbnail = thumbnail
+            source.thumbnailUrl = getThumbnailUrl(thumbnail)
+          }
           source.duration = duration
         }
         this.sources.unshift(source)

src/views/bigscreen/ast/Viewer.vue

@@ -87,16 +87,11 @@
         >
           <div class="c-card__content">
             <i
-              v-if="isImage"
+              v-if="source.thumbnailUrl"
               class="o-image"
-              :style="{ 'background-image': `url('${source.url}')` }"
+              :style="{ 'background-image': `url('${source.thumbnailUrl}')` }"
             />
-            <div
-              v-else
-              class="c-card__text u-ellipsis"
-            >
-              {{ source.name }}
-            </div>
+            <div class="c-card__text u-ellipsis">{{ source.name }}</div>
           </div>
         </div>
       </div>
@@ -140,11 +135,16 @@ export default {
           this.sources = sources.map(source => {
             return {
               ...source,
-              url: getThumbnailUrl(source.keyName)
+              thumbnailUrl: getThumbnailUrl(source.keyName)
             }
           })
         } else {
-          this.sources = sources
+          this.sources = sources.map(source => {
+            return {
+              ...source,
+              thumbnailUrl: source.thumbnail && getThumbnailUrl(source.thumbnail)
+            }
+          })
           if (!this.muted) {
             this.muted = true
           }

src/views/bigscreen/ast/core/base.js

@@ -50,7 +50,7 @@ export default {
       if (this.node) {
         const { backgroundImage } = this.node
         return {
-          'background-image': backgroundImage[0] ? `url("${getThumbnailUrl(backgroundImage[0].keyName)}")` : 'none'
+          'background-image': backgroundImage[0] ? `url("${getThumbnailUrl(backgroundImage[0])}")` : 'none'
         }
       }
       return null

src/views/bigscreen/ast/core/widget/CImage.vue

@@ -71,9 +71,9 @@ export default {
   },
   data () {
     return {
-      url: '',
-      frontUrl: '',
-      backUrl: '',
+      img: null,
+      frontImage: null,
+      backImage: null,
       toggle: false
     }
   },
@@ -92,7 +92,7 @@ export default {
         height: `${height}px`,
         'font-size': `${Math.min(width, height) / 3 | 0}px`,
         'border-radius': `${radius}px`,
-        'background-image': !this.isEmpty && this.isNormal ? `url(${getThumbnailUrl(this.url)})` : 'none'
+        'background-image': !this.isEmpty && this.isNormal ? `url(${getThumbnailUrl(this.img)})` : 'none'
       }
     },
     className () {
@@ -106,21 +106,21 @@ export default {
       }
     },
     isEmpty () {
-      return !this.url
+      return !this.img
     },
     slideStyles () {
       return {
-        'background-image': this.url ? `url(${getThumbnailUrl(this.url)})` : 'none'
+        'background-image': this.img ? `url(${getThumbnailUrl(this.img)})` : 'none'
       }
     },
     flipFrontStyles () {
       return {
-        'background-image': this.frontUrl ? `url(${getThumbnailUrl(this.frontUrl)})` : 'none'
+        'background-image': this.frontImage ? `url(${getThumbnailUrl(this.frontImage)})` : 'none'
       }
     },
     flipBackStyles () {
       return {
-        'background-image': this.backUrl ? `url(${getThumbnailUrl(this.backUrl)})` : 'none'
+        'background-image': this.backImage ? `url(${getThumbnailUrl(this.backImage)})` : 'none'
       }
     },
     isNormal () {
@@ -190,9 +190,9 @@ export default {
     },
     changeFlip () {
       if (this.toggle) {
-        this.backUrl = this.url
+        this.backImage = this.img
       } else {
-        this.frontUrl = this.url
+        this.frontImage = this.img
       }
     },
     toggleImage () {
@@ -206,35 +206,33 @@ export default {
       clearTimeout(this.$timer)
 
       if (length === 0) {
-        this.url = ''
+        this.img = null
         return this.toggle
       }
 
       if (length === 1) {
-        this.url = sources[0].keyName
+        this.img = sources[0]
         return this.toggle
       }
 
-      let index
       switch (toggleType) {
         case 'cycle':
-          index = this.$index
-          this.$index = (index + 1) % length
+          this.$index = (this.$index + 1) % length
           break
         case 'random':
-          index = Math.random() * length | 0
-          if (sources[index]?.keyName === this.url) {
-            if (index === 0) {
-              index += 1
+          this.$index = Math.random() * length | 0
+          if (sources[this.$index]?.keyName === this.img.keyName) {
+            if (this.$index === 0) {
+              this.$index += 1
             } else {
-              index -= 1
+              this.$index -= 1
             }
           }
           break
         default:
           return
       }
-      this.url = sources[index].keyName
+      this.img = sources[this.$index]
 
       this.$timer = setTimeout(this.toggleImage, interval * 1000)
 

src/views/bigscreen/ast/core/widget/CVideo.vue

@@ -170,11 +170,11 @@ export default {
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  background-color: rgba(255, 255, 255, .8);
+  background-color: rgba(255, 255, 255, 0.8);
   overflow: hidden;
 
   &::before {
-    content: '\ecc1';
+    content: "\ecc1";
     font-size: inherit;
   }