diff --git a/.gitignore b/.gitignore index 11f5d71..c77630a 100644 --- a/.gitignore +++ b/.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 diff --git a/scripts/weband-id3-to-json.js b/scripts/weband-id3-to-json.js index 82a8e6d..8c79031 100644 --- a/scripts/weband-id3-to-json.js +++ b/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/')}; diff --git a/src/App.vue b/src/App.vue index e493104..cfc32a1 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,16 +1,16 @@ @@ -28,6 +28,7 @@ body{ font-family: var(--font-family); font-size: 2rem; letter-spacing: 0.1rem; + background-color: var(--main-color); } diff --git a/src/assets/css/_variables.css b/src/assets/css/_variables.css index 8215168..fcb2ab9 100644 --- a/src/assets/css/_variables.css +++ b/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); } diff --git a/src/components/Player.vue b/src/components/Player.vue index a33f50d..6d05297 100644 --- a/src/components/Player.vue +++ b/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; diff --git a/src/components/Weband.vue b/src/components/Webbandd.vue similarity index 72% rename from src/components/Weband.vue rename to src/components/Webbandd.vue index 177dbea..67683bf 100644 --- a/src/components/Weband.vue +++ b/src/components/Webbandd.vue @@ -2,15 +2,13 @@
-
-

{{this.artist}} | Albums

- + +
+
{{album.title}} | {{album.year}}
+
+
@@ -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); }