kitty/spotube
1
0
Fork 0
mirror of https://github.com/KRTirtho/spotube.git synced 2025-09-14 16:25:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

added retry button for ManualLyricDialog

Browse Source
This commit is contained in:
KRTirtho 2021-05-08 00:04:16 +06:00
parent 19457cdd57
commit b878c74dc4
2 changed files with 79 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/ManualLyricDialog.tsx
View File

@ -1,23 +1,38 @@
import { FlexLayout, QDialog, QLabel, QScrollArea, QWidget, TextFormat } from "@nodegui/nodegui"; import { FlexLayout, QDialog, QLabel, QPushButton, QScrollArea, QWidget, TextFormat } from "@nodegui/nodegui";
import React, { PropsWithChildren, useEffect, useState } from "react"; import React, { PropsWithChildren, useEffect, useState } from "react";
import showError from "../helpers/showError"; import showError from "../helpers/showError";
import fetchLyrics from "../helpers/fetchLyrics"; import fetchLyrics from "../helpers/fetchLyrics";
interface ManualLyricDialogProps extends PropsWithChildren<{}> { interface ManualLyricDialogProps extends PropsWithChildren<{}> {
open: boolean; open: boolean;
onClose?: (closed:boolean) => void; onClose?: (closed: boolean) => void;
track: SpotifyApi.TrackObjectSimplified | SpotifyApi.TrackObjectFull; track: SpotifyApi.TrackObjectSimplified | SpotifyApi.TrackObjectFull;
} }
function ManualLyricDialog({ open, track, onClose }: ManualLyricDialogProps) { function ManualLyricDialog({ open, track, onClose }: ManualLyricDialogProps) {
const dialog = new QDialog(); const dialog = new QDialog();
const areaContainer = new QWidget(); const areaContainer = new QWidget();
const retryButton = new QPushButton();
const scrollArea = new QScrollArea(); const scrollArea = new QScrollArea();
const titleLabel = new QLabel(); const titleLabel = new QLabel();
const lyricLabel = new QLabel(); const lyricLabel = new QLabel();
const [lyricNotFound, setLyricNotFound] = useState<boolean>(false);
const [lyrics, setLyrics] = useState<string>(""); const [lyrics, setLyrics] = useState<string>("");
const artists = track.artists.map((artist) => artist.name).join(", "); const artists = track.artists.map((artist) => artist.name).join(", ");
async function handleBtnClick() {
try {
const lyrics = await fetchLyrics(artists, track.name);
console.log('lyrics:', lyrics)
setLyrics(lyrics);
setLyricNotFound(lyrics === "Not Found");
} catch (error) {
showError(error, `[Finding lyrics for ${track.name} failed]: `);
setLyrics("No lyrics found, rare track :)");
setLyricNotFound(true);
}
}
useEffect(() => { useEffect(() => {
// title label // title label
titleLabel.setText(` titleLabel.setText(`
@ -34,27 +49,40 @@ function ManualLyricDialog({ open, track, onClose }: ManualLyricDialogProps) {
areaContainer.setInlineStyle("flex: 1; flex-direction: 'column'; padding: 10px;"); areaContainer.setInlineStyle("flex: 1; flex-direction: 'column'; padding: 10px;");
areaContainer.layout?.addWidget(titleLabel); areaContainer.layout?.addWidget(titleLabel);
areaContainer.layout?.addWidget(lyricLabel); areaContainer.layout?.addWidget(lyricLabel);
areaContainer.layout?.addWidget(retryButton);
// scroll area // scroll area
scrollArea.setInlineStyle("flex: 1;"); scrollArea.setInlineStyle("flex: 1;");
scrollArea.setWidget(areaContainer); scrollArea.setWidget(areaContainer);
// reload button
retryButton.setText("Retry");
retryButton.addEventListener("clicked", handleBtnClick);
// dialog // dialog
dialog.setWindowTitle("Lyrics"); dialog.setWindowTitle("Lyrics");
dialog.setLayout(new FlexLayout()); dialog.setLayout(new FlexLayout());
dialog.layout?.addWidget(scrollArea); dialog.layout?.addWidget(scrollArea);
open ? dialog.open() : dialog.close(); open ? dialog.open() : dialog.close();
open && fetchLyrics(artists, track.name) open &&
.then((lyrics: string) => { fetchLyrics(artists, track.name)
setLyrics(lyrics); .then((lyrics: string) => {
}) setLyrics(lyrics);
.catch((e: Error) => { setLyricNotFound(lyrics === "Not Found");
showError(e, `[Finding lyrics for ${track.name} failed]: `); })
setLyrics("No lyrics found, rare track :)"); .catch((e: Error) => {
}); showError(e, `[Finding lyrics for ${track.name} failed]: `);
setLyrics("No lyrics found, rare track :)");
setLyricNotFound(true);
});
return () => { return () => {
dialog.hide() retryButton.removeEventListener("clicked", handleBtnClick);
} dialog.hide();
};
}, [open, track, lyrics]); }, [open, track, lyrics]);
useEffect(() => {
retryButton.setEnabled(!lyricNotFound);
}, [lyricNotFound]);
return <></>; return <></>;
} }

70
src/helpers/fetchLyrics.ts
View File

@ -1,41 +1,49 @@
import axios from "axios";
import axios from 'axios'; import htmlToText from "html-to-text";
import htmlToText from 'html-to-text'; import showError from "./showError";
const delim1 = '</div></div></div></div><div class="hwc"><div class="BNeawe tAd8D AP7Wnd"><div><div class="BNeawe tAd8D AP7Wnd">'; const delim1 = '</div></div></div></div><div class="hwc"><div class="BNeawe tAd8D AP7Wnd"><div><div class="BNeawe tAd8D AP7Wnd">';
const delim2 = '</div></div></div></div></div><div><span class="hwc"><div class="BNeawe uEec3 AP7Wnd">'; const delim2 = '</div></div></div></div></div><div><span class="hwc"><div class="BNeawe uEec3 AP7Wnd">';
const url = "https://www.google.com/search?q="; const url = "https://www.google.com/search?q=";
export default async function fetchLyrics(artists:string, title: string) { export default async function fetchLyrics(artists: string, title: string) {
let lyrics; let lyrics;
try {
console.log("[lyric query]:", `${url}${encodeURIComponent(title + " " + artists)}+lyrics`);
lyrics = (await axios.get<string>(`${url}${encodeURIComponent(title + " " + artists)}+lyrics`, { responseType: "text" })).data;
[, lyrics] = lyrics.split(delim1);
[lyrics] = lyrics.split(delim2);
} catch (err) {
showError(err, "[Lyric Query Error]: ");
try { try {
lyrics = (await axios.get<string>(`${url}${encodeURIComponent(title + " " + artists)}+lyrics`, {responseType: "text"})).data; console.log("[lyric query]:", `${url}${encodeURIComponent(title + " " + artists)}+song+lyrics`);
lyrics = (await axios.get<string>(`${url}${encodeURIComponent(title + " " + artists)}+song+lyrics`)).data;
[, lyrics] = lyrics.split(delim1);
[lyrics] = lyrics.split(delim2);
} catch (err_1) {
showError(err_1, "[Lyric Query Error]: ");
try {
console.log("[lyric query]:", `${url}${encodeURIComponent(title + " " + artists)}+song`);
lyrics = (await axios.get<string>(`${url}${encodeURIComponent(title + " " + artists)}+song`)).data;
[, lyrics] = lyrics.split(delim1); [, lyrics] = lyrics.split(delim1);
[lyrics] = lyrics.split(delim2); [lyrics] = lyrics.split(delim2);
} catch (m) { } catch (err_2) {
showError(err_2, "[Lyric Query Error]: ");
try { try {
lyrics = (await axios.get<string>(`${url}${encodeURIComponent(title + " " + artists)}+song+lyrics`)).data; console.log("[lyric query]:", `${url}${encodeURIComponent(title + " " + artists)}`);
[, lyrics] = lyrics.split(delim1); lyrics = (await axios.get<string>(`${url}${encodeURIComponent(title + " " + artists)}`)).data;
[lyrics] = lyrics.split(delim2); [, lyrics] = lyrics.split(delim1);
} catch (n) { [lyrics] = lyrics.split(delim2);
try { } catch (err_3) {
lyrics = (await axios.get<string>(`${url}${encodeURIComponent(title + " " + artists)}+song`)).data; showError(err_3, "[Lyric Query Error]: ");
[, lyrics] = lyrics.split(delim1); lyrics = "Not Found";
[lyrics] = lyrics.split(delim2);
} catch (o) {
try {
lyrics = (await axios.get<string>(`${url}${encodeURIComponent(title + " " + artists)}`)).data;
[, lyrics] = lyrics.split(delim1);
[lyrics] = lyrics.split(delim2);
} catch (p) {
lyrics = 'Not Found';
}
}
} }
}
} }
const rets = lyrics.split('\n'); }
let final = ''; const rets = lyrics.split("\n");
for (const ret of rets) { let final = "";
final = `${final}${htmlToText.htmlToText(ret)}\n`; for (const ret of rets) {
} final = `${final}${htmlToText.htmlToText(ret)}\n`;
return final.trim(); }
} return final.trim();
}