Skip to content

Commit

Permalink
Merge pull request #3 from KevinWh0/Edit-Captions
Browse files Browse the repository at this point in the history 
Edit captions
  • Loading branch information
@ChaoticLeah
ChaoticLeah authored Aug 17, 2021
2 parents 5d500ec + 96b86c8 commit c697cc0
Show file tree
Hide file tree
Showing 7 changed files with 143 additions and 64 deletions.
5 changes: 3 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
The Tool: https://kevinwh0.github.io/Styled-Youtube-Captions/

### What does it do?

![image](https://user-images.githubusercontent.com/45321184/120233306-5bc48780-c20a-11eb-80e6-e8054d0e7ccc.png)

As you can see in the image above it lets you create fancy captions for youtube.
Expand All @@ -18,11 +19,11 @@ As you can see in the image above it lets you create fancy captions for youtube.
- Size support! Scale your caption text to any size!
- **Bold**, _italics_, and <u>underlines</u>
- Colored Dropshadow/Glow
- Abity to add captions within the app.
- Ability to change times within the app.
- Super simple and has built in tutorials

### TODO:

- Positioning. (Im not sure if its possible)
- Abity to add captions within the app.
- Ability to change times within the app.
- More animation tools.
106 changes: 60 additions & 46 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,72 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Youtube Styled Subtitle Creator</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="./style/main.css" />
</head>
<body>


<div id = "main">
<div id="subtitleHolder">
<div id = "styleHolder">
<h1>Style Manager</h1>
<div id = "styleButtons">
<button id = "addStyle" class = "styleButton">+</button>
</div>
<div id = "styleEditor">
</div>

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Youtube Styled Subtitle Creator</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="./style/main.css" />
</head>

<body>


<div id="main">
<div id="subtitleHolder">
<div id="styleHolder">
<h1>Style Manager</h1>
<div id="styleButtons">
<button id="addStyle" class="styleButton">+</button>
</div>
<div id = "toolbar">
<h1>How to use this tool?</h1>
<p id = "desc">To the right you will see a tab called the "Style Manager", if you want to make a new style, you do it there by clicking the +. If you want to then select a style to edit it click on any of the numbered buttons, and it will show you that style as well as giving you a way to modify it. <br> If you want to apply that style to any text you can do that with the captions below by surrounding what you want to have that style with (style number). <br><br>E.g. If a caption says "Hello World", and we want the word "World" to have style 1 then we can make it "Hello (1)World(1)"<br><br> The default style is applied to all the text.</p>
<button id = "Save">Save Project</button>
<button id = "Load">Load Project</button>
<br>
<a id = "github" href="https://github.com/KevinWh0/Styled-Youtube-Captions" target="_blank" rel="noopener noreferrer">Want to help improve the tool? You can do it here
<img src="./assets/Github_Logo.png" width="20" height="20"/>
</a>
<p>Tip: select some text and hit Alt/F1 and it will surround the text with the selected style.</p>
<div id="styleEditor">
</div>

</div>
<button id = "download">Download</button>
<!--Open it in a new tab because they probably dont want to have to re-do it all-->
<a hidden href ="./HowToUploadCaptions.html" id = "uploadCaptions" target="_blank" rel="noopener noreferrer"></a>
<button id = "howtoupload" onClick="document.getElementById('uploadCaptions').click();" style = "position:relative; left:50%; transform: translateX(-50%);">How Do I upload it to youtube?</button>

<div id="toolbar">
<h1>How to use this tool?</h1>
<p id="desc">To the right you will see a tab called the "Style Manager", if you want to make a new style, you do
it there by clicking the +. If you want to then select a style to edit it click on any of the numbered
buttons, and it will show you that style as well as giving you a way to modify it. <br> If you want to apply
that style to any text you can do that with the captions below by surrounding what you want to have that style
with (style number). <br><br>E.g. If a caption says "Hello World", and we want the word "World" to have style
1 then we can make it "Hello (1)World(1)"<br><br> The default style is applied to all the text.</p>
<button id="Save">Save Project</button>
<button id="Load">Load Project</button>
<br>
<a id="github" href="https://github.com/KevinWh0/Styled-Youtube-Captions" target="_blank"
rel="noopener noreferrer">Want to help improve the tool? You can do it here
<img src="./assets/Github_Logo.png" width="20" height="20" />
</a>
<p>Tip: select some text and hit Alt/F1 and it will surround the text with the selected style.</p>
</div>




</div>
<button id="download">Download</button>
<!--Open it in a new tab because they probably dont want to have to re-do it all-->
<a hidden href="./HowToUploadCaptions.html" id="uploadCaptions" target="_blank" rel="noopener noreferrer"></a>
<button id="howtoupload" onClick="document.getElementById('uploadCaptions').click();"
style="position:relative; left:50%; transform: translateX(-50%);">How Do I upload it to youtube?</button>

</div>


<div id="uploadVTT">

<input hidden type="file" accept=".vtt" id = "VTTSELECTOR"></button>
<label class="button" for="VTTSELECTOR" id = "vttSelectorButton">Upload VTT File</label>
<button id = "LoadMenu">Load Project</button>
<div id="uploadVTT">

<h3>Currently we only support VTT files. Dont know how to get a VTT file? <a href = "./HowToGetVtt.html">Click Here</a></h3>
</div>
<input hidden type="file" accept=".vtt" id="VTTSELECTOR"></button>
<label class="button" for="VTTSELECTOR" id="vttSelectorButton">Upload VTT File</label>
<button id="LoadMenu">Load Project</button>

<h3>Currently we only support VTT files. Dont know how to get a VTT file? <a href="./HowToGetVtt.html">Click
Here</a></h3>
</div>

</body>
<script src="./scripts/index.js" type="module"></script>

</body>
<script src="./scripts/index.js" type="module"></script>
</html>
</html>
26 changes: 19 additions & 7 deletions scripts/generateFile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
replaceHtml,
toMillis,
} from "./toolbox.js";
//If errors are found, this will be false

//This is the bare bones of the file. It will be filled in when it runs
let baseFile = `
Expand Down Expand Up @@ -54,17 +55,28 @@ export function generateFile() {
for (let i = 0; i < subtitles.length; i++) {
//get a subtitle
let subtitle = subtitles[i];
//get the "header" of the subtitle (This just contains the start and stop timestamp we will need)
let headers = subtitle
.getElementsByClassName("h2")[0]
.innerHTML.split(" --&gt; ");
//get the times of the subtitle (This just contains the start and stop timestamp we will need)
let times = subtitle.getElementsByClassName("h2");
//Get the start time
let startTime = times[0].value;
//get the end time
let stopTime = times[1].value;

//Convert the start time to milliseconds
let startTime = toMillis(headers[0]);
startTime = toMillis(startTime);

//convert the duration to milliseconds
let dir = toMillis(headers[1]) - startTime;

let dir = toMillis(stopTime) - startTime;
//Check if the times are all valid
if (isNaN(dir)) {
alert(
"One or more of your start of stop times is incorrectly formatted."
);
//Bring the user to the error
location.href = "#subtitle" + i;
//Dont download it
return null;
}
//Get the text of that subtitle section
let text = subtitle.getElementsByClassName("subtitleText")[0].value;

Expand Down
48 changes: 42 additions & 6 deletions scripts/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ document.getElementById("VTTSELECTOR").addEventListener("change", () => {
lines.shift();
lines = lines.join("\n");
//Add the subtitle
appendSubtitle(lines, title);
appendSubtitle(lines, title, i);
}
});
//On init we will add a default style that will be auto applied to everything
Expand All @@ -60,19 +60,39 @@ document.getElementById("LoadMenu").addEventListener("click", () => {
});

//Add subtitles to the page
export function appendSubtitle(text, time) {
export function appendSubtitle(text, time, id = 0, location = -1) {
let div = document.createElement("div");
div.setAttribute("class", "SubtitleDiv");
let title = time;
div.innerHTML = `<div class = "titleHolder"><h2 class = "h2">${title}</h2></div>
let title = time.split(" --> ");
/*
div.innerHTML = `<div class = "titleHolder" id="subtitle${id}"><h2 class = "h2">${title}</h2></div>
<div class = "controls">
<button class = "deleteButton" onClick = "this.parentElement.parentElement.remove();">X</button>
</div>
<br>
<textarea class="subtitleText" id="textArea${uniqueIdentifierCounter}">${text}</textarea>
`;
document.getElementById("subtitleHolder").appendChild(div);
*/

div.innerHTML = `<div class = "titleHolder" id="subtitle${id}"> <input type="text" class = "h2" id = "start" value = "${title[0]}"><input type="text" class = "h2" id = "stop" value = "${title[1]}">
</div>
<div class = "controls">
<button class = "deleteButton" onClick = "this.parentElement.parentElement.remove();">X</button>
</div>
<br>
<textarea class="subtitleText" id="textArea${uniqueIdentifierCounter}">${text}</textarea>
<button class = "addSubtitleBelow">+</button>
`;
//If no location is specified add it to the end, otherwise add it to the specified location
if (location == -1)
document.getElementById("subtitleHolder").appendChild(div);
else {
//Location is a element, we will add the new subtitle div after that element
location.after(div);
}

//This lets us detect a selection of a textbox, this is used for the shortcut that autosurrounds
document
Expand All @@ -81,12 +101,28 @@ export function appendSubtitle(text, time) {
lastSelectedTextArea = evnt.target.id;
});

//Add a click listener so that when the + button is clicked we can create another subtitle element under that one

document
.getElementById(`subtitle${id}`)
.parentElement.getElementsByClassName("addSubtitleBelow")[0]
.addEventListener("click", () => {
appendSubtitle(
"",
time,
id + 0.00001,
document.getElementById(`subtitle${id}`).parentElement
);
});

uniqueIdentifierCounter++;
}

//Add the download listener to download the file when download is hit
document.getElementById("download").addEventListener("click", () => {
download(generateFile(), "fancyFontTranscript.ytt");
let file = generateFile();
//If the file was made without problems download it
if (file != null) download(file, "fancyFontTranscript.ytt");
});

document.body.onkeydown = function (e) {
Expand Down
10 changes: 9 additions & 1 deletion style/main.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion style/main.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit c697cc0

Please sign in to comment.