mirror of
https://github.com/KRTirtho/spotube.git
synced 2025-09-13 07:55:18 +00:00
Moved from BoxView & GridView to View
This commit is contained in:
Kingkor Roy Tirtho
parent
6968d74630
commit
ad8b55f1aa
36741
package-lock.json
generated
36741
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
172
package.json
172
package.json
@ -1,89 +1,87 @@
|
|||||||
{
|
{
|
||||||
"name": "spotube",
|
"name": "spotube",
|
||||||
"version": "0.0.3",
|
"version": "0.0.3",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"author": "KR Tirtho",
|
"author": "KR Tirtho",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "webpack --mode=production",
|
"build": "webpack --mode=production",
|
||||||
"dev": "nodemon -w src/ -e ts,tsx -x 'node esbuild.config.mjs'",
|
"dev": "nodemon -w src/ -e ts,tsx -x 'node esbuild.config.mjs'",
|
||||||
"check-types": "nodemon --quiet -e tsx,ts -w src/ -x tsc --noEmit --pretty",
|
"check-types": "nodemon --quiet -e tsx,ts -w src/ -x tsc --noEmit --pretty",
|
||||||
"start": "cd dist && qode index.js",
|
"start": "cd dist && qode index.js",
|
||||||
"start:watch": "nodemon -w dist -e js -x \"npm start\"",
|
"start:watch": "nodemon -w dist -e js -x \"npm start\"",
|
||||||
"start-dev": "concurrently -n \"esbuild,spotube,tsc\" -p \"{name}\" -c \"bgYellow.black.bold,bgGreen.black.bold,bgBlue.black.bold\" -i --default-input-target spotube \"npm run dev\" \"npm run start:watch\" \"npm run check-types\"",
|
"start-dev": "concurrently -n \"esbuild,spotube,tsc\" -p \"{name}\" -c \"bgYellow.black.bold,bgGreen.black.bold,bgBlue.black.bold\" -i --default-input-target spotube \"npm run dev\" \"npm run start:watch\" \"npm run check-types\"",
|
||||||
"debug-dev": "concurrently -n \"esbuild,spotube,tsc\" -p \"{name}\" -c \"bgYellow.black.bold,bgGreen.black.bold,bgBlue.black.bold\" -i --default-input-target spotube \"npm run dev\" \"npm run debug:watch\" \"npm run check-types\"",
|
"debug-dev": "concurrently -n \"esbuild,spotube,tsc\" -p \"{name}\" -c \"bgYellow.black.bold,bgGreen.black.bold,bgBlue.black.bold\" -i --default-input-target spotube \"npm run dev\" \"npm run debug:watch\" \"npm run check-types\"",
|
||||||
"start:trace": "qode ./dist/index.js --trace",
|
"start:trace": "qode ./dist/index.js --trace",
|
||||||
"debug": "cd dist && qode --inspect index.js",
|
"debug": "cd dist && qode --inspect index.js",
|
||||||
"debug:watch": "nodemon -w dist -e js -x \"npm run debug\"",
|
"debug:watch": "nodemon -w dist -e js -x \"npm run debug\"",
|
||||||
"pack": "nodegui-packer -p ./dist",
|
"pack": "nodegui-packer -p ./dist",
|
||||||
"pack-deb": "node scripts/build-deb.js",
|
"pack-deb": "node scripts/build-deb.js",
|
||||||
"pack-win32": "powershell.exe -ExecutionPolicy Unrestricted -Command \". '.\\scripts\\build-win32.ps1'\""
|
"pack-win32": "powershell.exe -ExecutionPolicy Unrestricted -Command \". '.\\scripts\\build-win32.ps1'\""
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nodegui/nodegui": "0.27.0",
|
"@nodegui/nodegui": "0.27.0",
|
||||||
"@nodegui/react-nodegui": "0.10.0",
|
"@nodegui/react-nodegui": "0.10.0",
|
||||||
"axios": "^0.21.1",
|
"axios": "^0.21.1",
|
||||||
"base64url": "^3.0.1",
|
"base64url": "^3.0.1",
|
||||||
"chalk": "^4.1.0",
|
"chalk": "^4.1.0",
|
||||||
"color": "^3.1.3",
|
"color": "^3.1.3",
|
||||||
"dotenv": "^8.2.0",
|
"dotenv": "^8.2.0",
|
||||||
"du": "^1.0.0",
|
"du": "^1.0.0",
|
||||||
"express": "^4.17.1",
|
"express": "^4.17.1",
|
||||||
"html-to-text": "^7.0.0",
|
"html-to-text": "^7.0.0",
|
||||||
"is-url": "^1.2.4",
|
"is-url": "^1.2.4",
|
||||||
"jimp": "^0.16.1",
|
"jimp": "^0.16.1",
|
||||||
"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",
|
"youtubei": "^0.0.1-rc.27",
|
||||||
"youtubei": "^0.0.1-rc.27",
|
"ytdl-core": "^4.5.0"
|
||||||
"ytdl-core": "^4.5.0"
|
},
|
||||||
},
|
"devDependencies": {
|
||||||
"devDependencies": {
|
"@nodegui/devtools": "^1.0.1",
|
||||||
"@nodegui/devtools": "^1.0.1",
|
"@nodegui/packer": "^1.5.0",
|
||||||
"@nodegui/packer": "^1.4.1",
|
"@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",
|
"@types/html-to-text": "^6.0.0",
|
||||||
"@types/html-to-text": "^6.0.0",
|
"@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": "^17.0.2",
|
||||||
"@types/react": "^16.9.49",
|
"@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",
|
"clean-webpack-plugin": "^3.0.0",
|
||||||
"@vitejs/plugin-react-refresh": "^1.3.3",
|
"concurrently": "^6.0.0",
|
||||||
"clean-webpack-plugin": "^3.0.0",
|
"cross-env": "^7.0.3",
|
||||||
"concurrently": "^6.0.0",
|
"esbuild": "^0.12.8",
|
||||||
"cross-env": "^7.0.3",
|
"esbuild-loader": "^2.13.1",
|
||||||
"esbuild": "^0.12.8",
|
"eslint": "^7.28.0",
|
||||||
"esbuild-loader": "^2.13.1",
|
"eslint-config-prettier": "^8.3.0",
|
||||||
"eslint": "^7.28.0",
|
"eslint-plugin-import": "^2.23.4",
|
||||||
"eslint-config-prettier": "^8.3.0",
|
"eslint-plugin-jsx-a11y": "^6.4.1",
|
||||||
"eslint-plugin-import": "^2.23.4",
|
"eslint-plugin-prettier": "^3.4.0",
|
||||||
"eslint-plugin-jsx-a11y": "^6.4.1",
|
"eslint-plugin-react": "^7.24.0",
|
||||||
"eslint-plugin-prettier": "^3.4.0",
|
"eslint-plugin-react-hooks": "^4.2.0",
|
||||||
"eslint-plugin-react": "^7.24.0",
|
"file-loader": "^6.2.0",
|
||||||
"eslint-plugin-react-hooks": "^4.2.0",
|
"fork-ts-checker-webpack-plugin": "^6.2.0",
|
||||||
"file-loader": "^6.2.0",
|
"native-addon-loader": "^2.0.1",
|
||||||
"fork-ts-checker-webpack-plugin": "^6.2.0",
|
"nodemon": "^2.0.7",
|
||||||
"native-addon-loader": "^2.0.1",
|
"prettier": "^2.3.1",
|
||||||
"nodemon": "^2.0.7",
|
"typescript": "^4.2.3",
|
||||||
"prettier": "^2.3.1",
|
"webpack": "^5.27.0",
|
||||||
"typescript": "^4.2.3",
|
"webpack-cli": "^4.4.0"
|
||||||
"webpack": "^5.27.0",
|
}
|
||||||
"webpack-cli": "^4.4.0"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
11
src/app.tsx
11
src/app.tsx
@ -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>
|
||||||
|
|||||||
@ -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" />
|
||||||
|
|||||||
@ -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,125 +250,234 @@ function Player(): ReactElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const artistsNames = currentTrack?.artists?.map((x) => x.name);
|
const artistsNames = currentTrack?.artists?.map((x) => x.name);
|
||||||
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}>
|
return (
|
||||||
<IconButton
|
<View
|
||||||
style={`background-color: ${
|
enabled={!!currentTrack}
|
||||||
shuffle ? "orange" : "rgba(255, 255, 255, 0.055)"
|
style="max-height: 120px; flex-direction: row; width:100%; flex: 1"
|
||||||
}`}
|
>
|
||||||
on={{ clicked: () => setShuffle(!shuffle) }}
|
{/* title box */}
|
||||||
icon={new QIcon(shuffleIcon)}
|
<Text wordWrap openExternalLinks>
|
||||||
/>
|
{artistsNames && currentTrack
|
||||||
<IconButton
|
? `<p><b><a href="${currentYtTrack?.youtube_uri}"}>${
|
||||||
on={{ clicked: () => prevOrNext(-1) }}
|
currentTrack.name
|
||||||
icon={new QIcon(backward)}
|
}</a></b> - ${artistsNames[0]} ${
|
||||||
/>
|
artistsNames.length > 1
|
||||||
<IconButton
|
? "feat. " + artistsNames.slice(1).join(", ")
|
||||||
on={{ clicked: handlePlayPause }}
|
: ""
|
||||||
icon={
|
}</p>`
|
||||||
new QIcon(
|
: "<b>Oh, dear don't waste time</b>"}
|
||||||
isStopped || isPaused || !currentTrack
|
</Text>
|
||||||
? play
|
{/* player control & progressbar */}
|
||||||
: pause,
|
<View>
|
||||||
)
|
{/* progressbar */}
|
||||||
}
|
<View>
|
||||||
/>
|
{currentTrack && (
|
||||||
<IconButton
|
<ManualLyricDialog open={openLyrics} track={currentTrack} />
|
||||||
on={{ clicked: () => prevOrNext(1) }}
|
)}
|
||||||
icon={new QIcon(forward)}
|
<PlayerProgressBar
|
||||||
/>
|
audioPlayer={audioPlayer}
|
||||||
<IconButton
|
totalDuration={totalDuration}
|
||||||
icon={new QIcon(stop)}
|
/>
|
||||||
on={{ clicked: stopPlayback }}
|
</View>
|
||||||
/>
|
<View style="flex-direction: row">
|
||||||
</BoxView>
|
<IconButton
|
||||||
</BoxView>
|
style={`background-color: ${
|
||||||
</GridColumn>
|
shuffle ? "orange" : "rgba(255, 255, 255, 0.055)"
|
||||||
<GridColumn width={2}>
|
}`}
|
||||||
<BoxView>
|
on={{ clicked: () => setShuffle(!shuffle) }}
|
||||||
<IconButton
|
icon={new QIcon(shuffleIcon)}
|
||||||
style={
|
/>
|
||||||
isActiveDownloading() && !isFinishedDownloading()
|
<IconButton
|
||||||
? "background-color: green;"
|
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 }} />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
{/* track reactions & features */}
|
||||||
|
<View style="flex-direction: row">
|
||||||
|
<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,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
enabled={!!currentYtTrack}
|
},
|
||||||
icon={new QIcon(download)}
|
}}
|
||||||
on={{
|
icon={
|
||||||
clicked() {
|
new QIcon(
|
||||||
currentYtTrack && addToQueue(currentYtTrack);
|
isFavorite(currentTrack?.id ?? "") ? heart : heartRegular,
|
||||||
},
|
)
|
||||||
}}
|
}
|
||||||
/>
|
/>
|
||||||
<IconButton
|
<IconButton
|
||||||
on={{
|
style={openLyrics ? "background-color: green;" : ""}
|
||||||
clicked() {
|
icon={new QIcon(musicNode)}
|
||||||
if (currentTrack) {
|
on={{
|
||||||
reactToTrack({
|
clicked: () => currentTrack && setOpenLyrics(!openLyrics),
|
||||||
added_at: Date.now().toString(),
|
}}
|
||||||
track: currentTrack,
|
/>
|
||||||
});
|
<Slider
|
||||||
}
|
minSize={{ height: 20, width: 80 }}
|
||||||
},
|
maxSize={{ height: 20, width: 100 }}
|
||||||
}}
|
hasTracking
|
||||||
icon={
|
sliderPosition={volume}
|
||||||
new QIcon(
|
on={volumeHandler}
|
||||||
isFavorite(currentTrack?.id ?? "")
|
orientation={Orientation.Horizontal}
|
||||||
? heart
|
/>
|
||||||
: heartRegular,
|
</View>
|
||||||
)
|
</View>
|
||||||
}
|
|
||||||
/>
|
|
||||||
<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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
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>
|
||||||
|
// );
|
||||||
|
|||||||
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -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
1059
tsconfig.tsbuildinfo
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user