Parcourir la source

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

master
choj il y a 4 ans
Parent
révision
abd1f13a03
6 fichiers modifiés avec 73 ajouts et 204 suppressions
  1. +5
    -0
      .gitignore
  2. +4
    -0
      scripts/weband-id3-to-json.js
  3. +4
    -3
      src/App.vue
  4. +6
    -4
      src/assets/css/_variables.css
  5. +19
    -170
      src/components/Player.vue
  6. +35
    -27
      src/components/Webbandd.vue

+ 5
- 0
.gitignore Voir le fichier

@@ -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

+ 4
- 0
scripts/weband-id3-to-json.js Voir le fichier

@@ -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/')};


+ 4
- 3
src/App.vue Voir le fichier

@@ -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);
}




+ 6
- 4
src/assets/css/_variables.css Voir le fichier

@@ -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);
}

+ 19
- 170
src/components/Player.vue Voir le fichier

@@ -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 Voir le fichier

@@ -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);

}


Chargement…
Annuler
Enregistrer