Add Export Chapters button

package.json

@@ -13,6 +13,7 @@
 		"react": "^17.0.0",
 		"react-dom": "^17.0.0",
 		"react-dropzone": "^11.0.1",
+		"react-modal": "^3.14.3",
 		"react-scripts": "4.0.3",
 		"styled-components": "^5.1.1",
 		"tailwindcss": "^2.0.1",

src/components/ChapterPanel.js → src/fileEditor/ChapterPanel.js

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 import tw from "twin.macro";
-import Chapter from "./Chapter";
-import { Button } from "./Buttons";
+import Chapter from "../components/Chapter";
+import { Button } from "../components/Buttons";
 
 const Wrapper = styled.div`
 	${tw`overflow-auto max-h-full`};

src/fileEditor/FileView.js

@@ -3,7 +3,7 @@ import InfoView from "./infoView";
 import styled from "styled-components";
 import Actions from "./actions";
 import LogView from "./LogView";
-import ChapterPanel from "../components/ChapterPanel";
+import ChapterPanel from "./ChapterPanel";
 
 const electron = window.require("electron");
 const id3 = electron.remote.require("./id3");
@@ -16,7 +16,9 @@ const Wrapper = styled.div`
 
 const RightPanel = styled.div`
 	display: grid;
-	grid-template-rows: 4fr 1fr;
+	grid-template-rows: 1fr min-content;
+	max-height: 100%;
+	overflow: auto;
 `;
 
 export default function FileView({ file: { path } }) {
@@ -44,7 +46,13 @@ export default function FileView({ file: { path } }) {
 
 			<RightPanel>
 				<LogView></LogView>
-				<Actions path={path} setTags={() => id3.setTags(path, tags)} image={tags.image} length={tags.length}></Actions>
+				<Actions
+					path={path}
+					setTags={() => id3.setTags(path, tags)}
+					image={tags.image}
+					length={tags.length}
+					chapters={tags.chapter}
+				></Actions>
 			</RightPanel>
 		</Wrapper>
 	) : (

src/fileEditor/LogView.js

@@ -1,14 +1,20 @@
 import React from "react";
+import styled from "styled-components";
+import tw from "twin.macro";
 import { useStore } from "../store/store";
 
+const Wrapper = styled.div`
+	${tw`overflow-auto max-h-full`};
+`;
+
 export default function LogView() {
 	const { state } = useStore();
 
 	return (
-		<div>
+		<Wrapper>
 			{state.logs.map((log) => (
 				<div key={log.timestamp}>{log.content}</div>
 			))}
-		</div>
+		</Wrapper>
 	);
 }

src/fileEditor/actions.js

@@ -1,12 +1,13 @@
 import React, { useState } from "react";
+import Modal from "react-modal";
 import tw from "twin.macro";
 import styled from "styled-components";
 import { Button, PrimaryButton } from "../components/Buttons";
 import { useStore } from "../store/store";
 
 const electron = window.require("electron");
 const video = electron.remote.require("./video");
-const { sideEffect } = electron.remote.require("./utils");
+const { sideEffect, msToTime, stripMs } = electron.remote.require("./utils");
 const { dialog } = electron.remote;
 const timestampFormat = "HH:MM:SS";
 
@@ -31,9 +32,12 @@ const timeToS = (time) => {
 	return parseInt(h) * 60 * 60 + parseInt(m) * 60 + parseInt(s);
 };
 
-export default function Actions({ path, setTags, image, length }) {
+Modal.setAppElement("#root");
+
+export default function Actions({ path, setTags, image, length, chapters }) {
 	const [isCreatingVideo, setIsCreatingVideo] = useState(false);
 	const [err, setErr] = useState(undefined);
+	const [modalOpen, setModalOpen] = useState(false);
 	const { dispatch } = useStore();
 
 	const askForSaveLocation = () => {
@@ -52,7 +56,7 @@ export default function Actions({ path, setTags, image, length }) {
 
 	const log = (message) => dispatch({ type: "ADD_LOG", log: message });
 
-	const onClickCreate = () => {
+	const onClickCreateVideo = () => {
 		dispatch({ type: "ADD_LOG", log: "Create video clicked" });
 		setErr(undefined);
 		askForSaveLocation()
@@ -77,17 +81,26 @@ export default function Actions({ path, setTags, image, length }) {
 
 	return (
 		<Wrapper>
+			<ButtonWrapper>
+				<Button onClick={() => setModalOpen(true)} text="Export Chapters"></Button>
+				<Modal isOpen={modalOpen} onRequestClose={() => setModalOpen(false)} contentLabel="Example Modal">
+					<h2>Chapters</h2>
+
+					<pre>{chapters?.map((chapter) => `[${stripMs(msToTime(chapter.startTimeMs))}] ${chapter.tags.title}\n`)}</pre>
+					<button onClick={() => setModalOpen(false)}>Close</button>
+				</Modal>
+			</ButtonWrapper>
 			<ButtonWrapper>
 				<Button
-					onClick={onClickCreate}
+					onClick={onClickCreateVideo}
 					disabled={isCreatingVideo}
 					err={err}
 					showSpinner={isCreatingVideo}
-					text="Export Video"
+					text="Create Video"
 				></Button>
 			</ButtonWrapper>
 			<ButtonWrapper>
-				<PrimaryButton onClick={() => setTags()} text="Export Tags"></PrimaryButton>
+				<PrimaryButton onClick={() => setTags()} text="Save Tags"></PrimaryButton>
 			</ButtonWrapper>
 		</Wrapper>
 	);