diff --git a/src/assets/css/BottomBar/BottomBar.scss b/src/assets/css/BottomBar/BottomBar.scss index bb18f0d..e5acb13 100644 --- a/src/assets/css/BottomBar/BottomBar.scss +++ b/src/assets/css/BottomBar/BottomBar.scss @@ -1,17 +1,10 @@ .b-bar { height: 100%; - // padding: 0 $small 0 $small; - - .prog { - display: grid; - } .grid { display: grid; height: 100%; - // grid-auto-columns: 1fr; - // grid-auto-flow: column; - grid-template-columns: 1fr 3fr 1fr; + grid-template-columns: 1fr 2fr 1fr; @include phone-only { grid-template-columns: 1fr 9.2rem; @@ -48,39 +41,64 @@ } .controlsx { - // border: solid 1px; width: 100%; overflow: hidden; display: flex; align-items: center; - justify-content: flex-end; + margin: $small; + padding: $small; - @include phone-only { - // width: min-content; + .progress-bottom { + display: flex; + align-items: center; } .controls-bottom { - // border: solid 1px; - - width: min-content; - - .shuffle, .fav { - @include phone-only { - display: none !important; - } - } + width: min-content; } .progress-bottom { width: 100%; .durationx { - background-color: #202020; + background-color: rgba(0, 72, 131, 0.171); padding: $smaller; - border-radius: .4rem; - margin: 0 $small 0 $small; + border-radius: 0.4rem; + margin: 0 $small 0 $small; + font-size: .8rem; + color: rgb(0, 119, 255); } - // display: none; + } + } + + .r-group { + display: flex; + align-items: center; + gap: $small; + + & > * { + height: 2rem; + width: 2rem; + background-size: 1.2rem !important; + background-position: 45% 50%; + cursor: pointer; + border-radius: 0.5rem; + + &:hover { + background-color: rgb(170, 50, 50); + } + } + + .heart { + background-image: url(../../icons/heart.svg); + } + + .add-to { + background-image: url(../../icons/plus.svg); + } + + .repeat { + background-image: url(../../icons/repeat.svg); } } diff --git a/src/assets/css/ProgressBar.scss b/src/assets/css/ProgressBar.scss new file mode 100644 index 0000000..14efdb2 --- /dev/null +++ b/src/assets/css/ProgressBar.scss @@ -0,0 +1,70 @@ +input[type="range"] { + -webkit-appearance: none; + margin-right: 15px; + width: calc(100% - 2px); + height: 0.3rem; + background: rgb(59, 57, 57); + border-radius: 5px; + background-image: linear-gradient($blue, $blue); + background-size: 0% 100%; + background-repeat: no-repeat; +} + +/* Input Thumb */ +input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + height: 0.8rem; + width: 0.8rem; + border-radius: 50%; + background: $blue; +} + +input[type="range"]::-moz-range-thumb { + -webkit-appearance: none; + height: 1rem; + width: 1rem; + border-radius: 50%; + background: $blue; +} + +input[type="range"]::-ms-thumb { + -webkit-appearance: none; + height: 1rem; + width: 1rem; + border-radius: 50%; + background: $blue; +} + +input[type="range"]::-webkit-slider-thumb:hover { + background: $pink; +} + +input[type="range"]::-moz-range-thumb:hover { + background: $pink; +} + +input[type="range"]::-ms-thumb:hover { + background: $pink; +} + +/* Input Track */ +input[type="range"]::-webkit-slider-runnable-track { + -webkit-appearance: none; + box-shadow: none; + border: none; + background: transparent; +} + +input[type="range"]::-moz-range-track { + -webkit-appearance: none; + box-shadow: none; + border: none; + background: transparent; +} + +input[type="range"]::-ms-track { + -webkit-appearance: none; + box-shadow: none; + border: none; + background: transparent; +} diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss index a633c0d..fabaf24 100644 --- a/src/assets/css/global.scss +++ b/src/assets/css/global.scss @@ -1,3 +1,5 @@ +@import "../css/ProgressBar.scss"; + :root { --separator: #ffffff46; --green: #4ad168; @@ -104,8 +106,6 @@ button { .bottom-bar { grid-area: bottom-bar; height: 4rem; - // margin: 0 $small 0 $small; - // display: none; } .collapsed .l-sidebar { @@ -122,7 +122,7 @@ button { } .rounded { - border-radius: 10px; + border-radius: $small; } .circular { @@ -271,102 +271,21 @@ button { color: rgb(250, 250, 250); &:hover { - background-color: rgb(170, 50, 50); + background-color: $pink; } } -.progress { - display: flex; - align-items: center; - position: relative; - - .duration { - position: absolute; - right: 0; - top: -1rem; - font-size: small; - } - - input { - -webkit-appearance: none; - width: 100%; - border: none; - outline: none; - background: transparent; - } - - input:focus { - outline: none; - } - - - input::-webkit-slider-runnable-track { - width: 100%; - height: 0.25rem; - cursor: pointer; - background: #252829; - // background: linear-gradient(to right, #1488cc, #2b32b2); - } - - input::-webkit-slider-thumb { - -webkit-appearance: none; - height: 1rem; - width: 1rem; - border-radius: 50%; - background: #ffffff; - cursor: pointer; - margin-top: -0.35rem; - } - - input:focus::-webkit-slider-runnable-track, - input::-moz-range-track { - background: #367ebd; - } - - input::-moz-range-thumb { - height: 1rem; - width: 1rem; - border-radius: 50%; - background: #ffffff; - cursor: pointer; - margin-top: -0.35rem; - } +input[type="number"] { + width: 40px; + padding: 4px 5px; + border: 1px solid #bbb; + border-radius: 3px; } .controls { display: grid; grid-template-columns: repeat(3, 1fr); - .nav { - display: grid; - grid-template-columns: repeat(3, 1fr); - width: 100%; - - & * { - height: 3rem; - width: 3rem; - background-size: 50%; - cursor: pointer; - border-radius: 0.5rem; - } - - #previous { - background-image: url(../../assets/icons/previous.svg); - } - - .play-pause { - background-image: url(../../assets/icons/play.svg); - } - - .isPlaying { - background-image: url(../../assets/icons/pause.svg); - } - - #next { - background-image: url(../../assets/icons/next.svg); - } - } - .shuffle { width: 100%; display: flex; @@ -378,6 +297,10 @@ button { background-size: 70%; cursor: pointer; border-radius: 0.5rem; + + &:hover { + background-color: rgb(170, 50, 50); + } } & :first-child { @@ -401,6 +324,10 @@ button { background-size: 70%; border-radius: 0.5rem; cursor: pointer; + + &:hover { + background-color: rgb(170, 50, 50); + } } & :first-child { @@ -411,10 +338,4 @@ button { background-image: url(../../assets/icons/heart.svg); } } - - .fav *:hover, - .shuffle *:hover, - .nav *:hover { - background-color: rgb(5, 80, 150); - } } diff --git a/src/components/BottomBar/BottomBar.vue b/src/components/BottomBar/BottomBar.vue index 0607ba4..978a636 100644 --- a/src/components/BottomBar/BottomBar.vue +++ b/src/components/BottomBar/BottomBar.vue @@ -2,33 +2,25 @@
-
+
-
- -
- -
+
0:45 - + 3:55
+
+
+
+
+
+
+
+
+
-
-
@@ -38,14 +30,11 @@ import { ref } from "vue"; import "../../assets/css/BottomBar/BottomBar.scss"; import playAudio from "../../composables/playAudio"; import SongCard from "./SongCard.vue"; +import Progress from "../shared/Progress.vue"; +import HotKeys from "../shared/HotKeys.vue"; -const pos = ref(playAudio.pos); const isPlaying = ref(playAudio.playing); -const seek = () => { - playAudio.seek(document.getElementById("progress").value); -}; - const { playNext } = playAudio; const { playPrev } = playAudio; const { playPause } = playAudio; diff --git a/src/components/RightSideBar/NowPlaying.vue b/src/components/RightSideBar/NowPlaying.vue index 3450bc1..d0c4300 100644 --- a/src/components/RightSideBar/NowPlaying.vue +++ b/src/components/RightSideBar/NowPlaying.vue @@ -22,29 +22,14 @@
{{ current.length }}
- +
-
- -
- -
+
@@ -55,9 +40,13 @@ @@ -95,14 +82,12 @@ export default { .now-playing { border-radius: 0.5rem; height: 14rem; - margin-top: .5rem; + margin-top: 0.5rem; padding: 0.5rem; background: $card-dark; display: grid; grid-template-rows: 3fr 1fr; - - .art-tags { display: flex; align-items: center; @@ -135,4 +120,4 @@ export default { } } } - \ No newline at end of file + diff --git a/src/components/shared/AlbumCard.vue b/src/components/shared/AlbumCard.vue index 21ede12..48c6982 100644 --- a/src/components/shared/AlbumCard.vue +++ b/src/components/shared/AlbumCard.vue @@ -1,5 +1,11 @@ + + diff --git a/src/components/shared/Progress.vue b/src/components/shared/Progress.vue new file mode 100644 index 0000000..e7057eb --- /dev/null +++ b/src/components/shared/Progress.vue @@ -0,0 +1,20 @@ + + + diff --git a/src/composables/playAudio.js b/src/composables/playAudio.js index b6cac3e..d4a15b6 100644 --- a/src/composables/playAudio.js +++ b/src/composables/playAudio.js @@ -11,6 +11,7 @@ const playing = ref(state.is_playing); const url = "http://0.0.0.0:8901/"; const playAudio = (path) => { + const elem = document.getElementById('progress') const full_path = url + encodeURIComponent(path); new Promise((resolve, reject) => { @@ -26,7 +27,8 @@ const playAudio = (path) => { audio.ontimeupdate = () => { pos.value = (audio.currentTime / audio.duration) * 1000; - + let bg_size = ((audio.currentTime / audio.duration)*100) + elem.style.backgroundSize = `${bg_size}% 100%`; }; }) .catch((err) => console.log(err));