Fixed Album art getting functionality for front end

This commit is contained in:
MrDulfin 2024-12-14 19:17:46 -05:00
parent efca53b4bd
commit 5d25250125
5 changed files with 74 additions and 23 deletions

View file

@ -476,14 +476,10 @@ impl Song {
} }
pub fn album_art(&self, i: usize) -> Result<Vec<u8>, Box<dyn Error>> { pub fn album_art(&self, i: usize) -> Result<Vec<u8>, Box<dyn Error>> {
match self.album_art[i] { match self.album_art.get(i).unwrap() {
AlbumArt::Embedded(j) => { AlbumArt::Embedded(j) => {
let file = lofty::read_from_path(self.primary_uri()?.0.path())?; let file = lofty::read_from_path(self.primary_uri()?.0.path())?;
if file.contains_tag_type(TagType::Id3v2) { Ok(file.tag(file.primary_tag_type()).unwrap().pictures()[*j].data().to_vec())
Ok(file.tag(TagType::Id3v2).unwrap().pictures()[j].data().to_vec())
} else {
unimplemented!()
}
}, },
AlbumArt::External(ref path) => { AlbumArt::External(ref path) => {
let mut buf = vec![]; let mut buf = vec![];

View file

@ -182,7 +182,7 @@ async fn create_library(
#[tauri::command] #[tauri::command]
async fn lib_already_created(app: tauri::AppHandle<Wry>, lib_rx: State<'_, LibRx>, handle_tx: State<'_, HandleTx>) -> Result<(), String> { async fn lib_already_created(app: tauri::AppHandle<Wry>, lib_rx: State<'_, LibRx>, handle_tx: State<'_, HandleTx>) -> Result<(), String> {
println!("lib already created"); println!("lib already created");
lib_rx.inner().0.send(None); lib_rx.inner().0.send(None).unwrap();
app.manage(handle_tx.inner().0.recv().unwrap()); app.manage(handle_tx.inner().0.recv().unwrap());
Ok(()) Ok(())
} }

View file

@ -51,6 +51,7 @@ pub async fn next(app: AppHandle<Wry>, ctrl_handle: State<'_, ControllerHandle>,
}; };
let _song = _Song::from(&song); let _song = _Song::from(&song);
art_rx.0.send(song.album_art(0).unwrap()).unwrap(); art_rx.0.send(song.album_art(0).unwrap()).unwrap();
println!("next");
app.emit("now_playing_change", _song).unwrap(); app.emit("now_playing_change", _song).unwrap();
Ok(()) Ok(())
} }

View file

@ -20,9 +20,13 @@
"security": { "security": {
"assetProtocol": { "assetProtocol": {
"enable": true, "enable": true,
"scope": { "allow": ["asset://localhost*"] } "scope": { "allow": ["asset://localhost*", "http://localhost*"] }
}, },
"csp": "default-src 'self'; img-src 'self'; asset: asset://localhost/*" "csp": {
"default-src": "'self' customprotocol: asset:",
"connect-src": "ipc: http://ipc.localhost",
"img-src": "'self' asset: http://asset.localhost blob: data:"
}
} }
}, },
"bundle": { "bundle": {

View file

@ -4,22 +4,50 @@ import "./App.css";
import { Config } from "./types"; import { Config } from "./types";
import { EventEmitter } from "@tauri-apps/plugin-shell"; import { EventEmitter } from "@tauri-apps/plugin-shell";
import { listen } from "@tauri-apps/api/event"; import { listen } from "@tauri-apps/api/event";
// import { fetch } from "@tauri-apps/plugin-http";
import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
const appWindow = getCurrentWebviewWindow();
function App() { function App() {
const library = useState<JSX.Element[]>(); const library = useState<JSX.Element[]>();
const [artwork, setArtwork] = useState<JSX.Element>(<></>); const [imagePath, setImagePath] = useState<string | null>(null);
const [nowPlaying, setNowPlaying] = useState<JSX.Element>(<NowPlaying title="blank" album="blank" artist="blank" artwork={ artwork }/>); const [uuid, setUuid] = useState<number>(0);
listen<any>("now_playing_change", (event) => { // const [artwork, setArtwork] = useState<JSX.Element>();
console.log(event.payload);
const [nowPlaying, setNowPlaying] = useState<JSX.Element>(
<NowPlaying
title="blank"
album="blank"
artist="blank"
artwork={<></>}
/>
);
useEffect(() => {
const unlisten = appWindow.listen<any>("now_playing_change", ({ event, payload }) => {
console.log(event);
setUuid(payload.uuid)
setNowPlaying(
<NowPlaying
title={ payload.tags.TrackTitle }
album={ payload.tags.AlbumTitle }
artist={ payload.tags["DISPLAY ARTIST"] }
artwork={
<LI
uuid={payload.uuid}
/>
}
/>
)
})
return () => { unlisten.then((f) => f()) }
}, []);
setNowPlaying( <NowPlaying
title={ event.payload.tags.TrackTitle }
album={ event.payload.tags.AlbumTitle }
artist={ event.payload.tags["DISPLAY ARTIST"]}
artwork={ artwork } />)
setArtwork( <img src="asset://localhost" id="nowPlayingArtwork" /> )
})
useEffect(() => { useEffect(() => {
getConfig(); getConfig();
@ -42,6 +70,13 @@ function App() {
); );
} }
interface L {
uuid: number,
}
function LI({uuid}: L) {
return ( <img src={convertFileSrc("abc") + "?" + uuid } id="nowPlayingArtwork" alt="Some Image" key={uuid} /> )
}
export default App; export default App;
function getConfig(): any { function getConfig(): any {
@ -50,7 +85,7 @@ function getConfig(): any {
if (config.libraries.libraries.length == 0) { if (config.libraries.libraries.length == 0) {
newWindow() newWindow()
} else { } else {
console.log("else"); // console.log("else");
invoke('lib_already_created').then(() => {}) invoke('lib_already_created').then(() => {})
} }
}) })
@ -150,8 +185,12 @@ function Song(props: SongProps) {
) )
} }
function PlayBar() { function PlayBar() {
let [playing, setPlaying] = useState('play'); let [playing, setPlaying] = useState('play');
return ( return (
<section id="playBar" className="playBar"> <section id="playBar" className="playBar">
<div className="topHalf"> <div className="topHalf">
@ -187,7 +226,7 @@ interface NowPlayingProps {
} }
function NowPlaying({ title, artist, album, artwork }: NowPlayingProps) { function NowPlaying({ title, artist, album, artwork }: NowPlayingProps) {
console.log(convertFileSrc("abc")); // console.log(convertFileSrc("abc"));
return ( return (
<section className="nowPlaying"> <section className="nowPlaying">
@ -206,3 +245,14 @@ function Queue() {
</section> </section>
) )
} }
interface LocalImageProps {
// setNowPlaying: React.Dispatch<React.SetStateAction<JSX.Element>>,
// artwork: JSX.Element,
// setArtwork: React.Dispatch<React.SetStateAction<JSX.Element>>,
payload: any
}
function LocalImage({ payload }: LocalImageProps) {
;
}