prise en compte des covers da,s les albums : <album_name>/cover.png

.gitignore

@@ -20,3 +20,8 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+public/audio
+src/assets/images/icono_1.png
+src/assets/images/icono_2.png
+src/data.json

scripts/weband-id3-to-json.js

@@ -44,6 +44,8 @@ function id3ToJSON(path){
       id3ToJSON(path +  file + '/');
     else {
       let filePath = path + file;
+      if(!filePath.endsWith(".mp3") && !filePath.endsWith(".wav"))
+        return;
       promises.push(new Promise((resolve, reject) => {
         new jsmediatags.Reader(filePath)
           .read({
@@ -54,6 +56,8 @@ function id3ToJSON(path){
               let album = getAlbum(tags.album);
               if(!album){
                 album = {"title": tags.album, "tracks": [], "year": tags.year}
+                if (fs.existsSync(path + 'cover.png'))
+                  album.cover = (path + 'cover.png').replace(INPUT,'audio/');
                 data.albums.push(album);
               }
               let track = {"title": tags.title, "file" : filePath.replace(INPUT,'audio/')};

src/App.vue

@@ -1,16 +1,16 @@
 <template>
   <div id="app">
-    <Weband/>
+    <Webbandd/>
   </div>
 </template>
 
 <script>
-import Weband from './components/Weband.vue'
+import Webbandd from './components/Webbandd.vue'
 
 export default {
   name: 'App',
   components: {
-    Weband
+    Webbandd
   }
 }
 </script>
@@ -28,6 +28,7 @@ body{
   font-family: var(--font-family);
   font-size: 2rem;
   letter-spacing: 0.1rem;
+  background-color: var(--main-color);
 }
 
 

src/assets/css/_variables.css

@@ -1,10 +1,12 @@
 @font-face {
-  font-family: "work-sans";
-  src: url('../fonts/work-sans/WorkSans-Regular.otf');
+  /*font-family: "work-sans";*/
+  /*src: url('../fonts/work-sans/WorkSans-Regular.otf');*/
 }
 :root{
-  --font-family : 'work-sans';
+  --font-family : 'arial';
   --pretty-margin: 0.5rem;
   --main-color: black;
-  --secondary-color: black;
+  --secondary-color: white;
+  --text-color: white;
+  --player-bg-color: rgba(255,255,255,0.95);
 }

src/components/Player.vue

@@ -40,6 +40,13 @@ export default {
     album: Object,
   },
 
+  watch: {
+      // whenever question changes, this function will run
+      album: function (newAlbum, oldAlbum) {
+        if(newAlbum !== oldAlbum)
+          this.collapsed = false;
+      }
+  },
   data: function () {
    return {
      switcher : null,
@@ -59,33 +66,6 @@ export default {
   mounted(){
     this.switcher = document.getElementsByClassName('player-switch')[0];
     document.body.append(this.switcher);
-
-    // this.currentAudio = null;
-    // this.playing = false;
-    // this.playerContainer = document.createElement("div");
-    // this.container = document.querySelector('#player')
-    // this.playerContainer.classList.add('dd-player');
-    // this.switcher = document.createElement("div");
-    // this.switcher.classList.add('dd-player-switch');
-    // this.playerContainer.classList.add('collapsed');
-    // document.body.appendChild(this.switcher);
-    //
-    // this.switcher.addEventListener('click', () => {
-    //   this.playerContainer.classList.toggle('collapsed');
-    //   this.switcher.classList.toggle('opened');
-    // });
-    //
-    //
-    // this.addProgressBar();
-    // this.bindAudioTags();
-    // this.addPlayButton();
-    //
-    // let wrap =  document.createElement("div");
-    // wrap.setAttribute('id', 'wrap-playlist')
-    // this.container.parentElement.appendChild(this.playerContainer);
-    // this.playerContainer.appendChild(wrap);
-    // wrap.appendChild(this.container);
-
   },
 
   methods: {
@@ -101,18 +81,6 @@ export default {
         this.audio = document.querySelectorAll('audio')[0];
       this.playing = true;
       this.audio.play();
-      // if(this.playing){
-      //   this.audio.play();
-      //   // this.currentAudio.parentElement.classList.add('playing');
-      //   // self.progressBar.setAttribute('max', Math.floor(self.currentAudio.duration));
-      //   // self.endTimeInfo.innerHTML = self.formatDuration(self.currentAudio.duration);
-      //   // this.playButton.setAttribute('src','./images/pause.png');
-      // }
-      // else{
-      //   this.audio.pause();
-      //   // self.currentAudio.parentElement.classList.remove('playing');
-      //   // this.playButton.setAttribute('src','./images/play.png');
-      // }
     },
 
     pause: function(){
@@ -121,7 +89,6 @@ export default {
     },
 
     trackClicked: function(audioId){
-      //let track = document.getElementById(audioId);
       if(this.playing){
           this.pause();
           this.audio = document.getElementById(audioId);
@@ -137,110 +104,6 @@ export default {
       this.audioPosition = Math.floor(this.audio.currentTime);
     },
 
-    // addProgressBar: function(){
-    //   this.progressBar = document.createElement("progress");
-    //   this.progressBar.setAttribute('value', 0);
-    //   this.startTimeInfo = document.createElement('div');
-    //   this.endTimeInfo = document.createElement('div');
-    //   let progressWrap = document.createElement("div");
-    //   this.startTimeInfo.innerHTML = "00:00";
-    //   this.endTimeInfo.innerHTML = "00:00";
-    //   progressWrap.appendChild(this.startTimeInfo);
-    //   progressWrap.appendChild(this.progressBar);
-    //   progressWrap.appendChild(this.endTimeInfo);
-    //   this.startTimeInfo.classList.add('time-info');
-    //   this.endTimeInfo.classList.add('time-info');
-    //   progressWrap.classList.add('progress-wrap');
-    //   this.playerContainer.append(progressWrap);
-    //   let self = this;
-    //   this.progressBar.addEventListener('click', (e) => {
-    //     if(self.currentAudio){
-    //       self.currentAudio.currentTime = Math.floor(((e.layerX - self.progressBar.offsetLeft) * self.currentAudio.duration) / self.progressBar.offsetWidth);
-    //       self.progressBar.value = Math.floor(self.currentAudio.currentTime );
-    //     }
-    //   });
-    //
-    // },
-
-
-    // addPlayButton: function(){
-    //   this.playButton = document.createElement("img");
-    //   this.playButton.setAttribute('src','./images/play.png');
-    //   this.playButton.setAttribute('id','play-button');
-    //   let wrap =  document.createElement("div");
-    //   wrap.append(this.playButton);
-    //   this.container.append(wrap);
-    //   let self = this;
-    //   this.playButton.addEventListener('click', () => {
-    //       self.playing = !self.playing;
-    //       if(self.playing){
-    //         self.currentAudio.play();
-    //         self.currentAudio.parentElement.classList.add('playing');
-    //         self.progressBar.setAttribute('max', Math.floor(self.currentAudio.duration));
-    //         self.endTimeInfo.innerHTML = self.formatDuration(self.currentAudio.duration);
-    //         this.playButton.setAttribute('src','./images/pause.png');
-    //       }
-    //       else{
-    //         self.currentAudio.pause();
-    //         self.currentAudio.parentElement.classList.remove('playing');
-    //         this.playButton.setAttribute('src','./images/play.png');
-    //       }
-    //   })
-    // },
-
-    // bindAudioTags: function(){
-    //   let liTags = this.container.querySelectorAll('li')
-    //   let self = this;
-    //   let i = 0;
-    //   liTags.forEach(function(itemElement){
-    //     let audioTag = itemElement.querySelector('audio')
-    //     if(audioTag){
-    //       audioTag.addEventListener('timeupdate', () => {
-    //         self.audioTimeUpdate(audioTag);
-    //       });
-    //       audioTag.addEventListener('ended', () => {
-    //         self.audioEnded(i);
-    //       })
-    //
-    //       //itemElement.appendChild(audioElement);
-    //       audioTag.setAttribute('id','track-'+i);
-    //       if(i === 0)
-    //         self.currentAudio = audioTag;
-    //       itemElement.addEventListener('click', () => {
-    //         let items = self.container.getElementsByTagName('li');
-    //         for(let i = 0; i < items.length; i++){
-    //           items[i].classList.remove('playing');
-    //         }
-    //         if(self.currentAudio)
-    //           self.currentAudio.pause();
-    //         audioTag.play();
-    //         self.playButton.setAttribute('src','./images/pause.png');
-    //         self.playing = true;
-    //         itemElement.classList.add('playing');
-    //         self.currentAudio = audioTag;
-    //         self.progressBar.setAttribute('max', Math.floor(self.currentAudio.duration));
-    //         self.endTimeInfo.innerHTML = self.formatDuration(self.currentAudio.duration);
-    //         self.progressBar.setAttribute('value', 0);
-    //       });
-    //
-    //     i++;
-    //   }
-    //   });
-    // },
-
-    // audioTimeUpdate: function(audioElt){
-    //   this.progressBar.value = Math.floor(audioElt.currentTime);
-    //   this.startTimeInfo.innerHTML = this.formatDuration(audioElt.currentTime);
-    // },
-    //
-    // audioEnded: function(n){
-    //   let audios = document.getElementsByTagName('audio');
-    //   let next = n == audios.length - 1 ? 0 : n + 1;
-    //   this.currentAudio.pause();
-    //   this.currentAudio.currentTime = 0;
-    //   this.currentAudio = document.getElementsByTagName('audio')[next];
-    //   this.currentAudio.parentElement.click();
-    // },
 
     formatDuration: function(time){
       let s = parseInt(time% 60);
@@ -264,7 +127,7 @@ export default {
   height: 100vh;
   position:fixed;
   top: 0px;
-  background-color: white;
+  background-color: var(--player-bg-color);/*rgba(var(--secondary-color), 0.8);*/
   right:0px;
   color: black;
   padding-top:  var(--one-dpi);
@@ -292,7 +155,13 @@ export default {
 .player-switch.opened{
   background-color: var(--dd-blue);
 }
+li{
+  cursor: pointer;
+}
 
+li:hover{
+  color: var(--main-color);
+}
 li.active{
   font-weight: bold;
 }
@@ -308,18 +177,9 @@ li.active{
   font-size: 1.5rem;
   list-style-type : none;
 }
-/*
-.dd-player ul li img{
-  width:24px;
-  height:24px;
-  margin-right: 12px;
-}
 
-.playing{
-  font-weight: bold;
-  color : black;
-}
-*/
+
+
 .progress-wrap{
   display:flex;
   width: 100%;
@@ -338,13 +198,6 @@ progress{
   width:66%;
 }
 
-/*
-#play-button{
-  max-width: calc(var(--one-dpi) / 2);
-  max-height: calc(var(--one-dpi) / 2);
-  margin: calc(var(--one-dpi) / 2);
-}
-*/
 progress::-moz-progress-bar{
   background-color: black;
 }
@@ -353,16 +206,12 @@ progress{
 }
 .button-wrap{
   margin-top: 100px;
+  margin-left: calc(var(--one-dpi) / 2);
 }
-/*
-.dd-player ul li, #play-button{
-  cursor : pointer;
+.button-wrap img{
+    cursor: pointer;
 }
 
-#wrap-playlist{
-  flex: 1;
-}
-*/
 span.track-number{
   width: 25px;
   display: inline-block;

src/components/Weband.vue → src/components/Webbandd.vue

@@ -2,15 +2,13 @@
   <div class="weband">
     <section class="cover">
     </section>
-    <section class="albums">
-        <h2>{{this.artist}} | Albums</h2>
-        <ul>
-          <li v-for="album in albums" v-bind:key="album.title" v-on:click="albumSelected(album)">
-            {{album.title}} | {{album.year}}
-          </li>
-        </ul>
+
+    <section v-for="album in albums" v-bind:key="album.title" class="album" v-on:click="albumSelected(album)">
+            <div>{{album.title}} | {{album.year}}</div>
+            <img :src="album.cover"/>
     </section>
 
+
     <section class="icono-2">
 
     </section>
@@ -72,38 +70,52 @@ export default {
 
 section{
     height: 100vh;
+    background-color: var(--main-color);
+    color: var(--text-color);
 }
 
 section h2 {
     font-size: 2rem;
 }
 
-section:nth-of-type(odd){
-    background-color: white;
-    color: var(--secondary-color);
-}
-
-section:nth-of-type(even){
+/* section.album:nth-of-type(even){
+    color: var(--main-color);
     background-color: var(--secondary-color);
-    color: white;
 }
 
+section.album:nth-of-type(odd){
+    background-color: var(--main-color);
+    color: var(--secondary-color);
+} */
+
 section.cover{
     background : url(../assets/images/icono_1.png) no-repeat center center;
-    background-color: var(--main-color);
+}
+
+section.album{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  cursor: pointer;
 
 }
+section.album img{
+  max-height: 80vh;
+  max-width: 80vh;
+  border : 2px solid var(--secondary-color);
+}
 
-section.albums{
-    background-color: black;
-    color:white;
+/*section.albums{*/
+    /*background-color: black;*/
+    /*color:white;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    line-height: 200%;
-}
+    line-height: 200%;*/
+/*}*/
 
-section.albums > * {
+/*section.albums > * {
     padding-left: 10vw;
 }
 
@@ -114,11 +126,10 @@ section.albums h2 {
 
 section.albums ul {
     list-style-type: none;
-}
+}*/
 
 section.icono-2{
   background : url(../assets/images/icono_2.png) no-repeat center center;
-  background-color: var(--secondary-color);
 }
 
 section.contact{
@@ -127,10 +138,7 @@ section.contact{
     justify-content: center;
     align-items: center;
     position :relative;
-
-    /* background : url(../assets/images/contact.png) no-repeat center center; */
-     background-color: var(--main-color);
-    /*color:white; */
+    color:var(--secondary-color);
 
 }