diff --git a/package-lock.json b/package-lock.json index aa89d6d..4ec6fbb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 6fcb795..eb87ecc 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/server/go.mod b/server/go.mod index 43f0147..2278958 100644 --- a/server/go.mod +++ b/server/go.mod @@ -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 +) diff --git a/server/go.sum b/server/go.sum index fd20c56..eeca7a3 100644 --- a/server/go.sum +++ b/server/go.sum @@ -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= diff --git a/server/main.go b/server/main.go index d58dd46..00899b9 100644 --- a/server/main.go +++ b/server/main.go @@ -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 { diff --git a/src/App.js b/src/App.js index f10052c..3b39db7 100644 --- a/src/App.js +++ b/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 ( - +
@@ -25,8 +24,8 @@ const App = () => { Vuetify Logo - - Vuetify Name + + Vuetify Name @@ -38,7 +37,7 @@ const App = () => {
- + ); }; diff --git a/src/Components.js b/src/Components.js index a0402b0..04d3c69 100644 --- a/src/Components.js +++ b/src/Components.js @@ -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 ( - + +
+ +
+
{loading ? (
{
) : ( - + {pagination.movies.map((item) => ( { style={{ display: 'flex', justifyContent: 'space-between' }} key={item.filename} > - + { /> - {truncateFilename(item.filename, 20)} + {truncateFilename(item.filename, 15)} @@ -121,7 +136,7 @@ const Main = () => { )}
-
+
{ + const config = useContext(ConfigContext); const { filename } = useParams(); return (