From: Marcel van der Veldt <m.vanderveldt@outlook.com>
Date: Fri, 16 Aug 2019 11:42:14 +0000 (+0200)
Subject: improve player footer bar
X-Git-Url: https://git.kitaultman.com/?a=commitdiff_plain;h=2ecfd7fa71728e9bc76238c223e8f80dbe3da915;p=music-assistant-server.git

improve player footer bar
---

diff --git a/.gitignore b/.gitignore
index 4e202d18..52149577 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,5 @@ music_assistant/config.json
 *.cert
 *.pem
 music_assistant/testrun.sh
+build/
+dist/
diff --git a/music_assistant/main.spec b/music_assistant/main.spec
new file mode 100644
index 00000000..9a97d322
--- /dev/null
+++ b/music_assistant/main.spec
@@ -0,0 +1,33 @@
+# -*- mode: python ; coding: utf-8 -*-
+
+block_cipher = None
+
+
+a = Analysis(['main.py'],
+             pathex=['/Users/marcelveldt/Workdir/musicassistant/music_assistant'],
+             binaries=[],
+             datas=[],
+             hiddenimports=[],
+             hookspath=[],
+             runtime_hooks=[],
+             excludes=[],
+             win_no_prefer_redirects=False,
+             win_private_assemblies=False,
+             cipher=block_cipher,
+             noarchive=False)
+pyz = PYZ(a.pure, a.zipped_data,
+             cipher=block_cipher)
+exe = EXE(pyz,
+          a.scripts,
+          a.binaries,
+          a.zipfiles,
+          a.datas,
+          [],
+          name='main',
+          debug=False,
+          bootloader_ignore_signals=False,
+          strip=False,
+          upx=True,
+          upx_exclude=[],
+          runtime_tmpdir=None,
+          console=True )
diff --git a/music_assistant/web/components/headermenu.vue.js b/music_assistant/web/components/headermenu.vue.js
index dff05921..eda7b28e 100755
--- a/music_assistant/web/components/headermenu.vue.js
+++ b/music_assistant/web/components/headermenu.vue.js
@@ -16,18 +16,19 @@ Vue.component("headermenu", {
     
 
     <v-toolbar app flat dense dark v-if="$globals.windowtitle" > 
+        <div class="title justify-center" style="text-align:center;position:absolute;width:100%;margin-left:-16px;margin-right:0">
+          {{ $globals.windowtitle }}
+        </div>
         <v-layout align-center>
             <v-btn icon v-on:click="menu=!menu">
               <v-icon>menu</v-icon>
             </v-btn>
-            <v-btn @click="$router.go(-1)" icon>
+            <v-btn @click="$router.go(-1)" icon v-if="$route.path != '/'">
               <v-icon>arrow_back</v-icon>
             </v-btn>
-            <v-spacer></v-spacer>
-            <v-card-title class="title justify-center">
-                      {{ $globals.windowtitle }}
-                  </v-card-title>
-            <v-spacer></v-spacer>
+          
+            
+            
         </v-layout>
     </v-toolbar>
     <v-toolbar flat fixed dense dark scroll-off-screen color="transparent" v-if="!$globals.windowtitle" > 
diff --git a/music_assistant/web/components/infoheader.vue.js b/music_assistant/web/components/infoheader.vue.js
index 452e7c5d..9d8bc8c3 100644
--- a/music_assistant/web/components/infoheader.vue.js
+++ b/music_assistant/web/components/infoheader.vue.js
@@ -5,7 +5,7 @@ Vue.component("infoheader", {
             <v-img
               class="white--text"
               width="100%"
-              :height="isMobile() ? '300' : '370'"
+              :height="isMobile() ? '230' : '370'"
               position="center top" 
               :src="getFanartImage()"
               gradient="to bottom, rgba(0,0,0,.65), rgba(0,0,0,.35)"
@@ -59,7 +59,7 @@ Vue.component("infoheader", {
                   <!-- Description/metadata -->
                   <v-card-title class="subheading">
                       <div class="justify-left" style="text-shadow: 1px 1px #000000;">
-                          <read-more :text="getDescription()" :max-chars="isMobile() ? 200 : 350"></read-more>
+                          <read-more :text="getDescription()" :max-chars="isMobile() ? 60 : 350"></read-more>
                       </div>
                   </v-card-title>
 
diff --git a/music_assistant/web/components/player.vue.js b/music_assistant/web/components/player.vue.js
index cf49828f..840b0575 100755
--- a/music_assistant/web/components/player.vue.js
+++ b/music_assistant/web/components/player.vue.js
@@ -6,14 +6,18 @@ Vue.component("player", {
     <v-footer app light height="auto">
       
       <v-card class="flex" tile style="background-color:#e8eaed;">
-        <v-list-tile avatar ripple style="margin-bottom:15px;">
+        <!-- divider -->
+        <v-list-tile avatar ripple style="height:1px;background-color:#cccccc;"/>
 
-              <v-list-tile-avatar v-if="!isMobile() && active_player.cur_item" style="align-items:center;padding-top:15px;">
+        <!-- now playing media -->
+        <v-list-tile avatar ripple>
+
+              <v-list-tile-avatar v-if="active_player.cur_item" style="align-items:center;padding-top:15px;">
                   <img v-if="active_player.cur_item.metadata && active_player.cur_item.metadata.image" :src="active_player.cur_item.metadata.image"/>
                   <img v-if="!active_player.cur_item.metadata.image && active_player.cur_item.album && active_player.cur_item.album.metadata && active_player.cur_item.album.metadata.image" :src="active_player.cur_item.album.metadata.image"/>
               </v-list-tile-avatar>
 
-              <v-list-tile-content v-if="!isMobile()" style="align-items:center;padding-top:15px;">
+              <v-list-tile-content style="align-items:center;padding-top:15px;">
                   <v-list-tile-title class="title">{{ active_player.cur_item ? active_player.cur_item.name : active_player.name }}</v-list-tile-title>
                   <v-list-tile-sub-title v-if="active_player.cur_item && active_player.cur_item.artists">
                       <span v-for="(artist, artistindex) in active_player.cur_item.artists">
@@ -23,34 +27,50 @@ Vue.component("player", {
                   </v-list-tile-sub-title>
               </v-list-tile-content>
 
+          </v-list-tile>
+
+          <!-- progress bar -->
+          <div style="color:rgba(0,0,0,.65); height:30px;width:100%; vertical-align: middle; left:15px; right:0; margin-bottom:5px; margin-top:5px">
+            <v-layout row style="vertical-align: middle" v-if="active_player.cur_item">
+              <span style="text-align:left; width:60px; margin-top:7px; margin-left:15px;">{{ player_time_str_cur }}</span>
+              <v-progress-linear v-model="progress"></v-progress-linear>
+              <span style="text-align:right; width:60px; margin-top:7px; margin-right: 15px;">{{ player_time_str_total }}</span>
+            </v-layout>
+        </div>
 
-              <!-- player controls -->
+        <!-- divider -->
+        <v-list-tile avatar ripple style="height:1px;background-color:#cccccc;"/>
+
+          <!-- Control buttons -->
+          <v-list-tile light avatar ripple style="margin-bottom:5px;">
+              
+          <!-- player controls -->
               <v-list-tile-content>
-                  <v-layout row style="content-align: center;vertical-align: middle; margin-top:10px;">
-                    <v-btn icon style="padding:5px;" @click="playerCommand('previous')"><v-icon color="rgba(0,0,0,.54)">skip_previous</v-icon></v-btn>
-                    <v-btn icon style="padding:5px;" v-if="active_player.state == 'playing'" @click="playerCommand('pause')"><v-icon size="45" color="rgba(0,0,0,.65)" style="margin-top:-9px;">pause</v-icon></v-btn>
-                    <v-btn icon style="padding:5px;" v-if="active_player.state != 'playing'" @click="playerCommand('play')"><v-icon size="45" color="rgba(0,0,0,.65)" style="margin-top:-9px;">play_arrow</v-icon></v-btn>
-                    <v-btn icon style="padding:5px;" @click="playerCommand('next')"><v-icon color="rgba(0,0,0,.54)">skip_next</v-icon></v-btn>
+                  <v-layout row style="content-align: left;vertical-align: middle; margin-top:10px;margin-left:-15px">
+                    <v-btn small icon style="padding:5px;" @click="playerCommand('previous')"><v-icon color="rgba(0,0,0,.54)">skip_previous</v-icon></v-btn>
+                    <v-btn small icon style="padding:5px;" v-if="active_player.state == 'playing'" @click="playerCommand('pause')"><v-icon size="45" color="rgba(0,0,0,.65)" style="margin-top:-9px;">pause</v-icon></v-btn>
+                    <v-btn small icon style="padding:5px;" v-if="active_player.state != 'playing'" @click="playerCommand('play')"><v-icon size="45" color="rgba(0,0,0,.65)" style="margin-top:-9px;">play_arrow</v-icon></v-btn>
+                    <v-btn small icon style="padding:5px;" @click="playerCommand('next')"><v-icon color="rgba(0,0,0,.54)">skip_next</v-icon></v-btn>
                   </v-layout>
               </v-list-tile-content>
 
               <!-- active player queue button -->
-              <v-list-tile-action style="padding:30px;" v-if="!isMobile() && active_player_id">
-                  <v-btn flat icon @click="$router.push('/queue/' + active_player_id)">
+              <v-list-tile-action style="padding:20px;" v-if="active_player_id">
+                  <v-btn x-small flat icon @click="$router.push('/queue/' + active_player_id)">
                       <v-flex xs12 class="vertical-btn">
-                      <v-icon large>queue_music</v-icon>
+                      <v-icon>queue_music</v-icon>
                       <span class="caption">{{ $t('queue') }}</span>
                     </v-flex>    
                   </v-btn>
               </v-list-tile-action> 
 
               <!-- active player volume -->
-              <v-list-tile-action style="padding:30px;" v-if="active_player_id">
+              <v-list-tile-action style="padding:20px;" v-if="active_player_id">
                   <v-menu :close-on-content-click="false" :nudge-width="250" offset-x top>
                     <template v-slot:activator="{ on }">
-                        <v-btn flat icon v-on="on">
+                        <v-btn x-small flat icon v-on="on">
                             <v-flex xs12 class="vertical-btn">
-                            <v-icon large>volume_up</v-icon>
+                            <v-icon>volume_up</v-icon>
                             <span class="caption">{{ Math.round(players[active_player_id].volume_level) }}</span>
                           </v-flex>    
                         </v-btn>
@@ -61,23 +81,19 @@ Vue.component("player", {
 
               <!-- active player btn -->
               <v-list-tile-action style="padding:30px;margin-right:-13px;">
-                  <v-btn flat icon @click="menu = !menu">
+                  <v-btn x-small flat icon @click="menu = !menu">
                       <v-flex xs12 class="vertical-btn">
-                      <v-icon large>speaker</v-icon>
+                      <v-icon>speaker</v-icon>
                       <span class="caption">{{ active_player_id ? players[active_player_id].name : '' }}</span>
                     </v-flex>    
                   </v-btn>
               </v-list-tile-action>
           </v-list-tile>
 
-          <!-- progress bar -->
-          <div style="color:rgba(0,0,0,.65); height:35px;width:100%; vertical-align: middle; left:15px; right:0; bottom:0" v-if="!isMobile()">
-            <v-layout row style="vertical-align: middle">
-              <span style="text-align:left; width:60px; margin-top:7px; margin-left:15px;">{{ player_time_str_cur }}</span>
-              <v-progress-linear v-model="progress"></v-progress-linear>
-              <span style="text-align:right; width:60px; margin-top:7px; margin-right: 15px;">{{ player_time_str_total }}</span>
-            </v-layout>
-        </div>
+          <!-- add some additional whitespace in standalone mode only -->
+          <v-list-tile avatar ripple style="height:14px" v-if="isInStandaloneMode()"/>
+
+          
 
       </v-card>
     </v-footer>
diff --git a/music_assistant/web/index.html b/music_assistant/web/index.html
index 58555105..dcef414f 100755
--- a/music_assistant/web/index.html
+++ b/music_assistant/web/index.html
@@ -43,9 +43,9 @@
 
 
         <script>
-            function isMobile() {
-                return document.body.clientWidth < 800;
-            }
+            const isMobile = () => (document.body.clientWidth < 800);
+            const isInStandaloneMode = () => ('standalone' in window.navigator) && (window.navigator.standalone);
+
             function showPlayMenu (item) {
                 this.$globals.playmenuitem = item;
                 this.$globals.showplaymenu = !this.$globals.showplaymenu;
@@ -208,6 +208,7 @@
         })
         Vue.prototype.$globals = globalStore;
         Vue.prototype.isMobile = isMobile;
+        Vue.prototype.isInStandaloneMode = isInStandaloneMode;
         Vue.prototype.toggleLibrary = toggleLibrary;
         Vue.prototype.showPlayMenu = showPlayMenu;
         Vue.prototype.clickItem= clickItem;
diff --git a/music_assistant/web/pages/home.vue.js b/music_assistant/web/pages/home.vue.js
index 1c840871..91c0b33d 100755
--- a/music_assistant/web/pages/home.vue.js
+++ b/music_assistant/web/pages/home.vue.js
@@ -25,7 +25,7 @@ var home = Vue.component("Home", {
     };
   },
   created() {
-    this.$globals.windowtitle = this.$t('home');
+    this.$globals.windowtitle = this.$t('musicassistant');
     this.items= [
         { title: this.$t('artists'), icon: "person", path: "/artists" },
         { title: this.$t('albums'), icon: "album", path: "/albums" },