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
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",
|
||||
"version": "0.0.3",
|
||||
"main": "index.js",
|
||||
"author": "KR Tirtho",
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "webpack --mode=production",
|
||||
"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",
|
||||
"start": "cd dist && qode index.js",
|
||||
"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\"",
|
||||
"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",
|
||||
"debug": "cd dist && qode --inspect index.js",
|
||||
"debug:watch": "nodemon -w dist -e js -x \"npm run debug\"",
|
||||
"pack": "nodegui-packer -p ./dist",
|
||||
"pack-deb": "node scripts/build-deb.js",
|
||||
"pack-win32": "powershell.exe -ExecutionPolicy Unrestricted -Command \". '.\\scripts\\build-win32.ps1'\""
|
||||
},
|
||||
"dependencies": {
|
||||
"@nodegui/nodegui": "0.27.0",
|
||||
"@nodegui/react-nodegui": "0.10.0",
|
||||
"axios": "^0.21.1",
|
||||
"base64url": "^3.0.1",
|
||||
"chalk": "^4.1.0",
|
||||
"color": "^3.1.3",
|
||||
"dotenv": "^8.2.0",
|
||||
"du": "^1.0.0",
|
||||
"express": "^4.17.1",
|
||||
"html-to-text": "^7.0.0",
|
||||
"is-url": "^1.2.4",
|
||||
"jimp": "^0.16.1",
|
||||
"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-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",
|
||||
"youtubei": "^0.0.1-rc.27",
|
||||
"ytdl-core": "^4.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nodegui/devtools": "^1.0.1",
|
||||
"@nodegui/packer": "^1.4.1",
|
||||
"@types/color": "^3.0.1",
|
||||
"@types/du": "^1.0.0",
|
||||
"@types/express": "^4.17.11",
|
||||
"@types/html-to-text": "^6.0.0",
|
||||
"@types/is-url": "^1.2.28",
|
||||
"@types/node": "^14.11.1",
|
||||
"@types/node-localstorage": "^1.3.0",
|
||||
"@types/react": "^16.9.49",
|
||||
"@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",
|
||||
"esbuild": "^0.12.8",
|
||||
"esbuild-loader": "^2.13.1",
|
||||
"eslint": "^7.28.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-import": "^2.23.4",
|
||||
"eslint-plugin-jsx-a11y": "^6.4.1",
|
||||
"eslint-plugin-prettier": "^3.4.0",
|
||||
"eslint-plugin-react": "^7.24.0",
|
||||
"eslint-plugin-react-hooks": "^4.2.0",
|
||||
"file-loader": "^6.2.0",
|
||||
"fork-ts-checker-webpack-plugin": "^6.2.0",
|
||||
"native-addon-loader": "^2.0.1",
|
||||
"nodemon": "^2.0.7",
|
||||
"prettier": "^2.3.1",
|
||||
"typescript": "^4.2.3",
|
||||
"webpack": "^5.27.0",
|
||||
"webpack-cli": "^4.4.0"
|
||||
}
|
||||
"name": "spotube",
|
||||
"version": "0.0.3",
|
||||
"main": "index.js",
|
||||
"author": "KR Tirtho",
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "webpack --mode=production",
|
||||
"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",
|
||||
"start": "cd dist && qode index.js",
|
||||
"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\"",
|
||||
"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",
|
||||
"debug": "cd dist && qode --inspect index.js",
|
||||
"debug:watch": "nodemon -w dist -e js -x \"npm run debug\"",
|
||||
"pack": "nodegui-packer -p ./dist",
|
||||
"pack-deb": "node scripts/build-deb.js",
|
||||
"pack-win32": "powershell.exe -ExecutionPolicy Unrestricted -Command \". '.\\scripts\\build-win32.ps1'\""
|
||||
},
|
||||
"dependencies": {
|
||||
"@nodegui/nodegui": "0.27.0",
|
||||
"@nodegui/react-nodegui": "0.10.0",
|
||||
"axios": "^0.21.1",
|
||||
"base64url": "^3.0.1",
|
||||
"chalk": "^4.1.0",
|
||||
"color": "^3.1.3",
|
||||
"dotenv": "^8.2.0",
|
||||
"du": "^1.0.0",
|
||||
"express": "^4.17.1",
|
||||
"html-to-text": "^7.0.0",
|
||||
"is-url": "^1.2.4",
|
||||
"jimp": "^0.16.1",
|
||||
"node-localstorage": "^2.1.6",
|
||||
"node-mpv": "^2.0.0-beta.2",
|
||||
"open": "^7.4.2",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-query": "^3.13.0",
|
||||
"react-router": "^5.2.0",
|
||||
"spotify-web-api-node": "^5.0.2",
|
||||
"uuid": "^8.3.2",
|
||||
"winston": "^3.3.3",
|
||||
"youtubei": "^0.0.1-rc.27",
|
||||
"ytdl-core": "^4.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nodegui/devtools": "^1.0.1",
|
||||
"@nodegui/packer": "^1.5.0",
|
||||
"@types/color": "^3.0.1",
|
||||
"@types/du": "^1.0.0",
|
||||
"@types/express": "^4.17.11",
|
||||
"@types/html-to-text": "^6.0.0",
|
||||
"@types/is-url": "^1.2.28",
|
||||
"@types/node": "^14.11.1",
|
||||
"@types/node-localstorage": "^1.3.0",
|
||||
"@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",
|
||||
"clean-webpack-plugin": "^3.0.0",
|
||||
"concurrently": "^6.0.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"esbuild": "^0.12.8",
|
||||
"esbuild-loader": "^2.13.1",
|
||||
"eslint": "^7.28.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-import": "^2.23.4",
|
||||
"eslint-plugin-jsx-a11y": "^6.4.1",
|
||||
"eslint-plugin-prettier": "^3.4.0",
|
||||
"eslint-plugin-react": "^7.24.0",
|
||||
"eslint-plugin-react-hooks": "^4.2.0",
|
||||
"file-loader": "^6.2.0",
|
||||
"fork-ts-checker-webpack-plugin": "^6.2.0",
|
||||
"native-addon-loader": "^2.0.1",
|
||||
"nodemon": "^2.0.7",
|
||||
"prettier": "^2.3.1",
|
||||
"typescript": "^4.2.3",
|
||||
"webpack": "^5.27.0",
|
||||
"webpack-cli": "^4.4.0"
|
||||
}
|
||||
}
|
||||
|
||||
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,125 +250,234 @@ 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}>
|
||||
<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;"
|
||||
: ""
|
||||
return (
|
||||
<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}"}>${
|
||||
currentTrack.name
|
||||
}</a></b> - ${artistsNames[0]} ${
|
||||
artistsNames.length > 1
|
||||
? "feat. " + artistsNames.slice(1).join(", ")
|
||||
: ""
|
||||
}</p>`
|
||||
: "<b>Oh, dear don't waste time</b>"}
|
||||
</Text>
|
||||
{/* player control & progressbar */}
|
||||
<View>
|
||||
{/* progressbar */}
|
||||
<View>
|
||||
{currentTrack && (
|
||||
<ManualLyricDialog open={openLyrics} track={currentTrack} />
|
||||
)}
|
||||
<PlayerProgressBar
|
||||
audioPlayer={audioPlayer}
|
||||
totalDuration={totalDuration}
|
||||
/>
|
||||
</View>
|
||||
<View style="flex-direction: row">
|
||||
<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 }} />
|
||||
</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={{
|
||||
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>
|
||||
},
|
||||
}}
|
||||
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}
|
||||
/>
|
||||
</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