This repository has been archived by the owner on Aug 14, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
66859a6
commit 4973152
Showing
5 changed files
with
900 additions
and
888 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| module.exports = { | ||
| tailwind: { | ||
| config: "./src/tailwind.config.js", | ||
| styled: "styled-components/macro", | ||
| }, | ||
| }; | ||
| module.exports = { | ||
| tailwind: { | ||
| config: "./src/tailwind.config.js", | ||
| styled: "styled-components/macro", | ||
| }, | ||
| }; |
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,42 +1,42 @@ | ||
| import React from "react"; | ||
| import tw from "tailwind.macro"; | ||
| import styled from "styled-components"; | ||
|
|
||
| const electron = window.require("electron"); | ||
| const video = electron.remote.require("./video"); | ||
|
|
||
| const createVideo = (audioPath, image) => { | ||
| video.getVideo(audioPath, image.imageBuffer.toString("base64")); | ||
| }; | ||
|
|
||
| const ButtonWrapper = styled.div` | ||
| ${tw`w-full`} | ||
| display: grid; | ||
| justify-items: center; | ||
| `; | ||
|
|
||
| const Button = styled.button` | ||
| ${tw`font-bold py-2 px-4 border rounded w-1/2 self-center mb-3`}; | ||
| `; | ||
|
|
||
| const PrimaryButton = styled(Button)` | ||
| ${tw`bg-blue-500 hover:bg-blue-700 text-white border-blue-700`}; | ||
| `; | ||
|
|
||
| const Wrapper = styled.div` | ||
| display: grid; | ||
| align-items: end; | ||
| `; | ||
|
|
||
| export default function Actions({ path, setTags, image }) { | ||
| return ( | ||
| <Wrapper> | ||
| <ButtonWrapper> | ||
| <Button onClick={() => createVideo(path, image)}>Export Video</Button> | ||
| </ButtonWrapper> | ||
| <ButtonWrapper> | ||
| <PrimaryButton onClick={() => setTags()}>Export Tags</PrimaryButton> | ||
| </ButtonWrapper> | ||
| </Wrapper> | ||
| ); | ||
| } | ||
| import React from "react"; | ||
| import tw from "tailwind.macro"; | ||
| import styled from "styled-components"; | ||
|
|
||
| const electron = window.require("electron"); | ||
| const video = electron.remote.require("./video"); | ||
|
|
||
| const createVideo = (audioPath, image) => { | ||
| video.getVideo(audioPath, image.imageBuffer.toString("base64")); | ||
| }; | ||
|
|
||
| const ButtonWrapper = styled.div` | ||
| ${tw`w-full`} | ||
| display: grid; | ||
| justify-items: center; | ||
| `; | ||
|
|
||
| const Button = styled.button` | ||
| ${tw`font-bold py-2 px-4 border rounded w-1/2 self-center mb-3`}; | ||
| `; | ||
|
|
||
| const PrimaryButton = styled(Button)` | ||
| ${tw`bg-blue-500 hover:bg-blue-700 text-white border-blue-700`}; | ||
| `; | ||
|
|
||
| const Wrapper = styled.div` | ||
| display: grid; | ||
| align-items: end; | ||
| `; | ||
|
|
||
| export default function Actions({ path, setTags, image }) { | ||
| return ( | ||
| <Wrapper> | ||
| <ButtonWrapper> | ||
| <Button onClick={() => createVideo(path, image)}>Export Video</Button> | ||
| </ButtonWrapper> | ||
| <ButtonWrapper> | ||
| <PrimaryButton onClick={() => setTags()}>Export Tags</PrimaryButton> | ||
| </ButtonWrapper> | ||
| </Wrapper> | ||
| ); | ||
| } |
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,21 +1,21 @@ | ||
| import React from "react"; | ||
| import styled from "styled-components"; | ||
| import Dropzone from "../components/ArtworkDropzone"; | ||
|
|
||
| const electron = window.require("electron"); | ||
| const imageTools = electron.remote.require("./image"); | ||
|
|
||
| const Wrapper = styled.div` | ||
| padding: 0.75rem; | ||
| `; | ||
|
|
||
| export default function Artwork({ image, setImage }) { | ||
| return ( | ||
| <Wrapper> | ||
| <Dropzone | ||
| current={image} | ||
| selectFile={(file) => setImage(imageTools.toBuffer(file.path))} | ||
| ></Dropzone> | ||
| </Wrapper> | ||
| ); | ||
| } | ||
| import React from "react"; | ||
| import styled from "styled-components"; | ||
| import Dropzone from "../components/ArtworkDropzone"; | ||
|
|
||
| const electron = window.require("electron"); | ||
| const imageTools = electron.remote.require("./image"); | ||
|
|
||
| const Wrapper = styled.div` | ||
| padding: 0.75rem; | ||
| `; | ||
|
|
||
| export default function Artwork({ image, setImage }) { | ||
| return ( | ||
| <Wrapper> | ||
| <Dropzone | ||
| current={image} | ||
| selectFile={(file) => setImage(imageTools.toBuffer(file.path))} | ||
| ></Dropzone> | ||
| </Wrapper> | ||
| ); | ||
| } |
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,95 +1,95 @@ | ||
| import React from "react"; | ||
| import tw from "tailwind.macro"; | ||
| import styled from "styled-components"; | ||
| import Artwork from "./artwork"; | ||
|
|
||
| const timestampFormat = "HH:MM:SS"; | ||
|
|
||
| const Form = styled.form``; | ||
|
|
||
| const Wrapper = styled.div` | ||
| display: grid; | ||
| grid-auto-rows: 1fr 1fr; | ||
| height: 100%; | ||
| `; | ||
|
|
||
| const ItemWrapper = styled.div``; | ||
|
|
||
| const TextWrapper = styled.div` | ||
| align-self: end; | ||
| `; | ||
|
|
||
| const Text = styled.input` | ||
| ${tw`appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white`}; | ||
| `; | ||
|
|
||
| export default function InfoView({ info, setInfo }) { | ||
| if (!info.encodedBy) { | ||
| info.encodedBy = "McPodcast"; | ||
| } | ||
| return ( | ||
| <Form> | ||
| <Wrapper> | ||
| <Artwork | ||
| image={info.image} | ||
| setImage={(base64) => | ||
| setInfo({ | ||
| ...info, | ||
| image: { | ||
| mime: "jpeg", | ||
| type: { id: 3, name: "front cover" }, | ||
| imageBuffer: base64, | ||
| }, | ||
| }) | ||
| } | ||
| ></Artwork> | ||
| <TextWrapper> | ||
| <ItemWrapper> | ||
| <Text | ||
| id="grid-first-name" | ||
| type="text" | ||
| placeholder="Podcast Title" | ||
| value={info.title || ""} | ||
| onChange={(e) => setInfo({ ...info, title: e.target.value })} | ||
| /> | ||
| </ItemWrapper> | ||
| <ItemWrapper> | ||
| <Text | ||
| id="grid-first-name" | ||
| type="text" | ||
| placeholder="Podcast" | ||
| value={info.album || ""} | ||
| onChange={(e) => setInfo({ ...info, album: e.target.value })} | ||
| /> | ||
| </ItemWrapper> | ||
| <ItemWrapper> | ||
| <Text | ||
| id="grid-first-name" | ||
| type="text" | ||
| placeholder="Encoded By" | ||
| value={info.encodedBy || ""} | ||
| onChange={(e) => setInfo({ ...info, encodedBy: e.target.value })} | ||
| /> | ||
| </ItemWrapper> | ||
| <ItemWrapper> | ||
| <Text | ||
| id="grid-first-name" | ||
| type="text" | ||
| placeholder="Length" | ||
| value={info.length || timestampFormat} | ||
| onChange={(e) => setInfo({ ...info, length: e.target.value })} | ||
| /> | ||
| </ItemWrapper> | ||
| {/* <ItemWrapper> | ||
| <Text | ||
| id="grid-first-name" | ||
| type="text" | ||
| placeholder="Year" | ||
| value={info.year} | ||
| /> | ||
| </ItemWrapper> */} | ||
| </TextWrapper> | ||
| </Wrapper> | ||
| </Form> | ||
| ); | ||
| } | ||
| import React from "react"; | ||
| import tw from "tailwind.macro"; | ||
| import styled from "styled-components"; | ||
| import Artwork from "./artwork"; | ||
|
|
||
| const timestampFormat = "HH:MM:SS"; | ||
|
|
||
| const Form = styled.form``; | ||
|
|
||
| const Wrapper = styled.div` | ||
| display: grid; | ||
| grid-auto-rows: 1fr 1fr; | ||
| height: 100%; | ||
| `; | ||
|
|
||
| const ItemWrapper = styled.div``; | ||
|
|
||
| const TextWrapper = styled.div` | ||
| align-self: end; | ||
| `; | ||
|
|
||
| const Text = styled.input` | ||
| ${tw`appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white`}; | ||
| `; | ||
|
|
||
| export default function InfoView({ info, setInfo }) { | ||
| if (!info.encodedBy) { | ||
| info.encodedBy = "McPodcast"; | ||
| } | ||
| return ( | ||
| <Form> | ||
| <Wrapper> | ||
| <Artwork | ||
| image={info.image} | ||
| setImage={(base64) => | ||
| setInfo({ | ||
| ...info, | ||
| image: { | ||
| mime: "jpeg", | ||
| type: { id: 3, name: "front cover" }, | ||
| imageBuffer: base64, | ||
| }, | ||
| }) | ||
| } | ||
| ></Artwork> | ||
| <TextWrapper> | ||
| <ItemWrapper> | ||
| <Text | ||
| id="grid-first-name" | ||
| type="text" | ||
| placeholder="Podcast Title" | ||
| value={info.title || ""} | ||
| onChange={(e) => setInfo({ ...info, title: e.target.value })} | ||
| /> | ||
| </ItemWrapper> | ||
| <ItemWrapper> | ||
| <Text | ||
| id="grid-first-name" | ||
| type="text" | ||
| placeholder="Podcast" | ||
| value={info.album || ""} | ||
| onChange={(e) => setInfo({ ...info, album: e.target.value })} | ||
| /> | ||
| </ItemWrapper> | ||
| <ItemWrapper> | ||
| <Text | ||
| id="grid-first-name" | ||
| type="text" | ||
| placeholder="Encoded By" | ||
| value={info.encodedBy || ""} | ||
| onChange={(e) => setInfo({ ...info, encodedBy: e.target.value })} | ||
| /> | ||
| </ItemWrapper> | ||
| <ItemWrapper> | ||
| <Text | ||
| id="grid-first-name" | ||
| type="text" | ||
| placeholder="Length" | ||
| value={info.length || timestampFormat} | ||
| onChange={(e) => setInfo({ ...info, length: e.target.value })} | ||
| /> | ||
| </ItemWrapper> | ||
| {/* <ItemWrapper> | ||
| <Text | ||
| id="grid-first-name" | ||
| type="text" | ||
| placeholder="Year" | ||
| value={info.year} | ||
| /> | ||
| </ItemWrapper> */} | ||
| </TextWrapper> | ||
| </Wrapper> | ||
| </Form> | ||
| ); | ||
| } |
Oops, something went wrong.