fix frontend

music-assistant · Jul 4, 2022 · 3c00b9c · 3c00b9c
1 parent 3eb160e
commit 3c00b9c
Show file tree

Hide file tree

Showing 10 changed files with 66 additions and 64 deletions.
diff --git a/custom_components/mass/frontend/src/App.vue b/custom_components/mass/frontend/src/App.vue
@@ -117,7 +117,11 @@ setTimeout(() => {
 }, 1000);
 </script>
 
-<style lang="scss">
+<style>
+
+a {
+  cursor: pointer;
+}
 .vertical-btn {
   display: flex;
   flex-direction: column;
@@ -136,11 +140,7 @@ div.v-navigation-drawer__scrim {
   opacity: 0.8;
   background: grey;
 }
-.vertical-btn {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
+
 .volumerow {
   height: 60px;
   padding-top: 5px;

diff --git a/custom_components/mass/frontend/src/components/ContextMenu.vue b/custom_components/mass/frontend/src/components/ContextMenu.vue
@@ -16,9 +16,7 @@
           </span></v-toolbar-title
         >
 
-        <v-btn :icon="mdiClose" dark text @click="close()">{{
-          $t("close")
-        }}</v-btn>
+        <v-btn :icon="mdiClose" dark text @click="close()"></v-btn>
       </v-toolbar>
       <!-- play contextmenu items -->
       <v-card-text v-if="playlists.length === 0 && playMenuItems.length > 0">

diff --git a/custom_components/mass/frontend/src/components/InfoHeader.vue b/custom_components/mass/frontend/src/components/InfoHeader.vue
@@ -116,7 +116,7 @@
           </div>
 
           <!-- play/info buttons -->
-          <div style="margin-left: 14px; padding-bottom: 10px">
+          <div style="display:flex;margin-left: 14px; padding-bottom: 10px">
             <v-btn
               color="primary"
               tile
@@ -153,21 +153,13 @@
           <!-- Description/metadata -->
           <v-card-subtitle
             class="body-2 justify-left"
-            style="padding-bottom: 10px"
+            style="padding-bottom: 10px;white-space: pre-line; cursor: pointer;"
             @click="showFullInfo = !showFullInfo"
             v-if="description"
+            v-html="description"
           >
-            <span>
-              <div v-html="description"> </div>
-              <v-btn
-                variant="plain"
-                :icon="showFullInfo ? mdiChevronUp : mdiChevronDown"
-                style="padding: 0; height: 20px"
-              ></v-btn>
-            </span>
             </v-card-subtitle>
 
-
           <!-- genres/tags -->
           <div
             v-if="item && item.metadata.genres"
@@ -297,7 +289,7 @@ const description = computed(() => {
       }
     });
   }
-  const maxChars = display.mobile ? 160 : 380;
+  const maxChars = display.mobile ? 200 : 460;
   desc = desc.replace("\r\n", "<br /><br /><br />");
   desc = desc.replace("\r", "<br /><br />");
   desc = desc.replace("\n", "<br /><br />");

diff --git a/custom_components/mass/frontend/src/components/ListviewItem.vue b/custom_components/mass/frontend/src/components/ListviewItem.vue
@@ -224,14 +224,14 @@ const highResDetails = computed(() => {
   if (!props.item.provider_ids) return "";
   for (const prov of props.item.provider_ids) {
     if (!prov.quality) continue;
-    if (prov.quality >= MediaQuality.FLAC_LOSSLESS_HI_RES_1) {
+    if (prov.quality >= MediaQuality.LOSSLESS_HI_RES_1) {
       if (prov.details) {
         return prov.details;
-      } else if (prov.quality === MediaQuality.FLAC_LOSSLESS_HI_RES_1) {
+      } else if (prov.quality === MediaQuality.LOSSLESS_HI_RES_1) {
         return "44.1/48khz 24 bits";
-      } else if (prov.quality === MediaQuality.FLAC_LOSSLESS_HI_RES_2) {
+      } else if (prov.quality === MediaQuality.LOSSLESS_HI_RES_2) {
         return "88.2/96khz 24 bits";
-      } else if (prov.quality === MediaQuality.FLAC_LOSSLESS_HI_RES_3) {
+      } else if (prov.quality === MediaQuality.LOSSLESS_HI_RES_3) {
         return "176/192khz 24 bits";
       } else {
         return "+192kHz 24 bits";

diff --git a/custom_components/mass/frontend/src/components/PanelviewItem.vue b/custom_components/mass/frontend/src/components/PanelviewItem.vue
@@ -141,14 +141,14 @@ const theme = useTheme();
 const isHiRes = computed(() => {
   for (const prov of props.item.provider_ids) {
     if (prov.quality == undefined) continue;
-    if (prov.quality >= MediaQuality.FLAC_LOSSLESS_HI_RES_1) {
+    if (prov.quality >= MediaQuality.LOSSLESS_HI_RES_1) {
       if (prov.details) {
         return prov.details;
-      } else if (prov.quality === MediaQuality.FLAC_LOSSLESS_HI_RES_1) {
+      } else if (prov.quality === MediaQuality.LOSSLESS_HI_RES_1) {
         return "44.1/48khz 24 bits";
-      } else if (prov.quality === MediaQuality.FLAC_LOSSLESS_HI_RES_2) {
+      } else if (prov.quality === MediaQuality.LOSSLESS_HI_RES_2) {
         return "88.2/96khz 24 bits";
-      } else if (prov.quality === MediaQuality.FLAC_LOSSLESS_HI_RES_3) {
+      } else if (prov.quality === MediaQuality.LOSSLESS_HI_RES_3) {
         return "176/192khz 24 bits";
       } else {
         return "+192kHz 24 bits";

diff --git a/custom_components/mass/frontend/src/components/PlayerOSD.vue b/custom_components/mass/frontend/src/components/PlayerOSD.vue
@@ -200,7 +200,7 @@
 
     <!-- progress bar -->
     <div
-      style="width: 100%; height: 5px; padding-bottom: 15px; margin-top: -5px"
+      style="width: 100%; height: 5px; padding-bottom: 20px; margin-top: -10px"
       v-if="
         activePlayerQueue?.active &&
         curQueueItem &&
@@ -298,7 +298,7 @@
         @click="store.showPlayersMenu = true"
         class="mediacontrols-right"
         height="50"
-        width="70"
+        width="80"
       >
         <v-icon :icon="mdiSpeaker" />
         <div v-if="activePlayerQueue">
@@ -325,7 +325,7 @@
           </template>
 
           <v-card min-width="300">
-            <v-list style="overflow: hidden" lines="2">
+            <v-list style="overflow: hidden" lines="two">
               <v-list-item style="padding: 0; margin-left: 9px; margin-bottom: 9px">
                 <template v-slot:prepend>
                   <v-icon
@@ -354,7 +354,7 @@
                 </template>
               </v-list-item>
               <v-divider></v-divider>
-              <VolumeControl :player="store.selectedPlayer as Player" />
+              <VolumeControl :player="store.selectedPlayer" />
             </v-list>
           </v-card>
         </v-menu>
@@ -364,11 +364,11 @@
         text
         icon
         variant="plain"
-        height="50"
-        width="70"
         @click="$router.push('/playerqueue/')"
         v-if="activePlayerQueue"
         class="mediacontrols-right"
+        height="50"
+        width="70"
       >
         <v-icon :icon="mdiPlaylistMusic" />
         <div>{{ $t("queue") }}</div>
@@ -588,28 +588,34 @@ watchEffect(async () => {
   padding-bottom: 5px;
 }
 .mediacontrols-left {
+  display: flex;
   width: auto;
   margin-left: -15px;
   padding-top: 0px;
   float: left;
+  align-content: center;
+}
+.mediacontrols button {
+  align-content: center;
 }
 .mediacontrols-right {
   float: right;
   padding-left: 10px;
   padding-right: 0px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  margin-top:-12px;
 }
 
+
 .mediacontrols-right div {
+  position: absolute;
   width: 80px;
   font-size: xx-small;
-  padding-top: 5px;
+  margin-top: 50px;
   text-overflow: ellipsis;
 
   /* Required for text-overflow to do anything */
   white-space: nowrap;
   overflow: hidden;
+  align-content: center;
 }
 </style>
diff --git a/custom_components/mass/frontend/src/components/ProviderIcons.vue b/custom_components/mass/frontend/src/components/ProviderIcons.vue
@@ -92,7 +92,7 @@ export const getQualityIcon = function (quality?: MediaQuality) {
   if (quality == MediaQuality.LOSSY_AAC) return iconAac;
   if (quality == MediaQuality.LOSSY_MP3) return iconMp3;
   if (quality == MediaQuality.LOSSY_OGG) return iconOgg;
-  if (quality >= MediaQuality.FLAC_LOSSLESS) return iconFlac;
+  if (quality >= MediaQuality.LOSSLESS) return iconFlac;
   return iconFallback;
 };
 </script>

diff --git a/custom_components/mass/frontend/src/components/TopBar.vue b/custom_components/mass/frontend/src/components/TopBar.vue
@@ -22,7 +22,7 @@
       v-text="truncateString(store.topBarTitle || '', $vuetify.display.mobile ? 25 : 150)"
     ></v-toolbar-title>
     <template v-slot:append>
-      <div style="align-items: center">
+      <div style="align-items: right; display: flex">
         <v-dialog
           v-model="dialog"
           overlay-opacity="0.8"
@@ -69,8 +69,8 @@
           :icon="mdiDotsVertical"
           v-if="store.contextMenuParentItem || store.customContextMenuCallback"
           :color="store.topBarTextColor"
-          style="margin-right: -50px"
           @click="onContextMenuBtn"
+          style="margin-right: -8px"
         ></v-btn>
 
         <v-menu location="bottom end">
@@ -79,7 +79,7 @@
               :icon="mdiDotsVertical"
               v-if="store.topBarContextMenuItems.length > 0"
               :color="store.topBarTextColor"
-              style="margin-right: -50px"
+              style="margin-right: -8px"
               v-bind="props"
             ></v-btn>
           </template>
@@ -88,8 +88,9 @@
             <v-list-item
               v-for="(item, index) in store.topBarContextMenuItems"
               :key="index"
+              @click="item.link"
             >
-              <v-list-item-title @click="item.link">{{ item.title }}</v-list-item-title>
+              <v-list-item-title>{{ item.title }}</v-list-item-title>
             </v-list-item>
           </v-list>
         </v-menu>

diff --git a/custom_components/mass/frontend/src/components/VolumeControl.vue b/custom_components/mass/frontend/src/components/VolumeControl.vue
@@ -6,20 +6,21 @@
       class="volumerow"
       :style="player.group_powered ? 'opacity: 0.75' : 'opacity: 0.5'"
     >
-      <span class="text-body-2">
-        <v-btn
-          icon
-          variant="plain"
-          @click="api.queueCommandGroupPower(player.player_id, !player.group_powered)"
-          width="60"
-          height="30"
-          size="x-large"
-          style=""
-        >
-          <v-icon :icon="mdiPower"></v-icon>
-        </v-btn>
-        {{ player.group_name }}
-      </span>
+      <v-btn
+        icon
+        variant="plain"
+        @click="api.queueCommandGroupPower(player.player_id, !player.group_powered)"
+        width="60"
+        height="30"
+        size="x-large"
+      >
+        <v-icon :icon="mdiPower"></v-icon>
+      </v-btn>
+      <span
+        class="text-body-2"
+        style="position: absolute; margin-left: 65px;margin-top:-25px"
+        >{{ player.group_name }}</span
+      >
       <div
         class="text-caption"
         style="position: absolute; width: 60px; text-align: center; margin-left: 0px"
@@ -62,7 +63,11 @@
         >
           <v-icon :icon="mdiPower"></v-icon>
         </v-btn>
-        {{ childPlayer.group_name }}
+        <span
+        class="text-body-2"
+        style="position: absolute; margin-left: 65px;margin-top:-25px"
+        >{{ childPlayer.group_name }}</span
+      >
       </span>
       <div
         class="text-caption"

diff --git a/custom_components/mass/frontend/src/plugins/api.ts b/custom_components/mass/frontend/src/plugins/api.ts
@@ -22,11 +22,11 @@ export enum MediaQuality {
   LOSSY_MP3 = 1,
   LOSSY_OGG = 2,
   LOSSY_AAC = 3,
-  FLAC_LOSSLESS = 10, // 44.1/48khz 16 bits
-  FLAC_LOSSLESS_HI_RES_1 = 20, // 44.1/48khz 24 bits HI-RES
-  FLAC_LOSSLESS_HI_RES_2 = 21, // 88.2/96khz 24 bits HI-RES
-  FLAC_LOSSLESS_HI_RES_3 = 22, // 176/192khz 24 bits HI-RES
-  FLAC_LOSSLESS_HI_RES_4 = 23 // above 192khz 24 bits HI-RES
+  LOSSLESS = 10, // 44.1/48khz 16 bits
+  LOSSLESS_HI_RES_1 = 20, // 44.1/48khz 24 bits HI-RES
+  LOSSLESS_HI_RES_2 = 21, // 88.2/96khz 24 bits HI-RES
+  LOSSLESS_HI_RES_3 = 22, // 176/192khz 24 bits HI-RES
+  LOSSLESS_HI_RES_4 = 23 // above 192khz 24 bits HI-RES
 }
 
 export enum ProviderType {