mirror of
https://github.com/tcsenpai/swingmusic.git
synced 2025-06-09 12:37:22 +00:00
move global search to right sidebar
This commit is contained in:
geoffrey45
parent
e847574446
commit
3eef90dc8a
@ -9,7 +9,6 @@
|
||||
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
|
||||
},
|
||||
"dependencies": {
|
||||
"animate.css": "^4.1.1",
|
||||
"mitt": "^3.0.0",
|
||||
"register-service-worker": "^1.7.1",
|
||||
"sass": "^1.49.0",
|
||||
|
||||
@ -15,7 +15,7 @@ def initialize() -> None:
|
||||
Runs all the necessary setup functions.
|
||||
"""
|
||||
helpers.create_config_dir()
|
||||
# helpers.check_for_new_songs()
|
||||
helpers.check_for_new_songs()
|
||||
|
||||
|
||||
initialize()
|
||||
|
||||
59
src/App.vue
59
src/App.vue
@ -12,22 +12,10 @@
|
||||
<PinnedStuff :collapsed="collapsed" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="search-box">
|
||||
<Search
|
||||
v-model:search="search"
|
||||
@expandSearch="expandSearch"
|
||||
@collapseSearch="collapseSearch"
|
||||
/>
|
||||
</div>
|
||||
<div class="search-box"></div>
|
||||
<router-view />
|
||||
</div>
|
||||
<div class="r-sidebar">
|
||||
<div class="m-np">
|
||||
<NowPlaying />
|
||||
</div>
|
||||
<UpNext v-model:up_next="up_next" @expandQueue="expandQueue" />
|
||||
<RecommendedArtist />
|
||||
</div>
|
||||
<RightSideBar />
|
||||
<div class="bottom-bar">
|
||||
<BottomBar />
|
||||
</div>
|
||||
@ -38,24 +26,18 @@
|
||||
import { ref } from "@vue/reactivity";
|
||||
|
||||
import Navigation from "./components/LeftSidebar/Navigation.vue";
|
||||
import PinnedStuff from "./components/LeftSidebar/PinnedStuff.vue"
|
||||
import Search from "./components/Search.vue";
|
||||
import NowPlaying from "./components/RightSideBar/NowPlaying.vue";
|
||||
import UpNext from "./components/RightSideBar/UpNext.vue";
|
||||
import RecommendedArtist from "./components/RightSideBar/Recommendation.vue";
|
||||
import PinnedStuff from "./components/LeftSidebar/PinnedStuff.vue";
|
||||
import BottomBar from "@/components/BottomBar/BottomBar.vue";
|
||||
|
||||
import perks from "@/composables/perks.js";
|
||||
import Main from "./components/RightSideBar/Main.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Navigation,
|
||||
PinnedStuff,
|
||||
Search,
|
||||
NowPlaying,
|
||||
UpNext,
|
||||
RecommendedArtist,
|
||||
BottomBar
|
||||
BottomBar,
|
||||
RightSideBar: Main,
|
||||
},
|
||||
|
||||
setup() {
|
||||
@ -67,29 +49,9 @@ export default {
|
||||
collapsed.value = !collapsed.value;
|
||||
}
|
||||
|
||||
let up_next = ref(true);
|
||||
let search = ref(false);
|
||||
|
||||
const expandQueue = () => {
|
||||
up_next.value = !up_next.value;
|
||||
};
|
||||
|
||||
const expandSearch = () => {
|
||||
search.value = true;
|
||||
};
|
||||
|
||||
const collapseSearch = () => {
|
||||
search.value = false;
|
||||
};
|
||||
|
||||
return {
|
||||
toggleNav,
|
||||
expandSearch,
|
||||
collapseSearch,
|
||||
expandQueue,
|
||||
collapsed,
|
||||
up_next,
|
||||
search,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -106,10 +68,10 @@ export default {
|
||||
#toggle {
|
||||
position: absolute;
|
||||
left: 0.2rem;
|
||||
width: 4rem;
|
||||
width: 3rem;
|
||||
height: 100%;
|
||||
background: url(./assets/icons/menu.svg);
|
||||
background-size: 50%;
|
||||
background-size: 2rem;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
cursor: pointer;
|
||||
@ -118,14 +80,11 @@ export default {
|
||||
.logo {
|
||||
height: 2rem;
|
||||
width: 9rem;
|
||||
margin-left: 4rem;
|
||||
margin-left: 3rem;
|
||||
background: url(./assets/logo.svg);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
animation: fadeIn;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
.r-sidebar {
|
||||
|
||||
@ -47,6 +47,7 @@
|
||||
align-items: center;
|
||||
margin: $small;
|
||||
padding: $small;
|
||||
background-color: $bbb;
|
||||
|
||||
.progress-bottom {
|
||||
display: flex;
|
||||
|
||||
@ -45,6 +45,8 @@
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
background-image: url(../../icons/search.svg);
|
||||
|
||||
@ -7,12 +7,16 @@ $green: #439443;
|
||||
$separator: #ffffff46;
|
||||
$pink: #c43a3a;
|
||||
$highlight-blue: #006eff;
|
||||
$bbb: #050608; //bottom controls background
|
||||
|
||||
// sizes
|
||||
$small: 0.5em;
|
||||
$smaller: 0.25em;
|
||||
$small: 0.5rem;
|
||||
$smaller: 0.25rem;
|
||||
$medium: 0.75rem;
|
||||
$large: 1.5rem;
|
||||
$larger: 2rem;
|
||||
|
||||
// media query mixins
|
||||
|
||||
@mixin phone-only {
|
||||
@media (max-width: 599px) {
|
||||
@content;
|
||||
|
||||
@ -95,11 +95,9 @@ button {
|
||||
}
|
||||
|
||||
.l-sidebar {
|
||||
width: 15em;
|
||||
width: 15rem;
|
||||
grid-area: l-sidebar;
|
||||
padding-top: 0.5rem;
|
||||
margin: 0.5rem 0 0.5rem 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: $card-dark;
|
||||
}
|
||||
|
||||
@ -109,7 +107,7 @@ button {
|
||||
}
|
||||
|
||||
.collapsed .l-sidebar {
|
||||
width: 70px;
|
||||
width: 3rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
@ -141,16 +139,6 @@ button {
|
||||
|
||||
.r-sidebar {
|
||||
grid-area: r-sidebar;
|
||||
border-radius: 5px;
|
||||
margin-right: 0.5rem;
|
||||
overflow-y: auto;
|
||||
width: 30em;
|
||||
position: relative;
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
@include tablet-landscape {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="side-nav-container border" :class="{ collapsed: collapsed }">
|
||||
<div class="side-nav-container" :class="{ collapsed: collapsed }">
|
||||
<router-link :to="{ name: 'Home' }">
|
||||
<div class="nav-button" id="home-button">
|
||||
<div class="in">
|
||||
@ -75,14 +75,12 @@ export default {
|
||||
<style lang="scss">
|
||||
.collapsed {
|
||||
.nav-button {
|
||||
font-size: smaller;
|
||||
margin-top: 5px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.in {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
@ -93,8 +91,9 @@ export default {
|
||||
.side-nav-container {
|
||||
padding: $small;
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 1rem;
|
||||
padding-top: 10px;
|
||||
margin-top: 1rem;
|
||||
|
||||
.nav-button {
|
||||
border-radius: $small;
|
||||
@ -105,7 +104,33 @@ export default {
|
||||
padding: 0.6rem 0 0.6rem 0;
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(5, 80, 150);
|
||||
#home-icon {
|
||||
background-color: rgba(145, 58, 58, 0.555);
|
||||
}
|
||||
|
||||
#album-icon {
|
||||
background-color: rgba(113, 58, 145, 0.555);
|
||||
}
|
||||
|
||||
#artists-icon {
|
||||
background-color: rgba(13, 72, 139, 0.555);
|
||||
}
|
||||
|
||||
#playlists-icon {
|
||||
background-color: rgba(206, 13, 132, 0.555);
|
||||
}
|
||||
|
||||
#mixes-icon {
|
||||
background-color: rgba(0, 85, 81, 0.555);
|
||||
}
|
||||
|
||||
#folders-icon {
|
||||
background-color: rgba(90, 89, 3, 0.596);
|
||||
}
|
||||
|
||||
#settings-icon {
|
||||
background-color: rgba(129, 106, 106, 0.596);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
|
||||
55
src/components/RightSideBar/Main.vue
Normal file
55
src/components/RightSideBar/Main.vue
Normal file
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div class="r-sidebar">
|
||||
<!-- <div class="m-np"> -->
|
||||
<!-- <NowPlaying class="hidden"/> -->
|
||||
<!-- </div> -->
|
||||
<div class="s">
|
||||
<Search
|
||||
v-model:search="search"
|
||||
@expandSearch="expandSearch"
|
||||
@collapseSearch="collapseSearch"
|
||||
/>
|
||||
</div>
|
||||
<div class="q">
|
||||
<UpNext v-model:up_next="up_next" @expandQueue="expandQueue" />
|
||||
</div>
|
||||
<div class="r">
|
||||
<RecommendedArtist />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import Search from "../Search.vue";
|
||||
import UpNext from "./UpNext.vue";
|
||||
import RecommendedArtist from "@/components/RightSideBar/Recommendation.vue";
|
||||
|
||||
let up_next = ref(true);
|
||||
let search = ref(false);
|
||||
|
||||
const expandQueue = () => {
|
||||
up_next.value = !up_next.value;
|
||||
};
|
||||
|
||||
const expandSearch = () => {
|
||||
search.value = true;
|
||||
};
|
||||
|
||||
const collapseSearch = () => {
|
||||
search.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.r-sidebar {
|
||||
border-radius: 5px;
|
||||
margin-right: 0.5rem;
|
||||
margin-bottom: $small;
|
||||
overflow-y: auto;
|
||||
width: 30em;
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
grid-template-rows: min-content min-content auto;
|
||||
}
|
||||
</style>
|
||||
@ -25,37 +25,7 @@
|
||||
:class="{ v0: !is_expanded, v1: is_expanded }"
|
||||
class="scrollable border"
|
||||
>
|
||||
<div
|
||||
class="song-item h-1"
|
||||
v-for="song in queue"
|
||||
:key="song"
|
||||
@click="playThis(song)"
|
||||
:class="{
|
||||
currentInQueue: current.id == song.id,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="album-art image"
|
||||
:style="{
|
||||
backgroundImage: `url("${song.image}")`,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="now-playing-track image"
|
||||
v-if="current.id == song.id"
|
||||
:class="{ active: is_playing, not_active: !is_playing }"
|
||||
></div>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<div class="title ellip">{{ song.title }}</div>
|
||||
<hr />
|
||||
<div class="artist ellip">
|
||||
<span v-for="artist in putCommas(song.artists)" :key="artist">{{
|
||||
artist
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<TrackItem v-for="song in queue" :key="song" :track="song" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -65,16 +35,14 @@
|
||||
import { ref, toRefs } from "@vue/reactivity";
|
||||
import perks from "@/composables/perks.js";
|
||||
import audio from "@/composables/playAudio.js";
|
||||
import state from "@/composables/state.js";
|
||||
import { watch } from "@vue/runtime-core";
|
||||
import TrackItem from "../shared/TrackItem.vue";
|
||||
|
||||
export default {
|
||||
props: ["up_next"],
|
||||
setup(props, { emit }) {
|
||||
const is_expanded = toRefs(props).up_next;
|
||||
|
||||
const queue = ref(perks.queue);
|
||||
const current = ref(perks.current);
|
||||
const next = ref(perks.next);
|
||||
|
||||
let collapse = () => {
|
||||
@ -90,27 +58,18 @@ export default {
|
||||
});
|
||||
|
||||
const { playNext } = audio;
|
||||
const { playAudio } = audio;
|
||||
|
||||
const playThis = (song) => {
|
||||
playAudio(song.filepath);
|
||||
perks.current.value = song;
|
||||
};
|
||||
|
||||
const putCommas = perks.putCommas;
|
||||
|
||||
return {
|
||||
collapse,
|
||||
is_expanded,
|
||||
is_playing: state.is_playing,
|
||||
playNext,
|
||||
playThis,
|
||||
putCommas,
|
||||
queue,
|
||||
current,
|
||||
next,
|
||||
};
|
||||
},
|
||||
components: { TrackItem },
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -207,38 +166,4 @@ export default {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.up-next .scrollable .song-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: $blue;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
margin: 0.1rem;
|
||||
}
|
||||
|
||||
.album-art {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin: 0 0.5rem 0 0;
|
||||
border-radius: 0.5rem;
|
||||
background-image: url(../../assets/images/null.webp);
|
||||
}
|
||||
.artist {
|
||||
width: 20rem;
|
||||
font-size: small;
|
||||
color: rgba(255, 255, 255, 0.637);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="right-search border" ref="searchComponent">
|
||||
<div class="input">
|
||||
<div class="search-icon image"></div>
|
||||
<Loader />
|
||||
<Filters :filters="filters" @removeFilter="removeFilter" />
|
||||
<div class="input-loader border">
|
||||
<input
|
||||
@ -13,7 +13,8 @@
|
||||
placeholder="find your music"
|
||||
v-model="query"
|
||||
/>
|
||||
<Loader />
|
||||
<div class="search-icon image"></div>
|
||||
<!-- -->
|
||||
</div>
|
||||
<div
|
||||
class="suggestions v00"
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<div class="loader" v-if="loading"></div>
|
||||
<div class="loaderx" :class="{ loader: loading, not_loader: !loading }">
|
||||
<div class="content" v-if="!loading">/</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -14,12 +16,15 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.loader {
|
||||
.loaderx {
|
||||
position: absolute;
|
||||
right: 0.65rem;
|
||||
left: 0.65rem;
|
||||
top: 0.65rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.loader {
|
||||
border: dotted $blue;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.25s linear infinite;
|
||||
@ -33,4 +38,10 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.not_loader {
|
||||
border: solid 1px;
|
||||
border-radius: 50%;
|
||||
background-image: url("");
|
||||
}
|
||||
</style>
|
||||
@ -4,11 +4,10 @@
|
||||
<div class="items">
|
||||
<table>
|
||||
<tbody>
|
||||
<SongItem
|
||||
v-for="(track, index) in props.tracks"
|
||||
<TrackItem
|
||||
v-for="track in props.tracks"
|
||||
:key="track"
|
||||
:song="track"
|
||||
:index="index + 1"
|
||||
:track="track"
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -18,8 +17,8 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import SongItem from "@/components/shared/SongItem.vue";
|
||||
import LoadMore from "./LoadMore.vue";
|
||||
import TrackItem from "../shared/TrackItem.vue";
|
||||
|
||||
const props = defineProps({
|
||||
tracks: {
|
||||
|
||||
87
src/components/shared/TrackItem.vue
Normal file
87
src/components/shared/TrackItem.vue
Normal file
@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div
|
||||
class="track-item h-1"
|
||||
@click="playThis(props.track)"
|
||||
:class="{
|
||||
currentInQueue: current.id == props.track.id,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="album-art image"
|
||||
:style="{
|
||||
backgroundImage: `url("${props.track.image}")`,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="now-playing-track image"
|
||||
v-if="current.id == props.track.id"
|
||||
:class="{ active: is_playing, not_active: !is_playing }"
|
||||
></div>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<div class="title ellip">{{ props.track.title }}</div>
|
||||
<hr />
|
||||
<div class="artist ellip">
|
||||
<span v-for="artist in putCommas(props.track.artists)" :key="artist">{{
|
||||
artist
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import perks from "../../composables/perks";
|
||||
import playAudio from "../../composables/playAudio";
|
||||
|
||||
const props = defineProps({
|
||||
track: Object,
|
||||
});
|
||||
|
||||
const current = ref(perks.current);
|
||||
const putCommas = perks.putCommas;
|
||||
const is_playing = ref(playAudio.playing);
|
||||
|
||||
const playThis = (song) => {
|
||||
playAudio.playAudio(song.filepath);
|
||||
perks.current.value = song;
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.track-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: $blue;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
margin: 0.1rem;
|
||||
}
|
||||
|
||||
.album-art {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin: 0 0.5rem 0 0;
|
||||
border-radius: 0.5rem;
|
||||
background-image: url(../../assets/images/null.webp);
|
||||
}
|
||||
.artist {
|
||||
width: 20rem;
|
||||
font-size: small;
|
||||
color: rgba(255, 255, 255, 0.637);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -5,7 +5,6 @@ import router from "./router";
|
||||
|
||||
import "../src/assets/css/global.scss";
|
||||
|
||||
import "animate.css";
|
||||
import mitt from "mitt";
|
||||
|
||||
const emitter = mitt();
|
||||
|
||||
@ -333,11 +333,6 @@ ajv@^6.10.0, ajv@^6.12.4, ajv@^6.12.5:
|
||||
json-schema-traverse "^0.4.1"
|
||||
uri-js "^4.2.2"
|
||||
|
||||
animate.css@^4.1.1:
|
||||
version "4.1.1"
|
||||
resolved "https://registry.yarnpkg.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
|
||||
integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
|
||||
|
||||
ansi-regex@^5.0.1:
|
||||
version "5.0.1"
|
||||
resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user