Updated UI a bit to give better view of clickable areas. Fixed issues…

… that were apparent on MacOS. Added media control support in mac
m0ngr31 · Jul 20, 2020 · 4c9c806 · 4c9c806
1 parent 52d1978
commit 4c9c806
Show file tree

Hide file tree

Showing 10 changed files with 76 additions and 37 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -125,4 +125,8 @@ button, input, .player, .no-grab, .container, .mini-player {
     top: 0px;
   }
 }
+
+.pointer {
+  cursor: pointer;
+}
 </style>
diff --git a/src/background.js b/src/background.js
@@ -30,7 +30,6 @@ function createWindow() {
     maximizable: false,
     frame: false,
     backgroundColor: '#000B25',
-    titleBarStyle: 'hidden',
     icon: path.join(__static, 'icon.png'),
     webPreferences: {
       // Use pluginOptions.nodeIntegration, leave this alone
@@ -75,7 +74,9 @@ app.on('activate', () => {
 });
 
 // Disable Chrome's lame MPRIS implementation
-app.commandLine.appendSwitch('disable-features', 'MediaSessionService');
+if (isLinux) {
+  app.commandLine.appendSwitch('disable-features', 'MediaSessionService');
+}
 
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
@@ -88,12 +89,7 @@ app.on('ready', async () => {
     } catch (e) {
       console.error('Vue Devtools failed to install:', e.toString());
     }
-  } else {
-    // Prevent DevTools from being opened in production
-    globalShortcut.register('Control+Shift+I', () => {
-      return false
-    });
-  }
+  } else {}
 
   createWindow();
 });
@@ -124,7 +120,7 @@ const setupPlayer = ev => {
   }
 };
 
-if (process.platform === 'linux') {
+if (isLinux) {
   ipcMain.on('play', (ev, data) => {
     if (!player) {
       setupPlayer(ev);

diff --git a/src/components/ItemTile.vue b/src/components/ItemTile.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="column is-half-mobile is-1-tablet item-title" @click="gotoItem">
-    <img src="../assets/logo.png" loading="lazy" class="logo">
+  <div class="column is-half-mobile is-1-tablet item-title pointer" @click="gotoItem">
+    <img src="../assets/logo.png" loading="lazy" class="logo" width="185" height="185">
     <p class="subtitle is-6 item-name" v-if="!disableClick">{{ item.Name }}</p>
   </div>
 </template>

diff --git a/src/components/Player.vue b/src/components/Player.vue
@@ -6,10 +6,10 @@
       <div class="container">
         <div class="level-bottom level is-mobile" style="padding: 15px 15px 0px 15px;">
           <div level-left @click="togglePlayer()">
-            <b-icon level-item size="is-medium" icon="chevron-down"></b-icon>
+            <b-icon level-item size="is-medium" icon="chevron-down" class="pointer"></b-icon>
           </div>
           <div level-right @click="player.showPlaylist = true">
-            <b-icon level-item size="is-medium" icon="playlist-music"></b-icon>
+            <b-icon level-item size="is-medium" icon="playlist-music" class="pointer"></b-icon>
           </div>
         </div>
         <div class="container" style="padding: 0px 20px">
@@ -29,7 +29,7 @@
               <h6 class="subtitle is-6 song-title">{{ player.playlist[player.index].artist }}</h6>
             </div>
             <div level-item class="ends" style="text-align: right; width: 30px;" @click="likeSong">
-              <b-icon level-item :icon="`${player.playlist[player.index].loved ? 'heart' : 'heart-outline'}`" :type="`${player.playlist[player.index].loved ? 'is-danger' : ''}`"></b-icon>
+              <b-icon level-item :icon="`${player.playlist[player.index].loved ? 'heart' : 'heart-outline'}`" :type="`${player.playlist[player.index].loved ? 'is-danger' : ''}`" class="pointer"></b-icon>
             </div>
           </div>
           <div class="level-bottom level is-mobile" style="margin-bottom: 0">
@@ -57,17 +57,18 @@
             <div level-left></div>
             <div level-item id="big-icons">
               <span @click="prev">
-                <b-icon level-item size="is-large" icon="skip-previous"></b-icon>
+                <b-icon level-item size="is-large" icon="skip-previous" class="pointer"></b-icon>
               </span>
               <span @click="playPause">
                 <b-icon
                   level-item size="is-large"
                   :icon="`${player.playing ? 'pause-circle' : 'play-circle'}`"
                   style="margin-left: 25px; margin-right: 25px;"
+                  class="pointer"
                 ></b-icon>
               </span>
               <span @click="skip">
-                <b-icon level-item size="is-large" icon="skip-next"></b-icon>
+                <b-icon level-item size="is-large" icon="skip-next" class="pointer"></b-icon>
               </span>
             </div>
             <div level-right></div>
@@ -77,7 +78,7 @@
     </div>
     <div class="mini-player" v-show="miniPlayer">
       <progress class="progress playing-progress is-success" :value="currentProgress" max="100" style="z-index: 30"></progress>
-      <div class="level is-mobile" style="max-height: 58px;">
+      <div class="level is-mobile pointer" style="max-height: 58px;">
         <div level-left class="ends" @click="miniPlayer = false">
           <img level-item src="../assets/logo.png" class="album-art update-img">
         </div>

diff --git a/src/components/Playlist.vue b/src/components/Playlist.vue
@@ -6,18 +6,18 @@
     <div class="container">
       <div class="level is-mobile">
         <div class="level-left" @click="player.showPlaylist = false">
-          <b-icon level-item size="is-medium" icon="chevron-left"></b-icon>
+          <b-icon level-item size="is-medium" icon="chevron-left" class="pointer"></b-icon>
           <p level-item class="title">Playlist</p>
         </div>
       </div>
       <div
-        class="playlist-item"
+        class="playlist-item pointer"
         v-for="(song, index) of player.playlist"
         v-bind:key="`${song.Id}${index}`"
       >
         <div class="level is-mobile">
           <div level-left class="ends" @click="playSong(index)">
-            <img level-item :src="song.thumbnailImage" loading="lazy" class="album-art">
+            <img level-item :src="song.thumbnailImage" loading="lazy" height="58" width="58" class="album-art">
           </div>
           <div level-item class="middle" @click="playSong(index)">
             <h6 class="title is-6 song-title">{{ song.Name }}</h6>

diff --git a/src/main.js b/src/main.js
@@ -9,8 +9,6 @@ import JellyfinService from './services/jellyfin';
 
 Vue.config.productionTip = false;
 
-console.log(JellyfinService);
-
 Vue.use(Buefy);
 Vue.use(VueTitlebar);
 

diff --git a/src/services/player.js b/src/services/player.js
@@ -174,6 +174,19 @@ class Player {
 
           window.ipcRenderer.send('play', data);
         }
+
+        if ('mediaSession' in navigator) {
+          setTimeout(() => {
+            navigator.mediaSession.playbackState = 'playing';
+          });
+
+          navigator.mediaSession.metadata = new MediaMetadata({
+            title: item.Name,
+            artist: item.Artists,
+            album: item.Album,
+            artwork: [{ src: item.thumbnailImage }],
+          });
+        }
       },
       onend: () => {
         this.skip('next');
@@ -192,6 +205,12 @@ class Player {
         if (window.ipcRenderer) {
           window.ipcRenderer.send('pause');
         }
+
+        if ('mediaSession' in navigator) {
+          setTimeout(() => {
+            navigator.mediaSession.playbackState = 'paused';
+          });
+        }
       },
       onstop: () => {
         this.playing = false;
@@ -376,4 +395,25 @@ if (window.ipcRenderer) {
   });
 }
 
-console.log(PlayerService);
+if ('mediaSession' in navigator) {
+  navigator.mediaSession.playbackState = 'none';
+
+  navigator.mediaSession.setActionHandler('play', () => {
+    PlayerService.playPause();
+  });
+
+  navigator.mediaSession.setActionHandler('pause', () => {
+    PlayerService.playPause();
+  });
+
+  navigator.mediaSession.setActionHandler('previoustrack', () => {
+    PlayerService.handleBack();
+  });
+
+  navigator.mediaSession.setActionHandler('nexttrack', () => {
+    PlayerService.skip('next');
+  });
+}
+
+
+window.PlayerService = PlayerService;
diff --git a/src/views/Album.vue b/src/views/Album.vue
@@ -6,28 +6,28 @@
       <div class="level is-mobile">
         <div level-left @click="goBack()">
           <b-tooltip label="Back" position="is-right">
-            <b-icon level-item size="is-medium" icon="arrow-left"></b-icon>
+            <b-icon level-item size="is-medium" icon="arrow-left" class="pointer"></b-icon>
           </b-tooltip>
         </div>
         <div level-right>
           <b-tooltip label="Play Album Radio" position="is-left">
             <div @click="getRadio">
-              <b-icon level-item size="is-medium" icon="radio"></b-icon>
+              <b-icon level-item size="is-medium" icon="radio" class="pointer"></b-icon>
             </div>
           </b-tooltip>
           <b-tooltip label="Play Album Songs" position="is-left" v-if="album && album.songs && album.songs.length">
             <div @click="playSongs()">
-              <b-icon level-item size="is-medium" icon="play-circle" style="margin-left: 10px; margin-right: 10px;"></b-icon>
+              <b-icon level-item size="is-medium" icon="play-circle" style="margin-left: 10px; margin-right: 10px;" class="pointer"></b-icon>
             </div>
           </b-tooltip>
           <b-tooltip label="Shuffle Album Songs" position="is-left" v-if="album && album.songs && album.songs.length">
             <div @click="playSongs(true)">
-              <b-icon level-item size="is-medium" icon="shuffle-variant" style="margin-right: 10px;"></b-icon>
+              <b-icon level-item size="is-medium" icon="shuffle-variant" style="margin-right: 10px;" class="pointer"></b-icon>
             </div>
           </b-tooltip>
           <b-tooltip label="Inject Album Songs into current playlist" position="is-left" v-if="album && album.songs && album.songs.length">
             <div @click="playSongs(false, true)">
-              <b-icon v-if="player.player" level-item size="is-medium" icon="playlist-plus"></b-icon>
+              <b-icon v-if="player.player" level-item size="is-medium" icon="playlist-plus" class="pointer"></b-icon>
             </div>
           </b-tooltip>
         </div>

diff --git a/src/views/Artist.vue b/src/views/Artist.vue
@@ -6,28 +6,28 @@
       <div class="level is-mobile">
         <div level-left @click="goBack()">
           <b-tooltip label="Back" position="is-right">
-            <b-icon level-item size="is-medium" icon="arrow-left"></b-icon>
+            <b-icon level-item size="is-medium" icon="arrow-left" class="pointer"></b-icon>
           </b-tooltip>
         </div>
         <div level-right>
           <b-tooltip label="Play Artist Radio" position="is-left">
             <div @click="getRadio">
-              <b-icon level-item size="is-medium" icon="radio"></b-icon>
+              <b-icon level-item size="is-medium" icon="radio" class="pointer"></b-icon>
             </div>
           </b-tooltip>
           <b-tooltip label="Play Artist Songs" position="is-left" v-if="hasSongs">
             <div @click="playSongs()">
-              <b-icon level-item size="is-medium" icon="play-circle" style="margin-left: 10px; margin-right: 10px;"></b-icon>
+              <b-icon level-item size="is-medium" icon="play-circle" style="margin-left: 10px; margin-right: 10px;" class="pointer"></b-icon>
             </div>
           </b-tooltip>
           <b-tooltip label="Shuffle Artist Songs" position="is-left" v-if="hasSongs">
             <div @click="playSongs(true)">
-              <b-icon level-item size="is-medium" icon="shuffle-variant" style="margin-right: 10px;"></b-icon>
+              <b-icon level-item size="is-medium" icon="shuffle-variant" style="margin-right: 10px;" class="pointer"></b-icon>
             </div>
           </b-tooltip>
           <b-tooltip label="Inject Artist Songs into current playlist" position="is-left" v-if="hasSongs">
             <div @click="playSongs(false, true)">
-              <b-icon v-if="player.player" level-item size="is-medium" icon="playlist-plus"></b-icon>
+              <b-icon v-if="player.player" level-item size="is-medium" icon="playlist-plus" class="pointer"></b-icon>
             </div>
           </b-tooltip>
         </div>

diff --git a/src/views/Song.vue b/src/views/Song.vue
@@ -6,23 +6,23 @@
       <div class="level is-mobile">
         <div level-left @click="goBack()">
           <b-tooltip label="Back" position="is-right">
-            <b-icon level-item size="is-medium" icon="arrow-left"></b-icon>
+            <b-icon level-item size="is-medium" icon="arrow-left" class="pointer"></b-icon>
           </b-tooltip>
         </div>
         <div level-right>
           <b-tooltip label="Play Song Radio" position="is-left">
             <div @click="getRadio">
-              <b-icon level-item size="is-medium" icon="radio"></b-icon>
+              <b-icon level-item size="is-medium" icon="radio" class="pointer"></b-icon>
             </div>
           </b-tooltip>
           <b-tooltip label="Play Song" position="is-left">
             <div @click="playSongs()">
-              <b-icon level-item size="is-medium" icon="play-circle" style="margin-left: 10px; margin-right: 10px;"></b-icon>
+              <b-icon level-item size="is-medium" icon="play-circle" style="margin-left: 10px; margin-right: 10px;" class="pointer"></b-icon>
             </div>
           </b-tooltip>
           <b-tooltip label="Inject Song into current playlist" position="is-left">
             <div @click="playSongs(true)">
-              <b-icon v-if="player.player" level-item size="is-medium" icon="playlist-plus"></b-icon>
+              <b-icon v-if="player.player" level-item size="is-medium" icon="playlist-plus" class="pointer"></b-icon>
             </div>
           </b-tooltip>
         </div>