Merge pull request #2 from Nich87/dev

update design and scripts
Nich87 · Feb 15, 2022 · f672bf9 · f672bf9
2 parents 08f989d + dcca660
commit f672bf9
Show file tree

Hide file tree

Showing 6 changed files with 137 additions and 76 deletions.
diff --git a/.gitignore b/.gitignore
@@ -87,3 +87,5 @@ typings/
 
 # Electron-Forge
 out/
+
+dist/
diff --git a/src/config.json b/src/config.json
@@ -1,3 +1,3 @@
 {
-    "debug": true
+    "debug": false
 }
diff --git a/src/css/index.css b/src/css/index.css
@@ -25,6 +25,7 @@ body {
   transform: translate(-50%, -50%);
   left: 50%;
   top: 85%;
+  height: 50px;
   display: flex;
 }
 
@@ -34,12 +35,20 @@ body {
 }
 
 #artwork {
+  margin-top: 70px;
   margin-left: 70px;
   width: 600px;
   height: 600px;
 }
 
 #Music_list {
-  width: 50%;
+  position:fixed;
+  width: 30%;
+  left: 70%;
   margin: 0 0 0 auto;
+}
+
+#metadata {
+  margin-left: 70px;
+  width: 600px;
 }
diff --git a/src/index.html b/src/index.html
@@ -11,16 +11,12 @@
 
 <body>
   <div id="container">
-    <table id="Music_list">
-      <thead>
-        <th>曲名</th>
-        <th>アーティスト</th>
-        <th>長さ</th>
-      </thead>
-    </table>
+    <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-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>
@@ -35,7 +31,15 @@
       <input type="range" id="volume" min="0" max="100">
     </div>
 
-  <img src="" id="artwork">
+    <img src="" id="artwork">
+    <ul class="collection" id="metadata">
+      <li class="collection-item" id="title">
+        </p>
+      <li class="collection-item" id="artist">
+        </p>
+      <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>
@@ -53,5 +57,4 @@
   <!------------------>
 </body>
 
-</html>
-
+</html>
diff --git a/src/js/app.js b/src/js/app.js
@@ -1,76 +1,123 @@
-let player, list;
-M.AutoInit();
-
-ipcRenderer.on('start', (args, filelist) => {
-    filelist = Object.values(filelist);
-    console.log(filelist);
-    list = filelist;
-    Maker(list);
-});
-
-function Maker(list) {
-    player = new Howl({
-        src: list[0],
-        loop: true,
-        autoplay: true,
-        html5:true,
-        loop: true,
-        onload: () => play(player),
-        onend: () => {
-            player.unload();
-            list.push(list.shift());
-            Maker(list);
-        }
-    });
-}
+(() => { // Wrap with a function to avoid global pollution
+
 
-function play(player) {
-    const player_bt = document.getElementById('btn_play');
+    // HTML elements
+    const play_btn = document.getElementById('btn_play');
     const skip = document.getElementById('btn_skip');
     const previous = document.getElementById('btn_previous');
-    setInterval("nowplaying(player)", 1000);
-    meta_parse();
-    setTimeout(() => {
-        setInterval("seek()", 430);
-    }, 3000);
-
-    player_bt.addEventListener('click', (e) => {
-        e.target.innerHTML = player.playing() ? 'play_arrow' : 'pause';
-        e.target.innerHTML === 'pause' ? player.play() : player.pause();
+    const player_progress = document.getElementById('player-progress');
+    const artwork = document.getElementById('artwork');
+    const current_time_text = document.getElementById('current');
+    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;
+
+
+
+    // Initialization
+    M.AutoInit();
+    ipcRenderer.on('start', (_args, filelist) => {
+        filelist = Object.values(filelist);
+        console.log(filelist);
+        list = filelist;
+        collection_init();
+        play_next_song();
+    });
+
+    // Register event listeners
+    play_btn.addEventListener('click', () => {
+        if (current_song.playing()) current_song.pause();
+        else current_song.play();
     });
 
     skip.addEventListener('click', () => {
         list.push(list.shift());
-        player.unload();
-        Maker(list);
+        current_song.unload();
+        play_next_song();
         console.log('skip');
     });
 
     previous.addEventListener('click', () => {
         list.unshift(list.pop());
-        player.unload();
-        Maker(list);
+        current_song.unload();
+        play_next_song();
         console.log('previous');
     });
-}
 
-function nowplaying(player) {
-    const current = convert(Math.trunc(player.seek()));
-    const currentTime = document.getElementById('current').innerHTML = current;
-    const progress = document.getElementById('player-progress');
-    progress.max = player.duration();
-    progress.value = player.seek();
-}
+    player_progress.addEventListener('input', () => current_song.seek(player_progress.value / 200));
+    volume.addEventListener('input', () => current_song.volume(volume.value / 100));
 
-function meta_parse() {
-    mm(fs.createReadStream(list[0]), function (err, metadata) {
-        if (err) throw err;
-        console.log(metadata.picture[0].data);
-        document.getElementById('artwork').src = 'data:image/png;base64,' + metadata.picture[0].data.toString('base64');
-    });
-}
 
-function seek() {
-    const p = document.getElementById('player-progress').value;
-    if(convert(Math.trunc(player.seek())) !== convert(Math.trunc(p))) player.seek(p);
-}
+
+    // Register interval
+    setInterval(() => {
+        if (!current_song?.playing()) return;
+        const current_time = current_song.seek();
+        player_progress.value = current_time * 200;
+        const current = seconds_to_time(Math.trunc(current_time));
+        current_time_text.textContent = current;
+    }, 16);
+
+
+
+    // Functions
+    function play_next_song() {
+        current_song = new Howl({
+            src: list[0],
+            loop: true,
+            autoplay: true,
+            html5: true,
+            onload: () => {
+                meta_parse();
+                collection_init();
+                const duration = current_song.duration();
+                player_progress.max = duration * 200;
+            },
+            onend: () => {
+                current_song.unload();
+                list.push(list.shift());
+                play_next_song();
+            },
+            onplay: () => play_btn_inner.textContent = 'pause',
+            onpause: () => play_btn_inner.textContent = 'play_arrow',
+        });
+    }
+
+    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";
+        });
+    }
+
+    function collection_init() {
+        collection.innerHTML="";
+        for(let i = 0; i<10; i++){
+            musicmetadata(fs.createReadStream(list[i]), (err, metadata) => {
+                if (err) return console.log(`${err}\n${err.stack.split('\n')[1]}`);
+                let listCode = `
+                <li class="collection-item avatar">
+                <i class="material-icons circle red">audiotrack</i>
+                <span class="title">${metadata.title || '曲名が設定されていません'}</span>
+                <p>${metadata.artist[0] || 'Unknown'}</p>
+                <p>${metadata.album || 'Single'}</p>
+                </li>
+                `;
+                collection.insertAdjacentHTML('beforeend',listCode);
+        });
+    }
+}
+})();
diff --git a/src/js/preload.js b/src/js/preload.js
@@ -1,11 +1,11 @@
 const { ipcRenderer } = require('electron');
 const { Howl } = require('howler');
-const m = require('musicmetadata');
-const {seconds_to_time} = require('../../Util/convert');
+const musicmetadata = require('musicmetadata');
+const { seconds_to_time } = require('../../Util/convert');
 const fs = require('fs');
 
 global.ipcRenderer = ipcRenderer;
 global.Howl = Howl;
-global.mm = m;
-global.convert = seconds_to_time;
+global.musicmetadata = musicmetadata;
+global.seconds_to_time = seconds_to_time;
 global.fs = fs;