最新
This commit is contained in:
parent
677a045a3b
commit
fd0bdd7c12
69
package-lock.json
generated
69
package-lock.json
generated
|
|
@ -16,10 +16,15 @@
|
|||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"axios": "^1.4.0",
|
||||
"hammerjs": "^2.0.8",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-player": "^2.12.0",
|
||||
"react-router-dom": "^6.14.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-swipe-handler": "^1.1.2",
|
||||
"react-swipeable": "^7.0.1",
|
||||
"swipeable": "^1.0.5",
|
||||
"web-vitals": "^2.1.4"
|
||||
}
|
||||
},
|
||||
|
|
@ -8639,6 +8644,14 @@
|
|||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/hammerjs": {
|
||||
"version": "2.0.8",
|
||||
"resolved": "https://registry.npmmirror.com/hammerjs/-/hammerjs-2.0.8.tgz",
|
||||
"integrity": "sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==",
|
||||
"engines": {
|
||||
"node": ">=0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/handle-thing": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/handle-thing/-/handle-thing-2.0.1.tgz",
|
||||
|
|
@ -11572,6 +11585,11 @@
|
|||
"resolved": "https://registry.npmmirror.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
|
||||
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
|
||||
},
|
||||
"node_modules/load-script": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/load-script/-/load-script-1.0.0.tgz",
|
||||
"integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA=="
|
||||
},
|
||||
"node_modules/loader-runner": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/loader-runner/-/loader-runner-4.3.0.tgz",
|
||||
|
|
@ -11728,6 +11746,11 @@
|
|||
"node": ">= 4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/memoize-one": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-5.2.1.tgz",
|
||||
"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
|
||||
},
|
||||
"node_modules/merge-descriptors": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
|
||||
|
|
@ -11916,6 +11939,11 @@
|
|||
"multicast-dns": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/my-logger_nogipx": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/my-logger_nogipx/-/my-logger_nogipx-1.0.2.tgz",
|
||||
"integrity": "sha512-N7pMppVVeliUjuOcmDs7GZNjZgfAkyFdCHS9feCy2wd5pnT1gJ+2ysXG8sXerymZgz/uRKXKv7GrcpwNLppC8Q=="
|
||||
},
|
||||
"node_modules/mz": {
|
||||
"version": "2.7.0",
|
||||
"resolved": "https://registry.npmmirror.com/mz/-/mz-2.7.0.tgz",
|
||||
|
|
@ -13949,11 +13977,31 @@
|
|||
"resolved": "https://registry.npmmirror.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
|
||||
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
|
||||
},
|
||||
"node_modules/react-fast-compare": {
|
||||
"version": "3.2.2",
|
||||
"resolved": "https://registry.npmmirror.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
|
||||
"integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||
},
|
||||
"node_modules/react-player": {
|
||||
"version": "2.12.0",
|
||||
"resolved": "https://registry.npmmirror.com/react-player/-/react-player-2.12.0.tgz",
|
||||
"integrity": "sha512-rymLRz/2GJJD+Wc01S7S+i9pGMFYnNmQibR2gVE3KmHJCBNN8BhPAlOPTGZtn1uKpJ6p4RPLlzPQ1OLreXd8gw==",
|
||||
"dependencies": {
|
||||
"deepmerge": "^4.0.0",
|
||||
"load-script": "^1.0.0",
|
||||
"memoize-one": "^5.1.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-fast-compare": "^3.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmmirror.com/react-refresh/-/react-refresh-0.11.0.tgz",
|
||||
|
|
@ -14064,6 +14112,22 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-swipe-handler": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/react-swipe-handler/-/react-swipe-handler-1.1.2.tgz",
|
||||
"integrity": "sha512-AhXhzeSNTM7B8w71FBNyRBen4zplQgZkaIom48dQwXiGmI5xq+FqnIBZZnWyfDf9wwCYdgu48cgTV83fHYkWiQ==",
|
||||
"dependencies": {
|
||||
"my-logger_nogipx": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/react-swipeable": {
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/react-swipeable/-/react-swipeable-7.0.1.tgz",
|
||||
"integrity": "sha512-RKB17JdQzvECfnVj9yDZsiYn3vH0eyva/ZbrCZXZR0qp66PBRhtg4F9yJcJTWYT5Adadi+x4NoG53BxKHwIYLQ==",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.3 || ^17 || ^18"
|
||||
}
|
||||
},
|
||||
"node_modules/react-transition-group": {
|
||||
"version": "4.4.5",
|
||||
"resolved": "https://registry.npmmirror.com/react-transition-group/-/react-transition-group-4.4.5.tgz",
|
||||
|
|
@ -15317,6 +15381,11 @@
|
|||
"boolbase": "~1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/swipeable": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmmirror.com/swipeable/-/swipeable-1.0.5.tgz",
|
||||
"integrity": "sha512-dM+guhHbjahkwyV7wgMvnhNSKcEd4fHPgi0nPL2lLGqnyqldZNSPUehoVphzC/sKqQoaliri5WYepP+dqROHcw=="
|
||||
},
|
||||
"node_modules/symbol-tree": {
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmmirror.com/symbol-tree/-/symbol-tree-3.2.4.tgz",
|
||||
|
|
|
|||
|
|
@ -11,10 +11,15 @@
|
|||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"axios": "^1.4.0",
|
||||
"hammerjs": "^2.0.8",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-player": "^2.12.0",
|
||||
"react-router-dom": "^6.14.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-swipe-handler": "^1.1.2",
|
||||
"react-swipeable": "^7.0.1",
|
||||
"swipeable": "^1.0.5",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -2,4 +2,7 @@ module server
|
|||
|
||||
go 1.16
|
||||
|
||||
require github.com/gin-gonic/gin v1.6.3
|
||||
require (
|
||||
github.com/gin-gonic/gin v1.6.3
|
||||
github.com/giorgisio/goav v0.1.0 // indirect
|
||||
)
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ github.com/gin-contrib/sse v0.1.0 h1:Y/yl/+YNO8GZSjAhjMsSuLt29uWRFHdHYUb5lYOV9qE
|
|||
github.com/gin-contrib/sse v0.1.0/go.mod h1:RHrZQHXnP2xjPF+u1gW/2HnVO7nvIa9PG3Gm+fLHvGI=
|
||||
github.com/gin-gonic/gin v1.6.3 h1:ahKqKTFpO5KTPHxWZjEdPScmYaGtLo8Y4DMHoEsnp14=
|
||||
github.com/gin-gonic/gin v1.6.3/go.mod h1:75u5sXoLsGZoRN5Sgbi1eraJ4GU3++wFwWzhwvtwp4M=
|
||||
github.com/giorgisio/goav v0.1.0 h1:ZyfG3NfX7PMSimv4ulhmnQJf/XeHpMdGCn+afRmY5Oc=
|
||||
github.com/giorgisio/goav v0.1.0/go.mod h1:RtH8HyxLRLU1iY0pjfhWBKRhnbsnmfoI+FxMwb5bfEo=
|
||||
github.com/go-playground/assert/v2 v2.0.1 h1:MsBgLAaY856+nPRTKrp3/OZK38U/wa0CcBYNjji3q3A=
|
||||
github.com/go-playground/assert/v2 v2.0.1/go.mod h1:VDjEfimB/XKnb+ZQfWdccd7VUvScMdVu0Titje2rxJ4=
|
||||
github.com/go-playground/locales v0.13.0 h1:HyWk6mgj5qFqCT5fjGBuRArbVDfE4hi8+e8ceBS/t7Q=
|
||||
|
|
@ -16,6 +18,8 @@ github.com/go-playground/validator/v10 v10.2.0/go.mod h1:uOYAAleCW8F/7oMFd6aG0GO
|
|||
github.com/golang/protobuf v1.3.3 h1:gyjaxf+svBWX08ZjK86iN9geUJF0H6gp2IRKX6Nf6/I=
|
||||
github.com/golang/protobuf v1.3.3/go.mod h1:vzj43D7+SQXF/4pzW/hwtAqwc6iTitCiVSaWz5lYuqw=
|
||||
github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
|
||||
github.com/gosuri/uilive v0.0.0-20170323041506-ac356e6e42cd/go.mod h1:qkLSc0A5EXSP6B04TrN4oQoxqFI7A8XvoXSlJi8cwk8=
|
||||
github.com/gosuri/uiprogress v0.0.0-20170224063937-d0567a9d84a1/go.mod h1:C1RTYn4Sc7iEyf6j8ft5dyoZ4212h8G1ol9QQluh5+0=
|
||||
github.com/json-iterator/go v1.1.9 h1:9yzud/Ht36ygwatGx56VwCZtlI/2AD15T1X2sjSuGns=
|
||||
github.com/json-iterator/go v1.1.9/go.mod h1:KdQUCv79m/52Kvf8AW2vK1V8akMuk1QjK/uOdHXbAo4=
|
||||
github.com/leodido/go-urn v1.2.0 h1:hpXL4XnriNwQ/ABnpepYM/1vCLWNDfUNts8dX3xTG6Y=
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ package main
|
|||
|
||||
import (
|
||||
"bytes"
|
||||
"fmt"
|
||||
"io/fs"
|
||||
"log"
|
||||
"net/http"
|
||||
|
|
@ -45,15 +44,29 @@ func initMovie() {
|
|||
}
|
||||
|
||||
for key, filename := range movieDict {
|
||||
width := 160
|
||||
height := 120
|
||||
// width := 160
|
||||
// height := 120
|
||||
log.Println(filename)
|
||||
cmd := exec.Command("ffmpeg", "-i", filename, "-vframes", "1", "-s", fmt.Sprintf("%dx%d", width, height), "movie/"+key+".png")
|
||||
|
||||
// cmd := exec.Command("ffmpeg", "-i", filename, "-vframes", "1", "-s", fmt.Sprintf("%dx%d", width, height), "movie/"+key+".png")
|
||||
cmd := exec.Command("ffmpeg",
|
||||
"-i", filename,
|
||||
"-vf", "select='isnan(prev_selected_t)+gte(t-prev_selected_t\\,35)',scale=320:180,tile=3x3",
|
||||
"-frames:v", "1",
|
||||
"movie/"+key+".png",
|
||||
)
|
||||
|
||||
var buffer bytes.Buffer
|
||||
cmd.Stdout = &buffer
|
||||
if cmd.Run() != nil {
|
||||
log.Println(buffer.String())
|
||||
panic("could not generate frame")
|
||||
}
|
||||
|
||||
// err := generateThumbnail(filename, "movie/"+key+".png", width, height)
|
||||
// if err != nil {
|
||||
// panic("could not generate frame")
|
||||
// }
|
||||
}
|
||||
|
||||
filepath.Walk("./movie", func(path string, info fs.FileInfo, err error) error {
|
||||
|
|
|
|||
11
src/App.js
11
src/App.js
|
|
@ -10,14 +10,13 @@ import VuetifyName from './logo.svg';
|
|||
import { BrowserRouter, Route, Routes } from 'react-router-dom';
|
||||
import Main from './Components';
|
||||
import VideoPlayer from './VideoPlayer'; // 导入我们将创建的VideoPlayer组件
|
||||
|
||||
|
||||
import ConfigContext, { config } from './Config';
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
|
||||
|
||||
|
||||
<ConfigContext.Provider value={config}>
|
||||
<BrowserRouter>
|
||||
<div>
|
||||
<AppBar position="static">
|
||||
|
|
@ -25,8 +24,8 @@ const App = () => {
|
|||
<IconButton edge="start" color="inherit" aria-label="menu">
|
||||
<img src={VuetifyLogo} alt="Vuetify Logo" width="40" />
|
||||
</IconButton>
|
||||
<Typography variant="h6" style={{ flexGrow: 1 }}>
|
||||
<img src={VuetifyName} alt="Vuetify Name" width="100" />
|
||||
<Typography variant="h3" style={{ flexGrow: 1 }}>
|
||||
<img src={VuetifyName} alt="Vuetify Name" width="40" />
|
||||
</Typography>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
|
|
@ -38,7 +37,7 @@ const App = () => {
|
|||
</div>
|
||||
</BrowserRouter>
|
||||
|
||||
|
||||
</ConfigContext.Provider>
|
||||
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, useContext } from 'react';
|
||||
import axios from 'axios';
|
||||
import Container from '@mui/material/Container';
|
||||
import Grid from '@mui/material/Grid';
|
||||
|
|
@ -9,12 +9,13 @@ import Typography from '@mui/material/Typography';
|
|||
import Pagination from '@mui/material/Pagination';
|
||||
import { Link } from 'react-router-dom';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import ConfigContext from './Config';
|
||||
|
||||
const config = {
|
||||
Host: 'http://192.168.31.121:4444',
|
||||
};
|
||||
|
||||
|
||||
const Main = () => {
|
||||
const config = useContext(ConfigContext);
|
||||
|
||||
const [pagination, setPagination] = useState({
|
||||
movies: [],
|
||||
page: 1,
|
||||
|
|
@ -24,7 +25,7 @@ const Main = () => {
|
|||
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const limit = 8;
|
||||
const limit = 12;
|
||||
|
||||
const fetchMovies = async (page) => {
|
||||
setLoading(true);
|
||||
|
|
@ -66,7 +67,18 @@ const Main = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Container style={{ marginTop: 20 }}>
|
||||
<div style={{ textAlign: 'center', marginBottom: 20 }}>
|
||||
<Pagination
|
||||
count={pagination.length}
|
||||
page={pagination.page}
|
||||
onChange={handlePageChange}
|
||||
shape="rounded"
|
||||
color="primary"
|
||||
size="large"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{loading ? (
|
||||
<div
|
||||
|
|
@ -80,7 +92,7 @@ const Main = () => {
|
|||
<CircularProgress />
|
||||
</div>
|
||||
) : (
|
||||
<Grid container spacing={2}>
|
||||
<Grid container spacing={2} style={{ marginTop: 3 }}>
|
||||
{pagination.movies.map((item) => (
|
||||
<Grid
|
||||
item
|
||||
|
|
@ -91,7 +103,10 @@ const Main = () => {
|
|||
style={{ display: 'flex', justifyContent: 'space-between' }}
|
||||
key={item.filename}
|
||||
>
|
||||
<Link to={`/res/${item.filename}`} style={{ textDecoration: 'none' }}>
|
||||
<Link
|
||||
to={`/res/${item.filename}`}
|
||||
style={{ textDecoration: 'none', paddingBottom: 10 }}
|
||||
>
|
||||
<Card
|
||||
style={{
|
||||
width: '100%',
|
||||
|
|
@ -110,7 +125,7 @@ const Main = () => {
|
|||
/>
|
||||
<CardContent>
|
||||
<Typography>
|
||||
{truncateFilename(item.filename, 20)}
|
||||
{truncateFilename(item.filename, 15)}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
@ -121,7 +136,7 @@ const Main = () => {
|
|||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ textAlign: 'center', marginTop: 2 }}>
|
||||
<div style={{ textAlign: 'center', marginTop: 20 }}>
|
||||
<Pagination
|
||||
count={pagination.length}
|
||||
page={pagination.page}
|
||||
|
|
|
|||
10
src/Config.js
Normal file
10
src/Config.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
// config.js
|
||||
import { createContext } from 'react';
|
||||
|
||||
const ConfigContext = createContext();
|
||||
|
||||
export const config = {
|
||||
Host: 'http://192.168.31.121:4444',
|
||||
};
|
||||
|
||||
export default ConfigContext;
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
import React from 'react';
|
||||
import {React, useContext} from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import Container from '@mui/material/Container';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import ConfigContext from './Config';
|
||||
|
||||
|
||||
const config = {
|
||||
Host: 'http://192.168.31.121:4444',
|
||||
};
|
||||
|
||||
const VideoPlayer = () => {
|
||||
const config = useContext(ConfigContext);
|
||||
const { filename } = useParams();
|
||||
|
||||
return (
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user