changed logo to svg, adjusted media list item to automatically apply duration if needed

src/renderer/logo-simple.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 313 105" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(3.125,0,0,3.125,0,0)">
+        <g transform="matrix(1.38696,0,0,1.38696,-183.553,-76.7485)">
+            <g transform="matrix(16,0,0,16,160.665,73.4177)">
+                <path d="M0.705,-0.473C0.685,-0.641 0.558,-0.737 0.389,-0.737C0.197,-0.737 0.05,-0.602 0.05,-0.364C0.05,-0.126 0.195,0.01 0.389,0.01C0.576,0.01 0.688,-0.114 0.705,-0.248L0.549,-0.249C0.535,-0.171 0.474,-0.126 0.392,-0.126C0.281,-0.126 0.206,-0.208 0.206,-0.364C0.206,-0.515 0.28,-0.601 0.393,-0.601C0.477,-0.601 0.538,-0.553 0.549,-0.473L0.705,-0.473Z" style="fill:white;fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(16,0,0,16,172.699,73.4177)">
+                <path d="M0.06,-0L0.212,-0L0.212,-0.545L0.06,-0.545L0.06,-0ZM0.136,-0.616C0.181,-0.616 0.218,-0.65 0.218,-0.692C0.218,-0.734 0.181,-0.769 0.136,-0.769C0.092,-0.769 0.055,-0.734 0.055,-0.692C0.055,-0.65 0.092,-0.616 0.136,-0.616Z" style="fill:white;fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(16,0,0,16,177.051,73.4177)">
+                <path d="M0.261,0.009C0.349,0.009 0.395,-0.042 0.416,-0.087L0.423,-0.087L0.423,-0L0.572,-0L0.572,-0.727L0.421,-0.727L0.421,-0.454L0.416,-0.454C0.396,-0.498 0.352,-0.553 0.261,-0.553C0.141,-0.553 0.04,-0.46 0.04,-0.272C0.04,-0.089 0.137,0.009 0.261,0.009ZM0.309,-0.112C0.235,-0.112 0.195,-0.178 0.195,-0.273C0.195,-0.367 0.234,-0.432 0.309,-0.432C0.383,-0.432 0.424,-0.37 0.424,-0.273C0.424,-0.175 0.382,-0.112 0.309,-0.112Z" style="fill:white;fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(16,0,0,16,187.216,73.4177)">
+                <path d="M0.309,0.011C0.444,0.011 0.535,-0.055 0.556,-0.156L0.416,-0.165C0.401,-0.124 0.362,-0.102 0.311,-0.102C0.236,-0.102 0.188,-0.152 0.188,-0.234L0.188,-0.234L0.559,-0.234L0.559,-0.276C0.559,-0.461 0.447,-0.553 0.303,-0.553C0.142,-0.553 0.038,-0.439 0.038,-0.27C0.038,-0.097 0.141,0.011 0.309,0.011ZM0.188,-0.328C0.191,-0.39 0.238,-0.44 0.305,-0.44C0.371,-0.44 0.417,-0.393 0.417,-0.328L0.188,-0.328Z" style="fill:white;fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(16,0,0,16,196.778,73.4177)">
+                <path d="M0.06,-0L0.212,-0L0.212,-0.309C0.212,-0.376 0.261,-0.422 0.327,-0.422C0.348,-0.422 0.377,-0.418 0.391,-0.414L0.391,-0.548C0.378,-0.551 0.359,-0.553 0.344,-0.553C0.283,-0.553 0.233,-0.518 0.213,-0.45L0.207,-0.45L0.207,-0.545L0.06,-0.545L0.06,-0Z" style="fill:white;fill-rule:nonzero;"/>
+            </g>
+        </g>
+        <circle cx="17" cy="16.667" r="12.333" style="fill:rgb(235,235,235);"/>
+        <g id="g147" transform="matrix(0.297476,0,0,0.297476,-16.7212,-19.0819)">
+            <path id="path41" d="M113.553,67.234C111.989,67.44 110.373,67.38 108.796,67.538C105.581,67.86 102.374,68.548 99.283,69.479C85.683,73.576 74.237,83.188 67.62,95.728C58.974,112.114 59.92,132.602 69.683,148.275C73.899,155.044 79.648,160.705 86.34,165.013C90.987,168.005 96.247,170.235 101.606,171.575C107.932,173.157 114.607,173.607 121.076,172.802C139.182,170.549 155.227,158.921 162.858,142.301C165.794,135.905 167.337,128.957 167.644,121.946C168.67,98.52 152.877,76.772 130.7,69.694C126.785,68.444 122.737,67.681 118.642,67.399C116.992,67.285 115.202,67.018 113.553,67.234M112.226,83.813C116.656,83.29 121.632,84.115 125.833,85.514C130.752,87.152 135.254,89.717 139.108,93.203C153.094,105.857 154.806,128.026 143.09,142.744C140.415,146.104 137.152,149.006 133.466,151.217C128.993,153.901 123.948,155.665 118.753,156.221C113.863,156.745 108.876,156.366 104.15,154.943C99.89,153.66 95.81,151.611 92.313,148.85C77.992,137.54 73.888,116.673 83.621,101.038C86.308,96.722 89.827,93.066 93.973,90.133C99.448,86.26 105.67,84.586 112.226,83.813M112.226,89.802C106.903,90.501 101.862,91.851 97.402,95.001C93.9,97.475 90.841,100.562 88.619,104.246C80.752,117.287 83.774,134.719 95.853,144.135C98.477,146.18 101.448,147.812 104.593,148.901C109.23,150.505 114.244,150.887 119.085,150.235C123.337,149.662 127.573,148.069 131.143,145.694C135.459,142.822 139.035,139.018 141.507,134.447C148.532,121.459 144.666,104.627 132.913,95.798C129.999,93.609 126.685,91.926 123.178,90.925C119.742,89.945 115.8,89.332 112.226,89.802M107.138,109.717C108.23,109.447 110.211,111.095 111.12,111.636C114.483,113.639 117.898,115.564 121.297,117.505C122.215,118.029 124.992,119.047 124.931,120.287C124.871,121.486 122.008,122.553 121.076,123.084C117.931,124.873 114.817,126.715 111.673,128.504C110.475,129.186 108.937,130.499 107.58,130.751C105.799,131.083 106.363,127.602 106.363,126.593L106.363,113.76C106.363,112.776 105.865,110.031 107.138,109.717Z" style="fill:rgb(255,91,109);fill-rule:nonzero;"/>
+        </g>
+    </g>
+</svg>

src/renderer/style.less

@@ -535,6 +535,13 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   }
 }
 
+.hidden-opacity {
+  opacity: 0;
+  height: 0px;
+  width: 0px;
+  margin: 0px;
+}
+
 .app-sidebar-content::-webkit-scrollbar {
   display: none;
 }
@@ -716,7 +723,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 .app-chrome .app-chrome-item > .app-title {
   width: 100px;
   font-size: 13px;
-  background: url("./logotmp.png");
+  background: url("./logotmp.svg");
   background-size: 90px;
   background-repeat: no-repeat;
   background-position: center;
@@ -801,6 +808,17 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   height: 1.3em;
   line-height: 1.3em;
   overflow: hidden;
+  max-width: 360px;
+
+  .song-name-normal {
+    height: inherit;
+  }
+
+  &.song-artist-marquee {
+    >marquee {
+      //margin-bottom: -3px;
+    }
+  }
 }
 
 .app-chrome .app-chrome-item > .app-playback-controls .song-duration p {
@@ -820,7 +838,17 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   line-height: 1.2em;*/
   overflow: hidden;
   z-index: 1;
+  max-width: 360px;
   /* animation: marquee 10s linear infinite; */
+
+  .song-artist-normal {
+    height: inherit;
+  }
+  &.song-artist-marquee {
+    >marquee {
+      margin-bottom: -3px;
+    }
+  }
 }
 
 .app-chrome .app-chrome-item > .app-playback-controls .song-progress {

src/renderer/views/components/mediaitem-list-item.ejs

@@ -19,7 +19,7 @@
             <div class="artwork" v-if="showArtwork == true">
                 <mediaitem-artwork
                         :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
-                        size="50"
+                        :size="50"
                         :type="item.type"></mediaitem-artwork>
                 <button class="overlay-play" @click="playTrack()"><%- include("../svg/play.svg") %></button>
             </div>
@@ -56,7 +56,7 @@
                     {{ item.attributes.genreNames[0] ?? "" }}
                 </div>
             </template>
-            <div class="duration" v-if="showDuration" @dblclick="app.routeView(item)">
+            <div class="duration" v-if="displayDuration" @dblclick="app.routeView(item)">
                 {{ msToMinSec(item.attributes.durationInMillis ?? 0) }}
             </div>
         </template>
@@ -71,7 +71,8 @@
                 isVisible: false,
                 addedToLibrary: false,
                 guid: this.uuidv4(),
-                app: this.$root
+                app: this.$root,
+                displayDuration: true
             }
         },
         props: {
@@ -84,6 +85,13 @@
             'show-duration': {type: Boolean, default: true},
             'contextExt': {type: Object, required: false},
         },
+        mounted() {
+            let duration = this.item.attributes.durationInMillis ?? 0
+            console.log(duration)
+            if(duration == 0 || !this.showDuration) {
+                this.displayDuration = false
+            }
+        },
         methods: {
             uuidv4() {
                 return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>