tcsenpai/swingmusic
1
0
Fork 0
mirror of https://github.com/tcsenpai/swingmusic.git synced 2025-06-07 03:35:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

add media queries

Browse Source
This commit is contained in:
geoffrey45 2022-01-22 04:15:00 +03:00
parent 06f1e53fa1
commit c9cd61df7c
17 changed files with 224 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
server/app/api.py
View File

@ -98,7 +98,7 @@ def get_album_artists(album, artist):
for artist in artists:
artist_obj = {
"name": artist,
"image": "http://127.0.0.1:8900/images/artists/webp/" + artist.replace('/', '::') + ".webp"
"image": "http://0.0.0.0:8900/images/artists/webp/" + artist.replace('/', '::') + ".webp"
}
final_artists.append(artist_obj)
@ -190,6 +190,9 @@ def getFolderTree(folder: str):
if x['folder'] == req_dir:
songs.append(x)
for song in songs:
song['image'] = song['image'].replace('127.0.0.1', '0.0.0.0')
return {"files": helpers.remove_duplicates(songs), "folders": sorted(folders, key=lambda i: i['name'])}
@ -261,7 +264,7 @@ def getAlbumSongs(query: str):
@cache.cached()
def drop_db(title, artist):
bio = functions.getAlbumBio(title, artist)
return {'bio': bio}
return {'bio': bio}, 200
@bp.route('/convert')
@ -278,3 +281,7 @@ def convert_images_to_webp():
img.save(os.path.join(final_path, file.name.replace('.jpg', '.webp')), format='webp')
return "Done"
@bp.route('/test')
def test_http_status_response():
return "OK", 200

3
server/app/functions.py
View File

@ -128,11 +128,10 @@ def extract_thumb(path: str) -> str:
except:
return use_defaults()
final_path = "http://127.0.0.1:8900/images/thumbnails/" + webp_path
final_path = "http://0.0.0.0:8900/images/thumbnails/" + webp_path
return final_path
def getTags(full_path: str) -> dict:
"""
Returns a dictionary of tags for a given file.

2
server/manage.py
View File

@ -3,4 +3,4 @@ from app import create_app
if __name__ == '__main__':
app = create_app()
app.run(debug=True, threaded=True, host="127.0.0.1", port=9876)
app.run(debug=True, threaded=True, host="0.0.0.0", port=9876)

2
server/start.sh
View File

@ -1,3 +1,3 @@
python manage.py
python manage.py
# gunicorn -b 0.0.0.0:9876 --workers=4 "wsgi:create_app()" --log-level=debug

34
src/assets/css/_variables.scss
View File

@ -1,11 +1,39 @@
// colors
$card-dark: #08090C;
$card-dark: #08090c;
$red: #df4646;
$blue: rgb(5, 80, 150);
$green: rgb(67, 148, 67);
$separator: #ffffff46;
$pink: rgb(196, 58, 58);
// sizes
$small: .5em;
$smaller: .25em;
$small: 0.5em;
$smaller: 0.25em;
// media query mixins
@mixin phone-only {
@media (max-width: 599px) {
@content;
}
}
@mixin tablet-portrait {
@media (max-width: 900px) {
@content;
}
}
@mixin tablet-landscape {
@media (max-width: 1200px) {
@content;
}
}
@mixin for-desktop-up {
@media (min-width: 1200px) {
@content;
}
}
@mixin for-big-desktop-up {
@media (min-width: 1800px) {
@content;
}
}

7
src/assets/css/global.scss
View File

@ -136,14 +136,13 @@ button {
width: 30em;
position: relative;
margin-bottom: 0.5em;
}
@media (max-width: 70em) {
.r-sidebar {
@include tablet-landscape {
display: none;
}
}
.image {
background-position: center;
background-repeat: no-repeat;
@ -248,3 +247,5 @@ button {
background-image: url(../../assets/icons/playing.webp);
transition: all 0.3s ease-in-out;
}

4
src/components/FolderView/Header.vue
View File

@ -112,6 +112,10 @@ export default {
background-image: url(../../assets/icons/folder.svg);
margin-right: $small;
}
@include phone-only {
display: none;
}
}
}
</style>

61
src/components/FolderView/SongList.vue
View File

@ -4,10 +4,10 @@
<table>
<thead>
<tr>
<th>Track</th>
<th>Artist</th>
<th>Album</th>
<th>Duration</th>
<th class="track-header">Track</th>
<th class="artists-header">Artist</th>
<th class="album-header">Album</th>
<th class="duration-header">Duration</th>
</tr>
</thead>
<tbody>
@ -121,56 +121,33 @@ export default {
width: 100%;
table-layout: fixed;
@include phone-only {
border-collapse: separate;
border-spacing: 0 $small;
}
thead {
height: 2rem;
text-transform: uppercase;
@include phone-only {
display: none;
}
th {
text-align: left;
padding-left: $small;
}
}
tbody tr {
cursor: pointer;
.flex {
position: relative;
padding-left: 4rem;
align-items: center;
.album-art {
position: absolute;
left: $small;
width: 3rem;
height: 3rem;
margin-right: 1rem;
background-image: url(../../assets/images/null.webp);
display: grid;
place-items: center;
th.duration-header {
@include tablet-landscape {
display: none;
}
}
td {
height: 4rem;
padding: $small;
}
&:hover {
& {
& > td {
background-color: rgb(5, 80, 150);
}
& td:first-child {
border-radius: $small 0 0 $small;
}
& td:last-child {
border-radius: 0 $small $small 0;
}
th.album-header {
@include tablet-portrait {
display: none;
}
}
}

23
src/components/PlaylistView/Header.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="p-header rounded border">
<div class="p-header rounded">
<div class="info rounded card-dark">
<div>
<div class="name">Makaveli Radio</div>
@ -16,7 +16,7 @@
</div>
</div>
<div class="last-updated">
Last updated yesterday |
<span class="status">Last updated yesterday |&#160;</span>
<span class="edit">Edit</span>
</div>
</div>
@ -39,6 +39,18 @@
color: rgb(255, 255, 255);
font-size: 0.9rem;
border-radius: $smaller;
box-shadow: 0px 0px 1rem rgba(0, 0, 0, 0.479);
@include phone-only {
// border: solid;
bottom: 1rem;
right: 1rem;
font-size: small;
.status {
display: none;
}
}
.edit {
cursor: pointer;
@ -54,8 +66,13 @@
padding: $small;
display: flex;
flex-direction: row;
align-items: end;
align-items: flex-end;
padding-bottom: 3.5rem;
box-shadow: 0px 0px 1.5rem rgba(0, 0, 0, 0.658);
@include phone-only {
width: calc(100% - 1rem);
}
.name {
font-size: 1.5rem;

137
src/components/SongItem.vue
View File

@ -1,9 +1,9 @@
<template>
<tr :class="{ current: current._id.$oid == song._id.$oid }">
<td
class="flex"
@click="emitUpdate(song)"
>
<tr
class="songlist-item"
:class="{ current: current._id.$oid == song._id.$oid }"
>
<td class="flex" @click="emitUpdate(song)">
<div
class="album-art rounded image"
:style="{
@ -18,9 +18,15 @@
</div>
<div>
<span class="ellip">{{ song.title }}</span>
<div class="separator no-border"></div>
<div class="artist ellip">
<span v-for="artist in putCommas(song.artists)" :key="artist">{{
artist
}}</span>
</div>
</div>
</td>
<td>
<td class="song-artists">
<div class="ellip" v-if="song.artists[0] != ''">
<span
class="artist"
@ -33,15 +39,12 @@
<span class="artist">{{ song.album_artist }}</span>
</div>
</td>
<td>
<div
class="ellip"
@click="emitLoadAlbum(song.album, song.album_artist)"
>{{ song.album }}</div
>
<td class="song-album">
<div class="ellip" @click="emitLoadAlbum(song.album, song.album_artist)">
{{ song.album }}
</div>
</td>
<td
>
<td class="song-duration">
{{ `${Math.trunc(song.length / 60)} min` }}
</td>
</tr>
@ -58,8 +61,8 @@ export default {
emit("updateQueue", song);
}
function emitLoadAlbum(title, artist){
emit("loadAlbum", title, artist)
function emitLoadAlbum(title, artist) {
emit("loadAlbum", title, artist);
}
return {
@ -67,11 +70,109 @@ export default {
emitUpdate,
emitLoadAlbum,
is_playing: state.is_playing,
current: state.current
current: state.current,
};
},
};
</script>
<style>
<style lang="scss">
.songlist-item {
@include phone-only {
border: solid;
td {
background-color: $card-dark;
border: 1px solid rgba(255, 255, 255, 0.096);
border-radius: $small;
}
}
cursor: pointer;
.flex {
position: relative;
padding-left: 4rem;
align-items: center;
.album-art {
position: absolute;
left: $small;
width: 3rem;
height: 3rem;
margin-right: 1rem;
display: grid;
place-items: center;
}
.artist {
display: none;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.719);
@include phone-only {
display: unset;
}
}
}
td {
height: 4rem;
padding: $small;
}
&:hover {
& {
& td {
background-color: rgb(5, 80, 150);
}
& td:first-child {
border-radius: $small 0 0 $small;
@include phone-only {
border-radius: $small;
}
}
td:nth-child(2) {
@include tablet-portrait {
border-radius: 0 $small $small 0 !important;
}
@include tablet-landscape {
border-radius: 0;
}
}
& > td:nth-child(3) {
@include tablet-landscape {
border-radius: 0 $small $small 0 !important;
}
}
& td:last-child {
border-radius: 0 $small $small 0;
}
}
}
.song-duration {
@include tablet-landscape {
display: none;
}
}
.song-album {
@include tablet-portrait {
display: none;
}
}
.song-artists {
@include phone-only {
display: none;
}
}
}
</style>

2
src/composables/album.js
View File

@ -1,4 +1,4 @@
let base_uri = "http://127.0.0.1:9876";
let base_uri = "http://0.0.0.0:9876";
const getAlbumTracks = async (name, artist) => {
const res = await fetch(

2
src/composables/getFiles.js
View File

@ -1,4 +1,4 @@
let base_uri = "http://127.0.0.1:9876";
let base_uri = "http://0.0.0.0:9876";
const getData = async (path) => {
let url;

2
src/composables/perks.js
View File

@ -10,7 +10,7 @@ const current = ref(state.current);
const next = ref({
title: "The next song",
artists: ["... blah blah blah"],
image: "http://127.0.0.1:8900/images/defaults/4.webp",
image: "http://0.0.0.0:8900/images/defaults/4.webp",
_id: {
$oid: "",
},

2
src/composables/playAudio.js
View File

@ -8,7 +8,7 @@ const audio = ref(new Audio()).value;
const pos = ref(0);
const playing = ref(state.is_playing);
const url = "http://127.0.0.1:8901/";
const url = "http://0.0.0.0:8901/";
const playAudio = (path) => {
const full_path = url + encodeURIComponent(path);

2
src/composables/searchMusic.js
View File

@ -1,6 +1,6 @@
import state from "./state.js";
const base_url = "http://127.0.0.1:9876/search?q=";
const base_url = "http://0.0.0.0:9876/search?q=";
async function search(query) {
const url = base_url + encodeURIComponent(query);

4
src/composables/state.js
View File

@ -6,7 +6,7 @@ const queue = ref([
{
title: "Nothing played yet",
artists: ["... blah blah blah"],
image: "http://127.0.0.1:8900/images/defaults/5.webp",
image: "http://0.0.0.0:8900/images/defaults/5.webp",
_id: {
$oid: "",
},
@ -19,7 +19,7 @@ const folder_list = ref([]);
const current = ref({
title: "Nothing played yet",
artists: ["... blah blah blah"],
image: "http://127.0.0.1:8900/images/defaults/1.webp",
image: "http://0.0.0.0:8900/images/defaults/1.webp",
_id: {
$oid: "",
},

8
src/views/FolderView.vue
View File

@ -130,5 +130,13 @@ export default {
overflow-y: auto;
height: calc(100% - $small);
padding-right: $small;
@include phone-only {
padding-right: 0;
&::-webkit-scrollbar {
display: none;
}
}
}
</style>