Merge pull request #5 from Nich87/dev

update index,app.js

src/css/index.css

@@ -3,6 +3,12 @@ body {
   background-color: #FFFFFF;
 }
 
+.player {
+  position:fixed;
+  bottom:0;
+  max-height: 20%;
+}
+
 .Controler {
   position: fixed;
   bottom: 0;
@@ -16,7 +22,9 @@ body {
   bottom: 0;
   transform: translate(-50%, -50%);
   left: 85%;
-  top: 94%;
+  top: 98%;
+  height: 200px;
+  max-width:300px;
 }
 
 #player-progress {
@@ -25,30 +33,40 @@ body {
   transform: translate(-50%, -50%);
   left: 50%;
   top: 85%;
-  height: 50px;
+  height: 1px;
   display: flex;
 }
 
 #current {
   position: absolute;
   bottom: 0;
 }
+#duration {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
 
 #artwork {
   margin-top: 70px;
   margin-left: 70px;
-  width: 600px;
-  height: 600px;
+  max-width: 50%;
+  max-height: 600px;
 }
 
 #Music_list {
   position:fixed;
-  width: 30%;
-  left: 70%;
+  max-width: 100%;
+  max-height:85%;
+  right: 0;
   margin: 0 0 0 auto;
+  width: 30%;
 }
 
 #metadata {
   margin-left: 70px;
-  width: 600px;
+  max-width: 600px;
+  max-height: 100%;
+  height:20%;
+  width: 50%;
 }

src/index.html

@@ -13,25 +13,32 @@
   <div id="container">
     <ul class="collection" id="Music_list"></ul>
 
-    <div class="Controler">
-      <a class="btn-flat btn-small waves-effect waves-light"><i class="material-icons">replay_10</i></a>
-      <a class="btn-flat btn-small waves-effect waves-light"><i class="material-icons"
-          id="btn_previous">skip_previous</i></a>
-      <a class="btn-floating btn-small waves-effect waves-light red" id="btn_play"><i
-          class="material-icons">play_arrow</i></a>
-      <a class="btn-flat btn-small waves-effect waves-light"><i class="material-icons" id="btn_skip">skip_next</i></a>
-      <a class="btn-flat btn-small waves-effect waves-light"><i class="material-icons">forward_10</i></a>
-    </div>
+    <div id="player">
+      <div class="Controler">
+        <a class="btn-flat btn-small waves-effect waves-light"><i class="material-icons">replay_10</i></a>
+        <a class="btn-flat btn-small waves-effect waves-light"><i class="material-icons"
+            id="btn_previous">skip_previous</i></a>
+        <a class="btn-floating btn-small waves-effect waves-light red" id="btn_play"><i
+            class="material-icons">play_arrow</i></a>
+        <a class="btn-flat btn-small waves-effect waves-light"><i class="material-icons" id="btn_skip">skip_next</i></a>
+        <a class="btn-flat btn-small waves-effect waves-light"><i class="material-icons">forward_10</i></a>
+      </div>
+
+      <div class="sub_Controler">
+        <a class="btn-flat btn-small waves-effect waves-light"><i class="material-icons">favorite_border</i></a>
+        <a class="btn-flat btn-small waves-effect waves-light"><i class="material-icons">repeat</i></a>
+        <a class="btn-flat btn-small waves-effect waves-light"><i class="material-icons">shuffle</i></a>
+        <input type="range" id="volume" min="0" max="100">
+      </div>
 
-    <div class="sub_Controler">
-      <a class="btn-flat btn-small waves-effect waves-light"><i class="material-icons">favorite_border</i></a>
-      <a class="btn-flat btn-small waves-effect waves-light"><i class="material-icons">repeat</i></a>
-      <a class="btn-flat btn-small waves-effect waves-light"><i class="material-icons">shuffle</i></a>
-      <a class="btn-flat btn-small waves-effect waves-light"><i class="material-icons">brightness_4</i></a>
-      <input type="range" id="volume" min="0" max="100">
+      <div>
+        <input type="range" id="player-progress" min="0" max="100" />
+        <em id="current">00:00</em>
+        <em id="duration">00:00</em>
+      </div>
     </div>
 
-    <img src="" id="artwork">
+    <img class="responsive-img" src="" id="artwork">
     <ul class="collection" id="metadata">
       <li class="collection-item" id="title">
         </p>
@@ -40,10 +47,6 @@
       <li class="collection-item" id="album">
         </p>
     </ul>
-    <div>
-      <input type="range" id="player-progress" min="0" max="100" />
-      <em id="current">00:00</em>
-    </div>
   </div>
   <!--
   <a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">pause</i></a>

src/index.js

@@ -1,19 +1,20 @@
-/* ---------------------module import-------------------------- */
+/* ---------------------Module import-------------------------- */
 const { app, BrowserWindow, Menu, dialog } = require('electron');
 const openAboutWindow = require('about-window').default;
 if (require('electron-squirrel-startup')) app.quit();
 const config = require('./config.json');
 const mm = require('musicmetadata');
 const path = require('path');
 const fs = require('fs');
-/* ---------------------module import-------------------------- */
+/* ---------------------Module import-------------------------- */
 
+/* ---------------------  Initialize   -------------------------*/
 let mainWindow,filelist = [];
 
 const createWindow = () => {
   mainWindow = new BrowserWindow({
-    width: 600,
-    height: 600,
+    width: 1400,
+    height: 1080,
     webPreferences: {
       nodeIntegration: true,
       preload: path.join(__dirname, './js/preload.js'),
@@ -35,19 +36,27 @@ const information = {
   click: aboutApplication
 }
 
+/* ---------------------  Initialize  ------------------------- */
+
+/* ---------------------Event listeners------------------------ */
+
 app.on('ready', () =>{
   createWindow();
   SetMenu(openFolder,information);
-});
+})
 
-app.on('window-all-closed', () => {
+.on('window-all-closed', () => {
   if (process.platform !== 'darwin') app.quit();
-});
+})
 
-app.on('activate', () => {
+.on('activate', () => {
   if (BrowserWindow.getAllWindows().length === 0) createWindow();
 });
 
+/* ---------------------Event listeners------------------------ */
+
+/* ----------------------- Functions -------------------------- */
+
 function SetMenu(openFolder,information) {
   const menu = Menu.buildFromTemplate([openFolder,information]);
   Menu.setApplicationMenu(menu);
@@ -110,6 +119,6 @@ const play = () => {
   let json = {...filelist};
   json = Object.assign({},filelist);
   json = filelist.reduce((json, value, key) =>{json[key] = value; return json;},{});
-  console.log(json);
   mainWindow.webContents.send('start',json);
-}
+}
+/* ----------------------- Functions -------------------------- */

src/js/app.js

@@ -8,16 +8,16 @@
     const player_progress = document.getElementById('player-progress');
     const artwork = document.getElementById('artwork');
     const current_time_text = document.getElementById('current');
+    const duration_time_text = document.getElementById('duration');
     const play_btn_inner = play_btn.getElementsByTagName('i')[0];
     const title = document.getElementById('title');
     const artist = document.getElementById('artist');
     const album = document.getElementById('album');
     const volume = document.getElementById('volume');
     const collection = document.getElementById('Music_list');
-    //const collection_Top = document.getElementById('NowPlaying');
 
     // Local variables
-    let current_song, list;
+    let current_song, list, g_volume=0.5;
 
 
 
@@ -41,18 +41,19 @@
         list.push(list.shift());
         current_song.unload();
         play_next_song();
-        console.log('skip');
     });
 
     previous.addEventListener('click', () => {
         list.unshift(list.pop());
         current_song.unload();
         play_next_song();
-        console.log('previous');
     });
 
     player_progress.addEventListener('input', () => current_song.seek(player_progress.value / 200));
-    volume.addEventListener('input', () => current_song.volume(volume.value / 100));
+    volume.addEventListener('input', () => {
+        current_song.volume(volume.value / 100);
+        g_volume = volume.value / 100;
+    });
 
 
 
@@ -65,20 +66,20 @@
         current_time_text.textContent = current;
     }, 16);
 
-
-
     // Functions
     function play_next_song() {
         current_song = new Howl({
             src: list[0],
             loop: true,
             autoplay: true,
             html5: true,
+            volume: g_volume,
             onload: () => {
-                meta_parse();
                 collection_init();
+                meta_parse();
                 const duration = current_song.duration();
                 player_progress.max = duration * 200;
+                duration_time_text.textContent = seconds_to_time(Math.trunc(duration));
             },
             onend: () => {
                 current_song.unload();
@@ -93,19 +94,23 @@
     function meta_parse() {
         musicmetadata(fs.createReadStream(list[0]), (err, metadata) => {
             if (err) return console.log(`${err}\n${err.stack.split('\n')[1]}`);
-            console.log(metadata)
             title.textContent = metadata.title || '曲名が設定されていません';
             artist.textContent = metadata.artist[0] || 'Unknown';
             album.textContent = metadata.album || 'Single';
             const base64Data = metadata?.picture?.[0]?.data?.toString('base64');
             if (base64Data) artwork.src = 'data:image/png;base64,' + base64Data;
-            else artwork.src = "https://1.bp.blogspot.com/-D2I7Z7-HLGU/Xlyf7OYUi8I/AAAAAAABXq4/jZ0035aDGiE5dP3WiYhlSqhhMgGy8p7zACNcBGAsYHQ/s1600/no_image_square.jpg";
-        });
-    }
+            else artwork.src = "../Assets/no_image_square.jpg";
+
+            new Notification(metadata.title || '曲名が設定されていません', {
+                body: metadata.artist[0] || 'Unknown',
+                silent: true
+            });
+    });
+}
 
     function collection_init() {
-        collection.innerHTML="";
-        for(let i = 0; i<10; i++){
+        while(collection.lastChild) collection.removeChild(collection.lastChild);
+        for(let i = 0; list.length >= 10 ? i < 10 : list.length === i; i++){
             musicmetadata(fs.createReadStream(list[i]), (err, metadata) => {
                 if (err) return console.log(`${err}\n${err.stack.split('\n')[1]}`);
                 let listCode = `
@@ -117,6 +122,8 @@
                 </li>
                 `;
                 collection.insertAdjacentHTML('beforeend',listCode);
+                const collection_inner = collection.getElementsByTagName('i')[0];
+                collection_inner.textContent = 'play_arrow';
         });
     }
 }