Merge remote-tracking branch 'origin/main' into 144-create-song-page-2

This commit is contained in:
Ethan Girouard 2024-12-19 19:20:59 -05:00
commit c77699b3a1
Signed by: eta357
GPG Key ID: 7BCDC36DFD11C146
34 changed files with 1309 additions and 49 deletions

View File

@ -7,13 +7,15 @@ jobs:
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Use Cache
uses: Swatinem/rust-cache@v2
- name: Build project
env:
RUSTFLAGS: "-D warnings"
run: cargo-leptos build
docker-build:
runs-on: ubuntu-latest
runs-on: ubuntu-latest-docker
steps:
- name: Checkout repository
uses: actions/checkout@v4
@ -50,6 +52,8 @@ jobs:
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Use Cache
uses: Swatinem/rust-cache@v2
- name: Test project
run: cargo test --all-targets --all-features
@ -58,6 +62,8 @@ jobs:
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Use Cache
uses: Swatinem/rust-cache@v2
- name: Run Leptos tests
run: cargo-leptos test
@ -66,6 +72,8 @@ jobs:
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Use Cache
uses: Swatinem/rust-cache@v2
- name: Generate docs
run: cargo doc --no-deps
- name: Upload docs
@ -73,3 +81,13 @@ jobs:
with:
name: docs
path: target/doc
nix-build:
runs-on: ubuntu-latest
steps:
- name: Update Package Lists
run: apt update
- name: Install Nix
run: apt install -y nix-bin
- name: Build project with Nix
run: nix build --experimental-features 'nix-command flakes' git+$GITHUB_SERVER_URL/$GITHUB_REPOSITORY.git?ref=$GITHUB_REF_NAME#default

4
.gitignore vendored
View File

@ -31,3 +31,7 @@ playwright/.cache/
# Sass cache
.sass-cache
# Nix-related files
.direnv/
result

20
Cargo.lock generated
View File

@ -3444,9 +3444,9 @@ checksum = "9c8d87e72b64a3b4db28d11ce29237c246188f4f51057d65a7eab63b7987e423"
[[package]]
name = "wasm-bindgen"
version = "0.2.95"
version = "0.2.96"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "128d1e363af62632b8eb57219c8fd7877144af57558fb2ef0368d0087bddeb2e"
checksum = "21d3b25c3ea1126a2ad5f4f9068483c2af1e64168f847abe863a526b8dbfe00b"
dependencies = [
"cfg-if",
"once_cell",
@ -3455,9 +3455,9 @@ dependencies = [
[[package]]
name = "wasm-bindgen-backend"
version = "0.2.95"
version = "0.2.96"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "cb6dd4d3ca0ddffd1dd1c9c04f94b868c37ff5fac97c30b97cff2d74fce3a358"
checksum = "52857d4c32e496dc6537646b5b117081e71fd2ff06de792e3577a150627db283"
dependencies = [
"bumpalo",
"log",
@ -3482,9 +3482,9 @@ dependencies = [
[[package]]
name = "wasm-bindgen-macro"
version = "0.2.95"
version = "0.2.96"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "e79384be7f8f5a9dd5d7167216f022090cf1f9ec128e6e6a482a2cb5c5422c56"
checksum = "920b0ffe069571ebbfc9ddc0b36ba305ef65577c94b06262ed793716a1afd981"
dependencies = [
"quote",
"wasm-bindgen-macro-support",
@ -3492,9 +3492,9 @@ dependencies = [
[[package]]
name = "wasm-bindgen-macro-support"
version = "0.2.95"
version = "0.2.96"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "26c6ab57572f7a24a4985830b120de1594465e5d500f24afe89e16b4e833ef68"
checksum = "bf59002391099644be3524e23b781fa43d2be0c5aa0719a18c0731b9d195cab6"
dependencies = [
"proc-macro2",
"quote",
@ -3505,9 +3505,9 @@ dependencies = [
[[package]]
name = "wasm-bindgen-shared"
version = "0.2.95"
version = "0.2.96"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "65fc09f10666a9f147042251e0dda9c18f166ff7de300607007e96bdebc1068d"
checksum = "e5047c5392700766601942795a436d7d2599af60dcc3cc1248c9120bfb0827b0"
[[package]]
name = "wasm-streams"

View File

@ -15,7 +15,7 @@ leptos = { version = "0.6", default-features = false, features = ["nightly"] }
leptos_meta = { version = "0.6", features = ["nightly"] }
leptos_axum = { version = "0.6", optional = true }
leptos_router = { version = "0.6", features = ["nightly"] }
wasm-bindgen = { version = "=0.2.95", default-features = false, optional = true }
wasm-bindgen = { version = "=0.2.96", default-features = false, optional = true }
leptos_icons = { version = "0.3.0" }
icondata = { version = "0.3.0" }
diesel = { version = "2.1.4", features = ["postgres", "r2d2", "chrono"], default-features = false, optional = true }

View File

@ -4,7 +4,7 @@ WORKDIR /app
RUN rustup default nightly
RUN rustup target add wasm32-unknown-unknown
RUN cargo install cargo-leptos
RUN cargo install cargo-leptos@0.2.22
# Install a few dependencies
RUN set -eux; \

114
flake.lock generated Normal file
View File

@ -0,0 +1,114 @@
{
"nodes": {
"cargo-leptos": {
"flake": false,
"locked": {
"lastModified": 1732915351,
"narHash": "sha256-QPCYKlbPHuSBmwfkKdYhcVF81Lnirf65IYao7UVxz9Q=",
"owner": "leptos-rs",
"repo": "cargo-leptos",
"rev": "7d782a18e9d377be9de8d6217567ddde830fe89e",
"type": "github"
},
"original": {
"owner": "leptos-rs",
"ref": "v0.2.22",
"repo": "cargo-leptos",
"type": "github"
}
},
"flake-utils": {
"inputs": {
"systems": "systems"
},
"locked": {
"lastModified": 1731533236,
"narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
"owner": "numtide",
"repo": "flake-utils",
"rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
"type": "github"
},
"original": {
"owner": "numtide",
"repo": "flake-utils",
"type": "github"
}
},
"nixpkgs": {
"locked": {
"lastModified": 1733940404,
"narHash": "sha256-Pj39hSoUA86ZePPF/UXiYHHM7hMIkios8TYG29kQT4g=",
"owner": "NixOS",
"repo": "nixpkgs",
"rev": "5d67ea6b4b63378b9c13be21e2ec9d1afc921713",
"type": "github"
},
"original": {
"owner": "NixOS",
"ref": "nixos-unstable",
"repo": "nixpkgs",
"type": "github"
}
},
"nixpkgs_2": {
"locked": {
"lastModified": 1728538411,
"narHash": "sha256-f0SBJz1eZ2yOuKUr5CA9BHULGXVSn6miBuUWdTyhUhU=",
"owner": "NixOS",
"repo": "nixpkgs",
"rev": "b69de56fac8c2b6f8fd27f2eca01dcda8e0a4221",
"type": "github"
},
"original": {
"owner": "NixOS",
"ref": "nixpkgs-unstable",
"repo": "nixpkgs",
"type": "github"
}
},
"root": {
"inputs": {
"cargo-leptos": "cargo-leptos",
"flake-utils": "flake-utils",
"nixpkgs": "nixpkgs",
"rust-overlay": "rust-overlay"
}
},
"rust-overlay": {
"inputs": {
"nixpkgs": "nixpkgs_2"
},
"locked": {
"lastModified": 1734230139,
"narHash": "sha256-zsp0Mz8VgyIAnU8UhP/YT1g+zlsl+NIJTBMAbY+RifQ=",
"owner": "oxalica",
"repo": "rust-overlay",
"rev": "150fbc8aa2bc501041810bbc1dbfe73694a861be",
"type": "github"
},
"original": {
"owner": "oxalica",
"repo": "rust-overlay",
"type": "github"
}
},
"systems": {
"locked": {
"lastModified": 1681028828,
"narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
"owner": "nix-systems",
"repo": "default",
"rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
"type": "github"
},
"original": {
"owner": "nix-systems",
"repo": "default",
"type": "github"
}
}
},
"root": "root",
"version": 7
}

102
flake.nix Normal file
View File

@ -0,0 +1,102 @@
{
description = "LibreTunes build and development environment";
inputs = {
nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
rust-overlay.url = "github:oxalica/rust-overlay";
flake-utils.url = "github:numtide/flake-utils";
cargo-leptos = {
url = "github:leptos-rs/cargo-leptos?ref=v0.2.22";
flake = false;
};
};
outputs = { self, nixpkgs, rust-overlay, flake-utils, cargo-leptos, ... }:
flake-utils.lib.eachDefaultSystem (system:
let
overlays = [ (import rust-overlay) ];
pkgs = import nixpkgs {
inherit system overlays;
};
# Build a specific version of cargo-leptos
cargo-leptos-build = pkgs.rustPlatform.buildRustPackage {
name = "cargo-leptos";
buildFeatures = ["no_downloads"];
src = cargo-leptos;
cargoHash = "sha256-4v6sCTPRxe7bO7uV3HwUC8P1UsG8ydIvZ4rG2kU22zA=";
nativeBuildInputs = with pkgs; [
pkg-config
openssl
];
doCheck = false;
};
buildPkgs = with pkgs; [
(rust-bin.fromRustupToolchainFile ./rust-toolchain.toml)
cargo-leptos-build
clang
sass
openssl
postgresql
imagemagick
pkg-config
];
in
{
devShells.default = pkgs.mkShell {
LIBCLANG_PATH = pkgs.lib.makeLibraryPath [ pkgs.llvmPackages_latest.libclang.lib ];
buildInputs = with pkgs; buildPkgs ++ [
diesel-cli
];
shellHook = ''
set -a
[[ -f .env ]] && source .env
set +a
'';
};
packages.default = pkgs.rustPlatform.buildRustPackage {
name = "libretunes";
src = ./.;
cargoLock = {
lockFile = ./Cargo.lock;
};
LIBCLANG_PATH = pkgs.lib.makeLibraryPath [ pkgs.llvmPackages_latest.libclang.lib ];
nativeBuildInputs = with pkgs; buildPkgs ++ [
makeWrapper
];
buildInputs = with pkgs; [
openssl
imagemagick
];
# TODO enable --release builds
# Creates an issue with cargo-leptos trying to create cache directories
# See https://github.com/leptos-rs/cargo-leptos/issues/79
buildPhase = ''
cargo-leptos build --precompress #--release
'';
installPhase = ''
mkdir -p $out/bin
install -t $out target/debug/libretunes
cp -r target/site $out/site
makeWrapper $out/libretunes $out/bin/libretunes \
--set LEPTOS_SITE_ROOT $out/site
'';
doCheck = false;
};
}
);
}

View File

@ -0,0 +1,2 @@
ALTER TABLE songs
DROP COLUMN added_date;

View File

@ -0,0 +1,2 @@
ALTER TABLE songs
ADD COLUMN added_date DATE DEFAULT CURRENT_DATE;

View File

@ -1,3 +1,4 @@
[toolchain]
channel = "nightly"
targets = ["wasm32-unknown-unknown"]

65
src/api/albums.rs Normal file
View File

@ -0,0 +1,65 @@
use leptos::*;
use cfg_if::cfg_if;
cfg_if! {
if #[cfg(feature = "ssr")] {
use crate::database::get_db_conn;
use diesel::prelude::*;
use chrono::NaiveDate;
}
}
/// Add an album to the database
///
/// # Arguments
///
/// * `album_title` - The name of the artist to add
/// * `release_data` - The release date of the album (Optional)
/// * `image_path` - The path to the album's image file (Optional)
///
/// # Returns
/// * `Result<(), Box<dyn Error>>` - A empty result if successful, or an error
///
#[server(endpoint = "albums/add-album")]
pub async fn add_album(album_title: String, release_date: Option<String>, image_path: Option<String>) -> Result<(), ServerFnError> {
use crate::schema::albums::{self};
use crate::models::Album;
use leptos::server_fn::error::NoCustomError;
let parsed_release_date = match release_date {
Some(date) => {
match NaiveDate::parse_from_str(&date.trim(), "%Y-%m-%d") {
Ok(parsed_date) => Some(parsed_date),
Err(_e) => return Err(ServerFnError::<NoCustomError>::ServerError("Invalid release date".to_string()))
}
},
None => None
};
let image_path_arg = match image_path {
Some(image_path) => {
if image_path.is_empty() {
None
} else {
Some(image_path)
}
},
None => None
};
let new_album = Album {
id: None,
title: album_title,
release_date: parsed_release_date,
image_path: image_path_arg
};
let db = &mut get_db_conn();
diesel::insert_into(albums::table)
.values(&new_album)
.execute(db)
.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error adding album: {}", e)))?;
Ok(())
}

216
src/api/artists.rs Normal file
View File

@ -0,0 +1,216 @@
use leptos::*;
use cfg_if::cfg_if;
use crate::albumdata::AlbumData;
use crate::models::Artist;
use crate::songdata::SongData;
cfg_if! {
if #[cfg(feature = "ssr")] {
use crate::database::get_db_conn;
use diesel::prelude::*;
use std::collections::HashMap;
use server_fn::error::NoCustomError;
use crate::models::Album;
}
}
/// Add an artist to the database
///
/// # Arguments
///
/// * `artist_name` - The name of the artist to add
///
/// # Returns
/// * `Result<(), Box<dyn Error>>` - A empty result if successful, or an error
///
#[server(endpoint = "artists/add-artist")]
pub async fn add_artist(artist_name: String) -> Result<(), ServerFnError> {
use crate::schema::artists::dsl::*;
use crate::models::Artist;
use leptos::server_fn::error::NoCustomError;
let new_artist = Artist {
id: None,
name: artist_name,
};
let db = &mut get_db_conn();
diesel::insert_into(artists)
.values(&new_artist)
.execute(db)
.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error adding artist: {}", e)))?;
Ok(())
}
#[server(endpoint = "artists/get")]
pub async fn get_artist_by_id(artist_id: i32) -> Result<Option<Artist>, ServerFnError> {
use crate::schema::artists::dsl::*;
use crate::models::Artist;
use leptos::server_fn::error::NoCustomError;
let db = &mut get_db_conn();
let artist = artists
.filter(id.eq(artist_id))
.first::<Artist>(db)
.optional()
.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting artist: {}", e)))?;
Ok(artist)
}
#[server(endpoint = "artists/top_songs")]
pub async fn top_songs_by_artist(artist_id: i32, limit: Option<i64>, for_user_id: i32) -> Result<Vec<(SongData, i64)>, ServerFnError> {
use crate::models::Song;
use leptos::server_fn::error::NoCustomError;
use crate::schema::*;
let db = &mut get_db_conn();
let song_play_counts: Vec<(i32, i64)> =
if let Some(limit) = limit {
song_history::table
.group_by(song_history::song_id)
.select((song_history::song_id, diesel::dsl::count(song_history::id)))
.left_join(song_artists::table.on(song_artists::song_id.eq(song_history::song_id)))
.filter(song_artists::artist_id.eq(artist_id))
.order_by(diesel::dsl::count(song_history::id).desc())
.left_join(songs::table.on(songs::id.eq(song_history::song_id)))
.limit(limit)
.load(db)?
} else {
song_history::table
.group_by(song_history::song_id)
.select((song_history::song_id, diesel::dsl::count(song_history::id)))
.left_join(song_artists::table.on(song_artists::song_id.eq(song_history::song_id)))
.filter(song_artists::artist_id.eq(artist_id))
.order_by(diesel::dsl::count(song_history::id).desc())
.left_join(songs::table.on(songs::id.eq(song_history::song_id)))
.load(db)?
};
let song_play_counts: HashMap<i32, i64> = song_play_counts.into_iter().collect();
let top_song_ids: Vec<i32> = song_play_counts.iter().map(|(song_id, _)| *song_id).collect();
let top_songs: Vec<(Song, Option<Album>, Option<Artist>, Option<(i32, i32)>, Option<(i32, i32)>)>
= songs::table
.filter(songs::id.eq_any(top_song_ids))
.left_join(albums::table.on(songs::album_id.eq(albums::id.nullable())))
.left_join(song_artists::table.inner_join(artists::table).on(songs::id.eq(song_artists::song_id)))
.left_join(song_likes::table.on(songs::id.eq(song_likes::song_id).and(song_likes::user_id.eq(for_user_id))))
.left_join(song_dislikes::table.on(
songs::id.eq(song_dislikes::song_id).and(song_dislikes::user_id.eq(for_user_id))))
.select((
songs::all_columns,
albums::all_columns.nullable(),
artists::all_columns.nullable(),
song_likes::all_columns.nullable(),
song_dislikes::all_columns.nullable(),
))
.load(db)?;
let mut top_songs_map: HashMap<i32, (SongData, i64)> = HashMap::with_capacity(top_songs.len());
for (song, album, artist, like, dislike) in top_songs {
let song_id = song.id
.ok_or(ServerFnError::ServerError::<NoCustomError>("Song id not found in database".to_string()))?;
if let Some((stored_songdata, _)) = top_songs_map.get_mut(&song_id) {
// If the song is already in the map, update the artists
if let Some(artist) = artist {
stored_songdata.artists.push(artist);
}
} else {
let like_dislike = match (like, dislike) {
(Some(_), Some(_)) => Some((true, true)),
(Some(_), None) => Some((true, false)),
(None, Some(_)) => Some((false, true)),
_ => None,
};
let image_path = song.image_path.unwrap_or(
album.as_ref().map(|album| album.image_path.clone()).flatten()
.unwrap_or("/assets/images/placeholders/MusicPlaceholder.svg".to_string()));
let songdata = SongData {
id: song_id,
title: song.title,
artists: artist.map(|artist| vec![artist]).unwrap_or_default(),
album: album,
track: song.track,
duration: song.duration,
release_date: song.release_date,
song_path: song.storage_path,
image_path: image_path,
like_dislike: like_dislike,
added_date: song.added_date.unwrap(),
};
let plays = song_play_counts.get(&song_id)
.ok_or(ServerFnError::ServerError::<NoCustomError>("Song id not found in history counts".to_string()))?;
top_songs_map.insert(song_id, (songdata, *plays));
}
}
let mut top_songs: Vec<(SongData, i64)> = top_songs_map.into_iter().map(|(_, v)| v).collect();
top_songs.sort_by(|(_, plays1), (_, plays2)| plays2.cmp(plays1));
Ok(top_songs)
}
#[server(endpoint = "artists/albums")]
pub async fn albums_by_artist(artist_id: i32, limit: Option<i64>) -> Result<Vec<AlbumData>, ServerFnError> {
use crate::schema::*;
let db = &mut get_db_conn();
let album_ids: Vec<i32> =
if let Some(limit) = limit {
albums::table
.left_join(album_artists::table)
.filter(album_artists::artist_id.eq(artist_id))
.order_by(albums::release_date.desc())
.limit(limit)
.select(albums::id)
.load(db)?
} else {
albums::table
.left_join(album_artists::table)
.filter(album_artists::artist_id.eq(artist_id))
.order_by(albums::release_date.desc())
.select(albums::id)
.load(db)?
};
let mut albums_map: HashMap<i32, AlbumData> = HashMap::with_capacity(album_ids.len());
let album_artists: Vec<(Album, Artist)> = albums::table
.filter(albums::id.eq_any(album_ids))
.inner_join(album_artists::table.inner_join(artists::table).on(albums::id.eq(album_artists::album_id)))
.select((albums::all_columns, artists::all_columns))
.load(db)?;
for (album, artist) in album_artists {
let album_id = album.id
.ok_or(ServerFnError::ServerError::<NoCustomError>("Album id not found in database".to_string()))?;
if let Some(stored_album) = albums_map.get_mut(&album_id) {
stored_album.artists.push(artist);
} else {
let albumdata = AlbumData {
id: album_id,
title: album.title,
artists: vec![artist],
release_date: album.release_date,
image_path: album.image_path.unwrap_or("/assets/images/placeholders/MusicPlaceholder.svg".to_string()),
};
albums_map.insert(album_id, albumdata);
}
}
let mut albums: Vec<AlbumData> = albums_map.into_iter().map(|(_, v)| v).collect();
albums.sort_by(|a1, a2| a2.release_date.cmp(&a1.release_date));
Ok(albums)
}

View File

@ -1,3 +1,5 @@
pub mod artists;
pub mod albums;
pub mod history;
pub mod profile;
pub mod songs;

View File

@ -141,6 +141,7 @@ pub async fn recent_songs(for_user_id: i32, limit: Option<i64>) -> Result<Vec<(N
song_path: song.storage_path,
image_path: image_path,
like_dislike: like_dislike,
added_date: song.added_date.unwrap(),
};
history_songs.insert(song_id, (history.date, songdata));
@ -239,6 +240,7 @@ pub async fn top_songs(for_user_id: i32, start_date: NaiveDateTime, end_date: Na
song_path: song.storage_path,
image_path: image_path,
like_dislike: like_dislike,
added_date: song.added_date.unwrap(),
};
let plays = history_counts.get(&song_id)

View File

@ -8,6 +8,7 @@ use crate::pages::login::*;
use crate::pages::signup::*;
use crate::pages::profile::*;
use crate::pages::albumpage::*;
use crate::pages::artist::*;
use crate::error_template::{AppError, ErrorTemplate};
use crate::util::state::GlobalState;
@ -19,6 +20,8 @@ pub fn App() -> impl IntoView {
provide_context(GlobalState::new());
let upload_open = create_rw_signal(false);
let add_artist_open = create_rw_signal(false);
let add_album_open = create_rw_signal(false);
view! {
// injects a stylesheet into the document <head>
@ -39,13 +42,14 @@ pub fn App() -> impl IntoView {
}>
<main>
<Routes>
<Route path="" view=move || view! { <HomePage upload_open=upload_open/> }>
<Route path="" view=move || view! { <HomePage upload_open=upload_open add_artist_open=add_artist_open add_album_open=add_album_open/> }>
<Route path="" view=Dashboard />
<Route path="dashboard" view=Dashboard />
<Route path="search" view=Search />
<Route path="user/:id" view=Profile />
<Route path="user" view=Profile />
<Route path="album/:id" view=AlbumPage />
<Route path="artist/:id" view=ArtistPage />
</Route>
<Route path="/login" view=Login />
<Route path="/signup" view=Signup />
@ -60,14 +64,18 @@ use crate::components::dashboard::*;
use crate::components::search::*;
use crate::components::personal::Personal;
use crate::components::upload::*;
use crate::components::add_artist::AddArtist;
use crate::components::add_album::AddAlbum;
/// Renders the home page of your application.
#[component]
fn HomePage(upload_open: RwSignal<bool>) -> impl IntoView {
fn HomePage(upload_open: RwSignal<bool>, add_artist_open: RwSignal<bool>, add_album_open: RwSignal<bool>) -> impl IntoView {
view! {
<div class="home-container">
<Upload open=upload_open/>
<Sidebar upload_open=upload_open/>
<AddArtist open=add_artist_open/>
<AddAlbum open=add_album_open/>
<Sidebar upload_open=upload_open add_artist_open=add_artist_open add_album_open=add_album_open/>
// This <Outlet /> will render the child route components
<Outlet />
<Personal />

View File

@ -5,7 +5,10 @@ pub mod personal;
pub mod dashboard_tile;
pub mod dashboard_row;
pub mod upload;
pub mod upload_dropdown;
pub mod add_artist;
pub mod add_album;
pub mod song_list;
pub mod loading;
pub mod error;
pub mod album_info;
pub mod album_info;

View File

@ -0,0 +1,92 @@
use leptos::*;
use leptos::leptos_dom::log;
use leptos_icons::*;
use crate::api::albums::add_album;
#[component]
pub fn AddAlbumBtn(add_album_open: RwSignal<bool>) -> impl IntoView {
let open_dialog = move |_| {
add_album_open.set(true);
};
view! {
<button class="add-album-btn add-btns" on:click=open_dialog>
Add Album
</button>
}
}
#[component]
pub fn AddAlbum(open: RwSignal<bool>) -> impl IntoView {
let album_title = create_rw_signal("".to_string());
let release_date = create_rw_signal("".to_string());
let image_path = create_rw_signal("".to_string());
let close_dialog = move |ev: leptos::ev::MouseEvent| {
ev.prevent_default();
open.set(false);
};
let on_add_album = move |ev: leptos::ev::SubmitEvent| {
ev.prevent_default();
let album_title_clone = album_title.get();
let release_date_clone = Some(release_date.get());
let image_path_clone = Some(image_path.get());
spawn_local(async move {
let add_album_result = add_album(album_title_clone, release_date_clone, image_path_clone).await;
if let Err(err) = add_album_result {
log!("Error adding album: {:?}", err);
} else if let Ok(album) = add_album_result {
log!("Added album: {:?}", album);
album_title.set("".to_string());
release_date.set("".to_string());
image_path.set("".to_string());
}
})
};
view! {
<Show when=open fallback=move|| view!{}>
<div class="add-album-container">
<div class="upload-header">
<h1>Add Album</h1>
</div>
<div class="close-button" on:click=close_dialog><Icon icon=icondata::IoClose /></div>
<form class="create-album-form" action="POST" on:submit=on_add_album>
<div class="input-bx">
<input type="text" required class="text-input"
prop:value=album_title
on:input=move |ev: leptos::ev::Event| {
album_title.set(event_target_value(&ev));
}
required
/>
<span>Album Title</span>
</div>
<div class="release-date">
<div class="left">
<span>Release</span>
<span>Date</span>
</div>
<input class="info" type="date"
prop:value=release_date
on:input=move |ev: leptos::ev::Event| {
release_date.set(event_target_value(&ev));
}
/>
</div>
<div class="input-bx">
<input type="text" class="text-input"
prop:value=image_path
on:input=move |ev: leptos::ev::Event| {
image_path.set(event_target_value(&ev));
}
/>
<span>Image Path</span>
</div>
<button type="submit" class="upload-button">Add</button>
</form>
</div>
</Show>
}
}

View File

@ -0,0 +1,62 @@
use leptos::*;
use leptos::leptos_dom::log;
use leptos_icons::*;
use crate::api::artists::add_artist;
#[component]
pub fn AddArtistBtn(add_artist_open: RwSignal<bool>) -> impl IntoView {
let open_dialog = move |_| {
add_artist_open.set(true);
};
view! {
<button class="add-artist-btn add-btns" on:click=open_dialog>
Add Artist
</button>
}
}
#[component]
pub fn AddArtist(open: RwSignal<bool>) -> impl IntoView {
let artist_name = create_rw_signal("".to_string());
let close_dialog = move |ev: leptos::ev::MouseEvent| {
ev.prevent_default();
open.set(false);
};
let on_add_artist = move |ev: leptos::ev::SubmitEvent| {
ev.prevent_default();
let artist_name_clone = artist_name.get();
spawn_local(async move {
let add_artist_result = add_artist(artist_name_clone).await;
if let Err(err) = add_artist_result {
log!("Error adding artist: {:?}", err);
} else if let Ok(artist) = add_artist_result {
log!("Added artist: {:?}", artist);
artist_name.set("".to_string());
}
})
};
view! {
<Show when=open fallback=move|| view!{}>
<div class="add-artist-container">
<div class="upload-header">
<h1>Add Artist</h1>
</div>
<div class="close-button" on:click=close_dialog><Icon icon=icondata::IoClose /></div>
<form class="create-artist-form" action="POST" on:submit=on_add_artist>
<div class="input-bx">
<input type="text" name="title" required class="text-input"
prop:value=artist_name
on:input=move |ev: leptos::ev::Event| {
artist_name.set(event_target_value(&ev));
}
required
/>
<span>Artist Name</span>
</div>
<button type="submit" class="upload-button">Add</button>
</form>
</div>
</Show>
}
}

View File

@ -1,13 +1,15 @@
use leptos::leptos_dom::*;
use leptos::*;
use leptos_icons::*;
use crate::components::upload::*;
use crate::components::upload_dropdown::*;
#[component]
pub fn Sidebar(upload_open: RwSignal<bool>) -> impl IntoView {
pub fn Sidebar(upload_open: RwSignal<bool>, add_artist_open: RwSignal<bool>, add_album_open: RwSignal<bool>) -> impl IntoView {
use leptos_router::use_location;
let location = use_location();
let dropdown_open = create_rw_signal(false);
let on_dashboard = Signal::derive(
move || location.pathname.get().starts_with("/dashboard") || location.pathname.get() == "/",
);
@ -19,8 +21,26 @@ pub fn Sidebar(upload_open: RwSignal<bool>) -> impl IntoView {
view! {
<div class="sidebar-container">
<div class="sidebar-top-container">
<Show
when=move || {upload_open.get() || add_artist_open.get() || add_album_open.get()}
fallback=move || view! {}
>
<div class="upload-overlay" on:click=move |_| {
upload_open.set(false);
add_artist_open.set(false);
add_album_open.set(false);
}></div>
</Show>
<h2 class="header">LibreTunes</h2>
<UploadBtn dialog_open=upload_open />
<div class="upload-dropdown-container">
<UploadDropdownBtn dropdown_open=dropdown_open/>
<Show
when= move || dropdown_open()
fallback=move || view! {}
>
<UploadDropdown dropdown_open=dropdown_open upload_open=upload_open add_artist_open=add_artist_open add_album_open=add_album_open/>
</Show>
</div>
<a class="buttons" href="/dashboard" style={move || if on_dashboard() {"color: #e1e3e1"} else {""}} >
<Icon icon=icondata::OcHomeFillLg />
<h1>Dashboard</h1>

View File

@ -16,11 +16,8 @@ pub fn UploadBtn(dialog_open: RwSignal<bool>) -> impl IntoView {
};
view! {
<button class="upload-btn" on:click=open_dialog>
<div class="add-sign">
<Icon icon=icondata::IoAddSharp />
</div>
Upload
<button class="upload-btn add-btns" on:click=open_dialog>
Upload Song
</button>
}
}

View File

@ -0,0 +1,30 @@
use leptos::*;
use leptos_icons::*;
use crate::components::upload::*;
use crate::components::add_artist::*;
use crate::components::add_album::*;
#[component]
pub fn UploadDropdownBtn(dropdown_open: RwSignal<bool>) -> impl IntoView {
let open_dropdown = move |_| {
dropdown_open.set(!dropdown_open.get());
};
view! {
<button class={move || if dropdown_open() {"upload-dropdown-btn upload-dropdown-btn-active"} else {"upload-dropdown-btn"}} on:click=open_dropdown>
<div class="add-sign">
<Icon icon=icondata::IoAddSharp />
</div>
</button>
}
}
#[component]
pub fn UploadDropdown(dropdown_open: RwSignal<bool>, upload_open: RwSignal<bool>, add_artist_open: RwSignal<bool>, add_album_open: RwSignal<bool>) -> impl IntoView {
view! {
<div class="upload-dropdown" on:click=move |_| dropdown_open.set(false)>
<UploadBtn dialog_open=upload_open />
<AddArtistBtn add_artist_open=add_artist_open/>
<AddAlbumBtn add_album_open=add_album_open/>
</div>
}
}

View File

@ -652,6 +652,7 @@ impl Album {
song_path: song.storage_path,
image_path: image_path,
like_dislike: like_dislike,
added_date: song.added_date.unwrap(),
};
album_songs.insert(song.id.unwrap(), songdata);
@ -689,6 +690,9 @@ pub struct Song {
pub storage_path: String,
/// The path to the song's image file
pub image_path: Option<String>,
/// The date the song was added to the database
#[cfg_attr(feature = "ssr", diesel(deserialize_as = NaiveDate))]
pub added_date: Option<NaiveDate>,
}
impl Song {

View File

@ -2,3 +2,4 @@ pub mod login;
pub mod signup;
pub mod profile;
pub mod albumpage;
pub mod artist;

184
src/pages/artist.rs Normal file
View File

@ -0,0 +1,184 @@
use leptos::*;
use leptos_router::use_params_map;
use leptos_icons::*;
use server_fn::error::NoCustomError;
use crate::models::Artist;
use crate::components::loading::*;
use crate::components::error::*;
use crate::components::song_list::*;
use crate::api::artists::*;
#[component]
pub fn ArtistPage() -> impl IntoView {
let params = use_params_map();
view! {
<div class="artist-container home-component">
{move || params.with(|params| {
match params.get("id").map(|id| id.parse::<i32>()) {
Some(Ok(id)) => {
view! { <ArtistIdProfile id /> }.into_view()
},
Some(Err(e)) => {
view! {
<Error<String>
title="Invalid Artist ID"
error=e.to_string()
/>
}.into_view()
},
None => {
view! {
<Error<String>
title="No Artist ID"
message="You must specify an artist ID to view their page."
/>
}.into_view()
}
}
})}
</div>
}
}
#[component]
fn ArtistIdProfile(#[prop(into)] id: MaybeSignal<i32>) -> impl IntoView {
let artist_info = create_resource(move || id.get(), move |id| {
get_artist_by_id(id)
});
let show_details = create_rw_signal(false);
view! {
<Transition
fallback=move || view! { <LoadingPage /> }
>
{move || artist_info.get().map(|artist| {
match artist {
Ok(Some(artist)) => {
show_details.set(true);
view! { <ArtistProfile artist /> }.into_view()
},
Ok(None) => view! {
<Error<String>
title="Artist Not Found"
message=format!("Artist with ID {} not found", id.get())
/>
}.into_view(),
Err(error) => view! {
<ServerError<NoCustomError>
title="Error Getting Artist"
error
/>
}.into_view(),
}
})}
</Transition>
<div hidden={move || !show_details.get()}>
<TopSongsByArtist artist_id=id />
<AlbumsByArtist artist_id=id />
</div>
}
}
#[component]
fn ArtistProfile(artist: Artist) -> impl IntoView {
let artist_id = artist.id.unwrap();
let profile_image_path = format!("/assets/images/artist/{}.webp", artist_id);
leptos::logging::log!("Artist name: {}", artist.name);
view! {
<div class="artist-header">
<object class="artist-image" data={profile_image_path.clone()} type="image/webp">
<Icon class="artist-image" icon=icondata::CgProfile width="100" height="100"/>
</object>
<h1>{artist.name}</h1>
</div>
}
}
#[component]
fn TopSongsByArtist(#[prop(into)] artist_id: MaybeSignal<i32>) -> impl IntoView {
let top_songs = create_resource(move || artist_id.get(), |artist_id| async move {
let top_songs = top_songs_by_artist(artist_id, Some(10), 1).await;
top_songs.map(|top_songs| {
top_songs.into_iter().map(|(song, plays)| {
let plays = if plays == 1 {
"1 play".to_string()
} else {
format!("{} plays", plays)
};
(song, plays)
}).collect::<Vec<_>>()
})
});
view! {
<h2>"Top Songs"</h2>
<Transition
fallback=move || view! { <Loading /> }
>
<ErrorBoundary
fallback=|errors| view! {
{move || errors.get()
.into_iter()
.map(|(_, e)| view! { <p>{e.to_string()}</p>})
.collect_view()
}
}
>
{move || top_songs.get().map(|top_songs| {
top_songs.map(|top_songs| {
view! { <SongListExtra songs=top_songs /> }
})
})}
</ErrorBoundary>
</Transition>
}
}
#[component]
fn AlbumsByArtist(#[prop(into)] artist_id: MaybeSignal<i32>) -> impl IntoView {
use crate::components::dashboard_row::*;
use crate::components::dashboard_tile::*;
let albums = create_resource(move || artist_id.get(), |artist_id| async move {
let albums = albums_by_artist(artist_id, None).await;
albums.map(|albums| {
albums.into_iter().map(|album| {
album
}).collect::<Vec<_>>()
})
});
view! {
<Transition
fallback=move || view! { <Loading /> }
>
<ErrorBoundary
fallback=|errors| view! {
{move || errors.get()
.into_iter()
.map(|(_, e)| view! { <p>{e.to_string()}</p>})
.collect_view()
}
}
>
{move || albums.get().map(|albums| {
albums.map(|albums| {
DashboardRow::new("Albums".to_string(), albums.into_iter().map(|album| {
Box::new(album) as Box<dyn DashboardTile>
}).collect())
})
})}
</ErrorBoundary>
</Transition>
}
}

View File

@ -96,6 +96,7 @@ diesel::table! {
release_date -> Nullable<Date>,
storage_path -> Varchar,
image_path -> Nullable<Varchar>,
added_date -> Date,
}
}

View File

@ -31,6 +31,8 @@ pub struct SongData {
pub image_path: String,
/// Whether the song is liked by the user
pub like_dislike: Option<(bool, bool)>,
/// The date the song was added to the database
pub added_date: NaiveDate,
}
@ -59,6 +61,8 @@ impl TryInto<Song> for SongData {
} else {
Some(self.image_path)
},
added_date: Some(self.added_date),
})
}
}

View File

@ -253,6 +253,7 @@ pub async fn upload(data: MultipartData) -> Result<(), ServerFnError> {
release_date,
storage_path: file_name,
image_path: None,
added_date: None, // Defaults to current date
};
// Save the song to the database

135
style/addAlbum.scss Normal file
View File

@ -0,0 +1,135 @@
@import "theme.scss";
.add-album-container {
position: fixed;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: 30rem;
height: 24rem;
border: 1px solid white;
border-radius: 5px;
padding: 1rem;
padding-top: 0;
z-index: 2;
display: flex;
flex-direction: column;
background-color: #1c1c1c;
z-index: 11;
.upload-header {
font-size: .7rem;
font-weight: 300;
padding-bottom: 0;
border-bottom: 1px solid white;
font-family: "Roboto", sans-serif;
}
.close-button {
position: absolute;
top: 5px;
right: 5px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 50%;
font-size: 1.6rem;
transition: all 0.3s;
border: none;
}
.close-button:hover {
transform: scale(1.1);
background-color: rgba(255, 255, 255, 0.1);
}
.close-button:active {
transform: scale(0.8);
}
.create-album-form {
width:100%;
height: 100%;
position: relative;
.input-bx{
position: relative;
margin-top: 1rem;
width: 300px;
input{
width: 100%;
padding: 10px;
border: 2px solid #7f8fa6;
border-radius: 5px;
outline: none;
font-size: 1rem;
transition: 0.6s;
background-color: transparent;
}
span{
position: absolute;
left: 0;
top: 1px;
padding: 10px;
font-size: 1rem;
color: #7f8fa6;
text-transform: uppercase;
pointer-events: none;
transition: 0.6s;
background-color: transparent;
}
input:valid ~ span,
input:focus ~ span{
color: #fff;
transform: translateX(10px) translateY(-7px);
font-size: 0.65rem;
font-weight: 600;
padding: 0 10px;
background: #1c1c1c;
letter-spacing: 0.1rem;
}
input:valid,
input:focus{
color: #fff;
border: 2px solid #fff;
}
}
.release-date {
margin-top: 1rem;
font-size: 1.2rem;
color: #7f8fa6;
font-family: "Roboto", sans-serif;
display: flex;
align-items: center;
.left {
display: flex;
flex-direction: column;
margin-left: 5px;
margin-right: 10px;
}
span {
font-size: .85rem;
}
input {
padding: 8px;
}
}
.upload-button {
position: absolute;
bottom: 5px;
margin-top: 1rem;
padding: 10px;
background-color: #7f8fa6;
color: #fff;
width: 100%;
font-size: 1rem;
font-family: "Roboto", sans-serif;
border: none;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
&:hover {
background-color: #fff;
color: #7f8fa6;
}
}
}
}

115
style/addArtist.scss Normal file
View File

@ -0,0 +1,115 @@
@import "theme.scss";
.add-artist-container {
position: fixed;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: 30rem;
height: 15rem;
border: 1px solid white;
border-radius: 5px;
padding: 1rem;
padding-top: 0;
z-index: 2;
display: flex;
flex-direction: column;
background-color: #1c1c1c;
z-index: 11;
.upload-header {
font-size: .7rem;
font-weight: 300;
padding-bottom: 0;
border-bottom: 1px solid white;
font-family: "Roboto", sans-serif;
}
.close-button {
position: absolute;
top: 5px;
right: 5px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 50%;
font-size: 1.6rem;
transition: all 0.3s;
border: none;
}
.close-button:hover {
transform: scale(1.1);
background-color: rgba(255, 255, 255, 0.1);
}
.close-button:active {
transform: scale(0.8);
}
.create-artist-form {
width:100%;
height: 100%;
position: relative;
.input-bx{
margin-top: 1rem;
width: 300px;
position: relative;
input{
width: 100%;
padding: 10px;
border: 2px solid #7f8fa6;
border-radius: 5px;
outline: none;
font-size: 1rem;
transition: 0.6s;
background-color: transparent;
}
span{
position: absolute;
left: 0;
top: 1px;
padding: 10px;
font-size: 1rem;
color: #7f8fa6;
text-transform: uppercase;
pointer-events: none;
transition: 0.6s;
background-color: transparent;
}
input:valid ~ span,
input:focus ~ span{
color: #fff;
transform: translateX(10px) translateY(-7px);
font-size: 0.65rem;
font-weight: 600;
padding: 0 10px;
background: #1c1c1c;
letter-spacing: 0.1rem;
}
input:valid,
input:focus{
color: #fff;
border: 2px solid #fff;
}
}
.upload-button {
position: absolute;
bottom: 5px;
margin-top: 1rem;
padding: 10px;
background-color: #7f8fa6;
color: #fff;
width: 100%;
font-size: 1rem;
font-family: "Roboto", sans-serif;
border: none;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
&:hover {
background-color: #fff;
color: #7f8fa6;
}
}
}
}

30
style/artist.scss Normal file
View File

@ -0,0 +1,30 @@
.artist-container {
.artist-header {
display: flex;
.artist-image {
width: 100px;
height: 100px;
border-radius: 50%;
padding: 20px;
svg {
padding: 0;
margin: 0;
}
}
h1 {
font-size: 40px;
align-self: center;
padding: 10px;
}
}
.artist-details {
p {
font-size: 1rem;
margin: 0.5rem;
}
}
}

View File

@ -6,6 +6,7 @@
height: 100vh;
display: flex;
flex-direction: row;
overflow: hidden;
}
.home-component {
background: #1c1c1c;

View File

@ -11,11 +11,14 @@
@import 'dashboard_tile.scss';
@import 'dashboard_row.scss';
@import 'upload.scss';
@import 'addArtist.scss';
@import 'addAlbum.scss';
@import 'error.scss';
@import 'song_list.scss';
@import 'profile.scss';
@import 'loading.scss';
@import 'album_page.scss';
@import 'artist.scss';
body {
font-family: sans-serif;

View File

@ -11,35 +11,71 @@
margin: 3px;
padding: 0.1rem 1rem 1rem 1rem;
position: relative;
.upload-overlay {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 10;
}
.header {
font-size: 1.2rem;
}
.upload-btn {
.upload-dropdown-container {
position: absolute;
top: 10px;
right: 7px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 0.9rem;
border-radius: 50px;
border: none;
height: 2.2rem;
padding-right: 1rem;
padding-left: 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
.add-sign {
font-size: 1.5rem;
margin-top: auto;
margin-right: 5px;
color: white;
.upload-dropdown-btn {
display: flex;
flex-direction: row;
justify-content: center;
font-size: 0.9rem;
border-radius: 50px;
border: none;
height: 2.2rem;
padding-right: 1rem;
padding-left: 1rem;
cursor: pointer;
transition: all 0.3s ease;
.add-sign {
font-size: 1.5rem;
margin-top: auto;
}
}
.upload-dropdown-btn:hover {
background-color: #9e9e9e;
}
.upload-dropdown-btn-active {
border-radius: 12.5px 12.5px 0 0;
width: 110px;
}
.upload-dropdown {
background-color: #f0ecec;
color: black;
width: 110px;
border-radius: 0 0 5px 5px;
.add-btns {
border: none;
border-bottom: 1px solid black;
width: 100%;
padding: 0.25rem;
cursor: pointer;
}
.add-btns:first-child {
border-top: 1px solid black;
}
.add-btns:last-child {
border-radius: 0 0 5px 5px;
}
}
}
.upload-btn:hover {
background-color: #9e9e9e;
}
.buttons {
display: flex;
flex-direction: row;

View File

@ -15,6 +15,7 @@
display: flex;
flex-direction: column;
background-color: #1c1c1c;
z-index: 11;
.close-button {
position: absolute;
top: 5px;
@ -27,9 +28,7 @@
font-size: 1.6rem;
transition: all 0.3s;
border: none;
}
.close-button:hover {
transform: scale(1.1);
background-color: rgba(255, 255, 255, 0.1);
@ -48,6 +47,9 @@
padding: .1rem;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
position: relative;
.input-bx{
margin-top: 1rem;
position: relative;
@ -126,6 +128,9 @@
}
}
.upload-button {
position: absolute;
bottom: 5px;
width: 100%;
margin-top: 1rem;
padding: 10px;
background-color: #7f8fa6;