Lino/StickExporterTX
1
0
Fork 0
mirror of https://github.com/LinoSchmidt/StickExporterTX.git synced 2026-03-21 01:51:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

New videoplayer selection

Browse Source
This commit is contained in:
Lino Schmidt
2022-11-24 08:45:10 +01:00
parent 13706757ee
commit ce0f03cff7
1 changed files with 17 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/ui/renderFinishPage.tsx
View File

@@ -5,7 +5,6 @@ import openFolder from "../openFolder";
import {getInOutSettings, getActiveProfile} from "../settings"; import {getInOutSettings, getActiveProfile} from "../settings";
import VideoPlayer from "./videoPlayer"; import VideoPlayer from "./videoPlayer";
import path from 'path'; import path from 'path';
import {platformCharacter} from "../paths";
import {VideoJsPlayerOptions} from "video.js"; import {VideoJsPlayerOptions} from "video.js";
import {logList} from "../logReader"; import {logList} from "../logReader";
@@ -19,9 +18,7 @@ const detailsInnerStyle:CSSProperties = {
} }
function RenderFinishPage() { function RenderFinishPage() {
const [logPlaying, setLogPlaying] = React.useState(path.join(getInOutSettings().output, getInOutSettings().log.substring(1).slice(0, -1).split('""')[0].split(platformCharacter())[getInOutSettings().log.substring(1).slice(0, -1).split('""')[0].split(platformCharacter()).length - 1].replace(".csv", "."+getActiveProfile().videoFormat))); const [logPlaying, setLogPlaying] = React.useState(logList[0].name);
const [outputList, setOutputList] = React.useState([<li key={0}></li>]);
const videoPlayerOptions:VideoJsPlayerOptions = { const videoPlayerOptions:VideoJsPlayerOptions = {
controls: true, controls: true,
@@ -32,24 +29,16 @@ function RenderFinishPage() {
} }
}; };
const [videoSource, setVideoSource] = React.useState({src: logPlaying, type: 'video/'+getActiveProfile().videoFormat.toUpperCase()}); const [videoSource, setVideoSource] = React.useState({src: path.join(getInOutSettings().output, logPlaying+"."+getActiveProfile().videoFormat), type: 'video/'+getActiveProfile().videoFormat.toUpperCase()});
const OutputList = logList.map((inputLog, index) => {
const outputLogPath = path.join(getInOutSettings().output, inputLog.name+"."+getActiveProfile().videoFormat);
return <option key={index} value={inputLog.name} title={outputLogPath}>{inputLog.name}</option>
});
React.useEffect(() => { React.useEffect(() => {
setOutputList(logList.map((inputLog, index) => {
const outputLogPath = path.join(getInOutSettings().output, inputLog.name+"."+getActiveProfile().videoFormat);
return <li key={index}>
<p style={{
textDecoration: logPlaying === outputLogPath ? "underline" : "none",
cursor: logPlaying === outputLogPath ? "default" : "pointer",
}} onClick={() => {
setLogPlaying(outputLogPath);
}} title={outputLogPath}>{inputLog.name}</p>
</li>
}));
setVideoSource({ setVideoSource({
src: logPlaying, src: path.join(getInOutSettings().output, logPlaying+"."+getActiveProfile().videoFormat),
type: 'video/'+getActiveProfile().videoFormat.toUpperCase() type: 'video/'+getActiveProfile().videoFormat.toUpperCase()
}); });
}, [logPlaying]); }, [logPlaying]);
@@ -82,10 +71,16 @@ function RenderFinishPage() {
<div style={{ <div style={{
marginTop: "10px" marginTop: "10px"
}}> }}>
<span className="selectSpan">
<label className="videoSelect" htmlFor="vslct">
<select id="vslct" required={true} value={logPlaying} onChange={e => {
setLogPlaying(e.target.value);
}}>
{OutputList}
</select>
</label>
</span>
<VideoPlayer options={videoPlayerOptions} src={videoSource} /> <VideoPlayer options={videoPlayerOptions} src={videoSource} />
<ol>
{outputList}
</ol>
</div> </div>
</div> </div>
); );