mirror of
https://github.com/KRTirtho/spotube.git
synced 2025-09-12 23:45:18 +00:00
Moved from BoxView & GridView to View
This commit is contained in:
Kingkor Roy Tirtho
parent
6968d74630
commit
ad8b55f1aa
2097
package-lock.json
generated
2097
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
10
package.json
10
package.json
@ -36,11 +36,10 @@
|
||||
"node-localstorage": "^2.1.6",
|
||||
"node-mpv": "^2.0.0-beta.2",
|
||||
"open": "^7.4.2",
|
||||
"react": "^16.14.0",
|
||||
"react-dom": "^17.0.1",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-query": "^3.13.0",
|
||||
"react-router": "^5.2.0",
|
||||
"scrape-yt": "^1.4.7",
|
||||
"spotify-web-api-node": "^5.0.2",
|
||||
"uuid": "^8.3.2",
|
||||
"winston": "^3.3.3",
|
||||
@ -49,7 +48,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nodegui/devtools": "^1.0.1",
|
||||
"@nodegui/packer": "^1.4.1",
|
||||
"@nodegui/packer": "^1.5.0",
|
||||
"@types/color": "^3.0.1",
|
||||
"@types/du": "^1.0.0",
|
||||
"@types/express": "^4.17.11",
|
||||
@ -57,14 +56,13 @@
|
||||
"@types/is-url": "^1.2.28",
|
||||
"@types/node": "^14.11.1",
|
||||
"@types/node-localstorage": "^1.3.0",
|
||||
"@types/react": "^16.9.49",
|
||||
"@types/react": "^17.0.2",
|
||||
"@types/react-router": "^5.1.11",
|
||||
"@types/spotify-web-api-node": "^5.0.0",
|
||||
"@types/uuid": "^8.3.0",
|
||||
"@types/webpack-env": "^1.15.3",
|
||||
"@typescript-eslint/eslint-plugin": "^4.27.0",
|
||||
"@typescript-eslint/parser": "^4.27.0",
|
||||
"@vitejs/plugin-react-refresh": "^1.3.3",
|
||||
"clean-webpack-plugin": "^3.0.0",
|
||||
"concurrently": "^6.0.0",
|
||||
"cross-env": "^7.0.3",
|
||||
|
||||
11
src/app.tsx
11
src/app.tsx
@ -126,11 +126,12 @@ function RootApp() {
|
||||
open(
|
||||
spotifyApi.createAuthorizeURL(
|
||||
[
|
||||
"user-library-read",
|
||||
"playlist-read-private",
|
||||
"user-follow-read",
|
||||
"user-library-modify",
|
||||
"user-library-read",
|
||||
"playlist-modify-private",
|
||||
"playlist-modify-public",
|
||||
"playlist-read-private",
|
||||
],
|
||||
"xxxyyysssddd",
|
||||
),
|
||||
@ -260,11 +261,9 @@ function RootApp() {
|
||||
}}
|
||||
>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<View
|
||||
style={`flex: 1; flex-direction: 'column'; align-items: 'stretch';`}
|
||||
>
|
||||
<View style="flex: 1; flex-direction: column; align-items: stretch">
|
||||
<Routes />
|
||||
{isLoggedIn && <Player />}
|
||||
{/* {isLoggedIn && <Player />} */}
|
||||
</View>
|
||||
</QueryClientProvider>
|
||||
</playerContext.Provider>
|
||||
|
||||
@ -2,8 +2,8 @@ import { CursorShape } from "@nodegui/nodegui";
|
||||
import { Button, ScrollArea, Text, View } from "@nodegui/react-nodegui";
|
||||
import React, { useContext } from "react";
|
||||
import { Redirect, Route } from "react-router";
|
||||
import { QueryCacheKeys } from "../conf";
|
||||
import playerContext from "../context/playerContext";
|
||||
import { QueryCacheKeys } from "conf";
|
||||
import playerContext from "context/playerContext";
|
||||
import useSpotifyInfiniteQuery from "../hooks/useSpotifyInfiniteQuery";
|
||||
import { GenreView } from "./PlaylistGenreView";
|
||||
import { PlaylistSimpleControls, TrackTableIndex } from "./PlaylistView";
|
||||
@ -14,7 +14,7 @@ import { TabMenuItem } from "./TabMenu";
|
||||
|
||||
function Library() {
|
||||
return (
|
||||
<View style="flex: 1; flex-direction: 'column';">
|
||||
<View style="flex: 1; flex-direction: column">
|
||||
<Redirect from="/library" to="/library/saved-tracks" />
|
||||
<View style="max-width: 350px; justify-content: 'space-evenly'">
|
||||
<TabMenuItem title="Saved Tracks" url="/library/saved-tracks" />
|
||||
|
||||
@ -1,13 +1,5 @@
|
||||
import { Direction, Orientation, QAbstractSliderSignals, QIcon } from "@nodegui/nodegui";
|
||||
import {
|
||||
BoxView,
|
||||
GridColumn,
|
||||
GridRow,
|
||||
GridView,
|
||||
Slider,
|
||||
Text,
|
||||
useEventHandler,
|
||||
} from "@nodegui/react-nodegui";
|
||||
import { Orientation, QAbstractSliderSignals, QIcon } from "@nodegui/nodegui";
|
||||
import { Slider, Text, useEventHandler, View } from "@nodegui/react-nodegui";
|
||||
import React, { ReactElement, useContext, useEffect, useState } from "react";
|
||||
import playerContext, { CurrentPlaylist } from "../context/playerContext";
|
||||
import { shuffleArray } from "../helpers/shuffleArray";
|
||||
@ -258,29 +250,28 @@ function Player(): ReactElement {
|
||||
}
|
||||
|
||||
const artistsNames = currentTrack?.artists?.map((x) => x.name);
|
||||
|
||||
return (
|
||||
<GridView enabled={!!currentTrack} style="flex: 1; max-height: 120px;">
|
||||
<GridRow>
|
||||
<GridColumn width={2}>
|
||||
<View
|
||||
enabled={!!currentTrack}
|
||||
style="max-height: 120px; flex-direction: row; width:100%; flex: 1"
|
||||
>
|
||||
{/* title box */}
|
||||
<Text wordWrap openExternalLinks>
|
||||
{artistsNames && currentTrack
|
||||
? `
|
||||
<p><b><a href="${currentYtTrack?.youtube_uri}"}>${
|
||||
? `<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>`}
|
||||
}</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;`}
|
||||
>
|
||||
{/* player control & progressbar */}
|
||||
<View>
|
||||
{/* progressbar */}
|
||||
<View>
|
||||
{currentTrack && (
|
||||
<ManualLyricDialog open={openLyrics} track={currentTrack} />
|
||||
)}
|
||||
@ -288,8 +279,8 @@ function Player(): ReactElement {
|
||||
audioPlayer={audioPlayer}
|
||||
totalDuration={totalDuration}
|
||||
/>
|
||||
|
||||
<BoxView direction={Direction.LeftToRight}>
|
||||
</View>
|
||||
<View style="flex-direction: row">
|
||||
<IconButton
|
||||
style={`background-color: ${
|
||||
shuffle ? "orange" : "rgba(255, 255, 255, 0.055)"
|
||||
@ -305,9 +296,7 @@ function Player(): ReactElement {
|
||||
on={{ clicked: handlePlayPause }}
|
||||
icon={
|
||||
new QIcon(
|
||||
isStopped || isPaused || !currentTrack
|
||||
? play
|
||||
: pause,
|
||||
isStopped || isPaused || !currentTrack ? play : pause,
|
||||
)
|
||||
}
|
||||
/>
|
||||
@ -315,15 +304,11 @@ function Player(): ReactElement {
|
||||
on={{ clicked: () => prevOrNext(1) }}
|
||||
icon={new QIcon(forward)}
|
||||
/>
|
||||
<IconButton
|
||||
icon={new QIcon(stop)}
|
||||
on={{ clicked: stopPlayback }}
|
||||
/>
|
||||
</BoxView>
|
||||
</BoxView>
|
||||
</GridColumn>
|
||||
<GridColumn width={2}>
|
||||
<BoxView>
|
||||
<IconButton icon={new QIcon(stop)} on={{ clicked: stopPlayback }} />
|
||||
</View>
|
||||
</View>
|
||||
{/* track reactions & features */}
|
||||
<View style="flex-direction: row">
|
||||
<IconButton
|
||||
style={
|
||||
isActiveDownloading() && !isFinishedDownloading()
|
||||
@ -351,9 +336,7 @@ function Player(): ReactElement {
|
||||
}}
|
||||
icon={
|
||||
new QIcon(
|
||||
isFavorite(currentTrack?.id ?? "")
|
||||
? heart
|
||||
: heartRegular,
|
||||
isFavorite(currentTrack?.id ?? "") ? heart : heartRegular,
|
||||
)
|
||||
}
|
||||
/>
|
||||
@ -372,11 +355,129 @@ function Player(): ReactElement {
|
||||
on={volumeHandler}
|
||||
orientation={Orientation.Horizontal}
|
||||
/>
|
||||
</BoxView>
|
||||
</GridColumn>
|
||||
</GridRow>
|
||||
</GridView>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
// );
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Direction, Orientation, QAbstractSliderSignals } from "@nodegui/nodegui";
|
||||
import { BoxView, Slider, Text, useEventHandler } from "@nodegui/react-nodegui";
|
||||
import { Orientation, QAbstractSliderSignals } from "@nodegui/nodegui";
|
||||
import { Slider, Text, useEventHandler, View } from "@nodegui/react-nodegui";
|
||||
import NodeMpv from "node-mpv";
|
||||
import React, { useContext, useEffect, useState } from "react";
|
||||
import playerContext from "../context/playerContext";
|
||||
@ -56,11 +56,13 @@ function PlayerProgressBar({ audioPlayer, totalDuration }: PlayerProgressBarProp
|
||||
new Date(trackTime * 1000).toISOString().substr(14, 5) +
|
||||
"/" +
|
||||
new Date(totalDuration * 1000).toISOString().substr(14, 5);
|
||||
|
||||
const containerStyle = `
|
||||
padding: 20px 0px;
|
||||
flex-direction: row
|
||||
`;
|
||||
return (
|
||||
<BoxView
|
||||
direction={Direction.LeftToRight}
|
||||
style={`padding: 20px 0px; flex-direction: row;`}
|
||||
>
|
||||
<View style={containerStyle}>
|
||||
<Slider
|
||||
enabled={!!currentTrack || trackTime > 0}
|
||||
on={trackSliderEvents}
|
||||
@ -69,7 +71,7 @@ function PlayerProgressBar({ audioPlayer, totalDuration }: PlayerProgressBarProp
|
||||
orientation={Orientation.Horizontal}
|
||||
/>
|
||||
<Text>{playbackTime}</Text>
|
||||
</BoxView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -15,7 +15,8 @@
|
||||
"incremental": true,
|
||||
"downlevelIteration": true,
|
||||
"declaration": true,
|
||||
"sourceMap": true
|
||||
"sourceMap": true,
|
||||
"baseUrl": "src"
|
||||
},
|
||||
"include": [
|
||||
"**/*"
|
||||
|
||||
1059
tsconfig.tsbuildinfo
1059
tsconfig.tsbuildinfo
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user