From 2988b446d06294107a5840747eb0f4f667050567 Mon Sep 17 00:00:00 2001 From: Sergio-Fernandez-Dev Date: Tue, 9 Aug 2022 16:43:17 +0200 Subject: [PATCH 01/72] moving files to frontend root folder --- frontend/{Sergify => }/.eslintrc.cjs | 0 frontend/{Sergify => }/.gitignore | 0 frontend/{Sergify => }/.vscode/extensions.json | 0 frontend/{Sergify => }/README.md | 0 frontend/Sergify/src/assets/logo.svg | 1 - frontend/{Sergify => }/index.html | 0 frontend/{Sergify => }/package-lock.json | 0 frontend/{Sergify => }/package.json | 0 frontend/{Sergify => }/public/favicon.ico | Bin frontend/{Sergify => }/src/App.vue | 1 - frontend/{Sergify => }/src/assets/base.css | 0 frontend/src/assets/logo.svg | 1 + frontend/{Sergify => }/src/assets/main.css | 0 .../src/components/__tests__/.gitignore | 0 .../{Sergify => }/src/components/icons/Example.vue | 0 frontend/{Sergify => }/src/main.js | 0 frontend/{Sergify => }/src/router/index.js | 0 frontend/{Sergify => }/src/stores/.gitignore | 0 frontend/{Sergify => }/src/views/.gitignore | 0 frontend/{Sergify => }/vite.config.js | 0 20 files changed, 1 insertion(+), 2 deletions(-) rename frontend/{Sergify => }/.eslintrc.cjs (100%) rename frontend/{Sergify => }/.gitignore (100%) rename frontend/{Sergify => }/.vscode/extensions.json (100%) rename frontend/{Sergify => }/README.md (100%) delete mode 100644 frontend/Sergify/src/assets/logo.svg rename frontend/{Sergify => }/index.html (100%) rename frontend/{Sergify => }/package-lock.json (100%) rename frontend/{Sergify => }/package.json (100%) rename frontend/{Sergify => }/public/favicon.ico (100%) rename frontend/{Sergify => }/src/App.vue (96%) rename frontend/{Sergify => }/src/assets/base.css (100%) create mode 100644 frontend/src/assets/logo.svg rename frontend/{Sergify => }/src/assets/main.css (100%) rename frontend/{Sergify => }/src/components/__tests__/.gitignore (100%) rename frontend/{Sergify => }/src/components/icons/Example.vue (100%) rename frontend/{Sergify => }/src/main.js (100%) rename frontend/{Sergify => }/src/router/index.js (100%) rename frontend/{Sergify => }/src/stores/.gitignore (100%) rename frontend/{Sergify => }/src/views/.gitignore (100%) rename frontend/{Sergify => }/vite.config.js (100%) diff --git a/frontend/Sergify/.eslintrc.cjs b/frontend/.eslintrc.cjs similarity index 100% rename from frontend/Sergify/.eslintrc.cjs rename to frontend/.eslintrc.cjs diff --git a/frontend/Sergify/.gitignore b/frontend/.gitignore similarity index 100% rename from frontend/Sergify/.gitignore rename to frontend/.gitignore diff --git a/frontend/Sergify/.vscode/extensions.json b/frontend/.vscode/extensions.json similarity index 100% rename from frontend/Sergify/.vscode/extensions.json rename to frontend/.vscode/extensions.json diff --git a/frontend/Sergify/README.md b/frontend/README.md similarity index 100% rename from frontend/Sergify/README.md rename to frontend/README.md diff --git a/frontend/Sergify/src/assets/logo.svg b/frontend/Sergify/src/assets/logo.svg deleted file mode 100644 index bc826fe..0000000 --- a/frontend/Sergify/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/Sergify/index.html b/frontend/index.html similarity index 100% rename from frontend/Sergify/index.html rename to frontend/index.html diff --git a/frontend/Sergify/package-lock.json b/frontend/package-lock.json similarity index 100% rename from frontend/Sergify/package-lock.json rename to frontend/package-lock.json diff --git a/frontend/Sergify/package.json b/frontend/package.json similarity index 100% rename from frontend/Sergify/package.json rename to frontend/package.json diff --git a/frontend/Sergify/public/favicon.ico b/frontend/public/favicon.ico similarity index 100% rename from frontend/Sergify/public/favicon.ico rename to frontend/public/favicon.ico diff --git a/frontend/Sergify/src/App.vue b/frontend/src/App.vue similarity index 96% rename from frontend/Sergify/src/App.vue rename to frontend/src/App.vue index 035f4f0..68225e7 100644 --- a/frontend/Sergify/src/App.vue +++ b/frontend/src/App.vue @@ -1,6 +1,5 @@ diff --git a/frontend/src/views/PlayerView.vue b/frontend/src/views/PlayerView.vue index 954cc37..24c43ff 100644 --- a/frontend/src/views/PlayerView.vue +++ b/frontend/src/views/PlayerView.vue @@ -5,11 +5,19 @@ diff --git a/frontend/src/services/apiCall.js b/frontend/src/services/apiCall.js index 37cf34c..ad7e728 100644 --- a/frontend/src/services/apiCall.js +++ b/frontend/src/services/apiCall.js @@ -7,7 +7,7 @@ async function getAlbumColletion() { params: { _expand: "artist" }, }; const result = await apiCall(options); - + return result; } @@ -15,7 +15,10 @@ async function getAllTracks(albumId) { const options = { method: "GET", url: `http://localhost:3000/albums/${albumId}`, - params: { _expand: "artist", _embed: "tracks" }, + params: { + _expand: "artist", + _embed: "tracks", + }, }; const result = await apiCall(options); From 705640998923f5b63a6ba68ab8acb4a64da02bc9 Mon Sep 17 00:00:00 2001 From: Sergio-Fernandez-Dev Date: Sat, 10 Sep 2022 13:54:26 +0200 Subject: [PATCH 22/72] change background dynammically --- frontend/src/components/PlayerComponent.vue | 24 ++++++++++++++++----- frontend/src/stores/playlistStore.js | 2 +- 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/PlayerComponent.vue b/frontend/src/components/PlayerComponent.vue index 677dcef..c9c7a2b 100644 --- a/frontend/src/components/PlayerComponent.vue +++ b/frontend/src/components/PlayerComponent.vue @@ -41,7 +41,7 @@ diff --git a/frontend/src/components/PlayerComponent.vue b/frontend/src/components/PlayerComponent.vue index c9c7a2b..ade9c56 100644 --- a/frontend/src/components/PlayerComponent.vue +++ b/frontend/src/components/PlayerComponent.vue @@ -1,47 +1,6 @@ - - + + + diff --git a/frontend/src/main.js b/frontend/src/main.js index be348a8..786af44 100644 --- a/frontend/src/main.js +++ b/frontend/src/main.js @@ -4,7 +4,6 @@ import { createPinia } from "pinia"; import App from "./App.vue"; import router from "./router"; -import "./assets/scss/app.scss"; const app = createApp(App); app.use(createPinia()); diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue index dbcd18f..4f397b8 100644 --- a/frontend/src/views/HomeView.vue +++ b/frontend/src/views/HomeView.vue @@ -25,5 +25,16 @@ onMounted(async () => { diff --git a/frontend/src/views/PlayerView.vue b/frontend/src/views/PlayerView.vue index 84a9763..9386406 100644 --- a/frontend/src/views/PlayerView.vue +++ b/frontend/src/views/PlayerView.vue @@ -9,5 +9,10 @@ import PlayerComponent from "../components/PlayerComponent.vue"; From 55742faf138b5a161cf517f9566978606fa4b03d Mon Sep 17 00:00:00 2001 From: Sergio-Fernandez-Dev Date: Sat, 10 Sep 2022 21:31:28 +0200 Subject: [PATCH 24/72] style media and icon box --- frontend/src/assets/scss/utilities/_vars.scss | 2 ++ frontend/src/components/PlayerComponent.vue | 19 ++++++++++++++++--- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/frontend/src/assets/scss/utilities/_vars.scss b/frontend/src/assets/scss/utilities/_vars.scss index c30de10..90efbba 100644 --- a/frontend/src/assets/scss/utilities/_vars.scss +++ b/frontend/src/assets/scss/utilities/_vars.scss @@ -13,6 +13,8 @@ $color: ( 'shadow-dark': #000, 'shadow-light': #fff, 'border-light': #9E9E9E, + 'timebar': #DAD9CA, + 'timebar-border': #000 ); // Fonts diff --git a/frontend/src/components/PlayerComponent.vue b/frontend/src/components/PlayerComponent.vue index ade9c56..7b87b80 100644 --- a/frontend/src/components/PlayerComponent.vue +++ b/frontend/src/components/PlayerComponent.vue @@ -143,6 +143,10 @@ function updateProgress() { diff --git a/frontend/src/components/icons/HomeIcon.vue b/frontend/src/components/icons/HomeIcon.vue new file mode 100644 index 0000000..00e8193 --- /dev/null +++ b/frontend/src/components/icons/HomeIcon.vue @@ -0,0 +1,53 @@ + diff --git a/frontend/src/components/icons/MoreOptionsIcon.vue b/frontend/src/components/icons/MoreOptionsIcon.vue new file mode 100644 index 0000000..b229ebe --- /dev/null +++ b/frontend/src/components/icons/MoreOptionsIcon.vue @@ -0,0 +1,53 @@ + From 43b5f9939bed317908e2e3e0ba28c3f323ec47c1 Mon Sep 17 00:00:00 2001 From: Sergio-Fernandez-Dev Date: Mon, 19 Sep 2022 18:17:20 +0200 Subject: [PATCH 26/72] styling player and adding tracks --- frontend/src/App.vue | 5 +- frontend/src/assets/scss/utilities/_vars.scss | 53 +++++++++-------- frontend/src/components/PlayerComponent.vue | 59 ++++++++++++------- frontend/src/components/TrackComponent.vue | 35 ++++++++--- 4 files changed, 98 insertions(+), 54 deletions(-) diff --git a/frontend/src/App.vue b/frontend/src/App.vue index b9d23d9..ec01fc3 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -21,6 +21,9 @@ html { font-size: 62.5%; } body { + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; min-height: 100vh; background-color: white; font-size: 16rem; @@ -32,7 +35,7 @@ body { #app { min-height: 100vh; - min-width: 100vw; + min-width: 100%; background-image: url(@/assets/img/background.png); background-repeat: no-repeat; background-position: center; diff --git a/frontend/src/assets/scss/utilities/_vars.scss b/frontend/src/assets/scss/utilities/_vars.scss index 90efbba..29e020b 100644 --- a/frontend/src/assets/scss/utilities/_vars.scss +++ b/frontend/src/assets/scss/utilities/_vars.scss @@ -1,36 +1,37 @@ //Colors $color: ( - 'primary': #727E7D, - 'primary-dark': #373D3D, - 'secondary': #DAD9CA, - 'background': rgba(39, 39, 39, 0.94), - 'background-dark': #000, - 'contrast': #C9A18D, - 'text-light': #DAD9CA, - 'text-dark': #000, - 'icon-dark': #000, - 'icon-light': #DAD9CA, - 'shadow-dark': #000, - 'shadow-light': #fff, - 'border-light': #9E9E9E, - 'timebar': #DAD9CA, - 'timebar-border': #000 + "primary": #727e7d, + "primary-dark": #373d3d, + "secondary": #dad9ca, + "background": rgba(39, 39, 39, 0.94), + "background-dark": #000, + "contrast": #c9a18d, + "text-light": #dad9ca, + "text-dark": #000, + "icon-dark": #000, + "icon-light": #dad9ca, + "shadow-dark": #000, + "shadow-light": #fff, + "border-light": #9e9e9e, + "timebar": #dad9ca, + "timebar-border": #000, + "timebar-progress": #ff0000, ); // Fonts -$primary-font-family: 'Ubuntu'; -$secondary-font-family: 'Inter'; -$font-size: ( - 'lg': 3rem, - 'md': 2.4rem, - 'sm': 2.1rem, - 'mv-lg': 2.6rem, - 'mv-md': 2rem, - 'mv-sm': 1.7rem, - 'mv-xs': 1.5rem +$primary-font-family: "Ubuntu"; +$secondary-font-family: "Inter"; +$font-size: ( + "lg": 3rem, + "md": 2.4rem, + "sm": 2.1rem, + "mv-lg": 2.6rem, + "mv-md": 2rem, + "mv-sm": 1.7rem, + "mv-xs": 1.5rem, ); // Breakpoints $screen-xs: 480px; $screen-md: 960px; -$screen-lg: 1024px; +$screen-lg: 1024px; diff --git a/frontend/src/components/PlayerComponent.vue b/frontend/src/components/PlayerComponent.vue index 3d14aac..dcf5848 100644 --- a/frontend/src/components/PlayerComponent.vue +++ b/frontend/src/components/PlayerComponent.vue @@ -111,9 +111,11 @@ function updateProgress() {

{{ store.playlist.artist }}

- + + -
+ +
@@ -123,7 +125,7 @@ function updateProgress() {
-

+

{{ currentTime }} / {{ duration }}

@@ -134,14 +136,12 @@ function updateProgress() {
    -
  • - -
    • +
@@ -149,12 +149,12 @@ function updateProgress() { diff --git a/frontend/src/components/TrackComponent.vue b/frontend/src/components/TrackComponent.vue index 9a0c9ef..75a5f30 100644 --- a/frontend/src/components/TrackComponent.vue +++ b/frontend/src/components/TrackComponent.vue @@ -1,14 +1,35 @@ + + - + + &__icon { + width: 2rem; + margin-right: 2rem; + } + &__p { + color: map-get($map: $color, $key: "text-dark"); + @include font( + $family: $secondary-font-family, + $size: map-get($map: $font-size, $key: "mv-xs") + ); + } +} + From 5cb3a2e6002221cd65ec643a0383640f1e1f777f Mon Sep 17 00:00:00 2001 From: Sergio-Fernandez-Dev Date: Mon, 19 Sep 2022 21:05:31 +0200 Subject: [PATCH 27/72] send complete track to TrackComponent --- frontend/src/components/PlayerComponent.vue | 3 +-- frontend/src/components/TrackComponent.vue | 25 +++++++++++++++++---- 2 files changed, 22 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/PlayerComponent.vue b/frontend/src/components/PlayerComponent.vue index dcf5848..320b957 100644 --- a/frontend/src/components/PlayerComponent.vue +++ b/frontend/src/components/PlayerComponent.vue @@ -139,8 +139,7 @@ function updateProgress() {
diff --git a/frontend/src/components/TrackComponent.vue b/frontend/src/components/TrackComponent.vue index 75a5f30..1c59ffa 100644 --- a/frontend/src/components/TrackComponent.vue +++ b/frontend/src/components/TrackComponent.vue @@ -1,14 +1,31 @@ From aa45ae3e7b43b9ebe2bba480bf8fb294320dbf28 Mon Sep 17 00:00:00 2001 From: Sergio-Fernandez-Dev Date: Tue, 20 Sep 2022 20:50:43 +0200 Subject: [PATCH 28/72] start timebR animation --- frontend/src/components/PlayerComponent.vue | 86 +++++++++------------ frontend/src/components/TrackComponent.vue | 21 +---- frontend/src/stores/playlistStore.js | 49 +++++++++++- 3 files changed, 89 insertions(+), 67 deletions(-) diff --git a/frontend/src/components/PlayerComponent.vue b/frontend/src/components/PlayerComponent.vue index 320b957..5f295ec 100644 --- a/frontend/src/components/PlayerComponent.vue +++ b/frontend/src/components/PlayerComponent.vue @@ -13,67 +13,33 @@ import HomeIcon from "./icons/HomeIcon.vue"; const albumId = useRoute().params.albumId; const store = usePlaylistStore(); +const backgroundImg = ref(); +const timeBarWidth = ref(0); +const circleLeft = ref(0); let audio = null; let duration = null; let currentTime = null; -let backgroundImg = ref(); onMounted(async () => { const album = await getAllTracks(albumId); - audio = new Audio(); backgroundImg.value = `url('${album.cover}')`; store.addAlbumToPlaylist(album); - audio.src = store.currentTrack.url; - + audio = store.audio; audio.ontimeupdate = () => { - updateProgress(); + updateTime(); }; audio.onloadedmetadata = () => { - updateProgress(); + updateTime(); }; audio.onended = () => { - nextSong(); + store.nextSong(); }; }); -function startSong() { - audio.play(); -} - -function pauseSong() { - audio.pause(); -} - -function nextSong() { - const playlist = store.playlist; - let nextSong = store.currentTrack.order; - - if (nextSong > playlist.tracks.length - 1) { - nextSong = 0; - } - - store.loadTrack(playlist.tracks[nextSong]); - audio.src = store.currentTrack.url; - startSong(); -} - -function previousSong() { - const playlist = store.playlist; - let previousSong = store.currentTrack.order - 2; - - if (previousSong < 0) { - previousSong = playlist.tracks.length - 1; - } - - store.loadTrack(playlist.tracks[previousSong]); - audio.src = store.currentTrack.url; - startSong(); -} - -function updateProgress() { +function updateTime() { const trackDuration = document.getElementById("track-duration"); const time = document.getElementById("current-time"); @@ -100,6 +66,27 @@ function updateProgress() { trackDuration.innerText = duration; time.innerText = currentTime; } + +function moveTimeBar(e) { + updateTimeBar(e.pageX); +} + +function updateTimeBar(currentPosition) { + let progress = ref(); + let maxduration = this.audio.duration; + let position = currentPosition - progress.value.offsetLeft; + let percentage = (100 * position) / progress.value.offsetWidth; + if (percentage > 100) { + percentage = 100; + } + if (percentage < 0) { + percentage = 0; + } + timeBarWidth.value = percentage + "%"; + circleLeft.value = percentage + "%"; + audio.currentTime = (maxduration * percentage) / 100; + audio.play(); +}