Merge branch '19-implement-file-uploads' into 'main'

Resolve "Implement file uploads"

Closes #19

See merge request libretunes/libretunes!26
This commit is contained in:
Ethan Girouard 2024-05-18 18:51:30 -04:00
commit 5cc504b4d6
14 changed files with 950 additions and 73 deletions

70
Cargo.lock generated
View File

@ -71,6 +71,12 @@ version = "1.7.1"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "69f7f8c3906b62b754cd5326047894316021dcfe5a194c8ea52bdd94934a3457" checksum = "69f7f8c3906b62b754cd5326047894316021dcfe5a194c8ea52bdd94934a3457"
[[package]]
name = "arrayvec"
version = "0.7.4"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "96d30a06541fbafbc7f82ed10c06164cfbd2c401138f6addd8404629c4b16711"
[[package]] [[package]]
name = "async-recursion" name = "async-recursion"
version = "1.1.0" version = "1.1.0"
@ -259,6 +265,12 @@ version = "3.15.4"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "7ff69b9dd49fd426c69a0db9fc04dd934cdb6645ff000864d98f7e2af8830eaa" checksum = "7ff69b9dd49fd426c69a0db9fc04dd934cdb6645ff000864d98f7e2af8830eaa"
[[package]]
name = "bytemuck"
version = "1.15.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "5d6d68c57235a3a081186990eca2867354726650f42f7516ca50c28d6281fd15"
[[package]] [[package]]
name = "byteorder" name = "byteorder"
version = "1.5.0" version = "1.5.0"
@ -1586,9 +1598,12 @@ dependencies = [
"leptos_meta", "leptos_meta",
"leptos_router", "leptos_router",
"log", "log",
"multer",
"openssl", "openssl",
"pbkdf2", "pbkdf2",
"serde", "serde",
"server_fn",
"symphonia",
"thiserror", "thiserror",
"time", "time",
"tokio", "tokio",
@ -1597,6 +1612,7 @@ dependencies = [
"tower-sessions", "tower-sessions",
"tower-sessions-redis-store", "tower-sessions-redis-store",
"wasm-bindgen", "wasm-bindgen",
"web-sys",
] ]
[[package]] [[package]]
@ -2374,9 +2390,9 @@ dependencies = [
[[package]] [[package]]
name = "server_fn" name = "server_fn"
version = "0.6.10" version = "0.6.11"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "15a46a2ffdecb81430ecfb995989218a18b6e94c1ead50cb806b5927c986a8ce" checksum = "536a5b959673643ee01e59ae41bf01425482c8070dee95d7061ee2d45296b59c"
dependencies = [ dependencies = [
"axum", "axum",
"bytes", "bytes",
@ -2390,6 +2406,7 @@ dependencies = [
"hyper", "hyper",
"inventory", "inventory",
"js-sys", "js-sys",
"multer",
"once_cell", "once_cell",
"send_wrapper", "send_wrapper",
"serde", "serde",
@ -2495,6 +2512,55 @@ version = "2.5.0"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "81cdd64d312baedb58e21336b31bc043b77e01cc99033ce76ef539f78e965ebc" checksum = "81cdd64d312baedb58e21336b31bc043b77e01cc99033ce76ef539f78e965ebc"
[[package]]
name = "symphonia"
version = "0.5.4"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "815c942ae7ee74737bb00f965fa5b5a2ac2ce7b6c01c0cc169bbeaf7abd5f5a9"
dependencies = [
"lazy_static",
"symphonia-bundle-mp3",
"symphonia-core",
"symphonia-metadata",
]
[[package]]
name = "symphonia-bundle-mp3"
version = "0.5.4"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "c01c2aae70f0f1fb096b6f0ff112a930b1fb3626178fba3ae68b09dce71706d4"
dependencies = [
"lazy_static",
"log",
"symphonia-core",
"symphonia-metadata",
]
[[package]]
name = "symphonia-core"
version = "0.5.4"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "798306779e3dc7d5231bd5691f5a813496dc79d3f56bf82e25789f2094e022c3"
dependencies = [
"arrayvec",
"bitflags 1.3.2",
"bytemuck",
"lazy_static",
"log",
]
[[package]]
name = "symphonia-metadata"
version = "0.5.4"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "bc622b9841a10089c5b18e99eb904f4341615d5aa55bbf4eedde1be721a4023c"
dependencies = [
"encoding_rs",
"lazy_static",
"log",
"symphonia-core",
]
[[package]] [[package]]
name = "syn" name = "syn"
version = "1.0.109" version = "1.0.109"

View File

@ -36,8 +36,12 @@ tower-sessions = { version = "0.11", default-features = false }
tower-sessions-redis-store = { version = "0.11", optional = true } tower-sessions-redis-store = { version = "0.11", optional = true }
async-trait = "0.1.79" async-trait = "0.1.79"
axum-login = { version = "0.14.0", optional = true } axum-login = { version = "0.14.0", optional = true }
server_fn = { version = "0.6.11", features = ["multipart"] }
symphonia = { version = "0.5.4", default-features = false, features = ["mp3"], optional = true }
multer = { version = "3.0.0", optional = true }
log = { version = "0.4.21", optional = true } log = { version = "0.4.21", optional = true }
flexi_logger = { version = "0.28.0", optional = true, default-features = false } flexi_logger = { version = "0.28.0", optional = true, default-features = false }
web-sys = "0.3.69"
[patch.crates-io] [patch.crates-io]
gloo-net = { git = "https://github.com/rustwasm/gloo.git", rev = "a823fab7ecc4068e9a28bd669da5eaf3f0a56380" } gloo-net = { git = "https://github.com/rustwasm/gloo.git", rev = "a823fab7ecc4068e9a28bd669da5eaf3f0a56380" }
@ -63,6 +67,8 @@ ssr = [
"tower-http", "tower-http",
"tower-sessions-redis-store", "tower-sessions-redis-store",
"axum-login", "axum-login",
"symphonia",
"multer",
"log", "log",
"flexi_logger", "flexi_logger",
] ]

View File

@ -16,6 +16,7 @@ pub fn App() -> impl IntoView {
let play_status = PlayStatus::default(); let play_status = PlayStatus::default();
let play_status = create_rw_signal(play_status); let play_status = create_rw_signal(play_status);
let upload_open = create_rw_signal(false);
view! { view! {
// injects a stylesheet into the document <head> // injects a stylesheet into the document <head>
@ -36,7 +37,7 @@ pub fn App() -> impl IntoView {
}> }>
<main> <main>
<Routes> <Routes>
<Route path="" view=move || view! { <HomePage play_status=play_status/> }> <Route path="" view=move || view! { <HomePage play_status=play_status upload_open=upload_open/> }>
<Route path="" view=Dashboard /> <Route path="" view=Dashboard />
<Route path="dashboard" view=Dashboard /> <Route path="dashboard" view=Dashboard />
<Route path="search" view=Search /> <Route path="search" view=Search />
@ -53,13 +54,15 @@ use crate::components::sidebar::*;
use crate::components::dashboard::*; use crate::components::dashboard::*;
use crate::components::search::*; use crate::components::search::*;
use crate::components::personal::*; use crate::components::personal::*;
use crate::components::upload::*;
/// Renders the home page of your application. /// Renders the home page of your application.
#[component] #[component]
fn HomePage(play_status: RwSignal<PlayStatus>) -> impl IntoView { fn HomePage(play_status: RwSignal<PlayStatus>, upload_open: RwSignal<bool>) -> impl IntoView {
view! { view! {
<div class="home-container"> <div class="home-container">
<Sidebar /> <Upload open=upload_open/>
<Sidebar upload_open=upload_open/>
// This <Outlet /> will render the child route components // This <Outlet /> will render the child route components
<Outlet /> <Outlet />
<Personal /> <Personal />

View File

@ -2,3 +2,4 @@ pub mod sidebar;
pub mod dashboard; pub mod dashboard;
pub mod search; pub mod search;
pub mod personal; pub mod personal;
pub mod upload;

View File

@ -1,9 +1,10 @@
use leptos::leptos_dom::*; use leptos::leptos_dom::*;
use leptos::*; use leptos::*;
use leptos_icons::*; use leptos_icons::*;
use crate::components::upload::*;
#[component] #[component]
pub fn Sidebar() -> impl IntoView { pub fn Sidebar(upload_open: RwSignal<bool>) -> impl IntoView {
use leptos_router::use_location; use leptos_router::use_location;
let location = use_location(); let location = use_location();
@ -19,6 +20,7 @@ pub fn Sidebar() -> impl IntoView {
<div class="sidebar-container"> <div class="sidebar-container">
<div class="sidebar-top-container"> <div class="sidebar-top-container">
<h2 class="header">LibreTunes</h2> <h2 class="header">LibreTunes</h2>
<UploadBtn dialog_open=upload_open />
<a class="buttons" href="/dashboard" style={move || if on_dashboard() {"color: #e1e3e1"} else {""}} > <a class="buttons" href="/dashboard" style={move || if on_dashboard() {"color: #e1e3e1"} else {""}} >
<Icon icon=icondata::OcHomeFillLg /> <Icon icon=icondata::OcHomeFillLg />
<h1>Dashboard</h1> <h1>Dashboard</h1>

245
src/components/upload.rs Normal file
View File

@ -0,0 +1,245 @@
use std::rc::Rc;
use leptos::leptos_dom::*;
use leptos::*;
use leptos_icons::*;
use leptos_router::Form;
use web_sys::Response;
use crate::search::search_artists;
use crate::search::search_albums;
use crate::models::Artist;
use crate::models::Album;
#[component]
pub fn UploadBtn(dialog_open: RwSignal<bool>) -> impl IntoView {
let open_dialog = move |_| {
dialog_open.set(true);
};
view! {
<button class="upload-btn" on:click=open_dialog>
<div class="add-sign">
<Icon icon=icondata::IoAddSharp />
</div>
Upload
</button>
}
}
#[component]
pub fn Upload(open: RwSignal<bool>) -> impl IntoView {
// Create signals for the artist input and the filtered artists
let (artists, set_artists) = create_signal("".to_string());
let (filtered_artists, set_filtered_artists) = create_signal(vec![]);
let (albums, set_albums) = create_signal("".to_string());
let (filtered_albums, set_filtered_albums) = create_signal(vec![]);
let (error_msg, set_error_msg) = create_signal::<Option<String>>(None);
let close_dialog = move |ev: leptos::ev::MouseEvent| {
ev.prevent_default();
open.set(false);
};
// Create a filter function to handle filtering artists
// Allow users to search for artists by name, converts the artist name to artist id to be handed off to backend
let handle_filter_artists = move |ev: leptos::ev::Event| {
ev.prevent_default();
let artist_input: String = event_target_value(&ev);
//Get the artist that we are currently searching for
let mut all_artists: Vec<&str> = artist_input.split(",").collect();
let search = all_artists.pop().unwrap().to_string();
//Update the artist signal with the input
set_artists.update(|value: &mut String| *value = artist_input);
spawn_local(async move {
let filter_results = search_artists(search, 3).await;
if let Err(err) = filter_results {
log!("Error filtering artists: {:?}", err);
} else if let Ok(artists) = filter_results {
log!("Filtered artists: {:?}", artists);
set_filtered_artists.update(|value| *value = artists);
}
})
};
// Create a filter function to handle filtering albums
// Allow users to search for albums by title, converts the album title to album id to be handed off to backend
let handle_filter_albums = move |ev: leptos::ev::Event| {
ev.prevent_default();
let album_input: String = event_target_value(&ev);
//Update the album signal with the input
set_albums.update(|value: &mut String| *value = album_input);
spawn_local(async move {
let filter_results = search_albums(albums.get_untracked(), 3).await;
if let Err(err) = filter_results {
log!("Error filtering albums: {:?}", err);
} else if let Ok(albums) = filter_results {
log!("Filtered albums: {:?}", albums);
set_filtered_albums.update(|value| *value = albums);
}
})
};
let handle_response = Rc::new(move |response: &Response| {
if response.ok() {
set_error_msg.update(|value| *value = None);
set_filtered_artists.update(|value| *value = vec![]);
set_filtered_albums.update(|value| *value = vec![]);
set_artists.update(|value| *value = "".to_string());
set_albums.update(|value| *value = "".to_string());
open.set(false);
} else {
// TODO: Extract error message from response
set_error_msg.update(|value| *value = Some("Error uploading song".to_string()));
}
});
view! {
<Show when=open fallback=move || view! {}>
<div class="upload-container" open=open>
<div class="close-button" on:click=close_dialog><Icon icon=icondata::IoClose /></div>
<div class="upload-header">
<h1>Upload Song</h1>
</div>
<Form action="/api/upload" method="POST" enctype=String::from("multipart/form-data")
class="upload-form" on_response=handle_response.clone()>
<div class="input-bx">
<input type="text" name="title" required class="text-input" required/>
<span>Title</span>
</div>
<div class="artists has-search">
<div class="input-bx">
<input type="text" name="artist_ids" class="text-input" prop:value=artists on:input=handle_filter_artists/>
<span>Artists</span>
</div>
<Show
when=move || {filtered_artists.get().len() > 0}
fallback=move || view! {}
>
<ul class="artist_results search-results">
{
move || filtered_artists.get().iter().enumerate().map(|(_index,filtered_artist)| view! {
<Artist artist=filtered_artist.clone() artists=artists set_artists=set_artists set_filtered=set_filtered_artists/>
}).collect::<Vec<_>>()
}
</ul>
</Show>
</div>
<div class="albums has-search">
<div class="input-bx">
<input type="text" name="album_id" class="text-input" prop:value=albums on:input=handle_filter_albums/>
<span>Album ID</span>
</div>
<Show
when=move || {filtered_albums.get().len() > 0}
fallback=move || view! {}
>
<ul class="album_results search-results">
{
move || filtered_albums.get().iter().enumerate().map(|(_index,filtered_album)| view! {
<Album album=filtered_album.clone() _albums=albums set_albums=set_albums set_filtered=set_filtered_albums/>
}).collect::<Vec<_>>()
}
</ul>
</Show>
</div>
<div class="input-bx">
<input type="number" name="track_number" class="text-input"/>
<span>Track Number</span>
</div>
<div class="release-date">
<div class="left">
<span>Release</span>
<span>Date</span>
</div>
<input class="info" type="date" name="release_date"/>
</div>
<div class="file">
<span>File</span>
<input class="info" type="file" accept=".mp3" name="file" required/>
</div>
<button type="submit" class="upload-button">Upload</button>
</Form>
<Show
when=move || {error_msg.get().is_some()}
fallback=move || view! {}
>
<div class="error-msg">
<Icon icon=icondata::IoAlertCircleSharp />
{error_msg.get().as_ref().unwrap()}
</div>
</Show>
</div>
</Show>
}
}
#[component]
pub fn Artist(artist: Artist, artists: ReadSignal<String>, set_artists: WriteSignal<String>, set_filtered: WriteSignal<Vec<Artist>>) -> impl IntoView {
// Converts artist name to artist id and adds it to the artist input
let add_artist = move |_| {
//Create an empty string to hold previous artist ids
let mut s: String = String::from("");
//Get the current artist input
let all_artirts: String = artists.get();
//Split the input into a vector of artists separated by commas
let mut ids: Vec<&str> = all_artirts.split(",").collect();
//If there is only one artist in the input, get their id equivalent and add it to the string
if ids.len() == 1 {
let value_str = match artist.id.clone() {
Some(v) => v.to_string(),
None => String::from("None"),
};
s.push_str(&value_str);
s.push_str(",");
set_artists.update(|value| *value = s);
//If there are multiple artists in the input, pop the last artist by string off the vector,
//get their id equivalent, and add it to the string
} else {
ids.pop();
for id in ids {
s.push_str(id);
s.push_str(",");
}
let value_str = match artist.id.clone() {
Some(v) => v.to_string(),
None => String::from("None"),
};
s.push_str(&value_str);
s.push_str(",");
set_artists.update(|value| *value = s);
}
//Clear the search results
set_filtered.update(|value| *value = vec![]);
};
view! {
<div class="artist result" on:click=add_artist>
{artist.name.clone()}
</div>
}
}
#[component]
pub fn Album(album: Album, _albums: ReadSignal<String>, set_albums: WriteSignal<String>, set_filtered: WriteSignal<Vec<Album>>) -> impl IntoView {
//Converts album title to album id to upload a song
let add_album = move |_| {
let value_str = match album.id.clone() {
Some(v) => v.to_string(),
None => String::from("None"),
};
set_albums.update(|value| *value = value_str);
set_filtered.update(|value| *value = vec![]);
};
view! {
<div class="album result" on:click=add_album>
{album.title.clone()}
</div>
}
}

View File

@ -13,6 +13,9 @@ pub mod users;
pub mod search; pub mod search;
pub mod fileserv; pub mod fileserv;
pub mod error_template; pub mod error_template;
pub mod upload;
pub mod util;
use cfg_if::cfg_if; use cfg_if::cfg_if;
cfg_if! { cfg_if! {

View File

@ -44,10 +44,10 @@ pub struct User {
} }
/// Model for an artist /// Model for an artist
#[cfg_attr(feature = "ssr", derive(Queryable, Selectable, Insertable))] #[cfg_attr(feature = "ssr", derive(Queryable, Selectable, Insertable, Identifiable))]
#[cfg_attr(feature = "ssr", diesel(table_name = crate::schema::artists))] #[cfg_attr(feature = "ssr", diesel(table_name = crate::schema::artists))]
#[cfg_attr(feature = "ssr", diesel(check_for_backend(diesel::pg::Pg)))] #[cfg_attr(feature = "ssr", diesel(check_for_backend(diesel::pg::Pg)))]
#[derive(Serialize, Deserialize)] #[derive(Serialize, Deserialize, Clone, Debug)]
pub struct Artist { pub struct Artist {
/// A unique id for the artist /// A unique id for the artist
#[cfg_attr(feature = "ssr", diesel(deserialize_as = i32))] #[cfg_attr(feature = "ssr", diesel(deserialize_as = i32))]
@ -165,10 +165,10 @@ impl Artist {
} }
/// Model for an album /// Model for an album
#[cfg_attr(feature = "ssr", derive(Queryable, Selectable, Insertable))] #[cfg_attr(feature = "ssr", derive(Queryable, Selectable, Insertable, Identifiable))]
#[cfg_attr(feature = "ssr", diesel(table_name = crate::schema::albums))] #[cfg_attr(feature = "ssr", diesel(table_name = crate::schema::albums))]
#[cfg_attr(feature = "ssr", diesel(check_for_backend(diesel::pg::Pg)))] #[cfg_attr(feature = "ssr", diesel(check_for_backend(diesel::pg::Pg)))]
#[derive(Serialize, Deserialize)] #[derive(Serialize, Deserialize, Clone, Debug)]
pub struct Album { pub struct Album {
/// A unique id for the album /// A unique id for the album
#[cfg_attr(feature = "ssr", diesel(deserialize_as = i32))] #[cfg_attr(feature = "ssr", diesel(deserialize_as = i32))]

294
src/upload.rs Normal file
View File

@ -0,0 +1,294 @@
use leptos::*;
use server_fn::codec::{MultipartData, MultipartFormData};
use cfg_if::cfg_if;
cfg_if! {
if #[cfg(feature = "ssr")] {
use multer::Field;
use crate::database::get_db_conn;
use diesel::prelude::*;
use log::*;
use server_fn::error::NoCustomError;
use time::Date;
}
}
/// Extract the text from a multipart field
#[cfg(feature = "ssr")]
async fn extract_field(field: Field<'static>) -> Result<String, ServerFnError> {
let field = match field.text().await {
Ok(field) => field,
Err(e) => Err(ServerFnError::<NoCustomError>::ServerError(format!("Error reading field: {}", e)))?,
};
Ok(field)
}
/// Validate the artist ids in a multipart field
/// Expects a field with a comma-separated list of artist ids, and ensures each is a valid artist id in the database
#[cfg(feature = "ssr")]
async fn validate_artist_ids(artist_ids: Field<'static>) -> Result<Vec<i32>, ServerFnError> {
use crate::models::Artist;
use diesel::result::Error::NotFound;
// Extract the artist id from the field
match artist_ids.text().await {
Ok(artist_ids) => {
let artist_ids = artist_ids.trim_end_matches(',').split(',');
artist_ids.filter(|artist_id| !artist_id.is_empty()).map(|artist_id| {
// Parse the artist id as an integer
if let Ok(artist_id) = artist_id.parse::<i32>() {
// Check if the artist exists
let db_con = &mut get_db_conn();
let artist = crate::schema::artists::dsl::artists.find(artist_id).first::<Artist>(db_con);
match artist {
Ok(_) => Ok(artist_id),
Err(NotFound) => Err(ServerFnError::<NoCustomError>::
ServerError("Artist does not exist".to_string())),
Err(e) => Err(ServerFnError::<NoCustomError>::
ServerError(format!("Error finding artist id: {}", e))),
}
} else {
Err(ServerFnError::<NoCustomError>::ServerError("Error parsing artist id".to_string()))
}
}).collect()
},
Err(e) => Err(ServerFnError::<NoCustomError>::ServerError(format!("Error reading artist id: {}", e))),
}
}
/// Validate the album id in a multipart field
/// Expects a field with an album id, and ensures it is a valid album id in the database
#[cfg(feature = "ssr")]
async fn validate_album_id(album_id: Field<'static>) -> Result<Option<i32>, ServerFnError> {
use crate::models::Album;
use diesel::result::Error::NotFound;
// Extract the album id from the field
match album_id.text().await {
Ok(album_id) => {
if album_id.is_empty() {
return Ok(None);
}
// Parse the album id as an integer
if let Ok(album_id) = album_id.parse::<i32>() {
// Check if the album exists
let db_con = &mut get_db_conn();
let album = crate::schema::albums::dsl::albums.find(album_id).first::<Album>(db_con);
match album {
Ok(_) => Ok(Some(album_id)),
Err(NotFound) => Err(ServerFnError::<NoCustomError>::
ServerError("Album does not exist".to_string())),
Err(e) => Err(ServerFnError::<NoCustomError>::
ServerError(format!("Error finding album id: {}", e))),
}
} else {
Err(ServerFnError::<NoCustomError>::ServerError("Error parsing album id".to_string()))
}
},
Err(e) => Err(ServerFnError::<NoCustomError>::ServerError(format!("Error reading album id: {}", e))),
}
}
/// Validate the track number in a multipart field
/// Expects a field with a track number, and ensures it is a valid track number (non-negative integer)
#[cfg(feature = "ssr")]
async fn validate_track_number(track_number: Field<'static>) -> Result<Option<i32>, ServerFnError> {
match track_number.text().await {
Ok(track_number) => {
if track_number.is_empty() {
return Ok(None);
}
if let Ok(track_number) = track_number.parse::<i32>() {
if track_number < 0 {
return Err(ServerFnError::<NoCustomError>::
ServerError("Track number must be positive or 0".to_string()));
} else {
Ok(Some(track_number))
}
} else {
return Err(ServerFnError::<NoCustomError>::ServerError("Error parsing track number".to_string()));
}
},
Err(e) => Err(ServerFnError::<NoCustomError>::ServerError(format!("Error reading track number: {}", e)))?,
}
}
/// Validate the release date in a multipart field
/// Expects a field with a release date, and ensures it is a valid date in the format [year]-[month]-[day]
#[cfg(feature = "ssr")]
async fn validate_release_date(release_date: Field<'static>) -> Result<Option<Date>, ServerFnError> {
match release_date.text().await {
Ok(release_date) => {
if release_date.trim().is_empty() {
return Ok(None);
}
let date_format = time::macros::format_description!("[year]-[month]-[day]");
let release_date = Date::parse(&release_date.trim(), date_format);
match release_date {
Ok(release_date) => Ok(Some(release_date)),
Err(_) => Err(ServerFnError::<NoCustomError>::ServerError("Invalid release date".to_string())),
}
},
Err(e) => Err(ServerFnError::<NoCustomError>::ServerError(format!("Error reading release date: {}", e))),
}
}
/// Handle the file upload form
#[server(input = MultipartFormData, endpoint = "/upload")]
pub async fn upload(data: MultipartData) -> Result<(), ServerFnError> {
// Safe to unwrap - "On the server side, this always returns Some(_). On the client side, always returns None."
let mut data = data.into_inner().unwrap();
let mut title = None;
let mut artist_ids = None;
let mut album_id = None;
let mut track = None;
let mut release_date = None;
let mut file_name = None;
let mut duration = None;
// Fetch the fields from the form data
while let Ok(Some(mut field)) = data.next_field().await {
let name = field.name().unwrap_or_default().to_string();
match name.as_str() {
"title" => { title = Some(extract_field(field).await?); },
"artist_ids" => { artist_ids = Some(validate_artist_ids(field).await?); },
"album_id" => { album_id = Some(validate_album_id(field).await?); },
"track_number" => { track = Some(validate_track_number(field).await?); },
"release_date" => { release_date = Some(validate_release_date(field).await?); },
"file" => {
use symphonia::core::codecs::CODEC_TYPE_MP3;
use crate::util::audio::extract_metadata;
use std::fs::OpenOptions;
use std::io::{Seek, Write};
// Some logging is done here where there is high potential for bugs / failures,
// or behavior that we may wish to change in the future
// Create file name
let title = title.clone().ok_or(ServerFnError::<NoCustomError>::
ServerError("Title field required and must precede file field".to_string()))?;
let clean_title = title.replace(" ", "_").replace("/", "_");
let date_format = time::macros::format_description!("[year]-[month]-[day]_[hour]:[minute]:[second]");
let date_str = time::OffsetDateTime::now_utc().format(date_format).unwrap_or_default();
let upload_path = format!("assets/audio/upload-{}_{}.mp3", date_str, clean_title);
file_name = Some(format!("upload-{}_{}.mp3", date_str, clean_title));
debug!("Saving uploaded file {}", upload_path);
// Save file to disk
// Use these open options to create the file, write to it, then read from it
let mut file = OpenOptions::new()
.read(true)
.write(true)
.create(true)
.open(upload_path.clone())?;
while let Some(chunk) = field.chunk().await? {
file.write(&chunk)?;
}
file.flush()?;
// Rewind the file so the duration can be measured
file.rewind()?;
// Get the codec and duration of the file
let (file_codec, file_duration) = extract_metadata(file)
.map_err(|e| {
let msg = format!("Error measuring duration of audio file {}: {}", upload_path, e);
warn!("{}", msg);
ServerFnError::<NoCustomError>::ServerError(msg)
})?;
if file_codec != CODEC_TYPE_MP3 {
let msg = format!("Invalid uploaded audio file codec: {}", file_codec);
warn!("{}", msg);
return Err(ServerFnError::<NoCustomError>::ServerError(msg));
}
duration = Some(file_duration);
},
_ => {
warn!("Unknown file upload field: {}", name);
}
}
}
// Unwrap mandatory fields
let title = title.ok_or(ServerFnError::<NoCustomError>::ServerError("Missing title".to_string()))?;
let artist_ids = artist_ids.unwrap_or(vec![]);
let file_name = file_name.ok_or(ServerFnError::<NoCustomError>::ServerError("Missing file".to_string()))?;
let duration = duration.ok_or(ServerFnError::<NoCustomError>::ServerError("Missing duration".to_string()))?;
let duration = i32::try_from(duration).map_err(|e| ServerFnError::<NoCustomError>::
ServerError(format!("Error converting duration to i32: {}", e)))?;
let album_id = album_id.unwrap_or(None);
let track = track.unwrap_or(None);
let release_date = release_date.unwrap_or(None);
if album_id.is_some() != track.is_some() {
return Err(ServerFnError::<NoCustomError>
::ServerError("Album id and track number must both be present or both be absent".to_string()));
}
// Create the song
use crate::models::Song;
let song = Song {
id: None,
title,
album_id,
track,
duration,
release_date,
storage_path: file_name,
image_path: None,
};
// Save the song to the database
let db_con = &mut get_db_conn();
let song = song.insert_into(crate::schema::songs::table)
.get_result::<Song>(db_con)
.map_err(|e| {
let msg = format!("Error saving song to database: {}", e);
warn!("{}", msg);
ServerFnError::<NoCustomError>::ServerError(msg)
})?;
// Save the song's artists to the database
let song_id = song.id.ok_or_else(|| {
let msg = "Error saving song to database: song id not found after insertion".to_string();
warn!("{}", msg);
ServerFnError::<NoCustomError>::ServerError(msg)
})?;
use crate::schema::song_artists;
use diesel::ExpressionMethods;
let artist_ids = artist_ids.into_iter().map(|artist_id| {
(song_artists::song_id.eq(song_id), song_artists::artist_id.eq(artist_id))
}).collect::<Vec<_>>();
diesel::insert_into(crate::schema::song_artists::table)
.values(&artist_ids)
.execute(db_con)
.map_err(|e| {
let msg = format!("Error saving song artists to database: {}", e);
warn!("{}", msg);
ServerFnError::<NoCustomError>::ServerError(msg)
})?;
Ok(())
}

37
src/util/audio.rs Normal file
View File

@ -0,0 +1,37 @@
use symphonia::core::codecs::CodecType;
use symphonia::core::formats::FormatOptions;
use symphonia::core::io::MediaSourceStream;
use symphonia::core::meta::MetadataOptions;
use symphonia::core::probe::Hint;
use std::fs::File;
/// Extract the codec and duration of an audio file
/// This is combined into one function because the file object will be consumed
pub fn extract_metadata(file: File) -> Result<(CodecType, u64), Box<dyn std::error::Error>> {
let source_stream = MediaSourceStream::new(Box::new(file), Default::default());
let hint = Hint::new();
let format_opts = FormatOptions::default();
let metadata_opts = MetadataOptions::default();
let probe = symphonia::default::get_probe().format(&hint, source_stream, &format_opts, &metadata_opts)?;
let reader = probe.format;
if reader.tracks().len() != 1 {
return Err(format!("Expected 1 track, found {}", reader.tracks().len()).into())
}
let track = &reader.tracks()[0];
let time_base = track.codec_params.time_base.ok_or("Missing time base")?;
let duration = track.codec_params.n_frames
.map(|frames| track.codec_params.start_ts + frames)
.ok_or("Missing number of frames")?;
let duration = duration
.checked_mul(time_base.numer as u64)
.and_then(|v| v.checked_div(time_base.denom as u64))
.ok_or("Overflow while computing duration")?;
Ok((track.codec_params.codec, duration))
}

7
src/util/mod.rs Normal file
View File

@ -0,0 +1,7 @@
use cfg_if::cfg_if;
cfg_if! {
if #[cfg(feature = "ssr")] {
pub mod audio;
}
}

View File

@ -8,6 +8,7 @@
@import 'home.scss'; @import 'home.scss';
@import 'search.scss'; @import 'search.scss';
@import 'personal.scss'; @import 'personal.scss';
@import 'upload.scss';
body { body {
font-family: sans-serif; font-family: sans-serif;

View File

@ -4,20 +4,43 @@
background-color: transparent; background-color: transparent;
width: 22rem; width: 22rem;
height: calc(100% - 75px); height: calc(100% - 75px);
} .sidebar-top-container {
.sidebar-top-container {
border-radius: 1rem; border-radius: 1rem;
background-color: #1c1c1c; background-color: #1c1c1c;
height: 9rem; height: 9rem;
margin: 3px; margin: 3px;
padding: 0.1rem 1rem 1rem 1rem; padding: 0.1rem 1rem 1rem 1rem;
} position: relative;
.header {
.sidebar-top-container .header {
font-size: 1.2rem; font-size: 1.2rem;
} }
.sidebar-top-container .buttons { .upload-btn {
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-btn:hover {
background-color: #9e9e9e;
}
.buttons {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-size: 1.8rem; font-size: 1.8rem;
@ -26,25 +49,23 @@
cursor: pointer; cursor: pointer;
color: grey; color: grey;
text-decoration: none; text-decoration: none;
} }
.sidebar-top-container .buttons:hover { .buttons:hover {
color: white; color: white;
} }
.buttons:last-child {
.sidebar-top-container .buttons:last-child {
margin-left: 0.02rem; margin-left: 0.02rem;
margin-top: 0.5rem; margin-top: 0.5rem;
} }
h1 {
.sidebar-top-container h1 {
font-size: 0.95rem; font-size: 0.95rem;
margin-left: 0.9rem; margin-left: 0.9rem;
font-weight: 400; font-weight: 400;
font-style: $standard-font; font-style: $standard-font;
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }
}
.sidebar-bottom-container { .sidebar-bottom-container {
border-radius: 1rem; border-radius: 1rem;
background-color: #1c1c1c; background-color: #1c1c1c;
margin: 3px; margin: 3px;
@ -89,4 +110,7 @@
background-color: #9e9e9e; background-color: #9e9e9e;
} }
} }
}
} }

188
style/upload.scss Normal file
View File

@ -0,0 +1,188 @@
@import "theme.scss";
.upload-container {
position: fixed;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: 30rem;
height: 30rem;
border: 1px solid white;
border-radius: 5px;
padding: 1rem;
padding-top: 0;
z-index: 2;
display: flex;
flex-direction: column;
background-color: #1c1c1c;
.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);
}
.upload-header {
font-size: .7rem;
font-weight: 300;
padding-bottom: 0;
border-bottom: 1px solid white;
font-family: "Roboto", sans-serif;
}
.upload-form {
padding: .1rem;
display: flex;
flex-direction: column;
.input-bx{
margin-top: 1rem;
position: relative;
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;
}
}
.file {
margin-top: .5rem;
display: flex;
align-items: center;
span {
font-size: .9rem;
color: #7f8fa6;
font-family: "Roboto", sans-serif;
margin-left: 5px;
margin-right: 10px;
}
input {
padding: 10px;
}
}
.upload-button {
margin-top: 1rem;
padding: 10px;
background-color: #7f8fa6;
color: #fff;
font-size: 1rem;
font-family: "Roboto", sans-serif;
border: none;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
&:hover {
background-color: #fff;
color: #7f8fa6;
}
}
.has-search {
position: relative;
width: 325px;
.search-results {
display: flex;
flex-direction: column;
border: 1px solid white;
width: 100%;
position: absolute;
top: 75%;
background-color: #1c1c1c;
z-index: 2;
border-radius: 5px;
padding: 0;
.result {
border-bottom: 1px solid white;
padding: 10px;
cursor: pointer;
transition: 0.3s;
&:hover {
background-color: #7f8fa6;
}
}
.result:last-child {
border-bottom: none;
}
}
}
}
.error-msg {
padding-top: 10px;
color: red;
display: flex;
justify-content: center;
align-items: center;
svg {
width: 20px;
height: 20px;
margin-right: 5px;
}
}
}