marco/yt-dlp-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

converted dir tree

Browse Source
This commit is contained in:
marcobaobao
2023-01-11 23:19:37 +01:00
parent 4d4582b3f7
commit 4c7faa1b46
14 changed files with 229 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/App.tsx
View File

@@ -23,18 +23,16 @@ import {
BrowserRouter as Router, Link, Route,
Routes
} from 'react-router-dom';
import { io } from "socket.io-client";
import ArchivedDownloads from "./Archived";
import { AppBar } from "./components/AppBar";
import { Drawer } from "./components/Drawer";
import Home from "./Home";
import Settings from "./Settings";
import { RootState, store } from './stores/store';
import { getWebSocketEndpoint } from "./utils";
import { formatGiB, getWebSocketEndpoint } from "./utils";
function AppContent() {
const [open, setOpen] = useState(false);
const [freeDiskSpace, setFreeDiskSpace] = useState('');
const settings = useSelector((state: RootState) => state.settings)
const status = useSelector((state: RootState) => state.status)
@@ -58,11 +56,6 @@ function AppContent() {
setOpen(!open);
};
/* Get disk free space */
useEffect(() => {
}, [])
return (
<ThemeProvider theme={theme}>
<Router>
@@ -96,14 +89,14 @@ function AppContent() {
yt-dlp WebUI
</Typography>
{
freeDiskSpace ?
status.freeSpace ?
<div style={{
display: 'flex',
alignItems: 'center',
flexWrap: 'wrap',
}}>
<Storage />
<span>&nbsp;{freeDiskSpace}&nbsp;</span>
<span>&nbsp;{formatGiB(status.freeSpace)}&nbsp;</span>
</div>
: null
}
@@ -145,20 +138,6 @@ function AppContent() {
<ListItemText primary="Home" />
</ListItemButton>
</Link>
{/* Next release: list downloaded files */}
{/* <Link to={'/downloaded'} style={
{
textDecoration: 'none',
color: mode === 'dark' ? '#ffffff' : '#000000DE'
}
}>
<ListItemButton disabled={status.downloading}>
<ListItemIcon>
<Download />
</ListItemIcon>
<ListItemText primary="Downloaded" />
</ListItemButton>
</Link> */}
<Link to={'/settings'} style={
{
textDecoration: 'none',

29
frontend/src/Home.tsx
View File

@@ -24,7 +24,7 @@ import { useDispatch, useSelector } from "react-redux";
import { CliArguments } from "./classes";
import { StackableResult } from "./components/StackableResult";
import { serverStates } from "./events";
import { connected } from "./features/status/statusSlice";
import { connected, setFreeSpace } from "./features/status/statusSlice";
import { I18nBuilder } from "./i18n";
import { IDLMetadata, IMessage } from "./interfaces";
import { RPCClient } from "./rpcClient";
@@ -73,10 +73,6 @@ export default function Home({ socket }: Props) {
useEffect(() => {
socket.onopen = () => {
dispatch(connected())
console.log('oke')
socket.send('fetch-jobs')
socket.send('disk-space')
socket.send('retrieve-jobs')
}
}, [])
@@ -85,6 +81,11 @@ export default function Home({ socket }: Props) {
return () => clearInterval(interval)
}, [])
useEffect(() => {
client.freeSpace()
.then(bytes => dispatch(setFreeSpace(bytes.result)))
}, [])
useEffect(() => {
socket.onmessage = (event) => {
const res = client.decode(event.data)
@@ -106,10 +107,9 @@ export default function Home({ socket }: Props) {
}, [])
useEffect(() => {
fetch(`${window.location.protocol}//${settings.serverAddr}:${settings.serverPort}/tree`)
.then(res => res.json())
client.directoryTree()
.then(data => {
setAvailableDownloadPaths(data.flat)
setAvailableDownloadPaths(data.result)
})
}, [])
@@ -150,10 +150,15 @@ export default function Home({ socket }: Props) {
setPickedVideoFormat('')
setPickedBestFormat('')
setTimeout(() => {
resetInput()
setShowBackdrop(true)
}, 250)
setShowBackdrop(true)
client.formats(url)
?.then(formats => {
console.log(formats)
setDownloadFormats(formats.result)
setShowBackdrop(false)
resetInput()
})
}
/**

124
frontend/src/components/StackableResult.tsx
View File

@@ -4,73 +4,73 @@ import { IMessage } from "../interfaces";
import { ellipsis } from "../utils";
type Props = {
title: string,
thumbnail: string,
resolution: string
percentage: string,
size: number,
speed: number,
stopCallback: VoidFunction,
title: string,
thumbnail: string,
resolution: string
percentage: string,
size: number,
speed: number,
stopCallback: VoidFunction,
}
export function StackableResult({
title,
thumbnail,
resolution,
percentage,
speed,
size,
stopCallback
title,
thumbnail,
resolution,
percentage,
speed,
size,
stopCallback
}: Props) {
const guessResolution = (xByY: string): any => {
if (!xByY) return null;
if (xByY.includes('4320')) return (<EightK color="primary" />);
if (xByY.includes('2160')) return (<FourK color="primary" />);
if (xByY.includes('1080')) return (<Hd color="primary" />);
if (xByY.includes('720')) return (<Sd color="primary" />);
return null;
}
const guessResolution = (xByY: string): any => {
if (!xByY) return null;
if (xByY.includes('4320')) return (<EightK color="primary" />);
if (xByY.includes('2160')) return (<FourK color="primary" />);
if (xByY.includes('1080')) return (<Hd color="primary" />);
if (xByY.includes('720')) return (<Sd color="primary" />);
return null;
}
const percentageToNumber = () => Number(percentage.replace('%', ''))
const percentageToNumber = () => Number(percentage.replace('%', ''))
const roundMB = (bytes: number) => `${(bytes / 1_000_000).toFixed(2)}MiB`
const roundMB = (bytes: number) => `${(bytes / 1_000_000).toFixed(2)}MiB`
return (
<Card>
<CardActionArea>
{thumbnail !== '' ?
<CardMedia
component="img"
height={180}
image={thumbnail}
/> :
<Skeleton variant="rectangular" height={180} />
}
<CardContent>
{title !== '' ?
<Typography gutterBottom variant="h6" component="div">
{ellipsis(title, 54)}
</Typography> :
<Skeleton />
}
<Stack direction="row" spacing={1} py={2}>
<Chip label={'Downloading'} color="primary" />
<Typography>{percentage}</Typography>
<Typography>{speed}</Typography>
<Typography>{roundMB(size ?? 0)}</Typography>
{guessResolution(resolution)}
</Stack>
{percentage ?
<LinearProgress variant="determinate" value={percentageToNumber()} /> :
null
}
</CardContent>
</CardActionArea>
<CardActions>
<Button variant="contained" size="small" color="primary" onClick={stopCallback}>
Stop
</Button>
</CardActions>
</Card>
)
return (
<Card>
<CardActionArea>
{thumbnail !== '' ?
<CardMedia
component="img"
height={180}
image={thumbnail}
/> :
<Skeleton variant="rectangular" height={180} />
}
<CardContent>
{title !== '' ?
<Typography gutterBottom variant="h6" component="div">
{ellipsis(title, 54)}
</Typography> :
<Skeleton />
}
<Stack direction="row" spacing={1} py={2}>
<Chip label={'Downloading'} color="primary" />
<Typography>{percentage}</Typography>
<Typography>{speed}</Typography>
<Typography>{roundMB(size ?? 0)}</Typography>
{guessResolution(resolution)}
</Stack>
{percentage ?
<LinearProgress variant="determinate" value={percentageToNumber()} /> :
null
}
</CardContent>
</CardActionArea>
<CardActions>
<Button variant="contained" size="small" color="primary" onClick={stopCallback}>
Stop
</Button>
</CardActions>
</Card>
)
}

33
frontend/src/features/status/statusSlice.ts
View File

@@ -1,30 +1,47 @@
import { createSlice } from "@reduxjs/toolkit"
import { createSlice, PayloadAction } from "@reduxjs/toolkit"
export interface StatusState {
connected: boolean,
updated: boolean,
downloading: boolean,
freeSpace: number,
}
const initialState: StatusState = {
connected: false,
updated: false,
downloading: false,
freeSpace: 0,
}
export const statusSlice = createSlice({
name: 'status',
initialState,
reducers: {
connected: (state) => { state.connected = true },
disconnected: (state) => { state.connected = false },
updated: (state) => { state.updated = true },
alreadyUpdated: (state) => { state.updated = false },
downloading: (state) => { state.downloading = true },
finished: (state) => { state.downloading = false },
connected: (state) => {
state.connected = true
},
disconnected: (state) => {
state.connected = false
},
updated: (state) => {
state.updated = true
},
alreadyUpdated: (state) => {
state.updated = false
},
downloading: (state) => {
state.downloading = true
},
finished: (state) => {
state.downloading = false
},
setFreeSpace: (state, action: PayloadAction<number>) => {
state.freeSpace = action.payload
}
}
})
export const { connected, disconnected, updated, alreadyUpdated, downloading, finished } = statusSlice.actions
export const { connected, disconnected, updated, alreadyUpdated, downloading, finished, setFreeSpace } = statusSlice.actions
export default statusSlice.reducer

18
frontend/src/rpcClient.ts
View File

@@ -1,6 +1,8 @@
import type { RPCRequest, RPCResponse } from "./types"
import type { IDLMetadata } from './interfaces'
import { getHttpRPCEndpoint } from './utils'
export class RPCClient {
private socket: WebSocket
private seq: number
@@ -20,7 +22,7 @@ export class RPCClient {
private sendHTTP<T>(req: RPCRequest) {
return new Promise<RPCResponse<T>>((resolve, reject) => {
fetch('/rpc-http', {
fetch(getHttpRPCEndpoint(), {
method: 'POST',
body: JSON.stringify(req)
})
@@ -75,6 +77,20 @@ export class RPCClient {
})
}
public freeSpace() {
return this.sendHTTP<number>({
method: 'Service.FreeSpace',
params: [],
})
}
public directoryTree() {
return this.sendHTTP<string[]>({
method: 'Service.DirectoryTree',
params: [],
})
}
public decode(data: any): RPCResponse<any> {
return JSON.parse(data)
}

1
frontend/src/types.d.ts vendored
View File

@@ -5,6 +5,7 @@ export type RPCMethods =
| "Service.KillAll"
| "Service.FreeSpace"
| "Service.Formats"
| "Service.DirectoryTree"
export type RPCRequest = {
method: RPCMethods,

4
frontend/src/utils.ts
View File

@@ -112,3 +112,7 @@ export function getWebSocketEndpoint() {
export function getHttpRPCEndpoint() {
return `${window.location.protocol}//${localStorage.getItem('server-addr') || window.location.hostname}:${localStorage.getItem('server-port') || window.location.port}/http-rpc`
}
export function formatGiB(bytes: number) {
return `${(bytes / 1_000_000_000).toFixed(0)}GiB`
}

1
package.json
View File

@@ -28,6 +28,7 @@
"koa-router": "^10.1.1",
"koa-static": "^5.0.0",
"mime-types": "^2.1.35",
"radash": "^10.6.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.1",

7
pnpm-lock.yaml generated
View File

@@ -24,6 +24,7 @@ specifiers:
mime-types: ^2.1.35
path-browserify: ^1.0.1
process: ^0.11.10
radash: ^10.6.0
react: ^18.2.0
react-dom: ^18.2.0
react-redux: ^8.0.1
@@ -46,6 +47,7 @@ dependencies:
koa-router: 10.1.1
koa-static: 5.0.0
mime-types: 2.1.35
radash: 10.6.0
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
react-redux: 8.0.4_5uumaiclxbdbzaqafclbf6maf4
@@ -1830,6 +1832,11 @@ packages:
react-is: 16.13.1
dev: false
/radash/10.6.0:
resolution: {integrity: sha512-L0PD+kBVaPGxn0UO9yVLJUKUkuu7bLqroZbieecPUGuSEtByCtMedDSyw+arA8pnLtZduYTgHnMjRfN90gozpQ==}
engines: {node: '>=14.18.0'}
dev: false
/react-dom/18.2.0_react@18.2.0:
resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
peerDependencies:

37
server/internal/stack.go Normal file
View File

@@ -0,0 +1,37 @@
package internal
type Node[T any] struct {
Value T
}
type Stack[T any] struct {
Nodes []*Node[T]
count int
}
func (s *Stack[T]) Push(n *Node[T]) {
if s.count >= len(s.Nodes) {
Nodes := make([]*Node[T], len(s.Nodes)*2)
copy(Nodes, s.Nodes)
s.Nodes = Nodes
}
s.Nodes[s.count] = n
s.count++
}
func (s *Stack[T]) Pop() *Node[T] {
if s.count == 0 {
return nil
}
node := s.Nodes[s.count-1]
s.count--
return node
}
func (s *Stack[T]) IsEmpty() bool {
return s.count == 0
}
func (s *Stack[T]) IsNotEmpty() bool {
return s.count != 0
}

5
server/process.go
View File

@@ -157,7 +157,12 @@ func (p *Process) GetFormatsSync() (DownloadFormats, error) {
cmd.Wait()
info := DownloadFormats{URL: p.url}
best := Format{}
json.Unmarshal(stdout, &info)
json.Unmarshal(stdout, &best)
info.Best = best
return info, nil
}

3
server/server.go
View File

@@ -10,6 +10,7 @@ import (
"net/rpc"
"github.com/gofiber/fiber/v2"
"github.com/gofiber/fiber/v2/middleware/cors"
"github.com/gofiber/fiber/v2/middleware/filesystem"
"github.com/gofiber/websocket/v2"
)
@@ -29,6 +30,8 @@ func RunBlocking(ctx context.Context) {
app := fiber.New()
app.Use(cors.New())
app.Use("/", filesystem.New(filesystem.Config{
Root: http.FS(fe),
}))

6
server/service.go
View File

@@ -84,3 +84,9 @@ func (t *Service) FreeSpace(args NoArgs, free *uint64) error {
*free = freeSpace
return err
}
func (t *Service) DirectoryTree(args NoArgs, tree *[]string) error {
dfsTree, err := sys.DirectoryTree("downloads")
*tree = *dfsTree
return err
}

41
server/sys/fs.go
View File

@@ -2,7 +2,9 @@ package sys
import (
"os"
"path/filepath"
"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
"golang.org/x/sys/unix"
)
@@ -18,3 +20,42 @@ func FreeSpace() (uint64, error) {
unix.Statfs(wd+"/downloads", &stat)
return (stat.Bavail * uint64(stat.Bsize)), nil
}
func DirectoryTree(rootPath string) (*[]string, error) {
type Node struct {
path string
children []Node
}
stack := internal.Stack[Node]{
Nodes: make([]*internal.Node[Node], 5),
}
flattened := make([]string, 0)
root := Node{path: rootPath}
stack.Push(&internal.Node[Node]{
Value: root,
})
flattened = append(flattened, rootPath)
for stack.IsNotEmpty() {
current := stack.Pop().Value
children, err := os.ReadDir(current.path)
if err != nil {
return nil, err
}
for _, entry := range children {
childPath := filepath.Join(current.path, entry.Name())
childNode := Node{path: childPath}
if entry.IsDir() {
current.children = append(current.children, childNode)
stack.Push(&internal.Node[Node]{
Value: childNode,
})
flattened = append(flattened, childNode.path)
}
}
}
return &flattened, nil
}