-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #7 from baizeteam/dev
完成压缩功能模块的开发（视频）
- Loading branch information
Showing
15 changed files
with
442 additions
and
41 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| { | ||
| "name": "baize-toolbox", | ||
| "version": "1.0.0", | ||
| "version": "0.0.1", | ||
| "description": "An Electron application with React and TypeScript", | ||
| "main": "./out/main/index.js", | ||
| "author": "[email protected]", | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
14 changes: 14 additions & 0 deletions
14
src/renderer/siteMain/src/pages/Compress/components/TypeModal/index.module.less
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| .video-info { | ||
| .info { | ||
| } | ||
| .setting { | ||
| } | ||
|
|
||
| .title { | ||
| font-size: 16px; | ||
| font-weight: bold; | ||
| } | ||
| .content { | ||
| padding: 12px; | ||
| } | ||
| } |
143 changes: 143 additions & 0 deletions
143
src/renderer/siteMain/src/pages/Compress/components/TypeModal/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,143 @@ | ||
| import React, { useState, useEffect, useRef } from "react"; | ||
| import { Modal, ModalProps, Radio, Select, Slider } from "antd"; | ||
| import "./index.module.less"; | ||
| import { useTranslation } from "react-i18next"; | ||
| import { fileSelectAccetps, fpsList } from "@renderer/utils/fileHelper"; | ||
| import AppLoading from "@renderer/components/AppLoading"; | ||
|
|
||
| interface ITypeModalProps extends Omit<ModalProps, "onOk"> { | ||
| filePath: string; | ||
| onOk: (value: string) => void; | ||
| } | ||
|
|
||
| export default function TypeModal(props: ITypeModalProps) { | ||
| const { filePath, onOk, open } = props; | ||
| const [loading, setLoading] = useState<boolean>(false); | ||
| const [fileInfo, setFileInfo] = useState<any>(); | ||
| const [settingInfo, setSettingInfo] = useState<any>(); | ||
|
|
||
| const settingInfoRef = useRef(settingInfo); | ||
|
|
||
| const { t } = useTranslation(); | ||
|
|
||
| useEffect(() => { | ||
| init(); | ||
| }, [open]); | ||
|
|
||
| // 初始化，获取视频信息 | ||
| const init = async () => { | ||
| if (filePath && open) { | ||
| setLoading(true); | ||
| const res = await window.electron.ipcRenderer.invoke( | ||
| "FFMPEG_GET_VIDEO_INFO", | ||
| { filePath }, | ||
| ); | ||
| console.log(res); | ||
| setFileInfo(res); | ||
| changeSettingInfo({ frameRate: res.frameRate, bitrate: res.bitrate }); | ||
| setLoading(false); | ||
| } | ||
| }; | ||
|
|
||
| // 改变设置信息 | ||
| const changeSettingInfo = (obj) => { | ||
| const params = { ...settingInfoRef.current, ...obj }; | ||
| settingInfoRef.current = params; | ||
| setSettingInfo(params); | ||
| }; | ||
|
|
||
| // 确定 | ||
| const _handleOk = () => { | ||
| onOk(settingInfo); | ||
| }; | ||
|
|
||
| const fpsOptions = fpsList.map((item) => { | ||
| return { | ||
| label: item + "fps", | ||
| value: item, | ||
| disabled: item > fileInfo?.frameRate, | ||
| }; | ||
| }); | ||
|
|
||
| return ( | ||
| <Modal | ||
| title={t("siteMain.pages.compress.typeModal.title")} | ||
| {...props} | ||
| onOk={_handleOk} | ||
| okButtonProps={{ disabled: loading || !settingInfo }} | ||
| > | ||
| <div> | ||
| {loading ? ( | ||
| <AppLoading /> | ||
| ) : ( | ||
| <> | ||
| {fileSelectAccetps?.video.includes(filePath?.split(".").pop()) && ( | ||
| <div styleName="video-info"> | ||
| <div styleName="info"> | ||
| <div styleName="title"> | ||
| {t("siteMain.pages.compress.typeModal.infoTitle")} | ||
| </div> | ||
| <div styleName="content"> | ||
| <div> | ||
| {t("commonText.bitrate")}:{fileInfo?.bitrate} | ||
| </div> | ||
| <div> | ||
| {t("commonText.duration")}:{fileInfo?.duration} | ||
| </div> | ||
| <div> | ||
| {t("commonText.fps")}:{fileInfo?.frameRate} | ||
| </div> | ||
| <div> | ||
| {t("commonText.resolution")}:{fileInfo?.resolution?.width} | ||
| x{fileInfo?.resolution?.height} | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div styleName="setting"> | ||
| <div styleName="title"> | ||
| {t("siteMain.pages.compress.typeModal.compressSetting")} | ||
| </div> | ||
| <div styleName="content"> | ||
| <div> | ||
| {t("commonText.fps")}: | ||
| <Select | ||
| options={fpsOptions} | ||
| defaultValue={fileInfo?.frameRate} | ||
| onChange={(e) => { | ||
| changeSettingInfo({ frameRate: e }); | ||
| }} | ||
| size="small" | ||
| /> | ||
| </div> | ||
| <div> | ||
| {t("commonText.bitrate")}: | ||
| <div style={{ padding: "0 16px" }}> | ||
| <Slider | ||
| defaultValue={fileInfo?.bitrate} | ||
| marks={{ | ||
| 128: "128kbps", | ||
| 256: "256kbps", | ||
| 512: "512kbps", | ||
| 1024: "1Mbps", | ||
| 2048: "2Mbps", | ||
| 4096: "4Mbps", | ||
| }} | ||
| max={fileInfo?.bitrate} | ||
| min={128} | ||
| onChange={(e) => { | ||
| changeSettingInfo({ bitrate: e }); | ||
| }} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| )} | ||
| </> | ||
| )} | ||
| </div> | ||
| </Modal> | ||
| ); | ||
| } |
10 changes: 10 additions & 0 deletions
10
src/renderer/siteMain/src/pages/Compress/index.module.less
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| .compress { | ||
| .action { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| } | ||
| .table { | ||
| margin-top: 16px; | ||
| } | ||
| } |
Oops, something went wrong.