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

Moved from BoxView & GridView to View

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2022-01-03 10:10:26 +06:00
parent 6968d74630
commit ad8b55f1aa
8 changed files with 19015 additions and 19346 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2097
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

10
package.json
View File

@ -36,11 +36,10 @@
"node-localstorage": "^2.1.6", "node-localstorage": "^2.1.6",
"node-mpv": "^2.0.0-beta.2", "node-mpv": "^2.0.0-beta.2",
"open": "^7.4.2", "open": "^7.4.2",
"react": "^16.14.0", "react": "^17.0.2",
"react-dom": "^17.0.1", "react-dom": "^17.0.2",
"react-query": "^3.13.0", "react-query": "^3.13.0",
"react-router": "^5.2.0", "react-router": "^5.2.0",
"scrape-yt": "^1.4.7",
"spotify-web-api-node": "^5.0.2", "spotify-web-api-node": "^5.0.2",
"uuid": "^8.3.2", "uuid": "^8.3.2",
"winston": "^3.3.3", "winston": "^3.3.3",
@ -49,7 +48,7 @@
}, },
"devDependencies": { "devDependencies": {
"@nodegui/devtools": "^1.0.1", "@nodegui/devtools": "^1.0.1",
"@nodegui/packer": "^1.4.1", "@nodegui/packer": "^1.5.0",
"@types/color": "^3.0.1", "@types/color": "^3.0.1",
"@types/du": "^1.0.0", "@types/du": "^1.0.0",
"@types/express": "^4.17.11", "@types/express": "^4.17.11",
@ -57,14 +56,13 @@
"@types/is-url": "^1.2.28", "@types/is-url": "^1.2.28",
"@types/node": "^14.11.1", "@types/node": "^14.11.1",
"@types/node-localstorage": "^1.3.0", "@types/node-localstorage": "^1.3.0",
"@types/react": "^16.9.49", "@types/react": "^17.0.2",
"@types/react-router": "^5.1.11", "@types/react-router": "^5.1.11",
"@types/spotify-web-api-node": "^5.0.0", "@types/spotify-web-api-node": "^5.0.0",
"@types/uuid": "^8.3.0", "@types/uuid": "^8.3.0",
"@types/webpack-env": "^1.15.3", "@types/webpack-env": "^1.15.3",
"@typescript-eslint/eslint-plugin": "^4.27.0", "@typescript-eslint/eslint-plugin": "^4.27.0",
"@typescript-eslint/parser": "^4.27.0", "@typescript-eslint/parser": "^4.27.0",
"@vitejs/plugin-react-refresh": "^1.3.3",
"clean-webpack-plugin": "^3.0.0", "clean-webpack-plugin": "^3.0.0",
"concurrently": "^6.0.0", "concurrently": "^6.0.0",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",

11
src/app.tsx
View File

@ -126,11 +126,12 @@ function RootApp() {
open( open(
spotifyApi.createAuthorizeURL( spotifyApi.createAuthorizeURL(
[ [
"user-library-read", "user-follow-read",
"playlist-read-private",
"user-library-modify", "user-library-modify",
"user-library-read",
"playlist-modify-private", "playlist-modify-private",
"playlist-modify-public", "playlist-modify-public",
"playlist-read-private",
], ],
"xxxyyysssddd", "xxxyyysssddd",
), ),
@ -260,11 +261,9 @@ function RootApp() {
}} }}
> >
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<View <View style="flex: 1; flex-direction: column; align-items: stretch">
style={`flex: 1; flex-direction: 'column'; align-items: 'stretch';`}
>
<Routes /> <Routes />
{isLoggedIn && <Player />} {/* {isLoggedIn && <Player />} */}
</View> </View>
</QueryClientProvider> </QueryClientProvider>
</playerContext.Provider> </playerContext.Provider>

6
src/components/Library.tsx
View File

@ -2,8 +2,8 @@ import { CursorShape } from "@nodegui/nodegui";
import { Button, ScrollArea, Text, View } from "@nodegui/react-nodegui"; import { Button, ScrollArea, Text, View } from "@nodegui/react-nodegui";
import React, { useContext } from "react"; import React, { useContext } from "react";
import { Redirect, Route } from "react-router"; import { Redirect, Route } from "react-router";
import { QueryCacheKeys } from "../conf"; import { QueryCacheKeys } from "conf";
import playerContext from "../context/playerContext"; import playerContext from "context/playerContext";
import useSpotifyInfiniteQuery from "../hooks/useSpotifyInfiniteQuery"; import useSpotifyInfiniteQuery from "../hooks/useSpotifyInfiniteQuery";
import { GenreView } from "./PlaylistGenreView"; import { GenreView } from "./PlaylistGenreView";
import { PlaylistSimpleControls, TrackTableIndex } from "./PlaylistView"; import { PlaylistSimpleControls, TrackTableIndex } from "./PlaylistView";
@ -14,7 +14,7 @@ import { TabMenuItem } from "./TabMenu";
function Library() { function Library() {
return ( return (
<View style="flex: 1; flex-direction: 'column';"> <View style="flex: 1; flex-direction: column">
<Redirect from="/library" to="/library/saved-tracks" /> <Redirect from="/library" to="/library/saved-tracks" />
<View style="max-width: 350px; justify-content: 'space-evenly'"> <View style="max-width: 350px; justify-content: 'space-evenly'">
<TabMenuItem title="Saved Tracks" url="/library/saved-tracks" /> <TabMenuItem title="Saved Tracks" url="/library/saved-tracks" />

191
src/components/Player.tsx
View File

@ -1,13 +1,5 @@
import { Direction, Orientation, QAbstractSliderSignals, QIcon } from "@nodegui/nodegui"; import { Orientation, QAbstractSliderSignals, QIcon } from "@nodegui/nodegui";
import { import { Slider, Text, useEventHandler, View } from "@nodegui/react-nodegui";
BoxView,
GridColumn,
GridRow,
GridView,
Slider,
Text,
useEventHandler,
} from "@nodegui/react-nodegui";
import React, { ReactElement, useContext, useEffect, useState } from "react"; import React, { ReactElement, useContext, useEffect, useState } from "react";
import playerContext, { CurrentPlaylist } from "../context/playerContext"; import playerContext, { CurrentPlaylist } from "../context/playerContext";
import { shuffleArray } from "../helpers/shuffleArray"; import { shuffleArray } from "../helpers/shuffleArray";
@ -258,29 +250,28 @@ function Player(): ReactElement {
} }
const artistsNames = currentTrack?.artists?.map((x) => x.name); const artistsNames = currentTrack?.artists?.map((x) => x.name);
return ( return (
<GridView enabled={!!currentTrack} style="flex: 1; max-height: 120px;"> <View
<GridRow> enabled={!!currentTrack}
<GridColumn width={2}> style="max-height: 120px; flex-direction: row; width:100%; flex: 1"
>
{/* title box */}
<Text wordWrap openExternalLinks> <Text wordWrap openExternalLinks>
{artistsNames && currentTrack {artistsNames && currentTrack
? ` ? `<p><b><a href="${currentYtTrack?.youtube_uri}"}>${
<p><b><a href="${currentYtTrack?.youtube_uri}"}>${
currentTrack.name currentTrack.name
}</a></b> - ${artistsNames[0]} ${ }</a></b> - ${artistsNames[0]} ${
artistsNames.length > 1 artistsNames.length > 1
? "feat. " + artistsNames.slice(1).join(", ") ? "feat. " + artistsNames.slice(1).join(", ")
: "" : ""
}</p> }</p>`
` : "<b>Oh, dear don't waste time</b>"}
: `<b>Oh, dear don't waste time</b>`}
</Text> </Text>
</GridColumn> {/* player control & progressbar */}
<GridColumn width={4}> <View>
<BoxView {/* progressbar */}
direction={Direction.TopToBottom} <View>
style={`max-width: 600px; min-width: 380px;`}
>
{currentTrack && ( {currentTrack && (
<ManualLyricDialog open={openLyrics} track={currentTrack} /> <ManualLyricDialog open={openLyrics} track={currentTrack} />
)} )}
@ -288,8 +279,8 @@ function Player(): ReactElement {
audioPlayer={audioPlayer} audioPlayer={audioPlayer}
totalDuration={totalDuration} totalDuration={totalDuration}
/> />
</View>
<BoxView direction={Direction.LeftToRight}> <View style="flex-direction: row">
<IconButton <IconButton
style={`background-color: ${ style={`background-color: ${
shuffle ? "orange" : "rgba(255, 255, 255, 0.055)" shuffle ? "orange" : "rgba(255, 255, 255, 0.055)"
@ -305,9 +296,7 @@ function Player(): ReactElement {
on={{ clicked: handlePlayPause }} on={{ clicked: handlePlayPause }}
icon={ icon={
new QIcon( new QIcon(
isStopped || isPaused || !currentTrack isStopped || isPaused || !currentTrack ? play : pause,
? play
: pause,
) )
} }
/> />
@ -315,15 +304,11 @@ function Player(): ReactElement {
on={{ clicked: () => prevOrNext(1) }} on={{ clicked: () => prevOrNext(1) }}
icon={new QIcon(forward)} icon={new QIcon(forward)}
/> />
<IconButton <IconButton icon={new QIcon(stop)} on={{ clicked: stopPlayback }} />
icon={new QIcon(stop)} </View>
on={{ clicked: stopPlayback }} </View>
/> {/* track reactions & features */}
</BoxView> <View style="flex-direction: row">
</BoxView>
</GridColumn>
<GridColumn width={2}>
<BoxView>
<IconButton <IconButton
style={ style={
isActiveDownloading() && !isFinishedDownloading() isActiveDownloading() && !isFinishedDownloading()
@ -351,9 +336,7 @@ function Player(): ReactElement {
}} }}
icon={ icon={
new QIcon( new QIcon(
isFavorite(currentTrack?.id ?? "") isFavorite(currentTrack?.id ?? "") ? heart : heartRegular,
? heart
: heartRegular,
) )
} }
/> />
@ -372,11 +355,129 @@ function Player(): ReactElement {
on={volumeHandler} on={volumeHandler}
orientation={Orientation.Horizontal} orientation={Orientation.Horizontal}
/> />
</BoxView> </View>
</GridColumn> </View>
</GridRow>
</GridView>
); );
} }
export default Player; export default Player;
// return (
// <GridView enabled={!!currentTrack} style="flex: 1; max-height: 120px;">
// <GridRow>
// <GridColumn width={2}>
// <Text wordWrap openExternalLinks>
// {artistsNames && currentTrack
// ? `
// <p><b><a href="${currentYtTrack?.youtube_uri}"}>${
// currentTrack.name
// }</a></b> - ${artistsNames[0]} ${
// artistsNames.length > 1
// ? "feat. " + artistsNames.slice(1).join(", ")
// : ""
// }</p>
// `
// : `<b>Oh, dear don't waste time</b>`}
// </Text>
// </GridColumn>
// <GridColumn width={4}>
// <BoxView
// direction={Direction.TopToBottom}
// style={`max-width: 600px; min-width: 380px;`}
// >
// {currentTrack && (
// <ManualLyricDialog open={openLyrics} track={currentTrack} />
// )}
// <PlayerProgressBar
// audioPlayer={audioPlayer}
// totalDuration={totalDuration}
// />
// <BoxView direction={Direction.LeftToRight}>
// <IconButton
// style={`background-color: ${
// shuffle ? "orange" : "rgba(255, 255, 255, 0.055)"
// }`}
// on={{ clicked: () => setShuffle(!shuffle) }}
// icon={new QIcon(shuffleIcon)}
// />
// <IconButton
// on={{ clicked: () => prevOrNext(-1) }}
// icon={new QIcon(backward)}
// />
// <IconButton
// on={{ clicked: handlePlayPause }}
// icon={
// new QIcon(
// isStopped || isPaused || !currentTrack
// ? play
// : pause,
// )
// }
// />
// <IconButton
// on={{ clicked: () => prevOrNext(1) }}
// icon={new QIcon(forward)}
// />
// <IconButton
// icon={new QIcon(stop)}
// on={{ clicked: stopPlayback }}
// />
// </BoxView>
// </BoxView>
// </GridColumn>
// <GridColumn width={2}>
// <BoxView>
// <IconButton
// style={
// isActiveDownloading() && !isFinishedDownloading()
// ? "background-color: green;"
// : ""
// }
// enabled={!!currentYtTrack}
// icon={new QIcon(download)}
// on={{
// clicked() {
// currentYtTrack && addToQueue(currentYtTrack);
// },
// }}
// />
// <IconButton
// on={{
// clicked() {
// if (currentTrack) {
// reactToTrack({
// added_at: Date.now().toString(),
// track: currentTrack,
// });
// }
// },
// }}
// icon={
// new QIcon(
// isFavorite(currentTrack?.id ?? "")
// ? heart
// : heartRegular,
// )
// }
// />
// <IconButton
// style={openLyrics ? "background-color: green;" : ""}
// icon={new QIcon(musicNode)}
// on={{
// clicked: () => currentTrack && setOpenLyrics(!openLyrics),
// }}
// />
// <Slider
// minSize={{ height: 20, width: 80 }}
// maxSize={{ height: 20, width: 100 }}
// hasTracking
// sliderPosition={volume}
// on={volumeHandler}
// orientation={Orientation.Horizontal}
// />
// </BoxView>
// </GridColumn>
// </GridRow>
// </GridView>
// );

16
src/components/PlayerProgressBar.tsx
View File

@ -1,5 +1,5 @@
import { Direction, Orientation, QAbstractSliderSignals } from "@nodegui/nodegui"; import { Orientation, QAbstractSliderSignals } from "@nodegui/nodegui";
import { BoxView, Slider, Text, useEventHandler } from "@nodegui/react-nodegui"; import { Slider, Text, useEventHandler, View } from "@nodegui/react-nodegui";
import NodeMpv from "node-mpv"; import NodeMpv from "node-mpv";
import React, { useContext, useEffect, useState } from "react"; import React, { useContext, useEffect, useState } from "react";
import playerContext from "../context/playerContext"; import playerContext from "../context/playerContext";
@ -56,11 +56,13 @@ function PlayerProgressBar({ audioPlayer, totalDuration }: PlayerProgressBarProp
new Date(trackTime * 1000).toISOString().substr(14, 5) + new Date(trackTime * 1000).toISOString().substr(14, 5) +
"/" + "/" +
new Date(totalDuration * 1000).toISOString().substr(14, 5); new Date(totalDuration * 1000).toISOString().substr(14, 5);
const containerStyle = `
padding: 20px 0px;
flex-direction: row
`;
return ( return (
<BoxView <View style={containerStyle}>
direction={Direction.LeftToRight}
style={`padding: 20px 0px; flex-direction: row;`}
>
<Slider <Slider
enabled={!!currentTrack || trackTime > 0} enabled={!!currentTrack || trackTime > 0}
on={trackSliderEvents} on={trackSliderEvents}
@ -69,7 +71,7 @@ function PlayerProgressBar({ audioPlayer, totalDuration }: PlayerProgressBarProp
orientation={Orientation.Horizontal} orientation={Orientation.Horizontal}
/> />
<Text>{playbackTime}</Text> <Text>{playbackTime}</Text>
</BoxView> </View>
); );
} }

3
tsconfig.json
View File

@ -15,7 +15,8 @@
"incremental": true, "incremental": true,
"downlevelIteration": true, "downlevelIteration": true,
"declaration": true, "declaration": true,
"sourceMap": true "sourceMap": true,
"baseUrl": "src"
}, },
"include": [ "include": [
"**/*" "**/*"

1059
tsconfig.tsbuildinfo
View File

File diff suppressed because it is too large Load Diff