Add support for SVG add-on logos

bundles/org.openhab.ui/web/src/components/addons/addon-card.vue

@@ -25,11 +25,7 @@
           <addon-stats-line :addon="addon" :iconSize="15" />
         </div>
       </div>
-      <div class="logo-square">
-        <f7-icon v-show="!logoLoaded" size="150" color="gray" :f7="addonIcon" class="card-default-icon" />
-        <img v-if="!logoError" class="lazy logo" :style="{ visibility: logoLoaded ? 'visible': 'hidden' }" ref="logo"
-             :data-src="imageUrl">
-      </div>
+      <addon-logo class="logo-square" :addon="addon" :size="150" />
     </div>
   </f7-link>
 </template>
@@ -96,71 +92,44 @@
     background #fff
     width 100%
     margin-top 5px
-    // height 220px
-    // border 1px solid var(--f7-list-item-border-color)
-    // border-radius 5px
     display flex
     justify-content center
     align-items center
     &:after
       content ' '
       display block
       padding-bottom 100%
-  .card-default-icon
-    opacity 0.2
-    position absolute
-  .logo
-    position absolute
-    top 3px
-    left 3px
-    width calc(100% - 6px)
-    height calc(100% - 6px)
-    object-fit contain
+    .logo
+      position absolute
+      top 3px
+      left 3px
+      width calc(100% - 6px)
+      height calc(100% - 6px)
+      object-fit contain
 </style>
 
 <script>
-import { AddonIcons } from '@/assets/addon-store'
 import AddonStatsLine from './addon-stats-line.vue'
+import AddonLogo from '@/components/addons/addon-logo.vue'
 
 export default {
   props: ['addon', 'headline', 'installActionText'],
   components: {
+    AddonLogo,
     AddonStatsLine
   },
-  data () {
-    return {
-      logoLoaded: false,
-      logoError: false,
-      addonIcon: null
-    }
-  },
   computed: {
     autoHeadline () {
       if (this.addon.properties && this.addon.properties.like_count && this.addon.properties.like_count >= 20) return 'Top'
       if (this.addon.properties && this.addon.properties.views && this.addon.properties.views >= 1000) return 'Popular'
       if (this.addon.properties && this.addon.properties.posts_count && this.addon.properties.posts_count >= 15) return 'Hot'
       return ''
     },
-    imageUrl () {
-      if (this.addon.imageLink) return this.addon.imageLink.replace(/^\/\//, 'https://')
-      let docsBranch = 'final'
-      if (this.$store.state.runtimeInfo.buildString === 'Release Build') docsBranch = 'final-stable'
-      return `https://raw.githubusercontent.com/openhab/openhab-docs/${docsBranch}/images/addons/${this.addon.id.substring(this.addon.id.indexOf('-') + 1)}.png`
-    },
     showInstallActions () {
       let splitted = this.addon.uid.split(':')
       return splitted.length < 2 || splitted[0] !== 'eclipse'
     }
   },
-  mounted () {
-    this.addonIcon = AddonIcons[this.addon.type]
-    this.$$(this.$refs.logo).once('lazy:loaded', (e) => {
-      this.logoLoaded = true
-    })
-    this.$$(this.$refs.logo).once('lazy:error', (e) => {
-      this.logoError = true
-    })
-  },
   methods: {
     buttonClicked () {
       this.$emit('addonButtonClick', this.addon)

bundles/org.openhab.ui/web/src/components/addons/addon-list-item.vue

@@ -11,10 +11,7 @@
     <div v-else-if="addon.properties && addon.properties.views" slot="subtitle">
       <addon-stats-line :addon="addon" :iconSize="15" />
     </div>
-    <f7-icon v-show="!logoLoaded" slot="media" size="64" color="gray" :f7="addonIcon" class="item-default-icon" />
-    <div class="item-logo" slot="media">
-      <img v-if="!logoError" class="lazy" :style="{ visibility: logoLoaded ? 'visible': 'hidden' }" ref="logo" width="54" :data-src="imageUrl">
-    </div>
+    <addon-logo slot="media" class="logo-square" :addon="addon" size="64" logo-width="54" />
     <div v-if="showInstallActions" slot="after">
       <f7-preloader v-if="addon.pending" color="blue" />
       <f7-button v-else-if="addon.installed" class="install-button prevent-active-state-propagation" text="Remove" color="red" round small @click="buttonClicked" />
@@ -28,20 +25,18 @@
   --f7-list-item-subtitle-text-color var(--f7-list-item-after-text-color)
   .item-inner
     padding-right 3px !important
-  .item-logo
+  .logo-square
+    background white
+    border-radius 5px
+    width 64px
+    height 64px
+    margin-left 3px
     display flex
     justify-content center
     align-items center
-    margin-left 3px
-    width 64px
-    height 64px
-    background white
-    border-radius 5px
-    img
+    .logo
+      margin-left 0
       max-height 54px
-  .item-default-icon
-    opacity 0.2
-    position absolute
   .item-media i
     padding-left 3px
   .item-after
@@ -57,42 +52,21 @@
 </style>
 
 <script>
-import { AddonIcons } from '@/assets/addon-store'
 import AddonStatsLine from './addon-stats-line.vue'
+import AddonLogo from '@/components/addons/addon-logo.vue'
 
 export default {
   props: ['addon', 'installActionText'],
   components: {
+    AddonLogo,
     AddonStatsLine
   },
-  data () {
-    return {
-      logoLoaded: false,
-      logoError: false,
-      addonIcon: null
-    }
-  },
   computed: {
-    imageUrl () {
-      if (this.addon.imageLink) return this.addon.imageLink.replace(/^\/\//, 'https://')
-      let docsBranch = 'final'
-      if (this.$store.state.runtimeInfo.buildString === 'Release Build') docsBranch = 'final-stable'
-      return `https://raw.githubusercontent.com/openhab/openhab-docs/${docsBranch}/images/addons/${this.addon.id.substring(this.addon.id.indexOf('-') + 1)}.png`
-    },
     showInstallActions () {
       let splitted = this.addon.uid.split(':')
       return splitted.length < 2 || splitted[0] !== 'eclipse'
     }
   },
-  mounted () {
-    this.addonIcon = AddonIcons[this.addon.type]
-    this.$$(this.$refs.logo).once('lazy:loaded', (e) => {
-      this.logoLoaded = true
-    })
-    this.$$(this.$refs.logo).once('lazy:error', (e) => {
-      this.logoError = true
-    })
-  },
   methods: {
     buttonClicked () {
       this.$emit('addonButtonClick', this.addon)

bundles/org.openhab.ui/web/src/components/addons/addon-logo.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <f7-icon v-show="!logoLoaded" :size="size" color="gray" :f7="addonIcon" class="default-icon" style="padding-left: 0; opacity: 0.2; position: absolute" />
+    <img v-if="!svgLogoError" class="lazy logo" :style="imgStyle" :width="logoWidth" ref="svgLogo"
+         :data-src="imageUrl('svg')">
+    <img v-else-if="!pngLogoError" class="logo" :style="imgStyle" ref="pngLogo"
+         :src="imageUrl('png')" :width="logoWidth" @load="logoLoaded = true" @error="pngLogoError = true">
+  </div>
+</template>
+
+<script>
+import { AddonIcons } from '@/assets/addon-store'
+
+export default {
+  props: ['addon', 'size', 'logoWidth'],
+  data () {
+    return {
+      addonIcon: AddonIcons[this.addon.type],
+      logoLoaded: false,
+      svgLogoError: false,
+      pngLogoError: false
+    }
+  },
+  computed: {
+    imgStyle () {
+      return {
+        visibility: this.logoLoaded ? 'visible' : 'hidden'
+      }
+    }
+  },
+  methods: {
+    imageUrl (type) {
+      if (this.addon.imageLink) return this.addon.imageLink.replace(/^\/\//, 'https://')
+      let docsBranch = 'final'
+      if (this.$store.state.runtimeInfo.buildString === 'Release Build') docsBranch = 'final-stable'
+      return `https://raw.githubusercontent.com/openhab/openhab-docs/${docsBranch}/images/addons/${this.addon.id.substring(this.addon.id.indexOf('-') + 1)}.${type}`
+    }
+  },
+  mounted () {
+    this.$$(this.$refs.svgLogo).once('lazy:loaded', (e) => {
+      this.logoLoaded = true
+    })
+    this.$$(this.$refs.svgLogo).once('lazy:error', (e) => {
+      this.svgLogoError = true
+    })
+  }
+}
+</script>

bundles/org.openhab.ui/web/src/pages/addons/addon-details.vue

@@ -9,9 +9,8 @@
       <f7-row>
         <f7-col class="margin-left">
           <div class="addon-header">
-            <f7-link class="logo-container" :href="docLinkUrl" external target="_blank">
-              <f7-icon v-show="!logoLoaded" size="100" color="gray" :f7="addonIcon" style="opacity: 0.2; position: absolute;" />
-              <img v-if="!logoError" class="logo lazy" :style="{ visibility: logoLoaded ? 'visible': 'hidden' }" ref="logo" :data-src="imageUrl">
+            <f7-link :href="docLinkUrl" external target="_blank">
+              <addon-logo class="logo-container" :addon="addon" size="100" />
             </f7-link>
             <div class="addon-header-content">
               <div class="addon-header-title">
@@ -181,13 +180,14 @@
 
 <script>
 import AddonStoreMixin from './addon-store-mixin'
-import { AddonIcons, ContentTypes, Formats } from '@/assets/addon-store'
 import AddonStatsLine from '@/components/addons/addon-stats-line.vue'
 import AddonInfoTable from '@/components/addons/addon-info-table.vue'
+import AddonLogo from '@/components/addons/addon-logo.vue'
 
 export default {
   mixins: [AddonStoreMixin],
   components: {
+    AddonLogo,
     AddonStatsLine,
     AddonInfoTable
   },
@@ -196,9 +196,6 @@ export default {
     return {
       addon: null,
       ready: false,
-      logoLoaded: false,
-      logoError: false,
-      addonIcon: null,
       descriptionReady: false,
       parsedDescription: '',
       descriptionExpanded: false
@@ -216,13 +213,6 @@ export default {
       if (!this.addon) return null
       return (this.addon.uid.indexOf(':') > 0) ? this.addon.uid.substring(0, this.addon.uid.indexOf(':')) : undefined
     },
-    imageUrl () {
-      if (!this.addon) return null
-      if (this.addon.imageLink) return this.addon.imageLink.replace(/^\/\//, 'https://')
-      let docsBranch = 'final'
-      if (this.$store.state.runtimeInfo.buildString === 'Release Build') docsBranch = 'final-stable'
-      return `https://raw.githubusercontent.com/openhab/openhab-docs/${docsBranch}/images/addons/${this.addon.id.substring(this.addon.id.indexOf('-') + 1)}.png`
-    },
     addonDescription () {
       if (!this.descriptionReady) return null
       if (!this.addon) return null
@@ -263,19 +253,11 @@ export default {
       this.$oh.api.get('/rest/addons/' + this.addonId + (serviceId ? '?serviceId=' + serviceId : '')).then((data) => {
         this.resetPending()
         this.$set(this, 'addon', data)
-        this.addonIcon = AddonIcons[this.addon.type]
         this.ready = true
         this.processDescription()
         this.startEventSource()
 
         setTimeout(() => {
-          this.$$(this.$refs.logo).once('lazy:loaded', (e) => {
-            console.log(this.addon.id + ' logo lazy loaded')
-            this.logoLoaded = true
-          })
-          this.$$(this.$refs.logo).once('lazy:error', (e) => {
-            this.logoError = true
-          })
           this.$f7.lazy.create('.page-addon-details')
         })
       })